/* ══════════════════════════════════════════════
   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;
}

/* ══════════════════════════════════════════════
   NAVIGATION MOBILE — DÉFILEMENT HORIZONTAL UNIQUE
   theme.js insère dynamiquement, uniquement à ≤480px,
   un conteneur ".fp-nav-scroll" autour de chaque
   ".app-nav__tabs" existant (jamais dans le HTML des
   18 pages, jamais dans les CSS de page) et deux
   boutons ".fp-nav-arrow" — jamais les 6 liens
   ".nav-tab" eux-mêmes, jamais modifiés.
══════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Reprend le rôle de flex-item (order/flex-basis)
       que ".app-nav__tabs" tenait jusqu'ici directement
       dans ".app-nav" (règle du CSS de page, inchangée) —
       nécessaire uniquement une fois le conteneur inséré
       par theme.js, sinon cette règle ne s'applique à
       rien et reste sans effet. */
    .app-nav > .fp-nav-scroll {
        order: 3;
        flex-basis: 100%;
        min-width: 0;
        position: relative;
    }

    /* Spécificité (classe + classe) volontairement
       supérieure à la simple règle ".app-nav__tabs" du
       CSS de page — chargé APRÈS theme.css — afin de
       gagner la cascade sans "!important", quel que soit
       l'ordre de chargement réel. Sans effet tant que le
       conteneur n'existe pas (sélecteur ne correspond à
       rien) : le desktop et les pages où theme.js n'a pas
       encore tourné restent strictement inchangés. */
    .fp-nav-scroll .app-nav__tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-left: 20px;
        padding-right: 20px;
        justify-content: flex-start;
    }
    .fp-nav-scroll .app-nav__tabs::-webkit-scrollbar {
        display: none;
    }

    /* Largeur naturelle conservée : les onglets défilent,
       ils ne se compriment jamais (apparence des onglets
       et de l'onglet actif strictement inchangée). */
    .fp-nav-scroll .nav-tab {
        flex: 0 0 auto;
    }

    /* Flèches créées dynamiquement par theme.js — jamais
       présentes dans le HTML des pages. Dégradé plutôt
       qu'un bouton plein : n'occulte jamais le texte des
       onglets, seulement les derniers pixels d'arrière-plan. */
    .fp-nav-arrow {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        color: var(--text);
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        z-index: 5;
    }
    .fp-nav-arrow--left {
        left: 0;
        background: linear-gradient(to right, var(--white) 60%, transparent);
    }
    .fp-nav-arrow--right {
        right: 0;
        background: linear-gradient(to left, var(--white) 60%, transparent);
    }
    /* [hidden] doit explicitement l'emporter sur la règle
       d'auteur ".fp-nav-arrow { display:flex }" ci-dessus
       (l'origine "auteur" prime sinon toujours sur la
       règle de navigateur par défaut) — même correctif
       déjà appliqué ailleurs dans ce projet (voir
       visuel.html, updateAddButton()). */
    .fp-nav-arrow[hidden] {
        display: none;
    }
}