/* =========================================================================
   CUISINES DE L'ARRIÈRE-PAYS — système « ouvrage de référence », préfixe mets-
   Rhabillage du 05/09/2026 : palette, polices et rythme d'accueil refaits.
   Le clone du 04/09 servait encore la palette et les polices du donneur, à
   l'octet près, ce qui est une empreinte de réseau. Vocabulaire de la cuisine :
   fourneau (en-tête), cloche (héros accueil façon cloche de
   magazine), fournee (section numérotée), miette (carte illustrée),
   marche (flux daté), amuse (tête d'article), assiette (image pleine
   largeur), verrine (lecture 62ch), piqure (astuce de parent), résumé,
   trinque (citation), dessert (à lire ensuite), bouquet (séparateur SVG),
   office (pied).
   Palette : pierre calcaire + vert profond de garrigue + encre vert-noir,
   accent signature brique cuite. Titres en grotesque de labeur, texte en
   serif chaude : l'inverse du donneur, qui titrait en serif et lisait en sans.
   Aucune requête externe, dark-mode automatique, angles francs (2px).
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COULEURS · la chambre en douceur ------------------------------ */
  --toile:          #f2efe6;  /* fond de page, papier chaud                  */
  --torchon:  #e7e1d1;  /* réserves, sections alternées                */
  --linge:    #f6f3ec;  /* encadrés, lignes paires, le plus clair      */
  --poivre:          #1a1f1c;  /* encre chaude : texte principal              */
  --suie:     #0e1411;  /* fond nuit : office, cloche               */
  --cendre:    #5f6b60;  /* légendes, méta, chapôs                      */
  --olivade:          #7d8a80;  /* sauge décorative : fonds flambe, bouquets    */
  --olivade-profond:  #3a4f45;  /* sauge texte : titres de rubrique, filets    */
  --olivade-pale:     #e3ded0;  /* fond des encadrés « en résumé »             */
  --pinot:         #9c3b1f;  /* ACCENT SIGNATURE : liens, kickers, drop-cap */
  --pinot-clair:     #c86a3e;  /* argile sur fond nuit                        */
  --safran:          #d98f52;  /* pêche douce : fonds d'encadrés piqure       */
  --safran-pale:     #efe9dc;  /* fond piqure très léger                      */
  --thym:           #8a7a4e;  /* second ton discret : bouquets, accords */
  --julienne:          #cfd6cd;  /* hairline sur papier                         */
  --julienne-cave:     #2f3a34;  /* hairline sur nuit                           */

  /* Dark mode : la même chambre à la veilleuse. */
  --cave-fond:    #0e1411;
  --cave-profond:     #2a4438;
  --cave-chandelle:     #e3ded0;
  --cave-cendre:      #7d8a80;

  /* ---- 2. TYPE · piles système chaleureuses, rien de fetched ------------ */
  --ecriture-titre: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", "Liberation Sans", "Helvetica Neue", Arial, sans-serif;
  --ecriture-texte: Utopia, "Utopia Std", "Charis SIL", "Noto Serif", "PT Serif", Georgia, serif;

  --ecriture-graisse: 700;
  --caps-espacement: 0.18em;

  --verrine-taille: clamp(1.02rem, 0.97rem + 0.22vw, 1.12rem);
  --verrine-interligne: 1.66;
  --calibre-h1: clamp(2.2rem, 1.2rem + 3.6vw, 4.15rem);
  --calibre-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.28rem);
  --calibre-h3: clamp(1.14rem, 1.03rem + 0.55vw, 1.44rem);

  /* ---- 3. RYTHME --------------------------------------------------------- */
  --portion:        62ch;
  --portion-etendu:  1360px;
  --retrait:    clamp(1.1rem, 4vw, 4rem);
  --coulis:     clamp(0.9rem, 2.2vw, 2rem);
  --mijote:       clamp(2.4rem, 5.5vw, 5.2rem);
  --deport:      clamp(1.2rem, 3vw, 3rem);

  /* ---- 4. DETAILS · arrondis mesurés, transitions courtes ---------------- */
  --rond:        2px;
  --rond-fin:    2px;
  --julienne-fin:    1px solid var(--julienne);
  --feu:      150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --toile:         var(--cave-fond);
    --torchon: var(--cave-profond);
    --linge:   #17201b;
    --poivre:         var(--cave-chandelle);
    --cendre:   var(--cave-cendre);
    --olivade:         #93a89a;
    --olivade-profond: #a3bfae;
    --olivade-pale:    #1e2a24;
    --pinot:        var(--pinot-clair);
    --pinot-clair:    #dd8459;
    --safran:         #33291f;
    --safran-pale:    #241f18;
    --thym:          #b9a56d;
    --julienne:         #2f3a34;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--toile);
  color: var(--poivre);
  font-family: var(--ecriture-texte);
  font-size: var(--verrine-taille);
  line-height: var(--verrine-interligne);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.mets-cisele { display: inline-block; vertical-align: -0.12em; }

