@charset "UTF-8";
/* ============================================================
   PAUL MAILLOT — Site Vitrine
   Réalisateur & Producteur Audiovisuel
   ============================================================ */

/* ========== FONTS LOCALES ========== */
@font-face {
  font-family: 'Akira';
  src: url('../fonts/AkiraExpanded.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-XLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-XLightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-BookItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ========== VARIABLES ========== */
:root {
  --black:      #0a0a0a;
  --white:      #ffffff;
  --off-white:  #f7f6f2;
  --red:        #c41e1e;
  --gray-50:    #f8f8f8;
  --gray-100:   #ebebeb;
  --gray-400:   #999;
  --gray-600:   #555;
  --font-title: 'Akira', sans-serif;
  --font-body:  'Gotham', sans-serif;
  --nav-h:      104px;
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.56s var(--ease);
  --max-w:      min(1760px, 86vw);   /* référence partagée bio / blog / banners — ~80%+ de l'écran, plafonné sur très grands écrans (le plein-largeur "test" reste limité aux project-cards / carrousel réseaux sociaux, voir plus bas) */

  /* Fond noir sur tout le site — tokens de lisibilité pour ce qui était "sections claires" */
  --bg:           #000000;   /* fond de page global — noir pur */
  --surface:      #121212;   /* panneaux/cartes légèrement surélevés sur --bg */
  --surface-2:    #1a1a1a;   /* niveau au-dessus de --surface (hover, inputs) */
  --text:         #f5f5f5;   /* texte principal sur fond noir */
  --text-dim:     rgba(245,245,245,0.62);   /* texte secondaire, remplace gray-600 */
  --text-faint:   rgba(245,245,245,0.4);    /* texte tertiaire, remplace gray-400 sur fond noir */
  --border-soft:  rgba(245,245,245,0.14);   /* bordures discrètes, remplace gray-100 */
}

/* ========== RESET ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;   /* sur mobile (Safari iOS notamment), overflow-x:hidden sur body seul ne suffit pas toujours */
  max-width: 100%;
}
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ========== FLOU DE BORD — adoucit gauche/droite de l'écran, façon vignette floue plutôt que
   coupure nette. Sert surtout sur grand écran : les rangées plein-bord qui débordent volontai-
   rement du cadre (nuage de mots, carrousel réseaux sociaux) passent flou en s'approchant du bord
   au lieu d'être visibles nettes jusqu'au bout puis coupées sec. Non interactif, sous la nav —
   .slider-arrow passe volontairement au-dessus (z-index 950) pour ne jamais être flou lui-même. */
html::before, html::after {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  width: clamp(32px, 6vw, 100px);
  z-index: 900;
  pointer-events: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html::before {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, transparent 100%);
}
html::after {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, black 0%, transparent 100%);
  mask-image: linear-gradient(to left, black 0%, transparent 100%);
}
@media (max-width: 768px) {
  html::before, html::after { width: clamp(18px, 5vw, 56px); }
}

/* ========== NAVIGATION — fond transparent, devient opaque au scroll ========== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  height: var(--nav-h);
  transition: background 1.1s ease, box-shadow 1.1s ease, backdrop-filter 1.1s ease;
}

/* Dégradé sombre permanent pour lisibilité sur le slider */
.nav::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.64s ease;
}

.nav--scrolled {
  background: rgba(8,8,8,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 24px rgba(0,0,0,0.2);
  /* Dégradé du flou/fond lui-même (pas un calque par-dessus) : net en haut, qui s'estompe vers
     le bas — pour ne pas "marquer" la hauteur du header par une coupure nette. */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
}
.nav--scrolled::after { opacity: 0; }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 48px;
  gap: 12px;
}

/* Player — left */
.nav-player {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  min-width: 0;
}

.player-art {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-art svg { width: 14px; height: 14px; opacity: 0.4; }

.player-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.player-btn {
  color: var(--white);
  font-size: 9px;
  padding: 4px 3px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.32s;
  display: flex;
  align-items: center;
}
.player-btn:hover { opacity: 1; }

.player-sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}

.player-info {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
  text-transform: uppercase;
  min-width: 0;
}

/* Logo — aligné à gauche */
.nav-logo { text-align: left; flex-shrink: 0; }
.nav-logo a {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  transition: opacity 0.32s;
}
.nav-logo a:hover { opacity: 0.65; }
.nav-logo-img {
  height: 28px;
  width: auto;
  display: block;
  /* Le logo est blanc sur fond transparent */
}
/* Wordmark PAUL MAILLOT — Gotham Bold, très grand interlettrage, à côté du logo */
.nav-wordmark {
  display: block;
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.5em;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Fallback texte si image non trouvée */
.nav-logo-text {
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--white);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Links — right */
.nav-links-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;  /* laisse la colonne grid se réduire au lieu de forcer un débordement */
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 52px;
}
.nav-links a {
  font-family: 'Gotham', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  text-transform: uppercase;
  transition: var(--transition);
  padding-bottom: 9px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { border-bottom-color: rgba(255,255,255,0.6); }

/* Hamburger */
.nav-hamburger {
  display: none;
  color: var(--white);
  font-size: 20px;
  padding: 6px;
  line-height: 1;
}

/* Mobile overlay */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 1100;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.nav-overlay.open { display: flex; }
.nav-overlay a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.03em;
  color: var(--white);
  text-transform: uppercase;
  transition: color 0.32s;
}
.nav-overlay a:hover { color: var(--red); }
.nav-overlay-close {
  position: absolute;
  top: 18px;
  right: 20px;
  color: var(--white);
  font-size: 26px;
  padding: 6px;
  opacity: 0.7;
  transition: opacity 0.32s;
}
.nav-overlay-close:hover { opacity: 1; }

/* ========== SECTION CONNECTOR ========== */
.connector {
  display: block;
  width: 1px;
  height: 72px;
  background: #c8c8c8;
  margin: 0 auto;
}
.connector--dark { background: #333; }
.connector--white { background: rgba(255,255,255,0.4); }

/* ========== FILM ICON ========== */
.film-icon {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 12px;
}

/* ========== SECTION ICON (Font Awesome) — précède les section-label ========== */
.section-icon {
  display: block;
  text-align: center;
  font-size: 24px;
  color: currentColor;
  margin: 0 auto 12px;
}

/* ========== SECTION LABEL ========== */
.section-label {
  font-family: var(--font-body);
  font-weight: 900;
  text-align: center;
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: 0.01em;
  color: inherit;
  text-transform: uppercase;
}
.section-label strong { font-weight: 700; }

/* ========== ENTRÉE DE PAGE — fondu + léger slide vers le haut au chargement ========== */
main > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.96s var(--ease), transform 0.96s var(--ease);
}
body.is-loaded main > * { opacity: 1; transform: translateY(0); }
body.is-loaded main > *:nth-child(1) { transition-delay: 0s; }
body.is-loaded main > *:nth-child(2) { transition-delay: 0.12s; }
body.is-loaded main > *:nth-child(3) { transition-delay: 0.24s; }
body.is-loaded main > *:nth-child(4) { transition-delay: 0.36s; }
body.is-loaded main > *:nth-child(n+5) { transition-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  main > * { opacity: 1; transform: none; transition: none; }
}

/* ========== HERO — 75 dvh, fond transparent nav, texte centré ========== */
.hero {
  min-height: 75dvh;
  position: relative;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.44s ease;
  will-change: opacity;
}
.hero-slide.active { opacity: 1; }

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
}

/* Vidéo Vimeo en fond de hero — boucle, muette, "cover" via ratio 16/9 surdimensionné */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;      /* 100vw / 16 * 9 */
  min-height: 100%;
  min-width: 177.78vh;  /* 100vh * 16 / 9 */
  transform: translate(-50%, -50%);
  border: none;
}
@media (max-width: 768px) {
  /* Vidéo trop coûteuse/instable en fond sur mobile — on retombe sur une image fixe */
  .hero-video-wrap { display: none; }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.86) 0%,
    rgba(0,0,0,0.18) 50%,
    rgba(0,0,0,0.45) 100%
  );
}

/* Centrage du texte hero — horizontalement ET verticalement */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: calc(var(--nav-h) + 20px) 40px 40px;  /* offset nav en haut */
  color: var(--white);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-overline {
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3em;
  opacity: 0.8;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--font-title);  /* Akira */
  font-size: clamp(52px, 9vw, 108px);  /* réduit car Akira est plus large que Bebas Neue */
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--white);
  text-stroke: 2px var(--white);
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.hero-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 36px;
  align-items: center;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 0.32s, border-color 0.32s;
}
.hero-dot.active {
  background: var(--white);
  border-color: var(--white);
}

.hero-cta {
  display: inline-block;
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1.5px solid rgba(255,255,255,0.7);
  padding-bottom: 4px;
  transition: opacity 0.4s;
}
.hero-cta:hover { opacity: 0.6; }

/* Signature Slasheur — RÉALISATEUR / BEATMAKER / PRODUCTEUR / ARTISTE */
.hero-signature {
  font-family: 'Gotham', sans-serif;
  font-weight: 500;
  font-size: clamp(10px, 1.3vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 28px;
}
.hero .page-hero-stats { margin-top: 8px; margin-bottom: 8px; }

.hero-scroll-arrow {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.5);
  animation: arrowBounce 2.2s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(9px); }
}

/* ========== CONTENT CARD — fond blanc arrondi 1280px qui déborde sur le hero ========== */
.content-card {
  max-width: var(--max-w);
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  margin: -60px auto 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* ========== PAGE HERO (Bio, Projets, Artiste) ========== */
.page-hero {
  min-height: 58dvh;
  position: relative;
  background: var(--black);
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-h);
  overflow: hidden;
}

/* Hero réduit — pages sans stats (Blog, Boutique, Contact) */
.page-hero--compact { min-height: 36dvh; }
.page-hero--compact .page-hero-body { padding: 10px 64px 38px; }

.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 70%);
}

