/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
                   
                                                   /*  POST - PAGES  */

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

:root {
  --max-page-post: 1180px;
  --max-page-content: 880px;
  --post-main-color:rgb(19, 19, 162);
  --post-dark-color:rgb(9, 9, 10);
  --post-grey-color:rgb(164, 164, 164);

  --post-button:#3495ef;;
  --post-button-text:rgb(248, 248, 248);
  --post-button-hover:rgb(43, 144, 237);
  --post-button-dark:rgb(23, 68, 111);
  --post-button-shadow:0 0 3px rgb(2, 74, 141);
}





.post{
  width:100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom:80px;
  padding-top:40px;
}

@media only screen and (min-width: 580px) {
  .post{
    gap:30px;
  }
}

@media only screen and (max-width: 580px) {
  .post{
    gap:20px;
  }
}


@media only screen and (max-width: 1210px) {
  .post{
    padding:0 15px 80px 15px;
  }
}




/*  MOSAIC  */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/



/* Conteneur principal en grille */
.mosaic {
  width: 100%;
  margin: 20px auto;
  max-width: var(--max-page-post);
  display: grid;
  align-items: stretch; /* Force les deux colonnes à avoir la même hauteur */
  position: relative;
}

@media only screen and (min-width: 1220px) {
  .mosaic {
    gap: 20px;
  }
}

@media only screen and (max-width: 1220px) and (min-width: 980px) {
  .mosaic {
    gap: 20px;
  }
}

@media only screen and (max-width: 980px) and (min-width: 580px) {
  .mosaic {
    gap: 10px;
  }
}

@media only screen and (max-width: 580px) {
  .mosaic {
    gap: 10px;
  }
}

@media only screen and (min-width: 980px) {
  .mosaic {
    grid-template-columns: calc(60% - 10px) calc(40% - 10px);
  }
}

@media only screen and (max-width: 980px) and (min-width: 580px) { 
  .mosaic {
    grid-template-columns: calc(70% - 10px) calc(30% - 10px);
  }
}

@media only screen and (max-width: 580px) {
  .mosaic {
    grid-template-columns: calc(70% - 5px) calc(30% - 5px);
  }
}

:root {
  --border-mosa: 10px;
}

/* Colonne de gauche en 16/9 */
.mosaic .bk_1 {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}

/* La zone vidéo (ou image) remplit entièrement bk_1 */
.media_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: var(--shadow_article);
  background: black;
  cursor: pointer;
}

.media_video img,
.media_video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

@media only screen and (min-width: 0px) {
  .media_video {
    border-radius: var(--border-mosa);
  }
  
  .media_video img,
  .media_video iframe {
    border-radius: var(--border-mosa);
  }
}

/* Bouton play dans la vidéo */
.media_video div {
  background: red;
  width: 70px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: white;
}

/* Colonne de droite : la grille interne doit occuper exactement la hauteur de bk_1.
   On empêche son contenu d’étendre le conteneur. */
.bk_2 {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

@media only screen and (min-width: 980px) { 
  .bk_2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
}

@media only screen and (max-width: 980px) and (min-width: 580px) {
  .bk_2 {
    display: grid;
    grid-template-columns: 1fr;              
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  
  /* Masquer les éléments indésirables */
  .bk_2 .mosa_img:nth-child(3),
  .bk_2 .mosa_img:nth-child(4) {
    display: none;
  }
}

@media only screen and (max-width: 580px) { 
  .bk_2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100%;
  }
  .bk_2 .mosa_img:nth-child(2),
  .bk_2 .mosa_img:nth-child(3),
  .bk_2 .mosa_img:nth-child(4) {
    display: none;
  }
}

.bk_click {
  width: 45px;
  height: 45px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.5s;
}

.bk_click:hover {
  background: rgb(241, 241, 241);
}

.bk_click svg {
  width: 22px;
  fill: var(--post-dark-color);
}

/* Chaque conteneur d'image occupe entièrement sa cellule */
.mosa_img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

/* Correction : forcer les images à être en bloc et respecter object-fit: cover */
.mosaic img,
.bk_2 .mosa_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--border-mosa);
  cursor: pointer;
  max-height: 100%;
}

