/* ============================================================
   victimes.css — Mobile-first overrides for the victim form
   Scoped to #victime_form_id to avoid bleeding into other pages.
   Refonte UX inspirée Syopé : tactile, lisible, mobile-friendly.
   ============================================================ */

/* ---------- Variables ---------- */
:root {
    --vic-radius: 8px;
    --vic-gap: 12px;
    --vic-touch: 44px;
    --vic-cat-bg: #f4f6fa;
    --vic-cat-border: #d8dde6;
    --vic-cat-color: #2c3e50;
    --vic-active: #0d6efd;
    --vic-active-bg: #e7f1ff;
    --vic-radio-bg: #ffffff;
    --vic-radio-border: #c5cad3;
    /* Jetons nommés d'après le SENS de la réponse (alarmante / rassurante),
       jamais d'après le mot « Oui » ou « Non » : c'est le paramétrage du champ
       qui dit lequel des deux est une mauvaise nouvelle. */
    --vic-radio-alert: #fde7e9;
    --vic-radio-alert-border: #d9534f;
    --vic-radio-alert-text: #842029;
    --vic-radio-ok: #e6f5ec;
    --vic-radio-ok-border: #28a745;
    --vic-radio-ok-text: #1c6e34;
    --vic-radio-nonr: #e9ecef;
    --vic-radio-nonr-border: #6c757d;
    --vic-radio-nonr-text: #495057;
    /* Bandeau « Conduite à tenir » */
    --vic-cond-border: #d8dde6;
    --vic-cond-accent: #0d6efd;
    --vic-cond-warn-bg: #fff3cd;
    --vic-cond-warn-text: #7a5c17;
    /* Pastille d'enregistrement automatique (« Synchronisé », « Hors ligne »…) */
    --vic-save-bg: #eef1f5;
    --vic-save-border: #d8dde6;
    --vic-save-text: #495057;
    --vic-save-saving-bg: #e7f1ff;
    --vic-save-saving-border: #b6d4fe;
    --vic-save-saving-text: #0d6efd;
    --vic-save-ok-bg: #e6f5ec;
    --vic-save-ok-border: #badbcc;
    --vic-save-ok-text: #1c6e34;
    --vic-save-offline-bg: #fff3cd;
    --vic-save-offline-border: #ffe69c;
    --vic-save-offline-text: #997404;
    --vic-save-pending-bg: #e7f1ff;
    --vic-save-pending-border: #9ec5fe;
    --vic-save-pending-text: #0a58ca;
    --vic-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* ---------- Thème sombre ---------- */
:root.dark {
    --vic-cat-bg: #2a2d35;
    --vic-cat-border: #3d4250;
    --vic-cat-color: #d0d4df;
    --vic-active: #4d8ffc;
    --vic-active-bg: #1a2a45;
    --vic-radio-bg: #1e2128;
    --vic-radio-border: #4a4f5e;
    --vic-radio-alert: #3a1c1e;
    --vic-radio-alert-border: #b94040;
    --vic-radio-alert-text: #fca5a5;
    --vic-radio-ok: #1a2e20;
    --vic-radio-ok-border: #2d7a45;
    --vic-radio-ok-text: #6ee7b7;
    --vic-radio-nonr: #2a2d35;
    --vic-radio-nonr-border: #4a4f5e;
    --vic-radio-nonr-text: #d0d4df;
    --vic-cond-border: #3d4250;
    --vic-cond-accent: #4d8ffc;
    --vic-cond-warn-bg: #3d3111;
    --vic-cond-warn-text: #fcd34d;
    --vic-save-bg: #2a2d35;
    --vic-save-border: #4a4f5e;
    --vic-save-text: #d0d4df;
    --vic-save-saving-bg: #12304f;
    --vic-save-saving-border: #1d4e7f;
    --vic-save-saving-text: #7cc0ff;
    --vic-save-ok-bg: #1a2e20;
    --vic-save-ok-border: #2d7a45;
    --vic-save-ok-text: #6ee7b7;
    --vic-save-offline-bg: #3d3111;
    --vic-save-offline-border: #7a5c17;
    --vic-save-offline-text: #fcd34d;
    --vic-save-pending-bg: #12304f;
    --vic-save-pending-border: #1d4e7f;
    --vic-save-pending-text: #7cc0ff;
    --vic-shadow: 0 1px 3px rgba(0,0,0,.25);
}

:root.dark #victime_form_id .card-header {
    background-color: #1e2128;
    border-bottom-color: #3d4250;
}

:root.dark #victime_form_id table.noBorder tr {
    border-bottom-color: #2e3240;
}

:root.dark #victime_form_id input[type="time"],
:root.dark #victime_form_id input[type="text"],
:root.dark #victime_form_id input[type="number"],
:root.dark #victime_form_id select {
    background-color: #1e2128;
    color: #d0d4df;
    border-color: #4a4f5e;
}

:root.dark a.vbilan-pill,
:root.dark .vbilan-pill {
    background: #2a2d35 !important;
    border-color: #4a4f5e !important;
    color: #d0d4df !important;
}

:root.dark a.vbilan-pill:hover,
:root.dark .vbilan-pill:hover {
    background: #1a2a45 !important;
    border-color: #4d8ffc !important;
    color: #4d8ffc !important;
}

:root.dark a.vbilan-pill.active,
:root.dark .vbilan-pill.active {
    background: #4d8ffc !important;
    border-color: #4d8ffc !important;
    color: #ffffff !important;
}

/* Les variantes rassurante / alarmante / non renseigné du thème sombre étaient
   redéfinies ici en couleurs figées. Elles vivent maintenant dans les jetons
   `--vic-radio-*-text` / `--vic-radio-nonr*` ci-dessus : une seule déclaration
   de règle, deux jeux de valeurs. Les redéclarer ici les ferait perdre contre
   le `!important` que ces règles doivent porter (cf. le bloc des radios). */

:root.dark input[type="time"]::placeholder,
:root.dark input.flatpickr::placeholder {
    color: #6b7280 !important;
}

/* ---------- Bandeau « Renfort demandé » ---------- */
.vic-renfort-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fde7e9;
    border: 1px solid #f5c2c7;
    border-left: 4px solid #d9534f;
    color: #842029;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    box-shadow: 0 1px 4px rgba(217,83,79,.12);
}
.vic-renfort-banner i {
    font-size: 1.25rem;
    color: var(--eb-danger);
    flex: 0 0 auto;
}
.vic-renfort-banner span { min-width: 0; word-break: break-word; }
:root.dark .vic-renfort-banner {
    background: #3a1c1e;
    border-color: #b94040;
    border-left-color: #ef4444;
    color: #fca5a5;
}

/* ---------- Bilan nav bar (menu d'accès rapide) ----------
 * Épinglée sous la top-bar (.eb-topbar ≈ 52px) au scroll. position:sticky se
 * révélait non fiable dans ce DOM (offset calculé mais non peint : la barre
 * disparaissait au scroll, surtout avec backdrop-filter) → on pilote
 * l'épinglage en JS (classe .is-pinned + placeholder) pour un rendu fiable
 * sur tous les navigateurs. Fond opaque (pas de backdrop-filter, source de
 * bugs de repaint sur élément fixé/collé).
 */
