/* ========================
   THÈME CLAIR ET FOND GLOBAL
======================== */

html, body {
    height: 100%;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    background-color: var(--bs-body-bg, #121212);
    color: var(--bs-body-color, #f1f1f1);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* HOVER des liens de la NAVBAR = dropdown_hover_text + dropdown_hover_bg */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--drop-hover-text);
    background-color: var(--drop-hover-bg);
    text-decoration: none !important;
}

/* HOVER des items du DROPDOWN = dropdown_hover_text + dropdown_hover_bg */
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: var(--drop-hover-text);
    background-color: var(--drop-hover-bg);
    text-decoration: none !important;
}


@media (max-width: 767px) {
    .col-md-3 {
        flex: 0 0 auto;
        width: 33.3333%; /* équivalent col-4 */
    }
}

/* Sur petits écrans, on simplifie: plus de translate ni 100vw */
@media (max-width: 991.98px) {
    .fullwidth-article,
    .hero-banner,
    .site-footer {
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
    }
}

/* Style discret pour termes expliqués */
.glossary-term {
    border-bottom: 1px dashed currentColor;
    cursor: help;
}

/* ========================
   VARIABLES CSS
======================== */
:root {
    --accent-color: #0d6efd;
    --accent-hover: #0b5ed7;
    --nav-bg: #000000;
    --nav-text: #FFFFFF;
    --drop-bg: #000000;
    --drop-text: #FFFFFF;
    --drop-hover-bg: #007BFF;
    --drop-hover-text: #000000; 
}

[data-bs-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-color: #f8f9fa;
    --bs-card-bg: #1e1e1e;
    --bs-border-color: #2e2e2e;
}

/* ========================
   STRUCTURE PRINCIPALE
======================== */
main {
    flex: 1;
}

/* ========================
   SIMILAIRES ARTICLES
======================== */

.card-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* ratio 16/9 */
    overflow: hidden;
}

    .card-img-wrap img.img-cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* remplissage */
        object-position: center; /* centré */
    }

/* ========================
   LIENS
======================== */
/* Liens généraux */
a {
    color: var(--link);
    text-decoration: none !important;
}

a:hover, a:focus {
     color: var(--link-hover);
     text-decoration: underline !important;
    }

/* ========================
   STYLE NAV DEFAUT
======================== */
/* Lien pagination par défaut */
.pagination .page-link {
    color: #000 !important; /* texte noir */
    background-color: #fff !important; /* fond blanc par défaut */
    border: 1px solid #ddd !important;
}

/* Hover */
.pagination .page-link:hover {
        color: #444 !important;
        background-color: #f1f1f1 !important;
        border-color: #ccc !important;
    }

/* Page active */
.pagination .page-item.active .page-link {
    color: #fff !important; /* texte blanc */
    background-color: #000 !important; /* fond noir */
    border-color: #000 !important;
}

/* Désactivé (précédent/suivant inactifs) */
.pagination .page-item.disabled .page-link {
    color: #999 !important;
    background-color: #eee !important;
    border-color: #ddd !important;
}



/* ========================
   AJUSTEMENTS DIVERS 
======================== */
h5 {
    margin-top:-1rem;
}

.taglink {
    color:white!important
}

#favCount {
    transform: translate(-20%,-20%) !important;
}
#favCount {
    --bs-bg-opacity: 1;
    background-color: var(--drop-hover-text) !important;
    color: black;
}

#siteBanner { text-align: center; }


/* Place ce bloc APRÈS Bootstrap et après ton thème */
.site-footer {
    --bs-link-color: #ffffff;
    --bs-link-hover-color: #ffffff;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color-rgb: 255, 255, 255;
}

/* Si un style plus spécifique cible .small a, on bétonne : */
.site-footer .small a {
        color: #ffffff !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success.active {
    color: #fff !important;
    background-color: #198754; /* vert bootstrap */
    border-color: #198754;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    color: #fff !important;
    background-color: #0d6efd; /* bleu bootstrap */
    border-color: #0d6efd;
}

.img-fluid.note-float-right {
    margin-left: 15px !important;
    margin-right: 15px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .img-fluid.note-float-left {
    margin-left: 15px !important;
    margin-right: 15px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }

mark.search-hit {
    background: var(--bs-highlight-bg);
    padding: 0 .15em;
    border-radius: .2rem;
}
/* ========================
   COMPLEMENT NAVBAR
======================== */
    /* Desktop : parent + caret sur une ligne */
    .navbar-nav .nav-item.dropdown {
    display: flex;
    align-items: center;
}

.navbar-nav .dropdown-toggle-split {
    padding-left: .35rem;
}

    .navbar-nav .dropdown-toggle-split::after {
        vertical-align: middle;
        padding-left: .15rem;
    }
/* ordre par défaut */
#navContent .navbar-nav .nav-item {
    order: 0;
}

    /* Accueil tout en haut */
    #navContent .navbar-nav .nav-item.home {
        order: -20;
    }

    /* Blog juste après Accueil */
    #navContent .navbar-nav .nav-item.blog {
        order: -10;
    }



/* Mobile : le sous-menu passe DESSOUS, comme avant */
@media (max-width: 991.98px) {
    /* le <li> n’aligne plus tout en ligne */
    .navbar-nav .nav-item.dropdown {
        display: flex;
        flex-direction: column; /* empile label/caret puis le sous-menu */
        align-items: stretch; /* prend toute la largeur */
    }

    .navbar-nav .dropdown-toggle-split::after {
        vertical-align: middle;
        padding-left: .25rem;
        margin-top: -30px !important;
        float: right !important;
    }

    /* le dropdown se comporte comme un bloc normal, pas en absolu */
    .navbar .dropdown-menu {
        position: static !important;
        transform: none !important;
        float: none;
        display: none; /* masqué par défaut */
        margin: 0;
        border: 0;
        box-shadow: none;
        width: 100%; /* pleine largeur du collapse */
    }

        .navbar .dropdown-menu.show {
            display: block;
            margin-top: -5px !important;
        }
    /* Grossir le caret (desktop + mobile) */
    #navContent .dropdown-toggle::after,
    #navContent .dropdown-toggle-split::after {
        display: inline-block;
        transform: scale(1.2); /* ← augmente/↓diminue */
        transform-origin: center;
    }
}



/* ========================
   hover tags
======================== */

.badge-hover-muted:hover {
    color: #FF8040 !important; /* Bootstrap text-muted */
}

/* ========================
   Live résultats
======================== */

#liveResults {
    border: 1px solid #ced4da; /* Bordure extérieure grise (comme Bootstrap) */
    border-radius: 0.375rem; /* Coins arrondis */
    overflow: hidden; /* Pour que rien ne déborde */
    max-height: 300px;
    overflow-y: auto;
}

    #liveResults .list-group-item {
        border: none !important; /* Supprime les traits entre items */
    }

/* ========================
   BOUTONS
======================== */
.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* ========================
   NAVBAR & HAMBURGER
======================== */

.navbar {
    /* Publie aussi les variables Bootstrap pour cohérence */
    --bs-navbar-bg: var(--nav-bg);
    --bs-navbar-color: var(--nav-text);
    --bs-navbar-brand-color: var(--nav-text);
    --bs-dropdown-bg: var(--drop-bg);
    --bs-dropdown-color: var(--drop-text);
    --bs-dropdown-link-color: var(--drop-text);
    --bs-dropdown-link-hover-bg: var(--drop-hover-bg);
    --bs-dropdown-link-hover-color: var(--drop-hover-text);
    background-color: var(--bs-navbar-bg);
    color: var(--bs-navbar-color);
}


.navbar-toggler i {
    font-size: 1.5rem !important;
    color: #ffffff !important;
}

.navbar-nav .dropdown-menu {
    z-index: 9999 !important;
}

@media (max-width: 576px) {
    .navbar-brand {
        font-size: 1rem !important;
    }
}

/* ========================
   tags galeries
======================== */

.taglink, .badge .taglink {
    color: inherit;
    text-decoration: none;
}

    .taglink:hover {
        text-decoration: underline;
    }

/* ========================
   tags annuaire
======================== */


.tag-chip {
    font-size: .9rem;
    transition: all .15s ease-in-out;
}

    .tag-chip:hover {
        background-color: var(--bs-primary);
        color: rgb(255, 193, 7) !important;
        text-decoration: none;
    }

        .tag-chip:hover .fa-tag {
            color: rgb(255, 193, 7) !important;
        }

/* ========================
   barre recherche live
======================== */

.searchbox {
    max-width: 480px;
}
/* optionnel */
.search-results {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    display: none; /* caché par défaut */
    background: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .375rem;
    padding: .5rem;
    max-height: 60vh;
    overflow: auto;
    z-index: 1050; /* au-dessus du contenu */
}

    .search-results p.helper {
        margin: .25rem 0;
        color: #6c757d;
    }

    .search-results .item {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .25rem 0;
    }

        .search-results .item img {
            width: 50px;
            height: auto;
        }


/* ========================
   INSERTION GALLERIE
======================== */

.ecms-gallery img {
    display: block;
    width: 100%;
    height: auto;
}

.ecms-gallery .small {
    line-height: 1.3;
}

.ecms-gallery [loading="lazy"] {
    background: #f3f3f3;
}

