/* ═══════════════════════════════════════════════════════════════
   ITAG LMS — Correctifs responsivité mobile globaux
   Injecté automatiquement via _mt_guard.php (output buffer)
   Ne pas modifier manuellement les règles !important globales.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Prévenir le scroll horizontal sur toutes les pages */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* 2. Images et médias : jamais plus larges que leur conteneur */
img:not([class*="fi-"]), video, canvas {
    max-width: 100%;
    height: auto;
}

/* 3. Long mots (URLs, codes) : coupure propre */
p, li, td, th, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 4. Tableaux de données : scroll horizontal plutôt que débordement */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 5. Correctifs mobile spécifiques (< 640px) */
@media (max-width: 640px) {

    /* Conteneurs standards ITAG */
    .wrap, .container, .content-wrap, .page-wrap {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Grilles de calcul (calculateurs) */
    .calc-card { padding: 16px !important; }

    /* Inputs et selects : jamais plus larges que l'écran */
    input:not([type="checkbox"]):not([type="radio"]),
    select, textarea {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* 6. Correctifs tablette (< 880px) — déjà couvert par templates simulateur */
@media (max-width: 880px) {
    /* Grille principale : forcer 1 colonne si colonnes fixes > 400px */
    .grid-auto-xl {
        grid-template-columns: 1fr !important;
    }
}