/* =============================================================================
   pages.css — compositions propres à chaque page.
   Chaque page a sa grille : rien n'est réutilisé d'une page à l'autre en dehors
   de l'en-tête, du pied de page et des dessins.
   ============================================================================= */

/* =========================================================================
   1 · ACCUEIL — le sceau au centre, les dessins autour, tout en mouvement

   Le premier écran est la signature de la maison : c'est la seule chose que
   le site partage avec L'Étoile, l'autre restaurant du même propriétaire.

   Tout le mouvement tient dans un seul nombre, --p, l'avancée du premier
   défilement, de 0 (rien n'a bougé) à 1 (l'écran est passé). Le script se
   contente d'écrire ce nombre ; c'est ici que chaque dessin en tire sa chute
   et sa vrille. Une écriture par image de rendu, pas dix.

   Le même nombre sert à l'arrivée : les dessins entrent depuis --p:-0.35,
   c'est-à-dire un peu plus haut et penchés dans l'autre sens. Le geste
   d'arrivée et le geste de départ sont le même mouvement, joué à l'envers.
   ========================================================================= */

/* Déclarer --p lui donne un type : il devient un vrai nombre, interpolable,
   et il vaut 0 tant que personne ne l'écrit, y compris sans JavaScript. */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* LE PREMIER ÉCRAN EST SOMBRE.

   Il était crème, comme le reste de la page : le sceau et les dessins y
   flottaient dans le même fond que le bandeau d'en dessous, et rien ne disait
   où la maison commençait. L'Étoile, l'autre restaurant, ouvre sur un écran
   noir dont l'enseigne se détache seule — c'est ce qui lui donne son rang.

   Le nôtre ouvre donc sur le socle, le vert le plus profond de la palette,
   celui du pied de page et de la barre d'appel. Le sceau et les huit dessins
   y passent en crème. La page bascule ensuite au crème sous le bandeau : cette
   coupure franche, c'est la porte. */
.home-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--head-h));
  padding: clamp(1.5rem, 4vh, 3rem) var(--pad);
  background: var(--c-green-deep);
  /* Des dessins débordent volontairement : on les coupe ici, jamais avec une
     barre de défilement. */
  overflow: hidden;
}

/* LE SCEAU.

   Il occupe une bande centrale que les dessins ne franchissent jamais. Sa
   largeur est bornée par l'écran ET par une valeur en pixels : au-delà, un
   sceau qui grandit avec la fenêtre finit par avoir l'air d'un fond d'écran.

   Il s'efface et remonte pendant que les dessins tombent. */
.mono {
  position: relative;
  z-index: 2;
  margin: 0;
  display: grid;
  justify-items: center;
  /* Le sceau était d'un vert plus clair que les dessins qui l'entourent : à
     pleine encre, ceux-ci passaient devant lui alors qu'il est le sujet. Tout
     le premier écran est écrit d'une seule encre. */
  color: var(--c-cream);
  transform: translateY(calc(var(--p) * -2.5rem)) scale(calc(1 - var(--p) * .05));
  opacity: calc(1 - var(--p) * .9);
}
/* LE SCEAU BARRE L'ÉCRAN.

   Il tenait dans quinze rem au doigt et vingt-cinq sur grand écran : une
   médaille posée au milieu d'un fond, avec de l'air partout autour. Chez
   L'Étoile l'enseigne prend les trois quarts de la largeur du téléphone et
   c'est de là que vient sa présence. Le sceau prend la même place. */
/* Trois bornes, et la plus petite gagne : la largeur de l'écran, SA HAUTEUR,
   et une valeur en pixels. La hauteur est la borne qui manquait : sur un
   téléphone court, un sceau réglé sur la seule largeur mangeait tout le
   premier écran et les dessins n'avaient plus où se ranger — ils finissaient
   sur le sceau. Avec elle, il reste toujours deux bandes libres, une au-dessus
   et une en dessous, et aucun dessin n'a besoin d'approcher le cercle. */
.mono .seal { width: min(72vw, 36svh, 19rem); aspect-ratio: 1; }

@media (min-width: 600px)  { .mono .seal { width: min(58vw, 46svh, 24rem); } }
@media (min-width: 1100px) { .mono .seal { width: min(46vw, 58svh, 30rem); } }

/* Le champ de dessins couvre tout l'écran. Il s'efface en partant sans
   disparaître tout à fait : il en reste une trace quand le bandeau arrive. */
.home-champ {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; user-select: none;
  opacity: calc(1 - var(--p) * .72);
  /* Ils étaient à un demi et devaient se ranger côte à côte : quatre dessins
     de front sur 390 px, c'est une frise, pas une dispersion. Un cran en
     dessous leur rend la place de se poser chacun à sa propre profondeur. */
  --echelle: .44;
}
/* LE PREMIER ÉCRAN NE SE COUPE PAS.

   Il s'arrêtait quatre rem et demie plus haut au doigt, pour laisser dépasser
   les deux premières lignes du bandeau : c'était une invitation à descendre.
   Mais un premier écran qui laisse voir la case d'en dessous n'est plus un
   premier écran, c'est une page qui commence mal. Il prend toute la hauteur,
   à toutes les tailles, et rien d'autre n'y paraît. */
@media (max-width: 379px) { .home-champ { --echelle: .38; } }
@media (min-width: 700px)  { .home-champ { --echelle: .68; } }
@media (min-width: 1100px) { .home-champ { --echelle: 1; } }

/*
  Chaque dessin porte six réglages, et rien d'autre :

    --x --y ... où il est, en pourcentage de l'écran
    --l ....... sa largeur de référence, ramenée par --echelle
    --r ....... de combien il penche au repos
    --chute ... de combien il descend quand on quitte l'écran
    --vrille .. de combien il tourne en descendant

  Chute et vrille changent de valeur ET DE SIGNE d'un dessin à l'autre : c'est
  ce qui donne l'impression d'un désordre alors que chaque position est
  choisie. Deux dessins qui tomberaient à la même vitesse se liraient comme
  une grille qui glisse.
*/
/* LES DESSINS DU PREMIER ÉCRAN NE SONT PAS DU DÉCOR.

   Ailleurs dans le site, un dessin passe derrière un texte et doit s'effacer :
   il porte donc l'opacité commune. Ici il n'y a pas de texte, il n'y a qu'eux
   et le sceau — c'est la seule image de la page d'accueil. Ils étaient posés à
   moins de six dixièmes et le premier écran avait l'air d'un fond d'écran
   délavé. Ils sont maintenant à pleine encre — en crème, puisque le premier
   écran est passé sur le socle. */
