/* Modules « Agir » (actions.js), « Pilotage » (pilotage.js), audiences, contenus et jeu.
   Uniquement les variables du design system définies dans style.css (thèmes clair et sombre automatiques). */

/* ---------------------------------------------------------------- Bouton « Agir » dans les tableaux */
.act-btn { border: 1px solid var(--forest); background: var(--surface); color: var(--ink); border-radius: var(--radius-pill); padding: 4px 14px;
  font: 700 13px/20px var(--font-sans); cursor: pointer; white-space: nowrap; }
.act-btn:hover { background: var(--sky); color: var(--forest); }
@media (prefers-color-scheme: dark) { .act-btn { border-color: var(--lagoon); } }
.btn.danger { background: var(--signal-warn); color: var(--surface); }
.btn.quiet:hover { background: var(--surface-sunk); color: var(--ink); border-color: var(--ink); }
a.btn { display: inline-block; text-decoration: none; }

/* ---------------------------------------------------------------- Panneau latéral */
.act-backdrop { position: fixed; inset: 0; z-index: 46; background: color-mix(in srgb, var(--forest) 30%, transparent); }
.act-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 47; width: min(560px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border-left: 1px solid var(--line); box-shadow: -12px 0 32px color-mix(in srgb, var(--forest) 22%, transparent); }
body.act-open { overflow: hidden; }
body.act-open .dock-ai, body.act-open .dock-feedback { display: none; }
.act-pad { padding: 16px; }
.act-head { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--header); color: var(--header-ink); }
.act-title { min-width: 0; display: grid; gap: 4px; }
.act-title strong { font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.act-sub { font-size: 13px; opacity: .85; }
.act-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.act-status { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: var(--radius-sm); padding: 2px 8px;
  background: var(--surface); color: var(--ink); }
.act-status.warn { background: var(--signal-warn); color: var(--surface); }
.act-contacts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.act-contacts a { overflow-wrap: anywhere; }
.act-close { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 15px; }
.act-body { flex: 1; overflow-y: auto; padding: 4px 16px 20px; overscroll-behavior: contain; }
.act-body h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin: 18px 0 8px; }
.act-quote { margin: 12px 0 0; padding: 8px 12px; border-left: 3px solid var(--lagoon-strong); background: var(--surface-sunk); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.act-types { display: flex; flex-wrap: wrap; gap: 6px; }
.act-type { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius-pill);
  padding: 6px 12px; font: 700 13px/18px var(--font-sans); cursor: pointer; }
.act-type:hover:not(:disabled) { border-color: var(--ink); }
.act-type.on { background: var(--sky); color: var(--forest); border-color: var(--forest); }
.act-type.reco { border-color: var(--sun); box-shadow: inset 0 0 0 1px var(--sun); }
.act-type.danger { color: var(--signal-warn); }
.act-type:disabled { opacity: .45; cursor: not-allowed; }
.act-ico { display: inline-grid; place-items: center; min-width: 18px; font-size: 13px; font-weight: 800; color: var(--lagoon-strong); }
.act-type.on .act-ico { color: var(--forest); }
.act-compose { display: grid; gap: 10px; margin-top: 12px; }
.act-compose:empty { display: none; }
.act-compose textarea, .act-compose input[type="text"], .act-compose input[type="date"], .act-compose select, .act-foot input, .pil-editor input[type="text"], .pil-editor textarea, .pil-editor select,
.pil-fu input[type="date"], .act-units, .act-outcome select {
  font: 14px/1.45 var(--font-sans); padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); max-width: 100%; }
