/* GeneratePress Site CSS */
/* grey line under navigation */
.site-header {
	border-bottom: 1px solid #dddddd;
}

/* makes featured article section full width */
.generate-columns-container .featured-column {
	width: 100%;
}

/* =====SEPARATEUR MANUEL===== */

.separateur-dgedl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* espace entre tous les éléments */
    margin: 40px 0;
    font-size: 2.5rem;
}

/* Symbole central */
.symbole {
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1;
    background: linear-gradient(135deg, #4a90e2, #9b59b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Groupes de points */
.point-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.point-group.left .point {
    background: linear-gradient(135deg, #4a90e2, #9b59b6);
}

.point-group.right .point {
    background: linear-gradient(135deg, #9b59b6, #4a90e2); /* inversion pour symétrie */
}

/* Tailles des points */
.point {
    border-radius: 50%;
    width: 6px;
    height: 6px;
}

.point.small {
    width: 4px;
    height: 4px;
}

.point.medium {
    width: 8px;
    height: 8px;
}

.point.large {
    width: 12px;
    height: 12px;
}

/* Nouvelles tailles de points */
.point.xsmall {
    width: 2px;
    height: 2px;
}

.point.xlarge {
    width: 16px;
    height: 16px;
}

/* Ajustements responsifs UNIFIÉS */
@media (max-width: 600px) {
    .separateur-dgedl {
        gap: 6px;
        font-size: 2rem;
    }
    .point-group {
        gap: 3px;
    }
    .point.small { 
        width: 3px; 
        height: 3px; 
    }
    .point.medium { 
        width: 6px; 
        height: 6px; 
    }
    .point.large { 
        width: 9px; 
        height: 9px; 
    }
    .point.xsmall {
        width: 2px;
        height: 2px;
    }
    .point.xlarge {
        width: 12px;
        height: 12px;
    }
}

/* =====Centre la vidéo, ajoute un espace en bas et un cadre===== */
.wp-video {
    display: block;
    margin: 0 auto 20px auto; 
    border-radius: 10px; 
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
    padding: 5px; 
    background: white; 
}

/* =======================
 * Ligne élégante sous les H2 – style biblio cohérent
 * ====================== */
.post .entry-content h2,
.page .entry-content h2 {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 32px;
    border-bottom: 3px solid #7CB342;     /* vert principal comme ta biblio */
}

.post .entry-content h2::after,
.page .entry-content h2::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 90px;                           /* longueur comme dans ta biblio */
    height: 3px;
    background: #5C6BC0;                   /* le beau bleu-indigo */
}

/* =======================
 * BLOCKQUOTE – Citations
 * ====================== */
blockquote {
  font-size: 1.15rem;
  color: #3a4a5a !important;
  border-left: 3px solid #8d3686; /* Violet signature */
  margin: 2.5em 0 2.5em 20px;
  padding: 1.2em 1.8em;
  background: #f9f5fc !important; /* Fond violet extrêmement pâle */
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.7;
}
/* blockquote paragraphs + links — specificity wins over functions.php .entry-content p */
.entry-content blockquote p,
.entry-content blockquote li {
  color: #3a4a5a !important;
}
.entry-content blockquote a {
  color: #6b2fa0 !important; /* violet foncé, lisible sur fond #f9f5fc */
}

/* =======================
 * Liens soulignés et gras
 * ======================= */
.single-post .entry-content a {
  text-decoration: underline;
  font-weight: bold;
}

/* =======================
 * BOUTON PERSONNALISÉ
 * ======================= */
.custom-button,
.page .custom-button,
.page .entry-content .custom-button,
.page-template-default .custom-button,
.single-post .entry-content .custom-button,
.entry-content .custom-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.05em;
    font-weight: 600;
    color: #1e293b !important;
    background: #f8f9fa !important;
    padding: 13px 30px;
    border-radius: 50px;
    border: 1px solid #e0e6ed;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    text-decoration: none !important;
    margin: 30px auto;
    width: fit-content;
}
.custom-button:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}
.custom-button::before {
    content: "→";
    font-size: 1.25em;
    transition: transform 0.3s ease;
}
.custom-button:hover::before {
    transform: translateX(6px);
}

/* =======================
 * EXERGUE – Mise en relief personnelle
 * ====================== */
.note-color {
    background: linear-gradient(135deg, #f5f8fa 0%, #eef2f7 100%) !important;
    border-left: 4px solid #2c7da0;
    padding: 1.5em 2em;
    margin: 2.5em 0;
    border-radius: 0 8px 8px 0;
    font-style: normal;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2f3e !important;
    line-height: 1.75;
    font-size: 1.05rem;
    box-shadow: 0 2px 6px rgba(44, 125, 160, 0.06);
}

/* Espacement naturel entre paragraphes */
.note-color p {
    margin: 0 0 1.2em 0;
    padding: 0;
}
.entry-content .note-color p,
.entry-content .note-color li {
    color: #1e2f3e !important;
}

/* Supprime la marge du dernier paragraphe pour éviter un espace vide en bas */
.note-color p:last-child {
    margin-bottom: 0;
}

/* Accentuation subtile des termes importants */
.note-color strong, .note-color b {
    color: #25637a;
    font-weight: 600;
}

/* Titres (h2, h3, h4) dans l'encadré note-color : forcer une couleur sombre lisible.
   Le thème colore les titres en gris clair / dégradé clair (prévu pour fond sombre) ;
   sur le fond clair de l'encadré, ils deviennent invisibles. */
.single-post .entry-content .note-color h2,
.single-post .entry-content .note-color h3,
.single-post .entry-content .note-color h4,
.page .entry-content .note-color h2,
.page .entry-content .note-color h3,
.page .entry-content .note-color h4 {
    color: #1e2f3e !important;
    -webkit-text-fill-color: #1e2f3e !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

/* Ajustement mobile pour conserver la lisibilité */
@media (max-width: 600px) {
    .note-color {
        padding: 1.2em 1.5em;
        margin: 2em 0;
        font-size: 1rem;
        border-radius: 0 6px 6px 0;
    }
}

/* ===============================
 * BIBLIOGRAPHIE - Version optimisée & nettoyée
 * ============================== */
.bibliography-container {
    margin: 40px auto;
    width: 85%;
    max-width: 1100px;
    background: linear-gradient(135deg, #fafbfc 0%, #f0f4f0 100%);
    border-radius: 10px;
    border: 1px solid #e0e6e0;
    box-shadow: 0 4px 20px rgba(124, 179, 66, 0.08);
    padding: 30px 35px;
    overflow-x: auto;
}

.bibliography-container h2 {
    text-align: left;
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c3e50;
    letter-spacing: -0.5px;
    margin: 0 0 30px 0;
    padding: 0 0 15px 0;
    background: transparent;
    border: none;
    border-bottom: 3px solid #7CB342;
    position: relative;
}

.bibliography-container h2::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 80px;
    height: 3px;
    background: #5C6BC0;
}

.bibliography-section {
    margin-top: 0;
}

.bibliography-section + .bibliography-section {
    margin-top: 40px;
}

.bibliography-section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #5C6BC0;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 4px solid #7CB342;
    padding-left: 15px;
    margin: 25px 0 20px 0;
    padding-bottom: 0;
}

/* Tableau - Version compacte et lisible */
.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    margin-top: 5px;
}

.custom-table td {
    padding: 10px 16px;
    background-color: #111827 !important;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: 1px solid #374151;
    font-size: 1.2rem;
    line-height: 1.5;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: #E5E7EB !important;
}

.custom-table td:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
}

