/* =========================================================================
   Piano Piano — feuille de style unique.
   Palette et typographie : team/design-spec.md §3 et §4.
   Pas de framework, pas d'étape de compilation, pas de JavaScript.
   ========================================================================= */

/* --- Polices auto-hébergées, licence SIL OFL (voir /assets/fonts/LICENSE-*).
   Deux fichiers, servis depuis notre domaine : aucune requête vers Google,
   rien qui suive le visiteur. font-display:swap = le texte s'affiche tout de
   suite avec la police de secours, puis bascule. Jamais de texte invisible. */
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;font-stretch:96% 100%;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/instrument-serif.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Fond */
  --bg:#0D0F1C; --surface:#14172A; --surface-raised:#1D2138;
  /* Traits */
  --border:#2A2F4A; --border-input:#6169A0;
  /* Texte */
  --text:#F3EFE7; --text-secondary:#C2C6D6; --text-muted:#8E94AC;
  /* La lumière */
  --accent:#E5B45C; --accent-hover:#F0C878; --accent-ink:#1A1204;
  --accent-glow:rgba(229,180,92,.14); --night-glow:rgba(107,95,200,.16);
  /* Signaux */
  --focus:#86ECFB; --ok:#6FD3A8; --danger:#F2857F;

  --sans:'Archivo','Inter','Helvetica Neue',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --r:10px; --r-lg:16px; --r-xl:24px;
  --wrap:1200px; --w-text:64ch;
  --pad:clamp(1.25rem,5vw,2.5rem);
  --gap:clamp(2.5rem,7vw,5rem);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* la seule variable qui change d'une section à l'autre */
  --glow:transparent;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;font-weight:380;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}

/* --- Titres --------------------------------------------------------------
   Archivo est variable en largeur : une ligne française trop longue se
   resserre au lieu de casser la mise en page.                              */
h1,h2,h3{margin:0 0 .5em;font-weight:800;line-height:1.05;letter-spacing:-.022em;
  font-stretch:96%;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.6rem + 4.2vw,4.6rem)}
h2{font-size:clamp(1.85rem,1.35rem + 2.4vw,3rem)}
h3{font-size:clamp(1.15rem,1.05rem + .6vw,1.45rem);font-weight:700}
p{margin:0 0 1em;max-width:var(--w-text)}

.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .9em}
/* La ligne du grand visuel n'est plus une étiquette mais une phrase (Ricardo,
   29/08). Les grandes capitales très espacées d'une étiquette écrasent une
   phrase : on garde la couleur et la place, on rend l'écriture normale. */
.hero-tag{font-size:clamp(.9rem,.85rem + .3vw,1.05rem);font-weight:500;
  letter-spacing:.02em;text-transform:none}
.callout{font-family:var(--serif);font-weight:400;color:var(--accent);
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem);line-height:1.3;letter-spacing:.005em}
.muted{color:var(--text-muted)}
.facts em{font-style:normal;font-size:.85em}

/* --- Structure ----------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:70ch}
.sec{position:relative;padding-block:var(--gap);isolation:isolate}
.sec-mini{padding-block:clamp(4rem,14vw,9rem);min-height:52svh;display:grid;align-items:center}

/* La lumière : une seule couche, pilotée par une variable. Pas de second
   thème, pas d'image, pas de JS. §2 de la spec.                            */
[data-glow]::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 0%,var(--glow) 0%,transparent 68%);
}
[data-glow="dusk"]{--glow:var(--accent-glow)}
[data-glow="night"]{--glow:var(--night-glow)}
[data-glow="none"]{--glow:transparent}

.two-col{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:820px){.two-col{grid-template-columns:1.05fr .95fr}}

/* --- Photos : ratios verrouillés. Un mauvais upload ne casse rien. ------- */
.ph{width:100%;height:auto;object-fit:cover;border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface)}
.ph-32{aspect-ratio:3/2}
.ph-45{aspect-ratio:4/5}
@media (min-width:820px){.ph-45{aspect-ratio:4/5;max-height:34rem;justify-self:end}}

/* Variante sans photo : le cercle de l'ambigramme. Finie, pas cassée. */
.ph-none{display:grid;place-items:center;position:relative;background:var(--surface)}
.ph-none svg{position:absolute;inset:0;width:100%;height:100%;padding:12%}
.ph-none circle{fill:none;stroke:var(--border-input);stroke-width:.6}
.ph-none span{position:relative;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted)}