h1, h2, h3 {
  font-family: var(--ecriture-titre);
  font-weight: var(--ecriture-graisse);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--calibre-h1); }
h2 { font-size: var(--calibre-h2); }
h3 { font-size: var(--calibre-h3); }

p, ul, ol { margin: 0 0 1.1em; }
a {
  color: var(--pinot);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--feu);
}
a:hover { color: var(--olivade-profond); }
:focus-visible {
  outline: 2px solid var(--pinot);
  outline-offset: 3px;
  border-radius: 2px;
}
hr { border: 0; border-top: var(--julienne-fin); margin: var(--mijote) 0; }

::selection { background: var(--olivade); color: #0e1411; }

.mets-marche, .mets-accords, .mets-fraicheur, .mets-fournee__ordre,
.mets-miette__numero, .mets-cloche__millesime, .mets-piqure__titre,
.mets-reduction__titre, .mets-calepin {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SCAFFOLD
   ========================================================================= */

.mets-saute {
  position: absolute; left: -9999px; top: 0;
  background: var(--suie); color: var(--linge);
  padding: 0.7rem 1.15rem; z-index: 60;
  border-radius: 0 0 var(--rond-fin) 0;
}
.mets-saute:focus { left: 0.6rem; top: 0.6rem; }

.mets-billot {
  width: 100%;
  max-width: var(--portion-etendu);
  margin-inline: auto;
  padding-inline: var(--retrait);
}
.mets-poele { display: block; }

/* --- Le fourneau (en-tête) : papier clair, wordmark serif, filet double --- */
.mets-fourneau {
  background: var(--linge);
  border-bottom: 3px double var(--julienne);
  padding-block: clamp(0.8rem, 1.7vw, 1.2rem);
}
.mets-fourneau__etabli {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
}
.mets-griffe {
  font-family: var(--ecriture-titre);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem);
  color: var(--poivre);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.mets-griffe b { font-weight: 600; color: var(--pinot); }
.mets-griffe:hover { color: var(--olivade-profond); }
.mets-griffe span {
  display: block;
  font-family: var(--ecriture-texte);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: var(--caps-espacement);
  text-transform: uppercase;
  color: var(--olivade-profond);
  margin-top: 0.3rem;
}
.mets-couvert ul {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 1.3rem;
  list-style: none; margin: 0; padding: 0;
}
.mets-couvert a {
  color: var(--cendre);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding-block: 0.25rem;
  transition: color var(--feu);
}
.mets-couvert a:hover { color: var(--pinot); }
.mets-couvert a[aria-current="page"] {
  color: var(--pinot);
  border-bottom: 2px solid var(--pinot);
}
/* Case à cocher du menu replié : hors écran mais focusable ; le bouton n'existe que sous 760 px. */
.mets-couvert__case {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; opacity: 0;
}
.mets-couvert__bouton { display: none; }

/* --- L'avis (bandeau de non-affiliation, permanent) ----------------------- */
.mets-avis {
  background: var(--olivade-pale);
  border-bottom: 1px solid var(--julienne);
  color: var(--olivade-profond);
  font-size: 0.8rem;
  line-height: 1.45;
}
.mets-avis p { margin: 0; padding-block: 0.55rem; }
.mets-avis a { color: var(--pinot); }

/* --- Le ficelle (ficelle d'Ariane) ------------------------------------------------ */
.mets-ficelle { padding-block: clamp(0.85rem, 1.8vw, 1.3rem); }
.mets-ficelle ol {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.8rem;
  color: var(--cendre);
}
.mets-ficelle li + li::before {
  content: "›";
  margin-right: 0.55rem;
  color: var(--olivade-profond);
}
.mets-ficelle a { color: var(--cendre); }
.mets-ficelle a:hover { color: var(--pinot); }
.mets-ficelle [aria-current="page"] { color: var(--poivre); font-weight: 600; }

/* =========================================================================
   LA CLOCHE · héros façon cloche de magazine parental :
   composition typographique (kicker petites caps, grand titre serif,
   deck, ligne de parution à filet double avec numéro de dossier).
   Bande courte : la grille de rubriques commence avant 700px à 1456x800.
   ========================================================================= */

/* Rythme d'accueil refait le 05/09/2026. Le donneur posait le titre EN
   SURIMPRESSION sur une photo pleine page voilee. Ici la photo est un bandeau
   franc, et le titre se lit dans un cartouche typographique sur fond plein :
   la forme d'un ouvrage de reference, pas d'une couverture de magazine.
   06/09/2026, repère de contôle : sur 1456×800, la première rangée de
   rubriques doit entrer avant 700 px. Le bandeau et le cartouche passent
   côte à côte au-delà de 1100 px ; l'image n'est jamais voilée, le titre
   reste sur fond plein. */
.mets-cloche {
  position: relative;
  background: var(--suie);
  border-bottom: 4px solid var(--pinot);
}
.mets-cloche__assiette {
  position: static;
  width: 100%; height: auto;
  aspect-ratio: 21 / 7;
  object-fit: cover;
}
/* Le laque n'est plus un voile : c'est le filet d'accent sous le bandeau. */
.mets-cloche__laque {
  height: 3px;
  background: var(--thym);
}
@media (prefers-color-scheme: dark) {
  .mets-cloche__laque { background: var(--olivade-profond); }
}
.mets-cloche__craie {
  padding-block: clamp(2.7rem, 6vw, 4.4rem) clamp(2rem, 4.6vw, 3.3rem);
  max-width: 62rem;
  color: var(--cave-chandelle);
}
/* Bureau : le héros entier tient sous 420 px de haut, la première rangée
   de rubriques apparaît avant 700 px sur 1456×800 (design-implementation). */
@media (min-width: 1100px) {
  .mets-cloche {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .mets-cloche__assiette { grid-area: 1 / 1; aspect-ratio: auto; height: 100%; max-height: 24rem; }
  .mets-cloche__craie {
    grid-area: 1 / 2;
    display: flex; flex-direction: column; justify-content: center;
    padding: 1.2rem clamp(1.5rem, 2.4vw, 2.6rem) 1.1rem;
  }
  .mets-cloche__craie > p:not(.mets-cloche__kicker):not(.mets-cloche__millesime) { max-width: none; margin-top: 0.9rem; }
  .mets-cloche__craie .mets-cloche__millesime { margin-top: 1.1rem; flex-wrap: nowrap; }
  .mets-cloche__craie h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem); max-width: none; }
  .mets-cloche__laque { grid-area: 2 / 1 / 3 / 3; }
}
.mets-cloche__kicker {
  display: flex; align-items: center;
  gap: 0.8rem;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: var(--caps-espacement);
  text-transform: uppercase;
  color: var(--pinot-clair);
  margin: 0 0 1rem;
}
.mets-cloche__kicker::after {
  content: "";
  flex: 1;
  max-width: 8.5rem;
  border-top: 1px solid currentColor;
  opacity: 0.75;
}
.mets-cloche__craie h1 {
  color: #f6f3ec;
  max-width: 22ch;
}
.mets-cloche__craie > p:not(.mets-cloche__kicker):not(.mets-cloche__millesime) {
  font-size: clamp(1.02rem, 0.95rem + 0.38vw, 1.2rem);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--cave-chandelle);
  margin: 1.05rem 0 0;
}
/* Ligne de parution : filet double + numéro de dossier, la signature. */
.mets-cloche__millesime {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 1.15rem;
  margin-top: 1.5rem;
  padding-top: 0.85rem;
  border-top: 3px double rgba(237, 227, 209, 0.55);
  font-size: 0.75rem;
  letter-spacing: var(--caps-espacement);
  text-transform: uppercase;
  color: var(--pinot-clair);
}
.mets-cloche__millesime .mets-cisele { color: var(--thym); }
.mets-cloche__millesime em {
  font-style: normal;
  color: var(--cave-chandelle);
  letter-spacing: 0.08em;
}

