/* Trois pistes pour les fiches des chanteuses : la couleur de chacune passe par --artiste. */

/* A. Le dossier : le design des fiches de chanson */
.nom-jp { margin: 6px 0 0; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: .14em; color: var(--artiste); }
.faits { grid-column: span 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: 3px; overflow: hidden; }
.faits div { padding: 16px 18px; background: var(--nuit-2); }
.faits small { display: block; margin-bottom: 4px; font-family: var(--titre); font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.faits b { font-family: var(--titre); font-size: 1.35rem; font-weight: 600; letter-spacing: .02em; color: #fff; }
.pastille { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border-radius: 50%; background: var(--artiste); vertical-align: -1px; }
.autres { grid-column: span 6; }
.autres ul { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 0; padding: 0; list-style: none; }
.autres li { text-align: center; font-family: var(--titre); font-size: 1.05rem; letter-spacing: .04em; }
.autres img { display: block; width: 72px; height: 72px; margin: 0 auto 6px; border: 2px solid var(--c); border-radius: 50%; object-fit: cover; object-position: center 20%; }

/* B. Le magazine : une couverture inventée, puis l'article */
.mag { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: 104px var(--marge) clamp(40px, 6vw, 72px); background: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--artiste) 22%, transparent), transparent 60%); }
.couverture { container-type: inline-size; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); transform: rotate(-1.2deg); }
.couverture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 16% center; }
.couverture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 22, .55) 0, transparent 26%, transparent 58%, rgba(8, 12, 22, .9) 100%); }
.masthead { position: absolute; z-index: 1; top: 3.5%; left: 5%; right: 5%; margin: 0; font: 800 25cqw/.85 var(--titre); letter-spacing: -.01em; text-transform: uppercase; color: var(--artiste); text-align: center; }
.numero { position: absolute; z-index: 1; top: 1.2%; left: 5%; right: 5%; display: flex; justify-content: space-between; margin: 0; font: 600 .82rem/1 var(--titre); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.titres-une { position: absolute; z-index: 1; left: 5%; right: 5%; bottom: 4%; margin: 0; }
.titres-une b { display: block; font: 800 clamp(2rem, 5vw, 3.6rem)/.95 var(--titre); text-transform: uppercase; color: #fff; }
.titres-une span { display: block; margin-top: 6px; font-size: clamp(.9rem, 1.4vw, 1.05rem); line-height: 1.35; color: #e4e8f0; }
.sommaire h1 { font-size: clamp(3.4rem, 8vw, 6.4rem); line-height: .95; }
.sommaire .chapeau { margin: 14px 0 26px; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.45; color: #fff; }
.sommaire ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.sommaire li { display: flex; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.sommaire li b { flex: none; width: 2.2em; font: 700 1.5rem/1 var(--titre); color: var(--artiste); }
.pleine { position: relative; min-height: min(70vh, 620px); display: flex; align-items: flex-end; overflow: hidden; }
.pleine > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pleine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 12, 22, .92) 0, transparent 60%); }
.pleine blockquote { position: relative; z-index: 1; max-width: 18em; margin: 0; padding: 0 var(--marge) clamp(28px, 4vw, 48px); font: 700 clamp(2.2rem, 5.6vw, 4.6rem)/1 var(--titre); color: #fff; }
.entrevue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); padding: clamp(36px, 5vw, 64px) var(--marge); }
.entrevue h3 { margin: 0 0 8px; font: 700 1.5rem/1.1 var(--titre); letter-spacing: .01em; color: var(--artiste); }
.entrevue p { margin: 0; }

/* C. Le passe de scène : un objet à collectionner */
.passe-page { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 64px); align-items: center; min-height: min(100vh, 860px); padding: 104px var(--marge) 56px; overflow: hidden; }
.passe-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; filter: blur(7px) brightness(.34) saturate(1.1); transform: scale(1.06); }
.passe-page > *:not(.passe-fond) { position: relative; z-index: 1; }
.passe { justify-self: center; width: min(100%, 380px); padding-top: 34px; background: #f4efe4; color: #141c2c; border-radius: 14px; box-shadow: 0 28px 70px rgba(0, 0, 0, .65); transform: rotate(-3deg); }
.passe::before { content: ""; position: absolute; top: 12px; left: 50%; width: 62px; height: 12px; margin-left: -31px; border-radius: 8px; background: var(--nuit); }
.passe-bande { display: flex; justify-content: space-between; padding: 8px 20px; background: var(--artiste-fort); color: #fff; font: 700 1rem/1 var(--titre); letter-spacing: .2em; text-transform: uppercase; }
.passe-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 20%; }
.passe-corps { padding: 16px 20px 20px; }
.passe-corps h1 { color: #141c2c; font-size: 3.1rem; line-height: .95; text-transform: uppercase; }
.passe-corps [lang="ja"] { margin: 4px 0 12px; letter-spacing: .12em; color: var(--artiste-fort); font-weight: 600; }
.passe-corps dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; margin: 0; font-size: .95rem; }
.passe-corps dt { font: 600 .92rem/1.6 var(--titre); letter-spacing: .12em; text-transform: uppercase; color: #5a6275; }
.passe-corps dd { margin: 0; font-weight: 600; }
.geant { margin: 0; font: 800 clamp(5rem, 17vw, 15rem)/.85 var(--titre); text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px var(--artiste); }
.passe-texte .chapeau { max-width: 30em; margin: 18px 0 0; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.45; color: #fff; }
.passe-texte .doux { max-width: 34em; margin-top: 12px; color: #dfe3ec; }
.parcours { padding: clamp(36px, 5vw, 64px) var(--marge) 0; }
.parcours ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--artiste); }
.parcours li { position: relative; padding: 18px 18px 0 0; }
.parcours li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--artiste); }
.parcours b { display: block; font: 700 1.5rem/1.1 var(--titre); color: #fff; }
.parcours p { margin: 6px 0 0; color: var(--doux); }
.pellicule { display: flex; gap: 10px; overflow-x: auto; padding: clamp(32px, 4vw, 48px) var(--marge); scroll-snap-type: x proximity; }
.pellicule a { flex: none; width: min(70vw, 420px); aspect-ratio: 16 / 10; overflow: hidden; scroll-snap-align: start; }
.pellicule img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 760px) {
  .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag, .passe-page { grid-template-columns: minmax(0, 1fr); }
  .passe-page { min-height: 0; }
  .passe { margin-bottom: 8px; }
  .entrevue { grid-template-columns: minmax(0, 1fr); }
  .parcours ol { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--artiste); }
  .parcours li { padding: 0 0 20px 18px; }
  .parcours li::before { top: 4px; left: -8px; }
}