.piece {
  position: absolute;
  left: var(--x); top: var(--y);
  width: calc(var(--l) * var(--echelle));
  aspect-ratio: var(--ar, 1);
  background-color: var(--c-cream);
  /* Ils sont la seule image du premier écran : à un demi-ton ils avaient
     l'air d'un filigrane. Le sceau garde le dessus par sa taille et par son
     plein, pas en éteignant ce qui l'entoure. */
  opacity: .82;
  -webkit-mask: var(--src) center/contain no-repeat;
          mask: var(--src) center/contain no-repeat;
  transform: translate(-50%, -50%)
             translateY(calc(var(--p) * var(--chute)))
             rotate(calc(var(--r) + var(--p) * var(--vrille)));
}
/* On ne prévient le navigateur que là où il y a de quoi tenir dix couches. */
@media (min-width: 1100px) { .piece { will-change: transform; } }

/* LA COURONNE.

   Le sceau occupe une bande centrale qu'aucun dessin ne franchit. Au-dessus et
   en dessous, en revanche, le centre est libre : c'est là que passent les
   dessins larges et bas.

   --l est une LARGEUR. Nos dessins n'ont pas du tout les mêmes proportions :
   le sac de golf fait deux fois et demie sa largeur en hauteur, l'assiette
   dressée les trois quarts. Les largeurs sont donc calculées pour que chacun
   fasse à peu près la même hauteur à l'écran, autour de 200 à 240 px, sans
   quoi les golfeurs écraseraient tout le reste.

   Deux golfeurs seulement, un de chaque côté : trois se lisaient comme une
   répétition. Le troisième reste sur les autres pages. */
.piece--assiette  { --x: 26%; --y: 9%;  --l: 200px; --r: 7deg;   --chute: 165px; --vrille: -12deg; }
.piece--bouteille { --x: 76%; --y: 14%; --l: 125px; --r: -9deg;  --chute: 135px; --vrille: 18deg; }
.piece--swing     { --x: 10%; --y: 27%; --l: 145px; --r: -11deg; --chute: 245px; --vrille: 14deg; }
.piece--trait     { --x: 89%; --y: 33%; --l: 150px; --r: 6deg;   --chute: 230px; --vrille: -13deg; }
.piece--chef      { --x: 11%; --y: 71%; --l: 185px; --r: 5deg;   --chute: 175px; --vrille: -16deg; }
.piece--table     { --x: 86%; --y: 68%; --l: 180px; --r: -6deg;  --chute: 200px; --vrille: 11deg; }
.piece--sac       { --x: 24%; --y: 87%; --l: 85px;  --r: -7deg;  --chute: 110px; --vrille: 20deg; }
.piece--clubs     { --x: 71%; --y: 89%; --l: 140px; --r: 13deg;  --chute: 130px; --vrille: -21deg; }

/* AU DOIGT, LA COMPOSITION CHANGE DE NATURE.

   Sur grand écran, le sceau est une île au milieu et les dessins font le tour.
   Sur un téléphone il barre l'écran d'un bord à l'autre : il ne reste plus une
   couronne mais DEUX BANDES, l'une au-dessus, l'autre en dessous.

   Les huit dessins s'y répartissent quatre en haut, quatre en bas, en
   quinconce : jamais deux à la même hauteur, jamais deux du même côté l'un
   sous l'autre. C'est ce qui évite les trous.

   Aucun n'est coupé par le bord gauche ou droit : sur un écran étroit, un
   dessin à moitié sorti se lit comme une erreur, pas comme un parti pris.
   Seuls ceux du bas peuvent l'être, et par le bas, là où la page continue. */
/* AUCUN DESSIN NE TOUCHE LE SCEAU.

   Quatre d'entre eux le mordaient : le golfeur au swing, les clubs croisés,
   le sac et le golfeur au trait. Un dessin qui vient buter contre le cercle
   se lit comme un défaut d'assemblage, pas comme un parti pris.

   Les huit tiennent maintenant tout entiers dans l'une des deux bandes —
   celle du dessus, celle du dessous — et ne s'approchent jamais du cercle.
   Chaque bande porte quatre dessins en quinconce : jamais deux à la même
   hauteur, jamais deux du même côté l'un sous l'autre. */
/* LA DISPERSION DE L'ÉTOILE.

   Chez eux, aucun dessin n'est à la hauteur de son voisin : ils sont posés à
   neuf profondeurs différentes, du bord de l'écran jusqu'aux abords de
   l'enseigne, et c'est ce désordre réglé qui fait qu'on ne voit pas la
   grille. Les nôtres étaient alignés deux par deux en haut et en bas : quatre
   dessins de front, c'est une frise.

   Ils ont maintenant chacun leur profondeur — 16, 7, 19 et 10 pour cent dans
   la bande du haut, 79, 90, 80 et 91 dans celle du bas — et leur tranche de
   largeur. Deux voisins ne partagent jamais à la fois une hauteur et une
   largeur, et aucun n'approche le cercle du sceau. */
@media (max-width: 699px) {
  .piece--swing     { --x: 12%; --y: 16%; --r: -8deg; }
  .piece--assiette  { --x: 38%; --y: 7%;  --r: -6deg; }
  .piece--bouteille { --x: 62%; --y: 19%; --r: 7deg; }
  .piece--trait     { --x: 88%; --y: 10%; --r: 5deg; }
  .piece--sac       { --x: 10%; --y: 79%; --r: -7deg; }
  .piece--chef      { --x: 34%; --y: 90%; --r: -5deg; }
  .piece--table     { --x: 62%; --y: 80%; --r: 4deg; }
  .piece--clubs     { --x: 88%; --y: 91%; --r: 11deg; }
}

/* Écran très étroit : les dessins gardaient leur taille pendant que l'écran
   rétrécissait, ils finissaient par se toucher. Un cran d'échelle en dessous. */
@media (max-width: 379px) {
  .piece--chef { display: none; }
}

/* TÉLÉPHONE COUCHÉ.

   Il ne reste plus de bande ni au-dessus ni en dessous du sceau : quatre
   dessins seulement survivent, un par coin. Ils gardaient leur taille de
   grand écran dans une hauteur de trois cents pixels — le golfeur sortait de
   cinq pixels par la gauche et le chef lui passait à travers les jambes. Ils
   sont donc rentrés dans les coins, à la moitié de leur taille, et écartés
   verticalement pour ne plus se croiser.

   La règle vaut dès 560 px de large : un iPhone couché en fait 667, il n'était
   couvert par aucun des deux jeux de positions. */
@media (max-height: 560px) and (min-width: 560px) {
  .home-champ { --echelle: .5; }
  .piece--assiette, .piece--bouteille, .piece--sac, .piece--clubs { display: none; }
  .piece--swing { --x: 12%; --y: 26%; }
  .piece--trait { --x: 88%; --y: 26%; }
  .piece--chef  { --x: 13%; --y: 76%; }
  .piece--table { --x: 87%; --y: 76%; }
  .mono .seal { width: min(38vw, 13rem); }
}

