/* Au Paysan Gourmand, thème 2026. « La table de ferme », modernisée (REFONTE-BRIEF.md, DESIGN.md). */

@font-face {
  font-family: "ignitemebold_italic";
  src: url("../fonts/igniteme_bold-webfont.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* La terre, le pré, le maïs : identité gardée, versions lisibles pour le texte */
  --terre: #913317;
  --terre-nuit: #5c1e0c;
  --vert: #8faa1d;
  --vert-profond: #5f7413;
  --vert-contact: #465800;
  --vert-encre: #1a2400;
  --mais: #fab500;
  --potiron: #f18e1e;
  --brule: #c86a00;
  --creme: #fbffe4;
  --blanc: #fff;
  --noir: #111;
  --pierre: #d9d6cf;
  --beige: #f3e9d2;           /* encarts beige (Antoine, 27 sept.) */
  /* Encarts verts (Antoine, 29 sept. : « du vert sur des blocs ») : olive profond, jamais en fond de page.
     Crème sur ce vert 6,5:1. */
  --fond-vert: radial-gradient(90% 70% at 0% 0%, rgb(95 116 19 / 0.55), transparent 70%), var(--vert-contact);

  --ff-pinceau: "ignitemebold_italic", "Roboto Condensed", sans-serif;
  --ff-texte: "Roboto Condensed", "Arial Narrow", sans-serif;

  /* Échelle de texte (ratio 1.25), jamais sous 16 px ; le pinceau jamais sous 32 px */
  --t-petit: 1rem;
  --t-corps: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --t-accroche: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
  --t-titre: clamp(1.9rem, 1.35rem + 2.4vw, 3.6rem);
  --t-une: clamp(1.9rem, 1.2rem + 3.4vw, 4rem);

  /* Espacements (base 4 px) */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
  --e-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --filet: 15px;
  --largeur: 76rem;
  --chevauche: clamp(2.5rem, 1rem + 6vw, 6rem);
  --rayon: 16px;              /* angles des photos et des encarts */
  --haut-entete: 5rem;        /* hauteur de l'en-tête collant (6rem sur ordinateur) */

  --ombre-pose: 0 0.5rem 1rem rgb(0 0 0 / 0.18);
  --ombre-barre: 0 -2px 12px rgb(0 0 0 / 0.3);

  /* Empilement */
  --z-contenu: 1; --z-barre: 20; --z-entete: 30; --z-menu: 40; --z-cookies: 50;
}

*, *::before, *::after { box-sizing: border-box; }
@media (min-width: 900px) { :root { --haut-entete: 6rem; } }
@media (min-width: 1400px) { :root { --haut-entete: 7rem; } }
/* Grands écrans : le contenu s'élargit au lieu de laisser de grandes marges vides (Antoine, 28 sept.). */
@media (min-width: 1800px) { :root { --largeur: 96rem; } }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--haut-entete) + 1rem); }
sup { line-height: 0; }
.une__photo[src$="restaurant-au-paysan-gourmand.jpg"], .gazette img[src$="restaurant-au-paysan-gourmand.jpg"] { object-position: center 15%; }
.journal:not(.journal--page) .gazette__une img[src$="restaurant-au-paysan-gourmand-bar.jpg"] { object-position: 92% 50%; }   /* bar : l'enseigne entière, à droite (revue du 2 oct.) */.journal:not(.journal--page) .gazette__une img[src$="restaurant-au-paysan-gourmand.jpg"] { object-position: 100% 0; }   /* photo étirée en hauteur : l'enseigne, à droite */   /* façade : l'enseigne entière (revue du 30 sept.) */   /* « 1er » en exposant sans agrandir l'interligne (revue du 29 sept.) */
body {
  margin: 0;
  background: var(--terre-nuit);   /* le marron (Antoine, 27 sept.) */
  color: var(--blanc);
  font: 400 var(--t-corps)/1.55 var(--ff-texte);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; }
p { margin: 0 0 var(--e-4); max-width: 65ch; text-wrap: pretty; }
h1, h2, h3 { margin: 0; text-wrap: balance; }

:focus-visible { outline: 3px solid var(--mais); outline-offset: 2px; box-shadow: 0 0 0 6px var(--vert-encre); }

