/* Composants repris À L'IDENTIQUE de CapZéro (ACV carottes/rail, Bilan strates, Compliance kanban).
   Utilise les variables de app.css. Ne pas mettre de hex en dur (dark mode). */

/* ── Banner total / KPI ─────────────────────────────────────────── */
.dhead{display:flex;justify-content:space-between;align-items:flex-end;margin:4px 0 20px;gap:18px;flex-wrap:wrap}
.dhead h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;line-height:1.05;margin:0}
.dhead h1 small{display:block;font-family:'Onest',sans-serif;font-size:.8rem;color:var(--tx2);font-weight:400;letter-spacing:0;margin-top:6px}
.dtotal{text-align:right}
.dtotal .v{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:clamp(28px,3.2vw,42px);letter-spacing:-.03em;line-height:1}
.dtotal .u{font-size:.7rem;color:var(--tx2);margin-top:3px}
.kpi-badge{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 10px;font-size:.72rem;font-weight:700}
.kpi-badge.ok{background:color-mix(in srgb,var(--p) 16%,transparent);color:var(--ps)}
.kpi-badge.warn{background:color-mix(in srgb,var(--w) 18%,transparent);color:color-mix(in srgb,var(--w) 78%,#000 22%)}
.kpi-badge.info{background:color-mix(in srgb,var(--i) 16%,transparent);color:color-mix(in srgb,var(--i) 82%,var(--tx2) 18%)}
.kpi-badge.bad{background:color-mix(in srgb,var(--d) 16%,transparent);color:color-mix(in srgb,var(--d) 85%,#000 15%)}

/* ── basemeta tiles ─────────────────────────────────────────────── */
.basemeta{display:flex;gap:14px;flex-wrap:wrap}
.bm{background:var(--srf);border:1px solid var(--ln);border-radius:12px;padding:14px 20px;flex:1;min-width:168px;box-shadow:var(--shadow-soft)}
.bm .l{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);font-weight:600}
.bm .v{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.22rem;margin-top:6px}
.bm .v small{font-size:.66rem;color:var(--tx3);font-weight:500}
.bm .bs{font-size:.72rem;color:var(--tx2);margin-top:3px}
.g2c{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:820px){.g2c{grid-template-columns:1fr}}
.mb20{margin-bottom:20px}.mb16{margin-bottom:16px}
.cz-card{background:var(--srf);border:1px solid var(--ln);border-radius:var(--r-md);box-shadow:var(--shadow-soft);padding:18px}
.cz-card h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.02rem;margin:0 0 12px}
.cz-card h3 .h3-note{float:right;font-family:'Onest',sans-serif;font-size:.72rem;color:var(--tx3);font-weight:500}
.params-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 16px;align-items:end}
.params-grid .field{margin-bottom:4px}
.params-grid .params-save{align-self:end;padding-bottom:2px}
@media (max-width:640px){.params-grid{grid-template-columns:1fr 1fr}}
.nowrap{white-space:nowrap}
.note-line{font-style:italic;max-width:300px;white-space:normal}
.yoy-badge{display:inline-block;margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:999px}
.yoy-badge.down{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.yoy-badge.up{background:color-mix(in srgb,var(--d) 15%,transparent);color:var(--d)}
.trend-up{color:var(--d);font-weight:600}
.trend-dn{color:var(--ok);font-weight:600}
/* Benchmark sectoriel : axe de positionnement horizontal (jamais de jauge circulaire) */
.bench-row{display:grid;grid-template-columns:120px 1fr 130px;gap:16px;align-items:center;margin:18px 0}
.bench-lbl{font-size:.78rem;color:var(--tx2);font-weight:600}
.bench-track{position:relative;height:8px;border-radius:999px;margin-top:12px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ok) 45%,var(--srf3)),color-mix(in srgb,var(--w) 40%,var(--srf3)),color-mix(in srgb,var(--d) 50%,var(--srf3)))}
.bench-tick{position:absolute;top:-3px;width:2px;height:14px;background:var(--tx3);opacity:.5;transform:translateX(-1px)}
.bench-mark{position:absolute;transform:translateX(-50%)}
.bench-mark.you{top:-12px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--p);z-index:2}
.bench-mark.sector{top:-5px;width:3px;height:18px;border-radius:2px;background:var(--tx2);opacity:.85}
.bench-scale{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--tx3);margin-top:8px}
.bench-you{text-align:right;font-family:'IBM Plex Mono',monospace;font-weight:600}
.bench-legend{display:flex;align-items:center;gap:8px;margin-top:6px}
.bench-legend .lg{display:inline-block;vertical-align:middle}
.bench-legend .lg.you{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--p);margin-left:6px}
.bench-legend .lg.sector{width:3px;height:12px;background:var(--tx2);border-radius:2px;margin-left:10px}
.bench-note{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.bench-scope{margin-top:12px}
.bench-scope-t{margin-bottom:6px}
.bench-all{margin-top:12px}
.bench-all summary{cursor:pointer;font-size:.82rem;color:var(--p);font-weight:600}
.row-cur td{background:var(--pp)!important;font-weight:600}
@media (max-width:640px){.bench-row{grid-template-columns:1fr;gap:6px}.bench-you{text-align:left}}
/* Ratios personnalisés : cases d'exclusion de catégories */
.ratio-excl{display:flex;flex-wrap:wrap;gap:8px}
.excl-chk{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:500;background:var(--srf2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}
.excl-chk input{margin:0}
.bilan-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bilan-bar-l{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);font-weight:600}

/* ── Bilan : strates dépliables ─────────────────────────────────── */
.strates-wrap{border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.strate-row{position:relative;color:var(--surface-mint);cursor:pointer;transition:filter .25s}
.strate-row:hover{filter:brightness(1.07)}
.strate-row+.strate-row{border-top:1px solid rgba(246,249,247,.25)}
.strate-row.s1{background:linear-gradient(173deg,var(--scope1),color-mix(in srgb,var(--scope1) 60%,#000))}
.strate-row.s2{background:linear-gradient(173deg,var(--scope2),color-mix(in srgb,var(--scope2) 60%,#000))}
.strate-row.s3{background:linear-gradient(170deg,var(--scope3),color-mix(in srgb,var(--scope3) 55%,#000))}
.strate-row .st-face{display:grid;grid-template-columns:92px 1fr auto auto;gap:20px;align-items:center;padding:12px 26px}
.strate-row .st-tag{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.14em;opacity:.75}
.strate-row .st-nm{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.08rem}
.strate-row .st-nm small{display:block;font-family:'Onest',sans-serif;font-weight:400;font-size:.73rem;opacity:.78;margin-top:2px}
.strate-row .st-val{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.3rem;text-align:right}
.strate-row .st-val small{display:block;font-size:.62rem;opacity:.7;font-weight:500}
.strate-row .st-pct{font-family:'IBM Plex Mono',monospace;font-size:.72rem;border:1px solid rgba(246,249,247,.4);border-radius:999px;padding:4px 11px}
.strate-row .st-delta{position:absolute;right:26px;top:8px;font-family:'IBM Plex Mono',monospace;font-size:.64rem;opacity:.8}
.strate-row .st-chev{position:absolute;right:26px;bottom:7px;opacity:.55;font-size:.6rem;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em}
.strate-row .st-detail{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1);background:rgba(0,0,0,.16)}
.strate-row.open .st-detail{max-height:360px}
.strate-row .st-inner{padding:14px 26px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:9px}
.strate-row .st-cat{background:rgba(246,249,247,.1);border:1px solid rgba(246,249,247,.16);border-radius:9px;padding:10px 12px}
.strate-row .st-cat .n{font-size:.72rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strate-row .st-cat .v{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.9rem;margin-top:2px}
.strate-row .st-cat .b{height:3px;border-radius:2px;background:rgba(246,249,247,.18);margin-top:7px;overflow:hidden}
.strate-row .st-cat .b i{display:block;height:100%;background:var(--surface-mint);opacity:.85;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.strate-row.open .st-cat .b i{transform:scaleX(1)}

/* ── Bilan : trajectoire empilée (compacte, réduite pour cohabiter avec les infographies) ── */
.traj{display:flex;align-items:flex-end;gap:13px;height:116px;padding-top:4px}
.tcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%;cursor:pointer}
.tcol .bstack{width:100%;max-width:44px;border-radius:5px 5px 0 0;overflow:hidden;display:flex;flex-direction:column;transition:filter .2s}
.tcol:hover .bstack{filter:brightness(1.12)}
.tcol .bs{width:100%}
.tcol .bs1{background:var(--scope1)}.tcol .bs2{background:var(--scope2)}.tcol .bs3{background:var(--scope3)}
.tcol .y{font-size:.68rem;color:var(--tx2);font-weight:600}
.tcol.cur .y{color:var(--ps);font-weight:700}
.tcol .tv{font-family:'IBM Plex Mono',monospace;font-size:.66rem;font-weight:600}
.traj-empty{color:var(--tx3);font-size:.8rem;padding:24px 0}

/* ── Bilan : infographies de synthèse (Top postes · Répartition · Indicateurs clés) ──
   Inspirées du « Row 3 » du dashboard CarbonLab (barres horizontales, jamais de donut). */
.viz-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
.viz-col{display:flex;flex-direction:column;gap:16px}
@media(max-width:820px){.viz-grid{grid-template-columns:1fr}}
/* Top postes : barres horizontales, largeur ∝ valeur, couleur cyclique --g1..--g6 */
.tp-list{display:flex;flex-direction:column;gap:12px}
.tp-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.tp-n{font-size:.82rem;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tp-v{font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:600;white-space:nowrap;flex:none}
.tp-pct{color:var(--tx3);font-size:.72rem;margin-left:7px}
.tp-track{height:9px;border-radius:999px;background:var(--srf3);overflow:hidden}
.tp-track i{display:block;height:100%;border-radius:999px;transform-origin:left;transition:width .5s cubic-bezier(.3,.7,.2,1)}
/* Répartition : couleurs de scope de la barre segmentée + pastilles de légende */
.rp-s1{background:var(--scope1)}.rp-s2{background:var(--scope2)}.rp-s3{background:var(--scope3)}
.seg-legend .rp-p{font-family:'IBM Plex Mono',monospace;color:var(--tx3);font-weight:600;margin-left:5px}
/* Indicateurs clés : tuiles compactes 2×2 (distinctes des tuiles d'intensité .basemeta) */
.kpi-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.km{background:var(--srf2);border:1px solid var(--ln);border-radius:10px;padding:10px 12px}
.km .l{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);font-weight:600}
.km .v{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.12rem;margin-top:4px}
.km .v small{font-size:.6rem;color:var(--tx3);font-weight:500;margin-left:4px}

/* ── scope tags (table) ─────────────────────────────────────────── */
.sctag{font-size:.66rem;font-weight:600;border-radius:6px;padding:2px 8px;font-family:'IBM Plex Mono',monospace}
.sctag.sc1{background:color-mix(in srgb,var(--scope1) 13%,transparent);color:var(--scope1)}
.sctag.sc2{background:color-mix(in srgb,var(--scope2) 16%,transparent);color:color-mix(in srgb,var(--scope2) 70%,#000)}
.sctag.sc3{background:color-mix(in srgb,var(--scope3) 14%,transparent);color:var(--ps)}
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700}
.tag-1{background:color-mix(in srgb,var(--scope1) 18%,transparent);color:color-mix(in srgb,var(--scope1) 80%,#000 20%)}
.tag-2{background:color-mix(in srgb,var(--i) 16%,transparent);color:color-mix(in srgb,var(--i) 82%,var(--tx2) 18%)}

/* ── ACV : liste en cartes (même forme que les cartes de l'onglet Scénarios,
   voir .scen-card plus bas) ─────────────────────────────────────── */
.acv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.prod-card{display:block;color:inherit;text-decoration:none;transition:transform .15s}
.prod-card:hover{text-decoration:none;transform:translateY(-1px)}

/* ── ACV : rail du cycle de vie (détail) ────────────────────────── */
.lc-rail{display:flex;align-items:flex-start;justify-content:space-between;position:relative;padding:18px 8px 8px;margin:4px 0 20px;overflow-x:auto}
.lc-rail::before{content:'';position:absolute;top:34px;left:34px;right:34px;height:2px;background:var(--ln);z-index:0}
.lc-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;min-width:96px;text-align:center}
.lc-node{border-radius:50%;display:grid;place-items:center;color:var(--surface-mint);font-size:.8rem;box-shadow:var(--shadow-soft);transition:transform .2s;position:relative}
.lc-step:hover .lc-node{transform:scale(1.08)}
.lc-node svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.lc-num{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.14em;color:var(--tx3)}
.lc-name{font-size:.72rem;font-weight:600;color:var(--tx2);line-height:1.2}
.lc-val{font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:600}
.lc-pct{font-family:'IBM Plex Mono',monospace;font-size:.64rem;color:var(--tx3)}
.lc-step.empty .lc-node{background:var(--srf3);color:var(--tx3);box-shadow:none}
.lc-step.empty .lc-val{color:var(--tx3)}
.lc-step.clickable{cursor:pointer}
.lc-add{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center;font-size:.5rem;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s;box-shadow:0 0 0 2px var(--srf)}
.lc-step.clickable:hover .lc-add{opacity:1;transform:scale(1)}
.lc-group{margin-bottom:14px}
.lc-ghead{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--r-sm)}
.lc-ghead .lc-gname{font-weight:700;font-size:.86rem}
.lc-ghead .lc-gtot{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--tx2)}
.lc-gempty{margin-top:6px;padding:11px 16px;font-size:.78rem;color:var(--tx3);border:1px dashed var(--ln2);border-radius:var(--r-sm);text-align:center;cursor:pointer;transition:border-color .15s,color .15s}
.lc-gempty:hover{border-color:var(--p);color:var(--p)}
/* Variante non cliquable (étape vide d'un scénario : l'ajout se fait via « + Ajouter ») :
   pas de curseur main ni de changement de couleur au survol. */
.lc-gempty.static{cursor:default}
.lc-gempty.static:hover{border-color:var(--ln2);color:var(--tx3)}

/* ── Compliance : kanban ────────────────────────────────────────── */
.kb-wrap{overflow-x:auto;padding:2px 0 10px}
.kb-board{display:flex;gap:14px;align-items:flex-start;min-width:max-content}
.kb-col{width:286px;flex-shrink:0;display:flex;flex-direction:column}
.kb-head{background:var(--srf2);border:1px solid var(--ln);border-top:3px solid var(--kbc,var(--tx3));border-radius:var(--r-md) var(--r-md) 0 0;padding:12px 14px;display:flex;align-items:center;gap:10px}
.kb-dot{width:9px;height:9px;border-radius:50%;background:var(--kbc,var(--tx3));flex:none}
.kb-name{font-family:'Bricolage Grotesque',sans-serif;font-size:.82rem;font-weight:700;flex:1;line-height:1.2}
.kb-count{font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:600;color:#fff;background:var(--kbc,var(--tx3));border-radius:5px;padding:2px 7px;min-width:24px;text-align:center}
.kb-body{background:var(--srf2);border:1px solid var(--ln);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:80px}
.kb-card{position:relative;background:var(--srf);border:1px solid var(--ln);border-left:3px solid var(--kic,var(--tx3));border-radius:var(--r-sm);padding:11px 12px;cursor:pointer;box-shadow:var(--shadow-soft);transition:box-shadow .18s,transform .18s;overflow:hidden}
.kb-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.kb-card.imp-critical{--kic:var(--d)}.kb-card.imp-high{--kic:var(--w)}.kb-card.imp-medium,.kb-card.imp-low{--kic:var(--tx3)}
.kb-ctop{display:flex;align-items:flex-start;gap:7px;margin-bottom:5px;padding-right:20px}
.kb-ctitle{font-family:'Bricolage Grotesque',sans-serif;font-size:.82rem;font-weight:700;line-height:1.3;flex:1;color:var(--tx)}
.kb-cimp{font-size:.56rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:4px;white-space:nowrap;flex:none}
.kb-cimp.imp-critical{background:color-mix(in srgb,var(--d) 13%,transparent);color:var(--d)}
.kb-cimp.imp-high{background:color-mix(in srgb,var(--w) 14%,transparent);color:var(--w)}
.kb-cimp.imp-medium,.kb-cimp.imp-low{background:color-mix(in srgb,var(--tx3) 16%,transparent);color:var(--tx2)}
.kb-csum{font-size:.72rem;color:var(--tx2);line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kb-cmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kb-cdl{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--tx3);display:flex;align-items:center;gap:4px}
.kb-ctype{font-size:.58rem;color:var(--tx3);background:var(--srf2);border:1px solid var(--ln);border-radius:4px;padding:1px 6px;margin-left:auto}
.kb-cty2{font-size:.62rem;color:var(--tx3)}
.kb-star{position:absolute;top:8px;right:8px;width:22px;height:22px;border:none;background:none;color:var(--tx3);cursor:pointer;opacity:.5;transition:opacity .15s,color .15s;padding:0;font-size:.9rem;line-height:1}
.kb-star:hover,.kb-star.on{opacity:1;color:var(--w)}
.kb-empty{text-align:center;padding:18px 10px;color:var(--tx3);font-size:.74rem}
.kb-dismiss{margin-top:9px;width:100%;text-align:center;background:none;border:1px dashed var(--ln);border-radius:var(--r-xs);color:var(--tx3);font-family:inherit;font-size:.66rem;font-weight:600;padding:4px 6px;cursor:pointer;transition:.15s}
.kb-dismiss:hover{border-color:var(--d);border-style:solid;color:var(--d)}

/* ── Modale « Ajouter une émission » (UX hybride, calquée sur CapZéro) ──────── */
.modal.mae-modal{max-width:920px}
.card-head-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.card-head-row h3{margin:0}
.mae-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.mae-hero{text-align:center;padding:6px 0 2px}
.mae-hero h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.15rem;margin:0 0 4px}
.mae-hero p{font-size:.82rem;color:var(--tx3);margin:0}
.mae-search{display:flex;align-items:center;gap:10px;background:var(--srf2);border:2px solid var(--ln);border-radius:16px;padding:12px 18px;margin:14px auto 0;max-width:560px;transition:border-color .2s,background .2s,box-shadow .2s}
.mae-search:focus-within{border-color:var(--p);background:var(--srf);box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 12%,transparent)}
.mae-search svg{width:19px;height:19px;color:var(--tx3);flex-shrink:0}
.mae-search input{border:none;background:transparent;outline:none;flex:1;font-size:1rem;font-weight:500;color:var(--tx);font-family:inherit}
.mae-search input::placeholder{color:var(--tx3)}
/* Filtre « par pays » sous la recherche de facteurs (ACV + bilan) */
.mae-filter-country{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px auto 0;max-width:560px;font-size:.85rem;color:var(--tx3)}
.mae-filter-country select{min-width:210px;padding:7px 12px;border-radius:10px;border:1px solid var(--ln);background:var(--srf);color:var(--tx);font-family:inherit;font-size:.9rem}
/* Popup ACV côté maison : carotte + surlignage « rouge très pâle » de ce qui a changé entre versions.
   La modale est LARGE (jusqu'à 1120 px) parce qu'elle empile quatre tableaux, dont le détail des
   lignes en 5 colonnes et l'historique des versions en 5 colonnes : à 500 px ils débordaient
   horizontalement dans leur `.table-wrap` et il fallait scroller dans deux directions pour lire
   une ligne. `width:min(96vw,1120px)` bat le `width:90%` de `.modal.cz` (même spécificité, règle
   plus tardive) et tient sur un portable comme sur un grand écran. */
.modal.cz.acvm-modal{width:min(96vw,1120px);max-width:1120px;max-height:90vh;overflow:auto}
.acvm-carotte{margin:14px 0 6px;border-radius:10px}
.diff-changed > td{background:color-mix(in srgb,var(--d) 9%,transparent)}
.diff-changed > td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--d) 45%,transparent)}
.diff-tag{display:inline-block;margin-left:6px;font-size:.66rem;font-weight:700;color:var(--d);background:color-mix(in srgb,var(--d) 14%,transparent);padding:1px 7px;border-radius:100px;vertical-align:1px}
.acvm-diff-note{margin:14px 0 4px;padding:10px 14px;border-radius:10px;font-size:.86rem;background:color-mix(in srgb,var(--d) 8%,transparent);border:1px solid color-mix(in srgb,var(--d) 22%,transparent)}

.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.theme-card{border:1px solid var(--ln);border-radius:16px;padding:18px 14px;cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s;background:var(--srf);display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;position:relative;overflow:hidden;font-family:inherit;width:100%}
.theme-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--p)}
.theme-card:hover{border-color:var(--p);transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--p) 12%,transparent)}
.theme-card .tc-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--p) 12%,transparent);color:var(--p)}
.theme-card .tc-ic .tc-svg{width:22px;height:22px}
.theme-card .tc-n{font-weight:700;font-size:.84rem;color:var(--tx)}
.theme-card .tc-c{font-size:.7rem;color:var(--tx3)}

