/* ============================================================
   MATRIX CODE GAME · feuille de style
   ------------------------------------------------------------
   Interface façon terminal holographique : vert néon sur noir,
   cadres à coins coupés, tunnel de code en fond.
   Les noms de classes sont restés les mêmes que l'ancien design,
   pour que toutes les pages continuent de fonctionner.
   Toutes les animations se coupent si le visiteur a activé
   « réduire les animations » dans son système.
   ============================================================ */

:root{
  --bg:#020604;
  --bg-2:#04120c;
  --card:#04140ce6;
  --card-solid:#04120c;
  --line:#00ff8524;
  --line-strong:#00ff8547;
  --txt:#d6ffe9;
  --txt-dim:#7fb99b;
  --txt-faint:#4d7a65;
  --acc:#00ff85;
  --acc-2:#00e5ff;
  --green:#00ff85;
  --cyan:#00e5ff;
  --gold:#ffc247;
  --radius:0px;
  --radius-sm:0px;
  --max:1180px;
  --glow:0 0 26px #00ff8547;
  --coupe:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}
::selection{background:var(--acc);color:#02120a}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px;position:relative;z-index:2}

/* Coins coupés : le motif de tout le design */
.coupe,.panel,.app-card,.btn,.donate,.app-icon,.fleche,.filtre,.onglets button{
  --c:var(--coupe);
}

/* ============================================================
   1. FONDS ANIMÉS
   ============================================================ */
#matrix,#vortex{position:fixed;inset:0;z-index:0;pointer-events:none}
#matrix{opacity:.30}
#vortex{opacity:0;transition:opacity 1.2s ease}
#vortex.on{opacity:.9}

/* Voile sombre + halos d'ambiance.
   PERFORMANCE : les halos étaient trois grands cercles FLOUS
   (blur 100px) et ANIMÉS en scale. À chaque image, le navigateur
   devait recalculer un flou géant : c'était la première cause des
   saccades. Ils sont maintenant peints une seule fois, directement
   dans le dégradé. Même rendu à l'œil, coût quasi nul. */
.aura{
  position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(46vw 46vw at 6% -4%,#00ff8526 0%,#00ff8500 62%),
    radial-gradient(38vw 38vw at 96% 16%,#00e5ff1f 0%,#00e5ff00 62%),
    radial-gradient(42vw 42vw at 46% 108%,#00ff851c 0%,#00ff8500 62%),
    radial-gradient(120% 80% at 50% 38%,#02060400 0%,#020604cc 68%,#020604 100%);
}
.aura span{display:none}   /* anciens halos animés : supprimés */

/* Grille en perspective sous le héros.
   PERFORMANCE : on anime « transform », calculé par la carte
   graphique, au lieu de « background-position » qui forçait à
   redessiner toute la grille à chaque image. */
.grille{
  position:absolute;left:0;right:0;bottom:0;height:44vh;z-index:0;pointer-events:none;
  overflow:hidden;perspective:320px;
  mask-image:linear-gradient(to top,#000 0%,#0000 94%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#0000 94%);
}
.grille::before{
  content:'';position:absolute;left:-50%;right:-50%;top:-66px;height:calc(200% + 66px);
  background-image:
    linear-gradient(#00ff8547 1px,transparent 1px),
    linear-gradient(90deg,#00ff852e 1px,transparent 1px);
  background-size:66px 66px;
  transform-origin:top center;
  animation:defile 3.4s linear infinite;
  will-change:transform;
}
@keyframes defile{
  from{transform:rotateX(67deg) translate3d(0,0,0)}
  to{transform:rotateX(67deg) translate3d(0,66px,0)}
}

/* Lignes de balayage */
body::after{
  content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.3;
  background:repeating-linear-gradient(180deg,#0000 0 2px,#00000052 2px 4px);
}

#progres{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--acc),var(--acc-2));
  box-shadow:0 0 14px var(--acc);transition:width .1s linear;
}
#curseur{
  position:fixed;width:440px;height:440px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle,#00ff8514,transparent 68%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .4s;
}

/* Réticule de visée : un anneau qui suit la souris et s'ouvre
   au-dessus de tout ce qui est cliquable. */
#reticule{
  position:fixed;top:0;left:0;z-index:9990;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;
  transition:opacity .3s ease,width .22s ease,height .22s ease,margin .22s ease;
}
#reticule::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--acc);opacity:.75;
  transition:border-color .2s ease,opacity .2s ease,transform .22s ease;
}
#reticule::after{
  content:'';position:absolute;left:50%;top:50%;width:3px;height:3px;
  margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 8px var(--acc);transition:opacity .2s ease;
}
#reticule.vif{opacity:1}
/* Au-dessus d'un élément cliquable : l'anneau s'ouvre en réticule */
#reticule.vise{width:46px;height:46px;margin:-23px 0 0 -23px}
#reticule.vise::before{
  border-width:2px;opacity:1;box-shadow:0 0 18px #00ff8566;
  /* quatre encoches, comme une lunette de visée */
  mask:conic-gradient(#000 0 18deg,transparent 18deg 72deg,#000 72deg 108deg,
       transparent 108deg 162deg,#000 162deg 198deg,transparent 198deg 252deg,
       #000 252deg 288deg,transparent 288deg 342deg,#000 342deg 360deg);
  -webkit-mask:conic-gradient(#000 0 18deg,transparent 18deg 72deg,#000 72deg 108deg,
       transparent 108deg 162deg,#000 162deg 198deg,transparent 198deg 252deg,
       #000 252deg 288deg,transparent 288deg 342deg,#000 342deg 360deg);
}
#reticule.vise::after{opacity:0}
@media(hover:none){#reticule{display:none}}

/* ============================================================
   1 bis. ÉCRAN D'ENTRÉE ET SAUT EN HYPERESPACE
   ============================================================ */

/* Tant que l'écran d'entrée est là, la page ne défile pas. */
body.verrou{overflow:hidden}
.rail,header.nav{transition:opacity .6s ease}
body.verrou .rail,
body.verrou header.nav{opacity:0;pointer-events:none}

/* L'écran d'entrée est masqué PAR DÉFAUT. Il n'apparaît que si le
   petit script placé dans le <head> a décidé qu'il devait l'être.
   C'est ce qui évite de le voir clignoter une seconde au retour sur
   le site : avant, il s'affichait le temps que le code le retire. */
#portail{display:none}
.portail-actif{overflow:hidden}
.portail-actif #portail{
  position:fixed;inset:0;z-index:200;overflow:hidden;
  display:grid;place-items:center;text-align:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 46%,#02100a 0%,#020604 62%,#000 100%);
  transition:opacity .55s ease;
}

/* Arrivée depuis une autre page : l'écran est couvert avant même le
   premier affichage, le temps que la pluie de code prenne le relais. */
html.arrivee::before{
  content:'';position:fixed;inset:0;z-index:400;background:#020604;
}

/* La pluie de code des transitions entre pages */
#rideau{
  position:fixed;inset:0;z-index:401;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
}
#rideau.on{opacity:1}

/* La vidéo d'entrée, en fond de l'écran d'accueil.
   Une vidéo est décodée par le processeur graphique : elle coûte
   bien moins cher que le tunnel dessiné image par image. */
/* L'image fixe est TOUJOURS affichée en dessous. La vidéo reste
   invisible par-dessus tant qu'on n'a pas appuyé : c'est ce qui
   permet de la préchauffer sans qu'on voie les premières images
   défiler à l'ouverture de la page. Comme la première image de la
   vidéo est exactement cette photo, l'échange ne se voit pas. */
.portail-fond{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;pointer-events:none;opacity:.85;
}
.portail-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .18s ease;
}
.portail-video.visible{opacity:.85}
#portail .contenu{position:relative;z-index:1}
/* Léger voile pour que le titre reste lisible par-dessus la vidéo */
#portail::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 46%,#020604cc 0%,#02060466 45%,#02060400 75%);
}
#portail .contenu{
  display:flex;flex-direction:column;align-items:center;
  transform-origin:50% 46%;
  animation:portailEntre 1s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes portailEntre{
  from{opacity:0;transform:scale(.94) translateY(14px)}
  to{opacity:1;transform:none}
}
.portail-logo{
  width:74px;height:74px;object-fit:cover;margin-bottom:22px;
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
  animation:respire 4s ease-in-out infinite;
}
#portail h1{
  /* le sous-titre a été retiré : le titre porte lui-même l'écart
     qui le sépare du bouton */
  margin:0 0 44px;color:var(--acc);line-height:1.04;
  font-size:clamp(1.9rem,7.6vw,4.6rem);
  text-shadow:0 0 16px #00ff8599,0 0 54px #00ff854d;
}
#portail .demarrer{border-width:2px;padding:24px 62px}
/* (l'ancien texte d'aide sous le bouton a été retiré, ainsi que
    son animation de clignotement) */

/* Le saut : le contenu est aspiré vers l'avant puis s'efface.
   PERFORMANCE : l'ancienne version animait AUSSI un flou de 0 à 14
   pixels. Un flou se recalcule entièrement à chaque image, et ici
   sur un élément qui grossit en même temps : c'était la cause des
   saccades du saut. Seuls « transform » et « opacity » restent,
   et ceux-là sont gérés directement par la carte graphique. */
/* Le titre et le bouton s'effacent vite pour laisser la place à la
   vidéo. Volontairement court et discret : une grosse animation ici
   entrerait en concurrence avec le démarrage de la vidéo, et c'est
   exactement ce qui donnait cette impression d'à-coup au clic. */
#portail.saut .contenu{
  animation:aspire .55s cubic-bezier(.5,0,.9,1) forwards;
  will-change:transform,opacity;
}
@keyframes aspire{
  0%{transform:scale(1);opacity:1}
  100%{transform:scale(1.35);opacity:0}
}

/* Pendant le saut, on met en pause tout le reste du décor pour
   laisser la machine se concentrer sur l'animation. */
body.saut-en-cours .grille::before,
body.saut-en-cours .demarrer::after,
body.saut-en-cours .logo-mark{animation:none}
body.saut-en-cours::after{display:none}   /* lignes de balayage */
#portail.saut{background:radial-gradient(120% 90% at 50% 46%,#031a10 0%,#020604 70%,#000 100%)}
#portail.parti{opacity:0;pointer-events:none}

/* Éclair vert au moment du passage.
   Il part du centre et se dilate jusqu'à recouvrir tout l'écran. */
#flash{
  position:fixed;inset:-25%;z-index:210;pointer-events:none;opacity:0;
  transform-origin:50% 46%;
  background:
    radial-gradient(circle at 50% 46%,
      #ffffff 0%,#e6fff2 14%,#7dffc0 34%,#00ff85 58%,#00c86a 78%,#00ff8500 100%);
}
#flash.on{animation:eclair .72s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes eclair{
  0%{opacity:0;transform:scale(.45)}
  16%{opacity:1;transform:scale(1.05)}
  55%{opacity:.85;transform:scale(1.35)}
  100%{opacity:0;transform:scale(1.9)}
}

/* Le site apparaît en douceur derrière */
main,footer{transition:opacity .6s ease}
body.verrou main,body.verrou footer{opacity:0}

