/* =============================================
   VIFAVION — Couche de transition

   Les écrans sont écrits avec le vocabulaire de l'ancien thème (classes
   neo-*) et celui de Bootstrap. Les réécrire tous d'un bloc aurait été long
   et risqué ; ce fichier redonne à ces classes l'allure de la charte.

   C'est la seule feuille qui les définit encore : l'ancien thème
   (vifavion-neo.css) et le résidu violet (main.css) ne sont plus chargés
   nulle part. Ce fichier maigrit à mesure que les écrans passent aux
   classes vf-*, et disparaîtra quand le dernier sera repris.
   ============================================= */

/* =============================================
   0. Les variables de l'ancien thème, réécrites

   Beaucoup d'écrans posent leurs propres couleurs avec var(--vifa-…) : la
   grille de planning, le suivi par sites, les gardes, le planning type. Les
   reprendre un par un aurait été long ; les faire pointer vers les jetons de
   la charte les convertit tous d'un coup.

   L'inversion est cohérente : ce qui servait de fond sombre devient une
   surface claire, et ce qui servait de texte clair devient du texte marine.
   ============================================= */

body.vf-theme {
    --vifa-marine: var(--vf-surface);
    --vifa-marine-light: var(--vf-surface-creusee);
    --vifa-marine-lighter: var(--vf-bordure);
    --vifa-marine-dark: var(--vf-bg);
    --vifa-marine-darker: var(--vf-bg);

    --vifa-cyan: var(--vf-primaire);
    --vifa-cyan-glow: transparent;
    --vifa-cyan-soft: var(--vf-primaire-doux);

    --vifa-cream: var(--vf-texte);
    --vifa-cream-soft: var(--vf-texte-second);
    --vifa-white: var(--vf-surface);
    --vifa-gray: var(--vf-texte-discret);

    --vifa-success: var(--vf-succes);
    --vifa-success-soft: var(--vf-succes-doux);
    --vifa-error: var(--vf-erreur);
    --vifa-error-soft: var(--vf-erreur-doux);
    --vifa-warning: var(--vf-alerte);
    --vifa-warning-soft: var(--vf-alerte-doux);
    --vifa-info: var(--vf-primaire);

    /* Le relief néomorphique n'a pas de sens sur une surface claire : on le
       remplace par l'élévation douce de la charte, et le creux par rien. */
    --neo-shadow-out: var(--vf-elev-1);
    --neo-shadow-out-sm: var(--vf-elev-1);
    --neo-shadow-in: none;
    --neo-shadow-glow: var(--vf-lueur-action);
    --metallic-gradient: none;

    --font-family: var(--vf-police);
    --font-mono: var(--vf-police-donnees);

    /* Espacements, rayons et transitions de l'ancien thème. Les couleurs ne
       suffisaient pas : la grille de planning et plusieurs écrans posent
       aussi leurs marges avec ces variables. Sans elles, les paddings
       tombaient à zéro et le texte venait coller aux bordures. */
    --space-xs: var(--vf-esp-1);
    --space-sm: var(--vf-esp-2);
    --space-md: var(--vf-esp-4);
    --space-lg: var(--vf-esp-6);
    --space-xl: var(--vf-esp-8);
    --space-2xl: var(--vf-esp-12);

    --radius-sm: var(--vf-r-sm);
    --radius-md: var(--vf-r-md);
    --radius-lg: var(--vf-r-lg);
    --radius-xl: var(--vf-r-xl);
    --radius-full: var(--vf-r-pilule);

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* Ces trois-là n'ont jamais été définies nulle part : des écrans les
       utilisent depuis toujours, avec des bordures et des fonds qui
       tombaient dans le vide (suivi par sites, écran de pointage). */
    --vifa-border: var(--vf-bordure);
    --vifa-surface: var(--vf-surface);
    --vifa-text: var(--vf-texte);
    --vifa-danger: var(--vf-erreur);
}

/* =============================================
   1. Cartes et surfaces
   ============================================= */

body.vf-theme .neo-card,
body.vf-theme .neo-card-compact,
body.vf-theme .neo-card-flat,
body.vf-theme .card {
    background: var(--vf-surface);
    border: 1px solid var(--vf-bordure);
    border-radius: var(--vf-r-xl);
    box-shadow: var(--vf-elev-1);
    color: var(--vf-texte);
    padding: var(--vf-esp-5);
}

