/* ============================================================
   SEVEN — Équipier DSI
   app-main.css — FEUILLE DE STYLE UNIFIÉE

   Fusion de app.css + app-convo.css + app-ux2.css
   Source unique de vérité — ne pas modifier les fichiers d'origine.

   Ordre des sections :
     §0   Variables & reset global
     §1   Boîtes & surfaces
     §2   Logo / Brand
     §3   Theme toggle
     §4   Navigation
     §5   Sidebar
     §6   Shell global
     §7   Layout conversationnel (convo-shell, convo-main, panels)
     §8   Heading widgets (.kicker, .pulse, .chat-head…)
     §9   Main & Hero
     §10  Compagnons actifs
     §11  Zone chat droite (.right, .chat, #chatInput)
     §12  Routeur d'écrans
     §13  Composants canvas internes (tables, gantt, meter, kpi canvas…)
     §14  Inventaire
     §15  Cartographie SI
     §16  Documents
     §17  Paramètres
     §18  Budgets
     §19  Risques
     §20  Projets
     §21  Login
     §22  Topbar centrale (.main-topbar, onglets, avatar)
     §23  Menu déroulant user
     §24  Bulles chat (.bubble, @keyframes bubbleIn, thinking-dots)
     §25  Bouton Envoyer (#chatSend)
     §26  Historique (.history-*)
     §27  Drawer, Scrollbars, Toast, Renders
     §28  Responsive
     §29  Reduced motion (fusionné)
   ============================================================ */


/* ============================================================
   §0  VARIABLES & RESET GLOBAL
   ============================================================ */
/*******************************
          RESET & BASE         
 *******************************/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  --r-xl:24px;
  --r-lg:18px;
  --r-md:14px;
  --logoSize: 46px;
}

:root{
  --sidebar-header-h: 92px; /* hauteur réelle de la zone logo */
  --sidebar-space: 300px;   /* espace réservé au menu quand ouvert */
  --rightW: 460px;          /* largeur FIXE du chat */
  --sidebar-width-open: 260px;
  --sidebar-width-closed: 0px;
  --logoLeft: 14px;
  --logoTop: 14px;
  --panelPadX: 12px;
  --sideW: var(--sidebar-width-open);
  --nav-width: 0;
  --text: rgba(var(--ink),1);
}

html {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  /* "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; */
  background: rgba(var(--bg),1);
  color: rgba(var(--ink),1);
}

body {
  min-height: 100vh;
  height: auto;
}

body.nav-collapsed{
  --sidebar-space: 0px;
}

body.nav-collapsed .main{
  margin-left: 0;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


/*******************************
          LAYOUT GLOBAL        
 *******************************/
.sidebar.is-collapsed ~ .main{
  margin-left: 0;
}

.sidebar.is-collapsed ~ .right{
  margin-left: 0;
}

/*******************************
   BOITES & SURFACES GLOBALES 
 *******************************/
.box {
  background: var(--card);
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  position: relative;
}

.box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.25);
}
/*******************************
              LOGO             
 *******************************/
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 10px 14px;
  border-bottom:1px solid rgba(var(--white),.06);
}

.brand .logo{
  width:var(--logoSize);
  height:var(--logoSize);
  border-radius:16px;
  background: radial-gradient(circle at 30% 30%, rgba(var(--white),.18), rgba(var(--white),.03));
  border:1px solid rgba(var(--white),.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow: 0 0 18px rgba(var(--red),.20);
}
.brand .logo img{
  width:calc(var(--logoSize)+8px);
  height:calc(var(--logoSize)+8px);
  object-fit:contain;
  transform: translateY(2px);
}

.brand .t{
  line-height:1.05;
}

.brand .t .name{
  font-weight:800; 
  letter-spacing:.05em;
}

.brand .t .sub{
  margin-top:5px;
  font-size:.72rem;
  color: rgba(var(--muted),1);
  text-transform:uppercase;
  letter-spacing:.14em;
}

.brand .t .version{
  margin-top:5px;
  font-size:.50rem;
  color: rgba(var(--muted),1);
  text-transform:lowercase;
  letter-spacing:.14em;
}

/*******************************
       BOUTON SWITCH THEME     
 *******************************/
.theme-toggle {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  color: rgba(var(--ink),1);
}

.theme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--red));
}

/*******************************
           NAVIGATION
*******************************/
.nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav .label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(var(--muted2),1);
  margin-bottom: 6px;
}

.nav .item,
.comp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(var(--ink),1);
  text-decoration: none;
  transition: background .2s ease, opacity .2s ease;
}

.nav .item:hover {
  background: var(--surface2);
}

.nav .item.active {
  background: linear-gradient(
    90deg,
    rgba(var(--red),.25),
    rgba(var(--red),.05)
  );
  border-left: 4px solid var(--red);
}

/*******************************
           SIDEBARS
 *******************************/

/* =========================
   SHELL GLOBAL
========================= */

.shell{
  display: flex;
  align-items: stretch;  /* ← Retour à stretch */
  height: 100vh;  /* ← Hauteur FIXE */
  overflow: hidden;
  gap: 20px;
  padding: 20px;
  padding-left: calc(20px + var(--sidebar-space));
  transition: padding-left .25s ease;
}

/* =========================
   SIDEBAR (STRUCTURE)
========================= */
.sidebar{
  position: absolute;
  top: 20px;
  left: 10px;
  width: var(--sidebar-width-open);
  max-height: 100vh; /* Limite à la hauteur de l'écran */
  overflow-y: auto; /* Active le scroll si nécessaire */
  z-index: 100;
  border-radius: 22px;
  overflow: hidden;
}

/* état fermé */
.sidebar.is-collapsed{
  width: var(--sidebar-width-closed);
}

.sidebar.is-collapsed .sidebar-panel{
  transform: translateX(-100%);
}

/* Quand le menu est fermé : on garde juste le logo, sans “barre” */
.sidebar.is-collapsed .sidebar-logo{
  width: var(--logoSize);
  padding: 0;
  left: var(--logoLeft);
  top: var(--logoTop);
  background: transparent;
  border: none;
  box-shadow: none;
}

.sidebar.is-collapsed .sidebar-logo .t{
  opacity: 0;
  visibility: hidden; 
}

/* Barre cliquable (visible seulement quand sidebar fermée) */
.sidebar-handle{
  position: fixed;
  top: 10px;
  left: 10px;
  width: 10px;
  height: var(--logoSize);
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 9999;

  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--red),.98), rgba(var(--red),.22));
  box-shadow:
    0 0 0 1px rgba(var(--red),.18),
    0 12px 30px rgba(var(--red),.22),
    0 0 18px rgba(var(--red),.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.sidebar-handle:hover{
  transform: translateX(2px);
}

/* Affiche la poignée uniquement quand le menu est fermé */
.sidebar.is-collapsed .sidebar-handle{
  opacity: 1;
  pointer-events: auto;
}

/* Trait lumineux */
.sidebar::after{
  content:"";
  position:absolute;
  width: 300px;               /* longueur du trait */
  height: 2px;                /* épaisseur */
  border-radius: 999px;
  pointer-events:none;
  z-index: 3;

  /* Couleur + brillance */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--red),.95),
    rgba(255,140,120,.95),
    rgba(var(--red),.95),
    transparent
  );

  box-shadow:
    0 0 10px rgba(var(--red),.9),
    0 0 22px rgba(var(--red),.55),
    0 0 40px rgba(var(--red),.25);

  /* Trajet : contour arrondi */
  offset-path: inset(2px round 22px);
  offset-distance: 0%;
  offset-rotate: auto;        /* 👈 s’oriente dans le sens du mouvement */

  /* Animation */
  opacity: 0;
  animation: spark-stroke 4s ease-out forwards;
}

@keyframes spark-stroke{
  0%{
    offset-distance: 0%;
    opacity: 0;
    transform: scaleX(.6);
  }
  10%{
    opacity: 1;
    transform: scaleX(1);
  }
  90%{
    opacity: 1;
  }
  100%{
    offset-distance: 100%;
    opacity: 0;
    transform: scaleX(.7);
  }
}

/* =========================
   LOGO TOGGLE (TOUJOURS VISIBLE)
========================= */
.sidebar-logo{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  pointer-events: auto;
  padding: 14px var(--panelPadX);
}

.sidebar-logo .t{
  transition: opacity .28s cubic-bezier(.4,0,.2,1), visibility .28s;
  opacity: 1;
  visibility: visible;
}

.sidebar-logo img{
  height: calc(var(--logoSize)-8px);
  cursor: pointer;
}

/* =========================
   SIDEBAR PANEL
========================= */
.sidebar-panel{
  position: relative; /* Remplace 'absolute' pour éviter les problèmes de hauteur */
  width: 100%;
  height: 100%; /* Prend toute la hauteur du parent */
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid rgba(var(--white), .08);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35);
  padding-top: var(--sidebar-header-h);
  gap: 18px;
}

/* =========================
   BARRE ROUGE SEVEN (MENU FERMÉ)
========================= */
.sidebar.is-collapsed::after{
  content:"";
  position: fixed;
  top: 80px;
  left: 14px;
  width: 6px;
  height: calc(100vh - 110px);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(var(--red),.95),
    rgba(var(--red),.25)
  );
  box-shadow:
    0 0 0 1px rgba(var(--red),.15),
    0 12px 30px rgba(var(--red),.18);
  pointer-events: none;
}

/* =========================
   CONTENU SIDEBAR
========================= */

.sidebar-content{
  flex: 1; /* S'étend pour remplir l'espace */
  overflow-y: auto; /* Scroll interne si nécessaire */
}

.sidebar-footer{
  margin-top: auto; /* Pousse le footer en bas */
  padding-top: 12px;
  border-top: 1px solid rgba(var(--white), 0.06);
  font-size: 0.82rem;
  color: rgba(var(--muted), 1);
}

/* =========================
   ANIMATION ÉTINCELLE (FIXÉE)
========================= */
.tagline{
  display: flex;
  align-items: center;
  gap: 8px;
}

.tagline .spark{
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--red),
    transparent
  );
  animation: spark-slide 1.6s ease-in-out infinite;
}

@keyframes spark-slide{
  0%   { transform: translateX(-6px); opacity: .2 }
  50%  { transform: translateX(6px);  opacity: 1 }
  100% { transform: translateX(-6px); opacity: .2 }
}


/*******************************
  COMPAGNONS ACTIFS / INACTIFS
 *******************************/
/* Surcharge de .comp-row pour les compagnons (pill-style, border-radius pill) */
.comp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  color: rgba(var(--muted), 1);
  width: 100%;
}

.comp-row.inactive {
  opacity: .45;
  font-style: italic;
}

.pill {
  border:1px solid rgba(var(--white),.18);
  background:rgba(var(--white),.03);
  color: rgba(var(--muted),1);
  padding:4px 10px;
  border-radius:999px;
  cursor:pointer;
  transition:.15s ease;
  white-space:nowrap;
}

.comp-row.inactive .pill:hover{
  border-color: rgba(var(--yellow),.55);          /* jaune doux */
  background: rgba(var(--yellow),.15);
  color: rgba(var(--yellow-light),1);
  box-shadow: 0 0 0 2px rgba(var(--yellow),.15);
  transform: translateY(-1px);
}

