/* ============================================================
   Vitrine 3D — les pièces une à une sur un présentoir qui tourne au défilement.
   La page vitrine.html ; le moteur dans vitrine.js (tout = f(s), s continu).
   ============================================================ */
.vitrine{position:relative;height:calc(8.25 * 90vh + 100vh);}  /* = S_MAX des 7 pièces actuelles ; vitrine.js la recalcule selon les pièces présentes */
.scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  /* dégradé crème → sauge qui monte derrière la pièce (le blanc s'en détache) ; --sol (0 → 1) suit la hauteur de la caméra */
  --sol:0;
  background:linear-gradient(180deg,var(--creme) 0%,var(--creme) calc(20% - var(--sol) * 20%),#DCE4E1 calc(50% - var(--sol) * 30%),#B9CBC5 calc(82% - var(--sol) * 30%),#A3B9B2 100%);}
.vue{position:absolute;inset:0;}
.vue canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.repli{position:absolute;inset:0;display:none;align-items:center;justify-content:center;}
.repli img{max-width:min(560px,86vw);max-height:62vh;object-fit:contain;}

/* cotes : filet tracé en 3D, chiffre en HTML projeté */
.cotes{position:absolute;inset:0;pointer-events:none;}
/* .cote : règle commune dans assets/motion.css (une seule pour le site) */
/* .chiffre : le pourcentage du moment fort reste INVISIBLE partout (arbitrage de Thibault du 08/10 : « les % ne sont pas intéressants ») */
.chiffre{position:absolute;left:50%;top:54%;transform:translateX(-50%);font:300 64px/1 'Cormorant Garamond',serif;color:var(--sapin);
  opacity:0;pointer-events:none;display:none;text-align:center;}
.chiffre small{display:block;margin-top:8px;font:500 11px 'Raleway',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--sapin);}

/* chapitres : un seul lisible à la fois */
.chap{position:absolute;left:max(32px,calc((100vw - 1200px)/2 + 32px));top:50%;width:min(380px,34vw);
  transform:translateY(-50%);opacity:0;pointer-events:none;}
.chap.vis{pointer-events:auto;}
.chap .n{font-weight:500;font-size:var(--t-xs);letter-spacing:.32em;text-transform:uppercase;color:var(--sauge-fonce);display:block;margin-bottom:16px;}
.chap h2{font-size:var(--h-scene,clamp(40px,4.6vw,64px));line-height:1.04;margin-bottom:20px;}
.chap p{font-size:var(--t-m,16px);line-height:1.75;max-width:40ch;}

/* jauge : ancrée à droite avec une marge, texte aligné à droite et jamais coupé (le filet est à GAUCHE du mot) */
.jauge{position:absolute;right:max(28px,calc(env(safe-area-inset-right) + 20px));top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:14px;align-items:flex-end;max-width:min(240px,30vw);pointer-events:none;}
.jauge span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--doux);transition:color .4s;display:flex;align-items:center;gap:10px;
  white-space:nowrap;text-align:right;margin-right:-.2em;}   /* compense l'espacement après la dernière lettre */
.jauge span::before{content:"";flex:none;width:18px;height:1px;background:currentColor;transition:width .4s var(--douce);}
.jauge span.on{color:var(--sapin);} .jauge span.on::before{width:42px;}
@media(max-width:1400px){.jauge{right:max(20px,calc(env(safe-area-inset-right) + 14px));gap:10px;} .jauge span{font-size:10px;letter-spacing:.18em;gap:8px;margin-right:-.18em;} .jauge span::before{width:12px;} .jauge span.on::before{width:28px;}}   /* jamais sous 10 px */
@media(max-width:820px){.jauge{display:none;}}

/* téléphone : la pièce en haut, le texte dessous (titre + phrase) */
@media(max-width:820px){
  .chap{left:20px;right:20px;width:auto;top:auto;bottom:max(18px,3vh);transform:none;padding:18px 18px calc(16px + env(safe-area-inset-bottom));
    background:rgba(251,249,246,.86);background:color-mix(in srgb,var(--porcelaine) 86%,transparent);}
  .chap h2{margin-bottom:12px;} .chap p{font-size:16px;line-height:1.6;}
  .chap p + p{display:none;}
}

