/* ==================================================================
   ChargeMSI — Stratégie responsive cohérente (header, mega-menu,
   containers, boutons/espacements, sections 2 colonnes).
   Chargé APRES style.css et responsive.css : ce fichier a la priorité
   sur les anciennes règles ponctuelles pour ces composants.

   Breakpoints de référence :
     Desktop      >= 1200px
     Tablette     768px – 1199.98px
     Mobile       <= 767.98px
     Petit mobile <= 480px
   ================================================================== */

/* ------------------------------------------------------------------
   1. CONTAINERS — padding horizontal cohérent, jamais > 100vw
   ------------------------------------------------------------------ */
html {
   max-width: 100%;
}

@media (max-width: 1199.98px) {
   .container,
   .container-fluid {
      padding-left: 32px !important;
      padding-right: 32px !important;
   }
}

@media (max-width: 767.98px) {
   .container,
   .container-fluid {
      padding-left: 20px !important;
      padding-right: 20px !important;
   }
}

@media (max-width: 480px) {
   .container,
   .container-fluid {
      padding-left: 16px !important;
      padding-right: 16px !important;
   }
}

/* ------------------------------------------------------------------
   2. HEADER / NAVIGATION — le mega-menu desktop disparaît sous 1200px
   ------------------------------------------------------------------ */
.navbar-toggler {
   min-width: 44px;
   min-height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Overlay derrière le drawer mobile/tablette */
.nav-overlay {
   position: fixed;
   inset: 0;
   background: rgba(13, 13, 13, 0.55);
   z-index: 1040;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.25s ease;
}
.nav-overlay.show {
   opacity: 1;
   visibility: visible;
}

/* Empêche le body de scroller quand le drawer est ouvert */
body.nav-open {
   overflow: hidden;
}

.nav-drawer-close {
   display: none;
}

@media (max-width: 1199.98px) {
   .navigation .navbar {
      position: relative;
      padding-left: 0;
      padding-right: 0;
   }

   /* Le panneau devient un drawer off-canvas plein écran (scrollable) */
   .leftmenuitem {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      height: 100dvh;
      width: min(86vw, 380px);
      max-width: 380px;
      background: #fff;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 0;
      padding: 72px 24px 32px;
      box-sizing: border-box;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-shadow: -16px 0 40px rgba(0, 0, 0, 0.22);
      z-index: 1050;
      transform: translateX(100%);
      transition: transform 0.32s ease;
      display: flex !important;
   }
   .leftmenuitem.drawer-open {
      transform: translateX(0);
   }

   .nav-drawer-close {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 16px;
      right: 16px;
      width: 44px;
      height: 44px;
      border: none;
      background: #F2FAF8;
      color: #0d0d0d;
      border-radius: 50%;
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
      z-index: 2;
   }

   /* Le collapse Bootstrap reste toujours affiché en flux normal ici :
      c'est le panneau .leftmenuitem qui gère l'ouverture/fermeture. */
   #navbarNav {
      display: block !important;
      width: 100%;
      max-height: none;
      overflow: visible;
   }

   #menu-wrapper {
      flex-direction: column;
      align-items: stretch !important;
      width: 100%;
      gap: 0;
   }

   .navigation .navbar-expand-xl .navbar-nav .nav-item {
      display: block;
      width: 100%;
      padding: 0;
      border-bottom: 1px solid #EEF3F2;
   }

   .navigation .navbar-expand-xl .navbar-nav .nav-item .nav-link {
      width: 100%;
      min-height: 44px;
      padding: 13px 4px !important;
      display: flex;
      align-items: center;
      font-size: 16px;
      white-space: normal;
   }

   /* Solutions / Fonctionnalités / Ressources deviennent des accordéons */
   .mega-dropdown {
      width: 100%;
   }
   .mega-toggle {
      width: 100%;
      min-height: 44px;
      justify-content: space-between !important;
      cursor: pointer;
   }
   .mega-toggle .arrow-icon {
      flex-shrink: 0;
   }

   .mega-menu,
   .mega-menu.resources-menu,
   .mega-menu.aboutus21 {
      display: none !important;
      position: static !important;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 6px 4px 14px !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      background: #FAFDFC;
   }
   .mega-dropdown.accordion-open > .mega-menu {
      display: block !important;
   }

   /* Les items de la mega-menu "Solutions" passent en liste simple verticale */
   .mega-menu .row {
      display: block !important;
      margin: 0 !important;
   }
   .mega-item.mega-item-5 {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
      display: flex;
      align-items: center;
      gap: 12px;
      text-align: left;
      padding: 8px 4px !important;
      border-bottom: 1px solid #EEF3F2;
   }
   .mega-item.mega-item-5:last-child { border-bottom: none; }
   .mega-item.mega-item-5 a:first-child { flex: 0 0 56px; }
   .mega-img {
      width: 56px !important;
      height: 56px !important;
      margin-bottom: 0 !important;
   }
   .mega-tagline { display: none; }
   .mega-title { font-size: 14.5px; line-height: 1.35; }

   .mega-menu.resources-menu .mega-item-list a,
   .mega-item-list a {
      min-height: 44px;
      white-space: normal !important;
      font-size: 15px;
   }

   .col-md-4.mega-item-list,
   .col-md-12.mega-item-list {
      width: 100%;
      max-width: 100%;
      flex: 0 0 100%;
      padding: 0;
   }

   /* CTA "Demander une démo" bien visible dans le menu mobile */
   .headBtn { display: none; }
   .Headderbutton {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      width: 100%;
      margin-top: 20px;
      padding: 0 !important;
   }
   .Headderbutton a {
      width: 100%;
      min-height: 44px;
      justify-content: center;
      box-sizing: border-box;
   }
}

