:root{
  --noir:#000; --encre:#fff; --gris:#8e8e9a;
  --lime:#A1FF00;                       /* échantillonné sur la maquette d'Alexis */
  --large:1100px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--noir);color:var(--encre);
     font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Inter,'Helvetica Neue',Arial,sans-serif;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}

/* ⚠️ TOUT LE CONTENU PASSE DEVANT LE GLOBE. `#ciel` est en `position:fixed` : en CSS, un élément
   positionné est peint APRÈS les blocs en flux normal, même s'il vient avant dans le code. Sans ce
   `z-index:1`, le globe recouvrait la dernière phrase et le pied de page — invisibles alors qu'ils
   étaient bien là, blancs et opaques (une demi-heure de recherche pour ça). */
.page,footer{position:relative;z-index:1}
.page{max-width:var(--large);margin:0 auto;padding:0 20px}
.centre{text-align:center}

/* ══ L'OUVERTURE : LE GLOBE EN FOND, LE LOGO DESSUS, LA VIDÉO QUI DÉPASSE ═══════════════════
   `#ciel` est FIXE derrière toute la page (z-index 0) : au scroll il remonte, s'élargit et
   s'assombrit pendant que le contenu passe par-dessus. Un bloc collant aurait demandé une section
   de deux écrans de haut pour le même effet.
   ⚠️ `#scene` fait 100vh MOINS 30 px : c'est ce qui laisse dépasser le haut de la vidéo en bas du
   premier écran. Ces 30 px qui bougent sont l'invitation à descendre — tout le reste en découle. */
#ciel{position:fixed;inset:0;z-index:0;background:#000;overflow:hidden;
  transform:translateY(calc(var(--haut,0px) + var(--monte,0px))) scale(var(--large,1));
  transform-origin:50% 38%}
#globe,#etincelles{position:absolute;inset:0}
#globe-fixe{position:absolute;inset:0;background:#000 center/cover no-repeat;
  background-image:url("assets/globe-fond.webp");transition:opacity .9s ease}
#globe,#etincelles{opacity:0;transition:opacity 1s ease}
#ciel.vivant #globe,#ciel.vivant #etincelles{opacity:1}
#ciel.vivant #globe-fixe{opacity:0}
@media (max-width:759px){
  /* Le globe doit rester ENTIER sur un écran étroit : on prend la version carrée. ⚠️ 132 % et pas
     `contain` : l'image doit faire la MÊME taille que le globe vivant qui la remplace, sinon la
     bascule se voit — la planète changerait de taille sous les yeux du visiteur. */
  #globe-fixe{background-image:url("assets/globe-fond-mobile.webp");background-size:132%;
    background-position:center 30%}
  /* LE GLOBE EN HAUT, ESTOMPÉ VERS LE BAS. En portrait, une planète centrée écrase le texte et le
     bouton ; posée en haut et fondue dans le noir, elle devient le décor du titre. Le décalage
     s'applique au bloc ENTIER (carte + étincelles + image), donc les trois restent alignés. */
  #ciel{--haut:-9vh}
  #voile{background:linear-gradient(to bottom,transparent 18%,rgba(0,0,0,.42) 46%,
    rgba(0,0,0,.88) 68%,#000 86%)}
}
#etincelles{pointer-events:none}
/* Le globe s'assombrit à mesure qu'on descend : il devient un fond, il cesse d'être le sujet. */
#assombri{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
/* Et un dégradé permanent en bas, pour que le texte reste lisible quelle que soit la portion de
   planète qui passe derrière lui. */
#voile{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 42%,rgba(0,0,0,.5) 74%,rgba(0,0,0,.92) 100%)}
/* La mention Mapbox + OpenStreetMap : OBLIGATOIRE (conditions d'utilisation du service), donc
   jamais masquée. Discrète, en bas à droite, hors du bloc qui bouge. */
