/* ==========================================================================
   ONE MOMENT SIGNATURE — motion.css
   Polish award-grade : kinetic typography, scroll-driven anims, micro-int.
   Toutes les anims respectent prefers-reduced-motion.
   ========================================================================== */

/* ── Smooth scroll global + scroll-snap optionnel ────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ── Custom selection brandée ───────────────────────────────────── */
::selection {
    background: var(--brand-sun);
    color: var(--ink);
    text-shadow: none;
}

/* ════════════════════════════════════════════════════════════════
   1. LOADER d'intro (court, 400ms max — n'agresse pas)
   Apparait au load, fade out une fois page prête.
   ════════════════════════════════════════════════════════════════ */
.oms-loader {
    position: fixed; inset: 0;
    z-index: 9999;
    background: var(--bg-paper);
    display: grid; place-items: center;
    pointer-events: none;
    animation: oms-loader-out 0.5s 0.6s var(--ease-out) forwards;
}
.oms-loader__mark {
    /* v3.14.39 — Taille loader réduite (64→48). Configurable via Customizer →
       ADD — Identité → Logo — taille → Logo loader d'intro. */
    width: 48px; height: 48px;
    opacity: 0;
    animation: oms-loader-mark-in 0.5s 0.1s var(--ease-out) forwards;
}
@keyframes oms-loader-mark-in {
    from { opacity: 0; transform: translateY(8px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)  scale(1); }
}
@keyframes oms-loader-out {
    to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .oms-loader { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   2. HERO — kinetic typography (reveal staggered ligne par ligne)
   ════════════════════════════════════════════════════════════════ */

.hero-cine__kicker {
    opacity: 0;
    animation: hero-fade-up 1s 0.5s var(--ease-out) both;
}
.hero-cine__title {
    /* Reveal en deux temps avec clip-path */
    opacity: 0;
    transform: translateY(20px);
    animation: hero-fade-up 1.4s 0.8s var(--ease-out) both;
}
.hero-cine__title em {
    /* L'italique "Niombato" apparaît en différé avec un léger zoom */
    display: inline-block;
    animation: hero-italic-in 1.6s 1.3s var(--ease-back) both;
}
.hero-cine__lead {
    opacity: 0;
    animation: hero-fade-up 1.2s 1.6s var(--ease-out) both;
}
.hero-cine__actions {
    opacity: 0;
    animation: hero-fade-up 1.2s 1.9s var(--ease-out) both;
}
.hero-cine__partners {
    opacity: 0;
    animation: hero-fade-up 1.2s 2.2s var(--ease-out) both;
}

@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-italic-in {
    from { opacity: 0; transform: scale(0.92) translateY(6px); filter: blur(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cine__kicker,
    .hero-cine__title,
    .hero-cine__title em,
    .hero-cine__lead,
    .hero-cine__actions,
    .hero-cine__partners { animation: none; opacity: 1; transform: none; filter: none; }
}

/* ════════════════════════════════════════════════════════════════
   3. CHAPITRE I — large I qui scale au scroll
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .intro__chapter {
            animation: chapter-in linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }
        @keyframes chapter-in {
            from { opacity: 0; transform: translateX(-30px) scale(0.85); }
            to   { opacity: 1; transform: translateX(0) scale(1); }
        }
        .intro__title,
        .intro__body p {
            animation: chapter-text-in linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 40%;
        }
        @keyframes chapter-text-in {
            from { opacity: 0; transform: translateY(40px); }
            to   { opacity: 1; transform: translateY(0); }
        }
    }
}

/* ════════════════════════════════════════════════════════════════
   4. DOMAINES — cascade reveal + underline animé
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .domaine {
            animation: domaine-in linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 25%;
        }
        @keyframes domaine-in {
            from { opacity: 0; transform: translateY(30px); }
            to   { opacity: 1; transform: translateY(0); }
        }
    }
    /* Numéro qui devient plus grand au hover */
    .domaine__num {
        transition: color var(--dur-base) var(--ease-out),
                    transform var(--dur-base) var(--ease-out),
                    letter-spacing var(--dur-base) var(--ease-out);
    }
    .domaine:hover .domaine__num {
        color: var(--brand-earth-text);
        transform: scale(1.08) rotate(-3deg);
    }
    /* Petit indicateur de lecture qui se déploie */
    .domaine__link::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 1px;
        background: currentColor;
        vertical-align: middle;
        margin-right: 0;
        transition: width var(--dur-base) var(--ease-out), margin-right var(--dur-base);
    }
    .domaine:hover .domaine__link::before {
        width: 2.5rem;
        margin-right: 0.6rem;
    }
}

/* ════════════════════════════════════════════════════════════════
   5. ZONES MAP — moment signature, polish
   ════════════════════════════════════════════════════════════════ */

/* Carte qui apparaît avec un léger scale + ligne de progression */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .zones__map-frame {
            animation: map-in linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
        }
        @keyframes map-in {
            from { opacity: 0; transform: scale(0.96); }
            to   { opacity: 1; transform: scale(1); }
        }
    }

    /* Marqueurs : ripple sur l'arrivée d'activation */
    .zones__map .zone-marker[data-active] .zone-marker__dot {
        animation: marker-pop 0.6s var(--ease-back);
    }
    @keyframes marker-pop {
        0%   { transform: scale(0.6); transform-origin: center; }
        60%  { transform: scale(1.3); }
        100% { transform: scale(1); }
    }
}

