/* ==========================================================================
   Pages — Page-specific styles
   ========================================================================== */

/* =========================
   Site Header — Banner logo + subtitle (always visible)
   ========================= */
.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    transition: var(--transition-color);
    padding: var(--space-section) var(--container-padding) 0;
    text-align: center;
}

.header-logo-link {
    display: block;
    text-align: center;
}

/* Conteneur du logo : <h1> sur l'accueil, <div> ailleurs — même rendu dans les deux cas. */
.header-logo-title {
    display: block;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: normal;
}

.header-logo {
    max-width: 280px;
    width: 50vw;
    height: auto;
    filter: var(--logo-filter);
    transition: filter var(--transition-normal);
}

.header-subtitle {
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-muted);
    margin: var(--space-sm) 0 0 0;
    text-align: center;
}

@media (max-width: 768px) {
    .header-logo {
        max-width: 200px;
        width: 55vw;
    }

    .site-header {
        padding: var(--space-section) var(--container-padding) 0;
    }
}

/* =========================
   Nav Section (Homepage — below bands)
   ========================= */
.nav-section {
    padding: var(--space-section) var(--container-padding) 0;
    background-color: var(--color-bg);
    transition: var(--transition-color);
}

.nav-section__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--grid-gap);
    max-width: var(--container-max);
    margin: 0 auto;
}

.nav-section__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-section) var(--space-sm);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: var(--transition-color), border-color var(--transition-normal);
}

.nav-section__item:hover {
    border-color: var(--color-text);
    opacity: 1;
    background-color: var(--color-hover);
}

.nav-section__title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.nav-section__desc {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* =========================
   About Page
   ========================= */
.about-description {
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 800px;
}

.mixes-section {
    margin-top: var(--space-section);
}

.mix-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-section) 0;
    border-bottom: 1px solid var(--color-border);
}

.mix-item__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-align: center;
}

.mix-item__player {
    width: 100%;
}

.mix-item__player audio {
    width: 100%;
}

.mix-item__download {
    align-self: flex-start;
}

/* =========================
   Studio Page
   ========================= */
.service-card {
    padding: var(--space-section);
    border: 1px solid var(--color-border);
    transition: var(--transition-color);
}

.services-grid {
    display: grid;
    gap: 20px;
}

.service-card__title {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.service-card__desc {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.studio-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-section);
}

.studio-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* =========================
   Contact Page
   ========================= */
.contact-departments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--grid-gap);
}

.department {
    padding: var(--space-section);
    border: 1px solid var(--color-border);
    transition: var(--transition-color);
}

.department__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin-bottom: var(--space-xs);
}

.department__name {
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.department__email {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* =========================
   Single Artiste
   ========================= */
.artist-hero {
    width: 100%;
    max-height: 500px;
    overflow: hidden;
}

.artist-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 500px;
}

.artist-content {
    max-width: 900px;
}

.artist-bio {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* =========================
   Single Page Hero Banner
   ========================= */
.single-hero {
    background-color: #000000;
    color: #ffffff;
    padding-top: 15px ;
   
}

html.dark-mode .single-hero {
    background-color: #100607;
}

.single-hero h1 {
    color: #ffffff;
    margin-bottom: 00px;
}

/* Page visuel : titre de l'album centré par rapport à la fenêtre.
   Le .container est déjà centré (margin auto) → centrer le texte le centre dans la fenêtre. */
.single-hero--centered {
    text-align: center;
}

.single-hero__subtitle {
    font-size: 0.95rem;
    color: #cccccc;
    margin-bottom: 15px;
}
.single-hero__tags-label{}


.single-hero__tags {
    display: flex;
    flex-direction: column; /* empile verticalement */
    align-items: flex-start; /* ou center si tu veux centrer */
    gap: 10px;
}
.single

.single-hero__tags p {
    padding-bottom: 6px;
    margin: 0;
}

.single-hero__tags {
    display: flex;

    gap: 10px;
    flex-wrap: nowrap;
}
.single-hero__tags-label {
    white-space: nowrap; /* évite le retour à la ligne */
}

/* =========================
   Single Content Layout (Artiste + Release)
   PHOTO (LEFT) + TEXT (RIGHT)
   ========================= */
.single-content-layout {
    background-color: transparent;
    padding: 20px 0;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    width: 100%;
}

.content-photo {
    width: 100%;
}

.content-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    height: auto;
    margin: 0;
    padding: 0;
}

.content-image--placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: var(--color-border);
    border-radius: 4px;
    display: block;
    margin: 0;
    padding: 0;
}