#credit{position:absolute;right:10px;bottom:7px;z-index:4;font-size:9px;color:rgba(255,255,255,.3)}
#credit a{text-decoration:none;margin-left:6px}
#credit a:hover{color:rgba(255,255,255,.7)}

#scene{position:relative;z-index:1;height:calc(100vh - 30px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3.4vh,34px);
  padding:0 20px}
#logo{width:min(46vw,470px);height:auto;filter:drop-shadow(0 10px 40px rgba(0,0,0,.85));
  opacity:0;transform:translateY(16px)}
#pitch{width:min(92vw,620px);text-align:center;opacity:0;transform:translateY(16px)}
#pitch .service{font-size:clamp(15px,1.9vw,20px);color:#fff;font-weight:600;line-height:1.5;
  padding-bottom:clamp(18px,2.6vh,26px);text-shadow:0 2px 20px rgba(0,0,0,.9);text-wrap:balance}

/* ── L'ARRIVÉE : le logo et le texte, puis le globe, puis la vidéo ───────────────────────────
   Les trois se posent l'un après l'autre. Chacun monte de quelques pixels en apparaissant : c'est
   ce léger déplacement, et pas le fondu seul, qui donne l'impression que la page se construit. */
@keyframes monte{to{opacity:1;transform:none}}
#logo{animation:monte .8s cubic-bezier(.2,.8,.3,1) .15s forwards}
#pitch{animation:monte .8s cubic-bezier(.2,.8,.3,1) .35s forwards}

/* ── LE BOUTON JOUER ─────────────────────────────────────────────────────────────────────────
   Il arrive avec un RESSORT (le rebond qu'Alexis voulait, déplacé du logo vers lui : c'est le
   bouton qu'on doit regarder), et il est RÉTROÉCLAIRÉ DE L'INTÉRIEUR — une lueur blanc-lime
   tourne le long de son bord intérieur, comme un radar.
   ⚠️ L'anneau tournant est peint dans un pseudo-élément SOUS le texte, masqué à l'intérieur du
   bouton. On n'anime qu'une rotation : aucun recalcul de mise en page, donc ça tourne rond même
   sur un téléphone modeste. */
.cta-jouer{position:relative;overflow:hidden;isolation:isolate;
  animation:ressort .95s cubic-bezier(.16,1.4,.3,1) .85s both, respire 3.4s ease-in-out 1.9s infinite}
/* ⚠️ PLUS AMPLE ET PLUS TARD (01/10, « je ne vois pas trop l'animation bump »). À 0,62 s le rebond
   arrivait pendant que la page finissait de se poser : personne ne le voyait. Il part maintenant à
   0,85 s, part de plus bas (0,78) et dépasse plus haut (1,12) — et ensuite le bouton RESPIRE
   doucement, en boucle, pour rester vivant sans agiter l'écran. */
@keyframes ressort{
  0%{opacity:0;transform:scale(.78) translateY(10px)}
  40%{opacity:1;transform:scale(1.12) translateY(0)}
  62%{transform:scale(.962)}
  80%{transform:scale(1.028)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes respire{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}
.cta-jouer span{position:relative;z-index:2}
.cta-jouer::before{content:"";position:absolute;z-index:0;left:50%;top:50%;width:260%;padding-top:260%;
  margin:-130% 0 0 -130%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,0) 190deg,
    rgba(255,255,255,.85) 250deg,#fff 282deg,rgba(255,255,255,.75) 310deg,transparent 360deg);
  animation:radar 2.6s linear infinite}
@keyframes radar{to{transform:rotate(360deg)}}
/* Le cœur du bouton reste plein : l'anneau ne doit éclairer que le BORD intérieur. */
.cta-jouer::after{content:"";position:absolute;z-index:1;inset:3px;border-radius:999px;
  background:var(--lime)}

/* ── LA VIDÉO QUI DÉPASSE ────────────────────────────────────────────────────────────────────
   Elle arrive en dernier, une fois qu'elle a de quoi s'afficher — montrer un rectangle vide
   serait pire que de ne rien montrer. Fondu + glissement vers le haut, comme le reste. */
.jeu{position:relative;z-index:1;opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.3,1)}
.jeu.la{opacity:1;transform:none}

