/* Styles partagés par les articles. L'outil, lui, garde son CSS en ligne :
   il doit rester un fichier autonome qu'on peut enregistrer et ouvrir seul. */

:root {
  color-scheme: dark;
  --ink:#E8EDE9; --ink-2:#B7C3BC; --ink-muted:#7E8D86;
  --bg:#0D1917; --surface:#142523; --surface-2:#1B2C29; --border:#274642;
  --accent:#62B3AD; --accent-soft:#12312E; --accent-ink:#06201D;
  --good:#6BCB92; --good-bg:#123222;
  --warning:#E4AC4E; --warning-bg:#3A2C10;
  --critical:#E8897B; --critical-bg:#3C1913;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono','Courier New',monospace;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); }

.page { max-width:1100px; margin:0 auto; padding:0 1.25rem 4rem; }

.sticky {
  position:sticky; top:0; z-index:20; background:var(--bg);
  border-bottom:1px solid var(--border);
  margin:0 -1.25rem 2.5rem; padding:.7rem 1.25rem;
  display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap;
}
.sticky .brand {
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  color:var(--ink); text-decoration:none;
}
.sticky .brand:hover { color:var(--accent); }
.sticky .sep { color:var(--ink-muted); }
.sticky .retour { font-family:var(--font-mono); font-size:.85rem; color:var(--accent); text-decoration:none; }
.sticky .retour:hover { text-decoration:underline; }

/* ---------- corps de l'article ---------- */

article { max-width:68ch; margin:0 auto; }

.chapeau {
  font-family:var(--font-body); font-weight:700;
  font-size:clamp(.75rem,1.4vw,.85rem); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-muted); margin:0 0 .9rem;
}

article h1 {
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem,4.6vw,2.9rem); line-height:1.12;
  letter-spacing:-.015em; margin:0 0 1.1rem; color:var(--ink);
  text-wrap:balance;
}

.intro {
  font-size:clamp(1.02rem,1.9vw,1.15rem); line-height:1.6;
  color:var(--ink-2); margin:0 0 2.25rem;
}

article h2 {
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.25rem,2.6vw,1.55rem); line-height:1.25;
  margin:2.75rem 0 .9rem; color:var(--accent);
}

article p { font-size:1rem; line-height:1.72; color:var(--ink); margin:0 0 1.15rem; }
article p strong { color:var(--ink); font-weight:600; }
article ul { margin:0 0 1.15rem; padding-left:1.15rem; }
article li { font-size:1rem; line-height:1.72; margin-bottom:.5rem; }

article a { color:var(--accent); }
article a:hover { text-decoration:none; }

.chiffre { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* encadré de mise en avant */
.encadre {
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:12px;
  padding:1.15rem 1.35rem; margin:1.9rem 0;
}
.encadre p:last-child { margin-bottom:0; }
.encadre p { font-size:.96rem; color:var(--ink-2); }

/* appel vers l'outil */
.versOutil {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:1.6rem; margin:3rem 0 0;
  box-shadow:var(--shadow); text-align:center;
}
.versOutil h2 { margin:0 0 .6rem; color:var(--ink); }
.versOutil p { color:var(--ink-2); font-size:.96rem; max-width:52ch; margin:0 auto 1.3rem; }
.bouton {
  display:inline-block; background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:.7rem 1.5rem; border-radius:999px; text-decoration:none;
}
.bouton:hover { opacity:.9; }

.foot {
  max-width:68ch; margin:3rem auto 0; padding-top:1.5rem;
  border-top:1px solid var(--border);
  font-size:.82rem; color:var(--ink-muted); line-height:1.6;
}
.foot a { color:var(--ink-muted); }