/* ========================
   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;
}

 #filtersForm {
    overflow-x: auto;
  }

@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
======================== */

.adsense-wrap {
  /*max-width: 300px;   /* largeur max de ton bloc (ou 100%, à adapter) */
  width: 100%;        /* ne jamais dépasser le parent */
  margin: 0 auto;     /* centrer si tu veux */
  overflow: hidden;   /* sécurité au cas où */
}

.adsense-wrap ins.adsbygoogle {
  width: 100% !important;  /* l’annonce ne dépasse pas le conteneur */
  max-width: 100% !important;
}

/* ========================
   HARMONISATION DES BOUTONS CSS
======================== */

/* ========================
   Boutons = couleur navbar_bg
   ======================== */

/* Variables de boutons basées sur la navbar */
: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;
    /* Ajout pour les boutons */
    --btn-bg: var(--nav-bg);
    --btn-bg-hover: var(--banner-bg);
    --btn-bg-active: color-mix(in srgb, var(--banner-bg) 85%, black);
}

/* ========================
   VARIABLES DES BOUTONS
======================== */
:root {
    --btn-bg: var(--nav-bg); /* fond bouton normal */
    --btn-text: #ffffff; /* texte normal */
    --btn-bg-hover: var(--banner-bg); /* fond hover */
    --btn-text-hover: #000000; /* texte hover */
    --btn-bg-active: color-mix(in srgb, var(--banner-bg) 60%, black);
    --btn-text-active: #000000; /* texte actif */
}

/* ========================
   STYLE NORMAL (btn + btn-visit)
======================== */
.btn,
.btn-visit,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger {
    background-color: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    transition: transform .15s ease, background-color .2s ease, border-color .2s ease, box-shadow .15s ease;
}

    /* ========================
       HOVER
    ======================== */
    .btn:hover,
    .btn:focus,
    .btn-visit:hover,
    .btn-visit:focus-visible,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-success:hover,
    .btn-info:hover,
    .btn-warning:hover,
    .btn-danger:hover,
    .btn-outline-primary:hover,
    .btn-outline-secondary:hover,
    .btn-outline-success:hover,
    .btn-outline-info:hover,
    .btn-outline-warning:hover,
    .btn-outline-danger:hover {
        background-color: var(--btn-bg-hover) !important;
        border-color: var(--btn-bg-hover) !important;
        color: var(--btn-text-hover) !important; /* texte NOIR */
        transform: translateY(-1px);
        box-shadow: 0 .4rem .9rem rgba(0,0,0,.15);
    }

    /* ========================
           ACTIF
    ======================== */
    .btn:active,
    .btn.active,
    .btn-visit:active,
    .show > .btn.dropdown-toggle {
        background-color: var(--btn-bg-active) !important;
        border-color: var(--btn-bg-active) !important;
        color: var(--btn-text-active) !important; /* texte NOIR */
        transform: translateY(0);
        box-shadow: 0 .2rem .5rem rgba(0,0,0,.12);
    }
    /* 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;
    }

/* ========================
   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;
    }

.text-dark {
    color: var(--link) !important;
    text-decoration: none !important;
}
/* ========================
   PAGE D 'ACCUEIL
======================== */
.hero-sc {
    border-radius: 2rem;
    overflow: hidden;
    background: linear-gradient(135deg, var(--nav-bg), #666666);
    color: #fff;
    position: relative;
    min-height: 260px;
}

    .hero-sc .btn:hover {
        border-radius: 999px;
        background-color: #ffffff !important;
        text-decoration: none !important;
    }

.hero-sc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.18), transparent 55%);
    mix-blend-mode: screen;
}

.hero-sc-inner {
    position: relative;
    z-index: 1;
    padding: 2.5rem 2rem;
}

@media (min-width: 992px) {
    .hero-sc-inner {
        padding: 3.5rem 3rem;
    }
}

.hero-kicker {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .75rem;
    color: rgba(255,255,255,0.7);
}

.hero-title-sc {
    text-transform: uppercase;
    font-size: clamp(2rem, 3.2vw, 3rem);
    letter-spacing: .06em;
}

.hero-subtitle-sc {
    max-width: 40rem;
    font-size: .95rem;
    color: rgba(255,255,255,0.9);
}

.hero-sc .btn {
    border-radius: 999px;
}

.sc-section-title {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 1rem;
    color: var(--link) !important;
    font-weight: bold;
}

.sc-section-heading {
    text-transform: uppercase;
    font-size: 1.6rem;
    letter-spacing: .06em;
}

.sc-card {
    border-radius: 1.5rem;
    border: none;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .sc-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 45px rgba(0,0,0,0.09);
    }

.sc-card-img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
}

.sc-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .2rem .8rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    background-color: var(--drop-hover-text) !important;
    color: var(--bs-body-color) !important;
}

.sc-link-arrow {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .72rem;
    color: var(--link) !important;
}

    .sc-link-arrow i {
        transition: transform .2s ease;
    }

    .sc-link-arrow:hover i {
        transform: translateX(3px);
    }

.sc-newsletter {
    border-radius: 1.8rem;
    background: linear-gradient(135deg, var(--nav-bg), #666666);
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .sc-newsletter::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.15), transparent 55%);
        mix-blend-mode: screen;
    }

    .sc-newsletter .btn:hover {
        border-radius: 999px;
        background-color: #ffffff !important;
        text-decoration: none !important;
        border-radius: var(--bs-btn-border-radius);
    }

.sc-newsletter-inner {
    position: relative;
    z-index: 1;
}

.sc-newsletter .form-control {
    border-radius: 999px;
}

/* ========================
   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 
======================== */
#text-muted {
    color: var(--accent-color) !important;
}
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;
    color:#ffffff;
}


/* 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: #000000 !important;
    background-color: #198754;
    border-color: #198754;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    color: #000000 !important;
    background-color: #0d6efd;
    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;
    }
}

/* ==================================================
   Annuaire – uniformisation des vignettes
   ================================================== */

.card-thumb {
  width: 100%;
  height: 180px;                 /* hauteur uniforme */
  object-fit: cover;             /* crop intelligent */
  border-radius: 0.375rem;       /* cohérent avec .rounded */
  background-color: #f8f9fa;
}

/* Desktop : un peu plus haut */
@media (min-width: 992px) {
  .card-thumb {
    height: 250px;
  }
}

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

.badge-hover-muted:hover {
    color: #FF8040; /* 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 !important;
            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: 0.3rem auto;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    margin-left: 10px !important;
}

.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;
}

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

/* ========================
   TABLE DANS ARTICLE
======================== */

.comparison-table{
  width: fit-content;
  min-width: var(--thread-content-width);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.15);
}

.comparison-row{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
}

.comparison-cell{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-right: 1px solid rgba(255,255,255,.12);
}

.comparison-row .comparison-cell:last-child{ border-right: 0; }
.comparison-table .comparison-row:last-child .comparison-cell{ border-bottom: 0; }

.comparison-head{
  font-weight: 700;
  background: rgba(255,255,255,.06);
}