/* ============================================================
 * modern.css — Design system 2026 du back-office Happia
 * ============================================================
 * Chargé en DERNIER, après happia-fun.css + espace-client.css.
 * Override propre tout le brutalist 2018 héritage :
 *   - bordures 1.5px ink → 1px crème
 *   - box-shadow 5px 5px 0 ink → flat ou shadow-sm subtil
 *   - border-radius 14px → 10-12px
 *   - MAJUSCULES + letter-spacing → sentence case
 *   - inputs blancs ternes → fond crème subtil + focus mint ring
 *   - sidebar marine sombre → blanche propre (option) ou marine sobre
 *
 * Palette Happia conservée (ink #0C1F4E, mint #19CE84, sunny, coral, crème).
 * ============================================================ */

:root, body.happia-fun, body {
  --m-cream:        #FBF7EF;
  --m-cream-2:      #FBF9F4;
  --m-cream-3:      #F5EFE2;
  --m-surface:      #FFFFFF;
  --m-border:       #E6E1D4;
  --m-border-2:     #D8D2C2;
  --m-border-focus: #19CE84;
  --m-ink:          #0C1F4E;
  --m-ink-2:        #5B6680;
  --m-ink-3:        #5E6A80;            /* RGAA/WCAG AA : #8A93A8 (~4:1) → #5E6A80 (~5:1) */
  --m-mint:         #19CE84;
  --m-mint-dark:    #14B073;
  --m-mint-soft:    #ECFAF3;
  --m-sunny:        #22C08A;
  --m-sunny-dark:   #B07700;
  --m-sunny-soft:   #EAF7F1;
  --m-coral:        #FF7A66;
  --m-coral-dark:   #B14132;
  --m-coral-soft:   #FFE9E4;
  --m-radius-sm:    6px;
  --m-radius:       8px;
  --m-radius-md:    10px;
  --m-radius-lg:    12px;
  --m-shadow-sm:    0 1px 2px rgba(12,31,78,0.04), 0 1px 3px rgba(12,31,78,0.05);
  --m-shadow-md:    0 2px 6px rgba(12,31,78,0.06), 0 6px 18px rgba(12,31,78,0.06);
  --m-focus-ring:   0 0 0 3px rgba(25,206,132,0.18);
  --m-font:         -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
}

