/* =========================================================================
   Signature du Chef Maison — feuille de style unique
   Design sans photo de plat : la typographie, la couleur et l'espace
   portent l'identité. Les emplacements photo sont balisés .photo-slot.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* couleurs de marque */
  --vert-profond: #1F3D2E;
  --vert-nuit:    #163023;
  --vert-vif:     #2C6B49;
  --vert-clair:   #E4EDE3;
  --sauge:        #8CA893;
  --argile:       #B23A22;
  --argile-pale:  #FBEEEA;
  --or:           #B8860B;
  --or-pale:      #FBF3DF;

  /* neutres chauds */
  --creme:        #FAF7F0;
  --creme-2:      #F2EDE2;
  --blanc:        #FFFFFF;
  --encre:        #1A2420;
  --encre-douce:  #3D4A44;
  --gris:         #66756E;
  --trait:        #DDD6C7;
  --trait-fort:   #C3B9A4;

  /* typographie */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --texte:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* rythme */
  --e1: .5rem;  --e2: .875rem; --e3: 1.25rem;
  --e4: 2rem;   --e5: 3.25rem; --e6: 5rem;   --e7: 7rem;

  --rayon: 12px;
  --rayon-sm: 8px;
  --ombre: 0 1px 2px rgba(26,36,32,.05), 0 10px 30px -18px rgba(26,36,32,.35);
  --ombre-forte: 0 2px 4px rgba(26,36,32,.06), 0 18px 45px -20px rgba(26,36,32,.45);

  --barre-mobile: 0px; /* recalculé en media query */
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut `hidden` doit l'emporter sur nos `display:flex` / `display:grid`,
   sinon masquer un élément depuis JavaScript ne produit aucun effet. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: var(--barre-mobile);
}

img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--sauge); color: var(--vert-profond); }

a { color: var(--vert-vif); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--vert-profond); }

:focus-visible {
  outline: 3px solid var(--vert-vif);
  outline-offset: 3px;
  border-radius: 4px;
}

/* saut au contenu */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--vert-profond); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--rayon-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- 3. Typographie ---------- */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.3rem, 6.2vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.02em;
}
h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}
h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -.01em;
}
h4 {
  font-family: var(--texte);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.005em;
}

p { margin: 0 0 1em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

.surtitre {
  font-family: var(--texte);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--argile);
  margin: 0 0 var(--e2);
}
.surtitre.clair { color: var(--sauge); }

.chapo {
  font-size: clamp(1.08rem, 2.2vw, 1.28rem);
  line-height: 1.55;
  color: var(--encre-douce);
  max-width: 62ch;
}

.petit { font-size: .87rem; color: var(--gris); }
.tres-petit { font-size: .79rem; color: var(--gris); line-height: 1.5; }

strong { font-weight: 650; }

/* ---------- 4. Mise en page ---------- */
.contenant { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 20px; }
.contenant-etroit { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 20px; }

section { padding-block: var(--e6); }
section.serre { padding-block: var(--e5); }

.bloc-titre { display: grid; gap: var(--e2); margin-bottom: var(--e4); max-width: 68ch; }

.grille-2 { display: grid; gap: var(--e3); grid-template-columns: 1fr; }
.grille-3 { display: grid; gap: var(--e3); grid-template-columns: 1fr; }
.grille-4 { display: grid; gap: var(--e2); grid-template-columns: 1fr; }

/* Les éléments de grille ont min-width:auto par défaut : un enfant large
   (tableau, <pre>, mot long) fait alors déborder toute la page au lieu de
   défiler dans son conteneur. On neutralise ce comportement partout. */
.grille-2 > *, .grille-3 > *, .grille-4 > *,
.heros-grille > *, .pied-grille > * { min-width: 0; }

@media (min-width: 700px) {
  .grille-2 { grid-template-columns: repeat(2, 1fr); gap: var(--e4); }
  .grille-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 950px) {
  .grille-3 { grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
  .grille-4 { grid-template-columns: repeat(4, 1fr); }
}

.fond-vert  { background: var(--vert-profond); color: var(--creme); }
.fond-vert h1, .fond-vert h2, .fond-vert h3 { color: var(--blanc); }
/* `:not(.btn)` obligatoire : sans lui, ce sélecteur (0,1,1) l'emporte sur
   .btn-clair (0,1,0) et repeint le texte des boutons en sauge — illisible
   sur fond crème. Même piège que .nav-desktop a plus haut. */
.fond-vert a:not(.btn) { color: var(--sauge); }
.fond-vert .chapo { color: #CFDCD1; }
.fond-vert .petit, .fond-vert .tres-petit { color: var(--sauge); }

.fond-creme { background: var(--creme-2); }

/* ---------- 5. En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250,247,240,.93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}
.entete-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); min-height: 68px;
}

.logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.logo-nom {
  font-family: var(--display); font-weight: 600; font-style: italic;
  font-size: 1.32rem; color: var(--vert-profond); letter-spacing: -.01em;
}
.logo-sous {
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gris); margin-top: .28rem; font-weight: 600;
}

.nav-desktop { display: none; }
@media (min-width: 950px) {
  .nav-desktop { display: flex; align-items: center; gap: var(--e3); }
  /* `:not(.btn)` est indispensable : sans lui, cette règle est plus
     spécifique que .btn-primaire et rend le bouton d'appel illisible. */
  .nav-desktop a:not(.btn) {
    font-size: .92rem; font-weight: 500; color: var(--encre-douce);
    text-decoration: none; padding: .4rem 0; border-bottom: 2px solid transparent;
  }
  .nav-desktop a:not(.btn):hover { color: var(--vert-profond); border-bottom-color: var(--sauge); }
  .nav-desktop a:not(.btn)[aria-current="page"] { color: var(--vert-profond); border-bottom-color: var(--vert-vif); }
}

.burger {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--trait-fort); border-radius: var(--rayon-sm);
  padding: .5rem .75rem; font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--vert-profond); cursor: pointer;
}
.burger:hover { background: var(--creme-2); }
@media (min-width: 950px) { .burger { display: none; } }
.burger-barres { display: grid; gap: 3px; }
.burger-barres i { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }

.nav-mobile {
  display: none; border-top: 1px solid var(--trait);
  background: var(--creme);
  padding-block: var(--e2) var(--e3);
}
.nav-mobile[data-ouvert="true"] { display: block; }
@media (min-width: 950px) { .nav-mobile { display: none !important; } }
.nav-mobile ul { list-style: none; margin: 0; padding: 0; display: grid; }
.nav-mobile a {
  display: block; padding: .8rem .2rem; font-size: 1.02rem; font-weight: 500;
  color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--trait);
}
.nav-mobile a[aria-current="page"] { color: var(--vert-vif); font-weight: 600; }

/* ---------- 6. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--texte); font-size: .96rem; font-weight: 600;
  padding: .82rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .12s ease, background .16s ease, color .16s ease;
  line-height: 1.2; text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn-primaire { background: var(--vert-profond); color: var(--blanc); }
.btn-primaire:hover { background: var(--vert-vif); color: var(--blanc); }

.btn-secondaire { background: transparent; color: var(--vert-profond); border-color: var(--trait-fort); }
.btn-secondaire:hover { background: var(--vert-clair); color: var(--vert-profond); border-color: var(--sauge); }

.btn-clair { background: var(--creme); color: var(--vert-profond); }
.btn-clair:hover { background: var(--blanc); color: var(--vert-profond); }

.btn-contour-clair { background: transparent; color: var(--creme); border-color: rgba(212,224,213,.5); }
.btn-contour-clair:hover { background: rgba(255,255,255,.1); color: var(--blanc); }

.groupe-btn { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- 7. Héros ---------- */
.heros {
  background: var(--vert-profond); color: var(--creme);
  padding-block: var(--e6) var(--e6);
  position: relative; overflow: hidden;
}
.heros::after {
  content: ""; position: absolute; inset: auto -10% -45% auto;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,168,147,.22), transparent 68%);
  pointer-events: none;
}
.heros-grille { display: grid; gap: var(--e4); align-items: center; position: relative; z-index: 1; }
@media (min-width: 950px) {
  .heros-grille { grid-template-columns: 1.15fr .85fr; gap: var(--e5); }
}
.heros h1 { color: var(--blanc); margin-bottom: var(--e3); }
.heros h2 { color: var(--blanc); }
.heros .chapo { color: #D3E0D5; margin-bottom: var(--e4); }
/* Sur fond vert profond, le vert vif des liens ne passe pas le contraste. */
.heros a:not(.btn) { color: var(--sauge); }
.heros a:not(.btn):hover { color: var(--blanc); }
.simulateur.sur-vert a { color: var(--sauge); }
.simulateur.sur-vert a:hover { color: var(--blanc); }
.simulateur.sur-vert .tres-petit { color: #B4C7B9; }

.heros-points { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; gap: .65rem; }
.heros-points li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; align-items: start;
  font-size: .95rem; color: #D3E0D5;
}
.heros-points svg { width: 1.1rem; height: 1.1rem; margin-top: .22rem; color: var(--sauge); flex: none; }

/* ---------- 8. Emplacements photo ---------- */
.photo-slot {
  background: var(--creme-2);
  border: 1.5px dashed var(--trait-fort);
  border-radius: var(--rayon);
  display: grid; place-items: center; text-align: center;
  padding: var(--e4) var(--e3);
  color: var(--gris); min-height: 220px;
}
.photo-slot svg { width: 2rem; height: 2rem; color: var(--trait-fort); margin-bottom: .6rem; }
.photo-slot b { display: block; font-size: .86rem; color: var(--encre-douce); font-weight: 600; }
.photo-slot span { display: block; font-size: .78rem; margin-top: .25rem; max-width: 30ch; }
.photo-slot.sur-vert { background: rgba(255,255,255,.05); border-color: rgba(140,168,147,.45); color: var(--sauge); }
.photo-slot.sur-vert b { color: #D3E0D5; }
.photo-slot.sur-vert svg { color: rgba(140,168,147,.7); }
.photo-slot.portrait { aspect-ratio: 4 / 5; min-height: 0; }

.photo-chef { border-radius: var(--rayon); box-shadow: var(--ombre-forte); }

/* ---------- 9. Cartes ---------- */
.carte {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: var(--e3);
  display: grid; gap: .7rem; align-content: start; box-shadow: var(--ombre);
}
.carte-titre { display: flex; align-items: baseline; gap: .6rem; }

.carte-num {
  font-family: var(--display); font-size: 2.6rem; line-height: .85;
  color: var(--sauge); font-weight: 600;
}

/* étapes numérotées */
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.etapes > li {
  counter-increment: etape;
  display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--e2); align-items: start;
}
.etapes > li::before {
  content: counter(etape);
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  background: var(--vert-profond); color: var(--blanc);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
}
.etapes > li > div > b { display: block; font-size: 1.05rem; color: var(--vert-profond); margin-bottom: .2rem; }
.fond-vert .etapes > li::before { background: var(--sauge); color: var(--vert-profond); }
.fond-vert .etapes > li > div > b { color: var(--blanc); }

/* encadrés */
.encadre {
  border-radius: var(--rayon); padding: var(--e3);
  border: 1px solid var(--trait); background: var(--blanc);
  display: grid; gap: .6rem;
}
.encadre h4 { margin-bottom: .1rem; }
.encadre.info   { background: var(--vert-clair);  border-color: var(--sauge); }
.encadre.info h4   { color: var(--vert-vif); }
.encadre.alerte { background: var(--argile-pale); border-color: var(--argile); }
.encadre.alerte h4 { color: var(--argile); }
.encadre.attention { background: var(--or-pale); border-color: #D9BC74; }
.encadre.attention h4 { color: var(--or); }

/* ---------- 10. Formules et tarifs ---------- */
.formule {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--rayon); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--ombre);
}
.formule.mise-en-avant { border-color: var(--vert-vif); border-width: 2px; box-shadow: var(--ombre-forte); }