.page-hero-body {
  position: relative;
  z-index: 2;
  color: var(--white);
  padding: 40px 64px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* Page bio : le hero porte aussi les chiffres clés (.page-hero-stats-wrap) en plus du titre —
   remonter le titre pour ne pas le pousser trop bas au-dessus d'eux. */
/* Titre centré dans la zone haute du hero (entre le haut de la photo qui chevauche et les
   chiffres clés) plutôt que collé sous la nav : flex-end ancre naturellement le titre juste
   au-dessus de la ligne de stats, à n'importe quelle hauteur de hero/breakpoint. */
.page-hero:has(.page-hero-stats-wrap) .page-hero-body { justify-content: flex-start; padding-top: 120px; }

.page-hero-title {
  font-family: var(--font-title);  /* Akira */
  font-size: clamp(64px, 10vw, 120px);  /* réduit : Akira est plus large que Bebas Neue */
  line-height: 0.88;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  /* Contour seul, comme le "PAUL MAILLOT" du hero d'accueil */
  color: transparent;
  -webkit-text-stroke: 2px var(--white);
  text-stroke: 2px var(--white);
}

.page-hero-sub {
  font-family: 'Gotham', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.28em;
  opacity: 0.6;
  text-transform: uppercase;
  margin-top: 10px;
}

.page-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 0 64px;
}
.page-hero-stats--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* Page bio : les chiffres clés restent dans le hero, mais alignés sur la colonne de droite
   (même proportions que .bio-portrait-grid juste en dessous) pour ne pas chevaucher la photo,
   qui occupe la colonne de gauche. Largeur en width:calc() plutôt que padding sur cet élément
   même : .bio-portrait-grid tire son inset de 64px du padding de SON parent (.bio-portrait-
   section), pas du sien — mettre le padding ici aurait réduit la base de calcul des colonnes en
   % (42%/38%) par rapport à .bio-portrait-grid, désalignant les deux colonnes de droite. */
.page-hero-stats-wrap {
  width: calc(100% - 128px);
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  gap: 64px;
}
.page-hero-stats-wrap .page-hero-stats { grid-column: 2; max-width: none; width: auto; padding: 0; margin: 0; }
@media (max-width: 1024px) {
  .page-hero-stats-wrap { grid-template-columns: minmax(240px, 38%) 1fr; gap: 40px; }
}
@media (max-width: 860px) {
  /* La photo remonte de -70px sur cette largeur (voir .bio-portrait-photo) : sans cette marge,
     elle chevauche et masque entièrement les chiffres clés qui la précèdent dans le hero. */
  .page-hero-stats-wrap { width: auto; grid-template-columns: 1fr; padding: 0 20px; margin-bottom: 80px; }
  .page-hero-stats-wrap .page-hero-stats { grid-column: 1; }
}

.stat {
  text-align: center;
  padding: 22px 16px;
  color: var(--white);
}
.stat + .stat { border-left: 1px solid rgba(255,255,255,0.1); }
.stat-value {
  display: block;
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  letter-spacing: 0.02em;
}
.stat-label {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 5px;
}

/* ========== PORTRAIT (page Bio) — photo à cheval sur le bas du hero, chiffres clés + intro
   dans une colonne à droite pour équilibrer la composition. ========== */
.bio-portrait-section { background: var(--bg); padding: 0 64px 8px; position: relative; z-index: 3; }
.bio-portrait-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  gap: 64px;
  align-items: stretch;   /* la photo remplit la même hauteur que la colonne de texte, pas de vide */
}
.bio-portrait-photo {
  margin-top: -160px;   /* tire la photo vers le haut : le haut de l'image chevauche le bas du hero */
  min-height: 460px;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  z-index: 5;
  box-shadow: 0 32px 64px -20px rgba(0,0,0,0.65);
  background: var(--surface);
}
.bio-portrait-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-portrait-side { padding-top: 80px; display: flex; flex-direction: column; gap: 44px; }
.bio-portrait-side .bio-timeline-intro { text-align: left; max-width: none; margin: 0; }
@media (max-width: 1024px) {
  .bio-portrait-grid { grid-template-columns: minmax(240px, 38%) 1fr; gap: 40px; }
  .bio-portrait-photo { margin-top: -110px; }
}
@media (max-width: 860px) {
  .bio-portrait-section { padding: 0 20px 0; }
  .bio-portrait-grid { grid-template-columns: 1fr; gap: 32px; }
  .bio-portrait-photo { margin-top: -70px; min-height: 0; aspect-ratio: 3/4; max-width: 380px; margin-left: auto; margin-right: auto; }
  .bio-portrait-side { padding-top: 0; gap: 32px; }
}

/* ========== STREAMING ========== */
.streaming {
  background: var(--white);
  padding: 48px 64px;
  text-align: center;
}

.streaming-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 32px;
}

.streaming-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px 44px;
}

.streaming-logo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--black);
  opacity: 0.65;
  transition: opacity 0.4s;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.streaming-logo svg { width: 16px; height: 16px; flex-shrink: 0; }
.streaming-logo:hover { opacity: 1; }

/* ========== TRACKLIST — séparateurs 1px + vidéo au survol ========== */
.tracklist-wrap {
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}

.tracklist-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 64px;
}

/* Chaque row : position relative pour l'overlay vidéo — largeur pleine (video bg pleine largeur) */
.track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 64px;
  margin: 0 -64px;
  border-bottom: 1px solid #111;
  position: relative;
  overflow: hidden;
  transition: border-color 0.48s;
  background: var(--white);
}
.track:last-of-type { border-bottom: none; }

/* Fond vidéo/thumbnail qui apparaît au survol */
.track-video-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: brightness(0.4);
  transform: scale(1.04);
  transition: opacity 0.8s ease, transform 11.2s ease;
  pointer-events: none;
}

.track:hover .track-video-bg {
  opacity: 1;
  transform: scale(1.10);
}

/* Contenu au-dessus du bg vidéo */
.track-info,
.track-btns {
  position: relative;
  z-index: 1;
}

/* Adaptation des couleurs au survol (fond devient sombre) */
.track:hover .track-collab { color: rgba(255,255,255,0.45); transition: color 0.48s; }
.track:hover .track-name   { color: var(--white);           transition: color 0.48s; }
.track:hover .track-btn    { color: rgba(255,255,255,0.55); transition: color 0.48s; }
.track:hover .track-btn:hover { color: var(--white); }

/* track-name couleur par défaut sur fond blanc */
.track .track-name { color: var(--black); }

.track-info { display: flex; flex-direction: column; gap: 3px; }

.track-collab {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-400);
  transition: color 0.48s;
}

.track-name {
  font-family: var(--font-body); font-weight: 900;  /* Gotham Black */
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--black);
  text-transform: uppercase;
  transition: color 0.48s;
}

.track-btns {
  display: flex;
  gap: 10px;
  align-items: center;
}
.track-btn {
  color: #bbb;
  display: flex;
  align-items: center;
  transition: color 0.32s;
}
.track-btn svg { width: 16px; height: 16px; }
.track-btn:hover { color: var(--black); }

.tracklist-more {
  display: block;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  padding: 22px 0;
  transition: opacity 0.4s;
}
.tracklist-more:hover { opacity: 0.45; }
.tracklist-more::after { content: ' ›'; }

/* ========== BIO HOME (fond noir) ========== */
.bio-home {
  background: var(--bg);   /* même noir que le reste de la page (pas var(--black), légèrement différent) — pas de rupture derrière les project-cards qui débordent au-dessus */
  color: var(--white);
  /* Pas de séparation visible avec la rangée de project-cards juste au-dessus (pas de trait,
     pas de rupture de fond — tout est déjà noir) : la section remonte sous les cartes, qui
     débordent donc dedans, et le padding-top est augmenté d'autant pour que le texte garde de
     l'air et ne colle pas aux cartes. */
  margin-top: -90px;
  padding: 162px 64px 56px;
}

.bio-home-heading {
  text-align: center;
  margin-bottom: 48px;
}
.bio-home-heading svg { margin: 0 auto 12px; display: block; }

/* Grid : texte + carrousel */
.bio-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  max-width: var(--max-w);
  margin: 0 auto;
}

.bio-home-text h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 300;
  line-height: 1.45;
  margin-bottom: 28px;
}
.bio-home-text h2 strong { font-weight: 700; }

/* Lien texte générique */
.text-link {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: inherit;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.4s;
  display: inline-block;
}
.text-link:hover { opacity: 0.55; }
.text-link::after { content: ' ›'; }

/* Banner Les Sauces intégrée dans bio-home (fond noir, même largeur que grid) */
.bio-home-sauces {
  max-width: var(--max-w);
  margin: 44px auto 0;
}

/* ========== CARROUSEL — élévation + animation vidéo au survol ========== */
.carousel {
  position: relative;
  overflow-x: clip;   /* clip horizontal sans BFC, préserve l'overflow vertical pour l'élévation */
  overflow-y: visible;
}
/* Sur desktop, un peu de marge autour du carrousel pour que le halo des cartes
   de bord (première/dernière) ne soit pas coupé net par la limite de clip horizontale.
   Voir plus bas (.projects-strip-inner) pour la compensation de largeur associée. */
@media (min-width: 900px) {
  .carousel { padding: 0 60px; margin: 0 -60px; }
}

.carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.88s var(--ease);
  will-change: transform;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}
.carousel-track:active { cursor: grabbing; }

/* Card artiste — border-radius équilibré sur celui des project-cards (10px) + élévation hover */
.artist-thumb {
  flex: 0 0 calc(33.333% - 4px);
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  min-width: 0;
  border-radius: 10px;
  transition: transform 0.64s var(--ease), box-shadow 0.64s ease;
  will-change: transform;
}

.artist-thumb:hover {
  transform: translateY(-9px);
  box-shadow: 0 0 52px -4px rgba(0,0,0,0.55);
  z-index: 2;
}

.artist-thumb-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.96s var(--ease);
}

/* Léger zoom au survol — transform simple + transition (pas de @keyframes, sinon le zoom
   démarre par un saut brusque au lieu de s'animer depuis l'état de repos) */
.artist-thumb:hover .artist-thumb-bg {
  transform: scale(1.08);
}

.artist-thumb-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.05) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px;
}

.artist-thumb-name {
  font-family: var(--font-body); font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.1em;
  color: var(--white);
  text-transform: uppercase;
  text-align: center;
}

.artist-thumb-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.7);
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Dots carousel — façon Netflix : petits rectangles (segments) cliquables plutôt que des points ronds */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 14px;
}
.carousel-dot {
  width: 20px;
  height: 3.5px;
  border-radius: 2px;
  background: rgba(255,255,255,0.28);
  border: none;
  cursor: pointer;
  transition: background 0.32s, width 0.32s var(--ease);
}
.carousel-dot:hover { background: rgba(255,255,255,0.5); }
.carousel-dot.active { background: var(--white); width: 28px; }
.carousel-dot.dark-mode { background: rgba(0,0,0,0.22); }
.carousel-dot.dark-mode:hover { background: rgba(0,0,0,0.4); }
.carousel-dot.dark-mode.active { background: var(--black); }

/* Quand les dots sont placés dans l'en-tête d'un slider (à côté du label, ex. page Projets),
   pas de marge du haut : ils sont alignés sur la même ligne que le texte. */
.projects-slider-head .carousel-dots { margin-top: 0; }

/* ========== BANNER (Les Sauces, Director's League) ========== */
.banner {
  position: relative;
  height: 110px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 40px;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.48s var(--ease), box-shadow 0.48s var(--ease);
}
.banner:hover { transform: translateY(-6px); box-shadow: 0 0 46px -4px var(--accent, rgba(0,0,0,0.55)); }

.banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.3);
  transition: filter 0.64s;
  border-radius: 10px;
}
.banner:hover .banner-bg { filter: brightness(0.44); }

.banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent, var(--red));
  opacity: 0;
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity 0.64s var(--ease);
  z-index: 1;
  border-radius: 10px;
}
.banner:hover::after { opacity: 0.7; }

.banner-body {
  position: relative;
  z-index: 2;
  color: var(--white);
}
.banner-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 5px;
}
.banner-title {
  font-family: var(--font-body); font-weight: 900;  /* Gotham Black */
  font-size: 22px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ========== CHALLENGE (fond noir) ========== */
.challenge {
  background: var(--black);
  color: var(--white);
  padding: 88px 64px;
  text-align: center;
}
.challenge p {
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 300;
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto 32px;
}
.challenge p strong { font-weight: 700; }

/* ========== BLOG — même max-width que bio ========== */
.blog {
  background: var(--bg);
  padding: 80px 64px;
}

.blog-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  text-align: center;
}

/* Wrapper qui aligne le contenu blog sur la même largeur que bio-home-grid */
.blog-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.blog-grid-a {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 340px;  /* hauteur fixe identique pour les deux colonnes */
  gap: 32px;
  margin-bottom: 32px;
}
.blog-grid-b {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* Cards blog — border-radius plus prononcé que le reste du site (demande explicite) */
.blog-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
  border-radius: 14px;
  transition: transform 0.48s var(--ease), box-shadow 0.48s var(--ease);
}
.blog-card:hover { transform: translateY(-8px); }
.blog-card--a { /* height définie par grid-template-rows */ }
.blog-card--b { height: 100%; }  /* s'étire à la hauteur de la grille */
.blog-card--c { aspect-ratio: 16/9; }

.blog-card-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.5);
  transition: transform 0.88s var(--ease), filter 0.56s;
  border-radius: 14px;
}
.blog-card:hover .blog-card-bg {
  transform: scale(1.04);
  filter: brightness(0.65);
}

/* Halo coloré au survol — teinte calculée depuis la dominante de l'image (js/main.js) */
.blog-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent, var(--red));
  opacity: 0;
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity 0.64s var(--ease);
  z-index: 1;
}
.blog-card:hover::after { opacity: 0.82; }
.blog-card:hover { box-shadow: 0 0 46px -6px var(--accent, var(--red)); }
.blog-card-body { position: relative; z-index: 2; }

.blog-card-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  color: var(--white);
}
.blog-tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 8px;
}
.blog-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}
.blog-meta {
  display: flex;
  gap: 12px;
  font-size: 10px;
  opacity: 0.6;
  align-items: center;
}
.blog-meta-icon { display: flex; align-items: center; gap: 4px; }
.blog-meta-icon svg { width: 9px; height: 9px; }

.blog-more {
  display: block;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  padding: 56px 0 64px;
  transition: opacity 0.4s;
}
.blog-more:hover { opacity: 0.45; }
.blog-more::after { content: ' ›'; }

/* Director's League — dans blog-inner, pas de wrapper supplémentaire */
.directors-banner-wrap {
  padding-top: 4px;
  padding-bottom: 24px;
}

/* ========== FOOTER — fond noir ========== */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
}

.footer-streaming {
  padding: 48px 64px;
  text-align: center;
}
.footer-streaming-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  color: var(--text);
  margin-bottom: 28px;
}
.footer-streaming-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 36px;
}
.footer-logo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--text);
  opacity: 0.55;
  transition: opacity 0.4s;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.footer-logo svg { width: 14px; height: 14px; }
.footer-logo:hover { opacity: 1; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 0;
  border-top: 1px solid var(--border-soft);
}

/* Deux groupes (réseaux/site puis liens légaux) mis bout à bout — sur une seule ligne partout
   sauf mobile, où chaque groupe garde sa cohésion et passe à la ligne en bloc (voir media query
   plus bas) plutôt que de se répartir au hasard selon la largeur disponible. */
.footer-social { display: flex; gap: 20px; align-items: center; }
.footer-social-row { display: flex; gap: 20px; align-items: center; }
.footer-social a {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.55;
  transition: opacity 0.4s;
}
.footer-social a:hover { opacity: 1; }

/* Groupe droite : copyright + logo, alignés à droite */
.footer-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-copy {
  font-size: 8.5px;
  color: var(--text);
  opacity: 0.4;
  letter-spacing: 0.04em;
  text-align: right;
}
/* Les deux phrases restent sur une seule ligne (séparées par un point médian) partout sauf
   mobile, où elles passent en 2 lignes distinctes (voir media query plus bas). */
.footer-copy-line + .footer-copy-line::before { content: ' \00b7 '; }

/* Logo dans le footer */
.footer-logo-img {
  height: 24px;
  width: auto;
  display: block;
  opacity: 1;
  transition: opacity 0.4s;
  flex-shrink: 0;
}
.footer-logo-img:hover { opacity: 0.7; }

/* ========== BIO PAGE — TEXT ========== */
.bio-text { background: var(--bg); padding: 80px 64px; }

.bio-intro { text-align: center; margin-bottom: 80px; }
.bio-intro-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 28px;
  color: var(--text-faint);
}
.bio-intro-p {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-dim);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}
.bio-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 880px;
  margin: 0 auto;
}
.bio-col p { font-size: 12.5px; line-height: 1.85; color: var(--text-dim); margin-bottom: 14px; }
.bio-col p:last-child { margin-bottom: 0; }
.bio-col strong { font-weight: 700; }

/* Bio image blocks */
.bio-image-block {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background: #111;
}
.bio-image-block-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.6;
}
.bio-image-block-text {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 64px;
  color: var(--white);
}
.bio-image-block-text p { font-size: 14px; font-weight: 300; line-height: 1.8; max-width: 500px; margin-bottom: 20px; }
.bio-image-block-text p:last-of-type { margin-bottom: 0; }
.bio-image-block-text strong { font-weight: 700; }

/* ========== FRISE CHRONOLOGIQUE — colonne vertébrale de la page bio, alternée gauche/droite
   autour d'un axe central, pour optimiser la largeur disponible ========== */
.bio-timeline { padding: 48px 64px 88px; }   /* pas de fond propre : couleur du site (body), padding du haut réduit */
.bio-timeline-inner { max-width: 85vw; margin: 0 auto; }
.bio-timeline-intro {
  font-size: 17px; font-weight: 300; line-height: 1.9; color: var(--white);
  text-align: center; max-width: 760px; margin: 0 auto 72px;
}
.bio-timeline-intro p { margin-bottom: 22px; }
.bio-timeline-intro p:last-child { margin-bottom: 0; }
.bio-timeline-intro p:first-child {
  font-size: 30px;
  font-weight: 300;
  color: var(--white);
  line-height: 1.4;
}
.bio-timeline-intro strong { font-weight: 700; color: var(--white); }

.timeline { list-style: none; position: relative; margin: 0; padding: 0; }
.timeline::before {
  content: '';
  position: absolute;
  left: 50%; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--border-soft);
  transform: translateX(-50%);
}
.timeline-item {
  position: relative;
  width: 50%;
  display: flex;
  gap: 24px;
  align-items: center;
  padding-bottom: 72px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:nth-child(odd)  { left: 0; padding-right: 20px; }
.timeline-item:nth-child(even) { left: 50%; padding-left: 20px; flex-direction: row-reverse; }
.timeline-item:nth-child(odd)  .timeline-content { text-align: right; }
.timeline-marker {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent, var(--red));
  z-index: 2;
}
.timeline-item:nth-child(odd)  .timeline-marker { right: -7px; }
.timeline-item:nth-child(even) .timeline-marker { left: -7px; }

/* Visuels et textes agrandis : on doit pouvoir lire la fiche ET reconnaître la référence
   visuelle en même temps, sans que l'une écrase l'autre. Certaines étapes comptent plus que
   d'autres dans le parcours (--featured/--hero) : leur visuel prend nettement plus de place. */
.timeline-thumb {
  position: relative;
  flex: 0 0 240px;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.timeline-thumb--featured { flex-basis: 320px; }
.timeline-thumb--hero { flex-basis: 420px; }
.timeline-thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); }
.timeline-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* Lecture au clic (Dimanche Soir, Arbre de Vie, Strict Minimum — voir script en bas de page) :
   image statique par défaut, bouton play toujours visible pour signaler que c'est cliquable. */
.timeline-thumb-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  background: rgba(10,10,10,0.6);
  border: 2px solid rgba(255,255,255,0.75);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  transition: transform 0.32s var(--ease), background 0.32s, border-color 0.32s;
  z-index: 2;
}
.timeline-thumb-play:hover {
  background: var(--accent, var(--red));
  border-color: var(--accent, var(--red));
  transform: scale(1.1);
}
.timeline-thumb--playing .timeline-thumb-play { display: none; }
.timeline-content { min-width: 0; }
.timeline-year {
  display: block;
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(28px, 3.4vw, 36px);
  letter-spacing: 0.02em;
  color: var(--white);
  opacity: 0.6;
  line-height: 1;
  margin-bottom: 10px;
}
.timeline-title {
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(21px, 2.3vw, 27px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 6px;
}
.timeline-artist {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white); opacity: 0.65; margin-bottom: 10px;
}
.timeline-desc { font-family: var(--font-body); font-size: 18px; line-height: 1.75; color: var(--white); opacity: 0.85; }

/* Les vignettes rétrécissent en continu (clamp) plutôt que par paliers fixes : passé un
   certain point, un flex-basis figé (240/320/420px) ne laisse plus de place au texte dans une
   colonne à 50% de la largeur — clamp garde toujours un compromis lisible. */
.timeline-thumb { flex-basis: clamp(110px, 15vw, 240px); }
.timeline-thumb--featured { flex-basis: clamp(135px, 19vw, 320px); }
.timeline-thumb--hero { flex-basis: clamp(150px, 23vw, 420px); }

@media (max-width: 620px) {
  .timeline::before { left: 6px; transform: none; }
  .timeline-item,
  .timeline-item:nth-child(even) {
    width: 100%;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-left: 32px;
    padding-right: 0;
  }
  .timeline-item:nth-child(odd)  .timeline-marker,
  .timeline-item:nth-child(even) .timeline-marker { left: -27px; right: auto; top: 6px; transform: none; }
  .timeline-item:nth-child(odd) .timeline-content { text-align: left; }
  .timeline-thumb,
  .timeline-thumb--featured,
  .timeline-thumb--hero { flex-basis: auto; width: 100%; }
}
@media (max-width: 768px) {
  .bio-timeline { padding: 40px 20px 64px; }
  .bio-timeline-intro { margin-bottom: 48px; }
}

