body {  
    background-size: 100vw;
    background-repeat:no-repeat;                
    background: linear-gradient(#D4F8F8, #3BD0CD);
    height: 100%;
    margin: 0vw;
    }


/* MENU */

#LOGO {
    padding-left: 1vw;
    padding-top: 0.5vw;
    padding-bottom: 0vw;
    width: 13vw;

    }

.menu_bar {
    
    padding-right:16vw;                  /* Suppression des marges internes */
    margin-top:0vw;
    margin-bottom:0vw;
    width: 100vw;
    margin-left: 0vw;
    background-color: #73D5E5;     /* Ajout de la couleur d'arrière-plan */
    position: fixed;
    z-index:10;
}

.menu { 
    display: flex;              /* Transformation en flexbox */
    justify-content: right;  
    margin-top: -3.5vw; 
    margin-bottom:0vw;
}

/*.menu {
    display: flex;       
    padding-right:16vw;         
    margin-top:-0.6vw;
    margin-left:-0.6vw;
    margin-right:-0.6vw;
    margin-bottom:0vw;
    background-color: #73D5E5;   
    justify-content: right;   
    position:;
}*/

.menu li {
    list-style-type: none ;       /* Suppression des puces */
}

.menu a {
    display:block;                /* Transformation en block */
    min-width: 80vw;             /* Largeur minimale des liens */
}

.menu a {
    font-family: lato;
    font-weight: 900;
    font-size: 1vw;
    display:block;                /* Transformation en block */
    min-width: 120px;             /* Largeur minimale des liens */   
    margin-left: 5vw; 
    margin-top: 1vw;           /* Marges externes */
    margin-bottom: 1vw;  
    padding: 0.4vw 0;            /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
    text-align: center;           /* Centrage du texte */   
    color: #fff;                  /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    transition: all 0.3s ;          /* Ajout des effets de transition */
}

.menu a:hover {
  color: #1A5B69;
}

.menu a.assistance {     
    color: #1A5B69;
}

.menu a:hover.assistance{
  color: #fff;
}

  /* MODAL MENU */

/* The Modal (background) */
.modil {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  margin-top: 5vw;
  margin-left: 10vw;
  z-index: 1; /* Sit on top */
  padding-top: 2vw; /* Location of the box */
  left: 0;
  top: 0;
  width: 80vw; /* Full width */
  height: 9vw; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #D4F5F5; /* Fallback color */
  border-radius: 2vw;
  box-shadow: 0px 0px 15px 0px #0048a8;
}

/* Modal Content (Image) */
.modil-content {
  margin-left: 0vw;
  margin-right: 0vw;
  margin-bottom: 0vw;
  display:block;
  text-align:center;

}

.titlei {
  margin-right: 0vw;
  font-family: lato;
  font-weight: 900;
  font-size: 1.5vw;
  color: #1a5b69;
  padding-bottom: 2vw;
  
}

#captioni {
    margin-left: 0vw;
    margin-top: 0vw;
    width: auto;
    font-family: quicksand;
    font-size: 1vw;
    font-weight: 900;
    color: #1a5b69;
    text-decoration: none;
}

#lien {
    text-decoration: none;
    color: #1a5b69;
    font-weight: 900;
    margin-right: 1vw;
    margin-left: 1vw;
}

#telephone {
    margin-left: 1vw;
    text-decoration: none;
    color: #1a5b69;
}

#lien:hover{
    color: #F7804B;
    text-decoration: none;
    cursor: pointer;
}

