/* Hallmark · shape: le mensuel, une couverture puis les rayons du magazine · genre: editorial · theme: custom · job: read (magazine : ouvrir l’article de la couverture, puis feuilleter les rayons) · idea: "Gym Direct se feuillette comme un mensuel de fitness : la dernière réponse de Camille fait la couverture, son nom de magazine posé sur la photo, et chaque rayon a sa propre mise en page" · vibe: "mensuel fitness, grandes photos, framboise, chaleur"
 * paper: oklch(98.6% 0.006 20) · accent: oklch(56% 0.215 4) · display: League Spartan 700 · body: Newsreader · hero: une couverture de mensuel (la photo de l’article le plus récent, le nom du magazine en grand sur la photo, l’appel de l’article en bas) et, à côté, trois appels avec photo · nav: le nom du magazine à gauche, les rubriques en gras à droite, barre collante qui prend un filet quand on descend · footer: l’ours, le nom et la description à gauche, une liste à deux colonnes de rubriques, derniers articles, liens utiles et crédits · imagery: photographs, les images à la une des 30 articles (fichiers d’origine du site pour les grands formats) et 3 Pexels, plus le portrait réel de Camille · signature: la couverture, où la photo de l’article du jour porte le nom du magazine
 * axes: light/grotesk-heavy/chromatic-pink · posture: Restrained (la framboise ne sert qu’aux libellés de rubrique, au bouton et aux barres de données) · contrast: pass · fold: pass · copy: verbatim (titres des 30 articles repris du site) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V5 · weakest: S, un mensuel de fitness ressemble à tous les mensuels ; la couverture est faite avec la vraie photo de l’article du jour à sa taille d’origine, et chaque rayon prend une forme différente (le marché, la piste, la double page) */
/* Hallmark · waive 38iii · le em est toute la seconde ligne du h1, romaine, dans la police du texte, à une seconde taille · la règle du parc impose un em pour la ligne qui dit « magazine » sous le nom Gym Direct */
/* Hallmark · dismissed 23 · .mf-jauge span et .mf-barres__dep sont des barres de données de 8 à 10 px de haut, pas des aplats : la framboise y marque la série du département */
/* Hallmark · waive 49b · les titres d’articles réels passent sur deux à quatre lignes selon la largeur · ce sont les titres publiés des articles de Gym Direct, ils ne se raccourcissent pas */
/* Hallmark · waive 71 · dans une carte d’article, la ligne rubrique et date est collée au titre qu’elle date · c’est la convention de presse de Gym Direct, la carte suivante s’écarte de la précédente par un filet */
/* Hallmark · waive 83 · trente articles réels, chacun avec sa propre image à la une · Florian demande un vrai magazine de sport, où chaque article a sa photo, toujours */
/* Hallmark · waive 24b · margin-top -10px et -5px sur la pastille et la coche des points à retenir de la chaîne de contenu · règle du parc : pictogramme centré par top 50 % et une demi-hauteur négative, vérifiée par verifie-article.sh */
/*
Theme Name: Gym Direct
Theme URI: https://www.gym-direct.fr/
Author: Gym Direct
Description: Thème « mensuel fitness » de gym-direct.fr (maquette D, refonte du 30/10/2026) : la couverture, les rayons, le dossier de l'observatoire des équipements sportifs, le mot de Camille, l'ours.
Version: 1.0.0
Requires PHP: 8.1
Text Domain: gym-direct
*/


/* ========== jetons (maquettes/gymdirect/d/tokens.css, mêmes noms) ========== */
/* Gym Direct, maquette D « mensuel fitness ».
 * Contrastes WCAG 2 calculés (OKLCH vers sRGB, script de la session) :
 * encre sur papier 17,1:1 ; encre 2 sur papier 10,1:1 ; gris sur papier 6,1:1 (5,5:1 sur le rose de page) ;
 * framboise sur papier 5,0:1 (texte de libellé, AA) ; papier sur framboise 5,1:1 (bouton) ;
 * framboise foncée de focus sur papier 5,5:1 ; encre sur rose 3 14,2:1. Tout passe AA.
 * Texte clair sur photo : toujours sur un voile d'encre d'au moins 0,65. */
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  /* gamme fermée : onze pas */
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.625rem;
  --text-title: clamp(1.25rem, 0.5vw + 1rem, 1.5rem);
  --text-lead: clamp(1.1875rem, 0.4vw + 1rem, 1.375rem);
  --text-section: clamp(2.75rem, 3.2vw + 1rem, 4.5rem);
  --text-display-s: clamp(2.25rem, 2.6vw + 1rem, 3.75rem);
  --text-display: clamp(3.5rem, 8.6vw + 0.5rem, 9rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* papier : un blanc à peine rosé ; rose 2 et 3 : les pages de magazine teintées */
  --color-paper: oklch(98.6% 0.006 20); --color-paper-2: oklch(95.6% 0.018 8); --color-paper-3: oklch(92.5% 0.026 8);
  /* encre prune très sombre, jamais le noir pur */
  --color-ink: oklch(21% 0.025 350); --color-ink-2: oklch(37% 0.025 350); --color-muted: oklch(49% 0.022 350);
  --color-rule: oklch(88% 0.014 350);
  /* un seul accent : la framboise */
  --color-accent: oklch(56% 0.215 4); --color-accent-ink: oklch(98.8% 0.006 8); --color-focus: oklch(54% 0.21 4);
  /* voile des photos : l'encre, en transparence seulement */
  --color-voile: oklch(18% 0.025 350);
  --color-sur-photo: oklch(98.8% 0.006 8);
  --voile-fort: oklch(18% 0.025 350 / 0.86); --voile-moyen: oklch(18% 0.025 350 / 0.72); --voile-porte: oklch(18% 0.025 350 / 0.82); --voile-nul: oklch(18% 0.025 350 / 0);

  --font-display: "League Spartan", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Newsreader", Georgia, ui-serif, serif;
  --font-outlier: var(--font-display);
  --radius-card: 6px; --radius-pill: 6px; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.025em;
  /* posées par le script ou en ligne (rang de révélation, barres de données) : valeurs de repli */
  --i: 0; --v: 0; --nat: 0.333;
}

/* ========== socle (base.css) ========== */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }


/* ---------- socle ---------- */
html { overflow-x: clip; max-width: 100%; }
body { max-width: 100%; line-height: 1.55; }
.container { max-width: var(--container); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--color-ink); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.mf-insec { white-space: nowrap; }
.mf-evitement { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-modal); padding: var(--space-sm) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-card); }
.mf-evitement:focus-visible { top: var(--space-md); }

.mf-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding-inline: var(--space-lg); border: 0; border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.mf-bouton:hover { background: var(--color-focus); }
.mf-bouton:active { transform: translateY(1px); }
.mf-bouton:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.mf-bouton:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- l'en-tête ---------- */
.mf-sentinelle { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }
.mf-entete { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.mf-entete.est-colle { border-bottom-color: var(--color-rule); }
.mf-entete__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.mf-marque { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.03em; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.mf-marque:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.mf-rubriques ul { display: flex; align-items: center; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; }
.mf-rubriques a { display: inline-block; padding-block: var(--space-xs); font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--color-ink); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.mf-rubriques a:hover { border-bottom-color: var(--color-accent); }
.mf-rubriques a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.mf-rubriques a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.mf-rubriques__contact a { color: var(--color-muted); font-weight: 400; }
.mf-entete__menu, .mf-rubriques__fermer { display: none; }

/* ---------- les articles : une seule famille, six formats ---------- */
.mf-papier { display: grid; align-content: start; gap: var(--space-sm); min-width: 0; }
.mf-papier__photo { display: block; overflow: hidden; border-radius: var(--radius-card); aspect-ratio: 3 / 2; background: var(--color-paper-3); }
.mf-papier__photo img { width: 100%; height: 100%; object-fit: cover; }
.mf-papier__texte { display: grid; gap: var(--space-xs); min-width: 0; }
.mf-papier__titre { font-size: var(--text-lg); line-height: 1.12; letter-spacing: -0.012em; max-width: 30ch; }
.mf-papier__titre a { color: var(--color-ink); text-decoration: none; background-image: linear-gradient(var(--color-accent), var(--color-accent)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-short) var(--ease-out); }
.mf-papier__titre a:hover { background-size: 100% 2px; }
.mf-papier__titre a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.mf-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); font-size: var(--text-sm); line-height: 1.3; color: var(--color-muted); }
.mf-rub { font-family: var(--font-display); font-weight: 700; color: var(--color-accent); text-decoration: none; }
a.mf-rub:hover { text-decoration: underline; text-decoration-thickness: 2px; }
a.mf-rub:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.mf-papier--xl { gap: var(--space-md); }
.mf-papier--xl .mf-papier__titre { font-size: var(--text-3xl); line-height: 1.04; max-width: 22ch; }
.mf-papier--haut .mf-papier__photo { aspect-ratio: 4 / 5; }
.mf-papier--haut { gap: var(--space-md); }
.mf-papier--haut .mf-papier__titre { font-size: var(--text-2xl); line-height: 1.06; }
.mf-papier--l .mf-papier__titre { font-size: var(--text-xl); }
.mf-papier--m .mf-papier__photo { aspect-ratio: 4 / 3; }
.mf-papier--m .mf-papier__titre { font-size: var(--text-title); }
.mf-papier--s .mf-papier__photo { aspect-ratio: 4 / 3; }
.mf-papier--ligne { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--space-md); }
.mf-papier--ligne .mf-papier__photo { aspect-ratio: 1; }

