/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   DATAROOM (2026-09-17) — onglet « Dataroom » du volet Préparer ma cession : Shared/Dataroom.razor. Préfixe dr-.
   S'appuie sur la grammaire du volet (cession.css : csn-root, csn-card, csn-kpis, csn-btn, csn-read…) et n'ajoute que
   l'index en arbre, les cartes de côté, le pré-remplissage et la visionneuse. Tout ce qui s'adapte passe par des requêtes
   de conteneur (la racine csn-root porte container-type), comme les autres vues du volet.
   ⚠️ La visionneuse est en position fixe SOUS .apop, qui porte un backdrop-filter : son bloc conteneur est le volet plein
   écran, ce qui revient à l'écran entier. Elle vit hors de .csn-root : ses couleurs viennent des jetons globaux.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.dr-root .csn{gap:16px}
.dr-root code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.01em}

/* ── Accueil : aucun dossier choisi ─────────────────────────────────────────────────────────────────────────────── */
.dr-accueil{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 18px;padding:22px 22px 18px;border-radius:14px;
  border:1px dashed color-mix(in srgb,var(--brand) 42%,transparent);background:color-mix(in srgb,var(--brand) 5%,transparent)}
.dr-accueil-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:var(--brand-strong);
  background:color-mix(in srgb,var(--brand) 14%,transparent)}
.dr-accueil-ic .iku-ico{width:24px;height:24px}
.dr-accueil-x{display:grid;gap:6px;min-width:0}
.dr-accueil-x>b{font:700 16px/1.25 var(--font-family);color:var(--csn-tp)}
.dr-accueil-x>p{margin:0;font-size:12.5px;line-height:1.55;color:var(--csn-t2);max-width:78ch}
.dr-accueil-a{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:6px}
.dr-accueil-a small{font-size:11px;line-height:1.45;color:var(--csn-mut);max-width:60ch}
.dr-accueil-l{grid-column:1/-1;list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--csn-line);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px}
.dr-accueil-l li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;font-size:12px;line-height:1.45;color:var(--csn-t2)}
.dr-accueil-l li b{color:var(--csn-tp);font-weight:600}
.dr-accueil-l .iku-ico{width:15px;height:15px;color:var(--brand-strong);margin-top:1px}

/* Sélecteur de dossier natif (repli hors Chrome) : l'input couvre le bouton. */
.dr-choisir,.dr-file{position:relative;overflow:hidden}
.dr-choisir input[type=file],.dr-file input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dr-choisir.is-off{opacity:.45;pointer-events:none}

/* ── Barre d'état du dossier ────────────────────────────────────────────────────────────────────────────────────── */
.dr-etat{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:12px;border:1px solid var(--csn-line);
  background:color-mix(in srgb,var(--csn-tp) 2.5%,transparent)}
.dr-etat-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--brand-strong);
  background:color-mix(in srgb,var(--brand) 13%,transparent)}
.dr-etat-ic .iku-ico{width:17px;height:17px}
.dr-etat-x{display:grid;gap:1px;min-width:0;flex:1 1 0}
.dr-etat-x b{font-size:13.5px;font-weight:700;color:var(--csn-tp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-etat-x small{font-size:11px;color:var(--csn-mut);line-height:1.35}
.dr-etat-a{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* ── Progression ────────────────────────────────────────────────────────────────────────────────────────────────── */
.dr-prog{display:grid;gap:7px;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);
  background:color-mix(in srgb,var(--brand) 6%,transparent)}
.dr-prog-t{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--csn-tp);flex-wrap:wrap}
.dr-prog-t small{margin-left:auto;font-weight:500;font-size:11px;color:var(--csn-mut);font-variant-numeric:tabular-nums}
.dr-prog-b{height:4px;border-radius:4px;background:color-mix(in srgb,var(--csn-tp) 10%,transparent);overflow:hidden}
.dr-prog-b i{display:block;height:100%;border-radius:4px;background:var(--brand);transition:width .25s ease}
@media (prefers-reduced-motion:reduce){.dr-prog-b i{transition:none}}

/* ── Grille : index à gauche, actions à droite ──────────────────────────────────────────────────────────────────── */
.dr-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:14px;align-items:start}
.dr-cote{display:grid;gap:14px;min-width:0}
.dr-p{margin:0 0 10px;font-size:12px;line-height:1.5;color:var(--csn-t2)}

