/* m3u8.wiki — socle commun de la page publique, des CGV et de l'extrait. Un seul univers visuel : sombre, charbon, orange. */
:root {
  --bg: #121417; --bg2: #171a1e; --surface: #1d2126; --surface2: #242930; --ink: #ecedef; --muted: #9aa0a6; --rule: #2a2f35;
  --accent: #ff8a3d; --accent2: #f0742a; --accent-ink: #121417; --or: #d9b26a; --ok: #5cc48e; --bad: #f26d6d; --code: #171a1e;
  --font-titre: "Big Shoulders Display", "Source Sans 3", sans-serif; --font-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Literata", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; color-scheme: dark; }
body { margin: 0; }
a { color: var(--ink); }
h1, h2, .titre, .num { font-family: var(--font-titre); font-weight: 800; letter-spacing: 0.005em; line-height: 0.95; margin: 0; }
h1 { font-size: clamp(3rem, 8.5vw, 6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 18px; }
h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 6px; }
p { margin: 0 0 1em; max-width: 60ch; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.mono { font-family: var(--font-mono); }
.barre { position: sticky; top: 0; z-index: 10; background: rgba(18,20,23,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.barre .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marque b { font-family: var(--font-titre); font-weight: 800; font-size: 1.55rem; letter-spacing: 0.01em; }
.marque b i { font-style: normal; color: var(--accent); }
.liens { display: flex; gap: 22px; align-items: center; font-size: 0.92rem; }
.liens a { color: var(--muted); text-decoration: none; }
.liens a:hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink) !important; text-decoration: none; padding: 12px 20px; border-radius: 8px; font-weight: 600; font-size: 0.98rem; transition: background .15s, transform .15s; }
.btn:hover { background: var(--accent2); transform: translateY(-1px); }
.btn.ghost { background: rgba(255,255,255,.06); border: 1px solid var(--rule); color: var(--ink) !important; }
.btn.ghost:hover { background: rgba(255,255,255,.1); }
.btn.petit { padding: 8px 14px; font-size: 0.88rem; }
@media (max-width: 640px) { .liens .cache { display: none; } }
footer.pied { border-top: 1px solid var(--rule); padding-block: 28px 48px; color: var(--muted); font-size: 0.85rem; }
footer.pied .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
footer.pied a { color: var(--muted); }

/* Bandeau « site en préparation » — retirer ce bloc (et les .avis dans les pages) quand le service est actif */
.avis-prepa { background: #ffb020; color: #1a1204; font-family: var(--font-titre); font-weight: 800; text-align: center; padding: 14px 20px; font-size: clamp(1.05rem, 2.6vw, 1.5rem); letter-spacing: 0.01em; line-height: 1.15; border-bottom: 3px solid #1a1204; }
.avis-prepa small { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 0.8rem; letter-spacing: 0; margin-top: 4px; opacity: .85; }