/* ========================================================================== Section Équipe (partagée : home + /agence) Layout selon maquette finale : header 1344 avec titre/paragraphe en flex row, slider drag-scroll horizontal des cartes membres, bouton « Voir toute l'équipe » centré sous le slider. Fond beige gray-100. Specs Figma : frame 727:7583 (home). ⚠️ VISUEL NEUTRE / MÉCANIQUE ESCALIER GATÉE .home La section est réutilisée hors home (/agence, en flux normal). Le bloc de base .section-equipe ne porte donc QUE le visuel — AUCUN offset. Tout ce qui relève des escaliers de la home (empilement z-index, remontée piste J, transform piste K, will-change, marges de compensation) vit sous « .home .section-equipe », même pattern que la marge du CTA et les échelles z-index (cf. global.css / section-cta.css). Ailleurs, la section reste en flux normal, sans décalage. Ne JAMAIS remonter un de ces offsets dans le bloc de base. Hover coloré + photo détourée : SUPPRIMES (cf. session 09/07). ========================================================================== */ .section-equipe { background-color: var(--color-gray-100); padding: 0 48px 96px; display: flex; flex-direction: column; align-items: center; gap: 96px; /* overflow-x: clip pour eviter que le slider full-bleed (100vw) ne cree un scroll horizontal parasite au niveau du body si la scrollbar verticale grignote quelques pixels sur le viewport. Ne coupe rien du contenu de la section (aucun element n'a besoin de deborder horizontalement). Vaut sur toutes les pages (slider full-bleed partout) -> PAS gaté .home. */ overflow-x: clip; } /* -------------------------------------------------------------------------- Mécanique escalier — HOME UNIQUEMENT (gaté .home) Offsets/empilement liés aux escaliers #1 et #2 de la home. Gatés .home pour que la section reste NEUTRE (flux normal, aucun décalage) sur les autres pages (/agence). Sur la home, body.home est toujours présent -> comportement IDENTIQUE à avant le découplage. -------------------------------------------------------------------------- */ .home .section-equipe { position: relative; /* Empilement escalier : Services(1) < escalier(2) < Equipe(3). Equipe passe AU-DESSUS des colonnes de l'escalier -> elle arrive opaque par-dessus elles, jamais derriere pendant la revelation (cf. home-escalier.css). */ z-index: 3; /* Remontee d'Equipe sur la traine de l'escalier. DEUX regimes : 1) DEFAUT (sans .escalier-k-active) = FALLBACK STATIQUE « piste J ». Equipe posee au plancher -62.5vh -> 37.5vh de beige apres. Etat rendu si le JS ne tourne pas (escalier-rise.js) OU en reduced-motion. Sur, jamais casse. Le plancher : en dessous de -62.5vh, Equipe mange le bord de la colonne 4 quand elle entre en bas d'ecran (p=0.375) -> on perd une marche. 2) Avec .escalier-k-active (ajoute par escalier-rise.js en motion) = « piste K ». Le layout passe a la regle .escalier-k-active .home .section-equipe (plus bas) et le JS applique un translateY scrubbe -> Equipe SUIT le bord de la colonne 4 a ecart constant, ~8vh de beige apres. COUPLE a --escalier-course et a la marge du CTA (cf. CLAUDE.md « couplage a trois » + STATUS.md). */ --escalier-equipe-remontee: 62.5vh; /* fallback piste J */ --equipe-gap: 8vh; /* piste K : ecart sous le bord de la colonne 4 (~ vide apres). Reglage libre. */ margin-top: calc(-1 * var(--escalier-equipe-remontee)); will-change: transform; /* Equipe est translatee au scroll en mode K (escalier-rise.js) */ } /* Piste K active (motion + JS, classe posee par escalier-rise.js sur ). Equipe est posee pour que son translateY scrubbe demarre a 0 et la fasse suivre bord_4 + gap : marge = 60vh (distance du bord 4 a p=0) + gap - 100vh (course/traine escalier). Le « 100vh » EST --escalier-course. COUPLAGE A TROIS (ne jamais changer isolement, cf. CLAUDE.md) : course escalier (100vh) <-> rattrapage/transform Equipe (60vh, escalier-rise.js) <-> marge CTA (-60vh, section-cta.css). Selecteur : .escalier-k-active (html) > .home (body) > .section-equipe -> home uniquement, et specificite (0,3,0) > base gatee « .home .section-equipe » (0,2,0) pour que la marge K l'emporte quand la classe est active. */ .escalier-k-active .home .section-equipe { margin-top: calc(60vh + var(--equipe-gap) - 100vh); } /* -------------------------------------------------------------------------- Rattrapage escalier#2 sur /agence — PISTE K (meme mecanique que la home) Le centrage statique (abandonne : il masquait les marches, decision FX) est remplace par la piste K de la home : escalier-rise.js (desormais enqueue AUSSI sur /agence) pose .escalier-k-active sur et applique un translateY scrubbe 0->-60vh a .section-equipe, qui SUIT le bord de la colonne 4 de l'escalier#2 a ecart constant -> escalier PLEINEMENT VISIBLE + vide reduit (~8vh), comme la home. Prerequis (verifie) : la modale Profil est SŒUR de la section (hors
, cf. section-equipe.php) -> le transform sur .section-equipe ne casse pas son position:fixed. DEUX regimes (identiques a la home, cf. .home .section-equipe plus haut) : 1) DEFAUT (sans .escalier-k-active : reduced-motion / JS absent) = FALLBACK piste J statique -62.5vh (plancher, marches visibles). Recrutement en flux normal (pas de trou). 2) .escalier-k-active = piste K : marge -32vh + transform -60vh (JS). Le trou de layout de 60vh laisse par le transform est ferme par une marge compensatoire -60vh sur la SECTION SUIVANTE = Recrutement (cf. agence-recrutement.css). Sur la home ce trou est absorbe par l'overlap -160 de l'escalier#2 ; ici il n'y a PAS d'escalier apres Equipe -> la compensation vit sur Recrutement (exactement le cas « si on retire l'escalier #2, restaurer -60vh sur la section suivante », cf. STATUS.md / CLAUDE.md). COUPLAGE course (100vh) ↔ transform/rattrapage (60vh, escalier-rise.js) ↔ marge compensatoire (-60vh, Recrutement) : ne jamais changer une valeur seule. Gate .page-agence : n'affecte NI la home (piste J/K plus haut) NI /projets. Specificite : la regle K (0,3,0) > base (0,2,0) -> la marge K l'emporte quand la classe est active. */ .page-agence .section-equipe { position: relative; z-index: 7; --equipe-gap: 8vh; /* piste K : ecart sous le bord de la colonne 4 (~ vide apres) */ margin-top: calc(-1 * 62.5vh); /* fallback piste J (plancher, marches visibles) */ will-change: transform; /* transform scrubbe en mode K (escalier-rise.js) */ } .escalier-k-active .page-agence .section-equipe { margin-top: calc(60vh + var(--equipe-gap) - 100vh); /* = -32vh, comme la home */ } /* -------------------------------------------------------------------------- Header : pretitle + trait, puis titre + paragraphe en flex row -------------------------------------------------------------------------- */ .section-equipe__header { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 1344px; } /* Row 1 : pill pretitle + trait qui s'etend sur le reste de la largeur */ .section-equipe__pretitle-wrap { display: flex; align-items: center; gap: 32px; width: 100%; } /* Pill puce ronde violette — meme pattern que Chiffres/Manifeste/Services */ .section-equipe__pretitle { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; padding: 8px; border-radius: var(--radius-sm); } .section-equipe__pretitle-dot { flex-shrink: 0; width: 4px; height: 4px; border-radius: 50%; background-color: var(--color-primary); } .section-equipe__pretitle-text { font-family: var(--font-body); font-size: 12px; font-weight: var(--font-weight-medium); line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--color-black); } /* Trait sépa noir 15 % — meme derivation que Chiffres/Services/Manifeste */ .section-equipe__separator { flex: 1 1 0; min-width: 0; height: 1px; background-color: color-mix(in srgb, var(--color-black) 15%, transparent); } /* Row 2 : titre a gauche + paragraphe a droite */ .section-equipe__title-row { display: flex; align-items: center; justify-content: space-between; gap: 48px; width: 100%; } .section-equipe__titre { flex: 0 0 auto; width: 660px; font-family: var(--font-display); font-weight: var(--font-weight-book); font-size: 56px; line-height: 1; letter-spacing: 1.12px; text-transform: none; color: var(--color-black); margin: 0; } .section-equipe__paragraphe { flex: 0 0 auto; width: 432px; font-family: var(--font-body); font-weight: var(--font-weight-medium); font-size: 14px; line-height: 1.6; color: var(--color-black); margin: 0; } /* -------------------------------------------------------------------------- Slider drag-scroll horizontal -------------------------------------------------------------------------- */ /* Slider full-bleed : sort du padding 48 px de la section pour atteindre les bords du viewport. Le pattern classique `position: relative; left: 50%; margin-left: -50vw` du Manifeste ne fonctionne pas ici parce que le parent `.section-equipe` a `align-items: center` (le Manifeste n'en a pas). Sous align-items: center, `left: 50%` est calcule sur la largeur du parent inner (viewport - 96), ce qui decale legerement le slider et laisse un vide beige sur un cote. Approche : on override `align-self` pour ancrer le slider au start de la flex-line (donc a padding-left = 48 px du viewport), puis on tire de -48 px pour aligner au bord gauche du viewport. Largeur 100vw. Positionnement exact (0, viewport). */ .section-equipe__slider { align-self: flex-start; width: 100vw; margin-left: -48px; /* Le marquee bouge en transform (equipe-slider.js) : overflow:hidden clippe la track debordante. Plus de scroll natif -> plus de scrollbar a masquer. */ overflow: hidden; cursor: grab; } .section-equipe__slider--active { cursor: grabbing; } .section-equipe__slider-track { display: flex; gap: 16px; width: max-content; /* Marquee GPU-composite (translate3d ecrit par equipe-slider.js) -> rendu net, plus de flou sub-pixel. */ will-change: transform; } /* -------------------------------------------------------------------------- Cartes membres — photo 4:5 arrondie 8 px + prenom + pill role -------------------------------------------------------------------------- */ .section-equipe__carte { flex: 0 0 318px; display: flex; flex-direction: column; gap: 16px; /* Reset styles button natifs (cartes de la 1re serie sont des