/* ========================================================================== Escalier de transition de couleur au scroll (home) -------------------------------------------------------------------------- 4 colonnes de 25% qui remontent a des vitesses differentes et revelent la couleur d'arrivee. Voir template-parts/home/escalier.php + escalier.js. Architecture (decision actee) : PAS de position:fixed. Modele CHEVAUCHEMENT par marges negatives (valide en local, cf. STATUS.md « escalier »). .home-escalier section dans le flux, FOND TRANSPARENT, tiree de -100vh sur la section precedente : le sticky s'epingle pendant que la section de DEPART est encore a l'ecran, les colonnes montent DEVANT son contenu (plus de blanc vide avant). pointer-events:none -> le hover de la section dessous reste vivant a travers. .home-escalier__sticky sticky top:0, 100vh, overflow:hidden -> LE CLIP EST ICI, jamais sur un ancetre (sinon casse le sticky du hero et le sticky-reveal de Projets). .home-escalier__rect 25%, couleur d'ARRIVEE, remonte par translateY (JS). Couleur : seule --escalier-arrivee est injectee (custom property inline par le template), toujours une variable du design system. Le DEPART n'est plus une couleur peinte : le fond reel de la section precedente transparait (fond transparent). Fallback ici pour ne jamais rendre un rect vide. VERROUS (ne pas « corriger » sans avoir lu STATUS.md) : - course = 100vh OBLIGATOIRE : les colonnes montent au rythme exact de la sortie de la section de depart. Plus court -> rideau (les colonnes passent par-dessus son contenu). - le ~100vh de beige APRES le remplissage est le rail du pin (loi de conservation, STATUS.md). Point ouvert assume, PAS un bug a supprimer. z-index : Services(1) < escalier(2) < Equipe(3), tous sous l'echelle globale (cursor 100 < header 150 < modale 200). Le header fixe passe au-dessus des rectangles. Chaine explicitee sur .home-services et .section-equipe (elles doivent etre positionnees pour que cet empilement tienne). ========================================================================== */ .home-escalier { position: relative; /* Defaut 2 (esc#1 : entre Services 1 et Equipe 3). esc#2 injecte 4 (au-dessus d'Equipe 3, sous CTA 5) via le parametre z. cf. escalier.php. */ z-index: var(--escalier-z, 2); /* Course de scroll = duree du pin du sticky. 100vh OBLIGATOIRE (verrou ci-dessus : sinon rideau sur la section de depart). COUPLAGE « piste K » (ne jamais changer isolement, cf. CLAUDE.md) : cette course pilote le rattrapage d'Equipe (60vh = (1,6-1,0) x course, escalier-rise.js). Ce rattrapage se repercute sur le CHEVAUCHEMENT de l'escalier #2 (voir --escalier-overlap ci-dessous), pas sur le CTA. */ --escalier-course: 100vh; /* Chevauchement de la section precedente : le pin demarre pendant qu'elle est encore visible -> la section precedente remplit jusqu'au bord de la colonne 1 (comme Services sur le #1), on voit son contenu sous les colonnes. Defaut 100vh (esc#1). L'esc#2 injecte 160vh (--escalier-overlap) : -160 = -100 (chevauchement, COMME LE #1) - 60 (compensation du transform FIGE d'Equipe : Equipe est rendue 60vh plus haut ; il faut chevaucher 60vh de plus pour qu'elle remplisse jusqu'au bord de la colonne 1, comme le ferait a -100 une section non transformee). /!\ COUPLE au rattrapage d'Equipe (60vh, escalier-rise.js) : s'il change, cette marge doit changer d'autant. Ce -160 ferme AUSSI le trou de layout du transform d'Equipe (160 >= 60, double emploi -> c'est pourquoi le CTA n'a pas de compensation -60vh). >>> Si l'escalier #2 est RETIRE, il FAUT restaurer une compensation de -60vh sur le CTA, sinon trou de layout de 60vh (blanc de body sous Equipe). cf. CLAUDE.md + STATUS.md « escalier #2 ». */ margin-top: calc(-1 * var(--escalier-overlap, 100vh)); /* Hauteur = le sticky (100vh) + la course. Reservee -> aucun CLS. */ height: calc(100vh + var(--escalier-course)); /* Fond de SECTION toujours transparent : la section precedente transparait, on voit son contenu sous les colonnes. Le comblement de la zone SOUS ce contenu (la ou le body transparaitrait) est assure par .home-escalier__fond (couleur depart), PAS par un fond de section opaque. cf. escalier.php. */ background: transparent; /* L'escalier ne capte aucun pointeur : le hover/scroll de la section dessous reste actif a travers la zone chevauchee. */ pointer-events: none; } .home-escalier__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; /* le clip vit ICI, jamais sur un ancetre */ } /* Fond suiveur : panneau PLEINE LARGEUR, couleur DEPART, place SOUS les 4 colonnes (donc AVANT elles dans le DOM). escalier.js lui recopie le transform de la colonne 1 -> son bord haut suit le bord de la colonne 1 = le bas rendu de la section precedente. Il ne comble donc QUE la zone sous ce contenu (la ou le body transparaitrait), SANS masquer le contenu au-dessus. Generique : transparent si depart omis (#1, no-op : le body blanc fait le fond) ; couleur depart sinon (#2 : pose le beige, evite le flash blanc dans les interstices). Meme etat par defaut que la colonne 1 (hors ecran en bas). */ .home-escalier__fond { position: absolute; /* Anti-couture (meme intention que le +1px des colonnes) : le bord HAUT du fond suit le bord de la colonne 1 = le bas RENDU de la section precedente. Ce bord est pose par un transform en vh (JS) tandis que le bas de la section precedente est un bord de LAYOUT en px -> l'arrondi sous-pixel peut laisser filer ~1px du body (blanc) entre les deux. Le liseré clair de l'escalier#2 (sombre -> clair) venait de là. On etire donc le fond de 2px VERS LE HAUT (top:-2px + height +2px) pour recouvrir cette couture. No-op quand depart est transparent (#1, archive) ; sur #2 (fond colore) ces 2px couvrent le bas de la section precedente qui est DEJA de la meme couleur de fond (beige sous Equipe, noir sous Chiffres) -> invisible. */ top: -2px; left: 0; width: 100%; height: calc(100vh + 2px); background: var(--escalier-depart, transparent); will-change: transform; transform: translateY(100vh); /* = --start de la colonne 1 */ } .home-escalier__rect { position: absolute; top: 0; height: 100vh; /* +1px : recouvrement anti-couture (evite un lisere de la couleur de depart entre colonnes du a l'arrondi sous-pixel). Le debordement est clippe par le sticky. */ width: calc(25% + 1px); background: var(--escalier-arrivee, var(--color-gray-100)); will-change: transform; /* Etat par defaut (avant JS / sans JS) : rectangle pousse hors ecran en bas, decale en escalier. Etat neutre (on voit la couleur de depart), pas un flash de la couleur d'arrivee. Le JS ecrit ensuite translateY en vh (escalier.js). */ transform: translateY(calc(var(--start) * 1vh)); } .home-escalier__rect--1 { left: 0; --start: 100; } .home-escalier__rect--2 { left: 25%; --start: 120; } .home-escalier__rect--3 { left: 50%; --start: 140; } .home-escalier__rect--4 { left: 75%; --start: 160; } /* prefers-reduced-motion : colonnes ET fond suiveur poses a leur position finale (transform:none -> top:0, remplis), aucune animation. Le JS bail-out ; le CSS fait foi. Le fond a sa couleur depart (transparent = no-op sur le #1). */ @media (prefers-reduced-motion: reduce) { .home-escalier__rect, .home-escalier__fond { transform: none; } /* top:0 -> remplissage */ }