/* ════════════════════════════════════════════════════════════════
   OBSIONIS — Coming soon
   DA « Trajectoire ». Aucune couleur en dur : tout vient de
   css/tokens.css.

   Cette page reprend l'ossature du hero de la landing, à l'identique
   là où c'est possible : une lampe unique (--halo), un quadrillage
   masqué, l'anneau incomplet du logo, la fissure en pseudo-élément
   de section, le plan vivant et le grain global. La lumière est une
   NAPPE, jamais un cône : la DA éclaire, elle ne braque pas.

   La doctrine des deux couches tient toujours : la coque habille
   (rayons généreux, pilule, mouvement avec élan), l'instrument dit
   la vérité (rayons stricts, fond en creux, mono tabulaire).
   ════════════════════════════════════════════════════════════════ */

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(.95rem, .3vw + .88rem, 1.06rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Le grain. Une seule texture, en overlay, au-dessus de tout : il
   casse le banding du halo et de la fissure — les deux seules
   nappes de la page. Sans lui, l'écran a l'air rendu, pas
   construit. */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:40; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg{ max-width:100%; display:block; }
h1, p, form{ margin:0; }
button, input{ font:inherit; color:inherit; }

::selection{ background:var(--accent); color:var(--ink); }

/* Cornflower et non Royal : sur le Vide, Royal tombe à 2,4:1 et un
   anneau de focus qu'on ne voit pas n'est pas un anneau de focus. */
:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

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

/* L'instrument, partout où il apparaît : tabulaire, sans exception. */
.mono{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}


/* ══════════════════════════════════════════════════════════════
   LE HERO — il n'y a que lui
   ══════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center;
  padding:clamp(1.5rem, 4vh, 2.5rem) var(--pad) clamp(1.5rem, 4vh, 2.25rem);
  overflow:hidden;
  text-align:center;
}

/* LA FISSURE. Un trait de lumière qui coupe l'écran à 45°, pas une
   ambiance qui flotte. Elle est fixe : le mouvement la
   transformerait en boucle décorative. */
/* LE FAISCEAU. Directionnel, de haut en bas, conique et centré — il
   remplace la fissure diagonale : une seule source par écran, et
   c'est celle-ci. Il partage son origine avec la lampe, sinon deux
   sources et la profondeur s'effondre en tapisserie.

   Le flou est porté par le PARENT : clip-path s'applique après
   filter dans le pipeline, donc flouter et découper le même nœud
   rendrait des bords de cône parfaitement nets. */
.hero__faisceau{
  position:absolute; z-index:0; pointer-events:none;
  top:-4%; left:0; right:0; margin-inline:auto;
  /* resserré : trop évasé, le cône ne se lit plus comme un faisceau
     mais comme une nappe triangulaire posée sur l'écran. */
  width:min(900px, 96vw);
  height:116%;
  filter:blur(22px);
  mix-blend-mode:screen;
}
.hero__faisceau i{
  display:block; position:absolute; inset:0;
  /* apex serré : c'est l'écart entre le sommet étroit et la base
     large qui fait lire la direction, pas l'intensité. */
  clip-path:polygon(48.3% 0%, 51.7% 0%, 100% 100%, 0% 100%);
  /* Lavande au cœur de la source, puis Cornflower, puis Royal : la
     lumière descend dans la teinte de marque, elle ne passe jamais
     par le blanc — sinon elle se lit comme un projecteur neutre. */
  background:linear-gradient(to bottom,
    rgba(167,155,240,.46) 0%,
    rgba(var(--accent-2-rgb) / .24) 19%,
    rgba(var(--accent-rgb) / .16) 45%,
    rgba(var(--accent-rgb) / .07) 70%,
    transparent 88%);
}

/* Hors de la nappe, la scène retombe dans le Vide. Posée après les
   nappes : elle éteint aussi les bords de la grille et de la
   fissure, pour qu'aucun dégradé ne traîne dans le noir. */
.hero__nuit{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(118% 88% at 50% 34%,
    transparent 0%,
    rgba(var(--bg-rgb) / .30) 46%,
    rgba(6,6,14,.72) 72%,
    #05050C 100%);
}

/* LA LAMPE. La source de lumière unique de cet écran — une nappe
   radiale qui tombe du haut, centrée par margin-inline. */
.hero__lampe{
  position:absolute; z-index:0; pointer-events:none;
  /* depuis que le faisceau porte la direction, la lampe n'est plus
     la nappe de l'écran : elle est la lueur de la source, à son
     sommet. Plus haute et plus étroite, sinon les deux se
     confondent en une seule masse diffuse. */
  top:-42%; left:0; right:0; margin-inline:auto;
  width:min(860px, 96vw); aspect-ratio:1.1;
  background:var(--halo);
  filter:blur(18px);
  animation:lampe-respire 34s ease-in-out infinite;
}
/* Elle respire à peine : on doit la sentir vivante, jamais la voir
   bouger. Le halo ne porte pas de contenu, donc l'opacité suffit. */
@keyframes lampe-respire{
  0%, 100%{ opacity:.92; }
  50%     { opacity:1; }
}

.hero__grille{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--whisper) 1px, transparent 1px),
    linear-gradient(to bottom, var(--whisper) 1px, transparent 1px);
  background-size:clamp(64px, 8vw, 108px) clamp(64px, 8vw, 108px);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 34%, #000 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 34%, #000 10%, transparent 72%);
  opacity:.5;
}
/* L'ANNEAU. Incomplet, coupé — le vocabulaire du symbole, pas le
   fichier repeint. Un anneau = un cycle. */
.hero__grille::after{
  content:""; position:absolute;
  left:50%; top:6%;
  width:min(760px, 86vw); aspect-ratio:1;
  transform:translateX(-50%);
  border:1px solid rgba(167,155,240,.46);
  border-radius:50%;
  mask-image:conic-gradient(from 205deg, #000 0 72%, transparent 72%);
  -webkit-mask-image:conic-gradient(from 205deg, #000 0 72%, transparent 72%);
}

/* Tout le contenu passe au-dessus des nappes. */
.hero > *:not(.hero__lampe):not(.hero__faisceau):not(.hero__grille):not(.plan-vivant):not(.hero__nuit){
  position:relative; z-index:1;
}


/* ── Le plan vivant ───────────────────────────────────────────
   Un fond de blueprint qui ne semble jamais tout à fait figé, sans
   jamais se lire comme « une animation ». Purement temporel : chaque
   élément tourne sur son propre cycle très long (17 à 42 s), déphasé
   des autres, pour qu'aucun rythme commun ne se remarque. */
.plan-vivant{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
  animation:pv-derive 42s ease-in-out infinite;
}
@keyframes pv-derive{
  0%, 100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(2px,-2px,0); }
}
.plan-vivant i{ position:absolute; display:block; }

/* Étincelles : une impulsion à un croisement de grille, rare et
   brève — la plus grande partie du cycle reste éteinte. */
.plan-vivant__etincelle{
  width:3px; height:3px; margin:-1.5px;
  border-radius:50%;
  background:var(--ink);
  opacity:0;
  animation:pv-etincelle 23s ease-in-out infinite;
}
@keyframes pv-etincelle{
  0%, 91%, 100%{ opacity:0; transform:scale(1); }
  94%{ opacity:.6; transform:scale(2.2); }
  97%{ opacity:0; transform:scale(1); }
}

/* Cercles techniques : une respiration, jamais de lueur. */
.plan-vivant__cercle{
  border:1px solid rgba(245,248,253,.16);
  border-radius:50%;
  animation:pv-cercle 17s ease-in-out infinite;
}
@keyframes pv-cercle{
  0%, 100%{ opacity:.45; transform:scale(1); }
  50%{ opacity:.8; transform:scale(1.045); }
}

/* Lignes de construction : un plan qui recalcule sa géométrie. */
.plan-vivant__ligne{
  height:1px;
  background:rgba(245,248,253,.18);
  opacity:0;
  animation:pv-ligne 25s ease-in-out infinite;
}
@keyframes pv-ligne{
  0%, 58%, 100%{ opacity:0; }
  74%, 86%{ opacity:1; }
}

/* Pas de balayage ici, contrairement à la landing. Son dégradé à
   100deg a des arêtes à 10° de la verticale : sur les sections
   denses de la landing, la traînée est découpée en permanence par
   le contenu et les overflow ; sur un écran vide, elle traverse
   tout et se lit comme une barre droite. Et surtout, le faisceau
   est désormais la source de cet écran — une traînée lumineuse
   mobile en serait une seconde. */

.plan-vivant__grain{
  inset:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:pv-grain 31s ease-in-out infinite;
}
@keyframes pv-grain{
  0%, 100%{ opacity:.04; }
  50%{ opacity:.07; }
}


/* ── La marque ────────────────────────────────────────────────*/
.marque{
  display:inline-flex; align-items:center; gap:var(--s2);
  color:var(--ink);
}
/* Le symbole ne se retouche jamais : largeur imposée, ratio libre. */
.marque__signal{ width:28px; height:auto; }
.marque__mot{
  font-weight:600;
  font-size:.94rem;
  letter-spacing:.075em;
  text-transform:uppercase;
}


/* ── Le corps du hero ─────────────────────────────────────────*/
.hero__corps{
  margin:auto 0;
  padding-block:clamp(2rem, 6vh, 4rem);
  display:flex; flex-direction:column; align-items:center;
  width:100%;
}

.hero__meta{
  display:inline-flex; align-items:center; gap:var(--s3);
  font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.pastille{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent-2);
  animation:pastille 2.6s var(--ease) infinite;
}
@keyframes pastille{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* La taille est bornée par la hauteur autant que par la largeur :
   sur un écran court, seule la hauteur décide si le formulaire
   reste au-dessus du pli. */
.hero__titre{
  font-family:var(--display);
  font-weight:700;
  font-stretch:78%;
  line-height:.94;
  letter-spacing:-.03em;
  text-wrap:balance;
  font-size:clamp(2.7rem, min(11vw, 15vh), 8.5rem);
  margin:clamp(1.1rem, 3vh, 2rem) 0 clamp(1.5rem, 3.5vh, 2.25rem);
}
.hero__titre .ligne{ display:block; }
.hero__titre em{
  font-style:normal;
  font-stretch:100%;
  font-weight:400;
  color:var(--lavande);
}

.hero__chapo{
  color:var(--muted);
  max-width:46ch;
  text-wrap:pretty;
  margin-bottom:clamp(1.75rem, 4.5vh, 2.75rem);
}


/* ── Le formulaire — l'instrument fonctionnel de la page ──────
   Pilule, comme le CTA : c'est la même famille de contrôle que sur
   la landing, pas un champ inventé pour cette page. */
.form{ width:100%; max-width:34rem; }
.form__champ{
  display:flex; gap:var(--s3);
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  padding:var(--s2);
  transition:border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
.form__champ:focus-within{
  border-color:var(--accent-2);
  box-shadow:0 0 0 4px rgba(var(--accent-2-rgb) / .12);
}
/* L'erreur reste un liseré, jamais un bloc rouge : le rouge
   appartient à l'application, il ne gronde pas l'utilisateur. */
.form__champ[data-invalide]{ border-color:rgba(242,88,107,.5); }
.form__champ[data-invalide]:focus-within{
  border-color:rgba(242,88,107,.75);
  box-shadow:0 0 0 4px rgba(242,88,107,.10);
}

.form input{
  flex:1; min-width:0;
  background:none; border:0; outline:none;
  padding:0 var(--s5);
  font-family:var(--mono);
  font-size:.94rem;
  text-align:left;
}
.form input::placeholder{ color:var(--faint); }
.form input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 100px var(--bg-2) inset;
}

.form__etat{
  min-height:1.4em; margin-top:var(--s4);
  font-size:.74rem; letter-spacing:.04em;
  color:var(--muted);
}
.form__etat[data-etat="erreur"]{ color:var(--fail); }


/* ── Boutons ──────────────────────────────────────────────────
   Aucun dégradé sur un bouton, jamais. */
.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:.78rem 1.5rem;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-family:var(--sans);
  font-size:.9rem; font-weight:500;
  letter-spacing:-.005em;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--t-base) var(--ease),
             color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
/* Usage 1 de la liste fermée du Royal : le CTA principal. */
.btn--plein{
  background:var(--accent);
  color:var(--ink);
}
.btn--plein:hover{
  box-shadow:0 0 0 4px rgba(var(--accent-rgb) / .24),
             0 0 28px rgba(var(--accent-2-rgb) / .22);
}
.btn--plein[disabled]{ opacity:.55; cursor:default; box-shadow:none; }


/* ── Confirmation ─────────────────────────────────────────────*/
.confirme{
  max-width:34rem;
  animation:poser var(--t-slow) var(--ease-out) both;
}
/* focus posé par le script pour replacer la lecture : pas un
   contrôle, donc pas d'anneau de focus */
.confirme:focus{ outline:none; }
.confirme::before{
  content:""; display:block;
  width:26px; height:1px;
  margin:0 auto var(--s5);
  background:var(--accent-2);
}
.confirme__titre{
  font-family:var(--display);
  font-weight:600;
  font-size:1.3rem;
  letter-spacing:-.01em;
}
.confirme__corps{ color:var(--muted); margin-top:var(--s2); }
.confirme__meta{
  margin-top:var(--s4);
  font-size:.72rem; letter-spacing:.04em;
  color:var(--warn);
}
.confirme[hidden], .form[hidden]{ display:none; }

@keyframes poser{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}


/* ── Pied ─────────────────────────────────────────────────────*/
.pied{
  width:100%;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s4);
  font-size:.68rem; letter-spacing:.06em;
  color:var(--faint);
}
.pied a{
  color:var(--faint);
  text-decoration:none;
  transition:color var(--t-base) var(--ease);
}
.pied a:hover{ color:var(--accent-2); }

