/* =============================================================================
   Le 9 · Restaurant du Golf du Brésil
   base.css — socle commun à toutes les pages
   -----------------------------------------------------------------------------
   Toutes les couleurs sont des variables. Pour essayer une palette, ne toucher
   que le bloc :root ci-dessous.
   ============================================================================= */

:root {
  /* --- Palette (issue du logo Le 9 : vert de golf et crème) ---
     Elle était juste, mais éteinte : un crème un peu gris, un vert rabattu et
     un laiton sourd donnaient une page qui avait l'air délavée. Les mêmes
     couleurs, tenues plus franchement. */
  --c-cream:      #f7f1e1;   /* fond principal, plus chaud */
  --c-cream-2:    #efe6cf;   /* fond alterné, cadres */
  --c-cream-3:    #d6c7a4;   /* filets sur crème */
  --c-green:      #14563a;   /* vert principal : titres, boutons */
  /* TROIS PROFONDEURS, ET PAS DEUX.

     Les bandeaux sombres du fil de la page et le pied portaient exactement le
     même vert. Sur trois pages sur cinq, la dernière section était sombre : on
     ne voyait plus où la page finissait et où le pied commençait, et le pied
     avait l'air de faire huit cents pixels. Un filet d'un pixel ne suffit pas
     à couper un aplat.

     La page a donc trois sols : le crème, le panneau vert qui s'y pose, et le
     socle — le plus profond, réservé à ce qui n'est plus la page : le pied, le
     menu du téléphone, la barre d'appel. */
  --c-green-dark: #123f2c;   /* panneaux sombres dans le fil de la page */
  --c-green-deep: #071e14;   /* le socle : pied, menu, barre d'appel */
  --c-green-mid:  #2a7250;   /* vert intermédiaire */
  --c-sage:       #6f9c78;   /* vert doux, dessins sur crème */
  --c-ink:        #12241b;   /* texte courant sur crème */
  --c-ink-soft:   #4c5c51;   /* texte secondaire sur crème */

  /* LE LAITON A DEUX VALEURS, ET C'EST LA SURFACE QUI CHOISIT.

     Un or unique ne peut pas être lisible sur les deux fonds : celui qui brille
     sur le vert profond disparaît sur le crème, et l'inverse. L'ancien tenait
     le milieu et ne tenait donc ni l'un ni l'autre — 2,7 contre 1 sur le crème,
     c'est-à-dire illisible pour les libellés en capitales.

     Sur crème, un or profond, cuivré ; sur vert, un or franc. Le premier passe
     le seuil de lisibilité (4,6 contre 1), le second largement (6,8). */
  /* Le crème et le socle en composantes : tous les voiles translucides de la
     page en découlent, au lieu de répéter des valeurs qui ne suivaient plus la
     palette quand elle changeait. */
  --cr: 247 241 225;
  --vd: 7 30 20;

  --c-brass:      #8c5c17;   /* laiton sur crème : libellés, prix, filets */
  --c-brass-vif:  #d8a63f;   /* laiton sur vert profond */

  /* --- Rôles --- */
  --bg:        var(--c-cream);
  --bg-2:      var(--c-cream-2);
  --fg:        var(--c-ink);
  --fg-strong: var(--c-green);
  --fg-soft:   var(--c-ink-soft);
  --line:      var(--c-cream-3);
  --accent:    var(--c-brass);
  --btn-bg:    var(--c-green);
  --btn-fg:    var(--c-cream);

  /* --- Dessins en fond : une seule couleur, une seule opacité ---
     Assez présents pour se voir, assez discrets pour rester du décor.
     Baisser --illu-opacity pour les estomper, la monter pour les affirmer.
     À .58 ils étaient à la limite du visible et la page paraissait vide. */
  --illu:         var(--c-green-deep);
  --illu-opacity: .78;

  /* --- Typographie ---
     Le site est pensé pour le téléphone d'abord. Rien n'y descend sous 12 px,
     et les libellés en capitales espacées, les plus durs à lire, sont les
     premiers servis. Les tailles montent ensuite avec l'écran. */
  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans:  "Manrope", "Helvetica Neue", Arial, sans-serif;

  --fs-micro: .75rem;   /* 12 px — libellés en capitales espacées */
  --fs-mini:  .8125rem; /* 13 px — mentions, notes */
  --fs-sm:    .9375rem; /* 15 px — texte secondaire */
  --fs-base:  1.0625rem;/* 17 px — texte courant */

  /* Hauteur minimale d'une cible tactile. En dessous, on vise mal. */
  --cible: 44px;

  /* --- Mouvement ---
     Une pose longue et molle : c'est ce qui sépare une page qui se pose d'une
     page qui s'affiche. La courbe est une approximation de expo.out, dont
     l'essentiel du déplacement se fait dans le premier tiers. */
  --dur-pose:  1.9s;
  --dur-vif:   .22s;
  --expo:      cubic-bezier(.16, 1, .3, 1);
  --montee:    1.4rem;
  --retard-vu: .05s;

  /* --- Mesures --- */
  --wrap:    1240px;
  --wrap-sm: 900px;
  --pad:     clamp(1.25rem, 4vw, 3.5rem);
  --head-h:  74px;
  --r:       4px;
}

