/* ═══════════════════════════════════════════════════════════════════
   VEGA STUDIO — système de base

   Principe directeur : la page est un volume sombre éclairé par une
   source unique, haut-gauche, de la couleur de la marque. Rien n'est
   un aplat. Chaque surface a une orientation par rapport à cette
   lumière : son bord supérieur la reçoit, son bord inférieur est dans
   l'ombre. C'est ce qui remplace le dégradé décoratif.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── profondeurs ──
     Quatre valeurs, du fond de la pièce vers l'avant. L'ancien site
     n'en utilisait qu'une, d'où l'impression d'aplat. */
  --d0: #07080B;   /* fond de page */
  --d1: #0B0C10;   /* section posée */
  --d2: #11131A;   /* surface levée */
  --d3: #171A24;   /* surface survolée */

  /* ── marque ── */
  --purple:     #8B7CF6;
  --purple-deep:#5A50B0;
  --lilac:      #C4B8FF;

  /* ── encre ──
     Le blanc est très légèrement chaud. Face à un violet froid, ça
     creuse l'écart et la lumière paraît réelle plutôt que teintée. */
  --ink:    #F0EFF5;
  --ink-70: rgba(240,239,245,.70);
  --ink-45: rgba(240,239,245,.56);
  --ink-28: rgba(240,239,245,.42);

  /* ── arêtes ──
     Trois valeurs : ce qui capte la lumière, ce qui est neutre,
     ce qui tombe dans l'ombre. */
  --edge-lit:   rgba(240,239,245,.13);
  --edge:       rgba(240,239,245,.07);
  --edge-shade: rgba(0,0,0,.45);

  /* ── mouvement ──
     Courbes reprises des standards d'Emil Kowalski. Les courbes
     natives du CSS sont trop molles, et une bezier improvisée au
     jugé se voit. Jamais d'ease-in sur de l'interface : il démarre
     lentement, pile au moment où l'œil regarde. */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  /* ── espacement, base 4 ──
     Une seule valeur répétée donne le même poids à tout. Ces paliers
     servent à opposer franchement le serré et le généreux. */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s6: 1.5rem; --s8: 2rem;   --s12: 3rem;  --s16: 4rem;
  --s24: 6rem;  --s32: 8rem;

  /* ── mesures ── */
  --col: 1120px;
  --gut: clamp(1.25rem, 5vw, 3.5rem);
  --r:   12px;

  /* ── rythme typographique ──
     Rapport 1.33 au sommet, resserré vers le bas. Les écarts larges
     en haut de l'échelle sont ce qui donne de l'autorité au titre. */
  --t-display: clamp(2.45rem, 5.3vw, 4.35rem);
  --t-h2:      clamp(1.85rem, 3.6vw, 2.75rem);
  --t-h3:      1.18rem;
  --t-body:    1.0625rem;
  --t-small:   .875rem;
}

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

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

body {
  background: var(--d0);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ═══ LUMIÈRE AMBIANTE ═══════════════════════════════════════════
   Fixée au viewport, pas au document. La source reste dans la pièce
   pendant que le contenu défile devant elle : les sections hautes
   sont éclairées, les basses s'enfoncent. C'est ce décalage qui
   crée la sensation de volume au scroll.
   ═══════════════════════════════════════════════════════════════ */
.room {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 820px at 14% -8%,  rgba(139,124,246,.17), transparent 64%),
    radial-gradient(760px  620px at 88%  6%,  rgba(196,184,255,.055), transparent 62%),
    radial-gradient(900px  700px at 52% 112%, rgba(90,80,176,.085),  transparent 66%);
}

/* ═══ GRAIN ══════════════════════════════════════════════════════
   Un aplat numérique n'existe pas dans le monde physique. Ce bruit
   très faible casse les bandes de dégradé et donne une matière à
   l'œil. Au-delà de 5 % il se voit, et c'est raté.
   ═══════════════════════════════════════════════════════════════ */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: .038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Tout le contenu passe devant la lumière et sous le grain. */
nav, main, footer { position: relative; z-index: 2; }

/* ═══ TYPOGRAPHIE ════════════════════════════════════════════════ */

h1, h2, h3 {
  font-family: 'Syne', system-ui, sans-serif;
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 800;
  text-wrap: balance;
}