/* Pour s'assurer que l'iframe se positionne correctement */
.media_video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--border-mosa);
}




/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* TITLE */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


.post_up{
  display:flex;
  align-items: center;
  gap:10px;
  margin:0 auto;
  width:100%;
  max-width: var(--max-page-post);
}
.post_title{

}

.post_title h1{
  font-size: 28px;
  line-height: 34px;
  color:rgb(7, 7, 7);
}

.post_title h1{
font-size: 28px;
  line-height: 34px;
  color: rgb(7, 7, 7);
}






.click_link{
  margin-left:auto;
}
@media only screen and (max-width: 580px) { 
  .click_link{
    display:none;
  }}

.click_link a{
  background:var(--post-button);
  padding: 15px 30px;
  border-radius:15px;
  box-shadow: var(--post-button-shadow);;
  color:var(--post-button-text);
  display: flex;
  align-items: center;
 font-size:14px;
 transition:0.5s;
}


.click_link a:hover{
  background:var(--post-button-hover);

}

.click_link a span{
 padding-top:2px;
  }



.click_link a svg{
width:20px;
fill:rgb(221, 221, 221);
margin-right:12px;
transition:0.5s;
}

.click_link a:hover svg{
  transition:0.5s;
  fill:var(--post-button-text);;
  }







/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/




.post_location{
  width:100%;
  max-width:var(--max-page-post);
  margin:0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: -20px;

}


.post_location p a{
  font-size: 16px;
  color: var(--dark-color);
  }

  .post_location svg{
    width: 16px;
    fill: var(--dark-color);
    }

  .post_location a:hover {
   text-decoration: underline;
    }
  




    .post_description{
      width:100%;
      max-width:var(--max-page-post);
      margin:0 auto;
       }

       .post_description p{
        width:100%;
        max-width:var(--max-page-content);
        font-size:18px;
        line-height: 28px;
        letter-spacing: 1.2px;
         }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* CONTENT */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


.post_content{
  width:100%;
  max-width: var(--max-page-post);
  margin:0 auto;
  display: grid;
  gap: 80px;
  margin-top:80px;
}


.post_content section{
width:100%;
max-width:var(--max-page-content);
display: flex;
flex-direction: column;
gap: 20px;
}




.content_title{
  width:100%;

   }


.content_title h2{
  width:100%;
  font-size: 24px;
  line-height: 32px;
  color: #070707;
   }




.content_text{
  width:100%;
   }

   .content_text p{
    width:100%;
    font-size:16px;
    line-height: 28px;
    letter-spacing: 1.1px;
     }



     .content_text p a {
      position: relative;
      color:var(--button-color); 
      transition: .3s ease;
      text-decoration-line: underline;  
      text-decoration-color: var(--button-color); 
      text-decoration-thickness: 2px;   
      text-underline-offset: 5px;     
    }
    
  
    .content_text p a:hover {
      color:var(--button-color-hover); 
      text-decoration-color: var(--button-color-hover); 
    }






     .content_list{
      width:100%;
  
       }
    
       .content_list ul {
        margin: 0;
        padding-left: 20px; 
        list-style-position: outside;
        display: grid;
  gap: 10px;
    }
    

       .content_list ul li{
        width:100%;
        font-size:16px;
        line-height: 26px;
        letter-spacing: 1.1px;
         }



         .content_list ul li a {
          position: relative;
          text-decoration: none;
          color:var(--button-color); 
          transition: .3s ease;
        }
        .content_list ul li a:hover{
          color:var(--button-color-hover); 
         }
    




/* VISU */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