/* Au doigt, la typographie monte d'un cran : un libellé en capitales espacées
   de 12 px se lit devant un écran d'ordinateur, pas dans le métro. */
@media (max-width: 699px) {
  :root {
    --fs-micro: .8125rem; /* 13 px */
    --fs-mini:  .875rem;  /* 14 px */
    --fs-sm:    1rem;     /* 16 px */
  }
}

/* L'en-tête et la barre d'appel sont posés en permanence sur l'écran. À 74 px
   plus 56 px, ils mangeaient un cinquième d'un téléphone de 640 px de haut :
   la page était lue par une fente. L'en-tête se resserre donc là où il colle,
   c'est-à-dire partout où la navigation passe par le bouton. */
@media (max-width: 1080px) {
  :root { --head-h: 60px; }
}

/* Zones sombres : seuls les rôles changent. Elles se posent sur le vert de
   section — le socle est réservé au pied, au menu et à la barre d'appel. */
.dark {
  --bg:        var(--c-green-dark);
  --bg-2:      rgba(255,255,255,.045);
  --fg:        var(--c-cream);
  --fg-strong: var(--c-cream);
  --fg-soft:   rgb(var(--cr) / .62);
  --line:      rgba(247,241,225,.18);
  --btn-bg:    var(--c-cream);
  --btn-fg:    var(--c-green-deep);
  /* Sur le vert profond, c'est l'or franc qui prend le relais du laiton cuivré :
     il y est lisible là où l'autre s'éteint. */
  --accent:    var(--c-brass-vif);
  --illu:      var(--c-cream);
  --illu-opacity: .48;
  background: var(--bg);
  color: var(--fg);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1rem);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2, h3, h4 {
  margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.05;
  color: var(--fg-strong);
  /* Le navigateur répartit les mots sur les lignes plutôt que de laisser un
     orphelin en bas d'un titre. */
  text-wrap: balance;
}
p { margin: 0 0 1.15em; text-wrap: pretty; }
/* Les titres n'ont pas de marge propre : c'est ce qui suit qui prend ses
   distances. Sans cette règle, « La table » et sa première phrase se touchaient
   à toutes les tailles, et l'ensemble se lisait comme un seul bloc. */
:is(h1, h2, h3, h4) + p,
:is(h1, h2, h3, h4) + address,
:is(h1, h2, h3, h4) + ul,
:is(h1, h2, h3, h4) + .lead { margin-top: .8em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--c-brass); color: var(--c-cream); }
/* Ce que le navigateur dessine à notre place appartient aussi à la maison :
   le curseur de saisie, la barre de défilement, les cases à cocher. Laissés
   par défaut, ce sont eux qui trahissent une page assemblée. */
:root { accent-color: var(--c-green); scrollbar-color: var(--c-cream-3) transparent; }
input, textarea { caret-color: var(--c-green); }
.dark input, .dark textarea { caret-color: var(--c-cream); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Des dessins débordent volontairement des bords. La coupe est posée sur les
   sections qui les portent, et non sur la page entière : sur l'élément racine,
   la valeur est propagée à la fenêtre et n'y coupe rien, la page glissait donc
   de quelques dizaines de pixels vers la droite. `clip` plutôt que `hidden` :
   il ne crée pas de conteneur de défilement, et l'en-tête collant continue de
   coller. */
.sect, .foot, .menu-page, .rest-top, .rest-band, .home-hero, .ct-top, .terr-hero {
  /* `position: relative` autant que la coupe : un dessin est en positionnement
     absolu, et une section ne le coupe que si elle est son bloc conteneur,
     c'est-à-dire si elle est elle-même positionnée. */
  position: relative;
  overflow-x: clip;
}

/* ---------- Grille ---------- */
.wrap    { width: min(100% - 2*var(--pad), var(--wrap)); margin-inline: auto; }
.wrap-sm { width: min(100% - 2*var(--pad), var(--wrap-sm)); margin-inline: auto; }
.bleed   { width: min(100% - 2*var(--pad), 1600px); margin-inline: auto; }
.sect    { position: relative; padding-block: clamp(3.25rem, 9vw, 8rem); }
.sect > * { position: relative; z-index: 1; }

/* ---------- Typographie ---------- */
/* Il y avait un sur-titre en capitales dorées au-dessus de chaque titre :
   « Bienvenue au 9 » sur « Trois raisons de pousser la porte », « Horaires »
   sur « Quand nous trouver », « La carte » sur « Ce que la cuisine propose ».
   Aucun ne disait ce que son titre ne disait pas, et le petit filet doré
   au-dessus d'un grand serif est la signature des gabarits. Ils sont retirés :
   le titre porte sa propre annonce.

   LES TITRES
   ---------- */
.t-hero { font-size: clamp(2.8rem, 7vw, 5.6rem); letter-spacing: -.015em; }
.t-1    { font-size: clamp(2.3rem, 5vw, 4rem);   letter-spacing: -.012em; }
.t-2    { font-size: clamp(1.75rem, 3vw, 2.6rem); letter-spacing: -.008em; }
.t-3    { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.lead   { font-size: clamp(1.1rem, 1.4vw, 1.28rem); line-height: 1.55; color: var(--fg-soft); }
.soft   { color: var(--fg-soft); }
.sm     { font-size: var(--fs-sm); }
.xs     { font-size: var(--fs-mini); }
.serif  { font-family: var(--serif); }
.center { text-align: center; }
.rule   { height: 1px; background: var(--line); border: 0; margin: 0; }
/* Une coupure de ligne voulue sur grand écran, qui laisserait un mot orphelin
   sur un téléphone : on la laisse au texte de se placer. */
@media (max-width: 699px) { .br-lg { display: none; } }

/* ---------- Boutons et liens ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem; border-radius: 999px; text-decoration: none;
  font: 600 var(--fs-mini)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg);
  transition: transform .2s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
/* Au doigt, un bouton d'action tient la largeur de la colonne. Il était calé
   sur la longueur de son libellé : « Réserver » et « Appeler le 021 882 24 19 »
   n'avaient alors ni la même taille ni la même place dans la page, alors que
   c'est le même geste. */
@media (max-width: 560px) {
  .btn { display: flex; width: 100%; padding-inline: 1.2rem; min-height: 54px; }
}
.btn--line { background: none; color: var(--fg-strong); border-color: currentColor; }
.btn--line:hover { background: var(--fg-strong); color: var(--bg); }
.btn svg { width: 15px; height: 15px; }

.alink {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  font: 600 var(--fs-mini)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-strong); padding-bottom: .35rem; border-bottom: 1px solid currentColor;
}
.alink::after { content: "→"; transition: transform .2s; }
.alink:hover::after { transform: translateX(5px); }

/* ---------- Dessins dispersés ----------
   Un seul mécanisme : masque + couleur. Marche pour SVG et PNG transparent. */
.illu {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: var(--w, 140px); aspect-ratio: var(--ar, 1);
  left: var(--x, 0); top: var(--y, 0);
  /* --x place le dessin par rapport à la fenêtre.
     data-side="l" ou "r" l'accroche au contraire au bord de la colonne de
     texte : il déborde alors toujours de --in pixels sur le contenu, quelle
     que soit la largeur de l'écran, au lieu de rentrer dedans quand la fenêtre
     rétrécit. C'est ce qui permet de les laisser mordre le bord de page. */
  transform: rotate(var(--r, 0deg));
  background-color: var(--illu); opacity: var(--illu-opacity);
  -webkit-mask: var(--src) center/contain no-repeat;
          mask: var(--src) center/contain no-repeat;
}
/* UN DESSIN ACCROCHÉ AU BORD NE SORT JAMAIS DE L'ÉCRAN.

   Il était posé à « la marge moins sa largeur » : dès que la marge était plus
   étroite que lui, il passait derrière le bord de la fenêtre. Sur une page de
   1240 px de contenu, la marge fait vingt pixels à 1280 et cent à 1440 —
   autrement dit, entre 1280 et 1600 px, TOUS les dessins du site étaient
   rognés, de trente à cent quatre-vingts pixels chacun.

   Ils sont maintenant collés au bord de la fenêtre, et c'est leur LARGEUR qui
   cède : elle ne dépasse jamais la marge disponible. Sous 1440 px cette marge
   ne laisserait plus qu'un timbre — ils ne s'affichent pas, et ce sont les
   dessins posés dans le flux, au-dessus des titres, qui tiennent la page. */
.illu[data-side] {
  --marge: max(var(--pad), calc(50vw - var(--wrap) / 2));
  /* Un dessin est penché : sa boîte est plus large que lui d'un cinquième de
     sa largeur de chaque côté — jusqu'à dix-huit pour cent pour le sac de
     golf, qui est le plus haut et le plus incliné. L'écart au bord et la
     largeur sont calculés ensemble pour que le tout tienne dans la marge. */
  --l: min(var(--w, 140px), calc((var(--marge) - 10px) / 1.42));
  width: var(--l);
}
.illu[data-side="l"] { left: calc(var(--l) * .2 + 4px); }
.illu[data-side="r"] { left: auto; right: calc(var(--l) * .2 + 4px); }
@media (max-width: 1439px) { .illu[data-side] { display: none; } }

.i-assiette { --src: url("../assets/illustrations/dist/assiette-couverts.svg");  --ar: 485/349; }
.i-bouteille{ --src: url("../assets/illustrations/dist/bouteille-verre.svg");    --ar: 429/593; }
.i-chef     { --src: url("../assets/illustrations/dist/chef-cloche.svg");        --ar: 390/398; }
.i-clubs    { --src: url("../assets/illustrations/dist/clubs-croises.svg");      --ar: 506/538; }
.i-golfeur  { --src: url("../assets/illustrations/dist/golfeur-silhouette.svg"); --ar: 255/453; }
.i-swing    { --src: url("../assets/illustrations/dist/golfeur-vintage.svg");    --ar: 299/518; }
.i-table    { --src: url("../assets/illustrations/dist/table-terrasse.svg");          --ar: 492/508; }
.i-sac      { --src: url("../assets/illustrations/dist/sac-golf.svg");                --ar: 310/786; }
.i-trait    { --src: url("../assets/illustrations/dist/golfeur-trait.svg");           --ar: 273/428; }

@media (max-width: 1180px) { .illu[data-hide~="lg"] { display: none; } }
@media (max-width: 860px)  { .illu[data-hide~="md"] { display: none; } }
@media (max-width: 620px) {
  .illu { width: calc(var(--w, 140px) * .55); left: var(--mx, var(--x, 0)); top: var(--my, var(--y, 0)); }
  .illu[data-hide~="sm"] { display: none; }
}

/* Le sceau Le 9. Affiché en masque : il prend la couleur du contexte, comme les
   dessins, et reste net à toutes les tailles. */
.seal {
  width: var(--w, 200px); aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask: url("../assets/logo/le9.svg") center/contain no-repeat;
          mask: url("../assets/logo/le9.svg") center/contain no-repeat;
}

/* UN DESSIN EN VIGNETTE, DANS LE FLUX, au-dessus d'un titre de section.

   C'est le seul des deux dispositifs qui tienne à toutes les tailles : posé
   dans le flux, il ne peut ni sortir de l'écran ni passer sur un mot. En
   dessous de 1440 px, où les dessins de marge ne s'affichent plus, c'est lui
   qui porte les dessins de la maison — deux par page, pas plus. */
.mark {
  width: var(--w, 62px); aspect-ratio: var(--ar, 1); margin-bottom: 1.4rem;
  background-color: var(--accent); opacity: .85;
  -webkit-mask: var(--src) center/contain no-repeat; mask: var(--src) center/contain no-repeat;
}

/* ---------- En-tête ---------- */
/* Lu par les lecteurs d'écran et les moteurs, invisible à l'œil. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-green); color: var(--c-cream); padding: .8rem 1.2rem;
}
.skip:focus { left: .5rem; top: .5rem; }

/* L'EN-TÊTE PREND LE TON DE CE QU'IL SURVOLE.

   Il était crème en toutes circonstances. Posé sur la carte, sur le bandeau
   d'accueil ou sur le pied de page — tous en vert profond — il y traçait une
   bande pâle qui se lisait comme un défaut d'affichage, et le plus souvent
   sur un téléphone, où il occupe un dixième de l'écran.

   Il ne connaît pas le contenu : c'est le script qui lui dit, à chaque
   défilement, s'il est au-dessus d'une zone sombre. Sans JavaScript il reste
   crème, comme avant. */
.head {
  position: sticky; top: 0; z-index: 60;
  --head-bg:   color-mix(in srgb, var(--c-cream) 92%, transparent);
  --head-fg:   var(--c-green);
  --head-fg-2: var(--c-ink-soft);
  --head-line: var(--c-cream-3);
  --head-accent: var(--c-brass);
  background: var(--head-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background-color .25s ease;
}
/* Deux fonds sombres, donc deux en-têtes sombres : posé sur un panneau de
   section avec la couleur du socle, il y traçait de nouveau une bande d'un
   autre vert. Le script dit lequel des deux passe dessous. */
.head[data-ton] {
  --head-fg:   var(--c-cream);
  --head-fg-2: rgb(var(--cr) / .72);
  --head-line: rgb(var(--cr) / .2);
  --head-accent: var(--c-brass-vif);
}
.head[data-ton="section"] { --head-bg: color-mix(in srgb, var(--c-green-dark) 92%, transparent); }
.head[data-ton="socle"]   { --head-bg: color-mix(in srgb, var(--c-green-deep) 92%, transparent); }
.head.is-stuck { border-bottom-color: var(--head-line); }
.head__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--head-h); }

