/* ============================================================ Founders University — landing.css (lot A · BRIEF-V2 §6.1) Feuille de PAGE. Tout le système (tokens, chrome, boutons, héros, registres, cartes programme, modale, accordéon, marquee, CTA…) vit dans `assets/chrome.css`, chargée avant celle-ci. Ici, uniquement : 1 Rythme vertical des 11 sections de la landing 2 Déclaration (S2) — mots échelonnés (landing.js pose .w / .words-in) 3 Bande photo — sortie de flux, pleine largeur 4 Cartes programme — support + cadrage (--focus) 5 Le parcours (S6) — piste des cartes collantes 6 Calendrier (S9) — marquee sous le registre 7 Modales — densité du corps (registre + chips) 8 Sécurité 390 px (aucun débordement horizontal) Ce fichier est aussi chargé par les pages sans feuille propre (`partials/head.html`) : tout y est scopé à une section de la landing, jamais à un sélecteur nu. ============================================================ */ /* ============================================================ 1 · RYTHME VERTICAL DES SECTIONS Surfaces : navy(photo) → crème → navy → crème → pierre → photo → crème → pierre → navy → crème → pierre → navy. Jamais deux surfaces identiques consécutives (BRIEF-V2 §3). ============================================================ */ /* La déclaration est un pli, pas une section pleine : moins d'air. */ #declaration { padding: clamp(56px, 7vw, 104px) 0; } /* Le bandeau de chiffres colle au pli précédent (il porte son propre padding). */ .stat-strip + #formats { padding-top: clamp(72px, 9vw, 128px); } /* La bande photo remplace la respiration entre le registre et le parcours. */ #preuves { padding-bottom: clamp(48px, 6vw, 80px); } /* --- Pastille du héros : deux correctifs de cadrage -------------------- a) `.hero-grid` est une grille : un enfant `display:inline-flex` est « blockifié » et s'étire sur toute la colonne. La pastille doit garder la largeur de son texte. b) `.status-type` borne sa largeur à `--ch × 1ch`, mais la pastille ajoute `letter-spacing: .08em` : 39 caractères mesurent ~1,15 ch chacun et la fin de la ligne (« · J-54 ») était coupée. On rétablit la borne réelle, sur la même valeur de `--ch` (BRIEF-V2 §5.4). */ .hero-grid > .status-live { justify-self: start; } .hero .status-type { max-width: calc(var(--ch, 40) * 1.16ch); } @media (prefers-reduced-motion: no-preference) { .hero .status-type { animation: hero-typing 1.4s steps(40, end) 0.3s both, caret 1s step-end 1.7s 4; } @keyframes hero-typing { from { max-width: 0; } to { max-width: calc(var(--ch, 40) * 1.16ch); } } } /* ============================================================ 2 · DÉCLARATION (S2) — « Vous ne sortez pas avec un diplôme. » landing.js découpe la phrase en . Sans JS, sans `.w`, sans mouvement : la phrase est simplement là. ============================================================ */ #declaration .wrap { display: grid; justify-items: center; } #declaration p { max-width: 22ch; } @media (prefers-reduced-motion: no-preference) { .js #declaration .w { display: inline-block; opacity: 0; transform: translateY(0.32em); transition: opacity 520ms var(--e-out), transform 520ms var(--e-out); transition-delay: calc(var(--w, 0) * 40ms); } .js #declaration.words-in .w { opacity: 1; transform: none; } } /* ============================================================ 3 · BANDE PHOTO — pleine largeur, hors `.wrap` `.photo-band` est une
entre deux
: elle ne doit ni marge ni padding de section. Le doit se comporter comme l' que chrome.css dimensionne (sinon la hauteur retombe à auto). ============================================================ */ .photo-band picture { display: block; } .photo-band picture img { display: block; width: 100%; height: clamp(320px, 52vw, 640px); object-fit: cover; object-position: var(--focus, 50% 50%); } /* ============================================================ 4 · CARTES PROGRAMME — + cadrage chrome.css ne style que `.program-media img` ; avec un (webp + jpg), l'élément intermédiaire doit remplir le cadre 16/9. Le cadrage par photo passe par --focus sur l' (portrait 4:5 recadré en 16/9 : sans cela, le visage sort du champ). ============================================================ */ .program-media picture { display: block; width: 100%; height: 100%; } .program-media img { object-position: var(--focus, 50% 50%); } /* Sur mobile la carte 2 passe sous la carte 1 : garder l'écart lisible. */ /* Empilées, les deux cartes doivent rester de MÊME hauteur : la note de prix du sprint passe sur deux lignes là où celle du programme du soir tient sur une. `grid-auto-rows: 1fr` aligne les deux pistes. */ @media (max-width: 899px) { .formats { gap: 20px; grid-auto-rows: 1fr; } } /* ============================================================ 5 · LE PARCOURS (S6) — piste des cartes collantes Chaque carte se colle sous la nav, décalée de --i × 14 px. Il faut assez de course pour que l'empilement se voie, et une fin de section qui laisse la dernière carte se décoller. ============================================================ */ #parcours .stack { gap: clamp(16px, 2vw, 24px); } #parcours .stack-card h4 { margin-bottom: 8px; } #parcours .stack-card .chips { margin-top: 14px; } /* Une marge basse = la dernière carte finit de défiler avant le pli suivant. */ @media (min-width: 900px) { #parcours { padding-bottom: clamp(96px, 12vw, 176px); } } /* Sous 900 px la position collante empile mal (cartes hautes) : flux normal. */ @media (max-width: 899px) { #parcours .stack-card { position: static; } } /* ============================================================ 6 · CALENDRIER (S9) — marquee des villes sous le registre ============================================================ */ #calendrier .marquee { margin-top: clamp(40px, 5vw, 64px); } /* La 5e ligne (« 2027 · Bientôt ») n'a pas de bouton : son vide tient la colonne pour que les 4 autres restent alignées. Sous 820 px la ligne passe en deux colonnes empilées — le vide y ajouterait une ligne de grille vide : on le retire. */ @media (min-width: 821px) { #calendrier .cohort-row.is-soon > span:last-child { min-height: 40px; } } @media (max-width: 820px) { #calendrier .cohort-row.is-soon > span:last-child:empty { display: none; } } /* ============================================================ 7 · MODALES — densité du corps Le registre du parcours vit ici dans 760 px : lignes plus serrées, étiquette sur deux lignes, chips compactes. ============================================================ */ .program-modal .modal-section .ledger-row { padding: 16px 0; gap: 6px 24px; } .program-modal .modal-section .ledger-row:first-child { padding-top: 4px; } .program-modal .modal-section .ledger-row:first-child::before { display: none; } .program-modal .modal-section .ledger-row:last-child { border-bottom: 0; padding-bottom: 4px; } .program-modal .modal-section .ledger-label { padding-top: 2px; line-height: 1.5; } .program-modal .modal-section .ledger-row p { font-size: 15px; } .program-modal .modal-section .chips { margin-top: 10px; } .program-modal .modal-section .cohort-row { padding: 12px 0; grid-template-columns: 1.2fr 1.6fr auto auto; } .program-modal .modal-section .cohort-row:first-child::before { display: none; } /* Le tiret ne concerne QUE la liste « Vous repartez avec » — pas les
  • des chips, qui sont des étiquettes encadrées. */ .program-modal .modal-section > ul > li { padding-left: 20px; position: relative; } .program-modal .modal-section > ul > li::before { content: "—"; position: absolute; left: 0; font-family: var(--mono); color: var(--orange-ink); } .program-modal .tier-foot { text-align: left; margin-top: 14px; } @media (min-width: 721px) { .program-modal .modal-section .ledger-row { grid-template-columns: minmax(140px, 4fr) 8fr; } } @media (max-width: 640px) { /* Feuille du bas : le registre et le calendrier passent en une colonne. */ .program-modal .modal-section .cohort-row { grid-template-columns: minmax(0, 1fr) auto; } .program-modal .modal-section .cohort-row .what { grid-column: 1 / -1; } /* La fiche passe en une colonne : les filets de la grille 2/3 colonnes (chrome.css §15, déclarée APRÈS §13, donc gagnante à spécificité égale) dessinaient une boîte autour du 3e champ. Un seul filet par ligne. */ .program-modal .modal-section .facts div { border-right: 0; border-top: 1px solid var(--line); } .program-modal .modal-section .facts div:first-child { border-top: 0; } } /* ============================================================ 7 bis · ACCORDÉON FERMÉ — la ligne qui fuit chrome.css replie `.acc-panel` avec `grid-template-rows: 0fr` et `overflow: hidden` sur l'enfant. Mais `.acc-content` porte `padding: 0 0 24px` : le `0fr` ne peut pas descendre sous la boîte de remplissage, la rangée mesure 24 px, et `overflow` coupe à la boîte de PADDING — donc la première ligne du paragraphe reste visible sous chaque question fermée (constaté à 390 px comme à 1440 px). Correctif : aucun remplissage sur `.acc-content` (la rangée tombe alors bien à 0), l'air sous le texte passe en marge du dernier enfant. ⚠️ Le défaut est dans chrome.css : il touche AUSSI les accordéons de programme (`.accordion` sans `.faq`), hors de ce lot — à signaler. ============================================================ */ .accordion.faq .acc-content { padding-bottom: 0; } .accordion.faq .acc-content > :last-child { margin-bottom: 24px; } /* ============================================================ 8 · SÉCURITÉ 390 px — aucun débordement horizontal (QA §7.2 : document.documentElement.scrollWidth === 390) ============================================================ */ @media (max-width: 480px) { /* Une ligne mono de 40 caractères dépasse 390 px : la pastille du héros doit pouvoir se réduire, la ligne qui se tape n'a alors plus de sens. */ .hero .status-live { white-space: normal; } .hero .status-type { white-space: normal; max-width: 100%; border-right: 0; animation: none; } .hero-proof { gap: 6px 20px; } /* Les deux boutons d'une carte programme ne tiennent pas côte à côte. */ .program-body .btn-row { flex-direction: column; align-items: stretch; } .program-body .btn-row .btn { flex: 1 1 auto; width: 100%; } /* Le registre du calendrier : le bouton passe pleine largeur. */ #calendrier .cohort-row .btn { justify-self: stretch; } }