.content_visu {
  width:100%;
  display: grid;
  gap: 10px; /* Espace de 10px entre chaque mosa_img */
  height:300px;
}
.content_visu .mosa_img {
  position: relative;
  overflow: hidden;
}
.content_visu .mosa_img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* L'image remplit son conteneur en cover */
  border-radius:5px;
}

/* Cas 1 : 1 image (unique enfant) */
/* La seule image occupe 100% de la largeur et a une hauteur fixe de 200px */
.content_visu:has(> .mosa_img:only-child) {
  grid-template-columns: 1fr;
  grid-template-rows: 100%;
}

/* Cas 2 : 2 images */
/* Deux colonnes égales ; la hauteur sera déterminée par le contenu */
.content_visu:has(> .mosa_img:nth-child(2)):not(:has(> .mosa_img:nth-child(3))) {
  grid-template-columns: 1fr 1fr;
}

/* Cas 3 : 3 images */
/* La première image occupe 55% de la largeur et s'étend sur deux lignes ;
   les deux autres se placent dans la colonne de 45% restant, l'une au-dessus de l'autre */
.content_visu:has(> .mosa_img:nth-child(3)):not(:has(> .mosa_img:nth-child(4))) {
  grid-template-columns: 55% 45%;
  grid-template-rows: repeat(2, 1fr);
}
.content_visu:has(> .mosa_img:nth-child(3)):not(:has(> .mosa_img:nth-child(4))) > .mosa_img:first-child {
  grid-row: 1 / span 2;
}

/* Cas 4 : 4 images */
/* Disposition en grille 2x2, avec des carrés grâce à l'aspect ratio */
.content_visu:has(> .mosa_img:nth-child(4)):not(:has(> .mosa_img:nth-child(5))) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.content_visu:has(> .mosa_img:nth-child(4)):not(:has(> .mosa_img:nth-child(5))) > .mosa_img {
  aspect-ratio: 1 / 1;
}

/* Cas 5 : 5 images */
/* La première image occupe 55% de la largeur sur deux lignes,
   les 4 autres se placent en grille (2 colonnes x 2 lignes) dans les 45% restants */
.content_visu:has(> .mosa_img:nth-child(5)):not(:has(> .mosa_img:nth-child(6))) {
  grid-template-columns: 55% 22.5% 22.5%;
  grid-template-rows: repeat(2, 1fr);
}
.content_visu:has(> .mosa_img:nth-child(5)):not(:has(> .mosa_img:nth-child(6))) > .mosa_img:first-child {
  grid-row: 1 / span 2;
}
.content_visu:has(> .mosa_img:nth-child(5)):not(:has(> .mosa_img:nth-child(6))) > .mosa_img:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.content_visu:has(> .mosa_img:nth-child(5)):not(:has(> .mosa_img:nth-child(6))) > .mosa_img:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}
.content_visu:has(> .mosa_img:nth-child(5)):not(:has(> .mosa_img:nth-child(6))) > .mosa_img:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}
.content_visu:has(> .mosa_img:nth-child(5)):not(:has(> .mosa_img:nth-child(6))) > .mosa_img:nth-child(5) {
  grid-column: 3;
  grid-row: 2;
}




/* Figure */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/



.content_figure{
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content_figure_img{
  width:100%;
}

.content_figure_img img{
  width:auto;
  max-width:100%;
  height:auto;
  max-height:800px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}

.content_figure figcaption{
  display: flex;
  align-items: center;
  justify-content: center;
  padding:20px;
  background:#3495ef;
  color:white;
}

/*  Map */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.content_iframe{
  display:flex;
  align-items: center;

  max-width: var(--max-page-post);
  margin:0 auto;
  border-radius:20px;
}

.content_iframe{
 width:100%;
height: 400px;
 border-radius:20px;
 background:rgb(239, 239, 239);
}

.content_iframe iframe{
  width:100%;
  height:100%;
  border-radius:20px;
 }


/*  ENSEMBLE DES IMAGES  */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ====================================================
   Overlay et blocage du scroll
==================================================== */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: none;
}