.evitement { position: absolute; left: var(--e-4); top: -4rem; z-index: var(--z-menu); background: var(--mais); color: var(--noir); padding: var(--e-3) var(--e-4); font-weight: 700; }
.evitement:focus { top: var(--e-4); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.insecable { white-space: nowrap; }

.titre {
  font-family: var(--ff-pinceau);
  font-weight: 400;
  font-size: var(--t-titre);
  line-height: 1.02;
  margin-bottom: var(--e-5);
}
.accroche { font-size: var(--t-accroche); line-height: 1.35; font-weight: 400; }

/* ---------- Boutons ---------- */
.boutons { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }
.boutons + p { margin-top: var(--e-4); }
.btn {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 3rem; padding: var(--e-3) var(--e-5);
  border: 2px solid transparent; border-radius: 6px;
  font: 700 var(--t-petit)/1.2 var(--ff-texte); text-decoration: none;
  box-shadow: var(--ombre-pose);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s, color 0.2s;
}
.btn svg { width: 1.25rem; height: 1.25rem; flex: none; fill: currentColor; }
.btn:hover { transform: translateY(-3px); background: var(--noir); color: var(--mais); border-color: var(--noir); }
.btn--appel { background: var(--vert-profond); color: var(--blanc); border-color: var(--vert-contact); font-size: 1.125rem; }
.btn--clair { background: var(--blanc); color: var(--terre); border-color: var(--blanc); }
.btn--terre { background: var(--terre); color: var(--blanc); border-color: var(--terre-nuit); }
.btn--noir { background: var(--noir); color: var(--mais); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: var(--z-entete);
  background: rgb(251 255 228 / 0.94); color: var(--noir);
  border-bottom: 4px solid var(--vert);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.entete { transition: background-color 0.4s, color 0.4s, border-color 0.4s; }
/* L'en-tête reste beige partout (Antoine, 11 oct. 2026 : « bandeau beige stp ») : plus de version marron sur les bandes crème. */
/* Barre maïs qui avance sur le filet vert au fil de la lecture de la page. */
@supports (animation-timeline: scroll()) {
  .entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--mais); transform-origin: left center; animation: lecture linear both; animation-timeline: scroll(root); }
  @keyframes lecture { from { scale: 0 1; } to { scale: 1 1; } }
}
/* En-tête étalé sur toute la largeur, logo plus grand (Antoine, 28 sept.). */
.entete__in { max-width: var(--largeur); margin: 0 auto; display: flex; align-items: center; gap: var(--e-5); padding: var(--e-2) var(--e-4); min-height: calc(var(--haut-entete) - 4px); }
.entete__logo { display: inline-block; flex: none; margin-left: -0.5rem; padding: 0.2rem 0.5rem; border-radius: 1rem; transition: background-color 0.4s; }
.entete__logo img { width: clamp(11rem, 7rem + 8vw, 17rem); }
.etat {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-weight: 700; font-size: 1rem; line-height: 1.2;
}
.etat::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: currentColor; flex: none; }
.etat[data-etat="ouvert"] { color: var(--vert-contact); }
.etat[data-etat="bientot"] { color: var(--brule); }
.etat[data-etat="ferme"] { color: var(--terre); }
/* Le point : vert clair quand c'est ouvert, rouge quand c'est fermé (Antoine, 8 oct. 2026). Le texte garde sa couleur lisible. */
.etat[data-etat="ouvert"]::before { background: #6fd42a; }
.etat[data-etat="bientot"]::before, .etat[data-etat="ferme"]::before { background: #e3261b; }
.entete .etat { display: none; }
.entete .etat[data-etat="ouvert"]::before { animation: pouls 1.8s ease-out infinite; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgb(111 212 42 / 0.6); } 100% { box-shadow: 0 0 0 9px rgb(111 212 42 / 0); } }
.entete__menu {
  margin-left: var(--e-2);
  min-height: 3rem; min-width: 3rem; padding: 0 var(--e-3);
  border: 2px solid var(--noir); border-radius: 6px; background: transparent;
  font: 700 var(--t-petit) var(--ff-texte); color: var(--noir); cursor: pointer;
}
.nav { display: none; }
.nav a { position: relative; z-index: 1; font-weight: 700; text-decoration: none; padding: var(--e-2) var(--e-3); border-radius: 2rem; white-space: nowrap; transition: color 0.2s; }
/* Bulle qui glisse d'une rubrique à l'autre au survol (Antoine, 28 sept.) ; site.js la place. */
.nav__bulle { display: none; }
@media (min-width: 900px) and (hover: hover) {
  /* Comme le composant « SlideTabs » de 21st.dev : les rubriques dans une capsule, la bulle suit la souris
     et revient sur la page en cours quand la souris s'en va. */
  .nav { position: relative; padding: 0.3rem; border-radius: 2rem; background: rgb(92 30 12 / 0.07); box-shadow: inset 0 0 0 1.5px rgb(92 30 12 / 0.18); }
  .nav a::after { display: none; }
  .nav__bulle { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 2rem; background: var(--terre); opacity: 0; pointer-events: none; box-shadow: 0 4px 12px rgb(92 30 12 / 0.3); transition: transform 0.45s cubic-bezier(0.34, 1.35, 0.64, 1), width 0.45s cubic-bezier(0.34, 1.35, 0.64, 1), height 0.3s, opacity 0.2s; }
  .nav a.bulle-sur, .nav a.bulle-sur:hover, .nav a.bulle-sur[aria-current="page"] { color: var(--blanc); }   /* le texte reste lisible sur la bulle */
}
/* Soulignement qui glisse au survol ; la page en cours garde le sien. */
.nav a::after { content: ""; position: absolute; left: var(--e-3); right: var(--e-3); bottom: 0.2rem; height: 3px; border-radius: 2px; background: var(--terre); transform-origin: left center; scale: 0 1; transition: scale 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.nav a:hover:not(.bulle-sur) { color: var(--terre); }
.nav a:hover::after, .nav a[aria-current="page"]::after { scale: 1 1; }
.nav a[aria-current="page"] { color: var(--terre); }
/* Le numéro, mis en avant : une pastille maïs, l'icône qui sonne toutes les 4 s (Antoine, 27 sept.). */
.entete__tel { display: inline-flex; align-items: center; gap: var(--e-3); margin-left: auto; padding: 0.3rem; border-radius: 2rem; background: var(--mais); color: var(--noir); text-decoration: none; white-space: nowrap; box-shadow: 0 4px 14px rgb(250 181 0 / 0.35); transition: transform 0.25s var(--ease-douce, ease), box-shadow 0.25s; }
.entete__tel:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(250 181 0 / 0.5); }
.entete__tel svg { flex: none; width: 2.4rem; height: 2.4rem; padding: 0.55rem; border-radius: 50%; background: var(--noir); fill: var(--mais); animation: sonne 4s ease-in-out 1s infinite; }
.tel__texte { display: none; line-height: 1.1; padding-right: var(--e-3); }
.tel__libelle { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; }
.tel__numero { display: block; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes sonne { 0%, 80%, 100% { rotate: 0deg; } 84% { rotate: -16deg; } 88% { rotate: 14deg; } 92% { rotate: -10deg; } 96% { rotate: 6deg; } }
.nav-ouverte .nav {
  display: flex; flex-direction: column; position: fixed; inset: var(--haut-entete) 0 0; z-index: var(--z-menu);
  background: var(--creme); padding: var(--e-5) var(--e-4);
}
.nav-ouverte .nav a { font-size: 1.4rem; min-height: 3.5rem; display: flex; align-items: center; padding: 0 var(--e-4); border-bottom: 1px solid var(--pierre); }
/* Téléphone : la rubrique en cours dans une bulle terre, texte blanc, comme sur ordinateur. */
.nav-ouverte .nav a[aria-current="page"] { background: var(--terre); color: var(--blanc); border-radius: 2rem; border-bottom-color: transparent; }
.nav-ouverte .nav a::after { display: none; }
@media (min-width: 900px) {
  .entete__menu { display: none; }
  .nav { display: flex; gap: var(--e-1); margin: 0 auto; }
  .entete .etat { display: inline-flex; margin-left: 0; white-space: nowrap; }
  .entete__tel { margin-left: 0; }
  .entete__tel { padding: 0.3rem 0.3rem 0.3rem 0.3rem; }
  .tel__texte { display: block; }
}
/* Ordinateurs portables : rubriques un peu plus serrées pour que tout tienne dans la colonne du site. */
@media (min-width: 1280px) and (max-width: 1799px) { .nav a { padding: var(--e-2) 0.6rem; } .entete__in { gap: var(--e-4); } }
/* Jusqu'à 1 800 px la colonne reste à 76 rem : le logo plafonne à 14 rem pour que l'état tienne (test du 29 sept.). */
@media (min-width: 1400px) and (max-width: 1799px) { .entete__logo img { width: 14rem; } }
/* Petits ordinateurs : l'état quitte l'en-tête et reste affiché sur la photo du haut. */
@media (min-width: 900px) and (max-width: 1099px) { .entete .etat { display: none; } }
/* Écrans moyens : tout tient sur une ligne ; le bouton d'appel garde son icône, l'état se resserre. */
@media (min-width: 900px) and (max-width: 1279px) {
  .tel__texte { display: none; }
  .entete__tel { padding: 0.3rem; }
  .entete .etat { font-size: 0.9rem; }
  .nav a { padding: var(--e-2) 0.6rem; }
  .entete__in { gap: var(--e-3); }
  .entete__logo img { width: clamp(9.5rem, 4rem + 8vw, 13rem); }
}

/* ---------- La une (photo du haut) ---------- */
.une { position: relative; min-height: min(88svh, 46rem); display: grid; align-items: end; overflow: hidden; }
.une__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 72%; animation: une-entre 1.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.une::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(92 30 12 / 0.1) 0%, rgb(92 30 12 / 0.35) 40%, rgb(92 30 12 / 0.92) 100%); }
.une__texte { position: relative; z-index: var(--z-contenu); width: 100%; max-width: var(--largeur); margin: 0 auto; padding: var(--e-8) var(--e-4) var(--e-7); }
.une h1 { font-weight: 700; font-size: var(--t-une); line-height: 1.05; letter-spacing: -0.01em; max-width: 22ch; text-shadow: 3px 4px 7px rgb(81 67 21 / 0.9); }
.une .accroche { margin-top: var(--e-4); max-width: 44ch; }
.une .etat { background: var(--creme); padding: var(--e-2) var(--e-3); border-radius: 2rem; margin-bottom: var(--e-4); }
/* Téléphone : la photo en bandeau et le texte dessous, pour que le titre ne recouvre pas le plat. */
@media (max-width: 899px) {
  .une { display: block; min-height: 0; background: var(--terre-nuit); }
  .une__photo { position: relative; height: auto; aspect-ratio: 9 / 5; }
  .une::after { display: none; }
  .une__texte { padding: 0 var(--e-4) var(--e-6); }
  .une .etat { position: relative; margin-top: calc(-1 * var(--e-5)); box-shadow: var(--ombre-pose); }
  .une h1 { text-shadow: none; }
}
/* Photo verticale : sur ordinateur, texte à gauche et photo à droite à sa taille, sans l'agrandir. */
.une--partagee .une__photo { object-position: 50% 40%; }
@media (min-width: 900px) {
  .une--partagee { grid-template-columns: 1fr minmax(0, 32rem); align-items: stretch; min-height: 0; background: var(--terre-nuit); }
  .une--partagee picture { grid-column: 2; grid-row: 1; }
  .une--partagee .une__photo { position: relative; height: 100%; min-height: 30rem; }
  .une--partagee::after { display: none; }
  .une--partagee .une__texte { grid-column: 1; grid-row: 1; align-self: center; max-width: none; padding: var(--e-8) var(--e-7) var(--e-8) max(var(--e-4), calc((100vw - var(--largeur)) / 2 + var(--e-4))); }
  .une--partagee h1 { text-shadow: none; }
}
/* Titre et photo côte à côte entre 900 et 1 280 px : la colonne de texte est étroite, le titre rapetisse pour tenir en deux lignes. */
@media (min-width: 900px) and (max-width: 1279px) { .une--partagee h1 { font-size: 2.9rem; } }
/* Titres longs (questions de plus de 44 signes) : en lettres droites grasses plutôt qu'au pinceau
   (le pinceau ne descend jamais sous 32 px), pour rester sur deux lignes même sur téléphone. */
