/* ============================================================ CrocoClub AES — CSS du site vitrine (thecrococlub.com) Consomme uniquement les alias sémantiques Bayou. Zéro hex brut. La matière est posée sur . Sections sombres : sol partagé bayou-nuit, qui conserve l'accent OR. ============================================================ */ /* ---- Accents en TEXTE : le cran lisible de chaque surface ---- --accent (l'or, --or-500) et --danger (le terracotta) sont des couleurs de SIGNAL : aplat, filet, pictogramme, CTA. En TEXTE elles ne passent pas AA — l'or plein est trop clair sur nos fonds clairs, le terracotta trop sombre sur bayou-nuit. Ces deux alias donnent le cran lisible SANS quitter la famille : le bronze (--or-700, « texte gold sur clair », AA) sur clair, l'or plein sur sombre. À consommer dès qu'un accent porte du texte. */ .bayou-crococlub { --accent-text: var(--or-700); } .bayou-nuit { --accent-text: var(--accent); --danger-text: color-mix(in srgb, var(--danger) 78%, var(--white)); } /* ---- Layout ---- */ .wrap { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--grid-margin); } .section { padding-block: var(--space-24); } .section--tight { padding-block: var(--space-16); } .section-head { max-width: 720px; margin-bottom: var(--space-12); } .section-head h2 { font-size: var(--tcc-type-step-2); line-height: var(--display-md-lh); margin-top: var(--space-4); } .section-head .lede { font-size: var(--tcc-type-step-0); line-height: var(--body-lg-lh); color: var(--text-subtitle); margin-top: var(--space-4); margin-bottom: 0; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .lede { margin-inline: auto; } /* ---- Fond de section ---- */ .band-sunken { background: var(--surface-sunken); } /* ---- Boutons : hover monte, clic ENFONCE ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-height-lg); padding: 0 var(--space-6); font-family: var(--font-body); font-size: var(--tcc-type-step-0); font-weight: var(--weight-semibold); line-height: 1; border-radius: var(--radius-control); border: var(--border-width) solid transparent; cursor: pointer; white-space: nowrap; transition: transform var(--dur-snap) var(--ease-snap), box-shadow var(--dur-snap) var(--ease-snap), background var(--dur-snap) var(--ease-snap), border-color var(--dur-snap) var(--ease-snap), color var(--dur-snap) var(--ease-snap); } .btn--sm { height: var(--control-height-md); padding: 0 var(--space-4); font-size: var(--tcc-type-step-n1); } a.btn, a.btn:hover { text-decoration: none; } .btn--primary { background: var(--cta-bg); color: var(--cta-text); border-color: var(--cta-bg); } a.btn--primary:hover, .btn--primary:hover { background: var(--cta-bg-hover); border-color: var(--cta-bg-hover); color: var(--cta-text); box-shadow: var(--cta-glow); transform: translateY(-2px); } a.btn--primary:active, .btn--primary:active { transform: translateY(2px) scale(0.97); box-shadow: none; transition-duration: var(--dur-instant); } .btn--ghost { background: transparent; color: var(--text-strong); border-color: var(--border-strong); } a.btn--ghost:hover, .btn--ghost:hover { border-color: var(--brand); color: var(--brand-text); transform: translateY(-2px); } a.btn--ghost:active, .btn--ghost:active { transform: translateY(2px) scale(0.97); transition-duration: var(--dur-instant); } .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.65; pointer-events: none; transform: none; } /* ---- Hero ---- */ .hero { position: relative; overflow: hidden; padding-block: var(--space-24) var(--space-20); } .hero .scales { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 70%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 70%); } .hero-inner { position: relative; max-width: 780px; } .hero h1 { font-size: clamp(var(--tcc-type-step-4), 4.8vw, var(--tcc-type-step-6)); line-height: var(--display-hero-lh); font-weight: var(--weight-display-max, 700); margin-top: var(--space-5); } .hero h1 em { font-style: normal; color: var(--brand-text); } .hero .sub { font-size: var(--tcc-type-step-0); line-height: var(--body-lg-lh); color: var(--text-subtitle); margin-top: var(--space-5); max-width: 60ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); } .hero .note { margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); color: var(--text-muted); } /* Hero sombre (pages Accélérateur / Cercle) */ .hero--dark h1 em { color: var(--accent); } .hero--dark .scales { opacity: 0.65; } /* ---- Dents (transitions blanc ⇄ marais pour ce site) ---- La mâchoire appartient au système : `bayou-teeth` porte le masque, la surface ne choisit que la COULEUR de la dent. On redessinait ici le triangle dans une data URI avec un blanc en dur : la couleur sortait du SSOT et la forme était figée localement. La variante ne pose plus que son token. */ .teeth-to-dark { background-color: var(--white); } .bayou-teeth--to-page { --bayou-tooth-color: var(--white); } /* ---- Cartes génériques ---- */ .card { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-6); } /* ---- Passerelles vers la Version Intégrateur : marais, écailles, or ---- */ .integrator-callout { position: relative; isolation: isolate; overflow: hidden; padding: clamp(var(--space-6), 4vw, var(--space-10)); background: radial-gradient(circle at 88% 12%, rgba(0, 235, 121, 0.12), transparent 34%), linear-gradient(145deg, var(--marais-800), var(--marais-950) 78%); border: var(--border-width) solid var(--border-default); border-left: 4px solid var(--accent); border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover); } .integrator-callout__scales { position: absolute; inset: 0; z-index: -1; opacity: 0.8; pointer-events: none; -webkit-mask-image: linear-gradient(120deg, transparent 18%, var(--marais-950) 68%, transparent 100%); mask-image: linear-gradient(120deg, transparent 18%, var(--marais-950) 68%, transparent 100%); } .integrator-callout__content { position: relative; max-width: 680px; } .integrator-callout h3 { color: var(--text-strong); } .integrator-callout .bayou-eyebrow { color: var(--croco-300); } .integrator-callout .bayou-eyebrow::before { background: var(--croco-300); } /* ---- Grille catalogue ---- */ .formation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); } @media (max-width: 1020px) { .formation-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .formation-grid { grid-template-columns: 1fr; } } a.formation-card { display: flex; flex-direction: column; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; color: var(--text-body); transition: transform var(--dur-snap) var(--ease-snap), box-shadow var(--dur-snap) var(--ease-snap), border-color var(--dur-snap) var(--ease-snap); } a.formation-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--border-default); text-decoration: none; color: var(--text-body); } a.formation-card:active { transform: translateY(2px) scale(0.98); box-shadow: var(--shadow-card); transition-duration: var(--dur-instant); } .fc-cover { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(150deg, var(--marais-800), var(--marais-950) 70%); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-5); } .fc-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, var(--brand-subtle), transparent 55%); pointer-events: none; } .fc-cover .fc-cat { position: relative; font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--croco-300); margin-bottom: var(--space-2); } .fc-cover .fc-title { position: relative; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--tcc-type-step-2); line-height: var(--heading-lg-lh); letter-spacing: var(--tracking-tight); color: var(--sable-50); } .fc-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; } .fc-accroche { margin: 0; color: var(--text-body); font-size: var(--tcc-type-step-0); line-height: var(--body-md-lh); } .fc-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); color: var(--text-muted); } .fc-meta .dot::before { content: "·"; margin-right: var(--space-2); } .badge-unlock { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: 0.04em; } .badge-unlock--now { background: var(--brand-subtle); color: var(--brand-text); } .badge-unlock--later { background: var(--surface-sunken); color: var(--text-muted); } /* ---- Filtres catalogue ---- */ .filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-10); } .filter-chip { height: var(--control-height-sm); padding: 0 var(--space-4); display: inline-flex; align-items: center; border-radius: var(--radius-pill); border: var(--border-width) solid var(--border-default); background: var(--surface-card); color: var(--text-body); font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); cursor: pointer; transition: transform var(--dur-snap) var(--ease-snap), background var(--dur-snap) var(--ease-snap), border-color var(--dur-snap) var(--ease-snap), color var(--dur-snap) var(--ease-snap); } .filter-chip:hover { border-color: var(--brand); color: var(--brand-text); transform: translateY(-2px); } .filter-chip:active { transform: translateY(2px) scale(0.97); transition-duration: var(--dur-instant); } /* Le vert de marque ne porte pas du texte blanc en AA : le chip actif prend le cran plus profond (--brand-hover, croco-700) pour passer le seuil. */ .filter-chip[aria-pressed="true"] { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--white); } /* ---- Offres (pricing) ---- */ .offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); align-items: stretch; } .offers--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; } @media (max-width: 1020px) { .offers, .offers--two { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } } .offer { display: flex; flex-direction: column; gap: var(--space-5); background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-8); } .offer--featured { border: var(--border-width-strong) solid var(--brand); box-shadow: var(--shadow-card-hover); } .offer .offer-kicker { font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .offer h3 { font-size: var(--tcc-type-step-2); line-height: var(--heading-lg-lh); font-weight: var(--weight-bold); } .offer .price { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--tcc-type-step-2); line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--text-strong); } .offer .price small { font-family: var(--font-body); font-size: var(--tcc-type-step-n1); font-weight: var(--weight-regular); color: var(--text-muted); letter-spacing: 0; } .offer .price-note { font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); color: var(--text-muted); } .offer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .offer li { position: relative; padding-left: var(--space-6); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } .offer li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand-text); font-weight: var(--weight-bold); } .offer li.offer-excluded { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--text-faint); } .offer li.offer-excluded::before { content: "×"; color: var(--text-faint); } .offer-tooltip { position: relative; } .offer-tooltip__label { color: var(--text-strong); font-weight: var(--weight-semibold); text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--text-muted); text-underline-offset: 4px; cursor: help; } .offer-tooltip__label:focus-visible { border-radius: var(--radius-sm); box-shadow: var(--ring); } .offer-tooltip__content { position: absolute; left: var(--space-6); bottom: calc(100% + var(--space-2)); z-index: 10; width: min(340px, calc(100vw - 64px)); padding: var(--space-4); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-card-hover); color: var(--text-body); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-snap) var(--ease-snap), visibility var(--dur-snap) var(--ease-snap); } .offer-tooltip:hover .offer-tooltip__content, .offer-tooltip:focus-within .offer-tooltip__content { opacity: 1; visibility: visible; } .offer .offer-cta { margin-top: auto; } /* ---- Listes à puces custom (résultats, pour qui) ---- */ .check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .check-list li { position: relative; padding-left: var(--space-6); } .check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-text); font-weight: var(--weight-bold); } /* ---- Modules (accordéon simple) ---- */ .modules { display: flex; flex-direction: column; gap: var(--space-3); } .module { display: flex; gap: var(--space-4); align-items: baseline; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-5) var(--space-6); } .module .num { font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); color: var(--brand-text); min-width: 2.2em; } .module h3 { font-size: var(--tcc-type-step-0); line-height: var(--heading-sm-lh); font-weight: var(--weight-semibold); } .module p { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } /* ---- Timeline (parcours 90 jours) ---- */ .timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--grid-gutter); } @media (max-width: 860px) { .timeline { grid-template-columns: 1fr; } } .timeline li { display: flex; gap: var(--space-4); align-items: baseline; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); } .timeline .num { font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); color: var(--brand-text); min-width: 2em; } .timeline .t-title { font-weight: var(--weight-semibold); color: var(--text-strong); } .timeline .t-sub { display: block; color: var(--text-muted); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } /* ---- Versus (prestataire vs architecte) ---- */ .versus { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); } @media (max-width: 860px) { .versus { grid-template-columns: 1fr; } } .versus .col { border-radius: var(--radius-card); padding: var(--space-8); border: var(--border-width) solid var(--border-subtle); background: var(--surface-card); } .versus .col--them { opacity: 0.82; } .versus .col--us { border-color: var(--border-strong); box-shadow: var(--shadow-card); } .versus h3 { font-size: var(--tcc-type-step-1); margin-bottom: var(--space-5); } .versus ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .versus li { position: relative; padding-left: var(--space-6); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } .versus .col--them li::before { content: "✕"; position: absolute; left: 0; color: var(--text-faint); } .versus .col--us li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-text); font-weight: var(--weight-bold); } /* ---- Stats (bande de preuve) ---- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); } @media (max-width: 700px) { .stats { grid-template-columns: 1fr; } } .stat .stat-num { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--tcc-type-step-2); line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--text-strong); } .stat .stat-label { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); color: var(--text-muted); } /* ---- FAQ ---- */ .faq { display: flex; flex-direction: column; gap: var(--space-3); max-width: 780px; } .faq details { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-5) var(--space-6); } .faq summary { cursor: pointer; font-weight: var(--weight-semibold); color: var(--text-strong); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--brand-text); } .faq details[open] summary::after { content: "−"; } .faq details p { margin: var(--space-4) 0 0; color: var(--text-body); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); max-width: none; } /* ---- Footer signature Bayou ---- */ .footer { padding: var(--space-16) 0 var(--space-8); } .footer-scales { position: absolute; inset: 0; opacity: 0.45; pointer-events: none; } .footer-signature, .footer-seal { position: relative; text-align: center; } .footer-mark { display: block; height: 54px; width: auto; margin: 0 auto var(--space-5); } .footer-signature h2 { font-size: var(--tcc-type-step-2); color: var(--text-strong); } .footer-signature h2 em { font-style: normal; color: var(--accent); } .footer .bayou-wm-band { margin: var(--space-6) 0 var(--space-2); } .footer-seal { padding-top: var(--space-3); } /* ---- Sections sombres (godmode / baptiste) : fonds & respirations ---- */ .dark-band { position: relative; overflow: hidden; background: var(--surface-page); color: var(--text-body); } .dark-band h2, .dark-band h3 { color: var(--text-strong); } .dark-band .scales { position: absolute; inset: 0; opacity: 0.4; pointer-events: none; } /* ---- Page formation ---- */ .f-hero { padding-block: var(--space-20) var(--space-16); } .f-hero .crumbs { font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); color: var(--text-muted); margin-bottom: var(--space-6); } .f-hero .crumbs a { color: var(--text-muted); } .f-hero .crumbs a:hover { color: var(--brand-text); } .f-hero h1 { font-size: var(--tcc-type-step-3); line-height: var(--display-lg-lh); margin-top: var(--space-4); } .f-hero .promesse { font-size: var(--tcc-type-step-0); line-height: var(--body-lg-lh); color: var(--text-subtitle); margin-top: var(--space-5); max-width: 62ch; } .f-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); } .f-meta .chip { display: inline-flex; align-items: center; height: var(--control-height-sm); padding: 0 var(--space-4); border-radius: var(--radius-pill); border: var(--border-width) solid var(--border-default); font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); color: var(--text-muted); background: var(--surface-card); } .f-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-16); align-items: start; } @media (max-width: 1020px) { .f-layout { grid-template-columns: 1fr; } } .f-body h2 { font-size: var(--tcc-type-step-2); line-height: var(--heading-lg-lh); margin: var(--space-12) 0 var(--space-4); } .f-body h2:first-child { margin-top: 0; } .f-body p { color: var(--text-body); line-height: var(--body-md-lh); margin: 0 0 var(--space-4); } .f-aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--space-6); } .f-aside .card h3 { font-size: var(--tcc-type-step-0); margin-bottom: var(--space-4); } /* ============================================================ Gestes visuels Bayou ============================================================ */ /* Doctrine : sur fond sombre, l'eyebrow n'est JAMAIS néon (croco-300). */ .dark-band .bayou-eyebrow { color: var(--croco-300); } .dark-band .bayou-eyebrow::before { background: var(--croco-300); } /* ---- Hero sombre en grille : le texte parle, Clovis veille ---- */ .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-16); align-items: center; } .clovis-hero { display: flex; justify-content: center; } .clovis-hero img { width: clamp(180px, 22vw, 300px); height: auto; animation: bayou-eyepulse var(--dur-ambient) var(--ease-in-out) infinite; } @media (max-width: 1020px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-10); } .clovis-hero { order: -1; } .clovis-hero img { width: clamp(120px, 30vw, 180px); } } /* ---- Le badge pilule (pattern du template landing) ---- */ .pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-4); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); color: var(--text-muted); } .pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wordmark); box-shadow: 0 0 10px var(--accent); } /* ---- La bande de preuve : chiffres tabulaires, l'accent s'allume ---- */ .proof { display: flex; flex-wrap: wrap; gap: var(--space-10) var(--space-16); border-top: var(--border-width) solid var(--border-subtle); margin-top: var(--space-16); padding-top: var(--space-8); } .proof-item { display: flex; flex-direction: column; gap: var(--space-1); } .proof-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--tcc-type-step-2); font-weight: var(--weight-semibold); color: var(--accent); } .proof-label { font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* ---- La vie du Club : grille de features avec icônes ---- */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); } @media (max-width: 1020px) { .features { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .features { grid-template-columns: 1fr; } } .feature { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-6); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--brand-subtle); color: var(--brand-text); margin-bottom: var(--space-4); } .feature-icon svg { width: 20px; height: 20px; } .btn svg { width: 18px; height: 18px; } .feature h3 { font-size: var(--tcc-type-step-0); line-height: var(--heading-sm-lh); } .feature p { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } /* ---- Covers formations v2 : écailles + barre d'accent + Bricolage ---- */ .fc-cover .fc-scales { position: absolute; inset: 0; opacity: 0.55; pointer-events: none; -webkit-mask-image: linear-gradient(160deg, rgba(0, 0, 0, 0.9), transparent 72%); mask-image: linear-gradient(160deg, rgba(0, 0, 0, 0.9), transparent 72%); } .fc-cover::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--accent)); } a.formation-card:hover .fc-cover .fc-title { color: var(--white); } /* ---- Cover image (titre déjà intégré dans l'image) ---- */ .fc-cover--img { padding: 0; display: block; } .fc-cover--img::before, .fc-cover--img::after { display: none; } .fc-cover--img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); } a.formation-card:hover .fc-cover--img img { transform: scale(1.03); } a.formation-card:active .fc-cover--img img { transform: scale(0.98); transition-duration: var(--dur-instant); } /* Barre d'accent conservée en tête de la cover-image */ .fc-cover--img { position: relative; } .fc-cover--img::after { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--accent)); z-index: 1; } /* ---- Cover panneau (page formation) ---- */ .f-cover { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: linear-gradient(150deg, var(--marais-800), var(--marais-950) 70%); box-shadow: var(--shadow-card-hover); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-8); } .f-cover::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand), var(--accent)); } .f-cover .fc-scales { position: absolute; inset: 0; opacity: 0.6; pointer-events: none; -webkit-mask-image: linear-gradient(160deg, rgba(0, 0, 0, 0.9), transparent 75%); mask-image: linear-gradient(160deg, rgba(0, 0, 0, 0.9), transparent 75%); } .f-cover .fc-cat { position: relative; font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--croco-300); margin-bottom: var(--space-2); } .f-cover .fc-name { position: relative; font-family: var(--font-display); font-weight: var(--weight-display-max); font-size: var(--tcc-type-step-2); line-height: var(--display-md-lh); letter-spacing: var(--tracking-display); color: var(--sable-50); } .f-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-16); align-items: center; } @media (max-width: 1020px) { .f-hero-grid { grid-template-columns: 1fr; } } .f-cover--img { padding: 0; display: block; } .f-cover--img img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ---- Portrait fondateur ---- */ .founder-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-12); align-items: center; } @media (max-width: 860px) { .founder-grid { grid-template-columns: 1fr; } } .founder-photo { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card-hover); border: var(--border-width) solid var(--border-default); aspect-ratio: 4 / 5; } .founder-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .founder-grid .section-head { margin-bottom: 0; } /* ---- Page communauté ---- */ .community-hero { padding-block: var(--space-20); } .community-photo { aspect-ratio: 4 / 3; } .community-checks { margin-top: var(--space-8); } .community-cta { margin-bottom: 0; } .community-cta .btn { margin-top: var(--space-6); } /* ---- Photo panoramique (mastermind, scène) ---- */ .photo-band { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card-hover); border: var(--border-width) solid var(--border-default); aspect-ratio: 16 / 9; } .photo-band img { display: block; width: 100%; height: 100%; object-fit: cover; } .photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(1, 13, 11, 0.55)); pointer-events: none; } .photo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; } @media (max-width: 1020px) { .photo-split { grid-template-columns: 1fr; } } /* ---- Chip de phase (timeline Accélérateur) ---- */ .phase-chip { font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-text); background: var(--brand-subtle); border-radius: var(--radius-pill); padding: 2px var(--space-2); white-space: nowrap; } /* ---- Tag "populaire" sur l'offre mise en avant ---- */ .tag-pop { align-self: flex-start; font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cta-text); background: var(--cta-bg); border-radius: var(--radius-pill); padding: 4px var(--space-3); } /* ---- Utilitaires ---- */ .center { text-align: center; } .mt-8 { margin-top: var(--space-8); } .mt-12 { margin-top: var(--space-12); } @media (max-width: 640px) { .section { padding-block: var(--space-16); } .hero { padding-block: var(--space-16) var(--space-12); } } /* ============================================================ Accélérateur : offre principale + Version Intégrateur + diagnostic ============================================================ */ /* ---- Segmentation : quel business veux-tu systématiser ? ---- */ .tracks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); } @media (max-width: 860px) { .tracks { grid-template-columns: 1fr; } } .track { display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-8); text-decoration: none; color: var(--text-body); transition: transform var(--dur-snap) var(--ease-snap), box-shadow var(--dur-snap) var(--ease-snap), border-color var(--dur-snap) var(--ease-snap); } a.track:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--brand); text-decoration: none; color: var(--text-body); } a.track:active { transform: translateY(2px) scale(0.97); transition-duration: var(--dur-instant); } .track .track-answer { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--tcc-type-step-2); line-height: 1.1; letter-spacing: var(--tracking-display); color: var(--text-strong); } .track .track-go { margin-top: auto; font-weight: var(--weight-semibold); color: var(--brand-text); } /* ---- Les 5 phases de l'entrepreneur ---- */ .phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); } @media (max-width: 1020px) { .phases { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .phases { grid-template-columns: 1fr; } } .phase { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .phase .phase-num { font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .phase h3 { font-size: var(--tcc-type-step-0); line-height: var(--heading-sm-lh); } .phase p { margin: 0; color: var(--text-muted); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } .phase--target { border-color: var(--brand); box-shadow: var(--shadow-card); } .phase--target .phase-num { color: var(--brand-text); } /* ---- La méthode : les 5 étapes d'un sprint ---- */ .method { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); counter-reset: step; } @media (max-width: 1020px) { .method { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .method { grid-template-columns: 1fr; } } .method .step { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-5); } .method .step b { display: block; font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); color: var(--brand-text); margin-bottom: var(--space-2); } .method .step h3 { font-size: var(--tcc-type-step-0); line-height: var(--heading-sm-lh); margin-bottom: var(--space-2); } .method .step p { margin: 0; color: var(--text-muted); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } /* ---- Les trois prochains sprints ---- */ .sprint-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); align-items: stretch; } .sprint-card { position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 700px; padding: var(--space-8); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-card); background: var(--marais-900); box-shadow: var(--shadow-card); } .sprint-card__scales { position: absolute; inset: 0; z-index: -1; opacity: 0.42; pointer-events: none; -webkit-mask-image: linear-gradient(145deg, transparent 28%, var(--marais-950) 100%); mask-image: linear-gradient(145deg, transparent 28%, var(--marais-950) 100%); } .sprint-card__content { display: flex; flex-direction: column; height: 100%; } .sprint-date { align-self: flex-start; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--accent); border-radius: var(--radius-sm); color: var(--accent); font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); /* Le Mono est plafonné à 600 : au-delà il perd son dessin technique. */ font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); } .sprint-system { margin-top: var(--space-6); color: var(--croco-300); font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: var(--tracking-label); text-transform: uppercase; } .sprint-card h3 { margin-top: var(--space-2); color: var(--text-strong); font-size: var(--tcc-type-step-2); line-height: var(--heading-lg-lh); } .sprint-pitch { margin: var(--space-5) 0 0; color: var(--text-body); font-size: var(--tcc-type-step-0); line-height: var(--body-md-lh); } .sprint-assets-title { margin: var(--space-6) 0 var(--space-3); color: var(--accent); font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; } .sprint-assets { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; } .sprint-assets li { padding-left: var(--space-3); border-left: 2px solid var(--accent); color: var(--text-body); font-size: var(--tcc-type-step-0); line-height: var(--body-md-lh); } .sprint-punch { margin: auto 0 0; padding-top: var(--space-6); border-top: var(--border-width) dashed var(--border-default); color: var(--accent); font-size: var(--tcc-type-step-0); font-style: italic; font-weight: var(--weight-semibold); } @media (min-width: 1200px) { .sprint-cards { width: min(1420px, calc(100vw - (var(--grid-margin) * 2))); margin-left: 50%; transform: translateX(-50%); } } @media (max-width: 1020px) { .sprint-cards { grid-template-columns: 1fr; } .sprint-card { min-height: 0; } } /* ---- Contrastes tâche / actif (capital systémique) ---- */ .swaps { display: flex; flex-direction: column; gap: var(--space-3); max-width: 860px; } .swap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); } @media (max-width: 640px) { .swap { grid-template-columns: 1fr; } } .swap .swap-task, .swap .swap-asset { position: relative; padding-left: var(--space-6); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } .swap .swap-task { color: var(--text-muted); } .swap .swap-task::before { content: "✕"; position: absolute; left: 0; color: var(--text-faint); } .swap .swap-asset { color: var(--text-strong); } .swap .swap-asset::before { content: "✓"; position: absolute; left: 0; color: var(--brand-text); font-weight: var(--weight-bold); } /* ---- Comparateur des deux versions ---- */ .compare { width: 100%; border-collapse: collapse; } .compare th, .compare td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); text-align: left; font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } .compare th { font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; } .compare td .yes { color: var(--brand-text); font-weight: var(--weight-bold); } .compare td .no { color: var(--text-faint); } .compare-wrap { overflow-x: auto; } /* ---- Diagnostic : Score de Dépendance ---- */ .diag-card { max-width: 720px; margin-inline: auto; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-8); } .diag-progress { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; margin-bottom: var(--space-6); } .diag-progress i { display: block; height: 100%; width: 0; background: var(--brand); transition: width var(--dur-base) var(--ease-out); } .diag-q { font-size: var(--tcc-type-step-1); line-height: var(--heading-md-lh); color: var(--text-strong); font-weight: var(--weight-semibold); margin-bottom: var(--space-6); } .diag-options { display: flex; flex-direction: column; gap: var(--space-3); } .diag-btn { display: block; width: 100%; text-align: left; background: var(--surface-page); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-control); padding: var(--space-4) var(--space-5); font: inherit; color: var(--text-body); cursor: pointer; transition: transform var(--dur-snap) var(--ease-snap), border-color var(--dur-snap) var(--ease-snap), background var(--dur-snap) var(--ease-snap); } .diag-btn:hover { transform: translateY(-2px); border-color: var(--brand); background: var(--surface-hover); } .diag-btn:active { transform: translateY(2px) scale(0.97); transition-duration: var(--dur-instant); } .diag-score { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--tcc-type-step-4); line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--text-strong); } .diag-score small { font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); color: var(--text-muted); letter-spacing: 0; } .diag-verdict { font-size: var(--tcc-type-step-0); line-height: var(--body-lg-lh); color: var(--text-body); margin-top: var(--space-4); } .diag-meter { height: 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; margin-top: var(--space-6); } .diag-meter i { display: block; height: 100%; width: 0; background: var(--brand); transition: width var(--dur-slow) var(--ease-out); } .diag-restart { margin-top: var(--space-6); } /* ============================================================ Visualisations : réseau de dépendance, roue, mur d'actifs ============================================================ */ /* ---- Avant/après : le réseau de dépendance ---- */ .netmap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); margin-bottom: var(--space-10); } @media (max-width: 860px) { .netmap { grid-template-columns: 1fr; } } .netmap .panel { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-6); } .netmap .panel--after { border-color: var(--border-strong); } .netmap svg { width: 100%; height: auto; display: block; } .netmap .panel-label { font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: var(--space-4); } .netmap .panel--after .panel-label { color: var(--brand-text); } .netmap .panel-caption { margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } .netmap .node { fill: var(--surface-page); stroke: var(--border-strong); stroke-width: 1.5; } .netmap .node--sys { stroke: var(--brand); } .netmap .node--toi { fill: var(--brand-subtle); stroke: var(--accent); stroke-width: 2; } .netmap .edge { stroke: var(--text-faint); stroke-width: 1.5; } .netmap .edge--sys { stroke: var(--brand); stroke-width: 1.5; opacity: 0.75; } .netmap .edge--watch { stroke: var(--text-faint); stroke-width: 1.5; stroke-dasharray: 4 5; } .netmap text { font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); fill: var(--text-body); text-anchor: middle; } .netmap .lbl--toi { fill: var(--text-strong); font-weight: 700; } /* ---- Le mur d'actifs : une brique par mois ---- */ .asset-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); } @media (max-width: 1020px) { .asset-wall { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 860px) { .asset-wall { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .asset-wall { grid-template-columns: repeat(2, 1fr); } } .asset-tile { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .asset-tile .asset-mois { font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: var(--tracking-label); color: var(--text-faint); } .asset-tile svg { width: 22px; height: 22px; color: var(--brand-text); } .asset-tile b { font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); color: var(--text-strong); font-weight: var(--weight-semibold); } /* ---- Les 5 phases en escalier (desktop) ---- */ @media (min-width: 1021px) { .phases--stairs { align-items: start; } .phases--stairs .phase:nth-child(1) { margin-top: var(--space-24); } .phases--stairs .phase:nth-child(2) { margin-top: 72px; } .phases--stairs .phase:nth-child(3) { margin-top: var(--space-12); } .phases--stairs .phase:nth-child(4) { margin-top: var(--space-6); } .phases--stairs .phase:nth-child(5) { margin-top: 0; } }