/* mobile-fixes-ppe-quality.css - Corrections spécifiques pour les pages PPE et Quality sur mobile */

/* ===== CORRECTION DU BOUTON "PRENDRE RENDEZ-VOUS" CTA QUI DÉPASSE ===== */
@media (max-width: 767px) {
  /* Correction du bouton CTA qui dépasse à droite */
  .cta-section {
    padding: 3rem 1rem !important; /* Ajouter du padding latéral à la section */
  }
  
  .cta-section .container {
    padding: 0 1rem !important; /* Padding supplémentaire au container */
    max-width: 100% !important;
  }
  
  .cta-button {
    display: inline-block !important;
    padding: 1rem 2rem !important; /* Réduire le padding horizontal */
    max-width: calc(100vw - 4rem) !important; /* Limiter la largeur max */
    width: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .cta-title {
    font-size: 2rem !important; /* Réduire le titre sur mobile */
    margin-bottom: 1rem !important;
    padding: 0 1rem !important;
  }
  
  .cta-text {
    font-size: 1.1rem !important; /* Réduire le texte sur mobile */
    margin-bottom: 2rem !important;
    padding: 0 1rem !important;
  }
}

/* Correction pour les très petits écrans */
@media (max-width: 480px) {
  .cta-section {
    padding: 2.5rem 0.5rem !important;
  }
  
  .cta-section .container {
    padding: 0 0.5rem !important;
  }
  
  .cta-button {
    padding: 0.9rem 1.5rem !important; /* Encore plus compact */
    max-width: calc(100vw - 2rem) !important;
    font-size: 1.1rem !important;
  }
  
  .cta-title {
    font-size: 1.8rem !important;
  }
  
  .cta-text {
    font-size: 1rem !important;
  }
}

/* ===== CORRECTIONS POUR LE BOUTON TÉLÉCHARGER BROCHURE PPE SUR MOBILE ===== */
@media (max-width: 767px) {
  /* Correction du bouton de téléchargement sur la page PPE */
  .safety-page .brochure-cta,
  .safety-page .cta-button.brochure-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 200px !important;
    max-width: 100% !important;
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    gap: 8px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #EC4899, #EF4444) !important;
    color: white !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3) !important;
    margin: 0 auto !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 100 !important;
    position: relative !important;
  }
  
  .safety-page .brochure-cta:hover,
  .safety-page .cta-button.brochure-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4) !important;
    background: linear-gradient(135deg, #BE185D, #DC2626) !important;
  }
  
  .safety-page .brochure-cta svg,
  .safety-page .cta-button.brochure-cta svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }
  
  /* S'assurer que le conteneur du bouton est bien centré */
  .safety-page .brochure-content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Correction de la section brochure sur mobile */
  .safety-page .brochure-section {
    padding: 2rem 0 !important;
  }
  
  .safety-page .brochure-container {
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 0 1rem !important;
  }
  
  .safety-page .brochure-animation {
    order: -1 !important; /* Mettre l'animation en premier */
    min-height: 250px !important;
  }
  
  .safety-page .pdf-pages-stack {
    width: 280px !important;
    height: 240px !important;
  }
  
  .safety-page .pdf-page {
    width: 220px !important;
    height: 124px !important;
  }
}

/* ===== CORRECTIONS POUR LES CONTENEURS DE FONCTIONNALITÉS (CONTENEURS 2 ET 3) ===== */
@media (max-width: 767px) {
  /* Correction pour TOUTES les cartes - espacement réduit */
  .feature-card {
    padding: 0.75rem !important; /* Réduit de 1rem à 0.75rem */
    margin-bottom: 1rem !important;
  }
  
  .feature-card-inner {
    padding: 0.75rem !important; /* Réduit significativement */
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  
  .feature-content {
    padding: 0.5rem 0 0 0 !important; /* Espacement minimal autour du contenu */
    margin: 0 !important;
  }
  
  /* Correction pour les cartes moyennes (conteneurs 2 et 3) */
  .feature-card-medium {
    min-height: auto !important;
    height: auto !important;
    padding: 0.75rem !important; /* Espacement uniforme */
  }
  
  .feature-card-medium .feature-card-inner {
    padding: 0.75rem !important; /* Espacement réduit */
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  
  /* Correction pour la grande carte aussi */
  .feature-card-large {
    padding: 0.75rem !important;
  }
  
  .feature-card-large .feature-card-inner {
    padding: 0.75rem !important;
  }
  
  /* Correction pour les petites cartes */
  .feature-card-small {
    padding: 0.75rem !important;
  }
  
  .feature-card-small .feature-card-inner {
    padding: 0.75rem !important;
  }
  
  .feature-card-medium .feature-content {
    padding: 0 !important;
    margin-top: 1rem !important;
  }
  
  .feature-card-medium .feature-title-modern {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
  }
  
  .feature-card-medium .feature-description-modern {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Réduire l'icône sur mobile */
  .feature-card-medium .feature-icon-modern {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 0.5rem !important;
  }
  
  .feature-card-medium .feature-icon-modern svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  /* Supprimer les effets d'animation qui peuvent ajouter de l'espace */
  .feature-card-medium .alert-pulse,
  .feature-card-medium .dashboard-glow {
    display: none !important;
  }
  
  /* Grille responsive pour mobile */
  .features-bento-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 1rem !important;
    min-height: auto !important;
  }
  
  .feature-card-large,
  .feature-card-medium,
  .feature-card-small {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    min-height: auto !important;
    height: auto !important;
  }
  
  /* Réduire l'espacement général des fonctionnalités */
  .features-section-modern {
    padding: 3rem 0 2rem 0 !important;
  }
  
  .features-header {
    margin-bottom: 2rem !important;
  }
  
  .section-title-modern {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .features-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }
}

/* ===== CORRECTIONS SPÉCIFIQUES POUR LA PAGE QUALITY ===== */
@media (max-width: 767px) {
  /* Correction du bouton de téléchargement sur la page Quality - harmonisé avec PPE */
  .defect-page .brochure-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 200px !important;
    max-width: 100% !important;
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    gap: 8px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #10B981, #059669) !important; /* Même dégradé que le titre */
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    margin: 0 auto !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 100 !important;
    position: relative !important;
  }
  
  .defect-page .brochure-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
    background: linear-gradient(135deg, #059669, #047857) !important; /* Dégradé plus foncé au hover */
  }
  
  .defect-page .brochure-cta svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }
  
  /* S'assurer que le conteneur du bouton est bien centré */
  .defect-page .brochure-content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Correction de la section brochure sur mobile pour Quality */
  .defect-page .brochure-section {
    padding: 2rem 0 !important;
  }
  
  .defect-page .brochure-container {
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 0 1rem !important;
  }
  
  .defect-page .brochure-animation {
    order: -1 !important; /* Mettre l'animation en premier */
    min-height: 250px !important;
  }
  
  .defect-page .pdf-pages-stack {
    width: 280px !important;
    height: 240px !important;
  }
  
  .defect-page .pdf-page {
    width: 220px !important;
    height: 124px !important;
  }
}

