/* =============================================================
   CAVAGNO AGENCY — components.css
   Composants réutilisables du design system "Aurora Premium".
   Chaque bloc est documenté pour être décliné sur les autres pages.
   ============================================================= */

/* -------------------------------------------------------------
   FOND AURORA — nappes néon douces, animées, FIXÉES en fond.
   C'est le seul endroit où le néon "vit" en permanence ; ailleurs
   il reste un accent. Léger, jamais agressif.
   ------------------------------------------------------------- */
.aurora {
    position: fixed; inset: -25%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(38% 38% at 18% 22%, var(--aurora-pink), transparent 62%),
        radial-gradient(42% 42% at 82% 18%, var(--aurora-violet), transparent 62%),
        radial-gradient(40% 40% at 72% 82%, var(--aurora-cyan), transparent 64%);
    filter: blur(60px);
    opacity: 0.55;
    animation: aurora-drift 24s ease-in-out infinite alternate;
}
[data-theme="light"] .aurora { opacity: 0.32; }
@keyframes aurora-drift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
    50%  { transform: translate3d(2%, 1.5%, 0) scale(1.1); }
    100% { transform: translate3d(-1.5%, 2%, 0) scale(1.04); }
}
/* Grain/noise très léger pour casser le "flat digital" */
.grain {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* Halo qui suit le curseur (desktop, subtil) */
.cursor-glow {
    position: fixed; top: 0; left: 0; width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(circle, rgba(124,92,255,0.10), transparent 65%);
    transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
    opacity: 0; transition: opacity var(--t-mid); mix-blend-mode: screen;
}

/* Barre de progression de lecture */
.read-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: var(--grad-signal); z-index: 200; transition: width 0.1s linear;
    box-shadow: var(--glow-magenta);
}

/* -------------------------------------------------------------
   HEADER + NAVIGATION
   ------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    height: var(--header-h);
    display: flex; align-items: center;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-mid), background var(--t-mid);
}
.site-header.scrolled { border-bottom-color: var(--border); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand b { color: var(--text); }
.brand .dot-accent { color: var(--magenta); }

.nav-main { display: flex; align-items: center; gap: var(--sp-2); }
.nav-main a {
    position: relative; padding: 0.55rem 0.85rem; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 500; color: var(--text-soft);
    transition: color var(--t-fast), background var(--t-fast);
}
.nav-main a:hover { color: var(--text); background: var(--surface-glass); }
.nav-main a.active { color: var(--text); }
.nav-main a.active::after {
    content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 2px; height: 2px;
    border-radius: 2px; background: var(--grad-signal);
}
.header-actions { display: flex; align-items: center; gap: var(--sp-3); }

.theme-toggle {
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: var(--r-full); border: 1px solid var(--border);
    background: var(--surface-glass); color: var(--text-soft); font-size: 1.15rem;
    transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); transform: rotate(-15deg); }

/* Bascule de langue FR / EN */
.lang-toggle {
    height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--r-full); border: 1px solid var(--border);
    background: var(--surface-glass); color: var(--text-soft);
    font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em;
    transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.lang-toggle i { font-size: 1.05rem; }
.lang-toggle:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.theme-toggle .ri-moon-line { display: none; }
[data-theme="light"] .theme-toggle .ri-sun-line { display: none; }
[data-theme="light"] .theme-toggle .ri-moon-line { display: block; }

.menu-btn {
    display: none; width: 44px; height: 44px; place-items: center;
    border-radius: var(--r-sm); border: 1px solid var(--border);
    background: var(--surface-glass); color: var(--text); font-size: 1.5rem;
}

/* Menu mobile plein écran */
.nav-mobile {
    position: fixed; inset: 0; z-index: 150;
    background: color-mix(in srgb, var(--ink) 94%, transparent);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    display: flex; flex-direction: column; padding: calc(var(--header-h) + 1rem) clamp(1.25rem,5vw,2.5rem) 2rem;
    transform: translateY(-100%); transition: transform var(--t-mid) var(--ease-out);
    overflow-y: auto;
}
.nav-mobile.open { transform: translateY(0); }
.nav-mobile a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.15rem 0.25rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
    border-bottom: 1px solid var(--border); color: var(--text);
}
.nav-mobile a i { color: var(--text-mute); }
.nav-mobile .btn { margin-top: var(--sp-6); justify-content: center; }
.nav-mobile-close { align-self: flex-end; position: absolute; top: 1.1rem; right: clamp(1.25rem,5vw,2.5rem); font-size: 2rem; background: none; border: none; color: var(--text); }

