/* ======================================
   VARIABLES
====================================== */
:root {
    --ek-green: #428b42;
    --ek-green-light: #6ac96a;
    --ek-bg-dark: #0F0F10;
    --ek-bg-gradient-top: #1d1f20;
    --ek-bg-gradient-bottom: #070708;
    --ek-text-main: #f5f5f5;
    --ek-text-muted: #c2c5cc;
    --ek-border-subtle: #26282b;

    /* Rouge Tailwind */
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;
    --red-950: #450a0a;
}

/* ======================================
   RESET
====================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: system-ui, -apple-system, sans-serif;
    background: radial-gradient(circle at top, var(--ek-bg-gradient-top), var(--ek-bg-gradient-bottom));
    color: var(--ek-text-main);
}

.page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }

/* ======================================
   UNSUBSCRIBE PAGE (LIGHT THEME)
====================================== */
body.unsubscribe-page .card {
    background: #ffffff;
    color: #111111;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

body.unsubscribe-page .badge {
    background: #f1f4f7;
    box-shadow: none;
}

body.unsubscribe-page .badge-dot {
    background: var(--ek-green);
    box-shadow: 0 0 0 4px rgba(66, 139, 66, 0.2);
}

body.unsubscribe-page .badge-text {
    color: #111111;
}

body.unsubscribe-page .title,
body.unsubscribe-page .subtitle,
body.unsubscribe-page .card-body p {
    color: #111111;
}

body.unsubscribe-page .hint {
    color: #111111;
}

body.unsubscribe-page .hint a {
    color: #1f7f3f;
}

/* ======================================
   HEADER
====================================== */
.site-header { background: var(--ek-bg-dark); box-shadow: 0 2px 8px rgba(0,0,0,.7); }
.site-header-top {
    height: 85px;
    display: flex;
    align-items: center;
}

@media (max-width: 900px){
    .site-header-top { height: 60px; }
}

.site-header-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.site-logo { display: flex; flex-direction: column; align-items: center; }
.site-logo-img { height: 48px; }

.flag {
    width: 42px;
    height: 4px;
    margin-top: 4px;
}
.flag td { padding: 0; margin: 0; height: 4px; }
.flag-blue{ background:#1f569f; }
.flag-white{ background:#fff; }
.flag-red{ background:#de5040; }

/* Bande rouge dégradée */
.header-bar {
    height: 28px;
    background-image: linear-gradient(0deg, #2a4f2b 0, #244526 40%, #1d391f 60%, #07140b);
}

/* ======================================
   CONTENT CARD
====================================== */
.main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.card {
    max-width: 720px;
    width: 100%;
    background: rgba(10,11,12,0.93);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 18px 45px rgba(0,0,0,0.65);

    background: linear-gradient(
            to bottom,
            var(--red-600) 0%,
            var(--red-700) 25%,
            var(--red-800) 55%,
            var(--red-900) 80%,
            var(--red-950) 100%
        );
}

/* Badge */
.badge {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    padding: .4rem .9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    background: #0F0F10;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.65);
    margin-bottom: 30px;
}
.badge-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--red-600);
    box-shadow: 0 0 0 4px rgba(220,38,38,0.25);
}
.badge-text {
     font-size: 1rem;
     letter-spacing: .08em;
     color: white;
 }

/* Lock Icon */
.lock-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.1rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, #7f1d1d, #450a0a);
    box-shadow:
        0 15px 38px rgba(0,0,0,.7),
        0 0 0 1px rgba(255,255,255,.04);
}

/* Title */
.title {
    font-size: 2rem;
    margin-bottom: .6rem;
}

.subtitle {
    font-size: 1rem;
    color: var(--ek-text-muted);
    margin-bottom: 1.7rem;
}

/* ======================================
   BUTTONS — vraie version Web (pas email)
====================================== */
.btn-primary {
    display: inline-block;
    padding: 12px 26px;
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    background-image: linear-gradient(135deg,#397a3c,#306a36 15%,#357239 45%,#428b42 75%,#58a558);
    border: 1px solid #66b566;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.3);
    transition: all .18s ease;
    margin-top: 1.2rem;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -4px rgba(0,0,0,.35);
}

.btn-primary:active {
    transform: translateY(0px);
}

/* Hint text */
.hint {
    margin-top: 1rem;
    color: var(--ek-text-muted);
}
.hint a { color: var(--ek-green-light); text-decoration:none; }
.hint a:hover { text-decoration:underline; }

/* ======================================
   FOOTER
====================================== */
footer {
    background: var(--ek-bg-dark);
    color: var(--ek-text-muted);
    background-image: linear-gradient(
        0deg,
        rgba(22, 41, 23, .65) 0%,    /* sombre, presque noire, remplace rgba(42,79,43,.5) */
        rgba(18, 34, 19, .65) 35%,   /* version + deep du deuxième vert */
        rgba(14, 27, 15, .65) 65%,   /* encore plus sombre mais lisible */
        rgba(4, 12, 7, .70) 100%     /* très noir-vert, gorge profonde */
    );
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.5rem;
}

@media (min-width:900px) {
    .footer-grid { grid-template-columns: repeat(4,1fr); }
}

.footer-column h4 {
    margin-bottom:.6rem;
    font-size:.95rem;
    color:white;
}

.footer-links a {
    display:block;
    color:var(--ek-text-muted);
    padding:.25rem 0;
    text-decoration:none;
}
.footer-links li {
   list-style: none;
}
.footer-links a:hover { color:var(--ek-green-light); }

.footer-bottom {
    margin-top:1.5rem;
    border-top:1px solid var(--ek-border-subtle);
    padding-top:1rem;
    text-align:center;
}

.footer-bottom-links a {
    margin:0 .5rem;
    color:var(--ek-text-muted);
    text-decoration:none;
}
.footer-bottom-links a:hover {
    color:var(--ek-green-light);
}