/* style.css */

@import url('https://fonts.google.com/specimen/DM+Serif+Display?query=display');
@import url('https://www.dafontfree.io/avenir-font/');




body {
    font-family: 'DM Serif Display', serif;
    font-family: 'Avenir', sans-serif;
}


body {
  font-family: 'Avenir', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #FFF9EF;
  width: 100%;
}



.navbar-sticky {
  position: sticky;
  top: 0;
  z-index: 10000; /* Donne un z-index très élevé pour rester au-dessus des autres éléments */
  background-image: url("../img/fond-navbar2.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
}


.navbar {
  position: relative;
  display: flex;
  z-index: 1000; /* Navbar au-dessus de la vague */
  align-items: center;
  justify-content: space-between;
}

.logo-container {
  justify-content: left;
  display: flex;
}

.logo {
  position: relative;
  top: -1.7em; /* Remet le logo à une position normale */
  left: -0.5em; /* Assurez-vous que le logo reste à gauche */
  height: 50%; /* Ajustez la hauteur si nécessaire */
  width: auto; /* Ajustez la largeur si nécessaire */
  max-height: 200px;
  z-index: 1001; /* Assurez que le logo reste au-dessus des autres éléments */

  }

.navbar ul {
  display: flex;
}

.navbar ul li {
  display: flex;
  margin: 0 10px;
}

.navbar ul li a {
  text-decoration: none;
  color: #FFF9EF;
}

.main-menu {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  list-style-type: none;
  justify-content: flex-end;
  flex-grow: 1;
}


/* NAVBAR */

.waveywavey {
  position: absolute;
  top: -1em;
  width: 100%; /* Assure que l'image prend toute la largeur de l'écran */
  z-index: 0; /* Assure que la vague reste derrière la navbar */
  display: flex;
  justify-content: center; /* Centre l'image horizontalement */
  align-items: flex-end; /* Positionne l'image en bas */
  overflow: hidden; /* Cache tout débordement d'image au besoin */
}


.waveywavey img {
  width: 100%; /* S'assure que la largeur reste fixée */
  height: auto; /* Maintient les proportions de largeur/hauteur */
  max-height: none; /* Retire toute limitation de hauteur */
  object-fit: cover; /* Garde le ratio tout en couvrant l'élément */
}




.wave {
  width: 100%;
  /* height: auto; Garder les proportions */
}

label {
  display: none;
}

input[type="checkbox"] {
  display: none; /* Masquer la checkbox */
}






/* QUI SOMMES NOUS */


.pres_simonella {
  display: flex;
}
.titretexte1 {
  margin-left: 5em;
}

.fond_texte {
  background-color: white;
  padding: 3%;
  width: 90%;
  border-radius: 5%;
  margin-top: -1.2em;
}
.gros_titre {
  color: #AE6C70;
  font-family: 'DM Serif Display', serif;
  font-size: 4em;
  margin-top: -1em;

}

.texte {
  font-family: 'Avenir', sans-serif;
  font-size: 1em;
}



.portraitAL img {
  width: 70%;
  margin-top: -5em;
}

.description {
  width: 200px;
  font-family: 'avenir', sans-serif;
  margin-left: 50%;
  margin-top: -20%;
}

.description h3 {
  color: chocolate;
}

/* 
.prezprez {
  width:80%;
  margin-left: 20%;
  margin-top: 2em;

} */








.vaguebeige1 {
  position: absolute;
  bottom: -1000px;
    width: 100%; /* S'assure que la largeur couvre toute la fenêtre */
    height: auto; /* Laisse l'image s'adapter à sa proportionnalité naturelle */
    overflow: hidden; /* Évite le débordement au cas où l'image est trop grande */
    display: flex;
    justify-content: center; /* Centrer l'image horizontalement */
    align-items: flex-end; /* Positionner l'image en bas */
    z-index: -1; /* Placer la vague derrière le contenu */
}

.vaguebeige1 img {
    width: 100%; /* S'assure que l'image couvre toute la largeur */
    height: auto; /* Maintient le ratio aspect de l'image */
    display: block; /* Retire les espaces blancs sous l'image si elle est inline */
}



/*ATELIER*/


.section-atelier {
  margin-top: 23em;
  display: flex;
}

.titretexte2 {
  width: 80%;
  margin-left: -25em;
  margin-right: 10em;
  margin-top: 2em;
}

.photo img {
  width: 50%;
  margin-left: 5em;
}




/*PARC MACHINE*/


.section-imprimerie {
  margin-top: 23em;
  display: flex;
}

.titretexte3 {
  width: 80%;
  margin-left: 5em;

}

.photo-parc {
  width:80%;
  margin-left: 5em;
}

.parc2 {
  width: 90%;
}




/* METHODOLOGIE */

.methodo {
  margin-top: 18em;
  justify-items: center;
}

.timeline img {
  width: 90%;
  margin-left: 5em;
}


.vaguebeige2 {
  position: absolute;
 top: 2400px;
    width: 100%; /* S'assure que la largeur couvre toute la fenêtre */
    height: auto; /* Laisse l'image s'adapter à sa proportionnalité naturelle */
    overflow: hidden; /* Évite le débordement au cas où l'image est trop grande */
    display: flex;
    justify-content: center; /* Centrer l'image horizontalement */
    align-items: flex-end; /* Positionner l'image en bas */
    z-index: -1; /* Placer la vague derrière le contenu */
}

.vaguebeige2 img {
    width: 100%; /* S'assure que l'image couvre toute la largeur */
    height: auto; /* Maintient le ratio aspect de l'image */
    display: block; /* Retire les espaces blancs sous l'image si elle est inline */
}



/*VALEURS*/




/* 
.fond_valeur {
  border-radius: 50%;
  width: 600px;
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 10%;
  margin-left: 30%;
  padding: 7%;
}

.fond_valeur img {
  width: 60%;
} */

.fond_valeur {
  margin-top: 15em;
}

#valeurs {
  margin: -10px;
  padding: 1.5em;  /* Enlever tout le padding pour éviter de déplacer le texte */
  text-align: center;
  font-size: 2.5em;  /* Ajuster la taille pour qu'elle reste sur une seule ligne */
}

