/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Header */

.en-terre {
  /*position: relative;*/
  height: 70vh;
  background: url('image/picture/img5.jpg') no-repeat center center/cover;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Empêche le contenu débordant */
}

.en-terre::before {
  content: ""; /* Crée un pseudo-élément */
  position: absolute; /* Superposé à l'élément parent */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(5, 5, 32, 0.781); /* Bleu transparent */
  z-index: -1; /* Place l'overlay au-dessus du background */
}

.en-terre .hero {
  position: relative; /* Le contenu est placé au-dessus de l'overlay */
  z-index: 2; /* Au-dessus du pseudo-élément */
  /*background-color: rgba(255, 255, 255, 0.8); /* Optionnel : Ajoute une couleur d'arrière-plan blanche semi-transparente pour le texte */
  padding: 1rem; /* Ajoute de l'espace autour du texte */
  border-radius: 10px; /* Arrondi des coins */
  text-align: center; /* Centre le texte */
}


/* Section Styles */
.solutions {
  padding: 8rem 2rem;
  text-align: center;
  background-color: #ffffff;
}


.solutions-header {
  display: flex;
  flex-direction: column; /* Permet d'empiler les éléments verticalement */
  align-items: center; /* Centre horizontalement */
  gap: 1rem; /* Espacement entre les éléments */
  margin-bottom: 2.5rem;
  margin-left: -25%;
}

.solutions-section::before {
  content: ""; /* Nécessaire pour créer un pseudo-élément */
  position: absolute; /* Position absolue pour le placer au-dessus */
  top: 0; /* Placé au-dessus de la section */
  left: 0; /* Placé à gauche */
  width: 100%; /* Couvre toute la largeur de la section */
  height: 100px; /* Ajustez la hauteur pour correspondre à l'effet souhaité */
  clip-path: polygon(0 0, 50% 100%, 100% 0); /* Forme en triangle inversé */
  z-index: -1; /* S'assure qu'il est au-dessus de la section */
}


.solutions-section {
  position: relative;
  z-index: 2; /* Place le contenu au-dessus de l'overlay */
  background-color: #ffffff;
  padding: 10rem 2rem; /* Réduit le padding */
  clip-path: polygon(0 0, 50% 5%, 100% 0, 100% 100%, 0 100%); /* Forme en "V" en haut */
  min-height: 600px; /* Ajuste la hauteur minimale */
  margin-top: -20px; /* Chevauche la section supérieure */
  overflow: hidden; /* Empêche tout débordement de contenu */

  
}


/* Aligne l'icône Play et le texte */
.header-content {
  display: flex;
  align-items: center; /* Centre verticalement */
  gap: 1rem; /* Espacement entre l'icône et le texte */
  justify-content: flex-start; /* Aligne les éléments au début */
}

.play-icon {
  background-color: #ffc107;
  color: #002d62;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  flex-shrink: 0; /* Empêche le bouton de rétrécir */
}

.solutions-header h2 {
  font-size: 1.8rem;
  color: #002d62;
  font-weight: bold;
  margin: 0;
  flex-grow: 1; /* Permet au texte de prendre l'espace restant */
}

h2 {
  font-size: 2rem;
  color: #002d62;
  font-weight: bold;
}

.header-bar {
  width: 850px;
  height: 5px;
  background-color: #ffc107;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-left: 15%;
}


/* Grid Styles */
.solutions-grid {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.solution-card {
  background-color: #f4f4f4;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  width: 250px;
  transition: transform 0.3s ease;
  
}

.solution-card:hover {
  transform: scale(1.05);
}

.solution-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.card-content {
  background-color: #5a8cb7;
  color: white;
  padding: 1rem;
  text-align: center;
  position: relative;
}

.card-content h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
}

.content-bar {
  width: 50px;
  height: 3px;
  background-color: #ffc107;
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .header-bar {
    width: 120px; /* Réduit la barre jaune */
  }

  .play-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem; /* Réduit la taille de l'icône */
  }

  h2 {
    font-size: 2rem; /* Réduit la taille du texte */
  }

  .header-content {
    flex-direction: row; /* Assure que l'icône et le texte restent alignés */
    justify-content: center; /* Centre horizontalement */
  }
}

@media (max-width: 480px) {
  .header-bar {
    width: 100px; /* Barre jaune encore plus petite */
  }

  .play-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem; /* Taille encore réduite pour l'icône */
  }

  h2 {
    font-size: 1.5rem; /* Réduction pour les très petits écrans */
  }

  .header-content {
    flex-direction: column; /* L'icône et le texte passent en colonne sur écrans très petits */
    gap: 0.5rem; /* Moins d'espace entre les éléments */
  }
}


/*----------------------------------------------------------------------------------------------*/

