/* ==========================================================================
   RESTAURANT LE JASMIN — Feuille de style unique
   Direction artistique : « L'ENCRE ET LA LAQUE »
   --------------------------------------------------------------------------
   Parti pris typographique : le Song chinois (宋体) et la Didone latine
   partagent la meme structure (horizontales fines, verticales epaisses,
   fort contraste). C'est ce pont qui fait lire le site FR / EN / ZH
   comme UN SEUL design, et non comme trois.
     Titres  : Bodoni Moda (latin) + Noto Serif SC (chinois)
     Texte   : Archivo (latin)     + Noto Sans SC  (chinois)
   Les polices chinoises ne sont chargees QUE si la langue ZH est active
   (voir js/script.js) : inutile d'imposer ~10 Mo de glyphes CJK a un
   visiteur francophone.

   REGLE DE COULEUR IMPORTANTE :
   l'or (#C9A227) a un contraste de 2.17:1 sur l'ivoire => INTERDIT en texte
   sur fond clair. Il est reserve aux filets, bordures, et au texte sur fond
   sombre (7.63:1). Verifie a la main, ne pas contourner.

   SOMMAIRE
     01. Tokens (variables)      07. Hero & rails
     02. Reset & base            08. Menu & recherche
     03. Typographie             09. Avis & etoiles
     04. Mise en page            10. Formulaires
     05. Boutons                 11. Devis (catalogue + panier)
     06. En-tete & pied          12. Animations / impression / a11y
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* --- Couleurs (contrastes WCAG verifies sur --ivoire) --------------- */
  --ivoire:        #F7F2E8;   /* fond principal            (60 %) */
  --ivoire-clair:  #FCFAF4;   /* surfaces surelevees              */
  --ivoire-ombre:  #EDE6D8;   /* fonds alternes                   */
  --rouge:         #8B1A1A;   /* rouge laque   — 8.33:1     ✓ AAA */
  --rouge-sombre:  #5E1010;   /* survols, fonds profonds          */
  --rouge-clair:   #A83232;
  --noir-doux:     #171310;   /* noir chaud   — 16.5:1      ✓ AAA */
  --noir-encre:    #2A2320;   /* texte courant — 13.8:1     ✓ AAA */
  --taupe:         #6B5F57;   /* texte secondaire — 5.54:1  ✓ AA  */
  --or:            #C9A227;   /* filets uniquement sur clair      */
  --or-clair:      #E3C766;   /* texte or sur fond sombre    ✓    */
  --or-texte:      #A9860F;   /* GROS titre or sur clair — 3.10:1 ✓ AA gros */

  /* --- Roles semantiques (ne jamais ecrire un hex dans un composant) -- */
  --fond:            var(--ivoire);
  --fond-surface:    var(--ivoire-clair);
  --fond-alt:        var(--ivoire-ombre);
  --texte:           var(--noir-encre);
  --texte-fort:      var(--noir-doux);
  --texte-doux:      var(--taupe);
  --accent:          var(--rouge);
  --accent-fort:     var(--rouge-sombre);
  --filet-c:         rgba(23, 19, 16, .14);   /* filet neutre  */
  --filet-or:        rgba(201, 162, 39, .55); /* filet dore    */
  --filet-clair:     rgba(247, 242, 232, .26);/* filet sur fond sombre */
  --erreur:          #A3261F;
  --succes:          #2F6B45;

  /* --- Typographie ---------------------------------------------------- */
  --f-titre: "Bodoni Moda", "Noto Serif SC", Didot, "Times New Roman", serif;
  --f-texte: "Archivo", "Noto Sans SC", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.6rem, 1.35rem + 5.4vw, 6rem);
  --fs-h1:      clamp(2.15rem, 1.45rem + 3.1vw, 3.9rem);
  --fs-h2:      clamp(1.7rem,  1.28rem + 1.9vw, 2.7rem);
  --fs-h3:      clamp(1.2rem,  1.06rem + 0.62vw, 1.6rem);
  --fs-lead:    clamp(1.05rem, 1rem + 0.36vw, 1.25rem);
  --fs-body:    1rem;      /* 16px mini : evite le zoom auto iOS */
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;   /* petites capitales interlettrees    */

  --lh-titre: 1.08;
  --lh-texte: 1.65;
  --ls-label: .22em;

  /* --- Espacements (rythme 4 / 8) ------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5rem;   --sp-11: 6rem;
  --sp-section: clamp(4.25rem, 2.6rem + 6.2vw, 8.5rem);

  /* --- Structure ------------------------------------------------------ */
  --wrap:        76rem;
  --wrap-narrow: 46rem;
  --gouttiere:   clamp(1.25rem, .6rem + 2.6vw, 3rem);
  --header-h:    4.5rem;
  --radius:      2px;      /* quasi nul : le style est net, pas arrondi */
  --radius-lg:   3px;

  /* --- Elevation ------------------------------------------------------ */
  --ombre-1: 0 1px 2px rgba(23,19,16,.05), 0 2px 8px rgba(23,19,16,.04);
  --ombre-2: 0 2px 4px rgba(23,19,16,.06), 0 10px 30px rgba(23,19,16,.07);
  --ombre-3: 0 4px 12px rgba(23,19,16,.09), 0 24px 60px rgba(23,19,16,.12);

  /* --- Mouvement (jamais « linear » sur de l'UI) ---------------------- */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-in:   cubic-bezier(.55, 0, 1, .45);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-rapide:  160ms;
  --t-base:    260ms;
  --t-lent:    600ms;

  /* --- Empilement ----------------------------------------------------- */
  --z-base: 0;  --z-sticky: 100;  --z-header: 200;
  --z-drawer: 300;  --z-overlay: 400;
}

/* La barre de recherche du menu se cale sous l'en-tete */
:root { --menubar-top: var(--header-h); }


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* l'ancre ne se cache pas derriere l'en-tete colle */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  min-height: 100svh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--fs-body);
  line-height: var(--lh-texte);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* aucun defilement horizontal, jamais */
}

body.is-locked { overflow: hidden; }   /* menu mobile ouvert */

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

/* Photo de la salle : remplit son cadre sans se deformer */
.media-cover { width: 100%; height: 100%; object-fit: cover; object-position: center; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

::selection { background: var(--rouge); color: var(--ivoire); }

/* Focus clavier : toujours visible, jamais supprime */
:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.on-dark :focus-visible, .section--rouge :focus-visible, .footer :focus-visible {
  outline-color: var(--or-clair);
}

/* Lien d'evitement clavier */
.skip {
  position: absolute; top: -100%; left: var(--sp-4); z-index: var(--z-overlay);
  padding: var(--sp-3) var(--sp-5);
  background: var(--rouge); color: var(--ivoire);
  font-size: var(--fs-small); letter-spacing: .06em;
}
.skip:focus { top: var(--sp-3); }

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

.is-hidden { display: none !important; }


/* ==========================================================================
   03. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 500;
  line-height: var(--lh-titre);
  color: var(--texte-fort);
  letter-spacing: -.005em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--texte-doux);
  max-width: 58ch;          /* 60-75 caracteres : mesure lisible */
}

.texte { max-width: 66ch; }
.texte + .texte { margin-top: var(--sp-4); }