/* ---------- la une ---------- */
.mf-une { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-xl); padding-top: var(--space-lg); }
.mf-couv { container-type: inline-size; position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: clamp(560px, calc(100svh - 128px), 780px); border-radius: var(--radius-card); overflow: hidden; background: var(--color-voile); isolation: isolate; }
.mf-couv__photo { position: absolute; inset: 0; z-index: -2; }
.mf-couv__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.mf-couv::before, .mf-couv::after { content: ""; position: absolute; inset-inline: 0; z-index: -1; pointer-events: none; }
.mf-couv::before { top: 0; height: 52%; background: linear-gradient(to bottom, var(--voile-moyen), var(--voile-nul)); }
.mf-couv::after { bottom: 0; height: 58%; background: linear-gradient(to top, var(--voile-fort), var(--voile-nul)); }
.mf-couv__titre { padding: var(--space-xl) var(--space-xl) 0; font-size: 19.5cqi; line-height: 0.84; letter-spacing: -0.035em; color: var(--color-sur-photo); }
.mf-couv__titre em { display: block; margin-top: var(--space-md); max-width: 30ch; font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: var(--text-xl); line-height: 1.3; letter-spacing: 0; }
.mf-couv__appel { grid-row: 3; display: grid; gap: var(--space-sm); padding: 0 var(--space-xl) var(--space-xl); color: var(--color-sur-photo); }
.mf-couv__appel .mf-meta, .mf-couv__appel .mf-rub { color: var(--color-sur-photo); }
.mf-couv__article { font-size: var(--text-3xl); line-height: 1.04; max-width: 22ch; color: var(--color-sur-photo); }
.mf-couv__article a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 0.12em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.mf-couv__article a:hover { text-decoration-color: var(--color-accent); }
.mf-couv__article a:focus-visible { outline: 2px solid var(--color-sur-photo); outline-offset: 4px; }
.mf-une__suite { display: flex; flex-direction: column; gap: var(--space-lg); }
.mf-une__suite > .mf-papier--ligne { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }

/* ---------- les rayons ---------- */
.mf-rayon { padding-top: var(--section-gap); }
.mf-rayon__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-xl); padding-top: var(--space-md); border-top: 4px solid var(--color-ink); }
.mf-rayon__tete h2 { font-size: var(--text-section); line-height: 1; letter-spacing: -0.03em; }
.mf-rayon__tete h2 a { color: var(--color-ink); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.mf-rayon__tete h2 a:hover { color: var(--color-accent); }
.mf-rayon__tete h2 a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.mf-rayon__compte { font-size: var(--text-lead); color: var(--color-muted); }

/* nutrition : le marché */
.mf-marche { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); }
.mf-marche__vedette { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.mf-marche__duo { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.mf-marche__liste { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); align-content: start; }
.mf-marche__liste > .mf-papier { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.mf-marche2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); margin-top: var(--space-3xl); }
.mf-marche2__liste { grid-column: 1 / span 5; grid-row: 1; display: flex; flex-direction: column; gap: var(--space-md); }
.mf-marche2__liste > .mf-papier + .mf-papier { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.mf-marche2__grand { grid-column: 6 / -1; grid-row: 1; }
.mf-marche2__grand .mf-papier__photo { aspect-ratio: 4 / 3; }
.mf-marche2__grand .mf-papier__titre { font-size: var(--text-2xl); }
.mf-frise { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }

/* sport : la piste */
.mf-piste { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.mf-piste__grand { grid-column: 1 / span 8; }
.mf-piste__haut { grid-column: 9 / -1; }
.mf-piste__haut .mf-papier__photo { aspect-ratio: 3 / 4; }
.mf-piste__haut .mf-papier__photo img { object-position: 42% 50%; }
.mf-piste__haut .mf-papier__titre { font-size: var(--text-xl); }
.mf-bande { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }

/* le dossier de l'observatoire */
.mf-dossier { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.mf-dossier__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.mf-dossier__photo { grid-column: 1 / span 6; margin: 0; overflow: hidden; border-radius: var(--radius-card); aspect-ratio: 1; }
.mf-dossier__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.mf-dossier__texte { grid-column: 8 / -1; display: grid; gap: var(--space-lg); }
.mf-dossier__texte h2 { font-size: var(--text-display-s); line-height: 1.02; max-width: 18ch; }
.mf-dossier__lede { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 40ch; }
.mf-dossier__chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); margin: 0; }
.mf-dossier__chiffres > div { padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-paper-3); }
.mf-dossier__chiffres dt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-ink-2); }
.mf-dossier__chiffres dd { display: grid; margin: 0; }
.mf-chiffre { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1.05; letter-spacing: -0.02em; color: var(--color-ink); }
.mf-dossier__taux { font-size: var(--text-sm); color: var(--color-muted); }
.mf-cherche { display: grid; gap: var(--space-xs); margin-top: var(--space-xs); }
.mf-cherche label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.mf-cherche__ligne { display: flex; gap: var(--space-sm); }
.mf-cherche input, .mf-reglages input[type="search"], .mf-reglages select { min-width: 0; min-height: 52px; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); }
.mf-cherche input { flex: 1; }
.mf-cherche input::placeholder, .mf-reglages input::placeholder { color: var(--color-muted); }
.mf-cherche input:hover, .mf-reglages input:hover, .mf-reglages select:hover { border-color: var(--color-ink-2); }
.mf-cherche input:focus-visible, .mf-reglages input:focus-visible, .mf-reglages select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.mf-cherche input:disabled, .mf-reglages input:disabled, .mf-reglages select:disabled { opacity: 0.55; cursor: not-allowed; }

/* santé et bien-être : la double page */
.mf-double { padding-top: var(--section-gap); }
.mf-double__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.mf-double__sante { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--space-xl); }
.mf-double__sante .mf-rayon__tete { margin-bottom: 0; }
.mf-double__sante .mf-papier--l .mf-papier__titre { font-size: var(--text-2xl); }
.mf-double__sante > .mf-papier--ligne { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.mf-porte { grid-column: 8 / -1; position: relative; display: flex; align-items: flex-end; min-height: 560px; border-radius: var(--radius-card); overflow: hidden; isolation: isolate; color: var(--color-sur-photo); text-decoration: none; background: var(--color-voile); }
.mf-porte img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.mf-porte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--voile-porte), var(--voile-nul) 62%); }
.mf-porte__texte { display: grid; gap: var(--space-sm); padding: var(--space-xl); }
.mf-porte__titre { font-family: var(--font-display); font-weight: 700; font-size: var(--text-section); line-height: 1; letter-spacing: -0.03em; }
.mf-porte__ligne { font-size: var(--text-lead); max-width: 26ch; }
.mf-porte .mf-porte__titre { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 4px; text-underline-offset: 0.1em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.mf-porte:hover .mf-porte__titre { text-decoration-color: var(--color-accent); }
.mf-porte:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* le mot de Camille */
.mf-edito { padding-top: var(--section-gap); }
.mf-edito__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.mf-edito__lettre, .mf-edito__promesses { padding-top: var(--space-2xl); border-top: 4px solid var(--color-accent); }
.mf-edito__lettre { grid-column: 1 / span 7; display: grid; gap: var(--space-xl); }
.mf-edito__lettre h2 { font-size: var(--text-display-s); line-height: 1.02; max-width: 15ch; }
.mf-edito__corps { display: grid; gap: var(--space-md); font-size: var(--text-lead); line-height: 1.6; color: var(--color-ink-2); }
.mf-edito__corps p { max-width: 54ch; }
.mf-edito__signature { display: flex; align-items: center; gap: var(--space-md); margin: 0; }
.mf-edito__signature img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mf-edito__signature figcaption { display: grid; font-size: var(--text-sm); color: var(--color-muted); }
.mf-edito__signature strong { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); }
.mf-edito__promesses { grid-column: 9 / -1; align-self: start; display: grid; margin: 0; }
.mf-edito__promesses > div { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.mf-edito__promesses dt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); }
.mf-edito__promesses dd { margin: 0; color: var(--color-muted); }

