/* ==========================================================================
   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 {
    --accent: #b3001b;
    --accent-dark: #8c0015;
    --accent-bg: #fdf2f3;
    --ink: #1c1c1e;
    --muted: #6b7280;
    --border: #d9dce1;
    --bg: #f4f5f7;
    --card: #ffffff;
    --success: #0a7d33;
    --radius: 10px;
    --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.25rem; margin: 0 0 .25rem; }
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: var(--radius);
    padding: .85rem 1rem; min-height: var(--touch);
}
.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: #e8e9ec; color: var(--ink);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.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; }
.empty-state { background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius); padding: 3rem 1rem; text-align: center; }

/* --- 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-gravite-ua { background: var(--accent); 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);
    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; }
.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: var(--radius); padding: 1rem; }
.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 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 {
    position: absolute; z-index: 30;
    min-width: 15rem; max-width: 19rem; max-height: 24rem; overflow-y: auto;
    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-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-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%; }

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

/* --- Connexion ----------------------------------------------------------- */

.login-box { max-width: 24rem; margin: 3rem auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.login-error { color: #a11212; margin-bottom: 1rem; }

/* ==========================================================================
   TABLETTE (≥ 720 px)
   ========================================================================== */
@media (min-width: 720px) {
    .card-actions { flex-direction: row; }

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

    .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; }

.m3d-vue {
    position: absolute; top: .5rem; left: .6rem; pointer-events: none;
    font-size: .78rem; font-weight: 700; color: var(--muted);
    background: rgba(255, 255, 255, .85); border: 1px solid var(--border);
    border-radius: 999px; padding: .2rem .6rem;
}
/* Coin bas-droit : ne recouvre jamais les pieds du mannequin (bas-centre) */
.m3d-toolbar {
    position: absolute; bottom: .55rem; right: .6rem;
    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); }

/* 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 #7f1d1d;
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 55%, #b91c1c 100%);
    color: #fff; font: inherit; font-size: .98rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 0 #7f1d1d, 0 8px 16px rgba(127, 29, 29, .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 #7f1d1d, 0 3px 6px rgba(127, 29, 29, .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 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; }
.pec-dyn-quitter {
    position: absolute; top: .3rem; right: .4rem; z-index: 1;
    border: none; background: none; padding: .25rem .45rem;
    font: inherit; font-size: 1rem; color: var(--muted); cursor: pointer;
}

/* Boutons « relief 3D » : dégradé + épaisseur (ombre portée dure) + enfoncement au clic */
.pec-dyn-choix { display: flex; flex-wrap: wrap; gap: .9rem .8rem; justify-content: center; }
.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); }
.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; }

/* Barre haute du bilan dynamique : âge (calibre les normes) puis identité optionnelle */
.pec-dyn-haut {
    position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); z-index: 20;
    display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; justify-content: center;
    max-width: calc(100% - 1rem);
    background: rgba(255, 255, 255, .95); border: 1px solid var(--border); border-radius: 999px;
    box-shadow: 0 8px 24px rgba(15, 20, 30, .22);
    padding: .3rem .8rem;
}
.pec-dyn-haut[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 .nomprenom { display: inline-flex; flex-wrap: wrap; gap: .4rem .7rem; }
.pec-dyn-haut .nomprenom[hidden] { display: none; }
.pec-dyn-haut .nomprenom input { width: 8rem; }

/* 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 */
.pec-dyn-reduire {
    position: absolute; top: .3rem; left: .4rem; z-index: 1;
    border: none; background: none; padding: .25rem .45rem;
    font: inherit; font-size: .78rem; font-weight: 700; color: var(--muted); cursor: pointer;
}
.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; }

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