/* ============================================================
   OMEX — Cockpit DAF — application réelle
   Design : maquette validée DDO (Doctrine_Design_OMEX §1/§3.A/§4/§5/§6/§8).
   INTERNE = rouge spartiate #e63946 réservé à l'action des onglets « Vérité ».
   Le monde « Simulateur » = pièce à part, accent indigo froid, jamais mélangé.
   Données : moteur Excel (cockpit_engine.js, écart 0 LibreOffice) + modele.json.
   ============================================================ */
:root{
  color-scheme: light;
  --omex-ink:#15171a; --omex-ink-2:#5b6066;
  --omex-canvas:#f4f5f7; --omex-surface:#ffffff; --omex-surface-2:#fbfbfc; --omex-surface-brd:#d7dade;
  --omex-hairline: rgba(13,43,78,.10);
  --omex-shadow: 0 1px 2px rgba(13,43,78,.06), 0 4px 12px rgba(13,43,78,.07);
  --omex-red:#e63946; --omex-red-deep:#b3151f; --omex-red-soft: rgba(230,57,70,.12);
  --indigo:#4A55A6; --indigo-deep:#333c82; --indigo-soft: rgba(74,85,166,.12); --indigo-soft-2: rgba(74,85,166,.22);
  --ok:#0E7C3A; --ok-bg:#e3f4ea; --warn:#B45309; --warn-bg:#fdf0db;
  --alert:#C2410C; --alert-bg:#fbe7e2; --info:#2563EB; --info-bg:#e6f1fb;
  --r-xs:4px; --r-md:12px;
  --fs-xs:13px; --fs-sm:14px; --fs-base:15px; --fs-md:17px; --fs-lg:22px; --fs-xl:28px;
  --font: Arial, "Helvetica Neue", system-ui, -apple-system, sans-serif;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --omex-ink:#E6E8EB; --omex-ink-2:#9aa1a9;
  --omex-canvas:#121417; --omex-surface:#1c1f24; --omex-surface-2:#20242a;
  --omex-surface-brd: rgba(255,255,255,.10); --omex-hairline: rgba(255,255,255,.10);
  --omex-shadow: 0 4px 14px rgba(0,0,0,.30);
  --ok:#54e08a; --ok-bg: rgba(84,224,138,.12); --warn:#f1b21b; --warn-bg: rgba(241,178,27,.12);
  --alert:#ff7043; --alert-bg: rgba(255,112,67,.12); --info:#5db4ec; --info-bg: rgba(93,180,236,.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --omex-ink:#E6E8EB; --omex-ink-2:#9aa1a9;
    --omex-canvas:#121417; --omex-surface:#1c1f24; --omex-surface-2:#20242a;
    --omex-surface-brd: rgba(255,255,255,.10); --omex-hairline: rgba(255,255,255,.10);
    --omex-shadow: 0 4px 14px rgba(0,0,0,.30);
    --ok:#54e08a; --ok-bg: rgba(84,224,138,.12); --warn:#f1b21b; --warn-bg: rgba(241,178,27,.12);
    --alert:#ff7043; --alert-bg: rgba(255,112,67,.12); --info:#5db4ec; --info-bg: rgba(93,180,236,.12);
  }
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{ margin:0; font-family:var(--font); font-size:var(--fs-base); color:var(--omex-ink); background:var(--omex-canvas); -webkit-font-smoothing:antialiased; }
.tabular{ font-variant-numeric: tabular-nums; }
button, input{ font-family:inherit; }
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

.topbar{ display:flex; align-items:center; gap:14px; padding:10px 20px; background:var(--omex-surface); border-bottom:1px solid var(--omex-hairline); position:sticky; top:0; z-index:40; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-badge{ width:36px; height:36px; border-radius:var(--r-xs); overflow:hidden; flex:0 0 auto; box-shadow: var(--omex-shadow); }
.brand-badge svg{ display:block; width:100%; height:100%; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text b{ font-size:var(--fs-md); letter-spacing:-.2px; }
.brand-text span{ font-size:var(--fs-xs); color:var(--omex-ink-2); }
.topbar-spacer{ flex:1; }
.chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; border-radius:999px; padding:3px 9px; background:var(--omex-surface-2); border:1px solid var(--omex-hairline); color:var(--omex-ink-2); }
.chip.intern{ color:var(--omex-red-deep); background:var(--omex-red-soft); border-color:transparent; }
.chip .live{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-bg); }
.topbar-meta{ font-size:var(--fs-xs); color:var(--omex-ink-2); margin-right:6px; display:none; }
@media (min-width: 900px){ .topbar-meta{ display:inline; } }
.kbd-hint{ display:none; align-items:center; gap:6px; font-size:11px; color:var(--omex-ink-2); margin-right:8px; }
.kbd-hint kbd{ font-size:10px; border:1px solid var(--omex-surface-brd); border-radius:4px; padding:1px 5px; background:var(--omex-surface-2); }
@media (min-width:1100px){ .kbd-hint{ display:inline-flex; } }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--r-xs); border:1px solid var(--omex-surface-brd); background:var(--omex-surface); color:var(--omex-ink); cursor:pointer; transition:background .15s ease-out, transform .12s ease-out; }
.icon-btn:hover{ background:var(--omex-surface-2); } .icon-btn:active{ transform:scale(.96); }
.icon-btn:focus-visible{ outline:2px solid var(--omex-red); outline-offset:2px; } .icon-btn svg{ width:18px; height:18px; }

.shell{ display:grid; grid-template-columns: 300px 1fr; gap:20px; padding:20px; max-width:1400px; margin:0 auto; align-items:start; }
@media (max-width: 980px){ .shell{ grid-template-columns: 1fr; } }
.nav-col{ display:flex; flex-direction:column; gap:18px; position:sticky; top:74px; }
@media (max-width: 980px){ .nav-col{ position:static; } }
.nav-block{ background:var(--omex-surface); border:1px solid var(--omex-surface-brd); border-radius:var(--r-md); box-shadow:var(--omex-shadow); overflow:hidden; }
.nav-block-head{ display:flex; align-items:center; gap:8px; padding:12px 14px 10px; font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--omex-ink-2); border-bottom:1px solid var(--omex-hairline); }
.nav-block.verite{ border-top:3px solid var(--omex-red); } .nav-block.verite .nav-block-head svg{ width:14px; height:14px; color: var(--omex-red); }
.navlist{ display:flex; flex-direction:column; padding:6px; gap:2px; }
.navitem{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 10px; border:none; background:transparent; border-radius:var(--r-xs); color:var(--omex-ink); font-size:var(--fs-base); text-align:left; cursor:pointer; transition:background .14s ease-out; min-height:40px; }
.navitem svg{ width:17px; height:17px; flex:0 0 auto; color:var(--omex-ink-2); }
.navitem:hover{ background:var(--omex-red-soft); } .navitem:focus-visible{ outline:2px solid var(--omex-red); outline-offset:-2px; }
.navitem[aria-selected="true"]{ background:var(--omex-red-soft); color:var(--omex-red-deep); font-weight:700; box-shadow: inset 3px 0 0 var(--omex-red); }
.navitem[aria-selected="true"] svg{ color:var(--omex-red); }
.navitem .lk{ margin-left:auto; width:14px; height:14px; color:var(--omex-ink-2); opacity:.7; }
.nav-block.atelier{ border-top:3px solid var(--indigo); } .nav-block.atelier .nav-block-head svg{ width:14px; height:14px; color:var(--indigo); }
.nav-block.atelier .navitem:hover{ background:var(--indigo-soft); } .nav-block.atelier .navitem:focus-visible{ outline:2px solid var(--indigo); outline-offset:-2px; }
.nav-block.atelier .navitem[aria-selected="true"]{ background:var(--indigo-soft); color:var(--indigo-deep); font-weight:700; box-shadow: inset 3px 0 0 var(--indigo); }
.nav-block.atelier .navitem[aria-selected="true"] svg{ color:var(--indigo); }
.nav-subitems{ display:flex; flex-direction:column; padding:2px 6px 8px 44px; gap:1px; }
.navsubitem{ display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border:none; background:transparent; border-radius:var(--r-xs); color:var(--omex-ink-2); font-size:var(--fs-xs); text-align:left; cursor:pointer; transition:background .14s ease-out; min-height:32px; }
.navsubitem::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--omex-surface-brd); flex:0 0 auto; }
.navsubitem:hover{ background:var(--indigo-soft); color:var(--indigo-deep); } .navsubitem:focus-visible{ outline:2px solid var(--indigo); outline-offset:-2px; }
.navsubitem[aria-selected="true"]{ color:var(--indigo-deep); font-weight:700; } .navsubitem[aria-selected="true"]::before{ background:var(--indigo); }