.mae-crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.mae-crumb-btn{border:1px solid var(--ln);background:var(--srf);color:var(--p);font-weight:600;font-size:.8rem;padding:4px 10px;border-radius:8px;cursor:pointer;font-family:inherit}
.mae-crumb-btn:hover{background:var(--pp)}
.mae-crumb-cur{font-size:.82rem;font-weight:700;color:var(--tx)}
.mae-crumb-sep{color:var(--tx3);font-size:.72rem}

.sub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.sub-card{border:1px solid var(--ln);border-radius:12px;padding:10px 14px;cursor:pointer;transition:border-color .14s,background .14s;background:var(--srf);display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;font-family:inherit;width:100%}
.sub-card:hover{border-color:var(--p);background:var(--pp)}
.sub-card .sc-n{font-weight:600;font-size:.8rem;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-card .sc-c{font-size:.68rem;color:var(--tx3);background:var(--srf3);padding:2px 7px;border-radius:6px;flex-shrink:0}
.mae-divider{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);font-weight:800;padding:6px 0}

.mae-fi-list{max-height:44vh;overflow-y:auto}
.fi{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--ln);border-radius:12px;margin-bottom:6px;background:var(--srf);transition:border-color .14s}
.fi:hover{border-color:var(--p)}
.fi-info{flex:1;min-width:0}
.fi-name{font-weight:600;font-size:.86rem;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:.72rem;color:var(--tx3);margin-top:4px}
.fi-val{font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--p);white-space:nowrap;font-size:.86rem;text-align:right;line-height:1.2}
.fi-val .fi-u{display:block;font-size:.62rem;font-weight:400;color:var(--tx3)}