/* === Body — fond crème uni, font + smoothing === */
body, body.happia-fun {
  font-family: var(--m-font);
  background: var(--m-cream) !important;
  color: var(--m-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* ============================================================
 * SIDEBAR — version claire propre (override le marine sombre)
 * ============================================================ */
aside.sidebar {
  background: var(--m-surface) !important;
  border-right: 1px solid var(--m-border) !important;
  color: var(--m-ink-2) !important;
}
aside.sidebar .brand {
  padding: 18px 16px 14px !important;
}
aside.sidebar .brand img {
  filter: none !important;
  opacity: 1 !important;
  height: 22px !important;
}
aside.sidebar nav { padding: 6px 10px !important; }
aside.sidebar nav a {
  color: var(--m-ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  margin-bottom: 1px !important;
  gap: 10px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
aside.sidebar nav a:hover {
  background: var(--m-cream-2) !important;
  color: var(--m-ink) !important;
}
aside.sidebar nav a.active {
  background: var(--m-mint-soft) !important;
  color: var(--m-mint-dark) !important;
  font-weight: 600 !important;
}
aside.sidebar nav a svg {
  width: 16px !important; height: 16px !important;
  opacity: 1 !important;
  stroke: currentColor !important;
}
aside.sidebar .nav-label {
  color: var(--m-ink-3) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}
aside.sidebar .nav-label.admin {
  color: var(--m-coral-dark) !important;
  opacity: 0.85;
}
aside.sidebar .footer {
  border-top: 1px solid var(--m-border) !important;
  padding: 12px !important;
  margin: 0 6px !important;
  background: transparent !important;
}
aside.sidebar .avatar {
  background: var(--m-sunny-soft) !important;
  color: var(--m-sunny-dark) !important;
  width: 26px !important; height: 26px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
aside.sidebar .user-info .nm {
  color: var(--m-ink) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
aside.sidebar .user-info .em {
  color: var(--m-ink-3) !important;
  font-size: 10.5px !important;
}
aside.sidebar .logout {
  color: var(--m-ink-3) !important;
}
aside.sidebar .logout:hover {
  color: var(--m-coral-dark) !important;
}

/* ============================================================
 * MAIN — headings sobres, sentence case
 * ============================================================ */
.main { padding: 28px 36px 56px !important; }
@media (max-width: 640px) { .main { padding: 18px 14px 50px !important; } }

.main h1,
.page-head h1 {
  font-size: clamp(20px, 2.4vw, 26px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--m-ink) !important;
  margin: 0 !important;
}
.main h2,
.page-head h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--m-ink) !important;
}
.main h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: var(--m-ink) !important;
}
.page-head .sub {
  font-size: 13px !important;
  color: var(--m-ink-3) !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}
.page-head { margin-bottom: 22px !important; }

/* Neutralise surlignage jaune dans headings BO (déjà fait dans espace-client.css, on confirme) */
.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;
  transform: none !important;
  display: inline !important;
  color: inherit !important;
}

/* ============================================================
 * CARDS — flat, 1px border, radius 12, plus d'ombre brutalist
 * ============================================================ */
.card, .widget, .goal-card, .next-section, .a-card, .deliverable,
.quota-card, .chat-box, .info-card, .stat-card,
[class*="-card"]:not(.next-action):not(.del-head):not(.hf-card):not(.hf-card-big) {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg) !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
}

/* Widget Gridstack — override le brutalist du dashboard.
   🆕 18/06 — overflow: hidden pour clipper proprement le contenu débordant
   (Météo qui bavait sur Idée du jour). Le bouton − est désormais à top:6/6
   donc à l'intérieur de la box, et le handle de resize aussi (right:4 bottom:4),
   donc le clipping ne masque rien d'utile. */
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  transition: border-color .15s, transform .15s !important;
  overflow: hidden !important;
}
/* .widget-body reste en overflow visible pour que l'auto-fit JS puisse mesurer
   scrollHeight correctement. Le clipping visuel est assuré par le parent
   .grid-stack-item-content ci-dessus. Si l'auto-fit estime que ça dépasse
   10 cellules (700px), il bascule localement en overflow-y: auto. */
.grid-stack > .grid-stack-item > .grid-stack-item-content > .widget-body {
  overflow: visible;
  max-height: none;
}

/* 🆕 17/06 — Handle de resize "se" (bas-droite) toujours visible et reconnaissable.
   Par défaut GridStack le met en display:none + autoHide. On le rend explicitement
   visible avec une icône de poignée (3 traits en diagonale, classique). */
