/* =========================================================================
   Au Sanglier Rieur, Nice
   Feuille de style du site. Écrite à la main, sans framework, sans build.

   Aucune URL absolue : tous les chemins sont relatifs à ce fichier, donc le
   site fonctionne à l'identique dans un sous-dossier et sur un domaine racine.
   Aucun appel à un service externe : les polices sont dans assets/polices.

   Sommaire
     1. Polices
     2. Palette et variables
     3. Base et réinitialisation
     4. Typographie
     5. Mise en page
     6. Liens, boutons, formulaires
     7. Filets, séparateurs, ornements
     8. Listes
     9. Tableaux de prix
    10. Cartes et encadrés
    11. Composants de marque
    12. En-tête, pied de page, barre mobile
    13. Accessibilité
    14. Impression
   ========================================================================= */


/* 1. Polices ==============================================================
   Playfair Display pour les titres, Alegreya Sans pour le corps.
   Substitutions déclarées en attendant les fontes sous licence d'Avenue Jolia.
   Sous-ensemble latin uniquement : suffisant pour le français, y compris œ et Ÿ.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  src: url('../polices/playfair-display-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../polices/playfair-display-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alegreya Sans';
  src: url('../polices/alegreya-sans-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alegreya Sans';
  src: url('../polices/alegreya-sans-latin-400-italique.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Alegreya Sans';
  src: url('../polices/alegreya-sans-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 2. Palette et variables =================================================
   Six couleurs, pas une de plus. Aucun dégradé.

   Règle de contraste, vérifiée :
     encre sur crème            13,4:1   texte courant
     vert sur crème              9,1:1   titres, texte
     crème sur vert              9,1:1   texte sur bandeau
     sable sur vert              5,8:1   petites capitales sur bandeau
     or sur crème                2,8:1   ORNEMENT SEULEMENT, jamais du texte
     sable sur crème             1,6:1   FILETS SEULEMENT, jamais du texte
   ------------------------------------------------------------------------- */

:root {
  /* Palette de marque */
  --creme:       #FCF5E3;
  --vert:        #404435;
  --sable:       #DCC496;
  --or:          #C08A46;
  --encre:       #2A2A24;
  --blanc-casse: #FFFDF6;

  /* Rôles */
  --fond:        var(--creme);
  --fond-carte:  var(--blanc-casse);
  --texte:       var(--encre);
  --texte-fort:  var(--vert);
  --filet:       var(--sable);
  --ornement:    var(--or);

  /* Mesures */
  --largeur-page:    72rem;   /* conteneur large */
  --largeur-mesure:  34rem;   /* colonne de lecture confortable */
  --gouttiere:       clamp(1.25rem, 4vw, 3rem);
  --pas:             clamp(2.75rem, 6vw, 5.5rem);   /* rythme vertical des sections */
  --pas-petit:       clamp(1.5rem, 3vw, 2.5rem);

  /* Typographie */
  --serif:  'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans:   'Alegreya Sans', 'Optima', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --t-capitale: 0.75rem;
  --t-petit:    0.875rem;
  --t-corps:    1rem;
  --t-lead:     clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-h4:       1.0625rem;
  --t-h3:       clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-h2:       clamp(1.6rem, 1.3rem + 1.4vw, 2.35rem);
  --t-h1:       clamp(2.15rem, 1.5rem + 3vw, 3.5rem);

  --interligne:  1.65;
  --tracking:    0.14em;

  /* Le seul mouvement autorisé : un fondu discret au survol. */
  --fondu: 180ms ease;

  /* Vichy : voir section 11. */
  --carreau:       28px;
  --vichy-opacite: 0.62;
}


/* 3. Base et réinitialisation =============================================
   ------------------------------------------------------------------------- */

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

html {
  /* 17 px sur la base navigateur de 16 px, sans empêcher l'agrandissement
     par l'utilisateur. Le public de ce restaurant n'a pas vingt ans. */
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

@media (min-width: 62rem) {
  html { font-size: 112.5%; }   /* 18 px */
}

body {
  margin: 0;
  background-color: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--t-corps);
  line-height: var(--interligne);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* aucun défilement horizontal, y compris pour la litanie */
}

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

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote, table { margin: 0; }

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

hr { border: 0; margin: 0; }

::selection { background: var(--sable); color: var(--encre); }


/* 4. Typographie ==========================================================
   ------------------------------------------------------------------------- */

h1, .t-h1, h2, .t-h2, h3, .t-h3 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--texte-fort);
  text-wrap: balance;
}

h1, .t-h1 {
  font-size: var(--t-h1);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

h2, .t-h2 {
  font-size: var(--t-h2);
  line-height: 1.13;
  letter-spacing: -0.01em;
}

h3, .t-h3 {
  font-size: var(--t-h3);
  line-height: 1.24;
}

h4, .t-h4 {
  font-family: var(--sans);
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1.35;
  color: var(--texte-fort);
  letter-spacing: 0.02em;
}

/* Petites capitales de la marque : titres de section, surtitres, étiquettes. */
.capitale {
  font-family: var(--sans);
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--texte-fort);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
}

.petit    { font-size: var(--t-petit); }
.mesure   { max-width: var(--largeur-mesure); }
.centre   { text-align: center; }
.serif    { font-family: var(--serif); }

p + p,
p + ul,
p + ol,
ul + p,
h2 + p,
h3 + p,
h4 + p { margin-top: 0.85em; }

h2 + h3, p + h3 { margin-top: 1.6em; }
p + h2         { margin-top: 2em; }

/* Un titre suivi d'un bloc, et non d'un paragraphe, respire pareil. */
h1 + p { margin-top: 0.9em; }

h2 + .horaires, h3 + .horaires,
h2 + .boutons,  h3 + .boutons,
h2 + table,     h3 + table,
h2 + ul,        h3 + ul,
h2 + .carte,    h3 + .carte { margin-top: 1rem; }

strong, b { font-weight: 700; }

/* Chiffres alignés dans les tableaux et les prix. */
.tabulaire { font-variant-numeric: tabular-nums lining-nums; }

/* Citation. Le mot du client, mis en scène, jamais réécrit. */
.citation {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.35;
  color: var(--texte-fort);
  max-width: 32rem;
}

.citation p + p { margin-top: 0.6em; }

.citation__source {
  display: block;
  margin-top: 1.25em;
  font-family: var(--sans);
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--texte);
}


/* 5. Mise en page =========================================================
   ------------------------------------------------------------------------- */

.contenu {
  width: 100%;
  max-width: var(--largeur-page);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.contenu--etroit { max-width: 46rem; }
.contenu--lecture { max-width: var(--largeur-mesure); }

.section { padding-block: var(--pas); }
.section--serree { padding-block: var(--pas-petit); }

/* Bandeau pleine largeur en vert. Sert à la litanie et au pied de page. */
.bande-verte {
  background-color: var(--vert);
  color: var(--creme);
}

.bande-verte h1,
.bande-verte h2,
.bande-verte h3,
.bande-verte h4,
.bande-verte .capitale { color: var(--creme); }

.bande-verte .capitale--sable { color: var(--sable); }

.grille {
  display: grid;
  gap: var(--pas-petit);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  align-items: start;
}

.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grille--serree { gap: 1rem; }

.pile > * + * { margin-top: 1rem; }
.pile--large > * + * { margin-top: var(--pas-petit); }

/* Bloc qui se détache par un décalage franc, sans flou. */
.decale { box-shadow: 7px 7px 0 0 rgb(220 196 150 / 0.55); }


/* 6. Liens, boutons =======================================================
   ------------------------------------------------------------------------- */

a {
  color: var(--texte-fort);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--sable);
  text-underline-offset: 0.18em;
  transition: color var(--fondu), text-decoration-color var(--fondu);
}

a:hover { text-decoration-color: currentColor; }

.bande-verte a { color: var(--creme); text-decoration-color: rgb(220 196 150 / 0.8); }
.bande-verte a:hover { color: var(--sable); }

.lien-nu { text-decoration: none; }
.lien-nu:hover { text-decoration: underline; text-decoration-color: var(--sable); }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.7em;
  border: 1px solid var(--vert);
  border-radius: 2px;
  background-color: var(--vert);
  color: var(--creme);
  font-family: var(--sans);
  font-size: var(--t-petit);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--fondu), color var(--fondu), border-color var(--fondu);
}

.bouton:hover {
  background-color: var(--encre);
  border-color: var(--encre);
  color: var(--creme);
  text-decoration: none;
}

.bouton--second {
  background-color: transparent;
  color: var(--vert);
}

.bouton--second:hover {
  background-color: var(--vert);
  border-color: var(--vert);
  color: var(--creme);
}

/* Un bouton posé sur un fond vert.
   La règle .bande-verte a impose le crème à tous les liens : on la neutralise
   ici, sur les boutons, avec une sélection plus forte. L'ordre compte, la
   variante claire vient en dernier.
   Sans cela, le libellé deviendrait crème sur crème, donc invisible. */
.bande-verte a.bouton,
.pied a.bouton {
  color: var(--creme);
  text-decoration: none;
}

.bouton--clair,
.bande-verte a.bouton--clair,
.pied a.bouton--clair {
  background-color: var(--creme);
  border-color: var(--creme);
  color: var(--vert);
  text-decoration: none;
}

.bouton--clair:hover,
.bande-verte a.bouton--clair:hover,
.pied a.bouton--clair:hover {
  background-color: var(--sable);
  border-color: var(--sable);
  color: var(--encre);
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Numéro de téléphone mis en avant. Toujours cliquable. */
.telephone-grand {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--texte-fort);
  text-decoration: none;
  border-bottom: 2px solid var(--sable);
  padding-bottom: 0.06em;
  transition: border-color var(--fondu);
}

.telephone-grand:hover { border-bottom-color: var(--or); text-decoration: none; }


/* 7. Filets, séparateurs, ornements =======================================
   ------------------------------------------------------------------------- */

.filet {
  height: 1px;
  background-color: var(--filet);
  border: 0;
}

/* Filet double, comme sur une carte imprimée. */
.filet-double {
  height: 4px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  background: none;
}

.filet-vertical {
  border-left: 1px solid var(--filet);
  padding-left: var(--pas-petit);
}

/* Séparateur de section à l'empreinte : un filet, l'empreinte posée dessus. */
.separateur {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 1.75rem);
  color: var(--ornement);
}

.separateur::before,
.separateur::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background-color: var(--filet);
}

.separateur--nu::before,
.separateur--nu::after { display: none; }

.separateur--nu { justify-content: center; }

.separateur .marque--empreinte-sanglier {
  width: 0.85rem;
  flex: 0 0 auto;
  fill: currentColor;
}

.separateur--fort .marque--empreinte-sanglier { width: 1.25rem; }

/* Le sanglier de respiration. Un seul par page. */
.respiration {
  display: flex;
  justify-content: center;
  color: var(--ornement);
}

.respiration .marque--sanglier-bondissant {
  width: clamp(7rem, 22vw, 12rem);
  fill: currentColor;
}

.bande-verte .respiration { color: var(--sable); }


/* 8. Listes ===============================================================
   ------------------------------------------------------------------------- */

/* Liste à puces empreinte. La puce est le fichier de marque, masqué et
   recoloré en CSS : un seul fichier, aucune duplication. */
.liste-empreinte > li {
  position: relative;
  padding-left: 1.9em;
  margin-top: 0.5em;
}

.liste-empreinte > li:first-child { margin-top: 0; }

.liste-empreinte > li::before {
  content: '';
  position: absolute;
  left: 0.15em;
  top: 0.42em;
  width: 0.62em;
  height: 0.77em;
  background-color: var(--ornement);
  -webkit-mask: url('../marque/empreinte-sanglier.svg') no-repeat center / contain;
          mask: url('../marque/empreinte-sanglier.svg') no-repeat center / contain;
}

.bande-verte .liste-empreinte > li::before { background-color: var(--sable); }

/* Liste d'informations, deux colonnes : intitulé et valeur. */
.liste-infos { display: grid; gap: 0.35rem; }

.liste-infos > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  align-items: baseline;
  padding-block: 0.35rem;
  border-bottom: 1px solid rgb(220 196 150 / 0.55);
}

.liste-infos dt {
  flex: 0 0 auto;
  min-width: 8rem;
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--texte-fort);
}

.liste-infos dd { margin: 0; flex: 1 1 12rem; }


/* 9. Tableaux de prix =====================================================
   Les prix sont du texte, jamais une image.
   ------------------------------------------------------------------------- */

.tableau-prix {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}

.tableau-prix caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.9rem;
  font-size: var(--t-petit);
  color: var(--texte);
}

.tableau-prix th,
.tableau-prix td {
  padding: 0.85rem 0.75rem;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid rgb(220 196 150 / 0.7);
}

