/* ============================================
   SOLUTION ULTIME - SPÉCIFICITÉ MAXIMALE
   ============================================ */

/* ========================================
   ENCADRÉ "POINT CLÉ" - Bleu Clair
   ======================================== */
body.single-post .entry-content div.key-point,
body.single-post .post-content div.key-point,
body.single-post .td-post-content div.key-point,
body.single-post article div.key-point,
body.single-post div.key-point {
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%) !important;
    border: 2px solid #2196F3 !important;
    border-left: 6px solid #1976D2 !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    margin: 30px 0 !important;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.15) !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

/* TITRE en gras - Bleu foncé */
body.single-post .entry-content div.key-point > p > strong:first-child,
body.single-post .post-content div.key-point > p > strong:first-child,
body.single-post .td-post-content div.key-point > p > strong:first-child,
body.single-post article div.key-point > p > strong:first-child,
body.single-post div.key-point > p > strong:first-child,
body.single-post .entry-content div.key-point strong,
body.single-post .post-content div.key-point strong,
body.single-post .td-post-content div.key-point strong,
body.single-post article div.key-point strong,
body.single-post div.key-point strong {
    color: #1565C0 !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
    background: transparent !important;
    display: inline !important;
}

/* TEXTE normal - Noir lisible */
body.single-post .entry-content div.key-point p,
body.single-post .post-content div.key-point p,
body.single-post .td-post-content div.key-point p,
body.single-post article div.key-point p,
body.single-post div.key-point p {
    color: #212529 !important;
    background: transparent !important;
    line-height: 1.7 !important;
    font-size: 1.05em !important;
    margin: 0 !important; /* <-- AJOUTEZ CETTE LIGNE */
}

/* Tous les éléments enfants - NOIR par défaut */
body.single-post .entry-content div.key-point *:not(strong):not(a),
body.single-post .post-content div.key-point *:not(strong):not(a),
body.single-post .td-post-content div.key-point *:not(strong):not(a),
body.single-post article div.key-point *:not(strong):not(a),
body.single-post div.key-point *:not(strong):not(a) {
    color: #212529 !important;
    background: transparent !important;
}

/* Liens - Bleu cliquable */
body.single-post .entry-content div.key-point a,
body.single-post .post-content div.key-point a,
body.single-post .td-post-content div.key-point a,
body.single-post article div.key-point a,
body.single-post div.key-point a {
    color: #1976D2 !important;
    text-decoration: underline !important;
    background: transparent !important;
}

