/* =============================================================================
   DARK MODE PERMANENT - Buzzarena Theme
   ============================================================================= */

/* =============================================================================
   GLOBAL
   ============================================================================= */

html {
    background: #121212 !important;
}

body {
    color-scheme: dark;
}

body {
    background: #121212 !important;
    color: #e8e8e8;
}

.global-container {
    background: #121212 !important;
}

.page-container {
    background: #121212 !important;
}

#ctBoc > .horizontal-wrapper {
    background: #1e1e1e;
}

/* =============================================================================
   HEADER — gardé identique au mode clair (pas d'override)
   ============================================================================= */

/* Nav bar reste bleue comme en mode clair */
.site-head .nav-bar {
    background: #15a2f6 !important;
}

.nav-main .menu-item > a:hover {
    color: #e8e8e8;
}

.nav-main .menu-item-object-category:hover > a {
    color: #000;
    background: #fff;
}

.nav-main .megamenu {
    background: #1a3a50;
}

.nav-main .megamenu .subcategories {
    background: #1e1e1e;
}

.nav-main .megamenu .title {
    color: #5ab4e8;
}

.nav-main .megamenu .post:hover .title {
    color: #e8e8e8;
}

/* Dropdown sub-menu (desktop) */
.nav-main .sub-menu {
    background: #1e1e1e !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.nav-main .sub-menu li a,
.nav-main .sub-menu li span {
    color: #e8e8e8 !important;
}

.nav-main .sub-menu li a:hover,
.nav-main .sub-menu li span:hover {
    background-color: #2a2a2a !important;
    color: #15a2f6 !important;
}

/* nav-inner sombre uniquement sur mobile (panneau slide-in) */
@media (max-width: 1000px) {
    .nav-main .nav-inner {
        background: #1e1e1e;
        color: #e8e8e8;
    }
    .nav-main .nav-inner a {
        color: #e8e8e8;
    }
}

/* =============================================================================
   FORMULAIRES
   ============================================================================= */

.form-control {
    background: #2a2a2a;
    border-color: #444;
    color: #e8e8e8;
}

.form-control::placeholder,
.form-control::-webkit-input-placeholder,
.form-control:-moz-placeholder,
.form-control::-moz-placeholder {
    color: #606060;
}

/* =============================================================================
   BREADCRUMB
   ============================================================================= */

.breadcrumb {
    color: #a0a0a0;
}

.breadcrumb .nodes .node a:hover {
    color: #e8e8e8;
}

.breadcrumb .nodes .node + .node:after {
    border-left-color: #121212;
}

/* =============================================================================
   ARTICLE / CONTENU
   ============================================================================= */

.rte h1, .rte h2, .rte h3,
.rte h4, .rte h5, .rte h6 {
    color: #e8e8e8;
}

.rte p, .rte li, .rte span,
.entry-content p, .entry-content li {
    color: #b8b8b8 !important;
}

.wp-caption p.wp-caption-text,
.wp-element-caption {
    color: #b8b8b8 !important;
}

/* =============================================================================
   LAYOUT ARTICLES (liste)
   ============================================================================= */

.layout-articles .term-description,
.layout-articles .entry-summary {
    color: #a0a0a0;
}

.layout-articles .share-counter,
.layout-articles .time-ago {
    color: #6e6e6e;
}

.layout-articles .share-counter .counter,
.layout-articles .share-counter .time,
.layout-articles .time-ago .counter,
.layout-articles .time-ago .time {
    color: #e8e8e8;
}

/* =============================================================================
   SIDEBAR
   ============================================================================= */

.sidebar .entry-thumbnail {
    background: #2a2a2a;
}

.sidebar .entry-thumbnail .share-counter {
    background: #1e1e1e;
    color: #a0a0a0;
}

.sidebar .entry-thumbnail .share-counter .counter {
    color: #e8e8e8;
}

.sidebar .share-counter {
    color: #6e6e6e;
}

.sidebar .share-counter .counter {
    color: #e8e8e8;
}

/* =============================================================================
   WIDGETS (titres et liens d'articles dans les widgets)
   ============================================================================= */

.widgettitle,
.post-title {
    color: #e8e8e8 !important;
}

.post-title a {
    color: #e8e8e8 !important;
}

.post-title a:hover {
    color: #15a2f6 !important;
}

/* =============================================================================
   SECTIONS (related, derniers articles)
   ============================================================================= */

.section-title {
    color: #e8e8e8 !important;
    background: #1e1e1e !important;
    border-color: #333;
}

/* (Regles dark des anciennes grilles section-related/section-last des
   singles purgees le 07/07/2026 — voir .section-related-list et
   .section-last-list plus bas.) */

.section-related {
    background: transparent !important;
}

.related-articles {
    background: #121212;
}

/* =============================================================================
   PAGINATION
   ============================================================================= */

.pagination ul .page-numbers {
    background: #1e1e1e;
    border-color: #333;
    color: #a0a0a0;
}

.pagination .btn-lazy:before {
    background-color: #1e1e1e;
}

.pagination--wppagenavi {
    background-color: #1e1e1e !important;
    box-shadow: none !important;
}

.pagination--wppagenavi ul li a,
.pagination--wppagenavi ul li span {
    background-color: #2a2a2a !important;
    color: #e8e8e8 !important;
}

.pagination--wppagenavi ul li.current span {
    background-color: #15a2f6 !important;
    color: #fff !important;
}

.pagination--wppagenavi ul li a:hover {
    background-color: rgba(21, 162, 246, 0.15) !important;
    color: #15a2f6 !important;
}

.pagination--wppagenavi ul li.nobtn .expand {
    background: none !important;
    color: #606060 !important;
}

.pagination--wppagenavi .arrows-pagination {
    background-color: #2a2a2a !important;
    color: #15a2f6 !important;
}

/* =============================================================================
   AUTHOR BOX
   ============================================================================= */

.wp-author-section {
    background-color: #1e1e1e;
}

.wp-author-section__title a {
    color: #e8e8e8;
}

.wp-author-section__title a:hover {
    color: #15a2f6;
}

.wp-author-section__social-link {
    background-color: #2a2a2a;
}

.wp-author-section__social-link:hover {
    background-color: #333;
}

.wp-author-section__social-icon {
    fill: #a0a0a0;
}

.wp-author-section__description {
    color: #a0a0a0;
}

/* Icônes réseaux de la PAGE auteur (archive.php, .social-svg) : en clair
   elles sont en #444, invisibles sur le fond sombre. Même convention que
   la box auteur ci-dessus (#a0a0a0, survol bleu thème). */
.author-social-links .social-svg {
    color: #a0a0a0;
}

.author-social-links .social-svg:hover {
    color: #15a2f6;
}

/* =============================================================================
   META AUTEUR (single article)
   ============================================================================= */

.sprite.sprite-icon-time {
    filter: invert(1);
}

.mycustom-author-name,
.mycustom-published-date,
.mycustom-author-info,
.mycustom-author-section {
    color: #e8e8e8 !important;
}

.mycustom-author-name:hover {
    color: #15a2f6 !important;
}

/* Boutons de partage */
.share-bar .share-link svg,
.share-bar svg {
    fill: #e8e8e8 !important;
}

.share-bar .share-link {
    color: #e8e8e8 !important;
}

.share-bar .share-link:hover svg {
    fill: #15a2f6 !important;
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.site-foot {
    background: #1e1e1e;
    border-top-color: #2a2a2a;
    color: #6e6e6e;
}

.site-foot .menu a:hover {
    color: #e8e8e8;
}

/* =============================================================================
   TABLES & CODE
   ============================================================================= */

.rte table {
    border-color: #333;
}

.rte table th {
    background: #2a2a2a;
    color: #e8e8e8;
    border-color: #333;
}

.rte table td {
    border-color: #333;
    color: #b8b8b8;
}

.rte table tr:nth-child(even) {
    background: #1a1a1a;
}

/* TablePress */
.tablepress {
    border-color: #333 !important;
}

.tablepress th,
.tablepress .column-1 {
    background: #2a2a2a !important;
    color: #e8e8e8 !important;
    border-color: #333 !important;
}

.tablepress td {
    background: #1e1e1e !important;
    color: #b8b8b8 !important;
    border-color: #333 !important;
}

.tablepress tr:nth-child(even) td {
    background: #1a1a1a !important;
}

.tablepress tr:hover td {
    background: #252525 !important;
}

code, pre {
    background: #2a2a2a;
    color: #e8e8e8;
    border-color: #333;
}

/* =============================================================================
   COMMENTAIRES
   ============================================================================= */

.comment-list .comment-body {
    background: #1e1e1e;
    border-color: #2a2a2a;
}

.comment-meta .comment-author .fn a,
.comment-meta .comment-author .fn,
cite.fn {
    color: #e8e8e8 !important;
}

.comment-metadata a {
    color: #a0a0a0;
}

/* Mise en page retravaillée : cartes, en-tête compact, réponses sans numéros. */

/* Carte : contour + coins arrondis + air, séparation par l'espace (plus de trait) */
.comment-list .comment-body {
    padding: 16px 18px;
    border: 1px solid #2f2f2f;
    border-radius: 10px;
    margin-bottom: 16px;
}
.comment-list li.comment {
    padding: 0;
    border-bottom: none;
}

/* En-tête : nom en gras (plus d'italique), « dit : » masqué, date alignée sous le nom */
.comment-list .comment-author {
    gap: 12px;
}
.comment-list cite.fn {
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
}
.comment-list .says {
    display: none;
}
.comment-list .comment-meta {
    padding-left: 62px; /* largeur avatar (50) + gap (12) → date sous le nom */
    margin: 2px 0 0;
    font-size: 12px;
}

/* Texte du commentaire */
.comment-list .comment-body > p {
    color: #c2c2c2;
    line-height: 1.6;
    margin: 12px 0 0;
}

/* « Répondre » : bleu marque + petite flèche */
.comment-list .comment-reply-link {
    color: #15a2f6;
    font-weight: 700;
}
.comment-list .comment-reply-link::before {
    content: "\21A9";
    margin-right: 5px;
}

/* Réponses imbriquées : barre bleue à gauche, fini le « 1. » */
.comment-list .children {
    list-style: none;
    border-left: 2px solid #15a2f6;
    margin-left: 20px;
    padding-left: 16px;
}

/* =============================================================================
   ARTICLE — éléments internes
   ============================================================================= */

/* SOMMAIRE — gardé en mode clair intentionnellement */

.google-news-link {
    background: #1e1e1e !important;
    border-color: #333 !important;
    color: #a0a0a0 !important;
}

.google-news-link a,
.google-news-link span {
    color: #a0a0a0 !important;
}

.entry-footer {
    background: #121212 !important;
    color: #a0a0a0 !important;
}

/* Thumbnails articles liés */
.entry-thumbnail,
article.item-related .entry-thumbnail {
    background: #2a2a2a !important;
}

/* =============================================================================
   SECTION GUIDE D'ACHAT (home)
   ============================================================================= */

.dossiers-section {
    background: #1e1e1e !important;
}

.dossier-title {
    color: #e8e8e8 !important;
}

.article-title {
    color: #e8e8e8;
}

.article-title a {
    color: #e8e8e8 !important;
}

.article-title a:hover {
    color: #15a2f6 !important;
}

.dossiers-wrapper {
    background: transparent;
}

/* =============================================================================
   HOME HIGHLIGHTS (slider)
   ============================================================================= */

.home-highlights {
    background: #121212 !important;
}

.home-highlights .article {
    border-color: #121212 !important;
}

.home-highlights .item,
.home-highlights .slide,
.home-highlights .entry-thumbnail {
    background: #1e1e1e !important;
}

/* =============================================================================
   PAGE AUTEUR
   ============================================================================= */

.title-xl span {
    color: #e8e8e8 !important;
}

.social-svg {
    color: #e8e8e8;
}

.social-svg svg path {
    fill: #e8e8e8 !important;
}

/* =============================================================================
   TLDR
   ============================================================================= */

.tldr {
    background-color: #252525 !important;
    border-left: 3px solid #279bf8;
}

.tldr ul li {
    color: #b8b8b8 !important;
}

/* =============================================================================
   WPFORMS (page contact)
   ============================================================================= */

.wpforms-field-label,
.wpforms-field-sublabel,
.wpforms-field-description,
.wpforms-required-label {
    color: #e8e8e8 !important;
}

.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #e8e8e8 !important;
}

.wpforms-field input::placeholder,
.wpforms-field textarea::placeholder {
    color: #606060 !important;
}

.wpforms-error {
    color: #ff6b6b !important;
}

/* =============================================================================
   BOUTONS GOOGLE (Suivez-nous + Sources préférées)
   ============================================================================= */

.google-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 14px;
    background: #107cbd;
    color: #fff !important;
    border: 1.5px solid #107cbd;
    border-radius: 999px;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin-top: 12px;
    margin-right: 6px;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.google-follow-btn:hover {
    opacity: 0.85;
    color: #fff !important;
}

.google-source-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    background: transparent;
    color: #15a2f6 !important;
    border: 1.5px solid #15a2f6;
    border-radius: 999px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    margin-top: 12px;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.google-source-btn svg {
    width: 18px;
    height: 18px;
    padding: 1px;
}

.google-source-btn:hover {
    background: #107cbd;
    color: #fff !important;
}

.google-source-btn svg {
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    box-sizing: content-box;
    flex-shrink: 0;
}

/* Override : espacement plus compact sur le conteneur auteur/share/google */
.mycustom-author-date-container {
    gap: 0.5rem !important;
}

/* =============================================================================
   CORRECTIFS LAYOUT « ZONE TABLETTE » (768 → 1080px)
   --------------------------------------------------------------------------
   Le thème est conçu pour un layout 2 colonnes (contenu + sidebar) dont les
   marges sont codées en pixels fixes (max-width 1080px). En dessous de 1080px
   ces valeurs débordent et le contenu colle aux bords. On bascule donc toute
   cette tranche en colonne unique propre. Au-dessus de 1080px : desktop intact.
   ============================================================================= */

/* Bouton recherche du header : il a un `right: -20px` codé en dur dans le thème
   (calé pour le desktop large où le wrapper est centré). Dès que l'écran ≤ wrapper,
   ces -20px le poussent hors de l'écran. On le ramène au bord. Inoffensif sur desktop. */
.site-head .block-search {
    right: 0 !important;
}

@media (min-width: 768px) and (max-width: 1080px) {

    /* 1. Gouttières latérales : .horizontal-wrapper a `padding: 0` dans le thème,
          donc sous 1080px le contenu colle aux bords (titre « collé »). */
    .global-container > .horizontal-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
    }

    /* 2. Articles liés : largeur figée `width: 1080px` (style.css) → déborde.
          On la rend fluide. */
    .layout-single .related-articles {
        width: 100% !important;
        max-width: 1080px !important;
    }

    /* 3. Header d'article : annule le `margin-right: -330px` (desktop, étend le
          header sous la sidebar) qui sortait ~310px de l'écran. */
    .layout-single .single-article .entry-header {
        margin-right: 0 !important;
    }

    /* 4. Sidebar : passe en pleine largeur sous le contenu (colonne unique) et
          on neutralise les marges/offsets sticky du desktop (margin-left, et le
          margin-bottom = hauteur des articles liés ≈ 1315px qui créait un grand
          vide avant le footer). */
    .page-container .sidebar {
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 5. Wrapper du header : width:100% + margin-left:40px + margin-right:-40px
          le faisait dépasser de ~40px à droite (boîtes vides du wrapper et du
          logo .site-title à mr:-200px) → petit débordement noir en haut à droite.
          width:auto + margin-right:0 le ramène dans l'écran (le hamburger garde
          son retrait gauche de 40px, le logo reste centré). */
    .site-head .horizontal-wrapper {
        width: auto !important;
        margin-right: 0 !important;
    }
}

