/* ==========================================================
   ÂME ANIMALE - PERSONNALISATION
   ==========================================================
   Ne pas utiliser les commentaires //.                    */

body {
    background: #eef5e8;
}

/* largeur maximale du site */
.site-grid {
    max-width: 1200px;
    margin: auto;
}

/*-------- texte et images -------*/
h1 {
    color: #9DBC70;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    margin-bottom: 40px;
    margin-top: 20px;
}
h2 {
  font-size: 19px;
  font-weight: bold;
}
p {
  text-align: justify;
}
.com-content-article.item-page { /*largeur max de la colonne uniquement pour les articles + centrage*/
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}
.com-content-article.item-page  a { /*style des liens dans la colonne de gauche*/
    text-decoration: none;
}
.com-content-article.item-page  a:hover {
    color: #FF0000;
    text-decoration: none;
}
/*.com-content-article.item-page td, th {border: 1px solid black;} /* Bordure pour chaque cellule */
.tables-avec-bordure td, .tables-avec-bordure th {border: 1px solid black;} 
.table-centree { /*tableau <table> centré*/
    width: 80%;       /* Ajustez la largeur selon les besoins */
    margin: 0 auto;   /* 0 pour le haut/bas, auto pour gauche/droite */   
}

/*images dans les tableaux: Cassiopeia les rendait trop petites*/
table img {
    max-width: none !important; 
}
.item-page img { /*marges autour des images des articles*/
    margin: 4px;
}

div.pagelivres img { /*img dans la page Livres*/
  max-width: 250px;         /* Largeur max de 250px */
  border: 2px solid white;  /* Bordure blanche de 2px */
  height: auto;             /* Garde les proportions de l'image */
  float: left;              /* Flotte à gauche (équivalent de align="left") */
  margin-right: 25px;       /* Ajoute un petit espace à droite pour ne pas coller au texte */
  /*margin-bottom: 10px;      /* Espace en bas si l'image dépasse sur plusieurs lignes */
}
/*.couple-livre {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 50px;
}
.livre-image {
    flex-shrink: 0;
}
.livre-image img {
    max-width: 250px;
    border: 2px solid white;
    display: block;
}
.livre-texte {
    flex: 1;
    min-width: 200px;
}
@media (max-width: 600px) {
    .couple-livre {
        flex-direction: column;
        align-items: center;
    }
}*/

div.table-sans-bord table {
  border-collapse: collapse;
  border: none;
}
div.table-sans-bord tr {
  border: none;
}

/* ========= Bandeau d'entête Âme Animale ============== */
/* Suppression de l'ancien header Cassiopeia */
.site-title,
.navbar-brand {
    display: none !important;
}
.header { /*supprimer les marges inutile du template de base Cassiopeia*/
    display: none;
    /*min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;*/
}
.container-banner { /*enlève une marge en haut de l'article et du menu*/
margin: 0 ;
}
.bandeau-ame{
    width:100%;
    max-width:1200px;
    height:auto;
    display:block;
    margin: 0 auto;
}
/*bannière raccourcie sur la hauteur sur grand écran*/
@media (min-width: 992px) {
    .container-banner:not(.footer-banner) {
        height: 230px;
        overflow: hidden;
        background-image: url('/media/templates/site/cassiopeia_extended/images/bandeau.jpg');
        background-size: cover;
        background-position: center 50%;
        background-repeat: no-repeat;
    }
    .container-banner:not(.footer-banner) img {
        opacity: 0;
        height: 230px;
        width: 100%;
    }
}

/* ========= footer Âme Animale ============== */
/*nouvelle position de module footer-banner*/
.footer-banner {
    margin: 0;
    padding: 0;
    text-align: center;
}
.footer-banner .mod-custom,
.footer-banner p {
    margin: 0;
    padding: 0;
}
.footer-image { /*nom donné à la classe <img> contenant l'image de pied de page dans le module "pied de page".*/
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
}

