/* ==========================================
  CENTRALISATION DES PARAMÈTRES (Thème)
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
:root {
    --text-default: #454441;     /* Couleur du texte par défaut */
    --text-inverted: #ffffff;    /* Couleur du texte sur fond sombre */
    --text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /*police du texte*/
    --link-default: #58756a ;     /*couleur de lien par défaut*/
    --link-hover: #6f9284 ;     /*couleur de survol par défaut*/
    --title-main: #7b5b45;       /*couleur titre principal*/ 
    --title-second: #58756a;     /*couleur titre principal*/ 
    --title-bold: 700;           /*Gras des titres*/
    --title-font: "Roboto Slab", serif; /*police des titres*/
    --menu-bold: 600;            /*gras du menu*/
  
    --bg-default: #ffffff;       /* Couleur de fond par défaut */
    --bg-spec-light: #f6f3ec;       /* Couleur de fond spécifique */
    --bg-spec-medium: #7b5b45;       /* Couleur de fond spécifique2 */
    --bg-spec-dark: #58756a;         /* Couleur de fond spécifique3 */
    --bg-default-grey: #f6f3ec; /*#f8f8f8;*/     /* Couleur de fond par défaut gris */
    --border-default: #e4e4e4;   /* Couleur de la bordure */
    --border-hr: #e4e4e4;   /* Couleur de la bordure */
    
    --btn-text-normal: #ffffff; 
    --btn-bg-normal: #7b5b45; 
    --btn-border-normal: #7b5b45; 
    --btn-text-hover: #ffffff;       /* Texte au survol */
    --btn-bg-hover: #6f9284;         /* Couleur de fond au survol  */
    --btn-border-hover: #6f9284 ;     /* Bordure au survol */
    
    --btn-radius: 0.3rem;              /* Arrondi des boutons (0 pour carré) */
    --btn-padding: 0.5rem 1rem;        /* Espacement interne (Hauteur Largeur) */
    --btn-margin: 0rem 0.5rem;        /* Espacement externe (Hauteur Largeur) */
    --btn-font-weight: 600;          /* Épaisseur du texte */
    
    --nav-link-color: #ffffff;      /* Couleur du texte de lien menu/bouton */
  
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap" rel="stylesheet">

header.header {background-color : var(--bg-spec-dark) !important; }
.container-header .mod-menu .metismenu-item {color: var(--text-default); }

header.container-header {background-color: var(--bg-spec-dark); background-image:none; 
    box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.3) !important; /* Ombre douce et élégante */
    z-index: 100 !important; /* Assure que l'ombre reste au-dessus du contenu */
    position: relative !important; /* Nécessaire pour que le z-index fonctionne */ }

.container-header .navbar-brand {margin:auto; padding:0px !important;}

