/* ============================================================ TC Digital Academy — Kit Motion sobre (v1.0) 1) Révélations au scroll 2) Ligne de parcours 3) Micro-interactions Respecte prefers-reduced-motion. Ne casse rien si le JS est désactivé. Les états animés ne s'activent que si a la classe .tc-anim (ajoutée par le petit script d'en-tête, sauf si mouvement réduit). ============================================================ */ :root{ --tc-violet:#7B5CF0; --tc-orange:#FF5C00; --tc-ink:#1A1035; --tc-ease:cubic-bezier(.22,.61,.36,1); --tc-dur:.6s; } /* ---------- 1. RÉVÉLATION AU SCROLL ---------- */ /* Base (sûr) : visible. L'état caché n'existe que sous .tc-anim. */ .tc-anim .tc-reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--tc-dur) var(--tc-ease), transform var(--tc-dur) var(--tc-ease); will-change:opacity, transform; } .tc-anim .tc-reveal.tc-reveal--fade{ transform:none; } .tc-anim .tc-reveal.tc-reveal--left{ transform:translateX(-20px); } .tc-anim .tc-reveal.tc-reveal--right{ transform:translateX(20px); } .tc-anim .tc-reveal.tc-reveal--zoom{ transform:scale(.96); } .tc-anim .tc-reveal.is-visible{ opacity:1; transform:none; } /* ---------- 3. MICRO-INTERACTIONS ---------- */ /* Transitions douces (seulement si mouvement autorisé) */ .tc-anim .tc-card, .tc-anim .tc-btn, .tc-anim .tc-link{ transition:all .25s var(--tc-ease); } .tc-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(26,16,53,.45); border-color:var(--tc-violet); } /* Bouton : dégradé de marque qui glisse au survol. Texte foncé = lisible (AA). */ .tc-btn{ background-image:linear-gradient(90deg,var(--tc-violet),var(--tc-orange),var(--tc-violet)); background-size:200% 100%; background-position:0% 50%; color:var(--tc-ink); border:none; } .tc-btn:hover{ background-position:100% 50%; transform:translateY(-2px); } /* Lien : soulignement qui se trace */ .tc-link{ background-image:linear-gradient(var(--tc-orange),var(--tc-orange)); background-repeat:no-repeat; background-position:0 100%; background-size:0% 2px; padding-bottom:2px; text-decoration:none; } .tc-link:hover, .tc-link:focus-visible{ background-size:100% 2px; } /* ---------- 2. LIGNE DE PARCOURS ---------- */ .tc-journey{ position:relative; } .tc-journey__rail{ position:absolute; left:0; top:0; bottom:0; width:4px; pointer-events:none; } .tc-journey__rail svg{ width:4px; height:100%; display:block; overflow:visible; } /* piste fantôme (chemin restant, très discret) */ .tc-journey__track{ fill:none; stroke:var(--tc-violet); opacity:.14; stroke-width:4; stroke-linecap:round; vector-effect:non-scaling-stroke; } /* trait qui se dessine */ .tc-journey__path{ fill:none; stroke:url(#tcGrad); stroke-width:4; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:0; /* base : tracé (si pas d'anim) */ } .tc-anim .tc-journey__path{ stroke-dashoffset:1; } /* sous anim : le JS le dessine */ /* pastilles d'étape (éléments HTML positionnés le long du rail) */ .tc-journey__dot{ position:absolute; left:-6px; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--tc-violet); box-sizing:border-box; transform:translateY(-50%); } .tc-anim .tc-journey__dot{ transition:background-color .3s var(--tc-ease), border-color .3s var(--tc-ease), transform .3s var(--tc-ease); } .tc-journey__dot.is-reached{ background:var(--tc-orange); border-color:var(--tc-orange); transform:translateY(-50%) scale(1.15); } /* ---------- SÉCURITÉ : mouvement réduit ---------- */ @media (prefers-reduced-motion: reduce){ .tc-reveal{ opacity:1 !important; transform:none !important; } .tc-journey__path{ stroke-dashoffset:0 !important; } .tc-journey__dot{ background:var(--tc-orange) !important; border-color:var(--tc-orange) !important; } .tc-card, .tc-btn, .tc-link{ transition:none !important; } }