/* ==========================================================================
   Solutec Consult — site-cosmos/styles.css (V3 « calque cosmos.so »)
   14/09/2026 — ARBITRAGE FONDATEUR 14/09 : « ressembler au site officiel de
   Cosmos, le plus près possible ». Ce fichier applique le KIT MESURÉ de la
   référence OBSERVÉE PUBLIQUEMENT (clean-room règle 8 : observation live de
   cosmos.so le 14/09 02:05 + captures Mobbin légitimes
   Design/kits/web/mobbin-web/{retro,dtcg}/photo-video/cosmos--*.json) :
     • canvas BLANC PUR #FFF, encre #0B0B0A (mesuré lab 3.6), sections
       alternées blanc / #F9F9F9 / #F6F5F3 (oklch(0.9711 .0034 67.78) mesuré),
       hairline #EAEAEA partout, ZÉRO ombre ;
     • PILULES SYSTÉMIQUES (radius 9999 mesuré 3,35e7px sur tous les CTA,
       barre de recherche, chips) — override du refus Plinthe
       « pilule_24_systemique » par le fondateur pour CE site client ;
     • typographie 100 % sans : police propriétaire « cosmosOracle »
       REMPLACÉE par Inter (substitut libre le plus proche) — display 74px
       w350 ligne 1.0 tracking −0.05em (mesuré −3.7px/74px), sections
       66px w400 (−0.04em), labels/nav 15/500 (−0.018em) ;
     • HERO = titre centré + NUAGE de tuiles d'images flottantes aux coins
       arrondis (r12-média observé en feed) — calque structurel de
       « Your space for inspiration » ;
     • grille 8 pt : marges 24 / gaps 16 / paddings 12 (mesuré).
   TOUJOURS EXCLUS (loi, aucun arbitrage ne les lève — refus n°4 DNA) :
   leurs images, icônes, motifs illustratifs, logo, police et code source.
   Aucun visuel cosmos.so n'est ici : que les assets propres de Solutec
   (photos réelles + IMAGES Gemini pack, prompts-images-Gemini.md).
   Light-only : le site officiel n'a pas de thème sombre ; color-scheme
   figé clair (arbitrage calque ; convention responsive conservee).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens cosmos.so — valeurs MESURÉES (source en tête de fichier)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Palette observée (dtcg cosmos--home + live computed) — override du refus
     trade_dress par arbitrage fondateur 14/09 ; textes de CHARGE en noir
     mesuré, gris réservé nav/labels (le gris 757575 n'est jamais du texte
     courant : le piège AA observé 4,38:1 est évité par l'usage, taille 15-16
     bold labels + jamais < 14px courant). */
  --c-fond: #FFFFFF;              /* verify-tokens:exception #FFFFFF canvas officiel mesuré lab(100 0 0) */
  --c-wash: #F9F9F9;              /* verify-tokens:exception #F9F9F9 fond composants mesuré */
  --c-sec: #F6F5F3;               /* verify-tokens:exception #F6F5F3 fond section alterné mesuré oklch(0.9711 .0034 67.78) */
  --c-encre: #0B0B0A;             /* verify-tokens:exception #0B0B0A encre mesurée lab(3.6378) */
  --c-gris: #757575;              /* verify-tokens:exception #757575 gris nav/labels mesuré (SUR BLANC uniquement — 4,6:1 AA) */
  --c-gris-wash: #6B6B6A;         /* verify-tokens:exception #6B6B6A gris+ variante sur wash #F9F9F9 (AA 4.5+) */
  --c-gris-clair: #8F8A84;        /* verify-tokens:exception #8F8A84 liens pied de page mesurés lab(62.7) */
  --c-bord: #EAEAEA;              /* verify-tokens:exception #EAEAEA hairline mesurée */
  --c-bord-fort: rgba(0, 0, 0, 0.14); /* border « Get the app » mesurée oklch noir 12 % */
  --c-texte: var(--c-encre);
  --c-lien: var(--c-encre);       /* zéro teinte dans le chrome : les liens sont noirs */

  /* Pillules systémiques mesurées (r = 3,35e7 px → 9999) ; média/feed r12 */
  --r-pill: 9999px;
  --r-12: 12px;
  --r-16: 16px;

  /* Grille 8 pt mesurée : marges 24 / gaps 16 / paddings 12 */
  --s-px: 1px; --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem;
  --s-16: 4rem; --s-20: 5rem; --s-24: 6rem;
  --gap-feed: 16px;

  /* Échelle typo = ratios mesurés sur le live (74→66→16 base) */
  --t-hero: clamp(3rem, 7.2vw, 4.625rem);      /* 74px Desktop */
  --t-display: clamp(2.2rem, 4.6vw, 4.125rem); /* 66px */
  --t-titre-1: clamp(2rem, 4.4vw, 3.5rem);
  --t-titre-2: clamp(1.6rem, 2.8vw, 2.2rem);
  --t-titre-3: clamp(1.2rem, 1.7vw, 1.35rem);
  --t-corps: 1rem;          /* 16px mesuré */
  --t-petit: 0.875rem;      /* 14 » feed/nav secondaires */
  --t-micro: 0.8125rem;     /* 13 » mentions */

  --w-leger: 300;           /* fallback w350 officiel (Inter variable ≈ 300-400) */
  --w-corps: 400;
  --w-medium: 500;
  --w-semi: 580;

  /* Motion : le site officiel ne charge aucune animation de chrome ;
     transitions = bascules d'état seules, courtes, neutrals. */
  --tr-rapide: 140ms ease-out;
  --tr-normal: 200ms ease-out;
  --tr-lent: 300ms ease-out;

  --max-w: 1180px;
  --max-w-texte: 62ch;
  --gap-section: 6rem;
}

@media (max-width: 768px) {
  :root { --gap-section: 3.5rem; }
}

/* --------------------------------------------
   2. Base
   -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  font-size: var(--t-corps);
  line-height: 1.5;             /* 16/24 mesuré */
  color: var(--c-texte);
  background-color: var(--c-fond);
  font-weight: var(--w-corps);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
