/* ==========================================================================
   Projet HDS — fiches bilan victime
   MOBILE FIRST : la base cible le téléphone (usage terrain en DPS),
   les media queries ≥ 720 px (tablette) et ≥ 1080 px (PC) élargissent.
   ========================================================================== */

:root {
    /* Palette issue du logo BVS Pulse : bleu vif + bleu marine */
    --accent: #1976d2;
    --accent-dark: #16336e;
    --accent-bg: #e9f2fc;
    /* Rouge réservé aux notions de danger (gravité UA, hémorragies…) */
    --danger: #b3001b;
    --danger-dark: #8c0015;
    --danger-bg: #fdf2f3;
    --ink: #1b2333;
    --muted: #647082;
    --border: #d8dee8;
    --bg: #f1f4f9;
    --card: #ffffff;
    --success: #0a7d33;
    --radius: 10px;
    --ombre-carte: 0 1px 3px rgba(16, 32, 64, .07), 0 1px 2px rgba(16, 32, 64, .05);
    --ombre-survol: 0 6px 18px rgba(16, 32, 64, .12), 0 2px 6px rgba(16, 32, 64, .08);
    --touch: 44px;               /* cible tactile minimale */
    --topbar-h: 0px;             /* réservé */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;             /* évite le zoom iOS sur focus input */
    line-height: 1.45;
    -webkit-tap-highlight-color: transparent;
}

h1 { font-size: 1.3rem; margin: 0 0 .25rem; color: var(--accent-dark); letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 .75rem; color: var(--accent-dark); border-bottom: 2px solid var(--accent-bg); padding-bottom: .35rem; }
h2:first-child { margin-top: 0; }
h3 { font-size: .9rem; margin: 1.25rem 0 .5rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

a { color: var(--accent-dark); }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .88rem; }

.page-narrow { max-width: 40rem; margin: 1.5rem auto; padding: 0 1rem; }
.page-wide { max-width: 70rem; margin: 1.5rem auto; padding: 0 1rem; }
.page-header { margin-bottom: 1.25rem; }
.page-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

.card-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.card-actions .btn { justify-content: center; }

/* --- Liste des fiches (mobile : cartes pleine largeur) ------------------ */

.page-header-row .create-form { width: 100%; }
.page-header-row .create-form .btn { width: 100%; }