/* Add Animation - Zoom in the Modal */
.modil-content {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.closei {
  position: absolute;
  top: 1vw;
  right: 2vw;
  color: #1a5b69;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.closei:hover,
.closei:focus {
  color: #F7804B;
  text-decoration: none;
  cursor: pointer;
}






/* SLIDESHOW */

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  width: 100vw;
  position: relative;
  margin-top: 0vw;
  margin-bottom: 1vw;
  padding-top: 3.9vw;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  margin-left: 1vw;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 1vw;
  padding-bottom: 0.7vw;
  color: white;
  font-weight: bold;
  font-size: 25px;
  transition: 0.6s ease;
  border-radius: 3px 3px 3px 3px;
  user-select: none;
  background-color: #73D5E5;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 3px 3px 3px;
  margin-right: 1vw;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  color: #73D5E5;
  background-color: white;
  transition: all 0.2s ;
}

/* Fading animation 
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}*/


/* BIENVENU */

.picto_souris{
    height: 0vw;
    margin-left: 12vw;
}

.TitreBIENVENU{
    font-family: lato;
    font-weight: 900;
    font-size: 2vw;
    color: #1a5b69;
    margin-left: 18vw;
    margin-bottom: 1vw;
    line-height: 1.5vw;
    text-align: justify;
}

.BIENVENU{
    font-family: quicksand;
    font-size: 1.2vw;
    color: #1a5b69;
    margin-left: 18vw;
    width: 65vw;
    line-height: 1.8vw;
    text-align: justify;
    column-count: 2;
    column-gap: 2.5vw;
}


.Bouton1 {
  cursor: pointer;
  position: absolute;
  font-family: lato;
  font-weight: 900;
  font-size: 1vw;
  margin-top: 2vw;
  margin-left: 40vw;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vw;
  padding-bottom: 0.5vw;
  color: white;
  transition: 0.6s ease;
  border-radius: 5px 5px 5px 5px;
  user-select: none;
  text-decoration: none;
  background-color: #68A5AD;
}

.Bouton1:hover{
  color: white;
  background-color: #73D5E5;
  transition: all 0.2s ;
}

.fil1{
    display: flex;              /* Transformation en flexbox */
    justify-content: center;
    width: 100%; 
    margin-top: 0vw; 
    margin-bottom:-2vw;
}


/* COMPÉTENCES */

.Competences{
    background-color: #D4F5F5;
    border-radius: 20px;

    width: 75vw;
    margin-left: 12.5vw;
    padding-top: 2vw;
    padding-bottom: 7vw;
    margin-bottom: 3vw;
    
}

.picto_roue{
    height: 0vw;
    margin-left: 2vw;
}

.textecompetences{
    font-family: quicksand;
    font-size: 1.2vw;
    color: #1a5b69;
    margin-left: 8vw;
    margin-bottom: 1vw;
    width: 60vw;
    line-height: 1.8vw;
    text-align: justify;
}



.boxcompetences{
    padding-left: 5vw;
}

.boxes{
    width: 63vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr [col-start]); 
    grid-template-rows: repeat(2, 200px [col-start]);
    grid-row-gap: 7vw;
    grid-column-gap: 3vw;
}

/* Réglage des éléments dans chaque boîte */
.boxes li {
    background-color: white;
    border-radius: 4px;
    box-shadow: 8px 8px #73D5E5;
    list-style-type: none ;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrer horizontalement le contenu */
    justify-content: center; /* Centrer verticalement le contenu */
    padding: 2vw;
    text-align: center;
    height: 16vw;
    position: relative;
}

/* Masquer le contenu hover */
.hover-content {
    display: none;
    position: absolute;
    top: 50%;
    left : 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 80%;

}

/* Affichage au survol */
.boxes li:hover .hover-content {
    display: block;
}

.boxes li:hover .pictocompet,
.boxes li:hover .actif {
    display: none;
}

.hover-title {
    font-family: lato;
    font-weight: 900;
    font-size: 1vw;
    color: #1a5b69;
    margin-bottom: 0.5vw;
}

.hover-description {
    font-family: quicksand;
    font-size: 0.9vw;
    color: #1a5b69;
    line-height: 1.4vw;
}

.boxes li:hover{
    background-color: white;
    border-radius: 4px;
    box-shadow: 8px 8px #73D5E5;
    list-style-type: none ;
    display:block;
    transition: all 0.3s ease;
}

/* Affichage du texte au survol et ajustement de son positionnement */
.boxes li:hover .text-hover {
    display: block; /* Le texte devient visible lorsqu'on survole la boîte */
}

/* Aligner le titre et le texte au centre de la boîte en mode hover */
.boxes li:hover a.actif {
    display: none; /* Cacher le titre pendant le survol */
}

.boxes img.pictocompet {     
    margin-bottom: 2vw;
    display: block;
    margin: 0 auto;
    margin-bottom: 2vw;
}

.boxes a.actif {     
    font-family: lato;
    font-weight: 900;
    font-size: 1vw;
    color: #1a5b69;
}

