/* =========================================================
   STYLES iBoom — composants (s'appuient sur charte.css)
   ========================================================= */
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; font-family:var(--eb-font); color:var(--eb-texte); background:var(--eb-gris-1); font-size:15px; line-height:1.5; }
.cache { display:none !important; }
button { font-family:inherit; }

/* logo (image) */
.logo-img { display:block; width:auto; height:auto; }
.logo-login { width:140px; max-width:60%; margin:0 auto 6px; }
.logo-header { height:40px; }
.appheader-sous { font-size:9px; font-weight:500; letter-spacing:.2em; color:var(--eb-teal); text-transform:uppercase; }

/* boutons */
.btn { font-size:14px; font-weight:600; padding:9px 18px; border-radius:var(--eb-radius-s); border:1px solid transparent; cursor:pointer; transition:background .12s,filter .12s,border-color .12s; }
.btn:focus-visible { outline:3px solid rgba(127,201,196,.6); outline-offset:2px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primaire { background:var(--eb-bleu-nuit); color:#fff; }
.btn-primaire:hover { background:var(--eb-bleu-nuit-2); }
.btn-accent { background:var(--eb-rouge); color:#fff; }
.btn-accent:hover { background:var(--eb-rouge-fonce); }
.btn-succes { background:var(--eb-succes); color:#fff; }
.btn-secondaire { background:#fff; color:var(--eb-bleu-nuit); border-color:var(--eb-gris-3); }
.btn-secondaire:hover { background:var(--eb-gris-1); }
.btn-ghost { background:transparent; color:var(--eb-texte-2); }
.btn-ghost:hover { color:var(--eb-texte); background:rgba(255,255,255,.12); }

/* badges */
.badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; }
.badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge-attente { color:var(--eb-attente); background:var(--eb-attente-bg); }
.badge-resolue { color:var(--eb-succes); background:var(--eb-succes-bg); }
.badge-expiree { color:var(--eb-neutre); background:var(--eb-neutre-bg); }
.badge-univers { color:var(--eb-teal-fonce); background:var(--eb-menthe-clair); }
.badge-tache { color:var(--eb-texte-2); background:var(--eb-neutre-bg); }
.badge-encours { color:var(--eb-teal-fonce); background:var(--eb-menthe-clair); }
.badge-erreur { color:var(--eb-alerte); background:var(--eb-alerte-bg); }

/* ECRAN DE CONNEXION */
#vue-login { min-height:100%; display:grid; place-items:center; background:linear-gradient(160deg,var(--eb-bleu-nuit) 0%,var(--eb-bleu-nuit-2) 60%,#222838 100%); padding:24px; }
.login-card { width:100%; max-width:380px; background:#fff; border-radius:var(--eb-radius); box-shadow:var(--eb-ombre-fort); overflow:hidden; }
.login-head { background:var(--eb-rouge); height:6px; }
.login-body { padding:32px 30px 28px; }
.login-body .accroche { text-align:center; color:var(--eb-texte-2); font-size:13px; margin:4px 0 24px; }
.champ { margin-bottom:14px; }
.champ label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.champ input { width:100%; font-family:inherit; font-size:14px; padding:10px 12px; border:1px solid var(--eb-gris-3); border-radius:var(--eb-radius-s); }
.champ input:focus { outline:none; border-color:var(--eb-teal); box-shadow:0 0 0 3px rgba(127,201,196,.25); }
.login-erreur { color:var(--eb-alerte); font-size:13px; min-height:18px; margin:4px 0 10px; }
.login-card .btn-primaire { width:100%; padding:11px; font-size:15px; }
.login-demo { margin-top:14px; text-align:center; font-size:11px; color:var(--eb-texte-2); }

/* APPLICATION */
#vue-app { min-height:100%; display:flex; flex-direction:column; }
.bandeau-demo { background:var(--eb-attente-bg); color:var(--eb-attente); font-size:12px; font-weight:600; text-align:center; padding:5px; }
.topbar { background:var(--eb-rouge); color:#fff; font-size:12px; letter-spacing:.05em; padding:6px 22px; display:flex; align-items:center; gap:16px; justify-content:flex-end; }
.topbar .user { text-transform:uppercase; opacity:.95; }
.appheader { background:var(--eb-bleu-nuit); color:#fff; padding:14px 22px; display:flex; align-items:center; gap:16px; }

/* recherche globale (header) */
.recherche { position:relative; flex:1; max-width:420px; }
.recherche-input { width:100%; font-family:inherit; font-size:14px; padding:8px 16px; border-radius:999px; border:1px solid transparent; background:rgba(255,255,255,.14); color:#fff; }
.recherche-input::placeholder { color:rgba(255,255,255,.7); }
.recherche-input:focus { outline:none; background:#fff; color:var(--eb-texte); border-color:var(--eb-teal); box-shadow:0 0 0 3px rgba(127,201,196,.3); }
.recherche-resultats { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--eb-gris-2); border-radius:var(--eb-radius); box-shadow:var(--eb-ombre-fort); max-height:320px; overflow:auto; }
.recherche-item { display:flex; flex-direction:column; gap:1px; padding:8px 12px; border-radius:var(--eb-radius-s); cursor:pointer; }
.recherche-item:hover, .recherche-item.survol { background:var(--eb-menthe-clair); }
.recherche-item .r-titre { font-size:14px; font-weight:600; color:var(--eb-texte); }
.recherche-item .r-chemin { font-size:11px; color:var(--eb-texte-2); }
.recherche-vide { padding:12px; text-align:center; font-size:13px; color:var(--eb-texte-2); }
.corps { flex:1; display:flex; min-height:0; }

/* sidebar */
.sidebar { width:var(--eb-sidebar); background:#fff; border-right:1px solid var(--eb-gris-2); padding:16px 12px; flex:0 0 auto; }
.sidebar .groupe-titre { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--eb-texte-2); font-weight:700; padding:8px 12px 6px; }
.nav-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent; border:none; cursor:pointer; padding:11px 12px; border-radius:var(--eb-radius-s); color:var(--eb-texte); font-size:14px; font-weight:600; border-left:3px solid transparent; }
.nav-item:hover { background:var(--eb-gris-1); }
.nav-item.actif { background:var(--eb-menthe-clair); border-left-color:var(--eb-teal); color:var(--eb-bleu-nuit); }
.nav-dot { width:8px; height:8px; border-radius:50%; background:var(--eb-teal); flex:0 0 auto; }
.nav-item.actif .nav-dot { background:var(--eb-rouge); }
.nav-sub { display:block; font-size:11px; font-weight:500; color:var(--eb-texte-2); }

/* groupes deroulants + sous-menus */
.nav-chevron { margin-left:auto; font-size:11px; color:var(--eb-texte-2); transition:transform .15s; }
.nav-groupe[aria-expanded="true"] .nav-chevron { transform:rotate(90deg); }
.nav-sous-menu { display:flex; flex-direction:column; gap:2px; margin:2px 0 4px; }
.nav-enfant { padding-left:30px; font-weight:500; }
.nav-enfant .nav-dot { width:6px; height:6px; }
.nav-petit-enfant { padding-left:46px; }

/* zone principale */
.zone { flex:1; overflow:auto; padding:28px 32px 60px; }
.zone h1 { font-size:24px; margin:0 0 4px; }
.zone .sous-titre { color:var(--eb-texte-2); margin:0 0 24px; }
.bloc-titre { font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--eb-texte-2); font-weight:700; margin:32px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--eb-gris-2); }

/* widgets */
.grille-widgets { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.widget-vide { border:2px dashed var(--eb-gris-3); border-radius:var(--eb-radius); min-height:130px; display:grid; place-items:center; text-align:center; color:var(--eb-texte-2); font-size:13px; background:repeating-linear-gradient(45deg,#fff,#fff 10px,var(--eb-gris-1) 10px,var(--eb-gris-1) 20px); }

/* cartes / tableaux */
.card { background:#fff; border:1px solid var(--eb-gris-2); border-radius:var(--eb-radius); box-shadow:var(--eb-ombre); overflow:hidden; }
table.tbl { width:100%; border-collapse:collapse; font-size:14px; }
table.tbl th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--eb-texte-2); font-weight:700; padding:12px 16px; background:var(--eb-gris-1); border-bottom:1px solid var(--eb-gris-2); }
table.tbl td { padding:12px 16px; border-bottom:1px solid var(--eb-gris-2); }
table.tbl tr:last-child td { border-bottom:none; }
table.tbl tbody tr:hover { background:var(--eb-menthe-clair); }
table.tbl code { font-size:12px; color:var(--eb-texte-2); }
.placeholder-bloc { background:#fff; border:1px solid var(--eb-gris-2); border-radius:var(--eb-radius); padding:40px; text-align:center; color:var(--eb-texte-2); }

/* assistant / chat */
.chat { display:flex; flex-direction:column; height:calc(100vh - 280px); min-height:360px; }
.chat-fil { flex:1; overflow:auto; padding:18px; display:flex; flex-direction:column; gap:12px; background:var(--eb-gris-1); }
.msg { max-width:680px; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.45; }
.msg-user { align-self:flex-end; background:var(--eb-bleu-nuit); color:#fff; border-bottom-right-radius:4px; }
.msg-bot { align-self:flex-start; background:#fff; border:1px solid var(--eb-gris-2); border-bottom-left-radius:4px; }
.msg-etiquettes { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
/* indicateur "reponse en cours" (3 points qui rebondissent) */
.typing { display:inline-flex; align-items:center; gap:5px; padding:2px 0; }
.typing span { width:7px; height:7px; border-radius:50%; background:var(--eb-teal); animation:typing-rebond 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay:.18s; }
.typing span:nth-child(3) { animation-delay:.36s; }
@keyframes typing-rebond { 0%,80%,100% { transform:translateY(0); opacity:.4; } 40% { transform:translateY(-5px); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .typing span { animation:typing-pulse 1.2s infinite ease-in-out; } @keyframes typing-pulse { 0%,100% { opacity:.4; } 50% { opacity:1; } } }
.chat-saisie { display:flex; gap:10px; padding:14px; border-top:1px solid var(--eb-gris-2); background:#fff; }
.chat-saisie input { flex:1; font-family:inherit; font-size:14px; padding:10px 14px; border:1px solid var(--eb-gris-3); border-radius:999px; }
.chat-saisie input:focus { outline:none; border-color:var(--eb-teal); box-shadow:0 0 0 3px rgba(127,201,196,.25); }

@media (max-width:720px){
  .sidebar { width:64px; }
  .nav-item span.lbl, .nav-sub, .groupe-titre { display:none; }
  .zone { padding:20px 16px 50px; }
  .chat { height:70vh; }
  .logo-header { height:32px; }
}

/* =========================================================
   FILE GUSTAVE (file d'execution n8n) — styles prives du shell
   ========================================================= */
.gustave-entete { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.gustave-entete-actions { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.gustave-maj { font-size:12px; color:var(--eb-texte-2); }

/* KPIs */
.gustave-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:4px 0 22px; }
.gustave-kpi { padding:16px 18px; display:flex; flex-direction:column; gap:5px; }
.gustave-kpi .kpi-valeur { font-size:26px; font-weight:700; color:var(--eb-bleu-nuit); line-height:1; }
.gustave-kpi .kpi-label { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--eb-texte-2); font-weight:600; }
.gustave-kpi-backlog { background:var(--eb-bleu-nuit); border-color:var(--eb-bleu-nuit); }
.gustave-kpi-backlog .kpi-valeur, .gustave-kpi-backlog .kpi-label { color:#fff; }

/* Barre de filtres */
.gustave-filtres { padding:16px 18px; margin-bottom:18px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; }
.gustave-filtres .champ { margin-bottom:0; }
.gustave-filtres .champ label, .gustave-filtres legend { display:block; font-size:13px; font-weight:600; margin-bottom:6px; padding:0; }
.gustave-filtres select,
.gustave-filtres input[type="text"],
.gustave-filtres input[type="date"] { width:auto; min-width:150px; font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--eb-gris-3); border-radius:var(--eb-radius-s); background:#fff; color:var(--eb-texte); }
.gustave-filtres select:focus, .gustave-filtres input:focus { outline:none; border-color:var(--eb-teal); box-shadow:0 0 0 3px rgba(127,201,196,.25); }
.gustave-statut-filtre { border:none; padding:0; margin:0; }
.gustave-statut-options { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; min-height:38px; }
.gustave-statut-filtre .case { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; }
.gustave-statut-filtre input[type="checkbox"] { width:auto; margin:0; flex:0 0 auto; }
.gustave-filtre-recherche { flex:1; min-width:200px; }
.gustave-filtre-recherche input { width:100%; }
.gustave-filtre-reset { margin-left:auto; align-self:flex-end; }

/* Tableau */
.gustave-tbl .th-triable { cursor:pointer; user-select:none; white-space:nowrap; }
.gustave-tbl .th-triable:hover { color:var(--eb-texte); }
.gustave-tbl th.tri-asc::after { content:" ▲"; font-size:9px; }
.gustave-tbl th.tri-desc::after { content:" ▼"; font-size:9px; }
.gustave-tbl th.col-actions, .gustave-tbl td.gustave-actions { text-align:right; }
.gustave-tbl tr.ligne-erreur { background:var(--eb-alerte-bg); }
.gustave-tbl tr.ligne-erreur:hover { background:var(--eb-alerte-bg); }
.gustave-tbl tr.ligne-enfant td:first-child { padding-left:28px; }
.marque-chaine { color:var(--eb-texte-2); margin-right:6px; }
.suffixe-differe { color:var(--eb-attente); font-size:12px; font-weight:600; }

/* Etats chargement / vide / erreur */
.gustave-etat { text-align:center; color:var(--eb-texte-2); padding:28px !important; }
.gustave-etat-erreur { color:var(--eb-alerte); }

/* Boutons d'action icone */
.btn-icone { background:transparent; border:none; cursor:pointer; padding:6px; border-radius:var(--eb-radius-s); color:var(--eb-texte-2); display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.btn-icone + .btn-icone { margin-left:2px; }
.btn-icone:hover { background:var(--eb-gris-1); color:var(--eb-bleu-nuit); }
.btn-icone:focus-visible { outline:3px solid rgba(127,201,196,.6); outline-offset:1px; }
.btn-icone.danger:hover { color:var(--eb-alerte); background:var(--eb-alerte-bg); }

/* Pagination */
.gustave-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap; }
.gustave-pagination .pagination-info, .gustave-pagination .pagination-pos { font-size:13px; color:var(--eb-texte-2); }
.gustave-pagination .pagination-nav { display:flex; align-items:center; gap:10px; }
.gustave-pagination .btn { padding:6px 12px; }

/* Tiroir detail (lateral droit) */
.gustave-drawer-overlay { position:fixed; inset:0; background:rgba(44,50,72,.28); z-index:40; }
.gustave-drawer { position:fixed; top:0; right:0; height:100vh; width:420px; max-width:90vw; background:#fff; box-shadow:var(--eb-ombre-fort); z-index:41; transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column; }
.gustave-drawer.ouvert { transform:translateX(0); }
.gustave-drawer-entete { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--eb-gris-2); }
.gustave-drawer-titres { display:flex; flex-direction:column; gap:8px; }
.gustave-drawer-entete h2 { font-size:17px; margin:0; word-break:break-word; }
.gustave-drawer-corps { flex:1; overflow:auto; padding:20px; }
.gustave-drawer-placeholder { border:2px dashed var(--eb-gris-3); border-radius:var(--eb-radius); padding:32px 20px; text-align:center; color:var(--eb-texte-2); font-size:13px; }
.gustave-drawer-placeholder code { font-size:12px; color:var(--eb-texte); }
.gustave-drawer-actions { display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--eb-gris-2); }
.gustave-drawer-actions .btn { flex:1; padding:9px; }
#drawer-fermer { font-size:16px; padding:6px 10px; }

/* Toast (ex. action simulee) */
.gustave-toast { position:fixed; bottom:24px; right:24px; z-index:60; background:var(--eb-bleu-nuit); color:#fff; padding:11px 16px; border-radius:var(--eb-radius); box-shadow:var(--eb-ombre-fort); font-size:13px; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s, transform .2s; }
.gustave-toast.visible { opacity:1; transform:translateY(0); }

@media (max-width:720px){
  .gustave-entete { flex-direction:column; }
  .gustave-filtre-reset { margin-left:0; }
  .gustave-drawer { width:100%; max-width:100vw; }
}