/* --- Alignement et conteneur du Héro --- */
.inner-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  display: flex;
  height: 620px;
  align-items: center;
  padding-top: 120px !important; /* Ajusté pour laisser de la place sous le header */
  padding-bottom: 40px !important;
}

/* Force le conteneur à aligner la carte vers la droite */
.inner-banner .auto-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  position: relative;
  z-index: 3;
}

/* --- Carte en verre dépoli (Glassmorphism) --- */
.inner-banner .content-box {
  background: rgba(16, 34, 27, 0.35); /* Vert sombre forêt de votre charte graphique */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 40px 35px;
  border-radius: 16px;
  max-width: 540px;
  width: 100%;
  text-align: left; /* Alignement du texte à gauche pour un rendu éditorial chic */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  border-left: 5px solid #facc2a; /* Ligne d'accent jaune assortie à votre logo */
}

/* --- Titre Principal --- */
.inner-banner .content-box h1 {
  position: relative !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  font-size: clamp(22px, 3.5vw, 34px) !important; /* Fluide et adapté au responsive */
  line-height: 1.3em !important;
  font-weight: 800 !important;
  margin-bottom: 15px !important;
  text-wrap: pretty;
  letter-spacing: 0.5px;
}

/* --- Sous-titre --- */
.inner-banner .content-box p {
  margin-top: 0 !important; /* Supprime le grand décalage par défaut */
  position: relative !important;
  font-size: clamp(14px, 2vw, 17px) !important;
  line-height: 1.6em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 400 !important;
}

/* --- Rendu Responsive pour Mobile --- */
@media only screen and (max-width: 767px) {
  .inner-banner {
    height: auto;
    aspect-ratio: auto;
    padding-top: 140px !important;
    padding-bottom: 60px !important;
  }
  .inner-banner .auto-container {
    justify-content: flex-end; /* Aligne la carte à droite sur mobile */
  }
  .inner-banner .content-box {
    padding: 25px 20px;
    width: 60% !important;
    max-width: 60% !important;
    margin: 0 !important; /* Supprime le centrage */
  }
}