.ligne1, .ligne3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}


.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.txt-overlay {
  margin-top: 10px;
  font-size: 0.9em;
  color: #333;
  text-align: center;
}











.vaguebeige2 {
  position: absolute;
    overflow: hidden; /* Évite le débordement au cas où l'image est trop grande */
    display: flex;
    justify-content: center; /* Centrer l'image horizontalement */
    align-items: flex-end; /* Positionner l'image en bas */
    z-index: -1; /* Placer la vague derrière le contenu */
}

.vaguebeige2 img {
  margin-top: 50px;
  width: 100%; /* S'assure que l'image couvre toute la largeur */
  height: auto; /* Maintient le ratio aspect de l'image */
  display: block; /* Retire les espaces blancs sous l'image si elle est inline */
}









  /*FOOTER*/


  .fond-footer {
    position: absolute;
      overflow: hidden; /* Évite le débordement au cas où l'image est trop grande */
      display: flex;
      justify-content: center; /* Centrer l'image horizontalement */
      align-items: flex-end; /* Positionner l'image en bas */
      z-index: -1; /* Placer la vague derrière le contenu */
  
  }
  
  .fond-footer img {
    margin-top: 50px;
    width: 100%; /* S'assure que l'image couvre toute la largeur */
    height: auto; /* Maintient le ratio aspect de l'image */
    display: block; /* Retire les espaces blancs sous l'image si elle est inline */
  }
  
  
  
  .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* padding: 20px; */
    margin-bottom: 5em;
  }
  
  .footer-left {
    width: 30%;
    margin-top: 17em;
    margin-left: 5em;
    align-items: center;
    text-align: center;
  }
  
  .footer-left p {
    margin: 0;
    font-size: 1.2em;
    color: #e1cfd2;
  }
  
  
  
  
  
  .iledefrance {
    display: flex;
    z-index: 20;
    margin-top: 20em;
    margin-left: -8em;
  }
  
  .footer-idf-image {
    width: 300px; /* Taille de l'image carrée */
    height: auto; /* Taille de l'image carrée */
  }
  
  .footer-france-underline {
    width: 150px; /* Ajustez la largeur selon votre besoin */
    height: auto;
    margin-right: 10px;
  }
  
  
  
  .social-media {
    margin-top: 5em;
  }
  
  .social-media p {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
    color: #e1cfd2;
    font-family: 'DM Serif Display', serif;
  }
  
  .social-media a {
    margin-right: 15px;
    margin-top: 2em;
    font-size: 2em;
    color: #e1cfd2;
    text-decoration: none;
  }
  
  .footer-right {
    width: 25%;
    margin-right: 5em;
    margin-top: 5em;
    text-align: center;
  }
  
  .footer-right h3 {
    font-size: 1.5em;
    color: #e1cfd2;
    margin-bottom: 10px;
    font-family: 'DM Serif Display', serif;
  }
  
  .footer-right p {
    font-size: 0.7em;
    color: #e1cfd2;
    margin-bottom: 10px;
  }
  
  footer form {
    display: flex;
    flex-direction: column;
  }
  
  footer form input,
  footer form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Avenir', sans-serif;
  }
  
  footer form textarea {
    height: 150px;
  }
  
  footer form button {
    padding: 10px 15px;
    background-color: white;
    color: #AE6C70;
    border: none;
    border-radius: 5px;
    cursor: pointer-6;
    font-size: 1em;
    font-weight: bold;
  }
  
  .footer-bottom {
    text-align: center;
    margin-top: -3em;
    font-size: 0.9em;
    color: #e1cfd2;
  }
  























