.wrapp{
     background: url('../img/even.jpg');
     font-family: 'Ubuntu',sans serif;
     background-size: cover;
     //background-attachment: fixed;
     background-repeat: no-repeat;
     background-position: center;
     //box-shadow: var(--box-shadow);  
     //border-radius: 6px;
     margin: 0px;
     width: 100%;
     height: 200px;
     padding: 8px;
     animation: bgChange 20s linear infinite;
   }
   @keyframes bgChange {
      0%{
        background-image: url('../img/even.jpg');
      }
      20%{
        background-image: url('../img/even.jpg');
      }
      25%{
        background-image: url('../img/kin.jpg');
      }
      45%{
        background-image: url('../img/kin.jpg');
      }  
      50%{
        background-image: url('../img/dakar.jpg');
      }  
      70%{
        background-image: url('../img/dakar.jpg');
      } 
      75%{
        background-image: url('../img/luanda.jpg');
       }  
      95%{
        background-image: url('../img/luanda.jpg');
       }  
   }
   .details{ 
      background: rgba(255,255,255,.1);
      width: 100%; 
      height: 100%; 
      border-radius: 6px;
   }
   .contenair-p{
     background: rgba(0,0,0,.4);
     padding: 16px 8px 16px 20px;
     width: 100%;  
     border-top-right-radius: 6px;
     border-top-left-radius: 6px;
   }
   .pays{
      text-align: center;
      color: #fff; 
      font-size: 20px; 
   }
   .ville{
      text-align: left;
      color: #fff;
      font-size: 18px;
      margin-top: 2px;
   }
   .time{
     color:#fff;
     margin-left: 16px;
   }
   .img{
      display: flex;
      align-items: right;
      justify-content : right;
      margin: 20px 0px 20px 0px; 
   }
   .img img{
     width: 80px;
     height: 80px;
     object-fit: cover;
   }
   .temp{
     position: relative;
     bottom: 80px;
     left:  10px;
   }
   .tempc{
     text-align: left;
     color: #fff;
     font-size: 50px;
     font-weight: bold;
   }
   
   .meteo{
     text-align: ;
     color: #fff;
     font-size: 16px;
     font-weight: bold;
     margin-top: 0px;
   }
   
.slade ul{
    overflow-y: hidden;
    padding: 3px;
    position: relative;
    list-style-type: none;
    margin: 1px auto;
    display: flex; /* Active le mode flexbox */
    justify-content: flex-start; /* Alignement des éléments à gauche */
    gap: 20px; /* Espacement entre les éléments */
    position: relative;
    overflow-x: auto; /* Défilement horizontal */
    overflow-y: hidden; /* Pas de défilement vertical */
    -ms-overflow-style: none; /* Masquer la barre sur IE/Edge */
    scrollbar-width: none; /* Masquer la barre sur Firefox */
    scroll-snap-type: x mandatory; /* Effet de "snap" */
    scroll-behavior: smooth; /* Défilement fluide */
}


