/*! Application — feuille de style unique, sans dépendance. Palette commune au site. */

:root {
  color-scheme: dark;
  --bg: #0b0b10;
  --bg-glow: radial-gradient(1100px 520px at 18% -8%, rgba(139,123,255,.16), transparent 62%),
             radial-gradient(900px 480px at 92% 4%, rgba(55,214,214,.10), transparent 60%);
  --surface: #131319;
  --surface-2: #1a1a22;
  --border: #272733;
  --border-strong: #3a3a4a;
  --text: #f3f3f7;
  --text-2: #a9a9b8;
  --muted: #838394;
  --accent: #8b7bff;
  --accent-ink: #0b0b10;
  --accent-soft: rgba(139,123,255,.15);
  --good: #3fb950;
  --warning: #d29922;
  --serious: #ec835a;
  --critical: #d03b3b;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(0,0,0,.34), 0 12px 32px rgba(0,0,0,.28);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1080px;
  /* Encres : la même couleur ne peut pas servir à la fois de fond et de texte.
     Ces variantes-ci sont calibrées pour être LUES sur le fond du thème, et
     atteignent toutes 4,6:1 au pire cas mesuré (texte sur pastille teintée).
     Les jetons sans suffixe restent réservés aux fonds et aux bordures. */
  --good-ink: #3fb950;
  --warning-ink: #d29922;
  --serious-ink: #ec835a;
  --critical-ink: #dc6f6f;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f4;
  --bg-glow: radial-gradient(1000px 480px at 15% -10%, rgba(91,70,229,.10), transparent 60%);
  --surface: #ffffff;
  --surface-2: #f4f4f1;
  --border: #e3e3dd;
  --border-strong: #cfcfc6;
  --text: #16161a;
  --text-2: #4a4a55;
  --muted: #6d6d79;
  --accent: #5b46e5;
  --accent-ink: #ffffff;
  --accent-soft: rgba(91,70,229,.10);
  --good: #0ca30c;
  --shadow: 0 1px 2px rgba(20,20,30,.06), 0 10px 26px rgba(20,20,30,.08);
  --good-ink: #277231;
  --warning-ink: #815e15;
  --serious-ink: #ac3f14;
  --critical-ink: #b82c2c;
}


/* Texte grossi : un lecteur qui double la taille des caractères ne rétrécit
   pas sa fenêtre. Les seuils en pixels ne se déclenchent donc pas, et tout ce
   qui ne sait ni couper un mot ni passer à la ligne sort de l'écran. */
h1, h2, h3, h4, h5, h6, p, li, td, th, summary, label, dt, dd, figcaption,
.lede, .tag, .etiq, .verdict, .brand-text, .card, .card-top {
  overflow-wrap: break-word;
}
/* Césure. Là où le navigateur embarque un dictionnaire pour la langue
   déclarée par l'attribut lang, il coupe aux syllabes avec un trait d'union
   — « anonyme- / ment » au lieu de « anonymem / ent ». Là où il n'en a pas,
   cette ligne ne fait rien : vérifié, le Chromium de nos contrôles n'a pas
   de dictionnaire français et ne coupe rien de lui-même.

   C'est donc un bonus, pas une garantie. Ce qui est garanti, et mesuré, c'est
   la règle du dessus : overflow-wrap empêche le débordement dans tous les
   cas, avec ou sans dictionnaire. */