.formule-entete { padding: var(--e3) var(--e3) var(--e2); border-bottom: 1px solid var(--trait); }
.formule-etiquette {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--vert-vif); color: #fff; padding: .2rem .55rem;
  border-radius: 999px; margin-bottom: .6rem;
}
.formule-prix {
  font-family: var(--display); font-size: 2.1rem; font-weight: 600;
  color: var(--vert-profond); line-height: 1; margin-top: .7rem;
}
.formule-prix small { font-family: var(--texte); font-size: .8rem; font-weight: 500; color: var(--gris); display: block; margin-top: .4rem; letter-spacing: 0; }
.formule-corps { padding: var(--e3); display: grid; gap: .8rem; flex: 1; align-content: start; }
.formule-corps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.formule-corps li { display: grid; grid-template-columns: 1.15rem 1fr; gap: .55rem; align-items: start; }
.formule-corps li svg { width: .95rem; height: .95rem; color: var(--vert-vif); margin-top: .33rem; }
.formule-pied { padding: 0 var(--e3) var(--e3); }
.formule-pied .btn { width: 100%; }

/* tableau */
.tableau-wrap { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--blanc); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 480px; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--trait); }
thead th {
  background: var(--vert-profond); color: var(--creme);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) td { background: #FBFAF6; }
td.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.nombre b { color: var(--vert-profond); }
.reste { color: var(--vert-vif); font-weight: 650; }

/* ---------- 11. Simulateur ---------- */
.simulateur {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: var(--e3); box-shadow: var(--ombre-forte);
  display: grid; gap: var(--e3);
}
.simulateur.sur-vert { background: rgba(255,255,255,.07); border-color: rgba(140,168,147,.4); box-shadow: none; }
.simulateur.sur-vert label { color: #D3E0D5; }
.simulateur.sur-vert .sim-resultat { background: rgba(0,0,0,.2); border-color: rgba(140,168,147,.35); }
.simulateur.sur-vert .sim-ligne span:first-child { color: #CFDCD1; }
.simulateur.sur-vert .sim-ligne span:last-child { color: var(--blanc); }
.simulateur.sur-vert .sim-total span:last-child { color: var(--sauge); }
.simulateur.sur-vert .tres-petit { color: var(--sauge); }

.champ { display: grid; gap: .4rem; }
.champ label { font-size: .84rem; font-weight: 600; color: var(--encre-douce); }
.champ .aide { font-size: .78rem; color: var(--gris); font-weight: 400; }

select, input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], textarea {
  font: inherit; font-size: .96rem;
  padding: .7rem .85rem;
  border: 1.5px solid var(--trait-fort); border-radius: var(--rayon-sm);
  background: var(--blanc); color: var(--encre); width: 100%;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2366756E'%3E%3Cpath d='M8 11 3.5 6h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 14px;
  padding-right: 2.4rem;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--vert-vif); }

.sim-resultat {
  background: var(--vert-clair); border: 1px solid var(--sauge);
  border-radius: var(--rayon-sm); padding: var(--e3); display: grid; gap: .45rem;
}
.sim-ligne { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-size: .93rem; }
.sim-ligne span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.sim-total {
  border-top: 1px solid var(--sauge); margin-top: .35rem; padding-top: .6rem;
  font-size: 1rem;
}
.sim-total span:last-child {
  font-family: var(--display); font-size: 1.85rem; font-weight: 600;
  color: var(--vert-vif); line-height: 1;
}

/* ---------- 12. Formulaire ---------- */
.formulaire { display: grid; gap: var(--e3); }
.formulaire fieldset { border: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.formulaire legend {
  font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--vert-profond);
  padding: 0; margin-bottom: .2rem;
}
.duo { display: grid; gap: var(--e3); grid-template-columns: 1fr; }
@media (min-width: 620px) { .duo { grid-template-columns: 1fr 1fr; } }

.case { display: grid; grid-template-columns: 1.3rem 1fr; gap: .7rem; align-items: start; font-size: .89rem; line-height: 1.5; }
.case input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; margin: .18rem 0 0; accent-color: var(--vert-vif);
}
.requis { color: var(--argile); font-weight: 700; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 13. FAQ ---------- */
.faq { display: grid; gap: .75rem; }
details.qr {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--rayon-sm); overflow: hidden;
}
details.qr summary {
  cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; font-size: 1rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  color: var(--vert-profond);
}
details.qr summary::-webkit-details-marker { display: none; }
details.qr summary::after {
  content: "+"; font-family: var(--display); font-size: 1.5rem; line-height: 1;
  color: var(--sauge); flex: none; transition: transform .18s ease;
}
details.qr[open] summary::after { content: "−"; }
details.qr[open] summary { border-bottom: 1px solid var(--trait); }
details.qr .reponse { padding: 1rem 1.2rem 1.2rem; font-size: .95rem; color: var(--encre-douce); }
details.qr .reponse p { max-width: none; }