/* 1. On applique l'animation à l'image */
.image-layer img {
  transform: scale(1.22) translateY(9%); /* Échelle agrandie pour permettre un départ plus bas (9%) */
  animation: defilementHero 12s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* 2. On définit les étapes de l'animation */
@keyframes defilementHero {
  0% {
    /* Commence décalé vers le bas de 9% */
    transform: scale(1.22) translateY(9%);
  }
  100% {
    /* Finit au centre (0%), ce qui donne l'effet de défilement vers le haut */
    transform: scale(1.22) translateY(0%);
  }
}

/* Suppression du voile noir transparent sur l'image du héro */
.image-layer::before {
  display: none !important;
}

/* Transition de position au scroll pour le parallax */
.inner-banner .content-box {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* --- Si deux images sont présentes (Diaporama) --- */
.image-layer.has-multiple-images .hero-pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Défilement infini en va-et-vient pour les images du diaporama */
.image-layer.has-multiple-images .hero-pic img {
  transform: scale(1.22) translateY(9%);
  animation: defilementHeroInfini 24s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

/* --- Diaporama à 2 images --- */
.image-layer.has-2-images .pic-1 {
  animation: crossfadePic2_1 16s infinite;
}

.image-layer.has-2-images .pic-2 {
  opacity: 0;
  animation: crossfadePic2_2 16s infinite;
}

@keyframes crossfadePic2_1 {
  0%, 45% { opacity: 1; z-index: 2; }
  50%, 95% { opacity: 0; z-index: 1; }
  100% { opacity: 1; z-index: 2; }
}

@keyframes crossfadePic2_2 {
  0%, 45% { opacity: 0; z-index: 1; }
  50%, 95% { opacity: 1; z-index: 2; }
  100% { opacity: 0; z-index: 1; }
}

/* --- Diaporama à 3 images --- */
.image-layer.has-3-images .pic-1 {
  animation: crossfadePic3_1 24s infinite;
}

.image-layer.has-3-images .pic-2 {
  opacity: 0;
  animation: crossfadePic3_2 24s infinite;
}

.image-layer.has-3-images .pic-3 {
  opacity: 0;
  animation: crossfadePic3_3 24s infinite;
}

@keyframes crossfadePic3_1 {
  0%, 27% { opacity: 1; z-index: 2; }
  33%, 93% { opacity: 0; z-index: 1; }
  100% { opacity: 1; z-index: 2; }
}

@keyframes crossfadePic3_2 {
  0%, 27% { opacity: 0; z-index: 1; }
  33%, 60% { opacity: 1; z-index: 2; }
  66%, 100% { opacity: 0; z-index: 1; }
}

@keyframes crossfadePic3_3 {
  0%, 60% { opacity: 0; z-index: 1; }
  66%, 93% { opacity: 1; z-index: 2; }
  100% { opacity: 0; z-index: 1; }
}

@keyframes defilementHeroInfini {
  0% {
    transform: scale(1.22) translateY(9%);
  }
  100% {
    transform: scale(1.22) translateY(0%);
  }
}





h2.hero-accueil {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  font-size: clamp(16px, 2.2vw, 20px) !important;
  line-height: 1.5em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
}

/* Fix pour l'icône de la flèche gauche manquante (strippée lors de l'optimisation CSS) */
.fa-angle-left::before {
  content: "\f104" !important;
}

/* Fix pour l'image de fond du footer sur les écrans mobiles/tablettes */
.main-footer .bg-layer {
  background-size: cover !important;
}

/* --- Style des blocs d'activités avec images organiques insérées dans le texte --- */
.accordion-box .content-image {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 240px !important; /* Hauteur harmonieuse en format paysage */
  margin: 25px 0 !important; /* Marge haut/bas entre l'image et les paragraphes */
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.08) !important; /* Ombre portée riche et réaliste */
  border-radius: 60% 40% 60% 40% / 40% 60% 40% 60% !important; /* Forme organique (blob) */
  border: 0 !important; /* Sans aucun contour */
  outline: none !important;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.accordion-box .content-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Effets interactifs originaux au survol */
.accordion-box .content-image:hover {
  border-radius: 40% 60% 40% 60% / 60% 40% 60% 40% !important; /* Déformation organique */
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22), 0 8px 18px rgba(0, 0, 0, 0.12) !important; /* Ombre accentuée au survol */
}

.accordion-box .content-image:hover img {
  transform: scale(1.1) rotate(1deg) !important; /* Zoom et légère rotation */
}

/* Gradient subtil par dessus l'image pour la profondeur */
.accordion-box .content-image::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.25)) !important;
  pointer-events: none !important;
}

/* Adaptation Responsive pour Mobiles */
@media only screen and (max-width: 767px) {
  .accordion-box .content-image {
    height: 180px !important;
    margin: 20px 0 !important;
  }
}




.about-three.faq-one{
  padding-top: 40px;
}





h2.acc-h2 {
  font-size: 30px !important;
  font-weight: 700 !important;
  padding-top: 30px !important;
  margin-left: 30px !important;
}

/* --- Alignement des hauteurs des blocs d'activités côte à côte --- */
@media only screen and (min-width: 992px) {
  /* Force les colonnes et leurs conteneurs enfants à occuper 100% de la hauteur */
  .about-three.faq-one .text-col {
    display: flex !important;
    flex-direction: column !important;
  }
  .about-three.faq-one .text-col > .inner {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
  }
  .about-three.faq-one .accordion-box {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
  }
  .about-three.faq-one .accordion-box .block {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
  }
  .about-three.faq-one .accordion-box .acc-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
  }
  .about-three.faq-one .accordion-box .content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
  }
  .about-three.faq-one .accordion-box .content-text {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
  }
  /* Pousse la barre de boutons tout en bas pour un alignement horizontal parfait */
  .about-three.faq-one .accordion-box .content-text > div:last-child {
    margin-top: auto !important;
    padding-top: 20px !important;
  }
}