/* Facteur — feuille de style */
:root{
  --paper:#FBFAF7;
  --surface:#FFFFFF;
  --ink:#1E242B;
  --ink-soft:#5A626C;
  --line:#E3E1DA;
  --accent:#C8A118;
  --accent-strong:#8F7208;
  --accent-wash:#FBF3D7;
  --ok:#2E7D4F;
  --ok-wash:#E3F2E9;
  --warn:#B4560E;
  --warn-wash:#FBEADB;
  --info:#2B5D8C;
  --info-wash:#E3EDF6;
  --code-bg:#F1EFE8;
  --danger:#A33030;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#15181C; --surface:#1D2126; --ink:#E8E6E0; --ink-soft:#9BA1A9;
    --line:#33383F; --accent:#E0BC3F; --accent-strong:#E0BC3F; --accent-wash:#2E2A18;
    --ok:#6FBF8F; --ok-wash:#1C2E23; --warn:#E09A5E; --warn-wash:#332416;
    --info:#7FAAD1; --info-wash:#1B2733; --code-bg:#23272D; --danger:#D97A7A;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:15px; line-height:1.55; min-height:100vh;
  display:flex; flex-direction:column;
}
a{color:var(--info); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif; line-height:1.15}
h1{font-size:1.6rem; font-weight:800; margin:0 0 16px}
h2{font-size:1.15rem; font-weight:600; margin:28px 0 10px}
code,.mono{font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:.86em}
code{background:var(--code-bg); padding:.1em .4em; border-radius:4px}

/* barre du haut */
.topbar{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:10px 22px;
}
.brand{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.25rem;
  color:var(--ink); text-decoration:none;
}
.brand::before{content:""; display:inline-block; width:.55em; height:.55em; border-radius:50%;
  background:var(--accent); margin-right:.4em; vertical-align:baseline}
.topbar nav{display:flex; gap:4px}
.topbar nav a{color:var(--ink-soft); padding:6px 12px; border-radius:7px; font-weight:500}
.topbar nav a:hover{text-decoration:none; background:var(--code-bg)}
.topbar nav a.active{background:var(--accent-wash); color:var(--accent-strong); font-weight:600}
.logout-form{margin-left:auto; display:flex; align-items:center; gap:12px}
.who{color:var(--ink-soft); font-size:.85rem}

.flash{padding:10px 22px; font-weight:500}
.flash.ok{background:var(--ok-wash); color:var(--ok)}
.flash.err{background:var(--warn-wash); color:var(--warn)}

.page{flex:1; width:100%; max-width:1180px; margin:0 auto; padding:22px}
.foot{color:var(--ink-soft); font-size:.8rem; text-align:center; padding:18px}

/* pastilles */
.pill{display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; padding:.15em .6em; border-radius:99px; white-space:nowrap}
.pill.ok{background:var(--ok-wash); color:var(--ok)}
.pill.warn{background:var(--warn-wash); color:var(--warn)}
.pill.info{background:var(--info-wash); color:var(--info)}
.pill.gold{background:var(--accent-wash); color:var(--accent-strong)}
.pill.neutral{background:var(--code-bg); color:var(--ink-soft)}

