/* ==========================================================================
   ONE MOMENT SIGNATURE — mobile.css
   Overrides ciblés pour mobile/tablette (≤ 720px).
   Charge APRES main.css et motion.css pour gagner la cascade.
   Stratégie : conserver l'identité visuelle, simplifier les ornements
   et optimiser la lecture + le tap sur petits écrans.
   ========================================================================== */

/* ────────────────────────────────────────────────────────────────
   1. RACINE — tokens spécifiques mobile (ajustements)
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    :root {
        --nav-h: 60px;
        --touch: 48px;
        /* Réduction des shadows pour perf */
        --shadow-1: 0 1px 2px oklch(0 0 0 / .06);
        --shadow-2: 0 4px 16px oklch(0 0 0 / .08);
        --shadow-3: 0 8px 24px oklch(0 0 0 / .10);
    }
    /* Améliore le smooth scroll pour iOS */
    body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
}

/* ────────────────────────────────────────────────────────────────
   2. HEADER — plus compact sur mobile
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .site-header__inner { min-height: 60px; }
    .site-logo svg, .site-logo img, .site-logo .custom-logo { height: 28px; }
    .site-logo__name { font-size: 1.05rem; }
    .site-logo__tag { font-size: 0.62rem; }
    /* Le bouton "Faire un don" du header est caché sur mobile (déplacé dans la barre sticky bottom) */
    .site-header .site-nav__actions .btn--earth { display: none; }
    .site-nav__actions { gap: 0.4rem; }
    .theme-toggle { width: 44px; height: 44px; }
}

/* ════════════════════════════════════════════════════════════════
   v3.14.17 — HEADER MOBILE : hamburger à droite EXTRÊME
   Ordre flex (display: contents sur .site-nav → enfants au top-level) :
     logo (order 0)  →  actions group (order 50, lang + theme)  →  hamburger (order 99)
   Pour que le burger soit toujours la dernière chose vue à droite,
   on lui pose order: 99 et margin-left auto au cas où.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .site-header__inner {
        flex-wrap: nowrap;
        gap: 0.6rem;
    }
    .site-logo { order: 0; flex-shrink: 1; min-width: 0; }
    .site-nav__actions {
        order: 50;
        margin-left: auto;   /* push tout le groupe vers la droite */
        flex-shrink: 0;
    }
    .menu-toggle {
        order: 99;            /* TOUJOURS le dernier élément à droite */
        margin-left: 0.3rem;
        flex-shrink: 0;
    }
}
/* Très petits écrans : on cache le toggle thème pour libérer l'espace,
   il reste accessible depuis le menu mobile slide-out. */
@media (max-width: 380px) {
    .site-nav__actions .theme-toggle { display: none; }
}