.logo { display: flex; align-items: baseline; gap: .65rem; text-decoration: none; color: var(--head-fg); flex: none; }
.logo__n { font: 500 1.75rem/1 var(--serif); letter-spacing: -.02em; }
.logo__n i { font-style: italic; }
.logo__t { font: 600 var(--fs-micro)/1.3 var(--sans); letter-spacing: .17em; text-transform: uppercase; color: var(--head-fg-2); max-width: 9rem; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  text-decoration: none; color: var(--head-fg); padding-block: .35rem;
  font: 600 var(--fs-mini)/1 var(--sans); letter-spacing: .11em; text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--head-accent); }
.nav a[aria-current="page"] { border-bottom-color: var(--head-fg); }
.nav__tel {
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem;
  border: 1px solid var(--head-fg) !important; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nav__tel:hover { background: var(--head-fg); color: var(--head-bg); }
.nav__tel svg { width: 13px; height: 13px; }

.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--head-fg); flex: none; }
.burger svg { width: 24px; height: 24px; }
.burger .x { display: none; }
.burger[aria-expanded="true"] .m { display: none; }
.burger[aria-expanded="true"] .x { display: block; }

@media (max-width: 1080px) {
  .logo__t { display: none; }
  .burger { display: inline-flex; }
  .nav { display: none; }
}