/* ========== NUAGE D'ARTISTES — pleine largeur (100vw, hors du container), avant la frise.
   Chaque ligne est un track défilant en continu façon "marquee" (voir main.js), sens alterné
   d'une ligne à l'autre — construit et randomisé en JS (voir script en bas de bio.html) : les
   mots débordent volontairement du cadre visuel, ils ne sont pas centrés/contenus. */
.artist-cloud {
  width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - 50vw + (var(--sbw, 0px) / 2));
  margin-right: calc(50% - 50vw + (var(--sbw, 0px) / 2));
  max-width: none;
  background: var(--bg);
  padding: 48px 0 60px;
  overflow: hidden;
}
.artist-cloud-rows { display: flex; flex-direction: column; gap: 10px; width: 100%; opacity: 0.8; }
.artist-cloud-track {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 5vw;
  cursor: default;
}
.artist-cloud-track::-webkit-scrollbar { display: none; }
.artist-cloud-word {
  font-family: var(--font-body); font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--white);
  opacity: 0.85;
  transition: opacity 0.32s;
}
.artist-cloud-word:hover { opacity: 1; }
.artist-cloud-word--xl {
  font-size: clamp(26px, 3.6vw, 52px);
  opacity: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white);
  text-stroke: 1.5px var(--white);
}
.artist-cloud-word--lg { font-size: clamp(19px, 2.5vw, 34px); opacity: 0.96; }
.artist-cloud-word--md { font-size: clamp(15px, 1.8vw, 24px); opacity: 0.9; }
.artist-cloud-word--sm { font-size: clamp(11px, 1.2vw, 16px); opacity: 0.75; }
.artist-cloud-word--xs { font-size: clamp(9px, 0.9vw, 13px); opacity: 0.55; }
@media (max-width: 768px) {
  .artist-cloud { padding: 36px 0 44px; }
  .artist-cloud-rows { gap: 7px; }
  .artist-cloud-track { gap: 0.6em; padding: 0 20px; }
}

/* ========== RÉCOMPENSES ========== */
.awards-section { background: var(--bg); padding: 72px 64px; }
.awards-inner { max-width: 780px; margin: 0 auto; }
.awards-list { display: flex; flex-direction: column; }
.award-item {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 20px 0; border-bottom: 1px solid var(--border-soft);
}
.award-item:first-child { padding-top: 0; }
.award-item:last-child { border-bottom: none; padding-bottom: 0; }
.award-main { min-width: 0; }
.award-title { font-family: var(--font-body); font-weight: 900; font-size: 18px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--white); }
.award-title span { color: var(--white); opacity: 0.6; font-weight: 400; text-transform: none; font-family: var(--font-body); }
.award-role { font-size: 12px; color: var(--white); opacity: 0.55; letter-spacing: 0.06em; margin-top: 4px; }
.award-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 20px; white-space: nowrap;
}
.award-badge--or       { background: rgba(212,175,55,0.14);  color: #d4af37; border: 1px solid rgba(212,175,55,0.4); }
.award-badge--platine  { background: rgba(203,206,214,0.12); color: #cbced6; border: 1px solid rgba(203,206,214,0.35); }
.award-badge--diamant  { background: rgba(148,219,255,0.12); color: #94dbff; border: 1px solid rgba(148,219,255,0.4); }
@media (max-width: 640px) {
  .awards-section { padding: 56px 20px; }
  .award-item { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Sound wave */
.sound-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 80px;
  padding: 16px 64px;
  background: var(--black);
  overflow: hidden;
}
.wave-bar {
  width: 3px;
  background: #00e5b0;
  border-radius: 2px;
  animation: waveAnim 1.4s ease-in-out infinite alternate;
}
@keyframes waveAnim {
  from { height: 4px; }
  to   { height: 100%; }
}

/* ========== PROJECTS PAGE — cartes 16/9, une seule ligne, slider horizontal (façon Netflix) ========== */
.projects-wrap { background: var(--bg); padding: 60px 64px; }

/* Test : le slider de project-cards est volontairement plein écran, il ignore le padding de
   .projects-wrap qui l'entoure — la "gouttière" vient uniquement du padding interne de
   .projects-grid ci-dessous, pas d'une limite de largeur du container. Reste local à cette
   rangée : le header (.projects-slider-head) au-dessus garde lui la largeur standard --max-w.
   --sbw (posée en JS) compense la largeur de la scrollbar que 100vw inclut sur la plupart des
   navigateurs desktop : sans ça le bord gauche part hors-champ et le bouton droit est invisible. */
.projects-slider {
  position: relative;
  width: calc(100vw - var(--sbw, 0px));
  max-width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - 50vw + (var(--sbw, 0px) / 2));
  margin-right: calc(50% - 50vw + (var(--sbw, 0px) / 2));
}
.projects-grid {
  display: flex;
  align-items: flex-start;  /* chaque carte garde son propre ratio 16/9, ne s'étire pas sur la plus haute */
  gap: 28px;
  overflow-x: auto;
  overflow-anchor: none;   /* évite que l'ancrage de scroll du navigateur ne dérive scrollLeft
                               pendant le mélange aléatoire des cartes au chargement */
  scroll-snap-type: x proximity;
  scroll-padding-left: 64px;   /* sans ça, le snap "start" de la 1ère carte ignore le padding et
                                   colle la carte au bord dès le chargement (bug confirmé) */
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding: 56px 64px;
  margin: -56px 0;  /* garde le débordement vertical du halo (overflow-x:auto ne le coupe que sur les côtés) */
}
.projects-grid::-webkit-scrollbar { display: none; }
@media (max-width: 1024px) { .projects-grid { padding: 56px 40px; scroll-padding-left: 40px; } }
@media (max-width: 768px)  { .projects-grid { padding: 40px 16px; scroll-padding-left: 16px; } }

.slider-arrow--prev { left: 28px; }
.slider-arrow--next { right: 28px; }

/* En-tête d'un slider projets — label à gauche, indicateur de position (dots) à droite,
   sur la même ligne (ex. "Clip" / "Marque" sur la page Projets). Même boîte plein-bord que
   .projects-grid juste en dessous (largeur 100vw + padding, pas max-w centré) pour que le label
   s'aligne exactement sur le bord de la première carte plutôt que sur la colonne --max-w. */
.projects-slider-head {
  position: relative;
  z-index: 2;   /* au-dessus de .projects-grid, qui déborde vers le haut via sa marge négative (halo) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - 50vw + (var(--sbw, 0px) / 2));
  margin-right: calc(50% - 50vw + (var(--sbw, 0px) / 2));
  margin-bottom: 20px;
  padding: 0 64px;
}
.projects-slider-head .section-label { margin: 0; }
@media (max-width: 1024px) { .projects-slider-head { padding: 0 40px; } }
@media (max-width: 768px)  { .projects-slider-head { padding: 0 16px; margin-top: 24px; margin-bottom: 32px; } }

/* Variante page d'accueil : "Tous les travaux" flotte par-dessus la limite hero/grille sur
   desktop (chevauchement volontaire) — sur mobile ce chevauchement écrase le lien contre les
   cartes juste en dessous, donc on repasse en espacement normal à cette largeur. */
.projects-slider-head--overlap { max-width: var(--max-w); margin: -122px auto 0; position: relative; z-index: 4; }
@media (max-width: 768px) {
  .projects-slider-head--overlap { margin: 24px auto 32px; }
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 950;   /* au-dessus du flou de bord (html::before/after, z-index 900) : ces boutons
                     sont volontairement proches du bord et ne doivent pas être flous eux-mêmes */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(10,10,10,0.7);
  border: 1px solid var(--border-soft);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s, background 0.32s;
  backdrop-filter: blur(6px);
}
.projects-slider:hover .slider-arrow,
.carousel:hover .slider-arrow { opacity: 1; }
.slider-arrow:hover { background: rgba(10,10,10,0.92); }
.slider-arrow svg { width: 16px; height: 16px; }
.slider-arrow[disabled] { opacity: 0 !important; pointer-events: none; }
@media (max-width: 768px) { .slider-arrow { display: none; } }

.project-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
  border-radius: 10px;
  flex: 0 0 clamp(260px, 24vw, 400px);
  aspect-ratio: 16/9;
  scroll-snap-align: start;
  transition: transform 0.48s var(--ease), box-shadow 0.48s var(--ease);
  /* Le nom/titre est dimensionné en unités cqw (ci-dessous) : la taille de police suit
     directement la largeur réelle de LA carte, quel que soit son format (grille desktop,
     slider mobile 9/16, --wide…) — un titre long se réduit tout seul plutôt que déborder. */
  container-type: inline-size;
}
.project-card:hover { transform: translateY(-8px); }
.project-card--wide { flex-basis: clamp(400px, 38vw, 580px); }
.project-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55);
  transform: scale(1.15);
  transition: transform 0.88s var(--ease), filter 0.56s;
}
.project-card:hover .project-card-bg { transform: scale(1.22); filter: brightness(0.72); }

/* Aperçu vidéo au survol (data-preview-vimeo) — par-dessus l'image statique */
.project-card-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.56s var(--ease);
}
.project-card-preview.active { opacity: 1; }
/* --video-zoom est posé en JS (voir computeVideoZoom) : zoom précis façon object-fit:cover
   quand data-video-ratio est connu, sinon marge par défaut — pour que la vidéo remplisse tout
   le cadre même quand sa source n'est pas au ratio de la carte (au lieu de laisser des bandes
   dans son format d'origine), et pour rogner le bandeau titre/branding de YouTube au passage. */
.project-card-preview iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: none;
  transform: translate(-50%, -50%) scale(var(--video-zoom, 1));
  transform-origin: center;
}

.project-card:hover { box-shadow: 0 0 50px -4px rgba(0,0,0,0.6); }

.project-card-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.project-card-name {
  display: block;
  font-family: var(--font-body); font-weight: 900;
  /* cqw = % de la largeur de LA carte (container-type sur .project-card) : suit la taille
     réelle de la carte plutôt que celle de l'écran, donc reste cohérent grille desktop /
     slider mobile 9/16 / carte --wide, et un titre trop long réduit sa police au lieu de
     déborder. */
  font-size: clamp(12px, 6.4cqw, 26px);
  letter-spacing: 0.1em;
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.project-card-title {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(8px, 3.1cqw, 12.5px);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(255,255,255,0.7);
  margin-top: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.project-card--outlined { border: 2px solid rgba(255,255,255,0.45); }

/* Étiquette de format (Clip / Pub / Réseaux / Docu) — posée en JS depuis data-kicker/data-format,
   voir main.js */
.project-card-format {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 5px 10px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
@media (max-width: 768px) {
  .project-card-format { top: 10px; left: 10px; font-size: 8px; padding: 4px 8px; }
}

.projects-bio { background: var(--bg); padding: 64px; text-align: center; border-top: 1px solid var(--border-soft); }
.projects-bio p { font-size: 14px; font-weight: 300; color: var(--text-dim); max-width: 440px; margin: 0 auto 24px; line-height: 1.7; }
.projects-strip { background: var(--bg); padding: 24px 64px 56px; }

/* ========== ARTIST PROJECT PAGE ========== */
.clip-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
  background: var(--black);
}
.clip-visual { position: relative; overflow: hidden; min-height: 320px; }
.clip-visual-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.5);
  transition: filter 0.64s;
}
.clip-visual:hover .clip-visual-bg { filter: brightness(0.65); }
.clip-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: var(--transition);
}
.play-ring svg { width: 20px; height: 20px; margin-left: 3px; }
.clip-play-btn:hover .play-ring { border-color: var(--white); background: rgba(255,255,255,0.08); }

.clip-info { padding: 52px 48px; color: var(--white); display: flex; flex-direction: column; justify-content: center; }
.clip-artist-label { font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.5; margin-bottom: 5px; }
.clip-title { font-family: var(--font-body); font-weight: 900; font-size: clamp(36px, 5vw, 52px); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 28px; overflow-wrap: break-word; word-break: break-word; }
.clip-divider { width: 32px; height: 2px; background: rgba(255,255,255,0.3); margin-bottom: 28px; }
.clip-crew { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin-bottom: 36px; }
.crew-role { font-size: 7.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.4; margin-bottom: 3px; }
.crew-name { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }

.related-strip { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: var(--black); padding: 0 64px; }
.related-strip::-webkit-scrollbar { display: none; }
.related-thumb { flex: 0 0 116px; height: 80px; position: relative; overflow: hidden; cursor: pointer; }
.related-thumb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.42); transition: filter 0.48s; }
.related-thumb:hover .related-thumb-bg { filter: brightness(0.65); }
.related-thumb-name { position: absolute; bottom: 7px; left: 8px; font-family: var(--font-body); font-weight: 900; font-size: 9.5px; letter-spacing: 0.1em; color: var(--white); text-transform: uppercase; }

.related-more-bar { background: var(--black); padding: 28px 64px; text-align: center; border-top: 1px solid #181818; }
.related-more-link { font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); opacity: 0.55; transition: opacity 0.4s; }
.related-more-link:hover { opacity: 1; }
.related-more-link::after { content: ' +'; }

.artist-bio { background: var(--bg); padding: 72px 64px; }
.artist-bio-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.artist-bio-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 18px; }
.artist-bio-sub { font-size: 13px; font-weight: 300; color: var(--text-dim); line-height: 1.7; margin-bottom: 28px; }

/* ========== UTILS ========== */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ========== RESPONSIVE ========== */
@media (max-width: 1300px) {
  .nav-links { gap: 32px; }
}

@media (max-width: 1100px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 9px; }
}

@media (max-width: 1024px) {
  .hero-content, .page-hero-body,
  .bio-home, .challenge,
  .streaming, .blog,
  .footer-streaming, .footer-bottom,
  .projects-wrap, .projects-bio, .projects-strip,
  .bio-text, .bio-timeline, .bio-image-block-text,
  .related-strip, .related-more-bar, .artist-bio { padding-left: 40px; padding-right: 40px; }
  .tracklist-inner { padding: 0 40px; }
  .track { margin-left: -40px; margin-right: -40px; padding-left: 40px; padding-right: 40px; }
  .clip-info { padding: 40px 36px; }
  .bio-home-sauces { padding: 0 40px; }
}

@media (max-width: 768px) {
  :root { --nav-h: 76px; }

  /* Nav */
  .nav-inner { padding: 0 14px; gap: 8px; }
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
  .player-info { display: none; }

  /* Hero */
  .hero-content { padding: calc(var(--nav-h) + 20px) 20px 56px; }
  .hero-title { font-size: clamp(50px, 13vw, 82px); }
  .page-hero-body { padding: 0 20px; }
  .page-hero-title { font-size: clamp(38px, 12vw, 100px); }
  .stat { padding: 16px 10px; }
  .stat-value { font-size: 28px; }
  .stat-label { font-size: 7px; }

  /* Sections */
  .streaming { padding: 36px 20px; }
  .tracklist-inner { padding: 0 20px; }
  .track { margin: 0 -20px; padding: 16px 20px; }
  .bio-home { margin-top: -40px; padding: 96px 20px 40px; }
  .bio-home-grid { grid-template-columns: 1fr; gap: 40px; }
  .bio-home-sauces { padding: 0; margin-top: 32px; }
  .challenge { padding: 64px 20px; }
  .blog { padding: 60px 20px; }
  .footer-streaming { padding: 36px 20px; }
  .footer-bottom { flex-direction: column; gap: 16px; padding: 36px 20px; max-width: none; }
  /* Groupe réseaux/site puis groupe légal, chacun sur sa propre ligne (au lieu de se répartir
     selon la largeur disponible) — même principe pour les deux phrases du copyright. */
  .footer-social { flex-direction: column; gap: 10px; }
  .footer-social-row { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .footer-right { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .footer-copy { display: flex; flex-direction: column; gap: 4px; }
  .footer-copy-line + .footer-copy-line::before { content: ''; }

  /* Blog grid — grille à 2 colonnes de cartes plus petites (comme le desktop en réduit), plutôt
     qu'une pile de grandes cartes plein écran. */
  .blog-grid-a { grid-template-columns: 1fr 1fr; grid-template-rows: 180px; gap: 12px; margin-bottom: 12px; }
  .blog-grid-b { grid-template-columns: 1fr 1fr; gap: 12px; }
  .blog-grid-a .blog-card-body, .blog-grid-b .blog-card-body { padding: 14px; }
  .blog-grid-a .blog-title, .blog-grid-b .blog-title { font-size: 13px; margin-bottom: 6px; }
  .blog-grid-a .blog-tag, .blog-grid-b .blog-tag { font-size: 7px; margin-bottom: 5px; }
  .blog-grid-a .blog-meta, .blog-grid-b .blog-meta { font-size: 9px; gap: 8px; }

  /* Projects — cartes 9/16 en mode "peek" : entre 2,5 et 3,5 cartes visibles sur la largeur
     d'un téléphone, pour signaler qu'on peut faire défiler horizontalement */
  .projects-wrap { padding: 40px 16px; }
  .projects-grid { gap: 10px; }
  .project-card, .project-card--wide { flex-basis: clamp(100px, 30vw, 135px); aspect-ratio: 4/5; }
  .projects-bio, .projects-strip { padding: 40px 20px; }

  /* Bio text */
  .bio-text { padding: 56px 20px; }
  .bio-cols { grid-template-columns: 1fr; gap: 24px; }
  .bio-image-block-text { padding: 48px 20px; }

  /* Clip */
  .clip-section { grid-template-columns: 1fr; }
  .clip-visual { min-height: 240px; }
  .clip-info { padding: 36px 20px; }
  .clip-crew { grid-template-columns: 1fr; gap: 12px; }
  .clip-title { font-size: 34px; }

  /* Related */
  .related-strip { padding: 0 16px; }
  .related-more-bar { padding: 22px 20px; }
  .artist-bio { padding: 56px 20px; }

  /* Carousel */
  .artist-thumb { flex: 0 0 calc(50% - 3px); }
  .sound-wave { padding: 16px 20px; }
}

@media (max-width: 480px) {
  .streaming-logos { gap: 18px 24px; }
  .page-hero-title { font-size: clamp(30px, 13vw, 86px); }
}

/* ========== BLOG PAGE ========== */
.blog-page {
  background: var(--bg);
  padding: 64px;
}
.blog-page-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Filtre catégories */
.blog-filter {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 52px;
  border-bottom: 1px solid var(--border-soft);
}
.filter-btn {
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  cursor: pointer;
  color: var(--text-faint);
  transition: color 0.32s, border-color 0.32s;
}
.filter-btn:hover { color: var(--text); }
.filter-btn.active { color: var(--text); border-bottom-color: var(--text); }

/* Grille complète — le premier article (vedette) est un item de la grille comme les autres,
   pas de traitement agrandi : voir blog.html, il est désormais dans #blog-grid. */
.blog-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.blog-full-grid .blog-card {
  aspect-ratio: 4/3;
}
.blog-full-grid .blog-card.hidden { display: none; }

/* Pagination */
.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 56px 0 32px;
}
.page-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.32s;
  background: transparent;
}
.page-btn:hover { border-color: var(--text); }
.page-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.page-btn--dots { border: none; color: var(--text-faint); cursor: default; }

/* ========== CONTACT PAGE ========== */
.contact-section {
  background: var(--bg);
  padding: 80px 64px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  max-width: var(--max-w);
  margin: 0 auto;
  align-items: start;
}

.contact-heading { margin-bottom: 44px; }
.contact-heading-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 16px;
}
.contact-heading-title {
  font-family: 'Gotham', sans-serif;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.4;
}
.contact-heading-title strong { font-weight: 700; }

/* Formulaire */
.contact-form { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.form-input,
.form-select,
.form-textarea {
  font-family: 'Gotham', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 0;
  outline: none;
  transition: border-color 0.4s;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-bottom-color: var(--text); }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-faint); font-size: 12px; }
.form-select option { background: var(--bg); color: var(--text); }
.form-textarea { resize: none; height: 130px; line-height: 1.7; }
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text);
  border: none;
  padding: 18px 40px;
  cursor: pointer;
  transition: opacity 0.4s;
  align-self: flex-start;
  margin-top: 8px;
}
.form-submit:hover { opacity: 0.72; }
.form-submit svg { width: 12px; height: 12px; }

/* Panneau infos */
.contact-info {
  padding-left: 48px;
  border-left: 1px solid var(--border-soft);
}
.contact-info-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 36px;
}
.contact-info-items { display: flex; flex-direction: column; gap: 28px; margin-bottom: 48px; }
.contact-info-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.contact-info-value {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.6;
}
.contact-info-value a { color: inherit; transition: opacity 0.32s; }
.contact-info-value a:hover { opacity: 0.5; }

.contact-social-list { display: flex; flex-direction: column; }
.contact-social-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.55;
  transition: opacity 0.4s;
}
.contact-social-link:first-child { border-top: 1px solid var(--border-soft); }
.contact-social-link:hover { opacity: 1; }
.contact-social-link svg { width: 13px; height: 13px; opacity: 0.4; }