/* Le mélange retenu (1er nov. 2026) : la ligne de temps s'adapte au nombre d'étapes */
.parcours ol { grid-template-columns: repeat(var(--etapes, 4), minmax(0, 1fr)); }
.pleine-marge { margin-top: clamp(36px, 5vw, 64px); }
.autres ul { gap: 18px clamp(24px, 4vw, 48px); }
.autres li a { display: block; color: #fff; font-size: 1.3rem; text-decoration: none; }
.autres li a:hover { color: var(--c); }
.autres img { width: clamp(84px, 11vw, 132px); height: clamp(84px, 11vw, 132px); }
.passe-texte .fiche-aveu { margin-top: 18px; }
@media (max-width: 760px) {
  .parcours ol { grid-template-columns: minmax(0, 1fr); }
}
.passe-fond.miroir { transform: scale(-1.06, 1.06); }
.passe-corps h1 + dl { margin-top: 12px; }
.autres li.separe { align-self: stretch; width: 2px; min-height: 84px; background: var(--trait); }
@media (max-width: 760px) {
  .autres li.separe { flex-basis: 100%; width: auto; min-height: 0; height: 2px; }
}
@media (max-width: 760px) {
  .autres ul { gap: 14px; }
  .autres img { width: 72px; height: 72px; }
}