/* Charte Badaboum, reprise de badaboum.net (release 20261028).
   Titres : Syne 700/800. Texte : Outfit 300 à 900.
   Fond nuit violette, accents rose et orange pêche. */

@font-face { font-family: 'Syne'; font-weight: 700; font-display: block; src: url(../fonts/ceb080c99bbea3a866.woff2) format('woff2'); }
@font-face { font-family: 'Syne'; font-weight: 800; font-display: block; src: url(../fonts/e7f87d0c7a720251be.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 300; font-display: block; src: url(../fonts/a182bc91a92ce5f764.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 400; font-display: block; src: url(../fonts/3f704e45d6b67e8d11.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-display: block; src: url(../fonts/05b877abde46f80705.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: block; src: url(../fonts/f168ede1842dac926c.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-display: block; src: url(../fonts/7ed5c1c49c73b96567.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 800; font-display: block; src: url(../fonts/74f8084c5218c162c5.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 900; font-display: block; src: url(../fonts/1cb90fa84ee48248fd.woff2) format('woff2'); }

:root {
  --nuit: #07061a;
  --nuit-2: #0f0a2e;
  --encre: #1e0b4d;
  --violet-950: #2e1065;
  --pourpre: #3b0764;
  --violet-700: #6d28d9;
  --violet: #7c3aed;
  --mauve: #a855f7;
  --lilas: #a78bfa;
  --lilas-clair: #c4b5fd;
  --brume: #e9d5ff;
  --blanc-lilas: #f3e8ff;
  --rose: #ec4899;
  --rose-vif: #ff3d9a;
  --rose-pale: #fbcfe8;
  --orange: #fb923c;
  --peche: #fdba74;

  --degrade: linear-gradient(120deg, var(--pourpre) 0%, var(--violet-700) 38%, var(--rose) 74%, var(--orange) 100%);
  --degrade-accent: linear-gradient(90deg, var(--violet) 0%, var(--rose) 55%, var(--orange) 100%);
  --degrade-chaud: linear-gradient(90deg, var(--peche), var(--orange));
  --verre: rgba(30, 11, 77, 0.78);
  --verre-bord: rgba(196, 181, 253, 0.28);
  --ombre-neon: 0 0 24px rgba(168, 85, 247, 0.55), 0 0 64px rgba(236, 72, 153, 0.25);

  --titre: 'Syne', 'Outfit', sans-serif;
  --texte: 'Outfit', system-ui, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-boum: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Les pages OBS font toujours 1920x1080, fond transparent par défaut. */
html.obs, html.obs body {
  margin: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: transparent;
  font-family: var(--texte);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Accroche du site : "le tout à coup de Dieu." */
.accroche { font-family: var(--texte); font-weight: 300; letter-spacing: -0.01em; }
.accroche b {
  font-weight: 700;
  background: var(--degrade-chaud);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.texte-degrade {
  background: var(--degrade-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Grain léger façon site, sans image externe. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Fond animé des écrans plein cadre (halos qui dérivent). */
.fond-nuit {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 20% 10%, var(--violet-950) 0%, var(--nuit-2) 45%, var(--nuit) 100%);
}
.fond-nuit .halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.75;
  will-change: transform;
}
.fond-nuit .halo.h1 { width: 900px; height: 900px; left: -180px; top: -260px; background: radial-gradient(circle, var(--violet) 0%, transparent 65%); animation: derive1 22s ease-in-out infinite alternate; }
.fond-nuit .halo.h2 { width: 760px; height: 760px; right: -140px; top: 120px; background: radial-gradient(circle, var(--rose) 0%, transparent 62%); opacity: 0.55; animation: derive2 26s ease-in-out infinite alternate; }
.fond-nuit .halo.h3 { width: 700px; height: 700px; left: 520px; bottom: -380px; background: radial-gradient(circle, var(--orange) 0%, transparent 60%); opacity: 0.35; animation: derive3 30s ease-in-out infinite alternate; }

@keyframes derive1 { to { transform: translate(260px, 160px) scale(1.15); } }
@keyframes derive2 { to { transform: translate(-220px, 140px) scale(0.9); } }
@keyframes derive3 { to { transform: translate(-260px, -120px) scale(1.2); } }

/* Pastille "en direct" du site (point rose qui pulse). */
.point-live {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rose-vif);
  box-shadow: 0 0 0 0 rgba(255, 61, 154, 0.7);
  animation: pulse-live 1.6s ease-out infinite;
}
@keyframes pulse-live {
  0% { box-shadow: 0 0 0 0 rgba(255, 61, 154, 0.7); }
  70% { box-shadow: 0 0 0 14px rgba(255, 61, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 61, 154, 0); }
}

/* Repères de cadrage, visibles avec ?repere=1. */
html.repere body { background: repeating-conic-gradient(#2a2a3a 0 25%, #1c1c28 0 50%) 0 0 / 40px 40px; }
html.repere .zone-sure {
  position: absolute;
  inset: 54px 96px;
  border: 2px dashed rgba(253, 186, 116, 0.6);
  pointer-events: none;
  z-index: 999;
}