:root{
  --brand:#127a8e; --brand-deep:#0e5f6f; --brand-soft:#e8f2f4; --brand-line:#cfe4e8;
  --danger:#c1553f; --danger-soft:#f8e8e3;
  --ink:#1b2328; --soft:#5f6c73; --mute:#9aa4aa;
  --paper:#f5f8f8; --card:#ffffff; --line:#e9eeef;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{
  --brand:#35a8bd; --brand-deep:#7fd0de; --brand-soft:#123039; --brand-line:#1d4a56;
  --danger:#e07a68; --danger-soft:#38211c;
  --ink:#e8eef0; --soft:#9fb0b5; --mute:#6a7d83;
  --paper:#0f171a; --card:#151f23; --line:#233238; --line-strong:#2e4148;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans)}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 26px 64px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.topbar{position:sticky;top:0;z-index:40;width:100vw;margin-left:calc(50% - 50vw);background:var(--card);border-bottom:1px solid var(--line);margin-bottom:34px}
.topbar-in{max-width:1200px;margin:0 auto;padding:0 26px;display:flex;align-items:center;gap:38px;min-height:60px;flex-wrap:wrap}
.wm{font-weight:800;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.wm .it{color:var(--brand)}.wm .so{color:var(--ink)}.wm .sl{color:var(--mute);font-weight:500;margin-left:10px;font-size:14px}
.live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--soft);background:var(--card);border:1px solid var(--line);padding:7px 13px;border-radius:20px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.hello{font-size:29px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.hello .accent{color:var(--brand)}
.hello-sub{color:var(--soft);font-size:15px;margin:0 0 30px;max-width:54ch}
.back{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;color:var(--soft);text-decoration:none;margin-bottom:18px}
.back:hover{color:var(--brand)}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;grid-auto-rows:minmax(10px,auto)}
.tile{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 28px;position:relative;animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tile,.card{animation:none}}
.t-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute)}
.hero{grid-column:span 4;grid-row:span 2;display:flex;flex-direction:column}
.hero-row{display:flex;gap:22px;align-items:center;padding:18px 0;cursor:pointer}
.hero-row + .hero-row{border-top:1px solid var(--line)}
.hero-row:first-of-type{margin-top:6px}
.hero-row:hover h3{color:var(--brand)}
.hero-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 6px}
.hero-liv{font-size:13px;color:var(--ink);font-weight:600}
.ring{flex:0 0 auto}
.hero-info h3{margin:0 0 3px;font-size:17px;font-weight:600}
.hero-info .meta{color:var(--mute);font-size:13px;margin:0 0 8px}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;padding:5px 12px;border-radius:20px;background:var(--brand-soft);color:var(--brand-deep);white-space:nowrap}
.chip.late{background:var(--danger-soft);color:var(--danger)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.step-line{margin-top:20px;font-size:13.5px;color:var(--soft);line-height:1.6}
.step-line b{color:var(--ink);font-weight:600}
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-weight:600;font-size:13.5px;padding:11px 18px;border-radius:12px;border:0;cursor:pointer;text-decoration:none}
.hero .cta{margin-top:auto;align-self:flex-start}
.gauge{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;align-items:center;text-align:center}
.gauge .delta{font-family:var(--mono);font-size:11px;color:var(--brand);margin-top:10px}
.gauge .src{font-family:var(--mono);font-size:10px;color:var(--mute);margin-top:auto;padding-top:16px}
.chart{grid-column:span 3}
.chart .big{font-size:25px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:10px 0 0}
.chart .big span{font-size:12.5px;font-weight:500;color:var(--soft);letter-spacing:0}
.kpi{grid-column:span 3;display:flex;flex-direction:column;gap:16px}
.kpi-row{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:15px;border-bottom:1px solid var(--line)}
.kpi-row:last-child{border-bottom:0;padding-bottom:0}
.kpi-row .v{font-size:27px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--brand)}
.kpi-row .d{text-align:right}
.kpi-row .d .l{display:block;font-size:13.5px;color:var(--ink);font-weight:500}
.kpi-row .d .s{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.past{grid-column:span 4}
.past-strip{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.pc{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:12.5px;color:var(--soft);text-decoration:none}
.pc:hover{border-color:var(--brand-line)}
.pc i{width:15px;height:15px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800}
.targets{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.tg{font-family:var(--mono);font-size:10.5px;color:var(--soft);background:var(--paper);border:1px solid var(--line);padding:4px 10px;border-radius:7px}
.act{grid-column:span 2}
.act ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.act li{position:relative;padding-left:17px;font-size:12.5px;color:var(--soft);line-height:1.5}
.act li::before{content:"";position:absolute;left:0;top:5px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.act li b{color:var(--ink);font-weight:600}
.act li .t{display:block;font-family:var(--mono);font-size:10px;color:var(--mute);margin-top:2px}

.sec{font-size:13px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:0 0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:16px;animation:rise .5s ease both}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card-top h3{margin:0 0 3px;font-size:17px;font-weight:600}
.card-link{text-decoration:none;color:inherit}
.card-link:hover h3{color:var(--brand)}
.camp-card{cursor:pointer}
.camp-card-visu{position:relative;height:120px;margin:-22px -24px 16px;border-radius:16px 16px 0 0;overflow:hidden}
.camp-card-visu img{width:100%;height:100%;object-fit:cover;display:block}
.camp-card-visu .chip-off{position:absolute;left:16px;bottom:12px}
.camp-card:hover{border-color:var(--brand-line)}
.camp-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.chip.sm{padding:3px 9px;font-size:10.5px}
.metasub{color:var(--mute);font-size:13px;margin-top:2px}
.camp-livrable{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)}
.card-top .meta{color:var(--soft);font-size:13px}
.track-wrap{position:relative}
/* scrollbar dédiée sous la frise — séparée des étapes pour ne pas en déclencher
   une par erreur en visant le scroll, et bien visible d'un coup d'œil. */
.track-scrollbar{position:relative;height:6px;margin:8px 2px 0;border-radius:4px;background:var(--line)}
.track-scrollbar.hidden{display:none}
.track-scrollbar-thumb{position:absolute;top:0;left:0;height:100%;min-width:32px;border-radius:4px;background:var(--mute);cursor:grab;touch-action:none;transition:background .15s}
.track-scrollbar-thumb:hover,.track-scrollbar-thumb:active{background:var(--brand);cursor:grabbing}
.track{display:flex;margin:22px 0 6px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}
.track::-webkit-scrollbar{display:none}
.tstep{flex:0 0 auto;min-width:120px;text-align:center;position:relative}
.tstep:not(:last-child)::after{content:"";position:absolute;top:8px;left:50%;width:100%;height:2px;background:var(--line)}
.tstep.done:not(:last-child)::after{background:var(--brand)}
.tdot{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;margin:0 auto;background:var(--card);border:2px solid var(--line)}
.tstep.done .tdot{background:var(--brand);border-color:var(--brand)}
.tstep.now .tdot{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.tstep .tl{font-size:11.5px;font-weight:600;color:var(--soft);margin-top:8px;line-height:1.3}
.tstep.now .tl,.tstep.done .tl{color:var(--ink)}
.tstep .td{font-family:var(--mono);font-size:9.5px;color:var(--mute);margin-top:2px}
.tstep .td.prev{font-style:italic;opacity:.85}
.late-badge{display:inline-block;font-family:var(--mono);font-size:8.5px;color:var(--danger);background:var(--danger-soft);border-radius:6px;padding:0 4px;white-space:nowrap;vertical-align:1px}
.tstep .resp{font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin-top:3px;opacity:.8}
.tstep .resp.cli{color:var(--brand);opacity:1}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.card-foot .m{font-size:13px;color:var(--soft)}
.card-foot .m b{color:var(--ink)}
.done-list{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 22px}
.drow{display:flex;align-items:center;gap:13px;padding:15px 0;border-top:1px solid var(--line)}
.drow:first-child{border-top:0}
.drow .ck{width:20px;height:20px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:0 0 auto}
.drow .nm{flex:1;color:var(--ink);font-size:14.5px}
.drow .nm small{display:block;color:var(--mute);font-family:var(--mono);font-size:11px;margin-top:2px}
.drow .lv{font-family:var(--mono);font-size:12px;color:var(--brand);text-decoration:none;white-space:nowrap}

.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.ctc-row{display:flex;align-items:flex-start;gap:14px;padding:14px 4px;border-top:1px solid var(--line)}
.ctc-row:first-child{border-top:0}
.leadrow,.actrow{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
.leadrow:first-child,.actrow:first-child{border-top:0}
.leadrow .nm,.actrow .nm{flex:1;color:var(--ink);font-size:14px}
.leadrow .nm small,.actrow .nm small{color:var(--mute);font-family:var(--mono);font-size:11px}
.badge{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:20px;background:var(--brand-soft);color:var(--brand-deep);white-space:nowrap}
.badge.mute{background:var(--paper);color:var(--mute);border:1px solid var(--line)}
.contact-card .av{width:40px;height:40px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.loading{color:var(--mute);font-family:var(--mono);font-size:13px;padding:60px 0;text-align:center}
@media(max-width:760px){.bento{grid-template-columns:repeat(2,1fr)}.hero,.gauge,.chart,.kpi,.past,.act{grid-column:span 2;grid-row:auto}.detail-grid{grid-template-columns:1fr}}
@media(max-width:440px){.bento{grid-template-columns:1fr}.hero,.gauge,.chart,.kpi,.past,.act{grid-column:span 1}.hero-main{flex-direction:column;align-items:flex-start}.track .tl{font-size:9px}}

/* --- bandeau d'impersonation --- */
.imp-bar{background:var(--brand-soft);border-top:1px solid var(--brand-line);color:var(--brand-deep);font-size:12.5px;padding:7px 26px;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.imp-bar b{font-weight:650}
.imp-bar .btn-back-admin{background:none;border:1px solid var(--brand-line);border-radius:8px;color:var(--brand-deep);font-size:12px;padding:4px 11px;cursor:pointer;font-family:var(--sans)}
.imp-bar .btn-back-admin:hover{background:var(--card)}

/* --- actions du bandeau (recherche + cloche) --- */
.top-actions{margin-left:auto;display:flex;align-items:center;gap:2px}
.search-wrap{position:relative}
.search-btn{background:none;border:0;cursor:pointer;color:var(--soft);padding:8px;display:flex;align-items:center}
.search-btn:hover{color:var(--brand)}
.search-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(27,35,40,.10);width:320px;z-index:45;padding:10px}
.search-menu.hidden{display:none}
.search-input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-family:var(--sans);font-size:13.5px;color:var(--ink);background:var(--paper)}
.search-input:focus{outline:none;border-color:var(--brand-line)}
.search-results{margin-top:6px}
.search-cat{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:8px 12px 2px}

/* --- profil (design TeamTime) --- */
.topnav-user-wrap{position:relative}
.topnav-user{display:flex;align-items:center;gap:7px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:background .15s;color:var(--ink)}
.topnav-user:hover{background:var(--paper)}
.topnav-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--brand);color:#fff}
.user-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:210px;background:var(--card);border:1px solid var(--line-strong);border-radius:12px;z-index:46;padding:6px;box-shadow:0 6px 24px rgba(27,35,40,.16)}
.user-menu.hidden{display:none}
.user-menu-item{display:flex;align-items:center;width:100%;padding:8px 10px;background:none;border:none;color:var(--ink);cursor:pointer;font-size:12px;text-align:left;border-radius:6px;transition:background .12s;font-family:var(--sans)}
.user-menu-item:hover{background:var(--paper)}
.user-menu-item-danger{color:var(--danger)}
.user-menu-item-danger:hover{background:var(--danger-soft)}
.user-menu-sep{height:1px;background:var(--line);margin:4px 6px}
.user-menu-theme{display:flex;align-items:center;width:100%;padding:8px 10px;color:var(--ink);font-size:12px;border-radius:6px;gap:8px}
.user-menu-theme:hover{background:var(--paper)}
.user-menu-theme .theme-label{flex:1;display:flex;align-items:center;gap:8px}
.theme-switch{position:relative;display:inline-block;width:44px;height:22px;cursor:pointer;flex-shrink:0}
.theme-switch input{opacity:0;width:0;height:0;position:absolute}
.theme-switch-slider{position:absolute;inset:0;background:var(--paper);border-radius:22px;transition:background .18s;border:1px solid var(--line-strong)}
.theme-switch-slider::before{content:"🌙";position:absolute;left:2px;top:50%;transform:translateY(-50%);font-size:11px;width:18px;height:18px;background:var(--brand);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .18s,background .18s;line-height:1}
.theme-switch input:checked + .theme-switch-slider{background:rgba(251,191,36,0.26)}
.theme-switch input:checked + .theme-switch-slider::before{transform:translate(22px,-50%);content:"☀️";background:#fbbf24}
.user-menu-submenu{position:relative}
.user-menu-submenu-trigger{display:flex;align-items:center;width:100%;padding:8px 10px;color:var(--ink);font-size:12px;border-radius:6px;cursor:default;transition:background .12s}
.user-menu-submenu:hover > .user-menu-submenu-trigger{background:var(--paper)}
/* panneau collé au déclencheur (right:100%) : aucun vide à traverser, le survol
   ne retombe plus en chemin ; l'écart visuel est rendu par un padding transparent */
.user-menu-submenu-panel{position:absolute;right:100%;top:-6px;padding-right:4px;background:none;border:0;box-shadow:none;display:none;z-index:47}
/* défilement interne : cette liste (clients à impersonner, puis Opérateurs/
   Gestionnaires — même classe partagée) peut dépasser la hauteur de l'écran
   une fois la base de comptes assez grande — sans max-height/overflow, les
   dernières entrées (ex. "workiva", en fin de liste alphabétique) tombaient
   hors du viewport, invisibles ET inatteignables. Bug remonté par Sam
   2026-09-14 : "je ne peux pas cliquer sur Workiva". */
.user-menu-submenu-panel > .user-menu-submenu-inner{min-width:210px;background:var(--card);border:1px solid var(--line-strong);border-radius:12px;padding:6px;box-shadow:0 6px 24px rgba(27,35,40,.16);max-height:min(70vh,480px);overflow-y:auto}
.user-menu-submenu:hover > .user-menu-submenu-panel,
.user-menu-submenu.open > .user-menu-submenu-panel{display:block}
.user-menu-impersonate-item{display:flex;align-items:center;gap:8px;padding:7px 9px;background:none;border:none;color:var(--ink);cursor:pointer;font-size:12px;text-align:left;border-radius:5px;transition:background .12s;width:100%;font-family:var(--sans)}
.user-menu-impersonate-item:hover{background:var(--paper)}
.imp-av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;background:var(--brand-soft);color:var(--brand-deep)}
.imp-name{flex:1}
.imp-arrow{font-size:11px;color:var(--mute)}
.user-menu-impersonate-item.on{background:var(--brand-soft)}
.user-menu-impersonate-item.on .imp-arrow{color:var(--brand)}

/* --- création de campagne --- */
.ne-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ne-grid.hidden,.ne-objectif-wrap.hidden{visibility:hidden}
.ne-compte,.ne-type,.ne-titre,.ne-objectif,.ne-lien{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--paper);margin-top:6px}
.ne-compte:focus,.ne-type:focus,.ne-titre:focus,.ne-objectif:focus,.ne-lien:focus{outline:none;border-color:var(--brand-line)}
.ne-head{display:grid;grid-template-columns:26px 1fr 150px 130px 110px 64px;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:0 2px 6px}
.ne-step{display:grid;grid-template-columns:26px 1fr 150px 130px 110px 64px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.ne-step.dragging{opacity:.45}
.ne-grip{color:var(--mute);cursor:grab;font-size:15px;text-align:center;user-select:none}
.ne-grip:hover{color:var(--brand)}
.ne-actions{display:flex;gap:2px;justify-content:flex-end}
.ne-info{background:none;border:1px solid var(--line);border-radius:50%;width:20px;height:20px;color:var(--mute);font-size:11px;font-style:italic;font-family:Georgia,serif;cursor:pointer;line-height:1}
.ne-info:hover,.ne-info.on{color:var(--brand);border-color:var(--brand-line)}
.ne-desc{grid-column:2/-1}
.ne-desc.hidden{display:none}
.ne-step-desc{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12.5px;color:var(--soft);background:var(--paper);font-family:var(--sans)}
.ne-step-desc:focus{outline:none;border-color:var(--brand-line);color:var(--ink)}
.ne-desc-camp{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--sans);font-size:13.5px;color:var(--ink);background:var(--card);margin-top:6px;resize:vertical}
.ne-desc-camp:focus{outline:none;border-color:var(--brand-line)}
.ne-newtype{display:flex;gap:8px;margin-top:8px}
.ne-newtype.hidden{display:none}
.ne-newtype-nom{flex:1;border:1px solid var(--brand-line);border-radius:9px;padding:8px 11px;font-size:13px;color:var(--ink);background:var(--card);font-family:var(--sans)}
.ne-cpt-vide{font-size:12.5px;color:var(--mute);grid-column:1/-1}
.ne-cpt{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--ink);background:var(--paper);margin-top:6px;font-family:var(--sans)}
.ne-cpt:focus{outline:none;border-color:var(--brand-line)}

/* --- gestion des campagnes --- */
.gest-new-nom{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--paper)}
.gest-new-nom:focus{outline:none;border-color:var(--brand-line)}
.gest-edit{background:none;border:1px solid var(--line);border-radius:8px;color:var(--mute);cursor:pointer;padding:6px 8px;display:inline-flex;margin-left:auto}
.gest-edit:hover{color:var(--brand);border-color:var(--brand-line)}
.camp-msg-toggle{display:inline-flex;align-items:center;gap:7px;background:var(--brand);border:0;border-radius:30px;color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;padding:9px 16px;cursor:pointer;transition:background .15s,transform .15s}
.camp-msg-toggle:hover{background:var(--brand-deep,var(--brand));transform:scale(1.03)}
.camp-msg-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:rgba(255,255,255,.3);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:700}
.camp-msg-badge.neuf{background:var(--danger);color:#fff}
.gest-frise{margin-top:18px}
.gest-step{cursor:pointer}
.gest-step:hover .tl{color:var(--brand)}
.gest-step:hover .tdot{border-color:var(--brand)}
.gest-editor.hidden{display:none}
.gest-editor{border-top:1px solid var(--line);margin-top:16px}
.gest-custom{font-family:var(--mono);font-size:10px;background:var(--brand-soft);color:var(--brand-deep);border-radius:7px;padding:2px 8px}
.gest-resume{margin-left:auto;font-size:12px;color:var(--mute)}
.gt-cpt{display:grid;grid-template-columns:1fr 200px 30px;gap:10px;align-items:center;padding:6px 0}
.gt-cpt-label,.gt-cpt-obj,.gt-nom,.gt-resp{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink);background:var(--paper);font-family:var(--sans);width:100%}
.gt-cpt-label:focus,.gt-cpt-obj:focus,.gt-nom:focus,.gt-resp:focus{outline:none;border-color:var(--brand-line)}
.gt-step{display:grid;grid-template-columns:26px 1fr 140px 110px 24px 30px;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.gt-desc-row{grid-column:2/-1}
.gt-desc-row.hidden{display:none}
.gt-desc-row .gt-desc{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink);background:var(--paper);font-family:var(--sans)}
.gt-desc-row .gt-desc:focus{outline:none;border-color:var(--brand-line)}
.gt-step.dragging{opacity:.45}
.gt-ok{font-family:var(--mono);font-size:11.5px;color:var(--brand)}
.gt-ok.hidden{display:none}