/* Release cover: natural square ratio, no forced crop, same width as artiste photo */
.content-image--natural {
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0;
    padding: 0;
}

.content-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.content-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.content-section h2,
.content-section h3 {
    margin: 0;
    margin-bottom: 8px;
}

.content-section p {
    margin: 0;
    line-height: 1.8;
}

.content-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.content-links a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.95rem;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.content-links a:hover {
    color: var(--color-text-secondary);
}

.content-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Métadonnées en deux colonnes partagées par toutes les lignes.

   La grille parente fixe la colonne des libellés sur le plus long d'entre
   eux (max-content) ; chaque ligne hérite de ce tracé par subgrid. Les
   valeurs forment donc une vraie colonne, quel que soit le libellé : avec
   l'ancien min-width de 100 px, « Also on this release » débordait et
   repoussait sa valeur 60 px plus loin que les autres. */
.content-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 12px;
    row-gap: 12px;
}

.meta-item {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    column-gap: 12px;

    /* Libellé en 0,7 rem, valeur en 1 rem : calés en haut, leurs lignes de base
       ne coïncident pas et le libellé semble flotter. La ligne de base les
       remet sur la même ligne, malgré la différence de corps. */
    align-items: baseline;

    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.meta-item:last-child {
    border-bottom: none;
}

.meta-label {
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    /* Plus de min-width : la largeur vient de la colonne de grille partagée. */
}

/* Responsive */
@media (max-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .content-image {
        max-width: 300px;
        margin: 0 auto;
    }
}

.artiste-photo--placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: var(--color-border);
    border-radius: 4px;
}

/* Bio + Info below photo (2 columns) */
.single-artiste-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.single-artiste-bio-col {
    width: 100%;
}

.single-artiste-info-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.single-artiste-bio h2,
.artiste-social h3,
.artiste-types h3 {
    margin-bottom: 12px;
}

.single-artiste-bio p {
    margin-bottom: 16px;
    line-height: 1.8;
}

.social-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.social-links-list a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.social-links-list a:hover {
    color: var(--color-text-secondary);
}

.artiste-types-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .single-artiste-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .artiste-photo {
        max-width: 300px;
        margin: 0 auto;
    }
}


/* =========================
   Release Inline Player (Bandcamp-style)
   ========================= */
.release-player__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    transition: var(--transition-color);
    overflow: hidden;
}

/* Cover side */
.release-player__cover {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.release-player__artwork {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.release-player__artwork--placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-border);
}

.release-player__play-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-sm);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-label);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.release-player__play-all:hover {
    background-color: var(--color-hover);
}

.release-player__play-all svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Tracks side */
.release-player__tracks {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.release-player__header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm) var(--space-sm) var(--space-xs);
    border-bottom: 1px solid var(--color-border);
}

.release-player__album-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.1;
}

.release-player__album-artist {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.release-player__album-artist a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.release-player__album-artist a:hover {
    color: var(--color-text);
}

/* Tracklist */
.release-tracklist {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
}

.release-tracklist__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 0.85rem;
    transition: background-color var(--transition-fast);
    cursor: default;
}

.release-tracklist__item:last-child {
    border-bottom: none;
}

.release-tracklist__item--playable {
    cursor: pointer;
}

.release-tracklist__item--playable:hover {
    background-color: var(--color-hover);
}

.release-tracklist__item--active {
    background-color: var(--color-hover);
}

.release-tracklist__play-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.release-tracklist__play-icon svg {
    width: 18px;
    height: 18px;
    color: var(--color-text);
}

.release-tracklist__num {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.release-tracklist__title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-label);
    font-size: 0.8rem;
}

.release-tracklist__duration {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
}

/* Icône play : visible au repos, renforcée au survol.

   Elle était masquée par défaut, censée laisser la place au numéro de piste et
   n'apparaître qu'au survol. Mais le numéro n'est rendu que pour les pistes
   SANS audio (voir single-release.php) : sur une piste jouable la case restait
   donc vide, et rien n'indiquait que la ligne était lisible. Au tactile, où le
   survol n'existe pas, le contrôle était purement et simplement inatteignable.

   Les règles .release-tracklist__num pour les pistes jouables étaient du code
   mort pour la même raison — supprimées. */