.vbilan-nav {
    position: relative;
    /* > 1030 : la card de write_card() (.card position:relative; z-index:1030)
     * peignait par-dessus la barre épinglée et la masquait. < 1040 : reste sous
     * la top-bar (.eb-topbar). */
    z-index: 1035;
    background: var(--eb-surface);
    border: 1px solid var(--eb-border);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 8px 12px;
    margin: 0 0 14px 0;
}

/* Le bloc épinglé porte le menu ET la conduite à tenir : c'est LUI que le JS
 * bascule en position:fixed, pour que les deux montent ensemble. La barre
 * seule garde ses styles propres (fond, bordure) ; le bloc n'apporte que la
 * position. */
.vbilan-sticky {
    position: relative;
    z-index: 1035;
}

/* Épinglé par le JS au scroll : reste visible en haut quoi qu'il arrive,
 * jusqu'au bas de la fiche. left/width/top sont fixés en JS pour épouser la
 * colonne de contenu et se caler pile sous la top-bar (le `top` ci-dessous
 * n'est qu'un repli si la mesure JS échoue). */
.vbilan-sticky.is-pinned,
.vbilan-nav.is-pinned {
    position: fixed;
    top: 52px;
    margin: 0;
}

/* Coins hauts carrés + bordure haute transparente sur ce qui touche la
 * top-bar : la barre lui est collée, sans le liseré de contenu qui défilait
 * dans l'interstice ni les angles arrondis qui laissaient voir le texte
 * remonter derrière. */
.vbilan-sticky.is-pinned > :first-child,
.vbilan-nav.is-pinned {
    border-top-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* La barre de menu garde sa marge basse dans le flux, mais pas quand elle est
 * la dernière chose du bloc épinglé : le blanc sous un bloc fixé n'est pas de
 * la respiration, c'est un trou dans la page. */
.vbilan-sticky.is-pinned .vbilan-nav { margin-bottom: 8px; }
.vbilan-sticky.is-pinned > :last-child { margin-bottom: 0; }

/* Réserve la place laissée par la barre une fois épinglée (évite le saut). */
.vbilan-nav-ph {
    margin: 0;
    padding: 0;
}

/* ---------- Carrousel de rubriques ----------
   ⚠️ La bande défilait DÉJÀ horizontalement, mais rien ne le disait : pas de
   flèche, pas de dégradé, et une barre de défilement masquée par le système
   sur macOS. Mesuré sur la fiche livrée : 10 rubriques réclament 1598 px dans
   une bande de 1086 — 512 px dehors sur un écran de 1400, le dernier libellé
   tranché au ras du bord droit. Ça ne se lisait pas « il y en a d'autres à
   droite », ça se lisait comme un affichage cassé.
   Deuxième défaut du même réglage : la rubrique active est désignée au
   défilement de la page, et elle pouvait se trouver hors de la bande — le menu
   cessait alors de dire où on se trouve. Le JS la ramène maintenant dedans.
   On garde UNE seule ligne : la barre est épinglée, et trois lignes de
   pastilles mangeraient l'écran de saisie qu'elle sert. */
.vbilan-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vbilan-nav-inner {
    display: flex;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;          /* sans ça, un enfant flex refuse de rétrécir */
    overflow-x: auto;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
    /* Pas de `scroll-behavior: smooth` ici : non honoré partout, et il rendait
       les défilements programmés totalement inertes. Le fluide est animé en JS
       (victimes.php), qui sait retomber sur un saut instantané. */
    /* Barre de défilement retirée : les flèches et les dégradés disent la
       même chose, plus lisiblement, et sans voler 4 px de hauteur à une barre
       déjà épinglée. Le glissement au doigt et au pavé tactile reste natif. */
    scrollbar-width: none;
}

.vbilan-nav-inner::-webkit-scrollbar { display: none; }

/* Dégradé de bord : le premier signal que la bande continue, avant même de
   regarder les flèches. Posé seulement du côté où il reste quelque chose. */
.vbilan-nav.can-left .vbilan-nav-inner  { mask-image: linear-gradient(to right, transparent 0, #000 24px); }
.vbilan-nav.can-right .vbilan-nav-inner { mask-image: linear-gradient(to left, transparent 0, #000 24px); }
.vbilan-nav.can-left.can-right .vbilan-nav-inner {
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.vbilan-nav-arrow {
    flex: 0 0 auto;
    display: none;                 /* apparaît seulement si ça déborde */
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--vic-radio-border);
    background: var(--eb-surface);
    color: var(--eb-text);
    cursor: pointer;
    transition: all .15s ease;
}

.vbilan-nav.vbilan-nav-scrollable .vbilan-nav-arrow { display: inline-flex; }

.vbilan-nav-arrow:hover:not(:disabled) {
    border-color: var(--vic-active);
    color: var(--vic-active);
}

/* Bout de course : la flèche reste EN PLACE, en retrait. La faire disparaître
   ferait sauter toute la bande de 34 px à chaque extrémité atteinte. */
.vbilan-nav-arrow:disabled { opacity: .3; cursor: default; }

a.vbilan-pill,
.vbilan-pill {
    flex: 0 0 auto;
    /* Pas de max-width ni d'abrègement : une rubrique peut porter une phrase
       entière — la fiche livrée en a une de 48 caractères — et c'est la bande
       qui défile pour la montrer en entier. Rogner le libellé rétablirait
       exactement le défaut qu'on corrige ici. */
    padding: 6px 14px;
    border-radius: 20px;
    background: #ffffff !important;
    border: 1.5px solid #d8dde6 !important;
    color: #495057 !important;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

a.vbilan-pill:hover,
.vbilan-pill:hover {
    border-color: #0d6efd !important;
    background: #e7f1ff !important;
    color: #0d6efd !important;
}

a.vbilan-pill.active,
.vbilan-pill.active {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(13, 110, 253, 0.25);
}

/* Tablettes et petits portables : on resserre les pastilles pour qu'il en
   tienne davantage dans la bande, et donc qu'il y ait moins à faire défiler. */
@media (max-width: 1200px) {
    a.vbilan-pill,
    .vbilan-pill {
        padding: 5px 11px;
        font-size: 0.83rem;
    }
    .vbilan-nav-inner { gap: 5px; }
    .vbilan-nav { padding: 6px 10px; }
}

@media (max-width: 767px) {
    .vbilan-pill {
        padding: 5px 12px;
        font-size: 0.82rem;
    }
}

@media print {
    .vbilan-nav,
    .vbilan-nav-ph {
        display: none;
    }
    /* La conduite à tenir, elle, s'imprime : c'est de l'information sur le
       bilan, pas de la navigation. */
    .vbilan-sticky.is-pinned { position: static; }
}

/* ---------- Conduite à tenir ----------
   Les consignes que le paramétrage fait remonter au fil de la saisie. Le
   contenu est rendu par le PHP (bv_render_conduite), le JS ne fait que
   montrer ou cacher les lignes. */
.vbilan-conduite {
    background: var(--eb-surface);
    border: 1px solid var(--vic-cond-border);
    border-left: 4px solid var(--vic-cond-accent);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 8px 12px;
    margin: 0 0 14px 0;
    /* ⚠️ La fiche victime hérite d'un `text-align: -webkit-center` venu du
       balisage historique de la page : sans ça, la consigne s'affiche centrée
       entre sa pastille de niveau et sa source, et se relit mal — or c'est
       précisément le texte qu'il faut saisir d'un coup d'œil. */
    text-align: start;
}

.vbilan-conduite-head {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--vic-cond-accent);
    margin-bottom: 6px;
}

.vbilan-conduite-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Un bilan très dégradé peut déclencher beaucoup de règles ; au-delà, le
       bloc épinglé mangerait l'écran de saisie qu'il est censé servir. */
    max-height: 30vh;
    overflow-y: auto;
}

.vbc-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .88rem;
    line-height: 1.35;
}

/* `hidden` sur un élément flex ne suffit pas : display:flex l'emporte sur le
   display:none de l'attribut. Sans ça, TOUTES les consignes s'afficheraient,
   y compris celles qui ne s'appliquent pas — l'inverse exact du but. */
.vbc-item[hidden] { display: none; }

.vbc-niveau {
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.vbc-texte { flex: 1 1 240px; color: var(--eb-text); }
.vbc-texte strong { font-weight: 700; }

.vbc-source {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--eb-text-muted, #8a94a6);
    font-style: italic;
}

/* Niveaux. La couleur ne remplace jamais le mot : « Urgence » est écrit en
   toutes lettres dans la pastille, pour que la consigne reste lisible en
   niveaux de gris, à l'impression et pour un daltonien. */
.vbc-lvl3 .vbc-niveau { background: var(--vic-radio-alert); color: var(--vic-radio-alert-text); }
.vbc-lvl2 .vbc-niveau { background: var(--vic-cond-warn-bg);  color: var(--vic-cond-warn-text); }
.vbc-lvl1 .vbc-niveau { background: var(--vic-active-bg);     color: var(--vic-active); }

/* ---------- Bilan cards (Sprint 1B — refonte structurelle) ---------- */
#victime_form_id .vbilan-cards {
    display: flex;
    flex-direction: column;
    gap: var(--vic-gap);
    margin-top: 16px;
}

#victime_form_id .vbilan-card {
    border-radius: var(--vic-radius);
    border: 1px solid var(--vic-cat-border);
    box-shadow: var(--vic-shadow);
    overflow: hidden;
    /* Offset pour scrollIntoView : laisse de la place à la nav sticky */
    scroll-margin-top: 80px;
}

html { scroll-behavior: smooth; }

#victime_form_id .vbilan-card-header {
    background: var(--vic-cat-bg);
    border-left: 4px solid var(--vic-active);
    padding: 10px 14px;
    color: var(--vic-cat-color);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--vic-cat-border);
}

