/* ===========================================================================
   happia-halo.css — Surcouche globale « épuré / halo » de l'espace client.
   2026-07-07 (Christophe : « je veux que TOUT soit mis à jour, pas juste le menu »).

   Chargée EN DERNIER sur toutes les pages /espace-client/* (injectée par _worker.js),
   donc elle prend le dessus sur les <style> inline des pages + modern.css + happia-fun.css.

   Règle d'or : on ne touche QUE le VISUEL (couleurs, bordures, ombres, coins, surlignages).
   JAMAIS la structure (display / grid / flex / largeurs / positions) → aucun risque de
   casser une mise en page. But : unifier tout le back-office sur la direction validée
   (épuré + halo), calme et lisible, fini le brutaliste bruyant.
   =========================================================================== */

:root {
  --h-cream: #FBF7EF;
  --h-white: #ffffff;
  --h-ink: #0C1F4E;
  --h-ink-2: #475569;
  --h-ink-3: #5E6A80;
  --h-line: #ECE6D8;
  --h-mint: #19CE84;
  --h-mint-pale: #EAF9F2;
  --h-mint-text: #0F6E56;
}

/* 1 — Fond de page crème calme, texte encre. */
body { background: var(--h-cream) !important; color: var(--h-ink) !important; }

/* 2 — Surlignages décoratifs bruyants → calmes.
   Fini le jaune penché derrière les titres, les barres coral/sunny. */
.hf-hl, .hf-hl-rose, .hf-hl-lavender, .hf-hl-mint {
  background: transparent !important;
  color: var(--h-ink) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
.hf-hl-mint { color: var(--h-mint-text) !important; }
.hf-underline::after, .hf-strike::after { display: none !important; }
.hf-strike { color: var(--h-ink-3) !important; text-decoration: line-through !important; }
.hf-accent { color: var(--h-mint-text) !important; }

/* 3 — Cartes / panneaux → épuré : plus d'ombres décalées ni de grosses bordures ink.
   Bordure hairline + coins doux. On ne touche ni au fond flex/grid ni aux tailles. */
.card, .widget, .goal-card, .next-section, .a-card, .deliverable, .panel,
.source-block, .finding, .metric, .metric-card, .met-card, .tile, .hf-card,
.box, .kpi-card, .stat-card, .projection, .src-actions-box, .cta-actions,
.perf-card, .dim-card, .loc-row, .sim-lever, .a-chain, .a-tip {
  box-shadow: none !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 14px !important;
}

/* Le hero / bandeau principal : fond crème doux, pas de bordure ink épaisse. */
.hero, .pci-hero, .page-head, .macro, .banner-hero {
  box-shadow: none !important;
}

/* 4 — Boutons : propres, sans ombre décalée, coins doux. */
.btn, button.btn, a.btn, .hf-btn, .hf-btn-primary, .hf-btn-ghost,
.btn-primary, .btn-secondary, .btn-ghost, .btn-ai, .refresh {
  box-shadow: none !important;
  border-radius: 10px !important;
}
.btn:hover, button.btn:hover, a.btn:hover, .hf-btn:hover,
.hf-btn-primary:hover, .btn-primary:hover {
  transform: none !important;
  box-shadow: none !important;
}
.btn-primary, .hf-btn-primary, .btn-mint, .btn-ai {
  background: var(--h-mint) !important;
  color: #04342C !important;
  border: 1px solid var(--h-mint) !important;
}

/* 5 — Pastilles / badges → arrondis doux. */
.pill, .badge, .tag, .chip, .src-badge, .check-label, .type-pill,
.cm-impact, .cm-actor, .level-badge, .nap-required-tag {
  border-radius: 100px !important;
}

/* 6 — Titres nets. */
h1, .page-head h1, .hero h1, h1.title { letter-spacing: -0.01em !important; }

/* 7 — Sidebar : claire et cohérente PARTOUT (halo). Certaines pages la définissaient
   encore en bleu nuit → on force le clair + texte encre, onglet actif en mint pâle. */
aside.sidebar, .sidebar {
  background: var(--h-cream) !important;
  color: var(--h-ink) !important;
  border-right: 1px solid var(--h-line) !important;
}
.sidebar .brand img { filter: none !important; opacity: 1 !important; }
.sidebar nav a {
  color: var(--h-ink-2) !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
}
.sidebar nav a svg { opacity: 0.9 !important; }
.sidebar nav a:hover { background: #F2ECDD !important; color: var(--h-ink) !important; }
.sidebar nav a.active { background: var(--h-mint-pale) !important; color: var(--h-mint-text) !important; }
.sidebar nav a.active svg { stroke: var(--h-mint-text) !important; opacity: 1 !important; }
.sidebar .nav-label { color: #a8a291 !important; }
.sidebar .footer { border-top: 1px solid var(--h-line) !important; color: var(--h-ink-2) !important; }
.sidebar .user-info, .sidebar .user-info * { color: var(--h-ink) !important; }
.sidebar .avatar { background: var(--h-mint-pale) !important; color: var(--h-mint-text) !important; }

/* 8 — Liens de contenu en mint sobre (au lieu du bleu roi criard par endroits). */
.main a:not(.btn):not(.nav a):not(.type-pill) { color: var(--h-mint-text); }

/* 9 — Titres moins lourds (fini le gras 800 « agressif »). */
h1, .page-head h1, .hero h1 { font-weight: 600 !important; }

/* 10 — Modales : après retrait des ombres décalées elles étaient plates. On leur
   redonne une ombre DOUCE (floue) pour qu'elles flottent proprement au-dessus. */
.modal, .modal-card, .sheet, .dialog {
  box-shadow: 0 24px 60px rgba(12, 31, 78, 0.18) !important;
  border: 1px solid var(--h-line) !important;
}

/* 11 — Bandeaux d'info jaunes vifs → tonalité plus douce (miel pâle). */
.mode-banner.template, .banner-warn, .hf-banner {
  background: #FFF7E4 !important;
  border-color: #F2E6C2 !important;
}

/* 12 — Badges & pastilles : poids de police allégé + couleurs vives adoucies.
   Fini le gras 800 partout et les badges dorés/verts criards (page « Mes actions »
   surtout). On garde le sens (mint = Happy) mais en tons doux. */
.pill, .badge, .chip, .type-pill,
.a-diff, .a-actor, .a-impact, .a-impactlvl, .a-roi, .a-urgency,
.cm-impact, .cm-actor, .src-badge, .check-label, .level-badge {
  font-weight: 600 !important;
}
.a-roi, .a-impactlvl { background: #F5F0E4 !important; color: #7a6a45 !important; }
.a-impact { background: #EAF9F2 !important; color: #0F6E56 !important; }
.a-actor.happia, .a-btn.ok, .a-btn.agent { background: #EAF9F2 !important; color: #0F6E56 !important; }
.a-btn.ok:hover, .a-btn.agent:hover { background: #D8F3E6 !important; color: #0F6E56 !important; }

/* 13 — Cases un peu trop grosses → padding resserré, moins massif. */
.a-card { padding: 15px 17px !important; }

/* 14 — Titres de section très gras (À FAIRE / EN COURS…) → poids normal. */
.col-head, .col-head *, .section-title, .a-col-title { font-weight: 600 !important; }