/* ============================================================
   base.css — socle partage par toutes les pages
   ------------------------------------------------------------
   Les quatre feuilles precedentes (index / terms / privacy /
   waitlist) redefinissaient chacune le meme bloc :root. Une
   couleur changee a un endroit ne suivait nulle part ailleurs.
   Tout ce qui est commun vit ici, une seule fois.

   Les couleurs ne sont PAS choisies pour la landing : elles sont
   recopiees de src/styles/var.css de l'application, pour qu'un
   visiteur qui passe du site au produit ne change pas d'univers.
   ============================================================ */

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

:root {
  /* --- Surfaces (var.css de l'app) --- */
  --bg:           hsl(228 15% 14%);   /* --bg-color */
  --bg-deep:      hsl(229 27% 10%);   /* --card-tertian-bg */
  --bg-ink:       #0c0b15;            /* --sb-bg */
  --surface:      hsl(236 37% 20%);   /* --card-bg */
  --surface-sunk: hsl(236 37% 15%);   /* --card-second-bg */

  /* --- Accent. Le violet de l'app, et lui seul. --- */
  --accent:       hsl(253 100% 66%);
  --accent-soft:  hsl(236 90% 70%);
  --accent-wash:  hsl(253 100% 66% / 0.10);
  --accent-line:  hsl(253 100% 66% / 0.38);

  /* --- Texte --- */
  --text:   #ffffff;
  --text-2: hsl(40 10% 80%);
  --text-3: hsl(230 9% 57%);

  /* --- Filets. Blanc transparent plutot que violet transparent :
         une bordure teintee sur six sections donne le halo violet
         permanent qu'on cherche justement a retirer. --- */
  --line:        hsl(0 0% 100% / 0.075);
  --line-strong: hsl(0 0% 100% / 0.15);

  /* --- Signal (memes valeurs que l'app) --- */
  --ok:   hsl(146 58% 49%);
  --warn: hsl(36 80% 53%);
  --info: hsl(216 52% 65%);

  --radius:    12px;
  --radius-lg: 18px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --page: 1120px;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
svg { flex: none; }

::selection { background: var(--accent-line); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Typographie ────────────────────────────────────────────
   Poids 500/600 maximum sur les titres. Le 800 de l'ancienne
   version, en Syne, a 6rem, est precisement ce qui rendait la
   page criarde : une graisse extreme lit comme une publicite,
   pas comme un produit. Le rythme vient de l'interlettrage
   negatif et de l'espace autour, pas de l'epaisseur.          */

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 5vw, 4.1rem); letter-spacing: -0.038em; line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }

p { text-wrap: pretty; }

a { color: inherit; }

/* Etiquette de section. Mono + majuscules : le seul endroit ou
   l'on se permet des capitales, ce qui les garde signifiantes. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.lede {
  color: var(--text-2);
  font-size: 1.0625rem;
  line-height: 1.68;
  max-width: 56ch;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* ── Marque ─────────────────────────────────────────────────
   Monogramme + nom, et non le nom seul. Le wordmark seul a
   20px flottait dans une barre de 64px : il n'avait ni masse
   ni point d'ancrage a gauche, d'ou l'impression qu'il avait
   ete pose la en attendant. Le monogramme donne le bloc
   visuel, le nom passe a 24px.

   Le "vv" reste en accent : la marque EST le "vv" de Revveal,
   donc l'echo entre les deux est le concept, pas une
   redondance. Toujours pas de texte en degrade — un degrade
   sur quatre lettres se lit comme un gabarit.                */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  white-space: nowrap;
}

/* 22px, pas 25 : le dessin n'occupe que 80 % de la boite (y 4.5
   a 30 sur 32), donc un carre de 25px donnait une marque de 20px
   de haut face a une hauteur de capitale de 12,7px — une fois et
   demie trop grande, et le bloc penchait du cote du symbole.
   A 22px le trace fait 17,5px, soit environ 1,35 fois la
   capitale : la marque domine sans ecraser.

   Le margin-top redescend le symbole de 1px. L'alignement des
   boites par align-items:center ne suffit pas ici : la boite du
   texte inclut ascendantes et descendantes, si bien que le centre
   des capitales tombe 1,5px plus bas que le centre de la ligne. */
.brand-mark {
  width: 22px;
  height: 22px;
  margin-top: 1.5px;
  color: var(--accent);
  transition: color 0.18s ease;
}
.brand:hover .brand-mark { color: hsl(253 100% 72%); }

.brand-name {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--text);
}
.brand-name i { color: var(--accent); font-style: normal; }

/* Dans le pied de page la marque n'est plus un element de
   navigation mais une signature : meme dessin, un cran plus bas. */
.footer-brand .brand-mark { width: 20px; height: 20px; margin-top: 1px; }
.footer-brand .brand-name { font-size: 1.3125rem; }

/* ── Navigation ─────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  background: hsl(228 15% 14% / 0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  background: hsl(228 15% 12% / 0.85);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.875rem;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.18s ease;
}
.nav-links a:hover { color: var(--text); }

.nav-end { display: flex; align-items: center; gap: 1.25rem; }

/* ── Selecteur de langue ────────────────────────────────────
   Un <details> et non deux liens cote a cote : la liste est
   appelee a s'allonger, et un segment par langue devient
   illisible des la troisieme. Ajouter une langue = ajouter un
   <a> dans le menu, rien d'autre.

   <details> plutot qu'un menu maison : l'ouverture, la
   fermeture, le clavier et l'etat sont natifs, et le menu
   fonctionne meme sans JavaScript. lang.js n'ajoute que ce que
   l'element ne fait pas seul — fermer au clic exterieur et a
   Echap.

   Les entrees restent de vrais <a href> presents dans le HTML :
   ce sont des URL distinctes, elles doivent pouvoir etre
   ouvertes dans un onglet, copiees, et suivies par un moteur.
   Un menu dont les destinations seraient construites en JS ne
   serait explorable par aucun des deux. */
