@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Charte des sites Oxygen : Poppins, bleus Oxygen, fond clair « Air » (même base que skygravity.com) */
:root { --blue:#5797bb; --petrol:#326275; --ink:#1d2b33; --text:#33424c; --grey:#5c6670; --bg:#f4f7f9; --line:#dfe7ec; --wire:#c9dbe6; --live:#e8392b; --radius:22px; --shadow:0 30px 60px -36px rgba(18,32,43,.35); }
html[lang="fr"] [lang="en"], html[lang="en"] [lang="fr"] { display:none !important; }
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font:400 16px/1.65 Poppins, system-ui, sans-serif; color:var(--text); background:#fff; overflow-x:hidden; position:relative; }
a { color:inherit; text-decoration:none; }
img { display:block; }
ul { list-style:none; }
button, input { font:inherit; color:inherit; }
:focus-visible { outline:3px solid rgba(87,151,187,.55); outline-offset:3px; border-radius:6px; }
.wrap { width:min(1120px, 100% - 40px); margin-inline:auto; }
.kicker { font:700 13px/1.3 Poppins; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); }
h1, h2, h3 { color:var(--ink); font-weight:700; }
h2 { font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); line-height:1.25; letter-spacing:-.015em; margin-top:10px; }
.intro { color:var(--grey); margin-top:10px; max-width:60ch; }