.overlay.active {
  display: block;
}

/* Bloque le scroll du body quand l'overlay ou le modal est actif */
.no-scroll {
  overflow: hidden;
}

/* ====================================================
   Aside (Galerie d'images)
==================================================== */
.post_pics {
  position: fixed;
  top: 0;
  background: #fff;
  z-index: 1001;
  overflow-y: auto;
  transition: 0.5s ease;
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3);
}

@media only screen and (min-width: 980px) {
  .post_pics {
    width: 600px;
    height: 100vh;
    right:-600px;
  }
}

@media only screen and (max-width: 980px) {
  .post_pics {
    height: 100vh;
    width:100%;
    right:-100%;
  }
}

.post_pics.active {
  right: 0;
}

/* Bouton de fermeture de l’Aside */
.post_pics_up_close {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 45px;
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(138, 138, 138, 0.1);
}

.post_pics_up_close svg {
  width: 20px;
  fill: var(--post-dark-color);
}

/* Titre de l’Aside */
.post_pics_up_title {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--post-dark-color);
  border-bottom: 1px solid grey;
}

/* Grille d'images */
.side_mosaic {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px;
}

.side_img {
  width: 100%;
  height: 160px;
  cursor: pointer;
  overflow: hidden;
}

.side_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-mosa);
  transition: transform 0.3s ease;
}

.side_img img:hover {
  filter: brightness(1.1);
}

/* ====================================================
   Modal d'affichage de l'image en grand
==================================================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 1002;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.modal.active {
  display: flex;
  opacity: 1;
}

/* Image dans le modal */
.modal img {
  max-width: 85%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 10px;
}

/* Compteur d’image */
.modal .counter {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 5px 15px;
  border-radius: 15px;
}

/* Bouton de fermeture du modal */
.modal .close-modal {
  position: fixed;
  top: 20px;
  right: 20px;
  cursor: pointer;
  font-size: 22px;
  color: var(--post-dark-color);
  background: rgb(246, 246, 246);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flèches de navigation */
.modal .nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 50px;
  height: 50px;
  background: rgb(246, 246, 246);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1004;
  transition: background 0.2s ease;
}

.modal .nav:hover {
  background: rgb(226, 226, 226);
}

.modal .nav.left {
  left: 20px;
}

.modal .nav.right {
  right: 20px;
}

.modal .nav svg {
  width: 20px;
  fill: var(--post-dark-color);
}

.modal .nav.hidden {
  display: none;
}

.close-modal svg {
  width: 20px;
  fill: var(--post-dark-color);
}



/*  ENSEMBLE DES IMAGES  */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.post_click{
  width: 100%;
  display: flex;
  align-items: center;
  gap:10px;
  height:70px;
}

@media only screen and (min-width: 1220px) {
  .post_click{
  padding-left: calc((100% - var(--max-page-post)) / 2);
  padding-right: calc((100% - var(--max-page-post)) / 2);
}}