/* ============================================================
   2. TYPOGRAPHIE
   ============================================================ */
h1,h2,h3{line-height:1.12;margin:0 0 .5em;letter-spacing:0}
h1{font-family:'Orbitron','Outfit',sans-serif;font-weight:800;font-size:clamp(2rem,6.4vw,4.2rem);letter-spacing:.03em}
h2{font-family:'Orbitron','Outfit',sans-serif;font-weight:800;font-size:clamp(1.45rem,3.5vw,2.2rem);letter-spacing:.03em;text-transform:uppercase}
h3{font-size:1.1rem;font-weight:700}
p{margin:0 0 1em}
.lead{font-size:1.04rem;color:var(--txt-dim);max-width:60ch}
.mono{font-family:'Share Tech Mono','Courier New',monospace;letter-spacing:.1em}

/* Texte néon (remplace l'ancien dégradé) */
.neon{
  color:var(--acc);
  text-shadow:0 0 12px #00ff857a,0 0 40px #00ff853d;
}

/* Glitch */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-txt);position:absolute;inset:0;pointer-events:none;
  clip-path:inset(0 0 100% 0);
}
.glitch::before{color:var(--acc-2);transform:translate(-3px,0);animation:gl1 5s infinite steps(1)}
.glitch::after{color:#ff2e63;transform:translate(3px,0);animation:gl2 5s infinite steps(1)}
@keyframes gl1{0%,90%,100%{clip-path:inset(0 0 100% 0)}92%{clip-path:inset(14% 0 60% 0)}95%{clip-path:inset(52% 0 28% 0)}97%{clip-path:inset(74% 0 10% 0)}}
@keyframes gl2{0%,91%,100%{clip-path:inset(0 0 100% 0)}93%{clip-path:inset(60% 0 24% 0)}96%{clip-path:inset(22% 0 64% 0)}98%{clip-path:inset(82% 0 4% 0)}}

/* Étiquette de section */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Share Tech Mono',monospace;font-size:.72rem;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--acc);border:1px solid var(--line-strong);
  padding:7px 16px;background:#00ff850f;margin-bottom:20px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:var(--acc);
  animation:battement 1.8s ease-in-out infinite;
}
@keyframes battement{
  0%,100%{box-shadow:0 0 0 0 #00ff85cc;opacity:1}
  70%{box-shadow:0 0 0 8px #00ff8500;opacity:.65}
}

/* ============================================================
   3. BARRE DU HAUT
   ============================================================ */
/* PERFORMANCE : plus de backdrop-filter ici. Le flou d'arrière-plan
   devait être recalculé à CHAQUE image, puisque le fond animé défile
   derrière. Un fond presque opaque donne le même résultat pour rien. */
header.nav{
  position:sticky;top:0;z-index:50;
  background:#020604f2;
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:18px;height:66px}
.logo{
  display:flex;align-items:center;gap:12px;
  font-family:'Orbitron',sans-serif;font-weight:800;font-size:.98rem;letter-spacing:.06em;
}
/* PERFORMANCE : l'ancienne animation faisait varier un drop-shadow,
   ce qui oblige à redessiner l'image à chaque image. On anime
   l'opacité, qui elle ne coûte rien. */
.logo-mark{
  width:40px;height:40px;object-fit:cover;flex:0 0 auto;border:0;
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
  filter:drop-shadow(0 0 9px #00ff8566);
  animation:respire 4s ease-in-out infinite;
}
@keyframes respire{0%,100%{opacity:.82}50%{opacity:1}}
.nav-links{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav-links a{
  position:relative;padding:9px 14px;font-family:'Share Tech Mono',monospace;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-dim);transition:color .22s;
}
.nav-links a::after{
  content:'';position:absolute;left:14px;right:14px;bottom:4px;height:1px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .28s;
  box-shadow:0 0 8px var(--acc);
}
.nav-links a:hover{color:var(--acc)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.cta{
  background:var(--acc);color:#02120a;font-weight:700;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.nav-links a.cta::after{display:none}
.nav-links a.cta:hover{background:#5cffb0;color:#02120a;box-shadow:var(--glow)}

/* Sélecteur de langue */
.lang-switch{display:flex;gap:0;margin:0 6px;border:1px solid var(--line-strong)}
.lang-switch button{
  padding:6px 11px;border:0;background:transparent;cursor:pointer;
  font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.1em;
  color:var(--txt-faint);transition:.2s;
}
.lang-switch button:hover{color:var(--txt)}
.lang-switch button.on{background:var(--acc);color:#02120a}

@media(max-width:860px){
  .nav-links a:not(.cta){display:none}
  .nav-in{height:60px}
  .lang-switch{display:flex}
}

/* ============================================================
   4. BARRE LATÉRALE (nouvelle)
   ============================================================ */
/* Les entrées sont posées le long d'un demi-cercle ouvert vers la
   droite : celles du milieu avancent plus que celles des extrémités.
   Au survol, l'entrée pointée grossit et sort vers la droite, et ses
   voisines suivent un peu : c'est le décalage calculé dans anim.js. */
/* Les entrées sont VRAIMENT posées sur un cercle : elles partent
   toutes du même point, chacune tournée de son propre angle puis
   poussée vers l'extérieur du même rayon. L'écart entre deux entrées
   voisines est donc rigoureusement identique, ce que l'ancien
   empilement vertical ne garantissait pas. */
.rail{
  position:fixed;left:-84px;top:50%;z-index:45;
  width:0;height:0;
  --r:118px;              /* rayon du cercle */
}
.rail a{
  position:absolute;left:0;top:0;
  display:block;padding:3px 9px;
  font-family:'Share Tech Mono',monospace;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--txt-faint);
  white-space:nowrap;
  transform-origin:0 0;
  transform:rotate(var(--ang,0deg))
            translateX(calc(var(--r) + var(--sortie,0px)))
            translateY(-50%)
            scale(var(--zoom,1));
  transition:color .2s ease,text-shadow .2s ease,
             transform .22s cubic-bezier(.25,.9,.3,1.15);
}
.rail a:hover,
.rail a[data-proche]{color:var(--txt)}
/* L'entrée sous la souris passe devant ses voisines et s'allume */
.rail a.survol{
  color:var(--acc);z-index:3;
  text-shadow:0 0 14px #00ff85b3,0 0 36px #00ff8566;
}
.rail a[data-proche]{z-index:2}
.rail a.actif{color:var(--acc)}
.rail a.actif::before{
  content:'';position:absolute;left:1px;top:50%;
  width:5px;height:5px;margin-top:-2.5px;background:var(--acc);
  box-shadow:0 0 10px var(--acc);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
@media(max-width:1180px){.rail{display:none}}

/* Quand la barre est visible mais que la fenêtre n'est pas assez
   large, le contenu viendrait se glisser dessous. On le décale
   plutôt que de masquer la barre. Au-delà de 1500 px, le centrage
   naturel laisse déjà la place. */
@media(min-width:1181px) and (max-width:1500px){
  main .wrap,footer .wrap{padding-left:140px}
  .carrousel,.scene{margin-left:70px}
}

/* ============================================================
   5. BOUTONS
   ============================================================ */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border:1px solid var(--acc);background:#00ff850f;
  color:var(--acc);font-weight:700;font-size:.92rem;line-height:1.2;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  transition:background .2s,color .2s,box-shadow .25s,transform .15s;
}
.btn::before{
  content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,#ffffff00,#00ff8547,#ffffff00);
  transform:skewX(-20deg);transition:left .6s ease;
}
.btn:hover::before{left:130%}
.btn:hover{background:var(--acc);color:#02120a;box-shadow:0 0 28px #00ff8566}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--acc);color:#02120a}
.btn-primary:hover{background:#5cffb0;color:#02120a;box-shadow:0 0 34px #00ff8580}
.btn-ghost{background:#00ff8508;border-color:var(--line-strong);color:var(--txt)}
.btn-ghost:hover{background:#00ff851f;border-color:var(--acc);color:var(--acc);box-shadow:0 0 22px #00ff853d}
.btn-gold{border-color:var(--gold);color:var(--gold);background:#ffc2470f}
.btn-gold:hover{background:var(--gold);color:#1a1200;box-shadow:0 0 28px #ffc24766}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn[disabled]:hover{background:#00ff850f;color:var(--acc);box-shadow:none}

.onde{
  position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);
  background:#00ff8547;pointer-events:none;animation:onde .6s ease-out forwards;
}
@keyframes onde{to{transform:translate(-50%,-50%) scale(20);opacity:0}}

/* ============================================================
   6. HÉROS
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  min-height:84vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:80px 0 64px;
}
.hero .wrap{display:flex;flex-direction:column;align-items:center}
.hero h1{
  margin:0 0 24px;line-height:1.04;color:var(--acc);
  text-shadow:0 0 14px #00ff8580,0 0 46px #00ff8547;
}
.hero .lead{margin:0 auto 34px}

/* Sous-titre espacé sous le grand titre */
.sous-titre{
  font-family:'Share Tech Mono',monospace;
  font-size:clamp(.68rem,1.8vw,.9rem);color:var(--txt-dim);
  text-transform:uppercase;letter-spacing:.42em;
  margin:0 0 34px;padding-left:.42em;
}

/* Le gros bouton DÉMARRER */
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center}
.demarrer{
  position:relative;overflow:hidden;
  display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  padding:20px 56px;cursor:pointer;border:2px solid var(--acc);color:var(--acc);
  background:linear-gradient(180deg,#00ff852e,#00ff8514);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  box-shadow:0 0 36px #00ff8547,inset 0 0 32px #00ff851f;
  transition:box-shadow .3s,transform .2s,background .3s;
}
.demarrer b{
  font-family:'Orbitron',sans-serif;font-size:clamp(1.15rem,3.2vw,1.75rem);
  font-weight:800;letter-spacing:.16em;text-shadow:0 0 18px #00ff8599;
}
.demarrer small{
  font-family:'Share Tech Mono',monospace;font-size:.66rem;
  letter-spacing:.24em;color:#8affc9;text-transform:uppercase;
}
/* PERFORMANCE : on déplace la ligne de scan avec « transform »
   plutôt qu'avec « top », qui forçait un recalcul de mise en page. */
.demarrer::after{
  content:'';position:absolute;left:0;right:0;top:0;height:40%;
  background:linear-gradient(180deg,#00ff8500,#00ff853d,#00ff8500);
  animation:scan 3.4s linear infinite;will-change:transform;
}
@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(300%)}}
.demarrer:hover{
  background:linear-gradient(180deg,#00ff854d,#00ff8524);
  box-shadow:0 0 62px #00ff8573,inset 0 0 42px #00ff852e;
  transform:translateY(-3px);
}
.demarrer:active{transform:translateY(0)}
.socle{
  width:min(430px,82vw);height:26px;margin:-8px auto 0;
  background:radial-gradient(ellipse at center,#00ff8547,#00ff8500 70%);
  filter:blur(7px);
}

/* Compteurs */
.stats{
  display:flex;gap:0;justify-content:center;flex-wrap:wrap;
  margin-top:52px;border-top:1px solid var(--line);
}
.stat{padding:22px 34px;text-align:center;position:relative}
.stat + .stat::before{
  content:'';position:absolute;left:0;top:24px;bottom:24px;width:1px;background:var(--line);
}
.stat b{
  display:block;font-family:'Orbitron',sans-serif;font-size:1.85rem;font-weight:800;
  color:var(--acc);line-height:1.2;text-shadow:0 0 20px #00ff8566;
  font-variant-numeric:tabular-nums;
}
.stat span{
  font-family:'Share Tech Mono',monospace;font-size:.68rem;
  color:var(--txt-faint);letter-spacing:.18em;text-transform:uppercase;
}

/* Indicateur « défiler » */
.defiler{
  margin-top:44px;font-family:'Share Tech Mono',monospace;font-size:.66rem;
  letter-spacing:.24em;color:var(--txt-faint);text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
.defiler i{
  width:1px;height:32px;background:linear-gradient(180deg,var(--acc),#00ff8500);
  animation:pulseligne 2.2s ease-in-out infinite;
}
@keyframes pulseligne{0%,100%{opacity:.25;height:20px}50%{opacity:1;height:38px}}

/* ============================================================
   7. SECTIONS
   ============================================================ */
section{padding:84px 0;position:relative;z-index:2;scroll-margin-top:74px}
.sec-head{margin-bottom:34px}
.sec-head p{color:var(--txt-dim);margin:0;max-width:62ch}
.sec-head h2::before{
  content:'';display:block;width:34px;height:2px;background:var(--acc);
  box-shadow:0 0 10px var(--acc);margin-bottom:16px;
}

/* Révélation au défilement */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.vu{opacity:1 !important;transform:none}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}

/* ============================================================
   8. PRISME D'APPLICATIONS
   Chaque carte est posée sur une face verticale d'un prisme.
   En le faisant tourner, la face suivante vient devant et celle
   de devant part sur le côté.
   ============================================================ */
.scene{
  position:relative;
  --carte-l:430px;          /* largeur d'une face */
  --carte-h:490px;          /* hauteur d'une face */
  --rayon:380px;            /* distance des faces à l'axe (calculée en JS) */
  height:calc(var(--carte-h) + 90px);
  perspective:1500px;
  perspective-origin:50% 45%;
  margin-top:6px;
  cursor:grab;
  /* Sur écran tactile : le doigt vertical fait défiler la page,
     le doigt horizontal fait tourner le prisme. Sans cette ligne,
     le navigateur avalait le geste et la rotation ne partait jamais. */
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
.scene.tire{cursor:grabbing}

.prisme{
  position:relative;margin:0 auto;
  width:var(--carte-l);height:var(--carte-h);
  transform-style:preserve-3d;
  transform:translateZ(calc(-1 * var(--rayon))) rotateY(var(--rot,0deg));
  transition:transform .85s cubic-bezier(.22,.85,.25,1);
}
.prisme.glisse{transition:none}     /* pendant qu'on fait tourner à la main */

/* Le cercle au sol, qui rappelle l'axe de rotation */
.socle-rond{
  position:absolute;left:50%;bottom:14px;width:min(560px,86vw);height:min(560px,86vw);
  transform:translateX(-50%) rotateX(76deg) scaleY(.5);
  border:1px solid var(--line-strong);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#00ff850f 0%,#00ff8500 62%);
}
.socle-rond::before{
  content:'';position:absolute;inset:8%;border-radius:50%;
  border:1px dashed var(--line);
  animation:tourneAnneau 30s linear infinite;
}
@keyframes tourneAnneau{to{transform:rotate(360deg)}}

/* Les faces */
.app-card{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;flex-direction:column;padding:24px;
  background:linear-gradient(155deg,#071d13f7,#030f0af7);
  border:1px solid var(--line-strong);
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
  /* Les deux dernières rotations sont l'inclinaison au survol,
     pilotée par la souris. Elles s'ajoutent à la position de la
     face sur le prisme sans la perturber. */
  transform:rotateY(var(--a,0deg)) translateZ(var(--rayon))
            rotateX(var(--pencheX,0deg)) rotateY(var(--pencheY,0deg))
            translateZ(var(--leve,0px));
  transition:opacity .5s ease,box-shadow .5s ease,border-color .4s ease,transform .25s ease;
  opacity:.28;cursor:pointer;
  -webkit-user-drag:none;   /* pas de glisser-déposer natif sur les liens */
}
.app-card.penche{transition:opacity .5s ease,box-shadow .5s ease,border-color .4s ease}

/* Reflet néon qui suit la souris sur la carte de devant.
   PERFORMANCE : c'est un disque de taille fixe qu'on DÉPLACE avec
   « transform ». L'ancienne version redessinait un dégradé à chaque
   mouvement, ce qui coûtait trop cher pour être activé partout. */
.app-card .reflet{
  position:absolute;top:0;left:0;width:460px;height:460px;
  margin:-230px 0 0 -230px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#00ff852b 0%,#00ff8512 38%,transparent 66%);
  transform:translate(var(--rx,50%),var(--ry,50%));
  transition:opacity .3s ease;
  will-change:transform;
}
.app-card.centre:hover .reflet{opacity:1}
.app-card img{-webkit-user-drag:none;pointer-events:none}
.app-card.centre{
  opacity:1;border-color:var(--acc);
  box-shadow:0 34px 80px -34px #000,0 0 70px -22px #00ff8547;
}
.app-card::before{
  content:'';position:absolute;top:10px;right:10px;width:18px;height:18px;
  border:2px solid var(--acc);border-left:0;border-bottom:0;opacity:.8;pointer-events:none;
}
.app-card::after{
  content:'';position:absolute;bottom:10px;left:10px;width:18px;height:18px;
  border:2px solid var(--acc);border-right:0;border-top:0;opacity:.8;pointer-events:none;
}

@media(max-width:860px){
  .scene{--carte-l:330px;--carte-h:470px}
}
@media(max-width:520px){
  .scene{--carte-l:min(280px,84vw);--carte-h:440px}
  .socle-rond{bottom:8px}
}

.app-top{display:flex;gap:16px;align-items:center}
.app-head{min-width:0}
.app-icon{
  width:74px;height:74px;flex:0 0 auto;object-fit:cover;
  border:1px solid var(--line-strong);background:#04120c;
  clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);
  transition:filter .3s,opacity .3s,transform .3s;
}
.app-card.centre .app-icon{filter:drop-shadow(0 0 14px #00ff8547)}
.app-name{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:1.06rem;margin:0 0 5px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;letter-spacing:.02em;
}
.app-cat{
  font-family:'Share Tech Mono',monospace;font-size:.72rem;
  color:var(--txt-faint);letter-spacing:.1em;text-transform:uppercase;
}
.app-desc{font-size:.93rem;color:var(--txt-dim);margin:16px 0 18px;flex:1}

/* Écran holographique dans la carte */
.hublot{
  position:relative;height:140px;margin:16px 0 0;overflow:hidden;
  background:
    linear-gradient(180deg,#00ff8514,#00e5ff0a),
    repeating-linear-gradient(90deg,#00ff850f 0 1px,transparent 1px 26px),
    repeating-linear-gradient(180deg,#00ff850f 0 1px,transparent 1px 26px);
  border:1px solid var(--line);
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
  display:grid;place-items:center;
}
/* PERFORMANCE : ces deux animations ne tournent QUE sur la carte
   au centre du carrousel. Avant, chaque carte du catalogue animait
   la sienne en permanence, même hors de l'écran. */
.hublot img{
  width:82px;height:82px;object-fit:cover;opacity:.94;
  filter:drop-shadow(0 0 22px #00ff8573);
}
.app-card.centre .hublot img{animation:flotte 5s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
.hublot::after{
  content:'';position:absolute;left:0;top:0;width:45%;height:100%;opacity:0;
  background:linear-gradient(100deg,#00ff8500,#00ff8524,#00ff8500);
}
.app-card.centre .hublot::after{opacity:1;animation:balaye 5s ease-in-out infinite}
@keyframes balaye{
  0%{transform:translateX(-140%)}
  60%,100%{transform:translateX(290%)}
}

.app-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;flex-wrap:wrap}
.platforms{display:flex;gap:6px;flex-wrap:wrap;min-width:0;flex:1 1 auto}
.app-foot .btn{flex:0 0 auto}
.chip{
  font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:.08em;
  padding:4px 10px;background:#00ff850f;border:1px solid var(--line);
  color:var(--txt-dim);white-space:nowrap;
}
.chip.new{border-color:var(--line-strong);color:var(--acc);background:#00ff851f}
.chip.soon{border-color:#ffc24759;color:var(--gold);background:#ffc2471f}

/* Application pas encore sortie */
.app-card.soon .app-icon,.app-card.soon .hublot img{filter:grayscale(1);opacity:.5}
.app-card.soon .app-name{color:var(--txt-dim)}
.app-card.soon.centre{border-color:var(--gold);box-shadow:0 30px 70px -30px #000,0 0 60px -22px #ffc24747}
.app-card.soon::before,.app-card.soon::after{border-color:var(--gold)}

/* Flèches de rotation, posées de part et d'autre de l'anneau */
.fleche{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:44px;height:44px;display:grid;place-items:center;
  background:#04140ce6;border:1px solid var(--line-strong);color:var(--acc);
  font-size:1.05rem;cursor:pointer;transition:.22s;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
}
.fleche:hover{background:var(--acc);color:#02120a;box-shadow:0 0 24px #00ff8566}
.fleche.g{left:14px}
.fleche.d{right:14px}
.fleche[disabled]{opacity:.2;cursor:default}
.fleche[disabled]:hover{background:#04140ce6;color:var(--acc);box-shadow:none}
@media(max-width:520px){
  .fleche{width:38px;height:38px}
  .fleche.g{left:2px}
  .fleche.d{right:2px}
}

/* Points de position */
.points{display:flex;gap:9px;justify-content:center;margin-top:4px}
.points button{
  width:26px;height:3px;border:0;padding:0;cursor:pointer;background:var(--line-strong);
  transition:.25s;
}
.points button.on{background:var(--acc);box-shadow:0 0 10px var(--acc);width:44px}

/* Bande de filtres */
.filtres{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-top:32px;padding-top:28px;border-top:1px solid var(--line);
}
.filtre{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:13px 22px;min-width:118px;cursor:pointer;
  background:#04140c99;border:1px solid var(--line);color:var(--txt-dim);
  font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;transition:.25s;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
}
.filtre span{font-size:1.45rem;line-height:1}
.filtre:hover{border-color:var(--line-strong);color:var(--txt)}
.filtre.on{border-color:var(--acc);color:var(--acc);background:#00ff8514;box-shadow:0 0 22px -6px #00ff8566}

/* ============================================================
   9. ÉTOILES ET AVIS
   ============================================================ */
.stars{display:inline-flex;gap:2px;font-size:.94rem;line-height:1}
.stars i{font-style:normal;color:#ffffff26}
.stars i.on{color:var(--gold);text-shadow:0 0 10px #ffc24773}
.rating-line{display:flex;align-items:center;gap:8px;font-size:.83rem;color:var(--txt-dim);margin-top:6px}
.rating-line.soon-line{
  font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.12em;
  color:var(--gold);text-transform:uppercase;
}
.rating-big{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rating-big .score{font-family:'Orbitron',sans-serif;font-size:2.4rem;font-weight:800;line-height:1;color:var(--acc)}

.reviews{display:grid;gap:14px;margin-top:18px}
.review{
  background:#00ff8508;border:1px solid var(--line);padding:16px 18px;
  transition:border-color .25s,transform .25s;
}
.review:hover{border-color:var(--line-strong);transform:translateX(4px)}
.review-top{display:flex;align-items:center;gap:11px;margin-bottom:7px;flex-wrap:wrap}
.avatar{
  width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--acc);color:#02120a;font-weight:800;font-size:.85rem;
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
}
.review-name{font-weight:600;font-size:.94rem}
.review-date{font-family:'Share Tech Mono',monospace;font-size:.72rem;color:var(--txt-faint);margin-left:auto}
.review p{margin:0;font-size:.93rem;color:var(--txt-dim)}
.empty-note{color:var(--txt-faint);font-size:.9rem;font-style:italic}

/* ============================================================
   10. PANNEAUX, FICHE, FORMULAIRES
   ============================================================ */
.panel{
  position:relative;padding:26px;
  background:linear-gradient(150deg,#06180fe6,#03100ae6);
  border:1px solid var(--line);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition:border-color .3s;
}
.panel:hover{border-color:var(--line-strong)}
.panel::before,.panel::after{
  content:'';position:absolute;width:15px;height:15px;pointer-events:none;
  border:2px solid var(--acc);opacity:.65;
}
.panel::before{top:8px;right:8px;border-left:0;border-bottom:0}
.panel::after{bottom:8px;left:8px;border-right:0;border-top:0}
.panel + .panel{margin-top:20px}
.panel h3{margin-top:0}
.sticky{position:sticky;top:92px}

.detail-cols{display:grid;grid-template-columns:1fr 350px;gap:34px;align-items:start}
@media(max-width:900px){.detail-cols{grid-template-columns:1fr}}

.back-link{
  display:inline-flex;align-items:center;gap:8px;margin:26px 0 14px;
  font-family:'Share Tech Mono',monospace;font-size:.75rem;letter-spacing:.14em;
  color:var(--txt-faint);text-transform:uppercase;transition:.2s;
}
.back-link:hover{color:var(--acc);gap:12px}
.detail-head{display:flex;gap:26px;align-items:center;flex-wrap:wrap;padding-bottom:30px}
.detail-head .app-icon{width:112px;height:112px}
.detail-meta h1{
  margin:0 0 8px;font-size:clamp(1.55rem,4.4vw,2.4rem);color:var(--acc);
  text-shadow:0 0 20px #00ff854d;
}
.page-soon .detail-head .app-icon{filter:grayscale(1);opacity:.55}

.shots{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.shots img{height:400px;border:1px solid var(--line-strong);scroll-snap-align:start;flex:0 0 auto}
.shots:empty{display:none}

/* Étapes numérotées */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:0 0 16px 46px;font-size:.94rem;color:var(--txt-dim)}
.steps li::before{
  content:'0' counter(s);position:absolute;left:0;top:0;
  font-family:'Share Tech Mono',monospace;font-size:.8rem;font-weight:700;
  color:var(--acc);border:1px solid var(--line-strong);background:#00ff850f;
  width:31px;height:26px;display:grid;place-items:center;transition:.25s;
}
.steps li:hover::before{background:var(--acc);color:#02120a;box-shadow:0 0 16px #00ff8566}
.steps li b{color:var(--txt)}
.steps li:last-child{padding-bottom:0}
/* Les étapes restent invisibles jusqu'à ce qu'on arrive dessus.
   La place est réservée, donc la mise en page ne bouge pas. */
.anim .steps li{visibility:hidden}
.anim .steps li.pret{visibility:visible}
/* Curseur clignotant sur la ligne en cours d'écriture */
.steps li.tape::after{
  content:'▋';color:var(--acc);margin-left:2px;
  animation:curseurTape .7s steps(1) infinite;
}
@keyframes curseurTape{0%,49%{opacity:1}50%,100%{opacity:0}}
/* Les lignes gardent leur hauteur : le texte qui s'écrit ne fait
   pas sauter la mise en page. */
.steps li{min-height:1.5em}

/* Onglets */
.tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;background:transparent;padding:0}
.tabs button{
  flex:1;min-width:108px;padding:11px;cursor:pointer;
  background:#00ff850a;border:1px solid var(--line);color:var(--txt-dim);
  font-family:'Share Tech Mono',monospace;font-size:.73rem;letter-spacing:.1em;
  text-transform:uppercase;transition:.22s;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.tabs button:hover{color:var(--txt);border-color:var(--line-strong)}
.tabs button.on{background:var(--acc);color:#02120a;border-color:var(--acc);box-shadow:0 0 20px #00ff854d}

.notice{
  display:flex;gap:13px;padding:15px 17px;
  background:#00e5ff0d;border:1px solid #00e5ff33;font-size:.89rem;color:var(--txt-dim);
}
.notice b{color:var(--acc-2)}

/* Formulaires */
.field{margin-bottom:16px}
.field label{
  display:block;font-family:'Share Tech Mono',monospace;font-size:.73rem;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px;color:var(--txt-dim);
}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;background:#00ff8508;
  border:1px solid var(--line-strong);color:var(--txt);
  font-family:inherit;font-size:.95rem;transition:.2s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-color:var(--acc);background:#00ff8514;
  box-shadow:0 0 0 3px #00ff8524,0 0 22px -6px #00ff8580;
}
.field textarea{resize:vertical;min-height:112px}
.field select option{background:var(--card-solid);color:var(--txt)}
.hp{position:absolute;left:-9999px}

.star-pick{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px}
.star-pick input{position:absolute;opacity:0;width:0;height:0}
.star-pick label{
  font-size:2rem;line-height:1;color:#ffffff26;cursor:pointer;margin:0;
  transition:transform .18s,color .18s,text-shadow .18s;
}
.star-pick input:checked ~ label,
.star-pick label:hover,
.star-pick label:hover ~ label{color:var(--gold);text-shadow:0 0 18px #ffc24780}
.star-pick label:hover{transform:scale(1.2)}
.star-pick input:focus-visible + label{outline:2px solid var(--acc);outline-offset:3px}

/* Bouton neutralisé des apps à venir */
/* Bouton en cours de transmission : allure de ligne de commande */
.btn.transmet{
  font-family:'Share Tech Mono',monospace;letter-spacing:.06em;font-size:.82rem;
  background:#00ff8514 !important;color:var(--acc) !important;
  border-color:var(--acc);cursor:progress;
  animation:pulseTransmet 1.05s ease-in-out infinite;
}
.btn.transmet::before{display:none}
@keyframes pulseTransmet{
  0%,100%{box-shadow:0 0 0 0 #00ff8500}
  50%{box-shadow:0 0 24px 0 #00ff8566}
}

/* Message de réponse affiché sous un formulaire */
.msg-form{
  margin:14px 0 0;padding:12px 15px;font-size:.9rem;
  border:1px solid var(--line-strong);background:#00ff850f;color:var(--acc);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.msg-form.ko{border-color:#ff4d6d59;background:#ff4d6d14;color:#ff8fa3}

.btn.is-soon,.btn.is-soon:hover{
  background:#ffc2470f !important;color:var(--gold) !important;
  border-color:#ffc24759 !important;box-shadow:none !important;
  cursor:not-allowed;transform:none !important;
}

/* ============================================================
   11. DONS
   ============================================================ */
.donate{
  position:relative;overflow:hidden;text-align:center;padding:54px 34px;
  background:linear-gradient(135deg,#00ff8514,#00e5ff0a);
  border:1px solid var(--line-strong);
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
}
.donate::after{
  content:'';position:absolute;top:-60%;left:0;width:42%;height:220%;
  background:linear-gradient(100deg,#00ff8500,#00ff8524,#00ff8500);
  animation:balayage 7s ease-in-out infinite;will-change:transform;
}
@keyframes balayage{
  0%{transform:translateX(-110%) rotate(14deg)}
  60%,100%{transform:translateX(320%) rotate(14deg)}
}
.donate > *{position:relative;z-index:1}
.donate h2{margin-bottom:12px}
.donate p{color:var(--txt-dim);max-width:54ch;margin:0 auto 26px}
.donate-perks{
  display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:28px;
  font-family:'Share Tech Mono',monospace;font-size:.73rem;letter-spacing:.06em;
  color:var(--txt-faint);text-transform:uppercase;
}

/* ============================================================
   12. PIED DE PAGE
   ============================================================ */
footer{
  border-top:1px solid var(--line);padding:38px 0;margin-top:60px;
  color:var(--txt-faint);font-size:.85rem;position:relative;z-index:2;
}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{transition:.2s}
footer a:hover{color:var(--acc)}

/* ============================================================
   13. DIVERS
   ============================================================ */
.center{text-align:center}
.mt-2{margin-top:20px}
.hidden{display:none !important}
.cache{display:none !important}
.grad-txt{color:var(--acc);text-shadow:0 0 12px #00ff857a}

@media(max-width:640px){
  section{padding:62px 0}
  .wrap{padding:0 20px}
  .stat{padding:18px 22px}
  .app-card{padding:20px}
  .hero{min-height:78vh;padding:60px 0 50px}
  .demarrer{padding:18px 40px}
}

/* ============================================================
   14. ACCESSIBILITÉ : moins d'animations si demandé
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  #matrix,#vortex,.aura span,.grille,#curseur,body::after{display:none}
  .reveal{opacity:1;transform:none}
  .app-card:not(.centre){opacity:.8;transform:none}
  .anim .steps li{visibility:visible}   /* jamais de texte caché */
  .portail-video{opacity:.85}
}