/* Section 02 — vignette flottante + marque, fond --sable + fiches rangées.
   Chevauche la fin de 01 (marge négative = 100vh) : sa scène épinglée devient
   sticky exactement quand celle de 01 se décroche, et comme 02 vient après
   01 dans le DOM, elle la recouvre pile à cet instant (aucune frame où les
   deux scènes épinglées sont visibles en même temps). */
.sec--02 {
  margin-top: -100vh;
}

.s02-scene {
  background: var(--sable);
  color: var(--encre);
  opacity: var(--s02-visible, 0);
}

.s02-marque {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 0 var(--gouttiere);
  opacity: var(--opacite-marque, 0);
  transform: translateY(calc(-50% + var(--s02-marque-decalage, 0px)));
  transition: opacity .3s var(--ease), transform .5s var(--ease);
  z-index: 2;
}

.s02-triptyque {
  position: absolute;
  left: 50%;
  top: var(--s02-triptyque-haut, 60%);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

.s02-triptyque__ligne {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--t-mono-titre);
  line-height: 1.3;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.s02-triptyque__ligne[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

.s02-marque__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 900;
  font-stretch: var(--large-titre);
  font-size: var(--t-geant);
  line-height: 1;
  text-transform: uppercase;
}

.s02-marque__ligne {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-moyen);
  line-height: 1.1;
  text-transform: uppercase;
}

.s02-marque__ligne--pleine {
  font-weight: 900;
}

.s02-marque__ligne--fine {
  font-weight: 400;
}

.s02-fiches {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.s02-fiche {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s02-largeur);
  height: var(--s02-hauteur);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: var(--rayon);
  border: var(--trait) solid transparent;
  background: var(--sable);
  opacity: 0;
  transform: translate(var(--s02-x, 0), var(--s02-y, 0)) translate(-50%, -50%) rotate(var(--s02-rot, 0deg));
  transition: opacity .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
  will-change: transform;
}

.s02-fiche[data-visible="true"] {
  opacity: var(--s02-opacite, 1);
}

.s02-fiche[data-etat="desordre"] {
  background: var(--sable);
  border-color: var(--alerte);
}

.s02-fiche[data-etat="range"] {
  background: var(--cache);
  border-color: transparent;
}

.s02-fiches[data-rangement="true"] .s02-fiche {
  transition: transform .5s var(--ease), opacity .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}

.s02-fiche__pastille {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--alerte);
}

.s02-fiche[data-etat="range"] .s02-fiche__pastille {
  background: var(--ok);
}

.s02-fiche__libelle {
  font-family: var(--police-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--encre);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s02-vignette-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--echelle-vignette, 1) * 100%);
  height: calc(var(--echelle-vignette, 1) * 100%);
  transform: translate(-50%, var(--decalage-vignette, -50%)) scale(var(--echelle-vignette, 1));
  transform-origin: center;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--abysse) 24%, transparent);
  border-radius: var(--rayon);
  overflow: hidden;
  opacity: var(--opacite-vignette, 1);
  transition: opacity .3s var(--ease);
  z-index: 2;
}

.s02-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 760px) {
  .s02-marque__nom {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }

  .s02-marque__ligne {
    font-size: clamp(1.1rem, 5.2vw, 1.6rem);
  }

  .s02-vignette-image {
    height: calc(var(--echelle-hauteur-vignette, var(--echelle-vignette, 1)) * 100%);
  }

  .s02-fiche {
    width: min(var(--s02-largeur), 27vw);
    gap: 4px;
    padding: 0 6px;
  }

  .s02-fiche__libelle {
    font-size: .5rem;
  }

  .s02-triptyque {
    padding: 0 var(--gouttiere);
  }

  .s02-triptyque__ligne {
    font-size: .9rem;
  }
}