/* Global Styles */
@font-face {
  font-family: 'Crusoe';
  src: url(./fonts/CrusoeText-Regular.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CrusoeBold';
  src: url(./fonts/CrusoeText-Bold.woff) format('woff');
  font-weight: bold;
  font-style: normal;  
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Crusoe', sans-serif !important;
    background-color: #ffffff;
    color: #333;
    font-size: x-large;
  }

  a {
    text-decoration: none;
  }
  
 #contact {
  display: flex;
  align-items: center;
  margin-right: 25px;
 }

  button {
    padding: 12px 24px;
    background: linear-gradient(90deg,rgba(78, 181, 90, 1) 0%, rgba(43, 111, 43, 1) 50%); /* Vert foncé */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin: 10px;
  }
  
  button:hover {
    background-color: #1e4b1e;
  }
  
  .hero-content {
    display: flex;
    justify-content: space-between;
  }
  
  .hero h1 {
    font-family: 'CrusoeBold', sans-serif;
    font-size: 3rem;
    margin-bottom: 20px;
  }

  .lower_h1{
    font-size: 2rem;
  }
  
  .hero p {
    font-size: 1.2rem;
    margin-bottom: 40px;
  }
  
  .cta-buttons {
    display: flex;
    gap: 20px;
  }
  
.cta-button {
  background: linear-gradient(to bottom, #005d27, #013d1b); /* effet dégradé vert foncé */
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 999px; /* arrondi maximum */
  font-size: 16px;
  font-weight: bold;
  font-family: 'Crusoe';
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* ombre douce */
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: linear-gradient(to bottom, #007a35, #025528); /* effet au survol */
}

.margin_top {
  margin-top: 80px;
}

  .first_content {
    margin-left: 10%;
    align-content: center;
  }

  .first_content_img {
    text-align: right;
  }

#img1 {
  border-radius: 345px 460px 460px 345px / 270px 42px 43px 270px;
  width: 60%;
}
  
body {
  margin: 0;
  background: #fff;
}

.h1_green {
  font-family: 'Crusoe', 'sans-serif';
  color: #156f2c;
}

.h1_center {
  text-align: center;
}

.h1_second {
  margin: 0% 18% 0% 18%;
}

/* HEADER */

header {
  display: flex;
  justify-content: space-between;
}

#logo {
  width: 250px;
}

.margin_bottom {
  margin-bottom: 50px;
}

.btn1 {
  margin-left: 0;
}
/* SECOND */

.firsts_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 350px;
  justify-content: space-between;
  height: 350px;
  padding: 50px;
  margin-top: 50px;
  border: 3px solid #2B6F2B;
  border-radius: 20px;
}

.p_margin_bottom {
  margin-bottom: 30px;
}

/* THIRD */

.third_content {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding-bottom: 250px;
}

#logo2 {
  width: 23%;
  vertical-align: middle;
  padding-bottom: 47px;
}

.box2 {
  margin: 30px;
}

#box2_flex {
  display: flex;
  justify-content: space-around;
  text-align: center;
  flex-wrap: wrap;
}

.bold_txt {
  font-weight: bold;
  font-size: xxx-large;
}

.large_green {
  font-size: xxx-large;
  color: #156f2c;
}

.dot_top_left {
  transform: rotate(90deg);
  position: absolute; /* ou relative selon contexte */
  top: 0;
  left: 0;
}

.wave_bottom_left {
  position: absolute;
  left: -5px;
  bottom: -12px;
  min-width: 300px;
  pointer-events: none;  /* Pour que la vague ne gêne pas les clics sur le bouton ou le texte */
  z-index: 1;      
  transform: scaleX(-1) scaleY(1);
}   

.third_content > *:not(.wave_bottom_left):not(.dot_top_left) {
  position: relative;
  z-index: 2;
}

/* FOURTH */
.fourth_content {
  position: relative;      /* Important pour le positionnement de l'élément enfant en absolu */
  overflow: hidden;        /* Pour que la vague ne déborde pas de la div */
  background: #fff;        /* ou la couleur de ton fond, si besoin */
}

