/* ===================================================
   responsive-fix.css — Correctifs responsive mobile
   Diagnostic Mérule Nord / Pas-de-Calais
   =================================================== */

/* --- Option A : Conteneur élargi à 1200px (réduction des bandes blanches latérales) ---
   Le CSS d'origine fixe .contenu à 960px avec margin:0 auto, ce qui crée des bandes
   blanches sur les écrans larges. On passe à 1200px fixe centré, standard moderne. --- */
@media (min-width: 980px) {
    .contenu {
        width: 1200px !important;
        max-width: 98% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
    /* Le menu entete suit aussi la largeur élargie */
    #menu-entete .contenu,
    #entete .contenu {
        width: 1200px !important;
        max-width: 98% !important;
    }
    /* La banniere image suit la largeur élargie */
    #menu-entete.menuClassic .menuCont > ul > li:first-child img {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* --- Correction menu desktop : les 5 liens (Diagnostic Mérule, Diagnostic Immobilier,
   Photos de Champignons, Blog, Devis Gratuit) tiennent sur une seule ligne.
   Solution : bannière en display:block sur sa propre ligne + réduction légère
   de la taille de police (0.95em) et du padding (5px) des liens. --- */
@media (min-width: 769px) {
    /* Bannière : occupe sa propre ligne, ne partage plus avec les liens */
    #menu-entete.menuClassic .menuCont > ul > li:first-child {
        display: block !important;
        width: 100% !important;
    }
    #menu-entete.menuClassic .menuCont > ul > li:first-child img {
        width: 100% !important;
        max-width: 900px !important;
        height: auto !important;
    }
    /* Liens de navigation : taille augmentée (1.2em) grâce au conteneur élargi à 1200px */
    #menu-entete.menuClassic .menuCont > ul > li a.niv-1 {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 1.2em !important;
    }
}

/* --- Règle de base : toutes les images s'adaptent au conteneur --- */
img {
    max-width: 100%;
    height: auto;
}

/* --- Image bannière (tarif-diagnostic-immobilier.png) : 900px fixe → fluide --- */
#menu-entete img[width="900"] {
    width: 100%;
    height: auto;
    max-width: 900px;
}

/* --- Images des articles de blog : float left sur desktop, centré sur mobile --- */
@media (max-width: 568px) {
    .col-princ img[align="left"] {
        float: none !important;
        display: block;
        margin: 0 auto 15px auto !important;
        width: 100% !important;
        max-width: 400px;
        height: auto !important;
    }
}

/* --- Texte justifié : désactivé sur mobile (lisibilité) --- */
@media (max-width: 568px) {
    div[style*="text-align:justify"] {
        text-align: left !important;
    }
}

/* --- Tableau des diagnostics immobiliers : scroll horizontal sur mobile --- */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Bouton devis : taille adaptée sur mobile --- */
@media (max-width: 568px) {
    .col-princ div[align="center"] img,
    .bloc-texte div[align="center"] img {
        width: 80% !important;
        max-width: 200px;
        height: auto !important;
    }
}

/* --- Numéro de téléphone cliquable : taille lisible sur mobile --- */
@media (max-width: 768px) {
    .num, .inBlock.tel, span[itemprop="telephone"] {
        font-size: 1.1em;
    }
    a.telephone {
        padding: 8px 0;
        display: inline-block;
    }
}

/* --- Correction user-scalable pour iOS (accessibilité) ---
   Note : user-scalable=no est dans le HTML, ce CSS ne peut pas l'overrider
   mais on s'assure que les éléments interactifs ont une taille minimale de 44px (Apple HIG) */
a, button, input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* --- Liens du maillage interne (villes voisines) : meilleure lisibilité mobile --- */
@media (max-width: 568px) {
    .col-gauche a, .col-gauche p {
        font-size: 0.95em;
        line-height: 1.6;
    }
}

/* --- Aside (colonne gauche) : passe en dessous du contenu principal sur mobile --- */
@media (max-width: 768px) {
    .col-gauche {
        width: 100% !important;
        float: none !important;
        clear: both;
        margin-top: 20px;
    }
    .col-princ {
        width: 100% !important;
        float: none !important;
    }
}

/* --- Header : espacement sur petits écrans --- */
@media (max-width: 568px) {
    #entete .contenu {
        padding: 5px;
    }
    .hgroup .infos {
        font-size: 0.9em;
    }
}