/* ============================================================
   CLIMATE OFFICE — habillage applicatif au-dessus de tokens.css
   ============================================================
   Ne redéfinit aucune couleur : tout passe par les variables posées
   dans tokens.css (--ink, --body, --muted, --accent, --surface,
   --border, --card-bg, --field-bg…). Ce fichier ajoute seulement les
   composants que la bibliothèque Signal Nocturne n'avait pas encore
   spécifiés (cf. tokens.css §10 : "les composants plus spécifiques...
   se spécifieront au fil des vrais écrans de Climate Office") :
   coquille app (sidebar + topbar), tuiles de stats, worklist
   d'arbitrage, jauge d'incertitude/couverture, dropzone d'import,
   stepper, infobulles.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--pp-font-body);-webkit-font-smoothing:antialiased;background:var(--bg-solid);background-image:var(--bg-glow);background-attachment:fixed;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;}
::selection{background:var(--pp-magenta);color:#fff;}

/* ============ COQUILLE APPLICATIVE ============ */
.app-shell{display:flex;min-height:100vh;}

.sidebar{
  width:272px;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:1.6rem;padding:1.4rem 1.1rem 2rem;
  background:var(--surface);border-right:1px solid var(--border);backdrop-filter:var(--panel-blur,none);
}
.sidebar-brand{display:flex;align-items:center;gap:.6rem;padding:.4rem .5rem .9rem;border-bottom:1px solid var(--border);}
.sidebar-brand .chili{width:20px;height:20px;color:var(--pp-magenta);}
.sidebar-brand .name{font-family:var(--pp-font-heading);font-weight:800;font-size:.86rem;color:var(--ink);line-height:1.15;}
.sidebar-brand .space-badge{margin-top:.15rem;}

.nav-group{display:flex;flex-direction:column;gap:.15rem;}
.nav-group-label{font-family:var(--pp-font-heading);font-weight:700;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.3rem .6rem;margin-top:.4rem;}
.nav-item{display:flex;align-items:center;gap:.65rem;padding:.55rem .65rem;border-radius:10px;font-family:var(--pp-font-heading);font-weight:600;font-size:.81rem;color:var(--body);transition:background .12s ease,color .12s ease;}
.nav-item svg{width:16px;height:16px;flex:none;opacity:.8;}
.nav-item:hover{background:color-mix(in srgb, var(--accent) 10%, transparent);color:var(--ink);}
.nav-item.current{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--ink);}
.nav-item.current svg{opacity:1;color:var(--accent);}
.nav-item .nc{margin-left:auto;font-size:.66rem;font-weight:700;color:var(--muted);background:var(--field-bg);border-radius:999px;padding:.05rem .4rem;}

.sidebar-foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:.6rem;}
.sidebar-foot .avatar{width:32px;height:32px;border-radius:50%;background:var(--pp-gradient);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--pp-font-heading);font-weight:700;font-size:.72rem;}
.sidebar-foot .who{min-width:0;}
.sidebar-foot .who .n{font-family:var(--pp-font-heading);font-weight:700;font-size:.78rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-foot .who .r{font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.main{flex:1;min-width:0;padding:1.6rem 2.4rem 5rem;max-width:1360px;}

.main-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap;}
.crumbs{font-family:var(--pp-font-heading);font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--ink);}
.crumbs .sep{opacity:.5;}
.crumbs .current{color:var(--ink);font-weight:700;}
.topbar-actions{display:flex;align-items:center;gap:.7rem;}

.page-head{margin-bottom:1.6rem;}
.page-head h1{font-family:var(--pp-font-display);font-weight:900;color:var(--ink);font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.15;}
.page-head p{font-family:var(--pp-font-body);color:var(--muted);font-size:.9rem;margin-top:.4rem;max-width:64ch;}
.page-head .head-actions{display:flex;gap:.7rem;margin-top:1.1rem;flex-wrap:wrap;}

/* ============ ESPACE (badge de contexte cabinet/client) ============ */
.space-badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--pp-font-heading);font-weight:700;font-size:.64rem;letter-spacing:.03em;padding:.22rem .6rem;border-radius:999px;}
.space-badge.cabinet{background:var(--badge-purpose-bg);color:var(--badge-text-purpose,var(--badge-text));}
.space-badge.client{background:var(--badge-planet-bg);color:var(--badge-text-planet,var(--badge-text));}
.space-badge .bdot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* ============ GRILLES & TUILES DE STATS ============ */
.grid{display:grid;gap:1.1rem;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1100px){.grid.cols-4{grid-template-columns:repeat(2,1fr);}.grid.cols-3{grid-template-columns:repeat(2,1fr);}}

