/* ============================================================
   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;
}

@media (hover: hover){: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; }

@media (hover: hover){.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;
}

@media (hover: hover){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;
}

/* Champ calculé (score de Glasgow, index de choc) : un résultat, pas une
   saisie. Il se lit comme une valeur affichée, sans cadre de champ.
   ⚠️ Ces trois déclarations étaient en style EN LIGNE dans
   fonctions_bilan_victime.php (FONT-SIZE: 10pt; border:0px), donc
   inatteignables par le thème sombre : un fond de champ clair y restait
   peint sous le texte. */
/* ⚠️ `!important` sur la bordure et le fond : css/dashboard-modern.css impose
   `border: 1px solid var(--eb-border) !important` et un fond à TOUS les
   `.form-control` de la V2. Un `!important` ne se bat pas à la spécificité —
   c'est pour la même raison que le style EN LIGNE d'origine (`border:0px`)
   n'avait, lui non plus, jamais rien donné : le champ calculé s'affichait
   dans un cadre de saisie, alors qu'on ne peut rien y saisir. */
#victime_form_id .vbp-computed {
    border: 0 !important;
    background: transparent !important;
    font-size: 1.05rem;
    font-weight: 700;
    padding-left: 0;
}

/* ---------- 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:focus-visible{
    background: var(--bkg-color1, #fff);
    color: var(--vic-active, #0d6efd);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12) !important;
}
@media (hover: hover){#victime_form_id .eb-vic-hdr-btn:hover{
    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:focus-visible{
    background: #3a3f4b;
    color: #fff;
}
@media (hover: hover){:root.dark #victime_form_id .eb-vic-hdr-btn:hover{
    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, le groupe « ou … ans » ne se comprime jamais — mais
   la date garde un plancher de saisie, et à l'étroit c'est le groupe qui passe
   à la ligne (il est insécable, il descend d'un bloc). */
#victime_form_id .eb-birthdate-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
/* ⚠️ Base flex DÉFINIE, jamais `auto` : `auto` renvoie au `width`, et le bloc
   mobile plus bas impose `width: 100% !important` à tous les champs de la fiche
   — la base de la date valait donc la largeur ENTIÈRE de la ligne.
   ⚠️ Le plancher porte `!important` parce que css/main.css force
   `min-width: 0 !important` sur tout `.card .form-control` en dessous de 768px :
   sans lui, aucun plancher ne tient et le champ peut tomber à ses bordures.
   La base vaut le plancher : la paire tient alors sur une ligne jusqu'aux plus
   petits téléphones (≈ 320px de large), et ne se replie qu'en deçà. */
/* 104 px : la date la plus large (« 31.12.2008 », 61 px) et le modèle
   « JJ.MM.AAAA » (77 px) y tiennent avec leurs marges. À 118 px, la paire ne
   tenait plus dans la demi-colonne de la fiche au bureau (218 px) : « ou 71
   ans » passait seul sur une seconde ligne. */
#victime_form_id .eb-birthdate-field .datepicker {
    flex: 1 1 104px;
    min-width: 104px !important;
}

/* ⚠️ 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: 4px;
    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.
   ⚠️⚠️ Le `!important` sur la largeur est OBLIGATOIRE, et c'est le correctif de
   #12434 : sans lui, `width: 100% !important` du bloc mobile s'applique à ce
   champ. La base flex de 60px suffit à le DESSINER correctement, mais WebKit
   (iPhone, et les WebView Android anciennes) se sert du `width` — pas de la base
   flex — pour calculer la largeur max-content du groupe « ou … ans » : mesuré
   339px au lieu de 111px sur un écran de 430px. Le groupe étant en `flex: 0 0`,
   il ne rend rien : c'est la DATE qui absorbait tout le débordement et tombait à
   ses seules bordures (26px de large), impossible à viser et à lire. La fiche
   paraissait normale sur un navigateur de bureau, où le calcul est correct. */
#victime_form_id .eb-bd-age-input {
    flex: 0 0 52px;
    width: 52px !important;
    max-width: 52px !important;
    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;
}

/* #12451 — Le CHAMP lui-même passe au rouge, pas seulement son libellé. Une
   constante hors bornes (fréquence, tension, saturation) est ce qui fait
   basculer la victime en pastille rouge : il faut voir LAQUELLE, et sans
   avoir à relire tous les libellés.
   `!important` : css/dashboard-modern.css impose la bordure de tous les
   `.form-control` de la V2, un `!important` ne se bat pas à la spécificité. */
#victime_form_id .vbp.vbp-alerted .form-control,
#victime_form_id .vbp.vbp-alerted .vbp-tension .form-control {
    border-color: var(--eb-danger, #c1272d) !important;
    background: var(--vic-radio-alert, #fde7e9) !important;
    color: var(--vic-radio-alert-text, #842029);
    font-weight: 600;
}
/* Le champ calculé (index de choc) n'a pas de cadre : c'est son texte qui
   rougit. */
#victime_form_id .vbp.vbp-alerted .vbp-computed {
    background: transparent !important;
    color: var(--eb-danger, #c1272d);
}

/* Pression artérielle : deux cases et une barre, pour que le format attendu
   se voie sans lire l'aide. */
/* ⚠️ `flex` sur le conteneur ET `width:auto` sur les deux cases : Bootstrap
   pose `width:100%` sur tout `.form-control`, et deux cases à 100 % dans un
   conteneur en flux normal se retrouvent l'une SOUS l'autre, avec la barre
   coincée entre les deux. */
.vbp-tension { display: flex; align-items: center; gap: 8px; max-width: 230px; }
.vbp-tension .form-control {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    text-align: center;
    font-weight: 600;
}
.vbp-tension-sep {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--eb-text-secondary, #8a94a6);
}

/* 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:focus-visible{
    color: var(--vic-active);
}
@media (hover: hover){#victime_form_id .vbp-help:hover{
    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;
}

@media (hover: hover){#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);
}

/* Le titre ne porte plus de fond à lui : l'en-tête est transparent, et le
   titre seul s'y dessinait en bande grise jusqu'au milieu de la carte
   (« Victime n°3 ▒▒▒▒▒ », « Complément ▒▒▒▒▒ »). */
#victime_form_id .card-header {
    background: #fafbfc;
    font-weight: 600;
}
#victime_form_id .card .card-title {
    background: transparent;
    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;
}
/* …sauf le titre et ce qu'il contient : l'en-tête est transparent, le titre
   s'y découpait en bande plus claire (« Complément ▒▒▒▒ »). La pastille du
   numéro garde son fond. */
:root.dark #victime_form_id .card .card-title,
:root.dark #victime_form_id .card .card-title :not(.vic-num) {
    background: transparent !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,
.bvb-preview .RedClass {
    color: var(--eb-danger);
    font-weight: 600;
}

/* #12630 — Sortie du bloc <STYLE> de victimes.php (tout le CSS dans css/) :
   option « à documenter » d'une liste du bilan. La fiche et l'aperçu du
   paramétrage (bilan_victime_preview.php) rendent les mêmes champs. `.TITLE`,
   posée dans le même bloc, ne l'était sur aucun élément : retirée. */
#victime_form_id .PinkClass,
.bvb-preview .PinkClass {
    color: var(--eb-primary);
    background-color: var(--eb-primary-light);
    font-weight: 600;
}

/* Statut d'une victime dans la liste (victimes_load.php), sorti de son
   attribut style= (#12630). */
.eb-vic-statut-badge {
    color: var(--txt-color28);
    background-color: var(--bkg-color103);
}

/* Aperçu de la fiche dans le paramétrage (bilan_victime_preview.php), sorti
   de son bloc <style> : règles de comportement relues sous chaque libellé. */
.bvb-preview .vbp { margin-bottom: 8px; }
.bvb-preview .bvb-rule-note { font-size: .72rem; opacity: .7; font-weight: 400; font-style: italic; display: block; }

/* 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-text-secondary, #64748b);
}

/* 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 + var(--eb-safe-bottom, 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-text-secondary, #64748b);
}
.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; }

/* #12451 (lot 5) — Téléphone : la pastille d'actions du produit est rangée
   DANS cette barre (js/victime-wizard.js). Sa boîte d'origine, désormais vide,
   garderait sa hauteur et son ombre au bas de l'écran. */
body.vbw-fusion #band-container,
body.vbw-fusion .bandResponsive { display: none !important; }

/* Dans la barre, la pastille n'est plus une barre : ni fond, ni ombre, ni
   position propre — juste le groupe de boutons, serré à gauche. */
body.vbw-fusion .vbw-nav .ebf-band-pill {
    position: static;
    inset: auto;
    transform: none;
    margin: 0;
    padding: 0;
    gap: 6px;
    background: none;
    border: 0;
    box-shadow: none;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
/* « Précédent » et « Suivant » se partagent ce qui reste ; « ⋯ » et
   « Enregistrer » gardent leur largeur de bouton. */
/* « Suivant » est le geste de la rubrique : il prend la place qui reste.
   « Précédent » garde juste la sienne, sur une ligne — à 390 px, partagée en
   deux, la flèche passait au-dessus du mot. */
body.vbw-fusion .vbw-nav .vbw-prev {
    flex: 0 1 auto;
    white-space: nowrap;
    padding: 0 8px;
    font-size: .9rem;
}
body.vbw-fusion .vbw-nav .vbw-next { flex: 1 1 0; min-width: 0; white-space: nowrap; }
/* Enregistrer : dernier de la barre, et de la largeur d'un bouton. */
body.vbw-fusion .vbw-nav .vbw-sauver { flex: 0 0 auto; order: 9; min-height: var(--eb-tap-target, 44px); }
body.vbw-fusion .vbw-nav .ebf-band-pill .btn {
    min-height: var(--eb-tap-target, 44px);
    flex: 0 0 auto;
}
/* Le menu « ⋯ » s'ouvre au-dessus de la barre, qui est maintenant la seule :
   plus rien à enjamber, l'écart posé en JS pour la bande n'a plus lieu d'être. */
/* Le menu « ⋯ » s'ouvre au-dessus de la barre, qui est maintenant la seule :
   plus rien à enjamber, l'écart posé en JS pour la bande n'a plus lieu d'être.
   Et il s'aligne sur le BORD GAUCHE du bouton : « ⋯ » ouvre la barre, un menu
   aligné à droite (le réglage de la pastille) débordait de 122 px hors écran. */
body.vbw-fusion .vbw-nav .eb-plus-menu {
    margin-bottom: 8px !important;
    left: 0 !important;
    right: auto !important;
}
/* Les actions descendues dans le menu y retrouvent leur nom : la pastille le
   masque sous 768 px (.hide_mobile), le menu, lui, a la place. */
body.vbw-fusion .eb-plus-menu .vbw-rapatrie .btn > span.hide_mobile { display: inline !important; }
body.vbw-fusion .eb-plus-menu .vbw-rapatrie .btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}
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.
   #12461 — `(hover: none)` en plus du seuil : ce bloc ne vise pas un écran
   étroit mais un DOIGT, et un iPhone tourné (844 à 956px) en sortait — les
   cibles retombaient à 30px et le zoom au focus revenait, précisément sur
   l'écran qu'on remplit sur le terrain. */
@media (max-width: 768px), (hover: none) {
    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-text-secondary, #64748b);
    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;
}
@media (hover: hover){.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;
}
@media (hover: hover){.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; }

/* ------------------------------------------------------------
   #12451 — Localisation d'une lésion sur la silhouette (type de champ
   `bodypicker`). On touche l'endroit atteint au lieu de dérouler une liste
   de vingt-deux parties du corps.
   La liste reste rendue et n'est masquée QUE lorsque le schéma s'est
   construit : `.vbp-bp-on` est posée par js/victime-bodymap.js, jamais par
   le PHP. Sans JavaScript, on garde la liste.
   ------------------------------------------------------------ */
/* Dessin à gauche, commandes à sa droite : empilés, le bloc faisait deux fois
   la hauteur des questions voisines et creusait la rubrique. `wrap` pour que
   la colonne repasse dessous sur un écran étroit. */
