/* =========================================================
   Via Di Roma — feuille de style unique

   Organisation en couches (@layer) : une regle de "components" ne peut plus
   etre battue par un selecteur de "base" plus specifique, ce qui supprime le
   besoin de !important. Ordre de priorite croissante :

     reset        remises a zero
     tokens       variables de couleur, de type, d'espace, de mouvement
     base         elements HTML nus
     layout       contenants, grilles de page
     components   boutons, etiquettes, cartes, formulaire...
     sections     hero, carte, infos, pied de page
     motion       animations et reactions au scroll
     utilities    classes d'appoint (sr-only, etc.)

   Les requetes @media de responsive vivent au plus pres de leur section.
   ========================================================= */

@layer reset, tokens, base, layout, components, sections, motion, utilities;

/* ---------- Polices auto-hebergees ----------
   Recuperees depuis Google Fonts (sous-ensembles latin + latin-ext seulement) puis
   servies depuis ce domaine : aucune requete tierce, aucune adresse IP de visiteur
   transmise a Google (exigence CNIL), et une CSP qui n'a plus a autoriser
   fonts.googleapis.com / fonts.gstatic.com.

   Les axes variables sont reduits a ce que cette feuille demande vraiment, ce qui
   ramene le chemin critique francais de 191 Ko a 111 Ko :
     - Fraunces droit    : opsz + wght conserves variables (titres de 17 px a 90 px).
     - Fraunces italique : fige a opsz=100 / wght=400, son unique usage (ligne du hero).
     - Inter             : wght limite a 400..600, les seules graisses declarees.
   Procedure de regeneration : voir README.md. ---------- */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  /* Marges verticales reprises explicitement par la typographie plus bas. */
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

  ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

  img, picture, svg, iframe { display: block; max-width: 100%; }
  img, svg { height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }

  button { background: none; border: 0; }
}

@layer tokens {
  :root {
    /* ---- Couleurs ---- */
    --ink: #0e0d0c;
    --ink-2: #151312;
    --ink-3: #1d1a18;
    --ink-4: #100e0d;
    --cream: #f5efe6;

    /* Textes secondaires exprimes en opacite sur --cream.
       --muted-2 valait 0.38, soit 3,25:1 sur --ink : sous le minimum WCAG AA
       de 4,5:1 pour du texte normal. Porte a 0.58 (~5,6:1), ce qui concerne
       les etiquettes, les legendes, le pied de page et les lignes de boisson. */
    --muted: rgba(245, 239, 230, 0.68);
    --muted-2: rgba(245, 239, 230, 0.58);
    --soft: rgba(245, 239, 230, 0.82);

    --wine: #8e2846;
    --wine-lit: #a63255;
    --wine-dark: #5f1a2e;
    --terra: #d4714f;        /* etait #c75b39 : 4,61:1, trop juste pour une erreur */
    --gold: #d4a24c;
    --gold-soft: rgba(212, 162, 76, 0.16);
    --green: #6fcc8f;

    --line: rgba(212, 162, 76, 0.24);
    --line-soft: rgba(245, 239, 230, 0.14);
    --line-strong: rgba(245, 239, 230, 0.26);

    /* ---- Typographie ---- */
    --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.85rem;
    --fs-base: 1rem;
    --fs-lead: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
    --fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
    --fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
    --fs-h1: clamp(2.5rem, 1.4rem + 5.2vw, 5.4rem);

    /* ---- Espace et mesure ---- */
    --wrap: 1240px;
    --pad: clamp(1.25rem, 4vw, 3rem);
    --nav-h: 72px;
    --gap: clamp(0.9rem, 1.6vw, 1.1rem);
    --section-y: clamp(4rem, 10vh, 8rem);

    /* Hauteur de la barre d'action mobile, reprise par le padding du body
       pour que le pied de page ne passe jamais dessous. */
    --mobile-bar-h: 0px;

    /* ---- Mouvement ----
       Un seul jeu de variables pilote toutes les animations. En mode
       "mouvement reduit", on met --motion a 0 : les deplacements s'annulent
       mais les fondus et les changements de couleur restent, au lieu de tout
       raser avec des !important comme avant. */
    --motion: 1;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 180ms;
    --t-mid: 320ms;
    --t-slow: 640ms;
    --t-reveal: 760ms;
    --stagger: 70ms;
    --marquee-duration: 36s;

    /* Amplitudes : multipliees par --motion, donc nulles si le visiteur
       demande moins de mouvement. */
    --lift: calc(-3px * var(--motion));
    --rise: calc(26px * var(--motion));
    --zoom: calc(1 + 0.06 * var(--motion));

    color-scheme: dark;
    accent-color: var(--gold);
  }

  /* Le site est sombre par nature (ambiance du lieu) ; on l'assume plutot que
     de simuler un theme clair incomplet. La preference de contraste eleve,
     elle, est respectee. */
  @media (prefers-contrast: more) {
    :root {
      --muted: rgba(245, 239, 230, 0.88);
      --muted-2: rgba(245, 239, 230, 0.82);
      --soft: var(--cream);
      --line-soft: rgba(245, 239, 230, 0.4);
      --line: rgba(212, 162, 76, 0.55);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --motion: 0;
      --t-reveal: 220ms;
      --stagger: 0ms;
    }
  }
}
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
    -webkit-text-size-adjust: 100%;
    /* Reserve la gouttiere de barre de defilement : le verrouillage du scroll
       a l'ouverture du tiroir ne decale plus la page d'un demi-centimetre. */
    scrollbar-gutter: stable;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    background: var(--ink);
    color: var(--cream);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding-bottom: var(--mobile-bar-h);
    /* La typographie francaise attend ces ligatures sans les fausses petites
       capitales que Fraunces propose par defaut sur certains chiffres. */
    font-variant-numeric: proportional-nums;
  }

  /* Grain : le voile plein ecran etait en position fixed avec
     mix-blend-mode: overlay, ce qui forcait le navigateur a recomposer tout
     le viewport a chaque image pendant le defilement. Il est desormais
     compose sans fusion de calque, et retire sur mobile ou il coutait le plus
     cher pour un effet invisible. */
  @media (min-width: 900px) {
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 9;
      pointer-events: none;
      opacity: 0.16;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    }
  }

  a { color: inherit; text-decoration: none; }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  address { font-style: normal; color: var(--cream); font-size: 0.95rem; line-height: 1.7; }

  table { border-collapse: collapse; }

  /* Contour de focus toujours visible, y compris sur fond dore : le double
     trait garantit le contraste quelle que soit la couleur dessous. */
  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
  }
  .btn:focus-visible,
  .chip:focus-visible {
    outline-color: var(--cream);
    outline-offset: 4px;
  }

  ::selection { background: var(--gold); color: var(--ink); }

  /* Mode contrastes forces (Windows) : on laisse le systeme imposer ses
     couleurs, mais on garde les bordures qui structurent la page. */
  @media (forced-colors: active) {
    .btn, .tab, .chip, .tag, .dish, .best, .pillar, .drink {
      border: 1px solid CanvasText;
    }
    .status__dot { forced-color-adjust: none; }
    body::after { display: none; }
  }
}