.comp-row.inactive .pill:active{
  transform: translateY(0);
  box-shadow: 0 0 0 1px rgba(var(--yellow),.25);
}


.comp-row .title{
  flex: 1;
}

.comp-row .pill {
  margin-left: auto;   /* pousse le bouton à droite */
}

.pill.on {
  border-color: rgba(var(--cyan),.55);
  background: rgba(var(--cyan),.10);
  color: rgba(var(--cyan2),1);
}


/* ============================================================
   §7  LAYOUT CONVERSATIONNEL
   Note : le reset html { height:100%; overflow:hidden } était dans app-convo.css.
   Il est maintenant absorbé dans §0 (html/body de app.css a déjà height:100%).
   .convo-shell gère son propre overflow:hidden.
   ============================================================ */

/* =========================================================
   2. SHELL
   ========================================================= */
.convo-shell {
  max-width: 1480px;
  margin: 0 auto;
  padding: 14px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}


/* =========================================================
   3. TOPBAR CONTEXTUELLE
   ========================================================= */
.convo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  position: sticky;
  top: 0;
  z-index: 10000;
  background: rgba(var(--bg), 0.96);
  backdrop-filter: blur(10px);
}

.brand-mini { display: flex; align-items: center; gap: 10px; }
.brand-mini img   { height: 34px; width: auto; }
.brand-mini .name { font-weight: 900; letter-spacing: .4px; }
.brand-mini .sub  { font-size: 12px; color: rgba(var(--muted), 1); }

.top-center  { flex: 1; display: flex; justify-content: center; position: relative; }
.ctx-chips   { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }


/* =========================================================
   4. GRILLE PRINCIPALE
   ========================================================= */
.convo-main {
  display: grid;
  gap: 14px;
  align-items: stretch;
  min-height: calc(100vh - 120px);
  overflow: visible;
  transition:
    grid-template-columns 460ms cubic-bezier(.22,.61,.36,1),
    grid-template-rows    460ms cubic-bezier(.22,.61,.36,1),
    gap 260ms ease;
  will-change: grid-template-columns, grid-template-rows;
  contain: layout paint;
}

.convo-main[data-layout="artefacts"] { grid-template-columns: .7fr .3fr; }
.convo-main[data-layout="compagnon"] { grid-template-columns: .3fr .7fr; }

@media (max-width: 980px) {
  .hide-sm { display: none; }
  .convo-main[data-layout="compagnon"],
  .convo-main[data-layout="artefacts"] { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .hide-sm     { display: inline !important; }
  .top-actions { flex-wrap: wrap; gap: 8px; }
}


/* =========================================================
   5. PANELS (chat + canvas)
   ========================================================= */
.convo-chat,
.convo-canvas {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 14px;
  transition:
    transform 460ms cubic-bezier(.22,.61,.36,1),
    opacity   260ms ease;
  will-change: transform, opacity;
}

.convo-chat { contain: style; }

/* Canvas masqué en mode artefacts */
.convo-main[data-layout="artefacts"] .convo-canvas {
  opacity: 0;
  transform: translateX(28px) scale(.985);
  pointer-events: none;
  filter: saturate(.9);
}

/* Canvas visible en mode compagnon */
.convo-main[data-layout="compagnon"] .convo-canvas {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  filter: none;
}

.convo-main[data-layout="compagnon"] .convo-chat {
  transform: translateX(-6px);
}


/* ============================================================
   §8  HEADINGS WIDGETS
   Source unique : version app-convo.css (uppercase, muted).
   La variante colorée (cyan) présente dans app.css était inutilisée
   dans le HTML et a été supprimée (doublon).
   ============================================================ */
   6. HEADINGS INTERNES
   ========================================================= */
.kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(var(--muted), 1);
}

.pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--cyan), .9);
  box-shadow: 0 0 0 4px rgba(var(--cyan), .12);
}

.chat-head  { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.chat-title { font-size: 18px; font-weight: 900; margin-top: 2px; }
.chat-sub   { font-size: 13px; margin-top: 2px; }
.chat-hints { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }


/* ============================================================
   §9  MAIN & HERO
   ============================================================ */
/*******************************
          MAIN & HERO
 *******************************/
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;  /* ← 100% du shell, pas 100vh */
  overflow-y: hidden;
  overflow-x: hidden;
  gap: 20px;
  margin-left: 0;  /* ← Reset */
  transition: none;
  flex: 1;        /* ← AJOUTER : prend tout l'espace disponible entre sidebar et .right */
  min-width: 0;   /* ← AJOUTER : évite le débordement flex */}

.hero {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-auto-rows: minmax(auto, max-content);  /* AJOUTER */
  padding: 0px 0px 20px 0px;
  gap: 20px;
}

.hero-left {
  padding: 0px 0px 20px 0px;
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    var(--surface),
    transparent
  );
}

.hero-actions{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hero-title {
  font-size: 28px;
  font-weight: 700;
  margin: 12px 0;
}

.hero-sub {
  color: rgba(var(--muted),1);
  line-height: 1.6;
  max-width: 560px;
}

.cta{
  border-radius:999px;
  border:1px solid rgba(var(--cyan),.60);
  background: rgba(var(--cyan),.10);
  color: rgba(var(--cyan2), 1);
  padding:9px 12px;
  font-weight:700;
  font-size:.88rem;
  cursor:pointer;
  transition:.15s ease;
}
.cta:hover{
  background: rgba(var(--cyan),.18);
  color: rgba(var(--cyan3),1);
  transform: translateY(-1px);
}
.cta.secondary{
  border-color: rgba(var(--white),.18);
  background: rgba(var(--white),.04);
  color: rgba(var(--text),1);
  font-weight:650;
}
.cta.secondary:hover{
  background: rgba(var(--white),.07);
  transform: translateY(-1px);
}

/*******************************
       ESPACE COMPAGNONS
 *******************************/
.comp-card {
  display: flex;
  border-radius: var(--r-xl);
  border:1px solid rgba(var(--white),.10);
  background: var(--card);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
}
.comp-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:10px;
  background: linear-gradient(180deg, rgba(var(--cyan),.90), rgba(var(--red),.85));
  opacity:.95;
}
.comp-card-inner{
  padding:16px 16px 14px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.comp-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.comp-ident{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.avatar{
  width:var(--logoSize);
  height:var(--logoSize);
  border-radius: var(--r-md);
  background: radial-gradient(circle at 30% 30%, rgba(var(--white),.22), rgba(var(--white),.04));
  border:1px solid rgba(var(--white),.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow: 0 0 18px rgba(var(--red),.20);
}

.avatar img{
  width:calc(var(--logoSize)+8px);
  height:calc(var(--logoSize)+8px);
  object-fit:contain;
  transform: translateY(2px);
}

.who{
  min-width:0;
}
.h{
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.r{
  margin-top:3px;
  color: rgba(var(--muted),1);
  font-size:.82rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.status{
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  color: rgba(var(--muted),1);
  font-size:.8rem;
}
.status .time{
  color: rgba(var(--ink),1);
  font-weight:800;
  letter-spacing:.02em;
  font-size:.78rem;
}
.status-sub{
  color: rgba(var(--muted2),1);
  font-weight:700;
}
.agents{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}
.agent{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(var(--white),.12);
  background: rgba(var(--white),.03);
  font-size:.78rem;
  color: rgba(var(--muted),1);
}
.agent .a-dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(var(--white),.25);
}
.agent.on{
  border-color: rgba(var(--cyan),.35);
  color: rgba(var(--cyan2),1);
  background: rgba(var(--cyan),.08);
}
.agent.on .a-dot{
  background: rgba(var(--cyan),1);
  box-shadow: 0 0 12px rgba(var(--cyan),.85);
}
.agent.alert{
  border-color: rgba(var(--red),.35);
  color: rgba(var(--red2),1);
  background: rgba(var(--red),.08);
}
.agent.alert .a-dot{
  background: rgba(var(--red),1);
  box-shadow: 0 0 12px rgba(var(--red),.75);
}

/*******************************
        CARTES INSIGHTS
 *******************************/
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(auto, max-content);  /* AJOUTER */
  gap: 20px;
}

.insight {
  position: relative;
  padding: 20px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow2);
  border-left: 6px solid transparent;
}

.insight.decision { border-left: 6px solid transparent rgba(var(--cyan),1); }
.insight.risk { border-left: 6px solid transparent rgba(var(--red),1); }
.insight.opportunity { border-left: 6px solid transparent rgba(var(--green-light),1); }
.insight.pilotage { border-left: 6px solid transparent rgba(var(--yellow),1); }

.insight h3 {
  margin: 8px 0;
  font-size: 16px;
}

.insight p {
  font-size: 14px;
  color: rgba(var(--muted),1);
}

/*******************************
             KPIs
 *******************************/
.kpis {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  padding: 20px 0px 20px 0px;
  gap:12px;
  height:15%;
}

.kpi {
  border-radius: var(--r-lg);
  border:1px solid rgba(var(--white),.08);
  background: var(--card);
  box-shadow: var(--shadow2);
  padding:12px 12px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.kpi .l {
  font-size:.78rem;
  color: rgba(var(--muted),1);
  text-transform:uppercase;
  letter-spacing:.12em;
}

.kpi .v {
  font-size:1.15rem;
  font-weight:900;
  letter-spacing:-.01em;
}

/*******************************
     ZONE CONVERSATIONNELLE
 *******************************/
.right {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Réduit le gap pour gagner de la place */
  padding: 10px; /* Réduit le padding */
  width: var(--rightW);
  max-width: var(--rightW);
  height: 95vh; /* 95% de la hauteur de l'écran */
  max-height: 95vh; /* Limite stricte */
  overflow: hidden; /* Désactive le scroll ici */
  flex-shrink: 0;
}

.talk {
  position: relative;
}

.talk h2 {
  font-size: 18px;
  margin-bottom: 6px;
}
.talk .sub{
  margin-top:6px;
  color: rgba(var(--muted),1);
  font-size:.9rem;
  line-height:1.45;
}
.suggest{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  color: rgba(var(--muted),1);
  font-size:.8rem;
}
.suggest div::before{
  content:"› ";
  color: rgba(var(--cyan2),1);
  font-weight:900;
}

.glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    circle at 50% 30%,
    rgba(var(--cyan),.18),
    transparent 60%
  );
  filter: blur(40px);
  z-index: -1;
}

.chat {
  display: flex;
  flex-direction: column;
  flex: 1; /* S'étend pour remplir l'espace */
  min-height: 0; /* Permet de rétrécir si nécessaire */
  max-height: 80%;
  overflow-y: auto; /* Active le scroll ici */
}

.chat-messages {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  gap: 8px;
  min-height: 0;
}

.chat-input {
  display: flex;
  flex-direction: column;   /* zone thinking au-dessus, input-inner en-dessous */
  gap: 6px;
  padding: 10px;
  flex-shrink: 0;
}

.chat-input-inner {
  display: flex;
  flex-direction: row;      /* textarea + bouton côte à côte */
  align-items: flex-end;    /* bouton ancré en bas si textarea grandit */
  gap: 10px;
}

/* Le textarea prend tout l'espace disponible */
.chat-input-inner #chatInput {
  flex: 1;
  min-width: 0;             /* empêche le dépassement en mode flex */
}

/* Le bouton ne se déforme pas */
.chat-input-inner #chatSend {
  flex-shrink: 0;
}