/* ---------- l'ours ---------- */
.mf-ours { margin-top: var(--section-gap); padding-block: var(--space-3xl) var(--space-xl); background: var(--color-paper-3); }
.mf-ours__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); }
.mf-ours__qui { grid-column: 1 / span 5; display: grid; align-content: start; gap: var(--space-md); }
.mf-ours__nom { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1; letter-spacing: -0.03em; }
.mf-ours__desc { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 46ch; }
.mf-ours__liste { grid-column: 7 / -1; display: grid; margin: 0; }
.mf-ours__liste > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink-2); }
.mf-ours__liste dt { font-family: var(--font-display); font-weight: 700; }
.mf-ours__liste dd { margin: 0; color: var(--color-ink-2); }
.mf-ours__liste ul { list-style: none; margin: 0; padding: 0; }
.mf-ours__enligne { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
.mf-ours__derniers { display: grid; gap: var(--space-xs); }
.mf-ours a { color: var(--color-ink); text-decoration-color: var(--color-muted); }
.mf-ours a:hover { text-decoration-color: var(--color-accent); }
.mf-ours a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mf-ours__droits { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- observatoire ---------- */
.mf-ouverture { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; padding-top: var(--space-xl); }
.mf-ouverture__texte { grid-column: 1 / span 6; display: grid; justify-items: start; gap: var(--space-lg); }
.mf-ouverture h1 { font-size: var(--text-display-s); line-height: 1.02; max-width: 16ch; }
.mf-ouverture__lede { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 42ch; }
.mf-ouverture__photo { grid-column: 7 / -1; margin: 0; overflow: hidden; border-radius: var(--radius-card); aspect-ratio: 5 / 4; }
.mf-ouverture__photo img { width: 100%; height: 100%; object-fit: cover; }
.mf-national { padding-top: var(--section-gap-s); }
.mf-national__titre { font-size: var(--text-3xl); margin-bottom: var(--space-xl); }
.mf-national__chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.mf-national__chiffres > div { display: grid; gap: var(--space-xs); padding-inline: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.mf-national__chiffres > div:first-child { padding-left: 0; border-left: 0; }
.mf-national__chiffres > div:last-child { padding-right: 0; }
.mf-national__chiffres dt { font-family: var(--font-display); font-weight: 700; color: var(--color-ink-2); }
.mf-national__chiffres dd { display: grid; margin: 0; }
.mf-national__chiffres .mf-chiffre { font-size: var(--text-display-s); }
.mf-national__taux { color: var(--color-muted); font-size: var(--text-sm); }

.mf-outil { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.mf-outil__tete { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.mf-outil__tete h2 { font-size: var(--text-section); line-height: 1; letter-spacing: -0.03em; max-width: 18ch; }
.mf-outil__tete p { font-size: var(--text-lead); color: var(--color-ink-2); }
.mf-reglages { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--space-lg) var(--gap-columns); align-items: end; margin-bottom: var(--space-xl); }
.mf-reglages__cherche, .mf-reglages__tri { display: grid; gap: var(--space-xs); }
.mf-reglages label, .mf-familles legend { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.mf-reglages select { width: 100%; font-family: var(--font-body); }
.mf-familles { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 0; border: 0; min-width: 0; }
.mf-familles legend { padding: 0; margin-bottom: var(--space-xs); }
.mf-familles__boutons { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.mf-familles__boutons label { position: relative; display: inline-flex; }
.mf-familles__boutons input { position: absolute; width: 0; height: 0; opacity: 0; margin: 0; }
.mf-familles__boutons label > span { display: inline-flex; align-items: center; min-height: 52px; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); font-weight: 400; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.mf-familles__boutons label > span:hover { border-color: var(--color-ink); }
.mf-familles__boutons input:checked + span { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.mf-familles__boutons label:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-card); }
.mf-familles__boutons input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mf-familles__boutons input:disabled + span { opacity: 0.55; cursor: not-allowed; }

.mf-outil__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.mf-classement { grid-column: 1 / span 7; display: grid; gap: var(--space-sm); }
.mf-classement__etat { font-size: var(--text-sm); color: var(--color-muted); }
.mf-classement__cadre { overflow-x: auto; border-radius: var(--radius-card); background: var(--color-paper); }
.mf-classement__plus { justify-self: start; min-height: 48px; padding-inline: var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.mf-classement__plus:hover { background: var(--color-paper-3); }
.mf-classement__plus:active { background: var(--color-rule); }
.mf-classement__plus:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mf-classement__plus:disabled { opacity: 0.55; cursor: not-allowed; }
.mf-tableau { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.mf-tableau th, .mf-tableau td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: var(--rule-hair) solid var(--color-rule); }
.mf-tableau thead th { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); white-space: nowrap; color: var(--color-ink-2); background: var(--color-paper); }
.mf-tableau .num { text-align: right; font-variant-numeric: tabular-nums; }
.mf-tableau td:first-child { color: var(--color-muted); width: 3.5rem; }
.mf-tableau tbody th { font-weight: 400; padding-block: 0; }
.mf-tableau tbody th button { display: block; width: 100%; min-height: 48px; white-space: nowrap; padding: 0; border: 0; background: none; color: var(--color-ink); font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.16em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.mf-tableau tbody th button:hover { text-decoration-color: var(--color-accent); }
.mf-tableau tbody th button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mf-tableau tbody th button:active { color: var(--color-accent); }
.mf-tableau tbody th button:disabled { opacity: 0.55; cursor: not-allowed; }
.mf-tableau tr.est-choisi { background: var(--color-paper-2); }
.mf-tableau tr.est-choisi th button { font-weight: 700; }
.mf-tableau td:last-child { width: 28%; }
.mf-jauge { position: relative; display: block; height: 8px; border-radius: 2px; background: var(--color-paper-3); overflow: hidden; }
.mf-jauge span { position: absolute; inset: 0; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--v, 0)); }
.mf-jauge::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--nat, 0.333) * 100%); width: 2px; background: var(--color-ink); }

.mf-fiche { grid-column: 8 / -1; position: sticky; top: var(--space-3xl); display: grid; gap: var(--space-sm); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); }
.mf-fiche__code, .mf-fiche__pop { color: var(--color-muted); font-size: var(--text-sm); }
.mf-fiche h3 { font-size: var(--text-display-s); line-height: 1.02; }
.mf-fiche__lignes { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; }
.mf-fiche__lignes li { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.mf-fiche__lignes li.est-actif .mf-fiche__fam { color: var(--color-accent); }
.mf-fiche__fam { font-family: var(--font-display); font-weight: 700; }
.mf-fiche__val { color: var(--color-ink-2); }
.mf-fiche__taux { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--color-ink); }
.mf-fiche__ecart { font-size: var(--text-sm); color: var(--color-muted); }
.mf-barres { position: relative; display: block; height: 10px; margin-block: var(--space-2xs); border-radius: 2px; background: var(--color-paper-3); overflow: hidden; }
.mf-barres__dep { position: absolute; inset: 0; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform var(--dur-long) var(--ease-out); }
.mf-barres__nat { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--color-ink); }
.mf-fiche__legende { font-size: var(--text-sm); color: var(--color-muted); }

.mf-source { padding-top: var(--section-gap-s); }
.mf-source h2 { font-size: var(--text-3xl); margin-bottom: var(--space-xl); }
.mf-source__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: 0; }
.mf-source__liste > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.mf-source__liste dt { font-family: var(--font-display); font-weight: 700; }
.mf-source__liste dd { margin: 0; }
.mf-source__liste a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.mf-source__liste a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mf-source__note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); max-width: 65ch; }

/* ---------- une seule révélation : les articles des rayons ---------- */
.js.revele-pret .mf-revele { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 50ms); }
.js.revele-pret .mf-revele.est-vu { opacity: 1; transform: none; }

