/* ================================================================
   BVG-LPP.ch — Module LPP Guide — Styles
   Fichier : blocksy-child/module-lpp-style.css
   Chargé uniquement sur is_singular('module-lpp')
   ================================================================ */

/* ── Variables (cohérence avec la palette BVG-LPP) ── */
:root {
    --bvg-navy:     #0B1F2A;
    --bvg-blue:     #2F6F95;
    --bvg-orange:   #E5783C;
    --bvg-dark:     #003659;
    --bvg-border:   #dce4ef;
    --bvg-bg:       #f4f7fb;
    --bvg-white:    #ffffff;
    --bvg-text:     #2a4458;
    --bvg-muted:    #6b8a9e;
    --bvg-radius:   10px;
    --bvg-shadow:   0 2px 14px rgba(11, 31, 42, 0.07);
}

/* ================================================================
   RESET BLOCKSY — uniquement le contenu, pas le header
   ================================================================ */
.bvg-is-module-page .ct-main-content-area,
.bvg-is-module-page #main,
.bvg-is-module-page .site-main,
.bvg-is-module-page .content-area {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}
/* Retirer l'entry-content padding Gutenberg */
.bvg-is-module-page .entry-content,
.bvg-is-module-page .post-content {
    padding: 0 !important;
    max-width: none !important;
}

/* ================================================================
   WRAPPER GLOBAL
   ================================================================ */
.bvg-mod-page {
    background: var(--bvg-bg);
    min-height: 60vh;
    font-family: inherit;
}


/* ================================================================
   1. EN-TÊTE DU MODULE
   ================================================================ */
.bvg-mod-header {
    background: var(--bvg-white);
    border-bottom: 1px solid var(--bvg-border);
    padding: 48px 24px 40px;
}
.bvg-mod-header__inner {
    max-width: 880px;
    margin: 0 auto;
}

/* Fil d'Ariane */
.bvg-mod-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--bvg-muted);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.bvg-mod-breadcrumb a {
    color: var(--bvg-blue);
    text-decoration: none;
    transition: color .15s;
}
.bvg-mod-breadcrumb a:hover { color: var(--bvg-orange); }
.bvg-mod-breadcrumb .sep   { color: var(--bvg-border); }
.bvg-mod-breadcrumb .current {
    color: var(--bvg-navy);
    font-weight: 500;
}

/* Ligne badge + catégorie */
.bvg-mod-meta-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.bvg-mod-badge {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -0.5px;
}
.bvg-mod-badge--orange { background: var(--bvg-orange); }
.bvg-mod-badge--dark   { background: var(--bvg-navy); }

.bvg-mod-meta-labels {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bvg-mod-categorie {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bvg-navy);
}
.bvg-mod-start-badge {
    display: inline-block;
    background: var(--bvg-orange);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    width: fit-content;
}

/* Titre H1 */
.bvg-mod-title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    color: var(--bvg-navy);
    line-height: 1.2;
    margin: 0 0 12px !important;
}

/* Description */
.bvg-mod-description {
    font-size: 16px;
    color: #4a6375;
    line-height: 1.65;
    margin: 0 0 22px !important;
    max-width: 620px;
}

/* Tags + Temps */
.bvg-mod-footer-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.bvg-mod-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.bvg-mod-tag {
    display: inline-block;
    border: 1px solid var(--bvg-border);
    border-radius: 20px;
    font-size: 12px;
    padding: 4px 12px;
    color: var(--bvg-navy);
    background: var(--bvg-white);
}
.bvg-mod-temps {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--bvg-muted);
    white-space: nowrap;
}
.bvg-mod-temps svg { flex-shrink: 0; }

/* Barre de progression */
.bvg-mod-progress {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--bvg-border);
}
.bvg-mod-progress__label {
    font-size: 11.5px;
    color: var(--bvg-muted);
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: .03em;
}
.bvg-mod-progress__bar {
    height: 4px;
    background: var(--bvg-border);
    border-radius: 4px;
    overflow: hidden;
    max-width: 280px;
}
.bvg-mod-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bvg-blue) 0%, var(--bvg-orange) 100%);
    border-radius: 4px;
    transition: width .5s ease;
}


