/* FlyView — styles communs du site. Contours #64748b, ombres légères. */
:root {
    --fv-bleu: #1e3a8a;
    --fv-bleu-vif: #2563eb;
    --fv-contour: #64748b;
    --fv-fond: #f1f5f9;
    --fv-texte: #0f172a;
    --fv-texte-doux: #475569;
    --fv-bandeau-h: 52px;
}

html, body { height: 100%; }
body.fv { background: var(--fv-fond); color: var(--fv-texte); margin: 0; display: flex; flex-direction: column; }

/* --- Bandeau ------------------------------------------------------------------ */
.fv-bandeau {
    flex: 0 0 var(--fv-bandeau-h);
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0 1rem;
    background: linear-gradient(135deg, var(--fv-bleu) 0%, var(--fv-bleu-vif) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
    z-index: 1000;
}
.fv-bandeau__marque { color: #fff; font-weight: 700; font-size: 1.2rem; text-decoration: none; letter-spacing: .3px; }
.fv-bandeau__menu { display: flex; gap: .25rem; flex: 1 1 auto; overflow-x: auto; }
.fv-bandeau__lien {
    color: rgba(255, 255, 255, .85); text-decoration: none; padding: .35rem .7rem; border-radius: 6px; white-space: nowrap;
}
.fv-bandeau__lien:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.fv-bandeau__lien--actif { color: #fff; background: rgba(255, 255, 255, .2); }
.fv-bandeau__compte { display: flex; align-items: center; gap: .5rem; }
.fv-bandeau__sortie {
    background: transparent; border: 1px solid rgba(255, 255, 255, .6); color: #fff;
    border-radius: 6px; padding: .25rem .7rem; font-size: .9rem;
}
.fv-bandeau__sortie:hover { background: rgba(255, 255, 255, .15); }

/* --- Contenu ------------------------------------------------------------------ */
.fv-contenu { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1.25rem; }
.fv--plein-ecran .fv-contenu { padding: 0; overflow: hidden; }

.fv-carte-info {
    max-width: 32rem; margin: 3rem auto; background: #fff;
    border: 1px solid var(--fv-contour); border-radius: 8px; padding: 1.5rem 2rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .12);
}
.fv-carte-info h1 { font-size: 1.4rem; }

.fv-panneau {
    background: #fff; border: 1px solid var(--fv-contour); border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08); padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.fv-panneau__titre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.fv-panneau__titre h2 { font-size: 1.15rem; margin: 0; }

/* --- Modales déplaçables et redimensionnables (fv-modals.js) ----------------- */
.fv-modal-poignee { cursor: move; }
.fv-modal-poignee .btn-close { cursor: pointer; }
.fv-modal-redim {
    resize: both; overflow: auto;
    min-width: 320px; min-height: 180px; max-width: 98vw; max-height: 94vh;
}
.modal-content { border: 1px solid var(--fv-contour); }

/* --- Tuiles d'état (administration des photos) ------------------------------------ */
.fv-tuile { border: 1px solid var(--fv-contour); border-left-width: 5px; border-radius: 8px; padding: .6rem .8rem; background: #fff; height: 100%; }
.fv-tuile--ok { border-left-color: #15803d; }
.fv-tuile--alerte { border-left-color: #d97706; }
.fv-tuile--erreur { border-left-color: #b91c1c; }
.fv-tuile__titre { font-size: .85rem; color: var(--fv-texte-doux); }
.fv-tuile__valeur { font-size: 1.35rem; font-weight: 700; }
.fv-tuile__detail { font-size: .85rem; color: var(--fv-texte-doux); }
/* Bandeau d'alerte des administrateurs (photos : NAS, disque, erreurs). */
.fv-alerte-admin { flex: 0 0 auto; padding: .4rem 1rem; background: #fef3c7; color: #78350f; border-bottom: 1px solid #d97706; font-size: .92rem; }
.fv-alerte-admin a { color: #78350f; font-weight: 600; }

/* Onglets des missions par état (panneau Missions) */
.fv-onglets { display: flex; gap: 4px; margin: 8px 0; border-bottom: 1px solid #cbd5e1; }
.fv-onglet { flex: 1 1 auto; padding: 6px 8px; font-size: .88rem; border: 1px solid transparent; border-bottom: 0;
    border-radius: 6px 6px 0 0; background: transparent; color: #475569; cursor: pointer; }
.fv-onglet.is-actif { background: #ffffff; border-color: #cbd5e1; color: #0f172a; font-weight: 600; margin-bottom: -1px; }
.fv-onglet span { color: #64748b; font-weight: 400; }
.fv-album-page__missions .fv-onglets { margin: 6px 8px 0; }

/* Administration : menu de gauche (réglages par thème, appareils, journal, état des médias). */
.fv-admin { flex: 1 1 auto; min-height: 0; display: flex; }
.fv-admin__menu { flex: 0 0 230px; overflow-y: auto; background: #fff; border-right: 1px solid #64748b; padding: 12px 10px; }
.fv-admin__groupe { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin: 14px 8px 4px; }
.fv-admin__groupe:first-child { margin-top: 2px; }
.fv-admin__lien { display: block; padding: 6px 10px; border-radius: 8px; color: #0f172a; text-decoration: none; font-size: .92rem; }
.fv-admin__lien:hover { background: #f1f5f9; color: #0f172a; }
.fv-admin__lien.is-actif { background: #1e3a8a; color: #fff; font-weight: 600; }
.fv-admin__contenu { flex: 1 1 auto; min-width: 0; }
@media (max-width: 760px) {
    .fv-admin { flex-direction: column; }
    .fv-admin__menu { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid #64748b; display: flex; flex-wrap: wrap; gap: 4px; }
    .fv-admin__groupe { flex-basis: 100%; margin: 6px 4px 0; }
}
/* Pastille du menu « Direct » : nombre de directs en cours. */
.fv-bandeau__direct { display: inline-block; min-width: 1.4em; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #dc2626;
    color: #fff; font-size: .75rem; font-weight: 800; text-align: center; }
/* Champs à saisir et listes déroulantes : fond vert pastel pour qu'ils ressortent du texte. */
.form-control, .form-select, .jconfirm .form-control { background-color: #e6f6ea; border-color: #64748b; }
.form-control:focus, .form-select:focus { background-color: #f3fbf5; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: #e9ecef; }
.form-control[type="color"], .form-control-plaintext { background-color: transparent; }