/* ══════════════════════════════════════════════════════════════════
   YUSHITHAÏ · maquette NÉON — gabarit « Enseigne »
   Dispositifs adaptés de debs-bistro.vercel.app (référence choisie par Gian).
   Palette relevée au pixel sur DEUX photos de Gian : leur salle et leur carte.
   Le néon porte les titres, les noms de section et les prix. Jamais le texte
   de lecture : le bagliore n'est pas du contraste.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- polices, servies en local (recette hors ligne) ---------- */
/* Le systeme est releve sur DEUX documents a eux, jamais sur une idee de
   « restaurant japonais » : leur LOGO et leur CARTE imprimee.
   Titres → QUESTRIAL. Comparaison faite, logotype decoupe contre candidats
   rendus a la meme hauteur de capitale : meme chasse, meme Y a bras ouverts,
   meme U a cuve ronde. Jost, qui tenait ce role avant, est plus etroit et
   ca se voit. Questrial n'a QU'UN SEUL GRAISSAGE (400) : la hierarchie des
   titres se fait donc au corps et au letter-spacing, jamais a la graisse,
   exactement comme leur logo, qui est mince et large et s'impose par
   l'espacement (mesure : +0,115 em sur YUSHI, ramene a la hauteur de
   capitale du logotype).
   Zen Kaku Gothic New porte les kanji DANS LA MEME VOIX parce que c'est un
   gothic, donc un sans : declare en second dans --disp, le navigateur y
   bascule glyphe par glyphe pour 日本 ou 寿司. Un seul graissage suffit,
   puisque plus aucun titre ne demande 500. */
@font-face{font-family:'Questrial';src:url(../fonts/questrial-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Zen Kaku Gothic New';src:url(../fonts/zkgn-400.woff2) format('woff2');font-weight:400;font-display:swap}
/* Le texte de lecture ne copie PAS le trait mince du logo : a 16px sur du
   noir un display large et mince devient illisible. Figtree tient la meme
   famille geometrique mais avec une hauteur d'x haute et un fut plein,
   donc un faible contraste : c'est ce qui tient sur fond sombre. */
@font-face{font-family:'Figtree';src:url(../fonts/figtree-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Figtree';src:url(../fonts/figtree-600.woff2) format('woff2');font-weight:600;font-display:swap}
/* Leur carte porte DEUX caracteres, et pas un seul, ce que la page melangeait :
   - les ETIQUETTES dans le tube de neon (MAKI, CALIFORNIA, CRISPY, VEGGIE)
     sont un geometrique GRAS et large  →  Montserrat 700 ;
   - les LISTES sous l'etiquette (« CALIFORNIA SAUMON AVOCAT X6 ») sont un
     condense a terminaisons plates et a equerre  →  Saira Condensed, que la
     comparaison confirme et qui ne bouge pas.
   Montserrat ne double donc aucun role : il rend a l'etiquette et a la
   pastille de prix la difference qu'elles ont sur leur carte. Il ne sort pas
   de ces deux objets : les boutons, la barre, les listes et les surtitres
   restent en condense. Servi en capitales uniquement (text-transform). */
@font-face{font-family:'Montserrat';src:url(../fonts/montserrat-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Saira Condensed';src:url(../fonts/saira-500-latin.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Saira Condensed';src:url(../fonts/saira-700-latin.woff2) format('woff2');font-weight:700;font-display:swap}
/* Le thai passe en sans pour la meme raison que le reste. Un seul graissage :
   aucun texte thai de la page ne demande 500. */
@font-face{font-family:'Noto Sans Thai';src:url(../fonts/notosansthai-400.woff2) format('woff2');font-weight:400;font-display:swap}

:root{
  --laque:#131113; --laque-2:#1D1A20; --laque-3:#0D0B0A;
  --riz:#EDE5DC; --riz-2:#E2D9CD;
  --prune:#5E2945;
  --sumi:#1B1720; --corps:#DED5CE; --fumee:#A79EA6; --fumee-riz:#5C5158;
  --neon:#CA396B; --neon-fonce:#A02E56; --neon-clair:#F49DC4; --tube:#FFF6FD;
  /* rose eclairci reserve au texte POSE SUR LA PHOTO du heros : mesure
     bagliore eteint, le rose de marque tombait a 3,8:1 sur les zones
     claires de la salle. Ici 5,4:1. Il ne sert nulle part ailleurs. */
  --neon-pale:#FBC9DE;
  --vert:#58B34C; --parquet:#BCAA97;
  --disp:'Questrial','Zen Kaku Gothic New','Avenir Next',Avenir,sans-serif;
  --lecture:'Figtree','Questrial','Helvetica Neue',Arial,sans-serif;
  --sign:'Saira Condensed','Arial Narrow',Arial,sans-serif;
  --etiq:'Montserrat','Saira Condensed',Arial,sans-serif;
  --th:'Noto Sans Thai','Zen Kaku Gothic New',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--lecture);background:var(--laque);color:var(--corps);
     line-height:1.7;overflow-x:hidden;font-size:17px}
/* height:auto est obligatoire : les attributs width/height du HTML posent une
   hauteur de présentation, et sans ça toute image en aspect-ratio se rend a sa
   hauteur NATURELLE. Mesuré : les photos faisaient 1424px de haut. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}
ul{list-style:none}
/* Questrial n'a qu'un graissage : plus aucun titre ne demande 500. La
   hierarchie descend par le corps ET par le letter-spacing, du plus large
   (h1, .marque__nom, .pied__nom : le registre du logo) au plus serre (h3). */
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:1.14;letter-spacing:.028em}
.jp{font-family:var(--disp)}
.th{font-family:var(--th);letter-spacing:normal;line-height:1.65}
.sign{font-family:var(--sign);text-transform:uppercase;letter-spacing:.18em}
.wrap{width:min(1180px,92vw);margin:0 auto}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* grain universel : rien n'est propre ni plat (repris de la référence) */
.grain{pointer-events:none;position:fixed;inset:0;z-index:9990;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ══ RÈGLE 1 — LA TEXTURE : les ondes du fond de leur carte ══
   Gradients CSS, donc currentColor est réellement résolu : la texture
   s'inverse toute seule d'une section à l'autre. Zéro fichier. */
.tex{position:relative}
/* ⚠️ 08/09/2026 : la matière était deux repeating-radial-gradient, ce que la
   skill interdit comme fond — une seule échelle, un pas régulier, ça moire.
   À la place, le SEIGAIHA 青海波, la vague japonaise, redessinée arc par arc
   (générateur dans _build/, graine 69006). Une seule matière, deux fichiers :
   trait sombre en multiply sur les fonds clairs, trait clair en screen sur les
   fonds sombres. Les opacités diffèrent parce que le sombre-sur-clair pèse
   environ deux fois plus à l'œil. */
/* ⚠️ 08/09/2026, choix de Gian : le FOND de la maison est un papier, et le
   seigaiha reste un MOTIF, réservé au prune. Le papier est généré (graine
   69006, Lyon 6e) avec trois échelles — fibre étirée, grain, nuage lent — ce
   qui est exactement ce qui manquait aux gradients répétés : une matière a
   toujours plus d'un pas, sinon l'œil accroche la grille. */
.tex::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url(../images/papier-clair.jpg);
  background-size:440px 440px;
  mix-blend-mode:multiply;opacity:var(--tex-o,.5);filter:sepia(.3)}
.f-prune.tex::before{
  background-image:url(../images/seigaiha-clair.png),url(../images/papier-sombre.jpg);
  background-size:128px 128px,440px 440px;
  mix-blend-mode:screen;opacity:.2;filter:none}
/* Choix de Gian, 08/09/2026 : les sections NOIRES gardent la trame du 19/08.
   C'est un écart assumé à la règle « une seule matière » : sur les fonds nuit
   il préfère l'ancienne, et c'est son appel. */
/* sur les fonds nuit, la MÊME matière éclaircit au lieu d'assombrir : c'est le
   mode de fusion qui l'inverse, pas un deuxième motif. L'opacité n'est pas la
   même dans les deux sens, le sombre-sur-clair pèse environ deux fois plus. */
.f-nuit.tex::before{
  background-image:url(../images/papier-sombre.jpg);
  background-size:440px 440px;mix-blend-mode:screen;opacity:.3;filter:none}
.tex>*{position:relative;z-index:1}
.sur-clair{--tex-o:.045}   /* le sombre sur clair pèse ~2x : moitié moins */

/* ---------- fonds ---------- */
.sec{padding:clamp(3.4rem,7vw,5.6rem) 0;position:relative}
.f-nuit{background:var(--laque);color:var(--corps)}
.f-riz{background:var(--riz);color:var(--sumi)}
.f-riz2{background:var(--riz-2);color:var(--sumi)}
.f-prune{background:var(--prune);color:#F6E9F0}
/* laque : les deux dégradés radiaux de .plaster, relus en laque sombre */
.laque{background:
  radial-gradient(92% 72% at 18% 8%, rgba(255,255,255,.09), transparent 62%),
  radial-gradient(82% 62% at 86% 94%, rgba(0,0,0,.34), transparent 58%),
  var(--prune)}

/* ---------- titraille ---------- */
.k{font-family:var(--sign);letter-spacing:.42em;text-transform:uppercase;
   font-size:.72rem;color:var(--neon-clair);display:block;margin-bottom:.9rem}
.f-riz .k,.f-riz2 .k{color:var(--neon-fonce)}
/* mesure, bagliore eteint : --neon-clair sur la laque prune tombe a 4,2:1. */
.f-prune .k{color:var(--neon-pale)}
.h2{font-size:clamp(1.95rem,4.4vw,3.3rem);margin-bottom:1.05rem;letter-spacing:.042em}
.h2 .acc{color:var(--neon)}
.f-riz .h2 .acc,.f-riz2 .h2 .acc{color:var(--neon-fonce)}
.f-prune .h2 .acc{color:var(--neon-clair)}
p,li,.lead,.cite,figcaption,.entree__note,.occas span{text-wrap:pretty}
.h2,h1,h3,.divider__l,.k,.tuile__k,.dem__sur,.hero__k{text-wrap:balance}
.lead{font-size:1.06rem;color:var(--fumee);max-width:62ch}
.f-riz .lead,.f-riz2 .lead{color:var(--fumee-riz)}
.f-prune .lead{color:#EBD4E0}
.rule{width:74px;height:4px;background:var(--neon);margin:1.2rem 0;border-radius:2px}
.f-riz .rule,.f-riz2 .rule{background:var(--neon-fonce)}

/* ══ LES BOUTONS ET LES PASTILLES — LA GRAMMAIRE DE LEUR CARTE ══
   Sur leur carte imprimée, chaque plat est annoncé par deux objets, et deux
   seulement : une ÉTIQUETTE AU NÉON (rectangle à angles doux, tube blanc chaud
   qui rayonne rose vers l'extérieur ET vers l'intérieur, lettrage condensé
   majuscule) puis, collée à côté, une PASTILLE DE PRIX pleine, légèrement
   inclinée, prix en blanc. MAKI · 13,90 € · CALIFORNIA · CRISPY · YUSHI.
   C'est leur système de boutons et de badges : on le prend chez eux.
   Zéro rayon asymétrique, zéro ombre nette décalée. ══ */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sign);text-transform:uppercase;letter-spacing:.14em;
  text-decoration:none;text-align:center;cursor:pointer;font-size:.82rem;
  font-weight:700;padding:.72rem 1.4rem;border:2px solid;border-radius:9px;
  transition:box-shadow .2s ease,background-color .2s ease,color .2s ease;
  min-height:44px;line-height:1.4}
/* le bouton plein = leur pastille de prix, agrandie */
.btn-plein{background:var(--neon-fonce);color:var(--tube);border-color:rgba(255,246,253,.92);
  box-shadow:0 0 0 2px rgba(202,57,107,.8), 0 0 16px 2px rgba(202,57,107,.5),
             inset 0 0 14px rgba(255,246,253,.14)}
.btn-plein:hover,.btn-plein:focus-visible{background:var(--neon);
  box-shadow:0 0 0 2px rgba(244,157,196,.9), 0 0 26px 4px rgba(202,57,107,.8),
             inset 0 0 16px rgba(255,246,253,.22)}
/* le bouton vide = le tube seul, comme l'étiquette MAKI */
.btn-vide{background:rgba(202,57,107,.10);color:var(--tube);border-color:rgba(255,246,253,.92);
  box-shadow:0 0 0 2px rgba(202,57,107,.75), 0 0 14px 2px rgba(202,57,107,.45),
             inset 0 0 12px rgba(202,57,107,.42)}
.btn-vide:hover,.btn-vide:focus-visible{background:rgba(202,57,107,.28);
  box-shadow:0 0 0 2px rgba(244,157,196,.9), 0 0 24px 4px rgba(202,57,107,.7),
             inset 0 0 14px rgba(202,57,107,.55)}
/* sur fond riz, le tube ne s'allume pas : leur bande basse imprime le même
   objet en aplat. Le plein garde le rose foncé, le second passe en encre. */
.btn-nuit{background:var(--neon-fonce);color:var(--tube);border-color:var(--neon-fonce);
  box-shadow:0 0 0 2px rgba(160,46,86,.28), 0 6px 18px rgba(94,41,69,.3)}
.btn-nuit:hover,.btn-nuit:focus-visible{background:#8A2749;
  box-shadow:0 0 0 2px rgba(160,46,86,.5), 0 8px 22px rgba(94,41,69,.45)}
.btn-clair{background:transparent;color:var(--sumi);border-color:var(--neon-fonce);
  box-shadow:0 0 0 2px rgba(160,46,86,.18)}
.btn-clair:hover,.btn-clair:focus-visible{background:var(--neon-fonce);color:var(--tube);
  border-color:var(--neon-fonce);box-shadow:0 0 0 2px rgba(160,46,86,.4)}

/* l'étiquette au néon, telle quelle : elle sert de titre d'entrée de carte
   et de badge partout ailleurs sur la page. */
.neon-etiq{display:inline-block;font-family:var(--etiq);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:var(--tube);
  padding:.42rem .95rem;border:2px solid rgba(255,246,253,.92);border-radius:8px;
  background:rgba(202,57,107,.12);
  box-shadow:0 0 0 2px rgba(202,57,107,.8), 0 0 14px 2px rgba(202,57,107,.5),
             inset 0 0 12px rgba(202,57,107,.5)}
.f-riz .neon-etiq,.f-riz2 .neon-etiq{color:var(--sumi);border-color:var(--neon-fonce);
  background:rgba(160,46,86,.07);
  box-shadow:0 0 0 2px rgba(160,46,86,.24), inset 0 0 12px rgba(160,46,86,.10)}
/* la pastille de prix, pleine et légèrement inclinée : sur leur carte elle
   est posée de travers à côté de l'étiquette, jamais alignée au cordeau. */
.neon-prix{display:inline-block;font-family:var(--etiq);font-weight:700;
  letter-spacing:.03em;font-size:.76rem;text-transform:uppercase;
  background:var(--neon-clair);color:var(--laque);padding:.3rem .68rem;
  border-radius:7px;transform:rotate(-3deg);
  box-shadow:0 0 16px rgba(244,157,196,.45)}
.f-riz .neon-prix,.f-riz2 .neon-prix{background:var(--neon-fonce);color:var(--tube);
  box-shadow:0 4px 14px rgba(94,41,69,.32)}
/* le point rose qui sépare les deux, relevé sur leur carte */
.neon-pt{color:var(--neon-clair);font-weight:700;padding:0 .1rem}
.f-riz .neon-pt,.f-riz2 .neon-pt{color:var(--neon-fonce)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--neon-clair);outline-offset:3px}


/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:1000;background:rgba(13,11,10,.96);
  backdrop-filter:blur(6px);border-bottom:3px solid var(--neon)}
.nav__in{display:flex;align-items:center;gap:1.3rem;padding:.55rem 0}
.marque{display:flex;align-items:center;gap:.7rem;line-height:1;text-decoration:none}
/* le logo est utilisé tel quel : pas de filter, pas de mix-blend-mode,
   pas de contour, pas de recadrage. Il est rond et détouré, donc il se pose
   seul sur le fond nuit. */
.marque__logo{width:clamp(44px,5vw,52px);height:auto;flex:none}
.marque__txt{display:flex;flex-direction:column}
.marque__nom{font-family:var(--disp);font-weight:400;font-size:1.4rem;color:var(--tube);letter-spacing:.115em}
.marque__nom span{color:var(--neon-clair)}
.marque__sub{font-family:var(--sign);font-size:.69rem;letter-spacing:.38em;
  text-transform:uppercase;color:var(--neon-clair);margin-top:.25rem}
.nav__liens{display:flex;gap:1.05rem;margin-left:auto;align-items:center}
.nav__liens a{font-family:var(--sign);font-size:.78rem;letter-spacing:.15em;
  text-transform:uppercase;text-decoration:none;color:var(--corps);
  padding:.5rem 0;border-bottom:2px solid transparent;min-height:44px;display:flex;align-items:center}
.nav__liens a:hover,.nav__liens a:focus-visible{color:var(--neon-clair);border-color:var(--neon-clair)}
.nav__liens a.btn{padding:.72rem 1.4rem;border:2px solid;border-radius:9px;
  min-height:44px;display:inline-flex;align-items:center}
.nav__liens a.btn-plein{border-color:rgba(255,246,253,.92)}
.nav__liens a.btn-plein,.nav__liens a.btn-plein:hover{color:var(--tube)}
.burger{display:none;margin-left:auto;background:rgba(202,57,107,.12);
  border:2px solid rgba(255,246,253,.92);border-radius:9px;padding:.5rem .9rem;
  font-family:var(--sign);letter-spacing:.12em;text-transform:uppercase;font-size:.74rem;
  cursor:pointer;color:var(--tube);min-height:44px;
  box-shadow:0 0 0 2px rgba(202,57,107,.75), 0 0 12px rgba(202,57,107,.45),
             inset 0 0 10px rgba(202,57,107,.4)}
.nav__fermer{display:none}

/* ---------- HÉROS ---------- */
.hero{position:relative;min-height:min(88svh,760px);display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;background:var(--laque-3)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 34%;opacity:.62}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(78% 72% at 50% 46%, rgba(13,11,10,.52) 0%, rgba(13,11,10,.88) 100%)}
/* le fond du heros se termine EXACTEMENT sur la couleur de la section 2, sinon
   le fond change net juste sous l'element a cheval. */
.hero::before{content:'';position:absolute;left:0;right:0;bottom:0;z-index:1;
  height:clamp(150px,22vh,280px);pointer-events:none;
  background:linear-gradient(to bottom,rgba(19,17,19,0) 0%,rgba(19,17,19,.55) 46%,var(--laque) 92%)}
.hero__in{position:relative;z-index:2;padding:6.2rem 1rem 5rem;width:min(900px,92vw)}
.hero__k{font-family:var(--sign);letter-spacing:.42em;font-size:.74rem;
  text-transform:uppercase;color:var(--neon-pale);display:block;margin-bottom:1.1rem}