/* ---------- 14. Barre mobile appel / WhatsApp ---------- */
.barre-contact {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--vert-profond);
  border-top: 1px solid rgba(140,168,147,.3);
  box-shadow: 0 -6px 20px -10px rgba(0,0,0,.4);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-contact a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem .5rem; color: var(--creme); text-decoration: none;
  font-size: .92rem; font-weight: 600;
}
.barre-contact a + a { border-left: 1px solid rgba(140,168,147,.3); }
.barre-contact a:hover { background: rgba(255,255,255,.08); color: var(--blanc); }
.barre-contact svg { width: 1.15rem; height: 1.15rem; }
@media (min-width: 950px) { .barre-contact { display: none; } }
@media (max-width: 949px) { :root { --barre-mobile: 58px; } }

/* ---------- 15. Bandeau d'appel ---------- */
.bandeau-cta {
  background: var(--vert-profond); color: var(--creme);
  border-radius: var(--rayon); padding: var(--e4) var(--e3);
  text-align: center; display: grid; gap: var(--e3); justify-items: center;
}
.bandeau-cta h2 { color: var(--blanc); }
.bandeau-cta p { color: #D3E0D5; margin: 0 auto; }

/* ---------- 16. Pied de page ---------- */
.pied { background: var(--vert-profond); color: #C3D3C6; padding-block: var(--e5) var(--e4); margin-top: var(--e6); }
.pied-grille { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
@media (min-width: 750px) { .pied-grille { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--e4); } }
.pied h4 {
  color: var(--sauge); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: var(--e2);
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.pied a { color: #C3D3C6; text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied .logo-nom { color: var(--blanc); }
.pied .logo-sous { color: var(--sauge); }

.pied-sap { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e3); }
.pied-sap img { width: 74px; height: auto; background: #fff; border-radius: 6px; padding: 4px; }
.pied-sap p { font-size: .8rem; color: var(--sauge); margin: 0; max-width: 34ch; line-height: 1.45; }

.pied-bas {
  border-top: 1px solid rgba(140,168,147,.25);
  margin-top: var(--e4); padding-top: var(--e3);
  display: flex; flex-wrap: wrap; gap: .6rem var(--e3);
  justify-content: space-between; font-size: .82rem; color: var(--sauge);
}
.pied-bas ul { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ---------- 17. Pages légales ---------- */
.page-legale { padding-block: var(--e5) var(--e6); }
.page-legale h2 { margin-top: var(--e5); margin-bottom: var(--e2); font-size: clamp(1.4rem, 3vw, 1.85rem); }
.page-legale h2:first-of-type { margin-top: var(--e4); }
.page-legale h3 { margin-top: var(--e3); margin-bottom: .4rem; font-size: 1.12rem; }
.page-legale ul, .page-legale ol { max-width: 66ch; padding-left: 1.3rem; }
.page-legale li { margin-bottom: .4rem; }
.page-legale dl { display: grid; gap: .55rem; max-width: 66ch; margin: var(--e2) 0; }
.page-legale dt { font-weight: 650; font-size: .87rem; color: var(--gris); }
.page-legale dd { margin: 0 0 .5rem; }

/* ---------- 18. Divers ---------- */
.fil { font-size: .82rem; color: var(--gris); padding-top: var(--e3); }
.fil a { color: var(--gris); }

.a-completer {
  background: var(--or-pale); border-bottom: 2px dotted var(--or);
  padding: 0 .2rem; color: var(--or); font-weight: 600; font-size: .95em;
}

.liste-cochee { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.liste-cochee li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .6rem; align-items: start; }
.liste-cochee svg { width: 1rem; height: 1rem; color: var(--vert-vif); margin-top: .35rem; flex: none; }
.fond-vert .liste-cochee svg { color: var(--sauge); }

.separateur { border: none; border-top: 1px solid var(--trait); margin-block: var(--e4); }

.citation {
  font-family: var(--display); font-size: clamp(1.25rem, 3vw, 1.7rem);
  line-height: 1.35; color: var(--vert-profond); font-style: italic;
  border-left: 3px solid var(--sauge); padding-left: var(--e3); max-width: 46ch;
}
.fond-vert .citation { color: var(--blanc); border-left-color: var(--sauge); }

.mention-ci {
  font-size: .8rem; color: var(--gris); line-height: 1.5;
  border-left: 2px solid var(--trait-fort); padding-left: .8rem; max-width: 62ch;
}
.fond-vert .mention-ci { color: var(--sauge); border-left-color: rgba(140,168,147,.4); }

@media print {
  .entete, .barre-contact, .pied, .btn { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
}

/* =========================================================================
   19. Légumes — dessins vectoriels
   -------------------------------------------------------------------------
   Les symboles sont définis dans src/partials/legumes.svg, injecté une fois
   par page. On les appelle par référence :

       <svg class="legume t-md"><use href="#lg-tomate"></use></svg>

   Tailles : t-sm 28px · t-md 44px · t-lg 64px · t-xl 96px
   ========================================================================= */

.legume {
  display: block;
  width: 44px; height: 44px;
  flex: none;
  filter: drop-shadow(0 2px 3px rgba(19, 32, 26, .16));
}
.legume.t-sm { width: 28px; height: 28px; }
.legume.t-md { width: 44px; height: 44px; }
.legume.t-lg { width: 64px; height: 64px; }
.legume.t-xl { width: 96px; height: 96px; }

/* ---------- guirlande : rang de légumes à la frontière de deux sections ---- */
.guirlande {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 0; margin: 0; padding: 0; pointer-events: none;
  position: relative; z-index: 2;
}
.guirlande .legume { width: 56px; height: 56px; margin-inline: -4px; }
.guirlande .legume:nth-child(odd)  { transform: translateY(-6px) rotate(-8deg); }
.guirlande .legume:nth-child(even) { transform: translateY(2px)  rotate(7deg); }
/* Sur téléphone, on garde cinq légumes : au-delà ils se chevauchent trop. */
@media (max-width: 560px) {
  .guirlande .legume { width: 44px; height: 44px; }
  .guirlande .legume:nth-child(n+7) { display: none; }
}
@media (max-width: 560px) {
  .couture .guirlande { top: -22px; }
}

/* Guirlande posée sur la couture entre deux sections. */
.couture { position: relative; height: 0; }
/* Décalée de la moitié de leur hauteur : les légumes chevauchent la couture,
   moitié sur le fond vert, moitié sur le fond crème. */
.couture .guirlande { position: absolute; left: 0; right: 0; top: -28px; }
.couture.haute .guirlande { top: -42px; }

/* ---------- bandeau décoratif pleine largeur ---------- */
.bandeau-legumes {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--e3); padding-block: var(--e4);
}
.bandeau-legumes .legume { opacity: .95; }
.bandeau-legumes .legume:nth-child(3n)   { transform: rotate(-10deg); }
.bandeau-legumes .legume:nth-child(3n+1) { transform: rotate(8deg); }

/* ---------- légumes décoratifs dans le héros ---------- */
.heros-legumes {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  z-index: 0;
}
.heros-legumes .legume {
  position: absolute; opacity: .9;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3));
}
.heros-legumes .l1 { top: 8%;  right: 4%;  width: 74px; height: 74px; transform: rotate(-14deg); }
.heros-legumes .l2 { bottom: 6%; right: 16%; width: 58px; height: 58px; transform: rotate(11deg); }
.heros-legumes .l3 { top: 46%; right: -14px; width: 50px; height: 50px; transform: rotate(24deg); }
/* Sur téléphone, le héros occupe toute la largeur : des légumes décoratifs
   en fond se retrouvent coupés par le bord et lisent comme un défaut.
   La guirlande de la couture suffit à apporter la couleur. */
@media (max-width: 949px) {
  .heros-legumes { display: none; }
}

/* ---------- pastille : légume posé dans une carte ---------- */
.pastille {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--vert-clair);
  display: grid; place-items: center;
  border: 1px solid var(--sauge);
}
.pastille .legume { width: 38px; height: 38px; filter: none; }
.fond-vert .pastille { background: rgba(255, 255, 255, .1); border-color: rgba(140, 168, 147, .4); }

/* Légume posé dans l'angle d'une carte de formule. */
.formule-entete { position: relative; }
.formule-legume {
  position: absolute; top: var(--e2); right: var(--e2);
  width: 42px; height: 42px; opacity: .92;
}

/* Légume en vignette à côté d'un surtitre. */
.surtitre-legume {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 var(--e2);
}
.surtitre-legume .surtitre { margin: 0; }
.surtitre-legume .legume { width: 30px; height: 30px; }

@media (prefers-reduced-motion: no-preference) {
  .guirlande .legume, .bandeau-legumes .legume { transition: transform .3s ease; }
}

/* =========================================================================
   20. Fonds photographiques de section
   -------------------------------------------------------------------------
   Une photo de plat derrière une section, sous un voile vert opaque à 86 %.

   LE VOILE N'EST PAS DÉCORATIF, IL EST FONCTIONNEL. Sans lui, le texte
   devient illisible dès qu'un pixel clair passe dessous. L'opacité de 86 %
   a été calculée, pas choisie à l'œil : au pixel le plus clair de chaque
   image, elle donne 8:1 pour le blanc et 5,6:1 pour le texte secondaire —
   au-dessus du seuil AA de 4,5:1 des WCAG.

   Le sauge (#8CA893) utilisé sur fond vert uni ne tient PAS ce seuil sur
   photo (3,2:1). Il est donc remplacé par un gris-vert plus clair partout
   dans une section à fond photo. Ne pas revenir en arrière là-dessus.

   Les images sont volontairement floutées à la génération : cela renforce
   la lisibilité du texte et masque la faible définition des sources.

   ATTENTION AU CHEMIN DES IMAGES. Une url() placée dans une variable
   personnalisée se résout depuis la feuille de style qui la CONSOMME,
   pas depuis la page HTML qui la déclare. Comme le var(--photo) est lu
   ici, dans assets/css/style.css, le chemin doit partir de ce fichier :
   « ../img/… » et non « assets/img/… ». Écrire le second donne des 404
   silencieux sur /assets/css/assets/img/… et un fond simplement vide.

   Emploi :
     <section class="fond-vert fond-photo"
              style="--photo:url('../img/fond-saintjacques-1600.jpg')">
   ========================================================================= */

.fond-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--vert-nuit);
}

