/* =============================== */
/* ----------- GÉNÉRAL ----------- */
/* =============================== */

/* Classe body : Style général du corps de la page */
body {
  margin: 0; /* Supprime les marges par défaut du navigateur */
  font-family: Arial, sans-serif; /* Applique la police Arial à tout le site */
}

/* Classe container : Conteneur principal centré et responsive */
.container {
  width: 90%; /* Largeur relative pour l’adaptation aux écrans */
  max-width: 1200px; /* Limite maximale de largeur */
  margin: auto; /* Centre horizontalement le contenu */
}



/* =============================== */
/* ----------- HEADER ----------- */
/* =============================== */

/* Classe site-header : En-tête du site */
.site-header {
  background-color: white; /* Fond blanc */
  padding: 10px 0; /* Espace vertical autour du contenu */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Légère ombre en bas de l'en-tête */
}

/* Classe header-container : Conteneur du logo et du menu */
.header-container {
  display: flex; /* Affiche les enfants (logo et menu) en ligne */
  align-items: center; /* Centre verticalement les éléments */
  justify-content: space-between; /* Espace entre logo et menu */
}

/* Classe logo : Conteneur du logo */
.logo img {
  max-height: 100px; /* Limite la hauteur du logo */
}




/* =============================== */
/* ----------- MENU ----------- */
/* =============================== */

/* Classe main-nav ul : Liste du menu de navigation */
.main-nav ul {
  list-style: none; /* Supprime les puces */
  display: flex; /* Affiche les éléments de menu en ligne */
  gap: 20px; /* Espace entre les éléments */
  margin: 0; /* Supprime les marges */
  padding: 0 16px 15px 40px;; /* Supprime les espacements internes */
  position: absolute;
}

/* Classe main-nav a : Liens du menu de navigation */
.main-nav a {
  text-decoration: none; /* Supprime le soulignement */
  color: green; /* Couleur des liens */
  font-weight: bold; /* Texte en gras */
}

/* Positionner le menu juste après le logo, un peu à gauche */
.header-container {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Aligne tout à gauche */
  gap: 40px; /* Espace entre logo et menu */
}

.logo {
  margin-right: 0; /* Pas d'espace supplémentaire à droite du logo */
}

.main-nav {
  margin-left: 10px; /* Décale légèrement le menu vers la gauche */
}

/* Classe main-nav a:hover : Effet au survol des liens du menu */
.main-nav a:hover {
  color: #f1c40f; /* Jaune Sococim au survol */
}



/* =============================== */
/* ----------- SECTION 1 : HERO -- */
/* =============================== */

/* Classe hero-split : Section héro avec image et boîte */
.hero-split {
  display: flex; /* Deux colonnes : image et boîte */
  align-items: center; /* Centre verticalement les éléments */
  justify-content: flex-start; /* Alignement à gauche */
  position: relative; /* Pour positionner la boîte par-dessus l’image */
  background-color: white; /* Fond blanc */
  margin-bottom: 50px; /* Espace en bas de la section */
}

/* Classe hero-image : Colonne contenant l'image */
.hero-image {
  flex: 1; /* Prend toute la moitié gauche */
  position: relative; /* Position relative pour le positionnement interne */
}

/* Classe hero-image img : Image principale de la section héro */
.hero-image img {
  width: 75%; /* Prend 75% de la largeur de sa colonne */
  height: auto; /* Conserve le ratio de l’image */
  display: block; /* Supprime l’espace blanc sous l’image */
}

/* Classe hero-box : Boîte verte sur l'image */
.hero-box {
  position: absolute; /* Positionnée par-dessus l’image */
  top: 0; /* Aligne en haut */
  right: 0; /* Aligne à droite */
  left: 70%; /* Commence à 70% de la largeur */
  background-color: #058141; /* Vert Sococim */
  color: white; /* Texte blanc */
  padding: 70px; /* Espace interne large */
  width: 25%; /* Largeur de la boîte */
  max-width: 1000px; /* Largeur maximale */
  z-index: 2; /* Au-dessus de l’image */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* Ombre autour */
  border-radius: 6px; /* Coins arrondis */
  transform: translateX(-30%); /* Recul pour recouvrir légèrement l’image */
  margin-right: 100px; /* Espace à droite */
}