/* ---------- tablette et mobile ---------- */
@media (max-width: 60rem) {
  .mf-entete__menu { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-display); font-weight: 700; cursor: pointer; }
  .mf-entete__menu:hover { background: var(--color-paper-2); }
  .mf-entete__menu:active { background: var(--color-paper-3); }
  .mf-entete__menu:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .mf-rubriques { position: fixed; inset: 0; z-index: var(--z-modal); display: none; padding: var(--space-3xl) var(--gutter) var(--space-xl); background: var(--color-paper); overflow-y: auto; }
  .mf-rubriques.est-ouvert { display: block; }
  .mf-rubriques ul { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .mf-rubriques a { font-size: var(--text-2xl); color: var(--color-ink) !important; }
  .mf-rubriques__fermer { display: inline-flex; position: absolute; top: var(--space-md); right: var(--gutter); align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: var(--radius-card); background: none; color: var(--color-ink); cursor: pointer; }
  .mf-rubriques__fermer:hover { background: var(--color-paper-2); }
  .mf-rubriques__fermer:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

  .mf-une { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .mf-couv { min-height: 0; aspect-ratio: 4 / 5; }
  .mf-couv__titre { font-size: clamp(3.25rem, 16vw, 6.5rem); padding: var(--space-lg) var(--space-lg) 0; }
  .mf-couv__titre em { font-size: var(--text-lg); }
  .mf-couv__appel { padding: 0 var(--space-lg) var(--space-lg); }
  .mf-couv__article { font-size: var(--text-2xl); }
  .mf-marche, .mf-marche2, .mf-piste, .mf-dossier__grille, .mf-double__grille, .mf-edito__grille, .mf-ours__grille, .mf-ouverture, .mf-outil__grille { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  .mf-marche > *, .mf-marche2 > *, .mf-piste > *, .mf-dossier__grille > *, .mf-double__grille > *, .mf-edito__grille > *, .mf-ours__grille > *, .mf-ouverture > *, .mf-outil__grille > * { grid-column: 1 / -1; grid-row: auto; }
  .mf-marche__liste { grid-template-columns: minmax(0, 1fr); }
  .mf-marche2__liste { order: 2; }
  .mf-frise { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .mf-frise > .mf-papier { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--space-md); }
  .mf-frise .mf-papier__photo { aspect-ratio: 1; }
  .mf-bande { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .mf-dossier__photo { aspect-ratio: 4 / 3; }
  .mf-porte { min-height: 440px; }
  .mf-papier--haut .mf-papier__photo, .mf-piste__haut .mf-papier__photo { aspect-ratio: 4 / 3; }
  .mf-edito__promesses { padding-top: 0; border-top: 0; }
  .mf-reglages { grid-template-columns: minmax(0, 1fr); }
  .mf-fiche { position: static; padding: var(--space-lg); }
  .mf-national__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .mf-national__chiffres > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .mf-source__liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .mf-papier--ligne, .mf-frise > .mf-papier { grid-template-columns: 96px minmax(0, 1fr); }
  .mf-papier--xl .mf-papier__titre { font-size: var(--text-2xl); }
  .mf-cherche__ligne { flex-direction: column; }
  .mf-ours__liste > div, .mf-source__liste > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .mf-tableau th, .mf-tableau td { padding: var(--space-sm) var(--space-xs); }
  .mf-tableau td:last-child, .mf-tableau th:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .revele-pret .mf-revele { opacity: 1; transform: none; transition: none; }
  .mf-barres__dep { transition: none; }
  .mf-bouton:active { transform: none; }
}

/* ========================================================================
   Portage WordPress : ce que la maquette D n'avait pas (logo, cas où un
   rayon a moins d'articles, cahier des outils, page article, rubrique,
   pages, contact, sommaire). Même famille de formes : 6 px, filets, encre.
   ======================================================================== */

/* le logo : l'onglet framboise devant le nom */
.mf-marque { display: inline-flex; align-items: center; gap: var(--space-xs); }
.mf-marque__onglet { width: 28px; height: 28px; flex: none; color: var(--color-accent); }

/* la couverture : la ligne « magazine » lisible sur toute photo.
   Voile fort en haut (0,86 sur la ligne), ombre portée douce sous le texte. */
.mf-couv::before { height: 62%; background: linear-gradient(to bottom, var(--voile-fort), var(--voile-moyen) 38%, var(--voile-nul)); }
.mf-couv__titre { text-shadow: 0 2px 24px var(--voile-moyen); }
.mf-couv__titre em { margin-top: var(--space-lg); font-size: var(--text-2xl); line-height: 1.2; max-width: 24ch; text-shadow: 0 1px 2px var(--voile-fort), 0 0 18px var(--voile-fort); }
.mf-couv__article { text-shadow: 0 1px 2px var(--voile-moyen); }
.mf-une--vide .mf-couv { min-height: 420px; align-content: center; }

/* une photo manquante : l'aplat rose, jamais un trou */
.mf-papier__photo--vide { background: linear-gradient(160deg, var(--color-paper-2), var(--color-paper-3)); }

/* rayons plus courts que la maquette : la vedette ou le grand format prend la ligne */
@media (min-width: 60.0625rem) {
  .mf-marche--seul .mf-marche__vedette { grid-column: 1 / span 5; grid-row: auto; }
  .mf-marche--seul .mf-marche__liste { grid-column: 6 / -1; grid-row: 1; }
  .mf-marche2--seul .mf-marche2__grand { grid-column: 1 / span 8; }
  .mf-piste--seul .mf-piste__grand { grid-column: 1 / span 9; }
}

/* bien-être : la porte, puis ses articles s'il y en a parmi les trente */
.mf-double__be { grid-column: 8 / -1; display: flex; flex-direction: column; gap: var(--space-lg); }
.mf-double__be .mf-porte { grid-column: auto; flex: 1 0 auto; }
.mf-double__be > .mf-papier--ligne { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }

/* le cahier pratique : les outils en une phrase de sommaire, sur la page rose du dossier */
.mf-cahier { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 4px solid var(--color-ink); }
.mf-cahier__titre { grid-column: 1 / span 4; font-size: var(--text-3xl); line-height: 1; letter-spacing: -0.03em; }
.mf-cahier__titre a { color: var(--color-ink); text-decoration: none; }
.mf-cahier__titre a:hover { color: var(--color-accent); }
.mf-cahier__titre a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.mf-cahier__phrase { grid-column: 5 / -1; max-width: none; font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.3; letter-spacing: -0.015em; color: var(--color-ink-2); }
.mf-cahier__phrase a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: 0.14em; transition: color var(--dur-micro) var(--ease-out); }
.mf-cahier__phrase a:hover { color: var(--color-accent); }
.mf-cahier__phrase a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- le fil d'ariane ---------- */
.mf-fil { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.mf-fil a { color: var(--color-ink-2); text-decoration-color: var(--color-rule); }
.mf-fil a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.mf-fil a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mf-fil [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }

/* ---------- l'entrée d'une rubrique ou d'une page ---------- */
.mf-entree { display: grid; padding-top: var(--space-xl); }
.mf-entree__texte { display: grid; gap: var(--space-lg); }
.mf-entree__tete { margin-bottom: 0; }
.mf-entree__tete h1 { font-size: var(--text-section); line-height: 1; letter-spacing: -0.03em; }
.mf-entree__desc { display: grid; gap: var(--space-sm); max-width: 62ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.mf-entree--photo { position: relative; isolation: isolate; min-height: 480px; align-items: end; margin-top: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); overflow: hidden; background: var(--color-voile); }
.mf-entree__photo { position: absolute; inset: 0; z-index: -2; }
.mf-entree__photo img { width: 100%; height: 100%; object-fit: cover; }
.mf-entree--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--voile-fort), var(--voile-moyen)); }
.mf-entree--photo, .mf-entree--photo h1, .mf-entree--photo .mf-rayon__compte, .mf-entree--photo .mf-entree__desc, .mf-entree--photo .mf-entree__desc p, .mf-entree--photo .mf-fil, .mf-entree--photo .mf-fil a { color: var(--color-sur-photo); }
.mf-entree--photo .mf-rayon__tete { border-top-color: var(--color-sur-photo); }
.mf-rayon--page { padding-top: var(--space-2xl); }
.mf-rayon--page .mf-bande { row-gap: var(--space-2xl); }
.mf-vide { font-size: var(--text-lead); color: var(--color-ink-2); }
.mf-vide a { color: var(--color-ink); text-decoration-color: var(--color-accent); }

/* le bloc de bas de rubrique : un encadré sous le filet framboise, comme le mot de Camille */
.mf-encadre { padding-top: var(--section-gap-s); }
.mf-encadre .mf-encadre__corps { padding-top: var(--space-lg); border-top: 4px solid var(--color-accent); }
.mf-encadre__corps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); }
.mf-encadre__corps > * { grid-column: 6 / -1; margin: 0; }
.mf-encadre__corps > h2 { grid-column: 1 / span 4; grid-row: 1 / span 4; font-size: var(--text-3xl); line-height: 1.04; }
.mf-encadre__corps p, .mf-encadre__corps li { font-size: var(--text-lg); color: var(--color-ink-2); }
.mf-encadre__corps ul { padding-left: 1.1em; }
.mf-encadre__corps a { color: var(--color-ink); text-decoration-color: var(--color-accent); }