/* --- description de campagne (ⓘ) --- */
.camp-info{background:none;border:1px solid var(--line);border-radius:50%;width:22px;height:22px;color:var(--mute);font-size:12px;font-style:italic;font-family:Georgia,serif;cursor:pointer;line-height:1;margin-left:10px;vertical-align:6px}
.camp-info:hover{color:var(--brand);border-color:var(--brand-line)}
.camp-desc{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--brand-line);border-radius:0 10px 10px 0;padding:12px 16px;margin-top:10px;color:var(--soft);font-size:13.5px;max-width:70ch}
.camp-desc.hidden{display:none}
.ne-client{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--paper);margin-top:6px}
.ne-client:focus{outline:none;border-color:var(--brand-line)}
.ne-sug{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--card);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 10px 28px rgba(27,35,40,.12);padding:6px;z-index:30}
.ne-sug.hidden{display:none}
.ne-new-note{font-family:var(--mono);font-size:10.5px;color:var(--brand);margin-top:6px}
.ne-new-note.hidden{display:none}
.ne-nom,.ne-date,.ne-resp{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--paper);width:100%}
.ne-nom:focus,.ne-date:focus,.ne-resp:focus{outline:none;border-color:var(--brand-line)}
.ne-val-lab{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--soft);white-space:nowrap}
.ne-del{background:none;border:0;color:var(--mute);font-size:16px;cursor:pointer;padding:4px}
.ne-del:hover{color:var(--danger)}
.mqlsql-play{position:relative;background:none;border:0;color:var(--brand);font-size:12px;cursor:pointer;padding:4px;line-height:1}
.mqlsql-play:hover{color:var(--brand-deep)}
.mqlsql-play:disabled{opacity:.5;cursor:default}
/* infobulle du picto ▶ : ouverte vers la gauche (le bouton est près du bord
   droit du tableau, une bulle qui pousse à droite serait tronquée) et plus
   grande que l'infobulle générique — priorité à la lisibilité immédiate. */
.mqlsql-play[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;right:0;bottom:calc(100% + 8px);
  background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:10px;
  font-size:13.5px;font-weight:400;line-height:1.55;width:max-content;max-width:340px;
  white-space:normal;text-align:left;z-index:50;box-shadow:0 8px 22px rgba(0,0,0,.22);
  pointer-events:none;
}