/* =========================================================================
   LES FOURNEES · sections numérotées 01-06
   ========================================================================= */

.mets-fournee { padding-block: clamp(1.9rem, 4.4vw, 3.5rem); }
.mets-fournee--repos { background: var(--torchon); }
.mets-fournee__mise {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-bottom: var(--julienne-fin);
  padding-bottom: 0.6rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
}
.mets-fournee__ordre {
  font-family: var(--ecriture-texte);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--pinot);
  margin-right: 0.7rem;
}
.mets-fournee__nom { font-size: var(--calibre-h2); }
.mets-fournee__note {
  margin: 0;
  color: var(--cendre);
  font-size: 0.92rem;
  max-width: 44ch;
}

/* L'bouquet : vapeur et étoiles entre les grandes sections. */
.mets-bouquet {
  display: flex;
  justify-content: center;
  padding-block: clamp(0.3rem, 1vw, 0.8rem);
  color: var(--olivade);
}

/* La zeste : surtitre petites caps argile. */
.mets-zeste {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--caps-espacement);
  text-transform: uppercase;
  color: var(--pinot);
  margin: 0 0 0.55rem;
}

/* =========================================================================
   LES MIETTES · mosaïque asymétrique douce de cartes illustrées
   ========================================================================= */

/* Le donneur etalait une mosaique asymetrique de cartes, decalees
   verticalement. Ici : un index a filets, deux colonnes regulieres, vignette
   carree en gouttiere. Les modificateurs d'empan survivent mais ne servent
   plus a casser la grille : ils reglent le filet et la place de l'entree. */
