.breadcrumb .divider.fas.fa-map-marker-alt {display: none;} 
#sp-right .sp-module {padding: 0}
.article-details .article-ratings-social-share {padding: 0px 0px 0px  0px; margin:0px 0px 0px 0px;}
.article-ratings {display:none;}
.page-header {display:none;}
#sp-main-body {padding: 0px;}
.com-content #sp-main-body { padding: 0px 0; }

a {text-decoration:underline;}


 .container_jmp {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .img-container_jmp {
    flex: 0 0 calc(33.33% - 20px);
    margin: 10px;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
  }

  .img-container_jmp img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }

  @media screen and (max-width: 768px) {
    .img-container_jmp {
      flex: 0 0 100%;
    }
  }
.photo-container-jmp {
    flex: 0 0 calc(25% - 20px);
    margin: 10px;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
  }
  .photo-jmp {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }

  .photo-title-jmp {
    font-style: italic;
    font-size: smaller;
  }

  @media screen and (max-width: 768px) {
    .photo-container-jmp {
      flex: 50%;
      max-width: 50%;
    }
  }

.image-container-round {
  display: inline-block;
  border-radius: 50%;
  border: 4px solid gray;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  width: 100%; /* ajustez la largeur selon vos besoins */
  height: 100%; /* ajustez la hauteur selon vos besoins */
}

.image-container-round img {
  display: block;
  width: 60%;
  height: 60%;
  object-fit: cover; /* pour s'assurer que l'image remplit complètement le cadre */
}

.banner-container_jmp {
    position: relative;
    display: flex;
    align-items: center;  /* Centre le contenu en flex verticalement */
    justify-content: flex-end;  /* Aligne le contenu en flex à droite */
    text-align: right;
    border-radius: 10px;
    background-size: cover;
    padding: 20px;
    font-size: 20px;
    width: 85%;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
    .banner-container_jmp {
        width: 100%;
        font-size: 18px;
    }
}

.banner-text-container {
    position: relative;
    max-width: 40%; 
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 10px;
    color: white;
    z-index: 1; /* Positionne le texte par-dessus le lien de la bannière complète */
}

.banner-text-container a {
    color: inherit;
    text-decoration: none;
}

.full-banner-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Positionne le lien sous le texte */
}

.list-group-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 5px;
    transition: all 0.2s ease-in-out;
}

.list-group-item:nth-child(odd) {
    background-color: #f7f7f7;
}

.list-group-item:nth-child(even) {
    background-color: #ebebeb;
}
.list-group-item h3.mb-0 {
    font-size: 1.1em; /* Ajustez cette valeur selon vos préférences */
}
.list-group-item h3 {
    font-weight: 500; /* Rend la police plus audacieuse */
    color: #003366; /* Change la couleur à bleu foncé */
    font-size: 1.20em; /* Ajuste la taille de la police, augmentez ou diminuez cette valeur selon vos préférences */
}

/* Couleur de texte en bleu foncé pour les liens dans .list-title */
.list-group-item a {
    color: #003366; /* bleu foncé */
    text-decoration: none; /* Supprime le soulignement */
}

/* Pour ajouter un effet lorsque vous survolez le lien, s'il vous plaît ajouter le code ci-dessous */
.list-group-item a:hover {
    text-decoration: underline; /* Souligne le lien lors du survol */
}

.list-title {
    font-size: 1.00em; /* Taille du texte */
   
    border-radius: 20px; /* Coins arrondis */
    margin-bottom: 5px; /* Espace entre les éléments de la liste */
    padding: 5px; /* Espacement interne pour chaque élément */
}

/* Alternance des couleurs de fond pour les éléments de la liste avec .list-title */
.list-title:nth-child(odd) {
    background-color: #f7f7f7; /* Un gris légèrement plus foncé pour plus de contraste */
}

.list-title:nth-child(even) {
    background-color: #e7e7e7; /* Un gris encore plus foncé pour alterner */
}

/* Couleur de texte en bleu foncé pour les liens dans .list-title */
.list-title a {
    color: #003366; /* Bleu foncé */
    text-decoration: none; /* Supprime le soulignement */
}

/* Pour ajouter un effet lorsque vous survolez le lien, s'il vous plaît ajouter le code ci-dessous */
.list-title a:hover {
    text-decoration: underline; /* Souligne le lien lors du survol */
}


.result__image.me-3 img {
    max-width: 250px; /* Largeur maximale de l'image */
    border-radius: 10px; /* Bords arrondis de l'image */
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* Ombre légère */
}
/* Media query pour les smartphones */
@media screen and (max-width: 600px) { 
    .result__image.me-3 img {
        max-width: 150px; /* Largeur maximale de l'image réduite pour les smartphones */
    }
}

@media screen and (max-width: 600px) {
    .result__description {
        font-size: 60%;
    }
    .result__taxonomy {
        font-size: 65%;
         line-height: 0.2em;
        margin-bottom: 5px; 
    }
}

.video-chapters {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin: 20px;
    overflow: hidden;
}

.video-responsive {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* Aspect ratio 16:9 */
    border-radius: 10px; /* Bords arrondis */
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Ombre */
    margin: 0px; /* Espacement autour du cadre */
}



.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.chapter-list {
    background-color: #fff; 
    padding: 15px;
}

@media (max-width: 768px) {
    .hidden-on-smartphone {
        display: none;
    }
}

/* Mobile : on enlève l'habillage, on garde la vidéo */
@media (max-width: 767px) {
  .tv-frame {
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
  }

 /* .control-panel,
  .marquee {
    display: none !important;
  }  */

  /* Optionnel : si tu veux simplifier aussi le texte */
  /* .container-tv-text { display:none !important; } */
}

/* Tablet + Desktop : habillage normal */
@media (min-width: 768px) {
  .control-panel { display: block; }
}