#chatInput{
  flex: 1; /* Prend tout l'espace disponible */
  min-height: 42px;
  max-height: 140px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(var(--white), 0.12);
  background: rgba(var(--white), 0.04);
  color: rgba(var(--ink), 1);
  outline: none;
  line-height: 1.35;
  font-family: inherit;
  resize: none; /* Désactive le redimensionnement */
  overflow: hidden;
}

#chatInput:focus{
  border-color: rgba(var(--cyan),.55);
  box-shadow: 0 0 0 3px rgba(var(--cyan),.12);
}

/* Règles .bubble supprimées — définies dans app-ux2.css (source unique) */

/*******************************
       ROUTEUR D'ECRANS
 *******************************/
.screen { 
  display:none; 
  min-height:100vh;
  width:100%;
}
#screen-home { display:block; }

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.page-title{
  font-size: 22px;
  font-weight: 800;
  margin-top: 6px;
}
.page-sub{
  margin-top: 6px;
  color: rgba(var(--muted),1);
  line-height: 1.5;
}
.page-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}


/* ============================================================
   §10-§21  COMPOSANTS MÉTIER (inventaire, SI, docs, budgets,
            risques, projets, login, paramètres)
   Corrections appliquées :
   - .badge fusionné (suppression doublon ligne 2259 de l'ancien app.css)
   - rgba(var--green-ultra-light) → rgba(var(--green-ultra-light),1) [erreur syntaxe]
   - rghba(...) → rgba(...) dans .chip [typo]
   ============================================================ */
.row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:18px;
  color: rgba(var(--muted2),1);
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--white), .10);
  background: rgba(var(--white), .03);
  color: rgba(var(--muted), 1);
  font-weight: 900;
  font-size: 12px;
}
.badge.ok     { border-color: rgba(var(--green),.22);  background: rgba(var(--green),.10);  color: rgba(var(--green-light),1); }
.badge.warn   { border-color: rgba(var(--yellow),.22); background: rgba(var(--yellow),.10); color: rgba(var(--yellow-light),1); }
.badge.danger { border-color: rgba(var(--red),.22);    background: rgba(var(--red),.10);    color: rgba(var(--red-light),1); }
.mini{
  border-radius:999px;
  border:1px solid rgba(var(--cyan),.60);
  background: rgba(var(--cyan),.10);
  color: rgba(var(--cyan2),1);
  padding:8px 12px;
  font-weight:700;
  font-size:.86rem;
  cursor:pointer;
  transition:.15s ease;
}
.mini:hover{ transform: translateY(-1px); background: rgba(var(--cyan),.18); }
.mini.secondary{
  border-color: rgba(var(--white),.18);
  background: rgba(var(--white),.04);
  color: rgba(var(--text),1);
}

/*******************************
           INVENTAIRE
 *******************************/
.inv-top{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 14px;
}

.inv-kpi{
  padding: 18px;
}
.inv-kpi-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.inv-kpi-title{
  font-weight:800;
}
.inv-kpi-badge{
  border:1px solid var(--stroke2);
  background: var(--surface);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  color: rgba(var(--muted),1);
}
.inv-kpi-badge.ok{
  border-color: rgba(var(--green),.35);
  background: rgba(var(--green),.10);
  color: rgba(var(--green-ultra-light),1);
}
.inv-kpi-badge.warn{
  border-color: rgba(var(--yellow),.35);
  background: rgba(var(--yellow),.10);
  color: rgba(var(--yellow-light),.10);
}
.inv-kpi-value{
  margin-top: 10px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.inv-kpi-sub{
  margin-top: 6px;
  color: rgba(var(--muted),1);
}

.inv-progress{
  margin-top: 12px;
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--white),.08);
  overflow:hidden;
  border:1px solid rgba(var(--white),.10);
}
.inv-progress-bar{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--cyan), rgba(var(--red),.85));
}

.inv-kpi-mini{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mini-k{
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  border-radius: 14px;
  padding: 10px;
}
.mini-l{ color: rgba(var(--muted2),1); font-size: 12px; }
.mini-v{ margin-top: 6px; font-weight: 900; font-size: 18px; }

.inv-bench{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bench-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}
.bench-l{ color: rgba(var(--muted),1); }
.inv-kpi-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.inv-grid{
  margin-top: 20px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.inv-panel{
  padding: 16px;
}
.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.panel-title{ font-weight:800; }
.panel-sub{ color: rgba(var(--muted),1); margin-top: 4px; }

.inv-bars{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.inv-bar{
  display:grid;
  grid-template-columns: 90px 1fr 44px;
  gap: 10px;
  align-items:center;
}
.inv-bar-l{ color: rgba(var(--muted2),1); }
.inv-bar-m{
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--white),.08);
  border:1px solid rgba(var(--white),.10);
  overflow:hidden;
}
.inv-bar-m span{
  display:block;
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--cyan), rgba(var(--red),.80));
}
.inv-bar-r{ font-weight:800; }

.inv-note{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: rgba(var(--muted),1);
  background: rgba(var(--white),.03);
  border:1px solid rgba(var(--white),.08);
  border-radius: 14px;
  padding: 10px;
}
.inv-note-dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(var(--cyan),1);
  box-shadow: 0 0 12px rgba(var(--cyan),.55);
  margin-top: 4px;
  flex: 0 0 10px;
}

.inv-quality{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.q-item{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}
.q-bar{
  width: 8px;
  height: 44px;
  border-radius: 999px;
  flex: 0 0 8px;
}
.q-bar.risk{ background: rgba(var(--red),1); }
.q-bar.pilotage{ background: rgba(var(--yellow),1); }
.q-bar.opportunity{ background: rgba(var(--green-light),1); }

.q-title{ font-weight:900; }
.q-sub{ margin-top:4px; color: rgba(var(--muted),1); font-size: 13px; }
.q-txt{ flex:1; }

.inv-actions .inv-action-card{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  border-left: 6px solid rgba(var(--white),.12);
}
.inv-action-card.decision{ border-left-color: rgba(var(--cyan),1); }
.inv-action-card.pilotage{ border-left-color: rgba(var(--yellow),1); }
.inv-action-card.opportunity{ border-left-color: rgba(var(--green-light),1); }

.iac-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.iac-title{ font-weight:900; }
.iac-badge{
  border:1px solid var(--stroke2);
  background: rgba(var(--white),.03);
  color: rgba(var(--muted),1);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
}
.iac-sub{ margin-top: 6px; color: rgba(var(--muted),1); }
.iac-foot{ margin-top: 10px; display:flex; gap:10px; flex-wrap:wrap; }

/* ─────────────────────────────────────────────────────────────
   INVENTAIRE — Donut ECharts + Benchmark
   ───────────────────────────────────────────────────────────── */

.inv-donut-card {
  display: flex;
  flex-direction: column;
}

.inv-donut-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  flex: 1;
  margin-top: 10px;
}

/* Hauteur fixe obligatoire — ECharts mesure le conteneur au moment
   de l'init, si height:0 le canvas reste vide */
.inv-donut-canvas {
  width: 100%;
  height: 180px;
  min-height: 180px;
}

/* Légende custom (hors canvas) */
.inv-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.idl-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.idl-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.idl-label {
  color: rgba(var(--muted), 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.idl-val {
  font-weight: 800;
  font-size: 12px;
  color: rgba(var(--ink), .9);
}

/* Benchmark — zone opt-in */
.inv-bench-optin {
  margin-top: 12px;
}

.bench-optin-copy {
  font-size: 13px;
  color: rgba(var(--muted), 1);
  line-height: 1.55;
  padding: 12px;
  border-radius: 14px;
  background: rgba(var(--white), .03);
  border: 1px solid rgba(var(--white), .08);
  margin-bottom: 12px;
}

.bench-optin-copy strong {
  color: rgba(var(--cyan), 1);
  font-weight: 700;
}


/*******************************
           CARTOS SI
 *******************************/
.si-layout{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 20px;
  align-items:start;
}

.si-graph{
  padding: 16px;
}

.si-graph-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Toolbar */
.si-toolbar{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.tool{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(var(--white),.10);
}

.tool-ic{
  font-weight:900;
  color: rgba(var(--muted2),1);
}

.tool input{
  width:100%;
  border:none;
  outline:none;
  background: transparent;
  color: rgba(var(--text), 1);
  font-size: 14px;
}

.tool input::placeholder{
  color: rgba(var(--muted),.70);
}

.tool-group{
  display:flex;
  gap:8px;
}

.tool-btn{
  width:40px;
  height:40px;
  border-radius: 14px;
  background: rgba(var(--white),.04);
  border: 1px solid rgba(var(--white),.10);
  color: rgba(var(--text),1);
  box-shadow: var(--shadow2);
  transition:.15s ease;
}

.tool-btn:hover{
  transform: translateY(-1px);
  background: rgba(var(--white),.06);
}

/* Canvas placeholder */
.si-canvas{
  margin-top: 14px;
  position:relative;
  height: 420px;
  border-radius: 18px;
  background:
    radial-gradient(600px 260px at 20% 10%, rgba(var(--cyan),.10), transparent 60%),
    radial-gradient(520px 260px at 80% 20%, rgba(var(--red),.10), transparent 60%),
    rgba(var(--white),.03);
  border: 1px solid rgba(var(--white),.08);
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.si-canvas-hint{
  position:absolute;
  left:14px; top:14px;
  right:14px;
  max-width: 520px;
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(var(--white),.10);
  color: rgba(var(--white),.88);
}
.hint-title{ font-weight:900; }
.hint-sub{ margin-top:6px; color: rgba(var(--muted),1); line-height:1.45; }

/* Fake nodes/links (static, purely decorative) */
.node{
  position:absolute;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid rgba(var(--white),.12);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(6px);
}

.n-app{ left: 90px; top: 220px; border-color: rgba(var(--cyan),.22); }
.n-db{ left: 290px; top: 300px; border-color: rgba(var(--red),.22); }
.n-app2{ right: 70px; top: 260px; border-color: rgba(var(--white),.14); }
.n-infra{ left: 330px; top: 170px; border-color: rgba(var(--yellow),.22); }

.link{
  position:absolute;
  height:2px;
  background: rgba(var(--white),.12);
  box-shadow: 0 0 14px rgba(var(--cyan),.15);
}
.l1{ left: 185px; top: 250px; width: 170px; transform: rotate(20deg); }
.l2{ left: 365px; top: 210px; width: 220px; transform: rotate(10deg); }
.l3{ left: 230px; top: 280px; width: 150px; transform: rotate(-12deg); }

.si-context{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: rgba(var(--muted),1);
  background: rgba(var(--white),.03);
  border:1px solid rgba(var(--white),.08);
  border-radius: 14px;
  padding: 10px;
}
.ctx-dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(var(--cyan),1);
  box-shadow: 0 0 12px rgba(var(--cyan),.55);
  margin-top: 4px;
  flex: 0 0 10px;
}

/* Right side */
.si-side{
  display:flex;
  flex-direction:column;
  gap: 20px;
}

.si-filters,
.si-inspector{
  padding: 16px;
}

.filter-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.f-title{
  font-weight:900;
  color: rgba(var(--white),.92);
  margin-bottom: 8px;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(var(--white),.12);
  background: rgba(var(--white),.03);
  color: rgba(var(--text),1);
  font-size: 13px;
  cursor:pointer;
  transition:.15s ease;
}
.chip:hover{ transform: translateY(-1px); background: rgba(var(--white),.06); }
.chip.active{
  border-color: rgba(var(--cyan),.30);
  background: rgba(var(--cyan),.10);
  color: rgba(var(--cyan2),1);
}

.si-quick{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.quick-card{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}
.quick-card b{ display:block; }
.quick-card .muted{ margin-top:2px; }

/* Inspector */
.ins-block{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(var(--white),.03);
  border: 1px solid rgba(var(--white),.08);
}
.ins-row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--white),.06);
}
.ins-row:last-child{ border-bottom:none; }
.ins-k{ color: rgba(var(--muted),1); }
.ins-v{ font-weight:800; }

.ins-title{
  font-weight:900;
  margin-bottom: 8px;
}
.dep-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.dep-item{
  display:flex;
  gap:10px;
  align-items:center;
  color: rgba(var(--white),.88);
}
.dep-dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(var(--white),.20);
}