.lang { position: relative; flex: none; }

.lang > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
  cursor: pointer;
  list-style: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::marker { content: ''; }
.lang > summary:hover,
.lang[open] > summary { color: var(--text); border-color: var(--line-strong); }

.lang-globe { width: 14px; height: 14px; }
.lang-chev  { width: 9px; height: 9px; opacity: 0.7; transition: transform 0.18s ease; }
.lang[open] .lang-chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 20;
  min-width: 11rem;
  padding: 0.3rem;
  margin: 0;
  list-style: none;
  background: var(--surface-sunk);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.7);
}
.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  /* 40px de haut : c'est une cible tactile, pas une ligne de texte. */
  padding: 0.6rem 0.65rem;
  border-radius: 7px;
  font-size: 0.875rem;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-menu a:hover { background: hsl(0 0% 100% / 0.07); color: var(--text); }
.lang-menu a[aria-current] { color: var(--text); }
/* Pastille plutot qu'une coche : pas d'icone a charger, et le repere
   reste lisible a cote d'un nom de langue dans n'importe quel alphabet. */
.lang-menu a[aria-current]::after {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Boutons ────────────────────────────────────────────────
   Aucune box-shadow coloree. Le halo violet de l'ancien
   .btn-primary suivait le bouton sur toute la page et donnait
   cet air de neon permanent. Le contraste suffit.             */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.7rem 1.35rem;
  /* Un bouton ne se coupe pas en deux lignes : il deborderait de la
     barre de navigation, qui a une hauteur fixe de 64px. */
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn svg { width: 16px; height: 16px; }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: hsl(253 100% 71%); }

.btn--ghost { color: var(--text-2); border-color: var(--line-strong); }
.btn--ghost:hover { color: var(--text); border-color: hsl(0 0% 100% / 0.3); }

.btn--quiet { color: var(--text-2); padding-inline: 0; }
.btn--quiet:hover { color: var(--text); }

.btn--sm { font-size: 0.875rem; padding: 0.5rem 1rem; border-radius: 8px; }
.btn--lg { font-size: 1rem; padding: 0.85rem 1.7rem; }
.btn--block { width: 100%; }

/* La fleche avance au survol : le seul mouvement decoratif de
   la page, et il indique une direction reelle. */
.btn .arrow { transition: transform 0.18s ease; }
.btn:hover .arrow { transform: translateX(2px); }

/* ── Pied de page ───────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
  padding: 3.5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-brand p {
  margin-top: 0.85rem;
  color: var(--text-3);
  font-size: 0.875rem;
  max-width: 30ch;
  line-height: 1.6;
}
.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; display: grid; gap: 0.7rem; }
.footer-col a {
  font-size: 0.875rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.18s ease;
}
.footer-col a:hover { color: var(--text); }

.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--text-3);
}
.footer-base .mono { font-family: var(--mono); font-size: 0.75rem; }

/* ── Apparition au defilement ───────────────────────────────
   12px et 0.55s, pas 30px et 0.7s : un mouvement qu'on remarque
   est un mouvement qui distrait. Retire entierement si
   l'utilisateur a demande moins d'animations (plus bas).

   ⚠️ L'etat masque est conditionne a `.js`, une classe posee par
   un script en ligne dans le <head>. Sans ce garde-fou, les
   vingt-six elements concernes restent a opacity 0 des que le
   script de fin de page ne s'execute pas — JS coupe, erreur en
   amont, fichier bloque par un reseau d'entreprise — et la page
   s'affiche entierement vide. Une animation d'apparition ne doit
   jamais pouvoir faire disparaitre le contenu.               */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

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

/* ── Adaptatif ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
}

/* Sous 560px il ne reste que la marque et l'appel a l'action, et il
   faut encore leur faire de la place : « Contact » disparait (il est
   dans le pied de page et dans chaque page legale) et le bloc de
   marque redescend d'un cran. Sans cela le bouton passait sur deux
   lignes et sortait de la barre. */
/* Sous 560px la barre porte marque + selecteur de langue + appel a
   l'action, et les 335px utiles ne suffisent plus : mesure faite, le
   bouton finissait a 390px, donc rogne. On resserre les trois, plutot
   que de sacrifier le selecteur — c'est justement sur mobile qu'un
   visiteur doit pouvoir basculer de langue.
   `overflow-x: hidden` sur body masquait le debordement au lieu de le
   signaler : ne jamais s'y fier pour conclure qu'une barre tient. */
@media (max-width: 560px) {
  .nav-mail { display: none; }
  .nav-end { gap: 0.55rem; }
  .nav .wrap { gap: 0.55rem; }
  .lang > summary { padding: 0.4rem 0.4rem; }
  .lang-chev { display: none; }
  .nav .btn--sm { padding: 0.5rem 0.7rem; }
  .brand { gap: 0.4rem; }
  .brand-mark { width: 20px; height: 20px; margin-top: 1px; }
  .brand-name { font-size: 1.3125rem; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; align-items: flex-start; }
}