/* ---------------------------------------------------------------------------
   L'ARRIVÉE

   Elle n'existe que si le script a marqué la page. Sans JavaScript, ou si le
   système demande un mouvement réduit, les dessins sont simplement là.

   `backwards` et non `both` : passé la dernière image la règle rend la main,
   et --p redevient celui qu'écrit le défilement. Sans quoi le dessin resterait
   figé à sa position d'arrivée.
   --------------------------------------------------------------------------- */
[data-js] .piece {
  animation: piece-arrivee var(--dur-pose) var(--expo) backwards;
  animation-delay: var(--retard, 0s);
}
.piece--bouteille { --retard: 60ms; }
.piece--assiette  { --retard: 130ms; }
.piece--trait     { --retard: 200ms; }
.piece--swing     { --retard: 270ms; }
.piece--sac       { --retard: 340ms; }
.piece--clubs     { --retard: 410ms; }
.piece--table     { --retard: 480ms; }
.piece--chef      { --retard: 550ms; }

@keyframes piece-arrivee {
  from { opacity: 0; --p: -0.35; }
}

/* Le sceau se pose aussi, sans retard : c'est lui qu'on voit en premier. */
[data-js] .mono { animation: hero-pose var(--dur-pose) var(--expo) backwards; }
@keyframes hero-pose {
  from { opacity: 0; transform: translateY(1.5rem) scale(.985); }
}


/* ---------------------------------------------------------------------------
   LE BANDEAU D'ACCÈS DIRECT

   Les quatre choses qu'on vient chercher sur le site d'un restaurant : ce
   qu'on mange, quand c'est ouvert, où c'est, et le numéro.

   C'est le bandeau de L'Étoile, dans sa mécanique exacte. Les cellules ne
   sont pas carrées — elles l'ont été, et le carré creusait entre le libellé
   et sa réponse un trou de cent pixels que rien ne remplissait. Elles ont une
   hauteur fixe, courte, et leur contenu est centré dedans.

   Les filets ne doublent jamais celui de la bande ni celui du bord : chaque
   cellule ne porte que son filet de gauche et son filet du haut, et les
   premières de chaque rangée s'en passent. C'est ce qui fait une grille et
   non une collection de cadres.

   La flèche au bout du libellé dit que la cellule mène quelque part. Sans
   elle, ce sont quatre étiquettes ; avec elle, quatre portes.
   --------------------------------------------------------------------------- */
.strip { border-block: 1px solid var(--line); }
.strip__g { display: grid; grid-template-columns: 1fr 1fr; }
.strip__i {
  display: flex; flex-direction: column; justify-content: center; gap: .7rem;
  min-height: 142px; padding: 1.35rem clamp(1rem, 4vw, 2rem);
  text-decoration: none;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transition: background .2s;
}
.strip__i:nth-child(-n+2) { border-top: 0; }
.strip__i:nth-child(odd)  { border-left: 0; }
@media (hover: hover) and (pointer: fine) {
  .strip__i:hover { background: var(--bg-2); }
}
/* Sur grand écran, les quatre passent sur une ligne : il n'y a plus de
   rangée du dessous, donc plus de filet du haut. */
@media (min-width: 900px) {
  .strip__g { grid-template-columns: repeat(4, 1fr); }
  .strip__i { min-height: 158px; border-top: 0; border-left: 1px solid var(--line); padding-inline: clamp(1.2rem, 2.2vw, 2rem); }
  .strip__i:first-child { border-left: 0; }
}

/* LE LIBELLÉ ANNONCE, LA RÉPONSE PARLE.

   C'était l'inverse : un libellé en laiton, en capitales largement espacées,
   au-dessus d'une réponse écrite plus petite que le texte courant. Le mot
   « ADRESSE » pesait plus lourd que l'adresse elle-même, et les quatre
   cellules se lisaient comme quatre étiquettes vides.

   Le libellé reste en laiton — c'est la marque de la maison, on la retrouve
   au pied de page et sur la carte — mais il se resserre et s'efface d'un
   cran. La réponse passe au corps d'un titre, dans le serif vert. C'est elle
   qu'on est venu lire. */
.strip__k {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font: 600 var(--fs-micro)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); transition: color .2s;
}
/* La flèche était écrite au corps du libellé, douze pixels : à cette taille
   elle se lisait comme un signe de ponctuation égaré. Elle a sa propre
   taille, celle d'un mot du texte courant. */
.strip__k i { font-style: normal; font-size: 1.05rem; line-height: 1; letter-spacing: 0; transition: transform .25s; }
.strip__i:hover .strip__k i { transform: translateX(4px); }
/* Les quatre réponses tiennent chacune sur UNE ligne, et c'est ce qui aligne
   les quatre libellés entre eux : dès que l'une d'elles passe à la ligne, sa
   cellule décale son libellé d'une demi-ligne et la rangée se met à boiter.
   C'est pourquoi « Des entrées aux desserts » est devenu « Cuisine de
   saison ». Avant d'écrire une réponse plus longue, la mesurer. */
.strip__v {
  font: 500 clamp(1.3rem, 5vw, 1.75rem)/1.25 var(--serif);
  letter-spacing: -.005em;
  color: var(--fg-strong); font-variant-numeric: tabular-nums;
  text-wrap: nowrap;
}
/* Sous 360 px, l'adresse ne tient plus : elle a le droit de se couper
   plutôt que de déborder de sa cellule. */
@media (max-width: 359px) { .strip__v { text-wrap: wrap; } }

/* ---------------------------------------------------------------------------
   LE DUO — une photographie et un texte, côte à côte

   La disposition de L'Étoile, pas son nombre : chez eux la page d'accueil
   compte une quinzaine de photographies, ici il y en a deux, une de chaque
   côté du panneau vert, les côtés inversés. Jamais deux images à la suite,
   jamais une grille — une image, un texte, et l'on passe à autre chose.

   La photographie prend six colonnes, le texte cinq, et la gouttière du
   milieu reste vide : c'est ce vide, et non un filet, qui les sépare.
   --------------------------------------------------------------------------- */
.duo {
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: center;
}
.duo__img { grid-column: 1 / span 6; grid-row: 1; }
.duo__img .ph { --ar: 4/5; }
.duo__txt { grid-column: 8 / -1; grid-row: 1; max-width: 30rem; }
.duo__txt > :last-child { margin-bottom: 0; }
.duo .mark { margin-bottom: 1.1rem; }
.duo__lien { margin-top: 1.8rem; }
.duo__lien--duo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
/* Photographie à droite : le texte part du bord gauche de la page. */
.duo--r .duo__img { grid-column: 7 / -1; grid-row: 1; }
.duo--r .duo__img .ph { --ar: 4/3; }
.duo--r .duo__txt { grid-column: 1 / span 5; }

/* Sous 900 px, la photographie passe au-dessus du texte : côte à côte, il ne
   resterait au texte que trois mots par ligne. */
