/* LayerMobileResponsive.css - Styles pour écrans jusqu'à 767px */
/* Ajoutez ce code à votre fichier CSS principal ou créez un nouveau fichier */

/* 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;
  }
}
/* Solution simple pour garantir des marges symétriques minimales */
@media (max-width: 767px) {
    /* Élimination de toutes les marges potentiellement asymétriques */
    body, 
    .container, 
    .section-container,
    .hero-intro-container,
    .faq-container,
    .contact-container,
    .services-container,
    .specialties-container,
    .app-tile,
    .nav-buttons-container,
    .method-container,
    .partners-section,
    .info-tiles-container,
    .vision-content,
    .section,
    .hero-intro-section,
    .section-method-highlight,
    .faq-section,
    .contact-section,
    .partners-section,
    .specialties-section,
    .masked-image-section,
    .section-title,
    .info-tile,
    .youtube-container {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 2px !important;
      padding-right: 2px !important;
      box-sizing: border-box !important;
    }
    
    /* Règle spécifique pour les très petits écrans (<360px) */
    @media (max-width: 359px) {
      body, 
      .container, 
      .section-container,
      .hero-intro-container,
      .faq-container,
      .contact-container,
      .services-container,
      .specialties-container,
      .app-tile,
      .nav-buttons-container,
      .method-container,
      .partners-section,
      .info-tiles-container,
      .vision-content,
      .section,
      .hero-intro-section,
      .section-method-highlight,
      .faq-section,
      .contact-section,
      .partners-section,
      .specialties-section,
      .masked-image-section,
      .section-title,
      .info-tile,
      .youtube-container {
        padding-left: 2px !important;
        padding-right: 2px !important;
      }
    }
  }

  @media (max-width: 767px) {
    /* Forcer l'affichage de la section vision */
    #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 les marges sont correctes */
    .vision-section {
      margin-top: 20px !important;
      margin-bottom: 20px !important;
      padding-top: 20px !important;
      padding-bottom: 20px !important;
    }
    
    /* Garantir que le contenu est visible */
    .app-tile {
      display: block !important;
      visibility: visible !important;
      background-color: var(--background-card) !important;
    }
  }