/* Section Styles */
.solutions-usage {
  padding: 2rem 1rem;
  text-align: center;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre tout le contenu horizontalement */
  justify-content: center; /* Centre verticalement */
  gap: 1rem; /* Espace entre les éléments */
}

.solutions-header text{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;  
}

.text h2{
  margin-left: -5%;
}

.play-icon-second {
  background-color: #ffc107;
  color: #002d62;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  flex-shrink: 0; /* Empêche le bouton de rétrécir */
  margin-left: -15%;

  
}

.solutions-header h2 {
  font-size: 1.5rem;
  color: #002d62;
  text-transform: uppercase;
}

/* Carousel Container */
.carousel-container {
  display: flex;
  align-items: center;
  justify-content: center; /* Centre les éléments horizontalement */
  gap: 1rem;
  position: relative;
  
  
}

.carousel {
  display: flex;
  gap: 1rem;
  overflow: hidden;
  overflow-x: auto;
  scroll-behavior: smooth;
  width: calc(100% - 60px); /* Adjusted for buttons */
  /*width: 100%;*/
  flex: 1;
}

.carousel-item {
  flex: 0 0 auto; /* Évite que les éléments rétrécissent */
  width: 300px; /* Largeur fixe de chaque élément */
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.carousel-item.hidden {
  display: none;
}

.carousel-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.carousel-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.5rem;
  border-radius: 5px;
}

.carousel-text .play-indicator {
  color: #ffc107;
  font-size: 1rem;
}

.carousel-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* Carousel Buttons */
.carousel-btn {
  background-color: #ccc;
  color: #333;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.carousel-btn:hover {
  background-color: #ffc107;
  color: #002d62;
  transform: scale(1.1);
}

/* Indicators */
.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.indicator {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.indicator.active {
  background-color: #002d62;
}


/* Media Queries for Responsive Design */

/* Tablette */
@media (max-width: 768px) {
  .solutions-header {
    flex-direction: row;
    align-items: center; /* L'icône et le texte restent alignés verticalement */
    justify-content: center;
    gap: 0.5rem;
  }

  .play-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem; /* Icône plus petite */
  }

  .solutions-header h2 {
    font-size: 1.5rem; /* Taille du texte réduite */
  }

  .carousel {
    gap: 0.5rem; /* Réduction de l'espacement entre les images */
  }

  .carousel-item {
    width: 250px; /* Réduction de la taille des éléments */
  }

  .carousel-btn {
    width: 35px;
    height: 35px;
    font-size: 1rem; /* Boutons plus petits */
  }
}

/* Smartphones (petits écrans) */
@media (max-width: 480px) {
  .solutions-header {
    flex-direction: column; /* Passe l'icône et le texte en colonne */
    align-items: center;
    gap: 0.5rem; /* Réduction de l'espace entre les éléments */
  }

  .play-icon {
    width: 30px;
    height: 30px;
    font-size: 1rem; /* Réduction supplémentaire de l'icône */
  }

  .solutions-header h2 {
    font-size: 1.2rem; /* Texte plus petit */
  }

  .carousel-container {
    flex-direction: column; /* Les boutons passent au-dessus et en dessous */
    align-items: center;
  }

  .carousel {
    gap: 0.3rem; /* Espacement réduit pour les très petits écrans */
  }

  .carousel-item {
    width: 200px; /* Taille des images réduite */
  }

  .carousel-btn {
    width: 30px;
    height: 30px;
    font-size: 0.9rem; /* Réduction de la taille des boutons */
  }
}

/* Très petits smartphones */
@media (max-width: 320px) {
  .solutions-header h2 {
    font-size: 1rem; /* Texte encore plus petit */
    text-align: center;
  }

  .play-icon {
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
  }

  .carousel-item {
    width: 180px; /* Réduction maximale de la taille des images */
  }

  .carousel-btn {
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
  }

  .indicator {
    width: 8px;
    height: 8px; /* Indicateurs plus petits */
  }
}

/*-----Section Contact--------------------------------------------------------------------------------*/

/* General Styles */
.contact-section {
  padding: 14rem 2rem;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-content {
  display: flex;
  gap: 2rem; /* Space between items */
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
}

.quote {
  width: 300px; /* Gardez la largeur actuelle */
  height: 250px; /* Augmente la hauteur de la boîte */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #002d62;
  text-align: center;
  padding: 2rem; /* Augmente l'espacement interne */
}


.quote h2 {
  color: #002d62;
  font-size: 1.8rem;
  font-weight: bold;
}

.contact-form {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.icon {
  background-color: #ffc107;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.icon img {
  width: 50%;
  height: 50%;
  object-fit: contain;
}

.text h3 {
  color: #002d62;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: bold;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .contact-content {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .quote, .contact-form {
    flex: unset;
  }

  .icon {
    margin: 0 auto;
  }
}