/* ============================================================ Founders University — système partagé v2 « Cahier du soir » (tokens + chrome + toute la bibliothèque de composants). Chargé par TOUTES les pages publiques, AVANT les feuilles de page (landing.css, program.css, legal.css). Spécification : docs/relaunch-2026-Q4/design/BRIEF-V2.md. Tout ce qui est partagé entre deux pages vit ICI ; une feuille de page n'ajoute que sa mise en page. Personne n'édite ce fichier après la livraison du kit. Sommaire 1 Tokens 15 Bandeau de faits (6 champs) 2 Reset + échafaudage 16 Accordéon + chips + FAQ 3 Typographie 17 Grille de livrables 4 Mise en page + surfaces 18 Pour vous / pas pour vous 5 Lien d'évitement + barre 19 Calendrier de cohortes 6 Nav + tiroir 20 Tarifs 7 Boutons (+ CTA magnétique) 21 Étapes (admission) 8 Pastilles de statut 22 Équipe 9 Héros (couvrant + texte) 23 Marquee 10 Bandeau de chiffres 24 Bande photo (clip-path) 11 Registres (rows draw) 25 Cartes collantes empilées 12 Cartes programme (égales) 26 Tableau comparatif 13 Modale 27 CTA final + barre collante 14 Sous-nav sticky 28 Formulaires 29 Modale Réserver (reserve.js) 30 Révélations + scroll-driven 31 Pied de page 32 Impression Une seule police (Bricolage Grotesque, variable) + mono système. Pas de verre, pas de dégradé de texte, un seul orange. Chaque mouvement a sa branche `prefers-reduced-motion` ; tout est lisible sans JS (les classes `.js …` ne masquent qu'avec chrome.js chargé). ============================================================ */ /* ============================================================ 1 · TOKENS (BRIEF-V2 §2 — ne pas dupliquer ailleurs) ============================================================ */ :root { /* ---------- Couleur (palette conservée) ---------- */ --navy: #0A0E27; --navy-deep: #060912; --navy-soft: #141A3D; --orange: #FF5F1F; /* aplats, traits, texte SUR navy uniquement */ --orange-soft: #FF7A40; /* survol de --orange */ --orange-ink: #BC3E08; /* TEXTE orange sur crème / blanc (5,1:1) */ --cream: #FAF7F0; --cream-warm: #F3EEE3; --stone: #E8E1D3; /* pierre de taille — surface claire alternative */ --zinc: #A7AEBD; /* méta sur navy (8,5:1) */ --text: #1A1F36; --muted: #5F6779; /* ÉCHOUE sur --stone : y utiliser --text-2 */ --text-2: rgba(26, 31, 54, 0.82); --ok: #1B7F4C; --err: #B3261E; --live: #34D399; --cyan: #00D4FF; /* retiré de la palette ; alias conservé pour l'app */ --line: rgba(10, 14, 39, 0.14); --line-strong: rgba(10, 14, 39, 0.26); --line-light: rgba(250, 247, 240, 0.18); --on-navy: var(--cream); --on-navy-2: rgba(250, 247, 240, 0.74); --on-navy-3: rgba(250, 247, 240, 0.60); /* ---------- Typographie : UNE famille + mono système ---------- */ --font: 'Bricolage Grotesque', 'Bricolage Fallback', Arial, system-ui, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --serif: var(--font); /* alias de compatibilité (feuilles v1) */ --sans: var(--font); /* alias de compatibilité (feuilles v1) */ /* Réglages d'axes par rôle (opsz 12-96 · wdth 75-100 · wght 200-800) */ --fv-display: "opsz" 96, "wdth" 100, "wght" 700; --fv-display-from: "opsz" 96, "wdth" 82, "wght" 800; /* état initial du H1 qui « se pose » */ --fv-h2: "opsz" 96, "wdth" 100, "wght" 600; --fv-h3: "opsz" 40, "wdth" 100, "wght" 600; --fv-body: "opsz" 14, "wdth" 100, "wght" 400; --fv-ui: "opsz" 14, "wdth" 100, "wght" 600; --fv-stat: "opsz" 96, "wdth" 86, "wght" 700; --fv-mark: "opsz" 96, "wdth" 80, "wght" 700; /* logotype */ --fs-display: clamp(2.875rem, 1.9rem + 4.6vw, 6.75rem); /* 46 → 108 */ --fs-h1: clamp(2.5rem, 1.7rem + 3.6vw, 5.5rem); /* 40 → 88 */ --fs-h2: clamp(2rem, 1.45rem + 2.5vw, 3.5rem); /* 32 → 56 */ --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); /* 20 → 26 */ --fs-lede: clamp(1.0625rem, 0.95rem + 0.55vw, 1.25rem); /* 17 → 20 */ --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.75rem; --fs-mono: 0.8125rem; /* 13 */ --fs-stat: clamp(2.75rem, 1.7rem + 4.4vw, 5.5rem); /* 44 → 88 */ --lh-tight: 0.98; --lh-snug: 1.12; --lh-h3: 1.22; --lh-body: 1.6; --lh-prose: 1.7; --ls-display: -0.025em; --ls-h2: -0.02em; --ls-mono: 0.08em; --ls-mark: -0.03em; /* ---------- Espace (8 pt, fluide en haut d'échelle) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --gutter: clamp(20px, 4.5vw, 96px); --section-y: clamp(64px, 9vw, 128px); --wrap: 1360px; --prose: 62ch; --nav-h: 72px; --nav-h-min: 60px; --subnav-h: 56px; /* ---------- Rayons ---------- */ --r-xs: 3px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; /* ---------- Ombres (rares : la hiérarchie vient des filets) ---------- */ --sh-card: 0 1px 0 rgba(10,14,39,0.04), 0 10px 28px rgba(10,14,39,0.07); --sh-lift: 0 14px 36px rgba(10,14,39,0.12); --sh-modal: 0 32px 80px rgba(6,9,18,0.45); --ring: 0 0 0 4px rgba(255,95,31,0.22); /* ---------- Mouvement ---------- */ --d-fast: 160ms; --d-base: 240ms; --d-slow: 520ms; --d-reveal: 640ms; --d-settle: 900ms; --e-out: cubic-bezier(0.22, 1, 0.36, 1); --e-inout: cubic-bezier(0.65, 0, 0.35, 1); --e-soft: cubic-bezier(0.33, 1, 0.68, 1); /* ---------- Z-index ---------- */ --z-bg: 0; --z-content: 1; --z-sticky: 90; --z-nav: 100; --z-modal: 200; --z-toast: 300; --z-progress: 999; --z-skip: 1000; } /* ============================================================ 2 · RESET + ÉCHAFAUDAGE ============================================================ */ /* Sans `border-box`, un input `width:100%` + padding déborde de sa cellule et chevauche son voisin (régression vécue sur /waitlist). Ne jamais retirer. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Ancres : la nav condensée (60) + une sous-nav (56) + une respiration. */ scroll-padding-top: calc(var(--nav-h-min) + var(--subnav-h) + 16px); } html, body { min-height: 100%; margin: 0; } /* Pied de page collant, scopé : l'espace fondateur (app/) garde sa grille. */ body:not(.app-body) { min-height: 100vh; display: flex; flex-direction: column; background: var(--cream); color: var(--text); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); font-optical-sizing: auto; font-variation-settings: var(--fv-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body:not(.app-body) > main { flex: 1 0 auto; } body:not(.app-body) > footer { flex-shrink: 0; } body:has(dialog[open]), body.nav-open, body.modal-open { overflow: hidden; } img, picture, svg, video { max-width: 100%; } img { height: auto; } ::selection { background: rgba(255, 95, 31, 0.24); } [hidden] { display: none !important; } /* Transitions entre pages (MPA) : fondu 200 ms, la nav et le logotype restent en place. Progressif — ignoré par les navigateurs sans support. */ @view-transition { navigation: auto; } body > nav { view-transition-name: nav; } .logo { view-transition-name: wordmark; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ============================================================ 3 · TYPOGRAPHIE ============================================================ */ h1, h2, h3, h4 { margin: 0; color: var(--navy); text-wrap: balance; font-weight: 600; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-variation-settings: var(--fv-display); max-width: 14ch; } .display { font-size: var(--fs-display); } h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-h2); font-variation-settings: var(--fv-h2); max-width: 20ch; } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.01em; font-variation-settings: var(--fv-h3); } h4 { font-size: 1.0625rem; line-height: 1.3; font-variation-settings: var(--fv-ui); } /* Le mot accentué d'un titre : même graisse, l'orange fait le travail. */ h1 em, h2 em { font-style: normal; color: var(--orange-ink); } .on-navy h1 em, .on-navy h2 em, .hero h1 em, .hero h2 em { color: var(--orange); } .on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4, .hero h1, .hero h2, .hero h3 { color: var(--on-navy); } p { margin: 0 0 1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } .lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--muted); max-width: var(--prose); } .on-navy .lede, .hero .lede { color: var(--on-navy-2); } .on-stone .lede { color: var(--text-2); } .fine { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.02em; line-height: 1.55; color: var(--muted); } .on-navy .fine, .hero .fine { color: var(--on-navy-3); } .on-stone .fine { color: var(--text-2); } strong, b { font-variation-settings: var(--fv-ui); font-weight: 600; } small { font-size: 0.75em; } a { color: inherit; } a:not([class]) { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; } a:not([class]):hover { text-decoration-thickness: 2px; } .on-navy a:not([class]), .hero a:not([class]) { color: var(--orange); } .on-stone a:not([class]) { color: var(--navy); } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: var(--r-xs); } /* Voix mono : étiquettes, dates, prix-méta, index. Jamais pour une phrase. */ .mono, .meta { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; font-variant-numeric: tabular-nums; } .meta { color: var(--muted); } .on-navy .meta, .hero .meta { color: var(--zinc); } .on-stone .meta { color: var(--text-2); } .num, [data-count], [data-countdown], .amount, .when, .stat .n { font-variant-numeric: tabular-nums lining-nums; } /* Eyebrow : orange plat + trait de 28 px (CLAUDE.md A.4 §6). Mono. */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-ink); background: none; border: 0; padding: 0; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--orange); flex: none; } .on-navy .eyebrow, .hero .eyebrow { color: var(--orange); } .on-stone .eyebrow { color: var(--text); } .section-head { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 56px); } .section-head .lede { margin-top: 16px; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } .section-head--center h2, .section-head--center .lede { margin-inline: auto; } /* Tête de section en deux colonnes : titre à gauche, lede à droite (registre). */ .section-head--split { display: grid; gap: 20px 48px; max-width: none; } @media (min-width: 900px) { .section-head--split { grid-template-columns: 7fr 5fr; align-items: end; } .section-head--split .lede { margin-top: 0; padding-bottom: 6px; } } /* ============================================================ 4 · MISE EN PAGE + SURFACES ============================================================ */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .wrap--prose { max-width: calc(var(--prose) + 2 * var(--gutter)); } .wrap--wide { max-width: none; } section { padding: var(--section-y) 0; position: relative; } .on-navy { background: var(--navy); color: var(--on-navy); } .on-stone { background: var(--stone); color: var(--text); } .on-warm { background: var(--cream-warm); } .on-navy p { color: var(--on-navy-2); } .on-navy .lede { color: var(--on-navy-2); } .grid-2 { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-3, .cols-3 { display: grid; gap: clamp(28px, 4vw, 56px); } @media (min-width: 820px) { .grid-3, .cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-3 > * + *, .cols-3 > * + * { border-left: 1px solid var(--line); padding-left: clamp(24px, 3vw, 40px); } .on-navy .grid-3 > * + *, .on-navy .cols-3 > * + * { border-color: var(--line-light); } } .grid-3 h3, .cols-3 h3 { margin-bottom: 10px; } .grid-3 p, .cols-3 p { color: var(--text-2); font-size: 15.5px; } .on-navy .grid-3 p, .on-navy .cols-3 p { color: var(--on-navy-2); } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* Pli « déclaration » : une phrase, deux tons, centrée (landing S2). */ .statement { text-align: center; } .statement p { margin: 0 auto; max-width: 24ch; font-size: var(--fs-h1); line-height: 1.04; letter-spacing: var(--ls-display); color: var(--navy); font-variation-settings: var(--fv-display); text-wrap: balance; } .statement p em { font-style: normal; color: var(--muted); font-variation-settings: "opsz" 96, "wdth" 100, "wght" 500; } .on-navy .statement p { color: var(--cream); } .on-navy .statement p em { color: var(--on-navy-3); } /* Deux colonnes appariées (12 semaines | 72 h) dans une carte empilée. */ .pair { display: grid; gap: 24px; } @media (min-width: 720px) { .pair { grid-template-columns: 1fr 1fr; } .pair > * + * { border-left: 1px solid var(--line); padding-left: 24px; } .on-navy .pair > * + * { border-color: var(--line-light); } } .pair h4 { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--orange-ink); font-variation-settings: normal; font-weight: 500; margin-bottom: 10px; } .on-navy .pair h4 { color: var(--orange); } main[data-chrome] { padding-top: var(--nav-h); } /* pages sans héros */ [id] { scroll-margin-top: calc(var(--nav-h-min) + var(--subnav-h) + 16px); } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ============================================================ 5 · LIEN D'ÉVITEMENT + BARRE DE PROGRESSION ============================================================ */ .skip-link { position: absolute; left: 16px; top: -100px; z-index: var(--z-skip); padding: 12px 18px; background: var(--navy); color: var(--cream); font-variation-settings: var(--fv-ui); border-radius: var(--r-sm); text-decoration: none; } .skip-link:focus { top: 12px; outline: 2px solid var(--orange); outline-offset: 2px; } .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-progress); background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; } @supports (animation-timeline: scroll()) { .scroll-progress { animation: progress linear both; animation-timeline: scroll(root); } @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } } @media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } } /* ============================================================ 6 · NAV (condensation, masquage, tiroir) ============================================================ */ body > nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); background: var(--cream); border-bottom: 1px solid var(--line); color: var(--text); transition: transform var(--d-base) var(--e-out), background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); height: var(--nav-h); transition: height var(--d-base) var(--e-out); } body > nav.is-scrolled .nav-inner { height: var(--nav-h-min); } body > nav.is-scrolled { background: rgba(250, 247, 240, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } body > nav.is-hidden { transform: translateY(-100%); } /* Au sommet d'une page à héros couvrant, la nav est transparente sur la photo. */ body.has-cover > nav:not(.is-scrolled) { background: transparent; border-color: transparent; color: var(--cream); } /* Logotype : « Founders University » + point orange. Même balisage nav + pied. */ .logo { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; line-height: 1; } .logo-wordmark { font-family: var(--font); font-size: 21px; letter-spacing: var(--ls-mark); font-variation-settings: var(--fv-mark); white-space: nowrap; color: currentColor; } .logo-wordmark .logo-dot, .logo-wordmark > span { color: var(--orange); } .logo-subtitle { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; padding-left: 1px; } body > nav.is-scrolled .logo-wordmark { font-size: 19px; } body > nav.is-scrolled .logo-subtitle { display: none; } .nav-links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); } .nav-links a { text-decoration: none; color: inherit; font-size: 14.5px; font-variation-settings: "opsz" 14, "wdth" 100, "wght" 500; padding: 10px 2px; min-height: 44px; display: inline-flex; align-items: center; position: relative; white-space: nowrap; } .nav-links a:not(.nav-cta):not(.nav-founders)::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 6px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-fast) var(--e-out); } .nav-links a:not(.nav-cta):not(.nav-founders):hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); } .nav-cta { background: var(--orange); color: var(--navy) !important; padding: 0 18px !important; border-radius: var(--r-sm); font-variation-settings: var(--fv-ui) !important; min-height: 40px !important; } .nav-cta:hover { background: var(--orange-soft); } .nav-founders { gap: 8px; padding: 0 14px !important; border: 1px solid currentColor; border-radius: var(--r-sm); min-height: 40px !important; opacity: 0.9; } .nav-founders::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; } .nav-founders svg { display: none; } .nav-founders:hover { opacity: 1; border-color: var(--orange); } .nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; color: inherit; border-radius: var(--r-sm); margin-right: -8px; } .nav-toggle span { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--d-base) var(--e-out), opacity var(--d-fast); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 900px) { .nav-toggle { display: flex; } /* Tiroir = une page de cahier : liens en lignes numérotées, filets. */ .nav-links { position: fixed; inset: var(--nav-h-min) 0 0 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 32px; background: var(--cream); color: var(--text); overflow-y: auto; counter-reset: navi; border-top: 1px solid var(--line); } .nav-links.open { display: flex; } .nav-links a { min-height: 60px; padding: 0 4px; font-size: 22px; border-bottom: 1px solid var(--line); font-variation-settings: "opsz" 24, "wdth" 96, "wght" 600; counter-increment: navi; gap: 18px; } .nav-links a:not(.nav-cta):not(.nav-founders)::before { content: counter(navi, decimal-leading-zero); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); font-variation-settings: normal; } .nav-links a::after { display: none; } .nav-founders { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 4px !important; min-height: 60px !important; } .nav-cta { margin-top: 20px; justify-content: center; min-height: 52px !important; border-radius: var(--r-sm); border-bottom: 0; } body.nav-open > nav, body.has-cover.nav-open > nav:not(.is-scrolled) { background: var(--cream); color: var(--text); border-color: var(--line); } body.nav-open .nav-inner { height: var(--nav-h-min); } body.has-cover > nav { color: var(--cream); } body.has-cover > nav.is-scrolled, body.has-cover.nav-open > nav { color: var(--text); } } @media (prefers-reduced-motion: reduce) { body > nav, .nav-inner { transition: none; } body > nav.is-hidden { transform: none; } } /* ============================================================ 7 · BOUTONS ============================================================ */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 24px; border: 1px solid transparent; border-radius: var(--r-sm); font-family: var(--font); font-size: 15px; line-height: 1; font-variation-settings: var(--fv-ui); text-decoration: none; cursor: pointer; white-space: nowrap; color: inherit; background: none; transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out); } .btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } .on-navy .btn:focus-visible, .hero .btn:focus-visible { outline-color: var(--cream); } .btn-primary { background: var(--orange); color: var(--navy); overflow: hidden; } /* Remplissage « encre » : le survol glisse une teinte plus claire de gauche à droite. */ .btn-primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--orange-soft); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-base) var(--e-out); } .btn-primary:hover::before, .btn-primary:focus-visible::before { transform: scaleX(1); } .btn-primary:active { transform: translateY(1px); } .btn-ghost { border-color: var(--line-strong); color: var(--text); } .btn-ghost:hover { border-color: var(--orange); color: var(--orange-ink); } .on-navy .btn-ghost, .hero .btn-ghost, .btn-glass { border-color: var(--line-light); color: var(--cream); } .on-navy .btn-ghost:hover, .hero .btn-ghost:hover, .btn-glass:hover { border-color: var(--orange); color: var(--orange); } .btn-inverse { background: var(--cream); color: var(--navy); } .btn-inverse:hover { background: #fff; } .btn-sm { min-height: 40px; padding: 9px 16px; font-size: 14px; } .btn-block { width: 100%; } .btn[disabled], .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .btn .arrow { transition: transform var(--d-fast) var(--e-out); } .btn:hover .arrow { transform: translateX(3px); } /* CTA magnétique : chrome.js pose la translation ; ici, juste la souplesse. */ [data-magnetic] { will-change: transform; transition: transform 320ms var(--e-out); } @media (max-width: 480px) { .hero .btn-row > .btn, main[data-chrome] .btn-row > .btn, .cta-final .btn-row > .btn { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { .btn, .btn-primary::before, [data-magnetic] { transition: none; } .btn-primary:hover { background: var(--orange-soft); } } /* ============================================================ 8 · PASTILLES DE STATUT (mono) + ligne « qui tape » + compte à rebours ============================================================ */ .status-live, .status-ok, .status-soon { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 12px 7px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--text); background: rgba(255, 255, 255, 0.5); white-space: nowrap; max-width: 100%; } .on-navy .status-live, .hero .status-live, .on-navy .status-ok, .on-navy .status-soon, .hero .status-soon { border-color: var(--line-light); color: var(--on-navy); background: rgba(10, 14, 39, 0.45); } /* Enfant direct d'une grille/flex, un `inline-flex` est blockifié : sans `justify-self`, la pastille s'étire sur toute la colonne. */ .hero-grid > .status-live, .hero-grid > .status-soon, .cta-card > .status-live, .cta-card > .status-soon { justify-self: start; } .status-live .dot, .status-ok .dot, .status-soon .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .status-live .dot { background: var(--live); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); animation: pulse 2.2s var(--e-out) infinite; } .status-ok .dot { background: var(--ok); } .on-navy .status-ok .dot { background: var(--live); } .status-soon .dot { background: var(--zinc); } .status-soon { color: var(--muted); } .on-navy .status-soon { color: var(--on-navy-3); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); } 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } } [data-countdown] { color: var(--orange-ink); } .on-navy [data-countdown], .hero [data-countdown] { color: var(--orange); } /* Ligne qui se tape : …. Le texte est là sans JS ; sous reduced-motion il s'affiche d'un bloc. */ .status-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: calc(var(--ch, 40) * 1ch); border-right: 1px solid currentColor; padding-right: 2px; } @media (prefers-reduced-motion: no-preference) { .status-type { animation: typing 1.4s steps(40, end) 0.3s both, caret 1s step-end 1.7s 4; } @keyframes typing { from { max-width: 0; } to { max-width: calc(var(--ch, 40) * 1ch); } } @keyframes caret { 50% { border-color: transparent; } } } @media (prefers-reduced-motion: reduce) { .status-live .dot { animation: none; } .status-type { border-right-color: transparent; } } /* ============================================================ 9 · HÉROS — couvrant (photo) et texte (navy) ============================================================ */ .hero { position: relative; background: var(--navy); color: var(--on-navy); overflow: clip; isolation: isolate; padding: 0; } .hero--cover { min-height: clamp(600px, 94svh, 920px); display: grid; } .hero-media { position: absolute; inset: 0; z-index: var(--z-bg); background: var(--navy-soft); } .hero-media picture, .hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .hero-media img { object-position: var(--focus, 50% 40%); } /* Voile : lisibilité AA du texte crème et de l'orange, quelle que soit la photo. */ .hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--navy) 0%, rgba(10,14,39,0.86) 34%, rgba(10,14,39,0.42) 70%, rgba(10,14,39,0.18) 100%), linear-gradient(100deg, rgba(10,14,39,0.55) 0%, rgba(10,14,39,0) 60%); } .hero-grid { position: relative; z-index: var(--z-content); display: grid; align-content: end; gap: 22px; padding-top: calc(var(--nav-h) + 48px); padding-bottom: clamp(40px, 6vw, 72px); } .hero-grid > * { max-width: 100%; } .hero h1 { font-size: var(--fs-display); max-width: 12ch; } .hero .lede { max-width: 56ch; } .hero .btn-row { margin-top: 6px; } .hero-proof { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 8px 0 0; padding-top: 18px; border-top: 1px solid var(--line-light); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.04em; color: var(--on-navy-2); } .hero-proof strong { color: var(--cream); font-variation-settings: normal; font-weight: 600; } .hero-proof a { color: var(--cream); } .hero--text { padding: calc(var(--nav-h) + clamp(48px, 8vw, 96px)) 0 clamp(56px, 8vw, 96px); } .hero--text .wrap { display: grid; gap: 22px; } .hero--text h1 { max-width: 14ch; } /* Le H1 « se pose » : largeur 82 → 100, graisse 800 → 700, une fois, 900 ms. */ @media (prefers-reduced-motion: no-preference) { .js h1[data-settle] { animation: settle var(--d-settle) var(--e-out) 80ms both; } @keyframes settle { from { font-variation-settings: var(--fv-display-from); opacity: 0.6; } to { font-variation-settings: var(--fv-display); opacity: 1; } } .js .hero-grid > :not(h1), .js .hero--text .wrap > :not(h1) { animation: rise 640ms var(--e-out) both; } .js .hero-grid > :nth-child(2), .js .hero--text .wrap > :nth-child(2) { animation-delay: 240ms; } .js .hero-grid > :nth-child(3), .js .hero--text .wrap > :nth-child(3) { animation-delay: 340ms; } .js .hero-grid > :nth-child(4), .js .hero--text .wrap > :nth-child(4) { animation-delay: 440ms; } .js .hero-grid > :nth-child(5), .js .hero--text .wrap > :nth-child(5) { animation-delay: 540ms; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } } .scroll-cue { position: absolute; right: var(--gutter); bottom: 28px; width: 44px; height: 44px; border: 1px solid var(--line-light); border-radius: 50%; display: grid; place-items: center; color: var(--cream); text-decoration: none; } .scroll-cue::after { content: "↓"; font-family: var(--mono); font-size: 14px; } @media (max-width: 720px) { .scroll-cue { display: none; } } /* ============================================================ 10 · BANDEAU DE CHIFFRES (4 vrais nombres, jamais plus) ============================================================ */ .stat-strip { background: var(--navy); color: var(--on-navy); padding: 0; border-top: 1px solid var(--line-light); } .stat-strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { padding: clamp(28px, 4vw, 48px) clamp(16px, 2vw, 32px); display: grid; gap: 10px; align-content: start; } .stat + .stat { border-left: 1px solid var(--line-light); } .stat .n { font-size: var(--fs-stat); line-height: 1; letter-spacing: -0.03em; color: var(--cream); font-variation-settings: var(--fv-stat); } .stat .n small { font-size: 0.4em; margin-left: 3px; color: var(--zinc); font-variation-settings: "opsz" 14, "wdth" 100, "wght" 500; } .stat .l { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--zinc); max-width: 20ch; } .on-cream .stat-strip, .stat-strip--light { background: var(--cream-warm); color: var(--text); border-color: var(--line); } .stat-strip--light .stat + .stat { border-color: var(--line); } .stat-strip--light .stat .n { color: var(--navy); } .stat-strip--light .stat .l { color: var(--muted); } @media (max-width: 760px) { .stat-strip .wrap { grid-template-columns: 1fr 1fr; padding: 0; } .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line-light); } .stat-strip--light .stat:nth-child(n+3) { border-color: var(--line); } } /* ============================================================ 11 · REGISTRES — la ligne comme unité visuelle Toute ligne portant [data-draw] voit son filet se tracer à l'entrée. ============================================================ */ .ledger { display: grid; } .ledger-row { position: relative; display: grid; gap: 8px 40px; padding: clamp(22px, 3vw, 34px) 0; } .ledger-row::before, [data-draw]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; } .on-navy .ledger-row::before, .on-navy [data-draw]::before { background: var(--line-light); } .on-stone .ledger-row::before { background: var(--line-strong); } .ledger-row:last-child { border-bottom: 1px solid var(--line); } .on-navy .ledger-row:last-child { border-color: var(--line-light); } @media (min-width: 720px) { .ledger-row { grid-template-columns: minmax(160px, 3fr) 9fr; align-items: start; } } .ledger-label { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--orange-ink); padding-top: 6px; } .on-navy .ledger-label { color: var(--orange); } .on-stone .ledger-label { color: var(--text); } .ledger-row h3 { margin-bottom: 8px; } .ledger-row p { color: var(--text-2); max-width: 60ch; } .on-navy .ledger-row p { color: var(--on-navy-2); } .ledger-row .big { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); line-height: 1.3; color: var(--navy); letter-spacing: -0.01em; font-variation-settings: "opsz" 40, "wdth" 100, "wght" 500; } .on-navy .ledger-row .big { color: var(--cream); } .ledger-row .out { margin-top: 12px; font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.02em; color: var(--orange-ink); } .on-navy .ledger-row .out { color: var(--orange); } /* Registre des jours (sprint) : Ven. / Sam. / Dim. en gros, verbe en chip. */ .day-mark { display: flex; align-items: baseline; gap: 14px; } .day-mark .d { font-size: var(--fs-stat); line-height: 0.9; letter-spacing: -0.03em; color: var(--navy); font-variation-settings: var(--fv-stat); } .on-navy .day-mark .d { color: var(--cream); } .day-verb { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--orange-ink); } .on-navy .day-verb { color: var(--orange); } /* ============================================================ 12 · CARTES PROGRAMME — deux cartes STRICTEMENT égales ============================================================ */ .formats { display: grid; gap: clamp(20px, 3vw, 32px); align-items: stretch; } @media (min-width: 900px) { .formats { grid-template-columns: 1fr 1fr; } } .program-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out); } .on-navy .program-card { background: var(--navy-soft); border-color: var(--line-light); } @media (hover: hover) and (pointer: fine) { .program-card:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); } } .program-media { position: relative; aspect-ratio: 16 / 9; background: var(--navy-soft); overflow: hidden; } .program-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--e-out); } .program-card:hover .program-media img { transform: scale(1.03); } .program-media .status-live, .program-media .status-soon { position: absolute; top: 14px; left: 14px; } .program-body { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.6vw, 30px); flex: 1; } .program-eyebrow { margin: 0; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-ink); } .on-navy .program-eyebrow { color: var(--orange); } .program-body h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); font-variation-settings: "opsz" 40, "wdth" 96, "wght" 650; } .program-body h3 a { text-decoration: none; color: inherit; } .program-promise { font-size: 1.125rem; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-variation-settings: "opsz" 20, "wdth" 100, "wght" 500; min-height: 2.8em; } .on-navy .program-promise { color: var(--on-navy); } .program-facts { margin: 4px 0 0; display: grid; gap: 0; } .program-facts div { display: flex; gap: 8px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); } .program-facts div:last-child { border-bottom: 1px solid var(--line); } .on-navy .program-facts div { border-color: var(--line-light); } .program-facts dt { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--muted); flex: none; } .program-facts dt::after { content: ""; flex: 1; } .program-facts dd { margin: 0; margin-left: auto; text-align: right; font-variation-settings: var(--fv-ui); } .program-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 6px 0 4px; } .amount { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1; letter-spacing: -0.03em; color: var(--navy); font-variation-settings: var(--fv-stat); } .on-navy .amount { color: var(--cream); } .was { font-family: var(--mono); font-size: var(--fs-mono); color: var(--muted); text-decoration: line-through; margin-left: 8px; } .program-price .note, .price-note { width: 100%; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.02em; color: var(--muted); } .program-body .btn-row { margin-top: auto; padding-top: 8px; } .program-body .btn-row .btn { flex: 1 1 0; } .program-foot { margin: 0; font-size: var(--fs-small); } .program-foot a { color: var(--muted); text-decoration: none; } .program-foot a:hover { color: var(--orange-ink); text-decoration: underline; } /* ============================================================ 13 · MODALE (chrome.js : [data-modal-open]) ============================================================ */ dialog.program-modal { width: min(760px, calc(100% - 32px)); max-height: 88vh; max-height: 88dvh; margin: auto; padding: 0; border: 0; border-radius: var(--r-md); background: var(--cream); color: var(--text); box-shadow: var(--sh-modal); overflow: hidden; display: none; flex-direction: column; } dialog.program-modal[open] { display: flex; } dialog.program-modal::backdrop { background: rgba(10, 14, 39, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .modal-head { position: sticky; top: 0; z-index: 2; display: grid; gap: 6px; padding: 24px clamp(20px, 4vw, 36px) 18px; background: var(--cream); border-bottom: 1px solid var(--line); padding-right: 76px; } .modal-head .program-eyebrow { margin: 0; } .modal-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); max-width: none; } .modal-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 1px solid var(--line); background: none; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text); display: grid; place-items: center; } .modal-close:hover { border-color: var(--orange); color: var(--orange-ink); } .modal-body { overflow-y: auto; overscroll-behavior: contain; padding: 8px clamp(20px, 4vw, 36px) 24px; flex: 1; } .modal-section { padding: 22px 0; border-top: 1px solid var(--line); } .modal-section:first-child { border-top: 0; } .modal-section > h3 { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--orange-ink); font-variation-settings: normal; font-weight: 500; margin-bottom: 14px; } .modal-section ul { margin: 0; padding: 0; list-style: none; } .modal-section li { padding: 6px 0; font-size: 15px; color: var(--text-2); } .modal-section .facts { border: 0; background: none; padding: 0; margin: 0; grid-template-columns: repeat(2, 1fr); gap: 0 24px; } .modal-section .facts div { padding: 10px 0; border-right: 0; border-top: 1px solid var(--line); } .modal-section .facts div:nth-child(-n+2) { border-top: 0; } .modal-tiers { display: grid; gap: 0; } .modal-tier { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 0 12px 14px; border-top: 1px solid var(--line); border-left: 2px solid transparent; } .modal-tier.featured { border-left-color: var(--orange); background: var(--cream-warm); } .modal-tier b { font-variation-settings: var(--fv-ui); } .modal-tier .amount { font-size: 1.375rem; grid-row: span 2; align-self: center; } .modal-tier span { font-size: var(--fs-small); color: var(--muted); } .modal-foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px clamp(20px, 4vw, 36px); background: var(--cream); border-top: 1px solid var(--line); } .modal-foot .amount { font-size: 1.75rem; } .modal-foot .price-note { width: auto; } .modal-foot .btn-row { margin-left: auto; } .modal-handle { display: none; width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 10px auto 0; } @media (max-width: 640px) { dialog.program-modal { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; } .modal-handle { display: block; } .modal-head { padding-top: 12px; } .modal-section .facts { grid-template-columns: 1fr; } .modal-foot .btn-row { width: 100%; margin-left: 0; } .modal-foot .btn { flex: 1; } } @media (prefers-reduced-motion: no-preference) { dialog.program-modal[open] { animation: pop 220ms var(--e-out); } dialog.program-modal[open]::backdrop { animation: fade 220ms var(--e-out); } @keyframes pop { from { opacity: 0; transform: scale(0.98) translateY(8px); } } @keyframes fade { from { opacity: 0; } } } /* ============================================================ 14 · SOUS-NAV STICKY des pages programme (scroll-spy +