/* ═══════════════════════════════════════════════════════════════════════════
   OBJECTIFS — feuille commune des 8 pages de /objectifs/
   Elio 🎨, 04/08/2026.

   D'où ça vient : les 3 couches CSS que chacune des 7 pages persona portait en
   ligne (base + « ETAL-ALIGNE » + « ETAL-FINITION ») ont été FUSIONNÉES ici en
   une seule feuille, valeurs finales retenues. Une 4ᵉ couche est ajoutée :
   « COMPOSITION », qui sort les pages du gabarit (héros propre à chaque page,
   fin des cartes uniformes 3×3, échelle typo, blanc).

   Ce qui reste EN LIGNE dans chaque page : uniquement ses jetons de persona
   (--p-vif / --p-accent / --p-accent-dim) et sa classe de héros. Le <style>
   en ligne vient APRÈS ce <link>, il gagne donc à spécificité égale.

   Contraintes tenues :
   - CSP `style-src 'self' 'unsafe-inline'` → feuille servie depuis /css/ : OK.
   - Aucune ressource externe. La seule webfont est /fonts/bricolage-2.woff2,
     hébergée par nous. Le display est un serif SYSTÈME (aucun téléchargement).
   - `prefers-reduced-motion` coupe animation ET transition, partout.
   - Rien n'est signalé par la couleur seule (les états portent un libellé,
     une bordure ou un pictogramme).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Bricolage Grotesque';
  src:url(/fonts/bricolage-2.woff2) format('woff2');
  font-weight:200 800;font-display:swap;
}

/* ─── 1. Jetons ─────────────────────────────────────────────────────────── */
/* Les jetons ont été DÉPLACÉS dans /css/etal.css le 04/08/2026 (Oignon 🧅).
   Ils étaient identiques, à la valeur près, à ceux de l'accueil sous d'autres
   noms : trois nuanciers pour une seule identité. Un seul vocabulaire désormais.
   Rien n'a changé de valeur — la fusion est un renommage, mesuré au pixel.

   ⚠️ Toute page qui charge cette feuille DOIT charger /css/etal.css AVANT :
       <link rel="stylesheet" href="/css/etal.css">
       <link rel="stylesheet" href="/css/objectifs.css">
   Sans etal.css, aucun jeton n'est défini et la page s'affiche sans couleurs.
   Le contrôle tools/qa/etal-ordre-feuilles.js vérifie cet ordre sur tout le site. */

/* ─── 2. Socle ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img,svg{max-width:100%}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;min-height:44px;display:inline-flex;align-items:center;padding:10px 18px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--surface);padding:10px 16px;border-radius:8px;border:1.5px solid var(--border-fort)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.etroit{max-width:720px;margin-left:auto;margin-right:auto}

/* ─── 3. Typographie — deux voix : serif de titre, grotesque de libellé ─── */
h1,h2,h3{margin:0;font-weight:400}
h1,h2{font-family:var(--serif);letter-spacing:-.018em;text-wrap:balance;hyphens:manual}
h1{font-size:clamp(2.45rem,7.2vw,4.6rem);line-height:1.0;letter-spacing:-.026em}
h2{font-size:clamp(1.7rem,4vw,2.65rem);line-height:1.08;margin:0 0 14px;max-width:22ch}
h3{font-family:var(--grot);font-weight:650;font-size:1.06rem;letter-spacing:0;line-height:1.3}
p{margin:0 0 14px;max-width:66ch}
.lead{font-size:1.1rem;line-height:1.62;color:var(--text-2);max-width:52ch}
/* L'œil de section est un TAMPON : double filet, capitales espacées, rotation. */
.oeil{
  display:inline-block;margin:0 0 20px;padding:7px 14px 6px;
  font-family:var(--grot);font-size:.74rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--p-accent);background:transparent;
  border:2px solid var(--p-accent);border-radius:0;
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--p-accent);
  transform:rotate(-1.2deg);
}
.badge-persona{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--grot);font-size:.74rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--p-accent);background:transparent;
  border:2px solid var(--p-accent);border-radius:0;
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--p-accent);
  padding:7px 14px 6px;margin:0 0 22px;transform:rotate(-1.2deg);
}
.fil{font-family:var(--grot);font-size:.82rem;color:var(--text-2)}
.fil a{color:var(--text-2)}
/* Le blanc est un matériau : la respiration verticale est large et régulière. */
section{padding:clamp(56px,8.5vw,104px) 0;border-top:1.5px solid var(--border)}
section:first-of-type{border-top:0}

