#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;
      }
    
      #info{
        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;
        
      }
      /*-----------------------------------------------*/
    
   /* #sous {
      display: none;
      
    
     float: right;
     text-align: center;
     }
    
       #forma:hover #sous   {
     display: block;
     margin-right:0.7%;
    text-align: center;
    list-style-position:initial ;
     }
     
     #nav ul li a  ul li {display:none;}*/
      
     /*-----------------------------------------------*/
      
    
    
    
    
    
    
    
      #debut{
        font-weight: bold;
        font-size: 20px;
      }
    
    
      
      
      .marquee-rtl {
        color : red;
      max-width: 30em;                    
      margin: 1em auto 2em;
      border: 10px solid #F0F0FF;
      overflow: hidden;                    
      box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
    font-size: 25px;
    }
    
    
    .marquee-rtl > :first-child {
      display: inline-block;                
      padding-right: 2em;                  
      padding-left: 100%;                 
      white-space: nowrap;                 
      animation: defilement-rtl 15s infinite linear;
    }
    
    
    @keyframes defilement-rtl {
      0% {
        transform: translate3d(0,0,0);      
      }
      100% {
        transform: translate3d(-100%,0,0);  
      }
    }
    
    
    #clic {
      text-align: center;
      font-size: 25px;
      color : red;
      
      animation: blink 1.5s infinite;
    }
    
    @keyframes blink { 
      0% { opacity:0; }
      50% { opacity:1; } 
      100% { opacity:0; }
    }
    
    
    
    #footer{
      height :150px;
      border:2px solid black;
      background-image:url(vert.jpg);
       display: flex;
      align-items: center;
       
    }
    
    #magnus {
      display: flex;
      margin : 15px;
      height: 85px;
      width: 120px;
      background-color: aliceblue;
      
      
    }
    
    #isofroid {
      display: flex;
      overflow:hidden;
    
      margin : 15px;
      height: 65px;
      width: 180px;
    
    }
     
    
    #adresse {
      font-size: 20px;
      color :aliceblue;
      margin :15px;
    }
     
    
     #pres {
      background-image: url("vert.jpg");
      background-repeat: no-repeat;
      background-size: cover;
     }
    
    
     .navo  {
     
      background-image: url("vert.jpg");
      
      height:  5%;
      font-size: 15px;
         text-align: center;
          padding: 1px;
      color: aliceblue;
      }
    
      .but{
       
        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;
      }
    
    
 nav {
    background-image: url("vert.jpg");
      
    height:  5%;
    font-size: 15px;
       text-align: center;
        padding: 1px;
 
 }

 nav ul {
    list-style: none;
    display :flex;
 }


nav ul  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;   
position :relative;
}

nav li a {
    display:inline-flex;
text-decoration: none;
font-family: 'elmessiri';
color: aliceblue;
justify-content: center;   
text-align: center;
}

.panel {
    list-style: none;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    background-image: url("vert.jpg");
    margin: 0;
}

.card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(navy, aquamarine);
    color: aliceblue;
    text-decoration: none;
    height: 40px;
    border: 3px solid black;
    font-family: 'elmessiri';
    font-style: oblique;
    text-transform: uppercase;
}

.dropdown {
    position: relative;
}

.dropdown > .card {
    cursor: pointer;
}

.submenu {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    background-color: rgba(0, 0, 50, 0.9);
    border: 2px solid black;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10;
    width: 150px;
}

.submenu li a {
    display: block;
    padding: 8px;
    color: white;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid white;
}

.submenu li a:hover {
    background-color: teal;
}

.dropdown:hover .submenu {
    display: block;
}
 


      nav ul li ul li  {
      
    
        display: none;
       position: absolute;
        top: 100%;
      left: -1%;
      }

      nav ul li ul li a {
        display:inline-flex;
        justify-content: center;   
text-align: center;

      }


      
      nav ul li:hover ul li {
       /* display: block;*/
        display:inline-flex;
        justify-content: center;   
text-align: center;
    /*    height: 40px;
        width:200px;*/
      }
    
      .but1 {
        text-decoration: none;
        font-family: 'elmessiri';
        color: aliceblue;
      }