.grid-stack > .grid-stack-item > .ui-resizable-se {
  display: block !important;
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  width: 16px !important;
  height: 16px !important;
  cursor: nwse-resize !important;
  opacity: 0.35 !important;
  transition: opacity 0.15s !important;
  z-index: 50 !important;
  background-image: linear-gradient(
    135deg,
    transparent 0%, transparent 30%,
    var(--m-ink, #0C1F4E) 30%, var(--m-ink, #0C1F4E) 40%,
    transparent 40%, transparent 55%,
    var(--m-ink, #0C1F4E) 55%, var(--m-ink, #0C1F4E) 65%,
    transparent 65%, transparent 80%,
    var(--m-ink, #0C1F4E) 80%, var(--m-ink, #0C1F4E) 90%,
    transparent 90%
  ) !important;
}
.grid-stack > .grid-stack-item:hover > .ui-resizable-se {
  opacity: 0.85 !important;
}
.grid-stack > .grid-stack-item > .ui-resizable-se:hover {
  opacity: 1 !important;
}
.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
  transform: rotate(-0.5deg) !important;
  box-shadow: var(--m-shadow-md) !important;
}

/* Add-widget tile (drop empty slot) */
.add-widget-tile > .grid-stack-item-content {
  background: transparent !important;
  border: 1.5px dashed var(--m-border-2) !important;
  box-shadow: none !important;
  color: var(--m-ink-3) !important;
}
.add-widget-tile:hover > .grid-stack-item-content {
  background: var(--m-cream-2) !important;
  border-color: var(--m-mint) !important;
  color: var(--m-mint-dark) !important;
}
.add-widget-icon { font-size: 32px !important; font-weight: 300 !important; }
.add-widget-label { font-size: 12px !important; font-weight: 500 !important; margin-top: 6px !important; }

/* ============================================================
 * WIDGET INTERIORS — labels, valeurs, KPIs
 * ============================================================ */
.wg-title, .widget .w-title {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--m-ink-3) !important;
}
.wg-emoji { display: none !important; }  /* on enlève les emoji dans les headers de widget */
.wg-head-link, .widget .w-head a {
  color: var(--m-mint-dark) !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  text-decoration: none !important;
}
.wg-head-link:hover { text-decoration: underline !important; }

/* Score widget */
.wg-score-num b { font-weight: 500 !important; letter-spacing: -0.02em !important; font-size: 28px !important; }
.wg-score-num small { font-weight: 500 !important; color: var(--m-ink-3) !important; text-transform: none !important; letter-spacing: 0 !important; }
.wg-score-info .wg-score-label { font-weight: 600 !important; font-size: 13px !important; }
.wg-score-hint { color: var(--m-ink-3) !important; font-size: 11.5px !important; }

/* KPI cards interne (Google Business) */
.wg-kpi { background: var(--m-cream-2) !important; border-radius: var(--m-radius) !important; padding: 8px 10px !important; }
.wg-kpi-val { font-weight: 500 !important; font-size: 18px !important; letter-spacing: -0.015em !important; }
.wg-kpi-lbl { font-weight: 500 !important; font-size: 10.5px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--m-ink-3) !important; }

/* Levers */
.wg-lever-rank { font-weight: 500 !important; color: var(--m-ink-3) !important; }
.wg-lever-gain {
  background: var(--m-mint-soft) !important;
  color: var(--m-mint-dark) !important;
  border: none !important;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
}

/* Concurrence */
.wg-comp-rank { font-weight: 500 !important; }
.wg-comp-name { font-weight: 500 !important; }
.wg-comp-score { font-weight: 500 !important; }

/* Actions widget (cards en grid) */
.wg-action {
  background: var(--m-cream-2) !important;
  border: 1px solid var(--m-border) !important;
  border-left: 3px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  padding: 8px 12px !important;
  text-decoration: none !important;
  transition: background .12s, border-color .12s !important;
}
.wg-action:hover { background: var(--m-surface) !important; border-color: var(--m-mint) !important; }
.wg-action.urgent { border-left-color: var(--m-coral) !important; }
.wg-action.asap { border-left-color: var(--m-sunny) !important; }
.wg-action.when_time { border-left-color: var(--m-ink-3) !important; }
.wg-action-urg {
  font-weight: 500 !important;
  font-size: 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--m-ink-3) !important;
}
.wg-action.urgent .wg-action-urg { color: var(--m-coral-dark) !important; }
.wg-action.asap .wg-action-urg { color: var(--m-sunny-dark) !important; }
.wg-action-ttl { font-weight: 500 !important; font-size: 12.5px !important; }
.wg-action-imp { font-weight: 500 !important; color: var(--m-mint-dark) !important; font-size: 11px !important; }

