/* IBM Plex (IBM Corp.), SIL Open Font License 1.1 — mêmes polices que les outils. */
@font-face{font-family:"IBM Plex Sans";font-weight:400 600;font-display:swap;src:url(fonts/plex-sans.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:600;font-display:swap;src:url(fonts/plex-sans-condensed-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2")}

/* Charte : noir et rouge du logo EPTM. Un seul endroit à modifier pour changer l'identité. */
:root{
  --red:#e30613; --red-ink:#c10510; --black:#000;
  --bg:#f4f5f6; --panel:#fff; --ink:#111518; --ink2:#454e55; --muted:#5f6a72;
  --line:rgba(17,21,24,.14); --grid:#e3e7ea; --focus:#2a78d6;
  --th-bg:#eef1f3; --th-curve:#111518; --th-fill:rgba(227,6,19,.14);
  /* Repères de phases (câblage suisse), utilisables dans les vignettes */
  --L1:#8b5a2b; --L2:#111518; --L3:#8a949b; --N:#1f6fd1;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cond:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --roof:polygon(0 0,100% 0,100% 100%,0 100%);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --red:#ff3b47; --red-ink:#ff6a73;
  --bg:#0c1215; --panel:#141b20; --ink:#e8eef1; --ink2:#b4c0c7; --muted:#93a0a8;
  --line:rgba(232,238,241,.16); --grid:#27323a; --focus:#6fb0f5;
  --th-bg:#1a2329; --th-curve:#e8eef1; --th-fill:rgba(255,59,71,.2);
  --L1:#c98d55; --L2:#e8eef1; --L3:#9aa5ac; --N:#5aa2f5;
  color-scheme:dark;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);-webkit-text-size-adjust:100%}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

/* En-tête : bandeau noir, liseré rouge — écho du toit incliné du logo */
/* Fond blanc dans les deux thèmes : le logo a une partie noire, qui disparaît sur fond sombre */
.top{background:#fff;color:#111518;border-bottom:4px solid var(--red)}
.top-in{display:flex;align-items:center;gap:20px;padding-block:12px}
.logo{display:block;line-height:0}
/* Logo officiel (PNG du dashboard), recadré par CSS sur le rectangle utile : 2513×1203 px dans 3508×2481 */
.logo-img{display:block;height:46px;aspect-ratio:2513/1203;background:url(logo-eptm.png) 47.64% 51.88%/139.6% auto no-repeat}
.site-name{margin:0;font:600 18px/1 var(--cond);letter-spacing:.04em;text-transform:uppercase;padding-left:20px;border-left:1px solid rgba(17,21,24,.25)}

.hero{padding-block:44px 28px;max-width:720px}
h1{margin:0 0 10px;font:600 clamp(28px,5vw,42px)/1.08 var(--cond);letter-spacing:.005em;text-wrap:balance}
.hero p{margin:0;color:var(--ink2);font-size:16px;text-wrap:pretty}

.bar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-bottom:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.bar{row-gap:10px}
.grp{align-self:center;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:2px}
.chip{min-height:36px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:500 13px var(--sans);cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.search input{width:min(100%,280px);min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:14px var(--sans)}
.search{flex:1 1 220px;display:flex;justify-content:flex-end}

.grid{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.12);border-color:var(--ink2)}
.card[hidden]{display:none}
.card-link{display:flex;flex-direction:column;height:100%;text-decoration:none}
.thumb{position:relative;aspect-ratio:16/9;background:var(--th-bg);border-bottom:3px solid var(--red);clip-path:var(--roof)}
.thumb svg{display:block;width:100%;height:100%}
.th-grid path{stroke:var(--grid);stroke-width:1;fill:none}
.th-fill{fill:var(--th-fill)}
.th-curve{fill:none;stroke:var(--th-curve);stroke-width:3;stroke-linejoin:round}
.th-axis,.th-bw{stroke:var(--red);stroke-width:2;fill:none}
.th-dot{fill:var(--red)}
.th-none{display:grid;place-items:center;height:100%;font:600 56px var(--cond);color:var(--muted)}
.flag{position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:4px;background:var(--red);color:#fff;font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.06em}
.body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.meta{margin:0;display:flex;gap:10px;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.meta span+span::before{content:"·";margin-right:10px}
.card h2{margin:0;font:600 21px/1.15 var(--cond)}
.sum{margin:0;color:var(--ink2);font-size:14px;text-wrap:pretty}
.tags{list-style:none;margin:auto 0 0;padding:8px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tags li.fil{border-color:var(--red);color:var(--red-ink);font-weight:500}
.tags li{padding:1px 8px;border:1px solid var(--line);border-radius:4px;font:12px var(--mono);color:var(--ink2)}
.card:hover h2{color:var(--red-ink)}
.empty{text-align:center;color:var(--muted);padding:40px 0}
.foot{padding-block:40px 28px;color:var(--muted);font-size:13px}
.foot p{margin:0;border-top:1px solid var(--line);padding-top:16px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.card:hover{transform:none}}
@media (max-width:640px){.site-name{display:none}.search{justify-content:stretch}.search input{width:100%}.hero{padding-top:28px}}