/* Styles pour le cadre de la télévision, qui est purement décoratif */
.tv-frame {
    border: solid 3px #333333; /* Bordure solide pour un look classique */
    padding: 3px; /* Espace intérieur pour le contenu ou la décoration */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); /* Ombre pour un effet de profondeur */
    border-radius: 25px; /* Coins arrondis pour adoucir l'aspect général */
margin-bottom: -30px;
    background-size: cover; /* Couvre entièrement l'espace disponible */
    color: #e0e0e0; /* Couleur de texte pour un contraste optimal sur l'image sombre */
}

/* Styles pour le cadre de la vidéo qui contient l'élément <video> ou <iframe> */
.video-frame {
    border: solid 4px #333; /* Bordure sombre pour démarquer la vidéo */
    border-radius: 10px; /* Coins légèrement arrondis pour un effet moderne */
    margin-top: 0px; /* Pas d'espace au-dessus pour coller au contenu au-dessus si nécessaire */
    margin-bottom: 30px; /* Espacement au-dessous pour séparation du contenu suivant */
}

.tv-banner{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.12);
}

/* gradient */
.tv-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
      to right,
      rgba(0,0,0,0) 50%,
      rgba(0,0,0,0.8) 100%
  );
  pointer-events: none;
}

/* texte */
.tv-banner h5{
  position: relative;
  z-index: 1;
}

@media (max-width: 768px){
 .tv-banner{ display: none; }
}

/* Container spécifique pour les blocs de texte sous la vidéo de style TV */
.container-tv-text {
    text-align: center; /* Centre tous les éléments enfants inline ou inline-block */
    font-size: small;
}

/* Styles pour les blocs de texte sous la vidéo */
.tv-text-box, .tv-text-box-black {
    display: inline-block; /* Maintient la largeur selon le contenu et permet le centrage */
    max-width: 80%; /* Limite la largeur maximale */
    background-color: black; /* Couleur de fond noire par défaut */
    color: white; /* Couleur de texte blanche */
    border-radius: 15px; /* Coins arrondis pour l'esthétique */
    padding: 0px 8px; /* Espacement interne */
    box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.2); /* Ombre pour effet de profondeur */
    margin: 0px auto 0px; /* Marge pour l'espacement et le centrage horizontal */
    width: auto; /* Largeur dépendante du contenu */

}

.tv-text-box {
    background-color: white; /* Fond blanc spécifique pour la boîte de texte par défaut */
    color: black; /* Couleur de texte noire */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); /* Ombre pour le contraste */
}
@media (max-width: 768px){
 .tv-text-box, .tv-text-box-black { display: none; }
}

.MonumentLinks {
    border-radius: 20px;
    box-shadow: 3px 3px 5px grey;
    padding: 3px;
    margin: 3px;
    margin-bottom: 10px;
}

.MonumentLinks h5, .MonumentLinks h4 {
    text-align: center;
    background-color: #f5f5f5; /* Consistent background for h5 */
    margin: 0; /* Remove default margin for heading tags */
    padding: 5px 0; /* Padding for some spacing around the text */
    font-size: 1em; /* Ensure size consistency */
}

.MonumentLinks h4 {
    background-color: #555; /* Lighter grey background */
    color: white; /* White text */
    font-weight: bold; /* Bolder than h5 */
    padding: 10px 20px; /* More internal space */
    margin: 10px auto; /* Centered margin */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 2px 2px 4px #444; /* Adding shadow */
}

.MonumentLinks h6 {
    text-align: left;
    background: none; /* No background for h6 elements */
    margin: 0; /* Consistent with other tags */
    padding: 5px 0; /* Padding for some spacing around the text */
}

.MonumentLinks a {
    text-decoration: none;
    color: #365899;
}

.MonumentLinks a:hover {
    text-decoration: underline; /* Underline on hover */
    color: #004999; /* Darken the color on hover */
}

.MonumentLinks ul {
    list-style-type: none; /* Remove default list styling */
    padding: 0;
}

.MonumentLinks ul li {
    font-size: 0.9em; /* Adjust the font size to be slightly smaller */
    line-height: 1.2em; /* Adjust line height for readability */
    margin-bottom: 0.3em; /* Space between list items */
}

/* Specific styles for links within list items */
.MonumentLinks ul li a {
    text-decoration: none; /* Remove underline from links */
    color: #365899; /* Ensure links have the correct color */
}

/* Hover effect for links within list items only */
.MonumentLinks ul li a:hover {
    text-decoration: underline; /* Underline links on hover for clarity */
    color: #004999; /* Darken the link color on hover */
}

/* Ensure hover effect for links in h6 */
.MonumentLinks h6 a {
    text-decoration: none; /* Ensure no underline by default */
    color: #365899; /* Same color as other links */
}

.MonumentLinks h6 a:hover {
    text-decoration: underline !important; /* Force underline on hover */
    color: #004999; /* Darken the color on hover */
}

/* Styles for list items without links */
.MonumentLinks ul li:not(:has(a)) {
    color: #555555; /* Dark gray color */
    text-decoration: none; /* No underline */
}

/* Ensure no underline on hover for list items without links */
.MonumentLinks ul li:not(:has(a)):hover {
    text-decoration: none; /* No underline on hover */
    color: #555555; /* Maintain dark gray color */
}

#copyright-music {
    font-size: 0.8rem; /* Police plus petite */
    background-color: #f9f9f9; /* Couleur de fond légère */
    border-radius: 8px; /* Bords arrondis */
    padding: 10px; /* Espacement à l'intérieur du cadre */
    margin-top: 20px; /* Marge au-dessus pour séparer du contenu principal */
    color: #333; /* Couleur de texte discrète */
    max-width: 90%; /* Largeur maximale de la section */
    margin-left: auto; /* Centrage horizontal */
    margin-right: auto; /* Centrage horizontal */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombre subtile pour la profondeur */
}