/* ========================
   IMAGES DANS LE CONTENU
======================== */
.article-content img[style],
.page-content img[style] {
    width: auto !important;
    max-width: 60% !important;
    height: auto !important;
    display: block;
    margin: 1rem auto;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

.article-content img,
.page-content img,
.content img,
article .img-fluid {
    max-width: 60%;
    height: auto;
    display: block;
    margin: 1rem auto;
    cursor: zoom-in;
}

/* ========================
Surbrillance du bloc en cours de lecture 
======================== */
.article-content  .tts-current {
    background: #fff3cd;
    outline: 2px solid #ffc107;
    transition: background-color .2s ease-in-out;
}
/* Surbrillance progressive */
.article-content .tts-word-current {
    background: #ffe082; /* mot en cours */
    box-shadow: 0 0 0 2px #ffd54f inset;
}

.article-content .tts-word-done { /* mots déjà lus */
    background: #fff3cd;
}

/* Optionnel : focus visible */
#article-tools .btn:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}
.page-content .tts-current {
    background: #fff3cd;
    outline: 2px solid #ffc107;
    transition: background-color .2s ease-in-out;
}
/* Surbrillance progressive */
.page-content .tts-word-current {
    background: #ffe082; /* mot en cours */
    box-shadow: 0 0 0 2px #ffd54f inset;
}

.page-content .tts-word-done { /* mots déjà lus */
    background: #fff3cd;
}

/* Optionnel : focus visible */
#article-tools .btn:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}
/* ========================
 Accessibilité focus visible sur les boutons 
======================== */
#article-tools .btn:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* ========================
   IMAGES GÉNÉRALES
======================== */
.card-img-top {
    width: 100% !important;
    height: 250px !important;
}

.img-fluid {
    width: 175px !important;
    height: 100px;
}
.img-fluid2 {
    width: 700px !important;
    height: 400px;
}
.img-pub {
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 100%;
    height: auto;
}
.me-3 {
    min-width: 195px;
}

/* cas spécifique pour les 728x90 sur petits écrans */
@media (max-width: 576px) { /* smartphone Bootstrap */
    .ad-728 img {
      max-width: 95%;   /* laisse une petite marge */
      height: auto;
    }
  }

@media (max-width: 748px) {
    .card-img-top {
        width: 100% !important;
        height: 175px !important;
    }
    .ad-728 img {
        max-width: 95%;   /* laisse une petite marge */
        height: auto;
      }
    .img-pub {
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .img-fluid {
        max-width: 130px !important;
        height: 100px;
    }
    .img-fluid2 {
        width: 300px !important;
        height: 200px;
    }
    .me-3 {
        min-width: 140px;
    }
}

/* ========================
   ANIMATION FAVORIS
======================== */
.fav-anim {
    opacity: 1;
    transform: none;
    transition: opacity .22s ease, transform .22s ease;
    will-change: opacity, transform;
}

    /* état pré-entré : on part de plus bas, léger zoom */
    .fav-anim.will-show {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }

    /* état de sortie : on remonte un peu + fade */
    .fav-anim.will-hide {
        opacity: 0;
        transform: translateY(-10px) scale(.985);
        pointer-events: none;
    }

    /* optionnel : petit “hover lift” */
    .fav-anim:not(.will-hide):hover {
        transform: translateY(-2px);
    }


/* ========================
   CARTES ET TABLES
======================== */
.card {
    background-color: #ffffff;
    color: #212529;
    border: 1px solid #dee2e6;
}

.card-title {
    font-size:1.10rem !important;
    font-weight: 600;
    margin-top:5px !important;
}

.table th,
.table td {
    vertical-align: middle;
}

/* ========================
   AVATAR & ICONES
======================== */
img.rounded-circle {
    object-fit: cover;
    width: 32px;
    height: 32px;
}

/* Social icons = même couleur que le hover text de la navbar */
/* Social icons = même couleur que le hover text de la navbar */
.navbar .social-icon:hover,
.navbar .social-icon:hover i {
    color: var(--drop-hover-text) !important;
    text-decoration:none !important;
}

/* (Optionnel) état normal = couleur de texte de la navbar */
.social-icon,
.social-icon i {
    color: var(--bs-navbar-color, var(--nav-text, inherit));
}

.social-icon span {
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

/* ========================
   AFFICHAGE GRILLE ET TABLE
======================== */
.grid-view {
    display: flex;
    flex-wrap: wrap;
}

.table-view {
    display: block;
}

/* ========================
   BOUTON ANNUAIRE & ANNUAIRE
======================== */
.btn-visit {
    /* couleurs de base */
    color: #fff !important; /* force blanc, au cas où un thème override <a> */
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    /* petite anim élégante */
    transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, border-color .2s ease;
}

    /* Couleur de survol (fallback) */
    .btn-visit:hover,
    .btn-visit:focus-visible {
        color: #fff !important;
        background-color: #0b5ed7; /* proche du hover Bootstrap par défaut */
        border-color: #0a58ca;
        box-shadow: 0 .4rem .9rem rgba(0,0,0,.15);
        transform: translateY(-1px);
        text-decoration: none !important;
    }

/* Si le navigateur supporte color-mix, on calcule un hover dynamique à partir de --bs-primary */
@supports (color: color-mix(in srgb, black, white)) {
    .btn-visit:hover,
    .btn-visit:focus-visible {
        background-color: color-mix(in srgb, var(--bs-primary) 88%, black);
        border-color: color-mix(in srgb, var(--bs-primary) 82%, black);
    }
}

/* clic */
.btn-visit:active {
    transform: translateY(0);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.12);
}

/* icône bien alignée */
.btn-visit .fa,
.btn-visit .fa-solid {
    vertical-align: -0.05em;
}

.lead {
    font-size: 1.00rem !important;
    font-weight: 200 !important;
}