/* Wrapper qui groupe les 2 boutons Google côte à côte */
.google-follow-buttons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.google-follow-buttons .google-follow-btn,
.google-follow-buttons .google-source-btn {
    margin-top: 0;
    margin-right: 0;
}

/* Tablette/Mobile (767px et moins) : boutons sur leur propre ligne, côte à côte */
@media (max-width: 767px) {
    .entry-meta {
        flex-wrap: wrap;
    }
    .entry-meta .google-follow-buttons {
        order: 99;
        width: 100%;
        justify-content: flex-start;
        margin-top: 12px;
        gap: 6px;
    }
    .google-follow-buttons .google-follow-btn {
        padding: 0 14px;
    }
    .google-follow-buttons .google-source-btn span {
        font-size: 13px;
    }
}

/* Téléphones (≤ 400px) : on raccourcit le libellé du bouton « sources » en
   masquant le mot « Buzzarena ». Le 2e bouton passe de ~260px à ~185px, ce qui
   permet de garder les 2 boutons côte à côte sur une seule ligne au lieu de les
   empiler en escalier. Au-dessus de 400px le mot « Buzzarena » reste visible.
   Le branding reste dans l'attribut title. */
@media (max-width: 400px) {
    .google-source-btn .gs-brand {
        display: none;
    }
}