.hero h1{margin:0;line-height:0;font-size:0}
/* Le titre n'est plus composé : c'est LEUR lettrage, relevé au pixel dans
   logo-yushithai.webp (bande y 198-282) et remonté en 1936 px. Aucune police
   ne redessine leur marque. Le halo rose et l'ombre nette sont les mêmes
   valeurs que portait le text-shadow. */
.hero h1 img{width:min(76vw,600px);height:auto;display:inline-block;
  filter:drop-shadow(0 0 26px rgba(202,57,107,.75)) drop-shadow(4px 4px 0 rgba(94,41,69,.9))}
/* l'enseigne, citée mot pour mot : TOKYO · OSAKA · BANGKOK · 日本 · ไทย */
.hero__enseigne{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.45rem .8rem;margin-top:1.1rem;color:var(--neon-pale);
  font-family:var(--sign);letter-spacing:.3em;text-transform:uppercase;font-size:.8rem}
.hero__enseigne .jp{font-family:var(--disp);letter-spacing:.14em;font-size:1.15rem}
.hero__enseigne .th{font-family:var(--th);letter-spacing:normal;font-size:1.05rem}
.hero__enseigne i{color:var(--neon-pale);font-style:normal}
.hero__tag{font-family:var(--lecture);color:#EFE4E9;letter-spacing:.004em;
  font-size:clamp(1rem,2vw,1.24rem);max-width:44ch;margin:1.4rem auto 2rem;
  text-shadow:0 2px 22px rgba(13,11,10,.8)}
.hero__ctas{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
/* parallaxe : deux éléments décoratifs, signes opposés, desktop seulement */
.hero__ph{position:absolute;z-index:2;pointer-events:none}
.hero__sakura{left:2%;top:11%;width:clamp(110px,15vw,210px);opacity:.5}
/* ══ LE SCEAU HANKO — l'ENTRÉE SIGNATURE, une seule fois dans la page ══
   L'étoile à 32 pointes est partie : c'était la forme de la référence, pas la
   leur. Au Japon le hanko est le sceau qui VALIDE un document, donc la forme
   dit déjà ce que le texte dit, au lieu d'être une étoile décorative.
   Deux anneaux concentriques, traités au tube de néon comme les boutons :
   coeur plein, filet blanc chaud, halo rose dedans et dehors. Aucune ombre
   nette décalée, qui était la signature de la référence.
   ⚠️ Leur logo est déjà un disque : le sceau est donc posé EN BAS À GAUCHE du
   héros, à l'opposé du logo de la barre, et il reste petit. Le contraste se
   mesure sur le coeur plein, jamais sur le halo : le néon n'est pas du
   contraste. #FFF6FD sur #A02E56 = 6,9:1. */
.hanko{position:absolute;z-index:4;left:4%;bottom:clamp(16px,5%,52px);
  width:clamp(92px,9.5vw,108px);aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  rotate:-3deg;   /* un timbre n'est jamais parfaitement droit */
  background:var(--neon-fonce);color:var(--tube);
  border:2.5px solid rgba(255,246,253,.94);
  box-shadow:0 0 0 3px rgba(202,57,107,.85), 0 0 22px 4px rgba(202,57,107,.5),
             inset 0 0 18px rgba(255,246,253,.16)}
/* le second anneau du sceau : le meme tube, en plus fin */
.hanko::before{content:'';position:absolute;inset:9px;border-radius:50%;
  border:1.5px solid rgba(255,246,253,.9);
  box-shadow:0 0 6px rgba(255,246,253,.4), inset 0 0 10px rgba(202,57,107,.4)}
.hanko span{position:relative;font-family:var(--sign);font-weight:700;
  font-size:clamp(.69rem,1vw,.74rem);letter-spacing:.09em;text-transform:uppercase;
  line-height:1.3}
/* ══ L'ÉLÉMENT À CHEVAL — il enjambe la couture héros / manifeste ══
   height:0 : le bloc ne prend AUCUNE place dans le flux, donc le héros et la
   section 2 se touchent et rien ne peint de bande entre les deux. Le
   translate -50% centre la photo sur la couture : exactement la moitié de sa
   hauteur déborde de chaque côté, à toutes les largeurs, sans une seule
   mesure en dur. Le format est déclaré (3/4) et l'image est en
   object-fit:cover : la photo se remplace en changeant le seul src. */
/* ⚠️ 08/09/2026 : l'objet est une paire de baguettes, donc il SORT du cadre.
   Sa coupe doit tomber sur le bord de l'ÉCRAN, pas sur celui de la colonne de
   texte : au milieu de la page elle se lit comme un moignon. Le conteneur prend
   donc toute la largeur et coupe ce qui dépasse (overflow-x:clip coupe la
   largeur SANS couper la hauteur, ce que overflow:hidden ferait). */
/* ⚠️ 08/09/2026 : l'objet est une silhouette COMPLÈTE (aucun bord touché,
   mesuré) et il est poussé au-delà du bord droit. Ce qui le coupe est donc
   l'écran, pas l'image : on ne voit jamais la tranche plate d'une baguette.
   overflow-x:clip coupe la largeur SANS couper la hauteur, ce que
   overflow:hidden ferait, et le débordement reste à 0. */
/* le conteneur prend toute la largeur et coupe ce qui sort : l'objet ENTRE
   par le bord droit de l'écran, et c'est la fenêtre qui le coupe, jamais
   l'image (le fichier est une silhouette complète, 0 bord touché). */
.cheval{position:relative;z-index:6;height:0;width:100%;margin-inline:auto;overflow-x:clip}
/* la révélation de cet élément-là est en opacité SEULE : le translateY de .up
   décalerait la photo de 18px et le chevauchement ne serait plus 50/50. */
.js .cheval.up{transform:none}
/* détouré, sans cadre : l'ombre et le halo suivent la silhouette du bol
   (drop-shadow), pas une boîte (box-shadow). */
.cheval__ph{position:absolute;top:0;margin:0;
  width:clamp(240px,30vw,430px);translate:0 -50%;rotate:0deg;right:-9vw;
  filter:drop-shadow(0 0 30px rgba(202,57,107,.5))
         drop-shadow(0 20px 30px rgba(13,11,10,.7))}
.cheval__ph img{width:100%;height:auto;display:block}
/* la boucle d'ambiance de la page : lente, faible amplitude, infinie */
.cheval__ph{animation:respire 7.4s ease-in-out infinite}
@keyframes respire{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}
/* la section qui reçoit la moitié basse se dégage sa hauteur, sinon la photo
   couvre le haut de la colonne de droite. */
.sec--cheval{padding-top:clamp(8.6rem,15.5vw,13.6rem)}

.js .pop{opacity:0;transform:scale(.4)}
.js .pop.is-in{animation:surgit .46s cubic-bezier(.2,1.5,.4,1) .5s forwards}
@keyframes surgit{to{opacity:1;transform:scale(1)}}

/* ══ RÈGLE 3 — LE BANDEAU INCLINÉ, hors flux ══ */
.band-clip{position:relative;z-index:5;height:0;overflow-x:clip;overflow-y:visible}
.band{position:absolute;left:-5%;width:110%;top:0;margin:0;
  background:var(--laque-3);color:var(--neon-clair);overflow:hidden;padding:.55rem 0;
  border-block:3px solid var(--neon);
  transform:translateY(-50%) rotate(-1.6deg) scaleX(1.06)}
.band__track{display:flex;width:max-content;animation:glisse 34s linear infinite}
.band span{white-space:nowrap;padding-inline:1.4rem;font-family:var(--sign);
  text-transform:uppercase;letter-spacing:.22em;font-weight:700;font-size:.76rem}
@keyframes glisse{to{transform:translateX(-50%)}}

/* ---------- 2 colonnes ---------- */
.split{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2rem,4.5vw,3.6rem);align-items:center}
.split--inv>*:first-child{order:2}
.fig{position:relative}
.fig img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;
  box-shadow:0 0 0 1px rgba(202,57,107,.5), 0 22px 44px rgba(13,11,10,.5)}
/* Sur fond riz cette ombre-la tombe SUR la legende et sur le sur-titre de la
   section suivante, et le fond mesure passait de 237,229,220 a 173,167,160 :
   la legende tombait a 2,8:1. Ombre de section claire, comme .pile img. */
.f-riz .fig img,.f-riz2 .fig img{box-shadow:0 0 0 1px rgba(160,46,86,.42), 0 16px 32px rgba(27,23,32,.16)}
.fig--large img{aspect-ratio:4/3}
.fig figcaption{font-family:var(--sign);font-size:.69rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--fumee);margin-top:.7rem;text-align:center}
.f-riz .fig figcaption,.f-riz2 .fig figcaption{color:var(--fumee-riz)}

/* ---------- LE MANIFESTE : le texte, la vidéo, rien d'autre ----------
   Gian, 19/08 : dans ce bloc, la vidéo SEULE. Les trois photos qui
   l'entouraient sont reparties dans les sections où elles disent quelque
   chose (voir audit.md, § « Où sont parties les photos de la pile »).
   Le vide noir sous la colonne de droite était le défaut que la vidéo
   fermait ; avec un seul élément le calcul de 1,175 n'a plus d'objet, donc
   on ne calcule plus : on STRETCH.
   La rangée de la grille prend la hauteur de la colonne de texte, la vidéo
   est en absolu — elle ne pèse donc rien dans le calcul de cette hauteur —
   et elle se cale sur top:0 / bottom:0. Sa hauteur EST celle du texte, à
   toutes les largeurs, sans une seule mesure en dur, et sa largeur en
   découle par le 9/16. Zéro vide en bas, par construction. */
