/* Velum, site vitrine getvelum.app. Feuille unique des trois pages.
   Jetons et registre : PEA-flutter/docs/specs/site-vitrine.md, lot 2, §2.1 a §2.4.
   Le site suit le systeme, comme l'app depuis la 1.2 : pas de bouton de theme.

   Les filets ont trois emplois, et pas un quatrieme : barre de navigation (filet bas),
   pied de page (filet haut), et frontiere de section uniquement quand le fond ne change
   pas de part et d'autre. Deux sections de fonds differents se separent par le fond.
   Un filet s'ecrit `1px solid var(--divider)`, jamais dilue au point d'usage :
   pas d'opacity sur l'element qui le porte, pas de color-mix ni de rgba sur --divider,
   pas de border-color derivee. C10 mesure le jeton dans cette feuille ; affaibli a
   l'usage, le jeton mesure ne decrirait plus le pixel rendu. */

:root {
  color-scheme: light dark;
  --bg: #F4F4F5;
  --surface: #FFFFFF;
  --surface-2: #E4E4E7;
  --text: #09090B;
  --muted: #52525B;
  --divider: #8A8A8F;
  --accent: #22C55E;
  --accent-ink: #15803D;
  --cta-text: #052E16;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A0A0A;
    --surface: #141414;
    --surface-2: #1C1C1C;
    --text: #FFFFFF;
    --muted: #888888;
    --divider: #6B6B6B;
    --accent-ink: #22C55E;
  }
}

/* Base
   ------------------------------------------------------------------------ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; }

h1 {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}

h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  margin: 0 0 16px;
}

h3 { font-size: 19px; line-height: 1.35; margin: 0 0 8px; }

p { max-width: 68ch; margin: 0 0 16px; }

a { color: var(--accent-ink); }

a:hover { text-decoration: underline; }

img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 32px;
}

.muted { color: var(--muted); }

/* Barre de navigation : le seul endroit ou le verre est autorise.
   Le color-mix porte sur --bg, jamais sur --divider : le filet reste entier.
   ------------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--divider);
}

@supports not (backdrop-filter: blur(1px)) {
  .nav { background: var(--bg); }
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
  text-decoration: none;
}

.brand:hover { text-decoration: none; }

.brand img { display: block; width: 28px; height: 28px; border-radius: 8px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-size: 15px;
}

.nav-links a { color: var(--muted); text-decoration: none; transition: color 160ms ease; }

.nav-links a:hover { color: var(--text); text-decoration: none; }

/* Appel a l'action : aplat, rayon 12, hauteur 48, aucune ombre, aucun degrade.
   Le survol change l'opacite du fond, pas la position.
   ------------------------------------------------------------------------ */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--cta-text);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 160ms ease;
}

.cta:hover { opacity: 0.88; text-decoration: none; }

.cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cta-note { color: var(--muted); font-size: 15px; }

/* Sections : le fond et le blanc portent la hierarchie, pas les cartes.
   ------------------------------------------------------------------------ */

.section { padding: 88px 0; }

.section--surface { background: var(--surface); }

.section-lead { max-width: 60ch; color: var(--muted); margin: 0 0 48px; }

/* Accueil
   ------------------------------------------------------------------------ */

.hero { padding: 72px 0 88px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.device {
  width: 100%;
  max-width: 300px;
  padding: 8px;
  border-radius: 44px;
  background: var(--surface-2);
}

.device img { display: block; width: 100%; height: auto; border-radius: 36px; }

.hero .device { margin-left: auto; }

/* Trois colonnes de texte : ni icone, ni carre arrondi, ni carte. */

.cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.cols p { margin: 0; color: var(--muted); }

/* Galerie des quatre ecrans, sans JavaScript : rangee a defilement par ancrage. */

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.shots > li { scroll-snap-align: start; }

.shots figure { margin: 0; }

.shots .device { max-width: none; }

.shots figcaption { margin-top: 16px; }

.shot-title { display: block; font-weight: 600; }

.shot-desc { display: block; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* Trois faits, en texte : plus de rangee de tres gros chiffres. */

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.facts strong { display: block; }

.facts span { display: block; color: var(--muted); font-size: 15px; }

/* Questions frequentes : <details> natif, donc depliable sans JavaScript. */

.faq { display: grid; gap: 10px; margin-top: 40px; }

.faq details { background: var(--surface); border-radius: 20px; padding: 4px 24px; }

.section--surface .faq details { background: var(--bg); }

.faq summary {
  padding: 18px 0;
  font-weight: 600;
  cursor: pointer;
}

.faq details p { margin: 0 0 18px; color: var(--muted); }

/* Pied de page
   ------------------------------------------------------------------------ */

.footer { border-top: 1px solid var(--divider); }

.footer-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 36px 0;
}

.footer-links { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }

.footer-links a { color: var(--muted); text-decoration: none; }

.footer-links a:hover { color: var(--text); text-decoration: none; }

.footer-meta { color: var(--muted); font-size: 15px; }

/* Pages de texte : confidentialite et support
   ------------------------------------------------------------------------ */

.page { padding: 64px 0 96px; }

.page-narrow { max-width: 720px; }

.page h1 { font-size: clamp(30px, 4.6vw, 42px); }

.page h2 { font-size: 22px; line-height: 1.3; margin: 40px 0 12px; }

.page .updated { color: var(--muted); font-size: 15px; margin: 0 0 32px; }

.callout {
  background: var(--surface);
  border-radius: 20px;
  padding: 20px 24px;
  margin: 0 0 40px;
}

.callout p { margin: 0; }

.contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--surface);
  border-radius: 20px;
  padding: 24px;
  margin: 0 0 48px;
}

.contact-label { color: var(--muted); font-size: 15px; }

.contact-value { font-weight: 600; }

/* Mouvement : transitions courtes, aucune translation, rien au defilement.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Petits ecrans
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero .device { margin-left: 0; }
  .cols { grid-template-columns: 1fr; gap: 28px; }
  .facts { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .section { padding: 56px 0; }
  .hero { padding: 48px 0 56px; }
  .page { padding: 40px 0 72px; }
  .shots { grid-auto-columns: minmax(230px, 76%); gap: 20px; }
}