/* =========================================
   VARIABLES LOCALES
   ========================================= */
:root {
    --card-bg:          #0c0c1a;
    --accent-purple:    #9b82f3;
    --accent-purple-2:  #7c5cff;
    --accent-cyan:      #38bdf8;
    --accent-green:     #22c55e;
    --text-muted:       #a0a0b5;
    --border-subtle:    rgba(255, 255, 255, 0.06);
    --border-purple:    rgba(155, 130, 243, 0.2);
}

/* =========================================
   PAGE WRAPPER
   ========================================= */
.legales-page-wrapper {
    position:   relative;
    overflow-x: hidden;
    width:      100%;
}

/* =========================================
   NAVIGATION RAPIDE (TOC)
   ========================================= */
.legales-nav-section {
    padding-top:    0 !important;
    padding-bottom: 20px !important;
    margin-bottom:  0 !important;
}

.legales-toc {
    display:        flex;
    align-items:    center;
    gap:            12px;
    flex-wrap:      wrap;
    padding:        16px 20px;
    background:     rgba(155, 130, 243, 0.05);
    border:         1px solid var(--border-purple);
    border-radius:  14px;
}

.toc-label {
    font-size:      0.75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color:          var(--text-muted);
    margin:         0;
    white-space:    nowrap;
}

.legales-toc ul {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
}

.legales-toc ul li a {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size:     0.85rem;
    font-weight:   500;
    color:         var(--text-muted);
    padding:       6px 14px;
    border-radius: 50px;
    border:        1px solid var(--border-subtle);
    background:    rgba(255, 255, 255, 0.02);
    transition:    all 0.3s ease;
    white-space:   nowrap;
}

.legales-toc ul li a svg {
    width:  14px;
    height: 14px;
    flex-shrink: 0;
}

.legales-toc ul li a:hover {
    color:        var(--accent-purple);
    border-color: var(--border-purple);
    background:   rgba(155, 130, 243, 0.08);
    text-shadow:  none;
}

/* =========================================
   CONTAINER LÉGAL
   ========================================= */
.legales-container {
    display:        flex;
    flex-direction: column;
    gap:            28px;
    max-width:      860px;
    margin:         0 auto;
    padding-bottom: 80px;
}

/* =========================================
   CARTE LÉGALE
   ========================================= */
.legales-card {
    position:        relative;
    background:      var(--card-bg);
    border:          1px solid var(--border-subtle);
    border-radius:   20px;
    overflow:        hidden;
    transition:      border-color 0.3s ease;
}

.legales-card::before {
    content:        '';
    position:       absolute;
    inset:          -1px;
    border-radius:  21px;
    background:     linear-gradient(
                        135deg,
                        rgba(155, 130, 243, 0.1),
                        transparent 50%,
                        rgba(124, 92, 255, 0.05)
                    );
    z-index:        0;
    pointer-events: none;
}

.legales-card:hover {
    border-color: rgba(155, 130, 243, 0.25);
}

/* Variante highlight (cookies) */
.legales-card--highlight {
    border-color: rgba(155, 130, 243, 0.2);
}

.legales-card--highlight::before {
    background: linear-gradient(
        135deg,
        rgba(155, 130, 243, 0.15),
        transparent 40%,
        rgba(56, 189, 248, 0.06)
    );
}

/* =========================================
   EN-TÊTE DE CARTE
   ========================================= */
.legales-card-header {
    display:       flex;
    align-items:   flex-start;
    gap:           18px;
    padding:       28px 28px 0;
    position:      relative;
    z-index:       1;
}

@media (min-width: 768px) {
    .legales-card-header {
        padding: 36px 40px 0;
        gap:     22px;
    }
}

.legales-icon {
    width:           44px;
    height:          44px;
    flex-shrink:     0;
    border-radius:   12px;
    background:      rgba(155, 130, 243, 0.1);
    border:          1px solid rgba(155, 130, 243, 0.2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--accent-purple);
    margin-top:      4px;
}

.legales-icon svg {
    width:  22px;
    height: 22px;
}

.legales-card-header h2 {
    font-family: 'Syne', sans-serif;
    font-size:   clamp(1.3rem, 4vw, 1.7rem);
    font-weight: 700;
    color:       #ffffff;
    margin:      0 0 6px;
    line-height: 1.2;
}

.legales-card-subtitle {
    font-size:   0.82rem;
    color:       var(--text-muted);
    margin:      0;
    line-height: 1.5;
}

/* =========================================
   CORPS DE CARTE
   ========================================= */
.legales-body {
    padding:  24px 28px 28px;
    position: relative;
    z-index:  1;
}

@media (min-width: 768px) {
    .legales-body {
        padding: 28px 40px 36px;
    }
}

.legales-body p {
    font-size:   0.95rem;
    color:       var(--text-muted);
    line-height: 1.75;
    margin:      0 0 16px;
}

.legales-body p:last-child {
    margin-bottom: 0;
}

.legales-body strong {
    color:       #ffffff;
    font-weight: 600;
}

.legales-body code {
    font-family:   'Courier New', monospace;
    font-size:     0.82rem;
    background:    rgba(155, 130, 243, 0.1);
    color:         var(--accent-purple);
    padding:       2px 7px;
    border-radius: 4px;
    border:        1px solid rgba(155, 130, 243, 0.2);
}

/* =========================================
   BLOCS INTERNES
   ========================================= */
.legales-block {
    padding-bottom: 24px;
    margin-bottom:  24px;
    border-bottom:  1px solid var(--border-subtle);
}

.legales-block:last-child {
    padding-bottom: 0;
    margin-bottom:  0;
    border-bottom:  none;
}

.legales-block h3 {
    font-family:    'Syne', sans-serif;
    font-size:      1rem;
    font-weight:    700;
    color:          #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin:         0 0 16px;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.legales-block h3::before {
    content:          '';
    display:          inline-block;
    width:            3px;
    height:           16px;
    background:       linear-gradient(to bottom, var(--accent-purple-2), var(--accent-purple));
    border-radius:    2px;
    flex-shrink:      0;
}

/* =========================================
   LISTES DE DONNÉES (clé : valeur)
   ========================================= */
.legales-list {
    list-style: none;
    padding:    0;
    margin:     0 0 16px;
    display:    flex;
    flex-direction: column;
    gap:        2px;
}

.legales-list:last-child {
    margin-bottom: 0;
}

.legales-list li {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px 16px;
    align-items:   baseline;
    padding:       10px 14px;
    border-radius: 8px;
    font-size:     0.9rem;
    background:    rgba(255, 255, 255, 0.02);
    border:        1px solid transparent;
    transition:    background 0.2s ease, border-color 0.2s ease;
}

.legales-list li:hover {
    background:    rgba(155, 130, 243, 0.05);
    border-color:  rgba(155, 130, 243, 0.1);
}

.legales-list .list-label {
    font-weight:    700;
    color:          var(--accent-purple);
    font-size:      0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width:      110px;
    flex-shrink:    0;
}

.legales-list li > span:last-child,
.legales-list li > a {
    color:      #e2e8f0;
    font-size:  0.9rem;
    word-break: break-word;
}

.legales-list li a {
    color:           var(--accent-purple);
    text-decoration: none;
    transition:      color 0.2s ease;
}

.legales-list li a:hover {
    color:      var(--accent-cyan);
    text-shadow: none;
}

/* Liste simple (puces) */
.legales-list--simple {
    padding-left: 0;
    margin:       12px 0;
}

.legales-list--simple li {
    background:   none;
    border:       none;
    padding:      6px 0 6px 20px;
    position:     relative;
    color:        var(--text-muted);
    font-size:    0.9rem;
}

.legales-list--simple li:hover {
    background:   none;
    border-color: transparent;
}

.legales-list--simple li::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        50%;
    transform:  translateY(-50%);
    width:      6px;
    height:     6px;
    border-radius: 50%;
    background: var(--accent-purple);
}

/* =========================================
   NOTICE INFO
   ========================================= */
.legales-notice {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       14px 16px;
    border-radius: 10px;
    background:    rgba(56, 189, 248, 0.05);
    border:        1px solid rgba(56, 189, 248, 0.15);
    margin-top:    16px;
}

.legales-notice svg {
    width:       18px;
    height:      18px;
    flex-shrink: 0;
    color:       var(--accent-cyan);
    margin-top:  2px;
}

.legales-notice p {
    font-size:   0.85rem;
    color:       #94a3b8;
    margin:      0;
    line-height: 1.6;
}

/* Variante verte */
.legales-notice--green {
    background: rgba(34, 197, 94, 0.05);
    border:     1px solid rgba(34, 197, 94, 0.15);
}

.legales-notice--green svg {
    color: var(--accent-green);
}

/* =========================================
   BLOC ZÉRO COOKIES
   ========================================= */
.legales-zero-cookies {
    display:       flex;
    align-items:   flex-start;
    gap:           18px;
    padding:       20px;
    background:    rgba(34, 197, 94, 0.06);
    border:        1px solid rgba(34, 197, 94, 0.2);
    border-radius: 14px;
    margin-bottom: 20px;
}

.zero-badge {
    width:           52px;
    height:          52px;
    flex-shrink:     0;
    border-radius:   50%;
    background:      rgba(34, 197, 94, 0.12);
    border:          2px solid rgba(34, 197, 94, 0.3);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--accent-green);
}

.zero-badge svg {
    width:  26px;
    height: 26px;
}

.legales-zero-cookies h3 {
    font-family: 'Syne', sans-serif;
    font-size:   1.05rem;
    font-weight: 700;
    color:       #ffffff;
    margin:      0 0 8px;
}

.legales-zero-cookies h3::before {
    display: none;
}

.legales-zero-cookies p {
    font-size:   0.9rem;
    color:       var(--text-muted);
    margin:      0;
    line-height: 1.6;
}

/* =========================================
   GRILLE DES DROITS
   ========================================= */
.legales-rights-grid {
    display: grid;
    gap:     12px;
    grid-template-columns: 1fr;
    margin-bottom: 28px;
}

@media (min-width: 560px) {
    .legales-rights-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .legales-rights-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.right-card {
    padding:       18px;
    background:    rgba(255, 255, 255, 0.02);
    border:        1px solid var(--border-subtle);
    border-radius: 12px;
    transition:    all 0.3s ease;
}

.right-card:hover {
    background:    rgba(155, 130, 243, 0.06);
    border-color:  rgba(155, 130, 243, 0.2);
    transform:     translateY(-2px);
}

.right-icon {
    width:           36px;
    height:          36px;
    border-radius:   8px;
    background:      rgba(155, 130, 243, 0.1);
    border:          1px solid rgba(155, 130, 243, 0.15);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--accent-purple);
    margin-bottom:   12px;
}

.right-icon svg {
    width:  16px;
    height: 16px;
}

.right-card h4 {
    font-size:   0.9rem;
    font-weight: 700;
    color:       #ffffff;
    margin:      0 0 6px;
}

.right-card p {
    font-size:   0.82rem;
    color:       var(--text-muted);
    margin:      0;
    line-height: 1.5;
}

/* =========================================
   CTA CONTACT
   ========================================= */
.legales-contact-cta {
    padding:       24px;
    background:    rgba(155, 130, 243, 0.05);
    border:        1px solid var(--border-purple);
    border-radius: 14px;
    text-align:    center;
}

.legales-contact-cta > p {
    font-size:   0.9rem;
    color:       var(--text-muted);
    margin:      0 0 14px;
}

.legales-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         12px 24px;
    background:      linear-gradient(135deg, var(--accent-purple-2), var(--accent-purple));
    color:           #ffffff;
    font-size:       0.9rem;
    font-weight:     700;
    border-radius:   50px;
    text-decoration: none;
    transition:      transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow:      0 4px 15px rgba(124, 92, 255, 0.3);
}

.legales-btn svg {
    width:  16px;
    height: 16px;
}

.legales-btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 92, 255, 0.45);
    color:      #ffffff;
    text-shadow: none;
}

.legales-cnil-note {
    font-size:  0.8rem;
    color:      #6c6c80;
    margin:     14px 0 0;
}

.legales-cnil-note a {
    color:           var(--accent-purple);
    text-decoration: none;
}

.legales-cnil-note a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-shadow:     none;
}

/* =========================================
   DATE DE MISE À JOUR
   ========================================= */
.legales-update-date {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   0.8rem;
    color:       #4a4a5a;
    text-align:  center;
    justify-content: center;
    margin:      0;
    padding-bottom: 20px;
}

.legales-update-date svg {
    width:  14px;
    height: 14px;
}