.tableau-prix thead th {
  font-family: var(--sans);
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--texte-fort);
  border-bottom: 1px solid var(--filet);
  border-top: 1px solid var(--filet);
}

.tableau-prix tbody th {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--texte-fort);
}

.tableau-prix .prix {
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--texte-fort);
}

.tableau-prix td:last-child,
.tableau-prix th:last-child { text-align: right; }

.tableau-prix tr:last-child th,
.tableau-prix tr:last-child td { border-bottom: 0; }

.tableau-prix__detail {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-petit);
  font-weight: 400;
  color: var(--texte);
  margin-top: 0.15em;
}

/* Table étroite : on empile proprement, sans défilement horizontal. */
@media (max-width: 34rem) {
  .tableau-prix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tableau-prix tr { display: block; padding-block: 0.9rem; border-bottom: 1px solid rgb(220 196 150 / 0.7); }
  .tableau-prix th,
  .tableau-prix td { display: block; padding: 0.1rem 0; border: 0; text-align: left; }
  .tableau-prix td:last-child { text-align: left; margin-top: 0.3rem; }
}

.mention-carte {
  font-size: var(--t-petit);
  color: var(--texte);
  margin-top: 1.25rem;
}


/* 10. Cartes et encadrés ==================================================
   ------------------------------------------------------------------------- */

.carte {
  background-color: var(--fond-carte);
  border: 1px solid var(--filet);
  border-radius: 2px;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.carte--vert {
  background-color: var(--vert);
  border-color: var(--vert);
  color: var(--creme);
}

/* Carte de plat. La photo est facultative : sans photo, aucun aplat vide. */
.carte-plat {
  background-color: var(--fond-carte);
  border: 1px solid var(--filet);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 24rem;
}

.carte-plat__image {
  margin: 0;
  background-color: var(--creme);
}

.carte-plat__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.carte-plat__corps { padding: 1.25rem 1.35rem 1.4rem; }

.carte-plat__surtitre {
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--texte-fort);
}

.carte-plat__nom {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--texte-fort);
  margin-top: 0.4rem;
}

.carte-plat__note {
  font-size: var(--t-petit);
  margin-top: 0.5rem;
}

.carte-plat__pied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(220 196 150 / 0.7);
}

.carte-plat__prix {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--texte-fort);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Encadré manuscrit. Le manuscrit est un fichier de marque, jamais une police
   d'imitation : « Le temps du partage » et « table des bons copains » sont les
   deux seuls manuscrits de la marque. */
.encadre-manuscrit {
  background-color: var(--fond-carte);
  border: 1px solid var(--filet);
  border-radius: 2px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  max-width: 32rem;
}

.encadre-manuscrit .marque--script-temps-partage {
  width: min(17rem, 80%);
  margin-inline: auto;
  color: var(--or);
  fill: currentColor;
}

.encadre-manuscrit__texte {
  margin-top: 1.1rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.45;
  color: var(--texte-fort);
}

.encadre-manuscrit .separateur { margin-block: 1.1rem; }

.encadre-manuscrit__signature {
  width: min(11rem, 60%);
  margin: 1.25rem auto 0;
  color: var(--encre);
  fill: currentColor;
}


/* 11. Composants de marque ================================================
   ------------------------------------------------------------------------- */

/* --- Logotype ------------------------------------------------------------
   Fichier raster de 1979 px de large, avec la trame de l'impression.
   Jamais affiché au-delà de 660 px : au-delà, la trame se voit. */
.logotype {
  display: block;
  width: 100%;
  max-width: 660px;
  height: auto;
  margin-inline: auto;
}

/* Le composant enveloppe l'image dans un picture : sans cette règle, la
   largeur s'appliquerait à l'enveloppe et l'image resterait à sa taille. */
.entete__logo picture,
.bloc-marque picture,
.couverture picture { display: block; width: 100%; }

.bloc-marque picture,
.couverture picture { margin-inline: auto; }

.hero .bloc-marque picture { width: min(100%, 26rem, 44vh); }
.couverture picture { width: min(84%, 22rem); }
.entete__logo picture { max-width: 158px; }

@media (min-width: 34rem) {
  .entete__logo picture { max-width: 200px; }
}

.logotype--entete { max-width: 158px; }

@media (min-width: 34rem) {
  .logotype--entete { max-width: 200px; }
}
.logotype--pied   { max-width: 240px; }

/* Le logotype en crème sur fond vert : masque plutôt que duplication. */
.logotype--masque {
  background-color: var(--creme);
  -webkit-mask: url('../marque/logo-sanglier-rieur.png') no-repeat center / contain;
          mask: url('../marque/logo-sanglier-rieur.png') no-repeat center / contain;
  aspect-ratio: 1979 / 826;
}

.logotype--masque img { visibility: hidden; }

/* --- Bloc de marque complet ---------------------------------------------
   Logotype, écusson, signature manuscrite. Très aéré, tout centré.
   N'apparaît qu'une seule fois sur le site, dans le hero de l'accueil. */
