/* Page Rejoindre. Le design system vit dans varuna.css ; ici, l'en-tete, les etapes et les blocs
   de telechargement. */

.defs-svg { position:absolute; width:0; height:0; overflow:hidden }

.rejoindre-hero { overflow:hidden; border-bottom:1px solid var(--bord) }
.entete { padding-block:var(--e6) var(--e6); position:relative; z-index:1 }
.rejoindre-hero .rouages .engrenage { color:var(--bord-clair) }
/* Couple engrene, meme module que le reste (une dent = 15 px) : rj1 20 dents, rj2 11. Sens opposes,
   tangents (entraxe 0,44*(D1+D2)=205), --d = 0,11 s/px : rapport 20/11 entier, dents en phase. */
.rj1 { width:300px; height:300px; top:-110px; right:-70px; opacity:.4; color:#4a3f2b; --d:33s }
.rj2 { width:165px; height:165px; top:70px; right:168px; opacity:.3; --d:18.15s }

/* Les deux plateformes cote a cote : le choix se fait avant le clic. */
.plateformes { display:flex; gap:.85rem; flex-wrap:wrap; margin-top:var(--e4) }
.plateformes .bouton { flex:1 1 15rem }

/* L'avertissement Windows, juste sous le bouton : prevenu avant, le joueur passe le mur. */
.avant-clic { margin:var(--e3) 0 0; font-size:.9rem; color:var(--gris); line-height:1.55;
  border-left:2px solid var(--laiton); padding:.2rem 0 .2rem .9rem;
  background:linear-gradient(90deg, rgba(224,179,82,.05), transparent); border-radius:0 6px 6px 0 }
.avant-clic strong { color:var(--creme); font-weight:700 }

/* Les etapes : un chemin, chaque numero une plaque de laiton, relies par un filet. */
.etapes { counter-reset:etape; list-style:none; padding:0; margin:var(--e5) 0 0 }
.etapes li {
  counter-increment:etape; position:relative; padding-left:3.9rem; padding-bottom:var(--e4);
  color:var(--gris);
}
.etapes li:last-child { padding-bottom:0 }
.etapes li::before {
  content:counter(etape,decimal-leading-zero); position:absolute; left:0; top:-.15rem;
  width:2.6rem; height:2.6rem; border-radius:7px;
  background:linear-gradient(160deg, var(--laiton-vif), var(--laiton)); color:#241a08;
  display:grid; place-items:center;
  font-family:var(--police-titre); font-size:.9rem; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,244,214,.6), 0 3px 8px rgba(0,0,0,.45);
}
.etapes li:not(:last-child)::after {
  content:""; position:absolute; left:1.3rem; top:2.75rem; bottom:.4rem; width:2px;
  background:linear-gradient(180deg, var(--laiton), var(--bord));
}
.etapes b { color:var(--creme); font-weight:700 }
.etapes em { color:var(--texte); font-style:normal; background:rgba(224,179,82,.1);
  padding:.1rem .35rem; border-radius:4px }

.adresse-bloc {
  font-family:var(--mono); font-size:1.05rem; color:var(--laiton); font-weight:600;
  margin:.6rem 0 0; padding:.6rem .8rem; letter-spacing:.01em;
  background:var(--fond); border:1px solid var(--bord-clair); border-radius:var(--rayon-petit);
}

/* Plaque finale de telechargement. */
.appel-jouer {
  display:flex; align-items:center; justify-content:space-between; gap:var(--e4);
  padding:var(--e5); flex-wrap:wrap;
}
.appel-jouer > div:first-child { flex:1 1 22rem }
.appel-jouer h2 { margin-top:var(--e2) }
.appel-jouer .plateformes { margin-top:0; flex:0 0 auto }
.appel-jouer .plateformes .bouton { flex:0 0 auto }

@media (max-width:40rem) {
  .rj1, .rj2 { display:none }
  .appel-jouer { padding:var(--e4) }
  .appel-jouer .plateformes { width:100% }
  .appel-jouer .plateformes .bouton { flex:1 1 100% }
}