/* ══════════════════════════════════════════════
   FLYING PUB — THEME TOGGLE + DARK MODE
   Chargé sur toutes les pages via <link href="theme.css">
══════════════════════════════════════════════ */

/* ── Bouton toggle (mode clair et sombre) ── */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--cream-dark);
}

/* ══════════════════════════════════════════════
   DARK MODE — Variables CSS
   Activé via : html.dark-mode
══════════════════════════════════════════════ */

html.dark-mode body {
    --cream:      #18140F;
    --cream-dark: #211D17;
    --orange:     #D4622A;
    --orange-lt:  #E07035;
    --text:       #F5EEE5;
    --text-muted: #E8E0D4;
    --text-light: #C8C0B4;
    --border:     rgba(237,229,216,0.18);
    --border-md:  rgba(237,229,216,0.28);
    --white:      #262119;
    --card-bg:    #302B22;

    /* Motif de points adapté */
    background-image: radial-gradient(circle, rgba(237,229,216,0.04) 1px, transparent 1px);
}

/* ── Navbar marketing et auth (fond rgba littéral) ── */
html.dark-mode .navbar {
    background: rgba(31,27,20,0.97) !important;
    border-bottom-color: rgba(237,229,216,0.1);
}

/* ── Navbar de l'app (choix.html / visuel.html) ── */
html.dark-mode .app-nav {
    background: rgba(31,27,20,0.97) !important;
    border-bottom-color: rgba(237,229,216,0.1);
}

/* ── Champs de formulaire ── */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    background: var(--card-bg) !important;
    color: var(--text) !important;
    border-color: rgba(237,229,216,0.16) !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: var(--text-light) !important;
}
html.dark-mode input:focus,
html.dark-mode textarea:focus {
    border-color: var(--orange) !important;
    background: var(--card-bg) !important;
}

/* ── Sections marketing à fond blanc / crème ── */
html.dark-mode .section--white,
html.dark-mode .features,
html.dark-mode .pricing,
html.dark-mode .faq,
html.dark-mode .testimonials {
    background: var(--card-bg);
}

/* ── Cartes et modales ── */
html.dark-mode .card,
html.dark-mode .pricing-card,
html.dark-mode .faq-item,
html.dark-mode .feature-card {
    background: var(--white);
    border-color: var(--border-md);
}

/* ── Scrollbar (Webkit) ── */
html.dark-mode ::-webkit-scrollbar-track {
    background: var(--cream);
}
html.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--cream-dark);
}

/* ══════════════════════════════════════════════
   MENU DÉROULANT UTILISATEUR
══════════════════════════════════════════════ */

.nav-user-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 178px;
    background: var(--white);
    border: 1px solid var(--border-md);
    border-radius: 11px;
    box-shadow: 0 8px 28px rgba(26,18,8,0.13);
    padding: 5px;
    display: none;
    z-index: 500;
}
.user-dropdown.open {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 7px;
    text-decoration: none;
    color: var(--text);
    font-family: 'Jost', sans-serif;
    font-size: 0.83rem;
    font-weight: 500;
    transition: background 0.12s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    line-height: 1.4;
}
.dropdown-item:hover {
    background: var(--cream-dark);
    color: var(--text);
    text-decoration: none;
}
.dropdown-item.deconnexion {
    color: var(--text-muted);
}

.dropdown-separator {
    height: 1px;
    background: var(--border);
    margin: 4px 3px;
}