/* ═══════════════════════════════════════════════════════════════
   TERRE ET FRÉMISSEMENT — feuille unique
   Une règle changée ici change tout le site. C'est le principe.
   Pas de photo de plat : la page enseigne, elle ne fait pas envie.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --papier:      #f6f2e9;   /* réchauffé le 2026-09-24 : #faf8f4 se lisait blanc */
  --papier-2:    #eee9dd;
  --encre:       #23201b;
  --encre-2:     #57503f;
  --encre-3:     #8a8172;
  --trait:       #ded7c9;
  --accent:      #3f6b4a;
  --accent-clair:#eaf1e9;
  --alerte:      #9a5b2b;
  --alerte-clair:#fbf1e7;

  --t-erreur:    #9a5b2b;
  --t-produit:   #3f6b4a;
  --t-technique: #3d5a80;
  --t-recette:   #7a4a63;
  --t-parcours:  #6b5f2b;

  --colonne: 34rem;          /* ≈ 65 caractères */
  --large:   62rem;
  --pas:     1.35rem;
  --rayon:   3px;
  --serif:   Iowan Old Style, Palatino, "Palatino Linotype", Georgia, serif;
  --sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  /* Sur fond sombre, le grain ÉCLAIRCIT au lieu d'assombrir, et il se
     voit bien plus. Deux tiers d'opacité en moins, sans quoi la page
     grésille au lieu de respirer. */
  body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"); }
  :root {
    --papier: #171613; --papier-2: #201e1a; --encre: #ece7dd;
    --encre-2: #b6ae9e; --encre-3: #8b8375; --trait: #33302a;
    --accent: #8fbf9c; --accent-clair: #1f2a22; --alerte: #d99a63;
    --alerte-clair: #2a201a;
    --t-erreur: #d99a63; --t-produit: #8fbf9c; --t-technique: #8fb0d9;
    --t-recette: #cf9ab6; --t-parcours: #c3b672;
    /* Ajoutés le 2026-09-24. Sans eux, la mention Loi Évin restait un
       rectangle quasi blanc (#faf6f4) sur la page sombre — sur cinq pages
       au moins. Un jeton sans variante sombre est un jeton qui attend de
       se voir. */
    --legal: #d98b8b; --legal-clair: #2a1e1c;
    --ombre: rgba(0, 0, 0, .45);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background-color: var(--papier); color: var(--encre);
  font: 1.0625rem/1.65 var(--serif);
  text-rendering: optimizeLegibility;

  /* ── Le grain du papier ─────────────────────────────────────
     Posé le 2026-09-24. Le fond uni se lisait comme du blanc
     d'écran ; les planches, elles, sont dessinées sur du papier.
     La page prend donc le même grain, et les deux cessent d'être
     deux matières différentes posées l'une sur l'autre.

     Un feTurbulence en data-URI : aucune requête, aucun fichier,
     indépendant de la résolution, réglable au centième. Il est
     réglé à 13 % : mesuré au canvas, cela donne 10 niveaux
     d'amplitude sur 255. En dessous de 8 il ne se voit pas du tout ;
     au-delà de 14 il grésille et devient du décor. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.13'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}
img, table { max-width: 100%; }
a { color: inherit; text-decoration-color: var(--trait); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--accent); }

.saut { position: absolute; left: -9999px; }
.saut:focus { left: 1rem; top: 1rem; background: var(--accent); color: var(--papier);
              padding: .6rem 1rem; z-index: 10; border-radius: var(--rayon); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.dedans { max-width: var(--large); margin: 0 auto; padding: 0 1.25rem; }

/* ── en-tête ─────────────────────────────────────────────── */
.entete { border-bottom: 1px solid var(--trait); background: var(--papier);
          position: sticky; top: 0; z-index: 5; }
.entete .dedans { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
                  align-items: baseline; padding-block: .85rem; }
.marque { font-weight: 600; letter-spacing: .01em; text-decoration: none; margin-right: auto; }
.entete nav { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
              font: .875rem/1.3 var(--sans); }
.entete nav a { text-decoration: none; color: var(--encre-2); padding-bottom: 2px;
                border-bottom: 2px solid transparent; }
.entete nav a:hover { color: var(--encre); }
.entete nav a[aria-current] { color: var(--encre); border-bottom-color: var(--accent); }

/* ── colonne de lecture ──────────────────────────────────── */
main { display: block; }
.page, .rubrique, .accueil, .recherche {
  max-width: var(--colonne); margin: 0 auto; padding: 2.5rem 1.25rem 4rem;
}
.accueil { max-width: var(--large); }

.fil { font: .8125rem/1.4 var(--sans); color: var(--encre-3); margin-bottom: 1.75rem; }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

.tete { margin-bottom: 2.25rem; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); line-height: 1.15;
     margin: .2rem 0 .6rem; letter-spacing: -.012em; font-weight: 600; }
.etiquette-type { font: .6875rem/1 var(--sans); letter-spacing: .11em;
                  text-transform: uppercase; color: var(--encre-3); margin: 0; }
.question { font-size: 1.125rem; color: var(--encre-2); margin: 0 0 .5rem; }
.saison, .compte, .meta { font: .8125rem/1.5 var(--sans); color: var(--encre-3); margin: 0; }

.type-erreur    .etiquette-type { color: var(--t-erreur); }
.type-produit   .etiquette-type { color: var(--t-produit); }
.type-technique .etiquette-type { color: var(--t-technique); }
.type-recette   .etiquette-type { color: var(--t-recette); }
.type-parcours  .etiquette-type { color: var(--t-parcours); }

/* ── bandeau et 30 secondes ──────────────────────────────── */
/* Décadré le 2026-09-24, comme les portes de l'accueil. Le bandeau est
   la première chose qu'on voit après le titre : encadré, rempli et
   quadrillé, il pesait plus lourd que le nom du produit. Le filet et la
   colonne suffisent à le rendre lisible en diagonale, qui est sa seule
   fonction. Bénéfice second : une cellule manquante ne peut plus ouvrir
   de rectangle beige, puisque plus rien n'est peint dessous. */
.bandeau { display: grid; gap: 0 1.75rem;
           grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
           margin: 0 0 2.25rem; }
.bandeau > div { padding: .75rem 0 .8rem; border-top: 1px solid var(--trait); }
.bandeau dt { font: .6875rem/1.3 var(--sans); letter-spacing: .05em;
              text-transform: uppercase; color: var(--encre-3); margin: 0 0 .2rem; }
.bandeau dd { margin: 0; font-size: .9375rem; line-height: 1.4; }

.trente { background: var(--accent-clair); border-radius: var(--rayon);
          padding: 1.4rem 1.5rem .4rem; margin: 0 0 2.5rem; }
.trente h2 { margin-top: 0; font-size: 1rem; letter-spacing: .04em;
             text-transform: uppercase; font-family: var(--sans); }
.trente dl { margin: 0; }
.trente dl > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .35rem 1rem;
                   padding: .6rem 0; border-top: 1px solid var(--trait); }