/* Responsivité */



@media (min-width: 768px) {
  .logo {
    top: -2.5em;
    height: 80%;
    }
  .main-menu {
    display: flex;
    align-items: end;
    top: 0.5em;
    right: 2em;
}
  .waveywavey {
    position: absolute;
    top: -2em;
    left: 0;
    width: 100%;
    z-index: 0; /* Vague en arrière-plan */
  }



}


/* TABLETTE */

@media (max-width: 768px) {

  .navbar ul li a {
    font-size: 0.75rem;
    }

.vaguebeige1 {
  bottom: -300px;
}


/* QUI SOMMES NOUS */

.titretexte1 {
  margin-top: -5em;
  width: 300%;
} 

.texte {
  font-size: 0.7em;
}

.portraitAL {
  flex-direction: column;

}

.portraitAL img {
  width: 80%; /* Rétrécit l'image */
  margin-top: -3em; /* Supprime la marge négative */
}

.description {
  margin-left: 30%;
  width: 50%; /* Adapte la largeur de la description */
  margin-top: 0.5em; /* Ajoute un peu d'espace */
  text-align: center; /* Centre le texte */
  font-size: 0.7em;
}



.gros_titre {
  font-size: 2em;
}



/* ATELIER */

.section-atelier {
  margin-top: 9em;
}

.photo img {
 width: 100%;
 margin-top: 3em;
 margin-left: 2em;
}
.titretexte2 {
margin-top: 3em;
margin-left: 7em;
margin-right: 2em;
width: 400%;
}


/* PARC MACHINES */


.section-imprimerie {
  margin-top: 10em;
}

/* METHODO */

.methodo {
  margin-top: 7.5em;
  margin-left: -4em;
}

.timeline img {
  width: 85%;

}

.vaguebeige2 {
  top: 1550px; 
}


/* VALEURS*/


.fond_valeur {
  margin-top: 6em;
  padding-bottom: 5em;
}

.item img{
  width: 70%;
}


/*FOOTER*/


  /* Réduction des tailles pour le footer */


  /* Réduction des tailles pour le footer */
  .fond-footer {
    margin-top: -26%;
  }
  
    .footer-container {
      background-color: #AE6C70;
      flex-direction: column; /* Empile les éléments verticalement */
      align-items: center;
      margin-top: 20%;
      padding-bottom: 100px;
    }
  
    .footer-left {
      width: 80%; /* Réduit la largeur pour mieux s'adapter à l'écran */
      margin-top: 2em;
      margin-left: 0;
      text-align: center; /* Garde le texte centré */
    }
  
    .iledefrance {
      justify-content: center; /* Centre les images sous le texte */
      margin-top: 0;
      margin-left: 0;
      margin-bottom: 1em; /* Ajoute un espace en bas pour séparer du reste du contenu */
    }
  
    .footer-france-underline {
      width: 120px; /* Réduit la largeur de l'image sous le texte */
    }
  
    .footer-idf-image {
      width: 150px; /* Réduit la taille de l'image IDF */
    }
  
    .social-media {
      margin-top: 1em; /* Augmente l'espacement en haut pour plus de clarté */
    }
  
    .social-media a {
      margin-right: 10px; /* Réduit l'espacement entre les icônes */
      font-size: 1.5em; /* Diminue légèrement la taille des icônes */
    }
  
    .footer-right {
      width: 80%; /* Réduit la largeur du formulaire */
      margin-right: 0;
      margin-top: 2em;
      text-align: center; /* Centre le contenu */
    }
  
    .footer-right h3 {
      font-size: 1.2em; /* Réduit la taille du titre */
    }
  
    .footer-right p {
      font-size: 0.9em; /* Augmente légèrement la taille du texte pour la lisibilité */
    }
  
    footer form input,
    footer form textarea {
      font-size: 1em; /* Maintient la taille du texte des formulaires */
    }
  
    footer form button {
      font-size: 1em; /* Maintient la taille du bouton */
    }
  
    .footer-bottom {
      font-size: 0.8em; /* Réduit légèrement la taille du texte */
      padding: 4em; /* Ajuste l'espacement en haut pour plus de clarté */
      background-color: #AE6C70;
      margin-top: -20%;
    }
  }
  
  
















/* TELEPHONE */