/* Classe hero-box h2 : Titre de la boîte héro */
.hero-box h2 {
  font-size: 28px; /* Taille du titre */
  margin-bottom: 10px; /* Espace sous le titre */
}

/* Classe hero-box p : Paragraphe de la boîte héro */
.hero-box p {
  font-size: 18px; /* Taille du texte */
  margin-bottom: 20px; /* Espace sous le paragraphe */
}




/* =============================== */
/* ----------- BOUTON JAUNE ----------- */
/* =============================== */

/* Classe btn-yellow : Bouton jaune principal */
.btn-yellow {
  display: inline-block; /* Affichage en ligne */
  padding: 12px 24px; /* Taille du bouton */
  background-color: #f1c40f; /* Jaune Sococim */
  color: #000; /* Texte noir */
  text-decoration: none; /* Pas de soulignement */
  font-weight: bold; /* Texte en gras */
  border-radius: 30px; /* Bords arrondis */
  transition: background-color 0.3s ease; /* Effet doux au survol */
}

/* Classe btn-yellow:hover : Effet au survol du bouton jaune */
.btn-yellow:hover {
  background-color: #d4ac0d; /* Jaune plus foncé */
}




/* =============================== */
/* STYLE SECTION PRODUITS/REALISATIONS */
/* =============================== */

/* Classe section-double : Section avec deux blocs */
.section-double {
  margin-top: 80px; /* Espace au-dessus */
  padding: 40px 60px; /* Espacement interne */
}

/* Classe double-title : Titre double avec lignes */
.double-title {
  display: flex; /* Affichage en ligne */
  justify-content: space-between; /* Espace entre les deux titres */
  align-items: center; /* Centre verticalement */
  margin-bottom: 30px; /* Espace sous le titre */
}

/* Classe double-title h2 : Titre principal de la section double */
.double-title h2 {
  font-size: 24px; /* Taille du titre */
  font-weight: bold; /* Gras */
  color: #1e2e40; /* Bleu foncé */
  display: flex; /* Affichage en ligne */
  align-items: center; /* Centre verticalement */
  gap: 10px; /* Espace entre éléments */
}

/* Classes line-left et line-right : Lignes décoratives à gauche et à droite du titre */
.line-left, .line-right {
  content: ""; /* Contenu vide pour la ligne */
  width: 60px; /* Largeur de la ligne */
  height: 2px; /* Hauteur de la ligne */
  background-color: #058141; /* Vert SOCOCIM */
}

/* Classe double-content : Conteneur des deux blocs */
.double-content {
  display: flex; /* Affichage en ligne */
  gap: 20px; /* Espace entre les images */
  justify-content: space-between; /* Espace entre les blocs */
}

/* Classe double-box : Bloc individuel de la section double */
.double-box {
  position: relative; /* Position relative pour overlay */
  flex: 1; /* Prend la même largeur */
  overflow: hidden; /* Cache le débordement */
  border-radius: 6px; /* Coins arrondis */
}

/* Classe double-box img : Image du bloc double */
.double-box img {
  width: 100%; /* Largeur totale */
  height: auto; /* Hauteur auto */
  display: block; /* Affichage bloc */
}
.double-box:hover img {
  transform: scale(1.05); /* Zoom au survol */
}
/* Classe overlay-text : Texte superposé sur l'image */
.overlay-text {
  position: absolute; /* Position absolue */
  bottom: 20px; /* Décalé du bas */
  left: 20px; /* Décalé de la gauche */
  color: white; /* Texte blanc */
  font-size: 20px; /* Taille du texte */
  font-weight: 500; /* Poids du texte */
}