/* Quatre liens dans un pied minimal : ils forment un seul groupe
   centré et se replient au lieu de pousser le reste. */
.pied__legal{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--s2) var(--s4);
}
.pied__legal a + a{ position:relative; }
.pied__legal a + a::before{
  content:"";
  position:absolute; left:calc(var(--s4) / -2); top:.15em;
  width:1px; height:.9em;
  background:var(--line-2);
}


/* ── Entrée en scène ──────────────────────────────────────────
   En CSS pur : sans script, la page reste entière. */
.marque, .hero__meta, .hero__titre, .hero__chapo, .form, .pied{
  animation:poser var(--t-imm) var(--ease-out) both;
}
.marque      { animation-delay:60ms; }
.hero__meta  { animation-delay:140ms; }
.hero__titre { animation-delay:220ms; }
.hero__chapo { animation-delay:320ms; }
.form        { animation-delay:420ms; }
.pied        { animation-delay:520ms; }


/* ── Petits écrans ────────────────────────────────────────────*/
@media (max-width:560px){
  .form__champ{
    flex-direction:column;
    border-radius:var(--r-lg);
    padding:var(--s3);
    gap:var(--s3);
  }
  .form input{
    padding:var(--s3) var(--s4);
    /* 16px minimum : en deçà, iOS zoome sur le champ au focus */
    font-size:16px;
    text-align:center;
  }
  .form .btn{ justify-content:center; }
  .pied{ flex-direction:column; align-items:center; gap:var(--s2); }
  /* Les quatre liens se replient sur deux lignes : le séparateur du
     premier lien de la seconde ligne resterait orphelin en tête. */
  .pied__legal{ gap:var(--s2) var(--s5); }
  .pied__legal a + a::before{ display:none; }
  /* L'anneau déborde trop haut sur un écran étroit : on le recentre
     sur le titre plutôt que sur la marque. */
  .hero__grille::after{ top:14%; }
}


/* ── Mouvement réduit ─────────────────────────────────────────
   Une célébration devient un état visuel stable : la lueur reste,
   le mouvement s'arrête. Aucune information ne disparaît. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .plan-vivant, .plan-vivant *{ animation:none !important; }
  .plan-vivant__etincelle{ opacity:0; }
  .plan-vivant__cercle{ opacity:.6; }
  .plan-vivant__ligne{ opacity:.5; }
  .pastille{ animation:none; }
}

@media (forced-colors:active){
  .plan-vivant, .hero__lampe, .hero__faisceau, .hero__grille{ display:none; }
}