body {text-align:left; color: var(--text-default)}
body {
    font-family: var(--text-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color:var(--bg-spec-light);
    /*background-image:url('../../../../../images/fond.png');*/
}
a {color: var(--link-default);} 
a:visited {color: var(--link-default);}
a:hover, a:focus {
    color: var(--link-hover);
}

/*-----------Titres modules--------------*/

.card-header {background-color:var(--bg-spec-dark); color:var(--text-inverted)}

/*--------------menu principal-------------*/
/* On cible la classe que vous avez ajoutée */
.footer-horizontal {
    display: flex !important;
    flex-direction: row !important; /* Force l'alignement horizontal */
    flex-wrap: wrap !important;
    gap: 1.2rem !important; /* Espace entre les liens */
    padding: 0;
    list-style: none;
}
/* On s'assure que les puces ne reviennent pas */
.footer-horizontal li {
    display: inline-block !important;
    margin: 0;
}

/* Supprime le soulignement par défaut sur les liens du premier niveau */
.mod-menu > li.level-1 > a  {
    text-decoration: none; !important;
    color: var(--nav-link-color); !important;
    font-size:smaller;  
    text-transform: uppercase;
}

/* Cibler le bouton de bascule (toggler) de MetisMenu et ses icônes */
.metismenu .mm-toggler,
.metismenu .mm-toggler::before,
.metismenu .mm-toggler::after {
    color: var(--nav-link-color) !important;
}

/* Si la flèche est un SVG en image de fond sur le pseudo-élément */
.metismenu .mm-toggler::before,
.metismenu .mm-toggler::after {
    filter: brightness(0) invert(1) !important;
}

/* Mettre en gras uniquement le premier niveau du menu */
[class*="level-1"] > a, 
[class*="level-1"] > button {
  font-family: var(--title-font) !important; 
  font-weight: var(--menu-bold) !important;
}

/* Sécurité : s'assurer que le deuxième niveau (sous-menu) reste en poids normal */
[class*="level-2"] > a,
[class*="level-2"] > button,
[class*="level-1"] li a {
    font-weight: normal !important;
    line-height:1.5; !important;
}

/* Ciblage des éléments de liste et des liens du sous-menu */
.container-header .mod-menu .level-2,
.container-header .mod-menu .level-2 > a,
.container-header .mod-menu .mm-collapse li a {
    line-height: 1.2 !important;       /* Resserre la hauteur de la ligne de texte */
    padding-top: 0.2rem !important;       /* Réduit l'espace interne supérieur (à ajuster) */
    padding-bottom: 0.2rem !important;    /* Réduit l'espace interne inférieur (à ajuster) */
    margin-top: 0 !important;          /* Sécurité contre d'éventuelles marges */
    margin-bottom: 0 !important;
}

/* 1. Survol des liens et boutons du premier niveau */
.container-header .mod-menu .metismenu-item > a:hover,
.container-header .mod-menu .metismenu-item > button:hover,
.container-header nav a:hover {
    color: var(--nav-link-color) !important; /* Remplacez par votre couleur */
    /*text-decoration: none !important; liens non soulignés*/
}

/* 2. Survol des liens du sous-menu (Niveau 2) */
.container-header .mod-menu .mm-collapse a:hover,
.container-header .mod-menu .level-2 a:hover,
.dropdown-menu a:hover {
    color: var(--link-default) !important; /* Couleur au survol pour le deuxième niveau */
    /*text-decoration: none !important; liens non soulignés*/
    background-color: transparent !important; /* Évite un fond gris ou bleu Bootstrap indésirable */
}

/* Changer la couleur du bloc sous-menu complet */
.container-header .mod-menu .mm-collapse,
.container-header .mod-menu .mm-show,
.container-header .mod-menu .dropdown-menu {
    border: 1px solid var(--bg-spec-medium) !important; /* bordure*/
    background-color: var(--bg-spec-light)!important; /* fond*/
    border-radius: 4px !important;       /* Optionnel : arrondit légèrement les angles du cadre */
}

/*------search & contact-------*/

/* État par défaut avec sélecteur renforcé */
body.com_finder div.com-finder form.js-finder-searchform button.btn-primary {
    background-color: var(--bg-spec-medium) !important; /* Le !important est ici une sécurité si Bootstrap force le bouton */
    border-color: var(--text-default) !important;
    color: var(--btn-text-hover) !important;
}

/* État au survol renforcé */
body.com_finder div.com-finder form.js-finder-searchform button.btn-primary:hover,
body.com_finder div.com-finder form.js-finder-searchform button.btn-primary:focus,
body.com_finder div.com-finder form.js-finder-searchform button.btn-primary:active {
    background-color: var(--btn-bg-hover) !important;
    border-color:var(--bg-spec-dark) ;
    color: var(--btn-text-hover) !important;
}

/* Forcer l'affichage de l'image au-dessus du formulaire */
body.com_finder div.com-finder form.js-finder-searchform {
    display: flex !important;
    flex-direction: column !important; /* Force les éléments enfants et pseudo-éléments à s'empiler verticalement */
    align-items: center !important;    /* Centre horizontalement le contenu */
}

body.com_finder div.com-finder form.js-finder-searchform::before {
    content: "" !important;
    display: block !important;
    order: -1 !important;             /* Force l'image à se placer tout en haut, avant la barre */
    width: 583px;                     /* À ajuster selon la largeur souhaitée */
    height: 337px;                    /* À ajuster selon la hauteur souhaitée */
    margin-bottom: 20px !important;   /* Espace entre l'image et la barre de recherche */
    
    /* Gestion de l'image */
    background-image: url('../../../../../images/search.jpg') !important; /* Notez le chemin relatif adapté */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* 1. État par défaut du bouton Envoyer (Formulaire de contact) */
body.com_contact div.com-contact form#contact-form button.btn-primary.validate {
    background-color: var(--text-default) !important; /* Votre couleur de fond (ex: vert mousse) */
    border-color: var(--text-default) !important;     /* Cohérence avec la bordure */
    color: var(--btn-text-hover) !important;            /* Couleur du texte (blanc) */
    font-weight:bold !important; 
    font-size:larger !important;
}

/* 2. État au survol (Hover), focus et clic */
body.com_contact div.com-contact form#contact-form button.btn-primary.validate:hover,
body.com_contact div.com-contact form#contact-form button.btn-primary.validate:focus,
body.com_contact div.com-contact form#contact-form button.btn-primary.validate:active {
    background-color: var(--btn-bg-hover) !important; /* Votre couleur au survol (ex: crème/sable) */
    border-color: var(--bg-spec-dark) !important;
    color: var(--btn-text-hover) !important;            /* Maintien de la couleur du texte */
    font-weight:bold !important; 
    font-size:larger !important;
}

