/* ===================================================================
   MOBILE CRITICAL FIXES - Centre Reed
   
   Ce fichier corrige les problèmes CRITIQUES identifiés dans le
   diagnostic mobile vs desktop.
   
   À charger EN DERNIER, après tous les autres CSS :
   <link href="css/mobile-critical-fixes.css" rel="stylesheet">
   
   Date: 2025-11-03
   =================================================================== */

/* ===================================================================
   1. PRÉVENTION DÉBORDEMENTS HORIZONTAUX
   =================================================================== */

/* Empêcher tout débordement horizontal */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* S'assurer que tous les éléments respectent la box-sizing */
* {
  box-sizing: border-box !important;
}

/* Forcer les images à respecter leur conteneur */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* ===================================================================
   2. CORRECTION POSITIONS ABSOLUES PROBLÉMATIQUES
   =================================================================== */

@media screen and (max-width: 991px) {
  /* Tablette : Corriger les positions extrêmes */
  .paragraph.about-hero {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
  }
  
  .button-primary {
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }
  
  .button-primary.about-hero {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media screen and (max-width: 767px) {
  /* Mobile : Forcer toutes les positions problématiques en relative */
  .button-primary,
  .button-secondary,
  .paragraph.about-hero,
  .title.about-hero,
  .image.mission._1 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
  }
  
  /* S'assurer que les boutons ne débordent pas */
  .button-primary {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ===================================================================
   3. CORRECTION LARGEURS FIXES
   =================================================================== */

@media screen and (max-width: 991px) {
  /* Forcer les éléments avec width fixe à respecter le viewport */
  [style*="width"] {
    max-width: 100% !important;
  }
  
  /* Conteneurs */
  .container-default,
  .w-container {
    max-width: 100% !important;
    padding-left: clamp(16px, 4vw, 24px) !important;
    padding-right: clamp(16px, 4vw, 24px) !important;
  }
}

/* ===================================================================
   4. CORRECTION IMAGES CAROUSEL/CARDS
   =================================================================== */

@media screen and (max-width: 767px) {
  /* Images du carousel vertical */
  .vc-card-media img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    object-fit: cover !important;
  }
  
  /* Images des cartes de services */
  .image-wrapper.card-courses-category {
    height: auto !important;
    min-height: 200px !important;
  }
  
  .image.card-courses-category {
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    object-fit: cover !important;
  }
  
  /* Images Hero */
  .image.home-hero,
  .image-wrapper.home-about img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ===================================================================
   5. CORRECTION GRILLES RESPONSIVE
   =================================================================== */

@media screen and (max-width: 767px) {
  /* Forcer toutes les grilles en 1 colonne sur mobile */
  .w-layout-grid,
  .courses-categories-grid,
  .perks-grid,
  .values-grid,
  .blog-section-grid,
  .footer-content,
  .footer-nav-main-wrapper {
    grid-template-columns: 1fr !important;
  }
  
  /* Réduire les gaps pour mobile */
  .w-layout-grid,
  .courses-categories-grid,
  .perks-grid,
  .values-grid {
    gap: clamp(16px, 3vw, 24px) !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  /* Tablette : 2 colonnes pour certains grids */
  .courses-categories-grid,
  .values-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===================================================================
   6. CORRECTION NAVIGATION MOBILE
   =================================================================== */

@media screen and (max-width: 991px) {
  /* S'assurer que le menu mobile fonctionne */
  .nav-menu {
    width: 100% !important;
  }
  
  .header-navigation {
    width: 100% !important;
  }
  
  .nav-link {
    width: 100% !important;
    text-align: left !important;
    padding: 12px 16px !important;
  }
  
  /* Dropdown mobile */
  .dropdown-menu {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 8px !important;
  }
}

/* ===================================================================
   7. CORRECTION BOUTONS EMPILÉS
   =================================================================== */

@media screen and (max-width: 767px) {
  /* Forcer les groupes de boutons en colonne */
  ._2-buttons,
  ._2-buttons._2buttons-edit {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  
  ._2-buttons .button-primary,
  ._2-buttons .button-secondary,
  ._2-buttons .hero-eq {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
    position: relative !important;
  }
  
  .button-2-buttons {
    margin-right: 0 !important;
    margin-bottom: 12px !important;
  }
  
  .button-2-buttons:last-child {
    margin-bottom: 0 !important;
  }
}

/* ===================================================================
   8. CORRECTION ESPACEMENTS SECTIONS
   =================================================================== */

@media screen and (max-width: 767px) {
  /* Harmoniser les paddings de section */
  .section {
    padding-top: clamp(40px, 8vw, 60px) !important;
    padding-bottom: clamp(40px, 8vw, 60px) !important;
  }
  
  /* Sections spéciales */
  .section.home-hero,
  .section.about-hero {
    padding-top: clamp(60px, 10vw, 80px) !important;
    padding-bottom: clamp(60px, 10vw, 80px) !important;
  }
}

@media screen and (max-width: 479px) {
  /* Petit mobile : réduire légèrement */
  .section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ===================================================================
   9. CORRECTION TYPOGRAPHIE
   =================================================================== */

@media screen and (max-width: 479px) {
  /* Assurer que les titres ne débordent pas */
  h1, 
  .title.home-hero, 
  .title.about-hero {
    font-size: clamp(28px, 8vw, 42px) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }
  
  h2, 
  .title {
    font-size: clamp(22px, 6vw, 32px) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  h3 {
    font-size: clamp(18px, 4vw, 24px) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Corriger l'incohérence du nav-link */
  .nav-link {
    font-size: 16px !important;  /* Au lieu de 30px */
  }
}

/* ===================================================================
   10. CORRECTION CARTES ET CONTENUS
   =================================================================== */

@media screen and (max-width: 767px) {
  /* Cartes testimonials */
  .card.testimonial {
    text-align: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Cartes CTA */
  .cta-wrapper {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* Home about wrapper */
  .home-about-wrapper {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 5vw, 40px) !important;
  }
  
  /* Hero wrapper */
  .home-hero-wrapper {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 5vw, 40px) !important;
    text-align: center !important;
  }
}

/* ===================================================================
   11. CORRECTION FOOTER MOBILE (≤991px — toutes les pages)
   =================================================================== */

@media screen and (max-width: 991px) {
  .footer {
    padding-top: 48px !important;
    padding-bottom: 28px !important;
  }

  .footer .container-default.w-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  .footer-content-top {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .footer-logo-container {
    display: inline-flex !important;
    justify-content: center !important;
  }

  .footer-logo {
    width: 130px !important;
    height: auto !important;
  }

  .paragraph.footer-content-top-paragraph {
    margin: 0 !important;
    max-width: 280px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .divider.footer-top,
  .divider.footer-bottom {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
  }

  .footer-content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 32px !important;
    margin-bottom: 0 !important;
  }

  .footer-newsletter-content {
    width: 100% !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  .footer-newsletter-content-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    margin-left: 0 !important;
  }

  .image.footer-newsletter-icon {
    width: 48px !important;
    height: auto !important;
    margin: 0 !important;
  }

  .title.h3-size.footer-newsletter {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  .footer-newsletter-form-block,
  .footer-newsletter-form {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    right: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .button-primary.footer-newsletter,
  .button-primary.footer-newsletter.p11 {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    padding: 0 20px !important;
    border-radius: 25px !important;
    font-size: 14px !important;
  }

  .footer-nav-main-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer-nav-wrapper.pages {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .footer-nav-title {
    text-align: center !important;
    margin-bottom: 14px !important;
    font-size: 15px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  .footer-nav-content {
    display: block !important;
    width: 100% !important;
  }

  .footer-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    list-style: none !important;
  }

  .footer-nav-item,
  .footer-nav-item-copy {
    margin-bottom: 0 !important;
    margin-right: 0 !important;
  }

  .footer-nav-link,
  .footer-nav-link-copy {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
    white-space: normal !important;
    text-align: center !important;
    border-radius: 10px !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
  }

  .footer-nav-link:active,
  .footer-nav-link-copy:active,
  .footer-nav-link.w--current,
  .footer-nav-link-copy.w--current {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
  }

  .footer-content-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }

  .footer-social-media-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    order: 1 !important;
  }

  .footer-social-media-link {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .footer-small-print {
    order: 2 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

/* ===================================================================
   12. CORRECTION CAROUSEL VERTICAL (MÉTHODOLOGIE)
   =================================================================== */

@media screen and (max-width: 767px) {
  .vc-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .vc-card-media {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .vc-card-media img {
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: 300px !important;
    object-fit: cover !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .vc-card {
    width: min(90vw, 800px) !important;
  }
  
  .vc-card-media {
    grid-template-columns: 300px 1fr !important;
  }
}

/* ===================================================================
   13. CORRECTION SLIDERS
   =================================================================== */

@media screen and (max-width: 991px) {
  /* Ajuster les flèches du slider sur mobile/tablette */
  .courses-category .w-slider-arrow-left {
    left: -20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  .courses-category .w-slider-arrow-right {
    right: -20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

@media screen and (max-width: 767px) {
  /* Sur petit mobile, réduire la taille des flèches */
  .w-slider-arrow-left,
  .w-slider-arrow-right {
    width: 40px !important;
    font-size: 24px !important;
  }
}

/* ===================================================================
   14. CORRECTION CTA WIDE (BOUTONS LARGES)
   =================================================================== */

@media screen and (max-width: 479px) {
  .cta-wide,
  .about-team-cta.button.w-button {
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;  /* Permettre le wrap du texte */
    padding: 14px 20px !important;
  }
}

/* ===================================================================
   15. CORRECTION PERKS/FEATURES
   =================================================================== */

@media screen and (max-width: 767px) {
  /* Centrer les perks sur mobile */
  .perk-wrapper {
    text-align: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .image.perk {
    margin-right: 0 !important;
    margin-bottom: 20px !important;
  }
}

/* ===================================================================
   16. CORRECTION FORMULAIRES DE CONTACT
   =================================================================== */

@media screen and (max-width: 767px) {
  /* S'assurer que les inputs sont utilisables */
  .input,
  .text-area {
    width: 100% !important;
    font-size: 16px !important;  /* Éviter le zoom sur iOS */
    padding: 12px 15px !important;
  }
  
  .card.contact {
    min-height: auto !important;  /* Laisser la hauteur s'adapter */
    padding: 32px 25px !important;
  }
}

/* ===================================================================
   17. CORRECTION CENTRAGE HERO MOBILE
   =================================================================== */

@media screen and (max-width: 767px) {
  /* Centrer le contenu hero sur mobile */
  .split-content.home-hero-content {
    text-align: center !important;
    align-items: center !important;
  }
  
  .paragraph.home-hero {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  ._2-buttons._2buttons-edit {
    justify-content: center !important;
    align-items: center !important;
  }
}

/* ===================================================================
   18. CORRECTION ABOUT PAGE
   =================================================================== */

@media screen and (max-width: 991px) {
  /* Centrer la section "Qui sommes-nous" */
  .section.about-hero.ghgh {
    text-align: center !important;
  }
  
  .about-hero-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .split-content.about-hero-right {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Nos résultats — réduire le vide avant/après (padding desktop 200px) */
  .section-4._88 {
    margin-top: 0 !important;
    padding-top: 32px !important;
    padding-bottom: 28px !important;
  }

  .section-4._88 .title.text-center {
    margin-bottom: 12px !important;
  }

  .kpi-ticker {
    margin-top: 12px !important;
    padding: 4px 0 !important;
  }

  /* Espace entre Nos résultats et Méthodologie */
  .section.hghg.f.fgf {
    padding-top: 36px !important;
  }

  .section.hghg.f.fgf .title.about-hero.edit.metho._11,
  .section.hghg.f.fgf .title.about-hero.edit.metho._11.text-center {
    margin-bottom: 32px !important;
  }

  .section.hghg.f.fgf .v-carousel {
    margin-top: 20px !important;
    margin-bottom: 32px !important;
  }

  /* Flèche de transition mission → résultats */
  .section.bg-neutral-700 {
    padding-bottom: 16px !important;
  }

  .bg.arrow-wrapper.ggf {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .image.bg-arrow.e1._454._565 {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    margin: 8px auto 0 !important;
  }
}

/* ===================================================================
   19. AMÉLIORATION TOUCH TARGETS (ACCESSIBILITÉ MOBILE)
   =================================================================== */

@media screen and (max-width: 767px) {
  /* S'assurer que tous les éléments cliquables sont assez grands */
  .button-primary,
  .button-secondary,
  .nav-link,
  .dropdown-menu a,
  .footer-nav-link {
    min-height: 44px !important;  /* Recommandation Apple/Google */
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Augmenter l'espacement des liens pour éviter les erreurs de toucher */
  .footer-nav-item {
    margin-bottom: 8px !important;
  }
}

/* ===================================================================
   20. PERFORMANCE : DÉSACTIVER ANIMATIONS COMPLEXES SUR MOBILE
   =================================================================== */

@media screen and (max-width: 767px) {
  /* Simplifier les animations sur mobile pour performance */
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }

  /* Ne pas accélérer le ticker KPI (sinon 25s → 0.2s) */
  .kpi-track {
    animation-duration: 25s !important;
  }
  
  /* Désactiver les animations parallax */
  .bg.home-hero-shape-1,
  .bg.home-hero-shape-2,
  .bg.cta-shape-1,
  .bg.cta-shape-2,
  .bg.cta-shape-3 {
    transform: none !important;
    animation: none !important;
  }
}

/* ===================================================================
   21. CORRECTION Z-INDEX CONFLICTS
   =================================================================== */

/* S'assurer que la navigation reste au-dessus */
.header {
  z-index: 100 !important;
}

.top-banner {
  z-index: 120 !important;
}

/* Modal doit être au-dessus de tout */
#banner-modal {
  z-index: 10000 !important;
}

/* ===================================================================
   22. CORRECTION ASPECT RATIOS IMAGES
   =================================================================== */

@media screen and (max-width: 767px) {
  /* Maintenir des ratios d'aspect cohérents */
  .image-wrapper.card-courses-category {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
  }
  
  .image-wrapper.home-hero {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
  
  .image-wrapper.home-about {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
}

/* ===================================================================
   23. CORRECTION OVERFLOW CACHÉS
   =================================================================== */

/* S'assurer que le contenu important n'est jamais caché */
.paragraph.about-hero,
.title.about-hero,
.card-courses-category-content,
.title.card-courses-category {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===================================================================
   24. CORRECTION STICKY ELEMENTS MOBILE
   =================================================================== */

@media screen and (max-width: 991px) {
  .top-banner {
    font-size: 14px !important;
    padding: 8px 12px !important;
    height: auto !important;
    min-height: 40px !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }
}

/* ===================================================================
   25. CORRECTION FINALE : RESET PROBLÈMES WEBFLOW
   =================================================================== */

@media screen and (max-width: 991px) {
  /* Reset des classes Webflow qui causent problèmes */
  .w-hidden-medium {
    display: block !important;  /* Ne pas cacher sur tablette */
  }
  
  .w-hidden-small {
    display: block !important;  /* Ne pas cacher sur mobile */
  }
  
  /* Sauf si explicitement voulu */
  .intentionally-hidden-mobile {
    display: none !important;
  }
}

/* ===================================================================
   26. MOBILE — BARRE FLOTTANTE + DRAWER HAMBURGER (~1/3 écran)
   =================================================================== */

@media screen and (max-width: 991px) {
  /* Bannière + barre flottante fixes (comme desktop, adapté mobile) */
  .top-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 120 !important;
  }

  body {
    padding-top: var(--mobile-offset-top, 100px) !important;
  }

  .header.w-nav {
    position: fixed !important;
    top: var(--top-banner-height, 44px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 6px 12px 0 !important;
    transform: none !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), top 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .top-banner {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease !important;
  }

  .top-banner.is-hidden {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  body.is-scrolled .header.w-nav {
    top: 0 !important;
  }

  .header.w-nav.header--hidden {
    transform: translateY(calc(-100% - 8px)) !important;
    pointer-events: none !important;
  }

  body.is-scrolled {
    padding-top: calc(var(--mobile-bar-height, 58px) + 8px) !important;
  }

  body.header-bar-hidden {
    padding-top: 0 !important;
  }

  .header .container-default,
  .header-container {
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Pill bar : logo | Appelez-nous | hamburger */
  .header-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    background-color: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(18, 28, 87, 0.14) !important;
    padding: 5px 6px 5px 4px !important;
    min-height: 58px !important;
  }

  .split-content.header-right {
    flex: 0 0 auto;
    order: 1;
  }

  .brand.w-nav-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: 44px !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 2px 0 4px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  .brand.w-nav-brand .header-logo {
    width: 82px !important;
    max-width: 82px !important;
    height: auto !important;
    max-height: 40px !important;
    object-fit: contain !important;
    transform: none !important;
  }

  .header-cta-split {
    order: 2;
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Seul CTA visible dans la barre mobile */
  .header-cta-split .cta-primary {
    display: none !important;
  }

  .header-cta-split .cta-phone {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #0d3560 !important;
    color: #fff !important;
    height: 40px !important;
    padding: 0 14px !important;
    border-radius: 20px !important;
    border: 2px solid #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(13, 53, 96, 0.2) !important;
  }

  .split-content.header-left {
    order: 3;
    flex: 0 0 auto;
    margin-left: 0 !important;
  }

  .menu-button.w-nav-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background-color: var(--primary-1, #064ea4) !important;
  }

  /* Menu fermé : complètement caché */
  .w-nav[data-collapse='medium'] .w-nav-menu:not(.w--open):not([data-nav-menu-open]) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Menu ouvert : drawer compact, coins arrondis, hauteur = contenu */
  .header.w-nav[data-collapse='medium'] .nav-menu.w-nav-menu.w--open,
  .header.w-nav[data-collapse='medium'] .w-nav-menu.w--open,
  .header.w-nav[data-collapse='medium'] .w-nav-menu[data-nav-menu-open],
  .w-nav[data-collapse='medium'][data-animation='over-right'] .nav-menu.w-nav-menu.w--open,
  .w-nav[data-collapse='medium'][data-animation='over-right'] .w-nav-menu[data-nav-menu-open],
  .w-nav[data-collapse='medium'] .nav-menu.w-nav-menu[data-nav-menu-open],
  .w-nav[data-collapse='medium'] .w-nav-menu[data-nav-menu-open] {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: var(--mobile-drawer-top, 100px) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999 !important;
    background-color: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(18, 28, 87, 0.16) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    float: none !important;
  }

  /* Sous-vues (Services / Ressources) : cap + scroll si besoin */
  .w-nav-menu.w--open.mobile-subview,
  .w-nav-menu[data-nav-menu-open].mobile-subview {
    max-height: 42vh !important;
    overflow-y: auto !important;
  }

  .w-nav-menu.w--open:not(.mobile-subview) .header-navigation {
    padding-bottom: 0 !important;
  }

  .w-nav-menu.w--open:not(.mobile-subview) .nav-item-wrapper:last-child {
    border-bottom: 0 !important;
  }

  /* Neutralise le style Webflow [data-nav-menu-open] (absolute + top 100%) */
  [data-nav-menu-open].nav-menu.w-nav-menu,
  [data-nav-menu-open].w-nav-menu {
    position: fixed !important;
    top: var(--mobile-drawer-top, 100px) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    background-color: #fff !important;
    text-align: left !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }

  .header-navigation {
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .nav-item-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(15, 67, 127, 0.08) !important;
  }

  .nav-link {
    font-size: 18px !important;
    line-height: 1.2 !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  .nav-link.w--current {
    background-color: rgba(18, 28, 87, 0.06) !important;
  }

  /* Bouton retour + titre sous-vue (Services, Ressources) */
  .mobile-nav-back {
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid rgba(15, 67, 127, 0.08);
    background: rgba(18, 28, 87, 0.03);
    color: #121c57;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }

  .mobile-nav-back-icon {
    font-size: 20px;
    line-height: 1;
  }

  .w-nav-menu.mobile-subview .mobile-nav-back {
    display: flex !important;
  }

  .w-nav-menu.mobile-subview::before {
    content: attr(data-mobile-subview-label);
    display: block;
    padding: 10px 16px 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #121c57;
    border-bottom: 1px solid rgba(15, 67, 127, 0.08);
  }

  .w-nav-menu.mobile-subview .header-navigation > .nav-item-wrapper {
    display: none !important;
  }

  .w-nav-menu.mobile-subview .dropdown.is-open {
    display: block !important;
    border: 0 !important;
  }

  .w-nav-menu.mobile-subview .dropdown.is-open > .nav-link {
    display: none !important;
  }

  .w-nav-menu.mobile-subview .dropdown.is-open .dropdown-menu {
    opacity: 1 !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #fff !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  .w-nav-menu.mobile-subview .dropdown.is-open .dropdown-menu a {
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #121c57 !important;
    border-bottom: 1px solid rgba(15, 67, 127, 0.08) !important;
    text-decoration: none !important;
  }

  .w-nav-menu.mobile-subview .dropdown.is-open .dropdown-menu a:last-child {
    border-bottom: 0 !important;
  }

  /* Dropdowns : masqués en vue principale (ouverture via panneau dédié) */
  .header-navigation .dropdown .dropdown-menu {
    opacity: 1 !important;
    position: static !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  .w-nav-menu:not(.mobile-subview) .header-navigation .dropdown.is-open .dropdown-menu {
    display: none !important;
  }
}

/* ===================================================================
   30. HERO MOBILE — TYPO & ESPACEMENT (évite « de-vient »)
   =================================================================== */

@media screen and (max-width: 991px) {
  .title.home-hero {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    width: 100% !important;
    font-size: clamp(34px, 8.5vw, 44px) !important;
    line-height: 1.12 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .paragraph.home-hero {
    max-width: 100% !important;
    hyphens: none !important;
  }

  .section.home-hero {
    padding-top: clamp(40px, 8vw, 64px) !important;
    padding-bottom: clamp(40px, 8vw, 64px) !important;
  }

  .home-hero-wrapper {
    text-align: center !important;
  }

  .top-banner {
    font-size: 14px !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
}

/* ===================================================================
   27. ABOUT PAGE — RESET POSITIONS EXTRÊMES (≤479px)
   =================================================================== */

@media screen and (max-width: 479px) {
  .paragraph.about-hero,
  .paragraph.about-hero.edit1 {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    top: auto !important;
    position: relative !important;
  }

  .title.about-hero._1 {
    left: auto !important;
  }

  .image.mission._1 {
    top: auto !important;
    position: relative !important;
  }

  .paragraph.mission.edit {
    top: auto !important;
    position: relative !important;
  }
}

/* ===================================================================
   28. CAROUSEL MÉTHODOLOGIE — OVERRIDE responsive-fixes TABLETTE
   =================================================================== */

@media screen and (max-width: 991px) {
  .vc-card-media img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===================================================================
   29. SLIDER FLÈCHES — RESTER DANS LE VIEWPORT
   =================================================================== */

@media screen and (max-width: 767px) {
  .courses-category .w-slider-arrow-left {
    left: 4px !important;
  }

  .courses-category .w-slider-arrow-right {
    right: 4px !important;
  }
}

/* ===================================================================
   30. TABLEAUX OBJECTIFS — PAGES SERVICES (≤991px)
   3 colonnes → cartes empilées lisibles (Court / Moyen / Long terme)
   =================================================================== */

@media screen and (max-width: 991px) {
  .course-rich-text-wrapper table,
  .course-rich-text-wrapper .rich-text table,
  .course-rich-text-wrapper .w-richtext table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 12px 0 !important;
  }

  .course-rich-text-wrapper thead {
    display: none !important;
  }

  .course-rich-text-wrapper tbody,
  .course-rich-text-wrapper tbody tr {
    display: block !important;
    width: 100% !important;
  }

  .course-rich-text-wrapper tbody td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 14px !important;
    padding: 12px 16px 16px !important;
    border-top: none !important;
    border-radius: 12px !important;
    background: #f6f9ff !important;
    box-shadow: 0 1px 0 rgba(24, 78, 172, 0.08), 0 0 0 1px rgba(24, 78, 172, 0.12) !important;
    overflow: hidden !important;
  }

  .course-rich-text-wrapper tbody td:last-child {
    margin-bottom: 0 !important;
  }

  .course-rich-text-wrapper tbody td::before {
    content: "";
    display: block;
    background: #184eac;
    color: #fff;
    padding: 10px 16px;
    margin: -12px -16px 12px;
    font-weight: 700;
    text-align: center;
    font-size: 15px;
    line-height: 1.2;
  }

  .course-rich-text-wrapper tbody td:nth-child(1)::before {
    content: "Court terme";
  }

  .course-rich-text-wrapper tbody td:nth-child(2)::before {
    content: "Moyen terme";
  }

  .course-rich-text-wrapper tbody td:nth-child(3)::before {
    content: "Long terme";
  }

  .course-rich-text-wrapper tbody td ul {
    padding-left: 20px !important;
  }

  .course-rich-text-wrapper tbody td li {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin: 6px 0 !important;
  }
}

/* ===================================================================
   FIN DES CORRECTIONS CRITIQUES
   
   Ces corrections devraient résoudre ~80% des problèmes mobile
   sans casser le design desktop.
   
   Pour une solution à long terme, considérer une refactorisation
   Mobile-First complète.
   =================================================================== */