/* Calendar rows */
.wg-cal-date { font-weight: 500 !important; color: var(--m-ink-3) !important; text-transform: none !important; }
.wg-cal-title { font-weight: 500 !important; }
.wg-cal-net { font-weight: 500 !important; text-transform: none !important; color: var(--m-ink-3) !important; }
.wg-row { border-bottom: 1px solid var(--m-border) !important; }
.wg-row b { font-weight: 500 !important; }

/* Réputation */
.wg-rep-big { color: var(--m-sunny-dark) !important; font-weight: 500 !important; }
.wg-rep-big small { font-weight: 500 !important; color: var(--m-ink-3) !important; }

/* Happy chat — bulles plus douces */
.wg-happy-ai { background: var(--m-cream-2) !important; border-radius: var(--m-radius) !important; }
.wg-happy-me { background: var(--m-mint) !important; border-radius: var(--m-radius) !important; }

/* ============================================================
 * BUTTONS — primary mint flat, secondary outline, danger text
 * ============================================================ */
.btn, button.btn, a.btn {
  font-family: var(--m-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: var(--m-radius) !important;
  border: 1px solid var(--m-border) !important;
  background: var(--m-surface) !important;
  color: var(--m-ink) !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background .12s, border-color .12s, transform .08s !important;
}
.btn:hover, button.btn:hover, a.btn:hover {
  background: var(--m-cream-2) !important;
  border-color: var(--m-border-2) !important;
  transform: none !important;
}

.btn-primary, button.btn-primary, a.btn-primary {
  background: var(--m-mint) !important;
  color: #fff !important;
  border: 1px solid var(--m-mint) !important;
  font-weight: 500 !important;
}
.btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover {
  background: var(--m-mint-dark) !important;
  border-color: var(--m-mint-dark) !important;
  color: #fff !important;
}

.btn-secondary, .btn-ghost, .btn.ghost {
  background: var(--m-surface) !important;
  color: var(--m-ink) !important;
  border: 1px solid var(--m-border) !important;
}
.btn-secondary:hover, .btn-ghost:hover, .btn.ghost:hover {
  background: var(--m-cream-2) !important;
}

.btn-danger {
  background: transparent !important;
  color: var(--m-coral-dark) !important;
  border: 1px solid transparent !important;
  font-weight: 500 !important;
}
.btn-danger:hover {
  background: var(--m-coral-soft) !important;
  border-color: transparent !important;
}

.btn-product, .btn-published {
  background: var(--m-cream-2) !important;
  color: var(--m-ink) !important;
  border: 1px solid var(--m-border) !important;
}
.btn-product:hover, .btn-published:hover {
  background: var(--m-cream-3) !important;
}

/* Toolbar buttons (header dashboard) */
.toolbar .btn {
  font-size: 12.5px !important;
  padding: 7px 12px !important;
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: none !important;
  color: var(--m-ink) !important;
}
.toolbar .btn:hover { background: var(--m-cream-2) !important; transform: none !important; box-shadow: none !important; }
.toolbar .btn.ghost { background: transparent !important; border-color: transparent !important; }

/* ============================================================
 * INPUTS — fond crème subtil, focus mint ring
 * ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
  font-family: var(--m-font) !important;
  font-size: 13.5px !important;
  color: var(--m-ink) !important;
  background: var(--m-cream-2) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  padding: 9px 11px !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s, background .15s !important;
  font-weight: 400 !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  background: var(--m-surface) !important;
  border-color: var(--m-mint) !important;
  box-shadow: var(--m-focus-ring) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--m-ink-3) !important;
  opacity: 1 !important;
}

/* Labels — sentence case sobre, sans MAJUSCULES ni emoji visibles */
label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--m-ink-2) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ============================================================
 * BADGES / PILLS — flat, semantic, sentence case
 * ============================================================ */
