/* ==========================================================================
   Les Sales Majestés – main.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
    /* Palette lsm-theme — source unique de vérité. Changer une couleur du site se fait ici,
       et nulle part ailleurs : aucune valeur de cette palette n'est écrite en dur dans le CSS. */
    --black:     #080808;
    --white:     #F2EFE9;
    --red:       #C8392B;
    --red-dim:   #7A1F16;
    --gray:      #3A3A3A;
    --mid:       #8A8480;

    /* Triplets RGB des mêmes couleurs, consommés sous la forme rgba(var(--red-rgb), .3).
       À tenir synchronisés avec les hex ci-dessus. */
    --black-rgb: 8, 8, 8;
    --white-rgb: 242, 239, 233;
    --red-rgb:   200, 57, 43;
    --gray-rgb:  58, 58, 58;
    --mid-rgb:   138, 132, 128;

    /* Statuts (badges, notices) — teinte claire pour le texte, teinte profonde pour les fonds */
    --success:          #4ADE80;
    --success-rgb:      74, 222, 128;
    --success-deep-rgb: 22, 163, 74;
    --warning:          #FBBF24;
    --warning-rgb:      251, 191, 36;
    --warning-deep-rgb: 234, 179, 8;
    --danger:           #F87171;
    --danger-rgb:       248, 113, 113;
    --danger-deep-rgb:  220, 38, 38;

    /* Les teintes de la chronologie du line-up (--role-N-rgb / --role-N-ink) sont
       déclarées dans assets/css/lineup-tints.css, inliné ici comme en admin :
       l'aperçu du repeater « Postes » a besoin des mêmes valeurs. */

    /* Impression — le papier n'imprime pas les fonds : la palette sombre y serait
       illisible, ces deux teintes ne servent que dans les blocs @media print. */
    --print-bg:  #FFFFFF;
    --print-ink: #111111;

    /* Alias band-theme (compatibilité helpers/templates) */
    --color-bg:              var(--black);
    --color-surface:         #111111;
    --color-surface-raised:  #141414;
    --color-surface-2:       #181818;
    --color-border:          #222222;
    --color-text:            var(--white);
    --color-text-muted:      var(--mid);
    --color-text-subtle:     #555;
    --color-primary:         var(--red);
    --color-primary-dark:    var(--red-dim);
    --color-primary-glow:    rgba(var(--red-rgb), 0.12);
    --color-accent:          var(--red-dim);

    /* Typographie */
    --font-display: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
    --font-ui:      'Syne', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    'Space Mono', 'Courier New', monospace;
    --font-heading: var(--font-display);
    --font-body:    var(--font-ui);

    /* Tailles */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;
    --text-7xl:  4.5rem;

    /* Espacement */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Rayon */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;

    /* Header */
    --header-height: 60px;

    /* Grille */
    --container-max: 1280px;
    --container-pad: 1rem;

    /* Transitions */
    --transition: 180ms ease;
}

/* Ces deux variables sont la base mobile ; elles remontent dès qu'il y a la
   place. Placé juste après :root pour que tout le fichier en hérite. */
@media (min-width: 769px) {
    :root {
        --container-pad: 1.5rem;
        --header-height: 70px;
    }
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    background: var(--black);
    color: var(--white);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: 1.6;
    overflow-x: hidden;
}

::selection { background: var(--red); color: var(--white); }

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--white); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--red); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.1;
    color: var(--white);
}

p { line-height: 1.7; color: var(--mid); }
p + p { margin-top: .75em; }

ul, ol { list-style: none; }

/* Screen reader only */
.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
/* Scrollbar navigateur */
:root {
    scrollbar-width: thin;
    scrollbar-color: var(--gray) var(--black);
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--gray); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-content { flex: 1; }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.container--narrow {
    max-width: 720px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   4. SKIP LINK
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    padding: .5rem 1rem;
    background: var(--red);
    color: var(--white);
    z-index: 9999;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

/* Cible d'une ancre, rendue focusable par initSmoothScroll() pour que le focus
   suive le défilement. Le contour irait à un conteneur entier — <main> — là où
   il ne renseigne sur rien : c'est l'élément suivant, lui bien visible, qui
   portera le focus à la tabulation. */
[tabindex="-1"]:focus { outline: none; }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--header-height);
    background: rgba(var(--black-rgb), 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--gray);
    transition: background var(--transition), border-color var(--transition);
    mix-blend-mode: normal;
}

.site-header.is-scrolled {
    background: rgba(var(--black-rgb), 0.98);
    border-bottom-color: rgba(var(--gray-rgb), 0.8);
}

.site-content { padding-top: var(--header-height); }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    gap: var(--space-8);
}

.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--white);
}

.site-header .custom-logo {
    max-height: 45px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* Navigation desktop — masquée en base, le burger prend le relais */
.main-navigation { display: none; align-items: center; }

.primary-menu {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.primary-menu li { position: relative; }

.nav-link {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mid);
    transition: color var(--transition);
    padding: .25rem 0;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 1px;
    background: var(--red);
    transition: width var(--transition);
}

.nav-link:hover,
.current-menu-item > .nav-link,
.current-page-ancestor > .nav-link {
    color: var(--white);
}

.nav-link:hover::after,
.current-menu-item > .nav-link::after { width: 100%; }

/* Sous-menus */
.sub-menu {
    position: absolute;
    top: calc(100% + .75rem);
    left: 0;
    min-width: 180px;
    background: var(--color-surface);
    border: 1px solid var(--gray);
    padding: .5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition);
}

.menu-item-has-children:hover .sub-menu,
.menu-item-has-children:focus-within .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu .nav-link {
    display: block;
    padding: .5rem 1rem;
    font-size: var(--text-xs);
}

/* Menu toggle mobile */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px; height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.menu-toggle span {
    display: block;
    width: 100%; height: 1px;
    background: var(--white);
    transition: all var(--transition);
    transform-origin: center;
}

.menu-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 769px) {
    .main-navigation { display: flex; }
    .menu-toggle     { display: none; }
}

/* Menu mobile

   visibility et pointer-events ne sont pas cosmétiques : transparent et hors
   écran, le panneau gardait tous ses liens dans l'ordre de tabulation, y
   compris sur desktop où rien ne l'affiche jamais. Le clavier traversait donc
   un second menu invisible, et il le traversait à l'intérieur d'un sous-arbre
   marqué aria-hidden — des cibles que les lecteurs d'écran déclarent absentes.

   visibility est reportée à la fin de la fermeture (0s linear .25s) pour ne pas
   couper la transition, et rétablie sans délai à l'ouverture. */
.mobile-menu {
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    background: var(--black);
    border-bottom: 1px solid var(--gray);
    padding: var(--space-6) 0;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
    z-index: 999;
}

.mobile-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .25s ease, opacity .25s ease, visibility 0s;
}

.mobile-menu .primary-menu {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

.mobile-menu .nav-link {
    display: block;
    width: 100%;
    font-size: var(--text-sm);
    padding: .5rem 0;
    color: var(--white);
}

/* --------------------------------------------------------------------------
   6. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--black);
    border-top: 2px solid var(--gray);
    padding: var(--space-16) 0 var(--space-8);
    margin-top: auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

@media (min-width: 769px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }
}

@media (min-width: 1025px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.footer-brand .site-title {
    font-size: var(--text-3xl);
    display: block;
    margin-bottom: var(--space-3);
    color: var(--white);
}

.footer-brand p {
    font-size: var(--text-sm);
    color: var(--mid);
    margin-bottom: var(--space-6);
    max-width: 28ch;
}

.footer-widget-title,
.footer-widget h2,
.footer-widget h3,
.footer-widget h4 {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mid);
    margin-bottom: var(--space-4);
}

.footer-widget ul li a {
    font-size: var(--text-sm);
    color: var(--mid);
    display: block;
    padding: .25rem 0;
    transition: color var(--transition);
}

.footer-widget ul li a:hover { color: var(--white); }

.footer-ad {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-8);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--mid);
}

.footer-bottom p + p { margin-top: 0; }
.footer-bottom a { color: var(--mid); }
.footer-bottom a:hover { color: var(--red); }

@media (min-width: 769px) {
    .footer-bottom {
        flex-direction: row;
        text-align: left;
    }
}

/* Réseaux sociaux footer */
.footer-social {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--gray);
    color: var(--mid);
    transition: all var(--transition);
}

.footer-social a svg { width: 16px; height: 16px; }
.footer-social a:hover { border-color: var(--red); color: var(--red); }

/* --------------------------------------------------------------------------
   7. BUTTONS

   Source unique de vérité pour l'apparence des boutons, y compris ceux du bloc
   « Bouton » de l'éditeur : `.wp-block-button__link` est greffé sur les mêmes
   règles que `.btn` (variante par défaut = .btn--primary + .btn--lg, style
   « contour » de l'éditeur = .btn--outline). La mise en page du bloc est en
   section « Blocs bouton WordPress ».

   Les sélecteurs `.wp-block-button.is-style-outline > …` sont là uniquement
   pour la spécificité : wp-block-library pose padding/border/background sur ce
   sélecteur-là, il faut le rencontrer pour reprendre la main.
   -------------------------------------------------------------------------- */
.btn,
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.4rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.btn svg,
.wp-block-button .wp-block-button__link svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn--primary,
.wp-block-button .wp-block-button__link { background: var(--red); color: var(--white); border-color: var(--red); }
.btn--primary:hover,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus { background: var(--red-dim); border-color: var(--red-dim); color: var(--white); }

.btn--outline,
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--white); border-color: var(--white); }
.btn--outline:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus { background: var(--white); color: var(--black); }

.btn--ghost { background: transparent; color: var(--mid); border-color: var(--gray); }
.btn--ghost:hover { border-color: var(--white); color: var(--white); }

.btn--sm { padding: .4rem 1rem; font-size: 0.65rem; }
.btn--lg,
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link { padding: .8rem 2rem; font-size: var(--text-xs); }
.btn--block { width: 100%; justify-content: center; margin-bottom: var(--space-3); }

/* --------------------------------------------------------------------------
   8. BADGES
   -------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: .15rem .6rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 1px solid transparent;
}

.badge { transition: background var(--transition), color var(--transition), border-color var(--transition); }

.badge--primary   { background: var(--red);     color: var(--white); border-color: var(--red); }
.badge--outline   { background: transparent;     color: var(--mid);   border-color: var(--gray); }
.badge--success   { background: rgba(var(--success-deep-rgb),.15); color: var(--success); border-color: rgba(var(--success-deep-rgb),.3); }
.badge--cancelled { background: rgba(var(--red-rgb),.15); color: var(--red); border-color: rgba(var(--red-rgb),.3); }
.badge--warning   { background: rgba(var(--warning-deep-rgb),.15); color: var(--warning); border-color: rgba(var(--warning-deep-rgb),.3); }
.badge--danger    { background: rgba(var(--danger-deep-rgb),.15); color: var(--danger); border-color: rgba(var(--danger-deep-rgb),.3); }
.badge--muted     { background: transparent; color: var(--mid); border-color: var(--gray); }

a.badge--primary:hover   { background: var(--red-dim); border-color: var(--red-dim); color: var(--white); }
a.badge--outline:hover   { background: var(--gray); border-color: var(--gray); color: var(--white); }
a.badge--success:hover   { background: rgba(var(--success-deep-rgb),.3);  border-color: rgba(var(--success-deep-rgb),.6);  color: var(--success); }
a.badge--cancelled:hover { background: rgba(var(--red-rgb),.3);  border-color: rgba(var(--red-rgb),.6);  color: var(--white); }
a.badge--warning:hover   { background: rgba(var(--warning-deep-rgb),.3);  border-color: rgba(var(--warning-deep-rgb),.6);  color: var(--warning); }
a.badge--danger:hover    { background: rgba(var(--danger-deep-rgb),.3);  border-color: rgba(var(--danger-deep-rgb),.6);  color: var(--danger); }
a.badge--muted:hover     { background: var(--gray); border-color: var(--gray); color: var(--white); }

/* --------------------------------------------------------------------------
   9. SECTION HEADERS
   -------------------------------------------------------------------------- */