body.vf-theme .neo-card-compact,
body.vf-theme .card-compact {
    padding: var(--vf-esp-4);
    border-radius: var(--vf-r-lg);
}

body.vf-theme .neo-card-flat {
    box-shadow: none;
}

/* Bootstrap gère son propre découpage en-tête / corps : on ne lui ajoute pas
   un second padding par-dessus celui de .card-body. */
body.vf-theme .card {
    padding: 0;
}

body.vf-theme .card-body {
    padding: var(--vf-esp-5);
}

body.vf-theme .card-header {
    background: var(--vf-surface-creusee);
    border-bottom: 1px solid var(--vf-bordure);
    border-radius: var(--vf-r-xl) var(--vf-r-xl) 0 0;
    padding: var(--vf-esp-4) var(--vf-esp-5);
    font-weight: 600;
    color: var(--vf-texte);
}

body.vf-theme .card-footer {
    background: var(--vf-surface-creusee);
    border-top: 1px solid var(--vf-bordure);
    padding: var(--vf-esp-4) var(--vf-esp-5);
}

/* =============================================
   2. Boutons

   neo-btn nu vaut secondaire ; les variantes suivent la charte.
   ============================================= */

body.vf-theme .neo-btn,
body.vf-theme .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vf-esp-2);
    min-height: 48px;
    padding: 0 var(--vf-esp-6);
    border: 1px solid var(--vf-bordure-forte);
    border-radius: var(--vf-r-md);
    background: var(--vf-surface);
    color: var(--vf-texte);
    font: 600 15px/1 var(--vf-police);
    text-decoration: none;
    box-shadow: none;
    transition: var(--vf-transition);
}

body.vf-theme .neo-btn:hover,
body.vf-theme .btn:hover {
    background: var(--vf-bg);
    border-color: var(--vf-texte-discret);
    color: var(--vf-texte);
}

body.vf-theme .neo-btn-primary,
body.vf-theme .btn-primary {
    background: var(--vf-grad-action);
    border-color: transparent;
    color: var(--vf-sur-primaire);
    box-shadow: var(--vf-lueur-action);
}

body.vf-theme .neo-btn-primary:hover,
body.vf-theme .btn-primary:hover {
    background: var(--vf-primaire-survol);
    border-color: transparent;
    color: var(--vf-sur-primaire);
}

body.vf-theme .neo-btn-ghost,
body.vf-theme .btn-ghost,
body.vf-theme .btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--vf-texte-second);
    padding: 0 var(--vf-esp-4);
}

body.vf-theme .neo-btn-ghost:hover,
body.vf-theme .btn-ghost:hover,
body.vf-theme .btn-link:hover {
    background: var(--vf-surface-creusee);
    border-color: transparent;
    color: var(--vf-texte);
}

body.vf-theme .btn-outline-primary {
    background: var(--vf-primaire-doux);
    border-color: transparent;
    color: var(--vf-primaire-texte);
}

body.vf-theme .btn-outline-primary:hover {
    background: var(--vf-primaire-doux-survol);
    color: var(--vf-primaire-texte);
}

body.vf-theme .btn-outline-secondary {
    background: var(--vf-surface);
    border-color: var(--vf-bordure-forte);
    color: var(--vf-texte-second);
}

body.vf-theme .btn-danger,
body.vf-theme .btn-outline-danger:hover {
    background: var(--vf-erreur);
    border-color: transparent;
    color: #FFFFFF;
}

body.vf-theme .btn-danger:hover {
    background: var(--vf-erreur-survol);
    color: #FFFFFF;
}

body.vf-theme .btn-outline-danger {
    background: var(--vf-erreur-doux);
    border-color: transparent;
    color: var(--vf-erreur-texte);
}

body.vf-theme .btn-success {
    background: var(--vf-succes);
    border-color: transparent;
    color: #FFFFFF;
}

body.vf-theme .btn-secondary {
    background: var(--vf-surface-creusee);
    border-color: transparent;
    color: var(--vf-texte-second);
}

