/* =============================================
   VIFAVION — Composants de la charte

   Le vocabulaire commun aux écrans : boutons, champs, contrôles, statuts,
   listes, tableaux, retours, et les blocs propres au métier (bandeau marine,
   jauge de semaine, barre d'onglets, barre latérale).

   Toutes les valeurs viennent de vifavion-charte.css. Si une couleur est
   écrite en dur ici, c'est une erreur : le thème sombre ne suivra pas.

   Préfixe vf- pour ne jamais entrer en collision avec Bootstrap.
   ============================================= */

/* =============================================
   1. Boutons

   Hauteur 48, rayon 12. Un seul bouton principal par écran. Une action
   destructive n'est jamais le focus par défaut.
   ============================================= */

.vf-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 transparent;
    border-radius: var(--vf-r-md);
    font: 600 15px/1 var(--vf-police);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--vf-transition), box-shadow .2s ease;
}

.vf-btn:hover {
    text-decoration: none;
}

.vf-btn--principal {
    background: var(--vf-grad-action);
    color: var(--vf-sur-primaire);
    box-shadow: var(--vf-lueur-action);
}

.vf-btn--principal:not(:disabled):hover {
    background: var(--vf-primaire-survol);
    color: var(--vf-sur-primaire);
}

.vf-btn--principal:not(:disabled):active {
    background: var(--vf-primaire-actif);
}

/* En sombre le dégradé s'efface : l'aplat suffit et la lueur disparaît.
   :not(:disabled) est indispensable — sans lui ces règles, plus spécifiques,
   repeignent en bleu un bouton désactivé et le rendent illisible. */
:root[data-theme="dark"] .vf-btn--principal:not(:disabled),
:root[data-theme="dark"] .vf-btn--principal:not(:disabled):hover {
    background: var(--vf-primaire);
    box-shadow: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .vf-btn--principal:not(:disabled),
    :root:not([data-theme="light"]) .vf-btn--principal:not(:disabled):hover {
        background: var(--vf-primaire);
        box-shadow: none;
    }
}

.vf-btn--secondaire {
    background: var(--vf-surface);
    border-color: var(--vf-bordure-forte);
    color: var(--vf-texte);
}

.vf-btn--secondaire:not(:disabled):hover {
    background: var(--vf-bg);
    border-color: var(--vf-texte-discret);
    color: var(--vf-texte);
}

.vf-btn--tonal {
    background: var(--vf-primaire-doux);
    color: var(--vf-primaire-texte);
}

.vf-btn--tonal:not(:disabled):hover {
    background: var(--vf-primaire-doux-survol);
    color: var(--vf-primaire-texte);
}

.vf-btn--fantome {
    background: transparent;
    color: var(--vf-texte-second);
    padding: 0 var(--vf-esp-4);
}

.vf-btn--fantome:not(:disabled):hover {
    background: var(--vf-surface-creusee);
    color: var(--vf-texte);
}

.vf-btn--destructif {
    background: var(--vf-erreur);
    color: #FFFFFF;
}

.vf-btn--destructif:not(:disabled):hover {
    background: var(--vf-erreur-survol);
    color: #FFFFFF;
}

/* Sur un fond marine, l'action principale passe en cyan : le bleu n'y
   ressort pas assez. Le texte devient marine très sombre. */
.vf-btn--cyan {
    background: var(--vf-cyan);
    color: var(--vf-sur-cyan);
    box-shadow: none;
}

.vf-btn--cyan:not(:disabled):hover {
    background: #3DEBF2;
    color: var(--vf-sur-cyan);
}

/* Export : vert, reconnaissable d'un écran à l'autre. */
.vf-btn--export {
    background: var(--vf-succes-doux);
    border-color: var(--vf-succes);
    color: var(--vf-succes-texte);
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
}

.vf-btn:disabled,
.vf-btn[aria-disabled="true"] {
    background: var(--vf-surface-creusee);
    border-color: transparent;
    color: var(--vf-texte-eteint);
    box-shadow: none;
    cursor: not-allowed;
}

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

/* 60 px : l'action principale d'un écran mobile, au pouce. */
.vf-btn--lg {
    min-height: 60px;
    padding: 0 var(--vf-esp-8);
    border-radius: var(--vf-r-lg);
    font-size: 17px;
}

.vf-btn--bloc {
    display: flex;
    width: 100%;
}