/* -------------------------------------------------------------
   BOUTONS
   ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
    padding: 0.9rem 1.6rem; border-radius: var(--r-full); border: 1px solid transparent;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-mid), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    white-space: nowrap; line-height: 1;
}
.btn i { font-size: 1.15em; }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary { background: var(--magenta); color: #fff; box-shadow: var(--glow-magenta); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 50px -4px rgba(255,46,99,0.6); background: #ff1a55; }

.btn--gradient { color: #fff; background: var(--grad-signal); background-size: 180% auto; }
.btn--gradient:hover { transform: translateY(-2px); background-position: right center; box-shadow: 0 12px 40px -10px rgba(124,92,255,0.6); }

.btn--ghost { background: var(--surface-glass); color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--cyan); color: var(--text); background: color-mix(in srgb, var(--cyan) 8%, transparent); }

.btn--lg { padding: 1.05rem 2rem; font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }

/* -------------------------------------------------------------
   TITRES DE SECTION
   ------------------------------------------------------------- */
.section-head { max-width: 760px; margin-bottom: var(--sp-8); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; margin: var(--sp-4) 0 var(--sp-4); }
.section-head p { font-size: var(--fs-lead); color: var(--text-soft); }

/* -------------------------------------------------------------
   CARTE GÉNÉRIQUE + variantes
   ------------------------------------------------------------- */
.card {
    position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--sp-6);
    transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid), background var(--t-mid), box-shadow var(--t-mid);
}
.card:hover { transform: translateY(-6px); border-color: var(--border-strong); background: var(--surface-2); box-shadow: var(--shadow-md); }
.card__icon {
    width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
    font-size: 1.6rem; color: var(--text); margin-bottom: var(--sp-5);
    background: var(--surface-glass); border: 1px solid var(--border-strong);
}
.card__icon.warm { background: var(--magenta); color: #fff; border-color: transparent; }
.card__icon.cool { background: var(--grad-cool); color: #fff; border-color: transparent; }
.card h3 { font-family: var(--font-display); font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.card p { color: var(--text-soft); font-size: var(--fs-sm); }

/* Carte avec liseré dégradé qui s'allume au survol */
.card--glow::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: var(--grad-signal); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity var(--t-mid); pointer-events: none;
}
.card--glow:hover::after { opacity: 1; }

/* Grilles */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* -------------------------------------------------------------
   BADGES & PILLS
   ------------------------------------------------------------- */
.pill {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.4rem 0.85rem; border-radius: var(--r-full);
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
    background: var(--surface-glass); border: 1px solid var(--border); color: var(--text-soft);
}
.pill .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: blink 1.6s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }

.badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.badge--info { background: var(--info-bg); color: var(--info); }

/* -------------------------------------------------------------
   CALLOUTS (encadrés pédagogiques / alertes conformité)
   ------------------------------------------------------------- */
.callout {
    display: flex; gap: var(--sp-4); padding: var(--sp-5);
    border-radius: var(--r-md); border: 1px solid var(--border);
    background: var(--surface-glass); border-left-width: 4px;
}
.callout__icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.4; }
.callout h4 { font-family: var(--font-display); font-size: var(--fs-h4); margin-bottom: 0.3rem; }
.callout p { color: var(--text-soft); font-size: var(--fs-sm); }
.callout--ok { border-left-color: var(--ok); }       .callout--ok .callout__icon { color: var(--ok); }
.callout--warn { border-left-color: var(--warn); }    .callout--warn .callout__icon { color: var(--warn); }
.callout--danger { border-left-color: var(--danger); } .callout--danger .callout__icon { color: var(--danger); }
.callout--info { border-left-color: var(--info); }    .callout--info .callout__icon { color: var(--info); }

/* -------------------------------------------------------------
   KPI / STATISTIQUES
   ------------------------------------------------------------- */
.kpi { text-align: left; }
.kpi__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 1.5rem + 3vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; }
.kpi__num .gradient-text { display: inline; }
.kpi__label { margin-top: var(--sp-3); color: var(--text-soft); font-size: var(--fs-sm); }
.kpi__sep { width: 40px; height: 3px; border-radius: 3px; background: var(--grad-signal); margin-top: var(--sp-4); }

/* -------------------------------------------------------------
   DO / DON'T (tableau de bonnes vs mauvaises pratiques)
   ------------------------------------------------------------- */
