/*
 Theme Name:   Safety-Lex Child
 Template:     Divi
 Description:  Thème enfant Safety-Lex basé sur Divi
*/

/* ============================================================
   VARIABLES GLOBALES
   ============================================================ */
:root {
    --sl-red:        #C0392B;
    --sl-red-light:  #f9eeed;
    --sl-red-mid:    #e8c5c2;
    --sl-dark:       #1a1a1a;
    --sl-mid:        #4a4a4a;
    --sl-muted:      #888888;
    --sl-border:     #e2e2e2;
    --sl-bg:         #fafaf8;
    --sl-white:      #ffffff;
    --sl-toc-bg:     #f4f3f0;
    --sl-highlight:  #fff3cd;
    --sl-font-serif: 'Lora', Georgia, serif;
    --sl-font-sans:  'DM Sans', sans-serif;
    --sl-font-mono:  'DM Mono', monospace;
}

/* ============================================================
   RESET DIVI — neutraliser les styles par défaut trop lourds
   ============================================================ */
#page-container {
    background: var(--sl-bg) !important;
}

/* Supprimer le padding excessif du header Divi */
#main-header {
    box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}

/* ============================================================
   TYPOGRAPHIE GLOBALE
   ============================================================ */
body,
.et_pb_text,
.et_pb_post_content {
    font-family: var(--sl-font-sans) !important;
    color: var(--sl-dark) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

h1, h2, h3, h4 {
    font-family: var(--sl-font-sans) !important;
}

/* ============================================================
   LAYOUT 3 COLONNES — Page texte légal
   Utiliser une Row Divi avec 3 colonnes (1/5 - 3/5 - 1/5)
   Appliquer la classe CSS "sl-layout-texte" à la Section Divi
   ============================================================ */
.sl-layout-texte {
    background: var(--sl-bg) !important;
    padding: 0 !important;
    max-width: 100% !important;
}

.sl-layout-texte > .et_pb_row {
    max-width: 1400px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 260px 1fr 280px !important;
    align-items: start !important;
    gap: 0 !important;
}

/* ============================================================
   SIDEBAR GAUCHE — structure du document
   Classe CSS à appliquer à la colonne Divi gauche : "sl-sidebar-left"
   ============================================================ */
.sl-sidebar-left {
    border-right: 1px solid var(--sl-border) !important;
    background: var(--sl-white) !important;
    padding: 24px 0 !important;
    position: sticky !important;
    top: 80px !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
}

.sl-sidebar-left::-webkit-scrollbar { width: 4px; }
.sl-sidebar-left::-webkit-scrollbar-thumb { background: var(--sl-border); border-radius: 4px; }

/* Label de section sidebar */
.sl-sidebar-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--sl-muted) !important;
    padding: 0 20px !important;
    margin-bottom: 10px !important;
    display: block;
}

/* Liens de l'arborescence */
.sl-sidebar-left .et_pb_text a,
.sl-tree-link {
    display: block !important;
    font-size: 12.5px !important;
    color: var(--sl-mid) !important;
    text-decoration: none !important;
    padding: 5px 20px !important;
    transition: all 0.15s !important;
    line-height: 1.4 !important;
}

.sl-sidebar-left .et_pb_text a:hover,
.sl-tree-link:hover {
    background: var(--sl-toc-bg) !important;
    color: var(--sl-dark) !important;
}

.sl-sidebar-left .et_pb_text a.active,
.sl-tree-link.active {
    background: var(--sl-red-light) !important;
    color: var(--sl-red) !important;
    font-weight: 500 !important;
}

.sl-tree-indent   { padding-left: 36px !important; }
.sl-tree-indent-2 { padding-left: 52px !important; }

/* ============================================================
   CONTENU PRINCIPAL — texte légal
   Classe CSS à appliquer à la colonne centrale : "sl-main-content"
   ============================================================ */