/* =============================================
   2. Champs de formulaire
   ============================================= */

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

.vf-champ {
    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);
    transition: var(--vf-transition), box-shadow .2s ease;
}

textarea.vf-champ {
    padding: var(--vf-esp-3) var(--vf-esp-4);
    min-height: 96px;
    line-height: 1.5;
}

.vf-champ::placeholder {
    color: var(--vf-texte-eteint);
}

.vf-champ:focus {
    border-color: var(--vf-primaire);
    box-shadow: var(--vf-anneau-focus);
    outline: none;
}

.vf-champ:disabled {
    background: var(--vf-surface-creusee);
    border-color: var(--vf-bordure);
    color: var(--vf-texte-eteint);
    cursor: not-allowed;
}

.vf-champ[aria-invalid="true"],
.vf-champ--erreur {
    border-color: var(--vf-erreur);
}

/* Un message d'erreur donne la solution, pas le diagnostic :
   « Ajoutez la partie après le @ pour continuer. » */
.vf-champ-erreur {
    margin-top: var(--vf-esp-2);
    font: var(--vf-petit);
    color: var(--vf-erreur-texte);
}

.vf-champ-aide {
    margin-top: var(--vf-esp-2);
    font: var(--vf-petit);
    color: var(--vf-texte-discret);
}

/* =============================================
   3. Contrôles
   ============================================= */

/* Interrupteur 52 × 32 */
.vf-interrupteur {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 32px;
    flex: none;
}

.vf-interrupteur input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.vf-interrupteur-piste {
    position: absolute;
    inset: 0;
    background: var(--vf-bordure-forte);
    border-radius: var(--vf-r-pilule);
    transition: background-color .2s ease;
    pointer-events: none;
}

.vf-interrupteur-piste::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform .2s ease;
}

.vf-interrupteur input:checked + .vf-interrupteur-piste {
    background: var(--vf-primaire);
}

.vf-interrupteur input:checked + .vf-interrupteur-piste::after {
    transform: translateX(20px);
}

.vf-interrupteur input:focus-visible + .vf-interrupteur-piste {
    box-shadow: var(--vf-anneau-focus);
}

/* Case à cocher et bouton radio — 22 px, cible étendue par le libellé. */
.vf-case,
.vf-radio {
    width: 22px;
    height: 22px;
    flex: none;
    margin: 0;
    accent-color: var(--vf-primaire);
    cursor: pointer;
}

.vf-case {
    border-radius: var(--vf-r-xs);
}

/* Contrôle segmenté */
.vf-segments {
    display: inline-flex;
    gap: var(--vf-esp-1);
    padding: var(--vf-esp-1);
    background: var(--vf-surface-creusee);
    border-radius: var(--vf-r-md);
}

.vf-segment {
    padding: 10px var(--vf-esp-4);
    border: none;
    border-radius: var(--vf-r-sm);
    background: transparent;
    font: 500 14px/1 var(--vf-police);
    color: var(--vf-texte-discret);
    cursor: pointer;
    text-decoration: none;
    transition: var(--vf-transition);
}

.vf-segment--actif {
    background: var(--vf-surface);
    color: var(--vf-texte);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(11, 19, 81, .08);
}

/* Chips de filtre */
.vf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vf-esp-2);
}

.vf-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--vf-esp-2);
    padding: var(--vf-esp-2) 14px;
    background: var(--vf-surface);
    border: 1px solid var(--vf-bordure-forte);
    border-radius: var(--vf-r-pilule);
    font: 500 13px/1.4 var(--vf-police);
    color: var(--vf-texte-second);
    text-decoration: none;
    cursor: pointer;
    transition: var(--vf-transition);
}

.vf-chip:hover {
    border-color: var(--vf-texte-discret);
    color: var(--vf-texte);
}

.vf-chip--actif {
    background: var(--vf-marine);
    border-color: var(--vf-marine);
    color: #FFFFFF;
    font-weight: 600;
}

:root[data-theme="dark"] .vf-chip--actif {
    background: var(--vf-primaire);
    border-color: var(--vf-primaire);
    color: var(--vf-sur-primaire);
}

/* =============================================
   4. Statuts, badges, avatars

   Un point et un mot. La couleur seule ne dit jamais l'état.
   ============================================= */

