/* ============================================================
   responsive.css — Adaptation mobile (claude 2026-05-13)
   À charger APRÈS style.css et SIT_FASILAIMMO_style.css pour
   pouvoir surcharger les largeurs fixes existantes.
   ============================================================ */

/* Toutes les images deviennent fluides */
img {
    max-width: 100%;
    height: auto;
}

/* Tablette + Mobile (≤ 1000px) */
@media screen and (max-width: 1000px) {
    body {
        min-width: 0;
    }
    #conteneur,
    #backgroundheader,
    #backgroundmenu,
    #MenuDep,
    #centreetdroite,
    #menu_tetiere,
    #pied,
    #bas {
        width: 100% !important;
        max-width: 100%;
        position: relative;
        left: 0;
        right: 0;
        box-sizing: border-box;
    }
    #haut,
    #header,
    #menuhaut,
    #contenu,
    #droite,
    #centre,
    #gauche {
        width: auto !important;
        max-width: 100%;
        float: none !important;
        box-sizing: border-box;
    }
    /* Header : pas de hauteur fixe ni bg noir débordant */
    #header,
    #header780 {
        height: auto !important;
        background-color: transparent !important;
        background-image: none !important;
        min-height: 0 !important;
    }
    /* Bannière header : adaptive */
    #header img,
    #header780 img {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
    }
    /* Menu haut : retour à la ligne */
    #menuhaut {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    #menuhaut li {
        display: inline-block;
        float: none;
    }
    /* Footer (#pied) : pas de hauteur fixe, padding adapté */
    #pied,
    #bas {
        height: auto !important;
        padding: 1em 0.5em !important;
    }
    /* Tableau 3 colonnes du footer : empile les colonnes */
    #pied table,
    #bas table {
        width: 100% !important;
        display: block;
    }
    #pied table tr,
    #bas table tr {
        display: block;
        width: 100%;
    }
    #pied table td,
    #bas table td {
        display: block !important;
        width: 100% !important;
        margin-bottom: 1em;
        padding: 0;
    }
}

/* Mobile (≤ 768px) */
@media screen and (max-width: 768px) {
    /* Header : montre le 780px (plus adapté mobile) */
    #header {
        display: none !important;
    }
    #header780 {
        display: block !important;
        width: 100%;
        height: auto !important;
        background: transparent !important;
    }
    #header780 img {
        width: 100%;
        height: auto;
    }
    /* Background décoratifs masqués sur mobile */
    #backgroundheader,
    #backgroundmenu {
        background: transparent !important;
        height: auto !important;
    }
    /* Menu haut (#haut) : pas de hauteur fixe */
    #haut {
        height: auto !important;
        background-color: #2eaadc;
        padding: 0.3em 0.5em !important;
    }
    /* Colonnes en flux vertical */
    #centre,
    #droite,
    #gauche,
    .mdl_paragraphe2Colonne {
        float: none !important;
        width: 100% !important;
        margin: 0 0 1em 0;
    }
    /* Menu : barres horizontales empilables */
    #haut {
        padding: 0.5em;
    }
    #menuhaut li {
        display: block;
        margin: 2px 0;
    }
    #menuhaut a {
        display: block;
        padding: 0.5em;
        background: #f5f5f5;
        text-decoration: none;
    }
    /* Carte des départements : cachée sur mobile (image fixe 700×500) */
    #carte_fasilannonce {
        display: none;
    }
    /* Recherche : full-width */
    #recherche,
    #recherche form,
    #recherche form input {
        width: 100% !important;
        box-sizing: border-box;
        max-width: 100%;
    }
    /* Tableaux qui débordent : scroll horizontal */
    .paragraphe table,
    table.annonce,
    table.immo,
    table.PRODUIT {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
    /* Image annonce dans listing : limiter */
    .annonce img,
    .immo img,
    .mdl_annonce img,
    .mdl_immo img {
        max-width: 100px;
        height: auto;
    }
    /* Météo widget : masquer (souvent cassé en mobile) */
    .meteo,
    .Weather_table {
        display: none;
    }
    /* Body : padding latéral confort */
    body {
        margin: 0;
        padding: 0;
    }
    /* Footer ou éléments fixes : pas de width fixe */
    #footer,
    .footer {
        width: auto !important;
        max-width: 100%;
        padding: 1em 0.5em;
    }
    /* toTop button repositionné */
    #toTop {
        bottom: 10px !important;
        right: 10px !important;
    }
    /* Forms : inputs plus larges et confortables */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    select,
    textarea {
        max-width: 100%;
        font-size: 16px; /* éviter le zoom iOS sur focus */
        box-sizing: border-box;
    }
}

/* Très petits écrans (≤ 480px) */
@media screen and (max-width: 480px) {
    h1, .h1 { font-size: 1.4em; }
    h2, .h2 { font-size: 1.2em; }
    h3, .h3 { font-size: 1.1em; }
    body, p, td { font-size: 0.95em; }

    /* Cacher la pub bannière trop large si présente */
    .bandeau-pub,
    .pub-haut {
        display: none;
    }
}