#victime_form_id .vbilan-card .card-body {
    padding: 12px 14px;
}

#victime_form_id .vbilan-card .form-group.vbp {
    margin-bottom: 10px;
}

#victime_form_id .vbp-label {
    display: block;
    font-weight: 500;
    color: var(--eb-text-secondary, #495057);
    margin-bottom: 4px;
    font-size: 0.92rem;
    overflow-wrap: break-word;
    word-break: normal;
}

#victime_form_id .vbp-field {
    width: 100%;
}

/* Indice « (ou âge) » à côté de l'astérisque de la date de naissance */
#victime_form_id .eb-req-hint {
    color: var(--eb-text-secondary, #6c757d);
    font-weight: 400;
    font-size: 0.8em;
}

#victime_form_id .vbp-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ---------- Indicateur d'autosave (discret, non bloquant) ---------- */
.vic-autosave-status {
    position: fixed;
    right: 88px;
    bottom: 24px;
    z-index: 2147483000;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    background: var(--vic-save-bg);
    color: var(--vic-save-text);
    border: 1px solid var(--vic-save-border);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.vic-autosave-status.show {
    opacity: 1;
    transform: translateY(0);
}
/* ⚠️ Les quatre états passent par des JETONS, et le thème sombre ne les
   redéclare PAS ici. Il existait un `:root.dark .vic-autosave-status` posé
   après ces règles : plus spécifique (0,3,0 contre 0,2,0), il les écrasait
   TOUTES. En thème sombre, « Sauvegarde… », « Synchronisé » et « Hors ligne »
   rendaient donc la même pastille grise — le code couleur disparaissait
   exactement là où l'équipier vérifie d'un coup d'œil que sa saisie est
   partie. Une règle par état, deux jeux de valeurs. */
.vic-autosave-status[data-state="saving"] {
    background: var(--vic-save-saving-bg);
    border-color: var(--vic-save-saving-border);
    color: var(--vic-save-saving-text);
}
.vic-autosave-status[data-state="saved"] {
    background: var(--vic-save-ok-bg);
    border-color: var(--vic-save-ok-border);
    color: var(--vic-save-ok-text);
}
.vic-autosave-status[data-state="offline"] {
    background: var(--vic-save-offline-bg);
    border-color: var(--vic-save-offline-border);
    color: var(--vic-save-offline-text);
}
/* #11412 — « Brouillon local non transmis » : la saisie est à l'abri sur le
   téléphone et repartira seule. Bleu et non ambre : ce n'est pas un
   avertissement, contrairement à `offline` qui signale, lui, que rien n'a pu
   être conservé. La pastille reste affichée tant que le brouillon n'est pas
   parti — l'équipier doit pouvoir le vérifier d'un coup d'œil en fin
   d'intervention. */
.vic-autosave-status[data-state="pending"] {
    background: var(--vic-save-pending-bg);
    border-color: var(--vic-save-pending-border);
    color: var(--vic-save-pending-text);
}
@media (max-width: 767px) {
    .vic-autosave-status {
        left: 8px;
        right: 8px;
        bottom: 88px; /* au-dessus de la barre d'actions sticky */
        font-size: 0.8rem;
        padding: 6px 12px;
        text-align: center;
    }
}

/* ---------- Outils de l'en-tête de fiche (Régulé + PDF / mail / bracelet)
   Trois cadres flottants alignés à la suite du titre se lisaient comme trois
   objets sans rapport, et le « Régulé » repoussé par margin-left:auto tombait
   à la ligne : deux étages d'en-tête pour trois icônes. Les actions forment
   maintenant UN groupe segmenté (fond gris clair, boutons sans bordure
   propre), la bascule reste à côté sur la même ligne.
   Le thème evenement_modern.css rend .btn-secondary blanc sur bordure à 7% —
   d'où le fond et la couleur donnés ici explicitement. ---------- */
#victime_form_id .eb-vic-hdr-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-left: auto;
}
#victime_form_id .eb-vic-regule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 550;
    white-space: nowrap;
    cursor: pointer;
}
#victime_form_id .eb-vic-hdr-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--eb-surface-hover, #f1f3f5);
    border: 1px solid var(--eb-border, #e2e6eb);
    border-radius: 10px;
}
#victime_form_id .eb-vic-hdr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 8px;
    color: var(--eb-text-secondary, #5a6472);
    font-size: 0.95rem;
    line-height: 1;
    /* Le thème pose une ombre portée sur tout .btn, en `!important` (css/main.css
       « .btn ») : dans un groupe segmenté elle redessinait trois chips en relief
       là où on ne veut qu'un bloc. La spécificité ne suffit pas, il faut le
       même poids. */
    box-shadow: none !important;
}
#victime_form_id .eb-vic-hdr-btn:hover,
#victime_form_id .eb-vic-hdr-btn:focus-visible {
    background: var(--bkg-color1, #fff);
    color: var(--vic-active, #0d6efd);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12) !important;
}
:root.dark #victime_form_id .eb-vic-hdr-group {
    background: #2a2d35;
    border-color: #4a4f5e;
}
:root.dark #victime_form_id .eb-vic-hdr-btn {
    color: #d0d4df;
}
:root.dark #victime_form_id .eb-vic-hdr-btn:hover,
:root.dark #victime_form_id .eb-vic-hdr-btn:focus-visible {
    background: #3a3f4b;
    color: #fff;
}
/* #ebr-tap-target — au doigt, une icône de 30px ne se vise pas. La mesure vient
   de css/main.css (--eb-tap-target), jamais réécrite en dur ici. */
@media (max-width: 992px) {
    #victime_form_id .eb-vic-hdr-btn {
        width: var(--eb-tap-target, 44px);
        height: calc(var(--eb-tap-target, 44px) - 6px);
    }
}

/* ---------- Date de naissance OU âge ----------
   Un seul renseignement, deux façons de le donner. */
#victime_form_id .eb-bd-nowrap {
    white-space: nowrap;
}
/* Date et âge sur UNE seule ligne : « 07-12-1988  ou [37] ans ». Le repli sur
   deux lignes coupait la question en deux et faisait perdre une hauteur de champ
   sur un écran de téléphone, pour une paire qui se lit d'un bloc.
   La date cède la largeur (elle a un min-width bas), le groupe « ou … ans » ne
   se comprime jamais. */
#victime_form_id .eb-birthdate-field {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
}
#victime_form_id .eb-birthdate-field .datepicker {
    flex: 1 1 auto;
    min-width: 0;
}

/* ⚠️ Bloc INSÉCABLE : « ou », le champ et « ans » restent solidaires. Quand les
   trois étaient frères du même flex, le champ âge se retrouvait seul sous la
   date à l'étroit — un carré avec un nombre dedans, que plus rien ne nommait. */
#victime_form_id .eb-bd-age {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
#victime_form_id .eb-birthdate-sep,
#victime_form_id .eb-bd-unit {
    flex: 0 0 auto;
    color: var(--eb-text-secondary, #6c757d);
    font-size: 0.9rem;
    white-space: nowrap;
}
/* Trois chiffres, centrés : un âge cadré à gauche dans un champ large se lit
   comme un début de saisie inachevée. */
#victime_form_id .eb-bd-age-input {
    flex: 0 0 60px;
    width: 60px;
    max-width: 60px;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

/* Numéro de la victime, à côté du titre de la rubrique : une information qu'on
   lit, pas un champ qu'on remplit. Il occupait une case pleine largeur, en
   lecture seule, au milieu des vraies questions. */
#victime_form_id .vic-num,
.vic-num {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--eb-surface-hover, #eef1f6);
    color: var(--eb-text-secondary, #6c757d);
    font-size: .8rem;
    font-weight: 600;
    vertical-align: middle;
}

/* ---------- Table adresse isolée sous la grille état civil ---------- */
#victime_form_id .vic-address-table {
    margin-top: 4px;
}
#victime_form_id .vic-address-table td {
    padding: 6px 8px;
    vertical-align: middle;
}
#victime_form_id .vic-address-table .eb-addr-label,
#victime_form_id .vic-address-table label {
    font-weight: 500;
    color: var(--eb-text-secondary, #495057);
    margin-bottom: 0;
}
/* Desktop : colonne des libellés assez large pour ne pas couper les mots
   (« Dé-com-posée », « Com-plé-ment »). Sur mobile (<768) la table passe en
   blocs empilés via les règles @media plus bas, donc on ne fige pas la largeur. */
@media (min-width: 768px) {
    #victime_form_id .vic-address-table td:first-child {
        width: 170px;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        -webkit-hyphens: none;
        hyphens: none;
    }
}

/* ---------- Champs pilotés par le paramétrage ---------- */
/* Champ hors-sujet tant que sa condition n'est pas remplie
   (ex. traumatisme secondaire avant le principal). */
#victime_form_id .vbp.vbp-hidden {
    display: none;
}

/* Variante « grisé » : le champ reste visible mais inactif, pour que le
   secouriste voie qu'il existe (ex. heure de garrot avant le garrot). */
#victime_form_id .vbp.vbp-off {
    background: var(--eb-surface-hover, #fafbfc);
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px dashed var(--eb-border, #d8dde6);
    opacity: .6;
}

/* Réponse qui déclenche l'alerte réglée sur le champ.
   !important obligatoire : dashboard-modern.css force la couleur de TOUS les
   labels (`body.eb-has-topbar-v2 label:not(.btn):not(.form-check-label)`) en
   !important — sans ça l'alerte reste invisible. */
#victime_form_id .vbp.vbp-alerted > .vbp-label {
    color: var(--eb-danger, #c1272d) !important;
    font-weight: 600 !important;
}

#victime_form_id .vbp.vbp-alerted-urgent {
    border-left: 3px solid var(--eb-danger, #c1272d);
    border-radius: 0;
    padding-left: 8px;
}

/* Aide de saisie du champ (BVP_COMMENT). L'icône s'ouvre au clic et au tap
   (js/victimes.js) : `cursor: pointer`, pas `help` — « help » annonce une
   bulle au survol, ce que le doigt n'aura jamais.
   La zone tactile est élargie par un padding : une icône de 12 px ne se vise
   pas au doigt, et un `?` qu'on rate est un `?` qui « ne marche pas ». Le
   margin négatif compense le padding pour ne pas écarter le libellé. */
#victime_form_id .vbp-help {
    color: var(--eb-text-muted, #8a94a6);
    cursor: pointer;
    font-size: .85em;
    padding: 8px;
    margin: -8px -4px;
    touch-action: manipulation;
}

#victime_form_id .vbp-help:hover,
#victime_form_id .vbp-help:focus-visible {
    color: var(--vic-active);
}

/* Aperçu du constructeur : rien n'y est actionnable (les champs sont rendus
   désactivés) et le JS de la fiche n'y est pas chargé. Le « ? » n'y promet
   donc pas un clic — il garde son survol, comme avant. */
#victime_form_id .vbp-help-static {
    cursor: help;
}

#victime_form_id .vbp-unit {
    color: var(--eb-text-muted, #8a94a6);
    font-weight: 400;
}

#victime_form_id .vbp-req {
    color: var(--eb-danger, #c1272d);
}

/* ---------- Legacy compat : état civil reste en table ---------- */
#victime_form_id table.noBorder b {
    font-size: 1rem;
}

