/* ============================================================================
 * responsive.css — adaptation aux petits écrans (RGA)
 *
 * Chargé EN DERNIER dans css.php, après bootstrap.min.css, bootstrap4.min.css
 * et myStyle.css, pour pouvoir neutraliser les largeurs fixes posées en
 * style="width:100px" directement dans les pages.
 *
 * Ne dépend d'aucune grille Bootstrap : les deux versions étant chargées
 * ensemble, leurs classes de colonnes ne se comportent pas de façon fiable.
 * ==========================================================================*/

/* --- 1. Rien ne déborde jamais horizontalement --------------------------- */
/* Pas d'overflow-x:hidden sur body : cela masquerait un débordement au lieu
   de le corriger, et rendrait le contenu concerné inatteignable. */
img             { max-width: 100%; height: auto; }

/* Le bandeau garde la largeur de 95 % de la version d'origine ; seule sa
   hauteur devient proportionnelle, au lieu d'être forcée à 160 px. */
.bandeau-rga    { display: block; width: 95%; height: auto; margin: 0 auto; }
@media (max-width: 768px) { .bandeau-rga { width: 100%; } }

/* --- 2. Les longs tableaux de consultation défilent au lieu de déborder --- */
@media (max-width: 992px) {
    .mon-tableau,
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- 3. Formulaires : sur téléphone, une cellule par ligne ---------------- */
@media (max-width: 768px) {

    .container, .panel, .panel-body { padding-left: 6px; padding-right: 6px; }
    .panel-heading                  { font-size: 15px !important; line-height: 1.5; }

    /* Les tableaux servent ici de mise en page : on les déplie verticalement. */
    .form-adaptatif table,
    .form-adaptatif tbody,
    .form-adaptatif tr,
    .form-adaptatif td,
    .form-adaptatif th {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
    }

    .form-adaptatif td {
        border: 0 !important;
        border-bottom: 1px solid #e6e6e6 !important;
        padding: 12px 6px !important;
        text-align: center !important;
    }
    .form-adaptatif tr:last-child td:last-child { border-bottom: 0 !important; }

    /* Neutralise les style="width:100px" hérités de la version bureau. */
    .form-adaptatif input[type=text],
    .form-adaptatif input[type=tel],
    .form-adaptatif input[type=number],
    .form-adaptatif input[type=date],
    .form-adaptatif input[type=file],
    .form-adaptatif select {
        width: 100% !important;
        max-width: 340px;
        box-sizing: border-box;
        padding: 9px;
        /* 16px au minimum : en dessous, iOS zoome automatiquement sur le champ
           et l'utilisateur se retrouve décadré. */
        font-size: 16px;
    }

    .form-adaptatif label { display: block; margin-bottom: 4px; }

    .form-adaptatif .btn,
    .form-adaptatif button {
        width: 100%;
        max-width: 340px;
        white-space: normal;   /* les libellés bilingues tiennent sur 2 lignes */
        padding: 12px;
    }
}

/* --- 4. Très petits écrans -------------------------------------------------*/
@media (max-width: 400px) {
    .form-adaptatif td { padding: 10px 3px !important; }
    body               { font-size: 14px; }
}