/* ─── 4. En-tête — OPAQUE, aucun glassmorphism (interdit « L'Étal ») ────── */
header.nav{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1.5px solid var(--border-fort)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:62px;gap:12px}
.marque{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-family:var(--serif);font-size:1.32rem;color:var(--text);text-decoration:none;letter-spacing:-.01em}
.marque .pastille{width:24px;height:24px;flex:none}
.nav-liens{display:flex;align-items:center;gap:4px}
.nav-liens a{font-family:var(--grot);font-weight:600;color:var(--text-2);text-decoration:none;font-size:.92rem;padding:10px;border-radius:6px;min-height:44px;display:inline-flex;align-items:center}
.nav-liens a:hover{color:var(--text);background:var(--surface-2)}
.nav-liens a.btn{color:#fff;min-height:44px;padding:10px 17px}
/* .secondaire masquait Sources/Blog sous 600px SANS repli — remplacé par le
   menu hamburger de css/nav-mobile.css (`.menu-mobile`/`.menu-btn`). */

/* ─── 5. Boutons — rayon 8 px + ombre dure d'imprimé, aucune pilule ─────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 22px;border-radius:8px;
  font-family:var(--grot);font-size:1rem;font-weight:650;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  box-shadow:var(--shadow);
  transition:transform .18s var(--ease),background-color .18s,border-color .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-1{background:var(--accent-aplat);color:var(--accent-sur)}
.btn-1:hover{background:color-mix(in srgb,var(--accent) 86%,#000)}
.btn-2{background:var(--surface);color:var(--text);border-color:var(--border-fort)}
.btn-2:hover{background:var(--surface-2)}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:480px){.btns{flex-direction:column;align-items:stretch}.btns .btn{width:100%}}
/* Variante « lien » du bouton secondaire : quand la page a besoin d'une seule
   masse de bouton et pas de deux (héros de la perte de poids). */
.btn-lien{
  display:inline-flex;align-items:center;min-height:48px;
  font-family:var(--grot);font-weight:600;font-size:1rem;color:var(--text);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;
  text-decoration-color:var(--p-vif);
}
.dl-note{font-family:var(--grot);font-size:.82rem;color:var(--text-2);margin-top:12px}
/* 20/08 — plus d'exception de thème ici. En Étal, --accent-sur EST le jeton
   du texte posé sur un aplat d'accent, et il bascule seul : #FFFFFF sur
   #814217 (7,71:1) en clair, #231F1B sur #F6A06B (7,92:1) en sombre.
   L'ancienne surcharge #1A0810 était l'encre aubergine de la direction
   magenta : sur la terre cuite elle redevenait un quasi-noir hors jeton. */

/* ─── 6. Héros — squelette commun, chaque page a SA variante (§ 12) ─────── */
.heros{padding:clamp(40px,6vw,76px) 0 clamp(48px,7vw,92px);border-top:0}
.heros .fil{margin:0 0 26px}
.mas{display:block;width:auto;height:100%;color:#2E2B25}
@media (prefers-color-scheme:dark){.mas{color:#000}}
.heros-av{display:flex;align-items:flex-end;justify-content:center}
/* Le mot que le titre met en avant. Il n'ajoute AUCUN texte : il en habille un. */
h1 .accentue{font-style:italic;color:var(--p-accent)}

/* ─── 7. Entrées d'inventaire — remplacent les cartes 3×3 ───────────────── */
/* Une page composée n'aligne pas des boîtes arrondies identiques : elle pose
   des entrées séparées par un filet, libellé à gauche, propos à droite. */
.grille{display:grid;grid-template-columns:1fr;gap:0;margin-top:34px}
.grille .carte{
  background:none;border:0;border-top:1.5px solid var(--border-fort);
  border-radius:0;box-shadow:none;padding:22px 0 26px;
  display:grid;grid-template-columns:1fr;column-gap:48px;
}
.grille .carte:last-child{border-bottom:1.5px solid var(--border-fort)}
.grille .carte h3{margin:0 0 8px}
.grille .carte p{color:var(--text-2);font-size:.98rem;margin:0;max-width:60ch}
.ico{width:34px;height:34px;border-radius:0;display:grid;place-items:center;margin:0 0 12px;color:var(--p-accent);background:transparent;border:1.5px solid var(--p-accent)}
.ico svg{width:18px;height:18px}
@media (min-width:840px){
  .grille .carte{grid-template-columns:minmax(0,15.5rem) minmax(0,1fr);grid-template-rows:auto 1fr}
  .grille .carte .ico{grid-column:1;grid-row:1;align-self:start}
  .grille .carte h3{grid-column:1;grid-row:2;align-self:start}
  .grille .carte p{grid-column:2;grid-row:1/-1;align-self:start}
}

/* ─── 8. L'objet « étiquette de cageot » : la fiche de valeurs sourcées ─── */
.demo{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow);padding:20px;max-width:460px}
.demo-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.demo-tete h3{font-size:1.05rem}
.demo-portion{font-family:var(--grot);font-size:.85rem;color:var(--text-2)}
.demo-code{
  position:relative;display:inline-block;margin:10px 0 16px;
  font-family:var(--mono);font-size:.78rem;color:var(--text-2);
  background:var(--surface);border:1.5px solid var(--border-fort);border-radius:3px;
  padding:9px 12px 8px 28px;box-shadow:var(--shadow);
}
.demo-code::before{content:'';position:absolute;left:9px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border-fort)}
.src{display:inline-flex;align-items:center;gap:6px;font-family:var(--grot);font-size:.72rem;font-weight:700;letter-spacing:.03em;white-space:nowrap}
/* Provenance, pas verdict : pictogramme d'étiquette, jamais une coche. */
.src-sourcee{background:var(--leaf-dim);color:var(--leaf);border:1.5px solid color-mix(in srgb,var(--leaf) 42%,transparent);border-radius:3px;padding:6px 11px}
.src-sourcee svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9}
.lignes{border-top:1.5px solid var(--border)}
.ligne{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:.94rem}
.ligne span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.demo-note{font-size:.8rem;color:var(--text-2);margin:14px 0 0;font-style:italic}

/* ─── 9. Réplique de mascotte ───────────────────────────────────────────── */
.bulle{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1.5px solid var(--p-accent);border-radius:18px 18px 18px 4px;padding:16px 18px;margin:22px 0;max-width:56ch}
.bulle .av{width:52px;height:52px;flex:none;display:flex;align-items:flex-end;justify-content:center}
.bulle .av .mas{height:52px}
.bulle .nom{font-family:var(--grot);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--p-accent);margin:0 0 4px}
.bulle p{margin:0;color:var(--text)}
.notice{background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:16px 18px;font-size:.92rem;color:var(--text-2);max-width:70ch}
.notice a{color:var(--text-2);text-decoration-thickness:1px;display:inline-flex;align-items:center;min-height:44px}