#victime_form_id table.noBorder tr td[colspan="4"] b {
    display: block;
    background: var(--vic-cat-bg);
    border-left: 4px solid var(--vic-active);
    padding: 8px 12px;
    margin: 16px 0 8px 0;
    border-radius: var(--vic-radius);
    color: var(--vic-cat-color);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ---------- Champs : tailles confortables au doigt ---------- */
#victime_form_id .form-control,
#victime_form_id .form-control-sm {
    min-height: var(--vic-touch);
    font-size: 1rem;
    padding: 8px 12px;
    border-radius: var(--vic-radius);
}

#victime_form_id textarea.form-control,
#victime_form_id textarea.form-control-sm {
    min-height: 80px;
}

#victime_form_id input[type="number"].form-control-sm {
    width: 100%;
    max-width: 140px;
}

#victime_form_id input.timepicker {
    width: 100% !important;
    max-width: 110px;
}

/* ---------- Radio Oui/Non/NR : gros boutons tactiles ---------- */
#victime_form_id input[type="radio"].radiobutton {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#victime_form_id input[type="radio"].radiobutton + label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: var(--vic-touch);
    padding: 8px 14px;
    margin: 4px 6px 4px 0;
    background: var(--vic-radio-bg);
    border: 2px solid var(--vic-radio-border);
    border-radius: var(--vic-radius);
    cursor: pointer;
    font-weight: 500;
    /* Transition courte et nommée. `all .15s` faisait aussi fondre la
       graisse du texte et l'ombre : la réponse cochée s'installait en un
       sixième de seconde au lieu de répondre au doigt.
       `touch-action: manipulation` retire l'attente du double-tap : le
       navigateur n'a plus à guetter un second appui avant de valider. */
    transition: background-color .08s ease, border-color .08s ease, color .08s ease;
    touch-action: manipulation;
    user-select: none;
    box-shadow: var(--vic-shadow);
    white-space: nowrap;
}

#victime_form_id input[type="radio"].radiobutton + label:hover {
    border-color: var(--vic-active);
    background: var(--vic-active-bg);
}

/* ⚠️ `color` porte `!important` dans tout ce bloc — et nulle part ailleurs.
   css/dashboard-modern.css force TOUS les libellés :
   `body.eb-has-topbar-v2 label:not(.btn):not(.form-check-label) { color: var(--eb-text) !important }`.
   Un `!important` bat la spécificité : sans lui, le fond et la bordure de la
   réponse choisie passaient, mais son texte restait de la couleur ordinaire —
   la teinte Oui/Non ne se lisait qu'à moitié. */
#victime_form_id input[type="radio"].radiobutton:checked + label {
    border-color: var(--vic-active);
    background: var(--vic-active-bg);
    color: var(--vic-active) !important;
    font-weight: 600;
}

/* Vert / rouge SEULEMENT là où le champ dit ce qui alarme (BVP_ALERT).
   ⚠️ Ces règles se réglaient avant sur le mot : `[id$="_oui"]` en vert,
   `[id$="_non"]` en rouge. Le mot « Oui » ne vaut pas bonne nouvelle —
   « Bruyante : Oui » et « Sueurs : Oui » sont de mauvais signes, « Pauses :
   Non » un bon. L'écran affirmait donc le contraire du bilan.
   Sans règle sur le champ, le logiciel ne sait pas : la réponse choisie
   reste bleue (`:checked + label` ci-dessus), elle dit « voilà ta réponse »
   et rien de plus. C'est bv_render_field() qui pose vbp-ans-ok /
   vbp-ans-alert, avec le même moteur que l'alerte à l'enregistrement. */
#victime_form_id input[type="radio"].radiobutton:checked + label.vbp-ans-ok {
    border-color: var(--vic-radio-ok-border);
    background: var(--vic-radio-ok);
    color: var(--vic-radio-ok-text) !important;
}

#victime_form_id input[type="radio"].radiobutton:checked + label.vbp-ans-alert {
    border-color: var(--vic-radio-alert-border);
    background: var(--vic-radio-alert);
    color: var(--vic-radio-alert-text) !important;
}

#victime_form_id input[type="radio"].radiobutton[id$="_nonr"]:checked + label {
    border-color: var(--vic-radio-nonr-border);
    background: var(--vic-radio-nonr);
    color: var(--vic-radio-nonr-text) !important;
}

/* ---------- Sexe M/F : même traitement que radio bilan ---------- */
#victime_form_id input[type="radio"][name="sexe"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#victime_form_id input[type="radio"][name="sexe"] + label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: var(--vic-touch);
    padding: 8px 14px;
    margin: 4px 6px 4px 0;
    background: var(--vic-radio-bg);
    border: 2px solid var(--vic-radio-border);
    border-radius: var(--vic-radius);
    cursor: pointer;
    font-weight: 500;
    box-shadow: var(--vic-shadow);
}

#victime_form_id input[type="radio"][name="sexe"]:checked + label {
    border-color: var(--vic-active);
    background: var(--vic-active-bg);
    color: var(--vic-active);
    font-weight: 600;
}

/* ---------- Cellules du tableau : aération ---------- */
#victime_form_id table.noBorder td {
    padding: 6px 8px;
    vertical-align: middle;
}

#victime_form_id table.noBorder tr {
    border-bottom: 1px solid #f1f3f5;
}

#victime_form_id table.noBorder tr:has(td[colspan="4"] b) {
    border-bottom: none;
}

/* ---------- Selectpicker (bootstrap-select) : taille tactile ---------- */
#victime_form_id .bootstrap-select > .dropdown-toggle {
    min-height: var(--vic-touch);
    padding: 8px 12px;
    border-radius: var(--vic-radius);
    font-size: 1rem;
}

/* ---------- Switch toggle (déjà présent) : taille uniforme ---------- */
#victime_form_id .switch {
    margin-left: 4px;
}

/* ---------- TABLETTE : 768-1023px ---------- */
@media (max-width: 1023px) {
    #victime_form_id table.noBorder td {
        padding: 8px 6px;
    }
    #victime_form_id input[type="radio"].radiobutton + label {
        min-width: 64px;
        font-size: 0.95rem;
    }
}