/* Petite capitale interlettree — brique de base de l'identite */
.label {
  display: inline-block;
  font-family: var(--f-texte);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}
.on-dark .label, .section--rouge .label { color: var(--or-clair); }

/* Chiffres tabulaires : les prix ne « dansent » pas d'une ligne a l'autre */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Le filet d'or : se trace au scroll (voir §12) */
.filet {
  display: block; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--or) 0%, var(--filet-or) 55%, transparent 100%);
  border: 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 900ms var(--ease-out);
}
.filet.is-in { transform: scaleX(1); }
.section--rouge .filet, .on-dark .filet {
  background: linear-gradient(90deg, var(--or-clair) 0%, rgba(227,199,102,.45) 55%, transparent 100%);
}

/* Rail vertical — signature typographique, aucune image requise */
.rail {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: var(--fs-label);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--texte-doux);
  opacity: .8;
  user-select: none;
}
.on-dark .rail { color: rgba(247,242,232,.62); }


/* ==========================================================================
   04. MISE EN PAGE
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sp-section); position: relative; }
.section--serre  { padding-block: calc(var(--sp-section) * .6); }
.section--alt    { background: var(--fond-alt); }

/* Cartouche rouge : inversion pleine largeur, donne le rythme aux pages */
.section--rouge {
  background: var(--rouge);
  color: rgba(247, 242, 232, .88);
}
.section--rouge h1, .section--rouge h2, .section--rouge h3 { color: var(--ivoire); }

.section--encre { background: var(--noir-doux); color: rgba(247, 242, 232, .82); }
.section--encre h1, .section--encre h2, .section--encre h3 { color: var(--ivoire); }

/* En-tete de section : 01 — LABEL / filet / titre / chapo */
.shead { margin-bottom: var(--sp-8); max-width: 62ch; }
.shead__top {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.shead__index {
  font-family: var(--f-titre);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  color: var(--or);
  flex: 0 0 auto;
}
.section--rouge .shead__index, .on-dark .shead__index { color: var(--or-clair); }
.shead__top .filet { flex: 1 1 auto; max-width: 8rem; }
.shead__title { margin-bottom: var(--sp-4); }
.shead--centre { margin-inline: auto; text-align: center; }
.shead--centre .shead__top { justify-content: center; }
.shead--centre .lead { margin-inline: auto; }

/* Grilles */
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--asym { grid-template-columns: 1fr; gap: var(--sp-7); }

@media (min-width: 48em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--asym { grid-template-columns: 5fr 7fr; gap: var(--sp-9); align-items: start; }
}

/* Carte editoriale — pas d'image, tout repose sur la typo et le filet */
.card {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-6);
  background: var(--fond-surface);
  border: 1px solid var(--filet-c);
  border-top: 2px solid var(--rouge);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); }
.card__index {
  font-family: var(--f-titre); font-size: var(--fs-label);
  letter-spacing: .1em; color: var(--or); display: block; margin-bottom: var(--sp-3);
}
.card__title { margin-bottom: var(--sp-3); }
.card__text { color: var(--texte-doux); font-size: var(--fs-small); }

/* Bandeau de titre des pages interieures (sans photo) */
.page-head {
  position: relative;
  padding-block: calc(var(--sp-9) + 1rem) var(--sp-8);
  background: var(--noir-doux);
  color: rgba(247,242,232,.8);
  overflow: hidden;
}
.page-head::after {                    /* voile de laque, purement CSS */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 88% 0%, rgba(139,26,26,.55) 0%, transparent 62%);
  pointer-events: none;
}
.page-head > * { position: relative; z-index: 1; }
.page-head h1 { color: var(--ivoire); margin-bottom: var(--sp-4); }
.page-head .lead { color: rgba(247,242,232,.72); }
.page-head__rail {
  position: absolute; top: 0; right: var(--gouttiere); bottom: 0;
  display: none; align-items: center; z-index: 1;
}
@media (min-width: 64em) { .page-head__rail { display: flex; } }


/* ==========================================================================
   05. BOUTONS
   ========================================================================== */

.btn {
  --btn-fond: var(--rouge);
  --btn-texte: var(--ivoire);
  --btn-bord: var(--rouge);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 3rem;                     /* >= 44px : cible tactile */
  padding: var(--sp-3) var(--sp-6);
  background: var(--btn-fond);
  color: var(--btn-texte);
  border: 1px solid var(--btn-bord);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;           /* supprime le delai de 300 ms */
  transition: background-color var(--t-base) var(--ease-soft),
              color var(--t-base) var(--ease-soft),
              border-color var(--t-base) var(--ease-soft),
              transform var(--t-rapide) var(--ease-out);
}
.btn:hover { background: var(--accent-fort); border-color: var(--accent-fort); }
.btn:active { transform: scale(.985); }   /* retour tactile, sans decaler la mise en page */

.btn--ghost {
  --btn-fond: transparent; --btn-texte: var(--rouge); --btn-bord: var(--rouge);
}
.btn--ghost:hover { background: var(--rouge); color: var(--ivoire); }

.btn--or {
  --btn-fond: transparent; --btn-texte: var(--ivoire); --btn-bord: var(--filet-or);
}
.btn--or:hover { background: var(--or); border-color: var(--or); color: var(--noir-doux); }

.btn--light {
  --btn-fond: var(--ivoire); --btn-texte: var(--rouge); --btn-bord: var(--ivoire);
}
.btn--light:hover { background: var(--ivoire-clair); border-color: var(--ivoire-clair); color: var(--rouge-sombre); }

.btn--sm { min-height: 2.75rem; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-label); }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}

.btn__spinner {
  width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

.btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Lien souligne au survol par un filet qui se trace */
.lien {
  position: relative; display: inline-block;
  color: var(--accent); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: .1em; text-transform: uppercase; padding-block: var(--sp-1);
}
.lien::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.lien:hover::after, .lien:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.on-dark .lien, .section--rouge .lien, .footer .lien { color: var(--or-clair); }


/* ==========================================================================
   06. EN-TETE & PIED DE PAGE
   ========================================================================== */

.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--fond-surface);
  border-bottom: 1px solid var(--filet-c);
  transition: background-color 420ms var(--ease-soft),
              border-color 420ms var(--ease-soft),
              color 420ms var(--ease-soft);
}
/* Variante « pose sur le hero » (accueil uniquement) */
.header--over {
  position: fixed; inset-inline: 0; top: 0;
  background: transparent; border-bottom-color: transparent;
  color: var(--ivoire);
}
.header--over.is-scrolled {
  background: var(--fond-surface); border-bottom-color: var(--filet-c); color: var(--texte);
}

.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
/* Le logo du client est une image en couleurs (bol + lanterne). Plutot que
   de le passer au filtre — ce qui l'ecraserait en une silhouette illisible —
   on sert DEUX fichiers : la version couleurs sur fond clair, et une version
   claire sur fond sombre.
   Sur l'ACCUEIL uniquement, la version claire est le logo SECONDAIRE
   (encre blanche, fond transparent) : c'est lui qui accueille le visiteur
   tant que l'en-tete est pose sur le hero. Au premier defilement, la bascule
   ramene la marque en couleurs. Les autres pages n'ont pas .header--over :
   elles n'affichent jamais que logo-marque.png. */