.section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    padding-bottom: var(--space-8);
    border-bottom: 2px solid var(--gray);
    margin-bottom: var(--space-10);
}

@media (min-width: 769px) {
    .section-header {
        flex-direction: row;
        align-items: flex-end;
    }
}

.section-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--red);
    margin-bottom: var(--space-2) !important;
}

.section-title {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    color: var(--white);
}

.section-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mid);
    flex-shrink: 0;
    white-space: nowrap;
}

.section-link svg { width: 14px; height: 14px; }
.section-link:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   10. PAGE HERO
   -------------------------------------------------------------------------- */
.page-hero {
    position: relative;
    min-height: clamp(260px, 35vw, 480px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--black);
    border-bottom: 2px solid var(--gray);
}

.page-hero--compact {
    min-height: 0;
    align-items: center;
}

/* Balise <img> et non un background-image : voir band_page_hero_bg()
   (inc/helpers.php). D'où object-fit là où il y avait background-size, et les
   dimensions forcées qui neutralisent les attributs width/height intrinsèques
   posés par WordPress. */
.page-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(40%) brightness(0.5);
    transform: scale(1.05);
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--black-rgb),.9) 0%, rgba(var(--black-rgb),.4) 60%, transparent 100%);
}

.page-hero__content {
    position: relative;
    z-index: 1;
    padding-bottom: var(--space-12);
    padding-top: var(--space-12);
}

.page-hero__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--red);
    margin-bottom: var(--space-3) !important;
}

.page-hero__title {
    font-size: clamp(var(--text-4xl), 8vw, var(--text-7xl));
    color: var(--white);
    margin-bottom: var(--space-4);
    line-height: 1;
}

.page-hero__title .page-hero__label { display: block; line-height: 1.7; }

.page-hero__subtitle svg { width: 16px; height: 16px; flex-shrink: 0; }

.page-hero__subtitle {
    font-size: var(--text-lg);
    color: var(--mid);
    font-family: var(--font-ui);
    margin: 0 !important;
}

.page-hero__subtitle-inline {
    display: block;
    font-size: .55em;
    opacity: .7;
    margin-top: .2em;
}

.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
    align-items: center;
}

.page-hero__meta-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--text-sm);
    color: var(--mid);
}

.page-hero__meta-item svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   11. HOME HERO
   -------------------------------------------------------------------------- */
.home-hero {
    position: relative;
    /* Mobile : hauteur souple bornée. `svh` exclut les barres d'UI du navigateur,
       que `vh` compte à tort — d'où un hero qui débordait de l'écran. */
    min-height: clamp(360px, 60vh, 520px);
    min-height: clamp(360px, 60svh, 520px);
    display: flex;
    align-items: flex-end;
    padding: 56px var(--container-pad) 40px;
    overflow: hidden;
}

@media (min-width: 769px) {
    .home-hero {
        height: calc(100vh - var(--header-height));
        height: calc(100svh - var(--header-height));
        min-height: 600px;
        padding: 0 var(--container-pad) 64px;
    }
}

/* Grain animé */
.home-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    background-size: 256px;
    opacity: .4;
    pointer-events: none;
    z-index: 1;
}

.home-hero__noise {
    position: absolute; inset: 0;
    pointer-events: none;
}

/* Texte de fond géant animé */
.hero-bg-text {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(140px, 28vw, 380px);
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--white-rgb),.05);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    animation: heroDrift 20s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes heroDrift {
    from { letter-spacing: .05em; }
    to   { letter-spacing: .2em; }
}

/* Bande verticale rouge */
.hero-stripe {
    position: absolute; width: 4px; height: 100%;
    background: var(--red);
    top: 0; left: 38%;
    transform: skewX(-6deg);
    opacity: .9; z-index: 0;
}

/* Contenu hero (bas-gauche) */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 16px !important;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(56px, 18vw, 120px);
    line-height: .9;
    letter-spacing: .02em;
    color: var(--white);
    animation: heroSlideUp 1s cubic-bezier(.16,1,.3,1) both;
}

@media (min-width: 769px) {
    .hero-title { font-size: clamp(72px, 14vw, 200px); }
}

@keyframes heroSlideUp {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.hero-sub {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--mid);
    line-height: 1.7;
    max-width: 380px;
    margin-top: 24px !important;
    animation: heroSlideUp 1s .15s cubic-bezier(.16,1,.3,1) both;
}

/* --------------------------------------------------------------------------
   12. HOME GRID
   -------------------------------------------------------------------------- */
.home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    background: var(--gray);
    border-top: 2px solid var(--gray);
}

@media (min-width: 769px) {
    .home-grid { grid-template-columns: 1fr 1fr; }
}

.home-card {
    background: var(--black);
    padding: 28px var(--container-pad);
    position: relative;
    overflow: hidden;
    transition: background .3s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.home-card:hover { background: var(--color-surface); }
.home-card.wide  { grid-column: span 1; }
.home-card:hover .card-arrow { transform: translateX(6px); }

@media (min-width: 769px) {
    .home-card       { padding: 48px; }
    .home-card.wide  { grid-column: span 2; }
}

.card-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 20px;
}

.card-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 72px);
    letter-spacing: .03em;
    line-height: 1;
    margin-bottom: 16px;
    color: var(--white);
}

/* Le titre porte le lien principal, dont le ::after couvre toute la carte :
   celle-ci est cliquable sans imbriquer d'élément interactif dans un autre. */
.card-title a,
.card-title a:hover { color: inherit; }

.card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Les liens de la carte repassent au-dessus de cet overlay. */
.news-preview-link,
.card-next-show,
.album-mini {
    position: relative;
    z-index: 2;
}

.home-card:focus-within {
    outline: 2px solid var(--red);
    outline-offset: -2px;
}

.card-arrow {
    display: none;
    position: absolute;
    bottom: 48px; right: 48px;
    font-size: 32px;
    color: var(--red);
    transition: transform .3s;
    line-height: 1;
}

@media (min-width: 769px) {
    .card-arrow { display: block; }
}

.card-next-show {
    display: inline-block;
    margin-top: auto;
    align-self: flex-start;
    padding: 10px 20px;
    border: 1px solid var(--red);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--white);
    transition: background .2s, color .2s;
}

.card-next-show:hover { background: var(--red); color: var(--white); }

/* Liste de preview (concerts / news) */
.news-preview-list { 
    margin-top: 16px;
    margin-bottom: 16px;
 }

.news-preview-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--gray);
}

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

.news-date {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--red);
    white-space: nowrap;
    padding-top: 2px;
    flex-shrink: 0;
}

.news-headline {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.4;
}

.news-preview-link { transition: padding-left .2s; color: inherit; text-decoration: none; }
.news-preview-link:hover { padding-left: 8px; }

/* Mini row albums */
.album-mini-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 20px;
}
@media (max-width: 1100px) {
    .album-mini-row { grid-template-columns: repeat(4, 1fr); }
    .album-mini-row .album-mini:nth-child(n+5) { display: none; }
}
@media (max-width: 860px) {
    .album-mini-row { grid-template-columns: repeat(3, 1fr); }
    .album-mini-row .album-mini:nth-child(n+4) { display: none; }
}
@media (max-width: 620px) {
    .album-mini-row { grid-template-columns: repeat(2, 1fr); }
    .album-mini-row .album-mini:nth-child(n+3) { display: none; }
}
@media (max-width: 400px) {
    .album-mini-row { grid-template-columns: repeat(1, 1fr); }
    .album-mini-row .album-mini:nth-child(n+2) { display: none; }
}

.album-mini {
    aspect-ratio: 1;
    background: var(--gray);
    position: relative;
    overflow: hidden;
    transition: transform .3s;
}

.album-mini:hover { transform: scale(1.02); }

.album-mini-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.album-mini-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    background: linear-gradient(to top, rgba(var(--black-rgb),.85) 0%, transparent 60%);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: .05em;
    color: var(--white);
}

.album-cover-1 { background: linear-gradient(135deg,#1a1a1a 0%,#3d1a1a 50%,#0a0a0a 100%); }
.album-cover-2 { background: linear-gradient(135deg,#0f1a2a 0%,#1a0f0a 100%); }
.album-cover-3 { background: linear-gradient(135deg,#1a1a0f 0%,#2a1f1f 100%); }
.album-cover-4 { background: linear-gradient(135deg,#0d0d1a 0%,#0a080a 100%); }
.album-cover-5 { background: linear-gradient(135deg,#0a1a14 0%,#1a0a14 100%); }

.red { color: var(--red); }

/* --------------------------------------------------------------------------
   13. CONCERTS
   -------------------------------------------------------------------------- */
.concerts-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Carte entièrement cliquable : le titre porte le lien vers la fiche et son
   ::after (voir .card-link, section HOME GRID) couvre toute la carte. D'où le
   position: relative ici, et le rehaussement des boutons d'action ci-dessous.
   Row-gap distinct : var(--space-6) est calibré pour l'écart date ↔ infos, il
   creuse trop dès que les actions passent sous le contenu en mobile. */
.concert-card {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: var(--space-4) var(--space-6);
    align-items: center;
    padding: var(--space-6);
    background: var(--color-surface);
    border-left: 3px solid transparent;
    transition: border-color var(--transition), background var(--transition);
}

/* :focus-within doublé sur chaque règle de survol : la carte n'étant pas
   focusable elle-même, c'est le focus de l'un de ses liens qui doit lui donner
   l'état que le pointeur lui donne. */
.concert-card:hover,
.concert-card:focus-within {
    border-left-color: var(--red);
    background: var(--color-surface-raised);
}

.concert-card--cancelled { opacity: .55; }

.concert-card--cancelled:hover,
.concert-card--cancelled:focus-within { border-left-color: var(--gray); }

/* Le lien du titre est masqué par son propre overlay : c'est donc la carte qui
   porte aussi le contour de focus, en plus de l'état ci-dessus. */
.concert-card:focus-within {
    outline: 2px solid var(--red);
    outline-offset: -2px;
}

.concert-card .card-link:focus-visible { outline: none; }

/* Visible à toutes les largeurs : dans une liste de dates, c'est le repère qu'on
   balaie en premier. Sa largeur est celle de la colonne de grille — pas de
   min-width, qui la ferait déborder sur le gap. */
.concert-date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    background: var(--black);
    padding: var(--space-2);
    border: 1px solid var(--gray);
}

.concert-date-block .weekday {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mid);
}

.concert-date-block .day {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--white);
}

.concert-date-block .month {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--red);
}

.concert-date-block .year {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--mid);
    letter-spacing: .05em;
}

/* Colonne explicite : sans elle, une date sans bloc de gauche — champ vidé sur
   une fiche migrée — verrait son titre écrasé dans les 72px de la colonne 1. */
.concert-info { grid-column: 2; min-width: 0; }

.concert-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--white);
    margin-bottom: var(--space-2);
    line-height: 1.15;
}

.concert-title a { color: inherit; }

/* Piloté par la carte plutôt que par le lien lui-même : son ::after couvre déjà
   toute la carte, mais pas les boutons d'action qui le surplombent en z-index —
   le titre perdait donc son rouge dès que le pointeur passait sur « Billetterie »
   ou « Détails », alors que la carte, elle, restait allumée. */
.concert-card:hover .concert-title a,
.concert-card:focus-within .concert-title a { color: var(--red); }

/* La ville tient le titre ; la salle vient en second, sans capitales forcées pour
   ne pas défigurer les noms composés. */
.concert-title__venue {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: .04em;
    color: var(--mid);
    margin-top: .3rem;
}

/* Row-gap resserré : sous 769px chaque méta passe sur sa propre ligne, et un
   gap de var(--space-4) y dépasse l'interligne du texte. */
.concert-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--text-sm);
    color: var(--mid);
}

.meta-item svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Statut, prix et billetterie sont des informations de premier ordre : sur les
   petites largeurs ils passent sous les infos plutôt que d'être masqués, et ne
   reprennent leur colonne de droite qu'à partir de 769px. Colonne 2 et non
   1 / -1 : sous le bloc date, le bloc casserait l'axe gauche du titre. */
.concert-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* Placés après les trois règles de base : sans média, la spécificité est
   identique, donc c'est l'ordre du document qui tranche. */
@media (min-width: 481px) {
    .concert-card           { grid-template-columns: 80px 1fr; }
    .concert-date-block     { padding: var(--space-3); }
    .concert-date-block .day { font-size: var(--text-4xl); }
}

@media (min-width: 769px) {
    .concert-card    { grid-template-columns: 100px 1fr auto; }
    .concert-actions {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-end;
    }
}

/* Bloc réduit au seul bouton « Détails » : rien à montrer avant 769px. */
.concert-actions--desktop-only { display: none; }

@media (min-width: 769px) {
    .concert-actions--desktop-only { display: flex; }
}

.concert-actions__btns {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Billetterie, Facebook et Détails repassent au-dessus de l'overlay de la carte :
   sans quoi ce dernier intercepterait leurs clics. */
.concert-actions__btns .btn {
    position: relative;
    z-index: 2;
}

/* « Détails » est le double visible du lien étiré de la carte : les deux mènent
   à la fiche, il s'allume donc avec elle et pas seulement sous le pointeur.
   Billetterie et Facebook en sont exclus — ils mènent ailleurs, les allumer au
   survol de la carte laisserait croire qu'elle y conduit. */
.concert-card:hover .concert-actions__btns .btn--ghost,
.concert-card:focus-within .concert-actions__btns .btn--ghost {
    border-color: var(--white);
    color: var(--white);
}

/* Tant que la colonne de droite n'existe pas, « Détails » ferait doublon avec la
   carte, déjà entièrement cliquable, et volerait la place à la billetterie. */
.concert-actions__btns .btn--ghost { display: none; }

@media (min-width: 769px) {
    .concert-actions__btns .btn--ghost { display: inline-flex; }
}

.concert-price {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--white);
}

/* Year tabs */
.filter-tabs {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    margin-bottom: var(--space-10);
    border-bottom: 2px solid var(--gray);
    padding-bottom: var(--space-4);
}

.filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-4);
    gap: 4px;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.filter-tabs { scrollbar-width: thin; scrollbar-color: var(--gray) transparent; }
