/* ============================================================
   MINI HOUSE, feuille de style unique
   Organisation :
     1. Polices
     2. Tokens        <- toutes les valeurs de DA vivent ici
     3. Bases
     4. Utilitaires
     5. Header
     6. Hero
     7. Bandeau
     8. Specialites
     9. Difference
    10. Carte
    11. Histoire
    12. Avis
    13. Commander
    14. Infos pratiques
    15. Footer
    16. Pages legales
    17. Visionneuse
    18. Mouvement

   Regle : aucune couleur ni taille en dur hors du bloc 2.
   ============================================================ */

/* ---------- 1. Polices ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../assets/fonts/bricolage-grotesque-latin-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
  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: 'Instrument Sans';
  src: url('../assets/fonts/instrument-sans-latin-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
  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;
}

/* ---------- 2. Tokens ---------- */
:root {
  /* Couleurs relevees a la pipette sur le visuel officiel.
     Methode et script : tools/releve-palette.py, documente dans DESIGN.md §1. */
  --or:            #E0C440;   /* enseigne MINI HOUSE, bandeaux, titres de carte */
  --or-fonce:      #C9AD33;   /* survol, derive */
  --or-voile:      rgba(224, 196, 64, .12);
  --or-lueur:      rgba(224, 196, 64, .28);
  --noir-blason:   #141414;   /* interieur du blason hexagonal */
  --charbon:       #0E0E10;   /* fond de page, derive plus profond que le blason */
  --surface:       #1C1C1F;
  --surface-haute: #26262A;
  --blanc:         #F4F4F4;   /* releve sur FAST FOOD et sur le telephone */
  --sourdine:      #8C8C90;
  --ligne:         rgba(244, 244, 244, .13);
  --ligne-forte:   rgba(244, 244, 244, .28);
  --ouvert:        var(--or);
  --verre:         rgba(14, 14, 16, .62);
  --ombre:         0 24px 60px -18px rgba(0, 0, 0, .7);
  --ombre-douce:   0 12px 32px -14px rgba(0, 0, 0, .6);

  /* Voiles sur photo. Le hero mobile met le texte sur la photo : voile vertical.
     Le hero desktop pose la photo a droite : voile horizontal qui la fond dans le charbon. */
  --voile-photo:   linear-gradient(180deg, rgba(14,14,16,.45) 0%, rgba(14,14,16,0) 16%, rgba(14,14,16,0) 34%, rgba(14,14,16,.78) 54%, var(--charbon) 74%);
  --voile-cote:    linear-gradient(90deg, var(--charbon) 0%, rgba(14,14,16,.82) 14%, rgba(14,14,16,.25) 42%, rgba(14,14,16,0) 62%),
                   linear-gradient(0deg, var(--charbon) 0%, rgba(14,14,16,0) 22%);
  --voile-carte:   linear-gradient(180deg, rgba(14,14,16,0) 30%, rgba(14,14,16,.72) 64%, rgba(14,14,16,.96) 100%);

  /* Typographie */
  --display: 'Bricolage Grotesque', 'Arial Narrow', Impact, sans-serif;
  --texte:   'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Echelle fluide, ratio 1.25 mobile puis 1.333 */
  --t-xs:   clamp(.75rem,  .72rem + .12vw,  .82rem);
  --t-sm:   clamp(.87rem,  .84rem + .15vw,  .95rem);
  --t-base: clamp(1rem,    .96rem + .2vw,   1.12rem);
  --t-md:   clamp(1.15rem, 1.08rem + .35vw, 1.4rem);
  --t-lg:   clamp(1.4rem,  1.24rem + .8vw,  2rem);
  --t-xl:   clamp(1.85rem, 1.5rem + 1.7vw,  3rem);
  --t-2xl:  clamp(2.3rem,  1.7rem + 3vw,    4.2rem);
  --t-hero: clamp(2.5rem,  1.6rem + 4vw,    4.9rem);
  --t-tel:  clamp(2.2rem,  1.1rem + 5.4vw,  5.6rem);

  /* Espacement */
  --e-1: .25rem; --e-2: .5rem;  --e-3: .75rem; --e-4: 1rem;
  --e-5: 1.5rem; --e-6: 2rem;   --e-7: 3rem;   --e-8: 4rem;
  --e-9: 5rem;   --e-10: 7rem;
  --section-y: clamp(4rem, 2rem + 7vw, 8rem);
  --marge-x:   clamp(1.15rem, .6rem + 2.4vw, 3rem);
  --largeur:   78rem;

  /* Formes. Un seul rayon sur tout le site, boutons et photos compris.
     Choix derive du blason hexagonal et des etiquettes de prix rectangulaires
     des panneaux de carte. Voir DESIGN.md. */
  --r: 2px;

  /* Mouvement. Trois durees, deux courbes, utilisees partout.
     --courbe sert aux etats (survol, ouverture), --ressort aux entrees :
     depart vif, arrivee longue, l'element se pose au lieu de s'arreter. */
  --duree:        220ms;
  --duree-moy:    480ms;
  --duree-lente:  900ms;
  --courbe:       cubic-bezier(.22, .61, .36, 1);
  --ressort:      cubic-bezier(.16, 1, .3, 1);
  --entete-h: 60px;

  /* Plans. Echelle unique, rien d'autre n'utilise z-index. */
  --z-contenu: 1;
  --z-dessus:  2;
  --z-entete:  100;
  --z-saut:    200;
}
@media (min-width: 60rem) { :root { --entete-h: 72px; } }