.brand__logo { display: block; width: auto; height: 2.5rem; }
.brand__logo--clair { display: none; }
.header--over:not(.is-scrolled) .brand__logo--couleur { display: none; }
.header--over:not(.is-scrolled) .brand__logo--clair { display: block; }
/* Les deux fichiers de l'accueil n'ont pas le meme rapport (231x271 pour la
   marque, 875x875 pour le logo secondaire). A hauteur egale, leurs largeurs
   different de ~6px : la bascule ferait sursauter le nom d'autant. On leur
   donne donc la MEME boite carree de 2.5rem, object-fit: contain laissant
   chaque logo a sa taille naturelle, centre dedans. Plus aucun decalage.
   Limite a .header--over : les autres pages gardent leur rendu au pixel. */
.header--over .brand__logo { width: 2.5rem; object-fit: contain; }

/* Le nom en toutes lettres : la marque seule ne le porte pas. */
.brand__nom {
  font-family: var(--f-titre); font-size: 1.2rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--texte-fort); white-space: nowrap;
  transition: color 420ms var(--ease-soft);
}
.header--over:not(.is-scrolled) .brand__nom { color: var(--ivoire); }
@media (max-width: 26em) { .brand__nom { display: none; } }

/* Navigation bureau */
.nav { display: none; }
@media (min-width: 62em) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, .3rem + 1.5vw, 2rem); }
.nav__link {
  position: relative; display: block;
  padding: var(--sp-3) var(--sp-1);
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  transition: color var(--t-base) var(--ease-soft);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .55rem; height: 1px;
  background: var(--or); transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
/* Page courante : mise en evidence explicite (pas seulement la couleur) */
.nav__link.is-active { color: var(--accent); }
.nav__link.is-active::after { transform: scaleX(1); }
.header--over:not(.is-scrolled) .nav__link.is-active { color: var(--or-clair); }

.header__actions { display: flex; align-items: center; gap: var(--sp-3); }
.header__cta { display: none; }
@media (min-width: 48em) { .header__cta { display: inline-flex; } }
.header--over:not(.is-scrolled) .header__cta {
  --btn-fond: transparent; --btn-texte: var(--ivoire); --btn-bord: var(--filet-clair);
}
.header--over:not(.is-scrolled) .header__cta:hover {
  --btn-fond: var(--ivoire); --btn-texte: var(--rouge); --btn-bord: var(--ivoire);
}

/* Selecteur de langue */
.lang { position: relative; flex: 0 0 auto; }
.lang__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 2.75rem; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--filet-c); border-radius: var(--radius);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: border-color var(--t-base) var(--ease-soft), background-color var(--t-base) var(--ease-soft);
}
.header--over:not(.is-scrolled) .lang__btn { border-color: var(--filet-clair); }
.lang__btn:hover { border-color: var(--or); }
.lang__chevron { width: .6rem; height: .6rem; transition: transform var(--t-base) var(--ease-out); }
.lang__btn[aria-expanded="true"] .lang__chevron { transform: rotate(180deg); }

.lang__menu {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: var(--z-drawer);
  min-width: 10rem; padding: var(--sp-2);
  background: var(--fond-surface);
  border: 1px solid var(--filet-c);
  box-shadow: var(--ombre-3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out),
              visibility var(--t-base);
}
.lang__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; min-height: 2.75rem; padding: var(--sp-2) var(--sp-3);
  color: var(--texte); font-size: var(--fs-small); text-align: left;
  transition: background-color var(--t-rapide) var(--ease-soft);
}
.lang__option:hover { background: var(--fond-alt); }
.lang__option[aria-current="true"] { color: var(--accent); font-weight: 600; }
.lang__check { width: .8rem; height: .8rem; opacity: 0; }
.lang__option[aria-current="true"] .lang__check { opacity: 1; }

/* Bouton burger */
.burger {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 2.75rem; height: 2.75rem;   /* 44px */
  flex: 0 0 auto;
}
@media (min-width: 62em) { .burger { display: none; } }
.burger__line {
  display: block; width: 20px; height: 1.5px; background: currentColor;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-rapide) var(--ease-soft);
}
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Tiroir mobile */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + var(--sp-6)) var(--gouttiere) var(--sp-8);
  background: var(--noir-doux); color: var(--ivoire);
  opacity: 0; visibility: hidden;
  transition: opacity 340ms var(--ease-out), visibility 340ms;
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; }
@media (min-width: 62em) { .drawer { display: none; } }
.drawer__list { display: flex; flex-direction: column; gap: var(--sp-1); }
.drawer__link {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--filet-clair);
  font-family: var(--f-titre); font-size: 1.75rem; color: var(--ivoire);
  /* entree en cascade : voir --i pose en HTML */
  opacity: 0; transform: translateY(14px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link.is-active { color: var(--or-clair); }
.drawer__num { font-size: var(--fs-label); letter-spacing: .1em; color: var(--or-clair); opacity: .8; }
.drawer__footer { margin-top: auto; padding-top: var(--sp-7); }
.drawer__tel {
  display: block; margin-top: var(--sp-4);
  font-family: var(--f-titre); font-size: 1.35rem; color: var(--or-clair);
}

/* Pied de page */
/* Case a cocher du consentement RGPD */
.consentement { margin-top: var(--sp-2); }
.case {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  cursor: pointer; padding-block: var(--sp-2);
}
.case input[type="checkbox"] {
  flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .15rem;
  accent-color: var(--rouge); cursor: pointer;
}
.case__texte { font-size: var(--fs-small); line-height: 1.5; color: var(--texte); }
.has-error .case__texte { color: var(--erreur); }
.has-error .case input[type="checkbox"] { outline: 2px solid var(--erreur); outline-offset: 2px; }

/* Bandeau d'adresse, juste au-dessus du pied de page, sur chaque page.
   Toute la ligne est cliquable et ouvre la fiche Google Maps. */
.adresse-bandeau {
  background: var(--fond-alt);
  border-top: 1px solid var(--filet-c);
  border-bottom: 1px solid var(--filet-or);
}
.adresse-bandeau__lien {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-4); flex-wrap: wrap;
  padding-block: var(--sp-5);
  text-align: center; color: var(--texte);
  transition: color var(--t-base) var(--ease-soft);
}
.adresse-bandeau__lien:hover { color: var(--accent); }
.adresse-bandeau__pin { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; color: var(--or); }
.adresse-bandeau__texte { display: grid; gap: 2px; }
.adresse-bandeau__rue { font-family: var(--f-titre); font-size: 1.15rem; }
.adresse-bandeau__cta {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--accent);
}
.adresse-bandeau__lien:hover .adresse-bandeau__cta { text-decoration: underline; }

/* L'adresse cliquable de la fiche Contact */
.lien-adresse { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lien-adresse:hover { color: var(--accent); }

.footer {
  background: var(--noir-doux); color: rgba(247, 242, 232, .68);
  padding-block: var(--sp-9) var(--sp-6);
  font-size: var(--fs-small);
}
.footer h3 {
  color: var(--ivoire); font-size: var(--fs-label); font-family: var(--f-texte);
  font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 48em) { .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); } }
