/* to-do.yasder5.fr : même langage que le portfolio (noir, lime, Archivo + JetBrains Mono) */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/Archivo-100-900-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/Archivo-100-900-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/JetBrainsMono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/JetBrainsMono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --bg:#0a0a0a; --card:#101010; --ph:#141414; --ink:#f5f5f0; --lime:#d3fd50; --red:#ff5f5f; --amber:#ffcf4a;
  --ink-rgb:245,245,240; --lime-rgb:211,253,80;
  --mut:rgba(var(--ink-rgb),.55); --mut2:rgba(var(--ink-rgb),.35); --b1:rgba(var(--ink-rgb),.08); --b2:rgba(var(--ink-rgb),.14);
  --sans:'Archivo', system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace;
  --gut:clamp(20px, 4vw, 44px); color-scheme:dark;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f3f2ed; --card:#ffffff; --ph:#e7e6e0; --ink:#111111; --lime:#4a7300; --ink-rgb:17,17,17; --lime-rgb:74,115,0; --red:#c22a2a; --amber:#9a6b00; color-scheme:light; }
}
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); }
body { min-height:100vh; background:var(--bg); color:var(--ink); font:400 16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
::selection { background:var(--lime); color:var(--bg); }
.lime { color:var(--lime); }
.grain { position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
.kick { font:700 11.5px var(--mono); letter-spacing:.22em; color:var(--lime); }
.outline { color:transparent; -webkit-text-stroke:2px var(--lime); }
input, select { font:inherit; }
.field input { font:500 18px var(--mono); color:var(--ink); background:var(--card); border:1px solid var(--b2); border-radius:10px; padding:14px 16px; }
.field input:focus { outline:none; border-color:var(--lime); box-shadow:0 0 0 3px rgba(var(--lime-rgb),.18); }
.btn { align-self:flex-start; font:700 13px var(--mono); letter-spacing:.16em; color:var(--bg); background:var(--lime); padding:14px 22px; border-radius:99px; }
.login__err { min-height:1.2em; font:500 13px var(--mono); color:var(--red); }

.app { max-width:980px; margin:0 auto; padding:0 var(--gut) 80px; }
.top { display:flex; justify-content:space-between; align-items:center; padding:22px 0; border-bottom:1px solid var(--b1); font:700 13px var(--mono); letter-spacing:.06em; }
.top__sep { color:var(--mut2); }
.top__out { font:600 11px var(--mono); letter-spacing:.16em; color:var(--mut); border:1px solid var(--b2); padding:8px 14px; border-radius:99px; }
.top__out:hover { color:var(--lime); border-color:var(--lime); }
.hero { padding:48px 0 30px; }
.hero__title { margin-top:.3em; font:900 clamp(56px, 14vw, 130px)/.86 var(--sans); font-stretch:118%; letter-spacing:-.045em; }
.lead { margin-top:22px; max-width:640px; color:rgba(var(--ink-rgb),.8); font-size:17px; }
.hero__stats { display:flex; gap:28px; margin-top:28px; flex-wrap:wrap; }
.stat { display:flex; flex-direction:column; gap:2px; }
.stat b { font:800 34px/1 var(--sans); font-variant-numeric:tabular-nums; }
.stat span { font:700 10.5px var(--mono); letter-spacing:.2em; color:var(--mut); }
.stat:first-child b { color:var(--lime); }

.tabs { display:flex; gap:2px; border-bottom:1px solid var(--b1); overflow-x:auto; scrollbar-width:none; position:sticky; top:0; background:var(--bg); z-index:5; }
.tabs button { flex:none; font:700 11.5px var(--mono); letter-spacing:.16em; color:var(--mut); padding:14px 12px; position:relative; }
.tabs button::after { content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.tabs button[aria-selected="true"] { color:var(--ink); }
.tabs button[aria-selected="true"]::after { transform:none; }

.block { padding:34px 0 6px; border-bottom:1px solid var(--b1); }
.block:last-child { border-bottom:0; }
h2 { font:800 clamp(22px, 3.4vw, 30px)/1.15 var(--sans); letter-spacing:-.02em; margin-bottom:14px; }
h3 { font:800 18px var(--sans); margin-bottom:6px; }
.block p { margin-bottom:14px; color:rgba(var(--ink-rgb),.85); }
.hint { font-size:14.5px; color:var(--mut) !important; }
.steps { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.steps li { padding:12px 14px; background:var(--card); border:1px solid var(--b1); border-radius:10px; }
.steps b { color:var(--lime); }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin-bottom:16px; }
.kpi { background:var(--card); border:1px solid var(--b1); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:4px; }
.kpi b { font:800 28px/1 var(--sans); color:var(--lime); }
.kpi span { font:600 12px var(--mono); color:var(--mut); }
.split, .refs { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; margin-bottom:18px; }
.split > div, .refs > div { background:var(--card); border:1px solid var(--b1); border-radius:10px; padding:16px; }
.refs p { margin-bottom:6px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; margin-bottom:18px; }
.card { background:var(--card); border:1px solid var(--b2); border-radius:14px; padding:20px; }
.card--hi { border-color:var(--lime); }
.card h3 { font:900 40px/1 var(--sans); margin:10px 0 4px; }
.card__sub { font:600 12.5px var(--mono); color:var(--mut) !important; }
.card ul { padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:15px; }

.script { background:var(--card); border:1px solid var(--b1); border-radius:10px; margin-bottom:10px; padding:0 16px; }
div.script { padding:14px 16px; }
.script summary { cursor:pointer; padding:14px 0; font:700 16px var(--sans); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.script summary::after { content:'+'; font:700 18px var(--mono); color:var(--mut); transition:transform .3s; }
.script[open] summary::after { transform:rotate(45deg); color:var(--lime); }
.script summary::-webkit-details-marker { display:none; }
blockquote { position:relative; margin:4px 0 14px; padding:14px 16px 40px; border-left:2px solid var(--lime); background:var(--ph); border-radius:8px; font-size:16px; line-height:1.6; }
.copy { position:absolute; right:10px; bottom:8px; font:700 10px var(--mono); letter-spacing:.14em; color:var(--bg); background:var(--lime); padding:5px 10px; border-radius:99px; }

.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.filters input[type=search], .filters select { flex:1 1 180px; min-width:0; color:var(--ink); background:var(--card); border:1px solid var(--b2); border-radius:10px; padding:10px 12px; }
.chk { display:flex; align-items:center; gap:8px; font:600 13px var(--mono); color:var(--mut); }
.count { font:600 12px var(--mono); color:var(--mut) !important; }
.plist { display:flex; flex-direction:column; gap:8px; }
.p { background:var(--card); border:1px solid var(--b1); border-radius:10px; padding:12px 14px; display:grid; grid-template-columns:1fr auto; gap:6px 12px; }
.p__name { font:700 16px var(--sans); }
.p__meta { grid-column:1 / -1; font:500 12px var(--mono); color:var(--mut); display:flex; flex-wrap:wrap; gap:4px 12px; }
.p__meta a { color:var(--lime); text-decoration:none; }
.p__tel { font:700 13px var(--mono); color:var(--bg); background:var(--lime); padding:6px 12px; border-radius:99px; text-decoration:none; align-self:start; }
.p__edit { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }
.p__edit select, .p__edit input { color:var(--ink); background:var(--ph); border:1px solid var(--b2); border-radius:8px; padding:8px 10px; font-size:14px; }
.p__edit input { flex:1 1 200px; min-width:0; }
.p.is-signe { border-color:var(--lime); }
.p.is-non { opacity:.5; }
.more { margin:16px auto 0; display:block; font:700 12px var(--mono); letter-spacing:.16em; color:var(--lime); border:1px solid var(--lime); padding:12px 20px; border-radius:99px; }
.foot { margin-top:50px; font:500 12px var(--mono); color:var(--mut2); }
.toast { position:fixed; left:50%; bottom:26px; z-index:60; transform:translate(-50%, 220%); font:700 12px var(--mono); letter-spacing:.12em; color:var(--bg); background:var(--lime); padding:10px 16px; border-radius:99px; transition:transform .35s; pointer-events:none; }
.toast.is-on { transform:translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
.login { min-height:100vh; display:grid; place-items:center; padding:var(--gut); }
.login__box { width:min(420px, 100%); display:flex; flex-direction:column; gap:22px; }
.login__title { margin-top:.2em; font:900 clamp(56px, 16vw, 110px)/.88 var(--sans); font-stretch:115%; letter-spacing:-.04em; }
.field { display:flex; flex-direction:column; gap:8px; }
.field span { font:700 11px var(--mono); letter-spacing:.2em; color:var(--mut); }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible { outline:2px solid var(--lime); outline-offset:3px; border-radius:4px; }