/* ---------------------------------------------------------------------------
   LE MENU DU TÉLÉPHONE

   Un vrai <dialog> ouvert en modal : le navigateur se charge du piégeage du
   focus, de la touche Échap et du rôle de dialogue. C'est moins de code qu'une
   imitation, et un comportement plus juste.

   Il occupe tout l'écran, en vert profond, et les liens y sont composés dans
   le serif des titres, à la taille où on les lit sans viser. Ils arrivent l'un
   après l'autre, comme les dessins du premier écran.
   --------------------------------------------------------------------------- */
.mm {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0;
  overflow: auto; overscroll-behavior: contain;
  background: var(--c-green-deep); color: var(--c-cream);
}
/* `::backdrop` n'hérite pas des variables du document dans tous les
   navigateurs : la valeur est écrite en clair. C'est le socle à 96 %. */
.mm::backdrop { background: rgb(7 30 20 / .96); }
@media (min-width: 1081px) { .mm { display: none; } }

.mm__in {
  width: min(100% - 2 * var(--pad), var(--wrap));
  margin-inline: auto;
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: 100%;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.mm__haut {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--head-h); border-bottom: 1px solid rgb(var(--cr) / .16);
}
.mm__marque { font: 500 1.7rem/1 var(--serif); letter-spacing: -.02em; }
.mm__marque i { font-style: italic; }
.mm__fermer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-right: -.6rem; color: var(--c-cream);
}
.mm__fermer:focus-visible { outline: 2px solid var(--c-brass-vif); outline-offset: -4px; }

.mm__liens { display: grid; align-content: start; padding-block: clamp(1rem, 4vh, 2.5rem); }
.mm__lien {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: clamp(.9rem, 2.4vh, 1.3rem);
  border-bottom: 1px solid rgb(var(--cr) / .14);
  font: 500 clamp(1.9rem, 7.5vw, 2.6rem)/1.1 var(--serif);
  color: var(--c-cream); text-decoration: none;
}
.mm__lien svg { flex: none; color: var(--c-brass-vif); transition: transform .25s var(--expo); }
.mm__lien:active svg { transform: translateX(5px); }
.mm__lien[aria-current="page"] { color: var(--c-brass-vif); }

