/* ========================================================== FITZUNIVERSE - ANIMATIONS ========================================================== */ /* Par défaut (JS absent ou en échec) le contenu reste visible : la mise en retrait ci-dessous n'est activée que par js/main.js, qui ajoute la classe "js-ready" sur dès son exécution. */ .reveal{ opacity:1; transform:none; } html.js-ready .reveal{ opacity:0; transform:translateY(22px) scale(.97); transition:opacity .7s var(--ease-premium,ease-out), transform .7s var(--ease-premium,ease-out); } /* transform:none — ET NON translateY(0) scale(1) (correctif du 2026-09-12, bug trouvé par Charles sur le catalogue). UN TRANSFORM, MÊME NEUTRE, CRÉE UN CONTEXTE D'EMPILEMENT. Tout élément révélé en gardait un À VIE, et tout panneau flottant posé à l'intérieur — la liste d'un menu déroulant (.fitz-select-list), celle d'un champ à suggestions (.fitz-combobox-list) — s'y trouvait ENFERMÉ : son z-index:60 ne valait plus que DANS l'élément révélé, plus dans la page. Le panneau passait donc DERRIÈRE tout ce qui suit dans le flux. Ce que Charles voyait sur scholarships.html : il tapait « sen » dans « Ouvertes à ma nationalité », et la rangée de pastilles de pays juste en dessous traversait la liste des suggestions — « Royaume-Uni » lisible par-dessus « Sénégal ». Reproduit à 1440 px (à fenêtre étroite la barre passe à la ligne et le chevauchement n'a pas lieu, ce qui explique que le harnais 390 px ne l'ait jamais vu), puis vérifié corrigé : document.elementFromPoint() au centre du panneau rendait A.catalog-country-pill, il rend maintenant LI.fitz-select-option. L'ANIMATION NE CHANGE PAS : CSS interpole une transformation vers `none` comme vers l'identité, donc l'entrée est exactement la même. Le contexte d'empilement n'existe plus que pendant les 0,7 s de la transition. */ html.js-ready .reveal.is-visible{ opacity:1; transform:none; } .cards-grid .reveal:nth-child(2), .steps .reveal:nth-child(2), .problem-list .reveal:nth-child(2){ transition-delay:.08s; } .cards-grid .reveal:nth-child(3), .steps .reveal:nth-child(3), .problem-list .reveal:nth-child(3){ transition-delay:.16s; } .cards-grid .reveal:nth-child(4){ transition-delay:.24s; } /* offers.html/payment.html (2026-08-15) : ni l'une ni l'autre ne chargeait cette feuille jusqu'ici — chacune garde son propre système .reveal local (offers.css/payment.css), chargé APRÈS celle-ci, donc prioritaire sur tout sélecteur qu'il redéfinit déjà. Seuls les sélecteurs neufs ci-dessous (absents de offers.css/payment.css) prennent effet ; rien du minutage existant n'est modifié. .pricing-grid/.pricing-grid--duo (offers.html) : chaque .plan-card porte .reveal individuellement (plus le conteneur) — mêmes délais que .cards-grid/.steps ci-dessus, même valeurs, aucune nouvelle inventée. */ .pricing-grid .reveal:nth-child(2), .pricing-grid--duo .reveal:nth-child(2){ transition-delay:.08s; } .pricing-grid .reveal:nth-child(3), .pricing-grid--duo .reveal:nth-child(3){ transition-delay:.16s; } .pricing-grid .reveal:nth-child(4), .pricing-grid--duo .reveal:nth-child(4){ transition-delay:.24s; } /* .summary-card (payment.html) : 6 lignes de récapitulatif, jusqu'ici sans aucun échelonnement. .reassurance a déjà le sien dans payment.css (.reassurance-item:nth-child, .04s/ligne) — non dupliqué ici. Même principe de délai croissant que .cards-grid, cadence adaptée à 6 lignes plutôt que 4 cartes. */ .summary-card .reveal:nth-child(2){ transition-delay:.04s; } .summary-card .reveal:nth-child(3){ transition-delay:.08s; } .summary-card .reveal:nth-child(4){ transition-delay:.12s; } .summary-card .reveal:nth-child(5){ transition-delay:.16s; } .summary-card .reveal:nth-child(6){ transition-delay:.20s; } /* ========================================================== ENTRÉE ÉCHELONNÉE DU HERO ========================================================== */ .hero-content > .hero-stagger:nth-child(1){transition-delay:.05s;} .hero-content > .hero-stagger:nth-child(2){transition-delay:.16s;} .hero-content > .hero-stagger:nth-child(3){transition-delay:.27s;} .hero-content > .hero-stagger:nth-child(4){transition-delay:.38s;} .hero-content > .hero-stagger:nth-child(5){transition-delay:.49s;} .hero-content > .hero-stagger:nth-child(6){transition-delay:.60s;} .hero-visual > .hero-stagger:nth-child(1){transition-delay:.35s;} .hero-visual > .hero-stagger:nth-child(2){transition-delay:.5s;} .hero-visual > .hero-stagger:nth-child(3){transition-delay:.62s;} @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } }