/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   EMPLOIS ET RESSOURCES (plan de financement, 2026-10-22) : onglet de la vue Emprunter (.er-vue) et page « Plan de financement »
   du dossier de financement (.er-page, parcours live). Préfixe er-. Maquette validée par Arthur (maquette-emplois-ressources.html).
   Jetons rebranchés sur tokens.css ; séries du graphique = palette active (--serie-*) ; aucune couleur figée hors négatifs.
   🚨 Tableau : colonne des libellés et en-tête FIGÉS, aux fonds OPAQUES (exigence d'Arthur : aucune valeur ne se voit par
   transparence au défilement). Chaque cellule peint ses teintes (rangée, colonne Total) en COUCHES sur une surface pleine :
   linear-gradient(teinte, teinte), var(--er-bg), comme la grille du portefeuille et le cockpit. Les lignes vides se grisent
   par la COULEUR du texte, jamais par l'opacité.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.er-root{
  --er-tp:var(--color-text-primary); --er-t2:var(--color-text-secondary); --er-mut:var(--color-text-muted); --er-dim:var(--color-text-dim);
  --er-line:var(--color-border-medium); --er-line-2:color-mix(in srgb,var(--er-tp) 16%,var(--surf-1b));
  --er-up:var(--st-green); --er-neg:#ff8f7a; --er-amber:var(--st-amber); --er-brand:var(--brand-strong);
  /* Surface PLEINE du tableau (même formule que .lbo-tw : un voile du texte mêlé à une surface opaque, donc opaque). */
  --er-bg:color-mix(in srgb,var(--er-tp) 2.5%,var(--surf-1b));
  /* Séries : ressources (CAF, emprunts, autres), emplois (investissements, remboursements, BFR, autres). La dette garde la 1ʳᵉ
     série, comme le capital du prêt dans l'échéancier de la vue ; voisines de pile prises dans des séries de teintes éloignées (vérifié sur la palette de la démonstration et la palette par défaut). */
  --er-caf:var(--serie-3); --er-emp:var(--serie-1); --er-aut:var(--serie-6);
  --er-inv:var(--serie-2); --er-remb:var(--serie-7); --er-bfr:var(--serie-4); --er-aut2:var(--serie-5);
  --er-lc-w:300px;
  font-family:var(--font-family); color:var(--er-tp); font-size:12px; line-height:1.4; text-align:left; container-type:inline-size;
}
html[data-theme="light"] .er-root{ --er-neg:#c4432c; }
.er-root *{box-sizing:border-box}
.er-root b{font-weight:700}
.er-root .iku-ico{width:14px;height:14px;flex:none}
.er-vide-msg{margin:0;padding:14px;font-size:12.5px;color:var(--er-mut)}
.er-pos{color:var(--er-up)}
.er-neg,.er-ko{color:var(--er-neg)}
.er-ok{color:var(--er-up)}

/* ── Carte de l'onglet ─────────────────────────────────────────────────────────────────────────────────────── */
.er-card{border:1px solid var(--er-line);border-radius:12px;background:color-mix(in srgb,var(--er-tp) 2.5%,transparent);padding:14px 16px 16px;min-width:0}
.er-h{display:flex;align-items:flex-start;gap:10px 14px;flex-wrap:wrap}
.er-h-t{min-width:0;flex:1 1 280px}
.er-h-t h4{margin:0;font:800 14.5px/1.25 var(--font-family)}
.er-h-t small{display:block;margin-top:2px;font-size:11.5px;color:var(--er-mut)}
.er-ctr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.er-sw{appearance:none;display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 12px 0 8px;border-radius:17px;border:1px solid var(--er-line-2);
  background:color-mix(in srgb,var(--er-tp) 4%,transparent);color:var(--er-tp);font:650 12.5px/1 var(--font-family);white-space:nowrap;cursor:pointer}
.er-sw small{font-weight:500;color:var(--er-mut);font-size:11.5px}
.er-sw-tr{position:relative;width:32px;height:18px;border-radius:9px;background:color-mix(in srgb,var(--er-tp) 22%,var(--surf-1b));flex:none;transition:background .15s}
.er-sw-tr::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:7px;background:var(--er-tp);transition:left .15s}
.er-sw[aria-checked="true"]{border-color:color-mix(in srgb,var(--er-emp) 60%,transparent)}
.er-sw[aria-checked="true"] .er-sw-tr{background:var(--er-emp)}
.er-sw[aria-checked="true"] .er-sw-tr::after{left:16px;background:var(--surf-1b)}
.er-sw:disabled{cursor:not-allowed;color:var(--er-mut)}
.er-sw:focus-visible{outline:2px solid var(--brand-strong);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.er-sw-tr,.er-sw-tr::after{transition:none}}

