@font-face {
    font-family: 'Nunito';
     src: url(orgasolitrans.fr/fonts/Nunito-Regular.ttf);
   }
   @font-face {
    font-family: 'Lato';
     src: url(orgasolitrans.fr/fonts/Lato-Regular.ttf);
   }
   
   *{
       scroll-behavior: smooth;
   }
   /* personnalisation de la barre de défilement */
   ::-webkit-scrollbar{
       width: 5px;
   }
   
   ::-webkit-scrollbar-track{
       background-color: transparent;
   }
   
   ::-webkit-scrollbar-thumb {
       border-radius: 10px;
       background-color:white;
     }
   
   /* couleur gras */
   b{
     color: #62c8f1;
   }
   
   b:nth-of-type(odd){
       color: #f4a7b7;
   }
   
   body{
       background-color: #111;
       color: #ffffff;
       margin: 0px;
       font-family: 'Lato', sans-serif;
   }
   
   main{
       padding-top: 60px;
   }
   
   @media (max-width: 838px){
       main{
           padding-top: 0px;
       }
   }
   
   a{
       text-decoration: none;
       color: #ffffff;
   }
   
   main a{
       color: #62d0ff;
   }
   
   ul{
       display: flex;
   }
   
   li{
       display: inline;
       margin: 15px;
       font-size: 20px;
       font-weight: 700;
   }
   
   header{
       display: flex;
       position: fixed;
       background-color: #0c0c0cf5;
       width: 100%;
       height: 70px;
       top: 0;
   }
   
   @media (max-width: 838px){
       header{
           height: 10px;
       }
   }
   
   /*------Navbar-----*/
   nav{
       position: fixed;
       margin-top: 0px;
   }
   
   .icon-bar {
       position: fixed;
       width: 100%;
       display: flex;
       flex-wrap: wrap;
       flex-direction: row;
     }
   
     .icon-bar a {
       display: block;
       text-align: center;
       padding: 24.5px;
       transition: all 0.3s ease;
       color: white;
       font-size: 18px;
     }
     
     .icon-bar a:hover {
       background-color: rgb(185, 185, 185);
       color: #000; 
     }
     
   .active {
       background-color: #003a52;
   }
   
   @media (max-width: 838px){
       .icon-bar{
           background-color: #0c0c0cf5;
       }
   
       .icon-bar a{
           padding: 6px 10px;
           font-size: 14px;
           text-align: left;
       }
   }
   /* catégories */
   #banner{
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
   }
   
   #banner a{
       margin-top: -120px;
   }
   
   .banner{
       width: 100%;
       max-height: 930px;
   }
   
   .logo-banner{
       object-fit: cover;
       height: 700px;
       margin-top: -820px;
   }
   
   @media (max-width: 1399px){
       .banner{
           margin-top: 0px;
           height: 300px;
       }
   
       .logo-banner{
           height: 220px;
           margin-top: -140px;
       }
   }
   
   @media (max-width: 838px){
       .banner{
           margin-top: 10px;
       }
   }
   
   .information-box{
       width: 100%;
       max-height: 450px;
       display:flex;
       flex-direction: row;
       background: linear-gradient(175deg, #191919 0%, #000000 90%);
   }
   
   .information-box:nth-of-type(even){
       flex-direction: row-reverse;
   }
   
   .information-box img{
       width: 700px;
       height: 450px;
       object-fit: cover;
   }
   
   .information-txt{
       width: 100%;
       max-width: 1980px;
       font-size: 20px;
       padding-top: 5%;
       padding-left: 8%;
       padding-right: 15%;
   }
   
   @media (max-width: 1399px){
       .information-box img{
           width: 300px;
           height: 300px;
       }
   
       .information-box{
           max-height: 350px;
           overflow:auto;
       }
   
       .information-txt{
           padding-top: 2%;
       }
   }
   
   @media (max-width: 838px){
       .information-box img{
           width: 0px;
       }
   
       .information-txt{
           padding-left: 12%;
           padding-right: 8%;
           padding-top: 6%;
           font-size: 18px;
       }
   }

/* Pagination page communiqués */
   .pagination {
       text-align: center;
       margin-top: 20px;
   }
   
   .pagination-btn {
       width: 40px;
       height: 40px;
       margin: 0 20px;
       background-color: #333;
       color: #f0f0f0;
       border: none;
       border-radius: 5px;
       font-size: 16px;
       cursor: pointer;
       transition: background-color 0.3s ease;
   }
   
   .pagination-btn:hover {
       background-color: #555;
   }
   
   .pagination-btn a{
       color:#fff;
   }
   
   .section-intro{
       width: 100%;
   }
   
/* Code spécifique page sections */
   .section-container{
       display: flex;
       flex-wrap: wrap;
       flex-direction: row;
       justify-content: space-evenly;
       width: 100%;
       margin-bottom: 25px;
   }
   
   .section-box{
       width: 24%;
       display: flex;
       max-height: 450px;
       border-radius: 10px;
       border: solid 1px #fff;
       margin: 5px;
   }
   
   .section-txt{
       width: 100%;
       font-size: 20px;
       padding-top: 5%;
       padding-left: 8%;
       padding-right: 15%;
   }

   @media (max-width: 1399px){
    .section-container{
	justify-content: center;
    }

    .section-box{
        max-height: 350px;
        overflow:auto;
	width: 51%;
    }

    .section-txt{
        padding-top: 2%;
    }
}

@media (max-width: 838px){
    .section-txt{
        padding-left: 12%;
        padding-right: 8%;
        padding-top: 6%;
        font-size: 18px;
    }
}

   /*--pages--*/
   .page-box{
       width: 100%;
       background-color: #111;
       padding-bottom: 25px;
   }
   
   .page-box h1{
       padding-top: 10px;
     font-size: 50px;
     color: #62c8f1;
     text-align: center;
     font-family: 'Lato', sans-serif;
     text-transform: uppercase;
     font-weight: bold;
   }
   
   .page-txt{
       font-size: 20px;
       text-align: justify;	
       color: white;
       margin-left: 15%;
       margin-right: 15%;
       font-family: 'Nunito', sans-serif;
   }
   
   /*--footer graphic parameters--*/
   .footer {
       background: linear-gradient( 45deg, #000000, transparent ), linear-gradient( 45deg, #000000, transparent ), linear-gradient( -45deg, #000000, transparent );
       height: 150px;
       width: 100%;
       display: flex;
       justify-content: center;
       padding-top: 80px;
   }
   
   .footer img{
       width: 40px;
       height: 15px;
       margin-bottom: -3px;
   }
   
   span{
       margin: 30px;
       font-size: 30px;
       font-weight: 500;
   }
   
   @media (max-width: 838px){
       span{
           margin: 15px;
       }
   }
   
   .foot-left{
       display: flex;
       flex-direction: column;
       align-self: flex-end;
       position: absolute;
       left: 0;
       padding-left: 2%;
       padding-bottom: 1%;
       text-align: left;
       font-size: 14px;
   }
   
   .foot-right{
       display: flex;
       flex-direction: column;
       align-self: flex-end;
       position: absolute;
       right: 0;
       padding-right: 2%;
       padding-bottom: 1%;
       text-align: right;
       font-size: 14px;
   }
   
   .foot-right p, .foot-left p{
       margin-top: 2px;
       margin-bottom: 15px;
   }
   
   .foot-right a, .foot-left a{
       color: #62d0ff;
   }
   
   @media (max-width: 739px){
       .footer{
           height: 250px;   
       }
       
       .foot-left{
           float: right;
           margin-bottom: 75px;
           padding: 0px;
           margin-left: 15px;  
       }
   
       .foot-right{
           text-align: left;
           left: 0;
           float: right;
           margin-left: 15px;
       }
   }
   
   /* pagination */
   .pagination {
       text-align: center;
       margin-top: 20px;
       margin-bottom: 20px;
   }
   
   .page-btn {
       width: 45px;
       height: 45px;
       margin: 0 5px;
       background-color: #333;
       color: #f0f0f0;
       border: none;
       border-radius: 5px;
       font-size: 16px;
       cursor: pointer;
       transition: background-color 0.3s ease;
   }
   
   .page-btn:hover {
       background-color: #555;
   }
   /*---------------------------*/