.release-tracklist__item--playable .icon-play {
    display: block;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.release-tracklist__item--playable:hover .icon-play,
.release-tracklist__item--playable:focus-within .icon-play,
.release-tracklist__item--active .icon-play {
    opacity: 1;
}

.release-tracklist__item--active.is-playing .icon-play {
    display: none;
}

.release-tracklist__item--active.is-playing .icon-pause {
    display: none !important;
}

/* Equalizer animation */
@keyframes md-eq-bar {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

.icon-eq {
    display: none;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    width: 18px;
    height: 18px;
}

.icon-eq span {
    display: block;
    width: 3px;
    background-color: var(--color-text);
    transform-origin: bottom;
    animation: md-eq-bar 0.8s ease-in-out infinite;
}

.icon-eq span:nth-child(1) {
    height: 60%;
    animation-duration: 0.6s;
}

.icon-eq span:nth-child(2) {
    height: 100%;
    animation-duration: 0.8s;
    animation-delay: 0.15s;
}

.icon-eq span:nth-child(3) {
    height: 75%;
    animation-duration: 0.7s;
    animation-delay: 0.3s;
}

.release-tracklist__item--active.is-playing .icon-eq {
    display: flex;
}

/* Current time */
.release-tracklist__current-time {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
    min-width: 32px;
    text-align: right;
}

/* Bouton file d'attente : toujours visible, discret au repos.
   Il était à opacity 0 et ne se révélait qu'au survol de la ligne — invisible
   pour qui ne survole pas, et définitivement invisible au tactile.

   Le token utilisé est --color-text et non --color-text-muted : à 0.45
   d'opacité, le muted plafonnait à 1.88:1 en thème clair et 2.19:1 en sombre,
   sous le seuil WCAG de 3:1 exigé pour un composant d'interface. Le réglage
   actuel donne 3.9:1 en clair et 5.0:1 en sombre. */
.release-tracklist__queue-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-text);
    opacity: 0.5;
    transition: opacity var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.release-tracklist__item--playable:hover .release-tracklist__queue-btn {
    opacity: 0.8;
}

.release-tracklist__queue-btn:hover,
.release-tracklist__queue-btn:focus-visible {
    opacity: 1 !important;
    color: var(--color-text);
}

.release-tracklist__queue-btn.queued {
    opacity: 1;
    color: var(--color-text);
}

/* Per-track progress bar */
.release-tracklist__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-border);
    cursor: pointer;
}

.release-tracklist__progress-fill {
    height: 100%;
    width: 0%;
    background-color: var(--color-text);
}

.release-tracklist__progress:hover {
    height: 4px;
}

/* Responsive */
@media (max-width: 640px) {
    .release-player__layout {
        grid-template-columns: 1fr;
    }

    .release-player__artwork {
        max-width: 100%;
    }

    .release-player__cover {
        max-width: 300px;
        margin: 0 auto;
        width: 100%;
    }

    .release-tracklist__current-time {
        font-size: 0.65rem;
        min-width: 26px;
    }

    .release-tracklist__duration {
        font-size: 0.65rem;
        min-width: 30px;
    }
}

/* =========================
   Single Release (Uniform Layout)
   ========================= */
.single-release-info {
    background-color: transparent;
    padding: 20px 0;
}

.release-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.release-meta__item {
    display: flex;
    gap: var(--space-sm);
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.release-meta__item:last-child {
    border-bottom: none;
}

.release-meta__item .label {
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    min-width: 100px;
}

.release-meta__item span:last-child {
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.single-release-info .btn {
    margin-top: 20px;
}

    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.release-meta-label {
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    min-width: 120px;
}

.release-meta-value {
    font-family: var(--font-body);
    font-size: 0.85rem;
}

/* --- Tracklist --- */
.tracklist {
    margin-top: var(--space-section);
}

.tracklist__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-section);
}

.track-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
    transition: background-color var(--transition-fast);
}

.track-item:hover {
    background-color: var(--color-hover);
}

