```css
/* ─────────────────────────────────────────
   Conditions d'utilisation — BiblioAfrica
   ───────────────────────────────────────── */


/* ─────────────────────────────────────────
   Introduction
   ───────────────────────────────────────── */

.legal-intro {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 24px;
    margin-bottom: 24px;

    box-shadow: var(--shadow-sm);
}

.legal-intro-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-md);

    background: var(--blue-50);
    color: var(--blue-600);

    font-size: 1.25rem;
}

[data-theme="dark"] .legal-intro-icon {
    background: rgba(33,150,243,.12);
    color: var(--blue-400);
}

.legal-intro-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 7px;
}

.legal-intro p {
    font-size: .82rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 10px;
}

.legal-intro-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    padding: 10px 12px;
    margin-top: 14px !important;
    margin-bottom: 0 !important;

    border-radius: var(--radius-md);
    background: var(--gray-100);
}

.legal-intro-note i {
    color: var(--blue-600);
    margin-top: 2px;
}


/* ─────────────────────────────────────────
   Layout
   ───────────────────────────────────────── */

.legal-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 24px;
    align-items: start;
}


/* ─────────────────────────────────────────
   Navigation
   ───────────────────────────────────────── */

.legal-nav {
    position: sticky;
    top: 88px;

    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 10px;

    box-shadow: var(--shadow-sm);
}

.legal-nav-title {
    padding: 9px 12px 12px;

    font-size: .78rem;
    font-weight: 700;
    color: var(--text-primary);

    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-nav-title i {
    color: var(--blue-600);
}

.legal-nav a {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 10px 12px;

    border-radius: var(--radius-md);

    text-decoration: none;

    font-size: .78rem;
    font-weight: 600;

    color: var(--text-secondary);

    transition: all var(--transition);
}

.legal-nav a i {
    width: 16px;
    text-align: center;
}

.legal-nav a:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.legal-nav a.active {
    background: linear-gradient(
        135deg,
        var(--blue-50),
        #e8f4ff
    );

    color: var(--blue-700);
}

[data-theme="dark"] .legal-nav a.active {
    background: rgba(33,150,243,.12);
    color: var(--blue-400);
}


/* ─────────────────────────────────────────
   Cartes
   ───────────────────────────────────────── */

.legal-card {
    position: relative;

    display: flex;
    gap: 20px;

    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);

    padding: 28px;
    margin-bottom: 20px;

    box-shadow: var(--shadow-sm);

    scroll-margin-top: 95px;
}

.legal-card-number {
    width: 36px;
    height: 36px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: var(--blue-50);
    color: var(--blue-600);

    font-size: .72rem;
    font-weight: 800;
}

[data-theme="dark"] .legal-card-number {
    background: rgba(33,150,243,.12);
    color: var(--blue-400);
}

.legal-card-content {
    flex: 1;
    min-width: 0;
}

.legal-card h2 {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 3px 0 15px;

    font-size: 1rem;
    font-weight: 700;

    color: var(--text-primary);
}

.legal-card h2 i {
    color: var(--blue-600);
}

.legal-card p {
    font-size: .81rem;
    line-height: 1.75;
    color: var(--text-secondary);

    margin: 0 0 14px;
}

.legal-card p:last-child {
    margin-bottom: 0;
}


/* ─────────────────────────────────────────
   Blocs importants
   ───────────────────────────────────────── */

.legal-highlight {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 13px 15px;
    margin: 18px 0;

    border-radius: var(--radius-md);

    background: var(--gray-100);

    font-size: .77rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.legal-highlight i {
    color: var(--blue-600);
    margin-top: 2px;
}

.legal-highlight strong {
    color: var(--text-primary);
}

.legal-highlight.blue {
    background: rgba(33,150,243,.06);
    border: 1px solid rgba(33,150,243,.12);
}


/* ─────────────────────────────────────────
   10 %
   ───────────────────────────────────────── */

.percentage-box {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 17px 20px;
    margin: 18px 0;

    border: 1px solid rgba(33,150,243,.18);
    border-radius: var(--radius-lg);

    background: rgba(33,150,243,.05);
}

.percentage {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--blue-600);
}

.percentage-box span:last-child {
    font-size: .78rem;
    color: var(--text-secondary);
}


/* ─────────────────────────────────────────
   Seuil de paiement
   ───────────────────────────────────────── */

.threshold-box {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 15px 18px;
    margin: 18px 0;

    border-radius: var(--radius-lg);

    background: var(--gray-100);
}

.threshold-box i {
    font-size: 1.25rem;
    color: var(--blue-600);
}

.threshold-box div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.threshold-box strong {
    font-size: .95rem;
    color: var(--text-primary);
}

.threshold-box span {
    font-size: .72rem;
    color: var(--text-secondary);
}


/* ─────────────────────────────────────────
   Ambassadeur
   ───────────────────────────────────────── */

.ambassador-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    padding: 18px;
    margin: 18px 0;

    border-radius: var(--radius-lg);

    background: linear-gradient(
        135deg,
        var(--blue-50),
        rgba(33,150,243,.03)
    );

    border: 1px solid rgba(33,150,243,.12);
}

.ambassador-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: var(--card-bg);

    font-size: 1.15rem;
}

.ambassador-box strong {
    font-size: .86rem;
    color: var(--text-primary);
}

.ambassador-box p {
    margin-top: 5px;
    margin-bottom: 0;
}


/* ─────────────────────────────────────────
   Documents interdits
   ───────────────────────────────────────── */

.prohibited-box {
    margin: 18px 0;
    padding: 17px;

    border: 1px solid rgba(239,68,68,.18);
    border-radius: var(--radius-lg);

    background: rgba(239,68,68,.035);
}

.prohibited-title {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: .8rem;
    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 10px;
}

.prohibited-title i {
    color: var(--danger);
}

.prohibited-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.prohibited-box li {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    padding: 7px 0;

    font-size: .76rem;
    line-height: 1.5;

    color: var(--text-secondary);
}

.prohibited-box li i {
    color: var(--danger);
    margin-top: 2px;
}


/* ─────────────────────────────────────────
   Professionnel
   ───────────────────────────────────────── */

.professional-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    padding: 18px;
    margin: 18px 0;

    border-radius: var(--radius-lg);

    background: var(--gray-100);
}

.professional-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: var(--card-bg);
    color: var(--blue-600);

    font-size: 1.1rem;
}

.professional-box strong {
    font-size: .84rem;
    color: var(--text-primary);
}

.professional-box p {
    margin-top: 6px;
    margin-bottom: 12px;
}

.professional-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.professional-tags span {
    padding: 5px 9px;

    border-radius: 999px;

    background: var(--card-bg);
    border: 1px solid var(--border-color);

    font-size: .68rem;
    font-weight: 600;

    color: var(--text-secondary);
}


/* ─────────────────────────────────────────
   Sanctions
   ───────────────────────────────────────── */

.sanctions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    margin: 18px 0;
}

.sanction-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 16px;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);

    background: var(--gray-100);
}

.sanction-item i {
    margin-bottom: 9px;

    font-size: 1.1rem;
    color: var(--blue-600);
}

.sanction-item strong {
    font-size: .78rem;
    color: var(--text-primary);
}

.sanction-item span {
    margin-top: 4px;

    font-size: .7rem;
    line-height: 1.5;

    color: var(--text-secondary);
}


/* ─────────────────────────────────────────
   Acceptation
   ───────────────────────────────────────── */

.acceptance-box {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    padding: 18px;
    margin-top: 18px;

    border-radius: var(--radius-lg);

    background: rgba(33,150,243,.06);
    border: 1px solid rgba(33,150,243,.15);
}

.acceptance-box > i {
    font-size: 1.25rem;
    color: var(--blue-600);
}

.acceptance-box strong {
    font-size: .85rem;
    color: var(--text-primary);
}

.acceptance-box p {
    margin-top: 5px;
    margin-bottom: 0;
}


/* ─────────────────────────────────────────
   Dernière mise à jour
   ───────────────────────────────────────── */

.legal-update {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 10px;

    font-size: .7rem;
    color: var(--text-secondary);
}

.legal-update i {
    color: var(--blue-600);
}


/* ─────────────────────────────────────────
   Responsive
   ───────────────────────────────────────── */

@media (max-width: 950px) {

    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-nav {
        position: static;

        display: flex;
        align-items: center;

        overflow-x: auto;
        gap: 3px;

        padding: 8px;
    }

    .legal-nav-title {
        display: none;
    }

    .legal-nav a {
        flex-shrink: 0;
        white-space: nowrap;
    }

}


@media (max-width: 650px) {

    .legal-intro {
        padding: 20px;
    }

    .legal-card {
        padding: 20px;
        gap: 12px;
    }

    .legal-card-number {
        width: 30px;
        height: 30px;
        font-size: .65rem;
    }

    .legal-card h2 {
        font-size: .92rem;
    }

    .legal-card p {
        font-size: .78rem;
    }

    .percentage-box {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .sanctions-grid {
        grid-template-columns: 1fr;
    }

    .professional-box,
    .ambassador-box {
        flex-direction: column;
    }

}
```