/* ────────────────────────────────────────────────────────────────
   3. MENU MOBILE — fullscreen éditorial
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .site-nav-mobile {
        background:
            radial-gradient(ellipse at top right, color-mix(in oklch, var(--brand-sun) 14%, transparent) 0%, transparent 60%),
            var(--bg-paper);
        padding-block: calc(var(--space-l) + 1rem) var(--space-2xl);
        padding-inline: clamp(1.5rem, 6vw, 3rem);
    }
    .site-nav-mobile a {
        font-size: clamp(1.7rem, 6vw, 2.5rem);
        padding: var(--space-m) 0;
        line-height: 1.05;
        letter-spacing: -0.015em;
        font-weight: 300;
        transition: color var(--dur-fast), padding-left var(--dur-base);
    }
    .site-nav-mobile a:hover,
    .site-nav-mobile a:active { color: var(--brand-earth-text); padding-left: var(--space-s); }
    .site-nav-mobile a::after {
        content: " →";
        opacity: 0; margin-left: 0.4rem;
        font-family: var(--font-body);
        font-size: 0.9rem;
        vertical-align: middle;
        transition: opacity var(--dur-fast);
    }
    .site-nav-mobile a:hover::after,
    .site-nav-mobile a:active::after { opacity: 1; }
}

/* ────────────────────────────────────────────────────────────────
   4. HEROES — adaptés mobile (hauteur, typo, padding)
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .hero-cine,
    .apropos-hero,
    .domaines-hero,
    .projets-hero,
    .actu-hero,
    .galerie-hero,
    .contact-hero,
    .don-hero {
        min-height: 80dvh;
        min-height: calc(var(--vh, 1vh) * 80);
    }

    .hero-cine__title,
    .apropos-hero__title,
    .domaines-hero__title,
    .projets-hero__title,
    .actu-hero__title,
    .galerie-hero__title,
    .contact-hero__title,
    .don-hero__title {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
        line-height: 1;
        margin-bottom: var(--space-s);
    }

    .hero-cine__inner,
    .apropos-hero__inner,
    .domaines-hero__inner,
    .projets-hero__inner,
    .actu-hero__inner,
    .galerie-hero__inner,
    .contact-hero__inner,
    .don-hero__inner {
        padding-block: var(--space-xl) var(--space-l);
    }

    .hero-cine__lead,
    .apropos-hero__lead,
    .domaines-hero__lead,
    .projets-hero__lead,
    .actu-hero__lead,
    .galerie-hero__lead,
    .contact-hero__lead,
    .don-hero__lead {
        font-size: 1rem; line-height: 1.5;
    }

    /* Actions hero : full-width sur mobile */
    .hero-cine__actions,
    .don-hero__actions { flex-direction: column; align-items: stretch; }
    .hero-cine__actions .btn,
    .don-hero__actions .btn { width: 100%; justify-content: center; }

    /* TOC + filtres scrollables horizontalement */
    .domaines-hero__toc,
    .projets-filters__inner,
    .projets-filters__chips,
    .actu-filters__inner,
    .galerie-filters__inner,
    .publications-toc__inner,
    .publications-media-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--space-xs);
        margin-inline: calc(var(--rail) * -1);
        padding-inline: var(--rail);
    }
    .domaines-hero__toc::-webkit-scrollbar,
    .projets-filters__inner::-webkit-scrollbar,
    .projets-filters__chips::-webkit-scrollbar,
    .actu-filters__inner::-webkit-scrollbar,
    .galerie-filters__inner::-webkit-scrollbar,
    .publications-toc__inner::-webkit-scrollbar,
    .publications-media-tabs::-webkit-scrollbar { display: none; }
    .domaines-hero__toc a,
    .projets-filter,
    .actu-filter,
    .galerie-filter,
    .publications-toc__link,
    .publications-media-tabs__btn { flex-shrink: 0; }
    /* Ken Burns désactivé sur mobile pour publications hero aussi */
    .publications-hero__bg { animation: none; }
    /* Publications media tabs : sur mobile, indicator fixe est calé sur le scroll */
    .publications-media-tabs { width: 100%; }

    /* v3.14.33 — Dual filters : stack rows verticalement, segmented compact */
    .projets-filters--dual .rail { gap: 0.55rem; }
    .projets-filters__row {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.55rem;
        min-width: 0;
    }
    /* Segmented control : pas de wrap, scroll horizontal si nécessaire */
    .projets-segmented {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .projets-segmented::-webkit-scrollbar { display: none; }
    .projets-segmented__btn {
        padding: 0.42rem 0.7rem;
        font-size: 0.78rem;
        flex: 1 0 auto;
    }
    .projets-segmented__count {
        font-size: 0.62rem;
        padding: 0.08rem 0.3rem;
    }
    .projets-filters__label {
        flex-shrink: 0;
        margin-right: 0;
        font-size: 0.7rem;
    }
    /* Hero pills : tassement et taille raisonnable */
    .projets-hero__pills {
        gap: 0.4rem;
        margin-bottom: var(--space-m);
    }
    .projets-hero__pill {
        font-size: 0.74rem;
        padding: 0.32rem 0.7rem;
    }
    .projets-hero__pill strong { font-size: 0.92rem; }

    /* Section header : compteur en haut, reset en bas */
    .projets-grid-section__header {
        flex-direction: column;
        align-items: start;
        gap: var(--space-xs);
    }
    .projets-grid-section__reset {
        margin-top: 0.25rem;
    }
    /* Badge sur tile : un peu plus compact */
    .projet-tile__badge {
        top: 0.7rem; right: 0.7rem;
        font-size: 0.62rem;
        padding: 0.26rem 0.55rem;
    }
    .projet-tile--feature .projet-tile__badge {
        top: var(--space-m); right: var(--space-m);
        font-size: 0.7rem;
        padding: 0.32rem 0.7rem;
    }

    /* Disable Ken Burns sur mobile pour économiser CPU */
    .hero-cine__bg,
    .apropos-hero__bg,
    .domaines-hero__bg,
    .projets-hero__bg,
    .actu-hero__bg,
    .galerie-hero__bg,
    .contact-hero__bg,
    .don-hero__bg {
        animation: none;
    }
    /* Pattern textile désactivé sur mobile (perf) */
    .hero-cine__pattern { opacity: 0.25; }
}

/* ────────────────────────────────────────────────────────────────
   5. SECTIONS DE CONTENU
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .intro,
    .domaines,
    .stats,
    .zones,
    .projet-phare,
    .partenaires,
    .voix-projet,
    .actualites,
    .temoignages,
    .don-cta,
    .home-projets,
    .apropos-mission,
    .apropos-timeline,
    .apropos-vision,
    .apropos-team,
    .apropos-engagements,
    .apropos-cta,
    .axe-block,
    .domaines-cta,
    .projets-approach,
    .projets-grid-section,
    .projets-cta,
    .actu-featured,
    .actu-grid-section,
    .actu-cta,
    .galerie-grid-section,
    .galerie-cta,
    .contact-channels,
    .contact-form-section,
    .contact-info,
    .contact-cta,
    .don-why,
    .don-how,
    .don-impact,
    .don-trust,
    .don-form-section,
    .don-testimonial {
        padding-block: var(--space-xl);
    }
    /* Titres de section moins agressifs */
    .section__title,
    .domaines__header h2,
    .home-zones h2,
    .home-projets h2,
    .home-compteurs h2,
    .home-actualites h2,
    .home-partenaires h2,
    .home-temoignages h2,
    .apropos-mission__title,
    .apropos-timeline__title,
    .apropos-team__title,
    .apropos-engagements__title,
    .don-impact__title,
    .don-why__title,
    .don-how__title,
    .don-modes__title,
    .projets-approach__title,
    .actu-cta__title,
    .contact-channels__title,
    .contact-info__title,
    .contact-cta__title,
    .don-cta h2 {
        font-size: clamp(1.7rem, 6vw, 2.2rem);
        line-height: 1.1;
    }
}

/* ────────────────────────────────────────────────────────────────
   6. MAP signature mobile : pas de sticky, pas de hauteur fixe
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .zones__map {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        order: -1; /* La carte apparaît AVANT la liste sur mobile */
    }
    .zones__map svg { max-height: 50vh; }
    .zones__inner { display: flex; flex-direction: column; }
    /* En mobile, on désactive la mécanique "spotlight" — toutes les zones restent à pleine opacité */
    .zone { opacity: 1; border-left-color: var(--brand-sun); }
    .zones__map .zone-marker .zone-marker__dot {
        fill: var(--brand-sun);
        opacity: 0.9;
    }
}