@media only screen and (max-width: 1220px) and (min-width: 580px){
  .post_click{
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media only screen and (min-width: 580px){
  .post_click{
    padding-top:15px;
    padding-bottom:15px;
  
    background:white;
    box-shadow:0 0 5px grey;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    transform: translateY(-110%);
    transition: transform 0.5s ease-in-out;

    z-index: 1000;
  }
  .post_click.open {
    transform: translateY(0);
  }
  
}






@media only screen and (max-width: 580px){
  .post_click{
    padding-left: 20px;
    padding-right: 20px;
    position:fixed;
    bottom:0;
    left:0;
    background: linear-gradient(0deg, rgba(255,255,255,0.9387955865940126) 23%, rgba(255,255,255,0) 100%);;
  }
}

.post_click_name{
font-size: 24px;
  line-height: 34px;
  color: rgb(7, 7, 7);
}

.post_click_stars{
  display: flex;
  align-items: center;
  gap: 5px;
}

@media only screen and (max-width: 580px){
  .post_click_name, .post_click_stars{
    display:none;
}
}

.post_click_stars span svg {
  width: 14px;
  fill: rgb(255, 204, 0);
}



@media only screen and (min-width: 580px){
  .post_click_ext{
    margin-left:auto;
  }
}

@media only screen and (max-width: 580px){
  .post_click_ext{
    width:100%;
  }
}


.post_click_ext a{
  padding:15px 40px;
  background:var(--post-button);
  border-radius:50px;
  transition:0.5s;
  box-shadow: var(--post-button-shadow);
}

.post_click_ext a:hover{
  background:var(--post-button-hover);
}


@media only screen and (max-width: 580px){
.post_click_ext a{
    width:100%;
    display:inline-block;
    text-align:center;
  }
}

.post_click_ext a span{
  color:var(--post-button-text);
  font-size:14px;
}







/*  SUGGESTION  */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/



.discover{
  width:100%;
  max-width: var(--max-page-post);
  margin:0 auto;
}


@media only screen and (max-width: 1210px) {
  .discover{
    padding:0 15px 0px 15px;
  }
}


.discover_title{
  width:100%;
}
.discover_title span{
width: 100%;
  font-size: 24px;
  line-height: 32px;
  color: #070707;
}

.discover_title span{
  width: 100%;
    font-size: 24px;
    line-height: 32px;
    color: #070707;
  }


  .discover_list{
    width: 100%;
    margin:30px 0 80px 0;
    }


  .discover_list ul{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
    gap:25px;
    }

    .discover_list ul li {
      list-style: none;
    }

    .discover_list ul li a{
     padding:22px 30px;
     border-radius:5px;
     box-shadow: 0 0 5px rgb(219, 219, 219);
     display: flex;
    align-items: center;
     gap: 15px;
     transition: 0.5s;
      }

      .discover_list ul li a:hover{
        box-shadow: 0 0 5px var(--button-color);
         }

      .discover_list ul li a svg{
        width: 22px;
        fill: var(--button-color);
        margin-top: -4px;
         }

         .discover_list ul li a span{
         font-size:18px;
         color:var(--dark-color);
             }



























/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
                   
                                                   /*  SPE  */

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/




/*  SPE  */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.table_article {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-family: Arial, sans-serif; /* ou une autre police de votre choix */
}

/* En-tête du tableau */
.table_article thead tr {
  background-color: #333;
  color: #fff;
}

.table_article th,
.table_article td {
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  text-align: left;
}

/* Lignes alternées pour le corps */
.table_article tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Effet survol */
.table_article tbody tr:hover {
  background-color: #f1f1f1;
}

/* --- Version mobile --- */
@media (max-width: 768px) {
  /* On masque l'en-tête du tableau */
  .table_article thead {
    display: none;
  }

  /* Le tableau, les sections et les lignes deviennent "bloqués" */
  .table_article, 
  .table_article tbody, 
  .table_article tr, 
  .table_article td {
    display: block;
    width: 100%;
  }

  /* Séparation entre chaque ligne du tableau */
  .table_article tr {
    margin-bottom: 1rem;
    border: 1px solid #ccc; /* Visuel pour mieux distinguer les lignes */
    border-radius: 5px;
    overflow: hidden;
  }

  /* Les cellules sont affichées en mode "ligne" sur plusieurs rangs */
  .table_article td {
    position: relative;
    padding-left: 50%;
    text-align: left;
    border: none;
    border-bottom: 1px solid #ddd;
  }

  .table_article td::before {
    /* On récupère la valeur de data-label pour recréer l’intitulé de la colonne */
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    width: 45%;
    white-space: nowrap;
    font-weight: bold;
  }

  /* La dernière cellule d'une ligne n'a pas de bordure du bas */
  .table_article td:last-child {
    border-bottom: none;
  }
}