.vf-statut {
    display: inline-flex;
    align-items: center;
    gap: var(--vf-esp-2);
    padding: 7px 14px;
    border-radius: var(--vf-r-pilule);
    font: 600 13px/1 var(--vf-police);
    background: var(--vf-neutre-doux);
    color: var(--vf-neutre-texte);
    white-space: nowrap;
}

.vf-statut::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vf-neutre);
    flex: none;
}

.vf-statut--succes {
    background: var(--vf-succes-doux);
    color: var(--vf-succes-texte);
}

.vf-statut--succes::before {
    background: var(--vf-succes);
}

.vf-statut--info {
    background: var(--vf-primaire-doux);
    color: var(--vf-primaire-texte);
}

.vf-statut--info::before {
    background: var(--vf-primaire);
}

.vf-statut--alerte {
    background: var(--vf-alerte-doux);
    color: var(--vf-alerte-texte);
}

.vf-statut--alerte::before {
    background: var(--vf-alerte);
}

.vf-statut--erreur {
    background: var(--vf-erreur-doux);
    color: var(--vf-erreur-texte);
}

.vf-statut--erreur::before {
    background: var(--vf-erreur);
}

/* Compteur ambre : nombre d'éléments en attente. */
.vf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 2px 7px;
    background: var(--vf-ambre);
    border-radius: var(--vf-r-pilule);
    font: 700 11px/1.4 var(--vf-police);
    color: #3D2E0C;
}

.vf-badge--interim {
    background: var(--vf-primaire-doux);
    color: var(--vf-primaire-texte);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Avatars à initiales — la teinte est décorative, elle ne porte aucun sens. */
.vf-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--vf-primaire-doux);
    color: var(--vf-primaire-texte);
    font: 700 14px/1 var(--vf-police);
    flex: none;
    text-transform: uppercase;
}

.vf-avatar--sm {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.vf-avatar--lg {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.vf-avatar--teinte-2 {
    background: var(--vf-succes-doux);
    color: var(--vf-succes-texte);
}

.vf-avatar--teinte-3 {
    background: var(--vf-alerte-doux);
    color: var(--vf-alerte-texte);
}

.vf-avatar--teinte-4 {
    background: var(--vf-neutre-doux);
    color: var(--vf-neutre-texte);
}

.vf-avatar--marine {
    background: var(--vf-marine-avatar);
    color: var(--vf-marine-accent);
}

/* Pastille de présence, posée en bas à droite de l'avatar. */
.vf-avatar-presence {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--vf-succes);
    border: 2px solid var(--vf-surface);
}

/* =============================================
   5. Cartes et listes
   ============================================= */

.vf-carte {
    background: var(--vf-surface);
    border: 1px solid var(--vf-bordure);
    border-radius: var(--vf-r-xl);
    box-shadow: var(--vf-elev-1);
}

.vf-carte-corps {
    padding: var(--vf-esp-5);
}

.vf-carte-titre {
    font: var(--vf-h3);
    margin: 0 0 var(--vf-esp-4);
    display: flex;
    align-items: center;
    gap: var(--vf-esp-2);
}

.vf-liste {
    background: var(--vf-surface);
    border: 1px solid var(--vf-bordure);
    border-radius: var(--vf-r-lg);
    overflow: hidden;
}

.vf-ligne {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px var(--vf-esp-4);
    min-height: 48px;
    text-decoration: none;
    color: inherit;
    transition: var(--vf-transition);
}

.vf-ligne + .vf-ligne {
    border-top: 1px solid var(--vf-surface-creusee);
}

a.vf-ligne:hover {
    background: var(--vf-bg);
    color: inherit;
    text-decoration: none;
}

.vf-ligne-texte {
    min-width: 0;
    flex: 1;
}

/* display: block explicite — ces blocs sont souvent écrits en <span> à
   l'intérieur d'un lien, où ils resteraient sinon sur la même ligne. */
.vf-ligne-titre {
    display: block;
    font: 600 15px/1.35 var(--vf-police);
    color: var(--vf-texte);
}

.vf-ligne-meta {
    display: block;
    font: var(--vf-petit);
    color: var(--vf-texte-discret);
    margin-top: 2px;
}

/* Valeur alignée à droite : durée, heure, écart. */
.vf-ligne-valeur {
    font: 500 15px/1 var(--vf-police-donnees);
    font-variant-numeric: tabular-nums;
    color: var(--vf-texte);
    text-align: right;
    flex: none;
}

/* Une ligne qui demande une décision porte un liseré ambre. */
.vf-ligne--anomalie {
    border-left: 3px solid var(--vf-alerte);
}

.vf-ligne--anomalie .vf-ligne-meta {
    color: var(--vf-alerte-texte);
}

/* =============================================
   6. Tableau de données

   Chiffres tabulaires, durées alignées à droite, lignes de 44 px.
   ============================================= */

.vf-tableau-cadre {
    border: 1px solid var(--vf-bordure);
    border-radius: var(--vf-r-md);
    overflow: hidden;
    background: var(--vf-surface);
}

/* Un tableau large défile dans son cadre, jamais la page entière. */
.vf-tableau-defile {
    overflow-x: auto;
}

.vf-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.vf-tableau th {
    padding: var(--vf-esp-3) var(--vf-esp-4);
    background: var(--vf-surface-creusee);
    font: 700 12px/1.4 var(--vf-police);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vf-texte-second);
    text-align: left;
    white-space: nowrap;
}