.fil2{              
    justify-content: left;
    width: 100%; 
    height: 0vw;
}


/* ACTIVITÉS */

.TitreActivite{
    font-family: lato;
    font-weight: 900;
    font-size: 2vw;
    color: #1a5b69;
    margin-top: 6vw;
    margin-bottom: 1vw;
    line-height: 1.5vw;
    text-align: center;
}

nav.image {
  display: row;
  justify-content: space-between;
  margin-left:18vw;
  column-span: 5vw;
  margin-top: 2vw;
}

/*Taille vignette
nav.image img {
  width: 15%;
  margin-right: 5vw;
  margin-bottom: 5vw;
}*/

#myImg1 {
  width: 15%;
  margin-right: 0vw;
  margin-bottom: 3vw;
}

.image a.activite1 {     
    font-family: lato;
    font-weight: 900;
    font-size: 1vw;
    color: #1a5b69;
    margin-left: -8vw;
    margin-right: 10vw;
}


#myImg2 {
  width: 12%;
  margin-right: 0vw;
  margin-bottom: 3vw;
}

.image a.activite2 {     
    font-family: lato;
    font-weight: 900;
    font-size: 1vw;
    color: #1a5b69;
    margin-left: -7vw;
    margin-right: 10vw;
}

#myImg3 {
  width: 16%;
  margin-right: 0vw;
  margin-bottom: 3vw;
}

.image a.activite3 {     
    font-family: lato;
    font-weight: 900;
    font-size: 1vw;
    color: #1a5b69;
    margin-left: -7vw;
    margin-right: 10vw;
}

#myImg4 {
  width: 12%;
  margin-right: 0vw;
  margin-bottom: 3vw;
}

.image a.activite4 {     
    font-family: lato;
    font-weight: 900;
    font-size: 1vw;
    color: #1a5b69;
    margin-left: -8.5vw;
    margin-right: 10vw;
}

#myImg5 {
  width: 11%;
  margin-left: 1.5vw;
  margin-right: 0vw;
  margin-bottom: 3vw;
  padding-top: 2vw;
}

.image a.activite5 {     
    font-family: lato;
    font-weight: 900;
    font-size: 1vw;
    color: #1a5b69;
    margin-left: -8vw;
    margin-right: 9vw;
}

#myImg6 {
  width: 13%;
  margin-right: 0vw;
  margin-bottom: 3vw;
  padding-top: 2vw;
}

.image a.activite6 {     
    font-family: lato;
    font-weight: 900;
    font-size: 1vw;
    color: #1a5b69;
    margin-left: -8vw;
    margin-right: 9vw;
}

#myImg7 {
  width: 35%;
  margin-right: 0vw;
  margin-bottom: 3vw;
  padding-top: 2vw;


}

.image a.activite7 {     
    font-family: lato;
    font-weight: 900;
    font-size: 1vw;
    color: #1a5b69;
    margin-left: -19vw;

}

.activite7bis {     
    font-family: lato;
    font-weight: 300;
    font-size: 1vw;
    color: #1a5b69;
    text-align: center;
    padding-top: 1vw;
    width: 25vw;
    margin-left: 38vw;
}


  /* Style the Image Used to Trigger the Modal */
#myImg1, #myImg2, #myImg3, #myImg4, #myImg5, #myImg6, #myImg7{

  margin-top: 2vw;
  cursor: pointer;
  transition: 0.3s;
}

/* The Modal (background) */
.modal1 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  margin-top: 7vw;
  margin-left: 15vw;
  z-index: 1; /* Sit on top */
  padding-top: 4vw; /* Location of the box */
  left: 0;
  top: 0;
  width: 70vw; /* Full width */
  height: 35vw; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: white; /* Fallback color */
  border-radius: 2vw;
}

.modal2 {
   display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  margin-top: 7vw;
  margin-left: 15vw;
  z-index: 1; /* Sit on top */
  padding-top: 4vw; /* Location of the box */
  left: 0;
  top: 0;
  width: 70vw; /* Full width */
  height: 37vw; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: white; /* Fallback color */
  border-radius: 2vw;
}

