/* ============================================================
   SITE GLOBALS — Tokens, a11y, reveal-on-scroll (toutes pages)
   Enqueué globalement via inc/enqueue.php
   ============================================================ */

:root {
    /* Neutre tinté vers la teinte teal de marque (jamais de blanc pur) */
    --site-white: oklch(99% 0.004 200);
    --site-white-soft: oklch(98% 0.008 200);
    --site-cream: oklch(97% 0.012 60);

    /* Easing tokens partagés (impeccable: pas de bounce) */
    --site-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --site-ease-out-soft: cubic-bezier(0.25, 1, 0.5, 1);

    /* Durations */
    --site-dur-fast: 180ms;
    --site-dur-base: 260ms;
    --site-dur-entrance: 600ms;
}

/* ---------- FOCUS VISIBLE GLOBAL (WCAG 2.4.7) ---------- */
body :focus-visible {
    outline: 2px solid var(--color-primary, #00AAAA);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Sur fonds sombres, ring peach plus contrastant */
.programmes-section :focus-visible,
.ressource-gratuite-section :focus-visible,
.site-header.scrolled :focus-visible,
.top-bar :focus-visible {
    outline-color: var(--color-neutral, #FAC8B4);
}

/* ---------- REVEAL-ON-SCROLL ---------- */
@media (prefers-reduced-motion: no-preference) {
    .site-reveal,
    [data-reveal] {
        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity var(--site-dur-entrance) var(--site-ease-out),
            transform var(--site-dur-entrance) var(--site-ease-out);
        transition-delay: var(--site-reveal-delay, 0ms);
        will-change: transform, opacity;
    }
    .site-reveal.in,
    [data-reveal].in {
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    /* Stagger automatique pour enfants d'un parent .site-reveal-children */
    .site-reveal-children > * {
        opacity: 0;
        transform: translateY(12px);
        animation: siteFadeUp 600ms var(--site-ease-out) forwards;
        animation-play-state: paused;
    }
    .site-reveal-children.in > * {
        animation-play-state: running;
    }
    .site-reveal-children.in > *:nth-child(1) { animation-delay: 0ms; }
    .site-reveal-children.in > *:nth-child(2) { animation-delay: 80ms; }
    .site-reveal-children.in > *:nth-child(3) { animation-delay: 160ms; }
    .site-reveal-children.in > *:nth-child(4) { animation-delay: 240ms; }
    .site-reveal-children.in > *:nth-child(5) { animation-delay: 320ms; }
    .site-reveal-children.in > *:nth-child(n+6) { animation-delay: 400ms; }
}

@keyframes siteFadeUp {
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- HERO STAGGER (entrée à l'arrivée DOM) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .hero-stagger {
        opacity: 0;
        transform: translateY(12px);
        animation: siteHeroStaggerIn 700ms var(--site-ease-out) forwards;
        animation-delay: calc(var(--hero-stagger, 0) * 90ms + 120ms);
    }
}

@keyframes siteHeroStaggerIn {
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- REDUCED MOTION GLOBAL ----------
   Coupe uniquement les animations décoratives (reveal, parallax, keyframes),
   PAS les transitions de feedback UI (hover, focus) qui restent essentielles. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}