/* Modale « Ajouter une pièce » = le dashboard « Mes ACV » repris en QUASI PLEIN ÉCRAN : barre
   d'outils (recherche + type + nature) + la grille de cartes du dashboard (.acv-grid /
   .cz-card.scen-card, cartes complètes avec les six barres par étape). La modale est une colonne
   flex ; seule la grille défile, la barre d'outils et le pied restent fixes. */
.modal.cz.asm-add-modal{width:98vw;max-width:98vw;max-height:94vh;display:flex;flex-direction:column}
.asm-add-modal>h3,.asm-add-modal>p{flex:none}
.asm-add-modal #asm-add-form{display:flex;flex-direction:column;min-height:0;flex:1}
.asm-pick-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;align-items:center;flex:none}
.asm-pick-toolbar input[type=search]{flex:1 1 220px;min-width:180px;width:auto;padding:9px 12px;border:1px solid var(--ln);border-radius:10px;background:var(--srf);font-size:.84rem;outline:none;transition:border-color .14s}
.asm-pick-toolbar input[type=search]:focus{border-color:color-mix(in srgb,var(--p) 50%,var(--ln))}
.asm-pick-toolbar select{flex:0 0 auto;width:auto;padding:9px 10px;border:1px solid var(--ln);border-radius:10px;background:var(--srf);font-size:.82rem;color:var(--tx);outline:none}
/* La grille du dashboard, mais défilante et occupant toute la hauteur libre de la modale. */
.asm-pick-grid{flex:1;min-height:0;overflow-y:auto;max-height:none;padding:2px;align-content:start}
/* Les cartes réutilisent .cz-card.scen-card (rendu identique au dashboard) : ici, seulement le
   reset bouton + l'état sélectionné (anneau bronze). */
