:root{
  --nuit:#0E100A; --nuit-2:#161A10;
  --olive:#8a9a5b; --olive-plein:#6b7c3f;
  --or:#C8A84E; --creme:#FAF8F4; --wave:#1B8FE3;
  --titre:'Syne',system-ui,sans-serif; --texte:'DM Sans',system-ui,sans-serif;
  --sortie:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--nuit); color:var(--creme); font-family:var(--texte);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--or);outline-offset:4px}

/* ═══ un écran = une idée, plein cadre ═══ */
.pont{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.ecran{
  position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;place-items:center;overflow:hidden;text-align:center;
  padding:max(24px,env(safe-area-inset-top)) 22px max(28px,env(safe-area-inset-bottom));
}
.fond{position:absolute;inset:0;z-index:0}
.fond img{width:100%;height:100%;object-fit:cover}
.fond::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,16,10,.72) 0%,rgba(14,16,10,.34) 34%,rgba(14,16,10,.80) 72%,rgba(14,16,10,.96) 100%);
}
.dedans{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(14px,3vh,28px);width:100%}
.ecran--photo{align-items:end}
.ecran--photo .dedans{padding-bottom:clamp(30px,9vh,80px)}

/* ═══ le mot : trois mots maximum, énormes ═══ */
.mot{
  font-family:var(--titre);font-weight:800;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(46px,13vw,120px);text-shadow:0 4px 40px rgba(0,0,0,.6)
}
.mot em{font-style:normal;color:var(--or);text-shadow:0 4px 40px rgba(14,16,10,.9)}
.wolof{
  font-family:var(--texte);font-weight:600;font-size:clamp(15px,3.6vw,22px);
  letter-spacing:.02em;color:rgba(250,248,244,.6)
}

/* ═══ le rang : le numéro de l'étape, lisible sans savoir lire ═══ */
.rang{
  width:clamp(52px,13vw,74px);height:clamp(52px,13vw,74px);border-radius:50%;
  display:grid;place-items:center;font-family:var(--titre);font-weight:800;
  font-size:clamp(24px,6vw,34px);color:var(--nuit);background:var(--or);
  box-shadow:0 10px 40px rgba(200,168,78,.35)
}

/* ═══ pictogrammes : c'est eux qui portent le sens ═══ */
.picto{width:clamp(76px,20vw,116px);height:clamp(76px,20vw,116px);color:var(--creme)}
.picto--or{color:var(--or)}

/* ═══ ouverture : le casque qui tourne ═══ */
.casque{width:min(74vw,360px);aspect-ratio:1;position:relative}
.casque .planche{filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.marque{
  font-family:var(--titre);font-weight:800;letter-spacing:.02em;
  font-size:clamp(40px,12vw,96px);line-height:1
}
.descendre{
  position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:0;right:0;z-index:3;
  display:grid;justify-items:center;gap:8px;color:rgba(250,248,244,.55);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase
}
.fleche{width:26px;height:26px;animation:respire 2.2s ease-in-out infinite}
@keyframes respire{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(8px);opacity:1}}

/* ═══ le prix ═══ */
.prix{font-family:var(--titre);font-weight:800;font-size:clamp(58px,20vw,170px);line-height:.85;letter-spacing:-.05em;white-space:nowrap}
.prix i{font-style:normal;display:inline-block;width:.16em}
.prix small{font-size:.32em;letter-spacing:0;margin-left:.08em}
.deux-voies{display:flex;gap:clamp(22px,8vw,56px);align-items:center;justify-content:center;flex-wrap:wrap}
.voie{display:grid;justify-items:center;gap:12px;font-weight:600;font-size:clamp(15px,4vw,20px)}
.jeton{
  width:clamp(84px,22vw,116px);height:clamp(84px,22vw,116px);border-radius:30px;display:grid;place-items:center;
  background:rgba(250,248,244,.07);border:1px solid rgba(250,248,244,.14);backdrop-filter:blur(10px)
}
.jeton--wave{background:rgba(27,143,227,.16);border-color:rgba(27,143,227,.4);color:var(--wave)}
.jeton--cash{background:rgba(138,154,91,.16);border-color:rgba(138,154,91,.4);color:var(--olive)}

/* ═══ boutons ═══ */
.magasins{display:grid;gap:14px;width:min(100%,380px)}
.magasin{
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--creme);color:#14160E;font-weight:600;font-size:17px;
  padding:19px 26px;border-radius:999px;text-decoration:none;transition:transform .18s var(--sortie)
}
.magasin:active{transform:scale(.97)}
.magasin--trait{background:transparent;color:var(--creme);border:1.5px solid rgba(250,248,244,.3)}

