body{
   margin: 0;
   padding: 0;
   height: 100%;
   min-height: 100vh;
   background-color: #9370D8; /* Placez une couleur de fond si la page ne charge pas le dégradé */
  
 
}

.container{
    min-width: 100vh;
    /*background: url('fond-ecran.png');*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: grid;
    grid-template-columns: repeat(12,1fr);
    /*grid-template-rows: repeat(1, auto);*/
  
}
section {
  
   grid-column:3 / 11;
  /*height: 100vh;*/
 /* display: grid;*/
  place-items: center;
  position: relative;
  background-color: white;
  width:100%;
}
section::before {
  background-image: url("fond-ecran.png");
  background-size: cover;
  content: "";
  position: fixed;
  inset: 0;
  background-attachment: fixed;
  background-color: #9370D8;
  opacity: 0.6;
  max-width: 100%;
}


/* debut grid */
.grid {
    /*display:grid;*/
   
    grid-template-columns: repeat(12, 1 fr);
    grid-template-rows: repeat(1, auto);
    font-size: 1.25em;
    background-color: transparent;
    border: 2px solid rgba( 255, 255, 255, 0.2);
    backdrop-filter: blur(80px);
}
/*fin grid*/

.logo{
    grid-column:3 / 4;
    width: 60%;
    max-width : 60%;
    height: auto;
    align-items: center;
    justify-items: center;
    text-align: center;
    isolation: isolate;
}


.accueil{
  display: grid;
  
}
 
/*texte*/
.about1, .about2, .about3{
  grid-column:1 / 12;
  margin-left: 5%;
  margin-right: 5%;
  align-items: center;
  justify-items: center;
  text-align: center;
    
}

.about2{
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  color: #54595F;
 
}


/*fin text 1° partie*/
/*images*/
.about3 img,.lund1 img, .mard1 img{
  margin-top: 5%; 
  height: auto;
  max-width : 300%;
  border-radius: 50px;
  max-height: 100%;
  align-items: center;
  justify-items: center;
  text-align: center;
  border-radius: 50px;
  object-fit: cover;
}




      /*fin images*/
 .lund1,  .lund2, .mard2{
   align-items: center;
   justify-items: center;
   text-align: center;
   color: #54595F;
   font-family: "inter", sans-serif;
   font-style: normal;
   font-size: 1em;
   font-weight: 200;
      }

.mard1{
    grid-column:2 / 4;
    margin-top: 10%;
    margin-left: 10%;
    margin-right: 10%;
   
}
/* ------------------------------------------titres----------------------------------------*/
.titre1, .titre2, .titre3, .titre4{
    margin-top: 10%;
    margin-left: 10%;
    margin-right: 10%;
    align-items: center;
    justify-items: center;
    text-align: center;
    background-color: white ;
    border-radius: 50px;
    color: #004E6F;
    font-family: "inter", sans-serif;
    font-style: normal;
    font-size: 1em;
    font-weight: 200;
     }


    

.titre3{
   grid-column:2 / 11;
   
}
.titre4{
   grid-column:2 / 11;
   
}
/*fin titres*/
/*sous-titres*/
.sous-titre1, .sous-titre2, .sous-titre3, .sous-titre4{
   
    margin-top: 10%;
    margin-left: 10%;
    background-color: skyblue; /* Placez une couleur de fond si la page ne charge pas le dégradé */
    border-radius: 50px;
 }
 
 .sous-titre3a
     {
      grid-column:3 / 10;
      margin-top: 1%;
    margin-left: 10%;
        margin-right: 10%;
      align-items: center;
      justify-items: center;
      text-align: center;
      color: #54595F;
      font-family: "inter", sans-serif;
      font-style: normal;
      font-size: 1em;
      font-weight: 200;
      
      background-color: skyblue; /* Placez une couleur de fond si la page ne charge pas le dégradé */
      border-radius: 50px;
      
   
}

     /*fin sous-titres*/
     /*box*/
.box3{
  grid-column:1 / 11;
}
     /*fin box*/
/*----------------------------debut logo et social----------------------------------------*/   
   /* fenetre-interieur */