/* Classe overlay-link : Lien superposé sur l'image */
.overlay-link {
  position: absolute; /* Position absolue */
  bottom: 20px; /* Décalé du bas */
  right: 20px; /* Décalé de la droite */
  color: white; /* Texte blanc */
  font-size: 16px; /* Taille du texte */
  text-decoration: none; /* Pas de soulignement */
  font-weight: 400; /* Poids normal */
  transition: color 0.3s ease; /* Transition douce */
}

/* Classe overlay-link:hover : Effet au survol du lien superposé */
.overlay-link:hover {
  color: #f0c000; /* Jaune clair au survol */
}




/* ============================= */
/* STYLE : SECTION ENGAGEMENTS  */
/* ============================= */

/* Classe engagements-section : Section des engagements */
.engagements-section {
  background-color: #ffffff; /* Fond blanc */
  padding: 60px 40px; /* Espacement interne */
  text-align: center; /* Centre le texte */
}

/* Classe engagements-title : Titre de la section engagements */
.engagements-title {
  font-size: 24px; /* Taille du titre */
  font-weight: bold; /* Gras */
  color: #1e2e40; /* Bleu foncé */
  display: flex; /* Affichage en ligne */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  gap: 15px; /* Espace entre éléments */
  margin-bottom: 50px; /* Espace sous le titre */
}

/* Classe engagements-title .line : Ligne décorative du titre */
.engagements-title .line {
  content: ""; /* Ligne décorative */
  display: block; /* Affichage bloc */
  width: 60px; /* Largeur de la ligne */
  height: 2px; /* Hauteur de la ligne */
  background-color: #058141; /* Vert SOCOCIM */
}

/* Classe engagements-grid : Grille des engagements */
.engagements-grid {
  display: flex; /* Affichage en ligne */
  justify-content: space-between; /* Espace entre les éléments */
  flex-wrap: wrap; /* Retour à la ligne si besoin */
  gap: 20px; /* Espace entre les images */
  margin-bottom: 40px; /* Espace sous la grille */
}

/* Classe engagement-item : Élément individuel de la grille */
.engagement-item {
  flex: 1 1 calc(25% - 15px); /* 4 éléments sur une ligne */
}

/* Classe engagement-item img : Image de l'engagement */
.engagement-item img {
  width: 100%; /* Largeur totale */
  height: auto; /* Hauteur auto */
  border-radius: 6px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Légère ombre */
}

/* Classe engagement-button : Conteneur du bouton engagements */
.engagement-button {
  margin-top: 20px; /* Espace au-dessus */
}

/* Classe btn-yellow (redéfinie) : Bouton jaune pour engagements */
.btn-yellow {
  background-color: #f0c000; /* Jaune */
  color: #1e2e40; /* Bleu foncé */
  padding: 12px 28px; /* Taille du bouton */
  border-radius: 5px; /* Coins arrondis */
  font-size: 16px; /* Taille du texte */
  font-weight: 500; /* Poids du texte */
  text-decoration: none; /* Pas de soulignement */
  transition: background-color 0.3s ease; /* Transition douce */
}

/* Classe btn-yellow:hover (redéfinie) : Effet au survol du bouton jaune */
.btn-yellow:hover {
  background-color: #d8a900; /* Jaune foncé au survol */
}




/* ============================== */
/* STYLE : SECTION NOS ACTUALITÉS */
/* ============================== */

/* Classe actualites-section : Section des actualités */
.actualites-section {
  background-color: #058141; /* Vert Sococim */
  padding: 60px 40px; /* Espacement interne */
  text-align: center; /* Centre le texte */
  color: #ffffff; /* Texte en blanc */
}

/* Classe actualites-title : Titre de la section actualités */
.actualites-title {
  font-size: 24px; /* Taille du titre */
  font-weight: bold; /* Gras */
  color: #ffffff; /* Blanc */
  display: flex; /* Affichage en ligne */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  gap: 15px; /* Espace entre éléments */
  margin-bottom: 50px; /* Espace sous le titre */
}

/* Classe actualites-title .line : Ligne décorative du titre */
.actualites-title .line {
  content: ""; /* Ligne décorative */
  display: block; /* Affichage bloc */
  width: 60px; /* Largeur de la ligne */
  height: 2px; /* Hauteur de la ligne */
  background-color: #ffffff; /* Ligne blanche */
}

