/* Page d'accueil : l'app, puis le paywall au bout de quelques secondes.
   Elle emprunte ses variables à landing.css, chargé juste avant : même encre
   marine, même blanc cassé, donc la bascule vers /offre/ ou vers /app/ ne
   ressemble pas à un changement de site. */

.teaser {
  /* La scène est en position fixe : la page n'a rien à faire défiler, et un
     défilement resté possible laisserait voir du blanc sous les captures. */
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
}

/* ── La scène : les captures, plein écran ───────────────────────────────── */

.tz-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}

/* L'app occupe tout l'écran : c'est le produit qu'on montre, pas une image du
   produit. Elle se met en page toute seule, sa .container est centrée à
   --maxw, donc il n'y a ni cadre à dessiner ni largeur à imposer ici. */
.tz-app {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;

  /* La démo se navigue : les quatre onglets répondent, et eux seuls (voir
     APP.demanderAcces dans app/js/app.js). Pas de `pointer-events: none`
     donc, c'est une app, on doit pouvoir s'y promener.

     Conséquence : les gestes faits au-dessus d'elle restent dans son
     document et ne remontent pas au nôtre. C'est teaser.js qui va les
     écouter à l'intérieur du cadre, les deux pages étant de même origine. */
}

/* ── Le paywall ─────────────────────────────────────────────────────────── */

.tz-wall {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
  /* Le flou laisse deviner l'app derrière : on vend ce qui est visible, pas
     un écran noir. Le voile opaque reste le repli sur les navigateurs sans
     backdrop-filter, sinon le texte passerait par-dessus les captures. */
  background: rgba(251, 250, 247, .82);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  backdrop-filter: blur(9px) saturate(1.05);
  animation: tz-fade .45s ease both;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tz-wall { background: rgba(251, 250, 247, .62); }
}

@keyframes tz-fade { from { opacity: 0; } to { opacity: 1; } }

/* `display: grid` ci-dessus l'emporte sur la règle par défaut du navigateur
   pour [hidden] : sans cette ligne, le paywall serait visible d'emblée et les
   quatre secondes n'existeraient pas. */
.tz-wall[hidden] { display: none; }

.tz-card {
  width: 100%;
  max-width: 460px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 34px 30px 26px;
  text-align: center;
  animation: tz-rise .5s cubic-bezier(.22, .61, .36, 1) both;
  max-height: 100%;
  overflow-y: auto;
}

@keyframes tz-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-wall, .tz-card { animation: none; }
}

.tz-title {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--text);
  margin-bottom: 10px;
}

/* La liste des bénéfices remplace l'ancien sous-titre. Alignée à gauche
   même si la carte est centrée : une liste centrée ne se lit pas. */
.tz-list {
  list-style: none;
  text-align: left;
  margin: 0 auto 22px;
  max-width: 30em;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
}

.tz-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
}

.tz-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent, var(--text-muted));
  font-weight: 600;
}

.tz-price {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
}

.tz-once {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--text-light);
  margin: 8px 0 20px;
}

.tz-cta {
  display: block;
  padding: 16px 20px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease;
}
.tz-cta:hover { background: var(--ink-dark); }

.tz-secure {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-light);
  margin: 12px 0 0;
}

/* La garantie est un argument de vente, pas une note de bas de page : elle
   se lit un cran au-dessus de la mention Stripe, sans concurrencer le prix. */
.tz-garantie {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 8px 0 0;
}

/* Le lien « j'ai déjà ma clé ». Discret mais jamais caché : c'est la seule
   sortie pour quelqu'un qui a payé et qui revient d'un autre appareil, et
   l'y faire chercher, c'est un remboursement demandé. */
.tz-key {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tz-key:hover { color: var(--text); }

.tz-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--text-light);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}
.tz-foot a { color: var(--text-light); text-decoration: none; }
.tz-foot a:hover { color: var(--text); text-decoration: underline; }

/* Le sélecteur de langue vit dans le paywall et non dans un coin de l'écran :
   pendant les quatre secondes, rien ne doit détourner du produit. */
.tz-lang {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* ── Repli sans JavaScript ──────────────────────────────────────────────── */

.tz-noscript {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--border-strong);
  font-family: var(--font-ui);
  font-size: 14px;
}
.tz-noscript .tz-link { color: var(--text-body); }

/* ── Repli sans JavaScript ──────────────────────────────────────────────── */

.tz-noscript {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--border-strong);
  font-family: var(--font-ui);
  font-size: 14px;
}
.tz-noscript .tz-link { color: var(--text-body); }

/* ── Sélecteur de langue ────────────────────────────────────────────────
   lang.js n'est utilisé que par cette page : les pages de /offre/ ont leur
   propre sélecteur en <details class="lang-switch">, déjà habillé dans
   landing.css. Ce qui manque ici, c'est la version « boutons » que lang.js
   produit, le menu (.lang-menu) et les drapeaux (.flag), eux, sont repris
   tels quels de landing.css. */

.tz-lang .lang-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  background: var(--card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.tz-lang .lang-btn:hover { border-color: var(--accent); color: var(--accent); }
.tz-lang .lang-caret { font-size: 10px; color: var(--text-light); letter-spacing: 0; }

/* Même piège que pour .tz-wall : .lang-menu est en display:flex dans
   landing.css, ce qui l'emporte sur [hidden] et laisserait le menu ouvert en
   permanence par-dessus le paywall. */
.tz-lang .lang-menu[hidden] { display: none; }

.tz-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}
.tz-lang .lang-item:hover { background: var(--card-alt); color: var(--text); }
.tz-lang .lang-item.is-active {
  background: var(--accent-light);
  color: var(--accent-dark);
  font-weight: 700;
}