.fenetre-interieur{
  
    grid-column:3 / 10;
    align-items: center;
    justify-items: center;
    text-align: center;
    object-fit: cover;
    background-size: 850px;
}
.logo-fd img{
     
    grid-column:1 / 5;
}
/*reseau social*/
.res1, .res2{
  grid-column: 3 / 9;
  margin-left: 10%;
  margin-right: 10%;
  align-items: center;
  justify-items: center;
  text-align: center;
  
  border-radius: 50px;
  color: #004E6F;
  font-family: "inter", sans-serif;
  font-style: normal;
  font-size: 1em;
  font-weight: 200;

}
/*.res1{
    background-color: white;
}
*/
.res2 img{
  margin-top: 2%;
  width: 50px;
  height: 50px;
}
/* fin reseau social*/
/* fin fenetre-interieur*/  
/*----------------------------fin logo et social-------------------------------------------*/     
/*----------------------------debut a propos (about)---------------------------------------*/
.about1{
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
}
.about3{
  grid-column:1 / 12;
  color: #54595F;
  font-family: "inter", sans-serif;
  font-style: normal;
  font-weight: 200;
}
.about3 img{
   grid-column:2 / 11;
   width: 60%;
     }

/*---------------------------fin a propos(about)---------------------------------------------*/     
/*---------------------------debut cours lundi----------------------------------------------*/
.titre1{
   grid-column:2 / 11;
   
}   
.sous-titre1{
   grid-column:2 / 4;
 }
 .box1{
  grid-column: 2/4;
}
.lund1{
    grid-column:2 / 4;
    margin-top: 10%;
    margin-left: 10%;
    margin-right: 10%;
 }
.lund1 img{
    width: 100%;
      }
        
.box2{
   grid-column:8 / 10;
}
    .lund2{
    grid-column:8 / 11;
    margin-top: 10%;
    margin-left: 10%;
    margin-right: 10%;
    }
     .lund3{
      grid-column:2 / 11;
     
    }
    .lund3 img{
      margin-top: 10%;
      width: 225px;
      height: auto;
      max-width : 300%;
      border-radius: 50px;
      max-height: 100%;
      align-items: center;
      justify-items: center;
      text-align: center;
  border-radius: 50px;
      object-fit: cover;
    }

/*--------------------------fin cours lundi--------------------------------------------------*/     
/*--------------------------debut cours mardi------------------------------------------------*/
.titre2{
   grid-column:2 / 11;
}
.sous-titre3a
     {
      grid-column:3 / 10;
      margin-top: 1%;
      margin-left: 10%;
      margin-right: 10%;
      align-items: center;
      justify-items: center;
      text-align: center;
      color: #54595F;
      font-family: "inter", sans-serif;
      font-style: normal;
      font-size: 1em;
      font-weight: 200;
      
      background-color: skyblue; /* Placez une couleur de fond si la page ne charge pas le dégradé */
      border-radius: 50px;
   
}
.mard1 img{
    width: 150px;
      }
.mard2
     {
      grid-column:8 / 11;
      margin-top: 25%;
      margin-left: 10%;
      margin-right: 10%;
      
     }
/*-------------------------fin cours mardi---------------------------------------------------*/
/*------------------------debut cours mercredi-----------------------------------------------*/              
.sous-titre3{
      grid-column:2 / 11;
      margin-top: 1%;
      margin-left: 10%;
      margin-right: 10%;
    }
.mercr1{
      grid-column:2 / 4;
      margin-top: 25%;
      margin-left: 10%;
      margin-right: 10%;
      text-align: center;
      color: #54595F;
      font-family: "inter", sans-serif;
      font-style: normal;
      font-size: 1em;
      font-weight: 200;
       
   
}
.mercrvid{
      grid-column:8 / 11;
      margin-top: 10%;
      margin-left: 10%;
      margin-right: 10%;
      
      
}
.mercrvid video{
       width: 300px;
       max-width : 100%;
       height: auto;
       max-height: 100%;
       text-align: center;
       object-fit: cover;
       border-radius: 50px;
              }

/* -----------------------fin cours mercredi-------------------------------------------------*/
/*------------------------cours 4 (vendredi)--------------------------------------------------*/
         .sous-titre4{
      grid-column:2 / 11;
      margin-top: 1%;
      margin-left: 10%;
      margin-right: 10%;
      
     }