@layer layout {
  .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--pad);
  }

  .section {
    padding-block: var(--section-y);
    position: relative;
  }

  /* Pas de content-visibility: auto sur les sections.
     Essaye puis retire : sur cette page (environ 1 900 noeuds), le gain mesure
     est dans le bruit — mediane sur cinq chargements en 390x844 : recalcul de
     style 16,7 ms contre 20,3 ms, mise en page 31,0 ms contre 28,9 ms, soit
     un solde nul. En face, le cout est reel : dans un sous-arbre non rendu,
     getComputedStyle renvoie les valeurs par defaut du navigateur (texte noir,
     fond blanc). axe-core et Lighthouse y lisaient onze violations de
     contraste "serious" totalement fausses, sur le formulaire et la FAQ.
     Une optimisation qui ne gagne rien mais fausse la mesure d'une autre
     qualite ne vaut pas d'etre gardee. */

  .section--carte { background: var(--ink-2); border-block: 1px solid var(--line-soft); }
  .section--infos { background: var(--ink-2); border-top: 1px solid var(--line-soft); }
  .section--faq { border-top: 1px solid var(--line-soft); }

  .section__head {
    max-width: 58ch;
    margin-bottom: clamp(2.25rem, 5vw, 4rem);
  }
  .section__title { font-size: var(--fs-h2); margin-bottom: 0.9rem; }
  .section__lead { color: var(--muted); font-size: var(--fs-lead); }

  .eyebrow {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    font-weight: 500;
  }
}
@layer components {
  /* ---------- Boutons ---------- */
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--cream);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* 44 px de haut minimum : taille de cible tactile recommandee. */
    min-height: 44px;
    padding: 0.8rem 1.6rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid currentColor;
    font: 500 0.9rem/1 var(--font-sans);
    letter-spacing: 0.04em;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
      transform var(--t-mid) var(--ease),
      background-color var(--t-mid),
      border-color var(--t-mid),
      color var(--t-mid),
      box-shadow var(--t-mid);
  }

  /* Balayage dore au survol : un degrade qui traverse le bouton, compose sur
     le GPU (translate seul), donc sans cout de mise en page. */
  .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 20%, rgba(245, 239, 230, 0.16) 50%, transparent 80%);
    translate: -110% 0;
    transition: translate var(--t-slow) var(--ease-out);
  }
  .btn:hover::after,
  .btn:focus-visible::after { translate: 110% 0; }

  .btn:hover { transform: translateY(var(--lift)); }
  .btn:active { transform: translateY(0) scale(calc(1 - 0.012 * var(--motion))); }

  .btn--primary {
    --btn-bg: var(--wine);
    border-color: var(--wine);
    box-shadow: 0 10px 30px -14px rgba(142, 40, 70, 0.9);
  }
  .btn--primary:hover {
    --btn-bg: var(--wine-lit);
    border-color: var(--wine-lit);
    box-shadow: 0 16px 38px -16px rgba(166, 50, 85, 0.95);
  }

  .btn--ghost { border-color: var(--line-strong); }
  .btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

  .btn--lg { padding: 1.05rem 2rem; font-size: 0.95rem; min-height: 52px; }
  .btn--sm { padding: 0.55rem 1.1rem; font-size: 0.8rem; }

  /* ---------- Etiquettes ---------- */
  .chip {
    display: inline-block;
    align-self: flex-start;
    padding: 0.3rem 0.7rem;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--gold);
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 0.6rem;
  }

  .tag {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--line-soft);
    color: var(--muted-2);
    white-space: nowrap;
  }
  .tag--best { border-color: var(--line); color: var(--gold); }
  .tag--veg { border-color: rgba(111, 204, 143, 0.45); color: var(--green); }

  /* Etoile dessinee, et non le caractere U+2605 : aucune des polices du site
     ne le contient, il tombait donc dans une police systeme au rendu
     imprevisible (parfois en emoji colore sur Android). */
  .star {
    display: inline-block;
    width: 0.78em;
    height: 0.78em;
    background: currentColor;
    color: var(--gold);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }

  /* ---------- En-tete ---------- */
  .nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: background-color var(--t-mid), border-color var(--t-mid), backdrop-filter var(--t-mid);
  }
  .nav.is-scrolled,
  .nav--solid {
    background: rgba(14, 13, 12, 0.88);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--line-soft);
  }
  .nav__inner {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--pad);
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  /* Barre de progression de lecture, pilotee par le defilement du document.
     Rien en JavaScript : animation-timeline fait le travail sur le
     compositeur. Les navigateurs sans support n'affichent simplement rien. */
  .nav__progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--wine), var(--gold));
    scale: 0 1;
  }
  @supports (animation-timeline: scroll()) {
    .nav__progress {
      animation: progress linear;
      animation-timeline: scroll(root block);
    }
    @keyframes progress { to { scale: 1 1; } }
  }

  .brand { display: flex; align-items: center; gap: 0.7rem; margin-right: auto; }
  .brand__mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 1.1rem;
    flex: none;
    transition: background-color var(--t-mid), color var(--t-mid);
  }
  .brand:hover .brand__mark { background: var(--gold-soft); }
  .brand__text {
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    line-height: 1.15;
    /* Sans cela, "Via Di Roma" se coupe en deux lignes sous 400 px et
       deseqilibre tout l'en-tete. */
    white-space: nowrap;
  }
  .brand__text em {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-2);
  }

  .nav__links { display: flex; gap: 1.6rem; }
  .nav__links a {
    font-size: var(--fs-sm);
    color: var(--muted);
    position: relative;
    padding-block: 0.35rem;
    transition: color var(--t-fast);
  }
  .nav__links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--gold);
    scale: 0 1;
    transform-origin: left;
    transition: scale var(--t-mid) var(--ease);
  }
  .nav__links a:hover,
  .nav__links a[aria-current] { color: var(--cream); }
  .nav__links a:hover::after,
  .nav__links a[aria-current]::after { scale: 1 1; }

  .nav__actions { display: flex; align-items: center; gap: 0.9rem; }

  /* ---------- Pastille d'etat ---------- */
  .status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--fs-xs);
    color: var(--muted);
    white-space: nowrap;
    transition: color var(--t-mid);
  }
  .status[data-state='open'] { color: var(--soft); }
  .status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted-2);
    flex: none;
    transition: background-color var(--t-mid);
  }
  .status[data-state='open'] .status__dot {
    background: var(--green);
    animation: pulse 2.6s ease-out infinite;
  }
  .status[data-state='closed'] .status__dot { background: var(--terra); }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(111, 204, 143, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(111, 204, 143, 0); }
    100% { box-shadow: 0 0 0 0 rgba(111, 204, 143, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .status[data-state='open'] .status__dot { animation: none; }
  }

  /* ---------- Bouton et tiroir mobile ---------- */
  .burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-soft);
    cursor: pointer;
    padding: 0;
    place-items: center;
    place-content: center;
    gap: 5px;
  }
  .burger__bar {
    display: block;
    width: 17px;
    height: 1px;
    background: var(--cream);
    transition: transform var(--t-mid) var(--ease), opacity var(--t-mid);
  }
  .burger[aria-expanded='true'] .burger__bar:first-child { transform: translateY(3px) rotate(45deg); }
  .burger[aria-expanded='true'] .burger__bar:last-child { transform: translateY(-3px) rotate(-45deg); }

  .drawer {
    position: fixed;
    inset: var(--nav-h) 0 0;
    z-index: 19;
    background: rgba(14, 13, 12, 0.98);
    backdrop-filter: blur(18px);
    padding: 2.25rem var(--pad) calc(2.5rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    /* Le contenu du tiroir etait rogne en paysage sur telephone : il defile
       maintenant, sans entrainer la page derriere lui. */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .drawer[hidden] { display: none; }
  .drawer__nav { display: flex; flex-direction: column; }
  .drawer__nav a {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line-soft);
    transition: color var(--t-fast), padding-left var(--t-mid) var(--ease);
  }
  .drawer__nav a:hover { color: var(--gold); padding-left: calc(0.5rem * var(--motion)); }
  .drawer__cta { display: grid; gap: 0.75rem; }
  .drawer__cta .status { justify-content: center; padding-bottom: 0.25rem; }

  /* ---------- Onglets de la carte ---------- */
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2.25rem;
  }
  .tab {
    min-height: 44px;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--line-soft);
    color: var(--muted);
    font: 500 var(--fs-sm) / 1 var(--font-sans);
    letter-spacing: 0.03em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
  }
  .tab:hover { color: var(--cream); border-color: var(--line); }
  .tab[aria-selected='true'] {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cream);
  }
  .tab__count {
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.55;
  }

  /* ---------- Formulaire ---------- */
  .form { display: grid; gap: 1.15rem; }
  .field { display: grid; gap: 0.35rem; }
  .field label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .form input,
  .form textarea {
    font: 400 0.95rem/1.5 var(--font-sans);
    color: var(--cream);
    /* appearance: none coupe le widget natif. Sans lui, le navigateur garde
       une couleur de fond interne : le rendu reste correct, mais la valeur
       calculee est blanche, et tout outil d'audit y lit un contraste de
       1,14:1 sur du texte creme. La forme longue leve la derniere ambiguite. */
    appearance: none;
    background: transparent;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 0.55rem 0;
    min-height: 44px;
    transition: border-color var(--t-fast), background-color var(--t-fast);
    resize: vertical;
  }
  .form textarea { min-height: 96px; }
  .form input:hover,
  .form textarea:hover { border-bottom-color: var(--line-strong); }
  .form input:focus,
  .form textarea:focus {
    outline: none;
    border-bottom-color: var(--gold);
    background: linear-gradient(to top, var(--gold-soft), transparent 55%);
  }
  .form input[aria-invalid='true'],
  .form textarea[aria-invalid='true'] { border-bottom-color: var(--terra); }

  /* Message d'erreur par champ, relie en aria-describedby : un lecteur
     d'ecran annonce la raison, au lieu d'un vague "verifiez les champs". */
  .field__err {
    font-size: 0.78rem;
    color: var(--terra);
    min-height: 0;
  }
  .field__err:empty { display: none; }

  .form button[type='submit'] { justify-self: start; }
  .form button[disabled] { opacity: 0.6; cursor: progress; }

  .form__msg { font-size: var(--fs-sm); min-height: 1.3em; }
  .form__msg[data-state='ok'] { color: var(--green); }
  .form__msg[data-state='err'] { color: var(--terra); }

  .form__legal { font-size: 0.75rem; color: var(--muted-2); line-height: 1.55; }
  .form__legal a { color: var(--muted); border-bottom: 1px solid var(--line-soft); }
  .form__legal a:hover { color: var(--gold); }

  /* Champ piege a robots : hors ecran mais jamais display:none, sinon les
     robots les plus simples le detectent. */
  .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}
@layer sections {
  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    /* 100vh en premier comme repli : les navigateurs qui ignorent svh gardent
       une hauteur correcte, les autres evitent le saut de la barre d'URL. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding: calc(var(--nav-h) + 3rem) 0 clamp(3rem, 8vh, 6rem);
    overflow: clip;
  }
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hero__bg img,
  .hero__bg picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
  }
  .hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(to top, var(--ink) 3%, rgba(14, 13, 12, 0.84) 36%, rgba(14, 13, 12, 0.34) 72%, rgba(14, 13, 12, 0.62) 100%),
      radial-gradient(90% 70% at 15% 90%, rgba(95, 26, 46, 0.5), transparent 70%);
  }
  .hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--pad);
  }
  .hero__title {
    font-size: var(--fs-h1);
    max-width: 16ch;
    margin-bottom: 1.3rem;
  }
  .hero__title span {
    color: var(--gold);
    font-style: italic;
    font-weight: 400;
  }
  .hero__lead {
    max-width: 48ch;
    font-size: var(--fs-lead);
    color: var(--soft);
    margin-bottom: 2rem;
  }
  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 2.5rem;
  }

  .hero__trust {
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-soft);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 900px;
  }
  .hero__trust li {
    font-size: 0.8rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  .hero__trust strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--cream);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* Indicateur de defilement : le trait faisait 1 px de large, donc une cible
     impossible a viser. Le lien occupe maintenant 44x60, le trait reste fin. */
  .hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 0.5rem;
    z-index: 2;
    translate: -50% 0;
    width: 44px;
    height: 60px;
    display: grid;
    place-items: center;
  }
  .hero__scroll-line {
    width: 1px;
    height: 46px;
    background: linear-gradient(var(--gold), transparent);
    opacity: 0.65;
    transform-origin: top;
    animation: scroll-hint 2.8s var(--ease) infinite;
  }
  @keyframes scroll-hint {
    0%, 100% { scale: 1 1; opacity: 0.65; }
    50% { scale: 1 calc(1 + 0.25 * var(--motion)); opacity: 1; }
  }

  /* Parallaxe pilotee par le defilement, sans un seul ecouteur JavaScript.
     L'ancienne version recalculait un transform a chaque image dans un
     requestAnimationFrame ; ici le compositeur s'en charge seul. Le repli
     JavaScript ne s'active que si le navigateur ne connait pas view(). */
  @supports (animation-timeline: view()) {
    .hero__bg img {
      animation: hero-parallax linear;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes hero-parallax {
      from { scale: calc(1 + 0.08 * var(--motion)); translate: 0 calc(-2% * var(--motion)); }
      to { scale: calc(1 + 0.08 * var(--motion)); translate: 0 calc(8% * var(--motion)); }
    }
  }

  /* ---------- Bandeau d'offres ---------- */
  .marquee {
    position: relative;
    background: var(--wine);
    border-block: 1px solid rgba(0, 0, 0, 0.25);
    padding: 0.85rem 3.2rem 0.85rem 0;
    display: flex;
    align-items: center;
  }
  .marquee__viewport { overflow: hidden; flex: 1; }
  .marquee__track {
    display: flex;
    width: max-content;
    animation: slide var(--marquee-duration) linear infinite;
  }
  .marquee__group {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-right: 2rem;
  }
  .marquee__item {
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
  }
  /* Losange trace en CSS plutot que le caractere U+2726, absent des polices. */
  .marquee__sep {
    width: 7px;
    height: 7px;
    flex: none;
    background: var(--gold);
    rotate: 45deg;
  }
  @keyframes slide { to { transform: translateX(-50%); } }

  /* WCAG 2.2.2 : tout mouvement automatique de plus de cinq secondes doit
     pouvoir etre arrete. Le bandeau se mettait en boucle sans aucun moyen de
     l'interrompre. Il se fige maintenant au survol, au focus clavier, et par
     un bouton explicite dont l'etat est memorise. */
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track,
  .marquee[data-paused='true'] .marquee__track {
    animation-play-state: paused;
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
    .marquee { padding-right: 0; justify-content: center; }
    .marquee__viewport { overflow-x: auto; }
    .marquee__toggle { display: none; }
  }

  .marquee__toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    translate: 0 -50%;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(245, 239, 230, 0.3);
    cursor: pointer;
    transition: border-color var(--t-fast), background-color var(--t-fast);
  }
  .marquee__toggle:hover { border-color: var(--cream); background: rgba(0, 0, 0, 0.2); }
  /* Deux barres = pause ; un triangle = reprendre. */
  .marquee__toggle-icon {
    width: 10px;
    height: 11px;
    background: var(--cream);
    clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
  }
  .marquee__toggle[aria-pressed='true'] .marquee__toggle-icon {
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  /* ---------- Incontournables ---------- */
  .best-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
  }
  .best {
    position: relative;
    overflow: hidden;
    background: var(--ink-3);
    border: 1px solid var(--line-soft);
    isolation: isolate;
    /* Un ratio remplace les grid-auto-rows figees a 260/230/250 px, qui
       ecrasaient les cartes des que la police grossissait. */
    aspect-ratio: 4 / 3;
  }
  .best--tall { grid-row: span 2; aspect-ratio: 4 / 6.2; }
  .best__link {
    position: absolute;
    inset: 0;
    display: block;
  }
  .best__img,
  .best picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .best__img {
    object-fit: cover;
    filter: saturate(1.05) contrast(1.02);
    transition: scale var(--t-slow) var(--ease), filter var(--t-mid);
  }
  .best::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 9, 8, 0.95) 6%, rgba(10, 9, 8, 0.52) 44%, rgba(10, 9, 8, 0.04) 80%);
    transition: opacity var(--t-mid);
    pointer-events: none;
  }
  .best__body {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.4rem;
    pointer-events: none;
  }
  .best__body h3 {
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
    transition: translate var(--t-mid) var(--ease);
  }
  .best--tall .best__body h3 { font-size: 2rem; }
  .best__body p {
    font-size: 0.88rem;
    color: var(--soft);
    max-width: 34ch;
    transition: color var(--t-mid), translate var(--t-mid) var(--ease);
  }
  .best:hover .best__img,
  .best:focus-within .best__img { scale: var(--zoom); }
  .best:hover .best__body h3,
  .best:focus-within .best__body h3,
  .best:hover .best__body p,
  .best:focus-within .best__body p { translate: 0 calc(-3px * var(--motion)); }
  .best:hover .best__body p,
  .best:focus-within .best__body p { color: var(--cream); }

  .best-cta {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem;
    border: 1px solid var(--line);
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(142, 40, 70, 0.5), transparent 62%),
      linear-gradient(150deg, var(--ink-3), var(--ink-4));
  }
  .best-cta .eyebrow { margin-bottom: 0.5rem; }
  .best-cta h3 { font-size: var(--fs-h3); }
  .best-cta .btn { align-self: flex-start; }

  /* ---------- Carte ---------- */
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap);
    /* Chaque panneau est un conteneur de requete : les vignettes decident de
       leur mise en page selon leur propre largeur, et non selon celle de
       l'ecran. Une carte etroite passe en ligne meme sur grand ecran. */
    container-type: inline-size;
    container-name: menu;
  }
  .menu-grid[hidden] { display: none; }
  .menu-fallback { grid-column: 1 / -1; color: var(--muted); }
  .menu-fallback a { color: var(--gold); text-decoration: underline; }

  .dish {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ink-3);
    border: 1px solid var(--line-soft);
    overflow: hidden;
    transition: border-color var(--t-mid), transform var(--t-mid) var(--ease);
  }
  .dish:hover {
    border-color: var(--line);
    transform: translateY(var(--lift));
  }

  .dish__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ink-2);
    flex: none;
  }
  .dish__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--t-slow) var(--ease);
  }
  .dish:hover .dish__media img { scale: var(--zoom); }

  /* Plat sans photo : composition typographique plutot qu'un trou gris. */
  .dish__media--typo {
    display: grid;
    place-items: center;
    background:
      radial-gradient(120% 120% at 20% 0%, rgba(142, 40, 70, 0.8), transparent 60%),
      linear-gradient(160deg, var(--ink-3), var(--ink-4));
  }
  .dish__initial {
    font-family: var(--font-display);
    font-size: 5.5rem;
    line-height: 1;
    color: rgba(245, 239, 230, 0.12);
    user-select: none;
  }
  .dish--noimg::before {
    content: '';
    position: absolute;
    inset: 10px 10px auto;
    height: 1px;
    background: var(--line);
    opacity: 0.5;
  }

  .dish__body {
    padding: 1.1rem 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
  }
  .dish__name {
    font-family: var(--font-display);
    font-size: 1.22rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .dish__price {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .dish__desc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
  .dish__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.7rem;
  }

  /* Sous 420 px de large, la vignette passe en ligne : photo a gauche, texte
     a droite. Declenche par la largeur du panneau, pas par celle du viewport. */
  @container menu (max-width: 420px) {
    .dish { flex-direction: row; align-items: stretch; }
    .dish__media { width: 38%; aspect-ratio: auto; }
    .dish__initial { font-size: 3.2rem; }
    .dish__body { padding: 0.9rem 1rem; }
    .dish__name { font-size: 1.05rem; }
  }

  /* Boissons : lignes compactes */
  .menu-grid--list { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.7rem; }
  .drink {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.9rem;
    background: var(--ink-3);
    border: 1px solid var(--line-soft);
    min-width: 0;
    transition: border-color var(--t-mid), transform var(--t-mid) var(--ease);
  }
  .drink:hover { border-color: var(--line); transform: translateY(var(--lift)); }
  .drink__thumb,
  .drink picture { width: 46px; height: 46px; flex: none; }
  .drink__thumb { object-fit: cover; }
  .drink__name { font-family: var(--font-display); font-size: 1.05rem; }
  .drink__vol {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--muted-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .menu-note { margin-top: 2.25rem; color: var(--muted); font-size: 0.9rem; }
  .menu-note a { color: var(--gold); border-bottom: 1px solid currentColor; }

  /* ---------- La maison ---------- */
  .story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    margin-bottom: clamp(3rem, 7vw, 5rem);
  }
  .story--rev .story__img { order: 2; }
  .story__img { position: relative; }
  .story__img::before {
    content: '';
    position: absolute;
    inset: 14px -14px -14px 14px;
    border: 1px solid var(--line);
    z-index: -1;
  }
  .story--rev .story__img::before { inset: 14px 14px -14px -14px; }
  .story__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .story__text h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 1rem; }
  .story__text p { color: var(--soft); max-width: 46ch; margin-bottom: 1rem; }
  .story__meta {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--gold);
    text-transform: uppercase;
  }

  .pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
  }
  .pillar {
    background: var(--ink);
    padding: 1.7rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: background-color var(--t-mid);
  }
  .pillar:hover { background: var(--ink-3); }
  .pillar strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
  .pillar span { font-size: var(--fs-sm); color: var(--muted); }

  /* ---------- Infos ---------- */
  .infos {
    display: grid;
    grid-template-columns: 0.95fr 1.15fr 0.9fr;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
  }
  .infos__h {
    font-size: 0.75rem;
    font-family: var(--font-sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 2rem 0 0.9rem;
    font-weight: 500;
  }
  .infos__col > .infos__h:first-child { margin-top: 0; }
  .infos__p { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }

  .hours { width: 100%; font-size: 0.9rem; }
  .hours th,
  .hours td { padding: 0.55rem 0; vertical-align: top; text-align: left; }
  .hours tr { border-bottom: 1px solid var(--line-soft); }
  .hours tr:last-child { border-bottom: 0; }
  .hours th { font-weight: 500; color: var(--muted); width: 45%; }
  .hours td { color: var(--cream); display: flex; flex-direction: column; }
  .hours__slot { font-variant-numeric: tabular-nums; }
  .hours .is-today th,
  .hours .is-today td { color: var(--gold); font-weight: 600; }
  /* Triangle trace, et non le caractere U+25B8 absent des polices. */
  .hours .is-today th::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0.45rem;
    border-left: 5px solid var(--gold);
    border-block: 4px solid transparent;
    vertical-align: 0.1em;
  }
  .hours__closed { color: var(--muted-2); }
  .hours__note { font-size: 0.8rem; color: var(--muted-2); margin-top: 0.8rem; }

  .infos__btns { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }

  .pays { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .pays li {
    font-size: 0.74rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--line-soft);
    color: var(--muted);
  }

  .storefront { margin-bottom: 1.25rem; }
  .storefront__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 30%;
    border: 1px solid var(--line-soft);
  }
  .storefront figcaption { font-size: 0.78rem; color: var(--muted-2); margin-top: 0.6rem; }

  .map {
    border: 1px solid var(--line-soft);
    line-height: 0;
    filter: grayscale(0.5) invert(0.92) hue-rotate(180deg) contrast(0.92) brightness(0.95);
  }
  /* Hauteur relative plutot que 240 px figes : la carte respire sur tablette. */
  .map iframe { width: 100%; aspect-ratio: 16 / 11; min-height: 200px; border: 0; }
  .map__alt { font-size: 0.78rem; color: var(--muted-2); margin-top: 0.6rem; }
  .map__alt a { color: var(--gold); border-bottom: 1px solid var(--line); }

  /* ---------- Questions frequentes ---------- */
  .faq { max-width: 78ch; }
  .faq__item { border-bottom: 1px solid var(--line-soft); }
  .faq__q {
    font-family: var(--font-display);
    /* Couleur posee explicitement : heritee, elle est calculee a #000000 par
       le navigateur sur un summary en display:list-item, ce que les audits
       signalent comme un contraste de 1,08:1 alors que le rendu est correct. */
    color: var(--cream);
    font-size: 1.1rem;
    padding: 1.1rem 2.5rem 1.1rem 0;
    min-height: 44px;
    cursor: pointer;
    position: relative;
    list-style: none;
    transition: color var(--t-fast);
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q:hover { color: var(--gold); }
  /* Croix qui pivote en moins : indicateur d'ouverture sans image. */
  .faq__q::after,
  .faq__q::before {
    content: '';
    position: absolute;
    right: 0.4rem;
    top: 50%;
    background: var(--gold);
    transition: rotate var(--t-mid) var(--ease), opacity var(--t-mid);
  }
  /* Les deux traits doivent partager le meme centre pour former un "+" :
     le trait vertical, cale a droite comme l'horizontal, est ramene de 6 px
     vers la gauche, soit la demi-largeur du trait horizontal. */
  .faq__q::before { width: 13px; height: 1px; translate: 0 -50%; }
  .faq__q::after { width: 1px; height: 13px; translate: -6px -50%; }
  .faq__item[open] .faq__q::after { rotate: 90deg; opacity: 0; }
  .faq__a { padding-bottom: 1.2rem; }
  .faq__a p { color: var(--muted); font-size: 0.92rem; line-height: 1.65; max-width: 70ch; }
  @supports (interpolate-size: allow-keywords) {
    .faq__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size var(--t-mid) var(--ease), content-visibility var(--t-mid) allow-discrete;
    }
    .faq__item[open]::details-content { block-size: auto; }
  }

  /* ---------- Pied de page ---------- */
  .footer {
    background: var(--ink);
    border-top: 1px solid var(--line-soft);
    padding: 3.5rem 0 calc(3rem + env(safe-area-inset-bottom));
  }
  .footer--slim { padding-block: 2rem; }
  .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 2rem; }
  .brand--footer { margin-bottom: 1rem; display: flex; align-items: center; gap: 0.7rem; }
  .footer__h {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.75rem;
    font-family: var(--font-sans);
    font-weight: 500;
  }
  .footer__p { font-size: 0.88rem; color: var(--muted); line-height: 1.85; }
  .footer__p + .footer__p { margin-top: 1rem; }
  .footer__p a { border-bottom: 1px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); }
  .footer__p a:hover { color: var(--cream); border-bottom-color: var(--line); }
  .footer__legal { font-size: 0.78rem; color: var(--muted-2); }
  .footer__bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    font-size: var(--fs-xs);
    color: var(--muted-2);
  }
  .footer--slim .footer__bottom { margin-top: 0; border-top: 0; padding-top: 0; }
  .footer__bottom a { color: var(--muted); border-bottom: 1px solid var(--line-soft); }
  .footer__credit a { color: var(--gold); border-bottom-color: var(--line); }
  .footer__credit a:hover { color: var(--cream); }

  /* ---------- Barre d'action mobile ---------- */
  .mobile-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 18;
    display: none;
    grid-template-columns: 1.4fr 1fr 1fr;
    background: rgba(14, 13, 12, 0.96);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-soft);
    padding: 0.6rem 0.7rem calc(0.6rem + env(safe-area-inset-bottom));
    gap: 0.5rem;
    translate: 0 0;
    transition: translate var(--t-mid) var(--ease);
  }
  .mobile-bar a {
    text-align: center;
    padding: 0.8rem 0.4rem;
    min-height: 44px;
    display: grid;
    place-items: center;
    font-size: 0.82rem;
    font-weight: 500;
    border: 1px solid var(--line-soft);
    color: var(--cream);
  }
  .mobile-bar__main { background: var(--wine); border-color: var(--wine); }

  /* ---------- Pages secondaires ---------- */
  .page__main { padding: calc(var(--nav-h) + clamp(2.5rem, 8vh, 5rem)) 0 clamp(3rem, 8vh, 6rem); }
  .page__wrap { max-width: 76ch; }
  .page__title { font-size: var(--fs-h2); margin-bottom: 1.2rem; }
  .page__lead { font-size: var(--fs-lead); color: var(--soft); max-width: 60ch; margin-bottom: 2rem; }
  .page__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.5rem; }
  .page__links { display: grid; gap: 0.5rem; }
  .page__links a {
    color: var(--muted);
    border-bottom: 1px solid var(--line-soft);
    display: inline-block;
    padding-block: 0.3rem;
  }
  .page__links a:hover { color: var(--gold); }

  .breadcrumb { margin-bottom: 1.5rem; font-size: var(--fs-xs); color: var(--muted-2); }
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
  .breadcrumb li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.5; }
  .breadcrumb a { color: var(--muted); border-bottom: 1px solid var(--line-soft); }
  .breadcrumb a:hover { color: var(--gold); }

  .prose h2 {
    font-size: var(--fs-h3);
    margin: 2.5rem 0 0.9rem;
    color: var(--cream);
  }
  .prose p { color: var(--muted); margin-bottom: 1rem; line-height: 1.75; }
  .prose strong { color: var(--soft); }
  .prose a { color: var(--gold); border-bottom: 1px solid var(--line); }
  .prose a:hover { color: var(--cream); }
  .prose__meta { font-size: 0.8rem; color: var(--muted-2); margin-top: 2rem; }
}
@layer motion {
  /* ---------- Apparitions au defilement ----------
     Le masquage initial est conditionne a .js-reveal, classe que le module
     pose sur <html> juste avant d'installer son observateur. Consequence :
     si le JavaScript est desactive, bloque par le reseau ou en erreur, rien
     n'est masque et toute la page reste lisible. L'inverse (masquer par
     defaut puis compter sur le script pour reveler) rendait le contenu
     dependant d'un fichier qui peut ne jamais arriver.

     Les elements concernes sont tous sous la ligne de flottaison, donc ce
     masquage differe ne produit aucun scintillement visible. */
  .js-reveal .reveal {
    opacity: 0;
    translate: 0 var(--rise);
    transition:
      opacity var(--t-reveal) var(--ease-out),
      translate var(--t-reveal) var(--ease-out),
      scale var(--t-reveal) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js-reveal .reveal--left { translate: calc(-22px * var(--motion)) 0; }
  .js-reveal .reveal--right { translate: calc(22px * var(--motion)) 0; }
  .js-reveal .reveal--scale {
    scale: calc(1 - 0.03 * var(--motion));
    translate: 0 calc(16px * var(--motion));
  }

  .js-reveal .reveal.is-in {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  /* ---------- Cascade ----------
     Le decalage est derive en CSS avec :nth-child, et non pose en attribut
     style= sur chaque element : cela permet de retirer 'unsafe-inline' de la
     directive style-src de la CSP. Plafonne a douze elements, au-dela le
     decalage serait une attente, pas une animation. */
  [data-stagger] > *:nth-child(1) { --reveal-delay: calc(var(--stagger) * 0); }
  [data-stagger] > *:nth-child(2) { --reveal-delay: calc(var(--stagger) * 1); }
  [data-stagger] > *:nth-child(3) { --reveal-delay: calc(var(--stagger) * 2); }
  [data-stagger] > *:nth-child(4) { --reveal-delay: calc(var(--stagger) * 3); }
  [data-stagger] > *:nth-child(5) { --reveal-delay: calc(var(--stagger) * 4); }
  [data-stagger] > *:nth-child(6) { --reveal-delay: calc(var(--stagger) * 5); }
  [data-stagger] > *:nth-child(7) { --reveal-delay: calc(var(--stagger) * 6); }
  [data-stagger] > *:nth-child(n + 8) { --reveal-delay: calc(var(--stagger) * 7); }

  /* ---------- Entree du hero ----------
     Joue une seule fois au chargement, sans attendre le JavaScript. */
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__cta,
  .hero__trust {
    animation: hero-in var(--t-reveal) var(--ease-out) backwards;
  }
  .hero__eyebrow { animation-delay: 60ms; }
  .hero__title { animation-delay: 140ms; }
  .hero__lead { animation-delay: 260ms; }
  .hero__cta { animation-delay: 360ms; }
  .hero__trust { animation-delay: 460ms; }

  @keyframes hero-in {
    from { opacity: 0; translate: 0 calc(18px * var(--motion)); }
    to { opacity: 1; translate: 0 0; }
  }

  /* ---------- Arrivee des plats dans un panneau ----------
     Jouee a l'affichage du panneau : les vignettes montent en cascade plutot
     que d'apparaitre d'un bloc. */
  .menu-grid > .dish,
  .menu-grid > .drink {
    animation: pop var(--t-mid) var(--ease-out) backwards;
  }
  .menu-grid > :nth-child(1) { animation-delay: calc(var(--stagger) * 0); }
  .menu-grid > :nth-child(2) { animation-delay: calc(var(--stagger) * 0.5); }
  .menu-grid > :nth-child(3) { animation-delay: calc(var(--stagger) * 1); }
  .menu-grid > :nth-child(4) { animation-delay: calc(var(--stagger) * 1.5); }
  .menu-grid > :nth-child(5) { animation-delay: calc(var(--stagger) * 2); }
  .menu-grid > :nth-child(6) { animation-delay: calc(var(--stagger) * 2.5); }
  .menu-grid > :nth-child(n + 7) { animation-delay: calc(var(--stagger) * 3); }

  @keyframes pop {
    from { opacity: 0; translate: 0 calc(10px * var(--motion)); }
    to { opacity: 1; translate: 0 0; }
  }

  /* ---------- Entree du tiroir mobile ---------- */
  .drawer { animation: drawer-in var(--t-mid) var(--ease-out); }
  @keyframes drawer-in {
    from { opacity: 0; translate: 0 calc(-10px * var(--motion)); }
    to { opacity: 1; translate: 0 0; }
  }
  .drawer__nav a {
    animation: drawer-link var(--t-mid) var(--ease-out) backwards;
  }
  .drawer__nav a:nth-child(1) { animation-delay: 40ms; }
  .drawer__nav a:nth-child(2) { animation-delay: 80ms; }
  .drawer__nav a:nth-child(3) { animation-delay: 120ms; }
  .drawer__nav a:nth-child(4) { animation-delay: 160ms; }
  .drawer__nav a:nth-child(5) { animation-delay: 200ms; }
  @keyframes drawer-link {
    from { opacity: 0; translate: calc(-14px * var(--motion)) 0; }
    to { opacity: 1; translate: 0 0; }
  }

  /* ---------- Barre mobile ----------
     Elle se retire quand on remonte vers le haut de page (ou les actions sont
     deja a l'ecran) et revient des qu'on redescend. */
  .mobile-bar[data-hidden='true'] { translate: 0 calc(110% * var(--motion)); }

  /* ---------- Transition entre panneaux de la carte ----------
     Enrichissement progressif : la ou l'API est disponible, le changement
     d'onglet se fait en fondu croise plutot qu'en saut sec. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (view-transition-name: none) {
      .menu-panels { view-transition-name: menu-panels; }
      ::view-transition-old(menu-panels),
      ::view-transition-new(menu-panels) {
        animation-duration: var(--t-mid);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* On ne rase pas toutes les transitions avec !important comme avant :
       les fondus restent (ils aident a comprendre ce qui change), seuls les
       deplacements et les boucles disparaissent, via --motion: 0. */
    .hero__scroll-line,
    .marquee__track { animation: none; }
    .btn::after { display: none; }
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-links { position: absolute; top: 0; left: 0; z-index: 100; }
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--gold);
    color: var(--ink);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .skip-link:focus { left: 0; }
  .skip-link:nth-child(2):focus { left: 0; top: 3rem; }

  /* Pose sur <body> pendant l'ouverture du tiroir. Verrouille le defilement
     sans faire sauter la page, grace a scrollbar-gutter plus haut. */
  .is-locked { overflow: hidden; }

  [hidden] { display: none !important; }
}

/* =========================================================
   Responsive — paliers regroupes

   Verifie a 320 / 360 / 414 / 768 / 1024 / 1440 / 1920 px et en paysage.
   Les vignettes de plats ne figurent plus ici : elles reagissent a leur
   propre largeur via une container query (voir .menu-grid).
   ========================================================= */

/* --- Tres grands ecrans : on laisse la mise en page respirer --- */
@media (min-width: 1600px) {
  :root {
    --wrap: 1360px;
    --fs-h1: clamp(3rem, 1.4rem + 4.4vw, 6rem);
  }
}

/* --- Ordinateur portable etroit --- */
@media (max-width: 1080px) {
  .infos { grid-template-columns: 1fr 1fr; }
  .infos__col:last-child { grid-column: 1 / -1; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .hero__trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* --- Tablette et telephone : la navigation passe en tiroir --- */
@media (max-width: 900px) {
  :root { --mobile-bar-h: 74px; }

  .nav__links { display: none; }
  .burger { display: grid; }
  .nav__actions > .status { display: none; }
  .mobile-bar { display: grid; }

  .best-grid { grid-template-columns: repeat(2, 1fr); }
  .best-cta { grid-column: span 2; }

  .story,
  .story--rev { grid-template-columns: 1fr; }
  .story--rev .story__img { order: 0; }
  .story__img::before { display: none; }
  .story__img img { aspect-ratio: 4 / 3; }

  .footer__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer { padding-bottom: 2.5rem; }
}

/* --- Telephone --- */
@media (max-width: 640px) {
  :root { --nav-h: 64px; }

  .hero { min-height: 94svh; }
  .hero__trust { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .hero__cta .btn { flex: 1 1 100%; }

  .best-grid { grid-template-columns: 1fr; }
  .best,
  .best--tall { grid-row: span 1; aspect-ratio: 4 / 3; }
  .best--tall .best__body h3 { font-size: 1.6rem; }
  .best-cta { grid-column: span 1; }

  .infos { grid-template-columns: 1fr; }
  .infos__col:last-child { grid-column: auto; }
  .pillars { grid-template-columns: 1fr; }
  .brand__text em { display: none; }

  .footer__bottom { flex-direction: column; gap: 0.5rem; }
}

/* --- Tres petits ecrans (320 px) --- */
@media (max-width: 400px) {
  .brand__text { font-size: 0.95rem; }
  .brand__mark { width: 32px; height: 32px; font-size: 1rem; }

  /* Sous 400 px, la marque, le bouton "Commander" et le bouton de menu ne
     tiennent plus : le bouton de menu passait hors de l'ecran, rendant la
     navigation mobile inaccessible sur un petit telephone. On retire le
     "Commander" de l'en-tete — il reste dans la barre d'action fixe en bas
     de l'ecran et dans le tiroir, donc rien n'est perdu. */
  .nav__actions .btn--primary { display: none; }
}

@media (max-width: 360px) {
  :root { --pad: 1rem; }
  .nav__actions .btn--sm { padding-inline: 0.75rem; }
  .hero__trust { grid-template-columns: 1fr; }
  .mobile-bar { grid-template-columns: 1.6fr 1fr 1fr; gap: 0.35rem; }
  .mobile-bar a { font-size: 0.76rem; padding-inline: 0.2rem; }
}

/* --- Telephone en paysage : peu de hauteur disponible ---
   Le hero occupait 94 svh, ce qui ne laissait rien voir du contenu, et le
   tiroir depassait l'ecran. */
@media (orientation: landscape) and (max-height: 540px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-bottom: 2.5rem;
  }
  .hero__scroll { display: none; }
  .hero__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 1rem; }
  .drawer {
    padding-block: 1.25rem;
    gap: 1.25rem;
  }
  .drawer__nav a { font-size: 1.25rem; padding-block: 0.35rem; }
  .section { padding-block: 3rem; }
}

/* --- Impression : la carte et les infos doivent rester utilisables --- */
@media print {
  .nav, .drawer, .mobile-bar, .marquee, .hero__scroll, .map, .form,
  .nav__progress, .best-cta { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  body::after { display: none; }
  .hero { min-height: auto; padding: 0 0 1rem; }
  .hero__veil, .hero__bg { display: none; }
  .section { padding-block: 1rem; page-break-inside: avoid; }
  .menu-grid[hidden] { display: grid !important; }
  .dish, .drink, .pillar { border-color: #ccc; background: none; }
  .dish__media { display: none; }
  a { color: #000; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.7em; }
  .faq__item[open] .faq__a, .faq__a { display: block !important; }
}