/*les plus grandes section de la page*/
    *    { 
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: "Open Sans", sans-serif;
          line-height: 1.7em;
    }
    body { 
          background-color: rgb(243, 248, 246);
          height: 100vh;
          margin: 0px;
    }
  
    main   { 
          display: grid;
          grid-template-columns: 1fr 4fr 1fr;
          min-height: 100vh;
          gap: 20px;
          padding: 20px;
      }
    .col-center  { 

          border-radius: 8px;
          margin: -25px;
      }
       

   /*le menu de navigation  {  }*/
     .navbar { 
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding:20px 5%; /* c'est ici que le logo a viré vers la gauche , j ai remplacé 15% par 5%*/
             margin: 0px;
             box-shadow: rgba(254, 253, 255, 0.877) 0 10px;
             background-color: rgb(24, 0, 131);
             height: 80px;
             width: 100%;
             white-space: nowrap;
     }  

     .navbar .logo  { 
             font-size: 1.3rem;
     }  
     .navbar .nav-links { 
            gap: 1rem;
            margin: 0;
            list-style: none;
            display: flex;
       }
     .navbar .nav-links li { 
           display: inline-block;
           font-size: 20px;
           margin: 0 10px;
      } 
     .navbar .nav-links li a   { 
          text-decoration: none;
          color: #f5f5f7;
          font: bold;
          padding: 10px 20px;
          transition: 0.5s;
          border-radius: 6px;
      }  
     .navbar .nav-links li a:hover { 
           background-color: #4e27ff;
           color: #fff;
     } 
      


 /* Manip pour sécuriser l acces à la page art9 {  } */

     

 
 /* Les éléments standards  {  } */
  h2 { 
    text-align: center; 
    color: blue; 
    margin-top: 50px;
     }
    img { 
    text-align: center; 
    width:  100%; 
    height: 60%; 
    }
    li::marker { 
      color: blue;
     }
     
     

   /*les listes*/
   /*les tableaux*/
   table {
  text-align: center;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 2px solid #635c5c;
  padding: 8px;
  margin: 1px;
  text-align: center;
}

tr {
  background-color: #faf9f9;

}

th {
  background-color: #3371f7;
  color: white;
}

   /*les classes { }  et Id*/
   .imgcours { z-index: 1000;
    width: 50%;
    height: 50%;
    cursor: pointer;
    text-align: center;
    }

     .Slides {
     margin: 30px;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 8 px;
    line-height: 1;
    }
      .pub {
    margin-top: 60px;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: auto;
    gap: 02px;
    }

    .box {
           margin: 5px;
           width: 300px;
           height: 400px;
           gap: 1 px;
           line-height: 1;
        }
    .box1 {
           margin: 20px;
           height: 400px;
           width: 200px;
           gap : 8px;
        }
 
    .actuslide {
    margin: 30px;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 10 px;
    line-height: 1;
     }
        .actubox {
           margin: 20px;
           height: 700px;
           width: 500px;
           gap : 8px;
        }
        .chapitres ul li {  
    list-style: none; 
    text-align: left;
    list-style-type: none;
   }
        .listeprincipale  {  
    list-style: none; 
    text-align: left;
    list-style-type: none;
   }
        .listeprincipale li table td{  
    list-style: none; 
    text-align: left;
    list-style-type: none;
   }

    /*bloqueur de burst colleur*/
    .integral1342 { 
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
    }

   .reflexe  {  
    border: 4px solid red;
    padding: 1em;
   }
   .score { 
    color: rgb(57, 210, 248);
    }

  .coursesubtitle  {
    color: rgb(144, 20, 194);
    font-size: larger;
    }
    .coursesubtitle2  {
    color: rgb(22, 110, 241);
    font-size: larger;
    }
    .chapitres {
    font-size: 1.3em; 
    font-family: 'Arial', sans-serif;  
    line-height: 1.3; 
    color: #333;   
    padding: 20px;
    }

   .chapitres2 { 
    font-size: medium, 
   }
    .pagetitle  {
      text-align: center;
    } 
   
    mark.open { 
    background-color: lightgreen;
    } 

    #raccourcis  { 
    color: rgb(57, 109, 106);
    padding: 10px;
    margin-top: 20px;
    list-style: none;
    position: relative;
    line-height: 1.5;
    } 

              
   

  



        



    @media screen and (max-width:800px) { 
     
          main   { 
          display: grid;
          grid-template-columns:  1fr;
          min-height: 100vh;
          gap: 10px;
          padding: 10px;
      }

        .navbar   { 
          padding: 10px ;
          text-align: justify;
          overflow: auto;

         }
         .navbar .logo {  
          display: none;
         }
         ul.nav-links {  
          gap: 15px;
         }

         .col-center { 
          width: auto;
          grid-template-columns: 1fr;
          grid-template-rows: auto;
         }
          .Slides {
          margin: 10px;
          text-align: center;
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          gap: 8 px;
          line-height: 1;
          }
          .pub {
           display: none;
           }
           td th  {
           width: auto;
           }


        
     }