.trente dl > div:first-of-type { border-top: 0; }
.trente dt { font-weight: 600; font-size: .9375rem; }
.trente dd { margin: 0; }

/* ── sections ────────────────────────────────────────────── */
.section, .continuer { margin: 0 0 2.5rem; }
h2 { font-size: 1.3125rem; line-height: 1.25; margin: 2.5rem 0 .75rem;
     font-weight: 600; letter-spacing: -.005em; }
.section > h2:first-child { margin-top: 0; }
h3 { font-size: 1.0625rem; margin: 1.75rem 0 .5rem; font-weight: 600; }
h4, h5, h6 { font-size: .9375rem; margin: 1.35rem 0 .4rem; font-weight: 600;
             color: var(--encre-2); font-family: var(--sans); }
.prose p { margin: 0 0 var(--pas); }
.prose ul, .prose ol { margin: 0 0 var(--pas); padding-left: 1.35rem; }
.prose li { margin-bottom: .35rem; }
.prose li::marker { color: var(--encre-3); }
.prose > :last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }
.prose blockquote { margin: 0 0 var(--pas); padding: .1rem 0 .1rem 1.1rem;
                    border-left: 3px solid var(--accent); color: var(--encre-2);
                    font-style: italic; }
.prose code { font-size: .9em; background: var(--papier-2); padding: .1em .35em;
              border-radius: 2px; }

.ligne { margin: 0 0 .6rem; }
.etiquette, .role { font: .6875rem/1.4 var(--sans); letter-spacing: .07em;
                    text-transform: uppercase; color: var(--encre-3); margin-right: .5rem; }

/* ── tableaux : ils débordent dans leur propre boîte ─────── */
.tableau { overflow-x: auto; margin: 0 0 var(--pas);
           border: 1px solid var(--trait); border-radius: var(--rayon); }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--trait);
         vertical-align: top; }