/* ---------- 3. Bases ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--charbon);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: var(--t-base);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--t-2xl); letter-spacing: -.028em; }
h3 { font-size: var(--t-lg); letter-spacing: -.01em; }
p  { margin: 0 0 var(--e-4); max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--or); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--or-fonce); }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--or); color: var(--noir-blason); }

:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* Chiffres alignes : prix, horaires, telephone.
   Remplace une troisieme famille de police, voir DESIGN.md §5. */
.chiffres, table, time, .tel { font-variant-numeric: tabular-nums; }

/* ---------- 4. Utilitaires ---------- */
.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge-x);
}
.section { padding-block: var(--section-y); scroll-margin-top: var(--entete-h); }
.section--ligne { border-top: 1px solid var(--ligne); }
.section__intro { max-width: 46rem; margin-bottom: var(--e-7); }
.section__intro p { color: var(--sourdine); font-size: var(--t-md); margin-top: var(--e-4); }

.saut-contenu {
  position: absolute; left: var(--e-4); top: -100vh; z-index: var(--z-saut);
  background: var(--or); color: var(--noir-blason);
  padding: var(--e-3) var(--e-5); font-weight: 700; border-radius: var(--r);
}
.saut-contenu:focus { top: var(--e-3); }

/* Le tampon maison. Signature du site.
   Ne se pose que sur ce qui est reellement fait sur place. */
.maison {
  display: inline-flex; align-items: center; gap: .34em;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.62rem, .5rem + .35vw, .82rem); letter-spacing: .06em; text-transform: lowercase;
  color: var(--or); border: 1.5px solid var(--or); border-radius: var(--r);
  padding: .12em .5em .16em; margin-inline-start: .45em;
  vertical-align: .22em; white-space: nowrap; line-height: 1.5;
}
.maison::before {
  content: ""; width: .42em; height: .42em; flex: none;
  background: var(--or); transform: rotate(45deg);
}

/* Boutons */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: var(--e-3) var(--e-5);
  font-family: var(--texte); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; border-radius: var(--r); cursor: pointer;
  touch-action: manipulation;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe), transform var(--duree) var(--courbe),
              box-shadow var(--duree-moy) var(--courbe);
}
.btn--grand { min-height: 54px; padding-inline: var(--e-6); font-size: var(--t-base); }
.btn--or { background: var(--or); color: var(--noir-blason); border-color: var(--or); }
.btn--or:hover { background: var(--or); color: var(--noir-blason); box-shadow: 0 10px 30px -10px var(--or-lueur); }
/* Reflet qui traverse le bouton au survol : retour de survol sur l'action principale. */
.btn--or::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 66%);
  transform: translateX(-110%);
}
.btn--ligne { background: transparent; color: var(--blanc); border-color: var(--ligne-forte); }
.btn--ligne:hover { border-color: var(--or); color: var(--or); background: var(--or-voile); }
.btn:active { transform: scale(.97); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px;
  font-weight: 700; font-size: var(--t-sm); text-decoration: none; color: var(--or);
}
.lien-fleche svg { width: 1.1em; height: 1.1em; transition: transform var(--duree) var(--courbe); }
.lien-fleche:hover svg { transform: translateX(4px); }

/* Les photos. Fond de surface pendant le chargement : la case existe deja,
   la page ne saute pas, et l'image arrive par-dessus. */
.plat__media, .difference__pile, .preuve__photo, .histoire__media, .panneau img {
  background: var(--surface);
}

/* ---------- 5. Header ---------- */
.entete {
  position: sticky; top: 0; z-index: var(--z-entete);
  height: var(--entete-h);
  background: rgba(14, 14, 16, .93);
  border-bottom: 1px solid transparent;
  transition: background var(--duree-moy) var(--courbe), border-color var(--duree-moy) var(--courbe),
              box-shadow var(--duree-moy) var(--courbe);
}
@supports (backdrop-filter: blur(8px)) {
  .entete { background: rgba(14, 14, 16, .55); backdrop-filter: blur(14px) saturate(140%); }
}
/* Pose par js/site.js des que le haut de page sort de l'ecran. */
.entete.est-compacte { background: rgba(14, 14, 16, .9); border-bottom-color: var(--ligne); box-shadow: var(--ombre-douce); }
.repere-haut { position: absolute; top: 0; left: 0; width: 1px; height: 120px; pointer-events: none; }

.entete__interieur {
  height: 100%; display: flex; align-items: center; gap: var(--e-4);
  max-width: var(--largeur); margin-inline: auto; padding-inline: var(--marge-x);
}
.entete__logo { display: flex; align-items: center; flex: none; min-height: 44px; padding-inline-end: var(--e-2); }
.entete__logo img { height: calc(var(--entete-h) - 20px); width: auto; transition: transform var(--duree-moy) var(--ressort); transform-origin: left center; }
.entete.est-compacte .entete__logo img { transform: scale(.88); }
.entete__nav { display: none; margin-inline-start: auto; }
.entete__nav ul { display: flex; gap: var(--e-5); align-items: center; }
.entete__nav a {
  position: relative; display: inline-block;
  color: var(--blanc); text-decoration: none; font-size: var(--t-sm); font-weight: 600;
  padding-block: var(--e-2); transition: color var(--duree) var(--courbe);
}
/* Soulignement or qui se deroule depuis la gauche : survol et section en cours. */
.entete__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--or); transform: scaleX(0); transform-origin: right;
  transition: transform var(--duree-moy) var(--ressort);
}
.entete__nav a:hover, .entete__nav a[aria-current="true"] { color: var(--or); }
.entete__nav a:hover::after, .entete__nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.entete__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--e-3); }
.entete .btn { min-height: 42px; padding-inline: var(--e-4); }
/* La marge fixe ne vaut que quand la nav est affichee : masquee, elle laisserait
   les actions collees au logo au lieu de les pousser a droite. */