.fiche-list { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.fiche-card {
    display: block; text-decoration: none; color: inherit;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    padding: .9rem 1rem; min-height: var(--touch);
    box-shadow: var(--ombre-carte);
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.fiche-card:active { background: var(--accent-bg); }
.fiche-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.fiche-card-title { font-size: 1rem; overflow-wrap: anywhere; }
.fiche-card-badges { display: inline-flex; gap: .35rem; flex: none; }
.fiche-card-meta { font-size: .82rem; margin-top: .25rem; }

/* --- Boutons --------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: var(--touch);
    padding: .5rem .9rem; border-radius: var(--radius);
    border: 1px solid transparent; cursor: pointer;
    font: inherit; font-weight: 600; text-decoration: none;
    background: #e6eaf1; color: var(--ink);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary {
    background: linear-gradient(180deg, #1e88e5, var(--accent));
    color: #fff;
    box-shadow: 0 1px 2px rgba(22, 51, 110, .35);
}
.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 2px 6px rgba(22, 51, 110, .35); }
.btn-outline { background: var(--card); border-color: var(--border); }
.btn-ghost { background: transparent; }
.btn-danger { background: #fce8e8; color: #a11212; }
.btn-lg { padding: .8rem 1.25rem; font-size: 1.05rem; }
.btn-sm { min-height: 36px; padding: .25rem .6rem; font-size: .85rem; }
.link-btn { background: none; border: none; padding: 0; color: var(--accent-dark); text-decoration: underline; cursor: pointer; font: inherit; }

/* --- Flash / vide ------------------------------------------------------ */

.flash { padding: .75rem 1rem; border-radius: var(--radius); margin: .75rem; }
.flash-success { background: #e7f6ec; color: var(--success); border: 1px solid #bfe6cc; }
/* Fiche clôturée (victime remise à la structure d'accueil) : lecture seule */
.flash-cloturee { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; font-weight: 600; }
.empty-state { background: var(--card); border: 1px dashed #b9c4d4; border-radius: 14px; padding: 3rem 1rem; text-align: center; box-shadow: var(--ombre-carte); }

/* --- Tableaux ---------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.table { border-collapse: collapse; width: 100%; min-width: 40rem; }
.table th, .table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table thead th { background: var(--accent-bg); color: var(--accent-dark); font-size: .85rem; }
.table tbody tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.badge-statut-brouillon { background: #fff3d6; color: #8a5b00; }
.badge-statut-complete { background: #e7f6ec; color: var(--success); }
.badge-statut-cloturee { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
/* Passage automatique en UA (lettre X-ABCDE ou constante en rouge) : pulsation */
.select-gravite.gravite-auto {
    border-color: var(--danger); color: var(--danger); font-weight: 700;
    animation: gravite-auto 1s ease-out 3;
}
@keyframes gravite-auto {
    0% { box-shadow: 0 0 0 0 rgba(179, 0, 27, .55); }
    100% { box-shadow: 0 0 0 10px rgba(179, 0, 27, 0); }
}

.badge-gravite-ua { background: var(--danger); color: #fff; }
.badge-gravite-ur { background: #ff8c00; color: #fff; }
.badge-gravite-indemne { background: #e7f6ec; color: var(--success); }
.badge-gravite-dcd { background: #1c1c1e; color: #fff; }

/* --- Barre haute de la fiche (mobile : 2 rangées) ---------------------- */

.bilan-topbar {
    /* statique sur mobile : c'est la nav des sections qui reste collée,
       la sauvegarde passe en bouton flottant (voir .btn-save) */
    background: var(--card); border-bottom: 3px solid var(--accent);
    box-shadow: 0 1px 4px rgba(16, 32, 64, .08);
    padding: .45rem .75rem .55rem;
    display: flex; flex-direction: column; gap: .45rem;
}
.bilan-topbar-main { display: flex; align-items: center; gap: .5rem; }
.btn-back { min-width: var(--touch); padding: .5rem; font-size: 1.2rem; }
/* Bouton transmettre de la barre haute : icône seule sur mobile */
.btn-transmettre { flex: none; }
.btn-transmettre .btn-txt { display: none; }
@media (min-width: 720px) {
    .btn-transmettre .btn-txt { display: inline; }
}
.bilan-topbar-title { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.bilan-topbar-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bilan-topbar-title .muted { font-size: .72rem; }
/* Sauvegarde : bouton flottant toujours accessible sur mobile */
.btn-save {
    position: fixed; bottom: 1rem; right: 1rem; z-index: 30;
    min-width: 56px; min-height: 56px; border-radius: 999px;
    font-size: 1.3rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.btn-save .btn-txt { display: none; }        /* icône seule sur mobile */
.bilan-topbar-fields { display: flex; gap: .45rem; }
.bilan-topbar-fields input, .bilan-topbar-fields select {
    min-height: 40px; padding: .35rem .5rem; border: 1px solid var(--border);
    border-radius: var(--radius); font: inherit; font-size: .9rem; background: #fff;
    flex: 1; min-width: 0;
}
.input-victime { flex: 1.6 !important; }
/* N° victime figé : lisible mais visiblement non éditable */
.input-victime-fige {
    display: inline-flex; align-items: center; min-height: 40px;
    padding: .35rem .5rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--accent-bg, #f3f4f6); color: var(--accent-dark);
    font: inherit; font-size: .9rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1.6; min-width: 0; cursor: default; user-select: none;
}

/* --- Navigation des sections (mobile : barre horizontale défilante) ---- */

.bilan-layout { display: block; padding: 0; }

/* Mobile : grille 4 x 2 — les 8 sections toujours visibles, rien de masqué */
.bilan-nav {
    position: sticky; top: 0; z-index: 15;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--card); border-bottom: 1px solid var(--border);
}
.bilan-nav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    min-width: 0; min-height: var(--touch);
    padding: .4rem .2rem .45rem;
    border: none; background: transparent; cursor: pointer; color: var(--muted);
    font: inherit; font-size: .66rem; font-weight: 600;
    border-bottom: 3px solid transparent;
}
.bilan-nav .nav-txt {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bilan-nav .nav-txt-long { display: none; }   /* libellé court sur mobile */
.bilan-nav .nav-ico { font-size: 1.1rem; line-height: 1; }
.bilan-nav button.active { color: var(--accent-dark); border-bottom-color: var(--accent); background: var(--accent-bg); }

.bilan-content { padding: .75rem; }

.panel { display: none; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; box-shadow: var(--ombre-carte); }
.panel.active { display: block; }

/* --- Onglets XABCDE ---------------------------------------------------- */

/* Mobile : grille 6 colonnes — les 6 lettres XABCDE toujours toutes visibles */
.tabs { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 2px solid var(--accent-bg); margin-bottom: 1rem; }
.tabs button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
    min-width: 0; min-height: var(--touch);
    padding: .35rem .1rem .4rem; border: none; background: transparent; font: inherit; font-weight: 700;
    color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent;
    text-transform: uppercase; letter-spacing: .02em;
}
.tabs .tab-letter { font-size: 1rem; line-height: 1.1; }
.tabs .tab-txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .58rem; font-weight: 600; }
.tabs .tab-txt-long { display: none; }        /* libellé court sur mobile */
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Statut du module : vert = toutes les questions à la réponse rassurante, rouge = anomalie */
.tabs button.tab-ok { color: #059669; }
.tabs button.tab-ok .tab-letter::after { content: ' ✓'; }
.tabs button.tab-pb { color: #b91c1c; }
.tabs button.tab-pb .tab-letter::after { content: ' ⚠'; font-size: .75em; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Bouton « Rien à signaler » : valide les six modules et enchaîne sur le complémentaire */
.btn-ras {
    display: block; width: 100%; margin-bottom: .8rem; min-height: var(--touch);
    padding: .55rem .8rem; border: 1px solid #059669; border-radius: var(--radius);
    background: #ecfdf5; color: #059669; font: inherit; font-weight: 700; cursor: pointer;
}
.btn-ras:hover { background: #d1fae5; }

/* Coche verte sur « Urgence vitale » quand tout le X-ABCDE est validé */
.bilan-nav button.nav-ok .nav-ico::after { content: '✓'; color: #059669; font-size: .7em; vertical-align: top; }

/* --- Champs ------------------------------------------------------------ */

.grid { display: grid; grid-template-columns: 1fr; gap: .9rem; margin-bottom: .5rem; }
.field { display: flex; flex-direction: column; gap: .3rem; position: relative; }
.field-full { grid-column: 1 / -1; }
.field label, .field-label { font-size: .84rem; font-weight: 600; color: #3c3f46; }
.field input, .field textarea, .field select {
    min-height: var(--touch);
    padding: .55rem .65rem; border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; background: #fff; width: 100%;
}
.field textarea { min-height: auto; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-unit { position: absolute; right: .65rem; bottom: .8rem; color: var(--muted); font-size: .8rem; pointer-events: none; }

/* Boutons segmentés (OUI/NON, choix uniques) */
.segmented { display: flex; flex-wrap: wrap; gap: .4rem; }
.segmented input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented label {
    display: inline-flex; align-items: center; min-height: 40px;
    padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--border);
    background: #fff; font-size: .88rem; font-weight: 600; cursor: pointer; user-select: none;
}
.segmented input[type="radio"]:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.segmented input[type="radio"]:checked + label { background: var(--accent); border-color: var(--accent); color: #fff; }
.segmented input[type="radio"]:checked + label.segmented-nr { background: #9aa0a6; border-color: #9aa0a6; }
.segmented-nr { color: var(--muted); }
/* Questions « anomalie présente ? » (X-ABCDE) : NON = rien d'anormal (vert), OUI = rouge */
.segmented-anomalie input[value="non"]:checked + label { background: #059669; border-color: #059669; }
.segmented-anomalie input[value="oui"]:checked + label { background: #b91c1c; border-color: #b91c1c; }

/* Cases à cocher en puces (gestes…) */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.chips label {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 40px;
    padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--border);
    background: #fff; font-size: .88rem; cursor: pointer; user-select: none;
}
.chips label[hidden] { display: none; }   /* filtrage par recherche (Gestes médicaux) */
.chips input[type="checkbox"]:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.chips input[type="checkbox"]:checked + label { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-dark); font-weight: 700; }

.save-row { margin-top: 1.5rem; display: flex; }
.save-row .btn { flex: 1; }

/* --- Surveillance : une ligne par constante, mesures horodatées répétables --- */

.const-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .9rem; }
.const-row {
    background: #fbfbfc; border: 1px solid var(--border); border-radius: var(--radius);
    padding: .55rem .7rem .65rem;
}
.const-head { display: flex; align-items: center; gap: .5rem; }
.const-ico { font-size: 1.15rem; flex: none; }
.const-label { flex: 1; font-size: .88rem; font-weight: 700; color: #3c3f46; min-width: 0; }
.const-label small { font-weight: 400; color: var(--muted); }
.const-add {
    flex: none; width: 38px; height: 38px;
    border: 1px solid var(--accent); border-radius: 999px;
    background: var(--accent-bg); color: var(--accent-dark);
    font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.const-add:active { background: var(--accent); color: #fff; }
.const-entries { display: flex; flex-wrap: wrap; gap: .45rem; }
.const-entries:not(:empty) { margin-top: .55rem; }
.const-entry {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    padding: .25rem .3rem;
}
.const-entry input, .const-entry select {
    min-height: 38px; padding: .3rem .4rem;
    border: 1px solid var(--border); border-radius: 8px;
    font: inherit; font-size: .92rem; background: #fff;
}
.const-entry input[type="time"] { width: 6.2rem; }
.const-entry input:not([type="time"]) { width: 4.6rem; }
.const-entry .ta-sys, .const-entry .ta-dia { width: 3.9rem; }
.ta-sep { color: var(--muted); font-weight: 700; }
.const-entry select { width: 5.4rem; }
.const-entry input:focus, .const-entry select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.const-del {
    width: 30px; height: 30px; border: none; border-radius: 8px;
    background: #fce8e8; color: #a11212; font-weight: 700; cursor: pointer; flex: none;
}

/* Normes affichées selon l'âge de la victime */
.const-norm { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); }

/* Coloration de la mesure : 🟢 normale / 🟠 limite / 🔴 anormale */
.const-entry.c-ok { border-color: #34a853; background: #ecf8ef; }
.const-entry.c-ok input:not([type="time"]), .const-entry.c-ok select { border-color: #34a853; background: #f4fbf6; }
.const-entry.c-warn { border-color: #f29900; background: #fdf4e3; }
.const-entry.c-warn input:not([type="time"]), .const-entry.c-warn select { border-color: #f29900; background: #fff8ea; }
.const-entry.c-bad { border-color: #d93025; background: #fdecea; }
.const-entry.c-bad input:not([type="time"]), .const-entry.c-bad select { border-color: #d93025; background: #fff1f0; font-weight: 700; color: #a11212; }

/* --- Schéma corporel ---------------------------------------------------- */

.bodymap-wrap { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.bodymap-figures { display: flex; gap: .75rem; justify-content: center; }
.bodymap-figure { margin: 0; text-align: center; flex: 1; max-width: 10rem; }
.bodymap-figure figcaption { font-size: .82rem; color: var(--muted); margin-top: .35rem; }
.bodymap {
    position: relative; cursor: crosshair;
    background:
        radial-gradient(120% 90% at 50% 8%, #ffffff 0%, #eef1f5 55%, #e2e7ee 100%);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(30, 40, 55, .08);
    touch-action: manipulation;
}
.bodymap svg.silhouette {
    display: block; width: 100%; height: auto;
    pointer-events: none; user-select: none;
    filter: drop-shadow(0 4px 6px rgba(30, 40, 55, .25));
}

/* Silhouette vectorielle : contour du corps + zones anatomiques (relief léger) */
.silhouette-contour { fill: #f3ede6; stroke: #a99f92; stroke-width: 2; vector-effect: non-scaling-stroke; }
.silhouette-zone path { fill: #e6ddd1; stroke: #c8bcac; stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* Vignettes : cliquer ouvre la face en grand */
.bodymap-small { cursor: pointer; }
.bodymap-small:hover { border-color: var(--accent); }
.bodymap-zoom-hint {
    position: absolute; right: .4rem; bottom: .4rem;
    font-size: .95rem; opacity: .55; pointer-events: none;
}
.lesion-point-mini { width: 12px; height: 12px; pointer-events: none; }
.lesion-point-mini.lesion-point-multi::after { display: none; }

/* Modale schéma agrandi */
.bodymap-zoom {
    border: none; border-radius: var(--radius); padding: .9rem;
    width: calc(100vw - 1rem); max-width: 34rem;
    max-height: calc(100dvh - 1rem); overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.bodymap-zoom::backdrop { background: rgba(20, 20, 22, .55); }
.bodymap-zoom-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.bodymap-zoom-head h3 { margin: 0; color: var(--accent-dark); text-transform: none; letter-spacing: 0; font-size: 1.05rem; }
.bodymap-large { width: fit-content; margin: .5rem auto 0; cursor: crosshair; }
.bodymap-large svg.silhouette { width: auto; max-width: 100%; max-height: min(72dvh, 38rem); }
.bodymap-points { position: absolute; inset: 0; }

.point-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
    vertical-align: middle; flex: none;
    /* Initiales du type de lésion dans le point (repère visuel rapide) */
    color: #fff; font-weight: 700; font-size: 8px; line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5); font-family: inherit;
}
.lesion-point {
    position: absolute; transform: translate(-50%, -50%);
    width: 22px; height: 22px; padding: 0; cursor: pointer;   /* cible tactile élargie */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 5px rgba(20, 30, 45, .35);
    font-size: 10px; letter-spacing: -.02em;
}
.lesion-point-multi::after {
    content: attr(data-count);
    position: absolute; top: -7px; right: -7px;
    min-width: 14px; height: 14px; border-radius: 999px;
    background: var(--ink); color: #fff;
    font-size: 9px; font-weight: 700; line-height: 14px; text-align: center;
    border: 1px solid #fff;
}
.point-hemorragie { background: #dc2626; }
.point-douleur { background: #e11d48; }
.point-contusion_hematome { background: #7c3aed; }
.point-plaie { background: #b91c1c; }
.point-brulure { background: #f97316; }
.point-deformation { background: #0e7490; }
.point-suspicion_fracture { background: #1d4ed8; }
.point-gonflement { background: #059669; }
.point-rougeur { background: #f43f5e; }
.point-section_amputation { background: #111827; }
.point-piqure_morsure { background: #a16207; }
.point-autre { background: #6b7280; }

.bodymap-side h3 { margin-top: 0; }

/* --- Prise en charge (vue guidée : mannequin central) -------------------- */

.pec-wrap { display: flex; flex-direction: column; gap: 1rem; }
/* Mannequin en grand : les figures dominent l'écran, le popover s'ancre dedans */
.pec-figures { display: flex; gap: .75rem; justify-content: center; position: relative; }
.pec-figure { margin: 0; text-align: center; flex: 1; max-width: 13rem; }
.pec-figure figcaption { font-size: .82rem; color: var(--muted); margin-top: .35rem; }

/* Zones interactives : le tracé lui-même est la cible tactile.
   La couche de badges recouvre le SVG (inset 0) : elle doit laisser
   passer les clics, sinon les zones ne reçoivent jamais l'événement. */
.pec-map { cursor: pointer; }
.pec-map .silhouette-zone { pointer-events: auto; }
.pec-map .bodymap-points { pointer-events: none; }   /* badges ET points : jamais entre le doigt et la zone */
.pec-points .lesion-point-mini { width: 15px; height: 15px; }
.pec-map .silhouette-zone path { transition: fill .12s ease; }
.pec-map .silhouette-zone:hover path { fill: #d4c4ae; }
.pec-map .silhouette-zone.zone-active path { fill: #dccbb2; stroke: var(--accent); }

.pec-badge {
    position: absolute; transform: translate(-50%, -50%);
    font-size: .9rem; line-height: 1; padding: .15rem .25rem;
    background: rgba(255, 255, 255, .92); border: 1px solid var(--border);
    border-radius: 999px; pointer-events: none;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .25);
}

.pec-side { display: flex; flex-direction: column; gap: .6rem; }
.pec-corps-entier { width: 100%; text-align: left; }
.pec-corps-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pec-corps-chip {
    padding: .25rem .6rem; border: 1px solid var(--border); border-radius: 999px;
    background: var(--accent-bg, #f6f7f9); font-size: .82rem; cursor: pointer;
}
/* Fil chronologique */
.pec-chrono { display: flex; flex-direction: column; gap: .35rem; }
.pec-chrono-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 10px;
}
.pec-chrono-heure {
    flex: none; min-width: 3.2rem; font-variant-numeric: tabular-nums;
    font-weight: 700; color: var(--accent-dark); font-size: .85rem;
}
.pec-chrono-texte { flex: 1; font-size: .9rem; }

/* Sélecteur de volets au-dessus du mannequin : pilote la colonne de droite */
.pec-volets-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.pec-volet-btn {
    padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 999px;
    background: var(--panel, #fff); font-size: .85rem; cursor: pointer;
}
.pec-volet-btn:hover { border-color: var(--accent); }
.pec-volet-btn.actif {
    border-color: var(--accent); background: var(--accent-bg, #fdeaea);
    font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent);
}
.pec-volet-btn.pec-volet-fait::after { content: ' ✓'; color: #059669; font-weight: 700; }
.pec-volet { display: flex; flex-direction: column; gap: .6rem; }
.pec-volet > h3 { margin: 0; }

/* Champs miroirs pleine largeur des volets (antécédents, devenir…) */
.pec-champs-larges { display: flex; flex-direction: column; gap: .45rem; }
.pec-champ-large { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--muted); }
.pec-champ-large input, .pec-champ-large textarea { width: 100%; }


/* Panneau X-ABCDE (colonne de droite) : une question de tri par étape,
   coche verte si rassurante, détail déplié si problème */
.pec-etapes { display: flex; flex-direction: column; gap: .4rem; }
.pec-etapes h3 { margin: 0; }
.pec-etape {
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--panel, #fff); overflow: hidden;
}
.pec-etape-tete {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    padding: .45rem .6rem; border: none; background: none;
    cursor: pointer; text-align: left; font: inherit;
}
.pec-etape-tete:hover { background: var(--accent-bg, #f6f7f9); }
.pec-etape-lettre {
    flex: none; width: 1.5rem; height: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 50%;
    font-weight: 700; font-size: .82rem; color: var(--accent-dark);
}
.pec-etape-libelle { flex: 1; font-size: .9rem; }
.pec-etape-statut { flex: none; font-weight: 700; min-width: 1.1rem; text-align: center; }
.pec-etape-ok { border-color: #059669; }
.pec-etape-ok .pec-etape-lettre { border-color: #059669; background: #ecfdf5; color: #059669; }
.pec-etape-ok .pec-etape-statut { color: #059669; }
.pec-etape-pb { border-color: #b91c1c; }
.pec-etape-pb .pec-etape-lettre { border-color: #b91c1c; background: #fef2f2; color: #b91c1c; }
.pec-etape-pb .pec-etape-statut { color: #b91c1c; }
.pec-etape-encours { box-shadow: 0 0 0 2px var(--accent-bg, #fdeaea); border-color: var(--accent); }
.pec-etape-corps { padding: 0 .6rem .55rem; border-top: 1px dashed var(--border); }
.pec-etape-question { margin: .5rem 0 .4rem; font-size: .88rem; font-weight: 600; }
.pec-etape-choix { display: flex; gap: .4rem; }
.pec-etape-choix .pec-rep { min-width: 4.5rem; }
.pec-rep-ok.actif { border-color: #059669; background: #ecfdf5; box-shadow: inset 0 0 0 1px #059669; font-weight: 700; }
.pec-rep-pb.actif { border-color: #b91c1c; background: #fef2f2; box-shadow: inset 0 0 0 1px #b91c1c; font-weight: 700; }
.pec-etape-detail { margin-top: .2rem; }
.pec-etape-lien { margin-top: .55rem; }
.pec-pointer-btn { display: block; width: 100%; margin-top: .5rem; text-align: left; }
.pec-mini-champs { display: flex; flex-wrap: wrap; gap: .4rem .7rem; }
.pec-mini-champ { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--muted); }
.pec-mini-champ input { width: 4.2rem; padding: .25rem .35rem; }
.pec-mini-unite { font-size: .75rem; }

.pec-popover {
    /* Toujours centrée à l'écran, quel que soit le point touché sur le mannequin */
    position: fixed; z-index: 90;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(30rem, 92vw); max-width: 92vw; max-height: min(30rem, 90dvh);
    display: flex; flex-direction: column;
    background: var(--panel, #fff); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 14px 40px rgba(15, 20, 30, .3), 0 2px 8px rgba(15, 20, 30, .18);
    padding: .6rem .7rem;
}
.pec-pop-scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* Pied collant : bouton « Enregistrer » toujours visible */
.pec-pop-footer {
    flex: 0 0 auto; margin: .4rem -.7rem -.6rem; padding: .4rem .7rem;
    border-top: 1px solid var(--border); background: var(--panel, #fff);
    border-radius: 0 0 12px 12px;
}
.pec-pop-save {
    display: block; width: 100%; min-height: 38px; padding: .35rem .8rem;
    border: 1px solid var(--accent); border-radius: 999px;
    background: var(--accent); color: #fff; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.pec-pop-save:hover { filter: brightness(1.05); }
.pec-pop-tete {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    margin-bottom: .3rem;
}
.pec-pop-tete strong { font-size: .9rem; color: var(--accent-dark); }
.pec-pop-fermer {
    border: none; background: none; cursor: pointer; font-size: 1rem;
    padding: .1rem .35rem; color: var(--muted);
}
.pec-pop-groupe h4 { margin: .5rem 0 .3rem; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.pec-pop-corps h4 { margin: .4rem 0 .4rem; font-size: .8rem; color: var(--accent-dark); }

/* Popover d'une zone : familles de gestes (icône + libellé), puis actions */
.pec-fam-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .4rem; }
.pec-fam-btn {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .55rem .35rem; border-radius: 12px; border: 1px solid var(--border);
    background: linear-gradient(180deg, #fff 0%, #f3f5f8 100%); font: inherit; cursor: pointer;
    box-shadow: 0 2px 0 #dbe0e8;
}
.pec-fam-btn:active { transform: translateY(1px); box-shadow: none; }
.pec-fam-btn .ico { font-size: 1.4rem; line-height: 1; }
.pec-fam-btn .lib { font-size: .7rem; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.1; }
.pec-fam-nb {
    position: absolute; top: -.4rem; right: -.4rem; min-width: 1.2rem; height: 1.2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: #059669; color: #fff; font-size: .7rem; font-weight: 800;
}
/* Bouton retour des popovers (← Familles, ← Lésion / plainte…) : pilule discrète */
.pec-fam-retour {
    display: inline-flex; align-items: center; gap: .25rem;
    margin-bottom: .3rem; padding: .3rem .75rem;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg); color: var(--accent-dark);
    font-size: .82rem; font-weight: 600; text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.pec-fam-retour:hover { background: var(--accent-bg); border-color: var(--accent); }
.pec-fam-lesion { display: block; margin-top: .5rem; }

/* Marqueur de geste posé au point exact touché (2D et 3D) : icônes côte à côte,
   décalées SOUS le point de lésion (la lésion reste au-dessus). */
.pec-badge-point, .m3d-geste-point {
    transform: translate(-50%, 55%);
    background: rgba(255, 255, 255, .95); border: 2px solid var(--accent);
    border-radius: 999px; padding: 0 .25rem; min-width: 1.5rem; height: 1.4rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .1rem;
    font-size: .82rem; white-space: nowrap; box-shadow: 0 2px 5px rgba(20, 30, 45, .3);
}

/* Popover lésion / plainte : intro + types + description */
.pec-pop-intro { margin: .1rem 0 .4rem; font-weight: 700; color: var(--accent-dark); font-size: .9rem; }
.pec-detail-sous { margin-top: .7rem; border-top: 1px solid var(--border); padding-top: .5rem; }
.pec-detail-types { margin-bottom: .3rem; }
/* Chip de dommage : même gabarit que les chips de soins, ✕ pour supprimer */
.pec-detail-type { display: inline-flex; align-items: center; gap: .3rem; font-size: .84rem; font-weight: 600; }
.pec-detail-type .point-dot { width: 1.2rem; height: 1.2rem; font-size: .62rem; }
.pec-detail-desc { margin: .2rem 0 .4rem; font-size: .85rem; color: var(--muted); }
.pec-chip-x { color: #b91c1c; font-weight: 800; }

/* Boutons d'action du détail de lésion : pleine largeur, dégradés colorés */
.pec-btn-action {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    width: 100%; margin-top: .5rem; padding: .55rem .9rem;
    border: none; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .88rem; font-weight: 700; color: #fff;
    box-shadow: 0 3px 10px rgba(20, 30, 45, .22);
    transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}
.pec-btn-action:hover { filter: brightness(1.08); }
.pec-btn-action:active { transform: scale(.98); box-shadow: 0 1px 4px rgba(20, 30, 45, .25); }
.pec-btn-modifier { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.pec-btn-ajouter { background: linear-gradient(135deg, #0a7d33, #10b981); }
.pec-lesion-type { display: inline-flex; align-items: center; gap: .3rem; }
.pec-lesion-type .point-dot { width: 1.15rem; height: 1.15rem; font-size: .6rem; }
.pec-pop-desc {
    width: 100%; margin: .5rem 0 .1rem; padding: .45rem .55rem;
    border: 1px solid var(--border); border-radius: var(--radius); font: inherit; resize: vertical;
}
.pec-pop-toggles { display: flex; flex-wrap: wrap; gap: .35rem; }
.pec-toggle {
    padding: .35rem .65rem; border: 1px solid var(--border); border-radius: 999px;
    background: var(--panel, #fff); font-size: .85rem; cursor: pointer;
}
.pec-toggle.actif {
    border-color: var(--accent); background: var(--accent-bg, #fdeaea);
    font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent);
}
.pec-photo-btn { margin-top: .55rem; width: 100%; }
/* Prise de photo : libellé de contexte + deux boutons (appareil / galerie) côte à côte */
.pec-photo-wrap { display: block; margin-top: .55rem; }
.pec-photo-legende { display: block; font-size: .82rem; font-weight: 700; color: var(--muted); margin-bottom: .3rem; }
.pec-photo-choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.pec-photo-choix .pec-photo-btn { flex: 1 1 8rem; width: auto; margin-top: 0; }
.pec-photo-nom { display: block; margin-top: .3rem; font-size: .82rem; font-weight: 600; color: #047857; }
.pec-photo-nom:empty { display: none; }

/* « À localiser » : gestes cochés sans zone + mode pointage */
.pec-alocaliser {
    border: 1px dashed var(--accent); border-radius: 10px;
    padding: .6rem .75rem; background: var(--accent-bg, #fdf6f6);
}
.pec-alocaliser h3 { margin: 0 0 .25rem; }
.pec-alocaliser .hint { margin: 0 0 .45rem; }
.pec-chip-pending { outline: 2px solid var(--accent); font-weight: 700; }
.pec-pending { color: var(--accent-dark); font-weight: 600; }
.pec-map.pec-pointage { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Bascule vue guidée / vue classique */
.nav-mode {
    border-top: 2px solid var(--border);
    opacity: .85; font-style: italic;
}
.nav-mode > span { display: inline-flex; align-items: center; gap: .45rem; }

/* Modale des actions d'une zone */
.pec-dialog {
    border: none; border-radius: var(--radius); padding: .9rem;
    width: calc(100vw - 1rem); max-width: 26rem;
    max-height: calc(100dvh - 1rem); overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.pec-dialog::backdrop { background: rgba(20, 20, 22, .55); }
.pec-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.pec-dialog-head h3 { margin: 0; color: var(--accent-dark); text-transform: none; letter-spacing: 0; font-size: 1.05rem; }
.pec-dialog-body h4 { margin: .8rem 0 .3rem; font-size: .85rem; color: var(--muted); }
.pec-action {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .35rem 0;
}
.pec-action label { display: flex; align-items: center; gap: .5rem; cursor: pointer; flex: 1; }
.pec-action input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
.pec-action-heure { width: 6.2rem; }
.legend { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .35rem .75rem; font-size: .85rem; }
.legend .point-dot { margin-right: .4rem; }

.lesion-list { display: flex; flex-direction: column; gap: .6rem; }
.lesion-card {
    display: flex; align-items: center; gap: .65rem;
    background: #fbfbfc; border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .75rem;
}
.lesion-card-dots { display: flex; flex-direction: column; gap: 3px; flex: none; }
.lesion-card-body { flex: 1; min-width: 0; }
.lesion-card-body p { margin: .2rem 0 0; font-size: .88rem; color: #3c3f46; overflow-wrap: anywhere; }
.lesion-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex: none; }

/* --- Modale lésion (mobile : plein écran ou presque) -------------------- */

.lesion-dialog {
    border: none; border-radius: var(--radius); padding: 1rem;
    width: calc(100vw - 1.5rem); max-width: 30rem;
    max-height: calc(100dvh - 2rem); overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.lesion-dialog::backdrop { background: rgba(20, 20, 22, .55); }
.lesion-dialog h3 { margin: 0 0 1rem; color: var(--accent-dark); text-transform: none; letter-spacing: 0; font-size: 1.05rem; }
.lesion-dialog .field { margin-bottom: .9rem; }
.chips-lesion label { padding: .3rem .7rem .3rem .5rem; }
.lesion-photo-current { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.lesion-photo-current img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.checkline { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.form-error { color: #a11212; background: #fce8e8; border-radius: var(--radius); padding: .5rem .75rem; font-size: .88rem; }
.dialog-actions { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; }
.dialog-actions-spacer { flex: 1; }

/* --- En-tête d'application (logo + utilisateur + déconnexion) ----------- */

.app-header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(16, 32, 64, .06);
}
.app-header-inner {
    max-width: 70rem; margin: 0 auto; padding: .5rem 1rem;
    display: flex; align-items: center; gap: .75rem;
}
.app-header-logo { display: inline-flex; flex: none; }
.app-header-logo img { display: block; height: 42px; width: auto; }
.app-header-user {
    margin-left: auto; min-width: 0;
    display: flex; align-items: center; gap: .6rem;
    font-size: .84rem; color: var(--muted);
}
.app-header-email {
    /* min-width: 0 : sans lui, le nowrap fige l'item flex à sa largeur
       min-content et l'en-tête déborde de l'écran sur mobile */
    min-width: 0; max-width: 11rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; color: var(--ink);
}
.btn-deconnexion {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 38px; padding: .3rem .7rem; flex: none;
    border: 1px solid var(--border); border-radius: 999px;
    background: transparent; color: var(--accent-dark);
    font: inherit; font-size: .82rem; font-weight: 600; text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.btn-deconnexion:hover { background: var(--accent-bg); border-color: var(--accent); }

/* --- Création d'une fiche (tableau de bord + liste) --------------------- */

.carte-creation {
    display: flex; flex-direction: column; gap: .8rem;
    padding: 1rem 1.1rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--ombre-carte);
}
.carte-creation-tete { display: flex; align-items: center; gap: .9rem; }
.creation-case { display: flex; align-items: flex-start; gap: .55rem; font-size: .86rem; cursor: pointer; }
.creation-case input { flex: none; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--accent); }

/* Liste des fiches : le bouton créer déroule le formulaire en panneau */
.creation-menu { position: relative; }
.creation-menu summary { list-style: none; }
.creation-menu summary::-webkit-details-marker { display: none; }
.creation-menu[open] summary { filter: brightness(.95); }
.creation-panneau {
    display: flex; flex-direction: column; gap: .8rem;
    margin-top: .5rem; padding: 1rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--ombre-survol);
}

/* Filtre toutes / réelles / tests */
.fiche-filtres {
    display: inline-flex; gap: .25rem; padding: .25rem;
    background: #e6eaf1; border-radius: 999px; margin-bottom: 1rem;
}
.fiche-filtre {
    display: inline-flex; align-items: center; min-height: 36px;
    padding: .3rem .9rem; border-radius: 999px;
    text-decoration: none; color: var(--muted); font-size: .88rem; font-weight: 600;
}
.fiche-filtre.actif { background: var(--card); color: var(--accent-dark); box-shadow: var(--ombre-carte); }

/* Fiches de test (formation) : fond ambré + suppression par le créateur */
.fiche-item { position: relative; }
.fiche-item .fiche-card { height: 100%; box-sizing: border-box; }
.fiche-card-test { background: #fff8e1; border-color: #ecd9a0; }
.fiche-card-test:active { background: #fdf0c8; }
.fiche-card-test .fiche-card-meta { padding-right: 2.6rem; } /* place du bouton 🗑️ */
.badge-test { background: #7c5800; color: #fff; }
.fiche-suppr { position: absolute; right: .6rem; bottom: .55rem; }
.fiche-suppr-btn {
    width: 38px; height: 38px; border: 1px solid #ecd9a0; border-radius: 10px;
    background: #fff; font-size: 1rem; line-height: 1; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.fiche-suppr-btn:hover { background: #fce8e8; border-color: #a11212; }

/* --- Tableau de bord : tuiles d'action ---------------------------------- */

.accueil-actions { display: grid; grid-template-columns: 1fr; gap: .9rem; margin-top: 1.25rem; }
.tuile-action {
    display: flex; align-items: center; gap: .9rem; width: 100%;
    padding: 1rem 1.1rem; text-align: left; text-decoration: none; color: inherit;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--ombre-carte); cursor: pointer; font: inherit;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.tuile-action:hover, .tuile-action:focus-visible {
    border-color: var(--accent); box-shadow: var(--ombre-survol); transform: translateY(-2px);
}
.tuile-action:active { transform: scale(.99); }
.tuile-ico {
    flex: none; width: 52px; height: 52px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem; background: var(--accent-bg);
}
.tuile-ico-primaire { background: linear-gradient(160deg, #1e88e5, var(--accent-dark)); }
.tuile-txt { min-width: 0; }
.tuile-titre { display: block; font-weight: 700; color: var(--accent-dark); }
.tuile-desc { display: block; font-size: .84rem; color: var(--muted); margin-top: .1rem; }
.tuile-chevron { margin-left: auto; flex: none; color: var(--muted); font-size: 1.1rem; }

/* Dialogue « Paramètres du bilan » : étapes affichées du bilan dynamique */
.parametres-bilan {
    border: none; border-radius: 16px; padding: 1.4rem 1.2rem;
    width: calc(100vw - 1.5rem); max-width: 30rem;
    box-shadow: 0 24px 64px rgba(15, 20, 30, .4);
}
.parametres-bilan::backdrop { background: rgba(15, 20, 30, .55); }
.parametres-bilan h2 { margin: 0 0 .2rem; font-size: 1.15rem; text-align: center; }
.parametres-bilan .muted { text-align: center; margin: 0 0 1rem; font-size: .88rem; }
.parametres-bilan-liste { display: flex; flex-direction: column; gap: .45rem; max-height: 55vh; overflow-y: auto; }
.parametres-bilan-ligne {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 12px;
    background: var(--card);
}
.parametres-bilan-ligne:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.parametres-bilan-ligne .choix { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; cursor: pointer; }
.parametres-bilan-ligne input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--accent); }
.parametres-bilan-ligne .ico { font-size: 1.3rem; flex: none; }
.parametres-bilan-ligne .titre { display: block; font-weight: 700; }
.parametres-bilan-ligne .desc { display: block; font-size: .8rem; color: var(--muted); }
.parametres-bilan-ligne .ordre { display: flex; flex-direction: column; gap: .2rem; flex: none; }
.parametres-bilan-ligne .ordre button {
    width: 2rem; height: 1.6rem; padding: 0; font-size: .8rem; line-height: 1;
    border: 1px solid var(--border); border-radius: 8px; background: var(--card);
    color: var(--muted); cursor: pointer;
}
.parametres-bilan-ligne .ordre button:hover { border-color: var(--accent); color: var(--accent-dark); }
.parametres-bilan-garde { color: #a11212; font-size: .85rem; text-align: center; margin: .6rem 0 0; }
.parametres-bilan-boutons { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; }

/* ==========================================================================
   TABLETTE (≥ 720 px)
   ========================================================================== */
@media (min-width: 720px) {
    .card-actions { flex-direction: row; }
    .accueil-actions { grid-template-columns: repeat(2, 1fr); align-items: start; }
    .app-header-email { max-width: 22rem; }
    .creation-panneau { position: absolute; right: 0; z-index: 25; width: 24rem; }

    .page-header-row .create-form { width: auto; }
    .page-header-row .create-form .btn { width: auto; }
    .fiche-list { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
    .fiche-card:hover { border-color: var(--accent); box-shadow: var(--ombre-survol); transform: translateY(-2px); }

    .bilan-topbar {
        position: sticky; top: 0; z-index: 20;
        flex-direction: row; align-items: center; gap: .75rem; padding: .55rem 1rem;
    }
    .bilan-topbar-main { flex: 1; min-width: 0; }
    .bilan-topbar-fields { flex: none; width: auto; }
    .bilan-topbar-fields input, .bilan-topbar-fields select { flex: none; }
    .input-victime { width: 11rem; }
    .btn-save {
        position: static; min-width: 0; min-height: var(--touch);
        border-radius: var(--radius); font-size: 1rem; box-shadow: none;
    }
    .btn-save .btn-txt { display: inline; }
    .btn-back { font-size: 1rem; }

    /* Tablette : onglets XABCDE en ligne avec libellés complets */
    .tabs { display: flex; flex-wrap: wrap; }
    .tabs button { flex: 0 0 auto; flex-direction: row; gap: .3rem; padding: .55rem .75rem; font-size: .78rem; }
    .tabs .tab-letter { font-size: inherit; }
    .tabs .tab-txt { font-size: inherit; font-weight: 700; }
    .tabs .tab-txt-long { display: inline; }
    .tabs .tab-txt-short { display: none; }

    /* Tablette : rangée(s) horizontales, boutons à leur largeur naturelle
       (pas de compression -> pas de chevauchement), retour à la ligne si besoin */
    .bilan-nav { top: 4.1rem; display: flex; flex-wrap: wrap; justify-content: center; }
    .bilan-nav button { flex: 0 0 auto; flex-direction: row; gap: .45rem; font-size: .82rem; padding: .55rem .9rem; }
    .bilan-nav .nav-txt-long { display: inline; }
    .bilan-nav .nav-txt-short { display: none; }
    .bilan-nav .nav-ico { font-size: 1rem; }

    .bilan-content { padding: 1rem; max-width: 72rem; margin: 0 auto; }
    .panel { padding: 1.25rem; }

    .grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem 1.25rem; }

    .bodymap-wrap { flex-direction: row; align-items: flex-start; }
    .bodymap-figures { flex: none; }
    .bodymap-figure { width: 9.5rem; flex: none; }
    .bodymap-side { flex: 1; }

    .pec-wrap { flex-direction: row; align-items: flex-start; }
    .pec-figures { flex: none; }
    .pec-figure { width: 13rem; flex: none; }
    .pec-side { flex: 1; }
    .legend { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }

    .save-row { justify-content: flex-end; }
    .save-row .btn { flex: none; }
}

/* ==========================================================================
   PC (≥ 1080 px) : sidebar verticale + contenu
   ========================================================================== */
@media (min-width: 1080px) {
    .fiche-list { grid-template-columns: repeat(3, 1fr); }

    .bilan-layout {
        display: flex; gap: 1rem; align-items: flex-start;
        max-width: 84rem; margin: 1rem auto; padding: 0 1rem;
    }

    .bilan-nav {
        position: sticky; top: 4.6rem;
        display: flex; flex-direction: column; flex-wrap: nowrap; overflow: visible;
        min-width: 15rem; border: 1px solid var(--border); border-radius: var(--radius);
        padding: 0;
    }
    .bilan-nav button {
        flex-direction: row; justify-content: flex-start;
        width: 100%; font-size: .9rem; padding: .8rem 1rem;
        border-bottom: 1px solid var(--border);
    }
    .bilan-nav button:last-child { border-bottom: none; }
    .bilan-nav button.active { border-bottom-color: var(--border); box-shadow: inset 4px 0 0 var(--accent); }

    .bilan-content { flex: 1; min-width: 0; padding: 0; margin: 0; max-width: none; }

    .bodymap-figure { width: 10.5rem; }
    .pec-figure { width: 16rem; }
}

/* Souris fine : points un peu plus petits, hover states */
@media (hover: hover) and (pointer: fine) {
    .lesion-point { width: 18px; height: 18px; }
    .btn:hover { filter: brightness(.96); }
    .btn-primary:hover { filter: none; }
    .bilan-nav button:hover { background: var(--accent-bg); }
}

/* ==========================================================================
   Mannequin 3D (vue « Prise en charge ») — déclaré après les media queries :
   ses règles priment sur .pec-figures aux mêmes points de rupture.
   ========================================================================== */

.m3d-stage { position: relative; width: 100%; }
.m3d-canvas {
    position: relative; width: 100%;
    height: clamp(420px, 62dvh, 680px);
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 8%, #ffffff 0%, #eef1f5 55%, #dfe5ee 100%);
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(30, 40, 55, .08);
}
.m3d-toile { display: block; width: 100%; height: 100%; cursor: grab; }
.m3d-toile:active { cursor: grabbing; }
/* Mode pointage (geste à localiser, étapes X/A) : même affordance que .pec-pointage */
.m3d-stage.m3d-pointage .m3d-canvas { outline: 2px dashed var(--accent); outline-offset: 2px; }
.m3d-indisponible { padding: 2rem 1rem; text-align: center; }

/* Marqueurs HTML ancrés à la 3D : les points de lésion restent cliquables,
   le calque lui-même laisse passer les gestes de rotation vers la toile. */
.m3d-overlay { position: absolute; inset: 0; pointer-events: none; }
.m3d-overlay .m3d-dot { pointer-events: auto; }
/* Badges de gestes du mannequin : cliquables (détail / retrait des gestes) */
.m3d-overlay .m3d-badge-btn { pointer-events: auto; cursor: pointer; font: inherit; }
/* Étiquette du débit d'O₂ à côté du masque / des lunettes */
.m3d-debit-o2 { font-size: .74rem; font-weight: 700; color: var(--accent-dark); white-space: nowrap; }

/* Génération de la synthèse (section Devenir) */
.synthese-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .6rem; }
/* Marqueur de la face opposée (dos quand on regarde la face, et inversement) :
   toujours visible mais grisé, en retrait, et non cliquable. */
.m3d-oppose {
    filter: grayscale(1) opacity(.55); pointer-events: none;
    z-index: 1;
}
.m3d-oppose.point-dot { background: #9aa0a6 !important; border-color: #7c8085 !important; color: #fff !important; }

/* Libellé de face (« Face antérieure / postérieure ») masqué à la demande :
   l'orientation est déjà évidente à l'écran. */
.m3d-vue { display: none; }
/* Coin bas-droit : ne recouvre jamais les pieds du mannequin (bas-centre).
   z-index au-dessus des raccourcis du bilan dynamique (.pec-dyn = 20) pour que
   les boutons Face / Dos / ✕ Quitter restent au premier plan, jamais masqués. */
.m3d-toolbar {
    position: absolute; bottom: .55rem; right: .6rem; z-index: 40;
    display: flex; gap: .4rem;
}
.m3d-btn {
    min-height: 38px; padding: .3rem .8rem; border-radius: 999px;
    border: 1px solid var(--border); background: rgba(255, 255, 255, .92);
    font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .2);
}
.m3d-btn:hover { border-color: var(--accent); }
/* « Corps entier » : proposé seulement une fois la caméra rapprochée (zoom
   automatique après un tap sur la tête, pincement, molette) */
.m3d-vue-entiere { display: none; border-color: var(--accent); color: var(--accent-dark); font-weight: 700; }
.m3d-stage.m3d-zoome .m3d-vue-entiere { display: inline-flex; align-items: center; }

/* Plein écran : le bloc entier passe en position fixe — popover, marqueurs
   et boutons restent fonctionnels (même arbre DOM, mêmes contrôleurs). */
.m3d-stage.m3d-plein-ecran {
    position: fixed; inset: 0; z-index: 80; max-width: none;
    display: flex; flex-direction: column;
    background: #eef1f5; padding: .5rem;
}
.m3d-plein-ecran .m3d-canvas { flex: 1; height: auto; min-height: 0; }
body.m3d-noscroll { overflow: hidden; }

@media (min-width: 720px) {
    .m3d-stage { flex: 1.3; min-width: 0; }
    .m3d-canvas { height: clamp(480px, 66dvh, 760px); }
}

/* ==========================================================================
   Bilan dynamique : X-ABCDE conduit sur le mannequin plein écran —
   une question à la fois en gros boutons « relief », transitions animées.
   ========================================================================== */

/* Bouton de lancement (panneau Prise en charge) */
.btn-dyn {
    display: block; width: 100%; margin-bottom: .7rem; min-height: var(--touch);
    padding: .6rem 1rem; border-radius: 12px; border: 1px solid #10264f;
    background: linear-gradient(180deg, #2196f3 0%, var(--accent) 55%, #10336b 100%);
    color: #fff; font: inherit; font-size: .98rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 0 #10264f, 0 8px 16px rgba(16, 38, 79, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-dyn:hover { filter: brightness(1.06); }
.btn-dyn:active { transform: translateY(3px); box-shadow: 0 1px 0 #10264f, 0 3px 6px rgba(16, 38, 79, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }

/* Carte de questions posée sur la scène (visible aussi en plein écran) */
.pec-dyn {
    position: absolute; left: 0; right: 0; bottom: .5rem; z-index: 20;
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    padding: 0 .5rem;
    pointer-events: none;   /* seuls carte et boutons captent les taps : le mannequin reste manipulable */
}
/* Dev : la toolbar du profiler Symfony recouvre le bas de l'écran */
body:has(.sf-toolbar) .pec-dyn { bottom: 3rem; }
.pec-dyn-cartebox { display: flex; justify-content: center; width: 100%; }

/* Barre du bas partagée : pastilles de phases + « Reprendre » + boutons du
   mannequin (Face/Dos/Quitter) dans le même conteneur flex → ils s'alignent et
   passent à la ligne au besoin, sans jamais se chevaucher. */
.pec-dyn-controls {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .4rem .5rem; width: 100%;
    pointer-events: none;   /* les espaces laissent tourner le mannequin ; seuls les boutons captent */
}
.pec-dyn-controls > * { pointer-events: auto; }
/* La toolbar rejoint le flux de la barre (plus en position absolue sur le canvas) */
.pec-dyn-controls .m3d-toolbar { position: static; inset: auto; z-index: auto; }

/* Barre des phases sous la carte : état de chaque volet, bascule au tap */
.pec-dyn-phases { pointer-events: auto; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.pec-dyn-phase {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 40px; padding: .3rem .75rem; border-radius: 999px;
    border: 1px solid var(--border); background: rgba(255, 255, 255, .95);
    font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 2px 0 #d6dbe4, 0 4px 10px rgba(20, 30, 45, .18);
}
.pec-dyn-phase.actif { border-color: var(--accent); background: var(--accent-bg, #fdeaea); color: var(--accent-dark); }
.pec-dyn-phase .etat { font-size: .78rem; font-weight: 800; color: var(--muted); }
.pec-dyn-phase .etat.ok { color: #059669; }
.pec-dyn-phase .etat.pb { color: #b91c1c; }
.pec-dyn[hidden] { display: none; }
.pec-dyn-carte {
    pointer-events: auto; position: relative;
    width: min(34rem, 100%); max-height: 52dvh; overflow-y: auto;
    background: rgba(255, 255, 255, .97); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 20, 30, .35), 0 3px 10px rgba(15, 20, 30, .2);
    padding: .8rem 1rem 1rem;
}
.pec-dyn-entree { animation: pec-dyn-entree .28s ease-out; }
.pec-dyn-sortie { animation: pec-dyn-sortie .25s ease-in forwards; }
@keyframes pec-dyn-entree {
    from { opacity: 0; transform: translateY(26px) scale(.96); }
    to { opacity: 1; transform: none; }
}
@keyframes pec-dyn-sortie {
    to { opacity: 0; transform: translateX(-36px) scale(.96); }
}

.pec-dyn-prog { display: flex; gap: .35rem; justify-content: center; margin-bottom: .45rem; }
.pec-dyn-puce {
    width: 1.8rem; height: 1.8rem; border-radius: 50%; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer;
    background: #eef1f5; color: var(--muted); border: 1px solid var(--border);
}
.pec-dyn-puce:hover { border-color: var(--accent); }
.pec-dyn-puce.ok { background: #059669; border-color: #059669; color: #fff; }
.pec-dyn-puce.pb { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.pec-dyn-puce.encours { outline: 2px solid var(--accent); outline-offset: 2px; }

.pec-dyn-titre { margin: .1rem 0; text-align: center; font-weight: 800; font-size: 1rem; color: var(--accent-dark); }
.pec-dyn-question { margin: .2rem 0 .8rem; text-align: center; font-size: 1.12rem; font-weight: 650; }
.pec-dyn-guide { margin: .3rem 0 .55rem; text-align: center; font-size: .98rem; font-weight: 700; color: var(--accent-dark); }
.pec-dyn-fin { margin: .4rem 0 .8rem; text-align: center; font-size: 1.15rem; font-weight: 800; color: #059669; }
.pec-dyn-detail { text-align: left; margin-bottom: .3rem; }

/* Gestes médicaux — « Autres médicaments » (saisie libre) dans la carte dynamique */
.pec-medic-autres { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .4rem; }
.pec-medic-autres:empty { display: none; }
.pec-medic-puce {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .3rem .2rem .6rem; border-radius: 999px;
    border: 1px solid var(--accent); background: #eef4ff; color: var(--accent-dark);
    font-size: .82rem; font-weight: 600;
}
.pec-medic-supp {
    border: none; background: none; cursor: pointer; color: var(--muted);
    font-size: .85rem; line-height: 1; padding: .1rem .25rem; border-radius: 999px;
}
.pec-medic-supp:hover { color: var(--danger-dark, #8c0015); }
.pec-medic-ajout { display: flex; gap: .4rem; margin-top: .2rem; }
.pec-medic-ajout input {
    flex: 1; min-width: 0; padding: .4rem .6rem; font: inherit; font-size: .9rem;
    border: 1px solid var(--border); border-radius: 10px;
}
.pec-medic-ajout-btn {
    flex: none; padding: .4rem .9rem; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--accent); background: var(--accent); color: #fff;
    font: inherit; font-size: .88rem; font-weight: 700;
}
.pec-medic-ajout-btn:hover { filter: brightness(1.05); }

/* Champ de recherche des gestes médicaux : filtre en direct médicaments + gestes */
.pec-medic-recherche { margin: .2rem 0 .5rem; }
.pec-medic-recherche input {
    width: 100%; padding: .5rem .7rem; font: inherit; font-size: .95rem;
    border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.pec-medic-recherche input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Liste répétable (vue classique) : saisies libres « Autres médicaments » */
.repeat-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .4rem; }
.repeat-row { display: flex; gap: .4rem; }
.repeat-row input {
    flex: 1; min-width: 0; padding: .45rem .6rem; font: inherit;
    border: 1px solid var(--border); border-radius: 10px;
}
.btn-ajout {
    align-self: flex-start; padding: .4rem .8rem; border-radius: 10px; cursor: pointer;
    border: 1px dashed var(--accent); background: #f5f8ff; color: var(--accent-dark);
    font: inherit; font-size: .88rem; font-weight: 700;
}
.btn-ajout:hover { background: #eaf1ff; }
/* Boutons « relief 3D » : dégradé + épaisseur (ombre portée dure) + enfoncement au clic */
/* Marge basse : les boutons relief débordent de 6 px (socle box-shadow) + 5 px
   d'anneau quand la réponse est choisie — le contenu suivant (chips préremplies
   des antécédents…) ne doit pas mordre dessus. */
.pec-dyn-choix { display: flex; flex-wrap: wrap; gap: .9rem .8rem; justify-content: center; margin-bottom: .85rem; }
.pec-dyn-btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
    min-width: 8.5rem; min-height: 58px; padding: .55rem 1.2rem;
    border-radius: 14px; border: 1px solid transparent;
    font: inherit; font-size: 1.08rem; font-weight: 800; color: #fff; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.pec-dyn-btn small { font-size: .68rem; font-weight: 600; opacity: .92; }
.pec-dyn-btn:hover { filter: brightness(1.06); }
.pec-dyn-btn:active { transform: translateY(4px); }
/* Réponse OUI/NON déjà choisie (antécédents, repas) : anneau de confirmation */
.pec-dyn-btn.actif { outline: 3px solid #1e293b; outline-offset: 2px; }
.pec-dyn-non, .pec-dyn-vert {
    background: linear-gradient(180deg, #10b981 0%, #059669 55%, #047857 100%); border-color: #065f46;
    box-shadow: 0 6px 0 #065f46, 0 10px 18px rgba(6, 95, 70, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.pec-dyn-non:active, .pec-dyn-vert:active { box-shadow: 0 2px 0 #065f46, 0 4px 8px rgba(6, 95, 70, .3), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pec-dyn-oui, .pec-dyn-rouge {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 55%, #b91c1c 100%); border-color: #7f1d1d;
    box-shadow: 0 6px 0 #7f1d1d, 0 10px 18px rgba(127, 29, 29, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.pec-dyn-oui:active, .pec-dyn-rouge:active { box-shadow: 0 2px 0 #7f1d1d, 0 4px 8px rgba(127, 29, 29, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.pec-dyn-orange {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 55%, #b45309 100%); border-color: #92400e;
    box-shadow: 0 6px 0 #92400e, 0 10px 18px rgba(146, 64, 14, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.pec-dyn-orange:active { box-shadow: 0 2px 0 #92400e, 0 4px 8px rgba(146, 64, 14, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.pec-dyn-continuer, .pec-dyn-bleu {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%); border-color: #1e40af;
    box-shadow: 0 6px 0 #1e40af, 0 10px 18px rgba(30, 64, 175, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.pec-dyn-continuer:active, .pec-dyn-bleu:active { box-shadow: 0 2px 0 #1e40af, 0 4px 8px rgba(30, 64, 175, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.pec-dyn-continuer { display: flex; margin: .5rem auto 0; }
/* OUI déjà choisi : « Continuer » prend la place du OUI, « Effacer » celle du NON */
.pec-dyn-choix .pec-dyn-continuer-choix { margin: 0; min-width: 10rem; }
.pec-dyn-effacer {
    align-self: center;
    padding: .5rem .8rem; border-radius: 10px;
    border: 1px solid #b91c1c; background: #fee2e2; color: #b91c1c;
    font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.pec-dyn-effacer:hover { background: #fecaca; }
.pec-dyn-effacer:active { transform: translateY(1px); }

/* Bouton de clôture (carte Transport) : pleine largeur, libellé long */
.pec-dyn-cloturer { width: 100%; margin-top: .45rem; text-align: center; }
.pec-dyn-cloturer span:first-child { line-height: 1.25; }

/* Barre haute du bilan dynamique : cinq menus d'identité (âge, sexe, nom,
   adresse, contacts) — chaque bouton déplie un panneau de champs miroirs */
.pec-dyn-haut {
    position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); z-index: 20;
    display: flex; flex-direction: column; gap: .3rem;
    max-width: calc(100% - 1rem);
    background: rgba(255, 255, 255, .95); border: 1px solid var(--border); border-radius: 22px;
    box-shadow: 0 8px 24px rgba(15, 20, 30, .22);
    padding: .3rem .6rem;
}
.pec-dyn-haut[hidden] { display: none; }
.pec-dyn-haut-menus { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
.pec-dyn-haut-menu {
    display: inline-flex; align-items: center; gap: .3rem;
    min-height: 40px; padding: .25rem .6rem; border-radius: 999px;
    border: 1px solid var(--border); background: #fff;
    font: inherit; font-size: .8rem; font-weight: 700; color: var(--muted); cursor: pointer;
}
.pec-dyn-haut-menu.rempli { border-color: #059669; background: #ecfdf5; color: #047857; }
.pec-dyn-haut-menu.ouvert { border-color: var(--accent); background: #eef4ff; color: var(--accent-dark); }
.pec-dyn-haut-val { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pec-dyn-haut-val:empty { display: none; }
.pec-dyn-haut-panneau {
    display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; justify-content: center;
    border-top: 1px solid var(--border); padding: .4rem .2rem .25rem;
}
.pec-dyn-haut-panneau[hidden] { display: none; }
.pec-dyn-haut label { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
.pec-dyn-haut input {
    min-height: 40px; padding: .3rem .5rem; border: 1px solid var(--border);
    border-radius: 8px; font: inherit; font-size: .95rem;
}
.pec-dyn-haut .age input { width: 4.6rem; }
.pec-dyn-haut label.large input { width: min(16rem, 60vw); }
.pec-dyn-haut-ou { font-size: .75rem; color: var(--muted); }
.pec-dyn-haut-seg { display: inline-flex; gap: .3rem; }
.pec-dyn-haut-seg button {
    min-height: 40px; padding: .3rem .9rem; border-radius: 999px;
    border: 1px solid var(--border); background: #fff;
    font: inherit; font-size: .85rem; font-weight: 700; color: var(--muted); cursor: pointer;
}
.pec-dyn-haut-seg button.actif { border-color: var(--accent); background: var(--accent); color: #fff; }
/* Réduction de la barre haute en pastille « Identité » */
.pec-dyn-haut-reduire { align-self: center; min-height: 40px; }
.pec-dyn-haut-restaurer { display: none; }
.pec-dyn-haut-mini .pec-dyn-haut-menus,
.pec-dyn-haut-mini .pec-dyn-haut-panneau { display: none; }
.pec-dyn-haut-mini .pec-dyn-haut-restaurer {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    min-height: 40px; padding: .25rem .8rem;
    border: none; background: none;
    font: inherit; font-size: .85rem; font-weight: 700; color: var(--accent-dark); cursor: pointer;
}

/* Mineur isolé : n'apparaît que sous 18 ans, signalé comme un point d'attention */
.pec-dyn-haut-mineur {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .2rem .3rem .2rem .6rem; border-radius: 999px;
    border: 1px dashed #d97706; background: #fffbeb;
    font-size: .8rem; font-weight: 700; color: #92400e;
}
.pec-dyn-haut-mineur[hidden] { display: none; }

/* Mobile : bilan dynamique compact — carte moins haute, menus de phases en
   icônes seules (le libellé reste en title/aria-label), barre haute resserrée */
@media (max-width: 719px) {
    .pec-dyn { gap: .35rem; }
    .pec-dyn-phases { gap: .3rem; }
    .pec-dyn-phase { padding: .25rem .5rem; gap: .25rem; min-height: 38px; }
    .pec-dyn-phase .lib { display: none; }
    .pec-dyn-carte { max-height: 42dvh; padding: .55rem .65rem .75rem; border-radius: 14px; }
    .pec-dyn-titre { font-size: .92rem; }
    .pec-dyn-question { margin-bottom: .55rem; font-size: 1rem; }
    .pec-dyn-guide { font-size: .9rem; }
    .pec-dyn-choix { gap: .7rem .6rem; margin-bottom: .7rem; }
    .pec-dyn-btn { min-width: 7rem; min-height: 50px; padding: .45rem .9rem; font-size: 1rem; }
    .pec-dyn-haut { padding: .25rem .4rem; gap: .25rem; }
    .pec-dyn-haut-menus { gap: .25rem; }
    .pec-dyn-haut-menu { min-height: 36px; padding: .2rem .5rem; font-size: .75rem; }
    /* Les valeurs restent visibles dans les panneaux : les pastilles gardent
       juste leur libellé (vert = renseigné) pour tenir sur deux rangées */
    .pec-dyn-haut-val { display: none; }
    .pec-dyn-haut-reduire { min-height: 36px; }
    /* « Réduire » en haut de la carte, en flux (plus flottant par-dessus le
       contenu) et à sa largeur naturelle — la pilule garde son style de base. */
    .pec-dyn-reduire {
        position: static; z-index: auto;
        margin: 0 0 .45rem;
    }
}

/* Modale de choix du mode à l'ouverture de la fiche */
.choix-mode {
    border: none; border-radius: 16px; padding: 1.4rem 1.2rem;
    width: calc(100vw - 1.5rem); max-width: 30rem;
    box-shadow: 0 24px 64px rgba(15, 20, 30, .4);
}
.choix-mode::backdrop { background: rgba(15, 20, 30, .55); }
.choix-mode h2 { margin: 0 0 .2rem; font-size: 1.15rem; text-align: center; }
.choix-mode .muted { text-align: center; margin: 0 0 1rem; font-size: .88rem; }
.choix-mode-options { display: flex; flex-direction: column; gap: .7rem; }
.choix-mode-btn {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: 1rem .8rem; border-radius: 14px; border: 1px solid var(--border);
    background: #fff; font: inherit; cursor: pointer; text-align: center;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.choix-mode-btn:hover { border-color: var(--accent); }
.choix-mode-btn:active { transform: translateY(2px); }
.choix-mode-btn .choix-ico { font-size: 1.8rem; line-height: 1; }
.choix-mode-btn strong { font-size: 1.05rem; }
.choix-mode-btn small { color: var(--muted); font-size: .82rem; }
.choix-mode-dyn {
    border-color: #059669;
    background: linear-gradient(180deg, #ecfdf5 0%, #fff 60%);
    box-shadow: 0 4px 0 #d1fae5;
}
.choix-mode-dyn strong { color: #047857; }
.choix-badge {
    position: absolute; top: .55rem; right: .6rem;
    background: #059669; color: #fff; border-radius: 999px;
    padding: .1rem .55rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
}

/* Accordéon de la carte détails circonstanciel : parties repliées en une ligne */
.pec-dyn-pli { width: 100%; border: 1px solid var(--border); border-radius: 10px; margin: .25rem 0; overflow: hidden; text-align: left; }
.pec-dyn-pli-tete {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    min-height: 42px; padding: .4rem .6rem;
    border: none; background: #f6f7f9; font: inherit; cursor: pointer;
}
.pec-dyn-pli.ouvert .pec-dyn-pli-tete { background: #fff; border-bottom: 1px solid var(--border); }
.pec-dyn-pli-tete strong { font-size: .74rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.pec-dyn-pli-tete .resume { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 700; color: var(--muted); text-align: right; }
.pec-dyn-pli-tete .resume.rempli { color: #059669; }
.pec-dyn-pli-tete .chevron { color: var(--muted); }
.pec-dyn-pli-corps { padding: .5rem .6rem .6rem; }
.pec-dyn-pli-corps .pec-pop-groupe { margin: 0; }

/* Validation globale du X-ABCDE depuis une carte de question */
.pec-dyn-ras {
    display: block; margin: .7rem auto 0; min-height: 42px; padding: .4rem .9rem;
    border: 1px solid #059669; border-radius: 999px; background: #ecfdf5; color: #059669;
    font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.pec-dyn-ras:hover { background: #d1fae5; }

/* Réduction en barre fine : la carte et la barre des phases se replient.
   Même bouton pilule pour la carte du bas et la barre d'identité du haut. */
.pec-dyn-reduire, .pec-dyn-haut-reduire {
    padding: .3rem .7rem; border-radius: 999px;
    border: 1px solid var(--accent); background: #eef4ff;
    font: inherit; font-size: .8rem; font-weight: 700; color: var(--accent-dark); cursor: pointer;
    box-shadow: 0 2px 6px rgba(20, 30, 45, .15);
}
.pec-dyn-reduire { position: absolute; top: .35rem; left: .45rem; z-index: 1; }
.pec-dyn-reduire:active, .pec-dyn-haut-reduire:active { transform: translateY(1px); }
.pec-dyn-barre {
    display: none; pointer-events: auto;
    width: min(34rem, 100%); min-height: 42px; padding: .3rem .9rem;
    align-items: center; justify-content: center; gap: .4rem;
    border: 1px solid var(--border); border-radius: 999px;
    background: rgba(255, 255, 255, .95); font: inherit; font-size: .85rem; font-weight: 700;
    color: var(--accent-dark); cursor: pointer;
    box-shadow: 0 2px 0 #d6dbe4, 0 6px 14px rgba(20, 30, 45, .2);
}
.pec-dyn-mini .pec-dyn-cartebox, .pec-dyn-mini .pec-dyn-phases { display: none; }
.pec-dyn-mini .pec-dyn-barre { display: flex; }

/* Étape X en pointage : la barre porte la consigne (plusieurs hémorragies) */
.pec-dyn-barre-pointage {
    border-color: var(--danger-dark, #8c0015);
    background: #fff2f3;
    color: var(--danger-dark, #8c0015);
    animation: pec-barre-pulse 1.6s ease-in-out infinite;
}
@keyframes pec-barre-pulse {
    50% { box-shadow: 0 2px 0 #e5b6bc, 0 6px 18px rgba(140, 0, 21, .35); }
}
@media (prefers-reduced-motion: reduce) {
    .pec-dyn-barre-pointage { animation: none; }
}

/* Carte Devenir : plein écran scindé — mannequin réduit à gauche, synthèse à
   droite, décision + Terminer en dessous. Le canvas 3D est contraint à gauche
   tant que la carte Devenir est affichée (et pas réduite en barre). */
.pec-dyn-plein { top: .5rem; }
/* Réduit : la carte est masquée → on relâche la pleine hauteur pour que la barre
   « Reprendre les questions » reste ancrée en bas, comme sur les autres pages. */
.pec-dyn-plein.pec-dyn-mini { top: auto; }
.pec-dyn-plein .pec-dyn-cartebox { flex: 1; min-height: 0; }
.m3d-stage.m3d-plein-ecran:has(.pec-dyn-plein):not(:has(.pec-dyn-mini)) .m3d-canvas {
    position: absolute; left: .6rem; top: 3.6rem; width: 34%; height: 48%; flex: none;
}
/* La barre haute (âge…) se range au-dessus du mannequin, pas sur la synthèse */
.m3d-stage.m3d-plein-ecran:has(.pec-dyn-plein:not(.pec-dyn-mini)) .pec-dyn-haut {
    left: 17%; max-width: 34%;
}
.pec-dyn-carte-devenir {
    width: 100%; max-width: none; height: 100%; max-height: none;
    background: none; border: none; box-shadow: none; padding: 0;
    display: flex; flex-direction: column; gap: .5rem;
    overflow: visible; pointer-events: none;
}
.pec-dyn-carte-devenir .pec-dyn-reduire { pointer-events: auto; }
.pec-dev-haut { flex: 1; min-height: 0; display: flex; gap: .5rem; }
.pec-dev-espace { flex: 0 0 35%; pointer-events: none; } /* fenêtre sur le mannequin */
.pec-dev-synthese {
    flex: 1; min-width: 0; overflow-y: auto; pointer-events: auto;
    background: rgba(255, 255, 255, .97); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 20, 30, .3), 0 3px 10px rgba(15, 20, 30, .18);
    padding: .7rem .9rem;
}
.pec-dev-synthese .pec-samu { margin-top: 0; border: none; border-radius: 0; padding: 0; background: none; }
.pec-dev-synthese .pec-samu-texte { max-height: none; }
.pec-dev-bas {
    pointer-events: auto; flex: none; max-height: 42dvh; overflow-y: auto;
    background: rgba(255, 255, 255, .97); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 20, 30, .3), 0 3px 10px rgba(15, 20, 30, .18);
    padding: .55rem .9rem .8rem; text-align: center;
}
.pec-dev-bas .pec-pop-groupe { text-align: left; }
/* Titre « Devenir de la victime » cliquable (repli/dépli). Sur desktop il se
   comporte comme un simple titre (pas de chevron, corps toujours visible) ;
   le repli n'agit que sur mobile. */
.pec-dev-titre {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; border: none; background: none; padding: 0;
    font-family: inherit; cursor: default;
}
.pec-dev-titre .chevron { display: none; color: var(--muted); font-size: .85em; }
@media (max-width: 719px) {
    .pec-dev-titre { cursor: pointer; }
    .pec-dev-titre .chevron { display: inline; }
    .pec-dev-bas-replie .pec-dev-corps { display: none; }
    /* replié : la carte n'a plus besoin de toute la hauteur pour le bas */
    .pec-dev-bas-replie { max-height: none; }
}
/* Retour du volet transport vers le choix de la décision */
.pec-dev-retour { display: inline-block; margin-bottom: .3rem; font-size: .85rem; }

/* Synthèse : l'identité est déjà reprise dans le bilan SAMU → on retire le
   bandeau d'identité du haut pour dégager de la place. */
.m3d-stage.m3d-plein-ecran:has(.pec-dyn-plein) .pec-dyn-haut { display: none; }

/* Carte Devenir (synthèse) sur mobile : le split bureau (mannequin à gauche,
   synthèse à droite) ne tient pas sur un téléphone → empilement vertical plein
   écran défilant (synthèse pleine largeur, puis décision). La barre Face / Dos /
   ✕ Quitter reste fixe en bas de l'écran (comportement par défaut conservé). */
@media (max-width: 719px) {
    .pec-dev-haut { flex-direction: column; }
    .pec-dev-espace { display: none; }              /* pas de fenêtre mannequin */
    .pec-dev-synthese { flex: 1 1 auto; min-height: 0; max-height: none; }
    .pec-dev-bas { max-height: 48dvh; }
    /* Le mannequin repasse en fond plein écran (masqué par les cartes opaques),
       pour que la barre du bas s'ancre bien dans les coins de l'écran. */
    .m3d-stage.m3d-plein-ecran:has(.pec-dyn-plein):not(:has(.pec-dyn-mini)) .m3d-canvas {
        left: 0; top: 0; width: 100%; height: 100%;
    }
}

/* Page de fin de prise en charge (secouristes SSO : fermer l'onglet) */
.fin-prise-en-charge {
    max-width: 28rem; margin: 12vh auto 0; padding: 1.5rem 1.2rem;
    text-align: center;
    background: #fff; border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15, 20, 30, .12);
}
.fin-prise-en-charge .fin-icone { margin: 0; font-size: 3rem; line-height: 1; }
.fin-prise-en-charge h1 { margin: .4rem 0 .6rem; font-size: 1.3rem; }
.fin-prise-en-charge p { margin: .35rem 0; }

/* Refus de transport : texte de décharge + signature au doigt */
.pec-refus-texte {
    margin: .3rem 0 .6rem; padding: .55rem .7rem; text-align: left;
    border: 1px solid var(--border); border-left: 3px solid var(--danger-dark, #8c0015);
    border-radius: 8px; background: #fff7f7; font-size: .85rem; line-height: 1.5;
}
.pec-refus-fait { margin: .4rem 0 .3rem; font-weight: 800; color: #059669; }
.pec-signature { margin-top: .4rem; text-align: left; }
.pec-signature h4 { margin: 0 0 .3rem; }
/* Pad borné en largeur : sur grand écran le canvas ne s'étire plus en pleine
   page (moins haut, ratio 640×160 préservé) */
.pec-signature-canvas {
    display: block; width: 100%; max-width: 30rem; height: auto;
    border: 1px dashed #8a93a3; border-radius: 10px; background: #fff;
    cursor: crosshair;
}
.pec-signature-boutons { display: flex; gap: .5rem; justify-content: space-between; margin-top: .45rem; max-width: 30rem; }

/* Bilan à passer au SAMU : statuts X-ABCDE + synthèse générée */
.pec-samu {
    margin-top: .6rem; padding: .55rem .65rem;
    border: 1px solid var(--border); border-left: 3px solid #2563eb;
    border-radius: 10px; background: #f8fafc; text-align: left;
}
.pec-samu h4 { margin: 0 0 .4rem; }
.pec-samu-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.pec-samu-chip {
    display: inline-flex; align-items: center;
    padding: .18rem .55rem; border-radius: 999px;
    border: 1px solid var(--border); background: #eef1f5; color: var(--muted);
    font-size: .74rem; font-weight: 700;
}
.pec-samu-chip.ok { border-color: #059669; background: #ecfdf5; color: #047857; }
.pec-samu-chip.pb { border-color: #b91c1c; background: #b91c1c; color: #fff; }
.pec-samu-chip.asu { border-color: #d97706; background: #fffbeb; color: #b45309; }
.pec-samu-texte {
    max-height: 14rem; overflow-y: auto;
    padding: .45rem .55rem; border: 1px dashed var(--border); border-radius: 8px;
    background: #fff; font-size: .78rem; line-height: 1.45; white-space: pre-wrap;
}
.pec-samu .pec-btn-action { margin-top: .45rem; }
/* En-tête du bloc : titre + bouton « Transférer la fiche » côte à côte */
.pec-samu-entete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.pec-samu-entete h4 { margin: 0; }
.pec-samu .pec-samu-entete .pec-btn-action { width: auto; margin-top: 0; padding: .4rem .8rem; font-size: .82rem; }
.pec-btn-transfert { background: linear-gradient(135deg, #1e88e5, var(--accent-dark)); }

/* Liste des hémorragies pointées (détail de l'étape X) */
.pec-x-liste { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .5rem; }
.pec-x-liste h4 { margin: 0 0 .1rem; }
.pec-x-hemorragie {
    display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    width: 100%; padding: .4rem .6rem; text-align: left;
    border: 1px solid var(--border); border-left: 3px solid var(--danger-dark, #8c0015);
    border-radius: 8px; background: var(--panel, #fff); font: inherit; cursor: pointer;
}
.pec-x-hemorragie strong { font-size: .85rem; color: var(--danger-dark, #8c0015); }
.pec-x-hemorragie span { font-size: .82rem; color: var(--muted); }

/* Photos d'ordonnances : vignettes (carte traitements + vue classique) */
.ordonnances-liste { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.ordonnance-thumb {
    width: 72px; height: 72px; object-fit: cover; display: block;
    border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 2px 6px rgba(20, 30, 45, .18);
}
.ordonnances .ordonnances-liste { justify-content: flex-start; }

/* --- Page de connexion -------------------------------------------------- */

.login-page {
    min-height: 100dvh;
    /* Colonne (carte + lien connexion) : align-items = axe horizontal */
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    /* Le visuel fond.webp intègre déjà le logo en haut et un halo central :
       la carte se cale sous le logo, dans le halo (pas de logo dans la carte).
       Le dégradé marine sert de repli pendant le chargement / si l'image manque. */
    /* Dégagement sous le logo du fond : dépend de la hauteur (image cover
       calée en haut) ET de la largeur sur écrans très larges (le logo occupe
       ~15 % de la largeur de l'image en hauteur). */
    padding: max(clamp(9rem, 29vh, 19rem), 15.5vw) 1rem 1.5rem;
    background:
        url("../images/fond-Srln9DT.webp") center top / cover no-repeat,
        linear-gradient(160deg, #0f2450 0%, var(--accent-dark) 55%, #1d4587 100%);
}
.login-card {
    width: 100%; max-width: 26rem;
    background: var(--card); border-radius: 18px;
    box-shadow: 0 24px 60px rgba(8, 16, 34, .45);
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
}
.login-titre { font-size: 1.35rem; margin: 0; color: var(--accent-dark); }
.login-sous-titre { margin: .25rem 0 1.25rem; color: var(--muted); font-size: .92rem; }
.login-erreur {
    margin-bottom: 1rem; padding: .65rem .85rem; text-align: left;
    border: 1px solid #f1b8bf; border-radius: var(--radius);
    background: var(--danger-bg); color: var(--danger-dark);
    font-size: .9rem;
}
.login-form { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.login-champ label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.login-champ input {
    width: 100%; min-height: var(--touch);
    padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; background: #fbfcfe;
}
.login-champ input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: #fff; }
.login-submit { width: 100%; margin-top: .25rem; }
.login-note { margin: 1.25rem 0 0; font-size: .78rem; color: var(--muted); }

/* --- Transmission SAMU / hôpital ----------------------------------------- */

/* Page publique : lien discret vers la connexion de l'équipe */
.transmission-lien-connexion {
    display: inline-block; margin-top: 1.1rem; padding: .35rem .9rem;
    background: rgba(13, 28, 60, .55); border-radius: 999px;
    color: #e6eefb; font-size: .85rem; text-decoration: underline;
}
.transmission-lien-connexion:hover { color: #fff; background: rgba(13, 28, 60, .75); }

/* Saisie du code : gros chiffres espacés */
.transmission-code-input {
    font-size: 1.4rem; letter-spacing: .35em; text-align: center; font-weight: 700;
}

/* Page secouriste : code généré à communiquer oralement */
.transmission-carte {
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--ombre-carte); padding: 1.25rem; text-align: center;
}
.transmission-consigne { margin: .4rem 0; }
.transmission-code {
    margin: .75rem auto; padding: .8rem 1rem; max-width: 18rem;
    font-size: 2.4rem; font-weight: 800; letter-spacing: .12em;
    color: var(--accent-dark); background: var(--accent-bg);
    border: 2px dashed var(--accent); border-radius: 14px;
    user-select: all;
}
.transmission-validite { font-size: .9rem; color: var(--muted); }
.transmission-url {
    margin: .4rem auto .9rem; padding: .45rem .7rem; max-width: 100%;
    display: inline-block; font-family: ui-monospace, monospace; font-size: .95rem;
    background: #f4f6fa; border: 1px solid var(--border); border-radius: 8px;
    overflow-wrap: anywhere; user-select: all;
}
.transmission-carte .card-actions { justify-content: center; }

/* Vue lecture seule (SAMU / hôpital) */
.tv-page { min-height: 100dvh; background: var(--bg); }
.tv-bandeau {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .55rem 1rem; background: var(--accent-dark); color: #fff;
    box-shadow: 0 1px 4px rgba(16, 32, 64, .25);
}
.tv-bandeau-titre { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tv-bandeau-titre span { font-size: .78rem; color: #c6d4ec; }
.tv-bandeau-badges { flex: none; display: inline-flex; gap: .35rem; }
.tv-contenu { max-width: 96rem; margin: 0 auto; padding: 1rem 1rem 2rem; }
/* Mobile : une colonne (identité, mannequin+constantes, puis bilan complet) ;
   grand écran : mannequin à gauche, bilan complet à droite */
.tv-layout { display: flex; flex-direction: column; gap: .9rem; }
.tv-gauche, .tv-droite { min-width: 0; }
.tv-gauche .tv-carte:not(:last-child) { margin-bottom: .9rem; }

/* Grille du mannequin : constantes de part et d'autre des silhouettes */
.tv-mannequin-grille { display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: start; }
.tv-constantes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.tv-const {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .5rem .6rem; min-width: 0;
    background: #f7f9fc; border: 1px solid var(--border); border-radius: 10px;
}
.tv-const-tete { font-size: .74rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tv-const-valeur { font-size: 1.25rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.tv-const-valeur small { font-size: .68rem; font-weight: 600; color: var(--muted); }
.tv-const-vide { color: #b7c0cd; }
.tv-const-heure { font-size: .72rem; color: var(--muted); }
.tv-const-histo { font-size: .7rem; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }

/* Mannequin 3D de la transmission : réutilise les styles m3d- de la fiche,
   la toile se cale simplement sur la colonne centrale de la grille */
.tv-schema3d { min-width: 0; }
.tv-schema3d .m3d-canvas { height: clamp(380px, 52dvh, 560px); }

/* Statuts X-ABCDE : synthèse (chips) + badge par module.
   Vert = rien à signaler, rouge = anomalie déclarée → « Critique en X ». */
.tv-xchips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; }
.tv-xchip {
    padding: .2rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 800; letter-spacing: .02em;
}
.tv-xchip-ok { background: #e7f6ec; color: var(--success); border: 1px solid #bfe6cc; }
.tv-xchip-pb { background: var(--danger); color: #fff; }
.tv-xh4 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tv-xstatut {
    flex: none; padding: .1rem .5rem; border-radius: 999px;
    font-size: .68rem; font-weight: 800; letter-spacing: .02em; text-transform: none;
}
.tv-xh4-ok .tv-xstatut { background: #e7f6ec; color: var(--success); }
.tv-xh4-pb .tv-xstatut { background: var(--danger); color: #fff; }
.tv-xh4-pb span:first-child { color: var(--danger); }

/* Puces de la légende (lésions / gestes) sous le mannequin */
.tv-point {
    position: absolute; transform: translate(-50%, -50%);
    min-width: 20px; height: 20px; padding: 0 .2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 2px solid #fff;
    font-size: .62rem; font-weight: 800; color: #fff;
    box-shadow: 0 1px 4px rgba(10, 16, 28, .45);
}
.tv-point-lesion { background: var(--danger, #b3001b); }
.tv-point-geste { background: var(--accent, #1976d2); }
.tv-point-inline { position: static; transform: none; flex: none; }
.tv-legende { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.tv-legende li { display: flex; align-items: flex-start; gap: .45rem; font-size: .88rem; }
.tv-legende .tv-point-inline { margin-top: .1rem; }
.tv-legende li > span:not(.tv-point-inline) { flex: 1; min-width: 0; }

/* Bouton 🖼️ de la légende : la photo de la lésion en grand */
.tv-photo-btn {
    flex: none; padding: .1rem .45rem;
    border: 1px solid var(--border); border-radius: 8px; background: #fff;
    font-size: .95rem; line-height: 1.4; cursor: pointer;
}
.tv-photo-btn:hover, .tv-photo-btn:focus-visible { background: #eef3fb; border-color: var(--accent); }

/* Modale de détail d'une lésion (réutilise .lesion-dialog de la fiche) */
.tv-lesion-meta { margin: -.6rem 0 .8rem; font-size: .85rem; color: var(--muted); }
.tv-lesion-gestes { margin: .8rem 0 0; }
.tv-lesion-gestes h4 {
    margin: 0 0 .3rem; font-size: .78rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: .03em;
}
.tv-lesion-gestes ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .3rem; font-size: .9rem;
}
.tv-photo-cadre {
    display: block; width: 100%; margin: .4rem 0 0; padding: 0;
    border: none; background: none; cursor: zoom-in; text-align: center;
}
.tv-photo-cadre img {
    display: block; width: 100%; max-height: 46dvh; object-fit: contain;
    border: 1px solid var(--border); border-radius: 10px; background: #f2f4f8;
}
.tv-photo-cadre .hint { display: block; margin-top: .25rem; }

/* Visionneuse : la photo seule sur fond assombri */
.tv-photo-dialog {
    border: none; background: transparent; padding: 0;
    max-width: 96vw; max-height: 96dvh; overflow: visible;
}
.tv-photo-dialog::backdrop { background: rgba(8, 11, 16, .85); }
.tv-photo-dialog img {
    display: block; max-width: 96vw; max-height: 92dvh;
    border-radius: 10px; box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.tv-photo-fermer {
    position: absolute; top: -.4rem; right: -.4rem; z-index: 1;
    width: 2.1rem; height: 2.1rem; border-radius: 999px;
    border: none; background: #fff; color: #1c1c1e;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

@media (min-width: 900px) {
    /* Constantes sur les côtés du mannequin (une colonne de tuiles par côté) */
    .tv-mannequin-grille { grid-template-columns: 9.5rem minmax(0, 1fr) 9.5rem; }
    .tv-constantes { grid-template-columns: 1fr; align-content: start; }
}
@media (min-width: 1200px) {
    /* Mannequin + identité à gauche, bilan complet à droite */
    .tv-layout { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); align-items: start; }
    .tv-gauche { position: sticky; top: 3.6rem; }
}
.tv-carte {
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--ombre-carte); padding: 1rem 1.1rem; margin-bottom: .9rem;
}
.tv-carte h2 { margin: 0 0 .5rem; }
.tv-carte h3 { margin: 0 0 .6rem; color: var(--accent-dark); text-transform: none; letter-spacing: 0; font-size: 1rem; }
.tv-carte h4 { margin: .9rem 0 .35rem; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tv-carte h4:first-of-type { margin-top: .2rem; }
.tv-liste { margin: 0; display: grid; grid-template-columns: 1fr; gap: .15rem .9rem; }
.tv-ligne { display: flex; gap: .6rem; align-items: baseline; padding: .18rem 0; border-bottom: 1px dotted #e5e9f0; }
.tv-ligne dt { flex: none; width: 12rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.tv-ligne dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tv-synthese { border-left: 4px solid var(--accent); }
.tv-texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tv-puces { margin: .2rem 0 0; padding-left: 1.2rem; }
.tv-puces li { margin-bottom: .2rem; }
.tv-table { min-width: 0; }
.tv-pied { text-align: center; font-size: .78rem; color: var(--muted); margin: 1.25rem 0 0; }

@media (min-width: 720px) {
    .tv-liste { grid-template-columns: 1fr 1fr; }
    .tv-ligne dt { width: 11rem; }
}
.pec-dyn-ordos { display: flex; flex-direction: column; gap: .45rem; align-items: center; margin: .5rem 0 .2rem; }
.pec-dyn-ordo { position: relative; display: inline-block; }
.pec-dyn-ordo-suppr {
    position: absolute; top: -.45rem; right: -.45rem;
    width: 1.5rem; height: 1.5rem; border-radius: 50%; padding: 0;
    border: 1px solid var(--border); background: #fff; color: #b91c1c;
    font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 1px 4px rgba(20, 30, 45, .25);
}
.pec-dyn-ordos .pec-photo-btn { width: auto; margin-top: 0; }

/* Jauge de douleur 0–10 : dégradé vert → rouge, visage et couleur du palier */
.pec-jauge-douleur {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    width: min(24rem, 100%); margin: .1rem auto .6rem;
}
.pec-jauge-douleur .visage { font-size: 2.4rem; line-height: 1; }
.pec-jauge-douleur .libelle { font-weight: 800; color: var(--douleur-couleur, #9aa0a6); }
.pec-jauge-douleur input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 14px; border-radius: 999px; cursor: pointer;
    background: linear-gradient(90deg, #059669 0%, #84cc16 25%, #f59e0b 50%, #f97316 70%, #dc2626 88%, #7f1d1d 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
}
.pec-jauge-douleur input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff; border: 5px solid var(--douleur-couleur, #9aa0a6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35); cursor: grab;
}
.pec-jauge-douleur input[type="range"]::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff; border: 5px solid var(--douleur-couleur, #9aa0a6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35); cursor: grab;
}
.pec-jauge-douleur .bornes { display: flex; justify-content: space-between; width: 100%; font-size: .82rem; color: var(--muted); }

/* Norme (selon l'âge) affichée sur la carte de mesure d'une constante */
.pec-dyn-norme { margin: 0 0 .4rem; text-align: center; font-size: .85rem; font-weight: 600; color: var(--muted); }

/* Constantes en libre ordre : grille de tuiles + saisie d'une mesure */
.pec-dyn-grille {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .5rem; margin: .1rem 0 .55rem;
}
.pec-dyn-tuile {
    display: flex; flex-direction: column; align-items: center; gap: .12rem;
    padding: .5rem .35rem; border-radius: 12px; border: 1px solid var(--border);
    background: linear-gradient(180deg, #fff 0%, #f2f4f8 100%);
    font: inherit; cursor: pointer;
    box-shadow: 0 3px 0 #d6dbe4, 0 5px 10px rgba(20, 30, 45, .12), inset 0 1px 0 #fff;
    transition: transform .12s ease, box-shadow .12s ease;
}
.pec-dyn-tuile:active { transform: translateY(2px); box-shadow: 0 1px 0 #d6dbe4, inset 0 1px 0 #fff; }
.pec-dyn-tuile .ico { font-size: 1.3rem; line-height: 1; }
.pec-dyn-tuile .lib { font-size: .7rem; font-weight: 700; color: var(--muted); text-align: center; }
.pec-dyn-tuile .val { font-size: .82rem; font-weight: 800; color: var(--muted); }
.pec-dyn-tuile.choisi { border-color: var(--accent); background: var(--accent-bg, #fdeaea); }
.pec-dyn-tuile.c-ok { border-color: #059669; }
.pec-dyn-tuile.c-ok .val { color: #059669; }
.pec-dyn-tuile.c-warn { border-color: #f29900; }
.pec-dyn-tuile.c-warn .val { color: #b06e00; }
.pec-dyn-tuile.c-bad { border-color: #d93025; }
.pec-dyn-tuile.c-bad .val { color: #a11212; }
.pec-dyn-mesure {
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center;
    margin: .2rem 0 .6rem;
}
.pec-dyn-mesure input {
    min-height: 46px; padding: .4rem .55rem; border: 1px solid var(--border);
    border-radius: var(--radius); font: inherit; font-size: 1.05rem; width: 7.5rem;
}
.pec-dyn-mesure input[type="time"] { width: 7rem; }
.pec-dyn-retour { align-self: center; }

/* Étapes complémentaires : présélections d'antécédents + saisie libre */
.pec-dyn-chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: .1rem 0 .55rem; }
.pec-dyn-libre { display: flex; align-items: center; gap: .5rem; margin: 0 auto; max-width: 26rem; }
.pec-dyn-libre span { font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pec-dyn-libre input {
    flex: 1; min-width: 0; min-height: 40px; padding: .35rem .55rem;
    border: 1px solid var(--border); border-radius: var(--radius); font: inherit;
}

/* Circonstanciel : détails transmis par StockPulse en tête de la 1re carte */
.pec-dyn-contexte { display: flex; flex-direction: column; gap: .3rem; margin: 0 auto .7rem; max-width: 30rem; text-align: left; }
.pec-dyn-contexte span { font-size: .82rem; font-weight: 600; color: var(--muted); }
.pec-dyn-contexte textarea {
    min-height: 40px; padding: .35rem .55rem; resize: vertical;
    border: 1px solid var(--border); border-radius: var(--radius); font: inherit;
}