/* responsive-desktop.css - Styles responsive pour écrans à partir de 768px */

/* ===== STYLE PAR DÉFAUT MENU ===== */
/* Style par défaut - texte complet visible, texte court caché */
.sidebar-menu-link .full-text {
    display: inline;
  }
  
  .sidebar-menu-link .short-text {
    display: none;
  }
  
  /* ===== NAVIGATION BUTTONS REVEAL EFFECT ===== */
  /* Préparation pour l'effet reveal */
  .nav-buttons-wrapper {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .nav-buttons-wrapper.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Fond transparent pour les nav buttons sur tous les écrans */
  .nav-buttons-container {
    background-color: transparent !important;
    position: relative;
    z-index: 20;
  }
  
  /* ===== ÉCRANS ENTRE 768px ET 1060px ===== */
  @media (min-width: 768px) and (max-width: 1060px) {
    /* Conservation du typewriter sur écrans entre 768px et 1060px */
    .dynamic-text {
      display: block !important;
      font-size: 1.8rem !important;
    }
    
    .hero-content {
      margin-top: 4vh !important;
    }
    
    .hero-logo .emblem {
      display: block !important;
      height: 35px !important;
    }
  }
  
  /* ===== ÉCRANS TABLETTES ===== */
  @media (min-width: 768px) and (max-width: 991px) {
    /* Amélioration pour les tablettes - Notre vision */
    .info-tiles-container {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 20px !important;
    }
    
    .info-tile {
      padding: 20px !important;
    }
    
    .info-tile-icon object {
      width: 120px !important;
      height: 120px !important;
    }
  }
  
  /* ===== TABLETTES ET PETITS ÉCRANS DESKTOP ===== */
  @media (min-width: 768px) and (max-width: 1024px) {
    .nav-buttons-wrapper {
      grid-template-columns: repeat(2, 1fr);
    }
    
    /* Notre méthode - Optimisation tablette */
    .method-container {
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
    }
    
    .method-text {
      margin-left: 0;
      text-align: center;
      width: 100%;
    }
    
    .method-title {
      margin-bottom: 1.5rem;
    }
    
    /* Grille CTA + textes en mode tablette */
    .method-cta-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 2rem;
      row-gap: 1.5rem;
      width: 100%;
      margin-top: 0.5rem;
    }
    
    .method-cta-grid .method-cta-demo { 
      grid-column: 1 !important; 
      grid-row: 1 !important; 
      align-self: center !important;
      margin-top: 0.75rem !important;
      margin-bottom: 0 !important;
    }
    .method-cta-grid .method-subtext-line1 { 
      grid-column: 2 !important; 
      grid-row: 1 !important; 
      text-align: left !important;
      align-self: center !important;
      padding-left: 0.5rem !important;
    }
    .method-cta-grid .method-cta-approach { 
      grid-column: 1 !important; 
      grid-row: 2 !important; 
      align-self: center !important;
      margin-top: 0.75rem !important;
      margin-bottom: 0 !important;
    }
    .method-cta-grid .method-subtext-line2 { 
      grid-column: 2 !important; 
      grid-row: 2 !important; 
      text-align: left !important;
      align-self: center !important;
      padding-left: 0.5rem !important;
    }
    
    .method-subtext-line1,
    .method-subtext-line2 {
      line-height: 1.5;
      max-width: none;
    }
    
    /* Adaptation des sections video et hero */
    .hero {
      height: 30vh;
      min-height: 180px;
    }
    
    .masked-image-section {
      height: 300px;
    }
    
    .youtube-container {
      max-width: 700px;
    }
  }
  
  /* ===== ÉCRANS DESKTOP ===== */
  @media (min-width: 1025px) {
    .info-tiles-container {
      grid-template-columns: repeat(3, 1fr);
    }
    
    .info-tile {
      padding: 2rem;
    }
    
    .partners-subtitle {
      font-size: 1.2rem;
    }
    
    .nav-buttons-wrapper {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  /* ===== RÉGLAGES POUR PETITS ORDINATEURS ===== */
  @media (min-width: 992px) and (max-width: 1199px) {
    .info-tiles-container {
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 24px !important;
    }
    
    /* Ajustements pour les sections avec conteneur */
    .section-container,
    .method-container,
    .hero-intro-container {
      max-width: 960px;
    }
  }
  
  /* ===== GRANDS ÉCRANS ===== */
  @media (min-width: 1200px) {
    .section-container,
    .method-container,
    .hero-intro-container,
    .nav-buttons-wrapper {
      max-width: 1140px;
      margin: 0 auto;
    }
    
    /* Effets hover améliorés sur grand écran */
    .info-tile:hover {
      transform: translateY(-8px);
      transition: transform 0.4s ease;
    }
    
    .nav-button:hover {
      transform: translateY(-5px);
    }
  }
  
  /* ===== TRÈS GRANDS ÉCRANS ===== */
  @media (min-width: 1400px) {
    .section-container,
    .method-container,
    .hero-intro-container,
    .nav-buttons-wrapper {
      max-width: 1320px;
    }
    
    .hero-video {
      width: 100%;
      height: auto;
      top: -700px;
    }
    
    /* Augmenter la taille des éléments sur très grands écrans */
    .section-title {
      font-size: 3rem;
    }
    
    .info-tile-title {
      font-size: 1.5rem;
    }
    
    .info-tile-text {
      font-size: 1.1rem;
    }
  }

  /* LayerTabletFix.css - Corrections spécifiques pour les tablettes */

/* ===== CORRECTIONS POUR LES TABLETTES (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Correction des problèmes de marges et de centrage */
  body, html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  
  /* Correction du conteneur principal pour éviter les marges indésirables */
  #mainContent {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Correction du conteneur de la vidéo hero */
  .hero {
    height: 20vh !important; /* Réduire la hauteur */
    min-height: 150px !important;
    max-height: 200px !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  
  .hero-video-container {
    height: 100% !important;
    width: 100% !important;
  }
  
  .hero-video {
    top: -250px !important; /* Ajuster la position verticale */
    width: 100% !important;
    left: 0 !important;
  }
  
  /* Correction des conteneurs de sections */
  .section-container,
  .method-container,
  .hero-intro-container,
  .faq-container,
  .contact-container,
  .services-container,
  .specialties-container {
    width: calc(100% - 40px) !important;
    max-width: 750px !important; /* Limiter la largeur max */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  
  /* Correction des boutons de navigation */
  .nav-buttons-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 20px !important;
    box-sizing: border-box !important;
  }
  
  .nav-buttons-wrapper {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 colonnes au lieu de 4 */
    gap: 15px !important;
    max-width: 750px !important;
    margin: 0 auto !important;
  }
  
  /* Correction pour la section intro */
  .hero-intro-section {
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
  }
  
  .hero-intro-container {
    flex-direction: column !important; /* Empiler en colonne */
  }
  
  .hero-intro-content {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
  }
  
  .hero-intro-image {
    width: 80% !important; /* Plus large */
    margin: 0 auto !important;
  }
  
  /* Correction pour les tuiles de vision */
  .info-tiles-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  
  /* Correction pour la section méthode */
  .section-method-highlight {
    padding: 2rem 20px !important;
  }
  
  .method-container {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .method-text {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 0.3rem !important; /* Réduire l'espacement pour cohérence */
  }
  
  .method-description {
    padding-left: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  .method-cta {
    margin: 0 auto !important;
  }
  
  /* Correction pour la section masked-image et youtube */
  .masked-image-section {
    height: 300px !important;
    width: 100% !important;
  }
  
  .masked-image-secondary {
    height: 500px !important;
  }
  
  .youtube-container {
    width: calc(100% - 40px) !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  /* Correction pour les services */
  .services-content-details {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .services-content-visual {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    height: 300px !important;
    margin-bottom: 1.5rem !important;
  }
  
  .services-content-text {
    width: 100% !important;
    padding-right: 0 !important;
    text-align: center !important;
  }
  
  .services-content-text ul {
    display: inline-block !important;
    text-align: left !important;
  }
  
  .services-cta {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  
  /* Correction pour le formulaire de contact */
  .multi-step-form-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .interest-options-simple {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ===== CORRECTIONS POUR IPAD PRO (1024px - 1280px) ===== */
@media (min-width: 1025px) and (max-width: 1280px) {
  /* Quelques ajustements pour les iPad Pro */
  .section-container,
  .method-container,
  .hero-intro-container,
  .faq-container,
  .contact-container,
  .services-container,
  .specialties-container {
    max-width: 960px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  
  .nav-buttons-wrapper {
    max-width: 960px !important;
  }
  
  .hero-video {
    top: -400px !important; /* Ajuster la position verticale */
  }
  
  .hero {
    height: 25vh !important;
    min-height: 200px !important;
  }
  
  .youtube-container {
    max-width: 800px !important;
  }
  
  .info-tiles-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
  }
}

/* Corrections pour les transitions entre tailles d'écran */
@media (min-width: 768px) and (max-width: 850px) {
  /* Ajustements pour les petites tablettes */
  .hero-intro-title {
    font-size: 2.2rem !important;
  }
  
  .section-title {
    font-size: 2rem !important;
  }
  
  .method-title {
    font-size: 2.5rem !important;
  }
}

/* Fix pour la marge à droite sur tablette (767px-1000px) */

/* Forcer la largeur complète et l'absence de débordement */
@media (min-width: 767px) and (max-width: 1000px) {
    html, body {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: hidden !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    
    /* Conteneur principal */
    #mainContent {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: hidden !important;
      padding: 0 !important;
      margin: 0 !important;
      position: relative !important;
      left: 0 !important;
      right: 0 !important;
      box-sizing: border-box !important;
    }
    
    /* Toutes les sections pleine largeur */
    .section,
    .section-alt,
    .vision-section,
    .specialties-section,
    .hero-intro-section,
    .section-method-highlight,
    .partners-section,
    .faq-section,
    .contact-section,
    .masked-image-section {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      box-sizing: border-box !important;
      position: relative !important;
      left: 0 !important;
      right: 0 !important;
    }
    
    /* Conteneurs intérieurs centrés */
    .section-container,
    .hero-intro-container,
    .method-container,
    .specialties-container,
    .faq-container,
    .contact-container,
    .services-container,
    .nav-buttons-wrapper,
    .app-tile,
    .vision-content {
      width: 90% !important;
      max-width: 850px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
      box-sizing: border-box !important;
      position: relative !important;
    }
    
    /* S'assurer que les conteneurs de tuiles sont bien formés */
    .info-tiles-container {
      display: grid !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    
    /* Vidéo Hero correctement positionnée */
    .hero {
      height: 20vh !important;
      min-height: 150px !important;
      max-height: 250px !important;
      width: 100% !important;
      overflow: hidden !important;
      position: relative !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    .hero-video-container {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }
    
    .hero-video {
      position: absolute !important;
      top: -350px !important;
      left: 0 !important;
      width: 100% !important;
      height: auto !important;
    }
  }
  
  /* Fix pour la section Notre Vision sur mobile et tablette */
  #vision-section,
  .vision-section,
  .section.vision-section,
  .info-tiles-container,
  .info-tile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  /* S'assurer que le conteneur est bien visible */
  .app-tile,
  .vision-content {
    display: block !important;
    visibility: visible !important;
  }
  
  /* Forcer les tuiles à être en une colonne sur petit mobile, 2 colonnes sur grand mobile et tablette */
  @media (max-width: 479px) {
    .info-tiles-container {
      grid-template-columns: 1fr !important;
      gap: 16px !important;
    }
  }
  
  @media (min-width: 480px) and (max-width: 991px) {
    .info-tiles-container {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 20px !important;
    }
    
    /* La dernière tuile s'étend sur toute la largeur si elle est seule sur sa ligne */
    .info-tiles-container .info-tile:last-child:nth-child(2n+1) {
      grid-column: 1 / -1 !important;
      max-width: 80% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }
  
  @media (min-width: 992px) {
    .info-tiles-container {
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 24px !important;
    }
    
    /* La dernière tuile s'étend sur toute la largeur si elle est seule sur sa ligne */
    .info-tiles-container .info-tile:last-child:nth-child(3n+1) {
      grid-column: 1 / -1 !important;
      max-width: 60% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }

  /* fixes-critical.css - À charger en DERNIER dans votre HTML 
   Ce fichier corrige les bugs critiques d'affichage et garantit que tous les éléments sont visibles */

/* ===== CORRECTIONS GLOBALES POUR TOUS LES APPAREILS ===== */
/* Fix pour la section Notre vision - Garantir sa visibilité quelles que soient les conditions */
#vision-section,
.vision-section,
section.vision-section,
.section.vision-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 100px !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  overflow: visible !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

/* Garantir que le contenu de la section vision est visible */
.app-tile,
.vision-content,
.section-container .app-tile,
.vision-section .app-tile,
.section-container .vision-content,
.vision-section .vision-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
  height: auto !important;
  min-height: auto !important;
}

/* Assurer que les tuiles d'information sont visibles */
.info-tiles-container,
.app-tile .info-tiles-container,
.vision-content .info-tiles-container {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: auto !important;
  width: 100% !important;
  position: relative !important;
  z-index: 10 !important;
  margin-bottom: 20px !important;
}

/* Assurer que les tuiles individuelles sont visibles */
.info-tile,
.info-tiles-container .info-tile {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Correction pour l'animation de reveal - assurer qu'elle ne cache pas le contenu */
/* Cette règle garantit que même pendant l'animation, les éléments restent visibles */
.vision-content[style*="opacity: 0"],
.info-tiles-container[style*="opacity: 0"],
.info-tile[style*="opacity: 0"],
#vision-section[style*="opacity: 0"] {
  opacity: 1 !important;
}

/* Correction globale des marges pour tous les appareils */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

#mainContent {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

/* ===== CORRECTIONS SPÉCIFIQUES POUR MOBILE (<768px) ===== */
@media (max-width: 767px) {
  /* Garantir les bonnes dimensions des tuiles sur mobile */
  .info-tiles-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 10px !important;
  }

  /* Styles des tuiles et contenus sur mobile */
  .info-tile-icon {
    min-height: 60px !important;
    margin-bottom: 15px !important;
  }

  .info-tile-content {
    text-align: center !important;
  }

  /* Visibilité du titre de section */
  .section-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 20px !important;
  }
}

/* ===== CORRECTIONS SPÉCIFIQUES POUR TABLETTE (768px-1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Correction des marges et largeurs sur tablette */
  .section, 
  .section-alt, 
  .vision-section,
  .hero-intro-section,
  .section-method-highlight,
  .partners-section,
  .faq-section,
  .contact-section,
  .masked-image-section,
  .specialties-section {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Conteneurs intérieurs centrés sur tablette */
  .section-container,
  .hero-intro-container,
  .method-container,
  .specialties-container,
  .faq-container,
  .contact-container,
  .services-container,
  .app-tile,
  .vision-content {
    width: 92% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Tuiles d'information sur tablette (2 colonnes) */
  .info-tiles-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 0 !important;
  }

  /* Dernière tuile s'étend sur 2 colonnes si seule sur la ligne */
  .info-tiles-container .info-tile:last-child:nth-child(2n+1) {
    grid-column: 1 / -1 !important;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Styles des tuiles et images sur tablette */
  .info-tile {
    padding: 20px !important;
  }

  .info-tile-icon object {
    width: 120px !important;
    height: 120px !important;
  }

  /* Hero vidéo sur tablette */
  .hero {
    height: 20vh !important;
    min-height: 150px !important;
    max-height: 200px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-video {
    top: -300px !important;
    width: 100% !important;
  }
}

/* ===== CORRECTIONS SPÉCIFIQUES POUR DESKTOP (>1024px) ===== */
@media (min-width: 1025px) {
  /* Tuiles d'information sur desktop (3 colonnes) */
  .info-tiles-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }

  /* Dernière tuile s'étend sur 3 colonnes si seule sur la ligne */
  .info-tiles-container .info-tile:last-child:nth-child(3n+1) {
    grid-column: 1 / -1 !important;
    max-width: 60% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== CORRECTIONS POUR LE SCRIPT DE REVEAL ===== */
/* Ne pas cacher les éléments qui utilisent l'animation de reveal */
@keyframes fixOpacityReveal {
  from { opacity: 0.99; }
  to { opacity: 1; }
}

/* Forcer les éléments en animation à toujours être visibles */
.vision-section,
.vision-content,
.info-tiles-container,
.info-tile,
.info-tile-icon,
.info-tile-content,
.info-tile-title,
.info-tile-text {
  animation: fixOpacityReveal 0.1s ease forwards !important;
  transform: none !important;  /* Éviter les transformations qui pourraient cacher le contenu */
}

/* Compatibilité avec le script ScrollReveal */
.vision-section.sr-only,
.vision-content.sr-only,
.info-tiles-container.sr-only,
.info-tile.sr-only {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Pour éviter que les scripts n'ajoutent des valeurs problématiques */
[style*="display: none"],
[style*="visibility: hidden"],
[style*="opacity: 0"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Styles généraux pour réparer les éléments potentiellement cassés */
.section-title {
  margin-bottom: 30px !important;
}

.section-container {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Compatibilité Script Typewriter */
.dynamic-text {
  display: block !important;
  visibility: visible !important;
  min-height: 30px !important;
}

/* Masquer la flèche et le dégradé uniquement sur desktop */
@media (min-width: 1025px) {
  .scroll-down-indicator, 
  .scroll-gradient-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* S'assurer que sur mobile, ils restent visibles initialement */
@media (max-width: 1023px) {
  .scroll-down-indicator, 
  .scroll-gradient-overlay {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  /* Disparaissent ensuite au scroll (comportement existant) */
  .scroll-down-indicator.hidden, 
  .scroll-gradient-overlay.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ===== CORRECTION SPÉCIFIQUE POUR LA VIDÉO HERO À 1024px ===== */
@media (min-width: 901px) and (max-width: 1024px) {
  .hero {
    width: 100% !important;
    height: 35vh !important; /* Plus large qu'avant */
    min-height: 220px !important; /* Hauteur minimum plus élevée */
    max-height: 300px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  .hero-video-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }
  
  .hero-video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: auto !important;
    min-width: 100% !important;
    min-height: 100% !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
    z-index: 1 !important;
    opacity: 0.88 !important;
  }
  
  .desktop-video {
    display: block !important;
  }
  
  .mobile-video {
    display: none !important;
  }
  
  .hero-content {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    margin-top: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  .dynamic-text {
    margin: 0 !important;
    font-size: 2rem !important; /* Légèrement plus grand */
    min-height: auto !important;
    line-height: 1.2 !important;
  }
  
  .hero-logo .emblem {
    height: 35px !important;
    margin: 0 auto 15px auto !important;
  }
}

/* ===== CORRECTION POUR LA PLAGE 1025px-1380px ===== */
@media (min-width: 1025px) and (max-width: 1380px) {
  .hero {
    width: 100% !important;
    height: 30vh !important; /* Plus petit que la valeur par défaut */
    min-height: 200px !important;
    max-height: 350px !important; /* Limiter la hauteur maximum */
    overflow: hidden !important;
    position: relative !important;
  }
  
  .hero-video-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }
  
  .hero-video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: auto !important;
    min-width: 100% !important;
    min-height: 100% !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
    z-index: 1 !important;
    opacity: 0.88 !important;
  }
  
  .desktop-video {
    display: block !important;
  }
  
  .mobile-video {
    display: none !important;
  }
  
  .hero-content {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    margin-top: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  .dynamic-text {
    margin: 0 !important;
    font-size: 2.2rem !important; /* Taille adaptée */
    min-height: auto !important;
    line-height: 1.2 !important;
  }
  
  .hero-logo .emblem {
    height: 40px !important;
    margin: 0 auto 20px auto !important;
  }
}

/* ===== CORRECTION SPÉCIFIQUE POUR LA VIDÉO HERO ENTRE 768px ET 900px ===== */
@media (min-width: 768px) and (max-width: 900px) {
  .hero {
    width: 100% !important;
    height: 25vh !important;
    min-height: 180px !important;
    max-height: 250px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  .hero-video-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }
  
  .hero-video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: auto !important;
    min-width: 100% !important;
    min-height: 100% !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
    z-index: 1 !important;
    opacity: 0.88 !important;
  }
  
  /* S'assurer que la vidéo desktop est visible dans cette plage */
  .desktop-video {
    display: block !important;
  }
  
  .mobile-video {
    display: none !important;
  }
  
  /* Correction du contenu texte */
  .hero-content {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    margin-top: 0 !important; /* Supprimer le margin-top */
    height: 100% !important; /* Prendre toute la hauteur */
    display: flex !important; /* Utiliser flexbox */
    flex-direction: column !important;
    justify-content: center !important; /* Centrer verticalement */
    align-items: center !important; /* Centrer horizontalement */
  }
  
  /* Correction spécifique du texte dynamique */
  .dynamic-text {
    margin: 0 !important; /* Supprimer toutes les marges */
    font-size: 1.8rem !important;
    min-height: auto !important; /* Laisser la hauteur s'adapter */
    line-height: 1.2 !important;
  }
  
  /* Correction du logo hero s'il existe */
  .hero-logo {
    margin: 0 !important;
  }
  
  .hero-logo .emblem {
    height: 30px !important;
    margin: 0 auto 10px auto !important; /* Petite marge en bas seulement */
  }
}