/* =============================================================================
   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 ---- */
.chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px}
.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 ----- */
.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)}
/* 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}
.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 : ça vit UNIQUEMENT sur « Comment ça marche ». */
.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 ----- */
.origin{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:center;
  background:linear-gradient(135deg,rgba(15,127,209,.06),rgba(41,196,216,.08));border:1px solid var(--border);border-radius:24px;padding:28px}
.origin .badge-q{font-size:3rem;color:var(--primary-2)}
.origin h2{font-size:clamp(1.5rem,2.6vw,2rem);color:var(--hub-navy,#071d35)}
.origin p{color:var(--muted);margin-top:10px}
.origin a.jascha{color:var(--primary);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.origin .thanks{margin-top:14px;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}
.origin .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}

/* ----------------------------------------------------------------- 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 (« Comment ça marche », moteur) ========== */
.cc-hold{border:2px dashed var(--primary);border-radius:16px;background:rgba(41,196,216,.07);
  padding:26px 24px;display:grid;gap:14px;max-width:820px}
.cc-hold .cc-tag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.cc-hold h2{margin:0;font-size:clamp(1.25rem,2.2vw,1.7rem)}
.cc-hold ul{margin:0;padding-left:20px;display:grid;gap:7px}
.cc-hold li{color:var(--muted)}
.cc-soon{font-weight:700;color:var(--primary);margin:0}

/* ========================== RESPONSIVE / MOBILE ============================
   Audit 360-390 px : la majorité des visiteurs arrivent d'abord sur téléphone. */
@media(max-width:980px){
  .chain{grid-template-columns:repeat(3,1fr)}
  .origin{grid-template-columns:1fr}
  /* 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{grid-template-columns:repeat(2,1fr)}
  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}
  .origin{padding:22px}
  /* 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}
}