.filter-tabs::-webkit-scrollbar { display: block; height: 3px; }
.filter-tabs::-webkit-scrollbar-thumb { background: var(--gray); border-radius: 2px; }
.filter-tabs::-webkit-scrollbar-track { background: transparent; }

.filter-tab {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .5rem 1.25rem;
    color: var(--mid);
    border: 1px solid transparent;
    transition: all var(--transition);
}

.filter-tab:hover { color: var(--white); border-color: var(--gray); }
.filter-tab.is-active { color: var(--white); border-color: var(--red); background: rgba(var(--red-rgb),.08); }

/* Recherche */
.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-10);
}

.search-form__field {
    flex: 1 1 16rem;
    min-width: 0;
    padding: .75rem var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--gray);
    border-radius: 0;
    color: var(--white);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    transition: border-color var(--transition);
}

.search-form__field::placeholder { color: var(--color-text-subtle); }

.search-form__field:focus {
    outline: none;
    border-color: var(--red);
}

.search-form__submit { flex: 0 0 auto; }

.search-form--centered {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

/* Concert single — sur une date, les informations pratiques SONT le contenu
   principal : deux colonnes de même poids (les faits, la carte), et le texte
   libre, rarissime sur les dates d'archive, renvoyé en dessous. */
.concert-single { padding-top: var(--space-8); }

.concert-single__key {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
    margin-top: var(--space-8);
}

@media (min-width: 769px) {
    .concert-single__key {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
    }
}

.concert-lineup { margin-top: var(--space-6); }

/* Colonne de droite : l'affiche puis la carte, les deux visuels de la fiche. */
.concert-single__visuals {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.concert-flyer {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--gray);
}

.concert-flyer__link {
    display: block;
    max-width: 100%;
    transition: opacity var(--transition);
}

.concert-flyer__link:hover { opacity: .88; }

/* Hauteur bornée et dimensions libres : un flyer portrait, paysage ou carré
   tient dans la même boîte sans jamais être recadré. */
.concert-flyer__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 60vh;
}

@media (min-width: 769px) {
    .concert-flyer__img { max-height: 560px; }
}

.concert-flyer__caption {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--gray);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--mid);
    text-align: center;
}

.concert-single__notes {
    max-width: 820px;
    margin-top: var(--space-12);
}

.concert-cancelled-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border: 1px solid rgba(var(--red-rgb),.4);
    background: rgba(var(--red-rgb),.08);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
}

.concert-cancelled-banner--warning {
    border-color: rgba(var(--warning-rgb),.3);
    background: rgba(var(--warning-rgb),.06);
}

.concert-cancelled-banner--danger {
    border-color: rgba(var(--danger-rgb),.3);
    background: rgba(var(--danger-rgb),.06);
}

.concert-cancelled-banner svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--red); }

.concert-details-card {
    background: var(--color-surface);
    border-left: 3px solid var(--red);
    padding: var(--space-6);
}

dl.concert-details-card { margin: 0; }

.concert-detail-row {
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(var(--gray-rgb), .5);
}

.concert-detail-row:first-child { padding-top: 0; }
.concert-detail-row:last-child  { border-bottom: none; padding-bottom: 0; }

.concert-detail-icon { flex-shrink: 0; display: inline-flex; }
.concert-detail-icon svg { width: 16px; height: 16px; color: var(--red); display: block; }

.concert-detail-label {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mid);
    margin: 0 0 .25rem !important;
}

.concert-detail-value {
    padding-left: calc(16px + var(--space-4));
    font-size: var(--text-sm);
    color: var(--white);
    margin: 0 !important;
}

.concert-detail-value address { margin: 0; }

.lineup-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.lineup-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* --------------------------------------------------------------------------
   13B. MEDIA CARD — SOCLE COMMUN (discographie, galeries, vidéos, boutique)
   --------------------------------------------------------------------------
   Ces quatre grilles sont une seule et même carte : vignette encadrée en
   --gray, image légèrement désaturée qui se révèle et grossit sous un voile
   rouge au survol, puis titre display et méta mono. Le survol de n'importe
   quelle zone déclenche l'ensemble, et le lien du titre est étiré sur toute la
   carte pour la rendre cliquable d'un bloc. Seul le ratio de la vignette change
   d'un type à l'autre (pochette carrée, photo 4:3, vignette YouTube 16:9).

   Le socle porte le nom neutre `media-card`. Chaque grille lui ajoute une
   classe de domaine — `album-card`, `gallery-card`, `product-card` — qui ne
   déclare que ce qui lui est propre : ratio, liens plateformes, prix, panier.
   Même rapport qu'entre `.btn` et `.btn--ghost`. Les actualités et les concerts
   n'en font délibérément pas partie : liste pour les uns, mise en avant
   éditoriale pour les autres. La carte actualité emprunte toutefois le voile
   rouge ci-dessous — c'est le seul effet qu'elle partage, son survol restant
   par ailleurs le sien (redressement de l'inclinaison, cadre rouge, élévation).

   Une seule exception au nommage : le plugin vidéo. Son balisage doit rester
   stylable hors de ce thème, on ne peut donc pas lui ajouter `media-card` — ses
   sélecteurs sont pontés ici, préfixés par .remibuisson-yt pour passer devant
   ses propres règles, imprimées plus tard dans la page. Attention à la
   collision de vocabulaire : son `__thumb` est la carte entière (un <a> unique
   englobant vignette et titre, d'où son survol déjà global, que les trois
   autres cartes rejoignent ici) et son `__media` est la vignette.

   Les sélecteurs de la boutique sont listés ici pour la même raison : sa
   feuille est chargée après main.css et ne garde que ce qui lui est propre
   (prix, bouton panier, badge promo).
   -------------------------------------------------------------------------- */

/* Mobile-first : deux colonnes déclarées en base, largeur mini intrinsèque
   au-delà de 769px. En dessous, un minmax() ferait *augmenter* le nombre de
   colonnes quand l'écran rétrécit. */
/* padding: 0 — ces grilles peuvent être rendues dans .post-content, dont la
   typographie éditoriale rend aux ul/ol leurs puces et leur retrait de 1.5em
   (voir « 19. POST CONTENT »). C'est le cas de la grille vidéo, la page
   /videos/ portant son shortcode. */
.media-grid,
.remibuisson-yt .remibuisson-yt__grid,
ul.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
}

/* Le 250px est un *seuil de passage à la ligne*, pas une largeur de carte :
   celle-ci vaut 1fr, donc le partage à parts égales. Descendu de 280 à 250 pour
   que la boutique tienne 3 colonnes malgré sa sidebar — sa colonne principale
   fait 844px sur un conteneur plein, et 3 pistes de 280 en réclamaient 904.
   Les grilles pleine largeur ne bougent pas : 4 pistes y demandent 1096px, une
   cinquième 1378, donc toujours 4 colonnes sur 1232px de contenu.

   auto-fill et non auto-fit : les pistes vides sont conservées, donc une carte
   isolée garde la taille qu'elle a partout ailleurs au lieu de s'étirer sur la
   largeur restante. Une vente croisée unique paraissait sinon plus importante
   que la fiche qu'elle accompagne.

   Et surtout, le maximum reste 1fr : le nombre de pistes se calcule sur le
   maximum dès qu'il est chiffré, et seulement à défaut sur le minimum. Un
   minmax(250px, 420px) ferait donc compter des pistes de 420 — soit une seule
   piste dans les 844px de la boutique, au lieu de trois. */
@media (min-width: 769px) {
    .media-grid,
    .remibuisson-yt .remibuisson-yt__grid,
    ul.products {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--space-8);
    }
}

/* Bloc. isolation crée un contexte d'empilement local : les z-index des
   enfants (badge promo, rangée d'actions) se règlent entre eux au lieu de
   remonter dans la page et de passer devant une carte voisine. */
.media-card {
    position: relative;
    isolation: isolate;
}

/* Vignette */
.media-card__thumb,
.remibuisson-yt .remibuisson-yt__media {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--gray);
    margin-bottom: var(--space-4);
}

/* Seul réglage porté par la classe de domaine côté vignette */
.album-card   .media-card__thumb       { aspect-ratio: 1; }
.product-card .media-card__thumb       { aspect-ratio: 1; }
.gallery-card .media-card__thumb       { aspect-ratio: 4/3; }
.remibuisson-yt .remibuisson-yt__media { aspect-ratio: 16/9; }

.media-card__thumb img,
.remibuisson-yt .remibuisson-yt__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    transition: transform .4s ease, filter .4s ease;
}

/* Le survol se déclenche sur la carte entière, pas sur la seule vignette.
   :focus-within fait de même au clavier, pour que la tabulation vers le titre
   ou les actions donne le même retour visuel que la souris. */
.media-card:hover .media-card__thumb img,
.media-card:focus-within .media-card__thumb img,
.remibuisson-yt .remibuisson-yt__thumb:hover .remibuisson-yt__media img {
    transform: scale(1.05);
    filter: grayscale(0);
}