/* ---------- MOBILE : passage 1 colonne ---------- */
@media (max-width: 767px) {
    /* La table 4-colonnes (label1/champ1/label2/champ2) devient 2 colonnes empilées */
    #victime_form_id table.noBorder,
    #victime_form_id table.noBorder tbody {
        display: block;
        width: 100%;
    }

    /* :not(.display_none) : sans ça, cette règle (spécificité 1,1,2) écrase
       .display_none (0,1,0) et fait réapparaître en mobile les lignes
       masquées du widget adresse (create_input_address) — l'autocomplete et
       les champs décomposés (Numéro rue, Code Postal, Ville, Complément…)
       s'affichaient simultanément avec la case Décomposée décochée. */
    #victime_form_id table.noBorder tr:not(.display_none) {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 8px;
        padding: 6px 0;
    }

    #victime_form_id table.noBorder tr td {
        display: block;
        width: 100%;
        padding: 4px 0;
    }

    /* Catégories en pleine largeur */
    #victime_form_id table.noBorder tr td[colspan="4"] {
        margin-top: 12px;
    }

    /* textarea + col=3 prennent toute la largeur */
    #victime_form_id table.noBorder td[colspan="3"] textarea,
    #victime_form_id table.noBorder td[colspan="3"] input {
        width: 100% !important;
    }

    /* Champs alignés à 100% sur mobile */
    #victime_form_id .form-control,
    #victime_form_id .form-control-sm,
    #victime_form_id .selectpicker,
    #victime_form_id .bootstrap-select {
        width: 100% !important;
        max-width: none;
    }

    /* …sauf le <select> natif que bootstrap-select laisse dans le DOM derrière
       son bouton : il est en position:absolute + opacity:0 et large de 0.5px.
       Le width:100% !important ci-dessus le rendait aussi large que le champ
       (#country : 317px, posé à left:50% → bord droit à 514px pour un écran de
       390px), créant une zone de défilement horizontal invisible sur toute la
       fiche. Exception pour .mobile-device : là, bootstrap-select étire
       volontairement le select natif par-dessus le bouton pour que le
       sélecteur natif du téléphone s'ouvre au doigt. */
    #victime_form_id .bootstrap-select > select.selectpicker:not(.mobile-device) {
        width: 0.5px !important;
        max-width: 0.5px !important;
    }

    /* .bootstrap-select porte un margin-right:5px global (main.css) : combiné au
       width:100% ci-dessus, chaque liste déroulante dépassait de 5px de son
       .vbp-field — 49 petites zones de défilement horizontal sur le bilan. */
    #victime_form_id .vbp-field > .bootstrap-select {
        margin-right: 0;
    }

    /* Radio en grille 3 colonnes égales — le libellé peut passer sur 2 lignes
       (« Non renseigné » débordait à cause de white-space:nowrap hérité). */
    #victime_form_id input[type="radio"].radiobutton + label {
        flex: 1 1 0;
        min-width: 0;
        margin: 4px 4px 4px 0;
        padding: 6px 4px;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
        font-size: 0.8rem;
        overflow-wrap: break-word;
        hyphens: none;
    }

    #victime_form_id input[type="radio"].radiobutton:last-of-type + label {
        margin-right: 0;
    }

    /* CNIL warning : icône bien visible */
    #victime_form_id .fa-exclamation-triangle {
        font-size: 1.4rem;
    }

    /* Labels au-dessus des champs (mobile).
       ⚠️ Empilée, la ligne cumulait trois gouttières entre le libellé et son
       champ : le bas de la cellule de libellé (4 px), sa marge (2 px) et le
       haut de la cellule du champ (4 px) — 17 px sous « Adresse / Décomposée »
       contre 6 px partout ailleurs sur la fiche. Le libellé doit être collé à
       ce qu'il nomme ; le seul écart qui reste est la marge de 6 px que
       dashboard-modern.css impose à tous les <label>. */
    #victime_form_id table.noBorder tr td:first-child {
        font-weight: 500;
        color: #495057;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    #victime_form_id table.noBorder tr td:first-child + td {
        padding-top: 0;
    }
}

/* ---------- Sticky save bar en bas (mobile + desktop) ---------- */
#victime_form_id .victime-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background: var(--eb-surface);
    border-top: 1px solid var(--eb-border);
    padding: 10px 16px;
    margin: 16px -16px 0 -16px;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

#victime_form_id .victime-sticky-actions .btn {
    min-height: var(--vic-touch);
    padding: 8px 20px;
    font-size: 1rem;
    border-radius: var(--vic-radius);
}

@media (max-width: 767px) {
    #victime_form_id .victime-sticky-actions {
        margin: 16px -8px 0 -8px;
        padding: 10px 12px;
    }
    #victime_form_id .victime-sticky-actions .btn {
        flex: 1;
        min-width: 0;
    }
}

/* ---------- Cards eBrigade : alignées sur le pattern des cards bilan ----------
   Les cards de la fiche (write_card → .card.graycarddefault) reprennent le même
   look que les .vbilan-card : accent bleu à gauche de l'en-tête, rayon et ombre
   douce cohérents. */
#victime_form_id .card {
    border-radius: var(--vic-radius);
    box-shadow: var(--vic-shadow);
    border: 1px solid var(--eb-border);
}

#victime_form_id .card-header,
#victime_form_id .card .card-title {
    background: #fafbfc;
    font-weight: 600;
}
:root.dark #victime_form_id .card {
    border-color: var(--vic-cat-border);
}
:root.dark #victime_form_id .card-header,
:root.dark #victime_form_id .card .card-title,
:root.dark #victime_form_id .card-header *,
:root.dark #victime_form_id .card .card-title * {
    background: #1e2128 !important;
    color: var(--vic-cat-color) !important;
}

/* Accent bleu à gauche de l'en-tête, comme .vbilan-card-header */
#victime_form_id .card > .card-header.graycard {
    border-left: 4px solid var(--vic-active);
}

/* ---------- MOBILE : cards pleine largeur + ombre moderne ----------
   En mode simple les cards sont dans un .container-fluid (avec padding) + des
   colonnes .col-sm-6 → étroites sur mobile. On réduit ces marges pour occuper
   toute la largeur, comme le bilan (.container-fluid.px-0). */
@media (max-width: 767px) {
    #victime_form_id .container-fluid:not(.px-0) {
        padding-left: 6px;
        padding-right: 6px;
    }
    #victime_form_id .row.g-2 {
        margin-left: -3px;
        margin-right: -3px;
    }
    #victime_form_id .row.g-2 > [class*="col-"] {
        padding-left: 3px;
        padding-right: 3px;
    }
    #victime_form_id .card {
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.07);
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------- Statuts du bilan, mode simple (#12221) ----------
   Grille de lignes « libellé + interrupteur ». Remplace l'ancienne table de
   4 colonnes pilotée par des `tr:has(.switch)` : `:has()` n'existe pas avant
   iOS 15.4 (toute la règle sautait), et la mise en page ne tenait que parce
   que 270px de libellé + 49px d'interrupteur faisaient pile la largeur
   disponible — au moindre pixel de moins, l'interrupteur partait hors écran.
   Ici chaque ligne est un bloc autonome : le libellé se réduit (min-width:0),
   l'interrupteur garde sa taille et reste toujours visible. */
#victime_form_id .vic-statut-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 24px;
}

@media (min-width: 768px) {
    #victime_form_id .vic-statut-grid {
        grid-template-columns: 1fr 1fr;
    }
}

#victime_form_id .vic-statut-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--vic-touch);
    padding: 2px 0;
    border-bottom: 1px solid var(--eb-border);
}

/* Libellé cliquable : la cible tactile fait toute la largeur de la ligne,
   au lieu des 45x20 px de l'interrupteur seul. */
#victime_form_id .vic-statut-label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    overflow-wrap: break-word;
}

#victime_form_id .vic-statut-item .switch {
    flex: 0 0 45px;
    margin: 0;
}

/* ---------- Asterisks et alertes ---------- */
#victime_form_id .RedClass,
#victime_form_id .red {
    color: var(--eb-danger);
    font-weight: 600;
}