/* Responsive blog & contact */
@media (max-width: 1024px) {
  .blog-page { padding: 48px 40px; }
  .contact-section { padding: 64px 40px; }
  .contact-grid { gap: 48px; }
  .contact-info { padding-left: 36px; }
}
@media (max-width: 768px) {
  .blog-page { padding: 40px 20px; }
  /* Grille à 2 colonnes de cartes plus petites, dans le même esprit que le desktop (3 colonnes,
     cartes uniformes) plutôt qu'une pile de grandes cartes plein écran ou une carte "à la une". */
  .blog-full-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .blog-full-grid .blog-card-body { padding: 14px; }
  .blog-full-grid .blog-title { font-size: 13px; margin-bottom: 6px; }
  .blog-full-grid .blog-tag { font-size: 7px; margin-bottom: 5px; }
  .blog-full-grid .blog-meta { font-size: 9px; gap: 8px; }
  .contact-section { padding: 56px 20px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-info { padding-left: 0; border-left: none; border-top: 1px solid var(--border-soft); padding-top: 48px; }
  .contact-info-social { display: none; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
  .blog-filter { overflow-x: auto; scrollbar-width: none; gap: 0; }
  .blog-filter::-webkit-scrollbar { display: none; }
}
/* ========== PAGE HERO — responsive body centering ========== */
@media (max-width: 768px) {
  .page-hero-body { padding: 24px 20px; }
  .page-hero--compact { min-height: 30dvh; }
  .page-hero--compact .page-hero-body { padding: 8px 20px 32px; }
}

/* ========== BANNERS WRAP — pleine largeur du container (identique aux autres sections)
   Sur la même ligne plutôt qu'empilés : autant de colonnes que de banners (auto-fit s'occupe
   du nombre — 3 banners -> 3 colonnes, 2 -> 2 colonnes, etc.), et repasse naturellement en une
   seule colonne quand ça ne rentre plus (mobile). ========== */
.banners-wrap {
  max-width: var(--max-w);
  margin: 0 auto 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
@media (max-width: 900px)  { .banners-wrap { padding: 0 16px; margin-bottom: 32px; } }

/* Bannières écosystème (bio) — une seule ligne, chaque bannière = 1/4 de la largeur pile */
.banners-wrap--row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .banners-wrap--row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .banners-wrap--row { grid-template-columns: 1fr; } }

/* ========== SERVICES / RÉCOMPENSES — deux colonnes côte à côte (bio) ========== */
.bio-services-awards-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.bio-services-awards-grid .banners-wrap { max-width: none; margin: 0; padding: 0; grid-template-columns: 1fr; gap: 16px; }
.bio-services-awards-grid .awards-inner { max-width: none; margin: 0; padding: 0; }
@media (max-width: 900px) {
  .bio-services-awards-grid { grid-template-columns: 1fr; padding: 0 20px; gap: 48px; }
}

/* ========== CLIENTS (logos, bio) ========== */
.bio-clients { padding: 0 64px 72px; }
.bio-clients-row {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
.bio-clients-row img {
  width: 100%;
  max-width: 900px;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.32s;
}
.bio-clients-row img:hover { opacity: 1; }
@media (max-width: 768px) { .bio-clients { padding: 0 20px 48px; } .bio-clients-row { gap: 32px; } }

/* ========== PROJECT CARD — YouTube video cover au survol ========== */
.project-card-yt-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.88s ease;
  z-index: 3;
  background: #000;
  pointer-events: none;
}
.project-card.video-active .project-card-yt-wrap { opacity: 1; }
.project-card.video-active .project-card-bg {
  opacity: 0;
  transition: opacity 0.64s ease;
}
.project-card-yt-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  border: none;
  pointer-events: none;
}

/* ========== BLOG FILTER — animation cards ========== */
@keyframes filterCardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.blog-card.filter-in { animation: filterCardIn 0.35s ease forwards; }
.blog-card.hidden { display: none; }

/* ========== FORM FEEDBACK TOAST — contact page ========== */
.form-feedback {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;
  transform: translateY(calc(100% + 48px));
  opacity: 0;
  transition: transform 0.8s var(--ease), opacity 0.64s ease;
  pointer-events: none;
  min-width: 300px;
  max-width: 400px;
}
.form-feedback.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.form-feedback-inner {
  background: var(--black);
  color: var(--white);
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.form-feedback-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}
.form-feedback.success .form-feedback-icon::before { content: '✓'; color: #00e5b0; }
.form-feedback.error .form-feedback-icon::before { content: '✗'; color: var(--red); }
.form-feedback-text { flex: 1; min-width: 0; }
.form-feedback-title {
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.form-feedback-msg {
  font-family: 'Gotham', sans-serif;
  font-size: 11px;
  opacity: 0.65;
  line-height: 1.55;
}
.form-feedback-close {
  background: none;
  border: none;
  color: var(--white);
  opacity: 0.35;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.32s;
}
.form-feedback-close:hover { opacity: 1; }

/* Captcha label question */
.captcha-question { font-weight: 700; color: var(--text); }

/* Submit button loading state */
.form-submit.loading { opacity: 0.5; pointer-events: none; cursor: not-allowed; }

/* Projects strip — centré dans le max-width (le header "Contenus Réseaux Sociaux" reste à la
   largeur standard du site ; seul le carrousel lui-même passe en plein écran, voir plus bas). */
.projects-strip-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Test : le carrousel réseaux sociaux est plein écran (100vw), comme le slider de project-cards
   — il ignore le padding/max-width de .projects-strip-inner qui l'entoure. */
.projects-strip .carousel {
  width: calc(100vw - var(--sbw, 0px));
  max-width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - 50vw + (var(--sbw, 0px) / 2));
  margin-right: calc(50% - 50vw + (var(--sbw, 0px) / 2));
  padding: 0;   /* neutralise le padding ≥900px de la règle .carousel générale (halo des carrousels paginés) : ici la gouttière vient de .carousel-track */
  overflow-x: visible;   /* le scroll/l'overflow sont gérés par .carousel-track lui-même, pas ce wrapper */
}
/* Défilement continu (façon marquee) : .carousel-track est ici le conteneur de scroll natif
   (scrollLeft incrémenté en JS), pas le slider à pages de .Carousel — le drag/curseur "grab" et
   la transition transform de la version paginée n'ont plus lieu d'être ici. */
.projects-strip .carousel-track {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 56px;
  /* padding vertical + marge négative égale : donne de la place à la lueur du hover (box-shadow)
     pour ne pas être coupée par le conteneur de scroll (overflow-x:auto calcule overflow-y en
     "auto" aussi, donc tout ce qui dépasse verticalement de la hauteur des cartes est rogné sans
     cette marge de respiration — même principe que .projects-grid plus haut). */
  padding: 48px 64px;
  margin: -48px 0;
  transition: none;
  touch-action: auto;   /* laisse le swipe horizontal natif fonctionner, y compris pendant le défilement auto */
  cursor: default;
  user-select: auto;
}
.projects-strip .carousel-track::-webkit-scrollbar { display: none; }
@media (max-width: 768px) { .projects-strip .carousel-track { padding: 32px 16px; margin: -32px 0; gap: 32px; } }

/* Projects strip — artist thumbs beaucoup plus petits */
/* Carrousel « Réalisation » — contenus réseaux sociaux (Better Call Paul, etc.), grand format 9/16 */
.projects-strip .artist-thumb {
  flex: 0 0 clamp(170px, 15vw, 240px);
  aspect-ratio: 9/16;
  height: auto;
}
.projects-strip .artist-thumb-name { font-size: 13px; letter-spacing: 0.06em; }
.projects-strip .artist-thumb-title { font-size: 10.5px; }
.projects-strip .artist-thumb-overlay { padding: 16px; gap: 3px; }
/* Pas d'effet "lever" sur ces cartes (défilement continu façon marquee : une carte qui se
   soulève au survol pendant qu'elle défile crée un à-coup visuel) — seule la lueur colorée reste. */
.projects-strip .artist-thumb:hover { transform: none; }
@media (max-width: 768px) {
  .projects-strip .artist-thumb { flex: 0 0 clamp(130px, 34vw, 180px); }
}

/* Bio image block → banners séparation */
.bio-image-block + .banners-wrap { margin-top: 80px; }
.bio-home + .banners-wrap { margin-top: 72px; }
@media (max-width: 768px) { .bio-home + .banners-wrap { margin-top: 48px; } }

/* ========== MUSIQUE PAGE ========== */
.music-featured {
  background: var(--black);
  padding: 72px 64px;
}
.music-featured-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 72px;
  align-items: center;
}
.music-featured-art {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1/1;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}
.music-featured-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-featured-art-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 8px;
}
.music-featured-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.music-featured-title {
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(28px, 4vw, 54px);
  color: var(--white);
  line-height: 1;
  margin-bottom: 6px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.music-featured-sub {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  margin-bottom: 36px;
}
.music-featured-progress {
  height: 2px;
  background: rgba(255,255,255,0.12);
  margin-bottom: 8px;
  cursor: pointer;
  position: relative;
}
.music-featured-progress-bar {
  height: 100%;
  background: var(--white);
}
.music-featured-time {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.1em;
  margin-bottom: 32px;
}
.music-featured-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}
.music-featured-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.32s;
}
.music-featured-btn:hover { opacity: 1; }
.music-featured-btn--play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--white);
  opacity: 1;
  flex-shrink: 0;
}
.music-featured-btn--play svg { margin-left: 4px; }
.music-featured-platforms {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.music-platform-link {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 10px;
  transition: all 0.32s;
}
.music-platform-link:hover { color: var(--white); border-color: rgba(255,255,255,0.5); }

/* Track sections */
.music-section { padding: 72px 64px; }
.music-section--dark { background: var(--black); color: var(--white); }
.music-section-inner { max-width: var(--max-w); margin: 0 auto; }
.music-section-title {
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(13px, 1.6vw, 17px);
  letter-spacing: 0.16em;
  margin-bottom: 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.music-section--dark .music-section-title { border-bottom-color: rgba(255,255,255,0.08); }
.music-section-empty {
  font-size: 11px;
  font-weight: 300;
  color: var(--gray-400);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 56px 0;
}
.music-section--dark .music-section-empty { color: rgba(255,255,255,0.2); }

/* Track row */
.music-track {
  display: grid;
  grid-template-columns: 28px 56px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.32s;
  cursor: default;
}
.music-section--dark .music-track { border-bottom-color: rgba(255,255,255,0.06); }
.music-track:first-child { border-top: 1px solid var(--border-soft); }
.music-section--dark .music-track:first-child { border-top-color: rgba(255,255,255,0.06); }
.music-track:hover { background: rgba(255,255,255,0.03); margin: 0 -12px; padding: 10px 12px; }
.music-track-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  text-align: center;
}
.music-track-art {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.music-track-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-track-play-btn {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.32s;
  border: none;
  cursor: pointer;
}
.music-track:hover .music-track-play-btn { opacity: 1; }
.music-track-info { min-width: 0; }
.music-track-title {
  font-family: var(--font-body); font-weight: 900;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-section--dark .music-track-title { color: var(--white); }
.music-track-sub {
  font-size: 10px;
  font-weight: 300;
  color: var(--gray-400);
  letter-spacing: 0.04em;
}
.music-track-duration {
  font-size: 10px;
  color: var(--gray-400);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.music-track-links { display: flex; gap: 5px; }
.music-track-link {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border-soft);
  padding: 3px 7px;
  transition: all 0.32s;
  white-space: nowrap;
}
.music-track-link:hover { color: var(--text); border-color: var(--text); }
.music-section--dark .music-track-link { border-color: rgba(255,255,255,0.12); }
.music-section--dark .music-track-link:hover { color: var(--white); border-color: rgba(255,255,255,0.5); }

@media (max-width: 1024px) {
  .music-featured { padding: 56px 40px; }
  .music-featured-inner { gap: 40px; grid-template-columns: 240px 1fr; }
  .music-section { padding: 56px 40px; }
}
@media (max-width: 768px) {
  .music-featured { padding: 48px 20px; }
  .music-featured-inner { grid-template-columns: 1fr; }
  .music-featured-art { max-width: 220px; }
  .music-section { padding: 48px 20px; }
  .music-track { grid-template-columns: 28px 48px 1fr auto; }
  .music-track-links { display: none; }
}

/* ========== UTILITY ========== */
.is-hidden { display: none !important; }

/* ========== ENTITY BLOCK — écosystème (C9 enrichi) ========== */
.entity-block {
  position: relative;
  padding: 96px 64px;
  overflow: hidden;
}
.entity-block--dark  { background: var(--bg); color: var(--text); }
.entity-block--light { background: var(--surface); color: var(--text); }
.entity-block-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.14;
}
.entity-block--dark .entity-block-bg { opacity: 0.24; filter: brightness(0.7); }
.entity-block-inner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
}
.entity-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.55; margin-bottom: 14px;
}
.entity-title {
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 24px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.entity-desc { font-size: 14px; font-weight: 300; line-height: 1.8; max-width: 560px; margin-bottom: 32px; opacity: 0.82; }
.entity-meta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.entity-status {
  font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 13px; border: 1px solid currentColor; opacity: 0.55;
}
.entity-cta {
  font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: opacity 0.32s;
}
.entity-cta:hover { opacity: 0.55; }
@media (max-width: 768px) {
  .entity-block { padding: 60px 24px; }
  .entity-title { font-size: clamp(30px, 10vw, 72px); }
  .entity-meta { gap: 16px; }
}

/* ========== BOUTIQUE — accueil ========== */
.boutique-entries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 64px;
}
.boutique-entry-card {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  transition: transform 0.48s var(--ease), box-shadow 0.48s var(--ease);
}
.boutique-entry-card:hover { transform: translateY(-6px); }
.boutique-entry-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.5);
  transition: filter 0.56s var(--ease), transform 0.96s var(--ease);
}
.boutique-entry-card:hover .boutique-entry-bg { filter: brightness(0.34); transform: scale(1.06); }
.boutique-entry-card::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent, var(--red));
  opacity: 0;
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity 0.64s var(--ease);
  z-index: 1;
}
.boutique-entry-card:hover::after { opacity: 0.75; }
.boutique-entry-card:hover { box-shadow: 0 0 46px -4px var(--accent, rgba(0,0,0,0.55)); }
.boutique-entry-body {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px;
  color: var(--white);
}
.boutique-entry-count {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; margin-bottom: 8px;
}
.boutique-entry-name {
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ========== PRODUCT CARD (C15) — beats, ressources, formations ========== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 28px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 64px;
}
.product-card {
  display: block;
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.48s var(--ease), box-shadow 0.48s var(--ease);
}
.product-card:hover { transform: translateY(-8px); box-shadow: 0 0 46px -4px var(--accent, rgba(0,0,0,0.6)); }
.product-grid--6col { grid-template-columns: repeat(6, 1fr); }
.product-grid--portrait .product-card-visual { aspect-ratio: 4/5; }
.product-card-visual {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--surface-2);
  overflow: hidden;
}
.product-card-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent, var(--red));
  opacity: 0;
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity 0.64s var(--ease);
  z-index: 1;
}
.product-card:hover .product-card-visual::after { opacity: 0.7; }
.product-card-visual img { width: 100%; height: 100%; object-fit: cover; }
.product-card-badge {
  position: absolute; top: 10px; left: 10px;
  z-index: 2;
  background: var(--black); color: var(--white);
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 8px;
}
.product-card-play {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.28);
  opacity: 0; transition: opacity 0.4s;
}
.product-card:hover .product-card-play { opacity: 1; }
.product-card-play svg { width: 34px; height: 34px; }
.product-card-body { padding: 16px 18px 18px; }
.product-card-title { font-family: var(--font-body); font-weight: 900; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; }
.product-card-meta { font-size: 10px; color: var(--gray-400); letter-spacing: 0.05em; margin-bottom: 10px; }
.product-card-price { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.product-card-price span { opacity: 0.45; font-weight: 400; text-transform: uppercase; font-size: 9px; margin-right: 4px; }
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr); padding: 0 40px; } }
@media (max-width: 640px) { .product-grid { grid-template-columns: 1fr; padding: 0 20px; } .boutique-entries { grid-template-columns: 1fr; padding: 0 20px; } }

/* Variante 3 colonnes (teasers) — les media queries .product-grid ci-dessus la recouvrent déjà en dessous de 1024px */
.product-grid--3col { grid-template-columns: repeat(3, 1fr); }

/* ========== UTILITY GRID — 2 colonnes responsive, pour blocs de contenu ponctuels ========== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; gap: 16px; } }

/* ========== BEAT ROW — lecteur catalogue ========== */
.beat-list { max-width: var(--max-w); margin: 0 auto; padding: 0 64px; }
.beat-row {
  display: grid;
  grid-template-columns: 40px 1fr 120px 70px 60px 100px;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.beat-row:first-child { border-top: 1px solid var(--border-soft); }
.beat-play-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--text);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.32s;
}
.beat-play-btn svg { fill: var(--text); }
.beat-play-btn:hover { background: var(--text); }
.beat-play-btn:hover svg { fill: var(--bg); }
.beat-wave { display: flex; align-items: center; gap: 2px; height: 24px; min-width: 0; }
.beat-wave span { width: 2px; background: var(--border-soft); border-radius: 1px; flex-shrink: 0; }
.beat-title { font-family: var(--font-body); font-weight: 900; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 3px; }
.beat-tags { font-size: 9.5px; color: var(--gray-400); letter-spacing: 0.04em; }
.beat-bpm, .beat-key, .beat-duration { font-size: 10px; color: var(--gray-400); text-align: center; white-space: nowrap; }
.beat-price { font-size: 11px; font-weight: 700; text-align: right; white-space: nowrap; }
.beat-price span { opacity: 0.4; font-weight: 400; font-size: 9px; text-transform: uppercase; margin-right: 3px; }
@media (max-width: 768px) {
  .beat-list { padding: 0 20px; }
  .beat-row { grid-template-columns: 34px 1fr auto; }
  .beat-bpm, .beat-key, .beat-duration { display: none; }
}

/* Variante panier — visuel + libellé + prix + retirer */
.beat-row--cart { grid-template-columns: 64px 1fr 90px 40px; }
@media (max-width: 480px) {
  .beat-row--cart { grid-template-columns: 48px 1fr auto 28px; gap: 10px; }
  .beat-row--cart .beat-title { font-size: 11px; }
  .beat-row--cart .beat-tags { display: none; }
}

/* ========== LICENSE TABLE (C16) ========== */
.license-table { max-width: var(--max-w); margin: 0 auto; padding: 0 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); }
.license-card { background: var(--surface); padding: 28px 22px; display: flex; flex-direction: column; }
.license-card--selected { background: var(--text); color: var(--bg); }
.license-name { font-family: var(--font-body); font-weight: 900; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 10px; }
.license-price { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.license-features { list-style: none; font-size: 10.5px; line-height: 1.9; opacity: 0.75; margin-bottom: 20px; flex: 1; }
.license-features li::before { content: '— '; opacity: 0.5; }
.license-select-btn {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid currentColor; padding: 10px; text-align: center; transition: opacity 0.32s;
}
.license-select-btn:hover { opacity: 0.6; }
@media (max-width: 1024px) { .license-table { grid-template-columns: repeat(2, 1fr); padding: 0 40px; } }
@media (max-width: 640px) { .license-table { grid-template-columns: 1fr; padding: 0 20px; } }

/* ========== PAGE D'ATTENTE (Director's League) ========== */
.waitlist-section { background: var(--bg); padding: 88px 64px; color: var(--text); }
.waitlist-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.waitlist-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 16px; }
.waitlist-title { font-family: var(--font-body); font-weight: 900; font-size: clamp(28px, 4vw, 40px); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 20px; }
.waitlist-lead { font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--text-dim); margin-bottom: 48px; }
.waitlist-args { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; margin-bottom: 56px; text-align: left; }
.waitlist-arg-num { font-family: var(--font-body); font-weight: 900; font-size: 22px; color: var(--text-faint); margin-bottom: 6px; }
.waitlist-arg-text { font-size: 12px; line-height: 1.7; }
.waitlist-form { display: flex; gap: 0; border-bottom: 1px solid var(--text); max-width: 440px; margin: 0 auto; }
.waitlist-form input {
  flex: 1; border: none; background: transparent; padding: 14px 4px;
  font-family: var(--font-body); font-size: 13px; color: var(--text);
}
.waitlist-form input:focus { outline: none; }
.waitlist-form input::placeholder { color: var(--text-faint); }
.waitlist-form button { color: var(--text);
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 14px 20px; white-space: nowrap;
}
.waitlist-form button:hover { opacity: 0.6; }
.waitlist-note { font-size: 10px; color: var(--text-faint); margin-top: 16px; }
@media (max-width: 640px) {
  .waitlist-section { padding: 64px 24px; }
  .waitlist-args { grid-template-columns: 1fr; }
  .waitlist-form { flex-direction: column; border: none; gap: 10px; }
  .waitlist-form input { border-bottom: 1px solid var(--text); }
}

/* ========== LIGHTBOX PROJET — overlay vidéo + titre + crédits (au lieu de pages artiste) ========== */
.project-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(6,6,6,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.42s var(--ease), visibility 0s linear 0.42s;
}
.project-lightbox.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.42s var(--ease), visibility 0s linear 0s;
}
.project-lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  overflow: hidden auto;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: 0 0 70px -6px var(--accent, rgba(0,0,0,0.6)), 0 0 24px -4px var(--accent, transparent);
  transform: scale(0.94) translateY(14px);
  transition: transform 0.42s var(--ease);
}
.project-lightbox.open .project-lightbox-inner { transform: scale(1) translateY(0); }
.project-lightbox-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(10,10,10,0.7);
  color: var(--text);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.project-lightbox-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