/* ────────────────────────────────────────────────────────────────
   7. GRILLES — auto 1 col, 2 col fluide
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .grid--2, .grid--3 { grid-template-columns: 1fr !important; }
    .card-grid--3 { grid-template-columns: 1fr !important; gap: var(--space-m); }

    /* Pages : grilles editorial → 1 col mobile */
    .apropos-mission__inner,
    .projets-approach__inner,
    .actu-cta__inner,
    .contact-channels__grid,
    .contact-info__grid,
    .don-form-section__layout,
    .contact-form-section__layout,
    .apropos-team__grid,
    .apropos-cta__inner,
    .don-cta__inner,
    .don-how__steps,
    .don-impact__grid,
    .don-why__list,
    .axe-block__grid,
    .projets-grid,
    .actu-grid,
    .galerie-cta__inner,
    .domaines-cta__inner,
    .publications-grid,
    .publications-cta__inner,
    .publications-cta__actions,
    .single-projet-layout__inner,
    .single-projet-engage__inner,
    .single-projet-related__grid,
    .single-projet-nav__inner {
        grid-template-columns: 1fr !important;
    }
    /* v3.14.45 — Single projet polish mobile */
    .single-projet-hero { min-height: 60vh; }
    .single-projet-hero__inner { padding-block: var(--space-xl) var(--space-l); }
    .single-projet-hero__breadcrumb {
        font-size: 0.66rem;
        margin-bottom: var(--space-m);
        flex-wrap: wrap;
    }
    .single-projet-hero__breadcrumb [aria-current] { max-width: 20ch; }
    .single-projet-hero__bg { animation: none; }
    .single-projet-layout { padding-block: var(--space-2xl); }
    .single-projet-layout__sidebar { position: static !important; top: auto !important; }
    .single-projet-facts { padding: var(--space-m); }
    .single-projet-gallery__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 140px !important;
        gap: var(--space-xs);
    }
    .single-projet-engage { padding-block: var(--space-xl); }
    .single-projet-nav__link {
        padding: var(--space-s) var(--space-m);
        min-height: 64px;
    }
    .single-projet-nav__link--next { text-align: right; }
    .single-projet-nav__title { font-size: 0.88rem; }
    /* Sections publications : padding réduit sur mobile */
    .publications-section { padding-block: var(--space-2xl); }
    .publications-section__title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .publications-toc { padding-block: var(--space-xs); }
    .publications-toc__link {
        padding: 0.4rem 0.7rem;
        font-size: 0.78rem;
    }
    .publications-toc__link em { font-size: 0.62rem; padding: 0.06rem 0.32rem; }
    .publications-media-tabs__btn {
        padding: 0.42rem 0.7rem;
        font-size: 0.78rem;
    }
    .publications-media-tabs__btn em { font-size: 0.62rem; padding: 0.06rem 0.32rem; }
    /* Card publication : icône au-dessus du titre plutôt qu'à gauche pour gagner en largeur */
    .publication-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        gap: var(--space-s);
        padding: var(--space-m);
    }
    .publication-card__icon {
        grid-row: 1;
        width: 48px; height: 60px;
    }
    .publication-card__body { grid-column: 1; }
    .publication-card__cta { grid-column: 1; }
    /* Hero pills publications */
    .publications-hero__pills { gap: 0.35rem; margin-bottom: var(--space-m); }
    .publications-hero__pill { padding: 0.3rem 0.7rem; font-size: 0.74rem; }
    .publications-hero__pill strong { font-size: 0.92rem; }
    /* Media grid sur mobile : 2 colonnes, hauteur plus faible */
    .publications-media-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 140px !important;
        gap: var(--space-xs);
    }
    .publications-media-grid > li:nth-child(7n+3) { grid-column: span 2; }

    /* Aside form : pas de sticky sur mobile, full width au-dessus */
    .don-form-section__aside,
    .contact-form-section__aside,
    .apropos-mission__chapter {
        position: static !important;
        top: auto !important;
    }
}

/* ────────────────────────────────────────────────────────────────
   8. TIMELINE Apropos — mobile : 1 colonne, dot à gauche
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 719px) {
    .timeline__item {
        grid-template-columns: 56px 1fr !important;
        gap: var(--space-s);
    }
    .timeline__year {
        grid-row: 1 !important;
        grid-column: 2 !important;
        font-size: 1.8rem;
        margin-bottom: 0.3rem;
    }
    .timeline__content { grid-column: 2 !important; }
    .timeline__rail { grid-row: 1 / span 2; }
    .timeline__step-title { font-size: 1.1rem; }
}

/* ════════════════════════════════════════════════════════════════
   9. MOBILE TABBAR v3.12 — Bottom navigation app-like (≤ 720 px)
   ──────────────────────────────────────────────────────────────────
   Pattern : 5 onglets en grille égale, pill highlight sur l'item actif,
   le tab Don conserve son accent earth permanent (conversion CTA).
   Safe-area iOS, backdrop blur, dark/light auto via tokens light-dark().
   ════════════════════════════════════════════════════════════════ */