.modal3 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  margin-top: 7vw;
  margin-left: 15vw;
  z-index: 1; /* Sit on top */
  padding-top: 4vw; /* Location of the box */
  left: 0;
  top: 0;
  width: 70vw; /* Full width */
  height: 35vw; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: white; /* Fallback color */
  border-radius: 2vw;
}

.modal4 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  margin-top: 7vw;
  margin-left: 15vw;
  z-index: 1; /* Sit on top */
  padding-top: 4vw; /* Location of the box */
  left: 0;
  top: 0;
  width: 70vw; /* Full width */
  height: 35vw; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: white; /* Fallback color */
  border-radius: 2vw;
}

.modal5 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  margin-top: 7vw;
  margin-left: 15vw;
  z-index: 1; /* Sit on top */
  padding-top: 4vw; /* Location of the box */
  left: 0;
  top: 0;
  width: 70vw; /* Full width */
  height: 35vw; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: white; /* Fallback color */
  border-radius: 2vw;
}

.modal6 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  margin-top: 7vw;
  margin-left: 15vw;
  z-index: 1; /* Sit on top */
  padding-top: 3vw; /* Location of the box */
  left: 0;
  top: 0;
  width: 70vw; /* Full width */
  height: 37vw; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: white; /* Fallback color */
  border-radius: 2vw;
}

.modal7 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  margin-top: 7vw;
  margin-left: 15vw;
  z-index: 1; /* Sit on top */
  padding-top: 4vw; /* Location of the box */
  left: 0;
  top: 0;
  width: 70vw; /* Full width */
  height: 33vw; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: white; /* Fallback color */
  border-radius: 2vw;
}

/* Modal Content (Image) */
.modal-content1 {
 
  column-span: 5vw;
  margin-left: 5vw;
  margin-right: auto;
  display: block;
  margin-bottom: 0vw;

}

.modal-content2 {
  display: row;
  justify-content: space-between;
  column-span: 5vw;
  margin-left: 7vw;
  margin-right: auto;
  display: block;
  width: 25vw;
  /*max-width: 50vw;*/
  margin-bottom: 0vw;
}

.modal-content3 {
  display: row;
  justify-content: space-between;
  column-span: 5vw;
  margin-left: 7vw;
  margin-right: auto;
  display: block;
  width: 25vw;
  /*max-width: 50vw;*/
  margin-bottom: 0vw;
}

.modal-content4 {
  display: row;
  justify-content: space-between;
  column-span: 5vw;
  margin-left: 5vw;
  margin-right: auto;
  display: block;
  width: 28vw;
  /*max-width: 50vw;*/
  margin-bottom: 0vw;
}

.modal-content5 {
  display: row;
  justify-content: space-between;
  column-span: 5vw;
  margin-left: 8vw;
  margin-right: auto;
  display: block;
  width: 23vw;
  /*max-width: 50vw;*/
  margin-bottom: 0vw;
}

.modal-content6 {
  display: row;
  justify-content: space-between;
  column-span: 5vw;
  margin-left: 8vw;
  margin-right: auto;
  display: block;
  width: 23vw;
  /*max-width: 50vw;*/
  margin-bottom: 0vw;
}

.modal-content7 {
  display: row;
  justify-content: space-between;
  column-span: 5vw;
  margin-left: 5vw;
  margin-right: auto;
  display: block;
  width: 25vw;
  /*max-width: 50vw;*/
  margin-bottom: 0vw;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#title1, #title6 {
  margin-left: 23vw;
  margin-right: auto;
  margin-top: -26vw;
  display: block;
  width: 80%;
  max-width: 700px;
  font-family: lato;
  font-weight: 900;
  font-size: 1.5vw;
  color: #1a5b69;
  text-align: center;
  padding-bottom: 0.5vw;
}

#title2 {
  margin-left: 23vw;
  margin-right: auto;
  margin-top: -28vw;
  display: block;
  width: 80%;
  max-width: 700px;
  font-family: lato;
  font-weight: 900;
  font-size: 1.5vw;
  color: #1a5b69;
  text-align: center;
  padding-bottom: 0.5vw;
}

#title3 {
  margin-left: 24vw;
  margin-right: auto;
  margin-top: -24vw;
  display: block;
  width: 80%;
  max-width: 700px;
  font-family: lato;
  font-weight: 900;
  font-size: 1.5vw;
  color: #1a5b69;
  text-align: center;
  padding-bottom: 0.5vw;
}