.mm__bas { display: grid; gap: .9rem; padding-top: 1.5rem; }
.mm__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 52px; padding: 0 1.4rem; border-radius: 999px;
  background: var(--c-cream); color: var(--c-green-deep); text-decoration: none;
  font: 600 var(--fs-mini)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.mm__adresse {
  margin: 0; text-align: center; font-size: var(--fs-sm); line-height: 1.6;
  color: rgb(var(--cr) / .6);
}

/* L'ouverture : le panneau monte, puis les liens arrivent l'un après l'autre.
   Rien de tout cela si le système demande un mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
  .mm[open] { animation: mm-entree .42s var(--expo); }
  .mm[open]::backdrop { animation: mm-fond .42s ease; }
  .mm[open] .mm__lien { animation: mm-lien .5s var(--expo) backwards; animation-delay: calc(120ms + var(--retard, 0ms)); }
  .mm[open] .mm__bas  { animation: mm-lien .5s var(--expo) backwards; animation-delay: 340ms; }
}
@keyframes mm-entree { from { transform: translateY(1.5rem); opacity: 0; } }
@keyframes mm-fond   { from { opacity: 0; } }
@keyframes mm-lien   { from { transform: translateY(.9rem); opacity: 0; } }

/* ---------------------------------------------------------------------------
   AU DOIGT/* ---------------------------------------------------------------------------
   AU DOIGT

   Un doigt vise moins bien qu'un curseur : au-dessous de 44 px de haut, on
   rate. Les liens de liste, les liens fléchés et les entrées de sommaire sont
   donc élargis là où le pointeur est grossier — sans rien changer là où l'on
   a une souris, où ces mêmes hauteurs seraient du vide.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
  a, button, summary { touch-action: manipulation; }

  .foot__col a,
  .err__tel a,
  .ct-links a,
  .alink,
  .nav a,
  .infobar__item,
  .strip__i {
    min-height: var(--cible);
  }
  .foot__col a, .ct-links a, .alink, .err__tel a {
    display: inline-flex; align-items: center;
  }
  /* Le sceau du pied et l'enseigne de l'en-tête sont des liens à part entière :
     on leur donne la même surface de frappe. */
  .logo { min-height: var(--cible); align-items: center; }
}

/* ---------- Photos et emplacements ----------
   Tant que le fichier n'existe pas, le cadre affiche son nom : on sait quoi
   déposer et où. Les emplacements marqués data-optional disparaissent. */
.ph {
  position: relative; margin: 0; overflow: hidden; background: var(--bg-2);
  aspect-ratio: var(--ar, 4/5); border-radius: var(--r);
}
.ph > picture { display: contents; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.ph__slot {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .3rem;
  padding: 1.5rem; text-align: center; color: var(--c-green); background: var(--bg-2);
  outline: 1px dashed var(--c-cream-3); outline-offset: -10px;
}
.dark .ph__slot { color: var(--c-cream); outline-color: rgb(var(--cr) / .25); }
.ph__slot svg { width: 26px; height: 26px; opacity: .55; margin-bottom: .3rem; }
.ph__slot b { font: 500 1.05rem/1.2 var(--serif); }
.ph__slot span { font-size: var(--fs-mini); opacity: .7; }
.ph__slot code { font-size: var(--fs-micro); opacity: .55; letter-spacing: .02em; }
.ph.ready .ph__slot { display: none; }
.ph--z:hover > img { transform: scale(1.04); }
.ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.2rem .9rem;
  background: linear-gradient(transparent, rgb(var(--vd) / .85)); color: var(--c-cream);
  font: 500 1.05rem/1.3 var(--serif); }

/* ---------------------------------------------------------------------------
   LE PIED DE PAGE

   Il tient en trois temps, comme celui de L'Étoile : l'enseigne et la phrase
   qui situe la maison, puis les coordonnées en colonnes à libellés, puis la
   mention légale. Deux filets séparent les trois.

   Il n'y a PAS de liste des pages. Elles sont dans l'en-tête, collé en haut de
   l'écran, et dans le menu du téléphone : une troisième copie au bas de la
   page n'apprend rien à personne, et personne ne descend jusque-là pour y
   chercher une navigation qui n'a jamais quitté l'écran.

   Chaque libellé est écrit petit, en capitales espacées et en laiton ; sa
   réponse est écrite en dessous, à la taille où on la lit. C'est la forme que
   la page emploie déjà pour le bandeau d'accès direct et pour les horaires.
   --------------------------------------------------------------------------- */
