/* ===== COLD MAIL — même style graphique que Cold Call (papier, encre, ombres pleines), couleur dominante bleue ===== */

/* --- bascule SITE / CM / MAIL (commune aux trois modes) --- */
.modesw{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:90;display:flex;padding:4px;gap:4px;border-radius:999px;background:var(--card,#FFFDF7);border:3px solid var(--ink,#201F20);box-shadow:4px 4px 0 var(--ink,#201F20)}
.modesw[hidden]{display:none}
.modesw button{border:2px solid transparent;border-radius:999px;padding:6px 14px;font:800 13px/1 var(--f-display,"Syne",system-ui,sans-serif);letter-spacing:.06em;color:var(--ink2,#4A4644);background:transparent;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s}
.modesw button:hover{background:var(--paper2,#EFE6D2)}
.modesw button[aria-pressed="true"]{color:var(--ink,#201F20);border-color:var(--ink,#201F20)}
.modesw button[data-mode="site"][aria-pressed="true"]{background:#FFD654}
.modesw button[data-mode="cm"][aria-pressed="true"]{background:#FF8F80}
.modesw button[data-mode="mail"][aria-pressed="true"]{background:#8EC8FF}
body.is-va .modesw{display:none}
body.mode-mail #app,body.mode-mail #wk,body.mode-mail #callBub,body.mode-mail #rem,body.mode-mail #sessPill{display:none!important}
#mailApp[hidden]{display:none}

#mailApp{
  --bg:var(--paper,#F6F0E2);--bg2:var(--paper,#F6F0E2);--line:var(--ink,#201F20);--mute:#857E76;
  --blue:#8EC8FF;--blue2:#4D9EFF;--lime:#8EC8FF;--pink:#FFA8D0;--cyan:#9FD3FF;--amber:#FFB27A;--red:#FF6B5B;--green:#2BB673;--mint:#6EF4C4;
  --mono:var(--f-pixel,"Jersey 20",monospace);--sans:var(--f-body,"Outfit",system-ui,sans-serif);--disp:var(--f-display,"Syne",system-ui,sans-serif);
  font-family:var(--sans);color:var(--ink,#201F20)}
#mailApp *{box-sizing:border-box}
.cm{min-height:100vh;color:var(--ink);font-family:var(--sans);padding:70px max(16px,env(safe-area-inset-right)) 80px max(16px,env(safe-area-inset-left))}
.cm .in{max-width:1180px;margin:0 auto}
.cm a{color:inherit}

/* tête */
.cm-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 0 20px}
.cm-brand{display:flex;align-items:center;gap:14px;background:var(--card);border:3px solid var(--ink);border-radius:20px;padding:8px 16px 8px 8px;box-shadow:4px 4px 0 var(--ink)}
.cm-logo{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--blue);color:var(--ink);border:2.5px solid var(--ink)}
.cm-logo svg{width:28px;height:28px}
.cm-word{font:800 25px/.9 var(--disp);letter-spacing:-.02em}
.cm-word span{color:var(--ink);background:var(--blue);padding:0 4px;border-radius:6px;margin-left:2px}
.cm-tag{font:italic 500 13px/1.3 var(--sans);color:#4A4644;margin-top:4px}
.cm-back{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:var(--card);border:2.5px solid var(--ink);border-radius:999px;box-shadow:2px 2px 0 var(--ink);font:800 14px var(--sans);color:var(--ink);text-decoration:none}
.cm-acts{display:flex;gap:8px;flex-wrap:wrap}
.cm-btn{border:2.5px solid var(--ink);background:var(--card);color:var(--ink);border-radius:12px;padding:8px 14px;font:800 13.5px var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:7px;box-shadow:2px 2px 0 var(--ink);text-decoration:none;transition:transform .08s,box-shadow .08s}
.cm-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.cm-btn:active{transform:translate(2px,2px);box-shadow:none}
.cm-btn.lime{background:var(--blue)}
.cm-btn.pink{background:var(--pink)}
.cm-btn.sm{padding:5px 10px;font-size:12.5px;border-radius:10px}
.cm-btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}

/* héros : jauge du jour + KPI */
.cm-hero{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:16px;margin-bottom:18px}
.cm-panel{background:var(--card);border:3px solid var(--ink);border-radius:18px;padding:16px 18px;position:relative;box-shadow:4px 4px 0 var(--ink)}
.cm-ring{display:flex;align-items:center;gap:18px;background:var(--blue)}
.cm-ring svg{width:124px;height:124px;flex:none;transform:rotate(-90deg)}
.cm-ring circle{fill:none;stroke-width:13}
.cm-ring .tr{stroke:rgba(255,255,255,.75)}
.cm-ring .pr{stroke:var(--ink);stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.cm-ring-n{font:400 64px/.8 var(--mono);font-variant-numeric:tabular-nums}
.cm-ring-n small{font-size:26px;color:#4A4644}
.cm-ring-l{font:800 12.5px/1.25 var(--sans);text-transform:uppercase;letter-spacing:.02em;margin-top:6px}
.cm-ring-l b{font-weight:800}
.cm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px}
.cm-kpi{background:var(--card);border:2.5px solid var(--ink);border-radius:14px;padding:10px 12px;box-shadow:2px 2px 0 var(--ink);min-width:0}
.cm-kpi b{display:block;font:400 40px/.85 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.cm-kpi span{display:block;font:800 11.5px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
.cm-kpi i{display:block;font:500 11.5px/1.3 var(--sans);font-style:normal;color:#4A4644;margin-top:2px}
.cm-kpi.l{background:var(--blue)}.cm-kpi.p{background:var(--pink)}.cm-kpi.c{background:var(--cyan)}.cm-kpi.a{background:var(--amber)}

/* entonnoir */
.cm-funnel{display:flex;gap:8px;align-items:stretch;margin:4px 0 0}
.cm-step{flex:1;min-width:0;background:var(--paper,#F6F0E2);border:2px solid var(--ink);border-radius:12px;padding:8px 10px 12px;position:relative;overflow:hidden}
.cm-step b{font:400 32px/.9 var(--mono)}
.cm-step span{display:block;font:800 10.5px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.cm-step .bar{position:absolute;left:0;bottom:0;height:6px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);border-radius:0 6px 0 0;background:var(--c,var(--blue))}

/* graphique 30 jours + villes */
.cm-row2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:18px}
.cm-h{font:800 20px var(--disp);margin:0 0 12px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cm-h small{font:500 12px var(--sans);color:#4A4644}
.cm-chart{display:flex;align-items:flex-end;gap:3px;height:140px;padding-top:8px;border-bottom:2.5px solid var(--ink)}
.cm-chart .d{flex:1;display:flex;flex-direction:column-reverse;gap:2px;min-width:0;position:relative;height:100%}
.cm-chart .s{background:var(--blue);border:1.5px solid var(--ink);border-bottom:0;border-radius:4px 4px 0 0}
.cm-chart .r{background:var(--pink);border:1.5px solid var(--ink);border-radius:4px}
.cm-chart .d.today .s{background:var(--blue2)}
.cm-chart .d:hover::after{content:attr(data-t);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--card);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font:700 11.5px var(--sans);padding:4px 8px;border-radius:8px;z-index:2}
.cm-leg{display:flex;gap:14px;font:700 12px var(--sans);color:#4A4644;margin-top:10px;flex-wrap:wrap}
.cm-leg i{display:inline-block;width:12px;height:12px;border-radius:4px;border:1.5px solid var(--ink);margin-right:5px;vertical-align:-2px}
.cm-tbl{width:100%;border-collapse:collapse;font:600 13px var(--sans)}
.cm-tbl th{text-align:left;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:0 6px 8px 0;border-bottom:2.5px solid var(--ink)}
.cm-tbl td{padding:6px 6px 6px 0;border-top:1.5px dashed rgba(32,31,32,.25)}
.cm-tbl td:not(:first-child),.cm-tbl th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}

/* onglets & filtres */
.cm-ctrl{position:sticky;top:0;z-index:20;background:var(--paper,#F6F0E2);margin:0 -6px;padding:10px 6px;border-bottom:2.5px solid var(--ink)}
.cm-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 4px 6px 2px}
.cm-tabs::-webkit-scrollbar{display:none}
.cm-tab{flex:none;border:2.5px solid var(--ink);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 13px;font:800 13px var(--sans);cursor:pointer;display:flex;align-items:center;gap:7px;box-shadow:2px 2px 0 var(--ink)}
.cm-tab small{font:400 18px/.8 var(--mono);background:var(--paper,#F6F0E2);border:1.5px solid var(--ink);border-radius:99px;padding:2px 7px}
.cm-tab[aria-pressed="true"]{background:var(--blue)}
.cm-tab[aria-pressed="true"] small{background:var(--card)}
.cm-filt{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.cm-in{background:var(--card);border:2.5px solid var(--ink);color:var(--ink);border-radius:12px;padding:9px 12px;font:500 14px var(--sans);min-width:0}
.cm-in:focus{outline:3px solid var(--blue2);outline-offset:1px}
.cm-filt .cm-in[type=search]{flex:1 1 240px}
.cm-n{font:700 12.5px var(--sans);color:#4A4644;align-self:center}

/* fiches */
.cm-list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.cm-card{--c:#C9C2B8;background:var(--card);border:3px solid var(--ink);border-radius:16px;padding:14px 14px 12px 20px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:9px;box-shadow:4px 4px 0 var(--ink)}
.cm-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--c);border-right:2.5px solid var(--ink)}
.cm-card.flash{animation:cmflash 1.2s ease}
@keyframes cmflash{0%{box-shadow:0 0 0 4px var(--blue2)}100%{box-shadow:4px 4px 0 var(--ink)}}
.cm-c1{display:flex;align-items:flex-start;gap:10px}
.cm-nm{flex:1;min-width:0}
.cm-nm b{display:block;font:800 17px/1.2 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-nm span{display:block;font:500 12.5px var(--sans);color:#4A4644;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-st{flex:none;font:800 11px var(--sans);text-transform:uppercase;letter-spacing:.05em;padding:4px 9px;border-radius:99px;background:var(--c);color:var(--ink);border:2px solid var(--ink)}
.cm-mail{display:flex;align-items:center;gap:8px}
.cm-mail input{flex:1;min-width:0;background:var(--paper,#F6F0E2);border:2px dashed var(--ink);border-radius:10px;padding:7px 10px;color:var(--ink);font:500 13.5px var(--sans)}
.cm-mail input::placeholder{color:#857E76}
.cm-mail input:focus{outline:none;border-style:solid;background:var(--card)}
.cm-src{flex:none;font:800 10px var(--sans);text-transform:uppercase;border:2px solid var(--ink);background:var(--paper,#F6F0E2);border-radius:7px;padding:2px 6px}
.cm-chips{display:flex;gap:6px;flex-wrap:wrap}
.cm-chip{font:700 11.5px var(--sans);color:var(--ink);background:var(--paper,#F6F0E2);border:2px solid var(--ink);border-radius:8px;padding:2px 7px;text-decoration:none;white-space:nowrap}
.cm-chip.call{background:#FFD654}
.cm-chip.fb{background:var(--cyan)}
a.cm-chip:hover{background:var(--card)}
.cm-act{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:2px}
.cm-act select{background:var(--card);border:2px solid var(--ink);color:var(--ink);border-radius:10px;padding:5px 8px;font:700 12.5px var(--sans)}
.cm-hist{list-style:none;margin:0;padding:8px 0 0;border-top:2px dashed rgba(32,31,32,.3);display:flex;flex-direction:column;gap:4px;font:500 12px var(--sans);color:#4A4644}
.cm-hist li b{color:var(--ink);font-weight:800}
.cm-hist li.in b{color:#c2185b}
.cm-empty{text-align:center;padding:36px 16px;font:600 14px var(--sans);background:var(--card);border:2.5px dashed var(--ink);border-radius:16px;margin-top:16px}
.cm-more{display:flex;margin:18px auto 0}

/* fenêtres (modèle de mail, réglages) */
.cm-dlg{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(32,31,32,.45)}
.cm-dlg[hidden]{display:none}
.cm-dlg-in{font-family:var(--sans);width:min(680px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--card);border:3px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);padding:20px;color:var(--ink)}
.cm-dlg h3{margin:0 0 6px;font:800 22px var(--disp)}
.cm-dlg p.hint{margin:0 0 14px;color:#4A4644;font:500 13px/1.5 var(--sans)}
.cm-dlg label{display:block;font:800 11px var(--sans);text-transform:uppercase;letter-spacing:.1em;margin:12px 0 6px}
.cm-dlg input,.cm-dlg textarea{width:100%;background:var(--paper,#F6F0E2);border:2.5px solid var(--ink);border-radius:12px;color:var(--ink);padding:10px 12px;font:500 14px/1.55 var(--sans)}
.cm-dlg textarea{min-height:260px;resize:vertical}
.cm-dlg .row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.cm-pre{white-space:pre-wrap;background:var(--paper,#F6F0E2);border:2px solid var(--ink);border-radius:12px;padding:12px;font:500 13.5px/1.55 var(--sans);max-height:300px;overflow:auto}

.cm-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:120;background:var(--blue);color:var(--ink);font:800 14px var(--sans);padding:10px 16px;border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink)}
.cm-toast[hidden]{display:none}

@media (max-width:900px){
  .cm-hero,.cm-row2{grid-template-columns:1fr}
  .cm-funnel{flex-wrap:wrap}.cm-step{flex:1 1 30%}
  .cm-list{grid-template-columns:1fr}
}
@media (max-width:480px){ .cm{padding-top:64px} .cm-ring svg{width:100px;height:100px} .cm-ring-n{font-size:52px} .modesw button{padding:6px 10px;font-size:12px} }
@media (prefers-reduced-motion:reduce){ .cm-ring .pr{transition:none} .cm-card.flash{animation:none} }

/* ===== Messages préparés (qualité > volume) ===== */
.cm-cib{margin-bottom:18px}
.cm-cibl{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 18px}
.cm-cb{display:grid;grid-template-columns:minmax(0,1fr) 90px 48px 40px;align-items:center;gap:8px;font:700 12.5px var(--sans)}
.cm-cb span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-cb i{height:10px;border-radius:6px;background:var(--blue);border:1.5px solid var(--ink)}
.cm-cb b{text-align:right}.cm-cb em{font-style:normal;text-align:right;color:#1d5fbf}
.cm-cb.zero span,.cm-cb.zero b,.cm-cb.zero em{color:#857E76}.cm-cb.zero i{background:var(--red);width:6px!important}
.cm-note{grid-column:1/-1;margin:8px 0 0;font:500 12px/1.5 var(--sans);color:#4A4644}
.cm-list:has(.cm-draft){grid-template-columns:1fr}
.cm-draft{padding:18px 18px 14px 24px;gap:12px}
.cm-why{margin:0;font:500 13.5px/1.5 var(--sans);color:#4A4644}
.cm-why b{display:inline-block;margin-right:8px;font:800 10.5px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);background:var(--blue);border:1.5px solid var(--ink);border-radius:6px;padding:0 5px}
.cm-why.tone b{background:var(--pink)}
.cm-chip.demo{background:var(--blue);font-weight:800}
.cm-dr{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px}
.cm-drc{display:flex;flex-direction:column;gap:8px;background:var(--paper,#F6F0E2);border:2.5px solid var(--ink);border-radius:14px;padding:12px}
.cm-drh{font:800 14px var(--sans);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.cm-drh span{font:500 12px var(--sans);color:#4A4644}
.cm-drc input,.cm-drc textarea{width:100%;background:var(--card);border:2px solid var(--ink);color:var(--ink);border-radius:10px;padding:9px 11px;font:500 14px/1.5 var(--sans);resize:vertical}
.cm-drc input:focus,.cm-drc textarea:focus{outline:3px solid var(--blue2);outline-offset:1px}
.cm-act.end{justify-content:flex-end}
.cm-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.cm-sw{display:flex;align-items:center;gap:8px;margin-top:12px}
@media (max-width:760px){ .cm-dr{grid-template-columns:1fr} .cm-cb{grid-template-columns:minmax(0,1fr) 60px 44px 36px} }
.cm [hidden],#mailApp [hidden]{display:none!important}
.crbox .sbtn.on{background:#dc2626;color:#fff;border-color:#dc2626}
.modesw button{white-space:nowrap}
.cm-chart .s[style*="height:0%"]{border:0}