.dodont { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--sp-5); }
.dodont__col { border-radius: var(--r-lg); border: 1px solid var(--border); padding: var(--sp-6); background: var(--surface); }
.dodont__col h4 { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: var(--fs-h4); margin-bottom: var(--sp-5); }
.dodont__col--do { border-top: 3px solid var(--ok); }   .dodont__col--do h4 { color: var(--ok); }
.dodont__col--dont { border-top: 3px solid var(--danger); } .dodont__col--dont h4 { color: var(--danger); }
.dodont li { display: flex; gap: 0.7rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); color: var(--text-soft); font-size: var(--fs-sm); }
.dodont li:last-child { border-bottom: none; }
.dodont li i { flex-shrink: 0; margin-top: 0.15rem; }
.dodont__col--do li i { color: var(--ok); }
.dodont__col--dont li i { color: var(--danger); }

/* -------------------------------------------------------------
   TIMELINE (parcours créateur, process)
   ------------------------------------------------------------- */
.timeline { position: relative; padding-left: 2.2rem; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--magenta), var(--violet), var(--cyan)); }
.timeline__item { position: relative; padding-bottom: var(--sp-7); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ''; position: absolute; left: -2.2rem; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 2px solid var(--magenta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--magenta) 18%, transparent); }
.timeline__step { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta); }
.timeline__item h4 { font-family: var(--font-display); font-size: var(--fs-h4); margin: 0.3rem 0 0.5rem; }
.timeline__item p { color: var(--text-soft); font-size: var(--fs-sm); }

/* -------------------------------------------------------------
   TABS (onglets de contenu)
   ------------------------------------------------------------- */
.tabs__nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); border-bottom: 1px solid var(--border); }
.tabs__btn {
    padding: 0.7rem 1.1rem; background: none; border: none; color: var(--text-mute);
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-fast), border-color var(--t-fast);
}
.tabs__btn:hover { color: var(--text); }
.tabs__btn[aria-selected="true"] { color: var(--text); border-bottom-color: var(--magenta); }
.tabs__panel { animation: fade-up 0.4s var(--ease-out); }
.tabs__panel[hidden] { display: none; }

/* -------------------------------------------------------------
   FAQ (accordéon accessible)
   ------------------------------------------------------------- */
.faq { max-width: var(--container-narrow); margin-inline: auto; }
.faq__item { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--sp-3); background: var(--surface); overflow: hidden; }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem; background: none; border: none; color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); text-align: left; }
.faq__q i { color: var(--magenta); transition: transform var(--t-mid); flex-shrink: 0; }
.faq__item.open .faq__q i { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--t-mid) var(--ease-soft); }
.faq__a p { padding: 0 1.4rem 1.35rem; color: var(--text-soft); font-size: var(--fs-sm); }

/* -------------------------------------------------------------
   MARQUEE (bandeau défilant)
   ------------------------------------------------------------- */
.marquee { overflow: hidden; padding: var(--sp-5) 0; border-block: 1px solid var(--border);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; width: max-content; gap: var(--sp-6); animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 2vw, 1.4rem); color: var(--text-mute); display: inline-flex; align-items: center; gap: var(--sp-6); }
.marquee__track span::after { content: '✦'; color: var(--magenta); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */
.site-footer { background: var(--ink); border-top: 1px solid var(--border); padding-block: var(--sp-9) var(--sp-6); margin-top: var(--sp-8); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sp-7); }
.footer-brand p { color: var(--text-soft); font-size: var(--fs-sm); max-width: 34ch; margin: var(--sp-4) 0 var(--sp-5); }
.footer-col h4 { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); margin-bottom: var(--sp-4); }
.footer-col a { display: block; padding: 0.35rem 0; color: var(--text-soft); font-size: var(--fs-sm); transition: color var(--t-fast); }
.footer-col a:hover { color: var(--text); }
.socials { display: flex; gap: var(--sp-3); }
.socials a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-full); border: 1px solid var(--border); color: var(--text-soft); font-size: 1.2rem; transition: all var(--t-fast); }
.socials a:hover { color: #fff; border-color: transparent; background: var(--magenta); transform: translateY(-3px); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border); color: var(--text-mute); font-size: var(--fs-xs); }
.footer-bottom a { color: var(--text-soft); }
.footer-bottom a:hover { color: var(--text); }

/* -------------------------------------------------------------
   ANIMATIONS D'ENTRÉE (reveal au scroll)
   ------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
    .nav-main, .header-actions .btn { display: none; }
    .menu-btn { display: grid; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   HONEYPOT (anti-bot, invisible mais présent dans le DOM)
   ------------------------------------------------------------- */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------
   CONFETTIS (succès formulaire)
   ------------------------------------------------------------- */
.confetti-piece { position: fixed; top: -12px; width: 10px; height: 14px; z-index: 9999; pointer-events: none; will-change: transform, opacity; animation: confetti-fall linear forwards; }
@keyframes confetti-fall {
    0%   { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) { .confetti-piece { display: none; } }

/* -------------------------------------------------------------
   ANIMATIONS "FUN" — shimmer sur les textes en dégradé
   ------------------------------------------------------------- */
.gradient-text { background-size: 220% auto; animation: text-shimmer 6s ease-in-out infinite; }
@keyframes text-shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .gradient-text { animation: none; } }

/* Bouton : reflet lumineux qui balaie au survol */
.btn--gradient, .btn--primary { position: relative; overflow: hidden; }
.btn--gradient::after, .btn--primary::after {
    content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-18deg); transition: left 0.6s var(--ease-out); pointer-events: none;
}
.btn--gradient:hover::after, .btn--primary:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) { .btn--gradient::after, .btn--primary::after { display: none; } }