/* --- En-tête -------------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);
  color:var(--accent-ink);padding:.7rem 1.1rem;border-radius:0 0 var(--r) 0;font-weight:600}
.skip:focus{left:0}

.hdr{position:sticky;top:0;z-index:50;background:rgba(13,15,28,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.hdr-in{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:64px;padding-block:.6rem}
.hdr-logo{display:inline-flex;align-items:center;min-height:44px}
.hdr-logo img{width:clamp(96px,22vw,130px);height:auto}

.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.6rem)}
.nav a{text-decoration:none;font-size:.94rem;font-weight:500;color:var(--text-secondary);
  transition:color .18s var(--ease)}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--accent)}
/* le bouton dans la nav garde SON texte : .nav a est plus spécifique que
   .btn-fill, sans cette ligne on obtient du gris clair sur ambre. */
.nav a.btn-fill,.nav a.btn-fill:hover{color:var(--accent-ink)}
.nav-lang{font-size:.8rem!important;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted)!important;border-left:1px solid var(--border);padding-left:1rem}
.nav-lang:hover{color:var(--text)!important}

/* Menu mobile : une case à cocher, zéro JavaScript.
   Elle est invisible mais POSÉE SUR le bouton, jamais `hidden` : une case
   cachée sort de la page, ne prend plus le focus, et le menu ne s'ouvre alors
   qu'à la souris. Sur un téléphone au clavier — ou au lecteur d'écran — toute
   la navigation devenait inatteignable. */
.burger{display:none}
.nav-t{display:none}
@media (max-width:860px){
  .nav-t{display:block;position:absolute;top:50%;right:var(--pad);
    transform:translateY(-50%);width:48px;height:48px;margin:0;
    opacity:0;z-index:60;cursor:pointer}
  .nav-t:focus-visible ~ .burger{outline:2px solid var(--focus);outline-offset:3px}
  .burger{display:grid;place-content:center;gap:5px;width:48px;height:48px;cursor:pointer;
    border:1px solid var(--border);border-radius:var(--r);margin-left:auto}
  .burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;
    transition:transform .22s var(--ease),opacity .18s}
  .nav{position:fixed;inset:64px 0 auto;flex-direction:column;align-items:flex-start;
    gap:.35rem;padding:1.5rem var(--pad) 2.25rem;background:var(--surface-raised);
    border-bottom:1px solid var(--border);
    transform:translateY(-120%);transition:transform .3s var(--ease);visibility:hidden}
  .nav a{font-size:1.45rem;font-weight:600;padding:.55rem 0;width:100%}
  .nav-lang{border:0;padding-left:0;margin-top:.5rem}
  .nav-cta{margin-top:1rem}
  .nav-t:checked ~ .nav{transform:none;visibility:visible}
  .nav-t:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-t:checked ~ .burger span:nth-child(2){opacity:0}
  .nav-t:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* --- Boutons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.75rem 1.5rem;border-radius:999px;
  font-size:.95rem;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn-fill{background:var(--accent);color:var(--accent-ink)}
.btn-fill:hover{background:var(--accent-hover)}
.btn-line{border:1px solid var(--border-input);color:var(--text)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}

.lnk{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  color:var(--accent);text-decoration:none;font-weight:600;font-size:.95rem}
.lnk span{transition:transform .2s var(--ease)}
.lnk:hover span{transform:translateX(4px)}

/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;
  padding-block:clamp(4rem,12vw,7rem);overflow:hidden;--glow:rgba(229,180,92,.22)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 40%;z-index:-2}
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(13,15,28,.94) 0%,rgba(13,15,28,.62) 45%,transparent 82%)}
.hero-in{position:relative}
.hero-logo{width:clamp(180px,40vw,320px);height:auto;margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.hero h1{max-width:16ch}
.hero .callout{max-width:30ch;margin-bottom:1.8em}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;max-width:none}