/* Secours ultra-petits écrans (< 340px) : même raccourci, les 2 boutons ne
   rentrent plus sur une ligne → empilage vertical en pleine largeur. */
@media (max-width: 339px) {
    .entry-meta .google-follow-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .google-follow-buttons .google-follow-btn,
    .google-follow-buttons .google-source-btn {
        margin: 0;
        width: 100%;
    }
}

/* =============================================================================
   TRANSITIONS DOUCES
   ============================================================================= */

body,
.page-container,
.site-head,
.site-foot,
.form-control,
.wp-author-section,
.breadcrumb,
.sidebar .entry-thumbnail .share-counter,
.pagination ul .page-numbers {
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* =============================================================================
   PAGE 404 (récupération : recherche + rubriques)
   ============================================================================= */

.layout-404 .page-title {
    margin: 20px 0 10px;
    font-size: 32px;
    line-height: 1.2;
}

.layout-404 .search-form-404 {
    display: flex;
    gap: 8px;
    margin: 20px 0 40px;
    max-width: 520px;
}

.layout-404 .search-form-404 .form-control {
    flex: 1;
    height: 44px;
    line-height: 42px;
}

.layout-404 .search-form-404 .btn-submit {
    height: 44px;
    padding: 0 20px;
    line-height: 44px;
    cursor: pointer;
    white-space: nowrap;
}

.layout-404 .section-404-cats {
    margin: 0 0 40px;
}

.layout-404 .cat-links-404 {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.layout-404 .cat-links-404 li {
    margin: 0;
}

.layout-404 .cat-links-404 a {
    display: inline-block;
    padding: 8px 16px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 999px;
    color: #e8e8e8;
    font-size: 14px;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}

.layout-404 .cat-links-404 a:hover {
    background: #15a2f6;
    border-color: #15a2f6;
    color: #fff;
}

/* Grille des derniers articles (le template content-related n'a de style
   qu'en .layout-single ; on le recrée ici pour la 404/410). */
.layout-404 .related-articles {
    margin: 0;
}

.layout-404 .related-articles .articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 16px 0 0;
}

.layout-404 .related-articles .article {
    margin: 0;
    float: none;
    width: auto;
    cursor: pointer;
}

.layout-404 .related-articles .article .entry-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: #2a2a2a;
}

.layout-404 .related-articles .article .entry-thumbnail .image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.15s ease;
}

.layout-404 .related-articles .article:hover .entry-thumbnail .image {
    opacity: 0.8;
}

.layout-404 .related-articles .article .categories {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: #15a2f6;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 7px;
}

.layout-404 .related-articles .article .entry-title {
    margin: 9px 0 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.layout-404 .related-articles .article .entry-title a {
    color: #e8e8e8;
    transition: color 0.15s ease;
}

.layout-404 .related-articles .article:hover .entry-title a {
    color: #15a2f6;
}

@media (max-width: 767px) {
    .layout-404 .related-articles .articles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 460px) {
    .layout-404 .related-articles .articles {
        grid-template-columns: 1fr;
    }
    .layout-404 .search-form-404 {
        flex-direction: column;
    }
}

/* =============================================================================
   TITRES DE SECTIONS ACCUEIL PASSES EN <h2>
   Neutralise les marges par defaut du navigateur pour garder un rendu identique
   (l'apparence reste portee par les classes .title / .title-xl / .dossier-title)
   ============================================================================= */
.home-highlights h2.title,
h2.title-xl,
h2.dossier-title {
    margin: 0;
}

/* =============================================================================
   FOOTER - BLOC UNIVERS (maillage interne, ajout 05/07/2026)
   Desktop : 4 colonnes ouvertes (h3 + listes). Tablette : 2 colonnes.
   Mobile (wp_is_mobile) : accordeon <details>/<summary> replie par defaut,
   zero JS, liens presents dans le DOM donc crawlables.
   ============================================================================= */

.footer-univers {
    max-width: 1080px;
    margin: 0 auto 30px;
    padding: 0 20px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.univers-colonnes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: left;
}

.footer-univers .menu-title {
    margin-top: 0;
    color: #fff;
}

.footer-univers .menu-links li {
    margin-bottom: 8px;
}

.footer-univers .menu-links a {
    color: #ffffff;
}

.footer-univers .menu-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.univers-pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 24px 0 0;
}

.univers-pills li {
    margin: 0;
}

.univers-pills a {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    padding: 5px 14px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.univers-pills a:hover {
    background: #fff;
    color: #107cbd;
}

@media (max-width: 900px) {
    .univers-colonnes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .univers-colonnes {
        display: block;
    }
}

details.univers-groupe {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

details.univers-groupe summary.menu-title {
    list-style: none;
    cursor: pointer;
    margin: 0;
    padding: 13px 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

details.univers-groupe summary.menu-title::-webkit-details-marker {
    display: none;
}

details.univers-groupe summary.menu-title::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

details.univers-groupe[open] summary.menu-title::after {
    transform: rotate(-135deg);
}

details.univers-groupe .menu-links {
    padding: 0 2px 14px;
}

/* Mobile : la sidebar empilée (ex. widget « C'est tendance », fond bleu)
   arrivait a 0px du footer bleu — les deux surfaces se confondaient.
   On resserre un ecart sombre entre le contenu et le footer. */
@media (max-width: 768px) {
    .site-footer {
        margin-top: 30px;
    }
}

/* =============================================================================
   NEWSLETTER FIN D'ARTICLE (ajout 06/07/2026)
   Bloc place apres la pub ad_article_bottom sur les singles (tpl-single.php).
   Le formulaire est rendu par MailPoet (shortcode id=1) : on ecrase son style
   par defaut ici. Le lien confidentialite est obfusque (.link-posts/data-href).
   ============================================================================= */

.newsletter-signup {
    background: #1a3a50;
    border-radius: 8px;
    padding: 22px;
    margin: 25px 0;
}

.newsletter-title {
    margin: 0 0 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.newsletter-desc {
    margin: 0 0 14px;
    color: #a8c6dd;
    font-size: 13px;
    line-height: 1.5;
}

.newsletter-signup form.mailpoet_form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
}

.newsletter-signup .mailpoet_paragraph {
    margin: 0 !important;
}

.newsletter-signup .mailpoet_paragraph:has(.mailpoet_text) {
    flex: 1 1 240px;
}

.newsletter-signup label.mailpoet_text_label,
.newsletter-signup label.mailpoet_submit_label {
    display: none;
}

.newsletter-signup input.mailpoet_text {
    width: 100% !important;
    background: #121212 !important;
    border: 1px solid #2f5570 !important;
    border-radius: 5px !important;
    color: #e8e8e8 !important;
    padding: 10px 12px;
    font-size: 14px;
}

.newsletter-signup input.mailpoet_text::placeholder {
    color: #777;
}

.newsletter-signup input.mailpoet_submit {
    background: #15a2f6 !important;
    border: 0 !important;
    border-radius: 5px !important;
    color: #06202e !important;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.newsletter-signup input.mailpoet_submit:hover {
    background: #64c4fc !important;
}

.newsletter-signup .mailpoet_message {
    flex-basis: 100%;
    margin: 0;
}

.newsletter-signup .mailpoet_validate_success {
    color: #8fd9a8;
    font-size: 13px;
}

.newsletter-signup .mailpoet_validate_error {
    color: #f09595;
    font-size: 13px;
}

.newsletter-privacy {
    margin: 10px 0 0;
    color: #7fa5c2;
    font-size: 11.5px;
    line-height: 1.5;
}

.newsletter-privacy .link-posts {
    color: #51abe0;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 600px) {
    .newsletter-signup {
        padding: 18px;
    }
    /* Chaque champ sur sa propre ligne : le conteneur du bouton doit
       s'etirer, sinon width:100% ne s'applique qu'a ses 113px naturels. */
    .newsletter-signup form.mailpoet_form .mailpoet_paragraph {
        flex: 1 1 100%;
    }
    .newsletter-signup input.mailpoet_submit {
        width: 100%;
    }
}

/* Pages MailPoet (confirmation / gestion d'abonnement) : gabarit
   single-mailpoet_page.php, memes blocs de retention que la 404
   (rubriques + derniers articles) — le style vient de .layout-404.
   Sur la 404 le formulaire de recherche aere le haut de page ; ici il
   n'y est pas, donc on recree l'espace sous le message MailPoet. */

.layout-mailpoet .page-title {
    margin-bottom: 16px;
}

.layout-mailpoet .rte {
    margin-bottom: 45px;
}

/* Message de confirmation : encadre bleu + coche de succes. Cible un
   paragraphe seul uniquement — la page de gestion d'abonnement (meme
   gabarit) contient un formulaire, elle n'est donc pas touchee. */
.layout-mailpoet .rte > p:only-child {
    position: relative;
    background: #1a3a50;
    border-radius: 8px;
    padding: 16px 20px 16px 52px;
    margin: 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
}

.layout-mailpoet .rte > p:only-child::before {
    content: "\2713";
    position: absolute;
    left: 18px;
    top: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #15a2f6;
    color: #06202e;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
}

/* Formulaire de gestion de l'abonnement (etat "manage" de la page
   MailPoet) : champs blancs, encart clair illisible et bouton bleu
   WordPress par defaut → alignement sur la charte dark. */
.layout-mailpoet .mailpoet-manage-subscription .mailpoet_paragraph {
    margin-bottom: 16px;
}

/* Zones de saisie laissees en BLANC (preference utilisateur 06/07/2026),
   comme le champ e-mail du haut — on n'harmonise que l'arrondi. */
.layout-mailpoet .mailpoet-manage-subscription input.mailpoet_text,
.layout-mailpoet .mailpoet-manage-subscription select.mailpoet_select {
    background: #ffffff !important;
    border-radius: 5px !important;
    color: #111827 !important;
    padding: 9px 12px;
}

.layout-mailpoet .mailpoet-manage-subscription-no-lists {
    background: #1e1e1e !important;
    border-color: #3a3a3a !important;
    color: #b8b8b8 !important;
    border-radius: 5px;
    padding: 10px 14px;
}

.layout-mailpoet .mailpoet-manage-subscription input.mailpoet_submit {
    background: #15a2f6 !important;
    border: 0 !important;
    border-radius: 5px !important;
    color: #06202e !important;
    font-weight: 700;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.layout-mailpoet .mailpoet-manage-subscription input.mailpoet_submit:hover {
    background: #64c4fc !important;
}

/* =============================================================================
   WIDGET NEWSLETTER EN SIDEBAR (ajout 06/07/2026)
   Widget "MailPoet - Formulaire" (zones sidebar-home/archive/search) :
   meme formulaire id=1 que le bloc fin d'article, version compacte empilee.
   ============================================================================= */

.widget-container.widget_mailpoet_form {
    background: #1a3a50;
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
    text-align: center;
}

/* Pastille eclair au-dessus du titre (design "signature" choisi le 06/07). */
.widget-container.widget_mailpoet_form::before {
    content: "";
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background-color: #15a2f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306202e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

/* MailPoet impose sa propre police (serif) aux champs et boutons :
   on force celle du site (vaut pour le widget ET le bloc fin d'article). */
.widget_mailpoet_form input.mailpoet_text,
.widget_mailpoet_form input.mailpoet_submit,
.newsletter-signup input.mailpoet_text,
.newsletter-signup input.mailpoet_submit {
    font-family: inherit !important;
}

.widget_mailpoet_form .widgettitle {
    margin: 0 0 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

/* Sous-titre injecte en CSS (le widget MailPoet n'a pas de champ
   description ; un paragraphe dans le form editor apparaitrait aussi
   dans le bloc fin d'article qui utilise le meme formulaire). */
.widget_mailpoet_form .widgettitle::after {
    content: "L'actu qui buzz, chaque matin. Gratuit.";
    display: block;
    margin-top: 4px;
    color: #a8c6dd;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.4;
}

.widget_mailpoet_form input.mailpoet_text {
    text-align: left;
}

.widget_mailpoet_form form.mailpoet_form {
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
}

.widget_mailpoet_form .mailpoet_paragraph {
    margin: 0 0 8px !important;
}

.widget_mailpoet_form label.mailpoet_text_label,
.widget_mailpoet_form label.mailpoet_submit_label {
    display: none;
}

.widget_mailpoet_form input.mailpoet_text {
    width: 100% !important;
    background: #121212 !important;
    border: 1px solid #2f5570 !important;
    border-radius: 5px !important;
    color: #e8e8e8 !important;
    padding: 9px 12px;
    font-size: 13px;
}

.widget_mailpoet_form input.mailpoet_text::placeholder {
    color: #777;
}

.widget_mailpoet_form input.mailpoet_submit {
    width: 100%;
    background: #15a2f6 !important;
    border: 0 !important;
    border-radius: 5px !important;
    color: #06202e !important;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.widget_mailpoet_form input.mailpoet_submit:hover {
    background: #64c4fc !important;
}

.widget_mailpoet_form .mailpoet_message {
    margin: 0;
}

.widget_mailpoet_form .mailpoet_validate_success {
    color: #8fd9a8;
    font-size: 12px;
}

.widget_mailpoet_form .mailpoet_validate_error {
    color: #f09595;
    font-size: 12px;
}

/* Variante mobile inseree dans le flux des actus (home.php, apres la
   5e actu, wp_is_mobile) — memes classes donc meme design "eclair". */
.newsletter-inline-mobile {
    clear: both;
    margin: 20px 0;
}

/* Ecart sous l'author-box en mobile : style.css (~l.4287) reserve 56px
   de padding-bottom pour une .article-toolbar-footer qui n'existe que
   dans tpl-ops.php (template mort) — jamais rendue sur les articles.
   Scope body.single pour ne pas toucher d'eventuelles pages OPS. */
@media only screen and (max-width: 767px) {
    .single .layout-single .single-article {
        padding-bottom: 0;
    }
}

/* =============================================================================
   "A LIRE ENSUITE" — liste numerotee (design C valide le 06/07/2026)
   Remplace la grille "Vous aimerez aussi" sur les singles (tpl-single.php
   + content-related-list.php). La grille content-related reste en place
   pour "Derniers articles" et la 404/410.
   ============================================================================= */

.section-related-list {
    margin: 30px 0;
}

/* Titre maquette : "⚡ A lire ensuite" a gauche, sans la bande noire
   centree/majuscules du .section-title standard (qui reste utilisee
   par "Derniers articles"). */
.section-related-list .section-title {
    display: block;
    width: auto;
    margin: 0 0 4px;
    padding: 0;
    background: none !important;
    border: 0;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-size: 22px;
    font-weight: 800;
    color: #15a2f6 !important;
}

.section-related-list .section-title::before {
    content: "";
    display: inline-block;
    position: static;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    vertical-align: -3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233cb4fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E") no-repeat center / 22px 22px !important;
}

/* Trait decoratif du .section-title standard : supprime ici. */
.section-related-list .section-title::after {
    display: none !important;
}

.related-list {
    margin-top: 10px;
}

/* "Nos dernieres actualites" (bas des singles) : listing repris de la
   home/archives via content-loop + wrapper .layout-articles. La liste
   est dans .articles-list (PAS .articles) pour echapper aux regles de
   grille .related-articles .articles de style.css. Le wrapper
   .related-articles (garde pour le JS sticky sidebar) forcait 1080px
   pleine page + centrage : ramene dans la colonne. */
.layout-single .related-articles {
    width: auto !important;
    margin: 40px 0 0 !important;
    text-align: left !important;
}

/* Sidebar sticky des singles : margin-bottom reservait la hauteur de
   .related-articles (epoque bande 1080px passant SOUS la sidebar).
   La section est revenue dans la colonne -> la sidebar accompagne
   desormais toute la page. */
.single-post .page-container .sidebar {
    margin-bottom: 0 !important;
}

.section-last-list {
    margin: 0 0 50px;
}

.section-last-list .articles-list .article {
    margin: 0 0 22px !important;
    width: auto !important;
    float: none !important;
}

.section-last-list .section-title {
    display: block !important;
    width: auto;
    margin: 0 0 14px;
    padding: 0 !important;
    background: none !important;
    border: 0;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 22px !important;
    font-weight: 800;
    color: #15a2f6 !important;
}

.section-last-list .section-title::before {
    content: "";
    display: inline-block;
    position: static;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    vertical-align: -3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233cb4fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center / 22px 22px !important;
}

.section-last-list .section-title::after {
    display: none !important;
}

/* "Reagissez a cet article !" : aligne sur le meme systeme de titres
   (bleu accent 19px + icone bulle). */
.section-comments .title-lg {
    font-size: 22px;
    font-weight: 800;
    color: #15a2f6;
}

.section-comments .title-lg::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    vertical-align: -3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233cb4fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
}

/* Carte d'invitation aux commentaires (design valide le 07/07/2026) :
   texte + bouton dans un encadre — le bouton se masque au clic (JS),
   le texte reste au-dessus du formulaire ouvert. */
.comments-invite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #1e1e1e;
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    padding: 18px 20px;
    margin: 14px 0 0;
}

.comments-invite-text {
    margin: 0;
    color: #9a9a9a;
    font-size: 13.5px;
    line-height: 1.5;
}

.comments-invite .show-comment-form {
    background: #15a2f6 !important;
    border: 0 !important;
    border-radius: 5px !important;
    color: #06202e !important;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0 !important;
    transition: background 0.15s ease;
}

.comments-invite .show-comment-form:hover {
    background: #64c4fc !important;
}

@media (max-width: 600px) {
    .comments-invite {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Meta "CATEGORIE · date" (maquette) : chip bleue + date grise sur une
   ligne, horloge sprite et pills d'etiquettes masquees dans la section. */
.section-last-list .entry-meta {
    display: flex;
    align-items: center;
}

.section-last-list .loop-cat {
    color: #15a2f6;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.section-last-list .loop-cat::after {
    content: "\00B7";
    margin: 0 5px;
    color: #666;
    font-weight: 400;
}

.section-last-list .cat-links {
    display: none;
}

.section-last-list .time-ago .sprite-icon-time {
    display: none;
}

.section-last-list .time-ago .time {
    color: #8a8a8a;
    font-size: 11px;
}

/* (bouton "Voir toutes les actualites" retire le 07/07/2026) */

.related-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
    text-decoration: none;
}

.related-thumb {
    width: 72px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 4px 4px 0 #1a3a50;
    transition: box-shadow 0.15s ease;
    background-color: #1a3a50;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233cb4fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

/* Ombre decalee "1A" sur les vignettes de la liste (hover -> accent). */
.section-last-list .entry-thumbnail {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 5px 5px 0 #1a3a50;
    transition: box-shadow 0.15s ease;
}

.section-last-list .article:hover .entry-thumbnail {
    box-shadow: 5px 5px 0 #15a2f6;
}

/* Tuile par defaut de "Nos dernieres actualites" (article sans image). */
.section-last-list .entry-thumbnail--default {
    aspect-ratio: 3 / 2;
    border-radius: 6px;
    background-color: #1a3a50;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233cb4fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
}

.related-thumb .image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.15s ease;
}

.related-row:hover .related-thumb {
    box-shadow: 4px 4px 0 #15a2f6;
}

.related-row:hover .related-thumb .image {
    opacity: 0.8;
}

.related-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: #e8e8e8;
    transition: color 0.15s ease;
}

.related-row:hover .related-title {
    color: #15a2f6;
}

.related-cat {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #15a2f6;
}
.layout-mailpoet .section-404-cats {
    margin-bottom: 45px;
}