/* --- espace admin : comptes clients --- */
.comptes{display:flex;flex-direction:column;gap:12px}
.compte-card{display:flex;align-items:center;gap:15px;cursor:pointer;margin-bottom:0}
.compte-card:hover{border-color:var(--brand-line)}
.compte-card.off{opacity:.55;cursor:default}
.compte-card.off:hover{border-color:var(--line)}
.compte-av{width:38px;height:38px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.compte-nom{font-weight:600;font-size:15.5px}
.todo-tabs{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:3px}
.todo-tab{background:none;border:0;border-radius:7px;padding:5px 12px;font-family:var(--sans);font-size:12px;color:var(--soft);cursor:pointer;text-transform:none;letter-spacing:0}
.todo-tab.on{background:var(--brand-soft);color:var(--brand-deep);font-weight:600}
.todo-list.hidden{display:none}
.todo-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.todo-row:first-child{border-top:0}
.todo-row:hover b{color:var(--brand)}
.todo-date{font-family:var(--mono);font-size:11.5px;color:var(--mute);flex:0 0 110px;white-space:nowrap}
.todo-date.late{color:var(--danger);font-weight:700}
.todo-date.soon{color:#9a6a00;font-weight:600}
:root[data-theme="dark"] .todo-date.soon{color:#d7a53a}
.todo-main{flex:1;font-size:14px;color:var(--ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ech-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.ech-row:first-child{border-top:0}
.ech-row:hover b{color:var(--brand)}
.ech-date{font-family:var(--mono);font-size:12px;color:var(--ink);font-weight:600;flex:0 0 64px;white-space:nowrap}
.ech-main{flex:1;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ech-sub{color:var(--mute);font-size:12px}

/* --- bascule de langue FR/EN (espace client uniquement) — même style que
   le portail public (b2bm-portail/css/styles.css .lang-toggle) --- */
.lang-toggle{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);background:none;cursor:pointer;padding:8px 14px;border-radius:20px;border:1px solid var(--line);white-space:nowrap}
.lang-toggle:hover{border-color:var(--brand);color:var(--brand)}
.lang-toggle-login{position:absolute;top:18px;right:22px}

/* --- écran de connexion --- */
.login-wrap{position:relative;min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;padding:40px 0}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px 36px;width:min(400px,92vw)}
.login-titre{margin:20px 0 4px;font-size:19px;font-weight:600}
.login-sub{color:var(--soft);font-size:13.5px;margin:0 0 22px}
.login-lab{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:14px 0 6px}
.login-input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--paper)}
.login-input:focus{outline:none;border-color:var(--brand-line)}
.login-note{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:14px;text-align:center}
.login-error{margin-top:14px;background:var(--danger-soft);color:var(--danger);border-radius:9px;padding:9px 13px;font-size:13px}
.login-error.hidden{display:none}

/* --- cloche de notifications --- */
.bell-wrap{position:relative}
.bell{position:relative;background:none;border:0;cursor:pointer;color:var(--soft);padding:8px;display:flex;align-items:center}
.bell:hover{color:var(--brand)}
.bell-badge{position:absolute;top:1px;right:0;background:var(--danger);color:#fff;font-size:9.5px;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);padding:0 3px}
.notif-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(27,35,40,.10);width:300px;z-index:45;padding:6px}
.notif-menu.hidden{display:none}
.notif-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;cursor:pointer}
.notif-item:hover{background:var(--paper)}
.notif-t{font-weight:600;color:var(--ink);font-size:13px}
.notif-s{color:var(--mute);font-size:11.5px;font-family:var(--mono)}
.notif-empty{padding:14px;color:var(--mute);font-size:12.5px;text-align:center}

/* --- panier (espace client) : même fonctionnement que le portail b2bmarketing.fr --- */
.cart-wrap{position:relative}
.cart-toggle{position:relative;background:none;border:0;cursor:pointer;color:var(--soft);padding:8px;display:flex;align-items:center}
.cart-toggle:hover{color:var(--brand)}
.cart-badge{position:absolute;top:1px;right:0;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:9.5px;font-weight:700;min-width:15px;height:15px;padding:0 3px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.cart-badge.hidden{display:none}
.cart-panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(27,35,40,.10);width:300px;z-index:45;padding:16px}
.cart-panel.hidden{display:none}
.cart-panel h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);color:var(--mute);margin:0 0 12px}
.cart-item{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:8px 0;border-bottom:1px solid var(--line)}
.cart-item b{font-weight:500;color:var(--ink)}
.cart-item span{color:var(--mute);font-family:var(--mono);font-size:11.5px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.cart-item-del{background:none;border:0;color:var(--mute);cursor:pointer;font-size:14px;line-height:1;padding:0}
.cart-item-del:hover{color:var(--danger)}
.cart-total{display:flex;justify-content:space-between;padding-top:11px;font-size:13px;font-weight:600;color:var(--ink)}
.cart-cta{width:100%;margin-top:13px;background:var(--brand);color:#fff;border:0;border-radius:10px;padding:10px;font-weight:600;font-size:13px;cursor:pointer;font-family:var(--sans)}
.cart-cta:hover{background:var(--brand-deep,var(--brand))}
.cart-note{font-size:11px;color:var(--mute);margin-top:8px;line-height:1.5}
.sugg-ajouter.in{background:var(--brand-soft);color:var(--brand-deep);border-color:var(--brand-soft)}

/* --- navigation (dans le bandeau) --- */
.topbar .nav{display:flex;gap:4px;flex-wrap:wrap;align-self:stretch;align-items:stretch}
.topbar .nav a{display:inline-flex;align-items:center;font-size:13.5px;color:var(--soft);text-decoration:none;padding:0 13px;border-bottom:2px solid transparent;margin-bottom:-1px}
.topbar .nav a:hover{color:var(--ink)}
.topbar .nav a.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
/* survol du lien de nav « Campagnes » (admin) : raccourci direct vers les
   campagnes en cours — voir header(), components/layout.js */
.nav-camp-wrap{position:relative;display:flex;align-items:stretch}
/* top:100% pile (pas de marge) : un espace mort entre le lien et l'encart
   faisait perdre le survol en descendant la souris. Demande Sam 2026-08-28. */
.nav-camp-flyout{display:none;position:absolute;top:100%;left:0;right:auto;min-width:280px;max-width:380px;max-height:320px;overflow:auto;z-index:50;background:var(--card);border:1px solid var(--line-strong);border-radius:12px;padding:4px;box-shadow:0 10px 28px rgba(27,35,40,.18)}
.nav-camp-wrap:hover .nav-camp-flyout{display:block}
.nav-camp-flyout a{display:flex;align-items:baseline;gap:7px;padding:9px 10px;font-size:12.5px;color:var(--ink);text-decoration:none;border-radius:7px}
.nav-camp-flyout a+a{border-top:1px solid var(--line)}
.nav-camp-flyout a:hover{background:var(--paper)}
.nav-camp-flyout a b{font-weight:600;flex:0 0 auto;white-space:nowrap}
.nav-camp-sep{color:var(--mute);flex:0 0 auto}
.nav-camp-titre{color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* --- chips & barres --- */
.chipwrap{display:flex;flex-wrap:wrap;gap:7px}
.chip.off{background:var(--paper);color:var(--mute);border:1px solid var(--line)}
.verbatim{border-left:3px solid var(--brand-line);padding:6px 0 6px 14px;margin:10px 0;color:var(--soft);font-style:italic}
.vsrc{font-family:var(--mono);font-size:10.5px;color:var(--mute);font-style:normal;margin-top:4px}
.barrow{margin:12px 0}
.barrow-h{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink)}
.barrow-h .tnd{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.barrow-h .score{font-family:var(--mono);font-size:11.5px;color:var(--brand);font-weight:600;font-variant-numeric:tabular-nums}
.scorelist .xtra.hidden{display:none}
.score-actions{display:flex;justify-content:center;gap:16px;margin-top:6px}
.more-btn,.less-btn{background:none;border:0;padding:2px 10px;cursor:pointer;font-size:14px;color:var(--mute);font-weight:400;line-height:1}
.more-btn:hover,.less-btn:hover{color:var(--brand)}
.more-btn.hidden,.less-btn.hidden{display:none}
.bar{height:8px;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:5px}
.bar span{display:block;height:100%;background:var(--brand);border-radius:20px}

/* --- leads cliquables --- */
.leadrow{text-decoration:none}
.leadrow .chev{color:var(--mute);font-family:var(--mono)}
.leadrow:hover .nm{color:var(--brand)}

/* --- messagerie --- */
.msgs{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.msg{display:flex}
.msg.mine{justify-content:flex-end}
.bulle{max-width:82%;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:13.5px;color:var(--ink)}
.msg.mine .bulle{background:var(--brand);border-color:var(--brand);color:#fff}
:root[data-theme="dark"] .msg.mine .bulle{background:#1d5d6d;border-color:#1d5d6d}
.msg-h{display:flex;gap:8px;margin-bottom:4px}
.canal{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-deep)}
.quand{font-family:var(--mono);font-size:10px;color:var(--mute)}
.msg.mine .canal{color:rgba(255,255,255,.85)}
.msg.mine .quand{color:rgba(255,255,255,.6)}
.msg-input{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--mute);font-size:13px}
.msg-input .send{color:var(--brand);font-weight:600}
.msg-input .msg-txt{flex:1;border:0;background:none;font-family:var(--sans);font-size:13px;color:var(--ink);outline:none}
.msg-input button.send{background:none;border:0;cursor:pointer;font-size:13px;font-family:var(--sans)}

/* --- bibliothèque --- */
.biblio{display:flex;flex-direction:column;gap:10px}
.biblio-item{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 18px}
.bib-scroll{overflow-x:auto}
.bib-card{min-width:660px;padding:0;margin-bottom:0;overflow:hidden}
.bib-grid{display:grid;grid-template-columns:110px 1fr 130px 150px;gap:14px;align-items:center;padding:13px 20px}
.bib-head{display:flex;flex-wrap:nowrap;border-bottom:1px solid var(--line);background:var(--paper)}
.bib-head .bib-sort{flex:0 0 110px}
.bib-head .bib-search{flex:1 1 auto;min-width:0}
.bib-head .bib-type{flex:0 0 130px}
.bib-head .bib-owner{flex:0 0 150px}
.bib-search,.bib-type,.bib-owner{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-family:var(--sans);font-size:12.5px;color:var(--ink);background:var(--card);width:100%}
.bib-search:focus,.bib-type:focus,.bib-owner:focus{outline:none;border-color:var(--brand-line)}
.bib-sort{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-family:var(--sans);font-size:12.5px;color:var(--ink);background:var(--card);cursor:pointer;text-align:left;width:100%}
.bib-sort:hover{border-color:var(--brand-line);color:var(--brand)}
.bib-row{cursor:pointer;border-top:1px solid var(--line)}
.bib-rows .bib-row:first-child{border-top:0}
.bib-row:hover{background:var(--paper)}
.bib-row:hover .bib-titre{color:var(--brand)}
.bib-titre{font-size:14.5px;font-weight:500;color:var(--ink)}
.bib-camp{font-size:12px;color:var(--mute);margin-top:2px}
.bib-cell{font-size:12.5px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bib-num{font-variant-numeric:tabular-nums}
/* .liv-date-vue/.liv-date-editer/.liv-date-form basculent via une classe
   .hidden posée par app.js — mais ce projet n'a PAS de règle générique
   .hidden{display:none} (chaque composant la redéclare pour son propre
   sélecteur, cf. les .xxx.hidden ailleurs dans ce fichier) : sans ces 3
   lignes, rien ne masquait jamais réellement l'ancienne date, qui restait
   affichée à côté du formulaire d'édition — les deux tassés dans la colonne
   Date (110px, overflow:hidden), d'où la 2e date tronquée. Retour Sam
   2026-08-30 : "ça fait deux dates dans la même colonne". */
.liv-date-vue.hidden,.liv-date-editer.hidden,.liv-date-form.hidden{display:none}
/* Le formulaire (date native + valider) déborde forcément la colonne Date
   (110px, pensée pour une courte date affichée type "29 août") : on le
   laisse déborder par-dessus la colonne suivante plutôt que le tronquer. */
.liv-date-wrap{display:flex;align-items:center;gap:5px;overflow:visible;position:relative}
.liv-date-editer,.liv-date-valider{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;color:var(--mute);background:none;border:1px solid transparent;flex:0 0 auto;padding:0}
.liv-date-editer:hover{color:var(--brand);border-color:var(--brand-line);background:var(--paper)}
.liv-date-valider{color:#fff;background:#2ecc71;border-color:#2ecc71}
.liv-date-valider:hover{background:#27b765}
.liv-date-form{display:flex;align-items:center;gap:5px;position:relative;z-index:1;background:var(--card);border-radius:6px}
.liv-date-input{border:1px solid var(--line);border-radius:6px;padding:3px 5px;font-size:12px;color:var(--ink);background:var(--paper);font-family:var(--sans);font-variant-numeric:tabular-nums;width:98px}
.liv-date-input:focus{outline:none;border-color:var(--brand-line)}
.bib-empty{padding:26px;text-align:center;color:var(--mute);font-size:13px}
.bib-empty.hidden{display:none}
.biblio-type{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-deep);background:var(--brand-soft);border-radius:7px;padding:4px 9px;white-space:nowrap;flex:0 0 auto}
.biblio-main{flex:1}
.biblio-titre{color:var(--ink);font-weight:500;font-size:15px}
.biblio-meta{color:var(--mute);font-family:var(--mono);font-size:11px;margin-top:2px}

/* --- Compact (sourcing décideurs) --- */
.cpt-list{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:14px}
.cpt-row{display:grid;grid-template-columns:24px 1.6fr .6fr .9fr 1.4fr 1fr 32px;gap:14px;align-items:center;padding:13px 20px;cursor:pointer;border-top:1px solid var(--line)}
.cpt-row-edit{background:none;border:1px solid var(--line);border-radius:8px;color:var(--mute);cursor:pointer;padding:6px;display:inline-flex;align-items:center;justify-content:center}
.cpt-row-edit:hover{color:var(--brand);border-color:var(--brand-line)}
.cpt-sel,.cpt-sel-tous{cursor:pointer;width:15px;height:15px;accent-color:var(--brand)}
/* boxes cliquables de la bande d'avancement campagne */
.si-cell.si-clic{cursor:pointer;transition:background .12s}
.si-cell.si-clic:hover{background:var(--brand)}
.si-cell.si-clic:hover .t-lab{color:#fff;opacity:.85}
.si-cell.si-clic:hover .si-v{color:#fff}
.cpt-row.ent{grid-template-columns:32px 1.6fr 80px 110px 1fr 1.6fr 32px}
.ent-fusionner.hidden{display:none}
.ent-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ent-meta-row{display:flex;flex-wrap:wrap;align-items:center;margin-top:6px}
.ent-meta-item{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--soft);padding:2px 16px;text-decoration:none}
.ent-meta-item:first-child{padding-left:0}
.ent-meta-item+.ent-meta-item{border-left:1px solid var(--line)}
.ent-meta-item svg{flex:0 0 auto;color:var(--mute)}
a.ent-meta-item{color:var(--brand)}
a.ent-meta-item svg{color:var(--brand)}
a.ent-meta-item:hover{text-decoration:underline}
.cpt-list .cpt-row:first-child{border-top:0}
.cpt-row:hover:not(.cpt-head){background:var(--paper)}
.cpt-row.cpt-head{cursor:default;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--soft);background:var(--card);border-bottom:2px solid var(--brand-line)}
.cpt-nom{font-size:14.5px;font-weight:600;color:var(--ink)}
.cpt-fonction{font-size:13px;font-weight:500;color:var(--soft);margin-top:1px}
.cpt-cell{font-size:12.5px;color:var(--soft)}
.cpt-pics{display:flex;align-items:center;gap:8px}
.cpt-pic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;color:var(--soft);background:var(--paper);border:1px solid var(--line)}
.cpt-pic svg{width:17px;height:17px}
.cpt-pic:hover{color:var(--brand);border-color:var(--brand-line)}
.cpt-conflit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.cpt-conflit-cand{border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer}
.cpt-conflit-cand:hover{border-color:var(--brand-line);background:var(--paper)}
.chip.cpt-tag-toggle{cursor:pointer;border:1px solid transparent}
.chip.cpt-tag-toggle.off{background:var(--paper);color:var(--mute);border-color:var(--line)}
/* éditeur de tags mots-clés d'une campagne MQL : chips + saisie, suggestions dessous */
.tags-editeur{position:relative;display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:6px 8px;background:var(--paper);margin-top:6px}
.tags-editeur .mo-tags-saisie{flex:1;min-width:150px;border:none;outline:none;background:transparent;color:inherit;font:inherit;font-size:13px;padding:3px 2px}
.tags-chip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);color:var(--brand)}
.tags-chip-x{cursor:pointer;opacity:.55;font-weight:700}
.tags-chip-x:hover{opacity:1}
.tags-editeur .tags-sug{position:absolute;top:100%;left:0;margin-top:4px;max-height:200px;overflow:auto;z-index:60}
.tags-sug-item{cursor:pointer}
/* Barre des étapes de la vue Contacts, façon workflow (frise de campagne) :
   pastilles reliées par un trait, compteur sous chaque pastille, libellé
   dessous. « Tous » reste figé à gauche pendant le défilement. */
.cpt-funnel-scroll{overflow-x:auto;margin-bottom:20px;padding-bottom:6px}
.cpt-funnel{display:flex;width:max-content;position:relative;padding:4px 0 2px}
.cpt-funnel::before{content:"";position:absolute;top:24px;left:46px;right:46px;height:2px;background:var(--line)}
.cpt-funnel-seg{flex:0 0 auto;min-width:92px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative;padding:0 8px}
.cpt-flow-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800;box-shadow:0 0 0 4px var(--paper);transition:transform .12s}
.cpt-funnel-seg:hover .cpt-flow-dot{transform:scale(1.08)}
.cpt-funnel-seg.on .cpt-flow-dot{box-shadow:0 0 0 4px var(--paper),0 0 0 7px var(--brand-line)}
.cpt-funnel-seg.on .cpt-funnel-l{color:var(--ink);font-weight:700}
.cpt-funnel-seg.cpt-funnel-tous{position:sticky;left:0;z-index:2;background:var(--paper)}
/* dans la fiche campagne, le funnel vit sur le fond blanc de la tuile MQL/SQL
   (pas la page grise comme sur l'onglet Contacts global) — la pastille
   "Tous" doit s'y fondre plutôt que trancher en carré gris. */
.mqlsql-head .cpt-funnel-seg.cpt-funnel-tous{background:var(--card)}
/* séparation issues d'appel / réactions MQL : un trait vertical entre Valide
   et MQL x — même distinction que dans le listing des contacts en dessous */
.cpt-funnel-seg[data-statut="mql_x"]::after{content:"";position:absolute;left:0;top:2px;bottom:4px;width:1px;background:var(--line-strong,var(--line))}
.cpt-funnel-n{display:block;font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.cpt-funnel-l{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);white-space:nowrap;font-family:var(--mono)}
.cpt-fiche-fonction{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.cpt-souscat{font-size:11px;color:var(--mute);margin-top:2px}
.cpt-ed-raisons-tel{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:5px}
.cpt-ed-perso-lab{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--soft);cursor:pointer}
.cpt-ed-perso-lab input{margin:0}
.cpt-pic-perso{color:var(--danger);cursor:default;opacity:.75}
.cpt-statut-incertain{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--danger);color:#fff;font-size:10px;font-weight:700;line-height:1;margin-left:5px;cursor:pointer;vertical-align:middle}
.cpt-statut-incertain:hover{filter:brightness(1.15);transform:scale(1.1)}
.cpt-lc-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.cpt-profil-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(max-width:680px){.cpt-lc-grid{grid-template-columns:1fr}.cpt-profil-grid{grid-template-columns:1fr}}
.cpt-lc-masquee{display:none}
.cpt-lc-voir-plus{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:10px 0 0;margin-top:10px;font-size:12px;color:var(--soft);cursor:pointer;font-family:var(--sans)}
.cpt-lc-voir-plus:hover{color:var(--brand)}
.cpt-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.cpt-fiche-edit{position:absolute;top:12px;right:50px;width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:background .15s,color .15s}
.cpt-fiche-edit:hover{background:var(--brand);color:#fff}
.cpt-camp-statut{font-size:11px;color:var(--brand-deep);margin-top:2px;font-family:var(--mono)}
.cpt-camp-statut:empty{display:none}
.cpt-activite-grid{display:flex;flex-wrap:wrap;gap:18px}
.cpt-activite-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px}
.cpt-activite-pic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.cpt-activite-n{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.cpt-activite-n-petit{font-size:18px;font-weight:700}
.cpt-activite-l{font-size:10px;color:var(--mute);text-align:center;text-transform:uppercase;letter-spacing:.03em;font-family:var(--mono)}
.cpt-camp-detail.hidden{display:none}
.cpt-camp-tile.hidden{display:none}
.cpt-pages-tile.hidden{display:none}
.cpt-echanges-tile.hidden{display:none}
.cpt-echange-detail.hidden{display:none}
.cpt-echange-audio.hidden{display:none}
.cpt-row.mqlsql{grid-template-columns:1.1fr 90px 130px 230px 150px 70px 32px;gap:16px}
.cpt-row.mqlsql.cli{grid-template-columns:24px 1.3fr 90px 130px 150px 150px}
/* retrait groupé (admin) : une colonne case à cocher en tête, en plus des
   7 colonnes habituelles — demande Sam 2026-09-02, "je me rends compte de
   critères à appliquer pour les enlever de la campagne" après un envoi mal
   filtré (860 contacts sans filtre pays). */
.cpt-row.mqlsql.sel{grid-template-columns:24px 1.1fr 90px 130px 230px 150px 70px 32px}
.mqlsql-sel,.mqlsql-sel-tous,.mqlsql-sel-admin,.mqlsql-sel-tous-admin{cursor:pointer;width:15px;height:15px;accent-color:var(--brand)}
/* contact déjà téléchargé (CSV client) : légèrement grisé — la case reste
   pleinement visible pour pouvoir le re-sélectionner */
.cpt-row.mqlsql.deja-dl > *:not(.cpt-sel-cell){opacity:.45}
.cpt-row.mqlsql .chip{font-size:10px;padding:4px 9px}
.mqlsql-tags{display:flex;gap:8px;align-items:flex-start}
.mqlsql-tag{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.mqlsql-tag-pic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;transition:transform .12s,box-shadow .12s}
.mqlsql-tag-pic svg{width:16px;height:16px}
.mqlsql-tag:hover .mqlsql-tag-pic{transform:scale(1.12)}
.mqlsql-tag.on .mqlsql-tag-pic{box-shadow:0 0 0 3px var(--brand-line)}
.mqlsql-tag-n{font-size:11px;font-variant-numeric:tabular-nums;color:var(--soft);font-weight:600}
.mqlsql-sep{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-deep);background:var(--brand-soft);padding:7px 20px;border-top:1px solid var(--line)}
/* opérateur : correction ponctuelle prénom/nom/fonction/coordonnées,
   dépliée sous la ligne — un intitulé au-dessus de chaque champ (les
   champs arrivent déjà remplis, un placeholder seul ne s'y voit jamais). */
.mqlsql-op-corr{display:flex;flex-direction:column;gap:10px;padding:12px 20px;background:var(--paper);border-top:1px solid var(--line)}
.mqlsql-op-corr.hidden{display:none}
.mqlsql-op-corr-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.mqlsql-op-corr-champ{flex:1 1 140px;min-width:120px}
.mqlsql-op-corr-champ .t-lab{margin-bottom:4px}
.mqlsql-op-corr-champ input{width:100%}
.mqlsql-op-corr-champ input[type="checkbox"]{width:auto}
.mqlsql-op-raisons-tel{display:flex;gap:8px;margin-top:4px}
.mqlsql-op-raisons-tel label{display:flex;align-items:center;gap:3px;font-size:10.5px;color:var(--soft);cursor:pointer;white-space:nowrap}
.mqlsql-op-raisons-tel input{margin:0}
.mqlsql-tag-n.vide{color:var(--line-strong,var(--line))}
/* totaux MQL x / MQL / MQL+ / SQL dans l'entête du listing campagne admin —
   petits ronds colorés à côté du libellé « statut », même ordre que les tags */
.mqlsql-head-n{display:inline-flex;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;font-family:var(--sans);letter-spacing:0;flex:0 0 auto}
/* filtre « qui m'appelle ? » de l'entête du listing campagne admin */
.mqlsql-tel-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--soft);cursor:pointer;flex:0 0 auto}
.mqlsql-tel-btn:hover{color:var(--brand);border-color:var(--brand-line)}
.mqlsql-tel-q{width:110px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);font:inherit;font-size:11px;padding:3px 7px;letter-spacing:.05em}
.mqlsql-tel-q.hidden{display:none}
/* pastille « commentaires non lus » sur une étape du workflow */
.tstep .tdot{position:relative}
.tstep-badge{position:absolute;top:-7px;right:-9px;min-width:15px;height:15px;border-radius:8px;background:var(--danger);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:var(--sans);letter-spacing:0}
/* sélecteur du statut d'appel du listing MQL/SQL : même gabarit que les tags,
   menu déroulant au survol (ou au clic pour l'épingler) ; la ligne survolée
   passe devant les suivantes pour que le menu ne soit pas recouvert. */