/* ===== SLIDER SIMPLE POUR LES 3 IMAGES EPI/DEFECTS - MOBILE UNIQUEMENT ===== */
@media (max-width: 767px) {
  /* Container slider horizontal pour les 3 images - AVEC CARTE INVISIBLE */
  .epi-gallery,
  .defects-gallery {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 1rem !important;
    /* SOLUTION: Padding normal, la "carte invisible" sera créée avec ::before */
    padding: 0.5rem 1.5rem 1rem 1rem !important;
    margin: 1rem 0 !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    /* Barre de scroll stylée */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(52, 179, 250, 0.5) transparent !important;
    /* Smooth scrolling */
    scroll-behavior: smooth !important;
    /* S'assurer que le contenu peut déborder pour accéder à tous les éléments */
    box-sizing: border-box !important;
    /* FORCER LE DÉMARRAGE À GAUCHE */
    justify-content: flex-start !important;
  }

  /* CARTE INVISIBLE AVANT LA PREMIÈRE CARTE - PSEUDO-ÉLÉMENT */
  .epi-gallery::before,
  .defects-gallery::before {
    content: '' !important;
    flex: 0 0 120px !important; /* Même taille qu'une vraie carte */
    min-width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    margin-right: 1rem !important; /* Gap avec la première vraie carte */
    scroll-snap-align: start !important; /* Point de snap invisible */
    flex-shrink: 0 !important;
    /* Invisible mais prend de l'espace */
    background: transparent !important;
    border: none !important;
    pointer-events: none !important; /* Ne pas interférer avec les interactions */
  }
  
  /* Webkit scrollbar pour Chrome/Safari */
  .epi-gallery::-webkit-scrollbar,
  .defects-gallery::-webkit-scrollbar {
    height: 4px !important;
    margin-top: 0.5rem !important;
  }
  
  .epi-gallery::-webkit-scrollbar-track,
  .defects-gallery::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 2px !important;
  }
  
  .epi-gallery::-webkit-scrollbar-thumb,
  .defects-gallery::-webkit-scrollbar-thumb {
    background: rgba(52, 179, 250, 0.6) !important;
    border-radius: 2px !important;
  }
  
  /* Items du slider - configuration pour défilement horizontal OPTIMISÉE */
  .epi-item,
  .defect-item {
    flex: 0 0 120px !important; /* Largeur fixe pour chaque item */
    min-width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    padding: 0.75rem 0.5rem !important; /* Padding réduit pour mobile */
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    scroll-snap-align: start !important; /* RETOUR À START pour navigation plus prévisible */
    flex-shrink: 0 !important; /* Empêcher la compression */
  }
  
  /* PREMIÈRE CARTE: Margin normale grâce à la carte invisible */
  .epi-item:first-child,
  .defect-item:first-child {
    margin-left: 0 !important; /* Margin normale, la carte invisible gère l'espace */
    scroll-snap-align: start !important; /* Point de snap de la première vraie carte */
  }
  
  /* DERNIÈRE CARTE: Margin pour pouvoir atteindre la fin */
  .epi-item:last-child,
  .defect-item:last-child {
    margin-right: 0.5rem !important; /* Petit décalage pour pouvoir la voir complètement */
  }
  
  .epi-item:hover,
  .defect-item:hover {
    transform: translateY(-3px) scale(1.02) !important; /* Effet plus subtil */
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
  }
  
  /* Images optimisées pour le slider */
  .epi-image,
  .defect-image {
    width: auto !important;
    max-width: 70px !important; /* Taille réduite pour le slider */
    height: 50px !important; /* Hauteur adaptée */
    object-fit: contain !important;
    border-radius: 8px !important;
    margin: 0 auto 0.5rem auto !important;
    display: block !important;
    transition: all 0.3s ease !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
  
  .epi-item:hover .epi-image,
  .defect-item:hover .defect-image {
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.05) !important;
  }
  
  /* Labels optimisés pour le slider */
  .epi-label,
  .defect-label {
    font-size: 0.7rem !important; /* Taille réduite pour le slider */
    line-height: 1.1 !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    transition: color 0.3s ease !important;
    margin: 0 !important;
    padding: 0 0.25rem !important;
    text-align: center !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    word-wrap: break-word !important; /* Pour éviter les débordements */
    hyphens: auto !important;
  }
  
  .epi-item:hover .epi-label,
  .defect-item:hover .defect-label {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
  }
}

