/* === NAVIGATION CATÉGORIES === */

.navigation-categories {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   margin: 20px 0;
   background-color: var(--main-bg);
   padding: 10px;
   border-radius: 10px;
   border: var(--aside-border) solid 2px;
}

.navigation-categories h3{
   border-bottom: solid 2px var(--category-title-border);
   font-size: 25px;
   width: 200px;
   text-align: center;
}

.navigation-categories a {
   text-decoration: none;
   color: var(--text-contenu);
   font-size: 20px;
   padding: 10px 40px 10px 40px;
   border-radius: 5px;
   border: solid 2px var(--category-title-border);
   background-color: var(--category-title-bg);
   transition: all 0.3s ease;
}

.navigation-categories a:hover {
   background-color: var(--aside-bg-hover);
   color: var(--aside-text-hover);
   box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
   transform: translateY(-3px);
}

.nav-cat-border {
   display: flex;
   border: solid 2px var(--aside-border);
   padding: 10px;
   border-radius: 10px;
   width: 100%;
   justify-content: space-evenly;
   box-shadow:3px 3px 7px rgba(0, 0, 0, 0.6);
}

.art-container {
   display: flex;
   flex-direction: row; 
   flex-wrap: wrap; 
   justify-content: space-evenly;
   max-width: 1200px;
   margin: 0;
   padding: 0;
   font-size: 13px;
}

.cat2-article {
   max-width: 31%;
   background-color: var(--main-bg);
   border: solid 3px var(--main-border);
   border-radius: 15px;
   margin: 15px 0;
   padding-bottom: 10px;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
   overflow: hidden; /* Pour respecter le border-radius et empêcher le débordement */
   transition: all 0.3s ease;
}
   
.cat2-article:hover {
   transform: scale(1.02);
   box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6);
   border-color: var(--accent);
}


.flag-image {
   margin: none;
   padding: none;
   flex: 1;
   position: relative;
}

.flag-image img {
   width: 100%;
   height: auto;
   position: relative;
}

/* EN ATTENTE */

.pays-label {
   position: absolute;
   top: 10px;
   left: 10px;
   background-color: rgba(0, 0, 0, 0.6);
   color: white;
   padding: 5px 10px;
   border-radius: 5px;
   font-size: 14px;
   z-index: 1;
}

.contenu-article {
   margin: 0 10px;
   display: flex; 
   flex-direction: column;
   flex: 1;
}

.contenu-article h2 {
   display: block;
   text-align: center;
   color: var(--accent);
   font-size: 25px;
   margin-bottom: 10px;
   border-bottom: solid 2px var(--art-div-title);
}

.infos-cles ul {
   list-style-type: none;
   padding: 5px 5px; 
   display: flex; 
   flex-direction: column;
   gap: 5px;
}

.infos-cles h3 {
   color: var(--art-div-title);
   font-size: 20px;
   margin: 10px auto 5px auto;
   border-bottom: solid 2px var(--art-title-border);
   max-width: fit-content;
}

.infos-cles li {
   display: flex; 
   justify-content: space-between;
   align-items: center;
}

.infos {
   text-align: center; 
   max-width: fit-content;
   border: solid 1px transparent;
   padding: 2px 5px;
   border-radius: 30px;
   background-color: var(--tag3);
   color: var(--text-light);
   transition: all 0.3s ease;
}

.infos:hover {
   background-color: var(--hover-tag3);
}

.contenu-supp {
   display: flex; 
   flex-direction: column;
   gap: 10px;
}

.avis-general {
   color: var(--citation);
   font-style: italic;
   text-align: center;
}

.coordonnees-gps {
   text-align: center;
   font-weight: bold; 
}

/* Bouton Voir sur Google Maps */

.btn-url-gps {
   text-align: center;
   background-color: var(--accent);
   padding: 8px 12px;
   border-radius: 50px;
   border: solid 2px transparent;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 5px; 
   transition: all 0.3s ease;
   text-decoration: none;
   color: var(--text-light);
   font-weight: bold;
}

.btn-url-gps:hover {
   background-color: var(--hover-bg);
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
   transform: scale(1.05) translateY(-3px);
}

.hebergement {
   margin-top: 5px;
}

.hebergement h3 {
   color: var(--art-div-title);
   font-size: 20px;
   margin: 0px auto 10px auto;
   border-bottom: solid 2px var(--art-title-border);
   max-width: fit-content;
}

.heb-tags {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 5px;
   margin-top: 5px;
}

.tag {
   display: inline-block;
   background-color: var(--tag3);
   color: var(--text-light);
   padding: 5px 10px;
   border-radius: 20px;
   font-size: 12px;
   margin-right: 5px;
}

.tag:hover {
   background-color: var(--hover-tag3);
   transition: all 0.3s ease;
}