/* Vitrine ErraTalk (page « en développement »). Mêmes couleurs, halos et mouvement que l'application (erratalk-design/src/tokens.css). Aucun script. */
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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; }

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bg: #09090a;
  --glow-1: rgba(170, 30, 56, 0.40);
  --glow-2: rgba(255, 140, 20, 0.16);
  --text: #f5f5f7;
  --text-muted: #9d9da4;
  --accent: #ffa726;
  --accent-soft: rgba(255, 167, 38, 0.12);
  --accent-line: rgba(255, 167, 38, 0.70);
  --on-accent: #1a0f00;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --glow-1: rgba(122, 31, 43, 0.10);
    --glow-2: rgba(255, 167, 38, 0.12);
    --text: #1d1d1f;
    --text-muted: #6e6e73;
    --accent: #7a1f2b;
    --accent-soft: rgba(122, 31, 43, 0.08);
    --accent-line: rgba(122, 31, 43, 0.45);
    color-scheme: light;
  }
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; isolation: isolate; }

/* Lueurs de fond : elles dérivent très lentement */
.halo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.halo i { position: absolute; border-radius: 50%; }
.halo__a { width: min(1000px, 130vw); height: min(760px, 100vh); left: -300px; top: -300px; background: radial-gradient(closest-side, var(--glow-1), transparent); animation: drift-a 24s ease-in-out infinite alternate; }
.halo__b { width: min(900px, 120vw); height: min(640px, 90vh); right: -300px; bottom: -260px; background: radial-gradient(closest-side, var(--glow-2), transparent); animation: drift-b 28s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(40px, 30px); } }
@keyframes drift-b { to { transform: translate(-40px, -30px); } }

.top { padding: 22px 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(180deg, #ff9a2e, #e8521f); color: #fff; font-size: 20px; font-weight: 700; box-shadow: 0 4px 16px rgba(255, 167, 38, 0.35); }
.brand__name { font-size: 18px; font-weight: 600; }

.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 0 56px; text-align: center; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 600; }
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; transform: scale(0.8); } }

.title { display: flex; flex-direction: column; font-size: clamp(36px, 9.6vw, 76px); font-weight: 800; letter-spacing: -0.026em; line-height: 1.08; }
.title__grad { background: linear-gradient(90deg, #ff6a62, #ffa726); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 560px; color: var(--text-muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.5; }

.foot { padding: 24px 56px; color: var(--text-muted); font-size: 13px; }

/* Apparition : montée de 24 px en fondu, avec un léger décalage */
.reveal { opacity: 0; transform: translateY(24px); animation: reveal 0.5s var(--ease) forwards; }
.d0 { animation-delay: 0s; } .d1 { animation-delay: 0.08s; } .d2 { animation-delay: 0.16s; } .d3 { animation-delay: 0.24s; } .d4 { animation-delay: 0.32s; }
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .top, .foot { padding-left: 24px; padding-right: 24px; }
  .top { padding-top: 18px; padding-bottom: 18px; }
  .hero { padding: 0 24px; gap: 18px; }
  .badge { font-size: 13px; }
  .foot { text-align: center; }
}

/* Moins de mouvement : tout est figé, rien n'est caché */
@media (prefers-reduced-motion: reduce) {
  .halo i, .badge__dot { animation: none; }
  .reveal { opacity: 1; transform: none; animation: none; }
}