/* --- Cartes des espaces ---------------------------------------------------- */
.cards{display:grid;gap:clamp(1.25rem,3vw,2rem);margin-top:clamp(1.5rem,4vw,2.5rem)}
@media (min-width:640px){.cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.card{display:flex;flex-direction:column;gap:.15rem}
.card .ph{margin-bottom:1.1rem;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.card:hover .ph{border-color:rgba(229,180,92,.4);box-shadow:0 0 32px rgba(229,180,92,.12)}
.card p{margin-bottom:.4em}
.card-hours{font-size:.86rem;color:var(--text-secondary);margin-bottom:.6em}
/* Le deuxième étage est encore en travaux : la ligne se voit, elle ne se lit
   pas comme un horaire ordinaire. */
.card-soon{color:var(--accent);font-weight:600}
.card .lnk{margin-top:auto;align-self:flex-start}

/* --- Bande réservation ------------------------------------------------------ */
.band{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:clamp(2rem,6vw,4rem);text-align:center;display:grid;justify-items:center}
.band .band-note{max-width:52ch;margin-bottom:1.8em}

/* --- Liste de faits ---------------------------------------------------------- */
.facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.5rem;margin:0 0 1.5rem;
  padding:1.1rem 0;border-block:1px solid var(--border)}
.facts dt{color:var(--text-muted);font-size:.86rem;letter-spacing:.04em}
.facts dd{margin:0;font-weight:500}
.facts a{color:var(--accent);text-decoration:none}

/* --- Pied de page --------------------------------------------------------- */
.ftr{border-top:1px solid var(--border);padding-top:var(--gap);margin-top:var(--gap);
  position:relative;isolation:isolate}
.ftr-in{display:grid;gap:2.5rem}
@media (min-width:700px){.ftr-in{grid-template-columns:1.4fr 1fr}}
.ftr-brand img{width:150px;height:auto;margin-bottom:1.25rem;opacity:.9}
.ftr-brand a{color:var(--accent);text-decoration:none}
.ftr-social{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.ftr-social a{color:var(--text-secondary);text-decoration:none;font-size:.92rem;
  min-height:44px;display:inline-flex;align-items:center}
.ftr-social a:hover{color:var(--accent)}
.ftr-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;
  padding-block:1.75rem;margin-top:2.5rem;border-top:1px solid var(--border);font-size:.86rem}
.ftr-legal p{margin:0}
.ftr-legal a{text-decoration:none}
.ftr-legal a:hover{color:var(--text)}

/* --- Cibles tactiles : tout lien cliquable fait au moins 44px de haut ------
   Un lien texte dans un paragraphe reste inline, mais les liens isolés
   (téléphone, langue, mentions) doivent être atteignables au pouce.        */
.skip,.nav-lang,.facts a,.ftr-brand a,.ftr-legal a{
  display:inline-flex;align-items:center;min-height:44px}

/* --- Respect du réglage système « réduire les animations » ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* --- La carte -------------------------------------------------------------
   Une carte est une liste, pas une grille de boîtes : un filet entre les
   lignes suffit. Pas de photo de plat — les nôtres sont sombres et inégales,
   et le personnel ne doit pas avoir à photographier un plat pour le publier.
   -------------------------------------------------------------------------- */
.chips{display:flex;gap:.5rem;overflow-x:auto;overscroll-behavior-x:contain;
  padding-bottom:.5rem;margin-bottom:clamp(2rem,5vw,3rem)}
.chips a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
  padding-inline:1.1rem;border:1px solid var(--border-input);border-radius:999px;
  font-size:.9rem;font-weight:600;color:var(--text-secondary);text-decoration:none;
  white-space:nowrap;transition:color .2s var(--ease),border-color .2s var(--ease)}
.chips a:hover{color:var(--accent);border-color:var(--accent)}

/* Sur grand écran la ligne est bornée : au-delà, l'œil ne relie plus le
   nom du plat à son prix parti à 1 100 px de là.                        */
.cat{max-width:52rem;margin-bottom:clamp(2.5rem,6vw,4rem);scroll-margin-top:5rem}
.cat h2{margin-bottom:.5em;padding-bottom:.35em;border-bottom:1px solid var(--border)}

.menu li{padding-block:1rem;border-bottom:1px solid var(--border)}
.menu li:last-child{border-bottom:0}
.menu .row{display:flex;align-items:baseline;gap:1.25rem}
/* min-width:0 est obligatoire : sans lui, un nom de plat long refuse de passer
   à la ligne et pousse le prix hors de l'écran à 360 px.                     */
.menu .n{flex:1;min-width:0;font-weight:600}
.menu .p{flex:0 0 auto;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums}
.menu p{margin:.3rem 0 0;max-width:58ch;font-size:.92rem;color:var(--text-secondary)}