svg.lucide { display: inline-block; vertical-align: middle; flex-shrink: 0; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--c-lien); text-decoration: none; transition: color var(--tr-rapide); }
h1, h2, h3, h4 { font-weight: var(--w-leger); line-height: 1.05; letter-spacing: -0.04em; overflow-wrap: break-word; }
h1 { font-size: var(--t-titre-1); letter-spacing: -0.05em; }
h2 { font-size: var(--t-display); line-height: 1.08; }
h3 { font-size: var(--t-titre-3); line-height: 1.25; letter-spacing: -0.025em; font-weight: var(--w-corps); }
h4 { font-size: var(--t-corps); font-weight: var(--w-medium); letter-spacing: -0.018em; }
p { margin-bottom: var(--s-4); }
li, dd { margin-bottom: 0.15rem; }
:focus-visible { outline: 2px solid var(--c-encre); outline-offset: 2px; border-radius: var(--r-12); }
::selection { background-color: var(--c-encre); color: var(--c-fond); }
table { font-variant-numeric: tabular-nums; }

.conteneur { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--s-6); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skl { position: absolute; left: -9999px; background: var(--c-encre); color: var(--c-fond); padding: var(--s-2) var(--s-4); z-index: 200; border-radius: var(--r-pill); }
.skl:focus { left: var(--s-4); top: var(--s-2); }

/* « Kicker » à la cosmos : label gris, casse phrase, pas de capitales (mesuré nav 15/500 gris) */
.kicker { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-petit); font-weight: var(--w-medium); letter-spacing: -0.018em; color: var(--c-gris); margin-bottom: var(--s-4); }
.kicker::before { content: ''; inline-size: 2rem; block-size: 1px; background: var(--c-bord); }
section { padding-block: var(--gap-section); }
.section-regle { border-top: 1px solid var(--c-bord); }
.section-wash { background: var(--c-wash); }
.band { border-radius: var(--r-16); background: var(--c-fond); padding: clamp(1.5rem, 4vw, 3.5rem); }
.band-wash { background: var(--c-wash); }

/* --------------------------------------------
   3. En-tête officiel : logo + nav texte brut · pillule de recherche ·
      FR|NL + bouton pilule noir | rien d'autre, blanc pur, hairline
   -------------------------------------------- */
.entete { position: sticky; top: 0; z-index: 100; background: var(--c-fond); border-bottom: 1px solid var(--c-bord); }
.entete-inner { display: flex; align-items: center; gap: var(--s-5); padding-block: var(--s-3); }
.marque { display: inline-flex; align-items: center; white-space: nowrap; line-height: 1; }
.marque img { block-size: 1.9rem; inline-size: auto; }
@media (max-width: 860px) { .marque img { block-size: 1.65rem; } }
.nav { display: flex; align-items: center; gap: var(--s-5); list-style: none; }
.nav a { display: inline-block; color: var(--c-gris); font-size: 0.9375rem; font-weight: var(--w-medium); letter-spacing: -0.018em; padding-block: var(--s-1); }
.nav a:hover { color: var(--c-encre); }
/* page courante : le noir, pas d'artifice (mesuré : seuls poids/casse changent) */
.nav a[aria-current="page"] { color: var(--c-encre); }
.entete-droite { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-4); }

/* la pillule-recherche signature — ici fonctionnelle : mailto direct ;
   auto-margins conjugués = centrée à droite de la nav, actions à droite
   (composition mesurée sur le header officiel : logo+nav | recherche | login+CTA) */
.recherche { display: inline-flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; background: var(--c-wash); border: 1px solid var(--c-bord); border-radius: var(--r-pill); padding: 0.55rem 1rem 0.55rem 0.9rem; color: var(--c-gris); font-size: 0.9375rem; font-weight: var(--w-medium); letter-spacing: -0.018em; min-inline-size: 15rem; }
.recherche:hover { color: var(--c-encre); border-color: var(--c-bord-fort); }
.recherche svg { width: 15px; height: 15px; stroke-width: 2; }
@media (max-width: 1080px) { .recherche { display: none; } }

.lang { display: flex; align-items: center; gap: var(--s-1); font-size: 0.9375rem; font-weight: var(--w-medium); letter-spacing: -0.018em; color: var(--c-gris); }
.lang a, .lang [aria-current] { padding: 0.2rem 0.65rem; border-radius: var(--r-pill); border: 1px solid rgba(0, 0, 0, 0); }
.lang a { color: var(--c-gris); }
.lang a:hover { color: var(--c-encre); background: var(--c-wash); }
.lang [aria-current] { background: var(--c-encre); color: var(--c-fond); }
@media (max-width: 860px) { .lang a, .lang [aria-current] { min-block-size: 44px; display: inline-flex; align-items: center; } }

.burger { display: none; background: var(--c-wash); border: 1px solid var(--c-bord); border-radius: var(--r-pill); padding: 0.5rem 0.7rem; cursor: pointer; color: var(--c-encre); line-height: 0; }
@media (max-width: 860px) {
  .entete-inner { gap: var(--s-3); }
  .burger { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; inset-inline: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--c-fond); border-bottom: 1px solid var(--c-bord); padding: var(--s-3) var(--s-6) var(--s-5); }
  .nav.ouvert { display: flex; }
  .nav li { padding-block: var(--s-2); margin: 0; }
  .nav a { min-block-size: 44px; display: inline-flex; align-items: center; font-size: var(--t-corps); }
}

