/* Assombrit légèrement la vidéo du masthead
   pour améliorer la lisibilité du contenu par-dessus */
#video_mast, #img_mast{
    filter: brightness(0.7);
}

/* Champs de formulaire transparents
   (héritent du fond du parent) */
input, textarea{
    background-color: transparent;
}
.sep_footer{
   height:10vh!important;
}
/* ===============================
   SECTION CONTACT
   =============================== */

/* Section principale du contact
   - pleine largeur
   - hauteur écran
   - centrée verticalement et horizontalement
   - hauteur minimale pour petits écrans */
#section_contact{
    width: 100%;
    height:120vh;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
}
/* Conteneur interne
   - largeur réduite
   - disposition en colonnes */
#container_contact{
    width: 80%;
    height:100%;
    display: flex;
}

/* Colonne gauche (logo / visuel)
   - centrée
   - organisation verticale */
#left_logo{
    width: 40%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Image principale
   - format carré
   - largeur adaptative
   - taille minimale garantie */
#img1{
    width: 100%;
    aspect-ratio: 1;
    min-width: 100px;
}

/* ===============================
   COLONNE DROITE (FORMULAIRE)
   =============================== */
#right_logo{
    width: 70%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;
    flex-direction: column;
    gap:2%;
    position: relative;
}

/* Conteneur des inputs
   - bordure visible
   - angles arrondis
   - padding interne */
.are_input{
    border: 1px solid #40534d;
    border-radius: 20px;
    padding: 2% 2% 1% 2%;
    width: 100%;
    height:10%;
}

/* Zone de texte (textarea)
   - hauteur relative au conteneur */
#text{
    height:80%
}

/* Bouton d’envoi
   - largeur adaptée au contenu
   - curseur cliquable */
#envoie{
    width: fit-content;
    cursor: pointer;
}

/* ===============================
   ICÔNE WHATSAPP
   =============================== */

/* Icône responsive
   - largeur relative au viewport
   - taille minimale garantie */
#whatsapp{
    width: 2vw;
    min-width: 20px;
    height:auto;
}


#price{
   margin-top: 5%;
   width: 80%;
   margin-left: 10%;
   display: flex;
   gap:2%;
}
#price div{
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   border-radius: 20px;
}
.bordered{
   border: 1px solid rgba(48, 97, 51, 0.379);
   padding: 1%;
}
#adresse{
   text-align: center;
}

@media (max-width: 700px){
   #price{
      display: flex;
      flex-wrap: wrap;
      width: 90%;
      margin-left: 5%;
      gap:2%;
      row-gap: 10px;
   }
   #price div{
      width: 48%;
      margin-left: 0;
      text-align: center;
   }
   #container_contact{
      flex-direction: column-reverse;
   }
   #section_contact{
      height:auto;
      min-height: auto;
   }
   #right_logo, #left_logo{
      width: 100%;
   }
   .are_input, #envoie{
      margin-top: 2%;
   }
   #text{
      height:50vh;
      min-height: 320px;
   }
   .in_bordered{
      width: 90%!important;
   }
}

@media (max-width: 500px){
   #container_contact{
      width: 90%;
   }
   .are_input{
      margin-top: 3%;
      padding-left: 10px;
   }
}