/* AstreFlow — site public. Thème nuit unique. Deux tons de surface (nuit, panneau), un accent
   (orbite bleue), un rayon (14 px). Les dégradés n'existent que dans les objets dessinés. */
:root {
  color-scheme: dark;
  --nuit: #0b0c10;
  --panneau: #14161d;
  --encre: #eceef2;
  --doux: #9aa0ad;
  --halo: #1d3fb4;
  --halo-clair: #3d6dff;
  --halo-vif: #8fb0ff;
  --rayon: 14px;
  --affiche: "Space Grotesk", "Segoe UI", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --texte: "Segoe UI Variable Text", "Segoe UI", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --e-out: cubic-bezier(.23, 1, .32, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scrollbar-color: #2a2d38 var(--nuit);
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  color: var(--encre);
  background-color: var(--nuit);
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px);
  background-size: 28px 28px;
  font: 400 1.0625rem/1.65 var(--texte);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
p { text-wrap: pretty; }
ul { list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: #fff; }
::selection { background: var(--halo); color: #fff; }
:focus-visible { outline: 2px solid var(--halo-vif); outline-offset: 3px; border-radius: 4px; }

/* ---- Barre du haut ---------------------------------------------------------------------- */
.barre {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 72px; padding: 0 clamp(20px, 5vw, 64px);
  position: relative; z-index: 3;
}
.marque {
  display: flex; align-items: center; gap: .6rem;
  font: 500 1.2rem/1 var(--affiche); letter-spacing: -.01em;
  color: var(--encre); text-decoration: none;
}
.flow { color: var(--halo-vif); }
.logo { width: 1.8rem; height: 1.8rem; flex: none; border-radius: 8px; }
.barre nav { display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 1.6rem); font-size: .925rem; color: var(--doux); }
.barre nav a { text-decoration: none; }

/* ---- Héros : le texte à gauche, l'astre observé à droite --------------------------------- */
.heros {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; align-content: center;
  min-height: calc(100svh - 72px);
  padding: 16px clamp(20px, 5vw, 64px) 110px;
}
.heros-texte {
  position: relative; z-index: 1;
  display: grid; gap: 24px; justify-items: start;
  max-width: 640px;
}
.heros h1 {
  font: 500 clamp(2.3rem, 4.6vw, 3.55rem)/1.08 var(--affiche);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.heros h1 span { display: block; color: var(--halo-vif); }
.pitch { max-width: 46ch; color: var(--doux); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 6px; }
.bouton {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 52px; padding: .85rem 1.6rem;
  font: 500 .975rem/1 var(--affiche);
  color: var(--nuit); background: var(--encre);
  border: 0; border-radius: var(--rayon);
  text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--e-out), background 180ms var(--e-out);
}
.bouton:active { transform: scale(.98); }
.bouton, .barre nav a, .marque {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.bouton svg { width: 16px; height: 16px; transition: transform 220ms var(--e-out); }
.lien-second { font-size: .95rem; color: var(--doux); }

/* L'astre : l'objet du laboratoire. Seul endroit où vivent dégradés et halos. */
.astre {
  position: absolute; z-index: 0;
  left: max(38%, 430px); top: -6%;
  width: min(140vmin, 1220px); aspect-ratio: 1;
  overflow: visible;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 46%, transparent 74%);
  mask-image: linear-gradient(#000 46%, transparent 74%);
}
.c0 { stop-color: var(--nuit); }
.c1 { stop-color: #10131c; }
.c2 { stop-color: #1b2f6e; }
.limbe { stroke: rgba(255, 255, 255, .16); stroke-width: 1.2; }
.part {
  stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 3px 6px rgba(61, 109, 255, .55)) drop-shadow(0 6px 28px rgba(61, 109, 255, .4));
}
.tete { fill: #fff; filter: drop-shadow(0 2px 5px rgba(143, 176, 255, .8)); }
.etoile { fill: #fff; }
.orbite-loin { stroke: rgba(255, 255, 255, .07); stroke-width: 1.5; }
.orbite-pres { stroke: rgba(143, 176, 255, .28); stroke-width: 1.5; }
.tete-loin { fill: var(--halo-vif); }
.s0 { stop-color: var(--halo-vif); stop-opacity: 0; }
.s1 { stop-color: var(--halo-vif); stop-opacity: .55; }
.s2 { stop-color: #fff; stop-opacity: .95; }

/* ---- Sections ---------------------------------------------------------------------------- */
.section {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: clamp(84px, 12vw, 160px) clamp(20px, 5vw, 64px) 0;
}
.section > h2 {
  font: 500 clamp(1.9rem, 3.6vw, 2.8rem)/1.12 var(--affiche);
  letter-spacing: -.015em;
  max-width: 26ch;
  text-wrap: balance;
}
.section > .intro { margin-top: 16px; max-width: 54ch; color: var(--doux); }

/* Comment il travaille : un index typographique, séparé par l'espace. La trajectoire se
   dessine au défilement le long des quatre temps : c'est le vol de l'agent, pas un ornement. */
.travail {
  position: relative;
  margin-top: clamp(28px, 4.5vw, 48px);
  padding-left: clamp(44px, 6vw, 84px);
}
.travail ul { display: grid; gap: clamp(34px, 5vw, 56px); }
.trajectoire {
  position: absolute; left: 4px; top: 10px;
  width: 34px; height: calc(100% - 20px);
  overflow: visible; pointer-events: none;
}
.trajectoire .fil {
  stroke: var(--halo-clair); stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 2px 6px rgba(61, 109, 255, .5));
}
.anime .trajectoire .fil { stroke-dasharray: 1; stroke-dashoffset: 1; }
.travail li {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 14px 56px; align-items: baseline;
}
.travail h3 {
  font: 500 clamp(2rem, 4.2vw, 3.4rem)/1.05 var(--affiche);
  letter-spacing: -.015em;
}
.travail h3 em { font-style: normal; color: var(--halo-vif); }
.travail p { color: var(--doux); max-width: 52ch; }

/* Garde-fous : une grande pièce, deux petites. Surfaces pleines, sans cadre. */
.bento {
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  margin-top: clamp(28px, 4.5vw, 48px);
}
.bento article {
  display: grid; gap: 10px; align-content: end;
  padding: clamp(24px, 3vw, 36px);
  background: var(--panneau);
  border-radius: var(--rayon);
}
.bento .grande { grid-row: 1 / 3; min-height: 440px; align-content: space-between; }
.bento h3 { font: 500 1.3rem/1.3 var(--affiche); letter-spacing: -.01em; }
.bento p { color: var(--doux); font-size: .975rem; max-width: 44ch; }
.jauge { width: min(64%, 290px); margin: 10px auto 24px; display: block; overflow: visible; }
.jauge .cadran { stroke: rgba(255, 255, 255, .13); }
.jauge .graduation { stroke: rgba(255, 255, 255, .22); stroke-width: 2; stroke-linecap: round; }
.jauge .plafond { stroke: var(--halo-vif); stroke-width: 3; stroke-linecap: round; }
.bento .pictos { width: 26px; height: 26px; color: var(--halo-vif); margin-bottom: 6px; }

/* Manifeste : la bande pleine largeur, une seule phrase qui se révèle au défilement. */
.manifeste {
  margin-top: clamp(84px, 12vw, 160px);
  padding: clamp(90px, 13vw, 170px) clamp(20px, 5vw, 64px);
  background: var(--panneau);
}
.manifeste-coeur { max-width: 1180px; margin: 0 auto; display: grid; gap: 22px; }
.manifeste h2 {
  font: 500 clamp(2.1rem, 5vw, 3.7rem)/1.14 var(--affiche);
  letter-spacing: -.015em;
  max-width: 21ch;
}
.manifeste p { color: var(--doux); max-width: 54ch; }
.mot { opacity: 1; }

/* Action : l'appel final, centré. */
.appel {
  display: grid; justify-items: center; gap: 26px;
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: clamp(90px, 13vw, 170px) clamp(20px, 5vw, 64px) clamp(70px, 9vw, 120px);
  text-align: center;
}
.sceau { width: 84px; height: 84px; }
.appel h2 {
  font: 500 clamp(2rem, 4.6vw, 3.4rem)/1.1 var(--affiche);
  letter-spacing: -.015em;
  max-width: 22ch;
  text-wrap: balance;
}
.appel p { color: var(--doux); max-width: 44ch; margin-top: -8px; }

/* ---- Pages de texte (confidentialité, conditions) ----------------------------------------- */
.page {
  width: 100%; max-width: 41rem;
  margin: 0 auto;
  padding: 24px clamp(20px, 5vw, 32px) 56px;
  display: grid; gap: 30px;
}
.page header { display: grid; gap: 10px; padding-top: 20px; }
.page h1 { font: 500 clamp(1.9rem, 6vw, 2.6rem)/1.15 var(--affiche); letter-spacing: -.015em; }
.page .date { color: var(--doux); font-size: .9375rem; }
.page section { display: grid; gap: 10px; }
.page h2 { font: 500 1.3rem/1.3 var(--affiche); letter-spacing: -.01em; }
.page p, .page li { color: var(--doux); }
.page strong { color: var(--encre); font-weight: 600; }
.page ul { display: grid; gap: 8px; padding-left: 1.2rem; list-style: disc; }
.page a { color: var(--halo-vif); }

/* ---- Pied de page -------------------------------------------------------------------------- */
footer {
  margin-top: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px;
  width: 100%; max-width: 1180px; margin-inline: auto;
  padding: 30px clamp(20px, 5vw, 64px) 44px;
  font-size: .875rem; color: var(--doux);
}
footer .legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ---- Mouvement ----------------------------------------------------------------------------- */
/* Révélations : un simple fondu, posé par anime.js (IntersectionObserver, jamais de scroll listener). */
.anime .reveal {
  opacity: 0;
  transition: opacity .6s var(--e-out);
  transition-delay: var(--d, 0s);
}
.anime .reveal.vu { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .bouton:hover { background: #fff; color: var(--nuit); }
  .bouton:hover svg { transform: translateY(2px); }
  .travail li:hover p { color: var(--encre); transition: color 200ms var(--e-out); }
  .bento article { transition: translate 240ms var(--e-out); }
  .bento article:hover { translate: 0 -3px; }
}

@media (prefers-reduced-motion: no-preference) {
  .heros-texte > * {
    opacity: 0; translate: 0 22px;
    animation: lever .8s var(--e-out) forwards;
  }
  .heros-texte > :nth-child(2) { animation-delay: 70ms; }
  .heros-texte > :nth-child(3) { animation-delay: 140ms; }
  /* Le satellite dérive : l'agent veille. Un seul mouvement permanent, lent et discret. */
  .vol {
    transform-box: view-box;
    transform-origin: 500px 500px;
    animation: deriver 26s ease-in-out infinite alternate;
  }
  .etoile { animation: scintiller 6s ease-in-out infinite; }
  .etoile:nth-of-type(2) { animation-delay: 2.1s; }
  .etoile:nth-of-type(3) { animation-delay: 4.2s; }
  .etoile:nth-of-type(4) { animation-delay: 1.2s; }
  .etoile:nth-of-type(5) { animation-delay: 3.3s; }
  /* La jauge se trace quand sa carte apparaît : l'état « sous le plafond » devient lisible. */
  .anime .jauge .trace {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.1s var(--e-out) .2s;
  }
  .anime .grande.vu .jauge .trace { stroke-dashoffset: 0; }
  .anime .jauge .pointe { opacity: 0; transition: opacity .35s var(--e-out) 1.05s; }
  .anime .grande.vu .jauge .pointe { opacity: 1; }
}
@keyframes lever { to { opacity: 1; translate: 0 0; } }
@keyframes deriver { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes scintiller { 0%, 100% { opacity: .9; } 50% { opacity: .2; } }

/* ---- Écrans étroits -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .barre nav a[href^="#"] { display: none; }
}

@media (max-width: 880px) {
  .heros { min-height: auto; padding-top: 48px; padding-bottom: 60px; }
  .astre {
    left: 50%; top: auto; bottom: -58%;
    width: 185vmin;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(#000 28%, transparent 58%);
    mask-image: linear-gradient(#000 28%, transparent 58%);
  }
  .heros-texte { max-width: 100%; }
  .travail li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento .grande { grid-row: auto; min-height: 0; }
  footer { justify-content: center; text-align: center; }
}