/* --------------------------------------------
   4. Boutons — TOUJOURS pilules (mesuré r=3,35e7 px), padding 16/24,
      w500 15px ; primaire = noir plein/blanc ; secondaire = wash+hairline
   -------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-weight: var(--w-medium); font-size: 0.9375rem; letter-spacing: -0.018em; line-height: 1.2; padding: 0.85rem 1.5rem; border: 1px solid rgba(0, 0, 0, 0); border-radius: var(--r-pill); cursor: pointer; text-align: center; transition: background-color var(--tr-rapide), color var(--tr-rapide), transform var(--tr-rapide); }
.btn-sm { padding: 0.6rem 1.15rem; font-size: 0.875rem; }
.btn-lg { font-size: 1.125rem; font-weight: var(--w-corps); padding: 1.25rem 2rem; }
.btn-primary { background: var(--c-encre); color: var(--c-fond); }
.btn-primary:hover { background: #262626; }
.btn-secondaire { background: var(--c-wash); color: var(--c-encre); border-color: var(--c-bord); }
.btn-secondaire:hover { background: var(--c-fond); border-color: var(--c-bord-fort); }
.btn:active { transform: scale(0.97); }
.lien-suivant { display: inline-flex; align-items: center; gap: 0.4em; font-weight: var(--w-medium); font-size: 0.9375rem; letter-spacing: -0.018em; color: var(--c-encre); }
.lien-suivant:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* --------------------------------------------
   5. HERO calqué : titre STRICTEMENT centré (w300-350, ls -0.05em,
      ligne 1.0) + NUAGE flottant de tuiles arrondies + 2 pilules +
      ligne discrète centrée (le « Watch our new film »)
   -------------------------------------------- */
.hero { position: relative; padding-block: clamp(5rem, 12vh, 8.5rem) clamp(7rem, 16vh, 11rem); overflow: clip; }
.hero-centre { position: relative; z-index: 10; display: grid; justify-items: center; text-align: center; gap: var(--s-2); max-inline-size: 56ch; margin-inline: auto; }
.hero h1 { max-inline-size: 22ch; margin-inline: auto; text-wrap: balance; }
.hero-intro { font-size: 1.0625rem; color: var(--c-gris-wash); max-width: 40ch; margin-top: var(--s-4); }
.hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; margin-top: var(--s-7, var(--s-8)); }
.hero-direct { margin-top: var(--s-5); font-size: var(--t-petit); color: var(--c-gris); }
.hero-direct a { color: var(--c-encre); text-decoration: underline; text-underline-offset: 0.18em; }
/* stats = chip pilule centrée (carte « 20 ans… » relevée sur wash, axe F) */
.hero-stats { display: inline-flex; margin-top: var(--s-6); font-size: var(--t-petit); color: var(--c-gris); background: var(--c-wash); border: 1px solid var(--c-bord); border-radius: var(--r-pill); padding: 0.5rem 1.15rem; }

/* le nuage — V3.2 (remarques vision duel 14/09 : petites vignettes dans les
   BANDES LATÉRALES seules, jamais au-dessus du texte, fondu léger vers les
   bords, pas de doublons massifs ; les pastilles texte = tuiles « cartel »
   du collage cosmos) */
.hero { min-block-size: 780px; }
.nuage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.nuage img { position: absolute; inline-size: auto; block-size: auto; border-radius: var(--r-12); }
.nuage .t1 { inline-size: 8.5%; left: 1.5%; top: 11%; rotate: -4deg; opacity: 0.85; }
.nuage .t2 { inline-size: 7%;  left: 13%; top: 40%; rotate: 5deg; opacity: 0.95; }
.nuage .t3 { inline-size: 9%;  left: 2%;  top: 63%; rotate: 3deg; opacity: 0.85; }
.nuage .t4 { inline-size: 9%;  right: 1.5%; top: 9%;  rotate: 4deg; opacity: 0.85; }
.nuage .t5 { inline-size: 7.5%; right: 12%; top: 33%; rotate: -5deg; opacity: 0.95; }
.nuage .t6 { inline-size: 8.5%; right: 2.5%; top: 58%; rotate: -3deg; opacity: 0.85; }
.nuage .tag { position: absolute; background: var(--c-wash); border: 1px solid var(--c-bord); border-radius: var(--r-pill); padding: 0.45rem 0.95rem; font-size: var(--t-petit); font-weight: var(--w-medium); color: var(--c-gris); letter-spacing: -0.01em; }
.nuage .g1 { left: 20.5%; top: 7%; opacity: 0.9; }
.nuage .g2 { right: 20.5%; top: 24%; opacity: 0.9; }
.nuage .g3 { left: 20%; bottom: 8%; opacity: 0.9; }
.nuage .g4 { right: 19%; bottom: 12%; opacity: 0.9; }
@media (max-width: 1140px) { .nuage .t2 { display: none; } .nuage .t5 { display: none; } .nuage .tag { display: none; } }
/* mobile : le nuage devient une galerie scrollable SOUS le titre (pas de
   chevauchement texte/image à 375px) */
@media (max-width: 860px) {
  .hero { display: grid; grid-template-columns: 1fr; padding-block: var(--s-16) var(--s-12); min-block-size: 0; }
  .hero-centre { order: -1; }
  .nuage { position: static; display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: var(--gap-feed); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s-2) var(--s-6) var(--s-6); pointer-events: auto; }
  .nuage img { position: static; rotate: none !important; opacity: 1 !important; inline-size: 100%; block-size: auto; scroll-snap-align: center; display: block; }
}

/* --------------------------------------------
   6. Bandeaux-titres officiels (« Every search opens a new world. ») :
      display centré, phrase + point final, sous-titre gris court
   -------------------------------------------- */
.bandeau { text-align: center; max-inline-size: 22ch; margin-inline: auto; }
.bandeau h2, .bandeau .bandeau-p { font-size: var(--t-display); font-weight: var(--w-corps); line-height: 1.08; letter-spacing: -0.04em; }
.bandeau p + h2 { margin-top: var(--s-3); }
.bandeau-sous { font-size: 1.0625rem; color: var(--c-gris-wash); max-inline-size: 44ch; margin-inline: auto; }

/* --------------------------------------------
   7. Méthode — 6 étapes en tuiles wash arrondies (le feed, pas un
      stepper), numérotation grise 14/500
   -------------------------------------------- */
.tete-section { max-width: 66rem; margin-bottom: var(--s-10); }
.tete-section h2 { font-size: var(--t-titre-1); max-inline-size: 44rem; text-wrap: balance; }
.tete-section p { color: var(--c-gris-wash); margin-top: var(--s-3); max-inline-size: 58ch; }