/* ---------- la page article : une colonne de 900 px sur le papier ---------- */
.mf-page-lecture { background: var(--color-paper); }
.mf-colonne { width: 100%; max-width: calc(900px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.mf-lecture { padding-top: var(--space-xl); }
.mf-lecture__tete { display: grid; gap: var(--space-md); }
.mf-lecture__rub { font-size: var(--text-md); }
.mf-lecture__tete h1 { font-size: var(--text-display-s); line-height: 1.04; letter-spacing: -0.025em; max-width: 22ch; }
.mf-lecture__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.mf-lecture__meta a { color: var(--color-ink); font-weight: 700; text-decoration-color: var(--color-accent); }
.mf-lecture__meta a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mf-lecture__etoiles { display: flex; align-items: center; min-height: 24px; }
.mf-lecture__etoiles .kk-star-ratings { margin: 0; }
.mf-lecture__image { margin: var(--space-xl) 0 0; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.mf-lecture__image img { width: 100%; height: auto; }
.mf-lecture__resume { margin-top: var(--space-lg); }
.mf-lecture__resume:empty { display: none; }
.mf-lecture__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.mf-lecture__tags a { display: inline-flex; align-items: center; min-height: 36px; padding-inline: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; }
.mf-lecture__tags a:hover { border-color: var(--color-accent); color: var(--color-ink); }
.mf-lecture__tags a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* le corps : la largeur de la colonne, comme l'image ; seuls les paragraphes ont une mesure */
.mf-prose { margin-top: var(--space-xl); color: var(--color-ink); font-size: var(--text-lg); line-height: 1.7; }
.mf-prose > * + * { margin-top: var(--space-md); }
.mf-prose > :first-child { margin-top: 0; }
.mf-prose p { max-width: none; }
.mf-prose h2 { margin-top: var(--space-2xl); font-size: var(--text-2xl); line-height: 1.12; letter-spacing: -0.02em; }
.mf-prose h3 { margin-top: var(--space-xl); font-size: var(--text-xl); line-height: 1.18; }
.mf-prose h4 { margin-top: var(--space-lg); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.mf-prose a { color: var(--color-accent); text-decoration-color: currentColor; }
.mf-prose a:hover { color: var(--color-focus); }
.mf-prose a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mf-prose strong { font-weight: 700; }
.mf-prose img { border-radius: var(--radius-card); }
.mf-prose figure { margin-left: 0; margin-right: 0; }
.mf-prose figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.mf-prose blockquote { margin-left: 0; margin-right: 0; padding-top: var(--space-md); border-top: 4px solid var(--color-accent); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.3; }
.mf-prose ul, .mf-prose ol { padding-left: 1.2em; }
.mf-prose li + li { margin-top: var(--space-2xs); }
.mf-prose li::marker { color: var(--color-accent); }
.mf-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.mf-prose th, .mf-prose td { padding: var(--space-sm); text-align: left; border-bottom: var(--rule-hair) solid var(--color-rule); }
.mf-prose th { font-family: var(--font-display); font-weight: 700; border-bottom-color: var(--color-ink-2); }
.mf-prose #ez-toc-container { width: 100%; padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: none; }
.mf-prose #ez-toc-container .ez-toc-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-ink); }
.mf-prose #ez-toc-container a { color: var(--color-ink-2); text-decoration: none; }
.mf-prose #ez-toc-container a:hover { color: var(--color-accent); text-decoration: underline; }
/* ---------- la chaîne de contenu (préfixe brt aujourd'hui, relevé dans le CSS additionnel de l'ancien thème) ----------
   Sélecteurs sur la FIN du nom de classe, toujours qualifiés par .mf-prose :
   le préfixe change à chaque version de la chaîne. Les pictogrammes passent
   en mask-image et prennent l'accent ; ils sont centrés sur leur ligne. */
.mf-prose [class$="-key"] { margin: var(--space-xl) 0; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: none; overflow: hidden; }
.mf-prose [class$="-key-bar"] { height: 4px; background: var(--color-accent); }
.mf-prose [class$="-key-in"] { position: relative; padding: var(--space-lg); }
.mf-prose [class$="-key-top"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.mf-prose [class$="-kick"], .mf-prose [class$="-cnt"] { display: block; margin: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-accent); }
.mf-prose [class$="-key-h"] { margin: 0 0 var(--space-sm); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.25; color: var(--color-ink); }
.mf-prose [class$="-key"] ul { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.mf-prose [class$="-key"] li { position: relative; margin: 0; padding: var(--space-sm) 0 var(--space-sm) 36px; border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); line-height: 1.55; }
.mf-prose [class$="-key"] li:last-child { border-bottom: 0; }
/* la pastille, puis la coche, toutes deux centrées sur le point à savoir */
.mf-prose [class$="-key"] li::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -10px; width: 20px; height: 20px; border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-accent) 14%, transparent); color: transparent; font-size: 0; line-height: 0; opacity: 1; }
.mf-prose [class$="-key"] li::after { content: ""; position: absolute; left: 4px; top: 50%; margin-top: -5px; width: 12px; height: 10px; border: 0; transform: none; background-color: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.1L11 1.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.1L11 1.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.mf-prose [class$="-badge"] { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 28px; padding: 0 var(--space-sm); border: 1px solid var(--color-accent); border-radius: var(--radius-card); background: transparent; font-size: var(--text-xs); font-weight: 700; line-height: 1; color: var(--color-accent); white-space: nowrap; }
.mf-prose [class$="-badge"]::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.mf-prose [class$="-foot"] { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: var(--space-md) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
.mf-prose [class$="-foot"] span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.mf-prose [class$="-foot"] span::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background-color: var(--color-accent); }
.mf-prose [class$="-foot"] span:nth-child(1)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.mf-prose [class$="-foot"] span:nth-child(2)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat; }
.mf-prose [class$="-foot"] span:nth-child(3)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E") center / contain no-repeat; }
.mf-prose [class$="-grid"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-md); margin: var(--space-xl) 0; }
.mf-prose [class$="-card"] { position: relative; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); box-shadow: none; transform: none; }
.mf-prose [class$="-num"] { position: absolute; top: var(--space-xs); right: var(--space-sm); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--color-rule); opacity: 1; font-variant-numeric: tabular-nums; }
.mf-prose [class$="-ico"] { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 0 var(--space-sm); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-accent); }
.mf-prose [class$="-ico"] svg { width: 22px; height: 22px; }
.mf-prose [class$="-card-t"] { margin: 0 0 var(--space-2xs); font-weight: 700; font-size: var(--text-md); color: var(--color-ink); }
.mf-prose [class$="-card-x"] { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); }
.mf-prose [class$="-quote"], .mf-prose [class$="-out"] { margin: var(--space-xl) 0; padding: var(--space-md) var(--space-lg); border: 0; border-left: 2px solid var(--color-accent); border-radius: 0; background: var(--color-paper-2); color: var(--color-ink); font-style: normal; }
.mf-prose [class$="-out"] { margin-top: var(--space-md); }
.mf-prose [class$="-out"]:empty { display: none; }
.mf-prose [class$="-tool"] { margin: var(--space-xl) 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: none; }
.mf-prose [class$="-tool"] label { display: block; margin: 0 0 var(--space-2xs); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.mf-prose [class$="-rng"] { width: 100%; margin: var(--space-2xs) 0 var(--space-md); accent-color: var(--color-accent); }
.mf-prose [class$="-val"] { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; color: var(--color-accent); }
.mf-prose [class$="-gauge"] { height: 10px; margin: var(--space-sm) 0; border-radius: var(--radius-card); background: var(--color-paper-3); overflow: hidden; }
.mf-prose [class$="-gauge"] i { display: block; height: 100%; background: var(--color-accent); }
.mf-prose [class$="-pick"] { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-2xs) 0 var(--space-md); }
.mf-prose [class$="-pick"] button { flex: 1 1 8rem; min-height: 44px; padding: var(--space-sm); border: 1px solid var(--color-rule) !important; border-radius: var(--radius-card); background: var(--color-paper) !important; color: var(--color-ink) !important; font-size: var(--text-sm); font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: none !important; transition: border-color var(--dur-micro) var(--ease-out); }
.mf-prose [class$="-pick"] button:hover { border-color: var(--color-accent) !important; }
.mf-prose [class$="-pick"] button:focus-visible { outline: 2px solid var(--color-focus) !important; outline-offset: 2px; }
.mf-prose [class$="-pick"] button.on { border-color: var(--color-accent) !important; background: var(--color-paper-2) !important; box-shadow: inset 0 0 0 1px var(--color-accent) !important; }
.mf-prose [class$="-pick"] button:disabled { cursor: default; background: var(--color-paper) !important; color: var(--color-ink) !important; }
/* -step, -nav et -done prennent la classe « on » : le nom ne finit plus par
   le suffixe, d'où *= au lieu de $= (toujours qualifié par .mf-prose). */
.mf-prose [class*="-step"]:not(.on) { display: none; }
.mf-prose [class*="-step"].on { display: block; }
.mf-prose [class*="-nav"]:not(.on), .mf-prose [class*="-done"]:not(.on) { display: none; }
.mf-prose [class*="-nav"].on { display: block; margin: var(--space-md) 0 0; text-align: right; }
.mf-prose [class*="-nav"] button { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-card); background: var(--color-accent) !important; color: var(--color-accent-ink) !important; font-weight: 700; text-decoration: none; cursor: pointer; opacity: 1 !important; }
.mf-prose [class*="-nav"] button:hover { background: var(--color-focus) !important; }
.mf-prose [class*="-nav"] button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.mf-prose [class*="-done"].on { display: block; margin: var(--space-md) 0 0; padding: var(--space-sm) var(--space-md); border: 0; border-left: 2px solid var(--color-accent); border-radius: 0; background: var(--color-paper-2); color: var(--color-ink); font-weight: 700; }
.mf-prose [class$="-quiz-item"] { margin: var(--space-md) 0; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.mf-prose [class$="-quiz-item"]:last-child { border-bottom: 0; padding-bottom: 0; }
.mf-prose [class$="-quiz-item"] > p { margin: 0 0 var(--space-xs); font-weight: 700; }
.mf-prose [class$="-faq"] { margin: var(--space-xl) 0; }
.mf-prose [class$="-q"] { margin: 0 0 var(--space-xs); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.mf-prose [class$="-q"][open] { border-color: var(--color-ink-2); background: var(--color-paper-2); }
.mf-prose [class$="-q"] summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); list-style: none; cursor: pointer; }
.mf-prose [class$="-q"] summary::-webkit-details-marker { display: none; }
.mf-prose [class$="-q"] summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.mf-prose [class$="-q"] summary h3 { margin: 0; font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; color: var(--color-ink); }
.mf-prose [class$="-q"] summary::after { content: ""; flex: none; width: 9px; height: 9px; border: 0; border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
.mf-prose [class$="-q"][open] summary::after { transform: rotate(-135deg); }
.mf-prose [class$="-q"] p { margin: var(--space-sm) 0 0; color: var(--color-ink-2); }
.mf-prose [class$="-src"] { margin: var(--space-xl) 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.mf-prose [class$="-src"] h2 { margin: 0 0 var(--space-sm); font-size: var(--text-lg); color: var(--color-ink); }
.mf-prose [class$="-src"] ul { list-style: none; margin: 0; padding: 0; }
.mf-prose [class$="-src"] li { margin: 0; padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.mf-prose [class$="-src"] li:last-child { border-bottom: 0; }
.mf-prose [class$="-src"] a { color: var(--color-ink); font-weight: 700; font-size: var(--text-sm); text-decoration-color: var(--color-rule); }
.mf-prose [class$="-src"] a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.mf-prose [class$="-tag"] { display: inline-block; margin: 0 var(--space-xs) 0 0; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-card); background: var(--color-paper-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-ink-2); }
/* Tableaux : texte toujours foncé sur clair, !important contre le CSS en
   ligne des anciens articles. */
.mf-prose [class$="-tab"] { width: 100%; margin: var(--space-xl) 0; border-collapse: collapse; font-size: var(--text-sm); background: var(--color-paper); }
.mf-prose [class$="-tab"] th { padding: var(--space-sm); background: var(--color-paper-2) !important; color: var(--color-ink) !important; text-align: left; font-weight: 700; border-bottom: 2px solid var(--color-ink-2); }
.mf-prose [class$="-tab"] td { padding: var(--space-sm); background: transparent; color: var(--color-ink-2) !important; border-bottom: 1px solid var(--color-rule); }
.mf-prose [class$="-tab"] tr:nth-child(even) td { background: var(--color-paper-2) !important; }
.mf-prose [class$="-img"] { max-width: 100%; height: auto; border-radius: var(--radius-card); }
.mf-prose [class$="-key-in"] > *:first-child, .mf-prose [class$="-quote"] > *:first-child, .mf-prose [class$="-out"] > *:first-child, .mf-prose [class$="-tool"] > *:first-child { margin-top: 0; }
.mf-prose [class$="-key-in"] > *:last-child, .mf-prose [class$="-quote"] > *:last-child, .mf-prose [class$="-out"] > *:last-child, .mf-prose [class$="-tool"] > *:last-child { margin-bottom: 0; }

/* la signature de Camille sous l'article : portrait rond, comme le mot de l'accueil */
.mf-signe { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-lg); align-items: start; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 4px solid var(--color-accent); }
.mf-signe__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.mf-signe__texte { display: grid; gap: var(--space-xs); }
.mf-signe__nom { font-size: var(--text-xl); line-height: 1.15; }
.mf-signe__titre { font-size: var(--text-sm); color: var(--color-muted); }
.mf-signe__bio { color: var(--color-ink-2); }
.mf-signe__bio p + p { margin-top: var(--space-xs); }
.mf-signe__liens { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xs); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.mf-signe__liens a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.mf-signe__liens a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* trois articles du même rayon : un format moyen, deux lignes */
.mf-voisinage { padding-top: var(--section-gap-s); }
.mf-voisinage h2 { margin-bottom: var(--space-xl); padding-top: var(--space-md); border-top: 4px solid var(--color-ink); font-size: var(--text-3xl); letter-spacing: -0.03em; }
.mf-voisinage__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); grid-template-rows: auto 1fr; column-gap: var(--gap-columns); row-gap: var(--space-lg); }
.mf-voisinage__grille > :first-child { grid-row: span 2; }
.mf-voisinage__grille > .mf-papier--ligne + .mf-papier--ligne { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }

/* ---------- les pages : texte d'une colonne ---------- */
.mf-page { padding-top: var(--space-2xl); }
.mf-texte { max-width: 900px; font-size: var(--text-lg); line-height: 1.7; color: var(--color-ink); }
.mf-texte > * + * { margin-top: var(--space-md); }
.mf-texte h2 { margin-top: var(--space-2xl); font-size: var(--text-2xl); line-height: 1.12; }
.mf-texte h3 { margin-top: var(--space-xl); font-size: var(--text-xl); }
.mf-texte a { color: var(--color-accent); }
.mf-texte a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mf-texte ul, .mf-texte ol { padding-left: 1.2em; }
.mf-texte--legal { font-size: var(--text-md); }
.mf-texte--legal h2 { font-size: var(--text-xl); }
.mf-texte--legal img { border-radius: var(--radius-card); }

/* ---------- contact : deux mots, puis le formulaire sur la page rose ---------- */
.mf-ecrire { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); padding-top: var(--space-2xl); align-items: start; }
.mf-ecrire__mots { grid-column: 1 / span 5; display: grid; gap: var(--space-md); }
.mf-ecrire__mots h2 { font-size: var(--text-2xl); }
.mf-ecrire__mots h2:not(:first-child) { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.mf-ecrire__mots p { font-size: var(--text-lg); color: var(--color-ink-2); }
.mf-ecrire__mots a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.mf-ecrire__form { grid-column: 7 / -1; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.mf-ecrire__form .wpcf7-form p { display: flex; flex-direction: column; gap: var(--space-md); margin: 0 0 var(--space-md); }
.mf-ecrire__form .wpcf7-form br { display: none; }
.mf-ecrire__form .wpcf7-form label { display: grid; gap: var(--space-2xs); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-ink); }
.mf-ecrire__form .wpcf7-form-control-wrap { display: block; }
.mf-ecrire__form input:not([type="submit"]):not([type="hidden"]), .mf-ecrire__form textarea { width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; }
.mf-ecrire__form textarea { min-height: 180px; resize: vertical; }
.mf-ecrire__form input:not([type="submit"]):hover, .mf-ecrire__form textarea:hover { border-color: var(--color-ink-2); }
.mf-ecrire__form input:focus-visible, .mf-ecrire__form textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.mf-ecrire__form input::placeholder, .mf-ecrire__form textarea::placeholder { color: var(--color-muted); }
.mf-ecrire__form input.wpcf7-submit { width: 100%; min-height: 52px; padding-inline: var(--space-lg); border: 0; border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.mf-ecrire__form input.wpcf7-submit:hover { background: var(--color-focus); }
.mf-ecrire__form input.wpcf7-submit:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.mf-ecrire__form input.wpcf7-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.mf-ecrire__form .wpcf7-not-valid-tip { margin-top: var(--space-2xs); font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); color: var(--color-error); }
.mf-ecrire__form .wpcf7-response-output { margin: var(--space-md) 0 0 !important; padding: var(--space-sm) var(--space-md) !important; border: var(--rule-hair) solid var(--color-ink-2) !important; border-radius: var(--radius-card); font-size: var(--text-sm); }
.mf-ecrire__form .wpcf7-spinner { display: none; }

/* ---------- le sommaire : plan du site et articles de la fiche ---------- */
.mf-sommaire { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--space-2xl) var(--gap-columns); padding-top: var(--space-2xl); align-items: start; }
.mf-sommaire__titre { grid-column: 1 / -1; font-size: var(--text-section); line-height: 1; letter-spacing: -0.03em; }
.mf-sommaire__rubrique { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: 4px solid var(--color-ink); }
.mf-sommaire__rubrique h2, .mf-sommaire__rubrique h3 { font-size: var(--text-2xl); }
.mf-sommaire__rubrique h2 a { color: var(--color-ink); text-decoration: none; }
.mf-sommaire__rubrique h2 a:hover { color: var(--color-accent); }
.mf-sommaire__compte { font-size: var(--text-sm); color: var(--color-muted); }
.mf-sommaire__rubrique ul { display: grid; gap: var(--space-xs); margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.mf-sommaire__rubrique ul ul { margin-top: var(--space-xs); padding-left: var(--space-md); }
.mf-sommaire__rubrique li { line-height: 1.4; }
.mf-sommaire__rubrique li a { color: var(--color-ink); text-decoration-color: var(--color-rule); }
.mf-sommaire__rubrique li a:hover { text-decoration-color: var(--color-accent); }
.mf-sommaire__rubrique a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mf-sommaire__rubrique time { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- la fiche de Camille ---------- */
.mf-edito--fiche { padding-top: var(--space-xl); }
.mf-edito__signature--grande img { width: 160px; height: 160px; }
.mf-edito__signature--grande h1 { font-size: var(--text-display-s); line-height: 1; letter-spacing: -0.03em; }
.mf-edito__corps ul { display: grid; gap: var(--space-xs); padding-left: 1.1em; }
.mf-edito__promesses a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.mf-source__histoire { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.mf-source__texte { margin-top: var(--space-xl); }

/* ---------- tablette et mobile, pour ce qui précède ---------- */
@media (max-width: 60rem) {
  .mf-double__be { grid-column: 1 / -1; }
  .mf-cahier, .mf-encadre__corps, .mf-ecrire { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .mf-cahier > *, .mf-encadre__corps > *, .mf-encadre__corps > h2, .mf-ecrire > * { grid-column: 1 / -1; grid-row: auto; }
  .mf-cahier { margin-top: var(--space-2xl); }
  .mf-cahier__phrase { font-size: var(--text-xl); }
  .mf-couv__titre em { font-size: var(--text-xl); }
  .mf-voisinage__grille { grid-template-columns: minmax(0, 1fr); }
  .mf-voisinage__grille > :first-child { grid-row: auto; }
  .mf-entree--photo { min-height: 400px; padding: var(--space-lg); }
  .mf-ecrire__form { padding: var(--space-lg); }
}
@media (max-width: 40rem) {
  .mf-couv__titre em { font-size: var(--text-lg); }
  .mf-lecture__tete h1 { font-size: var(--text-2xl); }
  .mf-prose { font-size: var(--text-md); }
  .mf-signe { grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-md); }
  .mf-signe__photo { width: 64px; height: 64px; }
  .mf-edito__signature--grande img { width: 112px; height: 112px; }
}

/* OUTILS : section fusionnée par l'orchestrateur */
/* OUTILS : feuille des cinq outils et de leur index (chantier des outils).
   À fusionner par l'orchestrateur à la fin de style.css, sous le repère
   « OUTILS : section fusionnée par l'orchestrateur ». Seuls les jetons de
   maquettes/gymdirect/d/tokens.css sont employés ; toutes les classes
   commencent par outil-, et aucune ne reprend un nom des outils de
   la-ville-est-belle. Un seul accent (framboise), un seul rayon (6 px,
   --radius-card), 2 px pour les barres de données, fond clair partout.
   Contrastes (tokens.css) : encre sur papier 17,1:1, encre 2 10,1:1,
   gris 6,1:1 (5,5:1 sur rose), framboise sur papier 5,0:1, papier sur
   framboise 5,1:1. Bord des champs en gris : 6,1:1, au-dessus de 3:1. */

/* ---------- cadre commun ---------- */
.outil-feuille { padding-bottom: var(--section-gap-s); }
.outil-feuille__fil { padding-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.outil-feuille__fil a { color: var(--color-ink-2); }
.outil-ariane { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); }
.outil-feuille h1 { font-size: var(--text-display-s); line-height: 1.02; letter-spacing: -0.03em; max-width: 21ch; hyphens: manual; }
.outil-feuille h2 { letter-spacing: -0.015em; }
.outil-accroche { margin-top: var(--space-md); font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 46ch; }

.outil-saisie { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-xs); row-gap: var(--space-2xs); min-width: 0; }
.outil-saisie > span:first-child { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-ink); }
.outil-saisie input { width: 100%; min-width: 0; min-height: 48px; padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); font-variant-numeric: tabular-nums; transition: border-color var(--dur-micro) var(--ease-out); }
.outil-saisie input::placeholder { color: var(--color-muted); opacity: 1; }
.outil-saisie input:hover { border-color: var(--color-ink-2); }
.outil-saisie input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.outil-saisie input[aria-invalid="true"] { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
.outil-saisie__unite { font-size: var(--text-sm); color: var(--color-muted); }
.outil-alerte { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-error); }

