/* ===== legal.css — WEBCOD pages légales (nouvelle charte) ===== */

:root {
    --cream:      #F2EFE8;
    --cream-soft: #FAF8F4;
    --cream-warm: #E8E5DC;
    --line:       #DDD8CD;
    --ink:        #171A21;
    --ink-light:  #5B6470;
    --navy:       #1E3A5F;
    --coral:      #DB6545;
    --coral-dark: #A8431F;
}

/* BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background: var(--cream);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--coral); color: #fff; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* LIENS */
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
a:hover, a:focus { color: var(--coral); }

/* TYPOGRAPHIE COURANTE */
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
em { font-style: italic; }
code {
    font-family: 'Courier New', Courier, monospace;
    font-size: .875rem;
    background: var(--cream-warm);
    padding: 1px 5px;
    border-radius: 2px;
}

ul, ol { padding-left: 1.4rem; }
li { margin-bottom: .6rem; }
li:last-child { margin-bottom: 0; }

dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem; align-items: baseline; }
dt { font-weight: 600; white-space: nowrap; }
dd { color: var(--ink-light); }
@media (max-width: 500px) {
    dl { grid-template-columns: 1fr; }
    dt { margin-top: .5rem; }
}

/* HEADER */
.legal-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(242,239,232,.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 0 24px; height: 56px;
    display: flex; align-items: center; justify-content: space-between;
}
@media (min-width: 768px) { .legal-header { padding: 0 40px; } }

.legal-logo {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.35rem; font-weight: 600;
    letter-spacing: -.03em; color: var(--ink);
    text-decoration: none; transition: opacity .2s;
}
.legal-logo:hover { opacity: .7; color: var(--ink); }
.legal-logo span { color: var(--coral); }

.legal-close {
    font-size: .8rem; font-weight: 500;
    color: var(--ink-light);
    display: flex; align-items: center; gap: 5px;
    background: none; border: none; cursor: pointer;
    padding: 0; transition: color .2s; font-family: 'Inter', sans-serif;
}
.legal-close:hover { color: var(--coral); }

/* WRAPPER CONTENU */
.legal-wrapper {
    max-width: 780px;
    margin: 0 auto;
    padding: 56px 24px 80px;
}
@media (min-width: 768px) { .legal-wrapper { padding: 72px 40px 96px; } }

/* TITRE DE PAGE */
.legal-title-wrap { margin-bottom: 48px; }

.legal-h1 {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 16px;
}
.legal-h1 .accent { color: var(--coral); font-style: italic; }

.tech-line {
    height: 2px;
    background: linear-gradient(90deg, var(--coral) 0%, var(--navy) 60%, transparent 100%);
    margin-bottom: 20px;
    width: 100%;
}

.legal-meta {
    font-size: .875rem;
    color: var(--ink-light);
    line-height: 1.65;
    margin-bottom: .6rem;
}

/* ARTICLE */
.legal-article { font-size: .9375rem; }

.legal-article h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1rem; font-weight: 600;
    color: var(--ink);
    margin-top: 2.5rem; margin-bottom: .75rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--coral);
    display: inline-block;
}

.legal-article h4 {
    font-family: 'Inter', sans-serif;
    font-size: .925rem; font-weight: 600;
    color: var(--ink);
    margin-top: 1.75rem; margin-bottom: .6rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--line);
    display: inline-block;
}

.legal-article p, .legal-article li { color: var(--ink-light); }
.legal-article strong { color: var(--ink); }

.legal-article ol { list-style: decimal; }
.legal-article ul { list-style: disc; }

/* TABLE (cookies) */
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: .85rem;
}
.legal-table caption {
    text-align: left;
    color: var(--ink-light);
    margin-bottom: .5rem;
    font-size: .8rem;
}
.legal-table th, .legal-table td {
    padding: .55rem .8rem;
    border: 1px solid var(--line);
    vertical-align: top;
    text-align: left;
}
.legal-table thead th {
    background: var(--cream-warm);
    font-weight: 600; color: var(--ink);
    font-size: .82rem;
    border-bottom: 2px solid var(--coral);
}
.legal-table tbody tr:nth-child(even) { background: var(--cream-soft); }
@media (max-width: 640px) {
    .legal-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .legal-table th, .legal-table td { padding: .45rem .55rem; font-size: .8rem; }
}

/* BOUTON KLARO */
.btn-klaro {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 2rem;
    font-family: 'Inter', sans-serif;
    font-size: .75rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--navy); border: 1px solid var(--navy);
    padding: 10px 20px; border-radius: 2px;
    text-decoration: none;
    transition: background .2s, color .2s;
    cursor: pointer; background: transparent;
}
.btn-klaro:hover { background: var(--navy); color: white; }

/* FOOTER */
.legal-footer {
    background: var(--ink);
    color: rgba(242,239,232,.4);
    padding: 14px 24px;
    border-top: 1px solid rgba(255,255,255,.05);
    font-size: .75rem;
}
@media (min-width: 768px) { .legal-footer { padding: 14px 40px; } }
.legal-footer-inner {
    max-width: 780px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 10px;
}
.legal-footer .legal-logo { font-size: 1.1rem; color: rgba(242,239,232,.6); }
.legal-footer .legal-logo:hover { color: var(--coral); opacity: 1; }
.legal-footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.legal-footer-links a { color: rgba(242,239,232,.4); text-decoration: none; transition: color .2s; }
.legal-footer-links a:hover { color: var(--coral); }
.legal-footer-copy { width: 100%; text-align: center; font-size: .7rem; color: rgba(242,239,232,.3); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }