* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: clamp(15px,2vw,35px);
    color: blue;
 
   
}
body{
    background-image: url("https://test.bamsimracing.fr/photos/DTM.jpg");
    background-size: cover;
    background-position: center;
    
    
}

 .CanevasBase {
    display: grid;
    grid-template-columns: 10vw 10vw 1fr 10vw 10vw;
    grid-template-rows: 20vh 80vh;
    grid-template-areas:
      "logo dse titre login burger"
      "cont cont cont cont cont";
      background-color: rgba(246, 247, 246, 0.767);
  }

  

  .Logo {
    grid-area: logo;
    width: 100%;
    border: none;
    background-color: none;
    align-self: center;
    justify-content: center;
    /* max-width: 100%; */
    /* height: auto; */
  }
  .Login {
    grid-area: login;
    width: 100%; 
    border: none;
    background-color: none;
    align-self: center;
    justify-content: center;
    /* max-width: 100%; */
    /* height: auto; */ 
  }

  .Dse {
    grid-area: dse;
    width: 100%;
    border: none;
    background-color: none;
    align-self: center;
    justify-content: center;
    /* max-width: 100%; */
    /* height: auto; */
  }
  .Burger {
    grid-area: burger;
    width: 100%;
    border: none;
    background-color: none;
    align-self: center;
    justify-content: center;
  
  }
  
  
.Titre {
    grid-area: titre;
    border: solid 10px;
    border-color:rgba(218, 165, 32, 0.734); ;
    border-radius: 50px;
    background-color: rgba(218, 165, 32, 0.192);
    align-self: center;
    justify-content: center;
    text-align: center;
    font-family: fantasy;
    font-size: clamp(15px,2vw,45px);
    font-style: oblique;
    color: blue;
    
}
  
#visibiliterCont{
  opacity: 1;
  transition:opacity 0.5s;
  height: 20vh;

}
.Cont {
  grid-area: cont;
  height: 80vh;
  padding: 0 2;
  overflow:auto;
}


#visibiliterMenu{
  opacity: 0;
  transition:opacity 0.5s;
  height: 20vh;
}



.UlMenu{
  list-style: none;
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments <li> de passer à la ligne */
  justify-content: space-around;
  overflow: auto;
}


  .UlMenu li{
    background-color: rgba(127, 255, 212, 0);
    display: flex;
    justify-content: center;
    align-content: space-between;
    height: 15vw;
    width: 15vw;
    
  }




@media screen and (max-width: 750px) {
  .UlMenu li{
    background-color: rgba(127, 255, 212, 0);
    display: flex;
    justify-content: center;
    align-content: space-between;
    height: 40vw;
    width: 40vw;
    }

}


#cercle {
  z-index: -1;
  width: 50px;
  height: 50px;
  border-radius: 50%;
 
  background-color: rgb(25, 0, 255);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-color: red; 
  border-width: 10px; 
  border-style: solid; 
}


  #but1 {
    transition:opacity 0.5s;
  } 

  /* gestion de l'image premiere page */
 
  #imageContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    position:absolute;
    top: 0;
  }
  
  #centeredImage {
    max-width: 100%;
    max-height: 100%;
  }
   
/* gestion du texte */


/* affichage de la pub au chargement du DOM */
#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#modal-content {
  width: 50%;
  padding-bottom: 1%;
  background-color: #ffffff00;
}

#modal-content img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

/* gestion du texte affiché dans la page */



.conteneur-texte{
  list-style: none;
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments <li> de passer à la ligne */
  justify-content: space-around;
  overflow: auto;
  height: 20vw;
}

@media screen and (max-width: 750px) {
  .conteneur-texte{
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments <li> de passer à la ligne */
    justify-content: space-around;
    overflow: auto;
    height: 40vw;
  }
}
.conteneur-texte li{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-content: space-between;
   height: 10vw;
  /* width: 15vw; */ 
}
.titre-Important
{
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 10px;
  border-color:rgba(110, 32, 218, 0.194); ;
  border-radius: 50px;
  background-color: rgba(218, 165, 32, 0.106);
  align-self: center;
  justify-content: center;
  text-align: center;
  font-family:cursive;
  font-size: clamp(25px,2vw,45px);
  font-style:normal;
  font-weight: bold;
  color: rgb(0, 0, 255);
  height: 3vw;
  width: 50vw;
	
}
@media screen and (max-width: 750px) {
  .titre-Important
  { display: flex;
    align-items: center;
    justify-content: center;
    border: solid 10px;
    border-color:rgba(110, 32, 218, 0); ;
    border-radius: 50px;
    background-color: rgba(218, 165, 32, 0);
    align-self: center;
    justify-content: center;
    text-align: center;
    font-family:cursive;
    font-size: clamp(25px,2vw,45px);
    font-style:normal;
    font-weight: bold;
    color: rgb(0, 0, 255);
    height: 3vw;
    width: 50vw;
  }
}


.conteneur-liste-H 
{
  display: flex;
  flex-direction:column;                
  align-items: center;
  justify-content: center;
  border: solid 10px;
  border-color:rgba(110, 32, 218, 0.06); ;
  border-radius: 50px;
  background-color: rgba(218, 165, 32, 0.106);
  align-self: center;
  justify-content: center;
  text-align: center;
  font-family:monospace;
  font-size: clamp(25px,3vw,50px);
  font-style:normal;
  font-weight: bold;
  
 height: 10vw;
  width: 30vw;
	
  
	
}
#conteneur-liste-H li {
	list-style: none;
	/* border: 1px solid #00000096; */
	padding: 5px;

}

.texte-body
{
  padding: 2em;

}

/* Conteneur pour associationestion  */
.conteneur-texte-asso{
  list-style: none;
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments <li> de passer à la ligne */
  justify-content: space-around;
  /* overflow: auto; */
  height: 30vw;
}

@media screen and (max-width: 750px) {
  .conteneur-texte-asso{
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments <li> de passer à la ligne */
    justify-content: space-around;
    /* overflow: auto; */
    height: 100px;
  }
}
/*   */
.titre-important-asso
{
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 10px;
  border-color:rgba(110, 32, 218, 0.194); ;
  border-radius: 50px;
  background-color: rgba(218, 165, 32, 0);
  align-self: center;
  justify-content: center;
  text-align: center;
  font-family:cursive;
  font-size: clamp(25px,2vw,45px);
  font-style:normal;
  font-weight: bold;
  color: rgb(0, 0, 255);
  height: 10vw;
  width: 25vw;
	
}
@media screen and (max-width: 780px) {
  .titre-important-asso
  { display: flex;
    align-items: center;
    justify-content: center;
    border: solid 10px;
    border-color:rgba(110, 32, 218, 0); ;
    border-radius: 50px;
    background-color: rgba(218, 165, 32, 0);
    align-self: center;
    justify-content: center;
    text-align: center;
    font-family:cursive;
    font-size: 20px;
    font-style:normal;
    font-weight: bold;
    color: rgb(0, 0, 255);
     height: 200px; 
    width: 100vw; 
  }
}
.conteneur-liste-asso
{
  display: flex;
  flex-direction:column;                
  align-items: center;
  justify-content: center;
  border: solid 10px;
  border-color:rgba(110, 32, 218, 0); ;
  border-radius: 50px;
  background-color: rgba(218, 110, 32, 0.092);
  align-self: center;
  justify-content: center;
  text-align: center;
  font-family:monospace;
  font-size: clamp(10px,1vm,50px);
  font-style:normal;
  height: 30vw;
  width: 80%;}
@media screen and (max-width: 650px) {
  .conteneur-liste-asso
  {
    display: flex;
    flex-direction:column;                
    align-items: center;
    justify-content: center;
    border: solid 10px;
    border-color:rgba(110, 32, 218, 0); ;
    border-radius: 50px;
    background-color: rgba(218, 110, 32, 0.092);
    align-self: center;
    justify-content: center;
    text-align: center;
    font-family:monospace;
    font-size: clamp(10px,1vm,50px);
    font-style:normal;
    height: 300px;
    width: 100%;}
}
.conteneur-liste-asso li {
	list-style:circle;
	/* border: 1px solid #00000096; */
	padding: 5px;

}

.Ctitre {
  grid-area: Ctitre;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: solid ;
    border-color:rgba(97, 32, 218, 0.048); ;
    border-radius: 50px;
    background-color: rgba(218, 165, 32, 0);
    align-self: center;
    justify-content: center;
    text-align: center;
    font-family: 'Courgette', cursive;
    font-size: clamp(15px,4.5vw,45px);
    font-style: oblique;
    color: blue;
    padding: auto;
  /* background-color: rgba(247, 246, 246, 0.822); */
}
.text-rouge {
color: rgba(247, 5, 5, 0.985);
font-weight: bold;
}

.text-vert
{	color: rgb(0, 95, 28);
font-weight: bold;
}

.text-violet
{	color: rgb(191, 7, 252);
font-weight: bold;
}
.texte-body
{
padding: 2em;

}

.photo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.photo img {
  width: 40%;
  height: auto;
}

.texte-remarque
{
  
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border: solid ;
  border-color:rgba(97, 32, 218, 0.048); ;
  border-radius: 50px;
  background-color: rgba(249, 249, 247, 0.672);
  align-self: center;
  justify-content: center;
  text-align: center;
  font-family: 'Courgette', cursive;
  font-size: clamp(10px,2vw,45px);
  font-style: oblique;
  color: blue;
  padding: auto;
  font-weight: bold;
  font-family: 'Josefin Sans', sans-serif;

}

.corpsBas
{
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  border: solid 20px ;
  border-color:rgba(243, 244, 240, 0.69); ;
  border-radius: 50px;
  background-color: rgba(218, 165, 32, 0);
  align-self: center;
  justify-content: center;
  text-align:justify;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(10px,2.5vw,45px);
  font-style: oblique;
  color: blue;
  padding: 20px;
/* background-color: rgba(247, 246, 246, 0.822); */
	
}