/* ── Phrase et chiffres ── */
.er-syn{display:flex;gap:12px;margin-top:14px;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--brand) 9%,transparent);border:1px solid color-mix(in srgb,var(--brand) 25%,transparent)}
.er-syn>.iku-ico{width:16px;height:16px;margin-top:2px;color:var(--er-brand)}
.er-syn-c{min-width:0;flex:1}
.er-syn p{margin:0;font-size:13px;line-height:1.55;color:var(--er-tp)}
.er-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.er-fig{padding:9px 11px;border-radius:9px;border:1px solid var(--er-line);background:color-mix(in srgb,var(--er-tp) 3%,transparent);min-width:0}
.er-fig small{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--er-mut)}
.er-fig b{display:block;font-size:17px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}
.er-fig span{display:block;font-size:11px;color:var(--er-t2);margin-top:1px}
.er-bar{display:flex!important;height:6px;border-radius:3px;overflow:hidden;gap:2px;margin-top:7px}
.er-bar i{display:block;height:100%}
.er-bar i.er-s-caf{background:var(--er-caf)}
.er-bar i.er-s-emp{background:var(--er-emp)}

/* ── Graphique ── */
.er-chart{margin-top:16px;min-width:0}
.er-leg{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:11px;color:var(--er-t2);align-items:center}
.er-leg .g{color:var(--er-mut);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.er-leg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.er-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.er-leg i.er-s-caf{background:var(--er-caf)} .er-leg i.er-s-emp{background:var(--er-emp)} .er-leg i.er-s-aut{background:var(--er-aut)}
.er-leg i.er-s-inv{background:var(--er-inv)} .er-leg i.er-s-remb{background:var(--er-remb)} .er-leg i.er-s-bfr{background:var(--er-bfr)} .er-leg i.er-s-aut2{background:var(--er-aut2)}
.er-leg i.er-s-obj{background:repeating-linear-gradient(135deg,var(--er-inv) 0 3px,color-mix(in srgb,var(--er-bg) 55%,var(--er-inv)) 3px 5px)}
.er-svg{display:block;width:100%;height:auto;margin-top:8px;overflow:visible}
.er-svg-e{display:none}
.er-svg text{font-family:var(--font-family)}
.er-g-grid{stroke:color-mix(in srgb,var(--er-tp) 8%,transparent)}
.er-g-base{stroke:color-mix(in srgb,var(--er-tp) 24%,transparent)}
.er-g-ax{fill:var(--er-mut);font-size:10px}
.er-g-re{fill:var(--er-mut);font-size:9px}
.er-g-ex{fill:var(--er-tp);font-size:11.5px;font-weight:700}
.er-g-var{font-size:11px;font-weight:800}
.er-g-var.er-pos{fill:var(--er-up)} .er-g-var.er-neg{fill:var(--er-neg)}
.er-svg .er-s-caf{fill:var(--er-caf)} .er-svg .er-s-emp{fill:var(--er-emp)} .er-svg .er-s-aut{fill:var(--er-aut)}
.er-svg .er-s-inv{fill:var(--er-inv)} .er-svg .er-s-remb{fill:var(--er-remb)} .er-svg .er-s-bfr{fill:var(--er-bfr)} .er-svg .er-s-aut2{fill:var(--er-aut2)}
.er-hach-bg{fill:var(--er-inv)}
.er-hach-l{fill:color-mix(in srgb,var(--er-bg) 55%,transparent)}

/* ── Le tableau ── */
.er-tw{position:relative;margin-top:16px;border:1px solid var(--er-line);border-radius:10px;overflow:auto;overscroll-behavior:contain;background:var(--er-bg);scrollbar-width:thin}
.er-tw:focus-visible{outline:2px solid var(--brand-strong);outline-offset:2px}
.er-t{width:100%;min-width:calc(var(--er-lc-w) + var(--n,6) * 80px);border-collapse:separate;border-spacing:0;font-size:12px;line-height:1.3;font-variant-numeric:tabular-nums}
.er-t th,.er-t td{padding:0 12px;height:30px;text-align:right;white-space:nowrap;font-weight:500;color:var(--er-tp);
  border-bottom:1px solid color-mix(in srgb,var(--er-tp) 7%,var(--surf-1b));
  background:linear-gradient(var(--row,transparent),var(--row,transparent)),var(--er-bg)}
/* Colonne Total : un cran de teinte de plus, en couche sur la même surface pleine. */
.er-t .er-tc{--col:color-mix(in srgb,var(--er-tp) 4%,transparent);font-weight:700;box-shadow:inset 1px 0 0 var(--er-line-2);
  background:linear-gradient(var(--row,transparent),var(--row,transparent)),linear-gradient(var(--col),var(--col)),var(--er-bg)}
/* En-tête figé en haut, colonne des libellés figée à gauche ; le coin passe devant les deux. */
.er-t thead th{position:sticky;top:0;z-index:2;--row:color-mix(in srgb,var(--er-tp) 6%,transparent);height:34px;font-size:11px;font-weight:700;color:var(--er-mut);
  border-bottom:1px solid var(--er-line-2)}
.er-t .er-lc{position:sticky;left:0;z-index:1;text-align:left;width:var(--er-lc-w);min-width:var(--er-lc-w);max-width:var(--er-lc-w);white-space:normal;
  box-shadow:1px 0 0 var(--er-line-2)}
.er-t thead .er-lc{z-index:3}
.er-lib{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.er-l-court{display:none}
.er-t tr.er-sec>*{--row:color-mix(in srgb,var(--brand) 7%,transparent);height:28px}
.er-t tr.er-sec>th{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--er-brand)}
.er-t tr.er-tot>*{--row:color-mix(in srgb,var(--brand) 12%,transparent);font-weight:800;border-bottom-color:var(--er-line-2)}
.er-t tr.er-var>*{--row:color-mix(in srgb,var(--brand) 17%,transparent);font-weight:800;height:34px;border-top:1px solid var(--er-line-2)}
.er-t tr.er-fin>*{--row:color-mix(in srgb,var(--brand) 10%,transparent);font-weight:800}
.er-t tr.er-deb>*{color:var(--er-t2)}
.er-t tr.er-dont>*{height:26px;font-size:11.5px;color:var(--er-t2)}
.er-t tr.er-dont>th{padding-left:30px;font-style:italic}
.er-t tr.er-vide>*{color:var(--er-dim)}   /* jamais d'opacité : la cellule figée resterait transparente */
.er-t tr.er-ctl>*{height:28px;font-size:11.5px;color:var(--er-mut);border-bottom:0}
.er-t tr.er-ctl>td.er-ok{color:var(--er-up);font-weight:700}
.er-t tr.er-ctl>td.er-ko{color:var(--er-neg);font-weight:700}
.er-t td.er-pos{color:var(--er-up)} .er-t td.er-neg{color:var(--er-neg)}
.er-t tr.er-pret>th.er-lc{box-shadow:inset 3px 0 0 var(--er-emp),1px 0 0 var(--er-line-2)}
.er-t tr.er-pret>td:not(.er-pos):not(.er-neg){color:color-mix(in srgb,var(--er-emp) 62%,var(--er-tp))}
.er-tag{display:inline-block;padding:0 6px;border-radius:5px;font-size:9.5px;font-weight:800;letter-spacing:.03em;font-style:normal;border:1px solid;line-height:15px;white-space:nowrap}
.er-tag-hyp{color:var(--er-amber);border-color:color-mix(in srgb,var(--er-amber) 55%,transparent)}
.er-tag-pret{color:color-mix(in srgb,var(--er-emp) 62%,var(--er-tp));border-color:color-mix(in srgb,var(--er-emp) 70%,transparent)}

.er-foot{margin:9px 0 0;font-size:11px;line-height:1.5;color:var(--er-mut)}
.er-alerte{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:8px 11px;border-radius:9px;font-size:12px;line-height:1.45;color:var(--er-tp);
  background:color-mix(in srgb,var(--er-neg) 12%,transparent);border:1px solid color-mix(in srgb,var(--er-neg) 40%,transparent)}
.er-alerte .iku-ico{color:var(--er-neg);margin-top:1px}

/* ── Renvoi aux ratios et « D'où vient chaque ligne » ── */
.er-ratios{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-top:14px;padding:10px 14px;border-radius:10px;border:1px dashed var(--er-line-2);font-size:12.5px;color:var(--er-t2)}
.er-rv{display:inline-flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.er-rv b{color:var(--er-tp);font-size:14px;font-variant-numeric:tabular-nums}
.er-rv .er-ok,.er-rv .er-ko{font-weight:700}
.er-ratios-a{appearance:none;margin-left:auto;display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:2px 0;color:var(--er-brand);font:700 12.5px/1.2 var(--font-family);cursor:pointer;white-space:nowrap}
.er-ratios-a:hover{text-decoration:underline}
.er-ratios-a:focus-visible{outline:2px solid var(--brand-strong);outline-offset:2px;border-radius:4px}
.er-calc{margin-top:12px;border-radius:10px;border:1px solid var(--er-line);background:color-mix(in srgb,var(--er-tp) 2%,transparent)}
.er-calc summary{cursor:pointer;padding:10px 14px;font-size:12.5px;font-weight:700;color:var(--er-t2)}
.er-calc summary:focus-visible{outline:2px solid var(--brand-strong);outline-offset:-2px;border-radius:10px}
.er-calc ul{margin:0;padding:0 14px 12px 32px;font-size:12px;line-height:1.55;color:var(--er-t2)}
.er-calc li+li{margin-top:3px}
.er-calc li b{color:var(--er-tp)}

/* ── Page « Plan de financement » du dossier de financement (parcours live) ── */
.er-page .er-t{font-size:11px}
.er-page{--er-lc-w:230px;display:flex;flex-direction:column;gap:4px;min-width:0}
.er-p-eye{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--er-brand)}
.er-p-titre{margin:2px 0 0;font:800 20px/1.25 var(--font-family);letter-spacing:-.01em;color:var(--er-tp)}
.er-p-sub{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--er-t2)}
.er-p-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;margin-top:10px;align-items:start}
.er-p-grid>.er-tw{margin-top:0}
.er-page .er-t th,.er-page .er-t td{height:22px;padding:0 8px}
.er-page .er-t thead th{height:26px;font-size:10.5px}
.er-page .er-t tr.er-sec>*{height:20px;font-size:9.5px}
.er-page .er-t tr.er-dont>*{height:19px;font-size:10px}
.er-page .er-t tr.er-dont>th{padding-left:20px}
.er-page .er-t tr.er-ctl>*{height:20px;font-size:9.5px}
.er-page .er-t tr.er-var>*{height:24px}
.er-p-side{display:flex;flex-direction:column;gap:9px;min-width:0}
.er-p-msg{padding:9px 11px;border-radius:8px;background:color-mix(in srgb,var(--brand) 9%,transparent);border-left:3px solid var(--brand);font-size:11.5px;line-height:1.5}
.er-p-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.er-p-figs>div{padding:7px 8px;border-radius:7px;border:1px solid var(--er-line);min-width:0}
.er-p-figs small{display:block;font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--er-mut)}
.er-p-figs b{display:block;font-size:15px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.er-p-figs span{display:block;font-size:9.5px;color:var(--er-t2)}
.er-page .er-chart{margin-top:0}
.er-page .er-leg{font-size:10px;gap:4px 10px}
.er-page .er-leg i{width:8px;height:8px}
.er-p-ratio{margin:0;padding:8px 10px;border-radius:7px;border:1px dashed var(--er-line-2);font-size:10.5px;line-height:1.45;color:var(--er-t2)}
.er-p-ratio b{color:var(--er-tp)}
.er-p-foot{margin:10px 0 0;padding-top:7px;border-top:1px solid var(--er-line);font-size:9.5px;line-height:1.4;color:var(--er-mut)}

/* ── Écrans étroits : les requêtes suivent .er-root (conteneur) ── */
@container (max-width:900px){
  .er-p-grid{grid-template-columns:minmax(0,1fr)}
  .er-p-side{order:-1}
}
@container (max-width:640px){
  .er-svg-l{display:none}
  .er-svg-e{display:block}
  .er-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .er-ctr{margin-left:0;width:100%;justify-content:space-between}
}
@container (max-width:560px){
  /* Téléphone : le tableau défile DANS son cadre, dans les deux sens ; libellés courts sur deux lignes ; ombre portée de la
     colonne figée. Fonds toujours pleins (aucune transparence, aucune opacité). */
  .er-root{--er-lc-w:136px}
  .er-card{padding:12px}
  .er-tw{max-height:470px;margin-left:-4px;margin-right:-4px}
  .er-t{font-size:12px;min-width:calc(var(--er-lc-w) + var(--n,6) * 66px)}
  .er-t th,.er-t td{padding:0 8px}
  .er-t .er-lc{line-height:1.2;padding-top:4px;padding-bottom:4px;box-shadow:1px 0 0 var(--er-line-2),8px 0 10px -8px rgba(var(--shadow-col,0,0,0),.6)}
  .er-t tr.er-pret>th.er-lc{box-shadow:inset 3px 0 0 var(--er-emp),1px 0 0 var(--er-line-2),8px 0 10px -8px rgba(var(--shadow-col,0,0,0),.6)}
  .er-t tr.er-dont>th{padding-left:16px}
  .er-l-long{display:none}
  .er-l-court{display:inline}
  .er-ratios-a{margin-left:0}
  .er-page .er-tw{max-height:460px}
  .er-page .er-t{font-size:11.5px}
  .er-page .er-t th,.er-page .er-t td{height:26px}
}