/* la photo */
.fond-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* le voile qui garantit la lisibilité */
.fond-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(31, 61, 46, .86);
}

/* le contenu passe au-dessus des deux couches */
.fond-photo > * { position: relative; z-index: 1; }

/* Texte secondaire : le sauge ne passe pas le contraste sur photo. */
.fond-photo .petit,
.fond-photo .tres-petit,
.fond-photo .surtitre.clair,
.fond-photo figcaption,
.fond-photo .mention-ci { color: #CFDCD1; }
.fond-photo a:not(.btn) { color: #E4EDE3; }
.fond-photo a:not(.btn):hover { color: #fff; }

/* Les cartes translucides posées sur une photo ont besoin d'un fond plus
   dense que sur le vert uni, sinon la photo transparaît dans le texte. */
.fond-photo .carte,
.fond-photo .simulateur.sur-vert { background: rgba(18, 36, 27, .72); backdrop-filter: blur(3px); }
.fond-photo .sim-resultat { background: rgba(0, 0, 0, .3); }

/* Bandeau d'appel avec photo : même principe, coins arrondis. */
.bandeau-cta.fond-photo { background-color: var(--vert-nuit); }

/* Sur petit écran, une image deux fois moins large suffit. */
@media (max-width: 700px) {
  .fond-photo::before { background-image: var(--photo-petit, var(--photo)); }
}

/* Économie de données : on retire la photo, le voile devient le fond. */
@media (prefers-reduced-data: reduce) {
  .fond-photo::before { background-image: none; }
  .fond-photo::after { background: var(--vert-profond); }
}

/* =========================================================================
   21. Héros photographique
   -------------------------------------------------------------------------
   Une photo de plat derrière le premier écran. C'est l'image la plus
   regardée du site : elle doit donner faim, et le texte doit rester lisible.
   Les deux exigences s'opposent, un voile uniforme ne peut pas les tenir
   ensemble — trop clair le texte disparaît, trop sombre le plat aussi.

   D'où un DÉGRADÉ DIRECTIONNEL plutôt qu'un voile plat :
     · sur grand écran, opaque à gauche où vit le texte, il s'éclaircit
       vers la droite où le plat apparaît en couleur ;
     · sur téléphone le texte s'empile, le dégradé devient vertical :
       opaque en haut sous le titre, plus clair en bas.

   Les valeurs ci-dessous ne sont pas décoratives : elles sont le résultat
   de audit-contraste.cjs, qui mesure le contraste réel de chaque bloc de
   texte contre le pixel le plus clair situé derrière lui. Toute
   modification impose de relancer cet audit.
   ========================================================================= */

.heros.heros-photo {
  background-color: var(--vert-nuit);
  isolation: isolate;
}

.heros.heros-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
}

/* dégradé horizontal : texte protégé à gauche, plat révélé à droite.
   Les trois remises à zéro ci-dessous sont indispensables : .heros::after
   définit plus haut un halo circulaire de 480 x 480 px. Sans elles, le
   dégradé hérite de cette forme et ne couvre qu'un cercle au coin bas
   droit — le reste du texte se retrouve directement sur les assiettes. */
.heros.heros-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  width: auto; height: auto; border-radius: 0;
  /* Voile léger et uniforme : les trois plats doivent se lire sur toute
     la largeur. La lisibilité n'est plus assurée par le voile mais par le
     panneau opaque placé derrière le texte — voir .heros-panneau. */
  background: linear-gradient(
    180deg,
    rgba(19, 42, 30, .58) 0%,
    rgba(19, 42, 30, .66) 55%,
    rgba(19, 42, 30, .74) 100%
  );
}

.heros.heros-photo > *,
.heros.heros-photo .heros-grille { position: relative; z-index: 1; }

/* ---------- panneau de texte ----------
   Le voile du héros est volontairement léger pour que les plats se voient.
   La lisibilité est donc portée localement : le texte repose sur son
   propre panneau opaque, exactement comme le simulateur en face. Deux
   surfaces posées sur une image, plutôt qu'une image noyée sous un voile.

   Sans ce panneau, il faudrait remonter le voile à 0,86 et les plats
   disparaîtraient — c'est l'arbitrage, il est délibéré. */
.heros-panneau {
  background: rgba(15, 34, 24, .88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(140, 168, 147, .28);
  border-radius: var(--rayon);
  padding: var(--e4) var(--e4) var(--e4);
}
@media (max-width: 700px) {
  .heros-panneau { padding: var(--e3); }
}

/* Le simulateur repose sur la même image : il lui faut la même densité. */
.heros.heros-photo .simulateur.sur-vert {
  background: rgba(15, 34, 24, .82);
  backdrop-filter: blur(6px);
  border-color: rgba(140, 168, 147, .45);
}
.heros.heros-photo .sim-resultat { background: rgba(0, 0, 0, .34); }

/* Les légumes dessinés feraient doublon avec une vraie photo. */
.heros.heros-photo .heros-legumes { display: none; }

/* Le héros respire moins : le panneau apporte déjà sa propre marge. */
.heros.heros-photo { padding-block: var(--e5); }

@media (max-width: 949px) {
  /* Le texte s'empile : le dégradé passe à la verticale. */
  .heros.heros-photo::after {
    background: linear-gradient(
      180deg,
      rgba(19, 42, 30, .62) 0%,
      rgba(19, 42, 30, .70) 60%,
      rgba(19, 42, 30, .78) 100%
    );
  }
  .heros.heros-photo::before { background-image: var(--photo-petit, var(--photo)); }
}

@media (prefers-reduced-data: reduce) {
  .heros.heros-photo::before { background-image: none; }
  .heros.heros-photo::after { background: var(--vert-profond); }
}



/* =========================================================================
   22. Bandeau de relecture
   -------------------------------------------------------------------------
   Présent uniquement dans la version produite par `tools/build.py --apercu`.
   Il dit au relecteur ce qu'il regarde : une version de travail, avec des
   tarifs non confirmés et des mentions incomplètes.

   Volontairement visible sans être criard : s'il passait inaperçu, quelqu'un
   pourrait prendre les prix pour argent comptant ou diffuser le lien.
   ========================================================================= */

.bandeau-apercu {
  background: var(--argile);
  color: #fff;
  font-size: .82rem;
  line-height: 1.45;
  text-align: center;
  padding: .6rem 20px;
  padding-top: calc(.6rem + env(safe-area-inset-top, 0px));
}
.bandeau-apercu strong { font-weight: 700; }

/* L'en-tête collant doit se caler SOUS le bandeau, pas par-dessus. */
body.apercu .entete { top: 0; }

/* Message affiché à la place de l'envoi du formulaire. */
.apercu-message {
  background: var(--or-pale);
  border: 1px solid var(--or);
  border-radius: var(--rayon-sm);
  padding: var(--e3);
  color: var(--encre);
  font-size: .92rem;
}
.apercu-message strong { color: var(--or); }

/* =========================================================================
   Retours du 4 octobre 2026
   ========================================================================= */

/* ---------- prix des cartes de formules (ADR 0007) ---------- */
.formule-prix small.prix-avant { margin: 0 0 .25rem; }
.prix-renvoi { font-size: .5em; vertical-align: super; margin-left: .1em; color: var(--gris); }
.renvoi-prix { margin-top: var(--e3); max-width: 70ch; }
.formule-pied-double { display: grid; gap: .6rem; }
.btn .btn-sur {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; opacity: .72; margin-bottom: .1rem;
}
.btn:has(.btn-sur) { flex-direction: column; gap: 0; padding-block: .6rem; }

/* ---------- héros : photo du chef à la place du simulateur ---------- */
/* Côte à côte sur grand écran : deux colonnes égales, la photo prend
   exactement la hauteur et la largeur du panneau de texte (retours du 4/10).
   Sur téléphone, empilés : photo sous le panneau, même largeur. */
.heros-photo-chef { margin: 0; display: block; width: 100%; }
.heros-photo-chef img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: center 20%;
  border-radius: var(--rayon); box-shadow: var(--ombre-forte);
  border: 1px solid rgba(140,168,147,.35);
}
@media (min-width: 950px) {
  /* « Livre ouvert » : les deux pages se touchent, sans espace. Seuls les
     coins extérieurs sont arrondis ; une ombre douce marque la reliure. */
  .heros.heros-photo .heros-grille { grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; }
  .heros-photo-chef { height: 100%; position: relative; }
  .heros-photo-chef img {
    height: 100%; aspect-ratio: auto;
    border-left: none; border-radius: 0 var(--rayon) var(--rayon) 0;
  }
  .heros-photo-chef::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 34px; z-index: 1;
    pointer-events: none; border-radius: 0;
    background: linear-gradient(90deg, rgba(10, 24, 17, .38), rgba(10, 24, 17, 0));
  }
  .heros.heros-photo .heros-panneau {
    border-radius: var(--rayon) 0 0 var(--rayon);
    border-right: none;
    box-shadow: inset -18px 0 22px -18px rgba(0, 0, 0, .45);
  }
}