/* État vide : le cercle de l'ambigramme, grand et discret. Fini, pas cassé. */
.vide{position:relative;display:grid;justify-items:center;text-align:center}
.vide .cercle{position:absolute;top:50%;left:50%;z-index:-1;
  transform:translate(-50%,-50%);width:min(78vw,25rem);height:auto}
.vide .cercle circle{fill:none;stroke:var(--border);stroke-width:.3}
.vide p{max-width:46ch}
.vide .cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;max-width:none}

/* --- Le formulaire de réservation ------------------------------------------
   Trois blocs, un seul envoi. Pas d'assistant en plusieurs écrans : il n'y a
   rien à vérifier entre deux étapes (aucun calcul de disponibilité), et un
   formulaire en plusieurs pages est plus souvent abandonné sur téléphone.
   Tous les champs font 52 px de haut et 16 px de texte : en dessous de 16 px,
   Safari sur iPhone zoome la page dès qu'on touche un champ.
   --------------------------------------------------------------------------- */
.lead{font-size:1.08rem;color:var(--text-secondary);margin-bottom:2rem}

.resa fieldset{border:0;margin:0;padding:0;min-width:0}
.resa legend{padding:0;margin-bottom:1.25rem;font-size:.75rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

.lab{display:block;max-width:none;margin:0 0 .4rem;font-size:.95rem;font-weight:600}
.lab-sm{font-weight:500;font-size:.88rem;color:var(--text-secondary)}
.opt{font-weight:400;font-size:.85em;color:var(--text-muted)}
.aide{max-width:46ch;margin:-.15rem 0 .8rem;font-size:.85rem;color:var(--text-muted)}
.fld{max-width:none;margin:0 0 1.25rem}
.pair{display:grid;gap:.9rem;margin-bottom:1.25rem}
@media (min-width:420px){.pair{grid-template-columns:1fr 1fr}}
.pair .fld{margin-bottom:0}

.resa input[type=text],.resa input[type=tel],.resa input[type=email],
.resa input[type=date],.resa input[type=time],.resa input[type=number],.resa textarea{
  width:100%;min-height:52px;padding:.7rem .9rem;
  font-family:inherit;font-size:1rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border-input);border-radius:var(--r);
  appearance:none;transition:border-color .18s var(--ease)}
.resa textarea{min-height:7rem;line-height:1.55;resize:vertical}
.resa input:hover,.resa textarea:hover{border-color:var(--text-muted)}
.resa [aria-invalid]{border-color:var(--danger)}
/* L'icône du sélecteur de date est noire par défaut : invisible sur fond sombre. */
.resa ::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.65;cursor:pointer}

/* --- Date et Heure : notre texte par-dessus le champ natif ------------------
   Un champ date ou heure natif écrit son format dans la langue du NAVIGATEUR,
   jamais dans celle de la page : « mm/dd/yyyy » pouvait donc s'afficher sur le
   site français. On garde le champ — c'est lui qui ouvre le calendrier du
   téléphone — et on écrit par-dessus, dans la langue du site.

   TOUT ceci dépend de la classe dh-on, posée par le script sur le formulaire.
   Sans JavaScript, rien ne s'applique et le champ natif s'affiche normalement :
   on ne rend jamais un champ illisible faute de script. */
.dh{position:relative;display:block}
.dh-face{display:none}
.dh-on .dh-face{display:flex;position:absolute;inset:0;align-items:center;
  padding:0 calc(.9rem + 1px);font-size:1rem;color:var(--text);
  white-space:nowrap;overflow:hidden;pointer-events:none}
.dh-on .dh-face.vide{color:var(--text-muted)}
.dh-on input[type=date],.dh-on input[type=time]{color:transparent}
/* Pendant la saisie on rend la main au champ natif : on ne cache jamais ce que
   la personne est en train de taper. */
.dh-on input[type=date]:focus,.dh-on input[type=time]:focus{color:var(--text)}
.dh-on input:focus + .dh-face{display:none}

/* Compteur − / + : les deux boutons font 52 px, atteignables au pouce. */
.step{display:flex;gap:.5rem}
.step input[type=number]{flex:1;min-width:0;text-align:center;-moz-appearance:textfield}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step-b{flex:0 0 52px;min-height:52px;font-size:1.3rem;line-height:1;cursor:pointer;
  color:var(--text);background:var(--surface);
  border:1px solid var(--border-input);border-radius:var(--r)}
