/* ============================================================================
   PASA MUSIK — SPECTACLE À L'AFFICHE
   ----------------------------------------------------------------------------
   Deux moments, une seule identité :

     1. `.pm-show`  — l'annonce, en tête de la page d'accueil, visible sans
                      défilement. Bande sombre (--pm-ink-deep, le jeton déjà
                      prévu pour cela) : l'affiche est en noir et blanc et le
                      teaser est sur fond noir, ils y respirent.
     2. `.pm-bill`  — le développement éditorial, en tête des actualités, sur
                      le fond clair du site.

   Les deux partagent exactement la même signature : filet dégradé de la marque,
   surtitre espacé, Comfortaa, cadres de médias identiques, même bouton d'achat.

   Règles intangibles
     • L'affiche n'est JAMAIS recadrée ni déformée : `object-fit: contain`
       dans un cadre au ratio exact du fichier (1080 × 1350, soit 4/5).
       Le visage ne peut donc pas être coupé, quelle que soit la largeur.
     • Le teaser a le même ratio 4/5 : les deux médias forment un diptyque
       régulier, de l'ordinateur au téléphone.
     • Aucun décalage de mise en page : chaque média réserve sa place
       (`aspect-ratio` + attributs width/height).
   ========================================================================== */

/* ===========================================================================
   JETONS PROPRES AU SPECTACLE
   =========================================================================== */

.pm-show,
.pm-bill {
  --pms-ratio:     4 / 5;                /* ratio de l'affiche ET du teaser */
  --pms-frame:     16px;                 /* arrondi des cadres de médias */
  --pms-buy:       #d23717;              /* = --pm-secondary assombri :
                                            blanc sur ce fond passe AA (4.9:1) */
  --pms-buy-hover: #EF4424;              /* = --pm-secondary */
}

/* ===========================================================================
   1. L'ANNONCE — EN TÊTE DE LA PAGE D'ACCUEIL
   =========================================================================== */

.pm-show {
  position: relative;
  isolation: isolate;
  background: var(--pm-ink-deep, #06161d);
  color: #fff;
  overflow: hidden;
}

/* Halo chaud très discret : la bande sombre ne doit pas être un aplat mort.
   Même intention que le halo du voile d'ouverture. */
.pm-show::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 72% 18%, rgba(243, 175, 32, .13) 0%, rgba(243, 175, 32, 0) 62%),
    radial-gradient(80% 80% at 8% 92%, rgba(28, 111, 184, .16) 0%, rgba(28, 111, 184, 0) 60%);
  pointer-events: none;
}

/* Le filet de la marque signe le haut et le bas de la bande. */
.pm-show::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--pm-brand-bar, linear-gradient(90deg, #F3AF20, #EF4424, #8B4A7D, #1C6FB8));
  pointer-events: none;
}

.pm-show__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(32px, 4.4vw, 68px);
  row-gap: clamp(18px, 2vw, 26px);
  /* L'annonce tient dans la première vue, en-tête collant déduit.
     `svh` évite le saut provoqué par les barres des navigateurs mobiles. */
  min-height: calc(100vh - 104px);
  min-height: calc(100svh - 104px);
  padding-block: clamp(28px, 4vw, 56px);
}

.pm-show__head  { grid-column: 1; grid-row: 1; align-self: end; }
.pm-show__body  { grid-column: 1; grid-row: 2; align-self: start; }
.pm-show__media { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* --- Textes -------------------------------------------------------------- */

.pm-show__accent {
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 3px;
  margin-bottom: clamp(16px, 2vw, 22px);
  background: var(--pm-brand-bar, linear-gradient(90deg, #F3AF20, #EF4424, #8B4A7D, #1C6FB8));
}

.pm-show__eyebrow {
  display: block;
  margin: 0 0 clamp(10px, 1.4vw, 16px);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .64);
}

.pm-show__name {
  margin: 0;
  font-size: clamp(38px, 6.6vw, 84px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
  color: #fff;
}

.pm-show__title {
  display: block;
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  color: var(--pm-accent, #F3AF20);
}

.pm-show__kind {
  display: block;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* --- Informations de l'affiche ------------------------------------------- */
/* Date, heure et lieu : lus sur l'affiche officielle, rien n'est ajouté. */

.pm-show__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(14px, 1.8vw, 26px);
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  padding: 0;
  list-style: none;
}

.pm-show__fact {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: clamp(14px, 1.15vw, 15.5px);
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
}

.pm-show__fact svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--pm-accent, #F3AF20);
}

.pm-show__fact b {
  font-weight: 700;
  color: #fff;
}

.pm-show__fact span {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .58);
}

.pm-show__lead {
  max-width: 46ch;
  margin: 0 0 clamp(22px, 2.6vw, 30px);
  font-size: clamp(14.5px, 1.2vw, 16px);
  line-height: 1.75;
  color: rgba(255, 255, 255, .74);
}

/* --- Boutons ------------------------------------------------------------- */

.pm-show__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* On hérite de `.pm-btn` (forme, rythme, transitions du site) et on ne
   redéfinit que ce qu'impose le fond sombre. */
.pm-show .pm-btn--buy,
.pm-bill .pm-btn--buy {
  background: var(--pms-buy);
  color: #fff;
  border-color: transparent;
}

.pm-show .pm-btn--buy:hover,
.pm-show .pm-btn--buy:focus-visible,
.pm-bill .pm-btn--buy:hover,
.pm-bill .pm-btn--buy:focus-visible {
  background: var(--pms-buy-hover);
  color: #fff;
}

.pm-show .pm-btn--ondark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .30);
}