@media (max-width:759px){
  #logo{width:min(78vw,400px)}
  #pitch{width:92vw}
}
/* Quelqu'un qui a demandé « moins d'animations » le pense : tout est là, rien ne bouge. */
@media (prefers-reduced-motion:reduce){
  #logo,#pitch,.jeu{opacity:1;transform:none;animation:none;transition:none}
  .cta-jouer{animation:none}
  .cta-jouer::before{animation:none;opacity:.35}
}

/* ══ L'ARRIVÉE DES BLOCS AU SCROLL ═══════════════════════════════════════════════════════════
   Chaque bloc entre en scène quand on l'atteint : il monte de 34 px, se dévoile, et grandit très
   légèrement — un geste court et franc, « mode action » plutôt que fondu de diaporama. Les images
   ont un léger PARALLAXE (elles montent un peu plus vite que la page), ce qui creuse l'écran.
   ⚠️ `transform` et `opacity` seulement : ce sont les deux propriétés qu'un navigateur anime sans
   recalculer la page. Tout le reste fait saccader. */
.entre{opacity:0;transform:translateY(34px) scale(.985);
  transition:opacity .62s cubic-bezier(.2,.8,.3,1),transform .62s cubic-bezier(.16,1,.3,1)}
.entre.vu{opacity:1;transform:none}
/* Décalage en cascade quand deux blocs se suivent : le texte arrive juste après son image. */
.entre.tard{transition-delay:.13s}
.parallaxe{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .entre{opacity:1;transform:none;transition:none}
  .parallaxe{transform:none !important}
}

/* ── l'accroche ───────────────────────────────────────────────────────────── */
/* ⚠️ 24 px SOUS l'accroche (demande d'Alexis, 01/10) : collée à l'image suivante, elle paraissait
   lui appartenir. Et `text-wrap:balance` partout — c'est la vraie réponse aux « retours à la ligne
   pas terribles » : un saut forcé tombe juste à UNE largeur d'écran et faux à toutes les autres,
   alors que le navigateur, lui, équilibre les lignes à n'importe quelle taille. */
.accroche{font-size:clamp(24px,3.6vw,40px);font-weight:800;letter-spacing:-.025em;line-height:1.15;
          padding:clamp(30px,5.5vw,58px) 0 24px;text-wrap:balance}
.accroche b{color:var(--lime);font-weight:800}
/* La ligne grise sous l'accroche : elle dit ce QU'EST le jeu (et porte les mots que cherchent
   les moteurs de recherche), pendant que l'accroche, elle, ne fait qu'interpeller. */
.service{font-size:clamp(13px,1.5vw,16px);color:#9a9aa8;line-height:1.5;
         padding-bottom:clamp(10px,2vw,20px);text-wrap:balance}

/* ── le héros : les mains + le téléphone, le bouton POSÉ DESSUS ───────────────
   Le bouton était cuit dans l'image d'Alexis : on l'a gommé du PNG et on le repose ici, en HTML,
   EXACTEMENT à sa place (mesurée : centre à 50 % / 59,3 %). L'image reste ENTIÈRE — les bras
   continuent sous le bouton, comme sur la maquette.
   Sur un téléphone, le visuel prend toute la largeur : sinon l'écran de jeu tenu dans les mains
   devient illisible, et c'est pourtant tout ce que cette image doit montrer. */
