/* Reset et styles de base */
* {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body {
    font-family: Arial, sans-serif !important;
    line-height: 1.6 !important;
    color: #333 !important;
    background-color: #F6F4F3 !important;
}

/* Fil d'Ariane - alignement horizontal avec couleur spécifique */
.style-fil-dariane {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: 3% !important;
    margin-bottom: 30px !important;
    flex-wrap: wrap !important;
    background-color: #F6F4F3 !important;
    padding: 20px !important;
}

.style-fil-dariane a,
.style-fil-dariane span {
    color: #703A69 !important;
}

.style-fil-dariane a {
    color: #703A69 !important;
    text-decoration: none !important;
}

.style-fil-dariane a:hover {
    color: #703A69 !important;
    text-decoration: underline !important;
}

.style-fil-dariane span:not(.bold) {
    color: #703A69 !important;
}

.style-fil-dariane .bold {
    color: #703A69 !important;
    font-weight: bold !important;
}

/* Container principal */
.style-page-article {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    background-color: #F6F4F3 !important;
    min-height: 100vh !important;
}

/* Section de navigation en haut - MASQUÉE */
.style-section1 {
    display: none !important;
}

.style-nav-ressources {
    display: none !important;
}

/* SOLUTION ALIGNEMENT H1/IMAGE : Container wrapper pour les 2 premiers éléments */
.style-page-article > .styleh1-article,
.style-page-article > .styleh1-article + .d-flex.jc-center {
    float: left !important;
    clear: none !important;
}

.style-page-article > .styleh1-article {
    width: 48% !important;
    margin: 0 4% 0 0 !important;
    font-size: 2.5rem !important;
    color: #2c3e50 !important;
    line-height: 1.2 !important;
    font-weight: bold !important;
}

.style-page-article > .styleh1-article + .d-flex.jc-center {
    width: 48% !important;
    margin: 0 !important;
    justify-content: flex-end !important;
}

.style-image-contenu-articles {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    max-height: 300px !important;
}

/* Logo à GAUCHE - Clear pour passer à la ligne suivante */
.style-page-article > .d-flex.jc-center:nth-of-type(2) {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 20px 0 10px 0 !important;
    clear: both !important;
}

.w60px {
    width: 60px !important;
    height: auto !important;
}

/* Section d'introduction - À CÔTÉ du sommaire */
.mt50px {
    margin: 10px 0 20px 360px !important; /* MODIFIÉ: margin-top réduit pour alignement */
    clear: none !important;
    max-width: calc(100% - 360px) !important;
}

.mt50px p {
    margin-bottom: 18px !important;
    text-align: justify !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #2c3e50 !important;
}

/* LAYOUT PRINCIPAL - Flexbox pour éviter les superpositions */
.main-layout {
    display: flex !important;
    gap: 40px !important;
    align-items: flex-start !important;
}

/* SOMMAIRE - Positionné au niveau de l'introduction avec sticky précoce */
.style-sommaire {
    width: 320px !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    padding: 25px 25px 25px 35px !important;
    border-radius: 12px !important;
    border: 1px solid #EFE9ED !important; /* MODIFIÉ: stroke au lieu de box-shadow */
    position: sticky !important;
    top: 450px !important; /* MODIFIÉ: sticky s'active beaucoup plus tôt */
    height: fit-content !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    z-index: 2 !important;
    float: left !important;
    margin: 20px 40px 30px 0 !important;
    transform: translateY(-350px) !important; /* MODIFIÉ: remonte encore plus pour s'aligner avec l'introduction */
}

/* Contenu principal - utilise l'espace restant SANS boîte blanche */
.style-sommaire ~ * {
    margin-left: 360px !important;
    margin-bottom: 20px !important;
}

/* Styles du sommaire */
.style-sommaire h2 {
    color: #000000 !important; /* MODIFIÉ: noir au lieu de #2c3e50 */
    margin-bottom: 20px !important;
    font-size: 20px !important;
    font-weight: bold !important;
}

.style-sommaire .d-flex {
    display: flex !important;
}

.style-sommaire .fd-column {
    flex-direction: column !important;
}

.style-sommaire .gap10px {
    gap: 10px !important;
}

.style-sommaire .gap5px {
    gap: 5px !important;
}

.style-sommaire .ai-center {
    align-items: center !important;
}

/* MODIFIÉ: Liens du sommaire en noir et puce classique */
.style-sommaire a {
    color: #000000 !important; /* MODIFIÉ: noir au lieu de bleu */
    text-decoration: none !important; /* MODIFIÉ: pas de soulignement */
    padding: 8px 0 !important;
    border-bottom: none !important; /* MODIFIÉ: retrait de la bordure */
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    position: relative !important;
    padding-left: 15px !important; /* AJOUTÉ: espace pour la puce */
}

/* AJOUTÉ: Puce classique noire */
.style-sommaire a::before {
    content: '•' !important;
    color: #000000 !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.style-sommaire a:hover {
    color: #000000 !important; /* MODIFIÉ: reste noir au hover */
    text-decoration: none !important; /* MODIFIÉ: pas de soulignement au hover */
}

/* MODIFIÉ: Masquage des flèches car on utilise des puces maintenant */
.style-flèche-sommaire,
.style-sommaire span img {
    display: none !important; /* MODIFIÉ: masquage des flèches */
}

/* CONTENU PRINCIPAL - Zone à droite SANS boîte blanche */
/* Styles des titres h2 - SANS barre bleue et SANS boîte */
.styleh2-article {
    font-size: 1.8rem !important;
    color: #2c3e50 !important;
    margin: 20px 0 25px 360px !important;
    padding-bottom: 15px !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
    clear: none !important;
    width: auto !important;
    max-width: calc(100% - 360px) !important;
}

.styleh2-article:first-of-type {
    margin-top: 30px !important;
    margin-left: 360px !important;
}

/* Styles des paragraphes - DOIVENT rester dans la zone de contenu */
.style-page-article p {
    margin-bottom: 18px !important;
    text-align: justify !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #2c3e50 !important;
}

/* Éléments br - DOIVENT rester dans la zone de contenu */
.style-page-article br {
    display: block !important;
    margin: 8px 0 !important;
}

/* Liens dans le contenu */
.lien {
    color: #3498db !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.lien:hover {
    color: #2980b9 !important;
    text-decoration: underline !important;
}

/* Clearfix */
.style-page-article::after {
    content: '' !important;
    display: table !important;
    clear: both !important;
}

/* Styles utilitaires */
.d-flex {
    display: flex !important;
}

.jc-center {
    justify-content: center !important;
}

.ai-center {
    align-items: center !important;
}

.gap5px {
    gap: 5px !important;
}

.gap10px {
    gap: 10px !important;
}

.bold {
    font-weight: bold !important;
}

.fs20px {
    font-size: 20px !important;
}

.mb20px {
    margin-bottom: 20px !important;
}

.w7px {
    width: 7px !important;
}

/* Styles pour les sections de contenu */
main {
    background-color: #F6F4F3 !important;
    min-height: 100vh !important;
}

/* Footer et header */
header, footer {
    background-color: #F6F4F3 !important;
}

/* Section "Dans la même section" SANS boîte */
.style-section-articles {
    margin: 20px !important;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
    .style-page-article {
        padding: 15px !important;
    }
    
    /* Retour au layout vertical pour H1 et image */
    .style-page-article > .styleh1-article,
    .style-page-article > .styleh1-article + .d-flex.jc-center {
        float: none !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
    
    .style-page-article > .styleh1-article {
        font-size: 2rem !important;
        text-align: center !important;
    }
    
    .style-page-article > .styleh1-article + .d-flex.jc-center {
        justify-content: center !important;
    }
    
    /* Layout responsive */
    .style-sommaire {
        float: none !important;
        width: 100% !important;
        position: static !important;
        margin: 30px 0 !important;
        padding: 25px !important;
        transform: none !important; /* Supprime le transform sur mobile */
        top: auto !important; /* Supprime le sticky sur mobile */
    }
    
    .style-sommaire ~ * {
        margin-left: 0 !important;
    }
    
    .mt50px {
        margin-left: 0 !important;
        max-width: 100% !important;
        margin-top: 30px !important; /* Retour à l'espacement normal sur mobile */
    }
    
    .styleh2-article {
        font-size: 1.5rem !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 768px) {
    .style-page-article > .styleh1-article {
        font-size: 1.8rem !important;
    }
    
    .style-sommaire {
        padding: 20px !important;
    }
    
    .style-page-article p {
        font-size: 15px !important;
    }
    
    .styleh2-article {
        font-size: 1.4rem !important;
        margin: 30px 0 20px 0 !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 480px) {
    .style-page-article {
        padding: 10px !important;
    }
    
    .style-page-article > .styleh1-article {
        font-size: 1.5rem !important;
    }
    
    .style-sommaire {
        padding: 15px !important;
    }
    
    .style-page-article p {
        font-size: 14px !important;
    }
    
    .styleh2-article {
        font-size: 1.2rem !important;
        margin-left: 0 !important;
    }
    
    .style-image-contenu-articles {
        max-height: 200px !important;
    }
}
@media (max-width: 992px) {
    .styleh2-article {
        font-size: 1.5rem !important;
        margin-left: 0 !important;
        max-width: 100% !important; /* AJOUTER CETTE LIGNE */
    }
}

@media (max-width: 992px) {
    .styleh2-article,
    .styleh2-article:first-of-type {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

div:has(h3.bold.mx-20.fs25px) {
    max-width: 96rem !important;
    margin: 0 auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    width: 100% !important;
}
/* ===== FORCER POPPINS SUR TOUS LES ÉLÉMENTS ===== */

/* Sélecteur universel avec priorité maximale */
* {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Tous les éléments HTML */
html {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Body et tous ses descendants */
body,
body * {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Éléments de texte spécifiques */
h1, h2, h3, h4, h5, h6,
p, span, div, a, li, ul, ol,
button, input, textarea, select,
label, strong, em, b, i,
blockquote, cite, code, pre,
table, td, th, tr,
nav, header, footer, main, section, article,
.text, .title, .content {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Éléments de formulaire */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select,
button {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Classes spécifiques du site */
.style-excellart,
.nav-link,
.cta-base,
.styleh1-article,
.styleh2-article,
.style-fil-dariane,
.style-page-article,
.style-sommaire,
.footer-contact-email,
.bold, .italic,
.fs10px, .fs18px, .fs20px, .fs25px {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Override spécifique pour les éléments avec des polices système */
*[style*="font-family"] {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Pseudo-éléments */
*::before,
*::after {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Éléments du header et footer spécifiquement */
.header, .header *,
footer, footer *,
#header-placeholder-container, #header-placeholder-container *,
#footer-placeholder, #footer-placeholder *,
#footer-placeholder-container, #footer-placeholder-container * {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Navigation et menu */
nav, nav *,
.nav-links, .nav-links *,
.hamburger, .hamburger * {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Contenu principal et articles */
main, main *,
article, article *,
section, section *,
.style-page-article, .style-page-article * {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Boutons et liens */
a, a *,
button, button *,
.cta-base, .cta-base *,
.btn, .btn * {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Grilles et layouts */
.grid, .grid *,
.flex, .flex *,
.d-flex, .d-flex * {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Éléments injectés dynamiquement */
[id*="placeholder"], [id*="placeholder"] *,
[class*="placeholder"], [class*="placeholder"] * {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Override pour les frameworks CSS externes */
.tailwind *, .bootstrap *, .bulma *,
[class*="tw-"], [class*="bs-"], [class*="is-"] {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ===== FIN FORCE POPPINS ===== */