.stat-tile{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--pp-radius-card);padding:1.3rem 1.4rem;box-shadow:var(--card-shadow,none);backdrop-filter:var(--panel-blur,none);}
.stat-tile .label{font-family:var(--pp-font-heading);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.stat-tile .value{font-family:var(--pp-font-display);font-weight:900;font-size:1.7rem;color:var(--ink);margin-top:.4rem;}
.stat-tile .delta{font-family:var(--pp-font-heading);font-weight:700;font-size:.74rem;margin-top:.3rem;display:inline-flex;align-items:center;gap:.25rem;}
.stat-tile .delta.up{color:var(--badge-text-profit,#c0576a);}
.stat-tile .delta.down{color:var(--badge-text-planet,#4e9a45);}

/* ============ JAUGES (couverture worklist / incertitude) ============ */
.gauge{display:flex;flex-direction:column;gap:.35rem;}
.gauge .gauge-top{display:flex;justify-content:space-between;font-family:var(--pp-font-heading);font-size:.72rem;color:var(--muted);}
.gauge .gauge-top b{color:var(--ink);}
.gauge-track{height:8px;border-radius:999px;background:var(--field-bg);border:1px solid var(--field-border);overflow:hidden;}
.gauge-fill{height:100%;border-radius:999px;background:var(--pp-gradient);}
.gauge-fill.solid{background:var(--pp-magenta);}

/* ============ WORKLIST D'ARBITRAGE ============ */
.worklist{display:flex;flex-direction:column;gap:.6rem;}
.wl-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:1rem;background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:.9rem 1.1rem;}
.wl-row .wl-main{min-width:0;}
.wl-row .wl-title{font-family:var(--pp-font-heading);font-weight:700;font-size:.85rem;color:var(--ink);}
.wl-row .wl-sub{font-family:var(--pp-font-body);font-size:.76rem;color:var(--muted);margin-top:.15rem;}
.wl-row .wl-vi{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;min-width:110px;}
.wl-row .wl-vi .n{font-family:var(--pp-font-heading);font-weight:800;font-size:.78rem;color:var(--ink);}
.wl-row .wl-vi .bar{width:90px;height:5px;border-radius:999px;background:var(--field-bg);overflow:hidden;}
.wl-row .wl-vi .bar span{display:block;height:100%;background:var(--pp-gradient);}

/* ============ DROPZONE (import FEC / fichiers) ============ */
.dropzone{border:1.5px dashed var(--field-border);border-radius:16px;padding:2.2rem 1.6rem;text-align:center;background:var(--field-bg);}
.dropzone svg{width:30px;height:30px;margin:0 auto .8rem;color:var(--accent);}
.dropzone .dz-title{font-family:var(--pp-font-heading);font-weight:700;font-size:.85rem;color:var(--ink);}
.dropzone .dz-sub{font-family:var(--pp-font-body);font-size:.76rem;color:var(--muted);margin-top:.3rem;}
.dropzone .btn{margin-top:1rem;}

/* ============ STEPPER (assistants / configuration) ============ */
.stepper{display:flex;align-items:center;gap:.5rem;margin-bottom:1.6rem;}
.step{display:flex;align-items:center;gap:.5rem;font-family:var(--pp-font-heading);font-weight:700;font-size:.74rem;color:var(--muted);}
.step .num{width:24px;height:24px;border-radius:50%;background:var(--field-bg);border:1px solid var(--field-border);display:flex;align-items:center;justify-content:center;font-size:.7rem;}
.step.done .num{background:var(--pp-magenta);border-color:transparent;color:#fff;}
.step.current{color:var(--ink);}
.step.current .num{background:var(--pp-gradient);border-color:transparent;color:#fff;}
.step-sep{width:28px;height:1px;background:var(--border);}

/* ============ TIMELINE (historique / provenance) ============ */
.timeline{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--border);margin-left:6px;}
.tl-item{position:relative;padding:.1rem 0 1.1rem 1.4rem;}
.tl-item::before{content:"";position:absolute;left:-6.5px;top:.25rem;width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);}
.tl-item .tl-t{font-family:var(--pp-font-heading);font-weight:700;font-size:.8rem;color:var(--ink);}
.tl-item .tl-d{font-family:var(--pp-font-body);font-size:.78rem;color:var(--muted);margin-top:.15rem;}
.tl-item .tl-meta{font-family:var(--pp-font-heading);font-size:.66rem;color:var(--muted);margin-top:.3rem;}

/* ============ ARBRE (organisation / catégories) ============ */
.tree{display:flex;flex-direction:column;gap:.1rem;font-family:var(--pp-font-body);font-size:.85rem;}
.tree-node{display:flex;align-items:center;gap:.5rem;padding:.45rem .5rem;border-radius:8px;}
.tree-node:hover{background:color-mix(in srgb, var(--accent) 8%, transparent);}
.tree-node .twist{width:14px;color:var(--muted);}
.tree-node .name{color:var(--ink);font-weight:600;font-family:var(--pp-font-heading);font-size:.82rem;}
.tree-node .meta{color:var(--muted);font-size:.74rem;}
.tree .depth-1{padding-left:1.6rem;}
.tree .depth-2{padding-left:3.2rem;}
.tree .depth-3{padding-left:4.8rem;}

/* ============ SECTIONS DE PAGE ============ */
.section{margin-top:2.2rem;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;}
.section-head h2{font-family:var(--pp-font-heading);font-weight:700;font-size:1.05rem;color:var(--ink);}
.section-head .sub{font-size:.78rem;color:var(--muted);}

/* ============ INFOBULLES ============ */
[data-tip]{cursor:help;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:var(--ghost-line);text-underline-offset:3px;}
button[data-tip],.btn[data-tip],.nav-item[data-tip],.wl-row[data-tip],.card[data-tip],.stat-tile[data-tip]{text-decoration:none;}
#pp-tooltip{
  position:fixed;z-index:999;max-width:280px;padding:.6rem .8rem;border-radius:10px;
  background:var(--pp-violet);color:#fff;font-family:var(--pp-font-body);font-size:.78rem;line-height:1.45;
  box-shadow:0 16px 32px -12px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(4px);transition:opacity .12s ease, transform .12s ease;pointer-events:none;
}
#pp-tooltip.show{opacity:1;transform:translateY(0);}
#pp-tooltip b{color:#e0c2ee;}

/* ============ UTILITAIRES ============ */
.muted{color:var(--muted);}
.mt-0{margin-top:0;}
.flex{display:flex;}
.gap-sm{gap:.5rem;}
.gap-md{gap:1rem;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}

/* ============ ÉCRAN DE CONNEXION (cabinet + client) ============ */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;}
.authcard{width:100%;max-width:400px;}
.authcard .kicker{display:flex;align-items:center;gap:.5rem;justify-content:center;margin-bottom:1.6rem;}
.authcard .kicker .chili{width:22px;height:22px;color:var(--pp-magenta);}
.authcard .kicker span{font-family:var(--pp-font-heading);font-weight:800;font-size:.9rem;color:var(--ink);}
.authcard h1{font-family:var(--pp-font-display);font-weight:900;font-size:1.5rem;color:var(--ink);text-align:center;}
.authcard .lede{font-size:.82rem;color:var(--muted);text-align:center;margin-top:.5rem;}
.authcard form{margin-top:1.6rem;}
.authcard .btn-primary{width:100%;justify-content:center;margin-top:1.6rem;}
.authcard .btn-primary:disabled{opacity:.6;cursor:wait;}
.authcard .forgot{display:block;text-align:right;font-size:.74rem;color:var(--accent);margin-top:.5rem;}
.authcard .switch-space{margin-top:2rem;text-align:center;font-size:.78rem;color:var(--muted);padding-top:1.4rem;border-top:1px solid var(--border);}
.authcard .switch-space a{color:var(--accent);font-weight:700;}

/* ============ SUNBURST (répartition hiérarchique par catégorie) ============
   Palette catégorielle et règles de couleur : cf. skill dataviz — couleur
   fixe par catégorie de premier niveau (jamais recolorée au filtre/drill),
   légende systématique, tooltip souris+clavier, table de repli fournie par
   la page mère (accessibilité, cf. references/color-formula.md). */
.sunburst-wrap{display:flex;gap:1.8rem;align-items:flex-start;flex-wrap:wrap;}
.sunburst-main{flex:1;min-width:320px;}
.sunburst-filters{width:200px;flex:none;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--pp-radius-card);padding:1.2rem 1.3rem;}
.sunburst-toprow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.6rem;}
.sunburst-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;}
.sunburst-toolbar .btn{padding:.3rem .7rem;font-size:.72rem;}
.sunburst-crumbs{display:flex;flex-wrap:wrap;gap:.3rem;font-family:var(--pp-font-heading);font-size:.72rem;color:var(--muted);margin-bottom:1rem;min-height:1.2rem;}
.sunburst-crumbs .sep{margin:0 .3rem;opacity:.5;}
.sunburst-crumbs button{color:var(--accent);font-weight:600;background:none;border:none;cursor:pointer;font:inherit;padding:0;}
.sunburst-crumbs .current{color:var(--ink);font-weight:700;}
.sunburst-center{border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:.4rem;text-align:center;transition:background .12s ease;}
.sunburst-center:hover{background:color-mix(in srgb, var(--accent) 10%, var(--surface));}
.sunburst-center .v{font-family:var(--pp-font-mono, var(--pp-font-heading));font-weight:700;font-size:.72rem;color:var(--ink);line-height:1.2;}
.sunburst-center .l{font-family:var(--pp-font-heading);font-size:.6rem;color:var(--muted);margin-top:.15rem;line-height:1.15;}
.sunburst-tooltip{position:absolute;transform:translate(-50%,-100%);background:var(--pp-violet);color:#fff;border-radius:10px;padding:.5rem .7rem;font-family:var(--pp-font-body);font-size:.74rem;white-space:nowrap;pointer-events:none;box-shadow:0 16px 32px -12px rgba(0,0,0,.5);z-index:5;}
.sunburst-tooltip .val{font-family:var(--pp-font-heading);font-weight:800;font-size:.82rem;}
.sunburst-tooltip .lab{color:#e0d8ea;margin-top:.1rem;}
.sunburst-tooltip-contributeurs{list-style:none;margin:.4rem 0 0;padding:.4rem 0 0;border-top:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;gap:.15rem;}
.sunburst-tooltip-contributeurs li{display:flex;justify-content:space-between;gap:.8rem;font-size:.68rem;color:#e0d8ea;}
.sunburst-tooltip-contributeurs .c-lib{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:11rem;}
.sunburst-tooltip-contributeurs .c-da{flex:none;color:#fff;font-weight:600;}
.sunburst-tooltip-contributeurs .c-plus{font-style:italic;color:#c9bfd6;justify-content:flex-start;}

/* ============ SÉLECTEUR DE FACTEUR D'ÉMISSION ============ */
.selecteur-fe{position:relative;display:flex;flex-direction:column;gap:.25rem;width:100%;min-width:22rem;}
.selecteur-fe-input{width:100%;padding:.55rem .8rem;border-radius:var(--pp-radius-field,8px);border:1px solid var(--field-border);background:var(--field-bg);color:var(--ink);font-family:var(--pp-font-body);font-size:.83rem;}
.selecteur-fe-input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.selecteur-fe-panel{position:absolute;z-index:20;top:calc(100% + 4px);left:0;width:max(34rem,100%);max-width:min(90vw,42rem);max-height:19rem;overflow-y:auto;background:var(--card-bg);backdrop-filter:var(--panel-blur,none);border:1px solid var(--border);border-radius:10px;box-shadow:0 16px 32px -12px rgba(0,0,0,.45);padding:.35rem;}
.selecteur-fe-option{display:flex;flex-direction:column;gap:.1rem;width:100%;text-align:left;padding:.5rem .6rem;border-radius:7px;background:none;border:none;cursor:pointer;color:var(--ink);}
.selecteur-fe-option .nom{font-size:.82rem;font-weight:600;white-space:normal;line-height:1.3;}
.selecteur-fe-option .details{font-size:.72rem;color:var(--muted);}
.selecteur-fe-option.surlignee,.selecteur-fe-option:hover{background:color-mix(in srgb, var(--accent) 12%, transparent);}
.selecteur-fe-option.selectionnee .nom::before{content:"✓ ";color:var(--pp-planet,#1c8a52);}
.selecteur-fe-vide,.selecteur-fe-plus{padding:.6rem;font-size:.76rem;color:var(--muted);}
.selecteur-fe-hint{font-size:.72rem;}
.selecteur-fe-hint.ok{color:var(--pp-planet,#1c8a52);}
.sunburst-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;justify-content:center;margin-top:1.4rem;}
.sunburst-legend-item{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--pp-font-heading);font-size:.72rem;color:var(--body);}

/* ============ MODALE (popup, ex. FE personnalisé) ============ */
dialog.pp-modal{border:none;padding:0;border-radius:var(--pp-radius-card);max-width:480px;width:calc(100% - 2rem);}
dialog.pp-modal::backdrop{background:rgba(20,18,31,.55);backdrop-filter:blur(2px);}
dialog.pp-modal .pp-modal-body{padding:1.6rem 1.8rem;}
dialog.pp-modal .pp-modal-actions{display:flex;justify-content:flex-end;gap:.7rem;margin-top:1.4rem;}
.sunburst-legend-item .swatch{width:10px;height:10px;border-radius:3px;flex:none;}

/* Magic Zone (dépôt intelligent) : remplacé le 2026-08-10 par la
   signalétique IA officielle — voir pp-ai-kit.css (.pp-ai-zone--waiting,
   .pp-ai-halo--diffuse) dans zone-depot-magique.tsx. Ne réutilise plus
   l'anneau tournant du bouton primaire : ce dégradé est désormais
   réservé aux boutons, --pp-ai-gradient est le seul dégradé autorisé
   pour signaler une zone IA. */

/* ============ BARRE SYSTÈME (bandeau supérieur) ============ */
/* Recopiée de climateOffice-carbon le 21/08/2026, pour que les quatre écrans
   de la suite portent la même bande. Généalogie : ocara-app (adapt) l'a posée
   le premier en hex littéraux, carbon l'a retokenisée, elle revient ici.

   Un bandeau plein posé sur la surface et refermé par un liseré dégradé,
   plutôt qu'une ligne de texte flottant au-dessus du contenu.

   La barre est rendue HORS de `.main` (cf. `.app-colonne`) : elle file d'un
   bord à l'autre là où le contenu s'arrête. La mettre dedans la ferait
   s'arrêter avec lui — et sur un écran large, `.main` étant bornée sans
   `margin: auto`, la bande se retrouverait calée à gauche. */
.app-colonne{flex:1;min-width:0;display:flex;flex-direction:column;}

.barre-systeme{
  position:relative;
  display:flex;align-items:center;justify-content:flex-end;gap:.9rem;flex-wrap:wrap;
  padding:.85rem 2.4rem .95rem;
  background:var(--surface);border-bottom:1px solid var(--border);
  backdrop-filter:var(--panel-blur,none);
  font-family:var(--pp-font-body);font-size:.74rem;color:var(--muted);
}
.barre-systeme::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:var(--pp-gradient);
}
.barre-systeme .qui{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.barre-systeme .qui strong{color:var(--body);font-family:var(--pp-font-heading);font-weight:700;}
.barre-systeme .role{
  flex:none;font-family:var(--pp-font-heading);font-weight:700;font-size:.62rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  padding:.3rem .75rem;border-radius:999px;white-space:nowrap;
}
.barre-systeme .btn{font-size:.72rem;padding:.42rem 1rem;flex:none;}
@media (max-width:720px){
  .barre-systeme{padding-left:1.2rem;padding-right:1.2rem;}
}

/* ── Marque de la barre latérale — la même dans les quatre ────────────────
   Uniformisée le 21/08/2026. Elle divergeait : carbon montrait « Climate
   Office » puis la pastille d'espace, sans jamais nommer le module ; act
   nommait le module mais en `--accent`, le violet de marque, donc du même
   violet dans les trois. On ne pouvait dire dans quel outil on était qu'en
   lisant la navigation.

   Désormais partout : l'icône, « Climate Office », puis le nom du module dans
   **sa** teinte. C'est la couleur qui répond à « où suis-je », avant la
   lecture. `--teinte-module` est posée par chaque application dans son
   `globals.css`. */
.sidebar-brand .module{
  /* `display:block` explicite : la classe est posée tantôt sur un `<div>`,
     tantôt sur un `<span>` — sans lui, le nom du module vient se coller au
     bout de « Climate Office ». */
  display:block;
  font-family:var(--pp-font-heading);font-weight:700;font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--teinte-module,var(--accent));
  margin-top:.1rem;line-height:1.2;
}