#bloc {

    display: flex;
    font-size :large;
    padding: 5px;
    }
    
    #texte{
        
        padding: 10px;
        display: flex;
      font-size :large;
        max-width: 40%;
        max-height: 40%;
    }
    
    
    #imagef{
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60%;
        }
    
        #imagefond {
            border: 2px solid black ;
            max-width: 100%;
           height: 70%;
         align-items: center;
           justify-content: center;
            display: flex;
    
        }
    
        
    
    
    
    
    #logo {
        background-color: aliceblue;
          border: 2px solid black;
          text-align: center;
          font-size: 30px;
          border-radius: 10px;
          font-weight:bold;
        /*  color: #efefef;*/
        color: teal;
          text-shadow:1px 3px 8px rgba(0,0,0,0.80);
          padding: 10px;
      }
      
      
      #titre {
      
        font-size: 40px;
      color:white;
      text-shadow:1px 3px 8px rgba(0,0,0,0.80);
         text-align: center;
      display: flex;
      align-items: center;
        justify-content: center;
         
      
      }
      
      
      
      #logo1 {
        border:2px solid black;
        background-image:url(vert.jpg);
         display: flex;
        align-items: center;
          justify-content: center;
          
          
      }
      
      
      #im2 {
       
        padding: 15px;
        width :9%;
        height: 8%;
      }
      
      
      #im1 {
        padding: 3px;
          width: 13%;
          height: 13%;
          
      
      }
      
      #menu{
        border: 2px solid black;
      }
    
      #navi  {
     
      background-image: url("vert.jpg");
      
      height:  5%;
      font-size: 15px;
         text-align: center;
          padding: 1px;
      color: aliceblue;
      }
     
      #navi  li {
      
        height: 40px;
        width:200px;
      /*  background-color: teal;*/
    background: linear-gradient(navy, aquamarine);
       /*- padding : 25px;*/
        border: 3px solid black;
      font-family: 'elmessiri';
        display: inline-flex;
     margin-right:4%;
       font-style:italic;
      font-style: oblique;
        text-transform: uppercase;
    color: aliceblue;
    align-items: center;
    justify-content: center;
     
      }
      
      #navi li a {
        text-decoration: none;
        font-family: 'elmessiri';
        color: aliceblue;
        
      }
      
     /*-----------------------------------------------*/
   
    #clic {
      font-size: 17px;
      z-index: 0;
      color: darkblue;
    position: absolute;
    top: 120%;
    
    animation-name: cligne;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    
    }

    @keyframes cligne {
      0% {opacity: 1;}
    50% {opacity: 1;}
      100% {opacity: 0;}
    }
    
    
   /*  #titrecaroussel{
      z-index: 1;
      position: absolute;
      top: 50%;
    
        font-size: 40px;
       color: darkblue;
        text-shadow:1px 3px 8px white(0,0,0,0.80);
           text-align: center;
       /** display: flex;*/
       
    /*  }*/
    #titrecaroussel {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(1.5rem, 4vw, 2.5rem); /* min, adaptatif, max */
    color: darkblue;
    text-shadow: 1px 3px 8px rgba(0,0,0,0.80);
    text-align: center;
    padding: 0 5%; /* pour éviter que le texte colle aux bords sur mobile */
}

/* Option : réduire encore sur très petits écrans */
@media (max-width: 480px) {
    #titrecaroussel {
        font-size: clamp(1.2rem, 5vw, 1.8rem);
    }
}

    #diapo {
     
    /*  overflow-y: scroll;
  scroll-behavior:auto;*/
        margin:0;
        padding: 0;
        box-sizing: border-box;
        display:flex;
       justify-content: center;
        align-items: center;
        min-height: 100vh;
      /*  background-color: black;*/
        background: radial-gradient(white 1%,teal 99%);
     
     }

     .box {
 
        position: relative;
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;
        animation: animate 30s linear infinite;
     }

     .stop {
      animation-name: none;
    }

     @keyframes animate {
        0% {
           transform: perspective(1000px) rotateY(0deg);
        }

        100% {
           transform: perspective(1000px) rotateY(360deg);
        }}

    
     .box div {

      color: white;
        border: 2px solid white;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
     }

     .box div img {
     
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

   .box div h5 {
    text-align: center;
    color:white;
   position: relative;
        top: 185px;
        left: 0;
        width: 100%;
        height: 90%;
       /* object-fit: cover;*/
   }

   
#comentaire {
    padding: 2%;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 40vh; /* 40% de la hauteur de l’écran */
    transform: translateX(-50%);
    background-color: #EBF5FB;
    height: 50vh; /* hauteur relative */
    width: 80%; /* largeur relative */
    max-width: 1000px; /* limite sur grands écrans */
    border-radius: 20px;
}

/* Ajustements pour écrans moyens */
@media (max-width: 1024px) {
    #comentaire {
        height: 60vh;
        top: 30vh;
    }
}

/* Ajustements pour mobile */
@media (max-width: 600px) {
    #comentaire {
        width: 95%;
        height: 70vh;
        top: 15vh;
        padding: 5%;
    }
}





   

  #comentairecf {
   padding: 2%;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 40vh; /* 40% de la hauteur de l’écran */
    transform: translateX(-50%);
    background-color: #EBF5FB;
    height: 50vh; /* hauteur relative */
    width: 80%; /* largeur relative */
    max-width: 1000px; /* limite sur grands écrans */
    border-radius: 20px;
   }

   

   #comentairechef {
    padding: 2%;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 40vh; /* 40% de la hauteur de l’écran */
    transform: translateX(-50%);
    background-color: #EBF5FB;
    height: 50vh; /* hauteur relative */
    width: 80%; /* largeur relative */
    max-width: 1000px; /* limite sur grands écrans */
    border-radius: 20px;
   }

   #comentairethan {
    padding: 2%;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 40vh; /* 40% de la hauteur de l’écran */
    transform: translateX(-50%);
    background-color: #EBF5FB;
    height: 50vh; /* hauteur relative */
    width: 80%; /* largeur relative */
    max-width: 1000px; /* limite sur grands écrans */
    border-radius: 20px;
   }

   #comentairemaitre {
   padding: 2%;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 40vh; /* 40% de la hauteur de l’écran */
    transform: translateX(-50%);
    background-color: #EBF5FB;
    height: 50vh; /* hauteur relative */
    width: 80%; /* largeur relative */
    max-width: 1000px; /* limite sur grands écrans */
    border-radius: 20px;
   }


   



   

   .texteformation {
    line-height: 30px;
    padding: 10px;
     color: navy;
     font-size: 20px;
     scroll-behavior: auto;
     scrollbar-color: rebeccapurple green;
     scrollbar-width: thin;
   }



   #footer{
  height :100px;
  border:2px solid black;
  background-image:url(vert.jpg);
   display: flex;
  align-items: center;
   
}

#adresse {
  font-size: 20px;
  color :aliceblue;
  margin :15px;
}
 
#magnus {
  
  margin : 15px;
  height: 85px;
  width: 120px;
  background-color: aliceblue;
  
}

#isofroid {
  overflow:hidden;

  margin : 15px;
  height: 65px;
  width: 180px;

}