/* usine-reveal.css — correctif de révélation (portier 27/09, blocs de home vides en capture). * * Cause : kit-vivant.css masque [data-apparait] (opacité 0, translateY 18px) et n'attend que * la pose de .kv-vu par IntersectionObserver. Tant que l'observateur ne se déclenche pas * (capture après défilement, onglet en arrière-plan, navigateur sans IntersectionObserver), * le bloc reste un cadre blanc alors que son texte est bien dans le DOM. * * Ici la base est TOUJOURS visible : l'apparition n'est plus un état masqué mais une simple * animation d'entrée, posée quand porte .js (classe posée au chargement par * usine-reveal.js), elle part de 0.6 d'opacité et dure moins d'une demi-seconde : même * surprise en pleine animation, un bloc n'est jamais blanc. Sans JavaScript, rien n'est * masqué : la page se lit entière, compteurs compris (leur valeur finale est écrite en dur * dans le HTML et le kit ne fait que la rejouer). * * Ce fichier est chargé APRÈS kit-vivant.css : à spécificité égale, c'est lui qui gagne. */ .kv-js [data-apparait], .kv-js [data-apparait="gauche"], .kv-js [data-apparait="droite"] { opacity: 1; transform: none; transition: none; } html.js [data-apparait].kv-vu { animation: usine-apparait 0.4s ease-out both; } @keyframes usine-apparait { from { opacity: 0.6; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes usine-apparait-calme { from { opacity: 1; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html.js [data-apparait].kv-vu { animation: none; } } /* Compteurs : la valeur reste alignée pendant que le kit la fait défiler. */ html.js [data-compte] { font-variant-numeric: tabular-nums; } /* Frise : piste et jalons lisibles sans JavaScript (progression à 1 par défaut) ; le kit * pose la progression réelle au défilement par-dessus, en style en ligne. */ [data-frise]::after { height: calc((100% - 0.8rem) * var(--kv-progression, 1)); } /* Étapes photo : l'étape au repos reste lisible (0.5 d'opacité sur du texte gris devenait * illisible en capture) et l'étape active se distingue par le fond, pas par le voile. */ [data-etape] { opacity: 0.72; } [data-etape].kv-actif { opacity: 1; } /* Lottie : le repli dessiné (icône + libellé) s'efface dès que l'animation est rendue, * jamais deux visuels superposés. */ [data-lottie]:has(svg) [data-lottie-repli] { display: none; } /* Le cadre Lottie n'est jamais un aplat vide, même sans réseau. */ [data-lottie] { display: grid; place-items: center; background: color-mix(in srgb, var(--c-primaire, #0b7a5e) 7%, var(--c-fond, #f4f8f6)); }