::root{
    /* Les couleurs */
     --h1color: linear-gradient(60deg ,rgba(8, 58, 45, 0.932) , rgba(117, 202, 180, 0.932)) ;
     --col1: blue;
     --col2: blue;
     --col3: blue;
     --col4: blue;
     --col5: blue;
     --col6: blue;
 
     /* Les Polices */
     --F1: blue;
     --F2: blue;
     --F3: blue;
     --F4: blue;
     --F5: blue;
     --F6: blue;
 
     /* Les tilles de police */
     --font1: 8px;
     --FZ2: 10px;
     --FZ3: 12px;
     --FZ4: 16px;
     --FZ5: 18px;
     --font6: 25px;
 }
 
 
 /* <!-- -------------------------------------------début entête  -------------------------------------------------------> */
 *{
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     user-select: none;
     font-family: 'Arial';
 }
 
 body{
     margin: 0;
     padding: 0;
     height: 230vh;
     font-family: 'Times new roman', sans-serif;
     overflow-x: hidden;
     background-color:#f0f0f0;
     justify-content:center;
     align-items:center;
 }
 
 
 header{
     background-blend-mode: darken;
     position: absolute;
     background-position: center;
     background-size: cover;
     top: 0;
     z-index: 1000;
     background-size: cover;
    
 }
 
 .Marc-carrousel{
   position: relative;
   background-position: center;
   height: 100vh;
   
 }
 
 .toutCarroucel{
     position: relative;
 }
 
 .carrousel{
     margin: 0 auto;
     position: relative;
     overflow: hidden;
     list-style: none;
     padding: 0;
     z-index:1;
     width: 800px;
     height: 60.5VH;
     animation: slideBackground 16s linear infinite;
     background-position: center;
     background-size: cover;
     background-position: center;
   
 }
 
 /* .carrousel {
     width: 800px;
     height: 400px;
     border-radius: 10px;
     left: 55px;
     background-size: cover;
     background-position: center;
     animation: slideBackground 16s infinite;
     position: relative;
     display: flex;
     justify-content: center;  
     align-items: center;  
 } */
 
 /* Animation CSS pour changer les images en arrière-plan */
 @keyframes slideBackground {
     0% { background-image: url('asset/fond/enseignim.jfif'); }
     25% { background-image: url('asset/fond/carou2.jpg'); }
     50% { background-image: url('asset/fond/gud.jfif'); }
     75% { background-image: url('asset/fond/P2.jpg') }
     100% { background-image: url('asset/fond/carou1.jpg'); }
 }
 
 .ETETE{
     width: 100%;
     background: linear-gradient(60deg ,rgba(5, 44, 34, 0.932) , rgba(117, 202, 179, 0.705)) ;
     background-blend-mode: darken;
     padding: 0;
     margin: 0;
     position: fixed;
 }
 
 header>.ETETE>.LOGO-IMminis{
   width: 100%;
   position: relative;
   left: 0px;
   top: 10%;
   display: flex;
   flex-direction: row;
   grid-gap: 22%;
 }
 
 .LOGO-IMminis>.spLOGM{
     position: relative;
     left: 10px;
     bottom:  10%;
     background-blend-mode: darken;
     height: 100px;
     width: 100%;
 }
 
 .spLOGL{
   position: relative;
   left: 10px;
   bottom:  10%;
   background-blend-mode: darken;
   height: 100%;
   width: 30%;
 }
 
 .ETETE>.LOGO-IMminis>.texteDentrer{
     max-width: 100%;
     flex-direction: row;
 }
 
 .ETETE>.LOGO-IMminis>.texteDentrer>p{
     color: rgb(255, 255, 255);
     font-size: 16px; 
 }
 
 .ContMenu{
     position: relative;
     top: 9%;
     width: 100vw;
     max-width: 100%;
 }


 
 .ContMenu2{
     position: relative;
     width: 100vw;
     z-index: 1000;
     border-top: solid 1px red;
     margin-top:  100%;
     left: 100px;
     height: 44vh;
     background-color: rgba(1, 14, 12, 0.89);
     position: fixed;
 }
 

 nav{
     width: 100%;
     margin: 0 auto;
     position: relative;
     top: 0px;
     min-height: 100%;
     z-index: 1000;
 }
 
 nav.active{
     background-color: rgb(255, 255, 255);
 }
 
 nav ul {
     list-style: none;
 }
 
 nav ul li{
     float: left;
     width: 230px;
     text-align: center;
     margin: 10px;
 }
 
 nav ul::after{
     content: "";
     display: table;
     clear: both;
 }
 
 nav a{
     display: block;
     text-decoration: none;
     color: #ffffff;
     border-bottom: 2px solid transparent;
     padding: 10px 0px;
     font-size: 21px;
     border-right: 1px solid orange;
 }
 
 nav a:hover{
     color: orange;
    
 }
 
 .sous{
     display: none;
     background-color: #ffffff;
     max-width: 100%;
     z-index: 1000;
 }
 
 .souR1{
     display: none;
     background-color: #fffffff6;
     max-width: 100%;
     position: absolute;
     left: 50%;
     top: 50%;
     z-index: 1000;
 }
 
 
 
 nav > ul li:hover .sous{
     display: block;
 }
 
 .sous li a {
     color: black ;
     font-size: 18px;
     border-bottom: solid 0.5px  #CCC;
     border-width: 1px;
     position: relative;
     padding: 5% 5%;
 }
 
 .sous li a:hover{
     color: orange;
 }
 
 .sous .deroulant:hover .souR1{
     display: block;
 }
 
 
 .sous li {
     float: none;
     width: 100%;
     text-align: left;
 }
 
 
 .sous a{
     padding: 10px;
     border-bottom: none;
 
 }
 
 .sous a:hover{
     border-bottom: none;
     background-color: rgba(200 , 200, 200 ,0.1);
 
 }
 
 .deroulant > a::after{
     content: "▼";
     font-size: 12px;
 }
 
 .PRASE-G{
     color: white;
     padding:  5% 5%;
 }
 
 
 
 /* <!-- -------------------------------------------début entête  -------------------------------------------------------> */
 
 
 .separat img{
     width: 100vw;
     height: 500%;
 }
 
 .Style-row1{
   display: flex;
   flex-direction:row;
   height: 100vh;
   width: 100%;
   position: relative;
 }
 
 
 /* grand contenu */
 
 .containt1{
     width: 100%;
 }
 
 .containt2{
     width: 100%;
     height: 100vh;
     background-color: rgb(6, 21, 36);
 }
 .image-G img{
     width: 100%;
     height: 100%;
 }
 .Touscar{
     width: 100%;
     height: 80vh;
     
     background: linear-gradient(70deg ,rgba(0, 37, 27, 0.932) , rgba(209, 243, 234, 0.932)) , url("asset/fond/Groupe\ d\'étude\ du\ peuple\ africain\ _\ Photo\ Gratuite.jfif");
     background-size: cover;
     padding: 5% 5%;
 }
 
 
 .separateur{
    position: relative;
    height: 8rem;
    position: relative;
    background-position: center;
    background-size: cover;
    align-items: center;
 }
 
 
 
 .Touscar2{
     width: 100%;
     height: 80vh;
     background-color: rgb(238, 238, 238);
 
 }
 
 .soucardre{
     position: relative;
     display: grid;
     grid-template-rows: repeat(2 , 2fr);
     margin: 14px;
 }
 
 
 .box{
     background-color:white;
     padding:20px;
     border-radius:10px;
     box-shadow:0 0 10px rgba(0, 0, 0, 0.1);
     text-align:center;
     width:300px;
 }
 
 .Avant-foot{
     margin-top: 5%;
    width: 100%;
    height: 45vh;
 }
 
 .titre1{
     font-family: "Arial";
     font-weight: 500;
     font-size: 50px;
     margin-left: 100px;
     color: white;
     position: relative;
     margin: 5px;
     left:  44px;
 }
 
 .titre2{
     font-family: "Arial";
     font-weight: 500;
     font-size: 25px;
     margin-left: 100px;
 }
 
 button#voirP{
     background-color:#3498db;
     color:white;
 }
 
 .GrandLigne{
     display: flex;
     flex-direction: row;
     grid-gap: 25px;
 
 }
 
 .EteteSpecialite{
     max-width: 470px;
     background-color: #2e5f53;
     padding-top: 13px;
     padding-bottom: 13px;
     padding-left:5px;
     padding-right: 5px;
     border-radius:16px;
     box-shadow:0px 3px 15px rgba(4, 7, 14, 0.5);
     border:1px solid #717377;
     position: relative;
     background-position: center;
     left: 50px;
 }
 
 .EteteSpecialite:hover{
     background-color: orange;
 }
 
 .nieauSP1{
   margin-top:60px;
  border:1px solid #717377;
  padding: 13px; 
  border-radius:16px;
  box-shadow:0px 3px 15px rgba(113,115,119,0.5);
  max-width: 200px;
 }
 
 .nieauSP1:hover{
     background-color: orange;
 }
 
 .crt{
    font-size: 55px;
}

 
 /* footer{
    width: 100%;
    height: 25vh;
    background:  linear-gradient(60deg ,rgba(5, 44, 34, 0.932) , rgba(24, 107, 85, 0.705));
 }
  */
 
 
 
  @media (max-width: 1050px) {
    .container {
      max-width: 960px;
    }

    .Mit-3{
        display: none;
    }

    .spLOGM {
        width: 10% !important;
     } 
}