/* ==========================================================================
   Pages juridiques : CGU, confidentialité, remboursement, mentions légales,
   charte des membres, charte des créatrices (FR + EN).
   Une seule feuille pour les 12 templates : chacune embarquait son propre
   bloc <style>, avec des tailles de titres et des couleurs qui divergeaient
   d'une page à l'autre (titres blancs 35 px sur les CGU, roses 26 px ailleurs).
   ========================================================================== */

.legal-container {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 120px var(--page-side-padding, 20px) 64px;
    position: relative;
    z-index: 1;
}

/* --- En-tête -------------------------------------------------------------- */
.legal-header {
    text-align: center;
    margin-bottom: 36px;
}

.legal-header h1 {
    font-size: clamp(1.8rem, 4.5vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 12px;
    background: linear-gradient(135deg, var(--rose-fuchsia), var(--rouge-passion));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.legal-header .subtitle {
    color: var(--gris-perle);
    font-size: 1.05rem;
    margin: 0 0 14px;
}

/* Date de mise à jour en pastille : repère visuel identique sur les 6 pages */
.legal-header .last-update {
    display: inline-block;
    margin: 0;
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.85rem;
    font-style: normal;
}

/* --- Carte de contenu ----------------------------------------------------- */
.legal-content {
    background: var(--surface);
    border: 1px solid rgba(255, 62, 181, 0.18);
    border-radius: 18px;
    padding: 44px 48px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    color: var(--gris-perle);
    font-size: 1rem;
    line-height: 1.75;
    /* Les URL et e-mails longs ne doivent pas élargir la carte sur mobile */
    overflow-wrap: anywhere;
}

.legal-content h2 {
    color: var(--rose-fuchsia);
    font-size: 1.45rem;
    line-height: 1.3;
    margin: 44px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 62, 181, 0.25);
    /* Ancre lisible sous l'en-tête fixe du site */
    scroll-margin-top: 96px;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    color: var(--blanc);
    font-size: 1.12rem;
    line-height: 1.4;
    margin: 28px 0 10px;
    scroll-margin-top: 96px;
}

.legal-content p {
    color: var(--gris-perle);
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 0 14px;
}

.legal-content ul,
.legal-content ol {
    margin: 10px 0 18px;
    padding-left: 22px;
}

.legal-content li {
    color: var(--gris-perle);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 8px;
}

.legal-content li::marker {
    color: var(--rose-fuchsia);
}

.legal-content strong {
    color: var(--blanc);
    font-weight: 600;
}

.legal-content em {
    color: var(--gris-perle);
}

.legal-content a {
    color: var(--rose-fuchsia);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(255, 62, 181, 0.35);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.legal-content a:hover {
    color: var(--rouge-passion);
    text-decoration-color: currentColor;
}

/* --- Encadrés ------------------------------------------------------------- */
.info-box,
.warning-box,
.highlight-box,
.steps-list {
    margin: 20px 0;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    border-left-width: 3px;
}

.info-box {
    background: rgba(255, 255, 255, 0.025);
    border-left-color: rgba(255, 62, 181, 0.6);
}

.warning-box {
    background: rgba(227, 0, 73, 0.08);
    border-color: rgba(227, 0, 73, 0.2);
    border-left-color: var(--rouge-passion);
}

.highlight-box {
    background: rgba(255, 62, 181, 0.07);
    border-color: rgba(255, 62, 181, 0.2);
    border-left-color: var(--rose-fuchsia);
}

.steps-list {
    background: rgba(255, 255, 255, 0.025);
    border-left-color: var(--rose-fuchsia);
}

/* Pas de marge parasite en haut et en bas des encadrés */
.info-box > :first-child,
.warning-box > :first-child,
.highlight-box > :first-child,
.steps-list > :first-child,
.contact-box > :first-child,
.company-info > :first-child {
    margin-top: 0;
}

.info-box > :last-child,
.warning-box > :last-child,
.highlight-box > :last-child,
.steps-list > :last-child,
.contact-box > :last-child,
.company-info > :last-child {
    margin-bottom: 0;
}

.contact-box {
    margin: 24px 0;
    padding: 20px 24px;
    border: 1px solid rgba(255, 62, 181, 0.3);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 62, 181, 0.1), rgba(227, 0, 73, 0.06));
    text-align: center;
}