/* Hors de ce thème, le plugin éclaircit le cadre de sa vignette au survol.
   Ici c'est le voile ci-dessous qui signale l'interaction, comme sur les trois
   autres grilles : le cadre, lui, ne bouge pas. */
.remibuisson-yt .remibuisson-yt__thumb:hover .remibuisson-yt__media {
    border-color: var(--gray);
}

/* Voile rouge au survol */
.media-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--red-rgb),.5);
    opacity: 0;
    transition: opacity var(--transition);
}

/* Même voile, sur deux vignettes qui n'ont pas de div dédiée : celle du plugin
   vidéo (balisage non modifiable) et celle de la carte actualité (rien à
   ajouter à son balisage pour un effet purement décoratif). Le déclencheur de
   chacune reste dans sa propre section. */
.remibuisson-yt .remibuisson-yt__media::after,
.post-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--red-rgb),.5);
    opacity: 0;
    transition: opacity var(--transition);
}

.media-card:hover .media-card__overlay,
.media-card:focus-within .media-card__overlay,
.remibuisson-yt .remibuisson-yt__thumb:hover .remibuisson-yt__media::after {
    opacity: 1;
}

/* Vidéo en cours de lecture */
.remibuisson-yt .remibuisson-yt__thumb.is-active .remibuisson-yt__media {
    border-color: var(--red);
}

/* Vignette absente */
.media-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mid);
}

.media-card__placeholder svg { width: 32px; height: 32px; }

/* Titre */
.media-card__title,
.remibuisson-yt .remibuisson-yt__title {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-xl);
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: .25rem;
    padding: 0;
}

.media-card__title a { color: inherit; }

.media-card:hover .media-card__title a,
.media-card:focus-within .media-card__title a,
.remibuisson-yt .remibuisson-yt__thumb:hover .remibuisson-yt__title,
.remibuisson-yt .remibuisson-yt__thumb.is-active .remibuisson-yt__title {
    color: var(--red);
}

/* Carte cliquable d'un bloc. Le lien du titre est étiré sur toute la carte par
   un ::after plutôt qu'un <a> englobant, qui imbriquerait les liens plateformes
   et le bouton panier — imbrication interdite en HTML. Le titre reste donc le
   seul lien de la carte exposé aux lecteurs d'écran : la vignette, qui pointe
   au même endroit, est neutralisée dans les templates (aria-hidden, tabindex).

   Contrepartie assumée du procédé : le texte de la carte n'est plus
   sélectionnable à la souris. Tout élément réellement interactif placé sous ce
   voile doit repasser au-dessus — voir .media-card__actions et .onsale. */
.media-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Surtitre : type de sortie côté discographie, catégorie côté boutique */
.media-card__type {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--red);
    margin-bottom: .25rem;
}

/* Méta sous le titre : année de sortie, nombre de photos, durée de la vidéo */
.media-card__meta,
.remibuisson-yt .remibuisson-yt__meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--mid);
    margin: 0 !important;
    padding: 0;
}

/* Rangée d'actions en pied de carte : liens plateformes côté discographie,
   bouton panier côté boutique. z-index pour rester atteignable sous le lien
   étiré du titre. */
.media-card__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem;
}

/* --------------------------------------------------------------------------
   14. DISCOGRAPHY
   -------------------------------------------------------------------------- */
/* Grille et carte : voir « 13B. MEDIA CARD — SOCLE COMMUN » ci-dessus.
   Ne reste ici que ce qui est propre à la carte album : les liens plateformes,
   réduits à des pastilles carrées autour de leur seule icône. */

.album-card .media-card__actions .btn {
    padding: .35rem;
    line-height: 1;
}

.album-card .media-card__actions .btn svg { width: 1rem; height: 1rem; display: block; }

/* Album single */
.album-single { padding-top: var(--space-8); }

.album-single__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: start;
    margin-top: var(--space-8);
}

@media (min-width: 769px) {
    .album-single__layout { grid-template-columns: 260px 1fr; }
}

@media (min-width: 1025px) {
    .album-single__layout { grid-template-columns: 320px 1fr; }
}

.album-single__sidebar {
    align-self: start;
}

@media (min-width: 769px) {
    .album-single__sidebar {
        position: sticky;
        top: calc(var(--header-height) + var(--space-6));
    }
}


.album-cover img {
    width: 100%;
    border: 1px solid var(--gray);
    filter: grayscale(10%);
}

.album-cover__placeholder {
    aspect-ratio: 1;
    background: var(--color-surface);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--gray);
    font-size: 5rem;
}

.album-streaming-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--space-4);
}

.streaming-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--gray);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mid);
    transition: all var(--transition);
    border-left: 2px solid transparent;
}

.streaming-link svg { width: 1em; height: 1em; flex-shrink: 0; }

.streaming-link:hover { color: var(--white); border-left-color: var(--red); background: var(--color-surface-raised); }

.album-meta-row {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--gray);
}

.album-meta-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mid);
    margin-bottom: .25rem !important;
}

.album-meta-value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--white);
    margin: 0 !important;
}

.album-meta-value--accent { color: var(--red); }

/* Tracklist */
.tracklist {
    border: 1px solid var(--gray);
    margin-bottom: var(--space-8);
}

.tracklist__header,
.track-item {
    display: grid;
    grid-template-columns: 40px 1fr 70px 36px;
    gap: var(--space-4);
    padding: .75rem var(--space-4);
    align-items: center;
}

.tracklist__header {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mid);
    border-bottom: 1px solid var(--gray);
    background: var(--black);
}

.track-entry { border-bottom: 1px solid rgba(var(--gray-rgb),.5); }
.track-entry:last-child { border-bottom: none; }

.track-item { transition: background var(--transition); }
.track-item--has-lyrics { cursor: pointer; }
.track-item--has-lyrics:hover { background: var(--color-surface); }

.track-num {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--mid);
    text-align: center;
}

.track-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--white);
}
.track-title a { color: inherit; }
.track-title a:hover { color: var(--red); }

/* Signale les titres qui ont un clip, sans coûter une colonne à la grille. */
.track-clip-badge {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    flex-shrink: 0;
    padding: .15em .45em;
    border: 1px solid rgba(var(--red-rgb), .4);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--red);
    transition: background var(--transition), border-color var(--transition);
}
.track-clip-badge:hover,
.track-clip-badge:focus-visible {
    background: rgba(var(--red-rgb), .12);
    border-color: var(--red);
}
.track-clip-badge svg { width: 9px; height: 9px; }

/* Sous 480px la colonne du titre est trop étroite pour le mot : l'icône seule
   suffit, le libellé reste lu par les lecteurs d'écran. */
@media (max-width: 480px) {
    .track-clip-badge__label {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
    }
}

.track-duration {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--mid);
    text-align: right;
}

.track-lyrics-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--gray);
    border-radius: 50%;
    background: transparent;
    color: var(--mid);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), transform var(--transition);
    justify-self: center;
    padding: 0;
}
.track-lyrics-toggle:hover { color: var(--red); border-color: var(--red); }
.track-lyrics-toggle[aria-expanded="true"] { color: var(--red); border-color: var(--red); }
.track-lyrics-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.track-lyrics-toggle svg { transition: transform var(--transition); }

.track-lyrics {
    padding: var(--space-4);
    border-top: 1px solid rgba(var(--gray-rgb),.4);
    background: var(--black);
}

/* À partir du desktop seulement : le retrait à gauche aligne les paroles sur la
   colonne du titre, après celle du numéro de piste. Sur mobile il ampute trop la
   largeur utile, d'où le padding symétrique ci-dessus. */
@media (min-width: 769px) {
    .track-lyrics {
        padding: var(--space-4) var(--space-6) var(--space-6) calc(40px + var(--space-4) * 2);
    }
}
.track-lyrics__content {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.9;
    color: var(--white);
    /*white-space: pre-wrap;*/
}
.track-lyrics__content p { margin: 0 0 1.2em; }
.track-lyrics__content p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   15. GALERIES
   -------------------------------------------------------------------------- */
/* Grille et carte : voir « 13B. MEDIA CARD — SOCLE COMMUN » ci-dessus.
   La carte galerie n'a rien en propre au-delà du ratio 4:3 de sa vignette. */

/* Masonry */
.masonry-grid {
    columns: 1;
    column-gap: 2px;
}

@media (min-width: 481px) { .masonry-grid { columns: 2; } }
@media (min-width: 769px) { .masonry-grid { columns: 3; } }

.masonry-item {
    break-inside: avoid;
    position: relative;
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    cursor: pointer;
    background: var(--color-surface);
}

.masonry-img {
    width: 100%;
    display: block;
    transition: transform .4s ease, filter .4s ease;
    filter: grayscale(20%);
    opacity: 0;
}

.masonry-img.is-loaded { opacity: 1; }

.masonry-item:hover .masonry-img { transform: scale(1.03); filter: grayscale(0); }

.masonry-item__overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--red-rgb),.4);
    opacity: 0;
    transition: opacity var(--transition);
}

.masonry-item:hover .masonry-item__overlay,
.masonry-item:focus .masonry-item__overlay { opacity: 1; outline: 2px solid var(--red); }

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(var(--black-rgb),.96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.lightbox-overlay.is-open { opacity: 1; visibility: visible; }

.lightbox-container {
    position: relative;
    max-width: 100vw;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: calc(100vh - 180px);
    object-fit: contain;
    transition: opacity .2s ease;
}

.lightbox-caption {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--mid);
    text-align: center;
    margin-top: .75rem !important;
    padding: 0 var(--space-4);
}

.lightbox-counter {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--mid);
    text-align: center;
    margin-top: .25rem !important;
}

.lightbox-close {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    z-index: 1;
    width: 44px; height: 44px;
    background: none;
    border: 1px solid var(--gray);
    color: var(--mid);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
}

.lightbox-close:hover { border-color: var(--red); color: var(--red); }
.lightbox-close svg { width: 18px; height: 18px; }

.lightbox-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 1;
    width: 52px; height: 52px;
    background: none;
    border: 1px solid var(--gray);
    color: var(--mid);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
}

.lightbox-nav:hover { border-color: var(--white); color: var(--white); }
.lightbox-nav svg { width: 20px; height: 20px; }
.lightbox-prev { left: var(--space-2); }
.lightbox-next { right: var(--space-2); }
.lightbox-nav[hidden] { display: none; }

@media (min-width: 769px) {
    .lightbox-container { max-width: calc(100vw - 160px); }
    .lightbox-prev { left: var(--space-6); }
    .lightbox-next { right: var(--space-6); }
}

/* --------------------------------------------------------------------------
   15 bis. LIGHTBOX NATIVE DES BLOCS (galeries dans le contenu d'un article)
   Le CPT gallery a sa visionneuse maison ci-dessus ; les blocs galerie insérés
   dans un article utilisent celle de WordPress, qui arrive en gris clair. On lui
   applique exactement le même traitement, sans toucher au balisage de core.
   Chaque sélecteur est préfixé par `html` : wp-block-library est imprimé APRÈS la
   feuille du thème, donc à spécificité égale sa règle l'emporterait. L'élément en
   tête suffit à passer devant, sans recourir à !important.
   -------------------------------------------------------------------------- */
/* !important assumé, et limité aux deux seules propriétés que core écrit en
   attribut style : faute de theme.json, image.php code en dur #fff pour le fond
   et #000 pour les icônes. Un style en ligne ne se bat pas autrement. */
html .wp-lightbox-overlay .scrim { background-color: var(--black) !important; }