.project-lightbox-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}
.project-lightbox-video-placeholder {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.project-lightbox-video-placeholder svg { width: 60px; height: 60px; opacity: 0.85; }
.project-lightbox-body { padding: 32px 40px 40px; }
.project-lightbox-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.project-lightbox-title { font-family: var(--font-body); font-weight: 900; font-size: clamp(24px, 3.4vw, 38px); letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 18px; }
.project-lightbox-desc { font-size: 13px; line-height: 1.8; color: var(--text-dim); max-width: 640px; margin-bottom: 20px; }
.project-lightbox-credits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.project-lightbox-credit-role { font-size: 7.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.45; margin-bottom: 3px; }
.project-lightbox-credit-name { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
@media (max-width: 640px) {
  .project-lightbox { padding: 0; }
  .project-lightbox-inner { max-height: 100vh; height: 100%; }
  .project-lightbox-body { padding: 24px 20px 32px; }
  .project-lightbox-credits { grid-template-columns: 1fr 1fr; }
}

/* Lightbox en mode vertical — contenus 9/16 (carrousel réseaux sociaux) : juste la vidéo en
   grand avec le son, pas de fiche crédits. Largeur bornée par la hauteur dispo pour ne jamais
   dépasser l'écran, plutôt que par une largeur fixe comme le lightbox 16/9. */
.project-lightbox--vertical .project-lightbox-inner {
  max-width: min(420px, calc(92vh * 9 / 16));
}
.project-lightbox--vertical .project-lightbox-video { aspect-ratio: 9/16; }
.project-lightbox--vertical .project-lightbox-body { display: none; }

/* ========== ARTICLE PAGE — modèle "single post" façon WordPress, même esthétique que le reste du site ========== */
.article-hero {
  position: relative;
  min-height: 60dvh;
  display: flex;
  align-items: flex-end;
  background: var(--black);
  overflow: hidden;
}
.article-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.6; }
.article-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.15) 100%);
}
.article-hero-body { position: relative; z-index: 2; width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 64px 56px; color: var(--white); }
.article-hero-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--red); color: var(--white);
  padding: 6px 12px; border-radius: 5px;
  margin-bottom: 18px;
}
.article-hero-title {
  font-family: var(--font-title);
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 820px;
  margin-bottom: 22px;
  overflow-wrap: break-word;
}
.article-hero-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); }
.article-hero-author { display: flex; align-items: center; gap: 10px; }
.article-hero-author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.article-hero-author strong { color: var(--white); font-weight: 700; }
.article-hero-meta-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.4); flex-shrink: 0; }

/* Layout deux colonnes : contenu + sidebar sticky */
.article-section { background: var(--bg); padding: 72px 64px 96px; }
.article-layout {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 72px;
  align-items: start;
}

/* Contenu rédactionnel */
.article-body { max-width: 700px; color: var(--text-dim); font-size: 15px; line-height: 1.85; }
.article-body p { margin-bottom: 22px; }
.article-body h2 {
  font-family: var(--font-body); font-weight: 900;
  color: var(--text);
  font-size: clamp(20px, 2.4vw, 27px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 48px 0 18px;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
  font-family: var(--font-body);
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 32px 0 12px;
}
.article-body ul, .article-body ol { margin: 0 0 22px 20px; }
.article-body li { margin-bottom: 10px; }
.article-body strong { color: var(--text); font-weight: 700; }
.article-body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; opacity: 0.85; }
.article-body a:hover { opacity: 1; }

.article-pullquote {
  position: relative;
  margin: 40px 0;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--red);
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--text);
  text-transform: uppercase;
}
.article-pullquote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 12px;
}

.article-inline-img { border-radius: 10px; overflow: hidden; margin: 36px 0; }
.article-inline-img img { width: 100%; display: block; }
.article-inline-img figcaption { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.04em; margin-top: 10px; text-align: center; }

/* Tags + partage — en tête de la colonne gauche (auteur/partage), au même niveau que les
   commentaires dans la colonne de droite */
.article-footer-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
}
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.article-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid var(--border-soft); padding: 7px 12px; transition: all 0.32s;
}
.article-tag:hover { color: var(--text); border-color: var(--text); }
.article-share { display: flex; gap: 10px; }
.article-share a {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-soft); border-radius: 50%; color: var(--text-dim); font-size: 13px; transition: all 0.32s;
}
.article-share a:hover { color: var(--text); border-color: var(--text); }

/* Bio auteur — sous les tags/partage, dans la colonne gauche */
.article-author-box {
  display: flex; gap: 20px; align-items: flex-start;
  margin-top: 24px; padding: 28px;
  background: var(--surface); border-radius: 14px;
}
.article-author-box img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.article-author-box-label { font-size: 8.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.article-author-box-name { font-family: var(--font-body); font-weight: 900; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
.article-author-box p { font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }

/* Sidebar */
.article-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 24px; }
.article-widget { background: var(--surface); border-radius: 14px; padding: 24px; }
.article-widget-title { font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; }
.article-toc { display: flex; flex-direction: column; gap: 10px; }
.article-toc a {
  font-size: 12px; color: var(--text-dim); line-height: 1.5; padding-left: 14px;
  border-left: 2px solid var(--border-soft); transition: color 0.32s, border-color 0.32s; display: block;
}
.article-toc a:hover { color: var(--text); border-color: var(--text); }

.article-widget-author { display: flex; flex-direction: column; align-items: center; text-align: center; }
.article-widget-author img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; }
.article-widget-author-name { font-family: var(--font-body); font-weight: 900; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); margin-bottom: 8px; }
.article-widget-author p { font-size: 11.5px; line-height: 1.65; color: var(--text-dim); margin-bottom: 14px; }

.article-widget-cats { display: flex; flex-direction: column; gap: 0; }
.article-widget-cats a {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 0.04em; color: var(--text-dim);
  padding: 10px 0; border-bottom: 1px solid var(--border-soft); transition: color 0.32s;
}
.article-widget-cats a:first-child { padding-top: 0; }
.article-widget-cats a:last-child { border-bottom: none; }
.article-widget-cats a:hover { color: var(--text); }
.article-widget-cats span { font-size: 9.5px; color: var(--text-faint); }

.article-widget-newsletter p { font-size: 11.5px; line-height: 1.65; color: var(--text-dim); margin-bottom: 16px; }
.article-widget-newsletter form { display: flex; flex-direction: column; gap: 10px; }
.article-widget-newsletter input {
  font-family: var(--font-body); font-size: 12px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  padding: 11px 12px; outline: none; transition: border-color 0.32s;
}
.article-widget-newsletter input:focus { border-color: var(--text); }
.article-widget-newsletter button {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--text); color: var(--bg); padding: 12px; transition: opacity 0.32s;
}
.article-widget-newsletter button:hover { opacity: 0.75; }

/* Articles similaires */
.article-related { background: var(--bg); padding: 0 64px 88px; }
.article-related-inner { max-width: var(--max-w); margin: 0 auto; }
.article-related-title {
  font-family: var(--font-body); font-weight: 900; font-size: clamp(18px, 2vw, 22px); letter-spacing: 0.03em; text-transform: uppercase;
  margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft);
}
.article-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.article-related-grid .blog-card { aspect-ratio: 16/10; }

/* ========== AUTEUR + PARTAGE  |  COMMENTAIRES — rangée à deux colonnes, sous l'article,
   avant les "articles similaires" ========== */
.article-meta-comments { background: var(--bg); padding: 0 64px 80px; }
.article-meta-comments-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  padding-top: 40px;
  border-top: 1px solid var(--border-soft);
}
.article-meta-col { min-width: 0; }

/* Bloc commentaires — accordéon (pas d'overlay/lightbox) : la liste est tronquée en hauteur
   par défaut (seul le commentaire le plus récent dépasse), et se déplie verticalement au clic
   sur l'en-tête. */
.article-comments-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
  background: none;
  border-top: none; border-left: none; border-right: none;
  cursor: pointer;
  text-align: left;
}
.article-comments-toggle-count {
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(16px, 1.8vw, 19px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
}
.article-comments-toggle-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color 0.32s;
}
.article-comments-toggle:hover .article-comments-toggle-hint { color: var(--text); }
.article-comments-toggle-hint i { transition: transform 0.4s var(--ease); }
.article-comments-toggle.expanded .article-comments-toggle-hint i { transform: rotate(180deg); }

.article-comments-list {
  position: relative;
  max-height: 132px;
  overflow: hidden;
  transition: max-height 0.56s var(--ease);
}
.article-comments-list::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--bg) 92%);
  transition: opacity 0.32s;
  pointer-events: none;
}
.article-comments-list.expanded {
  max-height: 2000px;
}
.article-comments-list.expanded::after { opacity: 0; }

.article-comment { display: flex; gap: 16px; padding: 0 0 24px; }
.article-comment img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.article-comment-body { flex: 1; min-width: 0; }
.article-comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.article-comment-name { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: var(--text); text-transform: uppercase; }
.article-comment-date { font-size: 10px; color: var(--text-faint); }
.article-comment p { font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }
.article-comment-reply { display: inline-block; margin-top: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); transition: color 0.32s; }
.article-comment-reply:hover { color: var(--text); }
.article-comment--reply { margin-left: 58px; }

/* Formulaire mis en avant — encadré comme les widgets, pour qu'il ne se fonde plus dans la page */
.article-comment-form {
  margin-top: 8px;
  padding: 24px;
  background: var(--surface);
  border-radius: 14px;
}
.article-comment-form-title { font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 20px; }

@media (max-width: 1024px) {
  .article-hero-body, .article-section, .article-related, .article-meta-comments { padding-left: 40px; padding-right: 40px; }
  .article-layout { grid-template-columns: 1fr; gap: 48px; }
  .article-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .article-widget { flex: 1 1 260px; }
  .article-meta-comments-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .article-hero { min-height: 50dvh; }
  .article-hero-body, .article-section, .article-related, .article-meta-comments { padding-left: 20px; padding-right: 20px; }
  .article-related-grid { grid-template-columns: 1fr; }
  .article-sidebar { flex-direction: column; }
  .article-comment--reply { margin-left: 24px; }
}

/* ========== LEGAL PAGES (Mentions légales / CGV) ========== */
.legal-page { background: var(--bg); padding: 64px; }
.legal-inner { max-width: 840px; margin: 0 auto; }
.legal-inner h2 { font-family: var(--font-body); font-weight: 900; font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; margin: 44px 0 14px; }
.legal-inner h2:first-child { margin-top: 0; }
.legal-inner p { font-size: 13px; line-height: 1.85; color: var(--text-dim); margin-bottom: 14px; }
.legal-inner ul { margin: 0 0 14px 20px; }
.legal-inner li { font-size: 13px; line-height: 1.85; color: var(--text-dim); margin-bottom: 6px; }
.legal-inner a { text-decoration: underline; }
.legal-updated { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 40px; }
@media (max-width: 768px) { .legal-page { padding: 48px 24px; } }