.titre--long { font-family: var(--ff-texte); font-weight: 700; font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.3rem); line-height: 1.15; }
.titre--tres-long { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 2rem); }   /* questions de plus de 52 signes (articles refaits, 4 oct. 2026) */

/* Tableaux des articles refaits (4 oct. 2026) : lisibles au téléphone, défilement dans leur cadre s'il le faut, jamais dans la page. */
.table-responsive { overflow-x: auto; max-width: 100%; margin: var(--e-4) 0; }
.table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.table th, .table td { text-align: left; vertical-align: top; padding: 0.55em 0.6em; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); overflow-wrap: anywhere; }
.table th { font-weight: 700; }
@media (max-width: 575px) { .table { font-size: 0.85em; } .table th, .table td { padding: 0.45em 0.4em; } }
@keyframes une-entre { from { transform: scale(1.06); opacity: 0.6; } to { transform: none; opacity: 1; } }

/* ---------- Blocs : une photo, un panneau qui la chevauche ---------- */
.bloc { max-width: var(--largeur); margin: var(--e-section) auto 0; padding: 0 var(--e-4); display: grid; }
.bloc__photo { position: relative; }
.bloc__photo > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--ombre-pose); border-radius: var(--rayon); }
.etiquette { position: absolute; left: var(--e-3); bottom: var(--e-3); background: var(--vert-profond); color: var(--blanc); font-weight: 700; padding: var(--e-2) var(--e-3); font-size: 1.1rem; }
.panneau { position: relative; z-index: var(--z-contenu); padding: var(--e-6) var(--e-5); margin: calc(var(--chevauche) * -1) var(--e-3) 0; border-radius: var(--rayon); }
.bloc--degage .panneau { margin-top: var(--e-3); }   /* sur téléphone aussi, l'encart reste sous la photo */
.panneau::before { content: none; }   /* plus de filet vert au-dessus des encarts (Antoine) */
/* Encart vert : un bloc sur deux dans les pages, texte et titres crème, boutons maïs (le bouton terre
   se perdrait sur ce vert : même clarté). */