.tag-critical,
.tag-warn{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border:1px solid rgba(var(--white),.12);
}
.tag-critical{
  border-color: rgba(var(--red),.35);
  background: rgba(var(--red),.10);
  color: rgba(var(--red-light),1);
}
.tag-warn{
  border-color: rgba(var(--yellow),.35);
  background: rgba(var(--yellow),.10);
  color: rgba(var(--yellow-light),1);
}

.sig{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  margin-top: 10px;
}
.sig-bar{
  width: 8px;
  height: 44px;
  border-radius: 999px;
  flex: 0 0 8px;
}
.sig-bar.risk{ background: rgba(var(--red),1); }
.sig-bar.decision{ background: rgba(var(--cyan),1); }
.sig-h{ font-weight:900; }
.sig-s{ margin-top:4px; color: rgba(var(--muted),1); font-size: 13px; line-height:1.4; }
.sig-txt{ flex:1; }

.ins-actions{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/*******************************
            DOCUMENTS
 *******************************/
.docs-layout{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 20px;
  align-items:start;
}

.docs-library,
.docs-generator,
.docs-templates{
  padding: 16px;
}

.docs-toolbar{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.docs-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(var(--white),.10);
}

.docs-search input{
  width:100%;
  border:none;
  outline:none;
  background: transparent;
  color: rgba(var(--text),1);
  font-size: 14px;
}
.docs-search input::placeholder{
  color: rgba(var(--muted),.70);
}

.docs-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.docs-list{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.doc-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}

.doc-info{ flex:1; }
.doc-title{ font-weight:900; }
.doc-meta{ margin-top:4px; color: rgba(var(--muted),1); font-size: 13px; }
.doc-tags{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }

.tag.small{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border:1px solid rgba(var(--white),.12);
  background: rgba(var(--white),.03);
  color: rgba(var(--text),1);
}
.tag.small.warn{
  border-color: rgba(var(--yellow),.35);
  background: rgba(var(--yellow),.10);
  color: rgba(var(--yellow-light),1);
}

.doc-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Right side */
.docs-side{
  display:flex;
  flex-direction:column;
  gap: 20px;
}

.gen-steps{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  background: rgba(var(--white),.03);
  border: 1px solid rgba(var(--white),.08);
}

.step-n{
  width:30px; height:30px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color: rgba(var(--cyan2),1);
  background: rgba(var(--cyan),.10);
  border: 1px solid rgba(var(--cyan),.18);
  flex: 0 0 30px;
}

.step-t{ font-weight:900; }
.step-s{ margin-top:4px; color: rgba(var(--muted),1); font-size: 13px; line-height:1.4; }
.step-c{ flex:1; }

.gen-fields{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field label{
  display:block;
  font-size: 12px;
  color: rgba(var(--muted2),1);
  margin-bottom: 6px;
  font-weight:800;
}

.field select{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(var(--white),.10);
  color: rgba(var(--text),1);
  outline:none;
}

.gen-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.gen-note{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: rgba(var(--muted),1);
  background: rgba(var(--white),.03);
  border:1px solid rgba(var(--white),.08);
  border-radius: 14px;
  padding: 10px;
}

/* Templates */
.tpl-list{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.tpl{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}

.tpl-txt{ flex:1; }
.tpl-h{ font-weight:900; }
.tpl-s{ margin-top:4px; color: rgba(var(--muted),1); font-size: 13px; line-height:1.4; }

/*******************************
            PARAMETRES
 *******************************/
.set-layout{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items:start;
}

.set-col{
  display:flex;
  flex-direction:column;
  gap: 20px;
}

.set-card{
  padding: 16px;
}

.set-list{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.set-row{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}

.set-icon{
  width:38px;
  height:38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background: rgba(var(--white),.06);
  border: 1px solid rgba(var(--white),.10);
  color: rgba(var(--text),1);
  flex: 0 0 38px;
}
.set-icon.warn{
  border-color: rgba(var(--yellow),.25);
  background: rgba(var(--yellow),.10);
  color: rgba(var(--yellow-light),1);
}

.set-info{ flex:1; }
.set-title{ font-weight:900; }
.set-sub{
  margin-top: 4px;
  color: rgba(var(--muted),1);
  font-size: 13px;
  line-height: 1.4;
}

/* Toggle row */
.set-toggle-row{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(var(--white),.03);
  border: 1px solid rgba(var(--white),.08);
}
.set-toggle-text{ flex:1; }

/* Mini grid */
.set-mini-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mini-box{
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}
.mini-box .mini-l{
  color: rgba(var(--muted2),1);
  font-size: 12px;
  font-weight: 800;
}
.mini-box .mini-v{
  margin-top: 6px;
  font-weight: 900;
}

/* Notes */
.set-note{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: rgba(var(--muted),1);
  background: rgba(var(--white),.03);
  border:1px solid rgba(var(--white),.08);
  border-radius: 14px;
  padding: 10px;
}

/* Alerts */
.alert-list{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.alert-row{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}
.alert-info{ flex:1; }
.alert-info b{ display:block; }
.alert-info .muted{ margin-top: 4px; }

/* Governance */
.gov-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gov-card{
  padding: 12px;
  border-radius: 16px;
  background: rgba(var(--white),.03);
  border: 1px solid rgba(var(--white),.08);
}
.gov-h{
  color: rgba(var(--muted2),1);
  font-size: 12px;
  font-weight: 800;
}
.gov-v{
  margin-top: 6px;
  font-weight: 900;
  font-size: 16px;
}
.gov-s{
  margin-top: 6px;
  color: rgba(var(--muted),1);
  font-size: 13px;
  line-height: 1.4;
}

.gov-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/*******************************
             BUDGETS
 *******************************/
.budgets-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.seg{
  display:flex;
  gap:8px;
  padding:6px;
  border-radius:999px;
  background: rgba(var(--white),.03);
  border:1px solid rgba(var(--white),.08);
}
.seg-btn{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(var(--white),.10);
  background: rgba(var(--white),.02);
  color: rgba(var(--text),1);
  font-weight: 900;
  transition: .15s ease;
}
.seg-btn:hover{ transform: translateY(-1px); background: rgba(var(--white),.05); }
.seg-btn.active{
  border-color: rgba(var(--cyan),.30);
  background: rgba(var(--cyan),.10);
  color: var(--cyan2);
}

.filters{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.select{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(var(--white),.10);
  background: rgba(0,0,0,.18);
  color: rgba(var(--text),1);
}

/* ── Fix universel select/option ──
   Les <option> sont rendues nativement par le navigateur et ignorent
   les variables CSS ainsi que rgba() — le fond/couleur solides sont
   surchargés dans theme-dark.css et theme-light.css */
select option {
  font-family: inherit;
  font-size: inherit;
}

.kpi-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.kpi-card{ padding: 14px; }
.kpi-label{ color: rgba(var(--muted2),1); font-weight: 900; font-size: 12px; }
.kpi-value{ margin-top: 6px; font-weight: 950; font-size: 26px; }
.kpi-meta{ margin-top: 6px; font-size: 13px; }

.budgets-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
}
.budgets-panel{ padding: 14px; }
.budgets-wide{ grid-column: 1 / -1; }

.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.panel-title{ font-weight: 950; }
.panel-sub{ font-size: 13px; }

.panel-tools{ display:flex; gap:8px; flex-wrap:wrap; }

.budget-chart{
  display:flex;
  gap: 6px;
  align-items:flex-end;
  height: 220px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(var(--white),.03);
  border:1px solid rgba(var(--white),.08);
  overflow:hidden;
}
.month-col{
  flex: 1;
  display:flex;
  flex-direction:column;
  gap: 6px;
  align-items:stretch;
  justify-content:flex-end;
  min-width: 18px;
}
.bar{
  height: 10px;
  border-radius: 10px;
  border: 1px solid rgba(var(--white),.10);
  background: rgba(var(--white),.04);
  box-shadow: var(--shadow2);
}
.bar.planned{ background: rgba(var(--cyan),.14); border-color: rgba(var(--cyan),.22); }
.bar.actual{ background: rgba(var(--white),.10); border-color: rgba(var(--white),.18); }
.bar.forecast{ background: rgba(var(--red),.12); border-color: rgba(var(--red),.20); }

.bar-label{
  text-align:center;
  color: rgba(var(--muted),1);
  font-size: 11px;
  margin-top: 2px;
}

.legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 8px; }
.lg{ color: rgba(var(--muted),1); font-weight: 800; font-size: 13px; display:flex; gap:8px; align-items:center;}
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot.planned{ background: rgba(var(--cyan),.65); }
.dot.actual{ background: rgba(var(--white),.55); }
.dot.forecast{ background: rgba(var(--red),.60); }

.split{
  height:1px;
  background: rgba(var(--white),.08);
  margin: 12px 0;
}

.alerts{ display:flex; flex-direction:column; gap:10px; }
.alert-item{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}
.alert-badge{
  font-weight: 950;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(var(--white),.10);
}
.alert-badge.warn{ background: rgba(var(--yellow),.12); border-color: rgba(var(--yellow),.22); color: rgba(var(--yellow-light),1); }
.alert-badge.danger{ background: rgba(var(--red),.12); border-color: rgba(var(--red),.22); color: rgba(var(--red-light),1); }
.alert-badge.info{ background: rgba(var(--cyan),.10); border-color: rgba(var(--cyan),.20); color: rgba(var(--cyan2),1); }

.alert-body{ flex:1; min-width: 180px; }
.alert-title{ font-weight: 950; }
.alert-sub{ font-size: 13px; margin-top: 2px; }

.savings-list{
  display:flex; 
  flex-direction:column; 
  gap:10px;
}

.saving{
  padding: 12px;
  border-radius: 16px;
  background: rgba(var(--white),.03);
  border:1px solid rgba(var(--white),.08);
}
.saving-top{ display:flex; justify-content:space-between; gap:10px; }
.saving-title{ font-weight: 950; }
.saving-meta{ color: rgba(var(--muted),1); font-size: 13px; margin-top: 4px; }
.pill.tag{
  border-radius:999px;
  padding: 6px 10px;
  font-weight: 900;
  border:1px solid rgba(var(--white),.10);
  background: rgba(var(--white),.03);
  color: rgba(var(--text),1);
}

.breakdown{ display:flex; flex-direction:column; gap:10px; }
.br{
  display:grid;
  grid-template-columns: 220px 1fr 140px;
  gap: 12px;
  align-items:center;
}
.br-name{ font-weight: 900; color: rgba(var(--text),1); }
.br-bar{
  height: 12px;
  border-radius: 999px;
  background: rgba(var(--white),.04);
  border:1px solid rgba(var(--white),.08);
  overflow:hidden;
}
.br-fill{
  height: 100%;
  width: 10%;
  background: rgba(var(--cyan),.16);
  border-right:1px solid rgba(var(--white),.10);
}
.br-val{ text-align:right; color: rgba(var(--muted),1); font-weight: 900; }

.table-wrap{ overflow:auto; border-radius: 16px; border:1px solid rgba(var(--white),.08); }
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table thead th{
  text-align:left;
  padding: 12px;
  font-size: 12px;
  color: rgba(var(--muted2),1);
  font-weight: 950;
  background: rgba(var(--white),.03);
  border-bottom:1px solid rgba(var(--white),.08);
}
.table tbody td{
  padding: 12px;
  border-bottom:1px solid rgba(var(--white),.06);
  color: rgba(var(--text),1);
}
.table tbody tr:hover{ background: rgba(var(--white),.03); }

/* .badge variantes déplacées en §0 — voir ci-dessus */

@media (max-width: 1100px){
  .kpi-row{ grid-template-columns: repeat(2, 1fr); }
  .budgets-grid{ grid-template-columns: 1fr; }
  .br{ grid-template-columns: 1fr; }
  .br-val{ text-align:left; }
}

/*******************************
            RISQUES
 *******************************/
.risk-list{ display:flex; flex-direction:column; gap:10px; }

.risk-card{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(var(--white),.08);
  background: rgba(var(--white),.03);
  box-shadow: var(--shadow2);
  cursor: pointer;
  transition: .12s ease;
}
.risk-card:hover{ transform: translateY(-1px); background: rgba(var(--white),.05); }
.risk-card.active{ border-color: rgba(var(--cyan),.30); background: rgba(var(--cyan),.08); }

.risk-top{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; }
.risk-title{ font-weight: 950; }
.risk-sub{ font-size: 13px; margin-top: 4px; color: rgba(var(--muted),1); }

.risk-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
  align-items:center;
}
.chip{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(var(--white),.10);
  background: rgba(var(--white),.03);
  font-weight: 900;
  font-size: 12px;
  color: rgba(var(--text),1);
}
.chip.muted{ color: rgba(var(--muted),1); }

.risk-actions{ display:flex; gap:8px; margin-top: 10px; flex-wrap:wrap; }

.risk-details{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(var(--white),.08);
  background: rgba(var(--white),.03);
}
.risk-details h3{ margin: 0 0 6px 0; font-size: 16px; }
.risk-details .muted{ margin-top: 6px; }

.sev{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(var(--white),.10);
  font-weight: 950;
  font-size: 12px;
}
.sev.critical{ border-color: rgba(var(--red),.28); background: rgba(var(--red),.10); color: rgba(var(--red-light),1); }
.sev.high{ border-color: rgba(var(--yellow),.28); background: rgba(var(--yellow),.10); color: rgba(var(--yellow-light),1); }
.sev.medium{ border-color: rgba(var(--cyan),.22); background: rgba(var(--cyan),.08); color: var(--cyan2); }
.sev.low{ border-color: rgba(var(--white),.12); background: rgba(var(--white),.03); color: rgba(var(--muted),1); }


/*******************************
          PAGE DE LOGIN
 *******************************/
.login-body{
  background: rgba(var(--bg),1);
  color: rgba(var(--ink),1);
}

.login-shell{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  padding: 18px;
  gap: 18px;
  align-items: center;
  justify-content: center;
}

.login-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Indispensable pour positionner le halo par rapport à ce parent */
  position: relative; 
  /* Optionnel : un peu de padding pour ne pas couper le halo */
  padding: 20px; 
}

.login-brand::before {
  content: "";
  position: absolute;
  left: 50px; /* Aligné sur le centre du logo de 100px */
  top: 50%;
  
  /* Dimensions type "ballon de rugby" */
  width: 140px; 
  height: 60px; /* Plus écrasé pour accentuer l'effet de forme */
  
  /* Le dégradé reste le même */
  background: radial-gradient(
    ellipse at center, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0) 75%
  );
  
  /* L'astuce est ici : on cumule le centrage et la rotation */
  /* -20deg pour une inclinaison vers le haut (sens anti-horaire) */
  transform: translate(-30%, -50%) rotate(-18deg);
  
  z-index: 0;
  filter: blur(8px); /* Un peu plus de flou pour l'aspect "vapeur" */
}
.login-logo {
  width: 100px;
  height: auto;
  position: relative;
  z-index: 1; /* On s'assure que le logo passe au-dessus du halo */
}
.login-name{ font-weight: 950; letter-spacing: .02em; }
.login-sub{ color: rgba(var(--muted),1); font-size: 12px; margin-top:2px; }

.login-main{
  width: 40%;
  flex: 1;
  display: flex;
  /*grid-template-columns: 1fr 1fr;*/
  gap: 18px;
  align-items: center;
  justify-content: center;
}

.login-card{
  padding: 18px;
  display:flex;
  flex-direction:column;
}

.login-head{
  padding: 10px 10px 14px;
}
.login-title{
  margin-top: 10px;
  font-size: 28px;
  font-weight: 950;
}
.login-desc{
  margin-top: 8px;
  color: rgba(var(--muted),1);
  line-height: 1.5;
}

.login-form{
  margin-top: 6px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(var(--white),.03);
  border: 1px solid rgba(var(--white),.08);
}

.login-form .field{ margin-bottom: 12px; }
.login-form .field label{
  display:block;
  font-size: 12px;
  color: rgba(var(--muted2),1);
  font-weight: 900;
  margin-bottom: 6px;
}
.login-form input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(var(--white),.10);
  color: rgba(var(--text),1);
  outline: none;
}
.login-form input::placeholder{ color: rgba(var(--muted),.70); }