/* Quand la dernière section de la page est elle aussi en vert profond, rien ne
   disait où la page finissait et où le pied commençait : c'était un seul aplat
   de huit cents pixels. Un filet suffit à les séparer. */
main:has(> :last-child.dark) + .foot { border-top: 1px solid rgb(var(--cr) / .18); }

.foot {
  background: var(--c-green-deep); color: var(--c-cream);
  padding-block: clamp(1.9rem, 4.5vw, 3.2rem) 1.3rem;
}

/* --- 1. L'enseigne et la phrase --- */
.foot__haut {
  display: grid; gap: 1rem;
  padding-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
  border-bottom: 1px solid rgb(var(--cr) / .16);
}
.foot__marque { display: grid; gap: .35rem; text-decoration: none; color: var(--c-cream); justify-self: start; }
.foot__nom  { font: 500 clamp(1.7rem, 5vw, 2.1rem)/1 var(--serif); letter-spacing: -.02em; }
.foot__nom i { font-style: italic; }
.foot__sous { font: 600 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-brass-vif); }
.foot__mot  { margin: 0; max-width: 46ch; color: rgb(var(--cr) / .66); font-size: var(--fs-sm); line-height: 1.6; }
@media (min-width: 900px) {
  /* L'enseigne à gauche, la phrase à droite : le filet du dessous porte alors
     les deux bouts au lieu d'être poussé d'un cran par un bloc empilé. */
  .foot__haut { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 3rem; }
  .foot__mot { justify-self: end; text-align: right; }
}

/* --- 2. Les coordonnées --- */
.foot__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
  border-bottom: 1px solid rgb(var(--cr) / .16);
}
/* Le numéro prend la ligne entière au doigt : c'est ce qu'on est venu
   chercher, et il n'a pas à se serrer dans une demi-colonne. */
.foot__col--tel { grid-column: 1 / -1; }
@media (max-width: 379px) { .foot__cols { grid-template-columns: 1fr; } }
@media (min-width: 760px) {
  .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
  .foot__col--tel { grid-column: auto; }
}

.foot__col h2 {
  margin: 0 0 .85rem;
  font: 600 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-brass-vif);
}
.foot__col address, .foot__col p {
  margin: 0 0 .6rem; font-style: normal; font-size: var(--fs-mini); line-height: 1.65;
  color: rgb(var(--cr) / .82); text-wrap: pretty;
}
.foot__col p:last-child { margin-bottom: 0; }
/* `block` et non `inline-block` : le numéro et le courriel se suivaient sur
   la même ligne, collés l'un à l'autre, et la marge qui devait les séparer ne
   pouvait rien puisqu'elle était verticale. `width: fit-content` garde le
   soulignement à la longueur du texte. */
.foot__col a {
  display: block; width: fit-content; color: inherit; text-decoration: none;
  font-size: var(--fs-mini);
  border-bottom: 1px solid rgb(var(--cr) / .28);
  /* Une adresse de courriel n'a pas d'espace où se couper : sur une colonne
     étroite, elle sortirait du cadre plutôt que de passer à la ligne. */
  overflow-wrap: anywhere;
}
.foot__col a + a { margin-top: .5rem; }
.foot__col a:hover { border-bottom-color: var(--c-brass-vif); }
/* Le numéro est le seul lien du pied écrit grand : c'est le geste que la
   maison attend, et le seul qu'un téléphone puisse faire d'un doigt. */
.foot__tel {
  font: 500 clamp(1.3rem, 4vw, 1.5rem)/1.2 var(--serif) !important;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  margin-bottom: .55rem;
}

/* --- 3. La mention légale --- */
.foot__end {
  display: flex; flex-wrap: wrap; gap: .35rem clamp(1.2rem, 3vw, 2.5rem);
  margin: 0; padding-top: 1.1rem;
  font-size: var(--fs-micro); color: rgb(var(--cr) / .5);
}