/* boutons & formulaires */
.btn{
  display:inline-block; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink); font:inherit; font-weight:600;
  padding:7px 16px; cursor:pointer;
}
.btn:hover{border-color:var(--accent-strong)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#1E242B}
.btn.primary:hover{filter:brightness(1.05)}
.btn.subtle{border-color:transparent; color:var(--ink-soft); font-weight:500; padding:5px 10px}
.btn.danger{color:var(--danger)}
.btn.small{padding:4px 10px; font-size:.85rem}
label{display:block; font-weight:600; font-size:.85rem; margin:14px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%; max-width:460px; font:inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:8px 10px;
}
textarea{max-width:100%; min-height:90px}
input:focus,select:focus,textarea:focus,.btn:focus{outline:2px solid var(--accent); outline-offset:1px}
.hint{font-size:.82rem; color:var(--ink-soft); margin:4px 0 0}
.formrow{display:flex; gap:16px; flex-wrap:wrap}
.formrow > div{flex:1 1 200px}

/* écran de tri */
.tri{display:flex; gap:20px; align-items:flex-start}
.sidebar{flex:0 0 230px; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.sidebar a{
  display:flex; justify-content:space-between; gap:8px; padding:9px 14px;
  color:var(--ink-soft); border-left:3px solid transparent;
}
.sidebar a:hover{text-decoration:none; background:var(--code-bg)}
.sidebar a.active{background:var(--accent-wash); color:var(--ink); font-weight:600; border-left-color:var(--accent)}
.sidebar .count{font-family:"Spline Sans Mono",monospace; font-size:.78rem; color:var(--accent-strong)}
.sidebar .sep{border-top:1px solid var(--line); margin:4px 0}
.maincol{flex:1; min-width:0}

.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.toolbar .spacer{flex:1}
.lastpoll{font-size:.8rem; color:var(--ink-soft)}

.maillist{background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.mailrow{
  display:flex; gap:12px; align-items:baseline; padding:10px 14px;
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.mailrow:last-child{border-bottom:none}
.mailrow:hover{background:var(--code-bg)}
.mailrow .from{font-weight:600; flex:0 0 170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mailrow .subject{flex:1 1 240px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mailrow .subject a{color:var(--ink)}
.mailrow .snippet{color:var(--ink-soft); font-size:.85rem}
.mailrow .date{color:var(--ink-soft); font-size:.82rem; font-variant-numeric:tabular-nums; margin-left:auto}
.empty{padding:36px; text-align:center; color:var(--ink-soft)}

/* fiche mail */
.mailhead{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-bottom:16px}
.mailhead h1{margin:0 0 6px; font-size:1.25rem}
.meta{display:flex; gap:16px; flex-wrap:wrap; color:var(--ink-soft); font-size:.88rem}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-bottom:16px}
.panel h2{margin-top:0}
.bodytext{white-space:pre-wrap; word-wrap:break-word; max-height:520px; overflow-y:auto;
  font-size:.92rem; background:var(--code-bg); border-radius:8px; padding:14px}
.analysis dl{display:grid; grid-template-columns:150px 1fr; gap:6px 14px; margin:0}
.analysis dt{color:var(--ink-soft); font-size:.85rem}
.analysis dd{margin:0}
.inline-form{display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap}

/* tableaux paramètres */
.tablewrap{overflow-x:auto}
table.list{border-collapse:collapse; width:100%; font-size:.9rem; background:var(--surface);
  border:1px solid var(--line); border-radius:10px}
table.list th{text-align:left; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); padding:9px 12px; border-bottom:2px solid var(--line)}
table.list td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
table.list tr:last-child td{border-bottom:none}

/* cartes paramètres */
.settings-grid{display:grid; gap:20px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px 22px}
.card h2{margin-top:0}

/* attente / spinner */
.spinner{display:inline-block; width:.85em; height:.85em; vertical-align:-.1em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:facteur-spin .7s linear infinite}
.spinner.big{width:1.3em; height:1.3em; border-width:3px; color:var(--accent-strong)}
@keyframes facteur-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spinner{animation-duration:1.6s}}
button:disabled{opacity:.65; cursor:wait}
#busy-overlay{position:fixed; inset:0; background:rgba(20,20,20,.35);
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter:blur(1.5px); display:flex; align-items:center; justify-content:center; z-index:50}
#busy-overlay[hidden]{display:none}
.busy-box{display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:18px 26px;
  font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.12)}

/* login */
.login-box{max-width:380px; margin:8vh auto 0; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:28px 30px}
.login-box h1{text-align:center}

@media (max-width:760px){
  .tri{flex-direction:column}
  .sidebar{flex:1 1 auto; width:100%}
  .mailrow .from{flex-basis:100%}
  .mailrow .date{margin-left:0}
  .analysis dl{grid-template-columns:1fr}
}