/* Aperçu de la finition sur la photo de la fiche (30/09/2026). Classes posées par nh-apercu.js.
   Le bloc image = le mur ; le lien = l'objet ; l'image = la photo.
   Cadres, Dibond et marge = les visuels de Nicolas (assets/cadres/, mêmes fichiers que les calques APF),
   posés en « border-image » : ils s'adaptent à toutes les proportions sans image de fond par photo.
   --nh-cm = grand côté du format choisi, en cm ; l'épaisseur du cadre en dépend (cqw = % de la largeur du mur). */

html body.single-product .woocommerce-product-gallery__image,
html body.single-product .woocommerce-product-gallery__image > a,
html body.single-product .woocommerce-product-gallery__image > a img{
  transition:padding .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s ease,background-color .6s ease}

/* le mur : un ton sous le fond de page, la photo recule pour laisser voir l'objet */
html body.single-product .single-product-main-image{min-width:0;max-width:100%}
html body.single-product .woocommerce-product-gallery__image.nh-ap{background:#E7E2D9;padding:clamp(22px,5.5%,48px);
  container-type:inline-size;max-width:100%}
html body.single-product .nh-ap > a{display:block;position:relative;box-sizing:border-box;background:transparent;
  --nh-cadre:max(8px,calc(125cqw / var(--nh-cm,45)))}
html body.single-product .nh-ap > a img{display:block;width:100%!important;height:auto!important;box-sizing:border-box;margin:0!important}
html body.single-product .nh-ap > a::after{content:"";position:absolute;inset:0;pointer-events:none;box-sizing:border-box}

/* argentique sous passe-partout : marge de 3 cm autour du 20 × 30 (--nh-pp = 3/30 de la photo),
   biseau à 45° : bords haut et gauche à l'ombre, bas et droite dans la lumière */
html body.single-product .nh-ap--pp > a{--nh-pp:8.33%;padding:var(--nh-pp);
  background:#F7F2E7 linear-gradient(160deg,#F9F5EB 0%,#F2ECDF 100%);
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 3px 8px rgba(40,34,26,.14),0 16px 26px -16px rgba(40,34,26,.35)}
html body.single-product .nh-ap--pp > a img{padding:0;border:max(2px,.55cqw) solid;
  border-color:#E4DCCD #EAE3D6 #FDFBF6 #F7F2E8;background:#fff;
  box-shadow:0 0 0 1px rgba(60,50,35,.06)}

/* tirage d'art sur papier : feuille posée ; marge blanche = cadre_papier_seul */
html body.single-product .nh-ap--papier > a{box-shadow:0 2px 8px rgba(99,99,99,.25),0 12px 24px -16px rgba(40,34,26,.3)}
html body.single-product .nh-ap--papier.nh-ap--marge > a{--nh-marge:max(10px,2.4cqw);padding:var(--nh-marge);background:#F7F6F3}
html body.single-product .nh-ap--papier.nh-ap--marge > a::after{border:var(--nh-marge) solid transparent;
  border-image:url(cadres/cadre_papier_seul.webp) 29 / var(--nh-marge) stretch}

/* Dibond : plaque rigide décollée du mur (entretoises au dos) — ombre portée large et décalée,
   arête alu et léger reflet, dessinés en CSS (choix de Nicolas le 30/09) */
html body.single-product .nh-ap--dibond > a{box-shadow:1px 2px 0 #A4A8AD,0 14px 18px -6px rgba(20,20,20,.28),
  0 34px 48px -16px rgba(20,20,20,.45),0 60px 80px -40px rgba(20,20,20,.35)}
html body.single-product .woocommerce-product-gallery__image.nh-ap--dibond{padding-bottom:clamp(44px,10%,80px)}
html body.single-product .nh-ap--dibond > a::after{
  background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 38%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}

/* caisse américaine : la baguette de Nicolas (reflet du verre compris), épaisseur proportionnelle au format */
html body.single-product .nh-ap--caisse > a{padding:var(--nh-cadre);
  box-shadow:0 20px 30px -14px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.18)}
html body.single-product .nh-ap--caisse > a::after{border:var(--nh-cadre) solid transparent;
  border-image-slice:72 78 fill;border-image-width:var(--nh-cadre);border-image-repeat:stretch}
