/* ============================================================ CADENCE — Couche d'animations (site vitrine) À charger APRÈS style.css. Vanilla, zéro dépendance. Concept : le « tracé » de la marque (pointillé soleil + fanion corail = une trace de parcours) sert de fil conducteur. Accessibilité : tout est désactivé sous prefers-reduced-motion. Anti-flash : les états cachés ne s'appliquent que si porte la classe .cad-js (ajoutée tout en haut par cadence-animations.js). Sans JS → rien n'est caché, le site reste lisible. ============================================================ */ /* ---------- 1. APPARITION AU SCROLL ------------------------- */ .cad-js .cad-reveal{ opacity:0; transform:translateY(26px); transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1); } .cad-js .cad-reveal.is-in{opacity:1;transform:none;} /* ---------- 2. ENTRÉE DU HERO (au chargement) --------------- */ .cad-js .cad-hero-anim{ opacity:0; transform:translateY(22px); transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1); } .cad-js [data-hero].is-loaded .cad-hero-anim{opacity:1;transform:none;} /* La trace pointillée qui se dessine (eyebrow du hero) */ .cad-js .cad-trace-dots{width:0;transition:width .7s cubic-bezier(.22,.61,.36,1);} .cad-js [data-hero].is-loaded .cad-trace-dots{width:54px;} .cad-js .cad-trace-flag{ opacity:0;transform:translateX(-7px); transition:opacity .45s ease .25s,transform .45s ease .25s; } .cad-js [data-hero].is-loaded .cad-trace-flag{opacity:1;transform:none;} /* Pastille « live » qui respire (signale : testable maintenant) */ .cad-js .cad-livedot{animation:cadPulse 2.6s ease-in-out infinite;} @keyframes cadPulse{ 0%,100%{box-shadow:0 0 0 3px rgba(47,168,91,.3);} 50%{box-shadow:0 0 0 6px rgba(47,168,91,.08);} } /* ---------- 3. MICRO-INTERACTIONS AU SURVOL ----------------- */ /* Boutons : léger soulèvement + ombre (sur classes existantes) */ .cad-btn{transition:background .15s,color .15s,border-color .15s, transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease;} .cad-btn--coral{box-shadow:0 8px 20px -10px rgba(239,93,76,.55);} .cad-btn--coral:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(239,93,76,.7);} .cad-btn--soleil{box-shadow:0 8px 20px -10px rgba(211,154,0,.5);} .cad-btn--soleil:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(211,154,0,.65);} .cad-btn--cream:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(0,0,0,.3);} .cad-btn--ghost:hover{transform:translateY(-2px);} /* Flèche qui avance (le JS emballe automatiquement les → / ↓ finaux) */ .cad-arrow{display:inline-block;transition:transform .22s cubic-bezier(.22,.61,.36,1);} .cad-link:hover .cad-arrow,a:hover>.cad-arrow,.cad-btn:hover .cad-arrow{transform:translateX(5px);} .cad-link:hover .cad-arrow--down,a:hover>.cad-arrow--down,.cad-btn:hover .cad-arrow--down{transform:translateY(4px);} /* Cartes blog : soulèvement + zoom doux de la photo (classe maison .cad-blogcard OU classe existante .cad-card-article) */ .cad-blogcard,.cad-card-article{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;} .cad-blogcard:hover,.cad-card-article:hover{transform:translateY(-7px);box-shadow:0 26px 44px -22px rgba(23,63,42,.5);} .cad-blogcard img,.cad-card-article img{transition:transform .55s cubic-bezier(.22,.61,.36,1);} .cad-blogcard:hover img,.cad-card-article:hover img{transform:scale(1.06);} /* Soulignement du menu qui se déploie (sur fond sombre/photo) */ .cad-nav--overlay .cad-nav__menu a, .cad-nav--solid .cad-nav__menu a{position:relative;padding-bottom:3px;} .cad-nav--overlay .cad-nav__menu a::after, .cad-nav--solid .cad-nav__menu a::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:100%; background:var(--soleil);transform:scaleX(0);transform-origin:left; transition:transform .28s cubic-bezier(.22,.61,.36,1); } .cad-nav--overlay .cad-nav__menu a:hover::after, .cad-nav--solid .cad-nav__menu a:hover::after{transform:scaleX(1);} /* ---------- 4. SIGNATURE : LA TRACE DES 4 ÉTAPES ------------ */ /* Sur le conteneur de la grille « Comment ça marche » (.cad-steps). Le JS injecte tout seul le rail .cad-steps-trailwrap s'il manque. */ .cad-steps{position:relative;} .cad-steps-trailwrap{ position:absolute;left:26px;right:26px;top:25px; display:flex;align-items:center;height:6px;pointer-events:none;z-index:0; } .cad-steps-trail{ height:6px;width:0; background-image:radial-gradient(circle,var(--soleil) 2px,transparent 2.4px); background-size:11px 6px;background-repeat:repeat-x; transition:width 1.15s cubic-bezier(.4,0,.2,1); } .cad-js .cad-steps.is-in .cad-steps-trail{width:100%;} .cad-steps-flag{ flex:0 0 auto;width:0;height:0;border-style:solid;border-width:5px 0 5px 10px; border-color:transparent transparent transparent var(--corail); opacity:0;transition:opacity .3s ease; } .cad-js .cad-steps.is-in .cad-steps-flag{opacity:1;} /* Les pastilles numérotées : muettes puis « allumées » au passage de la trace */ .cad-js .cad-step-num{ position:relative;z-index:1;background:#E2E8DD;color:#A4B3A7;transform:scale(.82); transition:background .45s ease,color .45s ease,transform .5s cubic-bezier(.34,1.56,.64,1); } .cad-js .cad-steps.is-in .cad-step-num{background:var(--prairie);color:#fff;transform:none;} /* ---------- 5. RESPONSIVE ----------------------------------- */ @media (max-width:860px){ /* En 1 colonne, la trace horizontale n'a plus de sens */ .cad-steps-trailwrap{display:none;} .cad-js .cad-step-num{transform:none;background:var(--prairie);color:#fff;} } /* ---------- 6. ACCESSIBILITÉ : MOUVEMENT RÉDUIT ------------- */ @media (prefers-reduced-motion: reduce){ .cad-js .cad-reveal, .cad-js .cad-hero-anim{opacity:1 !important;transform:none !important;transition:none !important;} .cad-js .cad-trace-dots{width:54px !important;transition:none !important;} .cad-js .cad-trace-flag{opacity:1 !important;transform:none !important;transition:none !important;} .cad-js .cad-steps.is-in .cad-steps-trail, .cad-steps-trail{width:100% !important;transition:none !important;} .cad-steps-flag{opacity:1 !important;} .cad-js .cad-step-num{transform:none !important;background:var(--prairie) !important;color:#fff !important;transition:none !important;} .cad-livedot{animation:none !important;} .cad-btn:hover,.cad-blogcard:hover,.cad-card-article:hover{transform:none !important;} .cad-arrow{transition:none !important;} }