/* =============================================================
   PACK ANIMATIONS SITE-WIDE (cohérent sur toutes les pages)
   ============================================================= */

/* 1) Transitions de page fondues (View Transitions API, Chrome) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.28s var(--ease-soft) both; }
::view-transition-new(root) { animation: vt-in 0.42s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
/* Repli : léger fondu au chargement pour les navigateurs sans VT */
@media (prefers-reduced-motion: no-preference) {
    .page-fade { animation: page-fade-in 0.5s var(--ease-out) both; }
}
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 2) Particules flottantes (injectées par JS dans hero & page-hero) */
.fx-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-v2 > .container, .page-hero > .container { position: relative; z-index: 1; }
.fx-particles span {
    position: absolute; bottom: -16px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--grad-cool); box-shadow: 0 0 12px rgba(37,244,238,0.5);
    opacity: 0; animation: fx-rise linear infinite;
}
@keyframes fx-rise {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    10%  { opacity: 0.7; }
    90%  { opacity: 0.4; }
    100% { transform: translateY(-115%) scale(0.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fx-particles { display: none; } }

/* 3) Tilt 3D des cartes (préparation : perspective + lissage) */
.card, .algo-step, .risk-card { transform-style: preserve-3d; will-change: transform; }
.tilt-on { transition: transform 0.12s var(--ease-out); }

/* 4) Révélation mot par mot des gros titres */
.split-words { }
.split-words .word { display: inline-block; opacity: 0; transform: translateY(0.55em) rotate(2deg); animation: word-in 0.6s var(--ease-out) forwards; animation-delay: calc(var(--wi) * 0.045s + 0.12s); }
@keyframes word-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .split-words .word { opacity: 1; animation: none; transform: none; } }

/* 5) Compteur "live" — petit point qui pulse à côté */
.live-tick { position: relative; }

/* =============================================================
   AMÉLIORATIONS VISUELLES (juin 2026)
   ============================================================= */

/* Fondu d'apparition des images (uniquement si JS actif : classe .js sur <html>) */
.js img[loading="lazy"] { opacity: 0; transition: opacity 0.6s var(--ease-out); }
.js img[loading="lazy"].is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js img[loading="lazy"] { opacity: 1; transition: none; } }

/* CTA dégradé "vivant" : léger drift continu du dégradé */
@media (prefers-reduced-motion: no-preference) {
    .btn--gradient { animation: cta-shift 7s ease-in-out infinite; }
}
@keyframes cta-shift { 0%, 100% { background-position: left center; } 50% { background-position: right center; } }

/* Séparateur aurora discret en haut des sections alternées */
.section--alt { position: relative; }
.section--alt::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: min(680px, 80%); height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--magenta), var(--violet), var(--cyan), transparent);
    opacity: 0.55;
}

/* Footer : cibles tactiles plus confortables */
.footer-col a { padding: 0.5rem 0; }

/* Header : compacité sur très petits écrans (2 toggles + burger) */
@media (max-width: 420px) {
    .header-actions { gap: 0.4rem; }
    .lang-toggle { padding: 0 9px; font-size: 0.8rem; }
}