/* ============================================================
   responsive.css — Surcouche responsive pour votrequestionnaireNEW.htm
   ============================================================ */

* { box-sizing: border-box; }
body { overflow-x: hidden; }

/* ── TABLETTE (max 900px) ──────────────────────────────────── */
@media screen and (max-width: 900px) {
    table[width="900"], table[width="762"], table[width="339"] {
        width: 100% !important;
    }
    td[width="900"], td[width="762"], td[width="600"], td[width="339"] {
        width: 100% !important;
    }
    td[background] {
        background-size: cover !important;
        background-position: center !important;
    }
}

/* ── MOBILE (max 600px) ───────────────────────────────────── */
@media screen and (max-width: 600px) {

    /* Champs texte et select : écrase les largeurs fixes inline */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"] {
        width: 92% !important;
        max-width: 92% !important;
        font-size: 16px !important;
        margin: 4px 0 !important;
    }

    /* Q9 : select dropdown trop large */
    select {
        width: 92% !important;
        max-width: 92% !important;
        font-size: 15px !important;
    }

    /* Bouton submit pleine largeur */
    input[type="submit"], input[type="button"] {
        width: 92% !important;
        padding: 14px !important;
        font-size: 16px !important;
        margin: 10px 4% !important;
    }

    /* Boutons radio/checkbox plus faciles à toucher */
    input[type="radio"], input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        margin: 6px 4px !important;
    }

    /* ── Q2, Q4, Q6 : tables internes de classement ──────────
       Ces tables <TABLE align="center"> n'ont pas de largeur :
       elles débordent à droite sur mobile.                    */
    table[align="center"] {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    /* Colonne input de classement (petit carré rouge) : taille fixe */
    table[align="center"] td:first-child {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
    }

    /* Colonne texte : prend le reste et coupe proprement */
    table[align="center"] td:last-child {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    /* ── Q7 : tables internes à largeur fixe (456px, 435px) ─ */
    table[width="456"], table[width="435"], table[width="413"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    td[width="454"], td[width="413"] {
        width: auto !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }

    /* ── Q10 : table du bouton d'envoi ──────────────────────── */
    table[cellpadding="10"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Texte général : évite les débordements */
    td, p, font {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    /* Titres de section (bandeaux bleus) */
    font[size="6"] { font-size: 20px !important; }
    font[size="5"] { font-size: 17px !important; }
    font[size="4"] { font-size: 14px !important; }
    font[size="3"] { font-size: 13px !important; }
}

/* ── TRÈS PETIT ÉCRAN (max 380px) ─────────────────────────── */
@media screen and (max-width: 380px) {
    font[size="6"] { font-size: 17px !important; }

    input[type="text"], input[type="email"],
    input[type="tel"], select {
        width: 96% !important;
    }

    input[type="submit"] {
        width: 96% !important;
        margin: 10px 2% !important;
    }
}