html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}


body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: rgb(255, 255, 255);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 7px;

}

main {
  flex-grow: 1;
}

.img-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 850px;
  background-image: url("/images/accrobranche_img/IMG_8370.jpeg");
  background-size: cover;
  background-position: center;
  text-align: center;
}

.overlay-content {
  display: flex;
  margin-top: 15%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: x-large;
}


.text {
  width: 70%;
  background-color: rgba(0, 0, 0, 0.484);
  /* noir semi-transparent */
  backdrop-filter: blur(10px) saturate(120%);
  /* flou + saturation */
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  /* support Safari */
  color: white;
  padding: 40px;
  box-sizing: border-box;
  border-radius: 12px;
  /* coins arrondis plus doux */
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* léger contour pour le style vitre */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  /* ombre subtile pour le relief */
}

h2 {

  font-size: xxx-large;
}

p {
  line-height: 2;
  /* ou 180%, ou encore 1.8em */
}


/*second section */

.second_section {

  background-color: rgb(231, 88, 32);
  color: white;
  text-align: center;
  padding-top: 55px;
  font-size: x-large;

}

.ss_text {

  margin-top: 2%;
  margin-right: 10%;
  margin-left: 10%;
}

.bold_text {

  font-weight: bold;
}

.partie_cercle {
  display: flex;
  width: 100%;
  height: 140px;
  gap: 100px;
  padding-bottom: 10%;
  padding-top: 3%;
  padding-left: 25%;
  padding-right: 25%;
  justify-content: center;

}

.cercle {

  width: 130px;
  /* largeur */
  height: 130px;
  /* hauteur */
  background-color: rgb(252, 252, 252);
  border-radius: 100%;

}

.third_section {

  background-color: rgb(231, 82, 22);
  /* couleur orange */
  background-image: url('/images/planche-de-bois.jpg');
  /* texture bois */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  /* mélange la couleur et l’image */
  height: 600px;
  padding-top: 5%;
  justify-content: center;
  display: flex;
  gap: 5%;

}