/* ─── 10. Premium ───────────────────────────────────────────────────────── */
.premium-box{background:var(--surface);border:1.5px solid var(--p-accent);border-radius:var(--r-md);padding:30px 26px;box-shadow:var(--shadow)}
.compare{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0}
@media (min-width:680px){.compare{grid-template-columns:1fr 1fr}}
.compare .col{border:1.5px solid var(--border);border-radius:var(--r-sm);padding:18px}
.compare .col.premium{border-color:var(--p-accent);background:var(--p-accent-dim)}
.compare h3{margin-bottom:10px}
.compare ul{margin:0;padding-left:0;list-style:none;display:grid;gap:9px;font-size:.93rem}
.compare li{display:flex;gap:8px;align-items:flex-start}
.compare li svg{width:16px;height:16px;flex:none;margin-top:3px}

/* ─── 11. Index des objectifs — une liste à filets, pas 6 cartes 3×3 ────── */
.hub-grille{display:grid;grid-template-columns:1fr;gap:0;margin-top:30px;border-top:1.5px solid var(--border-fort)}
@media (min-width:900px){.hub-grille{grid-template-columns:1fr 1fr;column-gap:60px}}
.hub-carte{
  display:grid;grid-template-columns:60px minmax(0,1fr);column-gap:16px;
  align-items:center;min-height:84px;padding:18px 2px;
  background:none;border:0;border-bottom:1.5px solid var(--border);border-radius:0;
  box-shadow:none;text-align:left;text-decoration:none;color:inherit;
  transition:padding-left .18s var(--ease),border-color .18s;
}
.hub-carte:hover{padding-left:10px;border-color:var(--p-vif)}
.hub-carte .av{grid-column:1;grid-row:1/3;width:56px;height:48px;display:flex;align-items:flex-end;justify-content:center;margin:0}
.hub-carte .nom{grid-column:2;font-family:var(--serif);font-size:1.16rem;margin:0;line-height:1.2}
.hub-carte .obj{grid-column:2;font-family:var(--grot);font-size:.8rem;color:var(--text-2);margin:2px 0 0;letter-spacing:.01em}

/* ─── 12. Lectures liées (maillage vers le blog) ────────────────────────── */
.lectures{list-style:none;margin:26px 0 0;padding:0;border-top:1.5px solid var(--border-fort);max-width:none}
.lectures li{border-bottom:1.5px solid var(--border)}
.lectures a{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:14px;
  min-height:52px;padding:14px 2px;color:var(--text);text-decoration:none;
  transition:padding-left .18s var(--ease);
}
.lectures a:hover{padding-left:10px}
.lectures a:hover .titre{text-decoration:underline;text-underline-offset:4px}
.lectures .num{font-family:var(--mono);font-size:.76rem;color:var(--p-accent)}
.lectures .titre{font-family:var(--serif);font-size:1.1rem;line-height:1.3}

/* ─── 13. FAQ ───────────────────────────────────────────────────────────── */
.faq details{border-top:1.5px solid var(--border);padding:0}
.faq details:last-child{border-bottom:1.5px solid var(--border)}
.faq summary{
  font-family:var(--grot);font-weight:650;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  min-height:52px;padding:12px 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--serif);font-size:1.4rem;color:var(--p-accent);flex:none}
.faq details[open] summary::after{content:'–'}
.faq p{color:var(--text-2);margin:0 0 16px;font-size:.96rem;max-width:64ch}

/* ─── 14. Pied de page ──────────────────────────────────────────────────── */
footer{border-top:1.5px solid var(--border-fort);padding:34px 0 48px;color:var(--text-2);font-size:.88rem}
footer nav{display:flex;flex-wrap:wrap;gap:6px 4px;margin-bottom:14px}
footer nav a{font-family:var(--grot);color:var(--text-2);text-decoration:none;padding:8px 10px;border-radius:6px;min-height:44px;display:inline-flex;align-items:center}
footer nav a:hover{color:var(--text);background:var(--surface-2)}
footer p{max-width:78ch}