/* ════════════════════════════════════════════════════════════════
   6. STATS — compteurs avec entry plus dramatique
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .stat {
            animation: stat-in linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }
        @keyframes stat-in {
            from { opacity: 0; transform: translateX(-30px); border-color: transparent; }
            to   { opacity: 1; transform: translateX(0); }
        }
    }
}

/* ════════════════════════════════════════════════════════════════
   7. PROJET PHARE — actions reveal une par une
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .projet-phare ol li {
            animation: action-in linear both;
            animation-timeline: view();
            animation-range: entry 5% cover 35%;
        }
        @keyframes action-in {
            from { opacity: 0; transform: translateX(-20px); }
            to   { opacity: 1; transform: translateX(0); }
        }
    }
}

/* ════════════════════════════════════════════════════════════════
   8. VOIX DU PROJET — hover sophistiqué sur poster
   ════════════════════════════════════════════════════════════════ */

.voix-card__poster {
    transition: transform 1s var(--ease-out), filter 0.6s;
}
.voix-card__play:hover .voix-card__poster {
    transform: scale(1.06);
    filter: brightness(0.85) saturate(1.1);
}
/* Le bouton play se "pulse" subtilement en arrière-plan */
.voix-card__btn {
    position: relative;
    transition: transform var(--dur-base) var(--ease-back),
                background var(--dur-base),
                color var(--dur-base);
}
.voix-card__btn::before {
    content: "";
    position: absolute; inset: -8px;
    border-radius: 50%;
    border: 1px solid color-mix(in oklch, var(--bg-paper) 60%, transparent);
    transform: scale(0.9); opacity: 0;
    transition: transform 0.6s var(--ease-out), opacity 0.4s;
}
.voix-card__play:hover .voix-card__btn::before {
    transform: scale(1.2); opacity: 1;
}

/* ════════════════════════════════════════════════════════════════
   9. TÉMOIGNAGE — guillemets en révélation lettre par lettre simulée
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .temoignage-pull blockquote {
            animation: quote-in linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 50%;
        }
        @keyframes quote-in {
            from { opacity: 0; transform: translateY(20px); filter: blur(2px); }
            to   { opacity: 1; transform: translateY(0); filter: blur(0); }
        }
        .temoignage-pull blockquote::before {
            animation: quote-mark-in 1.2s var(--ease-back) both;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }
        @keyframes quote-mark-in {
            from { opacity: 0; transform: scale(0.4) rotate(-15deg); }
            to   { opacity: 0.5; transform: scale(1) rotate(0); }
        }
    }
}

/* ════════════════════════════════════════════════════════════════
   10. DON CTA — léger parallaxe + glow au hover
   ════════════════════════════════════════════════════════════════ */

.don-cta::before {
    transition: opacity 0.6s ease;
}
.don-cta:hover::before {
    opacity: 0.85;
}

/* ════════════════════════════════════════════════════════════════
   11. BOUTONS — magnetic hover via JS + ripple subtil
   ════════════════════════════════════════════════════════════════ */

