/* ══════════════════════════════════════════════════════════════
effects.css — Effets visuels subtils pour Outils-EC.fr
Ajouter dans le
et avant
══════════════════════════════════════════════════════════════ */
/* ── 1. SCROLL REVEAL — les éléments apparaissent en douceur ── */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Délais échelonnés pour les grilles */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
/* ── 2. GLOW CURSOR — halo lumineux qui suit la souris sur le hero ── */
.hero-glow {
position: relative;
overflow: hidden;
}
.hero-glow::after {
content: '';
position: absolute;
top: var(--mouse-y, 50%);
left: var(--mouse-x, 50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 70%);
transform: translate(-50%, -50%);
pointer-events: none;
transition: top 0.3s ease-out, left 0.3s ease-out;
z-index: 0;
}
/* ── 3. CARD HOVER — effet de profondeur subtil sur les cartes ── */
.card-hover {
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.card-hover:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 20px 60px rgba(29,78,216,.1), 0 4px 12px rgba(0,0,0,.04);
}
/* ── 4. BOUTONS — micro-animation au clic ── */
.btn {
position: relative;
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.5s, height 0.5s, opacity 0.5s;
opacity: 0;
}
.btn:active::after {
width: 300px;
height: 300px;
opacity: 1;
transition: 0s;
}
/* ── 5. STAT COUNTER — les chiffres pulsent légèrement à l'apparition ── */
@keyframes countPop {
0% { transform: scale(0.7); opacity: 0; }
60% { transform: scale(1.08); }
100% { transform: scale(1); opacity: 1; }
}
.stat-animate .stat-n,
.stat-animate .stat-item span:first-child {
animation: countPop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stat-animate .stat:nth-child(2) .stat-n,
.stat-animate > :nth-child(2) .stat-n { animation-delay: 0.15s; }
.stat-animate .stat:nth-child(3) .stat-n,
.stat-animate > :nth-child(3) .stat-n { animation-delay: 0.3s; }
.stat-animate .stat:nth-child(4) .stat-n,
.stat-animate > :nth-child(4) .stat-n { animation-delay: 0.45s; }
/* ── 6. LIENS NAVBAR — soulignement animé ── */
.nav-links a:not(.nav-cta) {
position: relative;
}
.nav-links a:not(.nav-cta)::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background: var(--blue, #1d4ed8);
border-radius: 1px;
transition: width 0.3s ease, left 0.3s ease;
}
.nav-links a:not(.nav-cta):hover::after {
width: 100%;
left: 0;
}
/* ── 7. FOCUS VISIBLE — anneau bleu accessible ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--blue, #1d4ed8);
outline-offset: 2px;
border-radius: 4px;
}
/* ── 8. SMOOTH PAGE LOAD — fondu d'entrée global ── */
@keyframes pageIn {
from { opacity: 0; }
to { opacity: 1; }
}
body {
animation: pageIn 0.4s ease-out;
}