@media (max-width: 899px) {
  .duo { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .duo .duo__img, .duo .duo__txt,
  .duo--r .duo__img, .duo--r .duo__txt { grid-column: 1 / -1; grid-row: auto; }
  .duo__txt { max-width: 56ch; }
  .duo__img .ph, .duo--r .duo__img .ph { --ar: 4/3; }
}
@media (max-width: 699px) {
  .duo__lien { margin-top: 1.4rem; }
  /* LA PHOTOGRAPHIE TOUCHE LE BANDEAU.

     Au doigt, la première photographie va d'un bord à l'autre de l'écran, et
     le bandeau d'accès direct aussi. Entre les deux restait la marge haute de
     la section : cinquante-deux pixels de crème sur toute la largeur, coincés
     entre le filet du bandeau et le haut de l'image. Ce n'est pas une
     respiration, c'est une couture. Le filet du bandeau devient donc le bord
     haut de la photographie. */
  .strip + .sect { padding-top: 0; }
}

/* LE MOT DE LA FIN.

   Il s'est tenu sous le bandeau, avant la première photographie : on
   descendait du sceau pour tomber aussitôt sur une seconde déclaration, et le
   bouton de réservation arrivait avant qu'on ait rien vu de la maison. Il est
   passé entre les deux duos, où il se lisait comme un morceau resté en
   travers de deux photographies.

   Sa place est à la fin. C'est là qu'une page dit ce qu'elle a à dire une
   dernière fois et donne le seul geste qu'elle attend : appeler. Un filet le
   sépare du dernier duo, et le vert du pied de page le ferme juste dessous.
   Il tient la largeur d'une phrase, au milieu, et rien ne le suit. */
.word { text-align: center; border-top: 1px solid var(--line); }
/* Un peu plus d'air que les autres sections : c'est la dernière, et ce qui
   est en dessous n'appartient plus à la page. */
.word { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4rem, 10vw, 8rem); }
.word__q { max-width: 22ch; margin-inline: auto; font: 500 clamp(1.8rem, 4vw, 3.1rem)/1.15 var(--serif); }
.word__s { max-width: 44ch; margin: 1.6rem auto 0; }
.word__a { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.8rem; margin: 2.2rem 0 0; }

/* =========================================================================
   2 · LE RESTAURANT — récit en colonne étroite, images en débord alterné
   ========================================================================= */
.rest-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: end;
            padding-block: clamp(2.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3rem); }
.rest-top__r { padding-bottom: .6rem; }
@media (max-width: 860px) { .rest-top { grid-template-columns: 1fr; align-items: start; } }

/* Bande photo pleine largeur juste après le titre */
.rest-band { position: relative; }
.rest-band .ph { --ar: 2/1; border-radius: 0; }
@media (max-width: 700px) { .rest-band .ph { --ar: 4/3; } }

/* ---------------------------------------------------------------------------
   LE RÉCIT EN DEUX MOUVEMENTS

   Deux compositions, et pas deux fois la même : une photographie posée à côté
   d'un paragraphe, répétée, c'est ce que fait n'importe quel gabarit.

   1. LE DIPTYQUE. Une grande photographie en paysage à droite du texte, et
      une seconde en portrait qui vient mordre son angle inférieur gauche et
      pend en dessous. Elle commence après la colonne de texte, une gouttière
      plus loin : elle mord la photographie, jamais un mot. Le liseré crème
      autour de la petite la décolle de la grande ; sans lui les deux images
      se touchent et l'œil ne sait plus laquelle il regarde.

      Elle mordait la grande sur quarante pour cent de sa largeur et lui
      cachait la moitié de l'assiette : on ne voyait plus une grande et une
      petite, mais deux images qui se gênent. Elle ne prend plus qu'un quart,
      dans l'angle, et pend d'un quart de sa hauteur.

   2. LE CONTREPOINT. La photographie à gauche, et le titre posé sur son angle
      inférieur droit, sur un aplat crème ; le texte suit en dessous. Là le
      texte était à côté, ici il est dedans. Ce n'est plus une carte à coins
      arrondis qui flotte sur l'image — c'est le réflexe des gabarits — mais
      une entaille dans la photographie, à la taille du titre.

   LA MÉCANIQUE DES CHEVAUCHEMENTS. Ce qui déborde occupe sa propre rangée de
   la grille et remonte sur la précédente par une marge négative. La rangée ne
   mesure alors que ce qui dépasse, et la hauteur du bloc reste juste : rien
   à réserver en dessous, rien qui vienne se poser sur le bloc suivant. Une
   marge en pour cent se mesure sur la largeur de la zone : c'est ce qui la
   fait suivre la photographie, dont la hauteur découle aussi de la largeur.
   --------------------------------------------------------------------------- */
.story { display: grid; gap: clamp(3.5rem, 8vw, 7rem); --gout: clamp(1.25rem, 2.5vw, 2.5rem); }

/* --- 1. Le diptyque --- */
.dip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* Texte, lien, puis ce qui pend. La grande photographie traverse les deux
     premières rangées : la seconde est souple pour absorber seule ce que la
     photographie a de plus haut que le texte — partagé entre les deux, ce
     surplus éloignait le lien de ses paragraphes. */
  grid-template-rows: auto 1fr auto;
  column-gap: var(--gout);
}
/* Le texte s'aligne sur le haut de la grande photographie ; le lien reste
   sous ses paragraphes, dans la rangée qui suit. */
.dip__txt  { grid-column: 1 / span 4; grid-row: 1; z-index: 2; padding-top: .3rem; }
.dip__txt > :last-child { margin-bottom: 0; }
.dip__lien { grid-column: 1 / span 4; grid-row: 2; align-self: start; margin: 1.7rem 0 0; }
.dip__a    { grid-column: 6 / -1; grid-row: 1 / 3; align-self: end; }
.dip__a .ph { --ar: 3/2; }
/* La photographie d'origine est en hauteur : recadrée en paysage, c'est la
   viande qu'on garde, pas la nappe au-dessus de l'assiette. */
.dip__a .ph img { object-position: 50% 58%; }
.dip__b {
  grid-column: 5 / span 3; grid-row: 3; z-index: 3;
  /* Elle remonte sur la grande des trois quarts de sa hauteur (5/4 de sa
     largeur, plus le liseré) et pend du quart restant. */
  margin-top: calc(-95% - 12px);
  padding: 8px; background: var(--bg); border-radius: calc(var(--r) + 6px);
}
.dip__b .ph { --ar: 4/5; }

/* --- 2. Le contrepoint --- */
.cp {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--gout);
  /* De combien le titre remonte sur la photographie, et le retrait du texte
     par rapport au bord de sa colonne. */
  --mord: 5.5rem;
  --retrait: clamp(1.75rem, 3.5vw, 3rem);
}
/* Sept colonnes, pas plus : la seule photographie de la salle dont nous
   disposons fait 675 px de large, et au-delà elle devient molle. Elle
   reprendra de la largeur le jour où nous aurons la vue en haute définition. */