.btn {
    position: relative;
    overflow: hidden;
    will-change: transform;
}
.btn::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
                color-mix(in oklch, currentColor 12%, transparent) 0%,
                transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.btn:hover::after { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   12. NAVIGATION — link underline animé sophistiqué
   ════════════════════════════════════════════════════════════════ */

.site-nav__list a {
    position: relative;
}
.site-nav__list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 0.25rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.site-nav__list a:hover::after,
.site-nav__list a.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ════════════════════════════════════════════════════════════════
   13. SECTION TRANSITIONS — bordures invisibles, espace négatif
   On évite les hard cuts entre sections.
   ════════════════════════════════════════════════════════════════ */

/* Léger gradient à l'arrivée des sections sur fond paper */
section.section,
section[class*="home-"],
.intro, .domaines, .stats, .partenaires, .actualites, .temoignages,
.voix-projet, .zones, .projet-phare {
    position: relative;
}

/* Une ligne fine d'or sahélien (1px) au début de certaines sections clés */
.zones::before,
.projet-phare::before,
.don-cta::before {
    /* déjà gérés ou laissés tels quels */
}

/* ════════════════════════════════════════════════════════════════
   14. WHATSAPP — magnetic micro-tilt accentué (déjà OK, polish)
   ════════════════════════════════════════════════════════════════ */
.whatsapp-float {
    transition: transform 0.4s var(--ease-back), padding 0.4s, gap 0.4s, box-shadow 0.4s;
}
.whatsapp-float:hover {
    box-shadow:
        0 18px 40px oklch(0 0 0 / 0.32),
        0 6px 12px oklch(0 0 0 / 0.22),
        inset 0 0 0 1px oklch(1 0 0 / 0.25);
}

/* ════════════════════════════════════════════════════════════════
   15. SCROLL PROGRESS BAR fine (en haut de page)
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        body::after {
            content: "";
            position: fixed;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--brand-earth), var(--brand-sun));
            transform-origin: left;
            animation: scroll-progress linear;
            animation-timeline: scroll(root);
            z-index: 100;
            pointer-events: none;
        }
        @keyframes scroll-progress {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }
    }
}

/* ════════════════════════════════════════════════════════════════
   16. CURSEUR personnalisé subtil (desktop uniquement)
   Petit point qui suit la souris sur les éléments interactifs.
   ════════════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
    .oms-cursor {
        position: fixed;
        top: 0; left: 0;
        width: 8px; height: 8px;
        background: var(--brand-earth);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        transition: width 0.3s var(--ease-out), height 0.3s, background 0.3s, opacity 0.3s;
        mix-blend-mode: difference;
        opacity: 0;
        will-change: transform;
    }
    .oms-cursor.is-visible { opacity: 1; }
    .oms-cursor.is-hover {
        width: 36px; height: 36px;
        background: var(--brand-sun);
    }
    /* Sur les boutons et liens, le curseur grossit */
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
    .oms-cursor { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   17. VIEW TRANSITIONS pour navigation inter-pages
   (déjà déclaré dans main.css avec @view-transition)
   On polish les transitions par défaut.
   ════════════════════════════════════════════════════════════════ */

::view-transition-old(root) {
    animation: fade-out 0.3s ease-out both;
}
::view-transition-new(root) {
    animation: fade-in 0.4s 0.1s ease-out both;
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ════════════════════════════════════════════════════════════════
   18. FOCUS VISIBLE — anneau or sahélien soigné partout
   ════════════════════════════════════════════════════════════════ */
*:focus-visible {
    outline: 2px solid var(--brand-sun);
    outline-offset: 3px;
    border-radius: 4px;
    transition: outline-offset 0.15s;
}
.btn:focus-visible { outline-offset: 4px; }

/* ════════════════════════════════════════════════════════════════
   19. PETITES FINITIONS éditoriales — text-wrap balance partout
   ════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Optionnel: nice underline pour les liens inline dans la prose */
.prose a,
.page-editorial__content a {
    background-image: linear-gradient(to right, currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    transition: background-size 0.3s var(--ease-out);
}
.prose a:hover,
.page-editorial__content a:hover {
    background-size: 100% 2px;
}