/* OCD Live — feuille de style partagée
   Concept : le studio. Fond blanc lumineux traversé d'un dégradé marron chaud,
   cartes en verre dépoli (glassmorphism), orange du logo, codes de la régie.
   Thème clair unique, volontairement : le site reste blanc sur tous les appareils. */
:root {
  --bg: #ffffff;
  --paper: rgba(255, 255, 255, .55);
  --line: rgba(110, 70, 40, .16);
  --ink: #1f1610;
  --muted: #6d5a4c;
  --brown: #8a5a3b;
  --brown-deep: #5e3a24;
  --glass: linear-gradient(140deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .46));
  --glass-solid: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .85);
  --glass-shadow: 0 10px 34px rgba(94, 58, 36, .13), 0 2px 6px rgba(94, 58, 36, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
  --blur: blur(20px) saturate(170%);
  --orange: #f36904;
  --orange-hover: #dc5d00;
  --orange-ink: #ffffff;
  --orange-soft: #fff1e6;
  --glow: #ffc56b;
  --live: #e3342f;
  --ok: #1d8a4b;
  --ok-soft: #e6f5ec;
  --warn: #a8660b;
  --warn-soft: #fdf3e2;
  --bad: #b93a32;
  --bad-soft: #fbeceb;
  --shadow: 0 1px 2px rgba(40, 20, 0, .06), 0 8px 24px rgba(40, 20, 0, .06);

  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #ffffff; color-scheme: light; }
body {
  margin: 0; background: transparent; color: var(--ink);
  font: 16px/1.55 var(--f-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  min-height: 100vh;
}
/* Dégradé marron sur fond blanc : calque fixe derrière toute la page, c'est lui qui rend le verre visible */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 92% 4%, rgba(138, 90, 59, .34), transparent 62%),
    radial-gradient(30rem 26rem at 4% 38%, rgba(243, 105, 4, .16), transparent 64%),
    radial-gradient(42rem 32rem at 62% 78%, rgba(94, 58, 36, .26), transparent 64%),
    radial-gradient(26rem 22rem at 18% 96%, rgba(196, 132, 84, .26), transparent 66%),
    linear-gradient(180deg, #ffffff 0%, #fffaf6 55%, #fbf3ec 100%);
}

/* Verre dépoli */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.7rem, 5.4vw, 2.6rem); }
h2 { font-size: clamp(1.25rem, 3.6vw, 1.6rem); }
h3 { font-size: 1.05rem; }
p { margin: 0; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.eyebrow { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }

/* ── En-tête ── */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  margin: 0 calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  background: rgba(255, 255, 255, .55);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 6px 24px rgba(94, 58, 36, .08);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
.topbar-in { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand img { height: 30px; width: auto; }
.brand b { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.topbar nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.topbar nav a { text-decoration: none; padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--muted); }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--ink); background: var(--paper); }

.wrap { max-width: 1040px; margin: 0 auto; padding-block: 28px 120px; }
.narrow { max-width: 760px; margin-inline: auto; }

/* ── Pastille « en direct » ── */
.onair {
  justify-self: start; width: fit-content;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-border); box-shadow: 0 4px 14px rgba(94, 58, 36, .1); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
}
.onair i { width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ── Boutons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, #ff7d1f, var(--orange)); color: var(--orange-ink); box-shadow: 0 6px 18px rgba(243, 105, 4, .32), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-primary:hover { background: var(--orange-hover); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: rgba(255, 255, 255, .6); border-color: var(--glass-border); color: var(--ink); box-shadow: 0 2px 10px rgba(94, 58, 36, .08); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.btn-ghost:hover { border-color: var(--brown); }
.btn-wa { background: #1fa855; color: #fff; }
.btn-wa:hover { background: #178a45; }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: .88rem; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--orange); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ── Carte d'Afrique lumineuse ── */
.africa { position: absolute; pointer-events: none; z-index: 0; }
.africa path { fill: rgba(255, 255, 255, .38); stroke: var(--glow); stroke-width: 1.1; stroke-linejoin: round; }
.africa { overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 176, 80, .9)) drop-shadow(0 0 18px rgba(255, 176, 80, .45)); }
.africa .halo { display: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }