/* Habillage « Néon » (thème sombre seulement). « :root[data-theme="dark"] » = racine du thème sombre, voir app/skin.py. */
:root[data-theme="dark"]{
  --bg:#05080c; --bg2:#080d13; --card:#0a1118; --surface:#0b131b; --surface2:#080e14;
  --line:#12222a; --line2:#1d333b; --line3:#2f5560; --grid:#14252c;
  --txt:#e8f1f5; --txt2:#cfdbe2; --txt3:#b4c3cc; --mut:#9fb0bb; --faint:#7d8f9a;
  --foot-bg:#04070a; --tip:#0f1a22; --skel:#0f1a22;
  --glow:1.7;
}
:root[data-theme="dark"] .grid-bg{background:
   radial-gradient(1000px 560px at 80% -12%,color-mix(in srgb,var(--acc) 17%,transparent),transparent 62%),
   radial-gradient(700px 420px at -10% 8%,color-mix(in srgb,var(--acc2) 9%,transparent),transparent 60%),
   linear-gradient(color-mix(in srgb,var(--acc) 3%,transparent) 1px,transparent 1px) 0 0/40px 40px,
   linear-gradient(90deg,color-mix(in srgb,var(--acc) 3%,transparent) 1px,transparent 1px) 0 0/40px 40px}

/* en-tête : liens sans cadre, page courante soulignée en vert */
:root[data-theme="dark"] .top{border-bottom-color:color-mix(in srgb,var(--acc) 20%,transparent)}
:root[data-theme="dark"] .top-links a{border-color:transparent;border-radius:0;border-width:0 0 2px;color:var(--txt2)}
:root[data-theme="dark"] .top-links a:hover{border-color:transparent;color:var(--acc)}
:root[data-theme="dark"] .top-links a[aria-current=page]{color:var(--acc);border-color:var(--acc)}
:root[data-theme="dark"] .patch-pill,:root[data-theme="dark"] .pw-pill,:root[data-theme="dark"] .quiz-pill{border-radius:999px}
:root[data-theme="dark"] .patch-pill,:root[data-theme="dark"] .pw-pill,:root[data-theme="dark"] .quiz-pill{box-shadow:0 0 16px color-mix(in srgb,currentColor 22%,transparent)}
:root[data-theme="dark"] .live{color:var(--acc)}
:root[data-theme="dark"] .live .dot{background:var(--acc);animation:pulse-neon 1.6s infinite}
@keyframes pulse-neon{0%{box-shadow:0 0 8px var(--acc),0 0 0 0 color-mix(in srgb,var(--acc) 70%,transparent)}100%{box-shadow:0 0 8px var(--acc),0 0 0 10px color-mix(in srgb,var(--acc) 0%,transparent)}}

/* à la une : grand titre, cadre vert lumineux */
:root[data-theme="dark"] .hero{border-color:color-mix(in srgb,var(--acc) 30%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 7%,var(--card)),var(--card));
  box-shadow:0 0 44px color-mix(in srgb,var(--acc) 9%,transparent);padding:28px 30px}
:root[data-theme="dark"] .hero h1{font-size:clamp(24px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em}
@media (max-width:640px){:root[data-theme="dark"] .hero{padding:20px 18px}}
:root[data-theme="dark"] .hero:empty{min-height:257px}
@media (max-width:1050px){:root[data-theme="dark"] .hero:empty{min-height:248px}}
@media (max-width:640px){:root[data-theme="dark"] .hero:empty{min-height:356px}}
:root[data-theme="dark"] .hero-dots button[aria-current]{background:var(--acc);box-shadow:0 0 10px var(--acc)}

/* cartes : teintées par catégorie, halo au survol */
:root[data-theme="dark"] .card{background:color-mix(in srgb,var(--c) 6%,var(--surface));border-color:color-mix(in srgb,var(--c) 30%,transparent);
  box-shadow:0 0 34px color-mix(in srgb,var(--c) 7%,transparent);transition:border-color .15s,transform .15s,box-shadow .15s}
:root[data-theme="dark"] .card:hover{border-color:color-mix(in srgb,var(--c) 60%,transparent);box-shadow:0 0 40px color-mix(in srgb,var(--c) 18%,transparent)}
:root[data-theme="dark"] .card.target{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 0 34px color-mix(in srgb,var(--acc) 20%,transparent)}
:root[data-theme="dark"] .ch{background:color-mix(in srgb,var(--c) 5%,transparent);border-bottom-color:color-mix(in srgb,var(--c) 16%,transparent)}

/* panneaux, tuiles, boutons */
/* via la variable, pas border-color : les panneaux qui ont leur propre couleur (« Ce qu'il faut faire », urgent) la gardent */
:root[data-theme="dark"] .panel{--line:color-mix(in srgb,var(--acc) 14%,#12222a)}
:root[data-theme="dark"] .tile:hover,:root[data-theme="dark"] .tile:focus-visible{background:color-mix(in srgb,var(--acc) 6%,var(--card))}
:root[data-theme="dark"] .btn.primary{box-shadow:0 0 26px color-mix(in srgb,var(--acc) 38%,transparent)}
:root[data-theme="dark"] .btn:not(.primary):hover{border-color:var(--acc);color:var(--acc)}
:root[data-theme="dark"] .pill.on{box-shadow:0 0 22px color-mix(in srgb,var(--acc) 45%,transparent)}
:root[data-theme="dark"] .site-foot{border-top-color:color-mix(in srgb,var(--acc) 18%,transparent)}

@media not (prefers-color-scheme: light){
/* Habillage « Néon » (thème sombre seulement). « :root:not([data-theme="light"]) » = racine du thème sombre, voir app/skin.py. */
:root:not([data-theme="light"]){
  --bg:#05080c; --bg2:#080d13; --card:#0a1118; --surface:#0b131b; --surface2:#080e14;
  --line:#12222a; --line2:#1d333b; --line3:#2f5560; --grid:#14252c;
  --txt:#e8f1f5; --txt2:#cfdbe2; --txt3:#b4c3cc; --mut:#9fb0bb; --faint:#7d8f9a;
  --foot-bg:#04070a; --tip:#0f1a22; --skel:#0f1a22;
  --glow:1.7;
}
:root:not([data-theme="light"]) .grid-bg{background:
   radial-gradient(1000px 560px at 80% -12%,color-mix(in srgb,var(--acc) 17%,transparent),transparent 62%),
   radial-gradient(700px 420px at -10% 8%,color-mix(in srgb,var(--acc2) 9%,transparent),transparent 60%),
   linear-gradient(color-mix(in srgb,var(--acc) 3%,transparent) 1px,transparent 1px) 0 0/40px 40px,
   linear-gradient(90deg,color-mix(in srgb,var(--acc) 3%,transparent) 1px,transparent 1px) 0 0/40px 40px}

/* en-tête : liens sans cadre, page courante soulignée en vert */
:root:not([data-theme="light"]) .top{border-bottom-color:color-mix(in srgb,var(--acc) 20%,transparent)}
:root:not([data-theme="light"]) .top-links a{border-color:transparent;border-radius:0;border-width:0 0 2px;color:var(--txt2)}
:root:not([data-theme="light"]) .top-links a:hover{border-color:transparent;color:var(--acc)}
:root:not([data-theme="light"]) .top-links a[aria-current=page]{color:var(--acc);border-color:var(--acc)}
:root:not([data-theme="light"]) .patch-pill,:root:not([data-theme="light"]) .pw-pill,:root:not([data-theme="light"]) .quiz-pill{border-radius:999px}
:root:not([data-theme="light"]) .patch-pill,:root:not([data-theme="light"]) .pw-pill,:root:not([data-theme="light"]) .quiz-pill{box-shadow:0 0 16px color-mix(in srgb,currentColor 22%,transparent)}
:root:not([data-theme="light"]) .live{color:var(--acc)}
:root:not([data-theme="light"]) .live .dot{background:var(--acc);animation:pulse-neon 1.6s infinite}
@keyframes pulse-neon{0%{box-shadow:0 0 8px var(--acc),0 0 0 0 color-mix(in srgb,var(--acc) 70%,transparent)}100%{box-shadow:0 0 8px var(--acc),0 0 0 10px color-mix(in srgb,var(--acc) 0%,transparent)}}

/* à la une : grand titre, cadre vert lumineux */
:root:not([data-theme="light"]) .hero{border-color:color-mix(in srgb,var(--acc) 30%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 7%,var(--card)),var(--card));
  box-shadow:0 0 44px color-mix(in srgb,var(--acc) 9%,transparent);padding:28px 30px}
:root:not([data-theme="light"]) .hero h1{font-size:clamp(24px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em}
@media (max-width:640px){:root:not([data-theme="light"]) .hero{padding:20px 18px}}
:root:not([data-theme="light"]) .hero:empty{min-height:257px}
@media (max-width:1050px){:root:not([data-theme="light"]) .hero:empty{min-height:248px}}
@media (max-width:640px){:root:not([data-theme="light"]) .hero:empty{min-height:356px}}
:root:not([data-theme="light"]) .hero-dots button[aria-current]{background:var(--acc);box-shadow:0 0 10px var(--acc)}

/* cartes : teintées par catégorie, halo au survol */
:root:not([data-theme="light"]) .card{background:color-mix(in srgb,var(--c) 6%,var(--surface));border-color:color-mix(in srgb,var(--c) 30%,transparent);
  box-shadow:0 0 34px color-mix(in srgb,var(--c) 7%,transparent);transition:border-color .15s,transform .15s,box-shadow .15s}
:root:not([data-theme="light"]) .card:hover{border-color:color-mix(in srgb,var(--c) 60%,transparent);box-shadow:0 0 40px color-mix(in srgb,var(--c) 18%,transparent)}
:root:not([data-theme="light"]) .card.target{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 0 34px color-mix(in srgb,var(--acc) 20%,transparent)}
:root:not([data-theme="light"]) .ch{background:color-mix(in srgb,var(--c) 5%,transparent);border-bottom-color:color-mix(in srgb,var(--c) 16%,transparent)}

/* panneaux, tuiles, boutons */
/* via la variable, pas border-color : les panneaux qui ont leur propre couleur (« Ce qu'il faut faire », urgent) la gardent */
:root:not([data-theme="light"]) .panel{--line:color-mix(in srgb,var(--acc) 14%,#12222a)}
:root:not([data-theme="light"]) .tile:hover,:root:not([data-theme="light"]) .tile:focus-visible{background:color-mix(in srgb,var(--acc) 6%,var(--card))}
:root:not([data-theme="light"]) .btn.primary{box-shadow:0 0 26px color-mix(in srgb,var(--acc) 38%,transparent)}
:root:not([data-theme="light"]) .btn:not(.primary):hover{border-color:var(--acc);color:var(--acc)}
:root:not([data-theme="light"]) .pill.on{box-shadow:0 0 22px color-mix(in srgb,var(--acc) 45%,transparent)}
:root:not([data-theme="light"]) .site-foot{border-top-color:color-mix(in srgb,var(--acc) 18%,transparent)}

}