h1, h2, h3, .lede, p, li {
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* Ni dans du code, ni dans un champ : une césure y changerait le sens. */
code, pre, kbd, samp, input, textarea, .mono, [class*="mono"] {
  -webkit-hyphens: none;
  hyphens: none;
}
.card-top { flex-wrap: wrap; }
.card-top > * { min-width: 0; }
.tag { max-width: 100%; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --bg: #f7f7f4; --surface: #ffffff; --surface-2: #f4f4f1;
    --border: #e3e3dd; --border-strong: #cfcfc6;
    --text: #16161a; --text-2: #4a4a55; --muted: #6d6d79;
    --accent: #5b46e5; --accent-ink: #fff; --accent-soft: rgba(91,70,229,.10); --good: #0ca30c;
    --bg-glow: radial-gradient(1000px 480px at 15% -10%, rgba(91,70,229,.10), transparent 60%);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* L'attribut hidden doit toujours l'emporter sur un display: posé par une
   classe. Sans cette règle, une section marquée hidden reste visible dès
   qu'une classe lui donne display: grid ou flex. */
[hidden] { display: none !important; }

body {
  background: var(--bg-glow), var(--bg);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main, .site-header, .site-footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 10;
  background: var(--accent); color: var(--accent-ink); padding: 9px 14px; border-radius: 8px;
}
.skip-link:focus { left: 16px; }

:where(a, button):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

/* ------------------------------------------------------------------ header */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 18px; padding-bottom: 18px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit;
  min-width: 0;
}
.brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent);
}
.brand-text strong { display: block; font-size: 1.02rem; letter-spacing: -.01em; }
.brand-text small { display: block; color: var(--muted); font-size: .78rem; }

.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
}
.icon-btn:hover { border-color: var(--border-strong); }
.icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: none; }
:root[data-theme="light"] .icon-moon { display: block; }

/* -------------------------------------------------------------------- hero */
.hero { padding: 40px 0 34px; max-width: 46rem; }
.hero h1 { font-size: clamp(1.75rem, 4.6vw, 2.7rem); line-height: 1.14; letter-spacing: -.022em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.lede { color: var(--text-2); margin-top: 16px; font-size: 1.02rem; max-width: 60ch; }
.pledge {
  margin-top: 20px; padding: 13px 16px; font-size: .9rem; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--good); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pledge b { color: var(--text); }


/* ------------------------------------------------------------------ titres */
h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); letter-spacing: -.015em; }

/* ------------------------------------------------------------------ footer */
.site-footer {
  border-top: 1px solid var(--border); margin-top: 64px;
  padding-top: 24px; padding-bottom: 32px;
  display: grid; gap: 6px; color: var(--text-2); font-size: .86rem;
}
.site-footer a { color: var(--accent); }
.muted { color: var(--muted); }

.btn {
  cursor: pointer; font-family: inherit; font-size: .9rem; font-weight: 600; white-space: nowrap;
  padding: 10px 20px; border-radius: var(--radius-sm);
  background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink);
}
.btn:hover { filter: brightness(1.08); }
.btn-ghost {
  cursor: pointer; font-family: inherit; font-size: .83rem; padding: 6px 13px;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 99px;
}
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text); }


/* ---------------------------------------------------------- explications */
.explain h2 { margin-top: 26px; }
.explain h2:first-child { margin-top: 0; }
.explain p { color: var(--text-2); margin-top: 12px; max-width: 68ch; font-size: .94rem; }
.explain b { color: var(--text); }

/* Les sections de contenu ajoutées après coup — « À lire ensuite », les
   sources, l'inscription — rendaient des puces et des liens par défaut du
   navigateur : soulignés, bleus, hors palette. Le haut de page était soigné,
   le bas ressemblait à un fichier texte. */
.explain ul { padding-left: 0; list-style: none; display: grid; gap: 9px; margin-top: 12px; }
.explain li {
  color: var(--text-2); font-size: .94rem; line-height: 1.65; max-width: 68ch;
  padding-left: 18px; position: relative;
}
.explain li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.explain a {
  color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.explain a:hover { text-decoration-thickness: 2px; }
.explain a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* --------------------------------------------------- propre à Application */
.explain { margin-top: 44px; }

.installer {
  margin-top: 8px; padding: 22px 24px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  display: grid; gap: 14px; max-width: 46rem;
}
.installer h2 { margin: 0; }
.installer p { color: var(--text-2); font-size: .94rem; max-width: 62ch; }
.installer .etat { color: var(--text); }
.installer .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.installer .btn:disabled { opacity: .6; cursor: default; filter: none; }
.hors-ligne { border-top: 1px solid var(--border); padding-top: 14px; display: grid; gap: 10px; }
.hors-ligne .compte { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.hors-ligne.is-complet .compte { color: var(--good-ink); }
.jauge { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.jauge span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.hors-ligne.is-complet .jauge span { background: var(--good); }

@media (max-width: 560px) {
  .hero { padding: 28px 0 24px; }
  .installer { padding: 18px; }
}