/* ================================================================
   2. ZONE DE CONTENU
   Grille desktop : [Article] [TOC sidebar]
   ================================================================ */
.bvg-mod-body {
    padding: 52px 24px 72px;
}
.bvg-mod-body__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 56px;
    align-items: start;
}

/* ── Table des matières ── */
.bvg-mod-toc {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 80px;
}
.bvg-mod-toc__inner {
    background: var(--bvg-white);
    border: 1px solid var(--bvg-border);
    border-radius: var(--bvg-radius);
    padding: 18px 20px 20px;
    box-shadow: var(--bvg-shadow);
}
.bvg-mod-toc__title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bvg-blue);
    margin: 0 0 12px !important;
}
.bvg-mod-toc ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.bvg-mod-toc li {
    margin: 0 !important;
    padding: 0 !important;
}
.bvg-mod-toc li a {
    display: block;
    padding: 5px 0 5px 10px;
    font-size: 13px;
    color: #4a6375;
    text-decoration: none;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.bvg-mod-toc li a:hover,
.bvg-mod-toc li a.is-active {
    color: var(--bvg-orange);
    border-left-color: var(--bvg-orange);
}
.bvg-toc-level-3 a {
    padding-left: 22px !important;
    font-size: 12px;
    opacity: .85;
}

/* ── Contenu principal ── */
.bvg-mod-content {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

/* Typographie */
.bvg-mod-content h2 {
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    color: var(--bvg-navy);
    margin: 44px 0 16px !important;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bvg-border);
    scroll-margin-top: 90px;
}
.bvg-mod-content h2:first-child { margin-top: 0 !important; }

.bvg-mod-content h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--bvg-navy);
    margin: 32px 0 12px !important;
    scroll-margin-top: 90px;
}
.bvg-mod-content h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--bvg-blue);
    margin: 24px 0 10px !important;
}
.bvg-mod-content p {
    font-size: 16px;
    line-height: 1.78;
    color: var(--bvg-text);
    margin-bottom: 18px;
}
.bvg-mod-content ul,
.bvg-mod-content ol {
    font-size: 16px;
    line-height: 1.72;
    color: var(--bvg-text);
    margin: 0 0 18px 22px !important;
    padding: 0;
}
.bvg-mod-content li { margin-bottom: 7px; }