/* Classe actualites-grid : Grille des actualités */
.actualites-grid {
  display: flex; /* Affichage en ligne */
  justify-content: space-between; /* Espace entre les articles */
  gap: 20px; /* Espace entre les articles */
  flex-wrap: wrap; /* Retour à la ligne si besoin */
}

/* Classe actualite-card : Carte individuelle d'actualité */
.actualite-card {
  background-color: #ffffff; /* Fond blanc */
  color: #1e2e40; /* Texte bleu foncé */
  flex: 1 1 calc(33.33% - 13.33px); /* 3 cartes par ligne */
  border-radius: 6px; /* Coins arrondis */
  overflow: hidden; /* Cache le débordement */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre */
  display: flex; /* Affichage flex */
  flex-direction: column; /* Colonne */
  justify-content: space-between; /* Espace entre les éléments */
}

/* Classe actualite-card img : Image de la carte d'actualité */
.actualite-card img {
  width: 100%; /* Largeur totale */
  height: auto; /* Hauteur auto */
  display: block; /* Affichage bloc */
}

/* Classe actualite-card h3 : Titre de la carte d'actualité */
.actualite-card h3 {
  font-size: 16px; /* Taille du titre */
  padding: 16px; /* Espacement interne */
  font-weight: bold; /* Gras */
  text-align: left; /* Alignement à gauche */
  line-height: 1.4em; /* Hauteur de ligne */
}

/* Classe article-link : Lien vers l'article complet */
.article-link {
  padding: 12px 16px; /* Espacement interne */
  color: #058141; /* Vert Sococim */
  font-weight: bold; /* Gras */
  text-align: left; /* Alignement à gauche */
  text-decoration: none; /* Pas de soulignement */
  display: block; /* Affichage bloc */
  margin-top: auto; /* Place en bas de la carte */
}

/* Classe article-link:hover : Effet au survol du lien d'article */
.article-link:hover {
  text-decoration: underline; /* Soulignement au survol */
}




/* ============================== */
/* STYLE : SECTION FONDATION */
/* ============================== */

/* Classe fondation-section : Section Fondation */
.fondation-section {
  display: flex; /* Affichage en ligne */
  align-items: center; /* Centre verticalement */
  justify-content: flex-start; /* Alignement à gauche */
  position: relative; /* Position relative */
  background-color: #ffffffd3; /* Fond blanc légèrement transparent */
  margin-bottom: 50px; /* Espace en bas */
}

/* Classe fondation-image : Colonne image de la fondation */
.fondation-image {
  flex: 1; /* Prend la moitié gauche */
  position: relative; /* Position relative */
}

/* Classe fondation-image img : Image de la fondation */
.fondation-image img {
  width: 85%; /* Largeur de l'image */
  height: auto; /* Hauteur auto */
  display: block; /* Affichage bloc */
}

/* Classe fondation-box : Boîte blanche sur l'image */
.fondation-box {
  position: absolute; /* Position absolue */
  top: 0; /* Aligne en haut */
  right: 0; /* Aligne à droite */
  left: 70%; /* Commence à 70% */
  background-color: white; /* Boîte blanche */
  color: black; /* Texte noir */
  padding: 70px; /* Espacement interne */
  width: 25%; /* Largeur de la boîte */
  max-width: 1000px; /* Largeur maximale */
  z-index: 2; /* Au-dessus de l’image */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* Ombre */
  border-radius: 10px; /* Coins arrondis */
  transform: translateX(-30%); /* Décalage */
  margin-right: 100px; /* Espace à droite */
}

/* Classe fondation-box h1 : Titre principal de la fondation */
.fondation-box h1 {
  font-size: 24px; /* Taille du titre */
  margin-bottom: 10px; /* Espace sous le titre */
  color: #2c3e50; /* Couleur du titre */
}