.sl-main-content {
    padding: 40px 60px !important;
    max-width: 840px !important;
    margin: 0 auto !important;
}

/* Meta badges */
.sl-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.sl-badge {
    font-family: var(--sl-font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    letter-spacing: 0.04em !important;
    display: inline-block;
}

.sl-badge-source  { background: var(--sl-red); color: white; }
.sl-badge-updated { background: var(--sl-toc-bg); color: var(--sl-mid); border: 1px solid var(--sl-border); }
.sl-badge-mb      { background: #e8f4e8; color: #2d6a2d; }

/* Hiérarchie titre */
.sl-doc-livre {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--sl-red) !important;
    margin-bottom: 8px !important;
    display: block;
}

.sl-main-content h1,
.sl-doc-title {
    font-family: var(--sl-font-serif) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    color: var(--sl-dark) !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
}

.sl-doc-subtitle {
    font-size: 14px !important;
    color: var(--sl-mid) !important;
    font-style: italic !important;
}

/* Séparateur sous le titre */
.sl-doc-hier {
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 2px solid var(--sl-border);
}

/* Navigation prev/next */
.sl-doc-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 36px;
    gap: 12px;
}

.sl-doc-nav a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--sl-mid) !important;
    text-decoration: none !important;
    padding: 8px 14px !important;
    border: 1px solid var(--sl-border) !important;
    border-radius: 8px !important;
    background: var(--sl-white) !important;
    transition: all 0.15s !important;
}

.sl-doc-nav a:hover {
    border-color: var(--sl-red) !important;
    color: var(--sl-red) !important;
    background: var(--sl-red-light) !important;
}

/* Titre de chapitre */
.sl-chapter-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--sl-muted) !important;
    margin: 32px 0 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--sl-border) !important;
}

/* ============================================================
   ARTICLES DE LOI — shortcode [article_loi]
   ============================================================ */
.sl-article {
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--sl-white);
    border: 1px solid var(--sl-border);
    border-left: 3px solid var(--sl-red);
    border-radius: 0 8px 8px 0;
    transition: box-shadow 0.2s;
    animation: sl-fadeUp 0.3s ease both;
}

.sl-article:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.sl-article:target {
    border-left-color: var(--sl-red);
    background: var(--sl-red-light);
}

.sl-article-ref {
    font-family: var(--sl-font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--sl-red) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sl-copy-link {
    opacity: 0;
    transition: opacity 0.15s;
    color: var(--sl-muted) !important;
    text-decoration: none !important;
}
.sl-article:hover .sl-copy-link { opacity: 1; }

.sl-article-titre {
    font-family: var(--sl-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-mid);
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
}

.sl-article-body p {
    font-family: var(--sl-font-serif) !important;
    font-size: 15px !important;
    color: var(--sl-dark) !important;
    line-height: 1.8 !important;
    margin-bottom: 10px !important;
}

.sl-article-body p:last-child { margin-bottom: 0 !important; }

.sl-article-body ol,
.sl-article-body ul {
    font-family: var(--sl-font-serif) !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    padding-left: 24px !important;
    margin: 8px 0 !important;
    color: var(--sl-dark) !important;
}

.sl-article-body li { margin-bottom: 6px !important; }

/* Numéro de paragraphe §1, §2 */
.sl-para-num {
    font-family: var(--sl-font-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--sl-red) !important;
    margin-right: 4px !important;
}

/* Sous-article (séparé par un tiret) */
.sl-subarticle {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--sl-border);
}

/* ============================================================
   COMMENTAIRE PRATIQUE — shortcode [commentaire_pratique]
   ============================================================ */
.sl-comment-box {
    background: #fffbf0 !important;
    border: 1px solid #f0e0a0 !important;
    border-left: 3px solid #e6a817 !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 16px 20px !important;
    margin: -8px 0 24px !important;
    font-size: 13.5px !important;
    color: #5a4a00 !important;
    line-height: 1.6 !important;
}

.sl-comment-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #b88a00 !important;
    margin-bottom: 6px !important;
}

/* ============================================================
   RENVOIS CROISÉS — shortcode [renvoi]
   ============================================================ */
.sl-renvoi {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 14px !important;
    color: var(--sl-red) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed var(--sl-red-mid) !important;
    transition: all 0.15s !important;
}
.sl-renvoi:hover { border-bottom-color: var(--sl-red) !important; }

/* ============================================================
   SIDEBAR DROITE — table des matières + outils
   Classe CSS à appliquer à la colonne Divi droite : "sl-sidebar-right"
   ============================================================ */
.sl-sidebar-right {
    border-left: 1px solid var(--sl-border) !important;
    background: var(--sl-toc-bg) !important;
    padding: 24px 20px !important;
    position: sticky !important;
    top: 80px !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
}

.sl-sidebar-right::-webkit-scrollbar { width: 4px; }
.sl-sidebar-right::-webkit-scrollbar-thumb { background: var(--sl-border); border-radius: 4px; }

/* Titre de section TOC */
.sl-toc-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--sl-muted) !important;
    margin-bottom: 14px !important;
    display: block;
}

/* Liens TOC */
.sl-toc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
}

.sl-toc-list li { margin-bottom: 2px !important; }

.sl-toc-list a {
    display: block !important;
    font-size: 12.5px !important;
    color: var(--sl-mid) !important;
    text-decoration: none !important;
    padding: 5px 8px !important;
    border-radius: 5px !important;
    line-height: 1.4 !important;
    transition: all 0.15s !important;
}

.sl-toc-list a:hover {
    background: var(--sl-border) !important;
    color: var(--sl-dark) !important;
}

.sl-toc-list a.active {
    background: var(--sl-white) !important;
    color: var(--sl-red) !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.sl-toc-sub a {
    padding-left: 20px !important;
    font-size: 12px !important;
}

/* Boutons outils */
.sl-tool-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: var(--sl-white);
    border: 1px solid var(--sl-border);
    border-radius: 7px;
    padding: 8px 12px;
    font-family: var(--sl-font-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sl-mid);
    cursor: pointer;
    margin-bottom: 6px;
    transition: all 0.15s;
    text-align: left;
}

.sl-tool-btn:hover {
    border-color: var(--sl-red);
    color: var(--sl-red);
    background: var(--sl-red-light);
}

/* ============================================================
   BARRE DE PROGRESSION DE LECTURE
   ============================================================ */
.sl-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--sl-red);
    width: 0%;
    z-index: 9999;
    transition: width 0.1s linear;
}

/* ============================================================
   BOUTON FLOTTANT IA
   ============================================================ */
.sl-ai-fab {
    position: fixed !important;
    bottom: 28px !important;
    right: 28px !important;
    background: var(--sl-red) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 20px !important;
    font-family: var(--sl-font-sans) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 20px rgba(192,57,43,0.35) !important;
    transition: all 0.2s !important;
    z-index: 9998 !important;
    text-decoration: none !important;
}

.sl-ai-fab:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(192,57,43,0.45) !important;
    color: white !important;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.sl-breadcrumb {
    background: var(--sl-white);
    border-bottom: 1px solid var(--sl-border);
    padding: 10px 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--sl-muted);
}

.sl-breadcrumb a {
    color: var(--sl-muted) !important;
    text-decoration: none !important;
}
.sl-breadcrumb a:hover { color: var(--sl-red) !important; }
.sl-breadcrumb .sl-bc-current { color: var(--sl-dark); font-weight: 500; }
.sl-breadcrumb .sl-bc-sep { color: var(--sl-border); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes sl-fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE — tablette
   ============================================================ */
@media (max-width: 1100px) {
    .sl-layout-texte > .et_pb_row {
        grid-template-columns: 1fr !important;
    }
    .sl-sidebar-left,
    .sl-sidebar-right {
        display: none !important;
    }
    .sl-main-content {
        padding: 24px 20px !important;
    }
}
/* ============================================================
   EASY TABLE OF CONTENTS — Intégration Safety-Lex
   À ajouter à la suite de ton style.css enfant
   ============================================================ */

/* Masquer le TOC par défaut dans le contenu (on le place en sidebar) */
.ez-toc-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Masquer le titre "Table des matières" natif du plugin */
.ez-toc-title-container {
    display: none !important;
}

/* Notre propre titre au-dessus */
.ez-toc-container::before {
    content: "Table des matières";
    display: block;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--sl-muted) !important;
    margin-bottom: 14px !important;
    font-family: var(--sl-font-sans) !important;
}

/* Liste principale */
.ez-toc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ez-toc-list li {
    margin-bottom: 2px !important;
    line-height: 1.4 !important;
}

/* Liens TOC */
.ez-toc-list a {
    display: block !important;
    font-family: var(--sl-font-sans) !important;
    font-size: 12.5px !important;
    color: var(--sl-mid) !important;
    text-decoration: none !important;
    padding: 5px 8px !important;
    border-radius: 5px !important;
    transition: all 0.15s !important;
}

.ez-toc-list a:hover {
    background: var(--sl-border) !important;
    color: var(--sl-dark) !important;
}

/* Lien actif (scroll spy) */
.ez-toc-list a.active,
.ez-toc-list li.active > a {
    background: var(--sl-white) !important;
    color: var(--sl-red) !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Sous-niveaux (articles dans un chapitre) */
.ez-toc-list .ez-toc-list {
    padding-left: 14px !important;
    margin-top: 2px !important;
}

.ez-toc-list .ez-toc-list a {
    font-size: 12px !important;
    color: var(--sl-muted) !important;
    padding: 4px 8px !important;
}

.ez-toc-list .ez-toc-list a:hover {
    color: var(--sl-dark) !important;
}

.ez-toc-list .ez-toc-list li.active > a {
    color: var(--sl-red) !important;
    background: var(--sl-white) !important;
}

/* Sous-sous-niveaux */
.ez-toc-list .ez-toc-list .ez-toc-list {
    padding-left: 12px !important;
}

.ez-toc-list .ez-toc-list .ez-toc-list a {
    font-size: 11.5px !important;
}

/* Numéros de section (si activés dans le plugin) */
.ez-toc-section-counter {
    color: var(--sl-muted) !important;
    font-family: var(--sl-font-mono) !important;
    font-size: 10px !important;
    margin-right: 4px !important;
}

/* ============================================================
   POSITIONNEMENT EN SIDEBAR DROITE avec Divi
   Placer le shortcode [ez-toc] dans la colonne sl-sidebar-right
   ============================================================ */

/* Quand le TOC est dans la sidebar, le rendre sticky */
.sl-sidebar-right .ez-toc-container {
    position: sticky !important;
    top: 0 !important;
}

/* ============================================================
   OPTIONNEL : TOC flottant sur mobile
   (si le layout 3 colonnes est masqué en responsive)
   ============================================================ */
@media (max-width: 1100px) {
    /* Afficher un TOC compact en haut du contenu sur mobile */
    .sl-mobile-toc .ez-toc-container {
        display: block !important;
        background: var(--sl-toc-bg) !important;
        border: 1px solid var(--sl-border) !important;
        border-radius: 8px !important;
        padding: 16px !important;
        margin-bottom: 24px !important;
    }

    .sl-mobile-toc .ez-toc-container::before {
        content: "📋 Table des matières";
    }

    /* Masquer la sidebar droite sur mobile (déjà fait) */
    .sl-sidebar-right {
        display: none !important;
    }
}

/* ============================================================
   SAFETY-LEX — Layout template single-texte_legal.php
   À ajouter à la suite de style.css
   ============================================================ */

/* Override Divi : page pleine largeur sans sidebar Divi */
body.single-texte_legal #main-content,
body.single-texte_legal .et_pb_section,
body.single-texte_legal #page-container {
    padding: 0 !important;
    max-width: 100% !important;
}

