/* ============================================================
   T DIGITAL AGENCY — Apparition au défilement (anim.css)
   ============================================================
   Règle de sécurité : par défaut, tout est VISIBLE.
   L'état masqué n'est appliqué que si anim.js a démarré et a
   posé la classe « anim » sur <html>. Si le JavaScript ne tourne
   pas — connexion coupée, script bloqué — le contenu s'affiche
   normalement au lieu de rester invisible.

   S'utilise en posant la classe « apparait » sur un bloc :
       <div class="apparait">…</div>
   Un délai en cascade se règle avec data-delai="1", "2", "3"…
   ============================================================ */

.apparait {
    opacity: 1;
}

html.anim .apparait {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: opacity, transform;
}

html.anim .apparait.vu {
    opacity: 1;
    transform: none;
}

/* Cascade : chaque cran ajoute 90 ms */
html.anim .apparait[data-delai="1"] { transition-delay: 0.09s; }
html.anim .apparait[data-delai="2"] { transition-delay: 0.18s; }
html.anim .apparait[data-delai="3"] { transition-delay: 0.27s; }
html.anim .apparait[data-delai="4"] { transition-delay: 0.36s; }
html.anim .apparait[data-delai="5"] { transition-delay: 0.45s; }

/* Glissement latéral, pour les blocs en deux colonnes */
html.anim .apparait.depuis-gauche { transform: translateX(-26px); }
html.anim .apparait.depuis-droite { transform: translateX(26px); }
html.anim .apparait.depuis-gauche.vu,
html.anim .apparait.depuis-droite.vu { transform: none; }

/* Personne ne doit subir une animation qu'il a désactivée */
@media (prefers-reduced-motion: reduce) {
    html.anim .apparait,
    html.anim .apparait.depuis-gauche,
    html.anim .apparait.depuis-droite {
        opacity: 1;
        transform: none;
        transition: none;
    }
}