.panneau--vert { background: var(--motif-epi-mais) no-repeat right 1rem top 1.4rem / 5.5rem, var(--fond-vert); color: var(--beige); box-shadow: var(--ombre-pose); }
/* Pas de texte jaune sur le vert (Antoine, 29 sept.) : titres crème, le reste crème ou blanc. */
.panneau.panneau--vert .titre, .panneau--vert h3 { color: var(--beige); }
.panneau--vert strong, .panneau--vert .plats .nom, .panneau--vert .plats .prix { color: var(--blanc); }
.panneau--vert a:not(.btn) { color: var(--blanc); text-decoration-color: currentColor; }
.panneau--vert .btn:not(:hover) { background: var(--mais); color: var(--noir); border-color: var(--mais); }
/* À côté du bouton d'appel, les autres boutons en contour : un seul bouton plein par encart (revue du 29 sept.). */
.panneau--vert .boutons:has(a[href^="tel:"]) .btn:not([href^="tel:"]):not(:hover) { background: transparent; color: var(--beige); border-color: var(--beige); }
/* Ordinateur : le titre s'arrête avant l'épi du coin (revue du 29 sept.). */
@media (min-width: 700px) { .rubrique.panneau--vert > .titre:first-child { padding-right: 5rem; } }
/* Téléphone : pas d'épi dans le coin, il chevauchait les titres longs (revue du 29 sept.) ; le cadre maïs suffit. */
@media (max-width: 699px) { .panneau--vert { background: var(--fond-vert); } }
.panneau--blanc { background-color: var(--beige); color: var(--noir); box-shadow: var(--ombre-pose); }
.panneau--blanc .titre { color: var(--terre); }
.panneau--blanc a:not(.btn) { color: var(--terre-nuit); }
.panneau--mais { background: var(--mais); color: var(--noir); }
.panneau--creme { background-color: var(--beige); color: var(--noir); box-shadow: var(--ombre-pose); }   /* beige chaud, comme les encarts */
.panneau--creme .titre { color: var(--terre); }
.panneau--mais::before { background: var(--noir); }
.panneau .lien-suite { font-weight: 700; display: inline-flex; min-height: 3rem; align-items: center; }
@media (min-width: 900px) {
  .bloc { grid-template-columns: repeat(12, 1fr); align-items: center; }
  .bloc__photo { grid-column: 1 / 9; grid-row: 1; }
  .panneau { grid-column: 7 / 13; grid-row: 1; margin: var(--e-8) 0 0; padding: var(--e-7) var(--e-7); }
  .bloc--envers .bloc__photo { grid-column: 5 / 13; }
  .bloc--envers .panneau { grid-column: 1 / 7; }
  /* L'encart ne recouvre pas la photo : sur celle du fondu, il cachait les frites (Antoine, 4 oct. 2026). */
  .bloc--degage .bloc__photo { grid-column: 6 / 13; }
  .bloc--degage .panneau { grid-column: 1 / 6; margin: 0; }
}

/* ---------- Extrait de carte, listes de pièces ---------- */
.plats { list-style: none; margin: 0 0 var(--e-4); padding: 0; }
/* Nom, pointillés, prix : quand le nom passe sur deux lignes, le prix s'aligne sur la dernière. */
.plats li { display: grid; grid-template-columns: minmax(0, max-content) minmax(1rem, 1fr) auto; align-items: end; column-gap: var(--e-2); padding: var(--e-2) 0; }
.plats .nom { font-weight: 700; }
.plats .nom small { font-weight: 400; font-size: 0.9em; white-space: nowrap; }
.plats .points { border-bottom: 2px dotted currentColor; opacity: 0.45; transform: translateY(-0.4em); }
.plats .prix { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plats .desc { grid-column: 1 / -1; font-size: 0.95em; max-width: 60ch; }
.label-vbf { width: 5.5rem; float: right; margin: 0 0 var(--e-3) var(--e-4); }

/* ---------- Avis ---------- */
.avis { max-width: var(--largeur); margin: var(--e-section) auto 0; padding: 0 var(--e-4); }
.avis__liste { display: grid; gap: var(--e-7); margin-top: var(--e-6); }
.avis blockquote { margin: 0; }
.avis blockquote p { font-size: var(--t-accroche); line-height: 1.35; font-style: italic; }
.avis blockquote p::before { content: "« "; }
.avis blockquote p::after { content: " »"; }
.avis footer { font-weight: 700; color: var(--mais); }
@media (min-width: 900px) {
  .avis__liste { grid-template-columns: 1.3fr 1fr; }
  .avis__liste blockquote:first-child { grid-row: span 2; }
  .avis__liste blockquote:first-child p { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); }
}