body.vf-theme .neo-btn-sm,
body.vf-theme .btn-sm {
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--vf-r-sm);
    font-size: 13px;
}

body.vf-theme .neo-btn-big,
body.vf-theme .btn-lg {
    min-height: 60px;
    padding: 0 var(--vf-esp-8);
    border-radius: var(--vf-r-lg);
    font-size: 17px;
}

body.vf-theme .neo-btn:disabled,
body.vf-theme .btn:disabled,
body.vf-theme .btn.disabled {
    background: var(--vf-surface-creusee);
    border-color: transparent;
    color: var(--vf-texte-eteint);
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

/* Un bouton de fermeture Bootstrap : la croix reprend la couleur du texte. */
body.vf-theme .btn-close {
    filter: none;
    min-height: 0;
    padding: 0;
}

/* =============================================
   3. Champs de formulaire
   ============================================= */

body.vf-theme .neo-input,
body.vf-theme .neo-select,
body.vf-theme .form-control,
body.vf-theme .form-select {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 var(--vf-esp-4);
    background: var(--vf-surface);
    border: 1px solid var(--vf-bordure-forte);
    border-radius: var(--vf-r-md);
    font: var(--vf-corps);
    color: var(--vf-texte);
    box-shadow: none;
}

body.vf-theme textarea.form-control,
body.vf-theme textarea.neo-input {
    padding: var(--vf-esp-3) var(--vf-esp-4);
    line-height: 1.5;
}

body.vf-theme .neo-input:focus,
body.vf-theme .neo-select:focus,
body.vf-theme .form-control:focus,
body.vf-theme .form-select:focus {
    background: var(--vf-surface);
    border-color: var(--vf-primaire);
    box-shadow: var(--vf-anneau-focus);
    color: var(--vf-texte);
}

body.vf-theme .neo-input::placeholder,
body.vf-theme .form-control::placeholder {
    color: var(--vf-texte-eteint);
}

body.vf-theme .neo-input:disabled,
body.vf-theme .form-control:disabled,
body.vf-theme .form-control[readonly] {
    background: var(--vf-surface-creusee);
    border-color: var(--vf-bordure);
    color: var(--vf-texte-eteint);
}

body.vf-theme .neo-label,
body.vf-theme .form-label {
    display: block;
    font: 600 13px/1.4 var(--vf-police);
    color: var(--vf-texte-second);
    margin-bottom: var(--vf-esp-2);
}

body.vf-theme .form-check-input,
body.vf-theme .neo-checkbox {
    width: 22px;
    height: 22px;
    border-radius: var(--vf-r-xs);
    border: 1.5px solid var(--vf-bordure-forte);
    background-color: var(--vf-surface);
}

body.vf-theme .form-check-input:checked {
    background-color: var(--vf-primaire);
    border-color: var(--vf-primaire);
}

body.vf-theme .form-check-input:focus {
    box-shadow: var(--vf-anneau-focus);
    border-color: var(--vf-primaire);
}

body.vf-theme .input-group-text {
    background: var(--vf-surface-creusee);
    border-color: var(--vf-bordure-forte);
    color: var(--vf-texte-second);
}

body.vf-theme .form-text {
    color: var(--vf-texte-discret);
}

/* =============================================
   4. Puces d'état

   La charte veut un point et un mot : les puces reprennent la forme des
   pastilles de statut.
   ============================================= */

/* Une étiquette, pas une pastille de statut. La charte distingue les deux :
   le badge est discret — un compteur, un mot à côté d'un titre — tandis que
   la pastille de statut (.vf-statut) est plus grande et porte un point.
   Leur donner la même taille faisait des bulles au milieu du texte. */
body.vf-theme .neo-chip,
body.vf-theme .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--vf-esp-1);
    padding: 3px 9px;
    border-radius: var(--vf-r-pilule);
    background: var(--vf-neutre-doux);
    color: var(--vf-neutre-texte);
    font: 600 11.5px/1.5 var(--vf-police);
    border: none;
    vertical-align: middle;
}

body.vf-theme .neo-chip-success,
body.vf-theme .badge.bg-success {
    background: var(--vf-succes-doux) !important;
    color: var(--vf-succes-texte) !important;
}