/* État initial : invisible */
.hidden {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

/* Quand visible : translation + opacité */
.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation spécifique pour les contact squares */
.square_down.visible {
  animation: squareDown 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes squareDown {
  from {
    opacity: 0;
    transform: translateY(50px);
    /* apparait depuis le bas */
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Styles de base du contact_square */
.contact_square {
  font-size:medium;
  text-align:center ;
  width: 400px;
  height: 400px;
  background: rgb(235, 226, 223 , 0.2);
  backdrop-filter: blur(10px) brightness(1.1);
  -webkit-backdrop-filter: blur(10px) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.927);
  display: flex;
  flex-direction:column ;
  align-items: center;
  font-weight: bolder;
  padding-top: 25px;
  color:#ffffff ;
  border-radius :5% ;
}

/* wrapper interne pour scale hover */
.contact_inner {
 
  padding-top: 5px;
  width: 85%;
  height: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

#img_tel , #img_wa {
    margin-right:90px;
}
/* hover sur le wrapper interne */
.contact_square.visible .contact_inner:hover {
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  transform: scale(1.1);
  cursor: pointer;
}

/* image interne */
.main_cimg {
  width: 40%;
}

 #website { display:none !important; }
/********************************************************/

.sn_img {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 20px;
}

.sn_img img {
  width: 70px;
}

.s1 p {
  font-size: large;
}

#img_tel,
#img_wa {
  width: 50%;
  margin-left: 25%
}

.s2 p,
.s3 p {

  padding-top: 5px;
  font-size: x-large;

}

.fourth_section {
  background-color: rgb(228, 212, 207);
  /* couleur orange */
  background-image: url('/images/planche-de-bois.jpg');
  /* texture bois */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  /* mélange la couleur et l’image */
  padding:200px ;
  padding-top: 1.5%;
  justify-content: center;
  display: flex;
  

}

.form_square {
  margin-bottom: 1%;
  background-color: #ccc;
  padding: 5% 1% 5% 1%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  box-shadow: -10px 10px 5px #2f2f2f;
}

.fourth_section h2 {
  color: rgb(231, 82, 22);
  margin-bottom: 10px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 25px;
  text-align: center;
}

.fourth_section p {
  color: #555;
  text-align: center;
  margin-bottom: 25px;
}

.contact-form {
  padding: 5% 5% 5% 5%;
  background-color: #ffffff;
  width: 900px;
  line-height: 50px;
  border-radius: 10px;
  box-shadow: 8px 10px 10px rgba(231, 81, 22, 0.635);
}



.contact-form label {
  display: block;
  margin-top: 15px;
  font-weight: bold;
}

.name-group {
  display: flex;
  gap: 10px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 5px;
  font-size: 16px;
  box-sizing: border-box;
}

.captcha-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.captcha-code {
  background: #eee;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
  letter-spacing: 2px;
}

button[type="submit"]{

     width: 100%;
     height:70px;
    padding: 5px;
    border: none;       /* Supprime la bordure par défaut */
    border-radius: 4px; /* Optionnel, coins légèrement arrondis */          /* Texte en blanc */
    cursor: pointer;
}

button[type="submit"]:hover {
  background: rgb(0, 0, 0);
  color:#ffffff ;
             /* Curseur main */

}







/*wwwwwwwww wwwwwww wwwwww wwwwwwwwwww wwwwwwwww wwwwwwwwww*/


/* ===========================
   📱 TABLETTE (max 1024px)
   =========================== */
@media (max-width: 1024px) {

  .img-section {
    height: 800px;
  }

  .text {
    margin-top : 10% ;
    width: 85%;
    padding: 30px;
  }

  button {
    width: 350px;
  }

  .second_section{

        padding-bottom : 5% ;
  }

  .third_section {
    gap: 4%;
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 5%;
  }

  .contact_square {
    width: 350px;
    height: 350px;
    
  }

  .contact_square.visible .contact_inner:hover {
  
  height:110% ;
  transform: scale(1.05);
 
}

  .s2 p , .s3 p   {
        font-size :medium ;
  }

  .s3 {

    margin-top : 40px ; 
  }

  .fourth_section {
    height: auto;
    padding-bottom: 10%;
    padding-top : 7% ;
  }
.form_square {

  width:90% ;
}
  .contact-form {
    width: 100%;
  }
}


/* ===========================
   📱 MOBILE LARGE (max 768px)
   =========================== */
@media (max-width: 768px) {

  html, body {
  max-width: 100%;
  overflow-x: hidden; /* empêche le scroll horizontal */
  box-sizing: border-box; /* inclut padding et border dans la largeur */
}


  .img-section {
    height: 500px;
    padding: 20px;
  }

  h2 {
    font-size: xx-large;
  }

  .text {
    margin-top:35% ;
    width: 90%;
    padding: 25px;
  }

  button {
    width: 80%;
    height: 60px;
  }

  button:hover {
    width: 85%;
  }


  .third_section {
    flex-direction: column;
    align-items: center;
    height: auto;
    gap: 30px;
  }

  .contact_square {
    width: 50%;
    height: auto;
    padding-bottom: 40px;
  }

  .main_cimg {
    width: 35%;
  }

  .contact_square.visible .contact_inner:hover {
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  transform: scale(1.015);
  cursor: pointer;
  
}

  .fourth_section {
    padding: 5% 2% 20% 2%;
  }

  .name-group {
    flex-direction: column;
  }
}


/* ===========================
   📱 MOBILE SMALL (max 480px)
   =========================== */
@media (max-width: 480px) {

  .img-section {
    height: auto;
    padding: 50px 10px;
  }

  .overlay-content {
    margin-top: 7%;
    font-size: medium;
  }

  .text {
    width: 95%;
    padding: 20px;
  }

  h2 {
    font-size: x-large;
  }

  button {
    width: 90%;
    height: 55px;
    font-size: 16px;
  }


  .contact_square {
    width: 70%;
  }
  .sn_img {
     gap :1px;
     margin-left:4% ;
  }

  #sn_text{
     text-align :center ;
     font-size :small ;
  }
  

  .sn_img img  {
         width :70% ;  
  }

  .main_cimg {
    width: 40%;
  }

  .s3 {
    margin-top :-1%;
  }

  .contact-form {
    padding: 25px 15px;
  }
}