/* Champ pré-rempli par le scan d'un bracelet (victimes.php, `?qrcode=`) :
   on montre d'où vient la valeur, on n'alerte de rien. Bleu d'information et
   non l'ancien fond jaune vif à texte rouge. Le liseré est posé en `inset` :
   il ne prend pas de place, donc le champ ne se décale pas au chargement. */
#victime_form_id .vic-field-scanned {
    background: var(--eb-primary-light);
    border-color: var(--eb-primary);
    box-shadow: inset 3px 0 0 0 var(--eb-primary);
}
/* Le thème sombre repeint les inputs plus haut dans ce fichier avec une
   couleur en dur (#1e2128) : sans ce rappel, il effacerait le liseré. */
:root.dark #victime_form_id input[type="text"].vic-field-scanned {
    background: var(--eb-primary-light);
    border-color: var(--eb-primary);
    color: var(--eb-text);
}

/* ---------- Print : conserver le rendu legacy ---------- */
@media print {
    #victime_form_id input[type="radio"].radiobutton {
        position: static;
        opacity: 1;
    }
    #victime_form_id input[type="radio"].radiobutton + label {
        all: unset;
        margin-left: 4px;
    }
    #victime_form_id .victime-sticky-actions {
        display: none;
    }
}

/* ============================================================
   #11412 — Parcours par étapes du bilan sur mobile
   ------------------------------------------------------------
   Le bilan complet fait 11 rubriques et 200+ champs, soit 13 écrans de
   défilement sur un téléphone. On en montre UNE à la fois. Tout est sous
   `.vbw-on`, posé par le JS uniquement en dessous de 768 px : le poste fixe
   garde la vue complète, qui est la bonne à cet endroit.
   ============================================================ */
body.vbw-on .vbilan-card.vbw-hidden {
    /* Masqué à l'affichage MAIS conservé dans le DOM : l'autosave et l'envoi
       sérialisent le formulaire entier, retirer les rubriques inactives
       enverrait un bilan tronqué. */
    display: none !important;
}