.outil-action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--space-lg); border: 0; border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.outil-action:hover { background: var(--color-focus); }
.outil-action:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.outil-action--discret { min-height: 44px; padding-inline: var(--space-xs); background: transparent; color: var(--color-ink-2); font-weight: 400; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 0.2em; }
.outil-action--discret:hover { background: transparent; color: var(--color-accent); }

.outil-explication { padding-top: var(--space-3xl); }
.outil-explication h2 { margin-top: var(--space-xl); font-size: var(--text-2xl); line-height: 1.1; }
.outil-explication h2:first-child { margin-top: 0; }
.outil-explication p { margin-top: var(--space-sm); max-width: 68ch; }
.outil-voir { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.outil-voir a { color: var(--color-accent); font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.outil-voir a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.outil-reference { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 4px solid var(--color-ink); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }
.outil-reference p { max-width: 75ch; }
.outil-reference a { color: var(--color-ink); }
.outil-medecin { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-3); color: var(--color-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.35; }

/* ---------- index : le sommaire des questions ---------- */
.outil-sommaire { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: start; padding-top: var(--space-xl); }
.outil-sommaire__tete { position: sticky; top: calc(72px + var(--space-lg)); }
.outil-sommaire__tete .outil-explication { padding-top: var(--space-xl); font-size: var(--text-md); color: var(--color-ink-2); }
.outil-sommaire__liste { list-style: none; margin: 0; padding: 0; }
.outil-sommaire__entree { padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.outil-sommaire__entree:first-child { padding-top: 0; border-top: 0; }
.outil-sommaire__lien { display: grid; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; }
.outil-sommaire__question { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1.02; letter-spacing: -0.025em; max-width: 20ch; transition: color var(--dur-micro) var(--ease-out); }
.outil-sommaire__lien:hover .outil-sommaire__question { color: var(--color-accent); }
.outil-sommaire__lien:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; border-radius: var(--radius-card); }
.outil-sommaire__rend { font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); max-width: 48ch; }
.outil-sommaire__source { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- 1. la semaine en sept colonnes ---------- */
.outil-semaine__tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: end; padding-top: var(--space-xl); }
.outil-semaine__repere { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; padding-top: var(--space-md); border-top: 4px solid var(--color-ink); display: grid; gap: var(--space-sm); }
.outil-semaine__repere div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-sm); }
.outil-semaine__repere dt { font-family: var(--font-display); font-weight: 700; color: var(--color-accent); }
.outil-semaine__repere dd { margin: 0; line-height: 1.4; }
.outil-semaine__cadre { padding-top: var(--space-2xl); }
.outil-semaine__age { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin: 0 0 var(--space-lg); padding: 0; border: 0; }
.outil-semaine__age legend { float: left; margin-right: var(--space-md); font-family: var(--font-display); font-weight: 700; }
.outil-semaine__age label, .outil-semaine__coche { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; cursor: pointer; }
.outil-semaine__age input, .outil-semaine__coche input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); }
.outil-semaine__jeune { margin-bottom: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); max-width: 70ch; }
.outil-semaine__jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-sm); }
.outil-semaine__jour { display: grid; align-content: start; gap: var(--space-xs); min-width: 0; margin: 0; padding: var(--space-md) var(--space-sm); border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); }
.outil-semaine__jour legend { float: left; width: 100%; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.outil-semaine__colonne { display: flex; flex-direction: column-reverse; height: 168px; border-bottom: 2px solid var(--color-ink); }
.outil-semaine__mod, .outil-semaine__sout { display: block; width: 100%; height: 0; border-radius: 2px 2px 0 0; }
.outil-semaine__mod { background: var(--color-ink-2); }
.outil-semaine__sout { background: var(--color-accent); }
.outil-semaine__total { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); }
.outil-semaine__jour .outil-saisie { grid-template-columns: minmax(0, 1fr); }
.outil-semaine__jour .outil-saisie input { min-height: 44px; padding-inline: var(--space-xs); }
.outil-semaine__coche { font-size: var(--text-sm); line-height: 1.2; }
.outil-semaine__legende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-semaine__legende .outil-action { margin-left: auto; }
.outil-semaine__puce { display: inline-block; width: 14px; height: 14px; border-radius: 2px; }
.outil-semaine__puce--mod { background: var(--color-ink-2); }
.outil-semaine__puce--sout { background: var(--color-accent); }
.outil-semaine__releve { margin-top: var(--space-2xl); }
.outil-semaine__releve h2 { font-size: var(--text-2xl); }
.outil-semaine__vide { margin-top: var(--space-sm); color: var(--color-muted); }
.outil-semaine__table { width: 100%; margin-top: var(--space-md); border-collapse: collapse; }
.outil-semaine__table th, .outil-semaine__table td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; text-align: left; vertical-align: top; border-bottom: var(--rule-hair) solid var(--color-rule); }
.outil-semaine__table thead th { font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; font-family: var(--font-body); }
.outil-semaine__table tbody th { font-family: var(--font-display); }
.outil-semaine__table td:last-child { font-family: var(--font-display); font-weight: 700; }
.outil-semaine__table tr[hidden] { display: none; }
.outil-semaine__phrase { margin-top: var(--space-md); font-size: var(--text-lead); max-width: 60ch; }