/* ── Index en arbre ─────────────────────────────────────────────────────────────────────────────────────────────── */
.dr-index{padding-bottom:10px}
.dr-arbre{display:grid;font-variant-numeric:tabular-nums;border-top:1px solid var(--csn-line)}
.dr-l{display:grid;grid-template-columns:64px minmax(0,1fr) 70px 82px 86px;align-items:center;gap:0 10px;min-height:32px;
  padding:3px 6px;border-bottom:1px solid color-mix(in srgb,var(--csn-line) 70%,transparent);font-size:12px;color:var(--csn-t2)}
.dr-l:hover{background:color-mix(in srgb,var(--csn-tp) 3%,transparent)}
.dr-l-hd{min-height:28px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--csn-mut)}
.dr-l-hd:hover{background:none}
.dr-l.is-dossier{background:color-mix(in srgb,var(--csn-tp) 2.5%,transparent);color:var(--csn-tp);font-weight:600}
.dr-l.is-att .dr-c-n{box-shadow:inset 2px 0 0 var(--csn-orange)}
.dr-c-n{font-weight:600;color:var(--csn-tp);white-space:nowrap;padding-left:6px;margin-left:-6px;align-self:stretch;display:flex;align-items:center}
.dr-c-t,.dr-c-d{text-align:right;white-space:nowrap;color:var(--csn-mut)}
.dr-c-e{display:flex;justify-content:flex-end}
.dr-c-nom{display:flex;align-items:center;flex-wrap:wrap;gap:3px 6px;min-width:0;padding-left:calc(var(--dr-p,0) * 16px)}
.dr-pli{appearance:none;flex:none;width:20px;height:20px;margin-left:-4px;border:0;border-radius:6px;background:transparent;color:var(--csn-mut);
  display:grid;place-items:center;cursor:pointer;padding:0}
.dr-pli:hover{color:var(--csn-tp);background:color-mix(in srgb,var(--csn-tp) 7%,transparent)}
.dr-pli:focus-visible,.dr-ouvrir:focus-visible,.dr-sig:focus-visible{outline:2px solid var(--brand-strong);outline-offset:1px}
.dr-ic-d{color:var(--brand-strong)}
.dr-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-nb{flex:none;font-size:10px;font-weight:700;color:var(--csn-mut);padding:0 6px;border-radius:99px;background:color-mix(in srgb,var(--csn-tp) 7%,transparent)}
.dr-ouvrir{appearance:none;display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:2px 4px;margin-left:-4px;border:0;border-radius:6px;
  background:transparent;color:var(--csn-tp);font:inherit;text-align:left;cursor:pointer}
.dr-ouvrir .iku-ico{color:var(--csn-mut)}
.dr-ouvrir:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.dr-ouvrir:hover .dr-nom{text-decoration:underline;text-underline-offset:2px}
.dr-ouvrir.is-off{cursor:default}
.dr-ouvrir.is-off:hover{background:none}
.dr-ouvrir.is-off:hover .dr-nom{text-decoration:none}
.dr-sig{display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 5px;border-radius:99px;font-size:10.5px;font-weight:600;white-space:nowrap;cursor:help;
  color:var(--csn-mut);background:color-mix(in srgb,var(--csn-tp) 6%,transparent)}
.dr-sig .iku-ico{width:11px;height:11px}
.dr-sig.is-att{color:var(--csn-orange);background:color-mix(in srgb,var(--csn-orange) 12%,transparent)}
.dr-chip{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:99px;font-size:10.5px;font-weight:700;white-space:nowrap;
  color:var(--lvl,var(--csn-t2));background:color-mix(in srgb,var(--lvl,var(--csn-tp)) 13%,transparent)}
.dr-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dr-chip[data-etat="nouvelle"]{--lvl:var(--csn-vert)}
.dr-chip[data-etat="modifiee"]{--lvl:var(--csn-orange)}
.dr-chip[data-etat="deplacee"]{--lvl:var(--brand3-strong,var(--brand-strong))}
.dr-chip[data-etat="retiree"]{--lvl:var(--csn-rouge)}
.dr-chip.is-attente{--lvl:var(--csn-mut);font-weight:600}
.dr-chip.is-attente::before{animation:dr-pouls 1s ease-in-out infinite}
@keyframes dr-pouls{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.dr-chip.is-attente::before{animation:none}}
.dr-l.is-retiree .dr-nom{text-decoration:line-through;color:var(--csn-mut)}
.dr-l.is-retiree .dr-c-n{color:var(--csn-mut)}
.dr-rien{padding:14px 6px 4px}
.dr-index>.csn-fine{margin-top:10px}