@media (min-width: 64em) { .footer__grid { grid-template-columns: 1.5fr 1fr 1.3fr 1.2fr; } }
.footer__horaire { display: flex; justify-content: space-between; gap: var(--sp-3); padding-block: 2px; }
.footer__horaire dt { color: rgba(247,242,232,.85); }
.footer__horaire dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
/* En anglais, « Wednesday – Saturday » est plus large que « Mercredi – Samedi »
   et que « 周三 – 周六 » : le jour et l'horaire basculaient sur deux lignes,
   la colonne ne ressemblait plus aux deux autres langues. On reduit d'un cran
   la police de ce seul bloc — la structure, elle, ne bouge pas. */
html[lang="en"] .footer__horaire { font-size: .8rem; gap: var(--sp-2); }
html[lang="en"] .footer__horaire dt,
html[lang="en"] .footer__horaire dd { white-space: nowrap; }
/* Le pied de page est toujours sombre. Le logo secondaire qu'on y sert est
   desormais un PNG a fond TRANSPARENT, encre blanche : il se pose donc a nu
   sur le noir, sans pastille. On retire le fond ivoire et le padding qui
   servaient a rattraper l'ancien JPEG opaque — un fond clair rendrait
   aujourd'hui le logo blanc invisible. L'encombrement reste 5.5rem de haut,
   le pied de page ne bouge pas d'un pixel. */
.footer__logo {
  height: 5.5rem; width: auto; margin-bottom: var(--sp-4);
}
.footer__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__list a { display: inline-block; padding-block: 2px; transition: color var(--t-base) var(--ease-soft); }
.footer__list a:hover { color: var(--or-clair); }
.footer__tel { font-family: var(--f-titre); font-size: 1.35rem; color: var(--ivoire); }
/* Tous les liens du pied de page virent a l'or au survol — adresse, telephone
   et e-mail compris. Sur fond sombre, c'est le seul signal qui montre qu'ils
   sont cliquables. */
.footer a { transition: color var(--t-base) var(--ease-soft); }
.footer a:hover, .footer a:focus-visible { color: var(--or-clair); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  justify-content: space-between; align-items: center;
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--filet-clair);
  font-size: var(--fs-label); letter-spacing: .06em;
  color: rgba(247, 242, 232, .5);
}


/* ==========================================================================
   07. HERO & RAILS
   ========================================================================== */

.hero {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;                     /* repli navigateurs anciens */
  min-height: 100svh;                    /* svh : pas de saut avec la barre mobile */
  padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-9);
  overflow: hidden;
  color: var(--ivoire);
  isolation: isolate;
  /* Fond de secours : le hero reste beau meme si la photo n'est pas encore posee */
  background: linear-gradient(155deg, var(--noir-doux) 0%, var(--rouge-sombre) 58%, var(--noir-doux) 100%);
}
.hero__media {
  position: absolute; inset: -6% 0;      /* marge pour le parallaxe */
  z-index: -2;
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(23,19,16,.62) 0%, rgba(23,19,16,.34) 34%, rgba(23,19,16,.78) 100%),
    linear-gradient(105deg, rgba(94,16,16,.58) 0%, rgba(23,19,16,.18) 55%, rgba(23,19,16,.5) 100%);
}
.hero__inner { position: relative; text-align: center; display: grid; justify-items: center; }

/* L'ELEMENT SIGNATURE : le 2e logo, point focal de l'accueil */
/* AUCUN filtre ici : c'est l'element signature, ses vraies couleurs
   sont preservees. Le logo secondaire doit donc etre fourni en version
   CLAIRE (reversee), puisqu'il est pose sur un fond sombre. */
.hero__signature {
  position: relative;
  width: min(19rem, 60vw);
  height: auto;
  margin-bottom: var(--sp-6);
}
.hero__signature-wrap { position: relative; display: inline-block; }
/* Le filet d'or se trace autour du logo a l'ouverture */
.hero__signature-wrap::before,
.hero__signature-wrap::after {
  content: ""; position: absolute; left: -6%; right: -6%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or-clair), transparent);
  transform: scaleX(0);
  transition: transform 1100ms var(--ease-out) 520ms;
}
.hero__signature-wrap::before { top: -1.5rem; }
.hero__signature-wrap::after  { bottom: -.5rem; }
.is-ready .hero__signature-wrap::before,
.is-ready .hero__signature-wrap::after { transform: scaleX(1); }

.hero__title { color: var(--ivoire); font-size: var(--fs-display); margin-bottom: var(--sp-4); }
.hero__lead { color: rgba(247,242,232,.8); max-width: 46ch; margin-inline: auto; margin-bottom: var(--sp-7); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

.hero__rail {
  position: absolute; top: 50%; left: var(--gouttiere); transform: translateY(-50%);
  display: none; z-index: 1;
}
@media (min-width: 64em) { .hero__rail { display: block; } }

.hero__scroll {
  position: absolute; bottom: var(--sp-6); left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247,242,232,.6);
}
@media (min-width: 48em) { .hero__scroll { display: flex; } }
.hero__scroll-line {
  width: 1px; height: 2.75rem; background: linear-gradient(180deg, var(--or-clair), transparent);
  animation: descend 2.4s var(--ease-soft) infinite;
}
@keyframes descend {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* Entree orchestree du hero (classe .is-ready posee par le JS) */
.hero__signature, .hero__title, .hero__lead, .hero__actions, .hero__rail {
  opacity: 0; transform: translateY(20px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.hero__signature { transform: translateY(0) scale(.94); transition-delay: 120ms; }
.hero__title     { transition-delay: 520ms; }
.hero__lead      { transition-delay: 660ms; }
.hero__actions   { transition-delay: 780ms; }
.hero__rail      { transition-delay: 900ms; }
.is-ready .hero__signature { opacity: 1; transform: translateY(0) scale(1); }
.is-ready .hero__title,
.is-ready .hero__lead,
.is-ready .hero__actions { opacity: 1; transform: none; }
.is-ready .hero__rail { opacity: 1; transform: translateY(-50%); }


/* ==========================================================================
   08. MENU & RECHERCHE
   ========================================================================== */

/* Barre collante : recherche + filtres de categorie */
.menubar {
  position: sticky; top: var(--menubar-top); z-index: var(--z-sticky);
  padding-block: var(--sp-4);
  background: rgba(247, 242, 232, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--filet-c);
}

.search { position: relative; display: flex; align-items: center; }
.search__icon {
  position: absolute; left: var(--sp-4); width: 1.05rem; height: 1.05rem;
  color: var(--texte-doux); pointer-events: none;
}
.search__field {
  width: 100%; min-height: 3.25rem;
  padding: var(--sp-3) 3rem var(--sp-3) 3rem;
  background: var(--fond-surface);
  border: 1px solid var(--filet-c); border-radius: var(--radius);
  font-size: var(--fs-body);              /* 16px : pas de zoom auto iOS */
  transition: border-color var(--t-base) var(--ease-soft), box-shadow var(--t-base) var(--ease-soft);
}
.search__field::placeholder { color: var(--texte-doux); }
.search__field:focus {
  outline: none; border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(139, 26, 26, .12);
}
.search__clear {
  position: absolute; right: var(--sp-2);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;        /* 44px */
  color: var(--texte-doux);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-rapide) var(--ease-soft), visibility var(--t-rapide), color var(--t-rapide);
}
.search__clear.is-visible { opacity: 1; visibility: visible; }
.search__clear:hover { color: var(--accent); }
.search__clear svg { width: 1rem; height: 1rem; }

/* Un etage de filtres : son intitule, puis ses pastilles */
.filtres { margin-top: var(--sp-4); }
.filtres__label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--texte-doux);
}
.filtres__aide {
  font-weight: 400; letter-spacing: .04em; text-transform: none;
  font-size: var(--fs-label); color: var(--texte-doux); opacity: .8;
}

