/* ==========================================================================
   KB Privacy Policy — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-privacy. Centered 1140px content frame.

   Layout:
     1. Top area: small Gold eyebrow + Raleway title + short intro +
        "Dernière mise à jour : …" label. Centered.
     2. Body: two-column grid (narrow left index / wide right content)
        on desktop, single column on tablet/mobile with the index
        above the content.
     3. Sections: numbered (01–19) with the number in Gold, the title
        in Ink Raleway, the body copy in Ink Montserrat.

   Tokens only. No serif. No italic. No icons. No cards. No radius.
   Subtle horizontal separators, generous spacing.
   ========================================================================== */

.kb-privacy {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    padding-top: var(--kb-section-space-desktop);
    padding-bottom: var(--kb-section-space-desktop);
}

/* ==========================================================================
   Inner content frame — 1140px content width, 32px tablet gutter,
   20px mobile gutter. Reuses the site's --kb-gutter-* tokens.
   ========================================================================== */
.kb-privacy__top,
.kb-privacy__body {
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    padding-inline: var(--kb-gutter-desktop);
}

/* ==========================================================================
   Top area — centered editorial block.
   Reuses the canonical .kb-section-eyebrow primitive (Montserrat / Gold /
   12px / 500 / uppercase / 0.18em) defined in base.css.
   ========================================================================== */
.kb-privacy__top {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--kb-space-major) auto;
}

.kb-privacy__eyebrow {
    margin: 0 0 var(--kb-space-m) 0;
}

.kb-privacy__title {
    margin: 0 0 var(--kb-space-m) 0;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--kb-ink);
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    text-wrap: balance;
    max-width: 22ch;
    margin-inline: auto;
}

.kb-privacy__intro {
    margin: 0 auto var(--kb-space-l) auto;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--kb-ink);
    font-style: normal;
    max-width: 620px;
    text-wrap: pretty;
    white-space: pre-line;
}

.kb-privacy__updated {
    margin: 0 auto;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--kb-ink);
    font-style: normal;
    letter-spacing: 0.04em;
    text-transform: none;
    max-width: 620px;
}

/* ==========================================================================
   Body grid — left index / right content.
   Desktop: 220px index | 1fr content, generous gap.
   ========================================================================== */
.kb-privacy__body {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--kb-space-major);
    align-items: start;
}

/* ==========================================================================
   Index (left column on desktop) — sticky editorial list.
   No card, no box. Thin separators between items.
   ========================================================================== */
.kb-privacy__index {
    position: sticky;
    top: calc(var(--kb-header-height-desktop) + var(--kb-space-l));
    align-self: start;
    padding-top: 4px;
}

.kb-privacy__index-label {
    margin: 0 0 var(--kb-space-m) 0;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--kb-gold);
}

.kb-privacy__index-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kb-ink-divider-soft);
}

.kb-privacy__index-item {
    border-bottom: 1px solid var(--kb-ink-divider-soft);
}

.kb-privacy__index-link {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 10px 0;
    text-decoration: none;
    color: var(--kb-ink);
    transition: color var(--kb-transition-ui), opacity var(--kb-transition-ui);
}

.kb-privacy__index-link:visited {
    color: var(--kb-ink);
}

.kb-privacy__index-link:hover,
.kb-privacy__index-link:active {
    color: var(--kb-ink);
    opacity: 0.7;
    outline: none;
}

.kb-privacy__index-link:focus-visible {
    outline: 2px solid var(--kb-bordeaux);
    outline-offset: 2px;
}

.kb-privacy__index-number {
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--kb-gold);
}

.kb-privacy__index-title {
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--kb-ink);
    font-style: normal;
}

/* ==========================================================================
   Sections (right column on desktop) — vertical stack of section blocks,
   separated by generous spacing and a subtle horizontal line between them.
   ========================================================================== */
.kb-privacy__sections {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--kb-ink-divider);
}

.kb-privacy__section {
    padding-block: var(--kb-space-xl);
    border-bottom: 1px solid var(--kb-ink-divider-soft);
}

.kb-privacy__section-head {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--kb-space-m);
    align-items: baseline;
    margin-bottom: var(--kb-space-l);
}

.kb-privacy__section-number {
    font-family: var(--kb-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--kb-gold);
}

.kb-privacy__section-title {
    margin: 0;
    font-family: var(--kb-font-display);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--kb-ink);
    font-style: normal;
    text-wrap: balance;
    max-width: 22ch;
}

.kb-privacy__section-body {
    padding-inline-start: calc(56px + var(--kb-space-m));
    max-width: 720px;
}

.kb-privacy__section-text {
    margin: 0;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--kb-ink);
    font-style: normal;
    text-wrap: pretty;
    white-space: pre-line;
}

/* ==========================================================================
   Tablet (≤ 1199px)
   - Title 40px, section title 24px.
   - Section spacing 80px.
   - 32px gutter.
   - Body collapses to a single column with the index above the content.
   - Sticky index becomes a static block.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-privacy {
        padding-top: var(--kb-section-space-tablet);
        padding-bottom: var(--kb-section-space-tablet);
    }

    .kb-privacy__top,
    .kb-privacy__body {
        padding-inline: var(--kb-gutter-tablet);
    }

    .kb-privacy__title {
        font-size: 40px;
    }

    .kb-privacy__body {
        grid-template-columns: 1fr;
        gap: var(--kb-space-xl);
    }

    .kb-privacy__index {
        position: static;
        top: auto;
    }

    .kb-privacy__section-body {
        max-width: 100%;
    }
}

/* ==========================================================================
   Mobile (≤ 767px)
   - Section spacing 64px.
   - 20px gutter.
   - Top left-aligned.
   - Section head: 44px number column.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-privacy {
        padding-top: var(--kb-section-space-mobile);
        padding-bottom: var(--kb-section-space-mobile);
    }

    .kb-privacy__top,
    .kb-privacy__body {
        padding-inline: var(--kb-gutter-mobile);
    }

    .kb-privacy__top {
        text-align: left;
        max-width: none;
        margin-bottom: var(--kb-space-xl);
    }

    .kb-privacy__title {
        font-size: 32px;
        line-height: 1.12;
        max-width: none;
        margin-inline: 0;
    }

    .kb-privacy__intro {
        max-width: none;
        margin-inline: 0;
        font-size: 15px;
    }

    .kb-privacy__updated {
        max-width: none;
        margin-inline: 0;
    }

    .kb-privacy__body {
        gap: var(--kb-space-l);
    }

    .kb-privacy__index-label {
        font-size: 11px;
    }

    .kb-privacy__index-link {
        grid-template-columns: 24px 1fr;
        gap: 8px;
        padding: 9px 0;
    }

    .kb-privacy__index-number {
        font-size: 11px;
    }

    .kb-privacy__index-title {
        font-size: 13px;
    }

    .kb-privacy__section {
        padding-block: var(--kb-space-l);
    }

    .kb-privacy__section-head {
        grid-template-columns: 36px 1fr;
        gap: 14px;
        margin-bottom: var(--kb-space-m);
    }

    .kb-privacy__section-number {
        font-size: 12px;
    }

    .kb-privacy__section-title {
        font-size: 22px;
        line-height: 1.25;
        max-width: none;
    }

    .kb-privacy__section-body {
        padding-inline-start: calc(36px + 14px);
    }

    .kb-privacy__section-text {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* ==========================================================================
   Reduced motion — neutralises the editorial reveal entrance.
   The reveal system also handles this globally.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .kb-privacy__index-link,
    .kb-privacy__index-link * {
        transition: none;
    }
}

/* ==========================================================================
   Elementor wrapper escape — remove the default 10px block padding
   inside the page's Elementor container so the section owns its own
   vertical rhythm.
   ========================================================================== */
.e-con:has(.kb-privacy) > .e-con-inner {
    padding-block: 0;
}

/* ==========================================================================
   PAGE-SCOPED OVERRIDE — /politique-de-confidentialite/ (page id 3)

   Same rationale as the other page-scoped overrides in base.css:
   the widget controls its own vertical rhythm via its own padding,
   so we reset the Elementor default block padding inside the
   `.e-con-inner` wrapper to keep spacing predictable.
   ========================================================================== */
body.page-id-3 .e-con-inner {
    padding-block: 0 !important;
}