.plan-badge, .badge, .pill {
  background: var(--m-cream-2) !important;
  color: var(--m-ink-2) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 999px !important;
  padding: 2px 9px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

/* Urgencies / a-urgency (kanban actions) */
.a-urgency, .next-action .urgency {
  border-radius: 999px !important;
  padding: 2px 9px 2px 18px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.a-urgency.urgent, .next-action .urgency.urgent {
  background: var(--m-coral-soft) !important;
  color: var(--m-coral-dark) !important;
  border-color: transparent !important;
}
.a-urgency.asap, .next-action .urgency.asap {
  background: var(--m-sunny-soft) !important;
  color: var(--m-sunny-dark) !important;
  border-color: transparent !important;
}
.a-urgency.when_time, .next-action .urgency.when_time {
  background: var(--m-cream-2) !important;
  color: var(--m-ink-2) !important;
  border-color: transparent !important;
}

/* Impact tags (next action / a-card) */
.next-action .impact, .a-card .impact {
  background: var(--m-mint-soft) !important;
  color: var(--m-mint-dark) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}

/* ============================================================
 * MODALES — flat, soft shadow
 * ============================================================ */
.catalog-modal, .modal, .modal-card, .modal-body, .m-modal {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg) !important;
  box-shadow: var(--m-shadow-md) !important;
}
.catalog-overlay, .modal-overlay {
  background: rgba(12,31,78,0.40) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.catalog-header {
  border-bottom: 1px solid var(--m-border) !important;
  padding: 16px 20px !important;
}
.catalog-header h2 { font-weight: 600 !important; font-size: 16px !important; }
.catalog-close {
  background: transparent !important;
  border: none !important;
  color: var(--m-ink-2) !important;
  border-radius: var(--m-radius) !important;
  width: 30px !important; height: 30px !important;
}
.catalog-close:hover { background: var(--m-cream-2) !important; color: var(--m-ink) !important; }

.catalog-card {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-md) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
}
.catalog-card:hover {
  border-color: var(--m-mint) !important;
  background: var(--m-cream-2) !important;
  transform: none !important;
  box-shadow: none !important;
}
.catalog-name { font-weight: 600 !important; font-size: 13.5px !important; }
.catalog-desc { color: var(--m-ink-3) !important; font-size: 12px !important; }
.catalog-add-btn {
  background: var(--m-mint) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--m-radius) !important;
  box-shadow: none !important;
  padding: 3px 9px !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: none !important;
}
.catalog-plan-badge {
  background: var(--m-cream-2) !important;
  color: var(--m-ink-2) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
}
.catalog-plan-badge.lock { background: var(--m-sunny-soft) !important; color: var(--m-sunny-dark) !important; }

/* ============================================================
 * MODAL CALENDRIER — drop zone moderne pour photo
 * ============================================================ */
#m-photo-zone {
  background: var(--m-cream-2) !important;
  border: 1.5px dashed var(--m-border-2) !important;
  border-radius: var(--m-radius-md) !important;
  padding: 16px !important;
  transition: background .15s, border-color .15s !important;
  cursor: pointer;
}
#m-photo-zone:hover {
  background: var(--m-surface) !important;
  border-color: var(--m-mint) !important;
}
#m-photo-pick {
  background: transparent !important;
  border: none !important;
  color: var(--m-mint-dark) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
  cursor: pointer;
}
#m-photo-pick:hover { text-decoration: underline !important; }
#m-photo-remove {
  background: transparent !important;
  border: none !important;
  color: var(--m-coral-dark) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}
#m-photo-remove:hover { text-decoration: underline !important; }
#m-photo-progress { color: var(--m-mint-dark) !important; font-weight: 500 !important; }

/* Labels du modal calendrier — on enlève les emoji visuellement */
.modal-body label,
.m-modal label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--m-ink-2) !important;
  margin: 14px 0 6px !important;
}

/* ============================================================
 * GOAL CARD — vire l'effet brutalist
 * ============================================================ */
