/* ==========================================================
   TRÉSORS DE SNACKS — LEGAL.CSS
   Pages légales pleine page — sans popup
========================================================== */

:root{
    --legal-bg:#080d13;
    --legal-surface:#111a24;
    --legal-surface-2:#0d151e;
    --legal-border:rgba(255,255,255,.09);
    --legal-text:#f4f7fb;
    --legal-muted:#b8c4d1;
    --legal-red:#ff3b30;
    --legal-yellow:#ffb300;
    --legal-cyan:#00d9ff;
    --legal-green:#00e5a8;
    --legal-pink:#ff4d6d;
    --legal-shadow:0 22px 65px rgba(0,0,0,.24);
    --legal-container:1040px;
}

html{scroll-behavior:smooth}

body.page-legal,
body.legal-page{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at 7% 3%,rgba(255,59,48,.07),transparent 24%),
        radial-gradient(circle at 92% 10%,rgba(0,217,255,.07),transparent 26%),
        linear-gradient(180deg,#070b10 0%,#0b1118 48%,#080d13 100%);
    color:var(--legal-text);
}

.legal-page,
.page-legal{color:var(--legal-text)}

.legal-popup-page{
    position:relative;
    width:100%;
    min-height:100vh;
    isolation:isolate;
}

.legal-popup-page::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.42;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,#000 0%,transparent 80%);
}

.legal-header{
    width:min(100%,var(--legal-container));
    margin:0 auto;
    padding:82px 28px 54px;
    display:flex;
    align-items:center;
    gap:22px;
}

.legal-header-icon{
    flex:0 0 68px;
    width:68px;
    height:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    color:#fff;
    background:linear-gradient(135deg,var(--legal-red),var(--legal-yellow),var(--legal-cyan));
    box-shadow:0 14px 34px rgba(0,217,255,.12);
}

.legal-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:9px;
    color:var(--legal-cyan);
    font-size:12px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.legal-header h1{
    margin:0 0 12px;
    color:#fff;
    font-size:clamp(2.8rem,6vw,5rem);
    line-height:.98;
    letter-spacing:-.045em;
    font-weight:900;
}

.legal-header p{
    max-width:760px;
    margin:0;
    color:var(--legal-muted);
    font-size:16px;
    line-height:1.8;
}