/* finale : sous la scène, le présentoir reste plein */
.finale{padding-top:56px;}
/* une section par collection : titre sobre, la vitrine, puis ses cartes (♡) */
.vitrine-section{position:relative;}
.vitrine-titre{padding-top:96px;padding-bottom:8px;}
.vitrine-titre h2{font-size:var(--h-3);margin-top:-6px;}
.vitrine-cartes{padding-top:44px;padding-bottom:36px;max-width:980px;}
.cartes-boites{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),426px));justify-content:center;gap:34px 64px;margin-bottom:28px;}   /* cartes de largeur égale */
.cartes-boites .carte-boite{max-width:none;}
/* la phase « présentoir plein » : une invitation discrète */
.indice{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);margin:0;white-space:nowrap;opacity:0;transition:opacity .6s var(--douce);
  font:500 var(--t-xs) 'Raleway',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--sapin);pointer-events:none;}
.libre .indice{opacity:1;} .mode .indice,.empile .indice{opacity:0;display:none;}
@media(max-width:820px){.vitrine-titre{padding-top:72px;} .indice{bottom:auto;top:62%;letter-spacing:.2em;}}
.finale .wrap{max-width:980px;}
.carte-boite{max-width:460px;text-align:center;display:block;}
.carte-boite h3{font-size:var(--h-3);margin-bottom:12px;}
.carte-boite p{font-size:17px;}
.carte-boite .coeur{margin:14px auto 0;}
.prevue{text-align:center;margin:0 0 22px;}
.rangee{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:14px 0;}
.rangee .vitrine-carte{display:flex;align-items:center;gap:6px;}
.rangee h3{font:500 13px 'Raleway',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--sapin);}
.finale .note{text-align:center;font-size:var(--t-s);color:var(--doux);margin:22px auto 0;max-width:560px;}
.finale .rang-btn{justify-content:center;margin-top:30px;}
/* « J'aime » : même bouton que la collection (posé par likes.js) ; l'or n'apparaît que sur un cœur choisi */
.coeur{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 4px;
  border:none;background:none;cursor:pointer;color:var(--sapin);font:500 var(--t-s) 'Raleway',sans-serif;font-variant-numeric:tabular-nums;}
.coeur:focus-visible{outline:2px solid var(--or);outline-offset:2px;}
.coeur svg{width:17px;height:17px;fill:none;stroke:var(--sapin);stroke-width:1.3;transition:fill .35s,stroke .35s;}
.coeur:hover svg{stroke:var(--sauge);}
.coeur[aria-pressed="true"] svg{fill:var(--or);stroke:var(--or);}
.coeur .n:empty{display:none;}
.coeur.pulse svg{animation:coeur .6s var(--douce);}
@keyframes coeur{35%{transform:scale(1.28);}100%{transform:scale(1);}}

/* sans 3D, ou mouvement réduit : une image fixe, puis les textes empilés */
.vitrine.empile{height:auto!important;}
.empile .scene{position:relative;height:auto;overflow:visible;padding-bottom:20px;}
.empile .vue{position:relative;height:72vh;height:72svh;}
.empile .chap{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;translate:none!important;opacity:1!important;
  width:auto;max-width:640px;margin:0 auto 40px;padding:0 20px;background:none;pointer-events:auto;}
.empile .chap p,.empile .chap.fort p{display:block;}
.empile .jauge,.empile .cotes,.empile .chiffre{display:none;}
.sans3d .repli{display:flex;}
@media (prefers-reduced-motion: reduce){ .coeur.pulse svg{animation:none;} .coeur svg{transition:none;} }