/* ─── 15. Mascottes animées ─────────────────────────────────────────────── */
.masc-svg{overflow:visible}
.masc-svg g{transform-box:fill-box}
.masc-svg .breathe{transform-origin:50% 100%;animation:masc-breathe 4.2s ease-in-out infinite}
.masc-svg .eyes{transform-origin:50% 50%;animation:masc-blink 5.4s infinite}
@keyframes masc-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2.5px) scale(1.02)}}
@keyframes masc-blink{0%,90%,100%{transform:scaleY(1)}94%,96%{transform:scaleY(.12)}}

/* ═══ 16. COMPOSITION — sept héros, sept tensions, la même main ═══════════
   Chacun a UNE prise de risque, à l'endroit qui sert son propos. Aucun
   dégradé de fond, rien de centré, aucune ombre molle, aucun « bento ».
   ═══════════════════════════════════════════════════════════════════════ */

/* 16.1 ÉQUILIBRE — « l'établi ». Le titre et la mascotte posent sur un même
   comptoir : un filet d'encre qui file jusqu'au bord droit de l'écran. */
.h-equilibre{overflow:clip}   /* clip et non hidden : ne casse pas le sticky de l'en-tête */
.h-equilibre .etal{display:grid;grid-template-columns:minmax(0,1fr);align-items:end;gap:8px;position:relative}
.h-equilibre .comptoir{position:relative;padding-bottom:22px}
.h-equilibre .comptoir::after{
  content:'';position:absolute;left:0;bottom:0;height:3px;background:var(--p-vif);
  width:100vw;                     /* déborde volontairement du conteneur */
}
.h-equilibre .heros-av{justify-content:flex-start;height:132px}
.h-equilibre .heros-av .mas{height:132px}
.h-equilibre .lead{margin:30px 0 0}
@media (min-width:900px){
  .h-equilibre{overflow:clip}   /* clip et non hidden : ne casse pas le sticky de l'en-tête */
.h-equilibre .etal{grid-template-columns:minmax(0,1fr) 190px;column-gap:40px}
  .h-equilibre .heros-av{height:196px;justify-content:center}
  .h-equilibre .heros-av .mas{height:196px}
  .h-equilibre .lead{margin-left:0;max-width:44ch}
}

/* 16.2 PERTE DE POIDS — « le retrait ». La page enlève au lieu d'ajouter :
   large marge à gauche, un seul bouton plein, beaucoup de vide autour. */
