/* ==========================================================================
   CONFIGURATION GLOBALE DES ARTICLES IA
   ========================================================================== */

/* Conteneur principal & Amélioration de la netteté de la police */
.com-content-article .ia-article-container,
div.ia-article-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #212529 !important;
    line-height: 1.8 !important;
    font-size: 11.5pt !important;
    
    /* Antialiasing : Rendu plus fin et net sur écran (Mac/Mobile haut de gamme) */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ==========================================================================
   FONCTIONNALITÉS ERGONOMIQUES MODERNES
   ========================================================================== */

/* 1. Barre de progression de lecture (Scroll Progress Bar - Version Universelle) */
@keyframes grow-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* On applique le code directement sur le BODY pour qu'il capte le défilement de toute la page */
body::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: #0d6efd !important; /* Bleu Cassiopeia */
    z-index: 10000 !important; /* Priorité maximale pour passer au-dessus du menu de Joomla */
    transform-origin: left !important;
    
    /* Animation moderne liée au scroll */
    animation: grow-progress auto linear forwards !important;
    animation-timeline: scroll(root) !important; 
}
.ia-article-container::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: #0d6efd !important; /* Bleu Cassiopeia */
    z-index: 9999 !important;
    transform-origin: 0 50% !important;
    animation: grow-progress auto linear forwards !important;
    animation-timeline: scroll() !important;
}

/* 2. Style de sélection de texte adouci (Selection Overlay) */
.ia-article-container ::selection {
    background-color: rgba(13, 110, 253, 0.15) !important;
    color: #112843 !important;
}