/* ── Cartes de côté ─────────────────────────────────────────────────────────────────────────────────────────────── */
.dr-cote .csn-card{display:grid;gap:10px;align-content:start}
.dr-cote .csn-card-t{margin-bottom:0}
.dr-cote .csn-read{padding:8px 12px;font-size:12px}
.dr-figer-b{width:100%;padding:9px 14px;font-size:12.5px}
.dr-confirm{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

.dr-gel-ok{display:grid;gap:10px;padding:12px;border-radius:11px;border:1px solid color-mix(in srgb,var(--csn-up) 34%,transparent);
  background:color-mix(in srgb,var(--csn-up) 6%,transparent)}
.dr-gel-t{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--csn-tp)}
.dr-gel-t .iku-ico{width:16px;height:16px;color:var(--csn-up)}
.dr-kv{display:grid;gap:5px;margin:0}
.dr-kv>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;align-items:baseline;font-size:11.5px}
.dr-kv dt{color:var(--csn-mut);font-weight:600}
.dr-kv dd{margin:0;color:var(--csn-tp);min-width:0;overflow-wrap:anywhere}
.dr-kv-sha{display:flex;align-items:center;gap:6px}
.dr-gel-a{display:flex;flex-wrap:wrap;gap:6px}
.dr-ib{appearance:none;flex:none;width:26px;height:26px;border-radius:8px;display:inline-grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid var(--color-border-bright,var(--csn-line2));background:transparent;color:var(--color-text-muted,var(--csn-mut))}
.dr-ib:hover{color:var(--color-text-primary,var(--csn-tp));border-color:color-mix(in srgb,var(--brand) 60%,transparent)}
.dr-ib:focus-visible{outline:2px solid var(--brand-strong);outline-offset:1px}
.dr-ib .iku-ico{width:14px;height:14px}