body.com_contact div.com-contact form#contact-form .controls {
    display: flex;
    justify-content: center; /* Centre horizontalement le bouton */
    width: 100%;             /* S'assure que le conteneur prend toute la largeur */
}

/* 1. Configuration du formulaire pour empiler les éléments verticalement */
body.com_contact div.com-contact {
    display: flex !important;
    flex-direction: column !important; /* Force les blocs enfants à s'empiler de haut en bas */
}

}
/* 2. Attribution d'un ordre aux éléments natifs */
body.com_contact div.com-contact h1 {
    order: 1 !important; /* Le titre h1 "Nous contacter" passe en premier */
}

body.com_contact div.com-contact h2 {
    order: 3 !important; /* Le titre h2 "Formulaire de contact" passe en troisième */
}

body.com_contact div.com-contact .com-contact__form {
    order: 4 !important; /* Le bloc du formulaire reste en dernier */
}

/* 3. Injection et positionnement de l'image tout en haut */
body.com_contact div.com-contact::before {
    content: "" !important;
    display: block !important;
    order: 2 !important;              /* Force l'image à se placer en première position, avant les champs */
    
    /* Dimensions de l'image (à ajuster selon vos besoins) */
    width: 100%;                       /* Prend toute la largeur disponible pour le centrage */
    height: 282px;                     /* Hauteur de l'espace réservé à l'image */
    margin-bottom: 30px !important;    /* Espace entre l'image et le début du formulaire */
    
    /* Intégration de la ressource image */
    background-image: url('../../../../../images/write.jpg') !important; /* Chemin relatif vers votre dossier /images */
    background-size: contain !important;   /* L'image s'adapte sans être rognée */
    background-repeat: no-repeat !important;
    background-position: center !important; /* Centre l'image horizontalement */
}

/* Masquer le conteneur de l'icône pour éviter les espaces vides */
body.com_contact dl.dl-horizontal dt {
    display: none !important;
}
/* Masquer le titre Autres informations */
body.com_contact div.com-contact_miscinfo h2,
body.com_contact div.contact-miscinfo h2,
body.com_contact div.com-contact > h2:nth-of-type(2) {
    display: none !important;
}


/*------INDEX-------*/

.article-index {
    float: none !important;      /* On annule tout flottement précédent */
    margin: 0.5rem auto 1rem auto !important; /* Centrage horizontal et petite marge basse */
    background-color: var(--bg-spec-light);
    display: inline-block !important; /* Force le cadre à épouser la largeur du texte */
    min-width: 15rem;                 /* Optionnel : garantit une largeur minimale esthétique */
    width: auto !important;           /* Annule l'éventuel width: 100% hérité */
}
.com-content-article__index,
.article-index-container {
    text-align: center;               /* Centre le bloc s'il est dans un conteneur parent */
}
/* Variante alternative utilisant les marges automatiques (si inline-block ne suffit pas) */
.article-index {
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
}

