/* ===== 01 — Accueil ===== */
/* Photo plein écran, y compris sous la nav et la pagination (Révision
   2026-09-05) : sur la page Accueil, la photo devient un fond fixe qui
   couvre tout le viewport (position: fixed) au lieu de rester coincée entre
   l'en-tête et la pagination. L'en-tête (z-index: 100, cf. styles/base.css)
   flotte par-dessus en transparence (dégradé sombre pour rester lisible)
   plutôt que d'occuper sa propre bande de couleur pleine.
   BUG corrigé le 2026-09-09 (BABS : "le bouton ecouter ainsi que ceux des
   plateformes de streaming ... ne marche pas") : cette couche était en
   `z-index: -1`, donc entièrement derrière le fond de <body> lui-même aux
   endroits non couverts par un autre élément positionné (tout sauf la
   bande de l'en-tête) — les clics sur le CTA "Écouter" et les pastilles de
   streaming (en bas de l'écran, loin de l'en-tête) atterrissaient sur
   <body>, pas sur les liens. `z-index: 0` suffit : l'en-tête reste
   au-dessus grâce à son propre `z-index: 100`, et le reste de la photo
   redevient cliquable. */
body[data-page="accueil"] .page--accueil {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 0;
}

/* En-tête transparent en degradé sur l'Accueil (photo derrière, cf.
   ci-dessus) — même bandeau coins-arrondis que les autres pages (cf.
   styles/base.css), juste un fond dégradé plutôt que flou-opaque, pour
   laisser voir la photo tout en restant lisible. Le panneau de nav mobile
   déroulant (.site-nav--open, cf. styles/base.css), lui, garde son fond
   opaque habituel même ici — c'est un panneau temporaire par-dessus le
   contenu, pas une bande persistante qui doit se fondre dans la photo. */
body[data-page="accueil"] .site-header {
  background: linear-gradient(180deg, rgba(var(--bg-dark-rgb), 0.55) 0%, transparent 100%);
}
/* Désactive le ::before flou (cf. styles/base.css) sur l'Accueil : ce
   dégradé transparent doit rester tel quel, pas caché sous le flou opaque
   pensé pour les autres pages. */
body[data-page="accueil"] .site-header::before {
  display: none;
}

.accueil-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}

/* Portrait plein cadre (placeholder tant qu'aucune photo réelle n'est
   fournie) : base sombre + motif diagonal clair, pour que le texte blanc
   superposé reste lisible même sans image. Occupe maintenant toute la
   hauteur de la page (cf. Révision 2026-09-05), plus seulement une bannière. */
/* Alignement bas-gauche façon Hamza (Révision 2026-09-09) : remplace le
   texte centré vertical/horizontal par un cadrage éditorial ancré en bas,
   comme le mockup de référence validé par BABS. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 20px;
  height: 100%;
  min-height: 100%;
  text-align: left;
  color: var(--text-on-dark);
  padding: 32px 20px 40px;
  border-radius: 0;
  background-color: var(--bg-dark-elevated);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 252, 240, 0.06),
    rgba(255, 252, 240, 0.06) 2px,
    transparent 2px,
    transparent 14px
  );
}

/* Variante avec vraie photo (hero.imageUrl fourni) : l'image remplace le
   motif diagonal, un voile sombre garde le texte blanc lisible dessus. */
.hero--photo {
  background-size: cover;
  background-position: center;
  background-color: var(--bg-dark-elevated);
}
/* Sur desktop, la fenêtre est bien plus large que haute alors que la photo
   est portrait (verticale) : `cover` doit rogner beaucoup plus en hauteur,
   et un centrage vertical pur coupait le haut de la photo (visage/tête) à
   parts égales avec le bas — corrigé en remontant le point d'ancrage vers
   le haut de l'image plutôt que son centre (BABS, 2026-09-09 : "on ne voit
   pas le haut" sur ordi). Le rendu mobile, déjà correct, n'est pas touché
   (rapport largeur/hauteur du viewport plus proche de celui de la photo,
   donc bien moins de rognage). */