.login-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
  margin: 6px 0 12px;
}

.login-link{
  color: rgba(var(--cyan2),1);
  text-decoration:none;
  font-weight: 800;
}
.login-link:hover{ text-decoration: underline; }

.login-actions{
  display:flex;
  flex-wrap:wrap;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 5px 0px 5px 0px;
}
.login-cta{ 
  width: 100%;
  display:flex;
  justify-content: center;
  padding: 5px 0px 5px 0px;
}
.login-cta .cta{ 
  width: 100%;
  max-width: 320px;
}
.cta.provider {
  display: flex;
  width: auto;
  align-items: center;       /* centrage vertical parfait */
  justify-content: center;
  gap: 12px;
  padding-left: 0 16px;
}
.provider-icon{
  height: 90%;               /* clé : proportion de la hauteur du bouton */
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.provider.google .provider-icon {
  background-image: url("Login_google.png");
}
.provider.microsoft .provider-icon {
  background-image: url("Login_microsoft.png");
}
.provider.seven .provider-icon {
  background-image: url("Logo_Seven.png");
}
.login-status{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

.login-note{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: rgba(var(--muted),1);
  background: rgba(var(--white),.03);
  border:1px solid rgba(var(--white),.08);
  border-radius: 14px;
  padding: 10px;
}

/* Right preview panel */
.login-side{
  padding: 18px;
  position:relative;
  overflow:hidden;
}
.login-side-head{ margin-bottom: 12px; }
.login-bullets{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 10px;
}
.bullet{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}
.bullet b{ display:block; }
.login-glow{
  position:absolute;
  inset:-30px;
  background: radial-gradient(circle at 45% 25%, rgba(var(--cyan),.18), transparent 55%);
  filter: blur(45px);
  z-index: -1;
}

/* Footer */
.login-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding: 12px 6px;
  color: rgba(var(--muted),1);
  font-size: 13px;
}
.login-footer-links{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.login-footer a{
  color: rgba(var(--muted),1);
  text-decoration:none;
  font-weight: 800;
}
.login-footer a:hover{
  color: rgba(var(--cyan2),1);
  text-decoration: underline;
}

.login-msg{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--white),.10);
  background: rgba(var(--white),.03);
  color: rgba(var(--muted),1);
  font-weight: 800;
  min-height: 40px;
}

.login-msg.error{
  border-color: rgba(var(--red),.28);
  background: rgba(var(--red),.10);
  color: rgba(var(--red-light),1);
}

.login-msg.ok{
  border-color: rgba(var(--green),.28);
  background: rgba(var(--green),.10);
  color: rgba(var(--green-light),1);
}


/*******************************
          RESPONSIVE
 *******************************/
/* Tablette / petit laptop */
@media (max-width: 1100px){
  :root{
    --rightW: 360px; /* si tu as une variable de largeur chat */
  }
}

/* Mobile / small screens */
@media (max-width: 900px){

  /* 1) Layout principal en une colonne */
  .shell{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
    height: 100vh;
    overflow: hidden;
  }

  /* 2) Main prend tout */
  .main{
    margin-left: 0 !important;   /* plus de décalage latéral */
    min-height: 0;
    overflow: hidden;
  }

  /* 4) Sidebar : en overlay, ne doit pas “pousser” le contenu */
  .sidebar{
    pointer-events: none;
  }

  /* Optionnel : réduire le header/brand sur mobile */
  .sidebar-logo .t{
    display: none;               /* garde juste l’icône */
  }

  /* Optionnel : rendre le panel moins large sur mobile */
  .sidebar-panel{
    width: min(86vw, 320px) !important;
  }
}

/*******************************
          ACCESSIBILITE
 *******************************/
@media (prefers-reduced-motion: reduce){
  .sidebar::after{
    animation: none;
    opacity: 0;
  }
}

/* ============================================================
   §13  COMPOSANTS CANVAS INTERNES
   (tables, gantt, meter, kpi-canvas, badge-convo, popover…)
   Note : .kpi ici surcharge la définition dashboard (§9).
   C'est intentionnel — les artefacts canvas ont un style plus compact.
   ============================================================ */

/* =========================================================
   7. CHAT BODY + INPUT
   ========================================================= */
.chat-body {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(var(--stroke), 1);
  border-radius: 16px;
  background: rgba(var(--surface), 1);
  overflow: auto;
  flex: 1;
  min-height: 260px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.chat-input-row { display: flex; gap: 10px; align-items: flex-end; margin-top: 12px; }
.chat-input-row textarea { flex: 1; resize: none; max-height: 140px; }


/* =========================================================
   8. ZONE THINKING-TEXTE (#aiThinkingZone)
   Les dots visuels .thinking-dot sont dans app-ux2.css §4.
   ========================================================= */
.ai-thinking-zone {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  min-height: 1.4em;
}

.ai-thinking-message {
  font-size: .78rem;
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(var(--muted), 1);
}

.ai-thinking-message.fade-in  { animation: thinkFadeIn  300ms ease forwards; }
.ai-thinking-message.fade-out { animation: thinkFadeOut 250ms ease forwards; }

#aiThinkingZone.thinking-disappear .ai-thinking-message {
  animation: thinkFadeOut 300ms ease forwards;
}