.asm-card{text-align:left;font-family:inherit;cursor:pointer;width:100%}
.asm-card.sel{border-color:var(--p);box-shadow:0 0 0 2px var(--p)}

/* Bloc « Répartition par étape » (détail chiffré) + « Répartition visuelle » (donut SVG) de la
   fiche ACV : deux colonnes (tableau à gauche, donut + légende à droite), empilées en étroit. */
.rep-card{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.rep-col{min-width:0}
.dl-dot{width:9px;height:9px;border-radius:2px;flex:none;display:inline-block;vertical-align:middle}
/* Donut « Répartition visuelle » (SVG stroke-dasharray) + sa légende. */
.cz-donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.cz-donut{position:relative;width:200px;height:200px;flex:none}
.cz-donut-svg{width:100%;height:100%;display:block;overflow:visible}
.cz-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.cz-donut-center .v{font-weight:700;font-size:1.3rem;color:var(--tx);line-height:1}
.cz-donut-center .u{font-size:.62rem;color:var(--tx3);margin-top:3px;letter-spacing:.02em}
/* Légende en grille : pastille | libellé | % . La 3e colonne aligne tous les % (chiffres
   alignés), juste après le libellé le plus long (pas d'écart repoussé au bord). */
.cz-donut-legend{display:grid;grid-template-columns:auto auto auto;gap:9px 8px;align-items:center;font-size:.78rem;min-width:0}
.dl-row{display:contents}
.dl-name{color:var(--tx2);white-space:nowrap}
.dl-pct{color:var(--tx);font-weight:600;white-space:nowrap;justify-self:end}
/* Histogramme « Répartition par étape » : axe Y = kgCO₂e, axe X = étapes (libellés en légère
   diagonale). SVG à viewBox fixe, responsive en largeur ; overflow visible pour les libellés. */
.rh-svg{width:100%;max-width:430px;height:auto;display:block;margin:6px auto 0;overflow:visible}
.rh-ytick{font-size:8px;fill:var(--tx3);font-family:'IBM Plex Mono',monospace}
.rh-yunit{font-size:8.5px;fill:var(--tx2);font-weight:600}
.rh-xtick{font-size:8px;fill:var(--tx2)}
@media(max-width:760px){.rep-card{grid-template-columns:1fr}}

.mae-pg{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.mae-pg:empty{display:none}
.mae-count{font-size:.74rem;color:var(--tx3);font-family:'IBM Plex Mono',monospace}
.mae-loading{padding:20px;text-align:center;color:var(--tx3);font-size:.82rem}

.scope-sel{display:flex;gap:8px}
.scope-sel-btn{flex:1;padding:10px;border:2px solid var(--ln);border-radius:12px;text-align:center;cursor:pointer;transition:border-color .14s,background .14s;background:var(--srf)}
.scope-sel-btn:hover{border-color:var(--scope-color)}
.scope-sel-btn.active{border-color:var(--scope-color);background:color-mix(in srgb,var(--scope-color) 10%,var(--srf))}
.scope-sel-btn .ss-n{font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center;gap:5px}
.scope-sel-btn .ss-d{font-size:.68rem;color:var(--tx3);margin-top:3px}
.ss-info{border:none;background:transparent;padding:0;cursor:pointer;color:var(--tx3);display:inline-flex;line-height:0}
.ss-info svg{width:13px;height:13px}
.ss-info:hover{color:var(--p)}

.mae-finfo{padding:13px 14px;background:var(--srf2);border-radius:12px;margin-bottom:14px}
.mae-flabel{font-weight:700;font-size:.9rem;color:var(--tx)}
.mae-fmeta{font-size:.76rem;color:var(--tx3);margin-top:4px}
.mae-back{margin-bottom:14px}
.mae-preview{padding:12px;background:var(--pp);border-radius:10px;font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--p);font-size:1.1rem;text-align:center;margin-top:6px}

.si-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:middle}
.si-body{margin:0;font-size:.88rem;line-height:1.55;color:var(--tx2)}

@media (max-width:640px){.theme-grid{grid-template-columns:repeat(2,1fr)}.sub-grid{grid-template-columns:1fr}.scope-sel{flex-direction:column}}

/* ===== Onglets de la fiche ACV (Synthèse / Comparaison / Scénarios / Partage) =====
   Alignés au pixel sur .mtab de CapZéro : font-size .85rem, padding 8px 2px, poids
   500/600, couleur tx2/ps, soulignement 2px, espacement 14px entre onglets. */
.acv-tabs{border-bottom:1px solid var(--ln);margin:0 0 16px}
.acv-tab{display:inline-flex;align-items:center;gap:7px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--tx2);padding:8px 2px;margin-right:14px;border-radius:0;cursor:pointer;font-family:inherit;font-weight:500;font-size:.85rem;text-decoration:none;transition:color .15s,border-color .15s}
.acv-tab:hover{background:transparent;color:var(--tx);text-decoration:none}
.acv-tab.on{background:transparent;color:var(--ps);border-bottom-color:var(--p);font-weight:600}
.tab-badge{font-family:'IBM Plex Mono',monospace;font-size:.66rem;font-weight:700;background:var(--pp);color:var(--p);border-radius:999px;padding:1px 7px;line-height:1.5}
.acv-panel{display:none}
.acv-panel.on{display:block;animation:acvFade .22s ease}
@keyframes acvFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Composants CapZéro de la fiche ACV */
/* Accent bronze du module ACV, calqué sur CapZéro (body[data-view]="acv-new",
   index.html:217-220). ACV = scope 2 dans la charte : on dérive l'accent de --scope2,
   déjà thémé clair/sombre, donc pas de couleur en dur et bascule de thème correcte. */
:root[data-view="acv"]{--p:var(--scope2);--ps:color-mix(in srgb,var(--scope2) 82%,var(--tx));--pp:color-mix(in srgb,var(--scope2) 14%,transparent)}

/* En-tête de carte (templates/index.html:62-63). Utilisée par la fiche ACV, le bilan,
   l'analyse maison et la liste des maisons : ces templates la posaient déjà sans style. */
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.card-t{font-weight:700;font-size:.95rem}

/* Bouton icône carré (templates/index.html:56). Dans un tableau, la référence le réduit à
   28px ET le repasse en inline-flex par un style en ligne : la classe reste sur flex. */
.ib{width:40px;height:40px;border:1px solid var(--ln);border-radius:12px;background:var(--srf);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx2);font-size:.85rem;transition:all .14s}
.ib:hover{border-color:var(--p);color:var(--p)}

/* Pagination (templates/index.html:156-161). */
.pg{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px}
.pg button{width:34px;height:34px;border:1px solid var(--ln);border-radius:10px;background:var(--srf);cursor:pointer;font-size:.78rem;color:var(--tx2);display:inline-flex;align-items:center;justify-content:center}
.pg button:hover{border-color:var(--p);color:var(--p)}
.pg button.a{background:var(--p);color:var(--srf);border-color:var(--p)}
.pg button:disabled{opacity:.35;cursor:not-allowed}
.pg-info{font-size:.78rem;color:var(--tx3)}

