/* ============================================================
   responsive.css — compatibilité mobile globale (civilisation)
   Objectif : rendre les pages utilisables sur téléphone SANS
   casser le rendu desktop. La majorité des règles agressives
   sont sous @media (max-width: 768px).
   ============================================================ */

/* Médias toujours fluides (sans risque sur desktop) */
img, video, canvas, svg, iframe {
    max-width: 100%;
    height: auto;
}

/* ---------- Téléphones & petites tablettes ---------- */
@media (max-width: 768px) {

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Beaucoup de pages forcent height:100vh + flex center :
       on libère le défilement vertical et on coupe le débordement latéral. */
    body {
        height: auto !important;
        min-height: 100vh;
        overflow-x: hidden;
    }

    /* Rien ne doit dépasser la largeur de l'écran */
    body > * {
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* Tableaux : défilement horizontal au lieu de casser la mise en page */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Largeurs fixes inline les plus courantes → fluides */
    [style*="width: 340px"], [style*="width:340px"],
    [style*="width: 380px"], [style*="width:380px"],
    [style*="width: 420px"], [style*="width:420px"],
    [style*="width: 480px"], [style*="width:480px"],
    [style*="width: 600px"], [style*="width:600px"],
    [style*="width: 680px"], [style*="width:680px"] {
        width: auto !important;
        max-width: 95vw !important;
    }

    /* Conteneurs nommés génériques : padding réduit + largeur fluide */
    .container, .card, .box, .panel, .modal, main, section, article {
        max-width: 95vw !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box;
    }

    /* Champs : 16px évite le zoom automatique iOS, et cibles tactiles + grandes */
    input, select, textarea, button {
        font-size: 16px !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    button, input[type=submit], input[type=button], .btn, a.button {
        min-height: 42px;
    }

    /* Grilles flex/grid : passage en colonne si elles débordent */
    .row, .flex-row, .grid {
        flex-wrap: wrap;
    }
}

/* ---------- Très petits écrans ---------- */
@media (max-width: 420px) {
    body {
        font-size: 0.95em;
    }
}