.etape-liste { list-style: none; border: 1px solid var(--c-bord); background: var(--c-fond); }
.etape-li { border-bottom: 1px solid var(--c-bord); }
.etape-li:last-child { border-bottom: none; }
.etape-li-interne { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: baseline; padding: 0.6rem var(--s-4); }
.etape-num { font-size: var(--t-petit); font-weight: var(--w-medium); color: var(--c-gris); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.etape-s { font-weight: var(--w-medium); color: var(--c-encre); font-size: var(--t-petit); line-height: 1.35; }
.etape-l { color: var(--c-gris-wash); font-size: var(--t-petit); }

.sequence.etape-liste { border: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-feed); }
.sequence.etape-liste .etape-li { border: 1px solid var(--c-bord); border-radius: var(--r-12); background: var(--c-wash); }
.sequence.etape-liste .etape-li:last-child { border-bottom: 1px solid var(--c-bord); }
.sequence.etape-liste .etape-li-interne { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-5); }
.sequence.etape-liste .etape-num { font-size: 1.75rem; font-weight: var(--w-leger); letter-spacing: -0.04em; color: var(--c-encre); }
.sequence.etape-liste .etape-s { font-size: var(--t-corps); }
.sequence.etape-liste .etape-l { font-size: var(--t-petit); line-height: 1.5; }
@media (max-width: 900px) { .sequence.etape-liste { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .sequence.etape-liste { grid-template-columns: 1fr; }
  .sequence.etape-liste .etape-num { font-size: var(--t-petit); font-weight: var(--w-medium); }
}

/* --------------------------------------------
   8. Blocs éditoriaux
   -------------------------------------------- */
.manifeste-texte { max-width: var(--max-w-texte); }
.manifeste-texte p { color: var(--c-gris-wash); }
.manifeste-texte p.thesis { color: var(--c-texte); font-size: 1.0625rem; }
.citation-fil { border-inline-start: 2px solid var(--c-encre); padding-inline-start: var(--s-5); margin-block: var(--s-6); }
.citation-fil p { font-size: var(--t-titre-1); font-weight: var(--w-leger); letter-spacing: -0.045em; line-height: 1.1; color: var(--c-encre); margin: 0; }

.valeurs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-8); margin-top: var(--s-8); }
.valeurs li { padding-block: var(--s-4); border-top: 1px solid var(--c-bord); margin: 0; }
.valeurs b { display: block; font-weight: var(--w-medium); color: var(--c-encre); margin-bottom: 0.15rem; font-size: var(--t-corps); }
.valeurs span { color: var(--c-gris-wash); font-size: var(--t-petit); display: block; }
@media (max-width: 640px) { .valeurs { grid-template-columns: 1fr; } }

/* Cartes prestations — tuiles du « feed » : r12, wash, hairline, zéro ombre */
.grille-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-feed); list-style: none; }
.carte { border: 1px solid var(--c-bord); border-radius: var(--r-12); background: var(--c-wash); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); transition: border-color var(--tr-rapide), transform var(--tr-rapide); margin: 0; }
.carte:hover { border-color: var(--c-bord-fort); }
.carte:active { transform: scale(0.99); }
.carte h3 { font-size: var(--t-titre-3); }
.carte p { color: var(--c-gris-wash); font-size: var(--t-petit); line-height: 1.55; }
.carte .lien-suivant { margin-top: auto; }
@media (max-width: 860px) { .grille-cartes { grid-template-columns: 1fr; } }

/* le feed des moments : même grammaire, sans carte — juste 3 colonnes */
.moments { border-top: 1px solid var(--c-bord); }
.moments-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.moment { padding-block: 0; }
.moment-n { font-size: 0.9375rem; color: var(--c-gris); font-variant-numeric: tabular-nums; line-height: 1; font-weight: var(--w-medium); }
.moment-n + .moment-l { margin-top: var(--s-3); }
.moment-l { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: var(--w-corps); letter-spacing: -0.035em; line-height: 1.1; margin: 0; }
.moment-d { margin-top: var(--s-3); margin-bottom: 0; color: var(--c-gris-wash); font-size: var(--t-petit); line-height: 1.55; max-inline-size: 28ch; }
.moment-filet { display: none; }
@media (max-width: 860px) { .moments-grille { grid-template-columns: 1fr; gap: 0; } .moment { padding-block: var(--s-8); } .moment + .moment { border-top: 1px solid var(--c-bord); } }

/* Le silence (bigger statement band, très cosmos : une phrase, du blanc) */
.silence { padding-block: clamp(6rem, 16vh, 10rem) clamp(6rem, 16vh, 10rem); background: var(--c-sec); }
.silence .conteneur { max-inline-size: none; text-align: center; }
.silence-p { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: var(--w-leger); line-height: 1.14; letter-spacing: -0.035em; text-wrap: balance; margin-inline: auto; max-inline-size: 62rem; }
.silence-filet { display: none; }

/* Statistiques XXL et data-viz — noires sur blanc, barres hairline */
.stats-xxl { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-12); margin-block: var(--s-8) var(--s-10); }
.stat-n { font-size: clamp(3rem, 6.6vw, 4.6rem); font-weight: var(--w-leger); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.05em; }
.stat-n small { font-size: 0.3em; font-weight: var(--w-medium); color: var(--c-gris); letter-spacing: -0.01em; }
.stat-l { font-size: var(--t-petit); color: var(--c-gris); margin-top: var(--s-2); }
.stat { padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--c-bord); }

.deux-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); align-items: start; }
@media (max-width: 860px) { .deux-col { grid-template-columns: 1fr; gap: var(--s-10); } }
.note-haute { border-top: 1px solid var(--c-bord); padding-top: var(--s-4); margin-top: var(--s-4); font-size: var(--t-petit); color: var(--c-gris-wash); }
.note-haute strong { color: var(--c-encre); font-weight: var(--w-medium); }
.note-bas { color: var(--c-gris); font-size: var(--t-micro); margin-top: var(--s-3); }

