/* La Louve — feuille de style unique du site.
   Couleurs de la carte de visite 2026 : orange #E84406 sur crème #FDF6F1, encre #1E120C.
   Mobile d'abord : tout est pensé pour 390 px de large, sans défilement horizontal. */

:root{
  --creme:#FDF6F1; --papier:#FFFDFB; --encre:#1E120C; --gris:#7C6558; --ligne:#EADBD0;
  --louve:#E84406; --louve-2:#FF7A3D; --pale:#FBE0D0; --nuit:#2A0F05; --ok:#1F7A4A; --alerte:#B3261E;
  --d:"Anton","Impact","Arial Narrow",sans-serif;
  --b:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --m:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme: light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{margin:0;background:var(--nuit);color:var(--encre);font-family:var(--b);overflow:hidden}
img{max-width:100%}
a{color:var(--louve)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--louve-2);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;z-index:99}
.skip:focus{left:8px;top:8px;background:var(--encre);color:var(--creme);padding:10px 14px;border-radius:10px}

/* ── Scène : téléphone au centre, texte de marque autour sur grand écran ── */
.scene{min-height:100%;display:flex;justify-content:center;align-items:center;gap:56px;padding:24px 16px}
.pitch{max-width:330px;color:var(--pale)}
.pitch .mot{height:34px;aspect-ratio:884/172;background:var(--louve-2);-webkit-mask:url(logo-mot.png) center/contain no-repeat;mask:url(logo-mot.png) center/contain no-repeat;margin-bottom:18px}
.pitch h1{font-family:var(--d);font-weight:400;font-size:56px;line-height:.92;margin:0 0 16px;color:var(--louve-2);text-transform:uppercase}
.pitch p{line-height:1.55;margin:0 0 12px;color:#F1CFBC}
.pitch small{font-family:var(--m);font-size:11px;letter-spacing:.06em;color:#B8927E;display:block;margin-top:18px;line-height:1.7}
.pitch a{color:#F1CFBC}
@media (max-width:960px){.pitch{display:none}.scene{padding:0}}

.app{position:relative;width:420px;height:900px;max-height:calc(100vh - 48px);background:var(--creme);border-radius:40px;overflow:hidden;box-shadow:0 0 0 10px #140702,0 30px 80px rgba(0,0,0,.5);display:flex;flex-direction:column}
@media (max-width:960px){.app{width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0;box-shadow:none}}

/* ── Barre du haut ── */
.top{flex:none;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 10px;background:var(--creme);display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--ligne);z-index:5}
.word{height:22px;width:113px;background:var(--encre);border:0;padding:0;-webkit-mask:url(logo-mot.png) center/contain no-repeat;mask:url(logo-mot.png) center/contain no-repeat}
.chute{display:flex;align-items:center;gap:8px;background:var(--encre);color:var(--creme);border:0;border-radius:99px;padding:6px 11px 6px 9px;font-family:var(--m);font-size:11px;white-space:nowrap}
.chute i{width:8px;height:8px;border-radius:50%;background:var(--louve);box-shadow:0 0 0 0 rgba(232,68,6,.7);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(232,68,6,0)}100%{box-shadow:0 0 0 0 rgba(232,68,6,0)}}
.chute b{font-weight:700;color:var(--louve-2)}

.views{flex:1;position:relative;overflow:hidden}
.view{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.view[hidden]{display:none!important}

/* ── Barre du bas ── */
.tabs{flex:none;display:grid;grid-template-columns:repeat(5,1fr);background:var(--creme);border-top:1px solid var(--ligne);padding:6px 6px calc(env(safe-area-inset-bottom,0px) + 8px)}
.tabs button{background:none;border:0;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--gris);position:relative}
.tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
.tabs button[aria-current="page"]{color:var(--louve)}
.badge{position:absolute;top:2px;right:calc(50% - 20px);min-width:17px;height:17px;border-radius:9px;background:var(--louve);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px}
.badge[hidden]{display:none}

/* ── Entrée : deux panneaux plein écran, style sérigraphie ── */
.pano{position:relative;height:100%;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;scroll-snap-align:start}
.pano img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.pano.un{background:var(--louve)}
.pano.deux{background:var(--creme)}
.pano.deux img{object-position:center 40%}
.pano .voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,7,2,.86) 0%,rgba(20,7,2,.35) 42%,rgba(20,7,2,0) 72%)}
.pano.deux .voile{background:linear-gradient(to top,rgba(253,246,241,.96) 0%,rgba(253,246,241,.72) 34%,rgba(253,246,241,0) 66%)}
.pano .in{position:relative;z-index:2;padding:0 18px calc(20px + env(safe-area-inset-bottom,0px))}
.pano.un .in{color:var(--creme)}
.pano.deux .in{color:var(--encre)}
.pano .mot{height:34px;width:175px;background:var(--creme);-webkit-mask:url(logo-mot.png) left/contain no-repeat;mask:url(logo-mot.png) left/contain no-repeat;margin-bottom:10px}
.pano h1,.pano h2{font-family:var(--d);font-weight:400;text-transform:uppercase;line-height:.88;margin:0 0 10px;font-size:clamp(40px,12.5vw,58px)}
.pano p{margin:0 0 14px;font-size:15.5px;line-height:1.45;max-width:30ch}
.pano .etat{display:inline-flex;align-items:center;gap:7px;font-family:var(--m);font-size:11.5px;margin-bottom:10px}
.pano .etat i{width:7px;height:7px;border-radius:50%;background:#7BE3A4}
.pano.un .etat.ferme i{background:#E8A56F}
.pano.deux .etat i{background:var(--ok)}

/* Bulle de bande dessinée — le clin d'œil des affiches pulp */
.bulle{position:absolute;z-index:3;background:var(--creme);color:var(--encre);border:3px solid var(--encre);border-radius:22px;padding:11px 15px;font-family:var(--d);font-weight:400;text-transform:uppercase;font-size:21px;line-height:1.02;letter-spacing:.01em;max-width:60%;transform:rotate(-3deg);box-shadow:5px 6px 0 rgba(30,18,12,.9)}
.bulle::after{content:"";position:absolute;left:26px;bottom:-19px;width:0;height:0;border:10px solid transparent;border-top:20px solid var(--encre)}
.bulle::before{content:"";position:absolute;left:29px;bottom:-13px;z-index:2;width:0;height:0;border:7px solid transparent;border-top:15px solid var(--creme)}
.bulle small{display:block;font-family:var(--b);font-weight:700;text-transform:none;font-size:12.5px;letter-spacing:0;margin-top:5px;line-height:1.3}
.pano.un .bulle{top:30%;right:16px}
.pano.deux .bulle{top:22%;left:16px;transform:rotate(2.5deg)}

.pano .cta{display:grid;grid-template-columns:1fr auto;gap:8px}
.pano .cta button,.pano .cta a{border:0;border-radius:13px;padding:14px;font-weight:800;font-size:15px;text-decoration:none;text-align:center}
.pano .cta .go{background:var(--louve);color:#fff}
.pano.deux .cta .go{background:var(--encre);color:var(--creme)}
.pano .cta .second{background:rgba(253,246,241,.15);color:var(--creme);box-shadow:inset 0 0 0 1.5px rgba(253,246,241,.55);white-space:nowrap}
.pano.deux .cta .second{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--encre)}
.pano .suite{display:flex;align-items:center;gap:8px;font-family:var(--m);font-size:11px;letter-spacing:.09em;text-transform:uppercase;margin-top:14px;opacity:.85}
.pano .suite::after{content:"";width:14px;height:14px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg) translate(-3px,-3px);animation:nud 1.6s infinite}

/* Bouton de secours : toujours un geste pour atteindre les pièces */
.saut{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:14px;z-index:4;border:0;border-radius:99px;padding:8px 13px;background:rgba(20,7,2,.55);color:var(--creme);font-size:12.5px;font-weight:700;backdrop-filter:blur(6px)}
.pano.deux .saut{background:rgba(30,18,12,.72)}

/* ── L'entrée filmée ─────────────────────────────────────────────────────
   Une piste de scroll haute de plusieurs écrans ; à l'intérieur, un calque collé
   qui occupe l'écran et dont l'image change avec le doigt. C'est le scroll qui
   fait avancer la caméra, pas une lecture automatique. */
.entree{position:relative;margin:0}
.entree .colle{position:sticky;top:0;height:100%;overflow:hidden;background:var(--nuit);display:flex;flex-direction:column;justify-content:flex-end}
.entree .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%}
.entree .voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,7,2,.85) 0%,rgba(20,7,2,.3) 40%,rgba(20,7,2,0) 68%);transition:opacity .4s}
.entree.dedans .voile{background:linear-gradient(to top,rgba(253,246,241,.95) 0%,rgba(253,246,241,.6) 36%,rgba(253,246,241,0) 66%)}
.entree .in{position:relative;z-index:2;padding:0 18px calc(22px + env(safe-area-inset-bottom,0px));color:var(--creme);transition:color .3s}
.entree.dedans .in{color:var(--encre)}
.entree .mot{height:32px;width:165px;background:currentColor;-webkit-mask:url(logo-mot.png) left/contain no-repeat;mask:url(logo-mot.png) left/contain no-repeat;margin-bottom:10px}
.entree h1{font-family:var(--d);font-weight:400;text-transform:uppercase;line-height:.88;margin:0 0 10px;font-size:clamp(38px,12vw,56px)}
.entree p{margin:0 0 14px;font-size:15.5px;line-height:1.45;max-width:30ch}
.entree .fin{display:grid;grid-template-columns:1fr auto;gap:8px;opacity:0;transform:translateY(8px);transition:.35s;pointer-events:none}
.entree.arrivee .fin{opacity:1;transform:none;pointer-events:auto}
.entree .fin button,.entree .fin a{border:0;border-radius:13px;padding:14px;font-weight:800;font-size:15px;text-decoration:none;text-align:center}
.entree .fin .go{background:var(--encre);color:var(--creme)}
.entree .fin .second{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--encre)}
.entree .suite{display:flex;align-items:center;gap:8px;font-family:var(--m);font-size:11px;letter-spacing:.09em;text-transform:uppercase;transition:.3s}
.entree.arrivee .suite{opacity:0;height:0;margin:0;overflow:hidden}
.entree .suite::after{content:"";width:14px;height:14px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg) translate(-3px,-3px);animation:nud 1.6s infinite}
/* Barre d'avancement : on sait qu'on est en train d'entrer, et qu'il y a une fin. */
.entree .bulle{top:22%;right:16px;transition:opacity .3s}
.entree.arrivee .bulle{opacity:0;pointer-events:none}
.entree .jauge{position:absolute;left:18px;right:18px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:2px;background:rgba(253,246,241,.25);z-index:3}
.entree.dedans .jauge{background:rgba(30,18,12,.2)}
.entree .jauge i{display:block;height:100%;background:var(--louve);width:0}
@media (prefers-reduced-motion:reduce){.entree{height:100%!important}.entree .colle{position:relative}}