html .wp-lightbox-overlay .wp-lightbox-close-button,
html .wp-lightbox-overlay .wp-lightbox-close-button:not(:hover):not(:active):not(.has-background),
html .wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
html .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:not(:hover):not(:active):not(.has-background),
html .wp-lightbox-overlay .wp-lightbox-navigation-button-next,
html .wp-lightbox-overlay .wp-lightbox-navigation-button-next:not(:hover):not(:active):not(.has-background) {
    background: none;
    background-color: transparent;
    border: 1px solid var(--gray);
    border-radius: 0;
    color: var(--mid);
    fill: var(--mid) !important;
    transition: all var(--transition);
}

html .wp-lightbox-overlay .wp-lightbox-close-button { width: 44px; height: 44px; }

html .wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
html .wp-lightbox-overlay .wp-lightbox-navigation-button-next { width: 52px; height: 52px; }

/* Fermeture au rouge, navigation au blanc : même dissymétrie que la visionneuse
   du CPT gallery, à laquelle on s'aligne volontairement. */
html .wp-lightbox-overlay .wp-lightbox-close-button:hover {
    border-color: var(--red);
    color: var(--red);
    fill: var(--red) !important;
}

html .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:hover,
html .wp-lightbox-overlay .wp-lightbox-navigation-button-next:hover {
    border-color: var(--white);
    color: var(--white);
    fill: var(--white) !important;
}

html .wp-lightbox-overlay .wp-lightbox-close-icon svg { width: 18px; height: 18px; }
html .wp-lightbox-overlay .wp-lightbox-navigation-icon svg { width: 20px; height: 20px; }

html .wp-lightbox-overlay .wp-block-image figcaption {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--mid);
    background: none;
}

/* Galeries dans le contenu : core fixe `width: 50%` dans sa règle de base, sans
   media query, et ne la modifie qu'au-dessus de 600px. Deux photos restent donc
   côte à côte jusque sur un téléphone, où elles deviennent illisibles. On les
   empile sous le point de rupture du thème.
   Le `html` en tête est nécessaire : la règle de core embarque un
   `:not(#individual-image)`, donc une spécificité de niveau ID. */
@media (max-width: 768px) {
    html .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   16. NEWS / POSTS GRID
   -------------------------------------------------------------------------- */
.posts-grid {
    --rot-amp: .45;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--space-8);
    row-gap: var(--space-12);
    margin-top: var(--space-12);
}

@media (min-width: 769px) {
    .posts-grid {
        --rot-amp: 1;
        /* minmax(0, …) et non 1fr seul : 1fr ne descend jamais sous la largeur du
           plus long mot insécable, et une URL de 400 caractères dans un extrait
           élargissait toute sa colonne, cartes voisines comprises. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--space-16);
    }
}

@media (min-width: 1025px) {
    .posts-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--space-12);
        row-gap: var(--space-20);
    }
}

/* Une colonne sur deux est décalée vers le bas : rythme d'affiches placardées */
.posts-grid > :nth-child(even) { margin-top: 0; }

@media (min-width: 769px) {
    .posts-grid > :nth-child(even) { margin-top: var(--space-12); }
}

/* À 3 colonnes, « pair » ne désigne plus une colonne : le décalage suit la
   colonne du milieu. L'annulation de :nth-child(even) doit précéder la nouvelle
   règle — même spécificité, c'est l'ordre qui tranche. */
@media (min-width: 1025px) {
    .posts-grid > :nth-child(even)     { margin-top: 0; }
    .posts-grid > :nth-child(3n + 2)   { margin-top: var(--space-16); }
}

.posts-grid + .pagination { margin-top: var(--space-20); }

.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--gray);
    transform: rotate(var(--rot, 0deg));
    transition: transform .35s cubic-bezier(.2, .8, .3, 1),
                border-color var(--transition);
}

.posts-grid > .post-card:nth-child(4n+1) { --rot: calc(-1.4deg * var(--rot-amp)); }
.posts-grid > .post-card:nth-child(4n+2) { --rot: calc( 1.1deg * var(--rot-amp)); }
.posts-grid > .post-card:nth-child(4n+3) { --rot: calc( 0.8deg * var(--rot-amp)); }
.posts-grid > .post-card:nth-child(4n+4) { --rot: calc(-1deg   * var(--rot-amp)); }

/* :focus-within et non :focus-visible — l'<article> n'est plus focusable depuis
   qu'il a cédé sa fausse interactivité au lien étiré du titre (voir plus bas) */
.post-card:hover,
.post-card:focus-within {
    transform: rotate(0deg) translateY(-6px);
    border-color: var(--red);
    z-index: 2;
}

/* position: relative — référentiel du voile rouge, déclaré avec ceux des autres
   cartes en « 13B. MEDIA CARD » */
.post-card__image { position: relative; overflow: hidden; aspect-ratio: 4/3; }

.post-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease, filter .4s ease;
    filter: grayscale(20%);
    opacity: 0;
}

.post-card__image img.is-loaded { opacity: 1; }
.post-card:hover .post-card__image img,
.post-card:focus-within .post-card__image img { transform: scale(1.04); filter: grayscale(0); }

.post-card:hover .post-card__image::after,
.post-card:focus-within .post-card__image::after { opacity: 1; }

.post-card__body {
    padding: var(--space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 1025px) {
    .post-card__body { padding: var(--space-8); }
}

.post-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.post-card__meta time {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* La catégorie sort de la carte en tampon incliné */
.post-card__stamp {
    position: absolute;
    top: calc(var(--space-4) * -1);
    left: calc(var(--space-4) * -1);
    z-index: 2;
    padding: var(--space-1) var(--space-3);
    background: var(--black);
    border: 1px solid var(--red);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    white-space: nowrap;
    transform: rotate(-4deg);
    transition: background var(--transition), transform var(--transition);
}

/* En contexte recherche, le tampon indique le type de contenu au lieu de la
   catégorie : c'est un <span>, pas un lien. Son z-index le placerait au-dessus
   du lien étiré du titre et creuserait une zone morte dans le coin de la carte. */
span.post-card__stamp { pointer-events: none; }

.post-card:hover .post-card__stamp,
.post-card__stamp:hover {
    background: var(--red);
    color: var(--white);
    transform: rotate(-4deg) scale(1.04);
}

.post-card__title {
    font-size: var(--text-2xl);
    line-height: 1.05;
    color: var(--white);
}

@media (min-width: 1025px) {
    .post-card__title { font-size: var(--text-3xl); }
}
.post-card__title a { color: inherit; }

.post-card:hover .post-card__title a,
.post-card:focus-within .post-card__title a { color: var(--red); }

/* Carte cliquable d'un bloc, même procédé que les media cards (voir « 13B ») :
   le lien du titre est étiré par un ::after, faute de pouvoir englober la carte
   dans un <a> — elle porte trois autres liens (vignette, tampon de catégorie,
   « lire la suite »), et les liens ne s'imbriquent pas.

   Remplace un onclick="location.href" posé sur l'<article> avec tabindex="0" :
   un article n'étant pas un lien, Entrée ne le déclenchait pas au clavier, rien
   n'apparaissait dans la barre d'état au survol, et il fallait désamorcer la
   propagation sur chacun des autres liens de la carte. */
.post-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* overflow-wrap : pendant de minmax(0, 1fr) sur la grille — la colonne ne
   s'élargit plus, le mot trop long doit donc passer à la ligne plutôt que de
   déborder de la carte. */
.post-card__excerpt { font-size: var(--text-base); color: var(--mid); flex: 1; overflow-wrap: anywhere; }

/* z-index : repasser au-dessus du lien étiré pour rester cliquable. Le tampon
   de catégorie n'en a pas besoin, il est déjà en z-index: 2 plus haut. */
.post-card__footer {
    margin-top: auto;
    position: relative;
    z-index: 1;
}

/* « Lire la suite » est le double visible du lien étiré du titre : les deux
   mènent à l'article, il s'allume donc avec la carte et pas seulement sous le
   pointeur. Même parti pris que « Détails » sur la carte concert. */
.post-card:hover .post-card__footer .btn,
.post-card:focus-within .post-card__footer .btn {
    border-color: var(--white);
    color: var(--white);
}

/* Le reveal global pose un transform : on lui réinjecte l'inclinaison de la carte */
@media (prefers-reduced-motion: no-preference) {
    .posts-grid .post-card.reveal {
        transform: translateY(24px) rotate(var(--rot, 0deg));
        transition: opacity .5s ease,
                    transform .35s cubic-bezier(.2, .8, .3, 1),
                    border-color var(--transition),
                    box-shadow .35s ease;
    }
    .posts-grid .post-card.reveal.is-visible { transform: rotate(var(--rot, 0deg)); }
    .posts-grid .post-card.reveal.is-visible:hover,
    .posts-grid .post-card.reveal.is-visible:focus-within { transform: rotate(0deg) translateY(-6px); }
}

/* Single post */
.single-post { padding-top: var(--space-8); }

.post-meta-bar {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--gray);
    margin-bottom: var(--space-8);
    font-size: var(--text-sm);
    color: var(--mid);
    font-family: var(--font-mono);
}

.post-meta-bar__item {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.post-meta-bar__item svg { width: 14px; height: 14px; }

.post-tags {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray);
}

.post-tags__label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mid);
    margin-bottom: var(--space-3) !important;
}

.post-tags__list { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --------------------------------------------------------------------------
   17. ABOUT PAGE
   -------------------------------------------------------------------------- */
.band-about__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
    margin-bottom: var(--space-16);
}

@media (min-width: 1025px) {
    .band-about__layout {
        grid-template-columns: 1fr 1.5fr;
        gap: var(--space-16);
    }
}

.band-about__layout > * {
    min-width: 0;
}

.band-about__image img {
    width: 100%;
    filter: grayscale(20%);
}

@media (min-width: 1025px) {
    .band-about__image {
        position: sticky;
        top: calc(var(--header-height) + var(--space-6));
        align-self: start;
    }

    .band-about__image img {
        max-height: calc(100vh - var(--header-height) - var(--space-24));
        object-fit: cover;
    }
}

.about-meta {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.about-meta__label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mid);
    margin-bottom: .25rem !important;
}

.about-meta__value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--white);
    margin: 0 !important;
}

.about-meta__value--accent { color: var(--red); }

.band-members {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
}

@media (min-width: 769px) {
    .band-members { grid-template-columns: repeat(var(--members-cols, 4), minmax(0, 1fr)); }
}

.member-card { text-align: center; }

.member-card__photo {
    aspect-ratio: 9 / 16;
    overflow: hidden;
    margin-bottom: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--gray);
}

.member-card__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(30%);
    transition: filter var(--transition);
}

.member-card:hover .member-card__photo img { filter: grayscale(0); }

.member-card__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
}

.member-card__name { font-size: var(--text-xl); margin-bottom: .25rem; }
.member-card__role {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--red);
    margin: 0 !important;
}

.member-card__bio {
    font-size: var(--text-sm);
    color: var(--mid);
    margin-top: .5rem !important;
}

/* --------------------------------------------------------------------------
   18. TRACK SINGLE
   -------------------------------------------------------------------------- */
.track-single__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: start;
    margin-top: var(--space-6);
}

/* Mobile : la sidebar s'efface en tant que boîte pour que ses trois blocs
   deviennent des items de la grille. Cela permet de garder le rappel de l'album
   et le player en tête, mais de renvoyer la nav piste précédente/suivante après
   les paroles (voir l'`order` sur .track-single__nav). L'espacement passe alors
   par le `gap` de la grille, d'où les `margin-bottom` réservés au desktop. */
.track-single__sidebar { display: contents; }

/* Ces paliers doivent rester AVANT le bloc @media print : une page A4 mesure
   ~794px, donc un min-width: 769px s'y applique et écraserait l'impression. */