/* ---------- Présentoir plein : une pièce seule ---------- */
html{scrollbar-gutter:stable;}
html.vitrine-mode{overflow:hidden;}                      /* le défilement est ignoré pendant le mode : on revient au même endroit */
.mode .vue canvas{touch-action:none;}                     /* glisser = tourner la pièce */
.mode .chap:not(.seule){visibility:hidden;}
.chap.seule{transition:opacity .45s var(--douce);}
.chap.seule.on{opacity:1;pointer-events:auto;}
/* panneau : phrase → cotes 14 px → actions 20 px → aide 12 px */
.chap.seule{overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;}   /* il défile au doigt, sans entraîner la page */
.seule .cotes-fiche{margin-top:14px;padding-top:12px;border-top:1px solid var(--filet);font-size:13px;line-height:1.4;letter-spacing:.02em;text-transform:none;color:var(--sapin);
  font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;overflow-x:auto;}   /* une ligne, mm en minuscules */
.seule .actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:20px;}
.seule .actions .retour{flex-basis:100%;margin-top:4px;text-align:left;}
/* cible de 44 px : le soulignement suit le mot (text-decoration), pas le bas de la zone cliquable */
.lien-btn{background:none;border:none;padding:14px 0;min-height:44px;cursor:pointer;
  font:500 12px/1 'Raleway',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--sapin);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:var(--sapin);}
.lien-btn.retour{text-decoration-color:var(--sauge);}
.voisines{display:inline-flex;gap:6px;}
.fleche{width:44px;height:44px;border:1px solid var(--filet-fort);background:none;cursor:pointer;color:var(--sapin);font:300 22px/1 'Cormorant Garamond',serif;}
.fleche:hover,.lien-btn:hover{color:var(--sauge-fonce);}
.lien-btn:focus-visible,.fleche:focus-visible,.choix-pieces button:focus-visible{outline:2px solid var(--or);outline-offset:3px;}
.geste-aide,.chap .geste-aide{margin-top:12px;font-size:var(--t-s,13px);line-height:1.6;color:var(--doux);}
/* la liste des pièces au clavier : invisible, sauf la pièce qui a le focus ; seulement quand le présentoir est plein */
.choix-pieces{position:absolute;left:max(32px,calc((100vw - 1200px)/2 + 32px));bottom:28px;display:none;}
.libre .choix-pieces{display:block;}
.mode .choix-pieces{display:none;}
.choix-pieces button{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;}
.choix-pieces button:focus-visible{position:static;width:auto;height:auto;clip:auto;overflow:visible;padding:10px 16px;
  background:var(--porcelaine);border:1px solid var(--sapin);color:var(--sapin);font:500 11px 'Raleway',sans-serif;letter-spacing:.22em;text-transform:uppercase;}
@media(max-width:820px){
  .chap.seule{max-height:52vh;max-height:52svh;overflow:auto;padding-bottom:calc(16px + env(safe-area-inset-bottom));}
  .seule .actions{margin-top:16px;gap:4px 16px;}
  .geste-aide{display:none;}
  .choix-pieces{left:20px;bottom:20px;}
}
@media (prefers-reduced-motion: reduce){ .chap.seule{transition:none;} }
.empile .chap.seule:not(.on),.empile .choix-pieces{display:none;}
.mode .jauge{opacity:0;}
/* abat-jour allumé : la pièce s'assombrit autour (sous le canvas), la lueur chaude se lit mieux */
.vue::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:calc(var(--nuit,0) * .3);
  background:radial-gradient(closest-side at 62% 52%,rgba(38,48,45,.55),rgba(38,48,45,0));}   /* très léger, sans bord visible */