.bloc-marque {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bloc-marque__logotype { width: min(100%, 30rem); }

.bloc-marque--large .bloc-marque__logotype { width: min(100%, 660px); }

.bloc-marque__ecusson {
  width: clamp(4.5rem, 13vw, 6.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.bloc-marque__signature {
  width: min(19rem, 78%);
  margin-top: clamp(1.25rem, 3.5vw, 2rem);
  color: var(--encre);
  fill: currentColor;
}

.bande-verte .bloc-marque__signature { color: var(--sable); }

/* Écusson : deux parties recolorables séparément. Les couleurs sont posées
   ici, jamais dans le fichier. */
.ecusson-blason path   { fill: var(--sable); }
.ecusson-sanglier g    { fill: var(--encre); }

.ecusson--or .ecusson-blason path      { fill: var(--vert); }
.ecusson--or .ecusson-sanglier g       { fill: var(--or); }

.ecusson--clair .ecusson-blason path   { fill: var(--sable); }
.ecusson--clair .ecusson-sanglier g    { fill: var(--vert); }

/* --- Marques posées en masque ------------------------------------------
   Les fichiers de l'agence sont vectorisés au tracé et certains pèsent
   lourd. Insérés dans le HTML, ils seraient recopiés dans chaque page sans
   cache possible. En masque, le fichier est chargé une fois pour tout le
   site, et il se recolore toujours par currentColor : un seul fichier
   source, jamais dupliqué pour changer sa couleur.
   Seul l'écusson reste inséré dans le document : il a deux couleurs à
   recolorer séparément, ce qu'un masque ne sait pas faire. */
.marque-masque {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.marque-masque.marque--empreinte-sanglier {
  aspect-ratio: 100 / 124;
  -webkit-mask-image: url('../marque/empreinte-sanglier.svg');
          mask-image: url('../marque/empreinte-sanglier.svg');
}

.marque-masque.marque--monogramme-sr {
  aspect-ratio: 1522 / 2870;
  -webkit-mask-image: url('../marque/monogramme-sr.svg');
          mask-image: url('../marque/monogramme-sr.svg');
}

.marque-masque.marque--sanglier-bondissant {
  aspect-ratio: 587 / 318;
  -webkit-mask-image: url('../marque/sanglier-bondissant.svg');
          mask-image: url('../marque/sanglier-bondissant.svg');
}

.marque-masque.marque--illu-planche {
  aspect-ratio: 1088 / 1139;
  -webkit-mask-image: url('../marque/illu-planche.svg');
          mask-image: url('../marque/illu-planche.svg');
}

.marque-masque.marque--illu-tomates {
  aspect-ratio: 561 / 1087;
  -webkit-mask-image: url('../marque/illu-tomates.svg');
          mask-image: url('../marque/illu-tomates.svg');
}

.marque-masque.marque--script-table-des-bons-copains {
  aspect-ratio: 1956 / 267;
  -webkit-mask-image: url('../marque/script-table-des-bons-copains.svg');
          mask-image: url('../marque/script-table-des-bons-copains.svg');
}

.marque-masque.marque--script-temps-partage {
  aspect-ratio: 705 / 110;
  -webkit-mask-image: url('../marque/script-temps-partage.svg');
          mask-image: url('../marque/script-temps-partage.svg');
}

.marque-masque.marque--signature-elisa-sophie {
  aspect-ratio: 773 / 227;
  -webkit-mask-image: url('../marque/signature-elisa-sophie.svg');
          mask-image: url('../marque/signature-elisa-sophie.svg');
}

/* Monogramme SR : marque de section, ancre de retour en haut. */
.monogramme {
  width: 2.6rem;
  color: var(--vert);
  fill: currentColor;
}

.bande-verte .monogramme { color: var(--sable); }

/* --- La litanie ---------------------------------------------------------
   Serif capitales, crème sur vert, interlignage très serré, lignes de
   longueurs inégales dont les plus longues débordent volontairement.
   Statique : aucune animation, aucun défilement. */
/* Sept lignes à 0,95 d'interligne, qui doivent tenir dans un écran de
   portable 13 pouces. La taille est donc bornée en vh en plus de la largeur
   du conteneur, et le conteneur est resserré pour que les lignes longues
   débordent quand même : c'est ce débordement qui fait l'effet de mur. */
.litanie {
  background-color: var(--vert);
  color: var(--creme);
  padding-block: clamp(1.25rem, 4vh, 2.75rem);
}

.litanie__mur {
  width: min(100%, 46rem);
  margin-inline: auto;
  overflow: hidden;
  container-type: inline-size;
}

.litanie__ligne {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: min(12.6cqw, 11vh);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 26rem) {
  .litanie__ligne { font-size: min(14cqw, 9.5vh); }
}

/* --- Le vichy -----------------------------------------------------------
   Deuxième matière de la marque. Fait en CSS, jamais en image : net à toutes
   les résolutions, sans poids, et recolorable.
   Règle d'usage : jamais en fond de page entière. Petites surfaces
   seulement. Sur une grande surface, passer en .vichy--texture. */
.vichy {
  background-color: var(--creme);
  background-image:
    repeating-linear-gradient(90deg,
      rgb(64 68 53 / var(--vichy-opacite)) 0 var(--carreau),
      transparent var(--carreau) calc(var(--carreau) * 2)),
    repeating-linear-gradient(0deg,
      rgb(64 68 53 / var(--vichy-opacite)) 0 var(--carreau),
      transparent var(--carreau) calc(var(--carreau) * 2));
}

/* Grande surface : le motif devient une texture. */
.vichy--texture { --vichy-opacite: 0.12; }

/* Bandeau fin, petit carreau. */
.vichy--fin  { --carreau: 12px; height: 14px; }
.vichy--bande { --carreau: 16px; height: 28px; }

/* En-tête de carte ou vignette. */
.vichy--vignette { --carreau: 18px; }

/* --- Le semis d'empreintes ---------------------------------------------
   Semées en diagonale, par paires, tailles légèrement différentes, rotations
   entre moins 25 et plus 25 degrés. Jamais alignées, jamais en grille.
   C'est une trace de passage, pas une texture.
   Les positions sont posées ici, pas en attribut de style : le site tourne
   sous une politique de sécurité de contenu stricte. */
.semis {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--or);
  z-index: 0;
}

.semis__pas {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--taille, 1.8rem);
  transform: rotate(var(--r, 0deg));
  opacity: var(--o, 0.4);
}

.semis__pas .marque--empreinte-sanglier { fill: currentColor; width: 100%; }

/* Le second sabot de la paire, décalé, plus petit, tourné autrement. */
.semis__pas--suite {
  --taille: 1.35rem;
  --o: 0.3;
}

/* Diagonale montante, de bas gauche vers haut droite. Sept pas, quatorze
   sabots. Aucune valeur ronde, aucun alignement. */
.semis--montante .semis__pas:nth-child(1)  { --x:  4%;  --y: 82%; --r: -19deg; --taille: 2.07rem; }
.semis--montante .semis__pas:nth-child(2)  { --x: 11%;  --y: 74%; --r:  12deg; }
.semis--montante .semis__pas:nth-child(3)  { --x: 21%;  --y: 61%; --r: -07deg; --taille: 1.77rem; }
.semis--montante .semis__pas:nth-child(4)  { --x: 28%;  --y: 53%; --r:  23deg; }
.semis--montante .semis__pas:nth-child(5)  { --x: 41%;  --y: 44%; --r: -24deg; --taille: 2.32rem; }
.semis--montante .semis__pas:nth-child(6)  { --x: 49%;  --y: 33%; --r:  05deg; }
.semis--montante .semis__pas:nth-child(7)  { --x: 62%;  --y: 26%; --r:  16deg; --taille: 1.65rem; }
.semis--montante .semis__pas:nth-child(8)  { --x: 69%;  --y: 17%; --r: -13deg; }
.semis--montante .semis__pas:nth-child(9)  { --x: 79%;  --y: 63%; --r:  21deg; --taille: 1.95rem; }
.semis--montante .semis__pas:nth-child(10) { --x: 86%;  --y: 54%; --r: -09deg; }
.semis--montante .semis__pas:nth-child(11) { --x: 33%;  --y: 88%; --r:  18deg; --taille: 1.52rem; }
.semis--montante .semis__pas:nth-child(12) { --x: 40%;  --y: 79%; --r: -22deg; }
.semis--montante .semis__pas:nth-child(13) { --x: 91%;  --y: 12%; --r: -16deg; --taille: 1.83rem; }
.semis--montante .semis__pas:nth-child(14) { --x: 96%;  --y: 03%; --r:  09deg; }

/* Diagonale descendante, pour varier d'une section à l'autre. */
.semis--descendante .semis__pas:nth-child(1)  { --x:  3%;  --y: 07%; --r:  17deg; --taille: 2.01rem; }
.semis--descendante .semis__pas:nth-child(2)  { --x: 10%;  --y: 16%; --r: -11deg; }
.semis--descendante .semis__pas:nth-child(3)  { --x: 23%;  --y: 31%; --r:  24deg; --taille: 1.71rem; }
.semis--descendante .semis__pas:nth-child(4)  { --x: 30%;  --y: 39%; --r: -06deg; }
.semis--descendante .semis__pas:nth-child(5)  { --x: 44%;  --y: 54%; --r: -21deg; --taille: 2.26rem; }
.semis--descendante .semis__pas:nth-child(6)  { --x: 52%;  --y: 63%; --r:  08deg; }
.semis--descendante .semis__pas:nth-child(7)  { --x: 66%;  --y: 74%; --r:  14deg; --taille: 1.59rem; }
.semis--descendante .semis__pas:nth-child(8)  { --x: 73%;  --y: 83%; --r: -18deg; }
.semis--descendante .semis__pas:nth-child(9)  { --x: 84%;  --y: 27%; --r: -23deg; --taille: 1.89rem; }
.semis--descendante .semis__pas:nth-child(10) { --x: 90%;  --y: 36%; --r:  11deg; }
.semis--descendante .semis__pas:nth-child(11) { --x: 17%;  --y: 66%; --r: -14deg; --taille: 1.46rem; }
.semis--descendante .semis__pas:nth-child(12) { --x: 24%;  --y: 76%; --r:  20deg; }
.semis--descendante .semis__pas:nth-child(13) { --x: 93%;  --y: 88%; --r:  06deg; --taille: 1.77rem; }
.semis--descendante .semis__pas:nth-child(14) { --x: 98%;  --y: 96%; --r: -25deg; }

@media (max-width: 48rem) {
  .semis__pas { opacity: calc(var(--o, 0.4) * 0.6); }
}

/* Conteneur d'une section qui reçoit un semis. */
.avec-semis { position: relative; }
.avec-semis > *:not(.semis) { position: relative; z-index: 1; }

/* --- Le bloc horaires --------------------------------------------------
   L'état d'ouverture est calculé côté serveur depuis la configuration.
   Aucun horaire n'est écrit dans ce composant. Aucun JavaScript. */
.horaires { max-width: 30rem; }

.horaires__etat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--filet);
}