@media (min-width: 769px) {
    .track-single__body { grid-template-columns: 280px 1fr; }
    .track-single__sidebar {
        display: block;
        align-self: start;
        position: sticky;
        top: calc(var(--header-height) + var(--space-6));
    }
}

/* Album card — vignette à gauche sur mobile, empilée dès qu'il y a la place */
/* Tuile entièrement cliquable : le titre porte le lien vers l'album et son
   ::after (voir .card-link, section HOME GRID) couvre toute la tuile. La
   pochette n'est donc plus un lien — elle doublonnait la destination du titre. */
.track-album-card {
    position: relative;
    display: grid;
    grid-template-columns: 100px 1fr;
    border: 1px solid var(--gray);
    overflow: hidden;
}

.track-album-card:focus-within {
    outline: 2px solid var(--red);
    outline-offset: -2px;
}

.track-album-card .card-link:focus-visible { outline: none; }

@media (min-width: 769px) {
    .track-album-card {
        display: block;
        margin-bottom: var(--space-6);
    }
}

.track-album-card__cover { display: block; }
.track-album-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(15%); transition: filter var(--transition); }
.track-album-card:hover .track-album-card__cover img,
.track-album-card:focus-within .track-album-card__cover img { filter: grayscale(0%); }

@media (min-width: 769px) {
    .track-album-card__cover img { height: auto; object-fit: fill; }
}
.album-cover__placeholder {
    aspect-ratio: 1;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mid);
}

.track-album-card__info {
    padding: var(--space-3) var(--space-4);
    border-top: none;
    border-left: 1px solid var(--gray);
}

@media (min-width: 769px) {
    .track-album-card__info {
        border-top: 1px solid var(--gray);
        border-left: 0;
    }
}

.track-album-card__type {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--red);
    display: block;
    margin-bottom: .25rem;
}

.track-album-card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--white);
    margin-bottom: .25rem;
}
.track-album-card__title a { color: inherit; }
.track-album-card__title a:hover { color: var(--red); }

.track-album-card__year {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--mid);
}

/* Player */
@media (min-width: 769px) {
    .track-single__player { margin-bottom: var(--space-6); }
}

/* Track nav (prev/next within album) */
.track-single__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* Mobile uniquement : passe après les paroles. Au-delà de 769px la sidebar
       redevient `display: block`, ses enfants ne sont plus des items de grille
       et cet `order` est sans effet — la nav reprend sa place dans la colonne. */
    order: 1;
}

.track-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--gray);
    color: var(--white);
    transition: border-color var(--transition), background var(--transition);
    text-decoration: none;
}
.track-nav-link:hover { border-color: var(--red); background: var(--color-surface); }
.track-nav-link--next { justify-content: flex-end; text-align: right; }

.track-nav-link__icon { color: var(--red); flex-shrink: 0; }
.track-nav-link__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.track-nav-link__title {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
}

/* Lyrics */
.track-video__title,
.track-lyrics-section__title,
.track-tabs__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--red);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--gray);
}

.track-lyrics-full {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 2;
    color: var(--white);
    /*white-space: pre-wrap;*/
}
.track-lyrics-full p { margin: 0 0 1.6em; }
.track-lyrics-full p:last-child { margin-bottom: 0; }
.track-lyrics-full h2,
.track-lyrics-full h3 {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mid);
    margin: 1.8em 0 .6em;
}

.track-no-lyrics {
    color: var(--mid);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    padding: var(--space-8) 0;
}

/* Tablatures — <details> natif : replié, le contenu reste indexable et
   accessible au clavier sans une ligne de JS. */
.track-lyrics-section + .track-tabs { margin-top: var(--space-16); }
.track-video + .track-lyrics-section,
.track-video + .track-tabs { margin-top: var(--space-16); }

/* Cible du lien « Clip » depuis la tracklist d'un album : sans ce retrait,
   l'en-tête collant recouvre le titre de la section à l'arrivée. */
.track-video[id] { scroll-margin-top: calc(var(--header-height) + var(--space-6)); }

/* Le leurre doit se lire comme une vignette YouTube, pas comme un bloc
   d'interface : ni cadre, ni voile sur la miniature. La galerie vidéo de la page
   presse garde le rendu d'origine, où le voile fait ressortir le titre affiché
   par-dessus. */
.track-video .embed-wrapper { border: 0; }
.track-video .embed-placeholder__thumb { opacity: 1; filter: none; }

.track-tab {
    border: 1px solid var(--gray);
    margin-bottom: var(--space-4);
}
.track-tab:last-child { margin-bottom: 0; }

.track-tab__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4);
    cursor: pointer;
    list-style: none;
}
.track-tab__head::-webkit-details-marker { display: none; }

/* Variante non repliable : sans relevé en texte, l'en-tête n'ouvre rien. */
.track-tab--flat .track-tab__head { cursor: default; }
.track-tab--flat .track-tab__head:hover .track-tab__instrument { color: var(--white); }

@media (min-width: 769px) {
    .track-tab__head {
        flex-wrap: nowrap;
        gap: var(--space-4);
    }
}
.track-tab__head:hover .track-tab__instrument { color: var(--red); }

.track-tab__instrument {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1;
    color: var(--white);
    transition: color var(--transition);
}

.track-tab__meta {
    flex-basis: 100%;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mid);
}

.track-tab__chevron {
    order: -1;
    margin-left: auto;
    align-self: center;
    color: var(--red);
    display: flex;
}

@media (min-width: 769px) {
    .track-tab__meta    { flex-basis: auto; }
    .track-tab__chevron { order: 0; }
}
.track-tab__chevron svg { width: 16px; height: 16px; transition: transform var(--transition); }
.track-tab[open] .track-tab__chevron svg { transform: rotate(180deg); }

.track-tab__body { padding: 0 var(--space-4) var(--space-4); }

.track-tab__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.track-tab__file-meta { opacity: .65; }

/* Une tablature fait ~80 colonnes : elle défile dans sa boîte, jamais la page. */
.track-tab__scroll {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: var(--space-3);
}
.track-tab__scroll:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }

/* Dernier palier avant @media print — voir la note plus haut. */
@media (min-width: 769px) {
    .track-tab__scroll { padding: var(--space-4); }
}

.track-tab__content {
    font-family: var(--font-mono);
    font-size: clamp(0.65rem, 2.4vw, 0.8rem);
    line-height: 1.5;
    color: var(--white);
    white-space: pre;
    tab-size: 4;
    margin: 0;
}

.track-tab__credit {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--mid);
    margin-top: var(--space-3);
}

/* Impression d'une tablature : on garde le titre du morceau, les paroles et les
   tablatures, y compris celles repliées — les navigateurs n'impriment pas les
   fonds, d'où l'inversion explicite des couleurs. */
@media print {
    .site-header,
    .site-footer,
    .page-hero,
    .breadcrumb,
    .track-single__sidebar,
    .track-video,
    .track-tab__actions,
    .track-tab__chevron { display: none !important; }

    body { background: var(--print-bg); color: var(--print-ink); }
    .track-single__body { display: block; }

    .track-tabs__title,
    .track-lyrics-section__title,
    .track-lyrics-full,
    .track-tab__instrument,
    .track-tab__content { color: var(--print-ink); }

    .track-tab__meta,
    .track-tab__credit { color: var(--color-text-subtle); }

    .track-tab {
        border-color: var(--color-text-subtle);
        break-inside: avoid;
    }
    .track-tab > .track-tab__body {
        display: block !important;
        content-visibility: visible !important;
    }
    .track-tab__scroll {
        overflow: visible;
        background: none;
        border: 0;
        padding: 0;
    }
    .track-tab__content { font-size: 8pt; }
}

/* Index des tablatures (page-tablatures.php) — groupé par sortie */
.tabs-intro { margin-bottom: var(--space-10); }

.tabs-group { margin-bottom: var(--space-12); }
.tabs-group:last-child { margin-bottom: 0; }

.tabs-group__title {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.1;
    color: var(--white);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--gray);
}
.tabs-group__title a { color: inherit; }
.tabs-group__title a:hover { color: var(--red); }

.tabs-group__year {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .1em;
    color: var(--mid);
}

.tabs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tabs-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}
.tabs-item:last-child { border-bottom: 0; }

.tabs-item__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--white);
}
.tabs-item__title:hover { color: var(--red); }

.tabs-item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.filter-tab__count {
    margin-left: .4rem;
    font-size: .6rem;
    opacity: .6;
}

/* Plus de bloc max-width: 768px pour la fiche titre — tout est en mobile-first,
   paliers en min-width sous chaque composant, placés avant @media print. */

/* legacy alias */
.post-content--lyrics { white-space: pre-line; }

/* --------------------------------------------------------------------------
   19. POST CONTENT
   -------------------------------------------------------------------------- */
.post-content {
    color: var(--mid);
    line-height: 1.8;
    font-size: var(--text-base);
}

.post-content h1, .post-content h2, .post-content h3,
.post-content h4, .post-content h5, .post-content h6 {
    color: var(--white);
    margin-top: 1.5em;
    margin-bottom: .5em;
}

.post-content h2 { font-size: var(--text-3xl); }
.post-content h3 { font-size: var(--text-2xl); }

.post-content p { margin-bottom: 1em; }

.post-content a { color: var(--red); }
.post-content a:hover { color: var(--white); }

.post-content ul, .post-content ol {
    list-style: disc;
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.post-content ol { list-style: decimal; }
.post-content li { margin-bottom: .25em; }

.post-content blockquote {
    border-left: 3px solid var(--red);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-8) 0;
    background: rgba(var(--red-rgb),.05);
    font-style: italic;
    color: var(--white);
}

.post-content img { border: 1px solid var(--gray); }

.post-content code {
    font-family: var(--font-mono);
    font-size: .9em;
    background: var(--color-surface-2);
    padding: .1em .4em;
    color: var(--white);
}

.post-content pre {
    background: var(--color-surface);
    padding: var(--space-6);
    border: 1px solid var(--gray);
    overflow-x: auto;
    margin: var(--space-6) 0;
}

.post-content pre code { background: none; padding: 0; }

.post-content table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; }
.post-content th { background: var(--color-surface); color: var(--white); text-align: left; }
.post-content th, .post-content td { padding: .75rem var(--space-4); border: 1px solid var(--gray); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   20. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    padding: var(--space-4) 0;
    margin-bottom: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--mid);
    letter-spacing: .05em;
}

.breadcrumb a { color: var(--mid); }
.breadcrumb a:hover { color: var(--red); }

.breadcrumb__separator { color: var(--gray); margin: 0 .25rem; }
.breadcrumb__current { color: var(--white); }

/* --------------------------------------------------------------------------
   21. PAGINATION
   -------------------------------------------------------------------------- */
.pagination { margin-top: var(--space-12); }

.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--gray);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mid);
    transition: all var(--transition);
}

.pagination .page-numbers:hover { border-color: var(--white); color: var(--white); }
.pagination .page-numbers.current { border-color: var(--red); color: var(--white); background: rgba(var(--red-rgb),.1); }
.pagination .page-numbers svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   22. POST NAVIGATION (prev/next)
   -------------------------------------------------------------------------- */
.post-navigation {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: var(--space-12);
    border-top: 2px solid var(--gray);
    padding-top: var(--space-8);
}

@media (min-width: 769px) {
    .post-navigation { grid-template-columns: 1fr 1fr; }

    /* Premier et dernier contenu : le lien restant garde sa colonne, sans
       qu'un élément vide serve de cale. */
    .post-nav-link--next:first-child { grid-column: 2; }
}

.post-nav-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--gray);
    transition: border-color var(--transition);
}

.post-nav-link:hover { border-color: var(--red); }

.post-nav-link--next { justify-content: flex-end; text-align: right; }

.post-nav-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0;
}