.vf-tableau td {
    padding: 13px var(--vf-esp-4);
    border-top: 1px solid var(--vf-surface-creusee);
    color: var(--vf-texte);
}

.vf-tableau tbody tr:nth-child(even) {
    background: var(--vf-bg);
}

.vf-tableau .vf-num {
    font-family: var(--vf-police-donnees);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.vf-tableau tfoot td {
    background: var(--vf-surface-creusee);
    font-weight: 600;
}

/* Écarts : le signe porte déjà le sens, la couleur ne fait que l'appuyer. */
.vf-ecart-positif { color: var(--vf-alerte-texte); }
.vf-ecart-negatif { color: var(--vf-erreur-texte); }

/* =============================================
   7. Retours à l'utilisateur
   ============================================= */

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

.vf-message::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.vf-message--succes {
    background: var(--vf-succes-doux);
    color: var(--vf-succes-texte);
}

.vf-message--alerte {
    background: var(--vf-alerte-doux);
    color: var(--vf-alerte-texte);
}

.vf-message--erreur {
    background: var(--vf-erreur-doux);
    color: var(--vf-erreur-texte);
}

.vf-message--info {
    background: var(--vf-primaire-doux);
    color: var(--vf-primaire-texte);
}

.vf-vide {
    text-align: center;
    padding: var(--vf-esp-12) var(--vf-esp-5);
}

.vf-vide-titre {
    display: block;
    font: 600 15px/1.4 var(--vf-police);
    color: var(--vf-texte);
    margin-bottom: var(--vf-esp-2);
}

.vf-vide-texte {
    font-size: 14px;
    color: var(--vf-texte-discret);
    max-width: 240px;
    margin: 0 auto;
}

/* =============================================
   8. Blocs marine — bandeau « en direct », cartes de site

   Ces surfaces restent marine dans les deux thèmes : c'est l'identité.
   Un seul filigrane losange par écran, au maximum 16 % d'opacité.
   ============================================= */

.vf-hero {
    position: relative;
    overflow: hidden;
    z-index: 0;
    background: var(--vf-grad-hero);
    color: var(--vf-marine-texte);
    border-radius: var(--vf-r-xl);
    padding: var(--vf-esp-6);
}

.vf-hero--pleine {
    border-radius: 0;
}

.vf-hero-filigrane {
    position: absolute;
    right: -60px;
    top: -60px;
    width: 260px;
    height: 260px;
    background: linear-gradient(135deg, rgba(22, 144, 251, .16), rgba(15, 227, 236, .08));
    z-index: -1;
}

.vf-hero .vf-surtitre {
    color: var(--vf-cyan);
}

.vf-hero-chiffre {
    font: var(--vf-display);
    letter-spacing: -.02em;
    color: #FFFFFF;
}

.vf-hero-stat-label {
    display: block;
    font: var(--vf-petit);
    color: var(--vf-marine-texte-discret);
}

.vf-hero-stat-valeur {
    display: block;
    font: 600 17px/1.2 var(--vf-police-donnees);
    font-variant-numeric: tabular-nums;
    color: var(--vf-marine-texte);
}

.vf-hero-stat-valeur--alerte {
    color: var(--vf-ambre);
}

/* Carte posée sur une surface marine. */
.vf-carte-marine {
    background: var(--vf-marine-surface);
    border: 1px solid var(--vf-marine-bordure);
    border-radius: var(--vf-r-lg);
    padding: var(--vf-esp-4);
    color: var(--vf-marine-texte);
}

/* Jauge d'avancement — dégradé bleu vers cyan sur fond marine. */
.vf-jauge {
    height: 8px;
    border-radius: var(--vf-r-pilule);
    background: var(--vf-marine-relief);
    overflow: hidden;
}

.vf-jauge-remplissage {
    height: 100%;
    background: var(--vf-grad-direct);
    border-radius: inherit;
}

/* =============================================
   9. Navigation
   ============================================= */

/* Barre latérale web — 240 px, marine, filet cyan sur l'élément actif. */
.vf-sidebar {
    width: 240px;
    background: var(--vf-marine);
    color: var(--vf-marine-texte-second);
    padding: var(--vf-esp-5) var(--vf-esp-3);
}

.vf-sidebar-groupe {
    font: var(--vf-surtitre);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #5A65A0;
    padding: 0 var(--vf-esp-3);
    margin: var(--vf-esp-5) 0 var(--vf-esp-2);
}

.vf-sidebar-lien {
    display: flex;
    align-items: center;
    gap: var(--vf-esp-3);
    padding: 11px var(--vf-esp-3);
    border-radius: 10px;
    border-left: 2px solid transparent;
    font: 400 14px/1.3 var(--vf-police);
    color: var(--vf-marine-texte-second);
    text-decoration: none;
    transition: var(--vf-transition);
}

.vf-sidebar-lien:hover {
    background: var(--vf-marine-relief);
    color: var(--vf-marine-texte);
    text-decoration: none;
}

.vf-sidebar-lien--actif {
    background: var(--vf-marine-relief);
    border-left-color: var(--vf-cyan);
    color: #FFFFFF;
    font-weight: 600;
}

.vf-sidebar-lien .vf-badge {
    margin-left: auto;
}

/* Barre d'onglets mobile — verre dépoli, cinq colonnes, l'action de
   validation au centre en losange surélevé. La marge basse de 30 px laisse
   passer l'indicateur d'accueil des iPhone. */
.vf-onglets {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
    padding: 9px 6px calc(30px + 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);
}

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

.vf-onglet:hover {
    text-decoration: none;
    color: var(--vf-texte-discret);
}

/* Les icônes sont en trait : l'épaisseur, et pas seulement la couleur, dit
   l'onglet actif — un écran mal calibré ne trahit pas l'information. */
.vf-onglet-trait {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vf-onglet--actif {
    color: var(--vf-primaire);
    font-weight: 700;
}

.vf-onglet--actif .vf-onglet-trait {
    stroke-width: 2.2;
}

/* ---------- Le losange central : Validations ---------- */
.vf-onglet--centre {
    gap: 5px;
    padding: 0;
}

.vf-onglet--centre > span:last-child {
    margin-top: -2px;
}

.vf-losange-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-top: -30px;
    color: #FFFFFF;
}

/* La couche extérieure reprend la couleur du fond : elle détoure le losange
   sur la barre, sans quoi il se confondrait avec elle. */
.vf-losange-nav-decoupe {
    position: absolute;
    inset: 0;
    transform: rotate(45deg);
    border-radius: 16px;
    background: var(--vf-bg);
}

.vf-losange-nav-fond {
    position: absolute;
    inset: 4px;
    transform: rotate(45deg);
    border-radius: 13px;
    background: var(--vf-grad-losange);
    box-shadow: 0 8px 20px rgba(22, 144, 251, .32);
}

.vf-onglet--actif .vf-losange-nav-fond {
    background: var(--vf-grad-action);
    box-shadow: 0 10px 22px rgba(22, 144, 251, .45);
}

/* La coche ne pivote pas : seul le losange est incliné. */
.vf-losange-nav-coche {
    position: relative;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vf-losange-nav-badge {
    position: absolute;
    top: 0;
    right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border: 2px solid var(--vf-bg);
    border-radius: var(--vf-r-pilule);
    background: var(--vf-ambre);
    color: #3D2E0C;
    font: 800 10px/1 var(--vf-police);
}

/* La page laisse la place à la barre d'onglets. */
.vf-avec-onglets {
    /* La barre mesure 89 px avec le losange : la réserve la dépasse. */
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

/* =============================================
   10. En-têtes d'écran
   ============================================= */

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

.vf-entete-titre {
    font: var(--vf-h1);
    letter-spacing: -.015em;
    margin: 0;
}

.vf-entete-soustitre {
    font: var(--vf-petit);
    color: var(--vf-texte-discret);
    margin-top: var(--vf-esp-1);
}

/* Barre de retour des écrans de détail. */
.vf-nav-retour {
    display: flex;
    align-items: center;
    gap: var(--vf-esp-3);
    padding: var(--vf-esp-3) 0;
}

.vf-nav-retour-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--vf-surface);
    border: 1px solid var(--vf-bordure-forte);
    color: var(--vf-texte-second);
    text-decoration: none;
    flex: none;
}

/* =============================================
   11. Indicateurs
   ============================================= */

.vf-kpi {
    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);
}