.pm-show .pm-btn--ondark:hover,
.pm-show .pm-btn--ondark:focus-visible {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .72);
  color: #fff;
}

/* Le second bouton pointe vers le bas de la page : la flèche descend au
   survol, au lieu de glisser à droite comme les liens de navigation. */
.pm-show .pm-btn--ondark:hover svg,
.pm-show .pm-btn--ondark:focus-visible svg { transform: translateY(3px); }

.pm-show .pm-btn:focus-visible,
.pm-bill .pm-btn:focus-visible {
  outline: 2px solid var(--pm-accent, #F3AF20);
  outline-offset: 3px;
}

/* ===========================================================================
   2. LE DIPTYQUE DE MÉDIAS — AFFICHE + TEASER
   =========================================================================== */
/* Affiche et teaser ont le même ratio : la composition reste régulière à
   toutes les largeurs, et aucun des deux n'est jamais recadré. */

.pm-show__media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
  align-items: start;
  gap: clamp(12px, 1.6vw, 22px);
}

/* Le teaser descend légèrement : la composition respire au lieu de s'aligner
   comme une galerie. */
.pm-show__media .pm-frame--teaser { margin-top: clamp(26px, 5vw, 64px); }

/* --- Cadre commun -------------------------------------------------------- */

.pm-frame {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: var(--pms-ratio);
  border-radius: var(--pms-frame);
  overflow: hidden;
  background: #0d1f27;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .46);
}

/* Liseré clair : détache le média du fond sombre sans ajouter de bordure
   dure. Sur fond clair, il est redéfini plus bas. */
.pm-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
  pointer-events: none;
}

/* `contain` : l'affiche est montrée EN ENTIER. Le visage de Mehdi Cayenne ne
   peut pas être coupé, et le fichier n'est jamais étiré. */
.pm-frame > img,
.pm-frame > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --- Le teaser ----------------------------------------------------------- */

.pm-frame--teaser { background: #000; }

/* Variante paysage : une vidéo 16/9 garde son format dans le même cadre.
   Utilisée dans les articles, où la mise en page est en pleine largeur. */
.pm-frame--wide { --pms-ratio: 16 / 9; }

.pm-frame--teaser video {
  opacity: 0;
  transition: opacity .6s var(--pm-ease, cubic-bezier(.22, .61, .36, 1));
}

.pm-frame--teaser.is-ready video { opacity: 1; }

/* L'image de repli reste visible tant que la vidéo n'est pas prête — et pour
   toujours si la lecture est impossible (navigateur, économie de données,
   mouvement réduit). Aucun trou noir dans la composition. */
.pm-frame__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .6s var(--pm-ease, cubic-bezier(.22, .61, .36, 1));
}

.pm-frame--teaser.is-ready .pm-frame__fallback { opacity: 0; }

/* Étiquette du teaser : discrète, jamais sur un visage. */
.pm-frame__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(6, 22, 29, .62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  pointer-events: none;
}

.pm-frame__tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pm-secondary, #EF4424);
}

/* Bouton son / lecture, en haut à droite du teaser.
   La classe est doublée — idiome déjà utilisé dans la refonte — pour passer
   devant les styles de boutons du thème, qui imposent sinon leur fond de
   couleur, leur bordure et leurs marges internes. */
.pm-frame__ctl.pm-frame__ctl {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: none;                      /* activé par le script seulement */
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  background: rgba(6, 22, 29, .58);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, transform .25s;
}