@keyframes thinkFadeIn  {
  from { opacity: 0; transform: translateY( 4px); }
  to   { opacity: 1; transform: translateY( 0);   }
}
@keyframes thinkFadeOut {
  from { opacity: 1; transform: translateY(  0);  }
  to   { opacity: 0; transform: translateY(-4px); }
}


/* =========================================================
   9. CANVAS BODY + ARTEFACTS
   ========================================================= */
.canvas-head  { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.canvas-title { font-size: 18px; font-weight: 900; margin-top: 2px; }
.canvas-sub   { font-size: 13px; margin-top: 2px; }

.canvas-body {
  margin-top: 12px;
  border: 1px solid rgba(var(--stroke), 1);
  border-radius: 16px;
  background: rgba(var(--surface), 1);
  overflow: auto;
  flex: 1;
  min-height: 260px;
  min-width: 0;
  padding: 10px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.canvas-empty { padding: 14px; }

.artifact {
  padding: 12px;
  margin-bottom: 10px;
  min-width: 0;
  animation: cardIn 220ms cubic-bezier(.22,.61,.36,1);
  transform-origin: top;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.artifact-head    { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.artifact-title   { font-weight: 900; font-size: 14px; }
.artifact-body    { margin-top: 10px; }
.artifact-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.artifact-echart  { margin: 10px 0; width: 100%; min-width: 480px; min-height: 220px; }


/* =========================================================
   10. COMPOSANTS INTERNES
   ========================================================= */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } }

.panel       { border: 1px solid rgba(var(--stroke),1); border-radius: 14px; background: rgba(var(--card),1); padding: 10px; }
.panel-title { font-weight: 900; font-size: 13px; margin-bottom: 8px; }

.a-table { display: flex; flex-direction: column; gap: 6px; }
.a-row {
  display: grid;
  grid-template-columns: 1.2fr .6fr .9fr 1.1fr;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(var(--stroke), 1);
  background: rgba(var(--card), 1);
}
.a-head { font-weight: 900; background: rgba(var(--surface2), 1); }

.tag-warn, .tag-critical {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--stroke), 1);
  font-size: 12px;
  font-weight: 800;
}
.tag-warn     { background: rgba(var(--yellow), .14); }
.tag-critical { background: rgba(var(--red),    .14); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(var(--stroke), 1);
  background: rgba(var(--surface2), 1);
}

.gantt-row  { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.gantt-name { width: 110px; color: rgba(var(--muted), 1); font-size: 13px; }
.gantt-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--cyan), .80);
  box-shadow: 0 0 0 1px rgba(var(--stroke), 1) inset;
  transition: width 420ms cubic-bezier(.22,.61,.36,1);
}
.gantt-bar.warn { background: rgba(var(--yellow), .75); }
.gantt-bar.crit { background: rgba(var(--red2),   .75); }

.congestion { display: flex; flex-direction: column; gap: 10px; }
.cong-row   { display: grid; grid-template-columns: 50px 1fr 60px; gap: 10px; align-items: center; }
.meter {
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--surface2), 1);
  overflow: hidden;
  border: 1px solid rgba(var(--stroke), 1);
}
.meter span {
  display: block;
  height: 100%;
  width: 50%;
  background: rgba(var(--green), .85);
  transition: width 420ms cubic-bezier(.22,.61,.36,1);
}

.decisions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.decision {
  border: 1px solid rgba(var(--stroke), 1);
  border-radius: 12px;
  background: rgba(var(--surface2), 1);
  padding: 8px;
  transition: transform 180ms ease, background 180ms ease;
}
.decision:hover { transform: translateY(-1px); background: rgba(var(--surface2), .9); }

.budget-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 980px) { .budget-grid { grid-template-columns: repeat(2, 1fr); } }

.kpi          { border: 1px solid rgba(var(--stroke),1); border-radius: 14px; background: rgba(var(--card),1); padding: 10px; transition: transform 180ms ease; }
.kpi:hover    { transform: translateY(-1px); }
.kpi-val      { font-size: 18px; font-weight: 1000; margin-top: 6px; }
.kpi-val.warn { color: rgba(var(--yellow), 1); }

/* .badge variante canvas/chips — surcharge locale pour les artefacts de conversation */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(var(--cyan), .18);
  border: 1px solid rgba(var(--stroke), 1);
  margin-left: 6px;
}


/* =========================================================
   11. POPOVER INVENTAIRE
   ========================================================= */
.chip-kpi { cursor: default; }

.kpi-hover {
  position: fixed;
  width: 340px;
  z-index: 9999;
  padding: 12px 14px;
  border-radius: 14px;
  backdrop-filter: blur(10px);
  background: rgba(20,20,24,.55);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.kpi-hover.hidden { display: none; }
.kpi-hover-title  { font-weight: 700; margin-bottom: 8px; }
.kpi-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.kpi-row:first-child { border-top: none; }

.inv-pill       { padding: 8px 12px; }
.inv-pill .badge { margin-left: 8px; }

.inv-popover {
  position: fixed;
  z-index: 60;
  width: min(520px, 92vw);
  transform: translateX(-50%);
  padding: 12px 14px;
  background: rgba(var(--panel), 1);
  border: 1px solid rgba(var(--stroke), 1);
  box-shadow: 0 18px 18px rgba(200,200,200,.35);
  backdrop-filter: blur(10px);
}
.inv-popover-title { font-weight: 900; letter-spacing: .2px; margin-bottom: 8px; }
.inv-popover-body  { font-size: 13px; }
.inv-popover-kpi   { font-size: 14px; }
.inv-popover-list  { margin-top: 10px; display: grid; gap: 6px; }
.inv-popover-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(var(--panel), .55);
  border: 1px solid rgba(var(--stroke), .75);
}
.inv-popover-row b { font-weight: 900; }
@media (max-width: 980px) { .inv-popover { width: min(560px, 96vw); } }

/* ============================================================
   §20  ÉCRAN PROJETS
   Correction : .pexp-ms-title dédupliqué (suppression 1ère def
   incomplète, conservation de la version complète avec display:flex).
   ============================================================ */
/* ============================================================
   SEVEN — Écran Projets (v4-final)
   À coller en fin de app.css
   ============================================================ */

/* ── Scroll global .main ───────────────────────────────────── */
.main {
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* ── Layout écran projets ──────────────────────────────────── */

/* Zone haute : donut à gauche, KPIs à droite */
.proj-top {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 14px;
}

/* Carte donut */
.proj-donut-card {
  padding: 14px 12px;
}

.proj-donut-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

/* Canvas ECharts — hauteur fixe impérative */
#projDonutChart {
  width: 100%;
  height: 160px;
  min-height: 160px;
}

/* Légende donut */
#projDonutLegend {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Zone KPIs (droite du donut) */
#projKpisWrap {
  display: flex;
  align-items: stretch;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid rgba(var(--stroke), 1);
  box-shadow: var(--shadow2);
  gap: 0;
  flex-wrap: wrap;
}

.pkpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 110px;
  padding: 6px 16px;
}

.pkpi-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(var(--white), .08);
  flex-shrink: 0;
  margin: 4px 0;
}

.pkpi-val {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(var(--ink), 1);
  line-height: 1.1;
}

.pkpi-lbl {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(var(--muted2), 1);
}

.pkpi-sub {
  font-size: 11px;
  color: rgba(var(--muted), 1);
}

/* ── Zone basse : tableau pleine largeur ───────────────────── */
.proj-table-card {
  margin-top: 16px;
  padding: 12px 10px;
}

/* Scroll interne du tableau */
#projTableWrap {
  max-height: calc(100vh - 420px);
  min-height: 120px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--cyan), .40) rgba(var(--surface2), 1);
}
#projTableWrap::-webkit-scrollbar       { width: 7px; }
#projTableWrap::-webkit-scrollbar-track { background: rgba(var(--surface2),1); border-radius:999px; }
#projTableWrap::-webkit-scrollbar-thumb { background:rgba(var(--cyan),.35); border-radius:999px; }

/* ── Tableau ────────────────────────────────────────────────── */
.ptbl { width: 100%; }

.ptbl-head {
  display: grid;
  grid-template-columns: 28px 1fr 100px 90px 160px 120px 22px;
  gap: 8px;
  padding: 6px 10px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(var(--muted2), 1);
  border-bottom: 1px solid rgba(var(--stroke), 1);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
}

.ptbl-body { display: flex; flex-direction: column; }

.ptbl-row { border-bottom: 1px solid rgba(var(--stroke), 1); }
.ptbl-row:last-child { border-bottom: none; }

.ptbl-row-main {
  display: grid;
  grid-template-columns: 28px 1fr 100px 90px 160px 120px 22px;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  cursor: pointer;
  transition: background .12s ease;
}
.ptbl-row-main:hover              { background: rgba(var(--white), .025); }
.ptbl-row.is-open .ptbl-row-main  { background: rgba(var(--white), .03); }

.ptbl-col-health  { display:flex; align-items:center; justify-content:center; }
.ptbl-col-name    { min-width:0; display:flex; flex-direction:column; gap:1px; }
.ptbl-col-domain  { font-size:12px; }
.ptbl-col-dates   { font-size:12px; white-space:nowrap; }
.ptbl-col-chevron { display:flex; align-items:center; justify-content:center; }

.ptbl-name {
  font-weight: 700;
  font-size: 13px;
  color: rgba(var(--ink), 1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ptbl-code { font-size:10px; letter-spacing:.05em; }

/* Barre progression jalons */
.ptbl-progress-wrap { display:flex; flex-direction:column; gap:3px; }
.ptbl-progress-bar  {
  height: 5px; border-radius: 999px;
  background: rgba(var(--white),.08); overflow:hidden;
}
.ptbl-progress-fill {
  height:100%; border-radius:999px;
  transition: width .35s ease;
}
.ptbl-progress-meta { display:flex; gap:5px; align-items:center; font-size:10.5px; }

.ptbl-late {
  color: rgba(var(--red2),1); font-weight:700; font-size:10px;
  background: rgba(var(--red),.10); border:1px solid rgba(var(--red),.22);
  border-radius:999px; padding:1px 5px;
}

.ptbl-chevron {
  font-size:15px; color:rgba(var(--muted),1); display:inline-block;
  transition: transform .22s cubic-bezier(.22,.61,.36,1); line-height:1;
}

/* ── Panneau expand ─────────────────────────────────────────── */
.ptbl-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.22,.61,.36,1);
}

.pexp-inner {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 18px;
  padding: 12px 10px 14px 38px;
  background: rgba(var(--white),.018);
  border-top: 1px solid rgba(var(--stroke),1);
}

.pexp-left, .pexp-right { display:flex; flex-direction:column; gap:5px; }

.pexp-item  { display:flex; gap:8px; align-items:baseline; font-size:12.5px; }
.pexp-lbl   { color:rgba(var(--muted),1); font-size:11.5px; white-space:nowrap; min-width:100px; }
.pexp-val   { font-weight:700; color:rgba(var(--ink),1); }

.pexp-ms {
  display:grid; grid-template-columns:10px 1fr 68px 76px;
  gap:7px; align-items:center; font-size:12px; padding:2px 0;
}
.pexp-ms-dot  { width:7px; height:7px; border-radius:2px; transform:rotate(45deg); flex-shrink:0; }
.pexp-ms-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(var(--ink),.88); }
.pexp-ms-status         { font-size:10.5px; font-weight:600; color:rgba(var(--muted),1); text-align:right; }
.pexp-ms-status.is-late { color:rgba(var(--red2),1); font-weight:700; }
.pexp-ms-date           { text-align:right; font-size:11px; }

