/* Laterna - site vitrine. Mêmes polices, mêmes couleurs et même verre que l'application. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, 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: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, 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: Outfit;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --night: #0c0a09;
  --ink: #0a0a0c;
  --surface: #121216;
  --surface-2: #17171b;
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.14);
  --text: #f5f5f4;
  --muted: rgb(255 255 255 / 0.68);
  --subtle: rgb(255 255 255 / 0.46);
  /* L'or est la lumière de la lanterne : rare, réservé au faisceau, aux points de lumière, à la
     progression et aux puces de mise en valeur. Boutons, sélection et focus restent blancs. */
  --gold: #fbbf24;
  --gold-deep: #f59e0b;
  --gold-light: #fde68a;
  --brand: #fbbf24;
  --beam: linear-gradient(100deg, #f59e0b, #fde68a);
  --radius: 20px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Outfit, var(--font-sans);
  --glass-fill:
    linear-gradient(160deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.03) 45%, rgb(255 255 255 / 0.07)),
    rgb(18 18 22 / 0.5);
  --glass-edge:
    inset 0 1px 1px rgb(255 255 255 / 0.3),
    inset 0 -1px 1px rgb(255 255 255 / 0.06),
    inset 0 0 0 1px rgb(255 255 255 / 0.1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
code, pre { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
}

.beam-text {
  background: var(--beam);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: background 0.18s, box-shadow 0.18s, color 0.18s;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: #fff; color: #0a0a0c; }
.btn-primary:hover { background: rgb(255 255 255 / 0.88); }
.btn-glass { background: var(--glass-fill); box-shadow: var(--glass-edge); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
.btn-glass:hover { background: rgb(255 255 255 / 0.12); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }

/* ---------- En-tête ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: 14px 0;
  transition: background 0.25s, box-shadow 0.25s;
}
.site-header.scrolled {
  background: rgb(10 10 12 / 0.72);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 1px 0 var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; }
.brand svg { width: 30px; height: 30px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: color 0.15s, background 0.15s; }
.nav a:hover { color: var(--text); background: rgb(255 255 255 / 0.06); }
@media (max-width: 860px) { .nav { display: none; } .site-header .btn { margin-left: auto; } }

/* ---------- Héros ---------- */
.hero {
  position: relative;
  overflow-x: clip;
  padding: 148px 0 40px;
  isolation: isolate;
}
.hero::before {
  /* Le halo de la lanterne */
  content: "";
  position: absolute;
  inset: -10% -20% auto;
  height: 900px;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 30% 20%, rgb(251 191 36 / 0.19), transparent 70%),
    radial-gradient(35% 45% at 75% 30%, rgb(245 158 11 / 0.12), transparent 70%);
  filter: blur(20px);
}
.hero-text { text-align: center; max-width: 860px; margin-inline: auto; }
.hero h1 { font-size: clamp(42px, 7.2vw, 84px); margin: 18px 0 22px; }
.hero .lead { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 680px; margin-inline: auto; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.hero-meta { margin-top: 18px; font-size: 13px; color: var(--subtle); }
.hero-meta span + span::before { content: "·"; margin: 0 10px; }

/* ---------- Maquettes ---------- */
.stage { position: relative; margin-top: 72px; perspective: 2000px; }
.beam-cone {
  position: absolute;
  left: 50%;
  top: -120px;
  width: 140%;
  height: 520px;
  transform: translateX(-50%);
  z-index: -1;
  background: conic-gradient(from 180deg at 50% 0%, transparent 155deg, rgb(251 191 36 / 0.15) 172deg, rgb(245 158 11 / 0.11) 188deg, transparent 205deg);
  filter: blur(30px);
  pointer-events: none;
}

.window {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #050507;
  box-shadow:
    0 0 0 1px var(--line-strong),
    0 40px 120px -20px rgb(0 0 0 / 0.8),
    0 0 80px -10px rgb(251 191 36 / 0.17);
  aspect-ratio: 16 / 9.4;
}
.window-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #101014; border-bottom: 1px solid var(--line); }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgb(255 255 255 / 0.14); }
.window-bar .url { margin: 0 auto; width: 34%; min-width: 0; white-space: nowrap; overflow: hidden; height: 20px; border-radius: 6px; background: rgb(255 255 255 / 0.06); display: grid; place-items: center; font-size: 11px; color: var(--subtle); }
.app { position: absolute; inset: 34px 0 0; display: flex; }

/* Le rail du cinéma : le logo seul en haut de l'axe, la pilule de verre centrée verticalement. */
.rail { position: absolute; left: 10px; top: 0; bottom: 0; width: 32px; z-index: 2; }
.rail .mark { position: absolute; top: 14px; left: 50%; width: 20px; height: 20px; transform: translateX(-50%); }
.rail-pill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 32px; padding: 3px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--glass-fill); box-shadow: var(--glass-edge);
  backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
}
.rail-pill span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: rgb(255 255 255 / 0.5); }
.rail-pill span.on { color: #fff; background: rgb(255 255 255 / 0.15); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.rail-pill svg { width: 14px; height: 14px; }

.screen { position: absolute; inset: 0; overflow: hidden; }
.backdrop {
  position: absolute;
  inset: 0 0 38%;
  background:
    radial-gradient(60% 80% at 72% 30%, rgb(245 158 11 / 0.3), transparent 60%),
    radial-gradient(50% 70% at 40% 60%, rgb(251 191 36 / 0.34), transparent 65%),
    radial-gradient(30% 40% at 85% 75%, rgb(251 146 60 / 0.25), transparent 70%),
    linear-gradient(180deg, #171310, #0b0a09);
}
.backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 5 7 / 0.92) 0%, rgb(5 5 7 / 0.35) 45%, transparent 70%), linear-gradient(0deg, #050507 0%, transparent 45%); }
.hero-ui { position: absolute; left: 9%; top: 15%; width: 34%; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.sk { border-radius: 6px; background: rgb(255 255 255 / 0.14); }
.sk.logo { height: 9%; min-height: 26px; width: 78%; border-radius: 8px; background: linear-gradient(90deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.55)); }
.sk.l { height: 7px; }
.hero-ui .tags { display: flex; gap: 6px; }
.hero-ui .tags .sk { height: 14px; width: 40px; border-radius: 4px; background: rgb(255 255 255 / 0.1); }
.hero-ui .actions { display: flex; gap: 8px; margin-top: 6px; }
.chip { height: 26px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; }
.chip svg { width: 11px; height: 11px; }
.chip.play { background: #fff; color: #0a0a0c; }
.chip.glass { background: rgb(255 255 255 / 0.14); box-shadow: var(--glass-edge); color: #fff; }
.dashes { position: absolute; left: 9%; top: 56%; display: flex; gap: 5px; z-index: 1; }
.dashes i { width: 16px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / 0.25); }
.dashes i:first-child { background: #fff; width: 26px; }

.rows { position: absolute; left: 64px; right: 0; top: 60%; display: flex; flex-direction: column; gap: 14px; z-index: 1; }
.row-label { width: 110px; height: 8px; margin-bottom: 8px; }
.posters { display: flex; gap: 8px; }
.poster { flex: none; width: calc((100% - 6 * 8px) / 6.6); aspect-ratio: 2 / 3; border-radius: 7px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.poster.wide { width: calc((100% - 4 * 8px) / 4.4); aspect-ratio: 16 / 9; }
.poster .progress { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / 0.25); overflow: hidden; }
.poster .progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 40%); background: var(--beam); border-radius: 3px; }
.p1 { background: linear-gradient(160deg, #3b2a6b, #120c24 70%); }
.p2 { background: linear-gradient(200deg, #0e4f6b, #071a24 70%); }
.p3 { background: linear-gradient(170deg, #6b3a2a, #1f0f0a 70%); }
.p4 { background: linear-gradient(150deg, #2a5a4a, #0a1a15 70%); }
.p5 { background: linear-gradient(190deg, #5a2a55, #170b16 70%); }
.p6 { background: linear-gradient(165deg, #4a4f6b, #10121c 70%); }
.p7 { background: linear-gradient(140deg, #6b5a2a, #1c170b 70%); }
.p8 { background: linear-gradient(210deg, #2a3f6b, #0b1122 70%); }
.poster::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 30%, rgb(255 255 255 / 0.12), transparent 70%); }

/* Téléphone */
.phone {
  position: absolute;
  right: -2%;
  bottom: -9%;
  width: 21%;
  min-width: 150px;
  aspect-ratio: 9 / 19.3;
  border-radius: 34px;
  padding: 7px;
  background: #1a1a1f;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 30px 80px -10px rgb(0 0 0 / 0.9);
  z-index: 3;
}
.phone .ph { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: #050507; }
.phone .island { position: absolute; top: 9px; left: 50%; width: 30%; height: 16px; border-radius: 10px; background: #000; transform: translateX(-50%); z-index: 4; }
.ph-hero { position: absolute; top: 9%; left: 50%; width: 64%; aspect-ratio: 2 / 3; transform: translateX(-50%); border-radius: 12px; box-shadow: 0 16px 40px rgb(0 0 0 / 0.6); }
.ph-hero.peek { width: 50%; top: 13%; opacity: 0.45; }
.ph-hero.peek.l { left: -12%; transform: none; }
.ph-hero.peek.r { left: auto; right: -12%; transform: none; }
.ph-glow { position: absolute; inset: 0 0 45%; background: radial-gradient(70% 60% at 50% 40%, rgb(251 191 36 / 0.27), transparent 70%); }
.ph-actions { position: absolute; top: 67%; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.ph-actions .chip { height: 22px; font-size: 9px; padding: 0 10px; }
.ph-row { position: absolute; left: 8%; right: 0; top: 76%; display: flex; gap: 6px; }
.ph-row .poster { width: 30%; border-radius: 6px; }
.ph-nav {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 3.5%;
  height: 40px;
  border-radius: 999px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--glass-fill);
  box-shadow: var(--glass-edge);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.ph-nav svg { width: 15px; height: 15px; color: rgb(255 255 255 / 0.55); }
.ph-nav .on { color: #fff; }

@media (max-width: 720px) {
  /* Sur un téléphone, la maquette du téléphone seule : la fenêtre de bureau y serait illisible. */
  .stage { margin-top: 48px; }
  .stage > .window { display: none; }
  .stage .phone { position: relative; right: auto; bottom: auto; margin: 0 auto; width: min(68%, 270px); }
}

/* ---------- Compatibilités ---------- */
.works {
  margin-top: 120px;
  text-align: center;
  color: var(--subtle);
  font-size: 13px;
}
.works ul { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.works li { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: rgb(255 255 255 / 0.55); }
.works li.req { color: #fff; }
.works li.req::after { content: "requis"; margin-left: 6px; font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand); vertical-align: 3px; }

/* ---------- Sections ---------- */
section { padding: 120px 0; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head h2 { font-size: clamp(32px, 4.6vw, 52px); margin: 14px 0 18px; }
.section-head p { color: var(--muted); font-size: 18px; }

/* Deux interfaces */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card {
  position: relative;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.015));
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 32px;
  overflow: hidden;
}
.duo .card { padding: 36px; min-height: 340px; display: flex; flex-direction: column; }
.duo .card h3 { font-size: 30px; margin: 18px 0 10px; }
.duo .card p { color: var(--muted); }
.duo .card ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.duo .card li { display: flex; gap: 10px; align-items: flex-start; color: rgb(255 255 255 / 0.82); font-size: 15px; }
.duo .card li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--brand); }
.addr { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.addr code { color: #fff; }
.duo .card.cinema::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgb(251 191 36 / 0.17), transparent 70%); }
.duo .card.gestion::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgb(245 158 11 / 0.13), transparent 70%); }
.roles { margin-top: 20px; padding: 20px 26px; display: flex; gap: 16px; align-items: center; color: var(--muted); font-size: 15px; }
.roles svg { width: 22px; height: 22px; flex: none; color: var(--brand); }
.roles strong { color: #fff; font-weight: 600; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

/* Grille de fonctionnalités */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { padding: 28px; transition: box-shadow 0.25s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.feature:hover { box-shadow: inset 0 0 0 1px var(--line-strong); transform: translateY(-2px); }
.icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, rgb(251 191 36 / 0.15), rgb(245 158 11 / 0.07));
  box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.2);
  margin-bottom: 20px;
}
.icon svg { width: 21px; height: 21px; color: #fde68a; }
.feature h3 { font-size: 19px; margin-bottom: 8px; letter-spacing: -0.01em; }
.feature p { color: var(--muted); font-size: 15px; }
.feature .q { display: inline-block; margin-top: 12px; font-size: 13px; color: rgb(255 255 255 / 0.8); background: rgb(255 255 255 / 0.06); padding: 4px 10px; border-radius: 8px; }
@media (max-width: 980px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

/* Lumen */
.lumen {
  position: relative;
  background:
    radial-gradient(60% 50% at 50% 0%, rgb(251 191 36 / 0.11), transparent 70%),
    var(--night);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.lumen .sun { width: 52px; height: 52px; color: #ffd27a; filter: drop-shadow(0 0 18px rgb(255 200 100 / 0.5)); margin: 0 auto 6px; }
.lumen-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lumen-more .card h3 { font-size: 19px; margin-bottom: 8px; }
.lumen-more .card p { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) { .lumen-more { grid-template-columns: 1fr; } }
.player-extras { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pill { font-size: 13px; padding: 7px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px var(--line); color: rgb(255 255 255 / 0.8); }

/* Téléphone et ordinateur */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.split .list { display: grid; gap: 22px; margin-top: 32px; }
.split .item { display: flex; gap: 16px; }
.split .item .icon { flex: none; margin: 0; }
.split .item h3 { font-size: 18px; margin-bottom: 4px; }
.split .item p { color: var(--muted); font-size: 15px; }
.devices { position: relative; height: 520px; }
.devices .phone { position: absolute; width: 230px; min-width: 0; bottom: auto; }
.devices .phone.a { left: 6%; top: 0; transform: rotate(-5deg); }
.devices .phone.b { right: 6%; top: 40px; transform: rotate(4deg); }
.sheet-bg { position: absolute; inset: 0 0 52%; background: radial-gradient(80% 70% at 50% 30%, rgb(245 158 11 / 0.3), transparent 70%), linear-gradient(180deg, #17140f, #050507); }
.sheet-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #050507, transparent 60%); }
.sheet-ui { position: absolute; left: 8%; right: 8%; top: 36%; display: flex; flex-direction: column; gap: 8px; }
.sheet-ui .sk.logo { height: 22px; width: 70%; min-height: 0; }
.sheet-ui .btns { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
.sheet-ui .btns .chip { justify-content: center; height: 30px; }
.sheet-ui .icons { display: flex; justify-content: space-around; margin: 8px 0; }
.sheet-ui .icons i { width: 26px; height: 26px; border-radius: 50%; background: rgb(255 255 255 / 0.1); }
.sheet-ui .cast { display: flex; gap: 8px; margin-top: 6px; }
.sheet-ui .cast i { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, #2a2a35, #15151b); box-shadow: inset 0 0 0 1px var(--line); }
.grabber { position: absolute; top: 32%; left: 50%; width: 34px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.3); transform: translateX(-50%); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .devices { height: 460px; max-width: 480px; margin-inline: auto; width: 100%; }
  .devices .phone { width: 190px; }
}
@media (max-width: 420px) { .devices .phone { width: 160px; } .devices { height: 380px; } }

/* Gestion */
.dash { padding: 18px; display: grid; grid-template-columns: 180px 1fr; gap: 18px; min-height: 420px; }
.dash-side { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-right: 1px solid var(--line); }
.dash-side .grp { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--subtle); margin: 12px 8px 4px; }
.dash-side a { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); padding: 7px 9px; border-radius: 9px; }
.dash-side a svg { width: 15px; height: 15px; }
.dash-side a.on { background: rgb(255 255 255 / 0.08); color: #fff; }
.dash-main { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-content: start; }
.panel { padding: 18px; border-radius: 14px; background: rgb(255 255 255 / 0.03); box-shadow: inset 0 0 0 1px var(--line); }
.panel h4 { margin: 0 0 14px; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; color: rgb(255 255 255 / 0.9); }
.panel h4 span { color: var(--subtle); font-weight: 500; }
.dl { display: grid; gap: 14px; }
.dl-item { display: grid; gap: 6px; }
.dl-item .top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--subtle); }
.dl-item .top .sk { width: 46%; height: 8px; margin-top: 4px; }
.bar { height: 5px; border-radius: 5px; background: rgb(255 255 255 / 0.08); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--p); background: #fff; border-radius: 5px; }
.svc { display: grid; gap: 9px; }
.svc div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: rgb(255 255 255 / 0.85); }
.svc div em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--subtle); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px rgb(52 211 153 / 0.6); }
.storage { grid-column: 1 / -1; }
.stack { display: flex; height: 10px; border-radius: 10px; overflow: hidden; gap: 2px; }
.stack i { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11.5px; color: var(--subtle); }
.legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--c); }
.gestion-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.gestion-list .card { padding: 24px; }
.gestion-list h3 { font-size: 17px; margin-bottom: 6px; }
.gestion-list p { font-size: 14.5px; color: var(--muted); }
@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .dash { padding: 14px; min-height: 0; }
  .dash-side { display: none; }
  .dash-main { grid-template-columns: 1fr; }
  .gestion-list { grid-template-columns: 1fr; }
}

/* Confidentialité */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trust .card { padding: 26px; }
.trust h3 { font-size: 17px; margin-bottom: 8px; }
.trust p { font-size: 14.5px; color: var(--muted); }
@media (max-width: 980px) { .trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } }

/* Démarrage rapide */
.qs { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
.qs-need { padding: 28px; position: sticky; top: 96px; }
.qs-need h3 { font-size: 19px; margin-bottom: 18px; }
.qs-need ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.qs-need li { display: flex; gap: 14px; }
.qs-need li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--brand); }
.qs-need li b { display: block; font-size: 15px; }
.qs-need li span { display: block; font-size: 14px; color: var(--muted); line-height: 1.5; }
.qs-need li.opt { padding-top: 16px; border-top: 1px solid var(--line); }
.qs-need li.opt svg { color: var(--subtle); }
.qs-need code, .tabpanel code { font-size: 12.5px; background: rgb(255 255 255 / 0.07); padding: 2px 6px; border-radius: 6px; color: #fff; }
.tabs { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 10px 14px; cursor: pointer; white-space: nowrap; transition: background 0.18s, color 0.18s; }
.tabs button:hover { color: #fff; }
.tabs button i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgb(255 255 255 / 0.08); }
.tabs button[aria-selected="true"] { background: rgb(255 255 255 / 0.1); color: #fff; box-shadow: var(--glass-edge); }
.tabs button[aria-selected="true"] i { background: var(--beam); color: #fff; }
.tabpanel { padding: 28px 4px 0; display: grid; gap: 16px; animation: panel-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.tabpanel[hidden] { display: none; }
.tabpanel h3 { font-size: 24px; }
.tabpanel > p { color: var(--muted); font-size: 15.5px; }
.tabpanel b { color: #fff; font-weight: 600; }
.tabpanel .hint { font-size: 14px; color: var(--subtle); padding-left: 14px; border-left: 2px solid rgb(251 191 36 / 0.32); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.code { position: relative; padding: 0; background: #08080b; }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--subtle); }
.copy { font: inherit; font-size: 12px; font-weight: 600; color: #fff; background: rgb(255 255 255 / 0.08); border: 0; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background 0.15s; }
.copy:hover { background: rgb(255 255 255 / 0.14); }
.code pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; font-size: 13px; line-height: 1.7; color: #e4e4ea; }
.code .k { color: #fde68a; }
.code .s { color: #d6d3d1; }
.code .c { color: rgb(255 255 255 / 0.38); }
.more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--brand); list-style: none; margin-bottom: 12px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+ "; }
.more[open] summary::before { content: "− "; }
.wizard { list-style: none; margin: 0; padding: 0; counter-reset: w; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wizard li { counter-increment: w; display: flex; flex-direction: column; padding: 12px 14px 12px 48px; position: relative; border-radius: 12px; background: rgb(255 255 255 / 0.03); box-shadow: inset 0 0 0 1px var(--line); }
.wizard li::before { content: counter(w); position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: rgb(251 191 36 / 0.17); color: #fff; }
.wizard b { font-size: 14.5px; }
.wizard span { font-size: 13px; color: var(--subtle); line-height: 1.45; }
.install-note { margin-top: 28px; font-size: 14px; color: var(--subtle); }
.install-note a { color: var(--brand); }
@media (max-width: 980px) { .qs { grid-template-columns: 1fr; } .qs-need { position: static; } }
@media (max-width: 560px) {
  .wizard { grid-template-columns: 1fr; }
  .tabs { border-radius: 16px; }
  .tabs { flex-wrap: wrap; justify-content: center; }
  .tabs button { flex: 1 1 auto; padding: 9px 12px; }
}

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 10px; }
.faq details { border-radius: 16px; background: rgb(255 255 255 / 0.03); box-shadow: inset 0 0 0 1px var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 24px; font-weight: 600; font-size: 16.5px; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--brand); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--muted); font-size: 15px; }

/* Appel final */
.cta-final { text-align: center; padding: 140px 0; position: relative; isolation: isolate; }
.cta-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 60% at 50% 60%, rgb(251 191 36 / 0.13), transparent 70%); }
.cta-final .mark { width: 76px; height: 76px; margin: 0 auto 28px; filter: drop-shadow(0 0 30px rgb(251 191 36 / 0.34)); }
.cta-final h2 { font-size: clamp(34px, 5vw, 58px); margin-bottom: 18px; }
.cta-final p { color: var(--muted); font-size: 18px; max-width: 560px; margin: 0 auto 34px; }

/* Pied de page */
footer { border-top: 1px solid var(--line); padding: 40px 0 48px; font-size: 14px; color: var(--subtle); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between; }
footer .brand { font-size: 18px; color: #fff; margin-bottom: 10px; }
footer .brand svg { width: 24px; height: 24px; }
footer p { max-width: 420px; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer nav a:hover { color: #fff; }
.disclaimer { width: 100%; padding-top: 22px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 12.5px; }

/* Apparition au défilement */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0s !important; }
}

:focus-visible { outline: 2px solid #f5f5f4; outline-offset: 3px; border-radius: 8px; }

/* Un bloc de code ne doit jamais élargir sa colonne : il défile à l'intérieur. */
.qs > *, .tabpanel, .tabpanel > *, .split > *, .duo > *, .features > *, .dash-main > * { min-width: 0; }
.qs-need code { white-space: nowrap; }

/* Compose complet : défile dans son cadre. */
.code pre.tall { max-height: 560px; overflow: auto; }

/* Choix du proxy */
.seg { display: inline-flex; justify-self: start; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: background 0.18s, color 0.18s; }
.seg button[aria-pressed="true"] { background: rgb(255 255 255 / 0.1); color: #fff; box-shadow: var(--glass-edge); }
.seg-panel { display: grid; gap: 16px; }
.seg-panel[hidden] { display: none; }
.howto { list-style: none; margin: 0; padding: 0; counter-reset: h; display: grid; gap: 10px; }
.howto li { counter-increment: h; position: relative; padding: 14px 16px 14px 52px; border-radius: 12px; background: rgb(255 255 255 / 0.03); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 4px; }
.howto li::before { content: counter(h); position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: rgb(251 191 36 / 0.17); color: #fff; }
.howto b { font-size: 14.5px; }
.howto span { font-size: 14px; color: var(--muted); line-height: 1.55; }
.howto em { font-style: normal; color: #fff; }
.tabpanel code { white-space: nowrap; }

/* ---------- Lumen ---------- */
.lumen { padding: 140px 0 120px; }
.lumen::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 120px; background: linear-gradient(transparent, rgb(251 191 36 / 0.48)); }
.lm-intro { text-align: center; max-width: 820px; margin: 0 auto 80px; }
.lm-word {
  font-size: clamp(76px, 14vw, 168px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
  background: linear-gradient(180deg, #fff 30%, rgb(245 245 244 / 0.5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 8px 0 6px;
}
.lm-tag { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 500; color: #fff; margin-bottom: 22px; }
.lm-lead { font-size: 18px; color: var(--muted); max-width: 660px; margin-inline: auto; }

.lm-figures { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); margin-bottom: 140px; }
.lm-fig { padding: 36px 28px; }
.lm-fig + .lm-fig { border-left: 1px solid var(--line); }
.lm-fig strong { display: block; font-family: var(--font-display); font-size: clamp(44px, 5vw, 64px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; margin-bottom: 14px; }
.lm-fig strong small { font-size: 0.42em; letter-spacing: 0; margin-left: 4px; color: var(--muted); font-weight: 500; }
.lm-fig span { font-size: 14.5px; color: var(--muted); }
@media (max-width: 900px) {
  .lm-figures { grid-template-columns: 1fr 1fr; }
  .lm-fig:nth-child(3) { border-left: 0; }
  .lm-fig:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .lm-figures { grid-template-columns: 1fr; }
  .lm-fig + .lm-fig { border-left: 0; border-top: 1px solid var(--line); }
}

.lm-sub { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.lm-sub h3 { font-size: clamp(32px, 4.6vw, 52px); margin: 14px 0 16px; }
.lm-sub p { color: var(--muted); font-size: 17px; }

/* Schéma d'architecture */
.arch {
  position: relative;
  padding: 28px;
  border-radius: 28px;
  background:
    linear-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgb(255 255 255 / 0.025) 1px, transparent 1px) 0 0 / 28px 28px,
    rgb(12 10 9 / 0.6);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 120px -40px rgb(251 191 36 / 0.23);
  margin-bottom: 140px;
}
.arch-core {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; justify-content: center;
  margin: 0 calc(20% - 8px) 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--glass-fill);
  box-shadow: var(--glass-edge);
  font-size: 13px; color: var(--muted);
  position: relative;
}
.arch-core b { font-family: var(--font-display); font-size: 15px; color: #fff; letter-spacing: 0.01em; }
.arch-row { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1.2fr 34px 1fr 34px 1fr; align-items: stretch; }
.arch-row2 { display: grid; grid-template-columns: 1.15fr 1.7fr 1.15fr; gap: 16px; margin-top: 16px; }
.node {
  position: relative;
  padding: 18px 16px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.02));
  box-shadow: inset 0 0 0 1px var(--line-strong);
  min-width: 0;
}
.node .where { position: absolute; top: 12px; right: 12px; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); }
.brick-name { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 600; color: #fde68a; background: rgb(251 191 36 / 0.11); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.24); padding: 3px 8px; border-radius: 6px; margin-bottom: 12px; }
.node h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.01em; }
.node ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.node li { font-size: 12.5px; color: var(--muted); line-height: 1.4; padding-left: 12px; position: relative; }
.node li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: rgb(251 191 36 / 0.56); }
.node p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.n-mux { box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.36), 0 0 50px -12px rgb(251 191 36 / 0.37); background: linear-gradient(180deg, rgb(251 191 36 / 0.11), rgb(245 158 11 / 0.03)); }
.n-device { box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.27), 0 0 50px -14px rgb(245 158 11 / 0.3); }
.n-device .brick-name { color: #e7e5e4; background: rgb(245 158 11 / 0.09); box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.2); }
.n-server .brick-name { color: #fff; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px var(--line-strong); }
.n-fallback { background: transparent; box-shadow: none; border: 1px dashed rgb(255 255 255 / 0.18); }
.n-fallback .brick-name { color: #fde68a; background: rgb(251 191 36 / 0.1); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.28); }
.n-audio .lanes { display: grid; gap: 8px; }
.n-audio .lanes div { font-size: 13px; color: var(--muted); line-height: 1.5; padding-left: 18px; position: relative; }
.n-audio .lanes b { color: #fff; font-weight: 600; }
.lane-dot { position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; }
.lane-dot.ok { background: #34d399; box-shadow: 0 0 10px rgb(52 211 153 / 0.6); }
.lane-dot.wasm { background: #fbbf24; box-shadow: 0 0 10px rgb(251 191 36 / 0.4); }

/* Liaisons : un faisceau qui circule */
.wire { position: relative; display: flex; align-items: center; }
.wire i { position: relative; display: block; width: 100%; height: 2px; background: rgb(251 191 36 / 0.2); overflow: hidden; border-radius: 2px; }
.wire i::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 60%; background: linear-gradient(90deg, transparent, #fbbf24, #fde68a, transparent); animation: flow 1.8s linear infinite; }
.wire::after { content: ""; position: absolute; right: 2px; top: 50%; width: 7px; height: 7px; border-top: 2px solid rgb(251 191 36 / 0.56); border-right: 2px solid rgb(251 191 36 / 0.56); transform: translateY(-50%) rotate(45deg); }
.arch-row .wire:nth-of-type(4) i::after { animation-delay: 0.3s; }
.arch-row .wire:nth-of-type(6) i::after { animation-delay: 0.6s; }
.arch-row .wire:nth-of-type(8) i::after { animation-delay: 0.9s; }
@keyframes flow { to { transform: translateX(270%); } }

@media (max-width: 1060px) {
  .arch-row { grid-template-columns: 1fr; }
  .wire { height: 30px; justify-content: center; }
  .wire i { width: 2px; height: 100%; }
  .wire i::after { inset: -60% 0 auto 0; width: 100%; height: 60%; background: linear-gradient(180deg, transparent, #fbbf24, #fde68a, transparent); animation-name: flow-v; }
  .wire::after { right: auto; left: 50%; top: auto; bottom: 2px; transform: translateX(-50%) rotate(135deg); }
  .arch-row2 { grid-template-columns: 1fr; }
  .arch-core { margin-inline: 0; border-radius: 16px; }
}
@keyframes flow-v { to { transform: translateY(270%); } }
@media (max-width: 560px) { .arch { padding: 16px; border-radius: 20px; } }

/* Mur des formats */
.fmt { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 140px; }
.fmt-group { padding: 24px; border-radius: 22px; background: linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.01)); box-shadow: inset 0 0 0 1px var(--line); }
.fmt-group h4 { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
.g-audio, .g-more { grid-column: 1 / -1; }
.g-video .fmt-tiles, .g-hdr .fmt-tiles { grid-template-columns: 1fr 1fr; }
.fmt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tile { position: relative; padding: 18px 16px 16px; border-radius: 14px; background: rgb(255 255 255 / 0.035); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 4px; min-height: 96px; justify-content: flex-end; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s; }
.tile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tile b { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.tile span { font-size: 12.5px; color: var(--subtle); line-height: 1.4; }
.hero-tile { grid-column: span 2; background: radial-gradient(120% 140% at 0% 0%, rgb(251 191 36 / 0.19), transparent 60%), radial-gradient(100% 120% at 100% 100%, rgb(245 158 11 / 0.12), transparent 60%), rgb(255 255 255 / 0.03); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.28); }
.hero-tile b { font-size: 30px; background: linear-gradient(90deg, #fff, #fde68a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; white-space: nowrap; }
.tile .tag { align-self: flex-start; order: -1; margin-bottom: auto; }
.tag.ok { color: #6ee7b7; background: rgb(52 211 153 / 0.12); box-shadow: inset 0 0 0 1px rgb(52 211 153 / 0.28); }
.tag.wasm { color: #fde68a; background: rgb(251 191 36 / 0.09); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.2); }
.tag.both { color: #e7e5e4; background: rgb(245 158 11 / 0.07); box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.19); }
.fmt-note { grid-column: 1 / -1; text-align: center; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; font-size: 13px; color: var(--subtle); margin-top: 6px; }
.fmt-note span { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 860px) { .fmt { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .fmt-tiles { grid-template-columns: 1fr 1fr; } .tile b { font-size: 19px; } .hero-tile b { font-size: 24px; } }

/* Ingénierie */
.eng { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 72px; }
.eng-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.eng-card h4 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 22px 24px 8px; letter-spacing: -0.01em; }
.eng-card p { margin: 0 24px 26px; font-size: 14.5px; color: var(--muted); }
.viz { height: 168px; padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 10px; background: radial-gradient(80% 100% at 50% 0%, rgb(251 191 36 / 0.12), transparent 70%), rgb(12 10 9 / 0.7); border-bottom: 1px solid var(--line); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.vrow { display: grid; grid-template-columns: 78px repeat(5, 1fr); gap: 6px; align-items: center; }
.viz-ch .vrow { grid-template-columns: 78px repeat(6, 1fr); }
.vrow em { font-style: normal; font-family: var(--font-sans); font-size: 11px; color: var(--subtle); }
.vrow i { font-style: normal; height: 30px; border-radius: 7px; display: grid; place-items: center; font-size: 12.5px; color: rgb(255 255 255 / 0.85); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px var(--line); }
.vrow i.f { font-weight: 700; }
.vrow i.k, .vrow i.c { background: rgb(251 191 36 / 0.2); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.4); color: #fff; }
.vrow.hl i { background: rgb(245 158 11 / 0.09); box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.27); color: #f5f5f4; }
.vrow.hl i.c { background: rgb(251 191 36 / 0.23); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.48); }
.viz-nal { flex-direction: row; flex-wrap: wrap; align-content: center; gap: 8px; }
.nal { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 8px; }
.nal.ok { color: #6ee7b7; background: rgb(52 211 153 / 0.1); box-shadow: inset 0 0 0 1px rgb(52 211 153 / 0.3); }
.nal.no { color: #fca5a5; background: rgb(248 113 113 / 0.1); box-shadow: inset 0 0 0 1px rgb(248 113 113 / 0.3); text-decoration: line-through; }
.viz-nal p { width: 100%; margin: 8px 0 0; font-family: var(--font-sans); font-size: 12.5px; color: var(--subtle); }
.viz-nal p b { font-family: var(--font-display); font-size: 20px; color: #fff; margin-right: 2px; }
.viz .b { display: grid; grid-template-columns: 1fr; gap: 6px; }
.viz .b em { font-style: normal; font-family: var(--font-sans); font-size: 11.5px; color: var(--subtle); }
.viz .b i { display: block; height: 10px; border-radius: 10px; background: rgb(255 255 255 / 0.06); position: relative; overflow: hidden; }
.viz .b i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 6px; border-radius: 10px; background: rgb(255 255 255 / 0.4); }
.viz .b.hl i::after, .viz-mem .b i::after { background: var(--beam); }
.viz .b { grid-template-columns: 1fr auto; }
.viz .b i { grid-column: 1 / -1; }
.viz .b span { font-size: 12px; color: rgb(255 255 255 / 0.85); grid-row: 1; grid-column: 2; }
.viz-mem { gap: 8px; }
.viz-db { flex-direction: row; justify-content: space-around; align-items: center; }
.viz-db div { display: grid; justify-items: center; }
.viz-db strong { font-family: var(--font-display); font-size: 48px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; background: var(--beam); -webkit-background-clip: text; background-clip: text; color: transparent; }
.viz-db small { font-family: var(--font-sans); font-size: 13px; color: var(--muted); margin-top: 4px; }
.viz-db em { font-style: normal; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); margin-top: 8px; }
@media (max-width: 980px) { .eng { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .eng { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .wire i::after { animation: none; display: none; } }

/* Sélecteur de langue */
.lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--glass-fill); box-shadow: var(--glass-edge); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
.lang a { min-width: 36px; height: 30px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); transition: background 0.18s, color 0.18s; }
.lang a:hover { color: #fff; }
.lang a[aria-current="page"] { color: #fff; background: rgb(255 255 255 / 0.15); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.1); }
@media (max-width: 860px) {
  .site-header .lang { margin-left: auto; }
  .site-header .btn { margin-left: 0; }
}
@media (max-width: 400px) { .site-header .wrap { gap: 10px; } .site-header .btn-sm { padding: 0 12px; } }
html[lang="en"] .works li.req::after { content: "required"; }

/* Passage FR / EN : fondu enchaîné entre les deux pages, l'en-tête reste en place et la pastille
   de la langue active glisse d'une langue à l'autre. Les navigateurs sans View Transitions
   changent de page normalement. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
/* Arrivée par le sélecteur : ce qui est déjà à l'écran est affiché tout de suite, sans animation d'apparition. */
.restored .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Section en cours dans le menu du haut */
.nav a[aria-current="true"] { color: #fff; background: rgb(255 255 255 / 0.08); }

/* Barre des sections sur téléphone : la pilule du bas de l'app */
.mnav { display: none; }
@media (max-width: 860px) {
  .mnav {
    display: block;
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, calc(100% + 40px));
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
  }
  .mnav.show { transform: translate(-50%, 0); opacity: 1; }
  .mnav-pill {
    display: flex;
    gap: 2px;
    padding: 5px;
    border-radius: 999px;
    background: var(--glass-fill);
    box-shadow: var(--glass-edge), 0 12px 40px rgb(0 0 0 / 0.5);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    touch-action: pan-y;
  }
  .mnav a {
    width: 64px;
    height: 50px;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: rgb(255 255 255 / 0.55);
    transition: color 0.2s, background 0.25s;
  }
  .mnav a svg { width: 18px; height: 18px; }
  .mnav a span { font-size: 10px; font-weight: 600; letter-spacing: 0.01em; }
  .mnav a[aria-current="true"] { color: #fff; background: rgb(255 255 255 / 0.15); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.1); }
  footer { padding-bottom: 110px; }
}
@media (max-width: 360px) { .mnav a { width: 56px; } }

/* ---------- Verre liquide (repris de l'application) ---------- */
[data-liquid] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn-glass[data-lit], .copy[data-lit], .fx-pill[data-lit], .spot-nav button[data-lit] { box-shadow: var(--glass-edge), inset 0 0 0 999px rgb(255 255 255 / 0.14); }
.btn-primary[data-lit] { background: rgb(255 255 255 / 0.84); }

/* La lentille : la pastille de verre posée sous l'onglet actif, qui glisse d'un onglet à l'autre. */
.has-lens { position: relative; -webkit-tap-highlight-color: transparent; }
.has-lens > :not(.lens) { position: relative; z-index: 1; }
.lens {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.15);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.12);
  pointer-events: none;
  will-change: transform;
}
.has-lens > [aria-current="page"], .has-lens > [aria-current="true"], .has-lens > [aria-selected="true"], .has-lens > [aria-pressed="true"] { background: transparent !important; box-shadow: none !important; }
.has-lens.tabs > [aria-selected="true"] { color: #fff; }
.nav.has-lens .lens { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.08); }

/* ================================================================================== */
/* Page des fonctionnalités                                                            */
/* ================================================================================== */
.fx-hero { padding: 140px 0 40px; position: relative; isolation: isolate; overflow-x: clip; }
.fx-hero::before { content: ""; position: absolute; inset: -10% -20% auto; height: 760px; z-index: -1; background: radial-gradient(38% 50% at 30% 20%, rgb(251 191 36 / 0.16), transparent 70%), radial-gradient(32% 45% at 75% 30%, rgb(245 158 11 / 0.09), transparent 70%); filter: blur(20px); }
.fx-head { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.fx-num { display: inline-flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.fx-num strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(96px, 16vw, 188px); line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.fx-num span { font-family: var(--font-display); font-size: clamp(22px, 3vw, 34px); font-weight: 500; color: var(--muted); letter-spacing: -0.01em; }
.fx-head h1 { font-size: clamp(36px, 5.6vw, 64px); margin: 6px 0 18px; }
.fx-lead { color: var(--muted); font-size: 18px; max-width: 600px; margin-inline: auto; }

/* Spotlight : la bannière de l'accueil du cinéma */
.spot { position: relative; border-radius: 28px; overflow: hidden; background: #0a0908; box-shadow: inset 0 0 0 1px var(--line-strong), 0 40px 120px -40px rgb(251 191 36 / 0.27); outline: none; --spot-run: running; touch-action: pan-y; }
.spot:focus-visible { box-shadow: 0 0 0 2px #f5f5f4; }
.spot-slides { display: grid; }
.spot-slide { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; padding: 56px 56px 84px; min-height: 460px; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; position: relative; isolation: isolate; }
.spot-slide.on { opacity: 1; visibility: visible; transition: opacity 0.6s ease; }
.spot-slide::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.95; transform: scale(1.06); transition: transform 7.5s ease-out; }
.spot-slide.on::before { transform: scale(1); }
.sp0::before { background: radial-gradient(60% 80% at 80% 30%, rgb(251 191 36 / 0.3), transparent 60%), radial-gradient(40% 60% at 20% 90%, rgb(245 158 11 / 0.13), transparent 70%), linear-gradient(120deg, #14100a, #07070c); }
.sp1::before { background: radial-gradient(60% 80% at 75% 40%, rgb(245 158 11 / 0.27), transparent 60%), radial-gradient(40% 60% at 15% 80%, rgb(251 191 36 / 0.17), transparent 70%), linear-gradient(120deg, #0f0e0d, #07070c); }
.sp2::before { background: radial-gradient(60% 80% at 80% 40%, rgb(251 191 36 / 0.28), transparent 60%), radial-gradient(40% 60% at 20% 90%, rgb(251 146 60 / 0.14), transparent 70%), linear-gradient(120deg, #140d08, #07070c); }
.sp3::before { background: radial-gradient(60% 80% at 75% 35%, rgb(251 191 36 / 0.23), transparent 60%), radial-gradient(45% 60% at 90% 90%, rgb(245 158 11 / 0.17), transparent 70%), linear-gradient(120deg, #12100c, #07070c); }
.sp4::before { background: radial-gradient(60% 80% at 80% 40%, rgb(245 158 11 / 0.25), transparent 60%), radial-gradient(40% 60% at 20% 80%, rgb(52 211 153 / 0.12), transparent 70%), linear-gradient(120deg, #0f100d, #07070c); }
.spot-text { position: relative; }
.spot-cat { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: var(--glass-fill); box-shadow: var(--glass-edge); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); margin-bottom: 22px; }
.spot-cat svg { width: 15px; height: 15px; }
.spot-cat .fx-tag { margin-left: 4px; }
.spot-slide h2 { font-size: clamp(34px, 4.4vw, 54px); margin-bottom: 16px; }
.spot-slide p { color: rgb(255 255 255 / 0.74); font-size: 17px; max-width: 470px; }
.spot-slide.on .spot-text > * { animation: spot-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.spot-slide.on .spot-text > :nth-child(2) { animation-delay: 0.06s; }
.spot-slide.on .spot-text > :nth-child(3) { animation-delay: 0.12s; }
.spot-slide.on .spot-viz { animation: spot-in 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes spot-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.restored .spot-slide.on .spot-text > *, .restored .spot-slide.on .spot-viz { animation: none; }

/* Les tirets du Spotlight : le premier s'allonge et se remplit pendant que la diapositive est affichée. */
.spot-nav { position: absolute; left: 56px; bottom: 32px; display: flex; gap: 6px; z-index: 2; }
.spot-nav button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 999px; }
.spot-nav button i { display: block; width: 18px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.28); position: relative; overflow: hidden; transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.spot-nav button.on { width: 44px; }
.spot-nav button.on i { width: 40px; }
.spot-nav button.on i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: dash-fill 7s linear both; animation-play-state: var(--spot-run); }
@keyframes dash-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.spot-nav button[data-lit] { box-shadow: none; }

/* Visuels du Spotlight */
.spot-viz { display: grid; place-items: center; }
.vz { width: 100%; max-width: 470px; }
.vz-card { border-radius: 22px; padding: 18px; background: var(--glass-fill); box-shadow: var(--glass-edge), 0 30px 80px -20px rgb(0 0 0 / 0.7); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); display: grid; gap: 12px; }
.vz-search { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; border-radius: 999px; background: var(--glass-fill); box-shadow: var(--glass-edge); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: 17px; color: #fff; margin-bottom: 14px; }
.vz-search svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.caret { width: 2px; height: 22px; background: #fbbf24; margin-left: -8px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.vz-result { display: flex; gap: 16px; padding: 14px; border-radius: 18px; background: rgb(10 10 14 / 0.6); box-shadow: inset 0 0 0 1px var(--line-strong); }
.vz-poster { width: 78px; aspect-ratio: 2 / 3; border-radius: 10px; flex: none; position: relative; overflow: hidden; }
.vz-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.vz-lines .sk { height: 10px; }
.vz-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.vz-time { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: #fde68a; background: rgb(251 191 36 / 0.12); padding: 4px 9px; border-radius: 8px; }
.vz .chip { height: 32px; font-size: 13px; padding: 0 14px; }
.vz .chip svg { width: 13px; height: 13px; }
.vz-frame { position: relative; aspect-ratio: 16 / 9.5; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-strong), 0 30px 80px -20px rgb(0 0 0 / 0.7); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 40px; gap: 8px; }
.vz-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / 0.55), transparent 55%); }
.vz-sub1, .vz-sub2 { position: relative; z-index: 1; text-shadow: 0 2px 8px rgb(0 0 0 / 0.8); text-align: center; padding: 0 16px; }
.vz-sub1 { font-size: 21px; font-weight: 600; color: #fff; }
.vz-sub2 { font-size: 16px; font-weight: 500; color: rgb(255 255 255 / 0.78); }
.vz-bar { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.25); z-index: 1; overflow: hidden; }
.vz-bar i { position: absolute; inset: 0 auto 0 0; width: 42%; background: #fff; border-radius: 4px; }
.vz-voice { display: grid; gap: 16px; padding: 22px; border-radius: 22px; background: var(--glass-fill); box-shadow: var(--glass-edge), 0 30px 80px -20px rgb(0 0 0 / 0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.vz-wave em { display: block; font-style: normal; font-size: 12px; color: var(--subtle); margin-bottom: 8px; }
.vz-wave .w { height: 72px; display: flex; align-items: center; gap: 4px; }
.vz-wave .w i { flex: 1; height: var(--h); border-radius: 3px; }
.w-voice i { background: linear-gradient(180deg, #fbbf24, #fde68a); animation: wave 1.6s ease-in-out infinite alternate; }
.w-voice i:nth-child(3n) { animation-delay: -0.4s; }
.w-voice i:nth-child(3n + 1) { animation-delay: -0.9s; }
.w-bg { height: 40px !important; }
.w-bg i { background: rgb(255 255 255 / 0.2); }
@keyframes wave { from { transform: scaleY(0.7); } to { transform: scaleY(1); } }
.vz-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 14px; background: rgb(255 255 255 / 0.06); font-size: 14px; font-weight: 600; }
.sw { width: 44px; height: 26px; border-radius: 999px; background: #34d399; position: relative; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.sw::after { content: ""; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.3); }
.vz-field { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 12px; background: rgb(0 0 0 / 0.35); box-shadow: inset 0 0 0 1px var(--line); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: rgb(255 255 255 / 0.88); overflow: hidden; white-space: nowrap; }
.vz-field svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.vz-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted); padding: 2px 4px; }
.vz-meta span { display: inline-flex; align-items: center; gap: 7px; }
.vz-meta svg { width: 14px; height: 14px; }
.vz-copy { justify-self: start; }
.vz-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; padding: 2px 4px 4px; }
.vz-head svg { width: 17px; height: 17px; color: var(--gold); }
.vz-ep { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: rgb(0 0 0 / 0.28); }
.vz-thumb { width: 74px; aspect-ratio: 16 / 9; border-radius: 8px; flex: none; }
.vz-ep-l { flex: 1; display: grid; gap: 9px; }
.vz-ep-l .sk { height: 8px; }
.progress-line { height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.12); overflow: hidden; }
.progress-line i { display: block; height: 100%; width: var(--p); background: var(--beam); border-radius: 4px; }
.vz-st { font-size: 12px; color: var(--subtle); min-width: 52px; text-align: right; }
.vz-st.ok { color: #6ee7b7; }

@media (max-width: 900px) {
  .spot-slide { grid-template-columns: 1fr; gap: 28px; padding: 32px 22px 72px; min-height: 0; align-content: start; }
  .spot-nav { left: 22px; bottom: 24px; }
  .vz { max-width: none; }
}

/* Recherche et filtres : la recherche du cinéma */
.fx-cat { padding: 72px 0 40px; }
.fx-tools { position: sticky; top: 70px; z-index: 20; display: grid; gap: 14px; padding: 16px 0 18px; margin-bottom: 26px; }
.fx-tools::before { content: ""; position: absolute; inset: 0 -100vmax; z-index: -1; background: linear-gradient(180deg, rgb(10 10 12 / 0.92) 60%, rgb(10 10 12 / 0)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); mask-image: linear-gradient(180deg, #000 75%, transparent); }
.fx-search { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px; border-radius: 999px; background: var(--glass-fill); box-shadow: var(--glass-edge); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); transition: box-shadow 0.2s; }
.fx-search:focus-within { box-shadow: var(--glass-edge), 0 0 0 2px rgb(251 191 36 / 0.44); }
.fx-search svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.fx-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: #fff; font: inherit; font-size: 16.5px; }
.fx-search input::placeholder { color: var(--subtle); }
.fx-search input::-webkit-search-cancel-button { filter: invert(1) opacity(0.6); }
.fx-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: color 0.2s, background 0.25s, box-shadow 0.25s; }
.fx-pill b { font-size: 12px; font-weight: 600; color: var(--subtle); font-variant-numeric: tabular-nums; }
.fx-pill:hover { color: #fff; }
.fx-pill[aria-pressed="true"] { color: #fff; background: rgb(255 255 255 / 0.15); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.fx-pill[aria-pressed="true"] b { color: #fde68a; }
.fx-count { font-size: 13px; color: var(--subtle); }
@media (max-width: 860px) {
  .fx-tools { top: 62px; }
  .fx-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .fx-filters::-webkit-scrollbar { display: none; }
  .fx-pill { flex: none; }
}

/* Les rangées : titrées comme celles de l'accueil du cinéma */
.fx-group { padding: 26px 0 30px; scroll-margin-top: 230px; }
.fx-group[hidden] { display: none; }
.fx-row-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.fx-row-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-fill); box-shadow: var(--glass-edge); }
.fx-row-ic svg { width: 17px; height: 17px; color: #fde68a; }
.fx-row-head h2 { font-size: 26px; letter-spacing: -0.02em; }
.fx-n { font-size: 13px; font-weight: 600; color: var(--subtle); font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px; background: rgb(255 255 255 / 0.06); }
.fx-row-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; grid-auto-flow: dense; }
.fx-card { position: relative; padding: 20px 20px 18px; border-radius: 18px; background: linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.015)); box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s, background 0.3s; }
.fx-card[hidden] { display: none; }
.fx-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 18px 40px -20px rgb(0 0 0 / 0.8); }
.fx-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.fx-ic svg { width: 16px; height: 16px; color: rgb(255 255 255 / 0.85); }
.fx-card h3 { font-size: 16.5px; letter-spacing: -0.01em; margin-bottom: 6px; line-height: 1.25; }
.fx-card p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.fx-tags { display: flex; gap: 6px; margin-top: 12px; }
.fx-tag { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.t-beta { color: #fde68a; background: rgb(251 191 36 / 0.09); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.2); }
.t-option { color: #e7e5e4; background: rgb(245 158 11 / 0.08); box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.19); }
.t-admin { color: #fde68a; background: rgb(251 191 36 / 0.1); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.28); }
/* Les fonctions phares prennent deux colonnes, comme les cartes de « Reprendre ». */
.fx-card.star { grid-column: span 2; padding: 24px 24px 22px; background: radial-gradient(120% 140% at 0% 0%, rgb(251 191 36 / 0.15), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgb(245 158 11 / 0.09), transparent 60%), rgb(255 255 255 / 0.03); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.24); }
.fx-card.star h3 { font-size: 21px; }
.fx-card.star p { font-size: 15px; max-width: 520px; }
.fx-card.star .fx-ic { width: 40px; height: 40px; background: linear-gradient(140deg, rgb(251 191 36 / 0.34), rgb(245 158 11 / 0.2)); }
.fx-card.star .fx-ic svg { width: 19px; height: 19px; color: #fff; }
@media (max-width: 560px) { .fx-card.star { grid-column: auto; } .fx-grid { grid-template-columns: 1fr; } }
.fx-empty { text-align: center; color: var(--muted); padding: 60px 0; font-size: 16px; }

/* Crédit du pied de page */
.credit { width: 100%; display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.credit a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px var(--line); transition: background 0.2s; }
.credit a:hover { background: rgb(255 255 255 / 0.12); }
.credit svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) { .w-voice i, .caret, .spot-nav button.on i::after { animation: none; } .spot-nav button.on i::after { transform: none; } }

/* ---------- Accueil, passe « moins générique » ---------- */
/* La mention du haut : une pastille de verre avec le logo, comme les pastilles de l'app. */
.hero-chip { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 15px 0 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: rgb(255 255 255 / 0.88); background: var(--glass-fill); box-shadow: var(--glass-edge); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hero-chip svg { width: 18px; height: 18px; }
/* Les chapitres de Lumen : un repère numéroté plutôt qu'une étiquette. */
.chapter { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.chapter b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: #fde68a; padding: 3px 7px; border-radius: 6px; background: rgb(251 191 36 / 0.11); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.24); }
.more-link { display: flex; justify-content: center; margin-top: 40px; }
/* Les fonctions du cinéma et « Chez vous » : une liste à filets, sans cartes. */
.features { gap: 0 40px; border-top: 1px solid var(--line); }
.feature, .trust .card { background: none; box-shadow: none; border-radius: 0; padding: 28px 0 30px; border-bottom: 1px solid var(--line); }
.feature:hover { transform: none; box-shadow: none; }
.feature .icon, .trust .icon { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; margin-bottom: 14px; display: block; }
.feature .icon svg, .trust .icon svg { width: 22px; height: 22px; color: var(--brand); }
.trust { gap: 0 40px; border-top: 1px solid var(--line); }
/* Le menu du haut rejoint la barre du téléphone plus tôt : six entrées ne tiennent pas sur une tablette. */
@media (max-width: 1060px) { .nav { display: none; } .site-header .lang { margin-left: auto; } .site-header .btn { margin-left: 0; } }
@media (max-width: 1060px) and (min-width: 861px) {
  .mnav { display: block; position: fixed; z-index: 60; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, calc(100% + 40px)); opacity: 0; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s; }
  .mnav.show { transform: translate(-50%, 0); opacity: 1; }
  .mnav-pill { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: var(--glass-fill); box-shadow: var(--glass-edge), 0 12px 40px rgb(0 0 0 / 0.5); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
  .mnav a { width: 72px; height: 50px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: rgb(255 255 255 / 0.55); }
  .mnav a svg { width: 18px; height: 18px; }
  .mnav a span { font-size: 10px; font-weight: 600; }
}
.page-features .mnav a { width: 56px; }
@media (max-width: 380px) { .page-features .mnav a { width: 50px; } .page-features .mnav a span { font-size: 9px; } }
.feature .icon, .trust .icon { display: flex; justify-content: flex-start; }
footer .credit, footer .disclaimer { max-width: none; }
.fx-tools::before { inset: -14px -100vmax -4px; mask-image: linear-gradient(180deg, #000 86%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); background: rgb(10 10 12 / 0.94); }
@media (max-width: 860px) { .fx-count { display: none; } }

/* Barre du téléphone : un verre bien flouté, et six entrées sur l'accueil (les sections et la page
   des fonctionnalités). Le flou ne marche que si aucun parent n'isole l'arrière-plan : ni
   view-transition-name, ni filtre, ni opacité partielle une fois affichée. */
.mnav-pill { background: linear-gradient(160deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.03) 45%, rgb(255 255 255 / 0.08)), rgb(14 14 18 / 0.42) !important; backdrop-filter: blur(22px) saturate(1.8) !important; -webkit-backdrop-filter: blur(22px) saturate(1.8) !important; }
@media (max-width: 860px) { .mnav a { width: 58px; } }
@media (max-width: 370px) { .mnav a { width: 52px; } .mnav a span { font-size: 9px; } }

/* ================================================================================== */
/* Direction artistique « art / cinéma » : noir profond, blanc cassé, or.               */
/* L'or reste rare : jamais en aplat sur une grande surface. Ces règles adoucissent les  */
/* fonds devenus trop dorés et rendent au blanc ce qui n'est pas « de la lumière ».      */
/* ================================================================================== */

/* Fonds de mise en scène : une lueur chaude, discrète, sur du noir. */
.backdrop {
  background:
    radial-gradient(60% 80% at 72% 30%, rgb(245 245 244 / 0.09), transparent 60%),
    radial-gradient(50% 70% at 40% 60%, rgb(251 191 36 / 0.14), transparent 65%),
    radial-gradient(30% 40% at 85% 75%, rgb(180 83 9 / 0.14), transparent 70%),
    linear-gradient(180deg, #171310, #0b0a09);
}
.ph-glow { background: radial-gradient(70% 60% at 50% 40%, rgb(251 191 36 / 0.16), transparent 70%); }
.sheet-bg { background: radial-gradient(80% 70% at 50% 30%, rgb(245 245 244 / 0.12), transparent 70%), radial-gradient(60% 60% at 70% 20%, rgb(251 191 36 / 0.1), transparent 70%), linear-gradient(180deg, #17140f, #050507); }
.duo .card.gestion::after { background: radial-gradient(circle, rgb(245 245 244 / 0.07), transparent 70%); }
.spot { box-shadow: inset 0 0 0 1px var(--line-strong), 0 40px 120px -40px rgb(251 191 36 / 0.18); }
.sp0::before { background: radial-gradient(60% 80% at 80% 30%, rgb(251 191 36 / 0.22), transparent 60%), radial-gradient(40% 60% at 20% 90%, rgb(245 245 244 / 0.06), transparent 70%), linear-gradient(120deg, #14100a, #07070c); }
.sp1::before { background: radial-gradient(60% 80% at 75% 40%, rgb(245 245 244 / 0.1), transparent 60%), radial-gradient(40% 60% at 15% 80%, rgb(251 191 36 / 0.12), transparent 70%), linear-gradient(120deg, #0f0e0d, #07070c); }
.sp2::before { background: radial-gradient(60% 80% at 80% 40%, rgb(245 158 11 / 0.2), transparent 60%), radial-gradient(40% 60% at 20% 90%, rgb(180 83 9 / 0.12), transparent 70%), linear-gradient(120deg, #140d08, #07070c); }
.sp3::before { background: radial-gradient(60% 80% at 75% 35%, rgb(251 191 36 / 0.18), transparent 60%), radial-gradient(45% 60% at 90% 90%, rgb(245 245 244 / 0.07), transparent 70%), linear-gradient(120deg, #12100c, #07070c); }
.sp4::before { background: radial-gradient(60% 80% at 80% 40%, rgb(251 191 36 / 0.16), transparent 60%), radial-gradient(40% 60% at 20% 80%, rgb(120 113 108 / 0.16), transparent 70%), linear-gradient(120deg, #0f100d, #07070c); }
.n-mux { box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.32), 0 0 50px -14px rgb(251 191 36 / 0.28); background: linear-gradient(180deg, rgb(251 191 36 / 0.08), rgb(255 255 255 / 0.02)); }

/* Ce qui n'est pas « de la lumière » repasse en blanc : l'appareil, les états neutres. */
.n-device { box-shadow: inset 0 0 0 1px rgb(245 245 244 / 0.3), 0 0 50px -14px rgb(245 245 244 / 0.16); }
.n-device .brick-name, .n-fallback .brick-name { color: #f5f5f4; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.vrow.hl i { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28); color: #f5f5f4; }
.vrow.hl i.c, .vrow i.k, .vrow i.c { background: rgb(251 191 36 / 0.16); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.42); color: #fde68a; }
.tag.both, .t-option { color: #e7e5e4; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.t-admin { color: #f5f5f4; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
.fx-search:focus-within { box-shadow: var(--glass-edge), 0 0 0 2px rgb(245 245 244 / 0.45); }

/* Sur un aplat or, le texte est noir (le blanc n'y atteint pas 2:1). */
.tabs button[aria-selected="true"] i { color: #0a0a0c; }
.howto li::before, .wizard li::before { background: rgb(251 191 36 / 0.16); color: #fde68a; box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.3); }

/* Fonctions phares : une lueur or, l'icône en or clair. */
.fx-card.star .fx-ic { background: rgb(251 191 36 / 0.14); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.35); }
.fx-card.star .fx-ic svg { color: #fde68a; }
.fx-row-ic svg { color: #f5f5f4; }

/* Affiches abstraites : des tons de pellicule (sépia, rouille, olive, vin, pierre, ocre). */
.p1 { background: linear-gradient(160deg, #3d2e1e, #120d08 70%); }
.p2 { background: linear-gradient(200deg, #2f3833, #0b0e0c 70%); }
.p3 { background: linear-gradient(170deg, #6b3a2a, #1f0f0a 70%); }
.p4 { background: linear-gradient(150deg, #424a2c, #12140b 70%); }
.p5 { background: linear-gradient(190deg, #5a2630, #170a0d 70%); }
.p6 { background: linear-gradient(165deg, #4a4642, #12110f 70%); }
.p7 { background: linear-gradient(140deg, #6b5a2a, #1c170b 70%); }
.p8 { background: linear-gradient(210deg, #2d2b2a, #0d0c0c 70%); }

/* ---------- Livres (accueil) : une liseuse en sépia et son panneau de réglages en verre ---------- */
.books-split { grid-template-columns: 1fr 1.05fr; }
.books-more { margin-top: 30px; }
.reader-stage { position: relative; padding: 10px 40px 60px 0; }
.reader-tab { position: relative; aspect-ratio: 4 / 3; border-radius: 30px; padding: 12px; background: #19181a; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 40px 100px -30px rgb(0 0 0 / 0.9), 0 0 90px -30px rgb(251 191 36 / 0.16); }
.rd-screen { position: relative; height: 100%; border-radius: 20px; overflow: hidden; background: #efe5ce; display: flex; flex-direction: column; }
.rd-pages { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 9%; padding: 9% 8% 4%; }
.rd-pages::before { content: ""; position: absolute; left: 50%; top: 6%; bottom: 14%; width: 1px; background: linear-gradient(transparent, rgb(80 60 30 / 0.18), transparent); }
.rd-page { display: flex; flex-direction: column; gap: 7px; }
.rd-page i { display: block; height: 5px; border-radius: 3px; background: rgb(60 44 22 / 0.38); }
.rd-chap { display: block; width: 46%; height: 9px; border-radius: 4px; background: rgb(60 44 22 / 0.62); margin: 0 0 14px; }
.rd-drop { display: block; width: 18px; height: 18px; border-radius: 4px; background: rgb(60 44 22 / 0.55); margin-bottom: 2px; }
.rd-foot { display: flex; align-items: center; gap: 12px; padding: 0 8% 6%; font-size: 11px; font-weight: 600; color: rgb(60 44 22 / 0.6); }
.rd-foot .progress-line { flex: 1; background: rgb(60 44 22 / 0.14); }
.rd-panel { position: absolute; right: 0; bottom: 14px; width: 210px; padding: 14px; border-radius: 22px; display: grid; gap: 12px; background: var(--glass-fill); box-shadow: var(--glass-edge), 0 24px 60px -16px rgb(0 0 0 / 0.75); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); }
.rd-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-aa { flex: 1; height: 34px; border-radius: 12px; display: grid; place-items: center; font-family: Georgia, "Times New Roman", serif; font-size: 13px; color: #f5f5f4; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.rd-aa.big { font-size: 19px; }
.rd-themes { justify-content: space-between; padding: 0 2px; }
.rd-th { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.rd-th0 { background: #f5f5f4; }
.rd-th1 { background: #efe5ce; }
.rd-th2 { background: #2a2a2e; }
.rd-th3 { background: #000; }
.rd-th.on { box-shadow: 0 0 0 2px #0a0a0c, 0 0 0 4px #fbbf24; }
.rd-seg { display: flex; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; }
.rd-seg span { flex: 1; text-align: center; padding: 6px 0; border-radius: 999px; color: var(--muted); }
.rd-seg span.on { color: #fff; background: rgb(255 255 255 / 0.15); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); }
@media (max-width: 900px) {
  .books-split { grid-template-columns: 1fr; }
  .books-split .reader-stage { order: 2; }
  .reader-stage { padding: 0 24px 50px 0; max-width: 560px; }
  .rd-panel { width: 180px; padding: 12px; }
}
@media (max-width: 480px) { .rd-page i { height: 4px; } .rd-page { gap: 5px; } .rd-panel { width: 160px; } .rd-th { width: 24px; height: 24px; } }

/* ---------- Livres (page des fonctionnalités) : la diapositive du Spotlight ---------- */
.sp5::before { background: radial-gradient(60% 80% at 78% 38%, rgb(239 229 206 / 0.1), transparent 60%), radial-gradient(40% 60% at 20% 90%, rgb(251 191 36 / 0.12), transparent 70%), linear-gradient(120deg, #120f0a, #07070c); }
.vz-book { display: grid; gap: 12px; }
.vz-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; padding: 8% 7%; border-radius: 18px; background: #efe5ce; box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.7); }
.vz-page { display: flex; flex-direction: column; gap: 7px; }
.vz-page i { display: block; height: 5px; border-radius: 3px; background: rgb(60 44 22 / 0.38); }
.vz-chap { display: block; width: 50%; height: 9px; border-radius: 4px; background: rgb(60 44 22 / 0.62); margin-bottom: 12px; }
.vz-reader-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--glass-fill); box-shadow: var(--glass-edge); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.vz-themes { display: flex; gap: 6px; flex-wrap: wrap; }
.vz-themes .th { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); }
.vz-themes .th i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.vz-themes .th0 i { background: #f5f5f4; } .vz-themes .th1 i { background: #efe5ce; } .vz-themes .th2 i { background: #2a2a2e; } .vz-themes .th3 i { background: #000; }
.vz-themes .th.on { color: #fff; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25); }
.vz-themes .th.on i { box-shadow: 0 0 0 2px #fbbf24; }
.vz-aa { font-family: Georgia, "Times New Roman", serif; font-size: 13px; color: #f5f5f4; white-space: nowrap; }
.vz-aa b { font-size: 19px; font-weight: 400; margin-left: 6px; }
.vz-read { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--subtle); padding: 0 4px; }
.vz-read .progress-line { flex: 1; }
@media (max-width: 480px) { .vz-themes .th { padding: 0 8px 0 5px; font-size: 11px; } }
/* Sept onglets dans la barre de la page des fonctionnalités. */
.page-features .mnav a { width: 50px; }
.page-features .mnav a span { font-size: 9.5px; }
@media (max-width: 370px) { .page-features .mnav a { width: 46px; } .page-features .mnav a span { font-size: 9px; } }

/* Mur des formats : la rangée « Lus par Jellyfin », les tuiles larges et l'étiquette serveur. */
.g-server { grid-column: 1 / -1; }
.tile.wide3 { grid-column: span 3; }
.tag.srv { color: #d6d3d1; background: transparent; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22); }
.g-server .tile:not(.srv-hero) b { color: rgb(245 245 244 / 0.82); }
.srv-hero { background: rgb(255 255 255 / 0.04) !important; box-shadow: inset 0 0 0 1px var(--line-strong) !important; }
.srv-hero b { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #f5f5f4 !important; font-size: 26px !important; }
@media (max-width: 860px) { .tile.wide3 { grid-column: span 2; } }
@media (max-width: 420px) { .tile.wide3 { grid-column: 1 / -1; } }