.hero{position:relative;margin:0 -20px}
.hero img{width:100%;margin:0 auto}
.hero .cta{position:absolute;left:50%;top:59.3%;transform:translate(-50%,-50%);white-space:nowrap}
.hero .cta:hover{transform:translate(-50%,-50%) translateY(-2px) scale(1.02)}
.hero .cta:active{transform:translate(-50%,-50%) scale(.99)}
@media (min-width:760px){ .hero{margin:0} }
/* SUR MOBILE, ON CADRE SUR LE TÉLÉPHONE (Alexis 08/09 : « que les bords du tel soient à 24 pt des
   bords de l'écran pour qu'on voie bien l'image »). Le téléphone n'occupe que 45,9 % de la largeur
   du visuel — mesuré ligne à ligne sur l'image, cadre compris — donc pour qu'il tienne dans
   (100vw − 48px), l'image doit faire 1,51 fois cette valeur et déborder d'environ 95 pt de chaque
   côté. Les mains sont donc rognées sur les bords : c'est le prix du gros plan, et c'est l'écran de
   jeu qu'on vient voir. Le bouton, lui, reste centré sur l'ÉCRAN (il est posé sur .hero, qui garde
   la largeur de la page), pas sur l'image qui déborde. */
@media (max-width:759px){
  .hero{margin:0;overflow:hidden}
  .hero picture{display:block;width:calc((100vw - 48px) / .579);max-width:none;
                margin-left:50%;transform:translateX(-50%)}
  .hero picture img{width:100%}
}

/* ── les boutons ──────────────────────────────────────────────────────────── */
.cta{display:inline-block;background:var(--lime);color:#000;text-decoration:none;
     font-weight:800;font-size:clamp(15px,1.7vw,19px);letter-spacing:.06em;
     padding:clamp(15px,1.9vw,20px) clamp(42px,6vw,74px);border-radius:999px;
     box-shadow:0 0 46px rgba(161,255,0,.30);
     transition:transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s ease}
.cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 62px rgba(161,255,0,.45)}
.cta:active{transform:translateY(0) scale(.99)}
.bloc-cta{padding:clamp(4px,1.4vw,16px) 0 clamp(46px,7vw,86px)}

/* ── la vidéo de jeu ──────────────────────────────────────────────────────── */
.jeu{border-radius:clamp(14px,1.7vw,22px);overflow:hidden;width:100%;
     box-shadow:0 0 0 3px rgba(255,255,255,.92), 0 24px 70px rgba(0,0,0,.6);background:#000}
.jeu video{width:100%}
.legende{font-size:clamp(17px,2.4vw,26px);font-weight:600;line-height:1.3;letter-spacing:-.01em;
         padding:clamp(22px,3.4vw,38px) 0 clamp(40px,7vw,90px);text-wrap:balance;max-width:840px;margin:0 auto}
.legende b{color:var(--lime);font-weight:800}

/* ── les trois persos ─────────────────────────────────────────────────────── */
.equipe{position:relative;padding-top:clamp(10px,2vw,26px)}
.equipe img{width:min(100%,780px);margin:0 auto}
/* Les trois persos descendent vers leur phrase (01/10, « ils sont trop hauts, ils devraient être
   plus bas vers le texte du bas ») : ils forment un bloc avec elle au lieu de flotter au-dessus. */
.equipe{margin-top:clamp(28px,5vw,64px)}
.equipe .legende{position:relative;margin-top:clamp(-30px,-3vw,-10px);padding-bottom:clamp(20px,3vw,30px)}

/* ── pied de page ─────────────────────────────────────────────────────────── */
footer{border-top:1px solid rgba(255,255,255,.10);margin-top:clamp(30px,6vw,70px);
       padding:34px 20px calc(34px + env(safe-area-inset-bottom));text-align:center;color:#b6b6c4;font-size:15px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
footer nav a{text-decoration:none;line-height:2;font-weight:600;padding:2px 0;
             border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease}
footer nav a:hover{color:var(--lime);border-bottom-color:var(--lime)}
.langues{margin-top:20px;font-size:13.5px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px}
.langues a{text-decoration:none;line-height:2;opacity:.8;transition:opacity .15s ease,color .15s ease}
.langues a:hover{opacity:1;color:var(--lime)}
.langues a[aria-current]{color:var(--lime);opacity:1;font-weight:700}
.copy{margin-top:20px;font-size:12.5px;color:#6a6a78}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}