/* ============================================================================
   PIAPROMO — cockpit promoteur · MODÈLE "SEEZAM" (legaltech)
   Monochrome + 1 accent ROUGE · Work Sans 900 + Poppins · uppercase technique ·
   lignes pointillées · cercles · sidebar fixe · sections sombres hexagonales.
   Mobile-first. Mêmes classes / même DOM.
   ========================================================================== */
:root{
  /* Monochrome */
  --bg:#ffffff;
  --bg-light:#f5f5f5;
  --bg-dark:#3C3C3B;          /* anthracite — sections sombres */
  --paper-pure:#ffffff;
  --surface-2:#ececec;
  --ink:#212529;             /* titres (référencé JS) */
  --ink-soft:#3C3C3B;        /* texte */
  --ink-mute:#6a6a6a;        /* labels techniques */
  --line:#e3e3e3;
  --line-strong:#c8c8c8;

  /* Accent rouge SeeZam (référencés JS) */
  --red:#E63312;
  --red-signal:#E63312;
  --red-700:#CC2D0F;
  --red-900:#a8240b;
  --red-oxblood:#7a1907;
  --red-300:#f0917c;
  --red-100:#fde7e1;
  --red-50:#fff4f1;

  /* Voies — désaturées (référencées JS) */
  --voie-foncier:#3f6ea8; --voie-montage:#b07d33;
  --voie-commercialisation:#a8548a; --voie-chantier:#4d8769; --voie-cloture:#6a6a6a;

  /* Statuts */
  --st-fait:#4d8769; --st-cours:#b07d33; --st-attente:#6a6a6a; --st-urgent:var(--red-signal);

  /* Géométrie SeeZam — subtil */
  --r-sm:4px; --r-md:8px; --r-lg:8px; --r-pill:999px;

  --font-display:'Work Sans',sans-serif;
  --font-body:'Poppins',sans-serif;

  --sh-xs:none; --sh-sm:0 1px 2px rgba(0,0,0,.05);
  --sh-md:0 6px 24px rgba(0,0,0,.08); --sh-lg:0 18px 50px rgba(0,0,0,.16);

  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);

  /* motif hexagonal (sections sombres) */
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  /* Couleurs utilitaires (zéro hex en dur hors :root) */
  --white:#ffffff;
  --red-200:#ff7a5c;                 /* rouge clair — libellé "en cours" sur sombre */
  --on-dark:rgba(255,255,255,.9);
  --on-dark-3:rgba(255,255,255,.7);
  --on-dark-2:rgba(255,255,255,.6);
  --on-dark-strong:rgba(255,255,255,.5);
  --on-dark-line:rgba(255,255,255,.18);
  --red-halo:rgba(230,51,18,.3);
  --red-pulse:rgba(230,51,18,.5);
  --red-pulse-0:rgba(230,51,18,0);
  --chantier-pill:rgba(77,135,105,.9);
  --chantier-soft:rgba(77,135,105,.06);
  --scrim:rgba(33,37,41,.6);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--ink-soft);background:var(--bg);line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;padding-bottom:calc(68px + var(--sab))}
h1,h2{font-family:var(--font-display);font-weight:900;color:var(--ink);margin:0;line-height:1.1;letter-spacing:-.01em}
h3{font-family:var(--font-body);font-weight:700;color:var(--ink);margin:0;line-height:1.2}
.mono{font-family:var(--font-body);font-variant-numeric:tabular-nums;font-weight:500}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit}
a{color:var(--red-700)}
:focus-visible{outline:2px solid var(--red-signal);outline-offset:2px;border-radius:3px}
.hidden{display:none!important}

/* ── TOPBAR : blanche + barre rouge identitaire ── */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;min-height:60px;
  padding:calc(10px + var(--sat)) 16px 10px;background:var(--bg);border-bottom:1px solid var(--line);color:var(--ink)}
.brand{display:flex;align-items:center;gap:2px;font-family:var(--font-display);font-weight:900;font-size:1.1rem;letter-spacing:-.02em;
  padding-left:12px;position:relative}