/* --------------------------------------------
   9. Tableaux + listes de données (rôle data)
   -------------------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--c-bord); border-radius: var(--r-12); background: var(--c-wash); }
table.sobre { inline-size: 100%; border-collapse: collapse; }
table.sobre-large { min-inline-size: 34rem; }
table.sobre caption { caption-side: top; text-align: start; color: var(--c-gris); font-size: var(--t-petit); padding: var(--s-4) var(--s-4) 0; }
table.sobre th { text-align: start; font-size: var(--t-petit); color: var(--c-gris); font-weight: var(--w-medium); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-bord); vertical-align: bottom; }
table.sobre td { padding: var(--s-4); border-bottom: 1px solid var(--c-bord); vertical-align: top; color: var(--c-texte); font-size: var(--t-petit); background: var(--c-fond); }
table.sobre tbody tr:last-child td { border-bottom: none; }
table.sobre td:first-child { font-weight: var(--w-medium); color: var(--c-encre); }
table.sobre tbody tr { transition: background-color var(--tr-rapide); }
table.sobre tbody tr:hover td, table.sobre tbody tr:focus-within td { background: var(--c-sec); }
.cache { display: none; }
.filtre-ligne { display: flex; gap: var(--s-3); align-items: center; margin-block-end: var(--s-4); flex-wrap: wrap; }
.filtre-ligne .champ { inline-size: min(100%, 22rem); margin: 0; }

.badges-texte { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin-top: var(--s-4); padding: 0; }
.badges-texte li { margin: 0; }
/* chips = pilules wash + hairline, texte 14/500 (mesuré « For You » 14/500) */
.badge { display: inline-block; border: 1px solid var(--c-bord); border-radius: var(--r-pill); padding: 0.35rem 0.9rem; font-size: var(--t-petit); font-weight: var(--w-medium); color: var(--c-gris-wash); background: var(--c-fond); }
.badge:hover { border-color: var(--c-bord-fort); color: var(--c-encre); }

.checklist { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-10); padding: 0; }
.checklist li { display: flex; gap: var(--s-2); align-items: baseline; padding-block: 0.55rem; border-bottom: 1px solid var(--c-bord); font-size: var(--t-petit); color: var(--c-texte); margin: 0; }
.checklist svg { color: var(--c-encre); inline-size: 1rem; block-size: 1rem; flex-shrink: 0; }
@media (max-width: 860px) { .checklist { grid-template-columns: 1fr; } }

.edit-livrables { list-style: none; display: grid; gap: 0; margin: var(--s-6) 0 0; padding: 0; border-top: 1px solid var(--c-bord); }
.edit-livrables li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--s-3) var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--c-bord); }
.edit-livrables b { font-weight: var(--w-medium); }
.edit-livrables span { color: var(--c-gris-wash); font-size: var(--t-petit); }
@media (max-width: 720px) { .edit-livrables li { grid-template-columns: 1fr; gap: var(--s-1); } }

/* --------------------------------------------
   10. Rail latéral (Trajectoire) + page entêtes
   -------------------------------------------- */
.rail2 { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: var(--s-16); align-items: start; }
.rail { position: sticky; top: 100px; display: grid; gap: var(--s-1); list-style: none; padding: 0; }
.rail li { margin: 0; }
.rail a { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--t-petit); color: var(--c-gris); border-inline-start: 1px solid var(--c-bord); padding-block: 0.35rem; padding-inline: var(--s-3); border-radius: 0 var(--r-pill) var(--r-pill) 0; transition: color var(--tr-rapide), background-color var(--tr-rapide); }
.rail a .etape-num { font-size: var(--t-micro); }
.rail a:hover { color: var(--c-encre); }
.rail .fait { border-inline-start-color: var(--c-gris); }
.rail .actif { border-inline-start-color: var(--c-encre); color: var(--c-encre); font-weight: var(--w-medium); background: var(--c-wash); }
@media (max-width: 1000px) { .rail2 { grid-template-columns: 1fr; gap: var(--s-10); } .rail { display: none; } }

.etape-page { padding-block: var(--s-5) var(--s-10); }
.etape-page h3 { margin-block-end: var(--s-2); }
.etape-page .etape-cap { font-size: var(--t-petit); color: var(--c-gris); font-weight: var(--w-medium); margin-block-end: var(--s-2); }
.etape-page p { color: var(--c-gris-wash); max-width: var(--max-w-texte); }
.etape-page .livrable { font-size: var(--t-petit); margin-top: var(--s-3); }
.etape-page .livrable strong { color: var(--c-encre); font-weight: var(--w-medium); }

/* Bandeau-titre des pages intérieures — la contrainte de largeur porte sur le
   TITRE lui-même (et non la section entière, qui bridait le conteneur). */
.entete-page { padding-block: var(--s-24) var(--s-16); text-align: center; }
.entete-page h1 { font-size: var(--t-titre-1); max-inline-size: 44rem; margin-inline: auto; text-wrap: balance; letter-spacing: -0.04em; }
.entete-page p { color: var(--c-gris-wash); max-width: 56ch; margin: var(--s-5) auto 0; }
.fil-ariane { font-size: var(--t-petit); letter-spacing: -0.018em; color: var(--c-gris-wash); margin-block-end: var(--s-5); }
.fil-ariane a { color: var(--c-gris); }
.fil-ariane a:hover { color: var(--c-encre); }
@media (max-width: 860px) { .entete-page { text-align: start; margin-inline: 0; max-inline-size: none; } .entete-page p { margin-inline: 0; } }

.puces { list-style: none; display: grid; gap: var(--s-3); padding: 0; margin-top: var(--s-4); }
.puces li { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--t-petit); color: var(--c-gris-wash); margin: 0; }
.puces li::before { content: ''; inline-size: 0.6rem; block-size: 1px; background: var(--c-bord-fort); flex-shrink: 0; transform: translateY(-0.35rem); }

/* --------------------------------------------
   11. Contact + formulaire (champs = pilules basses r12, hairlines)
   -------------------------------------------- */