/* Au-delà de 1200px : comportement desktop d'origine (hover), on
   neutralise toute trace d'état "accordéon" resté ouvert au resize. */
@media (min-width: 1200px) {
   .mega-dropdown.accordion-open > .mega-menu {
      display: none;
   }
   .mega-dropdown:hover > .mega-menu {
      display: block;
   }
}

/* ------------------------------------------------------------------
   3. BOUTONS & ESPACEMENTS — cibles tactiles >= 44px
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
   .hcta,
   .hero-btn,
   .themeBtn,
   a.btn,
   button.btn {
      min-height: 44px;
   }
}

/* ------------------------------------------------------------------
   4. SECTIONS 2 COLONNES (texte | image) — empilement cohérent
   ------------------------------------------------------------------ */
@media (max-width: 1199.98px) {
   .feature-row,
   .feature-row.reverse {
      flex-direction: column;
      gap: 28px;
   }
   .feature-content,
   .feature-image {
      width: 100%;
      max-width: 100%;
      flex: 0 0 100%;
   }

   .problem-row,
   .problem-row.reverse {
      flex-direction: column;
   }
   .problem-row .problem-text,
   .problem-row .problem-img,
   .problem-row.reverse .problem-text,
   .problem-row.reverse .problem-img {
      flex: 0 0 100%;
      max-width: 100%;
      width: 100%;
   }

   .feature-box {
      flex-direction: column;
      align-items: stretch;
   }
   .feature-text,
   .feature-img {
      width: 100%;
   }
}

/* ------------------------------------------------------------------
   5. IMAGES — garde-fous anti-débordement
   ------------------------------------------------------------------ */
img {
   max-width: 100%;
   height: auto;
}

.mega-img,
.feature-image img,
.feature-img img,
.problem-img img,
.lpr-image img {
   max-width: 100%;
}

/* Capture d'écran réelle de l'appli affichée dans le slot d'onglets #feature-image
   (le même emplacement affiche sinon des photos marketing en object-fit:cover) :
   ne jamais la recadrer. */
#feature-image.is-screenshot {
   object-fit: contain !important;
   background: #0b1220;
}

/* ==================================================================
   PASSE DE FINITION MOBILE/TABLETTE — corrections ciblées suite à
   inspection réelle sur téléphone (header trop haut, FAQ massive,
   titres trop gros, formulaire, reCAPTCHA, bouton retour en haut).
   ================================================================== */

