/*
 * custom-fixes.css — Corrections visuelles et responsive
 * Memoire-technique.fr — Thème Royal
 * -------------------------------------------------------
 */


/* ============================================================
   FIX 1 : BANDE BLEUE — Fond du body
   -------------------------------------------------------
   Le Customizer a défini body { background: #4e78ae } (couleur
   primaire du thème). Ce bleu apparaît dans les interstices
   entre sections.

   On utilise le NOIR (#000) plutôt que le blanc pour deux raisons :
   1. Le slider hero (.slider.fullscreen) est position:absolute
      z-index:-1 et transparent — la section .intro doit rester
      SANS fond opaque pour laisser le slider visible.
   2. Le corps de la page vaut #000 uniquement là où il transparaît
      (= l'écart de ~60px en bas du hero, entre la fin du slider
      et la fin de la section .intro). Le noir se fond parfaitement
      avec le bas de l'image des grues.
   3. Partout ailleurs les sections ont leur propre fond blanc/gris
      qui couvre le body, donc #000 ne gêne pas.
   ============================================================ */
body {
    background-color: #000000 !important;
}



/* ============================================================
   FIX 3 : NAVIGATION MOBILE
   -------------------------------------------------------
   Sur mobile (<768px), le menu doit se replier derrière
   le bouton hamburger Bootstrap. On s'assure que le toggle
   est visible et que le fond de la navbar est lisible.
   ============================================================ */
@media (max-width: 767px) {

    /* Affiche le bouton hamburger sur mobile */
    .navbar-toggle {
        display: block !important;
        margin-top: 8px;
        margin-bottom: 8px;
        margin-right: 10px;
    }

    /* Masque le menu horizontal et empile les liens */
    .navbar-collapse {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .navbar-nav {
        float: none !important;
        margin: 0;
    }

    .navbar-nav > li {
        float: none !important;
        text-align: left;
    }

    .navbar-nav > li > a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 15px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Fond semi-opaque pour rendre les liens lisibles sur l'image */
    .navbar.floating {
        background-color: rgba(0, 0, 0, 0.85) !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* Logo adapté mobile */
    .navbar-brand {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .navbar-brand img {
        max-height: 40px !important;
        width: auto !important;
    }
}


/* ============================================================
   FIX 4 : SECTION HERO RESPONSIVE
   -------------------------------------------------------
   Le titre et le sous-titre sont trop grands sur petits écrans.
   ============================================================ */
@media (max-width: 767px) {

    .intro .content h1,
    .intro .content .h1 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px;
    }

    .intro .content h2,
    .intro .content .h2 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .intro .content p {
        font-size: 15px;
    }

    .intro .content {
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
    }

    /* Bouton CTA centré */
    .intro .content .btn {
        display: block;
        width: fit-content;
        margin: 20px auto 0;
    }
}


/* ============================================================
   FIX 5 : PARALLAXE SUR IOS / MOBILE
   -------------------------------------------------------
   background-attachment: fixed ne fonctionne pas correctement
   sur iOS Safari et certains Android. On le désactive en
   mobile pour éviter les sauts ou zones blanches.
   ============================================================ */
@media (max-width: 991px) {

    .section.parallax,
    .section.parallax .parallax-overlay {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}


/* ============================================================
   FIX 6 : FORMULAIRE FORMINATOR RESPONSIVE
   -------------------------------------------------------
   Les colonnes du formulaire multi-étapes débordent sur
   les petits écrans.
   ============================================================ */
@media (max-width: 767px) {

    .forminator-row {
        flex-wrap: wrap !important;
    }

    .forminator-row > [class*="forminator-col"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-bottom: 10px;
    }

    /* Options radio/checkbox : 1 colonne sur mobile */
    .forminator-multi-row {
        flex-direction: column !important;
    }

    .forminator-multi-row .forminator-checkbox-options,
    .forminator-multi-row .forminator-radio-options {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Bouton suivant/précédent centré */
    .forminator-pagination--nav {
        display: flex;
        justify-content: center;
        gap: 10px;
    }
}


/* ============================================================
   FIX 7 : SECTIONS "POURQUOI NOUS CHOISIR" ET ÉTAPES
   -------------------------------------------------------
   Sur mobile les colonnes de services s'empilent mal.
   ============================================================ */
@media (max-width: 767px) {

    /* Icônes de services : espacement vertical entre items */
    .services {
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .services:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    /* Étapes numérotées : espace entre chaque step */
    .work-process .step,
    .work-process .col-sm-3 {
        margin-bottom: 40px;
        text-align: center;
    }
}


/* ============================================================
   FIX 8 : TARIFS RESPONSIVE
   -------------------------------------------------------
   Les 3 cartes tarifaires s'empilent proprement sur mobile.
   ============================================================ */
@media (max-width: 767px) {

    .pricing-tables .plan {
        margin-bottom: 25px;
        margin-left: auto;
        margin-right: auto;
        max-width: 360px;
    }
}


/* ============================================================
   FIX 9 : FOOTER RESPONSIVE
   -------------------------------------------------------
   Footer centré sur mobile (déjà géré en partie par media.css,
   mais on s'assure que le logo et le copyright sont propres).
   ============================================================ */
@media (max-width: 767px) {

    .footer {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .footer img {
        max-width: 160px;
        height: auto;
    }
}