.mets-miettes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--coulis) * 1.7);
  list-style: none; margin: 0; padding: 0;
  border-top: 2px solid var(--poivre);
}
.mets-miette {
  margin: 0;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 0 1.05rem;
  align-items: start;
  padding-block: 1.15rem;
  border-bottom: var(--julienne-fin);
}
.mets-miette--entier {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  padding-block: 1.5rem;
}
.mets-miette--etendu,
.mets-miette--milieu,
.mets-miette--reduit { grid-column: span 1; }
.mets-miette--deport  { border-bottom-color: var(--olivade); }
.mets-miette--deport2 { border-bottom-color: var(--thym); }
.mets-miettes--serre { padding-bottom: 0; }

.mets-miette__cadre {
  position: relative;
  overflow: hidden;
  border-radius: var(--rond);
  border: var(--julienne-fin);
  background: var(--torchon);
}
.mets-miette__cadre::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(43, 36, 30, 0);
  transition: background var(--feu);
}
.mets-miette:hover .mets-miette__cadre::after,
.mets-miette:focus-within .mets-miette__cadre::after {
  background: rgba(43, 36, 30, 0.16);
}
.mets-miette__cadre--vague     { aspect-ratio: 21 / 9; }
.mets-miette__cadre--plat  { aspect-ratio: 4 / 3; }
.mets-miette__cadre--cube    { aspect-ratio: 1 / 1; }
.mets-miette__cadre--debout { aspect-ratio: 3 / 4; }
.mets-miette__vue {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--rond);
  transition: transform 320ms ease;
}
.mets-miette:hover .mets-miette__vue { transform: scale(1.02); }