.ecran--tissu{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M48 8L88 48L48 88L8 48Z' fill='none' stroke='%23C8A84E' stroke-width='1.1' opacity='.085'/%3E%3Cpath d='M48 24L72 48L48 72L24 48Z' fill='none' stroke='%23C8A84E' stroke-width='.8' opacity='.05'/%3E%3C/svg%3E")}
/* ═══ le voile de route en WebGL, derrière l'écran « tu pars » ═══ */
#route{position:absolute;inset:0;width:100%;height:100%;z-index:0}

/* ═══ apparition ═══ */
.ecran .dedans>*{opacity:0;transform:translateY(26px)}
.ecran.actif .dedans>*{opacity:1;transform:none;transition:opacity .85s var(--sortie),transform .85s var(--sortie)}
.ecran.actif .dedans>*:nth-child(2){transition-delay:.10s}
.ecran.actif .dedans>*:nth-child(3){transition-delay:.20s}
.ecran.actif .dedans>*:nth-child(4){transition-delay:.30s}
@media(prefers-reduced-motion:reduce){
  .ecran .dedans>*{opacity:1;transform:none}
  .fleche{animation:none}
  .pont{scroll-behavior:auto}
}

/* ═══ page Tiak Tiak ═══ */
.cadran{width:min(66vw,300px);aspect-ratio:1;position:relative}
.cadran .planche{filter:drop-shadow(0 24px 50px rgba(0,0,0,.55))}

/* les cinq étapes : cinq pictogrammes, cinq mots, aucune phrase */
.etapes{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,2.4vw,22px);width:100%;max-width:640px}
@media(max-width:560px){
  /* trois par ligne, et la ligne incomplète reste centrée */
  .etapes{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 14px}
  .etape{width:calc(33.333% - 14px)}
}
.etape{display:grid;justify-items:center;gap:9px}
.etape .puce{
  width:clamp(50px,14vw,68px);height:clamp(50px,14vw,68px);border-radius:20px;display:grid;place-items:center;
  background:rgba(250,248,244,.07);border:1px solid rgba(250,248,244,.16);color:var(--creme);position:relative
}
.etape .puce svg{width:52%;height:52%}
.etape .num{
  position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;
  background:var(--or);color:var(--nuit);display:grid;place-items:center;
  font-family:var(--titre);font-weight:800;font-size:13px
}
.etape.fait .puce{background:rgba(138,154,91,.20);border-color:rgba(138,154,91,.5);color:var(--olive)}
.etape span{font-size:clamp(11.5px,3vw,14px);font-weight:500;color:rgba(250,248,244,.78);line-height:1.25}

/* le titre de marque sur deux lignes */
.marque small{
  display:block;font-family:var(--texte);font-weight:600;
  font-size:clamp(14px,3.6vw,20px);letter-spacing:.24em;
  color:var(--or);margin-top:12px
}

.lien-croise{
  margin-top:6px;font-size:14.5px;font-weight:500;color:rgba(250,248,244,.62);
  text-decoration:none;border-bottom:1px solid rgba(250,248,244,.25);padding-bottom:3px
}
.lien-croise:hover{color:var(--or);border-color:var(--or)}


/* le vrai logo Wave porte déjà son fond : le jeton s'efface derrière lui */
.jeton--marque{background:none;border:none;padding:0;overflow:hidden}
.jeton--marque img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* la liasse de billets, rendue dans Blender */
.jeton--billets{background:none;border:none;padding:0;overflow:visible}
/* la liasse est plus large que haute : elle déborde un peu pour peser autant que le logo Wave */
.jeton--billets .planche{width:132%;flex:none}

/* l'icône de l'application sur le dernier écran : elle porte l'appel au téléchargement */
.planche.badge-appli{
  width:min(58vw,250px);
  filter:drop-shadow(0 26px 52px rgba(0,0,0,.6))
}

/* le pied légal : discret, mais présent (stores et obligations légales) */
.pied-legal{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:18px;
  font-size:12px;font-weight:500;letter-spacing:.01em
}
.pied-legal a{color:rgba(250,248,244,.42);text-decoration:none}
.pied-legal a:hover,.pied-legal a:focus-visible{color:var(--or)}

/* une séquence 3D : une seule image en grille, dont on déplace la fenêtre */
.planche{width:100%;aspect-ratio:1;background-repeat:no-repeat;background-position:0 0}
.planche--6x4{background-size:600% 400%}
.planche--5x4{background-size:500% 400%}