/*
 * ============================================================
 * espace-client.css — feuille de style globale du back-office
 * ============================================================
 * Objectif : unifier le rendu sur toutes les pages /espace-client/
 * en gardant l'identité Happia (crème, marine, mint) mais en
 * adoucissant le style "happia-fun" criard (surlignages jaunes,
 * ombres brutalist 4px, bordures épaisses, badges fluo).
 *
 * Cette feuille est chargée APRÈS le CSS inline de chaque page
 * et happia-fun.css. Elle override les éléments qui faisaient
 * trop "hackathon" pour un look premium et pro.
 */

/* === Palette Happia officielle (cohérente avec la home) === */
:root, body.happia-fun {
  --bg:#FBF7EF !important;
  --cream:#FBF7EF !important;
  --cream-2:#F5EFE2 !important;
  --cream-3:#EDE5D2 !important;
  --surface:#FFFFFF !important;
  --surface-2:#F5EFE2 !important;
  --border:#EAE4D6 !important;
  --border-strong:#D9D0BB !important;
  --ink:#0C1F4E !important;
  --ink-2:#475569 !important;
  --ink-3:#5E6A80 !important;
  --brand:#0C1F4E !important;
  --brand-2:#19CE84 !important;
  --mint:#19CE84 !important;
  --mint-dark:#12A86B !important;
  --mint-soft:#E6FAF1 !important;
  --brand-soft:#E6FAF1 !important;
  --sunny:#22C08A !important;
  --coral:#FF7A66 !important;
  --lavender:#B8A6FF !important;
  --rose:#FFB4C4 !important;
}

/* === Neutralise le surlignage jaune fluo dans les titres back-office === */
.espace-client-clean h1 .hf-hl,
.espace-client-clean h2 .hf-hl,
.espace-client-clean h3 .hf-hl,
.main h1 .hf-hl,
.main h2 .hf-hl,
.main h3 .hf-hl,
.page-head h1 .hf-hl,
.page-head h2 .hf-hl {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  color: inherit !important;
  display: inline !important;
  font-weight: inherit !important;
}

/* === Typographie globale — plus pro, moins criarde === */
.main {
  font-feature-settings: "cv11", "ss01" !important;
  letter-spacing: -0.005em;
}
.main h1, .page-head h1 {
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  font-size: 24px !important;
  color: var(--ink) !important;
  line-height: 1.15 !important;
}
.main h2, .page-head h2 {
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
.page-head .sub {
  font-weight: 400 !important;
  font-size: 13.5px !important;
  color: var(--ink-2) !important;
}

/* 🆕 2026-06-19 — Layout app commun (grid sidebar 240px + main) au cas où la
   page ne le redéfinit pas inline. Évite que la sidebar prenne toute la largeur
   sur les pages qui n'ont pas leur propre <style> .app{} (veille, admin-news,
   admin-happy-analytics, etc.). Les pages avec leur propre layout inline gardent
   leur règle (cascade CSS normale). */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }
}
aside.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0C1F4E !important;
  color: rgba(255,255,255,0.85) !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
}
aside.sidebar .brand { padding: 18px 16px 14px !important; }
aside.sidebar .brand img { height: 22px !important; filter: brightness(0) invert(1); opacity: 0.95; }
aside.sidebar nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
}
aside.sidebar nav a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: rgba(255,255,255,0.78) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  margin-bottom: 1px !important;
  transition: background .12s, color .12s;
}
aside.sidebar nav a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}
aside.sidebar nav a.active {
  background: rgba(25,206,132,0.15) !important;
  color: #19CE84 !important;
  font-weight: 600 !important;
}
aside.sidebar nav a svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  opacity: 0.85;
}
aside.sidebar .nav-label {
  color: rgba(255,255,255,0.4) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 14px 10px 6px !important;
}
aside.sidebar .footer {
  padding: 12px 16px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
@media (max-width: 880px) {
  aside.sidebar { position: relative; height: auto; flex-direction: row; align-items: center; padding: 12px 16px; }
  aside.sidebar .brand { padding: 0; flex: 1; }
  aside.sidebar nav, aside.sidebar .footer { display: none; }
}
.main {
  padding: 0;
  background: var(--bg, #FBF7EF);
  min-height: 100vh;
  overflow-x: hidden;
}

/* === Sidebar — sobre, charcoal marine === */
aside.sidebar {
  background: var(--ink) !important;
  border-right: 1px solid rgba(255,255,255,0.05);
}
aside.sidebar .brand img {
  height: 22px !important;
  opacity: 0.95;
}
aside.sidebar nav a {
  font-size: 13.5px !important;
  padding: 8px 12px !important;
  border-radius: 7px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.65) !important;
  transition: background .12s, color .12s !important;
}
aside.sidebar nav a:hover {
  background: rgba(255,255,255,0.04) !important;
  color: white !important;
}
aside.sidebar nav a.active {
  background: rgba(25,206,132,0.10) !important;
  color: var(--mint) !important;
  font-weight: 600 !important;
}
aside.sidebar nav a svg {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.85;
}
aside.sidebar .nav-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  padding: 18px 12px 6px !important;
  color: rgba(255,255,255,0.32) !important;
}
aside.sidebar .nav-label.admin {
  color: rgba(248,113,113,0.7) !important;
}