/* ── Enseigne néon « OPEN » ──────────────────────────────────────────────
   Elle dit la vérité : allumée et scintillante quand la boutique est ouverte,
   éteinte quand elle est fermée. Le scintillement est irrégulier, comme un vrai
   tube qui s'amorce — un clignotement régulier ferait guirlande de Noël. */
.neon{position:absolute;z-index:3;top:9%;left:16px;padding:10px 16px 12px;border-radius:12px;
  border:2px solid rgba(255,122,61,.55);background:rgba(20,7,2,.35);backdrop-filter:blur(2px);
  font-family:var(--d);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:30px;line-height:1;
  color:#FFF3E8;text-shadow:0 0 4px #fff,0 0 11px var(--louve-2),0 0 24px var(--louve),0 0 48px rgba(232,68,6,.8);
  box-shadow:0 0 14px rgba(232,68,6,.45),inset 0 0 18px rgba(232,68,6,.25);
  animation:neon 5.5s infinite steps(1,end)}
.neon::before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:16px;background:rgba(255,243,232,.35)}
.neon small{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.14em;color:#FFD9C2;text-shadow:none;margin-top:5px;opacity:.9}
@keyframes neon{
  0%,3%,6%,52%,54%,100%{opacity:1}
  4%{opacity:.25}5%{opacity:.85}
  53%{opacity:.35}
  70%{opacity:1}70.6%{opacity:.4}71.2%{opacity:1}
}
.neon.eteint{color:#8B7466;border-color:rgba(139,116,102,.4);background:rgba(20,7,2,.28);
  text-shadow:none;box-shadow:none;animation:none}
.neon.eteint small{color:#8B7466}
@media (prefers-reduced-motion:reduce){.neon{animation:none}}

/* ── Boutique ── */
.shop-head{padding:16px 16px 10px;position:sticky;top:0;background:var(--creme);z-index:3;border-bottom:1px solid var(--ligne)}
.search{display:flex;align-items:center;gap:8px;background:var(--papier);border-radius:14px;padding:0 12px;box-shadow:inset 0 0 0 1.5px var(--ligne)}
.search svg{width:18px;height:18px;fill:none;stroke:var(--gris);stroke-width:2;flex:none}
.search input{border:0;background:none;font:inherit;font-size:16px;padding:12px 0;flex:1;min-width:0;outline:none}
.chips{display:flex;gap:6px;overflow-x:auto;margin:10px -16px 0;padding:0 16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:0;border-radius:99px;padding:8px 12px;font-size:13px;font-weight:700;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--ligne)}
.chip[aria-pressed="true"]{background:var(--encre);color:var(--creme);box-shadow:none}
.chip.drop{color:var(--louve)}
.chip.drop[aria-pressed="true"]{background:var(--louve);color:#fff}
.bar2{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px;color:var(--gris);gap:10px}
.bar2 .raz{border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:700;color:var(--louve);text-decoration:underline;text-underline-offset:3px}
.chips.tailles{margin-top:6px}
/* Le compteur de chaque pastille : assez lisible pour servir, assez discret
   pour que le nom reste ce qu'on lit en premier. */
.chip small{margin-left:5px;font-family:var(--m);font-size:11px;font-weight:400;opacity:.55}
.chip[aria-pressed="true"] small{opacity:.75}
/* Deuxieme niveau — les categories d'une famille. Subordonne au premier :
   plus petit et en retrait, pour qu'on voie lequel commande l'autre. */
.chips.sous{margin-top:6px}
.chips.sous .chip{font-size:12px;padding:6px 10px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ligne)}
.chips.sous .chip[aria-pressed="true"]{background:var(--louve);color:#fff;box-shadow:none}
.chips.tailles .chip{font-family:var(--m);font-size:12px;padding:7px 11px}
.bar2 select{font:inherit;font-size:13px;font-weight:700;border:0;background:none;color:var(--encre)}
.banner{margin:14px 16px 4px;border-radius:20px;background:var(--louve);color:var(--creme);padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;border:0;text-align:left;width:calc(100% - 32px)}
.banner b{font-family:var(--d);font-weight:400;font-size:30px;line-height:1;text-transform:uppercase}
.banner span{font-size:13px;opacity:.9}
.banner i{grid-row:1/3;grid-column:2;width:64px;aspect-ratio:262/166;background:var(--creme);-webkit-mask:url(anneaux.png) center/contain no-repeat;mask:url(anneaux.png) center/contain no-repeat}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;padding:12px 16px 28px}
.tile{position:relative;border:0;background:none;padding:0;text-align:left;display:flex;flex-direction:column;gap:6px;min-width:0;color:inherit;text-decoration:none}
.tile .pic{position:relative;aspect-ratio:1/1;border-radius:16px;background:var(--papier);overflow:hidden;box-shadow:inset 0 0 0 1px var(--ligne)}
.tile.pool .pic{background:var(--pale);box-shadow:none}
.tile .pic img{width:100%;height:100%;object-fit:contain;display:block}
.tile .pic.contain img{object-fit:contain;padding:8%}
.tile .mini{position:absolute;left:8px;top:8px;z-index:2;font-family:var(--m);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--louve);color:#fff;border-radius:99px;padding:3px 7px}
/* La collection La Louve : des pieces NEUVES, cousues a la main, au milieu de
   350 pieces chinees. La pastille doit se distinguer de celle de La Descente
   (meme emplacement, meme forme) sans crier : fond encre, pas la couleur Louve. */
.tile .mini.maison{background:var(--encre);color:var(--creme)}
/* Sur la fiche, le mot qui dit ce qu'on achete, AVANT la taille et l'etat.
   Une piece neuve faite main ne se vend pas comme une friperie. */
.maison-mot{margin:14px 0 2px;padding:12px 14px;border:1px solid #e6d3c6;border-left:3px solid var(--encre);border-radius:10px;background:#fbf4ee}
.maison-mot strong{display:block;font-size:13px;letter-spacing:.02em}
.maison-mot span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--gris)}
.tile .nm{font-weight:700;font-size:13.5px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* La taille, lisible sans ouvrir la fiche : en seconde main il n'y a qu'un
   exemplaire, c'est le premier critère qui élimine ou retient une pièce. */
.tile .taille{position:absolute;left:8px;bottom:8px;z-index:2;font-family:var(--m);font-size:10.5px;font-weight:700;letter-spacing:.04em;background:var(--creme);color:var(--encre);border-radius:8px;padding:3px 7px;box-shadow:0 1px 3px rgba(42,15,5,.14)}
/* Le nombre de photos : une seule image ne suffit jamais pour un vêtement
   d'occasion, il faut annoncer qu'il y en a d'autres derrière. */
.tile .nbphotos{position:absolute;right:8px;bottom:8px;z-index:2;font-family:var(--m);font-size:10px;font-weight:700;background:rgba(30,18,12,.66);color:#fff;border-radius:8px;padding:3px 6px;display:flex;align-items:center;gap:3px}
.tile .nbphotos::before{content:"";width:9px;height:8px;border:1.4px solid currentColor;border-radius:2px;display:block}
.tile .mt{font-size:11.5px;color:var(--gris);line-height:1.25;margin-top:-2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .pr{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tile .pr b{font-family:var(--d);font-weight:400;font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.tile.pool .pr b{color:var(--louve)}
.tile .pr small{font-family:var(--m);font-size:10.5px;color:var(--gris)}
.heart{width:36px;height:36px;border-radius:50%;border:0;background:var(--creme);display:grid;place-items:center;flex:none;box-shadow:0 1px 3px rgba(42,15,5,.18);position:absolute;right:6px;top:6px;z-index:2}
.heart svg{width:18px;height:18px;fill:none;stroke:var(--encre);stroke-width:2}
.heart[aria-pressed="true"] svg{fill:var(--louve);stroke:var(--louve)}
.heart.pop{animation:pop .35s}
@keyframes pop{40%{transform:scale(1.25)}}
.noresult{grid-column:1/-1;border:1.5px dashed var(--ligne);border-radius:16px;padding:22px;text-align:center;color:var(--gris)}
.sentinel{grid-column:1/-1;height:20px}

/* ── La Descente (fil vertical) ── */
.feed{scroll-snap-type:y mandatory}
.card{scroll-snap-align:start;height:100%;position:relative;display:flex;flex-direction:column;padding:14px 16px 16px;overflow:hidden;border:0;width:100%;text-align:left;background:var(--papier);color:inherit}
.card.pool{background:var(--pale)}
.card.intro{background:var(--louve);color:var(--creme);justify-content:space-between}
.intro .ring-big{width:60%;aspect-ratio:262/166;align-self:flex-end;background:var(--creme);-webkit-mask:url(anneaux.png) center/contain no-repeat;mask:url(anneaux.png) center/contain no-repeat;opacity:.95}
.intro h2{font-family:var(--d);font-weight:400;text-transform:uppercase;font-size:60px;line-height:.9;margin:0}
.intro p{margin:12px 0 0;font-size:16px;line-height:1.45;max-width:30ch}
.intro .how{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:14px;margin-top:18px}
.intro .how span:nth-child(odd){font-family:var(--m);font-weight:700}
.intro .down{font-family:var(--m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.intro .down::before{content:"";width:18px;height:18px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg) translate(-4px,-4px);animation:nud 1.6s infinite}
@keyframes nud{50%{translate:0 4px}}
.c-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.tag{font-family:var(--m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:99px;border:1.5px solid currentColor;white-space:nowrap;color:var(--louve)}
.card .heart{position:static;width:44px;height:44px}
.card .heart svg{width:22px;height:22px}
.photo{flex:1;min-height:0;display:grid;place-items:center;position:relative;margin:6px 0}
.photo img{max-width:92%;max-height:100%;object-fit:contain;border-radius:14px;filter:drop-shadow(0 18px 18px rgba(42,15,5,.18));position:relative;z-index:1}
.photo svg.rings{position:absolute;width:min(92%,320px);aspect-ratio:1;z-index:0}
.c-name{font-weight:800;font-size:19px;line-height:1.15;margin:0}
.c-cat{font-family:var(--m);font-size:11px;color:var(--gris);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.c-price{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:8px}
.now{font-family:var(--d);font-size:56px;line-height:.9;font-variant-numeric:tabular-nums}
.now small{font-family:var(--b);font-size:14px;font-weight:600;margin-left:4px}
.pool .now{color:var(--louve)}
.next{text-align:right;font-size:12.5px;line-height:1.35;color:var(--gris)}
.next b{display:block;color:var(--encre);font-family:var(--m);font-size:15px}
.c-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.btn{border:0;border-radius:14px;padding:12px 10px;font-weight:800;font-size:14.5px;line-height:1.15;text-align:left;min-height:52px;text-decoration:none;display:block}
.btn span{display:block;font-weight:500;font-size:11.5px;opacity:.75;margin-top:2px}
.btn.a{background:var(--encre);color:var(--creme)}
.btn.b{background:var(--creme);color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--encre)}
.btn.wide{grid-column:1/-1;text-align:center}
.btn[disabled]{opacity:.45}

/* ── Pages ── */
.page{padding:20px 16px 32px}
.page h2{font-family:var(--d);font-weight:400;text-transform:uppercase;font-size:42px;line-height:.95;margin:0 0 6px}
.page h3{font-size:17px;margin:22px 0 6px}
.page .lead{color:var(--gris);margin:0 0 18px;line-height:1.45}
.page p,.page li{line-height:1.6}
.page .legal{font-size:14.5px}
.page .legal h3{font-size:15.5px;margin-top:20px}
.back{border:0;background:none;padding:0 0 10px;font-size:14px;font-weight:700;color:var(--gris);display:flex;align-items:center;gap:6px}
/* Quatre colonnes, pas trois : le lien occupe les trois premieres (display:contents)
   et le bouton « retirer » la quatrieme. Avec trois colonnes il retombait à la ligne,
   sous la photo, ou il se lisait comme un bouton de la piece suivante. */
.row{display:grid;grid-template-columns:72px 1fr auto auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--ligne)}
.row>a{display:contents;color:inherit;text-decoration:none}
.row img{width:72px;height:90px;object-fit:cover;background:var(--pale);border-radius:12px}
.row .t{font-weight:700;line-height:1.2}
.row .s{font-family:var(--m);font-size:11.5px;color:var(--gris);margin-top:3px}
.row .p{font-family:var(--d);font-size:26px;color:var(--louve);text-align:right;font-variant-numeric:tabular-nums}
.row .p small{display:block;font-family:var(--m);font-size:10.5px;color:var(--gris)}
.row button.del{border:0;background:none;color:var(--gris);font-size:18px;padding:6px}
.empty{border:1.5px dashed var(--ligne);border-radius:16px;padding:22px;text-align:center;color:var(--gris);line-height:1.5}
.news{margin-top:22px;background:var(--encre);color:var(--creme);border-radius:20px;padding:18px}
.news h3{margin:0 0 6px;font-family:var(--d);font-weight:400;font-size:26px;text-transform:uppercase;color:var(--louve-2)}
.news p{margin:0 0 12px;font-size:14px;line-height:1.45;opacity:.85}
.news form{display:flex;gap:8px}
.news input[type=email]{flex:1;min-width:0;border:0;border-radius:12px;padding:12px;font:inherit;font-size:16px}
.news button{border:0;border-radius:12px;background:var(--louve);color:#fff;font-weight:800;padding:0 16px}
.news label.chk{display:flex;gap:8px;align-items:flex-start;font-size:12px;margin-top:10px;opacity:.85;line-height:1.35}
.news .ok{color:#9BE3B8;font-weight:700;margin-top:10px;line-height:1.5}
.rule{counter-reset:r;display:grid;gap:14px;margin:0;padding:0;list-style:none}
/* Le numéro à gauche, le texte à droite. Les positions sont données explicitement :
   sans ça, un nœud de texte non balisé devient un élément de grille anonyme et
   retombe dans la colonne du numéro, large de 34 px — une colonne d'un mot par ligne. */
.rule li{display:grid;grid-template-columns:34px 1fr;column-gap:10px;row-gap:3px;line-height:1.45}
.rule li::before{counter-increment:r;content:counter(r);grid-column:1;grid-row:1 / span 2;font-family:var(--d);font-size:28px;color:var(--louve);line-height:1}
.rule li b{grid-column:2;grid-row:1}
.rule li span{grid-column:2;grid-row:2}
.shopinfo{margin-top:22px;padding:16px;border-radius:16px;background:var(--pale);line-height:1.6;font-size:14px}
.shopinfo b{font-family:var(--d);font-weight:400;font-size:22px;text-transform:uppercase;display:block;margin-bottom:4px}
.hours{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:8px 0 0;font-size:14px}
.hours dt{color:var(--gris)}
.hours dd{margin:0;font-weight:600}
.hours .today{color:var(--louve)}
.links{display:grid;gap:8px;margin-top:18px}
.links a{display:block;padding:14px 16px;border-radius:14px;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--ligne);text-decoration:none;color:inherit;font-weight:700}
.links a span{display:block;font-weight:500;font-size:12.5px;color:var(--gris);margin-top:2px}
.sold .row img{filter:grayscale(1);opacity:.65}
.stamp{display:inline-block;font-family:var(--m);font-size:10.5px;background:var(--encre);color:var(--creme);padding:2px 6px;border-radius:5px;margin-top:4px}

/* ── Page « Nous » ── */
.nous-photo{margin:0 -16px 18px;position:relative}
.nous-photo img{display:block;width:100%;height:auto}
.nous-photo figcaption{font-family:var(--m);font-size:11px;color:var(--gris);padding:8px 16px 0;letter-spacing:.02em}
.bande{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px -16px;padding:0 16px}
.bande img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;display:block}
.bloc{margin:24px 0 0}
.bloc h3{font-size:18px;margin:0 0 8px}
.bloc p{margin:0 0 12px}
.arcade{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;background:var(--pale);border-radius:18px;padding:14px;margin-top:18px}
.arcade img{width:96px;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block}
.arcade h3{margin:0 0 4px;font-size:16px}
.arcade p{margin:0;font-size:14px;line-height:1.5}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 0;text-align:center}
.chiffres div{background:var(--papier);border-radius:14px;padding:12px 6px;box-shadow:inset 0 0 0 1px var(--ligne)}
.chiffres b{display:block;font-family:var(--d);font-weight:400;font-size:26px;color:var(--louve);line-height:1}
.chiffres span{font-size:11.5px;color:var(--gris);line-height:1.3;display:block;margin-top:4px}
.aconfirmer{border:1.5px dashed var(--louve);border-radius:14px;padding:12px 14px;margin:14px 0;font-size:13.5px;line-height:1.5;color:var(--gris)}
.aconfirmer b{color:var(--louve);display:block;margin-bottom:2px;font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* ── Fiche article ── */
.gallery{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery img{scroll-snap-align:center;flex:none;width:86%;aspect-ratio:1/1;object-fit:contain;border-radius:18px;background:var(--pale)}
.gallery.one img{width:100%}
.dots{display:flex;gap:5px;justify-content:center;margin-top:8px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--ligne)}
.dots i.on{background:var(--louve)}
.p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-top:16px}
.p-name{font-weight:800;font-size:23px;line-height:1.15;margin:0}
.p-sub{font-family:var(--m);font-size:11.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.p-price{display:flex;align-items:flex-end;gap:12px;margin:14px 0 2px;flex-wrap:wrap}
.p-price .now{font-size:52px}
.p-price .now.pool{color:var(--louve)}
.p-note{font-size:13px;color:var(--gris);line-height:1.45}
.stairs{margin:18px 0 6px}
.stairs h4,.maxbox h4,.facts h4,.resa h4{font-family:var(--m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin:0 0 8px;font-weight:500}
.steps{display:flex;align-items:flex-end;gap:3px;height:132px;padding-top:14px}
.step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;font-family:var(--m);font-size:9px;color:var(--gris);letter-spacing:-.02em}
.step .bar{width:100%;border-radius:6px 6px 2px 2px;background:var(--ligne)}
.step.past .bar{background:#D9C6BA}
.step.cur .bar{background:var(--louve)}
.step.cur{color:var(--louve);font-weight:700}
.step.fut .bar{background:repeating-linear-gradient(135deg,var(--pale) 0 4px,#F6CBB3 4px 8px)}
.step.floor .bar{box-shadow:inset 0 3px 0 var(--encre)}
.legend{display:flex;justify-content:space-between;font-size:12px;color:var(--gris);margin-top:6px;gap:8px}
.maxbox{background:var(--papier);border-radius:16px;padding:14px;margin:16px 0;box-shadow:inset 0 0 0 1px var(--ligne)}
.maxbox output{font-family:var(--d);font-size:30px;color:var(--encre)}
.maxbox input[type=range]{width:100%;accent-color:var(--louve)}
.maxbox p{margin:6px 0 0;font-size:13px;line-height:1.4}
.maxbox button{margin-top:10px;width:100%;border:0;border-radius:12px;padding:12px;background:var(--encre);color:var(--creme);font-weight:800}
.facts{margin-top:18px}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.facts dt{color:var(--gris)}
.facts dd{margin:0;font-weight:600}
.desc{margin-top:14px;line-height:1.6;font-size:14.5px;white-space:pre-line}
.gone{margin:18px 0;border-radius:16px;padding:16px;background:#FDECEA;color:#7A1C14;line-height:1.5;font-weight:600}
.gone.reserved{background:#FFF3E2;color:#7A4A14}
.p-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;position:sticky;bottom:0;background:linear-gradient(to top,var(--creme) 70%,transparent);padding:10px 0 4px}
/* Quand l'envoi est coupé, il ne reste que « Réserver » : il prend toute la largeur
   plutôt que de flotter sur une demi-colonne. */
.p-actions:has(> .btn:only-child){grid-template-columns:1fr}

/* ── Formulaire de réservation ── */
.resa{margin-top:18px}
.field{display:block;margin-bottom:12px}
.field span{display:block;font-size:13px;font-weight:700;margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;border:0;border-radius:12px;padding:13px;font:inherit;font-size:16px;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--ligne)}
.field textarea{min-height:76px;resize:vertical}
.field.err input{box-shadow:inset 0 0 0 1.5px var(--alerte)}
.field .hint{font-size:12px;color:var(--gris);font-weight:500;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.recap{background:var(--pale);border-radius:14px;padding:14px;margin:14px 0;line-height:1.7;font-size:14.5px}
.recap .tot{font-weight:800;font-size:17px;border-top:1px solid rgba(30,18,12,.15);margin-top:8px;padding-top:8px;display:flex;justify-content:space-between}
.submit{width:100%;border:0;border-radius:14px;padding:16px;background:var(--louve);color:#fff;font-weight:800;font-size:16px}
.submit[disabled]{opacity:.6}
/* ── Panier ──────────────────────────────────────────────────────────────────
   Le detail ligne par ligne dans la feuille de commande : le client doit relire
   ce qu'il paie avant de taper son adresse. Un total nu, sur cinq pieces, ne se
   verifie pas. */
.sh-ligne{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:3px 0}
.sh-ligne span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-ligne b{font-family:var(--m);font-size:13px;font-weight:700;white-space:nowrap}
/* Une piece deja au panier : le bouton le dit, et reste touchable pour la retirer. */
.btn.a.dedans{background:var(--louve);color:#fff}
.formerr{background:#FDECEA;color:#7A1C14;border-radius:12px;padding:12px;font-size:14px;margin-bottom:12px;line-height:1.45}
.done{text-align:center;padding:26px 8px}
.done .big{font-family:var(--d);font-weight:400;font-size:40px;text-transform:uppercase;color:var(--louve);line-height:1;margin:0 0 10px}
.done p{line-height:1.6}

/* ── Feuille (fiche en surimpression) et messages ── */
.sheet{position:absolute;inset:0;z-index:20;background:rgba(30,18,12,.45);display:flex;align-items:flex-end}
.sheet[hidden]{display:none!important}
.sheet .in{background:var(--creme);width:100%;max-height:94%;overflow-y:auto;border-radius:24px 24px 0 0;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 18px);animation:up .28s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
.grab{width:44px;height:5px;border-radius:3px;background:var(--ligne);margin:0 auto 10px}
.x{position:sticky;top:0;float:right;border:0;background:var(--papier);width:40px;height:40px;border-radius:50%;font-size:20px;box-shadow:0 1px 0 var(--ligne);z-index:2}
.toast{position:absolute;left:16px;right:16px;bottom:86px;z-index:30;background:var(--encre);color:var(--creme);border-radius:14px;padding:12px 14px;font-size:14px;transform:translateY(20px);opacity:0;transition:.25s;pointer-events:none;line-height:1.4}
.toast.show{transform:none;opacity:1}
.loading{padding:40px 16px;text-align:center;color:var(--gris)}
.skel{background:linear-gradient(90deg,var(--papier) 25%,#F4E7DE 50%,var(--papier) 75%);background-size:400% 100%;animation:sk 1.4s infinite;border-radius:16px}
@keyframes sk{from{background-position:100% 0}to{background-position:0 0}}
.offline{background:var(--encre);color:var(--creme);padding:10px 16px;font-size:13px;line-height:1.4}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ── Ce qui est masqué tant que le site n'est pas fini ─────────────────────
   Piloté par les classes posées sur <body> au démarrage, d'après config.js.   */
.sans-descente .chute,
.sans-descente .tabs button[data-v="descente"]{display:none}
.sans-descente .tabs{grid-template-columns:repeat(4,1fr)}

/* Le bandeau de chantier : il dit la vérité sans occuper l'écran. */
.chantier{margin:14px 16px 0;border-radius:16px;background:var(--pale);padding:12px 14px;display:flex;flex-direction:column;gap:3px;box-shadow:inset 0 0 0 1.5px var(--ligne)}
.chantier b{font-family:var(--m);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--louve)}
.chantier span{font-size:13px;line-height:1.45;color:var(--encre)}

/* ── Loupe : la photo en plein écran, agrandissable ───────────────────────── */
.gallery img{cursor:zoom-in}
body.loupe-ouverte{overflow:hidden}
.loupe{position:fixed;inset:0;z-index:9999;background:rgba(12,10,9,.97);touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;animation:loupe-in .18s ease-out}
@keyframes loupe-in{from{opacity:0}to{opacity:1}}
.loupe-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Les photos sont detourees : fond transparent. Sur un voile noir, un vetement
   sombre devient invisible. La fiche article leur donne deja un fond pale
   (.gallery img), la loupe fait pareil. */
.loupe-img{max-width:100%;max-height:100%;object-fit:contain;background:var(--pale);border-radius:12px;transform-origin:center center;will-change:transform;-webkit-user-drag:none;pointer-events:none}
.loupe.zoomee .loupe-img{cursor:grab}
.loupe-x{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:18px;line-height:1;cursor:pointer;font-family:inherit}
.loupe-nav{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:16px}
.loupe-nav button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:1;cursor:pointer;font-family:inherit}
.loupe-n{font-family:var(--m);font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.8);min-width:52px;text-align:center}
.loupe-aide{position:absolute;top:max(20px,env(safe-area-inset-top));left:16px;right:68px;z-index:2;color:rgba(255,255,255,.6);font-family:var(--m);font-size:11px;letter-spacing:.07em;text-transform:uppercase;transition:opacity .25s;pointer-events:none}
.loupe.zoomee .loupe-aide{opacity:0}
@media (prefers-reduced-motion:reduce){.loupe{animation:none}}

/* Pied de page legal du catalogue — ajoute le 08.10.2026.
   Discret mais lisible : c'est une obligation legale (LCD art. 3 al. 1 let. s) et
   une condition d'integration TWINT, pas un ornement. Il ne doit donc jamais
   descendre sous le contraste minimal ni se perdre dans le defilement infini :
   il vient apres la grille, une fois toutes les pieces chargees. */
.pied-legal {
  margin: 40px 16px 28px;
  padding-top: 20px;
  border-top: 1px solid #efe0d6;
  font-size: 12.5px;
  line-height: 1.75;
  color: #7a6355;
  text-align: center;
}
.pied-legal a { color: #7a6355; text-decoration: underline; text-underline-offset: 2px; }
.pied-legal a:hover, .pied-legal a:focus-visible { color: #E84406; }

/* ── Entrée : la devanture, le logo par-dessus ─────────────────────────────
   Ajoutée le 08.10.2026. La première chose qu'on voit du site est la boutique
   elle-même. 72 % de la hauteur : le titre suivant dépasse en bas de l'écran,
   ce qui donne envie de faire défiler — un panneau plein écran ressemble à une
   porte fermée. Le dégradé est franc en bas pour que le texte blanc tienne sans
   avoir à assombrir toute la photo. */
.accueil{position:relative;height:72%;min-height:470px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#1a0d06}
/* Cibler la classe et non `img` : le logo posé dessus est une image lui aussi,
   et une règle `.accueil img` le mettrait en position absolue par-dessus le texte. */
.accueil .fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 33%}
.accueil .voile{position:absolute;inset:0;background:linear-gradient(to bottom,
  rgba(10,4,1,.30) 0%, rgba(10,4,1,0) 26%, rgba(10,4,1,.08) 46%,
  rgba(10,4,1,.80) 76%, rgba(10,4,1,.96) 100%)}
.accueil .in{position:relative;padding:0 20px 24px;color:var(--creme)}
/* Le logo est noir sur fond transparent : on le blanchit plutôt que de maintenir
   un second fichier. `brightness(0) invert(1)` donne un blanc franc quelle que
   soit la couleur de départ. */
.accueil .mot{display:block;height:34px;width:auto;margin:0 0 12px;filter:brightness(0) invert(1);opacity:.96}
.accueil p{font-size:15px;line-height:1.5;color:#F3DFD2;max-width:32ch;margin:0}
.accueil .fin{display:flex;gap:14px;align-items:center;margin-top:18px}
.accueil .go{background:var(--louve);color:#fff;border:0;border-radius:99px;padding:13px 22px;font-weight:800;font-size:15px}
.accueil .second{color:var(--creme);text-decoration:underline;text-underline-offset:3px;font-size:14px}
.accueil .ouvert{position:absolute;top:14px;right:14px;background:rgba(10,4,1,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--creme);border-radius:99px;padding:7px 13px;font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.accueil .ouvert i{width:8px;height:8px;border-radius:50%;background:#49D17F}
.accueil .ouvert.eteint i{background:#9b8275}
.accueil .ouvert small{font-family:var(--b);text-transform:none;letter-spacing:0;opacity:.82}

/* ── La Descente, en bandeau sous l'entrée ─────────────────────────────────
   Invisible tant qu'aucune pièce n'est en descente : un carrousel vide sous un
   titre apprend au visiteur que la rubrique ne sert à rien. */
.descente-bandeau{padding:22px 0 4px;background:var(--creme)}
.db-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 16px 3px}
.db-tete h2{font-family:var(--d);font-weight:400;font-size:31px;line-height:1;text-transform:uppercase;margin:0}
.db-tete a{color:var(--louve);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.db-tete a::after{content:" →"}
.db-sous{padding:0 16px 14px;color:var(--gris);font-size:13.5px;line-height:1.5;margin:0}
.db-piste{display:flex;gap:11px;overflow-x:auto;padding:2px 16px 16px;scroll-snap-type:x mandatory;scrollbar-width:none}
.db-piste::-webkit-scrollbar{display:none}
.db-carte{flex:0 0 146px;scroll-snap-align:start;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px}
.db-carte .pic{position:relative;aspect-ratio:1/1;border-radius:16px;background:var(--pale);overflow:hidden}
.db-carte .pic img{width:100%;height:100%;object-fit:contain;display:block}
.db-carte .mini{position:absolute;left:8px;top:8px;z-index:2;font-family:var(--m);font-size:9.5px;font-weight:700;letter-spacing:.06em;background:var(--louve);color:#fff;border-radius:99px;padding:3px 7px}
.db-carte .nm{font-weight:700;font-size:13px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.db-carte .px{font-family:var(--m);font-size:13px;font-weight:700}
.db-carte .px s{color:var(--gris);font-weight:400;margin-right:6px}
.db-carte .px b{color:var(--louve)}
.db-fin{flex:0 0 112px;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;gap:4px;
  border:1px dashed var(--ligne);border-radius:16px;padding:14px;text-decoration:none;color:var(--gris);font-size:13px;font-weight:700;line-height:1.3}
.db-fin span{color:var(--louve);font-size:18px}

/* Moyens de paiement — bandeau discret, juste au-dessus du bouton Payer. */
.moyens{display:flex;align-items:flex-start;gap:12px;margin:12px 0 0;padding:12px;
  border:1px solid var(--ligne);border-radius:10px;background:var(--papier)}
.moyens svg{flex:0 0 auto;margin-top:1px}
.moyens span{font-size:13px;color:var(--gris);line-height:1.45}
.moyens b{font-weight:600;color:var(--encre)}