/* ===== MODAL POUR LES IMAGES CLIQUABLES - TOUTES PLATEFORMES ===== */
.image-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  display: none !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 10000 !important;
  padding: 2rem !important;
  box-sizing: border-box !important;
  animation: modalFadeIn 0.4s ease !important;
  /* MOBILE: Empêcher le scroll en arrière-plan */
  overflow: hidden !important;
  /* MOBILE: Centrage parfait */
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.image-modal.active {
  display: flex !important;
}

.image-modal-content {
  position: relative !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  width: 100% !important;
  max-width: 500px !important;
  background: var(--background-card) !important;
  border-radius: 20px !important;
  padding: 2.5rem !important;
  text-align: center !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  animation: modalSlideUp 0.4s ease !important;
  backdrop-filter: blur(20px) !important;
  overflow: hidden !important;
}

/* Effet de glassmorphism */
.image-modal-content::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 50%, 
    rgba(255, 255, 255, 0.02) 100%) !important;
  border-radius: 20px !important;
  z-index: -1 !important;
}

.image-modal-image {
  width: 100% !important;
  max-width: 120px !important;
  height: auto !important;
  border-radius: 16px !important;
  margin-bottom: 1.5rem !important;
  border: none !important; /* Supprimer le cadre */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.3s ease !important;
}

/* Animation de flottement uniquement pour les EPI (page PPE) */
.safety-page .image-modal-image {
  animation: floatAnimation 3s ease-in-out infinite !important;
}

.image-modal-content:hover .image-modal-image {
  transform: scale(1.05) !important;
}

