/* ============================================================================
   LES PAGES INTÉRIEURES
   La carte, Pizza & Pasta, le contact, et la page d'erreur. Plus les composants
   qu'elles se partagent : les lignes de plats, le bloc des provenances, le
   formulaire et le plan d'accès.
   ============================================================================ */

/* ============================================================================
   LE HAUT DES PAGES INTÉRIEURES
   Un titre, une phrase, et la photographie ensuite. Jamais l'inverse : on doit
   savoir sur quelle page on est avant de voir une texture.
   ============================================================================ */
/* La carte n'est pas une section ordinaire — elle est coupée en deux par une
   photographie de respiration — mais elle porte le même demi-joint que toutes les
   autres, en haut comme en bas. Auparavant le vide du haut était emprunté à la
   première colonne de plats (64 px de plus), ce qui faisait deux choses à la
   fois : ouvrir la page, et décaler la reprise de lecture après la
   photographie. */
.page-carte,
.page-pizzeria {
  padding-block: var(--demi-joint);
}

/* LA CARTE EST UNE COLONNE, ET C'EST CELLE DU SITE MODÈLE.

   Elle a porté un RAIL à gauche — un sommaire de quinze rem qui suivait le
   défilement — puis une colonne de 56 rem tenant deux pistes de plats à toutes
   les tailles. Le client a retiré le premier (« je ne veux pas du tout de
   navigation en fait pour la carte ») et refusé la seconde (« la carte, tu as
   fait des trucs hyper chelou, inspire-toi de l'Étoile »).

   La composition est donc reprise de là, telle quelle :

     — UNE colonne de lecture, 620 px, centrée. C'est la mesure d'un paragraphe
       qu'on lit d'une traite, et c'est celle d'une carte imprimée ;
     — DEUX colonnes seulement au-delà de 1 100 px, et par le multi-colonnage,
       pas par une grille : les plats coulent de la première dans la seconde
       comme le texte d'un journal, au lieu d'être répartis case par case ;
     — un FILET sous chaque plat, un autre sous le titre de famille. C'est ce
       qui tient la page, pas des fonds ni des blocs.

   Ce qui reste de nous : le nom de code sous chaque plat, l'étoile des plats de
   la maison, et les prix en terre battue. C'est la particularité de cette
   maison, et le client y tient. */
.page-colonneCarte,
.page-colonnePizzeria {
  max-width: var(--colonne-lecture);
  margin-inline: auto;
}

@media (min-width: 1100px) {
  .page-colonneCarte,
  .page-colonnePizzeria {
    max-width: 1120px;
  }
}

/* ============================================================================
   LA PROVENANCE ET LES ALLERGÈNES

   Le bas de la carte imprimée. Ce n'est pas une mention légale qu'on cache :
   dans une brasserie de club, dire d'où vient la viande est un argument, et le
   bloc est composé comme tel — sur la bande sable, avec les provenances alignées
   en tableau.
   ============================================================================ */
.provenance-bloc {
  /* Même règle que la bande des desserts : un cran de moins au doigt. */
  margin-top: var(--sp-7);
  padding: var(--sp-6) var(--sp-5);
  background-color: var(--sable);
}

@media (min-width: 700px) {
  .provenance-bloc {
    margin-top: var(--sp-8);
  }
}