.pexp-actions {
  display:flex; flex-direction:column; gap:6px;
  justify-content:flex-start; align-items:flex-end;
}

/* ── Santé dot ──────────────────────────────────────────────── */
.health-dot {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  font-size:11px; font-weight:800; line-height:1; flex-shrink:0;
}
.health-green  { background:rgba(32,229,166,.15);  color:rgba(32,229,166,1);  border:1px solid rgba(32,229,166,.3); }
.health-orange { background:rgba(255,211,106,.15); color:rgba(255,211,106,1); border:1px solid rgba(255,211,106,.3); }
.health-red    { background:rgba(240,72,65,.15);   color:rgba(240,72,65,1);   border:1px solid rgba(240,72,65,.3); }
.health-blue   { background:rgba(80,220,245,.12);  color:rgba(80,220,245,1);  border:1px solid rgba(80,220,245,.28); }
.health-grey   { background:rgba(170,175,195,.10); color:rgba(170,175,195,.7);border:1px solid rgba(170,175,195,.2); }

/* ── Statut badges ──────────────────────────────────────────── */
.proj-status {
  display:inline-flex; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; border:1px solid rgba(var(--stroke),1); white-space:nowrap;
}
.proj-status.run       { background:rgba(80,220,245,.12);  color:rgba(80,220,245,1);  border-color:rgba(80,220,245,.3); }
.proj-status.plan      { background:rgba(255,211,106,.12); color:rgba(255,211,106,1); border-color:rgba(255,211,106,.3); }
.proj-status.idea      { background:rgba(170,175,195,.10); color:rgba(170,175,195,1); border-color:rgba(170,175,195,.25); }
.proj-status.done      { background:rgba(32,229,166,.12);  color:rgba(32,229,166,1);  border-color:rgba(32,229,166,.3); }
.proj-status.cancelled { background:rgba(240,72,65,.10);   color:rgba(240,72,65,1);   border-color:rgba(240,72,65,.25); }

/* ── Légende donut enrichie ─────────────────────────────────── */
.idl-pct { font-weight:400; font-size:10px; opacity:.60; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .proj-top { grid-template-columns: 1fr; }
  #projDonutChart { height:140px; min-height:140px; }
}
@media (max-width: 860px) {
  .ptbl-head, .ptbl-row-main { grid-template-columns: 24px 1fr 80px 22px; }
  .ptbl-col-domain, .ptbl-col-progress, .ptbl-col-dates { display:none; }
  .pexp-inner { grid-template-columns:1fr; padding-left:12px; }
  .pexp-actions { align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
  #projKpisWrap { flex-wrap:wrap; }
  .pkpi-sep { display:none; }
}

/* ── Patch : colonne Charge projets ──────────────────────────── */

/* Grille : 8 colonnes (ajout colonne charge entre jalons et calendrier) */
.ptbl-row-main {
  grid-template-columns: 28px 1fr 100px 90px 160px 140px 120px 22px;
}

/* Colonne charge */
.ptbl-col-charge { min-width: 0; }
.ptbl-charge-wrap { display: flex; flex-direction: column; gap: 3px; }
.ptbl-charge-bar  {
  height: 5px; border-radius: 999px;
  background: rgba(var(--white),.08); overflow: hidden;
}
.ptbl-charge-meta { display: flex; gap: 4px; align-items: baseline; font-size: 11px; }

/* Bloc charge dans expand */
.pexp-charge-block {
  background: rgba(var(--white),.03);
  border: 1px solid rgba(var(--white),.07);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.pexp-charge-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.pexp-charge-title {
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; opacity: .6;
}
.pexp-charge-kpis  { display: flex; gap: 16px; margin-bottom: 10px; }
.pexp-charge-kpi   { display: flex; flex-direction: column; gap: 2px; }
.pexp-charge-kpi-val { font-size: 16px; font-weight: 600; }
.pexp-charge-kpi-lbl { font-size: 10px; }
.pexp-charge-bar-full {
  height: 6px; border-radius: 3px;
  background: rgba(var(--white),.06); overflow: hidden;
  margin-bottom: 6px;
}
.pexp-charge-desc { font-size: 12px; margin-top: 6px; font-style: italic; }

/* Jalons avec badge charge */
.pexp-ms-charge {
  font-size: 10px;
  background: rgba(var(--white),.07);
  border-radius: 999px;
  padding: 1px 6px;
}
.pexp-ms-title {
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: .6; margin-bottom: 8px;
  display: flex; align-items: center;
}

/* Responsive : masquer charge sur mobile */
@media (max-width: 700px) {
  .ptbl-col-charge { display: none; }
  .ptbl-row-main { grid-template-columns: 24px 1fr 80px 22px; }
}
/* ============================================================
   §22  TOPBAR CENTRALE (.main-topbar, onglets, avatar)
   ============================================================ */
/* ============================================================
   §1 — TOPBAR CENTRALE
   ============================================================ */
.main-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
  border-bottom: 1px solid rgba(var(--stroke), 1);
  background: rgba(var(--bg), 0.72);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 200;
  min-height: 46px;
}

/* Onglets */
.main-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.main-tabs::-webkit-scrollbar { display: none; }

.main-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  height: 46px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(var(--muted), 1);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  letter-spacing: .01em;
  transition: color .18s ease, border-color .18s ease;
  position: relative;
  text-decoration: none;
}
.main-tab:hover  { color: rgba(var(--ink), 1); }
.main-tab.active { color: rgba(var(--ink), 1); font-weight: 700; border-bottom-color: rgba(var(--cyan), 1); }

/* Glow sous l'onglet actif */
.main-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 20%;
  right: 20%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: rgba(var(--cyan), 1);
  filter: blur(4px);
  opacity: .55;
}

/* Actions droite */
.main-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-right: 8px;
}

.topbar-icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: none;
  border: none;
  color: rgba(var(--muted), 1);
  transition: background .15s ease, color .15s ease;
}
.topbar-icon-btn:hover { background: rgba(var(--white), .06); color: rgba(var(--ink), 1); }
.topbar-icon-btn svg   { width: 20px; height: 20px; flex-shrink: 0; }

/* Badge cloche */
.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(var(--red), 1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(var(--bg), 1);
  line-height: 1;
  pointer-events: none;
}
.notif-badge:empty,
.notif-badge[data-count="0"] { display: none; }

/* Avatar user */
.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--cyan),.35), rgba(var(--cyan2),.18));
  border: 1.5px solid rgba(var(--cyan), .35);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: rgba(var(--cyan3), 1);
  cursor: pointer;
  user-select: none;
  transition: box-shadow .15s ease, border-color .15s ease;
  letter-spacing: .02em;
}
.topbar-avatar:hover { box-shadow: 0 0 0 3px rgba(var(--cyan),.18); border-color: rgba(var(--cyan),.6); }


/* ============================================================
   §2 — MENU DÉROULANT USER
   ============================================================ */
.user-menu-wrap { position: relative; }

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: rgba(var(--bg2), .97);
  border: 1px solid rgba(var(--stroke), 1);
  border-radius: 16px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter: blur(16px);
  padding: 6px;
  z-index: 9000;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.user-dropdown.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.user-dropdown-header  { padding: 10px 12px 8px; border-bottom: 1px solid rgba(var(--stroke),1); margin-bottom: 4px; }
.user-dropdown-name    { font-size: 13px; font-weight: 800; color: rgba(var(--ink), 1); }
.user-dropdown-email   { font-size: 11px; color: rgba(var(--muted), 1); margin-top: 2px; }

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(var(--ink), 1);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
  transition: background .13s ease;
}
.user-dropdown-item:hover          { background: rgba(var(--white), .06); }
.user-dropdown-item svg            { width: 16px; height: 16px; flex-shrink: 0; color: rgba(var(--muted), 1); }
.user-dropdown-sep                 { height: 1px; background: rgba(var(--stroke), 1); margin: 4px 0; }
.user-dropdown-item.danger         { color: rgba(var(--red2), 1); }
.user-dropdown-item.danger svg     { color: rgba(var(--red2), 1); }
.user-dropdown-item.danger:hover   { background: rgba(var(--red), .08); }


/* ============================================================
   §24  BULLES CHAT & THINKING DOTS
   Source unique de vérité — ne pas redéclarer dans d'autres sections.
   ============================================================ */

/* ============================================================
   §3 — BULLES CHAT
   Source unique de vérité. Ne pas redéclarer dans app-convo.css.
   ============================================================ */
.bubble {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 18px;
  margin: 6px 0;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
  /* "both" retiré — c'était la cause du blocage à opacity:0 */
  animation: bubbleIn 200ms cubic-bezier(.22,.61,.36,1);
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

/* Bulle utilisateur */
.bubble.user {
  margin-left: auto;
  margin-right: 4px;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(var(--red), .22), transparent 65%),
    rgba(var(--red), .09);
  border: 1px solid rgba(var(--red), .28);
  border-bottom-right-radius: 5px;
  color: rgba(var(--ink), 1);
  box-shadow:
    0 2px 12px rgba(var(--red), .18),
    0 0 0 1px rgba(var(--red), .08) inset,
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Bulle IA */
.bubble.ai {
  margin-right: auto;
  margin-left: 4px;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(var(--cyan), .20), transparent 65%),
    rgba(var(--cyan), .07);
  border: 1px solid rgba(var(--cyan), .25);
  border-bottom-left-radius: 5px;
  color: rgba(var(--ink), 1);
  box-shadow:
    0 2px 12px rgba(var(--cyan), .14),
    0 0 0 1px rgba(var(--cyan), .06) inset,
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Hover glow */
.bubble.user:hover {
  box-shadow:
    0 4px 20px rgba(var(--red), .28),
    0 0 0 1px rgba(var(--red), .14) inset,
    inset 0 1px 0 rgba(255,255,255,.08);
}
.bubble.ai:hover {
  box-shadow:
    0 4px 20px rgba(var(--cyan), .22),
    0 0 0 1px rgba(var(--cyan), .10) inset,
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Métadonnée optionnelle */
.bubble-meta { font-size: 10.5px; color: rgba(var(--muted), .7); margin-top: 5px; text-align: right; }
.bubble.ai .bubble-meta { text-align: left; }


/* ============================================================
   §4 — THINKING DOTS
   Bulle IA avec trois points en vague.
   Injectée par chat.js : <div class="bubble ai thinking">…</div>
   ============================================================ */

/* Surcharge légère de .bubble.ai pour l'état thinking */
.bubble.ai.thinking {
  padding: 12px 16px;
  width: fit-content;
  min-width: 52px;
  line-height: 1;
  /* Les autres propriétés héritent de .bubble.ai */
}

/* Conteneur */
.thinking-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 14px;
  overflow: visible;
}

/* Un point */
.thinking-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--cyan2), 1);
  box-shadow: 0 0 4px 1px rgba(var(--cyan), .5);
  animation: dotWave 1.3s ease-in-out infinite;
  flex-shrink: 0;
}
.thinking-dot:nth-child(1) { animation-delay: 0s;    }
.thinking-dot:nth-child(2) { animation-delay: .18s;  }
.thinking-dot:nth-child(3) { animation-delay: .36s;  }

