/* =========================================================
   VoxelSprites - Landing
   Direction éditoriale : blanc pur, titres massifs noirs avec
   un mot italique-serif souligné à l'accent, eyebrow mono +
   carré couleur, CTA noir solide, dividers fins, pas de
   gradient ni de glow. Chaque section porte son propre
   `data-accent` (vert/orange/bleu/violet) - c'est la "petite
   touche de couleur" qui rappelle le voxel sans tomber dans
   le drapeau.
   Réutilise les tokens et composants partagés (`vs-eyebrow`,
   `vs-headline`, `vs-code`, `vs-stepnum`, `vs-rule`, `vs-stripe`)
   définis dans app.css. Préfixe local : .vs-l-*
   ========================================================= */

body.vs-landing {
  background: var(--vs-bg);
  color: var(--vs-text);
  min-height: 100vh;
  /* Clip horizontal nécessaire pour le hero video bg qui sort du container
   * via width: 100vw + margin-left: -50vw (full-bleed depuis l'intérieur
   * d'un .vs-l-main max-width 1180px). Sans ça la page scrollait
   * latéralement de quelques px sur certains viewports. */
  overflow-x: hidden;
}

/* Shell */
.vs-l-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Hero ---------- */
.vs-l-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 88px 0 96px;
  min-height: 70vh;
}

/* Hero accueil avec vidéo MP4 en background full-bleed. 2026-05-14. */
.vs-l-hero--with-video {
  position: relative;
  isolation: isolate;
}
.vs-l-hero__video {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.vs-l-hero__overlay {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.58));
  z-index: 1;
  pointer-events: none;
}
.vs-l-hero--with-video > .vs-l-hero__col,
.vs-l-hero--with-video > .vs-l-hero__stage {
  position: relative;
  z-index: 2;
  background: #ffffffeb;
  padding: 20px;
  border-radius: 20px;
}
.vs-l-hero--with-video .vs-headline,
.vs-l-hero--with-video .vs-lead {
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
.vs-l-hero__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 680px;
}
.vs-l-hero__col .vs-eyebrow { margin-bottom: 4px; }
.vs-l-hero__col .vs-headline { margin-bottom: 8px; }
.vs-l-hero__col .vs-lead { line-height: 1.65; }
.vs-l-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Boutons larges landing - variation taille de .vs-btn. Noir solide
   pour le primary, ghost pour le secondaire. Le CTA n'utilise PAS
   l'accent coloré : on garde le contraste mono pur. */