/* ------------------------------------------------------------------
   6. HEADER MOBILE — hauteur compacte, logo et hamburger alignés
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
   header#myHeader,
   header#myHeader.sticky {
      padding: 0;
   }
   .navigation .navbar {
      padding: 14px 0 !important;
      min-height: 44px;
   }
   .logo-div {
      flex: 0 0 auto !important;
      display: flex;
      align-items: center;
   }
   .logo-div .logo {
      width: auto !important;
      height: 40px !important;
      max-width: 190px;
   }
}

@media (max-width: 480px) {
   .navigation .navbar {
      padding: 12px 0 !important;
   }
   .logo-div .logo {
      height: 36px !important;
      max-width: 170px;
   }
}

/* Ancres masquées derrière le header sticky (position:fixed) : le JS
   (assets/js/function.js) compense déjà le saut de mise en page via un
   padding-top sur le body pendant le scroll, mais un saut natif vers une
   ancre (clic direct sur un lien #hash, navigateur) doit aussi tenir
   compte de cette hauteur réservée. */
@media (max-width: 1199.98px) {
   section[id],
   div[id].hero-section {
      scroll-margin-top: 90px;
   }
}

/* ------------------------------------------------------------------
   7. FAQ MOBILE — densité réduite (la version desktop n'est pas touchée)
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
   .faq-cont .card {
      border-radius: 20px;
      margin: 10px 0;
   }
   .faq-cont .card-header button {
      padding: 18px 20px;
      font-size: clamp(20px, 5.5vw, 24px);
      line-height: 1.25;
      min-height: 0;
      gap: 12px;
   }
   .faq-cont .card-header button:not(.collapsed) {
      border-radius: 20px 20px 0 0;
   }
   .faq-cont .card-header button.collapsed {
      border-radius: 20px;
   }
   .faq-cont .card-header button span:last-child i {
      font-size: 20px;
   }
   .faq-cont .card-body {
      padding: 0 20px 20px;
      font-size: 17px;
      line-height: 1.55;
   }
}

/* ------------------------------------------------------------------
   8. TITRES DE SECTION — clamp() au lieu de tailles fixes 30-50px
   (composants partagés : sectionHeading, formheading, featuresMaintitle,
   hero-section legacy des pages solution/features, cartes de section...)
   Desktop (>=1200px) non touché : ces règles ne s'appliquent qu'en
   tablette/mobile.
   ------------------------------------------------------------------ */
@media (max-width: 1199.98px) {
   .sectionHeading,
   .trans-sect .sectionHeading,
   h2.sectionHeading.FAQ,
   .pillerhading,
   .how-left h2,
   .featuresMaintitle,
   section#whychooseus h6.sectionHeading.secondsectionheding.whyhading,
   .formheading,
   .hero-section h1,
   .section-title h2,
   .hero-content h2,
   .section-title,
   .lpr-content h2,
   .features-section h2,
   .overview h2,
   .container.newsletter-container1 h2,
   section.hero-section3 h2,
   section.benefits-section h2,
   .newsletter-text h2,
   .bannerleft h2,
   .pricingsecondtitle,
   .Trustcharge span,
   .package h4,
   .secondsectionheding h4,
   .section2heding h4 {
      font-size: clamp(1.75rem, 6.5vw, 2.25rem) !important;
      line-height: 1.18 !important;
   }

   .step-cont h3,
   .problem-text h3,
   .feature-content h3,
   .sub-heading,
   .package h3,
   .right-title,
   h3.pricingLastParegraph,
   .overlay h3,
   .bottom-list h4,
   .stepHeading,
   h3#feature-title {
      font-size: clamp(1.35rem, 5.5vw, 1.7rem) !important;
      line-height: 1.22 !important;
   }

}

/* ------------------------------------------------------------------
   9. PARAGRAPHES — lisibilité, alignement à gauche pour les textes longs
   ------------------------------------------------------------------ */

/* Carte à onglets "Gestion de Flotte / CPO / Parkings..." (accueil) :
   l'image, le titre (#tab-title) et le texte (#tab-text) sont déjà
   recentrés en mobile par des règles existantes (responsive.css), mais
   le bouton "Explorez encore" restait aligné à gauche par défaut,
   créant un décalage visuel avec le reste de la carte. On centre le
   conteneur entier pour que tous ses enfants soient cohérents. */
@media (max-width: 767.98px) {
   .content-area {
      text-align: center;
   }
}

@media (max-width: 767.98px) {
   .hero-section .description,
   .hero-section .subheading,
   .cnt-cont p,
   p.ulunderp,
   .whychoositems p,
   .whychoositems h4 {
      font-size: 17px !important;
      line-height: 1.6 !important;
      text-align: left !important;
   }
}