/* ---------- Horaires : la nappe jaune ---------- */
.horaires { width: 100%; border-collapse: collapse; margin: var(--e-4) 0; font-variant-numeric: tabular-nums; }
.horaires th { text-align: left; padding: var(--e-2) var(--e-3) var(--e-2) 0; font-weight: 700; white-space: nowrap; }
.horaires td { padding: var(--e-2) 0; }
.horaires td span { display: block; white-space: nowrap; }
@media (max-width: 359px) { .horaires th { white-space: normal; } }   /* 320 px : « Vendredi, samedi » sur deux lignes plutôt qu'un débordement */
.horaires tr + tr { border-top: 1px solid rgb(0 0 0 / 0.18); }
.horaires tr.aujourdhui { background: rgb(0 0 0 / 0.08); }
.horaires tr.aujourdhui th::after { content: "aujourd'hui"; display: block; font-weight: 400; font-size: 0.85em; }   /* sous le jour : « Vendredi, samedi aujourd'hui » débordait à 390 px (test du vendredi 2 oct.) */

/* ---------- Le Journal du Paysan : mise en page de journal (Antoine, 28 sept.) ---------- */
.journal { max-width: var(--largeur); margin: var(--e-section) auto 0; padding: 0 var(--e-4); }
.gazette { padding: var(--e-6) clamp(1.25rem, 0.5rem + 3vw, 3.5rem) var(--e-7); border-radius: 6px; background-color: #f3e9d2; color: var(--noir); box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.35); display: grid; gap: var(--e-6) var(--e-7); }
.gazette article a { color: inherit; text-decoration: none; display: block; }
.gazette__manchette { text-align: center; border-bottom: 3px double var(--noir); padding-bottom: var(--e-4); }
.gazette__filet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-4); margin: 0 auto var(--e-3); max-width: none; padding: var(--e-2) 0; border-top: 1px solid var(--noir); border-bottom: 1px solid var(--noir); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.gazette__titre { display: flex; align-items: center; justify-content: center; gap: var(--e-3); font-family: var(--ff-pinceau); font-weight: 400; font-size: clamp(2rem, 1.2rem + 3.6vw, 4.6rem); line-height: 1; color: var(--terre); }
.gazette__titre img { flex: none; width: clamp(2.8rem, 2rem + 3vw, 5.5rem); height: auto; }
@media (max-width: 599px) { .gazette__titre { flex-direction: column; gap: var(--e-2); } }
.gazette__devise { margin: var(--e-2) auto 0; font-style: italic; max-width: 60ch; }
.gazette__rubrique { margin: var(--e-3) 0 var(--e-1); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--terre); }
.gazette article img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; filter: saturate(1.05); }
.gazette__une h3 { font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.6rem); line-height: 1.08; margin-bottom: var(--e-3); }
.gazette__chapo { font-size: 1.15rem; line-height: 1.55; max-width: none; }
.gazette__chapo::first-letter { float: left; font-family: var(--ff-pinceau); font-size: 3.6em; line-height: 0.8; padding: 0.08em 0.1em 0 0; margin-bottom: -0.1em; color: var(--terre); }   /* deux lignes de retrait, pas trois (revue du 2 oct.) */
.gazette__breve + .gazette__breve { margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid rgb(0 0 0 / 0.35); }
.gazette__breve h3 { font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.3rem); line-height: 1.2; margin-bottom: var(--e-2); }
.gazette__breve p:not(.gazette__rubrique) { margin: 0 0 var(--e-2); }
.gazette__lire { font-weight: 700; color: var(--terre); }
.gazette__lire::after { content: "→"; display: inline-block; margin-left: 0.35em; transition: translate 0.25s; }
.gazette a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.gazette a:hover .gazette__lire::after { translate: 4px 0; }
.gazette__grille { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); border-top: 3px double var(--noir); padding-top: var(--e-5); }
.gazette__grille .gazette__breve + .gazette__breve { margin-top: 0; padding-top: 0; border-top: 0; }
/* Deux ou trois colonnes ; un article seul sur sa rangée prend toute la largeur, photo à gauche. */
@media (min-width: 700px) {
  .gazette__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gazette__grille .gazette__breve:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .gazette__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gazette__grille .gazette__breve:last-child:nth-child(2n+1) { grid-column: auto; }
  .gazette__grille .gazette__breve:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
/* Photo à gauche seulement pour l'article vraiment seul sur sa rangée : 2n+1 sur deux colonnes, 3n+1 sur trois
   (revue du 30 sept. : le 9e article sur trois colonnes s'écrasait en colonne étroite). */
@media (min-width: 700px) and (max-width: 1099px) {
  .gazette__grille .gazette__breve:last-child:nth-child(2n+1) a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--e-6); align-items: start; }
  .gazette__grille .gazette__breve:last-child:nth-child(2n+1) img { grid-row: span 5; }
}
@media (min-width: 1100px) {
  .gazette__grille .gazette__breve:last-child:nth-child(3n+1) a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--e-6); align-items: start; }
  .gazette__grille .gazette__breve:last-child:nth-child(3n+1) img { grid-row: span 5; }
}
.journal--page .gazette { padding-bottom: calc(var(--e-7) + 3rem); }
.gazette__tout { margin: 0; max-width: none; text-align: center; border-top: 3px double var(--noir); padding-top: var(--e-5); }
@media (min-width: 900px) {
  .gazette { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  .gazette__manchette, .gazette__tout { grid-column: 1 / -1; }
  .gazette__colonne { padding-left: clamp(1.5rem, -1rem + 3vw, 3rem); border-left: 1px solid rgb(0 0 0 / 0.35); }
  .gazette__chapo { column-count: 2; column-gap: var(--e-6); }
  .gazette__une img { aspect-ratio: 4 / 3; }   /* la une s'équilibre avec la colonne des brèves */
  /* Accueil : la photo de la une s'allonge jusqu'au bas de la colonne des brèves, sans vide dessous (revue du 30 sept.). */
  .journal:not(.journal--page) .gazette__une { align-self: stretch; }
  .journal:not(.journal--page) .gazette__une a { display: flex; flex-direction: column; height: 100%; }
  .journal:not(.journal--page) .gazette__une img { flex: 1 1 auto; min-height: 18rem; aspect-ratio: auto; }
  .journal--page .gazette__une, .journal--page .gazette__grille { grid-column: 1 / -1; }
  .journal--page .gazette__une a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 var(--e-6); align-items: start; }
  .journal--page .gazette__une img { grid-row: span 5; }
  .journal--page .gazette__une .gazette__chapo { column-count: 1; }
  .journal--page .gazette__une h3 { font-size: clamp(1.4rem, 0.9rem + 1.2vw, 2rem); }
}