/* Le titre C (« Tokyo, Osaka et Bangkok / sur le même mur, rue Duguesclin. »)
   est plus long que le A : dans une colonne a 1,04fr il tombait sur QUATRE
   lignes a 1024 et au-dela, en coupant meme la ligne des villes. La colonne de
   texte s'elargit donc, ce qui est possible depuis que la droite ne porte plus
   qu'un seul element vertical. Mesure a 1440 : 1,04fr = 584 px et 4 lignes ;
   1,34fr = 752 px et 3 lignes, la ligne des villes entiere. Au-dela (1,55fr)
   le titre passe bien a 2 lignes mais la colonne de droite tombe a 252 px et
   la video n'est plus au format : rapport mesure 0,488 au lieu de 0,5625.
   On garde donc le 9/16 exact et 3 lignes. */
.split--video{align-items:stretch;grid-template-columns:1.34fr .66fr}
.pile{position:relative;min-width:0}
.pile__video{position:absolute;top:0;bottom:0;left:50%;translate:-50% 0;
  width:auto;max-width:100%;aspect-ratio:9/16;
  border-radius:14px;overflow:hidden;background:var(--laque-3);
  /* ══ LE CADRE AU NÉON ══
     Le même tube que les boutons et que le sceau hanko, et que l'étiquette
     MAKI de leur carte : cœur blanc chaud (le filet de 2 px), halo rose
     dehors (les box-shadow diffuses) et halo rose dedans (le ::after).
     La « sottolineatura » n'est pas un objet en plus : c'est le bas du
     cadre, exactement comme sur leurs étiquettes, où le tube fait le tour.
     On le rend plus vif en bas, et c'est tout. */
  border:2px solid rgba(255,246,253,.94);
  box-shadow:0 0 0 3px rgba(202,57,107,.85),
             0 0 28px 5px rgba(202,57,107,.5),
             0 0 62px 18px rgba(202,57,107,.2),
             0 24px 48px rgba(13,11,10,.6)}
.pile__video::after{content:'';position:absolute;inset:0;z-index:2;
  pointer-events:none;border-radius:12px;
  box-shadow:inset 0 0 18px rgba(202,57,107,.55),
             inset 0 -14px 24px -12px rgba(255,246,253,.42),
             inset 0 -22px 34px -14px rgba(202,57,107,.75)}
.pile__video video{width:100%;height:100%;object-fit:cover;display:block;background:var(--laque-3)}
.cite{font-family:var(--disp);font-size:clamp(1.25rem,2.4vw,1.8rem);
  color:var(--neon-clair);line-height:1.45;margin:1.3rem 0}
.f-riz .cite,.f-riz2 .cite{color:var(--neon-fonce)}

/* ---------- le document : leur carte imprimee, posee entiere ----------
   Meme tube de neon que la video et que les etiquettes : filet blanc chaud,
   halo rose dehors et dedans. Le document n'est jamais recadre : le ratio
   declare est le sien (748/1020), et max-width le tient a une taille ou les
   neuf etiquettes et les neuf prix restent lisibles. */
.doc{margin:0;min-width:0}
.doc img{width:min(100%,342px);margin-inline:auto;aspect-ratio:748/1020;object-fit:contain;
  border-radius:14px;background:var(--laque-3);
  border:2px solid rgba(255,246,253,.94);
  box-shadow:0 0 0 3px rgba(202,57,107,.85),
             0 0 26px 5px rgba(202,57,107,.45),
             0 0 56px 16px rgba(202,57,107,.18),
             0 22px 44px rgba(13,11,10,.55)}

/* ---------- étiquette papier tournée ---------- */
.etiq{display:inline-block;background:var(--neon-clair);color:var(--laque);
  font-family:var(--etiq);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  font-size:.7rem;padding:.42rem .85rem;border-radius:7px;transform:rotate(-3deg);
  box-shadow:0 0 18px rgba(244,157,196,.45)}

/* ---------- pastilles de l'enseigne ---------- */
.enseigne-row{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.6rem}
.pastille{font-family:var(--sign);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;border:2px solid var(--neon-fonce);color:var(--sumi);
  padding:.42rem .9rem;border-radius:8px;background:rgba(160,46,86,.07);
  box-shadow:0 0 0 2px rgba(160,46,86,.2), inset 0 0 12px rgba(160,46,86,.09)}
.pastille small{display:block;font-family:var(--disp);font-size:.98rem;
  letter-spacing:.06em;text-transform:none;color:var(--neon-fonce);font-weight:400}
.pastille small.th{font-family:var(--th);letter-spacing:normal;line-height:1.7}

/* ══ LES ENTRÉES DE CARTE — relevées sur LEUR carte imprimée ══
   Leur carte n'a pas de cartes-objets : pas de boîte, pas de bandeau de
   couleur, pas de pied pointillé. Chaque entrée est posée à même le fond
   noir à ondes, et elle tient en quatre choses, dans cet ordre :
   l'étiquette au néon, le point rose, la pastille de prix inclinée, puis la
   liste des pièces en condensé avec la quantité en rose. La photo flotte à
   côté, sans cadre. On reprend ce montage tel quel. */
.entrees{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,3.4vw,3rem);
  margin-top:2.9rem;position:relative;border-radius:16px;
  padding:clamp(1.4rem,2.8vw,2.4rem);
  /* leur carte n'est pas imprimée sur le violet : le violet est la bande basse,
     les entrées sont sur un noir laqué parcouru d'ondes. On leur rend ce fond,
     et le texte rose y passe de 4,4:1 à plus de 9:1. */
  background:
    radial-gradient(120% 82% at 14% 0%, rgba(94,41,69,.55), transparent 62%),
    radial-gradient(100% 70% at 92% 100%, rgba(202,57,107,.20), transparent 64%),
    var(--laque-3);
  box-shadow:0 0 0 1px rgba(202,57,107,.35), 0 28px 60px rgba(13,11,10,.45)}
.entrees::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:16px;
  background-image:
    repeating-radial-gradient(ellipse 1250px 320px at 12% -12%, rgba(255,246,253,.07) 0 1.1px, transparent 1.1px 27px),
    repeating-radial-gradient(ellipse 1050px 270px at 88% 112%, rgba(255,246,253,.07) 0 1.1px, transparent 1.1px 33px)}
.entrees>*{position:relative;z-index:1}
.entree{display:flex;flex-direction:column;min-width:0}
.entree__tete{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-bottom:.55rem}
.entree__ecrit{font-family:var(--disp);font-size:1.15rem;color:var(--neon-clair);
  letter-spacing:.1em;margin-bottom:.9rem;text-shadow:0 0 14px rgba(202,57,107,.55)}
.entree__ecrit.th{font-family:var(--th);letter-spacing:normal;line-height:1.7;font-size:1.05rem}
.f-riz .entree__ecrit,.f-riz2 .entree__ecrit{color:var(--neon-fonce);text-shadow:none}
.entree__ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
  box-shadow:0 0 0 1px rgba(244,157,196,.42), 0 20px 40px rgba(13,11,10,.5);
  transition:transform .5s ease}
@media (hover:hover) and (pointer:fine){.entree:hover .entree__ph{transform:translateY(-4px)}}
.entree__liste{margin:1.2rem 0 0;display:grid;gap:.42rem}
.entree__liste li{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  font-family:var(--sign);text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;
  line-height:1.45;color:#F6E9F0}
.entree__liste b{font-weight:700;color:var(--neon-clair);white-space:nowrap;letter-spacing:.03em}
.entree__note{margin-top:1.1rem;font-size:.94rem;color:#EBD4E0}
/* ---------- duo d'affiches ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.6rem}
.affiche{position:relative;border-radius:14px;
  overflow:hidden;min-height:clamp(330px,40vw,440px);display:flex;align-items:flex-end;
  color:var(--tube);text-decoration:none;
  box-shadow:0 0 0 1px rgba(202,57,107,.55), 0 26px 52px rgba(13,11,10,.6)}
.affiche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
@media (hover:hover) and (pointer:fine){.affiche:hover img{transform:scale(1.05)}}
.affiche::after{content:'';position:absolute;inset:0;
  background:linear-gradient(184deg,rgba(13,11,10,0) 2%,rgba(13,11,10,.74) 30%,rgba(13,11,10,.99) 62%)}
.affiche>div{position:relative;z-index:2;padding:1.6rem;width:100%;
  /* second voile, local au bloc de texte : la photo du pad thaï est claire et
     le seul dégradé de la carte laissait le titre a 2,3:1 sous 400px. */
  background:linear-gradient(to top,rgba(13,11,10,.94) 0%,rgba(13,11,10,.86) 62%,rgba(13,11,10,0) 100%)}
.affiche h3{font-size:1.68rem;color:var(--tube);font-weight:400;letter-spacing:.038em;
  text-shadow:0 2px 18px rgba(13,11,10,.92)}
.affiche .ecrit{display:block;color:var(--neon-clair);font-size:1.05rem;margin-top:.2rem}
.affiche .ecrit.th{font-family:var(--th);line-height:1.7}
.affiche p{color:#EDE3E8;text-shadow:0 1px 12px rgba(13,11,10,.9);max-width:40ch;margin:.5rem 0 .9rem;font-size:.95rem}
.prix-tag{display:inline-block;background:var(--neon-clair);color:var(--laque);
  font-family:var(--etiq);font-weight:700;letter-spacing:.04em;font-size:.75rem;
  text-transform:uppercase;padding:.32rem .7rem;border-radius:7px;
  transform:rotate(-3deg);box-shadow:0 0 18px rgba(244,157,196,.5)}

/* ---------- bandeau photo pleine largeur ---------- */
.divider{position:relative;min-height:clamp(300px,34vw,420px);display:flex;
  align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--laque-3)}
.divider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.divider::after{content:'';position:absolute;inset:0;
  background:radial-gradient(72% 78% at 50% 50%, rgba(13,11,10,.5) 0%, rgba(13,11,10,.9) 100%)}
.divider__in{position:relative;z-index:2;padding:2.4rem 1rem;width:min(760px,92vw)}
.divider__k{font-family:var(--sign);letter-spacing:.32em;text-transform:uppercase;
  font-size:.7rem;color:var(--neon-clair);display:block;margin-bottom:.9rem;
  text-shadow:0 2px 14px rgba(13,11,10,.95)}
.divider__l{font-family:var(--disp);font-weight:400;color:var(--tube);letter-spacing:.032em;
  font-size:clamp(1.3rem,3.2vw,2.2rem);line-height:1.35;
  text-shadow:0 2px 24px rgba(13,11,10,.95)}

/* ---------- listes d'occasions ---------- */
.occas{margin:1.5rem 0 1.7rem;display:grid;gap:1rem}
.occas li{border-top:2px dashed rgba(27,23,32,.32);padding-top:.75rem}
.f-nuit .occas li,.f-prune .occas li{border-top-color:rgba(244,157,196,.34)}
.occas b{display:block;font-family:var(--sign);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;font-size:.74rem;color:var(--neon-fonce);margin-bottom:.15rem}
.f-nuit .occas b,.f-prune .occas b{color:var(--neon-clair)}
.occas span{font-size:.97rem;color:var(--fumee-riz)}
.f-nuit .occas span,.f-prune .occas span{color:var(--fumee)}

/* ---------- groupes et privatisation : le texte, le formulaire à côté ----------
   Une seule section : bloc de texte à gauche, formulaire à droite, dans un
   panneau cerné comme les étiquettes de leur carte, en version imprimée
   (contour rose foncé, sans halo, parce qu'un néon ne s'allume pas sur du riz). */
.dem{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,3.2rem);
  align-items:start}