/* Pré-remplir */
.dr-pre-bd{display:grid;gap:12px}
.dr-pre-bd.is-replie{display:none}
.dr-srcs{display:grid;border-top:1px solid var(--csn-line)}
.dr-src{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start;padding:11px 0;border-bottom:1px solid var(--csn-line)}
.dr-src>.csn-switch{margin-top:2px;justify-self:start}
.dr-src>.dr-file{justify-self:start;padding:4px 9px}
.dr-src.is-off .dr-src-x{opacity:.6}
.dr-src-x{display:grid;gap:4px;min-width:0}
.dr-src-x>b{font-size:12.5px;font-weight:700;color:var(--csn-tp)}
.dr-src-x>small{font-size:11px;line-height:1.45;color:var(--csn-mut);overflow-wrap:anywhere}
.dr-src-x>small.dr-src-att{color:var(--csn-orange)}
.dr-opt{display:grid;grid-template-columns:16px minmax(0,1fr);gap:6px;align-items:start;font-size:11.5px;line-height:1.45;color:var(--csn-t2);cursor:pointer}
.dr-opt input{margin:2px 0 0;accent-color:var(--brand)}
.dr-cible{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;font-size:11px;color:var(--csn-mut)}
.dr-cible .custom-dropdown{min-width:0}
.dr-cible .custom-dropdown-trigger{width:100%;min-height:28px;font-size:11.5px}
.dr-cible .custom-dropdown-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-res{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dr-res li{display:grid;grid-template-columns:15px minmax(0,1fr);gap:7px;font-size:11.5px;line-height:1.45;color:var(--csn-t2)}
.dr-res li b{color:var(--csn-tp);font-weight:600}
.dr-res li .iku-ico{width:14px;height:14px;margin-top:1px;color:var(--csn-up)}
.dr-res li.is-ko .iku-ico{color:var(--csn-rouge)}
.dr-res li span{overflow-wrap:anywhere}

/* Gels */
.dr-gels-l{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.dr-gel-l{appearance:none;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 10px;border-radius:9px;
  border:1px solid var(--csn-line);background:transparent;color:var(--csn-tp);font:inherit;text-align:left;cursor:pointer}
.dr-gel-l:hover:not(:disabled){border-color:color-mix(in srgb,var(--brand) 55%,transparent);background:color-mix(in srgb,var(--brand) 5%,transparent)}
.dr-gel-l:disabled{cursor:default;opacity:.7}
.dr-gel-l:focus-visible{outline:2px solid var(--brand-strong);outline-offset:1px}
.dr-gel-d{font-size:12px;font-weight:700}
.dr-gel-m{grid-column:1;font-size:11px;color:var(--csn-mut)}
.dr-gel-l code{grid-column:2;grid-row:1/span 2;align-self:center;color:var(--csn-mut)}

/* ── Visionneuse ────────────────────────────────────────────────────────────────────────────────────────────────── */
.dr-vue-back{position:fixed;inset:0;z-index:1450;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(3,10,16,.66)}
html[data-theme="light"] .dr-vue-back{background:rgba(24,36,46,.46)}
.dr-vue{display:flex;flex-direction:column;width:min(1120px,100%);height:min(900px,100%);min-height:0;border-radius:14px;overflow:hidden;
  border:1px solid var(--color-border-bright,rgba(255,255,255,.14));background:var(--color-bg-surface,var(--surf-app,#0d1b24));
  box-shadow:0 24px 70px rgba(0,0,0,.45);font-family:var(--font-family);color:var(--color-text-primary)}
.dr-vue:focus{outline:none}
.dr-vue-hd{flex:none;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--color-border-medium,rgba(255,255,255,.1))}
.dr-vue-n{flex:none;font:700 12px/1 var(--font-family);padding:6px 9px;border-radius:8px;color:var(--brand-strong);
  background:color-mix(in srgb,var(--brand) 14%,transparent);font-variant-numeric:tabular-nums}
.dr-vue-x{display:grid;gap:1px;min-width:0;flex:1 1 auto}
.dr-vue-x b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-vue-x small{font-size:11px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-vue-a{display:flex;gap:6px}
.dr-vue-bd{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto;background:color-mix(in srgb,var(--color-text-primary) 4%,transparent)}
.dr-vue-bd>.csn-empty,.dr-vue-bd>.csn-read{margin:24px;font-size:12.5px}
.dr-vue-bd>.csn-fine{margin:8px 16px 12px;font-size:11px;color:var(--color-text-muted)}
.dr-vue-pdf{flex:1 1 auto;width:100%;min-height:0;border:0;background:#525659}
.dr-vue-img{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:16px}
.dr-vue-img img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 4px 18px rgba(0,0,0,.25);background:#fff}
.dr-vue-txt{flex:1 1 auto;margin:0;padding:16px 18px;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;
  color:var(--color-text-primary);tab-size:4}
.dr-vue-ft{flex:none;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;padding:9px 16px;
  border-top:1px solid var(--color-border-medium,rgba(255,255,255,.1));font-size:11px;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.dr-vue-sha{display:inline-flex;align-items:center;gap:6px;min-width:0}
.dr-vue-sha code{font-size:10.5px;overflow-wrap:anywhere}

/* ── Largeurs : la racine du volet est le conteneur ─────────────────────────────────────────────────────────────── */
@container (max-width:1000px){
  .dr-grille{grid-template-columns:minmax(0,1fr)}
  .dr-cote{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .dr-cote .dr-figer{grid-column:1/-1}
  .dr-grille>.dr-index{order:2}
}
@container (max-width:760px){
  .dr-accueil{grid-template-columns:minmax(0,1fr);padding:18px 16px}
  .dr-accueil-l{grid-template-columns:minmax(0,1fr)}
  .dr-cote{grid-template-columns:minmax(0,1fr)}
  .dr-root .csn-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dr-l{grid-template-columns:52px minmax(0,1fr) 78px;gap:0 8px}
  .dr-l .dr-c-t,.dr-l .dr-c-d{display:none}
  .dr-c-nom{padding-left:calc(var(--dr-p,0) * 10px)}
  .dr-etat{flex-wrap:wrap}
  .dr-etat-a{width:100%;justify-content:flex-start}
}
@media (max-width:640px){
  .dr-vue-back{padding:0}
  .dr-vue{width:100%;height:100%;border-radius:0;border:0}
}