.pm-frame__ctl.pm-frame__ctl.is-on { display: grid; }
.pm-frame__ctl.pm-frame__ctl:hover { background: rgba(6, 22, 29, .86); border-color: rgba(255, 255, 255, .6); }
.pm-frame__ctl.pm-frame__ctl:focus-visible { outline: 2px solid var(--pm-accent, #F3AF20); outline-offset: 2px; }
.pm-frame__ctl svg { width: 15px; height: 15px; }

/* L'icône montre l'état courant : haut-parleur barré tant que le teaser est
   muet, haut-parleur actif une fois le son rétabli. */
.pm-frame__ctl .pm-ico--loud { display: none; }
.pm-frame__ctl[aria-pressed="true"] .pm-ico--muted { display: none; }
.pm-frame__ctl[aria-pressed="true"] .pm-ico--loud  { display: block; }

/* Dès que les commandes natives sont rendues (lecture demandée, avec son),
   elles remplacent nos propres repères : rien ne se superpose. */
.pm-frame.is-controls .pm-frame__tag,
.pm-frame.is-controls .pm-frame__ctl.pm-frame__ctl { display: none; }

/* Grande pastille de lecture, quand la lecture automatique n'a pas lieu
   (téléphone, économie de données, mouvement réduit) : le teaser reste
   accessible d'un geste. */
.pm-frame__play.pm-frame__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #fff;
}

.pm-frame--manual .pm-frame__play.pm-frame__play { display: grid; }

.pm-frame__play i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(6, 22, 29, .54);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .34);
  transition: transform .3s var(--pm-ease, cubic-bezier(.22, .61, .36, 1)), background-color .3s;
}

.pm-frame__play.pm-frame__play:hover i { transform: scale(1.07); background: rgba(6, 22, 29, .78); }
.pm-frame__play.pm-frame__play:focus-visible i { outline: 2px solid var(--pm-accent, #F3AF20); outline-offset: 3px; }
.pm-frame__play svg { width: 20px; height: 20px; margin-left: 2px; }

/* ===========================================================================
   3. LE DÉVELOPPEMENT ÉDITORIAL — EN TÊTE DES ACTUALITÉS
   =========================================================================== */

.pm-bill { background: var(--pm-surface, #fff); }

.pm-bill .pm-section { padding-block: var(--pm-s7, 88px) var(--pm-s6, 64px); }

.pm-bill__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(28px, 3.4vw, 48px);
}

/* L'affiche, en grand, entière. */
.pm-bill__poster.pm-frame {
  background: var(--pm-surface-2, #f6fafb);
  box-shadow: 0 26px 70px rgba(11, 37, 48, .14);
}

.pm-bill__poster.pm-frame::after {
  box-shadow: inset 0 0 0 1px rgba(11, 37, 48, .08);
}

.pm-bill__side {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
}

/* Informations pratiques : une liste de définitions, lisible et balisée. */
.pm-bill__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px clamp(18px, 2vw, 28px);
  margin: 0;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--pm-line, #e3ebee);
  border-radius: var(--pm-radius, 14px);
  background: var(--pm-surface-2, #f6fafb);
}

.pm-bill__facts > div { padding-block: 6px; }

.pm-bill__facts dt {
  margin: 0 0 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pm-ink-3, #6b7f88);
}

.pm-bill__facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pm-ink, #0b2530);
}

.pm-bill__facts dd small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--pm-ink-2, #3f5560);
}

.pm-bill__text {
  max-width: 58ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--pm-ink-2, #3f5560);
}

/* Le teaser, à revoir quand on veut : cadre identique à celui de l'annonce,
   largeur réduite — la composition reste asymétrique. */
.pm-bill__teaser {
  display: grid;
  grid-template-columns: minmax(0, 236px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
}

.pm-bill__teaser .pm-frame { box-shadow: 0 18px 50px rgba(11, 37, 48, .22); }

.pm-bill__caption {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pm-ink-3, #6b7f88);
}

.pm-bill__caption b {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pm-ink-2, #3f5560);
}

.pm-bill__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ===========================================================================
   4. RESPONSIVE
   =========================================================================== */

@media (max-width: 1200px) {
  .pm-show__inner { column-gap: clamp(26px, 3.4vw, 44px); }
  .pm-show__media { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); }
}

/* Ordinateurs portables peu hauts (1280 × 800, 1440 × 820…) : l'en-tête du
   site y prend deux rangées. On resserre pour que les deux boutons restent
   visibles sans défiler. */
@media (min-width: 1025px) and (max-height: 900px) {
  .pm-show__inner  { padding-block: clamp(18px, 2.2vw, 34px); }
  .pm-show__name   { font-size: clamp(34px, 5vw, 64px); }
  .pm-show__title  { margin-top: 12px; }
  .pm-show__lead   { margin-bottom: 20px; }
  .pm-show__facts  { margin-bottom: 20px; }
  .pm-show__media  { max-width: 94%; margin-left: auto; }
  .pm-show__media .pm-frame--teaser { margin-top: clamp(20px, 3.4vw, 46px); }
}

@media (min-width: 1025px) and (max-height: 760px) {
  .pm-show__inner { min-height: 0; }
  .pm-show__lead  { display: none; }
  .pm-show__media { max-width: 78%; }
}

@media (max-width: 1024px) {
  /* Une seule colonne : titre, puis médias, puis informations et boutons.
     L'ordre du document est déjà celui-là — rien à réordonner. */
  .pm-show__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-items: start;
    row-gap: clamp(20px, 3vw, 30px);
    min-height: 0;
    padding-block: clamp(30px, 5vw, 52px);
  }

  .pm-show__head  { grid-column: 1; grid-row: 1; align-self: start; }
  .pm-show__media { grid-column: 1; grid-row: 2; }
  .pm-show__body  { grid-column: 1; grid-row: 3; }

  .pm-show__media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.58fr);
    max-width: 560px;
  }

  .pm-show__media .pm-frame--teaser { margin-top: clamp(18px, 4vw, 40px); }

  .pm-bill__grid { grid-template-columns: 1fr; }

  .pm-bill__poster.pm-frame {
    max-width: 440px;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  /* Objectif : l'annonce entière — nom, affiche, teaser, date, lieu et le
     bouton d'achat — tient dans la première vue d'un téléphone courant,
     barres du navigateur comprises. Chaque valeur ci-dessous est serrée
     pour cela, sans jamais rapetisser l'affiche au point de la rendre
     illisible. */
  .pm-show__inner {
    row-gap: 14px;
    padding-block: 20px 26px;
  }

  /* Le diptyque reste côte à côte : les deux médias tiennent dans la
     première vue, et l'affiche garde une taille où le visage se lit. */
  .pm-show__media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.56fr);
    gap: 10px;
    max-width: none;
  }

  .pm-show__media .pm-frame--teaser { margin-top: 18px; }

  .pm-show__name  { line-height: 1; }
  .pm-show__title { margin-top: 10px; }
  /* Le genre tient sur une seule ligne : deux lignes coûteraient la hauteur
     du bouton d'achat. */
  .pm-show__kind  { margin-top: 5px; font-size: 10px; letter-spacing: .09em; }
  .pm-show__lead  { display: none; }       /* l'essentiel d'abord : le reste
                                              est développé plus bas */
  .pm-show__facts { gap: 8px 16px; margin-bottom: 14px; }

  .pm-show__actions { gap: 10px; }
  .pm-show__actions .pm-btn { flex: 1 1 100%; justify-content: center; }

  .pm-frame { --pms-frame: 13px; }
  .pm-frame__ctl.pm-frame__ctl { width: 30px; height: 30px; top: 7px; right: 7px; }
  .pm-frame__ctl svg { width: 13px; height: 13px; }
  .pm-frame__tag { left: 7px; bottom: 7px; padding: 4px 8px; font-size: 8.5px; }
  .pm-frame__play i { width: 44px; height: 44px; }

  .pm-bill__teaser {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .pm-bill__teaser .pm-frame { max-width: 230px; }

  .pm-bill__actions .pm-btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .pm-show__name    { font-size: clamp(31px, 9vw, 40px); }
  .pm-show__accent  { margin-bottom: 12px; }
  .pm-show__facts   { flex-direction: column; gap: 7px; }
  .pm-bill__facts   { grid-template-columns: 1fr; }
}

/* Écrans peu hauts (téléphones compacts, et tout téléphone dont la barre
   d'adresse est déployée) : on resserre encore, pour que le bouton d'achat
   reste au-dessus de la ligne de flottaison. */
@media (max-width: 767px) and (max-height: 880px) {
  .pm-show__inner  { padding-block: 16px 22px; row-gap: 12px; }
  .pm-show__media  { max-width: 84%; }
  .pm-show__title  { margin-top: 8px; font-size: 14px; }
  .pm-show__kind   { display: none; }
  .pm-show__facts  { margin-bottom: 12px; }
  .pm-show__actions { gap: 8px; }
}

@media (max-width: 767px) and (max-height: 700px) {
  .pm-show__name   { font-size: clamp(26px, 7.4vw, 34px); }
  .pm-show__media  { max-width: 70%; }
}

/* ===========================================================================
   5. MOUVEMENT RÉDUIT
   =========================================================================== */
/* Aucune lecture automatique, aucun survol qui déplace : le teaser reste
   disponible, mais c'est la personne qui le déclenche. */

@media (prefers-reduced-motion: reduce) {
  .pm-frame--teaser video { transition: none; }
  .pm-frame__fallback     { transition: none; }
  .pm-frame__play.pm-frame__play:hover i { transform: none; }
}

/* ===========================================================================
   6. ACCORD AVEC L'OUVERTURE DE MARQUE
   =========================================================================== */
/* L'annonce se pose en même temps que le reste de la page d'accueil, au moment
   exact où le voile du logo s'efface. Même animation, même retard. */

html.pm-intro-on .pm-show {
  animation: pm-intro-settle 1400ms cubic-bezier(.16, 1, .3, 1) 1500ms both;
}

@media (prefers-reduced-motion: reduce) {
  html.pm-intro-on .pm-show { animation: none; }
}