@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

*{
    font-family: 'Roboto', sans-serif;
    margin: 0; padding: 0;
    box-sizing: border-box;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    /* text-transform: capitalize; */
    font-weight: 400;
    transition: all .2s linear;
}

:root{
    --blue:#0188DF;
    --black:#354046;
}



body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

br {
   margin-bottom: 2%;
}

.header {
   width: 100%;
   height: 80vh;
   position: relative;
   display: grid;
   grid-template-rows: max-content 1fr;
   grid-template-columns: 1fr max-content;
}
   
.header__logo {
   font-size: 2.5rem;
      fill: white;
      width: 3rem;
      padding: 1rem;
      cursor: pointer;
   }



   
   .header__bg {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      filter: brightness(50%);
      clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
   }
   
   .header__title {
      grid-area: 2 / 1 / 2 / 3;
      align-self: center;
      justify-self: center;
      color: white;
      text-transform: uppercase;
      font-size: 3rem;
      text-shadow: 0px 2px 4px rgba(0,0,0,.4);
      margin-top: -5rem;
   }
   
   .header__log {
      display: flex;
      align-items: center;
      grid-area: 1 / 2 / 1 / 3;
      padding: 1rem 2rem;
      color: white;
      cursor: pointer;
      text-shadow: 0px 2px 4px rgba(0,0,0,.4);
   }
      .header__log--icon {
         fill: currentColor;
         margin-right: .5rem;
        filter: drop-shadow(0px 2px 4px rgba(0,0,0,.5));
      }
      
      .header__log--text {
         text-transform: capitalize;
      }
      .sommaire ul{
         list-style: none;
           }
      
           .sommaire ul li a {
            color: #000 ;
            text-decoration: none;  
            font-size: 22px;
              }
                .sommaire ul li:hover a , li a:hover {
            color: dodgerblue;
            text-decoration:underline;  
              }
              section ul li p{
                  font-size: 17px;
              }

              @media (max-width:768px){
                  /* html{
                     font-size: 55%;
                  } */
               .header .header__title{
                   font-size: 1.6rem;
               }
            }