/* Vayanji — landing publique (index.php).
   Une suite de SCÈNES VISUELLES (notification, voyage, objet), très peu de texte.
   Typo de marque = Lora (déjà vendorée pour og.php), repli Georgia.
   Mobile-first, zéro scroll horizontal, autonome (ne dépend pas de app.css). */

/* WOFF2 pour le web (3x plus léger que le TTF). Les .ttf restent sur le serveur :
   og.php en a besoin côté serveur, Imagick ne lit que du TrueType. */
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #faf8f3;
  --ink: #1a1a1a;
  --muted: #6b6862;
  --wood: #c6a47b;
  --spark: #c2853a;
  --deep: #101a16;
  --green: #2e5741;
  --serif: 'Lora', Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip plutôt que hidden : hidden ferait du body un conteneur de défilement,
     ce qui CASSE le position:sticky du voyage. clip coupe sans casser. */
  overflow-x: hidden;
  overflow-x: clip;
}

img { max-width: 100%; }
p { margin: 0 0 18px; }

.lp-wrap { max-width: 620px; margin: 0 auto; padding: 0 26px; }
.lp-section { padding: 44px 0; }
.center { text-align: center; }
.muted { color: var(--muted); font-family: var(--sans); font-size: 16px; }
.lp-small { font-size: 14px; }
.lp-contact-link { color: var(--deep); text-decoration: underline; }
.lp-contact-link:hover { color: var(--spark); }

.lp-lead { font-size: 22px; line-height: 1.5; margin: 0 0 14px; }

/* Le murmure : l'après-souffle d'une scène. */
.lp-whisper { font-style: italic; color: var(--muted); margin: 30px 0 0; }

/* La phrase-poing : grande, centrée, de l'air autour. */
.lp-punch { font-size: 24px; line-height: 1.5; text-align: center; margin: 40px 0 0; }
.lp-punch em { font-style: italic; color: var(--spark); }

/* ================= SCÈNE 1 : le hero sombre, la notification ================= */
.lp-hero {
  position: relative;
  background: var(--deep);
  color: #ece9e2;
  padding: 26px 0 54px;
}
/* Porte du Conteur qui revient. Discrète par construction : celui qui la cherche la trouve, celui
   qui découvre le produit ne la voit pas. Ancrée à GAUCHE, le Vayanji du Fil occupant le coin
   droit. z-index 4 : au-dessus du calque du Fil (3), qui est de toute façon en pointer-events:none.
   Les marges suivent l'encoche de l'iPhone (viewport-fit=cover). */
.lp-signin {
  position: absolute;
  top: calc(13px + env(safe-area-inset-top, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
  z-index: 4;
  font-family: var(--sans);
  font-size: 12px; letter-spacing: .04em; line-height: 1;
  color: #ece9e2;
  text-decoration: none;
  /* Un vrai bouton, pas un lien fantôme : le contour dit « clique-moi » sans crier, et le fond
     très léger le décolle du vert-encre. */
  padding: 7px 11px;
  border: 1px solid rgba(236, 233, 226, .38);
  border-radius: 999px;
  background: rgba(236, 233, 226, .07);
  transition: background .15s, border-color .15s;
}
.lp-signin:hover, .lp-signin:focus-visible {
  background: rgba(236, 233, 226, .16);
  border-color: rgba(236, 233, 226, .7);
}
/* ⚠️ Le bouton et le mot VAYANJI, centré, partagent la même bande horizontale : sur un écran très
   étroit ils finiraient par se frôler. On resserre le bouton plutôt que de déplacer la marque. */
@media (max-width: 360px) {
  .lp-signin { padding: 6px 9px; font-size: 11.5px; }
}
.lp-brand {
  font-family: var(--sans);
  font-size: 13px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--wood);
  margin-bottom: 34px;
}
.lp-open {
  font-family: var(--serif); font-weight: 400;
  font-size: 34px; line-height: 1.3;
  color: #faf8f3;
  margin: 0 0 14px;
}

/* La litanie fondue dans le titre : une raison à la fois COMPLÈTE l'impératif
   (« Confie un message au monde... Pour l'amour qu'on a envie de partager. »).
   9 phrases, 2,8 s chacune, cycle 25,2 s, CSS pur.
   ⚠️ Si on ajoute/retire une phrase : durée = N x 2,8 s, un delay par enfant,
   et les % des keyframes = fenêtre de 100/N (in 1.7%, hold 9.4%, out 11.1% pour N=9).
   Pour changer le RYTHME sans changer le nombre : ne toucher que la durée et les delays,
   les % restent valables (ils sont relatifs au cycle, et le ratio phrase/cycle ne bouge pas). */
.lp-rotator {
  position: relative;
  height: 3em;
  font-size: 21px; line-height: 1.45;
  color: var(--wood);
  margin: 0 0 24px;
}
.lp-rotator span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  animation: lp-rotate 25.2s linear infinite;
}
.lp-rotator span:nth-child(2) { animation-delay: 2.8s; }
.lp-rotator span:nth-child(3) { animation-delay: 5.6s; }
.lp-rotator span:nth-child(4) { animation-delay: 8.4s; }
.lp-rotator span:nth-child(5) { animation-delay: 11.2s; }
.lp-rotator span:nth-child(6) { animation-delay: 14s; }
.lp-rotator span:nth-child(7) { animation-delay: 16.8s; }
.lp-rotator span:nth-child(8) { animation-delay: 19.6s; }
.lp-rotator span:nth-child(9) { animation-delay: 22.4s; }