.goal-card {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg) !important;
  box-shadow: none !important;
  padding: 18px 20px !important;
}
.goal-card.empty { border-style: dashed !important; }
.goal-icon { background: var(--m-mint-soft) !important; border-radius: var(--m-radius) !important; width: 28px !important; height: 28px !important; }
.goal-head h2 { font-size: 14px !important; font-weight: 600 !important; }
.goal-chip {
  background: var(--m-cream-2) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 999px !important;
  padding: 3px 11px !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  box-shadow: none !important;
}

/* ============================================================
 * NEXT-ACTION (liste actions home dashboard ancienne version)
 * ============================================================ */
.next-section {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg) !important;
  box-shadow: none !important;
  padding: 18px 20px !important;
}
.next-action { padding: 8px 10px !important; }
.next-action:hover {
  background: var(--m-cream-2) !important;
  border-color: transparent !important;
}
.next-action .nb {
  background: var(--m-cream-2) !important;
  border: 1px solid var(--m-border) !important;
  width: 22px !important; height: 22px !important;
  font-weight: 500 !important;
}
.next-action .ask-agent {
  background: var(--m-cream-2) !important;
  color: var(--m-mint-dark) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.next-action .ask-agent:hover {
  background: var(--m-mint-soft) !important;
  border-color: var(--m-mint) !important;
}

/* ============================================================
 * KANBAN (page actions)
 * ============================================================ */
.a-card {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg) !important;
  box-shadow: none !important;
}
.a-card .a-btn {
  border-radius: var(--m-radius) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.a-card .a-btn.agent {
  background: var(--m-mint) !important;
  border: none !important;
  color: #fff !important;
}
.a-card .a-btn.agent:hover { background: var(--m-mint-dark) !important; }

/* ============================================================
 * TOP STRIP (date + meteo)
 * ============================================================ */
.top-strip {
  color: var(--m-ink-3) !important;
  margin-bottom: 16px !important;
  font-size: 12px !important;
}
.top-strip b { color: var(--m-ink) !important; font-weight: 500 !important; }

/* ============================================================
 * 🆕 17/06 — Règle legacy supprimée. Le bouton remove est défini
 * une seule fois plus bas (ligne ~953), avec le bon positionnement
 * À L'INTÉRIEUR du widget (top:6 right:6 au lieu de -8 / -8).
 * Garder une seule source de vérité évite les overrides en chaîne.
 * ============================================================ */

/* ============================================================
 * Boutique cards (page boutique.html)
 * ============================================================ */
.product, .pack-card {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg) !important;
  box-shadow: none !important;
}
.product:hover, .pack-card:hover {
  border-color: var(--m-mint) !important;
  transform: none !important;
}

/* ============================================================
 * FORMS — sections + helper texts
 * ============================================================ */
.form-section, fieldset {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg) !important;
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
}
.form-help, .helper {
  color: var(--m-ink-3) !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

/* ============================================================
 * CHAT (messages.html, admin-messages.html, drawer Happy)
 * ============================================================ */
.msg-row, .message-row {
  border-bottom: 1px solid var(--m-border) !important;
  padding: 10px 12px !important;
}
.msg-row:hover { background: var(--m-cream-2) !important; }
.bubble {
  border-radius: var(--m-radius-md) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  padding: 10px 14px !important;
}
.bubble.from-happia { background: var(--m-cream-2) !important; color: var(--m-ink) !important; }
.bubble.from-client { background: var(--m-mint) !important; color: #fff !important; }

/* ============================================================
 * TABLEAUX
 * ============================================================ */
table.list, table.data {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
}
table.list th, table.data th {
  background: var(--m-cream-2) !important;
  color: var(--m-ink-2) !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--m-border) !important;
}
table.list td, table.data td {
  font-size: 13px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--m-border) !important;
  color: var(--m-ink) !important;
}
table.list tr:last-child td, table.data tr:last-child td { border-bottom: 0 !important; }