/* Hover effect */
body.single-post .entry-content div.key-point:hover,
body.single-post .post-content div.key-point:hover,
body.single-post .td-post-content div.key-point:hover,
body.single-post article div.key-point:hover,
body.single-post div.key-point:hover {
    box-shadow: 0 6px 25px rgba(33, 150, 243, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* ========================================
   ENCADRÉ "IMPORTANT" - Orange Clair
   ======================================== */
body.single-post .entry-content div.important-box,
body.single-post .post-content div.important-box,
body.single-post .td-post-content div.important-box,
body.single-post article div.important-box,
body.single-post div.important-box {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important;
    border: 2px solid #ff9800 !important;
    border-left: 6px solid #f57c00 !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    margin: 30px 0 !important;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.15) !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

/* TITRE en gras - Orange foncé */
body.single-post .entry-content div.important-box > p > strong:first-child,
body.single-post .post-content div.important-box > p > strong:first-child,
body.single-post .td-post-content div.important-box > p > strong:first-child,
body.single-post article div.important-box > p > strong:first-child,
body.single-post div.important-box > p > strong:first-child,
body.single-post .entry-content div.important-box strong,
body.single-post .post-content div.important-box strong,
body.single-post .td-post-content div.important-box strong,
body.single-post article div.important-box strong,
body.single-post div.important-box strong,
body.single-post .entry-content div.important-box h3,
body.single-post .post-content div.important-box h3,
body.single-post .td-post-content div.important-box h3,
body.single-post article div.important-box h3,
body.single-post div.important-box h3 {
    color: #e65100 !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
    background: transparent !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* TEXTE normal - Noir lisible */
body.single-post .entry-content div.important-box p,
body.single-post .post-content div.important-box p,
body.single-post .td-post-content div.important-box p,
body.single-post article div.important-box p,
body.single-post div.important-box p {
    color: #212529 !important;
    background: transparent !important;
    line-height: 1.7 !important;
    font-size: 1.05em !important;
    margin: 0 !important; /* <-- AJOUTEZ CETTE LIGNE */
}

/* Tous les éléments enfants - NOIR par défaut */
body.single-post .entry-content div.important-box *:not(strong):not(a):not(h3),
body.single-post .post-content div.important-box *:not(strong):not(a):not(h3),
body.single-post .td-post-content div.important-box *:not(strong):not(a):not(h3),
body.single-post article div.important-box *:not(strong):not(a):not(h3),
body.single-post div.important-box *:not(strong):not(a):not(h3) {
    color: #212529 !important;
    background: transparent !important;
}

/* Liens - Orange cliquable */
body.single-post .entry-content div.important-box a,
body.single-post .post-content div.important-box a,
body.single-post .td-post-content div.important-box a,
body.single-post article div.important-box a,
body.single-post div.important-box a {
    color: #f57c00 !important;
    text-decoration: underline !important;
    background: transparent !important;
}

/* Hover effect */
body.single-post .entry-content div.important-box:hover,
body.single-post .post-content div.important-box:hover,
body.single-post .td-post-content div.important-box:hover,
body.single-post article div.important-box:hover,
body.single-post div.important-box:hover {
    box-shadow: 0 6px 25px rgba(255, 152, 0, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* ========================================
   TABLE DES MATIÈRES & FAQ (Fond sombre)
   ======================================== */
body.single-post .table-of-contents, 
body.single-post .faq-section { 
    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important; 
    border: 2px solid #64748b !important; 
    border-radius: 12px !important; 
    padding: 25px !important; 
    margin: 30px 0 !important; 
    color: #f1f5f9 !important; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important; 
    transition: all 0.3s ease !important; /* <-- AJOUTER CETTE LIGNE */
}

body.single-post .table-of-contents *, 
body.single-post .faq-section * { 
    color: #f1f5f9 !important; 
}

body.single-post .table-of-contents .toc-list a { 
    color: #7dd3fc !important; 
}

/* Effet de survol pour TOC & FAQ */
body.single-post .table-of-contents:hover, 
body.single-post .faq-section:hover { 
    /* On utilise une ombre claire (blanche) pour un effet "glow" sur fond sombre */
    box-shadow: 0 4px 25px rgba(255, 255, 255, 0.1) !important; 
    transform: translateY(-2px) !important;
    /* On éclaircit la bordure pour accentuer l'effet */
    border-color: #94a3b8 !important; 
}

/* ========================================
 * STYLES DES ITEMS FAQ (POUR HOVER)
 * ======================================== */

/* Cible chaque item Q/A individuel */
body.single-post .faq-section .faq-item {
    padding: 16px 20px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
    border: 1px solid #64748b !important; 

    /* === MODIFICATION === */
    /* Fond plus sombre (style en-tête de tableau) pour un effet "carte" */
    background: #1e293b !important; 

    /* === AJOUT === */
    /* Ombre subtile pour donner du relief à la carte */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; 

    transition: all 0.25s ease !important;
    cursor: pointer;
}

/* Style pour la question (h3) */
body.single-post .faq-section .faq-item .faq-question {
    font-size: 1.1em !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    color: #f1f5f9 !important; /* Texte blanc par défaut (assorti au conteneur) */
    transition: color 0.25s ease !important;
}

/* Style pour la réponse (div) et son contenu */
body.single-post .faq-section .faq-item .faq-answer,
body.single-post .faq-section .faq-item .faq-answer p {
    font-size: 1.0em !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #cbd5e1 !important; /* Texte gris clair par défaut */
    transition: color 0.25s ease !important;
}
 
/* * -- L'EFFET DE SURVOL DÉSIRÉ --
 * C'est ici que la magie opère.
 */
body.single-post .faq-section .faq-item:hover {
    background: #ffffff !important; /* Fond qui passe au blanc */
    border-color: #ffffff !important;
    transform: scale(1.02); /* Effet de zoom léger */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Le texte (tous les enfants) passe au noir au survol */
body.single-post .faq-section .faq-item:hover *,
body.single-post .faq-section .faq-item:hover .faq-question,
body.single-post .faq-section .faq-item:hover .faq-answer,
body.single-post .faq-section .faq-item:hover .faq-answer p {
    color: #1e293b !important; /* Texte noir (idem que le survol de tableau) */
}

/* ========================================
   TABLEAUX (Fond sombre)
   ======================================== */
body.single-post table { 
    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important; 
    border: 2px solid #64748b !important; 
    border-radius: 12px !important; 
    margin: 25px 0 !important; 
}

body.single-post table thead th, 
body.single-post table th { 
    background: #1e293b !important; 
    color: #f1f5f9 !important; 
    padding: 18px 20px !important; 
}

body.single-post table tbody td, 
body.single-post table td { 
    color: #f1f5f9 !important; 
    padding: 16px 20px !important; 
}

body.single-post table tbody tr:hover td { 
    color: #1e293b !important; 
    background: #ffffff !important; 
}

/* ========================================
   SCROLL & ANIMATIONS
   ======================================== */
body.single-post .post-content html, 
body.single-post .entry-content html, 
body.single-post article html { 
    scroll-behavior: smooth; 
}

@keyframes highlight-fade { 
    0% { background-color: #fff3cd; } 
    100% { background-color: transparent; } 
}

body.single-post .post-content h2:target, 
body.single-post .entry-content h2:target { 
    animation: highlight-fade 2s ease-out; 
}

/* ========================================
 * STYLE TITRE TABLE DES MATIÈRES (TOC)
 * ======================================== */

/* 1. Transforme le titre H3 en conteneur flex */
body.single-post .table-of-contents .toc-title {
    display: flex !important;
    justify-content: space-between !important; /* Pousse les éléments aux extrémités */
    align-items: center !important; /* Aligne verticalement */
    width: 100% !important;
}

/* 2. Cible le span "[Ouvrir]" spécifiquement */
body.single-post .table-of-contents .toc-toggle-icon {
    font-size: 0.75em !important; /* Réduit la taille de la police */
    font-weight: normal !important; /* Retire le gras (si le h3 le met par défaut) */
    color: #cbd5e1 !important; /* Met le texte en gris clair, plus discret */
}

/* ========================================
 * STYLISATION AVANCÉE DES TABLEAUX
 * ======================================== */

/* 1. Arrondir les coins du header pour qu'ils s'alignent avec le conteneur */
body.single-post table thead th:first-child {
    border-top-left-radius: 10px !important;
}

body.single-post table thead th:last-child {
    border-top-right-radius: 10px !important;
}

/* 2. Styliser le header pour le rendre plus distinct (majuscules, espacement) */
body.single-post table thead th {
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 0.9em !important;
    vertical-align: middle !important;
}

/* 3. Ajouter une bordure fine entre les lignes pour structurer */
body.single-post table tbody td, 
body.single-post table td {
    /* Utilise une couleur de bordure plus foncée que la bordure extérieure */
    border-bottom: 1px solid #475569 !important; 
    
    /* Ajoute une transition pour le survol */
    transition: background 0.25s ease, color 0.25s ease !important;
}

/* 4. Retirer la bordure de la dernière ligne pour un look épuré */
body.single-post table tbody tr:last-child td {
    border-bottom: none !important;
}

/* 5. Mettre en valeur la première colonne (Aspect Clé) */
body.single-post table tbody td:first-child {
    font-weight: 700 !important;
    color: #cbd5e1 !important; /* Un peu plus clair pour se démarquer */
}

/* 6. S'assurer que le survol s'applique aussi à la première colonne */
body.single-post table tbody tr:hover td:first-child {
    color: #1e293b !important; /* Revient au noir au survol */
}

/* ========================================
 * STYLISATION EN-TÊTE FAQ
 * ======================================== */

/* Cible le titre H2 principal de la FAQ */
body.single-post .faq-section .faq-main-title {
    margin-top: 0 !important; /* Retire la marge haute du H2 */
    margin-bottom: 25px !important; /* Espace avant la première question */
    padding-bottom: 15px !important; /* Espace sous le texte du titre */
    
    /* Ajoute un liseré assorti à la bordure du bloc */
    border-bottom: 2px solid #64748b !important; 
    
    /* S'assure que le texte est blanc pur */
    color: #ffffff !important; 
    font-size: 1.5em !important; /* Un peu plus grand pour un titre de section */
}

/* Retire la marge du premier item pour l'aligner avec le titre */
body.single-post .faq-section .faq-item:first-of-type {
    margin-top: 0 !important;
}

/* ========================================
 * STYLISATION AVANCÉE TABLE DES MATIÈRES
 * ======================================== */

/* 1. Reset la liste (enlève puces et marges) et prépare le compteur */
body.single-post .table-of-contents .toc-list {
    list-style: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    counter-reset: toc-counter; /* Initialise le compteur à 0 */
}

/* 2. Style chaque item de la liste */
body.single-post .table-of-contents .toc-list li {
    padding: 12px 0 12px 45px !important; /* Padding pour espacer et laisser place au numéro */
    position: relative !important; /* Nécessaire pour positionner le numéro */
    
    /* Liseré de séparation (assorti au reste) */
    border-top: 1px solid #475569 !important; 
}

/* 3. Retire le liseré du premier item */
body.single-post .table-of-contents .toc-list li:first-child {
    border-top: none !important;
}

/* 4. Crée et affiche le numéro */
body.single-post .table-of-contents .toc-list li::before {
    counter-increment: toc-counter; /* Incrémente le compteur (1, 2, 3...) */
    content: counter(toc-counter) "."; /* Affiche "1.", "2.", etc. */
    
    /* Positionnement du numéro */
    position: absolute !important;
    left: 10px !important;
    top: 10px !important; /* Ajusté au padding */
    
    /* Style du numéro */
    color: #94a3b8 !important; /* Couleur gris-bleu */
    font-size: 1.1em !important;
    font-weight: 700 !important;
    text-align: right !important;
    width: 25px; /* Largeur fixe pour aligner le texte qui suit */
}

/* 5. Style des liens */
body.single-post .table-of-contents .toc-list a {
    text-decoration: none !important; /* Enlève le soulignement bleu par défaut */
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    /* La couleur #7dd3fc est déjà définie dans une règle précédente */
}

/* 6. Effet de survol sur les liens */
body.single-post .table-of-contents .toc-list a:hover {
    color: #ffffff !important; /* Le lien devient blanc pur */
    text-decoration: underline !important; /* On souligne au survol */
}

/* ========================================
 * STYLE BOUTON "OUVRIR/FERMER" (TOC)
 * ======================================== */

/* 1. Style de base de la "pilule" */
body.single-post .table-of-contents .toc-toggle-icon {
    font-size: 0.7em !important;  /* Un peu plus petit pour un look "badge" */
    font-weight: 600 !important; /* Semi-gras */
    color: #e2e8f0 !important;   /* Texte gris très clair */
    text-transform: uppercase !important; /* Majuscules pour un look de bouton */
    
    /* Le look "pilule" */
    background: #475569 !important; /* Fond gris-bleu (assorti aux bordures) */
    padding: 5px 12px !important;   /* Padding pour l'espacement intérieur */
    border-radius: 50px !important; /* Bords très arrondis */
    
    /* Petite bordure pour le relief */
    border: 1px solid #64748b !important; 
    
    transition: all 0.2s ease !important; /* Transition pour le survol */
}

/* 2. Effet de survol (inversion des couleurs) */
body.single-post .table-of-contents .toc-toggle-icon:hover {
    background: #f1f5f9 !important; /* Fond blanc au survol */
    color: #1e293b !important;   /* Texte sombre au survol (style FAQ/Tableau) */
    border-color: #f1f5f9 !important; /* Bordure blanche */
    transform: scale(1.05); /* Léger zoom pour le feedback */
}

/*
 * 1. Curseur "Flèche Robot" pour le reste du site (curseur par défaut)
 */
body {
  /* Collez l'URL de votre nouvelle image (flèche) ici */
  cursor: url('https://www.iactualite.info/wp-content/uploads/2025/11/pointer-ia.png'), default;
}

/*
 * 2. Curseur "Main Robot" pour les éléments CLICABLES
 * (Avec !important pour forcer la priorité)
 */
a[href],
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
[role="button"],
.button,
.toc-trigger,
.faq-item,
.faq-question,
.faq-answer,
.faq-answer p,
article table tr:hover 
{
  /* Collez l'URL de votre image (main) ici */
  cursor: url('https://www.iactualite.info/wp-content/uploads/2025/11/mouse-pointer-robot.png'), pointer !important;
}