.contact2 { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-16); align-items: start; }
@media (max-width: 860px) { .contact2 { grid-template-columns: 1fr; gap: var(--s-12); } }
.coord { list-style: none; display: grid; gap: var(--s-5); padding: 0; }
.coord li { border-top: 1px solid var(--c-bord); padding-top: var(--s-3); margin: 0; }
.coord-h { display: block; font-size: var(--t-petit); color: var(--c-gris); font-weight: var(--w-medium); margin-bottom: var(--s-1); }
.coord a { font-size: var(--t-titre-3); font-weight: var(--w-corps); letter-spacing: -0.025em; color: var(--c-encre); overflow-wrap: anywhere; }
.coord a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.coord .adr { color: var(--c-gris-wash); font-size: var(--t-petit); font-style: normal; }
.champ { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.champ label { font-size: var(--t-petit); color: var(--c-gris); font-weight: var(--w-medium); }
.champ input, .champ textarea { inline-size: 100%; border: 1px solid var(--c-bord); border-radius: var(--r-12); background: var(--c-wash); color: var(--c-texte); padding: 0.8rem 1rem; font-size: var(--t-petit); transition: border-color var(--tr-rapide), background-color var(--tr-rapide); }
.champ input:focus, .champ textarea:focus { background: var(--c-fond); border-color: var(--c-bord-fort); outline: none; }
.champ textarea { min-block-size: 8rem; resize: vertical; }
.form-hint { font-size: var(--t-micro); color: var(--c-gris); margin-block-start: var(--s-3); }

/* --------------------------------------------
   12. Pied minimal (blanc, liens gris courts, colonnes)
   -------------------------------------------- */
.pied { border-top: 1px solid var(--c-bord); padding-block: var(--s-16) var(--s-10); }
.pied-reprise { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); padding-bottom: var(--s-6); border-bottom: 1px solid var(--c-bord); margin-bottom: var(--s-8); }
.pied-reprise .lib { font-size: var(--t-petit); color: var(--c-gris); font-weight: var(--w-medium); }
.pied-reprise a { font-size: var(--t-petit); color: var(--c-gris); border-inline-start: 1px solid var(--c-bord); padding-inline-start: var(--s-4); display: inline-flex; gap: 0.4em; align-items: baseline; }
.pied-reprise a:hover { color: var(--c-encre); }
.pied-colonnes { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-10); margin-bottom: var(--s-8); }
@media (max-width: 860px) { .pied-colonnes { grid-template-columns: 1fr; gap: var(--s-8); } }
.pied h4 { font-size: var(--t-petit); color: var(--c-encre); font-weight: var(--w-medium); margin-bottom: var(--s-3); }
.pied ul { list-style: none; display: grid; gap: var(--s-2); padding: 0; }
.pied li { margin: 0; }
.pied a { font-size: 0.9375rem; color: var(--c-gris-clair); }
.pied a:hover { color: var(--c-encre); }
.pied p { color: var(--c-gris); font-size: var(--t-petit); max-width: 44ch; }
.pied .marque img { block-size: 1.6rem; margin-bottom: var(--s-3); }
.pied-mentions { border-top: 1px solid var(--c-bord); padding-top: var(--s-5); font-size: var(--t-micro); color: var(--c-gris); }

/* --------------------------------------------
   13. Mur de références = LE feed cosmos : masonry CSS, tuiles
      hairline r12, logos en couleur AU REPOS (mesuré : leurs cartes
      ne dé-saturent jamais), cartel gris 14/500 sous la tuile
   -------------------------------------------- */
.mur-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-feed); margin-top: var(--s-6); list-style: none; padding: 0; }
.mur-logos li { display: flex; align-items: center; justify-content: center; padding: var(--s-6) var(--s-5); background: var(--c-wash); border: 1px solid var(--c-bord); border-radius: var(--r-12); min-block-size: 6.5rem; break-inside: avoid; }
.mur-logos img { max-block-size: 2.4rem; max-inline-size: 7.5rem; inline-size: auto; block-size: auto; min-inline-size: 0; /* shrink en colonne étroite : jamais de dépassement du conteneur */ transition: transform var(--tr-rapide); }
.mur-logos li:hover img { transform: scale(1.03); }
@media (max-width: 1000px) { .mur-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mur-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* teaser de l'accueil : niché dans la colonne gauche du deux-col → 3 colonnes
   et caps plus petits, sinon les cellules < visuels = débordement (signal 14/09) */
.mur-logos-mini { margin-top: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mur-logos-mini li { min-block-size: 4.75rem; padding: var(--s-4) var(--s-3); }
.mur-logos-mini img { max-block-size: 1.9rem; max-inline-size: 5.75rem; }
@media (max-width: 640px) { .mur-logos-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* secteurs — barres de masse noire sur hairline */
.secteurs { margin-top: var(--s-6); }
.secteurs figcaption { font-size: var(--t-petit); color: var(--c-gris); font-weight: var(--w-medium); margin-bottom: var(--s-3); }
.secteurs ul { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.secteurs li { display: grid; grid-template-columns: minmax(5.5rem, 9.5rem) minmax(0, 1fr) 2.5ch; align-items: center; gap: var(--s-3); row-gap: 0.15rem; padding-block: var(--s-2); }
.secteurs li + li { border-top: 1px solid var(--c-bord); }
.s-nom { font-size: var(--t-petit); color: var(--c-texte); }
.s-barre { block-size: 4px; background: var(--c-bord); border-radius: var(--r-pill); }
.s-barre i { display: block; block-size: 100%; inline-size: calc(var(--p) * 25%); background: var(--c-encre); border-radius: var(--r-pill); }
.s-val { font-size: var(--t-petit); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; }
.s-qui { grid-column: 2 / -1; font-size: var(--t-micro); color: var(--c-gris); }
@media (max-width: 560px) {
  .secteurs li { grid-template-columns: minmax(0, 1fr) 2.5ch; }
  .secteurs li .s-nom { grid-column: 1; }
  .secteurs li .s-val { grid-column: 2; grid-row: 1; }
  .secteurs li .s-barre { grid-column: 1 / -1; grid-row: 2; }
  .secteurs li .s-qui { grid-column: 1 / -1; }
}

/* --------------------------------------------
   14. Schéma niveaux + portraits + divers
   -------------------------------------------- */
.schema-niveaux { margin-block: var(--s-10); border: 1px solid var(--c-bord); border-radius: var(--r-16); background: var(--c-fond); padding: var(--s-8) var(--s-6); max-inline-size: 30ch; }
.schema-niveaux figcaption { font-size: var(--t-petit); color: var(--c-gris); font-weight: var(--w-medium); margin-bottom: var(--s-5); }
.schema-niveaux ol { list-style: none; display: grid; gap: var(--s-4); margin: 0; padding: var(--s-2) 0 0 var(--s-5); position: relative; }
.schema-niveaux ol::before { content: ''; position: absolute; inset-inline-start: 0.3rem; inset-block-start: 0.25rem; inset-block-end: 0.25rem; inline-size: 1px; background: var(--c-bord-fort); }
.schema-niveaux li { position: relative; display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-petit); font-weight: var(--w-medium); color: var(--c-gris); letter-spacing: -0.01em; }
.nv-puce { inline-size: 0.5rem; block-size: 0.5rem; border: 1px solid var(--c-bord-fort); border-radius: var(--r-pill); background: var(--c-fond); }
.nv-accent { color: var(--c-encre); }
.nv-accent .nv-puce { background: var(--c-encre); border-color: var(--c-encre); }
.schema-niveaux-wrap { display: grid; grid-template-columns: minmax(0, 30ch) minmax(0, 1fr); gap: var(--s-4) var(--s-12); align-items: center; }
.schema-niveaux-wrap .schema-niveaux { margin: 0; }
.schema-lexpli { margin: 0; font-size: var(--t-petit); color: var(--c-gris-wash); max-inline-size: 46ch; line-height: 1.55; }
@media (max-width: 720px) { .schema-niveaux-wrap { grid-template-columns: 1fr; } }

/* portraits : tuiles r16 (mesuré : la media card d'accueil du film est
   r12-16), cartel gris discret en dessous — la photo EST en couleur */
.portrait { margin: 0; }
.portrait img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-16); }
.portrait figcaption { margin-top: var(--s-3); font-size: var(--t-petit); color: var(--c-gris); max-inline-size: 36ch; }
.portrait-ligne { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s-8) var(--s-12); align-items: center; margin-top: var(--s-12); }
.portrait-side { margin: 0; font-size: var(--t-corps); color: var(--c-texte); max-inline-size: 46ch; }
@media (max-width: 860px) { .portrait-ligne { grid-template-columns: minmax(0, 420px); } }