/* ---------- 2. la liste filtrable et la dépense ---------- */
.outil-depense__tete { padding-top: var(--space-xl); }
.outil-depense__cadre { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: start; padding-top: var(--space-2xl); }
.outil-depense__choix { display: grid; gap: var(--space-md); min-width: 0; }
.outil-depense__cherche input { font-family: var(--font-body); font-size: var(--text-lg); }
.outil-depense__familles { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.outil-depense__famille { min-height: 44px; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.outil-depense__famille:hover { border-color: var(--color-ink); }
.outil-depense__famille[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.outil-depense__famille:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.outil-depense__compte { font-size: var(--text-sm); color: var(--color-muted); }
.outil-depense__liste { margin: 0; padding: 0; border: 0; border-top: 4px solid var(--color-ink); max-height: 560px; overflow-y: auto; overscroll-behavior: contain; }
.outil-depense__act { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); min-height: 48px; padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); cursor: pointer; }
.outil-depense__act[hidden] { display: none; }
.outil-depense__act:hover { background: var(--color-paper-2); }
.outil-depense__act:has(input:checked) { background: var(--color-paper-3); }
.outil-depense__act input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); }
.outil-depense__act:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.outil-depense__nom { line-height: 1.3; }
.outil-depense__met { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; }
.outil-depense__rien { padding: var(--space-md) var(--space-sm); color: var(--color-muted); }
.outil-depense__calcul { position: sticky; top: calc(72px + var(--space-lg)); display: grid; gap: var(--space-xs); min-width: 0; }
.outil-depense__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.outil-depense__resultat { margin-top: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-3); }
.outil-depense__attente { color: var(--color-ink-2); }
.outil-depense__resultat > div { display: grid; gap: var(--space-sm); }
.outil-depense__activite { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.2; }
.outil-depense__kcal { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs); font-family: var(--font-display); font-weight: 700; color: var(--color-ink); }
.outil-depense__kcal .num { font-variant-numeric: tabular-nums; font-size: var(--text-display); line-height: 0.9; letter-spacing: -0.04em; color: var(--color-accent); }
.outil-depense__kcal span:last-child { font-size: var(--text-lg); }
.outil-depense__formule { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper); font-family: var(--font-display); font-size: var(--text-md); }
.outil-depense__net, .outil-depense__intensite { line-height: 1.4; }
.outil-depense__code { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- 3. la gourde par paliers ---------- */
.outil-gourde__plan { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: var(--space-2xl); padding-top: var(--space-xl); }
.outil-gourde__tete { grid-column: 1; }
.outil-gourde__profil { grid-column: 1; padding-top: var(--space-2xl); }
.outil-gourde__figure { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: center; gap: var(--space-lg); margin: 0; padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); align-self: start; }
.outil-gourde__question { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); }
.outil-gourde__profils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin: var(--space-md) 0 0; padding: 0; border: 0; }
.outil-gourde__choix { display: flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out); }
.outil-gourde__choix:hover { border-color: var(--color-ink-2); }
.outil-gourde__choix:has(input:checked) { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); font-weight: 700; }
.outil-gourde__choix:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.outil-gourde__choix input, .outil-gourde__case input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); }
.outil-gourde__conditions { display: grid; gap: var(--space-2xs); margin: var(--space-xl) 0 0; padding: 0; border: 0; }
.outil-gourde__conditions legend { margin-bottom: var(--space-xs); }
.outil-gourde__case { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; cursor: pointer; }
.outil-gourde__svg { width: min(100%, 236px); height: auto; overflow: visible; }
.outil-gourde__bouchon { fill: var(--color-ink); }
.outil-gourde__col { fill: var(--color-ink-2); }
.outil-gourde__fond { fill: var(--color-paper); }
.outil-gourde__paroi { fill: none; stroke: var(--color-ink); stroke-width: 3; }
.outil-gourde__palier { fill: var(--color-accent); }
.outil-gourde__hachure { fill: var(--color-ink-2); opacity: 0.55; }
.outil-gourde__grad { stroke: var(--color-ink); stroke-width: 2; }
.outil-gourde__chiffre { fill: var(--color-ink-2); font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.outil-gourde__repere { stroke: var(--color-ink); stroke-width: 2; stroke-dasharray: 6 4; }
.outil-gourde__legende { display: grid; gap: var(--space-xs); text-align: center; max-width: 34ch; }
.outil-gourde__litres { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-s); line-height: 1; letter-spacing: -0.03em; color: var(--color-ink); }
.outil-gourde__plus { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- 4. la grille de l'assiette ---------- */
.outil-assiette__tete { padding-top: var(--space-xl); }
.outil-assiette__cadre { padding-top: var(--space-2xl); }
.outil-assiette__defile { overflow-x: auto; border-top: 4px solid var(--color-ink); }
.outil-assiette__defile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.outil-assiette__grille { width: 100%; min-width: 760px; border-collapse: collapse; }
.outil-assiette__grille th, .outil-assiette__grille td { padding: var(--space-sm) var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: middle; }
.outil-assiette__grille thead th { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-ink-2); text-align: center; }
.outil-assiette__grille thead abbr { text-decoration: none; }
.outil-assiette__grille thead .outil-assiette__coin { text-align: left; }
.outil-assiette__grille tbody th { position: sticky; left: 0; z-index: var(--z-base); width: 34%; padding-right: var(--space-md); background: var(--color-paper); text-align: left; font-weight: 400; }
.outil-assiette__grille tbody tr:nth-child(even) td, .outil-assiette__grille tbody tr:nth-child(even) th { background: var(--color-paper-2); }
.outil-assiette__nom { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.2; }
.outil-assiette__aide { display: block; margin-top: var(--space-3xs); font-size: var(--text-xs); line-height: 1.35; color: var(--color-ink-2); }
.outil-assiette__grille td { text-align: center; }
.outil-assiette__cases { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2xs); }
.outil-assiette__cases--2, .outil-assiette__cases--3 { flex-direction: row; }
.outil-assiette__case { width: 22px; height: 22px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.outil-assiette__case--gras { accent-color: var(--color-ink); }
.outil-assiette__outils { display: flex; justify-content: flex-end; margin-top: var(--space-xs); }
.outil-assiette__bilan { margin-top: var(--space-xl); }
.outil-assiette__bilan h2 { font-size: var(--text-2xl); }
.outil-assiette__vide { margin-top: var(--space-sm); color: var(--color-muted); }
.outil-assiette__lignes { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
.outil-assiette__lignes li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--space-sm); row-gap: var(--space-2xs); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.outil-assiette__marque { grid-row: 1 / span 2; width: 18px; height: 18px; margin-top: 3px; border: 2px solid var(--color-ink); border-radius: 50%; }
.outil-assiette__lignes li[data-etat="atteint"] .outil-assiette__marque { background: var(--color-ink); }
.outil-assiette__lignes li[data-etat="au-dessus"] .outil-assiette__marque { border-color: var(--color-accent); border-radius: 2px; background: var(--color-accent); }
.outil-assiette__quoi { line-height: 1.3; }
.outil-assiette__quoi b { font-family: var(--font-display); }
.outil-assiette__cible { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.outil-assiette__dit { grid-column: 2; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); line-height: 1.35; }
.outil-assiette__lignes li[data-etat="au-dessus"] .outil-assiette__dit { color: var(--color-accent); }

/* ---------- 5. l'échelle de l'IMC ---------- */
.outil-imc__tete { padding-top: var(--space-xl); }
.outil-imc__plan { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-2xl); row-gap: var(--space-xl); align-items: start; padding-top: var(--space-2xl); }
.outil-imc__saisies { grid-row: 1 / span 2; display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); }
.outil-imc__cas { display: grid; gap: var(--space-3xs); margin: var(--space-xs) 0 0; padding: 0; border: 0; }
.outil-imc__cas legend { margin-bottom: var(--space-xs); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.outil-imc__cas label { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; font-size: var(--text-sm); line-height: 1.25; cursor: pointer; }
.outil-imc__cas input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); }
.outil-imc__lecture { min-width: 0; }
.outil-imc__valeur { display: flex; align-items: baseline; gap: var(--space-sm); font-family: var(--font-display); font-weight: 700; }
.outil-imc__valeur .num { font-variant-numeric: tabular-nums; font-size: var(--text-display); line-height: 0.9; letter-spacing: -0.04em; }
.outil-imc__unite { font-size: var(--text-lg); color: var(--color-ink-2); }
.outil-imc__dit { margin-top: var(--space-md); font-size: var(--text-lead); line-height: 1.4; max-width: 56ch; }
.outil-imc__echelle { position: relative; margin-top: var(--space-xl); padding-top: 14px; }
.outil-imc__bandes { display: flex; gap: 3px; height: 44px; }
.outil-imc__bande { flex-basis: 0; border-radius: 2px; background: var(--color-paper-3); transition: background-color var(--dur-short) var(--ease-out); }
.outil-imc__bande--1 { background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); }
.outil-imc__bande.est-ici { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.outil-imc__point { position: absolute; top: 0; width: 28px; height: 28px; margin-left: -14px; border: 4px solid var(--color-paper); border-radius: 50%; background: var(--color-accent); }
.outil-imc__point[hidden] { display: none; }
.outil-imc__graduation { position: relative; height: 1.6em; margin-top: var(--space-2xs); font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-ink-2); }
.outil-imc__graduation span { position: absolute; top: 0; transform: translateX(-50%); }
.outil-imc__legende { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); line-height: 1.3; }
.outil-imc__classe { padding-top: var(--space-xs); border-top: 2px solid var(--color-rule); }
.outil-imc__classe b { display: block; font-family: var(--font-display); }
.outil-imc__classe span { color: var(--color-ink-2); }
.outil-imc__classe.est-ici { border-top-color: var(--color-accent); }
.outil-imc__classe.est-ici b { color: var(--color-accent); }
.outil-imc__limites { grid-column: 2; padding: var(--space-lg); border: 2px solid var(--color-ink); border-radius: var(--radius-card); }
.outil-imc__limites h2 { font-size: var(--text-xl); }
.outil-imc__limites ul { margin: var(--space-sm) 0 0; padding-left: 1.1em; display: grid; gap: var(--space-xs); }
.outil-imc__limites li { line-height: 1.4; }
.outil-imc__limites li::marker { color: var(--color-accent); }

/* ---------- paliers ---------- */
@media (max-width: 60rem) {
  .outil-sommaire, .outil-semaine__tete, .outil-depense__cadre, .outil-gourde__plan, .outil-imc__plan { grid-template-columns: minmax(0, 1fr); }
  .outil-sommaire__tete, .outil-depense__calcul { position: static; }
  .outil-sommaire__liste { margin-top: var(--space-2xl); }
  .outil-semaine__repere { grid-column: 1; grid-row: auto; margin-top: var(--space-xl); }
  .outil-semaine__jours { grid-template-columns: minmax(0, 1fr); }
  .outil-semaine__jour { grid-template-columns: 40px repeat(3, minmax(0, 1fr)); grid-template-areas: "leg leg tot tot" "col m s a" "col r r r" "col e e e"; column-gap: var(--space-sm); align-items: end; }
  .outil-semaine__jour legend { grid-area: leg; float: left; width: auto; }
  .outil-semaine__colonne { grid-area: col; align-self: stretch; height: auto; min-height: 96px; }
  .outil-semaine__total { grid-area: tot; justify-self: end; align-self: center; }
  .outil-semaine__jour label:nth-of-type(1) { grid-area: m; }
  .outil-semaine__jour label:nth-of-type(2) { grid-area: s; }
  .outil-semaine__jour label:nth-of-type(3) { grid-area: a; }
  .outil-semaine__jour label:nth-of-type(4) { grid-area: r; }
  .outil-semaine__jour label:nth-of-type(5) { grid-area: e; }
  .outil-semaine__jour .outil-saisie { grid-template-columns: minmax(0, 1fr); }
  .outil-depense__liste { max-height: 420px; }
  .outil-depense__calcul { margin-top: var(--space-xl); }
  .outil-gourde__tete, .outil-gourde__profil, .outil-gourde__figure { grid-column: 1; grid-row: auto; }
  .outil-gourde__figure { margin-top: var(--space-xl); }
  .outil-imc__saisies, .outil-imc__limites { grid-column: 1; grid-row: auto; }
  .outil-assiette__lignes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .outil-semaine__table thead { display: none; }
  .outil-semaine__table, .outil-semaine__table tbody, .outil-semaine__table tr, .outil-semaine__table th, .outil-semaine__table td { display: block; width: 100%; }
  .outil-semaine__table tr { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .outil-semaine__table th, .outil-semaine__table td { padding: 0; border: 0; }
  .outil-semaine__table td:nth-child(3) { font-size: var(--text-sm); color: var(--color-muted); }
  .outil-gourde__choix { padding-inline: var(--space-sm); font-size: var(--text-sm); }
  .outil-imc__legende { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outil-assiette__grille { min-width: 560px; }
  .outil-assiette__grille tbody th { width: 9.5rem; }
  .outil-semaine__repere div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .outil-imc__bande, .outil-depense__famille, .outil-gourde__choix { transition: none; }
}