.horaires__pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--sans);
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--texte-fort);
}

.horaires__pastille::before {
  content: '';
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  border: 1px solid var(--vert);
  background-color: transparent;
}

.horaires__pastille--ouvert::before { background-color: var(--vert); }

.bande-verte .horaires__pastille { color: var(--sable); }
.bande-verte .horaires__pastille::before { border-color: var(--sable); }
.bande-verte .horaires__pastille--ouvert::before { background-color: var(--sable); }

.horaires__phrase { font-size: var(--t-corps); }

.horaires__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.horaires__table th,
.horaires__table td {
  padding: 0.5rem 0.25rem;
  text-align: left;
  border-bottom: 1px solid rgb(220 196 150 / 0.5);
}

.horaires__table th {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--texte);
}

.horaires__table td { text-align: right; white-space: nowrap; }

.horaires__table tr:last-child th,
.horaires__table tr:last-child td { border-bottom: 0; }

.horaires__table tr[data-aujourdhui] th,
.horaires__table tr[data-aujourdhui] td {
  font-weight: 700;
  color: var(--texte-fort);
}

.bande-verte .horaires__table th,
.bande-verte .horaires__table td { color: var(--creme); border-bottom-color: rgb(220 196 150 / 0.28); }
.bande-verte .horaires__table tr[data-aujourdhui] th,
.bande-verte .horaires__table tr[data-aujourdhui] td { color: var(--sable); }

.horaires__ferme { color: var(--texte); }

.horaires__note {
  margin-top: 1rem;
  font-size: var(--t-petit);
}


/* 12. En-tête, pied de page, barre mobile =================================
   ------------------------------------------------------------------------- */

.entete {
  position: relative;
  z-index: 30;
  border-bottom: 1px solid var(--filet);
  background-color: var(--fond);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}

.entete__logo { flex: 0 0 auto; display: block; text-decoration: none; }
.entete__logo:hover { text-decoration: none; }

.entete__nav { display: none; }

.entete__liens {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.75rem);
}

.entete__liens a {
  font-family: var(--sans);
  font-size: var(--t-petit);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--texte-fort);
}

.entete__liens a:hover { text-decoration: underline; text-decoration-color: var(--sable); }

.entete__liens a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-decoration-thickness: 2px;
}

.entete__actions {
  display: none;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
}

.entete__tel {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: var(--texte-fort);
  border-bottom: 1px solid var(--sable);
}

.entete__tel:hover { border-bottom-color: var(--or); text-decoration: none; }

/* Navigation mobile sans JavaScript : un élément details natif. */
.nav-mobile { flex: 0 0 auto; }

.nav-mobile > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6em 0.9em;
  border: 1px solid var(--vert);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--texte-fort);
}

.nav-mobile > summary::-webkit-details-marker { display: none; }

.nav-mobile__barres {
  display: inline-block;
  width: 1em;
  height: 1px;
  background-color: currentColor;
  box-shadow: 0 -4px 0 0 currentColor, 0 4px 0 0 currentColor;
}

.nav-mobile[open] > summary { background-color: var(--vert); color: var(--creme); }