.vbw-bar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--eb-surface, #fff);
    border-bottom: 1px solid var(--eb-border, #dee2e6);
    margin: 0 0 12px;
    padding: 8px 10px 10px;
}
.vbw-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--eb-border, #e9ecef);
    overflow: hidden;
}
.vbw-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--eb-primary, #0d6efd);
    transition: width .25s ease;
}
.vbw-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.vbw-jump {
    flex: 1 1 auto;
    min-width: 0;             /* sans quoi le select déborde en flex */
    height: 44px;             /* cible tactile confortable avec des gants */
    font-size: 1rem;
    padding: 0 10px;
    border: 1px solid var(--eb-border, #ced4da);
    border-radius: 8px;
    background: var(--eb-surface, #fff);
    color: inherit;
}
.vbw-count {
    flex: 0 0 auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--eb-ink-muted, #6c757d);
}

/* Barre d'action fixée en bas : les pouces y sont, et elle reste atteignable
   sans remonter toute la rubrique. */
.vbw-nav {
    position: fixed;
    left: 0;
    right: 0;
    /* Calée au-dessus de la bande d'actions du produit (#band-container),
       dont la hauteur est mesurée en JS : posée à 0, elle recouvrait les
       boutons Enregistrer / Transmettre / Supprimer. */
    bottom: var(--vbw-bottom, 0px);
    z-index: 1030;
    display: flex;
    gap: 8px;
    /* Cette barre est empilée SOUS la bande d'actions du produit : à deux, elles
       mangeaient un sixième de l'écran d'un téléphone, avant même la barre de
       navigation native de l'application. On serre le rembourrage ; la surface
       tactile, elle, reste celle du produit (--eb-tap-target). */
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--eb-surface, #fff);
    border-top: 1px solid var(--eb-border, #dee2e6);
    box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
/* ⚠️ La marge du bas d'écran (barre gestuelle Android, encoche iPhone) ne
   concerne QUE la barre posée tout en bas. Dès que la bande d'actions du
   produit est là, c'est ELLE qui occupe ce bas d'écran — et elle ne réserve
   aucune marge de son côté. Notre barre, empilée au-dessus, ajoutait donc la
   marge une seconde fois : ~40 px de blanc mort SOUS les boutons dans
   l'application (invisible sur un navigateur de bureau, où la marge vaut 0).
   La classe est posée par js/victime-wizard.js, qui sait s'il y a une bande. */
body.vbw-above-band .vbw-nav {
    padding-bottom: 6px;
}
.vbw-nav button {
    flex: 1 1 0;
    /* 44 px = la cible tactile du produit : visable ganté, en mouvement.
       Hauteur de ligne et rembourrage tenus ici : sans eux, un téléphone réglé
       sur une grande police pousse le bouton au-delà de la cible tactile et
       épaissit la barre d'autant. */
    min-height: var(--eb-tap-target, 44px);
    padding: 0 10px;
    line-height: 1.2;
    font-size: .95rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid var(--eb-primary, #0d6efd);
    background: var(--eb-primary, #0d6efd);
    color: #fff;
}
.vbw-nav button:disabled {
    opacity: .45;
    background: var(--eb-border, #e9ecef);
    border-color: var(--eb-border, #e9ecef);
    color: var(--eb-ink-muted, #6c757d);
}
.vbw-nav .vbw-prev {
    background: transparent;
    color: var(--eb-primary, #0d6efd);
}
/* Dernière rubrique : le bouton ne fait plus avancer, il clôt le bilan. Le vert
   du produit (celui du bouton « Sauver ») dit qu'on valide, pas qu'on continue. */
.vbw-nav .vbw-done {
    background: var(--eb-success-fill, var(--eb-success, #198754));
    border-color: var(--eb-success-fill, var(--eb-success, #198754));
}

/* La barre du bas recouvrirait la fin de la rubrique et la pastille d'état.
   ⚠️ PAS sur `body` : `write_buttons_band()` (fonctions.php) écrit un
   `style.paddingBottom` EN LIGNE valant la seule hauteur de SA bande, et le
   réécrit à chaque redimensionnement via un ResizeObserver — notre règle,
   simple feuille de style, perdait à tous les coups. La réserve du bas ne
   tenait donc plus qu'aux marges des cartes : 25 px de jeu sous la barre
   Précédent / Suivant, là où on en visait 64. On réserve la place DANS le
   flux, sous les rubriques : les deux hauteurs s'ajoutent au lieu de se
   disputer la même déclaration. */
body.vbw-on .vbilan-cards { padding-bottom: 64px; }
body.vbw-on .vic-autosave-status { bottom: calc(72px + var(--vbw-bottom, 0px)); }

/* Cibles tactiles : sur le terrain, avec des gants, 30 px ne se visent pas.
   On remonte les champs et les cases du bilan à une taille sûre. */
@media (max-width: 768px) {
    body.vbw-on .vbilan-card input[type="text"],
    body.vbw-on .vbilan-card input[type="time"],
    body.vbw-on .vbilan-card input[type="number"],
    body.vbw-on .vbilan-card select,
    body.vbw-on .vbilan-card textarea {
        min-height: 44px;
        font-size: 16px;      /* < 16px : iOS zoome à la mise au point */
    }
    body.vbw-on .vbilan-card input[type="checkbox"],
    body.vbw-on .vbilan-card input[type="radio"] {
        width: 24px;
        height: 24px;
    }
    /* La zone cliquable suit la case, sinon on agrandit la cible sans
       agrandir ce qui la déclenche. */
    body.vbw-on .vbilan-card label {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
}

:root.dark .vbw-bar,
:root.dark .vbw-nav { background: #1e2128; border-color: #343a44; }
:root.dark .vbw-jump { background: #262a33; border-color: #3a4150; }

/* ⚠️ La barre de pastilles RESTE sur téléphone. Elle était masquée parce
   qu'elle naviguait par ancre : avec le parcours par étapes, les autres
   rubriques sont en display:none et un clic n'allait nulle part. Le carrousel
   appelle maintenant `ebVictimeWizardGoTo()` et change d'étape — le menu
   redevient utile, et il se déplace au doigt, ce qu'une liste déroulante ne
   sait pas faire.
   Le sélecteur d'étape de l'assistant fait dès lors double emploi : deux menus
   pour la même chose sur l'écran où la place manque le plus. On garde la barre
   de progression et le compteur, qui eux disent autre chose. */
body.vbw-on .vbw-jump { display: none !important; }

/* Le compteur restait seul à gauche, avec le vide de la liste déroulante à sa
   droite. Il se range au bout de la barre de progression, qui dit la même
   chose sous une autre forme, et la barre d'étape reprend deux lignes de haut
   au lieu de trois. */
body.vbw-on .vbw-head { margin-top: 6px; justify-content: flex-end; }
body.vbw-on .vbw-count { font-size: .85rem; }

/* Au doigt, la pastille visée doit être atteignable sans viser : 34 px de
   haut, et un rappel d'arrêt pour que le glissement s'immobilise sur une
   pastille entière plutôt qu'au milieu d'un mot. */
@media (max-width: 767px) {
    .vbilan-nav-inner { scroll-snap-type: x proximity; }
    a.vbilan-pill,
    .vbilan-pill { scroll-snap-align: start; min-height: 34px; }
    /* Les flèches ne servent qu'à la souris : au doigt elles volent 68 px de
       largeur à la bande, sur l'écran où elle est le plus étroite. */
    .vbilan-nav.vbilan-nav-scrollable .vbilan-nav-arrow { display: none; }
}

/* ⚠️ Le cale-place, lui, RESTE. Il était masqué avec la barre du temps où le
   bloc épinglé ne contenait qu'elle : sans barre, rien à réserver. Le bloc
   porte maintenant aussi la conduite à tenir, qui reste affichée dans le
   parcours par étapes — masquer le cale-place la faisait alors recouvrir le
   haut du formulaire, sur le seul écran où la place manque déjà. Quand le bloc
   est vide, sa hauteur mesurée vaut zéro : la réserve disparaît d'elle-même. */

/* Sur un téléphone, le bandeau doit tenir dans un coin d'écran, pas le
   confisquer : la source part (c'est de la traçabilité, pas de l'action, et
   elle reste dans le PDF et sur poste fixe) et la liste défile. */
@media (max-width: 768px) {
    .vbilan-conduite { padding: 6px 10px; }
    .vbilan-conduite-list { max-height: 22vh; gap: 4px; }
    .vbc-item { font-size: .82rem; gap: 6px; }
    .vbc-source { display: none; }
}

/* Bouton de dictée des champs de texte libre (#11412, axe 3). Dicter un bilan
   circonstanciel va bien plus vite que le taper à une main avec des gants. */
/* Posé DANS le libellé du champ, à droite du titre : c'est là qu'on lit ce
   qu'on doit faire, et l'offre de dicter arrive donc avant qu'on commence à
   taper. Sous la zone de saisie, elle arrivait après — souvent hors écran. */
.vbw-mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;          /* le libellé ne doit pas doubler de hauteur */
    padding: 3px 9px;
    margin-left: 8px;
    vertical-align: middle;
    border-radius: 999px;
    border: 1px solid var(--eb-border, #ced4da);
    background: var(--eb-surface, #fff);
    color: var(--eb-ink-muted, #6c757d);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}
/* Le doigt vise plus large que le dessin : la pastille reste compacte, sa zone
   sensible atteint la cible tactile du produit. */
#victime_form_id .vbw-mic { position: relative; }
#victime_form_id .vbw-mic::after {
    content: '';
    position: absolute;
    inset: calc((var(--eb-tap-target, 44px) - 100%) / -2) -4px;
}
.vbw-mic:hover { border-color: var(--eb-primary, #0d6efd); color: var(--eb-primary, #0d6efd); }
/* Enregistrement en cours : rouge et pulsé — l'état doit être lisible d'un
   coup d'œil, on ne laisse pas un micro ouvert sans le signaler. */
.vbw-mic-on {
    background: var(--eb-danger, #dc3545);
    border-color: var(--eb-danger, #dc3545);
    color: #fff;
    animation: vbwMicPulse 1.2s ease-in-out infinite;
}
@keyframes vbwMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,.45); }
    50%      { box-shadow: 0 0 0 6px rgba(220,53,69,0); }
}
@media (prefers-reduced-motion: reduce) { .vbw-mic-on { animation: none; } }
:root.dark .vbw-mic { background: #262a33; border-color: #3a4150; color: #9aa4b2; }

/* Schéma corporel cliquable (#11412, axe 3). Le champ texte reste la source
   de vérité : ce schéma ne fait que le remplir. */
.vbp-bodymap { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.vbp-bodymap-svg {
    width: 120px;
    height: auto;
    max-height: 230px;
    background: var(--vic-cat-bg, #f4f6fa);
    border: 1px solid var(--vic-cat-border, #d8dde6);
    border-radius: var(--vic-radius, 8px);
}
.vbp-zone {
    fill: #cdd4de;
    stroke: #fff;
    stroke-width: 1;
    cursor: pointer;
    transition: fill .12s ease;
}
.vbp-zone:hover  { fill: #9fb0c6; }
.vbp-zone:focus  { outline: none; fill: #9fb0c6; }
/* Zone touchée : rouge franc — sur un bilan, une localisation cochée doit se
   distinguer sans effort, y compris en plein soleil. */
.vbp-zone.on     { fill: var(--eb-danger, #dc3545); }
.vbp-zone-btn {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--vic-cat-border, #d8dde6);
    background: var(--eb-surface, #fff);
    color: inherit;
    font-weight: 600;
    cursor: pointer;
}
.vbp-zone-btn.on {
    background: var(--eb-danger, #dc3545);
    border-color: var(--eb-danger, #dc3545);
    color: #fff;
}
:root.dark .vbp-bodymap-svg { background: #2a2d35; border-color: #3d4250; }
:root.dark .vbp-zone { fill: #4a5160; stroke: #1e2128; }
:root.dark .vbp-zone-btn { background: #262a33; border-color: #3a4150; }