.mets-miette__legende { padding-top: 0.7rem; }
.mets-miette__surtitre {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.72rem;
  letter-spacing: var(--caps-espacement);
  text-transform: uppercase;
  color: var(--olivade-profond);
  margin: 0 0 0.3rem;
}
.mets-miette__numero {
  font-weight: 600;
  color: var(--thym);
  letter-spacing: 0.22em;
}
.mets-miette__titre { margin: 0 0 0.3rem; font-size: var(--calibre-h3); }
.mets-miette__lien {
  color: var(--poivre);
  text-decoration: none;
  background-image: linear-gradient(var(--pinot), var(--pinot));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 96%;
  transition: background-size var(--feu), color var(--feu);
}
.mets-miette__lien:hover { color: var(--pinot); background-size: 100% 2px; }
.mets-miette__mot {
  margin: 0;
  color: var(--cendre);
  font-size: 0.92rem;
  line-height: 1.5;
}
.mets-miette__mention {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: var(--caps-espacement);
  text-transform: uppercase;
  color: var(--thym);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
}

/* =========================================================================
   LE MARCHE · flux daté de l'accueil, deux verrines douces
   ========================================================================= */

/* Le donneur servait deux colonnes de cartes a vignette large. Ici : un
   registre date en une seule colonne, vignette carree etroite, filets partout,
   qui se lit comme la table des matieres d'un ouvrage. */
.mets-marche {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 2px solid var(--poivre);
}
.mets-barquette {
  display: grid;
  grid-template-columns: minmax(0, 27%) minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.15rem;
  border-bottom: var(--julienne-fin);
  align-items: start;
  margin: 0;
}
.mets-marche .mets-barquette:last-child { border-bottom: 0; }
.mets-barquette__vue {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rond-fin);
  border: var(--julienne-fin);
}
.mets-fraicheur {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  letter-spacing: var(--caps-espacement);
  text-transform: uppercase;
  color: var(--olivade-profond);
}
.mets-fraicheur b { font-weight: 600; color: var(--pinot); }
.mets-barquette h3 { margin: 0 0 0.3rem; }
.mets-barquette h3 a { color: var(--poivre); text-decoration: none; }
.mets-barquette h3 a:hover { color: var(--pinot); text-decoration: underline; }
.mets-barquette p { margin: 0; color: var(--cendre); font-size: 0.93rem; }

/* =========================================================================
   ARTICLES · amuse, assiette, verrine
   ========================================================================= */

.mets-amuse {
  padding-block: clamp(0.4rem, 1.5vw, 1.1rem) clamp(1.3rem, 3vw, 2.1rem);
  max-width: 56rem;
}
.mets-amuse__chapo {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--cendre);
  max-width: 58ch;
  margin: 0.9rem 0 0;
}
.mets-accords {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none; margin: 1.05rem 0 0; padding: 0;
  font-size: 0.81rem;
  color: var(--cendre);
  border-top: var(--julienne-fin);
  padding-top: 0.8rem;
}
.mets-accords a { color: var(--cendre); }
.mets-accords a:hover { color: var(--pinot); }

.mets-assiette { margin: 0; }
.mets-assiette__vue {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--rond);
  border: var(--julienne-fin);
}
.mets-assiette figcaption {
  margin-top: 0.55rem;
  font-size: 0.85rem;
  color: var(--cendre);
}