thead th { font: .6875rem/1.3 var(--sans); letter-spacing: .06em;
           text-transform: uppercase; color: var(--encre-3);
           background: var(--papier-2); white-space: nowrap; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
table.paires th { width: 30%; font-weight: 600; font-family: var(--serif);
                  font-size: .9375rem; text-transform: none; letter-spacing: 0;
                  color: var(--encre); background: transparent; white-space: normal; }

/* ── cartes ──────────────────────────────────────────────── */
.cartes { display: grid; gap: 0 1.75rem; margin: 0 0 var(--pas); }
.carte { padding: 1rem 0 1.1rem; border-top: 1px solid var(--trait); }
.carte > :first-child { margin-top: 0; }
.carte > :last-child { margin-bottom: 0; }
.carte h3, .carte h4, .carte h5 { margin-top: 1rem; }
.carte > h3:first-child, .carte > h4:first-child { margin-top: 0; }

/* ── replis ──────────────────────────────────────────────── */
details { border-top: 1px solid var(--trait); }
details summary { cursor: pointer; padding: .8rem 0; font-weight: 600;
                  font-size: .9375rem; list-style: none; display: flex; gap: .6rem; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+"; color: var(--encre-3); font-family: var(--sans); }
details[open] summary::before { content: "–"; }
details > *:not(summary) { padding-bottom: 1rem; }
.faq details:last-of-type, .section-repliee { border-bottom: 1px solid var(--trait); }
.section-repliee { margin-bottom: 2.5rem; }
.formulations { border: 0; margin-bottom: 2rem; }
.formulations summary { font: .8125rem/1 var(--sans); color: var(--encre-3);
                        text-transform: uppercase; letter-spacing: .07em; }
.formulations ul { font-size: .9375rem; color: var(--encre-2); }

/* ── renvois ─────────────────────────────────────────────── */
.continuer { border-top: 2px solid var(--encre); padding-top: 1.5rem; }
.renvois { list-style: none; padding: 0; margin: 0 0 1rem; }
.renvois li { padding: .5rem 0; border-bottom: 1px solid var(--trait); }
.renvois .role { display: inline-block; min-width: 5.5rem; }
.a-venir { color: var(--encre-3); border-bottom: 1px dotted var(--encre-3); }
.sensible { color: var(--alerte); }
.note-renvois, .date, .mention { font: .8125rem/1.5 var(--sans); color: var(--encre-3); }
.produits { margin: 0 0 1.5rem; font-size: .9375rem; color: var(--encre-2); }

/* ── accueil ─────────────────────────────────────────────── */
.ouverture { max-width: var(--colonne); margin: 0 auto 3rem; text-align: center; }
.sous-titre { font-size: 1.1875rem; color: var(--encre-2); margin: 0 0 1.75rem; }
.ouverture-texte { text-align: left; }

.repere { max-width: var(--colonne); margin: 0 auto 3.5rem; background: var(--accent-clair);
          border-radius: var(--rayon); padding: 1.5rem 1.6rem; }
.repere-titre { font: .6875rem/1 var(--sans); letter-spacing: .11em;
                text-transform: uppercase; color: var(--encre-3); margin: 0 0 .6rem; }
.repere h2 { margin: 0 0 .7rem; font-size: 1.1875rem; }
.repere-lien { margin: 1rem 0 0; font: .875rem/1 var(--sans); }

.titre-section { text-align: center; font: .75rem/1 var(--sans); letter-spacing: .13em;
                 text-transform: uppercase; color: var(--encre-3); margin: 0 0 1.5rem; }
/* Décadré le 2026-09-24. Le cadre rangeait, il n'informait pas — et
   c'est lui qui ouvrait un rectangle beige dès qu'une cellule manquait.
   Un filet au-dessus de chaque porte suffit à les séparer : c'est
   l'idiome que `.liste-pages` emploie déjà plus bas. Le blanc fait le
   reste, et il le fait mieux. */
.grille-portes { display: grid; gap: 0 3rem;
                 grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.porte { padding: 1.6rem 0 1.7rem; text-decoration: none; display: block;
         border-top: 1px solid var(--trait); }
.porte h3 { transition: color .12s; }
.porte:hover h3 { color: var(--accent); }
.porte-etat { font: .8125rem/1.4 var(--sans); color: var(--encre-3); margin: 0 0 .5rem; }
.porte h3 { margin: 0 0 .6rem; font-size: 1.1875rem; }
.porte-accroche { margin: 0 0 .9rem; font-size: .9375rem; color: var(--encre-2); }
.porte-nombre { margin: 0; font: .75rem/1 var(--sans); letter-spacing: .06em;
                text-transform: uppercase; color: var(--encre-3); }
.porte-debutant { text-align: center; margin: 1.5rem 0 0; font: .9375rem/1 var(--sans); }

.saison-bloc { margin: 3.5rem 0; }
.chapeau { text-align: center; color: var(--encre-2); margin: -.75rem 0 1.5rem; }
.grille-saison { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 2.5rem;
                 grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.grille-saison a { display: block; padding: 1.1rem 0 1.2rem; text-decoration: none;
                   height: 100%; border-top: 1px solid var(--trait); }
.grille-saison strong { display: block; margin-bottom: .3rem; transition: color .12s; }
.grille-saison a:hover strong { color: var(--accent); }
.grille-saison span { font-size: .875rem; color: var(--encre-2); }

.promesse { margin: 3.5rem auto 0; max-width: var(--large); }
.colonnes { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.colonnes h2 { font-size: 1rem; font-family: var(--sans); letter-spacing: .04em;
               text-transform: uppercase; margin-top: 0; }
.colonnes ul { padding-left: 1.2rem; font-size: .9375rem; }
.negatif li { color: var(--encre-3); }
.honnetete { max-width: var(--colonne); margin: 2.5rem auto 0; text-align: center;
             color: var(--encre-2); font-style: italic; }

/* ── rubrique ────────────────────────────────────────────── */
.liste-pages { list-style: none; padding: 0; margin: 0; }
.liste-pages li { padding: 1.35rem 0; border-top: 1px solid var(--trait); }
.liste-pages a { text-decoration: none; }
.liste-pages h2 { margin: 0 0 .4rem; font-size: 1.1875rem; }
.liste-pages a:hover h2 { color: var(--accent); }
.liste-pages p { margin: 0; font-size: .9375rem; color: var(--encre-2); }
.liste-pages .meta { margin-top: .35rem; }

/* ── pied ────────────────────────────────────────────────── */
.pied { border-top: 1px solid var(--trait); background: var(--papier-2);
        margin-top: 4rem; padding: 2.5rem 0 3rem; }
.bio { max-width: var(--colonne); margin: 0 auto 2rem; font-size: .9375rem;
       color: var(--encre-2); }
.bio-nom { font-weight: 600; color: var(--encre); margin: 0 0 .5rem; }
.pied-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center;
            font: .875rem/1 var(--sans); margin-bottom: 1.25rem; }
.pied-nav a { text-decoration: none; color: var(--encre-2); }
.pied-nav a:hover { color: var(--encre); text-decoration: underline; }
.mention { text-align: center; margin: 0; }

@media (max-width: 34rem) {
  .entete .dedans { padding-block: .7rem; }
  .marque { width: 100%; margin-right: 0; }
  .entete nav { gap: .4rem .9rem; font-size: .8125rem; }
  .trente dl > div { grid-template-columns: 1fr; gap: .15rem; }
  .trente { padding: 1.2rem 1.1rem .3rem; }
  .repere { padding: 1.25rem 1.2rem; }
}
/* ══════════════════════════════════════════════════════════════
   L'IMPRESSION — une feuille posée sur un plan de travail
   ══════════════════════════════════════════════════════════════
   Elle ne sert pas à comprendre, elle sert à faire. Sur une recette,
   tout ce qui explique reste à l'écran (classe .hors-impression, posée
   par build.py). Sur les autres types, la page s'imprime entière : on
   n'imprime pas une fiche Produit pour cuisiner avec.                */
@media print {
  @page { margin: 14mm 16mm; }

  /* Pas de grain sur papier : ce serait de l'encre dépensée pour
     imiter ce qu'on a déjà sous la main. */
  body { background: #fff; background-image: none; color: #000; font-size: 10.5pt; }
  .entete nav, .pied-nav, .saut, .fil, .continuer,
  .note-renvois, .formulations, .bio, .mention,
  .hors-impression { display: none !important; }

  /* Le nom du site reste : une feuille qui traîne doit dire d'où elle vient. */
  .entete { border: 0; padding: 0; margin: 0 0 6mm; }
  .entete .dedans { display: block; padding: 0; }
  .marque { font-size: 11pt; text-decoration: none; color: #000; }

  main, .page, .accueil { max-width: none; margin: 0; padding: 0; }
  h1 { font-size: 19pt; margin: 0 0 2mm; }
  h2 { font-size: 12pt; margin: 5mm 0 1.5mm; }
  h3 { font-size: 11pt; }

  /* Un bloc replié n'imprime rien : le navigateur ne rend pas le contenu
     d'un <details> fermé. Ceux qui survivent à l'impression sont donc
     forcés ouverts. */
  details.section-repliee > *:not(summary) { display: block !important; }
  details summary { font-weight: 600; list-style: none; }
  details summary::-webkit-details-marker { display: none; }

  /* Rien ne se coupe au milieu : ni une étape, ni une ligne de tableau,
     ni un encart. Une consigne à cheval sur deux feuilles se rate. */
  .section, .trente, .urgence, .bandeau, table, tr, li, .carte {
    break-inside: avoid; page-break-inside: avoid;
  }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  p { orphans: 3; widows: 3; }

  .trente, .urgence, .bandeau {
    background: none; border: 1px solid #999; border-left-width: 1px;
    border-radius: 0; padding: 3mm 4mm;
  }
  .urgence li::before { background: #000; color: #fff; }
  .tableau { overflow: visible; }
  table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  th, td { border: 1px solid #bbb; padding: 1mm 2mm; text-align: left; }
  a { color: #000; text-decoration: none; }
  .a-venir { color: #000; }
  .date { font-size: 8.5pt; color: #555; margin-top: 6mm; }
}

/* ── bandeau de métadonnées sous le titre ────────────────── */
.meta-page { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.25rem;
             padding: 0; margin: 1rem 0 0; font: .8125rem/1.5 var(--sans);
             color: var(--encre-2); }
.meta-page li { white-space: nowrap; }
.meta-page span { color: var(--encre-3); }
.meta-page span::after { content: " ·"; }

/* ── Question de section (trame Produit V4.1) ──────────────────
   La question ouvre la section ; elle n'est pas une sous-rubrique. */
.prose .question-section {
  font-style: italic;
  color: var(--encre-2);
  margin: 0 0 .75rem;
}

/* ── Mention Loi Évin ──────────────────────────────────────────
   Uniquement sur les pages de catégorie 2 (alcool structurant). */
.loi-evin {
  margin: 2.5rem 0 0;
  padding: .85rem 1rem;
  border-left: 3px solid var(--legal);
  background: var(--legal-clair);
  font-size: .875rem;
  color: var(--encre-2);
}
.loi-evin p { margin: 0; }

/* ══════════════════════════════════════════════════════════════
   L'ATELIER — écran de travail local, jamais servi en production
   ══════════════════════════════════════════════════════════════ */
.atelier { max-width: 72rem; }

.atelier .actions {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: 1.5rem 0 2rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid #e4e0d8;
}
.atelier .actions form { margin: 0; }

.bouton {
  display: inline-block; padding: .5rem .95rem;
  border: 1px solid #cfc9bd; border-radius: 3px;
  background: #fff; color: #33312c; font: inherit; font-size: .9rem;
  cursor: pointer; text-decoration: none; line-height: 1.4;
}
.bouton:hover { background: #f4f1ea; border-color: #a9a294; }
.bouton-fort { background: #33312c; border-color: #33312c; color: #fbf9f4; }
.bouton-fort:hover { background: #4a473f; border-color: #4a473f; }
.bouton-discret { border-style: dashed; color: #6a675e; }

/* ── Les trois colonnes ────────────────────────────────────────
   C'est la distinction qui fait tout le travail : ce qu'un script
   corrige, ce qu'il faut arbitrer, ce qu'il faut réécrire. */
.atelier .colonnes {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: start;
}
.atelier .colonne {
  border: 1px solid #e4e0d8; border-top: 3px solid #b9b2a3;
  border-radius: 3px; padding: 1rem 1.1rem 1.25rem; background: #fdfcf9;
}
.colonne-mecanique { border-top-color: #6c8f6a; }
.colonne-decision  { border-top-color: #c08a3e; }
.colonne-editorial { border-top-color: #9a6b8f; }
.atelier .colonne h2 { margin: 0 0 .25rem; font-size: 1.1rem; }
.atelier .quoi { margin: 0 0 .9rem; font-size: .875rem; color: #6a675e; }
.atelier .note {
  margin: 1rem 0 0; padding-top: .8rem; border-top: 1px dotted #ddd8cd;
  font-size: .8125rem; color: #7d796e; font-style: italic;
}
.atelier .compte { margin: 0 0 .6rem; font-size: .875rem; font-weight: 600; }
.compte-bloquant { color: #a03535; }
.compte-ok { color: #4d7a4a; }

.atelier .constats { margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
.atelier .constats li {
  padding: .4rem 0; border-bottom: 1px dotted #e8e4da; line-height: 1.45;
}
.atelier .constats li:last-child { border-bottom: 0; }
.atelier .fichier {
  display: block; font-family: ui-monospace, Menlo, monospace;
  font-size: .75rem; color: #8a8577;
}
.atelier .reste { color: #8a8577; font-style: italic; }
.atelier details.avis { margin-top: .9rem; }
.atelier details.avis summary {
  cursor: pointer; font-size: .8125rem; color: #6a675e;
}

.atelier .sortie {
  margin: 0 0 2rem; border: 1px solid #e4e0d8; border-radius: 3px;
  background: #fdfcf9;
}
.atelier .sortie h2 {
  margin: 0; padding: .6rem 1rem; font-size: .95rem;
  border-bottom: 1px solid #e4e0d8; background: #f4f1ea;
}
.atelier .sortie pre {
  margin: 0; padding: 1rem; overflow-x: auto;
  font-family: ui-monospace, Menlo, monospace; font-size: .78rem;
  line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}

.atelier .rappel {
  margin-top: 2.5rem; padding: 1.1rem 1.25rem;
  border-left: 3px solid #cfc9bd; background: #f7f5ef;
  font-size: .875rem; color: #55524a;
}
.atelier .rappel h2 { margin: 0 0 .5rem; font-size: 1rem; }
.atelier .rappel p { margin: 0 0 .6rem; }
.atelier .rappel p:last-child { margin-bottom: 0; }

/* ── Le formulaire de page neuve ───────────────────────────── */
.formulaire { max-width: 38rem; }
.formulaire fieldset {
  border: 1px solid #e4e0d8; border-radius: 3px;
  padding: .9rem 1rem; margin: 0 0 1.5rem;
}
.formulaire legend { padding: 0 .4rem; font-size: .875rem; color: #6a675e; }
.formulaire .choix {
  display: grid; grid-template-columns: auto 1fr; gap: 0 .6rem;
  align-items: baseline; padding: .45rem 0;
  border-bottom: 1px dotted #e8e4da; cursor: pointer;
}
.formulaire .choix:last-child { border-bottom: 0; }
.formulaire .choix-nom { font-weight: 600; }
.formulaire .choix-quoi {
  grid-column: 2; font-size: .8125rem; color: #7d796e;
}
.formulaire .champ { display: block; margin: 0 0 1.4rem; }
.formulaire .champ > span {
  display: block; margin-bottom: .3rem; font-weight: 600; font-size: .9rem;
}
.formulaire input[type=text], .formulaire select {
  width: 100%; padding: .5rem .6rem; font: inherit; font-size: .95rem;
  border: 1px solid #cfc9bd; border-radius: 3px; background: #fff;
}
.formulaire small {
  display: block; margin-top: .35rem; font-size: .8125rem; color: #7d796e;
}
.atelier .alerte {
  padding: .7rem 1rem; border-left: 3px solid #a03535;
  background: #faf2f0; color: #7a2b2b; font-size: .9rem;
}

/* ── Le second temps de l'accueil ─────────────────────────────
   Un autre registre, donc un autre traitement : filet de séparation,
   corps légèrement plus grand, interligne plus ample. Pas de guillemets
   ni d'italique sur sept lignes — ce serait fatigant à lire, et ça
   ferait citation alors que c'est la voix du site. */
.second-temps {
  margin: 2.5rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--trait);
  text-align: left;
}
.second-temps .bascule {
  margin: 0 0 1.4rem;
  font: 600 .8125rem/1.5 var(--sans);
  letter-spacing: .01em;
  color: var(--accent);
  text-align: center;
}
.second-temps .prose p {
  /* Le corps du texte courant est déjà à 1.0625rem : sans écart de
     taille, le changement de voix ne se voyait pas. Un cran au-dessus
     et une interligne plus large suffisent — le filet et la bascule
     font le reste. */
  font-size: 1.1875rem;
  line-height: 1.8;
  color: var(--encre);
  margin: 0 0 1.15rem;
}
.second-temps .prose p:last-child { margin-bottom: 0; }
@media (max-width: 40rem) {
  .second-temps { margin-top: 2rem; padding-top: 1.6rem; }
  .second-temps .prose p { font-size: 1.0625rem; line-height: 1.72; }
}

/* ── L'encart « En urgence » ───────────────────────────────────
   En tête des pages Erreur. Lu debout, à la lumière d'une hotte, avec
   une main occupée : gros corps, numéros nets, aucune fioriture. Il
   passe avant le verdict — quelqu'un dans cet état agit d'abord. */
.urgence {
  margin: 0 0 2rem;
  padding: 1.1rem 1.3rem 1.25rem;
  background: var(--alerte-clair);
  border-left: 3px solid var(--alerte);
  border-radius: var(--rayon);
}
.urgence-titre {
  margin: 0 0 .7rem;
  font: 700 .6875rem/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--alerte);
}
.urgence ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: urgence;
}
.urgence li {
  counter-increment: urgence;
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .6rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--encre);
}
.urgence li:last-child { margin-bottom: 0; }
.urgence li::before {
  content: counter(urgence);
  position: absolute;
  left: 0;
  top: .05em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--alerte);
  color: var(--papier);
  font: 700 .75rem/1.25rem var(--sans);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   LE GLOSSAIRE
   ══════════════════════════════════════════════════════════════ */

/* ── Le terme dans le texte ────────────────────────────────────
   Un pointillé, rien de plus : le mot doit rester lisible d'abord.
   La définition s'ouvre au survol ET au focus — sur un écran tactile,
   une pression donne le focus, ce que le survol seul ne fait jamais. */
/* La bulle est ancrée au PARAGRAPHE, pas au mot. Ancrée au mot, elle
   sort de l'écran dès que le terme tombe en fin de ligne — et sans une
   ligne de JavaScript, rien ne peut la repositionner. Ancrée au bloc,
   elle occupe la colonne de lecture et ne déborde jamais. */
.prose p, .prose li, .prose dd, .prose td { position: relative; }

.terme {
  border-bottom: 1px dotted var(--encre-3);
  cursor: help;
}
.terme:hover, .terme:focus { border-bottom-color: var(--accent); }
.terme:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.terme-def {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .35rem);
  z-index: 20;
  display: none;
  padding: .7rem .85rem;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: 0 6px 20px var(--ombre);
  font: .875rem/1.5 var(--sans);
  color: var(--encre-2);
  text-align: left;
  white-space: normal;
  cursor: auto;
}
.terme-def b { color: var(--encre); }
.terme:hover .terme-def,
.terme:focus .terme-def,
.terme:focus-within .terme-def { display: block; }

/* Une infobulle ne s'imprime pas. */
@media print { .terme { border-bottom: 0; } .terme-def { display: none !important; } }

/* ── La page /glossaire/ ───────────────────────────────────── */
.glossaire { max-width: var(--large); }
.termes-liste { margin: 0; }
.termes-liste > div {
  padding: .95rem 0;
  border-bottom: 1px solid var(--trait);
  display: grid;
  gap: .1rem 1.75rem;
  grid-template-columns: minmax(9rem, 13rem) 1fr;
  align-items: baseline;
}
.termes-liste > div:last-child { border-bottom: 0; }
.termes-liste dt { font-weight: 600; color: var(--encre); }
.termes-liste dd { margin: 0; color: var(--encre-2); }
.termes-liste > div:target dt { color: var(--accent); }
@media (max-width: 38rem) {
  .termes-liste > div { grid-template-columns: 1fr; gap: .25rem; }
}

/* ── Le bouton d'impression ────────────────────────────────────
   Sur les recettes seulement, et ajouté par le script : sans
   JavaScript il n'y a pas de bouton inerte, il n'y a rien. */
.imprimer { margin: 2rem 0 0; }
.bouton-imprimer {
  font: .875rem/1 var(--sans);
  padding: .55rem 1rem;
  color: var(--encre-2);
  background: none;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  cursor: pointer;
}
.bouton-imprimer:hover { background: var(--papier-2); border-color: var(--encre-3); }
.bouton-imprimer::before { content: "⎙ "; }
@media print { .imprimer { display: none !important; } }

/* ══════════════════════════════════════════════════════════════
   L'ESPACE DE PARTAGE — retours, contact, lettre
   ══════════════════════════════════════════════════════════════ */

/* Le champ piège. Masqué à l'œil sans être retiré du DOM : un robot le
   remplit, un humain ne le voit pas. `display:none` suffirait pour les
   robots naïfs ; le décalage hors écran passe aussi les moins naïfs, tout
   en restant hors du parcours de tabulation grâce à tabindex="-1". */
/* Masquage par découpe plutôt que par décalage : un élément posé à
   -9999px reste dans le flux de certaines mises en page et peut y créer un
   débordement horizontal. La découpe, non. */
.piege, .pour-lecteur-decran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Les retours sous une page ─────────────────────────────── */
.retours {
  margin: 3.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--trait);
}
.retours > h2 { font-size: 1.1875rem; margin: 0 0 1.25rem; }

.fil-retours { list-style: none; margin: 0 0 2.25rem; padding: 0; }
.fil-retours > li {
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--trait);
}
.fil-retours > li:first-child { border-top: 1px solid var(--trait); }
.retour-qui {
  margin: 0 0 .35rem;
  font: 600 .8125rem/1.4 var(--sans);
  color: var(--encre-2);
}
.retour-qui span { font-weight: 400; color: var(--encre-3); }
.retour-reponse {
  margin: .9rem 0 0 0;
  padding: .8rem 0 0 1rem;
  border-left: 2px solid var(--accent);
}
.retour-reponse .retour-qui { color: var(--accent); }

/* ── Les formulaires ───────────────────────────────────────── */
.formulaire-retour, .formulaire-contact { max-width: 40rem; }
.retour-cadre {
  margin: 0 0 1.5rem;
  font-size: .9375rem;
  color: var(--encre-2);
}
.champs-cote {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.formulaire-retour .champ, .formulaire-contact .champ,
.formulaire-lettre .champ { display: block; margin: 0 0 1.25rem; }
.formulaire-retour .champ > span, .formulaire-contact .champ > span,
.formulaire-lettre .champ > span {
  display: block; margin-bottom: .3rem;
  font: 600 .875rem/1.4 var(--sans); color: var(--encre-2);
}
.champ > span em { font-weight: 400; font-style: normal; color: var(--encre-3); }
textarea,
input[type=email],
.formulaire-lettre input[type=text] {
  width: 100%; padding: .55rem .65rem; font: inherit; font-size: .9375rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--papier); color: var(--encre);
}
textarea { resize: vertical; min-height: 6rem; }
textarea:focus, input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.formulaire-retour small, .formulaire-contact small, .formulaire-lettre small {
  display: block; margin-top: .3rem; font: .8125rem/1.45 var(--sans); color: var(--encre-3);
}
.retour-mentions {
  margin: 1rem 0 0; font: .8125rem/1.5 var(--sans); color: var(--encre-3);
}

/* ── La lettre ─────────────────────────────────────────────── */
.lettre {
  margin: 3.5rem auto 0;
  max-width: var(--colonne);
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--papier-2);
  border-radius: var(--rayon);
}
.lettre h2 { margin: 0 0 .6rem; font-size: 1.125rem; }
.lettre-quoi { margin: 0 0 1.1rem; font-size: .9375rem; color: var(--encre-2); }
.lettre-ligne { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; }
.lettre-ligne .champ { flex: 1 1 15rem; margin: 0; }
.consentement {
  display: flex; gap: .55rem; align-items: flex-start;
  margin: .9rem 0 0; font: .8125rem/1.5 var(--sans); color: var(--encre-2);
  cursor: pointer;
}
.consentement input { margin-top: .18rem; flex: none; }
.lettre-mentions {
  margin: .9rem 0 0; font: .8125rem/1.5 var(--sans); color: var(--encre-3);
}

/* ── La page « Voilà » ─────────────────────────────────────── */
.merci .messages { max-width: var(--colonne); }
.merci .msg { display: none; }
.merci .msg:target { display: block; }
.merci .defaut { display: block; }
/* Quand un message précis est visé, le générique s'efface. Si :has()
   n'est pas supporté, les deux s'affichent — redondant, jamais vide. */
.merci .messages:has(.msg:target) .defaut { display: none; }
.merci .msg p { margin: 0 0 .8rem; }
.merci .msg-delai { font-size: .875rem; color: var(--encre-3); }
.merci .alerte {
  padding: .9rem 1.1rem; border-left: 3px solid var(--alerte);
  background: var(--alerte-clair);
}
.merci .retour-site { margin-top: 2.5rem; font: .875rem/1 var(--sans); }

/* ── Les pages légales ─────────────────────────────────────── */
.legal { max-width: var(--colonne); }
.legal .section { margin-bottom: 2rem; }
.legal .section h2 { font-size: 1.0625rem; }
.legal .ligne { margin: 0 0 .7rem; }
.legal .etiquette {
  display: block; font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .04em; text-transform: uppercase; color: var(--encre-3);
}
.incomplet {
  margin: 0 0 2rem; padding: .9rem 1.1rem;
  border-left: 3px solid var(--alerte); background: var(--alerte-clair);
  font-size: .9375rem;
}

@media print {
  .retours, .lettre, .formulaire-contact { display: none !important; }
}

/* ── Le bureau de modération ───────────────────────────────── */
.retour-a-relire, .message-recu {
  padding: 1rem 0 1.2rem;
  border-bottom: 1px dashed var(--trait);
}
.retour-a-relire:last-of-type, .message-recu:last-of-type { border-bottom: 0; }
.meta-retour {
  margin: 0 0 .7rem;
  font: .75rem/1.5 var(--sans);
  color: var(--encre-3);
}
.meta-retour code { font-size: .95em; }
.sans-page { color: var(--alerte); }
.message-recu .sujet { margin: 0 0 .35rem; font-weight: 600; }
.message-recu .corps {
  margin: 0 0 .8rem; white-space: pre-wrap; font-size: .9375rem;
}
.actions-retour { display: flex; gap: .5rem; flex-wrap: wrap; }
.actions-retour button[disabled] { opacity: .45; cursor: not-allowed; }
.atelier textarea, .atelier input[type=text] { font-size: .875rem; }

/* ── L'écran de la lettre ──────────────────────────────────── */
.atelier-lettre .formulaire-lettre { max-width: 46rem; }
.atelier-lettre textarea {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .8125rem; line-height: 1.6;
}
.atelier-lettre fieldset {
  margin: 1.75rem 0 0; padding: 1rem 1.15rem 1.15rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
}
.atelier-lettre legend {
  padding: 0 .45rem; font: 600 .8125rem/1 var(--sans);
  letter-spacing: .04em; text-transform: uppercase; color: var(--encre-3);
}
.atelier-lettre .envoi-reel { border-color: var(--alerte); }
.atelier-lettre .envoi-reel legend { color: var(--alerte); }
.bouton-envoi {
  margin-top: .9rem;
  background: var(--alerte); border-color: var(--alerte); color: var(--papier);
}
.bouton-envoi:hover:not([disabled]) { filter: brightness(1.1); background: var(--alerte); }
.bouton[disabled], .bouton-envoi[disabled] { opacity: .45; cursor: not-allowed; }

.apercu-lettre { margin-top: 2.5rem; }
.apercu-cadre {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.75rem 1.5rem; background: #fff; color: #23201b;
  max-height: 34rem; overflow-y: auto;
}
.apercu-cadre a { color: #2d5c8a; }

/* ── La sauvegarde de la boîte ─────────────────────────────── */
.sauvegarde {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px dashed var(--trait);
}
.sauvegarde h3 { margin: 0 0 .5rem; font-size: .95rem; }
.deux-exports { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }

/* ── Le portrait de la page À propos ───────────────────────────
   Le site ne sert aucune autre image, et c'est un choix. Celle-ci dit
   qui parle : elle est petite, ronde, posée à côté du texte — pas une
   bannière. */
.a-propos .portrait {
  margin: 0 0 2rem;
  max-width: 15rem;
}
.a-propos .portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
}
.a-propos .portrait figcaption {
  margin-top: .5rem;
  font: .8125rem/1.5 var(--sans);
  color: var(--encre-3);
}
@media (min-width: 46rem) {
  /* Sur large, la photo se range à droite et le texte coule autour. */
  .a-propos .portrait { float: right; margin: .25rem 0 1.25rem 2rem; max-width: 13rem; }
}
@media print { .a-propos .portrait { float: none; max-width: 9rem; } }

/* ── Sommaire d'ancres de la page À propos ─────────────────────
   Ajouté le 2026-09-23. Même registre que le fil d'Ariane : petit,
   en sans, discret. Il oriente, il ne rivalise pas avec le titre. */
.sommaire { margin: 0 0 2.25rem; }
.sommaire ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
  font: .8125rem/1.5 var(--sans);
}
.sommaire a { color: var(--encre-3); text-decoration: none; }
.sommaire a:hover,
.sommaire a:focus-visible { color: var(--accent); text-decoration: underline; }
/* L'en-tête est collant (`position: sticky`) : sans cette marge, le titre
   visé par une ancre se range DERRIÈRE la barre de rubriques. La valeur
   couvre la barre sur une ligne comme sur deux, plus un peu d'air. */
.a-propos .section h2,
.page .section h2,
.page .faq h2 { scroll-margin-top: 6.5rem; }

/* ── La planche dessinée d'une page ────────────────────────────
   Ajoutée le 2026-09-24 (règles transversales, 5 septies). Elle
   déborde légèrement la colonne de texte : un dessin se regarde,
   il ne se lit pas à la même largeur qu'un paragraphe. */
.planche { margin: 0 0 2.5rem; }
/* La planche fondue — posée le 2026-09-28. Le fond de la page porte un
   grain ; une image au fond uni, même à la bonne couleur, s'y lit comme
   un rectangle lisse. Une planche dont le papier a été ramené au BLANC
   PUR se pose en « produit » : le blanc s'efface, le grain et le papier
   de la page passent au travers, le trait et le lavis restent. Pas en
   mode sombre : sur fond sombre, « produit » noircirait le dessin. */
.planche-fondue img { mix-blend-mode: multiply; border-radius: 0; }
@media (prefers-color-scheme: dark) {
  .planche-fondue img { mix-blend-mode: normal; border-radius: var(--rayon); }
}
.planche img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rayon);
}
.planche figcaption {
  margin-top: .6rem;
  font: .8125rem/1.5 var(--sans);
  color: var(--encre-3);
}
@media (min-width: 52rem) {
  .planche { margin-inline: -2.5rem; }
}

/* ── Le nombre de colonnes de l'accueil ────────────────────────
   Posé le 2026-09-24. Les trous beiges ne sont plus possibles depuis
   que ces grilles ne peignent plus rien — mais le compte de colonnes
   reste une affaire de lecture. Quatre portes en 2 × 2 donnent 474 px
   à chacune au lieu de 316 : la ligne respire au lieu de se casser
   tous les six mots. Douze produits de saison en 3 × 4, même raison. */
@media (min-width: 46rem) {
  .grille-portes { grid-template-columns: repeat(2, 1fr); }
  .grille-saison { grid-template-columns: repeat(3, 1fr); }
}


/* ── L'ORIGINE DES CHIFFRES (2026-09-26) ──────────────────────────
   Une ligne d'état, pas une alerte : elle informe sans inquiéter. Le
   filet passe à la couleur d'accent quand tous les essais de la page
   sont menés — la seule récompense visuelle que le site s'autorise.
   Jetons uniquement : le mode sombre suit de lui-même. */
.provenance {
  margin: var(--pas) 0;
  padding: .55rem .9rem;
  border-left: 3px solid var(--trait);
  font-size: .9em;
  line-height: 1.5;
}
.provenance p { margin: 0; }
.provenance a { white-space: nowrap; }
.provenance-complete { border-left-color: var(--accent); }
.provenance details { margin-top: .35rem; }
.provenance summary { cursor: pointer; }
.provenance ul { margin: .35rem 0 0; padding-left: 1.2rem; }

/* ── La recherche ──────────────────────────────────────────── */
/* Posée le 2026-09-28. En second rideau, comme l'accueil le voulait :
   un lien discret dans l'en-tête, une page à elle, rien de plus. */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.recherche { max-width: var(--colonne); }
.recherche-form { display: flex; gap: .5rem; margin: 0 0 1rem; }
.recherche-form input[type=search] {
  flex: 1 1 auto; min-width: 0; padding: .65rem .75rem;
  font: inherit; font-size: 1.0625rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--papier); color: var(--encre);
  -webkit-appearance: none; appearance: none;
}
.recherche-form button {
  flex: 0 0 auto; padding: .6rem 1rem; font: 600 .9375rem/1 var(--sans);
  border: 0; border-radius: var(--rayon); background: var(--accent); color: var(--papier);
  cursor: pointer;
}
.recherche-etat { margin: 0 0 .5rem; font: .875rem/1.5 var(--sans); color: var(--encre-3); }
.resultats .etiquette-type { margin: 0 0 .35rem; }
.resultats .meta { margin: 0 0 .35rem; font-style: italic; }
.entete nav a.nav-chercher::before { content: "⌕ "; }
.page-404 .recherche-form { margin-top: 1.5rem; }

/* ── Le mode en cuisine ────────────────────────────────────── */
/* Posé le 2026-09-28 (static/cuisine.js). Lu à un mètre, les mains
   prises : gros caractères, grosses cibles, rien d'autre à l'écran. */
.en-cuisine-hote { margin: 1.25rem 0 1.5rem; }
.bouton-cuisine {
  display: block; width: 100%; padding: .9rem 1rem;
  font: 600 1rem/1.2 var(--sans); color: var(--papier); background: var(--accent);
  border: 0; border-radius: var(--rayon); cursor: pointer;
}
.bouton-cuisine:hover { filter: brightness(1.08); }
.en-cuisine-aide { margin: .45rem 0 0; font: .8125rem/1.45 var(--sans); color: var(--encre-3); text-align: center; }

.vers-cuisine { margin: 1.25rem 0 1.5rem; padding: .9rem 1.1rem; background: var(--accent-clair); border-radius: var(--rayon); }
.vers-cuisine-titre { margin: 0 0 .4rem; font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.vers-cuisine ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.vers-cuisine a { font: 600 .9375rem/1.4 var(--sans); }
.vers-cuisine a::after { content: " →"; }

.cuisine-ouverte, .cuisine-ouverte body { overflow: hidden; }
.cuisine {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  background: var(--papier); color: var(--encre);
}
.cuisine[hidden] { display: none; }
.cuisine > * { width: 100%; max-width: 42rem; margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }

.cuisine-barre { display: flex; align-items: center; gap: .75rem; padding-block: .7rem; border-bottom: 1px solid var(--trait); max-width: none; }
.cuisine-titre {
  flex: 1 1 auto; min-width: 0; margin: 0; font: 600 .9375rem/1.3 var(--sans); color: var(--encre-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cuisine-quitter {
  flex: 0 0 auto; padding: .5rem .9rem; font: 600 .875rem/1 var(--sans);
  background: none; color: var(--encre-2); border: 1px solid var(--trait); border-radius: var(--rayon); cursor: pointer;
}

.cuisine-minuteurs { display: flex; flex-wrap: wrap; gap: .4rem; padding-block: .6rem 0; }
.cuisine-minuteurs[hidden] { display: none; }
.cuisine-minuteur {
  display: inline-flex; align-items: baseline; gap: .45rem; padding: .45rem .7rem;
  font: .8125rem/1.2 var(--sans); color: var(--encre); background: var(--accent-clair);
  border: 1px solid var(--accent); border-radius: 999px; cursor: pointer;
}
.cuisine-minuteur strong { font: 700 1.0625rem/1 ui-monospace, Menlo, monospace; }
.cuisine-minuteur em { font-style: normal; color: var(--encre-3); }
.cuisine-minuteur.fini { background: var(--alerte); border-color: var(--alerte); color: var(--papier); animation: cuisine-clignote 1s steps(2) infinite; }
.cuisine-minuteur.fini em { color: inherit; }
@keyframes cuisine-clignote { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .cuisine-minuteur.fini { animation: none; } }

.cuisine-pistes { display: flex; gap: .35rem; overflow-x: auto; padding-block: .7rem; scrollbar-width: none; }
.cuisine-pistes::-webkit-scrollbar { display: none; }
.cuisine-piste {
  flex: 0 0 auto; min-width: 2.4rem; height: 2.4rem; padding: 0 .65rem;
  font: 600 .875rem/1 var(--sans); color: var(--encre-2); background: var(--papier-2);
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
}
.cuisine-piste.faite { color: var(--accent); }
.cuisine-piste[aria-current] { color: var(--papier); background: var(--accent); }

.cuisine-corps { flex: 1 1 auto; overflow-y: auto; padding-block: .5rem 2rem; -webkit-overflow-scrolling: touch; outline: none; }
.cuisine-h { margin: .25rem 0 1rem; font-size: 1.5rem; }
.cuisine-h span { font: 400 1rem var(--sans); color: var(--encre-3); }
.cuisine-groupe { margin: 1.4rem 0 .5rem; font: 600 .75rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }
.cuisine-num { margin: .25rem 0 .6rem; font: 600 .8125rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--t-recette); }
.cuisine-geste { margin: 0 0 1.25rem; font-size: 1.5rem; line-height: 1.4; }
@media (min-width: 700px) { .cuisine-geste { font-size: 1.75rem; } }

.cuisine-reperes { margin: 0 0 1.25rem; display: grid; gap: .8rem; }
.cuisine-reperes dt { font: 600 .75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.cuisine-reperes dd { margin: .3rem 0 0; font-size: 1.1875rem; line-height: 1.45; }

.cuisine-lancer { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.cuisine-minuteur-btn {
  padding: .75rem 1rem; font: 600 1rem/1.2 var(--sans); color: var(--accent);
  background: var(--accent-clair); border: 1px solid var(--accent); border-radius: var(--rayon); cursor: pointer; text-align: left;
}
.cuisine-minuteur-btn span { display: block; font-weight: 400; font-size: .75rem; color: var(--encre-2); margin-top: .15rem; }

.cuisine-libre { display: flex; align-items: center; gap: .5rem; font: 600 1rem var(--sans); color: var(--accent); }
.cuisine-libre input { width: 4.5rem; padding: .65rem .5rem; font: inherit; color: var(--encre); background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); }
.cuisine-libre button { padding: .7rem 1rem; font: inherit; color: var(--papier); background: var(--accent); border: 0; border-radius: var(--rayon); cursor: pointer; }
.cuisine-piege { margin: 0 0 1rem; padding: .8rem 1rem; font-size: 1.0625rem; background: var(--alerte-clair); border-left: 3px solid var(--alerte); }
.cuisine-pourquoi, .cuisine-reference { margin: 0 0 1rem; font-size: 1rem; }
.cuisine-pourquoi summary, .cuisine-reference summary { cursor: pointer; font: 600 .9375rem/1.4 var(--sans); color: var(--encre-2); padding: .3rem 0; }
.cuisine-reference { padding: .6rem .9rem; background: var(--papier-2); border-radius: var(--rayon); }
.cuisine-reference table { font-size: .9375rem; }

.cuisine-ingredients { list-style: none; margin: 0; padding: 0; }
.cuisine-ingredients li { border-bottom: 1px solid var(--trait); }
.cuisine-ingredients label { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem 0; cursor: pointer; font-size: 1.125rem; line-height: 1.4; }
.cuisine-ingredients input { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; margin: .1rem 0 0; accent-color: var(--accent); }
.cuisine-ing small { display: block; margin-top: .2rem; font: .8125rem/1.4 var(--sans); color: var(--encre-3); }
.cuisine-ingredients li.coche .cuisine-ing { color: var(--encre-3); text-decoration: line-through; text-decoration-color: var(--encre-3); }
.cuisine-outils { list-style: none; margin: 0; padding: 0; }
.cuisine-outils li { padding: .7rem 0; border-bottom: 1px solid var(--trait); font-size: 1.0625rem; line-height: 1.4; }
.cuisine-intro { margin: 0 0 .5rem; font-size: 1.0625rem; color: var(--encre-2); }
.cuisine-facultatif { margin: 1rem 0 0; font-size: 1rem; color: var(--encre-2); }
.cuisine-recommencer { margin-top: 2rem; padding: .6rem .9rem; font: .875rem var(--sans); color: var(--encre-2); background: none; border: 1px solid var(--trait); border-radius: var(--rayon); cursor: pointer; }

.cuisine-pied {
  display: flex; gap: .6rem; padding-block: .7rem calc(.7rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--trait); max-width: none;
}
.cuisine-pied button {
  flex: 1 1 0; min-height: 3.4rem; font: 600 1.0625rem/1 var(--sans); border-radius: var(--rayon); cursor: pointer;
}
@media (min-width: 700px) { .cuisine-pied button { max-width: 20rem; } .cuisine-pied { justify-content: center; } }
.cuisine-prec { color: var(--encre-2); background: var(--papier-2); border: 1px solid var(--trait); }
.cuisine-prec:disabled { opacity: .4; cursor: default; }
.cuisine-pied .cuisine-suiv { flex-grow: 2; color: var(--papier); background: var(--accent); border: 0; }
.cuisine-veille { margin: 0; padding-block: 0 .5rem; font: .75rem/1.3 var(--sans); color: var(--encre-3); text-align: center; }

/* ── Le carnet d'essais (atelier, local) ───────────────────── */
.carnet-message { padding: .8rem 1rem; background: var(--accent-clair); border-left: 3px solid var(--accent); font: .9375rem/1.5 var(--sans); }
.carnet-message.carnet-erreur { background: var(--alerte-clair); border-left-color: var(--alerte); }
.carnet-mode, .carnet-rappel { font: .9375rem/1.55 var(--sans); color: var(--encre-2); }
.carnet-seances { padding-left: 1.4rem; }
.carnet-seances li { padding: .45rem 0; border-bottom: 1px solid var(--trait); }
.carnet-meta { display: block; font: .8125rem/1.4 var(--sans); color: var(--encre-3); }
.carnet-sourcer { margin-top: 2rem; font: .875rem/1.5 var(--sans); }
.carnet-essai { margin: 1.5rem 0; padding: 1.1rem 1.2rem; border: 1px solid var(--trait); border-radius: var(--rayon); break-inside: avoid; }
.carnet-essai h2 { margin: .1rem 0 .6rem; font-size: 1.125rem; }
.carnet-type { margin: 0; font: 600 .6875rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--t-technique); }
.carnet-form { margin-top: 1rem; }
.carnet-form .champ { display: block; margin: 0 0 .8rem; }
.carnet-form .champ > span { display: block; margin-bottom: .25rem; font: 600 .8125rem/1.4 var(--sans); color: var(--encre-2); }
.carnet-form .champ em { font-weight: 400; font-style: normal; color: var(--encre-3); }
.carnet-form input[type=text], .carnet-form textarea { width: 100%; padding: .5rem .6rem; font: inherit; font-size: .9375rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--papier); color: var(--encre); box-sizing: border-box; }
.carnet-decision { border: 0; padding: 0; margin: 0 0 .8rem; display: flex; gap: 1.2rem; flex-wrap: wrap; font: .9375rem var(--sans); }
.carnet-decision legend { font: 600 .8125rem var(--sans); color: var(--encre-2); margin-bottom: .3rem; }
.carnet-date { font: .75rem var(--sans); color: var(--encre-3); }
@media print {
  .carnet-form textarea { min-height: 5rem; }
  .carnet-form input[type=text] { min-height: 1.6rem; }
}

/* ── « Ça a marché ? » ─────────────────────────────────────── */
.bilan-lecteurs { margin: .6rem 0 0; font: 600 .875rem/1.4 var(--sans); }
.bilan-lecteurs a { color: var(--accent); text-decoration: none; }
.reussite { scroll-margin-top: 6.5rem; margin: 3rem 0 0; padding: 1.3rem 1.4rem; background: var(--papier-2); border-radius: var(--rayon); }
.reussite h2 { margin: 0 0 .8rem; font-size: 1.1875rem; }
.reussite-boutons { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.reussite-etape { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font: .9375rem var(--sans); color: var(--encre-2); }
.reussite-etape select { padding: .4rem .5rem; font: inherit; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--papier); color: var(--encre); }
.reussite-merci { scroll-margin-top: 8rem; display: none; margin: 0 0 1rem; padding: .7rem .9rem; font: .9375rem/1.5 var(--sans); background: var(--accent-clair); border-left: 3px solid var(--accent); }
.reussite-merci:target { display: block; }
.reussite-alerte { background: var(--alerte-clair); border-left-color: var(--alerte); }
.reussite:has(.reussite-merci:target) .formulaire-reussite { display: none; }
.reussite-coince { margin: 1rem 0 0; font: .9375rem/1.5 var(--sans); color: var(--encre-2); }