.cp__img { grid-column: 1 / span 7; grid-row: 1; }
.cp__img .ph { --ar: 3/2; }
/* Le texte part de la cinquième colonne, là où la petite photographie du
   diptyque pend au-dessus : l'entaille est dans le bas de l'image, pas dans
   son angle, et les deux blocs partagent un axe. */
.cp__txt {
  grid-column: 5 / -1; grid-row: 2; z-index: 2;
  margin-top: calc(-1 * var(--mord));
  padding-left: var(--retrait);
}
.cp__txt > * { max-width: 46ch; }
/* Le titre porte lui-même l'aplat crème : l'entaille dans la photographie a
   exactement sa taille. Il s'assied au bas de l'aplat, sur le bord de l'image. */
.cp__txt h2 {
  display: flex; align-items: flex-end; width: fit-content; box-sizing: border-box;
  min-height: var(--mord);
  margin-left: calc(-1 * var(--retrait));
  padding: 0 clamp(1.5rem, 3vw, 2.5rem) .55rem var(--retrait);
  background: var(--bg);
}
.cp__txt h2 + p { margin-top: 1rem; }

/* La légende d'une photographie : discrète, à sa place, jamais dessus. */
.leg {
  margin: .65rem 0 0;
  font: 600 var(--fs-micro)/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-soft);
}

/* SUR TABLETTE, le texte passe au-dessus, à la mesure d'un paragraphe, et les
   deux photographies se posent côte à côte, la grande en paysage, la petite en portrait qui démarre plus bas et pend sous
   la première. Aucune ne recouvre l'autre — les chevauchements demandent de
   la largeur. Le contrepoint garde son entaille, la photographie s'élargit. */
@media (max-width: 999px) {
  .dip { grid-template-rows: auto auto auto auto; }
  .dip__txt  { grid-column: 1 / -1; grid-row: 1; max-width: 56ch; padding-top: 0; }
  .dip__lien { grid-column: 1 / -1; grid-row: 2; margin-top: 1.5rem; }
  .dip__a    { grid-column: 1 / span 8; grid-row: 3; margin-top: 2.25rem; }
  .dip__a .ph { --ar: 4/3; }
  .dip__b {
    grid-column: 9 / -1; grid-row: 4;
    margin-top: -100%;
    padding: 0; background: none; border-radius: 0;
  }
  .cp { --mord: 5rem; }
  .cp__img { grid-column: 1 / span 9; }
  .cp__txt { grid-column: 4 / -1; }
}

/* AU TÉLÉPHONE, chaque bloc garde son geste, en plus court.

   Le diptyque : la grande photographie prend toute la largeur de l'écran ; la
   petite, en portrait, sort par la droite et mord son angle inférieur, puis
   pend en dessous. L'angle qu'elle laisse libre à gauche n'est pas vide : le
   lien vers la carte s'y pose, calé sur le bas de la photographie. Deux
   images en paysage l'une sous l'autre, la seconde plus petite, c'est ce
   qu'on avait, et ça se lisait comme une image mal posée.

   Le contrepoint : la photographie d'un bord à l'autre, et le titre qui
   remonte sur son angle inférieur gauche, depuis le bord de l'écran. Le texte
   suit en dessous, sur toute la largeur de la colonne. */
@media (max-width: 699px) {
  .dip { grid-template-rows: auto auto auto; column-gap: 0; }
  .dip__txt  { max-width: none; }
  .dip__a    { grid-column: 1 / -1; grid-row: 2; margin-top: 1.75rem; }
  .dip__b {
    grid-column: 8 / -1; grid-row: 3; z-index: 3;
    /* Elle mord la grande d'un bon tiers de sa hauteur : la marge se mesure
       sur la largeur de sa zone, cinq colonnes. */
    margin: -60% calc(-1 * var(--pad) - 6px) 0 0;
    padding: 6px; background: var(--bg);
  }
  .dip__b .ph { border-radius: 0; }
  .dip__lien { grid-column: 1 / span 7; grid-row: 3; align-self: end; margin: 0 0 6px; padding-right: 1rem; }

  .cp { column-gap: 0; --mord: 3.75rem; --retrait: 0px; }
  .cp__img { grid-column: 1 / -1; }
  .cp__img .ph { --ar: 4/3; }
  .cp__txt { grid-column: 1 / -1; }
  .cp__txt > * { max-width: none; }
  .cp__txt h2 { margin-left: calc(-1 * var(--pad)); padding: 0 1.5rem .5rem var(--pad); }
}

/* Le chef : portrait rond, texte à côté */
/* Deux colonnes quand le portrait du chef est là, une seule sinon : la grille
   compte ses enfants plutôt que de garder une colonne vide. */