.h-retrait{padding-top:clamp(48px,9vw,120px);padding-bottom:clamp(64px,11vw,150px)}
.h-retrait .colonne{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.h-retrait .heros-av{justify-content:flex-start;height:104px;margin-bottom:22px}
.h-retrait .heros-av .mas{height:104px}
.h-retrait h1{max-width:14ch}
.h-retrait .lead{margin-top:28px;max-width:38ch}
.h-retrait .btns{margin-top:36px}
@media (min-width:900px){
  .h-retrait .colonne{grid-template-columns:150px minmax(0,1fr);column-gap:72px}
  .h-retrait .heros-av{grid-column:1;grid-row:1/3;height:150px;align-self:start;margin:6px 0 0}
  .h-retrait .heros-av .mas{height:150px}
  .h-retrait .bloc{grid-column:2}
}

/* 16.3 MUSCULATION — « la série ». Tampon d'objectif tourné à la verticale
   dans la gouttière, mascotte recadrée par le bord droit de la section. */
.h-serie{position:relative;overflow:clip}
.h-serie .rang{display:grid;grid-template-columns:minmax(0,1fr);gap:0;position:relative}
.h-serie .heros-av{justify-content:flex-start;height:128px;margin-bottom:20px}
.h-serie .heros-av .mas{height:128px}
.h-serie .lead{margin-top:26px}
@media (min-width:960px){
  .h-serie .rang{grid-template-columns:64px minmax(0,1fr) 250px;column-gap:36px;align-items:end}
  .h-serie .badge-persona{
    grid-column:1;grid-row:1/3;writing-mode:vertical-rl;transform:rotate(180deg);
    justify-self:start;align-self:end;margin:0;
  }
  .h-serie .bloc{grid-column:2}
  .h-serie .heros-av{grid-column:3;grid-row:1/3;height:280px;margin:0;
    justify-content:flex-start;transform:translateX(18%)}
  .h-serie .heros-av .mas{height:280px}
}

/* 16.4 PRISE DE MASSE — « l'escalier ». Le titre grossit ligne après ligne :
   la forme dit « plus » avant que le texte ne le dise. Aucun mot ajouté. */
.h-escalier h1{display:block;line-height:1.02}
.h-escalier h1 .m1{display:block;font-size:.56em;letter-spacing:-.01em}
.h-escalier h1 .m2{display:block;font-size:.8em}
.h-escalier h1 .m3{display:block;font-size:1em}
.h-escalier .heros-av{justify-content:flex-start;height:120px;margin-bottom:18px}
.h-escalier .heros-av .mas{height:120px}
.h-escalier .lead{margin-top:30px}
@media (min-width:900px){
  .h-escalier .rang{display:grid;grid-template-columns:minmax(0,1fr) 200px;column-gap:44px;align-items:end}
  .h-escalier .heros-av{grid-column:2;grid-row:1/3;height:240px;margin:0;align-self:end}
  .h-escalier .heros-av .mas{height:240px}
  .h-escalier .bloc{grid-column:1}
}

/* 16.5 ENDURANCE — « la ligne ». Un filet horizontal traverse toute la
   largeur de l'écran sous le titre, avec ses repères ; la mascotte marche
   dessus. La distance est le sujet, la ligne est la forme. */
.h-ligne{overflow:clip}
.h-ligne .piste{position:relative;margin:96px 0 0;height:64px}   /* la mascotte monte de 84 px au-dessus du filet : on lui laisse la place */
.h-ligne .piste::before{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  top:32px;width:100vw;height:2px;background:var(--border-fort);
}
.h-ligne .repere{position:absolute;top:22px;width:2px;height:22px;background:var(--p-vif)}
.h-ligne .heros-av{position:absolute;bottom:30px;height:118px;justify-content:center}
.h-ligne .heros-av .mas{height:118px}
.h-ligne .lead{margin-top:34px}
@media (min-width:900px){
  .h-ligne .piste{height:96px;margin-top:124px}   /* mascotte 172 px, bas a 30 px : 106 px de tirant d'air */
  .h-ligne .piste::before{top:64px}
  .h-ligne .repere{top:54px;height:22px}
  .h-ligne .heros-av{bottom:30px;height:172px}
  .h-ligne .heros-av .mas{height:172px}
}

/* 16.6 APRÈS 65 ANS — « la lisibilité ». La prise de risque, ici, c'est de
   n'en prendre aucune : une seule colonne, un corps de texte plus grand,
   un interlignage large, zéro effet. La sobriété EST la composition. */
body.p-lisible{font-size:18.5px;line-height:1.72}
body.p-lisible .lead{font-size:1.16rem;line-height:1.7}
body.p-lisible .grille .carte p,body.p-lisible .faq p{font-size:1.03rem}
body.p-lisible .btn{min-height:54px;font-size:1.05rem;padding:15px 26px}
body.p-lisible .faq summary{min-height:58px;font-size:1.05rem}
.h-lisible .heros-av{justify-content:flex-start;height:150px;margin-bottom:26px}
.h-lisible .heros-av .mas{height:150px}
.h-lisible h1{max-width:17ch;line-height:1.06}
.h-lisible .lead{margin-top:28px;max-width:44ch}
.h-lisible .btns{margin-top:34px}
@media (min-width:900px){
  .h-lisible .heros-av{height:184px}
  .h-lisible .heros-av .mas{height:184px}
}

/* 16.7 RAMADAN — « la journée coupée en deux ». Un filet vertical sépare le
   champ du titre du champ du propos, comme la journée se sépare entre le
   repas d'avant l'aube et celui de la rupture. La mascotte enjambe le filet. */
.h-partage .deux{display:grid;grid-template-columns:minmax(0,1fr);gap:0;position:relative}
.h-partage .cote-a{padding-bottom:28px;border-bottom:1.5px solid var(--border-fort)}
.h-partage .cote-b{padding-top:28px;position:relative}
.h-partage .heros-av{justify-content:flex-start;height:126px;margin-bottom:22px}
.h-partage .heros-av .mas{height:126px}
.h-partage .cote-b .lead{margin:0}
@media (min-width:900px){
  .h-partage .deux{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:56px}
  .h-partage .cote-a{padding:0 56px 0 0;border-bottom:0;border-right:1.5px solid var(--border-fort)}
  .h-partage .cote-b{padding:8px 0 0}
  .h-partage .heros-av{position:absolute;left:-88px;top:-6px;margin:0;height:176px;z-index:2}
  .h-partage .heros-av .mas{height:176px}
  .h-partage .cote-b .lead{padding-top:190px}
}

/* ─── 17. Mouvement — coupé net, sans exception ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:hover,.hub-carte:hover,.lectures a:hover{transform:none;padding-left:2px}
  .btn:hover{padding-left:22px}
  .masc-svg *,.masc-svg{animation:none!important}
}

/* ─── 18. Encadré d'alerte — jamais signalé par la seule couleur : filet
   épais à gauche + amorce en gras dans le texte + fond ambré. ──────────── */
.notice.alerte{
  background:var(--warn-dim);
  border-color:color-mix(in srgb,var(--warn) 38%,transparent);
  border-left:5px solid var(--warn);
  color:var(--text);
}
.notice.alerte strong{color:var(--text)}

/* ═══ 19. HUB /objectifs/ — sa propre composition, distincte des sept ═════
   Héros « line-up » : un chiffre 7 en contour, et les sept personnages
   alignés sur un même filet, qui EST la navigation (pas une frise déco).
   ═══════════════════════════════════════════════════════════════════════ */
.h-lineup .titre-bloc{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.h-lineup .chiffre{
  display:block;font-family:var(--serif);font-size:clamp(5rem,14vw,11rem);
  line-height:.76;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:2px var(--p-vif);
}
@supports not (-webkit-text-stroke:1px #000){.h-lineup .chiffre{color:var(--p-accent)}}
.h-lineup h1{max-width:17ch}
.h-lineup .lead{margin-top:28px;max-width:58ch;font-size:1.16rem}
@media (min-width:900px){
  .h-lineup .titre-bloc{grid-template-columns:auto minmax(0,1fr);column-gap:36px;align-items:end}
}
/* Le line-up : filet continu, un personnage par case, sans boîte. */
.frise{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:clamp(40px,6vw,64px) 0 0;list-style:none;padding:0}
@media (min-width:760px){.frise{grid-template-columns:repeat(7,minmax(0,1fr))}}
.frise li{margin:0}
.lu{display:block;text-decoration:none;color:inherit;padding:0 6px 14px;min-height:44px;transition:transform .2s var(--ease)}
.lu:hover{transform:translateY(-3px)}
.lu .av{display:flex;align-items:flex-end;justify-content:center;height:82px;border-bottom:3px solid var(--border-fort);padding-bottom:2px}
.lu:hover .av{border-bottom-color:var(--p-vif)}
.lu .num{display:block;font-family:var(--mono);font-size:.7rem;color:var(--p-accent);margin-top:9px}
.lu .nm{display:block;font-family:var(--serif);font-size:1.02rem;line-height:1.2;margin-top:2px}
.lu .ob{display:block;font-family:var(--grot);font-size:.72rem;color:var(--text-2);line-height:1.3;margin-top:2px}
@media (min-width:760px){.lu .av{height:104px}}

/* L'index éditorial : sept entrées à filet, numérotées, jamais des cartes. */
.index-obj{list-style:none;margin:34px 0 0;padding:0;border-top:1.5px solid var(--border-fort)}
.index-obj li{border-bottom:1.5px solid var(--border)}
.index-obj a{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;
  padding:22px 2px 24px;color:inherit;text-decoration:none;
  transition:padding-left .2s var(--ease);
}
.index-obj a:hover{padding-left:12px}
.index-obj .av{grid-column:1;grid-row:1/4;width:76px;height:86px;display:flex;align-items:flex-end;justify-content:center}
.index-obj .num{grid-column:2;font-family:var(--mono);font-size:.72rem;color:var(--p-accent);letter-spacing:.06em}
.index-obj .titre{grid-column:2;font-family:var(--serif);font-size:clamp(1.35rem,3.2vw,1.9rem);line-height:1.12;margin:4px 0 0}
.index-obj a:hover .titre{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;text-decoration-color:var(--p-vif)}
.index-obj .dit{grid-column:2;color:var(--text-2);font-size:.98rem;margin:8px 0 0;max-width:56ch}
@media (min-width:760px){
  .index-obj a{grid-template-columns:110px minmax(0,1fr);column-gap:32px}
  .index-obj .av{width:110px;height:112px}
}

/* ═══ 21. PAGES DE PROVENANCE — /sources.html (et institutionnelles) ══════
   Elio 🎨, 04/08/2026. Cette feuille est ÉTENDUE, pas dupliquée : sources.html
   charge le même /css/objectifs.css que les sept pages objectif, et n'ajoute en
   ligne que ses jetons de persona (Oli, prune).

   Pourquoi une grammaire propre : une page de provenance ne se compose pas
   comme une page d'objectif. Elle n'a pas à convaincre, elle a à se laisser
   VÉRIFIER. D'où : une source principale traitée comme une pièce d'archive
   (cadre, tampon, licence lisible), des sources d'appoint en filets, une
   réglette qui montre ce qu'on ne sait pas, et une fiche annotée qui apprend
   à lire une provenance en trois secondes.
   ═══════════════════════════════════════════════════════════════════════ */

/* 21.1 Héros « le registre » : le chiffre mesuré tient la page, pas une
   promesse. Contour, comme le 7 du line-up — même main, autre propos. */
.h-registre .registre{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:end}
.h-registre h1{max-width:15ch}
.h-registre .lead{margin-top:26px;max-width:56ch;font-size:1.16rem}
.compteur{border-top:3px solid var(--p-vif);padding-top:14px}
.compteur .n{
  display:block;font-family:var(--serif);font-size:clamp(3.6rem,11vw,6.4rem);
  line-height:.84;letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:2px var(--p-vif);font-variant-numeric:tabular-nums;
}
@supports not (-webkit-text-stroke:1px #000){.compteur .n{color:var(--p-accent)}}
.compteur .q{display:block;font-family:var(--grot);font-size:.86rem;line-height:1.4;color:var(--text-2);margin-top:12px;max-width:30ch}
@media (min-width:900px){
  .h-registre .registre{grid-template-columns:minmax(0,1fr) 280px;column-gap:56px}
}

/* 21.2 La réglette : ventilation de la base. Aucun segment n'est identifié
   par sa seule couleur — chacun porte une TRAME distincte, et la légende
   répète libellé + effectif + part en clair. */
.reglette{display:flex;height:38px;margin:30px 0 0;border:1.5px solid var(--border-fort);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow)}
.reglette span{display:block;border-right:1.5px solid var(--border-fort);min-width:3px}
.reglette span:last-child{border-right:0}
.f-source{background:var(--leaf)}
.f-estime{background:var(--warn-dim);background-image:repeating-linear-gradient(45deg,var(--warn) 0 3px,transparent 3px 8px)}
.f-marque{background:var(--info-dim);background-image:radial-gradient(var(--info) 1.4px,transparent 1.5px);background-size:8px 8px}
.f-recette{background:var(--surface-3);background-image:repeating-linear-gradient(0deg,var(--text-2) 0 1.5px,transparent 1.5px 7px)}
.legende{list-style:none;margin:26px 0 0;padding:0;border-top:1.5px solid var(--border-fort)}
.legende li{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;
  column-gap:14px;align-items:baseline;
  padding:14px 2px;border-bottom:1.5px solid var(--border);
}
.legende .ech{width:22px;height:22px;border:1.5px solid var(--border-fort);border-radius:2px;align-self:center}
.legende .qui{font-family:var(--grot);font-weight:650;font-size:.98rem}
.legende .quoi{grid-column:2;font-size:.9rem;color:var(--text-2);margin:4px 0 0;max-width:56ch}
.legende .cb{font-family:var(--mono);font-size:.92rem;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.legende .cb small{display:block;font-family:var(--grot);font-size:.74rem;color:var(--text-2);margin-top:3px}

/* 21.3 La source principale : une pièce d'archive, pas une carte de plus.
   Cadre net, tampon en haut à droite, licence et non-affiliation lisibles. */
.piece{
  position:relative;background:var(--surface);max-width:880px;
  border:2px solid var(--border-fort);border-radius:var(--r-md);
  box-shadow:var(--shadow);padding:clamp(24px,4vw,38px);margin-top:12px;
}
.piece .tampon{
  display:inline-block;margin:0 0 18px;padding:7px 14px 6px;
  font-family:var(--grot);font-size:.72rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--p-accent);
  border:2px solid var(--p-accent);border-radius:0;
  box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--p-accent);
  transform:rotate(-1.2deg);
}
.piece h2{font-size:clamp(1.6rem,3.6vw,2.3rem);margin-bottom:10px}
.piece .sous{font-family:var(--grot);font-size:.9rem;color:var(--text-2);margin:0 0 18px}
.piece p{max-width:62ch}
/* L'état civil de la source : couples clé/valeur en filets, jamais en prose. */
.etatcivil{list-style:none;margin:22px 0;padding:0;border-top:1.5px solid var(--border)}
.etatcivil li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:11px 0;border-bottom:1px solid var(--border)}
.etatcivil dt,.etatcivil .k{font-family:var(--grot);font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-2)}
.etatcivil .v{font-size:.98rem;overflow-wrap:anywhere}
@media (min-width:620px){
  .etatcivil li{grid-template-columns:15rem minmax(0,1fr);column-gap:24px;align-items:baseline}
}
/* Le lien de l'état civil doit tenir 44 px comme les autres cibles : la marge
   négative absorbe le rembourrage, la ligne du tableau ne bouge pas. */