@keyframes lp-rotate {
  0%          { opacity: 0; transform: translateY(10px); }
  1.7%, 9.4%  { opacity: 1; transform: none; }
  11.1%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* Seconde rotation (section prix) : DÉCALÉE D'UN DEMI-CYCLE (-12,6 s) pour ne jamais
   afficher la même phrase que celle du hero. Les delays négatifs démarrent l'animation
   en cours de route, ce qui est exactement l'effet voulu. */
.lp-rotator--b span                 { animation-delay: -12.6s; }
.lp-rotator--b span:nth-child(2)    { animation-delay: -9.8s; }
.lp-rotator--b span:nth-child(3)    { animation-delay: -7s; }
.lp-rotator--b span:nth-child(4)    { animation-delay: -4.2s; }
.lp-rotator--b span:nth-child(5)    { animation-delay: -1.4s; }
.lp-rotator--b span:nth-child(6)    { animation-delay: 1.4s; }
.lp-rotator--b span:nth-child(7)    { animation-delay: 4.2s; }
.lp-rotator--b span:nth-child(8)    { animation-delay: 7s; }
.lp-rotator--b span:nth-child(9)    { animation-delay: 9.8s; }

/* Dans la section prix, la litanie répond au chiffre : serrée sous lui, aérée avant le bouton. */
.lp-rotator--b { margin: 10px 0 4px; }

/* ⚠️ Réserve la place où le Vayanji du fil vient se poser, debout sur le bord du bouton
   (il fait 58 px de haut). Sans cet écart, il atterrit dans la litanie et la masque. */
.lp-price .lp-cta { margin-top: 70px; }

.lp-open-sub {
  font-size: 19px; line-height: 1.6;
  color: rgba(236, 233, 226, .82);
  margin: 44px 0 0;
}

/* La photo du hero (le Vayanji suspendu au-dessus de l'ampoule : l'étincelle est DANS l'image)
   avec la notification qui la chevauche : l'objet dans le monde + le téléphone qui vibre,
   tout le produit en un seul visuel. */
.lp-hero-photo { position: relative; }
.lp-hero-photo img {
  width: min(400px, 86vw); height: auto;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.lp-hero-photo .lp-notif { margin-bottom: -64px; z-index: 2; }

/* Les photos-scènes (parc, osier) : l'image domine, le texte suit. */
.lp-photo {
  display: block;
  width: min(400px, 86vw); height: auto;
  margin: 0 auto 42px;
  border-radius: 22px;
  box-shadow: 0 16px 44px rgba(26, 26, 26, .18);
}

.lp-notif {
  position: relative;
  width: min(340px, 82vw);
  margin: 0 auto;
  text-align: left;
  background: #fffdf9;
  color: var(--ink);
  border-radius: 18px;
  padding: 14px 18px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  font-family: var(--sans);
  animation: lp-arrive .9s ease-out both;
}
.lp-notif-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.lp-notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--spark); flex: 0 0 auto;
}
.lp-notif-time { margin-left: auto; text-transform: none; letter-spacing: 0; }
.lp-notif-title { font-weight: 600; font-size: 16px; margin-bottom: 3px; }
.lp-notif-body { font-size: 15px; color: #444; }

@keyframes lp-arrive {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================= LE FIL : le Vayanji descend toute la page =================
   Un calque SVG couvrant tout le document (construit par landing.js) : trait pointillé
   or qui s'écrit au défilement, le Vayanji accroché à sa tête, arrêt à chaque scène.
   Filigrane : il passe PAR-DESSUS la page, discret, sans jamais capter le doigt. */
.lp-thread {
  position: absolute; top: 0; left: 0;
  z-index: 3; pointer-events: none;
}
.lp-th-trail {
  fill: none; stroke: var(--spark); stroke-opacity: .45;
  stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: .1 9;
}
.lp-th-rider { will-change: transform; }
/* Étincelle d'arrivée (2026-09-06, Patrick) : pulse SEULEMENT quand le Vayanji est immobile
   sur le point final, au-dessus du bouton d'achat -- jamais pendant la marche. Élément séparé
   du rider (sa propre classe, sa propre anim) : la mécanique de marche n'est pas touchée. */
.lp-th-spark {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  pointer-events: none;
}
/* 2026-09-06, 3ᵉ passe : la 1ʳᵉ était « à peine perceptible », la 2ᵉ « trop » -- entre-deux
   (Patrick). Voir aussi le dégradé `thArrive` dans landing.js, réglé au même point milieu. */
.lp-th-spark.is-active { animation: lp-th-arrive-pulse 1.6s ease-in-out infinite; }
@keyframes lp-th-arrive-pulse {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: .8; transform: scale(1.65); }
}
.lp-th-city {
  position: absolute; z-index: 3; pointer-events: none;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  background: rgba(250, 248, 243, .88);
  padding: 2px 10px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(26, 26, 26, .08);
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.lp-th-city.is-on { opacity: 1; transform: none; }

.lp-punch--solo { margin: 0; }

/* ================= SCÈNE « tu le suivras » : la mini-cinématique ================= */
.lp-demo {
  width: min(320px, calc(100vw - 60px));
  margin: 36px auto 0;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 44px rgba(26, 26, 26, .16);
  background: #f1f3ec;
  text-align: left;
}
.lp-demo svg { display: block; width: 100%; height: auto; }
.lp-demo-bar {
  display: flex; align-items: center; gap: 6px;
  background: #e9e5da; padding: 9px 12px;
}
.lp-demo-bar span { width: 9px; height: 9px; border-radius: 50%; background: #d8d3c6; }
.lp-demo-bar em {
  font-style: normal; font-family: var(--sans); font-size: 12px;
  letter-spacing: .04em; color: #8a867c; margin: 0 auto;
}
.lp-demo-static { display: none; }
.lp-demo.is-reduced .lp-demo-walker, .lp-demo.is-reduced .lp-demo-pop { display: none; }
.lp-demo.is-reduced .lp-demo-static { display: block; }
.lp-demo-sub { margin-top: 20px; }
.lp-demo-link {
  display: inline-block; margin-top: 16px;
  padding: 15px 40px;
  border: 1px solid var(--spark); border-radius: 999px;
  background: transparent; color: var(--spark); text-decoration: none;
  font-family: var(--sans); font-size: 17px; letter-spacing: .03em;
  cursor: pointer; transition: background .15s, color .15s;
}
/* Même effet de survol que le bouton d'achat (.lp-cta) : même famille de bouton (pilule à
   bordure --spark), donc même bascule au survol -- demande explicite de Patrick, 2026-09-05. */
.lp-demo-link:hover { background: var(--spark); color: #fff; }
/* La carte animée elle-même est cliquable (2026-09-05) : même classe (donc même handler JS),
   mais elle ne doit PAS ressembler à un bouton -- on annule le pill/bordure/texte du dessus. */
.lp-demo-link--map {
  display: block; margin: 0; padding: 0; border: 0;
  color: inherit; cursor: pointer;
}
.lp-demo-link--map:hover { background: transparent; color: inherit; }

/* Le bouton du guide : MÊME pilule et MÊME survol que les autres `.lp-demo-link` (Patrick :
   « il faut un bouton, la même pilule, mais plus petit »), juste réduit -- pour rester
   visuellement subordonné au `.lp-cta` d'achat juste au-dessus. Ne touche ni la couleur ni le
   survol, seulement le format : bordure/fond/couleur restent ceux de `.lp-demo-link`. */
.lp-demo-link--guide {
  padding: 10px 24px;
  font-size: 14px;
}

/* La modale « Voir un exemple » : la vraie cinématique (exemple.php) en iframe,
   par-dessus la landing. Créée par landing.js à la demande. */
.lp-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 26, 22, .92);
}
.lp-modal-scroll {
  position: absolute; inset: 0;
  overflow: auto; -webkit-overflow-scrolling: touch;
}
.lp-modal iframe {
  display: block; width: 100%; height: 100%; min-height: 100%;
  border: 0; background: var(--cream);
}
.lp-modal-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: #fffdf9; color: var(--ink);
  font-size: 24px; line-height: 40px; padding: 0;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
html.lp-noscroll { overflow: hidden; }

/* ================= SCÈNE 3 : les trois temps ================= */
/* Enchaînement resserré : « Et toi, tu le suivras. » juste sous le dernier temps. */
.lp-beats-section { padding-top: 20px; padding-bottom: 34px; }
.lp-follow { padding-top: 0; }
.lp-beats { display: grid; gap: 40px; text-align: center; }
.lp-beat h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 30px; line-height: 1.2; margin: 0 0 8px;
  color: var(--spark);
}
.lp-beat p { margin: 0; color: var(--muted); font-family: var(--sans); font-size: 16px; }


/* ================= SCÈNE 5 : l'objet (photo réelle, texture du bois) ================= */

/* ================= Preuve =================
   Vit DANS la scène prix, entre la photo de l'objet et la phrase-poing : on voit l'objet,
   puis ce que font ceux qui sont déjà partis, et seulement ensuite le prix.
   Le 42 px de bas reprend le rythme de .lp-photo, dont la punch hérite (margin-top 0). */
.lp-proof { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lp-price .lp-proof { margin-bottom: 42px; }
.lp-stat { flex: 1 1 150px; max-width: 210px; text-align: center; }
/* Le chiffre reste nettement sous le prix (56 px) : c'est lui le seul grand nombre de la page.
   Interligne serré, sinon la hauteur de ligne du corps de texte creuse la grille. */
.lp-stat b { display: block; font-family: var(--serif); font-size: 26px; line-height: 1.2; font-weight: 400; color: var(--spark); }
.lp-stat span { font-family: var(--sans); font-size: 14px; color: var(--muted); }

/* ================= Prix ================= */
.lp-price .lp-punch { margin: 0 0 42px; }
/* Nomme l'objet juste avant le chiffre : le prix a besoin d'un sujet. */
.lp-objet { font-size: 20px; color: var(--muted); margin: 0 0 6px; }
/* Brun-encre plutôt que le noir de --ink : à 56 px sur du crème, le noir pur est brutal.
   Celui-ci garde l'autorité du chiffre et s'accorde au bois. Contraste 9:1, très lisible.
   Alternative possible : var(--green) #2e5741, le vert du trajet. */
.lp-amount { font-family: var(--serif); font-size: 56px; line-height: 1; margin: 0 0 10px; color: #6a6055; }
.lp-cta {
  display: inline-block; margin: 24px 0 14px; padding: 15px 42px;
  border: 1px solid var(--spark); border-radius: 999px;
  background: transparent; color: var(--spark);
  font-family: var(--sans); font-size: 16px; letter-spacing: .04em;
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s;
}
/* ⭐ 2026-08-31 : bascule Stripe live -- ce bouton était disabled/"Bientôt disponible" depuis le
   début, donc jamais réellement stylé comme interactif (cursor:not-allowed, opacity:.85, aucun
   hover). Retiré : c'est maintenant le vrai geste d'achat. */
.lp-cta:hover { background: var(--spark); color: #fff; }

/* ================= L'objet en 3D ================= */
/* Vit dans la première question de la FAQ, jamais dans le flux des scènes. */
/* Le canvas occupe sa place dès l'ouverture ; l'objet y apparaît en fondu quand il est prêt,
   plutôt que de surgir d'un coup. */
.lp-see-stage { margin-top: 6px; }
.lp-see-canvas { opacity: 0; transition: opacity .5s; }
.lp-see-stage.is-ready .lp-see-canvas { opacity: 1; }
.lp-see-canvas {
  display: block; width: 100%; height: 300px;
  touch-action: none;            /* sans quoi le geste de rotation ferait défiler la page */
  cursor: grab;
}
.lp-see-canvas:active { cursor: grabbing; }

/* ================= « Tu as reçu un Vayanji ? » (le filet cadeau) ================= */
/* Sobre par principe : filet fin au-dessus, petit corps ; ne concurrence ni les scènes ni le
   bouton d'achat. Le lien (« Voir le guide ») est ALLÉGÉ en lien texte -- voir
   `.lp-demo-link--guide` plus haut -- pour ne pas ressembler au bouton d'achat juste au-dessus. */
.lp-guide {
  border-top: 1px solid rgba(26, 26, 26, .08);
  padding: 36px 0;
}
.lp-guide-q {
  font-family: var(--serif); font-size: 19px; line-height: 1.4;
  color: var(--ink); margin: 0 0 6px;
}
.lp-guide-p {
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
  color: var(--muted); margin: 0;
}

/* ================= Quelques questions ================= */
.lp-faq { padding-top: 0; }
.lp-faq-title {
  font-family: var(--sans); font-weight: 400;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wood);
  text-align: center; margin: 0 0 22px;
}
.lp-q { border-top: 1px solid rgba(26, 26, 26, .08); }
.lp-q:last-of-type { border-bottom: 1px solid rgba(26, 26, 26, .08); }
.lp-q summary {
  list-style: none; cursor: pointer;
  padding: 16px 26px 16px 0; position: relative;
  font-size: 17px; line-height: 1.4;
}
.lp-q summary::-webkit-details-marker { display: none; }
/* Le chevron, en CSS pur : pas de « + », qui fait inventaire (même règle que la timeline du suivi). */
.lp-q summary::after {
  content: ''; position: absolute; right: 4px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--wood); border-bottom: 1.5px solid var(--wood);
  transform: rotate(45deg); transition: transform .18s;
}
.lp-q[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lp-q-body { padding: 0 0 20px; }
.lp-q-body p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.lp-q-body p:last-child { margin-bottom: 0; }
.lp-q-body .lp-demo-link { margin-top: 2px; }

/* ================= Pied ================= */
.lp-foot { padding: 30px 0 46px; text-align: center; }
.lp-foot-slogan { font-style: italic; color: var(--muted); margin-bottom: 8px; }
.lp-foot a { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.lp-foot-legal { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 18px; }
.lp-foot-legal a { font-size: 13px; }

@media (min-width: 620px) {
  .lp-open { font-size: 44px; }
  .lp-rotator { font-size: 24px; }
  .lp-punch { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-notif { animation: none; }
  /* Dans le hero, empiler les 9 raisons serait illisible : on fige la DERNIÈRE,
     la plus générique (« Pour toutes les raisons qui te donneront envie... »). */
  .lp-rotator { height: auto; }
  .lp-rotator span { display: none; }
  .lp-rotator span:last-child {
    display: block; position: static;
    opacity: 1; animation: none; transform: none;
  }
  /* Section prix : on fige la PREMIÈRE (« Pour voir jusqu'où il ira. »), pas la générique,
     pour ne pas répéter mot pour mot celle du hero. */
  .lp-rotator--b span:last-child { display: none; }
  .lp-rotator--b span:first-child {
    display: block; position: static;
    opacity: 1; animation: none; transform: none;
  }
}