.legal-hero{
    position:relative;
    overflow:hidden;
    padding:86px 20px 68px;
    background:
        radial-gradient(circle at 18% 28%,rgba(255,59,48,.14),transparent 25%),
        radial-gradient(circle at 82% 36%,rgba(0,217,255,.12),transparent 27%),
        linear-gradient(135deg,#0a0f16 0%,#121c27 55%,#0a0f16 100%);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.legal-hero .container{position:relative;z-index:1}
.legal-hero h1{color:#fff}
.legal-hero p{color:var(--legal-muted)}

.legal-content{
    width:100%;
    max-width:var(--legal-container);
    margin:0 auto;
    padding:64px 28px 110px;
}

.legal-content>.container{max-width:100%}

/* Cartes : même langage que le site, mais adapté au contenu juridique */
.legal-card{
    position:relative;
    overflow:hidden;
    margin:0 0 22px;
    padding:38px 40px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:var(--legal-radius-lg,48px);
    background:linear-gradient(145deg,#111a24,#0d151e);
    box-shadow:0 18px 55px rgba(0,0,0,.20);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.legal-card::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:4px;
    background:linear-gradient(180deg,var(--legal-red),var(--legal-yellow),var(--legal-cyan));
}

.legal-card:hover{
    transform:translateY(-4px);
    border-color:rgba(0,217,255,.22);
    box-shadow:0 26px 70px rgba(0,0,0,.28);
}

.legal-card h2{
    margin:0 0 18px;
    padding-left:12px;
    color:#fff;
    font-size:clamp(1.45rem,2.5vw,2rem);
    line-height:1.12;
    letter-spacing:-.03em;
    font-weight:850;
}

.legal-card h3{
    color:#fff;
    letter-spacing:-.02em;
}

.legal-card p,
.legal-card li{
    color:#c4ced8;
    line-height:1.82;
}

.legal-card strong{color:#fff}
.legal-card a{color:#63e6ff;font-weight:750}
.legal-card a:hover{color:#fff}

.legal-list{
    display:flex;
    flex-direction:column;
    gap:11px;
    margin:20px 0;
    padding:0;
    list-style:none;
}

.legal-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.legal-list li i{
    flex:0 0 26px;
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:2px;
    border:1px solid rgba(0,217,255,.16);
    border-radius:9px;
    color:var(--legal-cyan);
    background:rgba(0,217,255,.07);
}

.cookies-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:var(--legal-radius-md,30px);
}

.cookies-table th{
    padding:15px 16px;
    color:#fff;
    background:#182533;
    text-align:left;
    font-weight:800;
}

.cookies-table td{
    padding:15px 16px;
    color:#c4ced8;
    background:#0f1821;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.cookies-table tbody tr:nth-child(even) td{background:#111c26}
.cookies-table tr:last-child td{border-bottom:0}

.legal-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:48px;
    padding:12px 19px;
    border:1px solid transparent;
    border-radius:var(--legal-radius-sm,18px);
    color:#081018!important;
    background:linear-gradient(135deg,var(--legal-yellow),#ffd75a);
    box-shadow:0 10px 26px rgba(255,179,0,.14);
    font-size:14px;
    font-weight:850;
    text-decoration:none!important;
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.legal-button:hover{
    color:#081018!important;
    transform:translateY(-2px);
    filter:brightness(1.04);
    box-shadow:0 14px 32px rgba(255,179,0,.22);
}

.legal-button.secondary{
    color:#eafcff!important;
    border-color:rgba(0,217,255,.22);
    background:rgba(0,217,255,.08);
    box-shadow:none;
}

.legal-button.secondary:hover{
    color:#fff!important;
    background:rgba(0,217,255,.14);
}

.legal-contact{display:flex;align-items:center;gap:10px}
.legal-contact i{
    flex:0 0 36px;
    width:36px;height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(0,217,255,.14);
    border-radius:12px;
    color:var(--legal-cyan);
    background:rgba(0,217,255,.07);
}

.legal-card address{
    margin:18px 0;
    padding:17px 19px;
    border-left:3px solid var(--legal-cyan);
    border-radius:0 18px 18px 0;
    background:rgba(0,217,255,.045);
    color:#c4ced8;
    font-style:normal;
    line-height:1.75;
}

.legal-footer{
    width:min(100%,var(--legal-container));
    margin:0 auto;
    padding:24px 28px 48px;
    border-top:1px solid rgba(255,255,255,.07);
    color:#9ba8b5;
    font-size:13px;
    text-align:center;
}

.legal-modal,
.legal-modal-container,
.legal-modal-close,
.legal-modal-frame{
    display:none!important;
}

body.legal-modal-open{overflow:auto!important}

.text-center{text-align:center}

@media(max-width:900px){
    .legal-header{padding:68px 22px 44px}
    .legal-content{padding:48px 22px 82px}
    .legal-card{padding:30px}
    .legal-card:hover{transform:none}
}

@media(max-width:700px){
    .legal-header{display:block;padding:54px 20px 36px}
    .legal-header-icon{width:56px;height:56px;margin-bottom:18px;border-radius:18px}
    .legal-header h1{font-size:clamp(2.45rem,13vw,4rem)}
    .legal-header p{font-size:15px}
    .legal-hero{padding:62px 16px 48px}
    .legal-content{padding:36px 16px 70px}
    .legal-card{padding:26px 21px;border-radius:var(--legal-radius-lg,32px)}
    .legal-card h2{padding-left:0;font-size:1.35rem}
    .legal-card p,.legal-card li{font-size:14px;line-height:1.75}
    .cookies-table{display:block;overflow-x:auto}
    .cookies-table th,.cookies-table td{min-width:150px;padding:12px 13px}
    .legal-button{width:100%}
    .legal-footer{padding:20px 16px 36px}
}

@media(max-width:480px){
    .legal-card{padding:22px 17px}
    .legal-card h2{font-size:1.22rem}
}

@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .legal-card,.legal-button{transition:none!important}
}

/* ==========================================================
   MODERNISATION ULTRA-MODERNE — CONTRASTE GARANTI
   ========================================================== */

:root{
    --legal-radius-xl:70px;
    --legal-radius-lg:48px;
    --legal-radius-md:30px;
    --legal-radius-sm:18px;
    --legal-surface-light:#fff;
    --legal-text-light:#101820;
    --legal-muted-light:#596875;
    --legal-border-light:rgba(11,23,32,.09);
}

.legal-page--light,
.legal-page.legal-light{
    background:#f4f7f8;
    color:var(--legal-text-light);
}

.legal-page--light .legal-card,
.legal-page.legal-light .legal-card{
    background:#fff;
    border-color:var(--legal-border-light);
    color:var(--legal-text-light);
    box-shadow:0 14px 40px rgba(8,19,27,.065);
}

.legal-page--light .legal-card h2,
.legal-page--light .legal-card h3,
.legal-page--light .legal-card p,
.legal-page--light .legal-card li,
.legal-page.legal-light .legal-card h2,
.legal-page.legal-light .legal-card h3{
    color:var(--legal-text-light);
}

.legal-page--light .legal-card p,
.legal-page--light .legal-card li,
.legal-page.legal-light .legal-card p,
.legal-page.legal-light .legal-card li{
    color:var(--legal-muted-light);
}

.legal-page--light .legal-card strong,
.legal-page.legal-light .legal-card strong{
    color:#101820;
}

.legal-page--light .legal-card a,
.legal-page.legal-light .legal-card a{
    color:#007f9a;
}

@media(max-width:700px){
    .legal-card{border-radius:var(--legal-radius-lg)}
}