html body.single-product .nh-ap--noire > a::after{border-image-source:url(cadres/cadre_caisse_us_noire_horizontal.webp)}
html body.single-product .nh-ap--wenge > a::after{border-image-source:url(cadres/cadre_caisse_us_wenge_horizontal.webp)}
html body.single-product .nh-ap--blanche > a::after{border-image-source:url(cadres/cadre_caisse_us_blanche_horizontal.webp)}
html body.single-product .nh-ap--chene > a::after{border-image-source:url(cadres/cadre_caisse_us_chene_horizontal.webp)}

@media (prefers-reduced-motion:reduce){
  html body.single-product .woocommerce-product-gallery__image,
  html body.single-product .woocommerce-product-gallery__image > a,
  html body.single-product .woocommerce-product-gallery__image > a img{transition:none}}

/* ===== Visionneuse des fiches, v2 sobre (30/09/2026) : photo seule / avec la finition, « chez vous », fondus ===== */
html.nh-vis-ouverte{overflow:hidden!important}
.nh-vis{position:fixed;inset:0;z-index:2147483000;background:#E9E4DC;color:#1A1A1A;font-family:var(--nh-sans,"Instrument Sans",sans-serif);opacity:0;transition:opacity .38s ease,background-color .38s ease}
.nh-vis.est-ouvert{opacity:1}
.nh-vis[hidden]{display:none!important}
.nh-vis--photo{background:#141413}
.nh-vis-scene{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.nh-vis-fond{display:none;position:absolute;left:0;top:0;max-width:none!important;max-height:none!important}
.nh-vis--mur .nh-vis-fond{display:block}
.nh-vis-objet{position:relative;flex:none;container-type:inline-size;transition:opacity .18s ease,transform .38s cubic-bezier(.2,.7,.2,1)}
.nh-vis:not(.est-ouvert) .nh-vis-objet{transform:scale(.985)}
.nh-vis--change .nh-vis-objet,.nh-vis--change .nh-vis-fond{opacity:0}
.nh-vis-fond{transition:opacity .18s ease}
.nh-vis--mur .nh-vis-objet{position:absolute}
.nh-vis-objet>a{display:block;cursor:default}
.nh-vis-objet img{display:block;width:100%!important;height:auto!important;margin:0!important}
.nh-vis--mur .nh-vis-objet>a{box-shadow:0 5px 9px -3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.2)!important}
.nh-vis--mur .nh-vis-objet.nh-ap--dibond>a{box-shadow:1px 1px 0 #A4A8AD,0 9px 12px -4px rgba(0,0,0,.4)!important}
.nh-vis-haut{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:16px;padding:14px clamp(14px,2.5vw,28px)}
.nh-vis-vues{display:flex;background:rgba(245,242,236,.92);border:1px solid rgba(26,26,26,.2)}
.nh-vis--sans-choix .nh-vis-vues [data-vue="finition"]{display:none}
.nh-vis-vues button{appearance:none;background:transparent;border:0;border-radius:0;padding:10px 15px;font:500 11px/1 var(--nh-sans,"Instrument Sans",sans-serif);letter-spacing:.12em;text-transform:uppercase;color:#45453F;cursor:pointer}
.nh-vis-vues button[aria-pressed="true"]{background:#1A1A1A;color:#fff}



.nh-vis-fermer{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:12px;background:rgba(245,242,236,.94);color:#1A1A1A;border:1px solid rgba(26,26,26,.2);border-radius:0;padding:11px 16px;font:500 11.5px/1 var(--nh-sans,"Instrument Sans",sans-serif);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color .2s}
.nh-vis-fermer:hover{background:#fff}
.nh-vis-fermer i{position:relative;width:14px;height:14px;display:block}
.nh-vis-fermer i::before,.nh-vis-fermer i::after{content:"";position:absolute;left:50%;top:50%;width:17px;height:1.4px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.nh-vis-fermer i::after{transform:translate(-50%,-50%) rotate(-45deg)}
.nh-vis-fermer:focus-visible,.nh-vis-vues button:focus-visible,.nh-vis-piece:focus-visible,.nh-vis-nav:focus-visible{outline:2px solid #1A1A1A;outline-offset:3px}
.nh-vis-pieces{display:flex;flex:none;gap:6px;padding:6px;background:rgba(245,242,236,.92)}

.nh-vis-piece{appearance:none;padding:0;border:1px solid transparent;border-radius:0;background:none;cursor:pointer;width:64px;height:42px;opacity:.6;transition:opacity .2s}
.nh-vis-piece:hover{opacity:1}
.nh-vis-piece img{display:block;width:100%;height:100%;object-fit:cover}
.nh-vis-piece.est-actif{border-color:#1A1A1A;opacity:1}
.nh-vis-nav{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;display:flex;align-items:center;justify-content:center;background:rgba(245,242,236,.85);color:#1A1A1A!important;text-decoration:none!important;opacity:.75;transition:opacity .2s,background-color .2s}
.nh-vis-nav:hover{opacity:1;background:#F5F2EC}
.nh-vis-nav::before{content:"";width:9px;height:9px;border-left:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateX(2px) rotate(45deg)}
.nh-vis-nav--suiv::before{transform:translateX(-2px) rotate(-135deg)}
.nh-vis-nav--prec{left:14px}.nh-vis-nav--suiv{right:14px}

@media (max-width:640px){.nh-vis-haut{padding:10px}.nh-vis-vues button{padding:9px 10px;font-size:10px;letter-spacing:.08em}.nh-vis-fermer span{display:none}.nh-vis-fermer{padding:11px 12px}.nh-vis-piece{width:54px;height:36px}.nh-vis-nav{width:38px;height:38px;margin-top:-19px}.nh-vis-nav--prec{left:8px}.nh-vis-nav--suiv{right:8px}}
@media (prefers-reduced-motion:reduce){.nh-vis,.nh-vis-objet,.nh-vis-fond{transition:none}}
/* lien « Voir les proportions chez vous », sous les finitions */
html body.single-product .nh-chez-vous{margin:2px 0 4px!important}
html body.single-product .nh-chez-vous button{appearance:none;display:inline-flex;align-items:center;gap:10px;background:none;border:0;border-radius:0;padding:0 0 3px;border-bottom:1px solid currentColor;font:500 12px/1.2 var(--nh-sans,"Instrument Sans",sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--nh-encre,#1A1A1A);cursor:pointer}
html body.single-product .nh-chez-vous button::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.5 12 4l9 6.5V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z M9 13h6v4H9z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.5 12 4l9 6.5V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z M9 13h6v4H9z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
html body.single-product .nh-chez-vous button:hover{opacity:.7}

/* ===== Visionneuse v3 (30/09) : vue « Dans un intérieur » dans le plein écran + renvoi vers le sélecteur de la fiche ===== */
.nh-vis-vues .nh-c{display:none}
.nh-vis-bas{display:none;position:absolute;left:0;right:0;bottom:0;z-index:3;align-items:flex-end;justify-content:space-between;gap:16px;padding:14px clamp(14px,2.5vw,28px);pointer-events:none}
.nh-vis--mur .nh-vis-bas{display:flex}
.nh-vis-bas>*{pointer-events:auto}
.nh-vis-info{max-width:430px;padding:12px 16px 13px;background:rgba(245,242,236,.95);border:1px solid rgba(26,26,26,.12)}
.nh-vis-legende{margin:0 0 5px!important;font:500 14px/1.35 var(--nh-sans,"Instrument Sans",sans-serif);color:#1A1A1A}
.nh-vis-legende:empty{display:none}
.nh-vis-aide{margin:0!important;font:400 12.5px/1.5 var(--nh-sans,"Instrument Sans",sans-serif);color:#45453F}
.nh-vis-modifier{appearance:none;background:none;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:0;margin-left:2px;font:500 12.5px/1.3 var(--nh-sans,"Instrument Sans",sans-serif);color:#1A1A1A;cursor:pointer}
.nh-vis-modifier:hover{opacity:.7}
.nh-vis-modifier:focus-visible{outline:2px solid #1A1A1A;outline-offset:3px}
@media (max-width:640px){
  .nh-vis-vues .nh-l{display:none}.nh-vis-vues .nh-c{display:inline}
  .nh-vis-bas{flex-direction:column;align-items:stretch;gap:8px;padding:10px}
  .nh-vis-info{max-width:none;padding:10px 12px}
  .nh-vis-legende{font-size:13px}.nh-vis-aide{font-size:12px}
  .nh-vis-pieces{align-self:center}
}

/* ===== Photos en hauteur sur ordinateur (30/09) : la photo tient entière dans la fenêtre, centrée dans sa colonne ===== */
@media (min-width:1000px){
  html body.single-product .woocommerce-product-gallery__image.nh-portrait{max-width:min(100%,calc((100vh - 240px) * var(--nh-r,.667)));margin-left:auto!important;margin-right:auto!important}
  html body.single-product .woocommerce-product-gallery__image.nh-portrait.nh-ap{max-width:min(100%,calc((100vh - 350px) * var(--nh-r,.667) + 110px))}
}

/* v3.1 (30/09) : choix de la taille dans la vue intérieur, transitions douces quand la taille change */
.nh-vis-tailles{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 9px}
.nh-vis-tailles[hidden]{display:none}
.nh-vis-tailles-l{font:500 10.5px/1 var(--nh-sans,"Instrument Sans",sans-serif);letter-spacing:.12em;text-transform:uppercase;color:#6f6a62;margin-right:4px}
.nh-vis-tailles button{appearance:none;background:transparent;border:1px solid rgba(26,26,26,.25);border-radius:0;padding:7px 10px;font:500 12px/1 var(--nh-sans,"Instrument Sans",sans-serif);color:#1A1A1A;cursor:pointer;transition:background-color .2s,border-color .2s}
.nh-vis-tailles button:hover{border-color:#1A1A1A}
.nh-vis-tailles button[aria-pressed="true"]{background:#1A1A1A;border-color:#1A1A1A;color:#fff}
.nh-vis-tailles button:focus-visible{outline:2px solid #1A1A1A;outline-offset:2px}
.nh-vis--mur .nh-vis-objet{transition:opacity .18s ease,width .45s cubic-bezier(.2,.7,.2,1),left .45s cubic-bezier(.2,.7,.2,1),top .45s cubic-bezier(.2,.7,.2,1)}
.nh-vis--mur .nh-vis-fond{transition:opacity .18s ease,left .45s cubic-bezier(.2,.7,.2,1),top .45s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.nh-vis--mur .nh-vis-objet,.nh-vis--mur .nh-vis-fond{transition:none}}

/* ===== 30/09 (18h30) : descriptif de la finition + numéro d'édition dans un seul cadre, logo ArtTrust discret ===== */
html body.single-product .wapf .wapf-field-container.nh-resume:not(.wapf-hide){padding:14px 16px 15px!important;border:1px solid rgba(26,26,26,.16);background:rgba(255,255,255,.32)}
html body.single-product .wapf .wapf-field-container.nh-resume [data-field-id],
html body.single-product .wapf .wapf-field-container.nh-resume .nh-edition{font:400 14px/1.55 var(--nh-sans,"Instrument Sans",sans-serif)!important;font-style:normal!important;letter-spacing:0!important;text-transform:none!important;color:#45453F!important}
html body.single-product .wapf .wapf-field-container.nh-resume .nh-edition{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0 0!important;padding:10px 0 0!important;border:0!important;border-top:1px solid rgba(26,26,26,.12)!important}
html body.single-product .wapf .wapf-field-container.nh-resume .nh-edition[hidden]{display:none!important}
html body.single-product .wapf .wapf-field-container.nh-resume .nh-edition::after{content:"";flex:none;width:46px;height:12px;background:currentColor;opacity:.5;-webkit-mask:url(arttrust.png) center/contain no-repeat;mask:url(arttrust.png) center/contain no-repeat}
/* lien « Quelle taille pour votre mur ? » (ouvre l'onglet des tailles dans les questions fréquentes) */
html body.single-product .nh-chez-vous button::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 16h18v4H3zM6 16v-2M10 16v-3M14 16v-2M18 16v-3M7 4h10v7H7z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 16h18v4H3zM6 16v-2M10 16v-3M14 16v-2M18 16v-3M7 4h10v7H7z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important}
html body.single-product .wapf .wapf-field-container.nh-resume .wapf-field-input{border:0!important;padding:0!important;margin:0!important;font:inherit!important}
