/* ========================================================= Home Nanny — Responsive mobile (SITE VITRINE uniquement) Chargé en dernier dans : ne s'applique qu'aux petits écrans (<= 991.98px). Le desktop reste inchangé. LOT R1 — Fondations : navbar + footer + garde-fous globaux. (Les lots R2..R5 viendront compléter ce fichier.) ========================================================= */ /* ---------- Garde-fou : pas de scroll horizontal accidentel ---------- */ @media (max-width: 991.98px) { body { overflow-x: hidden; } } /* ============================ NAVBAR ============================ */ @media (max-width: 991.98px) { /* Le container "pilule" : largeur quasi pleine, hauteur auto (au lieu de width:92vw; height:90px; flex-wrap:nowrap figés). */ .navbar .container-fluid { width: 94vw !important; height: auto !important; min-height: 62px; padding: 0.45rem 1rem !important; border-radius: 16px !important; flex-wrap: wrap !important; justify-content: space-between !important; } /* Logo plus petit sur mobile (au lieu de height:5rem) */ .navbar .navbar-brand img, .navbar .navbar-logo img { height: 3rem !important; width: auto !important; } /* Le menu déroulant mobile : fond blanc lisible, sous la barre */ .navbar .navbar-collapse { background: #fff; border-radius: 12px; margin-top: 0.5rem; padding: 0.5rem 0.25rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); width: 100%; } .navbar .navbar-nav .nav-link { padding: 0.6rem 0.85rem !important; } /* Le bloc des deux boutons (Demander un devis / Mon espace) passe en colonne pleine largeur au lieu d'un flex serré. */ .navbar .collapse.navbar-collapse > div[style*="display: flex"] { flex-direction: column !important; width: 100%; gap: 8px !important; margin-top: 6px; } .navbar .navbar-buttons { width: 100%; } .navbar .navbar-buttons .btn { display: block; width: 100%; text-align: center; } } @media (max-width: 575.98px) { .navbar .container-fluid { width: 96vw !important; border-radius: 14px !important; } .navbar .navbar-brand img, .navbar .navbar-logo img { height: 2.6rem !important; } } /* ============================ FOOTER ============================ */ @media (max-width: 767.98px) { /* Rangée du bas (copyright | liens légaux) : empilée + centrée au lieu de d-flex justify-content-between sur une ligne. */ .footer3 .d-flex.justify-content-between { flex-direction: column !important; align-items: center !important; text-align: center; gap: 10px; } .footer3 .footer-copyright, .footer3 .footer-links { text-align: center; } /* Liste de liens du footer : centrée et qui passe à la ligne */ .footer3 .header-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding-left: 0; } .footer3 .row-links { width: 100%; } } /* ================== LOT R2 — Héros (hauteurs) & titres géants ================== */ @media (max-width: 991.98px) { /* Hauteurs de héros assouplies (valeurs vh figées en inline / CSS) */ [style*="min-height: 100vh"] { min-height: 80vh !important; } [style*="min-height: 65vh"] { min-height: 56vh !important; } .screen-default { height: auto !important; min-height: 58vh; } /* Titres géants posés en style inline -> tailles mobiles lisibles. Le `!important` (feuille externe) bat le style inline sans !important, donc le DESKTOP garde ses 4rem / 2.5rem, seul le mobile est réduit. */ [style*="font-size: 4rem"] { font-size: 2.3rem !important; line-height: 1.15 !important; } [style*="font-size: 2.5rem"] { font-size: 1.7rem !important; line-height: 1.2 !important; } } @media (max-width: 575.98px) { [style*="min-height: 100vh"] { min-height: 72vh !important; } [style*="min-height: 65vh"] { min-height: 50vh !important; } .screen-default { min-height: 52vh; } [style*="font-size: 4rem"] { font-size: 1.85rem !important; } [style*="font-size: 2.5rem"] { font-size: 1.45rem !important; } /* Sous-titres en 1.1rem : très légère réduction sur petit écran */ [style*="font-size: 1.1rem"] { font-size: 1rem !important; } } /* ================== LOT R3 — Formulaires & toasts ================== */ @media (max-width: 575.98px) { /* Toast de la page "demande de devis" : min-width:300px figé -> ne déborde plus */ .toast-container { left: 12px; right: 12px; bottom: 12px; } .custom-toast { min-width: 0 !important; max-width: 100% !important; width: 100%; } /* Boutons d'envoi de formulaire : pleine largeur, plus faciles à toucher */ .mbr-form .mbr-section-btn .btn { width: 100%; } } /* ================== LOT R4 — "Suivez-nous" (contact) + garde-fous ================== */ @media (max-width: 767.98px) { /* Section "Suivez-nous" : grille 2 colonnes propre, icône au-dessus du libellé, le tout centré (au lieu d'une longue liste alignée à gauche). */ .cid-v7Rh4YMcDM .item { flex: 0 0 50% !important; max-width: 50% !important; } .cid-v7Rh4YMcDM .item-wrapper { flex-direction: column !important; align-items: center !important; text-align: center; margin-bottom: 1rem; } .cid-v7Rh4YMcDM .mbr-iconfont { font-size: 2.2rem !important; padding-right: 0 !important; margin-bottom: 0.4rem; } .cid-v7Rh4YMcDM .card-box { width: 100%; } .cid-v7Rh4YMcDM .card-text { margin-bottom: 0 !important; } /* Garde-fou images : jamais plus large que l'écran */ img { max-width: 100%; } /* Section "Comment ça marche" (features10) : étapes plus compactes. Cercles 80px -> 60px, glyphe inline 40px -> 26px, marges resserrées, pour éviter une section interminable sur mobile. */ .cid-v7PDpziJrg .item-wrapper { margin-top: 0.4rem !important; margin-bottom: 0.9rem !important; } .cid-v7PDpziJrg .mbr-iconfont { width: 60px !important; height: 60px !important; font-size: 26px !important; margin-bottom: 0.25rem; } .cid-v7PDpziJrg .card-title { margin-bottom: 0.25rem; } }