.vend1, .vend2{
      margin-left: 10%;
      margin-right: 10%;
      text-align: center;
      color: #54595F;
      font-family: "inter", sans-serif;
      font-style: normal;
      font-size: 1em;
      font-weight: 200;
     }
.vend2
     {
      grid-column:8 / 11;
      margin-top: 25%;
      
     }
    
.vend1{
      grid-column:2 / 4;
      margin-top: 10%;
         
}


.vend1 img{
     width: 150px;
     height: auto;
     max-width : 300%;
     border-radius: 50px;
     max-height: 100%;
     object-fit: cover; 
     text-align: center;
     }
/*-----------------------------------------fin cours 4 du vendredi---------------------------------*/
 
.bas{
 display: grid;
 position: relative;
      grid-template-columns: repeat(12,  1fr);
        align-items: center;
        justify-items: center;
        text-align: center;
        z-index: 100;
         background-color: transparent;
          backdrop-filter: blur(7px);
}
.bas1{
 grid-column:6/8; 
}
.bas1 img{
 width: 100%;
}
.bas2{
 grid-column: 2/6;
  color: #fff;
  font-family: "inter", sans-serif;
  font-style: normal;
  font-size: 1.5em;
  font-weight: 200;
}
/*responsive1*/
@media(max-width: 870px){
    .logo img {
  width: 70%;
    }
    .logo-fd img{
     
  width: 60%;
    
}
.res1{
    grid-column: 2/11;
    font-size: 0.9em;
}
.box1, .box2{
    grid-column: 2/11;
    font-size: 1em;
}

.lund3 img{
    width: 150px;
}
.mard1 img, .vend1 img{
    width: 110px;
}

}
/*fin responsive1*/
/* responsive tablette*/
@media(max-width: 650px){
 .logo-fd img{
     
  width: 40%;
    
}
 .container{
  min-width: inherit;
 }
  section {
  
        grid-column:1 / 13;
        /*height: 100vh;*/
        /* display: grid;*/
        place-items: center;
        position: relative;
        /*background-color: #fff;*/
        width:100%;
  }
  
  /* ----------------------------------------reseau social--------------------------------*/
  .res1{
    grid-column: 3/9;
    font-size: 0.75em;
  }
  .res2 img {
  margin-top: 2%;
  width: 30px;
  height: 30px;
}
/* -------------------------fin reseau social--------------------------------------------*/
/*--------------------------------a propos-----------------------------------------------*/
.grid{
    font-size: 0.85em;
}
/*-------------------------------fin a propos--------------------------------------------*/
/*-----------------------------lundi-----------------------------------------------------*/
.box1, .box2 {
  grid-column: 2/11;
  margin-right: 10%;
  font-size: 1em;
}
.box1{
     grid-row: 7;
}
.box2{
    grid-row: 8;
    
}
.lund1, .lund2{
    font-size: 0.85em;
}
.lund3 img{
    width: 100px;
}
.sous-titre1, .sous-titre2{
    margin-top: 5%;
    color: #54595F;
}
/*----------------------------------fin lundi------------------------------------------*/
/*-----------------------------------debut mardi---------------------------------------*/
.box3 {
    grid-column: 2/11;
    font-size: 0.85em;
}
.mard1, .mard2{
    grid-column: 1/11;
    margin-top: 5%;
}
.mard1 img {
  width: 100px;
}
/*---------------------------------------fin mardi----------------------------------------*/
/*-----------------------------------------debut mercredi----------------------------------*/
.sous-titre3{
    color: #54595F;
}
.mercr1, .mercr2{
    grid-column: 1/11;
    margin-top: 5%;
}
.mercrvid{
    grid-column: 5/10;
}
.mercrvid video{
    width: auto;
}
/*-----------------------------------------fin mercredi-------------------------------------*/
/*------------------------------------------debut vendredi----------------------------------*/
.titre3{
    grid-column: 2/11;
}
.vend1, .vend2{
    grid-column: 1/11;
}
.vend1 img{
    width: 130px;
}
/*------------------------------------------fin vendredi-------------------------------------*/
/*-----------------------------------------bas---------------------------------------------*/
.bas2{
    font-size: 1em;
}
.bas1{
    grid-column: 8/11;
}
/*---------------------------------------------fin bas----------------------------------------*/
}
 

/*fin responsive tablette*/