.act-compose textarea, .pil-editor textarea { width: 100%; resize: vertical; }
.act-field { display: grid; gap: 4px; font-size: 13px; min-width: 0; }
.act-field > span { color: var(--ink-muted); font-weight: 700; font-size: 12px; }
.act-field input[type="text"] { width: 100%; }
.act-tpl { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.act-tpl .act-field { flex: 1 1 160px; }
.act-variant { align-self: center; }
.act-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.act-utm { margin: 0; overflow-wrap: anywhere; }
.act-utm code { font-size: 11px; }
.act-done { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px; border-radius: var(--radius-md); background: var(--mint); color: #0f3326; }
.act-done .act-field > span { color: #0f3326; }
@media (prefers-color-scheme: dark) { .act-done { background: var(--surface-raised); color: var(--ink); } .act-done .act-field > span { color: var(--ink-muted); } }
.act-mark:disabled { opacity: .6; }
.act-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.act-item { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; background: var(--surface-sunk); }
.act-item.planned { border-style: dashed; }
.act-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.act-row-end { justify-content: space-between; margin-top: 6px; }
.act-when { margin-left: auto; }
.act-subject { font-size: 13px; font-weight: 700; margin-top: 4px; overflow-wrap: anywhere; }
.act-item details { margin-top: 4px; font-size: 13px; }
.act-item summary { cursor: pointer; color: var(--lagoon-strong); }
.act-pre { white-space: pre-wrap; font: 13px/1.45 var(--font-sans); margin: 6px 0 0; overflow-wrap: anywhere; }
.act-note { margin: 6px 0 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.act-outcome { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.act-outcome select { padding: 4px 8px; font-size: 13px; }
.act-units { width: 70px; padding: 4px 8px; }
.late { color: var(--signal-warn) !important; font-weight: 700; }
.act-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 13px; }
.act-foot input { width: 130px; padding: 4px 8px; }
.act-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; background: var(--ink); color: var(--surface); border-radius: var(--radius-pill);
  padding: 10px 18px; font-size: 14px; max-width: calc(100vw - 32px); box-shadow: 0 6px 20px color-mix(in srgb, var(--forest) 25%, transparent); }
.act-toast.warn { background: var(--signal-warn); }

/* ---------------------------------------------------------------- Pilotage */
.kpi-sub { display: block; color: var(--ink-muted); font-size: 12px; margin-top: 2px; }
.kpi-warn { border-color: var(--signal-warn); }
.kpi-warn .kpi-sub { color: var(--signal-warn); font-weight: 700; }
.pil-follow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pil-fu { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; padding: 10px 14px; border: 1px solid var(--line);
  border-left: 4px solid var(--lagoon-strong); border-radius: var(--radius-md); background: var(--surface-sunk); }
.pil-fu.due { border-left-color: var(--sun); }
.pil-fu.late { border-left-color: var(--signal-warn); }
.pil-fu.late .pil-fu-when { color: var(--signal-warn); }
.pil-fu-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.pil-fu-main strong { overflow-wrap: anywhere; }
.pil-fu-when { font-weight: 700; font-size: 13px; }
.pil-fu-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pil-fu input[type="date"] { padding: 4px 6px; font-size: 13px; }
.pil-sm { padding: 3px 12px; font-size: 12.5px; }
.pil-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.pil-legend span { display: inline-flex; gap: 6px; align-items: center; }
.pil-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.s0 { background: var(--sky); } .s1 { background: var(--lagoon); } .s2 { background: var(--sun); } .s3 { background: var(--signal-ok); }
.pil-funnel { display: grid; gap: 12px; }
.pil-frow { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 12px; align-items: start; }
.pil-flabel { display: grid; font-size: 14px; }
.pil-bars { display: grid; gap: 3px; min-width: 0; }
.pil-bar { position: relative; height: 18px; background: var(--surface-sunk); border-radius: 4px; }
.pil-bar i { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
.pil-bar span { position: absolute; left: 6px; top: 0; font-size: 12px; line-height: 18px; font-weight: 700; color: #0f3326; }
@media (prefers-color-scheme: dark) { .pil-bar span { color: var(--ink); text-shadow: 0 0 3px var(--surface); } }
.pil-ab { display: grid; gap: 14px; }
.pil-ab > *, .pil-abcard > * { min-width: 0; }
.pil-more { margin-top: 8px; }
.pil-abcard { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; background: var(--surface); }
.pil-abhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.pil-abhead .btn { margin-left: auto; }
.pil-badge { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: var(--radius-sm); padding: 2px 8px; border: 1px solid var(--line); }
.v-wait { color: var(--ink-muted); }
.v-win, .o-gagne, .o-interesse, .o-rdv, .o-devis_envoye { border-color: var(--signal-ok); color: var(--signal-ok); }
.v-tie, .o-repondu { border-color: var(--lagoon-strong); color: var(--lagoon-strong); }
.o-perdu, .o-desinscrit { border-color: var(--signal-warn); color: var(--signal-warn); }
.o-sans_reponse { color: var(--ink-muted); }
.pil-ab tr.off td { opacity: .6; }
.pil-ci { position: relative; height: 10px; min-width: 90px; background: var(--surface-sunk); border-radius: 5px; margin: 4px 0; }
.pil-ci i { position: absolute; top: 0; bottom: 0; background: var(--lagoon); border-radius: 5px; }
.pil-ci u { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--forest); }
@media (prefers-color-scheme: dark) { .pil-ci u { background: var(--cream); } }
.pil-abbtn { white-space: nowrap; }
.pil-abbtn .btn + .btn { margin-left: 4px; }
.pil-tpls .off { opacity: .6; }
.pil-editor { display: grid; gap: 12px; margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunk); }
.pil-erow { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.pil-erow .act-field:first-child { flex: 1 1 220px; }
.pil-erow .act-field input { width: 100%; }
.pil-segs { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; }
.pil-variants { display: grid; gap: 10px; }
.pil-variant { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.pil-variant.ia { border-style: dashed; border-color: var(--lagoon-strong); }
.pil-vhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pil-vhead .chk { margin-left: auto; font-size: 13px; }
.pil-journal td { font-size: 13px; }

/* ---------------------------------------------------------------- Téléphone */
@media (max-width: 760px) {
  .act-drawer { width: 100vw; border-left: 0; }
  .act-compose textarea, .act-compose input, .act-compose select { font-size: 16px; }
  .pil-frow { grid-template-columns: 1fr; gap: 4px; }
  .pil-abhead .btn { margin-left: 0; }
  .pil-fu-act { width: 100%; }
}
@media print { .act-drawer, .act-backdrop { display: none !important; } }
.act-head .tag { background: var(--surface); color: var(--ink); }

/* ---------------------------------------------------------------- Leads : sources, audiences, où publier */
.lp-sources { margin: 10px 0; }
.lp-section { margin-top: 8px; }
.lp-h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin: 18px 0 8px; }
.lp-quotas { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.lp-quota { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; min-width: 200px; flex: 1 1 200px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunk); font-size: 13px; }
.lp-quota i { grid-column: 1 / -1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.lp-quota i b { display: block; height: 100%; background: var(--lagoon-strong); }
.lp-quota.full { border-color: var(--signal-warn); }
.lp-quota.full i b { background: var(--signal-warn); }
.lp-accounts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lp-acc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); font-size: 13px; max-width: 100%; }
.lp-acc.off { opacity: .55; }
.lp-verify { font-size: 11px; font-weight: 700; color: var(--signal-warn); border: 1px solid var(--signal-warn); border-radius: var(--radius-sm); padding: 0 6px; margin-left: 4px; }
.lp-x { border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; padding: 0 4px; font-size: 13px; }
.lp-x:hover { color: var(--signal-warn); }
.lp-done { opacity: .7; border-left-color: var(--signal-ok); }
.act-fb { margin-top: 10px; align-items: center; }

/* ---------------------------------------------------------------- Contenus */
.ct-topics { padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-sunk); border: 1px solid var(--line); font-size: 14px; margin: 10px 0; }
.ct-topics ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-muted); font-size: 13px; }
.ct-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: 10px; }
.ct-col { display: grid; gap: 10px; min-width: 0; }
.ct-col h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.ct-card { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
.ct-card.done { background: var(--surface-sunk); }
.ct-card p { margin: 0; overflow-wrap: anywhere; }
.ct-title { overflow-wrap: anywhere; }
.ct-card textarea, .ct-card input { font: 14px/1.45 var(--font-sans); padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); width: 100%; }
.ct-toggle { justify-self: start; background: none; border: 0; padding: 0; color: var(--lagoon-strong); text-decoration: underline; cursor: pointer; font: 13px var(--font-sans); }
@media (max-width: 900px) { .ct-cols { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Jauge du jour (jeu) */
.gm-bar { position: relative; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; max-width: 1140px; margin: 14px auto 0;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunk); width: calc(100% - 32px); }
.gm-bar.gm-win { border-color: var(--sun); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 40%, transparent); }
.gm-main { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1 1 320px; }
.gm-ring { --p: 0; flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--lagoon-strong) calc(var(--p) * 1%), var(--line) 0); }
.gm-ring.met { background: conic-gradient(var(--signal-ok) 100%, var(--line) 0); }
.gm-ring span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.gm-txt { display: grid; gap: 2px; min-width: 0; }
.gm-line { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 14px; }
.gm-streak { display: inline-flex; align-items: center; gap: 4px; }
.gm-flame { fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linejoin: round; }
.gm-flame.on { stroke: var(--signal-warn); fill: var(--sun); }
.gm-joker { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--sky); color: #0f3326; }
.gm-mult { color: var(--signal-ok); font-weight: 800; }
.gm-level { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.gm-level i { width: 60px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.gm-level i b, .gm-gauge b { display: block; height: 100%; background: var(--lagoon-strong); }
.gm-msg { font-size: 13px; color: var(--ink-muted); }
.gm-side { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gm-obj { font-size: 13px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); }
.gm-who { font: 13px var(--font-sans); padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.gm-details { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 20px; padding-top: 10px; border-top: 1px solid var(--line); }
.gm-details h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 6px; }
.gm-details p { margin: 0 0 6px; font-size: 14px; }
.gm-gauge { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.gm-list { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.gm-list li.me { font-weight: 700; }
.gm-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-badge { font-size: 12px; padding: 2px 10px; border-radius: var(--radius-pill); border: 1px dashed var(--line); color: var(--ink-muted); }
.gm-badge.on { border: 1px solid var(--signal-ok); color: var(--ink); background: var(--mint); }
@media (prefers-color-scheme: dark) { .gm-badge.on { background: var(--surface-raised); } }
.gm-rules { grid-column: 1 / -1; }
.gm-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.gm-confetti i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 12px; border-radius: 2px; transform: rotate(var(--r));
  animation: gm-fall 2.6s ease-in var(--d) forwards; }
.gm-confetti i:nth-child(4n) { background: var(--sun); } .gm-confetti i:nth-child(4n+1) { background: var(--lagoon); }
.gm-confetti i:nth-child(4n+2) { background: var(--sky); } .gm-confetti i:nth-child(4n+3) { background: var(--signal-ok); }
@keyframes gm-fall { to { transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .gm-confetti { display: none; } }
@media (max-width: 760px) { .gm-bar { width: calc(100% - 32px); margin-top: 10px; } .gm-side { width: 100%; } }
@media print { .gm-bar { display: none !important; } }