.dem__form{border:2px solid var(--neon-fonce);border-radius:14px;
  background:rgba(255,255,255,.42);padding:clamp(1.3rem,2.6vw,2rem);
  box-shadow:0 0 0 2px rgba(160,46,86,.16), 0 18px 40px rgba(27,23,32,.12)}
.dem__form .lead a{color:var(--neon-fonce);border-bottom:1.5px dashed var(--neon-fonce);
  text-decoration:none;display:inline-block;padding-block:.72rem;margin-block:-.62rem}
.dem__sur{font-family:var(--sign);letter-spacing:.28em;text-transform:uppercase;
  font-size:.7rem;color:var(--neon-fonce);font-weight:700;display:block;margin-bottom:.7rem}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;margin-top:1.4rem}
.champ{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.champ--full{grid-column:1/-1}
.champ label{font-family:var(--sign);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sumi)}
.champ label em{font-style:normal;color:var(--fumee-riz);letter-spacing:.06em}
.champ input,.champ select,.champ textarea{font-family:var(--lecture);font-size:1rem;
  background:#FFFDFB;border:1.5px solid rgba(27,23,32,.42);
  border-radius:7px;padding:.68rem .8rem;color:var(--sumi);min-height:44px;width:100%}
.champ textarea{min-height:112px;resize:vertical}
.champ select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A02E56' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.2rem}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--neon-fonce)}
.form__envoi{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.4rem}
.form__ok{font-weight:600;color:var(--neon-fonce);display:none}
.form__ok.on{display:block}

/* ---------- grille de 3 (agenda) ---------- */
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:1.9rem;margin-top:2.8rem}
.tuile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
  box-shadow:0 0 0 1px rgba(202,57,107,.5), 0 20px 40px rgba(13,11,10,.5)}
.tuile h3{font-size:1.35rem;margin:.9rem 0 .3rem;color:var(--tube)}
.f-riz .tuile h3,.f-riz2 .tuile h3{color:var(--sumi)}
.tuile__k{font-family:var(--sign);font-size:.69rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--neon-clair);display:block}
.f-riz .tuile__k,.f-riz2 .tuile__k{color:var(--neon-fonce)}
.tuile p{font-size:.96rem;color:var(--fumee);margin:.4rem 0 .7rem}
.f-riz .tuile p,.f-riz2 .tuile p{color:var(--fumee-riz)}
.tuile__det{font-weight:600;color:var(--neon-clair);font-size:.9rem;display:block;margin-bottom:.6rem;letter-spacing:.01em}
.f-riz .tuile__det,.f-riz2 .tuile__det{color:var(--neon-fonce)}
.js .trois>*:nth-child(2).up{transition-delay:.09s}
.js .trois>*:nth-child(3).up{transition-delay:.18s}