body.single-texte_legal #et-main-area {
    padding: 0 !important;
}

/* ── LAYOUT 3 COLONNES ── */
.sl-layout-texte {
    background: var(--sl-bg);
    width: 100%;
}

.sl-layout-inner {
    display: grid;
    grid-template-columns: 260px 1fr 280px;
    grid-template-areas: "left main right";
    max-width: 1400px;
    margin: 0 auto;
    min-height: calc(100vh - 120px);
}

/* ── SIDEBAR GAUCHE ── */
.sl-sidebar-left {
    grid-area: left;
    border-right: 1px solid var(--sl-border);
    background: var(--sl-white);
    padding: 24px 0;
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    overflow-y: auto;
    align-self: start;
}

/* ── CONTENU PRINCIPAL ── */
.sl-main-content {
    grid-area: main;
    padding: 40px 60px;
    max-width: 840px;
    width: 100%;
    margin: 0 auto;
}

/* ── SIDEBAR DROITE ── */
.sl-sidebar-right {
    grid-area: right;
    border-left: 1px solid var(--sl-border);
    background: var(--sl-toc-bg);
    padding: 24px 20px;
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    overflow-y: auto;
    align-self: start;
}

/* ── PANEL OUTILS ── */
.sl-tools-panel {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--sl-border);
}

/* ── BADGES STATUT ── */
.sl-badge-ok    { background: #e8f4e8; color: #2d6a2d; }
.sl-badge-warn  { background: #fff8e1; color: #8a6000; border: 1px solid #ffe082; }
.sl-badge-error { background: #fdecea; color: #c0392b; border: 1px solid #f5c6c2; }

/* ── CONTENU ÉDITEUR WP ── */
/* Les H2 deviennent des titres de chapitre */
.sl-article-content h2 {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--sl-muted) !important;
    margin: 32px 0 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--sl-border) !important;
    font-family: var(--sl-font-sans) !important;
}

/* Les H3 deviennent des titres de section */
.sl-article-content h3 {
    font-family: var(--sl-font-serif) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--sl-dark) !important;
    margin: 24px 0 12px !important;
}

/* Les paragraphes en Lora */
.sl-article-content p {
    font-family: var(--sl-font-serif) !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: var(--sl-dark) !important;
    margin-bottom: 12px !important;
}

.sl-article-content ol,
.sl-article-content ul {
    font-family: var(--sl-font-serif) !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    padding-left: 24px !important;
    margin: 8px 0 16px !important;
}

.sl-article-content li {
    margin-bottom: 6px !important;
}

/* ── IMPRESSION ── */
@media print {
    .sl-sidebar-left,
    .sl-sidebar-right,
    .sl-reading-progress,
    .sl-ai-fab,
    .sl-doc-nav,
    #wpadminbar { display: none !important; }

    .sl-layout-inner {
        grid-template-columns: 1fr !important;
    }

    .sl-main-content {
        padding: 0 !important;
        max-width: 100% !important;
    }
}

/* ── RESPONSIVE tablette ── */
@media (max-width: 1100px) {
    .sl-layout-inner {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "main"
            "right" !important;
    }

    .sl-sidebar-left { display: none !important; }

    .sl-sidebar-right {
        position: static !important;
        height: auto !important;
        border-left: none !important;
        border-top: 1px solid var(--sl-border) !important;
        padding: 20px !important;
    }

    .sl-main-content {
        padding: 24px 20px !important;
    }
}

/* ── RESPONSIVE mobile ── */
@media (max-width: 768px) {
    .sl-sidebar-right { display: none !important; }
    .sl-badges { flex-wrap: wrap; gap: 6px; }
    .sl-doc-nav { flex-direction: column; gap: 8px; }
    .sl-doc-nav a { font-size: 12px !important; }
}