#copyright-music ul {
    list-style-type: none; /* Pas de puces */
    padding-left: 20px; /* Un peu de padding pour aligner avec le texte */
    margin-top: 10px; /* Espacement après le titre 'Musique:' */
}

#copyright-music ul li {
    margin-bottom: 5px; /* Espacement entre les éléments de la liste */
}

#copyright-music p {
    margin-bottom: 10px; /* Espacement entre les paragraphes */
    line-height: 1.4; /* Hauteur de ligne pour améliorer la lisibilité */
}





/* Styles pour le panneau de contrôle, une décoration supplémentaire */
.control-panel {
    position: relative; /* Positionnement absolu par rapport au cadre parent */
    bottom: 0; /* Aligné au bas du cadre parent */
    left: 0; /* À gauche du cadre parent */
    right: 0; /* À droite du cadre parent */
    height: 50px; /* Hauteur fixe pour le panneau */
    background-color: #333333; /* Couleur identique au cadre pour un look unifié */
    text-align: center; /* Texte centré horizontalement */
    padding-top: 5px; /* Petite marge intérieure en haut pour le texte */
    border-top: 3px solid grey; /* Ligne blanche au-dessus pour un détail visuel */
    margin-bottom: 0px;
}

@media (max-width: 767px){

  .control-panel{
    height: auto !important;
    padding: 6px 10px !important;
  }

  .marquee{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .control-panel h6{
    font-size: 12px !important;
    line-height: 1.35;
    margin: 0;
  }

}

/* Styles pour le texte à l'intérieur d'une boîte dans le cadre ou à proximité */
.text-box {
    display: inline-block; /* Bloc en ligne pour ajustement du texte */
    background-color: white; /* Fond blanc pour lisibilité maximale */
    border-radius: 15px; /* Bords très arrondis pour un style doux */
    padding: 10px 20px; /* Espace intérieur suffisant pour le confort visuel */
margin-bottom: 25px;


    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); /* Légère ombre pour un effet de relief */
    color: black; /* Texte noir pour contraste avec le fond blanc */
    font-size: 0.9em; /* Taille de police modérée pour la lisibilité */
}


.desktop-view {
  display: block;
  margin-bottom: 20px;
}
.mobile-view {
  display: none;
}

/* Media queries pour les petits écrans, typiquement mobiles */
@media (max-width: 767px) {
  .desktop-view {
    display: none; /* Cache le contenu pour ordinateurs de bureau sur mobile */
  }
  .mobile-view {
    display: block; /* Affiche le contenu pour mobiles sur mobile */
  }
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%); /* Le texte commence juste en dehors de la vue à droite */
    }
    100% {
        transform: translateX(-100%); /* Le texte se déplace vers la gauche jusqu'à ce qu'il quitte complètement la vue */
    }
}

.marquee, .marquee h6 {
   display: block;
white-space: nowrap; /* Empêche le texte de passer à la ligne suivante */
  overflow: hidden;  /* Cache les parties du texte qui débordent du conteneur */
    color: white; /* Couleur du texte en blanc */
    font-size: 16px; /* Réduit la taille des caractères, ajustez selon vos besoins */
 width: 100%;  /* Largeur augmentée pour permettre au texte de s'étendre */
 animation: scroll-left 80s linear infinite; /* Répète l'animation indéfiniment */
    animation-delay: 0s; /* Aucun délai avant le début de l'animation */
}

/* Styles pour les liens popover */
a.hasPopover {
    color: #008080; /* Couleur différente pour les popovers */
    position: relative; /* Pour positionner la ligne pointillée */
    text-decoration: underline; /* Souligné */
}

/* Styles pour les liens popover */
a.hasPopover {
    color: #008080; /* Couleur orange pour les popovers */
    text-decoration: underline dotted; /* Souligné en pointillé */
}

/* Styles pour les liens popover */
a.hasPopover {
    color: #008080; /* Couleur teal pour les popovers */
    text-decoration: underline dotted; /* Souligné en pointillé */
}

/* Styles spécifiques pour les popovers dans le glossaire */
.glossary-definition a.hasPopover {
    color:#008080; /* Couleur teal pour les popovers dans les définitions */
    text-decoration: underline dotted; /* Souligné en pointillé */
}
span.mytool a {
  border-bottom: none;
  color:#008080;
  text-decoration: underline dotted; 
}




