/* UBQC, v2 : « Votre cabine vous attend. »
   La page est la boutique : on y marche le long du mur, on y prend des cintres, on y prépare sa cabine.
   Une seule forme signature, déclinée partout : l'étiquette (pointe, trou, œillet doré),
   aux couleurs de l'enseigne : l'ivoire du mur, le noir des capitales, l'or des minuscules.
   Le jour quand la boutique est ouverte, la nuit quand elle dort. */

:root {
  --mur: #ecebe6;
  --ivoire: #f4efe6;
  --blanc: #fffdf8;
  --noir: #151412;
  --or: #c8a15d;
  --or-clair: #e6c88a;
  --or-fonce: #8a6a30;
  --canard: #146c77;
  --cocotte: #f2b323;
  --fond: var(--mur);
  --texte: var(--noir);
  --texte-doux: #4a463f;
  --dore: #8a6a30;
  --voile: 236 235 230;
  --entete: 76px;
  --gouttiere: clamp(16px, 4.4vw, 84px);
  --f-enseigne: 'Rokkitt', Rockwell, 'Roboto Slab', Georgia, serif;
  --f-texte: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --papier: linear-gradient(97deg, #f6f1e8 0%, #efe8dc 55%, #f4eee4 100%);
  --papier-noir: linear-gradient(97deg, #1d1b18 0%, #121110 55%, #1a1816 100%);
  --papier-or: linear-gradient(97deg, #d8b673 0%, #c49a52 55%, #d2ad66 100%);
  color-scheme: light;
}

html.nuit {
  --fond: #0c1416;
  --texte: #f3eee5;
  --texte-doux: #d6cfc3;
  --dore: #d2ab66;
  --voile: 12 20 22;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 1.0625rem/1.55 var(--f-texte);
  overflow-x: hidden;
  transition: background-color .8s ease, color .8s ease;
}
html.sur-cintre body { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
p { margin: 0; }
.sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* les couches : la scène 3D (-2), le voile de l'heure par-dessus (-1), puis la page. Une page intérieure ne fait pas de contexte
   d'empilement (.page-scene) : ses bandes et tiroirs peuvent passer au-dessus de l'en-tête, et le voile reste sous elle */
#boutique { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; }
main { position: relative; z-index: 1; }
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, rgb(30 20 10 / 0) 55%, rgb(30 20 10 / .14) 100%);
}
html.nuit body::after { background: radial-gradient(ellipse 70% 65% at 50% 46%, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / .45) 100%); }
html.statique body::after { display: none; }

/* ------------------------------------------------------------ l'arrivée : l'écran de chargement de l'accueil, la boutique avant d'ouvrir.
   L'enseigne sous son spot (jamais d'écran noir), et dessous, la tringle des nouveautés (app.js, « l'arrivée ») : chaque photo chargée
   arrive sur son cintre, une étiquette compte les pièces sorties, trois étapes se cochent dans l'ordre, puis vient la ligne vraie selon
   l'heure. La lumière monte avec l'avancement (--p, de 0 à 1) : le noir se réchauffe, et le jour on finit sur le mur clair de la boutique
   (l'ouverture 3D part allumée, seule la caméra recule). À la sortie, la tringle s'efface sur place ; l'enseigne glisse à la place exacte
   où la 3D montre la sienne au départ de l'ouverture, la ligne de l'heure dessous, et le fondu passe de l'une à l'autre, sans double.
   (L'arrivée A de la maquette, index.html?arrivee=A, repliée ici.) */
.chargement {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-content: center; justify-items: center;
  background: color-mix(in srgb, #ecebe6 calc(var(--p, 0) * var(--p, 0) * 100%), #15191d); color: #161311;
  transition: opacity .75s ease .05s, visibility 0s linear .8s;
}
.chargement::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 74% 84% at 50% 54%, #f4ead8 0%, #efe0c4 42%, rgb(222 196 152 / .86) 66%, rgb(120 102 78 / .3) 88%, rgb(21 25 29 / 0) 100%);
  animation: chargement-spot 1s linear both;
}
@keyframes chargement-spot { 0% { opacity: .8; } 9% { opacity: .66; } 16% { opacity: 1; } 30% { opacity: .84; } 40%, 100% { opacity: 1; } }
.chargement::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: calc(var(--p, 0) * var(--p, 0));
  background: radial-gradient(ellipse 120% 100% at 50% 50%, #f4f0e7 0%, #ecebe6 55%, #dcd6cb 100%); }
.chargement > * { position: relative; z-index: 1; }
html.nuit .chargement { background: #15191d; }
html.nuit .chargement::after { opacity: calc(var(--p, 0) * .2); }
.chargement.fini { opacity: 0; visibility: hidden; }
html:not(.js) .chargement, html.statique .chargement { display: none; }
/* l'enseigne : les tracés de l'enseigne 3D (app.js, lettering.json), à peu près à sa taille au départ de l'ouverture ; la sortie la pose
   exactement sur sa projection. Cachée le temps de les charger (.vue) ; sans eux, les lettres, comme celles de la boutique : les
   capitales noires et mates, les minuscules dorées, en relief. La caméra 3D a un angle vertical fixe : l'enseigne garde la même part de
   la hauteur (vh), plafonnée par la largeur. */
.chargement-enseigne { font: 800 min(28.8vh, 16.2vw)/1 var(--f-enseigne); letter-spacing: -.01em; color: var(--or-fonce); white-space: nowrap; transform: scaleX(.672); }
.chargement-enseigne:not(.vue) { visibility: hidden; }
.chargement-enseigne span { color: transparent; background: linear-gradient(180deg, #efd8a2 0%, #c8a15d 40%, #8a6a30 74%, #b48c48 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 2px rgb(50 32 12 / .35)); }
.chargement-enseigne b { font-weight: 900; color: #161311; -webkit-text-fill-color: #161311; }
.chargement-enseigne.traces { transform: none; line-height: 0; }
.chargement-enseigne.traces svg { display: block; height: min(22.2vh, 12.5vw); width: auto; overflow: visible; filter: drop-shadow(0 3px 2px rgb(50 32 12 / .35)); }
/* la ligne sous l'enseigne : elle ne sert qu'à la sortie, quand la 3D ne donne pas la place de son enseigne */
.chargement-texte { display: none; margin-top: 1.6vh; }

/* la tringle : --l, la largeur d'un tirage (sur téléphone aussi, des nouveautés qu'on reconnaît) ; la tringle prend sa hauteur */
.chargement-tringle { --l: clamp(64px, 7.6vw, 112px); width: min(1280px, 96vw); margin-top: 3vh; display: grid; justify-items: center; }
/* sous les étapes, la place d'une étiquette (3,1 rem, la hauteur d'une .etiquette ; 2,85 sur téléphone) : celle que gardait, cachée,
   la porte « Entrer sans attendre » du prototype, qui ne se montrait qu'au ralenti. On entre de soi-même dès que la scène le peut ; la
   mise en page validée, elle, reste la même */
.chargement-tringle::after { content: ''; height: 3.1rem; margin-top: 1.8vh; }
/* les bords de la tringle s'effacent : un tirage qui entre ou qui sort n'y est jamais coupé net */
.chargement-rail { position: relative; width: 100%; height: calc(var(--l) * 1.3 + 50px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.chargement-barre { position: absolute; left: 0; right: 0; top: 14px; height: 5px; border-radius: 3px; background: linear-gradient(#3a3530, #0e0d0c); box-shadow: 0 2px 4px rgb(0 0 0 / .25); }
.chargement-train { --g: clamp(12px, 1.6vw, 22px); position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: flex-start; gap: var(--g); padding: 0 6%; }
.chargement-cintre {
  position: relative; flex: none; width: var(--l); padding-top: 7px;
  display: grid; justify-items: center; transform-origin: 50% 14px;
  /* le balancement n'agit qu'une fois le tirage arrivé (sans remplissage avant son départ : il écraserait la translation de l'entrée) */
  animation: chargement-arrive .8s cubic-bezier(.2, .8, .2, 1) both, chargement-balance 2.6s ease-in-out .8s;
}
/* en retard sur le chargement, ou à l'ouverture : une entrée plus vive (app.js) */
.chargement-cintre.vite { animation: chargement-arrive .45s cubic-bezier(.2, .8, .2, 1) both, chargement-balance 2.6s ease-in-out .45s; }
/* le nouveau tirage entre par la droite, toujours à droite de sa place : il ne passe jamais sur son voisin, ni en transparence */
@keyframes chargement-arrive { from { margin-left: calc(-1 * (var(--l) + var(--g))); transform: translateX(calc(var(--l) * 1.7)) rotate(4deg); } }
/* un balancement léger : le bas d'un tirage ne va jamais jusqu'à son voisin */
@keyframes chargement-balance { 0% { transform: rotate(0); } 22% { transform: rotate(-2.4deg); } 48% { transform: rotate(1.4deg); } 72% { transform: rotate(-.6deg); } 100% { transform: rotate(0); } }
.chargement-crochet { width: 13px; height: 13px; border: 2px solid #c9c9c9; border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%; transform: rotate(-45deg); margin-bottom: -2px; }
.chargement-bois { width: 100%; height: 7px; border-radius: 3px; background: linear-gradient(#ddb985, #b2844b 60%, #8d6436); box-shadow: 0 2px 3px rgb(0 0 0 / .25); }
.chargement-cintre img { width: 94%; aspect-ratio: 3 / 4; object-fit: cover; margin-top: -1px; border: 3px solid #f6f3ec; border-top-width: 4px; background: #f6f3ec; box-shadow: 0 7px 14px rgb(30 22 12 / .32); transform: rotate(var(--incl, 0deg)); }
.chargement-compteur {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .45rem;   /* « sur 14 » collé au nombre */
  margin-top: 1.4vh; padding: .55rem 1.1rem .6rem 2.1rem; color: #161311; background: var(--papier);
  clip-path: polygon(1.1rem 0, 100% 0, 100% 100%, 1.1rem 100%, 0 50%); filter: drop-shadow(0 4px 8px rgb(0 0 0 / .18));
}
.chargement-oeillet { position: absolute; left: 1.05rem; top: 50%; width: .55rem; height: .55rem; margin-top: -.275rem; border-radius: 50%; background: #15191d; box-shadow: 0 0 0 2px var(--or); }
.chargement-compteur b { font: 800 clamp(1.7rem, 3.2vw, 2.3rem)/1 var(--f-enseigne); font-variant-numeric: tabular-nums; }
.chargement-compteur span { font: 700 1.05rem/1 var(--f-enseigne); color: #4a3c2a; }
.chargement-compteur small { grid-column: 1 / -1; font: 600 .74rem/1.2 var(--f-texte); letter-spacing: .06em; text-transform: uppercase; color: #6d5a3c; }
.chargement-tringle.ouvert .chargement-cintre.pose { animation: chargement-frisson .7s ease-in-out both; }
@keyframes chargement-frisson { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(5deg); } 65% { transform: rotate(-3deg); } }
/* les étapes, cochées l'une après l'autre ; puis la ligne vraie selon l'heure */
.chargement-etapes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.4rem; margin: 1.5vh 0 0; padding: 0; font: 600 clamp(.95rem, 1.25vw, 1.15rem)/1.3 var(--f-texte); color: #6d5a3c; }
.chargement-etapes li { display: inline-flex; align-items: center; gap: .4rem; opacity: .55; transition: opacity .4s ease; }
.chargement-etapes li::before { content: ''; width: .8rem; height: .8rem; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.chargement-etapes li[data-etat='encours'] { opacity: 1; color: #3d3122; }
.chargement-etapes li[data-etat='encours']::before { border-right-color: transparent; animation: chargement-tourne .9s linear infinite; }
.chargement-etapes li[data-etat='fait'] { opacity: 1; color: #3d3122; }
.chargement-etapes li[data-etat='fait']::before { content: '✓'; width: auto; height: auto; border: 0; font-weight: 700; color: var(--or-fonce); }
@keyframes chargement-tourne { to { transform: rotate(1turn); } }
.chargement-final { min-height: 1.3em; margin-top: 1.1vh; font: 700 clamp(1.05rem, 1.7vw, 1.35rem)/1.25 var(--f-enseigne); color: #161311; opacity: 0; transition: opacity .5s ease; }
.chargement-tringle.ouvert .chargement-final { opacity: 1; }
/* la sortie (app.js) : la tringle s'efface sur place, hors du flux ; l'enseigne reprend sa place d'origine, celle de l'enseigne 3D au
   premier plan de l'ouverture, et la ligne de l'heure vient dessous. Les deux enseignes se fondent alors l'une dans l'autre, sans double.
   Sans la place de la 3D, l'enseigne reprend sa marge et la ligne de l'heure vient dessous, dans la grille */
.chargement.sortie .chargement-tringle { opacity: 0; transition: opacity .22s ease; pointer-events: none; }
.chargement.sortie .chargement-final { opacity: 0; transition: none; }   /* une seule ligne de l'heure : celle qui vient sous l'enseigne */
.chargement.sortie .chargement-enseigne { margin-top: 2.5vh; }
.chargement.sortie .chargement-enseigne.traces svg { width: 100%; height: 100%; }
.chargement.sortie .chargement-texte { display: block; font: 700 1.1rem/1.2 var(--f-enseigne); color: #161311; animation: chargement-apparait .35s ease .3s both; }   /* après l'effacement de l'étiquette (.22 s) : jamais deux textes l'un sur l'autre */
@keyframes chargement-apparait { from { opacity: 0; } }

/* l'ouverture : la boutique s'allume d'abord, l'en-tête et le texte d'accueil viennent en dernier, sans bruit */
html.ouverture .entete,
html.ouverture .panneau--accueil > *,
html.ouverture .panneau--accueil::before { opacity: 0; }
html.ouverture .entete, html.ouverture .panneau--accueil > * { transform: translateY(.5rem); }
html.ouverture .entete { transform: translateY(-.4rem); }
html.ouverture-fin .entete,
html.ouverture-fin .panneau--accueil > *,
html.ouverture-fin .panneau--accueil::before { transition: opacity 1s ease var(--d, 0s), transform 1.3s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
html.ouverture-fin .panneau--accueil > :nth-child(2) { --d: .12s; }
html.ouverture-fin .panneau--accueil > :nth-child(3) { --d: .26s; }
html.ouverture-fin .panneau--accueil > :nth-child(4) { --d: .36s; }
html.ouverture-fin .panneau--accueil > :nth-child(5) { --d: .46s; }
html.ouverture-fin .entete { --d: .55s; }
html.ouverture-net.ouverture-fin .entete,
html.ouverture-net.ouverture-fin .panneau--accueil > *,
html.ouverture-net.ouverture-fin .panneau--accueil::before { transition: none; }

/* ------------------------------------------------------------ l'étiquette : boutons et liens d'action */
.etiquette {
  --h: 3.1rem;
  --pointe: calc(var(--h) * .42);
  --trou: calc(var(--h) * .41);
  --fond-etiquette: var(--papier);
  position: relative;
  display: inline-flex; align-items: center; gap: .55em;
  min-height: var(--h);
  padding: .5em 1.3em .5em calc(var(--pointe) + 1.15em);
  border: 0; border-radius: 0;
  background:
    radial-gradient(circle at var(--trou) 50%, #0000 4.6px, var(--or-clair) 5px, var(--or) 6.4px, var(--or-fonce) 7.6px, #0000 8px),
    var(--fond-etiquette);
  color: var(--noir);
  font: 700 1.14rem/1.05 var(--f-enseigne);
  letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(var(--pointe) 0, 100% 0, 100% 100%, var(--pointe) 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at var(--trou) 50%, #0000 4.4px, #000 5.1px);
          mask: radial-gradient(circle at var(--trou) 50%, #0000 4.4px, #000 5.1px);
  transform-origin: var(--trou) 50%;
  transition: filter .2s;
}
.etiquette--noire { --fond-etiquette: var(--papier-noir); color: var(--ivoire); }
.etiquette--or { --fond-etiquette: var(--papier-or); color: var(--noir); }
.etiquette:hover { animation: balance 1s cubic-bezier(.25, .8, .35, 1); filter: brightness(1.05); }
.etiquette:active { transform: rotate(-4deg); }
.etiquette:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--cocotte), inset 0 0 0 5px var(--noir); }
@keyframes balance {
  0% { transform: rotate(0); }
  20% { transform: rotate(-6deg); }
  46% { transform: rotate(3.4deg); }
  70% { transform: rotate(-1.4deg); }
  100% { transform: rotate(0); }
}
.actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.5rem; }
/* la nuit, le bouton principal passe à l'or : il ne se noie pas dans le noir */
html.nuit .etiquette--noire { --fond-etiquette: var(--papier-or); color: var(--noir); }
.rassure { margin-top: .7rem !important; font-weight: 600; font-size: 1rem; }

/* ------------------------------------------------------------ l'en-tête */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 30;
  height: var(--entete);
  display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 2.4rem);
  padding: 0 var(--gouttiere);
  pointer-events: none;
}
.entete > * { pointer-events: auto; }
.entete::before {
  content: ''; position: absolute; inset: 0 0 -46px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgb(var(--voile) / .96) 0%, rgb(var(--voile) / .9) 55%, rgb(var(--voile) / 0) 100%);
}
/* l'accueil, la cabine, venir : le voile tient dans la hauteur de l'en-tête, il ne mange plus le haut de la scène
   (mode et maison ont leurs propres réglages ; la cabine se cadre juste dessous, cabine-form.js) */
html:is(:not(.page), .page-cabine, .page-venir) .entete::before {
  inset: 0 0 -10px;
  background: linear-gradient(rgb(var(--voile) / .94), rgb(var(--voile) / .88) 62%, rgb(var(--voile) / 0));
}
.marque { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }
.marque img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.marque-nom { font: 800 1.5rem/1 var(--f-enseigne); color: var(--dore); letter-spacing: -.005em; white-space: nowrap; }
.marque-nom b { font-weight: 900; color: var(--texte); }
.etat { display: inline-flex; align-items: center; gap: .6rem; font-size: .96rem; color: var(--texte-doux); }
.nav { display: flex; gap: 1.4rem; }
.nav a { font-weight: 600; font-size: .98rem; text-decoration: none; background: linear-gradient(var(--or), var(--or)) left bottom / 0 2px no-repeat; transition: background-size .25s; padding-bottom: 2px; }
.nav a:hover, .nav a:focus-visible { background-size: 100% 2px; outline: none; }
.etat-lien { color: inherit; text-decoration: none; }
.etat-lien:hover, .etat-lien:focus-visible { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .2em; outline: none; }
.etat-voyant { flex: none; width: .62rem; height: .62rem; border-radius: 50%; background: var(--cocotte); box-shadow: 0 0 0 .2rem rgb(242 179 35 / .22), 0 0 14px rgb(242 179 35 / .85); }
html.ferme .etat-lien { color: inherit; text-decoration: none; }
.etat-lien:hover, .etat-lien:focus-visible { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .2em; outline: none; }
.etat-voyant { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; }
.etiquette--compteur { --h: 2.7rem; font-size: 1.06rem; }
.compte { display: inline-grid; place-items: center; min-width: 1.55em; height: 1.55em; padding: 0 .3em; border-radius: 1em; background: var(--noir); color: var(--or-clair); font: 800 .86em/1 var(--f-enseigne); }
.etiquette--compteur.secoue { animation: balance 1.1s cubic-bezier(.25, .8, .35, 1); }
.interrupteur { display: inline-flex; align-items: center; gap: .6rem; padding: .3rem 0; border: 0; background: none; cursor: pointer; font: 500 .96rem/1.2 var(--f-texte); color: var(--texte); }
.interrupteur[hidden] { display: none; }
.interrupteur-plaque { position: relative; flex: none; width: 1.45rem; height: 1.85rem; border-radius: .32rem; background: linear-gradient(#f3f0e9, #d9d4ca); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18), 0 2px 5px rgb(0 0 0 / .35); }
.interrupteur-plaque::after { content: ''; position: absolute; left: 50%; top: 50%; width: .62rem; height: 1.05rem; border-radius: .18rem; translate: -50% -50%; background: linear-gradient(#fbfaf6 0 45%, #cfc9be 55% 100%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
html:not(.nuit) .interrupteur-plaque::after { background: linear-gradient(#cfc9be 0 45%, #fbfaf6 55% 100%); }
.interrupteur:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 4px; }
.interrupteur:hover .interrupteur-plaque { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18), 0 2px 5px rgb(0 0 0 / .35), 0 0 0 3px rgb(242 179 35 / .45); }

/* de 1024 à 1440 px, l'en-tête tient sur une ligne : l'état de la boutique passe sous son nom, comme la plaque des horaires sous l'enseigne */
@media (min-width: 1024px) and (max-width: 1440px) {
  .entete { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: 1fr 1fr; align-items: center; column-gap: clamp(1rem, 2.4vw, 2.4rem); row-gap: 0; }
  .marque { grid-column: 1; grid-row: 1 / -1; }
  .marque-nom { translate: 0 -.6rem; }
  .etat { grid-column: 1; grid-row: 2; align-self: start; margin: -.1rem 0 0 calc(46px + .75rem); gap: .45rem; font-size: .86rem; line-height: 1.3; white-space: nowrap; }
  .etat-voyant { width: .52rem; height: .52rem; }
  .nav { grid-column: 2; grid-row: 1 / -1; }
  .nav a, .interrupteur { white-space: nowrap; }
  .entete-actions { grid-column: 3; grid-row: 1 / -1; justify-self: end; }
}
/* de 761 à 1023 px, même ordonnance : l'état sous le nom, en une ligne ; l'interrupteur n'est plus que sa plaque (son nom reste lu) */
@media (min-width: 761px) and (max-width: 1023px) {
  .entete { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: 1fr 1fr; align-items: center; column-gap: 1.1rem; row-gap: 0; }
  .marque { grid-column: 1; grid-row: 1 / -1; gap: .6rem; }
  .marque img { width: 40px; height: 40px; }
  .marque-nom { translate: 0 -.6rem; font-size: 1.36rem; }
  .etat { grid-column: 1; grid-row: 2; align-self: start; margin: -.15rem 0 0 calc(40px + .6rem); gap: .42rem; font-size: .8rem; line-height: 1.3; white-space: nowrap; }
  .etat-voyant { width: .5rem; height: .5rem; }
  .nav { grid-column: 2; grid-row: 1 / -1; gap: 1rem; }
  .nav a { font-size: .94rem; white-space: nowrap; }
  .entete-actions { grid-column: 3; grid-row: 1 / -1; justify-self: end; gap: .75rem; }
  .interrupteur > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .etiquette--compteur { --h: 2.45rem; font-size: .98rem; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .entete { column-gap: 1rem; }
  .marque img { width: 40px; height: 40px; }
  .marque { gap: .6rem; }
  .etat { margin-left: calc(40px + .6rem); font-size: .82rem; }
  .nav { gap: 1.05rem; margin-left: .5rem; }
  .entete-actions { gap: .8rem; }
  .interrupteur { gap: .45rem; font-size: .9rem; }
  .etiquette--compteur { --h: 2.5rem; font-size: 1rem; }
}

/* ------------------------------------------------------------ les stations */
.station { position: relative; display: grid; align-content: center; }
.station--accueil { height: 112vh; }
#arrivages { height: 160vh; }
#tailles { height: 125vh; }
#mariages { height: 120vh; }
#maison { height: 150vh; }
.station--cabine { height: 170vh; align-content: start; }
#clientes { height: 125vh; }
.station--venir { height: 100vh; }
.cadre {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: calc(var(--entete) + 3vh) var(--gouttiere) 7.5vh;
}
.station--cabine .cadre { position: sticky; top: 0; justify-content: center; padding-bottom: 4vh; }

.panneau { position: relative; max-width: 35rem; }
.panneau::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -4rem -6rem -3.5rem -9rem;
  background: radial-gradient(closest-side, rgb(var(--voile) / .86), rgb(var(--voile) / .62) 58%, rgb(var(--voile) / 0));
}
html.nuit .panneau::before { background: radial-gradient(closest-side, rgb(var(--voile) / .9), rgb(var(--voile) / .72) 60%, rgb(var(--voile) / 0)); }
/* sur ordinateur, quand la boutique est en 3D, ces textes vivent dans la scène (écriteaux) : ils restent ici pour les lecteurs d'écran */
html.scene3d .panneau--scene { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* au clavier, le panneau réapparaît en carte dès qu'un de ses liens a le focus (et l'étiquette accrochée s'efface) */
html.scene3d .panneau--scene:focus-within { position: relative !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; padding: 1.5rem 1.7rem 1.7rem; background: var(--papier); color: var(--noir); box-shadow: 0 12px 34px rgb(20 14 8 / .28); }
html.scene3d .panneau--scene:focus-within::before { display: none; }
html.scene3d:has(.panneau--scene:focus-within) .ancre { visibility: hidden; }

h1, h2 { margin: 0; font-family: var(--f-enseigne); font-weight: 800; line-height: .93; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 6vw, 6.3rem); }
h2 { font-size: clamp(2.4rem, 4.5vw, 4.7rem); }
.panneau > p, .panneau .citation { margin-top: 1rem; max-width: 31em; text-wrap: pretty; }
.surtitre { margin: 0 0 1.1rem !important; font-size: 1.02rem; color: var(--texte-doux); }
.chapo { font-size: clamp(1.06rem, 1.2vw, 1.22rem); line-height: 1.48; }
.panneau--accueil { max-width: 40rem; }
.panneau--accueil h1 { max-width: 9.5em; }
.lien-maison { display: inline-block; margin-top: 1rem; font-weight: 500; text-underline-offset: .22em; text-decoration-color: var(--or); text-decoration-thickness: 2px; }
.lien-maison:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 3px; }
.citation { margin: 1.3rem 0 0; padding: 0; }
.citation p { font: 700 clamp(1.3rem, 1.7vw, 1.6rem)/1.25 var(--f-enseigne); }
.citation footer { margin-top: .4rem; font-size: .95rem; color: var(--texte-doux); }

/* l'indice de défilement : une étiquette pendue à sa ficelle, en bas au centre de l'écran. Elle arrive à la fin de l'ouverture ;
   au repos, on la tire de temps en temps vers le bas (la page descend) ; le rappel la balance plus fort ;
   au premier défilement, elle se décroche et tombe, la ficelle remonte. */
.indice {
  --fil: 3.4rem; --trou: 1.3rem;
  /* au centre ; jamais collée aux étiquettes de l'accueil (elle se décale à droite sur un écran moyen) */
  position: fixed; left: max(50%, calc(var(--gouttiere) + 39rem)); bottom: max(1.1rem, 2.2vh); z-index: 6;
  translate: -50% 0;
  display: block; padding-top: var(--fil);
  color: var(--noir); text-decoration: none;
  transform-origin: 50% 0;
  filter: drop-shadow(0 6px 10px rgb(30 20 10 / .28));
  animation: indice-repos 4.4s cubic-bezier(.45, .05, .35, 1) infinite;
}
.indice[hidden] { display: none; }
.indice-ficelle {
  position: absolute; z-index: 1; left: calc(50% - .75px); top: 0;
  width: 1.5px; height: calc(var(--fil) + var(--trou));
  background: linear-gradient(#2b272200, #2b2722 55%); transform-origin: 50% 0; pointer-events: none;
}
html.nuit .indice-ficelle { background: linear-gradient(#e8dcc400, #e8dcc4 55%); }
.indice-etiquette {
  display: block; padding: 2.5rem 1.9rem 1.15rem;
  background:
    radial-gradient(circle at 50% var(--trou), #0000 4.2px, var(--or-clair) 4.7px, var(--or) 6.2px, var(--or-fonce) 7.5px, #0000 7.9px),
    var(--papier);
  font: 800 1.78rem/1 var(--f-enseigne); letter-spacing: .005em; white-space: nowrap;
  clip-path: polygon(19% 0, 81% 0, 100% 1.7rem, 100% 100%, 0 100%, 0 1.7rem);
  -webkit-mask: radial-gradient(circle at 50% var(--trou), #0000 4px, #000 4.7px);
          mask: radial-gradient(circle at 50% var(--trou), #0000 4px, #000 4.7px);
  transform-origin: 50% var(--trou);
}
.indice:focus-visible { outline: none; }
.indice:focus-visible .indice-etiquette { box-shadow: inset 0 0 0 3px var(--cocotte); }
/* au repos : elle se balance à peine ; toutes les quatre secondes, on la tire vers le bas, elle remonte et se balance */
@keyframes indice-repos {
  0%, 50%, 100% { transform: none; rotate: 0deg; }
  14% { rotate: 1.5deg; }
  32% { rotate: -1.1deg; }
  60% { transform: translateY(.85rem); rotate: 0deg; }
  70% { transform: translateY(-.2rem); rotate: 2.4deg; }
  80% { transform: none; rotate: -1.4deg; }
  90% { rotate: .6deg; }
}
/* la fin de l'ouverture : elle descend au bout de sa ficelle et se balance en arrivant */
html.ouverture .indice { visibility: hidden; animation: none; }
html.ouverture-fin .indice { animation: indice-arrive 1.6s cubic-bezier(.2, .85, .25, 1) .7s both, indice-repos 4.4s cubic-bezier(.45, .05, .35, 1) 2.3s infinite; }
@keyframes indice-arrive {
  0% { transform: translateY(-7rem); rotate: -8deg; opacity: 0; }
  18% { opacity: 1; }
  46% { transform: translateY(.4rem); rotate: 5deg; }
  66% { transform: none; rotate: -2.6deg; }
  84% { rotate: 1deg; }
  100% { transform: none; rotate: 0deg; opacity: 1; }
}
/* le rappel au repos : on la tire plus fort, elle se balance (la caméra avance d'un pas, au même moment) */
html .indice.rappel { animation: indice-rappel 2s cubic-bezier(.3, .7, .3, 1), indice-repos 4.4s cubic-bezier(.45, .05, .35, 1) 2s infinite; }
@keyframes indice-rappel {
  0% { transform: none; rotate: 0deg; }
  20% { transform: translateY(1.4rem); rotate: 0deg; }
  38% { transform: translateY(-.4rem); rotate: 6deg; }
  56% { transform: none; rotate: -3.8deg; }
  74% { rotate: 1.8deg; }
  90% { rotate: -.6deg; }
  100% { rotate: 0deg; }
}
/* au premier défilement : elle se décroche, tombe en tournant ; la ficelle remonte */
html .indice.decroche { animation: none; pointer-events: none; }
.indice.decroche .indice-etiquette { animation: indice-tombe .95s cubic-bezier(.55, 0, .9, .45) forwards; }
.indice.decroche .indice-ficelle { animation: indice-ficelle .45s cubic-bezier(.4, 0, .8, .4) forwards; }
@keyframes indice-tombe { 0% { transform: none; } 14% { transform: translateY(-.35rem) rotate(-8deg); } 100% { transform: translateY(68vh) rotate(28deg); } }
@keyframes indice-ficelle { to { transform: scaleY(0); } }
@media (min-width: 761px) and (max-width: 1440px) {
  .indice-etiquette { padding: 2.35rem 1.6rem 1rem; font-size: 1.52rem; }
}

/* les étiquettes accrochées à la scène, sur ordinateur : chacune pend à sa ficelle sous son écriteau,
   ou au bord de l'étagère. Le conteneur suit le point 3D (et le balancement de l'écriteau) ;
   l'étiquette, elle, reste libre de se balancer sur son œillet au survol. */
.ancre {
  --h: 3.1rem; --fil: 1.1rem;
  position: fixed; left: 0; top: 0; z-index: 5;
  display: flex; gap: 1.1rem;
  margin-left: calc(var(--h) * -.41);          /* l'œillet de la première étiquette tombe sous le point d'accroche */
  transform-origin: calc(var(--h) * .41) 0;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.ancre.vue { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.fil { position: relative; display: block; padding-top: var(--fil); filter: drop-shadow(0 3px 5px rgb(30 20 10 / .22)); }   /* elle porte ombre sur le mur, comme le reste */
.fil::before {
  content: ''; position: absolute; z-index: 1; left: calc(var(--h) * .41 - .75px); top: 0;
  width: 1.5px; height: calc(var(--fil) + var(--h) / 2);
  background: linear-gradient(#2b2722, #2b2722 calc(100% - 3px), #2b272200);
  pointer-events: none;
}
html.nuit .fil::before { background: linear-gradient(#e8dcc4, #e8dcc4 calc(100% - 3px), #e8dcc400); }
.ancre .etiquette { pointer-events: auto; }
.ancre.vue .etiquette { animation: balance 1.3s cubic-bezier(.25, .8, .35, 1) backwards; }
.ancre.vue .fil + .fil .etiquette { animation-delay: .12s; }
.ancre.vue .etiquette:hover { animation: balance 1s cubic-bezier(.25, .8, .35, 1); }

/* les listes de pièces : invisibles, sauf au clavier (le portant 3D fait le travail à la souris) */
.liste-pieces { list-style: none; margin: 0; padding: 0; }
.liste-pieces:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.liste-pieces:focus-within { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.liste-pieces button { padding: .35rem .7rem; border: 1px solid currentColor; background: rgb(var(--voile) / .9); cursor: pointer; font-size: .9rem; }
.liste-pieces button:focus-visible { outline: 3px solid var(--cocotte); }

/* les avis, avec une petite étiquette en guise de puce */
.note-grande { margin-top: 1rem; font-size: 1.05rem; color: var(--texte-doux); }
.note-grande b { font: 800 2.6rem/1 var(--f-enseigne); color: var(--texte); margin-right: .2rem; }
.avis { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .8rem; max-width: 30em; }
.avis li { position: relative; padding-left: 1.7rem; font: 700 clamp(1.15rem, 1.4vw, 1.38rem)/1.28 var(--f-enseigne); }
.avis li::before, .resultat-pieces .prix::before, .reseaux a::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 1.05rem; height: .62rem; background: var(--or);
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 32% 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at 34% 50%, #0000 1.6px, #000 2.2px);
          mask: radial-gradient(circle at 34% 50%, #0000 1.6px, #000 2.2px);
}

/* ------------------------------------------------------------ la cabine : un grand écriteau noir aux lettres dorées, pendu à sa ficelle */
.cabine { width: min(33.5rem, 100%); max-width: none; }
.cabine::before { display: none; }
.cabine::after {
  content: ''; position: absolute; left: 50%; bottom: calc(100% - 1.5rem); width: 2px; height: 34vh;
  background: linear-gradient(to top, #2b2722, #2b2722b0 55%, #2b272200);
  translate: -50% 0; pointer-events: none;
}
html.nuit .cabine::after { background: linear-gradient(to top, #e8dcc4, #e8dcc4a0 55%, #e8dcc400); }
@property --biseau { syntax: '<length>'; inherits: true; initial-value: 3.4rem; }
.cabine-carton {
  --biseau: 3.4rem;
  --bas: 1.8rem;
  position: relative;
  max-height: calc(100svh - var(--entete) - 4vh);
  overflow: auto;
  padding: 3rem clamp(1.3rem, 2.4vw, 2.1rem) var(--bas);
  background: var(--papier-noir);
  color: var(--ivoire);
  clip-path: polygon(13% 0, 87% 0, 100% var(--biseau), 100% 100%, 0 100%, 0 var(--biseau));
  -webkit-mask: radial-gradient(circle at 50% 1.45rem, #0000 .5rem, #000 .56rem);
          mask: radial-gradient(circle at 50% 1.45rem, #0000 .5rem, #000 .56rem);
  scrollbar-width: thin; scrollbar-color: var(--or-fonce) transparent;
  transform-origin: 50% 0;
  transition: --biseau .7s cubic-bezier(.3, .6, .3, 1);
}
.cabine-carton.anime { overflow: hidden; }
.cabine-carton::before { content: ''; position: absolute; left: 50%; top: 1.45rem; width: 1.5rem; height: 1.5rem; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #0000 .5rem, var(--or-clair) .52rem, var(--or) .62rem, var(--or-fonce) .74rem, #0000 .76rem); pointer-events: none; }
.cabine-carton::after { content: ''; position: absolute; inset: .6rem; border: 1px solid rgb(200 161 93 / .45); clip-path: polygon(12.4% 0, 87.6% 0, 100% calc(var(--biseau) - .5rem), 100% 100%, 0 100%, 0 calc(var(--biseau) - .5rem)); pointer-events: none; }

/* replié : le temps que la cabine se révèle, l'écriteau n'est plus qu'une petite étiquette noire à son nom */
.cabine-etiquette { display: none; }
.cabine.replie .cabine-carton { --biseau: 1.9rem; width: max-content; max-width: 100%; max-height: none; margin-inline: auto; padding: 0; }
.cabine.replie .cabine-questions, .cabine.replie .cabine-resultat { display: none; }
.cabine.replie .cabine-etiquette {
  display: block; padding: 2.6rem 1.9rem 1.05rem; border: 0; background: none; cursor: pointer;
  font: 800 clamp(1.35rem, 1.65vw, 1.65rem)/1 var(--f-enseigne); color: var(--or-clair); white-space: nowrap;
}
.cabine-etiquette:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--cocotte); }
.cabine.replie .cabine-carton:hover { animation: balance 1s cubic-bezier(.25, .8, .35, 1); }
/* sur ordinateur, l'étiquette et la cabine prête montent sous l'en-tête : la cabine a toute la place */
@media (min-width: 761px) {
  /* l'écriteau n'entre qu'en arrivant devant la cabine : il descend au bout de sa ficelle, et remonte quand on repart vers l'étagère */
  html.scene3d .station--cabine .cabine { opacity: 0; pointer-events: none; transform: translateY(-110vh); transform-origin: 50% 0; transition: transform .55s cubic-bezier(.5, 0, .8, .35), opacity 0s linear .55s; }
  html.scene3d.devant-cabine .station--cabine .cabine,
  html.scene3d .station--cabine .cabine:focus-within { opacity: 1; pointer-events: auto; transform: none; transition: none; animation: descend 1.15s cubic-bezier(.2, .85, .25, 1) both; }
  .station--cabine.cabine-haut .cadre { justify-content: flex-start; padding-top: calc(var(--entete) + 1.5vh); padding-bottom: 2vh; }
  .station--cabine.cabine-haut .cabine-carton { max-height: calc(100svh - var(--entete) - 3.5vh); }
}
.cabine-carton.retourne { animation: retourne .7s cubic-bezier(.5, 0, .3, 1); }
@keyframes retourne { 0% { transform: perspective(900px) rotateY(0); } 50% { transform: perspective(900px) rotateY(90deg); } 51% { transform: perspective(900px) rotateY(-90deg); } 100% { transform: perspective(900px) rotateY(0); } }
.cabine h2 { font-size: clamp(2.1rem, 3.2vw, 3.1rem); color: var(--or-clair); }
.cabine-intro { margin-top: .5rem; font-size: 1.04rem; color: #e9e2d5; text-wrap: pretty; }

.tringle { list-style: none; margin: 1.1rem 0 0; padding: 0 .2rem; position: relative; display: flex; flex-wrap: wrap; gap: .5rem; min-height: 3.5rem; border-top: 3px solid var(--or); border-radius: 2px; }
.tringle li { position: relative; padding-top: .7rem; transform-origin: 50% 0; animation: accroche 1.1s cubic-bezier(.2, .9, .3, 1); }
.tringle li::before { content: ''; position: absolute; left: 50%; top: 0; width: 1.5px; height: .75rem; background: var(--or); }
.tringle button {
  display: block; padding: .78rem .75rem .45rem; border: 0; cursor: pointer;
  background: var(--papier-or); color: var(--noir);
  font: 700 .95rem/1.1 var(--f-enseigne);
  clip-path: polygon(50% 0, 100% .5rem, 100% 100%, 0 100%, 0 .5rem);
  -webkit-mask: radial-gradient(circle at 50% .42rem, #0000 2px, #000 2.7px);
          mask: radial-gradient(circle at 50% .42rem, #0000 2px, #000 2.7px);
}
.tringle button:focus-visible { box-shadow: inset 0 0 0 3px var(--cocotte); outline: none; }
@keyframes accroche { 0% { transform: translateY(-.6rem) rotate(-14deg); opacity: 0; } 35% { opacity: 1; transform: rotate(9deg); } 60% { transform: rotate(-4deg); } 82% { transform: rotate(1.5deg); } 100% { transform: none; } }

.questions { margin-top: .4rem; }
.question { display: none; margin: 1.1rem 0 0; padding: 0; border: 0; min-width: 0; }
.question.actif { display: block; }
.question legend { padding: 0; font: 800 clamp(1.4rem, 1.9vw, 1.75rem)/1.1 var(--f-enseigne); color: var(--ivoire); }
.choix-liste { display: flex; flex-wrap: wrap; gap: .55rem .6rem; margin-top: .9rem; }
.choix { position: relative; display: inline-flex; }
.choix[hidden] { display: none; }
.choix input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.choix span {
  --h: 2.55rem;
  display: inline-flex; align-items: center; min-height: var(--h);
  padding: .4em .95em .4em calc(var(--h) * .42 + .8em);
  background: var(--papier); color: var(--noir);
  font: 700 1.03rem/1.1 var(--f-enseigne);
  clip-path: polygon(calc(var(--h) * .42) 0, 100% 0, 100% 100%, calc(var(--h) * .42) 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at calc(var(--h) * .41) 50%, #0000 3.4px, #000 4px);
          mask: radial-gradient(circle at calc(var(--h) * .41) 50%, #0000 3.4px, #000 4px);
  transform-origin: calc(var(--h) * .41) 50%;
  transition: background-color .15s, color .15s;
}
.choix-liste--tailles .choix span { min-width: 4.1rem; justify-content: center; }
.choix:hover span { animation: balance 1s cubic-bezier(.25, .8, .35, 1); }
.choix input:checked + span { background: var(--papier-or); }
.choix--case span { padding-left: calc(var(--h) * .42 + .8em); }
.facultatif { display: block; margin-top: .3rem; font: 500 .9rem/1.3 var(--f-texte); color: #cfc6b6; }
.lien--suite { display: inline-block; margin-top: 1rem; color: var(--or-clair); }
/* le moment de passage, facultatif : sous les jours, sous un filet d'or. Un jour choisi sans moment : les deux étiquettes se balancent */
.question .moments { margin: 1.05rem 0 0; padding: .8rem 0 0; border: 0; border-top: 1px solid rgb(200 161 93 / .35); min-width: 0; }
.question .moments legend { float: left; width: 100%; padding: 0; font: 600 .98rem/1.3 var(--f-texte); color: #e9e2d5; }
.moments .choix-liste { clear: both; margin-top: .55rem; }
.moments.invite .choix span { animation: balance 1.1s cubic-bezier(.25, .8, .35, 1); }
.moments.invite .choix + .choix span { animation-delay: .12s; }
/* « Votre choix » ou « Proposée pour vous » (et sur cabine.html, « À essayer » ou « Mis de côté ») : une petite étiquette, pointe et trou */
.resultat-pieces .badge, .ma-selection .badge {
  display: inline-block; padding: .16rem .5rem .16rem .95rem; font: 600 .72rem/1.25 var(--f-texte); letter-spacing: .01em; color: var(--noir); background: var(--or-clair);
  clip-path: polygon(.55rem 0, 100% 0, 100% 100%, .55rem 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at .62rem 50%, #0000 1.5px, #000 2.1px);
          mask: radial-gradient(circle at .62rem 50%, #0000 1.5px, #000 2.1px);
}
.resultat-pieces .badge--equipe { background: #d9d1c3; }
/* un objet de la maison, mis de côté : le bleu canard de l'étagère, en clair */
.resultat-pieces .badge--cote, .ma-selection .badge--cote { background: #bfdad8; }
.choix input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--cocotte), inset 0 0 0 5px var(--noir); }
.prenom { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: .9rem; }
.prenom input { flex: 1 1 11rem; min-width: 0; height: 3.1rem; padding: 0 1rem; border: 0; border-bottom: 2px solid var(--or); background: rgb(255 255 255 / .07); font: 600 1.15rem/1 var(--f-texte); color: var(--ivoire); }
.prenom input::placeholder { color: #a99f8f; font-weight: 400; }
.prenom input:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 2px; }

.cabine-resultat { padding-bottom: .1rem; }
.cabine-resultat h2 { font-size: clamp(2.2rem, 3.2vw, 3.1rem); }
.cabine-resultat h2 + .resultat-pieces { margin-top: 1.15rem; }
/* sous le prénom, le jour de passage, comme la deuxième ligne de l'ardoise */
.resultat-jour { margin-top: .3rem; font: 700 1.3rem/1.2 var(--f-enseigne); color: var(--ivoire); }
.resultat-jour:empty { display: none; }
.resultat-jour + .resultat-pieces { margin-top: 1rem; }
/* les trois pièces, comme trois tirages posés côte à côte : la photo, qui l'a choisie, le nom, le prix */
.resultat-pieces { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.resultat-pieces li { display: grid; align-content: start; gap: .45rem; }
.resultat-pieces img { width: min(100%, 4.9rem); aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; border: 4px solid var(--ivoire); border-bottom-width: 9px; box-shadow: 0 3px 9px rgb(0 0 0 / .5); rotate: -1.6deg; }
.resultat-pieces li:nth-child(2) img { rotate: 1.3deg; }
.resultat-pieces li:nth-child(3) img { rotate: -.7deg; }
.resultat-pieces li > span { display: grid; justify-items: start; gap: .22rem; }
.resultat-pieces .titre { font: 700 1rem/1.15 var(--f-enseigne); color: var(--ivoire); }
.resultat-pieces .prix { position: relative; padding-left: 1.4rem; font: 500 .9rem/1.2 var(--f-texte); color: #ddd5c6; }
.resultat-total { margin-top: .9rem; font: 800 1.1rem/1.2 var(--f-enseigne); color: var(--or-clair); }
.resultat-total:empty { display: none; }
/* ses choix dépassent le budget : la cabine le dit au-dessus du total, sans juger, et deux étiquettes la laissent décider */
.resultat-ecart { padding-top: 1rem; }
.resultat-ecart[hidden] { display: none; }
.resultat-ecart p { font: 600 1rem/1.38 var(--f-texte); color: #efe8da; text-wrap: pretty; }
.resultat-ecart-choix { display: flex; flex-wrap: wrap; gap: .5rem .7rem; margin-top: .6rem; }
.resultat-ecart .etiquette { --h: 2.45rem; font-size: 1.02rem; padding-right: 1.05em; animation: accroche 1.1s cubic-bezier(.2, .9, .3, 1) both; }
.resultat-ecart .etiquette + .etiquette { animation-delay: .12s; }
.resultat-ecart .etiquette:hover { animation: balance 1s cubic-bezier(.25, .8, .35, 1); }
.envoi-titre { margin-top: 1rem; font: 700 1.1rem/1.2 var(--f-enseigne); color: var(--ivoire); }
.actions--envoi { flex-wrap: nowrap; gap: .55rem; margin-top: .6rem; }
.actions--envoi .etiquette { --h: 2.65rem; font-size: 1.02rem; padding-right: .95em; padding-left: calc(var(--pointe) + .9em); }
/* le total et les boutons d'envoi ne quittent pas l'écriteau : quand le résultat dépasse (téléphone), ils restent posés en bas,
   les pièces défilent dessous et s'y fondent (.colle, cabine-form.js : le repère qui les suit est sorti du carton) */
.envoi { position: sticky; bottom: 0; z-index: 1; margin-inline: -.4rem; padding: 0 .4rem .6rem; background: var(--papier-noir); }
.envoi.colle::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 2.4rem; background: linear-gradient(rgb(21 20 18 / 0), #151412 88%); pointer-events: none; }
.envoi-repere { display: block; height: 1px; }
/* le bas de l'écriteau reste net : ce qui défile encore dessous (l'aide, les liens) s'y fond, au lieu d'être coupé par le bord
   (une bande collée au bas, du papier noir qui monte en fondu ; les boutons d'envoi, collés eux aussi, passent devant) */
.cabine-resultat::after {
  content: ''; position: sticky; bottom: calc(-1 * var(--bas)); display: block;
  height: calc(var(--bas) + 1.5rem); margin-bottom: calc(-1 * var(--bas));
  background: var(--papier-noir);
  -webkit-mask: linear-gradient(#0000, #000 1.5rem);
          mask: linear-gradient(#0000, #000 1.5rem);
  pointer-events: none;
}
.envoi-aide { margin-top: .7rem; font-size: .88rem; line-height: 1.45; color: #d9d1c3; }
.envoi-aide a, .cabine .lien { color: var(--or-clair); }
.resultat-liens { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.7rem; margin-top: .75rem; }
.resultat-liens .lien { margin-top: 0; }
.message[open] { flex-basis: 100%; order: 2; }
.message summary { cursor: pointer; font-weight: 600; color: var(--or-clair); }
.message summary:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 2px; }
.message textarea { display: block; width: 100%; min-height: 9rem; margin-top: .6rem; padding: .8rem .95rem; border: 0; border-radius: 0; resize: vertical; background: var(--ivoire); color: var(--noir); font: 400 .95rem/1.45 var(--f-texte); }
.message textarea:focus-visible { outline: 3px solid var(--cocotte); }
.petit { margin-top: .9rem; font-size: .86rem; line-height: 1.45; color: #cfc6b6; }
/* « Sans obligation d'achat… » : sous les boutons d'envoi, dans le bloc qui reste posé au bas de l'écriteau */
.envoi .petit { margin-top: .7rem; color: #ddd5c6; }
.lien { margin-top: .7rem; padding: 0; border: 0; background: none; cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.lien:focus-visible, .envoi-aide a:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 2px; }

/* ------------------------------------------------------------ venir */
.panneau--venir { max-width: 44rem; }
.panneau--venir h2 { max-width: 11em; }
.panneau--accueil::before { inset: -1.2rem -6rem -3.5rem -9rem; }
/* la nuit, le texte d'accueil garde son ombre bleutée, même quand le spot de l'enseigne éclaire le mur derrière lui */
html.nuit .panneau--accueil::before { background: radial-gradient(closest-side, rgb(var(--voile) / .84), rgb(var(--voile) / .62) 58%, rgb(var(--voile) / 0)); }
.venir-sous { font-size: clamp(1.08rem, 1.3vw, 1.28rem); }
.devanture { float: right; width: min(11.5rem, 30vw); margin: 1.2rem 0 1rem 1.6rem; padding: .45rem .45rem .8rem; background: var(--blanc); box-shadow: 0 8px 22px rgb(30 20 10 / .25); rotate: 1.5deg; }
.devanture img { width: 100%; aspect-ratio: 760 / 945; object-fit: cover; }
.venir-infos { display: grid; grid-template-columns: auto auto; gap: 1rem 2.6rem; margin-top: 1.4rem; font-size: 1.02rem; line-height: 1.5; }
.venir-infos address { font-style: normal; }
.venir-infos strong { font-family: var(--f-enseigne); font-size: 1.12rem; }
.reseaux { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.3rem; }
.reseaux a { position: relative; padding-left: 1.45rem; font-weight: 500; text-underline-offset: .2em; }
.reseaux a::before { top: .5em; }
.reseaux a:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 3px; }

/* le pied de l'accueil, discret : il se pose au bas du dernier arrêt (venir), sans allonger la promenade */
.pied-accueil {
  position: relative; z-index: 2;
  display: flex; justify-content: flex-end; align-items: center;
  height: 2.8rem; margin-top: -2.8rem; padding: 0 var(--gouttiere);
  font-size: .84rem; pointer-events: none;
}
.pied-accueil a { pointer-events: auto; color: var(--texte-doux); text-decoration-color: rgb(200 161 93 / .7); text-underline-offset: .2em; }
.pied-accueil a:hover { color: var(--texte); text-decoration-color: var(--or); }
.pied-accueil a:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 3px; }
html.statique .pied-accueil { margin-top: 0; }

/* ------------------------------------------------------------ la fiche : une grande étiquette ivoire qui descend au bout de sa ficelle */
/* elle descend de dessous l'en-tête (le haut de la boîte est rogné à sa hauteur) : sa ficelle ne le traverse jamais */
.fiche { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--noir); overflow: hidden; clip-path: inset(var(--entete) 0 0); }
.fiche::backdrop { background: rgb(10 14 15 / .5); }
/* la pièce est déjà en main, en 3D (image: false) : rien ne la voile, la page baisse elle-même sa boutique autour */
html .fiche[open].sans-photo::backdrop { background: transparent; }
.fiche-suspension { position: absolute; top: 0; right: var(--gouttiere); width: min(27.5rem, calc(100vw - 32px)); padding-top: calc(var(--entete) + .75rem); transform-origin: 50% 0; }
.fiche[open] .fiche-suspension { animation: descend 1.15s cubic-bezier(.2, .85, .25, 1) both; }
.fiche-suspension::before { content: ''; position: absolute; left: 50%; top: var(--entete); width: 2px; height: 2.35rem; translate: -50% 0; background: #efe7d6; }
.fiche.sans-photo .fiche-suspension::before { background: #2b2722; }
html.nuit .fiche.sans-photo .fiche-suspension::before { background: #e8dcc4; }
@keyframes descend { 0% { transform: translateY(-105%) rotate(-5deg); } 48% { transform: translateY(0) rotate(3.2deg); } 68% { transform: rotate(-1.8deg); } 86% { transform: rotate(.7deg); } 100% { transform: none; } }
.fiche-carton {
  position: relative; max-height: calc(100svh - var(--entete) - 1.45rem); overflow: auto;
  padding: 4rem 1.5rem 1.6rem;
  background: var(--papier);
  clip-path: polygon(14% 0, 86% 0, 100% 3.2rem, 100% 100%, 0 100%, 0 3.2rem);
  -webkit-mask: radial-gradient(circle at 50% 1.6rem, #0000 .5rem, #000 .56rem);
          mask: radial-gradient(circle at 50% 1.6rem, #0000 .5rem, #000 .56rem);
  scrollbar-width: thin;
}
.fiche-carton::before { content: ''; position: absolute; left: 50%; top: 1.6rem; width: 1.5rem; height: 1.5rem; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #0000 .5rem, var(--or-clair) .52rem, var(--or) .62rem, var(--or-fonce) .74rem, #0000 .76rem); }
.fiche-carton:focus { outline: none; }
.fiche-fermer { position: absolute; top: 2.4rem; right: 1.4rem; z-index: 1; padding: .3rem .1rem; border: 0; background: none; cursor: pointer; font: 600 .95rem/1 var(--f-texte); text-decoration: underline; text-underline-offset: .2em; }
.fiche-fermer:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 2px; }
.fiche-photo { margin: .4rem 0 0; padding: .55rem; background: var(--blanc); box-shadow: 0 6px 18px rgb(50 30 10 / .28); rotate: -1deg; }
.fiche-photo img { width: 100%; max-height: 48svh; object-fit: cover; object-position: 50% 22%; aspect-ratio: 3 / 4; }
.fiche-texte { margin-top: 1.2rem; }
/* le titre d'abord, puis le prix ; sans prix publié, l'étiquette d'or « Demander le prix » tient sa place */
.fiche-texte h2 { margin-top: 0; font-size: 1.7rem; line-height: 1.05; }
.fiche-prix { margin-top: .5rem; font: 800 2.3rem/1 var(--f-enseigne); }
.fiche-prix:empty { display: none; }
/* une tenue n'a pas un prix : « dès 79,99 € » en grand, « la pièce » à sa suite, en petit (le prix de sa pièce la moins chère) */
.fiche-prix .fiche-la-piece { font: 700 1.12rem/1 var(--f-enseigne); white-space: nowrap; }
.fiche-prix.sans-prix { display: flex; flex-direction: column; align-items: flex-start; margin-top: .8rem; font-size: 1.3rem; font-weight: 700; }
.fiche-prix .etiquette { --h: 2.75rem; font-size: 1.08rem; }
/* « Demander le prix » déplie ses deux voies : deux étiquettes ivoire pendues l'une sous l'autre, œillet sous œillet, au bout de leur ficelle */
.fiche-voies { --h: 2.5rem; --fil: .75rem; display: flex; flex-direction: column; align-items: flex-start; margin-left: .1rem; }
.fiche-voies[hidden] { display: none; }
.fiche-prix .fiche-voies .etiquette { --h: 2.5rem; font-size: 1rem; }
html .fiche .fil::before { background: linear-gradient(#2b2722, #2b2722 calc(100% - 3px), #2b272200); }   /* la fiche reste claire la nuit */
.fiche-voies.accroche .etiquette { animation: accroche 1.1s cubic-bezier(.2, .9, .3, 1) both; }
.fiche-voies.accroche .fil + .fil .etiquette { animation-delay: .14s; }
.fiche-voies .etiquette:hover, .fiche-voies.accroche .etiquette:hover { animation: balance 1s cubic-bezier(.25, .8, .35, 1); }
.fiche-detail { margin-top: .55rem; font-size: 1rem; white-space: pre-line; text-wrap: pretty; }
.fiche-detail:empty { display: none; }
.fiche .actions { margin-top: 1.2rem; align-items: center; gap: .8rem 1.4rem; }
.fiche .fiche-partage { margin: 0; }
/* la pièce est déjà en main, en 3D : la fiche n'en répète pas la photo */
.fiche.sans-photo .fiche-photo { display: none; }
.fiche.sans-photo .fiche-texte { margin-top: .2rem; }

.annonce { position: fixed; left: 50%; top: calc(var(--entete) + .5rem); z-index: 40; translate: -50% 0; padding: .7rem 1.2rem .7rem 2.4rem; background: var(--papier-noir); color: var(--ivoire); font: 700 1.05rem/1.2 var(--f-enseigne); clip-path: polygon(1.1rem 0, 100% 0, 100% 100%, 1.1rem 100%, 0 50%); pointer-events: none; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.annonce.vue { opacity: 1; animation: balance 1.1s cubic-bezier(.25, .8, .35, 1); transform-origin: 1.2rem 50%; }

/* ------------------------------------------------------------ la page sans 3D : la boutique en vitrine */
html.statique #boutique { display: none; }
html.statique .station { height: auto !important; display: block; }
html.statique .cadre { min-height: 0; padding-block: calc(var(--entete) + 2rem) 3rem; position: static; }
html.statique .station + .station .cadre { padding-top: 3rem; }
html.statique .panneau::before, html.statique .cabine::after { display: none; }
html.statique .indice, html.statique .ancre { display: none; }
html.statique .entete { background: rgb(var(--voile) / .94); }
.vitrine { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1.4rem 1rem; width: 100%; }
.vitrine button { display: grid; gap: .5rem; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.vitrine img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%; border: .45rem solid var(--blanc); box-shadow: 0 4px 12px rgb(40 30 20 / .2); }
.vitrine .titre { font: 700 1.04rem/1.2 var(--f-enseigne); }
.vitrine .prix { font-size: .92rem; color: var(--texte-doux); }
.vitrine button:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 4px; }
html.statique .station .cadre { align-items: stretch; }
html.statique .panneau { max-width: none; }
html.statique .panneau > h2, html.statique .panneau > p { max-width: 40rem; }
/* venir garde sa mesure : l'adresse, les horaires et la devanture se lisent ensemble */
html.statique .panneau--venir { max-width: 44rem; }
/* l'enseigne, sans 3D : les capitales noires (ivoire la nuit), les minuscules d'or, serrées comme les lettres du mur (app.js, repli) */
html.statique .panneau > .enseigne-vitrine { max-width: none; margin: 0 0 1.3rem; font: 800 clamp(3.2rem, 8.6vw, 7.6rem)/.92 var(--f-enseigne); letter-spacing: -.01em; color: var(--dore); white-space: nowrap; transform: scaleX(.84); transform-origin: 0 50%; }
.enseigne-vitrine b { font-weight: 900; color: var(--texte); }

/* ------------------------------------------------------------ les pages intérieures (html.page) : le gabarit commun
   Le même en-tête que l'accueil, une scène d'un écran (viewport-fit, pleine largeur), le carton noir du pied de page.
   La scène 3D, s'il y en a une, est le même canvas #boutique, fixe, derrière tout : la page la cadre dans sa part d'écran.
   Chaque page range ses propres styles dans v2/css/<page>.css, chargée après celle-ci. */
html.page { scroll-padding-top: var(--entete); }
/* z-index: auto (et non 1) : la scène ne fait pas de contexte d'empilement ; ce que la page veut au-dessus du voile de l'en-tête
   (une bande, une colonne, le tiroir des filtres) le dit par son propre z-index, plus de 30. Elle reste au-dessus du canvas, qui la précède */
.page-scene { position: relative; z-index: auto; min-height: 100vh; min-height: 100svh; padding: var(--entete) var(--gouttiere) 0; }
html.statique.page .page-scene { min-height: 0; padding-bottom: 3rem; }
/* la page où l'on est : le trait d'or de la navigation reste */
.nav a[aria-current="page"] { background-size: 100% 2px; }

/* les filtres (mode, maison) : un carton ivoire à gauche sur ordinateur ; chaque filtre est une étiquette à œillet qu'on coche */
.filtres { position: relative; z-index: 3; display: grid; align-content: start; gap: 1.15rem; width: min(18rem, 100%); padding: 1.3rem 1.25rem 1.4rem; background: var(--papier); color: var(--noir); box-shadow: 0 10px 28px rgb(30 20 10 / .18); }
.filtres-tete { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.filtres-compte { font: 800 1.55rem/1 var(--f-enseigne); }
.filtres-effacer { margin: 0; font-size: .92rem; }
.filtres-effacer[hidden] { display: none; }
.filtres-groupe { display: flex; flex-wrap: wrap; gap: .45rem .4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.filtres-groupe legend { width: 100%; margin-bottom: .45rem; padding: 0; font: 800 1.08rem/1.1 var(--f-enseigne); }
.filtre { position: relative; display: inline-flex; }
.filtre input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.filtre span {
  --h: 2.15rem;
  display: inline-flex; align-items: center; gap: .35em; min-height: var(--h);
  padding: .3em .75em .3em calc(var(--h) * .42 + .7em);
  background: var(--blanc); color: var(--noir);
  font: 700 .95rem/1.1 var(--f-enseigne);
  box-shadow: inset 0 0 0 1px rgb(21 20 18 / .12);
  clip-path: polygon(calc(var(--h) * .42) 0, 100% 0, 100% 100%, calc(var(--h) * .42) 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at calc(var(--h) * .41) 50%, #0000 3px, #000 3.6px);
          mask: radial-gradient(circle at calc(var(--h) * .41) 50%, #0000 3px, #000 3.6px);
  transform-origin: calc(var(--h) * .41) 50%;
}
.filtre span small { font: 500 .78rem/1 var(--f-texte); color: #6b655b; }   /* l'étiquette reste claire la nuit : son encre ne suit pas le mode */
.filtre:hover span { animation: balance 1s cubic-bezier(.25, .8, .35, 1); }
.filtre input:checked + span { background: var(--papier-or); box-shadow: none; }
.filtre input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--cocotte), inset 0 0 0 5px var(--noir); }
.filtre input:disabled + span { opacity: .45; }
/* sur téléphone, le bouton « Filtrer (N) » ouvre le carton, qui descend au bout de sa ficelle */
.bouton-filtrer { display: none; }

/* le pied de page : le carton noir de la boutique, ses lettres d'or, sous une tringle de laiton.
   z-index 20 : il passe sur les étiquettes fixes de la page (qui suivent la 3D), sous l'en-tête (30), les tiroirs et les bandes (31, 32) */
.pied { position: relative; z-index: 20; padding: 2.7rem var(--gouttiere) 1.5rem; background: var(--papier-noir); color: #e9e2d5; font-size: .96rem; line-height: 1.5; }
.pied::before { content: ''; position: absolute; left: var(--gouttiere); right: var(--gouttiere); top: 0; height: 5px; border-radius: 3px; background: linear-gradient(#f3dca0, var(--or) 45%, var(--or-fonce)); box-shadow: 0 2px 6px rgb(0 0 0 / .4); }
.pied::after { content: ''; position: absolute; top: -3px; left: calc(var(--gouttiere) - 4px); right: calc(var(--gouttiere) - 4px); height: 11px; background: radial-gradient(circle at 5.5px 5.5px, var(--or-clair) 0 4px, var(--or-fonce) 5px, #0000 5.5px) left / 11px 11px no-repeat, radial-gradient(circle at 5.5px 5.5px, var(--or-clair) 0 4px, var(--or-fonce) 5px, #0000 5.5px) right / 11px 11px no-repeat; pointer-events: none; }
.pied-grille { display: grid; grid-template-columns: minmax(15rem, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 1.8rem clamp(1.4rem, 3vw, 3.4rem); }
.pied h2 { margin: 0 0 .5rem; font: 800 1.08rem/1.1 var(--f-enseigne); letter-spacing: 0; color: var(--or-clair); }
.pied p, .pied address { margin: 0; font-style: normal; }
.pied p + p { margin-top: .45rem; }
.pied a { color: var(--ivoire); text-decoration-color: rgb(200 161 93 / .7); text-underline-offset: .2em; }
.pied a:hover { text-decoration-color: var(--or); }
.pied a:focus-visible { outline: 3px solid var(--cocotte); outline-offset: 3px; }
.pied .marque { gap: .8rem; text-decoration: none; }
.pied .marque-nom { color: var(--or-clair); font-size: 1.45rem; }
.pied .marque-nom b { color: var(--ivoire); }
.pied-marque p { margin-top: .8rem; max-width: 22em; color: #cfc6b6; }
.pied .reseaux { display: grid; gap: .35rem; margin: 0; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid rgb(200 161 93 / .28); font-size: .86rem; color: #bfb5a4; }

@media (max-width: 1100px) {
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* l'en-tête sur téléphone, l'accueil comme les pages intérieures : la navigation prend la seconde ligne,
     l'état de la boutique se serre à droite (sa ligne courte, commun.js) */
  html .nav { display: flex; grid-column: 1 / -1; grid-row: 2; justify-self: start; align-self: center; gap: 1.05rem; }
  html .nav a { font-size: .9rem; }
  html .etat { grid-column: 1 / -1; grid-row: 2; justify-self: end; max-width: 50%; gap: .4rem; font-size: .8rem; }
  html .etat-lien { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* les filtres : un bouton qui pend sous l'en-tête ; ouvert, le carton descend au bout de sa ficelle */
  .bouton-filtrer { display: inline-flex; --h: 2.55rem; font-size: 1rem; }
  .filtres { position: fixed; z-index: 32; top: calc(var(--entete) + .4rem); left: 16px; right: 16px; width: auto; max-height: calc(100svh - var(--entete) - 1.2rem); overflow: auto; visibility: hidden; transform-origin: 50% 0; }
  html.filtres-ouverts .filtres { visibility: visible; animation: descend 1.05s cubic-bezier(.2, .85, .25, 1) both; }
  html.filtres-ouverts .page-scene::after { content: ''; position: fixed; inset: 0; z-index: 31; background: rgb(10 14 15 / .45); }   /* sous le carton, au-dessus de l'en-tête */
  .pied { padding-top: 2.3rem; }
  .pied-grille { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ------------------------------------------------------------ téléphone */
.pousser, .en-main, .arret { display: none; }   /* seulement sur téléphone, avec la boutique en 3D */
@media (max-width: 760px) {
  :root { --entete: 88px; --gouttiere: 16px; }
  .entete { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: 52px 26px; align-items: center; align-content: start; column-gap: .6rem; row-gap: 0; padding-top: calc(4px + env(safe-area-inset-top)); }
  html:is(:not(.page), .page-cabine, .page-venir) .entete::before { inset: 0 0 -14px; background: linear-gradient(rgb(var(--voile) / .95), rgb(var(--voile) / .9) 74%, rgb(var(--voile) / 0)); }
  .marque { grid-column: 1; grid-row: 1; gap: .55rem; min-width: 0; }
  .marque img { width: 36px; height: 36px; }
  .marque-nom { font-size: 1.02rem; }
  .marque img { width: 34px; height: 34px; }
  .entete-actions { display: contents; }
  .etiquette--compteur { grid-column: 3; grid-row: 1; --h: 2.3rem; font-size: .94rem; padding-right: .75em; }
  .etat { grid-column: 1 / -1; grid-row: 2; font-size: .86rem; gap: .5rem; white-space: nowrap; overflow: hidden; }
  .interrupteur { grid-column: 2; grid-row: 1; justify-self: end; font-size: .86rem; gap: .4rem; padding: 0; }
  .interrupteur-plaque { width: 1.1rem; height: 1.4rem; }
  .interrupteur-plaque::after { width: .48rem; height: .8rem; }
  .interrupteur { display: none !important; }
  .cadre { padding-bottom: 4vh; }
  /* sur téléphone, le texte de chaque arrêt se pose sur une feuille couleur mur, en bas */
  /* la feuille se fond vers le haut sur ses 2,5 rem au-dessus du texte : la première ligne (« Saint-Maximin… ») est déjà dessus */
  .panneau::before, html.nuit .panneau::before { inset: -2.5rem -16px -4vh; background: linear-gradient(to top, rgb(var(--voile) / .97) 70%, rgb(var(--voile) / .88) calc(100% - 2.5rem), rgb(var(--voile) / 0)); }
  h1 { font-size: clamp(2.5rem, 11.5vw, 3.3rem); }
  h2 { font-size: clamp(2.05rem, 9.4vw, 2.7rem); }
  .surtitre { font-size: .94rem; margin-bottom: .7rem !important; }
  .chapo { font-size: 1.02rem; }
  .panneau > p { font-size: 1rem; }
  .etiquette { --h: 2.85rem; font-size: 1.04rem; }
  .actions { gap: .6rem .7rem; margin-top: 1.1rem; }
  .indice { --fil: 1.3rem; --trou: 1.05rem; left: 50%; bottom: max(.9rem, 1.6svh); }
  .indice-etiquette { padding: 1.95rem 1.25rem .85rem; font-size: 1.2rem; clip-path: polygon(19% 0, 81% 0, 100% 1.35rem, 100% 100%, 0 100%, 0 1.35rem); }
  /* l'arrivée, sur téléphone : l'enseigne sur deux lignes, comme en 3D */
  .chargement-enseigne { font-size: min(14.6vh, 33vw); line-height: .832; text-align: center; transform: scaleX(.68); }
  .chargement-enseigne span { display: block; }
  .chargement-enseigne.traces svg { height: 23.5vh; }
  .chargement.sortie .chargement-enseigne { margin-top: 3.6vh; }
  .chargement-tringle::after { height: 2.85rem; }   /* la hauteur d'une .etiquette sur téléphone */
  .station--accueil .cadre { padding-bottom: calc(max(.9rem, 1.6svh) + 5.9rem); }
  html .station--accueil .panneau::before { bottom: calc(-1 * (max(.9rem, 1.6svh) + 5.9rem)); }   /* la feuille descend jusqu'en bas : l'indice pend devant elle */
  .pied-accueil { height: 2.4rem; margin-top: -2.4rem; }   /* en bas à droite, à côté de la dernière ligne de « venir », courte et à gauche */
  .station--accueil { height: 100vh; }
  #arrivages { height: 140vh; }
  #tailles, #mariages, #clientes { height: 115vh; }
  #maison { height: 130vh; }
  .station--cabine { height: 160vh; }
  .station--cabine .cadre { justify-content: flex-end; padding-bottom: 2vh; }
  .cabine-carton { --bas: 1.4rem; max-height: 72svh; padding: 2.7rem 1.1rem var(--bas); }
  [data-etape-resultat]:not([hidden]) { font-size: .96rem; }
  /* le résultat : il se lit d'un coup, sans défiler dans l'écriteau (le titre, les pièces, le total, l'envoi, la phrase qui rassure) ;
     la cabine prête garde le haut de l'écran (au moins 15 % sous l'en-tête). Plus de pièces : les boutons d'envoi restent posés en bas */
  .cabine-carton:has([data-etape-resultat]:not([hidden])) { --bas: .8rem; max-height: calc(100svh - var(--entete) - 15svh); padding: 2.5rem 1.1rem var(--bas); }
  .actions--envoi { flex-wrap: wrap; gap: .45rem .5rem; margin-top: .5rem; }
  .actions--envoi .etiquette { --h: 2.45rem; font-size: .96rem; }
  .resultat-total { margin-top: .65rem; font-size: 1.02rem; }
  .envoi-titre { margin-top: .55rem; font-size: 1.02rem; }
  .envoi .petit { margin-top: .55rem; font-size: .82rem; line-height: 1.4; }
  .resultat-ecart { padding-top: .7rem; }
  .resultat-ecart p { font-size: .92rem; line-height: 1.35; }
  .resultat-ecart .etiquette { --h: 2.3rem; font-size: .95rem; }
  .envoi-aide { margin-top: .5rem; font-size: .84rem; }
  .resultat-liens { gap: .35rem 1.1rem; margin-top: .45rem; font-size: .92rem; }
  .resultat-pieces .titre { font-size: .96rem; }
  .cabine.replie .cabine-etiquette { padding: 2.6rem 1.9rem 1rem; font-size: 1.5rem; }
  /* repliée en bas de l'écran puis dépliée sur la cabine prête, l'étiquette ne garde qu'un bout de ficelle : elle ne barre pas le miroir */
  .station--cabine.cabine-haut .cabine::after { height: 9vh; }
  /* une pièce par ligne, serrée : le tirage, le nom, puis qui l'a choisie et le prix côte à côte */
  .cabine-resultat h2 + .resultat-pieces, .resultat-jour + .resultat-pieces { margin-top: .75rem; }
  .resultat-pieces { grid-template-columns: 1fr; gap: .4rem; }
  .resultat-pieces li { grid-template-columns: 2.3rem minmax(0, 1fr); align-items: center; gap: .75rem; }
  .resultat-pieces img { border-width: 3px; border-bottom-width: 6px; }
  .resultat-pieces li > span { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .2rem .6rem; }
  .resultat-pieces .titre { grid-column: 1 / -1; grid-row: 1; }
  .resultat-pieces .badge, .resultat-pieces .prix { grid-row: 2; }
  .panneau { transition: opacity .25s ease; }
  .cabine h2 { font-size: 1.9rem; }
  .resultat-jour { margin-top: .15rem; font-size: 1.12rem; }
  .question legend { font-size: 1.32rem; }
  .choix span { --h: 2.35rem; font-size: .98rem; }
  .choix-liste--tailles .choix span { min-width: 3.6rem; }
  .venir-infos { grid-template-columns: 1fr; gap: .8rem; }
  html.statique .panneau > .enseigne-vitrine { font-size: min(21vw, 5.6rem); line-height: .84; }
  .enseigne-vitrine span { display: block; }
  .devanture { width: 8.5rem; margin: .4rem 0 .6rem 1rem; }
  .fiche-suspension { right: 16px; }
  .fiche-photo img { max-height: 40svh; }
  .citation p { font-size: 1.15rem; }
  .avis li { font-size: 1.08rem; }
  .note-grande b { font-size: 2.1rem; }

  /* une station = un écran : le défilement s'arrête à chaque station, jamais entre deux (l'aimantation est pilotée par app.js,
     installerAimant : un glissé de 19 % de l'écran mène à l'arrêt suivant). Le coin maison a deux arrêts (la cocotte, puis l'étagère),
     son panneau reste en place de l'un à l'autre. La cabine, plus haute que l'écran, se lit librement d'un bout à l'autre. */
  html.arrets :is(#top, #arrivages, #tailles, #mariages, #clientes, #venir) { height: auto; min-height: 100svh; align-content: start; }
  html.arrets #maison { height: 200svh; align-content: start; }
  html.arrets #maison .cadre { position: sticky; top: 0; }
  html.arrets .arret { display: block; position: absolute; left: 0; top: 100svh; width: 1px; height: 1px; pointer-events: none; }
  /* sur les portants, le titre est sur l'écriteau du mur, au-dessus de la tringle : le panneau le garde pour les lecteurs d'écran */
  html.arrets :is(#arrivages, #tailles, #mariages) .panneau h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.arrets :is(#arrivages, #tailles, #mariages) .panneau h2 + p { margin-top: 0; }
  /* sur les portants, le pouce pousse les cintres à l'horizontale ; à la verticale, la page défile */
  html.arrets :is(#arrivages, #tailles, #mariages), html.arrets .en-main { touch-action: pan-y; touch-action: pan-y pinch-zoom; }

  /* la première fois, une indication : un cintre qu'on pousse. Elle part au premier geste. */
  html.arrets .pousser { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; font: 600 .95rem/1.2 var(--f-texte); color: var(--texte-doux); transition: opacity .5s ease, visibility 0s; }
  html.arrets .pousser.fait { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
  .pousser-cintre { flex: none; width: 30px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 12%; animation: pousse 2.8s cubic-bezier(.4, 0, .3, 1) infinite; }
  @keyframes pousse { 0%, 18%, 100% { transform: none; } 34% { transform: translateX(-9px) rotate(7deg); } 50% { transform: translateX(-9px) rotate(-4deg); } 64% { transform: translateX(-9px) rotate(1.5deg); } 84% { transform: translateX(0) rotate(-2deg); } }

  /* l'étiquette du cintre en main : une étiquette pendue, coins coupés, œillet doré, au bout de sa ficelle.
     Elle remplace la petite étiquette du cintre et se balance avec lui. */
  html.arrets .en-main {
    --l: 6.1rem; --fil: .95rem; --trou: 1.05rem;
    display: block; position: fixed; left: 0; top: 0; z-index: 5;
    width: var(--l); margin-left: calc(var(--l) / -2); padding-top: var(--fil);
    transform-origin: 50% 0;
    pointer-events: none; visibility: hidden;
    filter: drop-shadow(0 4px 7px rgb(30 20 10 / .26));
  }
  html.arrets .en-main.vue { visibility: visible; }
  .en-main::before { content: ''; position: absolute; z-index: 1; left: calc(50% - .75px); top: 0; width: 1.5px; height: calc(var(--fil) + var(--trou)); background: #2b2722; pointer-events: none; }
  .en-main-etiquette {
    display: grid; justify-items: center; align-content: start; gap: .2rem; width: 100%;
    padding: 1.9rem .45rem .8rem;
    border: 0; cursor: pointer; pointer-events: auto;
    background:
      radial-gradient(circle at 50% var(--trou), #0000 3.6px, var(--or-clair) 4px, var(--or) 5.6px, var(--or-fonce) 6.8px, #0000 7.2px),
      var(--papier);
    color: var(--noir); text-align: center;
    clip-path: polygon(24% 0, 76% 0, 100% 1.55rem, 100% 100%, 0 100%, 0 1.55rem);
    -webkit-mask: radial-gradient(circle at 50% var(--trou), #0000 3.4px, #000 4.1px);
            mask: radial-gradient(circle at 50% var(--trou), #0000 3.4px, #000 4.1px);
    transform-origin: 50% 0;
    animation: accroche 1.1s cubic-bezier(.2, .9, .3, 1);
  }
  .en-main-etiquette:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--cocotte); }
  .en-main-etiquette > span:empty { display: none; }
  .en-main-haut { font: 600 .8rem/1.2 var(--f-texte); color: #4a463f; }
  .en-main-prix { font: 800 1.48rem/1 var(--f-enseigne); letter-spacing: -.01em; white-space: nowrap; }
  .en-main-prix small { display: block; margin-top: .14rem; font: 600 .76rem/1.15 var(--f-texte); letter-spacing: 0; color: #3a352e; }   /* une tenue : « la pièce » */
  .en-main-nom { font: 700 .9rem/1.12 var(--f-enseigne); text-wrap: balance; }
  .en-main-prix + .en-main-nom { margin-top: .15rem; }
  .en-main-tailles { margin-top: .1rem; font: 600 .78rem/1.2 var(--f-texte); color: #3a352e; }
}

@media (max-width: 380px) {
  .marque-nom { font-size: .9rem; }   /* le nom entier, à côté de « Ma cabine » */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}