/* ── Military Command module ─────────────────────────────────────────── */
/* Shell (topbar, header masqué, pleine largeur) : app-shell.css */

/* L'engrenage de la topbar remplace le groupe "Paramètres" de la nav */
#settings-tab-group { display: none !important; }

.login-hero {
    max-width: 480px;
    margin: 12vh auto;
    text-align: center;
    display: grid;
    gap: var(--sp-4);
}

.mil-content {
    position: relative;
    min-height: calc(100vh - 130px);
}

.mil-empty .icon .pr-icon { width: 36px; height: 36px; opacity: .6; }

.mil-skeleton-page { display: grid; gap: var(--sp-3); }

/* ── Cards / grids ───────────────────────────────────────────────────── */

.mil-grid { display: grid; gap: var(--sp-4); }
.mil-grid-2 { grid-template-columns: 1fr 1fr; }
.mil-grid-designer { grid-template-columns: 260px 1fr 300px; align-items: start; }
@media (max-width: 1100px) { .mil-grid-2, .mil-grid-designer { grid-template-columns: 1fr; } }

.mil-card {
    background: var(--bg-surface);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.mil-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border, #2a2a2a);
}
.mil-card-header h3 { margin: 0; font-size: 1rem; color: var(--text-primary); }
.mil-card-body { padding: var(--sp-4); }
.mil-card-body.flush { padding: 0; }