/* ---------- Page de contenu ---------- */
.une--page { min-height: min(56svh, 30rem); }
.sommaire { max-width: calc(52rem + 2 * var(--e-4)); margin: var(--e-6) auto 0; padding: 0 var(--e-4); }
.sommaire ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.sommaire a { display: inline-flex; min-height: 2.75rem; align-items: center; padding: 0 var(--e-4); border: 2px solid var(--creme); border-radius: 2rem; text-decoration: none; font-weight: 700; }
.sommaire a:hover { background: var(--mais); color: var(--noir); border-color: var(--mais); }
.texte { max-width: calc(52rem + 2 * var(--e-4)); margin: var(--e-section) auto 0; padding: 0 var(--e-4); }
.texte__col { max-width: 44rem; }
.texte h2 { font-family: var(--ff-pinceau); font-weight: 400; font-size: var(--t-titre); line-height: 1.02; margin-bottom: var(--e-5); }
.texte h3 { font-size: 1.35rem; margin: var(--e-6) 0 var(--e-2); }

/* ---------- Carte (page) ---------- */
.carte-nav { position: sticky; top: var(--haut-entete); z-index: var(--z-barre); background: var(--terre-nuit); margin-top: var(--e-6); }
.carte-nav ul { position: relative; max-width: var(--largeur); margin: 0 auto; padding: var(--e-2) var(--e-4); list-style: none; display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: thin; }
.carte-nav a { display: inline-flex; min-height: 2.75rem; align-items: center; padding: 0 var(--e-3); white-space: nowrap; font-weight: 700; text-decoration: none; border-radius: 5px; }
.carte-nav a:hover, .carte-nav a[aria-current] { background: var(--mais); color: var(--noir); }
@media (min-width: 900px) { .carte-nav ul { flex-wrap: wrap; justify-content: center; overflow: visible; } }
.rubrique { margin: var(--e-8) max(var(--e-4), calc((100% - 52rem) / 2)) 0; padding: var(--e-6) var(--e-5); scroll-margin-top: calc(var(--haut-entete) + 5rem); }
.rubrique .titre { margin-bottom: var(--e-3); }
/* Contenu porté des pages actuelles : sous-titres, citations d'avis, listes, chapeau. */
.rubrique h3 { font-size: 1.2rem; margin: var(--e-5) 0 var(--e-2); }
.rubrique ul:not(.plats) { margin: 0 0 var(--e-4); padding-left: 1.2em; max-width: 65ch; }
.rubrique li + li { margin-top: var(--e-1); }
.rubrique blockquote { margin: 0 0 var(--e-5); }
.rubrique blockquote p { font-style: italic; font-size: 1.1rem; line-height: 1.45; margin-bottom: var(--e-1); }
.rubrique blockquote footer, .rubrique blockquote cite { font-weight: 700; font-style: normal; }
.chapo { font-size: var(--t-accroche); line-height: 1.4; }
.note-carte { margin: var(--e-6) max(var(--e-4), calc((100% - 52rem) / 2)) 0; max-width: 60ch; }
.rubrique__photo { margin: calc(var(--e-6) * -1) calc(var(--e-5) * -1) var(--e-5); }
.rubrique__photo { position: relative; z-index: 2; }
/* Seule la photo qui ouvre un panneau remonte bord à bord : placée après un paragraphe, elle recouvrait sa dernière ligne (Antoine, 5 oct.). */
.rubrique__photo:not(:first-child) { margin-top: var(--e-5); }
.rubrique__photo:not(:first-child) img { border-radius: 0; }
.rubrique__photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--rayon) var(--rayon) 0 0; }
.liens-suite, .rubrique ul.liens-suite { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-1); }
.liens-suite a { display: inline-flex; min-height: 2.75rem; align-items: center; font-weight: 700; }

/* ---------- Pied de page ---------- */
.pied { margin-top: var(--e-section); background: #e9dfc8; color: var(--vert-contact); padding: var(--e-8) 0 calc(var(--e-7) + 3.5rem); } /* 3,5 rem : place de la barre d'appel sur téléphone */
@media (min-width: 900px) { .pied { padding-bottom: var(--e-7); } }
.pied__in { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--e-4); display: grid; gap: var(--e-6); }
.pied__legal { max-width: var(--largeur); margin: var(--e-6) auto 0; padding: var(--e-4) var(--e-4) 0; border-top: 1px solid rgb(0 0 0 / 0.15); font-size: 1rem; color: var(--noir); }
/* Choix de la langue, au-dessus des mentions (14 oct. 2026) : la page équivalente en français, en anglais, en espagnol. */
.pied__langues { max-width: var(--largeur); margin: var(--e-5) auto 0; padding: 0 var(--e-4); font-size: 1rem; }
.pied__langues a[aria-current] { font-weight: 700; text-decoration: none; }
.pied a { color: var(--noir); font-weight: 700; }
.pied nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.pied nav a { display: inline-flex; min-height: 2.75rem; align-items: center; }
.pied__nom { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--noir); }
.pied__logo { width: min(18rem, 100%); margin-bottom: var(--e-3); }
.pied__devise { font-family: var(--ff-pinceau); font-size: 1.6rem; line-height: 1.2; color: var(--terre); margin-bottom: var(--e-4); }
@media (min-width: 900px) { .pied__in { grid-template-columns: 1.2fr 1fr 1fr; } }