.chef { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.chef:has(> .ph) { grid-template-columns: 260px 1fr; }
.chef:has(> .ph.gone) { grid-template-columns: 1fr; }
.chef .ph { --ar: 1; border-radius: 50%; }
.chef .ph__slot { outline-offset: -14px; border-radius: 50%; }
@media (max-width: 680px) { .chef { grid-template-columns: 1fr; justify-items: start; } .chef .ph { width: 190px; } }

/* TROIS REPÈRES, SANS NUMÉROS.

   Ils portaient un 01, un 02 et un 03 en gros chiffres dorés. Ce ne sont pas
   trois étapes : on peut les lire dans n'importe quel ordre, et le numéro ne
   disait donc rien qu'on avait besoin de savoir — il ne faisait que donner du
   volume à trois phrases écrites trop petit. Les phrases prennent sa place,
   dans le serif des titres : ce sont elles, le repère. */
.marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.marks__i { padding: 2.2rem clamp(1rem, 2vw, 2rem); border-right: 1px solid var(--line); }
.marks__i:last-child { border-right: 0; }
.marks__n { display: none; }
.marks__t {
  margin: 0; max-width: 22ch;
  font: 500 clamp(1.15rem, 1.9vw, 1.45rem)/1.35 var(--serif);
  color: var(--fg-strong);
}
/* Au doigt, ce ne sont plus trois colonnes mais trois lignes : les phrases
   n'ont pas la même longueur, et deux d'entre elles se cassaient en trois
   lignes pendant que la troisième en tenait une. Le chiffre passe à gauche de
   sa phrase, comme un numéro d'ordre — c'est ce qu'il est. */
@media (max-width: 720px) {
  .marks { grid-template-columns: 1fr; }
  .marks__i { padding: 1.2rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .marks__i:last-child { border-bottom: 0; }
  .marks__t { max-width: none; font-size: 1.2rem; }
}

/* =========================================================================
   3 · LA CARTE — familles de plats sur deux colonnes, fond sombre
   ========================================================================= */
/* `svh` et non `vh` : sur un téléphone, `100vh` est la hauteur de l'écran
   barre d'adresse repliée, et la page dépassait donc toujours d'une soixantaine
   de pixels au chargement. */
.menu-page { min-height: 100svh; }
.menu-head { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3rem); }
.menu-head__g { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
@media (max-width: 860px) { .menu-head__g { grid-template-columns: 1fr; align-items: start; } }

/* Il y avait un sommaire : collant à gauche sur grand écran, une rangée de
   pastilles au téléphone. Neuf familles tiennent sur deux écrans, on les
   parcourt plus vite qu'on ne les choisit ; les pastilles, elles, étaient le
   premier bloc de la page et la seule chose qu'on y voyait avant un plat. */
.menu-body { padding-bottom: clamp(4rem, 8vw, 7rem); }

.fam { padding-top: .5rem; margin-bottom: clamp(2rem, 5vw, 4rem); scroll-margin-top: calc(var(--head-h) + 1.5rem); }
.fam__h { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .3rem; }
/* Le titre et son étiquette tiennent sur une ligne tant qu'il y a de la place.
   Au doigt, « Menu « 3 notes » » et « Entrée, plat, dessert » se partageaient
   la largeur : le guillemet fermant tombait seul à la ligne d'un côté et
   l'étiquette se cassait en deux de l'autre. Ils s'empilent alors. */
@media (max-width: 560px) {
  .fam__h { display: grid; justify-items: start; gap: .35rem; }
}
/* Sans note d'introduction, le titre de la famille tombait directement sur le
   premier plat : les deux se lisaient comme une seule ligne. */
.fam__h + .fam__l { margin-top: .9rem; }
.fam__h h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.fam__h em { font: 600 var(--fs-micro)/1 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.fam__n { margin: 0 0 1.2rem; font-size: var(--fs-sm); color: var(--fg-soft); }
.fam__l { columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 780px) { .fam__l { columns: 1; } }

.dish { break-inside: avoid; display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.2rem;
        padding: .8rem 0; border-bottom: 1px solid var(--line); }
.dish__n { font: 500 1.12rem/1.3 var(--serif); }
.dish__p { font: 600 var(--fs-sm)/1.5 var(--sans); font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }
.dish__d { grid-column: 1 / -1; margin: .2rem 0 0; font-size: var(--fs-sm); color: var(--fg-soft); }

.menu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem;
             padding-top: 2rem; border-top: 1px solid var(--line); }

/* =========================================================================
   4 · LA TERRASSE — panoramique en tête, texte en colonnes, une journée en trois heures
   ========================================================================= */
.terr-hero { position: relative; height: min(78svh, 720px); background: var(--c-green-deep); overflow: hidden; }
.terr-hero .ph { position: absolute; inset: 0; --ar: auto; height: 100%; border-radius: 0; }
.terr-hero .ph::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--vd) / .25) 0%, rgb(var(--vd) / .1) 38%, rgb(var(--vd) / .86) 100%);
}
@media (max-width: 699px) {
  /* Écran étroit : le titre occupe presque toute la hauteur du bandeau, il lui
     faut un fond plus franc pour rester lisible sur l'herbe claire. */
  .terr-hero { height: min(74svh, 620px); }
  .terr-hero .ph::after {
    background: linear-gradient(180deg, rgb(var(--vd) / .3) 0%, rgb(var(--vd) / .2) 26%, rgb(var(--vd) / .92) 82%, rgb(var(--vd) / .96) 100%);
  }
}
.terr-hero__t { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-bottom: clamp(2rem, 5vw, 4rem); color: var(--c-cream); }
.terr-hero__t h1 { color: var(--c-cream); max-width: 16ch; }

/* ---------------------------------------------------------------------------
   LE CHAPÔ ET LES COLONNES DE JOURNAL

   Le texte tenait dans une colonne étroite et centrée, avec une lettrine.
   Sur un grand écran il flottait au milieu de la page — deux cents pixels de
   blanc de chaque côté — sans rapport avec la grille des heures juste en
   dessous, qui, elle, prend toute la largeur.

   Il prend maintenant la même largeur qu'elle : une phrase d'ouverture dans
   le corps des titres, puis le texte en trois colonnes. La lettrine est
   retirée — le chapô ouvre déjà le texte, et deux ouvertures l'une sur
   l'autre n'en font aucune.
   --------------------------------------------------------------------------- */