.etatcivil .aller{
  display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;
  font-family:var(--grot);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;
}
/* Lien EN PLEIN TEXTE : même astuce, pour ne pas casser le fil de la phrase. */
.cible{display:inline-block;padding:13px 2px;margin:-13px 0;min-height:44px;line-height:18px}

/* 21.4 Sources d'appoint et barèmes : entrées à filets, numérotées. Une
   liste hiérarchise ; cinq cartes identiques n'ont hiérarchisé personne. */
.entrees{list-style:none;margin:28px 0 0;padding:0;border-top:1.5px solid var(--border-fort)}
.entrees>li{border-bottom:1.5px solid var(--border);padding:22px 2px 24px}
.entrees .num{font-family:var(--mono);font-size:.72rem;color:var(--p-accent);letter-spacing:.06em}
.entrees h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2.6vw,1.55rem);line-height:1.2;margin:5px 0 0}
.entrees .role{font-family:var(--grot);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin:8px 0 0}
.entrees p{color:var(--text-2);font-size:.98rem;margin:9px 0 0;max-width:62ch}
.entrees .aller{
  display:inline-flex;align-items:center;min-height:44px;margin-top:6px;
  font-family:var(--grot);font-size:.92rem;font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;
}
@media (min-width:840px){
  .entrees>li{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);column-gap:48px}
  .entrees>li>.num,.entrees>li>h3,.entrees>li>.role{grid-column:1}
  .entrees>li>p,.entrees>li>.aller{grid-column:2;margin-top:0}
  .entrees>li>p+p{margin-top:12px}
  .entrees>li>.aller{margin-top:10px}
}