.custom-table p {
    font-size: 1rem;
    color: #555;
    margin: 6px 0 0 28px;
    font-style: italic;
    line-height: 1.5;
}

/* Styles pour les liens directs dans les cellules (si tu n'utilises plus h4) */
.custom-table td a:not(:has(h4)) {
    display: block;
    text-decoration: none;
    color: #2c3e50;
    font-size: 1.15rem;
    padding: 4px 0;
    transition: color 0.2s ease;
}

.custom-table td a:not(:has(h4)):hover {
    color: #1abc9c;
}

/* Différenciation des bordures gauches par section (optionnel) */
.bibliography-section:nth-child(2) .custom-table td {
    border-left-color: #6366f1;     /* indigo-violet pour "Sources fiables" */
}

.bibliography-section:nth-child(3) .custom-table td {
    border-left-color: #10b981;     /* vert émeraude pour "Références de mon blog" */
}

/* ==============================
 * ENCARTS DE FIN D'ARTICLE (16/09/2026)
 * Sources externes (Grok+Brave) vs maillage interne — couleur différenciée.
 * ============================ */

/* Encart interne : bordure gauche + lien d'une couleur distincte de l'externe.
   L'externe garde la couleur par défaut du thème (teal #4ECDC4 DGEDL / indigo
   #818CF8 UNTEL). L'interne passe en ambre/orange pour un repère visuel net.
   ⚠️ `!important` OBLIGATOIRE : le thème (functions.php) déclare
   `.custom-table td a{color:#4ECDC4!important}` — sans `!important`, la couleur
   ambre serait écrasée. Même bloc que dans functions.php (les 2 canaux cohérents). */
.internal-links-block .custom-table td {
    border-left: 3px solid #F59E0B !important;   /* ambre — différencie le maillage interne */
}

.internal-links-block .custom-table td a {
    color: #F59E0B !important;
}

.internal-links-block .custom-table td a:hover {
    color: #FBBF24 !important;
}

/* Titre du bloc interne : même accent ambre que sa bordure. */
.internal-links-block h3 {
    border-left-color: #F59E0B !important;
}

/* ==============================
 * TABLEAU MODERNE – VERSION OPTIMISÉE
 * ============================ */
.custom-table2 {
    width: 100%;
    table-layout: fixed; /* Empêche le débordement : colonnes forcées dans 100% */
    border-collapse: separate;
    border-spacing: 0;
    background: #111827 !important;  /* dark theme (S42) */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Plus de profondeur */
    margin: 2em 0; /* Plus d'espace */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
}