/* Classe fondation-box h3 : Sous-titre de la fondation */
.fondation-box h3 {
  font-size: 16px; /* Taille du sous-titre */
  font-weight: bold; /* Gras */
  color: #34495e; /* Couleur du sous-titre */
  margin-bottom: 20px; /* Espace sous le sous-titre */
}

/* Classe fondation-box p : Paragraphe de la fondation */
.fondation-box p {
  font-size: 16px; /* Taille du texte */
  color: #555; /* Couleur du texte */
  margin-bottom: 20px; /* Espace sous le paragraphe */
}





/* ============================== */
/* STYLE : SECTION REJOIGNEZ-NOUS */
/* ============================== */

/* Classe rejoignez-section : Section "Rejoignez-nous" */
.rejoignez-section {
  background-color: #ffffff; /* Fond blanc */
  padding: 80px 40px; /* Espacement interne */
  text-align: center; /* Centre le texte */
}

/* Classe rejoignez-buttons : Conteneur des boutons "Rejoignez-nous" */
.rejoignez-buttons {
  display: flex; /* Affichage en ligne */
  justify-content: center; /* Centre horizontalement */
  gap: 30px; /* Espace entre les boutons */
  flex-wrap: wrap; /* Retour à la ligne si besoin */
  margin-bottom: 30px; /* Espace sous les boutons */
}

/* Classe rejoignez-btn : Bouton vert "Rejoignez-nous" */
.rejoignez-btn {
  background-color: #058141; /* Vert Sococim */
  color: #ffffff; /* Texte blanc */
  font-weight: bold; /* Gras */
  padding: 16px 24px; /* Taille du bouton */
  border-radius: 4px; /* Coins arrondis */
  text-decoration: none; /* Pas de soulignement */
  font-size: 16px; /* Taille du texte */
  transition: background-color 0.3s; /* Transition douce */
}

/* Classe rejoignez-btn:hover : Effet au survol du bouton vert */
.rejoignez-btn:hover {
  background-color: #046b34; /* Vert foncé au survol */
}

/* Classe rejoignez-title : Titre de la section "Rejoignez-nous" */
.rejoignez-title {
  font-size: 26px; /* Taille du titre */
  font-weight: bold; /* Gras */
  color: #1e2e40; /* Bleu foncé */
}





/* ============================== */
/* STYLE : PIED DE PAGE */
/* ============================== */

/* Classe footer-separator : Ligne de séparation du pied de page */
.footer-separator {
  height: 4px; /* Épaisseur du trait */
  background-color: #058141; /* Vert Sococim */
  width: 100%; /* Largeur totale */
}

/* Classe footer-container : Conteneur du pied de page */
.footer-container {
  background-color: #ffffff; /* Fond blanc */
  display: flex; /* Affichage en ligne */
  justify-content: space-between; /* Espace entre les éléments */
  align-items: center; /* Centre verticalement */
  padding: 30px 50px; /* Espacement interne */
  flex-wrap: wrap; /* Retour à la ligne si besoin */
}

/* Classe footer-logo : Logo du pied de page */
.footer-logo img {
  height: 80px; /* Taille du logo */
  object-fit: contain; /* Garde le ratio */
}

/* Classe footer-links : Liens du pied de page */
.footer-links {
  display: flex; /* Affichage en ligne */
  gap: 30px; /* Espace entre les liens */
  margin-left: 80px; /* Décale vers le centre */
  margin-right: auto; /* Décale vers la gauche */
  align-items: center; /* Centre verticalement */
}

/* Classe footer-links a : Style des liens du pied de page */
.footer-links a {
  text-decoration: none; /* Pas de soulignement */
  color: #058141; /* Texte vert */
  font-weight: 500; /* Poids du texte */
  font-size: 16px; /* Taille du texte */
  transition: color 0.3s; /* Transition douce */
}

/* Classe footer-links a:hover : Effet au survol des liens du pied de page */
.footer-links a:hover {
  color: #035c2c; /* Vert foncé au survol */
}





/* ============================= */
/* CSS COMMUN POUR LES PAGES/acceuil */
/* ============================= */