/* Animation de flottement pour les EPI */
@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.image-modal-title {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 1rem !important;
  background: linear-gradient(135deg, var(--text-primary), var(--text-secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.image-modal-description {
  font-size: 1.1rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
  padding: 0 1rem !important;
}

.image-modal-close {
  position: absolute !important;
  top: 1.5rem !important;
  right: 1.5rem !important;
  width: 44px !important;
  height: 44px !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-primary) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.image-modal-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: rotate(90deg) scale(1.1) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Animations pour le modal */
@keyframes modalFadeIn {
  from { 
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to { 
    opacity: 1;
    backdrop-filter: blur(10px);
  }
}

@keyframes modalSlideUp {
  from { 
    opacity: 0;
    transform: translateY(60px) scale(0.9);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Indicateur visuel que les images sont cliquables - TOUTES PLATEFORMES */
.epi-item::after,
.defect-item::after {
  content: '' !important;
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  width: 8px !important;
  height: 8px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border-radius: 50% !important;
  opacity: 0 !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
  transform: scale(0) !important;
}

.epi-item:hover::after,
.defect-item:hover::after {
  opacity: 1 !important;
  transform: scale(1) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 8px rgba(255, 255, 255, 0.4) !important;
}

/* ===== STYLES DESKTOP POUR LES GALERIES ===== */
@media (min-width: 768px) {
  /* Rendre les galeries cliquables aussi sur desktop */
  .epi-gallery,
  .defects-gallery {
    display: flex !important;
    gap: 1.5rem !important;
    margin: 1.5rem 0 !important;
    padding: 1.5rem !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    justify-content: center !important;
  }
  
  .epi-item,
  .defect-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex: 1 !important;
    max-width: 150px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    padding: 1.25rem !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  
  .epi-item::before,
  .defect-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, 
      rgba(255, 255, 255, 0.05) 0%, 
      rgba(255, 255, 255, 0.02) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    border-radius: 12px !important;
  }
  
  .epi-item:hover::before,
  .defect-item:hover::before {
    opacity: 1 !important;
  }
  
  .epi-item:hover,
  .defect-item:hover {
    transform: translateY(-8px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
  }
  
  .epi-image,
  .defect-image {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important; /* CHANGEMENT: contain au lieu de cover pour éviter les débordements */
    border-radius: 12px !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1)) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.05) !important; /* Fond léger pour mieux voir les contours */
  }
  
  .epi-item:hover .epi-image,
  .defect-item:hover .defect-image {
    transform: scale(1.1) !important;
    filter: drop-shadow(0 8px 24px rgba(255, 255, 255, 0.2)) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
  }
  
  .epi-label,
  .defect-label {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-align: center !important;
    position: relative !important;
    z-index: 2 !important;
    transition: color 0.3s ease !important;
    margin: 0 !important;
  }
  
  .epi-item:hover .epi-label,
  .defect-item:hover .defect-label {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
  }
  
  /* Modal desktop - tailles optimisées */
  .image-modal-content {
    max-width: 600px !important;
    padding: 3rem !important;
  }
  
  .image-modal-image {
    max-width: 140px !important;
    margin-bottom: 2rem !important;
  }
  
  /* Animation de flottement desktop pour EPI - plus subtile */
  .safety-page .image-modal-image {
    animation: floatAnimationDesktop 3s ease-in-out infinite !important;
  }
  
  /* Combiner flottement et hover pour EPI */
  .safety-page .image-modal-content:hover .image-modal-image {
    animation: floatAnimationDesktop 3s ease-in-out infinite !important;
    transform: scale(1.05) translateY(-12px) !important;
  }
  
  .image-modal-title {
    font-size: 1.8rem !important;
    margin-bottom: 1.25rem !important;
  }
  
  .image-modal-description {
    font-size: 1.2rem !important;
    padding: 0 1.5rem !important;
  }
}

/* ===== CORRECTIONS POUR LES TRÈS PETITS ÉCRANS ===== */
@media (max-width: 480px) {
  .features-bento-grid {
    padding: 0 0.5rem !important;
  }
  
  .feature-card {
    padding: 1rem !important;
  }
  
  .brochure-title {
    font-size: 1.8rem !important;
  }
  
  .brochure-description {
    font-size: 0.9rem !important;
  }
  
  .safety-page .brochure-cta,
  .safety-page .cta-button.brochure-cta,
  .defect-page .brochure-cta {
    min-width: 180px !important;
    font-size: 0.85rem !important;
    padding: 10px 16px !important;
  }
}

/* ===== CORRECTION DES TAGS ET STATS (remis après suppression accidentelle) ===== */
@media (max-width: 767px) {
  /* Correction des tags */
  .feature-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
  }
  
  .feature-tag {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-secondary) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  
  /* Correction des stats dans les grandes cartes */
  .feature-stats {
    display: flex !important;
    gap: 1rem !important;
    margin: 1rem 0 !important;
  }
  
  .stat-item {
    text-align: center !important;
  }
  
  .stat-number {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    display: block !important;
    color: var(--text-primary) !important;
  }
  
  .stat-label {
    font-size: 0.7rem !important;
    color: var(--text-secondary) !important;
    margin-top: 0.25rem !important;
  }
}

/* ===== AJUSTEMENT SPÉCIFIQUE POUR LARGEUR 425PX ===== */
@media (min-width: 400px) and (max-width: 450px) {
  .epi-gallery,
  .defects-gallery {
    gap: 1.25rem !important; /* Gap plus grand pour 425px */
    margin: 2rem auto !important;
    padding: 0.5rem !important; /* Petit padding pour structure */
  }
  
  .epi-item,
  .defect-item {
    flex: 0 0 calc(50% - 0.75rem) !important; /* 2 colonnes optimisées pour 425px */
    max-width: calc(50% - 0.75rem) !important;
    min-width: 150px !important; /* Largeur minimale plus grande */
    padding: 1.25rem 0.5rem !important; /* Padding plus généreux */
    background: rgba(255, 255, 255, 0.08) !important; /* Fond plus visible */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
  
  .epi-item:hover,
  .defect-item:hover {
    transform: translateY(-4px) scale(1.03) !important; /* Effet hover plus prononcé */
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
  }
  
  .epi-image,
  .defect-image {
    max-width: 90px !important; /* Images plus grandes pour 425px */
    height: 70px !important; /* Hauteur augmentée */
    object-fit: contain !important; /* CHANGEMENT: contain au lieu de cover pour éviter les débordements */
    margin: 0 auto 0.75rem auto !important;
    border: 3px solid rgba(255, 255, 255, 0.15) !important; /* Bordure plus épaisse */
    background: rgba(255, 255, 255, 0.05) !important; /* Fond léger pour mieux voir les contours */
  }
  
  .epi-item:hover .epi-image,
  .defect-item:hover .defect-image {
    transform: scale(1.08) !important; /* Scale plus important au hover */
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
  }
  
  .epi-label,
  .defect-label {
    font-size: 0.8rem !important; /* Texte légèrement plus grand */
    line-height: 1.3 !important;
    font-weight: 600 !important; /* Plus gras pour plus de présence */
    padding: 0 0.5rem !important;
    margin-top: 0.25rem !important;
  }
  
  /* Indicateur de zoom plus visible sur 425px */
  .epi-item::after,
  .defect-item::after {
    width: 10px !important; /* Légèrement plus grand sur 425px */
    height: 10px !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    background: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
  }
}

/* ===== AJUSTEMENTS POUR TRÈS PETITS ÉCRANS ===== */
@media (max-width: 480px) {
  .epi-item,
  .defect-item {
    flex: 0 0 calc(50% - 0.5rem) !important; /* 2 colonnes sur très petits écrans */
    max-width: calc(50% - 0.5rem) !important;
    min-width: 120px !important;
    padding: 0.75rem 0.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .epi-gallery,
  .defects-gallery {
    gap: 0.75rem !important;
    margin: 1rem auto !important;
    justify-content: center !important;
  }
  
  .epi-image,
  .defect-image {
    max-width: 70px !important;
    height: 50px !important;
    margin: 0 auto 0.5rem auto !important;
  }
  
  .epi-label,
  .defect-label {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  /* ===== HARMONISATION MODALES MOBILE - TOUTES PAGES ===== */
  .image-modal-content {
    padding: 1rem !important; /* Padding réduit pour plus d'espace */
    margin: 0.5rem !important; /* Margin réduite */
    max-width: calc(100vw - 1rem) !important; /* Plus de largeur disponible */
    max-height: calc(100vh - 1rem) !important; /* Hauteur optimisée */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
  }
  
  /* BOUTON FERMER - Positionnement optimal en haut à droite */
  .image-modal-close {
    position: absolute !important;
    top: 0.75rem !important; /* Espacement du haut */
    right: 0.75rem !important; /* Espacement de la droite */
    width: 32px !important; /* Taille tactile optimale */
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.7) !important; /* Fond sombre pour contraste */
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important; /* Cercle parfait */
    color: white !important;
    font-size: 1.2rem !important; /* Taille lisible */
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 100 !important; /* Au-dessus de tout */
    transition: all 0.3s ease !important;
  }
  
  .image-modal-close:hover {
    background: rgba(255, 0, 0, 0.8) !important; /* Rouge au hover */
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: scale(1.1) !important; /* Effet grossissement */
  }
  
  /* IMAGE - Maximum de visibilité */
  .image-modal-image {
    max-width: 200px !important; /* DOUBLÉ pour meilleure visibilité */
    max-height: 150px !important; /* Hauteur proportionnelle */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important; /* Garder les proportions */
    margin-bottom: 1rem !important;
    border-radius: 8px !important; /* Coins arrondis */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; /* Ombre pour relief */
  }
  
  /* TITRE - Typographie réduite et optimisée */
  .image-modal-title {
    font-size: 1.1rem !important; /* RÉDUIT de 1.3rem à 1.1rem */
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important; /* Espacement réduit */
    text-align: center !important;
    line-height: 1.3 !important; /* Meilleure lisibilité */
    color: var(--text-primary) !important;
    padding: 0 2rem !important; /* Éviter le bouton fermer */
  }
  
  /* DESCRIPTION - Typographie compacte */
  .image-modal-description {
    font-size: 0.85rem !important; /* RÉDUIT de 1rem à 0.85rem */
    line-height: 1.4 !important; /* Compact mais lisible */
    text-align: center !important;
    padding: 0 1rem !important; /* Padding horizontal réduit */
    color: var(--text-secondary) !important;
    margin-bottom: 0 !important; /* Pas de margin en bas */
  }
}

/* Animation de flottement desktop (plus ample) */
@keyframes floatAnimationDesktop {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* ===== CORRECTION DÉCALAGE TOP-BAR ===== */
/* Forcer la top-bar à rester en haut de page */
header.top-bar {
  top: 0 !important;
}

/* Gestion du scroll dynamique avec réduction de la top-bar */
.top-bar.scrolled {
  top: 0 !important;
  height: 60px;
  transition: top 0.3s ease, height 0.3s ease;
}

.logo-primary {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.scrolled .logo-primary {
  opacity: 0;
}

.logo-secondary {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.scrolled .logo-secondary {
  opacity: 1;
}

/* ===== SUPPRESSION DES BORDURES POUR LES IMAGES EPI (PAGE PPE UNIQUEMENT) ===== */
/* Mobile et tablette */
@media (max-width: 767px) {
  .safety-page .epi-image {
    border: none !important; /* Supprimer la bordure pour les PNG transparents */
    background: none !important; /* Supprimer le fond */
  }
  
  .safety-page .epi-item:hover .epi-image {
    border: none !important; /* Pas de bordure même au hover */
    background: none !important;
  }
}

/* Écrans moyens (425px) */
@media (min-width: 400px) and (max-width: 450px) {
  .safety-page .epi-image {
    border: none !important; /* Supprimer la bordure épaisse */
    background: none !important;
  }
  
  .safety-page .epi-item:hover .epi-image {
    border: none !important;
    background: none !important;
  }
}

/* Desktop */
@media (min-width: 768px) {
  .safety-page .epi-image {
    border: none !important; /* Supprimer la bordure sur desktop aussi */
    background: none !important;
  }
  
  .safety-page .epi-item:hover .epi-image {
    border: none !important;
    background: none !important;
  }
}

/* ===== SLIDER POUR LES 3 IMAGES DES FONCTIONNALITÉS CLÉS PPE ===== */
@media (max-width: 767px) {
  /* Transformer les images EPI des fonctionnalités clés en slider - IDENTIQUE À QUALITY */
  .features-section-modern .epi-gallery {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 1rem !important;
    /* SOLUTION: Padding normal, la "carte invisible" sera créée avec ::before */
    padding: 0.5rem 1.5rem 1rem 1rem !important;
    margin: 1rem 0 !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    /* Barre de scroll stylée */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(52, 179, 250, 0.5) transparent !important;
    /* Smooth scrolling */
    scroll-behavior: smooth !important;
    /* S'assurer que le contenu peut déborder pour accéder à tous les éléments */
    box-sizing: border-box !important;
    /* FORCER LE DÉMARRAGE À GAUCHE */
    justify-content: flex-start !important;
  }

  /* CARTE INVISIBLE - FORCER sur PPE */
  .features-section-modern .epi-gallery::before {
    content: '' !important;
    flex: 0 0 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    margin-right: 1rem !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    pointer-events: none !important;
  }
  
  /* ITEMS EPI - FORCER sur PPE */
  .features-section-modern .epi-item {
    flex: 0 0 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    padding: 0.75rem 0.5rem !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }
  
  /* HOVER ITEMS - FORCER sur PPE */
  .features-section-modern .epi-item:hover {
    transform: translateY(-3px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
  }
  
  /* IMAGES EPI - FORCER sur PPE */
  .features-section-modern .epi-image {
    width: auto !important;
    max-width: 70px !important;
    height: 50px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    margin: 0 auto 0.5rem auto !important;
    display: block !important;
    transition: all 0.3s ease !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
  
  /* HOVER IMAGES - FORCER sur PPE */
  .features-section-modern .epi-item:hover .epi-image {
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.05) !important;
  }
  
  /* LABELS - FORCER sur PPE */
  .features-section-modern .epi-label {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    transition: color 0.3s ease !important;
    margin: 0 !important;
    padding: 0 0.25rem !important;
    text-align: center !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* HOVER LABELS - FORCER sur PPE */
  .features-section-modern .epi-item:hover .epi-label {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
  }
  
  /* BARRE DE SCROLL - FORCER sur PPE */
  .features-section-modern .epi-gallery::-webkit-scrollbar {
    height: 4px !important;
    margin-top: 0.5rem !important;
  }
  
  .features-section-modern .epi-gallery::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 2px !important;
  }
  
  .features-section-modern .epi-gallery::-webkit-scrollbar-thumb {
    background: rgba(52, 179, 250, 0.6) !important;
    border-radius: 2px !important;
  }
}

/* ===== LIENS LÉGAUX CÔTE À CÔTE SUR MOBILE - TOUTES PAGES ===== */
@media (max-width: 767px) {
  /* FORCER LA DISPOSITION HORIZONTALE DES LIENS LÉGAUX */
  .footer-links {
    display: flex !important;
    flex-direction: row !important; /* FORCER la disposition horizontale */
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important; /* Espacement entre les éléments */
    flex-wrap: nowrap !important; /* Empêcher le retour à la ligne */
  }
  
  /* AFFICHER LE SÉPARATEUR "|" */
  .footer-links span {
    display: inline !important; /* FORCER l'affichage du séparateur */
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* LIENS LÉGAUX - Style optimisé mobile */
  .footer-links a {
    font-size: 0.85rem !important; /* Taille légèrement réduite pour mobile */
    white-space: nowrap !important; /* Empêcher le retour à la ligne */
    padding: 0.25rem 0.5rem !important; /* Padding tactile */
    border-radius: 4px !important; /* Coins arrondis */
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    color: var(--text-secondary) !important;
  }
  
  /* EFFET HOVER POUR LES LIENS */
  .footer-links a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--primary-02) !important;
    transform: translateY(-1px) !important; /* Léger effet de survol */
  }
}

/* ===== TRÈS PETITS ÉCRANS - MAINTENIR LA DISPOSITION HORIZONTALE ===== */
@media (max-width: 480px) {
  /* SURCHARGER les styles existants qui forcent la disposition verticale */
  .footer-links {
    flex-direction: row !important; /* MAINTENIR horizontal même sur très petits écrans */
    gap: 0.5rem !important; /* Espacement réduit pour très petits écrans */
  }
  
  /* GARDER LE SÉPARATEUR VISIBLE */
  .footer-links span {
    display: inline !important; /* SURCHARGER le display: none du CSS existant */
    font-size: 0.8rem !important; /* Taille réduite */
  }
  
  /* LIENS PLUS COMPACTS SUR TRÈS PETITS ÉCRANS */
  .footer-links a {
    font-size: 0.8rem !important; /* Plus petit */
    padding: 0.2rem 0.4rem !important; /* Padding réduit */
  }
}

/* ===== ÉCRANS EXTRA-PETITS (< 350px) ===== */
@media (max-width: 350px) {
  .footer-links {
    gap: 0.3rem !important; /* Espacement minimal */
  }
  
  .footer-links a {
    font-size: 0.75rem !important; /* Encore plus petit */
    padding: 0.15rem 0.3rem !important; /* Padding minimal */
  }
  
  .footer-links span {
    font-size: 0.7rem !important; /* Séparateur très petit */
  }
}

/* ===== MODE SOMBRE - ADAPTATION DES COULEURS ===== */
[data-theme="dark"] .footer-links a {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .footer-links a:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--primary-02) !important;
}

[data-theme="dark"] .footer-links span {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* ===== HARMONISATION MODALES - FORCER SUR TOUTES LES PAGES ===== */
@media (max-width: 767px) {
  /* FORCER les nouveaux styles de modales sur PPE et toutes les pages */
  .safety-page .image-modal-content,
  .defect-page .image-modal-content,
  body .image-modal-content {
    padding: 1rem !important;
    margin: 0.5rem !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100vh - 1rem) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
  }
  
  /* BOUTON FERMER SVG - Harmonisé sur toutes les pages */
  .safety-page .image-modal-close,
  .defect-page .image-modal-close,
  body .image-modal-close {
    position: absolute !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: white !important;
    cursor: pointer !important;
    z-index: 100 !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Suppression de toutes les propriétés texte - maintenant SVG */
  }
  
  /* SVG À L'INTÉRIEUR DU BOUTON FERMER */
  .safety-page .image-modal-close svg,
  .defect-page .image-modal-close svg,
  body .image-modal-close svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
  }
  
  .safety-page .image-modal-close:hover,
  .defect-page .image-modal-close:hover,
  body .image-modal-close:hover {
    background: rgba(255, 0, 0, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: scale(1.1) !important;
  }
  
  /* SVG HOVER EFFET */
  .safety-page .image-modal-close:hover svg,
  .defect-page .image-modal-close:hover svg,
  body .image-modal-close:hover svg {
    stroke: white !important;
    transform: rotate(90deg) !important;
  }
  
  /* IMAGE - Harmonisée sur toutes les pages */
  .safety-page .image-modal-image,
  .defect-page .image-modal-image,
  body .image-modal-image {
    max-width: 200px !important;
    max-height: 150px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin-bottom: 1rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* TITRE - Harmonisé sur toutes les pages */
  .safety-page .image-modal-title,
  .defect-page .image-modal-title,
  body .image-modal-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
    line-height: 1.3 !important;
    color: var(--text-primary) !important;
    padding: 0 2rem !important;
  }
  
  /* DESCRIPTION - Harmonisée sur toutes les pages */
  .safety-page .image-modal-description,
  .defect-page .image-modal-description,
  body .image-modal-description {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    padding: 0 1rem !important;
    color: var(--text-secondary) !important;
    margin-bottom: 0 !important;
  }
}

/* ===== FORCER ABSOLUMENT LE SLIDER PPE - PRIORITÉ MAXIMALE ===== */
@media (max-width: 767px) {
  /* FORCER avec sélecteurs ultra-spécifiques - NIVEAU 1 */
  body.safety-page .features-section-modern .epi-gallery,
  html body.safety-page .features-section-modern .epi-gallery,
  html body.safety-page section.features-section-modern .epi-gallery {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    gap: 1rem !important;
    padding: 0.5rem 1rem 1rem 1rem !important;
    margin: 1rem 0 !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(52, 179, 250, 0.5) transparent !important;
    scroll-behavior: smooth !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    white-space: nowrap !important;
  }

  /* ITEMS EPI - FORCER avec sélecteurs ultra-spécifiques */
  body.safety-page .features-section-modern .epi-gallery .epi-item,
  html body.safety-page .features-section-modern .epi-gallery .epi-item,
  html body.safety-page section.features-section-modern .epi-gallery .epi-item {
    flex: 0 0 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    width: 120px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    padding: 0.75rem 0.5rem !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    white-space: normal !important;
    float: none !important;
    clear: none !important;
  }

  /* IMAGES EPI - FORCER avec sélecteurs ultra-spécifiques */
  body.safety-page .features-section-modern .epi-gallery .epi-item .epi-image,
  html body.safety-page .features-section-modern .epi-gallery .epi-item .epi-image,
  html body.safety-page section.features-section-modern .epi-gallery .epi-item .epi-image {
    width: auto !important;
    max-width: 70px !important;
    height: 50px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    margin: 0 auto 0.5rem auto !important;
    display: block !important;
    transition: all 0.3s ease !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    float: none !important;
    position: relative !important;
  }

  /* LABELS EPI - FORCER avec sélecteurs ultra-spécifiques */
  body.safety-page .features-section-modern .epi-gallery .epi-item .epi-label,
  html body.safety-page .features-section-modern .epi-gallery .epi-item .epi-label,
  html body.safety-page section.features-section-modern .epi-gallery .epi-item .epi-label {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    transition: color 0.3s ease !important;
    margin: 0 !important;
    padding: 0 0.25rem !important;
    text-align: center !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    display: block !important;
    float: none !important;
    position: relative !important;
  }

  /* PAS DE CARTE INVISIBLE POUR PPE - SLIDER SIMPLE */
  
  /* CENTRER LA CARTE GILET (2ème carte) PAR DÉFAUT */
  body.safety-page .features-section-modern .epi-gallery .epi-item:first-child,
  html body.safety-page .features-section-modern .epi-gallery .epi-item:first-child,
  html body.safety-page section.features-section-modern .epi-gallery .epi-item:first-child {
    margin-left: -60px !important; /* Décaler pour centrer la 2ème carte (Gilet) */
    scroll-snap-align: start !important;
  }
  
  /* CARTE GILET (2ème) - Position centrale */
  body.safety-page .features-section-modern .epi-gallery .epi-item:nth-child(2),
  html body.safety-page .features-section-modern .epi-gallery .epi-item:nth-child(2),
  html body.safety-page section.features-section-modern .epi-gallery .epi-item:nth-child(2) {
    scroll-snap-align: center !important;
  }
  
  /* LIMITER LE SCROLL - PAS DE DÉFILEMENT VERS LA GAUCHE */
  body.safety-page .features-section-modern .epi-gallery,
  html body.safety-page .features-section-modern .epi-gallery,
  html body.safety-page section.features-section-modern .epi-gallery {
    scroll-padding-left: 0 !important;
    scroll-margin-left: 0 !important;
    /* Empêcher le scroll au-delà de la première carte */
    overscroll-behavior-x: contain !important;
    /* Position initiale pour centrer la carte Gilet */
    scroll-behavior: auto !important; /* Désactiver le smooth scroll pour l'initialisation */
  }
  
  /* SCRIPT JAVASCRIPT NÉCESSAIRE POUR CENTRER LA CARTE GILET AU CHARGEMENT */
  /* Ajouter ce script dans le HTML : 
     document.addEventListener('DOMContentLoaded', function() {
       const ppeGallery = document.querySelector('.safety-page .features-section-modern .epi-gallery');
       if (ppeGallery && window.innerWidth <= 767) {
         setTimeout(() => {
           ppeGallery.scrollLeft = 141; // Position pour centrer la carte Gilet (120px + 21px gap)
         }, 100);
       }
     });
  */

  /* DÉSACTIVER TOUS LES STYLES DE GRILLE POTENTIELS */
  body.safety-page .features-section-modern .epi-gallery,
  html body.safety-page .features-section-modern .epi-gallery {
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-flow: unset !important;
    grid-gap: unset !important;
    grid-column-gap: unset !important;
    grid-row-gap: unset !important;
  }

  /* DÉSACTIVER TOUS LES STYLES DE FLOAT POTENTIELS */
  body.safety-page .features-section-modern .epi-gallery .epi-item,
  html body.safety-page .features-section-modern .epi-gallery .epi-item {
    float: none !important;
    clear: none !important;
    position: relative !important;
  }
}

/* ===== OPTIMISATION POUR TRÈS PETITS ÉCRANS (< 400px) - MODALES HARMONISÉES ===== */
@media (max-width: 400px) {
  /* MODALES - Adaptation pour très petits écrans */
  .safety-page .image-modal-content,
  .defect-page .image-modal-content,
  body .image-modal-content {
    padding: 0.75rem !important;
    margin: 0.25rem !important;
    max-width: calc(100vw - 0.5rem) !important;
    border-radius: 12px !important;
  }
  
  /* BOUTON FERMER SVG - Taille optimisée pour tactile */
  .safety-page .image-modal-close,
  .defect-page .image-modal-close,
  body .image-modal-close {
    top: 0.5rem !important;
    right: 0.5rem !important;
    width: 28px !important;
    height: 28px !important;
  }
  
  /* SVG POUR TRÈS PETITS ÉCRANS */
  .safety-page .image-modal-close svg,
  .defect-page .image-modal-close svg,
  body .image-modal-close svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* IMAGE - Taille adaptée aux petits écrans */
  .safety-page .image-modal-image,
  .defect-page .image-modal-image,
  body .image-modal-image {
    max-width: 180px !important;
    max-height: 130px !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* TITRE - Typographie ultra-compacte */
  .safety-page .image-modal-title,
  .defect-page .image-modal-title,
  body .image-modal-title {
    font-size: 1rem !important;
    margin-bottom: 0.4rem !important;
    padding: 0 1.5rem !important;
  }
  
  /* DESCRIPTION - Texte minimal */
  .safety-page .image-modal-description,
  .defect-page .image-modal-description,
  body .image-modal-description {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    padding: 0 0.75rem !important;
  }
}

/* ===== CORRECTIONS SPÉCIFIQUES POUR TABLETTE (768px-1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Correction des cartes de fonctionnalités clés - éliminer l'espace vide excessif */
  .features-section-modern .feature-card,
  .safety-page .feature-card,
  .defect-page .feature-card {
    min-height: auto !important;
    height: fit-content !important; /* Forcer la hauteur exacte du contenu */
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important; /* Éliminer toutes les marges */
    padding: 1rem !important; /* Padding encore plus réduit */
    box-sizing: border-box !important;
  }
  
  .features-section-modern .feature-card-inner,
  .safety-page .feature-card-inner,
  .defect-page .feature-card-inner {
    height: fit-content !important; /* Hauteur exacte du contenu */
    min-height: auto !important;
    flex: none !important; /* Pas d'expansion automatique */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .features-section-modern .feature-content,
  .safety-page .feature-content,
  .defect-page .feature-content {
    flex: none !important; /* Pas d'expansion automatique */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0 !important; /* Éliminer tout padding */
    margin: 0 !important; /* Éliminer toute marge */
    height: fit-content !important; /* Hauteur exacte du contenu */
  }
  
  /* Optimisation de la grille pour tablette - Layout hiérarchique */
  .features-section-modern .features-bento-grid,
  .safety-page .features-bento-grid,
  .defect-page .features-bento-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem 1.5rem !important; /* row-gap minimal pour éliminer l'espace mort */
    align-items: start !important;
    margin-bottom: 0 !important;
    grid-auto-rows: min-content !important; /* Forcer les rangées à s'adapter au contenu */
  }
  
  /* PREMIÈRE CARTE - Prend toute la largeur (plus importante) */
  .features-section-modern .feature-card:first-child,
  .safety-page .feature-card:first-child,
  .defect-page .feature-card:first-child {
    grid-column: 1 / -1 !important; /* Prend toute la largeur */
    grid-row: span 1 !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  /* DEUXIÈME ET TROISIÈME CARTES - Disposition 2 colonnes */
  .features-section-modern .feature-card:nth-child(2),
  .features-section-modern .feature-card:nth-child(3),
  .safety-page .feature-card:nth-child(2),
  .safety-page .feature-card:nth-child(3),
  .defect-page .feature-card:nth-child(2),
  .defect-page .feature-card:nth-child(3) {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
  }
  
  /* MASQUER LES 3 DERNIÈRES CARTES (4, 5, 6) SUR TABLETTE */
  .features-section-modern .feature-card:nth-child(n+4),
  .safety-page .feature-card:nth-child(n+4),
  .defect-page .feature-card:nth-child(n+4) {
    display: none !important;
  }
  
  /* REMONTER BEAUCOUP LA SECTION "DISCOVER ARCY VISION" POUR COMBLER L'ESPACE */
  .features-section-modern + section,
  .safety-page .features-section-modern + section,
  .defect-page .features-section-modern + section,
  .features-section-modern ~ .cta-section,
  .safety-page .features-section-modern ~ .cta-section,
  .defect-page .features-section-modern ~ .cta-section,
  .features-section-modern ~ section[class*="discover"],
  .safety-page .features-section-modern ~ section[class*="discover"],
  .defect-page .features-section-modern ~ section[class*="discover"] {
    margin-top: -8rem !important; /* Remonter BEAUCOUP pour coller aux 3 cartes */
  }
}