.content{ min-width:0; }
.panel{ background:var(--omex-surface); border:1px solid var(--omex-surface-brd); border-radius:var(--r-md); box-shadow:var(--omex-shadow); padding:22px; animation: fadeIn .2s ease-out; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
.panel.world-verite{ border-top:3px solid var(--omex-red); }
.panel.world-sim{ border:1.5px solid var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft), var(--omex-shadow); }
.panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.panel-title{ display:flex; align-items:center; gap:10px; } .panel-title h1{ font-size:20px; margin:0; letter-spacing:-.2px; font-weight:700; }
.lockchip{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--omex-red-deep); background:var(--omex-red-soft); padding:4px 9px; border-radius:999px; font-weight:700; }
.lockchip svg{ width:13px; height:13px; }
.panel-sub{ font-size:var(--fs-xs); color:var(--omex-ink-2); margin-top:4px; }
.panel-sub b{ color:var(--omex-ink); }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
@media (max-width:820px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .kpi-grid{ grid-template-columns:1fr; } }
.kpi{ background:var(--omex-surface-2); border:1px solid var(--omex-hairline); border-radius:var(--r-md); padding:14px 16px; }
.kpi .lbl{ font-size:var(--fs-xs); color:var(--omex-ink-2); display:flex; align-items:center; gap:6px; margin-bottom:6px; } .kpi .lbl svg{ width:14px; height:14px; }
.kpi .val{ font-size:var(--fs-xl); font-weight:700; text-align:right; } .kpi .sub{ font-size:var(--fs-xs); color:var(--omex-ink-2); text-align:right; margin-top:2px; }
.kpi.ok .val{ color:var(--ok); } .kpi.warn .val{ color:var(--warn); } .kpi.alert .val{ color:var(--alert); }
.focus-alert{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--alert); background:var(--alert-bg); border-radius:999px; padding:2px 8px; margin-top:6px; } .focus-alert svg{ width:12px; height:12px; }

.chartbox{ background:var(--omex-surface-2); border:1px solid var(--omex-hairline); border-radius:var(--r-md); padding:16px 16px 6px; margin-bottom:18px; }
.chart-legend{ display:flex; align-items:center; gap:18px; font-size:var(--fs-xs); color:var(--omex-ink-2); margin-bottom:6px; flex-wrap:wrap; }
.chart-legend .li{ display:flex; align-items:center; gap:6px; }
.chart-legend .swatch{ width:22px; height:0; border-top:3px solid var(--omex-ink); display:inline-block; }
.chart-legend .swatch.dash{ border-top:3px dashed var(--indigo); } .chart-legend .swatch.solid-i{ border-top:3px solid var(--omex-ink); }
.chart-legend .swatch.dotted{ border-top:2px dotted var(--omex-ink-2); }
svg.chart{ width:100%; height:auto; display:block; }
.chart text{ fill:var(--omex-ink-2); font-family:var(--font); font-variant-numeric:tabular-nums; }
.chart .grid line{ stroke:var(--omex-hairline); stroke-width:1; }
.chart .zero{ stroke:var(--alert); stroke-width:1.4; stroke-dasharray:2 3; }
.chart .line-socle,.chart .line-real{ fill:none; stroke:var(--omex-ink); stroke-width:2.5; }
.chart .line-scenario{ fill:none; stroke:var(--indigo); stroke-width:2.5; stroke-dasharray:7 5; }
.chart .line-budget{ fill:none; stroke:var(--omex-ink-2); stroke-width:2; stroke-dasharray:1.4 4.5; stroke-linecap:round; }
.chart .pt-bas{ fill:var(--omex-surface); stroke:var(--omex-red); stroke-width:2.5; }

.table-wrap{ overflow:auto; border:1px solid var(--omex-hairline); border-radius:var(--r-md); }
table.datat{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:640px; }
table.datat thead th{ position:sticky; top:0; background:var(--omex-surface-2); text-align:right; padding:10px 12px; border-bottom:1px solid var(--omex-hairline); color:var(--omex-ink-2); font-weight:700; font-size:var(--fs-xs); }
table.datat thead th:first-child{ text-align:left; }
table.datat td{ padding:9px 12px; text-align:right; border-bottom:1px solid var(--omex-hairline); }
table.datat td:first-child{ text-align:left; color:var(--omex-ink-2); }
table.datat tbody tr:nth-child(odd){ background: color-mix(in srgb, var(--omex-surface-2) 55%, transparent); }
table.datat tbody tr:hover{ background:var(--omex-red-soft); }
table.datat tr.total{ font-weight:700; } table.datat tr.total td{ border-top:2px solid var(--omex-hairline); }
.badge-min{ display:inline-flex; align-items:center; gap:4px; background:var(--alert-bg); color:var(--alert); border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; }
.badge-neutral{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; border-radius:999px; padding:3px 9px; background:var(--omex-surface); border:1px solid var(--omex-hairline); color:var(--omex-ink-2); }
.status-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; border-radius:999px; padding:3px 9px; }
.status-badge svg{ width:12px; height:12px; }
.status-badge.ok{ color:var(--ok); background:var(--ok-bg); } .status-badge.warn{ color:var(--warn); background:var(--warn-bg); } .status-badge.alert{ color:var(--alert); background:var(--alert-bg); } .status-badge.nd{ color:var(--omex-ink-2); background:var(--omex-surface); border:1px solid var(--omex-hairline); }
.ecart-badge{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; } .ecart-badge.pos{ color:var(--ok); } .ecart-badge.neg{ color:var(--alert); } .ecart-badge.flat{ color:var(--omex-ink-2); }

.section-title{ font-size:var(--fs-sm); font-weight:700; margin:26px 0 4px; } .section-title:first-child{ margin-top:0; }
.section-sub{ font-size:var(--fs-xs); color:var(--omex-ink-2); margin:0 0 14px; }
.group-overview{ margin-bottom:20px; }
.group-overview-title{ font-size:var(--fs-xs); color:var(--omex-ink-2); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.entity-mini-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
@media (max-width:980px){ .entity-mini-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:480px){ .entity-mini-grid{ grid-template-columns:1fr; } }
.entity-mini{ background:var(--omex-surface-2); border:1px solid var(--omex-hairline); border-radius:var(--r-md); padding:12px 14px; }
.entity-mini .em-name{ font-size:11px; font-weight:700; color:var(--omex-ink-2); text-transform:uppercase; letter-spacing:.3px; margin-bottom:8px; }
.entity-mini .em-solde{ font-size:16px; font-weight:700; text-align:right; } .entity-mini .em-sub{ font-size:11px; color:var(--omex-ink-2); text-align:right; margin-bottom:8px; }
.entity-mini .em-foot{ display:flex; justify-content:flex-end; }

.frais-legend{ display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--omex-ink-2); margin-bottom:14px; }
.frais-legend .fl-mark{ width:2px; height:14px; background:var(--omex-red); display:inline-block; } .frais-legend .fl-bar{ width:22px; height:8px; background:var(--omex-ink); border-radius:999px; display:inline-block; }
.frais-rows{ display:flex; flex-direction:column; gap:12px; }
.frais-row{ display:grid; grid-template-columns: 230px 1fr 130px 150px; align-items:center; gap:14px; }
@media (max-width:820px){ .frais-row{ grid-template-columns: 1fr; gap:6px; } .frais-row .frais-val{ text-align:left; } }
.frais-label{ font-size:var(--fs-sm); color:var(--omex-ink); }
.frais-bar-wrap{ position:relative; height:14px; background:var(--omex-surface-brd); border-radius:999px; }
.frais-bar{ position:absolute; left:0; top:0; height:100%; background:var(--omex-ink); border-radius:999px; }
/* levier NON chiffré : une barre vide se lit « 0 € ». Trame hachurée + légende explicite. */
.frais-bar.nochiffre{ width:100%; background:repeating-linear-gradient(135deg,
   var(--omex-hairline) 0 6px, transparent 6px 12px); opacity:.9; }
.lev-note{ font-size:var(--fs-xs); color:var(--omex-ink-2); line-height:1.45; margin-top:3px; }
.frais-val{ font-size:var(--fs-sm); font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }

.carnet-bar{ display:flex; height:44px; border-radius:var(--r-xs); overflow:hidden; border:1px solid var(--omex-hairline); }
.carnet-seg{ display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; }
.carnet-seg.seg-c{ background:var(--omex-ink); } .carnet-seg.seg-to{ background:var(--omex-ink-2); } .carnet-seg.seg-as{ background:var(--omex-ink-2); opacity:.72; } .carnet-seg.seg-p{ background:var(--omex-ink-2); opacity:.46; }
.carnet-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:var(--fs-xs); }
.carnet-legend .cl-item{ display:flex; align-items:center; gap:7px; } .carnet-legend .cl-dot{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.carnet-legend .cl-dot.c{ background:var(--omex-ink); } .carnet-legend .cl-dot.to{ background:var(--omex-ink-2); } .carnet-legend .cl-dot.as{ background:var(--omex-ink-2); opacity:.72; } .carnet-legend .cl-dot.p{ background:var(--omex-ink-2); opacity:.46; }
.carnet-legend b{ font-variant-numeric:tabular-nums; }
.carnet-note{ display:flex; align-items:center; gap:9px; font-size:var(--fs-xs); color:var(--omex-ink-2); background:var(--omex-surface-2); border:1px solid var(--omex-hairline); border-radius:var(--r-xs); padding:10px 13px; margin-top:14px; }
.carnet-note svg{ width:15px; height:15px; color:var(--omex-red); flex:0 0 auto; } .carnet-note.guard{ border-color:var(--omex-red); background:var(--omex-red-soft); color:var(--omex-red-deep); }
.carnet-note.mono{ font-family:'Courier New',monospace; font-size:12.5px; color:var(--omex-ink); }

.dette-bars{ display:flex; align-items:flex-end; gap:26px; height:190px; padding:10px 8px 0; }
.dette-bar-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:1; height:100%; max-width:140px; }
.dette-bar-val{ font-size:13px; font-weight:700; margin-bottom:8px; }
.dette-bar{ width:100%; max-width:92px; background:var(--omex-ink-2); border-radius:6px 6px 0 0; opacity:.5; }
.dette-bar-col.mur .dette-bar{ background:var(--omex-red); opacity:1; } .dette-bar-col.mur .dette-bar-val{ color:var(--omex-red-deep); }
.dette-bar-label{ font-size:12px; color:var(--omex-ink-2); margin-top:9px; font-weight:700; } .dette-bar-col.mur .dette-bar-label{ color:var(--omex-red-deep); }

/* mode focus */
.panel .kpi, .panel .chartbox, .panel .group-overview, .panel .panel-sub{ transition: filter .22s ease-out, opacity .22s ease-out; }
.panel.focus-mode .kpi:not(.focus-target), .panel.focus-mode .chartbox, .panel.focus-mode .group-overview, .panel.focus-mode .panel-sub{ filter: grayscale(1); opacity:.32; }
.panel.focus-mode .kpi.focus-target{ box-shadow: 0 0 0 2px var(--omex-red), var(--omex-shadow); }
.focus-toggle{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--omex-surface-brd); background:var(--omex-surface); color:var(--omex-ink-2); border-radius:999px; padding:7px 13px; font-size:var(--fs-xs); font-weight:700; cursor:pointer; transition:background .15s ease-out; min-height:36px; }
.focus-toggle svg{ width:14px; height:14px; } .focus-toggle:hover{ background:var(--omex-surface-2); } .focus-toggle:focus-visible{ outline:2px solid var(--omex-red); outline-offset:2px; }
.focus-toggle.active{ background:var(--omex-red-soft); border-color:var(--omex-red); color:var(--omex-red-deep); } .focus-toggle .fk{ font-size:10px; border:1px solid currentColor; border-radius:4px; padding:0 5px; opacity:.75; }

/* affaires -> roue radiale (onglet CA/Carnet) */
.aff-list{ margin:20px 0 4px; } .aff-list-title{ font-size:var(--fs-xs); color:var(--omex-ink-2); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.aff-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.aff-chip{ display:flex; align-items:center; gap:10px; background:var(--omex-surface-2); border:1px solid var(--omex-hairline); border-radius:var(--r-md); padding:9px 14px; cursor:pointer; text-align:left; font-family:inherit; color:var(--omex-ink); transition:border-color .15s ease-out, background .15s ease-out, transform .12s ease-out; min-height:40px; }
.aff-chip:hover{ border-color:var(--omex-red); background:var(--omex-red-soft); } .aff-chip:focus-visible{ outline:2px solid var(--omex-red); outline-offset:2px; } .aff-chip:active{ transform:scale(.98); }
.aff-chip .aic{ width:30px; height:30px; border-radius:var(--r-xs); background:var(--omex-surface); border:1px solid var(--omex-hairline); display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .aff-chip .aic svg{ width:16px; height:16px; color:var(--omex-ink-2); }
.aff-chip .atx b{ display:block; font-size:var(--fs-sm); } .aff-chip .atx span{ display:block; font-size:11px; color:var(--omex-ink-2); }
.wheel-overlay{ position:fixed; inset:0; background: rgba(15,17,20,.30); backdrop-filter: blur(1.5px); z-index:90; opacity:0; pointer-events:none; transition:opacity .18s ease-out; }
.wheel-overlay.show{ opacity:1; pointer-events:auto; }
.wheel{ position:absolute; width:300px; height:300px; transform:translate(-50%,-50%); left:50%; top:50%; }
.wheel-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9); width:150px; height:150px; background:var(--omex-surface); border:1px solid var(--omex-surface-brd); border-radius:50%; box-shadow:var(--omex-shadow); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:14px; text-align:center; opacity:0; transition:opacity .18s ease-out .05s, transform .2s ease-out .05s; }
.wheel-overlay.show .wheel-center{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.wheel-center .wc-num{ font-size:11px; color:var(--omex-ink-2); font-weight:700; } .wheel-center .wc-client{ font-size:var(--fs-sm); font-weight:700; margin-top:2px; } .wheel-center .wc-montant{ font-size:var(--fs-md); font-weight:700; color:var(--omex-red-deep); font-variant-numeric:tabular-nums; margin-top:2px; }
.wheel-node{ position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; background:var(--omex-surface); border:1px solid var(--omex-surface-brd); box-shadow:var(--omex-shadow); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; color:var(--omex-ink); font-size:11px; font-weight:700; text-align:center; opacity:0; transform:translate(0,0) scale(.5); transition:opacity .2s ease-out, transform .22s ease-out, background .15s ease-out, border-color .15s ease-out; }
.wheel-overlay.show .wheel-node{ opacity:1; transform: translate(var(--nx), var(--ny)) scale(1); }
.wheel-node:hover, .wheel-node:focus-visible{ background:var(--omex-red-soft); border-color:var(--omex-red); outline:none; }
.wheel-node.primary{ background:var(--omex-red); border-color:var(--omex-red); color:#fff; width:86px; height:86px; margin:-43px 0 0 -43px; } .wheel-node.primary:hover{ background:var(--omex-red-deep); }
.wheel-node svg{ width:18px; height:18px; } .wheel-node .wn-kbd{ position:absolute; top:3px; right:7px; font-size:9px; opacity:.65; }
.wheel-close-hint{ position:absolute; bottom:-32px; left:50%; transform:translateX(-50%); font-size:11px; color:#fff; opacity:.9; white-space:nowrap; }

/* lanceur d'outils flottant */
/* Outils : menu déroulant SOBRE dans la barre du haut — la roue flottante est retirée
   (à moitié coupée en bas d'écran, recouvrait du contenu : constat DDO + jury). */
.outils-wrap{ position:relative; }
.outils-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:240px; background:var(--omex-surface);
  border:1px solid var(--omex-surface-brd); border-radius:var(--r-md); box-shadow:var(--omex-shadow);
  padding:6px; z-index:95; }
.outils-menu[hidden]{ display:none; }
.outils-menu button{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:none;
  background:transparent; border-radius:var(--r-xs); font-family:inherit; font-size:var(--fs-sm);
  color:var(--omex-ink); cursor:pointer; text-align:left; }
.outils-menu button:hover{ background:var(--omex-surface-2); }
.outils-menu button:focus-visible{ outline:2px solid var(--omex-red); outline-offset:-2px; }
.outils-menu svg{ width:16px; height:16px; flex:0 0 auto; color:var(--omex-ink-2); }
.tool-overlay{ position:fixed; inset:0; background:rgba(15,17,20,.22); backdrop-filter: blur(2px); z-index:91; opacity:0; pointer-events:none; transition:opacity .18s ease-out; } .tool-overlay.show{ opacity:1; pointer-events:auto; }
.tool-wheel{ position:absolute; left:50%; top:50%; width:320px; height:320px; transform:translate(-50%,-50%); }
.tool-node{ position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.35); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#fff; font-size:10.5px; font-weight:700; cursor:pointer; opacity:0; transform:translate(0,0) scale(.5); transition:opacity .2s ease-out, transform .22s ease-out, background .15s ease-out; }
.tool-overlay.show .tool-node{ opacity:1; transform: translate(var(--nx), var(--ny)) scale(1); } .tool-node:hover, .tool-node:focus-visible{ background: rgba(255,255,255,.3); outline:none; } .tool-node svg{ width:18px; height:18px; }
.tool-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:var(--indigo); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.3); } .tool-center svg{ width:24px; height:24px; }

/* simulateur */
.sim-banner{ display:flex; align-items:center; gap:10px; background:var(--indigo-soft); color:var(--indigo-deep); border:1px solid var(--indigo-soft-2); border-radius:var(--r-xs); padding:9px 14px; font-size:var(--fs-sm); font-weight:700; margin-bottom:16px; }
:root[data-theme="dark"] .sim-banner{ color:#c7ccf5; } .sim-banner svg{ width:17px; height:17px; flex:0 0 auto; }
.horizon-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.seg{ display:inline-flex; background:var(--omex-surface-2); border:1px solid var(--omex-hairline); border-radius:999px; padding:3px; gap:2px; }
.seg button{ border:none; background:transparent; padding:8px 14px; border-radius:999px; font-size:var(--fs-sm); color:var(--omex-ink-2); cursor:pointer; transition:background .14s ease-out, color .14s ease-out; }
.seg button:hover{ color:var(--omex-ink); } .seg button:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; } .seg button[aria-pressed="true"]{ background:var(--indigo); color:#fff; font-weight:700; }
.seg.seg-sm{ display:flex; width:100%; padding:2px; } .seg.seg-sm button{ flex:1; padding:7px 6px; font-size:12px; text-align:center; }
.socle-recall{ display:flex; align-items:center; gap:12px; background:var(--omex-surface-2); border:1px solid var(--omex-hairline); border-radius:var(--r-md); padding:12px 16px; margin-bottom:16px; flex-wrap:wrap; }
.socle-recall svg{ width:18px; height:18px; color:var(--omex-red); flex:0 0 auto; } .socle-recall .txt{ font-size:var(--fs-sm); color:var(--omex-ink-2); } .socle-recall .txt b{ color:var(--omex-ink); font-weight:700; } .socle-recall .spacer{ flex:1; }
.delta-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 14px; border-radius:var(--r-xs); background:var(--indigo-soft); margin-top:10px; margin-bottom:4px; }
.delta-line .lab{ font-size:var(--fs-sm); color:var(--indigo-deep); font-weight:700; } :root[data-theme="dark"] .delta-line .lab{ color:#c7ccf5; }
.delta-line .amt{ font-size:var(--fs-lg); font-weight:700; color:var(--indigo-deep); } :root[data-theme="dark"] .delta-line .amt{ color:#c7ccf5; } .delta-line .amt.zero{ color:var(--omex-ink-2); }
.layers{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0; align-items:start; } @media (max-width:980px){ .layers{ grid-template-columns:1fr; } }

/* ---------- SIMULATEUR : chapitres miroirs des onglets Vérité (13 pouces) ----------
   Avant : une seule page de 9 cartes qui déroulait, graphe perdu en haut. Après : un
   chapitre à la fois + le graphe en colonne de droite COLLANTE, donc toujours sous les
   yeux quand on bouge un curseur. Rien n'a été retiré, tout est reclassé. */
/* en-tête compacte : bandeau + titre + horizon sur une seule ligne */
.sim-topbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.sim-banner.inline{ margin-bottom:0; padding:6px 11px; font-size:var(--fs-xs); }
.sim-banner.inline svg{ width:14px; height:14px; }
.sim-h1{ font-size:var(--fs-xl); font-weight:700; letter-spacing:-.3px; margin:0; color:var(--omex-ink); }
.sim-topnote{ font-size:var(--fs-xs); color:var(--omex-ink-2); flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sim-topbar .seg{ margin-left:auto; flex:0 0 auto; }
/* la note disparaît AVANT que l'en-tête ne passe sur deux lignes : une ligne = 40 px gagnés */
@media (max-width:1460px){ .sim-topnote{ display:none; } }

/* ÉCRAN COURT (13 pouces) : deux listes de 8 = 875 px de navigation, « Optimisation » passe
   sous la ligne de flottaison. On replie alors le monde où l'on n'est PAS — son en-tête
   reste toujours visible (le principe des deux mondes lisibles d'un coup d'œil est tenu) et
   un clic dessus le rouvre. Au-dessus de 900 px de haut, les deux restent dépliées. */
.nav-block-head{ position:relative; }
.nav-chev{ margin-left:auto; width:14px; height:14px; flex:0 0 auto; opacity:.55; display:none;
           transition:transform .15s ease-out; }
.nav-count{ margin-left:auto; font-size:11px; font-weight:700; color:var(--omex-ink-2); display:none; }
@media (max-height:900px){
  .nav-block.world-inactive:not(.force-open) .navlist,
  .nav-block.world-inactive:not(.force-open) .nav-subitems{ display:none; }
  .nav-block.world-inactive .nav-block-head{ cursor:pointer; }
  .nav-block.world-inactive .nav-block-head:hover{ background:var(--omex-surface-2); }
  .nav-block.world-inactive .nav-block-head:focus-visible{ outline:2px solid var(--indigo); outline-offset:-2px; }
  .nav-block.world-inactive .nav-chev{ display:block; }
  .nav-block.world-inactive .nav-count{ display:inline; margin-left:8px; }
  .nav-block.world-inactive.force-open .nav-chev{ transform:rotate(180deg); }
}

/* pastille sur l'entrée de l'Atelier = ce chapitre porte au moins une couche active,
   visible sans avoir à l'ouvrir. Posée juste après le libellé, avant le picto de droite. */
.chapdot{ width:7px; height:7px; border-radius:50%; background:var(--indigo); flex:0 0 auto; margin-left:6px; }
.navitem-sim[aria-selected="true"] .chapdot{ background:var(--indigo-deep); }
:root[data-theme="dark"] .navitem-sim[aria-selected="true"] .chapdot{ background:#c7ccf5; }

.sim-grid{ display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:20px; align-items:start; }
.sim-main{ min-width:0; }
.sim-aside{ position:sticky; top:14px; min-width:0; }
.sim-aside .chartbox{ margin-bottom:10px; padding:10px 11px 2px; }
.sim-aside .socle-recall{ margin-bottom:10px; padding:8px 12px; font-size:var(--fs-xs); gap:8px; flex-wrap:nowrap; }
.sim-aside .socle-recall .txt{ min-width:0; }
.sim-aside .btnrow{ margin-top:10px; gap:8px; }
.sim-aside .btnrow .btn{ padding:8px 12px; font-size:var(--fs-xs); flex:1 1 0; justify-content:center; }
.sim-aside .guardrails{ margin-top:10px; }
.sim-aside .guardrails .gi{ font-size:11.5px; line-height:1.45; }
/* sur un écran court (13 pouces), les rappels de garde-fous passent en info-bulle :
   ils restent accessibles, ils ne poussent plus le contenu hors de l'écran */
@media (max-height:820px){ .sim-aside .guardrails{ display:none; } }
.sim-chapter[hidden]{ display:none; }
.simchap-head{ margin-bottom:6px; }
.simchap-head h2{ font-size:var(--fs-lg); font-weight:700; letter-spacing:-.2px; margin:0 0 4px; color:var(--omex-ink); }
.simchap-head p{ margin:0 0 4px; font-size:var(--fs-sm); line-height:1.55; color:var(--omex-ink-2); max-width:78ch; }
.layers.layers-1{ grid-template-columns:1fr; max-width:640px; }
.panel-head.compact{ margin-bottom:12px; }

/* récapitulatif des couches actives — la colonne de droite dit TOUJOURS ce qui est branché */
.aside-actives:empty{ display:none; }
.aside-actives{ background:var(--omex-surface-2); border:1px solid var(--omex-hairline); border-radius:var(--r-md); padding:11px 13px; }
.aside-actives .aa-t{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--omex-ink-2); margin-bottom:7px; }
.aa-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:4px 0; border-top:1px solid var(--omex-hairline); font-size:var(--fs-sm); }
.aa-row:first-of-type{ border-top:0; }
.aa-row .aa-l{ color:var(--omex-ink); }
.aa-row .aa-v{ font-weight:700; }
.aa-row .aa-v.pos{ color:var(--ok); } .aa-row .aa-v.neg{ color:var(--alert); }
.aa-none{ font-size:var(--fs-sm); color:var(--omex-ink-2); line-height:1.5; }
.sim-recap{ display:flex; gap:10px; align-items:flex-start; background:var(--omex-surface-2);
  border:1px solid var(--omex-hairline); border-radius:var(--r-xs); padding:12px 14px; font-size:var(--fs-sm); line-height:1.55; margin-bottom:14px; }
.sim-recap svg{ width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:var(--omex-ink-2); }

/* sous 1240 px (13 pouces en fenêtre partagée, tablette) : la colonne passe AU-DESSUS et
   reste collante — le graphe demeure visible pendant qu'on fait défiler les curseurs. */
@media (max-width:1240px){
  .sim-grid{ grid-template-columns:1fr; gap:14px; }
  .sim-aside{ position:sticky; top:6px; z-index:12; background:var(--omex-surface);
              padding:8px; margin:-8px -8px 4px; border-radius:var(--r-md);
              box-shadow:0 6px 14px -8px rgba(0,0,0,.28); }
  .sim-aside .chart{ max-height:150px; }
  .sim-aside .guardrails{ display:none; }   /* rappelés en bas de la Synthèse du scénario */
  .layers.layers-1{ max-width:none; }
}
.layer{ background:var(--omex-surface-2); border:1px solid var(--omex-hairline); border-radius:var(--r-md); padding:14px 16px; transition:border-color .15s ease-out, background .15s ease-out; }
.layer.on{ border-color:var(--indigo-soft-2); background: color-mix(in srgb, var(--indigo-soft) 45%, var(--omex-surface-2)); }
.layer-head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; } .layer-head svg.li-ico{ width:18px; height:18px; color:var(--omex-ink-2); flex:0 0 auto; } .layer.on .layer-head svg.li-ico{ color:var(--indigo); } .layer-head b{ font-size:var(--fs-sm); flex:1; }
.layer-eff{ font-size:var(--fs-xs); color:var(--omex-ink-2); margin:2px 0 10px; } .layer-eff b{ font-variant-numeric:tabular-nums; } .layer.on .layer-eff b.pos{ color:var(--ok); } .layer.on .layer-eff b.neg{ color:var(--alert); }
.layer-body{ display:none; } .layer.on .layer-body{ display:block; } .layer-hint{ font-size:var(--fs-xs); color:var(--omex-ink-2); font-style:italic; } .layer.on .layer-hint{ display:none; }
/* Chapitre à une seule carte : on montre les curseurs D'EMBLÉE (désactivés, grisés). Voir ce
   qu'un levier propose avant de le brancher évite le clic à l'aveugle — et remplit la page. */
.layers-1 .layer .layer-body{ display:block; }
.layers-1 .layer:not(.on) .layer-body{ opacity:.5; }
.layers-1 .layer:not(.on) .layer-body input[type=range]{ cursor:not-allowed; }
.layers-1 .layer:not(.on) .layer-hint{ display:block; margin-top:10px; }
.field{ margin-bottom:10px; } .field:last-child{ margin-bottom:0; } .field-row{ display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-xs); color:var(--omex-ink-2); margin-bottom:4px; } .field-row b{ color:var(--omex-ink); font-variant-numeric:tabular-nums; font-size:var(--fs-sm); }
.field-hint{ font-size:11px; color:var(--omex-ink-2); margin-top:4px; }
input[type="range"]{ width:100%; -webkit-appearance:none; appearance:none; height:34px; background:transparent; cursor:pointer; }
input[type="range"]:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; border-radius:999px; }
input[type="range"]::-webkit-slider-runnable-track{ height:6px; border-radius:999px; background: linear-gradient(90deg, var(--indigo) 0%, var(--indigo) var(--fill,50%), var(--omex-surface-brd) var(--fill,50%), var(--omex-surface-brd) 100%); }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; margin-top:-7px; border-radius:50%; background:#fff; border:3px solid var(--indigo); box-shadow:0 1px 3px rgba(0,0,0,.25); }
input[type="range"]::-moz-range-track{ height:6px; border-radius:999px; background:var(--omex-surface-brd); } input[type="range"]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--indigo); }
input[type="range"]:disabled{ opacity:.4; cursor:not-allowed; }
.switch{ position:relative; display:inline-block; width:42px; height:24px; flex:0 0 auto; } .switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch .track{ position:absolute; inset:0; background:var(--omex-surface-brd); border-radius:999px; cursor:pointer; transition:background .16s ease-out; }
.switch .track::before{ content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .16s ease-out; }
.switch input:checked + .track{ background:var(--indigo); } .switch input:checked + .track::before{ transform:translateX(18px); } .switch input:focus-visible + .track{ outline:2px solid var(--indigo); outline-offset:2px; }
.invest-section-title{ font-size:var(--fs-sm); font-weight:700; margin:22px 0 4px; } .invest-section-sub{ font-size:var(--fs-xs); color:var(--omex-ink-2); margin:0 0 12px; }
.invest-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:6px; } @media (max-width:980px){ .invest-grid{ grid-template-columns:1fr; } } .invest-card{ padding:16px 18px; } .invest-card .layer-eff{ margin:2px 0 4px; }
.placement-guard{ display:none; align-items:center; gap:8px; background:var(--alert-bg); color:var(--alert); border:1px solid var(--alert); border-radius:var(--r-xs); padding:8px 12px; font-size:12px; font-weight:700; margin-top:10px; } .placement-guard svg{ width:15px; height:15px; flex:0 0 auto; } .placement-guard.show{ display:flex; }
.btnrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.btn{ display:inline-flex; align-items:center; gap:8px; border-radius:var(--r-xs); padding:10px 16px; font-size:var(--fs-sm); font-weight:700; cursor:pointer; border:1px solid transparent; min-height:40px; transition:background .15s ease-out, transform .12s ease-out; } .btn svg{ width:16px; height:16px; } .btn:active{ transform:scale(.97); }
.btn.ghost{ background:var(--omex-surface); border-color:var(--omex-surface-brd); color:var(--omex-ink); } .btn.ghost:hover{ background:var(--omex-surface-2); } .btn.ghost:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }
.btn.indigo{ background:var(--indigo); color:#fff; } .btn.indigo:hover{ background:var(--indigo-deep); }
/* .gi était en `display:flex` : chaque bout de texte et chaque <b> devenait un élément de
   flex, ce qui découpait la phrase en colonnes dès qu'elle dépassait une ligne. En bloc, le
   texte coule normalement et le picto reste aligné sur la première ligne. */
.guardrails{ margin-top:14px; display:flex; flex-direction:column; gap:7px; font-size:var(--fs-xs); line-height:1.5; color:var(--omex-ink-2); }
.guardrails .gi{ display:block; }
.guardrails svg{ width:14px; height:14px; flex:0 0 auto; color:var(--indigo); vertical-align:-2px; margin-right:6px; }

.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none; background:var(--omex-ink); color:var(--omex-canvas); padding:12px 18px; border-radius:var(--r-xs); font-size:var(--fs-sm); display:flex; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,.3); z-index:80; transition:opacity .2s ease-out, transform .2s ease-out; max-width:90vw; text-align:left; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; } .toast svg{ width:18px; height:18px; color:var(--indigo); flex:0 0 auto; }
.errbox{ padding:14px 16px; border:1px solid var(--alert); background:var(--alert-bg); color:var(--alert); border-radius:var(--r-md); font-size:var(--fs-sm); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================================================
   CORRECTIFS JURY (accessibilité, lisibilité, mobile, impression) — v2 24/07
   ========================================================================== */
/* 1. Couleurs de TEXTE dédiées : en thème sombre, red-deep/indigo-deep sont des teintes
      de FOND, illisibles en texte (2,16:1 mesuré). On sépare texte et fond.        */
:root{ --red-txt: var(--omex-red-deep); --indigo-txt: var(--indigo-deep);
       --ok:#0B6B31; --warn:#8F4008; --alert:#A93407; }
:root[data-theme="dark"]{ --red-txt:#ff9aa2; --indigo-txt:#b6bdf7; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --red-txt:#ff9aa2; --indigo-txt:#b6bdf7; } }
.chip.intern{ color:var(--red-txt); }
.lockchip{ color:var(--red-txt); }
.navitem[aria-selected="true"]{ color:var(--red-txt); }
.nav-block.atelier .navitem[aria-selected="true"]{ color:var(--indigo-txt); }
.navsubitem:hover{ color:var(--indigo-txt); } .navsubitem[aria-selected="true"]{ color:var(--indigo-txt); }
.carnet-note.guard{ color:var(--red-txt); }
.dette-bar-col.mur .dette-bar-val{ color:var(--red-txt); } .dette-bar-col.mur .dette-bar-label{ color:var(--red-txt); }
.focus-toggle.active{ color:var(--red-txt); }
.wheel-center .wc-montant{ color:var(--red-txt); }
.sim-banner{ color:var(--indigo-txt); } :root[data-theme="dark"] .sim-banner{ color:var(--indigo-txt); }
.delta-line .lab, .delta-line .amt{ color:var(--indigo-txt); }
:root[data-theme="dark"] .delta-line .lab, :root[data-theme="dark"] .delta-line .amt{ color:var(--indigo-txt); }

/* 2. Typographie : plancher relevé (cible 40-60 ans, lecture d'écran en réunion) */
.entity-mini .em-name{ font-size:12.5px; } .entity-mini .em-sub{ font-size:12.5px; } .entity-mini .em-solde{ font-size:17px; }
.status-badge, .badge-neutral, .badge-min, .focus-alert, .wheel-close-hint, .field-hint{ font-size:12.5px; }
.chip, .kbd-hint, .wheel-center .wc-num, .wheel-node, .tool-node{ font-size:12px; }
.aff-chip .atx span{ font-size:12.5px; } .ecart-badge{ font-size:13px; }
.seg.seg-sm button, .placement-guard{ font-size:13px; }
.xlref{ color:var(--omex-ink-2); font-weight:400; font-size:12.5px; }

/* 3. Roue d'outils : voile opaque + pastilles sombres (texte blanc sur translucide = 1,6:1) */
.tool-overlay{ background:rgba(12,14,17,.72); }
.tool-node{ background:rgba(24,27,32,.94); border-color:rgba(255,255,255,.45); }
.tool-node:hover, .tool-node:focus-visible{ background:var(--omex-red); border-color:#fff; }
.wheel-close-hint{ color:#fff; opacity:1; background:rgba(12,14,17,.88); padding:4px 12px; border-radius:999px; }
.wheel-overlay{ background:rgba(12,14,17,.55); }
.wheel-node.soon{ opacity:.55; } .wheel-node.soon .soon-tag{ position:absolute; bottom:6px; font-size:9.5px; font-weight:700; opacity:.9; }

/* 4. Réconciliation / notes de contrôle */
.recon-note{ display:flex; align-items:flex-start; gap:10px; font-size:var(--fs-sm); line-height:1.5; color:var(--omex-ink); background:var(--omex-surface-2); border:1px solid var(--omex-hairline); border-left:3px solid var(--omex-ink-2); border-radius:var(--r-xs); padding:12px 14px; margin-top:14px; }
.recon-note svg{ width:16px; height:16px; flex:0 0 auto; color:var(--omex-ink-2); margin-top:2px; }
.recon-note.flag{ border-left-color:var(--omex-red); background:var(--omex-red-soft); } .recon-note.flag > svg{ color:var(--omex-red); }
/* NB : surtout PAS de display:flex ici — chaque <b> deviendrait un item et le texte
   se casserait en colonnes (défaut constaté sur le bloc VERROU). Icône en flottant. */
.recon-note .flagline{ display:block; margin-top:8px; padding-top:8px; border-top:1px dashed var(--omex-hairline); }
.recon-note .flagline svg{ width:15px; height:15px; float:left; margin:2px 8px 0 0; }
.recon-note .flagline::after{ content:""; display:block; clear:both; }
table.datat tr.sub-total td{ font-weight:700; border-top:1px solid var(--omex-hairline); background:var(--omex-surface-2); }
table.datat tr.passage td{ font-style:italic; color:var(--omex-ink-2); }
table.datat tr.passage td:first-child{ font-style:italic; }
/* .carnet-note était en display:flex : chaque <b> devenait un item de flex et la note
   se cassait en colonnes dès qu'elle contenait un montant en gras (défaut VERROU signalé
   par le jury, reproduit partout). Retour à un flux de texte normal, icône flottante. */
.carnet-note{ display:block; line-height:1.55; }
.carnet-note > svg{ float:left; margin:1px 9px 0 0; }
.carnet-note .cn-ico{ float:left; margin:1px 9px 0 0; }
.carnet-note .cn-ico svg{ display:block; }
.carnet-note::after{ content:""; display:block; clear:both; }
.carnet-note b.tabular{ white-space:nowrap; }
.src-line{ font-size:12px; color:var(--omex-ink-2); font-weight:400; margin-top:3px; display:flex; align-items:center; gap:5px; }
.src-line svg{ width:12px; height:12px; color:var(--alert); flex:0 0 auto; } .src-line.src-ko{ color:var(--alert); font-weight:700; }

/* 5. Encart d'aide + bandeau NAS */
.aide-encart{ background:var(--omex-surface-2); border:1px solid var(--omex-hairline); border-left:3px solid var(--omex-red); border-radius:var(--r-xs); padding:12px 16px; margin-bottom:18px; }
.aide-encart .ae-t{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--omex-ink-2); margin-bottom:6px; }
.aide-encart .ae-l{ margin:0; padding-left:18px; font-size:var(--fs-sm); line-height:1.6; color:var(--omex-ink); }
.aide-encart .ae-l li{ margin-bottom:3px; }
.nas-warn{ display:flex; align-items:flex-start; gap:10px; background:var(--alert-bg); border:1px solid var(--alert); border-radius:var(--r-xs); padding:11px 14px; margin-bottom:16px; font-size:var(--fs-sm); line-height:1.5; color:var(--alert); }
.nas-warn svg{ width:17px; height:17px; flex:0 0 auto; margin-top:2px; }
.nas-warn.degrade{ background:var(--omex-surface-2); border-color:var(--omex-ink-2); color:var(--omex-ink); }
.nas-warn.degrade svg{ color:var(--omex-ink-2); }
.nas-warn code{ font-family:ui-monospace,Consolas,monospace; font-size:.92em; }
/* donnée absente : jamais « 0 € » — un tiret explicite, visuellement distinct d'un montant */
.nodata{ color:var(--omex-ink-2); font-weight:600; letter-spacing:.04em; cursor:help;
         border-bottom:1px dotted var(--omex-ink-2); }
/* réconciliation en FAITS : mini-table calculée, pas de prose */
.mini-recon{ border-collapse:collapse; margin:8px 0 4px; width:auto; min-width:340px; }
.mini-recon td{ padding:3px 0; font-size:var(--fs-sm); }
.mini-recon td:last-child{ text-align:right; padding-left:26px; font-weight:700; white-space:nowrap; }
.mini-recon .mr-sub td{ color:var(--omex-ink-2); font-weight:400; }
.mini-recon .mr-sub td:first-child{ padding-left:14px; }
.mini-recon .mr-sub td:last-child{ font-weight:400; }
.mini-recon .mr-tot td{ border-top:1px solid currentColor; padding-top:5px; }
.flagline.muted{ font-size:var(--fs-xs); color:var(--omex-ink-2); font-weight:400; margin-top:4px; }

/* ---------- JAUGES & CHIPS : la donnée s'AFFICHE, elle ne se raconte pas ----------
   Barre segmentée (vert = disponible, dégradé rouge = au-delà, gris hachuré = immobilisé),
   repères verticaux, chips d'évaluation. Tout est calculé — zéro phrase à réécrire. */
.vwrap{ margin:10px 0 14px; }
.vwrap .vtitle{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--omex-ink-2); margin-bottom:6px; }
.vbar{ position:relative; height:16px; border-radius:999px; background:var(--omex-surface-2); border:1px solid var(--omex-hairline); overflow:visible; }
.vbar .seg{ position:absolute; top:0; bottom:0; }
.vbar .seg:first-child{ border-radius:999px 0 0 999px; }
.seg.ok{ background:linear-gradient(90deg, color-mix(in srgb, var(--ok) 75%, #fff) , var(--ok)); }
.seg.over{ background:linear-gradient(90deg, color-mix(in srgb, var(--alert) 45%, #fff), var(--alert)); border-radius:0 999px 999px 0; }
.seg.frozen{ background:repeating-linear-gradient(135deg, var(--omex-hairline) 0 5px, transparent 5px 10px); border-radius:0 999px 999px 0; }
.vmark{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--omex-ink); }
.vmark .vmlbl{ position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:10.5px; white-space:nowrap; color:var(--omex-ink-2); }
.vlegend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:7px; font-size:var(--fs-xs); color:var(--omex-ink); }
.vlegend .vl{ display:inline-flex; align-items:baseline; gap:6px; }
.vlegend .sw{ width:10px; height:10px; border-radius:3px; align-self:center; flex:0 0 auto; }
.vlegend .sw.ok{ background:var(--ok); } .vlegend .sw.over{ background:var(--alert); }
.vlegend .sw.frozen{ background:repeating-linear-gradient(135deg, var(--omex-hairline) 0 3px, transparent 3px 6px); border:1px solid var(--omex-hairline); }
.vlegend b{ font-variant-numeric:tabular-nums; }
.chiprow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 14px; }
.vchip{ display:inline-flex; align-items:baseline; gap:6px; padding:5px 11px; border-radius:999px; font-size:var(--fs-xs); border:1px solid var(--omex-hairline); background:var(--omex-surface-2); color:var(--omex-ink); }
.vchip b{ font-variant-numeric:tabular-nums; }
.vchip.ok{ background:color-mix(in srgb, var(--ok) 12%, transparent); border-color:color-mix(in srgb, var(--ok) 35%, transparent); }
.vchip.alert{ background:var(--alert-bg); border-color:color-mix(in srgb, var(--alert) 40%, transparent); color:var(--alert); }
.vchip.nd{ color:var(--omex-ink-2); }
.vchip .arr{ opacity:.5; }

/* 6. Business Plan : hypothèses visibles, verrou de leviers, socle requalifié */
.hyp-block{ background:var(--omex-surface-2); border:1px solid var(--omex-hairline); border-radius:var(--r-md); padding:14px 18px; margin-bottom:16px; }
.hyp-title{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--omex-ink-2); margin-bottom:6px; }
.hyp-list{ margin:0; padding-left:18px; font-size:var(--fs-sm); line-height:1.65; }
.hyp-foot{ display:flex; align-items:center; gap:8px; margin-top:12px; font-size:var(--fs-xs); color:var(--omex-ink-2); }
.hyp-foot svg{ width:14px; height:14px; color:var(--alert); flex:0 0 auto; }
.bp-zero{ display:flex; align-items:center; gap:9px; background:var(--alert-bg); border:1px solid var(--alert); color:var(--alert); border-radius:var(--r-xs); padding:10px 14px; margin-bottom:12px; font-size:var(--fs-sm); }
.bp-zero svg{ width:17px; height:17px; flex:0 0 auto; }
.bp-lock{ display:flex; align-items:flex-start; gap:10px; background:var(--warn-bg); border:1px solid var(--warn); color:var(--warn); border-radius:var(--r-xs); padding:11px 14px; margin:0 0 14px; font-size:var(--fs-sm); line-height:1.5; }
.bp-lock svg{ width:17px; height:17px; flex:0 0 auto; margin-top:1px; }
.layer.layer-off{ opacity:.45; filter:grayscale(.4); }
.socle-recall.bp{ border-color:var(--warn); background:var(--warn-bg); } .socle-recall.bp svg{ color:var(--warn); }
.warn-hint{ color:var(--alert) !important; font-weight:700; }

/* 7. Graphique : réel vs projeté, ligne zéro */
.chart .projete{ stroke-dasharray:6 4; }
.chart .split{ stroke:var(--omex-ink-2); stroke-width:1; stroke-dasharray:2 4; opacity:.6; }
.chart .zerolab{ fill:var(--alert); font-weight:700; }
.chart-legend .swatch.proj{ border-top:3px dashed var(--omex-ink); }
.chart-foot{ font-size:var(--fs-xs); color:var(--omex-ink-2); padding:2px 0 8px; }

/* 8. Attente longue (scan NAS) + état hors ligne + erreur avec reprise */
.busy{ position:fixed; inset:0; background:rgba(12,14,17,.55); z-index:95; display:none; align-items:center; justify-content:center; }
.busy.show{ display:flex; }
.busy-box{ background:var(--omex-surface); border:1px solid var(--omex-surface-brd); border-radius:var(--r-md); padding:24px 30px; text-align:center; box-shadow:var(--omex-shadow); max-width:420px; }
.busy-spin{ width:30px; height:30px; margin:0 auto 14px; border:3px solid var(--omex-surface-brd); border-top-color:var(--omex-red); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.busy-txt{ font-size:var(--fs-md); font-weight:700; } .busy-sub{ font-size:var(--fs-xs); color:var(--omex-ink-2); margin-top:6px; }
.chip.off{ color:#fff; background:var(--alert); border-color:transparent; } .chip.off .live{ background:#fff; box-shadow:none; }
.err-detail{ font-size:var(--fs-xs); margin-top:8px; opacity:.85; }
.err-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.err-hint{ font-size:var(--fs-xs); color:var(--omex-ink-2); }

/* 9. Le bouton flottant ne doit plus recouvrir la dernière ligne d'un tableau */
.shell{ padding-bottom:96px; }

/* 10. Mobile : les CHIFFRES d'abord, la navigation en barre compacte */
/* Sur téléphone, les deux mondes doivent RESTER VISIBLES tous les deux. Avant : un seul
   défilement horizontal de 1 325 px poussait le bloc ATELIER à x=1140 — hors écran, sans
   amorce : le Simulateur devenait introuvable. Désormais les blocs s'empilent (les deux
   en-têtes toujours à l'écran) et le défilement se fait À L'INTÉRIEUR de chaque liste. */
@media (max-width: 980px){
  /* min-width:0 : sans lui, la largeur mini du contenu (1 116 px de puces) impose sa loi
     au bloc et c'est la PAGE ENTIÈRE qui défile en largeur au lieu de la seule liste. */
  .nav-col{ flex-direction:column; gap:8px; overflow:visible; padding-bottom:0;
            width:100%; max-width:100%; min-width:0; }
  .nav-block{ flex:0 0 auto; width:100%; max-width:100%; min-width:0; }
  .nav-block-head{ padding:8px 12px 6px; font-size:11px; }
  .navlist{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
            scroll-snap-type:x proximity; padding-bottom:2px; min-width:0; max-width:100%;
            /* amorce de défilement : le contenu s'estompe au bord droit quand il continue */
            -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent 100%);
            mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent 100%); }
  .nav-block.atelier .navlist{ -webkit-mask-image:none; mask-image:none; }   /* un seul item : pas de fondu */
  .navitem{ white-space:nowrap; padding:10px 12px; min-height:40px; scroll-snap-align:start; }
  .navitem .lk{ display:none; }
  .nav-subitems{ display:none; }
  .shell{ gap:14px; padding:14px 14px 96px; min-width:0; }
  /* garde-fou : la PAGE ne défile jamais en largeur sur téléphone (les tableaux larges
     ont chacun leur propre conteneur .table-wrap qui défile, lui) */
  html, body{ overflow-x:hidden; }
}
@media (max-width: 640px){
  .kpi .val{ font-size:23px; }
  .panel{ padding:16px 14px; }
  /* l'en-tête ne doit pas manger un tiers de l'écran en cassant le titre sur 3 lignes */
  /* flex-wrap + row-gap : la correction du defaut telephone signale par
     J. CECCARINI le 26/08/2026. Elle vivait dans trois applications et
     dans la feuille transverse, mais PAS ici — la charte affirmait donc
     le contraire de ce que les ecrans faisaient. Remontee le 01/09. */
  .topbar{ padding:8px 12px; gap:8px; flex-wrap:wrap; row-gap:6px; }
  .topbar-spacer{ flex:1 1 auto; }
  .brand-text b{ font-size:var(--fs-sm); white-space:nowrap; } .brand-text span{ display:none; }
  .brand-badge{ width:30px; height:30px; }
  .chip{ font-size:11px; padding:2px 7px; } .icon-btn{ width:36px; height:36px; }
  .aide-encart .ae-l{ font-size:var(--fs-xs); }
  /* sur téléphone : les CHIFFRES avant tout le reste (le point bas ne doit pas être
     à 1 400 px de défilement) — l'aide et le détail par entité passent après. */
  .panel[data-panel="synthese"]{ display:flex; flex-direction:column; }
  .panel[data-panel="synthese"] .panel-head{ order:1; }
  .panel[data-panel="synthese"] .nas-warn{ order:2; }
  .panel[data-panel="synthese"] .kpi-grid{ order:3; margin-bottom:14px; }
  .panel[data-panel="synthese"] .chartbox{ order:4; }
  .panel[data-panel="synthese"] .group-overview{ order:5; }
  .panel[data-panel="synthese"] .aide-encart{ order:6; margin:6px 0 0; }
  .panel[data-panel="synthese"] .panel-sub{ order:7; }
}

/* 11. Impression : la Synthèse doit sortir proprement pour une réunion */
@media print{
  @page{ size:A4 landscape; margin:12mm; }
  .topbar, .nav-col, .outils-menu, .wheel-overlay, .toast, .busy, .focus-toggle, .btnrow{ display:none !important; }
  .shell{ display:block; padding:0; max-width:none; }
  .panel{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
  .panel[hidden]{ display:none !important; }
  body{ background:#fff; color:#000; }
  .kpi, .chartbox, .table-wrap{ break-inside:avoid; }
  .aide-encart{ display:none; }
  /* filigrane graphique : une impression du simulateur qui circule ne doit jamais
     pouvoir être prise pour un document de référence */
  .panel.world-sim{ position:relative; }
  .panel.world-sim::before{ content:"SIMULATION — VALEURS INDICATIVES"; position:absolute; top:38%; left:0; right:0;
    text-align:center; transform:rotate(-22deg); font-size:42px; font-weight:800; letter-spacing:2px;
    color:rgba(74,85,166,.16); pointer-events:none; z-index:5; }
}