/* Corrections globales pour les articles */

/* Forcer l'utilisation de toute la largeur disponible */
.article-body {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Forcer tous les conteneurs WordPress à utiliser toute la largeur */
.article-body .container,
.article-body .container-wrapper,
.article-body .entry-content,
.article-body .post-content,
.article-body .wp-block-group,
.article-body .wp-block-group__inner-container,
.article-body [class*="container"],
.article-body [class*="wrapper"],
.article-body [class*="content"],
.article-body > div,
.article-body > article,
.article-body > section {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Forcer tous les divs à utiliser toute la largeur (sauf ceux explicitement en inline) */
.article-body div:not([style*="display: inline"]):not([style*="display:inline"]) {
    max-width: 100% !important;
}

/* Annuler les styles inline max-width */
.article-body [style*="max-width"] {
    max-width: 100% !important;
}

/* Par défaut, tout le texte dans article-body doit être visible */
.article-body,
.article-body p,
.article-body li,
.article-body td,
.article-body span,
.article-body div {
    color: #374151 !important;
}

/* Titres par défaut */
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
    color: #1f2937 !important;
}

/* Textes dans les encadrés avec gradient (fond sombre - seulement si vraiment sombre) */
.article-body [style*="background: linear-gradient"][style*="rgb(0"] *:not(a):not(button),
.article-body [style*="background: linear-gradient"][style*="rgb(15"] *:not(a):not(button),
.article-body [style*="background: linear-gradient"][style*="rgb(20"] *:not(a):not(button),
.article-body [style*="background: #000"] *:not(a):not(button),
.article-body [style*="background: #0f"] *:not(a):not(button) {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Textes dans les encadrés avec fond clair (après correction) */
.article-body [style*="background: #f8fafc"] *:not(a):not(button),
.article-body [style*="background: #f1f5f9"] *:not(a):not(button),
.article-body [style*="background: #f9fafb"] *:not(a):not(button),
.article-body [style*="background: #ffffff"] *:not(a):not(button),
.article-body [style*="background: #fff"] *:not(a):not(button),
.article-body [style*="background: white"] *:not(a):not(button) {
    color: #1e293b !important;
}

/* Liens dans les encadrés avec fond sombre (seulement si vraiment sombre) */
.article-body [style*="background: linear-gradient"][style*="rgb(0"] a,
.article-body [style*="background: #000"] a {
    color: #ffffff !important;
    text-decoration: underline;
    font-weight: 600;
}

.article-body [style*="background: linear-gradient"][style*="rgb(0"] a:hover,
.article-body [style*="background: #000"] a:hover {
    color: #fbbf24 !important;
}

/* Liens dans les encadrés avec fond clair (après correction) */
.article-body [style*="background: #f8fafc"] a,
.article-body [style*="background: #f1f5f9"] a,
.article-body [style*="background: #f9fafb"] a,
.article-body [style*="background: #ffffff"] a,
.article-body [style*="background: #fff"] a,
.article-body [style*="background: white"] a {
    color: #3b82f6 !important;
    text-decoration: underline;
    font-weight: 600;
}

.article-body [style*="background: #f8fafc"] a:hover,
.article-body [style*="background: #f1f5f9"] a:hover,
.article-body [style*="background: #f9fafb"] a:hover,
.article-body [style*="background: #ffffff"] a:hover,
.article-body [style*="background: #fff"] a:hover,
.article-body [style*="background: white"] a:hover {
    color: #2563eb !important;
}

/* Boutons avec fond blanc → Texte bleu */
.article-body button[style*="background: white"],
.article-body button[style*="background: #fff"],
.article-body button[style*="background: #ffffff"],
.article-body a[style*="background: white"],
.article-body a[style*="background: #fff"],
.article-body a[style*="background: #ffffff"],
.article-body [class*="button"][style*="background: white"],
.article-body [class*="button"][style*="background: #fff"],
.article-body [class*="btn"][style*="background: white"],
.article-body [class*="btn"][style*="background: #fff"] {
    color: #3b82f6 !important;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.article-body button[style*="background: white"]:hover,
.article-body button[style*="background: #fff"]:hover,
.article-body a[style*="background: white"]:hover,
.article-body a[style*="background: #fff"]:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    background-color: #f0f9ff !important;
}

/* Tous les autres boutons → Fond jaune clair */
.article-body button:not([style*="background: white"]):not([style*="background: #fff"]):not([style*="background: #ffffff"]),
.article-body a[style*="padding"][style*="border-radius"]:not([style*="background: white"]):not([style*="background: #fff"]),
.article-body [class*="button"]:not([style*="background: white"]):not([style*="background: #fff"]),
.article-body [class*="btn"]:not([style*="background: white"]):not([style*="background: #fff"]) {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 2px solid #fbbf24 !important;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.article-body button:not([style*="background: white"]):hover,
.article-body a[style*="padding"][style*="border-radius"]:not([style*="background: white"]):hover,
.article-body [class*="button"]:not([style*="background: white"]):hover,
.article-body [class*="btn"]:not([style*="background: white"]):hover {
    background: #fde68a !important;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.3) !important;
}

/* Encadrés d'information avec fond clair */
.article-body [style*="background: #fef3c7"] *,
.article-body [style*="background: #e0f2fe"] *,
.article-body [style*="background: #eff6ff"] *,
.article-body [style*="background: #f3f4f6"] *,
.article-body [style*="background: #fef2f2"] *,
.article-body [style*="background: #ecfdf5"] * {
    color: #1e293b !important;
}

/* Tableaux */
.article-body table {
    color: #374151 !important;
}

.article-body table td,
.article-body table th {
    color: #374151 !important;
}

.article-body table thead th {
    color: #ffffff !important;
    background: #3b82f6 !important;
}

/* Tableaux avec fond sombre */
.article-body table[style*="background: #1e293b"] td,
.article-body table[style*="background: #334155"] td,
.article-body table[style*="background: linear-gradient"] td {
    color: #ffffff !important;
}

/* Liens dans le contenu normal */
.article-body a:not([style*="background"]) {
    color: #3b82f6 !important;
    text-decoration: none;
    transition: color 0.2s;
}

.article-body a:not([style*="background"]):hover {
    color: #2563eb !important;
    text-decoration: underline;
}

/* Listes */
.article-body ul li,
.article-body ol li {
    color: #374151 !important;
}

/* Strong et em */
.article-body strong,
.article-body b {
    color: #1f2937 !important;
    font-weight: 700;
}

.article-body em,
.article-body i {
    color: inherit;
}

/* Corrections pour les éléments avec style inline "color: white" sur fond blanc */
.article-body [style*="background: white"][style*="color: white"],
.article-body [style*="background: #fff"][style*="color: white"],
.article-body [style*="background: #ffffff"][style*="color: white"] {
    color: #1f2937 !important;
}

/* Forcer la visibilité sur fond blanc */
.article-body > div[style*="background: white"] *:not([style*="background: linear-gradient"]),
.article-body > div[style*="background: #fff"] *:not([style*="background: linear-gradient"]),
.article-body > div[style*="background: #ffffff"] *:not([style*="background: linear-gradient"]) {
    color: #374151 !important;
}

/* Améliorer la netteté des images dans les articles */
.article-body img {
    /* Améliorer la netteté lors du redimensionnement */
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    /* Forcer le rendu haute qualité */
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* S'assurer que les images gardent leur ratio */
    object-fit: contain;
    /* Améliorer la qualité d'affichage */
    -webkit-transform: translateZ(0);
    will-change: auto;
}

/* Images WordPress */
.article-body .wp-block-image img,
.article-body .wp-image img,
.article-body figure img {
    /* Réinitialiser les dimensions pour éviter le flou */
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    /* Améliorer la netteté */
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Si une image a un width/height inline qui cause du flou, la forcer à auto */
.article-body img[width],
.article-body img[height] {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Forcer les avantages et inconvénients à rester côte à côte */
.article-body .i2-pros-cons-wrapper {
    display: block !important;
    width: 100% !important;
}

.article-body .i2-pros-cons-wrapper .i2-cons,
.article-body .i2-pros-cons-wrapper .i2-pros {
    width: 48% !important;
    display: inline-block !important;
    vertical-align: top !important;
}

.article-body .i2-pros-cons-wrapper .i2-spacer {
    width: 4% !important;
    display: inline-block !important;
}

/* Sur mobile aussi, garder côte à côte */
@media (max-width: 768px) {
    .article-body .i2-pros-cons-wrapper .i2-cons,
    .article-body .i2-pros-cons-wrapper .i2-pros {
        width: 48% !important;
        display: inline-block !important;
        vertical-align: top !important;
    }
    
    .article-body .i2-pros-cons-wrapper .i2-spacer {
        width: 4% !important;
        display: inline-block !important;
    }
}

/* Corriger les boutons CTA (Call-To-Action) pour qu'ils soient cliquables */
.article-body a[href],
.article-body button {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
}

/* S'assurer que les boutons CTA ont un z-index suffisant */
.article-body a[style*="padding"][style*="border-radius"],
.article-body a[class*="button"],
.article-body a[class*="btn"],
.article-body button[style*="padding"],
.article-body [class*="button"][style*="padding"],
.article-body [class*="btn"][style*="padding"] {
    z-index: 10 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
}

/* Empêcher les éléments parents de bloquer les clics */
.article-body * {
    pointer-events: auto !important;
}

.article-body [style*="pointer-events: none"] {
    pointer-events: auto !important;
}

/* Pour les éléments avec overlay, s'assurer que les liens sont cliquables */
.article-body [style*="position: absolute"],
.article-body [style*="position: fixed"] {
    pointer-events: none !important;
}

.article-body [style*="position: absolute"] a,
.article-body [style*="position: absolute"] button,
.article-body [style*="position: fixed"] a,
.article-body [style*="position: fixed"] button {
    pointer-events: auto !important;
    z-index: 999 !important;
}

/* Corriger les liens sans href valide */
.article-body a:not([href]),
.article-body a[href=""],
.article-body a[href="#"],
.article-body a[href^="javascript:"] {
    cursor: default !important;
    opacity: 0.6 !important;
}

/* S'assurer que les boutons sont visibles et cliquables */
.article-body button,
.article-body a[style*="background"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Éviter que les éléments avec z-index négatif bloquent les clics */
.article-body [style*="z-index"] {
    z-index: auto !important;
}

.article-body [style*="z-index"][style*="z-index: -"] {
    z-index: 1 !important;
}