/* Unforecast — site vitrine. Une seule feuille de style, sans dépendance externe
   (aucune police ni script tiers : rien n'est chargé hors de unforecast.app). */

@font-face {
  font-family: "Oxanium";
  src: url("../fonts/Oxanium-VariableFontWeight.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #0b1117;
  --bg-raised: #121a22;
  --line: #24303c;
  --text: #e3e8ee;
  --muted: #9aa6b2;
  --accent: #5fd1de;
  --accent-ink: #0b1117;
  --violet: #b48cff;
  --magenta: #f45bd0;
  --radius: 14px;
  --wrap: 1080px;
  --f-title: "Oxanium", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.6;
}

a { color: var(--accent); }
a:hover, a:focus-visible { color: #a6ecf4; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; display: block; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 16px; top: -48px;
  background: var(--accent); color: var(--accent-ink);
  padding: 8px 14px; border-radius: 8px; font-weight: 600; z-index: 10;
}
.skip:focus { top: 12px; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* En-tête */
.site-head {
  border-bottom: 1px solid var(--line);
  background: rgba(11, 17, 23, 0.92);
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(8px);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-family: var(--f-title); font-weight: 600; font-size: 20px; letter-spacing: 0.04em;
}
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.site-nav { display: flex; align-items: center; gap: 18px; font-size: 15px; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--text); }
.lang {
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px;
  font-family: var(--f-title); font-size: 13px; letter-spacing: 0.08em;
}

/* Accueil */
.hero { padding: 56px 0 40px; }
.hero .wrap {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}
.kicker {
  font-family: var(--f-title); color: var(--accent);
  letter-spacing: 0.18em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px;
}
h1, h2, h3 { font-family: var(--f-title); font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(44px, 7vw, 76px); margin: 0; letter-spacing: 0.01em; }
.subtitle { font-family: var(--f-title); font-size: clamp(20px, 3vw, 28px); color: var(--muted); margin: 6px 0 22px; }
.definition {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px; margin: 0 0 22px; color: var(--text);
}
.definition b { font-family: var(--f-title); letter-spacing: 0.03em; }
.definition .ipa, .definition i { color: var(--muted); }
.lede { font-size: 19px; margin: 0 0 26px; }
.cta { font-family: var(--f-title); font-size: 22px; color: var(--accent); margin: 0 0 18px; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.stores li {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px;
  color: var(--muted); font-size: 15px; background: var(--bg-raised);
}
.stores strong { color: var(--text); font-weight: 600; }

.phone {
  max-width: 340px; margin: 0 auto;
  border-radius: 34px; overflow: hidden; background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* Titre de l'accueil : les lettres s'allument une à une, puis le mot glitche
   brièvement à intervalles irréguliers. Sans script : chaque lettre a son
   propre cycle (durées sans multiple commun) et deux copies colorées du mot
   le découpent par tranches sur deux autres cycles, si bien que l'ensemble
   ne se répète pas de façon perceptible. Chaque glitch de lettre dure
   100 ms quel que soit son cycle (une animation par lettre), et le premier
   ne commence qu'après l'apparition de tout le mot. */
.glitch { position: relative; white-space: nowrap; }
.glitch-letters > span {
  display: inline-block;
  animation:
    letter-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--in) both,
    letter-glitch-1 var(--g) steps(1, end) 1.6s infinite;
}
.glitch-letters > span:nth-child(1) { --in: 0.10s; --g: 9.7s; animation-name: letter-in, letter-glitch-1; }
.glitch-letters > span:nth-child(2) { --in: 0.18s; --g: 13.1s; animation-name: letter-in, letter-glitch-2; }
.glitch-letters > span:nth-child(3) { --in: 0.26s; --g: 7.9s; animation-name: letter-in, letter-glitch-3; }
.glitch-letters > span:nth-child(4) { --in: 0.34s; --g: 11.3s; animation-name: letter-in, letter-glitch-4; }
.glitch-letters > span:nth-child(5) { --in: 0.42s; --g: 8.9s; animation-name: letter-in, letter-glitch-5; }
.glitch-letters > span:nth-child(6) { --in: 0.50s; --g: 14.9s; animation-name: letter-in, letter-glitch-6; }
.glitch-letters > span:nth-child(7) { --in: 0.58s; --g: 10.1s; animation-name: letter-in, letter-glitch-7; }
.glitch-letters > span:nth-child(8) { --in: 0.66s; --g: 12.7s; animation-name: letter-in, letter-glitch-8; }
.glitch-letters > span:nth-child(9) { --in: 0.74s; --g: 8.3s; animation-name: letter-in, letter-glitch-9; }
.glitch-letters > span:nth-child(10) { --in: 0.82s; --g: 15.7s; animation-name: letter-in, letter-glitch-10; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  opacity: 0; pointer-events: none;
}
.glitch::before { color: var(--accent); animation: title-slice-a 5.3s steps(1, end) 1.7s infinite; }
.glitch::after { color: var(--magenta); animation: title-slice-b 7.1s steps(1, end) 2.3s infinite; }

@keyframes letter-in {
  0%   { opacity: 0; translate: 0 0.18em; filter: blur(8px); text-shadow: 0 0 0.4em var(--accent); }
  30%  { opacity: 1; }
  42%  { opacity: 0.2; }
  58%  { opacity: 1; translate: 0 0; filter: blur(0); text-shadow: 0 0 0.35em var(--accent); }
  100% { opacity: 1; translate: 0 0; filter: blur(0); text-shadow: 0 0 0 transparent; }
}
@keyframes letter-glitch-1 {
  0%, 100% { transform: none; color: var(--text); text-shadow: none; }
  27.84% { transform: translate(0.05em, -0.02em) skewX(-12deg); color: var(--accent); text-shadow: -0.05em 0 var(--magenta); }
  28.35% { transform: translate(-0.04em, 0.02em); color: var(--text); text-shadow: 0.05em 0 var(--accent), -0.03em 0 var(--magenta); }
  28.87% { transform: none; color: var(--text); text-shadow: none; }
}
@keyframes letter-glitch-2 {
  0%, 100% { transform: none; color: var(--text); text-shadow: none; }
  6.11% { transform: translate(0.05em, -0.02em) skewX(-12deg); color: var(--accent); text-shadow: -0.05em 0 var(--magenta); }
  6.49% { transform: translate(-0.04em, 0.02em); color: var(--text); text-shadow: 0.05em 0 var(--accent), -0.03em 0 var(--magenta); }
  6.87% { transform: none; color: var(--text); text-shadow: none; }
}
@keyframes letter-glitch-3 {
  0%, 100% { transform: none; color: var(--text); text-shadow: none; }
  56.96% { transform: translate(0.05em, -0.02em) skewX(-12deg); color: var(--accent); text-shadow: -0.05em 0 var(--magenta); }
  57.59% { transform: translate(-0.04em, 0.02em); color: var(--text); text-shadow: 0.05em 0 var(--accent), -0.03em 0 var(--magenta); }
  58.23% { transform: none; color: var(--text); text-shadow: none; }
}
@keyframes letter-glitch-4 {
  0%, 100% { transform: none; color: var(--text); text-shadow: none; }
  15.04% { transform: translate(0.05em, -0.02em) skewX(-12deg); color: var(--accent); text-shadow: -0.05em 0 var(--magenta); }
  15.49% { transform: translate(-0.04em, 0.02em); color: var(--text); text-shadow: 0.05em 0 var(--accent), -0.03em 0 var(--magenta); }
  15.93% { transform: none; color: var(--text); text-shadow: none; }
}
@keyframes letter-glitch-5 {
  0%, 100% { transform: none; color: var(--text); text-shadow: none; }
  74.16% { transform: translate(0.05em, -0.02em) skewX(-12deg); color: var(--accent); text-shadow: -0.05em 0 var(--magenta); }
  74.72% { transform: translate(-0.04em, 0.02em); color: var(--text); text-shadow: 0.05em 0 var(--accent), -0.03em 0 var(--magenta); }
  75.28% { transform: none; color: var(--text); text-shadow: none; }
}
@keyframes letter-glitch-6 {
  0%, 100% { transform: none; color: var(--text); text-shadow: none; }
  24.16% { transform: translate(0.05em, -0.02em) skewX(-12deg); color: var(--accent); text-shadow: -0.05em 0 var(--magenta); }
  24.50% { transform: translate(-0.04em, 0.02em); color: var(--text); text-shadow: 0.05em 0 var(--accent), -0.03em 0 var(--magenta); }
  24.83% { transform: none; color: var(--text); text-shadow: none; }
}
@keyframes letter-glitch-7 {
  0%, 100% { transform: none; color: var(--text); text-shadow: none; }
  12.87% { transform: translate(0.05em, -0.02em) skewX(-12deg); color: var(--accent); text-shadow: -0.05em 0 var(--magenta); }
  13.37% { transform: translate(-0.04em, 0.02em); color: var(--text); text-shadow: 0.05em 0 var(--accent), -0.03em 0 var(--magenta); }
  13.86% { transform: none; color: var(--text); text-shadow: none; }
}
@keyframes letter-glitch-8 {
  0%, 100% { transform: none; color: var(--text); text-shadow: none; }
  42.52% { transform: translate(0.05em, -0.02em) skewX(-12deg); color: var(--accent); text-shadow: -0.05em 0 var(--magenta); }
  42.91% { transform: translate(-0.04em, 0.02em); color: var(--text); text-shadow: 0.05em 0 var(--accent), -0.03em 0 var(--magenta); }
  43.31% { transform: none; color: var(--text); text-shadow: none; }
}
@keyframes letter-glitch-9 {
  0%, 100% { transform: none; color: var(--text); text-shadow: none; }
  27.71% { transform: translate(0.05em, -0.02em) skewX(-12deg); color: var(--accent); text-shadow: -0.05em 0 var(--magenta); }
  28.31% { transform: translate(-0.04em, 0.02em); color: var(--text); text-shadow: 0.05em 0 var(--accent), -0.03em 0 var(--magenta); }
  28.92% { transform: none; color: var(--text); text-shadow: none; }
}
@keyframes letter-glitch-10 {
  0%, 100% { transform: none; color: var(--text); text-shadow: none; }
  50.96% { transform: translate(0.05em, -0.02em) skewX(-12deg); color: var(--accent); text-shadow: -0.05em 0 var(--magenta); }
  51.27% { transform: translate(-0.04em, 0.02em); color: var(--text); text-shadow: 0.05em 0 var(--accent), -0.03em 0 var(--magenta); }
  51.59% { transform: none; color: var(--text); text-shadow: none; }
}
@keyframes title-slice-a {
  0%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  17%      { opacity: 0.9; transform: translate(-0.05em, 0); clip-path: inset(14% 0 56% 0); }
  18.2%    { opacity: 0.9; transform: translate(0.06em, 0); clip-path: inset(60% 0 12% 0); }
  19.4%    { opacity: 0; transform: none; clip-path: inset(0); }
  58%      { opacity: 0.9; transform: translate(0.04em, 0); clip-path: inset(38% 0 36% 0); }
  59.1%    { opacity: 0; transform: none; clip-path: inset(0); }
  61.3%    { opacity: 0.9; transform: translate(-0.07em, 0); clip-path: inset(6% 0 72% 0); }
  62.4%    { opacity: 0; transform: none; clip-path: inset(0); }
}
@keyframes title-slice-b {
  0%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  33%      { opacity: 0.85; transform: translate(0.05em, 0); clip-path: inset(48% 0 20% 0); }
  34%      { opacity: 0.85; transform: translate(-0.04em, 0); clip-path: inset(22% 0 60% 0); }
  35.1%    { opacity: 0; transform: none; clip-path: inset(0); }
  79%      { opacity: 0.85; transform: translate(0.07em, 0); clip-path: inset(70% 0 4% 0); }
  79.9%    { opacity: 0.85; transform: translate(-0.03em, 0); clip-path: inset(30% 0 44% 0); }
  80.8%    { opacity: 0.85; transform: translate(0.05em, 0); clip-path: inset(8% 0 78% 0); }
  81.8%    { opacity: 0; transform: none; clip-path: inset(0); }
}

/* Aperçu de l'introduction du jeu, à droite du titre. Ce n'est pas une
   reproduction exacte : le titre et le texte gardent la place qu'ils ont dans
   le jeu (440 × 956 points logiques), sans l'icône de langue ni le bouton. La
   mise à l'échelle du téléphone passe par les unités de conteneur. 1 point du jeu = var(--u). Le texte
   s'écrit lettre par lettre grâce à assets/js/site.js ; sans script, le premier
   écran s'affiche en entier. */
.hero-device { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-device .phone { width: 100%; }
/* Le téléphone lui-même : cadre noir neutre, liseré métallique et ombre,
   sans halo coloré, pour que l'écran se lise comme un vrai écran allumé. */
.intro-phone {
  container-type: inline-size;
  padding: 10px; border-radius: 46px; overflow: visible;
  background: #060607;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1.5px #202327,
    0 30px 80px rgba(0, 0, 0, 0.6);
}
.intro {
  --u: calc(100cqw / 440);
  position: relative; aspect-ratio: 440 / 956;
  border-radius: 36px; overflow: hidden;
  background: #071117; color: #d6dcdd;
  font-family: var(--f-text);
}
/* Encoche de l'appareil photo, et verre de l'écran : un reflet léger en haut
   à gauche et des bords à peine assombris, posés par-dessus le texte. */
.intro::before {
  content: ""; position: absolute; z-index: 2;
  top: calc(14 * var(--u)); left: 50%; translate: -50% 0;
  width: calc(108 * var(--u)); height: calc(32 * var(--u));
  border-radius: calc(16 * var(--u)); background: #000;
}
.intro::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 32%),
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.32) 100%);
}
.intro-tunnel { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-mark {
  position: absolute; left: 50%; top: 50%;
  width: calc(228 * var(--u)); height: auto;
  translate: -50% -50%; opacity: 0.9; filter: brightness(0.5);
}
.intro-pages { position: absolute; left: calc(24 * var(--u)); right: calc(24 * var(--u)); top: calc(340 * var(--u)); }
.intro-page { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity 0.3s ease; }
.intro-page.is-active { opacity: 1; }
.intro-title { font-size: calc(36 * var(--u)); line-height: 1.22; margin: 0 0 calc(24 * var(--u)); }
.intro-body { font-size: calc(16 * var(--u)); line-height: 1.45; white-space: pre-line; }
.intro-body .intro-rest { color: transparent; }
/* Le script vide le texte avant de l'écrire : on le masque jusque-là pour
   éviter un éclair du texte complet. Sans script, il réapparaît au bout de
   1,5 s (ou tout de suite si le navigateur sait qu'il n'exécute aucun script). */
.intro:not(.is-ready) .intro-body {
  visibility: hidden;
  animation: intro-text-fallback 0s 1.5s forwards;
}
@keyframes intro-text-fallback { to { visibility: visible; } }
@media (scripting: none) {
  .intro .intro-body { visibility: visible; }
}
.intro-dots {
  position: absolute; left: 0; right: 0; bottom: calc(40 * var(--u));
  display: flex; justify-content: center; gap: calc(8 * var(--u));
}
.intro-dots span {
  width: calc(8 * var(--u)); height: calc(8 * var(--u));
  border-radius: 50%; background: #899294;
}
.intro-dots span.is-active { background: #73d2de; }
/* Bouton de pause des animations (titre et aperçu), affiché par le script. */
.motion-toggle {
  font: inherit; font-size: 14px; color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
}
.motion-toggle:hover, .motion-toggle:focus-visible { color: var(--text); border-color: var(--muted); }
.motion-paused .glitch-letters > span:nth-child(n) { animation: none; }
.motion-paused .glitch::before, .motion-paused .glitch::after { animation: none; display: none; }

/* Sections */
section { padding: 48px 0; border-top: 1px solid var(--line); }
section h2 { font-size: clamp(26px, 3.6vw, 36px); margin: 0 0 18px; }
.prose { max-width: 680px; }
.prose p { margin: 0 0 16px; }

.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.card h3 { margin: 0 0 8px; font-size: 20px; }
.card p { margin: 0; color: var(--muted); }
.after-cards { margin-top: 20px; }
.card .tag { font-family: var(--f-title); font-size: 13px; letter-spacing: 0.14em; color: var(--accent); }

.features { columns: 2; column-gap: 40px; padding-left: 20px; margin: 0; }
.features li { margin: 0 0 10px; break-inside: avoid; }

/* Galerie */
.gallery {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
  gap: 18px; overflow-x: auto; padding: 4px 2px 14px;
  scroll-snap-type: x mandatory;
}
.gallery figure { margin: 0; scroll-snap-align: start; }
.gallery img { border: 1px solid var(--line); border-radius: 22px; }
.gallery figcaption { font-size: 15px; color: var(--muted); margin-top: 10px; }

.closing { text-align: center; }
.closing p { font-family: var(--f-title); font-size: clamp(22px, 3.2vw, 30px); margin: 0 0 8px; }
.closing .cta { margin-top: 16px; }

/* Pages de texte (confidentialité, assistance) */
.doc { padding: 40px 0 64px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(34px, 5vw, 48px); margin: 0 0 6px; }
.doc .updated { color: var(--muted); margin: 0 0 28px; }
.doc h2 { font-size: 24px; margin: 36px 0 12px; }
.doc h3 { font-size: 19px; margin: 24px 0 8px; }
.doc p, .doc li { margin: 0 0 12px; }
.doc ul { padding-left: 22px; }
.summary {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 22px; margin: 0 0 8px;
}
.summary ul { margin: 0; }
.todo {
  background: rgba(180, 140, 255, 0.12); color: #d9c8ff;
  border-radius: 4px; padding: 0 4px;
}
details.faq {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raised); padding: 0 18px; margin: 0 0 12px;
}
/* Question repliable : le triangle natif est remplacé par un chevron à droite,
   qui pivote à l'ouverture. */
details.faq summary {
  cursor: pointer; padding: 16px 36px 16px 0; font-weight: 600;
  list-style: none; position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::marker { content: ""; }
details.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
details.faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
details.faq summary:hover { color: #fff; }
details.faq[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
details.faq > *:last-child { margin-bottom: 16px; }

/* Pied de page */
.site-foot { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 14px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 16px; }
.site-foot a { color: var(--muted); }

@media (max-width: 820px) {
  .hero { padding-top: 32px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 32px; }
  .cols { grid-template-columns: 1fr; }
  .features { columns: 1; }
  .site-nav { gap: 12px; font-size: 14px; }
  .site-nav .hide-sm { display: none; }
}

/* Petits téléphones : l'icône seule, le nom reste lu par les lecteurs d'écran. */
@media (max-width: 480px) {
  .brand-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Mouvement réduit demandé : le titre s'affiche d'emblée, sans glitch. */
@media (prefers-reduced-motion: reduce) {
  .glitch-letters > span:nth-child(n) { animation: none; }
  .glitch::before, .glitch::after { animation: none; display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  details.faq summary::after { transition: transform 0.2s ease, margin-top 0.2s ease; }
}