.post-nav-link--next .post-nav-text { align-items: flex-end; }

.post-nav-thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
    opacity: .8;
    transition: opacity var(--transition);
}

.post-nav-link:hover .post-nav-thumb { opacity: 1; }

.post-nav-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mid);
}

.post-nav-label svg { width: 14px; height: 14px; }

.post-nav-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   23. EMBEDS (YouTube / Spotify / Bandcamp)
   -------------------------------------------------------------------------- */
.embed-wrapper {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--gray);
}

.embed-wrapper iframe[src*="openstreetmap"] {
    filter: invert(90%) hue-rotate(180deg) saturate(0.6) brightness(0.85);
}

.embed-wrapper--video {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.embed-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    cursor: pointer;
    /* C'est un <button> parce que le lecteur ne se charge qu'au clic : sans ce
       reset, le cadre natif du navigateur se dessine par-dessus la vignette. */
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    background: var(--color-surface);
    transition: background var(--transition);
}

.embed-placeholder:hover { background: var(--color-surface-raised); }

.embed-placeholder__thumb {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .6;
    filter: grayscale(30%);
}

.embed-placeholder__play {
    position: relative;
    z-index: 1;
    width: 64px; height: 64px;
    background: var(--red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition), background var(--transition);
}

.embed-placeholder:hover .embed-placeholder__play {
    transform: scale(1.1);
    background: var(--red-dim);
}

.embed-placeholder__play svg { width: 24px; height: 24px; color: var(--white); margin-left: 3px; }

.embed-placeholder__label {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--white);
}

.embed-frame {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    display: none;
    border: none;
}

.embed-frame.is-loaded { display: block; }

.bandcamp-embed {
    position: relative;
}

.bandcamp-embed .embed-frame {
    position: static;
    display: none;
    width: 100%;
}

.bandcamp-embed .embed-frame.is-loaded { display: block; }
.bandcamp-embed iframe{
    width: 100%;
    border:0;
}

/* --------------------------------------------------------------------------
   24. ERROR 404
   -------------------------------------------------------------------------- */
div.error404 {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    padding: var(--space-16) 0;
}

div.error404 .error404__number {
    font-family: var(--font-display);
    font-size: clamp(8rem, 25vw, 18rem);
    line-height: .9;
    color: var(--gray);
    margin-bottom: var(--space-6);
    opacity: .3;
    user-select: none;
}

div.error404 h1 {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}

div.error404 .error404__msg {
    color: var(--mid);
    margin: 0 auto var(--space-8) !important;
}

div.error404 .error404__btns {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   25. EMPTY STATES
   -------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: var(--space-16) 0;
    color: var(--mid);
}

.empty-state__icon {
    font-size: 4rem;
    margin-bottom: var(--space-4) !important;
    display: block;
}

.empty-state h2 { color: var(--white); margin-bottom: var(--space-3); }

/* --------------------------------------------------------------------------
   26. REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .5s ease, transform .5s ease;
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   27. UTILITY CLASSES
   -------------------------------------------------------------------------- */
.text-upper  { text-transform: uppercase; }
.text-muted  { color: var(--mid); }
.text-xs     { font-size: var(--text-xs); }
.text-primary{ color: var(--red); }
.text-mono   { font-family: var(--font-mono); }
.h4          { font-family: var(--font-display); font-size: var(--text-xl); color: var(--white); margin-bottom: var(--space-4); }
.h5          { font-family: var(--font-display); font-size: var(--text-lg);  color: var(--white); margin-bottom: var(--space-3); }

/* --------------------------------------------------------------------------
   28. CONCERTS MAP
   -------------------------------------------------------------------------- */
.concerts-map-wrap {
    margin-bottom: var(--space-8);
    border: 1px solid var(--gray);
    position: relative;
}

/* Même filtre que l'iframe OSM du single — appliqué aux tuiles seulement */
.concerts-map-wrap .leaflet-tile-pane {
    filter: invert(90%) hue-rotate(180deg) saturate(0.6) brightness(0.85);
}

.concerts-map-wrap[hidden] { display: none; }

#concerts-map {
    height: 380px;
    width: 100%;
    background: var(--color-surface);
}

/* Carte de la fiche concert : même habillage que la carte de la liste,
   en colonne de droite face aux informations pratiques. */
.concert-map-block .concerts-map-wrap { margin-bottom: var(--space-3); }

#single-concert-map {
    height: 300px;
    width: 100%;
    background: var(--color-surface);
}

@media (min-width: 769px) {
    #single-concert-map { height: 380px; }
}

.concert-map-links {
    display: flex;
    gap: var(--space-2);
    margin: 0;
}

.concert-map-links .btn { flex: 1; justify-content: center; }

/* Marqueur personnalisé */
.concert-map-pin {
    width: 14px;
    height: 14px;
    background: var(--red);
    border-radius: 50%;
    border: 2px solid var(--white);
    box-shadow: 0 0 0 3px rgba(var(--red-rgb), .35), 0 2px 6px rgba(var(--black-rgb), .6);
    cursor: pointer;
    transition: transform .15s ease;
}

.concert-map-pin:hover { transform: scale(1.4); }

/* Statuts : mêmes couleurs que les badges correspondants. Une date annulée
   s'éteint en gris, un report passe en ambre, un complet en rouge clair. */
.concert-map-pin--cancelled {
    background: var(--mid);
    box-shadow: 0 0 0 3px rgba(var(--mid-rgb), .3), 0 2px 6px rgba(var(--black-rgb), .6);
}

.concert-map-pin--postponed,
.concert-map-pin--rescheduled {
    background: var(--warning);
    box-shadow: 0 0 0 3px rgba(var(--warning-rgb), .3), 0 2px 6px rgba(var(--black-rgb), .6);
}

.concert-map-pin--soldout {
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .3), 0 2px 6px rgba(var(--black-rgb), .6);
}

/* Popup Leaflet — thème sombre */
.leaflet-popup-content-wrapper {
    background: var(--color-surface-raised) !important;
    border: 1px solid var(--gray) !important;
    border-radius: 0 !important;
    color: var(--white) !important;
    box-shadow: 0 4px 20px rgba(var(--black-rgb),.6) !important;
    padding: 0 !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    padding: 14px 16px !important;
    min-width: 180px;
}

.leaflet-popup-tip { background: var(--color-surface-raised) !important; }

.leaflet-popup-close-button {
    color: var(--mid) !important;
    font-size: 18px !important;
    top: 6px !important;
    right: 8px !important;
}

.leaflet-popup-close-button:hover { color: var(--white) !important; }

/* Texte blanc et non rouge : à 10px, le rouge sur la surface sombre plafonne à
   3.67:1, sous le seuil WCAG AA. L'accent rouge passe par le filet de gauche,
   qui n'a pas de texte à porter. */
.concert-popup__date {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--white);
    border-left: 2px solid var(--red);
    padding-left: 6px;
    margin-bottom: 6px;
}

/* La ville tient le titre de la bulle, la salle et le pays viennent ensuite —
   même hiérarchie que la liste des concerts et le hero de la fiche. */
.concert-popup__city {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: .03em;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 2px;
}

.concert-popup__venue,
.concert-popup__country {
    font-size: 12px;
    color: var(--mid);
}

/* Le badge de statut hérite d'un font-size de 11px de Leaflet : on le ramène à
   l'échelle de la bulle. */
.concert-popup__status { margin-top: 6px; }
.concert-popup__status .badge { font-size: 9px; padding: 2px 6px; }

/* Même raison que .concert-popup__date : le lien reste identifiable par son
   soulignement rouge, sans faire porter le rouge au texte de 10px.
   Le sélecteur est préfixé par .leaflet-container parce que leaflet.css, chargé
   après main.css, impose `.leaflet-container a { color: #0078A8 }` — plus
   spécifique qu'une simple classe, d'où un lien bleu sans ce préfixe. */
.leaflet-container a.concert-popup__link {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--white);
    border-bottom: 1px solid var(--red);
    transition: border-color .15s, color .15s;
}

.leaflet-container a.concert-popup__link:hover { border-color: var(--white); color: var(--white); }

/* Contrôles Leaflet */
.leaflet-control-zoom a {
    background: var(--color-surface-raised) !important;
    color: var(--white) !important;
    border-color: var(--gray) !important;
}

.leaflet-control-zoom a:hover { background: var(--color-border) !important; }

.leaflet-bar { border: 1px solid var(--gray) !important; box-shadow: none !important; border-radius: 0 !important; }

.leaflet-control-attribution {
    background: rgba(var(--black-rgb),.7) !important;
    color: var(--mid) !important;
    font-size: 9px !important;
}

.leaflet-control-attribution a { color: var(--mid) !important; }

/* --------------------------------------------------------------------------
   29. BOOKING / PRESSE (EPK)
   -------------------------------------------------------------------------- */
.band-press .container { padding-bottom: var(--space-24); }

.press-section { padding-top: var(--space-16); }
.press-section[id] { scroll-margin-top: calc(var(--header-height) + var(--space-6)); }

/* Accroche : bloc éditorial pleine largeur, pas une "carte" */
.press-pitch {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 5.5vw, var(--text-6xl));
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--white);
    max-width: 24ch;
    margin: var(--space-6) 0 0;
}

/* Écoute — vidéos (galerie) puis sorties Bandcamp */
.press-videos {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.press-videos__player { position: relative; }

.press-videos .embed-placeholder {
    border: 0;
    width: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
}

.press-videos__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

@media (min-width: 481px) {
    .press-videos__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 769px) {
    .press-videos__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

.press-video-thumb {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 1px solid transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: var(--mid);
    transition: border-color var(--transition), color var(--transition);
}

.press-video-thumb:hover { border-color: var(--gray); color: var(--white); }
.press-video-thumb.is-active { border-color: var(--red); color: var(--white); }

.press-video-thumb__img {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.press-video-thumb__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(40%);
    transition: filter var(--transition);
}

.press-video-thumb:hover .press-video-thumb__img img,
.press-video-thumb.is-active .press-video-thumb__img img { filter: grayscale(0); }

.press-video-thumb__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    opacity: 0;
    transition: opacity var(--transition);
}

.press-video-thumb__play svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 3px rgba(var(--black-rgb),.6)); }
.press-video-thumb:hover .press-video-thumb__play,
.press-video-thumb.is-active .press-video-thumb__play { opacity: 1; }

.press-video-thumb__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.3;
    letter-spacing: .02em;
    padding: var(--space-2) var(--space-1) var(--space-1);
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Photos HD — cœur de page, pleine couleur, chrome minimal */
.press-photos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 481px) {
    .press-photos { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (min-width: 769px) {
    .press-photos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

.press-photo__thumb {
    display: block;
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--color-surface);
}

.press-photo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}

.press-photo__thumb:hover .press-photo__img { transform: scale(1.04); }

.press-photo__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: rgba(var(--black-rgb), .55);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: 0;
    transition: opacity var(--transition);
}

.press-photo__thumb:hover .press-photo__overlay,
.press-photo__thumb:focus-visible .press-photo__overlay { opacity: 1; }
.press-photo__overlay svg { width: 18px; height: 18px; }

.press-photo__cap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: var(--space-2) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    color: var(--mid);
}

.press-photo__credit { color: var(--color-text-subtle); text-transform: uppercase; }

.press-photos__note {
    font-size: var(--text-sm);
    color: var(--mid);
    max-width: 70ch;
    margin-top: var(--space-6);
}

/* Fichiers — liste, séparée par des filets (pas de cartes) */
.press-files {
    border-top: 1px solid var(--gray);
}

.press-file {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-4);
    row-gap: var(--space-2);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--gray);
}

@media (min-width: 769px) {
    .press-file {
        grid-template-columns: 1fr auto auto;
        row-gap: var(--space-4);
    }
}

