/* FP Design Presentation Zones Styling */
.modfpdesign-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  --zone-spacing: 0px; /* Espacement entre les zones, modifiable via le backoffice */
  --fp-gap: 20px; /* Gap entre les zones, modifiable via le backoffice */
}

/* Réinitialisation des styles PrestaShop qui pourraient interférer */
.modfpdesign-container * {
  box-sizing: border-box;
}

/* Styles de base pour les zones */
.fp-zone {
  position: relative;
  overflow: hidden;
  flex: 0 0 100%; /* Chaque zone prend 100% de la largeur disponible */
  box-sizing: border-box; /* Inclure padding/border dans la taille */
  margin: 0 !important; /* Remplacé par gap et forcé avec !important */
  padding: 0 !important;
  font-size: 16px;
  line-height: 1.4;
  /* Éliminer tous les espaces potentiels */
  display: block;
  float: none;
}

/* Styles pour les zones pleine largeur */
.fp-zone.full-width {
  width: 100% !important;
}

/* Styles pour les formes de bordure */
.fp-zone.square { border-radius: 0; }
.fp-zone.rounded { border-radius: 10px; }

/* Fond de zone : wrapper nécessaire pour la superposition du texte */
.fp-bg-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Fond de couleur */
.fp-bg-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Pour les fonds couleur, prend toute la hauteur dispo */
  min-height: 200px; /* Hauteur minimale pour les fonds couleur */
  z-index: 1;
}

/* Slider d'images */
.fp-bg-slider {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 200px; /* Hauteur minimale pour le slider */
  z-index: 1;
  line-height: 0; /* Empêche les espaces sous les images */
}

/* Images dans le slider */
.fp-bg-slider img {
  display: none;
  width: 100%;
  height: auto;
  opacity: 0;
  /* Désactivation complète de toutes les transitions possibles */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  vertical-align: top; /* Empêche les espaces sous l'image */
}

/* Première image visible par défaut */
.fp-bg-slider img:first-child {
  display: block;
  opacity: 1;
}

/* Gestion des sliders PC et mobile */
.fp-bg-slider.standard-slider {
  display: block; /* Visible par défaut */
}

.fp-bg-slider.mobile-slider {
  display: none; /* Caché par défaut */
}

/* Overlay de texte positionné au-dessus de l'image - optimisé pour le formatage HTML */
.fp-text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  z-index: 10;
  /* Fond transparent pour permettre de voir l'image en arrière-plan */
  background-color: transparent;
  pointer-events: auto; /* Permet de cliquer sur les liens */
  overflow: auto; /* Permet de faire défiler si le contenu est trop grand */
  /* Centrage vertical du contenu */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Le contenu commence par le haut s'il est trop grand */
  align-items: flex-start;
}

/* Styles spécifiques pour les éléments dans l'overlay - préservation du formatage */
.fp-text-overlay h1,
.fp-text-overlay h2,
.fp-text-overlay h3,
.fp-text-overlay h4,
.fp-text-overlay h5,
.fp-text-overlay h6,
.fp-text-overlay p,
.fp-text-overlay div,
.fp-text-overlay pre {
  /* Styles de base pour le texte */
  margin-bottom: 0.5em;
  /* Ombre légère pour améliorer la lisibilité sur l'image */
  text-shadow: 0 0 2px rgba(255,255,255,0.5);
}

/* Style pour les liens - s'assurer qu'ils sont cliquables */
.fp-text-overlay a {
  cursor: pointer;
  text-decoration: underline;
}

/* Style pour les images dans le texte */
.fp-text-overlay img {
  max-width: 100%;
  height: auto;
}

/* Styles pour les écrans mobiles */
@media (max-width: 768px) {
  .fp-text-overlay {
    padding: 10px;
  }
  
  /* Masquer le contenu standard sur mobile */
  .fp-text-overlay.standard-content {
    display: none !important;
  }
  
  /* Afficher le contenu mobile */
  .fp-text-overlay.mobile-content {
    display: flex !important;
  }
}

/* Styles pour les écrans desktop */
@media (min-width: 769px) {
  /* Afficher le contenu standard sur desktop */
  .fp-text-overlay.standard-content {
    display: flex !important;
  }
  
  /* Masquer le contenu mobile sur desktop */
  .fp-text-overlay.mobile-content {
    display: none !important;
  }
}