@media (min-width: 60rem) {
  .entete__nav { display: block; }
  .entete__nav + .entete__actions { margin-inline-start: var(--e-6); }
}

/* Barre de lecture : un filet or sous l'entete qui suit le defilement.
   Animation pilotee par le defilement en CSS pur. Les navigateurs qui ne la
   connaissent pas n'affichent rien, ce qui est le bon repli. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .entete::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: var(--or); transform-origin: 0 50%; transform: scaleX(0);
      animation: lecture linear both; animation-timeline: scroll(root);
    }
  }
}

/* Navigation mobile. <details> natif : accessible et fonctionnel sans JS. */
.menu { position: relative; flex: none; }
.menu > summary {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; cursor: pointer; list-style: none;
  color: var(--blanc); border: 1.5px solid var(--ligne-forte); border-radius: var(--r);
  transition: border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { border-color: var(--or); color: var(--or); }
.menu > summary svg { width: 20px; height: 20px; }
.menu .barre-fermee { display: block; }
.menu .barre-ouverte { display: none; }
.menu[open] .barre-fermee { display: none; }
.menu[open] .barre-ouverte { display: block; }
/* Ancre sur le bord du viewport et non sur le bouton : sinon le panneau
   sort de l'ecran par la gauche sur les petits mobiles. */
.menu__panneau {
  position: fixed; inset-inline-end: var(--marge-x); inset-inline-start: auto;
  top: calc(var(--entete-h) + 8px);
  min-width: 15rem; max-width: calc(100vw - 2 * var(--marge-x));
  padding: var(--e-2);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r);
  box-shadow: var(--ombre);
}
.menu[open] .menu__panneau { animation: deplier var(--duree-moy) var(--ressort); transform-origin: top right; }
.menu__panneau a {
  display: block; padding: var(--e-3) var(--e-4); min-height: 44px;
  color: var(--blanc); text-decoration: none; font-weight: 600; border-radius: var(--r);
}
.menu__panneau a:hover { background: var(--surface-haute); color: var(--or); }
.menu__panneau .etat { display: flex; padding: var(--e-3) var(--e-4) var(--e-2); }
@media (min-width: 60rem) { .menu { display: none; } }

/* Etat ouvert / ferme. Rempli par js/site.js, masque si le JS ne tourne pas. */
.etat { display: none; align-items: center; gap: .45em; font-size: var(--t-xs); font-weight: 600; color: var(--sourdine); }
.etat[data-actif] { display: inline-flex; }
.etat__point { position: relative; width: .5rem; height: .5rem; flex: none; background: var(--sourdine); transform: rotate(45deg); }
.etat--ouvert { color: var(--or); }
.etat--ouvert .etat__point { background: var(--or); }
.etat--grand { font-size: var(--t-md); margin-bottom: var(--e-4); }
.entete .etat { display: none; }
@media (min-width: 48rem) { .entete .etat[data-actif] { display: inline-flex; } }

/* ---------- 6. Hero ----------
   Mobile : la photo occupe tout l'ecran, le texte se pose en bas sur un voile.
   Desktop : la photo glisse a droite et se fond dans le charbon, le texte
   garde la moitie gauche. Une seule structure HTML pour les deux. */
.hero {
  position: relative; display: grid; overflow: clip;
  min-height: calc(100vh - var(--entete-h));
  margin-top: calc(-1 * var(--entete-h)); padding-top: var(--entete-h);
}
/* svh et non dvh : c'est la seule unite qui garantit que les boutons restent
   visibles sans defiler, barre d'adresse mobile deployee comprise. */
@supports (height: 100svh) { .hero { min-height: 100svh; } }
.hero__media { grid-area: 1 / 1; position: relative; overflow: hidden; }
/* L'image est sortie du flux : sinon son ratio intrinseque impose la hauteur
   de la rangee de grille et le hero depasse le viewport. */
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 60%;
}
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--voile-photo); }
/* Mobile : la photo ne couvre que le haut de l'ecran, cadree sur le burger,
   pour qu'il reste visible au-dessus du titre au lieu de passer dessous. */
@media (max-width: 61.99rem) {
  .hero__media img { height: 74%; object-position: 74% 78%; }
}
.hero__contenu {
  grid-area: 1 / 1; position: relative; z-index: var(--z-contenu);
  display: flex; flex-direction: column; justify-content: flex-end;
  max-width: var(--largeur); margin-inline: auto; width: 100%;
  padding: var(--e-7) var(--marge-x) clamp(2.5rem, 1rem + 4vw, 4.5rem);
}
.hero h1 { font-size: var(--t-hero); line-height: .98; letter-spacing: -.035em; max-width: 16ch; }
/* Chaque affirmation sur sa ligne : trois promesses, trois lignes.
   Le padding laisse la place aux accents et aux jambages sous le masque. */