.brand::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:26px;background:var(--red)}
.brand b{color:var(--red);font-weight:900}
.brand small{font-family:var(--font-body);font-size:.6rem;letter-spacing:.16em;color:var(--ink-mute);margin-left:8px;text-transform:uppercase;font-weight:600}
.topbar .spacer{flex:1}
.topbar .vbadge{font-family:var(--font-body);font-size:.62rem;color:var(--ink-mute);letter-spacing:.06em}
.topbar .ico{width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;font-size:.7rem;color:var(--red);background:var(--bg)}

/* ── LAYOUT ── */
.app{display:block}
.rail{display:none}
main{max-width:1140px;margin:0 auto;padding:22px 16px 48px}
.screen{display:none;animation:fade .3s ease both}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.loading{padding:44px 0;text-align:center;font-family:var(--font-body);font-size:.85rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em}

.eyebrow{font-family:var(--font-body);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:600}
.eyebrow.muted{color:var(--ink-mute)}

/* ── PORTEFEUILLE ── */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:6px;
  border-bottom:2px solid var(--ink);padding-bottom:14px}
.page-head .eyebrow{display:block;margin-bottom:8px}
.page-head h1{font-size:clamp(2.1rem,7vw,3rem);font-weight:900}
.btn-new{display:inline-flex;align-items:center;gap:7px;background:var(--red);color:var(--white);font-family:var(--font-body);
  font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;padding:0 20px;min-height:46px;border-radius:var(--r-sm);
  transition:background .15s ease}
.btn-new:hover{background:var(--red-700)}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:24px 0 30px;background:var(--bg)}
.kpi{padding:18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpi:nth-child(2n){border-right:none}.kpi:nth-last-child(-n+2){border-bottom:none}
.kpi .k-lbl{font-family:var(--font-body);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.kpi .k-val{font-family:var(--font-display);font-weight:900;font-size:2rem;margin-top:6px;color:var(--ink);line-height:1}
.kpi.alert .k-val{color:var(--red)}
.kpi .k-val .mono{font-size:1rem;color:var(--ink-mute);font-weight:500}

.op-list{display:flex;flex-direction:column;gap:0}
.op-row{display:grid;grid-template-columns:1fr;gap:14px;padding:20px 6px;border-bottom:1px dotted var(--line-strong);
  position:relative;cursor:pointer;transition:background .15s ease}
.op-row::before{content:"";position:absolute;left:-6px;top:0;bottom:0;width:3px;background:transparent;transition:background .15s ease}
.op-row:hover,.op-row:focus-visible{background:var(--bg-light)}
.op-row:hover::before,.op-row:focus-visible::before{background:var(--red)}
.op-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.op-name{font-family:var(--font-display);font-weight:900;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink)}
.op-meta{font-family:var(--font-body);font-size:.78rem;color:var(--ink-soft);margin-top:3px}
.op-meta .sep{color:var(--line-strong)}
.op-pct{font-family:var(--font-display);font-weight:900;font-size:1.1rem;color:var(--ink)}

.spark{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;align-items:center}
.spark .trk{height:6px;border-radius:var(--r-pill);background:var(--surface-2);position:relative;overflow:hidden}
.spark .trk i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pill)}
.trk.v1 i{background:var(--voie-foncier)}.trk.v2 i{background:var(--voie-montage)}
.trk.v3 i{background:var(--voie-commercialisation)}.trk.v4 i{background:var(--voie-chantier)}
.op-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bar{flex:1;height:8px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden}
.bar i{display:block;height:100%;background:var(--red);border-radius:var(--r-pill)}
.deadline{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-size:.76rem;color:var(--ink-soft);white-space:nowrap;font-weight:500}
.deadline .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-mute)}
.deadline.hot{color:var(--red);font-weight:600}
.deadline.hot .dot{background:var(--red);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--red-pulse)}50%{box-shadow:0 0 0 5px var(--red-pulse-0)}}
.empty-state{padding:54px 16px;text-align:center}
.empty-state h2{font-size:1.5rem;margin-bottom:10px}
.empty-state p{color:var(--ink-soft)}

/* ── FICHE OPÉRATION ── */
.op-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.back{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:.74rem;color:var(--red-700);min-height:44px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.op-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:14px}
.op-title-row h1{font-size:clamp(1.9rem,6vw,2.6rem);font-weight:900}
.op-badge{font-family:var(--font-body);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--ink-soft);white-space:nowrap;font-weight:600}