/* En-tête avec dégradé plus doux */
.custom-table2 th {
    background: linear-gradient(135deg, #546e7a, #37474f); /* Gris-bleu plus pro */
    color: white;
    font-weight: 500; /* Moins gras = plus moderne */
    padding: 16px 12px;
    text-align: center;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.8px; /* Plus d'espacement */
    white-space: normal; /* Autorise la casse — évite le débordement du tableau */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ⚠️ FIX 02/10/2026 (article 20816) : les liens dans les <th> héritaient de la
   règle globale `a{color:#4ECDC4!important}` (functions.php:94) → teal sur fond
   gris-bleu foncé = illisible (« NordVPN »/« ProtonVPN » vert sur vert).
   `!important` OBLIGATOIRE pour battre la règle globale du thème. */
.custom-table2 th a,
.custom-table2 th a:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.custom-table2 th a:hover {
    color: #E5E7EB !important;
    text-decoration: underline !important;
}

/* Cellules — dark theme (S42 fix: colors match theme, !important beats functions.php) */
.custom-table2 td {
    padding: 14px 12px;
    text-align: center;
    border-bottom: 1px solid #1F2937;
    color: #E5E7EB !important;
    transition: all 0.2s ease;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ✅ Fond alterné dark */
.custom-table2 tbody tr:nth-child(even) td {
    background-color: #0F0F14 !important;
}

.custom-table2 tbody tr:nth-child(odd) td {
    background-color: #111827 !important;
}

/* Effet au survol */
.custom-table2 tbody tr:hover td {
    background-color: #1F2937 !important;
}

/* Style pour la première colonne (noms des solutions) */
.custom-table2 td:first-child {
    font-weight: 600;
    color: #F9FAFB !important;
    text-align: left;
    padding-left: 18px;
    border-right: 1px solid #374151;
}

/* Badges pour les "Oui/Non" */
.custom-table2 td .badge-yes {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
    padding: 4px 8px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
}

.custom-table2 td .badge-no {
    display: inline-block;
    background: #fee2e2;
    color: #991b1b;
    padding: 4px 8px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ✅ Pour la colonne MV3 */
.custom-table2 td .check-ok {
    color: #059669;
    font-size: 1.2rem;
}

/* RESPONSIVE AMÉLIORÉ */
@media (max-width: 900px) { /* Seuil plus haut pour les tableaux larges */
    .custom-table2 {
        font-size: 0.85rem;
    }
    
    .custom-table2 th {
        white-space: normal; /* Autorise la casse */
        padding: 12px 6px;
        font-size: 0.75rem;
    }
    
    .custom-table2 td {
        padding: 12px 6px;
    }
}

@media (max-width: 700px) {
    /* Transformation en "cards" pour mobile */
    .custom-table2,
    .custom-table2 thead,
    .custom-table2 tbody,
    .custom-table2 tr,
    .custom-table2 td {
        display: block;
    }
    
    .custom-table2 thead {
        display: none; /* Cache l'en-tête */
    }
    
    .custom-table2 tr {
        margin-bottom: 20px;
        border: 1px solid #374151;
        border-radius: 12px;
        overflow: hidden;
        background: #111827;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    }
    
    .custom-table2 td {
        display: flex;
        align-items: flex-start; /* fix 17/09/2026 : top-align, le contenu peut être multi-lignes */
        flex-wrap: wrap;         /* fix 17/09/2026 : évite qu'un <a> devienne une colonne flex parasite */
        gap: 0 10px;             /* fix 17/09/2026 : espace label/contenu sans casser le flux */
        padding: 12px 15px;
        border: none;
        border-bottom: 1px solid #1F2937;
        text-align: left;
    }
    
    .custom-table2 td:last-child {
        border-bottom: none;
    }
    
    /* Style pour les labels */
    .custom-table2 td:before {
        content: attr(data-label);
        font-weight: 600;
        flex: 0 0 110px;   /* fix 17/09/2026 : largeur fixe, ne se dilate pas */
        width: auto;       /* fix 17/09/2026 : width fixe remplacé par flex-basis */
        min-width: 0;
        color: #9CA3AF;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* fix 17/09/2026 : le contenu (texte + liens) reste dans UN seul flux.
       Sans ça, un <a> dans un <td> devient un flex item séparé → « case en plus ». */
    .custom-table2 td > a,
    .custom-table2 td > strong,
    .custom-table2 td > em,
    .custom-table2 td > span {
        flex: 0 1 auto;
    }
    
    /* Première cellule = titre de la carte */
    .custom-table2 td:first-child {
        background: linear-gradient(135deg, #0D9488, var(--color-accent));
        color: white !important;
        font-weight: 600;
        font-size: 1.1rem;
        display: flex;
        justify-content: center;
        padding: 15px;
        border-right: none;
    }
    
    .custom-table2 td:first-child:before {
        display: none; /* Pas de label pour le titre */
    }
}

/* ==========================
 * Séparateur de paragraphe uniquement dans le contenu principal
 * =========================== */
#main .paragraphe-separateur {
    height: 3px;
    background: linear-gradient(90deg, #000, #888, #fff, #888, #000);
    margin: 30px 0;
}

/* ==========================
 * Flèche devant chaque titre H3
 * =========================== */
article h3:before,
.page h3:before {
    content: "››";
    font-size: 30px;
    color: #263dbf;
    margin-right: 10px;
}

/* ==========================
 * PUCES AVEC CHEVRONS VIOLETS
 * =========================== */
#main .post ul,
#main .page ul,
.entry-content ul:not(.wp-block-gallery) {
    list-style-type: none;
    padding-left: 1.2em;
    margin: 1.2em 0 1.2em 0.8em;
}

#main .post ul li,
#main .page ul li,
.entry-content ul:not(.wp-block-gallery) li {
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 0.8em;
    line-height: 1.6;
}

/* Chevrons violets élégants */
#main .post ul:not(.bibliography-container) li::before,
#main .page ul:not(.bibliography-container) li::before,
.entry-content ul:not(.wp-block-gallery):not(.bibliography-container) li::before {
    content: '›';
    font-size: 26px;
    font-weight: bold;
    color: #8d3686;
    position: absolute;
    left: 0;
    top: -3px;
}

/* Style pour les listes imbriquées (niveau 2) */
#main .post ul ul,
#main .page ul ul,
.entry-content ul ul {
    margin-left: 1.5em;
    margin-top: 0.5em;
}

#main .post ul ul li::before,
#main .page ul ul li::before,
.entry-content ul ul li::before {
    content: '›';
    font-size: 22px;
    color: #993399;
    top: -1px;
}

/* Style pour les listes imbriquées (niveau 3) */
#main .post ul ul ul li::before,
#main .page ul ul ul li::before,
.entry-content ul ul ul li::before {
    content: '›';
    font-size: 18px;
    color: #a64ca6;
}

/* ==========================
 * Vidéos insérées responsive design
 * =========================== */
.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.responsive-video iframe,
.responsive-video video,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================
 * Supprime la couleur/contour rouge au survol des liens affiliés
 * =========================== */
.entry-content a[rel~="nofollow"]:hover,
.entry-content a[rel~="sponsored"]:hover {
    color: #5EEAD4 !important;       /* Teal hover lisible sur dark theme (#000000 était invisible) */
    outline: none !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}

/* ==========================
 * Encarts promotionnels dynamiques
 * =========================== */
.promo-aside {
  padding: 20px;
  margin: 30px 0;
  border-radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
  line-height: 1.6;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  background-color: #fff;
}

.promo-ai {
  border-left: 4px solid #3a86ff;
  background-color: #f8fbff;
  color: #2c3e50;
}

.promo-vpn {
  border-left: 4px solid #ff6b35;
  background-color: #fffaf5;
  color: #2c3e50;
}

.promo-book {
  border-left: 4px solid #8e44ad;
  background: linear-gradient(180deg, #fcf9ff, #f8f4ff);
  color: #2c3e50;
}

.promo-aside h3 {
  margin-top: 0;
  font-size: 1.35rem;
  color: inherit;
}

.promo-aside p {
  margin: 12px 0;
}
.entry-content .promo-aside p,
.entry-content .promo-aside li {
  color: #2c3e50 !important;
}

/* ⚠️ FIX 15/09/2026 — compléter la couverture (cohérence avec les autres
   conteneurs à fond clair) : strong/em/a héritaient du thème clair. */
.entry-content .promo-aside strong,
.entry-content .promo-aside em,
.entry-content .promo-aside ul,
.entry-content .promo-aside ol {
  color: #2c3e50 !important;
}

.entry-content .promo-aside a {
  color: #3a86ff !important;
  text-decoration: underline;
}

.promo-aside ul {
  padding-left: 1.5em;
  margin: 15px 0;
}

.promo-aside li {
  margin-bottom: 8px;
}

.book-promo-content {
  text-align: center;
}

.book-promo-content img {
  margin: 0 auto 15px;
  display: block;
  max-width: 100%;
  height: auto;
}

.book-meta {
  font-size: 0.9em;
  color: #666;
  margin-top: 10px;
  font-style: italic;
}

.promo-button {
  display: inline-block;
  background-color: #3a86ff;
  color: white !important;
  padding: 10px 20px;
  text-decoration: none !important;
  border-radius: 6px;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.23);
  transition: all 0.3s ease;
  font-size: 1rem;
}

.promo-vpn .promo-button {
  background-color: #ff6b35;
}

.promo-book .promo-button {
  background-color: #8e44ad;
}

.promo-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.2);
}

/* ===============================
 * FAQ - Version moderne (sans émoji)
 * ============================== */

details {
    margin-bottom: 20px;
    background: linear-gradient(to right, #ffffff, #fcfdfd) !important;
    border-left: 4px solid #1abc9c;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}

details:hover {
    border-left-width: 6px;
    box-shadow: 0 5px 15px rgba(26, 188, 156, 0.12);
}

.entry-content details p {
    color: #2c3e50 !important;
}

/* ⚠️ FIX 15/09/2026 — texte des <li> invisible (blanc sur fond blanc).
   Le thème colore le texte en clair (prévu pour fond sombre), mais les
   <details> ont un fond blanc. La règle ci-dessus ne couvre que les <p> :
   les <li> (dans <ul>/<ol>) héritent du thème clair → invisibles.
   On force une couleur sombre sur TOUS les descendants textuels. */
.entry-content details li,
.entry-content details ul,
.entry-content details ol,
.entry-content details strong,
.entry-content details em {
    color: #2c3e50 !important;
}

.entry-content details a {
    color: #1abc9c !important;
    text-decoration: underline;
}

summary {
    padding: 18px 25px;
    font-weight: 600;
    color: #2c3e50 !important;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.15rem;
    position: relative;
}

/* Suppression triangle natif */
summary::-webkit-details-marker { display: none; }
summary::marker { display: none; }

/* Indicateur visuel + point d'interrogation stylisé */
summary::before {
    content: "?";
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background-color: #1abc9c;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1rem;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Indicateur d'ouverture/fermeture */
summary::after {
    content: "＋";
    margin-left: auto;
    color: #1abc9c;
    font-size: 1.3rem;
    font-weight: 300;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

details[open] summary::after {
    content: "−";
}

/* Animation d'ouverture */
details[open] {
    background: white;
}

/* ============================
   FAQ -Listes déroulées
   ============================ */

/* Ajouter une classe parent pour plus de spécificité et éviter les conflits */
.faq-accordion details {
    margin-bottom: 1.5rem;
    background: linear-gradient(to right, #ffffff, #f8f9fa) !important;
    border-left: 4px solid #1abc9c;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    transition: all 0.25s ease;
    overflow: hidden;          /* bonus : évite débordements étranges */
}

.faq-accordion details:hover {
    border-left-width: 6px;
    box-shadow: 0 6px 20px rgba(26, 188, 156, 0.15);
}

.faq-accordion summary {
    padding: 1.1rem 1.6rem;
    font-weight: 600;
    color: #2c3e50 !important;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.15rem;
    user-select: none;         /* évite la sélection de texte au clic */
}

/* Marker natif caché → risque d’accessibilité connu */
.faq-accordion summary::-webkit-details-marker,
.faq-accordion summary::marker {
    display: none;
}

/* Icône ? */
.faq-accordion summary::before {
    content: "?";
    inline-size: 28px;
    block-size: 28px;
    background: #1abc9c;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.1rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* + / − */
.faq-accordion summary::after {
    content: "＋";
    margin-left: auto;
    color: #1abc9c;
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.35s ease;
    transform-origin: center;
}

.faq-accordion details[open] summary::after {
    content: "−";
    transform: rotate(180deg);   /* rotation plus élégante que juste changer le signe */
}

/* Contenu */
.faq-accordion details > *:not(summary) {
    padding: 0 1.6rem 1.6rem 4.2rem;   /* ajusté pour mieux aligner */
    color: #4a5a6a !important;
    line-height: 1.7;
    border-top: 1px solid rgba(26, 188, 156, 0.12);
}

/* Listes dans le contenu */
.faq-accordion details ul,
.faq-accordion details ol {
    padding-left: 2.5rem;   /* valeur plus raisonnable que 80px */
    margin: 1rem 0;
}

/* ⚠️ FIX 15/09/2026 — texte des <li> invisible (blanc sur fond blanc).
   Le thème colore le texte en clair (prévu pour fond sombre), mais la FAQ a
   un fond blanc (linear-gradient #ffffff → #f8f9fa). La règle
   `details > *:not(summary)` ne couvre QUE les enfants directs : les <li>
   sont des petits-enfants (via <ul>/<ol>) et héritent donc du thème clair.
   Même correctif que `.note-color` (cf. plus haut) : forcer une couleur
   sombre sur TOUS les descendants textuels, pas seulement les enfants directs. */
.faq-accordion details li,
.faq-accordion details p,
.faq-accordion details ul,
.faq-accordion details ol,
.faq-accordion details strong,
.faq-accordion details em {
    color: #4a5a6a !important;
}

/* Les liens gardent une couleur distincte (accent) pour rester repérables. */
.faq-accordion details a {
    color: #1abc9c !important;
    text-decoration: underline;
}

/* Le gras reste lisible et légèrement plus foncé. */
.faq-accordion details strong,
.faq-accordion details b {
    color: #2c3e50 !important;
    font-weight: 600;
}

/* Meilleur espacement premier élément */
.faq-accordion details > *:nth-child(2) {
    padding-top: 1.25rem;
}

/* ==========================
 * AERATION ARTICLES - Version legere
 * ========================= */

/* Espace reduit avant les titres */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 1.5em;
	margin-bottom: 0.8em;
}

/* Espace avant/apres les listes */
.entry-content ul,
.entry-content ol {
	margin: 1.2em 0;
}

.entry-content li {
	margin-bottom: 0.5em;
}

/* Aération images */
.entry-content img,
.entry-content figure,
.entry-content .wp-video {
	margin: 1.5em auto;
}

/* Ligne decorative sous H2 (optionnel, tu peux supprimer) */
.entry-content h2 {
	position: relative;
	padding-bottom: 0.4em;
}

.entry-content h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 40px;
	height: 2px;
	background: linear-gradient(90deg, #6699cc, #8d3686);
}

/* Saut manuel */
.saut-manuel {
	display: block;
	margin-bottom: 1em;
	height: 0;
}

/* Responsive */
@media (max-width: 768px) {
	.entry-content h2,
	.entry-content h3 {
		margin-top: 1.2em;
	}
}

/* =======================
 * IMAGE ÉLÉGANTE – Des Geeks & des Lettres (version finale)
 * ====================== */

/* Image de base */
.dgedl-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.12);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Hover */
.dgedl-image:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.18);
}

/* Bordure bleue plus visible (entre l'image et la légende) */
.dgedl-image::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid rgba(59, 130, 246, 0.35);   /* ← plus visible */
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.dgedl-image:hover::after {
    opacity: 1;
}

/* Centrage et marge pour l'image + légende */
.wp-caption:has(.dgedl-image),
p:has(> .dgedl-image) {
    margin: 2.5rem auto;
    max-width: 100%;
    text-align: center;
}

/* Légende : plus grande et mieux espacée */
.wp-caption-text,
p:has(> .dgedl-image) + .wp-caption-text {
    margin-top: 1.2rem !important;
    font-size: 1.05rem;           /* ← un peu plus grande */
    color: #555;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
}

/* Petite barre décorative */
.wp-caption-text::before {
    content: '';
    display: block;
    width: 50px;
    height: 1.5px;
    background: #3b82f6;
    margin: 0.9rem auto 0.7rem;
}

/* Responsive */
@media (max-width: 640px) {
    .dgedl-image {
        border-radius: 12px;
    }
    
    .dgedl-image:hover {
        transform: translateY(-2px);
    }
    
    .wp-caption-text {
        font-size: 0.98rem;
        margin-top: 1rem !important;
    }
}

/* ==========================
 * GRILLE BÉNÉFICES — Maj'Article IA
 * =========================== */

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 40px 0;
}

.benefits-card {
    background: #f8fafc !important;
    border-left: 4px solid #6699cc;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #1e293b !important;
}

.benefits-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.benefits-card strong {
    display: block;
    font-size: 1.15rem;
    margin-bottom: 12px;
    color: #1e293b !important;
}
.entry-content .benefits-card p,
.entry-content .benefits-card li {
    color: #334155 !important;
}

/* Variantes de couleurs (comme tes .promo-*) */
.benefits-card.blue {
    border-left-color: #6699cc;
    background: linear-gradient(135deg, #f8fbff, #ffffff);
}

.benefits-card.green {
    border-left-color: #33cc33;
    background: linear-gradient(135deg, #f8fff8, #ffffff);
}

.benefits-card.red {
    border-left-color: #e74c3c;
    background: linear-gradient(135deg, #fff8f8, #ffffff);
}

/* Responsive */
@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* End GeneratePress Site CSS */

/* ══════════════════════════════════════════════════════════════════════════
 * SÉPARATEURS GEEK S3 — Tier 2 uniquement (S42, 2026-08-04)
 *
 * Tier 2 (mineur) : divider-gradient/pixels/signal/binary dans blocs denses
 *    entre <p> consécutifs — aère les murs de texte, JAMAIS avant les H2.
 *
 * Palette DARK (défaut — fond sombre du site) :
 *   #64748b (slate), #334155 (dark slate), #3b82f6 (blue accent)
 * Palette LIGHT (override — .community-block / .gap-perspective) :
 *   #B87333 (cuivre), #C66B2A (terracotta), #E8D5C0 (beige)
 * ══════════════════════════════════════════════════════════════════════════ */

/* ─── TIER 1 : divider-terminal [DGEDL] (séparateur majeur) ─── */
.divider-terminal {
  display: flex; align-items: center; justify-content: center;
  margin: 3rem 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  color: #64748b;
  opacity: 0.7;
}
.divider-terminal::before, .divider-terminal::after {
  content: ""; flex: 1; height: 1px;
  background: #334155; margin: 0 1rem;
  opacity: 0.4;
}

/* ─── TIER 2 : divider-gradient (le plus discret) ─── */
.divider-gradient {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #64748b 20%, #3b82f6 80%, transparent 100%);
  margin: 2.5rem 0; border: none; opacity: 0.4;
}

/* ─── TIER 2 : divider-pixels (rétro 5 pixels) ─── */
.divider-pixels {
  display: flex; justify-content: center; align-items: center;
  gap: 6px; margin: 2rem 0;
}
.divider-pixels span {
  display: block; width: 8px; height: 8px;
  background-color: #64748b; opacity: 0.2;
  border-radius: 2px;
}
.divider-pixels span:nth-child(1) { opacity: 0.12; }
.divider-pixels span:nth-child(2) { opacity: 0.25; }
.divider-pixels span:nth-child(3) { opacity: 0.5; width: 12px; height: 12px; background-color: #3b82f6; }
.divider-pixels span:nth-child(4) { opacity: 0.25; }
.divider-pixels span:nth-child(5) { opacity: 0.12; }

/* ─── TIER 2 : divider-signal (barres style WiFi) ─── */
.divider-signal {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 4px; height: 24px; margin: 2rem 0;
}
.divider-signal span {
  display: block; width: 4px; background-color: #64748b; border-radius: 2px;
}
.divider-signal span:nth-child(1) { height: 8px;  opacity: 0.25; }
.divider-signal span:nth-child(2) { height: 14px; opacity: 0.4; }
.divider-signal span:nth-child(3) { height: 20px; opacity: 0.6; background-color: #3b82f6; }
.divider-signal span:nth-child(4) { height: 14px; opacity: 0.4; }
.divider-signal span:nth-child(5) { height: 8px;  opacity: 0.25; }

/* ─── TIER 2 : divider-binary (séquence binaire) ─── */
.divider-binary {
  display: flex; justify-content: center; align-items: center;
  gap: 3px; font-family: 'Courier New', monospace;
  font-size: 0.75rem; color: #64748b; opacity: 0.5; margin: 2.5rem 0;
}
.divider-binary span { opacity: 0.3; }
.divider-binary span:nth-child(2n) { opacity: 0.6; color: #3b82f6; }

/* ══════════════════════════════════════════════════════════════════════════
 * OVERRIDE LIGHT : couleurs chaudes dans les blocs fond clair
 * .community-block (parchemin #FAF7F2) + .gap-perspective (crème #FDF8F3)
 * ══════════════════════════════════════════════════════════════════════════ */

body .entry-content .community-block .divider-terminal,
body .entry-content .gap-perspective .divider-terminal {
  color: #B87333; opacity: 0.65;
}
body .entry-content .community-block .divider-terminal::before,
body .entry-content .community-block .divider-terminal::after,
body .entry-content .gap-perspective .divider-terminal::before,
body .entry-content .gap-perspective .divider-terminal::after {
  background: #E8D5C0; opacity: 1;
}

body .entry-content .community-block .divider-gradient,
body .entry-content .gap-perspective .divider-gradient {
  background: linear-gradient(90deg, transparent 0%, #B87333 20%, #C66B2A 80%, transparent 100%);
  opacity: 0.5;
}

body .entry-content .community-block .divider-pixels span,
body .entry-content .gap-perspective .divider-pixels span {
  background-color: #B87333;
}
body .entry-content .community-block .divider-pixels span:nth-child(3),
body .entry-content .gap-perspective .divider-pixels span:nth-child(3) {
  background-color: #C66B2A; opacity: 0.6;
}

body .entry-content .community-block .divider-signal span,
body .entry-content .gap-perspective .divider-signal span {
  background-color: #B87333;
}
body .entry-content .community-block .divider-signal span:nth-child(3),
body .entry-content .gap-perspective .divider-signal span:nth-child(3) {
  background-color: #C66B2A; opacity: 0.7;
}

body .entry-content .community-block .divider-binary,
body .entry-content .gap-perspective .divider-binary {
  color: #B87333; opacity: 0.55;
}
body .entry-content .community-block .divider-binary span:nth-child(2n),
body .entry-content .gap-perspective .divider-binary span:nth-child(2n) {
  color: #C66B2A; opacity: 0.65;
}

/* ══════════════════════════════════════════════════════════════════════════
 * TABLEAU DANS GAP-PERSPECTIVE — Override thème dark (S42, 2026-08-04)
 *
 * Le thème DGEDL force .custom-table2 td { color:#E5E7EB!important }
 * et les rows en fond dark (#111827, #0F0F14).
 * Dans .gap-perspective (fond crème #FDF8F3), ça donne un tableau
 * sombre sur fond clair = illisible.
 *
 * Ce bloc force un tableau clair (fond blanc, texte foncé) dans
 * le contexte du gap, avec spécificité + !important pour gagner
 * sur les overrides du functions.php.
 * ══════════════════════════════════════════════════════════════════════════ */

body .entry-content .gap-perspective .custom-table2 {
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
body .entry-content .gap-perspective .custom-table2 td {
    color: #1e293b !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
body .entry-content .gap-perspective .custom-table2 tbody tr:nth-child(even) td {
    background-color: #f8fafc !important;
}
body .entry-content .gap-perspective .custom-table2 tbody tr:nth-child(odd) td {
    background-color: #ffffff !important;
}
body .entry-content .gap-perspective .custom-table2 tbody tr:hover td {
    background-color: #f1f5f9 !important;
}
body .entry-content .gap-perspective .custom-table2 td:first-child {
    color: #1e293b !important;
    border-right: 1px solid #e2e8f0 !important;
}
body .entry-content .gap-perspective .custom-table2 th {
    background: linear-gradient(135deg, #0D9488, #4ECDC4) !important;
    color: #ffffff !important;
}

/* Mobile : colonnes empilées dans gap-perspective */
@media (max-width: 700px) {
    body .entry-content .gap-perspective .custom-table2 tr {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
    }
    body .entry-content .gap-perspective .custom-table2 td {
        border-bottom: 1px solid #e2e8f0 !important;
    }
    body .entry-content .gap-perspective .custom-table2 td:first-child {
        background: linear-gradient(135deg, #0D9488, #4ECDC4) !important;
        color: #ffffff !important;
    }
}

/* Table responsive — prevents overflow in gap/community blocks (S42, 2026-08-04) */
body .entry-content .gap-perspective .custom-table2,
body .entry-content .community-block .custom-table2,
body .entry-content .gap-perspective table,
body .entry-content .community-block table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ═══ CTA Engagement — commentaire + favoris (v1.8.0, dark-mode) ═══ */
.affiliate-cta--engagement {
    background: #1F2937;
    border-left-color: #0D9488;
    color: #E5E7EB;
}

/* =======================
 * ENCART AUTEUR — EEAT (Volet C, Mission 1)
 * ====================== */
.author-card {
    background: linear-gradient(135deg, #f5f8fa 0%, #eef2f7 100%) !important;
    border-left: 4px solid #2c7da0;
    padding: 1.5em 2em;
    margin: 2.5em 0;
    border-radius: 0 8px 8px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2f3e !important;
    line-height: 1.75;
    box-shadow: 0 2px 6px rgba(44, 125, 160, 0.06);
    overflow: hidden;
}

.author-card h2 {
    margin: 0 0 1em 0;
    font-size: 1.15rem;
    color: #1e2f3e;
}

.author-card .author-avatar {
    width: 110px !important;
    height: 110px !important;
    border-radius: 50% !important;
    object-fit: cover;
    float: left;
    margin: 0 1.2em 0.6em 0;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 8px rgba(44, 125, 160, 0.18);
}

.author-card .author-logo {
    display: block;
    max-width: 160px;
    height: auto;
    margin: 0 0 1em 0;
}

.author-card .author-name {
    font-weight: 700;
    margin: 0 0 0.3em 0;
    color: #1e2f3e !important;
}

/* Paragraphes de l'encart auteur (la bio « author-facts », etc.) : le thème
   dark impose une couleur de <p> claire via une déclaration DIRECTE sur
   .entry-content p, qui bat la couleur HÉRITÉE de .author-card. Résultat :
   texte gris clair invisible sur le fond clair de l'encart. Correctif
   identique à .note-color p (spécificité + !important pour gagner). */
.entry-content .author-card p,
.entry-content .author-card li {
    color: #1e2f3e !important;
}

/* Lien « auteur » (author-name a) : le thème dark colore les liens en clair
   (prévu pour fond sombre), illisible sur le fond clair de l'encart. */
.entry-content .author-card a {
    color: #2c7da0 !important;
}

/* Titre (h2) de l'encart auteur EEAT : neutralise le gradient-text dark-mode
   (même bug que .note-color — h2{color:transparent!important} de functions.php L88) */
.single-post .entry-content .author-card h2,
.page .entry-content .author-card h2 {
    color: #1e2f3e !important;
    -webkit-text-fill-color: #1e2f3e !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

/* Pas d'icône décorative h2::before dans l'encart auteur */
.single-post .entry-content .author-card h2::before,
.page .entry-content .author-card h2::before {
    display: none !important;
}

/* Mobile : empiler l'avatar au-dessus du texte */
@media (max-width: 600px) {
    .author-card {
        padding: 1.2em 1.5em;
        margin: 2em 0;
        border-radius: 0 6px 6px 0;
    }
    .author-card .author-avatar {
        float: none;
        display: block;
        margin: 0 auto 1em auto;
    }
}

/* Override bordure claire héritée — incompatible avec le thème dark */
.site-header {
    border-bottom: 1px solid var(--color-border, #1F2937) !important;
}

/* ======================================================
 * ATTRIBUTION STACK EXCHANGE (CC-BY-SA 4.0) — Phase 3 forums
 * Bloc discret de sources en FIN d'article (fond sombre du thème).
 * Neutralise les chevrons violets des listes classiques.
 * ====================================================== */
body .entry-content .stack-exchange-attribution {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 2rem;
    border-top: 1px solid #334155;
    padding-top: 0.75rem;
}
body .entry-content .stack-exchange-attribution ul,
body .entry-content .stack-exchange-attribution li {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
body .entry-content .stack-exchange-attribution li {
    margin-bottom: 0.35em;
}
body .entry-content .stack-exchange-attribution li::before {
    content: none !important;   /* retire le chevron violet des listes classiques */
}
body .entry-content .stack-exchange-attribution a {
    color: #94a3b8;
    text-decoration: underline;
}
/* ======================================================
 * CTA #2 — TABLEAU COMPARATIF VPN (v1.11.0, 22/09/2026)
 * Remplace l'ancien encadré lourd (titre + boutons + accordéon).
 * Objectif : un tableau sobre qui s'insère naturellement dans le texte,
 * sans encadré note-color, sans bouton criard. Les liens sont dans les
 * en-têtes de colonnes (NordVPN / ProtonVPN).
 * ====================================================== */
/* Liseret uniforme tout le tour + bords arrondis (22/09/2026, décision Grégory).
   ⛔ Pas de bande à gauche : juste une bordure fine qui différencie le CTA du
   reste de l'article. Fond très légèrement teinté (teal subtil). */
.vpn-comparison {
    margin: 2.5em 0;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 1.5em 1.8em;
    background: rgba(78, 205, 196, 0.03);
}

.vpn-comparison > p {
    margin-bottom: 1.2em;
}

.vpn-comparison .custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5em 0;
    font-size: 1rem;
}

.vpn-comparison .custom-table th {
    background: linear-gradient(135deg, #546e7a, #37474f);
    color: #fff;
    font-weight: 600;
    padding: 14px 12px;
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    border-radius: 8px 8px 0 0;
}

.vpn-comparison .custom-table th:first-child {
    background: transparent;
    border-radius: 0;
}

/* En-têtes cliquables : flèche « → » + glissement au survol (22/09/2026).
   Objectif : montrer que NordVPN / ProtonVPN sont des liens.
   ⚠️ FIX 22/09/2026 : le glissement était déclenché par `th a:hover` → il ne
   se produisait que si on survolait PRÉCISÉMENT le texte du lien. Comme toute
   la colonne est cliquable, on déclenche le glissement au survol de la zone
   de l'en-tête (`th:hover a`), pas du lien seul. */
.vpn-comparison .custom-table th a {
    color: #fff !important;
    text-decoration: none;
    display: inline-block;
    /* ⚠️ `!important` OBLIGATOIRE : le thème déclare `a { transition: color … }`
       (style.css:105) qui écrase la transition transform → la flèche ne
       glissait pas. Même piège que les couleurs (functions.php). */
    transition: transform 0.15s ease !important;
}

.vpn-comparison .custom-table th a::after {
    content: " →";
    font-weight: 700;
}

/* Le glissement se déclenche au survol de l'EN-TÊTE (th) — toute la zone du
   th, pas seulement le texte du lien. Les cellules du corps (td) ne glissent
   pas (leur contenu n'est pas une flèche). */
.vpn-comparison .custom-table th:hover a {
    transform: translateX(3px) !important;
}

.vpn-comparison .custom-table td {
    padding: 12px 14px;
    background-color: #111827 !important;
    color: #E5E7EB !important;
    border-bottom: 1px solid #1F2937;
    text-align: center;
    line-height: 1.5;
}

.vpn-comparison .custom-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: #F9FAFB !important;
    border-right: 1px solid #374151;
}

.vpn-comparison .custom-table tbody tr:nth-child(even) td {
    background-color: #0F0F14 !important;
}

.vpn-comparison .custom-table tbody tr:hover td {
    background-color: #1F2937 !important;
}

/* Colonnes cliquables (22/09/2026) : toute la colonne NordVPN / ProtonVPN
   réagit au survol (teal pour Nord, vert pour Proton) → on comprend que la
   cellule entière est un lien. Le HTML du plugin enveloppe chaque <td> dans
   un <a> (voir cta-templates.php). */
.vpn-comparison .custom-table th:nth-child(2),
.vpn-comparison .custom-table td:nth-child(2),
.vpn-comparison .custom-table th:nth-child(3),
.vpn-comparison .custom-table td:nth-child(3) {
    cursor: pointer;
}

.vpn-comparison .custom-table tbody tr:hover td:nth-child(2) {
    background-color: rgba(78, 205, 196, 0.12) !important;
}

.vpn-comparison .custom-table tbody tr:hover td:nth-child(3) {
    background-color: rgba(124, 179, 66, 0.12) !important;
}

/* Cellules-liens : le <a> remplit la cellule, sans style de lien par défaut. */
.vpn-comparison .custom-table td a {
    display: block;
    color: inherit !important;
    text-decoration: none;
}

/* ⛔ FIX 25/09/2026 — survol illisible dans le tableau VPN (colonnes 2-3, lignes 2-4).
   Le thème force `.custom-table td a:hover { color: #5EEAD4 !important }` (teal
   clair). Or le tableau VPN a un fond SOMBRE (#111827) et, au survol de la ligne,
   un fond teal/vert translucide → texte teal clair sur fond teal translucide =
   illisible. On neutralise le hover du thème UNIQUEMENT sur les cellules
   cliquables (colonnes 2 et 3) du corps (lignes 2 à 4) : le texte reste clair
   (#E5E7EB) sur le fond sombre. La 1ʳᵉ colonne (labels) et l'en-tête ne sont pas
   touchés. */
.vpn-comparison .custom-table tbody tr:nth-child(2) td:nth-child(2) a:hover,
.vpn-comparison .custom-table tbody tr:nth-child(2) td:nth-child(3) a:hover,
.vpn-comparison .custom-table tbody tr:nth-child(3) td:nth-child(2) a:hover,
.vpn-comparison .custom-table tbody tr:nth-child(3) td:nth-child(3) a:hover,
.vpn-comparison .custom-table tbody tr:nth-child(4) td:nth-child(2) a:hover,
.vpn-comparison .custom-table tbody tr:nth-child(4) td:nth-child(3) a:hover,
.vpn-comparison .custom-table tbody tr:nth-child(2) td:nth-child(2) a:focus,
.vpn-comparison .custom-table tbody tr:nth-child(2) td:nth-child(3) a:focus,
.vpn-comparison .custom-table tbody tr:nth-child(3) td:nth-child(2) a:focus,
.vpn-comparison .custom-table tbody tr:nth-child(3) td:nth-child(3) a:focus,
.vpn-comparison .custom-table tbody tr:nth-child(4) td:nth-child(2) a:focus,
.vpn-comparison .custom-table tbody tr:nth-child(4) td:nth-child(3) a:focus {
    color: #E5E7EB !important;
    text-decoration: none !important;
}

@media (max-width: 600px) {
    .vpn-comparison .custom-table th,
    .vpn-comparison .custom-table td {
        padding: 10px 8px;
        font-size: 0.9rem;
    }
}

/* ======================================================
 * CTA #2 — BANDE DE RAPPEL (v1.13.0, 22/09/2026)
 * Le tableau est monté en pos1 (3/7). En pos2 (5/7), une bande simple :
 * accroche + 2 boutons colorés fléchés (teal NordVPN / vert ProtonVPN).
 * Même liseret uniforme que le tableau (cohérence visuelle).
 * ====================================================== */
.vpn-recall {
    margin: 2.5em 0;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 1.3em 1.8em;
    background: rgba(78, 205, 196, 0.03);
}

.vpn-recall > p {
    margin: 0 0 1em 0;
    font-size: 0.95rem;
    color: #94a3b8;
}

.vpn-recall-buttons {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
}

.vpn-recall-buttons a {
    flex: 1 1 200px;
    display: inline-block;
    text-align: center;
    padding: 0.85em 1.2em;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none !important;
    /* ⚠️ `!important` : le thème déclare `a { transition: color … }` (style.css:105)
       qui écrase la transition transform → sans ça, pas d'animation au survol. */
    transition: transform 0.15s ease !important, box-shadow 0.15s ease !important;
}

.vpn-recall-buttons a::after {
    content: " →";
    font-weight: 700;
}

.vpn-recall-buttons a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    /* ⚠️ FIX 22/09/2026 : au survol, le thème applique `a:hover{color:var(--color-link-hover)}`
       (bleu) → texte bleu sur fond teal/vert, illisible. On force le blanc. */
    color: #fff !important;
}

.vpn-recall-nord {
    background: linear-gradient(135deg, #4ECDC4, #2DD4BF);
    color: #0f172a !important;
}

.vpn-recall-proton {
    background: linear-gradient(135deg, #7CB342, #5C9E2E);
    color: #0f172a !important;
}

/* Le survol doit gagner sur les couleurs de base (spécificité + ordre). */
.vpn-recall-buttons a.vpn-recall-nord:hover,
.vpn-recall-buttons a.vpn-recall-proton:hover {
    color: #fff !important;
}

@media (max-width: 600px) {
    .vpn-recall-buttons a {
        flex: 1 1 100%;
    }
}

/* ======================================================
 * BIBLIOGRAPHIE — ENCADRÉ DISTINCT (22/09/2026)
 * Objectif : que le lecteur comprenne que la biblio n'est PAS la fin de
 * l'article (elle est suivie du bloc community + de l'encart auteur).
 * Fond légèrement teinté + bordure gauche + titre discret.
 * ====================================================== */
.bibliography-section.external-sources-block,
.bibliography-section.internal-links-block {
    background: rgba(148, 163, 184, 0.06);
    border-left: 3px solid #64748b;
    border-radius: 0 8px 8px 0;
    padding: 1.2em 1.5em;
    margin: 2em 0;
}

/* ⚠️ FIX 22/09/2026 : le thème (functions.php:185) force
   `.bibliography-section h3{color:#E5E7EB!important;-webkit-text-fill-color:#E5E7EB!important}`
   → les titres de biblio restaient BLANCS. On gagne la spécificité avec
   `body .entry-content` + `!important` + `-webkit-text-fill-color` (Chrome
   écrase `color` par `-webkit-text-fill-color`). */
body .entry-content .bibliography-section.external-sources-block h3,
body .entry-content .bibliography-section.internal-links-block h3 {
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0;
    border-left: none;
    padding-left: 0;
    margin: 0 0 0.8em 0;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

.bibliography-section.internal-links-block {
    border-left-color: #F59E0B;
}

body .entry-content .bibliography-section.internal-links-block h3 {
    color: #F59E0B !important;
    -webkit-text-fill-color: #F59E0B !important;
}

/* Dans l'encadré biblio, le tableau reste sobre (pas de cartes flottantes) */
.bibliography-section.external-sources-block .custom-table td,
.bibliography-section.internal-links-block .custom-table td {
    background-color: transparent !important;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 0;
    padding: 8px 4px;
    font-size: 1rem;
}

.bibliography-section.external-sources-block .custom-table td:hover,
.bibliography-section.internal-links-block .custom-table td:hover {
    transform: none;
    box-shadow: none;
}

/* ⚠️ FIX 22/09/2026 : le lien de la biblio EXTERNE gardait la couleur du thème
   (teal #4ECDC4 DGEDL / indigo #818CF8 UNTEL) → illisible sur le fond bleu
   marine. On force une couleur claire lisible (gris-bleu clair) + soulignement
   discret. L'interne reste en ambre (déjà lisible). */
.bibliography-section.external-sources-block .custom-table td a {
    color: #CBD5E1 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(203, 213, 225, 0.4);
}

.bibliography-section.external-sources-block .custom-table td a:hover {
    color: #F1F5F9 !important;
    text-decoration-color: #F1F5F9;
}

/* ⚠️ FIX 22/09/2026 : le lien de la biblio INTERNE restait bleu azur (couleur du
   thème) au lieu de l'ambre. On force la couleur ici (ne pas dépendre de la
   règle du thème `functions.php`, qui peut être absente ou écrasée). */
.bibliography-section.internal-links-block .custom-table td a {
    color: #F59E0B !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(245, 158, 11, 0.4);
}

.bibliography-section.internal-links-block .custom-table td a:hover {
    color: #FBBF24 !important;
    text-decoration-color: #FBBF24;
}