/* Classe image-wrapper : Conteneur d'image avec overlay */
.image-wrapper {
  position: relative;
  width: 1150px;
  height: 580px;
  display: inline-block;
}

/* Image occupe tout le conteneur */
.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

/* Overlay sombre qui couvre exactement l'image */
.image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 86%;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

/* Texte superposé au-dessus de l'overlay */
.text-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding-left: 40px;
  color: white;
  z-index: 2;
}

/* Titre du texte superposé */
.text-overlay h1 {
  font-size: 3em;
  margin: 0;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

/* Classe intro-text : Texte d'introduction centré */
.intro-text {
  max-width: 850px; /* Largeur maximale */
  margin: 20px auto 40px auto; /* Marges auto et espacements */
  text-align: center; /* Centre le texte */
  font-size: 1.2em; /* Taille du texte */
  line-height: 1.6; /* Hauteur de ligne */
  color: #333; /* Couleur du texte */
  word-break: break-word; /* Coupe les mots longs */
  white-space: normal; /* Retour à la ligne normal */
}

/* Classe two-blocks-section : Section avec deux blocs côte à côte */
.two-blocks-section {
  display: flex; /* Affichage en ligne */
  justify-content: center; /* Centre horizontalement */
  gap: 20px; /* Espace entre les blocs */
  background-color: #fff; /* Fond blanc */
  padding: 40px 20px; /* Espacement interne */
  flex-wrap: wrap; /* Retour à la ligne si besoin */
}

/* Classe block : Bloc individuel de la section */
.block {
  flex: 1; /* Prend la même largeur */
  min-width: 300px; /* Largeur minimale */
  max-width: 560px; /* Largeur maximale */
  height: 350px; /* Hauteur fixe */
  border-radius: 8px; /* Coins arrondis */
  overflow: hidden; /* Cache le débordement */
}

/* Classe image-container : Conteneur d'image avec overlay */
.image-container {
  position: relative; /* Position relative */
  width: 100%; /* Largeur totale */
  height: 100%; /* Hauteur totale */
}

/* Classe image-container img : Image du bloc */
.image-container img {
  width: 100%; /* Largeur totale */
  height: 100%; /* Hauteur totale */
  object-fit: cover; /* Recouvre le conteneur */
  display: block; /* Affichage bloc */
  transition: transform 0.3s ease; /* Transition douce */
}

/* Affichage des .block deux par ligne, retour à la ligne après chaque paire */
.two-blocks-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  background-color: #fff;
  padding: 40px 20px;
}