/* ===== CORRECTIONS GLOBALES POUR UTILISER TOUTE LA LARGEUR D'ÉCRAN ===== */
@media (max-width: 767px) {
    /* Forcer l'utilisation de toute la largeur disponible */
    body {
      overflow-x: hidden !important;
      width: 100% !important;
      max-width: 100vw !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    
    /* Correction des marges pour tous les conteneurs - marges uniformes de 12px */
    .container, 
    .section-container,
    .hero-intro-container,
    .faq-container,
    .contact-container,
    .services-container,
    .specialties-container,
    .app-tile,
    .nav-buttons-container,
    .method-container,
    .partners-section,
    .info-tiles-container {
      padding-left: 12px !important;
      padding-right: 12px !important;
      width: calc(100% - 24px) !important;
      max-width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
    }
    
    /* S'assurer que les sections remplissent toute la largeur */
    .section,
    .hero-intro-section,
    .section-method-highlight,
    .faq-section,
    .contact-section,
    .partners-section,
    .specialties-section,
    .masked-image-section {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }
  }
  
  /* ===== NAVBAR ET HERO ===== */
  @media (max-width: 767px) {
    /* Fixer la barre de navigation pour qu'elle reste accessible */
    .top-bar {
      position: fixed !important;
      width: 100% !important;
      z-index: 99 !important;
      background-color: transparent !important;
      transition: background-color 0.3s ease !important;
      left: 0 !important;
      right: 0 !important;
      padding: 0 12px !important;
      box-sizing: border-box !important;
    }
    
    /* Ajouter le fond seulement au scroll */
    .top-bar.scrolled {
      background: rgba(10, 15, 25, 0.55) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18) !important;
    }
    
    /* Conserver le logo ARCY sur tous les écrans */
    .logo-primary,
    .logo-secondary {
      display: block !important;
    }
    
    /* Remonter l'emblème au niveau de la navbar */
 

    
    .hero-intro-content {
      margin-top: 0 !important;
      overflow: visible !important; /* Éviter les scrollbars internes */
    }
    
    .hero-intro-container {
      overflow: visible !important; /* Assurer qu'il n'y a pas de scroll interne */
    }
    
    .emblem {
      display: block !important;
      margin-top: 0 !important;
    }
    
    /* Fixer la vidéo hero en dessous de la navbar */
    .hero {
      height: 0 !important;
      min-height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
      overflow: hidden !important;
      position: absolute !important;
    }
    
    .hero-video-container {
      display: none !important;
    }
    
    .hero-content {
      display: none !important;
    }
    
    /* Ajouter espace pour compenser la navbar fixe */
    #mainContent {
      padding-top: 70px !important;
      width: 100% !important;
    }
    
    /* Masquer le CTA sur petits écrans */
    .top-bar-right .nav-cta {
      display: none !important;
    }
  }
  
  /* ===== MENU LATÉRAL ===== */
  @media (max-width: 767px) {
    /* Sidebar plus étroit avec marges uniformes */
    .sidebar {
      width: 220px !important;
      max-width: 70vw !important; /* Ne jamais dépasser 70% de la largeur de l'écran */
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    
    /* Ajustement du padding et de la taille de texte */
    .sidebar-menu-link {
      padding: 0.75rem 12px !important; /* Marges uniformes */
      font-size: 0.9rem !important;
      position: relative;
      display: flex !important;
      align-items: center !important;
    }
    
    /* Réduire la taille de l'icône */
    .sidebar-menu-icon {
      width: 20px !important; 
      height: 20px !important;
      margin-right: 0.5rem !important;
      flex-shrink: 0 !important;
    }
    
    /* Sur mobile, afficher texte court et cacher texte long */
    .sidebar-menu-link .full-text {
      display: none !important;
    }
    
    .sidebar-menu-link .short-text {
      display: inline !important;
      margin-left: 0 !important;
    }
    
    /* Ajuster l'entête du sidebar avec marges uniformes */
    .sidebar-header {
      padding: 1rem 12px !important;
    }
    
    /* Logo plus petit */
    .sidebar-logo .emblem {
      height: 50px !important;
    }
    
    /* Ajuster le switch de thème avec marges uniformes */
    .theme-switch-container {
      padding: 0.75rem 12px !important;
    }
    
    /* Augmenter légèrement la transparence de l'overlay */
    .sidebar-overlay.active {
      background-color: rgba(0, 0, 0, 0.6) !important;
    }
  }
  
  /* ===== BOUTONS DE NAVIGATION ===== */
  @media (max-width: 480px) {
    /* Sur très petits écrans, mettre les boutons en une colonne */
    .nav-buttons-wrapper {
      grid-template-columns: 1fr !important; /* 1 colonne */
      gap: 8px !important;
      width: 100% !important;
    }
  }

  @media (min-width: 481px) and (max-width: 767px) {
    /* Sur les petits écrans mais pas trop petits, garder 2 colonnes */
    .nav-buttons-wrapper {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 8px !important;
      width: 100% !important;
    }
  }
  
  @media (max-width: 767px) {
    .nav-buttons-container {
      margin-top: 15px !important;
      padding: 1rem 8px !important; /* Réduire les marges horizontales */
      width: 100% !important;
      box-sizing: border-box !important;
      background-color: transparent !important; /* Fond transparent */
    }
    
    .nav-button {
      padding: 0.75rem 0.5rem !important;
      width: 100% !important;
      box-sizing: border-box !important;
      background-color: rgba(255, 255, 255, 0.85) !important; /* Fond légèrement opaque */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* Ombre plus visible */
    }
    
    /* Version dark mode */
    [data-theme="dark"] .nav-button {
      background-color: rgba(40, 44, 52, 0.85) !important;
    }
    
    .nav-button-title {
      font-size: 0.8rem !important;
    }
  }
  
  /* ===== SECTION HERO INTRO ===== */
  @media (max-width: 767px) {
  
    
    .hero-intro-container {
      flex-direction: column !important;
      width: calc(100% - 16px) !important; /* Réduire les marges latérales */
      margin: 0 auto !important;
    }
    
    .hero-intro-content {
      width: 100% !important;
      text-align: center !important;
      margin-top: 5vh !important; /* Important: supprime la marge supérieure */
    }
    
    .hero-intro-image {
      display: none !important;
    }
    
    .hero-intro-badge {
      font-size: 0.7rem !important;
      margin-top: 0 !important;
    }
    
    .hero-intro-title {
      font-size: 1.8rem !important;
      margin-top: 0.5rem !important;
    }
    
    .hero-intro-description {
      font-size: 0.9rem !important;
    }
    
    /* S'assurer que l'emblème est bien visible */
    .hero-logo .emblem,
    .emblem {
      display: block !important;
      margin: 0 auto 0.5rem !important;
      position: relative !important;
      top: 0 !important;
    }
  }
  
  /* ===== TUILES D'INFORMATION (REDESIGN) ===== */
  @media (max-width: 767px) {
    /* Conteneur principal de la section */
    .vision-section {
      padding-top: 1.5rem !important;
      padding-bottom: 1rem !important;
    }
    
    /* Conteneur de la vision */
    .vision-content {
      margin-top: 0.5rem !important;
      margin-bottom: 20px !important;
      padding: 20px 0 !important; /* Réduire le padding vertical et supprimer le padding horizontal */
      box-shadow: none !important; /* Supprimer l'ombre pour un look plus léger */
      border-radius: 0 !important; /* Supprimer le border-radius pour utiliser toute la largeur */
    }
    
    /* Conteneur des tuiles */
    .info-tiles-container {
      grid-template-columns: 1fr !important;
      gap: 16px !important; /* Espacement entre les tuiles */
      margin-top: 0 !important;
      padding-left: 8px !important; /* Réduire les marges latérales */
      padding-right: 8px !important; /* Réduire les marges latérales */
      width: 100% !important;
    }
    
    /* Styles des tuiles individuelles */
    .info-tile {
      display: flex !important;
      flex-direction: column !important; /* Disposition verticale pour éviter la coupure du texte */
      padding: 16px !important;
      margin-bottom: 0 !important;
      border-radius: 12px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* Icône des tuiles - centrée en haut */
    .info-tile-icon {
      width: 60px !important;
      height: 60px !important;
      min-width: 60px !important;
      min-height: 60px !important;
      margin: 0 auto 16px auto !important; /* Centré avec espace en dessous */
    }
    
    .info-tile-icon object {
      width: 60px !important;
      height: 60px !important;
    }
    
    /* Contenu des tuiles */
    .info-tile-content {
      flex: 1 !important;
      text-align: center !important;
    }
    
    /* Titre des tuiles */
    .info-tile-title {
      font-size: 1.1rem !important;
      margin-bottom: 10px !important;
      line-height: 1.3 !important;
    }
    
    /* Texte des tuiles - pas de limite de lignes pour éviter la coupure */
    .info-tile-text {
      font-size: 0.9rem !important;
      line-height: 1.5 !important;
      margin-bottom: 0 !important;
      display: block !important; /* Supprimer la limite de lignes */
      overflow: visible !important; /* Permettre au texte de s'afficher intégralement */
    }
    
    /* Animation au survol optimisée pour mobile */
    .info-tile:hover {
      transform: translateY(-3px) !important;
    }
    
    .info-tile:hover .info-tile-icon {
      transform: scale(1.1) !important;
    }
  }
  
  /* ===== SECTION NOTRE MÉTHODE ===== */
  @media (max-width: 767px) {
    .section-method-highlight {
      padding: 0.5rem 8px 1rem !important; /* Réduire l'espace en bas */
      width: 100% !important;
      margin-top: -10px !important;
      position: relative !important;
      z-index: 10 !important; /* S'assurer que cette section est au-dessus */
    }
    
    .method-container {
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      width: 100% !important;
    }
    
    .method-text {
      margin-left: 0 !important;
      text-align: center !important;
      width: 100% !important;
    }
    
    .method-description {
      padding-left: 0 !important;
      text-align: center !important;
      width: 100% !important;
    }
    
    /* Organisation mobile: colonne unique avec espacement réduit entre CTA et description */
    .method-cta-grid {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 0.5rem !important;
      margin-bottom: 1rem !important;
    }
    
    .method-cta-grid .method-cta-demo,
    .method-cta-grid .method-cta-approach {
      margin: 0 0 0.25rem 0 !important;
      width: auto !important;
    }
    
    .method-cta-grid .method-subtext-line1,
    .method-cta-grid .method-subtext-line2 {
      text-align: center !important;
      max-width: 90% !important;
      line-height: 1.4 !important;
      margin-bottom: 1rem !important;
      margin-top: 0 !important;
    }
    
    /* Correction de l'alignement du bouton "Découvrir notre approche" */
    .method-cta {
      margin-left: 0 !important;
      position: relative !important;
      z-index: 15 !important; /* Plus élevé que la section et l'image masquée */
    }
  }
  
  /* ===== SECTION "L'INNOVATION AU COEUR" ET PARTNERS ===== */
  @media (max-width: 767px) {
    /* Innovation au cœur - Section pleine largeur et centrée */
    .section {
      padding-top: 1.5rem !important; /* Réduire l'espace en haut */
      padding-bottom: 1.5rem !important; /* Réduire l'espace en bas */
      width: 100% !important;
    }
    
    /* Titre centré */
    .section-title {
      font-size: 1.7rem !important;
      margin-bottom: 1rem !important; /* Réduire l'espace sous le titre */
      width: 100% !important;
      text-align: center !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
    
    /* Sous-titre/paragraphe centré */
    .partners-subtitle {
      text-align: center !important;
      margin-bottom: 1rem !important; /* Réduire l'espace sous le sous-titre */
      padding: 0 10px !important;
      font-size: 0.95rem !important;
    }
    
    /* Assurer que la section des partenaires est bien intégrée */
    .partners-section {
      margin-bottom: 0 !important; /* Réduire l'espace en bas */
      width: 100% !important;
      padding: 1rem 8px 0.5rem !important; /* Réduire encore plus les espaces */
    }
    
    /* Le slider prend toute la largeur */
    .partners-slider {
      overflow: hidden !important;
      width: 100% !important;
      margin: 0.5rem 0 !important; /* Réduire les marges */
    }
    
    /* Ajuster les logos des partenaires */
    .partner-logo {
      min-width: 100px !important; /* Logos plus petits */
      height: 50px !important; /* Logos plus petits */
      margin: 0 0.6rem !important; /* Réduire les marges */
    }
  }
  
  /* ===== SECTION MASQUÉE ET YOUTUBE ===== */
  @media (max-width: 767px) {
    /* Correction des images masquées */
    .masked-image-section {
      height: 100px !important; /* Réduire la hauteur */
      overflow: visible !important;
      margin-top: 20px !important; /* Déplacer l'image masquée vers le bas */
      margin-bottom: 0 !important;
      position: relative !important;
      z-index: 5 !important; /* Sous la section méthode */
    }
    
    .masked-image-secondary {
      height: 450px !important; /* Augmenter pour accueillir le container YouTube */
      margin-bottom: 0 !important; /* Supprimer la marge en bas */
      position: relative !important;
      z-index: 5 !important;
    }
    
    .section-mask {
      height: 30px !important; /* Masque plus petit */
      width: 100% !important;
    }
    
    /* Repositionner le container YouTube plus bas dans la masked-image-secondary */
    .youtube-container {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      width: calc(100% - 16px) !important;
      margin: 180px auto 0 !important; /* Remonté de 20px pour tenir compte des SVG */
      z-index: 20 !important;
    }

      /* Ajuster le masque SVG */
  .masked-image-secondary .section-mask {
    height: 30px !important;
    top: 0 !important;
    z-index: 5 !important;
  }
    
   /* Améliorer les sections suivantes */
   .section:nth-of-type(5) {
    margin-top: 20px !important;
    position: relative !important;
    z-index: 20 !important;
  }
  }
  
  /* ===== SPÉCIALITÉS ET SECTIONS ADJACENTES ===== */
/* Correction de la mise en forme des spécialités sur mobile */
@media (max-width: 767px) {
  /* Section principale */
  .specialties-section {
    padding: 0 !important;
    margin: 0.5rem 0 !important; /* Réduire de moitié les marges verticales */
    width: 100% !important;
  }
  
  /* Conteneur de texte */
  .specialties-text-new {
    display: flex !important;
    flex-direction: column !important; /* Forcer la disposition en colonne */
    align-items: center !important;
    padding: 0.5rem 0 !important; /* Réduire de moitié le padding vertical */
    gap: 0.75rem !important; /* Réduire l'espacement entre les éléments */
    width: 100% !important;
  }
  
  /* Éléments individuels */
  .specialty-item-new {
    font-size: 1.2rem !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important; /* Assurer que chaque élément est sur sa propre ligne */
    line-height: 1.2 !important;
  }
  
  /* Toujours masquer les séparateurs sur mobile */
  .separator {
    display: none !important;
  }
  
  /* Mise en évidence du texte en dégradé */
  .specialty-item-new .gradient-text {
    font-size: 1.2rem !important; /* Légèrement plus grand */
    display: inline-block !important;
    margin-top: 0.1rem !important;
  }
  
  /* Améliorer la section qui suit YouTube */
  .section:nth-of-type(6) {
    margin-top: -30px !important; /* Réduire la marge négative */
    padding-top: 1.5rem !important;
    position: relative !important;
    z-index: 10 !important;
  }
}
  
  /* Flèche de défilement et dégradé en bas */
  @media (max-width: 767px) {
    .scroll-down-indicator {
      opacity: 0.8;
      transition: opacity 0.3s ease !important;
    }
    
    .scroll-gradient-overlay {
      transition: opacity 0.3s ease !important;
    }
    
    /* Class CSS pour masquer la flèche (sera appliquée via JavaScript) */
    .scroll-down-indicator.hidden,
    .scroll-gradient-overlay.hidden {
      opacity: 0 !important;
      pointer-events: none !important;
    }
  }
  
  /* ===== FAQ ET FORMULAIRE DE CONTACT ===== */
  @media (max-width: 767px) {
    .faq-section,
    .contact-section {
      width: 100% !important;
    }
    
    .faq-container,
    .contact-container {
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 8px !important; /* Réduire les marges latérales */
      padding-right: 8px !important; /* Réduire les marges latérales */
    }
    
    .multi-step-form-container {
      width: 100% !important;
    }
    
    .multi-step-form {
      padding: 1rem !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    
    .interest-options-simple,
    .attachment-options {
      grid-template-columns: 1fr !important;
      width: 100% !important;
    }
    
    .form-navigation {
      flex-direction: column !important;
      width: 100% !important;
    }
    
    .btn-prev, 
    .btn-next, 
    .btn-submit {
      width: 100% !important;
    }
    
    /* Ajustements pour la FAQ */
    .faq-title {
      font-size: 1.7rem !important;
    }
    
    .faq-question h3 {
      font-size: 1rem !important;
    }
    
    .faq-item {
      margin-bottom: 0.8rem !important;
    }
  }
  
  /* ===== TRÈS PETITS ÉCRANS - OPTIMISATIONS SPÉCIFIQUES ===== */
  @media (max-width: 359px) {
    /* Réduire encore plus les marges pour les très petits écrans */
    .container, 
    .section-container,
    .hero-intro-container,
    .faq-container,
    .contact-container,
    .services-container,
    .specialties-container,
    .app-tile,
    .nav-buttons-container,
    .method-container,
    .partners-section,
    .info-tiles-container {
      padding-left: 4px !important;
      padding-right: 4px !important;
      width: calc(100% - 8px) !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    
    /* Ajuster les éléments spécifiques pour les très petits écrans */
    .info-tile {
      padding: 10px !important;
    }
    
    .info-tile-icon {
      width: 50px !important;
      height: 50px !important;
      min-width: 50px !important;
      min-height: 50px !important;
      margin: 0 auto 10px auto !important;
    }
    
    .info-tile-icon object {
      width: 50px !important;
      height: 50px !important;
    }
    
    .section-title {
      font-size: 1.5rem !important;
    }
    
    .nav-button-title {
      font-size: 0.75rem !important;
    }
    
    /* Ajuster le formulaire pour très petits écrans */
    .multi-step-form {
      padding: 0.75rem !important;
    }
    
    /* Ajuster les boutons de navigation */
    .nav-buttons-container {
      padding: 0.75rem 4px !important;
    }
    
    .nav-button {
      padding: 0.6rem 0.4rem !important;
    }
    
    /* Ajustement YouTube pour très petits écrans */
    .youtube-container {
      margin: 180px auto 0 !important; /* Légèrement plus haut sur très petits écrans */
    }
  }
  
  /* Écrans entre 360px et 480px */
  @media (min-width: 360px) and (max-width: 480px) {
    /* Réduire les marges pour les petits écrans */
    .container, 
    .section-container,
    .hero-intro-container,
    .faq-container,
    .contact-container,
    .services-container,
    .specialties-container,
    .app-tile,
    .nav-buttons-container,
    .method-container,
    .partners-section,
    .info-tiles-container {
      padding-left: 8px !important;
      padding-right: 8px !important;
      width: calc(100% - 16px) !important;
    }
    
    .section-title {
      font-size: 1.6rem !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
    
    .services-content-header h2 {
      font-size: 1.6rem !important;
    }
    
    /* Sur les petits écrans, afficher uniquement les icônes */
    .services-menu-item .menu-item-text {
      display: none !important; /* Masquer le texte */
    }
    
    .services-menu-item {
      padding: 0.75rem 0.25rem !important;
    }
    
    .services-menu-item svg {
      width: 24px !important; /* Icône plus grande */
      height: 24px !important;
      margin-right: 0 !important; /* Supprimer la marge à droite */
    }
  }


  @media (max-width: 767px) {
    /* Image de fond fixe pour mobile */
    .hero-mobile-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 59px; /* Hauteur fixe */
      background-image: url('../assets2/newtest.jpg');
      background-size: cover;
      background-position: center;
      z-index: 1; /* Derrière la navbar */
      opacity: 0.7;
      transition: opacity 0.3s ease; /* Transition douce */
      /* Empêcher les problèmes liés au défilement */
      pointer-events: none;
    }
  
    .hero-intro-section {
      position: relative;
      z-index: 10; /* Au-dessus de l'image de fond */
      margin-top: -40px; /* Espace pour l'image de fond */
      background-color: transparent;
    }
  
    /* Conteneur principal */
    #mainContent {
      position: relative;
      z-index: 5; /* Au-dessus de l'image de fond mais en dessous de la navbar */
    }
  
    .top-bar {
      z-index: 99 !important;
      position: fixed !important;
      background-color: transparent !important;
    }
  }

  @media (max-width: 767px) {
    .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);
    }
  }

  /* Optimisation des tuiles de vision entre 480px et 767px */
@media (min-width: 480px) and (max-width: 767px) {
  /* Passage à une disposition en 2 colonnes */
  .info-tiles-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  /* Réduction de la taille des tuiles */
  .info-tile {
    padding: 15px !important;
    min-height: 0 !important;
  }
  
  /* Réduction de la taille des icônes */
  .info-tile-icon {
    margin-bottom: 12px !important;
    height: 50px !important;
  }
  
  .info-tile-icon object {
    width: 120px !important;
    height: 120px !important;
  }
  
  /* Ajustement des textes */
  .info-tile-title {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }
  
  .info-tile-text {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
  
  /* La dernière tuile s'étend sur 2 colonnes sur les écrans plus larges */
  .info-tiles-container .info-tile:last-child {
    grid-column: span 2;
  }
}

/* Pour les écrans très petits, garder une seule colonne */
@media (max-width: 479px) {
  .info-tiles-container {
    grid-template-columns: 1fr !important;
  }
}