/* Champ de modale CapZéro (templates/index.html:168-173). */
.fg{margin-bottom:14px}
.fg label{display:block;font-size:.75rem;font-weight:600;color:var(--tx2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.fg input,.fg select,.fg textarea{width:100%;padding:10px 12px;border:1px solid var(--ln);border-radius:12px;background:var(--srf);font-size:.86rem;outline:none;transition:all .14s}
/* box-shadow:none neutralise le halo global de app.css:137, absent de la référence :
   sans cela le champ cumulerait l'anneau outline et un halo que CapZéro n'a pas. */
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:2px solid color-mix(in srgb,var(--p) 24%,transparent);border-color:color-mix(in srgb,var(--p) 50%,var(--ln));box-shadow:none}
.fg textarea{min-height:70px;resize:vertical}
.mo-ft{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* Modales de la fiche ACV aux valeurs exactes de .mo / .mo-c (templates/index.html:164-166),
   sans toucher aux modales du reste de l'application. */
.modal-bg.cz{background:rgba(7,16,22,.55);padding:16px}
.modal.cz{border:1px solid var(--ln);border-radius:var(--r-md);padding:24px;width:90%;max-width:500px;max-height:85vh;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal.cz.mae-modal{max-width:920px;width:95%;max-height:90vh}

/* Scénarios : carte cliquable, bordure au survol (templates/index.html:2077). */
.scen-card{transition:border-color .15s}
.scen-card:hover{border-color:var(--s)}

/* Fiche scénario : édition à droite, histogramme de comparaison à la pièce principale épinglé
   à gauche (reste visible en scrollant, se recalcule à chaque ajout/modification). */
.acv-panel.scen-synth.on{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
/* Comparaison épinglée du scénario. Deux réglages qui ne sont pas cosmétiques :
   - top:76px dégage l'appbar, elle-même en position:sticky top:0. Avec l'ancien top:14px, le
     titre « Écart avec la pièce principale » glissait SOUS la barre et la carte semblait
     commencer à sa deuxième ligne.
   - max-height + overflow: une carte plus haute que l'écran restait tronquée sans aucun moyen
     d'en voir le bas, puisque c'est la page qui défilait, pas elle. */
.scen-synth .scen-cmp{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto;overscroll-behavior:contain}
.scen-synth .scen-main{min-width:0}
@media (max-width:900px){
  .acv-panel.scen-synth.on{grid-template-columns:1fr}
  .scen-synth .scen-cmp{position:static;max-height:none;overflow:visible}
}

/* ── Menus déroulants natifs à la DA : fond blanc (surface) + typo du projet ──────────────
   appearance:none est indispensable : sinon le widget natif macOS impose SON fond gris et SA
   police, ignorant background/font-family. On applique alors le fond de surface (blanc en clair)
   et la police du corps, avec un chevron custom en image de fond. La liste ouverte reste native
   (options au fond du projet). */
:root{--cz-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a99a3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
select{font-family:inherit;font-size:.84rem;color:var(--tx);background-color:var(--srf);border:1px solid var(--ln);border-radius:10px;padding:9px 34px 9px 12px;appearance:none;-webkit-appearance:none;background-image:var(--cz-arrow);background-repeat:no-repeat;background-position:right 11px center;cursor:pointer;outline:none;transition:border-color .14s}
select:hover{border-color:color-mix(in srgb,var(--p) 35%,var(--ln))}
select:focus{border-color:color-mix(in srgb,var(--p) 50%,var(--ln))}
select option{background-color:var(--srf);color:var(--tx);font-family:inherit}
/* Modales : .fg select hérite déjà du bloc .fg (padding/bordure) ; on ajoute appearance:none +
   le chevron + la place à droite. */
.fg select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:var(--cz-arrow);background-repeat:no-repeat;background-position:right 12px center}

/* ══ Bilan : donut Répartition cliquable + drill-down Scope 3 ═══════════════ */
.donut-seg{transition:stroke-width .15s}
.cz-donut-svg .s3-hot{cursor:pointer}
.cz-donut-svg:hover .s3-hot{stroke-width:15}
.dl-row.s3-legend{cursor:pointer;border-radius:6px;transition:background .12s}
.dl-row.s3-legend:hover{background:color-mix(in srgb,var(--scope3) 12%,transparent)}
.s3-hint{font-size:.6rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--scope3);background:color-mix(in srgb,var(--scope3) 15%,transparent);padding:1px 6px;border-radius:999px;vertical-align:middle}
.s3-drill{overflow:hidden}
.s3-drill-h{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;user-select:none}
.s3-drill-h h3{margin:0}
.s3-drill-tot{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--tx2);white-space:nowrap}
.s3-drill-tot .mono{font-size:1rem;font-weight:700;color:var(--tx)}
.s3-chev{display:inline-block;font-size:1.25rem;line-height:1;color:var(--tx3);transition:transform .18s;transform:rotate(90deg)}
.s3-drill.open .s3-chev{transform:rotate(-90deg)}
.s3-drill-body{max-height:0;opacity:0;overflow:hidden;transition:max-height .32s ease,opacity .2s,margin-top .32s;margin-top:0}
.s3-drill.open .s3-drill-body{max-height:1400px;opacity:1;margin-top:14px}
.s3-code{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.7rem;font-weight:700;color:var(--scope3);background:color-mix(in srgb,var(--scope3) 14%,transparent);padding:1px 6px;border-radius:6px;margin-right:7px}
.s3-badge{display:inline-block;font-size:.72rem;font-weight:600;color:var(--ps);background:color-mix(in srgb,var(--scope3) 13%,transparent);padding:2px 8px;border-radius:999px}
/* Drill-down Scope 3 : liste (15 catégories) à gauche, donut + histogramme à droite
   (colonne de droite = même largeur que la carte « Répartition » du dashboard, 1.35fr / 1fr). */
/* Les deux graphes SOUS la liste, tailles égales (donut | histogramme). */
.s3-graphs-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:center;margin-top:18px}
@media(max-width:860px){.s3-graphs-row{grid-template-columns:1fr}}
.s3-radial{width:100%;max-width:210px;height:auto;display:block;margin:0 auto;overflow:visible}
.s3-radial .s3-rl{transition:stroke-width .12s ease,filter .12s ease;cursor:default}
.s3-radial .s3-rl:hover{stroke-width:12;filter:brightness(1.15)}
.s3-graph-cell{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.cz-donut-md{width:200px;height:200px}
.s3-seg{transition:stroke-width .12s,filter .12s;cursor:default}
.cz-donut-svg .s3-seg:hover{stroke-width:16}
.s3-hist .s3-seg:hover,.s3-stackseg:hover{filter:brightness(1.12)}
.s3-stackwrap{margin-top:22px}
.s3-stack-t{margin-bottom:6px}
.s3-stackbar{display:flex;height:26px;border-radius:8px;overflow:hidden;background:var(--srf3);border:1px solid var(--ln)}
.s3-stackseg{min-width:1px;transition:filter .12s;cursor:default}
.s3-hovername{font-size:.85rem;color:var(--tx);font-weight:600;text-align:center;min-height:1.3em;margin-top:14px}
.s3-hist{width:100%;max-width:400px;height:auto;display:block;overflow:visible}
.s3-hist-full{max-width:100%;margin:8px auto 0}
.s3-hx{font-size:7.5px;fill:var(--tx3);font-family:'IBM Plex Mono',monospace}
.tp-row.zero{opacity:.42}
/* Palette Scope 3 : une teinte distincte par sous-catégorie (3.1 à 3.15), teintes dispersées
   sur la roue chromatique ; luminosité/saturation adaptées au thème via variables tardives. */
:root{--s3sat:54%;--s3lum:46%}
:root[data-theme="dark"]{--s3sat:52%;--s3lum:63%}
:root{
  --s3-1:hsl(210 var(--s3sat) var(--s3lum));  --s3-2:hsl(28 var(--s3sat) var(--s3lum));
  --s3-3:hsl(145 var(--s3sat) var(--s3lum));  --s3-4:hsl(275 var(--s3sat) var(--s3lum));
  --s3-5:hsl(52 var(--s3sat) var(--s3lum));   --s3-6:hsl(330 var(--s3sat) var(--s3lum));
  --s3-7:hsl(188 var(--s3sat) var(--s3lum));  --s3-8:hsl(14 var(--s3sat) var(--s3lum));
  --s3-9:hsl(96 var(--s3sat) var(--s3lum));   --s3-10:hsl(250 var(--s3sat) var(--s3lum));
  --s3-11:hsl(38 var(--s3sat) var(--s3lum));  --s3-12:hsl(300 var(--s3sat) var(--s3lum));
  --s3-13:hsl(168 var(--s3sat) var(--s3lum)); --s3-14:hsl(2 var(--s3sat) var(--s3lum));
  --s3-15:hsl(232 var(--s3sat) var(--s3lum));
}

/* ══ Bilan : trajectoire (histogramme SVG empilé, axe Y gradué) ═════════════ */
.traj-svg{width:100%;max-width:560px;height:auto;display:block;margin:8px auto 2px;overflow:visible}
.tj-ytick{font-size:7.5px;fill:var(--tx3);font-family:'IBM Plex Mono',monospace}
.tj-yunit{font-size:8px;fill:var(--tx3);letter-spacing:.04em}
.tj-total{font-size:9px;font-weight:700;fill:var(--tx2);font-family:'IBM Plex Mono',monospace}
.tj-total.cur{fill:var(--ps)}
.tj-year{font-size:9px;fill:var(--tx2);font-weight:600}
.tj-year.cur{fill:var(--ps);font-weight:700}
.tj-legend{display:flex;gap:16px;justify-content:center;margin-top:2px;font-size:.72rem;color:var(--tx2)}
.tj-legend .it{display:inline-flex;align-items:center;gap:6px}
.tj-legend .dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.tj-col-link{cursor:pointer}
.tj-col-link .tj-hit{transition:fill .12s}
.tj-col-link:hover .tj-hit{fill:color-mix(in srgb,var(--p) 7%,transparent)}

/* ══ Section « Bientôt disponible » (ex. benchmark en attente) ══════════════ */
.soon-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.soon-h h3{margin:0}
.soon-badge{font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--ps);background:color-mix(in srgb,var(--p) 12%,transparent);border:1px solid color-mix(in srgb,var(--p) 22%,var(--ln));padding:3px 11px;border-radius:999px;white-space:nowrap}
.soon-card p{margin:8px 0 0}

/* Lignes « Évolution des émissions » cliquables (ouvrent le bilan de l'année). */
.evo-row{cursor:pointer;transition:background .12s}
.evo-row:hover{background:color-mix(in srgb,var(--p) 6%,transparent)}

/* Rappel du scope + sous-catégorie 3.x choisis (étape « quantité » de la modale d'ajout). */
.mae-recap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 12px}
.mae-recap-tag{font-size:.78rem;font-weight:700;padding:3px 11px;border-radius:999px}
.mae-recap-tag.sc1{color:var(--scope1);background:color-mix(in srgb,var(--scope1) 13%,transparent)}
.mae-recap-tag.sc2{color:color-mix(in srgb,var(--scope2) 72%,var(--tx));background:color-mix(in srgb,var(--scope2) 16%,transparent)}
.mae-recap-tag.sc3{color:var(--ps);background:color-mix(in srgb,var(--scope3) 14%,transparent)}
.mae-recap-s3{font-size:.82rem;color:var(--tx2);font-weight:600}