/* === Cards génériques : neutralise les ombres brutalist === */
.card, .widget, .goal-card, .next-section, .a-card, .deliverable,
[class*="-card"]:not(.next-action):not(.quota-card):not(.del-head) {
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(12,31,78,0.04), 0 1px 3px rgba(12,31,78,0.05)) !important;
  border-width: 1px !important;
  border-color: var(--border) !important;
}

/* === Vire les ombres "4px 4px 0 var(--ink)" brutalist === */
.goal-card, .goal-chip, .a-card, .deliverable, .quota-card, .chat-box {
  box-shadow: 0 1px 2px rgba(12,31,78,0.04), 0 1px 3px rgba(12,31,78,0.05) !important;
}

/* === Goal card : enlève le dégradé jaune fluo === */
.goal-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
}
.goal-card.empty {
  border-style: dashed !important;
}
.goal-icon {
  width: 28px !important;
  height: 28px !important;
  background: var(--brand-soft) !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
}
.goal-head h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}
.goal-card p {
  font-size: 13.5px !important;
  color: var(--ink-2) !important;
}
.goal-chip {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.goal-chip::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--mint) !important;
  display: inline-block !important;
  color: transparent !important;
}
.goal-edit, .goal-cta {
  border-bottom: none !important;
  color: var(--mint-dark) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.goal-edit:hover, .goal-cta:hover {
  text-decoration: underline !important;
  color: var(--ink) !important;
}

/* === Plan badge sobre === */
.plan-badge {
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--border) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
}