.nav-mobile__panneau {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background-color: var(--fond);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding: 1rem var(--gouttiere) 1.35rem;
}

.nav-mobile__panneau a {
  display: block;
  padding-block: 0.7rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--texte-fort);
  border-bottom: 1px solid rgb(220 196 150 / 0.55);
}

@media (min-width: 56rem) {
  .entete__nav,
  .entete__actions { display: flex; }
  .nav-mobile { display: none; }
}

/* --- Pied de page ------------------------------------------------------- */

.pied { background-color: var(--vert); color: var(--creme); }

.pied__vichy { --carreau: 14px; height: 22px; }

.pied__corps {
  display: grid;
  gap: var(--pas-petit);
  padding-block: var(--pas);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .pied__corps { grid-template-columns: 1.1fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
}

.pied a { color: var(--creme); }

.pied__titre {
  font-family: var(--sans);
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--sable);
  margin-bottom: 0.9rem;
}

.pied__nap { font-style: normal; line-height: 1.55; }
.pied__nap strong { display: block; font-size: 1.0625rem; }

.pied__nav a {
  display: block;
  padding-block: 0.28rem;
  text-decoration: none;
}

.pied__nav a:hover { text-decoration: underline; text-decoration-color: var(--sable); }

.pied__bas {
  border-top: 1px solid rgb(220 196 150 / 0.28);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-petit);
}

.pied__credits { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }

.pied__haut-de-page {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--sable);
}

.pied__haut-de-page .monogramme { width: 1.6rem; }

/* --- Barre fixe mobile : Appeler et Réserver ---------------------------- */

.barre-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--vert);
  border-top: 1px solid var(--sable);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.barre-mobile a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1rem 0.5rem;
  font-family: var(--sans);
  font-size: var(--t-petit);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--creme);
  transition: background-color var(--fondu);
}

.barre-mobile a:hover { background-color: var(--encre); text-decoration: none; }
.barre-mobile a + a { border-left: 1px solid rgb(220 196 150 / 0.4); }

@media (min-width: 56rem) {
  .barre-mobile { display: none; }
}

/* Réserve la hauteur de la barre pour ne rien masquer en bas de page. */
@media (max-width: 55.99rem) {
  body { padding-bottom: 3.9rem; }
}


/* 13. Accessibilité =======================================================
   ------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
  border-radius: 1px;
}

.bande-verte :focus-visible,
.pied :focus-visible,
.litanie :focus-visible,
.barre-mobile :focus-visible { outline-color: var(--creme); }

.saut-contenu {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 100;
  transform: translateY(-160%);
  background-color: var(--vert);
  color: var(--creme);
  padding: 0.7em 1.2em;
  border-radius: 2px;
  font-size: var(--t-petit);
  font-weight: 700;
  text-decoration: none;
}

.saut-contenu:focus { transform: translateY(0); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* 14. Impression ==========================================================
   La carte et les horaires doivent s'imprimer proprement.
   ------------------------------------------------------------------------- */

@media print {
  :root { --fond: #fff; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .barre-mobile,
  .nav-mobile,
  .semis,
  .litanie,
  .saut-contenu { display: none !important; }
  .pied { background: #fff; color: #000; }
  .pied a, .pied__titre, .pied__haut-de-page { color: #000; }
  a { text-decoration: none; }
  .section { padding-block: 1.5rem; }
}


/* =========================================================================
   15. Les pages publiques
   Ajouté en phase 3. Reprend strictement les éléments de la charte : aucune
   couleur nouvelle, aucun dégradé, aucune ombre floue, aucune animation
   au-delà du fondu de survol.
   ========================================================================= */

.espace-moyen { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.espace-large { margin-top: clamp(2.25rem, 5vw, 3.5rem); }

.boutons--centres { justify-content: center; }

.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }

/* Fond légèrement plus dense, pour poser une section sans changer de couleur. */
.bande-crayeuse {
  background-color: var(--blanc-casse);
  border-block: 1px solid rgb(220 196 150 / 0.55);
}


/* Le hero -----------------------------------------------------------------
   Tient dans un écran de téléphone sans défilement. Fond crème, pas de photo
   pleine page, pas de vidéo. */

/* Le hero doit tenir dans un écran, boutons compris, sans défilement. Toutes
   les tailles sont donc bornées en vh autant qu'en rem : sur un portable de
   13 pouces, le bloc de marque se réduit au lieu de pousser les boutons
   hors de l'écran. */
.hero {
  display: grid;
  align-content: center;
  min-height: calc(100svh - var(--hauteur-entete, 7rem));
  padding-block: clamp(1.25rem, 4vh, 3rem);
  text-align: center;
}

.hero__contenu { display: grid; justify-items: center; }

.hero .bloc-marque { width: 100%; }

/* Le logotype fait 2,4 fois plus large que haut : le borner en vh borne sa
   hauteur, qui est ce qui compte pour tenir dans l'écran. */
.hero .bloc-marque__logotype { width: min(100%, 26rem, 44vh); }
.hero .bloc-marque__ecusson  { width: clamp(3rem, 7vh, 5.5rem); margin-top: clamp(0.75rem, 2.5vh, 2rem); }
.hero .bloc-marque__signature { width: min(17rem, 72%, 34vh); margin-top: clamp(0.6rem, 2vh, 1.5rem); }

/* Le H1 de l'accueil. Discret par la taille, pas par la mise en page : il est
   bien visible, sous le bloc de marque, et il nomme le restaurant avec Nice. */
.hero__accroche {
  margin-top: clamp(0.9rem, 2.5vh, 2rem);
  max-width: 32rem;
  font-family: var(--serif);
  font-size: clamp(1rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--texte-fort);
  text-wrap: balance;
}

.hero__etat {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.4rem 0.85rem;
  margin-top: clamp(0.8rem, 2vh, 1.25rem);
  padding-top: clamp(0.7rem, 1.8vh, 1.1rem);
  border-top: 1px solid var(--filet);
  max-width: 30rem;
}

.hero__phrase { font-size: var(--t-corps); }

.hero__boutons { margin-top: clamp(0.9rem, 2.5vh, 1.6rem); justify-content: center; }


/* Surtitre manuscrit ---------------------------------------------------- */

.surtitre-manuscrit {
  width: min(15rem, 62%);
  color: var(--or);
  margin-bottom: 0.6rem;
}

.centre .surtitre-manuscrit { margin-inline: auto; }


/* Les listes de la carte ------------------------------------------------ */

/* Entrées, puis plats, puis desserts, dans cet ordre et de haut en bas.
   Une mise en page en mosaïque met le dessert à gauche du plat, et on ne sait
   plus où regarder. */
.carte-liste {
  display: block;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  max-width: 44rem;
}

.carte-liste__section + .carte-liste__section,
.carte-liste__groupe + .carte-liste__groupe { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }

/* Un groupe rassemble les catégories qui partagent un préfixe : « Au verre »
   d'un côté, « Bouteilles » de l'autre. Sept catégories à plat, avec un seul
   rosé au verre à côté de onze rouges en bouteille, ne se lisent pas. */
.carte-liste__groupe-titre {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  color: var(--texte-fort);
  padding-bottom: 0.5rem;
  margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--filet);
}

.carte-liste__groupe + .carte-liste__groupe { margin-top: clamp(2rem, 5vw, 3rem); }
.carte-liste__groupe .carte-liste__section + .carte-liste__section { margin-top: 1.5rem; }

/* Une catégorie longue peut passer sur deux colonnes : l'ordre reste vertical
   dans chaque colonne, ce qui n'est pas le cas d'une mosaïque. */
@media (min-width: 52rem) {
  .carte-liste--colonnes .carte-liste__items { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .carte-liste--colonnes .carte-liste__item { break-inside: avoid; }
  .carte-liste--colonnes { max-width: none; }
}

.carte-liste__titre {
  font-family: var(--sans);
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--texte-fort);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--filet);
  margin-bottom: 0.35rem;
}

.carte-liste__items { display: grid; }

.carte-liste__item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid rgb(220 196 150 / 0.45);
}