.vf-kpi-label {
    display: flex;
    align-items: center;
    gap: var(--vf-esp-2);
    font: var(--vf-petit);
    color: var(--vf-texte-discret);
}

.vf-kpi-valeur {
    font: 700 32px/1.1 var(--vf-police-donnees);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--vf-texte);
    margin: var(--vf-esp-2) 0 var(--vf-esp-1);
}

.vf-kpi-contexte {
    font: var(--vf-petit);
    color: var(--vf-texte-discret);
}

.vf-point {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vf-neutre);
    flex: none;
}

.vf-point--succes { background: var(--vf-succes); }
.vf-point--alerte { background: var(--vf-alerte); }
.vf-point--erreur { background: var(--vf-erreur); }

/* =============================================
   12. Utilitaires de mise en page
   ============================================= */

.vf-pile {
    display: flex;
    flex-direction: column;
    gap: var(--vf-esp-4);
}

.vf-pile--serree { gap: var(--vf-esp-2); }
.vf-pile--large { gap: var(--vf-esp-6); }

/* Un rang revient à la ligne par défaut : c'est un utilitaire générique, et
   sur un téléphone de 402 px un titre suivi d'un bouton ne tient pas côte à
   côte. Les composants qui doivent rester sur une seule ligne (.vf-ligne)
   ont leur propre classe. Utiliser --fixe seulement quand le retour est
   réellement interdit. */