.press-file__body { min-width: 0; }

.press-file__label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--white);
    line-height: 1.1;
}

.press-file__desc { font-size: var(--text-sm); color: var(--mid); }

.press-file__meta {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-text-subtle);
    white-space: nowrap;
}

@media (min-width: 769px) {
    .press-file__meta { grid-column: auto; }
}

/* Contacts — liste sur colonnes, séparateurs en filet, sans fond ni boîte */
.press-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-8) var(--space-12);
}

.press-contact {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-4);
    border-top: 2px solid var(--white);
}

.press-contact__role {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--red);
    margin-bottom: var(--space-2) !important;
}

.press-contact__name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--white);
    line-height: 1.1;
}

.press-contact__org {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--mid);
    margin-top: var(--space-1) !important;
}

.press-contact__reach {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.press-contact__line {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--white);
    font-size: var(--text-sm);
}

.press-contact__line:hover { color: var(--red); }

/* Bouton copier */
.press-copy {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid var(--gray);
    color: var(--mid);
    cursor: pointer;
    padding: .25rem;
    flex-shrink: 0;
    transition: color var(--transition), border-color var(--transition);
}

.press-copy:hover { color: var(--white); border-color: var(--white); }
.press-copy svg { width: 13px; height: 13px; }

.press-copy__idle,
.press-copy__done { display: inline-flex; align-items: center; gap: .4rem; }
.press-copy__done { display: none; color: var(--red); }
.press-copy.is-copied .press-copy__idle { display: none; }
.press-copy.is-copied .press-copy__done { display: inline-flex; }
.press-copy.is-copied { border-color: var(--red); }

.press-copy--labelled {
    padding: .35rem .8rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Fiche technique — liste label → valeur (spec sheet), 2 colonnes de lignes */
.press-specs {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 0;
    margin-bottom: var(--space-8);
}

@media (min-width: 769px) {
    .press-specs {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--space-10);
    }
}

.press-specs__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--gray);
}

.press-specs__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mid);
    white-space: nowrap;
}

.press-specs__value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--white);
    text-align: right;
}

.press-backline {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-8);
}

.press-backline th,
.press-backline td {
    border-bottom: 1px solid var(--gray);
    padding: .75rem 0;
    padding-right: var(--space-6);
    text-align: left;
    font-size: var(--text-sm);
    vertical-align: baseline;
}

.press-backline thead th {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mid);
    font-weight: 400;
    border-bottom-color: var(--white);
}

.press-backline tbody th {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--white);
    white-space: nowrap;
    width: 30%;
}

.press-backline tbody td { color: var(--mid); }
.press-tech-notes { max-width: 70ch; margin-top: var(--space-2); }

/* Biographie — bio courte en encart latéral */
.press-bio {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
}

@media (min-width: 769px) {
    .press-bio {
        grid-template-columns: 300px 1fr;
        gap: var(--space-10);
    }
}

.press-bio__short {
    border-left: 2px solid var(--red);
    padding-left: var(--space-5);
}

@media (min-width: 769px) {
    .press-bio__short {
        position: sticky;
        top: calc(var(--header-height) + var(--space-6));
    }
}

.press-bio__short-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.press-bio__short-text {
    color: var(--white);
    font-size: var(--text-base);
    white-space: pre-line;
}

/* Revue de presse */
.press-quotes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8) var(--space-10);
}

@media (min-width: 769px) {
    .press-quotes { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

.press-quote {
    border-left: 2px solid var(--red);
    padding-left: var(--space-6);
}

.press-quote__text {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--white);
}

.press-quote__source {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mid);
}

.press-quote__source a { color: var(--red); }
.press-quote__source a:hover { color: var(--white); }
.press-quote__date { color: var(--color-text-subtle); }

/* --------------------------------------------------------------------------
   30. FORMULAIRE DE CONTACT

   Rendu par le shortcode [band_contact] (inc/contact-form.php), donc posable
   dans n'importe quelle page ou article : les règles ne présument d'aucun
   conteneur et bornent leur largeur elles-mêmes, une ligne de saisie qui court
   sur 1280 px ne se lit plus.
   -------------------------------------------------------------------------- */
.band-contact {
    max-width: 46rem;
    margin-bottom: var(--space-12);
}

.band-contact__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    letter-spacing: .02em;
    margin-bottom: var(--space-6);
}

/* Les trois retours possibles d'un envoi. Le filet de gauche porte la couleur,
   comme les autres encarts du thème : un fond teinté sur une palette sombre
   passe sous le seuil de contraste. */
.band-contact__notice {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
    background: var(--color-surface);
    border-left: 3px solid var(--gray);
    font-size: var(--text-sm);
}

.band-contact__notice--ok    { border-left-color: var(--success); }
.band-contact__notice--warn  { border-left-color: var(--warning); }
.band-contact__notice--error { border-left-color: var(--danger); }

.band-contact__notice ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
}

.band-contact__grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 601px) {
    .band-contact__grid { grid-template-columns: 1fr 1fr; }
}

/* Les champs sont des <p> : la règle typographique p + p leur ajouterait un
   margin-top de .75em, qui décale le second champ de la grille (e-mail) sous
   le premier et double les écarts entre les champs suivants. */
.band-contact__form p + p { margin-top: 0; }

.band-contact__field { margin-bottom: var(--space-4); }
.band-contact__grid .band-contact__field { margin-bottom: 0; }

.band-contact__field label {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mid);
}

.band-contact__req { color: var(--red); }

.band-contact__field input,
.band-contact__field select,
.band-contact__field textarea {
    width: 100%;
    padding: .6rem .8rem;
    background: var(--color-surface);
    border: 1px solid var(--gray);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-family: var(--font-ui);
    font-size: var(--text-base);
}

/* Sans cet indice, certains navigateurs rendent la liste déroulante native
   avec un fond clair, quelles que soient les couleurs déclarées au-dessus. */
.band-contact__field select { color-scheme: dark; }
.band-contact__field select option { background: var(--color-surface); color: var(--white); }

.band-contact__field textarea { resize: vertical; min-height: 10rem; }

.band-contact__field input:focus,
.band-contact__field select:focus,
.band-contact__field textarea:focus {
    border-color: var(--red);
    outline: none;
}

/* Pot de miel : hors de l'écran plutôt qu'en display:none, que certains robots
   savent lire pour ignorer le champ. */
.band-contact__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.band-contact__consent {
    display: block;
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.band-contact__consent label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.band-contact__consent input { margin-top: .2rem; accent-color: var(--red); flex-shrink: 0; }
.band-contact__consent a { color: var(--red); }
.band-contact__consent a:hover { color: var(--white); }

.band-contact__actions { margin: 0; }
.band-contact__form button[disabled] { opacity: .6; cursor: default; }

/* --------------------------------------------------------------------------
   31. RESPONSIVE
   -------------------------------------------------------------------------- */
/* Plus de bloc max-width: 1024px — tous ses composants sont en mobile-first,
   leurs paliers (min-width: 1025px) vivent sous chacun d'eux. */

/* Dernier bloc max-width du thème. Il ne sert plus qu'à .album-mini-row, laissée
   volontairement en desktop-first : son masquage progressif par
   :nth-child(n+N) { display: none } demanderait, en mobile-first, de ré-afficher
   le seuil précédent avant de masquer le suivant à chaque palier. */
@media (max-width: 768px) {
    .album-mini-row { gap: 8px; }
}

/* Plus de bloc max-width: 480px — masonry, carte concert et photos EPK sont en
   mobile-first, leurs paliers (min-width: 481px) vivent sous chaque composant. */


/* ── Blocs embed WordPress (YouTube, Vimeo…) ──────────────────────────── */
.wp-block-embed {
  width: 100%;
  margin: 1.5em 0;
}

.wp-block-embed__wrapper {
  position: relative;
  width: 100%;
}

.wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.wp-embed-aspect-4-3  .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }

.wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Blocs bouton WordPress : mise en page seule ───────────────────────────
   L'apparence du bouton lui-même vit en section 7 (BUTTONS), sur les mêmes
   règles que `.btn`. */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

.wp-block-button { margin: 0; }

/* ==========================================================================
   Shortcode : chronologie des musiciens
   ========================================================================== */

.chronologie-scroll {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 4px;
    margin-bottom: var(--space-8);
    overscroll-behavior-x: contain;
}

/* Un item de grille/flex a min-width:auto : sans ça, il s'élargit
   à la largeur de la table au lieu de laisser le wrapper défiler. */
.post-content,
.band-about__text,
.entry-content {
    min-width: 0;
}

#shortcode_chronologie_musiciens {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 480px;
    font-size: .8125rem;
    background: var(--color-surface);
}

@media (min-width: 641px) {
    #shortcode_chronologie_musiciens {
        min-width: 560px;
        font-size: .875rem;
    }
}

#shortcode_chronologie_musiciens th,
#shortcode_chronologie_musiciens td {
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 5px 6px;
    text-align: center;
    vertical-align: middle;
    color: var(--color-text);
}

#shortcode_chronologie_musiciens thead th {
    border-top: 1px solid var(--color-border);
}

#shortcode_chronologie_musiciens th:first-child,
#shortcode_chronologie_musiciens td:first-child {
    border-left: 1px solid var(--color-border);
}

#shortcode_chronologie_musiciens thead th {
    background: var(--black);
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: .625rem;
    font-family: var(--font-mono);
}

@media (min-width: 641px) {
    #shortcode_chronologie_musiciens th,
    #shortcode_chronologie_musiciens td { padding: 6px 10px; }

    #shortcode_chronologie_musiciens thead th {
        font-size: .75rem;
        letter-spacing: .05em;
    }
}

#shortcode_chronologie_musiciens thead th:first-child,
#shortcode_chronologie_musiciens tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--color-border);
}

#shortcode_chronologie_musiciens thead th:first-child {
    z-index: 2;
}

#shortcode_chronologie_musiciens tbody td:first-child {
    background: var(--color-surface);
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-family: var(--font-mono);
}

/* Les postes étant saisis en admin, la couleur ne peut plus être une classe par
   instrument : chaque cellule occupée porte le rang de sa teinte, résolu ici. */
#shortcode_chronologie_musiciens .lineup-role {
    background: rgba(var(--role-rgb), 0.32);
    color: var(--role-ink);
}

.lineup-role[data-tint="1"] { --role-rgb: var(--role-1-rgb); --role-ink: var(--role-1-ink); }
.lineup-role[data-tint="2"] { --role-rgb: var(--role-2-rgb); --role-ink: var(--role-2-ink); }
.lineup-role[data-tint="3"] { --role-rgb: var(--role-3-rgb); --role-ink: var(--role-3-ink); }
.lineup-role[data-tint="4"] { --role-rgb: var(--role-4-rgb); --role-ink: var(--role-4-ink); }
.lineup-role[data-tint="5"] { --role-rgb: var(--role-5-rgb); --role-ink: var(--role-5-ink); }
.lineup-role[data-tint="6"] { --role-rgb: var(--role-6-rgb); --role-ink: var(--role-6-ink); }
.lineup-role[data-tint="7"] { --role-rgb: var(--role-7-rgb); --role-ink: var(--role-7-ink); }
.lineup-role[data-tint="8"] { --role-rgb: var(--role-8-rgb); --role-ink: var(--role-8-ink); }
.lineup-role[data-tint="9"] { --role-rgb: var(--role-9-rgb); --role-ink: var(--role-9-ink); }
.lineup-role[data-tint="10"] { --role-rgb: var(--role-10-rgb); --role-ink: var(--role-10-ink); }

/* Le tableau chronologie est en mobile-first : son palier (min-width: 641px)
   vit sous le composant, plus haut. */