#title4 {
  margin-left: 26vw;
  margin-right: auto;
  margin-top: -20vw;
  display: block;
  width: 80%;
  max-width: 700px;
  font-family: lato;
  font-weight: 900;
  font-size: 1.5vw;
  color: #1a5b69;
  text-align: center;
  padding-bottom: 0.5vw;
}

#title7 {
  margin-left: 28vw;
  margin-right: auto;
  margin-top: -22vw;
  display: block;
  width: 80%;
  max-width: 700px;
  font-family: lato;
  font-weight: 900;
  font-size: 1.5vw;
  color: #1a5b69;
  text-align: center;
  padding-bottom: 0.5vw;
}

#title5 {
  margin-left: 25vw;
  margin-right: auto;
  margin-top: -27vw;
  display: block;
  width: 80%;
  max-width: 700px;
  font-family: lato;
  font-weight: 900;
  font-size: 1.5vw;
  color: #1a5b69;
  text-align: center;
  padding-bottom: 0.5vw;
}

#title6 {
  margin-left: 25vw;
  margin-right: auto;
  margin-top: -28vw;
  display: block;
  width: 80%;
  max-width: 700px;
  font-family: lato;
  font-weight: 900;
  font-size: 1.5vw;
  color: #1a5b69;
  text-align: center;
  padding-bottom: 0.5vw;
}


#caption1, #caption2, #caption3, #caption4, #caption5, #caption6, 
#caption7{
  margin-left: 40vw;
  margin-top: 0vw;
  margin-right: auto;
  display: block;
  width: 25vw;
  max-width: 700px;
  font-family: quicksand;
  font-size: 1vw;
  color: #1a5b69;
  text-align: left;
  text-justify: center;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content1, #title1, #caption1, .modal-content2, #title2, #caption2, 
.modal-content3, #title3, #caption3, .modal-content4, #title4, #caption4, 
.modal-content5, #title5, #caption5, .modal-content6, .modal-content6bis, #title6, #caption6,
.modal-content7, #title7, #caption7{
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close1, .close2, .close3, .close4, .close5, .close6, .close7{
  position: absolute;
  top: 1vw;
  right: 2vw;
  color: #1a5b69;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close1:hover,
.close1:focus {
  color: #F7804B;
  text-decoration: none;
  cursor: pointer;
}

.close2:hover,
.close2:focus {
  color: #F7804B;
  text-decoration: none;
  cursor: pointer;
}

.close3:hover,
.close3:focus {
  color: #F7804B;
  text-decoration: none;
  cursor: pointer;
}

.close4:hover,
.close4:focus {
  color: #F7804B;
  text-decoration: none;
  cursor: pointer;
}

.close5:hover,
.close5:focus {
  color: #F7804B;
  text-decoration: none;
  cursor: pointer;
}

.close6:hover,
.close6:focus {
  color: #F7804B;
  text-decoration: none;
  cursor: pointer;
}

.close7:hover,
.close7:focus {
  color: #F7804B;
  text-decoration: none;
  cursor: pointer;
}

.Bouton2 {
  cursor: pointer;
  position: absolute;
  font-family: lato;
  font-weight: 900;
  font-size: 1vw;
  margin-top: 3vw;
  margin-left: 40vw;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vw;
  padding-bottom: 0.5vw;
  color: white;
  transition: 0.6s ease;
  border-radius: 5px 5px 5px 5px;
  user-select: none;
  text-decoration: none;
  background-color: #68A5AD;
}

.Bouton2:hover{
  color: white;
  background-color: #73D5E5;
  transition: all 0.2s ;
}


.fil3{ 
    display: flex;              /* Transformation en flexbox */
    justify-content: right;
    width: 100%; 
    margin-top: 0vw; 
    margin-bottom:-2vw;
    margin-top: -20vw;
    position:relative;
    z-index: -10;

}


/* PROXIMITÉ */

.Proximite{
    background-color: #D4F5F5;
    border-radius: 20px;
    width: 75vw;
    margin-left: 12.5vw;
    margin-top: 6vw;
    padding-top: 2vw;
    padding-bottom: 4vw;
    margin-bottom: 3vw;
    
}

.picto_local{
    margin-left: 1vw;
}

.TitreProximite{
    font-family: lato;
    font-weight: 900;
    font-size: 2vw;
    color: #1a5b69;
    margin-bottom: 1vw;
    margin-top: -3vw;
    line-height: 1.5vw;
    text-align: center;
}

.texteproximite{
    font-family: quicksand;
    font-size: 1.2vw;
    color: #1a5b69;
    margin-left: 6vw;
    margin-top: 4vw;
    width: 30vw;
    line-height: 1.8vw;
    text-align: justify;
}

.boxproximite{
    background-color: white;
    border-radius: 4px;
    box-shadow: 8px 8px #73D5E5;
    width: 30vw;
    margin-top: 2vw;
    margin-left: 6vw;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 1vw;
    padding-bottom: 2vw;
    margin-bottom: -5vw;
    /*text-align: center;*/
    justify-content: center;
}

.boxproximite h1 {
    font-family: quicksand;
    font-size: 0.9vw;
    color: #1a5b69;
    line-height: 1.8vw;
    text-align: justify;
}

.boxproximite a {
    font-family: quicksand;
    font-size: 0.9vw;
    color: #1a5b69;
    line-height: 1.8vw;
    /*text-align: justify;*/
    columns: 3;
}

.carte{
    margin-top: -29vw;
    margin-left: 39vw;
    width: 34vw;
}

.fil4{ 
    display: flex;              /* Transformation en flexbox */
    justify-content: left;
    width: 100%; 
    margin-top: -20vw; 
    margin-bottom:-2vw;
}


/* SÉRÉNITÉS */

.TitreSerenite{
    font-family: lato;
    font-weight: 900;
    font-size: 2vw;
    color: #1a5b69;
    margin-top: 2.5vw;
    line-height: 1.5vw;
    text-align: center;
}

.texteSerenite{
    font-family: quicksand;
    font-size: 1.2vw;
    color: #1a5b69;
    margin-left: 22vw;
    margin-top: 2vw;
    width: 60vw;
    line-height: 1.8vw;
    text-align: justify;
}

.boxserenite{
    margin-left: 20vw;
    margin-bottom: 18vw;
}


.boxesserenite{
    width: 60vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr [col-start]); 
    grid-template-rows: repeat(2, [col-start]);
    grid-row-gap: 4vw;
    grid-column-gap: 4vw;
}