/* ========= colonne de gauche et menus ============== */
.sidebar-left {
    width: 240px;
}
.grid-child.container-sidebar-left { /*colonne de droite*/
    border: 3px solid #9699AA;
    border-radius: 30px;
    box-shadow: 0 0 6px rgba(150, 153, 170, 0.4);
    width: fit-content;
    justify-self: start; /* évite que la grille CSS n'étire quand même la colonne */

    /* le menu chevauche l'entête et le pied de page */
    margin-top: -70px; /*remontée de la colonne pour chevaucher l'entête*/
    padding-top: 60px; /*marge entre le 1er module et le haut de la colonne (à peu près identique à la remontée) */
    margin-bottom: -20px;
    position: relative;
    z-index: 2;
}
.sidebar-left.card { /*module dans la colonne de droite*/
    background-color: #f6f9ef;
    border: 2px solid #9699AA;
    border-radius: 20px;
    box-shadow: 0 0 6px rgba(150, 153, 170, 0.4);
}
.sidebar-left.card a { /*style des liens dans la colonne de gauche*/
    color: #8AB5AC;
    text-decoration: none;
}
.sidebar-left.card a:hover {
    color: #FF0000;
    text-decoration: none;
}
.sidebar-left .nav-item a { /*lien des menus seulement ; pas liens du module connexion*/
    font-weight: bold;
}
.sidebar-left .nav-item a::before { /*petit carré devant les liens des menus*/
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid #8AB5AC;
    margin-right: 6px;
    vertical-align: middle;
}
/* Modules */
.card {
    border-radius: 20px;
    border: 1px solid #b9c9a5;
    box-shadow: none;
}
.card-header {  /* Titres */
    background: #7e9d48;
    color: white;
    font-weight: bold;
}
.card-body {  /* Contenu */
    background: #f6f9ef;
    border-radius: 20px;
}
.menu-sobre.card { /*pas de bord entourant les modules du menu*/
    border: none;
    box-shadow: none;
    /*border-radius: 30;*/
}
.menu-sobre .card-header {
    background-color: transparent;
    color: #0F3E4D;
    font-weight: bold;
    font-size: 20px;
    /*padding-left: 5;*/
}

/*-------- module papillon flottant ----------*/
.papillon-flottant { /*style du module*/
    position: absolute;
    top: -120px;     /* négatif : le fait remonter au-dessus du conteneur */
    left: 20px;
    z-index: 10;
}
.module-nu.card { /*disparition du module en dehors du papillon*/
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
}
@media (max-width: 767.98px) {
    .papillon-flottant {top: -65px; left: 100px;} /*pour le menu de petit écran*/
}

/*------------ module connexion ---------------*/
/* Champs de saisie : fins, sobres, sans grande icône encadrée */
.mod-login .form-control {
    font-size: 11px;
    padding: 3px 6px;
    height: auto;
    border: 1px solid #CDD5DA;
    border-radius: 0;
}
/* Icônes utilisateur/œil : réduites, fondues dans le champ plutôt qu'en bloc à part */
.mod-login .input-group-text,
.mod-login .input-password-toggle {
    background-color: #FFFFFF;
    border: 1px solid #CDD5DA;
    border-left: none;
    padding: 2px 6px;
    font-size: 11px;
}
/* Case "Maintenir la connexion" : texte à la taille des liens habituels */
.mod-login__remember .form-check-label {
    font-size: 11px;
    color: #0F3E4D;
}
/* Bouton Connexion : sobre, bordé, plus le grand bloc bleu marine */
.mod-login__submit .btn-primary {
    background-color: #FFFFFF;
    color: #8098BF;
    border: 1px solid #CDD5DA;
    border-right-color: #8098BF;
    border-bottom-color: #8098BF;
    font-size: 11px;
    font-weight: bold;
    width: auto;
    padding: 3px 14px;
}
.mod-login__submit {
    text-align: center;
}
/* Réduit l'espacement vertical global entre les blocs du formulaire */
.mod-login .form-group {
    margin-bottom: 1px;
}
.mod-login__options a {
    font-size: 11px;
}
/* Retire l'espace interne excessif du bloc entier */
.mod-login .mod-login__username.form-group,
.mod-login .mod-login__password.form-group,
.mod-login .mod-login__remember.form-group,
.mod-login .mod-login__submit.form-group {
    margin-bottom: 3px !important;
}
.mod-login .mod-login__options { /*marge du bas*/
    margin-bottom: 3px;
}
.mod-login__options li {
    margin: 0;
    padding: 0;
    line-height: 1.1;
}

/*------- Module hamburger -------*/
#mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1001;
    width: 40px;
    height: 40px;
    background-color: #445E88;
    border: none;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
}
#mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    background-color: #FFFFFF;
    margin: 4px 0;
}
@media (max-width: 767.98px) {
    #mobile-menu-toggle {
        display: block;
    }
    .grid-child.container-sidebar-left {
        display: none;
    }
    .grid-child.container-sidebar-left.sidebar-open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 250px;
        height: 100vh;
        overflow-y: auto;
        background-color: #FFFFFF;
        z-index: 1000;
        margin: 0;
        /*border-radius: 2;*/
        padding-top: 60px;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    body:not(:has(#kunena.layout)) .site-grid { /*not : sauf pour le forum Kunena*/
        grid-template-areas:
            ". banner banner banner banner ."
            ". top-a  top-a  top-a  top-a  ."
            ". top-b  top-b  top-b  top-b  ."
            ". side-l comp   comp   comp   ."
            ". bot-a  bot-a  bot-a  bot-a  ."
            ". bot-b  bot-b  bot-b  bot-b  .";
        grid-template-columns: [full-start] 12px [main-start] 280px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) [main-end] 12px [full-end];
    }
    body:not(:has(#kunena.layout)) .grid-child.container-component {
        min-width: 0;
        overflow-wrap: break-word;
    }
    /*menu hambuger sur écran moyen pour le forum Kunena*/
    body:has(#kunena.layout) #mobile-menu-toggle {
        display: block;
    }
    body:has(#kunena.layout) .grid-child.container-sidebar-left {
        display: none;
    }
    body:has(#kunena.layout) .grid-child.container-sidebar-left.sidebar-open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        overflow-y: auto;
        background-color: #FFFFFF;
        z-index: 1000;
        margin: 0;
        border-radius: 0;
        padding-top: 60px;
    }
}



