/* ── Tokens light (défaut) ────────────────────────────────────────────── */
:root,
[data-theme="light"] {
    --bg:              #f4f3ef;
    --surface:         #ffffff;
    --border:          rgba(40,37,29,.08);
    --text:            #28251d;
    --text-muted:      #7a7974;
    --primary:         #01696f;
    --primary-h:       #0c4e54;
    --primary-hl:      #cedcd8;
    --navbar-bg:       #01696f;
    --navbar-link:     rgba(255,255,255,.8);
    --navbar-link-h:   #ffffff;
    --footer-bg:       #01696f;
    --footer-text:     rgba(255,255,255,.6);
    --ghost-bg:        #f3f0ec;
    --ghost-h:         #e8e4de;
    --ghost-text:      #28251d;
    --shadow:          0 4px 24px rgba(0,0,0,.08);
    --font-display:    'Satisfy', cursive;
    --font-body:       'Work Sans', system-ui, sans-serif;
    --transition:      180ms cubic-bezier(.16,1,.3,1);
}

/* ── Tokens dark ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg:              #171614;
    --surface:         #1c1b19;
    --border:          rgba(255,255,255,.08);
    --text:            #cdccca;
    --text-muted:      #797876;
    --primary:         #4f98a3;
    --primary-h:       #227f8b;
    --primary-hl:      #313b3b;
    --navbar-bg:       #111110;
    --navbar-link:     rgba(255,255,255,.7);
    --navbar-link-h:   #ffffff;
    --footer-bg:       #111110;
    --footer-text:     rgba(255,255,255,.4);
    --ghost-bg:        #22211f;
    --ghost-h:         #2d2c2a;
    --ghost-text:      #cdccca;
    --shadow:          0 4px 24px rgba(0,0,0,.35);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: var(--bg);
    color: var(--text);
    transition: background-color var(--transition), color var(--transition);
}

main { flex: 1; }

/* ── Navbar ───────────────────────────────────────────────────────────── */
.navbar-custom {
    background-color: var(--navbar-bg) !important;
    transition: background-color var(--transition);
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
    color: var(--navbar-link) !important;
    transition: color var(--transition);
}

.navbar-custom,
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
    color: var(--navbar-link-h) !important;
}

.navbar-custom .nav-link.active {
    font-weight: 600;
}

.navbar-custom .navbar-toggler {
    border-color: rgba(255,255,255,.3);
}
.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Bouton dark mode ─────────────────────────────────────────────────── */
.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition);
    padding: 0;
    flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,.2); }
.theme-toggle svg { width: 16px; height: 16px; pointer-events: none; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer-custom {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    transition: background-color var(--transition);
}
.footer-custom a { color: #fff; text-decoration: none; }
.footer-custom a:hover { text-decoration: underline; }
.footer-custom .text-muted-footer { color: var(--footer-text) !important; }

/* ── Quote card ───────────────────────────────────────────────────────── */
.quote-card {
    background: var(--surface);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    padding: clamp(1.75rem, 5vw, 3rem);
    max-width: 680px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    transition: background var(--transition), box-shadow var(--transition);
}

.quote-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--primary-hl);
    border-radius: 999px;
    padding: .25rem .85rem;
    margin-bottom: 1.75rem;
    transition: background var(--transition), color var(--transition);
}

#quoteText {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    line-height: 1.6;
    color: var(--text);
    transition: opacity .3s ease, transform .3s ease, color var(--transition);
    min-height: 80px;
}

#quoteText.fade-out { opacity: 0; transform: translateY(-8px); }

/* ── Barre de progression ─────────────────────────────────────────────── */
.progress { background-color: var(--ghost-bg) !important; }

.progress-bar-quote {
    background-color: var(--primary) !important;
    transition: width .5s cubic-bezier(.16,1,.3,1), background-color var(--transition);
}

.text-muted { color: var(--text-muted) !important; }

/* ── Boutons ──────────────────────────────────────────────────────────── */
.btn-quote-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transition: background-color var(--transition), border-color var(--transition);
}
.btn-quote-primary:hover:not(:disabled) {
    background-color: var(--primary-h);
    border-color: var(--primary-h);
    color: #fff;
}
.btn-quote-primary:disabled { opacity: .5; }

.btn-quote-ghost {
    background-color: var(--ghost-bg);
    border-color: var(--border);
    color: var(--ghost-text);
    transition: background-color var(--transition), color var(--transition);
}
.btn-quote-ghost:hover {
    background-color: var(--ghost-h);
    color: var(--ghost-text);
}

/* ── Notice cycle ─────────────────────────────────────────────────────── */
.cycle-notice { display: none; }
.cycle-notice.visible { display: block; }