* {
    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://bamsimracing.fr/photos/drapeau-eu.jpg");
    background-size: cover;
    background-position: center;
     
    
}

 .CanevasBase {
    display: grid;
    grid-template-columns: 10vw 1fr 10vw;
    grid-template-rows: 20vh 80vh;
    grid-template-areas:
      "logo titre burger"
      "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; */
  }

  .photo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .photo img {
    width: 60%;
    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;
    
}

.Titre2 {
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    width: 50%; /* 30% de la largeur de l'élément parent */
    padding-top: 10px;
    padding-bottom: 15px;
    margin-left: 0; /* Pour aligner la boîte à gauche */
    margin-right: auto; /* Pour aligner la boîte à gauche */
    border: solid 3px;
    border-color: rgba(218, 32, 159, 0.724);
    border-radius: 50px;
    background-color: rgba(218, 165, 32, 0);
    text-align: center;
    font-family: fantasy;
    font-size: clamp(10px, 2.5vw, 45px);
    font-style: oblique;
    color: blue;
  }
  
  
#visibiliterCont{
  opacity: 0;
  transition:opacity 0.5s;
  height: 20vh;

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


#visibiliterMenu{
  opacity: 1;
  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;
  height: 80vh;
}


  .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: 32vw;
    width: 32vw;
    }

}


#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;
  } 


  /* Mise en forme du formulaire */
  .ConteneurForms
{	   display: flex;
        flex-direction: column;
        list-style-type: none;
        padding:30px;
        border-radius: 15%;
        border:10px solid #ec038f1b;
         background-color: #daf3ce78;
        overflow: auto;
  
  }
  
  
  .champs *
  {
          font-family :Verdana ;
          font-size : 1em;
          
  }
  
  .champs
  {	display : flex;
      justify-content : flex-end;
      padding: 10px;
  }
  .champs > label 
  { flex: 1;
  }
  .champs > input
  { flex : 2;	
      border:2px solid #ec0303;
      border-radius: 10px; 
  }.champs > select
  { flex : 2;	
      border:2px solid #ec0303;
      border-radius: 10px; 
  }
  .champs > *
  { padding : 5px;
      
  }
  #envoyer, #annuler
  { 	flex : 0 0 100px;
      background-color : #fafcc6;
      color : #aef4b9;
      border : 10px solid #a20303;
      border-radius: 3px;
      margin-left: 10px;
  }
  .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); */
  }

  .Ctitre2 {
    grid-area: Ctitre;
      width: 75%;
      margin-left: auto;
      margin-right: auto;
      border: solid ;
      border-color:rgba(97, 32, 218, 0.048); ;
      border-radius: 50px;
      background-color: rgba(249, 232, 189, 0.408);
      align-self: center;
      justify-content: center;
      text-align: center;
      font-family: 'Courgette', cursive;
      font-size: clamp(10px,2.8vw,45px);
      font-style: oblique;
      color: rgb(187, 0, 255);
      padding: auto;
  }
.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;

}