.vs-btn-l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--vs-r-md);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 140ms var(--vs-ease),
              border-color 140ms var(--vs-ease),
              color 140ms var(--vs-ease);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.vs-btn-l--primary {
  background: var(--vs-text);
  color: #fff;
  border-color: var(--vs-text);
}
.vs-btn-l--primary:hover { background: #1f1f1f; }
.vs-btn-l--ghost {
  background: transparent;
  color: var(--vs-text);
  border-color: var(--vs-border-strong);
}
.vs-btn-l--ghost:hover {
  border-color: var(--vs-text);
  background: var(--vs-surface-3);
}
.vs-btn-l--big { height: 56px; padding: 0 32px; font-size: 16px; }

/* ---------- Hero showcase (3D voxel carousel : vache → cochon → ...) ---------- */
.vs-l-hero__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.vs-l-show {
  position: relative;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.vs-l-show__canvas {
  width: 360px;
  height: 360px;
  background: var(--vs-surface-2);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-r-lg);
  overflow: hidden;
  position: relative;
}
.vs-l-show__canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.vs-l-show__label {
  font-family: var(--vs-font-pixel);
  font-size: var(--vs-fs-sm);
  color: var(--vs-text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  height: 18px;
  text-align: center;
}
.vs-l-show__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.vs-l-show__pill {
  font-family: var(--vs-font-pixel);
  font-size: var(--vs-fs-xs);
  padding: 3px 9px;
  background: transparent;
  color: var(--vs-text-dim);
  border: 1px solid var(--vs-border);
  transition: all 200ms var(--vs-ease);
  white-space: nowrap;
  border-radius: var(--vs-r-sm);
  text-transform: lowercase;
  cursor: pointer;
  line-height: inherit;
}
.vs-l-show__pill:hover {
  color: var(--vs-text);
  border-color: var(--vs-text-muted);
}
.vs-l-show__pill:focus-visible {
  outline: 2px solid var(--vs-accent);
  outline-offset: 2px;
}
.vs-l-show__pill.is-active {
  color: var(--vs-text);
  border-color: var(--vs-text);
  background: var(--vs-surface-1);
}

/* ---------- Hero poster (façade pattern) ----------
   Affiché par défaut à la place du canvas Three.js. Click sur le bouton ▶
   → import dynamique de HeroShowcase.js qui écrase le poster par le canvas
   live. Conséquence : 95 % des visites n'ont jamais à charger Three.js,
   le LCP/TBT s'effondrent (cf. PSI mai 2026, score perf 41 → cible 85+).
   Layout : dragon "main" en grand au centre, 3 thumbnails secondaires
   disposées sur les coins. Animation CSS subtile (float + scale) pour
   donner une impression "vivant" sans JS. */
.vs-l-hero__poster {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 420px;
  display: grid;
  place-items: center;
}
.vs-l-hero__thumbs {
  position: relative;
  width: 360px;
  height: 360px;
  max-width: 100%;
}
.vs-l-hero__thumb {
  position: absolute;
  margin: 0;
  background: var(--vs-surface-1);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-r-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.06);
  /* Float anim qui tourne avec un délai différent par thumb (variable
     --vs-l-thumb-i posée en inline style sur chaque .vs-l-hero__thumb). */
  animation: vs-l-thumb-float 6s ease-in-out infinite;
  animation-delay: calc(var(--vs-l-thumb-i, 0) * -1.4s);
}
.vs-l-hero__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* Layout : main (dragon) au centre, 3 secondaires aux coins */
.vs-l-hero__thumb.is-main {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  border-color: var(--vs-text);
  box-shadow: 0 8px 28px rgba(10, 10, 10, 0.14);
}
.vs-l-hero__thumb:not(.is-main) {
  width: 110px;
  height: 110px;
}
.vs-l-hero__thumb:not(.is-main):nth-of-type(2) { top: 0;            left: 0;            }
.vs-l-hero__thumb:not(.is-main):nth-of-type(3) { top: 0;            right: 0; left: auto; }
.vs-l-hero__thumb:not(.is-main):nth-of-type(4) { bottom: 0;         right: 0; left: auto; }
.vs-l-hero__thumb:not(.is-main):nth-of-type(5) { bottom: 0;         left: 0;            }

@keyframes vs-l-thumb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
/* Le main est positionné par translate(-50%, -50%), il faut composer la
   float anim avec ça pour pas annuler le centrage. */
.vs-l-hero__thumb.is-main {
  animation: vs-l-thumb-float-main 6s ease-in-out infinite;
}
@keyframes vs-l-thumb-float-main {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 6px)); }
}

/* Bouton ▶ "Activer la démo 3D" - overlay en bas centre du poster */
.vs-l-hero__play {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--vs-text);
  color: #fff;
  border: 1px solid var(--vs-text);
  border-radius: var(--vs-r-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms var(--vs-ease), transform 140ms var(--vs-ease);
  box-shadow: 0 4px 14px rgba(10, 10, 10, 0.18);
  z-index: 3;
}
.vs-l-hero__play:hover {
  background: #1f1f1f;
  transform: translateX(-50%) translateY(-1px);
}
.vs-l-hero__play:disabled {
  opacity: 0.65;
  cursor: wait;
}
.vs-l-hero__play-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 880px) {
  .vs-l-hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 64px; }
}
@media (max-width: 720px) {
  .vs-l-show__canvas { width: 280px; height: 280px; }
  .vs-l-hero__thumbs { width: 280px; height: 280px; }
  .vs-l-hero__thumb.is-main { width: 160px; height: 160px; }
  .vs-l-hero__thumb:not(.is-main) { width: 86px; height: 86px; }
}

/* ---------- Sections ---------- */
.vs-l-section { padding: 88px 0; }