/* ------------------------------------------------------------------
   10. FORMULAIRE CONTACT — case RGPD alignée correctement (flex),
   au lieu du positionnement absolu Bootstrap par défaut cassé par
   .form-check{padding:0}.
   ------------------------------------------------------------------ */
.form-check {
   display: flex !important;
   align-items: flex-start !important;
   gap: 12px !important;
   padding: 0 !important;
}
/* Rendu natif du checkbox non fiable selon les navigateurs/appareils (cf.
   .cnt-cont input plus bas, pensé pour les champs texte, qui l'agrandissait
   aussi) : on reprend entièrement son dessin pour garantir une taille fixe
   quel que soit le contexte, plutôt que de dépendre du style natif OS. */
input.form-check-input[type="checkbox"] {
   -webkit-appearance: none;
   appearance: none;
   position: static !important;
   flex: 0 0 18px !important;
   width: 18px !important;
   height: 18px !important;
   min-width: 18px !important;
   max-width: 18px !important;
   margin: 3px 0 0 0 !important;
   padding: 0 !important;
   border: 2px solid #b9c4c2;
   border-radius: 4px;
   background: #fff;
   box-sizing: border-box;
   cursor: pointer;
}
input.form-check-input[type="checkbox"]:checked {
   background: #1BA9A5;
   border-color: #1BA9A5;
}
input.form-check-input[type="checkbox"]:checked::after {
   content: "";
   display: block;
   width: 4px;
   height: 8px;
   margin: 1px auto 0;
   border: solid #fff;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}
.form-check-label {
   padding-left: 0 !important;
   text-align: left !important;
   flex: 1 1 auto;
   min-width: 0;
}

@media (max-width: 767.98px) {
   .form-check-label {
      font-size: 15.5px;
      line-height: 1.45;
   }
}

/* Conteneur de formulaire : jamais de largeur fixe, jamais de débordement */
@media (max-width: 767.98px) {
   .cnt-cont form,
   #contact-form {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
   }
   .cnt-cont input:not([type="checkbox"]):not([type="radio"]),
   .cnt-cont textarea,
   .cnt-cont .form-group select,
   .form-control {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
   }
}

/* ------------------------------------------------------------------
   11. RECAPTCHA — ne doit jamais dépasser du formulaire sur petit écran.
   Le widget reCAPTCHA v2 standard fait ~304px de large (fixe, imposé par
   Google) : sous ~400px de large, le conteneur du formulaire (colonne
   Bootstrap avec gouttière) n'offre plus assez de place. On réduit alors
   visuellement le widget via transform (ne change pas son mode de rendu,
   donc n'affecte pas la logique de validation existante).
   ------------------------------------------------------------------ */
@media (max-width: 420px) {
   .g-recaptcha {
      transform: scale(0.75);
      transform-origin: left top;
      width: 228px;
      height: 60px;
      overflow: hidden;
   }
}

/* Google injecte le popup de challenge reCAPTCHA ("bframe") directement en
   enfant de <body>, en position:fixed avec une largeur fixe (~445px) non
   responsive — indépendamment de la taille de l'écran. Il reste
   visibility:hidden tant qu'aucun défi n'est déclenché, mais contribue déjà
   à la largeur scrollable de la page. Contenu cross-origin (impossible à
   restructurer depuis notre CSS) : on se contente de plafonner sa largeur
   à la largeur du viewport pour qu'il ne puisse jamais dépasser, y compris
   si l'utilisateur déclenche réellement le défi visuel. */
iframe[src*="google.com/recaptcha"] {
   max-width: 100vw !important;
}
body div:has(> iframe[src*="recaptcha/api2/bframe"]) {
   max-width: 100vw !important;
   left: 0 !important;
   right: 0 !important;
}

/* ------------------------------------------------------------------
   12. BOUTON "RETOUR EN HAUT" — masqué sur smartphone (il masquait du
   contenu et apporte moins de valeur que l'espace qu'il prend ; conservé
   sur tablette/desktop).
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
   #button {
      display: none !important;
   }
}

/* ------------------------------------------------------------------
   13. ESPACEMENTS DE SECTION — cohérence, éviter les gros blancs hérités
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
   section {
      padding: 48px 0;
   }
   .hero-section {
      padding: 56px 20px;
   }
   .leftrighttab {
      padding-top: 48px;
   }
}