/* ============================================================
   Conrad Masset — DJ
   Styles propres au site DJ, chargés APRÈS assets/css/style.css du site
   Photographe (variables --bg/--accent/etc. et composants partagés :
   header, boutons, formulaire, footer, reveal… déjà définis là-bas).
   ============================================================ */

/* ---------- Home: hero sans photo (aucun visuel DJ pour l'instant) ---------- */
.hero-dj{
  position: relative;
  min-height: min(74vh, 640px);
  display:flex; align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 22% 20%, rgba(217,154,78,.20), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(217,154,78,.12), transparent 50%),
    var(--bg-elevated);
}
.hero-dj .hero-content{ position:relative; z-index:2; padding: clamp(40px,7vw,90px) clamp(18px,4vw,48px); max-width: var(--maxw); margin:0 auto; width:100%; }
.hero-dj h1{ font-size: clamp(2.1rem, 5.4vw, 4.2rem); line-height:1.05; max-width: 18ch; margin-bottom:.35em; }
.hero-dj p.lead{ font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 50ch; color: var(--text-dim); }

/* ---------- Home: liens rapides vers Dates / Souvenirs / Production ---------- */
.dj-links-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
@media (max-width: 780px){ .dj-links-grid{ grid-template-columns: 1fr; } }
.dj-link-card{
  display:block; padding: clamp(22px,3vw,32px); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.dj-link-card:hover, .dj-link-card:focus-visible{ border-color: var(--accent); transform: translateY(-2px); background: var(--accent-soft); }
.dj-link-card .eyebrow{ margin-bottom: 10px; }
.dj-link-card h3{ margin: 0 0 8px; font-size: 1.25rem; }
.dj-link-card p{ margin:0; font-size:.92rem; }

/* ---------- État vide générique (Dates / Souvenirs / Production) ---------- */
.empty-state{
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: clamp(32px,5vw,56px); text-align:center; max-width: 60ch;
}
.empty-state p{ margin:0; color: var(--text-dim); }

/* ---------- Dates ---------- */
.dates-list{ display:flex; flex-direction:column; gap: 14px; max-width: 820px; }
.date-card{
  display:flex; align-items:center; gap: clamp(18px,3vw,32px);
  padding: 20px clamp(18px,3vw,28px); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .25s;
}
.date-card:hover{ border-color: var(--accent); }
.date-card .date-badge{
  flex: 0 0 auto; width: 72px; text-align:center; padding: 10px 0; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
}
.date-badge .day{ display:block; font-size:1.5rem; font-weight:600; line-height:1; }
.date-badge .month{ display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-top:4px; }
.date-info{ flex: 1 1 auto; min-width:0; }
.date-info h3{ margin:0 0 4px; font-size:1.05rem; }
.date-info p{ margin:0; font-size:.88rem; color: var(--text-faint); }
.date-card .btn{ flex: 0 0 auto; }

/* ---------- Souvenirs (photos / vidéos) ---------- */
.souvenirs-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap);
}
.souvenir-tile{
  position:relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow:hidden;
  background: var(--bg-elevated); border: 1px solid var(--line);
}
.souvenir-tile img, .souvenir-tile video{ width:100%; height:100%; object-fit:cover; display:block; }
.souvenir-tile .souvenir-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 12px 14px;
  background: linear-gradient(0deg, rgba(18,18,19,.85), transparent);
  font-size:.8rem; color: var(--text-dim);
}
.souvenir-tile.is-placeholder{ display:flex; align-items:center; justify-content:center; }
.souvenir-tile.is-placeholder .placeholder-icon{ color: var(--text-faint); font-size:1.8rem; }
.souvenir-tile .media-kind{
  position:absolute; top:10px; right:10px; z-index:2; padding:4px 9px; border-radius: var(--radius);
  background: rgba(18,18,19,.6); color: var(--text-dim); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
}

/* ---------- Production (playlist) ---------- */
.track-list{ display:flex; flex-direction:column; max-width: 780px; border-top: 1px solid var(--line); }
.track-row{
  display:flex; align-items:center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line);
}
.track-play{
  flex: 0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:none; color: var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size: 1rem; transition: background .2s, border-color .2s, color .2s;
}
.track-play:hover, .track-play:focus-visible{ border-color: var(--accent); color: var(--accent); }
.track-play[data-playing="true"]{ background: var(--accent); border-color: var(--accent); color:#171512; }
.track-play:disabled{ opacity:.35; cursor:not-allowed; }
.track-meta{ flex: 1 1 auto; min-width:0; }
.track-meta h3{ margin:0 0 2px; font-size:1rem; }
.track-meta span{ font-size:.78rem; color: var(--text-faint); }
.track-actions{ flex: 0 0 auto; display:flex; align-items:center; gap:10px; }
.track-download{
  font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color: var(--text-dim);
  border:1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; transition: border-color .2s, color .2s;
}
.track-download:hover{ border-color: var(--accent); color: var(--accent); }
.track-badge-soon{
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color: var(--text-faint);
  border:1px dashed var(--line); border-radius: var(--radius); padding: 8px 12px;
}

/* ---------- Lightbox souvenirs (structure propre, réutilise .lightbox-btn/.lightbox-close
   du CSS de base pour le bouton de fermeture) ---------- */
.lightbox-souvenir{
  position: fixed; inset:0; z-index: 2000; background: rgba(10,10,11,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .25s var(--ease), visibility 0s .25s;
}
.lightbox-souvenir.is-open{ opacity:1; visibility:visible; transition: opacity .25s var(--ease); }
.lightbox-souvenir-media{ max-width: min(92vw, 1200px); max-height: 88vh; }
.lightbox-souvenir-media img, .lightbox-souvenir-media video{
  max-width:100%; max-height:88vh; width:auto; height:auto; box-shadow: var(--shadow); display:block;
}

/* ---------- Contact / booking ---------- */
.contact-meta .field-hint{ display:block; margin-top:6px; font-size:.8rem; color: var(--text-faint); }