.mil-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-3);
}
.mil-stat {
    background: var(--bg-raised);
    border-radius: var(--r-md);
    padding: var(--sp-3);
}
.mil-stat .label { color: var(--text-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.mil-stat .value { color: var(--gold-light); font-size: 1.25rem; font-family: var(--font-display); }

.mil-empty {
    text-align: center;
    color: var(--text-muted);
    padding: var(--sp-8) var(--sp-4);
}
.mil-empty .icon { font-size: 2rem; margin-bottom: var(--sp-2); }

.mil-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    margin-bottom: var(--sp-3);
}
.mil-toolbar input[type="search"],
.mil-toolbar select {
    background: var(--bg-raised);
    color: var(--text-primary);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
}

/* ── ORBAT v2 : coquille trois zones (refonte 1f) ─────────────────────── */
/* Barre de 48 px + rail 214 px | canvas | inspecteur 288 px.
   Sous 1024 px le rail et l'inspecteur deviennent des tiroirs (ils ne
   rétrécissent pas : 190 px de rail sur une tablette ne sert personne), et
   sous 768 px des feuilles plein écran. Le graphe bascule alors en arbre
   vertical (.ov-tree) — un organigramme horizontal n'est pas lisible sur
   360 px de large, c'est le point de départ de cette refonte. */

.orbat-v2 {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    min-height: 460px;
    background: var(--bg-base);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.ov-bar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px) minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-3);
    min-height: 48px;
    padding: 0 var(--sp-3);
    background: var(--bg-surface);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ov-bar-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ov-formation { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ov-group-wrap { display:grid; gap:1px; min-width:0; }
.ov-group-wrap > span { color:var(--text-muted); font-size:.55rem; line-height:1; text-transform:uppercase; letter-spacing:.09em; }
.ov-group {
    background: transparent; border: 0; padding: 0 18px 0 0;
    color: var(--text-primary);
    font-family: var(--font-display); font-size: 1rem; font-weight: 600;
    max-width: 40vw;
}
.ov-meta { color: var(--text-muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ov-quick {
    display: flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 10px;
    background: var(--bg-raised);
    border: 1px solid rgba(213, 182, 84, .4);
    border-radius: 9px;
}
.ov-quick:focus-within { border-color: var(--gold); }
.ov-quick-plus { color: var(--gold); font-weight: 700; }
.ov-quick-input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: none;
    color: var(--text-primary); font: inherit; font-size: .85rem;
}
.ov-quick-kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .66rem; color: var(--text-muted);
    border: 1px solid var(--border, #2a2a2a); border-radius: 4px; padding: 1px 5px;
}
.ov-quick-context {
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--gold-light); font-size: .68rem;
    border-left: 1px solid var(--border-mid); padding-left: 8px;
}

.ov-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ov-saved { color: #7dbb7d; font-size: .72rem; opacity: 0; transition: opacity .2s; }
.ov-saved.on { opacity: 1; }
.ov-export-menu { position: relative; }
.ov-export-menu > summary { list-style: none; cursor: pointer; }
.ov-export-menu > summary::-webkit-details-marker { display: none; }
.ov-export-menu[open] {
    position: relative; z-index: 8;
}
.ov-export-menu[open] > button {
    display: block; position: absolute; right: 0; width: 150px; padding: 8px 10px;
    border: 1px solid var(--border-mid); background: var(--bg-raised); color: var(--text-primary);
    text-align: left; cursor: pointer;
}
.ov-export-menu[open] > button:first-of-type { top: 38px; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.ov-export-menu[open] > button:last-of-type { top: 72px; border-radius: 0 0 var(--r-sm) var(--r-sm); }
.ov-export-menu[open] > button:hover { background: var(--gold-subtle); }

.ov-icon-btn {
    display: none;
    align-items: center; justify-content: center;
    width: var(--pr-touch-target, 44px); height: var(--pr-touch-target, 44px);
    background: transparent; border: 0; border-radius: var(--r-sm);
    color: var(--text-secondary); cursor: pointer;
}
.ov-icon-btn:hover { background: rgba(255, 255, 255, .06); color: var(--gold-light); }
.ov-only-md { display: none; }

.ov-body {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 300px;
    position: relative;
}

/* ── Rail (modèles, non affectées, options) ───────────────────────────── */
.ov-rail {
    background: var(--bg-surface);
    border-right: 1px solid var(--border, #2a2a2a);
    display: flex; flex-direction: column; min-height: 0;
}
.ov-palette-title {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    padding: var(--sp-3); border-bottom: 1px solid var(--border-subtle);
}
.ov-palette-title > div { display: grid; min-width: 0; }
.ov-palette-title strong { font-size: .86rem; }
.ov-palette-title span { color: var(--text-muted); font-size: .68rem; }
.ov-rail-head {
    display: flex; align-items: center; gap: 6px;
    padding: var(--sp-2);
    border-bottom: 1px solid var(--border, #2a2a2a);
}
.ov-search {
    flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0;
    background: var(--bg-raised);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: var(--r-sm);
    padding: 0 8px;
}
.ov-search input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: none;
    color: var(--text-primary); font: inherit; font-size: .8rem; padding: 7px 0;
}
.ov-rail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-2); }
.ov-palette-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
    padding: 0 var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border-subtle);
}
.ov-palette-tabs button {
    padding: 7px 3px; border: 0; border-radius: var(--r-sm); background: transparent;
    color: var(--text-muted); font: inherit; font-size: .75rem; cursor: pointer;
}
.ov-palette-tabs button:hover { color: var(--text-primary); background: var(--bg-raised); }
.ov-palette-tabs button.active { background: var(--gold-subtle); color: var(--gold-light); font-weight: 700; }
.ov-create-tile {
    display: flex; align-items: center; width: 100%; gap: var(--sp-2); padding: var(--sp-3);
    border: 1px dashed var(--border-gold); border-radius: var(--r-md); background: var(--gold-subtle);
    color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
}
.ov-create-tile:hover { border-style: solid; background: rgba(213, 182, 84, .15); }
.ov-create-tile > span:last-child { display: grid; }
.ov-create-tile strong { font-size: .82rem; }
.ov-create-tile small { color: var(--text-muted); font-size: .68rem; }
.ov-create-icon {
    display: grid; place-items: center; width: 32px; height: 32px; flex: none;
    border-radius: 50%; background: var(--gold); color: #151515; font-size: 1.15rem; font-weight: 800;
}
.ov-palette-help { margin: var(--sp-3) 2px; color: var(--text-muted); font-size: .68rem; line-height: 1.45; }
.ov-palette-target {
    display: flex; align-items: center; gap: 7px; margin: var(--sp-3) 0 0;
    padding: 8px 9px; border: 1px solid var(--border-mid); border-radius: var(--r-sm);
    background: var(--bg-base); color: var(--text-secondary); font-size: .69rem; line-height: 1.35;
}
.ov-palette-target > [data-icon] { flex: none; color: var(--gold); }
.ov-palette-target > span:nth-child(2) { flex: 1; min-width: 0; }
.ov-palette-target > span:nth-child(2) small,
.ov-palette-target > span:nth-child(2) strong { display: block; }
.ov-palette-target > span:nth-child(2) small { margin-bottom: 2px; color: var(--text-muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }
.ov-palette-target strong { color: var(--text-primary); }
.ov-palette-target.waiting { border-color: color-mix(in srgb, var(--warning, #d8a53b) 45%, transparent); }
.ov-palette-target button {
    flex: none; border: 0; background: transparent; color: var(--gold-light);
    font: inherit; font-weight: 700; cursor: pointer; padding: 2px;
}
.ov-palette-target button:hover { text-decoration: underline; }
.ov-palette-section-head {
    display: flex; justify-content: space-between; margin: var(--sp-4) 2px var(--sp-2);
    color: var(--text-muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
}
.ov-palette-row {
    display: flex; align-items: center; width: 100%; min-width: 0; gap: var(--sp-2);
    padding: 7px; border: 1px solid transparent; border-radius: var(--r-sm);
    background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: grab;
}
.ov-palette-row:hover, .ov-palette-row.active { background: var(--bg-raised); border-color: var(--border-mid); }
.ov-palette-row.active { border-color: var(--gold-dark); }
.ov-palette-row .ov-tpl-text { flex: 1; }
.ov-palette-row .ov-tpl-text strong { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-palette-row .ov-tpl-text small { color: var(--text-muted); font-size: .65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-model-use {
    display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--sp-2);
    padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ov-use-label { flex:none; padding:3px 7px; color:var(--gold); border:1px solid var(--border-gold); border-radius:999px; font-size:.62rem; font-weight:700; }
.ov-kind-help { margin:var(--sp-3) 2px; padding:8px 9px; color:var(--text-secondary); background:var(--gold-subtle); border-left:2px solid var(--gold); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.69rem; line-height:1.5; }
.ov-row-action {
    width: 30px; height: 30px; flex: none; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--text-muted); cursor: pointer;
}
.ov-row-action:hover { color: var(--gold-light); background: var(--gold-subtle); }
.ov-symbol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ov-symbol-tile {
    display: grid; place-items: center; align-content: space-between; gap: 5px; min-height: 94px;
    padding: 8px 5px; border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    background: var(--bg-raised); color: var(--text-secondary); font: inherit; font-size: .65rem; cursor: pointer;
}
.ov-symbol-tile:hover, .ov-symbol-tile.active { border-color: var(--gold); color: var(--text-primary); }
.ov-symbol-tile > span:last-child { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Les vignettes sont enregistrées telles quelles (elles portent des
   amplificateurs que le SIDC seul ne redonne pas) : on borne la plaque au lieu
   de forcer une hauteur, sinon un symbole décoré serait dessiné plus petit que
   son voisin — le même défaut que sur les cartes de l'organigramme. */
.ov-symbol-tile .sym-plate { width: 100%; height: 46px; }
.ov-symbol-tile .sym-plate > svg { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.ov-workspace-options { flex: none; margin: 0; padding: var(--sp-2); border-top: 1px solid var(--border-subtle); }
.ov-rail-label {
    display: flex; align-items: center; gap: 6px;
    margin: var(--sp-3) 0 var(--sp-2);
    font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
    color: #808080;
}
.ov-rail-label:first-child { margin-top: 0; }
.ov-count { color: var(--text-muted); font-weight: 700; }
.ov-count.has { color: #e0b050; }

.ov-tpl {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; margin-bottom: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: var(--r-sm);
    cursor: grab; user-select: none;
}
.ov-tpl:hover { border-color: var(--gold-dark); }
.ov-tpl:active { cursor: grabbing; }
.ov-tpl-thumb { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; }
.ov-tpl-text { display: grid; min-width: 0; }
.ov-tpl-name { font-size: .78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-tpl-sub { font-size: .68rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-tpl-blank { border-style: dashed; margin-top: var(--sp-2); }
.ov-tpl-blank .ov-tpl-thumb { color: var(--gold-light); font-size: 1.2rem; font-weight: 700; }

.ov-orphans { display: flex; flex-wrap: wrap; gap: 4px; }
.ov-chip {
    background: rgba(224, 176, 80, .08);
    border: 1px solid rgba(224, 176, 80, .45);
    color: #e0b050;
    border-radius: 999px; padding: 5px 10px;
    font: inherit; font-size: .72rem;
    cursor: grab; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ov-options { margin-top: var(--sp-4); border-top: 1px solid var(--border, #2a2a2a); padding-top: var(--sp-2); }
.ov-options summary {
    cursor: pointer; list-style: none;
    font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: #808080;
}
.ov-options summary::-webkit-details-marker { display: none; }
.ov-options summary::after { content: ' ▾'; }
.ov-options[open] summary::after { content: ' ▴'; }
.ov-options label {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px; font-size: .76rem; color: var(--text-secondary);
}
.ov-options select {
    margin-left: auto;
    background: var(--bg-raised); color: var(--text-primary);
    border: 1px solid var(--border, #2a2a2a); border-radius: var(--r-sm);
    padding: 3px 6px; font-size: .76rem;
}
.ov-options .btn { display: block; width: 100%; margin-top: 6px; text-align: center; }

.ov-rail-foot {
    margin: 0; padding: var(--sp-2);
    border-top: 1px solid var(--border, #2a2a2a);
    color: var(--text-muted); font-size: .68rem; line-height: 1.45;
}
.ov-rail-foot kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    border: 1px solid var(--border, #2a2a2a); border-radius: 3px; padding: 0 4px;
}

/* ── Canvas ───────────────────────────────────────────────────────────── */
.ov-canvas {
    position: relative; min-width: 0; outline: none;
    background-color: #0b0b0b;
    background-image:
        linear-gradient(rgba(213, 182, 84, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(213, 182, 84, .05) 1px, transparent 1px);
    background-size: 32px 32px;
}
.ov-canvas:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-dark); }
.ov-canvas-scroll { position: absolute; inset: 0; overflow: auto; padding: var(--sp-4); }

/* Le cadre reprend la place que `transform: scale()` ne réserve pas : sa
   taille est fixée en JS à taille naturelle × zoom, sinon zoomer au-delà de
   100 % rend les branches de droite et le bas de l'arbre inatteignables. */
.ov-chart-sizer {
    position: relative; min-width: 100%;
    display: flex; justify-content: center;
}
.orbat-chart {
    display: inline-block; text-align: center;
    transform: scale(var(--ov-zoom, 1));
    transform-origin: top center;
}

/* Cible de dépôt « racine » : une barre épinglée au bas du canvas, révélée
   pendant le glisser seulement. Elle vivait avant DANS le flux, sous
   l'organigramme — donc sous une zone que la mise à l'échelle recouvrait, et
   son texte passait sous les symboles. Épinglée, elle ne peut plus être
   recouverte ; révélée à la demande, elle n'occupe plus le canvas au repos. */
.ov-root-drop {
    position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 6;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: var(--sp-2) var(--sp-3);
    border: 1px dashed var(--gold-dark); border-radius: var(--r-md);
    background: rgba(18, 18, 18, .96);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .45);
    color: var(--text-secondary); font-size: .8rem; text-align: center;
    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity .12s ease, transform .12s ease;
}
.orbat-v2.is-dragging .ov-root-drop { opacity: 1; pointer-events: auto; transform: none; }
.ov-root-drop > * { pointer-events: none; }
.ov-root-drop.drag-over { border-style: solid; border-color: var(--gold); background: rgba(213, 182, 84, .14); color: var(--gold-light); }
@media (prefers-reduced-motion: reduce) { .ov-root-drop { transition: none; } }

.ov-zoom {
    position: absolute; right: 12px; bottom: 12px; z-index: 5;
    display: flex; align-items: center; gap: 2px;
    background: rgba(18, 18, 18, .92);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 999px; padding: 2px;
    font-size: .72rem; color: var(--text-secondary);
}
.ov-zoom button {
    background: transparent; border: 0; border-radius: 999px;
    color: var(--text-secondary); cursor: pointer;
    padding: 5px 9px; min-width: 28px; font: inherit;
}
.ov-zoom button:hover { background: rgba(255, 255, 255, .06); color: var(--gold-light); }
.ov-zoom span { padding: 0 4px; font-variant-numeric: tabular-nums; }

.ov-minimap {
    position: absolute; left: 12px; bottom: 12px;
    width: 132px; height: 76px;
    background: #121212;
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 6px; overflow: hidden; cursor: pointer;
}
.ov-minimap i { position: absolute; background: rgba(255, 255, 255, .22); border-radius: 1px; min-width: 2px; min-height: 2px; }
.ov-minimap-view { position: absolute; border: 1px solid var(--gold); background: rgba(213, 182, 84, .1); pointer-events: none; }

.ov-empty-start {
    position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    width: min(680px, calc(100% - 32px)); text-align: center;
    padding: var(--sp-5); background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    border: 1px solid var(--border-mid); border-radius: var(--r-lg);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28); z-index: 3;
}
.ov-empty-start[hidden] { display: none; }
.ov-empty-icon { color: var(--gold); font-size: 1.8rem; }
.ov-empty-start h3 { margin: var(--sp-2) 0 0; }
.ov-empty-start > p { color: var(--text-muted); margin: var(--sp-2) 0 var(--sp-4); }
.ov-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.ov-empty-steps {
    list-style: none; padding: var(--sp-4) 0 0; margin: var(--sp-4) 0 0;
    border-top: 1px solid var(--border-subtle); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
}
.ov-empty-steps li { display: grid; gap: 2px; color: var(--text-muted); font-size: .72rem; }
.ov-empty-steps strong { color: var(--text-primary); font-size: .82rem; }

/* ── Inspecteur ───────────────────────────────────────────────────────── */
.ov-inspector {
    background: var(--bg-surface);
    border-left: 1px solid var(--border, #2a2a2a);
    display: flex; flex-direction: column; min-height: 0;
}
.ov-inspector-empty {
    margin: auto; display: grid; justify-items: center; gap: var(--sp-2);
    max-width: 220px; text-align: center; color: var(--text-muted);
}
.ov-inspector-empty > span { color: var(--gold); font-size: 1.5rem; }
.ov-inspector-empty strong { color: var(--text-primary); font-size: .9rem; }
.ov-inspector-empty p { margin: 0; font-size: .75rem; line-height: 1.5; }
.ov-inspector-empty small { font-size: .66rem; }
.ov-insp-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: var(--sp-3);
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.ov-insp-head { display: flex; align-items: center; gap: 10px; }
.ov-insp-symbol { display: flex; align-items: center; justify-content: center; }
.ov-insp-name { margin: 0; font-family: var(--font-display); font-size: .95rem; font-weight: 600; }
.ov-insp-sub { margin: 2px 0 0; color: var(--text-muted); font-size: .72rem; }
.ov-insp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ov-insp-grid > div { background: var(--bg-raised); border-radius: var(--r-sm); padding: 8px 10px; display: grid; gap: 2px; }
.ov-insp-k { color: var(--text-muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; }
.ov-insp-v { font-size: .85rem; font-weight: 600; }
.ov-insp-sec { border-top: 1px solid var(--border, #2a2a2a); padding-top: var(--sp-2); }
.ov-insp-label { margin: 0 0 var(--sp-2); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: #808080; }
.ov-comp { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ov-comp li { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; }
.ov-num { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.ov-cov-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: 6px 0 4px; }
.ov-cov-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); }
.ov-cov-pct { margin: 0; font-size: .72rem; color: var(--text-muted); }
.ov-cov-warn { margin: 6px 0; color: #e0b050; font-size: .75rem; line-height: 1.4; }
.ov-insp-actions { display: grid; gap: 6px; }
.ov-insp-actions .btn { justify-content: center; }
.ov-insp-foot { margin: auto 0 0; color: var(--text-muted); font-size: .68rem; line-height: 1.45; }

.ov-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); z-index: 4; }

/* Conservé : mil-designer.js émet encore .orbat-palette-hint. */
.orbat-palette-hint { color: var(--text-muted); font-size: .72rem; margin: 0 0 var(--sp-2); }

/* connector lines: classic CSS org-chart with ul/li pseudo-elements */
.oc-level {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 24px 0 0;
    position: relative;
}
.oc-level.oc-root { padding-top: 0; }
.oc-level li {
    position: relative;
    padding: 0 var(--sp-2);
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* vertical stub above each child + horizontal rail between siblings */
.oc-level:not(.oc-root) > li::before {
    content: '';
    position: absolute;
    top: -24px; left: 50%;
    width: 1px; height: 24px;
    background: var(--border, #3a3a3a);
}
.oc-level:not(.oc-root) > li:not(:only-child)::after {
    content: '';
    position: absolute;
    top: -24px;
    left: 0; right: 0;
    height: 1px;
    background: var(--border, #3a3a3a);
}
.oc-level:not(.oc-root) > li:first-child:not(:only-child)::after { left: 50%; }
.oc-level:not(.oc-root) > li:last-child:not(:only-child)::after { right: 50%; }
/* vertical stub under a parent that has children */
.oc-level li > .oc-node:not(:only-child)::after,
.oc-level li:has(> .oc-level) > .oc-node::after {
    content: '';
    position: absolute;
    bottom: -24px; left: 50%;
    width: 1px; height: 24px;
    background: var(--border, #3a3a3a);
}

.oc-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 108px;
    max-width: 150px;
    padding: var(--sp-2) var(--sp-3) var(--sp-2);
    border-radius: var(--r-md);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
}
.oc-node:hover { border-color: color-mix(in srgb, var(--gold-dark) 55%, transparent); background: var(--bg-overlay); }
.orbat-v2.is-dragging .oc-node {
    transition: none;
    cursor: grabbing;
}
.oc-node.drag-source { opacity: .32; }
.ov-drag-ghost {
    position: fixed; top: -200px; left: -200px; z-index: 9999;
    max-width: 240px; padding: 7px 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border: 1px solid var(--gold); border-radius: 999px;
    background: #171717; color: var(--gold-light);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    font: 600 .75rem/1.2 var(--font-body);
    pointer-events: none;
}
.oc-node.drag-over { border-color: var(--gold); background: rgba(213, 182, 84, .1); }
/* Dépôt sur un bord : frère de la cible, pas son enfant. Le trait vertical
   montre la colonne où l'unité va s'insérer — le fond doré du centre voudrait
   dire « en dessous », et les deux gestes doivent se distinguer AVANT le
   lâcher, pas après. */
.oc-node.drop-left, .oc-node.drop-right { border-color: var(--gold); }
.oc-node.drop-left::after, .oc-node.drop-right::after {
    content: ''; position: absolute; top: -4px; bottom: -4px; width: 3px;
    background: var(--gold); border-radius: 2px; box-shadow: 0 0 8px rgba(213, 182, 84, .8);
    pointer-events: none;
}
.oc-node.drop-left::after { left: -6px; }
.oc-node.drop-right::after { right: -6px; }
.oc-node.stacked {
    box-shadow: none;
}
/* La pile réserve exactement la place de ses décalages, amplificateurs
   compris : elle ne peut donc plus mordre sur le nom ni sur la pastille ×N. */
.oc-symbol-stack {
    position: relative; display: block;
    width: calc(var(--oc-box-w) + var(--oc-spread));
    height: calc(var(--oc-box-h) + var(--oc-spread));
}
.oc-symbol-copy { position: absolute; left: 0; bottom: 0; transform: translate(var(--oc-copy-x), var(--oc-copy-y)); }
.oc-node .oc-name { font-weight: 600; font-size: .78rem; text-align: center; line-height: 1.2; }
.oc-node .oc-echelon { color: var(--text-muted); font-size: .7rem; }
.oc-node .oc-mp { color: var(--text-muted); font-size: .7rem; }
.oc-stack-badge {
    position: absolute; top: -9px; right: -9px;
    background: var(--gold-dark); color: #111;
    border: 0; font: 700 .7rem/1.5 var(--font-body);
    border-radius: 999px; padding: 1px 7px;
    cursor: pointer; z-index: 3;
}
.oc-stack-badge:hover { background: var(--gold); }
.oc-stack-badge:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 1px; }
/* Le geste inverse du dépliage, sur la carte : sans lui on ne pouvait
   regrouper qu'en rouvrant les réglages du rail, et pour tout l'arbre. */
.oc-restack { background: var(--bg-raised); color: var(--gold-light); border: 1px solid var(--gold-dark); opacity: 0; }
.oc-node:hover .oc-restack, .oc-node.selected .oc-restack, .oc-restack:focus-visible { opacity: 1; }
.oc-restack:hover { background: var(--gold-dark); color: #111; }
/* Sans survol (tactile), une commande qui n'apparaît qu'au survol n'existe pas. */
@media (hover: none) { .oc-restack { opacity: 1; } }
.oc-add {
    position: absolute; bottom: -11px; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 22px; line-height: 18px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--gold-dark);
    color: var(--gold-light);
    font-size: .95rem; font-weight: 700;
    cursor: pointer; z-index: 2;
    padding: 0;
}
.oc-add:hover { background: var(--gold-dark); color: #111; }
.oc-toggle {
    position: absolute; top: -9px; left: -9px;
    border-radius: 999px;
    background: var(--bg-surface);
    border: 1px solid var(--border, #2a2a2a);
    color: var(--text-secondary);
    font-size: .65rem;
    padding: 1px 6px;
    cursor: pointer; z-index: 2;
}


/* Sélection + alerte « l'arsenal ne suit pas » (jaune, cf. inspecteur) */
.oc-node.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.oc-node.short { border-color: rgba(224, 176, 80, .65); }

/* ── Arbre vertical (téléphone, ou choisi à la main) ──────────────────── */
.orbat-chart.ov-tree { display: block; width: 100%; text-align: left; transform: none; }
.orbat-chart.ov-tree .oc-level { display: block; padding: 0; margin: 0; justify-content: flex-start; }
.orbat-chart.ov-tree .oc-level li { display: block; padding: 0; align-items: stretch; }
/* `renderChart()` pose `chart.hidden = !hasAny` pour laisser la place à
   l'état vide, mais les display ci-dessus sont des règles auteur : elles
   battent le [hidden] du navigateur. Un ordre de bataille vide affichait donc
   son invite de départ ET un cadre de graphe vide en dessous. La variante
   .ov-tree est à égalité de spécificité avec un sélecteur [hidden], donc
   cette ligne doit rester APRÈS elle — c'est l'ordre source qui tranche. */
.orbat-chart[hidden], .orbat-chart.ov-tree[hidden] { display: none; }

.orbat-chart.ov-tree .oc-level li::before,
.orbat-chart.ov-tree .oc-level li::after,
.orbat-chart.ov-tree .oc-node::after { content: none; }
.orbat-chart.ov-tree .oc-node.stacked { box-shadow: none; }
.orbat-chart.ov-tree .oc-node.selected { box-shadow: 0 0 0 1px var(--gold); }

.ot-row {
    flex-direction: row; align-items: center; gap: 8px;
    width: auto; max-width: none; min-width: 0;
    min-height: var(--pr-touch-target, 44px);
    margin: 3px 0 3px calc(min(var(--ot-depth, 0), 6) * 16px);
    padding: 5px 8px;
}
.ot-row .oc-symbol { flex: 0 0 auto; display: flex; }
.ot-text { display: grid; flex: 1; min-width: 0; text-align: left; }
.ot-row .oc-name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-row .oc-echelon { text-align: left; }
.ot-row .oc-toggle {
    position: static; flex: 0 0 auto;
    width: 28px; min-height: 28px; padding: 0;
    background: transparent; border: 0; color: var(--text-secondary); font-size: .8rem;
}
.ot-row .oc-toggle-void { visibility: hidden; }
.ot-row .oc-add {
    position: static; transform: none; flex: 0 0 auto;
    width: 30px; height: 30px; line-height: 26px;
}
.ot-times { color: var(--gold-light); font-weight: 700; }

/* ── Paliers ──────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
    .ov-body { grid-template-columns: 250px minmax(0, 1fr) 270px; }
    .ov-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 320px) minmax(0, 1fr); }
}

/* Tablette : le rail et l'inspecteur passent en tiroirs plutôt que de
   rétrécir jusqu'à l'inutilisable. */
@media (max-width: 1023px) {
    .ov-body { grid-template-columns: minmax(0, 1fr); }
    .ov-rail, .ov-inspector {
        position: absolute; top: 0; bottom: 0; z-index: 5;
        width: min(300px, 86vw);
        transition: transform .18s ease;
        box-shadow: 0 0 24px rgba(0, 0, 0, .5);
    }
    .ov-rail { left: 0; transform: translateX(-101%); }
    .ov-inspector { right: 0; transform: translateX(101%); }
    .orbat-v2.open-rail .ov-rail, .orbat-v2.open-inspector .ov-inspector { transform: none; }
    .ov-icon-btn { display: inline-flex; }
    .ov-only-md { display: block; }
    .ov-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 6px var(--sp-3); }
    .ov-bar-main { grid-column: 1; grid-row: 1; }
    .ov-actions { grid-column: 2; grid-row: 1; }
    .ov-quick { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 1024px) { .ov-scrim { display: none; } }

/* Téléphone : feuilles plein écran, plus de zoom ni de minimap, et l'arbre
   vertical prend le relais de l'organigramme (mode « auto »). */
@media (max-width: 767px) {
    .orbat-v2 { height: calc(100vh - 116px); border-radius: 0; border-left: 0; border-right: 0; }
    .ov-hide-md { display: none; }
    .ov-group { max-width: 46vw; font-size: .92rem; }
    .ov-meta { font-size: .7rem; }
    .ov-rail, .ov-inspector {
        width: 100%; left: 0; right: 0;
        top: auto; bottom: 0; height: min(74%, 520px);
        border-left: 0; border-right: 0;
        border-top: 1px solid var(--border, #2a2a2a);
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        transform: translateY(101%);
    }
    .orbat-v2.open-rail .ov-rail, .orbat-v2.open-inspector .ov-inspector { transform: none; }
    .ov-zoom, .ov-minimap { display: none; }
    .ov-canvas-scroll { padding: var(--sp-2); }
    .ov-insp-actions .btn { flex: 1; }
}
@media (max-width: 480px) {
    .ov-actions .btn { padding: 6px 10px; font-size: .76rem; }
    .ot-row { margin-left: calc(min(var(--ot-depth, 0), 5) * 12px); }
    .ov-insp-grid { grid-template-columns: 1fr; }
}

.mil-pill {
    font-size: .7rem;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bg-void);
    color: var(--text-secondary);
    border: 1px solid var(--border, #2a2a2a);
    white-space: nowrap;
}
.mil-pill.ok { color: #7dc97d; border-color: #2f5c2f; }
.mil-pill.warn { color: #e0b050; border-color: #6b5416; }
.mil-pill.crit { color: #e07070; border-color: #6b2727; }

/* ── Unit detail modal ───────────────────────────────────────────────── */

.unit-modal .unit-modal-head { display: flex; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-4); }
.unit-modal .panel-symbol svg { height: 72px; }
.unit-modal section { margin-bottom: var(--sp-4); }
.unit-modal section h4 {
    margin: 0 0 var(--sp-2) 0;
    color: var(--text-secondary);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border, #2a2a2a);
    padding-bottom: var(--sp-1);
}

/* ── Symbol designer (wireframe layout) ──────────────────────────────── */
/* Light grey surface on purpose: milsymbol draws echelon amplifiers and
   modifiers in black, which vanish on the dark theme background. */

/* ── MIL-STD-2525D symbol designer ───────────────────────────────────────
   Everything here uses the shared theme tokens, so the designer follows the
   dark/light switch like the rest of the dashboard. It used to be pinned to a
   light grey panel (#d7d7d7) — the only screen in the app that did — because
   milsymbol draws echelon amplifiers and text in black, which vanishes on a
   dark background.

   That is now solved locally instead of globally: only the symbol itself sits
   on a light plate (.sym-plate), the way a map symbol sits on paper. The frame
   fills are standard 2525 colours and must not be restyled — they carry the
   affiliation. */
.symd {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    gap: var(--sp-4);
    align-items: start;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    min-height: calc(100vh - 300px);
}
@media (max-width: 1100px) { .symd { grid-template-columns: 1fr; min-height: 0; } }
.symd-preview-col { position: sticky; top: var(--sp-3); }

/* The one place a fixed light colour is still correct: black amplifiers and
   glyphs are part of the standard and have to stay legible. */
.sym-plate {
    display: inline-flex; align-items: center; justify-content: center;
    background: #d7d7d7; border-radius: var(--r-sm); padding: 3px 6px;
}

.symd-saved h4, .symd-preview h4 {
    margin: 0 0 var(--sp-2) 0; color: var(--text-muted);
    font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--border-mid); padding-bottom: var(--sp-1);
}
.symd-step-no {
    display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 5px;
    border-radius: 50%; background: var(--gold); color: #151515; font-size: .68rem;
}
.symd-saved-list {
    display: grid; gap: 4px; align-content: start; grid-auto-rows: min-content;
    max-height: calc(100vh - 380px); overflow-y: auto;
}
.symd-saved-item {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 4px 6px; border-radius: var(--r-sm);
    background: var(--bg-raised); cursor: pointer;
    border: 1px solid var(--border-mid);
    font-size: .8rem; color: var(--text-secondary);
}
.symd-saved-item:hover { border-color: var(--gold-dark); }
/* Saved symbols carry their amplifiers too, so they need the plate as well. */
.symd-saved-item .icon {
    display: inline-flex; align-items: center; justify-content: center;
    background: #d7d7d7; border-radius: var(--r-sm); padding: 2px 4px; flex: none;
}
.symd-saved-item .icon svg, .symd-saved-item .icon img { height: 26px; vertical-align: middle; }
.symd-saved-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.symd-saved-item .fav, .symd-saved-item .del { cursor: pointer; color: var(--text-muted); }
.symd-saved-item .del:hover { color: var(--danger); }

.symd-row { margin-bottom: var(--sp-3); }
.symd-step { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.symd-step-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.symd-step-head > span {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--gold); color: #151515; font-weight: 800; font-size: .75rem;
}
.symd-step-head > div { display: grid; }
.symd-step-head strong { font-size: .9rem; }
.symd-step-head small { color: var(--text-muted); font-size: .7rem; }
.symd-field-wide { grid-column: 1 / -1; }
.symd-entity-native { display: none; }
.symd-entity-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 6px; max-height: 260px; overflow-y: auto; padding: 2px; margin: 0 0 var(--sp-3);
}
.symd-entity-card {
    display: grid; place-items: center; align-content: space-between; gap: 6px;
    min-height: 88px; padding: 7px 5px; border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm); background: var(--bg-raised); color: var(--text-secondary);
    font: inherit; font-size: .65rem; cursor: pointer;
}
.symd-entity-card:hover { border-color: var(--gold-dark); color: var(--text-primary); }
.symd-entity-card.active { border-color: var(--gold); background: var(--gold-subtle); color: var(--text-primary); }
.symd-entity-card > span:last-child {
    width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.symd-no-result { grid-column: 1 / -1; color: var(--text-muted); font-size: .75rem; text-align: center; padding: var(--sp-4); }
.symd-name-field { display: grid; gap: 5px; color: var(--text-muted); font-size: .8rem; }
.symd-name-field input {
    background: var(--bg-raised); color: var(--text-primary); border: 1px solid var(--border-mid);
    border-radius: var(--r-sm); padding: var(--sp-2); font-size: .95rem;
}
.symd-name-field input:focus { outline: none; border-color: var(--gold); }
.symd-composition, .symd-labels { padding-top: var(--sp-2); }
.symd-color-field { display: flex; gap: var(--sp-2); align-items: center; }
.symd-row-label {
    display: block; color: var(--text-muted); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}
.symd-tiles { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.symd-tile {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: var(--bg-raised); border: 1px solid var(--border-mid);
    border-radius: var(--r-sm); padding: 6px 8px 4px;
    cursor: pointer; min-width: 66px;
    color: var(--text-secondary); font-size: .62rem;
}
.symd-tile:hover { border-color: var(--gold-dark); }
.symd-tile.active { border-color: var(--gold); background: var(--gold-subtle); color: var(--text-primary); }

/* A single symbol is scaled to a uniform tile height. Stacked symbols are NOT:
   sym-stack sizes its own box in JS from the symbol's real bounds, and forcing
   a height here rescaled the copies out of that box, so the duplicates drifted
   over each other and over the label. */
.symd-tile .sym-plate > svg { height: 26px; }
.symd-tile .sym-stack svg { height: auto; }
.symd-tile span:last-child { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sym-stack { position: relative; display: inline-block; }
.symd-stack { position: relative; display: inline-block; width: 40px; height: 30px; }
.symd-stack-item { position: absolute; bottom: 0; }
.symd-stack.big { display: inline-block; position: relative; }

.symd-selects { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); }
@media (max-width: 700px) { .symd-selects { grid-template-columns: 1fr; } }
.symd-selects label { display: grid; gap: 4px; font-size: .8rem; color: var(--text-muted); }
.symd-selects select, .symd-selects input {
    background: var(--bg-raised); color: var(--text-primary);
    border: 1px solid var(--border-mid); border-radius: var(--r-sm);
    padding: var(--sp-2);
    max-width: 100%; min-width: 0;
}
.symd-selects select:focus, .symd-selects input:focus { outline: none; border-color: var(--gold); }
.symd-selects input[type="color"] { padding: 2px; height: 34px; width: 70px; }

.symd-preview {
    background: var(--bg-base); border: 1px solid var(--border-mid); border-radius: var(--r-md);
    padding: var(--sp-3); text-align: center;
    min-width: 0; overflow: hidden;
}
.symd-preview-svg { min-height: 150px; display: flex; align-items: center; justify-content: center; padding: var(--sp-3) 0; }
.symd-preview-svg .sym-plate { padding: 10px 14px; }
.symd-preview .sidc { font-family: monospace; color: var(--text-muted); font-size: .75rem; word-break: break-all; margin-bottom: var(--sp-2); }
.symd-preview-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.symd-export-label {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
}
.symd-save-btn { width: 100%; justify-content: center; margin-top: var(--sp-2); }

/* Échelon reference symbols share the same black-amplifier problem. */
.mil-symbol-light {
    display: inline-flex; align-items: center; justify-content: center;
    background: #d7d7d7; border-radius: var(--r-sm); padding: 2px 8px;
}

/* ── Concepteur: onglets internes + barre de modèle ──────────────────── */

.cd-tabs-header { padding: 0 var(--sp-3); }
.cd-tabs { display: flex; gap: var(--sp-1); }
.cd-tab {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: .95rem; font-weight: 600;
    padding: var(--sp-3) var(--sp-3);
    border-bottom: 2px solid transparent;
}
.cd-tab:hover { color: var(--text-primary); }
.cd-tab.active { color: var(--gold-light); border-bottom-color: var(--gold); }

.cd-modelbar {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    background: var(--bg-raised);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-4);
}
.cd-modelbar select {
    flex: 1; min-width: 220px;
    background: var(--bg-void); color: var(--text-primary);
    border: 1px solid var(--border, #2a2a2a); border-radius: var(--r-sm);
    padding: var(--sp-2);
}
.cd-modelbar-sep { width: 1px; height: 22px; background: var(--border, #2a2a2a); }
.cd-archived-toggle {
    display: flex; align-items: center; gap: 6px;
    color: var(--text-secondary); font-size: .8rem; white-space: nowrap;
}

.cd-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-4);
    align-items: start;
}
@media (max-width: 1100px) { .cd-workspace { grid-template-columns: 1fr; } }

.cd-side-title {
    color: var(--text-muted); font-size: .8rem;
    text-transform: uppercase; margin: 0 0 6px;
}
.cd-echelons { margin-top: var(--sp-4); }
.cd-echelons summary {
    cursor: pointer; color: var(--text-secondary);
    font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: var(--sp-2);
}
.cd-echelons .mil-table td, .cd-echelons .mil-table th { padding: 4px var(--sp-2); }

/* ── Concepteur v2: 3 colonnes symboles | graphe | édition ───────────── */

.cd-workspace3 {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 340px;
    gap: var(--sp-4);
    align-items: start;
}
@media (max-width: 1200px) { .cd-workspace3 { grid-template-columns: 1fr; } }

.cd-symbols, .cd-editor {
    background: var(--bg-raised);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: var(--r-md);
    padding: var(--sp-3);
}
.cd-chart { overflow-x: auto; padding: var(--sp-2) 0 var(--sp-4); }
.cd-chart .oc-node { cursor: pointer; }
.cd-chart .oc-node.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.cd-chart .oc-node.cd-root { background: var(--bg-surface); }

.ce-line { display: flex; gap: 6px; margin-bottom: 4px; align-items: center; }
.ce-line .ce-line-select { flex: 1; min-width: 0; }
.ce-line input[type="number"] {
    width: 84px;
    background: var(--bg-void); color: var(--text-primary);
    border: 1px solid var(--border, #2a2a2a); border-radius: var(--r-sm);
    padding: 5px;
}
.cd-editor .mil-form input, .cd-editor .mil-form select {
    background: var(--bg-void);
}

/* ── Searchable grouped combobox ─────────────────────────────────────── */

.mil-combobox { position: relative; }
.mil-combobox-input {
    width: 100%;
    background: var(--bg-void); color: var(--text-primary);
    border: 1px solid var(--border, #2a2a2a); border-radius: var(--r-sm);
    padding: 5px 8px;
}
.mil-combobox-list {
    position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
    max-height: 240px; overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border, #2a2a2a); border-radius: var(--r-sm);
    box-shadow: 0 8px 20px rgba(0,0,0,.5);
}
.mil-combobox-group {
    padding: 4px 8px; color: var(--text-muted);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    background: var(--bg-raised);
    position: sticky; top: 0;
}
.mil-combobox-opt { padding: 5px 10px; cursor: pointer; font-size: .85rem; }
.mil-combobox-opt:hover { background: rgba(213,182,84,.12); }
.mil-combobox-opt.active { color: var(--gold-light); }

/* ── ORBAT options / bulldozer / layout compact ──────────────────────── */

.orbat-bulldozer.active { color: #e0b050; }
.orbat-chart.bulldozer .oc-node { cursor: not-allowed; }
.orbat-chart.bulldozer .oc-node:hover { border-color: #e07070; background: rgba(224,112,112,.12); }

/* Compact ("smart") layout: leaf siblings as a vertical list under a spine */
.oc-vlist {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 0 0 0;
    margin-left: 50%;
}
.oc-vlist > li {
    flex-direction: row;
    padding: 4px 0 4px 26px;
    position: relative;
}
/* vertical spine */
.oc-vlist > li::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 1px; height: auto;
    background: var(--border, #3a3a3a);
}
.oc-vlist > li:last-child::before { bottom: auto; height: 50%; }
/* horizontal stub to the card */
.oc-vlist > li::after {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: 22px; height: 1px;
    right: auto;
    background: var(--border, #3a3a3a);
}
.oc-vlist .oc-node { flex-direction: row; gap: 8px; min-width: 0; max-width: none; padding: 4px 10px; }
.oc-vlist .oc-node .oc-add { position: static; transform: none; width: 18px; height: 18px; line-height: 14px; font-size: .8rem; }

.symd-count-custom input {
    width: 44px;
    background: #fff; color: #111;
    border: 1px solid #b0b0b0; border-radius: 4px;
    padding: 2px 4px; text-align: center;
}

/* ── Tables ──────────────────────────────────────────────────────────── */

.mil-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mil-table th {
    text-align: left; color: var(--text-muted); font-weight: 600;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
    padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border, #2a2a2a);
}
.mil-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border, #1e1e1e); }
.mil-table tr:hover td { background: rgba(255,255,255,.02); }
.mil-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Modal ───────────────────────────────────────────────────────────── */

.mil-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.65);
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-4);
}
.mil-modal {
    background: var(--bg-surface);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: var(--r-lg);
    width: min(640px, 100%);
    max-height: 90vh;
    display: flex; flex-direction: column;
}
.mil-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border, #2a2a2a);
}
.mil-modal-header h3 { margin: 0; }
.mil-modal-body { padding: var(--sp-4); overflow-y: auto; }
.mil-modal-footer {
    display: flex; justify-content: flex-end; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border, #2a2a2a);
}

.mil-form { display: grid; gap: var(--sp-3); }
.mil-form label { display: grid; gap: 4px; font-size: .85rem; color: var(--text-secondary); }
.mil-form input, .mil-form select, .mil-form textarea {
    background: var(--bg-overlay, #252525); color: var(--text-primary);
    border: 2px solid var(--border-strong, #686868); border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
    font-family: inherit;
}
.mil-form input:hover, .mil-form select:hover, .mil-form textarea:hover {
    border-color: var(--text-faint, #888);
}
.mil-form input:focus, .mil-form select:focus, .mil-form textarea:focus {
    outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-subtle);
}
.mil-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.unit-form-context {
    margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 2px solid var(--gold);
    background: var(--gold-subtle); color: var(--text-secondary); font-size: .76rem;
}
.unit-name-field input { font-size: 1rem; font-weight: 600; }
.unit-form-more {
    margin-top: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border-mid);
    border-radius: var(--r-md); background: var(--bg-raised);
}
.unit-form-more > summary { cursor: pointer; color: var(--text-secondary); font-size: .8rem; font-weight: 600; }
.unit-form-more[open] > summary { margin-bottom: var(--sp-3); color: var(--gold-light); }
.mil-check-row { display: flex !important; align-items: center; gap: 8px; flex-direction: row !important; }
.mil-check-row input[type="checkbox"].pr-check {
    width: 20px !important; height: 20px !important; padding: 0;
    border-radius: var(--r-full) !important;
    appearance: none; -webkit-appearance: none;
    display: inline-grid; place-content: center; flex: 0 0 20px;
    border: 2px solid var(--text-faint); background: var(--bg-raised);
}
.mil-check-row input[type="checkbox"].pr-check::before {
    content: ""; width: 10px; height: 10px; border-radius: var(--r-full);
    background: var(--gold); transform: scale(0); transition: transform .15s ease;
}
.mil-check-row input[type="checkbox"].pr-check:checked::before { transform: scale(1); }

/* ══════════════════════════════════════════════════════════════════════════
   Bibliothèque : modèles d'unité + symboles OTAN
   ══════════════════════════════════════════════════════════════════════════
   Il y avait deux pages — « ORBAT » et « Concepteur » — et le Concepteur
   contenait un SECOND organigramme pour composer des modèles. Deux endroits
   pour dessiner une hiérarchie d'unités, et un mot (« Modèle ») qui ne disait
   pas en quoi il différait d'une unité.

   La bibliothèque est la réponse : un tiroir ouvert PAR-DESSUS l'ordre de
   bataille, jamais à sa place. On y prend un modèle ou un symbole pendant
   qu'on construit, et l'organigramme reste le seul endroit où l'on dessine
   une arborescence. */

.mil-lib-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}
.mil-lib-overlay.open { display: flex; }

.mil-lib,
.mil-tpl {
    width: min(1180px, 100%);
    height: min(88vh, 900px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
    overflow: hidden;
}
.mil-tpl { width: min(920px, 100%); height: auto; }

.mil-lib-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.mil-lib-tabs { display: flex; gap: var(--sp-1); flex: 1; }
.mil-lib-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-display, 'Rajdhani'), sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
}
.mil-lib-tab:hover { color: var(--text-primary); }
.mil-lib-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.mil-lib-body,
.mil-tpl-body { padding: var(--sp-4); overflow-y: auto; }

/* Dire ce QU'EST un modèle, là où on s'en sert. La distinction modèle/unité
   était le vrai point de confusion — une phrase au bon endroit vaut mieux
   qu'un nom plus long. */
.mil-lib-intro {
    color: var(--text-secondary);
    font-size: .85rem;
    line-height: 1.6;
    margin: 0 0 var(--sp-4);
    padding-left: var(--sp-3);
    border-left: 2px solid var(--border-gold);
}
.mil-lib-intro strong { color: var(--gold); }

.mil-lib-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.mil-lib-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-secondary);
    font-size: .85rem;
    margin-right: auto;
}

.mil-lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-3);
}
.mil-lib-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color .15s;
}
.mil-lib-card:hover { border-color: var(--border-gold); }
.mil-lib-card.is-archived { opacity: .6; }
.mil-lib-card-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
}
.mil-lib-card-sym { flex-shrink: 0; }
.mil-lib-card-id { min-width: 0; }
.mil-lib-card-id h4 {
    margin: 0;
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mil-lib-card-meta { font-size: .72rem; color: var(--text-muted); }
.mil-lib-card-stats {
    display: flex;
    gap: var(--sp-4);
    padding: 0 var(--sp-3) var(--sp-3);
    font-size: .78rem;
    color: var(--text-muted);
}
.mil-lib-card-stats strong { color: var(--gold); }
.mil-lib-card-actions { display: flex; flex-direction: column; margin-top: auto; }

.mil-lib-symbols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--sp-4);
    align-items: start;
}
.mil-lib-saved {
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    padding: var(--sp-3);
}

/* Le créateur de symboles garde son fond clair : un symbole OTAN se lit sur
   une carte claire, et c'est ainsi qu'il apparaîtra en jeu. Dans le tiroir il
   doit en revanche tenir dans la hauteur disponible au lieu de viser le
   plein écran, et sa colonne de symboles enregistrés fait doublon avec celle
   du tiroir — on masque la sienne. */
.mil-lib-symbols .symd {
    grid-template-columns: minmax(0, 1fr) 300px;
    min-height: 0;
}
.mil-lib-symbols .symd > .symd-saved { display: none; }
.mil-lib-symbols .symd-saved-list { max-height: 40vh; }
@media (max-width: 1100px) {
    .mil-lib-symbols .symd { grid-template-columns: 1fr; }
}

/* ── Éditeur de modèle ───────────────────────────────────────────────────
   Une LISTE de sous-unités, pas un organigramme : un modèle n'a pas de
   hiérarchie, et le second arbre était exactement la redondance à supprimer. */

.mil-tpl-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 0;
}
.mil-tpl-title input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    border-bottom: 1px dashed var(--border-mid);
    color: var(--text-primary);
    font-family: var(--font-display, 'Rajdhani'), sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    padding: 2px 0;
    outline: none;
}
.mil-tpl-title input:focus { border-bottom-color: var(--gold); }
.mil-tpl-head-actions { display: flex; align-items: center; gap: var(--sp-3); }
.mil-tpl-total { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }

.mil-tpl-su {
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-2);
    padding: var(--sp-3);
}
.mil-tpl-su > summary {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    cursor: pointer;
    list-style: none;
}
.mil-tpl-su > summary::-webkit-details-marker { display: none; }
.mil-tpl-su-name { font-weight: 600; color: var(--text-primary); }
.mil-tpl-su-meta { font-size: .75rem; color: var(--text-muted); margin-left: auto; }
.mil-tpl-su-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-subtle);
}
.mil-tpl-presets {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
    margin: calc(var(--sp-2) * -1) 0 var(--sp-4); padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
}
.mil-tpl-presets > span { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.mil-tpl-empty {
    min-height: 150px; display: grid; place-items: center; align-content: center; gap: var(--sp-2);
    color: var(--text-muted); border: 1px dashed var(--border-mid); border-radius: var(--r-md);
    margin-bottom: var(--sp-3); text-align: center;
}
.mil-tpl-empty strong { color: var(--text-primary); }

/* Raccourcis vers la bibliothèque, en tête du rail de l'ordre de bataille. */
.ov-rail-lib {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
}
/* Le rail est étroit : sans min-width:0 les deux boutons refusent de se
   réduire et le second déborde hors du panneau. */
.ov-rail-lib .btn {
    min-width: 0;
    justify-content: center;
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 860px) {
    .mil-lib-symbols { grid-template-columns: 1fr; }
    .mil-lib, .mil-tpl { max-height: 96vh; }
}
@media (max-width: 700px) {
    .ov-quick-context { display: none; }
    .ov-empty-steps { grid-template-columns: 1fr; text-align: left; }
    .ov-empty-start { padding: var(--sp-4); }
    .mil-tpl-head-actions .mil-tpl-total { display: none; }
}

/* Horizontal reordering of a selected unit among its siblings. The chart lays
   children out in sort_order, so this is the only way to say "this brigade sits
   left of that one" without dragging it out of its parent by accident. */
.ov-insp-move {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2); margin: var(--sp-2) 0;
}
.ov-insp-move-btns { display: flex; gap: 4px; }
.ov-insp-move-btns .btn { min-width: 38px; font-size: 1rem; line-height: 1; }


/* ── Boîte de symbole normalisée (cf. MilUI.symbolBox) ────────────────────
   milsymbol ne rend pas deux symboles dans la même boîte : l'échelon ajoute
   un amplificateur au-dessus du cadre, la désignation du texte à côté. Fixer
   une hauteur en CSS mettait donc les CADRES à des tailles différentes. Ici la
   boîte est fixe, le SVG garde sa taille intrinsèque et c'est son ancre (le
   centre du cadre) qui est calée au centre de la boîte : tous les cadres
   tombent au même endroit, à la même échelle. Le débordement reste visible —
   un amplificateur qui dépasse ne doit pas décaler la mise en page. */
.mil-sym-box {
    position: relative; display: block; flex: 0 0 auto;
    width: var(--sym-box-w); height: var(--sym-box-h);
    overflow: visible;
}
.mil-sym-fit { position: absolute; }
.mil-sym-fit > svg { display: block; width: 100%; height: 100%; }
.mil-sym-invalid { left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }