/* ========================================================================= Sitero — raccord.css LE RACCORD DE COULEUR ENTRE LA FIN DE L'INTRODUCTION ET LE PANNEAU D'ARRIVÉE. À CHARGER EN DERNIER, après style.css, palette.css et intro.css. Ce fichier ne fait qu'une chose : il décide de la COULEUR DE FOND du voile de fin d'introduction (.wm__bleu) et du panneau qui suit (.wmx). Il ne touche ni au minutage, ni à la mise en scène, ni au dessin du logo : ceux-là appartiennent à intro.js et à intro.css. ------------------------------------------------------------------------- LE PROBLÈME, EN UNE PHRASE ------------------------------------------------------------------------- La caméra entre DANS le « S ». À la fin du zoom, ce qui remplit tout l'écran, c'est l'encre de la lettre à l'endroit où l'on est entré : un bleu ciel, rgb(47,192,255), que intro.js mesure et publie dans la variable --wm-sortie. Le voile et le panneau portaient, eux, un DÉGRADÉ qui descend vers le bleu profond et l'atteint dès 16 % de la hauteur de l'écran. Or on débouche au MILIEU de l'écran : au milieu, le dégradé est déjà bleu profond alors que l'encre y est bleu ciel. D'où la couture que Thibault voit — et elle se voit même AVANT l'échange, pendant que le voile monte par-dessus la lettre agrandie. Ce dégradé n'était pas une lubie : le panneau porte le titre du site en blanc, et du blanc sur le bleu ciel ne mesure que 2,08:1. Illisible. ------------------------------------------------------------------------- CE QU'ON FAIT ICI : LA COULEUR SE POSE APRÈS LE RACCORD ------------------------------------------------------------------------- 1. Pendant toute l'introduction, le voile ET le panneau sont un APLAT, exactement --wm-sortie. Le même aplat que l'encre de la lettre : il n'y a plus rien à raccorder, c'est la même couleur partout et à chaque instant. Écart mesuré : zéro. 2. Une demi-seconde après l'échange, le fond DESCEND vers le bleu profond. L'œil lit « la couleur se stabilise », pas une coupure. Le texte blanc retrouve ses 7,62:1 (titre), 6,26:1 (sous-titre) et 4,72:1 (surtitre) — les chiffres d'avant, à l'identique. Le dégradé d'arrivée est CELUI DE palette.css, recopié à la virgule près : l'aspect final du panneau ne change pas d'un pixel. Seule change la façon d'y arriver. ------------------------------------------------------------------------- TROIS RÈGLES DU PROJET, TENUES ICI ------------------------------------------------------------------------- — Un seul propriétaire par propriété. Ce fichier possède le FOND du voile et du panneau, et l'opacité du calque foncé — rien d'autre. Il ne touche jamais à l'opacité de .wm__bleu, qui appartient à intro.js, ni à celle de .wmx__box, qui appartient à style.css puis à main.js. — Jamais de blanc pendant l'introduction. Rien ici n'est transparent : on ne fait que passer d'un bleu à un autre bleu. — Le voile et le panneau portent EXACTEMENT le même fond. Les deux sont traités par les mêmes règles, dans la même déclaration, avec le même déclencheur : ils ne peuvent pas diverger. Et la règle de sécurité qui commande la construction : une animation ne doit jamais être la seule chose qui rend un contenu lisible. Ici le fond foncé est l'état PAR DÉFAUT ; c'est l'introduction qui l'efface le temps de se jouer. Sans JavaScript, sans GSAP, script en erreur : le panneau s'affiche foncé et le titre est lisible tout de suite. ========================================================================= */ :root{ /* La seule valeur à régler. Trop court, on revoit une coupure ; trop long, le titre blanc reste pâle après être apparu. 0,5 s : le titre repasse au-dessus de 3:1 en 0,13 s et au-dessus de 4,5:1 en 0,20 s, tout est stabilisé à 0,50 s. */ --rc-duree:.5s; /* Départ franc, arrivée douce : aucun à-coup au premier instant, et la fin se pose sans qu'on la voie s'arrêter. */ --rc-courbe:cubic-bezier(.25,.1,.25,1); } /* ------------------------------------------------------------------------- 1. LE FOND DE BASE : UN APLAT, RIEN D'AUTRE ------------------------------------------------------------------------- Cette règle ANNULE le dégradé du bloc 6 de palette.css (celui qui commence par « .wm__bleu,.wmx{background-color:var(--wm-sortie… » et descend jusqu'à #0A3FA8). Comme ce fichier est chargé après, il gagne sans avoir besoin de !important. Le bloc 6 peut donc être laissé en place tel quel. Si vous préférez le supprimer, gardez ses deux DERNIÈRES lignes : celle de « .btn--clair » et celle de « .wmx__pts .ic », elles ne concernent pas le raccord. La couleur de repli #2FC0FF n'est pas choisie à la main : c'est la valeur exacte que calcule intro.js au point d'entrée (69,60 / 74,77 dans le repère du dessin). Elle ne sert que si le script n'a pas pu écrire --wm-sortie. ------------------------------------------------------------------------- */ .wm__bleu,.wmx{ background-color:var(--wm-sortie,#2FC0FF); background-image:none; } /* ------------------------------------------------------------------------- 2. LE CALQUE FONCÉ, POSÉ PAR-DESSUS L'APLAT ------------------------------------------------------------------------- Le dégradé n'est plus peint sur le fond lui-même : il est sur un calque séparé, dont on ne fait varier que l'OPACITÉ. C'est volontaire — une opacité est la seule chose qu'un navigateur sait animer sans redessiner, donc sans saccade, même en plein écran. Redessiner un dégradé plein écran à chaque image aurait coûté cher au pire moment du site. « isolation:isolate » sur le panneau crée un plan à lui : le calque en z-index -1 se glisse alors entre le fond et le texte, sans qu'on ait besoin de toucher au moindre élément à l'intérieur. ------------------------------------------------------------------------- */ .wmx{position:relative;isolation:isolate} .wm__bleu::after, .wmx::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; /* recopie exacte du dégradé de palette.css : le rendu final est inchangé. Le premier arrêt vaut la couleur de l'aplat, donc le haut de l'écran ne bouge pas du tout pendant le fondu. */ background-image:linear-gradient(180deg, var(--wm-sortie,#2FC0FF) 0%, #1E86FC 5%, #1166F9 10%, #0C4AC0 16%, #0A3FA8 100%); opacity:1; /* état par défaut : lisible */ transition:opacity var(--rc-duree) var(--rc-courbe); } /* ------------------------------------------------------------------------- 3. PENDANT L'INTRODUCTION : LE CALQUE EST EFFACÉ ------------------------------------------------------------------------- « intro-on » est posée par intro.js dès le , et « si-arme » juste avant, le temps de la toute première image. Tant que l'une des deux est là, le calque est à zéro : le voile et le panneau sont l'aplat pur, la couleur exacte de l'encre du logo. « transition:none » ici est important : sans lui, l'effacement du calque au tout début de la page serait lui aussi animé, et on verrait le fond s'éclaircir avant même que le logo commence. Le fondu part au moment où intro.js retire « intro-on ». Dans intro.js, cette ligne est dans la même image que « display:none » sur le calque de l'introduction (fonction de fin, le bloc qui change les quatre classes d'un coup). L'échange et le début du fondu sont donc simultanés : à cet instant précis les deux fonds sont identiques, et c'est ce qui rend le raccord invisible. ------------------------------------------------------------------------- */ html.intro-on .wm__bleu::after, html.intro-on .wmx::after, html.si-arme .wm__bleu::after, html.si-arme .wmx::after{ opacity:0; transition:none; } /* ------------------------------------------------------------------------- 4. UNE PRISE, SI L'ANIMATION VEUT FONCER PLUS TÔT ------------------------------------------------------------------------- Réservé à intro.js, et facultatif : s'il ajoute la classe « wm-fonce » sur avant la fin de l'introduction, le fond commence à foncer dès cet instant, sur le voile ET sur le panneau en même temps — donc toujours sans couture entre les deux. À n'utiliser que si l'encre du logo fonce au même rythme : sinon on recrée exactement la couture qu'on vient d'enlever. ------------------------------------------------------------------------- */ html.intro-on.wm-fonce .wm__bleu::after, html.intro-on.wm-fonce .wmx::after{ opacity:1; transition:opacity var(--rc-duree) var(--rc-courbe); } /* ------------------------------------------------------------------------- 5. MOUVEMENT RÉDUIT ------------------------------------------------------------------------- Si la personne a demandé moins d'animations, intro.js ne joue rien et termine l'introduction tout de suite. Le fond doit alors être foncé immédiatement, sans le moindre fondu. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .wm__bleu::after, .wmx::after{transition:none} }