body.vf-theme .neo-chip-warning,
body.vf-theme .badge.bg-warning {
    background: var(--vf-alerte-doux) !important;
    color: var(--vf-alerte-texte) !important;
}

body.vf-theme .neo-chip-error,
body.vf-theme .badge.bg-danger {
    background: var(--vf-erreur-doux) !important;
    color: var(--vf-erreur-texte) !important;
}

body.vf-theme .neo-chip-info,
body.vf-theme .badge.bg-info,
body.vf-theme .badge.bg-primary {
    background: var(--vf-primaire-doux) !important;
    color: var(--vf-primaire-texte) !important;
}

body.vf-theme .badge.bg-secondary,
body.vf-theme .badge.bg-light,
body.vf-theme .badge.bg-dark {
    background: var(--vf-neutre-doux) !important;
    color: var(--vf-neutre-texte) !important;
}

body.vf-theme .neo-chip-time {
    font-family: var(--vf-police-donnees);
    font-variant-numeric: tabular-nums;
}

/* =============================================
   5. Indicateurs
   ============================================= */

body.vf-theme .neo-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--vf-surface);
    border: 1px solid var(--vf-bordure);
    border-radius: var(--vf-r-lg);
    box-shadow: var(--vf-elev-1);
    padding: var(--vf-esp-5);
    color: var(--vf-texte);
}

body.vf-theme .neo-stat-value {
    font: 700 32px/1.1 var(--vf-police-donnees);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--vf-texte);
}

body.vf-theme .neo-stat-label {
    font: var(--vf-petit);
    color: var(--vf-texte-discret);
}

body.vf-theme .neo-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--vf-esp-2);
    border-radius: var(--vf-r-sm);
    background: var(--vf-primaire-doux);
    color: var(--vf-primaire-texte);
    font-size: 1.2rem;
}

/* =============================================
   6. Listes
   ============================================= */

body.vf-theme .neo-list {
    display: flex;
    flex-direction: column;
    background: var(--vf-surface);
    border: 1px solid var(--vf-bordure);
    border-radius: var(--vf-r-lg);
    overflow: hidden;
}

body.vf-theme .neo-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px var(--vf-esp-4);
    min-height: 48px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--vf-surface-creusee);
    color: var(--vf-texte);
}

body.vf-theme .neo-list-item:first-child {
    border-top: none;
}

body.vf-theme a.neo-list-item:hover {
    background: var(--vf-bg);
}

body.vf-theme .neo-list-item-title {
    font: 600 15px/1.35 var(--vf-police);
    color: var(--vf-texte);
}

body.vf-theme .neo-list-item-subtitle {
    font: var(--vf-petit);
    color: var(--vf-texte-discret);
}

body.vf-theme .neo-list-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--vf-r-sm);
    background: var(--vf-surface-creusee);
    color: var(--vf-texte-discret);
    font-size: 1.2rem;
}

body.vf-theme .list-group-item {
    background: var(--vf-surface);
    border-color: var(--vf-bordure);
    color: var(--vf-texte);
}

/* =============================================
   7. Tableaux
   ============================================= */

body.vf-theme .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--vf-texte);
    --bs-table-border-color: var(--vf-surface-creusee);
    --bs-table-striped-bg: var(--vf-bg);
    --bs-table-striped-color: var(--vf-texte);
    --bs-table-hover-bg: var(--vf-bg);
    --bs-table-hover-color: var(--vf-texte);
    color: var(--vf-texte);
    font-size: 14px;
    margin-bottom: 0;
}

body.vf-theme .table > thead th {
    background: var(--vf-surface-creusee);
    border-bottom: none;
    font: 700 12px/1.4 var(--vf-police);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vf-texte-second);
    padding: var(--vf-esp-3) var(--vf-esp-4);
    white-space: nowrap;
}

body.vf-theme .table > tbody td,
body.vf-theme .table > tbody th {
    padding: 13px var(--vf-esp-4);
    border-color: var(--vf-surface-creusee);
    vertical-align: middle;
}

body.vf-theme .table-responsive {
    border: 1px solid var(--vf-bordure);
    border-radius: var(--vf-r-md);
    overflow-x: auto;
    background: var(--vf-surface);
}