/* Liens dans le contenu */
.bvg-mod-content a {
    color: var(--bvg-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bvg-mod-content a:hover { color: var(--bvg-orange); }

/* Strong & em */
.bvg-mod-content strong { color: var(--bvg-navy); font-weight: 600; }
.bvg-mod-content em     { font-style: italic; }

/* Images */
.bvg-mod-content img {
    border-radius: var(--bvg-radius);
    max-width: 100%;
    height: auto;
    box-shadow: var(--bvg-shadow);
}
.bvg-mod-content figure figcaption {
    font-size: 12.5px;
    color: var(--bvg-muted);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

/* Code */
.bvg-mod-content code {
    background: #eef3f8;
    color: var(--bvg-dark);
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Séparateurs */
.bvg-mod-content hr {
    border: none;
    border-top: 1px solid var(--bvg-border);
    margin: 36px 0;
}

/* ── Tableaux ── */
.bvg-mod-content .wp-block-table,
.bvg-mod-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 28px 0;
    border-radius: var(--bvg-radius);
    overflow: hidden;
    box-shadow: var(--bvg-shadow);
    display: table;
}
.bvg-mod-content .wp-block-table table { box-shadow: none; }
.bvg-mod-content th {
    background: var(--bvg-navy);
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 11px 16px;
    text-align: left;
    white-space: nowrap;
}
.bvg-mod-content td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--bvg-border);
    color: var(--bvg-navy);
    vertical-align: top;
}
.bvg-mod-content tr:last-child td { border-bottom: none; }
.bvg-mod-content tr:nth-child(even) td { background: #f6f9fc; }

/* Scroll horizontal sur mobile */
.bvg-mod-content .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
}


/* ================================================================
   3. CALLOUTS — Block styles Gutenberg (core/quote)
   ================================================================ */

.bvg-mod-content .wp-block-quote.is-style-bvg-definition,
.bvg-mod-content .wp-block-quote.is-style-bvg-point-cle,
.bvg-mod-content .wp-block-quote.is-style-bvg-exemple,
.bvg-mod-content .wp-block-quote.is-style-bvg-attention {
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: 4px solid;
    border-radius: 0 var(--bvg-radius) var(--bvg-radius) 0;
    padding: 16px 20px 16px 20px !important;
    margin: 28px 0 !important;
    position: relative;
}

.bvg-mod-content .wp-block-quote.is-style-bvg-definition p,
.bvg-mod-content .wp-block-quote.is-style-bvg-point-cle p,
.bvg-mod-content .wp-block-quote.is-style-bvg-exemple p,
.bvg-mod-content .wp-block-quote.is-style-bvg-attention p {
    font-style: normal !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 0 !important;
}

.bvg-mod-content .wp-block-quote.is-style-bvg-definition cite,
.bvg-mod-content .wp-block-quote.is-style-bvg-point-cle cite,
.bvg-mod-content .wp-block-quote.is-style-bvg-exemple cite,
.bvg-mod-content .wp-block-quote.is-style-bvg-attention cite { display: none; }

.bvg-mod-content .wp-block-quote.is-style-bvg-definition::before,
.bvg-mod-content .wp-block-quote.is-style-bvg-point-cle::before,
.bvg-mod-content .wp-block-quote.is-style-bvg-exemple::before,
.bvg-mod-content .wp-block-quote.is-style-bvg-attention::before {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* ── Définition (bleu) ── */
.bvg-mod-content .wp-block-quote.is-style-bvg-definition {
    background: rgba(47, 111, 149, 0.07);
    border-left-color: var(--bvg-blue) !important;
}
.bvg-mod-content .wp-block-quote.is-style-bvg-definition::before {
    content: "📘  Définition";
    color: var(--bvg-blue);
}
.bvg-mod-content .wp-block-quote.is-style-bvg-definition p {
    color: var(--bvg-dark) !important;
}

/* ── Point clé (orange) ── */
.bvg-mod-content .wp-block-quote.is-style-bvg-point-cle {
    background: rgba(229, 120, 60, 0.07);
    border-left-color: var(--bvg-orange) !important;
}
.bvg-mod-content .wp-block-quote.is-style-bvg-point-cle::before {
    content: "🔑  Point clé";
    color: var(--bvg-orange);
}

/* ── Exemple chiffré (navy clair) ── */
.bvg-mod-content .wp-block-quote.is-style-bvg-exemple {
    background: rgba(0, 54, 89, 0.05);
    border-left-color: var(--bvg-dark) !important;
}
.bvg-mod-content .wp-block-quote.is-style-bvg-exemple::before {
    content: "📊  Exemple";
    color: var(--bvg-dark);
}

/* ── À retenir (fond sombre) ── */
.bvg-mod-content .wp-block-quote.is-style-bvg-attention {
    background: var(--bvg-navy);
    border-left-color: var(--bvg-orange) !important;
}
.bvg-mod-content .wp-block-quote.is-style-bvg-attention::before {
    content: "⚠️  À retenir";
    color: var(--bvg-orange);
}
.bvg-mod-content .wp-block-quote.is-style-bvg-attention p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Aperçu dans l'éditeur Gutenberg */
.editor-styles-wrapper .wp-block-quote.is-style-bvg-definition,
.editor-styles-wrapper .wp-block-quote.is-style-bvg-point-cle,
.editor-styles-wrapper .wp-block-quote.is-style-bvg-exemple,
.editor-styles-wrapper .wp-block-quote.is-style-bvg-attention {
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: 4px solid;
    padding: 14px 18px;
    border-radius: 0 8px 8px 0;
}
.editor-styles-wrapper .wp-block-quote.is-style-bvg-definition {
    background: rgba(47,111,149,.07);
    border-left-color: #2F6F95;
}
.editor-styles-wrapper .wp-block-quote.is-style-bvg-point-cle {
    background: rgba(229,120,60,.07);
    border-left-color: #E5783C;
}
.editor-styles-wrapper .wp-block-quote.is-style-bvg-exemple {
    background: rgba(0,54,89,.05);
    border-left-color: #003659;
}
.editor-styles-wrapper .wp-block-quote.is-style-bvg-attention {
    background: #0B1F2A;
    border-left-color: #E5783C;
}
.editor-styles-wrapper .wp-block-quote.is-style-bvg-attention p {
    color: rgba(255,255,255,.9);
}


/* ================================================================
   4. NAVIGATION MODULES (bas de page)
   ================================================================ */
.bvg-mod-nav {
    background: var(--bvg-white);
    border-top: 1px solid var(--bvg-border);
    padding: 28px 24px;
}
.bvg-mod-nav__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 44px 1fr;
    gap: 16px;
    align-items: center;
}

.bvg-mod-nav__item {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none !important;
    padding: 15px 18px;
    border: 1px solid var(--bvg-border);
    border-radius: var(--bvg-radius);
    background: var(--bvg-white);
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.bvg-mod-nav__item:hover {
    border-color: var(--bvg-orange);
    box-shadow: 0 3px 12px rgba(229, 120, 60, .12);
    transform: translateY(-1px);
}
.bvg-mod-nav__item--next { justify-content: flex-end; }
.bvg-mod-nav__item--done {
    justify-content: flex-end;
    opacity: .7;
    cursor: default;
    pointer-events: none;
}

.bvg-mod-nav__arrow {
    font-size: 18px;
    color: var(--bvg-orange);
    flex-shrink: 0;
    line-height: 1;
}
.bvg-mod-nav__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.bvg-mod-nav__label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--bvg-muted);
    font-weight: 600;
}
.bvg-mod-nav__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bvg-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.bvg-mod-nav__name--done { color: #2e7d3e; font-size: 13px; }

.bvg-mod-nav__index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--bvg-border);
    border-radius: 50%;
    color: var(--bvg-muted);
    text-decoration: none;
    transition: border-color .2s, color .2s;
    flex-shrink: 0;
}
.bvg-mod-nav__index:hover {
    border-color: var(--bvg-orange);
    color: var(--bvg-orange);
}