/* ============== Forum Kunena ==================*/
/*On réduit propulsé par Kunena*/
main > div:has(a[href="https://www.kunena.org"]) { 
    font-size: 10px;
    opacity: 0.6;
}
/*On agrandit le bouton de sélection de la catégorie en haut et en bas du forum*/
.selector.col-3 {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
}
#catid {
    width: auto;
    min-width: 260px;
}
/*invisibilise la ligne catégorie dans le tableau des messages d'une catégorie mais pas de la page index*/
tbody.category-item tr.category .ktopic-category { display: none;}
tbody.category-item tr.category .ktopic-category + br { display: none;} /*supprime le <br> qui suit directement la catégorie*/

/*invisibilise l'anniversaire : on enlève anniversaire (car il buggue dans les préférences utiliateurs et je le mets à 1901-01-01 par défaut)(en attendant une mise à jour de ce champ)*/
li:has(span[title*="Anniversaire : 0000-00-00"]) {display: none;} /*enlève anniversaire s'il est vide seulement*/
li:has(span[title*="Anniversaire : 1900-01-01"]) {display: none;} /*enlève anniversaire si c'est la date par défaut*/

/*réduit "Connexion ou Créer un compte pour participer à la conversation." à la fin des messages */
.message-published p:has(a.btn-link) { font-size: 11px; }
/*réduit les images à 144px de large dans la page du choix des avatars de la galerie*/
#kuserform .radio.thumbnail img {
    width: 144px;
    /*width: 100%; max-width: 144px;*/
    object-fit: contain;
}

/*icônes de sujet en page "Nouveau sujet" : on supprime l'image actuelle et met l'ancienne image en backgroud*/
#iconset_topicList label svg {
    display: none;
}
#iconset_topicList input[type="radio"] {
    display: inline-block !important;
    float: left;
    margin: 4px 4px 0 20px;
}
#iconset_topicList label {
    float: left;
    margin-right: 14px;
    margin-bottom: 6px;
    width: 24px;
    height: 24px;    
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
#iconset_topicList::after {
    content: "";
    display: block;
    clear: both;
}
label[for="radio0"]  { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-default.gif') !important; }
label[for="radio1"]  { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-exclamation.png') !important; }
label[for="radio2"]  { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-question.png') !important; }
label[for="radio3"]  { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-mark.png') !important; }
label[for="radio4"]  { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-love.png') !important; }
label[for="radio9"]  { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-grin.png') !important; }
label[for="radio10"] { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-shock.png') !important; }
label[for="radio8"]  { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-smile.png') !important; }
/* --- icône de sujet en page catégorie (icône dans un lien <a>) --- */
th:has(svg.bi-document-text) a         { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-default.gif'); }
th:has(svg.bi-alert-circle) a          { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-exclamation.png'); }
th:has(svg.bi-question) a              { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-question.png'); }
th:has(svg.bi-cone-striped) a          { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-mark.png'); }
th:has(svg.bi-heart) a                 { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-love.png'); }
th:has(svg.bi-arrows-angle-contract) a { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-grin.png'); }
th:has(svg.bi-x-circle) a              { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-shock.png'); }
th:has(svg.bi-check-circle) a          { background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-smile.png'); }
th.center a:has(svg) {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
th.center a:has(svg) svg {
    display: none;
}
/* --- icône de sujet en page sujet (icône directement dans le <h1>) --- */
h1:has(svg.bi-document-text)::before         { content: ""; background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-default.gif'); }
h1:has(svg.bi-alert-circle)::before          { content: ""; background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-exclamation.png'); }
h1:has(svg.bi-question)::before              { content: ""; background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-question.png'); }
h1:has(svg.bi-cone-striped)::before          { content: ""; background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-mark.png'); }
h1:has(svg.bi-heart)::before                 { content: ""; background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-love.png'); }
h1:has(svg.bi-arrows-angle-contract)::before { content: ""; background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-grin.png'); }
h1:has(svg.bi-x-circle)::before              { content: ""; background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-shock.png'); }
h1:has(svg.bi-check-circle)::before          { content: ""; background-image: url('/media/templates/site/cassiopeia_extended/images/topic-icons/topic-smile.png'); }
h1:has(svg) svg {
    display: none;
}
h1:has(svg)::before {
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*======== onglets pour page livre : inutile ===========*/
.bouton-grad {
  background-image: linear-gradient(to right, #30BC70 0%, #FF8235 51%, #30BC70 100%);
}
.bouton-grad {
  margin: 3px;
  padding: 5px 5px;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
  outline: none;
  border: none;
  display: inline;
}
.bouton-grad:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}