.track-number {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    min-width: 28px;
    text-align: center;
}

.track-title {
    font-family: var(--font-label);
    font-size: 0.8rem;
    flex: 1;
}

.track-duration {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    min-width: 40px;
    text-align: right;
}

.track-play-btn,
.track-queue-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.track-play-btn:hover,
.track-queue-btn:hover {
    opacity: 1;
}

.track-play-btn svg,
.track-queue-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* =========================
   Footer (Isolated Widget)
   ========================= */
/* Footer collé tout en bas, juste au-dessus du lecteur fixe, même sur les pages
   courtes. Le dégagement du lecteur est assuré par le padding-bottom du body
   (mobile.css) — ne PAS ré-ajouter padding-bottom:var(--player-height) ici,
   sinon double espace et le footer décolle du player. */
body { display: flex; flex-direction: column; min-height: 100vh; }
#content { flex: 1 0 auto; }

.site-footer {
    flex-shrink: 0;
    background-color: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    padding: 8px 0;
    transition: var(--transition-color);
    color: var(--footer-text);
    box-sizing: border-box;
    width: 100%;
}

.footer-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 6px var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    width: 100%;
}

.footer-email {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--footer-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-normal);
}

.footer-email:hover {
    color: var(--footer-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-logo img {
    height: 36px;
    width: auto;
    filter: var(--logo-filter);
    transition: filter var(--transition-normal);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links a {
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--footer-text-muted);
}

.footer-links a:hover {
    color: var(--footer-text);
}

.footer-copyright {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--footer-text-muted);
    white-space: nowrap;
    margin: 0;
}

/* =========================
   404 Page
   ========================= */
.page-404 {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-section);
}

.page-404 h1 {
    margin-bottom: var(--space-sm);
}

.page-404 p {
    font-family: var(--font-label);
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-section);
}

/* =========================
   Page Header (shared for interior pages)
   ========================= */
.page-header {
    padding: 20px 0;
    text-align: center;
}

.page-header h1 {
    padding: 0;
    margin: 0;
}

.page-header .subtitle {
    color: var(--color-text-muted);
}

/* ==========================================================================
   Champs ACF supplémentaires (rendu générique)
   ========================================================================== */
.single-extra {
    padding: 40px 0;
}
.md-extra-fields__title {
    margin: 0 0 20px;
}
.md-extra-fields__list {
    display: grid;
    grid-template-columns: minmax(120px, 220px) 1fr;
    gap: 8px 24px;
    margin: 0;
}
.md-extra-fields__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    margin: 0;
}
.md-extra-fields__value {
    margin: 0;
}
.md-extra-fields__value p:first-child {
    margin-top: 0;
}
.md-extra-fields__value img {
    border-radius: 4px;
}
@media (max-width: 600px) {
    .md-extra-fields__list {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .md-extra-fields__label {
        margin-top: 12px;
    }
}

/* ==========================================================================
   Gabarits génériques (single.php / archive.php — CPT UI)
   ========================================================================== */
.single-hero__kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0 0 4px;
}
.card-generic {
    display: block;
}
.card-generic__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.card-generic__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-text-muted, #ccc);
    margin-bottom: 10px;
}
.card-generic__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-generic__media--placeholder {
    opacity: 0.15;
}
.card-generic__title {
    margin: 0 0 4px;
}
.card-generic__excerpt {
    color: var(--color-text-muted);
    margin: 0;
    font-size: 0.9rem;
}
.archive-pagination {
    margin-top: 40px;
    text-align: center;
}

/* ==========================================================================
   Gigs / Concerts (fiche artiste) — Upcoming gigs + Past events
   ========================================================================== */
.single-gigs .container {
    display: grid;
    gap: var(--space-xl);
}
@media (min-width: 900px) {
    .single-gigs .container {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}
.gigs-block h2 {
    margin-bottom: var(--space-md);
}
.gig-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gig {
    display: grid;
    grid-template-columns: 6.5rem 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-border);
}
.gig-list li:last-child {
    border-bottom: 1px solid var(--color-border);
}
.gig__date {
    font-family: var(--font-label);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text);
}
.gig__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.gig__venue {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.2;
}
.gig__city {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.gig__link {
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--color-text);
    padding: 0.35rem 0.9rem;
    white-space: nowrap;
    transition: var(--transition-color);
}
.gig__link:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
}
.gigs-block--past .gig {
    opacity: 0.65;
}
@media (max-width: 480px) {
    .gig {
        grid-template-columns: 1fr auto;
        row-gap: 4px;
    }
    .gig__date {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   Studio — Carrousel des Services (photo → points → détails)
   ========================================================================== */
/* L'image à la largeur du CONTENU (même marge de page que le texte / l'ancienne bannière).
   Flèches déplacées SOUS l'image → l'image remplit tout le conteneur, sans rognage ni décalage. */
.slider-photos {
    position: relative;
}
.slider-photos__viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}
.slider-photos__track {
    display: flex;
    transition: transform var(--transition-normal);
}
.slide-photo {
    flex: 0 0 100%;
    min-width: 0;
}
.slide-photo img,
.slide-photo__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1200 / 500; /* bannière 1200×500 */
    object-fit: cover;
}
.slide-photo__placeholder {
    background-color: var(--color-border);
}
/* Barre de navigation SOUS l'image : flèches + points sur une même ligne, centrés. */
.slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: var(--space-md) 0;
}
/* Flèches à côté des points (jamais sur l'image → l'image reste pleine largeur). */
.slider-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    transition: var(--transition-color);
}
.slider-arrow:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
}
.slider-dots .dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--color-text);
    background-color: transparent;
    cursor: pointer;
    transition: var(--transition-color);
}
.slider-dots .dot:hover {
    background-color: var(--color-text-muted);
}
.slider-dots .dot.active {
    background-color: var(--color-text);
}

.slider-details {
    text-align: center;
}
.slide-detail {
    display: none;
}
.slide-detail.active {
    display: block;
    animation: md-slide-fade 0.35s ease;
}
/* Titre du service, affiché AU-DESSUS de la description (centré).
   « Mango Dragon Studio » (1re diapo) est le H1 de la page, les services des H2 :
   même apparence quel que soit le niveau. */
.slide-detail h1,
.slide-detail h2,
.slide-detail h3 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0 0 var(--space-md);
}
.slide-detail p {
    font-size: 1.35rem;
    line-height: 1.6;
    max-width: 820px;
    margin: 0 auto;
}
.slide-detail .service-features {
    display: inline-block;
    text-align: left;
    margin-top: var(--space-md);
}
@keyframes md-slide-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .slider-photos__track { transition: none; }
    .slide-detail.active { animation: none; }
}

/* ==========================================================================
   Page Visuals — galerie de photos (CPT « visual »)
   Même format que les cartes Artistes : recadrage fixe 4/5, grille 3/2/1.
   ========================================================================== */
.card-visual {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    background-color: var(--color-surface);
    cursor: pointer;
}

.card-visual__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-normal);
}

.card-visual:hover .card-visual__image {
    transform: scale(1.03);
}

.card-visual__overlay {
    position: absolute;
    inset: 0;
    background: var(--color-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.card-visual:hover .card-visual__overlay {
    opacity: 1;
}

.card-visual__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--color-beige);
}

.card-visual__artist {
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-beige);
    margin-top: var(--space-2xs);
    opacity: 0.7;
}

/* ==========================================================================
   Page Visual — collection de photos (bloc Galerie natif) + lightbox
   ========================================================================== */
/* Texte descriptif du visuel : entre le grand titre et la collection (centré). */
.visual-intro {
    /* 24px au-dessus (sous le bandeau titre) / 32px en dessous : respiration standard
       (tokens du site) entre la description et la grille d'images. */
    padding: var(--space-md) 0 var(--space-lg);
    text-align: center;
}
.visual-intro__text {
    max-width: none;
    margin: 0;
    font-family: var(--font-body);
    line-height: 1.7;
    text-align: justify;

    /* Césure indispensable ici : le corps de texte est en DM Mono, une police à
       chasse fixe. Sans elle, la justification ne peut étirer que les espaces —
       tous les caractères faisant la même largeur — et creuse des trous
       irréguliers entre les mots. En autorisant la coupure en fin de ligne, le
       navigateur répartit bien mieux et les écarts restent discrets.
       Fonctionne grâce au lang="en-GB" posé sur <html> par le thème. */
    hyphens: auto;
    -webkit-hyphens: auto;
    text-justify: inter-word;
}
.visual-intro__text p {
    margin: 0;
}