/* Éléments à l'intérieur du conteneur */
.slade ul li{
  flex: 0 0 auto; /* Ne pas s'étirer, garder la taille d'origine */
    width: 200px; /* Largeur d'un élément */
  background: #f2f2f2;
  box-shadow: var(--box-shadow);
  background-size:contain;
  margin: 8px;
  padding: 10px;
  position: relative;
  display: block;
  border-radius: 6px;
}
.slade ul li a{
  text-decoration: none;
  color: #333333;
  font-size: 18px;
  font-family:'Lora';
  line-height:1.2;
}
.slade ul li img{
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.slade ul li:hover{
  background: #fff;
}
.slade ul li a:hover{
  color: #0080FF;
}
.ns{
  background: #0080FF;
  /*width: 20%;*/
  padding: 4px;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  border-radius: 4px;
  border-top-right-radius: 0px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0px;
  text-align: left;
}
.ns span{
  font-size: 8px;
  color: #F0F8FF;
}
.art ul{
   list-style-type: none;
   margin-bottom: 3px;
   padding: 3px;  
}
article{
    background:#fff;
    box-shadow: var(--box-shadow);
    background-size:contain;
    margin: 6px auto;
    padding: 10px;
    position: relative;
    border-radius: 4px;
    word-wrap:break-word;
    word-spacing: 0.05em;
    width: 98%;
}
.art ul li{
    background:#fff;
    box-shadow: var(--box-shadow);
    background-size:contain;
    margin: 6px auto;
    padding: 10px;
    position: relative;
    border-radius: 4px;
    word-wrap:break-word;
    word-spacing: 0.05em;
    width: 98%;
    transition: 60s;
    animation: reveal linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: contain 50%;
}
.art ul li img,article img{
   width: 100%;
   height: 360px;
   object-fit: cover;
}
.art ul li h2{
  margin: 4px 0px 4px 0px;
  color: #333333;
  font-size: 16px;
  font-family: 'Montserrat';
  line-height:1.2;
}

@media screen and (max-width: 800px){
   .art ul li img,article img{
   width: 100%;
   height: 220px;
   object-fit: cover;
} 

}

 article .details{

   display: flex;
   font-family:'Lora';
   justify-content: space-between;
   align-items: center;
 }
 article .details span{
   font-size: 10px;
   font-weight: 500;
   color: #979797;
   margin-bottom: 16px;
 }
 article .details span i{
   margin-right: 3px;
   color: #0080ff;
   font-size: 12px;
 }
 
 article .details-c{
   display: flex;
   justify-content: start;
   align-items: center;
   margin-bottom: 16px;
 }
 article .details-c span{
   font-size: 10px;
   font-weight: 500;
   color: #979797;
   margin-right: 16px;
   padding: 6px;
   border-radius: 3px;
   border: 1px dashed #0080ff;
 }
 article .details-c span i{
   margin-right: 3px;
   color: var(--white);
   font-size: 12px;
 }
 
 article .tags{

         text-align: center;
         font-family:'Lora';
         align-items: center;
         justify-content: center;
         margin: 16px 0;
         width: 100%;
  }
  
  article .tags a{

         background : var(--bg);
         display: inline-block;
         border: 1px dashed #0080ff;
         color: var(--white);
         padding: 6px;
         border-radius: 6px;
         font-weight: bold;
         margin: 8px;
     }
       
article h1{
   margin: 4px 0px 12px 0px;
   color: #1b1b1b;
   font-size: 28px;
   font-weight: bold;
   font-family:'Montserrat';
   line-height:1.2;
}
article h2{
  margin: 12px 0px 4px 0px;
  color: #1b1b1b;
  font-size: 25px;
  font-weight: bold;
  font-family:'Montserrat',Sans serif;
  line-height:1.2;
}


.art ul li a{
  text-decoration: none;
  color: #000;
  font-size: 20px;
  font-family:'Lora',serif;
}
.art ul li a:hover{
  color: #0080ff;
}
.art ul li .shut,article .p{
  margin: 4px 0px 4px 0px;
  color: #333333;
  font-size: 16px;
  font-weight: 300;
  font-family:'Lora',serif;
  line-height:1.6;
}
.art ul li:hover,article:hover{
   background: #f2f2f2;
}
@keyframes reveal{
  from{
    transform: scale(0.7);
    opacity: 0;
  }
  to{
    transform: scale(1);
    opacity: 1;
  }
}

.saa {
  list-style-type: none;
  background: #fff;
  background-size:contain;
  margin: 0px;
  padding: 0px;
  position: relative;
  display: block;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 4px;
}
.saa  li{
 margin: 8px auto;
 padding: 10px;
 position: relative;
 display: block;
 justify-content: center;
 align-items: center;
 width: 100%;
 border-bottom: 2px solid #eaeaeb;
 word-wrap:break-word;
 word-spacing: 0.05em;
 
 }
 .saa li .cnt{
    display: flex;
 }
 .saa li img{
 width: 25%;
 height: 85px;
 object-fit: cover;
 
 }
 .saa li a{
   text-decoration: none;
   margin-left: 20px;
   color: #000;
   width: 60%;
  font-size: 16px;
  font-family:'Lora';
  line-height:1.2;
 }
 .saa li a:hover{
     color: #0080ff;
 }
 .saa li:hover{
   background: #eaeaeb;
   transition: 2s;
   
 }
/*style sur la page redaction.php*/
.redaction{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 70px auto;
   width: 90%;
   padding: 16px;
   background: var(--every-bg);
   box-shadow: var(--box-shadow);
   background-size:contain;
   border:1px solid #fff;
   border-radius: 10px;
   z-index: 2;
}

 .redaction a{
   text-decoration: none;
   color: var(--black);
 }
.redaction h1{
   
   color:  var(--royalblue);
   font-size: 15px;
   text-align: center;
}

.redaction .champ_titre {

   width: 100%;
   margin: 10px auto;
   height: 50px;
   padding: 20px;
   border: none;
   border-radius: 10px;
   background: var(--gris-bg);
}

.redaction .champ_contenu{

   width: 100%;
   height: 110px;
   margin: 10px auto;
   padding: 20px;
   border: none;
   border-radius: 10px;
   background: var(--gris-bg);
}

  .redaction .bouton{
   color: #fff;
   background: var( --royalblue);
   border: 0px solid ;
   border-radius:  4px;
   padding: 5px;
   margin-right: -3px;
}
.redaction .bouton a{
   color: #fff;   
}

/*style boutons de  pagination*/

.pagination{
  display:flex;
  align-items: center;
  justify-content: center;
  margin: 30px auto;
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  width: 90%;
  
}
.pagination a,.pagination span{
  text-decoration: none;
  margin: 0px 8px;
  font-family: 'Lora', serif;
}
.pagination a i{
  color: #eaeaea;
  font-size: 16px;
}
.pagination .btns{
 
   /*color: #fff;
   background: #1a73e8;*/
   border: 0px solid ;
   border-radius: 50px;
   padding: 5px 10px 5px 10px;
 
}
.pagination .btns:hover{
   
   color: #4800ff;
}
.pagination .inactive{
 
   color: #020e1e;
   background: #eaeaea;
   border: 0px solid ;
   border-radius: 50px;
   padding: 5px 10px 5px 10px;
 
}