/* Les deux silhouettes tiennent sur une ligne, le résumé se met dessous :
   plus de bouton « Face / Dos », donc plus de colonne de commandes à côté du
   dessin. */
.vbp-bp-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.vbp-bp-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vbp-bp-svg {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    background: linear-gradient(145deg, #f9fbfd, #eaf0f6);
    border: 1px solid #cad5e1;
    border-radius: 10px;
}
/* Le dégradé SVG donne du volume tout en gardant un contour continu. */
.vbp-bp-corps { stroke: #788b9d; stroke-width: .65; stroke-linejoin: round; }
.vbp-bp-detail { fill: none; stroke: #70869b; stroke-width: .7; stroke-linecap: round; opacity: .48; pointer-events: none; }
/* Zone atteinte : rouge franc — une localisation choisie doit se voir sans
   effort, y compris en plein soleil sur un poste de secours. Découpée au
   contour du corps (clip-path), elle en épouse la forme. */
.vbp-bp-hot { fill: var(--eb-danger, #dc3545); }
/* Surfaces de touche : invisibles, posées par-dessus tout le reste. Au survol
   elles éclairent la partie visée — sur un poste fixe, c'est ce qui dit ce
   qu'on est en train de désigner avant de cliquer. */
.vbp-bp-hit {
    fill: transparent;
    cursor: pointer;
    transition: fill .1s ease;
}
.vbp-bp-hit:hover, .vbp-bp-hit:focus { fill: rgba(13, 110, 253, .28); outline: none; }

.vbp-bp-current {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 28px;
    font-size: .95rem;
    color: var(--eb-text-secondary, #6c757d);
}
.vbp-bp-current b { color: var(--eb-danger, #dc3545); }
.vbp-bp-clear {
    border: 0;
    background: transparent;
    color: var(--eb-text-secondary, #6c757d);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
}
.vbp-bp-clear:hover { color: var(--eb-danger, #dc3545); }

.vbp-bp-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; }
.vbp-bp-chip {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--vic-cat-border, #d8dde6);
    border-radius: 8px;
    background: var(--eb-surface, #fff);
    color: inherit;
    font-size: .9rem;
    cursor: pointer;
    touch-action: manipulation;
}
.vbp-bp-chip.on {
    background: var(--eb-danger, #dc3545);
    border-color: var(--eb-danger, #dc3545);
    color: #fff;
}

/* Yeux et bouche : ils disent qu'on regarde la victime DE FACE. Purement
   décoratifs — le doigt les traverse pour atteindre la zone dessous. */
/* Bouche : tombante, et purement décorative — le doigt la traverse pour
   atteindre le visage dessous. Les YEUX, eux, sont des zones cliquables. */
.vbp-bp-mouth { fill: none; stroke: #6b7688; stroke-width: 1.3; stroke-linecap: round; pointer-events: none; }

/* Yeux : gris foncé tant qu'ils ne sont pas désignés. Au gris du corps ils se
   fondaient dans la tête, et le visage n'avait plus de sens de lecture — on
   ne voyait plus s'il s'agissait de la face ou du dos.
   `:not(.on)` plutôt qu'une règle placée avant : la zone atteinte reste rouge
   quel que soit l'ordre des déclarations. */
.vbp-bp-oeil { fill: #566072; }

/* Repères « Droit » / « Gauche » et légendes « Face » / « Dos ».
   ⚠️ Sélecteurs préfixés par l'identifiant du formulaire et taille en unités
   du dessin : sans cela, une règle de police du produit reprenait la main et
   les repères sortaient deux fois trop gros, tronqués par le bord du cadre. */
#victime_form_id .vbp-bp-side,
.vbp-bp-side {
    font-size: 5.5px;
    font-weight: 700;
    fill: #43566b;
    pointer-events: none;
}
#victime_form_id .vbp-bp-legende,
.vbp-bp-legende {
    font-size: 7px;
    font-weight: 700;
    fill: #344b62;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Œil, oreille : trop petits pour un doigt. Le contour TRANSPARENT élargit la
   cible de trois unités tout autour sans rien changer au dessin — SVG teste
   le contour comme la surface. */
.vbp-bp-hit.vbp-bp-fin { stroke: transparent; stroke-width: 7; }

/* Traumatismes secondaire et additionnel repliés (js/victimes.js).
   ⚠️ `display:none` et non un retrait du DOM : les champs restent soumis. La
   classe n'est posée que par le JavaScript — sans lui, les trois blocs sont
   visibles, comme avant. */
#victime_form_id .vbp.eb-trauma-cache { display: none !important; }

/* Le libellé d'un traumatisme ouvre un bloc de quatre questions : il se lit
   comme un intertitre. Les trois se ressemblent donc — « principal » était
   seul en gras, parce qu'il pilotait l'affichage des deux autres, ce qui
   n'est plus le cas. */
#victime_form_id .vbp.eb-trauma-titre .vbp-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--eb-text, #212529);
}
.eb-trauma-del {
    border: 0;
    background: transparent;
    color: var(--eb-text-secondary, #8a93a2);
    cursor: pointer;
    padding: 2px 8px;
    font-size: .95rem;
    line-height: 1;
}
.eb-trauma-del:hover { color: var(--eb-danger, #dc3545); }
.eb-trauma-more { margin: 4px 0 14px; }
.eb-trauma-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px dashed var(--vic-cat-border, #d8dde6);
    border-radius: 10px;
    background: transparent;
    color: var(--vic-active, #0d6efd);
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}
.eb-trauma-btn:hover { border-style: solid; background: var(--vic-active-bg, #e7f1ff); }

/* Schéma en place : la liste s'efface. `!important` parce que bootstrap-select
   pose `display:inline-block` en style EN LIGNE sur son conteneur. */
#victime_form_id .vbp.vbp-bp-on .vbp-field > select,
#victime_form_id .vbp.vbp-bp-on .vbp-field > .bootstrap-select { display: none !important; }

/* Le champ « Côté » est piloté par le dessin : cinq boutons pour redire ce
   qu'on vient de désigner du doigt, c'est une question posée deux fois. Il
   reste dans le formulaire (c'est lui qu'on enregistre) et le résumé sous la
   silhouette montre le côté retenu. La classe est posée par
   js/victime-bodymap.js, jamais par le PHP : si le schéma ne se construit
   pas, ou si la liste de l'organisation n'a ni « Droit » ni « Gauche », le
   champ reste à l'écran. */
#victime_form_id .vbp.vbp-cote-auto { display: none !important; }

/* ------------------------------------------------------------
   Rubrique à silhouette : deux colonnes réelles.
   La silhouette est deux fois plus haute que les champs qui l'accompagnent.
   Dans une grille Bootstrap, les colonnes se remettent à plat sous le PLUS
   HAUT élément de la ligne : « Douleur » repartait donc tout en bas, et une
   demi-page restait blanche sous « Traumatisme principal ».
   Une grille CSS règle ça sans rien déplacer dans le DOM : le dessin occupe
   la colonne de droite sur deux rangées, les questions s'empilent à gauche
   dans leur ordre de saisie.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    #victime_form_id .row.vict-row-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* La silhouette s'étend sur deux rangées : c'est la SECONDE qui
           absorbe sa hauteur. En `auto auto`, l'excédent se partageait en
           deux et « Douleur » flottait au milieu de la colonne de gauche. */
        grid-template-rows: auto 1fr;
        align-items: start;
    }
    /* Même chose pour les traumatismes secondaire et additionnel, une fois
       dépliés (js/victimes.js retire `.eb-trauma-cache`). Les rangées `1fr`
       prennent toutes la même hauteur : c'est sans effet ici, chaque bloc
       porte la même silhouette. */
    #victime_form_id .row.vict-row-body:has(> .vict-vbp-body:not(.eb-trauma-cache) ~ .vict-vbp-body:not(.eb-trauma-cache)) {
        grid-template-rows: auto 1fr auto 1fr;
    }
    #victime_form_id .row.vict-row-body:has(> .vict-vbp-body:not(.eb-trauma-cache) ~ .vict-vbp-body:not(.eb-trauma-cache) ~ .vict-vbp-body:not(.eb-trauma-cache)) {
        grid-template-rows: auto 1fr auto 1fr auto 1fr;
    }
    /* Les largeurs Bootstrap n'ont plus cours dans une grille : sans cette
       remise à zéro, chaque champ ne prendrait que la moitié de sa cellule. */
    #victime_form_id .row.vict-row-body > .vbp,
    #victime_form_id .row.vict-row-body > .col-12 {
        width: auto;
        max-width: none;
        flex: none;
    }
    #victime_form_id .row.vict-row-body > .vict-vbp-body { grid-row: span 2; }
    /* La silhouette prend TOUTE la colonne de droite (13/11/2026) : à 320 px
       elle n'en occupait que la moitié, et c'est elle qu'on touche du doigt. */
    #victime_form_id .row.vict-row-body > .vict-vbp-body .vbp-bp-svg { max-width: none; }
    /* Ce qui était pleine largeur le reste (zones de texte, bloc photos). */
    #victime_form_id .row.vict-row-body > .col-12:not(.col-md-6):not(.col-md-4):not(.col-md-3) {
        grid-column: 1 / -1;
    }
}

:root.dark .vbp-bp-svg { background: #2a2d35; border-color: #3d4250; }
:root.dark .vbp-bp-corps { stroke: #d4e0ea; }
:root.dark .vbp-bp-side, :root.dark .vbp-bp-legende { fill: #d8e2ec; }
:root.dark .vbp-bp-oeil { fill: #cbd2dd; }
:root.dark .vbp-bp-mouth { stroke: #cbd2dd; }
:root.dark .vbp-bp-tab,
:root.dark .vbp-bp-chip { background: #262a33; border-color: #3a4150; }

/* ============================================================
   #12451 — Statut couleur du bilan (pastille sur l'onglet Victime
   et dans la liste des victimes) + barre des sous-onglets de la fiche
   ============================================================ */
.eb-bilan-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin: 0 5px;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset;
}
/* Le sélecteur long répète celui de tab-scroll.css (« .sub-tabs li.nav-item >
   a.nav-link span { background: transparent !important; margin: 0 !important } »)
   en plus spécifique : sans lui, la pastille posée dans l'onglet Victime était
   rendue transparente et collée au libellé. */
.eb-bilan-dot--vert,
.sub-tabs li.nav-item > a.nav-link span.eb-bilan-dot--vert   { background: #2DA160 !important; }
.eb-bilan-dot--rouge,
.sub-tabs li.nav-item > a.nav-link span.eb-bilan-dot--rouge  { background: #dc3545 !important; }
.eb-bilan-dot--violet,
.sub-tabs li.nav-item > a.nav-link span.eb-bilan-dot--violet { background: #7b2fbf !important; }
.eb-bilan-dot--noir,
.sub-tabs li.nav-item > a.nav-link span.eb-bilan-dot--noir   { background: #16181d !important; box-shadow: 0 0 0 1px #9aa4b2 inset; }
.sub-tabs li.nav-item > a.nav-link span.eb-bilan-dot { margin: 0 0 0 5px !important; }

/* Les onglets de la fiche victime se touchaient : tab-scroll.css ne leur
   laisse que « margin: 0 2px », soit 4 px entre deux pilules — invisible dès
   que l'onglet actif a un fond plein. Le sélecteur porte l'id pour passer
   devant cette règle. */
#myTab2 li.nav-item { margin: 0 10px 0 0; }
#myTab2 li.nav-item:last-child { margin-right: 0; }

/* ============================================================
   #12451 — Décharge de refus de transport (modale de victimes.php)
   ============================================================ */
/* main.css descend toutes les modales de 20 % et neutralise le défilement
   interne de bootstrap : le formulaire (4 pads de signature) dépassait de
   l'écran sans aucun ascenseur. Le corps défile, l'en-tête reste visible.
   #12801 — le retrait n'est plus un `top` mais un `padding-top: 20vh` sur
   .modal : il s'AJOUTAIT aux 28 px ci-dessous. Fenêtre de 790 px, ouverte
   depuis le bilan : contenu de y=186 à y=920, et .modal sans défilement sous
   .dropdown-initial — « Enregistrer la décharge » hors d'atteinte. */
#modal_decharge { top: 0 !important; padding-top: 0 !important; }
#modal_decharge .modal-dialog { max-height: calc(100vh - 56px); margin-top: 28px; }
#modal_decharge .modal-content { max-height: calc(100vh - 56px); display: flex; flex-direction: column; }
/* !important : .dropdown-initial .modal-body force overflow visible !important
   dans main.css, et la fiche victime vit sous un conteneur .dropdown-initial. */
#modal_decharge .modal-body { overflow-y: auto !important; overscroll-behavior: contain; }
.vd-decharge { text-align: left; }
.vd-decharge .vd-texte {
    background: var(--eb-surface-hover, #f4f6f9);
    border-left: 3px solid var(--eb-primary, #2f6fdb);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: .92rem;
}
.vd-decharge .vd-required { color: var(--eb-danger, #dc3545); }
.vd-decharge .vd-row { margin: 10px 0 4px; }
.vd-decharge .vd-row label { font-size: 14px; color: #495057; display: block; margin-bottom: 4px; }
.vd-decharge .vd-date-heure { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 8px; max-width: 360px; }
.vd-decharge .vd-informed { margin: 12px 0; }
.vd-signs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.vd-sign { border: 1px solid var(--vic-cat-border, #d8dde6); border-radius: 8px; padding: 8px; background: #fff; }
.vd-sign-label { font-size: 13px; color: #495057; margin-bottom: 4px; }
.vd-sign-img { max-width: 100%; height: 90px; object-fit: contain; display: block; }
:root.dark .vd-decharge .vd-texte { background: #262a33; }
:root.dark .vd-decharge .vd-row label { color: #CBD5E1; }
/* La carte reste blanche en sombre (la signature est un trait sombre sur fond
   clair) : son libellé garde donc l'encre du thème clair. En #CBD5E1, il
   disparaissait sur ce fond blanc. */
:root.dark .vd-sign { background: #fff; }

/* Écran de scan d'un bracelet (scan_victime.php), sorti de son bloc <style>
   (#12630). */
/* Cadre de visée : mêmes proportions que le lecteur de l'activité (280x180
   dans BarcodeScanner.js), fond sombre pour que l'image de la caméra ne flotte
   pas sur du blanc le temps qu'elle démarre. */
.eb-scan-victime { max-width: 640px; margin: 0 auto; }
.eb-scan-viewport {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    min-height: 240px;
}
.eb-scan-viewport video { display: block; width: 100%; }
/* Caméra refusée ou absente : le cadre cesse d'être un rectangle noir muet. */
.eb-scan-viewport.eb-scan-hs {
    background: var(--bkg-color28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
}

/* Paramétrage > Victime : tableau des statuts (status_victime.php). Le bloc
   <style> visait `.table-striped-3`, classe d'autres tableaux du produit : la
   règle les repeignait tant que le fragment restait en mémoire (SPA). Bornée
   au tableau des statuts (#12630). */
#table_statut:not(.cards) tbody tr:nth-child(odd) *:not(span,input,label) {
    background-color: var(--bkg-color31) !important;
}

/* Revue des écrans (27/10/2026) — Statuts, Destinations, Transporteurs.
   En-têtes lisibles en entier (« ACTIONS » s'écrivait « AC… » — la colonne
   n'est plus triable : trier des boutons ne voulait rien dire — et la colonne
   du bulletin « VISIBLE SUR LE BULLETIN DE REN… ») : ils passent sur deux
   lignes plutôt que d'être coupés. */
:is(#table_statut, #table_dest, #table_transp) > thead > tr > th .th-inner {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.15;
}
:is(#table_statut, #table_dest, #table_transp) > thead > tr > th:last-child {
    width: 1%;
}
/* Retour à la ligne entre les mots seulement : « BULLETI / N » se coupait
   au milieu du mot. */
:is(#table_statut, #table_dest, #table_transp) > thead > tr > th .th-inner {
    word-break: normal !important;
    overflow-wrap: normal !important;
}
/* Sous 1 200 px la colonne du bulletin n'a que 125 px, dont 32 de marges :
   marges de 8 px et en-tête en petit, sur trois lignes au lieu de cinq. */
@media (max-width: 1199.98px) {
    #table_statut > thead > tr > th { padding-left: var(--eb-space-2) !important; padding-right: var(--eb-space-2) !important; }
    #table_statut > thead > tr > th .th-inner { font-size: var(--eb-fs-xs) !important; letter-spacing: 0 !important; }
}
:is(#table_statut, #table_dest, #table_transp) > thead > tr > th:last-child .th-inner {
    white-space: nowrap !important;
    min-width: max-content;
}

/* Téléphone : une carte par ligne, le nom et ses deux boutons sur la même
   ligne, l'interrupteur du bulletin dessous avec son libellé — la carte
   faisait 118 px pour un nom de deux mots et une ligne vide. */
:is(#table_statut, #table_dest, #table_transp).cards .card-views {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--eb-space-2);
    row-gap: var(--eb-space-1);
}
:is(#table_statut, #table_dest, #table_transp).cards .card-view {
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--eb-space-2);
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
:is(#table_statut, #table_dest, #table_transp).cards .card-view .card-view-title,
:is(#table_statut, #table_dest, #table_transp).cards .card-view .card-view-value {
    width: auto !important;
    text-align: left !important;
}
:is(#table_statut, #table_dest, #table_transp).cards .card-view-field-name { grid-column: 1; grid-row: 1; }
:is(#table_statut, #table_dest, #table_transp).cards .card-view-field-name .card-view-title,
:is(#table_statut, #table_dest, #table_transp).cards .card-view-field-action .card-view-title {
    display: none !important;
}
:is(#table_statut, #table_dest, #table_transp).cards .card-view-field-name .card-view-value {
    font-weight: 600;
    color: var(--eb-text);
    min-width: 0;
    overflow-wrap: anywhere;
}
:is(#table_statut, #table_dest, #table_transp).cards .card-view-field-action { grid-column: 2; grid-row: 1; }
:is(#table_statut, #table_dest, #table_transp).cards .card-view-field-action .card-view-value {
    display: flex !important;
    gap: var(--eb-space-1);
}
:is(#table_statut, #table_dest, #table_transp).cards .card-view-field-action .btn-action { margin: 0 !important; }
:is(#table_statut, #table_dest, #table_transp).cards .card-view-field-doc .card-view-title {
    flex: 1 1 auto !important;
    min-width: 0;
    max-width: none !important;
    white-space: normal;
    color: var(--eb-text-secondary) !important;
    font-size: var(--eb-fs-sm) !important;
    text-transform: none;
    font-weight: 400 !important;
}
:is(#table_statut, #table_dest, #table_transp).cards .card-view-field-doc .card-view-value { flex: 0 0 auto; }
:is(#table_statut, #table_dest, #table_transp).cards .card-view-field-doc .switchconfig { margin: 0; }

/* Carte « ce bracelet ne désigne aucune victime » (eb_victime_bracelet_orphelin_html(),
   fonctions.php), sortie de sa chaîne <style> PHP (#12630). */
.eb-brorph { display:flex; justify-content:center; padding:28px 16px 40px; }
.eb-brorph-card {
    width:100%; max-width:520px; text-align:center;
    background:var(--eb-surface,#fff); color:var(--eb-text,#17202e);
    border:1px solid var(--eb-border,#e2e8f0); border-radius:18px;
    padding:34px 28px 28px;
    box-shadow:0 18px 40px -24px rgba(15,23,42,.35);
}
/* Le QR barré : un carré au ton d'alerte, badge en bas à droite. */
.eb-brorph-icon {
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:84px; height:84px; margin-bottom:18px; border-radius:22px;
    background:var(--eb-warning-light,#fff4e8); color:var(--eb-warning,#d97706);
    font-size:2.3rem;
}
.eb-brorph-icon-badge {
    position:absolute; right:-6px; bottom:-6px;
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    background:var(--eb-danger-fill,#dc2626); color:#fff; font-size:.82rem;
    border:3px solid var(--eb-surface,#fff);
}
.eb-brorph-title { margin:0 0 10px; font-size:1.25rem; font-weight:700; line-height:1.3; }
.eb-brorph-lead { margin:0 0 18px; font-size:.97rem; line-height:1.55; color:var(--eb-text-secondary,#4a5361); }
/* Le code lu, en évidence : c'est ce qu'on relit au poignet pour vérifier
   que le lecteur n'a pas tronqué le numéro. */
.eb-brorph-code {
    display:inline-flex; flex-direction:column; gap:4px; align-items:center;
    padding:12px 22px; margin-bottom:18px; border-radius:12px;
    background:var(--eb-surface-muted,#f1f5f9); border:1px dashed var(--eb-border,#cbd5e1);
    max-width:100%;
}
.eb-brorph-code-label {
    font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    color:var(--eb-text-muted,#64748b);
}
.eb-brorph-code-value {
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:1.15rem; font-weight:700; letter-spacing:.02em;
    /* Un code de fournisseur tiers peut être long : il se coupe plutôt
       que de pousser la carte hors de l'écran. */
    overflow-wrap:anywhere; max-width:100%;
}
.eb-brorph-hint { margin:0 0 24px; font-size:.88rem; line-height:1.5; color:var(--eb-text-muted,#6b7480); }
/* #12759 — Les fiches d'autres activités qui portent le numéro lu : une par ligne. */
.eb-brorph-ailleurs { display:flex; flex-direction:column; gap:8px; margin:0 0 18px; }
.eb-brorph-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
/* 44 px : cible tactile tenable avec des gants, comme le reste du terrain. */
.eb-brorph-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
@media (max-width:540px) {
    .eb-brorph { padding:18px 12px 30px; }
    .eb-brorph-card { padding:26px 18px 22px; border-radius:14px; }
    .eb-brorph-actions .eb-brorph-btn { flex:1 1 100%; }
}

/* Groupes d'équipes de la liste « Responsable » d'un centre d'accueil
   (cav_edit.php), sortis de leur style en ligne (#12630) : jeton du produit,
   plus la couleur d'accent de l'instance. */
.eb-cav-optgroup { background-color: var(--eb-primary-light); }

/* ---------- Styles sortis des attributs style= des écrans Victime (#12630) ----------
   Restent en ligne, volontairement : les `display:none` que le JavaScript
   bascule (.show() réécrit le display en ligne, un .d-none !important le
   battrait), et les couleurs calculées en PHP (pastilles de cav_load.php). */

/* Fiche victime (victimes.php) */
.eb-vict-icone-alerte { color: orange; }
.eb-vict-icone-qr { color: purple; }
.eb-vict-fiche { margin-bottom: 40px; }
.eb-vict-entete { margin-bottom: 5px; }
.eb-vict-entete-ajustee { width: fit-content; }
hr.eb-vict-separateur { margin: 12px 0; }
/* Boutons Sauver / Supprimer tenus en bas d'écran sur téléphone. */
.eb-vict-actions-fixes { position: fixed; bottom: 0; right: 18%; }

/* Centre d'accueil (cav_edit.php) : main.css (#cav_edit .eb-cav-form) remet
   chaque ligne en grille ; ceci ne sert qu'avant son chargement. */
.eb-cav-form { width: 100%; table-layout: fixed; }
.eb-cav-form > colgroup > col { width: 20%; }

/* Modales Destination / Transporteur (status_victime.php) */
.modal.eb-vict-modal-remontee { margin-top: -6%; }

/* Rapport d'import (ajax_import_victimes.php) */
.eb-vimp-badges { gap: .5rem; }
.eb-vimp-erreurs { max-height: 280px; overflow: auto; }
.eb-vimp-telecharger { width: max-content; }
.eb-vimp-note { font-size: 12px; }

/* Choix de la planche de bracelets (victimes_stats.php) */
.eb-vbr-boite { text-align: left; max-width: 340px; margin: 0 auto; }
.eb-vbr-question { margin: 0 0 14px; }
.eb-vbr-libelle { min-width: 70px; margin: 0; }
.eb-vbr-note { margin: 14px 0 0; font-size: .85em; }

/* ============================================================
   Liste des victimes d'une activité (victimes_stats.php / victimes_load.php)
   — revue des écrans du 24/10/2026. Tout est sous #victimes_stats ; les
   colonnes sont visées par leur data-class (eb-vl-…), bootstrap-table ne
   posant pas de data-field sur les <td>.
   Bureau : en-têtes lisibles en entier (« LOCALISATION ACTUE… », « E… »,
   « RÉGULATIO… » : la marge de 18 + 20 px des en-têtes triables ramenée à
   8 px), texte aligné à gauche, identité en gras, heure de sortie à la
   suite de l'heure d'entrée.
   Téléphone : la carte dit qui est la victime, où elle est, depuis quand et
   s'il faut la réguler, sur trois lignes — elle en prenait quatre pour
   l'identifiant, le bracelet et le lieu seulement.
   ============================================================ */
#victimes_stats .fixed-table-container thead th .th-inner {
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-overflow: clip;
    /* Sur un portable étroit, « Localisation actuelle » passe sur deux
       lignes plutôt que d'être coupée. */
    white-space: normal !important;
    line-height: 1.3 !important;
    height: auto !important;
}
#victimes_stats .fixed-table-container thead th .th-inner.sortable {
    padding-right: 18px !important;
}
/* 8 px au lieu de 12 px au-dessus et au-dessous : une ligne fait 49 px au
   lieu de 57, la liste d'un poste de secours chargé tient sur un écran. */
#victimes_stats table.table:not(.cards) > tbody > tr > td {
    padding: 8px !important;
}
#victimes_stats table.table:not(.cards) > tbody > tr > td:is(.eb-vl-num, .eb-vl-ident, .eb-vl-lieu, .eb-vl-heure, .eb-vl-identite),
#victimes_stats .fixed-table-container thead th:is(.eb-vl-num, .eb-vl-ident, .eb-vl-lieu, .eb-vl-heure, .eb-vl-identite) .th-inner {
    text-align: left !important;
}
#victimes_stats table.table:not(.cards) > tbody > tr > td.eb-vl-num {
    white-space: nowrap;
}
#victimes_stats table.table:not(.cards) > tbody > tr > td.eb-vl-num .eb-bilan-dot {
    margin-left: 0;
}
#victimes_stats td.eb-vl-identite {
    font-weight: 600;
    color: var(--eb-text);
}
#victimes_stats .eb-vl-vide {
    font-weight: 400;
    font-style: italic;
    color: var(--eb-text-muted);
}
#victimes_stats .eb-vl-heure {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
#victimes_stats .eb-vl-sortie {
    color: var(--eb-text-secondary);
}

/* ---------- Téléphone : carte sur trois lignes ----------
   ┌ ● V07   B-0019                 [À réguler] ┐
   │ DUPONT Marie                   10:05 → 11:30│
   └ Poste de secours principal      [✎] [🗑]   ┘
   Les colonnes optionnelles qu'on afficherait en plus (date, âge, sexe,
   statut, transport) gardent leur libellé, sur une ligne pleine. */
#victimes_stats table.cards .card-views {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "num ident regul"
        "nom nom heure"
        "lieu lieu actions";
    align-items: center;
    column-gap: var(--eb-space-2);
    row-gap: var(--eb-space-1);
}
#victimes_stats table.cards .card-view {
    grid-column: 1 / -1;
    min-height: 0 !important;
    margin: 0 !important;
}
#victimes_stats table.cards .card-view:is(.card-view-field-num, .card-view-field-identification, .card-view-field-regul, .card-view-field-identite, .card-view-field-entree, .card-view-field-localisation-actuelle, .card-view-field-boutons) {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
}
#victimes_stats table.cards .card-view:is(.card-view-field-num, .card-view-field-identification, .card-view-field-regul, .card-view-field-identite, .card-view-field-entree, .card-view-field-localisation-actuelle, .card-view-field-boutons) .card-view-title {
    display: none !important;
}
#victimes_stats table.cards .card-view:is(.card-view-field-num, .card-view-field-identification, .card-view-field-regul, .card-view-field-identite, .card-view-field-entree, .card-view-field-localisation-actuelle, .card-view-field-boutons) .card-view-value {
    display: block !important;
    width: auto !important;
    min-width: 0;
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#victimes_stats table.cards .card-view-field-num { grid-area: num; }
#victimes_stats table.cards .card-view-field-num .card-view-value {
    font-weight: 600;
    color: var(--eb-text);
}
#victimes_stats table.cards .card-view-field-num .eb-bilan-dot { margin-left: 0; }
#victimes_stats table.cards .card-view-field-identification { grid-area: ident; }
#victimes_stats table.cards .card-view-field-identification .card-view-value {
    color: var(--eb-text-secondary);
}
#victimes_stats table.cards .card-view-field-regul { grid-area: regul; }
#victimes_stats table.cards .card-view-field-identite { grid-area: nom; }
#victimes_stats table.cards .card-view-field-identite .card-view-value {
    font-weight: 600;
    font-size: var(--eb-fs-md) !important;
    color: var(--eb-text);
}
#victimes_stats table.cards .card-view-field-entree { grid-area: heure; }
#victimes_stats table.cards .card-view-field-localisation-actuelle { grid-area: lieu; }
#victimes_stats table.cards .card-view-field-localisation-actuelle .card-view-value {
    color: var(--eb-text-secondary);
}
#victimes_stats table.cards .card-view-field-boutons { grid-area: actions; }
#victimes_stats table.cards .card-view:is(.card-view-field-regul, .card-view-field-entree, .card-view-field-boutons) .card-view-value {
    text-align: right !important;
    overflow: visible;
}
#victimes_stats table.cards .card-view-field-boutons .card-view-value {
    display: flex !important;
    justify-content: flex-end;
    gap: var(--eb-space-1);
}
#victimes_stats table.cards .card-view-field-boutons .btn-action {
    margin: 0 !important;
}

/* ============================================================
   Fiche d'une victime et bilan complet (victimes.php) — revue des écrans
   du 24/10/2026. Même information, moins de hauteur.
   ============================================================ */
/* En-tête de la carte « Victime » sur UNE ligne au bureau : le titre
   s'étirait (evenement_modern.css lui rend `flex: 1 1 auto`) et poussait
   « Régulé » et les quatre boutons sur une seconde ligne — 104 px d'en-tête
   pour un titre de deux mots. */
#victime_form_id .card-header.graycard > .card-title.flex-grow-0 {
    flex: 0 0 auto !important;
    width: auto !important;
}
/* 20 px de marge au lieu de 24 : avec le filet bleu de 4 px, le titre
   tombe à l'aplomb des champs de la carte (il les dépassait de 4 px), et
   l'en-tête garde la place de « Régulé », des quatre boutons et de la
   pastille « Sauvegardé » sur la même ligne. */
#victime_form_id .card.card-default.graycarddefault > .card-header.graycard {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 6px !important;
}
/* Avertissement RGPD à côté du libellé « Nom », plus sur une ligne à part. */
#victime_form_id .eb-vict-cnil {
    display: inline-block;
    margin-left: var(--eb-space-1);
    vertical-align: middle;
    line-height: 1;
}
/* ---------- Adresse : même grille que l'état civil ----------
   Le bloc adresse (create_input_address(), partagé par tout le produit,
   rendu ici dans .vic-address-table) restait un tableau « libellé à gauche »
   de six lignes sous une grille « libellé au-dessus » : deux mises en page
   dans la même carte, et 418 px de haut. Les libellés passent au-dessus,
   Code postal | Ville et État/Région | Complément côte à côte, alignés sur
   les colonnes Nom | Prénom. Au téléphone, deux
   lignes de champs au lieu de quatre.
   ⚠️ Les lignes masquées le restent : le widget les cache par un style en
   ligne (display:none, plus fort qu'une règle sans !important) ou par
   .display_none, exclu ici. */
/* Calée sur la .row de l'état civil juste au-dessus : même décalage de
   −12 px (main.css donne `width: 100%` à toute .row, qui garde sa marge
   négative) et même marge intérieure de 15 px par colonne. */
#victime_form_id .vic-address-table {
    display: block;
    width: 100%;
    margin-left: -12px;
}
/* Au téléphone, la .row de l'état civil déborde de 12 px des DEUX côtés. */
@media (max-width: 767.98px) {
    /* !important : la table porte .w-100, et main.css borne toute
       table.noBorder d'une carte à 100 % (width et max-width). */
    #victime_form_id table.vic-address-table {
        width: calc(100% + 24px) !important;
        max-width: none !important;
        margin-right: -12px;
    }
}
/* `table.` : à égalité avec la règle téléphone qui remet tout tableau
   .noBorder de la fiche en blocs (plus haut), et placée après elle. */
#victime_form_id table.vic-address-table > tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}
#victime_form_id .vic-address-table > tbody > tr:not(.display_none) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-wrap: nowrap;
    grid-column: 1 / -1;
    margin: 0;
    /* !important : la ligne Ville porte un `padding: 0px` en ligne. */
    padding: 0 15px !important;
    border: 0;
}
#victime_form_id .vic-address-table > tbody > tr[id]:not(.display_none) {
    margin-bottom: 10px;
}
#victime_form_id .vic-address-table > tbody > tr:is(#zipcode-input, #city-input, #state1-input, #state2-input) {
    grid-column: auto;
}
#victime_form_id .vic-address-table > tbody > tr > td {
    display: block;
    width: auto !important;
    padding: 0 !important;
}
#victime_form_id .vic-address-table > tbody > tr > td:first-child {
    margin-bottom: 4px;
    white-space: normal;
}
#victime_form_id .vic-address-table input[type="number"].form-control-sm {
    max-width: none;
}
/* « Adresse ⚙ Décomposée ☑ » sur une ligne (le <br> du widget en faisait deux). */
#victime_form_id .vic-address-table td.myAddrese {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--eb-space-1) var(--eb-space-3);
    margin-bottom: 6px;
}
#victime_form_id .vic-address-table td.myAddrese > br {
    display: none;
}
#victime_form_id .vic-address-table td.myAddrese label {
    margin: 0 !important;
}

/* ---------- Téléphone : date et heure d'arrivée / de sortie sur une ligne ---------- */
@media (max-width: 767.98px) {
    #victime_form_id :is(#rowtime1, #rowtime2) > td:first-child {
        flex: 0 0 100%;
    }
    /* Base non nulle : à 0, la date tenait encore sur la ligne du libellé
       (100 % + 0) et s'y écrasait à droite, hors de l'écran. */
    #victime_form_id :is(#rowtime1, #rowtime2) > td:nth-child(2) {
        flex: 1 1 140px;
        width: auto;
        min-width: 0;
    }
    #victime_form_id :is(#rowtime1, #rowtime2) > td:nth-child(3) {
        flex: 0 0 96px;
        width: auto;
        padding-left: var(--eb-space-2);
    }
}

/* ---------- Bilan complet : réponses courtes sur la ligne de leur question ----------
   Oui / Non, mesures (− 18 +), tension, heure, score calculé : la question
   prenait une ligne et sa réponse une autre, sur une demi-colonne de 520 px
   où les deux tenaient côte à côte. La question reste à gauche, la réponse
   se range à droite, un filet sépare les lignes (comme les interrupteurs de
   la fiche) : le bilan raccourcit d'un tiers sans changer un seul bouton.
   Trop étroit (téléphone, libellé long), la réponse repasse sous la
   question. Pas en vue tablette (body.vict-mode), qui a sa propre mise en
   page. Classes posées par bv_render_field() (fonctions_bilan_victime.php). */
body:not(.vict-mode) #victime_form_id .vbp:is(.vbp-t-radio, .vbp-t-numeric, .vbp-t-float, .vbp-t-tension, .vbp-t-readonlytext, .vbp-t-time):not(.vbp-hidden) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: var(--eb-space-3);
    row-gap: 0;
    min-height: 0;
    /* Pas étirée à la hauteur d'une voisine haute (liste de pastilles) :
       la ligne garde la hauteur de ses boutons, filet compris. */
    align-self: flex-start;
    margin-bottom: 0 !important;
    padding-top: 2px;
    padding-bottom: 2px;
    /* Filet tracé sous le CONTENU de la colonne, pas sous ses marges de
       15 px : un border-bottom dépassait des champs de part et d'autre. */
    background-image: linear-gradient(var(--eb-border), var(--eb-border));
    background-repeat: no-repeat;
    background-size: calc(100% - 30px) 1px;
    background-position: 15px 100%;
}
body:not(.vict-mode) #victime_form_id .vbp:is(.vbp-t-radio, .vbp-t-numeric, .vbp-t-float, .vbp-t-tension, .vbp-t-readonlytext, .vbp-t-time) > .vbp-label {
    flex: 1 1 100px;
    min-width: 0;
    margin: 0 !important;
}
body:not(.vict-mode) #victime_form_id .vbp:is(.vbp-t-radio, .vbp-t-numeric, .vbp-t-float, .vbp-t-tension, .vbp-t-readonlytext, .vbp-t-time) > .vbp-field {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}
body:not(.vict-mode) #victime_form_id .vbp.vbp-t-radio .vbp-radios {
    flex-wrap: nowrap;
}
body:not(.vict-mode) #victime_form_id .vbp.vbp-t-radio input[type="radio"].radiobutton + label {
    flex: 0 0 auto;
    min-width: 64px;
}
body:not(.vict-mode) #victime_form_id .vbp.vbp-t-radio input[type="radio"].radiobutton:last-of-type + label {
    margin-right: 0;
}
/* Mesure : le champ n'a besoin que de cinq caractères (« 36.8 », « 120 »). */
body:not(.vict-mode) #victime_form_id .vbp:is(.vbp-t-numeric, .vbp-t-float) .vict-stepper .form-control {
    width: 88px !important;
    max-width: 88px;
    flex: 0 0 88px;
}
/* Heure et « Maintenant » côte à côte. */
body:not(.vict-mode) #victime_form_id .vbp.vbp-t-time > .vbp-field {
    display: flex;
    align-items: center;
    gap: var(--eb-space-2);
}
body:not(.vict-mode) #victime_form_id .vbp.vbp-t-time > .vbp-field .form-control {
    width: 96px !important;
    max-width: 96px;
}
body:not(.vict-mode) #victime_form_id .vbp.vbp-t-time > .vbp-field .vict-quickbtn {
    margin: 0;
}
/* Score calculé (Glasgow, index de choc) : un résultat lu à droite. */
body:not(.vict-mode) #victime_form_id .vbp.vbp-t-readonlytext .vbp-computed {
    width: 6em !important;
    text-align: right;
    padding-right: 0;
}

/* ---------- Arrivée / Sortie : l'heure reste entière ----------
   Entre 992 et 1 190 px de fenêtre, le champ heure tombait à 56 px et ne
   montrait plus que « 10:4 ». Le libellé prend sa largeur juste, le champ
   heure garde de quoi afficher « hh:mm ». */
#victime_form_id #rowtime1 > td:first-child,
#victime_form_id #rowtime2 > td:first-child {
    width: 1%;
    white-space: nowrap;
}
#victime_form_id input[name="time_in"],
#victime_form_id input[name="time_out"] {
    min-width: 76px;
}

/* ---------- Matériel utilisé sur la victime (victime_materiel.php) ---------- */
/* La page centre son contenu (align=center hérité) : une liste se lit à gauche. */
.eb-vm {
    text-align: left;
}
.eb-vm-titre {
    font-weight: 600;
    margin-bottom: var(--eb-space-2, .5rem);
}
.eb-vm-titre-groupe {
    margin-top: var(--eb-space-3, 1rem);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--eb-text-muted, #6c757d);
}
.eb-vm-ligne {
    display: flex;
    align-items: center;
    gap: var(--eb-space-2, .5rem);
    padding: .5rem 0;
    border-bottom: 1px solid var(--eb-border, #e5e7eb);
}
.eb-vm-info {
    flex: 1 1 auto;
    min-width: 0;
}
.eb-vm-nom {
    font-weight: 500;
    overflow-wrap: anywhere;
}
.eb-vm-sous {
    font-size: .8rem;
    color: var(--eb-text-muted, #6c757d);
}
.eb-vm-sous .fas {
    width: 1.1em;
}
.eb-vm-actions {
    display: flex;
    align-items: center;
    gap: var(--eb-space-2, .5rem);
    flex: 0 0 auto;
}
.eb-vm-stock {
    font-size: .8rem;
    color: var(--eb-text-muted, #6c757d);
    white-space: nowrap;
}
.eb-vm-qte {
    width: auto;
    flex-wrap: nowrap;
}
.eb-vm-qte .input-group-text {
    min-width: 2.4em;
    justify-content: center;
}
/* Titre de la fenêtre : « Matériel utilisé  Victime n°2 », le numéro en retrait. */
#modal_victime_materiel .eb-vm-numero:not(:empty) {
    margin-left: .5rem;
    padding-left: .5rem;
    border-left: 1px solid var(--eb-border, #e5e7eb);
    font-weight: 400;
    color: var(--eb-text-muted, #6c757d);
}
/* La recherche reste à portée quand on fait défiler une longue liste. Le
   corps de la fenêtre défile ; on recolle la barre à son bord haut. */
.eb-vm .eb-vm-recherche {
    position: sticky;
    top: calc(-1 * var(--bs-modal-padding, 1rem));
    z-index: 2;
    padding: .5rem 0;
    background: var(--bs-modal-bg, var(--bs-body-bg, #fff));
}
/* Ligne qui vient de bouger : un bref surlignage dit « c'est noté ». */
.eb-vm-ligne {
    transition: background-color .6s ease;
}
.eb-vm-ligne.eb-vm-flash {
    background-color: var(--bs-success-bg-subtle, #d1e7dd);
    transition: none;
}
.eb-vm-sous .badge {
    font-weight: 500;
}
/* Téléphone : le stock passe sous le bouton pour garder le libellé lisible. */
@media (max-width: 575.98px) {
    .eb-vm-groupe .eb-vm-ligne .eb-vm-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: .25rem;
    }
}

/* ---------- Surveillance de la victime (victime_surveillance.php) ---------- */
/* Niveaux : n1 = à surveiller (orange), n2 = anormal (rouge). Couleurs du
   thème : elles suivent le mode sombre. */
.eb-vsu {
    text-align: left;
}
.eb-vsu-etat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: var(--eb-space-3, 1rem);
}
.eb-vsu-rappel {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--eb-surface-muted, #f3f4f6);
    font-size: .9rem;
}
.eb-vsu-rappel-retard {
    background: var(--eb-warning-light, #fff3cd);
    color: var(--eb-text, #212529);
    font-weight: 600;
}
.eb-vsu-saisie {
    /* Les formulaires du produit sont en ligne par défaut : un cadre en ligne
       ne s'étire pas autour de sa grille. */
    display: block;
    border: 1px solid var(--eb-border, #e5e7eb);
    border-radius: .5rem;
    padding: .75rem;
    margin-bottom: var(--eb-space-3, 1rem);
    background: var(--eb-surface, #fff);
}
.eb-vsu-saisie-titre {
    font-weight: 600;
    margin-bottom: .5rem;
}
.eb-vsu-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: .5rem;
}
.eb-vsu-champ {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    font-size: .8rem;
    font-weight: 500;
    color: var(--eb-text-secondary, #495057);
}
.eb-vsu-champ > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eb-vsu-champ input {
    font-size: 1rem;
    text-align: center;
}
.eb-vsu-champ-ta {
    grid-column: span 2;
}
.eb-vsu-ta {
    display: flex;
    align-items: center;
    gap: .25rem;
}
/* Le fond et la bordure des champs sont imposés en !important par
   « body.eb-has-topbar-v2 .form-control:not(…) » : le sélecteur d'alerte
   reprend ses :not() pour passer devant. */
body .eb-vsu .eb-vsu-champ input.form-control.eb-vsu-n1:not(textarea):not(.bootstrap-select):not(.alert-red-fade):not(.eb-field-error) {
    border-color: var(--eb-warning, #f59e0b) !important;
    background-color: var(--eb-warning-light, #fff3cd) !important;
    font-weight: 700;
}
body .eb-vsu .eb-vsu-champ input.form-control.eb-vsu-n2:not(textarea):not(.bootstrap-select):not(.alert-red-fade):not(.eb-field-error) {
    border-color: var(--eb-danger, #dc3545) !important;
    background-color: var(--eb-danger-light, #f8d7da) !important;
    color: var(--eb-danger, #dc3545) !important;
    font-weight: 700;
}
.eb-vsu-bas {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
}
.eb-vsu-obs {
    flex: 1 1 auto;
}
.eb-vsu-bas .btn {
    white-space: nowrap;
}
.eb-vsu-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .5rem;
    margin-bottom: var(--eb-space-3, 1rem);
}
.eb-vsu-carte {
    min-width: 0;
    border: 1px solid var(--eb-border, #e5e7eb);
    border-left-width: 4px;
    border-left-color: var(--eb-success, #198754);
    border-radius: .5rem;
    padding: .4rem .6rem .3rem;
    background: var(--eb-surface, #fff);
}
.eb-vsu-carte.eb-vsu-n1 { border-left-color: var(--eb-warning, #f59e0b); }
.eb-vsu-carte.eb-vsu-n2 { border-left-color: var(--eb-danger, #dc3545); }
.eb-vsu-carte-tete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}
.eb-vsu-carte-nom {
    font-size: .8rem;
    color: var(--eb-text-secondary, #495057);
}
.eb-vsu-carte-val {
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
}
.eb-vsu-carte-val small {
    font-weight: 400;
    color: var(--eb-text-muted, #6c757d);
}
.eb-vsu-carte-val .fas {
    font-size: .8rem;
    color: var(--eb-text-muted, #6c757d);
}
.eb-vsu-carte.eb-vsu-n2 .eb-vsu-carte-val { color: var(--eb-danger, #dc3545); }
.eb-vsu-courbe {
    display: block;
    width: 100%;
    height: 56px;
    margin-top: .2rem;
}
.eb-vsu-carte-seul {
    height: 56px;
    display: flex;
    align-items: center;
}
.eb-vsu-normal {
    fill: var(--eb-success, #198754);
    fill-opacity: .12;
}
.eb-vsu-ligne {
    fill: none;
    stroke: var(--eb-primary, #2563eb);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}
.eb-vsu-pt {
    fill: var(--eb-primary, #2563eb);
    vector-effect: non-scaling-stroke;
}
.eb-vsu-pt.eb-vsu-n1 { fill: var(--eb-warning, #f59e0b); }
.eb-vsu-pt.eb-vsu-n2 { fill: var(--eb-danger, #dc3545); }
.eb-vsu-tableau {
    margin-bottom: .5rem;
    font-variant-numeric: tabular-nums;
}
.eb-vsu-tableau th,
.eb-vsu-tableau td {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.eb-vsu-tableau td.eb-vsu-h,
.eb-vsu-tableau td.eb-vsu-obs-cell {
    text-align: left;
}
.eb-vsu-tableau td.eb-vsu-obs-cell {
    white-space: normal;
    min-width: 160px;
}
.eb-vsu-tableau td.eb-vsu-n1 {
    /* Bootstrap peint les cellules par --bs-table-bg-state (ombre interne) :
       un simple background resterait dessous. */
    --bs-table-bg-state: var(--eb-warning-light, #fff3cd);
    background: var(--eb-warning-light, #fff3cd);
    font-weight: 600;
}
.eb-vsu-tableau td.eb-vsu-n2 {
    --bs-table-bg-state: var(--eb-danger-light, #f8d7da);
    background: var(--eb-danger-light, #f8d7da);
    color: var(--eb-danger, #dc3545);
    font-weight: 700;
}
/* « div.modal-content table tr td » impose un fond blanc en !important :
   la couleur d'une valeur doit passer au-dessus. */
div.modal-content .eb-vsu-tableau td.eb-vsu-n1 {
    background-color: var(--eb-warning-light, #fff3cd) !important;
}
div.modal-content .eb-vsu-tableau td.eb-vsu-n2 {
    background-color: var(--eb-danger-light, #f8d7da) !important;
}
.eb-vsu-tableau tr.eb-vsu-initial td {
    color: var(--eb-text-secondary, #495057);
}
@media (max-width: 575.98px) {
    .eb-vsu-grille { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
    .eb-vsu-champ-heure,
    .eb-vsu-champ-ta { grid-column: 1 / -1; }
    .eb-vsu-bas { flex-direction: column; }
    .eb-vsu-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eb-vsu-carte-tete { flex-wrap: wrap; }
}

/* Fenêtres Surveillance et Matériel utilisé : centrées en hauteur, comme les
   boîtes SweetAlert. main.css décale toutes les .modal de 20vh vers le bas
   (padding-top) ; modal-dialog-centered ne centre que dans ce qui reste. */
#modal_victime_surveillance,
#modal_victime_materiel {
    padding-top: 0 !important;
}

/* ---------- Lien avec la régulation (victime_regulation.php, regulation.php) ---------- */
.eb-vrg-decision {
    border: 1px solid var(--eb-border, #e5e7eb); border-left: 4px solid var(--eb-primary, #2563eb);
    border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .5rem; background: var(--eb-surface, #fff);
}
.eb-vrg-ton-urgent { border-left-color: var(--eb-danger, #dc2626); }
.eb-vrg-ton-attention { border-left-color: var(--eb-warning, #d97706); }
.eb-vrg-ton-ok { border-left-color: var(--eb-success, #16a34a); }
.eb-vrg-decision-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.eb-vrg-decision-quand { margin-left: auto; color: var(--eb-text-muted, #6b7280); font-size: .85rem; }
.eb-vrg-decision-dest { margin-top: .25rem; }
.eb-vrg-decision-consignes { margin-top: .25rem; white-space: normal; }
#modal_victime_regulation {
    padding-top: 0 !important;
}
.eb-vrg { text-align: left; }
.eb-vrg-bloc { margin-bottom: 1rem; }
.eb-vrg-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.eb-vrg-ligne { display: flex; gap: .5rem; }
.eb-vrg-ligne .form-control { flex: 1 1 auto; min-width: 0; font-size: 1rem; }
.eb-vrg-ligne .btn { white-space: nowrap; font-weight: 600; }
.eb-vrg-aide { margin-top: .35rem; font-size: .82rem; color: var(--eb-text-muted, #6b7280); }
/* Accueil : rien n'est encore parti. */
.eb-vrg-accueil { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.1rem; }
.eb-vrg-accueil-icone {
    flex: 0 0 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--eb-primary-light, #e0e7ff); color: var(--eb-primary, #2563eb); font-size: 1.4rem;
}
.eb-vrg-accueil-titre { font-weight: 700; font-size: 1.05rem; }
.eb-vrg-accueil-texte { color: var(--eb-text-secondary, #4b5563); font-size: .9rem; }
.eb-vrg-ou { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--eb-text-muted, #6b7280); font-size: .85rem; }
.eb-vrg-ou::before, .eb-vrg-ou::after { content: ''; flex: 1; border-top: 1px solid var(--eb-border, #e5e7eb); }
/* Les trois étapes : envoyé → ouvert → décision. */
.eb-vrg-etapes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: 0; margin: 0 0 1rem; counter-reset: none; }
.eb-vrg-etape {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem;
    font-size: .85rem; color: var(--eb-text-muted, #6b7280);
}
.eb-vrg-etape:not(:last-child)::after {
    content: ''; position: absolute; top: 18px; left: calc(50% + 24px); right: calc(-50% + 24px);
    border-top: 2px dashed var(--eb-border, #e5e7eb);
}
.eb-vrg-etape-fait:not(:last-child)::after { border-top-style: solid; border-top-color: var(--eb-success, #16a34a); }
.eb-vrg-pastille {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--eb-surface-muted, #f3f4f6); color: var(--eb-text-muted, #6b7280); border: 2px solid var(--eb-border, #e5e7eb);
}
.eb-vrg-etape-fait .eb-vrg-pastille { background: var(--eb-success, #16a34a); border-color: var(--eb-success, #16a34a); color: #fff; }
.eb-vrg-etape-courante .eb-vrg-pastille {
    border-color: var(--eb-primary, #2563eb); color: var(--eb-primary, #2563eb);
    animation: eb-vrg-attente 1.6s ease-in-out infinite;
}
@keyframes eb-vrg-attente { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .35); } 50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); } }
.eb-vrg-etape-nom { font-weight: 600; color: var(--eb-text, #1f2937); }
.eb-vrg-etape-avenir .eb-vrg-etape-nom { color: var(--eb-text-muted, #6b7280); }
.eb-vrg-etape-info { overflow-wrap: anywhere; }
.eb-vrg-sous-titre { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--eb-text-muted, #6b7280); margin: .6rem 0 .3rem; }
.eb-vrg-precedentes .eb-vrg-decision { opacity: .75; }
/* Transmettre / renvoyer le lien. */
.eb-vrg-renvoi { border: 1px solid var(--eb-border, #e5e7eb); border-radius: .6rem; padding: .6rem .8rem; }
.eb-vrg-renvoi > summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
.eb-vrg-renvoi[open] > summary { margin-bottom: .7rem; }
.eb-vrg-renvoi .eb-vrg-form { margin-bottom: .7rem; }
.eb-vrg-moyens { display: flex; flex-wrap: wrap; gap: .4rem; }
.eb-vrg-qr-zone { display: flex; align-items: center; gap: 1rem; margin-top: .7rem; }
.eb-vrg-qr { border: 1px solid var(--eb-border, #e5e7eb); border-radius: .4rem; background: #fff; padding: 4px; }
.eb-vrg-mail { margin-top: .7rem; }
.eb-vrg-pied {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
    margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--eb-border, #e5e7eb);
    font-size: .82rem; color: var(--eb-text-muted, #6b7280);
}
@media (max-width: 575.98px) {
    .eb-vrg-ligne { flex-direction: column; }
    .eb-vrg-etape { font-size: .78rem; }
}
/* Alerte de retour sur la fiche : la décision du médecin vient d'arriver. */
.eb-vrg-alerte {
    position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
    /* Au-dessus des bandeaux et des toasts : c'est la réponse du médecin. */
    z-index: 100050;
    width: min(560px, calc(100vw - 24px)); background: var(--eb-surface, #fff);
    border: 2px solid var(--eb-primary, #2563eb); border-radius: .75rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: .75rem .9rem; text-align: left;
    animation: eb-vrg-arrivee .35s ease-out;
}
@keyframes eb-vrg-arrivee { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.eb-vrg-alerte-tete { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: .4rem; }
.eb-vrg-alerte .eb-vrg-decision { margin-bottom: .6rem; }
.eb-vrg-alerte-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.eb-vrg-decision-lu { margin-top: .3rem; font-size: .82rem; color: var(--eb-success, #16a34a); font-weight: 500; }
.eb-vrg-decision-attente { margin-top: .3rem; font-size: .82rem; color: var(--eb-text-muted, #6b7280); }
.eb-vrg-couper {
    border: 0; background: none; padding: 0; color: var(--eb-danger, #dc2626); font-size: .82rem; font-weight: 500; cursor: pointer;
}
.eb-vrg-couper:hover { text-decoration: underline; }
.eb-vrg-renvoi .eb-vrg-moyens { margin-top: .2rem; }
button.eb-vrg-couper, button.eb-vrg-couper:hover, button.eb-vrg-couper:focus {
    background: none !important; box-shadow: none !important; border: 0 !important; min-height: 0;
}
.eb-vrg-alerte { padding: 0; overflow: hidden; }
.eb-vrg-alerte-tete {
    margin: 0; padding: .55rem .9rem; background: var(--eb-primary, #2563eb); color: #fff;
}
.eb-vrg-alerte .eb-vrg-decision { margin: .7rem .9rem .6rem; }
.eb-vrg-alerte-actions { padding: 0 .9rem .75rem; }

/* ---------- Régulation : destinataires, code, annuaire ---------- */
.eb-vrg-dests { display: grid; gap: .6rem; margin-bottom: 1rem; }
.eb-vrg-dest { border: 1px solid var(--eb-border, #e5e7eb); border-radius: .6rem; padding: .7rem .8rem; }
.eb-vrg-dest-tete { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between; align-items: flex-start; }
.eb-vrg-dest-nom { font-weight: 700; }
.eb-vrg-dest-voies { font-size: .82rem; color: var(--eb-text-muted, #6b7280); overflow-wrap: anywhere; }
.eb-vrg-statut {
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    font-size: .82rem; color: var(--eb-text-muted, #6b7280);
}
.eb-vrg-statut-vu { color: var(--eb-success, #16a34a); font-weight: 600; }
/* Le code à dicter au médecin : gros, lisible à bout de bras. */
.eb-vrg-code {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem;
    margin: .6rem 0; padding: .5rem .7rem; border-radius: .5rem;
    background: var(--eb-surface-muted, #f3f4f6);
}
.eb-vrg-code > span { font-size: .82rem; color: var(--eb-text-muted, #6b7280); }
.eb-vrg-code > strong { font-size: 1.35rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.eb-vrg-code > small { font-size: .78rem; color: var(--eb-text-muted, #6b7280); }
/* Annuaire des régulateurs habituels. */
.eb-vrg-annuaire { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.eb-vrg-puce {
    display: inline-flex; align-items: stretch; border: 1px solid var(--eb-border, #e5e7eb);
    border-radius: 999px; overflow: hidden; background: var(--eb-surface, #fff);
}
.eb-vrg-puce-choix, .eb-vrg-puce-retirer {
    border: 0; background: none; padding: .3rem .7rem; font-size: .88rem; cursor: pointer; color: var(--eb-text, #1f2937);
}
.eb-vrg-puce-choix:hover { background: var(--eb-surface-hover, #f3f4f6); }
.eb-vrg-puce-choix.eb-vrg-puce-active { background: var(--eb-primary, #2563eb); color: #fff; }
.eb-vrg-puce-retirer { padding: .3rem .55rem; color: var(--eb-text-muted, #6b7280); border-left: 1px solid var(--eb-border, #e5e7eb); }
.eb-vrg-puce-retirer:hover { color: var(--eb-danger, #dc2626); }
/* Transmettre / noter une décision : deux volets repliables. */
.eb-vrg-ajout > summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; }
.eb-vrg-ajout > summary::-webkit-details-marker { display: none; }
.eb-vrg-ajout[open] > summary { margin-bottom: .9rem; }
.eb-vrg-moi { margin-top: 1rem; border-top: 1px solid var(--eb-border, #e5e7eb); padding-top: .8rem; }
.eb-vrg-moi > summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.eb-vrg-moi[open] > summary { margin-bottom: .8rem; }
.eb-vrg-deux { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
/* Décision saisie dans eBrigade : mêmes choix que la page du médecin. */
.eb-vrg-choix-liste { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .7rem; }
.eb-vrg-choix { display: block; margin: 0; cursor: pointer; }
.eb-vrg-choix input { position: absolute; opacity: 0; }
.eb-vrg-choix span {
    display: flex; align-items: center; gap: .45rem; padding: .5rem .7rem; border-radius: .5rem;
    border: 2px solid var(--eb-border, #e5e7eb); font-size: .9rem; font-weight: 500;
}
.eb-vrg-choix input:checked + span { border-color: var(--eb-primary, #2563eb); background: var(--eb-primary-light, #e0e7ff); }
.eb-vrg-choix input:focus-visible + span { outline: 2px solid var(--eb-primary, #2563eb); outline-offset: 2px; }
.eb-vrg-ton-urgent span i { color: var(--eb-danger, #dc2626); }
.eb-vrg-ton-attention span i { color: var(--eb-warning, #d97706); }
.eb-vrg-ton-ok span i { color: var(--eb-success, #16a34a); }
.eb-vrg-ton-info span i { color: var(--eb-primary, #2563eb); }
@media (max-width: 575.98px) {
    .eb-vrg-deux, .eb-vrg-choix-liste { grid-template-columns: 1fr; }
    .eb-vrg-dest-tete { flex-direction: column; }
}

/* =====================================================================
   Fiche bilan — lisibilité et confort de saisie (revue du 13/11/2026)
   ---------------------------------------------------------------------
   Affichage SEUL : aucun nom de champ, aucune valeur, aucune règle ne
   change. Ce bloc unifie trois familles de boutons qui ne se
   ressemblaient pas (Oui/Non en 13 px, pastilles en 17 px gras à double
   bordure, compteurs ±), donne à chaque rubrique son icône et son
   compteur de réponses, et range la barre d'actions du téléphone sur
   une seule ligne.
   ===================================================================== */

/* ---------- En-tête de rubrique : icône, titre, « 6/12 » ---------- */
#victime_form_id .vbilan-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-left-color: var(--vict-c, var(--vic-active));
    padding: 10px 14px;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--eb-fs-lg);
    font-weight: 700;
}
#victime_form_id .vbilan-card-ico {
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--eb-radius-sm);
    background: var(--vict-c-soft, var(--vic-active-bg));
    color: var(--vict-c, var(--vic-active));
    font-size: var(--eb-fs-md);
}
#victime_form_id .vbilan-card-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
#victime_form_id .vbilan-prog {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: var(--eb-radius-pill);
    background: var(--vic-radio-nonr);
    color: var(--vic-radio-nonr-text);
    font-size: var(--eb-fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
}
#victime_form_id .vbilan-prog.vbilan-prog-part {
    background: var(--vic-active-bg);
    color: var(--vic-active);
}
#victime_form_id .vbilan-prog.vbilan-prog-ok {
    background: var(--vic-radio-ok);
    color: var(--vic-radio-ok-text);
}
#victime_form_id .vbilan-prog.vbilan-prog-ok::before {
    content: "\2713\00a0";
}
/* Une réponse de la rubrique alarme : l'icône le dit, comme le point rouge
   du rail de la vue tablette. C'est le seul rouge de l'en-tête. */
#victime_form_id .vbilan-card.vbilan-card-alerte .vbilan-card-ico {
    background: var(--vic-radio-alert);
    color: var(--vic-radio-alert-border);
}

/* Bande de navigation : un point vert sur la rubrique entamée, rouge sur
   celle qui porte une alerte. */
a.vbilan-pill.vbilan-pill-rempli,
a.vbilan-pill.vbilan-pill-alerte {
    position: relative;
    padding-left: 24px;
}
a.vbilan-pill.vbilan-pill-rempli::before,
a.vbilan-pill.vbilan-pill-alerte::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--eb-success, #2f9e44);
}
a.vbilan-pill.vbilan-pill-alerte::before { background: var(--vic-radio-alert-border); }
a.vbilan-pill.active.vbilan-pill-rempli::before { background: var(--eb-surface); }

/* ---------- Corps des rubriques : plus d'air ---------- */
@media (min-width: 768px) {
    body:not(.vict-mode) #victime_form_id .vbilan-card .card-body { padding: 16px 18px 14px; }
}
body:not(.vict-mode) #victime_form_id .vbp-label {
    color: var(--eb-text, #344054);
}

/* ---------- Une seule famille de boutons de réponse ----------
   Même hauteur, même bordure, même graisse pour Oui/Non, les pastilles
   (« DPS », « 4 : Spontanée ») et les compteurs. La réponse choisie se
   reconnaît à sa teinte ET à une coche : la couleur seule ne se lit ni en
   plein soleil ni pour un daltonien. Pas en vue tablette (body.vict-mode),
   qui garde ses cibles de 52 px pensées pour le doigt. */
body:not(.vict-mode) #victime_form_id .vict-chips { gap: 6px; }
body:not(.vict-mode) #victime_form_id .vict-chip {
    min-height: 40px;
    padding: 6px 14px;
    border-width: 1.5px;
    border-radius: var(--eb-radius-md);
    font-size: var(--eb-fs-md);
    font-weight: 500;
    line-height: 1.25;
    box-shadow: var(--eb-shadow-sm);
}
body:not(.vict-mode) #victime_form_id .vict-chip.on { font-weight: 600; }
#victime_form_id .vict-chip.on::before {
    content: "\f00c";                   /* fa-check */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 7px;
}

body:not(.vict-mode) #victime_form_id input[type="radio"].radiobutton + label {
    min-height: 40px;
    min-width: 64px;
    padding: 6px 14px;
    border-width: 1.5px;
    border-radius: var(--eb-radius-md);
    font-size: var(--eb-fs-md);
    box-shadow: var(--eb-shadow-sm);
}
/* La réponse qui alarmerait était écrite en rouge gras AVANT d'être
   choisie : la moitié des « Oui » et des « Non » de la fiche criaient
   en permanence, et le rouge ne distinguait plus la réponse réellement
   donnée. Il ne s'allume plus qu'une fois la réponse cochée (fond rouge,
   ci-dessus) — la règle que suivaient déjà les pastilles. */
#victime_form_id input[type="radio"].radiobutton:not(:checked) + label .RedClass {
    color: inherit !important;
    font-weight: inherit;
}
#victime_form_id input[type="radio"].radiobutton:not(:checked) + label .RedClass b {
    font-weight: inherit;
}
#victime_form_id input[type="radio"].radiobutton:checked + label::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
}
#victime_form_id input[type="radio"].radiobutton:checked + label.vbp-ans-alert::before {
    content: "\f071";                   /* fa-triangle-exclamation */
}

body:not(.vict-mode) #victime_form_id .vict-step {
    flex: 0 0 40px;
    min-height: 40px;
    border-width: 1.5px;
    color: var(--eb-text-secondary, #475467);
}
body:not(.vict-mode) #victime_form_id .vict-stepper { gap: 6px; }
body:not(.vict-mode) #victime_form_id .vict-stepper .form-control {
    min-height: 40px;
    font-size: var(--eb-fs-lg);
    border-radius: var(--eb-radius-md);
}

/* Écran tactile (téléphone, tablette tenue en vue classique) : cibles de
   44 px, la taille minimale d'un doigt ganté. */
@media (pointer: coarse) {
    body:not(.vict-mode) #victime_form_id .vict-chip,
    body:not(.vict-mode) #victime_form_id input[type="radio"].radiobutton + label,
    body:not(.vict-mode) #victime_form_id .vict-step,
    body:not(.vict-mode) #victime_form_id .vict-stepper .form-control {
        min-height: 44px;
    }
    body:not(.vict-mode) #victime_form_id .vict-step { flex-basis: 44px; }
}

/* ---------- Téléphone : barre d'actions sur UNE ligne ----------
   Sept boutons réduits à leur icône se rangeaient sur deux lignes
   inégales (cinq puis deux), et les compteurs « 0 » de Surveillance et
   Matériel élargissaient leur bouton du double. Une ligne de carrés
   égaux ; le compteur devient une bulle sur le coin de son bouton, et
   disparaît à zéro. */
@media (max-width: 767.98px) {
    #victime_form_id .bandResponsive .ebf-band-pill {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 6px !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        padding: 6px 8px !important;
        width: auto;
        max-width: calc(100vw - 16px);
    }
    #victime_form_id .bandResponsive .ebf-band-pill > .btn {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        max-width: 56px;
        height: 44px;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--eb-radius-md);
        font-size: var(--eb-fs-lg);
    }
    #victime_form_id .bandResponsive .ebf-band-pill > .btn .badge {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 18px;
        padding: 2px 5px;
        font-size: var(--eb-fs-xs);
        line-height: 1.15;
    }
    /* À zéro, js/victimes.js pose bg-secondary (ebVmCharger, ebVsuCharger). */
    #victime_form_id .bandResponsive .ebf-band-pill > .btn .badge.bg-secondary { display: none; }

    /* La bulle de l'assistant se cale sur la bande d'actions
       (modules/ia/css/ia.css) — mais le parcours par étapes empile sa barre
       « Précédent / Suivant » AU-DESSUS de cette bande : la bulle tombait sur
       « Suivant ». Elle remonte au-dessus des deux (barre ≈ 57 px). Même
       remède que la vue tablette (css/victime-tablette.css). */
    body.vbw-on #iaWidgetBtn {
        bottom: calc(var(--vbw-bottom, 0px) + 68px) !important;
    }
}

/* ---------- Thème sombre ---------- */
:root.dark #victime_form_id .vbilan-card-ico {
    background: var(--vict-c-soft, #1a2a45);
    color: var(--vict-c, #4d8ffc);
}

/* ---------- Historique du bilan (victime_bilan_versions.php) ---------- */
/* La LISTE réutilise la timeline commune du produit (createTimelineCard,
   classes eb-ivh-*, css/intervention_fragments.css) : l'historique d'un bilan
   et celui d'une intervention se lisent exactement pareil. Ici, seulement ce
   qui leur est propre : les marques et la vue d'une version. */
#modal_victime_versions { padding-top: 0 !important; }
.eb-vbv { text-align: left; }
.eb-vbv-aide {
    display: flex; gap: .45rem; align-items: flex-start; margin-bottom: .8rem;
    font-size: .85rem; color: var(--eb-text-muted, #6b7280);
}
.eb-vbv-marque {
    display: inline-block; padding: .05rem .45rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.eb-vbv-actuel { background: var(--eb-success-light, #dcfce7); color: var(--eb-success, #16a34a); }
.eb-vbv-fige { background: var(--eb-primary-light, #e0e7ff); color: var(--eb-primary, #2563eb); }
.eb-vbv-ajout { background: var(--eb-success-light, #dcfce7); color: var(--eb-success, #16a34a); }
.eb-vbv-change { background: var(--eb-warning-light, #fff7ed); color: var(--eb-warning, #d97706); }
.eb-vbv-retrait { background: var(--eb-danger-light, #fee2e2); color: var(--eb-danger, #dc2626); }
/* Le bouton « Voir » tient dans l'en-tête de la carte (header_elt). */
.eb-vbv .activity-author .btn { padding: .15rem .5rem; font-size: .8rem; white-space: nowrap; }
@media (max-width: 575.98px) {
    /* Icône seule, et le nom se replie à sa place : sans min-width, le bloc de
       gauche refuse de rétrécir et pousse le bouton sous la ligne. */
    .eb-vbv .activity-author .btn .hide_mobile { display: none; }
    .eb-vbv .activity-author { flex-wrap: nowrap; gap: .5rem; align-items: flex-start; }
    .eb-vbv .activity-author > div:first-child { min-width: 0; }
}
/* Le bilan d'une version. */
.eb-vbv-vue { text-align: left; }
.eb-vbv-vue-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .4rem; text-align: left; }
.eb-vbv-vue-titre { font-weight: 600; }
.eb-vbv-vue-sous { color: var(--eb-text-muted, #6b7280); font-size: .88rem; margin-bottom: .6rem; text-align: left; }
.eb-vbv-bilan { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: .15rem 1rem; margin: 0 0 1rem; text-align: left; }
.eb-vbv-bilan dt { color: var(--eb-text-muted, #6b7280); overflow-wrap: anywhere; text-align: left; }
.eb-vbv-bilan dd { margin: 0; overflow-wrap: anywhere; text-align: left; }
.eb-vbv-bilan dt.eb-vbv-rub {
    grid-column: 1 / -1; margin-top: .7rem; font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; color: var(--eb-text, #1f2937);
    border-bottom: 1px solid var(--eb-border, #e5e7eb); padding-bottom: .2rem;
}
.eb-vbv-bilan dd.eb-vbv-rub-vide { display: none; }
.eb-vbv-bilan dd.eb-vbv-change { font-weight: 600; }
.eb-vbv-avant { color: var(--eb-text-muted, #6b7280); font-weight: 400; font-size: .85rem; }
.eb-vbv-sous-titre {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--eb-text-muted, #6b7280); margin: 1rem 0 .4rem; text-align: left;
}
.eb-vbv-materiel { margin: 0; padding-left: 1.2rem; text-align: left; }
@media (max-width: 575.98px) {
    .eb-vbv-bilan { grid-template-columns: 1fr; }
    .eb-vbv-bilan dd { margin-bottom: .4rem; }
}

/* ---------- Fenêtres de la fiche victime : TOUJOURS dans l'écran ----------
   Passer la fiche, Matériel utilisé, Surveillance, Régulation, Historique :
   leur corps défile, l'en-tête et le bas restent visibles (13/11, « la
   fenêtre dépasse par le bas »). Bootstrap ne borne le dialogue qu'en
   POURCENTAGE de `.modal`, qui porte en plus un retrait de 20vh (main.css) ;
   et main.css rend `.modal-content` débordant (`overflow: visible !important`),
   ce qui lui rend sa hauteur minimale de contenu : la fenêtre grandissait
   avec sa liste. Ici, hauteur prise sur l'ÉCRAN (dvh : barre d'adresse
   mobile comprise), contenu borné, corps qui défile. */
.modal[id^="modal_victime_"] { padding-top: 0 !important; }
/* Fenêtre posée à la marge Bootstrap, hauteur de l'écran moins deux marges.
   ⚠️ main.css pose `margin-top: 20%` sur `.modal-dialog.modal-dialog-scrollable`
   sous 992 px (de la LARGEUR : 164 px sur une tablette de 820 px) sans
   réduire la hauteur : la fenêtre sortait d'autant par le bas. Même règle
   en plein écran (modal-fullscreen-sm-down sous 576 px, -md-down sous
   768 px) : là, ni marge ni hauteur bornée, c'est tout l'écran. */
.modal[id^="modal_victime_"] .modal-dialog.modal-dialog-scrollable {
    margin-top: var(--bs-modal-margin, 1.75rem);
    margin-bottom: var(--bs-modal-margin, 1.75rem);
    height: calc(100vh - 2 * var(--bs-modal-margin, 1.75rem));
    height: calc(100dvh - 2 * var(--bs-modal-margin, 1.75rem));
    min-height: 0;
}
@media (max-width: 575.98px) {
    .modal[id^="modal_victime_"] .modal-dialog.modal-dialog-scrollable.modal-fullscreen-sm-down {
        margin: 0; height: 100%;
    }
}
@media (max-width: 767.98px) {
    .modal[id^="modal_victime_"] .modal-dialog.modal-dialog-scrollable.modal-fullscreen-md-down {
        margin: 0; height: 100%;
    }
}
.modal[id^="modal_victime_"] .modal-dialog-scrollable .modal-content {
    max-height: 100%;
    min-height: 0;
    overflow: hidden !important;
}
.modal[id^="modal_victime_"] .modal-dialog-scrollable .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---------- Passer la fiche d'une tablette à l'autre (victime_passation.php) ---------- */
.eb-vps { text-align: left; }
.eb-vps-intro { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.1rem; }
.eb-vps-icone {
    flex: 0 0 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--eb-primary-light, #e0e7ff); color: var(--eb-primary, #2563eb); font-size: 1.4rem;
}
.eb-vps-titre { font-weight: 700; font-size: 1.05rem; }
.eb-vps-texte { color: var(--eb-text-secondary, #4b5563); font-size: .9rem; }
.eb-vps-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.eb-vps-ligne { display: flex; gap: .5rem; }
.eb-vps-ligne .form-control { flex: 1 1 auto; min-width: 0; }
.eb-vps-ligne .btn { white-space: nowrap; font-weight: 600; }
/* Le code, en grand : il se scanne à bout de bras, dans le bruit et la nuit. */
.eb-vps-zone { margin-top: 1.1rem; }
.eb-vps-qr-carte {
    display: flex; flex-direction: column; align-items: center; gap: .7rem;
    padding: 1.2rem; border: 2px solid var(--eb-primary, #2563eb); border-radius: .75rem;
    background: #fff;
}
.eb-vps-qr { width: min(300px, 70vw); height: auto; image-rendering: pixelated; }
.eb-vps-consigne { text-align: center; font-weight: 600; color: #1f2937; }
.eb-vps-compte { font-variant-numeric: tabular-nums; color: var(--eb-text-muted, #6b7280); font-size: .9rem; }
.eb-vps-ok, .eb-vps-avert {
    display: flex; align-items: flex-start; gap: .4rem; text-align: left;
    padding: .5rem .7rem; border-radius: .5rem; font-size: .85rem; max-width: 420px;
}
.eb-vps-ok { background: var(--eb-success-light, #dcfce7); color: var(--eb-success, #16a34a); }
.eb-vps-avert { background: var(--eb-warning-light, #fff7ed); color: var(--eb-warning, #d97706); }
/* Fiche déjà reprise. */
.eb-vps-faite {
    display: flex; gap: .7rem; align-items: center; margin-bottom: 1rem;
    padding: .7rem .9rem; border-radius: .6rem;
    background: var(--eb-success-light, #dcfce7); color: var(--eb-success, #16a34a);
}
.eb-vps-faite i { font-size: 1.4rem; }
.eb-vps-faite-titre { font-weight: 700; }
.eb-vps-faite-sous { font-size: .85rem; opacity: .9; }
.eb-vps-recevoir {
    margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--eb-border, #e5e7eb);
    font-size: .85rem; color: var(--eb-text-muted, #6b7280);
}
@media (max-width: 575.98px) {
    .eb-vps-ligne { flex-direction: column; }
    .eb-vps-qr { width: min(280px, 80vw); }
}

/* ---------- Barre du bas de la fiche victime : le menu « ⋯ » ----------
   Onze boutons côte à côte ne se lisaient plus. La barre garde les gestes du
   terrain (enregistrer, surveillance, régulation, revenir) ; les autres
   passent ici, avec leur NOM — que la barre leur retire au téléphone. */
.eb-plus-menu {
    /* Positionné par le CSS (data-bs-display='static'), pas par Popper :
       au-dessus du bouton, aligné à droite, et décalé par le script quand la
       barre du bilan occupe le bas de l'écran. */
    bottom: 100%;
    top: auto;
    right: 0;
    left: auto;
    margin-bottom: .5rem;
    min-width: 248px;
    padding: .3rem;
    max-height: min(70vh, 460px);
    overflow-y: auto;
}
/* Chaque action redevient une ligne nommée, pleine largeur. */
.eb-plus-item > .btn,
.eb-plus-item > a.btn,
.eb-plus-item > input.btn {
    display: flex !important;
    align-items: center;
    gap: .6rem;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    min-height: 44px;
    border: 0;
    background: none;
    box-shadow: none;
    padding: .55rem .6rem;
    border-radius: .4rem;
    color: var(--eb-text, #212529);
    font-weight: 500;
}
.eb-plus-item > .btn:hover,
.eb-plus-item > .btn:focus { background: var(--eb-surface-hover, #f3f4f6); }
.eb-plus-item > .btn i { width: 1.2rem; text-align: center; }
/* Le libellé, masqué dans la barre sous 992 px, revient dans le menu.
   ⚠️ Trois sélecteurs le masquent, dont `.btn > span.hide_mobile` (0,2,0) :
   à spécificité égale, le dernier déclaré gagne. Il en faut donc un de plus. */
.eb-plus-menu .btn .hide_mobile,
.eb-plus-menu .btn > span.hide_mobile,
.eb-plus-menu .btn .hide_mobile2,
.eb-plus-menu .btn > span.hide_mobile2 { display: inline !important; }
.eb-plus-menu .badge { margin-left: auto; }
/* Supprimer reste rouge, et se détache du reste : c'est le seul geste qui
   ne se rattrape pas. */
.eb-plus-item > .btn-danger,
.eb-plus-item > .btn.btn-danger { color: var(--eb-danger, #dc2626); }
.eb-plus-item:has(> .btn-danger) { border-top: 1px solid var(--eb-border, #e5e7eb); margin-top: .25rem; padding-top: .25rem; }
/* ⚠️ La bande d'actions du produit est en z-index 2 ; la barre « Précédent /
   Suivant » du bilan (.vbw-nav) en 1030. Menu ouvert, elle le recouvrait et
   ses dernières lignes ne se cliquaient plus. La bande passe donc devant,
   le temps du menu. */
#band-container:has(.eb-plus-menu.show),
#band-container.eb-plus-ouvert { z-index: 1040 !important; }

/* ------------------------------------------------------------------
   Choix de l'établissement de destination (#Syopé point 4) : une liste
   des hôpitaux les plus proches du lieu de l'intervention, avec une
   case de recherche. Le champ libre reste là pour ce qui n'y est pas.
   ------------------------------------------------------------------ */
.eb-hop { margin-bottom: .5rem; }
.eb-hop-chercher { margin-bottom: 6px; }
.eb-hop-liste {
    width: 100%;
    /* Les options ne se tronquent pas : c'est le nom de l'hôpital qui
       distingue deux sites d'un même CHU. */
    white-space: normal;
}
.eb-hop-liste option {
    padding: 8px 10px;
    line-height: 1.3;
    border-bottom: 1px solid var(--eb-border, #e9ecef);
}
.eb-hop-aide {
    margin: 4px 0 6px;
    font-size: .8rem;
    color: var(--eb-text-secondary, #64748b);
}
.eb-hop-libre { margin-top: 2px; }

/* ------------------------------------------------------------------
   Le service qui reçoit la victime (#Syopé point 4). Même gabarit que
   les cartes de décision : un filet de couleur à gauche, le nom en
   tête, la suite en dessous. Le vert dit que le service a confirmé.
   ------------------------------------------------------------------ */
.eb-vrg-urg {
    /* ⚠️ La carte « pas encore prévenu » est un <form>, donc `display: inline`
       par défaut : son cadre et son fond ne faisaient que la hauteur d'une
       ligne, et le contenu débordait au-dessous. */
    display: block;
    border: 1px solid var(--eb-border, #e5e7eb);
    border-left: 4px solid var(--eb-info, #0ea5e9);
    border-radius: .5rem;
    padding: .6rem .75rem;
    margin-bottom: .9rem;
    background: var(--eb-surface, #fff);
}
.eb-vrg-urg-recu { border-left-color: var(--eb-success, #16a34a); }
.eb-vrg-urg-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
}
.eb-vrg-urg-nom { min-width: 0; overflow-wrap: anywhere; }
/* « prévenu automatiquement » : une mention, pas un titre. */
.eb-vrg-urg-auto {
    margin-left: auto;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--eb-info-soft, #e0f2fe);
    color: var(--eb-info-strong, #075985);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.eb-vrg-urg-suite {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-top: .35rem;
    font-size: .88rem;
}
.eb-vrg-urg-suite i { margin-right: .25rem; }
.eb-vrg-urg-ok { color: var(--eb-success, #16a34a); font-weight: 600; }
.eb-vrg-urg-aide {
    margin-top: .3rem;
    font-size: .82rem;
    color: var(--eb-text-muted, #6b7280);
}
/* « Couper le lien » : un lien de texte, pas un bouton — il ne doit pas
   attirer l'œil autant que ce qui est arrivé au service. */
.eb-vrg-urg-couper {
    padding: .2rem 0;
    font-size: .85rem;
    border: 0;
    background: none;
    box-shadow: none;
    text-decoration: underline;
}
/* Pas encore prévenu : la carte DEMANDE quelque chose, elle se distingue. */
.eb-vrg-urg-vide {
    border-left-color: var(--eb-warning, #d97706);
    background: var(--eb-warning-soft, #fffbeb);
}
.eb-vrg-urg-saisie {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}
.eb-vrg-urg-saisie .form-control { flex: 1 1 auto; min-width: 0; }
.eb-vrg-urg-saisie .btn { white-space: nowrap; font-weight: 600; }
@media (max-width: 575.98px) {
    .eb-vrg-urg-saisie { flex-direction: column; }
    .eb-vrg-urg-auto { margin-left: 0; }
}