.mqlsql-appel{display:flex;flex-direction:column;align-items:center;gap:2px;margin-right:8px;padding-right:8px;border-right:1px solid var(--line)}
.mqlsql-appel:hover .mqlsql-tag-pic{transform:scale(1.12)}
.cpt-row:has(.mqlsql-appel:hover),.cpt-row:has(.mqlsql-appel.ouvert){position:relative;z-index:30}
/* le conteneur du listing rogne ses coins (overflow:hidden) : pendant que le
   menu du statut d'appel est déroulé, on le laisse déborder et passer devant
   les encarts suivants — sinon la pop-up est coupée par le bas du listing. */
.cpt-list:has(.mqlsql-appel:hover),.cpt-list:has(.mqlsql-appel.ouvert){overflow:visible;position:relative;z-index:30}
/* même souci pour le picto résumé d'échange (côté client) : les premières
   lignes du tableau n'ont pas la place au-dessus, la bulle se faisait
   rogner par le même overflow:hidden du conteneur — feedback Sam 2026-08-20. */
.cpt-list:has(.cpt-pic.tip:hover){overflow:visible;position:relative;z-index:30}
@media(max-width:760px){.cpt-row.mqlsql,.cpt-row.mqlsql.cli{grid-template-columns:1fr 1fr}}
.cpt-pages-ligne{display:grid;grid-template-columns:1.6fr 1.2fr 90px 70px;gap:10px;align-items:center;font-size:13px}
@media(max-width:680px){.cpt-pages-ligne{grid-template-columns:1fr 1fr;row-gap:6px}}
.cpt-activite-clic{cursor:pointer}
.cpt-activite-clic:hover .cpt-activite-pic{transform:scale(1.08)}
.cpt-activite-clic .cpt-activite-pic{transition:transform .12s,box-shadow .12s}
.cpt-activite-clic.on .cpt-activite-pic{box-shadow:0 0 0 3px var(--brand-line)}
.cpt-statut-wrap{position:relative;cursor:pointer}
/* collé au picto (top:100%, pas d'espace mort qui casse le survol en chemin
   vers le menu) ; un clic sur le picto épingle le menu (.ouvert) pour pouvoir
   cliquer tranquillement une option. */
.cpt-statut-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--line-strong,var(--line));border-radius:12px;padding:12px 14px;box-shadow:0 6px 24px rgba(27,35,40,.16);z-index:40;gap:14px}
.cpt-statut-wrap:hover .cpt-statut-menu,.cpt-statut-wrap.ouvert .cpt-statut-menu{display:flex}
/* chaque .tile crée son propre contexte d'empilement (position:relative +
   animation) : sans ça, l'encart intérêts/intentions passe DEVANT la pop-up. */
.tile:has(.cpt-statut-wrap:hover),.tile:has(.cpt-statut-wrap.ouvert){z-index:30}
.cpt-sb-opt{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;min-width:58px}
.cpt-sb-opt:hover .cpt-activite-pic{transform:scale(1.1)}
.cpt-sb-opt .cpt-activite-pic{transition:transform .12s,box-shadow .12s}
.cpt-sb-opt.on .cpt-activite-pic{box-shadow:0 0 0 3px var(--brand-line)}
.cpt-sb-n{font-size:11px;font-variant-numeric:tabular-nums;color:var(--soft);font-weight:700;min-height:14px}
.cpt-sb-l{font-size:9.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.03em;font-family:var(--mono);white-space:nowrap}
/* picto « comptes » de l'Activité — même comportement que .cpt-statut-wrap
   (clic pour épingler ouvert) mais classes distinctes : les deux coexistent
   dans la même fiche, il ne faut pas que le câblage de l'un attrape l'autre. */
.cpt-comptes-wrap{position:relative;cursor:pointer}
.cpt-comptes-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--line-strong,var(--line));border-radius:12px;padding:8px;box-shadow:0 6px 24px rgba(27,35,40,.16);z-index:40;flex-direction:column;gap:2px;min-width:150px}
.cpt-comptes-wrap:hover .cpt-comptes-menu,.cpt-comptes-wrap.ouvert .cpt-comptes-menu{display:flex}
.tile:has(.cpt-comptes-wrap:hover),.tile:has(.cpt-comptes-wrap.ouvert){z-index:30}
.cpt-compte-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer}
.cpt-compte-opt:hover{background:var(--paper)}
.cpt-compte-opt.on{background:var(--brand-soft)}
.cpt-compte-opt .cpt-activite-pic{width:22px;height:22px;font-size:9px}
.cpt-compte-l{font-size:12.5px;color:var(--ink)}
/* statut e-mail : lecture seule, juste un survol (pas de clic à épingler
   puisqu'il n'y a rien à choisir) — réutilise .cpt-statut-menu (visuel pur,
   jamais ciblé en JS) mais wrap et options ont leurs propres classes pour ne
   pas être capturés par le câblage clic du statut d'appel. */
