/* Line-up — réutilise le système de mise en page de la home/à-propos
   (container-fig, hero-wrap, about-section/about-centered/partner-section,
   footer-grid : tous définis dans ../home.css) et n'ajoute que ce qui est
   spécifique à cette page : la grille de cartes streamers, avec un aperçu
   du live qui glisse par-dessus au survol. */

/* Taille de titre plus grande que le h1 secondaire standard
   d'about-hero-title-block (mesurée sur la maquette 04_LINEUP). */
.hero-title-block--lead h1 {
  font-size: clamp(48px, 7vw, 88px);
}

/* Marge large : la preview de la 1ère rangée remonte par-dessus tout
   (z-index, voir .streamer-card:has()) au survol — sans cet espace, elle
   chevauche le paragraphe "Des créateurs-rices engagés-ées" juste au-dessus. */
.streamer-section {
  margin-top: 200px;
}

.streamer-grid {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Row-gap plus large que le column-gap : l'aperçu remonte derrière la
     carte au survol (voir .streamer-envelope-preview) et a besoin de place
     au-dessus pour ne pas chevaucher la rangée précédente. */
  gap: var(--space-5) var(--space-2);
}

@media (max-width: 1100px) {
  .streamer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .streamer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

.streamer-card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Sans ça, l'aperçu qui déborde en haut de sa carte se fait recouvrir par
   la carte de la rangée précédente (elle vient après elle en peinture par
   défaut dans la grille) — on élève explicitement toute la carte survolée
   au-dessus de ses voisines. */
.streamer-card:has(.streamer-envelope:hover),
.streamer-card:has(.streamer-envelope:focus-within),
.streamer-card:has(.streamer-envelope.is-touch-active) {
  z-index: 10;
}

/* La carte (recto) reste fixe — c'est l'enveloppe. L'aperçu du live glisse
   par-dessus au survol/focus, comme une carte qu'on tire hors de son
   enveloppe. Pas d'overflow:hidden ici : l'aperçu doit pouvoir déborder du
   cadre pendant l'animation de sortie. */
.streamer-envelope {
  position: relative;
  display: block;
  aspect-ratio: 1748 / 1240;
  color: inherit;
  text-decoration: none;
  transition: filter 0.7s ease;
}

.streamer-envelope:hover,
.streamer-envelope:focus-within,
.streamer-envelope.is-touch-active {
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.35));
}

.streamer-envelope-front {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  z-index: 2;
}

/* L'aperçu reste derrière le recto (z-index inférieur), entièrement masqué
   par lui au repos. Au survol/focus il remonte : seule la portion qui
   dépasse du recto devient visible, comme une carte qu'on tire hors de son
   enveloppe. */
.streamer-envelope-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  pointer-events: none;
  transform: translateY(0);
  transition: transform 0.35s ease;
}

.streamer-envelope:hover .streamer-envelope-preview,
.streamer-envelope:focus-within .streamer-envelope-preview,
.streamer-envelope.is-touch-active .streamer-envelope-preview {
  transform: translateY(-55%);
  pointer-events: auto;
}

/* base.css coupe transition-duration à ~0 pour tout le site quand le
   visiteur a désactivé les animations système (prefers-reduced-motion) —
   sans cette exception, l'aperçu apparaît instantanément sans glissement
   pour ces visiteurs (dont potentiellement toi si les animations Windows
   sont désactivées dans Accessibilité). */
@media (prefers-reduced-motion: reduce) {
  .streamer-envelope-preview {
    transition-duration: 0.35s !important;
  }
}

.flip-card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cas sans visuel personnalisé fourni (Mafa) : on retombe sur un recto
   générique le temps que sa carte soit livrée. */
.flip-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2);
  text-align: center;
}

.flip-card-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
}

.flip-card-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #aeaeae;
  color: var(--color-bg);
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.flip-card-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
}

/* Aperçu = live Twitch, chargé à la demande (voir streamers.js) —
   fond noir pendant le chargement/pour les chaînes hors-ligne. */
.flip-card-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.flip-card-preview-hint {
  padding: 0 var(--space-2);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  text-align: center;
}

/* Streamers sans chaîne Twitch (Mulan) : pas de lecteur possible, on garde
   un verso texte simple plutôt qu'un fond noir vide. */
.flip-card-preview--static {
  background: var(--color-surface);
}

.flip-card-preview--static .flip-card-preview-hint {
  color: var(--color-text-muted);
}

.flip-card-preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Réseaux sous la carte — hauteur réservée même quand un seul lien est
   disponible aujourd'hui, pour pouvoir en ajouter d'autres par streamer
   plus tard sans redécaler toute la grille. */
.streamer-socials {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
}

.streamer-socials-name {
  margin-left: auto;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.streamer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  transition: border-color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}

.streamer-social-link img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.streamer-social-link:hover {
  border-color: var(--color-accent-noir);
  opacity: 0.75;
}

/* "Une force collective" : la première phrase tient sur une seule ligne
   (demande explicite), on élargit un peu ce bloc pour qu'elle rentre. */
.partner-section--force {
  max-width: 80ch;
}

@media (min-width: 861px) {
  .force-lead {
    white-space: nowrap;
  }
}

/* Mobile : réseaux + pseudo centrés dans la carte */
@media (max-width: 640px) {
  .streamer-socials {
    justify-content: center;
  }

  .streamer-socials-name {
    margin-left: 0;
  }
}