/* ================================================================
   5. RESPONSIVE
   ================================================================ */

@media ( max-width: 1024px ) {
    .bvg-mod-body__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .bvg-mod-toc {
        grid-column: 1;
        grid-row: 1;
        position: static;
        order: -1;
    }
    .bvg-mod-content {
        grid-row: 2;
    }
    .bvg-mod-toc__inner {
        max-height: 180px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media ( max-width: 640px ) {
    .bvg-mod-header { padding: 28px 16px 24px; }
    .bvg-mod-body   { padding: 28px 16px 48px; }
    .bvg-mod-nav    { padding: 20px 16px; }

    .bvg-mod-badge  { width: 44px; height: 44px; font-size: 18px; }
    .bvg-mod-title  { font-size: 22px !important; }

    .bvg-mod-nav__inner {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
    }
    .bvg-mod-nav__item--prev { grid-column: 1; }
    .bvg-mod-nav__item--next,
    .bvg-mod-nav__item--done { grid-column: 2; }
    .bvg-mod-nav__index {
        grid-column: 1 / -1;
        justify-self: center;
        order: 10;
    }
    .bvg-mod-nav__name { max-width: 100%; }

    .bvg-mod-content table,
    .bvg-mod-content .wp-block-table {
        font-size: 12px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .bvg-mod-content .wp-block-table::after {
        content: "← Faire défiler →";
        display: block;
        text-align: center;
        font-size: 11px;
        color: var(--bvg-muted);
        padding: 6px 0;
    }
}