.terr-mot__q {
  margin: 0 0 clamp(1.6rem, 3.5vw, 2.6rem); max-width: 26ch;
  font: 500 clamp(1.8rem, 3.6vw, 3rem)/1.15 var(--serif);
  letter-spacing: -.01em; color: var(--fg-strong); text-wrap: balance;
}
.paper { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
.paper p:last-child { margin-bottom: 0; }
@media (min-width: 1100px) { .paper { columns: 3; } }
@media (max-width: 760px)  { .paper { columns: 1; } }

/* ---------------------------------------------------------------------------
   LES HEURES DE LA TERRASSE

   Une journée en trois temps, réglée comme une grille horaire : un filet, une
   heure dans la marge, le texte à côté, la photographie au bout de la ligne.
   C'est la forme que la maison emploie déjà pour ses horaires et pour ses
   plats — un libellé à gauche, la réponse à droite — appliquée à des images.

   Celle du milieu n'a pas de photographie et son texte prend la place : deux
   images seulement, chacune vue une fois. Il n'y a que deux prises de vue de
   la terrasse dans toute la maison, et le bandeau du haut est déjà l'une des
   deux ; une troisième vignette n'aurait montré qu'une nouvelle fois la même
   bouteille sur la même table.
   --------------------------------------------------------------------------- */
.heures { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.heure {
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  /* L'heure et le texte se centrent sur la photographie, qui est deux fois
     plus haute qu'eux. Calés en haut, ils laissaient sous eux quatre cents
     pixels de vide jusqu'au filet suivant ; poussé au bas de la colonne, le
     lien se retrouvait seul, à deux cent quarante pixels de son paragraphe.
     Centrés, le vide se partage au-dessus et au-dessous, et le filet du haut
     suffit à dire où la rangée commence. */
  align-items: center;
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
}
/* L'HEURE TIENT LA MARGE.

   Elle y était écrite au corps d'un sous-titre : deux cents pixels de colonne
   pour trois signes, et la rangée s'ouvrait sur un grand vide à gauche. Elle
   est maintenant un chiffre de chapitre — le seul nombre écrit grand de tout
   le site — et c'est elle qui tient la marge. */
.heure__h {
  grid-column: 1 / span 2; margin: 0; color: var(--accent);
  display: flex; align-items: baseline; gap: .16em; line-height: 1;
}
.heure__h span { font: 500 clamp(2.4rem, 4.6vw, 4rem)/.85 var(--serif); letter-spacing: -.03em; }
.heure__h i {
  font: 600 var(--fs-mini)/1 var(--sans); font-style: normal;
  letter-spacing: .1em; text-transform: uppercase;
}
.heure__t   { grid-column: 3 / span 5; }
.heure__t > :last-child { margin-bottom: 0; }
.heure__t h3 { margin-bottom: .7rem; }
.heure__lien { margin-top: 1.5rem; }
.heure__img { grid-column: 8 / -1; }
.heure__img .ph { --ar: 3/4; }
/* L'heure du milieu n'a pas de photographie. La moitié droite de sa rangée
   restait vide et le manque se lisait comme une image qui n'aurait pas
   chargé ; une phrase y prend place, à l'endroit exact où les deux autres
   rangées ont la leur. La respiration est alors voulue, et elle se voit. */
.heure__note {
  grid-column: 8 / -1; grid-row: 1;
  margin: 0; max-width: 24ch;
  font: italic 400 clamp(1.15rem, 1.9vw, 1.55rem)/1.45 var(--serif);
  color: var(--fg-soft);
}

@media (max-width: 899px) {
  /* En colonne unique, l'heure ne peut plus vivre dans une marge qui n'existe
     plus : elle passe au-dessus du titre, sur sa propre ligne. */
  .heure { grid-template-columns: 1fr; row-gap: 1.5rem; padding-top: 1.3rem; }
  .heure__h, .heure__t, .heure__img, .heure__note { grid-column: 1 / -1; grid-row: auto; }
  .heure__note { max-width: 34ch; align-self: start; }
  .heure__h { margin-bottom: -.7rem; }
  .heure__h span { font-size: clamp(2.2rem, 9vw, 2.9rem); }
  .heure__t { max-width: 56ch; }
  /* LE CADRE EST CELUI DE LA PHOTOGRAPHIE.

     Les deux originaux sont en trois quarts — 1400 sur 1867 et 1000 sur
     1333. Le cadre était en cinq quarts : il en retirait deux cent huit
     pixels, cent quatre en haut et cent quatre en bas, c'est-à-dire la
     bouteille tranchée par le milieu et la garniture de l'assiette. On ne
     voyait plus une photographie mais une photographie coupée.

     Au doigt, où elle va d'un bord à l'autre, le cadre est donc exactement
     celui de l'image : rien n'est retiré. Sur tablette, où elle garde ses
     marges, un cran de moins suffit. */
  .heure__img .ph { --ar: 4/5; }
}

/* AU DOIGT, LA DERNIÈRE PHOTOGRAPHIE TOUCHE LE VERT.

   Elle va d'un bord à l'autre de l'écran, et le panneau vert qui la suit
   aussi. Entre les deux restait la marge basse de la section : cinquante
   pixels de crème sur toute la largeur, entre deux aplats pleine page. Ce
   n'est pas une respiration, c'est une couture — on croit à un défaut
   d'affichage. La photographie touche donc le vert.

   Sur grand écran, la photographie tient dans ses colonnes et ne touche aucun
   bord : la marge y est à sa place et reste. */
@media (max-width: 699px) {
  .heures-sect { padding-bottom: 0; }
  .heure__img .ph { --ar: 3/4; }
}

/* Encadré : la citation presse.

   C'était une carte : quatre filets, des coins arrondis, du texte centré
   dedans. Une citation n'a pas besoin d'une boîte — elle a besoin d'être
   plus grande que ce qui l'entoure. Il ne reste que deux filets, en haut et
   en bas, et la phrase entre les deux. */
.press { display: grid; gap: .9rem; padding-block: clamp(1.8rem, 4vw, 2.8rem); border-block: 1px solid var(--line); text-align: center; }
.press__q { margin: 0 auto; max-width: 34ch; text-wrap: balance; font: italic 400 clamp(1.35rem, 2.6vw, 1.9rem)/1.35 var(--serif); color: var(--fg-strong); }
.press cite { font: 600 var(--fs-micro)/1.4 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* =========================================================================
   5 · CONTACT — informations et plan côte à côte, horaires en dessous
   ========================================================================= */
.ct-top { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: start;
          padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); }
@media (max-width: 900px) { .ct-top { grid-template-columns: 1fr; } }
.ct-addr { font-style: normal; line-height: 1.75; }
.ct-addr b { display: block; font: 500 1.3rem/1.3 var(--serif); color: var(--fg-strong); margin-bottom: .7rem; }
.ct-links { display: grid; gap: .2rem; margin: 1.7rem 0 2rem; }
.ct-links a { display: inline-flex; align-items: center; gap: .7rem; width: max-content; text-decoration: none;
              font: 500 1.3rem/1.6 var(--serif); color: var(--fg-strong); border-bottom: 1px solid var(--line); }
.ct-links a:hover { border-bottom-color: var(--accent); }
.ct-links svg { width: 17px; height: 17px; opacity: .65; }
.ct-map { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; background: var(--bg-2); border: 1px solid var(--line); }
/* Le plan était désaturé de moitié pour se fondre dans la page : il n'y avait
   plus qu'une tache grise à côté d'une adresse. Il garde une retenue, mais on
   y reconnaît de nouveau le vert des champs et le bleu du ruisseau. */
.ct-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.9) contrast(1.03); }
.ct-way { display: grid; gap: .9rem; margin-top: 1.8rem; }
.ct-way li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .8rem; font-size: var(--fs-sm); color: var(--fg-soft); }
.ct-way svg { width: 17px; height: 17px; margin-top: .25rem; color: var(--accent); }