/* =============================================
   8. Messages, alertes, modales
   ============================================= */

body.vf-theme .alert {
    display: flex;
    align-items: flex-start;
    gap: var(--vf-esp-3);
    padding: 14px var(--vf-esp-4);
    border: none;
    border-radius: var(--vf-r-md);
    font-size: 14px;
    line-height: 1.5;
    background: var(--vf-neutre-doux);
    color: var(--vf-neutre-texte);
}

body.vf-theme .alert-success { background: var(--vf-succes-doux); color: var(--vf-succes-texte); }
body.vf-theme .alert-warning { background: var(--vf-alerte-doux); color: var(--vf-alerte-texte); }
body.vf-theme .alert-danger,
body.vf-theme .alert-error   { background: var(--vf-erreur-doux); color: var(--vf-erreur-texte); }
body.vf-theme .alert-info,
body.vf-theme .alert-primary { background: var(--vf-primaire-doux); color: var(--vf-primaire-texte); }

/* Les modales Bootstrap n'ont plus besoin d'être repeintes en sombre : la
   charte leur donne déjà la bonne surface dans les deux thèmes. */
body.vf-theme .modal-content {
    background: var(--vf-surface);
    color: var(--vf-texte);
    border: 1px solid var(--vf-bordure);
    border-radius: var(--vf-r-xl);
    box-shadow: var(--vf-elev-3);
}

body.vf-theme .modal-header,
body.vf-theme .modal-footer {
    border-color: var(--vf-bordure);
}

body.vf-theme .modal-title {
    font: var(--vf-h3);
    color: var(--vf-texte);
}

body.vf-theme .dropdown-menu {
    background: var(--vf-surface);
    border: 1px solid var(--vf-bordure);
    border-radius: var(--vf-r-md);
    box-shadow: var(--vf-elev-2);
    padding: var(--vf-esp-1);
}

body.vf-theme .dropdown-item {
    border-radius: var(--vf-r-sm);
    color: var(--vf-texte);
    padding: 10px var(--vf-esp-3);
}

body.vf-theme .dropdown-item:hover,
body.vf-theme .dropdown-item:focus {
    background: var(--vf-surface-creusee);
    color: var(--vf-texte);
}

body.vf-theme .dropdown-divider {
    border-color: var(--vf-bordure);
}

/* =============================================
   9. Titres et en-têtes d'écran
   ============================================= */

body.vf-theme .neo-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--vf-esp-4);
    margin-bottom: var(--vf-esp-6);
}

body.vf-theme .neo-page-title {
    font: var(--vf-h1);
    letter-spacing: -.015em;
    color: var(--vf-texte);
    margin: 0;
}

body.vf-theme .neo-section-title {
    display: flex;
    align-items: center;
    gap: var(--vf-esp-2);
    font: var(--vf-h3);
    color: var(--vf-texte);
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: var(--vf-esp-4);
}

/* La puce losange devant les titres de section — décor, jamais une icône. */
body.vf-theme .neo-section-title::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: none;
    background: var(--vf-grad-losange);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

body.vf-theme h1, body.vf-theme h2, body.vf-theme h3,
body.vf-theme h4, body.vf-theme h5, body.vf-theme h6 {
    color: var(--vf-texte);
}

/* =============================================
   10. Couleurs utilitaires

   Bootstrap pose !important sur ses utilitaires : il faut le même poids
   pour les ramener dans la charte.
   ============================================= */

body.vf-theme .text-muted,
body.vf-theme .text-gray,
body.vf-theme .text-secondary { color: var(--vf-texte-discret) !important; }
body.vf-theme .text-cream,
body.vf-theme .text-dark,
body.vf-theme .text-white     { color: var(--vf-texte) !important; }
body.vf-theme .text-cyan,
body.vf-theme .text-primary,
body.vf-theme .text-info       { color: var(--vf-primaire-texte) !important; }
body.vf-theme .text-success    { color: var(--vf-succes-texte) !important; }
body.vf-theme .text-danger,
body.vf-theme .text-error      { color: var(--vf-erreur-texte) !important; }
body.vf-theme .text-warning    { color: var(--vf-alerte-texte) !important; }