/* Nouveau bilan : choix « à zéro » / « copier un bilan ». */
.nb-choice{display:flex;gap:16px;flex-wrap:wrap;margin-top:2px}
.nb-opt{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;color:var(--tx);cursor:pointer}
.nb-opt input{accent-color:var(--p)}

/* Compliance : filtre par pays (sélecteur persistant). */
.cmp-pays{display:flex;align-items:center;gap:10px}
.cmp-pays label{font-size:.82rem;color:var(--tx2);font-weight:600}
.cmp-pays select{min-width:210px}

/* ══ Bilan : registre de saisie groupé par scope + zone de suppression ═════ */
.reg-scope{margin-top:18px}
.reg-scope:first-of-type{margin-top:10px}
.reg-scope-h{display:flex;align-items:center;gap:11px;margin-bottom:6px;padding-bottom:7px;border-bottom:1px solid var(--ln)}
.reg-scope-title{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;padding:3px 13px;border-radius:999px}
.reg-scope-title.sc1{color:var(--scope1);background:color-mix(in srgb,var(--scope1) 13%,transparent)}
.reg-scope-title.sc2{color:color-mix(in srgb,var(--scope2) 72%,var(--tx));background:color-mix(in srgb,var(--scope2) 16%,transparent)}
.reg-scope-title.sc3{color:var(--ps);background:color-mix(in srgb,var(--scope3) 14%,transparent)}
.reg-scope-nm{font-size:.82rem;color:var(--tx2);font-weight:600}
.reg-scope-t{margin-left:auto;font-size:.8rem;color:var(--tx3)}
.danger-zone{border-color:color-mix(in srgb,var(--d) 28%,var(--ln))}
.dz-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ══ Pastille de notification (badge rouge, style iPhone) ═══════════════════ */
.notif-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--notif); color:var(--notif-fg);
  font:700 11px/1 var(--font-mono, monospace); letter-spacing:.2px;
}
/* Pastille d'angle sur une tuile/carte positionnée (parent en position:relative). */
.notif-anchor{ position:relative; }
.notif-anchor > .notif-badge{ position:absolute; top:10px; right:10px; box-shadow:0 0 0 2px var(--srf); }
.notif-badge.inline{ margin-left:6px; vertical-align:middle; }