.titre-ligne { display: block; overflow: clip; padding-block: .06em .1em; margin-block: -.06em -.1em; }
.titre-ligne > span { display: block; }
.hero h1 em { font-style: normal; color: var(--or); }
.hero__sous { font-size: var(--t-md); color: var(--blanc); max-width: 40ch; margin-top: var(--e-5); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
.hero__actions .btn { flex: 1 1 auto; min-width: 11rem; }
@media (min-width: 40rem) { .hero__actions .btn { flex: 0 0 auto; } }

/* Note Google posee sur la photo, en verre depoli. */
.hero__note {
  grid-area: 1 / 1; z-index: var(--z-dessus);
  align-self: start; justify-self: end;
  margin: calc(var(--entete-h) + var(--e-4)) var(--marge-x) 0;
  display: inline-flex; flex-direction: column; gap: .2em;
  padding: var(--e-3) var(--e-4); min-height: 44px;
  background: var(--verre); border: 1px solid var(--ligne); border-radius: var(--r);
  color: var(--blanc); text-decoration: none; font-size: var(--t-xs);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--ombre-douce);
  transition: border-color var(--duree) var(--courbe), transform var(--duree-moy) var(--ressort);
}
@supports (backdrop-filter: blur(8px)) { .hero__note { backdrop-filter: blur(12px) saturate(140%); } }
.hero__note:hover { color: var(--blanc); border-color: var(--or); transform: translateY(-2px); }
.hero__note strong { color: var(--or); font-family: var(--display); font-size: 1.6em; line-height: 1; }
.hero__note .etoiles svg { width: .95rem; height: .95rem; }
.hero__note-texte { display: flex; align-items: baseline; gap: .15em; }
.etoiles { display: inline-flex; gap: .1em; color: var(--or); }
.etoiles svg { width: 1em; height: 1em; }

@media (min-width: 62rem) {
  .hero__media { margin-left: 34%; }
  .hero__media::after { background: var(--voile-cote); }
  .hero__media img { object-position: 60% 62%; }
  .hero__contenu { justify-content: center; padding-block: var(--e-8); }
  .hero__note { align-self: end; margin-block: 0 var(--e-8); padding: var(--e-4) var(--e-5); font-size: var(--t-sm); }
}

/* ---------- 7. Bandeau ----------
   Reprend le bandeau or du logo. Seul element en mouvement continu de la page. */
.bandeau {
  position: relative; overflow: hidden;
  background: var(--or); color: var(--noir-blason);
  padding-block: var(--e-3);
}
.bandeau__piste { display: flex; width: max-content; }
.bandeau__groupe { display: flex; flex: none; }
.bandeau__groupe li {
  display: inline-flex; align-items: center; gap: var(--e-5);
  padding-inline-end: var(--e-5);
  font-family: var(--display); font-weight: 800; font-size: var(--t-md);
  letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap;
}
/* Le losange du tampon maison, en noir, comme separateur. */
.bandeau__groupe li::after {
  content: ""; width: .45em; height: .45em; flex: none;
  background: var(--noir-blason); transform: rotate(45deg);
}

/* ---------- 8. Specialites ----------
   Grille en mosaique, 4 plats, 4 cellules :
   la vedette tient deux rangees a gauche, deux plats s'empilent a droite,
   le 5 Etoiles ferme la grille sur toute la largeur, photo et texte cote a cote. */
.specialites { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
.plat {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 25rem; border-radius: var(--r); background: var(--surface);
}
.plat__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.plat__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1100ms var(--ressort), filter var(--duree-moy) var(--courbe);
}
.plat__media::after { content: ""; position: absolute; inset: 0; background: var(--voile-carte); transition: opacity var(--duree-moy) var(--courbe); }
.plat__texte { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
.plat__nom { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.plat h3 { font-size: var(--t-lg); }
.plat--vedette h3 { font-size: var(--t-xl); }
.plat__prix {
  flex: none; background: var(--or); color: var(--noir-blason);
  font-weight: 700; font-size: var(--t-sm); padding: .15em .55em; border-radius: var(--r);
  transition: transform var(--duree-moy) var(--ressort);
}
.plat p { color: rgba(244, 244, 244, .82); font-size: var(--t-sm); margin: 0; max-width: 56ch; }
.plat .maison { vertical-align: .1em; }
/* Filet or qui se trace sous le texte au survol. */
.plat__texte::before {
  content: ""; height: 2px; width: 3rem; background: var(--or); margin-bottom: var(--e-2);
  transform: scaleX(.35); transform-origin: left; transition: transform var(--duree-moy) var(--ressort);
}
.plat:hover .plat__texte::before { transform: scaleX(1); }
.plat:hover .plat__prix { transform: translateY(-3px); }

/* Le 5 Etoiles : photo et texte cote a cote, sur la surface, pour casser
   le rythme des trois cartes en surimpression. */
.plat--etoiles .plat__media::after { opacity: .9; }

@media (min-width: 48rem) {
  .specialites { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(19rem, auto); gap: var(--e-4); }
  .plat { min-height: 0; }
  .plat--vedette { grid-column: 1 / 8; grid-row: 1 / 3; }
  .plat--gratine { grid-column: 8 / 13; grid-row: 1; }
  .plat--fries   { grid-column: 8 / 13; grid-row: 2; }
  .plat--etoiles { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 7fr 5fr; }
  .plat--etoiles .plat__media { position: relative; inset: auto; z-index: auto; min-height: 21rem; }
  .plat--etoiles .plat__media::after { opacity: 0; }
  .plat--etoiles .plat__texte { justify-content: center; padding: var(--e-7) var(--e-6); }
  .plat--etoiles h3 { font-size: var(--t-xl); }
  .plat--etoiles p { color: var(--sourdine); font-size: var(--t-base); }
  .plat--vedette .plat__texte { padding: var(--e-6); }
  .plat--vedette p { font-size: var(--t-base); }
}
/* ---------- 9. Notre difference ----------
   Desktop : colonne de photos collante a gauche, trois preuves qui defilent a droite.
   La photo suit la preuve en cours de lecture (js/site.js).
   Mobile : chaque preuve porte sa photo, pas de colonne collante. */
.difference { display: grid; gap: var(--e-7); }
.difference__pile { display: none; }
.preuves { display: grid; gap: var(--e-7); }
.preuve { display: grid; gap: var(--e-4); }
.preuve__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.preuve .preuve__titre {
  font-family: var(--display); font-weight: 800; font-size: var(--t-lg);
  line-height: 1.08; letter-spacing: -.015em; color: var(--blanc); max-width: none;
  margin-bottom: var(--e-3);
}
.preuve p { color: var(--sourdine); margin: 0; }

@media (min-width: 62rem) {
  .difference { grid-template-columns: 5fr 6fr; gap: var(--e-9); align-items: start; }
  .difference__pile {
    display: block; position: sticky; top: calc(var(--entete-h) + var(--e-6));
    aspect-ratio: 4 / 5; max-height: calc(100vh - var(--entete-h) - 4rem);
    overflow: hidden; border-radius: var(--r); box-shadow: var(--ombre);
  }
  .difference__pile img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.08);
    transition: opacity var(--duree-lente) var(--courbe), transform 1400ms var(--ressort);
  }
  .difference__pile img.est-active { opacity: 1; transform: none; }
  .preuves { gap: 0; }
  .preuve__photo { display: none; }
  .preuve {
    min-height: 62vh; align-content: center;
    padding-left: var(--e-6); border-left: 2px solid var(--ligne);
    transition: border-color var(--duree-moy) var(--courbe), opacity var(--duree-moy) var(--courbe);
  }
  .preuve .preuve__titre { font-size: var(--t-xl); }
  .preuve p { font-size: var(--t-md); }
  /* La mise en retrait des preuves non lues n'existe qu'avec le JS qui les reactive. */
  .js .preuve { opacity: .3; }
  .js .preuve.est-active { opacity: 1; border-left-color: var(--or); }
}
.difference__delai {
  display: flex; align-items: baseline; gap: var(--e-4); max-width: none;
  margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--ligne);
}
.difference__delai b { font-family: var(--display); font-size: clamp(3.5rem, 2rem + 7vw, 8rem); color: var(--or); font-weight: 800; line-height: .85; letter-spacing: -.04em; min-width: 2ch; }
.difference__delai span { color: var(--blanc); font-size: var(--t-md); max-width: 46ch; }

/* ---------- 10. La carte ---------- */
.carte-grille { display: grid; gap: var(--e-7); }
@media (min-width: 62rem) {
  .carte-grille { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--e-8); align-items: start; }
}

/* Les panneaux de la carte, poses en eventail comme sur un comptoir. */
.panneaux { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.panneau { display: grid; gap: var(--e-3); text-decoration: none; color: var(--blanc); }
.panneau img {
  width: 100%; aspect-ratio: 450 / 639; object-fit: cover; border-radius: var(--r);
  box-shadow: var(--ombre);
  transition: transform var(--duree-moy) var(--ressort), box-shadow var(--duree-moy) var(--courbe);
}
.panneau__legende { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; font-size: var(--t-sm); min-height: 44px; }
.panneau__legende svg { width: 1.1em; height: 1.1em; color: var(--or); }
.panneau:hover { color: var(--or); }
.panneau:hover img { transform: translateY(-4px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.85), 0 0 0 1.5px var(--or); }
@media (min-width: 62rem) {
  .panneaux { position: sticky; top: calc(var(--entete-h) + var(--e-6)); padding-top: var(--e-4); }
  .panneau:first-child img { transform: rotate(-4deg) translate(10%, 2%); }
  .panneau:last-child img  { transform: rotate(5deg) translate(-10%, 8%); }
  .panneau:last-child .panneau__legende { margin-top: 8%; }
  .panneau:hover img { transform: rotate(0) translate(0, -4px) scale(1.04); position: relative; z-index: var(--z-dessus); }
}

.carte-avis {
  display: flex; gap: var(--e-3); align-items: flex-start; max-width: none;
  padding: var(--e-4) var(--e-5); margin-bottom: var(--e-5);
  background: var(--or-voile); border-inline-start: 2px solid var(--or); border-radius: var(--r);
  font-size: var(--t-sm); color: var(--blanc);
}
.carte-avis svg { flex: none; color: var(--or); }
.categories { display: grid; gap: var(--e-3); }
.categorie {
  background: var(--surface); border-radius: var(--r); border: 1px solid transparent;
  transition: border-color var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.categorie:hover { border-color: var(--ligne); }
.categorie[open] { background: var(--surface); border-color: var(--ligne); }
.categorie > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-4) var(--e-5); cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-size: var(--t-md);
  min-height: 60px; transition: color var(--duree) var(--courbe);
}
.categorie > summary::-webkit-details-marker { display: none; }
.categorie > summary:hover { color: var(--or); }
.categorie__chevron {
  flex: none; width: 2rem; height: 2rem; padding: .45rem; color: var(--or);
  border: 1.5px solid var(--ligne-forte); border-radius: var(--r);
  transition: transform var(--duree-moy) var(--ressort), border-color var(--duree) var(--courbe);
}
.categorie[open] .categorie__chevron { transform: rotate(180deg); border-color: var(--or); }
.categorie__corps { padding: 0 var(--e-5) var(--e-5); }
.lignes { display: grid; gap: var(--e-1); }
.ligne { display: grid; grid-template-columns: 1fr auto; gap: var(--e-3); align-items: baseline; padding-block: var(--e-2); }
.ligne + .ligne { border-top: 1px solid var(--ligne); }
.ligne__nom { font-weight: 600; }
.ligne__compo { display: block; color: var(--sourdine); font-size: var(--t-sm); font-weight: 400; }
.ligne__prix { color: var(--or); font-weight: 700; white-space: nowrap; }
.note-carte { color: var(--sourdine); font-size: var(--t-sm); margin-top: var(--e-3); }
.jetons { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.jeton { font-size: var(--t-xs); color: var(--blanc); background: var(--surface-haute); border-radius: var(--r); padding: .28em .65em; }

/* ---------- 11. L'histoire ---------- */
.histoire { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 56rem) { .histoire { grid-template-columns: 1fr 1fr; gap: var(--e-9); } }
.histoire__media { position: relative; overflow: hidden; border-radius: var(--r); box-shadow: var(--ombre); }
.histoire__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 56rem) { .histoire__media img { aspect-ratio: 4 / 5; } }
.histoire__texte h2 { font-size: var(--t-xl); margin-bottom: var(--e-5); }
.histoire__texte p { color: var(--blanc); }
.histoire__texte p + p { margin-top: var(--e-4); }
.histoire__signature { margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid var(--ligne); color: var(--sourdine); font-size: var(--t-sm); }

