/* ==========================================================================
   TidyMess — Site officiel
   Feuille de style principale
   ========================================================================== */

/* Typo fine du hero et des menus (réf. modèle) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400&display=swap");
/* Typo éditoriale sans serif de la biographie (style webzine musical) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ---------- Tokens ---------- */
:root {
  --bg: #0e0b12;
  --bg-2: #171221;
  --bg-3: #1f1830;
  --ink: #f4efe9;
  --muted: #a79fb3;
  --accent: #ff4d6d;
  --accent-2: #ffc94d;
  --line: rgba(244, 239, 233, 0.12);
  --font-display: "Syne", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  /* Pile de la page Biographie, réutilisée par le bloc réels */
  --font-bio: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max: 1200px;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--accent); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
/* Accueil : les blocs occupent une largeur plus généreuse */
body.home .wrap { max-width: 1560px; }
.section { padding: clamp(3rem, 8vw, 6rem) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.kicker {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 0.6rem;
}
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- Loader (réf. Jamiroquai) ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: background 0.9s ease, visibility 0.9s ease;
}
.loader.is-done { background: transparent; visibility: hidden; pointer-events: none; }
.loader-logo-wrap {
  position: relative; width: min(240px, 60vw); margin: 0 auto; line-height: 0;
  transition: opacity 0.9s ease;
}
.loader.is-done .loader-logo-wrap { opacity: 0; }
/* Nom de la page sous le logo : réglages de « Prochaines dates » sur
   l'accueil - pile Inter, graisse 700, capitales, interlettrage 0,14em.
   Il apparaît après le tracé du logo, pour ne pas voler la vedette. */
.loader-page {
  margin: 1.4rem 0 0; text-align: center;
  font-family: var(--font-bio); font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.7;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  /* Affiché dès la première image, pour toute la durée du chargement :
     plus d'apparition retardée. */
  transition: opacity 0.9s ease;
}
.loader.is-done .loader-page { opacity: 0; }
.loader-logo-wrap img { display: block; width: 100%; height: auto; }
.loader-logo-base { opacity: 0.16; }
.loader-logo-fill {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0);
  animation: loader-fill 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes loader-fill {
  to { clip-path: inset(0 0% 0 0); -webkit-clip-path: inset(0 0% 0 0); }
}

/* ---------- Header / navigation (réf. modèle : barre fixe transparente) ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent);
  transition: background 0.35s ease;
}
.site-header.is-scrolled {
  background: rgba(10, 8, 14, 0.88);
  backdrop-filter: blur(12px);
}
/* Un backdrop-filter fait de l'élément le référent des positions fixes qu'il
   contient. Dès qu'on avait défilé, le panneau du menu - « position: fixed »
   à l'intérieur de la barre - se calait donc sur cette barre haute de 61 px
   au lieu de l'écran : son fond se réduisait à rien, seuls les libellés
   restaient, posés à même la page. On suspend le flou le temps que le menu
   soit déplié ; le fond opaque de la barre suffit à le remplacer. */
.site-header:has(.nav-links.is-open) { backdrop-filter: none; }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem clamp(1.8rem, 4.5vw, 3.6rem);
}
.brand { display: none; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }

/* Menu : typo fine + soulignement au survol */
.nav-links li > a {
  position: relative; text-decoration: none;
  font-family: "Montserrat", var(--font-body);
  font-weight: 300; font-size: 0.82rem; letter-spacing: 0.12em;
  color: #fff; padding: 0.2rem 0;
}
.nav-links li > a::before {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-links li > a:hover::before, .nav-links li > a:focus-visible::before,
.nav-links li > a[aria-current="page"]::before { transform: scaleX(1); transform-origin: center; }

/* Icônes réseaux sociaux / streaming (haut droite, réf. modèle) */
.social-icons { display: flex; align-items: center; gap: 1.05rem; }
.social-icons a { color: #fff; display: inline-flex; opacity: 0.92; transition: opacity 0.25s, transform 0.25s; }
.social-icons a:hover { opacity: 1; transform: translateY(-2px); }
.social-icons svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 1100px) { .social-icons { display: none; } }

/* Sélecteur de langue, dernier élément du menu.
   Il est dans la même liste que les autres entrées : ses liens héritent donc
   de « .nav-links li > a », dont la spécificité l'emporterait sur une règle
   plus courte. D'où les sélecteurs enchaînés ci-dessous - il ne s'agit pas
   d'excès de zèle, mais du minimum pour reprendre la main sur la couleur.
   La langue courante est marquée par l'opacité plutôt que par une couleur :
   l'en-tête est clair sur certaines pages et sombre sur d'autres, et
   « currentColor » suit les deux sans qu'on ait à les traiter séparément. */
.nav-links li.lang-switch {
  display: flex; gap: 0.25rem; align-items: center;
  margin-left: 0.4rem;
}
.nav-links li.lang-switch > a { padding: 0.2rem 0; opacity: 0.45; }
.nav-links li.lang-switch > a::before { content: none; }   /* pas de soulignement au survol */
.nav-links li.lang-switch > a:hover { opacity: 0.8; }
.nav-links li.lang-switch > a.is-active {
  opacity: 1; text-decoration: underline; text-underline-offset: 5px;
}
.nav-links li.lang-switch > span { opacity: 0.3; font-size: 0.7rem; }

.burger {
  display: none; background: none; border: 1px solid var(--line); border-radius: 10px;
  padding: 0.5rem 0.65rem; cursor: pointer;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; transition: 0.3s; }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav-links {
    position: fixed; inset: 0; top: 61px; z-index: 90;
    flex-direction: column; justify-content: flex-start; padding-top: 3rem; gap: 1.8rem;
    background: rgba(14, 11, 18, 0.97);
    transform: translateX(100%); transition: transform 0.35s ease;
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links a { font-size: 1.2rem; }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  padding: 0.85rem 1.6rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #ff6a85; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Décalage sous le header fixe ---------- */
main { padding-top: 76px; }
body.home main { padding-top: 0; }

/* ---------- Hero plein écran sur photo (réf. modèle) ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background: url("../img/accueil.jpg") center 35% / cover no-repeat, var(--bg-2);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(10, 8, 14, 0.18);
}
.hero-inner {
  position: relative; z-index: 2; text-align: center;
  padding: 0 1.5rem;
  /* Le bloc est centré par le héro, puis descendu d'un cran : au centre
     exact il paraissait trop haut, le logo portant en plus une marge
     transparente dans son fichier. Une seule valeur à régler. */
  transform: translateY(21vh);
}
.hero-name { margin: 0 0 1.6rem; }
.hero-name img {
  width: clamp(260px, 42vw, 540px); height: auto;
  filter: drop-shadow(0 4px 26px rgba(0, 0, 0, 0.45));
}
.hero-tagline {
  font-family: "Montserrat", var(--font-body);
  font-weight: 300; font-size: clamp(0.72rem, 1.4vw, 0.95rem);
  letter-spacing: 0.38em; margin-right: -0.38em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.88);
  /* Halo serré : il durcit le contour des lettres sans se voir, ce qui
     permet de garder le fond très léger. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 9px rgba(0, 0, 0, 0.65);
  /* La photo du héro est très claire par endroits : sans ce fond, le texte
     blanc y devient illisible. Le retrait de droite est amputé de
     l'interlettrage, qui laisse sinon un blanc en trop après le dernier T. */
  display: inline-block;
  /* Le cadre épouse la phrase. À droite, l'interlettrage laisse déjà 0,38em
     après le dernier T : on ne met donc aucun retrait de ce côté, et on
     reprend la même valeur à gauche pour que la boîte reste symétrique. */
  padding: 0.14em 0 0.14em 0.36em;
  border-radius: 3px;
  background: rgba(10, 8, 12, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@keyframes hero-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
.hero-cta { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 2rem; }
/* Le conteneur se dimensionne sur la baseline.
   La réserve basse reproduit la place qu'occupait le lecteur (96 px + son écart),
   pour que le logo et la baseline gardent exactement leur position d'origine. */
.hero-copy {
  --cover-h: min(300px, 60vw, 34vh);
  width: max-content; max-width: 100%; margin: 0 auto;
}
/* Le bloc étant descendu, la pochette buterait sur le bas de l'écran :
   sur les fenêtres courtes on la réduit d'autant, plutôt que de
   remonter l'ensemble. */
@media (max-height: 940px) {
  .hero-copy { --cover-h: min(300px, 60vw, 29vh); }
}
@media (max-height: 820px) {
  .hero-copy { --cover-h: min(300px, 60vw, 25vh); }
}
/* marge annulée : la pochette porte désormais son propre écart */
.hero-copy .hero-tagline { margin-bottom: 0; }
/* Pochette dans le flux : logo, baseline et pochette forment un seul bloc,
   que le héro centre en hauteur. Elle était hors du flux tant qu'il fallait
   la poser sans déplacer le reste — ce n'est plus le cas. */
.ep-cover.hero-cover {
  display: block; margin: clamp(1.5rem, 4vh, 2.6rem) auto 0;
  width: var(--cover-h); height: auto; align-self: auto;
}
.ep-cover.hero-cover .ep-cover-play { width: 62px; height: 62px; }
.ep-cover.hero-cover .ep-cover-img { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
@keyframes wave-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Discographie (survol : agrandissement + légende en fondu, réf. samsmithworld.com) ---------- */
/* Accueil : vidéo teaser sous le héro (charte de la vidéo vedette, page Vidéos) */
/* Bloc compact : vidéo calée sous le héro, citation collée à la vidéo */
.home-video { background: #000; padding: 0 0 1.6rem; }
.home-video .vf-cap { margin-top: 0.25rem; }
/* Occupe toute la largeur du conteneur, comme la vedette occupe sa colonne sur la page Vidéos */
.home-video .vf-cell--feature { width: 100%; margin: 0 auto; }
/* Fichier vidéo local : lecture auto, muette, en boucle infinie */
.hv-wrap { position: relative; }
.home-video-file {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  display: block; background: #111;
  cursor: pointer;   /* un clic n'importe où bascule lecture / pause */
}
/* Commandes lecture / son : révélées au survol, masquées après 3 s d'immobilité */
.hv-controls {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 3;
  display: flex; gap: 0.6rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.hv-wrap.is-hovering .hv-controls { opacity: 1; visibility: visible; }
.hv-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.hv-btn:hover { background: rgba(0, 0, 0, 0.82); transform: scale(1.07); }
.hv-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }
/* Curseur de volume : se déplie au survol du bouton son */
.hv-vol-group { display: flex; align-items: center; }
.hv-vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 0; opacity: 0; margin-left: 0; height: 4px; border-radius: 2px;
  cursor: pointer; outline: none;
  background: linear-gradient(to right, #fff 0 var(--vol, 100%), rgba(255, 255, 255, 0.35) var(--vol, 100%) 100%);
  transition: width 0.25s ease, opacity 0.25s ease, margin-left 0.25s ease;
}
.hv-vol-group:hover .hv-vol-slider,
.hv-vol-slider:focus-visible { width: 88px; opacity: 1; margin-left: 0.65rem; }
.hv-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 0; cursor: pointer;
}
.hv-vol-slider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 0; cursor: pointer;
}
.home-video .vf-cap-t { font-size: 1.6rem; color: #fff; }
.home-video .vf-cap-s { color: rgba(255, 255, 255, 0.6); }
/* Citation presse sous la vidéo : discrète, typo de la page Biographie (Inter) */
.hv-quote-text {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400; font-size: 1rem; line-height: 1.7;
  letter-spacing: 0; font-style: italic; text-align: right;
  color: rgba(255, 255, 255, 0.72);
}
/* Source alignée à droite, précédée d'un long filet d'attribution */
.hv-quote-src {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem;
  margin-top: 0.45rem; font-style: normal;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.hv-quote-src::before {
  content: ""; display: block;
  width: clamp(3.5rem, 9vw, 7rem); height: 1px;
  background: currentColor; flex-shrink: 0;
}
.home-video .vf-cell .yt { background: #111; }

/* ---------- Pochette d'album animée (héro) ---------- */
/* Pochette cliquable : au survol, le disque sort à moitié et le bouton play apparaît.
   Pas d'overflow:hidden ici, sinon le disque serait rogné en sortant. */
.ep-cover {
  position: relative; z-index: 1; display: block;
  width: min(460px, 48vw); aspect-ratio: 1 / 1; align-self: start;
}
.ep-cover:hover, .ep-cover:focus-visible { z-index: 5; }
.ep-cover-img {
  position: relative; z-index: 2;
  width: 100%; height: 100%; object-fit: cover; display: block;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}
.ep-cd {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: contain; display: block;
  transform: translateX(0) rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.3));
}
.ep-cover:hover .ep-cd,
.ep-cover:focus-visible .ep-cd { transform: translateX(50%) rotate(22deg); }
.ep-cover-play {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  width: 74px; height: 74px;
  transform: translate(-50%, -50%) scale(0.82); opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ep-cover-play img { width: 100%; height: 100%; display: block; }
.ep-cover:hover .ep-cover-play,
.ep-cover:focus-visible .ep-cover-play {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
@media (hover: none) {
  .ep-cover .ep-cd { transform: none; }
  .ep-cover .ep-cover-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- Grilles / cartes ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.card:hover { transform: translateY(-5px); border-color: rgba(255, 77, 109, 0.5); }
.card-body { padding: 1.2rem 1.3rem 1.4rem; }
.card-meta { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.card h3 { margin: 0.4rem 0 0.5rem; }
.card p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.card:hover .card-more svg { transform: translateX(4px); }
.news-loader.is-active { display: flex; }
@keyframes news-dot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-5px); }
}

.thumb { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--bg-3); display: block; transition: transform 0.4s ease; }
.card:hover .thumb { transform: scale(1.06); }
.cover { aspect-ratio: 1; width: 100%; object-fit: cover; }

/* Pochettes placeholder (dégradés) */
.art {
  aspect-ratio: 1; display: flex; align-items: flex-end; padding: 1rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.15;
  letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.art-1 { background: linear-gradient(135deg, #ff4d6d, #7b2cbf); }
.art-2 { background: linear-gradient(135deg, #ffc94d, #ff4d6d); }
.art-3 { background: linear-gradient(135deg, #2cb67d, #16324f); }
.art-4 { background: linear-gradient(135deg, #4361ee, #b5179e); }
.art-5 { background: linear-gradient(135deg, #f72585, #3a0ca3); }
.art-6 { background: linear-gradient(135deg, #ff9e00, #6a040f); }
.art-7 { background: linear-gradient(135deg, #06d6a0, #118ab2); }
.art-8 { background: linear-gradient(135deg, #8338ec, #ff006e); }
.album-title .t {
  display: block; color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.album-title .y { display: block; margin-top: 0.3rem; color: rgba(255, 255, 255, 0.7); font-size: 0.72rem; letter-spacing: 0.14em; }
/* Pages Albums / Actualités : fond blanc */
body.albums-page { background: #fff; color: #1a1a1a; }
body.actualites-page { background: #000; color: #fff; }
body.albums-page main { padding-top: 76px; }
body.actualites-page main { padding-top: 58px; }
body.albums-page .album-section-head h2 { color: #111; }
/* Police alignée sur la page Biographie (Inter) */
body.albums-page .album-section-head h2,
body.albums-page .album-title .t,
body.albums-page .album-title .y {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Albums : le lecteur du HERO, centré en haut de page.
   Fond opaque : le noir translucide du HERO virerait au gris sur fond blanc. */
body.albums-page .albums-player { padding-bottom: 1.6rem; }
body.albums-page .yy-player {
  width: min(520px, 92vw); margin: 0 auto;
  background: #111; border-color: rgba(255, 255, 255, 0.14);
}

/* Actualités : même charte typographique (Inter) que Biographie / Albums / Vidéos / EPK */
body.actualites-page .news-tile-cat,
body.actualites-page .news-tile-title,
body.actualites-page .news-tile-more {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.actualites-page .news-tile-cat {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75); margin-bottom: 0.55rem;
}
body.actualites-page .news-tile-title {
  font-weight: 700; font-size: 1.18rem; line-height: 1.3;
  letter-spacing: -0.01em; text-transform: none;
}
body.actualites-page .news-tile-big .news-tile-title {
  font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.2; letter-spacing: -0.02em;
}
body.actualites-page .news-tile-more {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em;
}
body.actualites-page .news-tile { border-radius: 4px; }
body.albums-page .muted { color: #888; }
body.albums-page .site-header { background: none; }
body.albums-page .social-icons a { color: #1a1a1a; }
body.albums-page .lang-switch a { color: rgba(26, 26, 26, 0.45); }
body.albums-page .lang-switch .is-active,
body.albums-page .lang-switch a:not(.is-active):hover { color: #1a1a1a; }
body.albums-page .burger { border-color: rgba(26, 26, 26, 0.3); }
body.albums-page .burger span { background: #1a1a1a; }
@media (min-width: 901px) {
  body.albums-page .nav-links li > a { color: #1a1a1a; }
}
body.albums-page .singles-black .album-section-head h2 { color: #fff; }
.singles-black .muted { color: #9a9a9a; }

/* ---------- Vidéos : façade YouTube (lazy) ---------- */
.yt {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: var(--bg-3); cursor: pointer; border: 1px solid var(--line);
}
.yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); transition: 0.3s; }
.yt:hover img { filter: brightness(1); transform: scale(1.03); }
.yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border: none; cursor: pointer;
  background: url("../img/platforms/play_button.svg") center / contain no-repeat;
  font-size: 0; color: transparent;
  transition: transform 0.2s ease;
}
.yt:hover .yt-play { transform: translate(-50%, -50%) scale(1.07); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-title { margin-top: 0.7rem; }
.yt-title h3 { margin: 0; font-size: 1.05rem; }
.yt-title span { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Vidéos : grille éditoriale (réf. Visual Frame Studio) ---------- */
body.vf-page { background: #fff; color: #111; }
body.vf-page main { padding-top: 0; }
/* Header : texte sombre transparent sur fond blanc */
body.vf-page .site-header { background: none; }
body.vf-page .social-icons a { color: #111; }
body.vf-page .lang-switch a { color: rgba(17, 17, 17, 0.45); }
body.vf-page .lang-switch .is-active,
body.vf-page .lang-switch a:not(.is-active):hover { color: #111; }
body.vf-page .burger { border-color: rgba(17, 17, 17, 0.3); }
body.vf-page .burger span { background: #111; }
@media (min-width: 901px) { body.vf-page .nav-links li > a { color: #111; } }
/* Les deux clips vedettes se partagent la hauteur → taille identique */
.vf-feature-col .vf-cell--feature { flex: 1 1 0; min-height: 0; }
.vf-feature-col .vf-cell--feature .yt { flex: 1; aspect-ratio: auto; height: auto; min-height: 0; }
.vf-cell .yt {
  border-radius: 0; border: none; background: #ececec;
}
.vf-cell--feature { display: flex; flex-direction: column; }
.vf-cell--feature .yt { aspect-ratio: 16 / 9; }
.vf-cell--feature .vf-cap-t { font-size: 1.35rem; }
.vf-cell .yt img { filter: none; }
.vf-cell .yt:hover img { filter: brightness(1.03); transform: scale(1.03); }
.vf-cell .yt img { z-index: 0; }
.vf-cell .yt-play { z-index: 3; opacity: 0; transition: opacity 0.25s ease, transform 0.2s ease; }
.vf-cell .yt:hover .yt-play { opacity: 1; }
/* Aperçu vidéo muet (5 s) au survol */
.vf-cell .yt-preview { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #000; }
.vf-cell .yt-preview iframe { position: absolute; top: -60px; left: -60px; width: calc(100% + 120px); height: calc(100% + 120px); border: 0; pointer-events: none; }
.vf-cap { margin-top: 0.6rem; }

/* ---------- Concerts ---------- */
.gig-list { list-style: none; margin: 0; padding: 0; }
.gig {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 1.2rem 1.8rem; align-items: center;
  padding: 1.4rem 0; border-bottom: 1px solid var(--line);
}
.gig-date { font-family: var(--font-display); font-weight: 800; text-align: center; }
.gig-date .d { font-size: 2rem; color: var(--accent); line-height: 1; display: block; }
.gig-date .m { font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; }
.gig-info h3 { margin: 0 0 0.2rem; }
.gig-info p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.gig-status {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
  /* Largeur fixée sur le libellé le plus long : « Privé » et « Passé »
     occupent donc la même place que « Gratuit - Accès libre », et le bouton
     qui les précède tombe au même endroit sur toutes les lignes. */
  min-width: 12.6rem; text-align: center; box-sizing: border-box;
}
.gig-status.soldout { border-color: var(--accent); color: var(--accent); }
/* Dates passées : grisées, que le marquage vienne du JS ou de la section elle-même */
.gig.is-past, #gigs-past .gig { opacity: 0.45; transition: opacity 0.4s ease; }
.gig.is-past:hover, #gigs-past .gig:hover { opacity: 0.7; }

/* ---------- Archives : un dépliant par année révolue ----------
   Le <summary> porte la même typographie que « Prochaines dates », en plus
   petit : l'année, le nombre de dates, et un chevron qui pivote à l'ouverture.
   Le marqueur natif du navigateur est retiré (deux syntaxes, Firefox et les
   navigateurs WebKit ne l'exposent pas de la même manière). */
.gig-annee { list-style: none; }
.gig-annee > details { border-bottom: 1px solid var(--line); }
.gig-annee-tete {
  display: flex; align-items: center; gap: 0.9rem;
  /* Même retrait horizontal que les lignes de concert (var(--cin)) : l'année
     tombe ainsi exactement sur la colonne des quantièmes, et la pastille de
     droite sur celle des statuts. */
  padding: 1.15rem var(--cin); cursor: pointer;
  list-style: none;
  font-family: var(--font-bio); font-weight: 700; text-transform: uppercase;
  color: var(--muted); transition: color 0.25s ease;
}
.gig-annee-tete::-webkit-details-marker { display: none; }
.gig-annee-tete:hover { color: var(--fg); }
.gig-annee-tete:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Assez gros pour se lire comme un intertitre, assez petit pour rester sous
   le quantième d'une date (2.6rem) : l'année classe, elle n'annonce pas. */
.gig-annee-n {
  font-size: 1.9rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Le chevron suit l'année - c'est elle qu'on déplie - et le compte part à
   l'autre bout, où il retrouve la colonne des pastilles « Passé ».
   L'ordre visuel diffère de l'ordre du HTML, qui reste année / compte /
   chevron : lu à voix haute, « 2025, 18 dates » vaut mieux que l'inverse. */
.gig-annee-c {
  order: 2; margin-left: auto;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--muted); opacity: 0.75;
}
.gig-annee-fleche {
  order: 1; width: 22px; height: 22px; flex: none; transition: transform 0.25s ease;
}
.gig-annee > details[open] > .gig-annee-tete { color: var(--fg); }
.gig-annee > details[open] > .gig-annee-tete .gig-annee-fleche { transform: rotate(180deg); }
/* La dernière ligne d'une année dépliée : son trait ferait doublon avec
   celui du dépliant lui-même. */
.gig-annee-liste > .gig:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .gig-annee-fleche { transition: none; }
}
/* ---------- Téléphone : dates de concert ----------
   Trois colonnes ne tiennent pas sous 900 px. La date et le titre restent
   côte à côte, le bouton et la pastille passent dessous, alignés à gauche
   sous le titre. */
@media (max-width: 900px) {
  .gig, .concerts-info-inner .gig,
  body.concerts-page .concerts-info-inner .gig {
    grid-template-columns: minmax(78px, auto) 1fr;
    column-gap: 1.1rem;
  }
  /* Le bouton se cale sous la date, la pastille sous le titre : les deux
     reprennent donc les colonnes de la ligne. « display: contents » efface le
     conteneur des actions pour que ses deux enfants deviennent directement
     des cases de la grille - sans quoi ils ne pourraient pas se répartir sur
     les colonnes du parent. */
  .gig > .gig-actions,
  body.concerts-page .concerts-info-inner .gig > .gig-actions { display: contents; }
  .gig > .gig-actions > .gig-more {
    grid-column: 1; grid-row: 2; justify-self: start; align-self: start;
    margin-top: 0.8rem;
  }
  .gig > .gig-actions > .gig-status {
    grid-column: 2; grid-row: 2; justify-self: start; align-self: start;
    margin-top: 0.8rem;
  }
  /* La largeur fixe de la pastille ne sert qu'à aligner les boutons entre
     eux sur grand écran ; sur téléphone elle déborde. */
  .gig-status { min-width: 0; }
  /* « Toutes les dates » centré sous la liste : aligné à gauche, il se
     retrouvait sous la colonne de la date, à l'écart du reste. */
  .home-gigs-more { text-align: center; }
  /* Page Concerts : la pastille « Passé » n'apprend rien sur téléphone -
     les archives sont déjà sous leur propre titre, et la date grisée le
     dit. Elle ne fait qu'ajouter une ligne à chacune des 80 entrées. */
  body.concerts-page #gigs-past .gig-status.is-done { display: none; }
  .concerts-info-inner .gig-date .wd { font-size: 0.95rem; letter-spacing: 0.08em; }
}

/* ---------- Concerts : écran scindé, dates défilantes / vidéo fixe (réf. vibra.qodeinteractive.com + biographie) ---------- */
/* Écran scindé : seule la colonne des dates défile, la vidéo reste figée.
   Le verrou doit porter aussi sur <html>, sinon la page entière peut défiler. */
html:has(body.concerts-page), html:has(body.bio-page) { overflow: hidden; }
body.concerts-page { overflow: hidden; background: #fff; color: #1a1a1a; }
body.concerts-page main { padding-top: 0; }
.concerts-split {
  display: grid; grid-template-columns: 1fr 1fr;
  height: 100vh; height: 100svh;
}
.concerts-info {
  --cin: clamp(1.6rem, 4vw, 3rem);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* 76px = hauteur du header fixe : on colle le titre juste en dessous.
     Pas de padding horizontal ici : géré par élément pour que les bandes
     de dates occupent toute la largeur de la colonne. */
  padding: 4.75rem 0 3rem;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff; color: #1a1a1a;
}
.concerts-info-inner h2,
.concerts-info-inner > .muted { padding-left: var(--cin); padding-right: var(--cin); }
.concerts-info-inner { max-width: none; }
.concerts-info-inner > .kicker {
  font-family: inherit; font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.4em; text-transform: uppercase; color: #9a9a9a;
  display: block; margin-bottom: 1.1rem;
}
.concerts-info-inner > h1 {
  font-family: inherit; font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.2; letter-spacing: -0.02em; color: #111;
}
.concerts-info-inner > .lead {
  font-family: inherit; font-weight: 600;
  font-size: 1.2rem; line-height: 1.6; letter-spacing: -0.01em; color: #333;
}
.concerts-info-inner h2 {
  font-family: inherit; font-weight: 700; font-size: 1rem;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.7;
  color: #111; margin: 2.5rem 0 1.3rem;
}
/* « Prochaines dates » et « Dates passées » au corps du bloc de l'accueil. */
body.concerts-page .concerts-info-inner h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: 0.14em;
}
/* Typographie alignée sur la page Biographie (Inter, mêmes graisses / interlignes) */
/* Bloc date : jour en gros + mois en petites majuscules à droite + jour de semaine dessous */
.concerts-info-inner .gig { grid-template-columns: minmax(155px, auto) 1fr auto; }
/* Page Concerts : bouton et pastille restent sur la ligne du titre, calés à
   droite et centrés en hauteur. La colonne ne faisant que la moitié de
   l'écran, les titres longs passent à la ligne - c'est la contrepartie. */
body.concerts-page .concerts-info-inner .gig > .gig-actions {
  align-self: center;
  /* Même écart que sur l'accueil, malgré la colonne deux fois plus étroite. */
  gap: 1.9rem;
}
/* Un peu d'air entre la date et le titre : la colonne étant étroite, on
   agit sur la gouttière plutôt que sur un retrait, qui n'aurait décalé
   que le titre sans écarter la ligne de l'heure. */
body.concerts-page .concerts-info-inner .gig { column-gap: 1.3rem; }
.concerts-info-inner .gig-date {
  font-family: inherit; text-align: left;
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.55rem; row-gap: 0.1rem; align-content: start;
}
.concerts-info-inner .gig-date .d {
  grid-column: 1; grid-row: 1;
  color: #111; font-weight: 800; font-size: 2.6rem; line-height: 0.9; letter-spacing: -0.02em;
  /* Chiffres à chasse fixe : sans cela « 06 » mesure 55 px et « 10 » 45 px,
     et le mois - donc le titre du concert - se décale d'une ligne à l'autre.
     Le min-width sert de filet pour les polices dépourvues de cette variante. */
  font-variant-numeric: tabular-nums; min-width: 1.35em;
}
.concerts-info-inner .gig-date .mo {
  grid-column: 2; grid-row: 1; align-self: start; margin-top: 0.28rem;
  color: #111; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  /* Réservation de la place du mois le plus long, « SEPTEMBRE ». Sans elle,
     la colonne de date se dimensionne sur son contenu : elle passait de
     155 px en août à 166 px en septembre, et les titres des concerts ne
     démarraient pas tous au même endroit.
     En ch plutôt qu'en px : le ch vaut la largeur du « 0 » de la police
     réellement utilisée. Inter n'étant pas chargée par le site, l'affichage
     retombe sur Helvetica ou Arial selon la machine.
     En em et non en ch : l'interlettrage de 0.22em compte pour un quart de la
     largeur du mot, et il suit le corps, pas la chasse du chiffre zéro. Mesuré
     sur cinq polices, « SEPTEMBRE » tient entre 7.88 et 8.65 em - contre 12.1
     à 14.8 ch, où Arial débordait. 8.7 em couvre la plus large. */
  min-width: 8.7em;
}
.concerts-info-inner .gig-date .wd {
  grid-column: 1 / -1; grid-row: 2;
  color: #c4c4c4; font-weight: 400; font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
/* Repli si le JS n'a pas (encore) reconstruit la date */
.concerts-info-inner .gig-date .m { color: #9a9a9a; font-weight: 600; letter-spacing: 0.2em; }
.concerts-info-inner .gig-info h3 {
  font-family: inherit; font-weight: 700; font-size: 1.18rem;
  line-height: 1.4; letter-spacing: -0.01em; color: #111;
}
.concerts-info-inner .gig-info p { font-size: 1rem; line-height: 1.7; color: #777; }
.concerts-info-inner .gig-info a { color: #777; text-decoration: underline; }
.concerts-info-inner .gig-status {
  font-family: inherit; font-weight: 600; letter-spacing: 0.14em;
  border-color: #ddd; color: #999;
}
.concerts-info-inner .btn { font-family: inherit; font-weight: 700; letter-spacing: 0.1em; }

/* Une date sur deux sur fond noir (zébrure), pleine largeur de la colonne */
.concerts-info-inner .gig-list .gig {
  border-bottom: none; padding: 1.4rem var(--cin); border-radius: 0;
}
.concerts-info-inner .gig-list .gig:nth-child(even) { background: #111; }
.concerts-info-inner .gig-list .gig:nth-child(even) .gig-date .d,
.concerts-info-inner .gig-list .gig:nth-child(even) .gig-date .mo { color: #fff; }
.concerts-info-inner .gig-list .gig:nth-child(even) .gig-date .wd { color: rgba(255, 255, 255, 0.45); }
.concerts-info-inner .gig-list .gig:nth-child(even) .gig-date .m { color: rgba(255, 255, 255, 0.6); }
.concerts-info-inner .gig-list .gig:nth-child(even) .gig-info h3 { color: #fff; }
.concerts-info-inner .gig-list .gig:nth-child(even) .gig-info p { color: rgba(255, 255, 255, 0.65); }
.concerts-info-inner .gig-list .gig:nth-child(even) .gig-info a { color: rgba(255, 255, 255, 0.7); }
.concerts-info-inner .gig-list .gig:nth-child(even) .gig-status { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.75); }

/* Accueil : accroche Biographie (typographie de la page Biographie) */
/* Fond en deux temps : noir depuis le bord gauche de l'écran jusqu'au milieu
   de la photo, blanc au-delà. La césure est calculée, pas approchée : elle
   reprend la géométrie réelle de la grille — largeur du conteneur, marges
   intérieures, gouttière et part de la première colonne (0,85 sur 2 fr) — pour
   tomber au milieu de la photo à n'importe quelle largeur d'écran. */
.home-bio {
  --bio-pad: clamp(1rem, 4vw, 2rem);
  --bio-gap: clamp(1.8rem, 4vw, 3.6rem);
  --bio-wrap: min(1560px, 100%);
  /* 0,5 = part de la colonne photo, 1fr sur 2fr au total */
  --bio-col1: calc(0.5 * (var(--bio-wrap) - 2 * var(--bio-pad) - var(--bio-gap)));
  --bio-split: calc((100% - var(--bio-wrap)) / 2 + var(--bio-pad) + var(--bio-col1) / 2);
  /* Le noir est relevé sur la photo elle-même : rgb(13, 8, 4), un noir chaud
     et non neutre. Le prendre pur (#000) laissait une césure visible là où le
     fond de la photo rejoint celui de la page. Le blanc, lui, est déjà pur
     dans la photo (255) : #fff se raccorde sans retouche. */
  background:
    linear-gradient(to right,
      #0d0804 0, #0d0804 var(--bio-split),
      #fff var(--bio-split), #fff 100%);
  /* Aucune marge verticale ici : la photo, carrée, tire sa hauteur de la
     largeur de sa colonne. Toute marge posée sur le bloc s'ajouterait à
     elle. La respiration est reportée sur la seule colonne de texte, si
     bien que la photo s'agrandit sans que le bloc grandisse. */
  padding: 0;
}
/* Le fond d'attente de la photo reprend le noir de la photo */
.home-bio .home-bio-photo { background: #0d0804; }

/* Grille empilée : la césure verticale n'a plus de sens, tout repasse au blanc */
@media (max-width: 780px) {
  .home-bio { background: #fff; padding: clamp(2.8rem, 7vw, 4.8rem) 0; }
  .home-bio-text { padding: 0; }
}
.home-bio-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.6rem); align-items: center;
}
/* La respiration verticale du bloc, reportée ici */
.home-bio-text { padding: clamp(2.8rem, 7vw, 4.8rem) 0; }
/* Cadre au format exact de la photo (carrée) : rien n'est rogné, ni sur les
   côtés ni en hauteur. Le rapport 1024/1311 qui figurait ici datait de la
   photo précédente et amputait celle-ci de 22 % en largeur. */
.home-bio-photo { overflow: hidden; aspect-ratio: 1 / 1; background: #eee; }
.home-bio-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.home-bio-text { font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.home-bio-eyebrow {
  display: block; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.4em; text-transform: uppercase; color: #9a9a9a;
  margin-bottom: 1rem;
}
.home-bio-text h2 {
  font-family: inherit; font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.2; letter-spacing: -0.02em;
  color: #111; margin: 0 0 1.1rem;
}
.home-bio-lead {
  font-weight: 600; font-size: 1.18rem; line-height: 1.65;
  letter-spacing: -0.01em; color: #222; margin: 0 0 1.1rem;
}
.home-bio-text p { font-size: 1.05rem; line-height: 1.8; color: #444; margin: 0 0 1.6rem; }
.home-bio-more {
  display: inline-block; text-decoration: none;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #111; border: 1px solid #111; padding: 0.9rem 1.8rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.home-bio-more:hover { background: #111; color: #fff; }
@media (max-width: 780px) {
  .home-bio-grid { grid-template-columns: 1fr; }
  .home-bio-photo { aspect-ratio: 1 / 1; }
}

/* Accueil : bloc « Prochaines dates » (réutilise la mise en page de la page Concerts) */
/* Même respiration en haut et en bas : le titre a sa marge haute à zéro et le
   lien « Toutes les dates » n'a pas de marge basse, les 2,2 rem de padding
   donnent donc bien le même vide des deux côtés. */
.home-gigs { background: #fff; padding: 2.2rem 0; }
.home-gigs-inner { --cin: clamp(1rem, 2.2vw, 1.8rem); }
/* Titre agrandi sur l'accueil seulement : la taille de base vient d'une
   règle partagée avec la page Concerts, qu'il ne faut pas toucher.
   L'interlettrage est légèrement resserré — 0,2em, calibré pour du 1rem,
   devient trop lâche une fois le corps augmenté. */
.home-gigs-inner > h2 {
  margin-top: 0; padding-left: var(--cin); padding-right: var(--cin);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: 0.14em;
}
.home-gigs-more { margin: 1.6rem 0 0; padding: 0 var(--cin); }
.home-gigs-more a {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #111; text-decoration: none; border-bottom: 1px solid #111; padding-bottom: 0.2rem;
}
.home-gigs-more a:hover { color: #666; border-color: #666; }

.concerts-media { position: relative; overflow: hidden; background: #000; order: -1; }
.concerts-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .concerts-split { grid-template-columns: 1fr; grid-template-rows: 44vh 1fr; }
  .concerts-media { grid-row: 1; }
  .concerts-info { grid-row: 2; padding-top: 1.6rem; }
}

/* ---------- Polaroids (réf. Chappell Roan) ---------- */
.polaroids { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; padding: 1rem 0 2rem; }
.polaroid {
  background: #fdfbf7; color: #222; padding: 0.7rem 0.7rem 2.6rem;
  box-shadow: var(--shadow); width: min(230px, 42vw);
  transform: rotate(var(--tilt, -3deg)); transition: transform 0.35s ease;
}
.polaroid:hover { transform: rotate(0deg) scale(1.05); z-index: 2; }
.polaroid .ph { aspect-ratio: 4 / 5; }
.polaroid figcaption {
  font-family: "Caveat", "Segoe Script", cursive; font-size: 1.25rem;
  text-align: center; margin-top: 0.55rem; color: #333;
}
.polaroid:nth-child(2) { --tilt: 2.5deg; }
.polaroid:nth-child(3) { --tilt: -1.5deg; }
.polaroid:nth-child(4) { --tilt: 3.5deg; }
.polaroid:nth-child(5) { --tilt: -2.5deg; }

/* ---------- Biographie : écran scindé photo fixe / article défilable ---------- */
body.bio-page { overflow: hidden; }
body.bio-page main { padding-top: 0; }
.bio-split {
  display: grid; grid-template-columns: 1fr 1fr;
  height: 100vh; height: 100svh;
}
.bio-photo { position: relative; overflow: hidden; background: #e8e6e3; }
.bio-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.bio-scroll {
  background: #fff; color: #1a1a1a;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.bio-article {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(5.5rem, 12vh, 8rem) clamp(2.8rem, 6vw, 5.5rem) 3rem;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.bio-eyebrow {
  display: block; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.4em; text-transform: uppercase; color: #9a9a9a;
  margin-bottom: 1.1rem;
}
.bio-article h1 {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.2; letter-spacing: -0.02em;
  color: #111; margin-bottom: 1.2rem;
}
/* « Dossier professionnel » : réglages exacts de « Prochaines dates » sur
   l'accueil. Ce titre-là déclare font-family:inherit et hérite de la pile
   Inter de .concerts-info, pas de la police d'affichage - d'où Inter 700 en
   capitales, interligne 1,7. Seule la page EPK est visée : Newsletter et
   Newsletter partage la classe .epk-page et garde son grand titre. */
body.epk-page:not(.newsletter-page) .bio-article h1 {
  font-family: var(--font-bio); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.7;
  letter-spacing: 0.14em; text-transform: uppercase;
}

.bio-lead {
  font-weight: 600;
  font-size: 1.35rem; line-height: 1.65; letter-spacing: -0.01em; color: #222;
  margin-bottom: 2.4rem;
}
.bio-article p {
  font-size: 1.18rem; font-weight: 400; line-height: 1.85; color: #333;
  text-align: justify; margin-bottom: 1.15em;
}
.bio-article h2 {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1.7; color: #111; margin: 2.5rem 0 1.3rem;
}
/* Biographie : les intertitres passent sur un bandeau noir pleine largeur.
   Exclut EPK et Contact, qui partagent la classe bio-page. */
body.bio-page:not(.epk-page) .bio-article h2 {
  background: #111; color: #fff;
  margin: 2.5rem calc(-1 * clamp(2.8rem, 6vw, 5.5rem)) 1.6rem;
  padding: 1.5rem clamp(2.8rem, 6vw, 5.5rem);
}
.bio-article em { font-style: italic; }
.bio-footer-note {
  margin-top: 3.5rem !important; padding-top: 1.2rem; border-top: 1px solid #e5e5e5;
  font-size: 0.85rem !important; color: #999 !important; text-align: left !important;
}
.bio-footer-note a { color: #777; }
/* Page Concerts : la mention légale se centre sous la colonne des dates.
   Le !important répond à celui de la règle ci-dessus, qui impose l'alignement
   à gauche pour toutes les autres pages. */
body.concerts-page .bio-footer-note { text-align: center !important; }

/* ---------- EPK / Espace pro : composants dans la charte Biographie ---------- */
.epk-page .bio-article h3 {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em;
  color: #111; margin: 0 0 0.4rem;
}
.epk-page .bio-article a { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.epk-page .bio-article a:hover { color: #666; }

/* Blocs sur fond noir (Repères, Téléchargements) : pleine largeur de la colonne */
.epk-black {
  background: #111; color: #fff;
  margin: 2.6rem calc(-1 * clamp(2.8rem, 6vw, 5.5rem));
  padding: 2rem clamp(2.8rem, 6vw, 5.5rem) 2.2rem;
}
.epk-page .epk-black h2 { color: #fff; margin-top: 0; }
.epk-black .epk-fact-k { color: rgba(255, 255, 255, 0.5); }
.epk-black .epk-fact-v { color: #fff; }
.epk-black .epk-facts li { border-bottom-color: rgba(255, 255, 255, 0.16); }
.epk-black .epk-files a { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.16); }
.epk-black .epk-files a:hover { color: #fff; }
.epk-black .epk-files a[aria-disabled="true"],
.epk-black .epk-files a[aria-disabled="true"]:hover { color: rgba(255, 255, 255, 0.45); }
.epk-black .epk-file-x { color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.28); }
.epk-black .epk-file-p { color: rgba(255, 255, 255, 0.5); }
.epk-black .epk-note { color: rgba(255, 255, 255, 0.5) !important; margin-bottom: 0; }
.epk-black .epk-contact { border-top-color: #fff; }
.epk-black .epk-contact-k { color: rgba(255, 255, 255, 0.5); }
/* tout lien posé sur le bloc noir (adresses e-mail, renvois dans les notes) */
.epk-page .epk-black a { color: #fff; }
.epk-page .epk-black a:hover { color: rgba(255, 255, 255, 0.7); }
.epk-black .epk-contacts { margin-bottom: 0; }

/* Repères : liste clé / valeur */
.epk-facts { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.epk-facts li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.72rem 0; border-bottom: 1px solid #ececec;
}
.epk-fact-k {
  flex: 0 0 38%; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #9a9a9a;
}
.epk-fact-v { font-size: 1.05rem; color: #222; }

/* Formats de concert */
.epk-formats { display: grid; gap: 1rem; margin-bottom: 1.6rem; }
.epk-format { border-left: 2px solid #111; padding: 0.1rem 0 0.1rem 1.1rem; }
.epk-format p { font-size: 1.02rem !important; line-height: 1.7 !important; text-align: left !important; margin: 0 !important; color: #555 !important; }

/* Téléchargements */
.epk-files { list-style: none; margin: 0 0 1rem; padding: 0; }
.epk-files a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid #ececec;
  text-decoration: none !important; color: #111;
  transition: padding-left 0.22s ease, color 0.22s ease;
}
.epk-files a:hover { padding-left: 0.5rem; color: #000; }
.epk-files a[aria-disabled="true"] { color: #b3b3b3; cursor: not-allowed; }
.epk-files a[aria-disabled="true"]:hover { padding-left: 0; color: #b3b3b3; }
.epk-file-n { font-size: 1.05rem; font-weight: 500; flex: 1 1 auto; }
/* Poids du fichier : un programmateur en déplacement veut savoir ce qu'il
   télécharge avant de cliquer. */
.epk-file-p {
  flex-shrink: 0; font-size: 0.8rem; color: #9a9a9a;
  font-variant-numeric: tabular-nums;
}
.epk-file-x {
  flex-shrink: 0; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #9a9a9a;
  border: 1px solid #ddd; border-radius: 3px; padding: 0.24rem 0.5rem;
}
.epk-note { font-size: 0.9rem !important; color: #999 !important; text-align: left !important; }

/* Champ piège anti-robots : hors écran plutôt que display:none, que certains
   robots savent détecter. Retiré du parcours au clavier et de la lecture
   vocale par tabindex et aria-hidden côté HTML. */
.ct-piege {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
/* Réponse du formulaire de contact */
.form-msg { margin: 1rem 0 0; font-size: 0.95rem; line-height: 1.5; }
.form-msg.is-ok { color: #2f8f5b; }
.form-msg.is-ko { color: #c8452f; }
.epk-black .form-msg.is-ok { color: #7fd6a4; }
.epk-black .form-msg.is-ko { color: #ff9c88; }
.form-msg a { color: inherit; text-decoration: underline; }
.ct-submit:disabled { opacity: 0.55; cursor: progress; }

/* Vidéos live */
.epk-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 0.8rem; }
.epk-videos .yt { border-radius: 0; border: none; background: #ececec; }
.epk-video-cap {
  font-size: 0.82rem !important; font-weight: 500 !important;
  letter-spacing: 0.03em; text-transform: uppercase; color: #8a8a8a !important;
  text-align: left !important; margin: 0.5rem 0 0 !important;
}

/* Contacts */
.epk-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.6rem; }
.epk-contact { border-top: 2px solid #111; padding-top: 0.85rem; }
.epk-contact-k {
  display: block; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #9a9a9a; margin-bottom: 0.3rem;
}
.epk-contact a { font-size: 1.05rem; font-weight: 600; }

/* Écouter & suivre */
.epk-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.epk-links a {
  text-decoration: none !important;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #111; border: 1px solid #d8d8d8; padding: 0.62rem 1rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.epk-links a:hover { background: #111; border-color: #111; color: #fff; }

@media (max-width: 900px) {
  .epk-videos, .epk-contacts { grid-template-columns: 1fr; }
  .epk-facts li { flex-direction: column; gap: 0.15rem; }
  .epk-fact-k { flex: none; }
  /* Les huit plateformes se répartissent sur plusieurs lignes : centrées,
     la dernière ligne - souvent incomplète - ne laisse plus un blanc à
     droite. Le titre au-dessus suit, pour ne pas rester seul à gauche. */
  .epk-links { justify-content: center; }
  .bio-article h2:has(+ .epk-links) { text-align: center; }
}

/* EPK & Contact : photos live en paysage → cadrage centré dans la colonne verticale */
.epk-page .bio-photo img, .contact-page .bio-photo img { object-position: center center; }

/* EPK : le menu se trouve au-dessus de la photo sombre → texte blanc */
@media (min-width: 901px) {
  body.epk-page:not(.contact-page) .nav-links li > a { color: #fff; }
}
body.epk-page:not(.contact-page) .lang-switch a { color: rgba(255, 255, 255, 0.55); }
body.epk-page:not(.contact-page) .lang-switch .is-active,
body.epk-page:not(.contact-page) .lang-switch a:not(.is-active):hover { color: #fff; }
body.epk-page:not(.contact-page) .burger { border-color: rgba(255, 255, 255, 0.4); }
body.epk-page:not(.contact-page) .burger span { background: #fff; }
/* Barre sombre discrète (15 %) derrière le menu : garde le blanc lisible
   même sur les zones claires de la photo. Limitée à la colonne photo (moitié
   gauche) — la césure tombe pile sur la séparation photo / contenu. */
body.epk-page:not(.contact-page) .site-header {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0 50%, rgba(0, 0, 0, 0) 50%);
}
/* En dessous de 900 px la photo passe en bandeau haut, pleine largeur */
@media (max-width: 900px) {
  body.epk-page:not(.contact-page) .site-header { background: rgba(0, 0, 0, 0.15); }
}

/* Contact : formulaire dans la même charte (Inter, blanc / noir) */
.ct-form { display: grid; gap: 1.1rem; margin-bottom: 1rem; }
.ct-field { display: grid; gap: 0.4rem; }
.ct-field label {
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #9a9a9a;
}
.ct-field label span { color: #c0c0c0; }
.ct-form input[type="text"],
.ct-form input[type="email"],
.ct-form textarea {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.02rem; color: #111; background: #fff;
  border: 0; border-bottom: 1px solid #d8d8d8; border-radius: 0;
  padding: 0.7rem 0.1rem; width: 100%;
  transition: border-color 0.2s ease;
}
.ct-form textarea { resize: vertical; line-height: 1.6; }
.ct-form input::placeholder, .ct-form textarea::placeholder { color: #c4c4c4; }
.ct-form input:focus, .ct-form textarea:focus { outline: none; border-bottom-color: #111; }
.ct-submit {
  justify-self: start; cursor: pointer;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; background: #111; border: 1px solid #111; border-radius: 0;
  padding: 0.95rem 1.9rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.ct-submit:hover { background: #fff; color: #111; }
.contact-page .form-msg,
.newsletter-page .form-msg {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.95rem; font-weight: 600; color: #111;
  border-left: 2px solid #111; padding-left: 0.9rem; margin: 0;
}
/* Contact & Newsletter : le bloc noir reste une boîte, il ne déborde pas */
.contact-page .epk-black,
.newsletter-page .epk-black {
  margin-left: 0; margin-right: 0;
  padding: 1.9rem 1.9rem 2.1rem;
  border-radius: 4px;
}

/* Formulaire posé sur un bloc noir : champs transparents, texte clair */
.epk-black .ct-field label { color: rgba(255, 255, 255, 0.55); }
.epk-black .ct-field label span { color: rgba(255, 255, 255, 0.35); }
.epk-black .ct-form input[type="text"],
.epk-black .ct-form input[type="email"],
.epk-black .ct-form textarea {
  background: transparent; color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.32);
}
.epk-black .ct-form input::placeholder,
.epk-black .ct-form textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.epk-black .ct-form input:focus,
.epk-black .ct-form textarea:focus { border-bottom-color: #fff; }
.epk-black .ct-submit { background: #fff; color: #111; border-color: #fff; }
.epk-black .ct-submit:hover { background: transparent; color: #fff; }
.contact-page .epk-black .form-msg,
.newsletter-page .epk-black .form-msg { color: #fff; border-left-color: #fff; }

/* Header en texte sombre sur les pages claires (biographie, vidéos) */
body.bio-page .site-header, body.videos-page .site-header { background: none; }
body.bio-page .social-icons a, body.videos-page .social-icons a { color: #1a1a1a; }
body.bio-page .lang-switch a, body.videos-page .lang-switch a { color: rgba(26, 26, 26, 0.45); }
body.bio-page .lang-switch .is-active,
body.bio-page .lang-switch a:not(.is-active):hover,
body.videos-page .lang-switch .is-active,
body.videos-page .lang-switch a:not(.is-active):hover { color: #1a1a1a; }
body.bio-page .burger, body.videos-page .burger { border-color: rgba(26, 26, 26, 0.3); }
body.bio-page .burger span, body.videos-page .burger span { background: #1a1a1a; }
@media (min-width: 901px) {
  body.bio-page .nav-links li > a, body.videos-page .nav-links li > a { color: #1a1a1a; }
}
/* Concerts : header blanc opaque (lisible aussi bien au-dessus de la vidéo que du panneau de dates) */
body.concerts-page .site-header { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
body.concerts-page .social-icons a { color: #1a1a1a; }
body.concerts-page .lang-switch a { color: rgba(26, 26, 26, 0.45); }
body.concerts-page .lang-switch .is-active,
body.concerts-page .lang-switch a:not(.is-active):hover { color: #1a1a1a; }
body.concerts-page .burger { border-color: rgba(26, 26, 26, 0.3); }
body.concerts-page .burger span { background: #1a1a1a; }
@media (min-width: 901px) {
  body.concerts-page .nav-links li > a { color: #1a1a1a; }
}
.car-stage {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column;
  background: #fff; color: #111;
}
/* Fond : vignette de la vidéo centrée, opacité max. 20 % */
/* Le calque déborde de 12,5 % en haut et en bas : la partie qui sort du cadre
   est rognée, soit 1/10 de l'image de chaque côté (bandes noires des vignettes). */
.car-bg {
  position: absolute; left: 0; right: 0; top: -12.5%; bottom: -12.5%;
  z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
  opacity: 0.2; transition: background-image 0.4s ease, opacity 0.4s ease;
}
.car-viewport { z-index: 1; }
/* Aperçu muet de 5 s au survol de la vidéo centrée */
/* pointer-events: none → le clic traverse l'aperçu et atteint toujours la vignette */
.car-item .yt-preview { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: #000; pointer-events: none; }
.car-item .yt-preview iframe {
  position: absolute; top: -60px; left: -60px;
  width: calc(100% + 120px); height: calc(100% + 120px);
  border: 0; pointer-events: none;
}
.car-item.is-center .car-play { z-index: 3; }
.car-head {
  position: absolute; left: 0; right: 0; z-index: 130;
  bottom: calc(50% + min(54vw, 760px) * 0.28125 + 1.1rem);
  text-align: center; pointer-events: none;
}
.car-type {
  display: block; font-family: "Inter", sans-serif; font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase;
  color: #9a9a9a; margin-bottom: 0.5rem;
}
.car-name {
  font-family: "Inter", sans-serif; font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase;
  color: #111; margin: 0;
}
.car-viewport { position: relative; flex: 1; min-height: 0; }
.car-item {
  position: absolute; top: 50%; left: 50%;
  width: min(54vw, 760px); aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
  cursor: pointer; background: #000; overflow: hidden;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.18);
}
.car-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-item iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Pendant la lecture, le clic ne va pas jusqu'à YouTube : plus de bouton
   pause/lecture surgissant au centre — nos propres commandes suffisent. */
.car-item.is-playing iframe { pointer-events: none; }
/* Commandes maison sur la vidéo lancée (mêmes boutons que le Teaser de l'accueil) */
.car-controls {
  /* ~1/14 de la hauteur de la vidéo, proportionnelle en plein écran */
  position: absolute; left: 1rem; right: 1rem; bottom: 8%; z-index: 6;
  display: flex; align-items: center; gap: 0.6rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.car-item.is-playing:hover .car-controls,
.car-controls:focus-within { opacity: 1; visibility: visible; }
/* Barre de défilement : occupe la largeur restante */
.car-c-bar {
  flex: 1; min-width: 60px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.32); position: relative; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.car-c-bar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.car-c-fill {
  position: absolute; top: 0; left: 0; bottom: 0; width: 0;
  background: #fff; border-radius: 3px; pointer-events: none;
}
/* Plein écran : la vignette occupe l'écran, sans la mise à l'échelle du carrousel */
.car-item:fullscreen {
  transform: none !important;
  width: 100vw !important; height: 100vh !important;
  top: 0 !important; left: 0 !important;
  opacity: 1 !important; background: #000;
}
.car-item:fullscreen .car-controls { opacity: 1; visibility: visible; }
.car-c-time {
  flex-shrink: 0; color: #fff;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}
.car-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 70px; height: 70px;
  background: url("../img/platforms/play_button.svg") center / contain no-repeat;
  display: none; font-size: 0; color: transparent; pointer-events: none;
  transition: transform 0.25s ease;
}
.car-item.is-center:not(.is-playing) .car-play { display: block; }
/* Au survol, l'aperçu se lance : le bouton play s'efface pour ne pas le masquer */
.car-item.is-center:not(.is-playing):hover .car-play { display: none; }
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 150;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid #cfcfcf; background: rgba(255, 255, 255, 0.9); color: #111;
  font-size: 1.15rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s, transform 0.2s;
}
.car-btn:hover:not(:disabled) { border-color: #111; transform: translateY(-50%) scale(1.07); }
.car-btn:disabled { opacity: 0.25; cursor: default; }
.car-btn.prev { left: 2.5vw; }
.car-btn.next { right: 2.5vw; }
.car-hint {
  position: absolute; left: 0; right: 0; z-index: 130;
  top: calc(50% + min(54vw, 760px) * 0.28125 + 1.2rem);
  text-align: center; pointer-events: none;
  font-family: "Inter", sans-serif; font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: #111; font-weight: 600;
}
/* Renvoi vers la chaîne : posé sous la ligne d'aide, sur le même repère de
   calcul, pour rester collé au bord bas de la vignette quelle que soit la
   taille de l'écran. */
.car-plus {
  position: absolute; left: 50%; z-index: 131;
  top: calc(50% + min(54vw, 760px) * 0.28125 + 3.4rem);
  transform: translateX(-50%);
  font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #111; text-decoration: none;
  border: 1px solid rgba(17, 17, 17, 0.35); border-radius: 999px;
  padding: 0.62rem 1.4rem; background: rgba(255, 255, 255, 0.7);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.car-plus:hover, .car-plus:focus-visible {
  background: #111; border-color: #111; color: #fff;
}

@media (max-width: 900px) {
  .car-item { width: min(84vw, 560px); }
  .car-head { bottom: calc(50% + min(84vw, 560px) * 0.28125 + 0.9rem); }
  .car-hint { top: calc(50% + min(84vw, 560px) * 0.28125 + 1rem); }
  .car-plus { top: calc(50% + min(84vw, 560px) * 0.28125 + 3rem); }
  .car-btn.prev { left: 3vw; }
  .car-btn.next { right: 3vw; }
  .car-btn { top: auto; bottom: 6vh; transform: none; }
  .car-btn:hover:not(:disabled) { transform: scale(1.07); }
}

/* ---------- Carrousel clips agrandi + fond décoratif très léger (accueil & page Vidéos) ---------- */
body.home .car-stage, body.vf-page .car-stage {
  /* Largeur de la vignette centrale : bornée aussi par la hauteur pour rester dans l'écran */
  --car-w: min(66vw, 980px, 58svh * 16 / 9);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Accueil : la section se cale sur son contenu (vidéo + titre + légende) au lieu
   d'occuper tout l'écran. Hauteur = vidéo + titre (≈50 px) + légende (≈16 px)
   + les deux écarts de 1,4 rem + 1 rem de respiration haut et bas. Le décalage
   haut compense le titre, plus haut que la légende, sans quoi le vide serait
   plus petit en haut qu'en bas. */
body.home .car-stage {
  height: calc(58svh + 4.8rem + 66px);
  padding-top: 34px;
}
body.home .car-item, body.vf-page .car-item { width: var(--car-w); }
body.home .car-head, body.vf-page .car-head { bottom: calc(50% + var(--car-w) * 0.28125 + 1.4rem); }
body.home .car-hint, body.vf-page .car-hint { top: calc(50% + var(--car-w) * 0.28125 + 1.4rem); }
body.vf-page .car-plus { top: calc(50% + var(--car-w) * 0.28125 + 4.3rem); }
/* Écrans courts : le bloc fait une hauteur d'écran et masque ce qui dépasse.
   On y resserre l'écart et on réduit la vignette, sinon le bouton passe
   sous la ligne de flottaison et se retrouve coupé. */
@media (max-height: 860px) {
  body.vf-page .car-stage { --car-w: min(84vw, 1500px, 58svh * 16 / 9); }
  body.vf-page .car-plus { top: calc(50% + var(--car-w) * 0.28125 + 3.4rem); }
}
/* Page Vidéos : vignette centrale aux 3/4 de la hauteur d'écran.
   Le décalage haut sort le carrousel de sous le menu, sinon le titre le chevauche. */
body.vf-page .car-stage {
  --car-w: min(84vw, 1500px, 65svh * 16 / 9);
  padding-top: 64px;
}
@media (max-width: 900px) {
  body.home .car-stage, body.vf-page .car-stage { --car-w: min(92vw, 680px, 52svh * 16 / 9); }
}

@media (max-width: 900px) {
  .bio-split { grid-template-columns: 1fr; grid-template-rows: 44vh 1fr; }
  .bio-photo img { object-position: center 20%; }
  .bio-article { padding-top: 2rem; }
  .bio-article p { text-align: left; }
}

/* ---------- Galerie photos ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery .ph { border-radius: var(--radius); aspect-ratio: 4 / 5; transition: transform 0.3s; }
.gallery .ph:hover { transform: scale(1.02); }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

.ph { background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); position: relative; overflow: hidden; }
.ph::after {
  content: "TidyMess"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; font-size: 0.7rem; color: rgba(244, 239, 233, 0.25);
}

/* ---------- Smart link (page d'écoute, réf. Linkfire) ---------- */
body.smartlink-page { background: #000; color: #fff; }
body.smartlink-page main { padding-top: 0; }
.sl-cover-wrap {
  position: relative; width: min(215px, 58vw); margin: 0 auto; display: block;
  border-radius: 12px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.sl-cover { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.sl-play { width: 66px; height: 66px; }
.sl-prev, .sl-next {
  width: 48px; height: 48px; opacity: 0; transform: scale(0.6);
  pointer-events: none;
}
.sl-cover-box.is-active .sl-prev,
.sl-cover-box.is-active .sl-next { opacity: 1; transform: scale(1); pointer-events: auto; }
.sl-cover-box.is-active .sl-prev:hover,
.sl-cover-box.is-active .sl-next:hover { transform: scale(1.12); }
.sl-prompt { margin: 0.55rem 0 0; color: #6a6a72; font-size: 0.9rem; }
/* Menu transparent, en clair : la page est passée au fond noir, les valeurs
   sombres d'origine y étaient illisibles. */
body.smartlink-page .site-header { background: none; }
body.smartlink-page .social-icons a { color: rgba(255, 255, 255, 0.8); }
body.smartlink-page .social-icons a:hover { color: #fff; }
body.smartlink-page .lang-switch a { color: rgba(255, 255, 255, 0.5); }
body.smartlink-page .lang-switch .is-active,
body.smartlink-page .lang-switch a:not(.is-active):hover { color: #fff; }
body.smartlink-page .burger { border-color: rgba(255, 255, 255, 0.35); }
body.smartlink-page .burger span { background: #fff; }
@media (min-width: 901px) {
  body.smartlink-page .nav-links li > a { color: rgba(255, 255, 255, 0.85); }
  body.smartlink-page .nav-links li > a:hover { color: #fff; }
}

/* ---------- Article ---------- */
.article-head { max-width: 760px; margin: 0 auto 2rem; }
.article-body { max-width: 720px; margin: 0 auto; font-size: 1.06rem; }
.article-body img, .article-body .ph { border-radius: var(--radius); margin: 2rem 0; }
.article-body blockquote {
  border-left: 3px solid var(--accent); margin: 2rem 0; padding: 0.3rem 0 0.3rem 1.4rem;
  font-family: var(--font-display); font-size: 1.25rem; color: var(--ink);
}

/* ---------- Formulaires / newsletter ---------- */
.form { display: grid; gap: 1rem; max-width: 520px; }
.form label { font-weight: 700; font-size: 0.9rem; }
.form input[type="text"], .form input[type="email"], .form textarea {
  width: 100%; padding: 0.9rem 1.1rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
  font-family: inherit; font-size: 1rem;
}
.form input:focus, .form textarea:focus { border-color: var(--accent); outline: none; }
.form .consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.85rem; color: var(--muted); }
.form .consent input { margin-top: 0.25rem; accent-color: var(--accent); }
.form-msg { color: var(--accent-2); font-weight: 700; }

.newsletter-banner {
  background: linear-gradient(120deg, rgba(255, 77, 109, 0.16), rgba(255, 201, 77, 0.1));
  border: 1px solid rgba(255, 77, 109, 0.35); border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 3rem); display: grid; gap: 1.5rem;
  grid-template-columns: 1.2fr 1fr; align-items: center;
}
.newsletter-banner .form { max-width: none; }
.newsletter-banner form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.newsletter-banner input[type="email"] {
  flex: 1; min-width: 200px; padding: 0.85rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(14, 11, 18, 0.6); color: var(--ink); font-size: 1rem;
}
@media (max-width: 800px) { .newsletter-banner { grid-template-columns: 1fr; } }

/* ---------- EPK ---------- */
.epk-downloads { display: grid; gap: 0.8rem; }
.epk-downloads a {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px dashed var(--line); border-radius: 12px; padding: 0.9rem 1.2rem;
  text-decoration: none; font-weight: 600;
}
.epk-downloads a:hover { border-color: var(--accent); }
.contact-block { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.contact-block h3 { color: var(--accent); font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; }
.contact-block a { color: var(--ink); }

/* ---------- Fil d'Ariane ---------- */
.breadcrumb { font-size: 0.82rem; color: var(--muted); margin: 1.4rem 0 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 0.4rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }

/* ---------- Réseaux sociaux / streaming ---------- */
.social-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.social-row a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1rem;
  text-decoration: none; font-size: 0.85rem; font-weight: 700;
  transition: border-color 0.25s, color 0.25s;
}
.social-row a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Pied de page ----------
   Même charte que le reste du site : fond noir, typographie de la page
   Biographie, filets fins, aucun arrondi. Restylé uniquement en CSS pour
   s'appliquer tel quel aux pages françaises comme anglaises. */
.site-footer {
  background: #000; color: #fff; border-top: 0; margin-top: 0;
  font-family: var(--font-bio);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1.5fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.4rem, 5vw, 3.5rem);
}

/* .brand est masqué partout ailleurs (l'en-tête utilise déjà le logo) ;
   on le réaffiche ici, en logo blanc, comme signature de bas de page. */
.site-footer .brand { display: inline-block; text-decoration: none; }
.site-footer .brand img {
  display: block; width: clamp(148px, 13vw, 200px); height: auto;
  opacity: 0.92; transition: opacity 0.25s ease;
}
.site-footer .brand:hover img { opacity: 1; }
.site-footer .muted {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.98rem; line-height: 1.7; max-width: 34ch;
  margin: 1rem 0 0;   /* remplace les marges autrefois posées en ligne */
}
.site-footer .social-row { margin-top: 1.6rem; }

.site-footer h4 {
  font-family: var(--font-bio);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.4em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.42);
  margin: 0 0 1.4rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
/* Navigation sur deux colonnes : c'est la plus longue des trois listes, et
   donc elle qui donnait sa hauteur au pied de page. Le remplissage se fait
   par colonne et non par rangée, sinon l'ordre de lecture serait rompu :
   on lit bien 1-2-3-4 puis 5-6-7-8, et non 1-2 / 3-4 en zigzag. */
.footer-grid > div:nth-child(2) ul {
  grid-auto-flow: column; grid-template-rows: repeat(4, auto);
  column-gap: clamp(1.2rem, 3vw, 2.4rem);
}
@media (max-width: 800px) {
  .footer-grid > div:nth-child(2) ul { grid-auto-flow: row; grid-template-rows: none; }
}
.site-footer ul a {
  text-decoration: none; color: rgba(255, 255, 255, 0.72);
  font-size: 0.98rem; transition: color 0.2s ease;
}
.site-footer ul a:hover { color: #fff; }

/* Réseaux : les icônes plutôt que les noms écrits, dans des cases carrées.
   Les tracés suivent la couleur du texte, ils sont donc blancs ici. */
.site-footer .social-row { flex-wrap: wrap; gap: 0.35rem; margin-left: -9px; }
/* Icônes seules, sans cadre. La case reste à 38 px pour garder une zone
   cliquable confortable, mais elle est transparente. */
.site-footer .social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 0; background: none;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s ease, transform 0.2s ease;
}
.site-footer .social-row a svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.site-footer .social-row a:hover { color: #fff; transform: translateY(-1px); background: none; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1.5rem 0 1.8rem;
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.45);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.footer-bottom a { color: rgba(255, 255, 255, 0.45); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Téléphone : pied de page ----------
   Les deux listes se partagent la largeur plutôt que de s'empiler : à elles
   seules, elles faisaient douze lignes à faire défiler. Le bloc d'identité
   passe au-dessus, sur toute la largeur et centré. */
@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 2.4rem clamp(2rem, 9vw, 3.6rem);
  }
  /* Centrage par la disposition plutôt que par l'alignement du texte : le
     logo est une image et la phrase un bloc, ni l'un ni l'autre ne dépend
     alors d'un héritage qu'une autre règle pourrait contredire. */
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
  }
  .footer-grid > div:first-child .brand { display: inline-block; margin: 0 auto; }
  .footer-grid > div:first-child .brand img { margin: 0 auto; }
  .footer-grid > div:first-child .muted { margin-left: auto; margin-right: auto; }
  .footer-grid > div:first-child .social-row { justify-content: center; }
  /* Les deux listes se centrent aussi : les colonnes sont resserrées autour
     de leur contenu et l'ensemble est ramené au milieu, plutôt que collé au
     bord gauche. */
  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(3) { text-align: center; }
}

/* ---------- Apparition au scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Réels Instagram : bandeau défilant (accueil) ---------- */
.home-reels {
  background: #0a0a0a;
  padding: clamp(2.4rem, 6vw, 3.6rem) 0 clamp(2.6rem, 6vw, 4rem);
  overflow: hidden;
}
.home-reels-head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
/* Typographie reprise de la page Biographie : même pile, mêmes graisses,
   mêmes interlettrages. Seules les couleurs changent, le fond étant noir. */
.home-reels-eyebrow {
  display: block; font-family: var(--font-bio);
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: #9a9a9a; margin-bottom: 1.1rem;
}
/* Même traitement que « Prochaines dates » sur le bloc Concerts : capitales,
   graisse 700, interlettrage large. Seule la couleur change, le fond étant
   noir ici. Les deux titres partagent déjà la même pile de polices. */
.home-reels-head h2 {
  font-family: var(--font-bio); font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.7;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: #fff; margin: 0 0 0.7rem;
}
.home-reels-handle {
  font-family: var(--font-bio); font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.6); text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 2px;
}
.home-reels-handle:hover { color: #fff; border-bottom-color: #fff; }

/* Portée cumulée, sous les réels : le chiffre porte le message, la
   typographie reste celle de la page Biographie comme le reste du bloc. */
.reach {
  text-align: center; font-family: var(--font-bio);
  /* 50 px sous les vignettes : de quoi décoller le compteur sans rouvrir
     un vrai blanc. */
  margin-top: 50px;
}
.reach-line {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 0.5rem 0.7rem; margin: 0;
}
.reach-num {
  font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1;
  letter-spacing: -0.02em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.reach-unit {
  font-weight: 600; font-size: clamp(1rem, 1.8vw, 1.3rem);
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
}
.reach-sub {
  margin: 0.7rem 0 0; font-size: 1.02rem; font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
}
.reach-pitch {
  /* Tenue sur une seule ligne tant que l'écran le permet : la limite de
     46rem la coupait en trois. Elle se remet à passer à la ligne d'elle-même
     sur les écrans trop étroits. */
  max-width: none; margin: 1.1rem auto 0;
  font-size: 1.02rem; font-weight: 300; line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}
.reach-plats {
  list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 0.5rem 0.7rem;
  margin: clamp(1.3rem, 3vw, 1.9rem) 0 0; padding: 0;
}
.reach-maj {
  margin: 0.9rem 0 0; font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.35);
}
.reach-plats li {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  transition: border-color 0.22s ease, color 0.22s ease, background 0.22s ease;
}
/* Le lien porte le retrait, pour que toute la pastille soit cliquable. */
.reach-plats li > a {
  display: block; padding: 0.42rem 0.9rem;
  color: inherit; text-decoration: none;
}
.reach-plats li:not(:has(a)) { padding: 0.42rem 0.9rem; }
.reach-plats li:hover, .reach-plats li:focus-within {
  color: #fff; border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

/* Piste : deux copies de la liste mises bout à bout, translatées de -50 % à 0
   pour un défilement continu vers la droite sans raccord visible. */
.reels-marquee { position: relative; }
.reels-marquee::before,
.reels-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(60px, 12vw, 180px);
  z-index: 2; pointer-events: none;
}
.reels-marquee::before { left: 0; background: linear-gradient(90deg, #0a0a0a 0%, rgba(10, 10, 10, 0) 100%); }
.reels-marquee::after { right: 0; background: linear-gradient(270deg, #0a0a0a 0%, rgba(10, 10, 10, 0) 100%); }

/* L'écart est porté par les cartes (margin-right) et non par un gap : la moitié
   de la piste vaut alors exactement une série complète, et la boucle est nette. */
.reels-track {
  display: flex; width: max-content;
  will-change: transform;
  animation: reels-scroll var(--reels-dur, 90s) linear infinite;
}
.reels-marquee:hover .reels-track,
.reels-track:focus-within { animation-play-state: paused; }
@keyframes reels-scroll {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Carte */
.reel-card {
  position: relative; flex: 0 0 auto;
  width: clamp(190px, 16vw, 250px); aspect-ratio: 9 / 16;
  margin-right: clamp(14px, 1.6vw, 26px);
  border-radius: 14px; overflow: hidden; background: #141414;
  transition: transform 0.35s ease;
}
.reel-card:hover { transform: translateY(-6px); }
.reel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 28%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0) 55%);
}
/* Lien plein cadre, sous les boutons de la colonne d'actions */
.reel-link { position: absolute; inset: 0; z-index: 3; }

/* Colonne d'actions à droite */
.reel-rail {
  position: absolute; right: 8px; bottom: 28%; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
}
.reel-act {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; padding: 0; cursor: pointer; color: #fff;
  font-family: var(--font-bio); font-size: 0.62rem;
  font-weight: 600; letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.reel-act:hover { transform: scale(1.12); }
.reel-act svg { width: 21px; height: 21px; stroke: #fff; fill: none; stroke-width: 1.7; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.reel-act.is-copied svg { stroke: var(--accent-2); }

/* Bas de carte : compte, bouton suivre, légende, vignette */
.reel-bottom {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4;
  display: flex; flex-direction: column; gap: 0.5rem;
  font-family: var(--font-bio);
}
.reel-user { display: flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.reel-avatar {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.reel-name {
  color: #fff; font-size: 0.72rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.reel-check { width: 12px; height: 12px; flex: 0 0 auto; }
.reel-follow {
  margin-left: auto; flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 5px;
  padding: 2px 8px; font-size: 0.62rem; font-weight: 600; color: #fff;
  text-decoration: none; white-space: nowrap;
}
.reel-follow:hover { background: rgba(255, 255, 255, 0.18); }
.reel-capline {
  display: flex; align-items: flex-end; gap: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 0.5rem;
}
.reel-cap {
  flex: 1 1 auto; min-width: 0;
  color: rgba(255, 255, 255, 0.92); font-size: 0.68rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.reel-thumb {
  width: 26px; height: 26px; border-radius: 5px; object-fit: cover; flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Sans animation : le bandeau devient une simple bande qu'on fait défiler à la main */
@media (prefers-reduced-motion: reduce) {
  .reels-track { animation: none; transform: none; }
  .reels-marquee { overflow-x: auto; scrollbar-width: thin; }
}
@media (max-width: 700px) {
  .reel-card { width: 62vw; max-width: 250px; }
}

/* ---------- Galerie mosaïque (accueil) ----------
   Les 32 photos live, réparties en deux bandeaux pleine largeur : 13 photos
   sur 2 rangées entre le teaser et la biographie, 19 sur 3 rangées plus bas.
   24 colonnes dans les deux cas : cette finesse permet de faire varier la
   largeur des tuiles (3, 4 ou 5 colonnes) sans jamais laisser de trou.
   Les deux rapports sont calculés pour donner la MÊME hauteur de rangée aux
   deux bandeaux — sans quoi on verrait deux galeries au lieu d'une seule. */
.home-shots { background: #000; }
/* Bandeaux 1 et 2 sur fond blanc : ce sont les gouttières qui prennent la
   couleur, plus un filet de même épaisseur en haut et en bas. Il faut donc
   aussi éclaircir le fond d'attente des tuiles, sinon un carré sombre
   apparaît le temps du chargement de chaque image. */
.home-shots--top,
.home-shots--a { background: #fff; padding: 8px 0; }
.home-shots--top .shot,
.home-shots--a .shot { background: #ececec; }
/* Bandeaux 3 et 4 : même respiration, mais sur le noir du site */
.home-shots--c,
.home-shots--b { padding: 8px 0; }
/* Les filets haut et bas suivent la gouttière, qui se resserre aux petites tailles */
@media (max-width: 1100px) {
  .home-shots--top, .home-shots--a, .home-shots--c, .home-shots--b { padding: 6px 0; }
}
@media (max-width: 620px) {
  .home-shots--top, .home-shots--a, .home-shots--c, .home-shots--b { padding: 4px 0; }
}
.shots-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 8px;
}
/* Le rapport d'une grille dépend de son nombre de rangées. Les trois
   valeurs sont calculées pour donner la MÊME hauteur de rangée aux trois
   bandeaux — sans quoi on verrait trois galeries au lieu d'une seule. */
.shots-grid--1 { grid-template-rows: 1fr;          aspect-ratio: 11.74; }
.shots-grid--3 { grid-template-rows: repeat(3, 1fr); aspect-ratio: 3.79; }

.shot { position: relative; overflow: hidden; margin: 0; background: #111; }
.shot-btn {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.shot-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.shot:hover img { transform: scale(1.06); }

/* Deux photos que le recadrage automatique décapitait. object-fit: cover
   rogne à partir du centre, ce qui convient à presque toutes les images de la
   galerie - mais pas quand le sujet est haut placé.
     - live-24 : format paysage dans une case plus large encore, 22 % de
       hauteur perdue. Centrée, la coupe démarrait à 11 % et la tête du
       guitariste, qui commence à 1 %, sautait. On cadre donc en haut.
     - live-16 : photo verticale dans une case horizontale, 53 % de hauteur
       perdue. La chanteuse a la tête vers 21 % : à 22 %, la coupe commence à
       13 % et lui laisse de l'air au-dessus, sans remonter jusqu'au noir. */
.home-shots--b .shot--24 img { object-position: 50% 0; }
.home-shots--b .shot--16 img { object-position: 50% 22%; }

/* grid-area : rangée-début / colonne-début / rangée-fin / colonne-fin */
.shot--01 { grid-area: 1 / 1 / 2 / 5; }
.shot--02 { grid-area: 1 / 5 / 2 / 9; }
.shot--03 { grid-area: 1 / 9 / 2 / 13; }
.shot--04 { grid-area: 1 / 13 / 2 / 17; }
.shot--05 { grid-area: 1 / 17 / 2 / 21; }
.shot--06 { grid-area: 1 / 21 / 2 / 25; }
.shot--08 { grid-area: 1 / 1 / 2 / 5; }
.shot--09 { grid-area: 1 / 5 / 2 / 9; }
.shot--10 { grid-area: 1 / 9 / 2 / 13; }
.shot--11 { grid-area: 1 / 13 / 2 / 17; }
.shot--12 { grid-area: 1 / 17 / 2 / 21; }
.shot--13 { grid-area: 1 / 21 / 2 / 25; }

.shot--14 { grid-area: 1 / 1 / 2 / 5; }
.shot--15 { grid-area: 1 / 5 / 2 / 10; }
.shot--16 { grid-area: 1 / 10 / 2 / 13; }
.shot--17 { grid-area: 1 / 13 / 2 / 17; }
.shot--18 { grid-area: 1 / 17 / 2 / 21; }
.shot--19 { grid-area: 1 / 21 / 2 / 25; }
.shot--21 { grid-area: 2 / 1 / 3 / 4; }
.shot--22 { grid-area: 2 / 4 / 3 / 9; }
.shot--23 { grid-area: 2 / 9 / 3 / 13; }
.shot--24 { grid-area: 2 / 13 / 3 / 17; }
.shot--25 { grid-area: 2 / 17 / 3 / 22; }
.shot--26 { grid-area: 2 / 22 / 3 / 25; }
.shot--27 { grid-area: 3 / 1 / 4 / 6; }
.shot--28 { grid-area: 3 / 6 / 4 / 9; }
.shot--29 { grid-area: 3 / 9 / 4 / 13; }
.shot--30 { grid-area: 3 / 13 / 4 / 17; }
.shot--31 { grid-area: 3 / 17 / 4 / 20; }
.shot--32 { grid-area: 3 / 20 / 4 / 25; }

.shot--33 { grid-area: 1 / 1 / 2 / 4; }
.shot--34 { grid-area: 1 / 4 / 2 / 6; }
.shot--35 { grid-area: 1 / 6 / 2 / 9; }
.shot--36 { grid-area: 1 / 9 / 2 / 11; }
.shot--37 { grid-area: 1 / 11 / 2 / 14; }
.shot--38 { grid-area: 1 / 14 / 2 / 16; }
.shot--39 { grid-area: 1 / 16 / 2 / 19; }
.shot--40 { grid-area: 1 / 19 / 2 / 21; }
.shot--41 { grid-area: 1 / 21 / 2 / 23; }
/* Photo venue du second bandeau : elle porte déjà la classe .shot--07, dont
   le placement vaut pour l'autre grille. On le redéfinit ici seulement. */
.home-shots--top .shot--07 { grid-area: 1 / 23 / 2 / 25; }
/* Sous 1100 px les bandeaux deviennent des planches-contact : quatre
   colonnes de photos au format d'origine, donc sans aucun recadrage. */
@media (max-width: 1100px) {
  .shots-grid {
    grid-template-columns: repeat(4, 1fr); grid-template-rows: none;
    aspect-ratio: auto; gap: 6px;
  }
  .shot { grid-area: auto; aspect-ratio: 3 / 2; }
  /* La photo venue du second bandeau porte un placement plus spécifique que
     la règle ci-dessus : il faut l'annuler explicitement, sinon elle réclame
     des colonnes qui n'existent plus et sort de la grille. */
  .home-shots--top .shot--07 { grid-area: auto; }
}
@media (max-width: 620px) {
  .shots-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  /* Premier bandeau, 9 photos : en deux colonnes il occupait cinq rangées et
     repoussait tout le reste. Cinq colonnes le ramènent à deux rangées, au
     prix de vignettes plus petites - c'est une respiration, pas une galerie,
     et l'agrandissement au clic reste disponible. */
  .home-shots--top .shots-grid { grid-template-columns: repeat(5, 1fr); gap: 3px; }
  /* Second bandeau : six photos sur une seule rangée. */
  .home-shots--a .shots-grid { grid-template-columns: repeat(6, 1fr); gap: 3px; }
  /* Troisième bandeau : six photos, une rangée. */
  .home-shots--c .shots-grid { grid-template-columns: repeat(6, 1fr); gap: 3px; }
  /* Bandeau du bas : dix-huit photos, trois rangées de six - le même
     découpage que sur grand écran. */
  .home-shots--b .shots-grid { grid-template-columns: repeat(6, 1fr); gap: 3px; }
}

/* ---------- Visionneuse ---------- */
.lb {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 0, 0, 0.94);
  opacity: 0; transition: opacity 0.25s ease;
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb-fig {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: 0.9rem; max-width: 100%; max-height: 100%;
}
.lb-img {
  display: block; max-width: 100%; max-height: calc(100vh - 8rem);
  width: auto; height: auto; object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lb-credit {
  font-family: var(--font-bio);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); text-align: center;
}
/* Croix seule, sans cadre. La zone cliquable reste à 44 px — la croix, elle,
   n'en occupe que 26, mais tout le carré transparent reste actionnable. */
.lb-close {
  position: absolute; top: clamp(0.8rem, 2vw, 1.6rem); right: clamp(0.8rem, 2vw, 1.6rem);
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0;
  opacity: 0.75; transition: opacity 0.2s ease;
}
.lb-close svg { width: 26px; height: 26px; stroke: #fff; stroke-width: 2.6; fill: none; }
.lb-close:hover { opacity: 1; }
.lb-close:focus { outline: none; }
.lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Newsletter : menu sombre, comme sur Contact. Le traitement blanc de l'EPK ne
   convient pas ici — la moitié droite est blanche, et dès que le dernier item
   du menu dépasse la césure il devient invisible. */
@media (min-width: 901px) {
  body.bio-page.newsletter-page .nav-links li > a { color: #1a1a1a; }
}
body.bio-page.newsletter-page .lang-switch a { color: rgba(26, 26, 26, 0.45); }
body.bio-page.newsletter-page .lang-switch .is-active,
body.bio-page.newsletter-page .lang-switch a:not(.is-active):hover { color: #1a1a1a; }
body.bio-page.newsletter-page .burger { border-color: rgba(26, 26, 26, 0.3); }
body.bio-page.newsletter-page .burger span { background: #1a1a1a; }
/* Voile clair limité à la moitié photo : la scène est très saturée et le texte
   sombre n'y passerait qu'à 3,3:1. Le voile le remonte à ~4,9:1. */
body.epk-page.newsletter-page .site-header {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.28) 0 50%, rgba(255, 255, 255, 0) 50%);
}
@media (max-width: 900px) {
  body.epk-page.newsletter-page .site-header { background: rgba(255, 255, 255, 0.28); }
}
.home-nl-box.epk-black {
  margin: 0; border-radius: 4px;
  padding: clamp(2rem, 4vw, 3.2rem);
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.6rem); align-items: center;
}
.home-nl .form-msg {
  font-family: var(--font-bio); font-size: 0.95rem; font-weight: 600;
  color: #fff; border-left: 2px solid #fff; padding-left: 0.9rem; margin: 0.4rem 0 0;
}
@media (max-width: 860px) {
  .home-nl-box.epk-black { grid-template-columns: 1fr; }
}

/* ---------- Biographie : bloc Contacts en fin de page ----------
   La page Biographie met déjà tous ses h2 sur bandeau noir. Celui-ci étant
   à l'intérieur d'un bloc noir, il faut lui retirer son propre bandeau,
   sans quoi le noir se superposerait au noir. */
body.bio-page:not(.epk-page) .epk-black h2 {
  background: none; color: #fff;
  margin: 0 0 1.5rem; padding: 0;
}
/* Les liens du bloc noir passent en blanc — sauf le bouton, qui est un aplat
   blanc et doit donc garder son texte sombre. */
body.bio-page:not(.epk-page) .epk-black a:not(.bio-contact-btn) { color: #fff; }
body.bio-page:not(.epk-page) .epk-black a:not(.bio-contact-btn):hover { color: rgba(255, 255, 255, 0.7); }
.bio-contacts .epk-contacts { margin-bottom: 1.9rem; }
.bio-contacts .bio-contact-btn {
  display: inline-block; text-decoration: none !important;
  font-family: var(--font-bio);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #111; background: #fff; border: 1px solid #fff;
  padding: 0.95rem 1.9rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.bio-contacts .bio-contact-btn:hover { background: transparent; color: #fff; }

/* ---------- Page Newsletter ----------
   Même gabarit que Contact : photo fixe à gauche, colonne défilable à droite. */
.nl-list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.nl-list li {
  position: relative; padding: 0.78rem 0 0.78rem 1.6rem;
  border-bottom: 1px solid #ececec;
  font-size: 1.08rem; line-height: 1.6; color: #333;
}
.nl-list li::before {
  content: ""; position: absolute; left: 0; top: 1.5rem;
  width: 9px; height: 1px; background: #111;
}
/* Case à cocher du consentement, posée sur le bloc noir */
.ct-consent {
  display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer;
  font-family: var(--font-bio); font-size: 0.92rem; line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}
.ct-consent input { flex: 0 0 auto; margin-top: 0.28rem; accent-color: #fff; }
.ct-consent:hover { color: rgba(255, 255, 255, 0.85); }
.home-nl > .wrap { position: relative; z-index: 1; }

/* ---------- Barre de compteurs sociaux (page Biographie) ----------
   Icône, chiffre, filet, libellé — un bloc par réseau, séparés par des
   filets verticaux. Typographie de la page, en graisse légère pour que le
   chiffre reste élégant plutôt qu'imposant. */
.soc-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 3rem 0 0;
  padding: 1.4rem 0;
}
.soc-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  padding: 0 0.6rem; text-decoration: none !important; color: inherit;
}
.soc-item + .soc-item { border-left: 1px solid #ececec; }
/* fill ET stroke suivent currentColor : l'icône Instagram est tracée, pas pleine */
.soc-ico {
  width: 20px; height: 20px; flex: 0 0 auto;
  color: #b0b0b0; fill: currentColor;
  transition: color 0.25s ease;
}
.soc-item:hover .soc-ico { color: #111; }
/* Montserrat Light : déjà chargée par la page — c'est la police du menu — et
   la seule du jeu à posséder de vraies graisses fines. Helvetica et Arial
   s'arrêtent à la normale, d'où le chiffre qui paraissait gras. Ses chiffres
   géométriques conviennent bien à un compteur. */
.soc-n {
  font-family: "Montserrat", var(--font-bio); font-weight: 300;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem); line-height: 1;
  letter-spacing: 0.03em; color: #3a3a3a; text-align: center;
}
/* le filet court sous le chiffre, comme sur le modèle */
.soc-n::after {
  content: ""; display: block; width: 2.6rem; height: 1px;
  background: #d8d8d8; margin: 0.8rem auto 0;
}
.soc-l {
  font-family: var(--font-bio); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #a8a8a8; text-align: center; line-height: 1.5;
}
.soc-item:hover .soc-l { color: #666; }
/* Un chiffre encore non renseigné : on efface le filet, il n'y a rien à souligner */
.soc-n.is-empty { color: #c8c8c8; }
.soc-n.is-empty::after { background: #ececec; }

@media (max-width: 700px) {
  .soc-bar { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .soc-item:nth-child(odd) { border-left: 0; }
}

/* Page « Politique de cookies » : tableau des services */
.ck-tbl {
  width: 100%; border-collapse: collapse;
  margin: 1.6rem 0 2rem; font-size: 0.92rem;
}
.ck-tbl th, .ck-tbl td {
  text-align: left; vertical-align: top;
  padding: 0.85rem 0.9rem 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.ck-tbl th {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.ck-tbl td { color: rgba(255, 255, 255, 0.78); font-weight: 300; }
.ck-soc {
  display: block; font-size: 0.8rem; color: rgba(255, 255, 255, 0.45);
}
.ck-btn {
  font-family: var(--font-bio); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: #fff; color: #111; border: 1px solid #fff; border-radius: 2px;
  padding: 0.85rem 1.6rem; cursor: pointer; transition: background 0.2s ease;
}
.ck-btn:hover { background: rgba(255, 255, 255, 0.85); }
.actu-corps code {
  font-size: 0.9em; background: rgba(255, 255, 255, 0.08);
  border-radius: 3px; padding: 0.1em 0.4em;
}
@media (max-width: 700px) {
  .ck-tbl, .ck-tbl tbody, .ck-tbl tr, .ck-tbl td { display: block; width: 100%; }
  .ck-tbl thead { display: none; }
  .ck-tbl tr { padding: 0.6rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .ck-tbl td { border: 0; padding: 0.15rem 0; }
}

/* ---------- Consentement aux traceurs ----------
   Bandeau bas d'écran, sobre, et deux boutons de même poids : refuser doit
   être aussi immédiat qu'accepter. */
.tm-ck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  background: #0d0b10; color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-bio);
  transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tm-ck.is-open { transform: none; }
.tm-ck-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.4rem);
  max-width: 1560px; margin: 0 auto;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.2rem, 4vw, 3rem);
}
.tm-ck-txt {
  margin: 0; flex: 1 1 32rem;
  font-size: 0.92rem; font-weight: 300; line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.tm-ck-txt strong { color: #fff; font-weight: 600; }
.tm-ck-txt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tm-ck-btns { display: flex; flex-wrap: wrap; gap: 0.8rem; flex: 0 0 auto; }
.tm-ck-b {
  font-family: var(--font-bio); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.85rem 1.6rem; border-radius: 2px; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Même taille, même graisse, même retrait : seul le remplissage distingue
   les deux, jamais leur importance. */
.tm-ck-refus { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); }
.tm-ck-refus:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.tm-ck-ok { background: #fff; color: #111; border: 1px solid #fff; }
.tm-ck-ok:hover { background: rgba(255, 255, 255, 0.85); }

/* Fenêtre de réglages */
.tm-ckm {
  position: fixed; inset: 0; z-index: 510;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(8, 6, 10, 0.82);
  opacity: 0; transition: opacity 0.28s ease; transform: translateZ(0);
}
.tm-ckm.is-open { opacity: 1; }
.tm-ckm-box {
  position: relative; width: min(560px, 100%);
  max-height: calc(100vh - 4rem); overflow-y: auto;
  background: #0d0b10; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px;
  padding: clamp(2rem, 5vw, 2.9rem);
  font-family: var(--font-bio);
}
.tm-ckm-box h2 {
  margin: 0 0 0.6rem; font-family: var(--font-bio); font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.3; color: #fff;
}
.tm-ckm-lead {
  margin: 0 0 1.6rem; font-size: 0.95rem; font-weight: 300; line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
.tm-ckm-x {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 34px; height: 34px; padding: 0; background: none; border: 0;
  cursor: pointer; color: rgba(255, 255, 255, 0.55); transition: color 0.2s ease;
}
.tm-ckm-x:hover { color: #fff; }
.tm-ckm-x svg { width: 20px; height: 20px; display: block; margin: 0 auto; }
.tm-ckm-cat {
  display: flex; gap: 0.9rem; align-items: flex-start; cursor: pointer;
  padding: 1.1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.92rem; font-weight: 300; line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}
.tm-ckm-cat b { color: #fff; font-weight: 600; }
.tm-ckm-cat input { flex: 0 0 auto; margin-top: 0.3rem; accent-color: #fff; }
.tm-ckm-btns {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
.tm-ckm-btns .tm-ck-b { flex: 1 1 auto; }
.tm-ckm-note {
  margin: 1.2rem 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.45);
}
.tm-ckm-note a { color: rgba(255, 255, 255, 0.75); }

/* Cartouches posés à la place des lecteurs, tant que rien n'est autorisé */
 .sl-consent {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center;
  font-family: var(--font-bio); font-size: 0.9rem; font-weight: 300; line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  background: #141118; border: 1px solid rgba(255, 255, 255, 0.14);
  padding: clamp(1.4rem, 4vw, 2.2rem);
}
.sl-consent { border-radius: 6px; min-height: 180px; } .sl-consent p { margin: 0; max-width: 34rem; } .sl-consent strong { color: #fff; font-weight: 600; } .sl-consent button {
  font-family: var(--font-bio); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: #fff; color: #111; border: 1px solid #fff; border-radius: 2px;
  padding: 0.8rem 1.5rem; cursor: pointer; transition: background 0.2s ease;
} .sl-consent button:hover { background: rgba(255, 255, 255, 0.85); }

@media (max-width: 700px) {
  .tm-ck-btns { width: 100%; }
  .tm-ck-btns .tm-ck-b { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-ck, .tm-ckm { transition: none; }
}

/* ---------- Newsletter : bandeau pleine largeur ----------
   Un seul geste proposé : le bouton. La photo occupe la gauche et se fond
   dans le fond, dont la teinte reprend exactement le gris du studio
   (220,219,224) pour que la jointure ne se voie pas. */
.nl-band {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(210px, 24vw, 340px);
  background: linear-gradient(100deg, #d8d7dc 0%, #cfccd3 46%, #c0bcc5 100%);
}
.nl-band-photo {
  position: absolute; left: 0; top: 0;
  width: clamp(240px, 34vw, 620px); height: 100%;
  /* Les sujets occupent 9 à 73 % de la hauteur : le cadrage vise ce tiers
     haut, sinon le bandeau ne montre que des jambes. */
  object-fit: cover; object-position: 50% 13%;
  /* fondu vers la droite : la photo se dissout dans le fond du bandeau */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 96%);
}
.nl-band-inner { position: relative; z-index: 1; padding: 2rem 1.5rem; }
.nl-band-btn {
  font-family: var(--font-bio); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #1a1a1a; background: transparent;
  border: 1px solid rgba(26, 26, 26, 0.55); border-radius: 2px;
  padding: 0.95rem 1.9rem; cursor: pointer;
  transition: background 0.24s ease, color 0.24s ease, border-color 0.24s ease;
}
.nl-band-btn:hover, .nl-band-btn:focus-visible {
  background: #1a1a1a; border-color: #1a1a1a; color: #fff;
}
@media (max-width: 700px) {
  .nl-band-photo { width: 100%; opacity: 0.45;
    -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Téléphone : baseline du héro ----------
   « Chanson française · Pop · Rock » fait 30 signes ; à 0,38em d'interlettrage
   il déborde de l'écran. On resserre et on laisse la ligne se couper. */
/* ---------- Téléphone : photo du héro ----------
   L'original est un paysage : sur un écran vertical, le cadrage n'en garde
   qu'une bande centrale. On sert la même photo pivotée d'un quart de tour
   vers la droite, à la taille d'un téléphone - 5,2 Mo deviennent 150 Ko. */
@media (max-width: 620px) {
  .hero {
    background: url("../img/accueil-portrait.jpg") center center / cover no-repeat, var(--bg-2);
    /* Le bloc n'est plus centré puis décalé, il est posé au tiers de la
       hauteur : le décalage de 21vh, calculé pour un écran large, l'envoyait
       ici jusqu'aux deux tiers et la pochette passait sous la ligne de flottaison. */
    align-items: flex-start;
    padding-top: 19svh;
  }
  .hero-inner { transform: none; }
}

@media (max-width: 620px) {
  .hero-tagline {
    letter-spacing: 0.22em; margin-right: -0.22em;
    padding-right: calc(1.05em - 0.22em);
    white-space: normal; line-height: 1.9;
    max-width: calc(100vw - 3rem);
  }
}

/* Fenêtre d'inscription : le gabarit des concerts, avec le formulaire */
/* Fenêtre sur fond blanc : elle hérite du gabarit sombre des concerts,
   il faut donc reprendre chaque couleur une à une. */
/* .gm-boite est déclarée plus bas dans le fichier : à spécificité égale
   elle l'emporterait. On double la classe pour reprendre la main. */
.gm-boite.nl-boite {
  width: min(480px, 100%);
  /* Même dégradé que le bandeau : la fenêtre prolonge le bloc dont elle
     sort, plutôt que d'ouvrir un carré blanc sans rapport. */
  background: linear-gradient(150deg, #d8d7dc 0%, #cfccd3 52%, #c4c0c9 100%);
  color: #111;
  border-color: rgba(17, 17, 17, 0.14);
}
.gm-boite.nl-boite .gm-fermer { color: rgba(17, 17, 17, 0.45); }
.gm-boite.nl-boite .gm-fermer:hover, .gm-boite.nl-boite .gm-fermer:focus-visible { color: #111; }
.gm-boite.nl-boite .gm-quand { color: #6f6c76; }
.gm-boite.nl-boite .gm-titre { color: #111; }
.nl-modale-lead {
  margin: 0 0 clamp(1.4rem, 3vw, 1.9rem);
  font-size: 0.98rem; font-weight: 400; line-height: 1.7;
  color: #26232c;
}

/* ---------- Cadre d'inscription Substack ----------
   Le contenu du cadre appartient à Substack : on ne peut pas le styler depuis
   ici, un document d'un autre domaine est hors d'atteinte. On soigne donc ce
   qui reste à notre portée - la place qu'il occupe et ce qui l'entoure - pour
   qu'il s'insère sans détonner. */
.nl-embed { min-height: 122px; }
.nl-embed iframe {
  width: 100%; min-height: 122px; border: 0; display: block;
  /* Le fond de Substack est blanc ; celui de la fenêtre est teinté. Un léger
     arrondi et un filet suffisent à faire du cadre un élément voulu plutôt
     qu'un rectangle rapporté. */
  border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.nl-embed-note {
  margin: 0.9rem 0 0; font-size: 0.78rem; line-height: 1.6; color: #4a4750;
}
.nl-embed-note a { color: #26232c; }

/* Page Newsletter : le bouton qui déclenche le chargement du cadre. */
.nl-embed-btn {
  display: inline-block; cursor: pointer;
  font-family: var(--font-bio); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #111; background: #fff; border: 1px solid #d8d8d8;
  padding: 0.8rem 1.4rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nl-embed-btn:hover { background: #111; border-color: #111; color: #fff; }
.nl-embed-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nl-form .ct-field { margin-bottom: 1rem; }
/* Repères des champs obligatoires et mention « facultatif » : eux aussi
   se noyaient dans le fond teinté. */
.nl-form label span[aria-hidden], .nl-form .ct-consent span[aria-hidden] { color: #26232c; }
.nl-form .ct-opt { color: #6b6873; }
.nl-form label { color: #26232c; }
.nl-form input[type="text"], .nl-form input[type="email"] {
  background: rgba(255, 255, 255, 0.72); border-color: rgba(17, 17, 17, 0.22);
  color: #111;
}
.nl-form input[type="text"]:focus, .nl-form input[type="email"]:focus {
  border-color: #111;
}
.nl-form input::placeholder { color: #6b6873; }
.nl-form .ct-consent { color: #26232c; }
.nl-form .ct-consent input { accent-color: #111; }
/* Le bouton d'envoi est blanc sur fond sombre dans le gabarit : on le rend
   au noir, sinon il disparaîtrait. */
.nl-form .ct-submit {
  width: 100%; margin-top: 0.4rem;
  background: #111; color: #fff; border-color: #111;
}
.nl-form .ct-submit:hover { background: #fff; color: #111; }
.gm-boite.nl-boite .form-msg.is-ok { color: #2f8f5b; }
.gm-boite.nl-boite .form-msg.is-ko { color: #c8452f; }

/* ---------- Concerts : bouton et fenêtre « En savoir plus » ----------
   Le bouton reprend le trait des liens du site : capitales, Inter, souligné
   discret. La fenêtre, elle, est volontairement sobre - fond très sombre,
   texte aéré - pour ne pas jurer avec la colonne blanche des dates. */
/* Bouton et pastille sur une même ligne, le bouton en premier. Il est écrit
   après la pastille dans le HTML - l'ordre logique pour un lecteur d'écran :
   l'état d'abord, l'action ensuite - donc on l'avance à l'affichage. */
.gig-actions {
  display: flex; flex-direction: row; align-items: center;
  gap: 1.9rem; flex-wrap: wrap; justify-content: flex-end;
}
.gig-actions .gig-more { order: -1; }
.gig-more {
  display: inline-block; white-space: nowrap;
  font-family: var(--font-bio); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #111; background: none;
  border: 0; border-bottom: 1px solid rgba(17, 17, 17, 0.35);
  padding: 0 0 0.22rem; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.gig-more:hover, .gig-more:focus-visible { color: #000; border-bottom-color: #111; }
.concerts-info-inner .gig-list .gig:nth-child(even) .gig-more {
  color: rgba(255, 255, 255, 0.8); border-bottom-color: rgba(255, 255, 255, 0.35);
}
.concerts-info-inner .gig-list .gig:nth-child(even) .gig-more:hover,
.concerts-info-inner .gig-list .gig:nth-child(even) .gig-more:focus-visible {
  color: #fff; border-bottom-color: #fff;
}

.gm-fond {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  /* Voile plein plutôt que flou d'arrière-plan : sur cette page la colonne
     des dates est un conteneur défilant, que le navigateur compose à part.
     Un backdrop-filter passait alors derrière elle une fois sur deux. */
  background: rgba(8, 6, 10, 0.82);
  transform: translateZ(0);
  opacity: 0; transition: opacity 0.28s ease;
}
.gm-fond[hidden] { display: none; }
.gm-fond.is-open { opacity: 1; }
.gm-boite {
  position: relative; width: min(560px, 100%);
  max-height: calc(100vh - 4rem); overflow-y: auto;
  background: #0d0b10; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px;
  padding: clamp(2rem, 5vw, 2.9rem);
  font-family: var(--font-bio);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
/* La boîte reçoit le focus à l'ouverture, pour les lecteurs d'écran : elle ne
   doit pas pour autant afficher l'anneau réservé aux commandes. */
.gm-boite:focus, .gm-boite:focus-visible { outline: none; }
.gm-fond.is-open .gm-boite { transform: none; }
.gm-fermer {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}
.gm-fermer:hover, .gm-fermer:focus-visible { color: #fff; }
.gm-fermer svg { width: 20px; height: 20px; display: block; margin: 0 auto; }
.gm-quand {
  margin: 0 0 0.7rem; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.gm-titre {
  margin: 0 0 0.5rem; font-family: var(--font-bio); font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.3;
  letter-spacing: 0.01em; color: #fff;
}
.gm-lieu { margin: 0 0 0.15rem; font-size: 1.02rem; color: #fff; }
.gm-adresse {
  margin: 0 0 clamp(1.3rem, 3vw, 1.8rem);
  font-size: 0.92rem; color: rgba(255, 255, 255, 0.55);
}
.gm-texte {
  font-size: 1rem; font-weight: 300; line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}
.gm-texte p { margin: 0; }
.gm-liens {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin: clamp(1.6rem, 3.5vw, 2.2rem) 0 0;
  padding-top: clamp(1.2rem, 3vw, 1.6rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.gm-liens a {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 0.2rem;
  transition: border-color 0.2s ease;
}
.gm-liens a:hover { border-bottom-color: #fff; }
body.gm-fige { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .gm-fond, .gm-boite { transition: none; }
}

/* ---------- Actualités : journal ----------
   Une grille de vignettes sur fond noir, du menu au pied de page.
   Typographie de la page Biographie, comme le reste du site. */
body.actualites-page { background: #000; }
body.actualites-page main { color: #fff; }
.bf-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.bf-slide.is-active:hover .bf-slide-img { transform: scale(1.03); }
.bf-card.is-active .bf-card-media img{ opacity: 1; }
.bf-card.is-active .bf-card-title{ color: #fff; }
@keyframes bf-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ----- Toutes les actualités : grille de vignettes sur fond noir -----
   Vignette, date discrète, titre en capitales : la mise en page reprend
   celle des pages d'actualités de label. Le fond noir sépare nettement
   ce catalogue du carrousel clair qui le précède. */
.blog-rest {
  background: #000; color: #fff;
  padding: clamp(1rem, 2vw, 1.4rem) 0 clamp(4rem, 9vw, 7rem);
}
.blog-rest-h {
  font-family: var(--font-bio); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.7;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; text-align: center;
  margin: 0 0 clamp(1.4rem, 3vw, 2.1rem); padding: 0; border: 0;
}
.bl-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.6rem, 6vw, 4.5rem) clamp(2.5rem, 7vw, 6.5rem);
}
.bl-row.is-hidden { display: none; }
.bl-row a {
  display: block; text-decoration: none !important; color: inherit;
  font-family: var(--font-bio);
}
.bl-media {
  display: block; overflow: hidden; background: #141414;
  aspect-ratio: 3 / 4;
}
.bl-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bl-row a:hover .bl-media img { transform: scale(1.05); }
.bl-date {
  display: block; margin: 1.1rem 0 0.45rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8a8a8a;
}
.bl-title {
  display: block;
  font-size: 0.95rem; font-weight: 700; line-height: 1.45;
  letter-spacing: 0.05em; text-transform: uppercase; color: #fff;
  transition: color 0.2s ease;
}
.bl-row a:hover .bl-title { color: #c9c9c9; }

/* ---------- Actualité à la une ----------
   Seule sur sa rangée, une vignette au format 3/4 paraîtrait esseulée. Celle
   du haut prend donc toute la largeur, en paysage, et son titre grossit :
   la dernière nouvelle se lit comme une une, pas comme un orphelin de grille. */
.bl-row--une { grid-column: 1 / -1; }
.bl-row--une .bl-media { aspect-ratio: 16 / 9; }
.bl-row--une .bl-date { margin-top: 1.4rem; }
.bl-row--une .bl-title {
  font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.25; letter-spacing: 0.03em;
  max-width: 24ch;
}

/* ---------- Archives des actualités ----------
   Même langage que les années repliées de la page Concerts : un <details>
   natif, un chevron qui pivote, le compte poussé à droite. */
.bl-archives { margin-top: clamp(2.6rem, 6vw, 4.5rem); }
.bl-archives > details { border-top: 1px solid #262626; }
.bl-arch-tete {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.5rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-bio); color: #8a8a8a; transition: color 0.25s ease;
}
.bl-arch-tete::-webkit-details-marker { display: none; }
.bl-arch-tete:hover { color: #fff; }
.bl-arch-tete:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.bl-arch-t {
  font-size: 1.5rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.bl-arch-c {
  order: 2; margin-left: auto;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.bl-arch-fleche { order: 1; width: 22px; height: 22px; flex: none; transition: transform 0.25s ease; }
.bl-archives > details[open] > .bl-arch-tete { color: #fff; }
.bl-archives > details[open] > .bl-arch-tete .bl-arch-fleche { transform: rotate(180deg); }
.bl-list--arch { margin-top: clamp(1.6rem, 4vw, 2.6rem); }
@media (prefers-reduced-motion: reduce) { .bl-arch-fleche { transition: none; } }

/* Apparition des lots suivants */
.bl-row.is-entering { opacity: 0; transform: translateY(12px); }
.bl-row.is-entered {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.bl-vide {
  grid-column: 1 / -1; text-align: center;
  font-family: var(--font-bio); color: rgba(255, 255, 255, 0.6);
}
.bl-vide a { color: #fff; }

@media (max-width: 900px) {
  .bl-list { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Actualité : page d'article ----------
   Colonne unique et centrée, largeur calée sur celle de l'image de tête ;
   fond noir et typographie des pages Biographie et Concerts. */
/* L'image de tête part du bord haut de la page : le menu, transparent, se
   pose dessus comme sur le HERO. Son dégradé sombre suffit sur les photos
   sombres ; sur les plus claires, c'est l'ombre portée des libellés qui
   assure la lisibilité, sans avoir à voiler l'image. */
.actu { padding: 0 0 clamp(4rem, 9vw, 7rem); }
body.article-page main { padding-top: 0; }
/* Un léger retrait fait descendre la photo sans la décoller du haut :
   le menu reste posé dessus. */
body.article-page .actu-wrap { padding-top: 64px; }
body.article-page .site-header {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0, rgba(0, 0, 0, 0.5) 46px,
                                      rgba(0, 0, 0, 0.24) 68px, transparent 92px);
}
body.article-page .site-header.is-scrolled { background: rgba(10, 8, 14, 0.88); }
body.article-page .nav-links li > a,
body.article-page .lang-switch a {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.6);
}
body.article-page .social-icons a,
body.article-page .burger span {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9));
}
.actu-wrap {
  width: min(1240px, calc(100% - 2 * clamp(1.2rem, 5vw, 3rem)));
  margin: 0 auto;
  font-family: var(--font-bio);
}
/* Les images à la une vont du panoramique à l'affiche verticale. On les
   laisse à leur format, mais bornées en hauteur : sur une colonne large,
   une affiche portrait remplirait sinon tout l'écran avant le titre. */
.actu-hero {
  display: block; margin: 0 auto clamp(1.6rem, 3.5vw, 2.4rem);
  max-width: 100%; width: auto; height: auto;
  max-height: 74vh; background: #141414;
}
.actu-date {
  margin: 0 0 0.7rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8a8a8a;
}
.actu-titre {
  margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem);
  font-family: var(--font-bio); font-weight: 700;
  font-size: clamp(1.55rem, 3.2vw, 2.9rem); line-height: 1.2;
  letter-spacing: 0.01em; text-transform: uppercase; color: #fff;
}
/* Corps de texte calé sur le chapô de la page Biographie :
   même famille, même corps, même interlettrage. */
.actu-corps {
  font-size: 1.35rem; font-weight: 300; line-height: 1.65;
  letter-spacing: -0.01em; color: #c6c6c6;
}
.actu-corps p { font-weight: 300; }
.actu-corps p { margin: 0 0 1.15em; }
/* Intertitres : sans réglage, ils héritaient de la police d'affichage du site,
   très large, en décalage avec le corps du texte. */
.actu-corps h2 {
  margin: 2.4em 0 0.8em;
  font-family: var(--font-bio); font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.4;
  letter-spacing: 0.02em; color: #fff;
}
.actu-corps h2:first-child { margin-top: 0; }
.actu-corps p:last-child { margin-bottom: 0; }
.actu-corps strong { color: #fff; font-weight: 700; }
.actu-corps a {
  color: #fff; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: text-decoration-color 0.2s ease;
}
.actu-corps a:hover { text-decoration-color: #fff; }
.actu-corps .yt { margin: clamp(1.6rem, 3.5vw, 2.4rem) 0; }

/* Partage : mêmes boutons que les pages d'écoute */
.actu-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  padding-top: clamp(1.6rem, 3.5vw, 2.2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.actu-share-t {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: #fff; margin-right: 0.3rem;
}
.actu-retour { margin: clamp(2rem, 4.5vw, 2.8rem) 0 0; }
.actu-retour a {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8a8a8a;
  text-decoration: none; transition: color 0.2s ease;
}
.actu-retour a::before { content: "←"; margin-right: 0.6em; }
.actu-retour a:hover { color: #fff; }

/* ---------- Albums : catalogue ----------
   Pochettes carrées sur fond noir, titre et année dessous, puis le lien.
   Typographie des pages Concerts et Biographie. */
body.albums-page { background: #fff; }
/* Conteneur élargi : les pochettes gagnent en taille et les disques ont la
   place de sortir sans buter sur la carte voisine. */
body.albums-page .wrap { max-width: 1560px; }
.catalogue { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(4rem, 9vw, 7rem); }
/* Le grand retrait du haut servait à dégager le titre « Discographie ».
   Sans lui, la page démarre plus près du menu. */
.catalogue--clair {
  background: #fff; color: #111;
  padding-top: clamp(1.6rem, 3.5vh, 2.4rem);
  /* Deux valeurs se cumulaient sous la rangée d'albums - la marge de la
     grille et le retrait de la section - soit 203 px de blanc avant le bloc
     noir. On les resserre toutes les deux. */
  padding-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.catalogue--clair .cat-sub + .cat-grid { margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); }
.catalogue--sombre {
  background: #000; color: #fff;
  /* Même resserrage que la partie claire : la marge de la grille et le
     retrait de la section s'additionnaient sous la dernière rangée. */
  padding-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.catalogue--sombre .cat-sub + .cat-grid { margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); }
/* Mêmes réglages que « Prochaines dates » sur l'accueil */
.cat-sub {
  font-family: var(--font-bio); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.7;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem);
}
.catalogue--clair .cat-sub { color: #111; }
.catalogue--sombre .cat-sub { color: #fff; }
.cat-sub + .cat-grid { margin-bottom: clamp(3rem, 7vw, 5rem); }

.cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  /* gouttière horizontale généreuse : c'est dans cet espace que le disque
     vient se loger au survol */
  gap: clamp(2.4rem, 5vw, 4rem) clamp(3rem, 8vw, 9rem);
  justify-items: center;
}
.cat-item {
  display: block; max-width: 420px; width: 100%;
  text-decoration: none !important; color: inherit;
  font-family: var(--font-bio); text-align: center;
}
.cat-media { display: block; overflow: hidden; aspect-ratio: 1 / 1; background: #111; }
.catalogue--clair .cat-media { background: #ececec; }
.cat-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cat-item:hover .cat-media img { transform: scale(1.04); }

/* Titre en capitales, année en gris : deux graisses sur une même ligne */
.cat-name {
  display: block; margin: 1.1rem 0 0.5rem;
  font-size: 0.84rem; line-height: 1.45; letter-spacing: 0.05em;
}
.catalogue--sombre .cat-name b { font-weight: 700; text-transform: uppercase; color: #fff; }
.catalogue--sombre .cat-name i { font-style: normal; color: rgba(255, 255, 255, 0.55); }
.catalogue--clair .cat-name b { font-weight: 700; text-transform: uppercase; color: #111; }
.catalogue--clair .cat-name i { font-style: normal; color: #8a8a8a; }
.cat-more {
  display: inline-block;
  font-size: 0.9rem;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.catalogue--sombre .cat-more { color: rgba(255, 255, 255, 0.72); }
.catalogue--sombre .cat-item:hover .cat-more { color: #fff; border-bottom-color: #fff; }
.catalogue--clair .cat-more { color: #555; }
.catalogue--clair .cat-item:hover .cat-more { color: #111; border-bottom-color: #111; }

/* Les singles sont plus nombreux : quatre par rangée. Les pochettes sont
   donc plus petites, on relève le plafond de largeur en conséquence. */
.cat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cat-grid--4 .cat-item { max-width: 300px; }

@media (max-width: 1100px) { .cat-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .cat-grid, .cat-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .cat-grid, .cat-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Pages d'écoute (albums et singles) ----------
   Pochette à gauche, informations à droite, lecteur complet en dessous.
   Typographie des pages Concerts et Biographie, sur fond noir. */
/* Conteneur élargi : à 1200 px la colonne de droite était trop étroite
   pour aligner les plateformes sans les replier. */
body.smartlink-page .wrap { max-width: 1500px; }
.sl-head { padding: clamp(4.5rem, 10vh, 7rem) 0 clamp(2rem, 4vw, 3rem); }
.sl-grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.sl-infos { font-family: var(--font-bio); }

/* Même traitement que « Prochaines dates » sur l'accueil : graisse 700 et
   interlettrage large. Le corps est un peu réduit — à 3,6 rem, un interlettrage
   de 0,14em étalait le titre bien au-delà de sa colonne. */
.sl-titre {
  font-family: var(--font-bio); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.35;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; margin: 0 0 1.2rem;
}
.sl-desc {
  font-size: 1.02rem; line-height: 1.7;
  color: rgba(255, 255, 255, 0.72); margin: 0 0 2.2rem; max-width: 56ch;
}

/* Les trois colonnes d'informations, comme sur le modèle */
.sl-bloc {
  display: grid; grid-template-columns: auto auto 1fr;
  gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start;
}
.sl-meta p { margin: 0 0 0.6rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.68); }
.sl-meta b { color: #fff; font-weight: 700; }
.sl-dispo h2, .sl-partage h2 {
  font-family: var(--font-bio); font-weight: 800;
  font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; margin: 0 0 0.9rem;
}
/* Ligne qui annonce le lecteur : le visiteur doit comprendre pourquoi c'est
   un album qui s'affiche là où il attendait un titre seul. */
.sl-player-note {
  font-family: var(--font-bio); font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55); margin: 0 0 0.9rem;
}
.sl-player-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sl-player-note a:hover { color: rgba(255, 255, 255, 0.75); }
.sl-plats, .sl-shares { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.sl-share {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: rgba(255, 255, 255, 0.75); transition: color 0.2s ease, transform 0.2s ease;
}
.sl-share svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.sl-share:hover { color: #fff; transform: translateY(-1px); }
.sl-share.is-ok { color: var(--accent-2); }

.sl-player { padding-bottom: clamp(4rem, 9vw, 7rem); }
.sl-player iframe { display: block; border: 0; }

/* --- Reprises des anciennes règles de la page d'écoute --- */
/* La pochette occupait 215 px au centre d'une colonne étroite ; elle tient
   maintenant toute la largeur de sa colonne, comme sur le modèle. */
.sl-head .sl-cover-wrap {
  width: 100%; max-width: none; margin: 0;
  border-radius: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.sl-head .sl-cover-box { max-width: 520px; }
/* Les logos sont des marques de largeurs très inégales : on les cale sur une
   même hauteur ET un même encombrement, sinon la rangée part en désordre. */
/* Les logos sont les vraies marques, pictogramme et nom compris. Plusieurs
   sont sombres ou reposent sur une plaque colorée découpée : les forcer en
   blanc effaçait Amazon, Qobuz et TIDAL. On les pose donc sur une pastille
   claire, où chacun s'affiche dans ses couleurs d'origine. */
.sl-plats { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sl-plat {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 0.55rem;
  background: #fff; border-radius: 6px;
  opacity: 0.92; transition: opacity 0.2s ease, transform 0.2s ease;
}
.sl-plat:hover { opacity: 1; transform: translateY(-1px); }
.sl-plat img { height: 28px; width: auto; display: block; }

/* La colonne des plateformes prend la place restante, les deux autres se
   calent sur leur contenu. */
.sl-bloc { grid-template-columns: max-content minmax(0, 1fr) max-content; }

@media (max-width: 900px) {
  .sl-grid { grid-template-columns: 1fr; }
  .sl-cover-box { max-width: 420px; }
  .sl-bloc { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* Le lecteur Spotify remplace la liste des titres */
.sl-spotify { display: block; border: 0; border-radius: 12px; }

/* --- Albums : le disque sort de la pochette au survol ---
   Même effet que sur le HERO. Réservé aux albums : les singles n'ont pas de
   disque physique. */
.cat-item--album { position: relative; }
/* overflow visible, sinon la pochette rognerait le disque — elle masque
   normalement son propre zoom au survol.
   position: relative est indispensable : sans lui le disque se cale sur toute
   la carte, titre et lien compris, et dépasse sous la pochette au repos. */
.cat-item--album .cat-media { position: relative; overflow: visible; }
.cat-item--album .cat-media > img:not(.cat-cd) { position: relative; z-index: 2; }
.cat-cd {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: contain; display: block;
  transform: translateX(0) rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.3s ease;
  /* Aucune ombre au repos : le disque est caché derrière la pochette, mais son
     ombre débordait tout autour et dessinait un halo gris sur le fond clair. */
  filter: none;
}
/* Mêmes valeurs que sur le HERO : le disque sort par la droite.
   .cat-media est indispensable dans le sélecteur : sans lui la règle
   générale « .cat-item:hover .cat-media img » l'emporte — elle compte un
   sélecteur d'élément de plus — et le disque se contente de grossir. */
/* 32 % et non 50 comme sur le HERO : le disque sort de 134 px pour une
   gouttière de 144, il reste donc dans le vide sans mordre sur la
   pochette voisine. Sur le HERO il n'a aucun voisin, d'où la valeur plus
   généreuse là-bas. */
.cat-item--album:hover .cat-media .cat-cd,
.cat-item--album:focus-visible .cat-media .cat-cd {
  transform: translateX(32%) rotate(22deg);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35));
}
/* La carte survolée passe devant sa voisine, sinon le disque disparaît dessous */
.cat-item--album:hover,
.cat-item--album:focus-visible { z-index: 5; }
/* Le zoom de la pochette est neutralisé ici : avec le disque qui sort, les deux
   mouvements se gênaient. */
.cat-item--album:hover .cat-media img:not(.cat-cd) { transform: none; }

/* Le haut de la page Albums est passé au blanc : le menu, calibré pour un fond
   sombre, y devenait illisible. */
body.albums-page .social-icons a { color: #1a1a1a; }
body.albums-page .lang-switch a { color: rgba(26, 26, 26, 0.45); }
body.albums-page .lang-switch .is-active,
body.albums-page .lang-switch a:not(.is-active):hover { color: #1a1a1a; }
body.albums-page .burger { border-color: rgba(26, 26, 26, 0.3); }
body.albums-page .burger span { background: #1a1a1a; }
@media (min-width: 901px) {
  body.albums-page .nav-links li > a { color: #1a1a1a; }
}