@keyframes dotWave {
  0%, 60%, 100% { transform: translateY(0);    opacity: .45; }
  30%            { transform: translateY(-4px); opacity: 1;   }
}


/* ============================================================
   §5 — BOUTON ENVOYER (#chatSend)
   ============================================================ */
#chatSend {
  width: 46px;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  align-self: flex-end;
  padding: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid rgba(var(--cyan), .35);
  background:
    radial-gradient(circle at 30% 25%, rgba(var(--cyan2), .30), transparent 55%),
    linear-gradient(180deg, rgba(var(--cyan), .18), rgba(var(--cyan), .08));
  color: rgba(var(--cyan3), 1);
  box-shadow:
    0 10px 20px rgba(0,0,0,.25),
    0 0 0 1px rgba(var(--stroke), 1) inset;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
#chatSend:hover  { transform: translateY(-1px); filter: brightness(1.06); }
#chatSend:active { transform: translateY(0); }

/* Icône SVG */
.send-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  pointer-events: none;
}

/* ── État : envoi (burst) ── */
@keyframes sendBurst {
  0%   { box-shadow: 0 0 0  0px rgba(var(--cyan), .00); }
  30%  { box-shadow: 0 0 0 10px rgba(var(--cyan), .18); }
  100% { box-shadow: 0 0 0 18px rgba(var(--cyan), .00); }
}
#chatSend.sent { animation: sendBurst 520ms ease-out; }

/* ── État : thinking (orbite) ── */
/* On masque l'icône et on affiche une particule en orbite */
#chatSend.thinking .send-icon { opacity: 0; }

#chatSend.thinking::before { display: none; content: none; }

#chatSend.thinking::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--cyan2), 1);
  box-shadow: 0 0 6px 2px rgba(var(--cyan), .8);
  offset-path: circle(14px at center);
  offset-distance: 0%;
  animation: orbit 1s linear infinite;
}

@keyframes orbit {
  to { offset-distance: 100%; }
}

/* ── État : streaming (trait qui écrit) ── */
#chatSend.streaming::before { display: none; }

#chatSend.streaming::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: rgba(var(--cyan2), 1);
  box-shadow: 0 0 6px 2px rgba(var(--cyan), .7);
  animation: writing 1.2s ease-in-out infinite;
}

@keyframes writing {
  0%   { transform: translate(-12px,  2px) scaleX(0.4); opacity: 0;   }
  15%  { transform: translate(-10px,  1px) scaleX(1.0); opacity: 1;   }
  40%  { transform: translate(  0px,  0px) scaleX(1.0); opacity: 1;   }
  65%  { transform: translate( 10px, -1px) scaleX(1.0); opacity: 1;   }
  85%  { transform: translate( 12px, -2px) scaleX(0.6); opacity: 0.4; }
  100% { transform: translate(-12px,  2px) scaleX(0.4); opacity: 0;   }
}

/* ============================================================
   §26  HISTORIQUE (.history-*)
   ============================================================ */
/* ============================================================
   §6 — HISTORIQUE (.history-*)
   ============================================================ */
.history-toolbar      { display: flex; align-items: center; gap: 12px; padding: 12px 0 8px; }
.history-search-input { flex: 1; min-width: 0; }
.history-count-label  { white-space: nowrap; font-size: .8rem; }

.history-list { display: flex; flex-direction: column; gap: 12px; padding: 8px 0 32px; }

.history-card {
  background: var(--surface2, #1e2030);
  border: 1px solid var(--border, #2d3148);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color .15s;
}
.history-card:hover { border-color: var(--accent, #7c85f5); }

.history-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.history-card-title   { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; }
.history-card-icon    { flex-shrink: 0; }
.history-card-meta    { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: .8rem; }
.history-card-summary { margin-top: 6px; font-size: .85rem; line-height: 1.4; }
.history-card-tags    { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.history-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

.history-card-preview {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #2d3148);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
}

.history-bubble { max-width: 88%; font-size: .84rem; }
.history-more   { font-size: .78rem; padding: 4px 8px; text-align: center; }

.history-resume-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent, #7c85f5) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #7c85f5) 30%, transparent);
  border-radius: 10px;
  font-size: .84rem;
  color: var(--fg, #cdd6f4);
  margin-bottom: 4px;
}
.history-resume-icon { font-size: 1rem; flex-shrink: 0; }

.history-loading,
.history-empty,
.history-error { padding: 32px 0; text-align: center; font-size: .88rem; line-height: 1.6; }

/* ============================================================
   §27  DRAWER, SCROLLBARS, TOAST, RENDERS LIBRARY
   ============================================================ */
/* =========================================================
   12. DRAWER (Épingles)
   ========================================================= */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 10010;
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 92vw);
  background-color: #0f1116 !important;
  opacity: 1;
  color: inherit;
  transform: translateX(110%);
  transition: transform 160ms ease;
  z-index: 10020;
  pointer-events: none;
}
.drawer.open { transform: translateX(0); pointer-events: auto; }
.drawer[hidden], .drawer-backdrop[hidden] { display: none !important; }

.drawer-head    { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.drawer-title   { font-size: 18px; font-weight: 1000; }
.drawer-sub     { font-size: 13px; margin-top: 2px; }
.drawer-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.drawer-body {
  margin-top: 12px;
  border: 1px solid rgba(var(--stroke), 1);
  border-radius: 16px;
  background: rgba(var(--surface), 1);
  overflow: auto;
  flex: 1;
  min-height: 260px;
  padding: 10px;
  overscroll-behavior: contain;
}

.pins-search { margin-bottom: 10px; }
.pins-empty  { padding: 12px; }
.pins-list   { display: flex; flex-direction: column; gap: 10px; }

.pin-card   { border: 1px solid rgba(var(--stroke),1); border-radius: 16px; background: rgba(var(--card),1); padding: 12px; transition: transform 180ms ease; }
.pin-card:hover { transform: translateY(-1px); }
.pin-top     { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pin-name    { font-weight: 1000; font-size: 14px; }
.pin-meta    { font-size: 12px; margin-top: 4px; }
.pin-tags    { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pin-actions { display: flex; flex-direction: column; gap: 8px; }
.pin-foot    { margin-top: 10px; font-size: 12px; }


/* =========================================================
   13. SCROLLBARS (chat-body / canvas-body / drawer-body)
   ========================================================= */
.chat-body, .canvas-body, .drawer-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--cyan), .55) rgba(var(--surface2), 1);
}
.chat-body::-webkit-scrollbar,
.canvas-body::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar { width: 10px; height: 10px; }

.chat-body::-webkit-scrollbar-track,
.canvas-body::-webkit-scrollbar-track,
.drawer-body::-webkit-scrollbar-track { background: rgba(var(--surface2),1); border-radius: 999px; }

.chat-body::-webkit-scrollbar-thumb,
.canvas-body::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb { background: rgba(var(--cyan),.45); border: 2px solid rgba(var(--surface2),1); border-radius: 999px; }

.chat-body::-webkit-scrollbar-thumb:hover,
.canvas-body::-webkit-scrollbar-thumb:hover,
.drawer-body::-webkit-scrollbar-thumb:hover { background: rgba(var(--cyan), .65); }

.chat-body::-webkit-scrollbar-corner,
.canvas-body::-webkit-scrollbar-corner,
.drawer-body::-webkit-scrollbar-corner { background: transparent; }


/* =========================================================
   14. TOAST
   ========================================================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  z-index: 200;
  padding: 10px 12px;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.22,.61,.36,1);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* =========================================================
   15. RENDERS LIBRARY
   ========================================================= */
.renders-meta { font-size: 12px; margin: 6px 0 10px; }
.renders-list { display: flex; flex-direction: column; gap: 10px; }

.render-card       { border: 1px solid rgba(var(--stroke),1); border-radius: 16px; background: rgba(var(--card),1); padding: 12px; transition: transform 180ms ease; }
.render-card:hover { transform: translateY(-1px); }
.render-top        { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.render-name       { font-weight: 1000; font-size: 14px; }
.render-sub        { font-size: 12px; margin-top: 4px; }
.render-tags       { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.render-thumb      { width: 86px; height: 54px; border-radius: 12px; border: 1px solid rgba(var(--stroke),1); background: rgba(var(--surface2),1); overflow: hidden; flex: 0 0 86px; }



/* ============================================================
   §28  RESPONSIVE
   ============================================================ */

/* ── Shell & sidebar (ex app.css) ── */
@media (max-width: 1100px){
  :root{
    --rightW: 360px;
  }
}

@media (max-width: 900px){
  .shell{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
    height: 100vh;
    overflow: hidden;
  }
  .main{
    margin-left: 0 !important;
    min-height: 0;
    overflow: hidden;
  }
  .sidebar{
    pointer-events: none;
  }
  .sidebar-logo .t{
    display: none;
  }
  .sidebar-panel{
    width: min(86vw, 320px) !important;
  }
}

/* ── Grille convo (ex app-convo.css) ── */
@media (max-width: 980px) {
  .hide-sm { display: none; }
  .convo-main[data-layout="compagnon"],
  .convo-main[data-layout="artefacts"] { grid-template-columns: 1fr; }
  .two-col        { grid-template-columns: 1fr; }
  .budget-grid    { grid-template-columns: repeat(2, 1fr); }
  .inv-popover    { width: min(560px, 96vw); }
}

@media (max-width: 1100px) {
  .hide-sm     { display: inline !important; }
  .top-actions { flex-wrap: wrap; gap: 8px; }
  .kpi-row     { grid-template-columns: repeat(2, 1fr); }
  .budgets-grid{ grid-template-columns: 1fr; }
  .br          { grid-template-columns: 1fr; }
  .br-val      { text-align: left; }
}

/* ── Projets responsive (ex app.css fin) ── */
@media (max-width: 1000px) {
  .proj-top { grid-template-columns: 1fr; }
  #projDonutChart { height: 140px; min-height: 140px; }
}
@media (max-width: 860px) {
  .ptbl-head, .ptbl-row-main { grid-template-columns: 24px 1fr 80px 22px; }
  .ptbl-col-domain, .ptbl-col-progress, .ptbl-col-dates { display: none; }
  .pexp-inner { grid-template-columns: 1fr; padding-left: 12px; }
  .pexp-actions { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  #projKpisWrap { flex-wrap: wrap; }
  .pkpi-sep { display: none; }
}
@media (max-width: 700px) {
  .ptbl-col-charge { display: none; }
  .ptbl-row-main { grid-template-columns: 24px 1fr 80px 22px; }
}

/* ============================================================
   §29  REDUCED MOTION (fusion des 3 fichiers)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Sidebar spark */
  .sidebar::after { animation: none; opacity: 0; }

  /* Bulles, thinking, topbar, send */
  .bubble,
  .thinking-dot,
  .main-tab,
  .user-dropdown,
  .topbar-icon-btn,
  #chatSend,
  #chatSend::before,
  #chatSend::after { animation: none !important; transition: none !important; }

  /* Layout convo + artefacts */
  .convo-main, .convo-chat, .convo-canvas,
  .drawer, .toast, .artifact, .ai-thinking-message {
    transition: none !important;
    animation: none !important;
  }

  /* Barres de progression */
  .gantt-bar, .meter span { transition: none !important; }
}