@media (min-width: 768px) {
  .hero--photo {
    background-position: center 12%;
  }
}
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--bg-dark-rgb), 0.05) 0%,
    rgba(var(--bg-dark-rgb), 0.2) 45%,
    rgba(var(--bg-dark-rgb), 0.92) 100%
  );
  pointer-events: none;
}
.hero--photo > * {
  position: relative;
  z-index: 1;
}

.hero__cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
  margin: 0;
}

.hero__title {
  font-size: clamp(56px, 14vw, 168px);
  color: var(--text-on-dark);
}

.hero__streaming {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

/* Pastille de couleur par plateforme, cf. PLATFORM_DOT_COLORS dans
   render-accueil.ts — identité visuelle de chaque service (Révision
   2026-09-05, remise suite à demande de BABS). */
.hero__streaming-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
/* Pastilles qui respirent doucement, décalées entre elles pour ne pas
   clignoter toutes en même temps — petite touche vivante sur la page la
   plus consultée au tap (accueil, cf. demande "dopamine mobile"). */
@media (prefers-reduced-motion: no-preference) {
  .hero__streaming-dot {
    animation: dot-pulse 1.8s ease-in-out infinite;
  }
  .hero__streaming li:nth-child(2) .hero__streaming-dot {
    animation-delay: 0.2s;
  }
  .hero__streaming li:nth-child(3) .hero__streaming-dot {
    animation-delay: 0.4s;
  }
  .hero__streaming li:nth-child(4) .hero__streaming-dot {
    animation-delay: 0.6s;
  }
  .hero__streaming li:nth-child(5) .hero__streaming-dot {
    animation-delay: 0.8s;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding: 56px 40px;
  }
}

/* ===== 02 — Musique ===== */
/* Un seul embed Spotify (artiste), sans carte ni cadre autour — demande de
   BABS (2026-09-09) : "aggrandis le ... enleve ton cadre". Posé directement
   sur le fond sombre de la page, en pleine largeur, sur une grande hauteur
   (`height` vient de content.json, 800px — Spotify remplit cet espace avec
   plus de morceaux visibles plutôt que de le laisser vide). Le rayon des
   coins (12px) fait partie du code d'embed officiel de Spotify lui-même,
   pas un cadre qu'on ajoute. */
.embed-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  border: none;
  border-radius: 12px;
}

.embed-card__note {
  font-size: 13px;
  color: var(--text-muted-on-dark);
}

/* ===== 03 — Vidéos ===== */
/* Liste verticale, une ligne par clip, titre display géant — direction
   "Hamza style" (Révision 2026-09-09). Remplace l'ancien carrousel
   horizontal de cartes. Le clic insère le lecteur YouTube sous la ligne
   (cf. render-videos.ts) plutôt que d'ouvrir une vignette : même principe
   "aucun script tiers avant clic" qu'avant cette révision, sans vignette
   visible par défaut (traitement texte pur, comme la référence). */
.video-row-list {
  border-top: 1px solid var(--border-on-dark);
}

.video-row-wrap {
  border-bottom: 1px solid var(--border-on-dark);
}

.video-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 26px 0;
  text-align: left;
  color: var(--text-on-dark);
  transition: opacity var(--transition-fast);
}
.video-row:hover,
.video-row:focus-visible {
  opacity: 0.6;
}
.video-row--disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Vignette YouTube réelle (hqdefault.jpg de la vidéo), affichée à côté du
   titre — demande de BABS (2026-09-09) : la liste "Hamza style" en texte
   pur ne montrait plus aucune image. */
.video-row__thumb {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-on-dark);
}
@media (min-width: 768px) {
  .video-row__thumb {
    width: 140px;
  }
}

.video-row__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.video-row__tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
  font-weight: 600;
}

.video-row__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(24px, 4.5vw, 44px);
  line-height: 0.95;
}

.video-row__meta {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.video-row__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  margin-bottom: 20px;
}

/* ===== 04 — Photos / Galerie ===== */
.photos-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Desktop : légende à droite du titre, comme le mockup. */
@media (min-width: 768px) {
  .photos-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }
  .photos-header .section-header__desc {
    max-width: 28ch;
    text-align: right;
  }
}

/* Collage 3 colonnes + mot géant en surimpression (mix-blend-mode) —
   direction "Hamza style" (Révision 2026-09-09), remplace la galerie qui
   défilait horizontalement. Les 3 photos réelles remplissent chacune une
   colonne, `object-fit: cover` pour un cadrage plein bloc sans déformation. */
.word-section {
  position: relative;
  display: grid;
  /* `auto-fit` plutôt qu'un nombre de colonnes fixe (était `repeat(3, 1fr)`)
     — la galerie n'est plus figée à exactement 3 photos (BABS en a ajouté
     une 4e, cf. content.json > pages.photos.gallery), le collage doit
     s'adapter à n'importe quel nombre sans qu'on retouche le CSS chaque
     fois. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px;
  min-height: min(70vh, 620px);
  margin: 0 calc(-1 * max(20px, env(safe-area-inset-right)));
}
@media (min-width: 768px) {
  .word-section {
    margin: 0 calc(-1 * max(32px, env(safe-area-inset-right)));
  }
}

.word-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
}

.word-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.word-overlay__text {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(56px, 13vw, 180px);
  color: var(--text-on-dark);
  mix-blend-mode: difference;
  text-align: center;
  line-height: 0.9;
}

@media (max-width: 479px) {
  .word-section {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .word-section img {
    aspect-ratio: 4 / 5;
    height: auto;
  }
  .word-overlay {
    position: absolute;
    inset: 0;
  }
}

/* ===== 05 — Dates / Sur scène ===== */
.show-list {
  display: flex;
  flex-direction: column;
}

.show-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-subtle);
}
/* Ligne posée directement sur le fond de page (pas une carte autonome comme
   .embed-card/.video-card) : suit le thème, cf. Révision 2026-09-05. */
body.theme-dark .show-row {
  border-bottom-color: var(--border-on-dark);
}

.show-row__date {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.06em;
}
body.theme-dark .show-row__date {
  color: var(--accent-on-dark);
}

.show-row__city {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 24px;
}

.show-row__venue {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: -8px;
}
body.theme-dark .show-row__venue {
  color: var(--text-muted-on-dark);
}

.show-row .pill {
  grid-row: span 2;
}

@media (prefers-reduced-motion: no-preference) {
  .show-row {
    animation: fade-slide-up 420ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  .show-row:nth-child(1) {
    animation-delay: 40ms;
  }
  .show-row:nth-child(2) {
    animation-delay: 100ms;
  }
  .show-row:nth-child(3) {
    animation-delay: 160ms;
  }
  .show-row:nth-child(n + 4) {
    animation-delay: 220ms;
  }
}

@media (max-width: 479px) {
  .show-row {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .show-row__venue {
    grid-column: 1;
    margin-top: 0;
  }
  .show-row .pill {
    grid-row: auto;
    width: 100%;
    margin-top: 8px;
  }
}

/* ===== 06 — Contact ===== */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 440px;
  margin-bottom: 40px;
}

.contact-form label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
}

.contact-form input,
.contact-form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-on-dark);
  color: var(--text-on-dark);
  font: inherit;
  padding: 8px 0;
}

.contact-form textarea {
  min-height: 80px;
  resize: vertical;
}

.contact-form__error {
  color: var(--accent-on-dark);
  font-size: 13px;
}

.contact-form button {
  align-self: flex-start;
  margin-top: 8px;
}

.contact-social__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-muted-on-dark);
  margin-bottom: 12px;
}

/* Icônes seules, alignées sur une seule ligne (Révision 2026-09-05) — plus
   de nom de plateforme visible, cf. SOCIAL_ICONS dans src/icons.ts. Le
   libellé reste dans le DOM (span .visually-hidden) pour les lecteurs
   d'écran. flex-wrap: nowrap volontaire : 5 icônes tiennent sur une ligne
   même sur les plus petits écrans, pas besoin de les faire retomber. */
.contact-social__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 40px;
}

.contact-social__icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  flex: 0 0 auto;
}

.contact-social__icon svg {
  width: 20px;
  height: 20px;
}

.contact-footer {
  color: var(--text-muted-on-dark);
  font-size: 12px;
  border-top: 1px solid var(--border-on-dark);
  padding-top: 20px;
}

@media (min-width: 768px) {
  .contact-actions {
    flex-wrap: nowrap;
  }
}