/* ---------- ticker de prix ---------- */
.prix-tick{overflow:hidden;margin-top:2.4rem;border-block:2px solid var(--neon-clair);padding:.85rem 0}
.prix-tick__track{display:flex;width:max-content;animation:glisse 58s linear infinite}
.prix-tick span{white-space:nowrap;padding-inline:1.3rem;font-family:var(--sign);
  text-transform:uppercase;letter-spacing:.18em;font-size:.82rem;color:#F6E9F0}
.prix-tick span b{color:var(--neon-pale);font-weight:700}   /* 4,1:1 -> 5,9:1 */

/* ---------- bande photo, en tête du pied de page ----------
   Elle n'est plus une section : c'est le ruban qui ouvre le pied. D'où le
   dessin, qui change de rôle avec elle. Les vignettes ne flottent plus une
   par une (même hauteur, largeurs inégales, halo rose sur chacune) : elles
   forment UN ruban continu, cadre unique, cellules de format identique
   séparées par un filet de néon, et les deux bouts se fondent dans le noir
   du pied au lieu d'être coupés net. Les photos y sont posées en retrait,
   légèrement éteintes ; elles reprennent leur couleur au survol du ruban. */
.pied__bande{overflow:hidden;position:relative;
  padding:clamp(1.6rem,3vw,2.6rem) 0 clamp(1.8rem,3.4vw,3rem);
  margin-bottom:clamp(2rem,4vw,3.2rem);
  background:radial-gradient(130% 150% at 50% 0%,rgba(202,57,107,.17),transparent 64%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%)}
.bande__track{display:flex;width:max-content;animation:glisse 88s linear infinite;
  gap:clamp(16px,2vw,30px);padding-inline:clamp(8px,1vw,15px)}
/* chaque photo est une vitrine allumée : le MÊME tube que les étiquettes de
   leur carte, que le cadre de la vidéo et que les boutons. Rien de nouveau
   n'est inventé ici, le ruban rentre dans le système de la page. */
.vitr{position:relative;flex:0 0 auto;margin:0;border-radius:14px;overflow:hidden;
  border:2px solid rgba(255,246,253,.92);
  box-shadow:0 0 0 3px rgba(202,57,107,.8), 0 0 26px 4px rgba(202,57,107,.42),
             0 18px 38px rgba(13,11,10,.6)}
.vitr img{display:block;height:clamp(148px,18.5vw,248px);width:clamp(196px,24.5vw,328px);
  object-fit:cover;filter:saturate(.88) brightness(.84);transition:filter .4s ease}
@media (hover:hover) and (pointer:fine){.pied__bande:hover .vitr img,.pied__bande:focus-within .vitr img{filter:none}}
/* l'étiquette de leur carte, posée de travers comme sur le papier */
.vitr__k{position:absolute;left:.7rem;bottom:.7rem;rotate:-2.2deg;
  font-family:var(--etiq);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:.72rem;color:var(--tube);
  padding:.34rem .72rem;border-radius:7px;background:rgba(13,11,10,.86);
  border:1.5px solid rgba(255,246,253,.9);
  box-shadow:0 0 0 1.5px rgba(202,57,107,.8), 0 0 12px 2px rgba(202,57,107,.5)}

/* ---------- nous trouver ---------- */
/* trois colonnes depuis le 19/08 : la salle vue depuis l'entree ouvre la
   section, l'adresse et les horaires suivent. align-items:start, sinon les
   deux blocs de texte se centrent sur la hauteur de la photo. */
.visite{display:grid;grid-template-columns:.92fr 1fr 1fr;gap:clamp(2rem,4vw,3rem);
  margin-top:2.2rem;align-items:start}
.horaires{width:100%;border-collapse:collapse;margin-top:1rem}
.horaires td{padding:.55rem 0;border-bottom:1.5px dashed rgba(27,23,32,.3);font-size:.98rem}
.horaires td:last-child{text-align:right;font-family:var(--sign);font-size:.82rem;letter-spacing:.08em}
.horaires tr.today td{color:var(--neon-fonce);font-weight:600}
.contact{margin-top:1.3rem;display:flex;flex-direction:column;gap:.5rem;font-size:1.02rem}
.contact a{text-decoration:none;border-bottom:1.5px dashed var(--neon-fonce);
  display:inline-block;padding-block:.58rem;margin-block:-.42rem}
.bloc-info h4{font-family:var(--sign);letter-spacing:.3em;text-transform:uppercase;
  font-size:.7rem;color:var(--neon-fonce);margin:1.5rem 0 .5rem;font-weight:700}
.bloc-info h4:first-child{margin-top:0}

/* ══ RÈGLE 4 — LE MOMENT FINAL ══ */
/* la bande se donne la hauteur des objets : sinon les baguettes se font
   couper par le bord bas, et une baguette coupée là ne se lit pas comme
   « elle sort de l'écran », elle se lit comme un défaut. */
.final{position:relative;overflow:hidden;padding:clamp(8.5rem,17vw,13.5rem) 0;text-align:center}
.final__in{position:static;display:flex;align-items:center;justify-content:center;
  gap:clamp(.7rem,2.4vw,1.6rem)}
.final__rayons{position:absolute;top:50%;left:50%;width:min(100vw,760px);aspect-ratio:1;
  translate:-50% -50%;opacity:.3;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(var(--neon) 0 2.5deg, transparent 2.5deg 13deg)}
/* ⚠️ 08/09/2026 : les deux objets n'attendent plus au milieu, ils ENTRENT par
   les deux bords de l'écran. Ils sont donc posés en absolu sur les bords du
   bloc, poussés au-delà, et .final coupe déjà ce qui dépasse (overflow:hidden).
   Le mot garde la place au centre : la ligne de texte n'est plus poussée. */
.final__plat{position:absolute;top:50%;width:clamp(165px,30vw,430px);
  filter:drop-shadow(0 0 26px rgba(202,57,107,.45)) drop-shadow(6px 8px 0 rgba(202,57,107,.35))}
/* ⚠️ l'objet est une diagonale : ses BOUTS sont dans deux coins opposés. Avec
   un simple miroir, les bouts de gauche repartaient vers l'intérieur et on les
   voyait s'arrêter au milieu de la bande. Une rotation de 180° les renvoie vers
   le bord, et la poussée les met dehors : de chaque côté on ne voit plus que le
   rouleau et des baguettes qui sortent de l'écran. */
.final__plat--g{left:0;translate:-46% -44%;transform:rotate(180deg)}
.final__plat--d{right:0;translate:46% -50%;transform:rotate(0deg)}
@media(max-width:760px){
  .final__plat{width:clamp(150px,38vw,200px)}
  .final__plat--g{translate:-56% -46%}
  .final__plat--d{translate:56% -50%}
}
.final__mot{position:relative;font-family:var(--disp);font-weight:400;letter-spacing:.06em;
  font-size:clamp(1.7rem,6vw,3.6rem);color:var(--neon-clair);transform:rotate(-4deg);
  text-shadow:0 0 24px rgba(202,57,107,.7);padding:0 .3rem}
.final__sous{position:relative;margin-top:1.4rem;font-family:var(--sign);
  letter-spacing:.3em;text-transform:uppercase;font-size:.72rem;color:var(--fumee)}

/* ---------- pied de page ---------- */
footer{background:var(--laque-3);color:var(--fumee);padding:0 0 1.8rem;
  border-top:4px solid var(--neon)}
.pied{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.2rem}
.pied__logo{width:96px;height:auto;margin-bottom:.9rem}
.pied__nom{font-family:var(--disp);font-weight:400;font-size:1.5rem;color:var(--tube);letter-spacing:.115em}
.pied__jp{color:var(--neon-clair);font-size:1rem;margin-top:.25rem;font-family:var(--disp)}
footer h4{font-family:var(--sign);letter-spacing:.3em;text-transform:uppercase;
  font-size:.7rem;color:var(--neon-clair);margin-bottom:.85rem;font-weight:700}
footer a{color:var(--fumee);text-decoration:none;border-bottom:1px dashed transparent}
footer a:hover,footer a:focus-visible{color:var(--tube);border-color:var(--neon)}
footer li{margin:.38rem 0;font-size:.95rem}
/* cible tactile : 24px de ligne + 2x10,4px de remplissage = 44,8px. La marge
   négative rend l'espace pris, pour que le rythme du pied ne bouge pas. */
footer li a{display:inline-block;padding-block:.65rem;margin-block:-.34rem}
.pied__bas{margin-top:2.6rem;padding-top:1.1rem;border-top:1px solid rgba(167,158,166,.25);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.8rem}

/* barre d'action mobile */
.mob{display:none;position:fixed;left:0;right:0;bottom:0;z-index:1100;
  background:rgba(13,11,10,.97);border-top:3px solid var(--neon);padding:.6rem;gap:.6rem}
.mob .btn{flex:1;padding:.6rem .5rem;font-size:.76rem}

.saut{position:absolute;left:-999px;top:0;background:var(--neon-fonce);color:var(--tube);
  padding:.6rem 1rem;z-index:2000;font-family:var(--sign)}
.saut:focus{left:8px;top:8px}

/* ══ COUCHE 1 — RÉVÉLATION AU SCROLL ══ */
.js .up{opacity:0;transform:translateY(18px);transition:opacity .58s ease,transform .58s ease}
.js .up.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .nav__liens{position:fixed;inset:0;background:rgba(13,11,10,.985);flex-direction:column;
    justify-content:center;gap:1.3rem;display:none;z-index:1200;text-align:center;margin:0;padding:2rem}
  .nav__liens.open{display:flex}
  .nav__liens a{font-size:1.05rem;justify-content:center}
  .nav__fermer{display:block;position:absolute;top:16px;right:16px;font-size:1rem;
    background:rgba(202,57,107,.12);border:2px solid rgba(255,246,253,.92);border-radius:9px;
    padding:.45rem .9rem;font-family:var(--sign);cursor:pointer;color:var(--tube);min-height:44px;
    box-shadow:0 0 0 2px rgba(202,57,107,.75), inset 0 0 10px rgba(202,57,107,.4)}
  .burger{display:block}
}
@media(max-width:900px){
  .split,.visite,.dem{grid-template-columns:1fr;gap:2.2rem}
  .visite .fig img{max-width:420px;margin-inline:auto}
  .split--inv>*:first-child{order:0}
  .entrees,.trois{grid-template-columns:1fr 1fr}
  .duo{grid-template-columns:1fr}
  .pied{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  /* une colonne : la rangee ne porte plus de hauteur a heriter, la video
     revient dans le flux et c'est sa largeur qui commande. */
  .split--video{align-items:start}
  .pile__video{position:relative;top:auto;bottom:auto;left:auto;translate:none;
    width:min(100%,340px);height:auto;margin-inline:auto}
}
@media(max-width:680px){
  body{font-size:16px}
  .entrees,.trois{grid-template-columns:1fr}
  .pied{grid-template-columns:1fr}
  .hero{min-height:min(84svh,660px)}
  .hero__in{padding:7.6rem .9rem 7rem}
  .hero__sakura{width:96px;right:1%;top:6%;opacity:.4}
  .hanko{left:5%;bottom:14px;width:88px}
  .cheval__ph{width:clamp(200px,50vw,270px);right:-12vw}
  .hero__sakura{display:none}   /* décor pur : il chevauchait le sur-titre de 72x40 sous 680px */
  .pile__video{width:min(100%,252px)}
  .band span{font-size:.68rem;padding-inline:1rem}
  .mob{display:flex}
  footer{padding-bottom:5.4rem}
  .sec{padding:2.8rem 0}
  /* ⚠️ APRÈS .sec, et c'est tout l'objet de la ligne. `.sec{padding:2.8rem 0}`
     est un raccourci de même spécificité : écrit plus haut dans ce bloc, le
     padding-top de .sec--cheval était écrasé et retombait à 44,8 px. Mesuré au
     niveau des GLYPHES : la photo à cheval mordait le sur-titre de 110x18 px à
     320 et le h2 de 152x33 px à 600. La photo déborde de la moitié de sa
     hauteur, soit 88 px à 320 et 112 px à partir de 494 : cette valeur les
     couvre avec 14 à 32 px de marge. */
  .sec--cheval{padding-top:clamp(7.4rem,27vw,10rem)}
  /* ⚠️ même piège pour le moment de fin : sans cette ligne, `.sec{padding:2.8rem}`
     ci-dessus l'écrase et les baguettes se font couper par le bord bas. */
  .final{padding:clamp(6rem,22vw,9rem) 0}
}

/* ══ COUPE-CIRCUIT — DERNIÈRE RÈGLE DE LA FEUILLE ══
   Une ligne de rattrapage par élément caché en JS. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .up{opacity:1!important;transform:none!important}
  .js .pop{opacity:1!important;transform:none!important}
  .cheval__ph{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   PARTIES AJOUTÉES LE 08/09/2026 — le passage de la maquette au site.
   Rien de nouveau n'est inventé : chaque bloc reprend le tube au néon,
   l'étiquette inclinée et les jetons déjà posés dans la maquette.
   ══════════════════════════════════════════════════════════════════════ */

/* ── PIED : les ajouts du standard client (icônes, note Google, signature) ── */
.pied__liste{margin-top:1rem}
.pied__soc{display:flex;gap:.4rem;margin:.2rem 0 .9rem}
.pied__soc a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1.5px solid rgba(167,158,166,.42);border-radius:10px;
  color:var(--fumee);transition:color .2s var(--ease-out,ease),border-color .2s var(--ease-out,ease)}
.pied__soc a:hover,.pied__soc a:focus-visible{color:var(--tube);border-color:var(--neon)}
.pied__soc svg{width:21px;height:21px}
.pied__note{font-family:var(--disp);font-size:1.2rem;color:var(--tube);letter-spacing:.04em}
.pied__etoile{color:var(--neon-clair)}
.pied__bas a{color:var(--fumee)}
.pied__sign{display:inline-flex;align-items:center;gap:.42em;white-space:nowrap}
.pied__ds{display:inline-flex;align-items:center;opacity:.72;border:0;
  transition:opacity .2s ease}
.pied__ds:hover,.pied__ds:focus-visible{opacity:1;border:0}
.pied__ds img{height:1em;width:auto;display:block}

/* ── BANDEAU DE CONSENTEMENT ────────────────────────────────────────── */
#cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:2000;
  background:rgba(13,11,10,.97);border-top:2px solid var(--neon-fonce);
  box-shadow:0 -8px 30px rgba(0,0,0,.45)}
