/* ════════════════════════════════════════════════════════════════
   FLYING PUB — STYLES DU MOTEUR D'ONBOARDING GÉNÉRIQUE (FPTour)
   Aucune règle ici ne cible un contenu métier précis : voile, mise
   en évidence et bulle s'appliquent identiquement quel que soit
   l'élément ciblé (bouton de nav, carte, formulaire...) et quel que
   soit le texte affiché. Variables (--white, --text, --orange, etc.)
   réutilisées depuis theme.css, déjà chargé sur chaque page.
════════════════════════════════════════════════════════════════ */

/* ── VOILE GÉNÉRIQUE ──
   z-index volontairement inférieur à .app-nav (100, identique sur
   toutes les pages de l'application) : la barre de navigation reste
   donc toujours visible au-dessus, sans aucune règle supplémentaire. */
.fp-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(26, 18, 8, 0.55);
}
.fp-tour-overlay[hidden] { display: none; }

/* ── MISE EN ÉVIDENCE GÉNÉRIQUE ──
   Appliquée dynamiquement par le moteur à n'importe quel élément
   (position:relative déjà présent ou sans effet indésirable ici). */
@keyframes fpTourHalo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 75, 12, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(184, 75, 12, 0.22); }
}
.fp-tour-highlight {
    position: relative;
    z-index: 95;
    border-radius: 8px;
    animation: fpTourHalo 1.4s ease-in-out infinite;
}

/* ── BULLE GÉNÉRIQUE ── */
.fp-tour-bubble {
    position: fixed;
    z-index: 96;
    max-width: min(340px, calc(100vw - 32px));
    width: 100%;
    background: var(--white);
    color: var(--text);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    font-family: 'Jost', sans-serif;
    box-sizing: border-box;
}
.fp-tour-bubble[hidden] { display: none; }
.fp-tour-bubble--centered {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}
.fp-tour-bubble-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.12rem;
    font-weight: 600;
    margin: 0 0 10px;
}
.fp-tour-bubble-text {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 20px;
}
.fp-tour-bubble-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fp-tour-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: 'Jost', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--border-md);
    background: transparent;
    color: var(--text);
    box-sizing: border-box;
}
.fp-tour-btn--next,
.fp-tour-btn--finish {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
}
.fp-tour-btn--next:hover,
.fp-tour-btn--finish:hover { background: var(--orange-lt); }
.fp-tour-btn--back:hover,
.fp-tour-btn--skip:hover,
.fp-tour-btn--ignore:hover { background: var(--cream-dark); }

/* MODIFICATION CIBLÉE — étape à confirmation serveur (ex. account-save/
   "J'ai enregistré") : état "en attente" grisé et non cliquable tant
   qu'aucune confirmation métier réelle n'est arrivée, puis état
   "confirmé" vert une fois notifyStepComplete() appelé pour cette
   étape précise. Sélecteurs à deux classes pour primer sur
   .fp-tour-btn--next/--finish ci-dessus quel que soit l'ordre dans la
   feuille de style. */
.fp-tour-btn.fp-tour-btn--pending {
    background: transparent;
    color: var(--text-light);
    border-color: var(--border-md);
    opacity: 0.55;
    cursor: not-allowed;
}
.fp-tour-btn.fp-tour-btn--confirmed {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
    cursor: pointer;
}
.fp-tour-btn.fp-tour-btn--confirmed:hover { background: #128a3e; }

@media (max-width: 480px) {
    .fp-tour-bubble {
        max-width: calc(100vw - 24px);
        padding: 18px;
    }
    .fp-tour-btn { flex: 1 1 100%; }
}