/* ============================================================
   LIBOTA - responsive.css
   Tout le responsive du site est regroupé ici.
   À charger APRÈS base.css, components.css et le CSS de page.
   Points de rupture :
     - 980px : tablette paysage
     - 860px : bascule menu mobile
     - 620px : téléphone
   ============================================================ */


/* ------------------------------------------------------------
   Tablette ( <= 980px )
   ------------------------------------------------------------ */
@media (max-width: 980px) {

    /* Grilles à 3 colonnes -> 2 colonnes */
    .grille-3 {
        grid-template-columns: 1fr 1fr;
    }

    /* Grilles à 4 colonnes -> 2 colonnes */
    .grille-4 {
        grid-template-columns: 1fr 1fr;
    }

    /* Blocs en deux colonnes -> empilés */
    .grille-2-deseq,
    .grille-mission,
    .grille-contact,
    .transparence-grille,
    .parcours-grille {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Collage du parcours : on désactive le sticky une fois empilé */
    .parcours-photos {
        position: static;
        top: auto;
    }

    /* Domaines d'action : 3 -> 2 colonnes */
    .domaines {
        grid-template-columns: 1fr 1fr;
    }
}


/* ------------------------------------------------------------
   Bascule menu mobile ( <= 860px )
   ------------------------------------------------------------ */
@media (max-width: 860px) {

    /* On masque la navigation bureau, on montre le burger */
    .nav {
        display: none;
    }

    .burger {
        display: flex;
    }

    /* Le bouton « don » du header laisse la place au burger */
    .entete .btn-don-header {
        display: none;
    }
}


/* ------------------------------------------------------------
   Téléphone ( <= 620px )
   ------------------------------------------------------------ */
@media (max-width: 620px) {

    /* Toutes les grilles passent en une seule colonne */
    .grille-3,
    .grille-4,
    .domaines,
    .pied-grille {
        grid-template-columns: 1fr;
    }

    /* Pied de page : plus d'air entre les colonnes empilées */
    .pied-grille {
        gap: 36px;
    }

    /* Bandes de statistiques : 2 colonnes au lieu de 4 */
    .stats-bande {
        grid-template-columns: 1fr 1fr;
    }

    /* Réduction des marges de section */
    .section {
        padding: clamp(56px, 14vw, 80px) 20px;
    }

    /* Fenêtre de don : montants sur 2 colonnes */
    .don-montants {
        grid-template-columns: 1fr 1fr;
    }

    /* Bannière cookies : passage en colonne */
    .cookies {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .cookies-actions {
        width: 100%;
    }

    .cookies-actions button {
        flex: 1;
    }
}