/* =========================================================================
   KUDO POP v3  -  DA ATELIER (reference exacte outils.elevengroupe.com/atelier)
   Fond creme + degrade soleil, cartes 20px liseree, Poppins 800, FAB degrade.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root{
  --pop-bg:#fdf8f2;
  --pop-ink:#2d3436;
  --pop-ink2:#7a8085;
  --pop-card:#ffffff;
  --pop-line:#efe6d8;
  --pop-radius:20px;
  --pop-radius-sm:14px;
  --pop-shadow:0 6px 18px rgba(45,52,54,.09);
  --pop-shadow-lg:0 14px 34px rgba(45,52,54,.16);
  --sun:#ffc93c;
  --fil-reno:#e73e24; --fil-locco:#f1dc04; --fil-immo:#0a5f83; --fil-elin:#36523c; --fil-violet:#7a5cc0;
  --grad-cta:linear-gradient(135deg,#e73e24,#f05c16);
  --grad-immo:linear-gradient(135deg,#0a5f83,#0a86b8);

  /* variables communes des pages Tool + theme sombre KUDO -> clair atelier */
  --bg:#fdf8f2 !important; --bg-0:#fff !important; --bg-1:#fdf8f2 !important;
  --panel:#fff !important; --panel2:#f7efe4 !important; --card:#fff !important; --card2:#f7efe4 !important;
  --surface:#fff !important; --surface2:#f7efe4 !important;
  --line:#efe6d8 !important; --border:#efe6d8 !important; --border-strong:#e4d8c6 !important;
  --txt:#2d3436 !important; --text:#2d3436 !important; --ink:#2d3436 !important; --fg:#2d3436 !important;
  --heading:#20262a !important;
  --mut:#7a8085 !important; --muted:#7a8085 !important; --dim:#a49a8b !important;
  --eg-bg:#fdf8f2 !important; --eg-ink:#2d3436 !important; --eg-deep:#f7efe4 !important; --eg-deep2:#f2e8da !important;
  --eg-surface:#fff !important; --eg-surface2:#f7efe4 !important; --eg-text:#2d3436 !important; --eg-head:#20262a !important;
  --eg-muted:#7a8085 !important; --eg-dim:#9a9082 !important; --eg-line:#efe6d8 !important; --eg-line-soft:#f2e8da !important;
}

/* ---- Fond creme + degrade soleil (identique atelier) -------------------- */
html, body{
  background-color:#fdf8f2 !important;
  background-image:
    radial-gradient(circle at 12% -10%, rgba(255,201,60,.22), rgba(0,0,0,0) 42%),
    radial-gradient(circle at 95% 110%, rgba(231,62,36,.10), rgba(0,0,0,0) 45%) !important;
  background-attachment:fixed !important;
  color:var(--pop-ink) !important;
  font-family:'Poppins', 'Segoe UI', sans-serif !important;
}
*{ font-family:'Poppins','Segoe UI',sans-serif; }

/* ---- Titres bold 800 ---------------------------------------------------- */
h1,h2,h3,h4,.brand-title,.kudo-welcome h1,.kudo-welcome h2,.card-title,.dep-panel-title{
  color:var(--heading) !important; font-weight:800 !important; letter-spacing:-.01em !important;
}
.kudo-welcome, .kudo-welcome *{ -webkit-text-fill-color:var(--pop-ink) !important; background:none !important; color:var(--pop-ink) !important; }

/* ---- CARTES : blanc, radius 20, ombre douce (signature atelier) --------- */
.card, .card-soft, .panel, .box, .mpanel, .pm-card, .poch-card, .dep-panel,
.modal-box, .session, .sidebar-user, .kudo-kpi, .kpi, .fleet-kpi, .dep-kpi,
.po-kpi, .info-grid > *, .well, .sheet{
  background:var(--pop-card) !important;
  border:1px solid var(--pop-line) !important;
  border-radius:var(--pop-radius) !important;
  box-shadow:var(--pop-shadow) !important;
  color:var(--pop-ink) !important;
}
.card:hover, .card-soft:hover, .pm-card:hover, .poch-card:hover, .kudo-kpi:hover{
  box-shadow:var(--pop-shadow-lg) !important; transform:translateY(-2px);
  transition:box-shadow .2s ease, transform .2s ease;
}

/* ---- KPI du haut : liseree gauche coloree + gros chiffre 800 ------------ */
.kudo-kpi{ position:relative !important; border-left:8px solid var(--fil-immo) !important; padding-left:16px !important; overflow:hidden; }
.kudo-kpi.c-cyan  { border-left-color:var(--fil-immo)   !important; }
.kudo-kpi.c-green { border-left-color:var(--fil-elin)   !important; }
.kudo-kpi.c-orange{ border-left-color:var(--fil-reno)   !important; }
.kudo-kpi.c-violet{ border-left-color:var(--fil-violet) !important; }
.kk-num, .kpi-value, .dep-kpi-value{ color:var(--pop-ink) !important; font-weight:800 !important; font-size:26px !important; }
.kk-lab, .kpi-label, .dep-kpi-label{ color:var(--pop-ink2) !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.04em; font-size:11px !important; }