.contact-box p {
    margin-bottom: 8px;
}

.contact-box a {
    font-weight: 600;
}

/* Variante insérée dans un encadré (procédure de remboursement) */
.contact-box--compact {
    margin: 14px 0;
    padding: 14px 18px;
}

.company-info {
    margin: 20px 0;
    padding: 18px 22px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.company-info p {
    margin-bottom: 6px;
}

/* --- Listes à icône ------------------------------------------------------- */
.plain-list,
.good-behavior-list,
.prohibited-list,
.eligible-list,
.not-eligible-list,
.rights-list,
.consequences-list {
    list-style: none;
    padding-left: 0;
}

.good-behavior-list li,
.prohibited-list li,
.eligible-list li,
.not-eligible-list li,
.rights-list li {
    position: relative;
    padding-left: 28px;
}

.good-behavior-list li::before,
.prohibited-list li::before,
.eligible-list li::before,
.not-eligible-list li::before,
.rights-list li::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    text-align: center;
    font-weight: 700;
}

.good-behavior-list li::before,
.eligible-list li::before {
    content: "✓";
    color: var(--vert);
}

.prohibited-list li::before,
.not-eligible-list li::before {
    content: "✕";
    color: var(--rouge);
}

.rights-list li::before {
    content: "→";
    color: var(--rose-fuchsia);
}

.consequences-list li {
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(227, 0, 73, 0.08);
    border: 1px solid rgba(227, 0, 73, 0.18);
}

/* --- Tableaux ------------------------------------------------------------- */
/* Défilement horizontal dans la carte plutôt que sur toute la page en mobile */
.table-wrapper {
    width: 100%;
    margin: 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.legal-table,
.refund-table,
.sanctions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
}

.legal-table th,
.legal-table td,
.refund-table th,
.refund-table td,
.sanctions-table th,
.sanctions-table td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
}

.legal-table th,
.refund-table th,
.sanctions-table th {
    background: rgba(255, 62, 181, 0.1);
    color: var(--rose-fuchsia);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.legal-table td,
.refund-table td,
.sanctions-table td {
    color: var(--gris-perle);
}

.legal-table tbody tr:last-child td,
.refund-table tbody tr:last-child td,
.sanctions-table tbody tr:last-child td {
    border-bottom: 0;
}

.legal-table tbody tr:hover td,
.refund-table tbody tr:hover td,
.sanctions-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Tableau comparatif des comptes : colonnes de valeurs centrées */
.legal-table--compare th:not(:first-child),
.legal-table--compare td:not(:first-child) {
    text-align: center;
}

/* Exemples de calcul : montants alignés à droite */
.legal-table--numeric th:not(:first-child),
.legal-table--numeric td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

/* Tableau placé dans un encadré : la bordure de l'encadré suffit */
.info-box .table-wrapper,
.warning-box .table-wrapper {
    background: rgba(0, 0, 0, 0.15);
}

.table-note {
    color: var(--muted);
    font-size: 0.85rem;
}

p.table-note {
    margin-top: 10px;
}

.text-success {
    color: var(--vert);
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 768px) {
    .legal-container {
        padding: 96px 16px 40px;
    }

    .legal-header {
        margin-bottom: 26px;
    }

    .legal-content {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .legal-content h2 {
        font-size: 1.22rem;
        margin-top: 34px;
    }

    .legal-content h3 {
        font-size: 1.05rem;
    }

    .legal-content p,
    .legal-content li {
        font-size: 0.95rem;
    }

    .info-box,
    .warning-box,
    .highlight-box,
    .steps-list,
    .company-info {
        padding: 14px 16px;
    }

    .contact-box {
        padding: 16px;
    }

    .legal-table,
    .refund-table,
    .sanctions-table {
        font-size: 0.85rem;
    }

    .legal-table th,
    .legal-table td,
    .refund-table th,
    .refund-table td,
    .sanctions-table th,
    .sanctions-table td {
        padding: 9px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .legal-content a {
        transition: none;
    }
}