/* 3. Effet Focus épuré sur les images de l'article */
.ia-article-container img {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.ia-article-container img:hover {
    transform: scale(1.01) !important; /* Micro-zoom très subtil */
    box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
}

/* ==========================================================================
   TITRES & DÉCORATIONS (Style Tech Premium - Cassiopeia)
   ========================================================================== */

/* Titre Principal H3 + Effet dégradé linéaire discret */
.com-content-article .ia-article-container h3,
div.ia-article-container h3 {
    font-size: 18pt !important;
    font-weight: 700 !important;
    color: #112843 !important; 
    margin: 45px 0 22px 0 !important;
    padding: 8px 18px !important;
    display: block !important;
    line-height: 1.4 !important;
    
    /* Mix de bordure et fond dégradé qui s'estompe à droite */
    border-left: 5px solid #0d6efd !important; 
    background: linear-gradient(90deg, #f1f5f9 0%, rgba(255,255,255,0) 100%) !important;
    border-radius: 0 6px 6px 0 !important;
    
    /* Reset des autres bordures par sécurité */
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* Sécurité au cas où l'IA génère un H2 */
.com-content-article .ia-article-container h2,
div.ia-article-container h2 {
    font-size: 22pt !important;
    font-weight: 700 !important;
    color: #112843 !important;
    margin: 50px 0 25px 0 !important;
    padding: 8px 18px !important;
    display: block !important;
    line-height: 1.4 !important;
    border-left: 5px solid #0d6efd !important; 
    background: linear-gradient(90deg, #f1f5f9 0%, rgba(255,255,255,0) 100%) !important;
    border-radius: 0 6px 6px 0 !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* Mots-clés importants du corps de texte transformés en "Badges de lecture" */
.ia-article-container p strong {
    color: #112843 !important;
    background-color: #f0f4f8 !important; 
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   PARAGRAPHES, ACCROCHES & EXERGUES
   ========================================================================== */

/* Paragraphes standards */
.ia-article-container p {
    text-align: justify !important;
    margin-bottom: 22px !important;
    color: #212529 !important;
}

/* Premier paragraphe (Chapeau d'introduction) */
.ia-article-container p.chapeau {
    font-size: 13pt !important;
    line-height: 1.7 !important;
    color: #112843 !important;
    margin-bottom: 35px !important;
    font-weight: 500 !important;
    text-align: justify !important;
}

/* Phrase en exergue (Citation/Clé) */
.ia-article-container .ia-exergue {
    display: block !important;
    font-size: 13pt !important;
    font-style: italic !important;
    color: #112843 !important;
    border-left: 4px solid #0d6efd !important;
    padding-left: 20px !important;
    margin: 30px 0 30px 30px !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   LISTES À PUCES STYLISÉES & IMBRIQUÉES (Gestion du double niveau)
   ========================================================================== */

/* 1. Configuration de la liste principale (Niveau 1) */
.ia-article-container ul:not(.ia-block-pros ul):not(.ia-block-cons ul) {
    list-style: none !important;
    padding-left: 5px !important;
}

.ia-article-container ul:not(.ia-block-pros ul):not(.ia-block-cons ul) li {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 10px !important;
    color: #212529 !important;
}

/* Injection du premier chevron bleu Cassiopeia */
.ia-article-container ul:not(.ia-block-pros ul):not(.ia-block-cons ul) li::before {
    content: "›" !important;
    position: absolute !important;
    left: 0 !important;
    top: -2px !important;
    color: #0d6efd !important;
    font-size: 18pt !important;
    font-weight: bold !important;
    line-height: 1 !important;
}

/* 2. Configuration de la sous-liste imbriquée (Niveau 2 - Ex: Configuration PC) */
.ia-article-container ul:not(.ia-block-pros ul):not(.ia-block-cons ul) ul {
    list-style: none !important;
    padding-left: 20px !important; /* Retrait visuel automatique vers la droite */
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}

/* Ajustement des espaces pour les sous-éléments */
.ia-article-container ul:not(.ia-block-pros ul):not(.ia-block-cons ul) ul li {
    padding-left: 18px !important;
    margin-bottom: 8px !important;
}

/* Style du sous-chevron de niveau 2 (Légèrement plus petit pour la hiérarchie) */
.ia-article-container ul:not(.ia-block-pros ul):not(.ia-block-cons ul) ul li::before {
    content: "»" !important; 
    font-size: 14pt !important; 
    top: 0px !important;
    color: #0d6efd !important;
}

/* Reset des badges de lecture pour les éléments en liste (garde le texte fluide) */
.ia-article-container ul li strong {
    color: #0d6efd !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ==========================================================================
   BLOCS SPÉCIFIQUES & COMPOSANTS
   ========================================================================== */

/* Bloc Avertissement initial */
.ia-article-container .ia-warn-block {
    background-color: #fff8e6 !important;
    border: 1px solid #ffeeba !important;
    color: #856404 !important;
    padding: 18px 22px !important;
    border-radius: 8px !important;
    font-size: 10.5pt !important;
    margin-bottom: 35px !important;
    line-height: 1.6 !important;
}

/* Nettoyage de la boîte parasite autour du mot AVERTISSEMENT */
.ia-article-container .ia-warn-block strong,
.ia-article-container strong.ia-warn-block {
    color: #b91c1c !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important; 
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Chiffres clés (Badges en Flexbox + Effet au survol) */
.ia-article-container .ia-stats-wrapper {
    display: flex !important;
    gap: 16px !important;
    margin: 30px 0 !important;
}
.ia-article-container .ia-stat-card {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 18px !important;
    text-align: center !important;
    flex: 1 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.ia-article-container .ia-stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    border-color: #0d6efd !important;
}
.ia-article-container .ia-stat-val {
    font-size: 19pt !important;
    font-weight: 700 !important;
    color: #112843 !important;
    margin-bottom: 2px !important;
}
.ia-article-container .ia-stat-lbl {
    font-size: 8pt !important;
    color: #6c757d !important;
    text-transform: uppercase !important;
    font-weight: 600;
    letter-spacing: 0.5px !important;
}

/* ==========================================================================
   BLOCS POINTS FORTS & LIMITES (Structure Premium 3D) */

.ia-article-container .ia-features-grid {
    display: flex !important;
    gap: 24px !important;
    margin: 35px 0 !important;
}

/* Pivot sur Mobile pour la grille Pros/Cons */
@media (max-width: 768px) {
    .ia-article-container .ia-features-grid { display: block !important; }
    .ia-article-container .ia-block-cons { margin-top: 20px !important; }
}

.ia-article-container .ia-block-pros, 
.ia-article-container .ia-block-cons {
    flex: 1 !important;
    padding: 24px !important;
    border-radius: 12px !important; /* Coins arrondis modernes */
    transition: all 0.3s ease !important; /* Animation de l'ombre */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.04), 0 2px 4px -1px rgba(0,0,0,0.02) !important;
}

/* Effet interactif flottant au survol des cartes */
.ia-article-container .ia-block-pros:hover, 
.ia-article-container .ia-block-cons:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -2px rgba(0,0,0,0.03) !important;
}

/* Style interne : POINTS FORTS */
.ia-article-container .ia-block-pros {
    background-color: #f4fbf7 !important;
    border-top: 4px solid #198754 !important;
}
.ia-article-container .ia-block-pros h4 { 
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
    font-size: 10.5pt !important;
    font-weight: 700 !important;
    color: #146c43 !important; 
}
.ia-article-container .ia-block-pros ul li strong { 
    color: #198754 !important; 
    background: transparent !important;
    padding: 0 !important;
}

/* Style interne : LIMITES */
.ia-article-container .ia-block-cons {
    background-color: #fff5f5 !important;
    border-top: 4px solid #dc3545 !important;
}
.ia-article-container .ia-block-cons h4 { 
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
    font-size: 10.5pt !important;
    font-weight: 700 !important;
    color: #a51d24 !important; 
}
.ia-article-container .ia-block-cons ul li strong { 
    color: #dc3545 !important; 
    background: transparent !important;
    padding: 0 !important;
}

/* On préserve les puces classiques dans les encadrés Pros/Cons */
.ia-article-container .ia-block-pros ul,  
.ia-article-container .ia-block-cons ul {
    padding-left: 20px !important;
    margin: 0 !important;
    list-style-type: disc !important; 
}
.ia-article-container .ia-block-pros li, 
.ia-article-container .ia-block-cons li {
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
    color: #212529 !important;
}

/* ==========================================================================
   TABLEAU COMPARATIF
   ========================================================================== */

.ia-article-container .ia-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 35px 0 !important;
    font-size: 10.5pt !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.01) !important;
}
.ia-article-container .ia-table thead {
    background-color: #112843 !important;
    color: #ffffff !important;
}
.ia-article-container .ia-table th {
    padding: 16px 14px !important;
    text-align: left !important;
    font-weight: 600 !important;
}
.ia-article-container .ia-table th.center, 
.ia-article-container .ia-table td.center {
    text-align: center !important;
}
.ia-article-container .ia-table td {
    padding: 14px 12px !important;
    color: #212529 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

/* SÉCURITÉ : L'effet de survol s'applique UNIQUEMENT au body, pas aux en-têtes (thead) */
.ia-article-container .ia-table tbody tr:hover {
    background-color: #f8f9fa !important; 
}

.ia-article-container .ia-table td.criterion {
    font-weight: 600 !important;
}
.ia-article-container .ia-table td.highlight {
    background-color: #f4fbf7 !important;
    font-weight: 600 !important;
    color: #146c43 !important;
}
.ia-article-container .ia-table td.muted {
    color: #6c757d !important;
}

/* ==========================================================================
   FIN DE PAGE & SOURCES (Puces carrées propres) */

.ia-article-container .ia-hr {
    border: 0 !important;
    border-top: 1px solid #dee2e6 !important;
    margin: 50px 0 30px 0 !important;
}
.ia-article-container h3.ia-sources-title {
    font-size: 11pt !important;
    color: #6c757d !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
    border-left: none !important; 
    padding-left: 0 !important;
    background: none !important; /* Pas de fond dégradé sur le titre des sources */
    letter-spacing: 0.5px !important;
}

.ia-source-link {
    display: list-item !important;
    list-style-type: square !important;
    margin-left: 20px !important;
    margin-bottom: 12px !important;
    color: #0d6efd !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.ia-source-link:hover {
    color: #0a58ca !important;
    text-decoration: underline !important;
}