/* ========================================================================== Cleanix — animations d'apparition et micro-interactions Fichier partagé. Aucune dépendance. Ne modifie aucune mise en page : uniquement opacity + transform (compositeur GPU) => 0 décalage (CLS). Les états initiaux ne s'appliquent que si , classe posée par cleanix-motion.js. Sans JS, tout reste visible. ========================================================================== */ /* --- 1. Apparition au scroll ---------------------------------------------- */ /* Filet de sécurité : même si le JS ne se déclenchait jamais, le contenu réapparaît tout seul au bout de 6 s. Rien ne peut rester invisible. */ html.cx-motion [data-rev]{ opacity:0; transform:translateY(24px); animation:cx-failsafe .3s linear 6s forwards; } @keyframes cx-failsafe{to{opacity:1;transform:none}} html.cx-motion [data-rev="fade"]{transform:none} html.cx-motion [data-rev="zoom"]{transform:scale(.96)} html.cx-motion [data-rev].cx-in{ opacity:1; transform:none; animation:none; transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); transition-delay:var(--cx-d,0ms); } /* Mobile : déplacement plus court, pas de décalage en cascade */ @media(max-width:760px){ html.cx-motion [data-rev]{transform:translateY(12px)} html.cx-motion [data-rev="zoom"]{transform:scale(.98)} } @media(max-width:560px){ html.cx-motion [data-rev].cx-in{transition-delay:0ms} } /* --- 2. Compteurs animés (barre de confiance) ----------------------------- */ .cx-count{font-variant-numeric:tabular-nums} /* --- 3. Micro-interactions (souris uniquement, jamais au doigt) ------------ */ @media(hover:hover) and (pointer:fine){ .svc,.q,.step{transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s cubic-bezier(.22,.61,.36,1)} .svc:hover,.q:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(21,22,58,.10)} .step:hover{transform:translateY(-3px)} .btn:active{transform:scale(.97)} } /* --- 4. Barre de progression de lecture + ombre du menu -------------------- */ /* 100% CSS natif (hors thread principal). Ignoré si non supporté. */ @supports (animation-timeline: scroll()){ body::before{ content:""; position:fixed;top:0;left:0;height:3px;width:100%; transform-origin:0 50%;transform:scaleX(0); background:linear-gradient(90deg,var(--cyan,#00B4E4),var(--navy,#25268A)); z-index:60;pointer-events:none; animation:cx-progress linear both; animation-timeline:scroll(root block); } nav{ animation:cx-navshadow linear both; animation-timeline:scroll(root block); animation-range:0 120px; } } @keyframes cx-progress{to{transform:scaleX(1)}} @keyframes cx-navshadow{to{box-shadow:0 6px 24px rgba(21,22,58,.10)}} /* --- 5. Accessibilité : mouvement réduit ---------------------------------- */ /* WCAG 2.1 — tout apparaît instantanément, rien ne bouge. */ @media(prefers-reduced-motion:reduce){ html.cx-motion [data-rev], html.cx-motion [data-rev].cx-in{ opacity:1!important;transform:none!important;transition:none!important; } body::before{display:none} nav{animation:none} }