.closing { padding-block: var(--gap-section) clamp(4.5rem, 10vh, 7rem); text-align: center; }
.closing .conteneur { display: grid; justify-items: center; gap: var(--s-5); }
.closing-t { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: var(--w-corps); line-height: 1.14; letter-spacing: -0.035em; max-inline-size: 46rem; text-wrap: balance; margin-inline: auto; }
.closing .lien-suivant { display: inline-flex; background: var(--c-encre); color: var(--c-fond); border-radius: var(--r-pill); padding: 0.85rem 1.5rem; font-size: 0.9375rem; font-weight: var(--w-medium); }
.closing .lien-suivant:hover { background: #262626; text-decoration: none; }

/* le fil-méthode SVG reste possible sur pages intérieures — rendu neutre */
.fil-methode { margin-block: var(--s-8) var(--s-6); }
.fil-methode svg { width: 100%; height: auto; display: block; }
.traj { fill: none; stroke: var(--c-bord); stroke-width: 1.5; }
.traj-passe { stroke: var(--c-encre); transition: stroke-dashoffset var(--tr-lent), stroke var(--tr-lent); }
.noeud { fill: var(--c-fond); stroke: var(--c-bord-fort); stroke-width: 1.5; transition: stroke var(--tr-lent), fill var(--tr-lent); }
.noeud-passe { fill: var(--c-encre); stroke: var(--c-encre); }
.noeud-texte { fill: var(--c-gris); font-family: "Inter", sans-serif; font-size: 11px; }
.noeud-texte.noeud-passe { fill: var(--c-fond); }
@media (prefers-reduced-motion: reduce) { .traj-passe, .noeud, .noeud-texte { transition: none; } }

/* --------------------------------------------
   15. Blog — le flux (feed) et l'article, grammaire cosmos
   -------------------------------------------- */
.blog-hero { position: relative; overflow: clip; text-align: center; padding-block: clamp(4rem, 11vh, 6.5rem) clamp(4.5rem, 11vh, 6rem); }
.blog-hero .conteneur { position: relative; z-index: 10; max-inline-size: 640px; }
.blog-hero .nuage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.blog-hero .nuage .tag { display: none; }
.blog-hero .nuage img { position: absolute; inline-size: auto; block-size: auto; border-radius: var(--r-12); }
/* quatre vignettes dans les bandes extérieures ONLY : les tuiles changent de
   côté par rapport à la home → on neutralise la propriété de côté héritée
   (en LTR, left+right simultanés ignorerait le right → empilement à gauche) */
.blog-hero .nuage .t1 { inline-size: 9%;   left: 1.5%;  right: auto; top: 6%;   rotate: -4deg; opacity: .82; } /* escalier portrait */
.blog-hero .nuage .t2 { inline-size: 7.5%; left: 2%;    right: auto; top: 66%;  rotate: 5deg;  opacity: .9; }  /* matiere */
.blog-hero .nuage .t3 { inline-size: 9%;   right: 1.5%; left: auto;  top: 30%;  rotate: 5deg;  opacity: .86; } /* bureau-papier */
.blog-hero .nuage .t4 { inline-size: 7%;   right: 2%;   left: auto;  top: 70%;  rotate: -6deg; opacity: .92; } /* lumiere */
.blog-hero .nuage .t5, .blog-hero .nuage .t6 { display: none; }
@media (min-width: 1600px) {
  .blog-hero .nuage .t5 { display: block; inline-size: 8%; right: 14%; left: auto; top: 6%; rotate: 3deg; opacity: .8; }
  .blog-hero .nuage .t6 { display: block; inline-size: 7%; left: 13%; right: auto; top: 33%; rotate: -3deg; opacity: .85; }
}
@media (max-width: 860px) { .blog-hero .nuage { display: none; } }
.blog-hero h1 { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.05em; max-inline-size: 16ch; margin-inline: auto; text-wrap: balance; }
.blog-hero .blog-surtitre { display: inline-flex; margin-bottom: var(--s-5); font-size: var(--t-petit); font-weight: var(--w-medium); letter-spacing: -0.01em; color: var(--c-gris-wash); background: var(--c-wash); border: 1px solid var(--c-bord); border-radius: var(--r-pill); padding: 0.4rem 1.05rem; }
.blog-hero p.blog-sous { color: var(--c-gris-wash); max-width: 36ch; margin: var(--s-5) auto 0; }
.blog-filtre { display: flex; justify-content: center; margin-top: var(--s-8); }
.blog-filtre .champ { margin: 0; inline-size: min(100%, 24rem); }
.chip-pillier { display: inline-flex; align-items: center; background: var(--c-fond); border: 1px solid var(--c-bord); border-radius: var(--r-pill); padding: 0.3rem 0.85rem; font-size: var(--t-petit); font-weight: var(--w-medium); color: var(--c-gris-wash); letter-spacing: -0.01em; }
@media (max-width: 860px) { .blog-hero .nuage { display: none; } }

/* feed = cartes du kit : media r-12, hairline, wash, zéro ombre */
.grid-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-feed); list-style: none; padding: 0; border-top: 1px solid var(--c-bord); padding-top: var(--s-10); }
@media (min-width: 1100px) { .grid-posts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid-posts { grid-template-columns: 1fr; } }
.carte-post { margin: 0; }
.carte-post a { display: flex; flex-direction: column; gap: var(--s-3); background: var(--c-wash); border: 1px solid var(--c-bord); border-radius: var(--r-16); padding: var(--s-5) var(--s-5) var(--s-6); color: var(--c-encre); transition: border-color var(--tr-rapide); }
.carte-post a:hover { border-color: var(--c-bord-fort); }
.carte-post figure figure { margin: 0; }
.carte-post img { inline-size: 100%; block-size: auto; border-radius: var(--r-12); background: var(--c-bord); }
.carte-post h2 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.028em; font-weight: var(--w-corps); margin: 0; }
.carte-post p { font-size: var(--t-petit); line-height: 1.55; color: var(--c-gris-wash); margin: 0; }
.carte-post .post-meta { font-size: var(--t-micro); color: var(--c-gris-wash); margin-top: auto; padding-top: var(--s-2); }