/* Desktop : tabbar masquée. */
@media (min-width: 721px) {
    .mobile-tabbar { display: none; }
}

@media (max-width: 720px) {

    .mobile-tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 2px;
        padding: 6px 6px;
        padding-bottom: max(6px, env(safe-area-inset-bottom, 0));
        background: color-mix(in oklch, var(--bg-paper) 92%, transparent);
        backdrop-filter: saturate(var(--header-saturate, 160%)) blur(18px);
        -webkit-backdrop-filter: saturate(var(--header-saturate, 160%)) blur(18px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -8px 28px oklch(0 0 0 / 0.10);
        /* iOS rendering trick : empêche un sous-pixel transparent qui laisse
           apparaître le contenu sous la tabbar lors du scroll élastique. */
        transform: translateZ(0);
        /* JS pose .is-hidden lors du clavier ouvert ou du scroll-down — slide-out. */
        transition: transform var(--dur-base) var(--ease-out),
                    opacity   var(--dur-fast) var(--ease-out);
    }
    .mobile-tabbar.is-hidden {
        transform: translateY(calc(100% + 16px));
        opacity: 0;
        pointer-events: none;
    }

    .mobile-tabbar__item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px 6px;
        min-height: 56px;
        text-decoration: none;
        color: var(--ink-soft);
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.01em;
        border-radius: 14px;
        background: transparent;
        transition: color var(--dur-fast) var(--ease-out),
                    background var(--dur-base) var(--ease-out),
                    transform var(--dur-fast) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-tabbar__icon {
        flex-shrink: 0;
        transition: transform var(--dur-base) var(--ease-back),
                    stroke var(--dur-fast),
                    fill   var(--dur-fast);
    }
    .mobile-tabbar__label {
        line-height: 1;
        white-space: nowrap;
        opacity: 0.95;
    }

    /* État actif — pill background brand-leaf-soft + texte/icone en brand-leaf-deep */
    .mobile-tabbar__item.is-active {
        color: var(--brand-leaf-text);
        background: color-mix(in oklch, var(--brand-leaf) 14%, transparent);
        font-weight: 600;
    }
    .mobile-tabbar__item.is-active .mobile-tabbar__icon {
        transform: translateY(-1px) scale(1.05);
    }

    /* Press / active feedback (touch) */
    .mobile-tabbar__item:active {
        transform: scale(0.94);
        transition-duration: 80ms;
    }

    /* Focus visible — important pour navigation clavier sur tablette/PWA */
    .mobile-tabbar__item:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: -2px;
    }

    /* ── Onglet Don (CTA) — accent earth permanent, légèrement surélevé.
       Variante : badge "❤" plein, ring bordeaux subtile. */
    .mobile-tabbar__item--cta {
        color: var(--brand-earth-text);
    }
    .mobile-tabbar__item--cta .mobile-tabbar__icon {
        color: var(--brand-earth-text);
        filter: drop-shadow(0 2px 6px color-mix(in oklch, var(--brand-earth) 35%, transparent));
        transform: translateY(-2px) scale(1.08);
    }
    .mobile-tabbar__item--cta .mobile-tabbar__label {
        color: var(--brand-earth-text);
        font-weight: 600;
    }
    /* Don actif : pill earth-soft (au lieu de leaf-soft générique). */
    .mobile-tabbar__item--cta.is-active {
        color: var(--brand-earth-text);
        background: color-mix(in oklch, var(--brand-earth) 16%, transparent);
    }
    .mobile-tabbar__item--cta.is-active .mobile-tabbar__icon,
    .mobile-tabbar__item--cta.is-active .mobile-tabbar__label {
        color: var(--brand-earth-text);
    }

    /* WhatsApp flottant : remonter au-dessus de la tabbar (offset = hauteur barre). */
    .whatsapp-float {
        bottom: calc(76px + env(safe-area-inset-bottom, 0)) !important;
        right: 12px !important;
        z-index: 39;
    }

    /* Body : padding-bottom = hauteur tabbar + safe-area + petite marge. */
    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0));
    }

    /* Sur les pages avec hero full-bleed, on s'assure que le scroll-indicator
       n'est pas masqué par la tabbar. */
    .hero__scroll {
        bottom: calc(76px + env(safe-area-inset-bottom, 0) + 1rem) !important;
    }

    /* Réduire l'animation si l'utilisateur le demande. */
    @media (prefers-reduced-motion: reduce) {
        .mobile-tabbar__item,
        .mobile-tabbar__icon {
            transition: none;
        }
        .mobile-tabbar__item.is-active .mobile-tabbar__icon,
        .mobile-tabbar__item--cta .mobile-tabbar__icon {
            transform: none;
        }
    }
}