/* Le halo cyan de l'ancien thème n'a pas de place sur fond clair. */
body.vf-theme .text-glow-cyan  { text-shadow: none; color: var(--vf-primaire-texte); }

body.vf-theme .bg-light,
body.vf-theme .bg-white        { background-color: var(--vf-surface) !important; }
body.vf-theme .bg-dark         { background-color: var(--vf-marine) !important; }

/* =============================================
   11. Grilles et espacements de l'ancien thème
   ============================================= */

body.vf-theme .neo-grid {
    display: grid;
    gap: var(--vf-esp-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

body.vf-theme .neo-grid-2 { grid-template-columns: repeat(2, 1fr); }
body.vf-theme .neo-grid-3 { grid-template-columns: repeat(3, 1fr); }
body.vf-theme .neo-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767.98px) {
    body.vf-theme .neo-grid-2,
    body.vf-theme .neo-grid-3,
    body.vf-theme .neo-grid-4 { grid-template-columns: 1fr; }
}

/* Un enfant de grille doit pouvoir rétrécir, sinon un tableau large
   repousse toute la page (voir la note de vifavion-charte.css). */
body.vf-theme .neo-grid > *,
body.vf-theme .neo-flex > * {
    min-width: 0;
}

body.vf-theme .neo-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--vf-bordure);
    border-top-color: var(--vf-primaire);
    border-radius: 50%;
    animation: vf-tourne .8s linear infinite;
}

@keyframes vf-tourne {
    to { transform: rotate(360deg); }
}

/* =============================================
   12. Coquille du parcours salarié

   La barre du haut et la barre d'onglets du bas gardent leurs classes ; seule
   leur allure change. La barre d'onglets suit la charte : verre dépoli,
   losange sur l'onglet actif.
   ============================================= */

body.vf-theme .navbar {
    background: var(--vf-surface) !important;
    border-bottom: 1px solid var(--vf-bordure);
    padding: var(--vf-esp-3) 0;
}

body.vf-theme .navbar .nav-link,
body.vf-theme .navbar .navbar-brand {
    color: var(--vf-texte-second);
}

body.vf-theme .navbar .nav-link:hover,
body.vf-theme .navbar .nav-link.active {
    color: var(--vf-primaire);
}

/* Menu replié (téléphone) : les onglets du bas portent déjà Accueil, Planning,
   Historique, Wiki et Profil ; ici ne restent que les entrées du compte, en
   liste plate, séparées de la marque par un filet. */
@media (max-width: 767.98px) {
    body.vf-theme .navbar-collapse {
        margin-top: var(--vf-esp-3);
        padding-top: var(--vf-esp-2);
        border-top: 1px solid var(--vf-bordure);
    }

    body.vf-theme .navbar .nav-mobile-user {
        padding: var(--vf-esp-2) 0;
        color: var(--vf-texte);
        font-weight: 600;
    }

    body.vf-theme .navbar .nav-mobile-logout {
        width: 100%;
        text-align: left;
        background: none;
        border: 0;
    }
}

/* Le bouton du menu replié : Bootstrap le dessine blanc (navbar-dark), il
   disparaissait donc sur la barre claire. Trois traits de la couleur du
   texte secondaire, dans chaque thème. */
body.vf-theme .navbar-toggler {
    border-color: var(--vf-bordure);
}

body.vf-theme .navbar-toggler:focus {
    box-shadow: 0 0 0 2px var(--vf-primaire);
}

body.vf-theme .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%234A5570' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

:root[data-theme="dark"] body.vf-theme .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23A7B0CE' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.vf-theme .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23A7B0CE' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
}

/* Le mot de la marque est blanc : sur une barre claire, il faut la version
   marine. Le filtre l'assombrit sans toucher au losange, qui garde son
   dégradé. */
body.vf-theme .navbar-brand img[alt="VIFAVION"] {
    filter: brightness(0) saturate(100%) invert(9%) sepia(43%)
            saturate(4066%) hue-rotate(224deg) brightness(94%) contrast(102%);
}

:root[data-theme="dark"] body.vf-theme .navbar-brand img[alt="VIFAVION"] {
    filter: none;
}