/* Bas de la barre : compteur a gauche, « Tout effacer » a droite */
.menubar__pied {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--sp-2) var(--sp-4);
}
.menubar__pied .search__count { margin-top: var(--sp-3); }
.lien--reinit { margin-top: var(--sp-3); background: none; border: 0; cursor: pointer; }

/* Pastilles de categories — defilement horizontal contenu */
.chips {
  display: flex; gap: var(--sp-2);
  margin-top: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.chips::-webkit-scrollbar { display: none; }

/* Les mots-cles sont cumulables : on les distingue des categories
   (qui, elles, s'excluent) par un trait dore a l'etat actif. */
.chips--mots { flex-wrap: nowrap; }
.chip--mot { text-transform: none; letter-spacing: .04em; font-weight: 500; }
.chip--mot.is-active {
  background: var(--rouge-sombre); border-color: var(--or);
  color: var(--ivoire);
}
.chip {
  flex: 0 0 auto;
  min-height: 2.5rem; padding: var(--sp-2) var(--sp-4);
  background: transparent;
  border: 1px solid var(--filet-c); border-radius: 999px;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-doux); white-space: nowrap;
  transition: color var(--t-rapide) var(--ease-soft), border-color var(--t-rapide) var(--ease-soft),
              background-color var(--t-rapide) var(--ease-soft);
}
.chip:hover { color: var(--accent); border-color: var(--or); }
.chip.is-active { background: var(--rouge); border-color: var(--rouge); color: var(--ivoire); }

.search__count {
  margin-top: var(--sp-3); font-size: var(--fs-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux);
}

/* Groupes (ENTREES / PLATS / DESSERTS…) */
.menu-group { margin-top: var(--sp-9); }
.menu-group:first-child { margin-top: var(--sp-8); }
.menu-group__title {
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--f-titre); font-size: var(--fs-h2);
  margin-bottom: var(--sp-6);
}
.menu-group__title .filet { flex: 1 1 auto; }

.menu-cat { margin-top: var(--sp-7); break-inside: avoid; }
.menu-cat__title {
  font-family: var(--f-texte); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--accent);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--filet-or);
}

/* La liste de plats en deux colonnes sur grand ecran */
.dish-list { display: grid; gap: var(--sp-1); }
@media (min-width: 64em) {
  .dish-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-9); }
}

/* Un plat : le nom, puis sa composition. AUCUN prix n'est affiche.
   (les plats ne sont PAS cliquables ; seuls leurs mots-cles le sont,
   pour relancer une recherche) */
.dish {
  padding-block: var(--sp-3);
  border-bottom: 1px solid rgba(23,19,16,.06);
}
.dish__ligne { display: flex; align-items: baseline; gap: var(--sp-3); }
.dish__name { flex: 0 1 auto; color: var(--texte); }

/* Composition : cocktails, formules… */
.dish__detail {
  margin-top: 2px; max-width: 52ch;
  font-size: var(--fs-small); line-height: 1.45;
  color: var(--texte-doux);
}

/* Les mots-cles du plat, cliquables */
.dish__tags {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-2);
}
.tag {
  padding: 2px var(--sp-2);
  background: transparent;
  border: 1px solid var(--filet-c); border-radius: 999px;
  font-size: var(--fs-label); letter-spacing: .04em;
  color: var(--texte-doux); white-space: nowrap; cursor: pointer;
  transition: color var(--t-rapide) var(--ease-soft),
              border-color var(--t-rapide) var(--ease-soft),
              background-color var(--t-rapide) var(--ease-soft);
}
.tag:hover { color: var(--accent); border-color: var(--or); }
.tag.is-active {
  background: rgba(201, 162, 39, .16);
  border-color: var(--or); color: var(--accent-fort); font-weight: 600;
}

/* Etat vide de la recherche */
.empty {
  display: grid; place-items: center; gap: var(--sp-4);
  padding: var(--sp-10) var(--sp-4); text-align: center;
}
.empty__icon { width: 2.75rem; height: 2.75rem; color: var(--or); opacity: .85; }
.empty__title { font-family: var(--f-titre); font-size: var(--fs-h3); color: var(--texte-fort); }
.empty__text { color: var(--texte-doux); font-size: var(--fs-small); max-width: 40ch; }

/* Encart d'avertissement / donnee a completer */
.encart {
  padding: var(--sp-5);
  background: var(--fond-surface);
  border: 1px solid var(--filet-c); border-left: 3px solid var(--or);
}
.encart p { color: var(--texte-doux); font-size: var(--fs-small); }


/* ==========================================================================
   09. AVIS & ETOILES
   ========================================================================== */

.note {
  display: grid; justify-items: center; gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5);
  background: var(--fond-surface);
  border: 1px solid var(--filet-c); border-top: 2px solid var(--or);
  text-align: center;
}
.note__value {
  font-family: var(--f-titre); font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  line-height: 1; color: var(--texte-fort); font-variant-numeric: tabular-nums;
}
.note__meta { font-size: var(--fs-small); color: var(--texte-doux); }

/* Etoiles d'affichage (non interactives) */
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 1.15rem; height: 1.15rem; }
.star--plein { color: var(--or); }
.star--vide  { color: rgba(23,19,16,.2); }
.on-dark .star--vide, .section--rouge .star--vide { color: rgba(247,242,232,.28); }

/* Cartes d'avis */
.avis-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 48em) { .avis-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .avis-grid { grid-template-columns: repeat(3, 1fr); } }

.avis {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  background: var(--fond-surface);
  border: 1px solid var(--filet-c);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.avis:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); }
/* Note de l'avis — remplace l'ancien guillemet decoratif dore.
   Les etoiles sont dessinees par le JS a partir de « data-etoiles » ;
   le rappel chiffre « 4/5 » reste lisible sans JavaScript. */
.avis__note {
  display: flex; align-items: center; gap: var(--sp-2);
  line-height: 1;
}
.avis__note .stars svg { width: 1rem; height: 1rem; }
.avis__note-txt {
  font-size: var(--fs-small); font-weight: 600; color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.avis__quote {
  position: relative; flex: 1 1 auto;
  font-family: var(--f-titre); font-size: 1.15rem; line-height: 1.5; color: var(--texte-fort);
}
.avis__author {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-top: var(--sp-4); border-top: 1px solid var(--filet-c);
  font-size: var(--fs-small); color: var(--texte-doux);
}
.avis__initiale {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--rouge); color: var(--ivoire);
  font-family: var(--f-titre); font-size: .95rem;
}
.avis__nom { color: var(--texte-fort); font-weight: 600; }