.cb-in{width:min(1180px,92vw);margin:0 auto;padding:1rem 0 1.1rem;
  display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cb-desc{font-size:.94rem;color:var(--corps);margin:0;max-width:64ch}
.cb-desc a{color:var(--neon-clair);border-bottom:1px dashed var(--neon-clair);text-decoration:none}
.cb-btns{display:flex;gap:.6rem}
.cb-btn{font-family:var(--sign);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  min-height:44px;padding:.7rem 1.35rem;border-radius:9px;cursor:pointer;
  background:transparent;color:var(--corps);border:2px solid rgba(222,213,206,.5)}
.cb-btn:hover,.cb-btn:focus-visible{color:var(--tube);border-color:var(--tube)}
.cb-btn--oui{background:var(--neon-fonce);color:var(--tube);border-color:rgba(255,246,253,.92);
  box-shadow:0 0 0 2px rgba(202,57,107,.55)}
.cb-btn--oui:hover,.cb-btn--oui:focus-visible{background:var(--neon)}

/* ── LA BANNIÈRE DES PAGES INTÉRIEURES ──────────────────────────────
   Elle libère elle-même la hauteur de la barre, qui est collante. ── */
/* ⚠️ 08/09/2026 : le titre était posé à même la photo, au milieu de l'assiette,
   sans rien sous lui. Trois corrections : la photo se cadre plus bas pour
   dégager le coin du texte, un voile DIRECTIONNEL descend du bas-gauche, et le
   titre passe au tube au néon comme l'enseigne de la maison. */
.pban{position:relative;overflow:hidden;background:var(--laque-3);
  border-bottom:2px solid rgba(202,57,107,.6)}
.pban__img{width:100%;height:clamp(300px,44vw,520px);object-fit:cover;display:block;
  object-position:center 62%;filter:brightness(.72) saturate(1.06)}
.pban::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg, rgba(13,11,10,.92) 0%, rgba(13,11,10,.74) 34%,
             rgba(13,11,10,.28) 62%, rgba(13,11,10,.55) 100%)}
.pban__in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 0 clamp(2rem,4.4vw,3.4rem)}
.pban__in .wrap{width:min(1180px,92vw)}
.pban h1{font-size:clamp(2.2rem,6vw,4.6rem);color:var(--tube);letter-spacing:.045em;
  line-height:1.02;
  text-shadow:0 0 2px rgba(255,255,255,.9), 0 0 14px rgba(255,246,253,.55),
              0 0 30px rgba(244,157,196,.6), 0 0 62px rgba(202,57,107,.55),
              0 2px 26px rgba(10,8,6,.75)}
.pban h1 .acc{color:var(--neon-pale)}
.pban h1::after{content:'';display:block;width:96px;height:3px;border-radius:2px;
  margin-top:1.1rem;background:var(--neon);
  box-shadow:0 0 12px rgba(202,57,107,.9), 0 0 26px rgba(202,57,107,.6)}
.pban .k{color:var(--neon-pale)}
.pban__sous{color:#EFE6EC;max-width:60ch;margin-top:.7rem;
  text-shadow:0 1px 12px rgba(10,8,6,.55)}

/* ── LA CARTE : les catégories, mêmes cartes-allumettes que l'accueil ── */
.carte-cats{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.4rem,2.6vw,2.2rem);margin-top:clamp(2rem,4vw,3rem)}
.carte-cats .entree{height:100%}
.entree__liste li em{font-style:normal;color:var(--fumee);font-size:.86rem;display:block}
.f-prune .entree__liste li em{color:#EBD4E0}
.f-riz .entree__liste li em,.f-riz2 .entree__liste li em{color:var(--fumee-riz)}
.carte-note{margin-top:clamp(2rem,4vw,3rem);font-size:.95rem}

/* ── RÉSERVER : le widget du prestataire, encadré comme un tube ────── */
.wdg-trio{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:.7rem}
.wdg-trio img{width:100%;height:clamp(200px,30vw,340px);object-fit:cover;display:block;border-radius:12px}
/* ⚠️ 08/09/2026 : le module d'Uniiti compose sur une colonne étroite. Dans un
   cadre pleine largeur il laissait deux grandes marges blanches sur les côtés.
   Le cadre se serre donc à la largeur du module, et il est centré. */
.wdg-cadre{border:2px solid var(--neon-fonce);border-radius:16px;overflow:hidden;
  background:var(--tube);box-shadow:0 0 0 2px rgba(202,57,107,.4), 0 22px 44px rgba(0,0,0,.28);
  width:min(720px,100%);margin-inline:auto}
/* ⚠️ mesuré le 08/09 en ouvrant l'URL du module : son contenu fait 583 px de
   haut, le reste était sa page vide qui remplissait la hauteur qu'on lui
   donnait. 660 laisse la place aux créneaux qui apparaissent après le jour. */
.wdg-cadre iframe{display:block;width:100%;height:660px;border:0}
.wdg-avis{border:2px solid var(--neon-fonce);border-radius:12px;padding:1rem 1.2rem;
  margin-bottom:1.4rem;font-size:.97rem}

/* ── CONTACT : deux colonnes, la carte à gauche, le formulaire à droite ── */
.ct{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,4vw,3.4rem);align-items:start}
.ct__bloc{margin-bottom:1.6rem}
.ct__bloc h3{font-family:var(--sign);letter-spacing:.28em;text-transform:uppercase;
  font-size:.78rem;color:var(--neon-fonce);margin-bottom:.4rem}
.ct__carte{width:100%;height:340px;border:0;border-radius:12px;display:block;
  border:2px solid rgba(160,46,86,.35)}

/* ── FAQ : un seul volet, ouvert au clavier, texte toujours dans le DOM ── */
.faq{margin-top:clamp(2.4rem,5vw,3.6rem)}
.faq__tout>summary{font-family:var(--sign);letter-spacing:.22em;text-transform:uppercase;
  font-size:.86rem;cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem;
  min-height:44px;padding:.75rem 0;color:var(--neon-fonce)}
.f-nuit .faq__tout>summary,.f-prune .faq__tout>summary{color:var(--neon-clair)}
.faq__tout>summary::-webkit-details-marker{display:none}
.faq__tout>summary::after{content:'';width:13px;height:13px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s ease}
.faq__tout[open]>summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq__q{border-top:1px solid rgba(160,46,86,.28)}
.f-nuit .faq__q{border-color:rgba(202,57,107,.3)}
.faq__q>summary{cursor:pointer;list-style:none;min-height:44px;padding:.95rem 2rem .95rem 0;
  position:relative;font-family:var(--lecture);font-size:1.02rem;font-weight:600}
.faq__q>summary::-webkit-details-marker{display:none}
.faq__q>summary::after{content:'+';position:absolute;right:.2rem;top:50%;translate:0 -50%;
  font-family:var(--sign);font-size:1.5rem;line-height:1;color:var(--neon-fonce)}
.f-nuit .faq__q>summary::after{color:var(--neon-clair)}
.faq__q[open]>summary::after{content:'–'}
.faq__a{padding:0 0 1.1rem;max-width:74ch;color:var(--fumee-riz)}
.f-nuit .faq__a{color:var(--fumee)}
.faq__a a{color:var(--neon-fonce);border-bottom:1px dashed currentColor;text-decoration:none}
.f-nuit .faq__a a{color:var(--neon-clair)}

/* ── L'ÉCRAN DE FIN DES FORMULAIRES ────────────────────────────────────
   Il REMPLACE le formulaire et son en-tête, il ne s'ajoute pas dessous,
   et il ne vit jamais dans le <form> : le cacher l'emporterait avec lui. ── */
.form-fin{display:none;text-align:center;padding:26px 4px 6px;margin:0}
.form-fin svg{width:42px;height:42px;stroke:var(--neon-fonce);fill:none;stroke-width:1.6;
  margin:0 auto 16px;display:block}
.f-nuit .form-fin svg,.f-prune .form-fin svg{stroke:var(--neon-clair)}
.form-fin b{display:block;font-family:var(--sign);text-transform:uppercase;letter-spacing:.2em;
  font-size:.9rem;color:var(--neon-fonce);margin:0 0 10px}
.f-nuit .form-fin b,.f-prune .form-fin b{color:var(--neon-clair)}

/* ── LES ESPACES / OCCASIONS DE LA PAGE GROUPES ─────────────────────── */
.occ-trois{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.4vw,2rem);
  margin-top:clamp(2rem,4vw,2.8rem)}
.occ{border:2px solid rgba(160,46,86,.4);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.34)}
.f-nuit .occ{background:rgba(255,246,253,.04);border-color:rgba(202,57,107,.45)}
.occ img{width:100%;height:190px;object-fit:cover;display:block}
.occ__txt{padding:1.1rem 1.2rem 1.3rem}
.occ__k{font-family:var(--sign);letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;
  color:var(--neon-fonce);display:block;margin-bottom:.4rem}
.f-nuit .occ__k{color:var(--neon-clair)}

@media(max-width:900px){
  .carte-cats,.ct,.occ-trois,.wdg-trio{grid-template-columns:1fr}
  .wdg-trio img{height:220px}
  .wdg-cadre iframe{height:720px}
}
@media(max-width:620px){
  .cb-in{padding:.9rem 0 1rem}
  .cb-btns{width:100%}
  .cb-btn{flex:1}
}

/* ── LE PIÈGE ANTI-ROBOT : hors écran, jamais display:none ─────────────
   Un champ caché en display:none est ignoré par certains robots ; hors
   écran il est rempli par eux et par personne d'autre. ── */
