/* ==========================================================================
   Holi Lakes Festival — sections pilotées par le panneau d'administration
   (Line-up 2026 et FAQ). Feuille complémentaire : styles.css reste intacte.
   Mêmes variables, mêmes polices, mêmes animations que la maquette.
   ========================================================================== */

/* --- Line-up 2026 : mur d'affiche, la première position en tête d'affiche --
   Une carte photo 4:5 par artiste. Sans photo, la carte se remplit de la
   volée de gulal et du mandala. La première carte du classement occupe
   quatre cases : réordonner dans l'administration change la vedette. ------- */

/* Colonnes fixes par largeur d'écran (5, 3 puis 2) : la carte teaser de fin
   de grille est dimensionnée côté serveur pour ces trois valeurs. */
.lineup__grid {
  list-style: none;
  padding: 0;
  margin: clamp(30px, 5vw, 52px) 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  gap: clamp(14px, 2vw, 22px);
}

@media (max-width: 1023px) {
  .lineup__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Aucun fond sur la carte : un fond sombre dessiné avec le rayon laisse un
   liseré aux coins arrondis, là où la découpe des enfants et le tracé du fond
   ne coïncident pas au pixel près. La base sombre est peinte par les calques
   internes (photo, voile, gulal), qui héritent tous du même rayon. */
.lineup-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: #fff;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Le survol soulève la carte (priorité sur le « transform: none » de .reveal) */
.lineup-card:hover,
.js .lineup-card.is-visible:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

/* Cascade d'apparition : chaque carte suit la précédente (index posé en --i) */
.js .lineup-card.reveal { transition-delay: calc(var(--i, 0) * 45ms); }

.lineup-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform .6s ease;
}

.lineup-card:hover .lineup-card__photo { transform: scale(1.05); }

/* Voile nuit en bas de carte : le nom reste lisible sur toute photo */
.lineup-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(var(--nuit-rgb), 0) 48%, rgba(var(--nuit-rgb), .9) 100%);
}

/* Mention optionnelle, couleur choisie dans l'administration (App\Enums\TagColor).
   Halo sombre pour les couleurs claires, halo clair pour les couleurs sombres,
   afin de rester lisible quelle que soit la photo. */
.lineup-card__tag {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  font-family: var(--f-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  color: var(--jaune);
  text-shadow: 0 2px 10px rgba(11, 7, 17, .6);
}

.lineup-card__tag--blanc { color: #fff; }

.lineup-card__tag--magenta {
  color: var(--magenta);
  text-shadow: 0 1px 10px rgba(255, 255, 255, .55);
}

.lineup-card__tag--nuit {
  color: var(--nuit);
  text-shadow: 0 1px 10px rgba(255, 255, 255, .7);
}

.lineup-card__name {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.05;
  letter-spacing: .02em;
  text-wrap: balance;
}

/* Rappel de la signature : un trait de poudre souligne le nom au survol */
.lineup-card__name::after {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--magenta), #E8541D 48%, var(--jaune));
  filter: blur(2px);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: left;
  transition: opacity .3s ease, transform .3s ease;
}

.lineup-card:hover .lineup-card__name::after {
  opacity: .95;
  transform: none;
}

/* Sans photo : volée de gulal sur base nuit, mandala en filigrane, nom centré.
   Le calque déborde largement de la carte (inset négatif) : après flou, il la
   couvre entièrement, base sombre comprise, et se fait découper par le rayon. */
.lineup-card--placeholder::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: 0;
  background:
    radial-gradient(42% 58% at 22% 62%, rgba(var(--magenta-rgb), .8), transparent 66%),
    radial-gradient(34% 48% at 47% 28%, rgba(232, 84, 29, .65), transparent 68%),
    radial-gradient(40% 56% at 70% 60%, rgba(var(--jaune-rgb), .75), transparent 66%),
    radial-gradient(15% 26% at 88% 30%, rgba(var(--vert-rgb), .5), transparent 72%),
    var(--nuit);
  filter: blur(22px);
  transform: rotate(-3deg);
  transition: transform .8s ease;
}

.lineup-card--placeholder:hover::before { transform: rotate(2deg) scale(1.08); }

.lineup-card--placeholder::after {
  background: linear-gradient(180deg, rgba(var(--nuit-rgb), .1), rgba(var(--nuit-rgb), .45));
}

.lineup-card__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64%;
  height: auto;
  z-index: 1;
  opacity: .18;
  filter: grayscale(1) brightness(3);
}

.lineup-card--placeholder .lineup-card__name {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  text-align: center;
  font-size: clamp(1.35rem, 1.9vw, 1.8rem);
  text-shadow: 0 4px 24px rgba(11, 7, 17, .55);
}

.lineup-card--placeholder .lineup-card__name::after {
  margin-inline: auto;
  transform-origin: center;
}

/* Tête d'affiche : la première position occupe deux colonnes et deux lignes */
.lineup-card--headliner {
  grid-column: span 2;
  grid-row: span 2;
}

.lineup-card--headliner .lineup-card__tag {
  top: 18px;
  left: 20px;
}

.lineup-card--headliner .lineup-card__name {
  left: 24px;
  right: 24px;
  bottom: 24px;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
}

.lineup-card--headliner.lineup-card--placeholder .lineup-card__name {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

/* Teaser de fin de grille : occupe les cases restantes de la dernière ligne
   (largeur calculée côté serveur, variables --span-*), ou toute une ligne en
   bandeau quand la grille tombe juste. Même habillage gulal que les cartes
   sans photo. */
.lineup-card--teaser {
  grid-column: span var(--span-5, 1);
  align-self: stretch;
  aspect-ratio: auto;
  min-height: 220px;
}

.lineup-card__teaser {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 20px;
  text-align: center;
}

.lineup-card__teaser-overline {
  font-family: var(--f-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  color: var(--jaune);
  text-shadow: 0 2px 10px rgba(11, 7, 17, .6);
}

.lineup-card__teaser-title {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 1.9vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: .02em;
  text-wrap: balance;
  text-shadow: 0 4px 24px rgba(11, 7, 17, .55);
}

.lineup-card__teaser-link {
  margin-top: .5rem;
  font-family: var(--f-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid rgba(var(--jaune-rgb), .6);
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}

.lineup-card__teaser-link:hover {
  color: var(--jaune);
  border-color: var(--jaune);
}

@media (max-width: 1023px) {
  .lineup-card--teaser { grid-column: span var(--span-3, 1); }
}

.lineup__empty { margin-top: clamp(28px, 4vw, 44px); }

@media (max-width: 767px) {
  .lineup__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .lineup-card { border-radius: 16px; }

  .lineup-card__name {
    left: 14px;
    right: 14px;
    bottom: 14px;
    font-size: 1rem;
  }

  .lineup-card--placeholder .lineup-card__name { font-size: 1.15rem; }

  /* La tête d'affiche passe en pleine largeur, au format paysage */
  .lineup-card--headliner {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }

  .lineup-card--headliner .lineup-card__name {
    left: 18px;
    right: 18px;
    bottom: 18px;
    font-size: 1.5rem;
  }

  .lineup-card--headliner.lineup-card--placeholder .lineup-card__name { font-size: 1.7rem; }

  .lineup-card--teaser {
    grid-column: span var(--span-2, 1);
    min-height: 180px;
  }

  .lineup-card__teaser { padding: 14px; }

  .lineup-card__teaser-title { font-size: 1.15rem; }
}

/* --- FAQ : accordéon natif (details / summary), sans JavaScript ---------- */

.faq__list {
  margin-top: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.js .faq__item.reveal { transition-delay: calc(var(--i, 0) * 60ms); }

.faq__item {
  background: #F8F7FA;
  border: 1px solid rgba(var(--nuit-rgb), .07);
  border-radius: var(--radius-m);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.faq__item[open] {
  border-color: rgba(var(--magenta-rgb), .35);
  box-shadow: var(--shadow-card);
}

.faq__summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px 18px 24px;
  border-radius: var(--radius-m);
  cursor: pointer;
  list-style: none;
}

.faq__summary::-webkit-details-marker { display: none; }

.faq__heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq__category {
  font-family: var(--f-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .68rem;
  color: var(--magenta);
}

.faq__question {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: .02em;
  line-height: 1.25;
  transition: color .2s ease;
}

.faq__summary:hover .faq__question { color: var(--magenta); }

.faq__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(var(--magenta-rgb), .1);
  color: var(--magenta);
  transition: transform .25s ease, background-color .2s ease, color .2s ease;
}

.faq__item[open] .faq__icon {
  transform: rotate(180deg);
  background: var(--magenta);
  color: #fff;
}

.faq__answer {
  padding: 0 24px 22px;
  color: rgba(var(--nuit-rgb), .8);
  line-height: 1.6;
  animation: faq-in .3s ease both;
}

@keyframes faq-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (max-width: 767px) {
  .faq__summary { padding: 16px 16px 16px 18px; }

  .faq__answer { padding: 0 18px 18px; }
}

/* --- Mouvement réduit : mêmes neutralisations que la maquette ------------ */

@media (prefers-reduced-motion: reduce) {
  .lineup-card:hover,
  .js .lineup-card.is-visible:hover,
  .lineup-card:hover .lineup-card__photo,
  .lineup-card--placeholder:hover::before { transform: none; }

  .lineup-card--placeholder .lineup-card__name { transform: translateY(-50%); }
}