/* Bloc « Laissez votre avis » — etoiles cliquables */
.rate {
  display: grid; justify-items: center; gap: var(--sp-5);
  padding: var(--sp-8) var(--sp-5); text-align: center;
}
/* Le selecteur d'etoiles a ete retire du bloc « Laissez votre avis » :
   Google ne permet pas de pre-remplir une note depuis un site tiers.
   Les styles .rate__stars / .rate__star / .rate__legende ont donc ete
   supprimes avec lui. Les etoiles d'AFFICHAGE (.stars, data-etoiles)
   restent definies plus haut : elles servent ailleurs. */


/* ==========================================================================
   10. FORMULAIRES
   ========================================================================== */

.form { display: grid; gap: var(--sp-5); }

.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 40em) { .form__row--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 40em) { .form__row--3 { grid-template-columns: repeat(3, 1fr); } }

.field { display: grid; gap: var(--sp-2); }

.field__label {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux);
}
.field__req { color: var(--accent); margin-left: 2px; }

.field__input {
  width: 100%; min-height: 3rem;          /* >= 44px */
  padding: var(--sp-3) var(--sp-4);
  background: var(--fond-surface);
  color: var(--texte);
  border: 1px solid var(--filet-c); border-radius: var(--radius);
  font-size: var(--fs-body);              /* 16px : pas de zoom auto iOS */
  transition: border-color var(--t-base) var(--ease-soft), box-shadow var(--t-base) var(--ease-soft);
}
textarea.field__input { min-height: 8rem; resize: vertical; line-height: 1.6; }
select.field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B5F57' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: .7rem;
  padding-right: var(--sp-8);
}
.field__input:focus {
  outline: none; border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(139, 26, 26, .12);
}
.field__input:disabled { opacity: .45; cursor: not-allowed; }

/* Etat d'erreur : couleur + texte + icone (jamais la couleur seule) */
.field.has-error .field__input { border-color: var(--erreur); }
.field.has-error .field__input:focus { box-shadow: 0 0 0 3px rgba(163, 38, 31, .14); }

.field__hint { font-size: var(--fs-small); color: var(--texte-doux); }
.field__error {
  display: none; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); color: var(--erreur); font-weight: 500;
}
.field.has-error .field__error { display: flex; }
.field__error svg { width: .95rem; height: .95rem; flex: 0 0 auto; }

/* Groupe de boutons radio (mode de livraison) */
.radio-group { display: grid; gap: var(--sp-3); }
@media (min-width: 40em) { .radio-group { grid-template-columns: repeat(2, 1fr); } }
.radio {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  min-height: 3.25rem; padding: var(--sp-4);
  background: var(--fond-surface);
  border: 1px solid var(--filet-c); border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease-soft), background-color var(--t-base) var(--ease-soft);
}
.radio:hover { border-color: var(--or); }
.radio:has(input:checked) { border-color: var(--rouge); background: rgba(139, 26, 26, .04); }
.radio input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--rouge); }
.radio__texte { display: grid; gap: 2px; }
.radio__titre { font-weight: 600; font-size: var(--fs-small); color: var(--texte-fort); }
.radio__desc { font-size: var(--fs-small); color: var(--texte-doux); }

/* Pot de miel anti-robot : invisible pour l'humain, pas pour le robot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Message de retour du formulaire */
.form__status {
  display: none; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--filet-c); border-left: 3px solid var(--erreur);
  background: var(--fond-surface);
  font-size: var(--fs-small);
}
.form__status.is-visible { display: flex; }
.form__status--ok { border-left-color: var(--succes); }
.form__status svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: .15rem; }

.form__note { font-size: var(--fs-small); color: var(--texte-doux); }

/* Bloc de contact (page contact) */
.infos { display: grid; gap: var(--sp-5); }
.info { display: grid; gap: var(--sp-1); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--filet-c); }
.info__label {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent);
}
.info__value { font-size: var(--fs-lead); color: var(--texte-fort); }
/* « Écrire depuis Gmail » se tient a cote de l'adresse e-mail, et non plus en
   bas de la fiche : les deux facons d'ecrire au restaurant sont au meme
   endroit. Il passe sous l'adresse si la colonne est trop etroite. */
.info__value--mail { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.info__value a { transition: color var(--t-base) var(--ease-soft); }
.info__value a:hover { color: var(--accent); }

.horaires { display: grid; gap: var(--sp-1); }
.horaire {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid rgba(23,19,16,.06);
}
.horaire__jour { flex: 0 0 7.5rem; font-weight: 600; color: var(--texte-fort); }
.horaire__h { flex: 1 1 auto; text-align: right; font-variant-numeric: tabular-nums; color: var(--texte-doux); }
.horaire--ferme .horaire__h { color: var(--erreur); font-style: italic; }
.horaire.is-today {
  background: rgba(201, 162, 39, .12);
  border-left: 2px solid var(--or); padding-left: var(--sp-3);
}
.horaire__badge {
  margin-left: var(--sp-2); font-size: var(--fs-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}

/* Detail par service : heure de fermeture de la salle et de la cuisine.
   Se pose SOUS le tableau des horaires, sans le modifier. */
.horaires-detail { margin-top: var(--sp-5); padding-left: var(--sp-3); border-left: 2px solid var(--filet-or); }
.horaires-detail__titre {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-fort); margin-bottom: var(--sp-2);
}
.horaires-detail__liste { list-style: none; display: grid; gap: var(--sp-2); }
.horaires-detail__liste li { font-size: var(--fs-small); color: var(--texte-doux); }


/* ==========================================================================
   11. DEVIS — CATALOGUE + PANIER
   ========================================================================== */

.devis-layout { display: grid; gap: var(--sp-7); align-items: start; }
/* Sans cela, les colonnes prennent la largeur de leur contenu (min-width:auto)
   et la rangee de pastilles, qui defile pourtant, elargit toute la page. */
.devis-layout > * { min-width: 0; }
@media (min-width: 68em) { .devis-layout { grid-template-columns: 1fr 27rem; gap: var(--sp-9); } }

/* Colonne de droite : le formulaire, puis le recapitulatif juste dessous.
   Le client remplit ses coordonnees et relit sa selection au meme endroit,
   sans avoir a faire defiler tout le catalogue. */
.devis-colonne { display: grid; gap: var(--sp-6); }
.devis-form {
  padding: var(--sp-6);
  background: var(--fond-alt);
  border: 1px solid var(--filet-c);
}
/* Dans une colonne etroite, les rangees multi-colonnes du formulaire
   passent en pile : mieux vaut un champ lisible que trois champs serres. */
.devis-form .form__row { grid-template-columns: 1fr; }
.devis-form .shead { margin-bottom: var(--sp-5); }
@media (min-width: 68em) {
  .devis-form .shead__title { font-size: 1.6rem; }
}

/* Bloc « document » : numero de demande, date d'emission */
.doc-head {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7);
  justify-content: space-between; align-items: flex-end;
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--filet-or);
}
.doc-meta { display: grid; gap: 2px; }
.doc-meta__label {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texte-doux);
}
.doc-meta__value { font-family: var(--f-titre); font-size: 1.15rem; color: var(--texte-fort); font-variant-numeric: tabular-nums; }
.doc-mention {
  display: inline-block; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--filet-or);
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}

