/* =========================================
   TRACKLIST — La tour de Babel de S.I.N.E.
   À charger APRÈS style.css et footer.css
   ========================================= */

.tower{
  overflow-x: clip;          /* la base peut frôler les bords sur mobile */
  padding-top: 150px;        /* dégage la navbar flottante */
}

/* ===== Sommet : titre + paragraphe ===== */
.tower__summit{
  max-width: 560px;
  margin: 0 auto 40px;
  padding: 0 24px;
  text-align: center;
}

.tower__title{
  font-weight: 400;
  font-size: clamp(56px, 9vw, 104px);
  line-height: .9;
  letter-spacing: .04em;
  color: #141414;
  margin: 0 0 18px;
}

.tower__intro{
  margin: 0 auto;
  max-width: 46ch;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: #2b2b2b;
}

/* ===== Les étages =====
   Géométrie calée au pixel sur les sprites (1000 px de large) :
   - babel-etage.png : haut = 981 px à partir de x=6, bas = 1000 px
   - babel-base.png  : haut = 875 px à partir de x=62, bas = 1000 px
   Donc : bloc au-dessus d'un étage = largeur du haut du sprite,
          bloc en dessous = largeur du bas du sprite.
   Chaque niveau est ~1,94 % plus large que celui du dessus.
   --b0 = largeur du bloc du sommet.
*/
.tower__body{
  --b0: min(700px, 74vw);
  width: var(--b0);
  margin: 0 auto;
  /* recentre l'ensemble (les sprites s'élargissent un peu plus à droite) */
  position: relative;
  left: calc(var(--b0) * -0.03122);
}

.tower__floors{
  list-style: none;
  margin: 0;
  padding: 0;
}

.floor{ width: 100%; }

/* --k = facteur de largeur, --o = décalage gauche (en multiples de --b0)
   --k2 / --o2 = idem pour le sprite babel-etage.png sous le bloc */
.floor:nth-child(1){ --k:1.00000; --o:0.00000; --k2:1.01937; --o2:-0.00612; }
.floor:nth-child(2){ --k:1.01937; --o:-0.00612; --k2:1.03911; --o2:-0.01235; }
.floor:nth-child(3){ --k:1.03911; --o:-0.01235; --k2:1.05924; --o2:-0.01871; }
.floor:nth-child(4){ --k:1.05924; --o:-0.01871; --k2:1.07975; --o2:-0.02518; }
.floor:nth-child(5){ --k:1.07975; --o:-0.02518; --k2:1.10066; --o2:-0.03179; }
.floor:nth-child(6){ --k:1.10066; --o:-0.03179; --k2:1.12198; --o2:-0.03852; }
.floor:nth-child(7){ --k:1.12198; --o:-0.03852; --k2:1.14371; --o2:-0.04538; }
.floor:nth-child(8){ --k:1.14371; --o:-0.04538; --k2:1.16586; --o2:-0.05238; }
.floor:nth-child(9){ --k:1.16586; --o:-0.05238; }

.floor__block{
  width: calc(var(--b0) * var(--k));
  margin-left: calc(var(--b0) * var(--o));
  box-sizing: border-box;
  padding: 48px clamp(20px, 7%, 64px);
  background: #ffffff;
  text-align: center;
}

.floor__num{
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: .12em;
  color: #bb1d94;
  margin-bottom: 10px;
}

.floor__title{
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  color: #141414;
  margin: 0 0 18px;
}

.floor__text{
  max-width: 54ch;
  margin: 0 auto;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.8;
  color: #2b2b2b;
}

.floor__text + .floor__text{ margin-top: 14px; }

/* Sprites */
.tower__crown,
.floor__etage,
.tower__base{
  display: block;
  height: auto;
  max-width: none;
  image-rendering: pixelated;
  margin-top: -1px;          /* évite une ligne entre le bloc et le sprite */
  user-select: none;
  pointer-events: none;
}

/* Étage au sommet : son bas (1000 px) = largeur du premier bloc */
.tower__crown{
  width: var(--b0);
  margin: 0 0 -1px;
}

.floor__etage{
  width: calc(var(--b0) * var(--k2));
  margin-left: calc(var(--b0) * var(--o2));
}

.tower__base{
  width: calc(var(--b0) * 1.33242);
  margin-left: calc(var(--b0) * -0.13499);
}

/* ===== Responsive ===== */
@media (max-width: 1199px){
  .tower{ padding-top: 110px; }
}

@media (max-width: 600px){
  .tower__intro{ font-size: 15px; }
  .floor__block{ padding: 32px 16px; }
  .floor__text{ font-size: 14.5px; line-height: 1.7; }
}