/* Horaires : une ligne par jour, sur toute la largeur */
.hours { border-top: 1px solid var(--line); }
.hours__r { display: grid; grid-template-columns: 12rem 1fr auto; gap: 1rem 2rem; align-items: baseline;
            padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.hours__d { font: 600 var(--fs-base)/1.4 var(--sans); }
.hours__v { font: 500 1.15rem/1.3 var(--serif); color: var(--fg-strong); }
.hours__v .tbc { font: 400 var(--fs-sm)/1.4 var(--sans); color: var(--fg-soft); border-bottom: 1px dashed currentColor; }
.hours__v .off { color: var(--accent); }
@media (max-width: 700px) {
  .hours__r { grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: .85rem 0; }
  .hours__v { font-size: 1.05rem; }
}

/* Bandeau réservation en bas de page */
.book { text-align: center; }
.book__tel { display: inline-block; margin: .8rem 0 1rem; padding-bottom: .25rem; text-decoration: none;
             font: 500 clamp(2.4rem, 6.5vw, 4.2rem)/1 var(--serif); font-variant-numeric: tabular-nums;
             color: var(--fg-strong); border-bottom: 1px solid var(--accent); }
.book p { max-width: 38em; margin-inline: auto; }
/* Un lien au milieu d'une phrase ne peut pas grandir sans décoller les lignes :
   on lui donne de la marge de frappe sans toucher au flux. */
@media (pointer: coarse) {
  .book p a, .ecrire__mot p a { display: inline-block; padding-block: .55rem; }
}

/* Horaires : le rappel à gauche, la grille des jours à droite */
.ct-hours { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .ct-hours { grid-template-columns: 1fr; } }

/* Emplacement vide retiré de la page : la classe est posée par le JS APRÈS
   l'échec du chargement. Masquer en CSS empêcherait le navigateur de charger
   l'image (un parent en display:none ne déclenche jamais le chargement). */
.ph.gone { display: none !important; }

/* Une photographie posée entre deux familles de plats : la carte est une longue
   colonne de texte, elle a besoin de reprendre son souffle. */
.fam-photo {
  /* Bornée à 820 px. La dérive au défilement agrandit l'image de 10 % : c'est
     le prix du procédé, il crée la réserve dans laquelle elle se déplace. À
     820 px elle est donc rendue sur 900, sous les 1000 px dont on dispose. */
  max-width: 820px;
  margin: clamp(2rem, 4vw, 3.5rem) auto clamp(2.5rem, 5vw, 4rem);
}

/* =========================================================================
   ÉCRIVEZ-NOUS

   Le mot à gauche, le formulaire à droite ; en colonne unique au doigt, le
   mot d'abord. Les champs sont hauts et le texte à 16 px : en dessous, les
   navigateurs de téléphone agrandissent la page d'eux-mêmes à la mise au
   point, et on se retrouve à faire glisser l'écran pour lire ce qu'on tape.
   ========================================================================= */
.ecrire { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 860px) { .ecrire { grid-template-columns: 1fr; } }

.form { display: grid; gap: 1.1rem; }
.form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form__duo { grid-template-columns: 1fr; } }

.form__champ { display: grid; gap: .45rem; margin: 0; }
.form__champ label {
  font: 600 var(--fs-micro)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-soft);
}
.form__champ input,
.form__champ textarea {
  width: 100%; min-height: 52px; padding: .85rem 1rem;
  font: 400 1rem/1.5 var(--sans); color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .2s, box-shadow .2s;
}
.form__champ textarea { min-height: 148px; resize: vertical; }
.form__champ input::placeholder, .form__champ textarea::placeholder { color: var(--fg-soft); opacity: .65; }
.form__champ input:focus-visible,
.form__champ textarea:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.form__aide { font-size: var(--fs-mini); color: var(--fg-soft); }

/* Un champ en erreur : le filet passe au laiton, et la raison s'écrit dessous. */
.form__champ[data-erreur] input,
.form__champ[data-erreur] textarea { border-color: var(--accent); }
.form__erreur { font-size: var(--fs-mini); color: var(--accent); }

.form__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__reponse:empty { display: none; }
.form__reponse {
  padding: .9rem 1.1rem; border-radius: var(--r); font-size: var(--fs-sm); line-height: 1.55;
  border: 1px solid var(--line); background: var(--bg-2);
}
.form__reponse[data-etat="ok"] { border-color: var(--c-green-mid); }
.form__reponse[data-etat="ko"] { border-color: var(--accent); }
.form__reponse a { color: inherit; font-weight: 600; }

.form__envoi { justify-self: start; min-height: 52px; }
@media (max-width: 560px) { .form__envoi { justify-self: stretch; } }

/* ---------------------------------------------------------------------------
   AU TÉLÉPHONE, L'IMAGE SORT DU CADRE

   Tout le site tenait dans une seule colonne aux mêmes marges : les
   photographies, les paragraphes, les listes, les vignettes. Cette régularité
   est ce qui fait qu'une page se lit comme un gabarit — rien n'a de rang,
   parce que rien n'échappe à la gouttière.

   Le bandeau de la terrasse, lui, va d'un bord à l'autre, et c'est le seul
   endroit du site qui a l'air d'avoir été composé. Ce geste devient la règle :
   au doigt, la photographie prend toute la largeur de l'écran, le texte garde
   sa marge. L'alternance des deux donne à la page le rythme qu'elle n'avait
   pas.

   La mécanique tient en une ligne : sous 700 px, `--wrap` est plus large que
   l'écran, donc une colonne mesure exactement « la largeur moins deux
   gouttières ». Une marge négative d'une gouttière de chaque côté rend donc
   très exactement la largeur de l'écran — sans `100vw`, qui compte la barre de
   défilement et ferait déborder la page.
   --------------------------------------------------------------------------- */
@media (max-width: 699px) {
  .rest-band .ph,
  .duo__img,
  .heure__img,
  .dip__a,
  .cp__img,
  .fam-photo,
  .ct-map {
    margin-inline: calc(-1 * var(--pad));
  }
  /* Le plan suit la même règle que les photographies : il ne garde que ses
     filets du haut et du bas, ceux des côtés n'ayant plus rien à border. */
  .ct-map { border-radius: 0; border-inline: 0; }
  /* `.fam-photo` porte un `margin` raccourci qui remet la marge à `auto` : il
     faut la réécrire en entier pour que la photographie sorte vraiment. */
  .fam-photo {
    max-width: none;
    margin-block: clamp(2rem, 6vw, 3rem) clamp(2.5rem, 7vw, 3.5rem);
  }
  /* Le coin arrondi est une convention de vignette : une image qui touche les
     deux bords n'en a plus l'usage. */
  .rest-band .ph, .duo__img .ph, .heure__img .ph, .dip__a .ph, .cp__img .ph, .fam-photo { border-radius: 0; }

  /* La seconde photographie du diptyque ne sort que par la droite, liseré
     compris : sa marge est réglée avec la composition, plus haut. */
}


/* =========================================================================
   6 · LA PAGE INTROUVABLE

   Elle porte l'en-tête, le pied et la barre d'appel du site : on n'est pas
   sorti de la maison, on s'est trompé de porte. Le sceau du premier écran y
   revient en petit, et les deux liens remplacent le message d'erreur — la
   seule chose utile ici est de repartir quelque part.
   ========================================================================= */
.err { text-align: center; padding-block: clamp(3.5rem, 10vw, 8rem); }
/* `block` : le sceau est un <span>, et resté en ligne il ignorait sa largeur
   et son rapport de forme — il ne s'affichait pas du tout. Sur le premier
   écran il est enfant d'une grille, ce qui le blocifiait sans qu'on y pense. */
.err__seal { display: block; width: clamp(6rem, 22vw, 9rem); margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); color: var(--c-green); }
.err h1 { max-width: 16ch; margin-inline: auto; }
.err .lead { max-width: 40ch; margin: 1.4rem auto 0; }
.err__nav {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 1rem 1.8rem; margin-top: clamp(2rem, 4vw, 2.8rem);
}
.err__tel { margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; font-size: var(--fs-sm); color: var(--fg-soft); }
.err__tel a { color: var(--fg-strong); font-variant-numeric: tabular-nums; }