/* savo couleur global template */
@charset "UTF-8";
:root {
  --cassiopeia-color-primary: #fdcb37;
  --cassiopeia-color-link: #224faa;
  --link-color: #224faa;
  --link-color-rgb: 34, 79, 170;
  --cassiopeia-color-hover: #424077;
  --link-hover-color: #424077;
  --link-hover-color-rgb: 66, 64, 119;
}

.container-header {
    z-index: 10;
    /*  background-color: var(--cassiopeia-color-primary); */
    /* background-image: none !important; */
    background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, #f4a62a 100%);  
   /* background-image: url('chemin/vers/votre/image.jpg'), linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, #f4a62a 100%);*/
    background-size: cover, auto; /* Ajustez selon vos besoins */
    background-position: center, center; /* Ajustez selon vos besoins */
    background-color: #fdcb37; /* Remplacez #votre-couleur par la couleur souhaitée */
    position: relative;
    box-shadow: inset 0 5px 5px #00000008;
}

/* savo couleur titre article */
h1 { 
  color: #FDC828;
  font-size: 18pt;
  text-shadow: 1px 1px 2px #000000;
}

/* savo couleur des boites exemple liste des articles recents... */
.card-header {
   color: #FDC828;
   font-size: 14pt;
    text-shadow: 1px 1px 2px #000000;
}

/* savo Traitement de la barre de menu */
/* ---------------debut--------------- */

/* savo positionnement menu et traitement taille ecran */
.container-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "top below" 
                         "logo logo" 
                         "nav nav";
}
.container-header .container-topbar {
    padding: .5em;
}
.container-header .container-topbar {
    grid-area: top;
}
.container-header .container-below-top {
    grid-area: below;
    justify-content: flex-end;
}
.container-header .grid-child:has(.navbar-brand) {
    grid-area: logo;
}
.container-header .container-nav {
    grid-area: nav;
}

@media (width >= 991.98px) {
    .container-header {
        grid-template-columns: 
            [full-start] minmax(0,1fr) 
            [main-start] repeat(4,minmax(0,19.875rem))
            [main-end] minmax(0,1fr)[full-end];
        grid-template-areas: ". logo nav nav nav .";
        gap: 0 1rem;
    }
    .container-header:has(.container-below-top, .container-topbar) {
        grid-template-areas: ". top top below below ." 
                             ". logo nav nav nav .";
    }
}

/* savo design menu et sous-menu barre de menu etendue */
.metismenu.mod-menu .metismenu-item {
  border:0px solid;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   margin-right:5px;
}

/* savo design menu et sous-menu barre de menu reduite */
.metismenu.mod-menu .mm-collapse {
    
    position: absolute;
    box-shadow: 1px 1px 4px #0000001a;
    border: 0px solid;
    border-radius: 6px; 
    border-color: #F39C12;
    background-color: #cda748; 
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    font-weight: bold;  
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;   
     margin-top:7px;
}

/* savo sous-menu dans la barre */
.metismenu.mod-menu .metismenu-item>span, .metismenu.mod-menu .metismenu-item>a, .metismenu.mod-menu .metismenu-item>button {
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    font-weight: bold;
}

/* Ajoute une ligne  entre les articles du blog */
.blog-item {
    border-bottom: 2px solid #FCC836; /* Couleur et épaisseur de la ligne */
    padding-bottom: 2rem;            /* Espace sous l'article */
    margin-bottom: 2rem;            /* Espace au-dessus de la ligne suivante */
}

/* Supprime le séparateur après le dernier article pour faire propre */
.blog-item:last-child {
    border-bottom: none;
}

 /* Ajoute une ligne  devant les articles du blog */
.blog-item, .com-content-category-blog__item {
    border-left: 2px solid #FCC836 !important; /* Barre verticale orange de 5px */
    padding-left: 20px !important;            /* Espace entre la barre et le texte */
    margin-bottom: 40px !important;           /* Espace entre les articles */
}

/* Modifie le titre des articles uniquement dans la vue Blog */
.com-content-category-blog__item h2, 
.com-content-category-blog__item h2 a,
.blog-item h2,
.blog-item h2 a {
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 12px !important;
    font-weight: bold; /* Optionnel : pour que ce soit plus lisible en petit */
    text-decoration: none; /* Enlève le soulignement si c'est un lien */
    text-shadow: 1px 1px 2px #000000;
}

/* Ciblage large pour être sûr de toucher le titre */
h2[itemprop="name"], 
.page-header h2, 
.com-content-category-blog__item h2, 
.com-content-category-blog__item h2 a {
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 18px !important;
    color: #FCC836 !important; /* Remplacez ce code par la couleur de votre choix */
}

/* Titre formulaire de contact taille et couleur */
.com-contact.contact h2 {
    color: #fcc836 !important; /* Remplacez par votre couleur (ex: #0000FF pour bleu) */
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 24px;
    text-shadow: 1px 1px 2px #000000;
}


/* ----------------fin---------------- */