/* ============================================================ 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 ---- Les fondations 3.0 rendent toute `.section` transparente : la bande sable réaffirme sa couleur avec la spécificité du sol. */ .band-sunken, body.tcc-root .section.band-sunken, body.tcc-root .band-sunken { background-color: var(--sable-50); } body.tcc-root main:has(> .band-sunken:last-child) + .footer .footer-jaw { background-color: var(--sable-50); } body.tcc-root .section-head.section-head--narrow h2 { font-size: clamp(var(--tcc-type-step-2), 3.2vw, var(--tcc-type-step-3)); line-height: var(--heading-lg-lh); letter-spacing: -.035em; max-width: 22ch; } /* ---- 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.22; 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: 820px; } .hero h1 { font-size: clamp(var(--tcc-type-step-4), 5.4vw, var(--tcc-type-step-6)); line-height: .96; letter-spacing: -.045em; font-weight: var(--weight-display-max, 700); margin-top: var(--space-5); text-wrap: balance; } .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) : écailles atténuées, halos or et vert */ .hero--dark h1 em { color: var(--tcc-accent-text); } .hero--dark .scales { opacity: 0.3; -webkit-mask-image: linear-gradient(180deg, var(--marais-950) 10%, transparent 80%); mask-image: linear-gradient(180deg, var(--marais-950) 10%, transparent 80%); } .hero--dark::before, .dark-band.hero::before, .ng-halo::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; background: radial-gradient(ellipse 40% 55% at 18% 10%, var(--tcc-glow-house), transparent 70%), radial-gradient(ellipse 46% 60% at 86% 20%, var(--tcc-glow-live), transparent 72%); filter: blur(18px); } .hero--dark > .wrap, .ng-halo > .wrap { position: relative; } /* ---- 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(--tcc-radius-card); box-shadow: var(--tcc-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%, var(--tcc-glow-live), transparent 34%), radial-gradient(circle at 10% 90%, var(--tcc-glow-house), transparent 40%), linear-gradient(145deg, var(--tcc-floor-warm), var(--tcc-screen-bg) 78%); border: var(--border-width) solid var(--tcc-border-default); border-left: 4px solid var(--tcc-house); border-radius: var(--tcc-radius-panel); box-shadow: var(--tcc-shadow-card); } .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(--tcc-radius-card); box-shadow: var(--tcc-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: radial-gradient(circle at 80% 0%, var(--tcc-glow-live), transparent 45%), var(--tcc-screen-bg); 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-6); 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(--tcc-live-subtle); color: var(--tcc-accent-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-md); padding: 0 var(--space-5); 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(--tcc-live); background: var(--tcc-live-subtle); color: var(--tcc-accent-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(--croco-700); border-color: var(--croco-700); color: var(--white); box-shadow: 0 8px 20px var(--tcc-glow-live); } /* ---- 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(--tcc-radius-card); padding: var(--space-5) var(--space-6); } .module .num { display: inline-grid; place-items: center; align-self: flex-start; min-width: 2.2em; height: 2.2em; border-radius: var(--radius-pill); background: var(--tcc-live-subtle); font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); font-weight: var(--weight-semibold); color: var(--tcc-accent-text); } .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(--tcc-radius-card); box-shadow: var(--tcc-shadow-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); } .stats .card { padding: var(--space-8); } .stats .card h3 { margin-top: var(--space-3); font-size: var(--tcc-type-step-1); line-height: var(--heading-md-lh); } .stats .card p { margin: var(--space-3) 0 0; color: var(--text-body); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } /* ---- 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(--tcc-radius-card); padding: var(--space-5) var(--space-6); transition: box-shadow var(--dur-snap) var(--ease-snap), border-color var(--dur-snap) var(--ease-snap); } .faq details[open] { box-shadow: var(--tcc-shadow-card); border-color: var(--tcc-border-default); } .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: "+"; flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--tcc-live-subtle); font-family: var(--font-mono); color: var(--tcc-accent-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: clamp(var(--tcc-type-step-3), 4.2vw, var(--tcc-type-step-4)); line-height: .98; letter-spacing: -.04em; margin-top: var(--space-4); text-wrap: balance; } .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 { padding: var(--space-8); } .f-aside .card h3 { font-size: var(--tcc-type-step-1); line-height: var(--heading-md-lh); 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-display); font-variant-numeric: tabular-nums; font-size: var(--tcc-type-step-2); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); color: var(--tcc-house-soft); } .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(--tcc-radius-card); box-shadow: var(--tcc-shadow-card); padding: var(--space-8); transition: transform var(--dur-snap) var(--ease-snap), box-shadow var(--dur-snap) var(--ease-snap), border-color var(--dur-snap) var(--ease-snap); } .feature:hover { transform: translateY(-2px); border-color: var(--tcc-border-default); } .feature:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tcc-live-subtle); color: var(--tcc-accent-text); margin-bottom: var(--space-5); } .feature-icon svg { width: 22px; height: 22px; } .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(--tcc-radius-panel); overflow: hidden; background: radial-gradient(circle at 80% 0%, var(--tcc-glow-live), transparent 45%), var(--tcc-screen-bg); box-shadow: var(--tcc-shadow-card); 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(--tcc-radius-panel); overflow: hidden; box-shadow: var(--tcc-shadow-card); 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(--tcc-radius-panel); overflow: hidden; box-shadow: var(--tcc-shadow-card); 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%, color-mix(in srgb, var(--marais-950) 55%, transparent)); 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); } .hero h1, body.tcc-root .hero h1 { font-size: clamp(var(--tcc-type-step-2), 9.6vw, var(--tcc-type-step-4)); line-height: .98; hyphens: auto; overflow-wrap: break-word; } .ng-screen__bar span:last-child { display: none; } } /* ============================================================ 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); } /* ---- 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; } } /* ============================================================ 3.0 · Gestes "next gen" partagés par les pages historiques Sol clair, sombre = lieu. Ces helpers ne consomment que des alias. ============================================================ */ /* ---- Papier : une carte blanche posée SUR un lieu sombre (formulaire dans un héros) ---- */ .ng-paper { --tcc-surface-card: var(--white); --tcc-surface-raised: var(--white-warm); --tcc-surface-sunken: var(--sable-50); --tcc-text-strong: var(--encre); --tcc-text-body: var(--encre-700); --tcc-text-muted: var(--encre-500); --tcc-text-faint: var(--encre-500); --tcc-text-subtitle: var(--encre-500); --tcc-border-subtle: color-mix(in srgb, var(--encre) 8%, transparent); --tcc-border-default: color-mix(in srgb, var(--encre) 14%, transparent); --tcc-border-strong: color-mix(in srgb, var(--encre) 24%, transparent); --tcc-house-soft: var(--or-700); --tcc-live: var(--croco-600); --tcc-live-subtle: color-mix(in srgb, var(--croco-500) 10%, transparent); --tcc-eyebrow: var(--croco-700); --tcc-accent-text: var(--croco-700); --tcc-shadow-card: 0 18px 50px color-mix(in srgb, var(--encre) 9%, transparent), 0 1px 2px color-mix(in srgb, var(--encre) 6%, transparent); --surface-page: var(--white); --surface-card: var(--white); --surface-raised: var(--white-warm); --surface-sunken: var(--sable-50); --text-strong: var(--encre); --text-body: var(--encre-700); --text-muted: var(--encre-500); --text-faint: var(--encre-500); --text-subtitle: var(--encre-500); --border-subtle: color-mix(in srgb, var(--encre) 8%, transparent); --border-default: color-mix(in srgb, var(--encre) 14%, transparent); --border-strong: color-mix(in srgb, var(--encre) 24%, transparent); --accent-text: var(--or-700); --brand-text: var(--croco-700); --link: var(--croco-700); background: var(--white); color: var(--encre-700); border: var(--border-width) solid color-mix(in srgb, var(--white) 70%, transparent); border-radius: var(--tcc-radius-panel); box-shadow: 0 30px 80px color-mix(in srgb, var(--tcc-black) 45%, transparent), 0 0 0 6px color-mix(in srgb, var(--white) 6%, transparent); padding: clamp(var(--space-6), 3vw, var(--space-8)); } .ng-paper h2, .ng-paper h3 { color: var(--encre); } .dark-band .ng-paper .bayou-eyebrow { color: var(--croco-700); } .dark-band .ng-paper .bayou-eyebrow::before { background: var(--croco-700); } .ng-paper .note { margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); color: var(--encre-500); } .ng-paper iframe { width: 100%; border: 0; border-radius: var(--radius-md); background: var(--white); } /* ---- Cadre photo arrondi + ombre ---- */ .ng-frame { position: relative; overflow: hidden; margin: 0; border: var(--border-width) solid var(--tcc-border-default); border-radius: var(--tcc-radius-panel); background: var(--tcc-surface-sunken); box-shadow: var(--tcc-shadow-card); isolation: isolate; } .ng-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .ng-frame--gold { border-color: color-mix(in srgb, var(--tcc-house) 45%, var(--tcc-border-default)); box-shadow: var(--tcc-shadow-card), 0 0 0 8px var(--tcc-glow-house); } .ng-frame__caption { position: absolute; z-index: 1; right: var(--space-4); bottom: var(--space-4); left: var(--space-4); padding: var(--space-4) var(--space-5); border: var(--border-width) solid color-mix(in srgb, var(--white) 14%, transparent); border-radius: var(--tcc-radius-card); background: color-mix(in srgb, var(--marais-950) 78%, transparent); backdrop-filter: blur(12px); color: var(--white); } .ng-frame__caption span { display: block; margin-bottom: var(--space-1); font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--or-300); } .ng-frame__caption strong { color: var(--white); font-size: var(--tcc-type-step-0); } /* ---- Cadre "écran" sombre autour d'une capture ou d'une carte ---- */ .ng-screen { --tcc-surface-card: var(--tcc-screen-bg); position: relative; overflow: hidden; border: var(--border-width) solid color-mix(in srgb, var(--white) 12%, transparent); border-radius: var(--tcc-radius-card); background: var(--tcc-screen-bg); box-shadow: 0 30px 80px color-mix(in srgb, var(--tcc-black) 45%, transparent); } .ng-screen__bar { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: var(--space-4); padding-inline: var(--space-4); border-bottom: var(--border-width) solid color-mix(in srgb, var(--white) 8%, transparent); color: color-mix(in srgb, var(--white) 45%, transparent); font-family: var(--font-mono); font-size: var(--tcc-type-step-n2); letter-spacing: var(--tracking-label); text-transform: uppercase; } .ng-screen__bar span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--croco-neon); } .ng-screen__bar span:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; } .ng-screen img { display: block; width: 100%; height: auto; } .ng-screen__body { padding: clamp(var(--space-5), 3vw, var(--space-8)); } /* ---- Numéro or en pastille (bento, timelines) ---- */ .ng-num { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: color-mix(in srgb, var(--or-500) 14%, var(--tcc-surface-card)); border: var(--border-width) solid color-mix(in srgb, var(--or-500) 40%, transparent); font-family: var(--font-display); font-size: var(--tcc-type-step-0); font-weight: var(--weight-display); color: var(--tcc-house-soft); } /* ---- Icône sur pastille vert pâle ---- */ .ng-icon { display: inline-flex; width: 48px; height: 48px; flex: 0 0 48px; align-items: center; justify-content: center; border-radius: 14px; background: var(--tcc-live-subtle); color: var(--tcc-accent-text); } .ng-icon svg { width: 22px; height: 22px; } /* ---- Bento clair : cartes blanches, coins 20px ---- */ .ng-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); } .ng-bento--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1020px) { .ng-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ng-bento, .ng-bento--2 { grid-template-columns: 1fr; } } .ng-card { position: relative; display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: clamp(var(--space-6), 2.5vw, var(--space-8)); background: var(--tcc-surface-card); border: var(--border-width) solid var(--tcc-border-subtle); border-radius: var(--tcc-radius-card); box-shadow: var(--tcc-shadow-card); color: var(--tcc-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); } .ng-card:hover { transform: translateY(-2px); border-color: var(--tcc-border-default); } .ng-card:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); } .ng-card--featured { border-color: color-mix(in srgb, var(--tcc-house) 55%, var(--tcc-border-default)); box-shadow: var(--tcc-shadow-card), 0 0 0 6px var(--tcc-glow-house); } .ng-card--sable { background: var(--tcc-surface-sunken); box-shadow: none; } .ng-bento > .ng-card:only-child { grid-column: span 2; } @media (max-width: 1020px) { .ng-bento > .ng-card:only-child { grid-column: 1 / -1; } } .ng-card h3 { font-size: var(--tcc-type-step-1); line-height: var(--heading-md-lh); color: var(--tcc-text-strong); } .ng-card > p { margin: 0; color: var(--tcc-text-body); font-size: var(--tcc-type-step-0); line-height: var(--body-md-lh); } .ng-card__kicker { 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; color: var(--tcc-eyebrow); } .ng-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .ng-card__foot { margin-top: auto; padding-top: var(--space-2); } /* ---- Stat en carte claire : grand chiffre bronze ---- */ .ng-stat { align-items: flex-start; gap: var(--space-2); } .ng-stat__num { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(var(--tcc-type-step-2), 3vw, var(--tcc-type-step-3)); line-height: 1; letter-spacing: var(--tracking-display); color: var(--tcc-house-soft); } .ng-stat__label { font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); color: var(--tcc-text-muted); } /* ---- Pilule de statut (vivant / à venir) ---- */ .ng-pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 0 var(--space-3); border: var(--border-width) solid var(--tcc-border-default); border-radius: var(--radius-pill); background: var(--tcc-surface-card); 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; color: var(--tcc-text-muted); } .ng-pill--live { border-color: color-mix(in srgb, var(--tcc-live) 40%, transparent); background: var(--tcc-live-subtle); color: var(--tcc-accent-text); } .ng-pill--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tcc-live); box-shadow: 0 0 10px var(--tcc-live); } .ng-pill--gold { border-color: color-mix(in srgb, var(--tcc-house) 45%, transparent); background: color-mix(in srgb, var(--or-500) 12%, transparent); color: var(--tcc-house-soft); } /* ---- Timeline verticale numérotée (préparation, chapitres) ---- */ .ng-steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; } .ng-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-5); align-items: start; padding: var(--space-5) var(--space-6); background: var(--tcc-surface-card); border: var(--border-width) solid var(--tcc-border-subtle); border-radius: var(--tcc-radius-card); box-shadow: var(--tcc-shadow-card); } .ng-steps h3 { font-size: var(--tcc-type-step-0); line-height: var(--heading-sm-lh); color: var(--tcc-text-strong); } .ng-steps p { margin: var(--space-1) 0 0; color: var(--tcc-text-muted); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } /* ---- Héros en deux colonnes (texte + visuel) ---- */ .ng-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr); gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; } .ng-hero-grid .hero-inner { max-width: none; } @media (max-width: 980px) { .ng-hero-grid { grid-template-columns: 1fr; } .ng-hero-grid > *:last-child { width: min(100%, 34rem); } } /* ---- Bande finale sombre : clôture courte ---- */ .ng-final { position: relative; overflow: hidden; } .ng-final .wrap { position: relative; } .ng-final .section-head { margin-bottom: 0; } .ng-final .btn { margin-top: var(--space-8); } /* ---- Mise en avant du chiffre "sprint en cours" ---- */ .ng-kicker-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } @media (max-width: 640px) { .ng-card, .ng-paper { padding: var(--space-6); } .ng-steps li { grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) var(--space-5); } .ng-num { width: 36px; height: 36px; flex-basis: 36px; } } /* ---- 3.1 : couche "next gen" sur les pages historiques ---- Le canvas d'eau porte un z-index négatif : l'hôte doit ouvrir son propre contexte d'empilement pour que l'eau passe SOUS le contenu mais SUR le fond. */ .tcc-water-host { isolation: isolate; } .tcc-water-host > .tcc-atmosphere__water-canvas { z-index: -1; } /* Liste-fil : un nœud numéroté aligné sur la ligne or → vert, la carte à droite. */ .tcc-thread-list { --tcc-thread-x: 20px; display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .tcc-thread-list > li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--space-5); align-items: start; } .tcc-thread-list__card { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-5) var(--space-6); border: var(--border-width) solid var(--tcc-border-subtle); border-radius: var(--tcc-radius-card); background: var(--tcc-surface-card); box-shadow: var(--tcc-shadow-card); transition: transform var(--dur-snap) var(--ease-snap), border-color var(--dur-snap) var(--ease-snap); } .tcc-thread-list__card:hover { transform: translateY(-2px); border-color: var(--tcc-border-default); } .tcc-thread-list__card:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); } .tcc-thread-list__card h3 { margin: 0; font-size: var(--tcc-type-step-0); line-height: var(--heading-sm-lh); color: var(--tcc-text-strong); } .tcc-thread-list__card > p { margin: 0; color: var(--tcc-text-muted); font-size: var(--tcc-type-step-n1); line-height: var(--body-sm-lh); } .tcc-thread-list__card--wide { padding: var(--space-6) var(--space-8); } .tcc-thread-list__card .ng-card__head { margin-bottom: var(--space-1); } .tcc-thread-list__card .ng-card__kicker { display: block; margin-bottom: var(--space-1); } .tcc-thread-list__card h3.tcc-thread-list__title { font-size: var(--tcc-type-step-1); line-height: var(--heading-md-lh); } .tcc-thread-list__time { font-family: var(--font-mono); font-size: var(--tcc-type-step-n1); font-weight: var(--weight-semibold); color: var(--tcc-house-soft); } .tcc-thread-list__row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-4); align-items: baseline; } @media (max-width: 640px) { .tcc-thread-list > li { grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-4); } .tcc-thread-list { --tcc-thread-x: 17px; } .tcc-thread-list .tcc-thread__node { width: 36px; height: 36px; box-shadow: 0 0 0 4px var(--tcc-surface-card); } .tcc-thread-list__card { padding: var(--space-4) var(--space-5); } .tcc-thread-list__row { grid-template-columns: 3.6rem minmax(0, 1fr); } } /* Preuves dans un héros sombre : chiffres or, séparateur discret. */ .hero--dark .proof, .dark-band .proof { border-top-color: color-mix(in srgb, var(--white) 12%, transparent); } .hero--dark .proof-num, .dark-band .proof-num { color: var(--or-300); } .proof--tight { gap: var(--space-6) var(--space-10); margin-top: var(--space-10); padding-top: var(--space-6); } .proof--tight .proof-num { font-size: var(--tcc-type-step-1); } .proof--tight .proof-item { flex: 1 1 0; min-width: 8rem; } .proof--tight .proof-label { max-width: 22ch; line-height: 1.45; } @media (max-width: 640px) { .proof--tight { gap: var(--space-5) var(--space-6); } .proof--tight .proof-item { flex: 1 1 40%; min-width: 7.5rem; } .tcc-thread-list__row { grid-template-columns: 1fr; gap: var(--space-1); align-items: start; } } /* Bento sur une page historique : même respiration que les grilles ng-. */ .tcc-bento--flush { margin-top: 0; } .tcc-bento .tcc-bento__stat + .tcc-bento__body { padding-top: 0; } /* Photo large en parallaxe douce : le cadre coupe, l'image respire. */ .founder-photo { overflow: hidden; } .founder-photo img[data-parallax] { --tcc-parallax-scale: 1.12; }