.boxesserenite li{
    background-color: white;
    border-radius: 4px;
    box-shadow: 8px 8px #2AB5C0;
    list-style-type: none ;
    display:block;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    text-align: center;
    justify-content: center;
}

/*.boxesserenite li:hover{
    background-color: #2AB5C0;
    border-radius: 4px;
    box-shadow: 8px 8px white;
    list-style-type: none ;
    display:block;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    text-align: center;
    justify-content: center;
}

/*.boxesserenite li:hover{
    background-color: #2AB5C0;
    border-radius: 4px;
    box-shadow: 8px 8px white;
    list-style-type: none ;
    display:block;
    color: white;
}*/

.boxesserenite h1.actif {     
    font-family: lato;
    font-weight: 900;
    font-size: 1vw;
    color: #1a5b69;
}


.boxesserenite a {
    font-family: quicksand;
    font-size: 0.9vw;
    color: #1a5b69;
    display: block;
    text-align: left;

}

.fil5{ 
    display: flex;              /* Transformation en flexbox */
    justify-content: right;
    width: 100%; 
    margin-top: -19vw; 
    margin-bottom:-2vw;
}


/* CONTACT */

.Contact{
    background-color: #D4F5F5;
    border-radius: 20px;
    width: 75vw;
    margin-left: 12.5vw;
    margin-top: -13vw;
    padding-top: 2vw;
    padding-left: 3vw;
    padding-bottom: 2vw;
    margin-bottom: 2vw;
    
}

.contact_boxe{
    width: 60vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr [col-start]); 
    grid-template-rows: repeat(1, [col-start]);
    grid-column-gap: 0vw;
}

.contact_boxe li{
    list-style-type: none ;
    display:block;
    text-align: center;
    justify-content: center;
}