/* Trait de séparation entre la description et la collection d'images. */
.visual-collection__by {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.5vw, 3.4rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
    text-align: center;
    color: var(--color-text);
    margin: var(--space-md) 0 var(--space-sm);
}

/* Le nom de l'artiste mène à sa fiche.

   La palette du site est strictement monochrome : pas de couleur d'accent
   disponible pour marquer un lien. On joue donc sur le contraste plutôt que
   sur la teinte — le libellé « Collection by » garde le noir plein, le nom
   passe en gris.

   Choix assumé de l'auteur du site, contre la convention : un élément moins
   contrasté que son entourage se lit d'ordinaire comme secondaire, pas comme
   actionnable. Le soulignement au survol reste donc le seul renfort. */
.visual-collection__by a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* Le survol assombrit le nom : sans soulignement, c'est le seul retour visuel
   qui confirme que l'élément réagit au pointeur. Le contour de focus par
   défaut du navigateur est conservé pour la navigation au clavier. */
.visual-collection__by a:hover {
    color: var(--color-text);
}

.visual-intro__rule {
    width: 100%;
    height: 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-lg) 0 0;
}

/* Page À propos (« ABOUT US » = page ID 23, gabarit page.php) : texte du contenu justifié,
   même traitement que la description des visuels. Scopé à cette page uniquement.
   `.about-text` couvre aussi le gabarit page-a-propos.php s'il est un jour utilisé. */
.about-text,
.about-text p,
body.page-id-23 .page-content,
body.page-id-23 .page-content p {
    /* Justifié, avec césure : voir .visual-intro__text pour le pourquoi.
       La règle vise aussi les <p> pour battre la classe Gutenberg
       `has-text-align-left` posée directement sur chaque paragraphe. */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-justify: inter-word;
}

.visual-collection__title {
    margin: 0 0 var(--space-md);
}

/* Galerie « justifiée » pilotée par la HAUTEUR : les images gardent leur VRAIE forme
   (ratio = --ar posé par le PHP), rangée à hauteur constante (--v-row-h) réglée pour
   ~4 images par rangée. Étirement pondéré (--grow, PHP) : les carrées ont un poids 0
   (restent carrées), les non-carrées un gros poids → elles s'étirent pour absorber
   l'espace et remplir la rangée jusqu'aux bords. */
.visual-collection__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap);
    --v-row-h: 260px; /* rangées plus hautes → images plus grandes, ~3 par rangée (bureau) */
}

/* Mode « images par ligne imposé », choisi sur la collection.

   La galerie justifiée ci-dessus dimensionne par la hauteur : chaque vignette
   prend sa largeur naturelle, et les images NON carrées s'étirent pour venir
   toucher les bords. Quand une collection ne contient que des carrés, ce
   mécanisme ne peut pas jouer — les carrés ont un flex-grow nul pour ne jamais
   se déformer, donc l'espace restant en fin de rangée n'est absorbé par
   personne : dernière colonne vide et alignement bancal.

   En colonnes égales, le problème disparaît : la largeur se déduit du nombre
   d'images voulu, sans reste. */
.visual-collection__grid--fixe {
    /* Largeur minimale d'une vignette. En dessous, une pochette n'est plus
       lisible : c'est ce seuil qui décide du nombre de colonnes sur petit
       écran, pas une liste de paliers arbitraires. */
    --min-vignette: 150px;

    display: grid;
    align-items: start;

    /* Largeur idéale pour le nombre de colonnes demandé, plancher à
       --min-vignette. Tant que la place suffit, on obtient exactement le
       nombre voulu ; quand l'écran se resserre, la largeur idéale passe sous
       le plancher, et auto-fill retire des colonnes de lui-même.

       Aucun media query : le même calcul couvre toutes les tailles d'écran, et
       le réglage de la collection reste un maximum plutôt qu'une contrainte
       imposée au téléphone. */
    grid-template-columns: repeat(
        auto-fill,
        minmax(
            max(
                var(--min-vignette),
                calc( (100% - (var(--per-row, 3) - 1) * var(--grid-gap)) / var(--per-row, 3) )
            ),
            1fr
        )
    );
}