.cat-block { margin-top: var(--sp-7); }
.cat-block__title {
  font-family: var(--f-texte); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--filet-or);
}

/* Une ligne du catalogue traiteur : nom + « Prix sur demande » + compteur */
.cat-item {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(23,19,16,.06);
  transition: background-color var(--t-rapide) var(--ease-soft);
}
.cat-item.is-selected { background: rgba(201, 162, 39, .09); }
.cat-item.is-filtre { display: none; }          /* ecarte par la recherche */
.cat-item__texte { flex: 1 1 auto; display: grid; gap: 1px; min-width: 0; }
.cat-item__name { color: var(--texte-fort); }
.cat-item__detail {
  font-size: var(--fs-small); line-height: 1.45; color: var(--texte-doux);
}
.cat-item__mots {
  font-size: var(--fs-label); letter-spacing: .04em;
  color: var(--texte-doux); opacity: .75;
}
.cat-item__od {
  font-size: var(--fs-label); letter-spacing: .06em;
  color: var(--texte-doux); font-style: italic;
}

/* L'enseigne historique, sur bandeau sombre */
.enseigne { width: 100%; max-width: 28rem; height: auto; margin-inline: auto; }

/* Barre de recherche du catalogue traiteur */
.devis-recherche {
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--filet-c);
}
.devis-recherche .search__count { margin-top: var(--sp-4); }

/* Compteur — / + */
.stepper {
  display: flex; align-items: center; gap: 2px; flex: 0 0 auto;
  border: 1px solid var(--filet-c); border-radius: var(--radius);
  background: var(--fond-surface);
}
.stepper__btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;        /* 44px */
  color: var(--texte-fort);
  transition: background-color var(--t-rapide) var(--ease-soft), color var(--t-rapide) var(--ease-soft);
}
.stepper__btn:hover:not([disabled]) { background: var(--rouge); color: var(--ivoire); }
.stepper__btn[disabled] { opacity: .3; cursor: not-allowed; }
.stepper__btn svg { width: .8rem; height: .8rem; }
.stepper__val {
  min-width: 2.25rem; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texte-fort);
}

/* Panier : le recapitulatif de la selection.
   Il etait « sticky » du temps ou il ouvrait la colonne de droite. Depuis
   qu'il est passe SOUS « Vos informations », il est le dernier element de la
   grille : sa zone de grille fait exactement sa hauteur, donc « sticky »
   n'aurait plus rien pour glisser, et le max-height qui l'accompagnait ne
   ferait qu'ajouter un ascenseur interne inutile. Rendre le panier a nouveau
   collant suppose de le remettre en tete de la colonne (devis.html). */
.panier {
  padding: var(--sp-5);
  background: var(--fond-surface);
  border: 1px solid var(--filet-c); border-top: 2px solid var(--rouge);
}
.panier__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-family: var(--f-texte); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--filet-or);
}
.panier__compteur { color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.panier__list { display: grid; gap: var(--sp-2); }
.panier__line {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-bottom: 1px solid rgba(23,19,16,.06);
  font-size: var(--fs-small);
}
.panier__nom { flex: 1 1 auto; color: var(--texte); }
.panier__qte { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texte-fort); }
.panier__empty { padding: var(--sp-5) 0; color: var(--texte-doux); font-size: var(--fs-small); text-align: center; }

/* Remplace le total : le restaurant chiffre lui-meme */
.panier__note {
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: rgba(201, 162, 39, .10);
  border-left: 2px solid var(--or);
  font-size: var(--fs-small); color: var(--texte);
}


/* ==========================================================================
   12. ANIMATIONS · IMPRESSION · ACCESSIBILITE
   ========================================================================== */

/* Apparition au defilement — cascade via --i pose en HTML */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);   /* 45 ms : cascade lisible */
}
.reveal.is-in { opacity: 1; transform: none; }

/* Page de remerciement */
.merci { display: grid; justify-items: center; gap: var(--sp-5); text-align: center; padding-block: var(--sp-10); }
.merci__mark {
  display: grid; place-items: center;
  width: 5rem; height: 5rem; border-radius: 50%;
  border: 1px solid var(--filet-or); color: var(--or);
}
.merci__mark svg { width: 2rem; height: 2rem; }
.merci .lead { margin-inline: auto; }
.merci__tel {
  font-family: var(--f-titre); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  color: var(--accent);
}

/* Page 404 */
.err__code {
  font-family: var(--f-titre); font-size: clamp(6rem, 3rem + 16vw, 15rem);
  line-height: .85; color: var(--rouge); opacity: .16; font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   13. CENTRAGE GLOBAL · SELECTEUR DE CATEGORIE · PIED DE PAGE
   --------------------------------------------------------------------------
   Ces regles arrivent APRES tout le reste : elles priment sur les blocs
   ci-dessus sans avoir a les reecrire.
   ========================================================================== */

/* --- Centrage global -----------------------------------------------------
   Sur TOUTES les pages : le titre de section et le texte d'introduction qui
   le suit sont centres. Le centrage est identique a toutes les largeurs :
   rien ne se decale au passage sur mobile. */
.shead { margin-inline: auto; text-align: center; }
.shead__top { justify-content: center; }
.shead .lead, .shead .texte, .shead p { margin-inline: auto; }

/* Bloc de contenu centre (paragraphes + lien) place sous un titre */
.bloc-centre { max-width: 64ch; margin-inline: auto; text-align: center; }
.bloc-centre .texte { max-width: none; margin-inline: auto; }

/* Titre de marque « LE JASMIN » : jaune maison, gros titre, centre.
   Sur fond clair on emploie --or-texte, la variante lisible du jaune
   maison (3.10:1 : le #C9A227 des filets ne plafonne qu'a 2.17:1, sous le
   minimum exigible meme pour un gros titre). Pour retrouver exactement le
   jaune des filets, remplacer var(--or-texte) par var(--or) ci-dessous. */
.titre-marque {
  font-size: var(--fs-h1);
  color: var(--or-texte);
  letter-spacing: .06em;
  margin-bottom: var(--sp-5);
}
.section--rouge .titre-marque, .section--encre .titre-marque { color: var(--or-clair); }

/* Deux cadres centres — « Ce qu'il faut savoir », « Pour quels evenements » */
.grid--duo { grid-template-columns: 1fr; max-width: 48rem; margin-inline: auto; }
@media (min-width: 48em) { .grid--duo { grid-template-columns: repeat(2, 1fr); } }
.card--centre { text-align: center; }

/* Bouton a bords arrondis (« Decouvrir la carte » du hero) */
.btn--rond { border-radius: 999px; padding-inline: var(--sp-7); }

/* --- Selecteur de categorie ----------------------------------------------
   Remplace les pastilles de filtres et les mots-cles sur la carte comme sur
   le catalogue traiteur : une recherche, une liste deroulante, rien d'autre. */
.menubar .search, .devis-recherche .search { max-width: 34rem; margin-inline: auto; }

.selecteur { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); justify-items: center; }
.selecteur__label {
  font-family: var(--f-texte); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texte-doux);
}
.select-cat {
  width: 100%; max-width: 22rem; min-height: 3rem;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--f-texte); font-size: var(--fs-body); color: var(--texte-fort);
  background: var(--fond-surface);
  border: 1px solid var(--filet-c); border-radius: var(--radius);
  cursor: pointer;
}
.select-cat:focus-visible {
  border-color: var(--or); outline: none;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}