/* Styles spécifiques pour les fenêtres de texte configurables */
.fp-bg-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.fp-text-overlay {
  /* Position initiale - sera modifiée par JavaScript */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Flexbox pour centrer le contenu */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  
  /* Gestion du débordement */
  overflow: hidden;
  
  /* Z-index pour être au-dessus de l'image */
  z-index: 10;
  
  /* Permettre les clics à travers l'overlay */
  pointer-events: none;
}

/* Réactiver les événements pour le contenu texte */
.fp-text-overlay * {
  pointer-events: auto;
}

/* Position du texte au-dessus */
.fp-text.fp-text-above {
  /* position: absolute; est déjà la base */
  top: 0;
  left: 0;
  width: 100%;
}

/* Position du texte en dessous */
.fp-text.fp-text-below {
  /* position: absolute; est déjà la base */
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Position du texte à gauche */
.fp-text.fp-text-left {
  /* position: absolute; est déjà la base */
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
}

/* Position du texte à droite */
.fp-text.fp-text-right {
  /* position: absolute; est déjà la base */
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
}

/* Lien global sur la zone */
.fp-zone-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5; /* Au-dessus du fond mais en-dessous du texte et du message */
  cursor: pointer;
  display: block;
  text-decoration: none;
  background-color: transparent;
}

/* Styles pour les largeurs de zone */
.fp-zone.fp-width-1-1 { flex: 0 0 100%; }
.fp-zone.fp-width-1-2 { flex: 0 0 calc(50% - var(--zone-spacing) / 2); }
.fp-zone.fp-width-1-3 { flex: 0 0 calc(33.33% - var(--zone-spacing) * 2 / 3); }
.fp-zone.fp-width-2-3 { flex: 0 0 calc(66.66% - var(--zone-spacing) / 3); }
.fp-zone.fp-width-1-4 { flex: 0 0 calc(25% - var(--zone-spacing) * 3 / 4); }
.fp-zone.fp-width-3-4 { flex: 0 0 calc(75% - var(--zone-spacing) / 4); }

/* Styles pour les messages */
.fp-message {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.3s;
  z-index: 20; /* Au-dessus de tout */
}

/* Gestion des messages PC et mobile */
.fp-message.standard-message {
  display: inline-block; /* Visible par défaut */
}

.fp-message.mobile-message {
  display: none; /* Caché par défaut */
  position: absolute !important; /* Force la position absolue */
  z-index: 30 !important; /* S'assurer qu'il est au-dessus de tout */
}

/* Gestion du contenu standard et mobile */
.fp-text-overlay.standard-content {
  display: block; /* Visible par défaut */
}

.fp-text-overlay.mobile-content {
  display: none; /* Caché par défaut */
}

/* Adaptation mobile */
@media (max-width: 768px) {
  /* Sur mobile, toutes les zones prennent 100% */
  .fp-zone.fp-width-1-2,
  .fp-zone.fp-width-1-3,
  .fp-zone.fp-width-2-3,
  .fp-zone.fp-width-1-4,
  .fp-zone.fp-width-3-4 {
    flex: 0 0 100%;
  }
  
  /* Maintien du flex layout pour l'espacement entre zones sur mobile */
  .modfpdesign-container {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--fp-gap) !important;
  }
  
  .fp-zone {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    /* Forcer l'absence d'espace entre les zones */
    font-size: 0;
  }
  
  /* Rétablir la taille de police dans les conteneurs de texte */
  .fp-text-overlay {
    font-size: 16px;
  }
  
  /* Correction spécifique pour les zones 4 et 5 */
  .zone_4, .zone_5 {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Règle pour l'orientation portrait, indépendamment de la largeur de l'écran */
@media (orientation: portrait) {
  /* Classe spécifique pour le conteneur en mode portrait */
  .modfpdesign-container.portrait-mode {
    display: block !important;
  }
  /* Masquer complètement le message standard sur smartphone */
  .fp-message.standard-message {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Afficher le slider mobile et cacher le slider standard */
  .fp-bg-slider.standard-slider {
    display: none;
  }
  
  .fp-bg-slider.mobile-slider {
    display: block;
  }
  
  .fp-text-overlay.standard-content {
    display: none;
  }
  
  .fp-text-overlay.mobile-content {
    display: block;
  }
  
  /* Afficher le message mobile uniquement */
  .fp-message.mobile-message {
    display: inline-block !important;
    position: absolute !important;
  }
  
  /* Sur mobile en portrait, toutes les zones prennent 100% */
  .fp-zone.fp-width-1-2,
  .fp-zone.fp-width-1-3,
  .fp-zone.fp-width-2-3,
  .fp-zone.fp-width-1-4,
  .fp-zone.fp-width-3-4 {
    flex: 0 0 100%;
  }
}