/* Très petits écrans (<360 px) : labels en 10 px, padding réduit. */
@media (max-width: 360px) {
    .mobile-tabbar__item {
        font-size: 10px;
        padding: 6px 2px 4px;
    }
    .mobile-tabbar__icon {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ────────────────────────────────────────────────────────────────
   10. CHANNELS (page contact) — pills hero scrollables horizontalement
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .contact-hero__channels {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--space-xs);
        margin-inline: calc(var(--rail) * -1);
        padding-inline: var(--rail);
    }
    .contact-hero__channels::-webkit-scrollbar { display: none; }
    .contact-hero__channel { flex-shrink: 0; }
}

/* ────────────────────────────────────────────────────────────────
   11. LIGHTBOX galerie — mobile fullscreen
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .galerie-lightbox[open] { padding: var(--space-m); }
    .galerie-lightbox__close { top: 0.5rem; right: 0.5rem; width: 40px; height: 40px; }
    .galerie-lightbox__caption { font-size: 0.92rem; }
}

/* ────────────────────────────────────────────────────────────────
   12. FORMULAIRES — touch optimisé
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .field input,
    .field select,
    .field textarea {
        font-size: 16px !important;   /* anti-zoom iOS — déjà dans main.css mais on s'assure */
        min-height: 48px;
        padding: 0.9rem 1rem;
    }
    .radio-inline {
        display: flex !important;
        margin-right: 0;
        margin-bottom: 0.5rem;
        padding: 0.5rem 0;
        font-size: 1rem;
    }
    .radio-inline input { width: 20px; height: 20px; }
    .form__row { gap: var(--space-s); }
}

/* ────────────────────────────────────────────────────────────────
   13. FOOTER mobile — compact
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .site-footer__grid { gap: var(--space-l); }
    .site-footer__signature { font-size: 1.6rem; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ────────────────────────────────────────────────────────────────
   14. ANIMATIONS — désactivation par défaut sur mobile pour perf
   (on garde uniquement les essentielles : hover/focus, hero kicker)
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
    /* On désactive scroll-driven sur mobile pour économiser CPU/GPU
       — la lisibilité reste car opacity:1 par défaut hors animation */
    .reveal,
    .domaine,
    .stat,
    .timeline__item,
    .engagement,
    .axe-block__media,
    .axe-block__body,
    .axe-block__num,
    .axe-block__actions li,
    .projet-tile,
    .actu-card-li,
    .galerie-tile,
    .contact-channel,
    .don-why__item,
    .don-how-step,
    .don-impact__item,
    .don-testimonial__quote {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ────────────────────────────────────────────────────────────────
   15. CURSEUR custom & magnetic buttons — désactivés sur touch
   ──────────────────────────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
    .oms-cursor { display: none !important; }
    .btn { translate: 0 !important; }
    .btn::after { display: none; }
}

/* ────────────────────────────────────────────────────────────────
   16. COOKIE banner mobile — pleine largeur en bas
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cookie-banner {
        inset-inline: 0.5rem !important;
        bottom: 80px !important;   /* au-dessus de la barre d'actions */
        padding: var(--space-s);
        font-size: 0.9rem;
        flex-direction: column;
        align-items: stretch;
    }
    .cookie-banner__actions { width: 100%; display: flex; gap: 0.5rem; }
    .cookie-banner__actions .btn { flex: 1; }
}