.carte-liste__item:last-child { border-bottom: 0; }

.carte-liste__nom { flex: 1 1 auto; }

.carte-liste__detail,
.carte-liste__quand {
  display: block;
  font-size: var(--t-petit);
  color: var(--texte);
}

.carte-liste__quand {
  font-family: var(--sans);
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-fort);
  margin-top: 0.15rem;
}

.carte-liste__prix {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--texte-fort);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* Une ligne dont le prix n'a pas pu être relu ne montre pas de prix inventé. */
.carte-liste__prix--absent {
  font-family: var(--sans);
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* En-tête de section avec illustration --------------------------------- */

.carte-entete {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 46rem) {
  .carte-entete { grid-template-columns: 1fr 8rem; }
}

.illustration { color: var(--encre); }
.illustration--planche { width: min(8rem, 40%); justify-self: end; }
.illustration--tomates { width: min(5rem, 28%); }

.respiration .illustration { color: var(--encre); }


/* Le menu du jour, jour par jour --------------------------------------- */

.jour {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgb(220 196 150 / 0.55);
}

.jour:first-child { border-top: 0; padding-top: 0; }

.jour--aujourdhui {
  background-color: var(--blanc-casse);
  border: 1px solid var(--filet);
  border-radius: 2px;
  padding-inline: clamp(1.25rem, 3vw, 2rem);
  margin-block: clamp(1rem, 2vw, 1.5rem);
}

.jour__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

.jour__nom { margin: 0; }

.jour__marque {
  font-family: var(--sans);
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--creme);
  background-color: var(--vert);
  border-radius: 2px;
  padding: 0.25em 0.7em;
}

.jour__marque--calme {
  color: var(--texte-fort);
  background-color: transparent;
  border: 1px solid var(--filet);
}


/* Avertissements honnêtes ---------------------------------------------- */

.avertissement {
  border: 1px solid var(--filet);
  border-left: 5px solid var(--or);
  border-radius: 2px;
  background-color: var(--blanc-casse);
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  max-width: 40rem;
}


/* Le manifeste --------------------------------------------------------- */

.manifeste { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.manifeste p + p { margin-top: 1.1em; }

.manifeste__ouverture {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.6rem);
  line-height: 1.35;
  color: var(--texte-fort);
}

.manifeste__signature {
  width: min(13rem, 62%);
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  color: var(--encre);
}

.remerciements p + p { margin-top: 0.9em; }


/* Les portraits -------------------------------------------------------- */

.portrait { padding-block: clamp(1.25rem, 3vw, 2rem); }

.portrait__intitule {
  margin-block: 1.25rem 0.9rem;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
}

.portrait p + p { margin-top: 0.85em; }

.portrait-apercu {
  border-top: 1px solid var(--filet);
  padding-top: 1rem;
}

.portrait-apercu__nom { font-size: 1.2rem; margin-bottom: 0.15rem; }

.portrait-apercu__role {
  font-family: var(--sans);
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--texte-fort);
  margin-bottom: 0.6rem;
}


/* La réservation ------------------------------------------------------- */

.resa { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 34rem; }

.resa__titre { font-size: var(--t-h3); margin-bottom: 1rem; }
.resa__telephone { margin-bottom: 1rem; }

.resa__etat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.85rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  margin-bottom: 1rem;
}

.resa__note { font-size: var(--t-petit); margin: 0; }


/* La galerie ----------------------------------------------------------- */

.galerie {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.galerie__vignette {
  margin: 0;
  border: 1px solid var(--filet);
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--blanc-casse);
}

.galerie__vignette img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Une ou deux photos ne s'étirent pas sur toute la largeur : au-delà de leur
   définition, elles deviennent floues. */
.galerie--une   { grid-template-columns: minmax(0, 34rem); }
.galerie--deux  { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 24rem)); }

/* La photo verticale de la salle mérite mieux qu'un cadrage en 4 sur 3. */
.galerie--une .galerie__vignette img { aspect-ratio: 3 / 2; }

/* Aucune photo : un aplat de la charte, jamais une image d'archive. */
.galerie-vide__aplat {
  display: grid;
  place-items: center;
  min-height: 12rem;
  background-color: var(--blanc-casse);
  border: 1px solid var(--filet);
  border-radius: 2px;
  color: var(--or);
}

.galerie-vide__empreinte { width: 2.4rem; }

.galerie-vide__note {
  margin-top: 1rem;
  font-size: var(--t-petit);
  max-width: 40rem;
}


/* Le plan -------------------------------------------------------------- */

.plan { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }

.plan__dessin {
  width: 100%;
  max-width: 46rem;
  border: 1px solid var(--filet);
  border-radius: 2px;
}

