/* Prospection W-Art Horizon : identité de l'association (or sur nuit, Cinzel pour la marque),
   interface sobre en Jost, et les emails présentés comme des lettres sur papier (Cormorant). */
:root{
  --bg:#0f1218; --panel:#161b24; --raise:#1e2531; --ink:#ece6d8; --muted:#9ea4ae; --line:#2a3241; --line-strong:#3a4456;
  --gold:#c9a961; --gold-strong:#e2c385; --gold-ink:#15110a; --gold-soft:rgba(201,169,97,.14);
  --blue:#93b2f2; --blue-soft:rgba(147,178,242,.14);
  --ok:#82c79d; --ok-soft:rgba(130,199,157,.15); --warn:#e9b266; --warn-soft:rgba(233,178,102,.15); --bad:#e88f8a; --bad-soft:rgba(232,143,138,.15);
  --paper:#fbfaf6; --paper-ink:#1c1e24; --paper-muted:#6c6a63; --paper-line:#e4ded1;
  --shadow:0 24px 60px -24px rgba(0,0,0,.65);
  --ui:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --brand:'Cinzel','Trajan Pro',Georgia,serif;
  --letter:'Cormorant Garamond',Garamond,Georgia,serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f2f4f7; --panel:#ffffff; --raise:#eef1f5; --ink:#161b25; --muted:#5a6472; --line:#dde2e9; --line-strong:#c6cdd7;
    --gold:#8a6a26; --gold-strong:#6f5419; --gold-ink:#ffffff; --gold-soft:rgba(138,106,38,.1);
    --blue:#2a4ea8; --blue-soft:rgba(42,78,168,.08);
    --ok:#1f7a46; --ok-soft:rgba(31,122,70,.1); --warn:#995a10; --warn-soft:rgba(153,90,16,.1); --bad:#a6322b; --bad-soft:rgba(166,50,43,.09);
    --shadow:0 24px 60px -28px rgba(20,26,38,.4);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f2f4f7; --panel:#ffffff; --raise:#eef1f5; --ink:#161b25; --muted:#5a6472; --line:#dde2e9; --line-strong:#c6cdd7;
  --gold:#8a6a26; --gold-strong:#6f5419; --gold-ink:#ffffff; --gold-soft:rgba(138,106,38,.1);
  --blue:#2a4ea8; --blue-soft:rgba(42,78,168,.08);
  --ok:#1f7a46; --ok-soft:rgba(31,122,70,.1); --warn:#995a10; --warn-soft:rgba(153,90,16,.1); --bad:#a6322b; --bad-soft:rgba(166,50,43,.09);
  --shadow:0 24px 60px -28px rgba(20,26,38,.4);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.5;min-height:100vh}
