/* ============================================================================
   « Campagnes » — port fidèle du design Claude Design
   Sources : kiclic/campagnes.css (cp-) + kiclic/campagnes2.css (ch- hub,
             cf- flux plein écran) de « Campagnes v2.html ».

   L'INTÉGRALITÉ des deux feuilles est reprise, pas une sélection : filtrer à
   la main revenait à découvrir des classes manquantes à l'usage (cp-slot,
   cp-ghost…). Tout est scopé sous .cp-root — le DashboardLayout est en
   Tailwind, et le design suppose des resets qui casseraient le reste du site
   s'ils fuyaient.

   Tokens : /catalogue-assets/catalogue-tokens.css — même feuille de design,
   déjà scopée .cp-root. La dupliquer ici la ferait dériver.

   ⚠️ Les blobs de fond utilisent sur des éléments de
   520 px dans le design. Sur iPhone c'est un écran blanc et des saccades (cf.
   mémoire « perf GPU web ») : rendus en radial-gradient — même image, zéro
   couche de compositing.
   ========================================================================== */

.cp-root, html[data-theme="dark"] .cp-root  {color-scheme: dark;
  --cp-t1:rgba(255,255,255,.02); --cp-t2:rgba(255,255,255,.03); --cp-t3:rgba(255,255,255,.045); --cp-t4:rgba(255,255,255,.06); --cp-t5:rgba(255,255,255,.085);
  --cp-topbar:color-mix(in srgb, var(--bg) 64%, transparent);
  --cp-tx-violet:#E0BFFF; --cp-tx-blue:#B9CFFA; --cp-tx-amber:#FCD34D; --cp-tx-green:#34D399; --cp-tx-pink:#FBA4C6; --cp-tx-red:#FCA5A5;
  --cp-cell:rgba(255,255,255,.018); --cp-cell-off:rgba(255,255,255,.008);
  --cp-shadow:0 24px 60px rgba(0,0,0,.45);}
html[data-theme="light"] .cp-root  {color-scheme: light;
  --bg:#F2F2F7; --bg-elev-1:#FFFFFF; --bg-elev-2:#F3F4F7;
  --border:#E2E4EA; --border-soft:rgba(17,24,39,.08);
  --surface-tint:rgba(17,24,39,.06); --surface-tint-light:rgba(17,24,39,.035); --surface-tint-strong:rgba(17,24,39,.09);
  --fg:#0B0D12; --fg-secondary:#4B5563; --fg-muted:#8A93A2;
  --cp-t1:rgba(17,24,39,.02); --cp-t2:rgba(17,24,39,.03); --cp-t3:rgba(17,24,39,.05); --cp-t4:rgba(17,24,39,.065); --cp-t5:rgba(17,24,39,.09);
  --cp-topbar:color-mix(in srgb, var(--bg) 72%, transparent);
  --cp-tx-violet:#8E45AE; --cp-tx-blue:#2563EB; --cp-tx-amber:#B45309; --cp-tx-green:#0E9F6E; --cp-tx-pink:#C0246B; --cp-tx-red:#B91C1C;
  --cp-cell:rgba(17,24,39,.014); --cp-cell-off:rgba(17,24,39,.035);
  --cp-shadow:0 24px 60px rgba(30,30,60,.16);}