.cpt-statut-email-wrap{position:relative;cursor:default}
.cpt-statut-email-wrap:hover .cpt-statut-menu{display:flex}
.tile:has(.cpt-statut-email-wrap:hover){z-index:30}
.cpt-statut-email-opt{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px}
.cpt-envoi-zone{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0}
.cpt-msel-menu{max-height:280px;overflow:auto;max-width:min(360px,calc(100vw - 24px))}
.cpt-msel-toustous{display:flex;gap:6px;margin-bottom:6px}
.cpt-msel-tous,.cpt-msel-aucun{flex:1;padding:5px 0;font-size:11px;font-family:var(--sans);color:var(--soft);background:var(--paper);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.cpt-msel-tous:hover,.cpt-msel-aucun:hover{background:var(--brand-soft);color:var(--brand-deep);border-color:var(--brand-line)}
/* Raccourci "campagnes actives" au survol du filtre Campagne (compact.js
   filtreCampagne) — jamais affiché en même temps que le popover de clic
   (:has() masque le raccourci dès que .cpt-msel-menu est ouvert). Demande
   Sam 2026-08-28. */
.cpt-camp-survol{display:none;max-height:320px;overflow:auto}
.cpt-camp-wrap:hover:not(:has(.cpt-msel-menu:not(.hidden))) .cpt-camp-survol{display:block}
.cpt-camp-survol a{display:block;padding:7px 9px;font-size:12px;color:var(--ink);text-decoration:none;border-radius:6px;white-space:normal}
.cpt-camp-survol a:hover{background:var(--paper);color:var(--brand)}
.cpt-msel-item{display:flex;align-items:center;gap:8px;padding:7px 9px;font-size:12px;color:var(--ink);border-radius:6px;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.cpt-msel-item:hover{background:var(--paper)}
.cpt-msel-item input{margin:0;flex:0 0 auto}
.cpt-msel-parent{padding:0 2px 0 0}
.cpt-msel-parent label{flex:1;display:flex;align-items:center;gap:8px;padding:7px 9px;cursor:pointer;min-width:0}
.cpt-msel-toggle{background:none;border:none;color:var(--mute);cursor:pointer;font-size:10px;flex:0 0 auto;padding:7px 9px;text-align:center}
.cpt-msel-toggle:hover{color:var(--brand)}
.cpt-msel-enfants{padding-left:20px}
.cpt-msel-enfants.hidden{display:none}
.cpt-msel-enfant{font-size:11.5px;color:var(--soft)}
.cpt-tfiltre-hint{margin:6px 2px 0;font-size:10.5px;line-height:1.4;color:var(--mute)}
.cpt-filtres-badge{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;font-size:12px;line-height:18px;text-align:center;cursor:pointer}
.cpt-filtres-badge:hover{background:var(--danger-deep,var(--danger))}
.cpt-filtres-badge.hidden{display:none}
.cpt-selection-wrap.hidden,.cpt-filtres.hidden,.cpt-envoi-zone.hidden{display:none}
.mqlsql-filtres.hidden,.mqlsql-filtres-badge.hidden,.mqlsql-retirer-select.hidden{display:none}
.cpt-resume{font-size:12.5px;color:var(--soft);line-height:1.5;margin:8px 0 0;padding:8px 10px;background:var(--paper);border-radius:8px}
.cpt-resume-client-edit.hidden,.cpt-resume-client-vue.hidden{display:none}
.camp-rapport-edit.hidden,.camp-rapport-vue.hidden{display:none}
.cpt-appel{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.cpt-camp-row{padding:10px 0;border-bottom:1px solid var(--line)}
.cpt-camp-row:last-child{border-bottom:0}
.cpt-camp-ligne{display:grid;grid-template-columns:1fr 1.4fr 130px 44px 70px;gap:10px;align-items:center;font-size:13px}
.cpt-camp-ligne.cpt-camp-sans-nom{grid-template-columns:1fr 130px 44px 70px}
.cpt-camp-entete{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);padding-bottom:8px;border-bottom:1px solid var(--line)}
@media(max-width:680px){.cpt-camp-ligne{grid-template-columns:1fr 1fr;row-gap:6px}.cpt-camp-entete{display:none}}
@media(max-width:760px){.cpt-row{grid-template-columns:1fr}}
.cpt-echange-row{padding:10px 0;border-bottom:1px solid var(--line)}
.cpt-echange-row:last-child{border-bottom:0}
.cpt-echange-ligne{display:grid;grid-template-columns:1.2fr 1fr .7fr 1.3fr 90px 70px;gap:10px;align-items:center;font-size:13px}
@media(max-width:680px){.cpt-echange-ligne{grid-template-columns:1fr 1fr;row-gap:6px}.cpt-echange-ligne.cpt-camp-entete{display:none}}

/* --- rapport slide --- */
.slide{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:6px}
.slide-top{height:5px;background:var(--brand)}
.slide-in{padding:24px 26px}
.badge-ia{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;background:var(--brand-soft);color:var(--brand-deep);padding:4px 11px;border-radius:20px}
.slide-titre{font-size:20px;font-weight:600;margin:12px 0 3px;letter-spacing:-.01em}
.slide-sub{color:var(--soft);font-size:13.5px;margin-bottom:18px}
.rp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.rp-kpi{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px}
.rp-num{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rp-num.good{color:var(--brand)}
.rp-l{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:3px}
.synth{background:var(--paper);border-left:3px solid var(--brand);border-radius:8px;padding:16px 18px;margin-top:18px}
.synth-li{display:flex;gap:10px;padding:5px 0;color:var(--soft);font-size:14px}
.synth-i{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:var(--brand-soft);color:var(--brand-deep)}
.synth-i.reco{background:var(--paper);border:1px solid var(--brand-line);color:var(--brand)}
.slide-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:var(--soft)}
.slide-foot b{color:var(--ink)}
.rapport-cta:hover{border-color:var(--brand-line)}

/* --- fiche décideur : infos --- */
.info-row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.info-row:last-child{border-bottom:0}
.info-l{flex:0 0 110px;font-family:var(--mono);font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;padding-top:2px}
.info-v{color:var(--ink)}

/* --- fiche décideur : contenus consommés --- */
.conso-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.conso-row:last-child{border-bottom:0}
.conso-titre{flex:1;color:var(--ink);font-size:14px}
.conso-date{font-family:var(--mono);font-size:11px;color:var(--mute);white-space:nowrap}

/* --- fiche décideur : timeline 360 --- */
.timeline{margin-top:12px;display:flex;flex-direction:column;gap:14px}
.tl-row{display:flex;gap:11px;font-size:13.5px;color:var(--soft)}
.tl-ico{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.tl-meta{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-bottom:2px}

@media(max-width:560px){.rp-kpis{grid-template-columns:repeat(2,1fr)}}

/* --- étapes cliquables + box d'étape --- */
.tstep[data-idx]{cursor:pointer}
.tstep[data-idx]:hover .tl{color:var(--brand)}
.tstep .attn{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-deep);background:var(--brand-soft);border-radius:6px;padding:1px 6px;margin-top:3px}
.modal-ov{position:fixed;inset:0;background:rgba(27,35,40,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal{background:var(--paper);border:1px solid var(--line);border-radius:16px;max-width:580px;width:100%;max-height:86vh;overflow:auto;padding:24px 26px;position:relative}
.step-sec{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:14px}
.step-sec .msgs .bulle{background:var(--paper)}
.step-sec .msgs .msg.mine .bulle{background:var(--brand)}
:root[data-theme="dark"] .step-sec .msgs .msg.mine .bulle{background:#1d5d6d}
.qd-groupe{margin-bottom:22px}
.qd-groupe-titre{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.qd-paire{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.qd-contact{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:var(--card)}
.qd-contact + .qd-contact{border-top:1px solid var(--line)}
.qd-contact-nom{font-size:14px;font-weight:600;color:var(--ink)}
.qd-contact-sub{font-size:12px;color:var(--soft);margin-top:2px}
.qd-contact-actions{display:flex;gap:8px;flex:0 0 auto}
.qd-suppr{color:var(--danger);border-color:var(--danger)}
.qd-paire-actions{padding:10px 14px;background:var(--paper);border-top:1px solid var(--line);display:flex;justify-content:flex-end}

/* modale de fusion de 2 fiches doublons — un champ = un choix a/b (ou une
   seule pastille si les deux valeurs sont identiques). */
.qf-champs{display:flex;flex-direction:column;gap:12px}
.qf-champ{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.qf-opts{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.qf-opt{border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--card);color:var(--soft);font-size:12.5px;cursor:pointer;font-family:var(--sans);text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-opt.on{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-deep);font-weight:600}
.modal-x{position:absolute;top:12px;right:12px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(15,20,22,.85);border:0;font-size:17px;color:#fff;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,transform .15s}
.modal-x:hover{background:var(--brand);transform:scale(1.06)}
.step-meta{font-size:12.5px;color:var(--soft);margin-top:8px}
.step-meta b{color:var(--ink)}
.step-desc{color:var(--soft);font-size:14px;line-height:1.55;margin:8px 0 0}
.step-lien{display:inline-block;margin-top:8px;color:var(--brand);font-size:13.5px;text-decoration:none;font-weight:500}
.step-lien:hover{text-decoration:underline}
.step-pieces{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.step-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.btn-sec{display:inline-flex;align-items:center;background:var(--card);color:var(--ink);font-weight:600;font-size:13.5px;padding:11px 18px;border-radius:12px;border:1px solid var(--line-strong,var(--line));cursor:pointer}
.btn-sec:hover{border-color:var(--brand-line);color:var(--brand)}
/* état "actif" du bouton Échanger Irina/Erica (mqlsql-swap-agents) — même
   logique visuelle que .camp-tab.on : indique que l'inversion est
   actuellement en place pour cette campagne. */
.btn-sec.on{background:var(--brand-soft);color:var(--brand-deep);border-color:transparent}
/* bouton filtre Téléphone (filtreTelephonePresence, compact.js) : 3 pictos
   SVG comme seul intitulé (currentColor, suit déjà la couleur du bouton/
   son hover) — juste un petit espace entre eux. */
.cpt-msel-btn-pictos{gap:5px}
.modif-zone{margin-top:14px}
.modif-zone.hidden{display:none}
.modif-txt{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--sans);font-size:13.5px;color:var(--ink);resize:vertical;background:var(--paper)}
.modif-txt:focus{outline:none;border-color:var(--brand-line)}
.modif-note{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:8px}
.etude-note{margin-top:14px;background:var(--card);border:1px dashed var(--line-strong);border-radius:10px;padding:11px 14px;font-size:12.5px;color:var(--soft)}
.modif-txt,.zone-txt{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--sans);font-size:13.5px;color:var(--ink);resize:vertical;background:var(--paper)}
.zone-txt:focus{outline:none;border-color:var(--brand-line)}
.balle-band{margin-top:14px;border-radius:10px;padding:10px 14px;font-size:13px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-left:3px solid var(--mute)}
.balle-band.client{border-left-color:var(--brand)}
.balle-band.its{border-left-color:var(--line-strong)}
.val-flag{color:var(--brand-deep);font-family:var(--mono);font-size:11px}
.composer{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.cmt-files{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.composer-mode{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.composer-mode.hidden{display:none}
.mode-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--brand-soft);color:var(--brand-deep);border-radius:7px;padding:3px 9px}
.mode-cancel{background:none;border:0;color:var(--mute);cursor:pointer;font-size:15px;line-height:1;padding:2px}
.mode-cancel:hover{color:var(--danger)}
.composer-hint{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:8px}
.composer-hint.hidden{display:none}
.link-zone{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.link-zone.hidden{display:none}
.link-url{flex:1;border:1px solid var(--brand-line);border-radius:10px;padding:9px 12px;font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--card)}
.link-url:focus{outline:none;border-color:var(--brand)}
.comment-box{display:flex;gap:8px}
.comment-box.hidden{display:none}
.comment-box .cta{padding:9px 14px;font-size:13px;white-space:nowrap}
.btn-cmt-file{padding:9px 11px;display:inline-flex;align-items:center}
.msg-link{color:var(--brand);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.msg.mine .msg-link{color:#fff}
.cmt-txt{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--card)}
.cmt-txt:focus{outline:none;border-color:var(--brand-line)}
.chip.st-valide{background:var(--brand-soft);color:var(--brand-deep)}
.chip.st-soumis{background:var(--brand);color:#fff}
.chip.st-modif{background:var(--danger-soft);color:var(--danger)}
.chip.st-encours{background:var(--brand-soft);color:var(--brand-deep)}
.chip.st-avenir{background:var(--paper);color:var(--mute);border:1px solid var(--line)}

/* --- visionneuse (preview livrables & liens) --- */
.preview-ov{position:fixed;inset:0;background:rgba(27,35,40,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.preview-card{background:var(--card);border-radius:14px;width:min(760px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.preview-nom{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-head .cta{padding:8px 13px;font-size:12.5px}
.preview-body{background:var(--paper);overflow:auto;display:flex;align-items:center;justify-content:center;min-height:320px}
.preview-body img{max-width:100%;max-height:70vh;display:block}
.preview-body iframe{width:100%;height:70vh;border:0;background:#fff}
.preview-lien-vide{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 30px;text-align:center}
.preview-lien-vide p{margin:0;max-width:400px;color:var(--mute);font-size:13px}
.preview-lien-bandeau{padding:8px 16px;background:var(--paper);border-bottom:1px solid var(--line);font-size:12px;color:var(--mute);text-align:center}
.preview-lien-bandeau a{color:var(--brand);font-weight:600}
a.pc{text-decoration:none;cursor:pointer}
a.pc:hover{border-color:var(--brand-line);color:var(--brand)}
.pc-date{font-family:var(--mono);font-size:10px;color:var(--mute)}
.pc-valid{font-family:var(--mono);font-size:10px;color:var(--brand);font-weight:700}
a.pc.last{border-color:var(--brand-line)}
.bulle-pieces{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.modif-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rm-file{cursor:pointer;color:var(--mute);font-weight:700;padding:0 2px}
.rm-file:hover{color:var(--danger)}
.gest-type.dragging{opacity:.45}

/* --- contacts du client --- */
.ct-rows{margin-top:12px}
.ct-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.ct-row:first-child{border-top:0}
.ct-key{background:none;border:1px solid var(--line);border-radius:8px;padding:6px 7px;color:var(--mute);cursor:pointer;display:inline-flex;flex:0 0 auto}
.ct-key.on{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)}
.ct-key:not(:disabled):hover{border-color:var(--brand-line)}
.ct-key:disabled{cursor:default}
.ct-main{flex:1;min-width:0}
.ct-nom{font-size:14px;font-weight:500;color:var(--ink);display:block}
.ct-fn{font-size:12px;color:var(--mute)}
.ct-mail{font-family:var(--mono);font-size:11.5px;color:var(--soft);white-space:nowrap}
.ct-badge{flex:0 0 auto}
.ct-cite{font-family:var(--mono);font-size:11px;color:var(--mute)}
.ct-invite{font-size:15px;text-decoration:none;color:var(--brand);padding:2px 4px}
.ct-invite:hover{color:var(--brand-deep)}

/* --- box d'étape : qui / quand / validation --- */
.step-infos{display:flex;flex-wrap:wrap;border:1px solid var(--line-strong,var(--line));border-radius:14px;background:var(--paper);margin-top:16px;overflow:hidden;box-shadow:0 2px 12px rgba(27,35,40,.07)}
.si-cell{flex:1 1 0;min-width:120px;padding:14px 18px;display:flex;align-items:center;gap:11px}
.si-cell + .si-cell{border-left:1px solid var(--line)}
.si-cell-ic{flex:0 0 auto;width:32px;height:32px;border-radius:10px;background:var(--brand-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.si-cell.si-clic:hover .si-cell-ic{background:rgba(255,255,255,.22);color:#fff}
.si-v{font-size:14.5px;font-weight:700;color:var(--ink);margin-top:3px;white-space:nowrap}
.si-v.si-client{color:var(--brand)}
.si-v-sub{font-size:11px;color:var(--soft);margin-top:2px;white-space:nowrap}
.si-cell.si-clic:hover .si-v-sub{color:#fff;opacity:.85}

/* clé d'accès : vert = actif, rouge = révoqué, gris = jamais eu accès */
:root{--ok:#2e9d63;--ok-soft:#e7f4ec;--ok-line:#c4e5d2}
:root[data-theme="dark"]{--ok:#4cc487;--ok-soft:#14301f;--ok-line:#1f4a30}
.ct-key.on{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}
.ct-key.revoque{color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}
.ct-badge{background:var(--ok-soft);color:var(--ok)}
.ct-badge.revoque{background:var(--danger-soft);color:var(--danger)}

/* --- frise : nom de l'étape AU-DESSUS de la ligne, qui/quand en dessous --- */
.tstep{display:flex;flex-direction:column;align-items:center}
.tstep .tl{order:0;margin:0 0 8px;min-height:30px;display:flex;align-items:flex-end;justify-content:center}
.tstep .tdot{order:1}
.tstep .td,.tstep .resp,.tstep .attn{order:2}
.tstep:not(:last-child)::after{top:46px}

/* --- frise : dates plus lisibles, décollées de la pastille --- */
.tstep .tdot{margin-bottom:7px}
.tstep .td{font-size:10px;color:var(--soft)}
.tstep .td.prev{opacity:1}

/* description de campagne : affichée directement sous le titre */
.camp-desc-inline{color:var(--soft);font-size:15px;margin:8px 0 20px;line-height:1.55}

/* titre + bande d'avancement (étapes/livrables/contacts/mql-sql + Discuter) :
   restent visibles au scroll, juste sous la barre du haut, pour toujours
   pouvoir sauter à une section ou ouvrir la discussion sans remonter. */
.camp-sticky-head{position:sticky;top:61px;z-index:30;background:var(--paper);padding:22px 0 16px;margin:0 0 6px}
.camp-sticky-head-titre{margin-bottom:14px}

/* panneau d'édition d'étape dans la box */
.se-champ{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink);background:var(--card);font-family:var(--sans);margin-top:6px}
input.se-nom{width:100%}
.step-edit{border-top:1px solid var(--line);margin-top:14px}
.step-edit.hidden{display:none}

/* bouton de soumission dans la zone du composer */
.composer-submit{margin-top:10px}
.composer-submit .cta{width:100%;justify-content:center}

/* étape réalisée : la pastille devient une coche */
.tstep.done .tdot::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700}

/* --- contenus attendus dans la box d'étape --- */
.ctn-list{margin-top:10px}
.ctn-row{padding:10px 0;border-top:1px solid var(--line)}
.ctn-row:first-child{border-top:0}
.ctn-ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctn-nom{font-size:13.5px;font-weight:600;color:var(--ink)}
.ctn-row.ok .ctn-nom{color:var(--soft)}
.ctn-badge{font-family:var(--mono);font-size:10.5px;color:var(--soft);background:var(--paper);border:1px solid var(--line);padding:3px 9px;border-radius:12px;white-space:nowrap}
.ctn-badge.ok{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}
.ctn-badge.refuse{color:var(--danger);background:var(--danger-soft);border-color:var(--danger)}
.ctn-badge.attente{border-style:dashed}
/* tableau Livrables : mêmes couleurs claires que la vue Campagne côté client
   (.ok/.refuse/.warn/.attente partagés) — en cours n'a pas d'équivalent client,
   en aplat vert plein pour bien ressortir */
.ctn-badge.encours{color:#fff;background:var(--ok);border-color:var(--ok)}
.ctn-envoi{display:flex;gap:8px;margin-top:8px;align-items:center}
.ctn-url{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink);background:var(--card);font-family:var(--sans)}
.ctn-url:focus{outline:none;border-color:var(--brand-line)}
.ctn-envoi .cta{padding:8px 14px;font-size:12.5px}
.ctn-envoi .btn-sec{padding:8px 10px}
.ctn-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center}
.ctn-actions .cta{padding:7px 13px;font-size:12.5px}
.ctn-refus-zone{display:flex;gap:8px;flex:1 1 100%;margin-top:6px}
.ctn-refus-zone.hidden{display:none}
.ctn-refus-txt{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;background:var(--card);color:var(--ink);font-family:var(--sans)}
.ctn-motif{font-size:12.5px;color:var(--danger);margin-top:6px;font-style:italic}

/* infobulle de description au survol d'une étape de la frise */
.tstep[data-tip]:hover::before{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:9px 13px;border-radius:9px;
  font-size:12px;font-weight:400;line-height:1.5;width:max-content;max-width:250px;
  white-space:normal;text-align:left;z-index:50;box-shadow:0 6px 18px rgba(0,0,0,.18);
  pointer-events:none;
}

/* ajout rapide : puces des membres B2BM déjà connus ailleurs (1 clic) */
.ct-add-quick{display:none;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.ct-add-quick .ct-quick-add{padding:5px 11px;font-size:12px;border-radius:20px}

/* ajout de contact à la volée */
.ct-add-row{display:flex;gap:8px;align-items:center;margin-top:8px;padding-top:14px;border-top:1px dashed var(--line)}
.ct-add-champ{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink);background:var(--paper);font-family:var(--sans);flex:1;min-width:0}
.ct-add-champ:focus{outline:none;border-color:var(--brand-line)}
.ct-add-mail{flex:1.4}
.ct-add-row .cta{padding:8px 14px;font-size:12.5px;flex:0 0 auto}
.ct-add-err{margin-top:8px}
/* même ligne d'ajout que l'admin (ct-add-row), mais TOUJOURS visible — pas
   de bascule .ct-editing pour le gestionnaire (contactsBox, mini-formulaire
   d'ajout restreint sous la liste en lecture seule). */
.ct-gest-add-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;padding-top:14px;border-top:1px dashed var(--line)}
.ct-gest-add-row .ct-gest-mail{flex:1.4}
.ct-gest-add-row .btn-sec{padding:8px 14px;font-size:12.5px;flex:0 0 auto}
.ct-gest-add-quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}

/* coche colorée selon le retard + date de réalisation au survol */
.tstep.done .tdot.late-warn{background:#e8930c;border-color:#e8930c}
.tstep.done .tdot.late-bad{background:var(--danger);border-color:var(--danger)}
.tdot[data-tipdate]:hover::before{
  content:attr(data-tipdate);
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:7px 11px;border-radius:8px;
  font-size:11.5px;font-weight:500;font-family:var(--sans);white-space:nowrap;z-index:60;
  box-shadow:0 6px 18px rgba(0,0,0,.18);pointer-events:none;
}
/* pas de double bulle quand on survole la coche */
.tstep[data-tip]:hover:has(.tdot[data-tipdate]:hover)::before{display:none}

/* soumission de contenu : le champ lien s'ouvre au clic sur le chaînon */
.ctn-envoi{flex-wrap:wrap}
.ctn-url-zone{display:flex;gap:8px;flex:1 1 100%;margin-top:6px}
.ctn-url-zone.hidden{display:none}
/* bouton de soumission d'étape grisé tant que les livrables ne sont pas tous fournis */
.cta:disabled{opacity:.45;cursor:default;filter:saturate(.4)}
/* pictos de dépôt sur la ligne du livrable : lien / PJ d'abord, bulle commentaire optionnelle */
.ctn-envoi{margin-top:0} /* les zones repliées portent leur propre marge — pas d'espace fantôme */
.ctn-outils{display:inline-flex;gap:4px;margin-right:6px}
.ctn-outils .btn-sec{padding:5px 8px;line-height:0}
.ctn-outils .ctn-retirer-btn{line-height:1;font-size:13px;padding:3px 8px;color:var(--mute)}
.ctn-outils .ctn-retirer-btn:hover{color:var(--danger);border-color:var(--danger)}
/* le picto (lien ou pièce jointe) utilisé pour soumettre passe en aplat vert, icône blanche —
   pas de picto en plus, celui déjà là indique comment le livrable a été fourni */
.ctn-outils .ctn-link-btn.actif,.ctn-outils .ctn-file-btn.actif{background:var(--ok);border-color:var(--ok);color:#fff}
/* crayon « modifier ce livrable » + zone de (re)soumission repliée par défaut */
.ctn-editer-livrable{padding:5px 8px;line-height:0;margin-right:6px}
.ctn-editer-zone.hidden{display:none}
.ctn-editer-zone{margin-top:8px}
.ctn-outils-edit{display:flex;align-items:center}
/* livrable livré : œil + nom + date sur une ligne — vert livraison si livré, neutre si soumis */
.ctn-voir{display:inline-flex;align-items:center;color:var(--soft);flex:0 0 auto;margin-right:8px}
.ctn-voir:hover{color:var(--brand)}
.ctn-voir.vert{color:var(--brand)}
.ctn-voir.vert:hover{color:var(--brand);opacity:.8}
.ctn-nom.livre,.ctn-row.ok .ctn-nom.livre{color:var(--brand)}
.ctn-liv-date{font-family:var(--mono);font-size:11px;color:var(--mute);white-space:nowrap}
.ctn-liv-date.vert{color:var(--brand)}
/* fil de discussion attaché au livrable */
.ctn-fil{margin:10px 0 2px;display:flex;flex-direction:column;gap:5px}
.ctn-fil-msg{font-size:12.5px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:6px 10px;max-width:88%;align-self:flex-start;line-height:1.45}
.ctn-fil-msg.mine{align-self:flex-end;background:var(--brand-soft);border-color:var(--brand-line)}
.ctn-fil-de{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-right:8px}
.ctn-fil-quand{font-family:var(--mono);font-size:9.5px;color:var(--mute);margin-left:8px}
.ctn-fil-zone{display:flex;margin-top:6px}
.ctn-fil-zone.hidden{display:none}
.ctn-fil-zone .ctn-fil-txt{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink);background:var(--card);font-family:var(--sans)}
.ctn-fil-zone .ctn-fil-txt:focus{outline:none;border-color:var(--brand-line)}

/* mode édition d'étape : la box ne montre que le formulaire */
.modal.editing .step-desc,.modal.editing .step-infos,.modal.editing .step-sec,
.modal.editing .balle-band,.modal.editing .step-actions,.modal.editing .composer{display:none}
.modal.editing .step-edit{border-top:0;margin-top:8px}

/* boxes éditables : les contrôles n'apparaissent qu'en mode édition (✎) */
.ct-box .ct-del,.ct-box .ct-add-row,.ct-box .ct-add-err{display:none}
.ct-box.ct-editing .ct-del{display:inline-flex}
.ct-box.ct-editing .ct-add-row{display:flex}
.ct-box.ct-editing .ct-add-quick:not(:empty){display:flex}
.ct-box.ct-editing .ct-add-err:not(.hidden){display:block}
.liv-box .liv-del{display:none}
.liv-box.liv-editing .liv-del{display:inline-flex}
/* même bascule lecture/édition pour la date d'un livrable — un seul bouton
   « Modifier » (liv-edit-toggle) gouverne les deux, plutôt qu'un crayon de
   date toujours visible indépendamment. Demande Sam 2026-08-29. */
.liv-box .liv-date-editer{display:none}
.liv-box.liv-editing .liv-date-editer{display:flex}
/* pendant l'édition d'UNE date précise, son propre crayon reste masqué (déjà
   remplacé par le formulaire) même si .liv-box.liv-editing l'affiche par
   défaut pour les autres lignes — sinon le crayon revenait visible à côté du
   formulaire (spécificité de la règle .liv-editing ci-dessus, plus élevée
   que .liv-date-editer.hidden seul). */
.liv-box.liv-editing .liv-date-editer.hidden{display:none}

/* livrables attendus dans les éditeurs d'étapes */
.ne-ctns-zone{grid-column:2/-1;margin:4px 0 6px;padding:8px 12px;border:1px dashed var(--line);border-radius:10px}
.nc-row{display:flex;gap:10px;align-items:center;padding:5px 0}
.nc-row .nc-nom{flex:0 1 320px;min-width:140px}
.nc-nom{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12.5px;color:var(--ink);background:var(--paper);font-family:var(--sans);width:100%}
.nc-nom:focus{outline:none;border-color:var(--brand-line)}
.nc-date-lab{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--soft);white-space:nowrap}
.nc-date{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px;color:var(--ink);background:var(--paper);font-family:var(--sans)}
.nc-date:focus{outline:none;border-color:var(--brand-line)}
.ne-ctn-add{font-size:12px;padding:5px 10px}
.gt-step{grid-template-columns:26px 1fr 140px 110px 30px}

/* camp du contact (it social / client) */
.ct-camp{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.ct-camp.cli{color:var(--brand)}
.ct-add-camp{max-width:160px}

/* toast de confirmation */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:11px 20px;border-radius:11px;z-index:120;font-size:13.5px;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:opacity .4s}
.toast.err{background:var(--danger);color:#fff}
.toast.out{opacity:0}
.ct-sends{display:inline-flex;align-items:center}
.ct-resend{background:none;border:0;cursor:pointer;font-size:15px;color:var(--brand);padding:2px 4px}
.ct-resend:hover{color:var(--brand-deep)}
.ct-magic{background:none;border:0;cursor:pointer;font-size:13px;color:var(--brand);padding:2px 4px}
.ct-magic:hover{color:var(--brand-deep)}

/* livrable non livré (vue campagne) : ligne atténuée dans le tableau bib-*,
   rien à prévisualiser — pas d'affordance de clic */
.bib-row.att .bib-titre{color:var(--soft);font-weight:500}
.bib-row-inerte{cursor:default}
.bib-row-inerte:hover{background:none}
.bib-row-inerte:hover .bib-titre{color:var(--soft)}

/* contacts : lignes en grille, champs invisibles en lecture / éditables en
   mode ✎ — chaque champ a sa colonne EXPLICITE (grid-column), pas un
   positionnement par ordre du DOM : avec des champs qui apparaissent/
   disparaissent selon le mode (nomc en lecture, prénom+nom en édition,
   pics en lecture, sends en lecture, del en édition), un template basé sur
   l'ordre naturel se désynchronisait du nombre réel d'enfants et poussait
   e-mail/téléphone dans des colonnes de 24px, voire une ligne débordante
   invisible — bug réel repéré par Sam 2026-08-19 ("je ne peux même pas
   modifier un email ou un téléphone"). Colonnes fixes, jamais réordonnées
   par le contenu affiché. */
.ct-row{
  display:grid;
  grid-template-columns:20px 32px 1fr .8fr 1.1fr 90px 1.3fr 130px 46px 46px 24px;
  gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);
}
.ct-row .ct-grip{grid-column:1}
.ct-row .ct-key{grid-column:2}
.ct-row .ct-nomc-wrap{grid-column:3/5}
.ct-row .ct-f-prenom{grid-column:3}
.ct-row .ct-f-nom{grid-column:4}
.ct-row .ct-f-fn{grid-column:5}
.ct-row .ct-f-camp{grid-column:6}
.ct-row .ct-f-mail{grid-column:7}
.ct-row .ct-f-tel{grid-column:8}
.ct-row .ct-pics{grid-column:9}
.ct-row .ct-sends{grid-column:10}
.ct-row .ct-del{grid-column:11}
.ct-f{border:1px solid transparent;background:transparent;border-radius:8px;padding:7px 8px;font-size:13px;color:var(--ink);font-family:var(--sans);width:100%;min-width:0}
.ct-nomc-wrap{display:flex;align-items:center;gap:2px;min-width:0}
.ct-nomc-wrap .ct-f-nomc{flex:1;min-width:0}
/* le picto de connexion flottait seul dans sa colonne en mode édition une
   fois le champ nomc caché — on masque tout le bloc, pas juste le champ. */
.ct-box.ct-editing .ct-nomc-wrap{display:none}
/* picto de connexion (voir picAcces, components/contacts.js) : vert plein
   déjà connecté, gris creux jamais — au survol, la date exacte. */
.ct-acces{flex:0 0 auto;font-size:9px;line-height:1;cursor:default}
.ct-acces-oui{color:#2ea043}
.ct-acces-non{color:var(--mute)}
.ct-f-fn,.ct-f-mail,.ct-f-tel{color:var(--soft);font-size:12.5px}
.ct-f-mail{font-family:var(--mono);font-size:11.5px}
.ct-f-camp{appearance:none;-webkit-appearance:none;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.ct-f:disabled{opacity:1;-webkit-text-fill-color:currentColor}
.ct-box.ct-editing .ct-f{border-color:var(--line);background:var(--paper)}
.ct-box.ct-editing .ct-f:focus{outline:none;border-color:var(--brand-line)}
.ct-box .ct-actions{display:none}
.ct-box.ct-editing .ct-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.ct-box.ct-editing .ct-sends{display:none}

/* œil de prévisualisation d'un contenu soumis */
.ctn-voir{display:inline-flex;align-items:center;color:var(--brand);padding:2px 4px}
.ctn-voir:hover{color:var(--brand-deep)}

/* contacts : grip de réordonnancement (la grille elle-même est définie
   plus haut, colonnes explicites par champ — voir .ct-row/.ct-row .ct-*) */
.ct-grip{visibility:hidden;cursor:grab;color:var(--mute);font-size:13px}
.ct-box.ct-editing .ct-grip{visibility:visible}
.ct-row.dragging{opacity:.45}

/* statut du contact : pastille de présence, couleur ET lettre (A/C/O/G/×) —
   la couleur seule ne se retient pas (feedback Sam 2026-08-17), la lettre
   dit le rôle sans avoir à mémoriser un code. */
.ct-key{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:none}
.ct-dot{width:17px;height:17px;border-radius:50%;border:2px solid var(--mute);background:transparent;transition:all .15s;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;line-height:1;color:transparent}
.ct-key.on{background:none;border:0}
.ct-key.on .ct-dot{background:var(--ok);border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-soft);color:#fff}
.ct-key.revoque{background:none;border:0}
.ct-key.revoque .ct-dot{background:var(--danger);border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft);color:#fff}
.ct-box.ct-editing .ct-key:not(:disabled){cursor:pointer}
.ct-box.ct-editing .ct-key:not(:disabled):hover .ct-dot{transform:scale(1.25)}

/* badge « à valider » / « en validation » : aplat jaune orangé, texte blanc */
.ctn-badge.warn{color:#fff;background:#c9a227;border-color:#c9a227}

/* champ de réponse dans la zone de soumission d'un contenu */
.ctn-msg{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink);background:var(--card);font-family:var(--sans)}
.ctn-msg:focus{outline:none;border-color:var(--brand-line)}

/* surbrillance de l'étape dans la frise au survol d'une ligne de livrable */
.tstep{transition:transform .18s ease}
.tstep.hl{transform:scale(1.1)}
.tstep.hl .tl{color:var(--brand)}
.tstep.hl .tdot{box-shadow:0 0 0 4px var(--brand-soft)}

/* grille des objectifs MQL/SQL */
.ne-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:10px}
.ne-grid3.hidden{display:none}

/* infobulle générique (description au survol, hors frise) */
.tip{position:relative}
.tip[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;left:0;bottom:calc(100% + 8px);
  background:var(--ink);color:var(--paper);padding:9px 13px;border-radius:9px;
  font-size:12px;font-weight:400;line-height:1.5;width:max-content;max-width:280px;
  white-space:normal;text-align:left;z-index:50;box-shadow:0 6px 18px rgba(0,0,0,.18);
  pointer-events:none;
}

/* vue d'ensemble : bloc de suivi à droite, prochaine action visible */
.camp-stats b{color:var(--ink);font-weight:600}
.camp-next{font-size:13.5px;margin-top:5px;color:var(--soft)}
.camp-next b{color:var(--ink)}

/* pastilles d'onglets réutilisées (campagnes, tri clients, catalogue d'offres) */
.camp-tab,.cat-tab{background:none;border:0;border-radius:7px;padding:5px 12px;font-family:var(--sans);font-size:12px;color:var(--soft);cursor:pointer;text-transform:none;letter-spacing:0}
.camp-tab.on,.cat-tab.on{background:var(--brand-soft);color:var(--brand-deep);font-weight:600}
.script-tab.on{background:var(--brand);color:#fff;font-weight:700;border-color:var(--brand)}
/* crayon "Modifier" — orange pâle plutôt que le gris neutre de .gest-edit,
   pour bien le distinguer des onglets et des pictos de statut à côté.
   Demande Sam 2026-08-18. */
.script-modifier{background:#fdf0e0;color:#c9781f;border-color:#f3d9b3}
.script-modifier:hover{background:#fbe4c4;color:#a9620f;border-color:#eec48a}
:root[data-theme="dark"] .script-modifier{background:#3a2a15;color:#e0a866;border-color:#5a3f1e}
:root[data-theme="dark"] .script-modifier:hover{background:#4a341a;color:#f0b876;border-color:#6a4a24}
/* chaque étape = une carte à part, bien séparée de la précédente — c'est
   le principal levier de clarté demandé par Sam (2026-08-18) : on doit
   pouvoir suivre le script d'un coup d'œil, étape par étape, pendant un
   appel, pas relire un paragraphe continu. */
.script-etape{display:flex;align-items:center;gap:10px;margin:26px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
.script-etape:first-child{margin-top:0;padding-top:0;border-top:0}
.script-etape-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--mono);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.script-etape h3{margin:0;font-size:16.5px;font-weight:700;color:var(--ink)}
.script-sous-etape{margin:18px 0 8px;font-size:13.5px;font-weight:700;color:var(--brand-deep);text-transform:uppercase;letter-spacing:.03em}
.script-lecture h4:first-child{margin-top:0}
.script-lecture p{margin:0 0 12px;font-size:15px;line-height:1.65;color:var(--ink)}
.script-lecture ul.script-liste{margin:0 0 12px;padding-left:0;list-style:none}
.script-lecture ul.script-liste li{font-size:14.5px;line-height:1.6;color:var(--soft);margin-bottom:5px;padding-left:16px;position:relative}
.script-lecture ul.script-liste li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--brand-line)}
.script-lecture ul.script-liste li b{color:var(--ink)}
/* la formulation exacte à dire (entre « guillemets » dans le texte source) :
   seul élément volontairement mis en avant — tout le reste (transitions,
   consignes) reste en texte normal pour ne pas noyer l'essentiel. */
.script-cite{display:inline;background:var(--brand-soft);color:var(--brand-deep);font-weight:600;padding:1px 6px;border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.script-relance{margin:0 0 10px;font-size:13.5px;font-style:italic;color:var(--mute)}
.script-note{margin:0 0 12px;padding:8px 12px;background:var(--paper);border-radius:8px;font-size:13px;color:var(--soft)}
.script-lien{color:var(--brand);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.script-lien:hover{color:var(--brand-deep)}

/* listes de campagnes (onglets Actives / À venir / Passées) */
.camp-list.hidden{display:none}

/* pastille de date d'échéance (prochaine action) */
.date-pill{font-family:var(--mono);font-size:11px;padding:3px 10px;border-radius:12px;font-weight:600;white-space:nowrap}
.date-pill.ok{background:var(--ok-soft);color:var(--ok)}
.date-pill.warn{background:#fdf1e0;color:#b96a00}
:root[data-theme="dark"] .date-pill.warn{background:#33240f;color:#f3b45f}
.date-pill.late{background:var(--danger-soft);color:var(--danger)}

/* pastille de date compacte dans les frises */
.track .date-pill{font-size:9.5px;padding:2px 7px}

/* pastille bleue « visiteur » (Client) + verrous de la vue visiteur */
.ct-key.visiteur .ct-dot{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);color:#fff}
.ct-vis{grid-column:1/-1;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:6px 0 2px 52px}
.ct-vis.hidden{display:none}
.lock-steps .tstep{pointer-events:none}

/* pastille violette « gestionnaire de campagne » */
.ct-key.gestion .ct-dot{background:#8b5cf6;border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.18);color:#fff}
.ct-vis-opts.hidden{display:none}

/* pastille orange « opérateur » (MQL seuls, une campagne) */
.ct-key.operateur .ct-dot{background:#f59e0b;border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18);color:#fff}
.ct-camps-multi{display:flex;gap:12px;flex-wrap:wrap}
.ct-vis-vide{color:var(--mute);font-style:italic;font-size:12.5px}

/* todo : date · client · campagne · étape + badge d'action à droite */
.todo-cli{color:var(--brand);font-weight:600}
.todo-main{color:var(--soft);font-size:13.5px;min-width:0}
.todo-main b{color:var(--ink)}
.todo-act{margin-left:auto;flex:0 0 auto}

/* récap de performance par opérateur — même mise en forme pour la ligne
   globale et le tableau du jour (demande Sam 2026-08-19) : nom, appels,
   contacts traités, TeamTime, moyenne appels/h, puis le détail par statut
   — voir enTeteUnifiee/ligne/ligneJour, detail.js. */
.op-grid{display:grid;gap:8px;align-items:center}
.op-grid.op-grid-jourdetail{grid-template-columns:80px 48px 56px 64px 56px repeat(11,1fr)}
.op-tt{font-family:var(--mono);font-size:12px}
.op-tt-live{color:var(--brand);font-weight:700}
.op-head{padding:8px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.op-row{padding:7px 0;border-bottom:1px solid var(--line)}
.op-row:last-of-type{border-bottom:0}
.op-nom{font-size:13px;font-weight:600;color:var(--ink)}
.op-nom-clic{background:none;border:0;padding:0;text-align:left;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink)}
.op-nom-clic:hover,.op-nom-clic.on{color:var(--brand)}
/* toute la ligne cliquable (pas juste le nom) : filtre le workflow MQL/SQL
   plus bas sur cet opérateur ET ce jour-là. */
.op-row-jour-clic{cursor:pointer;border-radius:8px;margin:0 -8px;padding:7px 8px;width:calc(100% + 16px)}
.op-row-jour-clic:hover{background:var(--brand-soft)}
.op-row-jour-clic.on{background:var(--brand-soft)}
.op-row-jour-clic.on .op-nom{color:var(--brand)}
.op-cell{font-size:13px;color:var(--soft);text-align:center;font-variant-numeric:tabular-nums}
.op-total{color:var(--ink);font-weight:600}
.op-moy{color:var(--brand)}
.op-col-lab{display:flex;flex-direction:column;align-items:center;gap:4px}
.op-col-lab b{font-weight:700}
.op-col-pic{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;color:#fff;font-size:8.5px;font-weight:800;line-height:1;flex:0 0 auto}
.op-col-pic svg{width:9px;height:9px;display:block}
.op-jour-bloc.hidden{display:none}
/* camembert « en creux » (donut) de répartition par statut — jour à gauche,
   global à droite (voir operateursPanel, views/detail.js). Légende AUTOUR du
   cercle (pas en dessous) : chaque tranche porte son libellé, relié par un
   petit trait — seul moyen d'identifier les tranches les plus fines. Survol
   d'une tranche : les autres s'estompent, le nombre de contacts remplace le
   pourcentage sur celle survolée. Demande Sam 2026-08-20. */
/* empilés (pas côte à côte) : chaque camembert a besoin de toute la largeur
   de la tuile pour ses libellés autour — deux colonnes les aurait re-serrés
   exactement comme reproché par Sam (camemberts « petits, écrasés »). */
/* encart repliable : juste la barre de titre par défaut (bouton pleine
   largeur, pas de chrome de bouton natif), la flèche tourne à l'ouverture. */
.op-toggle{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;border-radius:10px;padding:8px 10px;margin:-8px -10px;cursor:pointer;text-align:left}
.op-toggle:hover{background:var(--paper)}
.op-toggle-fleche{transition:transform .18s;color:var(--soft);flex:0 0 auto;margin-left:auto}
.op-toggle.on .op-toggle-fleche{transform:rotate(180deg)}
.op-detail.hidden{display:none}
.op-detail{margin-top:20px}
.op-don-grid{display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:24px;overflow:visible}
.op-don-bloc{display:flex;flex-direction:column;align-items:center;gap:12px;overflow:visible;min-width:0}
.op-don-svg{max-width:100%;height:auto;overflow:visible;flex:0 0 auto}
.op-don-seg{opacity:1;transition:opacity .15s}
.op-don-svg:has(.op-don-seg:hover) .op-don-seg:not(:hover){opacity:.25}
.op-don-seg circle{transition:stroke-dasharray .2s}
.op-don-trait{stroke-width:1.3;opacity:.6;fill:none}
.op-don-lab{font-family:var(--sans);font-size:12.5px;fill:var(--soft);cursor:default}
.op-don-lab-nom{fill:var(--ink);font-weight:600}
.op-don-lab-n{display:none}
.op-don-seg:hover .op-don-lab-n{display:inline;fill:var(--brand);font-weight:700}
.op-don-seg:hover .op-don-trait{opacity:1;stroke-width:1.8}
.op-don-total{font-family:var(--sans);font-size:42px;font-weight:700;fill:var(--ink)}
.op-don-total-lab{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;fill:var(--mute)}
.op-jour-donut.hidden{display:none}

/* taux de conversion oui/non (global + jour) et comparaison entre
   campagnes — onglet Stat, demande Sam 2026-09-04. Même grille 3 colonnes
   (libellé · barre · chiffres) pour les deux lignes global/jour. */
.op-ratio-grid{display:flex;flex-direction:column;gap:14px}
.op-ratio-row{display:grid;grid-template-columns:170px 1fr auto;gap:16px;align-items:center}
.op-ratio-lab{display:flex;flex-direction:column;gap:2px}
.op-ratio-lab b{font-size:13px;color:var(--ink)}
.op-ratio-bar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.op-ratio-oui{background:#2ecc71}
.op-ratio-non{background:#b3728c}
.op-ratio-vide{width:100%;height:100%}
.op-ratio-chiffres{font-size:12.5px;color:var(--soft);white-space:nowrap;text-align:right}
.op-ratio-pct{font-family:var(--mono);color:var(--ink);font-weight:700}
/* comparaison entre campagnes : une ligne = une barre horizontale (% de
   oui), triées décroissant, avec un repère vertical pour la moyenne agence
   pondérée et la campagne actuelle mise en valeur (étoile + fond). */
.op-cmp-list{display:flex;flex-direction:column;gap:10px}
.op-cmp-row{display:grid;grid-template-columns:200px 1fr auto;gap:16px;align-items:center;padding:4px 8px;border-radius:8px}
.op-cmp-actuelle{background:var(--brand-soft)}
.op-cmp-lab{font-size:12.5px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-cmp-actuelle .op-cmp-lab{color:var(--brand);font-weight:700}
.op-cmp-track{position:relative;height:12px;border-radius:6px;background:var(--paper);border:1px solid var(--line);overflow:visible}
.op-cmp-fill{display:block;height:100%;border-radius:6px 0 0 6px;background:var(--brand)}
.op-cmp-actuelle .op-cmp-fill{background:#2ecc71}
.op-cmp-rep{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55}
.op-cmp-pct{font-family:var(--mono);font-size:12.5px;color:var(--ink);font-weight:700;white-space:nowrap}
@media (max-width:640px){
  .op-ratio-row,.op-cmp-row{grid-template-columns:1fr}
  .op-ratio-chiffres{text-align:left}
}

/* à traiter : table homogène à 6 colonnes — échéance · client · livrable ·
   étape · campagne · statut — pastilles réservées aux retards */
.todo-head,.todo-row{display:grid;grid-template-columns:92px 1fr 1.3fr 1.15fr 1.15fr 138px;gap:20px;align-items:center}
.todo-head{padding:12px 0 10px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.todo-row{padding:13px 0}
.td-camp{font-size:13px;color:var(--soft);position:relative}
.td-etape{position:relative}
.td-etape b{color:var(--ink)}
.td-c{font-size:13px;color:var(--ink);position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-date{font-family:var(--mono);font-size:11.5px;color:var(--soft)}
.todo-row > span:last-child{display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}
.todo-row .ctn-badge{white-space:nowrap}
.todo-row.masquee{display:none}
.todo-voir-plus{display:block;width:100%;text-align:center;background:none;border:0;border-top:1px solid var(--line);padding:13px 0;margin-top:0;font-size:12.5px;color:var(--soft);cursor:pointer;font-family:var(--sans)}
.todo-voir-plus:hover{color:var(--brand)}
/* à faire a un fond très clair, invisible sur une ligne grisée (une sur deux) —
   fond blanc dans ce tableau spécifiquement, pour ressortir. */
.todo-row .ctn-badge.attente{background:var(--card)}
.todo-row .ctn-badge.tt-envoye{color:#fff;background:#4a67a0;border-color:#4a67a0}
.td-temps{font-family:var(--mono);font-size:11px;color:var(--mute);margin-left:0}
/* un client sur deux légèrement grisé, pour mieux suivre le groupe visuellement */
.todo-row.alt{background:var(--paper);margin:0 -20px;padding-left:20px;padding-right:20px}

/* ============ passe mobile (≤640px) ============
   Règle : les tables restent des tables (elles défilent dans leur carte),
   les lignes riches s'empilent, les box passent en plein écran. */
@media(max-width:640px){
  html,body{overflow-x:hidden}
  /* bento : une seule colonne — neutralise aussi les spans posés en style inline */
  .bento{grid-template-columns:1fr}
  .bento > *{grid-column:1/-1 !important}
  .wrap{padding:0 16px 48px}
  .hello{font-size:23px}
  .hello-sub{font-size:13.5px}

  /* barre du haut : une seule ligne qui défile au doigt */
  .topbar{margin-bottom:22px}
  .topbar-in{padding:0 14px;gap:16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .topbar-in::-webkit-scrollbar{display:none}
  .topbar .nav{flex-wrap:nowrap}
  .topbar .nav a{white-space:nowrap;padding:0 9px}

  /* en-têtes de section : le titre, puis les onglets, puis le bouton */
  .sec{flex-wrap:wrap;row-gap:10px}
  .todo-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .todo-tabs::-webkit-scrollbar{display:none}
  .todo-tabs button{white-space:nowrap}
  .sec .cta{margin-left:0 !important}

  /* lignes campagne / client : identité en haut, suivi dessous à gauche */
  .compte-card{flex-wrap:wrap;row-gap:6px}
  .camp-side{flex-basis:100%;text-align:left !important;padding-left:47px}
  .camp-next{margin-top:6px}
  .compte-card > span:last-child{display:none}

  /* tables (à traiter, livrables) : la table garde ses colonnes et
     défile horizontalement dans sa carte — jamais la page */
  .todo-list{overflow-x:auto}
  .todo-list .todo-head,.todo-list .todo-row{min-width:700px}

  /* frise : défilement horizontal, étapes à largeur lisible */
  .track{overflow-x:auto;padding-bottom:10px}
  .track .tstep{min-width:88px;flex:0 0 auto}

  /* boxes (étape, édition, aperçu) : plein écran */
  .modal-ov{padding:0;align-items:stretch}
  .modal{max-width:100%;max-height:100%;height:100%;border-radius:0;padding:20px 16px}

  /* cellules d'infos d'étape : 2 par ligne */
  .si-cell{flex:1 1 40%}

  /* en-tête de campagne (titre + Stat/Connexions/Script) : le titre passe
     avant, les boutons dessous plutôt que de forcer un défilement horizontal
     de toute la page. Demande Sam 2026-08-26 (gestion des campagnes depuis
     mobile). */
  .camp-sticky-head-titre{flex-wrap:wrap;row-gap:12px}
  .camp-sticky-head-titre > span{margin-left:0 !important;flex-wrap:wrap;width:100%}

  /* composeur : le champ prend la ligne, les boutons passent dessous */
  .comment-box{flex-wrap:wrap}
  .comment-box .cmt-txt{flex:1 1 100%}

  /* contacts : grille — pastille + nom en tête, détails dessous */
  .ct-row{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:2px 10px;align-items:center}
  .ct-row .ct-nomc-wrap{grid-column:3/4}
  .ct-row .ct-f-prenom,.ct-row .ct-f-nom{grid-column:3/6;padding-top:2px;padding-bottom:2px}
  .ct-row .ct-f-fn,.ct-row .ct-f-camp,.ct-row .ct-f-mail,.ct-row .ct-f-tel{grid-column:3/6;padding-top:2px;padding-bottom:2px}
  .ct-row .ct-pics{grid-row:1;grid-column:4}
  .ct-row .ct-sends{grid-row:1;grid-column:5}
  .ct-row .ct-del{grid-row:1;grid-column:5}
  .ct-box.ct-editing .ct-row .ct-sends{grid-column:4}
  .ct-row .ct-vis{grid-column:1/-1;padding-left:0}
  .ct-add-row{flex-wrap:wrap}
  .ct-add-row .ct-add-champ{flex:1 1 100%}
  .ct-add-row .ct-add-camp{flex:1 1 auto}

  /* formulaires (nouvelle campagne, objectifs) */
  .ne-grid3{grid-template-columns:1fr}

  /* éditeur d'étapes : nom en tête, réglages dessous */
  .ne-head{display:none}
  .ne-step{grid-template-columns:26px 1fr 64px;row-gap:8px}
  .ne-step .ne-nom{grid-column:2/3}
  .ne-step .ne-actions{grid-column:3/4}
  .ne-step .ne-date,.ne-step .ne-resp,.ne-step .ne-val-lab{grid-column:2/-1}
  .ne-step .ne-desc,.ne-step .ne-ctns-zone{grid-column:2/-1}

  /* infobulles : ancrées à gauche, jamais plus larges que l'écran */
  .tip[data-tip]:hover::after{max-width:min(280px,86vw)}
}

/* bandeau « nouvelle version » (anti vieil onglet) */
.maj-bandeau{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:12px;font-size:13px;z-index:90;box-shadow:0 8px 26px rgba(0,0,0,.25);display:flex;align-items:center;gap:10px}
.maj-bandeau button{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer}

/* fil replié derrière la bulle : verte quand il y a des messages, pastille rouge = non-lus */
.ctn-msg-btn{position:relative}
.ctn-msg-btn.avec-fil{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}
.ctn-fil-badge{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;font-size:9.5px;font-weight:700;min-width:15px;height:15px;line-height:15px;border-radius:8px;text-align:center;padding:0 3px}
.ctn-fil-wrap{margin-top:2px}
.ctn-fil-wrap.hidden{display:none}

/* contacts : e-mail et téléphone écrits en toutes lettres en lecture (Sam
   doit pouvoir les lire/copier sans survoler ni cliquer sur une icône) —
   les pictos mail/tel ne servent donc plus qu'en secours si jamais besoin
   ailleurs, masqués ici. Le nom se saisit en deux champs (prénom / nom),
   affiché recomposé en lecture. */
.ct-pics{display:inline-flex;gap:4px;flex:0 0 auto}
.ct-pic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--line);border-radius:8px;color:var(--soft)}
.ct-pic:hover{color:var(--brand);border-color:var(--brand-line)}
button.ct-pic{background:none;cursor:pointer;font:inherit}
.ct-box:not(.ct-editing) .ct-pics,
.ct-box:not(.ct-editing) .ct-f-prenom,
.ct-box:not(.ct-editing) .ct-row .ct-f-nom{display:none}
.ct-box.ct-editing .ct-f-nomc,
.ct-box.ct-editing .ct-pics{display:none}


/* bouton de format d'un livrable attendu (fichier/lien ↔ discussion) */
.nc-format{padding:6px 8px;line-height:0;flex:0 0 auto;color:var(--soft)}
.nc-format.disc{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}

/* spécificités d'un livrable : picto dans les éditeurs (actif = teinté) et dans la box */
.nc-specs{padding:6px 8px;line-height:0;flex:0 0 auto;color:var(--soft)}
.nc-specs.on{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)}
.ctn-specs{display:inline-flex;align-items:center;color:var(--mute);cursor:default;flex:0 0 auto}
.ctn-specs:hover{color:var(--brand)}
.tip-pre[data-tip]:hover::after{white-space:pre-line;text-align:left}

/* envoi d'un livrable vers TeamTime : picto devant le nom, coche une fois envoyé */
.tt-envoi{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-right:6px;padding:3px 7px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;white-space:nowrap;border:1px solid var(--line);background:none;color:var(--mute);cursor:pointer;border-radius:12px}
.tt-envoi:hover{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)}
.tt-envoi.envoye{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft);cursor:default}

/* types de campagne : tag, mini-description, échéancier J+ */
.gest-tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-deep);background:var(--brand-soft);border-radius:7px;padding:3px 9px}
.gest-desc{color:var(--soft);font-size:13px;margin-top:6px}
.gt-jplus{width:64px;border:1px solid var(--line);border-radius:8px;padding:8px 8px;font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--paper)}
.gt-step{grid-template-columns:26px 1fr 64px 140px 110px 24px 30px}
.gt-jcum{color:var(--brand);font-weight:600}
.gest-type.hidden{display:none}

/* échéancier J0 / J+ : préfixe grisé, J0 fixe pour la première étape */
.gt-j0{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;justify-content:center}
.gt-jwrap{display:inline-flex;align-items:center;gap:4px}
.gt-jprefixe{font-family:var(--mono);font-size:12px;color:var(--mute)}
.gt-jwrap .gt-jplus{width:52px}

/* éditeur de type : zone grisée, chaque étape en carte blanche ombrée et numérotée */
.gt-steps{background:var(--paper);border-radius:14px;padding:4px 14px 14px;margin-top:6px}
.gt-step{display:block;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px 16px;margin-top:12px;box-shadow:0 1px 5px rgba(27,35,40,.07)}
.gt-num{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-deep);background:var(--brand-soft);border-radius:7px;padding:4px 9px;flex:0 0 auto;white-space:nowrap}
.gt-entete{display:flex;align-items:center;gap:10px}
.gt-entete .gt-nom{flex:1;font-weight:600;font-size:14px}
.gt-params{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px;align-items:flex-start}
.gt-params .t-lab{margin-bottom:7px}
.gt-val-lab{padding-top:8px}
.gt-desc-row .gt-desc{margin-top:2px}
.gt-step .ne-ctns-zone{margin-top:4px}
.gt-step .nc-row{padding:7px 0}

/* livrer via la discussion : le message marqué livrable + bouton Livrer dans la zone */
.ctn-fil-zone .ctn-fil-livrer{padding:8px 14px;font-size:12.5px;flex:0 0 auto;margin-left:8px}
.ctn-fil-msg.est-livrable{border-color:var(--brand-line);background:var(--brand-soft)}
.ctn-fil-liv{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-deep);margin-left:8px}

/* offres suggérées (accueil client) — même carte que le portail b2bmarketing.fr */
.sugg-offres{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
/* catalogue complet (onglet Campagnes) : bandeau plein largeur teinté, nettement
   détaché du listing « vos campagnes » au-dessus (sinon les deux se confondent) */
.catalogue-band{margin:44px 0 0;padding:32px 0 40px;background:var(--paper);border-top:1px solid var(--line);width:100vw;margin-left:calc(50% - 50vw)}
.catalogue-band > *{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:26px;padding-right:26px}
.catalogue-band .sec{margin-bottom:0}
.catalogue-band .hello-sub{margin:8px auto 22px}
.sugg-titre{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:0}
.sugg-sub{color:var(--soft);font-size:13.5px;margin:8px 0 20px}
.hero-visu{flex:0 0 auto;width:84px;height:56px;border-radius:10px;overflow:hidden;position:relative}
.camp-banniere{width:100%;height:180px;border-radius:14px;overflow:hidden;margin-top:14px;position:relative}
.camp-banniere img{width:100%;height:100%;object-fit:cover;display:block}
.hero-visu img{width:100%;height:100%;object-fit:cover;display:block}
/* tampon "Payé" façon encre rouge sur une facture papier — sur la bannière
   de la fiche campagne (.camp-banniere) ou, en plus petit, dans la zone
   blanche à droite du nom/type de campagne sur une ligne de la liste admin
   (.row-tampon, voir admin.js — PAS sur la vignette : "je l'aurais pas mis
   sur l'image, plutôt à droite du nom", retour Sam 2026-09-04 après un
   premier essai sur .hero-visu). Fond blanc translucide (pas de
   mix-blend-mode) : lisible quelle que soit la photo en dessous, claire ou
   sombre. Rouge pour "payé" — pas vert, en référence au tampon encreur
   d'une facture réglée. */
.fact-tampon{position:absolute;top:22px;right:-46px;width:190px;padding:8px 0;text-align:center;background:rgba(255,255,255,.92);border:3px solid #c1272d;border-radius:6px;color:#c1272d;font-family:var(--mono);font-weight:800;font-size:16px;letter-spacing:3px;text-transform:uppercase;transform:rotate(18deg);box-shadow:0 3px 10px rgba(0,0,0,.28);z-index:2;pointer-events:none}
/* même tampon, taille intermédiaire, posé dans la zone blanche à droite du
   nom/type de campagne (pas sur la vignette) — Sam 2026-09-04 : "à droite
   du nom de la campagne, dans la grande partie blanche". Le conteneur
   flex:1 qui porte nom/type occupe déjà tout cet espace (position:relative
   posé dessus dans admin.js), donc "right" reste relatif à LUI, jamais à
   la colonne de stats à sa droite. */
.row-tampon{position:absolute;top:50%;right:6px;width:112px;padding:5px 0;text-align:center;background:rgba(255,255,255,.92);border:2px solid #c1272d;border-radius:5px;color:#c1272d;font-family:var(--mono);font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;transform:translateY(-50%) rotate(18deg);box-shadow:0 2px 6px rgba(0,0,0,.2);z-index:2;pointer-events:none}
.chip.fact-paye{background:#f8e3e1;color:#c1272d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip.fact-paye{background:#3a1e1c;color:#e8877e}}
:root[data-theme="dark"] .chip.fact-paye{background:#3a1e1c;color:#e8877e}
.hero-info .chip-off{margin-bottom:6px}
.sugg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sugg-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.sugg-card.hidden{display:none}
.sugg-visu{height:74px;border-radius:10px;overflow:hidden;order:-1;margin:-18px -20px 2px}
.sugg-visu img{width:100%;height:100%;object-fit:cover;display:block}
.sugg-card h4{font-size:16px;font-weight:700;margin:0}
.sugg-card p{font-size:12.5px;color:var(--soft);line-height:1.5;margin:0}
.sugg-price{font-weight:700;font-size:14px;color:var(--ink);padding-top:8px;border-top:1px solid var(--line);margin-top:2px}
.sugg-price-note{font-weight:500;font-size:11.5px;color:var(--mute);margin-left:6px}
.sugg-actions{display:flex;gap:8px;margin-top:2px}
.sugg-actions .btn-sec,.sugg-actions .cta{flex:1;justify-content:center;padding:9px 10px;font-size:12.5px}
.chip-off{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:20px;color:#fff}
.chip-off.lead{background:#c9a227}
.chip-off.brd{background:#c2660f}
.chip-off.cnt{background:#c23434}
@media(max-width:760px){.sugg-grid{grid-template-columns:1fr}}

/* détail d'une offre suggérée : même contenu que la fiche du portail, dans le modal générique de l'app */
.sugg-m-visu-wrap{position:relative;margin-bottom:16px}
.sugg-m-visu-wrap:has(.sugg-m-play)::after{content:"";position:absolute;inset:0;border-radius:12px;background:rgba(10,14,16,.22);pointer-events:none}
.sugg-m-visu{height:130px;border-radius:12px;overflow:hidden}
.sugg-m-visu img{width:100%;height:100%;object-fit:cover;display:block}
.sugg-m-points{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.sugg-m-points span{font-size:11px;color:var(--soft);background:var(--paper);border:1px solid var(--line);padding:4px 10px;border-radius:20px}
.sugg-m-track{display:flex;justify-content:space-between;position:relative;margin-bottom:4px}
.sugg-m-track::before{content:"";position:absolute;top:19px;left:6px;right:6px;height:1px;background:var(--line)}
.sugg-m-tstep{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;z-index:1;gap:6px}
.sugg-m-tday{font-family:var(--mono);font-size:10.5px;color:var(--brand);font-weight:600}
.sugg-m-tdot{width:11px;height:11px;border-radius:50%;background:var(--card);border:2px solid var(--line)}
.sugg-m-tlab{font-size:11px;text-align:center;color:var(--soft);max-width:92px;line-height:1.4}
.sugg-m-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.sugg-m-play{position:absolute;right:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:30px;padding:11px 20px 11px 15px;background:rgba(15,20,22,.75);color:#fff;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:transform .15s,background .15s}
.sugg-m-play svg{flex:0 0 auto}
.sugg-m-play:hover{background:var(--brand);transform:scale(1.06)}
.sugg-m-video{position:relative;width:100%;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#000}
.sugg-m-video iframe,.sugg-m-video video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.sugg-m-video-box{max-width:640px;padding:0;background:#000;overflow:visible}
.sugg-m-video-box .modal-x{top:-32px;right:-8px;color:#fff}


/* infobulle instantanée des pictos contact (e-mail / téléphones / réseaux) */
.cpt-pic{position:relative}
.cpt-pic[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#1b2328;color:#fff;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:7px;white-space:nowrap;z-index:40;pointer-events:none;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.cpt-pic[data-tip]:hover::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1b2328;z-index:40;pointer-events:none}
/* picto résumé d'échange (côté client) : le texte peut être long — reprend
   la bulle .cpt-pic mais en multi-ligne largeur limitée, pas en une seule
   ligne qui déborderait de l'écran. */
.cpt-pic.tip[data-tip]:hover::after{white-space:normal;text-align:left;font-weight:400;line-height:1.5;width:max-content;max-width:min(300px,86vw)}