/* =====================================================================
   RESPONSIVE GLOBAL — Garde-fous d'adaptation tous écrans
   Groupe Scolaire Sainte Agnès
   Ce fichier se charge APRÈS style.css et corrige l'adaptation
   mobile/tablette de toutes les pages sans modifier le design desktop.
   ===================================================================== */

/* 1. ANTI-DÉBORDEMENT GLOBAL ------------------------------------------
   Empêche toute barre de défilement horizontale (cause n°1 des
   "pages qui débordent" sur téléphone). */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. MÉDIAS FLUIDES ---------------------------------------------------
   Les images, vidéos et iframes ne dépassent jamais leur conteneur. */
img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
}

/* 3. TABLEAUX QUI DÉFILENT -------------------------------------------
   Sur petit écran, un tableau large défile horizontalement dans sa
   propre zone au lieu de casser la page entière. */
table {
    max-width: 100%;
}
.table-responsive, .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 4. TITRES FLUIDES (clamp) ------------------------------------------
   Les grands titres s'adaptent automatiquement entre petit et grand
   écran. clamp(min, idéal, max) = jamais trop gros, jamais trop petit. */
.hero-title {
    font-size: clamp(28px, 7vw, 52px) !important;
    word-wrap: break-word;
}
.cycle-hero-content h1,
.comm-hero-content h1,
.avis-hero-content h1 {
    font-size: clamp(26px, 6.5vw, 58px) !important;
    word-wrap: break-word;
}
.laureats-header h2,
.section-header h2,
.section-title {
    font-size: clamp(24px, 5vw, 40px) !important;
}
.stat-val {
    font-size: clamp(30px, 6vw, 50px) !important;
}

/* Les paragraphes et longs mots ne débordent jamais */
p, h1, h2, h3, h4, li, a, span {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 5. CONTENEURS & SECTIONS -------------------------------------------
   Marge intérieure cohérente sur petit écran. */
@media (max-width: 768px) {
    .container,
    .navbar-container,
    .announcement-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Sections : réduire l'espacement vertical excessif sur mobile */
    section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* Toute grille passe en une seule colonne par défaut sur mobile,
       sauf si une règle plus spécifique a déjà prévu 2 colonnes. */
    .grid-2, .grid-3, .grid-4,
    [class*="grid-cols"] {
        grid-template-columns: 1fr !important;
    }

    /* Les blocs en flex à 2 colonnes s'empilent proprement */
    .row, .two-cols, .split {
        flex-direction: column !important;
    }

    /* Boutons plus faciles à toucher au doigt */
    .btn, button, .cta, input[type="submit"] {
        min-height: 44px;
    }
}

/* 6. TRÈS PETITS ÉCRANS (≤ 400px) ------------------------------------ */
@media (max-width: 400px) {
    body {
        font-size: 15px;
    }
    .container,
    .navbar-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* Formulaires : champs pleine largeur */
    input, select, textarea {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 7. TABLETTES (entre 769px et 1024px) -------------------------------
   Grilles à 4 colonnes deviennent 2 colonnes pour rester lisibles. */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-4,
    [class*="grid-cols-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 8. ZONE TACTILE & LISIBILITÉ ---------------------------------------
   Les liens du menu et icônes restent assez grands pour le doigt. */
@media (max-width: 768px) {
    a, button {
        -webkit-tap-highlight-color: rgba(30, 60, 114, 0.1);
    }
    /* Empêche le zoom involontaire sur iOS quand on tape dans un champ
       (police < 16px déclenche un zoom automatique sur iPhone). */
    input, select, textarea {
        font-size: 16px !important;
    }
}