@media (max-width: 480px) {

  /* Navbar */
  .navbar-sticky {
    top: 0;
  }
  body {
    margin: 0;
    padding: 0;
    width: 100vw; /* Utilise 100vw pour la largeur de l'écran complet */
    overflow-x: hidden; /* Empêche les débordements horizontaux */
  }
 
  .navbar {
    background-color: #AE6C70;
    height: 3em;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
  }

  .logo {
    width: 50%;
    height: auto;
    left: -1em;
    top: 0.5em;
    z-index: 3;
  }

  .waveywavey {
    width: 100vw;
    top: 1.7em;
  }

  label {
    display: flex;
    font-size: 2em;
    color: white;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    z-index: 3;
    margin-right: 1em;
  }

  input[type="checkbox"] {
    display: none; 
  }

  .main-menu {
    display: none;
    position: absolute;
    top: 3em;
    left: 0;
    background-color: #AE6C70;
    width: 100vw;
    padding: 1em 0;
    z-index: 999; 
  }

  .main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .main-menu ul li {
    margin: 0.5em 0;
  }

  .main-menu ul li a {
    text-decoration: none;
    color: #FFF9EF;
    font-size: 1.2em;
  }


  input[type="checkbox"]:checked + label.burger + .main-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
}



    .navbar,
    .waveywavey {
      width: 100vw;
    
  }


/* QUI SOMMES NOUS */


.pres_simonella {
  flex-direction: column;
  margin-top: -3em;
  width: 100vw;
}


.titretexte1 {
  margin-top: 8em;
  width: 100%;
  margin-left: 1em;
} 

.texte {
  font-size: 0.7em;
}

.portraitAL {
  flex-direction: column;

}

.portraitAL img {
  width: 100%; /* Rétrécit l'image */
  margin-top: 2em; /* Supprime la marge négative */
}

.description {
  margin-left: 5em;
  width: 80%; /* Adapte la largeur de la description */
  margin-top: 0.5em; /* Ajoute un peu d'espace */
  text-align: center; /* Centre le texte */
  font-size: 0.7em;
}



.gros_titre {
  font-size: 2em;
  padding: 0.5em;
}










  /* Fond beige */

  .vaguebeige1 {
    width: 100%;
    bottom: -78em;
  }

  .vaguebeige1 img {
    height: 45em;
  }




  

/* ATELIER */

.section-atelier {
  margin-top: 9em;
  flex-direction: column;
  width: 80%;
}

.photo img {
 width: 100%;
 margin-top: 3em;
 margin-left: 2em;
}
.titretexte2 {
margin-top: 3em;
width: 100%;
margin-left: 2em;
}


/* PARC MACHINES */


.section-imprimerie {
  margin-top: 10em;
  flex-direction: column;
}

.titretexte3 {
  margin-left: 2.5em;
}

.photo-parc img {
  margin-top: 2em;
  margin-left: -2em;
}

/* METHODO */

.methodo {
  margin-top: 7.5em;
  margin-left: 3em;
}

.timeline img {
  width: 110%;
margin-left: -2em;
}

.vaguebeige2 {
  bottom: -153em;
}

.vaguebeige2 img {
  height: 25em;
  margin-top:auto;
}

/* VALEURS*/



#valeurs {
  margin: -10px;
  padding: 1em;  /* Enlever tout le padding pour éviter de déplacer le texte */
  text-align: center;
  font-size: 1em;  /* Ajuster la taille pour qu'elle reste sur une seule ligne */
}

.ligne1, .ligne3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  font-size: 0.7em;
}


.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.txt-overlay {
  margin-top: 10px;
  font-size: 0.9em;
  color: #333;
  text-align: center;
}




  /* FOOTER*/



  .fond-footer {
    margin-top: -30%;
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
    margin-top: 20%;
    padding-bottom: 50px;
  }

  .footer-left {
    width: 80%;
    margin-top: 2em;
    margin-left: 0;
    text-align: center;
  }

  .footer-image-container {
    justify-content: center;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 1em;
  }

  .footer-france-underline {
    width: 100px;
  }

  .footer-idf-image {
    width: 100px;
  }

  .social-media {
    margin-top: 1em;
  }

  .social-media a {
    margin-right: 10px;
    font-size: 1.2em;
  }

  .footer-right {
    width: 80%;
    margin-right: 0;
    margin-top: 2em;
    text-align: center;
  }

  .footer-right h3 {
    font-size: 1.2em;
  }

  .footer-right p {
    font-size: 0.8em;
  }

  footer form input,
  footer form textarea {
    font-size: 0.9em;
  }

  footer form button {
    font-size: 1em;
  }

  .footer-bottom {
    font-size: 0.8em;
    padding: 2em;
    background-color: #AE6C70;
    margin-top: -20%;
  }
}

@media (min-width: 1400px) {
  .navbar-sticky {
    background-position: center -2vw;
    background-repeat: space;
  }
}