.mets-verrine {
  max-width: var(--portion);
  padding-block: clamp(1.5rem, 3.4vw, 2.5rem) clamp(1.9rem, 4.4vw, 3.2rem);
}
.mets-verrine > * + * { margin-top: 0.9em; }
.mets-verrine h2 {
  margin-top: 1.7em;
  padding-bottom: 0.26rem;
  border-bottom: var(--julienne-fin);
}
.mets-verrine h3 { margin-top: 1.3em; }
.mets-verrine ul, .mets-verrine ol { padding-left: 1.4rem; }
.mets-verrine li + li { margin-top: 0.45em; }
.mets-verrine strong { color: var(--olivade-profond); }
@media (prefers-color-scheme: dark) {
  .mets-verrine strong { color: #c9dcc4; }
}

/* Drop-cap douce : première lettre du premier paragraphe, argile, serif. */
.mets-verrine > p:first-of-type::first-letter {
  font-family: var(--ecriture-titre);
  font-weight: 600;
  float: left;
  font-size: 2.9em;
  line-height: 0.82;
  padding-right: 0.12em;
  padding-top: 0.06em;
  color: var(--pinot);
}

/* La trinque : citation douce, filet sauge. */
.mets-trinque {
  margin: 1.6em 0;
  padding: 0.25rem 0 0.25rem 1.4rem;
  border-left: 3px solid var(--olivade);
  font-family: var(--ecriture-titre);
  font-size: 1.14em;
  color: var(--poivre);
}

/* Le piqure : encadré « astuce de parent », pêche pâle, filet argile. */
.mets-piqure {
  margin: 1.7em 0;
  background: var(--safran-pale);
  border: var(--julienne-fin);
  border-left: 3px solid var(--pinot);
  border-radius: var(--rond);
  padding: 1rem 1.25rem 1.1rem;
  font-size: 0.96em;
}
.mets-piqure__titre {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: var(--caps-espacement);
  text-transform: uppercase;
  color: var(--pinot);
  margin: 0 0 0.5rem;
}
.mets-piqure__titre .mets-cisele { color: var(--thym); }
.mets-piqure p { margin: 0; }
.mets-piqure p + p { margin-top: 0.5rem; }
.mets-piqure strong { color: var(--pinot); }

/* Le résumé : encadré « en résumé », sauge pâle, coins arrondis. */
.mets-reduction {
  margin: 1.7em 0;
  background: var(--olivade-pale);
  border: 1px solid var(--olivade);
  border-radius: var(--rond);
  padding: 1rem 1.25rem 1.1rem;
  font-size: 0.96em;
}
.mets-reduction__titre {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: var(--caps-espacement);
  text-transform: uppercase;
  color: var(--olivade-profond);
  margin: 0 0 0.5rem;
}
.mets-reduction__titre .mets-cisele { color: var(--olivade-profond); }
.mets-reduction ul { margin: 0; padding-left: 1.2rem; }
.mets-reduction li + li { margin-top: 0.35em; }
.mets-reduction strong { color: var(--olivade-profond); }

/* Le tableau repère, défilant, façon carnet de mesure. */
.mets-calepin {
  overflow-x: auto;
  margin: 1.5em 0;
  border: var(--julienne-fin);
  border-radius: var(--rond);
}
.mets-calepin table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 0.92em;
}
.mets-calepin th, .mets-calepin td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--julienne);
  vertical-align: top;
}
.mets-calepin th {
  background: var(--olivade-pale);
  color: var(--olivade-profond);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--ecriture-texte);
}
.mets-calepin tr:last-child td { border-bottom: 0; }
.mets-calepin tbody tr:nth-child(even) { background: var(--linge); }

/* À lire ensuite. */
.mets-dessert {
  margin-top: 2.3em;
  padding-top: 1.15rem;
  border-top: 3px double var(--julienne);
}
.mets-dessert h2 {
  font-size: 1.18rem;
  border-bottom: 0;
  margin: 0 0 0.55rem;
}
.mets-dessert ul { list-style: none; margin: 0; padding: 0; }
.mets-dessert li { padding: 0.3rem 0; }
.mets-dessert li::before {
  content: "·";
  color: var(--pinot);
  margin-right: 0.55rem;
  font-weight: 700;
}