.box3 {
  margin: 3% 15% 3% 15%;
  border: 3px solid #2B6F2B;
  border-radius: 20px;
  padding: 1.5%;
}

.h3_plus {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
}

.btn_show2, .btn_show {
  cursor: pointer;
}

#show2, #show {
  display: none;
}

.p_margin {
  margin-top: 20px;
}

ul {
  padding-left: 50px;
}

.wave-bottom-right {
  position: absolute;
  right: -5px;
  bottom: -12px;
  min-width: 300px;
  pointer-events: none;  /* Pour que la vague ne gêne pas les clics sur le bouton ou le texte */
  z-index: 1;            /* Mettre plus bas que le contenu, mais plus haut que le fond */
}

.wave_top_left {
  position: absolute;
  left: -5px;
  top: -12px;
  min-width: 300px;
  pointer-events: none;  /* Pour que la vague ne gêne pas les clics sur le bouton ou le texte */
  z-index: 1;      
  transform: scaleX(-1) scaleY(-1);     /* Mettre plus bas que le contenu, mais plus haut que le fond */
}


.fourth_content > *:not(.wave-bottom-right):not(.wave_top_left) {
  position: relative;
  z-index: 2;
}

.btn_center {
  text-align: center;
  margin-bottom: 3%;
}


/* FIFTH */
.fifth_content {
  text-align: center;
  background: #dbe7dd;
  padding: 1px;
  position: relative;
  overflow: hidden;
}

.green_bgd {
  margin: 8%;
}

.p_padding {
  padding: 2% 20% 0% 20%;
}

.svg_bottom_left {
  position: absolute;
  bottom: -1px;
  left: -40px;
  z-index: 2;
  pointer-events: none;
  transform: scaleY(-1);
}

/* SIXTH */
.sixth_content {
  text-align: center;
}

.ligne_cli {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  align-items: center;
  justify-items: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.img_cli {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
  /* facultatif : background blanc pour éviter les pixels transparents */
  background: #fff;
}

#loeber {
  width: 221.166px;
  height: 74.2935px;
}
#distel {
  width: 248.242px;
  height: 57.4547px;
}
#desmet {
  width: 246.108px;
  height: 92.9058px;
}
#sahgev {
  width: 250.503px;
  height: 91.8285px;
}
#flashmetal {
  width: 252.549px;
  height: 83.9034px;
}
#alphalaser {
  width: 192.143px;
  height: 136.575px;
}
#demgy {
  width: 234.749px;
  height: 69.3447px;  
}
/*#cyclamen {
  width: 370.205px;
  height: 263.771px;
}*/

/* SEVENTH */
.seventh_content {
  text-align: center;
}

.icons {
  color: white;
  padding: 7px;
  border: 1px solid #156f2c;
  border-radius: 20px;
  background-color: #156f2c;
  margin-right: 10px;
}

#logo1 {
  width: 10%;
}

.top-blanc {
  height: 60px; /* ou plus/moins selon l'espace au-dessus que tu veux */
  background: #fff;
}

.vague-bg {
  position: relative;
  /* min-height: 80vh; */
  width: 100%;
  overflow: hidden;
  background: none; /* PAS de couleur ici, le SVG fait tout */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 35px;
}

.vague-svg {
  position: absolute;
  top: -110px; /* Pour faire dépasser la vague vers le haut */
  left: 0;
  width: 100%;
  height: 700px;
  z-index: 0;
  pointer-events: none;
}

.vague-content {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  padding-top: 300px; /* Pour que le texte soit bien sous la vague */
}

.footer {
  margin-top: 80px;
  color: #156f2c;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.2em;
}

.footer span {
  margin: 0 20px;
}


/* RESPONSIVE */ 
@media (max-width: 900px) {
  .ligne_cli {
    grid-template-columns: repeat(2, 1fr);
    max-width: auto;
  }
}
@media (max-width: 600px) {
  .ligne_cli {
    grid-template-columns: 1fr;
    max-width: auto;
  }
}
@media (max-width: 1420px) {
  #img1 {
    display: none;
  }
}