.TitreContact{
    font-family: lato;
    font-weight: 900;
    font-size: 2vw;
    color: #1a5b69;
    margin-bottom: 1.5vw;
    margin-left: 3vw;
    line-height: 1.5vw;
    text-align: left;
}

.TelContact{
    font-family: quicksand;
    font-size: 1.2vw;
    color: #1a5b69;
    margin-bottom: 1.5vw;
    margin-left: 3vw;
    line-height: 1.5vw;
    text-align: left;
}

#send-message {
    font-family: quicksand;
    font-size: 1.2vw;
    color: #1a5b69;
    margin-left: 3vw;
    line-height: 1.5vw;
    text-align: left;
}

img.carte_contact{
  width:29vw;
  margin-left:-4vw;
  margin-top: 5vw;
}

form div {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 2vw;
    margin-top: 1vw;
    margin-left: 3vw;
    }

form div > input, form div > textarea {
    background: white;
    border: none;
    border-radius: 10px;
    font-size: 1vw;
    font-family: quicksand;
    color: #1A5B69;
    }

form div > input, form div > select {
    height: 3vw;
    padding-left: 1vw;
    }


form div > textarea {
    height: 13vw;
    padding: 15px 0vw 0vw 1vw;
    }

form div > input::placeholder, form div > textarea::placeholder {
    color: #779EA6;
    }

form div:last-child {
    align-items:left;
    margin-top: 2vw;
    }

form button {
    cursor: pointer;
    position: absolute;
    font-family: lato;
    font-weight: 900;
    font-size: 1vw;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    color: white;
    transition: 0.6s ease;
    border-radius: 5px 5px 5px 5px;
    border: none;
    user-select: none;
    background-color: #68A5AD;
    }

form button:hover{
    color: white;
    background-color: #73D5E5;
    transition: all 0.2s ;
    }


/* MODAL POLIT */

.notes_bar {
    
    padding-right:0vw;                  /* Suppression des marges internes */
    margin-top:-0.6vw;
    margin-bottom:0vw;
    margin-left: 0vw;
    
}

.notes { 
    display: flex;              /* Transformation en flexbox */
    justify-content: center; 
    margin-top: 2vw; 
    margin-bottom:0vw;
}

.notes li {
    list-style-type: none ;       /* Suppression des puces */
}

.notes a {
    font-family: quicksand;
    font-size: 0.9vw;
    display:block;                /* Transformation en block */
    min-width: 100px;             /* Largeur minimale des liens */   
    margin-top: 1vw;           /* Marges externes */
    margin-bottom: 1vw;  
    text-align: center;           /* Centrage du texte */   
    color: white;                  /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    transition: all 0.3s ;          /* Ajout des effets de transition */
}

.notes a.polit:hover {
  color: #1A5B69;
}

.notes a.yuuhi:hover {
  color: #1A5B69;
}

.notes a.polit.actif {     
    color: #1A5B69;
}

.notes a.yuuhi.actif {     
    color: #1A5B69;
}

.notes a.polit:hover.actif{
  color: #fff;
}

.notes a.yuuhi:hover.actif{
  color: #fff;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  margin-top: 25vw;
  margin-left: 15vw;
  z-index: 1; /* Sit on top */
  padding-top: 2vw; /* Location of the box */
  left: 0;
  top: 0;
  width: 70vw; /* Full width */
  height: 23vw; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #D4F5F5; /* Fallback color */
  border-radius: 2vw;
  box-shadow: 0px 0px 15px 0px #0048a8;
}

/* Modal Content (Image) */
.modal-content {
  margin-left: 1vw;
  margin-right: auto;
  margin-bottom: 0vw;

}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
.title {
  margin-right: auto;
  font-family: lato;
  font-weight: 900;
  font-size: 1.5vw;
  color: #1a5b69;
  padding-bottom: 2vw;
  display:block;
  text-align: center;
}

#caption {
    column-count: 2;
    column-width: 20vw;
    column-gap: 2vw;
    margin-left: 2vw;
    margin-top: 0vw;
    width: 20vw;
    font-family: quicksand;
    font-size: 0.7vw;
    color: #1a5b69;
    height: 15vw;
}

/* Add Animation - Zoom in the Modal */
.modal-content {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 1vw;
  right: 2vw;
  color: #1a5b69;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #F7804B;
  text-decoration: none;
  cursor: pointer;

}