.sky { position:absolute; left:0; right:0; top:0; height:820px; z-index:-1; overflow:hidden; -webkit-mask-image:linear-gradient(#000 72%, transparent); mask-image:linear-gradient(#000 72%, transparent);
  background:radial-gradient(900px 520px at 85% 8%, #dcebf4 0, transparent 70%), radial-gradient(700px 500px at 0% 100%, #eaf3f8 0, transparent 70%), linear-gradient(180deg, #f7fbfd, #eef5f9 85%, #fff); }
.sky::before { content:""; position:absolute; width:520px; height:520px; right:-120px; top:90px; border-radius:50%; border:1px solid rgba(87,151,187,.18); }

/* En-tête */
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; }
.brand { display:flex; align-items:center; gap:12px; font:700 1.35rem/1 Poppins; color:var(--ink); letter-spacing:-.02em; }
.brand img { width:38px; height:38px; }
.brand em { font-style:normal; color:var(--petrol); }
.lang { font-size:.88rem; color:var(--grey); }
.lang button { background:none; border:0; cursor:pointer; padding:4px 6px; color:var(--grey); border-radius:6px; }
.lang button[aria-pressed="true"] { color:var(--ink); font-weight:700; }
.lang button:hover { color:var(--petrol); }

/* Héros */
.hero { padding:34px 0 56px; text-align:center; }
.hero h1 { font-size:clamp(2.1rem, 1.3rem + 3.6vw, 3.9rem); line-height:1.1; letter-spacing:-.03em; margin-top:14px; }
.hero h1 em { font-style:normal; color:var(--petrol); }
.hero .lead { color:var(--grey); font-size:1.08rem; max-width:56ch; margin:16px auto 0; }

/* Fenêtre de navigateur : l'adresse « enlive.de/ + nom de l'événement » est le cœur de l'idée */
.browser { width:min(720px, 100%); margin:36px auto 0; background:#fff; border:1px solid var(--wire); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; text-align:left; }
.bar { display:flex; align-items:center; gap:10px; padding:12px 16px; background:#f1f6f9; border-bottom:1px solid var(--line); }
.dots { display:flex; gap:6px; flex:none; } .dots i { width:10px; height:10px; border-radius:50%; background:#d3dee6; }
.url { flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 16px; font:400 .98rem/1.2 Poppins; color:var(--grey); white-space:nowrap; overflow:hidden; }
.url b { color:var(--ink); font-weight:700; }
.url .slug { color:var(--petrol); font-weight:700; overflow:hidden; text-overflow:ellipsis; }
.url .cur { display:inline-block; width:2px; height:1.05em; background:var(--petrol); margin-left:1px; vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.stage { position:relative; aspect-ratio:16/8.2; background:linear-gradient(135deg, #326275, #1d3d4b); display:flex; align-items:center; justify-content:center; }
.stage .play { width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; }
.stage .play::after { content:""; border-style:solid; border-width:13px 0 13px 22px; border-color:transparent transparent transparent #fff; margin-left:6px; }
.badge { position:absolute; left:16px; top:14px; display:inline-flex; align-items:center; gap:8px; background:rgba(0,0,0,.35); color:#fff; font:700 .72rem/1 Poppins; letter-spacing:.14em; padding:7px 12px; border-radius:8px; }
.badge::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 rgba(232,57,43,.6); animation:pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 9px rgba(232,57,43,0); } 100% { box-shadow:0 0 0 0 rgba(232,57,43,0); } }

/* Accès à un live */
.go { width:min(720px, 100%); margin:26px auto 0; text-align:left; }
.go label { display:block; font-weight:700; color:var(--ink); margin-bottom:8px; }
.go .row { display:flex; gap:10px; flex-wrap:wrap; }
.go .field { flex:1 1 280px; display:flex; align-items:center; background:#fff; border:2px solid var(--wire); border-radius:12px; padding:0 16px; }
.go .field:focus-within { border-color:var(--blue); }
.go .field span { color:var(--grey); white-space:nowrap; }
.go input::placeholder { color:#9aa8b2; font-weight:400; }
.go input { flex:1; min-width:0; border:0; outline:0; padding:14px 0 14px 2px; background:none; font-weight:700; color:var(--petrol); }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:15px 28px; border-radius:12px; font:700 1rem/1 Poppins; border:0; cursor:pointer; color:#fff; background:linear-gradient(135deg, #5f9fc4, #326275); box-shadow:0 10px 24px -10px rgba(50,98,117,.7); transition:transform .2s, box-shadow .2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(50,98,117,.8); }
.go .err { color:#b3261e; font-size:.9rem; margin-top:8px; min-height:1.4em; }
.go .hint { color:var(--grey); font-size:.88rem; margin-top:2px; }

/* Aide */
.help { padding:8px 0 56px; }
.help-box { display:grid; grid-template-columns:1.3fr 1fr; gap:28px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.help-box h2 { font-size:1.3rem; margin-top:6px; }
.help-box ul { margin-top:12px; display:grid; gap:8px; font-size:.94rem; }
.help-box li { padding-left:16px; position:relative; }
.help-box li::before { content:""; position:absolute; left:0; top:.68em; width:6px; height:6px; border-radius:50%; background:var(--blue); }
.contact { align-self:center; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
.contact p { font-weight:700; color:var(--ink); }
.contact a { display:block; margin-top:8px; color:var(--petrol); font-weight:700; }
.contact a:hover { text-decoration:underline; }

/* Famille */
.family { padding:0 0 64px; }
.cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-top:28px; }
.card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:0 18px 40px -34px rgba(18,32,43,.4); transition:transform .25s, box-shadow .25s; }
.card:hover { transform:translateY(-4px); box-shadow:0 26px 46px -30px rgba(18,32,43,.45); }
.card .logo img { width:215px; max-width:100%; height:auto; }
.card p { margin-top:16px; color:var(--grey); font-size:.96rem; flex:1; }
.card .main { margin-top:18px; font-weight:700; color:var(--petrol); }
.card .main::after { content:" →"; }
.card .main:hover { text-decoration:underline; }
.links { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.9rem; }
.links a { color:var(--grey); }
.links a:hover { color:var(--petrol); text-decoration:underline; }

/* Pied de page */
footer { border-top:1px solid var(--line); background:var(--bg); }
.foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:22px 0; font-size:.86rem; color:var(--grey); }
.foot img { width:28px; height:28px; }
.foot .sp { margin-left:auto; }
.foot a:hover { color:var(--petrol); text-decoration:underline; }

@media (max-width:860px) {
  .cards { grid-template-columns:1fr; }
  .help-box { grid-template-columns:1fr; padding:24px; }
}
@media (max-width:560px) {
  .hero { padding-top:20px; }
  .url { font-size:.84rem; padding:7px 12px; } .dots { display:none; }
  .stage { aspect-ratio:16/9; }
  .go .row .btn { width:100%; }
  .foot .sp { margin-left:0; width:100%; }
}
@media (prefers-reduced-motion:reduce) { .url .cur, .badge::before { animation:none; } html { scroll-behavior:auto; } }

/* ---------- Pages secondaires : 404 et données personnelles ---------- */
.nf { padding:34px 0 80px; text-align:center; }
.nf .code { display:flex; align-items:center; justify-content:center; gap:.04em; font:700 clamp(5rem, 3rem + 10vw, 9rem)/1 Poppins; letter-spacing:-.04em; color:var(--petrol); }
.nf .code img { width:.78em; height:.78em; }
.nf h1 { font-size:clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); line-height:1.2; letter-spacing:-.02em; margin-top:12px; }
.nf .lead { color:var(--grey); max-width:54ch; margin:14px auto 0; }
.nf .go { margin-top:32px; }
.nf .more { margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; font-size:.95rem; }
.nf .more a { color:var(--petrol); font-weight:700; }
.nf .more a:hover { text-decoration:underline; }
.btn-line { color:var(--petrol); background:none; box-shadow:none; border:2px solid var(--petrol); padding:13px 26px; }
.btn-line:hover { background:rgba(50, 98, 117, .06); box-shadow:none; }

.legal { padding:20px 0 72px; }
.legal .doc { width:min(820px, 100%); margin-inline:auto; }
.legal h1 { font-size:clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); line-height:1.15; letter-spacing:-.02em; margin-top:10px; }
.legal .maj { color:var(--grey); font-size:.9rem; margin-top:8px; }
.legal .sum { margin-top:22px; background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:18px 22px; font-size:.96rem; }
.legal .sum strong { color:var(--ink); }
.legal h2 { font-size:1.28rem; margin-top:36px; letter-spacing:-.01em; }
.legal p, .legal ul { margin-top:12px; }
.legal ul { padding-left:20px; list-style:disc; }
.legal li { margin-top:6px; }
.legal li::marker { color:var(--blue); }
.legal a { color:var(--petrol); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.legal address { font-style:normal; margin-top:12px; background:#fff; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:0 12px 12px 0; padding:14px 18px; }
.legal .back { display:inline-block; margin-top:34px; }