.vs-l-section__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 28px;
  margin-bottom: 48px;
}
.vs-l-section__title-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vs-l-section__more {
  color: var(--vs-text);
  text-decoration: none;
  font-size: var(--vs-fs-md);
  font-weight: 500;
  border-bottom: 1px solid var(--vs-text);
  padding-bottom: 2px;
  align-self: end;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 120ms var(--vs-ease), border-color 120ms var(--vs-ease);
}
.vs-l-section__more:hover {
  color: var(--vs-accent);
  border-color: var(--vs-accent);
}

/* ---------- How it works (workflow) ---------- */
.vs-l-how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--vs-border);
}
.vs-l-step {
  padding: 36px 32px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--vs-border);
}
.vs-l-step:not(:first-child) { padding-left: 32px; }
.vs-l-step:last-child { border-right: 0; padding-right: 0; }
.vs-l-step h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--vs-text);
}
.vs-l-step p {
  margin: 0;
  color: var(--vs-text-muted);
  line-height: 1.6;
  font-size: var(--vs-fs-lg);
}
.vs-l-step .vs-code {
  align-self: flex-start;
  margin-top: 6px;
  font-size: var(--vs-fs-2xl);
  padding: 4px 10px;
}
@media (max-width: 760px) {
  .vs-l-how__grid { grid-template-columns: 1fr; border-top: 0; }
  .vs-l-step {
    border-right: 0;
    border-top: 1px solid var(--vs-border);
    padding: 28px 0 8px;
  }
  .vs-l-step:not(:first-child) { padding-left: 0; }
}

/* ---------- Featured grid ---------- */
.vs-l-featured .vs-c-grid { margin-top: 0; }

/* ---------- Final CTA ---------- */
.vs-l-final {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
  padding: 96px 0 80px;
}
.vs-l-final__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.vs-l-foot {
  margin-top: 0;
  border-top: 1px solid var(--vs-border);
}
.vs-l-foot__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--vs-fs-md);
  color: var(--vs-text-muted);
  flex-wrap: wrap;
  gap: 16px;
}
.vs-l-foot__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--vs-text-muted);
}
.vs-l-foot__brand .vs-mark { width: 14px; height: 14px; }
.vs-l-foot__links {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.vs-l-foot__links a {
  color: var(--vs-text-muted);
  text-decoration: none;
  transition: color 120ms var(--vs-ease);
}
.vs-l-foot__links a:hover { color: var(--vs-text); }

/* ===========================================================
   RESPONSIVE - ajustements mobile globaux
   =========================================================== */
@media (max-width: 720px) {
  /* Shell : 32px → 16px latéral (8px économisés × 2 = 16px de
     largeur utile en plus, perceptible sur 360px). */
  .vs-l-main { padding: 0 16px; }
  /* Sections : 88px de padding vertical → 56px (pas le studio,
     juste les sections marketing landing). */
  .vs-l-section { padding: 56px 0; }
  /* Hero : padding bas 96px → 48px, headline marges réduites */
  .vs-l-hero { padding: 40px 0 48px; min-height: 0; }
  /* Section heads : moins d'espace mobile pour pas créer de gros vides */
  .vs-l-section__head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }
  /* CTAs en pleine largeur sur mobile pour faciliter le tap.
     `min-width: 100%` force chaque bouton sur sa propre ligne via le
     flex-wrap déjà posé sur le container : sinon `flex: 1; min-width: 0`
     écrasait les boutons à long label (ex "Ouvrir le générateur IA" sur
     /outils/generateur-voxel-ia) qui se faisaient cropper avec
     `white-space: nowrap`. */
  .vs-l-hero__ctas .vs-btn-l,
  .vs-l-final__ctas .vs-btn-l { flex: 1 1 100%; min-width: 100%; }
  .vs-btn-l--big { height: 50px; padding: 0 20px; font-size: 15px; }
  /* Final CTA : centrer pour cohérence avec le hero CTAs */
  .vs-l-final { padding: 56px 0 48px; align-items: stretch; }
  /* Footer : stack pour éviter écrasement */
  .vs-l-foot__inner { padding: 22px 16px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .vs-l-foot__links { gap: 16px; flex-wrap: wrap; }
}
.vs-l-foot .vs-stripe { height: 6px; }