/* 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 pour la page,
   seulement une bascule clair / sombre des quatre captures (lot 7), sans JavaScript.

   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); }


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 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; }


/* 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;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 160ms ease, transform 120ms ease-out;
}

.cta:active { transform: scale(0.98); }


.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;
}

/* Le cadre est dans l'image (bezel Apple compose hors ligne) : ni fond, ni rayon, ni ombre. */

.device {
  width: 100%;
  max-width: 300px;
}

.device img { display: block; width: 100%; height: auto; }

.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; }

/* Bascule clair / sombre des quatre ecrans (lot 7), sans JavaScript : trois radios freres de
   .shots, pilotes par :checked. Par defaut (Systeme) les captures suivent le theme du systeme,
   comme le reste de la page. La piste reprend le controle segmente des Reglages de l'app ;
   aucun jeton nouveau. */

.theme-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
}

.screens {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
}

.screens-head { grid-column: 1; }

.screens .shots { grid-column: 1 / -1; min-width: 0; }

.seg {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 12px;
}

/* La pastille est un seul element qui glisse sous les libelles (colonnes de meme largeur :
   le decalage vaut une colonne plus l'ecart). Retour d'interaction, ~180 ms. */

.seg::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  background: var(--surface);
  border-radius: 8px;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

#theme-clair:checked ~ .seg::before { transform: translateX(calc(100% + 2px)); }
#theme-sombre:checked ~ .seg::before { transform: translateX(calc(200% + 4px)); }

.seg label {
  grid-row: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease;
}

.seg label[for="theme-systeme"] { grid-column: 1; }
.seg label[for="theme-clair"] { grid-column: 2; }
.seg label[for="theme-sombre"] { grid-column: 3; }

#theme-systeme:checked ~ .seg label[for="theme-systeme"],
#theme-clair:checked ~ .seg label[for="theme-clair"],
#theme-sombre:checked ~ .seg label[for="theme-sombre"] {
  color: var(--text);
  font-weight: 600;
}

#theme-systeme:focus-visible ~ .seg label[for="theme-systeme"],
#theme-clair:focus-visible ~ .seg label[for="theme-clair"],
#theme-sombre:focus-visible ~ .seg label[for="theme-sombre"] {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

/* Les deux captures sont empilees : la sombre est le fond, la claire est posee dessus et
   apparait ou disparait en fondu (200 ms). Une seule couche change d'opacite, donc la
   silhouette du telephone ne devient jamais transparente en cours de route. */

.shots .device { position: relative; }

.shots .shot-clair {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

@media (prefers-color-scheme: light) {
  #theme-systeme:checked ~ .shots .shot-clair { opacity: 1; }
}

#theme-clair:checked ~ .shots .shot-clair { opacity: 1; }
#theme-sombre:checked ~ .shots .shot-clair { opacity: 0; }

.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-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; }

@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration: underline; }
  .brand:hover { text-decoration: none; }
  .nav-links a:hover { color: var(--text); text-decoration: none; }
  .cta:hover { opacity: 0.88; text-decoration: none; }
  .footer-links a:hover { color: var(--text); text-decoration: none; }
}

/* Mouvement : transitions courtes, rien au defilement ; seule translation : la pastille de la
   bascule des ecrans, causee par le geste (voir site-vitrine.md, amendement du 2026-10-16).
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-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; }
  .screens { grid-template-columns: 1fr; }
  .seg { grid-column: 1; grid-row: 2; justify-self: start; margin: 0 0 28px; }
  .screens-head .section-lead { margin-bottom: 24px; }
}