@media(max-width:820px){.vue::before{background:radial-gradient(closest-side at 50% 34%,rgba(38,48,45,.5),rgba(38,48,45,0));}}
.vue canvas{z-index:1;}
/* au-dessus du canvas (sinon les chiffres des cotes passent sous la pièce) */
.chap,.cotes,.chiffre,.jauge,.indice,.choix-pieces,.repli{z-index:2;}
/* abat-jour : passage au blanc porcelaine entre deux pièces (opacité pilotée par le défilement) */
.blanc{position:absolute;inset:0;background:#FBF9F6;opacity:0;pointer-events:none;z-index:4;}
.empile .blanc{display:none;}

/* téléphone couché (même requête que vitrine.js) : textes et panneau à droite, la pièce dans la moitié gauche */
@media (max-width:900px) and (orientation:landscape) and (max-height:560px){
  .chap{left:auto;right:max(16px,env(safe-area-inset-right));width:46%;top:50%;bottom:auto;transform:translateY(-50%);
    max-height:calc(100% - 88px);overflow:hidden;padding:14px 16px;background:rgba(251,249,246,.86);background:color-mix(in srgb,var(--porcelaine) 86%,transparent);}
  .chap h2{margin-bottom:10px;} .chap p{font-size:16px;line-height:1.55;} .chap p + p{display:none;}
  .chap.seule{top:80px;bottom:12px;transform:none;max-height:none;overflow:auto;padding-bottom:calc(14px + env(safe-area-inset-bottom));}
  .jauge,.geste-aide{display:none;}
  .indice{bottom:auto;top:auto;bottom:18px;left:27%;letter-spacing:.2em;}
}

/* Affiche (09/10/2026) : l'image de la collection (fond transparent) tient la place de la vitrine 3D pendant que three.js
   et les modèles se chargent, au lieu d'un fond vide ; elle s'efface à la première image 3D (classe .prete posée par vitrine.js). */
.affiche{position:absolute;z-index:2;pointer-events:none;object-fit:contain;opacity:1;transition:opacity .6s var(--douce);
  top:96px;bottom:64px;left:calc(max(32px,(100vw - 1200px) / 2 + 32px) + min(380px,34vw) + 40px);right:40px;
  width:calc(100% - (max(32px,(100vw - 1200px) / 2 + 32px) + min(380px,34vw) + 80px));height:calc(100% - 160px);}
.prete .affiche{opacity:0;}
.sans3d .affiche,.empile .affiche{display:none;}
@media(max-width:820px){.affiche{top:80px;left:12px;right:12px;bottom:auto;width:calc(100% - 24px);height:calc(62% - 80px);}}
@media (prefers-reduced-motion: reduce){.affiche{transition:none;}}

/* Photos d'atelier (11/10/2026) : la vraie pièce, à cru, en galerie éditoriale sous la vitrine — format carré commun,
   sans cadre ni ombre, légende en petites capitales ; seul geste : la photo se rapproche à peine au survol. */
.atelier-photos{margin:0 auto 34px;max-width:880px;}
.atelier-photos .caps{display:block;text-align:center;margin-bottom:22px;text-wrap:balance;}
.galerie-atelier{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:20px;}
.galerie-atelier[style*="--n:1"]{max-width:300px;margin:0 auto;}
.photo-atelier{margin:0;}
.photo-atelier .ph{overflow:hidden;border-radius:2px;background:var(--creme,#efebe7);}
.photo-atelier img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:transform .9s var(--douce);}
.photo-atelier figcaption{display:flex;align-items:center;justify-content:center;gap:2px;padding-top:6px;}
.photo-atelier figcaption h3{font:500 11px/1.3 'Raleway',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--sapin);margin:0;}
@media(hover:hover){.photo-atelier:hover img{transform:scale(1.035);}}
@media(max-width:600px){.galerie-atelier{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;} .galerie-atelier[style*="--n:1"]{grid-template-columns:1fr;max-width:240px;}.photo-atelier figcaption h3{letter-spacing:.12em;}}
@media(prefers-reduced-motion:reduce){.photo-atelier img{transition:none;}}

/* La vraie pièce, à cru, dans le texte de son chapitre (11/10/2026) : une petite photo sobre sous la phrase */
.chap-photo{margin:22px 0 0;display:flex;align-items:flex-end;gap:14px;}
.chap-photo img{display:block;width:132px;height:132px;object-fit:cover;border-radius:2px;flex:none;}
.chap-photo figcaption{font:500 var(--t-xs,11px)/1.4 'Raleway',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-fonce);max-width:15ch;}
@media(max-width:820px){.chap-photo{margin-top:12px;align-items:center;gap:12px;}.chap-photo img{width:58px;height:58px;}.chap-photo figcaption{max-width:none;letter-spacing:.16em;}}