/* ============================================================
 * NEUTRALISATION BRUTALIST RÉSIDUEL (cards spécifiques par page)
 * Toutes les classes des pages back-office qui ont encore
 * "border 1.5-2px solid var(--ink) + box-shadow Xpx Xpx 0 var(--ink)"
 * sont rebattues sur le design system 2026.
 * ============================================================ */
.kpi-card, .chart-section, .empty-state, .insight-card, .plan-locked,
.range-tabs, .modal, .modal-card,
.audit-section, .audit-block, .audit-row, .audit-list-item,
.bio-card, .network-card, .reseau-card,
.summary-card, .reputation-card, .review-card,
.bo-card, .cockpit-card,
.score-card, .source-card, .lever-card, .competitor-card,
.partner-card, .step-card,
.bench-card, .level-card, .platform-card,
.product-card, .pack-card,
.profile-card, .form-card, .connector-card,
.evolution-card, .timeline-card,
.factures-card, .invoice-card,
.message-card, .conv-card,
.action-card, .urgency-block, .next-block,
.alert-card, .warning-card,
.media-card, .quota-card,
.draft-card, .audit-draft-card,
.demande-block, .test-block,
.empty-card {
  background: #fff !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg) !important;
  box-shadow: var(--m-shadow-sm) !important;
}

/* Plan-locked : badge mint discret au lieu du gros gradient sunny */
.plan-locked {
  background: var(--m-mint-soft) !important;
  border: 1px solid #BCE9CC !important;
  color: var(--m-ink) !important;
}

/* Range tabs (sélection 7j / 30j / 90j sur Performance) */
.range-tabs {
  background: var(--m-cream-2) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  padding: 3px !important;
  box-shadow: none !important;
}
.range-tabs .range-tab,
.range-tabs button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  padding: 5px 12px !important;
  border-radius: var(--m-radius-sm) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--m-ink-2) !important;
  cursor: pointer;
}
.range-tabs .range-tab.active,
.range-tabs button.active {
  background: #fff !important;
  color: var(--m-ink) !important;
  box-shadow: 0 1px 3px rgba(12,31,78,0.08) !important;
}

/* Cards interne réseaux (.bio-card sur /mes-reseaux/) — bannière conseil */
.bio-card .bio-hint, .bio-card .conn-hint, .bio-hint, .conn-hint {
  background: var(--m-cream-2) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  color: var(--m-ink-2) !important;
  font-size: 12.5px !important;
  padding: 9px 12px !important;
  font-weight: 400 !important;
}