html[data-theme="light"] .cp-root .k-side {background:linear-gradient(180deg,#FFF 0%,#F5F6F9 100%); border-right-color:var(--border);}
html[data-theme="light"] .cp-root .cp-bg .blob {opacity:.20}
.cp-root * {box-sizing:border-box}
.cp-root :where(.cp-wrap,.cp-drawer,.cp-actbar,.cp-toast,.cp-ov,.cp-tip,.cp-topbar,.cp-stages) svg {width:14px; height:14px; flex:0 0 auto; vertical-align:-2px}
.cp-root :where(.cp-f .hint,.cp-mini,.cp-legend .li,.cp-var .cp-mini,.cp-recap .sub) svg {width:12.5px; height:12.5px; stroke:var(--cp-tx-violet)}
.cp-root .cp-f .hint, .cp-root .cp-mini {display:flex; align-items:flex-start; gap:6px}
.cp-root .cp-f .hint svg, .cp-root .cp-mini svg {margin-top:2px}
.cp-root a {color:var(--cp-tx-violet); text-decoration:none}
.cp-root a:hover {color:var(--k-pink)}
.cp-root .cp-bg {position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.cp-root .cp-bg .blob {position:absolute; border-radius:50%; opacity:.16}
.cp-root .cp-bg .b1 {width:520px; height:520px; background:radial-gradient(closest-side, var(--k-blue), transparent 72%); top:-190px; left:-120px}
.cp-root .cp-bg .b2 {width:460px; height:460px; background:radial-gradient(closest-side, var(--k-violet), transparent 72%); top:-120px; right:8%}
.cp-root .cp-bg .b3 {width:420px; height:420px; background:radial-gradient(closest-side, var(--k-pink), transparent 72%); bottom:-220px; right:-100px}
.cp-root .cp-topbar {position:relative; z-index:5; display:flex; align-items:center; gap:14px; padding:18px 28px 14px; border-bottom:1px solid var(--border-soft); background:var(--cp-topbar); backdrop-filter:blur(14px)}
.cp-root .cp-title {display:flex; align-items:center; gap:13px; min-width:0}
.cp-root .cp-title .ic {width:40px; height:40px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(91,141,239,.18),rgba(233,78,139,.18)); border:1px solid var(--border-soft)}
.cp-root .cp-title .ic svg {width:21px; height:21px; stroke:url(#k-grad-stroke); stroke-width:1.8; fill:none}
.cp-root .cp-title h1 {margin:0; font-size:21px; font-weight:800; letter-spacing:-.015em; line-height:1.15}
.cp-root .cp-title .sub {font-size:12.5px; color:var(--fg-muted); margin-top:2px}
.cp-root .cp-sp {flex:1 1 auto}
.cp-root .cp-acct {display:flex; align-items:center; gap:9px; padding:7px 11px 7px 8px; border-radius:12px; background:var(--bg-elev-1); border:1px solid var(--border-soft); cursor:pointer; font:inherit; color:inherit}
.cp-root .cp-acct:hover {border-color:rgba(185,104,199,.35)}
.cp-root .cp-acct .av {width:26px; height:26px; flex:0 0 auto; border-radius:8px; background:var(--k-gradient); display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff}
.cp-root .cp-acct .who {display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; text-align:left}
.cp-root .cp-acct .nm {display:block; font-size:13px; font-weight:600; line-height:1.2}
.cp-root .cp-acct .rl {display:block; font-size:10.5px; line-height:1.2; color:var(--fg-muted)}
.cp-root .cp-acct svg {width:14px; height:14px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:2; color:var(--fg-muted)}
.cp-root .cp-tier {flex:0 0 auto; white-space:nowrap}
.cp-root .cp-tier {display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.01em; border:1px solid transparent}
.cp-root .cp-tier[data-t="free"] {background:var(--cp-t3); color:var(--fg-secondary); border-color:var(--border-soft)}
.cp-root .cp-tier[data-t="essentiel"] {background:rgba(91,141,239,.14); color:var(--cp-tx-blue); border-color:rgba(91,141,239,.3)}
.cp-root .cp-tier[data-t="pro"] {background:var(--k-gradient-pro); color:#231a00}
.cp-root .cp-tier[data-t="business"] {background:var(--k-gradient-h); color:#fff}
.cp-root .cp-stages {position:relative; z-index:4; flex:0 0 auto; display:flex; align-items:stretch; gap:4px; padding:0 28px; border-bottom:1px solid var(--border-soft); background:var(--cp-topbar); backdrop-filter:blur(14px); overflow-x:auto; overflow-y:hidden; scrollbar-width:none}
.cp-root .cp-stages::-webkit-scrollbar {display:none}
.cp-root .cp-stage-tab {position:relative; flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:11px 14px 13px; background:none; border:0; font:inherit; color:var(--fg-muted); cursor:pointer; border-radius:10px 10px 0 0}
.cp-root .cp-stage-tab:hover {color:var(--fg-secondary)}
.cp-root .cp-stage-tab .n {width:20px; height:20px; flex:0 0 auto; border-radius:6px; display:grid; place-items:center; font-size:11px; font-weight:800; background:var(--cp-t4); color:var(--fg-muted)}
.cp-root .cp-stage-tab .n svg {width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2}
.cp-root .cp-stage-tab .lock {display:inline-block; vertical-align:-2px}
.cp-root .cp-stage-tab .tt {text-align:left; min-width:0}
.cp-root .cp-stage-tab .tl {display:block; font-size:13.5px; font-weight:650; line-height:1.15; white-space:nowrap}
.cp-root .cp-stage-tab .tq {display:block; font-size:11px; color:var(--fg-muted); margin-top:1px; white-space:nowrap}
.cp-root .cp-stage-tab.on {color:var(--fg)}
.cp-root .cp-stage-tab.on .n {background:var(--k-gradient-h); color:#fff}
.cp-root .cp-stage-tab.on:after {content:''; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:2px; background:var(--k-gradient-h)}
.cp-root .cp-stage-tab[disabled] {opacity:.4; cursor:not-allowed}
.cp-root .cp-stage-tab .lock {width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2}
.cp-root .cp-stages .sep {width:1px; margin:12px 8px; background:var(--border-soft); flex:0 0 auto}
@media (max-width:1120px) {
  .cp-root .cp-stage-tab .tq {display:none}
  .cp-root .cp-stage-tab {padding:12px 12px 14px}
}
.cp-root .cp-body {position:relative; z-index:2; flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.cp-root .cp-scroll {flex:1 1 auto; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin}
.cp-root .cp-scroll::-webkit-scrollbar {width:9px}
.cp-root .cp-scroll::-webkit-scrollbar-thumb {background:var(--cp-t5); border-radius:9px}
.cp-root .cp-wrap {max-width:1180px; margin:0 auto; padding:26px 28px 40px}
.cp-root .cp-wrap.wide {max-width:1420px}
.cp-root .cp-pane {display:none}
.cp-root .cp-pane.on {display:block}
.cp-root .cp-card {background:var(--bg-elev-1); border:1px solid var(--border-soft); border-radius:18px}
.cp-root .cp-h {display:flex; align-items:flex-end; gap:12px; margin:0 0 14px}
.cp-root .cp-h h2 {margin:0; font-size:19px; font-weight:750; letter-spacing:-.01em}
.cp-root .cp-h .hs {font-size:12.5px; color:var(--fg-muted); padding-bottom:2px}
.cp-root .cp-h .hsp {flex:1 1 auto}
.cp-root .cp-eyebrow {font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:8px}
.cp-root .cp-b {display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:12px; font-size:13.5px; font-weight:650; border:1px solid var(--border); background:var(--bg-elev-1); color:var(--fg); cursor:pointer; font-family:inherit; transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.cp-root .cp-b:hover {background:var(--bg-elev-2); border-color:var(--border)}
.cp-root .cp-b:active {transform:scale(.985)}
/* `sm` était utilisé dans le balisage (bouton « Ouvrir » du parc, barre de
   sélection des campagnes) sans avoir jamais été défini : les boutons
   sortaient en taille pleine au milieu d'une ligne. */
.cp-root .cp-b.sm {padding:6px 11px; font-size:12.5px; border-radius:10px}
.cp-root .cp-b.sm svg {width:14px; height:14px}
.cp-root .cp-b svg {width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.cp-root .cp-b.pri {background:var(--k-gradient-h); border-color:transparent; color:#fff; box-shadow:0 8px 22px rgba(233,78,139,.28)}
.cp-root .cp-b.pri:hover {box-shadow:0 10px 28px rgba(233,78,139,.42); transform:translateY(-1px)}
.cp-root .cp-b.ghost {background:transparent; border-color:var(--border-soft); color:var(--fg-secondary)}
.cp-root .cp-b.ghost:hover {color:var(--fg); background:var(--cp-t2)}
.cp-root .cp-b.danger {color:var(--cp-tx-red); border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.08)}
.cp-root .cp-b.danger:hover {background:rgba(239,68,68,.14)}
.cp-root .cp-b.lg {padding:14px 22px; font-size:15px; border-radius:14px}
.cp-root .cp-b[disabled] {opacity:.45; cursor:not-allowed; box-shadow:none; transform:none}
.cp-root .cp-link {background:none; border:0; font:inherit; font-size:12.5px; font-weight:600; color:var(--cp-tx-violet); cursor:pointer; padding:0}
.cp-root .cp-link:hover {color:var(--k-pink)}
.cp-root .cp-pill {display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; background:var(--cp-t4); color:var(--fg-secondary)}
.cp-root .cp-pill.g {background:rgba(16,185,129,.14); color:var(--cp-tx-green)}
.cp-root .cp-pill.a {background:rgba(245,158,11,.14); color:var(--cp-tx-amber)}
.cp-root .cp-pill.r {background:rgba(239,68,68,.14); color:var(--cp-tx-red)}
.cp-root .cp-pill.v {background:rgba(185,104,199,.16); color:var(--cp-tx-violet)}
.cp-root .cp-pill.b {background:rgba(91,141,239,.14); color:var(--cp-tx-blue)}
.cp-root .cp-dot {width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto}
.cp-root .cp-contract {position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--border-soft); background:linear-gradient(150deg,rgba(91,141,239,.10),rgba(185,104,199,.07) 45%,rgba(233,78,139,.09)); padding:26px 28px}
.cp-root .cp-contract h2 {margin:0 0 4px; font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.15}
.cp-root .cp-contract h2 .g {background:var(--k-gradient-h); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.cp-root .cp-contract .lead {font-size:14px; color:var(--fg-secondary); max-width:56ch; line-height:1.5}
.cp-root .cp-deal {display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px}
.cp-root .cp-deal .d {background:var(--bg-elev-1); border:1px solid var(--border-soft); border-radius:14px; padding:14px 15px}
.cp-root .cp-deal .k {font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-muted); display:flex; align-items:center; gap:6px}
.cp-root .cp-deal .k svg {width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2}
.cp-root .cp-deal .v {font-size:13.5px; font-weight:600; line-height:1.42; margin-top:7px; color:var(--fg)}
.cp-root .cp-deal .d.hi {background:linear-gradient(var(--bg-elev-1),var(--bg-elev-1)) padding-box,var(--k-gradient) border-box; border-color:transparent}
.cp-root .cp-contract.slim {padding:16px 20px; border-radius:16px}
.cp-root .cp-contract.slim h2 {font-size:16px}
.cp-root .cp-contract.slim .cp-deal {margin-top:12px; gap:10px}
.cp-root .cp-contract.slim .cp-deal .d {padding:10px 12px}
.cp-root .cp-contract.slim .cp-deal .v {font-size:12.5px; margin-top:5px}
.cp-root .cp-empty {text-align:center; padding:10px 0 0}
.cp-root .cp-sugg {display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:14px}
.cp-root .cp-sugg button {display:flex; align-items:center; gap:11px; text-align:left; padding:12px 14px; border-radius:14px; border:1px dashed var(--border); background:var(--cp-t1); color:var(--fg); font:inherit; cursor:pointer; transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)}
.cp-root .cp-sugg button:hover {border-style:solid; border-color:rgba(185,104,199,.45); background:var(--cp-t3); transform:translateY(-2px)}
.cp-root .cp-sugg .z {width:30px; height:30px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(234,179,8,.2),rgba(245,158,11,.18))}
.cp-root .cp-sugg .z svg {width:15px; height:15px; stroke:var(--cp-tx-amber); fill:none; stroke-width:2}
.cp-root .cp-sugg .nm {font-size:13.5px; font-weight:650}
.cp-root .cp-sugg .sb {font-size:11.5px; color:var(--fg-muted); margin-top:1px}
.cp-root .cp-prods {display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:16px}
.cp-root .cp-prod {position:relative; border-radius:18px; background:var(--bg-elev-1); border:1px solid var(--border-soft); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--t-fast) var(--ease-out),border-color var(--t-fast),box-shadow var(--t-fast)}
.cp-root .cp-prod:hover {transform:translateY(-3px); border-color:rgba(185,104,199,.32); box-shadow:var(--cp-shadow)}
.cp-root .cp-prod.off {opacity:.62}
.cp-root .cp-prod .ph {position:relative; aspect-ratio:16/9; background:var(--bg-elev-2); overflow:hidden}
.cp-root .cp-prod .ph img {width:100%; height:100%; object-fit:cover; display:block}
.cp-root .cp-prod .ph .noimg {position:absolute; inset:0; display:grid; place-items:center; gap:6px; background:repeating-linear-gradient(135deg,var(--cp-t2) 0 8px,var(--cp-t1) 8px 16px)}
.cp-root .cp-prod .ph .noimg span {font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; color:var(--fg-muted)}
.cp-root .cp-prod .ph .tag {position:absolute; top:9px; left:9px; display:flex; gap:5px; flex-wrap:wrap}
.cp-root .cp-prod .bd {padding:13px 15px 15px; display:flex; flex-direction:column; gap:9px; flex:1 1 auto}
.cp-root .cp-prod .nm {font-size:15px; font-weight:700; letter-spacing:-.01em}
.cp-root .cp-prod .pr {display:flex; align-items:baseline; gap:7px; font-size:12.5px; color:var(--fg-secondary)}
.cp-root .cp-prod .pr b {font-weight:700; color:var(--fg)}
.cp-root .cp-prod .pr .arrow {color:var(--fg-muted)}
.cp-root .cp-prod .pr .marge {margin-left:auto; font-size:11px; color:var(--cp-tx-green); font-weight:700}
.cp-root .cp-gauge {margin-top:2px}
.cp-root .cp-gauge .lbl {display:flex; justify-content:space-between; font-size:11.5px; color:var(--fg-muted); margin-bottom:5px}
.cp-root .cp-gauge .lbl b {color:var(--fg); font-weight:700}
.cp-root .cp-gauge .tr {height:7px; border-radius:9px; background:var(--cp-t4); overflow:hidden; display:flex}
.cp-root .cp-gauge .fi {height:100%; background:var(--k-gradient-h); border-radius:9px}
.cp-root .cp-gauge .fi.plan {background:repeating-linear-gradient(135deg,rgba(185,104,199,.85) 0 4px,rgba(185,104,199,.35) 4px 8px)}
.cp-root .cp-gauge .fi.hot {background:var(--k-gradient-warn)}
.cp-root .cp-prod .acts {display:flex; gap:7px; margin-top:auto; padding-top:4px}
.cp-root .cp-prod .acts .cp-b {flex:1 1 0; padding:8px 10px; font-size:12.5px; border-radius:10px}
.cp-root .cp-addcard {border-radius:18px; border:1px dashed var(--border); background:var(--cp-t1); display:grid; place-items:center; min-height:220px; cursor:pointer; color:var(--fg-secondary); font:inherit; gap:8px; transition:all var(--t-fast)}
.cp-root .cp-addcard:hover {border-color:rgba(185,104,199,.5); background:var(--cp-t3); color:var(--fg)}
.cp-root .cp-addcard .cir {width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--k-gradient-h)}
.cp-root .cp-addcard .cir svg {width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2.2}
.cp-root .cp-addcard .t {font-size:13.5px; font-weight:650}
.cp-root .cp-addcard .s {font-size:11.5px; color:var(--fg-muted)}
.cp-root .cp-catbar {display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; border-radius:16px; background:var(--bg-elev-1); border:1px solid var(--border-soft); margin-bottom:18px}
.cp-root .cp-stat {display:flex; flex-direction:column; gap:1px}
.cp-root .cp-stat .n {font-size:22px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.cp-root .cp-stat .n .g {background:var(--k-gradient-h); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.cp-root .cp-stat .l {font-size:11.5px; color:var(--fg-muted)}
.cp-root .cp-vr {width:1px; align-self:stretch; background:var(--border-soft); margin:2px 4px}
.cp-root .cp-ov {position:fixed; inset:0; z-index:200; background:rgba(6,6,8,.74); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:24px}
html[data-theme="light"] .cp-root .cp-ov {background:rgba(30,30,50,.42)}
.cp-root .cp-ov.show {display:flex; animation:cpFade .18s ease-out}
@keyframes cpFade { from{opacity:0} to{opacity:1} }
.cp-root .cp-modal {width:100%; max-width:520px; background:var(--bg-elev-1); border:1px solid var(--border); border-radius:22px; box-shadow:var(--cp-shadow); overflow:hidden; animation:cpPop .22s var(--spring)}
@keyframes cpPop { from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none} }
.cp-root .cp-modal.wide {max-width:760px}
.cp-root .cp-mhead {padding:20px 24px 4px}
.cp-root .cp-mhead h3 {margin:0; font-size:19px; font-weight:750; letter-spacing:-.015em}
.cp-root .cp-mhead .s {font-size:12.5px; color:var(--fg-muted); margin-top:3px}
.cp-root .cp-mbody {padding:16px 24px 4px; display:flex; flex-direction:column; gap:14px}
.cp-root .cp-f {display:flex; flex-direction:column; gap:6px}
.cp-root .cp-f > label {font-size:12.5px; font-weight:650; color:var(--fg-secondary)}
.cp-root .cp-f .hint {font-size:11.5px; color:var(--fg-muted); line-height:1.4}
.cp-root .cp-in {width:100%; padding:11px 13px; border-radius:12px; border:1px solid var(--border); background:var(--cp-t2); color:var(--fg); font:inherit; font-size:14px; outline:none}
.cp-root .cp-in:focus {border-color:rgba(185,104,199,.55); background:var(--cp-t3)}
.cp-root .cp-in::placeholder {color:var(--fg-muted)}
.cp-root .cp-in[type=number] {appearance:textfield; -moz-appearance:textfield}
.cp-root .cp-in[type=number]::-webkit-outer-spin-button, .cp-root .cp-in[type=number]::-webkit-inner-spin-button {appearance:none; -webkit-appearance:none; margin:0}
.cp-root .cp-cap .big {appearance:textfield; -moz-appearance:textfield}
.cp-root .cp-cap .big::-webkit-outer-spin-button, .cp-root .cp-cap .big::-webkit-inner-spin-button {appearance:none; -webkit-appearance:none; margin:0}
.cp-root select.cp-in {appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgb(140,145,158)' d='M0 0h10L5 6z'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right:30px}
.cp-root .cp-cap {display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:16px; background:linear-gradient(135deg,rgba(91,141,239,.10),rgba(233,78,139,.10)); border:1px solid rgba(185,104,199,.28)}
.cp-root .cp-cap .big {width:96px; text-align:center; font-size:26px; font-weight:800; padding:8px 6px; border-radius:12px; border:1px solid var(--border); background:var(--bg-elev-1); color:var(--fg); font-family:inherit; font-variant-numeric:tabular-nums; outline:none}
.cp-root .cp-cap .big:focus {border-color:rgba(185,104,199,.6)}
.cp-root .cp-cap .mid {font-size:14px; color:var(--fg-secondary)}
.cp-root .cp-money {display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cp-root .cp-money .u {position:relative}
.cp-root .cp-money .u .cp-in {padding-right:30px}
.cp-root .cp-money .u .cur {position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--fg-muted); pointer-events:none}
.cp-root .cp-unit {position:relative; flex:1 1 0; min-width:0}
.cp-root .cp-unit .cp-in {padding-right:84px}
.cp-root .cp-unit .cur {position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:12.5px; color:var(--fg-muted); pointer-events:none; white-space:nowrap}
.cp-root .cp-photo {display:flex; align-items:center; gap:12px}
.cp-root .cp-photo .th {width:74px; height:52px; border-radius:10px; overflow:hidden; background:repeating-linear-gradient(135deg,var(--cp-t3) 0 8px,var(--cp-t1) 8px 16px); display:grid; place-items:center; flex:0 0 auto}
.cp-root .cp-photo .th img {width:100%; height:100%; object-fit:cover}
.cp-root .cp-photo .th span {font-family:ui-monospace,monospace; font-size:9px; color:var(--fg-muted); text-align:center; padding:2px}
.cp-root .cp-disc {border-top:1px solid var(--border-soft); margin-top:2px}
.cp-root .cp-disc > summary {list-style:none; cursor:pointer; padding:12px 0 0; font-size:12.5px; font-weight:600; color:var(--fg-secondary); display:flex; align-items:center; gap:7px}
.cp-root .cp-disc > summary::-webkit-details-marker {display:none}
.cp-root .cp-disc > summary svg {width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; transition:transform var(--t-fast)}
.cp-root .cp-disc[open] > summary svg {transform:rotate(90deg)}
.cp-root .cp-disc .inner {display:flex; flex-direction:column; gap:12px; padding:12px 0 2px}
.cp-root .cp-mfoot {display:flex; gap:10px; padding:16px 24px 20px}
.cp-root .cp-mfoot .cp-b {flex:1 1 0}
.cp-root .cp-mfoot .cp-b.pri {flex:1.7 1 0}
.cp-root .cp-gen {border-radius:20px; border:1px solid var(--border-soft); background:var(--bg-elev-1); padding:20px 22px; display:flex; flex-direction:column; gap:16px}
.cp-root .cp-genrow {display:grid; grid-template-columns:1.5fr 1fr; gap:16px}
.cp-root .cp-genrow.two {grid-template-columns:1fr 1fr}
.cp-root .cp-seg {display:flex; gap:4px; padding:4px; border-radius:12px; background:var(--cp-t3); border:1px solid var(--border-soft); flex-wrap:wrap}
.cp-root .cp-seg button {flex:1 1 auto; padding:8px 12px; border-radius:9px; border:0; background:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--fg-muted); cursor:pointer; white-space:nowrap; text-align:center}
.cp-root .cp-seg[data-seg="objectif"] {display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cp-root .cp-seg[data-seg="objectif"] button {flex:none}
.cp-root .cp-seg button svg {width:13px; height:13px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:2; vertical-align:-2px; display:inline-block}
.cp-root .cp-seg[data-seg="res"] button {display:inline-flex; align-items:center; justify-content:center; gap:7px}
.cp-root .cp-seg button:hover {color:var(--fg)}
.cp-root .cp-seg button.on {background:var(--bg-elev-1); color:var(--fg); box-shadow:0 2px 8px rgba(0,0,0,.2)}
.cp-root .cp-budget {display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap}
.cp-root .cp-expo {display:flex; align-items:flex-start; gap:8px; padding:11px 13px; border-radius:12px; background:rgba(245,158,11,.09); border:1px solid rgba(245,158,11,.26); font-size:12.5px; line-height:1.45; color:var(--fg-secondary)}
.cp-root .cp-expo svg {width:15px; height:15px; flex:0 0 auto; margin-top:1px; stroke:var(--cp-tx-amber); fill:none; stroke-width:2}
.cp-root .cp-pill svg, .cp-root .cp-tier svg {width:12px; height:12px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:2}
.cp-root .cp-expo b {color:var(--fg)}
.cp-root .cp-genfoot {display:flex; align-items:center; gap:14px; flex-wrap:wrap; border-top:1px solid var(--border-soft); padding-top:16px}
.cp-root .cp-conf {display:flex; align-items:center; gap:9px; font-size:12px; color:var(--fg-muted); line-height:1.4; max-width:52ch}
.cp-root .cp-conf .bars i {flex:0 0 auto}
.cp-root .cp-conf .bars {display:flex; gap:2.5px; align-items:flex-end; height:16px; flex:0 0 auto}
.cp-root .cp-conf .bars i {width:4px; border-radius:2px; background:var(--cp-t5)}
.cp-root .cp-conf .bars i.on {background:var(--k-gradient-h)}
.cp-root .cp-prodpick {display:flex; gap:8px; flex-wrap:wrap}
.cp-root .cp-chip {display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 8px; border-radius:999px; border:1px solid var(--border); background:var(--cp-t2); font:inherit; font-size:12.5px; font-weight:600; color:var(--fg-secondary); cursor:pointer}
.cp-root .cp-chip img {width:20px; height:20px; border-radius:50%; object-fit:cover}
.cp-root .cp-chip .ck {width:14px; height:14px; border-radius:4px; border:1.5px solid var(--border); display:grid; place-items:center}
.cp-root .cp-chip.on {color:var(--fg); border-color:rgba(185,104,199,.5); background:rgba(185,104,199,.1)}
.cp-root .cp-chip.on .ck {background:var(--k-gradient-h); border-color:transparent}
.cp-root .cp-chip .ck svg {width:10px; height:10px; stroke:#fff; fill:none; stroke-width:3; opacity:0}
.cp-root .cp-chip.on .ck svg {opacity:1}
.cp-root .cp-chip[disabled] {opacity:.4; cursor:not-allowed}
.cp-root .cp-vars {display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.cp-root .cp-var {position:relative; display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:18px; background:var(--bg-elev-1); border:1px solid var(--border-soft); cursor:pointer; text-align:left; font:inherit; color:inherit; transition:transform var(--t-fast) var(--ease-out),border-color var(--t-fast),box-shadow var(--t-fast)}
.cp-root .cp-var:hover {transform:translateY(-3px); border-color:rgba(185,104,199,.35); box-shadow:var(--cp-shadow)}
.cp-root .cp-var.best {background:linear-gradient(var(--bg-elev-1),var(--bg-elev-1)) padding-box,var(--k-gradient) border-box; border-color:transparent}
.cp-root .cp-var .rec {position:absolute; top:-9px; left:16px; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:800; background:var(--k-gradient-h); color:#fff}
.cp-root .cp-var .top {display:flex; align-items:center; gap:10px}
.cp-root .cp-var .ic {width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--cp-t4)}
.cp-root .cp-var .ic svg {width:17px; height:17px; stroke:url(#k-grad-stroke); fill:none; stroke-width:1.9}
.cp-root .cp-var h3 {margin:0; font-size:16px; font-weight:750; letter-spacing:-.01em}
.cp-root .cp-var .frm {font-size:11.5px; color:var(--fg-muted)}
.cp-root .cp-var .prof {font-size:12.5px; line-height:1.45; color:var(--fg-secondary)}
.cp-root .cp-var .kpis {display:grid; grid-template-columns:1fr 1fr; gap:9px; padding-top:4px; border-top:1px solid var(--border-soft)}
.cp-root .cp-var .kpi .k {font-size:10.5px; color:var(--fg-muted)}
.cp-root .cp-var .kpi .v {font-size:15px; font-weight:750; font-variant-numeric:tabular-nums; margin-top:1px}
.cp-root .cp-var .kpi .v small {font-size:11px; font-weight:600; color:var(--fg-muted)}
.cp-root .cp-var .go {margin-top:auto; padding-top:2px}
.cp-root .cp-var[data-locked="1"] {opacity:.66}
.cp-root .cp-var .lockrow {display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:650; color:var(--cp-tx-amber)}
.cp-root .cp-var .lockrow svg {width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2}
.cp-root .cp-plan {display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; min-width:0}
.cp-root .cp-plan > * {min-width:0}
@media (max-width:1180px) {
  .cp-root .cp-plan {grid-template-columns:1fr}
  .cp-root .cp-rail {position:static}
}
.cp-root .cp-planhead {display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.cp-root .cp-planhead .nm {font-size:17px; font-weight:750; letter-spacing:-.01em}
.cp-root .cp-planhead .mt {font-size:12px; color:var(--fg-muted)}
.cp-root .cp-cal {min-width:0; border-radius:18px; border:1px solid var(--border-soft); background:var(--bg-elev-1); overflow:hidden}
.cp-root .cp-calhead {display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border-soft)}
.cp-root .cp-calhead .mn {font-size:15px; font-weight:750; text-transform:capitalize}
.cp-root .cp-calhead .mmeta {font-size:11.5px; color:var(--fg-muted)}
.cp-root .cp-calhead .msp {flex:1 1 auto}
.cp-root .cp-calhead .mbudget {display:flex; align-items:center; gap:8px; font-size:11.5px}
.cp-root .cp-dows {display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--border-soft)}
.cp-root .cp-dows div {padding:7px 8px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted); text-align:center}
.cp-root .cp-dows div.off {color:var(--cp-tx-red); opacity:.55}
.cp-root .cp-grid {display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.cp-root .cp-day {position:relative; min-width:0; min-height:96px; padding:6px 6px 8px; border-right:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); background:var(--cp-cell); display:flex; flex-direction:column; gap:4px}
.cp-root .cp-day:nth-child(7n) {border-right:0}
.cp-root .cp-day.pad {background:var(--cp-cell-off); opacity:.5}
.cp-root .cp-day.closed {background:repeating-linear-gradient(135deg,var(--cp-t2) 0 6px,transparent 6px 12px)}
.cp-root .cp-day.past {opacity:.4}
.cp-root .cp-day .dn {display:flex; align-items:center; flex-wrap:wrap; gap:4px 5px; min-width:0; min-height:20px; font-size:11.5px; font-weight:700; color:var(--fg-muted)}
.cp-root .cp-day .dn .num {flex:0 0 auto; display:grid; place-items:center; width:20px; height:20px}
.cp-root .cp-day.today .dn .num {border-radius:50%; background:var(--k-gradient-h); color:#fff; font-size:10.5px}
.cp-root .cp-day .dn .cal {flex:1 0 100%; font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:5px; background:rgba(234,179,8,.16); color:var(--cp-tx-amber); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.cp-root .cp-day .dn .cal.ferie {background:rgba(239,68,68,.14); color:var(--cp-tx-red)}
.cp-root .cp-day .dn .closelbl {font-size:9.5px; color:var(--fg-muted); font-weight:600}
.cp-root .cp-day.dz {background:rgba(185,104,199,.14); box-shadow:inset 0 0 0 2px rgba(185,104,199,.6)}
.cp-root .cp-day.dz-no {background:rgba(239,68,68,.12); box-shadow:inset 0 0 0 2px rgba(239,68,68,.5)}
.cp-root .cp-slot {position:relative; min-width:0; border-radius:10px; padding:6px 7px; background:linear-gradient(140deg,rgba(91,141,239,.22),rgba(185,104,199,.2)); border:1px solid rgba(185,104,199,.4); cursor:grab; text-align:left; font:inherit; color:var(--fg); display:flex; flex-direction:column; gap:2px; transition:transform var(--t-fast),box-shadow var(--t-fast),opacity var(--t-fast)}
.cp-root .cp-slot:hover {transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.32); border-color:rgba(233,78,139,.6)}
.cp-root .cp-slot.geo {background:linear-gradient(140deg,rgba(16,185,129,.2),rgba(91,141,239,.2)); border-color:rgba(16,185,129,.42)}
.cp-root .cp-slot.sel {box-shadow:0 0 0 2px var(--k-pink)}
.cp-root .cp-slot.rejected {opacity:.42; filter:grayscale(1); cursor:pointer}
.cp-root .cp-slot.dragging {opacity:.35}
.cp-root .cp-slot .l1 {display:flex; align-items:center; gap:4px; min-width:0; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums}
.cp-root .cp-slot .l1 .ck {width:12px; height:12px; border-radius:3.5px; border:1.5px solid rgba(255,255,255,.45); display:grid; place-items:center; flex:0 0 auto}
.cp-root .cp-slot .l1 .ck svg {width:9px; height:9px; stroke:#fff; fill:none; stroke-width:3.4; opacity:0}
.cp-root .cp-slot.keep .l1 .ck {background:var(--k-pink); border-color:var(--k-pink)}
.cp-root .cp-slot.keep .l1 .ck svg {opacity:1}
.cp-root .cp-slot .l2 {min-width:0; font-size:10.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--fg-secondary)}
.cp-root .cp-slot .l3 {display:flex; align-items:center; gap:4px; min-width:0; font-size:10px; color:var(--fg-muted); font-weight:650}
.cp-root .cp-slot .l3 .tx, .cp-root .cp-ghost .tx {flex:0 1 auto; min-width:0; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-root .cp-slot .l3 .gi {width:10px; height:10px; stroke:var(--cp-tx-green); fill:none; stroke-width:2.4}
.cp-root .cp-slot .rg {position:absolute; top:-4px; right:-4px; width:15px; height:15px; border-radius:50%; background:var(--k-violet); display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg-elev-1)}
.cp-root .cp-slot .rg svg {width:9px; height:9px; stroke:#fff; fill:none; stroke-width:2.6}
.cp-root .cp-slot .mod {position:absolute; top:-4px; left:-4px; width:15px; height:15px; border-radius:50%; background:var(--k-blue); display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg-elev-1)}
.cp-root .cp-slot .mod svg {width:9px; height:9px; stroke:#fff; fill:none; stroke-width:2.6}
.cp-root .cp-ghost {min-width:0; border-radius:9px; padding:5px 7px; background:var(--cp-t3); border:1px dashed var(--border); font-size:10.5px; color:var(--fg-muted); font-weight:600; display:flex; align-items:center; gap:5px; overflow:hidden}
.cp-root .cp-ghost svg {width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:2; flex:0 0 auto}
.cp-root .cp-tip {position:fixed; z-index:300; max-width:288px; padding:10px 12px; border-radius:12px; background:var(--bg-elev-2); border:1px solid var(--border); box-shadow:var(--cp-shadow); font-size:12px; line-height:1.45; color:var(--fg); pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s,transform .12s}
.cp-root .cp-tip.show {opacity:1; transform:none}
.cp-root .cp-tip .th {font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--cp-tx-violet); margin-bottom:4px; display:flex; align-items:center; gap:5px}
.cp-root .cp-tip .th svg {width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2}
.cp-root .cp-tip .mt {margin-top:7px; padding-top:7px; border-top:1px solid var(--border-soft); font-size:11px; color:var(--fg-muted); display:flex; gap:10px; flex-wrap:wrap}
.cp-root .cp-tip .mt b {color:var(--fg)}
.cp-root .cp-rail {position:sticky; top:0; display:flex; flex-direction:column; gap:12px}
.cp-root .cp-rbox {border-radius:16px; background:var(--bg-elev-1); border:1px solid var(--border-soft); padding:15px 16px}
.cp-root .cp-rbox .rt {font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:11px; display:flex; align-items:center; gap:6px}
.cp-root .cp-rbox .rt svg {width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2}
.cp-root .cp-count {display:flex; align-items:baseline; gap:8px}
.cp-root .cp-count .n {font-size:34px; font-weight:850; letter-spacing:-.03em; line-height:1; background:var(--k-gradient-h); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-variant-numeric:tabular-nums}
.cp-root .cp-count .l {font-size:12.5px; color:var(--fg-secondary); line-height:1.3}
.cp-root .cp-two {display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.cp-root .cp-mon {padding:10px 11px; border-radius:12px; background:var(--cp-t2); border:1px solid var(--border-soft)}
.cp-root .cp-mon .k {font-size:10.5px; color:var(--fg-muted); font-weight:700}
.cp-root .cp-mon .v {font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px; letter-spacing:-.02em}
.cp-root .cp-mon.real {background:rgba(16,185,129,.09); border-color:rgba(16,185,129,.24)}
.cp-root .cp-mon.real .v {color:var(--cp-tx-green)}
.cp-root .cp-mon.expo {background:rgba(245,158,11,.09); border-color:rgba(245,158,11,.26)}
.cp-root .cp-mon.expo .v {color:var(--cp-tx-amber)}
.cp-root .cp-mon .s {font-size:10.5px; color:var(--fg-muted); margin-top:2px; line-height:1.35}
.cp-root .cp-bars {display:flex; flex-direction:column; gap:10px; margin-top:12px}
.cp-root .cp-bar .bl {display:flex; justify-content:space-between; font-size:11.5px; margin-bottom:4px; color:var(--fg-secondary)}
.cp-root .cp-bar .bl b {color:var(--fg); font-weight:700; font-variant-numeric:tabular-nums}
.cp-root .cp-bar .tr {height:6px; border-radius:8px; background:var(--cp-t4); overflow:hidden; position:relative}
.cp-root .cp-bar .fi {height:100%; border-radius:8px; background:var(--k-gradient-h); transition:width var(--t-base) var(--ease-out)}
.cp-root .cp-bar .fi.g {background:linear-gradient(90deg,#10B981,#34D399)}
.cp-root .cp-bar .fi.a {background:var(--k-gradient-warn)}
.cp-root .cp-bar .fi.r {background:var(--k-gradient-error)}
.cp-root .cp-bar .cap {position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--fg-muted); opacity:.7}
.cp-root .cp-caplist {display:flex; flex-direction:column; gap:9px}
.cp-root .cp-capitem {display:flex; align-items:center; gap:9px}
.cp-root .cp-capitem img {width:26px; height:26px; border-radius:7px; object-fit:cover; flex:0 0 auto}
.cp-root .cp-capitem .cc {flex:1 1 auto; min-width:0}
.cp-root .cp-capitem .nm {font-size:12px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-root .cp-capitem .tr {height:5px; border-radius:6px; background:var(--cp-t4); margin-top:4px; overflow:hidden; display:flex}
.cp-root .cp-capitem .u {height:100%; background:var(--cp-t5)}
.cp-root .cp-capitem .p {height:100%; background:var(--k-gradient-h)}
.cp-root .cp-capitem .vv {font-size:11px; font-weight:700; color:var(--fg-secondary); font-variant-numeric:tabular-nums; flex:0 0 auto}
.cp-root .cp-viol {display:flex; flex-direction:column; gap:7px; margin-top:10px}
.cp-root .cp-viol .v {display:flex; gap:7px; font-size:11.5px; line-height:1.4; padding:8px 10px; border-radius:10px; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.26); color:var(--cp-tx-red)}
.cp-root .cp-viol .v svg {width:13px; height:13px; flex:0 0 auto; margin-top:1px; stroke:currentColor; fill:none; stroke-width:2}
.cp-root .cp-note {display:flex; gap:11px; padding:13px 15px; border-radius:14px; font-size:13px; line-height:1.5; background:var(--cp-t2); border:1px solid var(--border-soft); color:var(--fg-secondary)}
.cp-root .cp-note svg {width:17px; height:17px; flex:0 0 auto; margin-top:1px; stroke:currentColor; fill:none; stroke-width:2}
.cp-root .cp-note b {color:var(--fg)}
.cp-root .cp-note .cp-link {font-size:12.5px}
.cp-root .cp-note.warn {background:rgba(245,158,11,.09); border-color:rgba(245,158,11,.28)}
.cp-root .cp-note.warn svg {stroke:var(--cp-tx-amber)}
.cp-root .cp-note.err {background:rgba(239,68,68,.09); border-color:rgba(239,68,68,.28)}
.cp-root .cp-note.err svg {stroke:var(--cp-tx-red)}
.cp-root .cp-note.ok {background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.26)}
.cp-root .cp-note.ok svg {stroke:var(--cp-tx-green)}
.cp-root .cp-note.info svg {stroke:var(--cp-tx-blue)}
.cp-root .cp-note .body {flex:1 1 auto; min-width:0}
.cp-root .cp-note .acts {display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.cp-root .cp-actbar {position:relative; z-index:6; display:flex; align-items:center; gap:12px; padding:14px 28px; border-top:1px solid var(--border-soft); background:var(--cp-topbar); backdrop-filter:blur(14px)}
.cp-root .cp-actbar .info {font-size:12.5px; color:var(--fg-muted); line-height:1.4}
.cp-root .cp-actbar .info b {color:var(--fg)}
.cp-root .cp-actbar .sp {flex:1 1 auto}
.cp-root .cp-drawer {position:fixed; top:0; right:0; bottom:0; width:472px; max-width:94vw; z-index:210; background:var(--bg-elev-1); border-left:1px solid var(--border); box-shadow:-24px 0 60px rgba(0,0,0,.5); transform:translateX(100%); transition:transform var(--t-base) var(--ease-out); display:flex; flex-direction:column}
.cp-root .cp-drawer.show {transform:none}
.cp-root .cp-dhead {padding:18px 20px 14px; border-bottom:1px solid var(--border-soft)}
.cp-root .cp-dhead .top {display:flex; align-items:flex-start; gap:10px}
.cp-root .cp-dhead h3 {margin:0; font-size:18px; font-weight:780; letter-spacing:-.015em}
.cp-root .cp-dhead .when {font-size:12.5px; color:var(--fg-secondary); margin-top:3px; text-transform:capitalize}
.cp-root .cp-dhead .x {margin-left:auto; width:30px; height:30px; border-radius:9px; border:1px solid var(--border-soft); background:var(--cp-t2); color:var(--fg-muted); cursor:pointer; display:grid; place-items:center; flex:0 0 auto}
.cp-root .cp-dhead .x:hover {color:var(--fg); background:var(--cp-t4)}
.cp-root .cp-dhead .x svg {width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.4}
.cp-root .cp-why {display:flex; gap:9px; margin-top:12px; padding:11px 12px; border-radius:12px; background:linear-gradient(135deg,rgba(185,104,199,.12),rgba(91,141,239,.1)); border:1px solid rgba(185,104,199,.28); font-size:12.5px; line-height:1.45}
.cp-root .cp-why svg {width:15px; height:15px; flex:0 0 auto; margin-top:1px; stroke:url(#k-grad-stroke); fill:none; stroke-width:2}
.cp-root .cp-dbody {flex:1 1 auto; overflow-y:auto; padding:16px 20px 20px; display:flex; flex-direction:column; gap:6px; scrollbar-width:thin}
.cp-root .cp-dbody::-webkit-scrollbar {width:8px}
.cp-root .cp-dbody::-webkit-scrollbar-thumb {background:var(--cp-t5); border-radius:8px}
.cp-root .cp-dsec {font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-muted); margin:14px 0 4px}
.cp-root .cp-fld {padding:11px 0; border-bottom:1px solid var(--border-soft)}
.cp-root .cp-fld .fh {display:flex; align-items:center; gap:8px}
.cp-root .cp-fld .fk {font-size:12px; font-weight:700; color:var(--fg-secondary); flex:0 0 128px}
.cp-root .cp-fld .fv {flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:600}
.cp-root .cp-fld .fv input, .cp-root .cp-fld .fv textarea, .cp-root .cp-fld .fv select {width:100%; padding:8px 10px; border-radius:9px; border:1px solid var(--border); background:var(--cp-t2); color:var(--fg); font:inherit; font-size:13px; outline:none; resize:vertical}
.cp-root .cp-fld .fv input:focus, .cp-root .cp-fld .fv textarea:focus {border-color:rgba(185,104,199,.55)}
.cp-root .cp-fld .fw {font-size:11.5px; line-height:1.42; color:var(--fg-muted); margin-top:6px; padding-left:0; display:flex; gap:6px}
.cp-root .cp-fld .fw svg {width:12px; height:12px; flex:0 0 auto; margin-top:2px; stroke:var(--cp-tx-violet); fill:none; stroke-width:2}
.cp-root .cp-fld.locked .fv {color:var(--fg-muted)}
.cp-root .cp-range {display:flex; align-items:center; gap:11px}
.cp-root .cp-range input[type=range] {flex:1 1 auto; accent-color:var(--k-pink); height:5px}
.cp-root .cp-range .out {min-width:76px; text-align:right; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums}
.cp-root .cp-range .out small {display:block; font-size:10.5px; font-weight:600; color:var(--fg-muted)}
.cp-root .cp-sw {position:relative; width:38px; height:22px; border-radius:999px; background:var(--cp-t5); border:0; cursor:pointer; flex:0 0 auto; transition:background var(--t-fast)}
.cp-root .cp-sw:after {content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform var(--t-fast) var(--ease-out)}
.cp-root .cp-sw.on {background:var(--k-gradient-h)}
.cp-root .cp-sw.on:after {transform:translateX(16px)}
.cp-root .cp-dfoot {padding:14px 20px 18px; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:10px}
.cp-root .cp-dfoot .row {display:flex; gap:9px}
.cp-root .cp-dfoot .row .cp-b {flex:1 1 0}
.cp-root .cp-reasons {display:flex; flex-wrap:wrap; gap:6px}
.cp-root .cp-reasons button {padding:6px 10px; border-radius:999px; font:inherit; font-size:11.5px; font-weight:600; border:1px solid var(--border); background:var(--cp-t2); color:var(--fg-secondary); cursor:pointer}
.cp-root .cp-reasons button:hover {border-color:rgba(239,68,68,.4); color:var(--cp-tx-red)}
.cp-root .cp-mini {font-size:11.5px; color:var(--fg-muted); line-height:1.45}
.cp-root .cp-confirm {max-width:640px; margin:8px auto 0; text-align:center}
.cp-root .cp-confirm .seal {width:66px; height:66px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center; background:var(--k-gradient); box-shadow:0 14px 40px rgba(185,104,199,.4); animation:cpPop .4s var(--spring)}
.cp-root .cp-confirm .seal svg {width:31px; height:31px; stroke:#fff; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.cp-root .cp-confirm h2 {margin:0 0 6px; font-size:25px; font-weight:820; letter-spacing:-.02em}
.cp-root .cp-confirm .lead {font-size:14px; color:var(--fg-secondary); line-height:1.5}
.cp-root .cp-recap {text-align:left; margin-top:22px; border-radius:18px; border:1px solid var(--border-soft); background:var(--bg-elev-1); overflow:hidden}
.cp-root .cp-recap .r {display:flex; gap:12px; padding:14px 17px; border-bottom:1px solid var(--border-soft); font-size:13.5px; line-height:1.45}
.cp-root .cp-recap .r:last-child {border-bottom:0}
.cp-root .cp-recap .r .ri {width:30px; height:30px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; background:var(--cp-t4)}
.cp-root .cp-recap .r .ri svg {width:15px; height:15px; stroke:url(#k-grad-stroke); fill:none; stroke-width:2}
.cp-root .cp-recap .r b {font-weight:700}
.cp-root .cp-recap .r .sub {font-size:11.5px; color:var(--fg-muted); margin-top:2px}
.cp-root .cp-recap .r.hi {background:rgba(245,158,11,.07)}
.cp-root .cp-kpis {display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:13px}
.cp-root .cp-kpi {padding:15px 16px; border-radius:16px; background:var(--bg-elev-1); border:1px solid var(--border-soft)}
.cp-root .cp-kpi .k {font-size:11.5px; color:var(--fg-muted); font-weight:650}
.cp-root .cp-kpi .v {font-size:25px; font-weight:830; letter-spacing:-.025em; margin-top:5px; font-variant-numeric:tabular-nums}
.cp-root .cp-kpi .v small {font-size:12.5px; font-weight:650; color:var(--fg-muted); letter-spacing:0}
.cp-root .cp-kpi .d {font-size:11.5px; margin-top:5px; line-height:1.4; color:var(--fg-secondary)}
.cp-root .cp-kpi .d .up {color:var(--cp-tx-green); font-weight:700}
.cp-root .cp-kpi .d .dn {color:var(--cp-tx-red); font-weight:700}
.cp-root .cp-kpi.hero {background:linear-gradient(140deg,rgba(16,185,129,.12),rgba(91,141,239,.08)); border-color:rgba(16,185,129,.28)}
.cp-root .cp-tl {border-radius:18px; border:1px solid var(--border-soft); background:var(--bg-elev-1); overflow-x:auto; scrollbar-width:thin}
.cp-root .cp-tlrow {display:grid; grid-template-columns:minmax(96px,118px) minmax(150px,1fr) minmax(120px,158px) minmax(110px,128px); gap:14px; align-items:center; padding:12px 17px; border-bottom:1px solid var(--border-soft); font-size:13px; min-width:560px}
.cp-root .cp-tlrow:last-child {border-bottom:0}
.cp-root .cp-tlrow.head {font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted); background:var(--cp-t2)}
.cp-root .cp-tlrow .wh {font-weight:700; text-transform:capitalize}
.cp-root .cp-tlrow .wh small {display:block; font-size:11px; font-weight:600; color:var(--fg-muted); text-transform:none}
.cp-root .cp-tlrow .pd {display:flex; align-items:center; gap:9px; min-width:0}
.cp-root .cp-tlrow .pd > div {min-width:0}
.cp-root .cp-tlrow > * {min-width:0}
.cp-root .cp-tlrow .pd img {width:28px; height:28px; border-radius:8px; object-fit:cover; flex:0 0 auto}
.cp-root .cp-tlrow .pd .nn {font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-root .cp-tlrow .pd .ss {font-size:11px; color:var(--fg-muted)}
.cp-root .cp-cmp {display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums}
.cp-root .cp-cmp .mini {flex:1 1 auto; height:6px; border-radius:6px; background:var(--cp-t4); overflow:hidden; position:relative}
.cp-root .cp-cmp .mini i {position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:var(--k-gradient-h)}
.cp-root .cp-cmp .mini i.g {background:linear-gradient(90deg,#10B981,#34D399)}
.cp-root .cp-cmp .mini i.a {background:var(--k-gradient-warn)}
.cp-root .cp-cmp .tx {font-size:11.5px; font-weight:700; min-width:52px; text-align:right}
.cp-root .cp-heat {display:grid; grid-template-columns:44px repeat(12,1fr); gap:3px; font-size:10px}
.cp-root .cp-heat .hh {color:var(--fg-muted); text-align:center; font-weight:700; padding-bottom:2px}
.cp-root .cp-heat .rl {color:var(--fg-muted); font-weight:700; display:flex; align-items:center}
.cp-root .cp-heat .c {aspect-ratio:1/1; border-radius:5px; background:var(--cp-t2); position:relative}
.cp-root .cp-heat .c.on {background:linear-gradient(135deg,var(--k-blue),var(--k-pink))}
.cp-root .cp-heat .c.closed {background:repeating-linear-gradient(135deg,var(--cp-t3) 0 3px,transparent 3px 6px)}
.cp-root .cp-heat .c.top:after {content:''; position:absolute; inset:0; border-radius:5px; box-shadow:inset 0 0 0 1.5px #fff}
.cp-root .cp-top3 {display:flex; flex-direction:column; gap:8px}
.cp-root .cp-top3 .t {display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px; background:var(--cp-t2); font-size:12.5px}
.cp-root .cp-top3 .t .r {width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:10.5px; font-weight:800; background:var(--k-gradient-h); color:#fff; flex:0 0 auto}
.cp-root .cp-top3 .t .sp {flex:1 1 auto}
.cp-root .cp-top3 .t b {font-variant-numeric:tabular-nums}
.cp-root .cp-parc {border-radius:18px; border:1px solid var(--border-soft); background:var(--bg-elev-1); overflow-x:auto; scrollbar-width:thin}
.cp-root .cp-parc::-webkit-scrollbar, .cp-root .cp-tl::-webkit-scrollbar {height:9px}
.cp-root .cp-parc::-webkit-scrollbar-thumb, .cp-root .cp-tl::-webkit-scrollbar-thumb {background:var(--cp-t5); border-radius:9px}
.cp-root .cp-prow {display:grid; grid-template-columns:26px minmax(190px,1.6fr) minmax(76px,96px) minmax(88px,108px) minmax(96px,118px) minmax(120px,132px); gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-soft); font-size:13px; min-width:720px}
.cp-root .cp-prow > * {min-width:0}
.cp-root .cp-prow:last-child {border-bottom:0}
.cp-root .cp-prow.head {font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted); background:var(--cp-t2)}
.cp-root .cp-prow .es {display:flex; align-items:center; gap:10px; min-width:0}
.cp-root .cp-prow .es > div {min-width:0}
.cp-root .cp-prow .es .lg {width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; background:var(--k-gradient); flex:0 0 auto}
.cp-root .cp-prow .es .nn {font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-root .cp-prow .es .ss {font-size:11px; color:var(--fg-muted)}
.cp-root .cp-prow .num {font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-root .cp-prow .num small {font-weight:600; color:var(--fg-muted); font-size:11px}
.cp-root .cp-ck {width:17px; height:17px; border-radius:5px; border:1.5px solid var(--border); background:var(--cp-t2); cursor:pointer; display:grid; place-items:center; padding:0}
.cp-root .cp-ck svg {width:11px; height:11px; stroke:#fff; fill:none; stroke-width:3.2; opacity:0}
.cp-root .cp-ck.on {background:var(--k-gradient-h); border-color:transparent}
.cp-root .cp-ck.on svg {opacity:1}
.cp-root .cp-ck[disabled] {opacity:.35; cursor:not-allowed}
.cp-root .cp-gate {position:relative; border-radius:20px; overflow:hidden; border:1px solid rgba(234,179,8,.32)}
/* 7 px sur une carte statique : sans le flou, l'aperçu verrouillé n'est plus
   un aperçu, c'est une fuite. Le garde-fou perf vise les blobs de 100 px+. */
.cp-root .cp-gate .blurred {filter:blur(7px); pointer-events:none; user-select:none; opacity:.85}
.cp-root .cp-gate .veil {position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:26px; background:radial-gradient(circle at 50% 40%,rgba(10,10,10,.55),rgba(10,10,10,.85))}
html[data-theme="light"] .cp-root .cp-gate .veil {background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.7),rgba(240,240,246,.92))}
.cp-root .cp-gate .veil .lk {width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--k-gradient-pro); box-shadow:0 10px 30px rgba(245,158,11,.35)}
.cp-root .cp-gate .veil .lk svg {width:22px; height:22px; stroke:#231a00; fill:none; stroke-width:2.2}
.cp-root .cp-gate .veil h3 {margin:0; font-size:20px; font-weight:800; letter-spacing:-.015em}
.cp-root .cp-gate .veil p {margin:0; font-size:13.5px; color:var(--fg-secondary); max-width:44ch; line-height:1.5}
.cp-root .cp-gate .veil .figs {display:flex; gap:20px; padding:12px 18px; border-radius:14px; background:var(--bg-elev-1); border:1px solid var(--border-soft)}
.cp-root .cp-gate .veil .figs .f .v {font-size:19px; font-weight:820; font-variant-numeric:tabular-nums}
.cp-root .cp-gate .veil .figs .f .k {font-size:10.5px; color:var(--fg-muted)}
.cp-root .cp-toast {position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); z-index:400; max-width:min(560px,92vw); display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:14px; background:var(--bg-elev-2); border:1px solid var(--border); box-shadow:var(--cp-shadow); font-size:13px; line-height:1.45; opacity:0; pointer-events:none; transition:opacity var(--t-fast),transform var(--t-fast) var(--ease-out)}
.cp-root .cp-toast.show {opacity:1; transform:translate(-50%,0)}
.cp-root .cp-toast svg {width:16px; height:16px; flex:0 0 auto; margin-top:1px; stroke:currentColor; fill:none; stroke-width:2}
.cp-root .cp-toast.ok {border-color:rgba(16,185,129,.4)}
.cp-root .cp-toast.ok svg {stroke:var(--cp-tx-green)}
.cp-root .cp-toast.warn {border-color:rgba(245,158,11,.4)}
.cp-root .cp-toast.warn svg {stroke:var(--cp-tx-amber)}
.cp-root .cp-toast.err {border-color:rgba(239,68,68,.4)}
.cp-root .cp-toast.err svg {stroke:var(--cp-tx-red)}
.cp-root .cp-sect {margin-top:26px}
.cp-root .cp-sect:first-child {margin-top:0}
.cp-root .cp-legend {display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--fg-muted); margin-top:10px}
.cp-root .cp-legend .li {display:flex; align-items:center; gap:6px}
.cp-root .cp-tlrow .pd img, .cp-root .cp-capitem img, .cp-root .cp-chip img {flex:0 0 auto}
.cp-root .cp-legend .sq {width:11px; height:11px; border-radius:3.5px; flex:0 0 auto}
.cp-root .cp-legend .sq.prop {background:linear-gradient(140deg,rgba(91,141,239,.5),rgba(185,104,199,.5)); border:1px solid rgba(185,104,199,.6)}
.cp-root .cp-legend .sq.geo {background:linear-gradient(140deg,rgba(16,185,129,.5),rgba(91,141,239,.5)); border:1px solid rgba(16,185,129,.6)}
.cp-root .cp-legend .sq.ex {background:var(--cp-t4); border:1px dashed var(--border)}
.cp-root .cp-legend .sq.cl {background:repeating-linear-gradient(135deg,var(--cp-t4) 0 4px,transparent 4px 8px)}
.cp-root .cp-skel {height:16px; border-radius:6px; background:linear-gradient(90deg,var(--cp-t2),var(--cp-t4),var(--cp-t2)); background-size:200% 100%; animation:cpSk 1.2s linear infinite}
@keyframes cpSk { from{background-position:0 0} to{background-position:-200% 0} }

/* ═══════ Hub (ch-) et flux plein écran (cf-) ═══════ */
.cp-root .ch-head {display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.cp-root .ch-head h2 {margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.1}
.cp-root .ch-head .sub {font-size:13px; color:var(--fg-muted); margin-top:4px; max-width:60ch; line-height:1.45}
.cp-root .ch-head .sp {flex:1 1 auto}
.cp-root .ch-live {position:relative; overflow:hidden; border-radius:20px; padding:20px 22px; background:linear-gradient(140deg,rgba(91,141,239,.12),rgba(185,104,199,.09) 50%,rgba(233,78,139,.11)); border:1px solid rgba(185,104,199,.3)}
.cp-root .ch-live .top {display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap}
.cp-root .ch-live h3 {margin:0; font-size:18px; font-weight:780; letter-spacing:-.015em}
.cp-root .ch-live .meta {font-size:12.5px; color:var(--fg-secondary); margin-top:3px}
.cp-root .ch-live .sp {flex:1 1 auto}
.cp-root .ch-figs {display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:18px}
.cp-root .ch-fig {padding:12px 14px; border-radius:13px; background:var(--bg-elev-1); border:1px solid var(--border-soft)}
.cp-root .ch-fig .k {font-size:10.5px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-muted)}
.cp-root .ch-fig .v {font-size:21px; font-weight:820; letter-spacing:-.025em; margin-top:4px; font-variant-numeric:tabular-nums}
.cp-root .ch-fig .v small {font-size:12px; font-weight:650; color:var(--fg-muted); letter-spacing:0}
.cp-root .ch-fig .s {font-size:11px; color:var(--fg-muted); margin-top:3px; line-height:1.35}
.cp-root .ch-fig.amber .v {color:var(--cp-tx-amber)}
.cp-root .ch-next {display:flex; align-items:center; gap:10px; margin-top:16px; padding:11px 14px; border-radius:13px; background:var(--bg-elev-1); border:1px solid var(--border-soft); font-size:12.5px; line-height:1.45}
.cp-root .ch-next svg {width:15px; height:15px; flex:0 0 auto; stroke:var(--cp-tx-green); fill:none; stroke-width:2}
.cp-root .ch-next b {text-transform:capitalize}
.cp-root .ch-next .sp {flex:1 1 auto}
.cp-root .ch-list {display:flex; flex-direction:column; gap:10px; container-type:inline-size; container-name:chlist}
.cp-root .ch-row {display:grid; grid-template-columns:auto minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 17px; border-radius:15px; background:var(--bg-elev-1); border:1px solid var(--border-soft); cursor:pointer; text-align:left; font:inherit; color:inherit; transition:border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
.cp-root .ch-row:hover {border-color:rgba(185,104,199,.36); transform:translateY(-2px); box-shadow:var(--cp-shadow)}
.cp-root .ch-row > * {min-width:0}
.cp-root .ch-row .nm {font-size:14.5px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-root .ch-row .dt {font-size:11.5px; color:var(--fg-muted); margin-top:2px}
.cp-root .ch-row .cell .k {font-size:10.5px; color:var(--fg-muted); font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-root .ch-row .cell .v {font-size:14px; font-weight:750; font-variant-numeric:tabular-nums; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-root .ch-row .cell .v small {font-size:11px; font-weight:600; color:var(--fg-muted)}
.cp-root .ch-row .st {display:flex; align-items:center; gap:10px; flex:0 0 auto}
.cp-root .ch-row .go {width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--cp-t4); flex:0 0 auto}
.cp-root .ch-row .go svg {width:14px; height:14px; stroke:var(--fg-secondary); fill:none; stroke-width:2}
@container chlist (max-width:820px) {
  .cp-root .ch-row .cell:nth-of-type(3) {display:none}
}
@container chlist (max-width:660px) {
  .cp-root .ch-row .cell:nth-of-type(2) {display:none}
}
@container chlist (max-width:520px) {
  .cp-root .ch-row .cell {display:none}
  .cp-root .ch-row {grid-template-columns:minmax(0,1fr) auto}
  .cp-root .ch-row .st .cp-pill {display:none}
}
@supports not (container-type:inline-size) {
  .cp-root .ch-list {overflow-x:auto; scrollbar-width:thin}
  .cp-root .ch-row {min-width:720px}
}
.cp-root .ch-cat {display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:17px; background:var(--bg-elev-1); border:1px solid var(--border-soft); flex-wrap:wrap}
.cp-root .ch-cat .thumbs {display:flex; flex:0 0 auto}
.cp-root .ch-cat .thumbs img, .cp-root .ch-cat .thumbs .more {width:38px; height:38px; border-radius:11px; object-fit:cover; border:2px solid var(--bg-elev-1); margin-left:-10px}
.cp-root .ch-cat .thumbs img:first-child, .cp-root .ch-cat .thumbs .more:first-child {margin-left:0}
.cp-root .ch-cat .thumbs .more {display:grid; place-items:center; background:var(--cp-t4); font-size:11.5px; font-weight:750; color:var(--fg-secondary)}
.cp-root .ch-cat .tx {flex:1 1 200px; min-width:0}
.cp-root .ch-cat .t {font-size:14px; font-weight:700}
.cp-root .ch-cat .s {font-size:12px; color:var(--fg-muted); margin-top:2px; line-height:1.4}
.cp-root .ch-alerts {display:flex; flex-direction:column; gap:9px}
.cp-root .cf {position:fixed; inset:0; z-index:150; background:var(--bg); display:none; flex-direction:column}
.cp-root .cf.show {display:flex; animation:cfIn .24s var(--ease-out)}
@keyframes cfIn { from{opacity:0; transform:scale(.985)} to{opacity:1; transform:none} }
.cp-root .cf-bg {position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.cp-root .cf-bg .blob {position:absolute; border-radius:50%; opacity:.30}
.cp-root .cf-bg .b1 {width:520px; height:520px; background:radial-gradient(closest-side, var(--k-violet), transparent 72%); top:-200px; left:12%}
.cp-root .cf-bg .b2 {width:420px; height:420px; background:radial-gradient(closest-side, var(--k-pink), transparent 72%); bottom:-220px; right:6%}
.cp-root .cf-head {position:relative; z-index:3; display:flex; align-items:center; gap:18px; padding:16px 26px; border-bottom:1px solid var(--border-soft); background:var(--cp-topbar); backdrop-filter:blur(14px)}
.cp-root .cf-head .x {width:34px; height:34px; flex:0 0 auto; border-radius:11px; border:1px solid var(--border-soft); background:var(--cp-t2); color:var(--fg-muted); cursor:pointer; display:grid; place-items:center}
.cp-root .cf-head .x:hover {color:var(--fg); background:var(--cp-t4)}
.cp-root .cf-head .x svg {width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.4}
.cp-root .cf-head .nav {display:flex; align-items:center; gap:8px; flex:0 0 auto}
.cp-root .cf-head .ttl {min-width:0}
.cp-root .cf-head .ttl .t {font-size:15px; font-weight:750; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-root .cf-head .ttl .s {font-size:11.5px; color:var(--fg-muted); margin-top:1px}
.cp-root .cf-steps {display:flex; align-items:center; gap:2px; margin-left:auto; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
.cp-root .cf-steps::-webkit-scrollbar {display:none}
.cp-root .cf-step {display:flex; align-items:center; gap:8px; flex:0 0 auto; padding:6px 4px}
.cp-root .cf-step .n {width:23px; height:23px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:800; background:var(--cp-t4); color:var(--fg-muted); border:1px solid transparent}
.cp-root .cf-step .n svg {width:12px; height:12px; stroke:#fff; fill:none; stroke-width:3}
.cp-root .cf-step .l {font-size:12.5px; font-weight:650; color:var(--fg-muted); white-space:nowrap}
.cp-root .cf-step.done .n {background:rgba(16,185,129,.9); color:#fff}
.cp-root .cf-step.done .l {color:var(--fg-secondary)}
.cp-root .cf-step.on .n {background:var(--k-gradient-h); color:#fff; box-shadow:0 0 0 4px rgba(233,78,139,.16)}
.cp-root .cf-step.on .l {color:var(--fg); font-weight:750}
.cp-root .cf-bar {width:26px; height:2px; border-radius:2px; background:var(--cp-t5); flex:0 0 auto}
.cp-root .cf-bar.done {background:rgba(16,185,129,.75)}
@media (max-width:1080px) {
  .cp-root .cf-step .l {display:none}
  .cp-root .cf-bar {width:16px}
}
.cp-root .cf-body {position:relative; z-index:2; flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin}
.cp-root .cf-body::-webkit-scrollbar {width:9px}
.cp-root .cf-body::-webkit-scrollbar-thumb {background:var(--cp-t5); border-radius:9px}
.cp-root .cf-wrap {max-width:1180px; margin:0 auto; padding:26px 26px 40px}
.cp-root .cf-wrap.wide {max-width:1420px}
.cp-root .cf-lead {max-width:62ch; margin:0 auto 24px; text-align:center}
.cp-root .cf-lead h2 {margin:0 0 7px; font-size:25px; font-weight:820; letter-spacing:-.022em; line-height:1.15}
.cp-root .cf-lead h2 .g {background:var(--k-gradient-h); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.cp-root .cf-lead p {margin:0; font-size:13.5px; color:var(--fg-secondary); line-height:1.5}
.cp-root .cf-foot {position:relative; z-index:3; display:flex; align-items:center; gap:12px; padding:14px 26px; border-top:1px solid var(--border-soft); background:var(--cp-topbar); backdrop-filter:blur(14px)}
.cp-root .cf-foot .info {font-size:12.5px; color:var(--fg-muted); line-height:1.4; max-width:70ch}
.cp-root .cf-foot .info b {color:var(--fg)}
.cp-root .cf-foot .sp {flex:1 1 auto}
.cp-root .cf-scope {display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; max-width:840px; margin:0 auto}
.cp-root .cf-sc {position:relative; display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:17px; background:var(--bg-elev-1); border:1px solid var(--border-soft); cursor:pointer; text-align:left; font:inherit; color:inherit; transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.cp-root .cf-sc:hover {transform:translateY(-3px); border-color:rgba(185,104,199,.4); box-shadow:var(--cp-shadow)}
.cp-root .cf-sc.on {background:linear-gradient(var(--bg-elev-1),var(--bg-elev-1)) padding-box,var(--k-gradient) border-box; border-color:transparent}
.cp-root .cf-sc.on:after {content:''; position:absolute; top:13px; right:13px; width:18px; height:18px; border-radius:50%; background:var(--k-gradient-h)}
.cp-root .cf-sc .ic {width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--cp-t4)}
.cp-root .cf-sc .ic svg {width:18px; height:18px; stroke:url(#k-grad-stroke); fill:none; stroke-width:1.9}
.cp-root .cf-sc h3 {margin:0; font-size:16px; font-weight:750; letter-spacing:-.01em}
.cp-root .cf-sc p {margin:0; font-size:12.5px; color:var(--fg-secondary); line-height:1.45}
.cp-root .cf-sc .cnt {font-size:11.5px; font-weight:700; color:var(--cp-tx-violet)}
.cp-root .cf-picker {max-width:840px; margin:16px auto 0}

/* ═══════ Compléments : fil d'ariane et spinner ═══════
   .cp-crumb vient du <style> inline de « Campagnes v2.html » ; .cp-spinner est
   repris à l'identique de catalogue.css pour que les deux pages du parcours
   aient exactement le même indicateur de chargement. */
.cp-root .cp-crumb{ display:flex; align-items:center; gap:4px; padding:0 28px; border-bottom:1px solid var(--border-soft); background:var(--cp-topbar); backdrop-filter:blur(14px); position:relative; z-index:4; flex:0 0 auto }
.cp-root .cp-crumb button,.cp-crumb a{ position:relative; display:flex; align-items:center; gap:8px; padding:11px 13px 12px; background:none; border:0; font:inherit; font-size:13.5px; font-weight:650; color:var(--fg-muted); cursor:pointer; border-radius:10px 10px 0 0; flex:0 0 auto }
.cp-root .cp-crumb button:hover,.cp-crumb a:hover{ color:var(--fg-secondary) }
.cp-root .cp-crumb .on{ color:var(--fg) }
.cp-root .cp-crumb .on:after{ content:''; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:2px; background:var(--k-gradient-h) }
.cp-root .cp-crumb svg{ width:15px; height:15px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
@keyframes cpSpin { to { transform: rotate(360deg) } }