.provenance-titre {
  color: var(--encre);
  font-family: var(--mono);
  font-size: var(--fs-exergue);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.provenance-liste {
  display: grid;
  gap: 0 var(--sp-6);
  margin-top: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.provenance-ligne {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--filet-tenu-sable);
}

.provenance-ligne dt {
  color: var(--encre-2);
  font-size: var(--fs-corps-sm);
}

.provenance-ligne dd {
  flex: auto;
  color: var(--encre);
  font-family: var(--mono);
  font-size: var(--fs-legende);
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}

.provenance-note {
  max-width: 68ch;
  margin-top: var(--sp-5);
  color: var(--encre-2);
  font-size: var(--fs-corps-sm);
  line-height: 1.55;
}

/* ============================================================================
   UNE LIGNE DE PLAT

   Le nom, un rappel pointillé, le prix ; la description dessous, et le nom de
   code en dernier. C'est la mise en page d'une carte imprimée, et elle n'a pas
   été améliorée depuis.

   ⚠ ELLE A ÉTÉ REFAITE DEUX FOIS. D'abord parce que le nom de code occupait une
   gouttière de douze rem à gauche, aligné à droite : les trois quarts de chaque
   ligne étaient du vide, et le client a dit « la carte j'aime pas le
   positionnement ». Le nom de code est descendu SOUS le plat, dans l'ordre du
   DOM — et non ramené là par un `order`, qui aurait décalé la lecture à l'écran
   de la lecture au clavier.

   Ensuite parce que la ligne avait perdu son filet et son rappel pointillé, et
   la carte s'était étalée sur deux colonnes dès 768 px : « des trucs hyper
   chelou, inspire-toi de l'Étoile ». Les deux reviennent. Le filet sous chaque
   plat est ce qui donne son rythme à une carte longue ; le rappel pointillé est
   ce qui rattache un prix à son plat quand la colonne fait 620 px.
   ============================================================================ */
.lignedeplat-plat {
  display: flex;
  flex-direction: column;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--trait);
  break-inside: avoid;
}

/* Le dernier plat d'une famille n'a rien à séparer : le vide de la famille
   suivante s'en charge. Sur deux colonnes en revanche il le garde — sans lui,
   la colonne de gauche et celle de droite ne finiraient pas au même endroit. */
.lignedeplat-plat:last-child {
  border-bottom: 0;
}

@media (min-width: 1100px) {
  .lignedeplat-plat:last-child {
    border-bottom: 1px solid var(--trait);
  }
}

.lignedeplat-corps {
  display: contents;
}

/* Le nom de code. Il ne crie pas — c'est un second nom, pas le nom du plat —
   mais il prend l'olive de la marque et non le gris de tout à l'heure : c'est
   la particularité de cette maison, elle a le droit de se voir. */
.lignedeplat-code {
  order: 3;
  margin-top: 0.35rem;
  color: var(--encre-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* L'étoile des plats signature. Elle est dessinée par le CSS et non écrite dans
   le HTML : ce n'est pas du texte, c'est une marque, et un lecteur d'écran n'a
   rien à faire d'un caractère « ★ » au milieu d'un nom de code. Le plat porte
   `data-signature`, et c'est tout ce que le HTML en dit. */
.lignedeplat-plat[data-signature="true"] .lignedeplat-code::before {
  content: "★";
  margin-right: 0.45em;
  color: var(--accent);
  font-size: 0.95em;
  letter-spacing: 0;
}

.lignedeplat-ligne {
  order: 1;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.lignedeplat-nom {
  color: var(--encre);
  font-family: var(--serif);
  font-size: var(--fs-plat);
  font-weight: 500;
  line-height: 1.25;
}

/* Le rappel pointillé. Il pousse le prix contre le bord droit et le relie à son
   plat : sans lui, un prix flottant au milieu d'une ligne courte a l'air de ne
   se rapporter à rien. Le balisage le porte depuis toujours — une balise vide,
   à laisser vide. */
.lignedeplat-rappel {
  flex: auto;
  min-width: 2rem;
  border-bottom: 1px dotted var(--trait-champ);
  transform: translateY(0.1em);
}

/* Les prix prennent la terre battue — c'est le seul endroit de la carte où elle
   serve — et la taille du nom : un prix plus petit que son plat se cherche. */
.lignedeplat-prix {
  color: var(--accent);
  font-size: var(--fs-plat);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lignedeplat-parPersonne {
  color: var(--encre-2);
  font-size: var(--fs-legende);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.lignedeplat-description {
  order: 2;
  max-width: 60ch;
  margin-top: var(--sp-2);
  color: var(--encre-2);
  font-size: var(--fs-corps-sm);
  line-height: 1.5;
}

/* Les mentions — « sur commande », « minimum 2 personnes », « prix par
   personne » — sont des <span> séparés, et c'est le VIDE qui les sépare, pas
   un point médian. Elles étaient écrites d'un trait, avec des « · » dans le
   texte : dès que la ligne cassait — sur un téléphone, toujours — le point
   restait seul au bout de la ligne, et se lisait comme une puce. */
.lignedeplat-meta {
  order: 4;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-5);
  margin-top: var(--sp-2);
  color: var(--encre-2);
  font-family: var(--mono);
  font-size: var(--fs-legende);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.lignedeplat-meta b {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   UNE CATÉGORIE DE LA CARTE
   ============================================================================ */
.categoriecarte-categorie + .categoriecarte-categorie {
  margin-top: var(--sp-9);
}

/* LE TITRE DE FAMILLE EST UN TITRE, PAS UNE BANDE.

   Il a porté un aplat vert pleine largeur pendant une version. Le client a
   répondu : « la carte c'est horrible, ce que tu as fait à surligner les
   titres, je ne veux pas ça, fais comme l'Étoile je préfère ». Puis il a porté
   un filet noir et le corps d'un titre de page — deux fois celui d'un nom de
   plat — et c'était encore trop : « des trucs hyper chelou ».

   Il reprend donc exactement la composition du site modèle : le serif en
   capitales espacées, à peine plus gros qu'un nom de plat, sans fond ni filet
   propre. C'est le filet de la LISTE, juste dessous, qui l'assoit. */
.categoriecarte-titre {
  margin: 0;
  color: var(--encre);
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
}

.categoriecarte-note {
  max-width: 60ch;
  margin-top: var(--sp-4);
  color: var(--encre-2);
  font-size: var(--fs-corps-sm);
  line-height: 1.5;
}

/* UNE COLONNE, ET DEUX AU-DELÀ DE 1 100 PX.

   Elles ont été tirées par une grille à deux pistes dès 768 px : sur une
   tablette, deux colonnes de trois cent trente pixels pour des plats dont le
   nom en fait deux cents, c'est une carte qu'on lit en zigzag. Le site modèle
   attend 1 100 px, et il emploie le MULTI-COLONNAGE : les plats coulent de la
   première colonne dans la seconde, dans l'ordre de la carte, au lieu d'être
   distribués une case sur deux. On lit la colonne de gauche en entier, puis
   celle de droite. */
.categoriecarte-liste {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--trait);
}

@media (min-width: 1100px) {
  .categoriecarte-liste {
    columns: 2;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

/* LA FAMILLE QUI N'A PAS ENCORE DE PLATS.

   La page des desserts de la carte imprimée n'a pas été photographiée : cette
   famille ne porte donc qu'une phrase d'attente. Une bande pleine largeur
   au-dessus de deux lignes de texte serait criarde ; elle prend un simple filet
   d'appel et le fond de la bande pratique. */
.categoriecarte-annonce {
  padding: var(--sp-5) var(--sp-6);
  border-left: 2px solid var(--accent);
  background-color: var(--sable);
}

/* Au doigt, un cran de moins qu'entre deux familles : la bande porte déjà son
   propre vide intérieur, et 64 px de crème avant 24 px de sable faisaient un
   trou d'un quart d'écran. Le sélecteur redit la famille qui précède, sans
   quoi la règle générale « famille après famille », plus précise, l'emporte. */
.categoriecarte-categorie + .categoriecarte-annonce {
  margin-top: var(--sp-7);
}

@media (min-width: 700px) {
  .categoriecarte-categorie + .categoriecarte-annonce {
    margin-top: var(--sp-8);
  }
}

/* Deux lignes de texte n'ont pas besoin du filet pleine largeur des familles
   qui en portent huit. */
.categoriecarte-annonce .categoriecarte-titre {
  padding-bottom: 0;
  border-bottom: 0;
  font-size: var(--fs-h3);
}

/* ============================================================================
   LES GARNITURES ET LES SAUCES
   ============================================================================ */
.garnitures-bloc {
  margin-top: var(--sp-9);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--trait);
}

.garnitures-titre {
  color: var(--encre);
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
}

.garnitures-intro {
  max-width: 60ch;
  margin-top: var(--sp-3);
  color: var(--encre-2);
  font-size: var(--fs-corps-sm);
  line-height: 1.6;
}

.garnitures-sousTitre {
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
  color: var(--encre-3);
  font-family: var(--mono);
  font-size: var(--fs-exergue);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.garnitures-sauces {
  border-top: 1px solid var(--trait);
}

.garnitures-sauce {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--trait);
  color: var(--encre);
  font-size: var(--fs-corps-sm);
}

.garnitures-rappel {
  flex: auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--trait-champ);
  transform: translateY(0.1em);
}

.garnitures-prix {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   L'IMAGE DE RESPIRATION
   Une photographie large posée au milieu d'une longue liste : elle coupe la
   lecture au bon endroit, là où l'œil commence à fatiguer.
   ============================================================================ */
/* Elle coupe la lecture : elle prend donc l'intervalle courant, le même que
   celui qui sépare deux sections — et le même au-dessus qu'en dessous. Elle
   avait 96 px au-dessus et 160 en dessous : posée de travers dans sa liste. */
/* La respiration prend la mesure de la colonne de plats : la page n'a qu'un
   bord gauche, et la photographie ne le franchit pas. Elle allait jusqu'aux
   bords du `wrapLarge`, soit trois cents pixels plus large que la carte
   qu'elle sépare en deux. */
/* LES BANDES SONT DANS LA CARTE, PAS AVANT ELLE.

   La page a porté une photographie dans son haut de page, à côté du titre. Le
   client : « mets des images dans la carte, mais de la même disposition que
   dans l'Étoile, c'est-à-dire intégrées dans la carte, pas avant ». Le site
   modèle fait exactement cela : sa carte n'a aucune image en ouverture, et une
   bande vient respirer entre deux groupes de familles, à la mesure de la
   colonne de plats. Nous en avons trois, la carte étant deux fois plus longue.

   Elles prennent donc la mesure de la colonne : la page n'a qu'un bord gauche,
   et la photographie ne le franchit pas. Au doigt, elle va au contraire d'un
   bord à l'autre de l'écran — voir `.photo-bordABord` dans `base.css` : seule
   sur sa ligne, elle n'a aucun texte à qui s'aligner. */
.respirationcarte-respiration {
  max-width: var(--colonne-lecture);
  margin-block: var(--joint);
  margin-inline: auto;
  padding-inline: 0;
}

@media (max-width: 899px) {
  .respirationcarte-respiration {
    /* `.wrapLarge` lui donne `width: 100%` : sans cette ligne, les marges
       négatives la décalent vers la gauche au lieu de l'élargir, et elle
       découvre le bord gauche pour couvrir le bord droit. */
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--marge));
  }
}

@media (min-width: 1100px) {
  .respirationcarte-respiration {
    max-width: 1120px;
  }
}

/* TROIS BANDES, TROIS RAPPORTS. La règle du site est que deux photographies ne
   sont jamais d'accord — ni la même largeur, ni le même format. Trois bandes du
   même rapport à la file feraient un gabarit ; trois rapports différents font
   une carte illustrée. */
.respirationcarte-cadre {
  --ratio: 4 / 3;
}

.respirationcarte-cadre--haute {
  --ratio: 3 / 2;
}

.respirationcarte-cadre--bande {
  --ratio: 5 / 3;
}

/* LA TERRASSE NE SE RECADRE PAS, À AUCUNE TAILLE.

   Les autres bandes prennent une tranche de leur photographie : les nôtres sont
   des portraits, et une bande large y coupe forcément. Celle-ci a été DÉCOUPÉE
   AU FICHIER, en seize neuvièmes, sur les quatre verres et les courts derrière ;
   le cadre garde donc le même rapport partout, du téléphone au grand écran, et
   la photographie s'affiche entière. « Elle est coupée, et ça je ne veux pas. » */
.respirationcarte-cadre--terrasse {
  --ratio: 16 / 9;
}

@media (min-width: 700px) {
  .respirationcarte-cadre {
    --ratio: 2 / 1;
  }

  /* 12/5 et non 16/9 : sur une colonne de 1 120 px, seize neuvièmes font
     630 px de haut, soit les deux tiers d'un écran de portable pour une bande
     qui doit faire respirer, pas interrompre. */
  .respirationcarte-cadre--haute {
    --ratio: 12 / 5;
  }

  .respirationcarte-cadre--bande {
    --ratio: 5 / 2;
  }
}

/* ============================================================================
   LA PAGE CONTACT
   ============================================================================ */
/* LA PHOTOGRAPHIE DE LA PAGE CONTACT.

   Elle est portrait — 1 100 × 1 375 — et sur un téléphone cela lui faisait
   quatre cent quatre-vingts pixels de haut, plus de la moitié de l'écran, pour
   ouvrir une page dont le sujet est une adresse et un numéro. « Elle est
   gigantesque. » Au doigt, elle est donc recadrée en paysage : elle garde le
   haut de l'image — c'est `photo-haut` qui le dit — et prend deux cent soixante
   pixels au lieu de quatre cent quatre-vingts. Elle retrouve son portrait quand
   la page passe à deux colonnes, là où sa hauteur sert la composition. */
.page-photoContact {
  --ratio: 3 / 2;
}

@media (min-width: 900px) {
  .page-photoContact {
    --ratio: 1100 / 1375;
  }
}

.page-adresse,
.page-coordonnees {
  color: var(--encre-2);
  font-size: var(--fs-corps-sm);
  line-height: 1.7;
}

.page-coordonnees a {
  display: inline-block;
  padding-block: 0.35rem;
  padding-block: var(--sp-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.page-coordonnees a:hover {
  color: var(--encre);
}

.page-semaine {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--trait);
}

@media (min-width: 800px) {
  .page-semaine {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .page-jour:nth-child(4) {
    border-top: 1px solid var(--trait);
  }
}

.page-jour {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--trait);
  font-size: var(--fs-corps-sm);
  font-variant-numeric: tabular-nums;
}

.page-jour dt {
  color: var(--encre);
}

.page-jour dd {
  margin: 0;
  color: var(--encre-2);
  text-align: right;
}

.page-jour[data-ferme="true"] dd {
  color: var(--accent);
  font-weight: 600;
}

.page-message {
  display: grid;
  gap: var(--sp-7);
}

@media (min-width: 900px) {
  .page-message {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    align-items: start;
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .page-messageTexte {
    position: sticky;
    top: calc(var(--entete-h-lg) + var(--sp-7));
  }
}

.page-carteFormulaire {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--trait);
  background-color: var(--champ);
}

/* ============================================================================
   LE FORMULAIRE

   Il fonctionne sans JavaScript : `action` et `method` sont posés sur la
   balise, donc un envoi ordinaire part quand même.
   ============================================================================ */
.formulairecontact-formulaire,
.formulairecontact-duo {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 560px) {
  .formulairecontact-duo {
    grid-template-columns: 1fr 1fr;
  }
}

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

.formulairecontact-champ label {
  color: var(--encre);
  font-family: var(--mono);
  font-size: var(--fs-legende);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.formulairecontact-champ input,
.formulairecontact-champ textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--trait-champ);
  border-radius: var(--arrondi);
  background-color: var(--champ);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}

.formulairecontact-champ textarea {
  min-height: 160px;
  resize: vertical;
}

.formulairecontact-champ input::placeholder,
.formulairecontact-champ textarea::placeholder {
  color: var(--encre-3);
}

.formulairecontact-champ input:focus-visible,
.formulairecontact-champ textarea:focus-visible {
  outline: none;
  border-color: var(--encre);
  box-shadow: var(--focus);
}

.formulairecontact-champ[data-erreur="true"] input,
.formulairecontact-champ[data-erreur="true"] textarea {
  border-color: var(--accent);
}

.formulairecontact-erreur {
  color: var(--accent);
  font-size: var(--fs-legende);
  font-weight: 600;
  line-height: 1.5;
}

.formulairecontact-aide {
  color: var(--encre-3);
  font-size: var(--fs-legende);
  line-height: 1.5;
}

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

.formulairecontact-reponse {
  padding: var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--accent);
  color: var(--encre-2);
  font-size: var(--fs-corps-sm);
  line-height: 1.55;
}

.formulairecontact-reponse[data-statut="succes"] {
  border-left-color: var(--etat-ouvert);
  color: var(--encre);
}

.formulairecontact-reponse a {
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.formulairecontact-envoi {
  justify-self: start;
}

/* ============================================================================
   LE PLAN D'ACCÈS

   Le fond est une image : rien n'est demandé à OpenStreetMap tant que le
   visiteur ne l'a pas décidé. C'est meilleur pour la vitesse d'affichage comme
   pour sa vie privée.
   ============================================================================ */
.plan-plan {
  position: relative;
  height: 400px;
  overflow: hidden;
  /* Ce qu'on voit le temps que l'image de plan arrive : un aplat de sable, pas
     un trou. */
  background-color: var(--sable);
}

@media (min-width: 900px) {
  .plan-plan {
    height: 460px;
  }
}

/* Le fond de plan est une capture de carte : tel quel, ses couleurs vives et
   son gris d'application jurent avec la crème de la page et attirent l'œil plus
   que tout le reste. On le calme — sans l'inverser, ce qui rendrait les rues
   illisibles. */
.plan-fond {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sur une page sombre, le plan était assombri pour s'y fondre. Sur de la
     crème c'est l'inverse : on le décolore et on l'éclaircit, pour qu'il ait
     l'air d'un plan imprimé au dos d'un carton d'invitation plutôt que d'une
     capture d'écran collée là. */
  filter: saturate(0.3) contrast(0.9) brightness(1.06);
}

.plan-cadre {
  width: 100%;
  height: 100%;
  border: 0;
}

.plan-marqueur {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -44px 0 0 -22px;
  border: 1px solid var(--texte-1-sombre);
  border-radius: 50%;
  background-color: var(--sapin);
  color: var(--terre-400);
  pointer-events: none;
}

.plan-ouvrir {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end;
  width: 100%;
  padding: var(--sp-5);
  background: none;
  border: 0;
  cursor: pointer;
}

.plan-ouvrir:focus-visible {
  outline: 2px solid var(--sapin);
  outline-offset: -4px;
}

.plan-etiquette {
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--filet-champ);
  background-color: var(--creme);
  color: var(--texte-1);
  font-family: var(--mono);
  font-size: var(--fs-legende);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    background-color var(--dur-vif) var(--sortie),
    color var(--dur-vif) var(--sortie);
}

.plan-ouvrir:hover .plan-etiquette {
  background-color: var(--sapin);
  border-color: var(--sapin);
  color: var(--texte-1-sombre);
}

.plan-credit {
  padding-block: var(--sp-3);
  color: var(--encre-3);
  font-family: var(--mono);
  font-size: var(--fs-legende);
}

/* Le crédit tient sur deux lignes au doigt, et il faut que ce soit LES DEUX
   BONNES : « Fond de plan » d'un côté, la mention d'OpenStreetMap de l'autre.
   Sans cette ligne, la coupure tombait au milieu de la mention — « © les » sur
   la première ligne, « contributeurs OpenStreetMap » sur la seconde. */
.plan-credit a {
  display: inline-block;
  padding-block: var(--sp-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ============================================================================
   LE BLOC « RÉSERVER » EN BAS DES PAGES
   ============================================================================ */
.appelreservation-bloc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  /* Au doigt, 48 px avant le filet et 32 après : le bloc gardait les mesures
     du grand écran — 96 et 64 — et le dernier plat était suivi de plus d'un
     tiers d'écran de crème avant « Une table ce soir ? ». */
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--trait);
}

@media (min-width: 700px) {
  .appelreservation-bloc {
    margin-top: var(--sp-9);
    padding-top: var(--sp-8);
  }
}

.appelreservation-titre {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
}

.appelreservation-detail {
  color: var(--encre-2);
  font-size: var(--fs-corps-sm);
  line-height: 1.6;
}

.appelreservation-action {
  margin-top: var(--sp-2);
}

/* ============================================================================
   LA PAGE INTROUVABLE
   ============================================================================ */
.not-found-page {
  display: grid;
  align-content: center;
  min-height: 60svh;
  padding-block: var(--demi-joint);
}

.not-found-code {
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--fs-exergue);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.not-found-titre {
  max-width: 18ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-h1);
  letter-spacing: -0.025em;
  line-height: 1.04;
}

.not-found-chapo {
  max-width: 52ch;
  margin-top: var(--sp-5);
  color: var(--encre-2);
  font-size: var(--fs-chapo);
  line-height: 1.55;
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-8);
}