/* ---------- liens dans les étapes sur fond vert ---------- */
.fond-vert .etapes a { color: var(--vert-clair); }  /* sauge : 3,4:1 sur le fond crevettes du 18/10 */
.fond-vert .etapes a:hover { color: var(--blanc); }

/* ---------- carte du chef ---------- */
.carte-categories { display: grid; gap: .7rem; }
.carte-categorie {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden;
}
.carte-categorie > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem;
  padding: 1rem 1.1rem; font-family: var(--display); font-size: 1.25rem; font-weight: 600;
  color: var(--vert-profond);
}
.carte-categorie > summary::-webkit-details-marker { display: none; }
.carte-categorie > summary:hover { background: var(--vert-clair); }
.carte-categorie > summary:focus-visible { outline: 3px solid var(--vert-vif); outline-offset: -3px; }
.cat-nb { font-family: var(--texte); font-size: .82rem; font-weight: 500; color: var(--gris); }
.cat-choisis {
  font-family: var(--texte); font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  background: var(--vert-vif); color: var(--blanc); padding: .15rem .6rem; border-radius: 999px;
}
.cat-fleche { width: 1.2rem; height: 1.2rem; margin-left: auto; flex: none; transition: transform .2s ease; }
.carte-categorie[open] > summary { border-bottom: 1px solid var(--trait); }
.carte-categorie[open] .cat-fleche { transform: rotate(180deg); }
.carte-categorie > .plats { padding: 1rem; background: #FBFAF6; }
@media (prefers-reduced-motion: reduce) { .cat-fleche { transition: none; } }
.plats { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .plats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plats { grid-template-columns: repeat(3, 1fr); } }
.plat {
  position: relative; display: grid; gap: .35rem; align-content: start;
  background: var(--blanc); border: 1.5px solid var(--trait); border-radius: var(--rayon);
  padding: .9rem 1rem .8rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.plat:has(input:checked) { border-color: var(--vert-vif); box-shadow: 0 0 0 3px var(--vert-clair); }
.plat:has(input:focus-visible) { outline: 3px solid var(--vert-vif); outline-offset: 2px; }
.plat label { display: grid; grid-template-columns: 1.3rem 1fr; gap: .6rem; align-items: start; cursor: pointer; font-weight: 600; color: var(--vert-profond); line-height: 1.3; }
.plat input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: .1rem 0 0; accent-color: var(--vert-profond); }
.plat details { font-size: .84rem; color: var(--gris); padding-left: 1.9rem; }
.plat summary { cursor: pointer; color: var(--vert-vif); font-weight: 500; width: fit-content; }
.plat details p { margin: .35rem 0 0; }
.selection { margin: 0 0 var(--e3); }
.selection .compteur-plats { max-width: none; }
.compteur-plats {
  margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--vert-profond); color: var(--blanc); border-radius: 999px;
  padding: .7rem 1.2rem; box-shadow: var(--ombre-forte); font-weight: 600;
}
.compteur-plats[data-etat="complet"] { background: var(--vert-vif); }
.compteur-plats[data-etat="trop"] { background: #8E2F1C; }
.compteur-plats a { color: var(--blanc); }

/* ---------- messages d'erreur renvoyés par le serveur (sans JavaScript) ---------- */
.erreurs-formulaire[hidden] { display: none; }
.erreurs-formulaire { border-left: 4px solid #B93F26; background: #FBEDE9; color: #5A1C10; padding: .8rem 1rem; border-radius: 6px; font-size: .92rem; }
.erreurs-formulaire ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.case-sante { border: 1.5px dashed var(--trait-fort); border-radius: var(--rayon); padding: .8rem 1rem; }

/* ---------- calendrier des demi-journées (page carte) ---------- */
.calendrier { display: grid; gap: .8rem; }
.calendrier-titre { margin: 0; font-weight: 600; color: var(--vert-profond); }
.calendrier-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.calendrier-periode { margin: 0; font-weight: 600; text-align: center; flex: 1; }
.calendrier-fleche { padding: .5rem .9rem; min-width: 2.8rem; }
.calendrier-fleche:disabled { opacity: .35; cursor: default; }
.calendrier-jours { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .calendrier-jours { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 950px) { .calendrier-jours { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.cal-jour {
  display: grid; gap: .3rem; align-content: start;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; padding: .5rem;
}
.cal-date { margin: 0 0 .1rem; font-size: .8rem; font-weight: 600; color: var(--vert-profond); }
.cal-date::first-letter { text-transform: uppercase; }
.cal-creneau {
  font: 500 .82rem var(--texte); padding: .45rem .3rem; border-radius: 7px; cursor: pointer;
  border: 1.5px solid var(--vert-vif); background: var(--vert-clair); color: var(--vert-profond);
}
.cal-creneau:hover:not(:disabled) { background: #d4e7da; }
.cal-creneau[aria-pressed="true"] { background: var(--vert-profond); border-color: var(--vert-profond); color: var(--blanc); }
.cal-creneau:disabled {
  cursor: not-allowed; background: #ECEAE4; border-color: #DCD8CE; color: #8A8F8B; text-decoration: line-through;
}
.cal-creneau:focus-visible { outline: 3px solid var(--vert-vif); outline-offset: 2px; }
.calendrier-legende { margin: 0; font-size: .8rem; color: var(--gris); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.pastille-dispo, .pastille-prise { display: inline-block; width: .9rem; height: .9rem; border-radius: 4px; }
.pastille-dispo { background: var(--vert-clair); border: 1.5px solid var(--vert-vif); }
.pastille-prise { background: #ECEAE4; border: 1.5px solid #DCD8CE; margin-left: .6rem; }
.calendrier-choix { margin: 0; font-weight: 600; color: var(--vert-vif); }

/* ---------- récapitulatif de la sélection (page carte) ---------- */
.compteur-actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; justify-content: flex-end; }
.compteur-voir {
  font: 600 .85rem var(--texte); color: var(--blanc); background: transparent; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; padding: .3rem .8rem;
}
.compteur-voir:hover { background: rgba(255,255,255,.12); }
.compteur-voir:focus-visible { outline: 3px solid var(--blanc); outline-offset: 2px; }
.recap-selection {
  margin-top: .6rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: .9rem 1.1rem; display: grid; gap: .8rem;
}
.recap-categorie { margin: 0 0 .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vert-vif); }
.recap-groupe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.recap-groupe li {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  padding: .35rem 0; border-bottom: 1px dashed var(--trait); color: var(--vert-profond); font-weight: 500;
}
.recap-groupe li:last-child { border-bottom: none; }
.recap-retirer {
  font: 500 .78rem var(--texte); color: #8E2F1C; background: none; border: none; cursor: pointer;
  text-decoration: underline; padding: .2rem; flex: none;
}
@media (max-width: 560px) {
  .compteur-plats { flex-wrap: wrap; border-radius: 18px; }
}

/* Allergènes dans le détail d'un plat (carte V2, 18/10) */
.plat .allergenes { margin-top: .4rem; }
.plat .allergenes > span { font-weight: 600; }
.plat .allergenes abbr { text-decoration: none; cursor: help; }
.note-allergenes { margin: var(--e3) 0 0; }

/* Galerie des plats (vraies photos, 18/10) : 2 colonnes, 4 sur grand écran */
.galerie-plats { display: grid; gap: var(--e2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .galerie-plats { grid-template-columns: repeat(4, 1fr); gap: var(--e3); } }
.galerie-plats figure { margin: 0; display: grid; gap: .5rem; }
.galerie-plats img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; display: block; }
.galerie-plats figcaption { font-size: .85rem; color: var(--encre-douce); }
.figure-chef-plats img { max-height: 640px; width: 100%; object-fit: cover; }