/* LA LANDING bndl.me (04/11/2026). La DA de docs/DA-PROXIMA.md 2.17 : Geist (fichiers officiels du paquet npm « geist », licence SIL OFL 1.1 dans fonts/OFL-Geist.txt),
   gris tres fonce bleute et degrade violet du logo, comme l'outil (05/11/2026 : « on refait par notre new DA »). Sa demande : « fait la meme structure que axiom [...] dans nos couleurs DA comme le site ». */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/geist-sans-var.woff2') format('woff2'); }

:root {
  --fond: #0f1219;
  --fond-2: #12151d;
  --texte: #f1f1f4;
  --doux: #9aa1b4;
  --pale: #7b8297;
  --ligne: rgba(225, 226, 242, .07);
  --ligne-forte: rgba(225, 226, 242, .12);
  --carte: rgba(22, 26, 35, .66);
  --panneau: #161a23;
  --haut: #1f2430;
  --accent: #8a75f4;
  --on-accent: #fff;
  --degrade: linear-gradient(180deg, #7a63e6 0%, #584aba 50%, #3c3895 100%);
  --degrade-survol: linear-gradient(180deg, #8670ee 0%, #6554c8 50%, #453fa4 100%);
  --up: #31e3ac;
  --r-sm: 6px; --r-md: 8px; --r-btn: 9px; --r-bloc: 14px; --r-pill: 999px;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tracking: -.012em;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-sortie: cubic-bezier(.16, 1, .3, 1);
  --peek: clamp(20px, 7vw, 120px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--sans); font-weight: 500; letter-spacing: var(--tracking);
  line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
::selection { color: #ece8ff; background: rgba(138, 117, 244, .38); }
img, video { display: block; max-width: 100%; }
video { width: 100%; height: auto; background: var(--fond-2); }
svg { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
h1, h2, h3, b { font-weight: 500; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.saut { position: absolute; left: 12px; top: -60px; z-index: 90; padding: 8px 14px; border-radius: var(--r-md); background: #fff; color: #000; font-size: .85rem; }
.saut:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---- Boutons : le plein accent de l'app et le « contourne » ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-btn); white-space: nowrap;
  font: inherit; font-size: .92rem; letter-spacing: var(--tracking);
  transition: scale .2s var(--ease-spring), box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn:active { scale: .95; }
.btn-p {
  color: var(--on-accent); border: 1px solid transparent;
  background: var(--degrade);
  box-shadow: inset 0 1px rgba(255, 255, 255, .25);
}
.btn-p:hover { background: var(--degrade-survol); }
.btn-g { color: var(--texte); border: 1px solid var(--ligne-forte); background: var(--carte); }
.btn-g:hover { border-color: rgba(225, 226, 242, .2); background: var(--haut); }
.btn-l { height: 46px; padding: 0 20px; font-size: 1rem; border-radius: 10px; }
.btn img { width: 18px; height: 18px; }

/* ---- La barre du haut ---- */
.tete { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--ligne); background: rgba(15, 18, 25, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tete .wrap { display: flex; align-items: center; gap: 12px; height: 64px; }
.marque { display: inline-flex; align-items: center; gap: 9px; font-size: 1.2rem; letter-spacing: -.02em; line-height: 1; }
.marque img { height: 20px; width: auto; }
.beta {
  padding: 3px 8px; border: 1px solid var(--ligne-forte); border-radius: var(--r-pill);
  color: var(--pale); font-size: .72rem; letter-spacing: .02em; line-height: 1.2;
}
.tete .actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tete .lien { padding: 6px 10px; border-radius: var(--r-md); font-size: .88rem; color: var(--doux); transition: color .15s ease; }
.tete .lien:hover { color: #fff; }
.tete .btn { height: 34px; padding: 0 13px; font-size: .86rem; border-radius: var(--r-md); }
.tete .btn img { width: 16px; height: 16px; }
@media (max-width: 560px) { .btn-discord { display: none; } }

/* ---- L'entree du hero : le meme flou et la meme montee que l'ancienne page, en cascade ---- */
.entree { animation: entree .9s var(--ease-sortie) both; }
.e1 { animation-delay: .04s; } .e2 { animation-delay: .1s; } .e3 { animation-delay: .18s; } .e4 { animation-delay: .24s; } .e5 { animation-delay: .3s; } .e6 { animation-delay: .34s; }
@keyframes entree { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---- Hero ---- */
.hero { position: relative; overflow: clip; text-align: center; padding-top: clamp(40px, 7vh, 84px); }
.hero-texte { position: relative; z-index: 4; }
.hero-marque { width: 60px; height: auto; margin: 0 auto 22px; }
h1 { letter-spacing: -.034em; line-height: 1.02; font-size: clamp(2.45rem, 6.4vw, 4.8rem); }
h1 > span { display: block; text-wrap: balance; }
h1 .l2 { color: var(--pale); }
.sous { margin: 20px auto 0; color: var(--doux); font-size: clamp(1rem, 2.3vw, 1.1rem); }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
@media (max-width: 520px) { .ctas { flex-direction: column; align-items: stretch; max-width: 300px; margin-left: auto; margin-right: auto; } }
.garants { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 26px; }
.live {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px;
  padding: 6px 14px; border: 1px solid var(--ligne); border-radius: var(--r-pill); background: var(--carte);
  font-size: .8rem; color: var(--doux);
}
.live .lbl { display: inline-flex; align-items: center; gap: 10px; }
.pt { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }
.chaine { display: inline-flex; align-items: center; gap: 6px; color: var(--texte); }
.chaine img { width: 16px; height: 16px; }

.hero-scene { position: relative; margin-top: clamp(30px, 5vh, 56px); padding: 0 20px clamp(64px, 10vw, 130px); }
.cadre-hero {
  position: relative; z-index: 3; width: 100%; max-width: 1080px; margin: 0 auto; padding: 6px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(225, 226, 242, .09), rgba(225, 226, 242, .03));
  box-shadow: 0 0 0 1px rgba(225, 226, 242, .1), 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.cadre-hero video { border-radius: 11px; aspect-ratio: 16 / 10; }

/* ---- LE TUNNEL (ecrit ici, aucun code repris) : des cadres imbriques, chacun passe lineairement de sa taille a celle du suivant et de son opacite a la sienne ;
   au bout de la boucle chacun a pris la place exacte du suivant, l'oeil voit donc des cadres qui sortent du centre, sans fin. Chaque cadre porte une lumiere a l'accent
   qui tourne lentement. Seules transform et opacity bougent. ---- */
.tunnel {
  --base-l: min(1000px, 88vw); --base-h: calc(var(--base-l) * .625); --q: 1.17; --duree: 2.6s; --rayon: 20px;
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none;
}
.tunnel i {
  position: absolute; width: var(--base-l); height: var(--base-h); margin: calc(var(--base-h) / -2) 0 0 calc(var(--base-l) / -2);
  border-radius: var(--rayon); overflow: hidden; background: var(--fond);
  box-shadow: 0 0 0 1px rgba(165, 148, 255, .22), inset 0 0 calc(var(--base-l) * .045) rgba(138, 117, 244, .16);
  transform: scale(var(--a)); opacity: var(--oa);
  animation: tunnel var(--duree) linear infinite; will-change: transform, opacity;
}
/* La lumiere : deux lobes doux a l'accent, qui tournent lentement. Tous les cadres ont la meme phase : le passage d'un cadre au suivant ne se voit pas. */
.tunnel i::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; margin: -75% 0 0 -75%;
  background: conic-gradient(from 0deg, rgba(138, 117, 244, 0) 0deg, rgba(138, 117, 244, .18) 55deg, rgba(165, 148, 255, .26) 85deg, rgba(138, 117, 244, .06) 130deg, rgba(138, 117, 244, 0) 180deg, rgba(138, 117, 244, .14) 240deg, rgba(165, 148, 255, .2) 270deg, rgba(138, 117, 244, .05) 315deg, rgba(138, 117, 244, 0) 360deg);
  animation: tunnel-lumiere 14s linear infinite; will-change: transform;
}
/* Le noyau : ne bouge pas, cache le point ou la lumiere converge, les cadres sortent de derriere lui. */
.tunnel::after {
  content: ''; position: absolute; z-index: 9; width: var(--base-l); height: var(--base-h); margin: calc(var(--base-h) / -2) 0 0 calc(var(--base-l) / -2);
  border-radius: var(--rayon); background: var(--fond); box-shadow: 0 0 0 1px rgba(165, 148, 255, .2);
}
@keyframes tunnel { to { transform: scale(var(--b)); opacity: var(--ob); } }
@keyframes tunnel-lumiere { to { transform: rotate(360deg); } }
.tunnel i:nth-child(1) { z-index: 7; --a: 1; --b: var(--q); --oa: 1; --ob: 1; }
.tunnel i:nth-child(2) { z-index: 6; --a: var(--q); --b: calc(var(--q) * var(--q)); --oa: 1; --ob: .86; }
.tunnel i:nth-child(3) { z-index: 5; --a: calc(var(--q) * var(--q)); --b: calc(var(--q) * var(--q) * var(--q)); --oa: .86; --ob: .68; }
.tunnel i:nth-child(4) { z-index: 4; --a: calc(var(--q) * var(--q) * var(--q)); --b: calc(var(--q) * var(--q) * var(--q) * var(--q)); --oa: .68; --ob: .5; }
.tunnel i:nth-child(5) { z-index: 3; --a: calc(var(--q) * var(--q) * var(--q) * var(--q)); --b: calc(var(--q) * var(--q) * var(--q) * var(--q) * var(--q)); --oa: .5; --ob: .32; }
.tunnel i:nth-child(6) { z-index: 2; --a: calc(var(--q) * var(--q) * var(--q) * var(--q) * var(--q)); --b: calc(var(--q) * var(--q) * var(--q) * var(--q) * var(--q) * var(--q)); --oa: .32; --ob: .16; }
.tunnel i:nth-child(7) { z-index: 1; --a: calc(var(--q) * var(--q) * var(--q) * var(--q) * var(--q) * var(--q)); --b: calc(var(--q) * var(--q) * var(--q) * var(--q) * var(--q) * var(--q) * var(--q)); --oa: .16; --ob: 0; }
/* Hors de la vue, le tunnel ne tourne pas. */
.js .tunnel:not(.en-vue) i, .js .tunnel:not(.en-vue) i::before { animation-play-state: paused; }
/* Le voile : le texte du hero reste lisible, le tunnel s'eteint vers le fond. */
.hero::before, .bloc-rewards::before, .fin::before {
  content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none;
}
.hero::before { background: linear-gradient(180deg, var(--fond) 0%, rgba(15, 18, 25, .96) 22%, rgba(15, 18, 25, .5) 42%, rgba(15, 18, 25, 0) 58%, rgba(15, 18, 25, 0) 84%, var(--fond) 100%); }
.hero-scene { position: static; }
.hero .tunnel { animation: tunnel-entree 1.4s ease .25s both; }
@keyframes tunnel-entree { from { opacity: 0; } to { opacity: 1; } }
.cadre-hero { z-index: 5; }
/* Le tunnel est centre sur la video : son centre est place par landing.js (sans script, au milieu du cadre a peu pres). */
.hero .tunnel { top: auto; bottom: calc(clamp(64px, 10vw, 130px) + min(1080px, 100vw - 40px) * .3125); }

/* ---- Blocs ---- */
.bloc { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
.titre { font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: -.03em; line-height: 1.08; text-align: center; text-wrap: balance; }
.titre-g { text-align: left; }
.chapo { max-width: 640px; margin: 16px auto 0; text-align: center; color: var(--doux); font-size: clamp(1rem, 1.6vw, 1.1rem); text-wrap: balance; }

/* ---- L'effet de texte : mot par mot, flou et montee, puis entree des blocs ---- */
.rv { display: inline-block; }
.js [data-mots] .rv { opacity: 0; transform: translateY(.42em); filter: blur(6px); transition: opacity .7s var(--ease-sortie), transform .7s var(--ease-sortie), filter .7s var(--ease-sortie); transition-delay: calc(var(--i) * 52ms); }
.js [data-mots].vu .rv { opacity: 1; transform: none; filter: none; }
.js [data-revele] { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity .8s var(--ease-sortie) .08s, transform .8s var(--ease-sortie) .08s, filter .8s var(--ease-sortie) .08s; }
.js [data-revele].vu { opacity: 1; transform: none; filter: none; }

/* ---- Features : onglets ---- */
.onglets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 16px; margin-top: clamp(32px, 5vw, 56px); }
.onglet { position: relative; text-align: left; padding: 16px 4px 18px; border-top: 1px solid var(--ligne-forte); color: var(--pale); transition: color .2s ease; }
.onglet::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-sortie); }
.onglet b { display: block; font-size: 1rem; color: var(--doux); transition: color .2s ease; }
.onglet span { display: block; margin-top: 3px; font-size: .86rem; line-height: 1.4; }
.onglet:hover b { color: var(--texte); }
.onglet[aria-selected="true"] b { color: #fff; }
.onglet[aria-selected="true"] { color: var(--doux); }
.onglet[aria-selected="true"]::before { transform: scaleX(1); }

/* ---- Features : le carrousel. Sans script, les diapos s'empilent. ---- */
.carrousel { position: relative; margin-top: 16px; }
.piste { display: flex; flex-direction: column; gap: 40px; padding: 0 20px; }
.js .carrousel { overflow: clip; }
.js .piste { flex-direction: row; align-items: flex-start; gap: 22px; padding: 0; width: max-content; transition: transform .75s var(--ease-sortie), height .5s var(--ease-sortie); will-change: transform; }
.diapo { width: 100%; }
.js .diapo { flex: 0 0 auto; width: min(1120px, calc(100vw - var(--peek) * 2)); opacity: .28; filter: saturate(.7); transition: opacity .5s ease, filter .5s ease; }
.js .diapo.active { opacity: 1; filter: none; }
.sous-diapo { display: flex; justify-content: flex-end; margin-top: 14px; min-height: 24px; }
.lien-fleche { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--doux); transition: color .15s ease; }
.lien-fleche svg { width: 13px; height: 13px; transition: transform .2s var(--ease-sortie); }
.lien-fleche:hover { color: #fff; }
.lien-fleche:hover svg { transform: translate(2px, -2px); }
.fleche {
  position: absolute; z-index: 5; top: calc(50% - 40px); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--ligne-forte); background: rgba(22, 26, 35, .86); color: var(--texte); transition: background-color .2s ease, scale .2s var(--ease-spring);
}
.fleche:hover { background: var(--haut); }
.fleche:active { scale: .92; }
.fleche svg { width: 18px; height: 18px; }
.fleche-g { left: calc(var(--peek) / 2 - 22px); }
.fleche-d { right: calc(var(--peek) / 2 - 22px); }

/* Diapo 1 : l'accordeon et sa video */
.carte-diapo { border: 1px solid var(--ligne-forte); border-radius: var(--r-bloc); background: var(--panneau); overflow: hidden; }
.diapo-double { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.acc { display: flex; flex-direction: column; justify-content: center; padding: clamp(10px, 2vw, 22px) clamp(16px, 2.6vw, 34px); }
.acc-item { border-bottom: 1px solid var(--ligne); }
.acc-item:last-child { border-bottom: 0; }
.acc h3 { font-size: 1.04rem; }
.acc-tete { display: flex; align-items: center; gap: 12px; width: 100%; padding: 18px 2px; text-align: left; color: var(--doux); transition: color .2s ease; min-height: 44px; }
.acc-tete svg { flex: none; width: 17px; height: 17px; color: var(--pale); transition: color .2s ease; }
.acc-tete:hover { color: var(--texte); }
.acc-item.ouvert .acc-tete { color: #fff; }
.acc-item.ouvert .acc-tete svg { color: #fff; }
.acc-corps { display: grid; grid-template-rows: 1fr; }
.js .acc-corps { grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-sortie); }
.js .acc-item.ouvert .acc-corps { grid-template-rows: 1fr; }
.acc-corps > div { min-height: 0; overflow: hidden; }
.js .acc-corps > div { opacity: 0; transition: opacity .35s ease; }
.js .acc-item.ouvert .acc-corps > div { opacity: 1; transition: opacity .45s ease .08s; }
.acc-corps p { color: var(--doux); font-size: .94rem; line-height: 1.55; }
.acc-corps p:last-child { padding-bottom: 20px; }
.acc-fort { color: var(--texte) !important; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ligne); }
.clips { position: relative; min-height: 0; background: var(--fond-2); border-left: 1px solid var(--ligne); aspect-ratio: 1; }
.clip { position: absolute; inset: 0; }
html:not(.js) .clip:not(.actif) { display: none; }
.js .clip { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.js .clip.actif { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.clip video { width: 100%; height: 100%; object-fit: cover; }

/* Les autres diapos : la video dans un cadre degrade a l'accent */
.cadre-gr {
  position: relative; padding: 6px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(225, 226, 242, .11), rgba(225, 226, 242, .03) 46%, rgba(225, 226, 242, .06) 100%);
  box-shadow: 0 0 0 1px rgba(225, 226, 242, .08), 0 34px 90px -36px rgba(0, 0, 0, .9);
}
.clip-large video { border-radius: 10px; aspect-ratio: 16 / 10; }
.surcouche {
  position: absolute; left: 26px; bottom: 26px; width: 262px; padding: 14px 16px; border-radius: 12px;
  background: rgba(15, 18, 25, .84); box-shadow: 0 0 0 1px var(--ligne-forte), 0 20px 50px -18px rgba(0, 0, 0, .9);
}
.sur-titre { font-size: .82rem; color: var(--doux); }
.sur-liste { margin-top: 10px; display: grid; gap: 8px; }
.sur-liste li { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--texte); line-height: 1.3; }
.sur-liste svg { flex: none; width: 15px; height: 15px; color: var(--texte); }
.sur-logos { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--ligne); }
.sur-logos img { width: 20px; height: 20px; object-fit: contain; }

/* ---- Rewards ---- */
.bloc-rewards { overflow: clip; }
.bloc-rewards > .wrap { position: relative; z-index: 3; }
.tunnel-bas { top: clamp(190px, 20vw, 270px); --base-l: min(800px, 88vw); --base-h: calc(var(--base-l) * .46); --q: 1.2; --rayon: 16px; }
.bloc-rewards::before { background: linear-gradient(180deg, var(--fond) 0%, rgba(15, 18, 25, .3) 18%, rgba(15, 18, 25, .3) 34%, var(--fond) 56%); }
.grille-vit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(32px, 5vw, 56px); border-radius: var(--r-bloc); overflow: hidden;
  background: var(--ligne-forte); gap: 1px; box-shadow: 0 0 0 1px var(--ligne-forte), 0 40px 120px -40px rgba(0, 0, 0, .9);
}
.vit { display: flex; flex-direction: column; background: var(--panneau); }
.vit-scene { position: relative; height: 290px; overflow: hidden; border-bottom: 1px solid var(--ligne); }
.vit-texte { padding: 22px 24px 24px; }
.vit-texte h3 { font-size: 1.12rem; }
.vit-texte p { margin-top: 8px; color: var(--doux); font-size: .94rem; }
.vit-texte .lien-fleche { margin-top: 12px; }
/* Une vignette hors de la vue ne tourne pas. */
.js .vit-scene:not(.en-vue) *, .js .arbre:not(.en-vue) *, .js .enclave:not(.en-vue) * { animation-play-state: paused !important; }

/* Vignette 1 : claim. L'etat de base est l'etat final ; la boucle dure 7 s. */
.cl-panneau { position: absolute; left: 50%; top: 50%; width: min(330px, 84%); transform: translate(-50%, -50%); padding: 14px; border-radius: 12px; background: #161a23; box-shadow: 0 0 0 1px var(--ligne-forte), 0 24px 50px -20px rgba(0, 0, 0, .8); }
.cl-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--doux); padding-bottom: 10px; border-bottom: 1px solid var(--ligne); margin-bottom: 8px; }
.cl-somme { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 1.05rem; color: #fff; min-width: 74px; justify-content: flex-end; }
.cl-somme img { width: 16px; height: 16px; }
.cl-v1 { animation: cl-v1 7s ease infinite; }
.cl-v0 { position: absolute; right: 0; opacity: 0; color: var(--doux); animation: cl-v0 7s ease infinite; }
.cl-ligne { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .86rem; color: var(--texte); }
.cl-ligne img { width: 20px; height: 20px; border-radius: 50%; }
.cl-ligne b { margin-left: auto; color: var(--texte); animation: cl-v1 7s ease infinite; }
.cl-bouton { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; height: 36px; font-size: .86rem; border-radius: var(--r-md); color: #e0a841; background: rgba(224, 168, 65, .15); animation: cl-bouton 7s ease infinite; }
.cl-bouton svg { width: 14px; height: 14px; }
.cl-curseur { position: absolute; left: 50%; top: 50%; width: 26px; height: 32px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); transform: translate(120px, 150px); opacity: 0; animation: cl-curseur 7s ease infinite; }
.cl-toast { position: absolute; left: 50%; top: 18px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-md); font-size: .82rem; background: #161a23; color: var(--texte); box-shadow: 0 0 0 1px rgba(225, 226, 242, .3), 0 12px 30px -12px rgba(0, 0, 0, .9); opacity: 0; transform: translate(-50%, -8px); animation: cl-toast 7s ease infinite; }
.cl-toast svg { width: 14px; height: 14px; color: var(--texte); }
@keyframes cl-curseur { 0%, 8% { opacity: 0; transform: translate(120px, 150px); } 16% { opacity: 1; } 34%, 40% { opacity: 1; transform: translate(10px, 82px) scale(1); } 43% { transform: translate(10px, 82px) scale(.84); } 46% { transform: translate(10px, 82px) scale(1); } 62% { opacity: 1; transform: translate(120px, 150px); } 68%, 100% { opacity: 0; transform: translate(120px, 150px); } }
@keyframes cl-bouton { 0%, 42% { filter: none; scale: 1; } 44% { filter: brightness(1.25); scale: .97; } 48%, 100% { filter: none; scale: 1; } }
@keyframes cl-v1 { 0%, 46% { opacity: 1; } 50%, 86% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes cl-v0 { 0%, 46% { opacity: 0; } 50%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes cl-toast { 0%, 46% { opacity: 0; transform: translate(-50%, -8px); } 52%, 78% { opacity: 1; transform: translate(-50%, 0); } 86%, 100% { opacity: 0; transform: translate(-50%, -8px); } }

/* Vignette 2 : rang. Les rangs s'allument l'un apres l'autre, les chevrons entre eux. */
.sc-rank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 0 18px; }
.rk-rangee { display: flex; align-items: flex-start; justify-content: center; gap: clamp(2px, .9vw, 10px); width: 100%; }
.rk { flex: 0 1 72px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: rk-allume 8s ease infinite; }
.rk img { width: 100%; height: auto; }
.rk small { font-size: .72rem; color: var(--doux); }
.rk-chev { flex: none; margin-top: clamp(14px, 1.7vw, 22px); color: var(--pale); animation: rk-chev 8s ease infinite; }
.rk-chev svg { width: 13px; height: 13px; }
.r1 { animation-delay: 0s; } .c1 { animation-delay: .1s; } .r2 { animation-delay: .9s; } .c2 { animation-delay: 1s; } .r3 { animation-delay: 1.8s; } .c3 { animation-delay: 1.9s; } .r4 { animation-delay: 2.7s; } .c4 { animation-delay: 2.8s; } .r5 { animation-delay: 3.6s; }
@keyframes rk-allume { 0% { opacity: .28; filter: grayscale(.8); transform: scale(.94); } 8% { opacity: 1; filter: none; transform: scale(1.06); } 12%, 62% { opacity: 1; filter: none; transform: none; } 70%, 100% { opacity: .28; filter: grayscale(.8); transform: scale(.94); } }
@keyframes rk-chev { 0% { color: var(--pale); opacity: .4; } 8%, 62% { color: #fff; opacity: 1; } 70%, 100% { color: var(--pale); opacity: .4; } }
.rk-jauge { width: min(380px, 82%); height: 6px; border-radius: 99px; background: rgba(225, 226, 242, .09); overflow: hidden; }
.rk-jauge i { display: block; height: 100%; border-radius: 99px; background: #6cc6ff; transform-origin: 0 50%; animation: rk-jauge 8s cubic-bezier(.3, .1, .3, 1) infinite; }
@keyframes rk-jauge { 0% { transform: scaleX(.04); } 55%, 90% { transform: scaleX(1); } 100% { transform: scaleX(.04); } }

/* Vignette 3 : parrainage, l'arbre de PFP */
.ref-lien { position: absolute; z-index: 3; left: 50%; top: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: var(--r-md); font-size: .8rem; color: var(--texte); background: #161a23; box-shadow: 0 0 0 1px var(--ligne-forte); white-space: nowrap; }
.ref-lien svg { width: 13px; height: 13px; color: var(--pale); }
.ref-traits { position: absolute; left: 0; top: 34px; width: 100%; height: calc(100% - 34px); }
.ref-traits path { fill: none; stroke: rgba(225, 226, 242, .3); stroke-width: 1.2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; animation: trait-defile 1.4s linear infinite; }
@keyframes trait-defile { to { stroke-dashoffset: -14; } }
.ref-n { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translate(-50%, -50%); animation: ref-pop 7s var(--ease-sortie) infinite; }
.ref-n img { border-radius: 50%; box-shadow: 0 0 0 2px var(--panneau), 0 0 0 3px rgba(225, 226, 242, .3), 0 10px 24px -8px rgba(0, 0, 0, .9); }
.ref-n small { font-size: .7rem; color: var(--texte); }
.n0 { left: 50%; top: 27%; animation: none; }
.n1 { left: 26%; top: 52%; animation-delay: .3s; } .n2 { left: 74%; top: 52%; animation-delay: .75s; }
.n3 { left: 12%; top: 80%; animation-delay: 1.2s; } .n4 { left: 38%; top: 80%; animation-delay: 1.5s; } .n5 { left: 62%; top: 80%; animation-delay: 1.8s; } .n6 { left: 88%; top: 80%; animation-delay: 2.1s; }
@keyframes ref-pop { 0% { opacity: .34; scale: .9; } 7% { opacity: 1; scale: 1.08; } 12%, 78% { opacity: 1; scale: 1; } 90%, 100% { opacity: .34; scale: .9; } }
.ref-lv { position: absolute; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pale); }
.lv1 { left: 4%; top: 37%; } .lv2 { left: 4%; top: 91%; }

/* Vignette 4 : carte de P&L et Day card */
.pnl-carte { position: absolute; left: 50%; top: 50%; width: min(330px, 76%); padding: 14px 16px; border-radius: 12px; transform: translate(-62%, -50%) rotate(-2deg); background: linear-gradient(145deg, #1c1e28, #111319 60%); box-shadow: 0 0 0 1px var(--ligne-forte), 0 30px 60px -20px rgba(0, 0, 0, .9); }
.pnl-haut, .pnl-bas { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--doux); }
.pnl-haut img { border-radius: 25%; }
.pnl-haut b, .pnl-bas b { color: var(--texte); }
.pnl-haut span, .pnl-bas span { margin-left: auto; }
.pnl-grand { position: relative; display: flex; align-items: center; gap: 10px; margin: 26px 0 28px; font-size: clamp(2rem, 3.6vw, 2.7rem); letter-spacing: -.03em; line-height: 1; color: var(--up); }
.pnl-grand img { width: 26px; height: 26px; }
.pv1 { animation: pv1 8s ease infinite; }
.pv2 { position: absolute; left: 36px; opacity: 0; animation: pv2 8s ease infinite; }
@keyframes pv1 { 0%, 42% { opacity: 1; filter: none; } 50%, 92% { opacity: 0; filter: blur(4px); } 100% { opacity: 1; filter: none; } }
@keyframes pv2 { 0%, 42% { opacity: 0; filter: blur(4px); } 50%, 92% { opacity: 1; filter: none; } 100% { opacity: 0; filter: blur(4px); } }
.day-carte { position: absolute; right: clamp(10px, 4%, 26px); bottom: 18px; width: 188px; padding: 10px 12px; border-radius: 10px; background: #161a23; box-shadow: 0 0 0 1px var(--ligne-forte), 0 26px 50px -18px rgba(0, 0, 0, .95); animation: day-flotte 6s ease-in-out infinite; }
.day-t { display: flex; align-items: center; gap: 7px; font-size: .76rem; color: var(--doux); padding-bottom: 7px; margin-bottom: 4px; border-bottom: 1px solid var(--ligne); }
.day-t svg { width: 13px; height: 13px; }
.day-l { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: .78rem; color: var(--texte); }
.day-l img { width: 14px; height: 14px; }
.day-l b { margin-left: auto; color: var(--up); }
@keyframes day-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---- Architecture ---- */
.deux-cartes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: clamp(28px, 4vw, 44px); }
.carte-arch { display: flex; flex-direction: column; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-bloc); background: var(--panneau); box-shadow: 0 0 0 1px var(--ligne-forte); }
.carte-arch h3 { font-size: 1.2rem; }
.carte-arch > p { margin-top: 10px; color: var(--doux); font-size: .96rem; }
.arbre { position: relative; height: 310px; margin-top: 26px; }
.arbre-traits, .enc-traits { position: absolute; inset: 0; width: 100%; height: 100%; }
.arbre-traits path, .enc-traits path { fill: none; stroke: rgba(225, 226, 242, .28); stroke-width: 1.2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; animation: trait-defile 1.6s linear infinite; }
.noeud { position: absolute; left: var(--x, 50%); display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translateX(-50%); width: 76px; }
.noeud small { font-size: .72rem; color: var(--doux); text-align: center; line-height: 1.2; white-space: nowrap; }
.noeud img { box-sizing: content-box; padding: 9px; border-radius: 11px; background: #161a23; box-shadow: 0 0 0 1px var(--ligne-forte); object-fit: contain; }
.nm { top: 0; }
.nm img { padding: 8px 12px; box-shadow: 0 0 0 1px rgba(225, 226, 242, .3); }
.nc { top: 118px; }
.nc img { border-radius: 50%; }
.np { top: 226px; }
.enclave { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 26px; min-height: 310px; }
.enc-boite { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(320px, 100%); padding: 16px; border: 1px dashed rgba(225, 226, 242, .3); border-radius: 12px; background: rgba(225, 226, 242, .025); font-size: .94rem; }
.enc-cle { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: #fff; background: #161a23; box-shadow: 0 0 0 1px rgba(225, 226, 242, .22); animation: cle-souffle 4s ease-in-out infinite; }
.enc-cle svg { width: 19px; height: 19px; }
@keyframes cle-souffle { 0%, 100% { box-shadow: 0 0 0 1px rgba(225, 226, 242, .2); } 50% { box-shadow: 0 0 0 1px rgba(225, 226, 242, .55); } }
.enc-traits { position: relative; inset: auto; height: 34px; }
.enc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.enc-carte { display: flex; flex-direction: column; gap: 6px; padding: 12px 13px; border-radius: 10px; background: #161a23; box-shadow: 0 0 0 1px var(--ligne-forte); font-size: .84rem; }
.enc-carte b { color: var(--texte); font-size: .9rem; margin-bottom: 2px; }
.enc-carte span { display: flex; align-items: center; gap: 7px; color: var(--doux); line-height: 1.3; }
.enc-carte svg { flex: none; width: 14px; height: 14px; }
.enc-carte .oui svg { color: var(--up); }
.enc-carte .non svg { color: #ed3a7a; }
.oui svg { color: var(--texte); }
.non svg { color: var(--pale); }
.non { color: var(--pale) !important; }

/* ---- FAQ ---- */
.faq-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 40px; }
.faq-liste { border-top: 1px solid var(--ligne-forte); }
details { border-bottom: 1px solid var(--ligne-forte); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 16px 2px; cursor: pointer; list-style: none; font-size: 1.06rem; color: var(--texte); }
summary::-webkit-details-marker { display: none; }
summary svg { flex: none; width: 18px; height: 18px; color: var(--pale); transition: transform .3s var(--ease-sortie); }
details[open] summary svg { transform: rotate(180deg); }
details p { padding: 0 34px 20px 2px; color: var(--doux); font-size: .98rem; }

/* ---- L'appel final ---- */
.fin { position: relative; overflow: clip; text-align: center; padding: clamp(96px, 14vw, 168px) 0; }
.fin-texte { position: relative; z-index: 3; }
.tunnel-bande { top: 50%; --base-l: min(700px, 86vw); --base-h: calc(var(--base-l) * .42); --q: 1.2; --rayon: 16px; }
.fin::before { background: linear-gradient(180deg, var(--fond) 0%, rgba(15, 18, 25, .12) 24%, rgba(15, 18, 25, .12) 76%, var(--fond) 100%); }

/* ---- Le pied ---- */
.pied-page { border-top: 1px solid var(--ligne); padding: 26px 0 28px; color: var(--pale); font-size: .86rem; }
.pied-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.pied-page nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied-page a { transition: color .15s ease; }
.pied-page nav a:hover, .pied-l2 a:hover { color: var(--texte); }
.pied-page .marque { color: var(--texte); font-size: 1.05rem; }
.pied-page .marque img { height: 18px; }
.pied-l2 { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ligne); font-size: .8rem; }
.secured { margin-left: auto; }
.secured img { height: 16px; width: auto; padding: 4px 0; box-sizing: content-box; }
.secured-hero, .enc-boite .secured { margin-left: 0; }

/* ---- Le bouton de pause du mouvement ---- */
.pause-mvt { position: fixed; z-index: 70; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: var(--r-md); font-size: .78rem; color: var(--doux); background: rgba(22, 26, 35, .9); box-shadow: 0 0 0 1px var(--ligne-forte); transition: color .15s ease; }
.pause-mvt[hidden] { display: none; }
.pause-mvt:hover { color: #fff; }
.pm-ico { width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pause-mvt[aria-pressed="true"] .pm-ico { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.fige *, .fige *::before, .fige *::after { animation-play-state: paused !important; }

/* ---- 1024 ---- */
@media (max-width: 1100px) {
  .diapo-double { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .acc-corps p { font-size: .9rem; }
  .surcouche { width: 232px; left: 20px; bottom: 20px; padding: 12px 14px; }
  .sur-liste li { font-size: .82rem; }
}
/* ---- Tablette et telephone ---- */
@media (max-width: 860px) {
  .grille-vit { grid-template-columns: minmax(0, 1fr); }
  .deux-cartes { grid-template-columns: minmax(0, 1fr); }
  .faq-grille { grid-template-columns: minmax(0, 1fr); }
  .diapo-double { display: flex; flex-direction: column-reverse; }
  .clips { border-left: 0; border-bottom: 1px solid var(--ligne); width: 100%; }
  .surcouche { position: static; width: auto; margin-top: 10px; background: var(--panneau); }
  .onglets { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px; margin-left: -20px; margin-right: -20px; padding: 0 20px; scrollbar-width: none; }
  .onglets::-webkit-scrollbar { display: none; }
  .onglet { flex: 0 0 64%; scroll-snap-align: start; }
}
/* Sur telephone, pas de vue sur les voisines : une diapo, plein cadre, et les onglets pour changer. */
@media (max-width: 760px) {
  :root { --peek: 20px; }
  .js .diapo { opacity: 0; }
  .fleche { display: none; }
  .tunnel { --q: 1.26; }
  .tunnel-bas { top: 190px; --base-h: 340px; }
  .vit-scene { height: 262px; }
  .arbre { height: 300px; }
  .noeud { width: 54px; }
  .noeud small { font-size: .62rem; letter-spacing: -.01em; }
  .noeud img { padding: 6px; }
  .np img { width: 20px; height: 20px; }
  .np { top: 222px; }
  .pied-l1 { justify-content: center; }
  .pied-l1 .secured { margin-left: 0; }
  .pied-l2 { justify-content: center; }
  .pause-mvt { right: 10px; bottom: 10px; width: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .pm-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero::before { background: linear-gradient(180deg, var(--fond) 0%, var(--fond) 50%, rgba(15, 18, 25, .5) 62%, rgba(15, 18, 25, 0) 72%, rgba(15, 18, 25, 0) 88%, var(--fond) 100%); }
}
@media (max-width: 420px) {
  .rk small { font-size: .6rem; letter-spacing: -.02em; }
  .rk-chev svg { width: 9px; height: 9px; }
  .pnl-carte { transform: translate(-58%, -62%) rotate(-2deg); width: 84%; }
  .day-carte { width: 170px; }
  .enc-duo { gap: 8px; }
  .enc-carte { padding: 10px; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js [data-mots] .rv, .js [data-revele] { opacity: 1; transform: none; filter: none; }
  .tunnel i::before { transform: rotate(150deg); }
}

/* 05/11/2026, sa demande: « met juste logo + BNDL et avec une typo clean qui s'assemble bien avec le logo ». */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/outfit-500.woff2') format('woff2'); }
.mot { font-family: 'Outfit', 'Geist', sans-serif; font-weight: 500; letter-spacing: .08em; }