/* sandflow.ai : le mot Sandflow sur le fond animé « Shape Waves » (React Bits), formes #282828, survol #7C3AED. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --encre: #121117;
  --craie: #F7F6F3;
  --gris: #8E8B96;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--encre); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  background: var(--encre);
  color: var(--craie);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Accueil : le fond animé plein écran, le mot au centre ---------- */
.home { height: 100vh; height: 100svh; overflow: hidden; }
.waves { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--encre); }
.waves canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms cubic-bezier(.22, 1, .36, 1); }
.waves[data-ready="true"] canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .waves canvas { transition: none; } }

/* Le mot est centré sur l'écran entier (pas sur l'espace au-dessus du pied de page). */
.home main {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.home footer { position: fixed; left: 0; right: 0; bottom: 0; justify-content: space-between; align-items: center; }
/* Le symbole, tout petit en bas à droite, toujours blanc (le logo n'est jamais gris). */
.mark { display: block; width: 16px; height: 16px; }
.word { margin: 0; line-height: 0; }
/* Trois fois plus petit qu'au départ (200 à 640 px), un halo d'Encre large et léger pour rester lisible sur les points. */
.word img { display: block; width: clamp(67px, 14vw, 213px); height: auto; filter: drop-shadow(0 0 48px rgba(18, 17, 23, .5)); }

footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 24px clamp(16px, 4vw, 48px) calc(24px + env(safe-area-inset-bottom, 0px));
  font-size: 13px;
  color: var(--gris);
}
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--craie); }
a:focus-visible { outline: 2px solid var(--craie); outline-offset: 3px; border-radius: 2px; }

/* ---------- Pages de texte (mentions légales, 404) ---------- */
.logo { display: block; width: clamp(148px, 32%, 196px); height: auto; }
.page main { flex: 1; display: grid; place-items: start center; padding: clamp(32px, 6vw, 72px) 16px; }
.doc { width: min(720px, 100%); }
.doc .logo { margin-bottom: 48px; }
.doc h1 { margin: 0 0 32px; font-weight: 300; font-size: clamp(28px, 4vw, 40px); line-height: 1.08; letter-spacing: -.03em; }
.doc h2 { font-size: 15px; font-weight: 600; margin: 32px 0 8px; }
.doc p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--craie); }
.doc a { color: var(--craie); text-underline-offset: 3px; text-decoration-color: rgba(247, 246, 243, .4); }