/* ============================================================ CONODOR — apparitions au défilement ------------------------------------------------------------ Rien n'est masqué tant que ne porte pas la classe « anim ». Cette classe n'est posée que par assets/anim.js, et seulement si le JavaScript s'exécute ET que la personne n'a pas demandé moins d'animations. Sans JavaScript, tout reste visible : c'est ce garde-fou qui manquait, et qui avait obligé à neutraliser les apparitions d'origine avec un !important. ============================================================ */ .anim .an, .anim .reveal, .anim .reveal-left, .anim .reveal-r { opacity: 0; transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .anim .an, .anim .reveal { transform: translateY(28px); } .anim .an-l, .anim .reveal-left { transform: translateX(-30px); } .anim .an-r, .anim .reveal-r { transform: translateX(30px); } .anim .an-z { transform: scale(.965); } .anim .an-c { transform: translateY(14px) scale(.99); } /* l'état d'arrivée, commun à toutes les variantes */ .anim .an.vu, .anim .reveal.vu, .anim .reveal.visible, .anim .reveal-left.vu, .anim .reveal-left.visible, .anim .reveal-r.vu, .anim .reveal-r.visible { opacity: 1; transform: none; } /* ── cascade : les enfants arrivent l'un après l'autre ── Six paliers suffisent ; au-delà l'attente deviendrait pénible. */ .anim .an-stag > * { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .anim .an-stag.vu > * { opacity: 1; transform: none; } .anim .an-stag.vu > *:nth-child(1){ transition-delay:0s } .anim .an-stag.vu > *:nth-child(2){ transition-delay:.08s } .anim .an-stag.vu > *:nth-child(3){ transition-delay:.16s } .anim .an-stag.vu > *:nth-child(4){ transition-delay:.24s } .anim .an-stag.vu > *:nth-child(5){ transition-delay:.32s } .anim .an-stag.vu > *:nth-child(n+6){ transition-delay:.4s } /* ── un filet qui se trace sous les titres de section ── */ .anim .an-trait{ position:relative } .anim .an-trait::after{ content:''; position:absolute; left:0; bottom:-14px; height:2px; width:0; background:var(--teal, #00B4C8); transition: width .9s cubic-bezier(.22,.61,.36,1) .25s } .anim .an-trait.vu::after{ width:74px } .anim [style*="text-align:center"] .an-trait::after, .anim .lede .an-trait::after{ left:50%; transform:translateX(-50%) } /* ── le compteur des chiffres ── Largeur figée pendant le comptage, sinon la mise en page saute à chaque changement de chiffre. */ .stat-n[data-cible]{ font-variant-numeric: tabular-nums } /* ── au survol d'une carte ── */ .card, .inc-item, .loc-card, .serv-card{ transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .35s, background .35s } .card:hover, .inc-item:hover, .loc-card:hover{ transform: translateY(-5px) } @media (prefers-reduced-motion: reduce){ .anim .an, .anim .reveal, .anim .reveal-left, .anim .reveal-r, .anim .an-stag > *{ opacity:1 !important; transform:none !important; transition:none !important } .card:hover, .inc-item:hover, .loc-card:hover{ transform:none } }