/* ============================================================ Slater — L'écurie (page /lecurie) — CSS Section "Les pilotes" : états du master-détail (équiv. Osmo Tabs) v1.0 — accompagne slater-lecurie.js (session 23) Logique : - ≥992px : les cartes de droite s'empilent dans la même cellule de grille (grid-area 1/1). Sans JS, seule la 1re carte est visible (fallback :first-child). Quand le JS ajoute la classe .t1-tabs-ready sur #pilotes, seule la carte .is-active s'affiche (crossfade 450ms). - <992px : aucune règle → les cartes restent en flux normal (la passe responsive viendra plus tard). - Spécificité voulue : les règles .t1-tabs-ready (1,3,0) écrasent le fallback :first-child (1,2,0) dans les 2 sens. ============================================================ */ @media (min-width: 992px) { /* La liste de droite (w-dyn-items) devient une grille d'empilement */ #pilotes [data-tabs="visual"] { display: grid; } /* Toutes les cartes dans la même cellule + transition du crossfade */ #pilotes [data-tabs="visual-item"] { grid-area: 1 / 1; transition: opacity .45s ease, visibility .45s ease; } /* Fallback sans JS : seule la 1re carte est visible */ #pilotes [data-tabs="visual-item"]:not(:first-child) { opacity: 0; visibility: hidden; } /* Mode interactif (classe posée par le JS) : seule la carte active est visible, les autres n'interceptent aucun clic pendant le fondu sortant */ #pilotes.t1-tabs-ready [data-tabs="visual-item"]:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; } #pilotes.t1-tabs-ready [data-tabs="visual-item"].is-active { opacity: 1; visibility: visible; z-index: 1; /* la carte entrante peint par-dessus la sortante */ } /* Ligne active : teinte or + flèche visible */ #pilotes [data-tabs="content-item"].is-active { background: rgba(210, 180, 97, .06); } #pilotes [data-tabs="content-item"] .t1-pilotes-arrow { opacity: 0; transition: opacity .3s ease; } #pilotes [data-tabs="content-item"].is-active .t1-pilotes-arrow { opacity: 1; } } /* Focus clavier : anneau or visible (WCAG 2.4.7), pas d'anneau au clic souris */ #pilotes [data-tabs="content-item"]:focus { outline: none; } #pilotes [data-tabs="content-item"]:focus-visible { outline: 2px solid #D2B461; outline-offset: -2px; } /* Bio bornée à 4 lignes : une longue bio CMS ne gonfle pas la hauteur de toutes les cartes empilées */ #pilotes [data-tabs="visual-item"] .t1-pilotes-bio { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Préférence utilisateur : réduire les animations */ @media (prefers-reduced-motion: reduce) { #pilotes [data-tabs="visual-item"], #pilotes [data-tabs="content-item"] .t1-pilotes-arrow { transition: none; } } /* ============================================================ Section "Saison 2026" — slider GSAP (patron slater-homepage.css) v1.0 — session 24 ============================================================ */ [data-gsap-slider-init] { --slider-status: on; --slider-spv: 3; --slider-gap: 1.5em; } @media screen and (max-width: 991px) { [data-gsap-slider-init] { --slider-spv: 2.25; } } @media screen and (max-width: 767px) { [data-gsap-slider-init] { --slider-spv: 1.15; --slider-gap: 1em; } } [data-gsap-slider-item]:last-child { margin-right: 0; } /* Curseur "grab" pendant le drag */ [data-gsap-slider-list-status="grab"] { cursor: grab; } /* Contrôles */ [data-gsap-slider-status="not-active"] [data-gsap-slider-controls] { display: none; } [data-gsap-slider-control-status="not-active"] { opacity: 0.2; pointer-events: none; } /* États des cartes saison */ .t1-saison-card { transition: opacity 0.3s ease; } [data-gsap-slider-item-status="not-active"] .t1-saison-card { opacity: 0.4; } [data-gsap-slider-item-status="active"] .t1-saison-card, [data-gsap-slider-item-status="inview"] .t1-saison-card { opacity: 1; } /* ============================================================ Number Odometer (recette Osmo) — stats de la section Saison v1.0 — session 24 ============================================================ */ [data-odometer-element] { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; } [data-odometer-part="mask"], [data-odometer-part="static"] { display: inline-block; overflow: clip; padding: 0.05em; margin: -0.05em; } [data-odometer-part="roller"] { display: block; white-space: pre; text-align: center; will-change: transform; } [data-odometer-part="static"] { display: inline-block; } /* ============================================================ Step-by-step Timeline (recette Osmo) — section Notre histoire États pilotés par le JS : data-status / data-current. Adapté aux tokens Tag One (or #D2B461). v1.0 — session 24 ============================================================ */ /* Marqueur d'une étape atteinte : or plein, chiffre noir */ [data-step-timeline-item][data-status="active"] [data-step-timeline-marker] { background: #D2B461; color: #000000; border-color: #D2B461; } /* Marqueur de l'étape courante : anneau or diffus */ [data-step-timeline-item][data-current] [data-step-timeline-marker] { box-shadow: 0 0 0 0.5em rgba(210, 180, 97, 0.16); } /* Contenu : atténué avant activation, net sur l'étape courante */ [data-step-timeline-item] .t1-histoire-content { opacity: 0.25; } [data-step-timeline-item][data-status="active"] .t1-histoire-content { opacity: 0.5; } [data-step-timeline-item][data-current] .t1-histoire-content { opacity: 1; } /* Guillemets français en or autour de la citation d'Alex */ .t1-histoire-blockquote::before { content: "\00ab\00a0"; color: #D2B461; } .t1-histoire-blockquote::after { content: "\00a0\00bb"; color: #D2B461; } /* ============================================================ Section « L'écurie » — zoom image (sticky CSS + scrub clip-path) Le sticky (.t1-equipe-sticky) et les positions sont dans Webflow. Ici : l'état INITIAL du clip-path (fenêtre centrée) + will-change, le text-shadow de lisibilité, et le fallback reduced-motion. Aucun pin ScrollTrigger = aucun conflit avec Lenis = pas de bounce. Cf. [[osmo-flip-zoom-vs-sticky]] + [[sticky-vs-pin-lenis]]. v1.0 — session 26 ============================================================ */ /* État de repos AVANT le JS : la photo est réduite à une fenêtre centrée arrondie (le JS ouvre ensuite le clip jusqu'au plein écran). Desktop : marges 28vh / 27vw. */ .t1-equipe-media { clip-path: inset(28vh 27vw 28vh 27vw round 20px); will-change: clip-path; } /* Léger sur-scale de départ de l'image (le JS le résorbe → zoom doux) */ .t1-equipe-img { will-change: transform; } /* Lisibilité du texte quand il défile par-dessus la photo */ .t1-equipe-mission { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.7); } /* Mobile : fenêtre plus large (les voitures restent cadrées) */ @media (max-width: 767px) { .t1-equipe-media { clip-path: inset(30vh 8vw 30vh 8vw round 16px); } } /* Accessibilité : pas d'animation → photo plein écran + texte visible d'emblée */ @media (prefers-reduced-motion: reduce) { .t1-equipe-media { clip-path: inset(0 0 0 0 round 0px); } .t1-equipe-title { display: none; } .t1-equipe-after { opacity: 1 !important; } .t1-equipe-dark { opacity: 0.45 !important; } } /* ============================================================ Section Équipe — resserrage du bloc partenaires (session 54). Les classes t1-home-part-* sont PARTAGÉES avec l'accueil v2 : on les surcharge ICI par sélecteurs descendants (spécificité supérieure aux classes Webflow, donc l'ordre de chargement Slater-avant-Webflow ne joue pas). Objectif : mission + logos + marquee tiennent dans l'écran sticky du zoom. ============================================================ */ .t1-equipe-partners .t1-home-part-grid { margin-top: 8px; } .t1-equipe-partners .t1-home-part-tile.is-lg { min-height: 132px; padding-top: 8px; padding-bottom: 8px; } .t1-equipe-partners .t1-home-part-marquee { margin-top: 8px; } .t1-equipe-partners .t1-home-part-marquee .t1-home-part-tile { min-height: 96px; } @media (max-width: 767px) { /* 2 principaux côte à côte (la règle globale small les empile). HIÉRARCHIE (retour Simon) : principaux nettement plus gros que les fournisseurs du marquee. */ .t1-equipe-partners .t1-home-part-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t1-equipe-partners .t1-home-part-tile.is-lg { min-height: 96px; } .t1-equipe-partners .t1-home-part-logo.is-lg { max-height: 60px; max-width: 85%; } .t1-equipe-partners .t1-home-part-marquee .t1-home-part-tile { min-height: 56px; } .t1-equipe-partners .t1-home-part-marquee .t1-home-part-logo { max-height: 26px; } .t1-equipe-partners .t1-home-part-mq-item { width: 150px; } } /* Flèches du slider Saison : hover or (le pseudo est rejeté par l'API, posé ici ; :hover = spécificité (0,2,0) > la classe Webflow) */ .t1-saison-control:hover { border-color: #D2B461; } /* Hero — photo pluie mobile : la règle vit désormais dans un HTML EMBED de la page Webflow (45vh !important), pas ici — le cache navigateur du CSS Slater rendait les correctifs invisibles (vécu 3×, session 54). Ne pas la remettre ici. */ /* ============================================================ Hero — grille des 4 chiffres : bordures extérieures retirées. Desktop : seuls les séparateurs verticaux entre cases restent. ≤991px (grille 2×2) : la « croix » — séparateurs internes only. Scopé à l'instance via le combo is-2col-mbl + .section.hero pour battre les combos Webflow (0,4,0 > 0,3,0). ============================================================ */ .section.hero .grid-4-columns.is-2col-mbl > .div-grid { border: 0; } @media (min-width: 992px) { .section.hero .grid-4-columns.is-2col-mbl > .div-grid:not(:last-child) { border-right: 1px solid hsla(0, 0%, 100%, 0.15); } } @media (max-width: 991px) { .section.hero .grid-4-columns.is-2col-mbl > .div-grid:nth-child(1) { border-right: 1px solid hsla(0, 0%, 100%, 0.15); border-bottom: 1px solid hsla(0, 0%, 100%, 0.15); } .section.hero .grid-4-columns.is-2col-mbl > .div-grid:nth-child(2) { border-bottom: 1px solid hsla(0, 0%, 100%, 0.15); } .section.hero .grid-4-columns.is-2col-mbl > .div-grid:nth-child(3) { border-right: 1px solid hsla(0, 0%, 100%, 0.15); } } /* Pilotes — les lignes du master-détail deviennent cliquables (JS) */ .t1-pilotes-row { cursor: pointer; }