/* Le texte en dégradé est un réflexe de générateur, pas une
   décision : l'emphase vient du poids et de la taille. La classe
   reste pour ne pas toucher aux autres pages, mais ne fait plus
   que poser une couleur pleine. */
.lit { color: var(--ink); }

h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.015em; font-weight: 700; }



.lead  { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--ink-70); line-height: 1.68; font-weight: 300; }
.body  { color: var(--ink-70); }
.small { font-size: var(--t-small); color: var(--ink-45); line-height: 1.6; }

/* ── Surfaces du navigateur ──
   Sélection, curseur, anneau de focus, barre de défilement et
   chiffres des prix arrivent par défaut sans appartenir à aucun
   système. Les habiller est ce qui distingue une page construite
   d'une page assemblée. */
::selection { background: rgba(139,124,246,.3); color: #fff; }

html { scrollbar-color: #2A2C36 var(--d0); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--d0); }
::-webkit-scrollbar-thumb { background: #2A2C36; border: 3px solid var(--d0); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #3A3D4A; }

input, textarea { caret-color: var(--purple); }

:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* Chiffres de même chasse : sans ça les prix dansent d'une colonne
   à l'autre parce que le 1 est plus étroit que le 9. */
.tier-price, .plan-price, .option-price, .hero-price { font-variant-numeric: tabular-nums; }

/* ═══ TRAME ══════════════════════════════════════════════════════ */

.wrap    { width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: var(--gut); }
/* Resserre volontairement. A 11vw on obtenait 288 px entre deux
   sections, ce qui etirait un contenu dense en page creuse. */
.section { padding-block: clamp(2.75rem, 4.2vw, 3.9rem); }

/* Filet qui s'éteint sur les bords.
   Un trait d'opacité constante se termine net et sonne faux. Celui-ci
   naît et meurt dans le noir. */
.rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--edge-lit) 18%, var(--edge-lit) 82%, transparent);
}

/* ═══ SURFACES ═══════════════════════════════════════════════════
   Le dégradé n'est pas décoratif : il suit l'inclinaison supposée
   de la surface face à la source. Bord haut éclairé, bord bas dans
   l'ombre, et un liseré interne qui simule l'arête vive.
   ═══════════════════════════════════════════════════════════════ */
.panel {
  position: relative;
  background: linear-gradient(168deg, var(--d2) 0%, var(--d1) 62%, #0A0B0F 100%);
  border: 1px solid var(--edge);
  border-top-color: var(--edge-lit);
  border-bottom-color: var(--edge-shade);
  border-radius: var(--r);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 26px 60px -40px #000;
}

/* ═══ BOUTONS ════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding-inline: 1.9rem;
  border: 1px solid transparent; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 500;
  letter-spacing: -.005em; cursor: pointer;
  transition: transform .16s var(--ease-out), box-shadow .2s var(--ease-out), background .2s ease, border-color .2s ease;
}
/* L'appui enfonce le bouton au lieu de le décaler : un objet pressé
   se comprime, il ne glisse pas vers le bas. */
.btn:active { transform: scale(.97); }

/* Le bouton primaire est un objet qui émet : halo au sol, arête
   supérieure plus claire que le corps. */
.btn-primary {
  background: linear-gradient(176deg, #9C8FF8, var(--purple) 55%, #7265E4 100%);
  color: #0A0812; font-weight: 600;
  border-top-color: rgba(255,255,255,.4);
  /* Pas de halo coloré : une ombre portée a une direction et un
     flou, un halo centré n'est que de la décoration. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 2px 4px rgba(0,0,0,.4);
}
.btn-primary:hover { background: linear-gradient(176deg, #A99DFA, #9487F8 55%, #7B6EE8 100%); }

.btn-ghost {
  background: linear-gradient(176deg, rgba(240,239,245,.055), rgba(240,239,245,.015));
  color: var(--ink);
  border-color: var(--edge);
  border-top-color: var(--edge-lit);
}
.btn-ghost:hover { background: linear-gradient(176deg, rgba(240,239,245,.1), rgba(240,239,245,.03)); border-color: var(--edge-lit); }

/* ═══ NAVIGATION ═════════════════════════════════════════════════
   Grille en trois colonnes : le titre tient la gauche, les onglets
   sont centres dans la fenetre, le bouton ferme a droite. Un simple
   flex poussait les onglets contre le bouton et desequilibrait tout.
   ═══════════════════════════════════════════════════════════════ */

nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  padding-block: 1.2rem;
  background: rgba(7,8,11,.82);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: padding .3s, background .3s, border-color .3s;
}
nav.scrolled { padding-block: .9rem; background: rgba(7,8,11,.94); border-bottom-color: var(--edge); }

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%; max-width: var(--col); margin-inline: auto;
  padding-inline: var(--gut);
}

.nav-wordmark {
  justify-self: start;
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 1.02rem; letter-spacing: .22em; text-transform: uppercase;
  transition: color .16s ease;
}
.nav-wordmark:hover { color: var(--lilac); }

.nav-links { justify-self: center; list-style: none; display: flex; align-items: center; gap: 2.5rem; }
.nav-links a { position: relative; font-size: .97rem; font-weight: 400; color: var(--ink-45); transition: color .16s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }

/* Trait sous l'onglet actif, qui s'eteint sur les bords comme les
   autres filets de la page. */
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
}

.nav-right { justify-self: end; }

.nav-cta {
  height: 38px; padding-inline: 1.15rem;
  display: inline-flex; align-items: center;
  border: 1px solid var(--edge); border-top-color: var(--edge-lit);
  border-radius: 8px; font-size: .875rem; font-weight: 500;
  background: linear-gradient(176deg, rgba(240,239,245,.05), rgba(240,239,245,.012));
  transition: background .16s ease, border-color .16s ease;
}
.nav-cta:hover { background: rgba(240,239,245,.1); border-color: var(--edge-lit); }

.nav-burger { display: none; justify-self: end; background: none; border: 0; cursor: pointer; width: 26px; height: 18px; position: relative; }
.nav-burger span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .2s; }
.nav-burger span:nth-child(1) { top: 0; }
.nav-burger span:nth-child(2) { top: 8px; }
.nav-burger span:nth-child(3) { top: 16px; }
.nav-burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ═══ PIED ═══════════════════════════════════════════════════════ */

footer { border-top: 1px solid var(--edge); padding-block: 2.4rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-inner a { color: var(--ink-45); font-size: var(--t-small); transition: color .16s ease; }
.footer-inner a:hover { color: var(--ink); }
.footer-mid { font-size: var(--t-small); color: var(--ink-28); }

/* ═══ APPARITIONS ════════════════════════════════════════════════
   Il n'y en a plus. Une entrée identique répétée sur chaque section
   est un effet éparpillé, pas un moment travaillé : la page gagne à
   s'afficher d'un bloc. Le seul mouvement voulu de cette page est
   l'écran du téléphone. Les classes restent neutres pour les autres
   pages, qui n'ont pas encore été reprises.
   ═══════════════════════════════════════════════════════════════ */
.reveal, .reveal.visible { opacity: 1; transform: none; }
.js .reveal, .js .reveal.visible { opacity: 1; transform: none; transition: none; }

/* ═══ MOBILE ═════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .nav-inner  { grid-template-columns: 1fr auto; }
  .nav-burger { display: block; }
  .nav-right  { display: none; }

  .nav-links {
    position: fixed; inset: 0 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 5.5rem var(--gut) 2rem;
    background: var(--d0);
    border-bottom: 1px solid var(--edge);
    transform: translateY(-100%);
    transition: transform .42s var(--ease-in-out);
    z-index: -1;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links li { border-top: 1px solid var(--edge); }
  .nav-links li:last-child { border-bottom: 1px solid var(--edge); }
  .nav-links a { display: block; padding-block: 1.1rem; font-size: 1.05rem; color: var(--ink); }
  .nav-links a.active::after { display: none; }

  .mobile-cta-item { border: 0 !important; padding-top: 1.75rem; }
  .mobile-cta {
    text-align: center; border-radius: 10px;
    background: linear-gradient(176deg, #9C8FF8, var(--purple) 55%, #7265E4 100%);
    color: #0A0812 !important; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 34px -18px rgba(139,124,246,.7);
  }

  .footer-inner { justify-content: center; text-align: center; }
}

@media (min-width: 861px) {
  .mobile-cta-item { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}