/* ---------- Barre d'appel ---------- */
.barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barre); display: grid; grid-template-columns: 1fr 1fr; box-shadow: var(--ombre-barre); }
.barre a { display: flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 3.5rem; font-weight: 700; text-decoration: none; color: var(--blanc); }
.barre svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
#cta-appel { background: var(--vert-profond); }
#cta-itineraire { background: var(--noir); color: var(--mais); }
.barre .numero { display: none; }
@media (min-width: 900px) {
  .barre { left: auto; right: var(--e-5); bottom: var(--e-5); grid-template-columns: auto auto; gap: var(--e-3); box-shadow: none; }
  .barre a { border-radius: 2rem; padding: 0 var(--e-5); box-shadow: 0 3px 14px rgb(0 0 0 / 0.3); }
  .barre a:hover { filter: brightness(1.12); }
  .barre .numero { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .entete::after { display: none; }
}

/* Affiche (image en hauteur) dans un encart d'une page reprise du site : soirée fondu creusois, 3 oct. */
.rubrique__affiche { margin: 0 0 var(--e-5); }
.rubrique__affiche img { display: block; width: 100%; max-width: 26rem; height: auto; margin-inline: auto; border-radius: 6px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.28); }

/* ---------- La carte imprimée, sur la page de la carte (8 octobre 2026) ---------- */
.carte-imprimee { max-width: var(--largeur); margin: var(--e-section) auto 0; padding: 0 var(--e-4); color: var(--creme); }
.carte-imprimee .titre { color: var(--creme); }
.carte-imprimee > p { max-width: 62ch; }
.carte-imprimee__faces { display: grid; gap: var(--e-4); margin: var(--e-5) 0; }
.carte-imprimee__faces .carte-apercu { cursor: zoom-in; }
@media (min-width: 900px) { .carte-imprimee__faces { grid-template-columns: 1fr 1fr; } }

/* ---------- Photos entières dans un panneau (le plat n'est pas rogné) et logos des producteurs ---------- */
.rubrique__photo--entiere:not(:first-child) { margin: var(--e-5) 0; }
.rubrique__photo--entiere img, .rubrique__photo--entiere:not(:first-child) img { aspect-ratio: 3 / 2; border-radius: var(--rayon); box-shadow: var(--ombre-pose); }
@media (min-width: 900px) { .rubrique__photo--entiere:not(:first-child) { max-width: 34rem; margin-inline: auto; } }
.logos-producteurs { list-style: none; margin: var(--e-5) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--e-3); }
.logos-producteurs li { box-sizing: border-box; height: 5.5rem; padding: var(--e-3); border-radius: 12px; background: var(--blanc); box-shadow: 0 2px 8px rgb(0 0 0 / 0.18); }
.logos-producteurs img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- Palette du 8 octobre au soir (Antoine : « priorise les fonds beige et ceux avec effet ou encart marrons ») ----------
   Les encarts qui étaient vert olive passent au marron (la classe garde son nom, panneau--vert) ; l'encart maïs passe au
   beige à effet bois. Le vert reste aux boutons d'appel, au signal « ouvert » et au filet de l'en-tête. */
:root {
  --fond-vert: radial-gradient(90% 70% at 0% 0%, rgb(196 92 48 / 0.45), transparent 70%), var(--terre);
  --vert-encre: #3d1307;
}
.panneau--mais { background: #e7d3ae url("../img/planche-bois.webp") center / cover; color: var(--noir); box-shadow: var(--ombre-pose); }
.panneau--mais .titre { color: var(--terre); }
.panneau--mais a:not(.btn) { color: var(--terre-nuit); }

/* Les rubriques de la carte dans des bulles (Antoine, 8 oct. : « mets des bulles »). */
.carte-nav ul { gap: var(--e-2); padding-block: var(--e-3); }
.carte-nav a { min-height: 2.6rem; padding: 0 var(--e-4); border: 2px solid rgb(251 255 228 / 0.55); border-radius: 2rem; }
.carte-nav a:hover, .carte-nav a[aria-current] { background: var(--mais); border-color: var(--mais); color: var(--noir); }

/* Une vraie bannière en haut des pages (Antoine, 8 oct. au soir : « c'est moche, fais une vraie bannière ») : plus haute,
   la photo sur toute la largeur, un voile marron du côté du titre pour qu'il se lise sans cacher le plat. */
@media (min-width: 900px) {
  .une--page:not(.une--partagee) { min-height: min(66svh, 38rem); }
  .une--page:not(.une--partagee)::after { background: linear-gradient(90deg, rgb(61 19 7 / 0.84) 0%, rgb(61 19 7 / 0.6) 30%, rgb(61 19 7 / 0.12) 58%, rgb(61 19 7 / 0) 72%), linear-gradient(180deg, rgb(92 30 12 / 0) 55%, rgb(92 30 12 / 0.8) 100%); }
  .une--page:not(.une--partagee) h1 { text-shadow: 2px 3px 6px rgb(40 12 4 / 0.85); }
}
.une__photo[src$="shoot-burger.jpg"] { object-position: 50% 58%; }

/* Photos du lieu du 9 octobre 2026 : sur le bar, l'enseigne est en haut de l'image. */
.une__photo[src$="buffet-2026.jpg"], .une__photo[src$="salle-livres-2026.jpg"] { object-position: 50% 55%; }   /* jamais une photo avec des lettres sous le titre (le bar et son enseigne) */
.une__photo[src$="salle-2026.jpg"], .une__photo[src$="salle-claire-2026.jpg"] { object-position: 50% 60%; }

/* ---------- La carte : le vert de la charte (Antoine, 9 oct. 2026 : « il manque du vert sur la carte selon la charte graphique ») ----------
   Comme sur la carte imprimée : « Entrées », « Salades » et « Plaisirs du Paysan » en vert, les sous-titres des rubriques en vert,
   la rubrique en cours en vert dans les bulles. Les fonds restent beige et marron. */
#entrees .titre { color: var(--vert-contact); }
#plaisirs-du-paysan .titre { color: var(--vert-profond); }
#salades .titre { color: var(--beige); }
:is(#entrees, #plaisirs-du-paysan, #menu-enfant, #garnitures, #menus, #glaces) > .chapeau { color: var(--vert-contact); font-weight: 700; }
:is(#a-partager, #salades, #burgers, #boucherie, #mer, #desserts) > .chapeau { color: #dcee96; font-weight: 700; }
.carte-nav a:hover, .carte-nav a[aria-current] { background: var(--vert); border-color: var(--vert); color: var(--noir); }

/* La carte, suite (Antoine, 9 oct. au soir : « mets du vert stp comme demandé ») : sur la page Carte, les encarts de couleur
   reviennent au vert olive de la charte (ailleurs ils restent marron) et les rubriques défilent sur une bande verte. */
:is(#a-partager, #salades, #burgers, #boucherie, #mer, #desserts).panneau--vert {
  --fond-carte: radial-gradient(90% 70% at 0% 0%, rgb(95 116 19 / 0.55), transparent 70%), var(--vert-contact);
  background: var(--motif-epi-mais) no-repeat right 1rem top 1.4rem / 5.5rem, var(--fond-carte);
}
@media (max-width: 699px) { :is(#a-partager, #salades, #burgers, #boucherie, #mer, #desserts).panneau--vert { background: var(--fond-carte); } }
body:has(#a-partager) .carte-nav { background: var(--vert-contact); border-block: 2px solid var(--vert-profond); }

/* ---------- Plus de vert dans toute la maquette (Antoine, 11 oct. 2026 : « je veux plus de vert sur la maquette ») ----------
   Un encart de couleur sur deux passe au vert olive de la charte, l'autre reste marron ; les encarts beiges ne changent pas.
   Sur la page Carte, tous les encarts de couleur sont déjà verts (bloc précédent). */
:root { --fond-olive: radial-gradient(90% 70% at 0% 0%, rgb(95 116 19 / 0.55), transparent 70%), var(--vert-contact); }
.panneau--vert:nth-child(odd of .panneau--vert) { --vert-encre: #1a2400; background: var(--motif-epi-mais) no-repeat right 1rem top 1.4rem / 5.5rem, var(--fond-olive); }
@media (max-width: 699px) { .panneau--vert:nth-child(odd of .panneau--vert) { background: var(--fond-olive); } }

/* En-tête : la bulle de la rubrique en cours en vert (Antoine, 11 oct. 2026 : « en vert à la place du marron »). */
.nav__bulle { background: var(--vert-profond); box-shadow: 0 4px 12px rgb(70 88 0 / 0.3); }
.nav a:hover:not(.bulle-sur) { color: var(--vert-contact); }
.nav-ouverte .nav a[aria-current="page"] { background: var(--vert-profond); }
.nav a::after { background: var(--vert-profond); }
.nav a[aria-current="page"] { color: var(--vert-contact); }
.nav-ouverte .nav a[aria-current="page"] { color: var(--blanc); }

/* La capsule du menu reste beige : seul le survol change (Antoine, 11 oct. 2026 : « non mais le menu pas en vert, je disais le
   survol marron en vert »). */

/* Téléphone : le menu ouvert couvre toute la page. Le flou de l'en-tête en fait le repère du menu : « bottom: 0 » tombait
   sur le bas de l'en-tête, le fond s'écrasait et les rubriques se posaient sur la page (vu le 11 oct. 2026). */
.nav-ouverte .nav { inset: var(--haut-entete) 0 auto; height: calc(100vh - var(--haut-entete)); height: calc(100dvh - var(--haut-entete)); overflow-y: auto; }

/* ---------- Un peu moins de marron (Antoine, 11 oct. 2026 : « je trouve y a beaucoup trop de marron », puis, devant un fond de
   page passé au crème : « je t'ai pas demandé de mettre le site en couleur crème intégrale, je t'ai dit d'enlever un peu de
   marron ») ----------
   Le fond de page reste marron. Ce qui change : les encarts de couleur sont tous vert olive (un sur deux était marron, sur le
   fond marron), les blocs sont un peu moins espacés (moins de fond vide entre eux) et le pied de page est vert (campagne.css). */
.panneau--vert { --vert-encre: #1a2400; background: var(--motif-epi-mais) no-repeat right 1rem top 1.4rem / 5.5rem, var(--fond-olive); }
@media (max-width: 699px) { .panneau--vert { background: var(--fond-olive); } }
:root { --e-section: clamp(3rem, 2rem + 4vw, 5.5rem); }

/* Le fond de page en planches de bois brun (Antoine, 11 oct. 2026 : « essaie de faire quelque chose pour le fond ») : le marron
   reste, mais il n'est plus uni. Carreau fabriqué par fond_bois.py, répété sans raccord. */
body { background: var(--terre-nuit) url("../img/fond-bois.webp") repeat center top / 1040px auto; }
@media (max-width: 699px) { body { background-size: 620px auto; } }