.two-blocks-section .block {
  flex: 1 1 calc(50% - 20px); /* 2 blocs par ligne */
  min-width: 300px;
  max-width: 560px;
  height: 350px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Pour les écrans étroits, 1 bloc par ligne */
@media (max-width: 900px) {
  .two-blocks-section .block {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Classe image-container:hover img : Effet zoom au survol */
.image-container:hover img {
  transform: scale(1.05); /* Zoom au survol */
}

/* Classe overlay-text (dans block) : Overlay texte sur image */
.overlay-text {
  position: absolute; /* Position absolue */
  bottom: 0; /* Aligne en bas */
  left: 0; /* Aligne à gauche */
  right: 0; /* Aligne à droite */
  padding: 20px; /* Espacement interne */
  color: white; /* Texte blanc */
  font-size: 1.2em; /* Taille du texte */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); /* Dégradé */
  display: flex; /* Affichage flex */
  flex-direction: column; /* Colonne */
  justify-content: flex-end; /* Aligne en bas */
  height: 100%; /* Hauteur totale */
}

/* Classe overlay-text .left : Texte à gauche dans overlay */
.overlay-text .left {
  margin-bottom: 40px; /* Espace sous le texte */
  font-weight: bold; /* Gras */
  font-size: 1.0em; /* Taille du texte */
}

/* Classe overlay-text .right : Texte à droite dans overlay */
.overlay-text .right {
  font-size: 0.9em; /* Taille du texte */
  align-self: flex-end; /* Aligne à droite */
}
/* Classe image-text : conteneur relatif pour l'image et le texte superposé */
.image-text {
 position: relative; /* Position relative */
  width: 100%; /* Largeur totale */
  height: 100%; /* Hauteur totale */
}

/* Classe image-text img : image affichée dans le conteneur */
.image-text img {
  width: 80%; /* Largeur de l'image */
  height: 70%; /* Hauteur totale */
  object-fit: cover; /* Recouvre le conteneur */
  display: block; /* Affichage bloc */
  transition: transform 0.3s ease; /* Transition douce */
  margin-left: 10%; /* Espace à gauche */
  margin-right: 10%; /* Espace à droite */
}

/* Classe textt : texte superposé sur l'image */
.textt {
 position: absolute; /* Position absolue */
  top: 50%; /* Centre verticalement */
  left: 0; /* Aligne à gauche */
  transform: translateY(-50%); /* Centre verticalement */
  padding-left: 130px; /* Espace à gauche */
  color: rgb(255, 255, 255); /* Texte blanc */
}

.double-image-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 60px 40px;
  background-color: #fff; /* Fond blanc */
  flex-wrap: nowrap; /* Pas de retour à la ligne, côte à côte */
}

.left-image img {
  max-width: 100%;
  width: 600px;
  height: auto;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background: #fff; /* Fond blanc derrière l'image */
}

.right-text {
  max-width: 600px;
  font-family: Arial, sans-serif;
  color: #23394c;
  background: #fff; /* Fond blanc derrière le texte */
  padding: 20px 0;
}

.right-text h2 {
  font-size: 30px;
  margin-bottom: 10px;
  font-weight: normal;
}

.right-text p {
  font-size: 20px;
  font-weight: bold;
  font-weight: normal;
}

.titre-gamme {
  font-size: 30px; /* Taille du titre */
  font-weight: none; /* Gras */
  color: #23394c; /* Couleur du titre */
  display: flex; /* Affichage en ligne */
  text-align: left; /* Alignement à gauche */
  margin-bottom: 20px; /* Espace sous le titre */
  margin-left: 110px; /* Décale le titre de la gauche */
}
.cement-selector {
  display: flex;
  justify-content: center; 
  align-items: flex-start;
  gap: 60px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.images {
  position: relative;
  width: 500px;
  min-width: 320px;
}

.img {
  position: absolute;
  top: 0; left: 10px;
  width: 75%; /* Largeur de l'image */
  height: auto; /* Hauteur auto pour conserver le ratio */
  display: none;
  background-color: none;
}

#cement1:checked ~ .images .img1,
#cement2:checked ~ .images .img2,
#cement3:checked ~ .images .img3,
#cement4:checked ~ .images .img4 {
  display: block;
}

.texts {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 300px;
  max-width: 400px;
  margin-left: 0;
}

label {
  cursor: pointer;
  font-size: 18px;
  color: #666;
  text-align: left;
  padding: 10px 0;
  width: 100%;
}

#cement1:checked ~ .texts label[for="cement1"],
#cement2:checked ~ .texts label[for="cement2"],
#cement3:checked ~ .texts label[for="cement3"],
#cement4:checked ~ .texts label[for="cement4"] {
  color: green;
  font-weight: bold;
}
.essai {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
  background-color: none; /* Fond transparent */
}
.img-produit {
  width: 100%;
  max-width: 600px; /* Largeur maximale de l'image */
  height: auto; /* Hauteur auto pour conserver le ratio */
  margin-left: 100px; /* Décalage à gauche */
} 
.lien-telechargement {
  display: inline-block; /* Affichage en ligne */
  padding: 12px 24px; /* Taille du bouton */
  background-color: none; /* Jaune Sococim */
  color: #000; /* Texte noir */
  text-decoration: none; /* Pas de soulignement */
  font-weight: bold; /* Texte en gras */
  border-radius: 30px; /* Bords arrondis */
  transition: background-color 0.3s ease; /* Effet doux au survol */
  margin-left: 120px; /* Décalage à gauche */
}
.bus-rapid{
  display: flex; 
  flex-direction: column;
  justify-content: center; /* Centre verticalement */
  background-color: none; /* Fond transparent */
  margin-left: 150px; /* Décalage à gauche */
  margin-right: 150px; /* Décalage à gauche */
  
}
.bus-rapid ul li::marker {
  color: #038826; /* Couleur des puces */
}
.double-image-section ul li::marker{
  color: #038826; /* Couleur des puces */
}
.img-fondation img {
 margin-left: 150px; /* Décalage à gauche */
  margin-right: 150px; /* Décalage à gauche */
}
.text-fondation {
  max-width: 600px; /* Largeur maximale */
  font-family: Arial, sans-serif; /* Police Arial */
  color: #23394c; /* Couleur du texte */
  margin-left: 330px; /* Décalage à gauche */
  margin-right: 330px; /* Décalage à gauche */
}
.texte-deposer{
   margin-left: 300px; /* Décalage à gauche */
  margin-right: 300px; /* Décalage à gauche */
  font-family: Arial, sans-serif; /* Police Arial */
  font-size: 20px; /* Taille du titre */
  font-weight: none; /* Gras */
}
.texte-deposer2{
   margin-left: 100px; /* Décalage à gauche */
  margin-right: 100px; /* Décalage à gauche */
  font-family: Arial, sans-serif; /* Police Arial */
  font-size: 20px; /* Taille du titre */
  font-weight: none; /* Gras */
}
.formulaire-section {
  padding: 40px;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
}