body.vf-theme .footer {
    background: var(--vf-surface) !important;
    border-top: 1px solid var(--vf-bordure) !important;
    color: var(--vf-texte-discret);
}

body.vf-theme .footer span,
body.vf-theme .footer a {
    color: var(--vf-texte-discret) !important;
}

/* Barre d'onglets du bas. Elle est fixée à l'écran : la page réserve sa
   hauteur, sinon le dernier bouton reste dessous. Cette réserve vivait dans
   l'ancien main.css, parti avec le thème. */
@media (max-width: 767.98px) {
    body.vf-theme.has-bottom-nav {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

body.vf-theme .neo-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 10px var(--vf-esp-2) calc(12px + env(safe-area-inset-bottom));
    background: var(--vf-verre);
    backdrop-filter: var(--vf-flou-verre);
    -webkit-backdrop-filter: var(--vf-flou-verre);
    border-top: 1px solid var(--vf-bordure);
    box-shadow: none;
}

body.vf-theme .neo-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vf-esp-1);
    min-height: 48px;
    padding: var(--vf-esp-1) 0;
    font: 500 10px/1.2 var(--vf-police);
    color: var(--vf-texte-discret);
    text-decoration: none;
}

body.vf-theme .neo-nav-item i {
    font-size: 1.25rem;
    color: var(--vf-bordure-forte);
}

body.vf-theme .neo-nav-item.active {
    color: var(--vf-primaire);
    font-weight: 700;
    background: transparent;
}

body.vf-theme .neo-nav-item.active i {
    /* L'icône active porte le dégradé bleu → cyan de la marque. */
    background: var(--vf-grad-losange);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* =============================================
   13. Ce qui restait dans l'ancien thème

   Utilitaires de mise en page et quelques composants que les écrans
   utilisent encore, repris ici avec les jetons de la charte. C'est ce qui a
   permis de retirer l'ancienne feuille de thème.
   ============================================= */

/* ---------- Mise en page ---------- */
body.vf-theme .neo-flex { display: flex; }
body.vf-theme .neo-flex-col { flex-direction: column; }
body.vf-theme .neo-items-center { align-items: center; }
body.vf-theme .neo-items-start { align-items: flex-start; }
body.vf-theme .neo-justify-between { justify-content: space-between; }
body.vf-theme .neo-justify-center { justify-content: center; }
body.vf-theme .neo-justify-end { justify-content: flex-end; }

body.vf-theme .neo-gap-xs { gap: var(--vf-esp-1); }
body.vf-theme .neo-gap-sm { gap: var(--vf-esp-2); }
body.vf-theme .neo-gap-md { gap: var(--vf-esp-4); }
body.vf-theme .neo-gap-lg { gap: var(--vf-esp-6); }
body.vf-theme .neo-gap-xl { gap: var(--vf-esp-8); }

body.vf-theme .neo-mb-xs { margin-bottom: var(--vf-esp-1); }
body.vf-theme .neo-mb-sm { margin-bottom: var(--vf-esp-2); }
body.vf-theme .neo-mb-md { margin-bottom: var(--vf-esp-4); }
body.vf-theme .neo-mb-lg { margin-bottom: var(--vf-esp-6); }
body.vf-theme .neo-mb-xl { margin-bottom: var(--vf-esp-8); }

body.vf-theme .neo-mt-xs { margin-top: var(--vf-esp-1); }
body.vf-theme .neo-mt-sm { margin-top: var(--vf-esp-2); }
body.vf-theme .neo-mt-md { margin-top: var(--vf-esp-4); }
body.vf-theme .neo-mt-lg { margin-top: var(--vf-esp-6); }
body.vf-theme .neo-mt-xl { margin-top: var(--vf-esp-8); }

body.vf-theme .neo-p-sm { padding: var(--vf-esp-2); }
body.vf-theme .neo-p-md { padding: var(--vf-esp-4); }
body.vf-theme .neo-p-lg { padding: var(--vf-esp-6); }

/* ---------- Lignes de liste : le contenu et l'action ---------- */
body.vf-theme .neo-list-item-content {
    flex: 1;
    min-width: 0;
}

body.vf-theme .neo-list-item-action {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--vf-esp-2);
}