/* === Widgets dashboard : icônes en aplats doux + badge en dot === */
.widget {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 16px 18px 18px !important;
  transition: border-color .15s, box-shadow .2s !important;
}
.widget:hover {
  border-color: var(--border-strong) !important;
  transform: none !important;
}
.widget .w-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
}
.widget.actions .w-icon { background:#FEF2F2 !important; color:#B91C1C !important; }
.widget.avis .w-icon { background:#FFFBEB !important; color:#0B5A40 !important; }
.widget.reseaux .w-icon { background:#F3E8FF !important; color:#6B21A8 !important; }
.widget.audits .w-icon { background: var(--brand-soft) !important; color:#047857 !important; }
.widget.compte .w-icon { background:#F1F5F9 !important; color:#334155 !important; }
.widget .w-title {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  letter-spacing: -0.005em !important;
}
.widget .w-big {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}
.widget .w-big .w-small {
  font-size: 14px !important;
  font-weight: 500 !important;
}
.widget .w-meta {
  font-size: 12px !important;
}

/* Badges → petits dots discrets */
.widget .w-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  padding: 0 0 0 14px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  text-transform: lowercase !important;
  display: inline-flex !important;
  align-items: center !important;
}
.widget .w-badge::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--bad, #DC2626) !important;
}
.widget .w-badge.warn::before {
  background: var(--warn, #D97706) !important;
}
/* Pour les badges qui ne sont pas "URGENT" plein, transforme le texte uppercase */
.widget .w-badge {
  text-transform: lowercase !important;
}
.widget .w-badge::first-letter {
  text-transform: uppercase !important;
}

/* === Next actions === */
.next-section {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px 24px !important;
}
.next-section h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.next-section .all-link {
  font-size: 12.5px !important;
  color: var(--mint-dark) !important;
  font-weight: 500 !important;
}
.next-action {
  border: 1px solid transparent !important;
  padding: 10px 12px !important;
  margin-bottom: 2px !important;
  background: transparent !important;
  border-radius: 8px !important;
  transition: background .12s !important;
}
.next-action:hover {
  background: var(--surface-2) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.next-action .ask-agent {
  background: transparent !important;
  color: var(--mint-dark) !important;
  border: 1px solid var(--border) !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  box-shadow: none !important;
}
.next-action .ask-agent:hover {
  background: var(--brand-soft) !important;
  border-color: var(--mint) !important;
  transform: none !important;
}
.next-action .nb {
  width: 22px !important;
  height: 22px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.next-action .title {
  font-size: 13px !important;
  font-weight: 500 !important;
}
.next-action .urgency {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 8px 3px 16px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  position: relative !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
}
.next-action .urgency::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.next-action .urgency.urgent { color:#B91C1C !important; border-color:#FECACA !important; }
.next-action .urgency.urgent::before { background:#DC2626; }
.next-action .urgency.asap { color:#0B5A40 !important; border-color:#CDEEDE !important; }
.next-action .urgency.asap::before { background:#D97706; }
.next-action .urgency.when_time { color: var(--ink-2) !important; border-color: var(--border-strong) !important; }
.next-action .urgency.when_time::before { background: var(--ink-3); }
.next-action .impact {
  background: transparent !important;
  border: 1px solid #A7F3D0 !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  color: #047857 !important;
}

/* === Audits list (page Mes audits) === */
.audit-card, .audit-row, [class*="audit-list-item"] {
  border-width: 1px !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: 14px !important;
}

/* === Kanban actions === */
.a-card {
  border-width: 1px !important;
  border-color: var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
}
.a-card .a-btn {
  font-weight: 500 !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
}
.a-card .a-btn.agent {
  background: linear-gradient(135deg, var(--ink) 0%, var(--mint) 100%) !important;
  border: none !important;
  font-weight: 600 !important;
}
.a-urgency {
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  font-size: 11px !important;
  padding: 3px 8px 3px 16px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  position: relative !important;
}
.a-urgency::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.a-urgency.urgent { color:#B91C1C !important; border-color:#FECACA !important; }
.a-urgency.urgent::before { background:#DC2626; }
.a-urgency.asap { color:#0B5A40 !important; border-color:#CDEEDE !important; }
.a-urgency.asap::before { background:#D97706; }
.a-urgency.when_time { color: var(--ink-2) !important; border-color: var(--border-strong) !important; }
.a-urgency.when_time::before { background: var(--ink-3); }

/* === Top strip date + météo : sobre, sans pills criardes === */
.top-strip {
  font-size: 12.5px !important;
  color: var(--ink-2) !important;
  margin-bottom: 16px !important;
  gap: 8px !important;
}
.top-strip .date, .top-strip .weather {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-weight: 500 !important;
}
.top-strip .date {
  padding-right: 10px !important;
  border-right: 1px solid var(--border-strong) !important;
}
.top-strip .date b, .top-strip .weather b {
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* === Page-head : alignement plus sobre === */
.page-head {
  margin-bottom: 28px !important;
}