/* 21.5 La marche à suivre : trois pas numérotés, gros chiffre en serif. */
.marche{list-style:none;counter-reset:pas;margin:30px 0 0;padding:0;display:grid;gap:0;border-top:1.5px solid var(--border-fort)}
.marche li{
  counter-increment:pas;display:grid;grid-template-columns:64px minmax(0,1fr);
  column-gap:20px;padding:22px 2px 24px;border-bottom:1.5px solid var(--border);
}
.marche li::before{
  content:counter(pas);font-family:var(--serif);font-size:2.4rem;line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px var(--p-vif);
}
@supports not (-webkit-text-stroke:1px #000){.marche li::before{color:var(--p-accent)}}
.marche h3{margin:0 0 6px}
.marche p{margin:0;color:var(--text-2);font-size:.96rem;max-width:58ch}

/* 21.6 La fiche annotée : la démo de l'accueil, avec des repères numérotés
   et une légende qui répète la cible en toutes lettres (pas d'ancrage visuel
   seul). Le repère est décoratif ; la légende porte l'information. */
.annotee{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:start;margin-top:30px}
@media (min-width:920px){.annotee{grid-template-columns:minmax(0,460px) minmax(0,1fr);column-gap:52px}}
.marq{
  display:inline-grid;place-items:center;width:22px;height:22px;flex:none;
  border:1.5px solid var(--p-accent);border-radius:50%;
  font-family:var(--mono);font-size:.72rem;color:var(--p-accent);
  vertical-align:middle;margin-left:8px;
}
.reperes{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--border-fort)}
.reperes li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:14px;padding:15px 2px;border-bottom:1.5px solid var(--border)}
.reperes .marq{margin:2px 0 0}
.reperes b{font-family:var(--grot);font-size:.95rem;display:block;margin-bottom:3px}
.reperes p{margin:0;font-size:.93rem;color:var(--text-2)}
/* Les deux mentions particulières de la fiche. Jamais la couleur seule :
   « valeur approchée » est en italique et libellée, « non renseigné » est
   écrit en toutes lettres à la place du nombre. */