.step-b:hover{border-color:var(--accent);color:var(--accent)}

/* Choix de l'espace : de vraies cases à cocher natives, rendues invisibles et
   habillées par le libellé. Zéro JavaScript, et le clavier fonctionne seul. */
.picks{display:grid;gap:.75rem;margin-bottom:1.5rem}
@media (min-width:620px){.picks{grid-template-columns:repeat(3,1fr)}}
.pick{position:relative;display:block;cursor:pointer}
.pick input{position:absolute;width:1px;height:1px;opacity:0}
.pick-in{display:block;padding:.85rem;background:var(--surface);
  border:1px solid var(--border-input);border-radius:var(--r-lg);
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.pick:hover .pick-in{border-color:var(--accent)}
.pick input:focus-visible + .pick-in{outline:2px solid var(--focus);outline-offset:3px}
/* Jamais la couleur seule : la coche porte l'information autant que le cadre. */
.pick input:checked + .pick-in{border-color:var(--accent);border-width:2px;
  padding:calc(.85rem - 1px);background:var(--surface-raised)}
.pick input:checked + .pick-in::after{content:'✓';position:absolute;top:.75rem;right:.9rem;
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font-size:.8rem;font-weight:700}
/* Plus de photo dans ces cartes (Ricardo, 29/08). La réserve à droite du titre
   est là pour que la coche ✓ ne vienne jamais se poser sur le mot. */
.pick-n{display:block;padding-right:2rem;font-weight:600}
.pick-d{display:block;margin-top:.15rem;font-size:.85rem;color:var(--text-secondary)}
.pick-soon{display:block;margin-top:.4rem;font-size:.8rem;font-weight:600;color:var(--accent)}

/* Deux boutons collés : boire / manger, email / WhatsApp. */
.seg{display:flex;gap:.5rem;margin-bottom:1.5rem}
.seg label{position:relative;flex:1}
.seg input{position:absolute;width:1px;height:1px;opacity:0}
.seg span{display:flex;align-items:center;justify-content:center;min-height:52px;
  font-size:.95rem;font-weight:600;cursor:pointer;background:var(--surface);
  border:1px solid var(--border-input);border-radius:999px;
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.seg input:checked + span{border-color:var(--accent);border-width:2px;
  color:var(--accent);background:var(--surface-raised)}
.seg input:focus-visible + span{outline:2px solid var(--focus);outline-offset:3px}

/* Consentement : jamais pré-coché (loi 18-07). Toute la ligne est cliquable. */
.consent{max-width:none;margin:1.75rem 0 1.25rem}
.consent label{display:flex;gap:.8rem;align-items:flex-start;min-height:48px;cursor:pointer}
.consent input{flex:0 0 24px;width:24px;height:24px;margin-top:.2rem;accent-color:var(--accent)}
.consent span{font-size:.9rem;line-height:1.5;color:var(--text-secondary)}
.consent a{color:var(--accent)}

/* Séparateur point-symétrique : la trame du logo, réduite à l'os. */
.div{position:relative;overflow:visible;height:1px;border:0;
  margin:2.5rem 0;background:var(--border)}
.div::before,.div::after{content:'';position:absolute;top:50%;width:7px;height:7px;
  margin-top:-4px;border:1px solid var(--border);border-radius:50%}
.div::before{left:0}
.div::after{right:0}

.note{max-width:52ch;margin:.15rem 0 1rem;font-size:.88rem;color:var(--text-secondary)}
.note.ok{color:var(--ok)}
.note.ko{color:var(--danger)}
.err{max-width:52ch;margin:.35rem 0 1rem;font-size:.88rem;font-weight:500;color:var(--danger)}
.err::before{content:'⚠ '}
.err-sum{margin-bottom:2rem;padding:1rem 1.15rem;background:var(--surface);
  border:1px solid var(--danger);border-radius:var(--r)}
.err-sum p{max-width:none;margin:0 0 .5rem}
.err-sum ul{padding-left:1.2rem;list-style:disc;font-size:.92rem;color:var(--text-secondary)}
.err-sum li{margin:.25rem 0}
.err-sum a{color:var(--danger)}

.recap{max-width:none;margin:0 0 .9rem;font-size:.92rem;font-weight:600;
  color:var(--accent);font-variant-numeric:tabular-nums}
.btn-big{width:100%;min-height:56px;font-size:1rem}

/* Le champ piège. Hors de l'écran, jamais display:none — c'est la première
   chose qu'un robot vérifie avant de décider de remplir un champ. */
.pot{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

/* Page de remerciement ------------------------------------------------------ */
.ref-lab{margin:.5rem 0 .1rem;font-size:.85rem;color:var(--text-muted)}
.ref{margin:0 0 1rem;font-size:clamp(2rem,8vw,3rem);font-weight:800;color:var(--accent);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.merci-recap{max-width:40ch;margin-bottom:.6rem;font-weight:600}

/* --- Les horaires ----------------------------------------------------------
   Une liste de lignes dès le premier jour, alors qu'il n'y en a que deux : le
   jour où la terrasse et les étages auront des horaires différents, il n'y aura
   aucune mise en page à refaire. Le point ambre au début de chaque ligne, c'est
   le cercle du logo réduit à sa plus simple expression.
   -------------------------------------------------------------------------- */
.hrs{max-width:30rem;margin:0 0 .8rem}
.hrs li{display:flex;align-items:baseline;gap:.7rem;padding-block:.5rem}
.hrs li::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--accent);transform:translateY(-.15em)}
.hrs-l{flex:0 0 auto;font-weight:600}
.hrs-f{flex:1 1 auto;min-width:1.5rem;border-bottom:1px dotted var(--border);
  transform:translateY(-.3em)}
.hrs-r{flex:0 0 auto;color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.ftr .hrs{margin-block:1rem .5rem}
.ftr .hrs li{padding-block:.3rem}

/* --- Nous trouver ----------------------------------------------------------- */
.find-h{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);margin-bottom:.7em}
.find-addr{font-size:1.08rem;font-weight:500}
.find-tel a{display:inline-flex;align-items:center;min-height:56px;
  font-size:clamp(1.5rem,1.2rem + 1.6vw,2.1rem);font-weight:800;color:var(--accent);
  text-decoration:none;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.find-soc{display:flex;flex-wrap:wrap;gap:.6rem}
.find-soc a{display:inline-flex;align-items:center;min-height:48px;padding-inline:1.1rem;
  border:1px solid var(--border-input);border-radius:999px;font-size:.92rem;font-weight:600;
  color:var(--text-secondary);text-decoration:none;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.find-soc a:hover{color:var(--accent);border-color:var(--accent)}

/* --- Pages légales : sobres, une colonne, aucune décoration ----------------- */
.legal h2{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);margin:2.2em 0 .6em}
.legal p{color:var(--text-secondary)}
.legal-l{margin:0 0 1em;padding-left:1.1rem;list-style:disc;color:var(--text-secondary)}
.legal-l li{margin-bottom:.4em;max-width:var(--w-text)}
.legal-tel{margin-top:2.5rem}


/* --- De midi jusqu'à tard --------------------------------------------------
   Quatre moments, chacun avec sa propre lumière : la page passe du jour à
   l'indigo en descendant. C'est le mécanisme data-glow de la spec §2 —
   une variable et un dégradé, pas une image de plus.
   -------------------------------------------------------------------------- */
.soiree{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start;
  margin-top:clamp(2rem,5vw,3rem)}
@media (min-width:820px){.soiree{grid-template-columns:1fr 1fr}}
.mom{position:relative;isolation:isolate;margin:0}
.mom .ph{width:100%;height:auto;aspect-ratio:auto;margin-bottom:1.1rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.mom:hover .ph{border-color:rgba(229,180,92,.4);box-shadow:0 0 36px rgba(229,180,92,.1)}
.mom figcaption{max-width:38ch}
.mom h3{margin-bottom:.35em}
.mom p{margin-bottom:0}
.mom-h{margin:0 0 .35em;font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}

/* --- Nous trouver : la photo à côté de l'adresse --------------------------- */
.find-loc{display:grid;gap:clamp(1.25rem,4vw,2.5rem);align-items:start;margin-bottom:1rem}
@media (min-width:700px){.find-loc{grid-template-columns:.85fr 1fr}}
.find-loc .ph{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.find-loc p{margin-bottom:.9rem}