.vf-rang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vf-esp-3);
}

.vf-rang--fixe { flex-wrap: nowrap; }
.vf-rang--espace { justify-content: space-between; }
.vf-pousse { margin-left: auto; }

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

.vf-ecran {
    padding: var(--vf-esp-5);
}

@media (min-width: 992px) {
    .vf-ecran { padding: var(--vf-esp-8); }
}

/* =============================================
   13. Bouton de pointage

   Règle d'or de la charte : c'est toujours l'élément le plus grand de
   l'écran, toujours centré, et il annonce toujours ce qui va se passer.

   La sortie demande un appui maintenu, l'arrivée non — une erreur de doigt
   ne peut jamais faire perdre des heures à quelqu'un.
   ============================================= */

.vf-pointage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--vf-esp-1);
    width: 188px;
    height: 188px;
    border: none;
    border-radius: 50%;
    background: var(--vf-grad-action);
    box-shadow: var(--vf-lueur-pointage);
    color: #FFFFFF;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    /* Un appui maintenu ne doit pas ouvrir le menu contextuel du téléphone
       ni sélectionner le libellé. */
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: manipulation;
}

.vf-pointage-libelle {
    font: 700 26px/1.1 var(--vf-police-donnees);
    letter-spacing: -.01em;
}

.vf-pointage-aide {
    font: 400 13px/1.3 var(--vf-police);
    opacity: .8;
    max-width: 140px;
    text-align: center;
}

/* Sortie : la teinte change, et l'appui doit être tenu. */
.vf-pointage--sortie {
    background: linear-gradient(180deg, #16225A, #0B1351);
    box-shadow: 0 12px 32px rgba(11, 19, 81, .28);
}

/* L'anneau qui se remplit pendant l'appui : il montre le temps qu'il reste
   à tenir, plutôt que de laisser le doigt deviner. */
.vf-pointage-anneau {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--vf-cyan) calc(var(--vf-appui, 0) * 1%), transparent 0);
    opacity: .55;
    pointer-events: none;
}

.vf-pointage:disabled {
    opacity: .5;
    cursor: progress;
}

.vf-pointage-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vf-esp-4);
    padding: var(--vf-esp-6) 0;
}

@media (prefers-reduced-motion: reduce) {
    .vf-pointage-anneau { transition: none; }
}