.demo .approche{font-style:italic;color:var(--warn);font-weight:600}
.demo .absente{color:var(--text-2);font-weight:600;font-style:italic}
.demo .ligne em{font-style:italic;color:var(--text-2);font-weight:400;font-size:.88em}

/* 21.8 Document juridique (/legal.html) — deux voix, texte verbatim.
   Le corps garde la mise en page d'un DOCUMENT : titres numérotés, sommaire
   ancré, paragraphes en pleine largeur de lecture. Aucune carte. */
.doc h2{font-size:clamp(1.35rem,3vw,1.85rem);margin:0 0 12px;max-width:30ch;scroll-margin-top:80px}
.doc>section{padding:26px 0;border-top:1.5px solid var(--border);border-bottom:0}
.doc>section:first-of-type{border-top:1.5px solid var(--border-fort)}
.doc p,.doc li{max-width:70ch}
.doc ul{margin:0 0 14px;padding-left:0;list-style:none}
.doc ul li{position:relative;padding-left:22px;margin-bottom:10px}
.doc ul li::before{content:'';position:absolute;left:2px;top:.68em;width:8px;height:2px;background:var(--p-vif)}
/* Sommaire : la seule vraie amélioration d'usage sur un document long. */
.sommaire{list-style:none;margin:26px 0 0;padding:0;border-top:1.5px solid var(--border-fort);columns:1}
@media (min-width:700px){.sommaire{columns:2;column-gap:44px}}
.sommaire li{break-inside:avoid;border-bottom:1.5px solid var(--border)}
.sommaire a{
  display:grid;grid-template-columns:2.4rem minmax(0,1fr);align-items:baseline;
  min-height:48px;padding:12px 2px;color:var(--text);text-decoration:none;
  font-family:var(--grot);font-size:.94rem;transition:padding-left .18s var(--ease);
}
.sommaire a:hover{padding-left:8px;text-decoration:underline;text-underline-offset:4px}
.sommaire .n{font-family:var(--mono);font-size:.74rem;color:var(--p-accent)}
/* Sélecteur de langue — segmenté, jamais une pilule, jamais la couleur seule :
   l'état actif porte un fond plein ET une bordure épaisse ET une graisse. */
.langue{display:inline-flex;border:1.5px solid var(--border-fort);border-radius:var(--r-sm);overflow:hidden}
.langue button{
  min-height:44px;min-width:52px;padding:10px 14px;cursor:pointer;
  font-family:var(--grot);font-size:.86rem;font-weight:600;letter-spacing:.04em;
  background:var(--surface);color:var(--text-2);border:0;
  border-right:1.5px solid var(--border-fort);
}
.langue button:last-child{border-right:0}
.langue button.on{background:var(--p-accent);color:var(--surface);font-weight:750}
@media (prefers-color-scheme:dark){.langue button.on{color:var(--accent-sur)}}

/* 21.7 Dernière révision : une ligne d'ourlet, pas un paragraphe. */
.ourlet{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  font-family:var(--grot);font-size:.82rem;color:var(--text-2);
  border-top:1.5px solid var(--border);padding-top:14px;margin-top:30px;
}
.ourlet b{color:var(--text);font-weight:650}
/* Après une liste à filets, l'ourlet n'ajoute PAS un second trait parallèle. */
.marche+.ourlet,.legende+.ourlet,.entrees+.ourlet{border-top:0;margin-top:18px}

/* ─── 20. Cibles tactiles — mesures Puppeteer, viewport 375 ─────────────── */
/* Le fil d'Ariane et le lien d'evitement mesuraient 16 et 27,5 px de haut.
   La boite grandit a 44 px sans decaler la mise en page (marge negative). */
.fil a{display:inline-block;padding:14px 2px;margin:-14px 0;min-height:44px;line-height:16px}
.skip:focus{min-height:44px}