.piege{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── LA CARTE, SECTION PAR SECTION (08/09/2026) ───────────────────────
   Une catégorie = une bande : sa photo à gauche, son étiquette et sa liste
   sur deux colonnes à droite. C'est la forme d'une vraie carte, et elle
   remplace la grille de cartes, qui redisait trois fois le même dispositif. */
.mcats{display:grid;gap:clamp(2.4rem,4.6vw,3.8rem)}
.mcat{display:grid;grid-template-columns:minmax(200px,300px) 1fr;
  gap:clamp(1.4rem,3vw,2.6rem);align-items:start;
  padding-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(202,57,107,.34)}
.mcat:first-child{padding-top:0;border-top:0}
.mcat__ph{margin:0}
.mcat__ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
  border:2px solid rgba(255,246,253,.9);
  box-shadow:0 0 0 2px rgba(202,57,107,.7), 0 0 22px rgba(202,57,107,.35)}
.mcat__txt .entree__tete{margin-top:0}
.mcat__liste{list-style:none;margin:1.2rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.6rem,3vw,3rem)}
.mcat__liste li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.62rem 0;border-bottom:1px dashed rgba(222,213,206,.18)}
.mcat__liste li b{font-family:var(--sign);letter-spacing:.06em;color:var(--neon-clair);
  white-space:nowrap}
.mcat__liste li em{font-style:normal;display:block;color:var(--fumee);font-size:.86rem;
  margin-top:.15rem}
@media(max-width:900px){
  .mcat{grid-template-columns:1fr}
  .mcat__ph img{max-height:260px}
  .mcat__liste{grid-template-columns:1fr}
}

/* ── LE COLLAGE DES MENUS (08/09/2026) ────────────────────────────────
   Quatre menus qui se chevauchent, chacun dans le tube au néon déjà employé
   par les photos du site. Les rotations sont faibles et alternées : au delà
   de 4° ça lit comme une erreur, pas comme une pile. ── */
.coll{position:relative;aspect-ratio:1/1;width:min(100%,520px);margin-inline:auto}
.coll__i{position:absolute;width:62%;height:auto;border-radius:12px;
  border:2px solid rgba(255,246,253,.92);
  box-shadow:0 0 0 2px rgba(202,57,107,.75), 0 0 26px rgba(202,57,107,.4), 0 16px 30px rgba(0,0,0,.5)}
.coll__i--1{top:0;left:0;rotate:-3.4deg;z-index:1}
.coll__i--2{top:14%;right:0;rotate:2.8deg;z-index:2}
.coll__i--3{bottom:12%;left:5%;rotate:2.2deg;z-index:3}
.coll__i--4{bottom:0;right:4%;rotate:-2.6deg;z-index:4}
@media (hover:hover) and (pointer:fine){
  .coll__i{transition:transform .3s var(--ease-out,ease)}
  .coll:hover .coll__i{transform:translateY(-4px)}
}
@media(max-width:900px){ .coll{width:min(100%,420px)} }

/* ── L'ENSEIGNE « À EMPORTER » (08/09/2026) ───────────────────────────
   Le titre n'est pas un titre coloré : c'est un tube. Le blanc est le verre
   allumé, les halos roses sont la lumière qui déborde, et le fond reçoit une
   vignette pour qu'il y ait de la nuit autour du tube. ── */
.enseigne{overflow:hidden;padding-block:clamp(4.4rem,9vw,7.4rem) 0}
.enseigne::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 42%, rgba(0,0,0,0) 0%, rgba(20,8,16,.55) 100%)}
.enseigne__in{position:relative;z-index:2;text-align:center}
.enseigne__jp{font-family:var(--disp);letter-spacing:.34em;font-size:1.05rem;
  color:var(--neon-clair);margin:1.6rem 0 0}
/* le mur de mots : le mot répété, en CONTOUR seulement, qui passe derrière la
   photo. Le trait est le tube ; l'intérieur reste vide, sinon la bande devient
   un aplat et la photo n'a plus de fond sur quoi se détacher. */
.mots{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(.2rem,1vw,.9rem);pointer-events:none;z-index:1;overflow:hidden}
.mots__l{white-space:nowrap;font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(3.4rem,11vw,8.4rem);line-height:.92;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:2px rgba(244,157,196,.62);
  text-stroke:2px rgba(244,157,196,.62)}
.mots__l span{padding-right:.5em}
.mots__l:nth-child(2){transform:translateX(-9%)}
.mots__l:nth-child(3){transform:translateX(5%)}
.enseigne__ph{margin:0 auto;width:min(560px,86%)}
.enseigne__ph img{width:100%;height:auto;display:block;border-radius:14px;
  border:2px solid rgba(255,246,253,.92);
  box-shadow:0 0 0 2px rgba(202,57,107,.75), 0 0 34px rgba(202,57,107,.5), 0 22px 44px rgba(0,0,0,.55)}
.enseigne__sous{margin:1.5rem auto 0;max-width:56ch;color:#F1DDE8}
/* le bandeau des prix devient la ligne lumineuse de la devanture */
.prix-tick--neon{margin-top:clamp(3rem,6vw,4.6rem);
  border-block:2px solid rgba(255,246,253,.9);
  box-shadow:0 0 22px rgba(202,57,107,.55), inset 0 0 26px rgba(202,57,107,.4);
  background:rgba(20,8,16,.42)}
.prix-tick--neon .prix-tick__track{padding-block:.95rem}
.prix-tick--neon span{font-size:.98rem;letter-spacing:.14em}
.prix-tick--neon b{color:var(--tube);text-shadow:0 0 10px rgba(244,157,196,.9)}
@media(max-width:620px){ .prix-tick--neon span{font-size:.86rem} }

/* ── LE BANDEAU MUET ──────────────────────────────────────────────────
   Sans texte à faire lire, la photo n'a plus besoin d'être assombrie : elle
   passe en pleine lumière et le voile saute. Il ne reste qu'un filet au néon
   en haut et en bas, pour que la bande se lise comme une séparation voulue
   et pas comme une image tombée là. ── */
.divider--muet{min-height:clamp(260px,28vw,400px);
  border-block:2px solid rgba(202,57,107,.55)}
.divider--muet img{opacity:1}
.divider--muet::after{display:none}

/* ── LA BANNIÈRE MUETTE ───────────────────────────────────────────────
   Rien n'est écrit dessus, donc ni voile ni assombrissement : la photo passe
   en pleine lumière, et le titre vit dans la section d'en dessous. ── */
.pban--muet .pban__img{filter:none;height:clamp(260px,38vw,460px)}
.pban--muet::after{display:none}

/* ── LE FORMULAIRE SUR FOND SOMBRE ────────────────────────────────────
   Le standard veut que le formulaire de groupe casse avec ce qui précède et
   vive sur le ton le plus sombre. Le bloc reprend donc les couleurs de la
   nuit : filet au néon, champs en verre, libellés clairs. ── */
.dem__form--nuit{background:rgba(255,246,253,.045);border-color:var(--neon)}
.dem__form--nuit .lead{color:var(--fumee)}
.dem__form--nuit .lead a{color:var(--neon-clair);border-bottom-color:var(--neon-clair)}
.dem__form--nuit .dem__sur,.f-nuit .dem__sur{color:var(--neon-clair)}
.dem__form--nuit .champ label{color:var(--corps)}
.dem__form--nuit .champ label em{color:var(--fumee)}
/* ⚠️ background-COLOR et pas la sous-forme `background:` : la forme courte
   remet repeat et position à zéro, et le chevron du select se met à carreler. */
.dem__form--nuit .champ input,.dem__form--nuit .champ select,.dem__form--nuit .champ textarea{
  background-color:rgba(13,11,10,.55);border-color:rgba(255,246,253,.34);color:var(--corps)}
.dem__form--nuit .champ input:focus,.dem__form--nuit .champ select:focus,
.dem__form--nuit .champ textarea:focus{border-color:var(--neon-clair)}
.dem__form--nuit .champ select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F49DC4' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center}

/* ── LA SECTION DU FORMULAIRE DE GROUPE ───────────────────────────────
   Une seule colonne : l'en-tête au centre, puis les champs sur une largeur
   de lecture. Le standard ne prévoit ni photo à côté ni deuxième colonne. ── */
.enq{width:min(860px,100%);margin-inline:auto}
.enq__tete{margin-bottom:clamp(2rem,4vw,3rem)}
.enq__joindre{margin-top:1.2rem;font-family:var(--sign);letter-spacing:.14em;
  text-transform:uppercase;font-size:.86rem;display:flex;flex-wrap:wrap;gap:.9rem;
  justify-content:center;align-items:center}
.enq__joindre a{color:var(--neon-clair);text-decoration:none;
  border-bottom:1px dashed rgba(244,157,196,.6);padding-block:.55rem}
.enq__joindre a:hover,.enq__joindre a:focus-visible{color:var(--tube);border-color:var(--tube)}
.enq__joindre span{color:var(--fumee)}
.enq__form{border:2px solid var(--neon);border-radius:16px;
  padding:clamp(1.4rem,3vw,2.4rem);background:rgba(255,246,253,.045);
  box-shadow:0 0 0 2px rgba(202,57,107,.35), 0 0 30px rgba(202,57,107,.25)}
.enq__form .champ label{color:var(--corps)}
.enq__form .champ label em{color:var(--fumee)}
.enq__form .champ input,.enq__form .champ select,.enq__form .champ textarea{
  background-color:rgba(13,11,10,.55);border-color:rgba(255,246,253,.34);color:var(--corps)}
.enq__form .champ input:focus,.enq__form .champ select:focus,.enq__form .champ textarea:focus{
  border-color:var(--neon-clair)}
.enq__form .champ select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F49DC4' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center}
.enq .faq{margin-top:clamp(2.4rem,5vw,3.6rem)}