/* ---------- 12. Avis ----------
   Pas de faux temoignages : on affiche la note verifiable, le classement
   local, et les themes qui reviennent dans les avis. Les vraies citations
   viendront s'inserer dans .themes quand le client les aura fournies. */
.preuve-sociale { display: grid; gap: var(--e-7); align-items: start; }
@media (min-width: 56rem) { .preuve-sociale { grid-template-columns: auto 1fr; gap: var(--e-10); } }

.note { display: grid; justify-items: start; gap: var(--e-3); }
.note__chiffre { display: flex; align-items: baseline; gap: var(--e-2); margin: 0; }
.note__chiffre b { font-family: var(--display); font-weight: 800; font-size: clamp(4.5rem, 3rem + 6vw, 8.5rem); color: var(--or); line-height: .8; letter-spacing: -.04em; }
.note__chiffre span { color: var(--sourdine); font-size: var(--t-md); }
.etoiles--grandes { margin: 0; }
.etoiles--grandes svg { width: 1.5rem; height: 1.5rem; }
.note__base { margin: 0; color: var(--blanc); font-size: var(--t-sm); font-weight: 600; }
.note__rang { margin: 0; color: var(--sourdine); font-size: var(--t-sm); max-width: 22ch; }
.note .btn { margin-top: var(--e-3); }

.themes { display: grid; gap: 0; }
.theme {
  display: grid; gap: var(--e-2); padding-block: var(--e-6); border-top: 1px solid var(--ligne);
  transition: border-color var(--duree-moy) var(--courbe);
}
.theme:first-child { border-top: 0; padding-top: 0; }
.theme:last-child { padding-bottom: 0; }
/* Specificite : .theme p vaut 0,1,1 et ecraserait un simple .theme__titre
   a 0,1,0. On qualifie donc le selecteur pour passer a 0,2,0. */
.theme .theme__titre {
  font-family: var(--display); font-weight: 800; font-size: var(--t-xl);
  color: var(--blanc); margin: 0; letter-spacing: -.02em;
  transition: color var(--duree) var(--courbe);
}
.theme:hover .theme__titre { color: var(--or); }
.theme p { color: var(--sourdine); margin: 0; max-width: 58ch; font-size: var(--t-md); }

/* ---------- 13. Commander ---------- */
.section--commander {
  background:
    radial-gradient(60rem 30rem at 50% 0%, var(--or-voile), transparent 70%),
    var(--charbon);
}
.commander { text-align: center; }
.commander h2 { font-size: var(--t-xl); }
.commander__tel {
  display: inline-block; margin: var(--e-5) 0 var(--e-4);
  font-family: var(--display); font-weight: 800; font-size: var(--t-tel);
  color: var(--or); text-decoration: none; letter-spacing: -.03em; line-height: 1.05;
  /* Soulignement or trace au survol, sans decaler la mise en page. */
  background: linear-gradient(var(--or), var(--or)) 0 100% / 0 4px no-repeat;
  transition: background-size var(--duree-moy) var(--ressort), color var(--duree) var(--courbe);
}
.commander__tel:hover { color: var(--or); background-size: 100% 4px; }
.commander__jours { color: var(--sourdine); margin-inline: auto; }
.modes { display: grid; gap: var(--e-4); margin-top: var(--e-8); text-align: start; }
@media (min-width: 48rem) { .modes { grid-template-columns: repeat(3, 1fr); } }
.mode {
  padding: var(--e-5); border-radius: var(--r);
  background: rgba(28, 28, 31, .7); border: 1px solid var(--ligne);
  transition: border-color var(--duree-moy) var(--courbe), transform var(--duree-moy) var(--ressort);
}
.mode:hover { border-color: var(--or); transform: translateY(-4px); }
.mode svg { width: 28px; height: 28px; color: var(--or); margin-bottom: var(--e-4); }
.mode h3 { font-size: var(--t-md); margin-bottom: var(--e-2); }
.mode p { color: var(--sourdine); font-size: var(--t-sm); margin: 0; }
.mode__fort { color: var(--or); }

