/*  Univers Auto — corrections mobile (retours client)
    Même série de correctifs que la maquette 1, adaptée à la structure de la
    maquette 2 (hero style3 avec voiture en débord, about-company-two, funfacts,
    titres Archivo Black en capitales).
    Chargé en dernier dans le <head>, après main.css, archivo.css et les blocs
    <style> existants. Tout est dans @media (max-width:767px) : desktop intact. */

@media (max-width: 767px) {

    /* ------------------------------------------------------------------
       1. Texte des paragraphes en blanc
       Le gris #9A9A9A (--color-three) manquait de contraste.
       Portée limitée au thème sombre : en mode clair light.css garde
       volontairement un texte foncé sur fond blanc.
       ------------------------------------------------------------------ */
    body:not(.theme-style--light) .wptb-item--description,
    body:not(.theme-style--light) .wptb-heading .wptb-item--description,
    body:not(.theme-style--light) .wptb-image-box1 .wptb-item--description,
    body:not(.theme-style--light) .wptb-image-box2 .wptb-item--description,
    body:not(.theme-style--light) .wptb-image-box3 .wptb-item--description,
    body:not(.theme-style--light) .wptb-icon-box1 .wptb-item--description,
    body:not(.theme-style--light) .wptb-icon-box2 .wptb-item--description,
    body:not(.theme-style--light) .wptb-about-company-two .wptb-item--description,
    body:not(.theme-style--light) .wptb-counter1 .wptb-item--text,
    body:not(.theme-style--light) .blog-details .fulltext p,
    body:not(.theme-style--light) .blog-details .post-content p,
    body:not(.theme-style--light) .blog-details ul.point-order li,
    body:not(.theme-style--light) .widget .wptb-office .wptb-item--subtitle,
    /* ces titres de carte étaient en #9A9A9A, donc plus ternes que le
       paragraphe qu'ils coiffent une fois celui-ci passé en blanc */
    body:not(.theme-style--light) .wptb-icon-box2 .wptb-item--title {
        color: #fff;
    }

    /* ------------------------------------------------------------------
       2. Bannière de page trop haute (200px/100px hérités de responsive.css)
       Contrairement à la maquette 1, le titre de la bannière est générique
       (« Détails du service ») et ne fait pas doublon avec le <h1> du
       contenu : on garde les deux, on réduit seulement la hauteur.
       ------------------------------------------------------------------ */
    .wptb-page-heading .wptb-item--inner {
        padding: 118px 0 38px;
    }
    .wptb-page-heading .wptb-item--title {
        font-size: 27px;
        line-height: 1.16;
        padding: 0 8px;
    }
    .wptb-breadcrumb {
        font-size: 13px;
    }

    /* ------------------------------------------------------------------
       3. Rythme vertical : les sections respiraient sur 115px haut/bas.
       Le hero est exclu : son débord de voiture dépend de sa propre marge
       basse définie dans le bloc <style> de la page.
       ------------------------------------------------------------------ */
    section:not(.wptb-slider),
    .section:not(.wptb-slider) {
        padding: 46px 0;
    }
    .pd-bottom-300 {
        padding-bottom: 56px;
    }
    .mr-top-100 {
        margin-top: 46px;
    }
    .mr-bottom-90 {
        margin-bottom: 38px;
    }
    .blog-details .block-gallery {
        margin-bottom: 22px;
    }

    /* Le bandeau rouge du footer est en position:absolute et déborde vers le
       haut (bottom: calc(100% - 90px)) ; le thème lui réservait la place avec
       les 300px de .pd-bottom-300. Sur mobile on le remet dans le flux :
       plus de chevauchement, et plus besoin d'un énorme espace vide. */
    .wptb-banner3 {
        position: static;
        padding: 26px 22px;
        margin-bottom: 34px;
    }
    .footer .footer--inner {
        padding-top: 0;
        padding-bottom: 46px;
    }

    /* ------------------------------------------------------------------
       4. Boutons peu lisibles
       - .btn-three.black (pages services) : noir pur sur carte sombre, le
         rouge n'apparaît qu'au :hover, qui ne se déclenche pas au doigt.
       - « En savoir plus » des cartes services : lien texte #9A9A9A posé
         sur une photo sombre.
       ------------------------------------------------------------------ */
    .btn-three.black {
        background-color: var(--color-one);
        color: var(--color-white);
        min-width: 100%;
        height: 54px;
    }
    .wptb-service-one .btn-three,
    .wptb-service-one .btn-three .text-first,
    .wptb-service-one .btn-three .text-second {
        color: #fff;
    }

    /* ------------------------------------------------------------------
       5. Boutons rouges : le carré de l'icône était gris et semblait
       détaché du bouton.
       ------------------------------------------------------------------ */
    .btn-two .text-second,
    .btn-two.white .text-second,
    .btn-two.black .text-second,
    .btn-two.gray .text-second {
        background-color: #A80005;
    }

    /* ------------------------------------------------------------------
       6. Encart rouge « Les meilleurs mécaniciens » (colonne latérale des
       pages service) : sur mobile il tombe juste au-dessus du bandeau
       « Appelez Univers Auto » du footer — même rouge, même numéro.
       ------------------------------------------------------------------ */
    .wptb-banner2 {
        display: none;
    }

    /* ------------------------------------------------------------------
       7. Le sélecteur de thème flottait par-dessus les titres
       ------------------------------------------------------------------ */
    #mode_switcher {
        right: 12px;
        top: auto;
        bottom: 96px;
    }
    #mode_switcher span {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }

    /* ------------------------------------------------------------------
       8. Formulaire devis : confort de saisie
       ------------------------------------------------------------------ */
    .ua-rdv {
        padding: 32px 22px 40px;
    }
    .ua-rdv .ua-grid {
        grid-template-columns: 1fr;
    }

    /* ------------------------------------------------------------------
       9. Carte Google : blog.css impose min-height:500px à tous les iframe,
       sans le neutraliser la hauteur ci-dessous n'a aucun effet.
       ------------------------------------------------------------------ */
    .gmapbox .map,
    .gmapbox iframe.map {
        height: 320px;
        min-height: 0;
    }
    .gmapbox .wptb-office-time {
        position: static;
        width: 100%;
        margin-top: 18px;
        transform: none;
    }
}