.tabs{display:flex;gap:4px;margin:16px 0 24px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{font-family:var(--font-body);font-size:.78rem;padding:12px 14px;color:var(--ink-mute);border-bottom:3px solid transparent;white-space:nowrap;min-height:46px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--red)}
.subscreen{display:none}.subscreen.active{display:block;animation:fade .28s ease both}

.id-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--bg);margin-bottom:26px}
.id-cell{padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.id-cell:nth-child(2n){border-right:none}.id-cell:nth-last-child(-n+2){border-bottom:none}
.id-cell .l{font-family:var(--font-body);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.id-cell .v{font-family:var(--font-display);font-weight:700;margin-top:3px;color:var(--ink)}

/* ── FRISE MÉTRO sur section sombre hexagonale (signature SeeZam) ── */
.metro-wrap{margin:8px 0 30px;background:var(--bg-dark);border-radius:var(--r-md);padding:22px 18px;position:relative;overflow:hidden}
.metro-wrap::before{content:"";position:absolute;inset:0;background-image:var(--hex);pointer-events:none}
.metro-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;position:relative}
.metro-head h2{font-size:1.2rem;color:var(--white)}
.metro-head .eyebrow{color:var(--on-dark-2)}
.metro{position:relative;overflow-x:auto;padding:6px 0 4px}
.metro-inner{min-width:580px}
.voie{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:14px;padding:15px 0}
.voie+.voie{border-top:1px dotted var(--on-dark-line)}
.voie-lbl{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:.74rem;color:var(--on-dark);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.voie-lbl .pin{width:10px;height:10px;border-radius:50%;flex:none}
.line{position:relative;height:30px}
.line .rail-bg{position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);background:var(--on-dark-line);border-radius:var(--r-pill)}
.line .rail-done{position:absolute;left:0;top:50%;height:3px;transform:translateY(-50%);border-radius:var(--r-pill);transform-origin:left;animation:draw 1s ease .15s both}
@keyframes draw{from{transform:translateY(-50%) scaleX(0)}to{transform:translateY(-50%) scaleX(1)}}
.v1 .rail-done{background:var(--voie-foncier)}.v2 .rail-done{background:var(--voie-montage)}
.v3 .rail-done{background:var(--voie-commercialisation)}.v4 .rail-done{background:var(--voie-chantier)}
.stn{position:absolute;top:50%;transform:translate(-50%,-50%);text-align:center}
.stn .pt{display:block;width:14px;height:14px;border-radius:50%;background:var(--bg-dark);border:2px solid var(--on-dark-strong);margin:0 auto}
.stn.done .pt{background:var(--white);border-color:var(--white)}
.stn.now .pt{background:var(--red);border-color:var(--red);box-shadow:0 0 0 4px var(--red-halo)}
.stn .cap{font-family:var(--font-body);font-size:.62rem;color:var(--on-dark-3);margin-top:9px;white-space:nowrap;font-weight:500}
.stn.now .cap{color:var(--red-200);font-weight:600}
.handoff{position:absolute;right:-2px;top:50%;transform:translateY(-50%);font-family:var(--font-body);font-size:.6rem;color:var(--white);background:var(--chantier-pill);padding:4px 9px;border-radius:var(--r-pill);font-weight:600}

/* listes échéances */
.ech-list{border-top:1px dotted var(--line-strong)}
.ech{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px dotted var(--line-strong)}
.ech .when{font-family:var(--font-body);font-size:.84rem;min-width:74px;font-weight:600}
.ech .who{font-family:var(--font-body);font-size:.68rem;color:var(--ink-mute);margin-left:auto;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.ech.hot{background:var(--red-50)}
.ech.hot .when{color:var(--red);font-weight:700}
.flag{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ink-mute)}
.ech.hot .flag{background:var(--red)}
.note-card{margin-top:26px;border:1px solid var(--line-strong);border-left:4px solid var(--red);border-radius:var(--r-sm);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg)}
.note-card .t{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.note-card .s{font-family:var(--font-body);font-size:.7rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.04em}
.link-arrow{font-family:var(--font-body);font-size:.74rem;color:var(--red-700);font-weight:600;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}

/* ── CHECKLIST ── */
.cl-stat{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.cl-stat .big{font-family:var(--font-display);font-weight:900;font-size:2.4rem;color:var(--ink)}
.cl-stat .big .mono{font-size:1.1rem;color:var(--ink-mute);font-weight:500}
.cl-stat .pct{font-family:var(--font-body);color:var(--red);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.85rem}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.chip{font-family:var(--font-body);font-size:.72rem;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--bg);min-height:40px;display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.03em;font-weight:600;color:var(--ink-soft)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.chip.red[aria-pressed="true"]{background:var(--red);border-color:var(--red)}
.section-block{margin-top:24px}
.sec-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--bg-dark);color:var(--white);border-radius:var(--r-sm)}
.sec-bar .ph{font-family:var(--font-body);font-size:.6rem;letter-spacing:.08em;padding:3px 7px;border-radius:3px;background:var(--red);color:var(--white);font-weight:700}
.sec-bar h3{font-size:.86rem;font-weight:700;text-transform:uppercase;color:var(--white);letter-spacing:.03em}
.sec-bar .voie-tag{margin-left:auto;width:10px;height:10px;border-radius:50%}
.task{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:start;padding:14px 8px;border-bottom:1px dotted var(--line-strong)}
.task .box{width:22px;height:22px;border:2px solid var(--line-strong);border-radius:50%;margin-top:1px;display:grid;place-items:center;font-size:.7rem;cursor:pointer;background:var(--bg);color:transparent}
.task.done .box{background:var(--st-fait);border-color:var(--st-fait);color:var(--white)}
.task.cours .box{border-color:var(--st-cours);color:var(--st-cours)}
.task.urgent .box{border-color:var(--st-urgent);color:var(--st-urgent)}
.task .lbl{font-size:.96rem;color:var(--ink)}
.task.done .lbl{color:var(--ink-mute);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.task .sub{font-family:var(--font-body);font-size:.68rem;color:var(--ink-mute);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
.task .resp{font-family:var(--font-body);font-size:.7rem;color:var(--ink-soft);white-space:nowrap;text-align:right;text-transform:uppercase;letter-spacing:.03em;font-weight:600}
.task .ech-tag{color:var(--red);font-weight:600}
.star{color:var(--red)}
.delegate{display:flex;align-items:center;gap:12px;padding:16px 14px;border:1px dashed var(--voie-chantier);border-radius:var(--r-sm);margin-top:10px;background:var(--chantier-soft)}
.delegate .d-ico{width:34px;height:34px;border-radius:50%;background:var(--voie-chantier);color:var(--white);display:grid;place-items:center;font-size:.9rem;flex:none}
.delegate .d-txt{font-size:.86rem;color:var(--ink)}
.delegate .d-txt b{font-family:var(--font-display);font-weight:700}
.delegate .d-sub{font-family:var(--font-body);font-size:.66rem;color:var(--ink-mute);margin-top:2px}

/* ── JALONS ── */
.jal-group{margin-top:24px}
.jal-group h3{font-size:1.05rem;margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em}
.jal-group .hint{font-family:var(--font-body);font-size:.68rem;color:var(--ink-mute);margin:0 0 10px;text-transform:uppercase;letter-spacing:.04em}
.jal{display:flex;align-items:center;gap:12px;padding:14px 6px;border-bottom:1px dotted var(--line-strong)}
.jal .name{flex:1;font-weight:500;color:var(--ink)}
.jal .rule{font-family:var(--font-body);font-size:.68rem;color:var(--ink-mute)}
.jal .date-in{font-family:var(--font-body);font-size:.86rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:9px 11px;min-width:140px;text-align:center;background:var(--bg);font-weight:500}
.jal .date-calc{font-family:var(--font-body);font-size:.86rem;min-width:140px;text-align:center;font-weight:600;color:var(--ink)}
.jal.empty .date-calc{color:var(--line-strong);font-weight:400}
.alert-box{margin-top:20px;border:1px solid var(--red-300);border-radius:var(--r-md);overflow:hidden}
.alert-box .ab-head{background:var(--red-oxblood);color:var(--white);font-family:var(--font-body);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;font-weight:600}
.alert-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px dotted var(--red-100)}
.alert-row .a-name{flex:1;font-size:.9rem;color:var(--ink)}
.alert-row .a-rule{font-family:var(--font-body);font-size:.68rem;color:var(--red-700)}
.alert-row .cd{font-family:var(--font-body);font-size:.8rem;font-weight:700;color:var(--red);white-space:nowrap}

/* ── NAV BAS (mobile) ── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(3,1fr);background:var(--bg-dark);padding-bottom:var(--sab);border-top:3px solid var(--red)}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0 9px;color:var(--on-dark-2);font-family:var(--font-body);font-size:.6rem;min-height:58px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.tabbar button .ti{font-size:1.15rem}
.tabbar button[aria-current="true"]{color:var(--white)}
.tabbar button[aria-current="true"] .ti{color:var(--red)}

/* ── MODALE ── */
.modal-back{position:fixed;inset:0;background:var(--scrim);z-index:90;display:grid;place-items:end center}
.modal{background:var(--bg);width:100%;max-width:640px;max-height:92vh;overflow-y:auto;border-radius:8px 8px 0 0;padding:24px 18px calc(28px + var(--sab));animation:slideup .3s ease both;border-top:4px solid var(--red)}
@keyframes slideup{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.modal h2{font-size:1.6rem;margin-bottom:4px}
.modal .sub{font-family:var(--font-body);font-size:.74rem;color:var(--ink-mute);margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--font-body);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;font-weight:600}
.field input,.field select{width:100%;padding:12px;font-size:16px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--bg)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.flags-grid{display:grid;grid-template-columns:1fr;gap:6px}
.flag-chip{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:.86rem;cursor:pointer;background:var(--bg)}
.flag-chip input{width:18px;height:18px;flex:none;accent-color:var(--red)}
.flag-chip[data-on="1"]{border-color:var(--red);background:var(--red-50)}
.flag-cat{font-family:var(--font-body);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:16px 0 6px;font-weight:700}
.modal-actions{display:flex;gap:10px;margin-top:24px}
.modal-actions button{flex:1;min-height:48px;border-radius:var(--r-sm);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.btn-primary{background:var(--red);color:var(--white)}
.btn-primary:hover{background:var(--red-700)}
.btn-ghost{border:1px solid var(--line-strong);background:var(--bg)}

.toast{position:fixed;bottom:calc(74px + var(--sab));left:16px;right:16px;z-index:95;background:var(--bg-dark);color:var(--white);border-radius:var(--r-md);padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-lg);animation:slideup .3s ease both;border-left:4px solid var(--red)}
.toast button{font-weight:700;color:var(--red);text-transform:uppercase;font-size:.78rem;letter-spacing:.04em}

/* ── DESKTOP : sidebar fixe SeeZam ── */
@media(min-width:860px){
  body{padding-bottom:40px}
  .app{display:grid;grid-template-columns:218px 1fr}
  .rail{display:flex;flex-direction:column;gap:0;position:sticky;top:61px;align-self:start;height:calc(100vh - 61px);padding:20px 14px;border-right:1px solid var(--line);background:var(--bg-light)}
  .rail .r-sec{font-family:var(--font-body);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin:18px 8px 4px;font-weight:700}
  .rail button{display:flex;align-items:center;gap:10px;padding:12px 10px;font-family:var(--font-body);font-size:.78rem;color:var(--ink-soft);text-align:left;width:100%;text-transform:uppercase;letter-spacing:.03em;font-weight:600;border-bottom:1px solid var(--red)}
  .rail button:hover{color:var(--red)}
  .rail button[aria-current="true"]{color:var(--red)}
  .rail button .ti{font-size:.95rem;color:var(--ink-mute)}
  .rail button[aria-current="true"] .ti{color:var(--red)}
  .tabbar{display:none}
  main{padding:28px 34px 50px}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .kpi:nth-child(2n){border-right:1px solid var(--line)}
  .kpi:last-child{border-right:none}
  .kpi:nth-last-child(-n+2){border-bottom:none}
  .op-row{grid-template-columns:1.5fr 160px 1.1fr;align-items:center;gap:26px;padding:22px 6px}
  .metro-inner{min-width:0}
  .modal-back{place-items:center}.modal{border-radius:8px;border-top:4px solid var(--red)}
  .flags-grid{grid-template-columns:1fr 1fr}
  .toast{left:auto;right:24px;max-width:420px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}