/* ---------- 14. Infos pratiques ---------- */
.infos { display: grid; gap: var(--e-7); align-items: start; }
@media (min-width: 56rem) { .infos { grid-template-columns: 1fr 1fr; gap: var(--e-8); } }
.horaires { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.horaires caption { text-align: start; font-family: var(--display); font-weight: 700; font-size: var(--t-md); padding-bottom: var(--e-3); }
.horaires th, .horaires td { text-align: start; padding: var(--e-3) var(--e-2); border-top: 1px solid var(--ligne); vertical-align: baseline; }
.horaires th { font-weight: 600; width: 8.5rem; }
.horaires td { color: var(--sourdine); }
.horaires tr[data-aujourdhui] { background: var(--or-voile); }
.horaires tr[data-aujourdhui] th, .horaires tr[data-aujourdhui] td { color: var(--or); font-weight: 700; }
.horaires .ferme { color: var(--sourdine); }
.infos__bloc { margin-top: var(--e-6); padding-top: var(--e-6); border-top: 1px solid var(--ligne); }
.infos h3 { font-size: var(--t-md); margin-bottom: var(--e-3); }
.infos__texte { color: var(--sourdine); }
.adresse { font-style: normal; color: var(--blanc); }
/* Action autonome, pas un lien dans une phrase : cible tactile pleine. */
.adresse a { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--e-2); }
.plan { position: relative; aspect-ratio: 4 / 3; background: var(--surface); border-radius: var(--r); overflow: hidden; }
.plan iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plan__amorce {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--e-4);
  background:
    repeating-linear-gradient(135deg, rgba(224,196,64,.035) 0 2px, transparent 2px 14px),
    var(--surface);
  color: var(--blanc); cursor: pointer;
  border: 1px solid var(--ligne); border-radius: var(--r); font-family: var(--texte);
  font-size: var(--t-sm); padding: var(--e-5); text-align: center; width: 100%;
  transition: border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.plan__amorce svg { color: var(--or); transition: transform var(--duree-moy) var(--ressort); }
.plan__amorce:hover { border-color: var(--or); color: var(--or); }
.plan__amorce:hover svg { transform: translateY(-4px); }
.plan__amorce small { color: var(--sourdine); font-size: var(--t-xs); max-width: 30ch; }

/* ---------- 15. Footer ---------- */
.pied { border-top: 1px solid var(--ligne); padding-block: var(--e-8) var(--e-6); font-size: var(--t-sm); }
.pied__grille { display: grid; gap: var(--e-6); }
@media (min-width: 48rem) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e-7); } }
.pied__logo img { height: 58px; width: auto; margin-bottom: var(--e-4); }
.pied h2 { font-family: var(--texte); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sourdine); margin-bottom: var(--e-3); }
.pied address { font-style: normal; color: var(--sourdine); }
.pied a { color: var(--blanc); text-decoration: none; }
.pied a:hover { color: var(--or); text-decoration: underline; }
.pied li + li { margin-top: var(--e-2); }
.pied__bas { margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--ligne); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); align-items: center; color: var(--sourdine); font-size: var(--t-xs); }

/* ---------- 16. Pages legales ---------- */
.legal { padding-block: var(--section-y); }
.legal__contenu { max-width: 46rem; }
.legal h1 { font-size: var(--t-xl); margin-bottom: var(--e-6); }
.legal h2 { font-size: var(--t-md); margin: var(--e-7) 0 var(--e-3); }
.legal p, .legal li { color: var(--blanc); }
.legal ul { margin: 0 0 var(--e-4); padding-inline-start: var(--e-5); list-style: disc; }
.legal li { margin-bottom: var(--e-2); }
.legal dl { display: grid; gap: var(--e-2) var(--e-5); margin: 0 0 var(--e-4); }
@media (min-width: 40rem) { .legal dl { grid-template-columns: 13rem 1fr; } }
.legal dt { color: var(--sourdine); }
.legal dd { margin: 0; }
.retour { display: inline-block; margin-bottom: var(--e-6); color: var(--sourdine); text-decoration: none; font-size: var(--t-sm); }
.retour:hover { color: var(--or); }

/* ---------- 17. Visionneuse des panneaux ---------- */
.visionneuse {
  padding: 0; border: 0; background: transparent; overflow: visible;
  max-width: min(92vw, 40rem); max-height: 92vh;
}
.visionneuse::backdrop { background: rgba(8, 8, 10, .88); }
@supports (backdrop-filter: blur(4px)) { .visionneuse::backdrop { backdrop-filter: blur(6px); } }
.visionneuse__image { width: auto; max-width: 100%; max-height: 88vh; border-radius: var(--r); box-shadow: var(--ombre); }
.visionneuse__fermer {
  position: absolute; top: calc(-1 * var(--e-3)); right: calc(-1 * var(--e-3)); z-index: var(--z-dessus);
  display: grid; place-items: center; width: 48px; height: 48px; cursor: pointer;
  background: var(--or); color: var(--noir-blason); border: 0; border-radius: var(--r);
  transition: transform var(--duree) var(--courbe);
}
.visionneuse__fermer:hover { transform: rotate(90deg); }
.visionneuse__fermer svg { width: 22px; height: 22px; }

/* ---------- 18. Mouvement ----------
   Ce que bouge la page, et pourquoi :
   - l'arrivee du hero, ligne par ligne : les trois promesses se lisent dans l'ordre ;
   - la revelation des blocs a l'arrivee : hierarchie de lecture ;
   - la photo collante de "Notre difference" : elle suit la preuve lue ;
   - le bandeau or : seul mouvement continu, il porte les engagements ;
   - les compteurs de la note et du delai : ils attirent l'oeil sur la preuve chiffree ;
   - les survols et appuis : retour d'action.
   Tout ce qui suit est coupe par prefers-reduced-motion. Sans JS, rien ne reste cache. */
@keyframes lecture   { to { transform: scaleX(1); } }
@keyframes monter    { from { transform: translateY(108%); } to { transform: none; } }
@keyframes apparaitre { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes poser     { from { clip-path: inset(6% 6% 6% 6%); transform: scale(1.14); } to { clip-path: inset(0); transform: none; } }
@keyframes defiler   { to { transform: translateX(-50%); } }
@keyframes deplier   { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes zoomer    { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes eloigner  { to { transform: translateY(14%) scale(1.04); } }
@keyframes pulser    { 0% { box-shadow: 0 0 0 0 var(--or-lueur); } 70%, 100% { box-shadow: 0 0 0 7px rgba(224,196,64,0); } }
@keyframes reflet    { to { transform: translateX(110%); } }
@keyframes briller   { from { opacity: 0; transform: scale(.4) rotate(-30deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {

  /* Hero : la photo se pose, puis les trois lignes montent, puis le reste. */
  .hero__media img { animation: poser 1600ms var(--ressort) both; }
  .titre-ligne > span { animation: monter var(--duree-lente) var(--ressort) both; animation-delay: calc(180ms + var(--i) * 120ms); }
  .hero__sous    { animation: apparaitre 800ms var(--ressort) 560ms both; }
  .hero__actions { animation: apparaitre 800ms var(--ressort) 680ms both; }
  .hero__note    { animation: apparaitre 800ms var(--ressort) 900ms both; }

  /* La photo du hero s'eloigne doucement quand on quitte le haut de page. */
  @supports (animation-timeline: view()) {
    .hero__media { animation: eloigner linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }

  /* Bandeau des engagements. S'arrete au survol pour qui veut le lire. */
  .bandeau__piste { animation: defiler 36s linear infinite; }
  .bandeau:hover .bandeau__piste { animation-play-state: paused; }

  /* Reflet sur le bouton principal. */
  .btn--or:hover::after { animation: reflet 700ms var(--courbe); }

  /* Point d'etat ouvert : une pulsation, parce que l'information est vivante. */
  .etat--ouvert .etat__point { animation: pulser 2.4s var(--courbe) infinite; }

  /* Revelation a l'arrivee. Le decalage --i est pose par js/site.js
     pour que les blocs d'une meme rangee arrivent l'un apres l'autre. */
  .js .reveler {
    opacity: 0; transform: translateY(32px);
    transition: opacity 800ms var(--ressort), transform 1000ms var(--ressort);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js .reveler.est-visible { opacity: 1; transform: none; }

  /* Les photos des plats arrivent legerement zoomees et se posent. */
  .js .plat.reveler .plat__media img { transform: scale(1.14); }
  .js .plat.reveler.est-visible .plat__media img { transform: none; }
  @media (hover: hover) {
    .js .plat.reveler.est-visible:hover .plat__media img { transform: scale(1.06); }
  }

  /* Photo de l'histoire : rideau qui s'ouvre de gauche a droite. */
  .js .rideau img {
    clip-path: inset(0 100% 0 0); transform: scale(1.12);
    transition: clip-path 1300ms var(--ressort), transform 1800ms var(--ressort);
  }
  .js .rideau.est-visible img { clip-path: inset(0); transform: none; }

  /* Etoiles de la note : elles s'allument l'une apres l'autre. */
  .js .note .etoiles--grandes svg { opacity: 0; }
  .js .note.est-visible .etoiles--grandes svg { animation: briller 600ms var(--ressort) both; }
  .js .note.est-visible .etoiles--grandes svg:nth-child(2) { animation-delay: 90ms; }
  .js .note.est-visible .etoiles--grandes svg:nth-child(3) { animation-delay: 180ms; }
  .js .note.est-visible .etoiles--grandes svg:nth-child(4) { animation-delay: 270ms; }
  .js .note.est-visible .etoiles--grandes svg:nth-child(5) { animation-delay: 360ms; }

  /* Ouverture des categories de la carte : la hauteur s'anime au lieu de sauter.
     Navigateurs recents seulement ; les autres ouvrent sans transition. */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .categorie::details-content {
      block-size: 0; overflow: clip;
      transition: block-size var(--duree-moy) var(--ressort), content-visibility var(--duree-moy) allow-discrete;
    }
    .categorie[open]::details-content { block-size: auto; }
  }

  .visionneuse[open] { animation: zoomer var(--duree-moy) var(--ressort); }
}

@media print {
  .entete, .plan, .hero__actions, .btn, .bandeau, .panneaux, .difference__pile { display: none; }
  body { background: #fff; color: #000; }
}