/* --- Pied de page : telephone et Facebook, chacun avec son icone -------- */
.footer__lien-icone { display: inline-flex; align-items: center; gap: var(--sp-3); }
.footer__lien-icone svg { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; color: var(--or-clair); }
.footer__tel.footer__lien-icone svg { width: 1.25rem; height: 1.25rem; }

/* --- Impression : le client doit pouvoir garder une trace propre ------- */
@media print {
  :root { --gouttiere: 0; }
  *, *::before, *::after {
    background: transparent !important; color: #000 !important;
    box-shadow: none !important; text-shadow: none !important;
    animation: none !important; transition: none !important;
  }
  body { font-size: 11pt; line-height: 1.4; }
  .header, .drawer, .footer, .lang, .burger, .hero__scroll, .no-print,
  .menubar, .chips, .selecteur, .stepper, .btn, .skip { display: none !important; }
  .print-only { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  a[href^="mailto"]::after, a[href^="tel"]::after { content: ""; }
  .section, .section--rouge, .section--encre { padding-block: 0 !important; }
  .devis-layout { display: block !important; }
  .panier { position: static !important; max-height: none !important; border: 1px solid #000 !important; margin-top: 1rem; }
  .cat-item:not(.is-selected) { display: none !important; }  /* n'imprimer que la selection */
  .cat-block:not(:has(.cat-item.is-selected)) { display: none !important; }
  /* La recherche masque des lignes a l'ecran. A l'impression, seule compte
     la selection : on la reaffiche, meme si un filtre l'avait ecartee. */
  .cat-item.is-selected { display: flex !important; }
  .cat-block.is-hidden:has(.cat-item.is-selected) { display: block !important; }
  .cat-item__mots { display: none !important; }
  .doc-head { border-bottom: 1px solid #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .filet { transform: scaleX(1) !important; background: #000 !important; }
  h1, h2, h3 { break-after: avoid; }
  .menu-cat, .avis, .card { break-inside: avoid; }
  @page { margin: 16mm; }
}
.print-only { display: none; }

/* --- Mouvement reduit : on coupe tout, rien ne doit « bouger » -------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* Le contenu reste visible : on ne masque jamais par l'animation seule */
  .reveal, .hero__signature, .hero__title, .hero__lead, .hero__actions, .hero__rail,
  .drawer__link {
    opacity: 1 !important; transform: none !important;
  }
  .hero__rail { transform: translateY(-50%) !important; }
  .filet, .hero__signature-wrap::before, .hero__signature-wrap::after { transform: scaleX(1) !important; }
  .hero__media { transform: none !important; }
  .hero__scroll-line { animation: none !important; }
}

/* --- Contraste renforce ---------------------------------------------- */
@media (prefers-contrast: more) {
  :root { --filet-c: rgba(23,19,16,.4); --texte-doux: #4A3F38; }
  .dish { border-bottom-color: rgba(23,19,16,.2); }
}


/* ==========================================================================
   14. PAGES LEGALES — MENTIONS LEGALES & POLITIQUE DE CONFIDENTIALITE
   --------------------------------------------------------------------------
   Deux pages de lecture, pas de vitrine : le texte reste aligne a gauche
   (le centrage global de .shead ne s'applique pas ici), la mesure est
   bornee a 66 caracteres, et chaque bloc est numerote comme les sections
   du reste du site. Aucun composant nouveau : on reprend les jetons.
   ========================================================================== */

.legal { display: grid; gap: var(--sp-8); }

.legal__resume { margin-bottom: var(--sp-1); }
.legal__resume p { font-size: var(--fs-body); color: var(--texte); }

.legal__bloc {
  display: grid; gap: var(--sp-4);
  max-width: 66ch;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--filet-c);
}
.legal__bloc:first-child { padding-top: 0; border-top: 0; }

/* Le numero de section : meme petite capitale doree que les rails du site */
.legal__num {
  font-family: var(--f-texte); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); color: var(--or-texte);
  font-variant-numeric: tabular-nums;
}

.legal__bloc h2 { font-size: var(--fs-h3); }
.legal__bloc h3 {
  font-family: var(--f-texte); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: .06em; color: var(--texte-fort);
  margin-top: var(--sp-2);
}
.legal__bloc p { color: var(--texte-doux); }
.legal__bloc h2 + p, .legal__bloc h3 + p { margin-top: calc(var(--sp-2) * -1); }

/* Les puces : le reset global supprime list-style, on le remet ici seulement */
.legal__liste {
  display: grid; gap: var(--sp-2);
  list-style: disc; padding-left: var(--sp-5);
  color: var(--texte-doux); font-size: var(--fs-small);
}
.legal__liste::marker, .legal__liste li::marker { color: var(--or); }
.legal__liste strong { color: var(--texte-fort); font-weight: 600; }

/* Coordonnees : libelle discret, valeur lisible — meme grammaire que .info */
.legal__coord {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--fond-surface);
  border: 1px solid var(--filet-c); border-left: 3px solid var(--or);
}
.legal__coord-ligne { display: grid; gap: 2px; }
.legal__coord dt {
  font-family: var(--f-texte); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texte-doux);
}
.legal__coord dd { margin: 0; color: var(--texte-fort); }

@media (min-width: 40em) {
  .legal__coord-ligne { grid-template-columns: 10rem 1fr; gap: var(--sp-4); align-items: baseline; }
}

/* Les liens dans le corps du texte legal restent soulignes : sur une page
   de lecture, la couleur seule ne suffit pas a les signaler. */
.legal__bloc p > a, .legal__liste a, .legal__coord a {
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
.legal__bloc p > a.lien { text-decoration: none; }


/* --- Liens legaux du pied de page ---------------------------------------
   Discrets : meme taille et meme opacite que la ligne de copyright, ils ne
   doivent pas concurrencer la navigation principale du pied de page. */
.footer__legal {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-4);
  list-style: none; padding: 0; margin: 0;
}
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; opacity: .9; }
.footer__legal a[aria-current="page"] { color: var(--or-clair); opacity: 1; }
/* Separateur discret entre les deux liens, jamais devant le premier */
.footer__legal li + li::before {
  content: "·"; margin-right: var(--sp-4); opacity: .5;
}
/* --- Lien vers la politique dans le libelle de la case de consentement ----
   Le reset global rend tous les liens invisibles (couleur heritee, pas de
   soulignement). Ici il DOIT se voir : c'est lui qui rend le consentement
   « eclaire ». Rouge maison + soulignement, comme dans le corps des pages
   legales. Un clic dessus ouvre la politique sans cocher la case : les
   navigateurs ne transmettent pas l'activation d'un <label> a un lien. */
.case__texte a {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.case__texte a:hover, .case__texte a:focus-visible { color: var(--accent-fort); }