/* ============================================================ Founders University — feuille du LOT B : le TEMPLATE DE PAGE PROGRAMME. Une seule règle de vie ici : ne contient QUE ce qui est propre au gabarit des deux pages programme (`ia-startup-founders.html`, `founders-sprint.html`). Tous les composants (héros, sous-nav, bandeau de faits, accordéon, registre, calendrier, tarifs, étapes, équipe, bande photo, CTA, barre collante) vivent dans `assets/chrome.css` et ne sont pas redéclarés : on ne fait ici que l'assemblage, les rythmes verticaux et trois garde-fous mobiles. Chargée par le `` de chaque page programme, APRÈS chrome.css. ============================================================ */ /* ------------------------------------------------------------ 1 · SOUS-NAV COLLANTE — ne doit jamais chevaucher la nav fixe ------------------------------------------------------------ chrome.css la colle déjà à `top: var(--nav-h-min)` (60 px = hauteur de la nav condensée) : aucun chevauchement. Il ne manque que la lisibilité une fois collée (elle glisse sur du crème puis sur de la pierre) et le fait qu'elle doit passer AU-DESSUS du contenu révélé, jamais dessous. */ .subnav { /* La barre est opaque : sans cela, un `.facts` clair qui remonte dessous transparaît entre les deux filets. */ background: var(--cream-warm); box-shadow: 0 1px 0 var(--line); transition: top var(--d-base) var(--e-out); } /* chrome.js retire la nav en descente (`.is-hidden`) : sans cette règle la sous-nav reste calée à 60 px et laisse une bande de contenu défiler au-dessus d'elle. Elle remonte donc en tête tant que la nav est absente. */ body:has(> nav.is-hidden) .subnav { top: 0; } /* Le héros est en `overflow: clip` + `isolation: isolate` ; la sous-nav doit rester au-dessus des sections suivantes, y compris des bandes navy. */ .subnav-inner { position: relative; } /* Ancres : chrome.css pose déjà `scroll-margin-top: nav-h-min + subnav-h + 16`. Le héros n'a pas besoin de cette marge (on y arrive par le haut de page) et la bande photo n'est pas une cible d'ancre. */ #hero { scroll-margin-top: 0; } /* ------------------------------------------------------------ 2 · LA FICHE — un bandeau serré, pas une section pleine ------------------------------------------------------------ §6.2 enchaîne « crème (fiche) · crème (programme) ». Pour que deux surfaces identiques ne se lisent pas comme un seul bloc de 300 px, la fiche est une BANDE : hauteur réduite, le `dl.facts` (crème chaud + filet + rayon) porte seul le contraste, et le programme démarre juste après. */ .fiche-band { padding: clamp(24px, 3.4vw, 44px) 0 0; } /* ------------------------------------------------------------ 3 · RYTHME VERTICAL DU GABARIT ------------------------------------------------------------ */ /* Le premier titre de section arrive juste sous la sous-nav collante : sans cet appui il colle au bandeau de faits. */ #programme { padding-top: clamp(48px, 6vw, 88px); } /* Le registre des livrables et le calendrier respirent après leur tête. */ #dates .format-toggle { margin-bottom: 20px; } #dates .cohort-table { margin-top: 4px; } /* Colonnes du calendrier ALIGNÉES d'une ligne à l'autre. Dans chrome.css chaque `.cohort-row` est sa PROPRE grille : les pistes `fr`/`auto` sont recalculées ligne par ligne, donc « Promo 2 », « En ligne » et la pastille d'une ligne ne tombent pas sous celles de la ligne du dessus. Sur une page qui se veut un registre, c'est le défaut le plus visible. Le sous-grid rend les pistes communes à toutes les lignes ; on ne touche qu'au-dessus de 820 px, la pile mobile de chrome.css reste intacte. */ @media (min-width: 821px) { #dates .cohort-table { grid-template-columns: 1.3fr 2.2fr 0.9fr auto auto; } #dates .cohort-row { grid-column: 1 / -1; grid-template-columns: subgrid; } } /* `.fine` sous un bloc (`.steps-2`, `.tiers`) : chrome.css ne pose pas de marge haute — ledgers.html la mettait en style local. */ .steps-2 + .fine, .tiers + .fine { margin-top: clamp(20px, 3vw, 32px); } /* Le CTA final des pages programme porte TROIS boutons (réserver · dossier · brochure) : à 640 px la carte les casse en 2 + 1. 720 px les tient sur une ligne au-dessus de 900 px, sans changer le comportement mobile. */ #cta .cta-card { width: min(100%, 720px); } /* ------------------------------------------------------------ 4 · BANDE PHOTO ENTRE #livrables ET #pour-qui ------------------------------------------------------------ La bande sort des sections : elle ne doit hériter d'aucun padding et doit toucher la bande navy au-dessus sans filet parasite. */ .photo-band { border-top: 1px solid var(--line-light); } /* ------------------------------------------------------------ 5 · GARDE-FOUS 390 px (aucun débordement horizontal) ------------------------------------------------------------ */ /* a) La pastille du héros est en `white-space: nowrap` + `.status-type` clampée à `--ch` caractères. Sur les libellés longs (« Cohorte 1 · 11-13 décembre 2026 · J-92 » = 42 signes) cela dépasse la largeur utile d'un écran de 390 px et pousse la page. Sous 560 px on laisse la pastille passer à la ligne : la ligne « qui se tape » n'a plus de sens sur deux lignes, on la neutralise proprement. Même cause, même remède pour la pastille du CTA final : `.cta-final .wrap` est une grille dont la piste unique est dimensionnée par le contenu le plus étroit possible — une pastille `nowrap` de 361 px imposait 431 px de page. */ @media (max-width: 560px) { .hero .status-live, .cta-card .status-live { white-space: normal; } .hero .status-type { display: inline; max-width: none; overflow: visible; white-space: normal; border-right: 0; padding-right: 0; animation: none; } } /* b) Les deux CTA de la sous-nav restent visibles sous 768 px (chrome.css masque déjà le ghost) ; le `