.formulaire {
  background: none;
  padding: 30px 40px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1); 
  width: 100%;
  max-width: 600px;
  font-family: Arial, sans-serif;
}

.formulaire h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333; 
}

.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 8px;
  font-weight: bold;
  color: #333333; 
}

.form-group input,
.form-group textarea,
.form-group button {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  width: 100%;
}

.form-group textarea {
  resize: vertical;
}

.form-group button {
  background-color: #c9e709;
  color: rgb(21, 20, 20);
  font-weight: bold; 
  cursor: pointer;
  transition: background-color 0.3s;
}

.form-group button:hover {
  background-color: #eff3f7; 
}

.form-group-inline {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}


.button-emploi {
  padding: 12px;
  border: 0px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  width: 15%;
    margin-left: 500px; /* Décalage à gauche */
  margin-right: 500px; /* Décalage à gauche */
}
.button-emploi:hover {
  background-color: #eff3f7; 
}
.ph-actualite {
  display: flex; /* Affichage flex pour centrer l'image */
  justify-content: center; /* Centre horizontalement */
  margin: 40px 0; /* Espace en haut et en bas */
}

.ph-actualite img {
  max-width: 500px; /* ✅ Réduit la taille de l’image */
  width: 100%;       /* ✅ Pour qu’elle s’adapte au conteneur */
  height: auto;      /* ✅ Garde les proportions */
}
.text-actualite{
  margin-left: 160px; /* Décalage à gauche */
  margin-right: 160px; /* Décalage à gauche */
  font-family: Arial, sans-serif; /* Police Arial */
  font-size: 20px; /* Taille du titre */
  font-weight: none; /* Gras */
}
.text-actualite h2 {
  font-size: 20px; /* Taille du titre */
  font-weight: none; /* Gras */
  color: #23394c; /* Couleur du titre */
  margin-left: 200px; /* Décalage à gauche */
  margin-right: 200px; /* Décalage à gauche */
  text-transform: uppercase;
}
.text-actualite ul li::marker {
  color: #038826; /* Couleur des puces */
}
.text-actualite1 h1 {
  font-size: 25px; /* Taille du titre */
  font-weight: none; /* Gras */
  color: #23394c; /* Couleur du titre */
  margin-left: 140px; /* Décalage à gauche */
  text-transform: uppercase;
}
.source h5 {
  margin-left: 850px; /* Décalage à gauche */
  font-size: 15px; /* Taille du titre */
  font-weight: none; /* Gras */
}
.image-text::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 80%;
  height: 100%;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
  margin-left: 128px;
}
.textt {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding-left: 135px;
  color: white;
  z-index: 2;
}