/* ---- BADGES / PILLS : plein couleur, blanc, 800, arrondi --------------- */
.pill, .tag, .badge, .bdg, [class*="badge"]{
  border-radius:999px !important; font-weight:800 !important; padding:4px 12px !important; font-size:12.5px !important;
}
.pill.red, .badge-reno, .bdg.turn{ background:var(--fil-reno) !important; color:#fff !important; }
.pill.ok, .badge-elin{ background:var(--fil-elin) !important; color:#fff !important; }
.pill.amber{ background:#e8a200 !important; color:#fff !important; }
.pill.muted{ background:#efe6d8 !important; color:var(--pop-ink) !important; }

/* ---- BOUTONS : pill ; CTA en degrade rouge->orange (comme le FAB) ------- */
.btn, .btn-icon, .topbar-action, .kudo-pill, .kudo-form, button.go, .btn-wide{
  border-radius:999px !important; font-weight:700 !important; font-family:'Poppins',sans-serif !important;
}
.btn-primary, button.go, .kudo-send, .fab, .btn-cta{
  background:var(--grad-cta) !important; color:#fff !important; border:none !important;
  box-shadow:0 8px 20px rgba(231,62,36,.30) !important;
}
.btn-danger{ background:var(--grad-cta) !important; color:#fff !important; border:none !important; }
.btn:hover, .btn-icon:hover{ transform:translateY(-1px); box-shadow:var(--pop-shadow); transition:.15s; }
/* boutons haut-droite : cartes blanches liserees */
.topbar .btn-icon, .topbar-right .btn-icon{
  background:#fff !important; color:var(--fil-immo) !important; border:1px solid var(--pop-line) !important;
  box-shadow:var(--pop-shadow) !important;
}

/* ---- SIDEBAR : blanche, nav pills, actif colore ------------------------ */
.sidebar{ background:#fff !important; border-right:1px solid var(--pop-line) !important; box-shadow:2px 0 20px rgba(45,52,54,.04) !important; }
.brand-title{ color:var(--fil-immo) !important; }
.nav-item{ color:var(--pop-ink) !important; border-radius:999px !important; margin:2px 10px !important; font-weight:600 !important; }
.nav-item:hover{ background:#faf3e8 !important; }
body:not(.sidebar-collapsed) .nav-item.active, .nav-item.active{
  background:var(--grad-cta) !important; color:#fff !important; box-shadow:0 8px 18px rgba(231,62,36,.28) !important;
}
body:not(.sidebar-collapsed) .nav-item.active *, .nav-item.active *{ color:#fff !important; }
.session-avatar{ background:var(--grad-immo) !important; color:#fff !important; border:none !important; font-weight:800 !important; }
.session-led{ background:#2fbf71 !important; }
.sidebar-logout{ background:rgba(231,62,36,.10) !important; color:var(--fil-reno) !important; border:1px solid rgba(231,62,36,.28) !important; border-radius:999px !important; }
.sidebar-logout:hover{ background:var(--fil-reno) !important; color:#fff !important; }

/* ---- Zone chat ---------------------------------------------------------- */
.kudo-form{ background:#fff !important; border:1px solid var(--pop-line) !important; box-shadow:var(--pop-shadow) !important; border-radius:999px !important; }
.kudo-input{ background:transparent !important; color:var(--pop-ink) !important; }
.kudo-pill{ background:#fff !important; border:1px solid var(--pop-line) !important; color:var(--pop-ink) !important; }

/* ---- Champs ------------------------------------------------------------- */
input, select, textarea{ background:#fff !important; color:var(--pop-ink) !important; border:1px solid var(--pop-line) !important; border-radius:12px !important; }
::placeholder{ color:#a49a8b !important; opacity:1 !important; }

/* ---- Topbar / main ------------------------------------------------------ */
.main{ background:transparent !important; }
.topbar{ background:rgba(253,248,242,.7) !important; backdrop-filter:blur(8px); border-bottom:1px solid var(--pop-line) !important; }

/* ---- Modale ------------------------------------------------------------- */
.modal-overlay{ background:rgba(45,52,54,.32) !important; }
.modal-box{ border-radius:var(--pop-radius) !important; box-shadow:var(--pop-shadow-lg) !important; }

/* ---- Jauge de progression facon jeu video (dossier vehicule) ----------- */
.vhl-bar{ height:16px !important; background:#efe6d8 !important; border:1px solid var(--pop-line) !important; border-radius:999px !important; box-shadow:inset 0 1px 3px rgba(45,52,54,.12) !important; overflow:hidden; }
.vhl-bar-fill{
  border-radius:999px !important;
  background:linear-gradient(90deg,#e73e24,#ff8a3d 45%,#ffc93c 70%,#36523c) !important;
  background-size:220% 100% !important;
  box-shadow:0 0 12px rgba(255,138,61,.55) !important;
  position:relative; overflow:hidden;
  animation:kpFlow 3s linear infinite, kpPulse 1.7s ease-in-out infinite !important;
}
.vhl-bar-fill::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 10px, rgba(255,255,255,0) 10px 20px);
  animation:kpStripes .6s linear infinite; }
.vhl-bar-label{ color:#20262a !important; font-weight:800 !important; text-shadow:0 1px 2px rgba(255,255,255,.7); }
@keyframes kpFlow{ to{ background-position:220% 0; } }
@keyframes kpStripes{ to{ transform:translateX(28px); } }
@keyframes kpPulse{ 0%,100%{ box-shadow:0 0 8px rgba(255,138,61,.45);} 50%{ box-shadow:0 0 18px rgba(255,138,61,.9);} }