/* =========================================================================
   LE OFFICE (pied, fond nuit chaude)
   ========================================================================= */

.mets-office {
  margin-top: var(--mijote);
  background: var(--suie);
  color: var(--cave-chandelle);
}
.mets-office__etabli {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--coulis) * 1.5);
  padding-block: clamp(1.9rem, 4.4vw, 3rem);
}
.mets-office h2 {
  font-family: var(--ecriture-texte);
  font-size: 0.77rem;
  letter-spacing: var(--caps-espacement);
  text-transform: uppercase;
  color: var(--pinot-clair);
  margin-bottom: 0.7rem;
}
.mets-office ul { list-style: none; margin: 0; padding: 0; }
.mets-office li { padding-block: 0.22rem; }
.mets-office a { color: var(--cave-cendre); text-decoration: none; }
.mets-office a:hover { color: var(--pinot-clair); text-decoration: underline; }
.mets-office__pied {
  border-top: 1px solid var(--julienne-cave);
  padding-block: 1.05rem;
  font-size: 0.79rem;
  color: var(--cave-cendre);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 0.9rem;
}
.mets-office__pied .mets-cisele { color: var(--thym); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  .mets-miettes { column-gap: var(--coulis); }
  .mets-miette { grid-template-columns: 88px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .mets-miettes { grid-template-columns: minmax(0, 1fr); }
  .mets-miette--etendu, .mets-miette--milieu, .mets-miette--reduit { grid-column: 1 / -1; }
  .mets-barquette { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 1rem; }
  /* Menu replié : un bouton, la liste s'ouvre à la coche, sans script. */
  .mets-fourneau__etabli { align-items: center; }
  .mets-couvert { width: 100%; }
  .mets-couvert__bouton {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--olivade-profond); border: 1px solid var(--julienne); border-radius: var(--rond);
    padding: 0.4rem 0.75rem; cursor: pointer; user-select: none;
  }
  .mets-couvert__bouton .mets-cisele { color: var(--pinot); }
  .mets-couvert__case:focus-visible + .mets-couvert__bouton { outline: 2px solid var(--pinot); outline-offset: 2px; }
  .mets-couvert ul { display: none; }
  .mets-couvert__case:checked ~ ul { display: flex; flex-direction: column; gap: 0; margin-top: 0.6rem; border-top: 1px solid var(--julienne); }
  .mets-couvert__case:checked ~ ul a { display: block; padding-block: 0.55rem; border-bottom: 1px solid var(--julienne); }
  .mets-cloche__assiette { aspect-ratio: 16 / 9; }
  .mets-office__etabli { grid-template-columns: 1fr; }
  .mets-cloche__craie { padding-block: 2.4rem 1.9rem; }
  .mets-fournee__mise { flex-direction: column; gap: 0.3rem; }
  .mets-verrine > p:first-of-type::first-letter {
    font-size: 2.55em;
    float: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
  }
}

@media (max-width: 480px) {
  .mets-barquette { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); }
  .mets-miette { grid-template-columns: 72px minmax(0, 1fr); }
  .mets-couvert ul { gap: 0.35rem 0.95rem; }
}

/* Motion courtesy. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .mets-miette:hover .mets-miette__vue { transform: none; }
}

/* Print : la revue sur papier. */
@media print {
  .mets-fourneau, .mets-office, .mets-saute, .mets-ficelle, .mets-bouquet { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .mets-verrine { max-width: none; }
  .mets-piqure, .mets-reduction { background: #fff; color: #000; border: 1pt solid #000; }
  .mets-cloche__laque { background: rgba(43, 36, 30, 0.92); }
  .mets-verrine > p:first-of-type::first-letter { color: #000; }
}