/* Agent Radar — style « cinématique et épuré ».
   Grille de 8 px : tous les espacements sont des multiples de 8 (--s1 à --s16). Échelle typographique fixe.
   Polices : titre = Clash Display ou Cabinet Grotesk (Fontshare, licence ITF FFL : usage commercial et auto-hébergement
   permis, fichiers non modifiés) ; données = Geist Mono (licence OFL). */
@font-face { font-family: "Clash Display"; src: url(/fonts/ClashDisplay-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url(/fonts/ClashDisplay-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url(/fonts/ClashDisplay-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url(/fonts/CabinetGrotesk-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url(/fonts/CabinetGrotesk-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url(/fonts/CabinetGrotesk-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url(/fonts/CabinetGrotesk-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/GeistMono-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/GeistMono-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  /* Grille de 8 px */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;
  --edge: var(--s4);                 /* marge de page */
  /* Couleurs */
  /* Fond « anthracite chaud » (par défaut) : gris profond et doux */
  --bg: #1a1817;
  --t: #f3f1ee;
  --m: #aba6a0;
  --f: #77726c;
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .17);
  --surface: #232120;
  --panel: #1e1c1b;
  --label: rgba(255, 255, 255, .85);
  --ring: 255, 255, 255;
  --accent: #9fd4ff;                 /* bleu glacier */
  --accent-rgb: 159, 212, 255;
  --accent-ink: #061019;
  /* Polices */
  --display: "Clash Display", "Cabinet Grotesk", system-ui, sans-serif;
  --text: "Cabinet Grotesk", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
:root[data-accent="nacre"] { --accent: #efe9df; --accent-rgb: 239, 233, 223; --accent-ink: #14110c; }
/* Fond « porcelaine » : crème clair, la Terre posée comme un objet de studio ; accent glacier plus soutenu pour rester lisible */
:root[data-fond="porcelaine"] {
  color-scheme: light;
  --bg: #e6e2db; --t: #1d1c1a; --m: #625e57; --f: #8f8a81;
  --line: rgba(29, 28, 26, .1); --line2: rgba(29, 28, 26, .2);
  --surface: #fbfaf7; --panel: #f4f1ec; --label: rgba(255, 255, 255, .88); --ring: 29, 28, 26;
  --accent: #2f6d9f; --accent-rgb: 47, 109, 159; --accent-ink: #ffffff;
}
:root[data-font="cabinet"] { --display: "Cabinet Grotesk", system-ui, sans-serif; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* un élément masqué le reste, quel que soit son style (ex. badge Démonstration) */
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--t);
  font: 400 16px/24px var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.mono { font-family: var(--mono); }
.dim { color: var(--m); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* En-tête posé sur le globe : hauteur 80 (32 + 16 + 32) */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--s2); height: 80px; padding: 0 var(--edge);
}
.brand { display: flex; align-items: baseline; gap: var(--s1); text-decoration: none; white-space: nowrap; font: 500 18px/24px var(--display); letter-spacing: .01em; }
.brand span { font: 400 14px/24px var(--text); color: var(--f); }
.brand .by { display: inline-flex; align-items: center; gap: var(--s1); }
/* Logo Solvane : tout petit, légèrement transparent, pour rappeler la marque sans voler la vedette à la Terre */
.solvane-mark { width: 16px; height: 16px; opacity: .55; flex: none; transition: opacity .6s var(--ease); }
.brand:hover .solvane-mark { opacity: .85; }
.credit { display: inline-flex; align-items: center; gap: var(--s1); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.top .grow { flex: 1; }
.live { display: inline-flex; align-items: center; gap: var(--s1); height: 40px; font: 400 14px/24px var(--text); color: var(--m); white-space: nowrap; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--f); }
.live.on i { background: var(--accent); animation: breathe 3s var(--ease) infinite; }
.live.demo i { background: var(--accent); }
.live.err i { background: #fff; }
@keyframes breathe { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); white-space: nowrap;
  height: 40px; padding: 0 var(--s2); border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line2); color: var(--t);
  font: 500 14px/24px var(--text); cursor: pointer; text-decoration: none;
  transition: border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.btn:hover { border-color: var(--m); }
.btn .arrow { display: inline-block; transition: transform .6s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn.solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.solid:hover { background: var(--t); border-color: var(--t); color: var(--bg); }
.btn.lg { height: 48px; padding: 0 var(--s3); font-size: 16px; }
.toggle .sw { width: 24px; height: 16px; border-radius: 8px; background: var(--line2); position: relative; transition: background .4s var(--ease); }
.toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .4s var(--ease); }
.toggle[aria-pressed="true"] .sw { background: var(--accent); }
.toggle[aria-pressed="true"] .sw::after { transform: translateX(8px); background: var(--accent-ink); }

/* Globe */
.stage { position: relative; overflow: hidden; }
.stage .globe { position: absolute; inset: 0; cursor: grab; }
.stage .globe:active { cursor: grabbing; }
.stage canvas { display: block; }
.stage .scan-ring { position: absolute; inset: 0; pointer-events: none; }
.site-label {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  font: 400 12px/16px var(--mono); color: var(--label); white-space: nowrap;
  transition: opacity .6s var(--ease);
}
.site-label::before { content: ""; display: inline-block; width: 16px; height: 1px; background: var(--label); opacity: .5; vertical-align: middle; margin-right: var(--s1); }

/* Marque « démonstration » : toujours visible */
.demo-pill {
  position: absolute; top: var(--s3); left: 50%; transform: translateX(-50%); z-index: 11;
  height: 32px; display: inline-flex; align-items: center; padding: 0 var(--s2);
  border: 1px solid rgba(var(--accent-rgb), .5); color: var(--accent); background: var(--bg);
  border-radius: 999px; font: 400 13px/16px var(--text); white-space: nowrap;
}

/* Titres qui apparaissent ligne par ligne (une ligne = .ln > span) */
.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln > span { display: block; transform: translateY(110%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.on .ln > span, body:not(.intro) .hero-copy .ln > span { transform: none; }
.fade { opacity: 0; transform: translateY(8px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.on .fade, body:not(.intro) .hero-copy .fade { opacity: 1; transform: none; }

/* Ouverture : l'interface apparaît après le lever de soleil */
.chrome { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
body.intro .chrome { opacity: 0; transform: translateY(8px); pointer-events: none; }
.skip {
  position: absolute; right: var(--edge); bottom: var(--edge); z-index: 12;
  height: 32px; padding: 0 var(--s2); border-radius: 999px; border: 1px solid var(--line2);
  background: var(--bg); color: var(--m); font: 400 13px/16px var(--text); cursor: pointer;
  transition: opacity .8s var(--ease);
}
body:not(.intro) .skip { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  :root { --edge: var(--s2); }
  .top { height: 64px; }
  .brand .by { font-size: 0; gap: 0; }   /* téléphone : seul le petit logo reste */
  .top { gap: var(--s1); }
  .top .btn { padding: 0 12px; }
}
html.still *, html.still *::before, html.still *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}