/* article : grammaire de lecture (68 ch, h2 modestes) dans le chrome cosmos */
.post { padding-block: var(--s-16) var(--gap-section); }
.post-inner { max-inline-size: 68ch; margin-inline: auto; }
.post-header h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -0.045em; line-height: 1.06; max-inline-size: 22ch; }
.post-lead { font-size: 1.1875rem; line-height: 1.5; color: var(--c-gris-wash); letter-spacing: -0.015em; margin-top: var(--s-4); }
.post-meta-top { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-block: var(--s-5) var(--s-8); font-size: var(--t-petit); color: var(--c-gris-wash); }
.post-cover { margin-block: var(--s-8); }
.post-cover img { inline-size: 100%; block-size: auto; border-radius: var(--r-16); }
.post-cover figcaption { margin-top: var(--s-3); font-size: var(--t-petit); color: var(--c-gris-wash); }
.post-prose p, .post-prose li { font-size: 1.0625rem; line-height: 1.7; }
.post-prose h2 { font-size: 1.5rem; letter-spacing: -0.028em; line-height: 1.3; font-weight: var(--w-medium); margin-block: var(--s-12) var(--s-4); }
.post-prose h3 { font-size: 1.1875rem; letter-spacing: -0.02em; line-height: 1.4; font-weight: var(--w-medium); margin-block: var(--s-8) var(--s-2); }
.post-prose ul { padding-inline-start: var(--s-5); margin-bottom: var(--s-4); }
.post-prose ul li { list-style: disc; }
/* « À retenir » = carte du feed posée dans le texte ; « Vu par Solutec » = lavis + filet encre */
.a-retenir { border: 1px solid var(--c-bord); border-radius: var(--r-16); background: var(--c-wash); padding: var(--s-6);}
.a-retenir h2 { font-size: var(--t-petit); letter-spacing: 0; font-weight: var(--w-medium); margin: 0 0 var(--s-3); text-transform: none; color: var(--c-gris); }
.a-retenir li { font-size: var(--t-petit) !important; line-height: 1.6; }
.a-retenir ul { margin: 0; }
.vues-solutec { border-inline-start: 2px solid var(--c-encre); padding-inline-start: var(--s-5); margin-block: var(--s-10); }
.vues-solutec h2 { font-size: 1.3rem; margin: 0 0 var(--s-3); font-weight: var(--w-corps); letter-spacing: -0.028em; }
.vues-solutec p { color: var(--c-texte); }
.post-cta { margin-top: var(--s-16); text-align: center; border: 1px solid var(--c-bord); border-radius: var(--r-16); background: var(--c-sec); padding-block: var(--s-12); }
.post-cta h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.04em; max-inline-size: 24ch; margin-inline: auto; }
.post-cta p { color: var(--c-gris-wash); margin: var(--s-3) auto var(--s-6); max-inline-size: 48ch; }
.post-links { margin-top: var(--s-16); border-top: 1px solid var(--c-bord); padding-top: var(--s-6); }
.post-links h2 { font-size: var(--t-corps); font-weight: var(--w-medium); letter-spacing: -0.018em; margin-bottom: var(--s-4); }
.post-links ul { list-style: none; display: grid; gap: var(--s-2); padding: 0; }
.post-links li { margin: 0; }
.post-links a { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; border: 1px solid var(--c-bord); border-radius: var(--r-12); background: var(--c-wash); padding: var(--s-3) var(--s-4); font-size: var(--t-petit); font-weight: var(--w-medium); color: var(--c-encre); }
.post-links a:hover { border-color: var(--c-bord-fort); }
.post-links a::after { content: '→'; color: var(--c-gris); }

/* ---------------- (motion) ---------------- */
/* --------------------------------------------
   16. Motion & ancres
   -------------------------------------------- */
html { scroll-padding-top: 5.5rem; }
[id] { scroll-margin-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}