/**
 * CSS d'isolation pour les sections
 * Ce fichier doit être chargé EN DERNIER pour forcer les styles des sections
 * à prendre le dessus sur les styles globaux de base.html.twig
 * 
 * Utilisé uniquement pour les sections dans .section-isolated-wrapper
 */

/* Isolation et contexte de formatage */
.section-isolated-wrapper {
    isolation: isolate;
    position: relative;
    contain: layout style paint;
    /* Créer un nouveau contexte de formatage pour isoler complètement */
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

/* Réinitialiser uniquement les styles globaux qui entrent en conflit */
/* IMPORTANT: La règle globale dans style.css définit section { padding: 80px 0; position: relative; } */
/* On doit forcer cette règle à ne pas s'appliquer dans les sections isolées */
body .body-inner .section-isolated-wrapper section,
body .body-inner .section-isolated-wrapper .section {
    /* Réinitialiser les padding/margin globaux de style.css */
    margin: 0 !important;
    padding: 0 !important;
    /* Réinitialiser aussi les autres propriétés globales de style.css */
    background-color: transparent !important;
    overflow: visible !important;
    z-index: auto !important;
    /* NE PAS réinitialiser position: relative car les sections l'utilisent */
    /* Les classes Bootstrap (my-5, py-4, position-relative, etc.) dans les templates prendront le dessus */
}

/* Réinitialiser uniquement les marges et paddings globaux qui pourraient interférer */
/* Les règles globales de style.css peuvent définir des marges sur h1-h6, p, etc. */
body .body-inner .section-isolated-wrapper p,
body .body-inner .section-isolated-wrapper h1,
body .body-inner .section-isolated-wrapper h2,
body .body-inner .section-isolated-wrapper h3,
body .body-inner .section-isolated-wrapper h4,
body .body-inner .section-isolated-wrapper h5,
body .body-inner .section-isolated-wrapper h6 {
    /* Réinitialiser uniquement les marges/paddings, pas tous les styles */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Les autres styles (couleurs, fonts, etc.) seront gérés par section.css et content-harmony.css */
    /* Les classes Bootstrap (mb-3, mt-4, etc.) dans les templates prendront le dessus */
}

body .body-inner .section-isolated-wrapper ul,
body .body-inner .section-isolated-wrapper ol {
    /* Réinitialiser uniquement les styles de liste globaux */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    list-style: none !important;
}

body .body-inner .section-isolated-wrapper li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Assurer que Bootstrap fonctionne correctement dans les sections */
/* Les règles globales de style.css peuvent définir .container { padding: 0 30px; } */
/* On doit réinitialiser ce padding pour laisser Bootstrap gérer */
body .body-inner .section-isolated-wrapper .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Réinitialiser le padding global de style.css (padding: 0 30px) */
    /* Laisser Bootstrap gérer ses propres paddings via ses classes */
    padding-left: 15px !important; /* Bootstrap default */
    padding-right: 15px !important; /* Bootstrap default */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* Protection spécifique pour la section 20 - assurer les espacements Bootstrap */
body .body-inner .section-isolated-wrapper section.my-5 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

body .body-inner .section-isolated-wrapper section.py-5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

body .body-inner .section-isolated-wrapper .mb-4 {
    margin-bottom: 1.5rem !important;
}

body .body-inner .section-isolated-wrapper .mb-3 {
    margin-bottom: 1rem !important;
}

body .body-inner .section-isolated-wrapper .mb-lg-0 {
    margin-bottom: 0 !important;
}

@media (min-width: 992px) {
    body .body-inner .section-isolated-wrapper .mb-lg-0 {
        margin-bottom: 0 !important;
    }
}

body .body-inner .section-isolated-wrapper .g-3 {
    --bs-gutter-x: 1rem !important;
    --bs-gutter-y: 1rem !important;
}

body .body-inner .section-isolated-wrapper .row.g-3 {
    margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
    margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
}

body .body-inner .section-isolated-wrapper .row.g-3 > * {
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
    padding-top: calc(var(--bs-gutter-y) * 0.5) !important;
    padding-bottom: calc(var(--bs-gutter-y) * 0.5) !important;
}

body .body-inner .section-isolated-wrapper .p-3 {
    padding: 1rem !important;
}

body .body-inner .section-isolated-wrapper .rounded-3 {
    border-radius: 0.5rem !important;
}

/* Protection des classes d'alignement Bootstrap */
body .body-inner .section-isolated-wrapper .align-items-center {
    align-items: center !important;
}

/* Protection spécifique pour les éléments de la section 20 */
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Protection des cartes KeyFigures dans la section 20 */
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .bg-white.bg-opacity-10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

body .body-inner .section-isolated-wrapper .row {
    display: flex !important;
    flex-wrap: wrap !important;
    /* Utiliser les marges négatives Bootstrap par défaut */
    box-sizing: border-box !important;
    /* Réinitialiser les marges/paddings globaux qui pourraient interférer */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Marges négatives Bootstrap pour compenser les paddings des colonnes */
    margin-left: -15px !important;
    margin-right: -15px !important;
}

body .body-inner .section-isolated-wrapper [class*="col-"] {
    position: relative !important;
    width: 100% !important;
    /* Utiliser les paddings Bootstrap par défaut (15px) */
    box-sizing: border-box !important;
    /* Réinitialiser les marges/paddings globaux qui pourraient interférer */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Assurer que les colonnes ont les paddings Bootstrap */
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Forcer l'application des variables CSS des sections */
body .body-inner .section-isolated-wrapper {
    /* Réappliquer les variables CSS des sections avec la couleur principale du site */
    --content-primary: #B42E5E;
    --content-primary-dark: #8a2347;
    --content-primary-light: #c94d7a;
    --content-primary-darker: #6a1a35;
    --content-secondary: #2250fc;
    --content-secondary-dark: #1a3fc9;
    --content-secondary-light: #4a6ffc;
    --text-primary: #1a1a1a;
    --text-secondary: #4a5568;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Forcer les polices des sections */
body .body-inner .section-isolated-wrapper * {
    box-sizing: border-box;
}

/* Forcer les styles de texte des sections - POLICES ET TAILLES */
body .body-inner .section-isolated-wrapper .section-title {
    font-family: var(--font-family-heading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    font-weight: 700 !important;
    font-size: clamp(1.4rem, 3.3vw, 2rem) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    color: #212529 !important; /* Couleur plus foncée pour une meilleure visibilité */
}

/* Protéger les couleurs des titres de sections - forcer la couleur sauf si text-white/text-light */
body .body-inner .section-isolated-wrapper .section-title:not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light):not([style*="color"]) {
    color: #212529 !important;
}

/* Si le titre a une classe text-primary, utiliser la couleur primaire */
body .body-inner .section-isolated-wrapper .section-title.text-primary {
    color: var(--content-primary, #B42E5E) !important;
}

/* Protéger les titres h1, h2, h3, etc. dans les sections */
body .body-inner .section-isolated-wrapper h1:not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light):not([style*="color"]),
body .body-inner .section-isolated-wrapper h2:not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light):not([style*="color"]),
body .body-inner .section-isolated-wrapper h3:not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light):not([style*="color"]),
body .body-inner .section-isolated-wrapper h4:not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light):not([style*="color"]),
body .body-inner .section-isolated-wrapper h5:not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light):not([style*="color"]),
body .body-inner .section-isolated-wrapper h6:not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light):not([style*="color"]) {
    color: #212529 !important; /* Couleur plus foncée pour une meilleure visibilité */
    font-family: var(--font-family-heading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Forcer la couleur des sous-titres */
body .body-inner .section-isolated-wrapper .section-subtitle {
    font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    font-size: var(--font-size-lg, 1.125rem) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #495057 !important; /* Couleur plus foncée pour une meilleure visibilité */
}

/* Forcer la couleur des sous-titres même si d'autres styles tentent de l'écraser */
body .body-inner .section-isolated-wrapper .section-subtitle:not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light):not([style*="color"]) {
    color: #495057 !important;
}

body .body-inner .section-isolated-wrapper .kf-prose,
body .body-inner .section-isolated-wrapper .section-content,
body .body-inner .section-isolated-wrapper .section-content-text {
    font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    font-size: var(--font-size-base, 1rem) !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #212529 !important; /* Couleur plus foncée pour une meilleure visibilité */
}

/* Forcer les couleurs primaires et secondaires */
body .body-inner .section-isolated-wrapper .bg-primary,
body .body-inner .section-isolated-wrapper [class*="bg-primary"]:not([class*="gradient"]) {
    background-color: var(--content-primary, #B42E5E) !important;
}

body .body-inner .section-isolated-wrapper .bg-secondary,
body .body-inner .section-isolated-wrapper [class*="bg-secondary"]:not([class*="gradient"]) {
    background-color: var(--content-secondary, #2250fc) !important;
}

/* Protéger les gradients - utiliser la couleur principale du site #B42E5E */
body .body-inner .section-isolated-wrapper .bg-gradient-primary,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] {
    background: linear-gradient(135deg, var(--content-primary, #B42E5E) 0%, var(--content-primary-dark, #8a2347) 100%) !important;
    /* Fallback avec la couleur principale du site */
    background: linear-gradient(135deg, #B42E5E 0%, #8a2347 100%) !important;
    color: white !important;
}

/* FORCER les textes en blanc dans les sections avec le gradient primary */
body .body-inner .section-isolated-wrapper .bg-gradient-primary,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"],
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"],
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"],
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"],
body .body-inner .section-isolated-wrapper [style*="linear-gradient(135deg, #B42E5E"] {
    color: white !important;
}

/* Forcer tous les textes en blanc dans les conteneurs avec gradient primary */
body .body-inner .section-isolated-wrapper .bg-gradient-primary *,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] *,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] *,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] * {
    color: white !important;
}

/* Forcer les titres en blanc */
body .body-inner .section-isolated-wrapper .bg-gradient-primary h1,
body .body-inner .section-isolated-wrapper .bg-gradient-primary h2,
body .body-inner .section-isolated-wrapper .bg-gradient-primary h3,
body .body-inner .section-isolated-wrapper .bg-gradient-primary h4,
body .body-inner .section-isolated-wrapper .bg-gradient-primary h5,
body .body-inner .section-isolated-wrapper .bg-gradient-primary h6,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] h1,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] h2,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] h3,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] h4,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] h5,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] h6,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] h1,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] h2,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] h3,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] h4,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] h5,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] h6,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] h1,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] h2,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] h3,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] h4,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] h5,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] h6 {
    color: white !important;
}

/* Forcer les paragraphes et textes en blanc */
body .body-inner .section-isolated-wrapper .bg-gradient-primary p,
body .body-inner .section-isolated-wrapper .bg-gradient-primary div,
body .body-inner .section-isolated-wrapper .bg-gradient-primary span,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .section-title,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .section-subtitle,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .kf-prose,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .kf-title,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .kf-subtitle,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .kf-highlight,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .kf-value,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .kf-label,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] p,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] div,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] span,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .section-title,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .section-subtitle,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .kf-prose,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] p,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] div,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] span,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .section-title,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .section-subtitle,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .kf-prose,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] p,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] div,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] span,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .section-title,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .section-subtitle,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .kf-prose {
    color: white !important;
}

/* Exception : garder les classes text-white-50, text-white-75, text-white pour les nuances */
body .body-inner .section-isolated-wrapper .bg-gradient-primary .text-white-50,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .text-white-75,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .text-white-50,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .text-white-75,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .text-white-50,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .text-white-75,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .text-white-50,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .text-white-75 {
    color: rgba(255, 255, 255, 0.5) !important;
}

body .body-inner .section-isolated-wrapper .bg-gradient-primary .text-white-75,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .text-white-75,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .text-white-75,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Forcer les KeyFigures en blanc dans les sections avec gradient primary */
body .body-inner .section-isolated-wrapper .bg-gradient-primary .kf-highlight,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .kf-value,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .kf-label,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .kf-title,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .kf-subtitle,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .kf-prose,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .kf-highlight,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .kf-value,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .kf-label,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .kf-title,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .kf-subtitle,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .kf-prose,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .kf-highlight,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .kf-value,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .kf-label,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .kf-title,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .kf-subtitle,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .kf-prose,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .kf-highlight,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .kf-value,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .kf-label,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .kf-title,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .kf-subtitle,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .kf-prose {
    color: white !important;
}

/* Exception : si un KeyFigure a une classe text-muted ou text-dark, on les force aussi en blanc dans les gradients */
body .body-inner .section-isolated-wrapper .bg-gradient-primary .text-muted,
body .body-inner .section-isolated-wrapper .bg-gradient-primary .text-dark,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .text-muted,
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"] .text-dark,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .text-muted,
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #B42E5E"] .text-dark,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .text-muted,
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #B42E5E"] .text-dark {
    color: white !important;
}

/* Dégradé vertical pour bg-gradient-primary */
body .body-inner .section-isolated-wrapper .bg-gradient-primary[style*="to bottom"],
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"][style*="to bottom"] {
    background: linear-gradient(to bottom, #B42E5E 0%, #8a2347 100%) !important;
}

/* Dégradé radial pour bg-gradient-primary */
body .body-inner .section-isolated-wrapper .bg-gradient-primary[style*="radial"],
body .body-inner .section-isolated-wrapper [class*="bg-gradient-primary"][style*="radial"] {
    background: radial-gradient(circle, #B42E5E 0%, #8a2347 100%) !important;
}

/* FORCER les gradients avec #B42E5E même si des styles inline existent */
body .body-inner .section-isolated-wrapper section[style*="linear-gradient(135deg, #667eea"],
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(135deg, #667eea"],
body .body-inner .section-isolated-wrapper [style*="linear-gradient(135deg, #667eea"] {
    background: linear-gradient(135deg, #B42E5E 0%, #8a2347 100%) !important;
}

body .body-inner .section-isolated-wrapper section[style*="linear-gradient(to bottom, #667eea"],
body .body-inner .section-isolated-wrapper div[style*="linear-gradient(to bottom, #667eea"],
body .body-inner .section-isolated-wrapper [style*="linear-gradient(to bottom, #667eea"] {
    background: linear-gradient(to bottom, #B42E5E 0%, #8a2347 100%) !important;
}

/* Protéger les overlays avec rgba basés sur #B42E5E */
body .body-inner .section-isolated-wrapper [style*="rgba(102, 126, 234"] {
    background: linear-gradient(135deg, rgba(180, 46, 94, 0.1) 0%, transparent 100%) !important;
}

body .body-inner .section-isolated-wrapper .text-primary,
body .body-inner .section-isolated-wrapper [class*="text-primary"]:not(.text-white):not(.text-light) {
    color: var(--content-primary, #B42E5E) !important;
}

body .body-inner .section-isolated-wrapper .text-secondary,
body .body-inner .section-isolated-wrapper [class*="text-secondary"]:not(.text-white):not(.text-light) {
    color: var(--content-secondary, #2250fc) !important;
}

/* Protéger les styles de timeline */
/* Les timelines utilisent position: relative et absolute, on doit les protéger */
body .body-inner .section-isolated-wrapper .timeline-2col,
body .body-inner .section-isolated-wrapper .timeline-2col-modern {
    position: relative !important;
    display: block !important; /* Changé de grid à block pour permettre le layout natif */
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    isolation: isolate !important;
    padding: 2rem 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Protéger contre les règles globales de style.css */
    overflow: visible !important;
    z-index: auto !important;
}

body .body-inner .section-isolated-wrapper .timeline-axis,
body .body-inner .section-isolated-wrapper .timeline-axis-modern {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-1px) !important;
    width: 3px !important;
    height: 100% !important;
    background: linear-gradient(to bottom, var(--content-primary, #B42E5E) 0%, var(--content-primary-dark, #8a2347) 100%) !important;
    /* Fallback avec la couleur principale du site */
    background: linear-gradient(to bottom, #B42E5E 0%, #8a2347 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    /* Protéger contre les règles globales */
    margin: 0 !important;
    padding: 0 !important;
}

body .body-inner .section-isolated-wrapper .timeline-item,
body .body-inner .section-isolated-wrapper .timeline-item-modern {
    position: relative !important;
    z-index: 1 !important;
    /* Protéger contre les règles globales */
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Garder margin-bottom pour l'espacement entre items */
    margin-bottom: 3rem !important;
    /* Les paddings left/right sont gérés par les classes .left et .right */
}

body .body-inner .section-isolated-wrapper .timeline-dot,
body .body-inner .section-isolated-wrapper .timeline-dot-modern {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: var(--content-primary, #B42E5E) !important;
    border: 4px solid #fff !important;
    box-shadow: 0 0 0 3px rgba(180, 46, 94, 0.2) !important;
    z-index: 2 !important;
    /* Protéger contre les règles globales */
    margin: 0 !important;
    padding: 0 !important;
}

body .body-inner .section-isolated-wrapper .timeline-content,
body .body-inner .section-isolated-wrapper .timeline-content-modern {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.06) !important;
}

/* Forcer les paddings pour le layout 2 colonnes sur desktop */
@media (min-width: 768px) {
    body .body-inner .section-isolated-wrapper .timeline-item-modern.left,
    body .body-inner .section-isolated-wrapper .timeline-item.left {
        padding-right: calc(50% + 2rem) !important;
        padding-left: 0 !important;
    }
    
    body .body-inner .section-isolated-wrapper .timeline-item-modern.right,
    body .body-inner .section-isolated-wrapper .timeline-item.right {
        padding-left: calc(50% + 2rem) !important;
        padding-right: 0 !important;
    }
    
    body .body-inner .section-isolated-wrapper .timeline-item-modern.left .timeline-content-modern,
    body .body-inner .section-isolated-wrapper .timeline-item.left .timeline-content {
        text-align: right !important;
    }
    
    body .body-inner .section-isolated-wrapper .timeline-item-modern.right .timeline-content-modern,
    body .body-inner .section-isolated-wrapper .timeline-item.right .timeline-content {
        text-align: left !important;
    }
}

@media (max-width: 767.98px) {
    body .body-inner .section-isolated-wrapper .timeline-axis,
    body .body-inner .section-isolated-wrapper .timeline-axis-modern {
        left: 12px !important;
        transform: none !important;
    }
    
    body .body-inner .section-isolated-wrapper .timeline-item.left,
    body .body-inner .section-isolated-wrapper .timeline-item.right,
    body .body-inner .section-isolated-wrapper .timeline-item-modern.left,
    body .body-inner .section-isolated-wrapper .timeline-item-modern.right {
        padding-left: 1.75rem !important;
        padding-right: 0 !important;
    }
    
    body .body-inner .section-isolated-wrapper .timeline-dot,
    body .body-inner .section-isolated-wrapper .timeline-dot-modern {
        left: 12px !important;
        transform: translateY(-50%) !important;
    }
}

/* Protéger les styles de timelines de KeyFigures (variants v9, v29) */
body .body-inner .section-isolated-wrapper .kf-timeline,
body .body-inner .section-isolated-wrapper .kf-timeline-modern,
body .body-inner .section-isolated-wrapper .kf-vertical-timeline {
    position: relative !important;
    padding-left: 1rem !important;
    margin-bottom: 1rem !important;
    /* Protéger contre les règles globales */
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    z-index: 1 !important;
    /* Assurer que les transitions fonctionnent */
    transition: all 0.3s ease !important;
}

body .body-inner .section-isolated-wrapper .kf-timeline:hover,
body .body-inner .section-isolated-wrapper .kf-timeline-modern:hover,
body .body-inner .section-isolated-wrapper .kf-vertical-timeline:hover {
    transform: translateX(5px) !important;
}

body .body-inner .section-isolated-wrapper .kf-timeline::before {
    content: "" !important;
    position: absolute !important;
    left: 0.25rem !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: rgba(180, 46, 94, 0.25) !important; /* Utiliser la couleur primaire du site */
    z-index: 0 !important;
    /* Protéger contre les règles globales */
    margin: 0 !important;
    padding: 0 !important;
}

body .body-inner .section-isolated-wrapper .kf-timeline-modern::before {
    content: '' !important;
    position: absolute !important;
    left: 19px !important;
    top: 40px !important;
    bottom: -20px !important;
    width: 2px !important;
    background: linear-gradient(to bottom, #B42E5E 0%, #e9ecef 100%) !important;
    z-index: 0 !important;
    /* Protéger contre les règles globales */
    margin: 0 !important;
    padding: 0 !important;
}

body .body-inner .section-isolated-wrapper .kf-vertical-timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 24px !important;
    top: 50px !important;
    bottom: -20px !important;
    width: 2px !important;
    background: linear-gradient(to bottom, #B42E5E 0%, #e9ecef 100%) !important;
    z-index: 0 !important;
    /* Protéger contre les règles globales */
    margin: 0 !important;
    padding: 0 !important;
}

body .body-inner .section-isolated-wrapper .kf-timeline-modern:last-child::before,
body .body-inner .section-isolated-wrapper .kf-vertical-timeline:last-child::before {
    display: none !important;
}

body .body-inner .section-isolated-wrapper .kf-timeline .dot {
    width: 0.75rem !important;
    height: 0.75rem !important;
    border-radius: 50% !important;
    background: var(--content-primary, #B42E5E) !important;
    position: absolute !important;
    left: -0.125rem !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
    /* Protéger contre les règles globales */
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
}

/* Protéger les cercles de timeline dans kf-timeline-modern et kf-vertical-timeline */
body .body-inner .section-isolated-wrapper .kf-timeline-modern > div[class*="position-absolute"][class*="rounded-circle"],
body .body-inner .section-isolated-wrapper .kf-vertical-timeline > div[class*="position-absolute"][class*="rounded-circle"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    /* Protéger contre les règles globales */
    margin: 0 !important;
    padding: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Protéger le contenu des timelines */
body .body-inner .section-isolated-wrapper .kf-timeline-modern .ms-5,
body .body-inner .section-isolated-wrapper .kf-vertical-timeline .ms-5 {
    margin-left: 3rem !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Protéger les styles de citations/quotes */
body .body-inner .section-isolated-wrapper .blockquote,
body .body-inner .section-isolated-wrapper blockquote,
body .body-inner .section-isolated-wrapper [class*="quote"] {
    font-size: 1rem !important;
    font-style: italic !important;
    border-left: 3px solid var(--content-primary, #B42E5E) !important;
    padding-left: 1rem !important;
    margin: 1rem 0 !important;
    color: #212529 !important; /* Forcer une couleur foncée */
}

body .body-inner .section-isolated-wrapper .kf-quote-modern,
body .body-inner .section-isolated-wrapper [class*="kf-quote"] {
    transition: all 0.3s ease !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
}

body .body-inner .section-isolated-wrapper .blockquote-footer {
    font-size: 0.875rem !important;
    color: #495057 !important; /* Couleur plus foncée pour une meilleure visibilité */
}

/* Protéger les styles de KeyFigures */
body .body-inner .section-isolated-wrapper .kf-highlight,
body .body-inner .section-isolated-wrapper .kf-value,
body .body-inner .section-isolated-wrapper [class*="kf-stat"] .value {
    font-family: var(--font-family-heading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #212529 !important; /* Forcer une couleur foncée */
}

body .body-inner .section-isolated-wrapper .kf-label,
body .body-inner .section-isolated-wrapper .label {
    font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    font-size: var(--font-size-base, 1rem) !important;
    font-weight: 600 !important;
    color: #212529 !important; /* Forcer une couleur foncée */
}

body .body-inner .section-isolated-wrapper .kf-title,
body .body-inner .section-isolated-wrapper .kf-title h4,
body .body-inner .section-isolated-wrapper .kf-title h5,
body .body-inner .section-isolated-wrapper .kf-title h6 {
    font-family: var(--font-family-heading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    font-size: var(--font-size-lg, 1.125rem) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #212529 !important; /* Forcer une couleur foncée */
}

body .body-inner .section-isolated-wrapper .kf-subtitle {
    font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    font-size: var(--font-size-sm, 0.875rem) !important;
    font-weight: 400 !important;
    color: #495057 !important; /* Couleur plus foncée pour une meilleure visibilité */
}

body .body-inner .section-isolated-wrapper .kf-prose h1,
body .body-inner .section-isolated-wrapper .kf-prose h2,
body .body-inner .section-isolated-wrapper .kf-prose h3,
body .body-inner .section-isolated-wrapper .kf-prose h4 {
    font-family: var(--font-family-heading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-top: var(--spacing-lg, 1.5rem) !important;
    margin-bottom: var(--spacing-md, 1rem) !important;
    color: #212529 !important; /* Forcer une couleur foncée */
}

/* Protection des classes de gradient et autres styles utilisés dans les sections */
body .body-inner .section-isolated-wrapper .bg-gradient-overlay-banner {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%) !important;
}

body .body-inner .section-isolated-wrapper .bg-gradient-primary-light-overlay {
    background: linear-gradient(135deg, rgba(180, 46, 94, 0.1) 0%, transparent 100%) !important;
}

body .body-inner .section-isolated-wrapper .bg-gradient-primary-dark-overlay {
    background: linear-gradient(135deg, rgba(180, 46, 94, 0.6) 0%, transparent 100%) !important;
}

body .body-inner .section-isolated-wrapper .bg-gradient-primary-vertical {
    background: linear-gradient(to bottom, var(--content-primary, #B42E5E) 0%, var(--content-primary-dark, #8a2347) 100%) !important;
}

body .body-inner .section-isolated-wrapper .bg-gradient-primary-radial {
    background: radial-gradient(circle, var(--content-primary, #B42E5E) 0%, var(--content-primary-dark, #8a2347) 100%) !important;
}

body .body-inner .section-isolated-wrapper .bg-gradient-primary-hover {
    background: linear-gradient(135deg, var(--content-primary-dark, #8a2347) 0%, var(--content-primary-darker, #6a1a35) 100%) !important;
}

/* ===== PROTECTION DES POSITIONS RELATIVE/ABSOLUTE ===== */
/* Protéger les éléments avec position-relative et position-absolute dans les sections */
body .body-inner .section-isolated-wrapper .position-relative,
body .body-inner .section-isolated-wrapper [class*="position-relative"] {
    position: relative !important;
    /* Protéger contre les règles globales qui pourraient changer la position */
    z-index: auto !important;
}

body .body-inner .section-isolated-wrapper .position-absolute,
body .body-inner .section-isolated-wrapper [class*="position-absolute"] {
    position: absolute !important;
    /* Protéger contre les règles globales qui pourraient changer la position */
    z-index: auto !important;
}

body .body-inner .section-isolated-wrapper .position-fixed,
body .body-inner .section-isolated-wrapper [class*="position-fixed"] {
    position: fixed !important;
    /* Protéger contre les règles globales qui pourraient changer la position */
    z-index: auto !important;
}

body .body-inner .section-isolated-wrapper .position-sticky,
body .body-inner .section-isolated-wrapper [class*="position-sticky"] {
    position: sticky !important;
    /* Protéger contre les règles globales qui pourraient changer la position */
    z-index: auto !important;
}

/* ===== PROTECTION DES BADGES ===== */
/* Protéger les badges contre les règles globales de style.css */
body .body-inner .section-isolated-wrapper .badge,
body .body-inner .section-isolated-wrapper [class*="badge"] {
    /* Protéger la position des badges */
    position: relative !important;
    /* Protéger les marges/paddings */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0.25em !important;
    padding-bottom: 0.25em !important;
    padding-left: 0.4em !important;
    padding-right: 0.4em !important;
    /* Protéger les autres styles de badge */
    display: inline-block !important;
    font-size: 0.75em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
    border-radius: 0.25rem !important;
}

/* Protéger les badges Bootstrap spécifiques */
body .body-inner .section-isolated-wrapper .badge-primary {
    background-color: var(--content-primary, #B42E5E) !important;
    color: #fff !important;
}

body .body-inner .section-isolated-wrapper .badge-secondary {
    background-color: var(--content-secondary, #2250fc) !important;
    color: #fff !important;
}

body .body-inner .section-isolated-wrapper .badge-pill {
    padding-right: 0.6em !important;
    padding-left: 0.6em !important;
    border-radius: 10rem !important;
}

/* Protéger les badges de KeyFigures */
body .body-inner .section-isolated-wrapper .kf-badge {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.35rem 0.6rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    /* Les autres styles sont définis dans keyFigure.css */
}