/* =============================================================================
   VITRINE PUBLIQUE (chantier A6, lot 2) — habillage des pages « grand public ».
   Chargé UNIQUEMENT par les vues de la vitrine (home, bibliothèque, aperçu en
   vrai, comment ça marche, tester le moteur) : rien ici n'est utilisé par
   l'application connectée.

   PROVENANCE : port fidèle de la maquette validée
   `prototype/en développement/prototype_accueil_v3/_template.html`.
   Le chrome de prototype (ruban « MAQUETTE », barre d'options à valider, encart
   de notes, variantes basculables) a été RETIRÉ : les décisions sont actées.

   Ce qui n'est PAS ici, volontairement :
   - la peau « Aqua marine » -> `session-themes.css` (c'est une peau de l'app,
     proposée en OPTION, jamais le défaut) ;
   - `.srcbadge` / `.vauthor` (badge de source + attribution d'un contenu
     partagé) -> `app.css`, car les vignettes de la bibliothèque en ont besoin
     partout, connecté comme public ;
   - `.navswitch` / `.nav-tools` (barre de navigation publique) -> `app.css`,
     car la barre vit dans `layouts/public.php`, donc sur TOUTES les pages
     publiques.
   ============================================================================= */

/* ---------------------------------------------------------------- rythme ---- */
section.block{padding:54px 0}
.block-wrap{width:min(1180px,92vw);margin-inline:auto}
.head{max-width:62ch;margin-bottom:26px}
.head h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--hub-navy,#071d35);letter-spacing:-.02em}
.head p{color:var(--muted);margin-top:10px;font-size:1.02rem}
.center{text-align:center;margin-inline:auto}

/* ------------------------------------------------- héros : titre & copie ---- */
/* `app.css` pousse .hub-hero h1 à clamp(3rem,8vw,6.4rem) : bien trop gros pour
   une accroche de 2 lignes -> sélecteur fort volontaire. */
.public-main .hub-hero h1.hero-title{font-size:clamp(1.7rem,3vw,2.5rem)!important;line-height:1.12!important;letter-spacing:-.02em;color:var(--hub-navy,#071d35);margin:.1em 0}
.hero-title .grad{background:linear-gradient(120deg,var(--primary),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-reassure{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;color:var(--muted);font-size:.88rem;font-weight:600}
.hero-reassure span{display:inline-flex;align-items:center;gap:7px}
.hero-reassure i{color:var(--primary-2);font-style:normal;font-weight:900}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* héros : les 2 colonnes ont la MÊME hauteur, le visuel prend un peu plus de place */
.public-main .hub-hero{grid-template-columns:minmax(0,0.92fr) minmax(360px,1.08fr);align-items:stretch;gap:28px}
@media(max-width:900px){.public-main .hub-hero{grid-template-columns:1fr}}

/* --------------------------------- héros : fenêtre d'aperçu (carrousel) ---- */
.hero-shot{position:relative;display:flex;flex-direction:column}
.shot-frame{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 70px rgba(7,29,53,.16),0 3px 10px rgba(7,29,53,.05);cursor:pointer;flex:1;display:flex;flex-direction:column}
.shot-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(15,127,209,.045),transparent)}
.shot-bar .d{width:10px;height:10px;border-radius:50%}
.shot-bar .d:nth-child(1){background:#ff5f57}.shot-bar .d:nth-child(2){background:#febc2e}.shot-bar .d:nth-child(3){background:#28c840}
.shot-url{margin-left:8px;font-size:.72rem;color:var(--muted);font-weight:600;background:rgba(15,127,209,.06);border:1px solid var(--border);border-radius:7px;padding:3px 12px}
.shot-stage{position:relative;min-height:300px;padding:15px 18px 4px;flex:1;display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){.hero-shot .shot-stage{display:block}}
.shot-slide{display:none;animation:shotfade .35s ease}
.shot-slide.on{display:block}
@keyframes shotfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.shot-lab{font-size:.74rem;font-weight:800;color:var(--hub-navy,#0b3a63);margin-bottom:10px}
.shot-lab .muted{font-weight:600;color:var(--muted)}
.shot-dots{display:flex;justify-content:center;gap:7px;padding:6px 0 13px;flex-wrap:wrap}
.shot-dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:0;cursor:pointer;padding:0;transition:.2s}
.shot-dot:hover{background:var(--muted)}
.shot-dot.on{background:var(--primary);width:22px;border-radius:5px}
.shot-hint{text-align:center;font-size:.68rem;color:var(--muted);padding:0 0 12px}
.hero-shot .recap-spectrum{height:34px;flex:1}
.hero-shot .recap-spectrum__seg-label{font-size:.66rem;font-weight:700}
.hero-shot .timeline-label{font-size:.62rem}
/* slide « étirée » (emploi du temps) : remplit toute la hauteur de la fenêtre.
   La FRISE, elle, n'est PAS étirée (essai fait : ça ne faisait que du vide). */
.hero-shot .shot-slide--fill.on{display:flex;flex-direction:column;flex:1;min-height:0}
.hero-shot .shot-slide--fill>.shot-lab{flex:none}
.hero-shot .shot-slide--fill .hero-edt{flex:1;display:flex;flex-direction:column;min-height:0}
.hero-shot .shot-slide--fill .hero-edt .he-grid{flex:1;height:auto;min-height:230px}

/* --- slide « frise de saison » : vrai composant .timeline, en compact -------
   La 1re colonne (Macro/Méso/Micro/Compét.) est resserrée + texte clippé,
   sinon les libellés débordent dans les cases. */
.hero-shot .frise-hero-compact .timeline{grid-template-columns:62px repeat(var(--weeks),minmax(min-content,1fr));gap:4px}
.hero-shot .frise-hero-compact .timeline-label{font-size:9px;padding:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:7px}
.frise-hero-compact .timeline-row{gap:4px}
.frise-hero-compact .band-row{min-height:22px}
.frise-hero-compact .timeline-week,.frise-hero-compact .micro-cell{padding:4px;min-height:36px;border-radius:8px;gap:2px}
.frise-hero-compact .timeline-week strong{font-size:10px}
.frise-hero-compact .timeline-week span,.frise-hero-compact .micro-cell small{font-size:8px}
.frise-hero-compact .timeline-week.is-current-week,.frise-hero-compact .micro-cell.is-current-week{outline:2px solid var(--primary,#0b5cad);outline-offset:-1px}
.frise-hero-compact .cycle-band{padding:3px 5px;font-size:9.5px;border-radius:8px}
.frise-hero-compact .competition-band{font-size:8.5px;line-height:1.05;padding:3px}
.frise-hero-compact .week-theme{padding:3px;font-size:9px;border-radius:7px}
.frise-hero-compact .frise-sess-cell{min-height:32px;padding:3px;border-radius:7px;gap:2px}
.frise-hero-compact .frise-sess-pill{width:22px;height:26px;border-radius:7px;padding:3px 1px 2px}
.frise-hero-compact .frise-sess-pill b{font-size:7px}
.frise-hero-compact .frise-sess-pill span{font-size:6.5px}

/* --- slide « présences & volume » : vraie matrice .attendance-matrix -------- */
.sth-pres-hero{font-size:12px}
.sth-pres-hero .legend-line{gap:8px;margin-bottom:8px;font-size:11px}
.sth-pres-hero .legend-line .call-badge{min-width:22px;padding:2px 5px;font-size:10px}
.sth-pres-hero .attendance-matrix-wrap{max-height:none}
.sth-pres-hero .attendance-matrix th,.sth-pres-hero .attendance-matrix td{min-width:54px;padding:4px 6px;font-size:11px}
.sth-pres-hero .attendance-matrix .sticky-col{min-width:108px}
.sth-pres-hero .attendance-context-row .context-axis{min-width:108px}
.sth-pres-hero .attendance-context-row .context-band-cell{font-size:10px;padding:2px 4px}
.sth-pres-hero .session-col{font-size:10px;line-height:1.15}
.sth-pres-hero .call-badge{min-width:22px;padding:2px 5px;font-size:11px}
.sth-pres-hero .muted{font-size:10px}
.sth-pres-hero .small{font-size:9px}
/* la 1re colonne (le sportif) resserrée -> moins de défilement horizontal */
.hero-shot .attendance-matrix-wrap .sticky-col{min-width:74px}

/* --- slide « emploi du temps » : maquette fidèle des blocs colorés du vrai
   agenda (couleurs = AGENDA_PALETTE, posées en inline sur chaque bloc) ------- */
.hero-edt{font-size:.7rem}
.hero-edt .he-head{display:grid;grid-template-columns:36px repeat(3,1fr);gap:6px;margin-bottom:6px}
.hero-edt .he-dh{text-align:center;font-weight:800;color:var(--hub-navy,#0b3a63);background:rgba(15,127,209,.07);border-radius:8px;padding:5px 4px;font-size:.72rem}
.hero-edt .he-dh.he-today{background:rgba(15,127,209,.16);box-shadow:inset 0 0 0 1px var(--primary)}
.hero-edt .he-grid{display:grid;grid-template-columns:36px repeat(3,1fr);gap:6px;height:256px}
.hero-edt .he-gut{display:flex;flex-direction:column;justify-content:space-between;font-size:.62rem;color:var(--muted);text-align:right;padding:4px 2px}
.hero-edt .he-day{position:relative;background:rgba(15,127,209,.04);border:1px solid var(--border);border-radius:9px;overflow:hidden}
.hero-edt .he-day.he-today-col{background:rgba(15,127,209,.07)}
.hero-edt .he-blk{position:absolute;left:4px;right:4px;background:var(--c);color:#fff;border-left:4px solid rgba(255,255,255,.55);border-radius:7px;padding:4px 8px;font-weight:800;font-size:.68rem;line-height:1.18;overflow:hidden;box-shadow:0 3px 7px rgba(15,23,42,.2)}
.hero-edt .he-blk small{display:block;font-weight:600;opacity:.92;font-size:.59rem;margin-top:2px}
/* semaine complète (7 jours, compact) */
.hero-edt--week .he-head,.hero-edt--week .he-grid{grid-template-columns:24px repeat(7,1fr);gap:4px}
.hero-edt--week .he-dh{font-size:.58rem;padding:4px 1px}
.hero-edt--week .he-gut{font-size:.56rem}
.hero-edt--week .he-blk{font-size:.56rem;padding:3px 5px;line-height:1.12}
.hero-edt--week .he-blk b{font-weight:900;margin-right:1px}

/* --- slide « suivi du nageur » : donut Corps (classes .q4 réelles) --------- */
.hero-shot .q4-corps{display:flex;align-items:center;gap:18px;justify-content:center;padding:6px 0}
.hero-shot .q4-donutwrap{flex:none}
.hero-shot .q4-donut{position:relative}
.hero-shot .q4-ring{position:relative;display:grid;place-items:center;border-radius:50%}
.hero-shot .q4-ring-mid{position:absolute;inset:25%;border-radius:50%;background:var(--card);display:grid;place-items:center;text-align:center;box-shadow:0 0 0 1px var(--border) inset}
.hero-shot .q4-ring-mid small{font-size:.55rem;color:var(--muted)}
.hero-shot .q4-cap{display:none}
.hero-shot .q4-bodypct{display:flex;gap:8px;flex:1}
.hero-shot .q4-bodypct .bp{flex:1;background:rgba(15,127,209,.05);border:1px solid var(--border);border-radius:11px;padding:9px 10px}
.hero-shot .q4-bodypct .bp .v{font-size:1.65rem;font-weight:800;color:var(--hub-navy,#0b3a63);line-height:1}
.hero-shot .q4-bodypct .bp .l{font-size:.66rem;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:5px;font-weight:700}
.hero-shot .q4-bodypct .bp .l i{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none}
.hero-shot .q4-bodypct .bp .m{font-size:.62rem;color:var(--muted);margin-top:3px}
.hero-shot .q4-purpose{font-size:.7rem;color:var(--muted)}
.hero-shot .q4-donut,.hero-shot .q4-ring{width:120px!important;height:120px!important}

/* --- slide « intensité · réalisé par cycle » : ruban global + 4 vignettes
   (Macro/Méso/Séquence/Micro), chacune avec son sélecteur EN LECTURE SEULE --- */
.hero-icyc .q4-igl{font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:5px}
.hero-icyc .q4-iruban{height:24px;border-radius:8px}
/* minmax(0,1fr) et pas 1fr : sinon le sélecteur de niveau (4 libellés en une ligne)
   impose sa largeur minimale aux colonnes et la grille déborde du cadre sur mobile. */
.hicyc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:11px 0 9px}
.hicyc-vig{border:1px solid var(--border);border-radius:12px;padding:8px 9px 7px;background:rgba(15,127,209,.025)}
.hicyc-sel{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:var(--card);margin-bottom:9px}
.hicyc-sel span{font-size:.55rem;font-weight:800;padding:3px 9px;color:var(--muted);letter-spacing:.02em}
.hicyc-sel span.on{background:var(--primary,#0b5cad);color:#fff}
.hicyc-evo{display:flex;align-items:flex-end;justify-content:center;gap:8px;min-height:152px}
.hicyc-vig .q4-ecol{flex:1 1 0;min-width:0;max-width:64px;gap:4px}
.hicyc-vig .q4-estack{max-width:42px}
.hicyc-vig .q4-elab{font-size:.6rem;max-width:100%}
.hicyc-vig .q4-evol{font-size:.58rem}
.hero-icyc .q4-izlegend{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:9px;font-size:.62rem;color:var(--muted)}
.hero-icyc .q4-izlegend span{display:inline-flex;align-items:center;gap:4px}
.hero-icyc .q4-izlegend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* --- slide « une séance · 4 dimensions » : récap imbriqué (chaque ligne
   découpe la précédente : nages > corps > intensité > matériel).
   ⚠️ Couleurs & structure NON MODIFIABLES : il y a une raison au display actuel. */
.hero-4d{padding:2px 0}
.hero-4d .h4-vol{font-size:.74rem;color:var(--muted);font-weight:700;margin-bottom:9px}
.hero-4d .h4-vol b{font-size:1.2rem;color:var(--hub-navy,#0b3a63)}
.hero-4d .h4-row{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:8px;margin-bottom:7px}
.hero-4d .h4-lab{font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--muted);text-align:right;line-height:1.05;overflow:hidden}
.hero-4d .h4-track{display:flex;height:32px;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.hero-4d .h4c{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;color:#fff;line-height:1.02;white-space:nowrap;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.hero-4d .h4c.light{color:#0f172a;text-shadow:none}
.hero-4d .h4c .l{font-size:.52rem;font-weight:700;text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;opacity:.95}
.hero-4d .h4c .m{font-size:.6rem;font-weight:900}
.hero-4d .h4c.bd2{box-shadow:inset 1px 0 0 rgba(15,23,42,.18)}
.hero-4d .h4c.bd1{box-shadow:inset 2px 0 0 var(--card)}
.hero-4d .h4c.bd0{box-shadow:inset 4px 0 0 var(--card)}
.hero-4d .h4-cap{font-size:.64rem;color:var(--muted);margin-top:9px}
.hero-4d .h4-cap b{color:var(--primary)}

/* --- slide « suivi d'objectif » : structure réelle de la fenêtre
   (Objectif en début de cycle | Retour en fin de cycle, nageur ⟷ coach).
   Les textes sont écrits par des HUMAINS : aucun commentaire généré. -------- */
.hero-obj{padding:2px 0}
.hobj-card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 22px rgba(7,29,53,.06);padding:13px 15px}
.hobj-name{font-size:.84rem;font-weight:800;color:var(--hub-navy,#071d35);margin-bottom:11px}
.hobj-name .muted{font-weight:600;color:var(--muted);font-size:.72rem}
.hobj-sec{margin-bottom:11px}
.hobj-sec:last-child{margin-bottom:0}
.hobj-sech{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.hobj-tag{font-size:.6rem;font-weight:800;padding:3px 10px;border-radius:999px}
.hobj-tag.obj{background:rgba(15,127,209,.12);color:#0b3a63}
.hobj-tag.ret{background:rgba(124,58,237,.12);color:#5b21b6}
.hobj-sech .muted{font-size:.66rem;color:var(--muted);font-weight:600}
.hobj-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hobj-box{border:1px solid var(--border);border-radius:11px;padding:8px 10px;background:rgba(15,127,209,.03)}
.hobj-box.c{background:rgba(124,58,237,.045)}
.hobj-who{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.hobj-av{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.6rem;font-weight:800;color:#fff;background:#2563eb}
.hobj-av.co{background:#7c3aed}
.hobj-who b{font-size:.64rem;color:var(--hub-navy,#0b3a63)}
.hobj-box p{font-size:.72rem;color:var(--text);line-height:1.3}

/* --- slide « tableau de bord sur smartphone » : vue à largeur de téléphone
   (pas de fausse coque). Miroite le vrai tableau de bord coach. ------------- */
.hero-phone{display:flex;justify-content:center;padding:2px 0}
.hp-mini{width:min(404px,96%);border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--card);box-shadow:0 18px 44px rgba(7,29,53,.16)}
.hp-mini-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(15,127,209,.05);border-bottom:1px solid var(--border)}
.hp-mini-bar span{width:8px;height:8px;border-radius:50%;background:var(--border)}
.hp-mini-bar b{margin-left:6px;font-size:.66rem;color:var(--muted);font-weight:700}
.hp-screen{position:relative;background:var(--bg,#eaf6ff)}
.hpd-band{background:var(--hero-grad,linear-gradient(135deg,#0b3a63,#0f7fd1));color:#fff;padding:16px 14px 13px}
.hpd-eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:.58rem;font-weight:800;opacity:.82}
.hpd-greet{font-size:1.08rem;font-weight:800;margin:2px 0 9px}
.hpd-toggle{display:inline-flex;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:2px;gap:2px;margin-bottom:10px}
.hpd-toggle span{font-size:.64rem;font-weight:800;padding:4px 11px;border-radius:999px;color:#e3effb}
.hpd-toggle span.on{background:#fff;color:#0b3a63}
.hpd-chips{display:flex;gap:6px;flex-wrap:wrap}
.hpd-chip{display:inline-flex;align-items:center;gap:4px;font-size:.62rem;font-weight:800;padding:4px 8px;border-radius:8px;background:#fff;color:#0f172a;border-left:3px solid var(--primary,#0f7fd1);box-shadow:0 3px 8px rgba(7,29,53,.16)}
.hpd-chip.warn{border-left-color:#d97706}
.hpd-chip.compet{border-left-color:#db2777}
.hpd-card{background:var(--card,#fff);border:1px solid var(--border,#dbe3ef);border-radius:13px;margin:11px 12px 0;box-shadow:0 6px 16px rgba(15,23,42,.07)}
.hpd-next{display:flex;gap:10px;align-items:center;padding:11px 12px;border-left:4px solid var(--primary,#0f7fd1)}
.hpd-cal{flex:none;width:40px;height:40px;border-radius:10px;background:rgba(15,127,209,.12);color:#0b3a63;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.hpd-cal b{font-size:1.05rem;font-weight:900}.hpd-cal small{font-size:.5rem;font-weight:800;letter-spacing:.03em}
.hpd-nx{min-width:0}
.hpd-when{color:var(--muted,#64748b);font-size:.62rem;font-weight:700}
.hpd-what{font-size:.78rem;font-weight:800;color:var(--hub-navy,#0b3a63);line-height:1.16;margin:2px 0}
.hpd-who{color:var(--muted,#64748b);font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpd-pv{margin:11px 12px 14px}
.hpd-pvhead{font-size:.68rem;font-weight:800;color:var(--hub-navy,#0b3a63);display:flex;align-items:center;gap:6px;margin-bottom:7px}
.hpd-pill{font-size:.58rem;font-weight:800;color:#92400e;background:rgba(245,158,11,.2);border-radius:999px;padding:1px 7px}
.hpd-pvgrid{display:flex;gap:6px}
.hpd-mini{flex:1;min-width:0;background:var(--card,#fff);border:1px solid var(--border,#dbe3ef);border-top:3px solid var(--primary,#0f7fd1);border-radius:9px;padding:6px 4px;text-align:center;box-shadow:0 3px 9px rgba(15,23,42,.05)}
.hpd-mini b{display:block;font-size:.62rem;font-weight:800;color:#0f172a}
.hpd-mini small{font-size:.53rem;color:var(--muted,#64748b);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpd-grp{padding:10px 12px}
.hpd-grp-h{font-size:.66rem;font-weight:800;color:var(--hub-navy,#0b3a63);margin-bottom:6px}
.hpd-grp-row{display:flex;align-items:center;gap:8px;font-size:.66rem;color:var(--text);font-weight:600;padding:3px 0}
.hpd-grp-row b{margin-left:auto;color:var(--muted);font-weight:800}
.hpd-dot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}

/* --- slides « fiche du nageur » : la VRAIE page publique, en direct ---------
   Principe (tranché) : la vitrine RÉFÉRENCE l'écran réel au lieu d'en figer une
   copie qui se périme. On met la page publique du nageur de démonstration dans
   un cadre mis à l'échelle ; le jour où l'écran change, l'accueil suit seul.
   L'iframe n'est chargée qu'au 1er affichage de la slide (pas de coût sur
   l'arrivée d'un visiteur). */
.hero-live{position:relative}
.hero-live-pill{position:absolute;top:-24px;right:0;font-size:.68rem;font-weight:800;letter-spacing:.03em;
  border-radius:999px;padding:3px 9px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
.hero-live-vp{overflow:hidden;border-radius:12px;border:1px solid var(--border);background:#fff}
.hero-live-vp iframe{border:0;transform-origin:0 0;display:block}

/* ------------------------------------------------------------ compteurs ---- */
.trust{margin:8px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-in{display:flex;flex-wrap:wrap;gap:10px 36px;justify-content:space-between;padding:18px 0;width:min(1180px,92vw);margin-inline:auto}
.trust .stat b{font-size:1.55rem;color:var(--hub-navy,#071d35);letter-spacing:-.03em}
.trust .stat span{display:block;font-size:.8rem;color:var(--muted);font-weight:700}

/* ------------------------------------------------------ chaîne intégrée ---- */
/* ⭐ 07/08/2026 (Simon) — LES VIGNETTES SONT CENTRÉES. En grille `auto-fit` + `1fr`, les colonnes
   remplissent la largeur : la dernière ligne, incomplète, restait collée à GAUCHE avec un grand
   vide à droite (9 vignettes pour 8 colonnes = une vignette seule, de travers). En flex, la
   dernière ligne se centre sous les autres. Les vignettes gardent leur largeur : `flex:0 1 150px`
   les laisse rétrécir sur un petit écran mais jamais s'étirer pour combler un trou. */
.chain{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
/* 190 px : la largeur qui range les NEUF vignettes en 5 + 4 sur un écran large. À 150 px elles
   tenaient à 7 par ligne, et la seconde n'en portait plus que deux — centrées, mais bancales. */
.chain .step{flex:0 1 190px}
.chain .step{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:15px 11px;text-align:center;box-shadow:var(--shadow);transition:.18s}
.chain .step:hover{transform:translateY(-4px)}
.chain .step .ic{font-size:1.45rem;display:block;margin-bottom:7px}
.chain .step b{font-size:.9rem;color:var(--hub-navy,#071d35);display:block}
.chain .step small{color:var(--muted);font-size:.73rem;display:block;margin-top:3px}
.chain-note{text-align:center;margin-top:16px;font-weight:700;color:var(--primary)}
/* bandeau « à venir » */
.soon-band{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(15,127,209,.07),rgba(41,196,216,.09));border:1px dashed var(--border);border-radius:18px;padding:16px 20px}
.soon-band .soon-tag{font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:linear-gradient(135deg,var(--primary-2),var(--primary));padding:4px 10px;border-radius:999px;white-space:nowrap}
.soon-band b{color:var(--hub-navy,#071d35)}
.soon-band .soon-item{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--text)}
.soon-band .soon-item i{font-style:normal;font-size:1.1rem}

/* ------------------------------------------- bande teaser « voir en vrai » -- */
.demo-teaser{position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(135deg,#071d35,#0b3a63 58%,#0f5e9c);color:#fff;border-radius:22px;padding:26px 30px;box-shadow:var(--shadow)}
.demo-teaser::after{content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background:radial-gradient(520px 220px at 92% 8%,rgba(41,196,216,.30),transparent 60%),repeating-linear-gradient(180deg,transparent 0 34px,rgba(255,255,255,.04) 34px 36px)}
.demo-teaser>*{position:relative;z-index:1}
.demo-teaser .dt-ic{font-size:1.7rem;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(41,196,216,.18);border:1px solid rgba(127,227,240,.32);flex:none}
.demo-teaser .dt-txt{flex:1;min-width:240px}
.demo-teaser .dt-txt h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-top:3px;color:#fff}
.demo-teaser .dt-txt p{color:#cfe6ff;margin-top:6px;font-size:.95rem}
.demo-teaser .btn{flex:none}

/* --------------------------------------------------- pour qui / atouts ----- */
/* 🔴 25/08/2026 — SÉLECTEUR RENFORCé, ET C'EST UNE CORRECTION, PAS UN GOÛT. `app.css` porte
   `.hub-feature-card span{font-size:2rem}` (l'icône de la carte) : ce sélecteur pesait PLUS que
   `.who-tag` tout court, et l'étiquette « La porte d'entrée » sortait à 2rem au lieu de .7rem —
   une pastille aussi grosse que le titre de la carte. Vu à l'œil en raccourcissant la section
   « Pour qui ? », où le défaut existait déjà (vérifié sur la page AVANT le lot). Ajouter le
   parent suffit : mêmes valeurs, un poids de plus. */
.hub-feature-card .who-tag,.who-tag{display:inline-block;margin-top:10px;font-size:.7rem;font-weight:800;color:var(--primary);background:rgba(15,127,209,.08);border-radius:999px;padding:4px 10px}
.market-line{text-align:center;max-width:74ch;margin:0 auto 24px;font-size:1.02rem;color:var(--muted)}
.market-line b{color:var(--primary)}
/* ⭐ 10/08/2026 — L'ACCROCHE SE LIT EN TROIS SECONDES (mise en forme, texte inchangé).
   `.ml-det` = les énumérations qui détaillent les points d'accroche : présentes, mais un cran en
   retrait, sinon elles captent l'œil avant eux. `.ml-punch` = la conclusion, sur SA ligne — c'est
   la promesse du produit, elle se noyait en fin de paragraphe. */
.market-line .ml-det{font-size:.95em;opacity:.82}
.market-line .ml-punch{display:block;margin-top:12px;font-weight:700;color:var(--hub-navy,#071d35)}
/* Une icône par point d'accroche — MÊMES émojis que la chaîne intégrée juste en dessous.
   ⛔ L'icône vit DANS le `<b>`, collée au premier mot SANS espace dans la source : il n'y a donc
   aucun endroit où la ligne puisse se couper entre l'icône et le mot qu'elle annonce (une icône
   orpheline en fin de ligne se lirait comme une puce au milieu d'une phrase). L'écart est fait par
   la marge, pas par une espace. ⚠️ Surtout PAS de `white-space:nowrap` sur le `<b>` : « déroulez-y
   vos séances détaillées » ne pourrait plus se couper, et déborderait sous 360 px. */
.market-line .ml-ic{margin-right:.28em;font-size:1.05em;line-height:1;font-weight:400}
@media(max-width:560px){
  .market-line .ml-punch{margin-top:10px}
  .market-line .ml-ic{margin-right:.22em}
}
/* bandeau « tous mes groupes » : la chaîne, en boucle */
.intg{position:relative;border:1.5px dashed rgba(15,127,209,.32);border-radius:18px;background:rgba(15,127,209,.035);padding:24px 16px 16px;margin:0 auto 22px;max-width:920px;text-align:center}
.intg-tab{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:.72rem;font-weight:800;padding:5px 13px;border-radius:999px;white-space:nowrap}
.intg-flow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.intg-pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:7px 13px;font-size:.8rem;font-weight:800;color:var(--hub-navy,#0b3a63);box-shadow:0 3px 8px rgba(7,29,53,.05)}
.intg-loop{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:900;font-size:1rem}
.intg-cap{color:var(--muted);font-size:.95rem;margin-top:13px}
.intg-cap b{color:var(--primary)}
.uniq-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.uniq-cards{grid-template-columns:1fr}}
.ucard{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm,0 8px 22px rgba(7,29,53,.06));padding:20px;transition:.2s}
/* ⭐ 07/08/2026 (Simon) — VARIANTE COMPACTE. Les trois cartes sont remontées sous la chaîne : à
   cette place elles complètent les vignettes, elles ne rivalisent plus avec elles. Elles prennent
   donc le même calibre — badge, titre et texte d'un cran en dessous, marges resserrées. */
.uniq-head{margin:30px auto 14px}
.uniq-head h2{font-size:clamp(1.15rem,1.9vw,1.45rem)}
.uniq-cards--sm{gap:12px}
.uniq-cards--sm .ucard{padding:15px 16px;border-radius:15px}
.uniq-cards--sm .ic-badge{width:38px;height:38px;border-radius:11px;margin-bottom:9px;font-size:1.2rem}
.uniq-cards--sm .ic-badge .svg-ic{width:21px;height:21px}
.uniq-cards--sm .ucard h3{font-size:.98rem}
.uniq-cards--sm .ucard p{font-size:.845rem;margin-top:5px}
.ucard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(15,127,209,.3)}
.ic-badge{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(15,127,209,.14),rgba(41,196,216,.18));margin-bottom:12px;font-size:1.5rem}
.ic-badge .svg-ic{width:27px;height:27px;color:var(--primary)}
.ucard h3{font-size:1.08rem;color:var(--hub-navy,#071d35)}
.ucard p{color:var(--muted);font-size:.9rem;margin-top:6px}

/* ------------------------------------------------------ bandeau MOTEUR -----
   ⚠️ GARDE-FOU CONTENU : ce bandeau dit ce que le moteur FAIT pour un coach.
   Il ne dit JAMAIS comment il s'y prend, d'où viennent les valeurs ni ce
   qu'elles valent. ⚠️ 01/08/2026 — la page qui portait ces explications est
   retirée tant qu'elle n'est pas rédigée, et les 2 boutons de sortie du
   bandeau sont partis avec elle (`.engine-actions` n'a plus d'emploi). */
.engine-band{background:linear-gradient(135deg,var(--hub-navy,#071d35),#0d3a63);color:#fff;
  border-radius:20px;padding:28px 30px;display:grid;gap:16px;box-shadow:var(--shadow)}
.engine-band .eyebrow{color:#7fe3f0;margin:0}
.engine-band h2{margin:0;color:#fff;font-size:clamp(1.3rem,2.4vw,1.9rem)}
.engine-band p{margin:0;color:#cfe4f5;max-width:62ch}
.engine-what{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:2px 0}
.engine-what div{background:rgba(255,255,255,.08);border:1px solid rgba(127,227,240,.28);border-radius:12px;
  padding:10px 13px;font-size:.88rem;font-weight:600}
.engine-what b{display:block;color:#7fe3f0;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.engine-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:4px}
.engine-band .btn.ghost{color:#fff;border-color:rgba(127,227,240,.5)}

/* ------------------------------------------------------------- origine ----- */
/* ⭐ 07/08/2026 (Simon) — « le cadre est très gros pour ce que c'est, et mal aligné ».
   Il était bâti en DEUX COLONNES (.85fr / 1.15fr) pour un titre à gauche et un paragraphe de récit
   à droite. Le paragraphe retiré, la colonne de gauche ne portait plus qu'un titre : une carte
   haute, à moitié vide, dont les deux moitiés ne s'alignaient sur rien.
   ⇒ BANDE COMPACTE : le titre et le remerciement sur une seule ligne, hauteurs alignées, marge
   intérieure divisée par deux. Le guillemet passe de 3 rem à 2 — il décorait un bloc trois fois
   plus haut. */
.origin{display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  background:linear-gradient(135deg,rgba(15,127,209,.06),rgba(41,196,216,.08));border:1px solid var(--border);border-radius:20px;padding:18px 22px}
.origin-title{flex:0 1 auto;display:flex;align-items:center;gap:12px;min-width:0}
.origin .badge-q{font-size:2rem;line-height:1;color:var(--primary-2);flex:none}
.origin h2{margin:0;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.15;color:var(--hub-navy,#071d35)}
.origin p{color:var(--muted);margin-top:10px}
/* ⭐ 07/08/2026 — LE REMERCIEMENT N'EST PLUS RÉSERVÉ À L'ACCUEIL. Il est rendu à deux endroits
   depuis que la page « Le projet » porte le récit d'origine : les règles quittent donc le préfixe
   `.origin` et deviennent celles du COMPOSANT. Seule la part de MISE EN PAGE (la largeur qu'il
   prend dans la bande de l'accueil) reste scopée à `.origin`. */
a.jascha{color:var(--primary);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.thanks{margin:0;padding:13px 15px;border-radius:14px;background:var(--card);border:1px solid var(--border);font-size:.95rem;display:flex;gap:12px;align-items:flex-start}
.thanks .av{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:800}
/* Dans la bande de l'accueil, il occupe la place qui reste à droite du titre. */
.origin .thanks{flex:1 1 380px}
/* Sur « Le projet », il ferme le premier bloc : un peu d'air au-dessus. */
.card .thanks{margin-top:14px}

/* ----------------------------------------------------------------- CTA ----- */
.cta-box{position:relative;overflow:hidden;border-radius:26px;padding:46px 40px;color:#fff;
  background:linear-gradient(135deg,#071d35,#0b3a63 60%,#0f5e9c);box-shadow:var(--shadow)}
.cta-box::after{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(600px 300px at 88% 10%,rgba(41,196,216,.35),transparent 60%),
  repeating-linear-gradient(180deg,transparent 0 38px,rgba(255,255,255,.05) 38px 40px)}
.cta-box>*{position:relative;z-index:1}
.cta-box h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.cta-box p{color:#cfe6ff;margin:12px 0 22px;max-width:48ch}

/* ---------------------------------------------------- icônes SVG maison ---- */
.svg-ic{display:inline-block;vertical-align:middle;color:var(--primary)}
.demo-teaser .dt-ic .svg-ic{width:30px;height:30px;color:#bdf0fa}
.hub-feature-card .who-ic{display:inline-flex;width:54px;height:54px;border-radius:15px;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(15,127,209,.14),rgba(41,196,216,.16));margin-bottom:6px}
.hub-feature-card .who-ic .svg-ic{width:32px;height:32px;color:var(--primary)}
.chain .step .ic .svg-ic{width:26px;height:26px;color:var(--primary)}

/* ============================ BIBLIOTHÈQUE (Le Hub) ======================== */
.lib-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:18px 0}
.libtabs{display:inline-flex;gap:4px;padding:5px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);flex-wrap:wrap}
.libtab{font-family:inherit;padding:9px 14px;border-radius:10px;font-weight:800;font-size:.87rem;color:var(--muted);cursor:pointer;border:0;background:transparent}
.libtab.on{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
.libfilters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fchip{font-family:inherit;padding:7px 13px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-weight:700;font-size:.8rem;cursor:pointer;color:var(--muted)}
.fchip.on{border-color:transparent;color:#fff;background:#071d35}
.fchip[data-f="official"].on{background:#b07a16}
.fchip[data-f="community"].on{background:#0e7490}
.libpanel{display:none}.libpanel.on{display:block}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.vgrid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.vgrid{grid-template-columns:1fr}}
.lib-empty{color:var(--muted)}
/* référentiels du Hub : listes de zones (noms venus de la BASE, jamais en dur) */
.zref{margin:0 0 12px}
.zref-h{margin:0 0 6px;font-weight:800;font-size:.9rem;color:var(--hub-navy,#071d35)}
.zref-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px 7px}
.zref-l li{display:inline-flex;align-items:center;gap:6px;font-size:.83rem;font-weight:600;
  border:1px solid var(--border);border-radius:999px;padding:4px 10px;background:var(--card)}

/* ========================= APERÇU EN VRAI (lecture seule) ================== */
.demo-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 0 4px;
  background:linear-gradient(135deg,#071d35,#0b3a63);color:#eaf4ff;border-radius:18px;padding:18px 22px;box-shadow:var(--shadow)}
.demo-banner .lock{font-size:1.5rem;flex:none}
.demo-banner h2{font-size:clamp(1.3rem,2.3vw,1.7rem)}
.demo-banner p{color:#cfe6ff;margin:5px 0 0;font-size:.9rem;max-width:62ch}
.demo-banner .btn{margin-left:auto}
.ro-pill{display:inline-flex;align-items:center;gap:6px;font-size:.69rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  color:#06121f;background:linear-gradient(135deg,#29c4d8,#7fe3f0);padding:5px 11px;border-radius:999px}
.ro-pill.live{background:linear-gradient(135deg,#16a34a,#0d9488);color:#fff}
.demo-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 16px}
.demo-tab{font-family:inherit;padding:10px 16px;border-radius:12px;font-weight:800;font-size:.88rem;color:var(--muted);cursor:pointer;border:1px solid var(--border);background:var(--card);display:inline-flex;gap:7px;align-items:center}
.demo-tab.on{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent}
.demo-panel{display:none}.demo-panel.on{display:block}
.appwin{border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.appwin-bar{display:flex;align-items:center;gap:9px;padding:10px 15px;background:rgba(15,127,209,.06);border-bottom:1px solid var(--border)}
.appwin-bar .d{width:10px;height:10px;border-radius:50%}
.appwin-bar .d:nth-child(1){background:#ff5f57}.appwin-bar .d:nth-child(2){background:#febc2e}.appwin-bar .d:nth-child(3){background:#28c840}
.appwin-bar .url{margin-left:6px;font-size:.74rem;color:var(--muted);font-weight:700;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:4px 10px}
.appwin-bar .ro-pill{margin-left:auto}
.appwin-body{padding:20px;overflow-x:auto}
.appwin-body.is-static{position:relative}
.appwin-body.is-static::after{content:"Capture · aperçu non interactif";position:absolute;top:8px;right:12px;font-size:.66rem;font-weight:800;color:var(--muted);background:var(--card);border:1px solid var(--border);border-radius:999px;padding:3px 9px}
.appwin-body--frame{padding:0}
.liveframe{display:block;width:100%;height:720px;border:0;background:#fff}
@media(max-width:680px){.liveframe{height:560px}}
.ro-foot{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.82rem;color:var(--muted);font-weight:600;flex-wrap:wrap}
.ro-foot b{color:var(--primary)}

/* --- capture figée de l'emploi du temps -------------------------------------
   Décision verrouillée : l'EDT n'a pas de page publique -> l'aperçu montre une
   CAPTURE, et le dit. Ces règles sont une copie de l'inline CSS du vrai agenda
   (`app/Views/planning/_agenda_grid.php`) : à resynchroniser si l'agenda change. */
.edt-wrap{margin-top:4px}
.edt-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.edt-bar .muted{font-size:13px}
.edt-seg{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.edt-seg .seg-btn{padding:6px 11px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;background:var(--card)}
.edt-seg .seg-btn+.seg-btn{border-left:1px solid var(--border)}
.edt-seg .seg-btn.on{background:var(--primary);color:#fff}
.edt-wknav{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:9px;padding:3px 6px;background:var(--card)}
.edt-wknav a{text-decoration:none;color:var(--text);font-size:16px;padding:0 6px;border-radius:6px}
.edt-wknav .lbl{font-weight:700;font-size:13px;min-width:120px;text-align:center}
.edt-wknav .edt-today{color:var(--primary,#0b5cad);font-weight:800;border:1px solid var(--border);margin-left:2px}
.edt-legend{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.edt-leg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.edt-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.edt-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.edt{min-width:760px}
.edt-head{display:grid;grid-template-columns:62px repeat(7,minmax(96px,1fr));position:sticky;top:0;z-index:3;background:var(--card);border-bottom:1px solid var(--border)}
.edt-dh{padding:7px 6px;text-align:center;border-left:1px solid var(--border)}
.edt-dh .dn{font-weight:700;font-size:13px}
.edt-dh .dd{color:var(--muted);font-size:11px}
.edt-dh.today{background:rgba(15,116,216,.10)}
.edt-allday{display:grid;grid-template-columns:62px repeat(7,minmax(96px,1fr));border-bottom:2px solid var(--border);background:var(--bg)}
.edt-allday .ad-gut{display:flex;align-items:center;justify-content:flex-end;padding:3px 6px;font-size:14px;line-height:1}
.edt-allday .ad-col{border-left:1px solid var(--border);padding:3px 4px;display:flex;flex-direction:column;gap:3px;min-height:22px}
.edt-compband{display:block;font-size:10.5px;font-weight:800;color:var(--text,#7c4a03);background:color-mix(in srgb,var(--warn,#f59e0b) 14%,transparent);border:1px solid color-mix(in srgb,var(--warn,#f59e0b) 45%,transparent);border-left:3px solid var(--cc,#f59e0b);border-radius:6px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.edt-body{display:grid;grid-template-columns:62px repeat(7,minmax(96px,1fr));position:relative}
.edt-gutter{position:relative}
.edt-gutter .edt-hr span{position:absolute;top:-8px;right:7px;font-size:11px;color:var(--muted)}
.edt-hr{height:54px;border-bottom:1px solid var(--border);position:relative}
.edt-col{position:relative;border-left:1px solid var(--border)}
.edt-col.today{background:rgba(15,116,216,.05)}
.edt-blk{position:absolute;border-radius:9px;padding:4px 7px;overflow:hidden;color:#fff;
  border:1px solid rgba(255,255,255,.25);box-shadow:0 3px 8px rgba(15,23,42,.18)}
/* créneau PRÉVU (récurrent, pas de séance posée) : pointillé + accent groupe */
.edt-blk.is-free{background:transparent;color:var(--muted);border:1.5px dashed var(--border);border-left:4px solid var(--g,#94a3b8);box-shadow:none}
.edt-blk.is-free .edt-bg{color:var(--text)}
.edt-blk.is-free .edt-bt{color:var(--muted)}
.edt-free{display:inline-block;color:var(--primary-2,#0f74d8);font-weight:800;font-size:11px;margin-top:2px}
.edt-bt{font-size:11px;font-weight:700;opacity:.95;display:flex;gap:6px;align-items:center}
.edt-bg{font-size:12.5px;font-weight:700;line-height:1.12;margin-top:1px}
.edt-loc{font-size:10.5px;opacity:.92;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edt-title{font-size:11px;opacity:.96;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edt-pool{font-size:10px;font-weight:800;background:rgba(255,255,255,.22);border-radius:5px;padding:0 4px;margin-left:auto}
.edt-st{display:inline-block;font-size:9.5px;font-weight:800;background:rgba(0,0,0,.2);border-radius:5px;padding:1px 5px;margin-top:3px}
.edt-hint{margin-left:auto}

/* ================ PAGES RÉSERVÉES — bloc RETIRÉ le 01/08/2026 ==============
   `.cc-hold` / `.cc-tag` / `.cc-soon` n'habillaient que l'EMPLACEMENT RÉSERVÉ des
   deux pages « en construction ». ⛔ Ils ne reviennent pas avec « Comment ça marche »
   le 07/08 : l'emplacement réservé a disparu, remplacé par du contenu. Le style reste
   dans l'archive avec `engine_try`, qui, elle, n'est toujours pas réinstallée :
   `archive/2026-08-01/pages_en_construction_retirees/`. */

/* ====== BIBLIOTHÈQUE › RÉFÉRENTIELS — les trois modales (07/08/2026) ==========
   ⛔ RIEN DE NEUF SUR LA MODALE ELLE-MÊME : `.modal-overlay` / `.modal-card` viennent d'`app.css`
   et ne sont pas redéclarés. On n'ajoute qu'une LARGEUR : les trois tables (zones transposées,
   catégories, types) ont beaucoup de colonnes, et le gabarit à 720 px les faisait défiler dès le
   premier référentiel. Le contenu défile toujours DANS la carte — la page, jamais. */
.modal-card.ref-modal{max-width:min(1000px,96vw)}
.ref-modal .table-wrap{margin-bottom:10px}
.ref-modal h3{margin:16px 0 6px}
.ref-modal h3:first-of-type{margin-top:6px}
.ref-modal .public-ref-nav{margin-bottom:10px}

/* ============ « COMMENT ÇA MARCHE » — page de transparence (07/08/2026) ======
   ⛔ AUCUNE COULEUR DE PALIER ICI, ET C'EST DÉLIBÉRÉ. Les treize couleurs des barreaux
   sont posées en style EN LIGNE par les figures, qui les lisent sur `sp_palier_tiers()`
   (`_palier_gauge.php`) — la même source que la jauge de la fiche nageur. Les recopier
   dans cette feuille aurait fait une deuxième vérité, qui divergerait le jour où la
   grille bouge. Les seules couleurs écrites ci-dessous sont des couleurs de MISE EN
   PAGE (fonds, bordures, surlignage d'un résultat), qui ne portent aucun sens métier.

   ⛔ AUCUNE BULLE NON PLUS : les points de la vision globale portent `data-tip` /
   `data-tip-head` et sont servis par la bulle MAISON du gabarit (`rev_tooltip.php`).

   Tout le reste (jetons `--card` `--border` `--muted` `--primary`…, `.btn`, `.eyebrow`,
   `.muted`) vient de `app.css` : rien n'est redéclaré. */

/* -- héros + sélecteur de profondeur -- */
.ccm-hero{padding:6px 0 26px;border-bottom:1px solid var(--border);margin-bottom:0}
.ccm-hero-title{margin:.05em 0 .18em;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.08;
  letter-spacing:-.025em;color:var(--hub-navy,#071d35)}
.ccm-hero-sub{margin:0;max-width:62ch;color:var(--muted);font-size:1.03rem}

/* La barre de profondeur suit le lecteur : la page est longue, et changer de profondeur
   depuis le bas doit rester possible sans remonter. `top` dégage l'en-tête public,
   lui-même collant (`.public-header`, z-index 20) — d'où le z-index 15, EN DESSOUS. */
/* ⛔ PAS DE MARGE NÉGATIVE ICI. Un `margin:0 -16px` pour étendre le fond jusqu'aux bords du
   conteneur débordait la page de 6 px entre 821 et ~1150 px : la gouttière de `.public-main`
   (`calc(100% - 32px)`) ne vaut pas 16 px de chaque côté à toutes les largeurs, et un pari sur
   sa valeur se paie en barre de défilement horizontale. La barre s'aligne donc sur le contenu —
   il n'y a de toute façon rien à couvrir au-delà : la carte commence au même bord. */
.ccm-switch{position:sticky;top:73px;z-index:15;margin:0 0 26px;
  background:color-mix(in srgb,var(--card) 94%,transparent);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--border)}
.ccm-switch-in{display:flex;align-items:center;gap:16px;padding:10px 0}
.ccm-switch-lab{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);flex:0 0 auto}
.ccm-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.ccm-tabs::-webkit-scrollbar{display:none}
.ccm-tab{flex:0 0 auto;display:grid;gap:1px;text-align:left;background:transparent;
  border:1px solid transparent;border-radius:12px;padding:7px 14px;cursor:pointer;font:inherit;
  color:var(--muted);transition:.15s;white-space:nowrap}
.ccm-tab:hover{background:rgba(15,116,216,.07);color:var(--text)}
.ccm-tab-fam{font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;opacity:.75}
.ccm-tab-nom{font-size:.94rem;font-weight:700}
.ccm-tab[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.ccm-tab[aria-selected="true"] .ccm-tab-fam{opacity:.85}

.ccm-share{position:relative;margin-left:auto;flex:0 0 auto}
.ccm-share-pop[hidden]{display:none!important}
.ccm-share-pop{position:absolute;right:0;top:calc(100% + 8px);width:290px;background:var(--card);
  border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:6px;display:grid;gap:2px;z-index:50}
.ccm-share-pop button{display:grid;gap:2px;text-align:left;background:none;border:0;
  border-radius:12px;padding:10px 12px;cursor:pointer;font:inherit;color:inherit}
.ccm-share-pop button:hover{background:rgba(15,116,216,.08)}
.ccm-share-pop b{font-weight:700}
.ccm-share-pop span{font-size:.78rem;color:var(--muted);line-height:1.35}

/* -- contenu d'une profondeur --
   ⭐ DEUX COLONNES SUR GRAND ÉCRAN (demande Simon 07/08 : « ça prend pas la largeur »).
   La colonne de gauche porte le SOMMAIRE, qui devient collant : sur une page aussi longue,
   c'est la place la mieux employée — mieux qu'un texte étiré jusqu'au bord, qui se lit mal.
   Le texte, lui, reste à une largeur de lecture confortable À L'INTÉRIEUR de sa carte. */
.ccm-pane[hidden]{display:none}
.ccm-pane{animation:ccmin .28s ease}
@keyframes ccmin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ccm-pane-head{margin-bottom:18px}
.ccm-h1{margin:0 0 6px;font-size:clamp(1.35rem,2.6vw,1.85rem);letter-spacing:-.02em;color:var(--hub-navy,#071d35)}
.ccm-h1 span{color:var(--primary-2)}
.ccm-pane-head .muted{margin:0;max-width:66ch;font-size:.95rem}

.ccm-toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;padding:12px;border:1px solid var(--border);
  border-radius:16px;background:var(--card)}
.ccm-toc a{font-size:.8rem;font-weight:650;color:var(--muted);background:rgba(148,163,184,.1);
  border-radius:999px;padding:5px 11px}
.ccm-toc a:hover{background:rgba(15,116,216,.12);color:var(--primary);text-decoration:none}

/* ⭐ LE TEXTE A SON FOND (demande Simon) : une carte, celle du site — mêmes jetons que `.card`
   d'`app.css`, aucune couleur neuve. Le fond de page ne passe plus derrière les paragraphes. */
.ccm-body{background:var(--card);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow);padding:26px 30px 30px}
/* ⚠️ Le texte occupe TOUTE la carte — donc des lignes plus longues qu'un livre. On paie la
   largeur par un interligne plus aéré : c'est le réglage qui rend une longue mesure lisible.
   Paragraphes, tableaux et figures partagent le même bord gauche ET le même bord droit. */
.ccm-body{line-height:1.68}

@media(min-width:1080px){
  .ccm-pane{display:grid;grid-template-columns:236px minmax(0,1fr);gap:26px;align-items:start}
  .ccm-pane-head{grid-column:1 / -1;margin-bottom:6px}
  /* Le sommaire suit le lecteur : sur une page de cette longueur, revenir en haut pour
     changer de section serait une punition. `top` dégage l'en-tête ET la barre de profondeur. */
  .ccm-toc{position:sticky;top:158px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    margin:0;gap:3px;max-height:calc(100vh - 178px);overflow:auto}
  .ccm-toc a{background:transparent;border-radius:10px;padding:7px 10px;line-height:1.35;
    border-left:3px solid transparent}
  .ccm-toc a:hover{background:rgba(15,116,216,.08);border-left-color:var(--primary-2)}
  .ccm-body{padding:30px 38px 34px}
}
.ccm-body h2{margin:44px 0 12px;padding-top:10px;border-top:2px solid var(--border);
  font-size:1.32rem;letter-spacing:-.015em;color:var(--hub-navy,#071d35);scroll-margin-top:162px}
.ccm-body h2:first-child{margin-top:6px;border-top:0;padding-top:0}
.ccm-body h3{margin:30px 0 8px;font-size:1.06rem;color:var(--hub-navy,#071d35);scroll-margin-top:162px}
.ccm-body p{margin:0 0 14px}
.ccm-body ul,.ccm-body ol{margin:0 0 16px;padding-left:22px}
.ccm-body li{margin-bottom:7px}
.ccm-body blockquote{margin:18px 0;padding:14px 18px;border-left:4px solid var(--primary-2);
  background:rgba(15,116,216,.05);border-radius:0 14px 14px 0;color:var(--hub-navy,#071d35);font-weight:600}
.ccm-body blockquote p:last-child{margin:0}
.ccm-body strong{font-weight:700;color:var(--hub-navy,#071d35)}
.ccm-body code{background:rgba(148,163,184,.16);border-radius:6px;padding:1px 5px;font-size:.9em}
.ccm-body hr{border:0;border-top:1px solid var(--border);margin:30px 0}
/* Les tableaux de la couche « coach théorie » sont larges : ils défilent DANS leur cadre,
   la page ne pousse jamais horizontalement. */
.ccm-body table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.9rem;
  background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:block;overflow-x:auto}
.ccm-body th,.ccm-body td{padding:9px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.ccm-body th{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  background:rgba(148,163,184,.08);font-weight:800}
.ccm-body tr:last-child td{border-bottom:0}

/* -- les huit figures --
   ⚠️ Depuis que le texte est sur une carte, une figure « carte blanche » disparaîtrait dedans :
   elle prend un fond LÉGÈREMENT teinté et perd son ombre — un encart posé sur la page, pas une
   deuxième carte flottante. Aucune couleur neuve : la même teinte grise que les listes en zébré. */
.ccm-fig{margin:22px 0 26px;padding:18px;border:1px solid var(--border);border-radius:18px;
  background:rgba(148,163,184,.07)}
.ccm-fig>*{max-width:none}
.ccm-fig figcaption{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--primary-2);margin-bottom:14px}
.ccm-note{margin:12px 0 0;font-size:.83rem;line-height:1.5;color:var(--muted)}
.ccm-note b{color:var(--text)}

/* -- LES RENVOIS ET LA BIBLIOGRAPHIE (profondeur Coach theorie, 22/08/2026) --
   Le renvoi [n] est CLIQUABLE et mene a son entree. Il reste discret dans la ligne : c'est une
   note de bas de page, pas un lien d'action -- d'ou la taille reduite et la couleur d'accent
   deja utilisee par les titres de figure. Aucune couleur neuve. */
.ccm-body a.ccm-ref{font-size:.82em;font-weight:750;color:var(--primary-2);
  text-decoration:none;font-variant-numeric:tabular-nums;scroll-margin-top:162px}
.ccm-body a.ccm-ref:hover{text-decoration:underline}
/* -- LA BULLE D'UN RENVOI (23/08/2026, demande de Simon) --
   Chaque renvoi porte `data-tip` : au survol, la bulle MAISON (`_partials/rev_tooltip.php`, deja
   servie sur toutes les pages de vitrine) donne auteurs, titre, revue et annee. Le CLIC, lui, ne
   change pas -- il descend a l'entree complete, et c'est ce qui reste au toucher.
   ⛔ AUCUNE COULEUR NEUVE, AUCUN GLYPHE : le seul habillage est le curseur, parce qu'un renvoi
   est deja assez visible dans la ligne et qu'un souligne pointille sous chacun des cent-et-un
   renvois de la page ferait un texte tigre. `cursor:help` doit battre le `pointer` que porte
   tout `<a>` : d'ou une regle dediee, plus specifique que le `[data-tip]` global du partiel. */
.ccm-body a.ccm-ref[data-tip]{cursor:help}
/* L'entree pointee s'allume une fois : sans ca, un saut vers le milieu d'une liste de 58
   references laisse le lecteur chercher laquelle il vient d'ouvrir. */
.ccm-body .ccm-bib{margin:0 0 10px;padding:8px 12px;font-size:.87rem;line-height:1.55;
  border-left:3px solid transparent;border-radius:0 10px 10px 0;scroll-margin-top:162px}
.ccm-body .ccm-bib-n{display:inline-block;min-width:2.4em;font-weight:800;
  color:var(--primary-2);font-variant-numeric:tabular-nums}
.ccm-body .ccm-bib:target{background:rgba(15,116,216,.07);border-left-color:var(--primary-2)}

/* -- LE LIEN-OUTIL (22/08/2026) --
   Un renvoi qui doit se VOIR : la page de l'etalon est un outil a part, pas une note de bas de
   page. Un encart cliquable, pas un bouton d'action -- il ouvre une lecture, il ne declenche rien.
   Aucune couleur neuve : les memes jetons que les cartes et les figures. */
.ccm-lien-wrap{margin:16px 0 0}
.ccm-hero .ccm-lien-wrap{margin:18px 0 0;display:flex}
a.ccm-lien-outil{display:inline-flex;flex-direction:column;gap:2px;max-width:56ch;
  padding:12px 16px;border:1px solid var(--border);border-left:4px solid var(--primary-2);
  border-radius:0 14px 14px 0;background:var(--card);text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s}
a.ccm-lien-outil:hover{background:rgba(15,116,216,.06);border-color:var(--primary-2);
  text-decoration:none;transform:translateX(2px)}
/* ⛔ AUCUN ÉCHAPPEMENT CSS DANS CE FICHIER, ET C'EST UNE LEÇON PAYÉE (22/08/2026).
   La flèche de ce lien avait été écrite sous forme d'échappement CSS dans une règle
   `::after`. L'échappement a été mâché en cours de route — son début lu comme un code
   octal — et la page affichait un CARRÉ BLANC. Une flèche s'écrit en TEXTE SIMPLE, dans
   le contenu, comme sur les boutons de la vitrine. */
.ccm-lien-t{font-weight:750;font-size:.97rem;color:var(--primary)}
.ccm-lien-s{font-size:.83rem;line-height:1.5;color:var(--muted)}

/* -- LE RENVOI DE PROSE (23/08/2026) --
   Un renvoi ne s'ecrit plus « §3.8 » : il porte l'INTITULE de la section qu'il vise, et il se voit.
   Il vise les liens du corps, jamais les renvois de bibliographie (`.ccm-ref`) ni l'encart
   (`.ccm-lien-outil`) : chacun garde son habillage.
   ⛔ Aucun echappement, aucun glyphe decoratif ajoute par le style — cf. la lecon ci-dessus. */
/* ⭐ 25/08/2026 — LE MÊME RENVOI, HORS `.ccm-body`. La section « Qui écrit ce site » (page « Le
   projet ») pose trois liens de prose : la carte professionnelle, et deux pages du site personnel
   de l'auteur. Ils doivent se voir comme les renvois ci-dessus — pas comme un quatrieme habillage
   invente. `.lien-prose` PARTAGE donc la declaration, elle ne la recopie pas : un seul reglage a
   changer le jour ou le renvoi de prose bouge. */
.ccm-body a:not(.ccm-ref):not(.ccm-lien-outil),
a.lien-prose{color:var(--primary);font-weight:650;
  text-decoration:underline;text-decoration-color:rgba(15,116,216,.35);
  text-underline-offset:3px;text-decoration-thickness:1.5px}
.ccm-body a:not(.ccm-ref):not(.ccm-lien-outil):hover,
a.lien-prose:hover{text-decoration-color:var(--primary)}
.ccm-pane-head a{color:var(--primary);font-weight:650}
@media print{a.ccm-lien-outil{border-left-width:2px;transform:none}}

/* l'équation de l'indice */
.ccm-eq{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.ccm-eq-b{flex:1 1 150px;display:grid;gap:3px;padding:12px 14px;border:1px solid var(--border);
  border-radius:14px;background:rgba(148,163,184,.06)}
.ccm-eq-b b{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ccm-eq-lab{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ccm-eq-r{background:linear-gradient(135deg,rgba(13,148,136,.14),rgba(15,116,216,.1));
  border-color:rgba(13,148,136,.35)}
.ccm-eq-r b{color:#0d9488}
.ccm-eq-op{display:grid;place-items:center;font-size:1.3rem;font-weight:800;color:var(--muted);flex:0 0 auto}

/* thermomètre des treize barreaux */
.ccm-thermo{display:grid;gap:9px}
.ccm-th-bar{position:relative;display:flex;height:26px;border-radius:9px;border:1px solid var(--border);
  overflow:visible;margin-top:12px}
.ccm-th-bar-sm{height:18px}
.ccm-th-seg{flex:1 1 0}
.ccm-th-seg:first-child{border-radius:8px 0 0 8px}
.ccm-th-seg:last-child{border-radius:0 8px 8px 0}
.ccm-th-tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.6)}
.ccm-th-cursor{position:absolute;top:-7px;bottom:-7px;width:5px;border-radius:4px;background:var(--card);
  transform:translateX(-2.5px);box-shadow:0 0 0 2px var(--tc),0 2px 9px rgba(15,23,42,.4);z-index:3}
.ccm-th-cursor::after{content:'';position:absolute;left:50%;top:-8px;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--tc);border-bottom:0}
.ccm-th-scale{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted);font-weight:650}
.ccm-th-read{margin-top:6px;padding:10px 14px;border-radius:12px;background:rgba(148,163,184,.07);
  border-left:4px solid var(--tc);font-size:.92rem}
.ccm-th-line{margin:0 0 2px;font-size:.95rem}
.ccm-th-read b{color:var(--tc)}
.ccm-th-read .ccm-note{margin:0}

/* vision globale */
.ccm-vg{display:grid;gap:7px}
.ccm-vg-stage{position:relative;height:330px;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.ccm-vg-band{position:absolute;left:0;right:0;display:flex;align-items:center;padding-left:9px;
  background:color-mix(in srgb,var(--bc) 22%,var(--card));border-bottom:1px solid rgba(255,255,255,.75)}
.ccm-vg-band span{font-size:.62rem;font-weight:800;letter-spacing:.03em;
  color:color-mix(in srgb,var(--bc) 78%,var(--text))}
.ccm-vg-pt{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;cursor:help}
.ccm-vg-pt i{display:block;width:13px;height:13px;border-radius:50%;background:var(--pc);
  border:2.5px solid var(--card);box-shadow:0 2px 7px rgba(15,23,42,.35)}
.ccm-vg-pt span{font-size:.61rem;font-weight:800;color:var(--hub-navy,#071d35);white-space:nowrap;
  background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid var(--border);
  border-radius:5px;padding:0 4px;line-height:1.45}
.ccm-vg-x{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted);font-weight:650;padding:0 4px}

/* répartition + colonne des nages */
.ccm-rp{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.ccm-rp-nages{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;padding-right:16px;
  border-right:1px solid var(--border)}
.ccm-rp-nage{display:inline-flex;align-items:center;gap:6px;font-size:.79rem;white-space:nowrap;
  border:1px solid var(--border);border-radius:999px;padding:3px 11px;background:var(--card)}
.ccm-rp-nage i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ccm-rp-nage b{font-weight:800}
.ccm-rp-nage em{font-style:normal;font-weight:600;color:var(--muted);font-size:.94em}
.ccm-rp-list{flex:1 1 300px;list-style:none;margin:0;padding:0;display:grid;gap:3px;min-width:280px}
.ccm-rp-it{display:flex;align-items:center;gap:9px;padding:5px 9px;border-radius:9px;font-size:.85rem}
.ccm-rp-it:nth-child(odd){background:rgba(148,163,184,.06)}
.ccm-rp-it i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.ccm-rp-ep{flex:1 1 auto;font-weight:650}
.ccm-rp-lv{color:var(--muted);font-size:.78rem;flex:0 0 auto}
.ccm-rp-ec{flex:0 0 auto;min-width:52px;text-align:right;font-variant-numeric:tabular-nums;font-weight:800}

/* les deux lectures d'un même chrono */
.ccm-dl{display:grid;gap:16px}
.ccm-dl-row{display:grid;gap:6px}
.ccm-dl-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ccm-dl-head b{font-size:.92rem}
.ccm-dl-head .ccm-note{margin:0;font-size:.76rem}
.ccm-dl-val{font-size:.88rem}
.ccm-dl-val b{font-size:1.12rem;font-variant-numeric:tabular-nums}

/* zones physiologiques */
.ccm-zn{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.ccm-zn li{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:11px;font-size:.87rem}
.ccm-zn li:nth-child(odd){background:rgba(148,163,184,.06)}
.ccm-zn i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.ccm-zn-n{flex:1 1 auto;font-weight:650}
.ccm-zn-p{flex:0 0 auto;font-size:.74rem;color:var(--muted);font-weight:650}
.ccm-zn-v{flex:0 0 auto;min-width:118px;text-align:right;font-variant-numeric:tabular-nums}
.ccm-zn-v b{font-weight:800}
.ccm-zn-band{display:inline-flex;align-items:center;gap:5px;font-weight:800;
  background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.35);border-radius:8px;padding:1px 8px}
.ccm-zn-band em{font-style:normal;color:var(--muted);font-weight:600}
.ccm-zn-abs{color:var(--muted)}

/* correction de virages */
.ccm-vir{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.ccm-vir-b{flex:1 1 130px;display:grid;gap:2px;padding:11px 13px;border:1px solid var(--border);
  border-radius:13px;background:rgba(148,163,184,.06)}
.ccm-vir-b b{font-size:1.18rem;font-weight:800;font-variant-numeric:tabular-nums}
.ccm-vir-b em{font-style:normal;font-size:.68rem;color:var(--muted)}
.ccm-vir-adj{background:rgba(245,158,11,.11);border-color:rgba(245,158,11,.38)}
.ccm-vir-adj b{color:#b45309}

/* décote par distance */
.ccm-dc{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ccm-dc li{display:flex;align-items:center;gap:11px;font-size:.86rem}
.ccm-dc-lab{flex:0 0 88px;font-weight:650;color:var(--muted)}
.ccm-dc-track{flex:1 1 auto;height:15px;border-radius:8px;background:rgba(148,163,184,.16);overflow:hidden}
.ccm-dc-fill{display:block;height:100%;border-radius:8px;
  background:linear-gradient(90deg,rgba(15,116,216,.55),var(--primary))}
.ccm-dc li b{flex:0 0 62px;text-align:right;font-variant-numeric:tabular-nums;font-weight:800}

/* pied de page propre à la page */
.ccm-foot{margin:28px 0 0;padding:18px 22px;border:1px solid var(--border);border-radius:16px;
  background:rgba(148,163,184,.07);font-size:.85rem;color:var(--muted)}
.ccm-foot p{margin:0 0 8px;max-width:88ch}
.ccm-foot p:last-child{margin:0}
.ccm-foot b{color:var(--text)}

@media(max-width:820px){
  /* Sur téléphone la barre de profondeur cesse d'être collante : l'en-tête public y passe
     déjà en colonne, deux barres empilées mangeraient la moitié de l'écran. */
  .ccm-switch{position:static;margin:0 0 20px;padding:0}
  .ccm-switch-lab{display:none}
  .ccm-share{margin-left:0}
  /* ⛔ 12/08/2026 — LE MENU « PARTAGER » S'OUVRAIT HORS DE L'ÉCRAN, DONC LE BOUTON PARAISSAIT MORT.
     Sur grand écran, `.ccm-share` est poussé à DROITE (`margin-left:auto`) et son panneau, ancré
     `right:0`, se déplie vers la gauche : il tient. Sur téléphone la barre passe à la ligne et
     `margin-left:0` ramène le bouton à GAUCHE — le même ancrage `right:0` faisait alors partir les
     290 px du panneau VERS la gauche, hors de la fenêtre. Mesuré sur 375 px : le panneau ouvrait à
     -205 px, il n'en restait que 85 px visibles, sur lesquels aucun des deux choix n'était lisible
     ni atteignable. On tape « Partager », il ne se passe rien de visible.
     Le panneau s'ancre donc à GAUCHE ici, et sa largeur cesse d'être fixe : elle se borne à la
     fenêtre moins les marges, pour qu'il ne puisse pas non plus déborder à droite. */
  .ccm-share-pop{left:0;right:auto;width:min(290px,calc(100vw - 32px))}
  .ccm-switch-in{flex-wrap:wrap;gap:10px}
  /* La carte garde son fond, mais colle aux bords : sur 375 px, 30 px de marge intérieure de
     chaque côté mangeraient un sixième de la ligne. */
  .ccm-body{padding:18px 16px 20px;border-radius:14px;line-height:1.62}
  .ccm-body h2,.ccm-body h3{scroll-margin-top:20px}
  .ccm-fig{padding:14px}
  .ccm-foot{padding:16px}
  .ccm-rp-nages{flex-direction:row;flex-wrap:wrap;border-right:0;padding-right:0;
    padding-bottom:12px;border-bottom:1px solid var(--border);width:100%}
  .ccm-vg-stage{height:270px}
  .ccm-eq-op{display:none}
  .ccm-eq-b,.ccm-vir-b{flex:1 1 100%}
}

/* ⭐ IMPRESSION — « Enregistrer en PDF » n'est rien d'autre que l'impression du navigateur.
   Les trois profondeurs masquées portent `hidden`, donc elles ne s'impriment pas : il n'y a
   rien à masquer ici pour ça. Ce bloc retire le CHROME et empêche une figure d'être coupée. */
@media print{
  @page{margin:14mm 13mm}
  .public-header,.public-footer,.ccm-switch,.ccm-hero,.ccm-toc,.ccm-share-pop{display:none!important}
  .public-body{background:#fff}
  .public-main{width:auto;max-width:none;padding:0;margin:0}
  /* À l'impression, la carte n'a plus de raison d'être : la feuille EST le fond. */
  .ccm-pane{display:block;animation:none}
  .ccm-body{background:none;border:0;border-radius:0;box-shadow:none;padding:0;line-height:1.5}
  .ccm-foot{background:none;border:0;border-radius:0;padding:0}
  .ccm-pane[hidden]{display:none!important}
  .ccm-pane-head{border-bottom:3px solid var(--hub-navy,#071d35);padding-bottom:8px;margin-bottom:16px}
  .ccm-h1{font-size:19pt}
  .ccm-body h2{font-size:13pt;margin:18pt 0 6pt;break-after:avoid}
  .ccm-body h3{font-size:11pt;margin:12pt 0 4pt;break-after:avoid}
  .ccm-body p,.ccm-body li{orphans:3;widows:3}
  .ccm-fig{break-inside:avoid;box-shadow:none;padding:12px}
  .ccm-body table,.ccm-body blockquote{break-inside:avoid}
  .ccm-vg-stage{height:220px}
  .ccm-foot{border-top:1px solid #999;margin-top:18pt;padding-top:10pt}
  a{color:inherit;text-decoration:none}
}

/* ========================== RESPONSIVE / MOBILE ============================
   Audit 360-390 px : la majorité des visiteurs arrivent d'abord sur téléphone. */
@media(max-width:980px){
  /* La chaîne est passée en flex (dernière ligne centrée) : on n'y règle plus des COLONNES mais
     la largeur de base d'une vignette. Trois par ligne à cette largeur, deux plus bas. */
  .chain .step{flex:0 1 calc(33.333% - 7px)}
  /* le carrousel ne déborde JAMAIS la colonne : les composants larges (matrice
     de présences, frise) défilent en INTERNE au lieu de pousser la page. */
  .hero-shot,.hero-shot .shot-frame,.hero-shot .shot-stage,.hero-shot .shot-slide{min-width:0}
  .hero-shot .shot-slide,.hero-shot .shot-slide *{max-width:100%}
}
@media(max-width:760px){
  .hub-hero-copy{padding:22px 18px}
  .lead{font-size:1.06rem;line-height:1.5}
  /* slide « suivi » : le donut et les 3 cartes % passent à la ligne */
  .hero-shot .q4-corps{flex-wrap:wrap!important;justify-content:center;gap:12px!important}
  .hero-shot .q4-bodypct{width:100%;flex-wrap:wrap}
  .hero-shot .q4-bodypct .bp{min-width:0}
  .hero-shot .q4-bodypct .bp .v{font-size:1.3rem}
}
@media(max-width:680px){
  .chain .step{flex:0 1 calc(50% - 5px)}
  section.block{padding:36px 0}
  .cta-box{padding:30px 22px;border-radius:20px}
  .demo-teaser{padding:22px 18px;gap:14px}
  .demo-teaser .dt-txt{min-width:0}
  /* Sur téléphone la bande repasse en colonne (le `flex-wrap` s'en charge) : le titre garde sa
     place au-dessus du remerciement, et la marge intérieure se resserre encore. */
  .origin{padding:16px 18px;gap:14px}
  /* actions & CTA en pleine largeur (cibles confortables au doigt) */
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;justify-content:center}
  .demo-teaser .btn,.demo-banner .btn{width:100%;justify-content:center;flex:1 1 100%;margin-left:0}
  /* compteurs : grille 2 colonnes régulière (plus d'orphelin mal aligné) */
  .trust-in{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;justify-content:stretch}
  .trust .stat b{font-size:1.3rem}
  /* bibliothèque : onglets & filtres >= 44 px */
  .lib-head{flex-direction:column;align-items:stretch;gap:10px}
  .libtabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
  .libtab{min-height:44px;display:flex;align-items:center;justify-content:center;padding:11px 12px}
  .libfilters{width:100%;flex-wrap:wrap;gap:8px}
  .fchip{min-height:44px;padding:0 16px;display:inline-flex;align-items:center}
  /* référentiels : 1 colonne */
  .libpanel[data-libpanel="refs"] .vgrid{grid-template-columns:1fr!important}
  /* aperçu : onglets >= 44 px + cadres plus hauts (moins de double défilement) */
  .demo-tab{min-height:44px;display:inline-flex;align-items:center}
  .liveframe{height:78vh;min-height:460px}
  /* carrousel : zone tactile des points élargie (visuel inchangé) */
  .shot-dots{gap:13px;padding:8px 0 15px}
  .shot-dot{position:relative}
  .shot-dot::after{content:"";position:absolute;inset:-14px}
  /* suivi d'objectif : les 2 colonnes nageur/coach se replient */
  .hobj-pair{grid-template-columns:1fr}
  /* slide « intensité » : le sélecteur de niveau en lecture seule se resserre pour
     tenir dans une vignette de demi-largeur (sinon les 4 libellés sont rognés). */
  .hicyc-sel span{padding:3px 5px;font-size:.48rem;letter-spacing:0}
  .hicyc-vig{padding:7px 6px 6px}
  .hicyc-evo{gap:5px;min-height:132px}
}
@media(max-width:560px){
  .head h2{font-size:1.5rem}
  .head p{font-size:.95rem}
  .market-line{font-size:.95rem}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   « COMMENT ÇA MARCHE » — LE PALIER (`?page=how_it_works`, 10/08/2026)
   ───────────────────────────────────────────────────────────────────────────────────────────
   Deux cartes, deux questions. Le héros et le bandeau « Bientôt » sont RÉUTILISÉS tels quels
   (`.ccm-hero*`, `.soon-band`) : le palier n'a pas d'identité propre à inventer, c'est la même
   vitrine. Ne vit ici que ce qui n'existait pas — la grille, la carte, et surtout le bouton
   GRISÉ.

   ⛔ LE BOUTON GRISÉ N'EST PAS UN LIEN, ET LE CSS N'EST PAS CE QUI L'EN EMPÊCHE : c'est un
   `<span>` sans `href` (cf. la vue). `pointer-events:none` ne ferait que retirer la souris —
   un `<a href>` grisé resterait atteignable au clavier et ouvrirait une page vide. Le style
   ci-dessous ne fait donc que DIRE l'état, il ne le tient pas.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.hiw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px;
  align-items:stretch}
.hiw-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--border);
  border-radius:22px;padding:26px 24px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 10px 30px rgba(7,29,53,.06)}
/* Filet de couleur en haut de carte : le même dégradé marque que les bandeaux de la vitrine. */
.hiw-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.hiw-head{display:flex;align-items:center;gap:14px}
.hiw-head-txt{min-width:0}
.hiw-head-txt .eyebrow{margin:0 0 2px}
.hiw-card h2{margin:0;font-size:clamp(1.15rem,2.1vw,1.45rem);color:var(--hub-navy,#071d35);
  letter-spacing:-.015em;line-height:1.15}
.hiw-card p{margin:0}
.hiw-ic{flex:0 0 auto;display:inline-grid;place-items:center;width:54px;height:54px;border-radius:16px;
  font-size:1.6rem;line-height:1;
  background:linear-gradient(135deg,rgba(15,127,209,.14),rgba(41,196,216,.16))}
.hiw-lead{color:var(--muted);font-size:1rem}
/* Ce que la porte contient, en quatre lignes. Puces retirées : l'émoji EST la puce. */
.hiw-list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px}
.hiw-list li{display:flex;align-items:baseline;gap:9px;font-size:.94rem;
  color:var(--hub-navy,#071d35)}
.hiw-list li>span{flex:0 0 auto;width:1.25rem;text-align:center}
.hiw-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.hiw-actions .btn{display:inline-flex;align-items:center;gap:7px}
/* L'état « pas encore écrit », dit à l'œil : gris, aplati, curseur inchangé. */
.hiw-soon{background:rgba(148,163,184,.2);border:1px solid var(--border);color:var(--muted);
  box-shadow:none;cursor:default}
.hiw-soon:hover{background:rgba(148,163,184,.2);color:var(--muted);transform:none}
.hiw-pill{font-size:.6rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;
  background:rgba(100,116,139,.22);color:var(--muted);border-radius:999px;padding:2px 7px}
/* Les 4 profondeurs, annoncées avant d'entrer. */
.hiw-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hiw-chips-lab{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-right:2px}
.hiw-chip{font-size:.76rem;font-weight:700;color:var(--primary);
  background:rgba(15,127,209,.1);border-radius:999px;padding:3px 10px}
/* Le pied de carte se colle en bas : les deux colonnes gardent leurs boutons alignés, quelle
   que soit la longueur des listes au-dessus. */
.hiw-foot{margin-top:auto;padding-top:6px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.88rem}
.hiw-foot .btn{display:inline-flex;align-items:center;gap:7px}
.hiw-link{font-weight:800}
@media(max-width:560px){
  .hiw-card{padding:22px 18px}
  .hiw-actions .btn,.hiw-actions .hiw-soon,.hiw-foot .btn{flex:1 1 100%;justify-content:center;text-align:center}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   « À QUOI ÇA SERT » (`?page=what_it_does`, 25/08/2026) — préfixe `wid-`
   ───────────────────────────────────────────────────────────────────────────────────────────
   Le héros, les « œils » (`.eyebrow`), les boutons et les jetons de couleur sont RÉUTILISÉS tels
   quels : cette page n'a pas d'identité propre à inventer, c'est la même vitrine. Ne vit ici que
   ce qui n'existait pas — l'emplacement à remplir, le schéma de la chaîne, le bloc par public.

   ⭐ LE SCHÉMA DE LA CHAÎNE SUIT LE THÈME, contrairement au reste de la vitrine qui porte ses
   couleurs maison en dur (voir l'en-tête de `layouts/public.php`). Il n'écrit aucune couleur :
   `--text`, `--muted`, `--card`, `--border`, `--primary`, tous redéfinis sous
   `html[data-theme="dark"]`. C'est ce qui le rend lisible dans les deux thèmes sans une seule
   règle en double.
   ⛔ LE RESTE DE LA PAGE, LUI, RESTE SUR LA CONVENTION DE LA VITRINE (titres en `--hub-navy`,
   fixe), exactement comme `.hiw-card`. Ce n'est pas un oubli : le gabarit public sert TOUJOURS la
   vitrine en `data-theme="light"`, les deux écritures rendent donc la même chose en ligne. Le jour
   où la vitrine gagnera un mode sombre, c'est toute la feuille qui se reprendra d'un coup — une
   page à moitié convertie coûterait plus cher à rattraper qu'une page entièrement à l'ancienne.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* -- le schéma de la chaîne ---------------------------------------------------------------- */
.wid-chain{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.wid-chain-svg{display:block;width:100%;height:auto}
.wid-chain-svg--large{max-width:980px}
.wid-chain-svg--petit{max-width:320px;display:none}
/* Les libellés du schéma. ⛔ Aucune couleur écrite ici : voir l'en-tête de ce bloc. */
.wid-chain-t{font:800 19px Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  fill:var(--text);letter-spacing:-.01em}
.wid-chain-s{font:600 13px Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  fill:var(--muted)}
/* `color` sur le `<use>` : les symboles sont dessinés en `currentColor`, c'est donc ici que la
   couleur de marque entre — et nulle part dans la planche d'icônes. */
.wid-chain-ic{color:var(--primary)}
.wid-chain-cap{color:var(--muted);font-size:.9rem;text-align:center;max-width:56ch}

/* -- un bloc par public -------------------------------------------------------------------- */
.wid-block{background:var(--card);border:1px solid var(--border);border-radius:22px;
  padding:28px 26px;margin-bottom:24px;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 10px 30px rgba(7,29,53,.06);position:relative;overflow:hidden}
.wid-block:last-child{margin-bottom:0}
.wid-block::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.wid-head{display:flex;align-items:center;gap:16px}
.wid-head-txt{min-width:0}
.wid-head-txt .eyebrow{margin:0 0 3px}
.wid-block h2{margin:0;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--hub-navy,#071d35);
  letter-spacing:-.015em;line-height:1.15}
.wid-ic{flex:0 0 auto;display:inline-grid;place-items:center;width:58px;height:58px;
  border-radius:17px;background:linear-gradient(135deg,rgba(15,127,209,.14),rgba(41,196,216,.16))}
.wid-ic .svg-ic{width:34px;height:34px;color:var(--primary)}

/* ⛔ LE BLOC « STRUCTURE » EST PLUS LÉGER, ET ÇA SE VOIT : un filet gris au lieu du filet de
   marque, pas d'ombre. Ce qui existe pour une structure existe, mais c'est peu — la promesse
   doit correspondre au produit (consigne explicite de Simon). Ne pas « équilibrer » la page en
   le gonflant : le déséquilibre EST le message. */
.wid-block--leger{box-shadow:none}
.wid-block--leger::before{background:var(--border)}

/* -- les portes de sortie ------------------------------------------------------------------ */
.wid-portes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding-top:14px;border-top:1px solid var(--border)}
.wid-portes .btn{display:inline-flex;align-items:center;gap:7px}
.wid-porte{font-weight:800}
/* ⭐ 25/08/2026 — UNE PORTE PAR BLOC, ET TOUTES DU MÊME POIDS. Les trois blocs portaient
   jusqu'à trois liens dont un bouton PLEIN (« Voir les écrans en vrai ») répété à l'identique
   trois fois — la même invitation, trois fois, sans que le lecteur avance. Chaque bloc renvoie
   désormais là où SON lecteur va, et l'unique bouton plein de la page vit dans « Commencer ».
   ⛔ Ne pas remettre un bouton plein dans un bloc : c'est ce qui écrasait le troisième. */

/* -- « Commencer » : le bloc de fin, la seule invitation ------------------------------------ */
/* Il se distingue par son FOND, pas par un filet de couleur de plus : le dernier bloc doit se
   lire comme une conclusion, pas comme un quatrième public. */
.wid-final{background:linear-gradient(135deg,rgba(15,127,209,.07),rgba(41,196,216,.10))}
.wid-final::before{background:linear-gradient(90deg,var(--primary-2),var(--primary))}
/* Pas de filet de séparation au-dessus des boutons : ils SONT la fin du bloc, il n'y a rien
   après eux à séparer. */
.wid-portes--cta{border-top:0;padding-top:2px;gap:12px}

@media(max-width:920px){
  /* Le schéma en ligne descend ses libellés sous 12 px en dessous de cette largeur : on passe à
     la colonne, qui reste à taille réelle jusqu'à 320 px. */
  .wid-chain-svg--large{display:none}
  .wid-chain-svg--petit{display:block}
}
@media(max-width:560px){
  .wid-block{padding:22px 17px}
  .wid-head{gap:12px}
  .wid-ic{width:48px;height:48px;border-radius:14px}
  .wid-ic .svg-ic{width:28px;height:28px}
  .wid-portes .btn{flex:1 1 100%;justify-content:center;text-align:center}
}

/* La porte de la section « Pour qui ? » de l'accueil vers la page qui développe (25/08/2026).
   Une seule, sous les trois cartes — la section renvoie, pas chaque carte. */
.who-more{margin:22px 0 0}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   « À QUOI ÇA SERT » — LE TEXTE ET LES MAQUETTES D'ÉCRAN (25/08/2026, 2ᵉ moitié du lot)
   ───────────────────────────────────────────────────────────────────────────────────────────
   Les emplacements orange (`.wid-slot`) ont disparu avec l'arrivée du texte et des maquettes :
   leurs règles ont été retirées d'un bloc, elles n'ont plus aucun appelant.

   ⭐ LES TROIS ILLUSTRATIONS SONT DU HTML, PAS DES IMAGES. Elles réutilisent les composants du
   produit (`.timeline--colonnes`, `.hero-edt`) avec un contenu inventé — voir l'en-tête de
   `_vitrine_mocks.php` pour le motif complet. Conséquence ici : rien à dimensionner « comme une
   photo », tout se replie déjà. Ce bloc ne fait que les CADRER (fond, bordure, débordement).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* -- le texte des blocs -------------------------------------------------------------------- */
.wid-block p{margin:0;line-height:1.62;color:var(--text)}
.wid-lead{font-size:1.12rem;font-weight:700;color:var(--hub-navy,#071d35)}
/* La chute : la petite phrase qui ferme le bloc (« En club ou en indépendant… »). Elle se
   détache du corps sans crier — c'est une respiration, pas un titre. */
.wid-chute{color:var(--muted);font-weight:700}
/* Le lien qui tient la frontière avec « comment ça marche » : il est DANS l'accroche, il doit
   se voir comme un lien et pas comme la suite de la phrase. */
.wid-hero-lien{display:inline-block;margin-top:8px;font-weight:800;color:var(--primary);
  border-bottom:2px solid rgba(15,127,209,.28)}
.wid-hero-lien:hover{border-bottom-color:var(--primary)}

/* -- le cadre commun des maquettes --------------------------------------------------------- */
/* ⛔ `overflow-x:auto` OBLIGATOIRE : la frise est une grille de six semaines qui ne se replie
   pas — sous ~700 px elle est plus large que la carte. Sans ce défilement LOCAL, c'est la PAGE
   entière qui se met à défiler de côté, et on ne le voit qu'en la testant au téléphone. */
.wid-shot{margin:0;background:rgba(15,127,209,.04);border:1px solid var(--border);
  border-radius:16px;padding:14px}
.wid-shot>figcaption{margin-top:10px;color:var(--muted);font-size:.85rem}
.wid-shot--frise{overflow-x:auto}
.wid-shot--frise .planning-frise{min-width:640px}

/* -- la progression du nageur (SVG, chiffres inventés) ------------------------------------- */
.vm-prog{margin:0}
.vm-prog svg{display:block;width:100%;max-width:460px;height:auto;margin-inline:auto}
.vm-prog-v{font:800 15px Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  fill:var(--text)}
.vm-prog-s{font:700 12px Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  fill:var(--muted)}
.vm-prog figcaption{margin-top:6px;text-align:center;color:var(--muted);font-size:.83rem}
/* « Exemple inventé » : dit à l'œil, pas seulement dans un commentaire. Un lecteur doit pouvoir
   savoir que ce chrono n'appartient à personne. */
.vm-fictif{font-weight:800;color:var(--primary)}

/* -- les groupes d'une structure ----------------------------------------------------------- */
.vm-groupes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.vm-grp{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--border);border-radius:12px;padding:8px 12px;font-size:.85rem}
.vm-grp i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.vm-grp b{color:var(--hub-navy,#071d35)}
.vm-grp small{color:var(--muted)}
/* L'emploi du temps garde ses proportions du carrousel : sept colonnes ne tiennent pas sous
   560 px, il défile dans SON cadre — même raison que la frise. */
.wid-shot--structure{overflow-x:auto}
.wid-shot--structure .hero-edt{min-width:520px}

@media(max-width:560px){
  .wid-shot{padding:10px}
  .vm-grp{font-size:.8rem;padding:7px 10px}
}