/* ---------- Carte de journée (planning du salarié) ---------- */
body.vf-theme .neo-day-card {
    background: var(--vf-surface);
    border: 1px solid var(--vf-bordure);
    border-radius: var(--vf-r-lg);
    box-shadow: var(--vf-elev-1);
    padding: var(--vf-esp-4);
}

body.vf-theme .neo-day-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vf-esp-2);
    margin-bottom: var(--vf-esp-2);
}

body.vf-theme .neo-day-card-title {
    font: 600 15px/1.35 var(--vf-police);
    color: var(--vf-texte);
}

body.vf-theme .neo-day-card-time,
body.vf-theme .neo-day-card-site {
    font: var(--vf-petit);
    color: var(--vf-texte-discret);
}

body.vf-theme .neo-day-card-time {
    font-family: var(--vf-police-donnees);
    font-variant-numeric: tabular-nums;
}

/* ---------- Confirmation plein écran après un pointage ----------
   Le retour qui suit un pointage : il dit ce qui vient d'être enregistré,
   et se referme tout seul. */
body.vf-theme .neo-hud-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--vf-esp-5);
    background: rgba(11, 19, 81, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.vf-theme .neo-hud-overlay.active { display: flex; }

body.vf-theme .neo-hud-content {
    width: 100%;
    max-width: 340px;
    padding: var(--vf-esp-8) var(--vf-esp-6);
    background: var(--vf-surface);
    border-radius: var(--vf-r-xl);
    box-shadow: var(--vf-elev-3);
    text-align: center;
}

body.vf-theme .neo-hud-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--vf-esp-4);
    border-radius: 50%;
    background: var(--vf-succes-doux);
    color: var(--vf-succes-texte);
    font-size: 1.75rem;
}

body.vf-theme .neo-hud-title {
    font: var(--vf-h3);
    color: var(--vf-texte);
    margin-bottom: var(--vf-esp-2);
}

body.vf-theme .neo-hud-subtitle {
    font: var(--vf-petit);
    color: var(--vf-texte-discret);
}

body.vf-theme .neo-hud-time {
    font: 700 32px/1.1 var(--vf-police-donnees);
    font-variant-numeric: tabular-nums;
    color: var(--vf-texte);
    margin: var(--vf-esp-3) 0;
}

/* ---------- Messages passagers ---------- */
body.vf-theme .neo-toast-stack {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1085;
    display: flex;
    flex-direction: column;
    gap: var(--vf-esp-2);
    width: calc(100% - 2 * var(--vf-esp-5));
    max-width: 420px;
}

body.vf-theme .neo-toast {
    display: flex;
    align-items: center;
    gap: var(--vf-esp-3);
    padding: 14px var(--vf-esp-4);
    border-radius: var(--vf-r-md);
    background: var(--vf-marine);
    color: var(--vf-marine-texte);
    box-shadow: var(--vf-elev-2);
    font-size: 14px;
}

body.vf-theme .neo-toast-icon { color: var(--vf-cyan); flex: none; }
body.vf-theme .neo-toast-body { flex: 1; min-width: 0; }

body.vf-theme .neo-toast-close {
    flex: none;
    border: none;
    background: transparent;
    color: var(--vf-marine-texte-second);
    cursor: pointer;
}

/* ---------- Animations ---------- */
body.vf-theme .neo-pulse { animation: vf-battement 1.8s ease-in-out infinite; }

@keyframes vf-battement {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

body.vf-theme .neo-checkmark-animate { animation: vf-apparition .25s ease-out; }

@keyframes vf-apparition {
    from { opacity: 0; transform: scale(.9); }
    to { opacity: 1; transform: none; }
}

/* Le halo cyan de l'ancien thème n'a pas de place sur une surface claire. */
body.vf-theme .glow-cyan { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    body.vf-theme .neo-pulse,
    body.vf-theme .neo-checkmark-animate { animation: none; }
}

/* Le thème sombre choisi par le système, sans réglage explicite, doit lui
   aussi laisser le mot blanc : sinon il disparaît sur la barre marine. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.vf-theme .navbar-brand img[alt="VIFAVION"] {
        filter: none;
    }
}