/* Style des boutons de cartouche */
.button-cartouche {
    background: linear-gradient(145deg, #b0b0b0, #d3d3d3); /* Dégradé gris rappelant la vieille pierre */
    color: black;                /* Couleur du texte */
    border: 2px solid #8b8b8b;   /* Bordure grise rappelant la pierre, pour un cadre intérieur */
    padding: 8px 18px;           /* Espacement intérieur ajusté */
    border-radius: 12px;         /* Bords arrondis */
    text-align: center;          /* Alignement du texte */
    text-decoration: none;       /* Aucune décoration de texte */
    display: inline-block;       /* Alignement approprié du bouton */
    font-size: 16px;             /* Taille de police adéquate */
    cursor: pointer;             /* Curseur en forme de main au survol */
    transition: all 0.3s ease;   /* Transition douce pour les interactions */
    box-shadow: 4px 4px 8px #888888, -4px -4px 8px #ffffff; /* Ombre pour effet en relief */
    position: relative;          /* Nécessaire pour ajuster la position lors du clic */
    margin-bottom: 5px;          /* Ajout d'une marge pour éviter l'effet "écrasé" */
}

.button-cartouche:hover {
    background: linear-gradient(145deg, #d9d9d9, #f0f0f0); /* Dégradé plus clair pour simuler un éclaircissement au survol */
    box-shadow: 3px 3px 6px #888888, -3px -3px 6px #ffffff; /* Réduction de l'ombre pour un effet légèrement pressé */
}

.button-cartouche:active {
    background: linear-gradient(145deg, #a0a0a0, #b0b0b0); /* Couleur plus sombre lors du clic */
    box-shadow: 2px 2px 4px #888888, -2px -2px 4px #ffffff; /* Ombre réduite au maximum pour l'effet de pression */
    top: 1px;                    /* Déplacement vers le bas pour simuler l'enfoncement */
}

h3 {
    font-size: 2em;
    font-weight: 700;
    color: #222;
    background: #f7f7f7; /* Fond gris clair pour mieux ressortir */
    padding: 12px 15px; /* Espacement intérieur */
    border-right: 5px solid #999;
    border-bottom: 3px solid #bbb;
    padding-bottom: 8px;
    margin-top: 40px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}

h4 {
    font-size: 1.2em; /* Taille réduite */
    font-weight: 500; /* Moins marqué que <h3> */
    color: #555;
    background: transparent;
    margin-left: 20px; /* Décalage visible vers la droite */
    border-right: 2px solid #aaa; /* Bordure plus fine */
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-top: 30px;
    margin-bottom: 12px;
    border-radius: 5px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);
}

h3.mb-0 {
    font-size: inherit; /* Taille de police héritée ou spécifique */
    font-weight: normal; /* Poids normal de la police */
    color: inherit; /* Couleur héritée ou spécifique */
    background: none; /* Pas de fond */
    padding: 0; /* Pas d'espacement intérieur */
    border: none; /* Pas de bordures */
    margin-top: 0; /* Pas de marge supérieure */
    margin-bottom: 0; /* Pas de marge inférieure */
    border-radius: 0; /* Pas de coins arrondis */
    box-shadow: none; /* Pas d'ombre */
}

.dynasty-entry {
  display: flex;
  align-items: center;
  padding: 0;
  margin-bottom: 0;
}

.dynasty-link {
  text-decoration: none;
  color: #365899;
}

.dynasty-map {
  width: auto;
  height: 60px; /* Assurez-vous qu'il n'y ait pas d'espace entre le nombre et 'px' */
  margin-right: 5px;
}

.dynasty-title h6 {
  font-size: 1.1em; /* Taille de la police pour le titre, ajustez selon vos besoins */
}

/* Ajoutez cette règle si vous souhaitez séparer visuellement chaque entrée */
.dynasty-entry + .dynasty-entry {
  border-top: 1px solid #ccc; /* Style de séparation entre les éléments */
  padding-top: 10px;
}

.elegant-button {
  font-family: 'Raleway', sans-serif !important;
  font-size: 16px !important;
  padding: 12px 28px !important;
  color: #111 !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 30px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease-in-out !important;
  text-decoration: none !important;
  display: block !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
}

.elegant-button:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #000 !important;
  border-color: rgba(0, 0, 0, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-2px) !important;
  cursor: pointer !important;
}

/* Style harmonisé pour le bouton Convert Forms */
.convertforms .cf-btn {
  background-color: #66707a;     /* Gris doux */
  color: #ffffff;                /* Texte blanc */
  border: 1px solid #495057;     /* Bordure plus foncée */
  border-radius: 8px;            /* Coins arrondis */
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Effet au survol */
.convertforms .cf-btn:hover {
  background-color: #58616a;
  border-color: #3d4349;
  cursor: pointer;
}

/* Optionnel : pour réduire l'effet de "rebond" visuel */
.convertforms .cf-spinner-container {
  display: none !important;
}

/* ============================================= */
/* STYLE UNIFIÉ DU BANDEAU DE CONSENTEMENT GDPR */
/* travel-video.info — 2025 */
/* ============================================= */

/* Appliquer un encadré clair et homogène à tout le bandeau */
.cc-window {
  background-color: #f9f9f9 !important;
  border: 1px solid #ccc !important;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  padding: 20px !important;
  max-width: 700px;
  margin: 0 auto;
  font-family: inherit !important;
}

/* Supprimer les anciens styles superposés */
.cc-banner,
.cc-message {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Conserver le titre et le styliser */
.cc-header {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 12px;
  text-align: center;
  color: #000 !important;
}

/* Zone du message personnalisé */
.cc-message-text {
  text-align: center;
  margin-bottom: 16px;
}

/* Logo Travel-Video */
.cc-message-text img {
  display: block;
  margin: 0 auto 12px auto;
  max-width: 90px;
  height: auto;
}

/* Paragraphe du message */
.cc-message-text p {
  margin: 0 auto;
  display: inline-block;
  text-align: left;
  max-width: 480px;
  font-size: 1.05em;
  line-height: 1.6;
  color: #000;
}

/* Boutons */
.cc-compliance {
  text-align: center;
  margin-top: 10px;
}

.cc-compliance .cc-btn {
  font-size: 0.95em;
  padding: 8px 14px;
  margin: 6px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.cc-btn.cc-allow {
  background-color: #50b848;
  color: #fff;
}

.cc-btn.cc-allowall {
  background-color: #0a7c2f;
  color: #fff;
}

.cc-btn.cc-deny {
  background-color: #e74c3c;
  color: #fff;
}

.cc-btn:hover {
  opacity: 0.9;
}

/* Réglages (checkboxes) */
.cc-checkboxes-container {
  margin-top: 16px;
  border-top: 1px solid #ddd;
  padding-top: 10px;
  text-align: left;
}

/* Texte des réglages */
.cc-cookie-checkbox label,
.cc-cookie-checkbox {
  color: #000 !important;
  font-size: 1em;
}

/* Application globale de couleur et taille */
.cc-window,
.cc-window * {
  color: #000 !important;
  font-size: 1.05em !important;
  line-height: 1.3 !important;
}

.bloc-encadre-centre {
  max-width: 850px;
  margin: 2rem auto;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(to bottom, #f7f7f7 0%, #fcfcfc 100%);
  border-left: 5px solid #aaa;
  border-right: 1px solid #ddd;
  box-shadow: inset 0 5px 5px -5px rgba(0,0,0,0.07), inset 0 -5px 5px -5px rgba(0,0,0,0.07), 0 0 3px rgba(0,0,0,0.02);
  font-size: 0.95em;
  line-height: 1.4;
}

/* Cartes dynasties-régions : filet droit + ombre au survol */
.mini-map-link img {
  border:1px solid transparent;
  border-right-color:#e5e7eb;
  border-radius:8px;
  transition:border-color .2s, box-shadow .2s;
}
.mini-map-link:hover img {
  border-color:#e5e7eb;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.dynasty-grid {
  display: grid;
  grid-template-columns: auto 1fr; /* carte à gauche, texte à droite */
  column-gap: 1rem;                /* espace entre colonnes */
  align-items: start;              /* alignement vertical en haut */
  margin: 1rem 0;                  /* espace autour du bloc */
}

.dynasty-grid .map {
  grid-row: 1 / span 2;             /* la carte occupe la hauteur de tout le texte */
}

.dynasty-grid .text hr {
  border: 0;
  border-top: 1px solid #e5e7eb;    /* filet horizontal discret */
  margin: .5rem 0;
}

.dynasty-grid .text {
  color: #444;                      /* couleur texte */
}

.dynasty-grid .text strong {
  font-weight: 600;                 /* met en valeur les titres de ligne */
}

/* Responsive : tout s'empile sous 640px */
@media (max-width: 640px) {
  .dynasty-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;  /* carte puis texte */
  }
  .dynasty-grid .map {
    grid-row: 1;
  }
}

/* === CONTENEUR BAR (aligne à gauche) === */
.bouton-bar{display:flex;justify-content:flex-start;margin:0 0 1rem 0;padding:0}

/* === BOUTON "LISTE" (solide, avec flèche animée) === */
.bouton-bar a.bouton-liste{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;border-radius:.5rem;
  background:#f8f8f8;color:#333 !important;
  text-decoration:none !important;
  font-size:1rem;font-weight:500;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease
}
.bouton-bar a.bouton-liste:hover{
  background:#eee;transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(0,0,0,.18)
}
/* flèche animée */
.bouton-bar a.bouton-liste.bouton-fleche::after{
  content:" \2192";display:inline-block;opacity:.85; /* → */
  transition:transform .25s ease
}
.bouton-bar a.bouton-liste.bouton-fleche:hover::after{transform:translateX(6px)}

/* === BOUTONS INLINE (compacts, dans le flux) === */
a.bouton-inline{
  display:inline-block;margin:.3rem .4rem .3rem 0;
  padding:.35rem .7rem;border-radius:.5rem;
  background:#f8f8f8;color:#333 !important;
  text-decoration:none !important;
  font-size:.95rem;font-weight:500;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:transform .12s ease,background-color .12s ease,box-shadow .12s ease
}
a.bouton-inline:hover{
  background:#eee;transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(0,0,0,.18)
}

/* Réduction générale (desktop + mobile) */
.com-content.view-article .sppb-section {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Première section plus serrée */
.com-content.view-article .sppb-section:first-of-type {
  padding-top: 10px !important;
}

/* Supprime marges des rows/colonnes */
.com-content.view-article .sppb-row,
.com-content.view-article .sppb-column {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ✅ Version mobile spécifique */
@media (max-width: 768px) {
  .com-content.view-article .sppb-section {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .com-content.view-article .sppb-section:first-of-type {
    padding-top: 5px !important;
  }
}

/* --- Patrimoine > corps de carte (MonumentLinks) — v5 --- */

/* Le cadre principal clippe absolument tout (coins arrondis inclus) */
.MonumentLinks .profile-card{
  position: relative;
  overflow: hidden;            /* <-- empêche l'image de dépasser du cadre */
  border-radius: inherit;      /* hérite de l'arrondi du composant existant */
}

/* Layout 8/4 + gouttière + ligne verticale */
.MonumentLinks .profile-card__body.card-body--split{
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 12px;
}
.MonumentLinks .profile-card__body.card-body--split::before{
  content:"";
  position:absolute;
  left: calc(66.66% + 12px);
  top:0; bottom:0;
  width:1px;
  background: rgba(0,0,0,.12);
  pointer-events:none;
}

/* Colonne texte ≈ 8/12 */
.MonumentLinks .card-text{
  flex:0 0 66.66%;
  min-width:0;
  padding-right:1.25rem;
}
.MonumentLinks .card-text .bouton-bar{ text-align:right; }

/* Colonne image ≈ 4/12 (bouton) */
.MonumentLinks .card-thumb-link{
  flex:0 0 33.33%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  cursor:pointer;              /* indique clairement le clic */
  padding-left:1.25rem;
  box-sizing:border-box;

  /* style bouton sans ombre externe (rien ne dépasse) */
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:6px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

/* Image centrée, contenue, bords nets */
.MonumentLinks .card-thumb-link img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:10px;
  clip-path: inset(0 round 10px);
}

/* Survol CLAIR : s’enfonce + micro-scale + légère lueur interne */
.MonumentLinks .card-thumb-link:hover{
  transform: translateY(3px) scale(0.985);
  filter: saturate(1.05);
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 0 0 2px rgba(0,0,0,.03) inset; /* lueur interne douce, reste dans le cadre */
}

/* Clic (press) un peu plus marqué */
.MonumentLinks .card-thumb-link:active{
  transform: translateY(4px) scale(0.98);
  border-color: rgba(0,0,0,.22);
}

/* Mobile */
@media (max-width: 992px){
  .MonumentLinks .profile-card__body.card-body--split{
    flex-direction:column;
    gap:1rem;
    padding:0;
  }
  .MonumentLinks .profile-card__body.card-body--split::before{ display:none; }
  .MonumentLinks .card-text,
  .MonumentLinks .card-thumb-link{ flex:1 1 100%; padding:0; }
  .MonumentLinks .card-text .bouton-bar{ text-align:left; }
}

/* === Patch: responsivité texte & boutons, en conservant 8/4 fixe === */

/* 8/4 fixe : on garde tes flex-basis 66.66% / 33.33%.
   On autorise juste le shrink interne pour éviter les débordements. */
.MonumentLinks .profile-card__body.card-body--split > *,
.MonumentLinks .card-text { min-width: 0; }

/* Coupures propres (FR/EN/NL) et anti-débordement */
.MonumentLinks .card-text {
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Barre de boutons : retour à la ligne, pas de débordement */
.MonumentLinks .card-text .bouton-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  justify-content: flex-end;   /* aligné à droite en desktop, comme avant */
  margin-top: .35rem;
  min-width: 0;
}

/* Boutons multi-lignes (lisibles) et limités à la colonne */
.MonumentLinks .bouton-bar a,
.MonumentLinks .bouton-liste,
.MonumentLinks .bouton-fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem .8rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  text-decoration: none;
  font-size: clamp(.9rem, .22vw + .84rem, 1rem);
  line-height: 1.25;
  white-space: normal;         /* autorise 2 lignes si nécessaire */
  max-width: 100%;
  overflow: hidden;
}

/* Option : une seule ligne + ellipsis (au cas par cas)
   -> ajoute la classe "bouton-1l" sur .bouton-bar dans TON HTML */
.MonumentLinks .bouton-bar.bouton-1l a,
.MonumentLinks .bouton-bar.bouton-1l .bouton-liste,
.MonumentLinks .bouton-bar.bouton-1l .bouton-fleche {
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Mobile : empilement uniquement sous 992px, image au-dessus, boutons à gauche */
@media (max-width: 992px){
  .MonumentLinks .profile-card__body.card-body--split {
    flex-direction: column;
    gap: 1rem;
    padding: 0;
  }
  .MonumentLinks .profile-card__body.card-body--split::before { display:none; }
  .MonumentLinks .card-text,
  .MonumentLinks .card-thumb-link { flex: 1 1 100%; padding: 0; }
  .MonumentLinks .card-text .bouton-bar { justify-content: flex-start; }
}
/* Indente la 1re ligne du 1er paragraphe pour éviter le rognage visuel */
.MonumentLinks .card-text > p:first-child { text-indent: .6ch; }

/* ===== Galerie de vignettes dans le cadre MonumentLinks ===== */

.MonumentLinks .MonumentLinks-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0; /* pas d'espace transparent */
    padding-bottom: 6px;   /* ajoute un peu d'air sous les vignettes */
}

/* Chaque lien occupe une cellule du grid */
.MonumentLinks .MonumentLinks-thumbs a.video-thumbnail {
    display: block;
    line-height: 0;
    border-right: 2px solid #e5e5e5;  /* trait vertical */
    border-bottom: 2px solid #e5e5e5; /* trait horizontal */
}

/* Image fluide */
/* Effet au survol sur les vignettes */
.MonumentLinks .MonumentLinks-thumbs a.video-thumbnail:hover img {
  transform: scale(1.025);                  /* micro-zoom */
  filter: saturate(1.1);                    /* légère vivacité */
  
  /* Lueur interne forte + ombre externe légère */
  box-shadow:
      0 0 6px rgba(0,0,0,0.28) inset,       /* lueur interne mieux visible */
      0 2px 5px rgba(0,0,0,0.18);           /* ombre externe douce */
}

/* Transition fluide */

.MonumentLinks .MonumentLinks-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;      /* ← ARRONDIS NETS ET PROPRE */
  overflow: hidden;        /* ← garantit que rien ne dépasse */
  transition: transform .22s ease,
              filter .22s ease,
              box-shadow .22s ease;
}
/* Sur mobile : vignettes un peu plus petites pour permettre 2 colonnes */
@media (max-width: 767.98px) {
  .MonumentLinks .MonumentLinks-thumbs {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}
/* --- Les cartes pays / états occupent deux hauteurs dans la grille --- */
.MonumentLinks .MonumentLinks-thumbs a.thumb-map {
    grid-row: span 2;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 New Accordeon styles  
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* =========================================================
   ACC / ITEMS — V2 clean (sans !important)
   Classes: acc-niveau1, acc-summary, acc-niveau2, item-niveau3, item-etendu
   ========================================================= */

/* =========================
   Niveau 1 : accordéon
   ========================= */
details.acc-niveau1 {
  background: #f5f6f3;
  color: #111827;

  border: 1px solid #cfd5dd;
  border-radius: 16px;

  margin: 4px 0;
  overflow: hidden;

  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.10);
}

/* =========================
   Summary (bandeau)
   ========================= */
details.acc-niveau1 > summary.acc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 7px 12px;
  cursor: pointer;
  user-select: none;

  background: #eef1ea;
  color: #111827;

  border-bottom: 1px solid #d9dee6;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* suppression du marker natif */
details.acc-niveau1 > summary.acc-summary {
  list-style: none;
}
details.acc-niveau1 > summary.acc-summary::-webkit-details-marker {
  display: none;
}

/* chevron */
details.acc-niveau1 > summary.acc-summary::after {
  content:"\25BE"; /* "▾"*/
  color: #4b5563;
  font-size: 18px;
  margin-left: 14px;
  line-height: 1;
}
details.acc-niveau1[open] > summary.acc-summary::after {
    content:"\25BE"; /* "▾"*/
}

/* =========================
   Titre et meta
   ========================= */
summary.acc-summary .acc-title a {
  color: #1f2937;
  text-decoration: none;
  font-weight: 750;
  font-size: 1.15rem;
}
summary.acc-summary .acc-title a:hover {
  text-decoration: underline;
}

summary.acc-summary .acc-meta {
  margin-left: auto;
  color: #6b7280;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* =========================
   Niveau 2 : contenu
   ========================= */
div.acc-niveau2 {
  background: #f9fafb;
  color: #111827;

  padding: 14px 14px 16px;

  border-top: 1px solid #e2e6ed;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* =========================
   Niveau 3 : item / pill
   ========================= */
div.acc-niveau2 a.item-niveau3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  background: #ffffff;
  color: #111827;

  border: 1px solid #dfe4ec;
  border-radius: 14px;

  padding: 9px 12px;
  margin: 6px 2px;

  text-decoration: none;
  line-height: 1.35;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 1px 2px rgba(0, 0, 0, 0.05);
}

.item-niveau3 .tv-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.25em; /* espace maîtrisé entre pays et icône */
}

.item-niveau3 .tv-pays {
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.8;
}

.item-niveau3 .tv-unesco {
  margin-left: 0;        /* supprime l’espace parasite */
  font-size: 0.95em;     /* léger ajustement optique */
}

/* hover */
div.acc-niveau2 a.item-niveau3:hover {
  border-color: #cfd5dd;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 10px 20px rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
}

/* focus clavier */
div.acc-niveau2 a.item-niveau3:focus-visible {
  outline: 2px solid #cfd5dd;
  outline-offset: 2px;
}

/* badge UNESCO */
div.acc-niveau2 a.item-niveau3 .tv-unesco {
  margin-left: 10px;
  opacity: 0.75;
}

/* =========================
   Variante étendue (option)
   ========================= */
div.acc-niveau2 a.item-niveau3.item-etendu {
  padding: 14px 14px;
}
/* Base UNESCO – applicable partout */
a.item-niveau3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Variante avec carte */
a.item-niveau3.item-map {
  justify-content: flex-start;
}

/* Carte dynastie */
a.item-niveau3.item-map .dyn-map {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
  display: block;
}

/* Meta alignée à droite (comme UNESCO) */
a.item-niveau3 .tv-meta {
  margin-left: auto;
  white-space: nowrap;
  color: #6b7280;
  font-weight: 400;
}


/* Compacte les accordéons fermés */
details.acc-niveau1:not([open]) {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

details.acc-niveau1:not([open]) > summary.acc-summary {
  padding: 6px 12px;
}

/* Quand ouvert, on garde ton look premium */
details.acc-niveau1[open] {
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.10);
}

details.acc-niveau1[open] > summary.acc-summary {
  padding: 10px 14px;
}

/* Accordéon niveau 2 vide */

/* Accordéon niveau 2 vide : summary "ALL" -> icône main centrée */
.acc-niveau1.ALL > summary.acc-summary{
  display:flex;
  align-items:center;
}

.acc-niveau1.ALL > summary.acc-summary .acc-title{
  width:100%;
  display:flex;
  align-items:center;
}

/* le <a> vide prend toute la largeur pour permettre le centrage */
.acc-niveau1.ALL > summary.acc-summary .acc-title > a:empty{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:1.4em; /* ajuste si ta barre est plus haute */
}

/* icône centrée, sans décalage */
.acc-niveau1.ALL > summary.acc-summary .acc-title > a:empty::before{
  font: var(--fa-font-solid);
  content:"\f25a"; /* hand-point-right */
  line-height:1;
  opacity:.6;
  font-size:1.2em;
  pointer-events:none;
}

/* =========================================================
   DYNASTY GRID (extended card) — compatible CSS simple
   ========================================================= */

/* ===== Dynastie étendue : carte + texte (style simple) ===== */

.dynasty-grid{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  align-items:start;
}

.dynasty-map{
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.dynasty-map img{
  max-width: 180px;
  height: auto;
  border-radius: 14px;
  display:block;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}

/* header = même “pill” que le reste, mais mieux cadré */
a.item-niveau3.dynasty-head{
  margin: 0;
}

.dynasty-title{
  font-weight: 650;
  min-width: 0;
}

/* séparation discrète */
hr.dynasty-sep{
  border: 0;
  border-top: 1px solid rgba(0,0,0,.12);
  margin: 10px 2px;
}

/* lignes texte */
.dynasty-line{
  margin: 6px 0 0 0;
  font-size: .95em;
  line-height: 1.25;
}

.dynasty-states{
  margin: 8px 0 0 0;
  text-align:center;
  font-size: .95em;
  font-style: italic;
}

/* mobile */
@media (max-width: 640px){
  .dynasty-grid{
    grid-template-columns: 1fr;
  }
  .dynasty-map img{
    max-width: 220px;
  }
}
/* =========================================================
   DYNASTY — FICHE ETENDUE (UNIQUE / CLEAN)
   Structure attendue:
   <div class="dynasty-grid">
     <div class="map"><a>...img...</a></div>
     <div class="text">
       <div class="dyn-head">
         <span class="dyn-title">...</span>
         <span class="dyn-meta">...</span>
       </div>
       <div class="dyn-body">
         <p class="dyn-rel">...</p>
         <p class="dyn-rel">...</p>
         <p class="dyn-states">...</p>
       </div>
     </div>
   </div>
   ========================================================= */

.dynasty-grid{
  display:grid;
  grid-template-columns: 190px 1fr;
  gap: 14px;
  align-items:start;

  padding: 12px;
  border-radius: 16px;

  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

.dynasty-grid .map{
  justify-self:start;
  align-self:start;
}

.dynasty-grid .map a,
.dynasty-grid .map img{
  display:block;
  max-width:100%;
  height:auto;
}

.dynasty-grid .text{
  min-width:0;
}

/* header “neutre” (pas un lien) */
.dynasty-grid .dyn-head{
  display:flex;
  align-items:baseline;
  gap: 12px;

  padding: 8px 10px;
  border-radius: 999px;

  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.dynasty-grid .dyn-title{
  font-weight: 650;
  font-size: 1.02rem;
  color: #111827;
}

.dynasty-grid .dyn-meta{
  margin-left:auto;
  white-space: nowrap;
  font-size: .92rem;
  color:#6b7280;
}

/* corps: pas de barres, texte plus fin */
.dynasty-grid .dyn-body{
  padding: 8px 2px 0;
}

.dynasty-grid p.dyn-rel{
  margin: 8px 0 0 0;
  font-size: .90rem;
  line-height: 1.28;
  color: #374151;
}

.dynasty-grid p.dyn-states{
  margin: 10px 0 0 0;
  text-align:center;
  font-size: .84rem;
  font-style: italic;
  color:#6b7280;
}

/* =========================================================
   DYNASTY GRID — MOBILE (empilement strict + typographie plus fine)
   REMPLACE l'ancien bloc @media max-width: 640px
   ========================================================= */
@media (max-width: 640px){

  .dynasty-grid{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .dynasty-grid .map{
    justify-self: center;
  }

  .dynasty-grid .map img{
    display:block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
  }

  .dynasty-grid .text{
    margin-top: 4px;
  }

  /* header compact: UNE ligne */
  .dynasty-grid .dyn-head{
    flex-wrap: nowrap;
    padding: 7px 10px;
    gap: 10px;
  }

  .dynasty-grid .dyn-title{
    font-size: .98rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dynasty-grid .dyn-meta{
    margin-left: auto;
    white-space: nowrap;
    font-size: .86rem;
  }

  .dynasty-grid p.dyn-rel{
    font-size: .86rem;
    line-height: 1.22;
  }

  .dynasty-grid p.dyn-states{
    font-size: .80rem;
    line-height: 1.20;
  }
}

/* =========================================================
   LISTE-CATEG (Joomla com_content category list) — HARD CODED
   Activation: ajouter "liste-categ" dans Page Class (menu item)
   Objectif : pills claires, douces, proches UNESCO
   ========================================================= */

/* Table : neutralisation + espacement */
body.liste-categ .com-content-category__table{
  width: 100%;
  border: 0;
  background: transparent;
  border-collapse: separate;
  border-spacing: 0 .45rem;
  table-layout: fixed;
}

/* Neutralise les fonds/bordures Bootstrap */
body.liste-categ .com-content-category__table,
body.liste-categ .com-content-category__table tbody,
body.liste-categ .com-content-category__table tr,
body.liste-categ .com-content-category__table th,
body.liste-categ .com-content-category__table td{
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Cellules */
body.liste-categ .com-content-category__table th,
body.liste-categ .com-content-category__table td{
  padding: 0;
  vertical-align: middle;
}

/* Le lien = la pill */
body.liste-categ .com-content-category__table th.list-title > a{
  display: block;
  width: 100%;
  box-sizing: border-box;

  padding: .42rem .95rem;
  line-height: 1.2;

  border-radius: 999px;
  border: 1px solid rgba(55, 90, 120, .22);
  background: #f1f5f8;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);

  text-decoration: none;
  color: #2f3a45;
  font-weight: 500;
}

/* Hover doux */
body.liste-categ .com-content-category__table th.list-title > a:hover{
  background: #eaf1f6;
  border-color: rgba(55, 90, 120, .32);
  box-shadow: 0 3px 14px rgba(0,0,0,.08);
  color: #1f2933;
}

/* Texte des autres colonnes (si présentes) */
body.liste-categ .com-content-category__table td{
  color: #6c7680;
  font-size: .95em;
  padding-left: .6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile */
@media (max-width: 640px){
  body.liste-categ .com-content-category__table{
    border-spacing: 0 .35rem;
  }
  body.liste-categ .com-content-category__table th.list-title > a{
    padding: .38rem .85rem;
  }
}

/* --- Profil monument : boutons ultra compacts (mobile only) --- */
/* --- NAV Profil monument : caché par défaut (desktop) --- */
.tv-profil-nav{display:none}

/* --- Mobile only --- */
@media (max-width: 768px){

  /* conteneur : très compact */
  .tv-profil-nav{
    display:flex;
    justify-content:center;   /* ou flex-start */
    gap:.45rem;
    margin:0.15rem 0 0.25rem; /* réduit l'espace */
    padding:0;
    line-height:1;
  }

  /* boutons : look bouton discret mais évident */
  .tv-profil-nav .tv-profil-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0.18rem 0.55rem;   /* compact */
    border-radius:0.45rem;

    background:#f3f3f3;
    border:1px solid rgba(0,0,0,.12);
    box-shadow:0 1px 2px rgba(0,0,0,.10);

    color:#333 !important;
    text-decoration:none !important;

    font-size:0.82rem;
    font-weight:600;

    cursor:pointer;
    user-select:none;

    opacity:.95;
    transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease;
  }

  .tv-profil-nav .tv-profil-btn:hover{
    background:#eee;
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(0,0,0,.14);
  }

  /* option : petit indicateur "cliquable" sans flèche énorme */
  .tv-profil-nav .tv-profil-btn::after{
    content:"›";
    font-weight:700;
    margin-left:.35rem;
    opacity:.6;
  }
}
@media (max-width: 768px){

  .tv-profil-nav::before{
    content:"";
    display:block;
    width:100%;
    height:1px;
    background:rgba(0,0,0,.12);
    margin:0.35rem 0 0.25rem; /* espace très contrôlé */
  }

}
@media (max-width: 768px) {
    #colonne-2 { scroll-margin-top: 90px; }
}