/* Marqueur "Nouveau" sur une carte de Compliance non vue depuis la dernière visite du module
   (mark_compliance_seen, cf. app/routers/fournisseur/compliance.py). */
.cz-new{ display:inline-block; padding:1px 7px; border-radius:6px; font:700 10px/1.4 var(--font-mono,monospace);
  text-transform:uppercase; letter-spacing:.4px; background:var(--notif); color:var(--notif-fg); }

/* ══ Fil de communication maison<->fournisseur (Task 8) ═════════════════════
   Bulles alignées selon l'émetteur : les miennes à droite (.mine), celles
   de l'autre partie à gauche. Consommé par fournisseur/maison_detail.html
   et maison/fournisseur_detail.html (même relation, deux points de vue). */
.chat-thread{ display:flex; flex-direction:column; gap:10px; max-height:420px; overflow-y:auto; padding:2px; }
.chat-msg{ max-width:78%; padding:9px 13px; border-radius:var(--r-md); background:var(--srf2); border:1px solid var(--ln); }
.chat-msg.mine{ align-self:flex-end; background:var(--pp); border-color:transparent; }
.chat-meta{ margin-bottom:3px; }
.chat-body{ white-space:pre-wrap; word-break:break-word; }
.chat-form{ display:flex; gap:10px; align-items:flex-end; margin-top:14px; padding-top:14px; border-top:1px solid var(--ln); }
.chat-form textarea{ flex:1; min-height:44px; max-height:160px; resize:vertical; font-family:inherit; }

/* ── Carte scope 3.1 : choroplèthe Europe + bulle Terre (hors Europe) ────────── */
:root[data-theme="bright"]{ --eu-empty:#e6edf1; --eu-stroke:#f7fafb; }
:root[data-theme="dark"]{ --eu-empty:#28353d; --eu-stroke:#132029; }
.eu-wrap{ position:relative; max-width:600px; margin:8px auto 0; }
.eu-map{ width:100%; height:auto; display:block; }
.eu-map .euc{ fill:var(--eu-empty); stroke:var(--eu-stroke); stroke-width:.7; stroke-linejoin:round; transition:fill .25s ease, stroke .12s; }
.eu-map .euc:hover{ stroke:var(--brand); stroke-width:1.5; }
.eu-map .euc.has{ cursor:pointer; }
.eu-map .euc.has:hover{ stroke:var(--brand); stroke-width:1.8; filter:brightness(1.06); }
.eu-lg[data-cc]{ cursor:pointer; }
.eu-lg[data-cc]:hover{ text-decoration:underline; }
.globe-bubble{ position:absolute; right:1%; bottom:3%; width:96px; height:96px; border-radius:50%; border:0; cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; color:#fff;
  background:radial-gradient(circle at 34% 30%, #3a7fa1 0%, #1B4965 55%, #10303f 100%);
  box-shadow:0 6px 20px rgba(16,48,63,.38), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .15s ease, box-shadow .15s ease; }
.globe-bubble:hover{ transform:scale(1.06); box-shadow:0 10px 26px rgba(16,48,63,.5); }
.globe-bubble svg{ width:38px; height:38px; fill:none; stroke:rgba(255,255,255,.9); stroke-width:1.2; }
.globe-bubble .globe-n{ font-weight:800; font-size:1rem; line-height:1; margin-top:2px; }
.globe-bubble .globe-lbl{ font-size:.58rem; letter-spacing:.02em; opacity:.85; text-transform:uppercase; }
.eu-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; justify-content:center; }
.eu-lg{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; }
.eu-sw{ width:13px; height:13px; border-radius:3px; background:var(--eu-empty); border:1px solid var(--eu-stroke); flex:none; }
@media (max-width:560px){ .globe-bubble{ width:74px; height:74px; } .globe-bubble svg{ width:28px; height:28px; } }

/* ── Pyramide de qualité des données (entonnoir centré, largeur = part des émissions) ───────── */
.pyr{ display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:8px; }
.pyr-tier{ display:flex; flex-direction:column; align-items:center; width:100%; }
.pyr-bar{ height:34px; min-width:10px; max-width:100%; border-radius:7px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.86rem; font-variant-numeric:tabular-nums; box-shadow:0 1px 4px rgba(0,0,0,.14); transition:width .45s ease; }
.pyr-lbl{ margin-top:4px; font-size:.84rem; text-align:center; }
.pyr-bar.q-primaire{ background:var(--ok); }
.pyr-bar.q-questionnaire{ background:var(--w); }
.pyr-bar.q-acv_hypothese{ background:var(--scope2); }
.pyr-bar.q-spend{ background:#94a3ac; }

/* Réponse de questionnaire dépliable (fiche fournisseur côté maison) */
.q-full{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.q-full > summary{ cursor:pointer; font-weight:600; font-size:.85rem; color:var(--brand); list-style:none; }
.q-full > summary::-webkit-details-marker{ display:none; }
.q-full > summary::before{ content:"▸ "; }
.q-full[open] > summary::before{ content:"▾ "; }

/* Builder de questionnaire : questions groupées par rubrique + options avancées repliées */
.qb-group{ margin-bottom:16px; }
.qb-poste{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tx3); margin:0 0 4px; }
.qb-q{ display:flex; align-items:flex-start; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line); }
.qb-q:last-child{ border-bottom:0; }
.qb-q-main{ flex:1; min-width:0; }
.qb-q-lib{ font-weight:600; }
.qb-req{ color:var(--d); font-weight:700; }
.qb-q-meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:3px; }
.badge.sm{ font-size:.68rem; padding:1px 7px; }
.qb-adv{ margin-top:10px; border-top:1px solid var(--line); padding-top:10px; }
.qb-adv > summary{ cursor:pointer; font-weight:600; font-size:.85rem; color:var(--brand); }