.plan__fond  { fill: var(--blanc-casse); }
.plan__rue   { stroke: rgb(220 196 150 / 0.9); stroke-width: 10; fill: none; }
.plan__tram  { stroke: var(--sable); stroke-width: 3; stroke-dasharray: 12 8; fill: none; }
.plan__arret { fill: var(--creme); stroke: var(--vert); stroke-width: 3; }
.plan__lieu  { fill: none; stroke: var(--vert); stroke-width: 1.5; stroke-dasharray: 5 4; }
.plan__point { fill: var(--or); stroke: var(--vert); stroke-width: 3; }

.plan__texte {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  fill: var(--encre);
}

.plan__nom {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  fill: var(--vert);
  text-anchor: middle;
}

.plan__nom--petit {
  font-family: var(--sans);
  font-size: 15px;
  fill: var(--encre);
}

.plan__legende { margin-top: 0.85rem; font-size: var(--t-petit); }
.plan__legende p { margin: 0; }


/* Adresse et questions fréquentes -------------------------------------- */

.adresse-bloc {
  font-style: normal;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.adresse-bloc strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--texte-fort);
}

/* Aucune réponse n'est repliée : tout est lisible d'un seul coup d'œil. */
.faq {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

@media (min-width: 52rem) {
  .faq { grid-template-columns: repeat(2, 1fr); }
}

.faq__entree {
  border-top: 1px solid var(--filet);
  padding-top: 1rem;
}

.faq__question {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.faq__reponse { margin: 0; }


/* Les mentions légales ------------------------------------------------- */

.legal dt {
  font-size: var(--t-capitale);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--texte-fort);
}


/* =========================================================================
   16. Ajustements demandés par le client
   ========================================================================= */

/* Hauteur de l'en-tête, pour que le hero sache combien de place il lui reste. */
:root { --hauteur-entete: 7rem; }

@media (min-width: 56rem) {
  :root { --hauteur-entete: 7.5rem; }
}


/* Les deux services du jour, sur l'accueil ------------------------------- */

.services {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 56rem) {
  /* Deux colonnes, une par service. Chaque colonne se lit de haut en bas,
     donc le dessert reste sous le plat. */
  .services { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
  .services .carte-liste { max-width: none; }
}

.service__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--filet);
}

.service__titre {
  margin: 0;
  font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.8rem);
}

.service__prix {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--texte-fort);
  font-variant-numeric: tabular-nums lining-nums;
}

.service__note {
  margin-top: 0.7rem;
  font-size: var(--t-petit);
}

.service .surtitre-manuscrit { margin-top: 0.9rem; width: min(13rem, 60%); }
.service .horaires { margin-top: 1rem; }


/* Le sommaire de la carte ----------------------------------------------- */

.sommaire-carte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.sommaire-carte a {
  padding: 0.55em 1em;
  border: 1px solid var(--filet);
  border-radius: 2px;
  background-color: var(--blanc-casse);
  font-family: var(--sans);
  font-size: var(--t-petit);
  font-weight: 700;
  text-decoration: none;
  color: var(--texte-fort);
  transition: background-color var(--fondu), color var(--fondu);
}

.sommaire-carte a:hover {
  background-color: var(--vert);
  border-color: var(--vert);
  color: var(--creme);
  text-decoration: none;
}


/* Les jours du déjeuner ------------------------------------------------- */

.jours { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }

@media (min-width: 62rem) {
  .jours { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .jours .carte-liste { max-width: none; }
}

.jour {
  padding-block: 0;
  border-top: 0;
  border: 1px solid rgb(220 196 150 / 0.6);
  border-radius: 2px;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.1rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 1.9rem);
  background-color: var(--blanc-casse);
}

.jour:first-child { padding-top: clamp(1.1rem, 2.5vw, 1.6rem); }

.jour--aujourdhui {
  border-color: var(--vert);
  border-width: 2px;
  margin-block: 0;
}


/* Les horaires groupés -------------------------------------------------- */

.horaires__groupes { display: grid; gap: 0.15rem; margin-top: 0.9rem; }

.horaires__groupe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.1rem 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid rgb(220 196 150 / 0.5);
}

.horaires__groupe:last-child { border-bottom: 0; }

.horaires__groupe dt {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--texte-fort);
}

.horaires__groupe dd {
  margin: 0;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}

.horaires__groupe--courant dt,
.horaires__groupe--courant dd { color: var(--texte-fort); font-weight: 700; }

.bande-verte .horaires__groupe { border-bottom-color: rgb(220 196 150 / 0.28); }
.bande-verte .horaires__groupe dt,
.bande-verte .horaires__groupe dd { color: var(--creme); }
.bande-verte .horaires__groupe--courant dt,
.bande-verte .horaires__groupe--courant dd { color: var(--sable); }

/* Dans la colonne étroite du pied de page, on empile plutôt que d'écraser. */
@media (max-width: 30rem) {
  .horaires__groupe dd { text-align: left; }
}

.pied .horaires { max-width: none; }
.pied__instagram { margin-top: 1rem; }


/* La FAQ en dérouleurs -------------------------------------------------- */

.faq {
  display: block;
  max-width: 44rem;
}

.faq__entree {
  border-bottom: 1px solid var(--filet);
  padding-top: 0;
}

.faq__entree:first-child { border-top: 1px solid var(--filet); }

.faq__question {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  cursor: pointer;
  list-style: none;
  padding-block: 1rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 700;
  color: var(--texte-fort);
  margin: 0;
}

.faq__question::-webkit-details-marker { display: none; }

/* Un signe qui dit clairement ce qui va se passer, sans icône à deviner. */
.faq__question::before {
  content: '';
  flex: 0 0 auto;
  width: 0.7em;
  height: 0.7em;
  margin-top: 0.25em;
  background-color: var(--or);
  -webkit-mask: url('../marque/empreinte-sanglier.svg') no-repeat center / contain;
          mask: url('../marque/empreinte-sanglier.svg') no-repeat center / contain;
  transition: transform var(--fondu);
}

.faq__entree[open] .faq__question::before { transform: rotate(90deg); }

.faq__question:hover { color: var(--encre); }

.faq__reponse { padding: 0 0 1.2rem 1.55em; }
.faq__reponse p { margin: 0; }


/* Le plan --------------------------------------------------------------- */

.plan__note-remplacement {
  margin-top: 0.85rem;
  font-size: var(--t-petit);
}

.plan__illustration {
  width: 100%;
  max-width: 46rem;
  border: 1px solid var(--filet);
  border-radius: 2px;
}

.plan__texte--fin { text-anchor: end; }

.plan__texte--centre { text-anchor: middle; }