/* La hauteur redevient libre : chaque vignette suit ses propres proportions
   dans la largeur de colonne qu'on lui donne. Sans cette remise à zéro, elle
   conserverait la hauteur de rangée fixe et le flex-basis de la galerie
   justifiée, qui n'ont plus de sens en grille. */
.visual-collection__grid--fixe .visual-collection__item {
    height: auto;
    flex-basis: auto;
    flex-grow: 0;
    aspect-ratio: var(--ar, 1);
}

}

@media (max-width: 1024px) { .visual-collection__grid { --v-row-h: 220px; } }
@media (max-width: 640px)  { .visual-collection__grid { --v-row-h: 165px; } }

.visual-collection__item {
    height: var(--v-row-h);
    flex-grow: var(--grow, 1);
    flex-basis: calc(var(--ar, 1) * var(--v-row-h));
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: hidden;
    border-radius: 2px;
    cursor: pointer;
}

.visual-collection__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-normal);
}

.visual-collection__item:hover img {
    transform: scale(1.03);
}

/* --- Lightbox --- */
body.lightbox-open {
    overflow: hidden;
}

.md-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.92);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.md-lightbox.is-open {
    display: flex;
    opacity: 1;
}

.md-lightbox__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 88vh;
}

.md-lightbox__image {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    display: block;
}

.md-lightbox__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-color);
}

.md-lightbox__close:hover {
    background-color: #fff;
    color: #000;
}

/* Flèches : même style que .slider-arrow (Studio), repositionnées sur les bords. */
.md-lightbox__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}
.md-lightbox__arrow:hover {
    background-color: #fff;
    color: #000;
}
.md-lightbox__arrow--prev { left: var(--space-md); }
.md-lightbox__arrow--next { right: var(--space-md); }

@media (max-width: 640px) {
    .md-lightbox__arrow--prev { left: var(--space-xs); }
    .md-lightbox__arrow--next { right: var(--space-xs); }
}
/* --- Vidéos artiste (mix, sets VJ) ------------------------------------------
   Les lecteurs viennent de youtube-nocookie.com : aucun cookie de suivi n'est
   déposé tant que le visiteur ne lance pas la lecture. */
/* Les vidéos occupent TOUTE la largeur du conteneur, une par ligne.

   La grille précédente (auto-fit, minmax 340px) plaçait deux lecteurs côte à
   côte dès qu'il y en avait plusieurs, réduisant chacun à la moitié de la
   largeur. Une vidéo se regarde en grand : elle ne se comporte pas comme une
   vignette de galerie. */
.single-videos .video-grid,
.visual-videos .video-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* --- Fiche release : titre « {Type} by {Artiste} » ---------------------------
   Même famille que « Collection by … » sur les visuels, mais aligné à gauche :
   il ouvre la colonne d'informations, il ne coiffe pas une grille centrée. */
.release-byline {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.5vw, 3.4rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: var(--color-text);
    margin: 0 0 var(--space-md);
}

/* « by » reste dans la couleur du titre, comme le type : seul le nom de
   l'artiste est atténué, parce qu'il est le lien. */
.release-byline__by {
    color: inherit;
}

.release-byline a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* Sans soulignement, l'assombrissement au survol est le seul retour qui
   confirme le lien. Le contour de focus du navigateur reste pour le clavier. */
.release-byline a:hover {
    color: var(--color-text);
}

/* --- Tracklist sous la pochette --------------------------------------------
   Placée dans la colonne de gauche, elle hérite de sa largeur : c'est ce qui
   la contraint à celle de la pochette, sans calcul. Il ne reste qu'à l'écarter
   de l'image. */
.release-player__layout--under-cover {
    margin-top: var(--space-md);
}

/* --- Crédits et genres en pied de fiche ------------------------------------ */
.single-footer-meta .content-section + .content-section {
    margin-top: var(--space-md);
}

/* Contact — mention de l'éditeur et confidentialité, sous les départements */
.contact-privacy {
    margin-top: var(--space-lg);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
    max-width: 68ch;
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.contact-privacy p {
    margin: 0 0 var(--space-xs);
    text-align: left;
    hyphens: none;
}

.contact-privacy__editor {
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contact-privacy a {
    color: inherit;
    text-decoration: underline;
}