/* La barre d'appel occupe le bas de l'écran : le pied s'arrête au-dessus. */
@media (max-width: 1080px) {
  .foot { padding-bottom: calc(1.5rem + 56px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------------------
   LES APPARITIONS

   Un bloc monte de quelques millimètres et se révèle une seule fois, quand son
   haut atteint le bas de l'écran. Rien ne rejoue au retour : une animation
   qu'on remarque deux fois est une animation ratée.

   Le mouvement est long et mou à dessein. C'est ce qui sépare une page qui se
   pose d'une page qui s'affiche.

   Sans JavaScript, `data-js` n'est jamais posé et tout s'affiche normalement.
   --------------------------------------------------------------------------- */
[data-js] [data-reveal] {
  opacity: 0;
  transform: translateY(var(--montee));
}
[data-js] [data-reveal][data-vu] {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-pose) var(--expo), transform var(--dur-pose) var(--expo);
  /* Le retard commun laisse à l'œil le temps d'arriver sur le bloc ; le retard
     particulier, posé au cas par cas, échelonne les séries. */
  transition-delay: calc(var(--retard-vu) + var(--vu-retard, 0s));
}

/* ---------------------------------------------------------------------------
   LA DÉRIVE AU DÉFILEMENT

   Les dessins posés dans le flux descendent lentement pendant qu'on les
   dépasse, et se redressent en chemin : c'est le mouvement du premier écran,
   en beaucoup plus discret. Quelques millimètres et six degrés sur toute la
   traversée, contre deux cents pixels là-haut.

   Elle est tenue par le défilement lui-même, sans JavaScript : le navigateur
   compose seul, rien ne tourne sur le fil principal. Là où cette mécanique
   n'existe pas encore, les dessins sont simplement immobiles. Rien à charger,
   rien à rattraper.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .illu {
      animation: derive linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    /* Une photographie dans son cadre suit le doigt à la vitesse qu'on lui
       donne. L'agrandissement est le prix du procédé : c'est lui qui crée la
       réserve dans laquelle l'image se déplace. Il n'est écrit que dans les
       images-clés, donc là où la dérive n'a pas lieu la photo n'est pas
       recadrée du tout. */
    .ph--derive.ready img {
      animation: photo-derive linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes derive {
  from { transform: translateY(.9rem) rotate(calc(var(--r, 0deg) - 3deg)); }
  to   { transform: translateY(-.9rem) rotate(calc(var(--r, 0deg) + 3deg)); }
}
@keyframes photo-derive {
  from { transform: scale(1.1) translateY(-3.5%); }
  to   { transform: scale(1.1) translateY(3.5%); }
}

/* ---------------------------------------------------------------------------
   MOUVEMENT RÉDUIT

   Quand le système le demande, il ne reste que les changements de couleur :
   aucun déplacement, aucun fondu d'entrée.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-property: opacity, color, background-color, border-color, box-shadow !important;
    transition-duration: .12s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior: auto; }
  [data-js] [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------------
   LA BARRE D'APPEL DU TÉLÉPHONE

   Les deux seules choses qu'on veut faire depuis un téléphone devant un site
   de restaurant : appeler, et savoir où c'est. Elles restent donc à portée du
   pouce plutôt qu'au bout d'un long défilement.

   Elle monte une fois le premier écran passé : avant, le numéro est déjà à
   l'écran et elle ne ferait que masquer l'image. Tant qu'elle est cachée, ses
   liens sortent de l'ordre de tabulation : une barre invisible ne doit pas être
   atteignable au clavier.

   Son placement n'est pas de notre ressort : `bottom: 0` suffit, les
   navigateurs recalant d'eux-mêmes leurs éléments fixes quand leur barre
   d'outils se replie. Une correction de notre part s'ajouterait à la leur.
   --------------------------------------------------------------------------- */
.barre {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--c-green-deep);
  /* La barre est du même vert que le pied, sur lequel elle finit par se poser :
     c'est son filet, et lui seul, qui l'en détache. Il est donc plus franc que
     les filets intérieurs du pied. */
  border-top: 1px solid rgb(var(--cr) / .3);
  transform: translateY(100%);
  transition: transform .35s var(--expo);
  will-change: transform;
}
.barre[data-visible="true"] { transform: none; }
/* Le clavier occupe le bas de l'écran : la barre s'efface le temps de la
   saisie plutôt que de venir se poser dessus. Écrit après la règle du dessus,
   qui a la même force : c'est l'ordre qui tranche. */
.barre[data-saisie="true"] { transform: translateY(100%); }
@media (min-width: 1081px) { .barre { display: none; } }

.barre__a {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 56px; text-decoration: none;
  color: var(--c-cream);
  font: 600 var(--fs-mini)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.barre__a--2 { border-left: 1px solid rgb(var(--cr) / .16); }
.barre__a:active { background: rgb(var(--cr) / .1); }
.barre__a svg { color: var(--c-brass-vif); }

/* Le pied de page ne doit pas finir sous la barre. */