/* Boutons "✨ Générer par Happy" type btn-ai : flat mint */
.btn.btn-ai, .btn-ai, button.btn-ai {
  background: var(--m-mint) !important;
  color: #fff !important;
  border: 1px solid var(--m-mint) !important;
  border-radius: var(--m-radius) !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
.btn.btn-ai:hover, .btn-ai:hover, button.btn-ai:hover {
  background: var(--m-mint-dark) !important;
  border-color: var(--m-mint-dark) !important;
}

/* Modal overlay réseaux / boutique / coach */
.modal-overlay, .overlay {
  background: rgba(12,31,78,0.45) !important;
  backdrop-filter: blur(4px) !important;
}

/* Empty states centrés (performance, evolution, etc.) */
.empty-state, .empty-card, .empty {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg) !important;
  box-shadow: none !important;
  padding: 36px 24px !important;
  text-align: center;
}
.empty-state h2, .empty-state h3,
.empty-card h2, .empty-card h3 {
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  color: var(--m-ink) !important;
}
.empty-state p, .empty-card p {
  color: var(--m-ink-3) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* Page-head : neutralise hf-hl jaune dans les h1 admin */
.page-head h1 .hf-hl, .main h1 .hf-hl {
  background: transparent !important;
  padding: 0 !important;
  transform: none !important;
  display: inline !important;
  color: inherit !important;
  border-radius: 0 !important;
}

/* ============================================================
 * SCROLLBARS (Chrome / Safari)
 * ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--m-border-2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--m-ink-3); border: 2px solid transparent; background-clip: padding-box; }

/* ============================================================
 * GRIDSTACK — resize désactivé (tailles prédéfinies par widget)
 * On masque entièrement tout handle qui pourrait surgir.
 * ============================================================ */
.grid-stack-item > .ui-resizable-handle,
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .ui-resizable-e,
.grid-stack-item > .ui-resizable-s,
.grid-stack-item > .ui-resizable-n,
.grid-stack-item > .ui-resizable-w,
.grid-stack-item > .ui-resizable-ne,
.grid-stack-item > .ui-resizable-nw,
.grid-stack-item > .ui-resizable-sw {
  display: none !important;
}

/* ============================================================
 * Bouton "−" de retrait du widget
 *  - Invisible au repos (n'empiète sur aucun lien)
 *  - Apparaît au survol du widget, position décalée -6/-6
 *  - Cercle blanc + croix coral, bordure crème, hover plein coral
 * ============================================================ */
/* 🆕 17/06 — Bouton remove repositionné À L'INTÉRIEUR du widget (avant top:-8 / right:-8
   le mettait dans le margin entre widgets, illisible et infinitivable au hover).
   + visible en permanence à opacity 0.4 (discret), passe à 1 au survol. */
.widget-remove-btn {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--m-coral) !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: 0 2px 6px rgba(12,31,78,0.10) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0.4 !important;
  transform: scale(0.9) !important;
  transition: opacity .12s, transform .12s, background .12s, color .12s !important;
  z-index: 100 !important;
}
.grid-stack-item:hover .widget-remove-btn {
  opacity: 1 !important;
  transform: scale(1) !important;
}
.widget-remove-btn:hover {
  background: var(--m-coral) !important;
  color: #fff !important;
  border-color: var(--m-coral) !important;
}

/* ============================================================
 * 🆕 2026-07-12 — RESPONSIVE BACK-OFFICE (retour Christophe « pas responsive, encore moins en admin »)
 * modern.css est l'include UNIVERSEL du back-office → une seule règle rend TOUTES les pages
 * responsives d'un coup. !important pour battre les grilles `.app`/sidebar définies en <style> inline
 * dans chaque page (240px fixes) qui écrasaient le contenu sur mobile.
 * ============================================================ */
@media (max-width: 900px) {
  /* 1) La grille app passe en 1 colonne (fini la sidebar 240px qui compresse le contenu) */
  .app { grid-template-columns: 1fr !important; display: block !important; }

  /* 2) La sidebar devient une barre horizontale en haut : navigation PRÉSERVÉE (scroll horizontal),
        plus une colonne fixe. On sort du sticky pleine hauteur. */
  .sidebar {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    overflow-x: auto !important;
    padding: 8px 12px !important;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar .brand { padding: 0 10px 0 4px !important; flex: 0 0 auto !important; }
  .sidebar nav { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
                 gap: 4px !important; padding: 0 !important; overflow-x: auto !important; flex: 1 1 auto !important; }
  .sidebar nav a { white-space: nowrap !important; margin-bottom: 0 !important; padding: 8px 12px !important; }
  /* les intertitres de menu (Pilotage / Mesure…) et le pied de profil : masqués en barre mobile */
  .sidebar .nav-label,
  .sidebar .footer { display: none !important; }

  /* 3) Le contenu prend toute la largeur, hauteur auto, pas de scroll horizontal parasite */
  .main { height: auto !important; padding: 16px 14px 60px !important; min-width: 0 !important; }
  .app, .main { max-width: 100% !important; overflow-x: hidden !important; }

  /* 4) Anti-débordement générique : les grilles de cartes multi-colonnes s'empilent */
  .layout { grid-template-columns: 1fr !important; }
  img, table, pre, video, iframe { max-width: 100% !important; }
}