h1,h2,h3,p,ul,ol{margin:0}
h2{font-size:1.06rem;font-weight:600;line-height:1.3}
h3{font-size:.98rem;font-weight:600;line-height:1.3}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums lining-nums}
.muted{color:var(--muted)}
.small{font-size:.84rem}
.hint{font-size:.8rem;color:var(--muted)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Barre du haut et navigation */
.topbar{border-bottom:1px solid var(--line);background:var(--panel)}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink)}
.brand-name{font-family:var(--brand);font-weight:600;font-size:1.12rem;letter-spacing:.06em;color:var(--gold-strong)}
.brand-tool{font-size:.9rem;color:var(--muted)}
.who{display:flex;align-items:center;gap:10px;font-size:.88rem;flex-wrap:wrap;justify-content:flex-end}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--gold-soft);color:var(--gold-strong);display:grid;place-items:center;font-weight:600;font-size:.85rem;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.mailbox{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--bad);flex:none}
.dot.on{background:var(--ok)}
.nav{position:sticky;top:0;z-index:6;background:var(--bg);border-bottom:1px solid var(--line)}
.nav-row{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tab{font:inherit;font-size:.95rem;font-weight:500;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;padding:13px 14px 11px;cursor:pointer;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.tab .count{font-size:.78rem;color:var(--muted);margin-left:6px}
.main{padding-top:18px;padding-bottom:110px;display:grid;gap:16px}
#view{display:grid;gap:16px;min-width:0}
#view>*{min-width:0}
#banner{display:grid;gap:8px}
#banner:empty{display:none}

/* Éléments communs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:.86rem;font-weight:500;border:1px solid var(--line-strong);background:var(--raise);color:var(--ink);padding:.5rem .85rem;border-radius:5px;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:36px}
.btn:hover{border-color:var(--gold)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.btn.primary:hover{background:var(--gold-strong)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:var(--bad-soft);background:transparent}
.btn.danger.armed{background:var(--bad);color:var(--panel);border-color:var(--bad)}
.btn.small{padding:.25rem .6rem;font-size:.8rem;min-height:30px}
.btn.link{border-color:transparent;background:transparent;color:var(--blue);padding-inline:.2rem}
input[type=text],input[type=url],input[type=email],input[type=tel],input[type=number],input[type=search],select,textarea{font:inherit;font-size:.92rem;color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;padding:.5rem .65rem;width:100%;min-width:0;min-height:38px}
textarea{min-height:96px;resize:vertical;line-height:1.5}
.field{display:grid;gap:5px;min-width:0;align-content:start}
.field>label,.field>.label{font-size:.82rem;color:var(--muted)}
.form{display:grid;gap:12px}
@media (min-width:720px){.form.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form.two .full{grid-column:1/-1}}
.check{display:inline-flex;gap:8px;align-items:center;font-size:.9rem;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--gold)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.stack{display:grid;gap:12px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px;display:grid;gap:12px;min-width:0}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;font-size:.76rem;font-weight:500;padding:.14rem .55rem;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink);white-space:nowrap}
.chip.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.chip.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.chip.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.chip.blue{background:var(--blue-soft);border-color:transparent;color:var(--blue)}
.chip.gold{background:var(--gold-soft);border-color:transparent;color:var(--gold-strong)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.notice{border-left:3px solid var(--blue);background:var(--blue-soft);padding:10px 12px;font-size:.9rem;border-radius:0 6px 6px 0}
.notice.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.notice.bad{border-left-color:var(--bad);background:var(--bad-soft)}
.notice.ok{border-left-color:var(--ok);background:var(--ok-soft)}
.notice .btn{margin-top:8px}
.empty{border:1px dashed var(--line-strong);border-radius:8px;padding:28px 18px;text-align:center;color:var(--muted);display:grid;gap:8px;justify-items:center}
.empty b{color:var(--ink);font-weight:500}
.progress{height:6px;border-radius:3px;background:var(--raise);overflow:hidden;display:flex}
.progress span{background:var(--gold)}
.progress span.ok{background:var(--ok)}
.progress span.bad{background:var(--bad)}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{padding:.55rem .6rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;color:var(--muted);font-weight:500}
.table-scroll{overflow-x:auto}

/* Suivi : colonne des étapes + liste */
.split{display:grid;gap:16px}
@media (min-width:980px){.split{grid-template-columns:250px minmax(0,1fr);align-items:start}.split>.side{position:sticky;top:60px}}
.side{display:grid;gap:14px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden}
.seg button{font:inherit;font-size:.86rem;background:var(--panel);color:var(--muted);border:0;border-right:1px solid var(--line-strong);padding:.5rem .4rem;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--gold-soft);color:var(--ink);font-weight:600}
.stages{display:grid;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px}
.stage{display:flex;justify-content:space-between;align-items:center;gap:10px;font:inherit;font-size:.92rem;color:var(--ink);background:none;border:0;border-left:3px solid transparent;border-radius:4px;padding:.55rem .7rem;cursor:pointer;text-align:left}
.stage:hover{background:var(--raise)}
.stage[aria-pressed="true"]{border-left-color:var(--gold);background:var(--raise);font-weight:600}
.stage .num{color:var(--muted);font-weight:500}
.stage.due .num{color:var(--warn)}
@media (max-width:979px){
  .stages{display:flex;overflow-x:auto;scrollbar-width:none;padding:4px}
  .stage{flex:none;border-left:0;border-bottom:3px solid transparent;border-radius:4px 4px 0 0}
  .stage[aria-pressed="true"]{border-bottom-color:var(--gold)}
}
.toggles{display:grid;gap:8px;padding:2px 4px}
@media (max-width:979px){.toggles{display:flex;flex-wrap:wrap;gap:14px}}
.toolbar{display:grid;gap:8px}
@media (min-width:720px){.toolbar{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)) auto}}
.list{display:grid;gap:8px}
.item{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:grid;gap:8px;min-width:0}
@media (min-width:860px){.item{grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,1.2fr) auto;align-items:center;gap:14px}}
.item .who-line{display:grid;gap:2px;min-width:0}
.item .name{font-weight:600;overflow-wrap:anywhere;background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
.item .name:hover{color:var(--gold-strong);text-decoration:underline}
.item .sub{font-size:.84rem;color:var(--muted);overflow-wrap:anywhere}
.coords{display:grid;gap:2px;font-size:.88rem;min-width:0}
.coords a{overflow-wrap:anywhere;text-decoration:none}
.coords a:hover{text-decoration:underline}
.state{display:grid;gap:3px;font-size:.84rem;min-width:0}
.item .actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.item .actions select{width:auto;min-width:150px;font-size:.85rem;min-height:34px;padding:.3rem .5rem}
.more{display:flex;justify-content:center;padding-top:4px}

/* Feuille latérale (détail, formulaires) */
.overlay{position:fixed;inset:0;z-index:20;background:rgba(6,8,12,.6);display:flex;justify-content:flex-end}
.sheet{background:var(--bg);border-left:1px solid var(--line);width:min(620px,100%);height:100%;overflow-y:auto;padding:18px max(18px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) 18px;display:grid;gap:14px;align-content:start;box-shadow:var(--shadow)}
@media (max-width:640px){.overlay{align-items:flex-end}.sheet{height:auto;max-height:92vh;border-left:0;border-top:1px solid var(--line);border-radius:12px 12px 0 0}}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sheet-head h2{font-size:1.15rem}
.dl{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 12px;font-size:.9rem;margin:0}
.dl dt{color:var(--muted)}
.dl dd{margin:0;overflow-wrap:anywhere}
.timeline{list-style:none;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:.88rem}
.timeline li:first-child{border-top:0}
.timeline time{color:var(--muted);font-size:.8rem}
.greet-preview{font-family:var(--letter);font-size:1.08rem}

/* Envois : étapes d'une tranche et lettres */
.stepper{display:flex;gap:6px;flex-wrap:wrap;list-style:none;padding:0;counter-reset:s}
.stepper li{counter-increment:s;display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted);padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:999px}
.stepper li::before{content:counter(s);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--raise);font-size:.78rem;font-weight:600}
.stepper li.on{color:var(--ink);border-color:var(--gold)}
.stepper li.on::before{background:var(--gold);color:var(--gold-ink)}
.stepper li.done::before{background:var(--ok-soft);color:var(--ok);content:"✓"}
.letters{display:grid;gap:14px}
.letter{background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-line);border-radius:4px;padding:18px 20px;display:grid;gap:10px;box-shadow:0 1px 0 rgba(0,0,0,.04);min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){.letter{padding:14px 12px}}
.letter details summary{font-family:var(--ui);font-size:.82rem;color:var(--paper-muted);cursor:pointer}
.letter-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:var(--ui);font-size:.84rem;color:var(--paper-muted)}
.letter-meta b{color:var(--paper-ink);font-weight:600}
.letter label{font-family:var(--ui);font-size:.78rem;color:var(--paper-muted)}
.letter input[type=text],.letter textarea{background:#fff;color:var(--paper-ink);border-color:var(--paper-line)}
.letter .subject{font-family:var(--ui);font-weight:600}
.letter .greet{font-family:var(--letter);font-size:1.12rem}
.letter textarea.body{font-family:var(--letter);font-size:1.1rem;line-height:1.55;min-height:220px}
.letter .closing{font-family:var(--letter);font-size:1.02rem;white-space:pre-wrap;color:var(--paper-muted);overflow-wrap:anywhere;margin-top:8px}
.letter .closing a{color:#2a4ea8}
.letter .tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-family:var(--ui)}
.letter .btn{background:#fff;color:var(--paper-ink);border-color:var(--paper-line)}
.letter .btn:hover{border-color:#8a6a26}
.letter .btn.danger{color:#a6322b}
.letter .note{font-family:var(--ui);font-size:.84rem;padding:8px 10px;border-radius:4px;background:#fff6e6;color:#7a4a0c}
.letter.collapsed .full-only{display:none}
.letter-tag{font-family:var(--ui);font-size:.74rem;font-weight:600;padding:.1rem .5rem;border-radius:999px;background:#efe9da;color:#5f5440}
.letter-tag.ia{background:#e5ecfb;color:#26458f}
.letter-tag.manuel{background:#e6f2ea;color:#1f6b40}
.sendbar{position:fixed;left:0;right:0;bottom:0;z-index:8;background:var(--panel);border-top:1px solid var(--gold);box-shadow:var(--shadow);padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.sendbar .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:0}
.batch-row{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.batch-row:first-child{border-top:0}
@media (min-width:860px){.batch-row{grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,1.2fr) auto;align-items:center;gap:14px}}

/* Ciblage */
.niches{display:grid;gap:10px}
@media (min-width:720px){.niches{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.niches{grid-template-columns:repeat(3,minmax(0,1fr))}}
.niche{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;display:grid;gap:8px;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.niche:hover{border-color:var(--gold)}
.niche .figures{display:flex;gap:16px;font-size:.86rem;color:var(--muted)}
.niche .figures b{color:var(--ink);font-weight:600}
.search{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:6px}
.search:first-of-type{border-top:0;padding-top:0}
.search.paused{opacity:.65}
.criteria{margin:0;padding-left:1.1rem;display:grid;gap:2px;font-size:.86rem;color:var(--muted)}
.run{display:grid;gap:3px;padding:10px 0;border-top:1px solid var(--line);font-size:.88rem}
.run:first-child{border-top:0}

/* Écrans d'accueil (connexion, configuration) */
.welcome{max-width:560px;margin:40px auto;display:grid;gap:16px}
.welcome .panel{padding:24px}
.welcome h1{font-family:var(--brand);font-weight:600;font-size:1.5rem;letter-spacing:.04em;color:var(--gold-strong)}
.welcome ol{padding-left:1.2rem;display:grid;gap:6px}
.google{display:inline-flex;align-items:center;gap:10px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:.65rem 1rem;border-radius:6px;font-size:.88rem;z-index:30;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
.letter-font{font-family:var(--letter);font-size:1.06rem;line-height:1.55}
pre.letter{white-space:pre-wrap;font-family:var(--letter);font-size:1.06rem;line-height:1.45}