/* Titre "Index de l'article" plus discret */
.article-index h3, 
.article-index .article-index-header {
    font-size: 1.1rem !important;
    margin-bottom: 5px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    text-align: center;
}
/* Réduction de l'espacement de la liste */
.article-index ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: center; /* Centre les liens dans la liste */
}
/* Réduction de l'espacement entre les lignes de liens */
.article-index ul li {
    margin: 0 !important;
    padding: 0.1rem 0 !important; /* Espacement vertical minimal entre les titres */
    line-height: 1.2 !important; /* Hauteur de ligne resserrée */
    font-size: 0.90rem;
}
/* Style des liens dans l'index */
.article-index ul li a {
    color: var(--link-default);
    text-decoration: none;
}
.article-index ul li a:hover {
    text-decoration: underline;
}
/* Masquer le titre de l'index de l'article */
.article-index h3, 
.article-index .article-index-header {
    display: none !important;
}

/* Espace pour le dernier item de la liste (toutes les pages) */
.article-index li:last-child a {
    margin-top: 0.5rem; /* Ajustez la valeur en pixels selon le rendu souhaité */
    display: inline-block; /* Nécessaire si c'est un lien <a> pour que la marge verticale s'applique */
}

/*-----------Banniere-----------------*/

/*accueil*/
.accueil-section {
    width: 100%; /* Occupe toute la largeur du conteneur top-a */
    
    /* REMPLACER PAR LE RATIO DE VOTRE IMAGE (ex: largeur / hauteur) */
    /* Si votre image fait 1200x400px, le ratio est 3/1 */
    aspect-ratio: 3704 / 1000; 

    background-image: url('../../../../../images/headers/banniere-accueil.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

/* Modification pour l'alignement à gauche */
    display: flex;
    align-items: center; /* Centre le texte verticalement */
    justify-content: flex-start; /* Aligne le bloc de texte à gauche */
    text-align: left; /* Aligne les lignes de texte à gauche */
    
/* Optionnel : ajoutez une marge à gauche pour que le texte ne colle pas au bord */
    padding-left: 2.2rem;

}

p.banniere-cite {font-weight:bold;font-size:1.6rem; color:var(--title-main); font-family:var(--title-font)}
p.banniere-cite2 {margin-top:-0.6rem}
p.banniere-slogan {margin-top:2rem;font-size:1.2rem}

/*--------Page principale--------*/

.container-component {margin-top:1rem}
.container-component>:first-child,
.container-sidebar-left>:first-child,
.container-sidebar-right>:first-child,
.container-component>*+*,
.container-sidebar-left>*+*,
.container-sidebar-right>*+* {margin-top:0px}
.container-top-a > *, .container-top-b > *, .container-bottom-a > *, .container-bottom-b > * {
  flex: 1;
  margin: 0;
}
.container-sidebar-right .sidebar-right:last-child {
  /*margin-top: 0;
  margin-bottom: 0;*/
}
main {background-color:var(--bg-default)  !important; padding: 1rem 2rem; }

/* Le point (.) cible la classe du body, l'espace signifie "cherche le main à l'intérieur" */
body.itemid-101 main {
    /* Écrivez vos styles spécifiques à cette page ici */
    background-color: transparent !important;  padding-top: 0.5rem; padding-bottom: 0.5rem;
}

.mod-articles-category .icon-folder-open::before {color: var(--text-default);}

/* Conserver la même couleur pour les boutons, qu'ils soient visités ou non */
.com-content-category-blog a.btn,
.com-content-category-blog a.btn:visited,
.mod-articles-category a.btn,
.mod-articles-category a.btn:visited {
    color: var(--text-default) !important; /* Force votre couleur par défaut  */
}

/* Conserver également la couleur du texte des titres/liens classiques si nécessaire */
.com-content-category-blog a,
.com-content-category-blog a:visited,
.mod-articles-category a,
.mod-articles-category a:visited {
    color: var(--link-default) !important; /* À adapter avec votre couleur de lien habituelle */
}

/*. État au survol (Hover) et Focus : le texte devient blanc */
.com-content-category-blog a.btn:hover,
.com-content-category-blog a.btn:focus,
.mod-articles-category a.btn:hover,
.mod-articles-category a.btn:focus {
    color: var(--btn-text-hover) !important; /* Force le texte en blanc au survol */
}

/*------------A la une---------------*/
/* 1. On s'assure que le conteneur principal reste un bloc normal (Titre + Liste l'un sous l'autre) */
body.itemid-101 .main-top {
    display: block !important;
    box-shadow: none !important;
}
/* 2. On applique la grille de 2 colonnes UNIQUEMENT à la liste des éléments 
body.itemid-101 .main-top ul.mod-articles-items,
body.itemid-101 .main-top .mod-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; 
    column-gap: 1.8rem;  
    row-gap: 1.4rem; 
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important; 
}*/
/* 3. On force les éléments de liste (chaque article) à occuper 100% de leur colonne */
body.itemid-101 .main-top ul.mod-articles-items > li,
body.itemid-101 .main-top .mod-list > li {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* Uniformisation du menu (header) et du fil d'ariane (breadcrumbs) */
main .header {
    background-color: var(--bg-default) !important; /* Votre code crème */
    background-image: none !important;    /* Supprime d'éventuels dégradés */
    border: none !important;              /* Supprime les bordures parasites */
}
/* On s'assure que le conteneur du fil d'ariane ne rajoute pas de gris */
.breadcrumb {
    background-color:transparent  !important;
    margin-top:0;
}
nav.mod-breadcrumbs__wrapper {background-color: var(--bg-default-grey)}

h1, h2, h3, h4, h5, h6, .site-title {
    font-family: var(--title-font);
    font-weight: var(--title-bold); /* Inter est très élégante en gras (bold) */
    letter-spacing: -0.02em; /* Petit réglage typographique conseillé pour Inter sur les titres */
}

/*-----------------BLOG------------------------*/
/* Suppression du soulignement sur les titres de blog */
.blog-item .item-title a {
    text-decoration: none;
}
/* Optionnel : Ajout d'un effet au survol pour l'ergonomie */
.blog-item .item-title a:hover {
    text-decoration: underline;
}
/* Réduction de l'espace sous l'image */
.blog-item .item-image {
    margin-bottom: 5px; /* Ajustez cette valeur selon votre préférence */
}

/*-----------------PAGE ACTU------------------------*/
/* Force la couleur pour le lien neuf et le lien déjà visité, et supprime le soulignement */
.com-content-category-blog .blog-item .item-content h2 a:link,
.com-content-category-blog .blog-item .item-content h2 a:visited {
    color: var(--link-default) !important;
    text-decoration: none !important;
}

/* Optionnel : Si vous voulez que la couleur reste identique au survol */
.com-content-category-blog .blog-item .item-content h2 a:hover,
.com-content-category-blog .blog-item .item-content h2 a:active {
    color: var(--link-default) !important;
    text-decoration: underline !important;
}

/*---------------FACEBOOK--------/

/* Ajoute un espace de 20px sous chaque module de la barre latérale droite */
.grid-child.container-sidebar-right .card {
    margin-bottom: 1.2rem !important;
}

/* Supprime la marge sur le tout dernier module pour un rendu propre */
.grid-child.container-sidebar-right .card:last-child {
    margin-bottom: 0 !important;
}
/* Style pour le module de fil d'actualité dans la sidebar */
.container-sidebar-right .feed {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container-sidebar-right .feed li {
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-hr); /* Un séparateur discret sous chaque post */
}

.container-sidebar-right .feed li h5 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}
/* Supprime les puces et décale le contenu vers la gauche */
.container-sidebar-right ul.newsfeed {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Optionnel : Ajoute un espace et une séparation propre entre chaque publication */
.container-sidebar-right ul.newsfeed li {
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-hr);
}

/* Supprime la ligne de séparation sur le dernier élément */
.container-sidebar-right ul.newsfeed li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Met le titre en gras et supprime le soulignement */
.container-sidebar-right .feed-link a {
    font-weight: bold !important;
    font-size: 1.1rem;
    text-decoration: none !important; /* Retire le soulignement de base */
}

/* Optionnel : ajoute le soulignement uniquement au survol de la souris */
.container-sidebar-right .feed-link a:hover {
    text-decoration: underline !important;
}

/*-----Séparations----------

actualites-newsfeed.blog-item {
    border-bottom: 1px solid var(--border-default); 
    padding-bottom: 3rem;          
    margin-bottom: 0rem;          
}

actualites-newsfeed.blog-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

actualites-newsfeedul.mod-articles-items > li:not(:last-child) {
    border-bottom: 1px solid var(--border-default); 
    padding-bottom: 1rem;              
    margin-bottom: 1rem;               
}

actualites-newsfeed.mod-articles-item {
    margin-bottom: 0;
}*/

.actualites-newsfeed ul li:not(:last-child) {
    border-bottom: 1px solid var(--border-default); 
    padding-bottom: 1rem;              
    margin-bottom: 1rem;               
}


/*--------------FOOTER-------------------*/
/* Personnalisation du footer */
.footer {
    background-color: var(--bg-spec-dark) !important; /* Remplacez par votre couleur (Hex ou RGB) */
    background-image: none !important;    /* Supprime le dégradé par défaut si présent */
    padding: 1rem 0;                      /* Ajoute un peu d'espace vertical */
}
/* Centrage du contenu (Menu et Texte) */
.footer .grid-child {
    display: flex;
    justify-content: center;
    text-align: center;
    color:#ffffff;
    width: 100%;
}
/* Alignement spécifique du menu horizontal */
.footer ul.mod-menu {
    justify-content: center;
    width: 100%;
}

/* -------------------BOUTONS----------------------- */

/*1. État normal et Visité : texte couleur personnalisée  */
.pagination .page-item .page-link,
.pagination .page-item .page-link:visited,
a.btn-secondary,
a.btn-secondary:link,
.com-content-category-blog a.btn-secondary,
.mod-articles-category a.btn-secondary,
.sidebar-right a.btn-secondary {
    color: var(--btn-text-normal) !important; 
    background-color: var(--btn-bg-normal) !important;
    border-color: var(--btn-border-normal) !important;   
    padding: var(--btn-padding) !important;
    margin: var(--btn-margin) !important;
    border-radius: var(--btn-radius) !important;
    text-decoration: none !important;
}
.pagination .page-item .page-link:visited,
a.btn-secondary:visited,
.com-content-category-blog a.btn-secondary:visited,
.mod-articles-category a.btn-secondary:visited,
.sidebar-right a.btn-secondary:visited {
    color: var(--btn-text-normal) !important; 
    background-color: var(--btn-bg-normal) !important;
}

/* 2. État au survol (Hover) et Focus  */
.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus, 
a.btn-secondary:focus,
a.btn-secondary:link:hover,
a.btn-secondary:visited:hover,
.com-content-category-blog a.btn-secondary:hover,
.mod-articles-category a.btn-secondary:hover,
.sidebar-right a.btn-secondary:hover {
    color: var(--btn-text-hover) !important;           
    background-color: var(--btn-bg-hover) !important; 
    border-color: var(--btn-border-hover) !important;
    padding: var(--btn-padding) !important;
    margin: var(--btn-margin) !important;
    border-radius: var(--btn-radius) !important;
    text-decoration: none !important;
}

/* Centre uniquement le conteneur spécifique du bouton si Joomla l'enveloppe dans une div */
.readmore, .btn-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/*------Bouton haut de page----------*/
/* 1. État normal (Couleurs par défaut du bouton) */
.icon-arrow-up, .back-to-top-link {
    color: var(--title-main);            /* Couleur de la flèche intérieure */
    border-color: var(--btn-border-normal);     /* Couleur de la bordure du carré */
}

/* 2. État au survol (Quand la souris passe dessus) */
.icon-arrow-up:hover, 
.icon-arrow-up:focus,
.back-to-top-link:hover,
.back-to-top-link:focus{
    background-color: var(--btn-bg-hover); /* Le fond devient bleu foncé (par exemple) */
    color: var(--btn-text-hover);            /* La flèche devient blanche */
    border-color: var(--btn-border-hover);     /* La bordure s'adapte */
}

/*-----------Icônes RS-------------------*/

@media (min-width: 768px) {
    /* 1. On s'assure que le conteneur principal sert de repère */
    div.grid-child.container-component {
        position: relative !important;
    }

    /* 2. On propulse le bloc d'icônes à l'extérieur gauche */
    .rs-flottant {
      margin-top: 1rem;
      position: absolute;
      left: -80px; /* Aligne les icônes à l'extérieur gauche. Ajustez selon la largeur de l'image */
      top: 0;       /* Aligne parfaitement le haut avec le début du bloc "A la une" */
      z-index: 10;
      display: flex !important;
      flex-direction: column !important;   /* Bascule l'alignement en vertical */
      align-items: center !important;      /* Centre les icônes verticalement */
      gap: 6px !important;      
    }
}

/* Sécurité pour le mobile : on cache ou on remet dans le flux */
@media (max-width: 767px) {
    .rs-flottant {
        display: block;
        text-align: center;
      margin-bottom: 1rem;
      display: flex !important;
      flex-direction: row !important;      /* Aligne les icônes horizontalement */
      justify-content: center !important;  /* Centre les icônes sur l'écran mobile */
      gap: 10px !important;                /* Espace de 15px entre chaque icône */
    }
}

/*-------------Icônes catégories---------------*/

/* --- 1. Actualités (ID 79) --- */
dd:has(a[href*="/actualites"]) span.icon-folder-open::before {
    content: "\f1ea" !important; /* Journal / News 📰 */
    color: var(--bg-spec-dark) !important;
}
/* --- 2. Studio Ghibli (ID 84) --- */
dd:has(a[href*="/studio"]) span.icon-folder-open::before {
    content: "\f1ad" !important; /* Bâtiment / Studio 🏢 */
    color: var(--bg-spec-dark) !important;
}
/* --- 3. Musée Ghibli (ID 112) --- */
dd:has(a[href*="/musee"]) span.icon-folder-open::before {
    content: "\f66f" !important; /* Monument / Musée 🏛️ */
    color: var(--bg-spec-dark) !important;
}
/* --- 4. Longs métrages (ID 83) --- */
dd:has(a[href*="/longs-metrages"]) span.icon-folder-open::before {
    content: "\f008" !important; /* Bobine de film 🎬 */
    color: var(--bg-spec-dark) !important;
}
/* --- 5. Autres œuvres (ID 116) --- */
dd:has(a[href*="/autres-oeuvres"]) span.icon-folder-open::before {
    content: "\f53f" !important; /* Livres / Œuvres diverses 📚 */
    color: var(--bg-spec-dark) !important;
}
/* --- 6. Fans (ID 121) --- */
dd:has(a[href*="/fans"]) span.icon-folder-open::before {
    content: "\f004" !important; /* Cœur / Communauté ❤️ */
    color: var(--bg-spec-dark) !important;
}
.icon-calendar {
    color: var(--bg-spec-dark) !important;
}
/* 1. Supprimer le chevron fin d'origine */
.readmore .icon-chevron-right::before,
.readmore .fa-chevron-right::before {
    content: "" !important;
}

/* 2. Injecter la nouvelle icône pleine et compacte à la place */
.readmore .icon-chevron-right::after,
.readmore .fa-chevron-right::after {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important; /* Force le style "Solid" (plein) */
    margin-right: 0.6rem; /* Petit espace entre le texte et l'icône */
    vertical-align: middle;
    
    /* CHOISISSEZ VOTRE ICÔNE EN DÉCOCHANT LE CODE ASSOCIE : */
    content: "\f0da" !important; /* Code pour le triangle (fa-caret-right) */
  }

/*-----------------------------------------------------*/

h1{font-size:2,2rem;padding-bottom:1.1rem; padding-top:0.8rem; text-align:center; color:var(--title-main)}
.page-header h1 {font-size:1.8rem;padding-bottom:1rem; padding-top:0.7rem; color:var(--title-main);text-align:left; }
h2{font-size:1.8rem;padding-bottom:1rem; padding-top:0.7rem; color:var(--title-second)}
h2.titres-accueil {font-weight: 300;padding:0;margin:0}
h3{font-size:1.5rem;padding-bottom:0.9rem; padding-top:0.6rem}
h4{font-size:1.3rem;padding-bottom:0.8rem; padding-top:0.5rem}
h5{font-size:1.2rem;padding-bottom:0.7rem; padding-top:0.4rem}
h5.mod-articles-title{font-size:1.2rem;padding-bottom:0.7rem; padding-top:0.4rem;text-align:left}
h5.titre-maj{color:var(--title-main)}
h6{font-size:0.9rem;margin-top:-0.4rem;margin-bottom:0.4rem; padding-bottom:0rem; padding-bottom:1rem; font-weight:normal;text-align:center}
h1 a, h1 a:visited{color: var(--title-main); text-decoration: none;border-bottom: 0;border: none}
h1 a:hover {text-decoration: underline;}
h2 a, h2 a:visited{color: var(--title-second); text-decoration: none;border-bottom: 0;border: none}
h2 a:hover {text-decoration: underline;}
p.image {text-align:center}
img {margin-top:0.6rem; margin-bottom:0.2rem; margin-right:0.2rem; margin-left:0.2rem; border-radius:6px;}
img.icone {padding-bottom:0.4rem; border-radius:0px;}
img.float-left {float:left; margin-right: 10px; margin-top:8px; margin-bottom:4px}
img.float-right {float:right; margin-left: 10px; margin-top:8px; margin-bottom:4px}
hr{margin:1rem 0;border:0;border-top:1px solid var(--border-hr);border-bottom:1px solid;}
hr.foot{margin: 0;border:0;border-top:1px solid var(--border-hr);border-bottom:1px solid;}
th {background-color:var(--bg-spec-light);font-size:1.1rem;padding : 4px 10px ;}
th.donnees {font-weight:bold;text-align:left; width:33%}
th.donnees2 {font-weight:bold;text-align:left;}
th.donnees3 {font-weight:bold;text-align:left;}
th.donnees4 {font-weight:bold;text-align:left;}
table.donnees {margin:auto;width:100%;border-collapse: separate;border-spacing: 1px;}
td {background-color:var(--bg-spec-light);padding: 0.2rem; vertical-align:top;}
td.donnees{padding: 2px 0.6rem;vertical-align: top;width:33%}
td.donnees2{padding: 2px 0.6rem;vertical-align: top}
td.donnees3 {padding: 2px 0.6rem;vertical-align: top}
td.donnees4{padding: 2px 0.6rem;vertical-align: top}
li.puce {display : list-item;margin-left:0.6rem;margin-right:0.6rem;}
div.container-top-b {margin-bottom:0}
div.encadre {margin:0.6rem 0.6rem 0.7rem 0.6rem;padding: 0.6rem 1.2rem ;background-color:var(--bg-spec-light);border-radius:10px;}	
div.tableau {display:table; margin :auto; padding: 1px}
div.cellule {display:table-cell; padding : 0 0.6rem ; width : auto; height:auto; vertical-align:middle}
p.source {line-height : 1.2rem;font-size:1rem;	margin-top:1.8rem}
p.note {font-size:1rem;	text-align:right;}
p.parents {font-size:1rem;	margin-top:1.8rem}
span.source {color:var(--title-main)}
/*span.titre-maj{color:#454441}*/
cite.citation {font-style:normal}