/* ============================================================
   YVES LEYNAERT — Biographie immersive
   style.css — Design éditorial premium v2
   ============================================================

   Direction : Magazine culturel français
   Palette   : Crème #FAF8F4 · Bordeaux #8B1A2F · Or #B8922E
   Typo      : Lora (display) + Open Sans (corps)

   TABLE DES MATIÈRES
   01. Variables & Reset
   02. Typographie & Sélection
   03. Layout & Utilitaires
   04. Placeholder image
   05. Barre de lecture
   06. Navigation
   07. Hero
   08. Section headers partagés
   09. Sections base
   10. Biographie
   11. Galerie & Lightbox
   12. Médias — Vidéos & Photos
   13. Univers musical
   14. Œuvres
   15. Témoignages
   16. Footer
   17. Animations & Reveal
   18. Responsive
   ============================================================ */


/* ============================================================
   01. VARIABLES & RESET
   ============================================================ */

:root {
  /* ── Palette ─────────────────────────────────────────────── */
  --clr-page:       #FAF8F4;   /* fond principal crème chaud    */
  --clr-alt:        #F2EBE0;   /* sections alternées beige      */
  --clr-white:      #FFFFFF;
  --clr-burgundy:   #1C1712;   /* accent principal encre        */
  --clr-burgundy-h: #463C33;   /* hover brun foncé             */
  --clr-gold:       #1C1712;   /* supprimé — encre             */
  --clr-gold-light: #463C33;   /* supprimé — encre hover       */
  --clr-ink:        #1C1712;   /* couleur texte titres          */
  --clr-body:       #463C33;   /* couleur texte courant         */
  --clr-muted:      #8A7E72;   /* texte secondaire              */
  --clr-rule:       rgba(70, 60, 51, 0.1);  /* filets fins      */
  --clr-rule-gold:  rgba(28, 23, 18, 0.12);

  /* ── Typographie ─────────────────────────────────────────── */
  --ff-display: 'Lora', Georgia, 'Times New Roman', serif;
  --ff-body:    'Open Sans', system-ui, -apple-system, sans-serif;

  /* ── Échelle de taille ───────────────────────────────────── */
  --fs-hero:   clamp(68px, 11vw, 128px);
  --fs-h2:     clamp(36px, 5vw, 58px);
  --fs-h3:     clamp(20px, 2.2vw, 28px);
  --fs-body:   17px;
  --fs-sm:     14px;
  --fs-xs:     12px;

  /* ── Espacement ──────────────────────────────────────────── */
  --py:         clamp(88px, 11vw, 148px);
  --container:  1220px;
  --gutter:     clamp(20px, 5vw, 60px);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    0.18s;
  --t-base:    0.38s;
  --t-slow:    0.65s;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;   /* pas de scroll horizontal */
}

body {
  overflow-x: hidden;
  background: var(--clr-page);
  color: var(--clr-body);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--clr-burgundy);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ============================================================
   02. TYPOGRAPHIE & SÉLECTION
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--clr-ink);
}

::selection {
  background: var(--clr-burgundy);
  color: #FAF8F4;
}


/* ============================================================
   03. LAYOUT & UTILITAIRES
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Filet ornemental réutilisable */
.rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--clr-burgundy);
  margin: 0 auto 0;
  opacity: 0.5;
}


/* ============================================================
   04. PLACEHOLDER IMAGE
   ============================================================ */

.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: #F5F0E8;
  border: 1px dashed rgba(70,60,51,0.15);
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-placeholder::after {
  content: 'Photo à ajouter';
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(70,60,51,0.3);
  text-transform: uppercase;
}


/* ============================================================
   05. BARRE DE LECTURE
   ============================================================ */

#reading-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--clr-burgundy) 0%, var(--clr-gold) 100%);
  z-index: 1000;
  transition: width 0.1s linear;
}


/* ============================================================
   06. NAVIGATION
   ============================================================ */

#navbar {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1180px;
  z-index: 900;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 100px;
  padding: 0;
  border: 1px solid rgba(28,23,18,0.18);
  box-shadow:
    0 2px 12px rgba(28,23,18,0.07),
    0 8px 32px rgba(28,23,18,0.06);
  transition:
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

#navbar.scrolled {
  box-shadow:
    0 4px 20px rgba(28,23,18,0.10),
    0 12px 48px rgba(28,23,18,0.09);
  border-color: rgba(28,23,18,0.28);
}

.nav-container {
  max-width: 100%;
  margin-inline: auto;
  padding: 12px 20px 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Marque */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav-logo {
  font-family: var(--ff-display);
  font-size: 19px;
  font-style: italic;
  font-weight: 700;
  color: var(--clr-ink);
  letter-spacing: 0.03em;
  transition: opacity var(--t-fast) var(--ease);
}
.nav-logo:hover { opacity: 0.6; }

.nav-brand-sep {
  width: 1px;
  height: 22px;
  background: rgba(28,23,18,0.18);
  flex-shrink: 0;
}

.nav-fullname {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  color: var(--clr-ink);
  letter-spacing: 0.01em;
  transition: opacity var(--t-fast) var(--ease);
  white-space: nowrap;
}
.nav-fullname:hover { opacity: 0.6; }

.nav-badge {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(28,23,18,0.45);
  background: rgba(28,23,18,0.06);
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

/* Liens */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
}

.nav-links a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(70, 60, 51, 0.55);
  transition: color var(--t-fast) var(--ease);
  position: relative;
  padding-bottom: 2px;
  white-space: nowrap;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1.5px;
  background: var(--clr-burgundy);
  transition: width var(--t-base) var(--ease);
  border-radius: 2px;
}

.nav-links a:hover,
.nav-links a.active { color: var(--clr-ink); }

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* CTA nav */
.nav-links a.nav-cta {
  color: var(--clr-white);
  background: var(--clr-ink);
  border: none;
  padding: 9px 22px;
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.1em;
  transition:
    background var(--t-fast) var(--ease),
    transform  var(--t-fast) var(--ease);
}
.nav-links a.nav-cta::after { display: none; }
.nav-links a.nav-cta:hover {
  background: var(--clr-burgundy);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Burger mobile */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  z-index: 910;
}
.nav-burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--clr-ink);
  transform-origin: center;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ============================================================
   07. HERO
   ============================================================ */

#hero {
  position: relative;
  height: 100dvh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

/* Image de fond hero */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../photo/hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Overlay sombre léger sur la photo hero */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

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

/* Lignes décoratives horizontales */
#hero::before,
#hero::after {
  content: '';
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-rule-gold), transparent);
  pointer-events: none;
  z-index: 3;
}
#hero::before { top: clamp(80px, 12vh, 120px); }
#hero::after  { bottom: clamp(80px, 12vh, 120px); }

/* Contenu hero */
.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--gutter);
  max-width: 980px;
}

.hero-eyebrow {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Tirets de part et d'autre de l'eyebrow */
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: #FFFFFF;
  opacity: 0.55;
}

/* Nom */
.hero-name {
  font-family: var(--ff-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 0.92;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 36px;
  letter-spacing: -0.01em;
}

.hero-firstname {
  font-style: italic;
  font-weight: 400;
  color: #FFFFFF;
  display: block;
}

.hero-lastname {
  font-style: normal;
  font-weight: 600;
  color: #FFFFFF;
  display: block;
  letter-spacing: -0.025em;
}

/* Ornement central */
.hero-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.hero-divider::before,
.hero-divider::after {
  content: '';
  display: block;
  width: 52px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-gold));
}
.hero-divider::after {
  background: linear-gradient(90deg, var(--clr-gold), transparent);
}

/* Losange central */
.hero-divider-diamond {
  width: 6px; height: 6px;
  background: var(--clr-gold);
  transform: rotate(45deg);
  opacity: 0.7;
  flex-shrink: 0;
}

/* Tagline */
.hero-tagline {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 48px;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

/* CTA hero — Glassmorphism Apple */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  text-decoration: none;
  border-radius: 980px;                          /* pill Apple */
  margin-top: 8px;

  /* Glass */
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);

  /* Bordures layered Apple-style */
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),   /* reflet haut */
    inset 0 -1px 0 rgba(0,0,0,0.12),        /* ombre basse interne */
    0 4px 24px rgba(0,0,0,0.18),            /* ombre portée */
    0 1px 4px rgba(0,0,0,0.12);

  transition:
    background    var(--t-base) var(--ease),
    box-shadow    var(--t-base) var(--ease),
    transform     var(--t-base) var(--ease),
    gap           var(--t-base) var(--ease);
}

.hero-cta:hover {
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.1),
    0 8px 36px rgba(0,0,0,0.22),
    0 2px 8px rgba(0,0,0,0.14);
  transform: translateY(-1px);
  gap: 14px;
}

.hero-cta:active {
  transform: translateY(0) scale(0.98);
  background: rgba(255,255,255,0.18);
}

.hero-cta-text {
  font-family: var(--ff-body);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.hero-cta-arrow {
  color: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease),
              color     var(--t-fast) var(--ease);
}

.hero-cta:hover .hero-cta-arrow {
  transform: translateX(3px);
  color: #fff;
}


/* ============================================================
   08. SECTION HEADERS PARTAGÉS
   ============================================================ */

.section {
  padding: var(--py) 0;
}

.section-dark {
  background: #13100D;
  position: relative;
}

.section-alt {
  background: var(--clr-alt);
}

.section-dark::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--clr-rule);
}

.section-header {
  text-align: center;
  margin-bottom: clamp(52px, 7vw, 96px);
}

/* Numéro de section — grand, en filigrane */
.section-number {
  display: none;
  font-family: var(--ff-display);
  font-size: clamp(64px, 10vw, 112px);
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  color: var(--clr-burgundy);
  opacity: 0.06;
  margin-bottom: -0.3em;  /* remonte sous le titre */
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.04em;
}

.section-title {
  font-size: var(--fs-h2);
  font-style: italic;
  color: var(--clr-ink);
  margin-bottom: 20px;
  position: relative;
}

/* Filet bordeaux sous le titre */
.section-title::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: var(--clr-burgundy);
  margin: 20px auto 0;
  opacity: 0.6;
}

.section-subtitle {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--clr-muted);
  max-width: 520px;
  margin-inline: auto;
  line-height: 1.7;
  letter-spacing: 0.01em;
  margin-top: 18px;
}


/* ============================================================
   09. BIOGRAPHIE
   ============================================================ */

/* Bio blocks — chaque chapitre en 2 colonnes */
.bio-blocks {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bio-block {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--clr-rule);
}

.bio-block:last-of-type { border-bottom: none; }

.bio-block--reverse {
  grid-template-columns: 340px 1fr;
}
.bio-block--reverse .bio-block-text { order: 2; }
.bio-block--reverse .bio-block-img  { order: 1; }

/* Bloc 3 colonnes : img | texte | img */
.bio-block--three {
  grid-template-columns: 280px 1fr 280px;
  align-items: start;
}

.bio-block-text {
  display: flex;
  flex-direction: column;
}

.bio-block-img {
  margin: 0;
}

.bio-block-img .img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 4px;
}

/* Vidéo dans le bloc bio */
.bio-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(28,23,18,0.10);
  background: #000;
}

/* Photo réelle dans le bloc bio */
.bio-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(28,23,18,0.10);
}

.bio-block-img figcaption {
  font-size: 12px;
  color: var(--clr-muted);
  letter-spacing: 0.04em;
  margin-top: 10px;
  font-style: italic;
}

.bio-chapter-title {
  font-size: clamp(17px, 1.8vw, 22px);
  font-style: italic;
  color: var(--clr-ink);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Trait horizontal avant le titre */
.bio-chapter-title::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--clr-burgundy);
  flex-shrink: 0;
  opacity: 0.6;
}

.bio-block-text p,
.bio-chapter p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--clr-body);
  margin-bottom: 16px;
}
.bio-block-text p:last-child,
.bio-chapter p:last-child { margin-bottom: 0; }

/* Drop cap sur premier bloc */
.bio-block:first-of-type .bio-block-text p:first-of-type::first-letter,
.bio-chapter:first-child > p:first-child::first-letter {
  font-family: var(--ff-display);
  font-size: 4.2em;
  font-weight: 600;
  font-style: italic;
  color: var(--clr-burgundy);
  float: left;
  line-height: 0.78;
  padding-right: 10px;
  padding-top: 6px;
}

/* Pull quote */
.bio-pullquote {
  position: relative;
  padding: 40px 44px 40px 52px;
  margin: 56px 0;
  border-left: 3px solid var(--clr-burgundy);
  background: linear-gradient(135deg, rgba(28,23,18,0.04) 0%, rgba(242,235,224,0.7) 100%);
}

/* Grand guillemet décoratif */
.bio-pullquote::before {
  content: '\201C';
  position: absolute;
  top: 10px;
  left: 18px;
  font-family: var(--ff-display);
  font-size: 80px;
  line-height: 1;
  color: var(--clr-burgundy);
  opacity: 0.18;
  pointer-events: none;
}

.bio-pullquote p {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.65;
  color: var(--clr-burgundy);
  margin-bottom: 18px;
}

.bio-pullquote cite {
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

/* Portrait */
.bio-portrait {
  position: sticky;
  top: 110px;
}

.bio-portrait figure {
  position: relative;
}

/* Cadre décoratif décalé */
.bio-portrait figure::before {
  content: '';
  position: absolute;
  top: 16px; left: -16px;
  right: 16px; bottom: -16px;
  border: 1px solid var(--clr-rule-gold);
  z-index: 0;
  pointer-events: none;
}

.bio-portrait figure > * { position: relative; z-index: 1; }

.bio-portrait img {
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: grayscale(15%) contrast(1.05);
  transition: filter var(--t-slow) var(--ease);
}

.bio-portrait:hover img {
  filter: grayscale(0%) contrast(1.05);
}

.bio-portrait figcaption {
  margin-top: 18px;
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  line-height: 1.6;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Enlever l'ancienne décoration */
.bio-portrait-accent { display: none; }


/* ============================================================
   10. PARTITIONS
   ============================================================ */

.partitions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 60px;
}

/* ── Voir plus : masquer au-delà du seuil ───────────────── */
.partitions-grid.collapsed .partition-card:nth-child(n+9) {
  display: none;
}
.media-photo-grid.collapsed .media-photo-item:nth-child(n+13) {
  display: none;
}

/* ── Bouton Voir plus ───────────────────────────────────── */
.voir-plus-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.voir-plus-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: transparent;
  border: 1.5px solid rgba(28,23,18,0.22);
  border-radius: 100px;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.voir-plus-btn:hover {
  background: rgba(28,23,18,0.05);
  border-color: rgba(28,23,18,0.45);
  transform: translateY(-1px);
}

.voir-plus-count {
  color: var(--clr-muted);
  font-weight: 400;
}

.voir-plus-chevron {
  transition: transform var(--t-fast) var(--ease);
}
.voir-plus-chevron.open {
  transform: rotate(180deg);
}

.partition-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-rule);
  border-top: 3px solid transparent;
  border-radius: 4px;
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition:
    border-top-color var(--t-base) var(--ease),
    box-shadow       var(--t-base) var(--ease),
    transform        var(--t-base) var(--ease);
}

.partition-card:hover {
  border-top-color: var(--clr-burgundy);
  box-shadow: 0 8px 32px rgba(28,23,18,0.08);
  transform: translateY(-3px);
}

.partition-preview {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 3px;
  background: var(--clr-alt);
  border: 1px solid var(--clr-rule);
  flex-shrink: 0;
}

.partition-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform var(--t-slow) var(--ease);
}

.partition-card:hover .partition-preview img {
  transform: scale(1.04);
}

.partition-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.partition-title {
  font-family: var(--ff-display);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 600;
  color: var(--clr-ink);
  line-height: 1.3;
}

.partition-meta {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-burgundy);
}

.partition-desc {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.6;
  margin-top: 4px;
}

.partition-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 20px;
  background: var(--clr-ink);
  color: #FFFFFF;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: flex-start;
  transition:
    background var(--t-fast) var(--ease),
    transform  var(--t-fast) var(--ease);
}

.partition-dl:hover {
  background: var(--clr-burgundy);
  transform: translateY(-1px);
}

.partition-dl svg {
  flex-shrink: 0;
}

/* ============================================================
   11. GALERIE & LIGHTBOX
   ============================================================ */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 300px;
  gap: 14px;
}

.gallery-item--large { grid-column: span 2; grid-row: span 2; }
.gallery-item--wide  { grid-column: span 2; }

.gallery-item {
  overflow: hidden;
  border-radius: 0;
  background: var(--clr-alt);
}

.gallery-btn {
  display: block;
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
}

.gallery-btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.9s var(--ease);
  filter: grayscale(10%) saturate(0.9);
}

/* Overlay clair — adapté au thème clair */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(28,23,18,0.7) 0%,
    rgba(28,23,18,0.15) 45%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px 22px;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.gallery-caption {
  font-size: var(--fs-xs);
  color: rgba(245,240,232,0.9);
  font-style: italic;
  line-height: 1.4;
  max-width: 75%;
}

.gallery-icon {
  position: absolute;
  bottom: 20px; right: 22px;
  color: rgba(245,240,232,0.85);
}

.gallery-btn:hover img {
  transform: scale(1.07);
  filter: grayscale(0%) saturate(1.05);
}

.gallery-btn:hover .gallery-overlay { opacity: 1; }

/* ── LIGHTBOX ───────────────────────────────────────────────── */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lightbox[hidden] { display: none; }

.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 14, 10, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lightbox-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 92vw;
  max-height: 92vh;
  padding: 20px;
}

.lightbox-media {
  position: relative;
  max-width: 84vw;
  max-height: 88vh;
}

#lightboxImg {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 1px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.75);
  display: block;
}

.lightbox-caption-text {
  margin-top: 14px;
  font-size: var(--fs-xs);
  font-style: italic;
  color: rgba(245,240,232,0.5);
  text-align: center;
}

.lightbox-close,
.lightbox-nav {
  color: rgba(245,240,232,0.8);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(28,23,18,0.3);
  border-color: rgba(28,23,18,0.6);
  color: #F5F0E8;
}

.lightbox-close {
  position: absolute;
  top: -64px; right: 0;
  z-index: 2;
}

#lightbox:not([hidden]) {
  animation: lightboxIn var(--t-base) var(--ease) both;
}
@keyframes lightboxIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================================
   12. MÉDIAS — VIDÉOS & PHOTOS
   ============================================================ */

/* Sous-titres de subsection */
.media-sub-title {
  margin-bottom: 32px;
  margin-top: 72px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.media-sub-title:first-of-type { margin-top: 0; }

.media-sub-title span {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2.5vw, 30px);
  font-style: italic;
  color: var(--clr-ink);
}

/* Filet après le label */
.media-sub-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--clr-rule);
}

/* ── Cards YouTube épurées ── */
.yt-section {
  background: var(--clr-page);
}

.yt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Grille à 2 colonnes pour la section Albums & Singles */
.yt-grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 860px;
  margin-inline: auto;
}

.yt-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--clr-white);
  border: 1px solid var(--clr-rule);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.yt-card:hover {
  box-shadow: 0 12px 40px rgba(28,23,18,0.10);
  transform: translateY(-3px);
}

.yt-thumb-btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0a0a0a;
  cursor: pointer;
}

.yt-thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease), opacity var(--t-base) var(--ease);
  opacity: 0.92;
}

.yt-card:hover .yt-thumb-img {
  transform: scale(1.04);
  opacity: 1;
}

.yt-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0,0,0,0.22);
  transition: background var(--t-fast) var(--ease);
}

.yt-play-icon svg {
  width: 52px; height: 52px;
  background: rgba(0,0,0,0.72);
  border-radius: 50%;
  padding: 14px 12px 14px 16px;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.yt-card:hover .yt-play-icon { background: rgba(0,0,0,0.12); }
.yt-card:hover .yt-play-icon svg {
  background: rgba(28,23,18,0.92);
  transform: scale(1.08);
}

.yt-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}

.yt-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}

.yt-info {
  padding: 20px 22px 24px;
  border-top: 1px solid var(--clr-rule);
}

.yt-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  color: var(--clr-ink);
  line-height: 1.35;
  margin-bottom: 6px;
}

.yt-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

/* Card lien externe (album → YouTube) */
.yt-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Badge "YouTube" coin bas-droit de la miniature */
.yt-ext-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(4px);
  padding: 5px 10px 5px 8px;
  border-radius: 100px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.yt-card--link:hover .yt-ext-badge {
  opacity: 1;
  transform: translateY(0);
}

/* ── CTAs plateformes ─────────────────── */
.yt-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
  flex-wrap: wrap;
}

.platform-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border-radius: 6px;
  background: var(--clr-ink);
  border: 1px solid rgba(255,255,255,0.06);
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,0.82);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              color var(--t-fast) var(--ease);
}

/* Ligne colorée en bas — couleur de la plateforme */
.platform-cta::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}

.platform-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.22);
  color: #fff;
}
.platform-cta:hover::after { transform: scaleX(1); }

.platform-cta-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.platform-cta-sub {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.42);
  text-transform: uppercase;
}

.platform-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity var(--t-fast) var(--ease);
}
.platform-cta:hover .platform-icon { opacity: 1; }

/* YouTube */
.platform-cta--yt::after { background: #FF0000; }
.platform-cta--yt .platform-icon { color: #FF4444; }

/* Spotify */
.platform-cta--sp::after { background: #1DB954; }
.platform-cta--sp .platform-icon { color: #1DB954; }

/* ── Layout cinématique vidéos (legacy) ── */
.videos-cinema {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  margin-bottom: 16px;
  align-items: start;
}

/* Vidéo featured */
.video-featured {
  display: flex;
  flex-direction: column;
  background: #0D0B09;
  border-radius: 6px;
  overflow: hidden;
}

.video-featured-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-featured-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.video-featured-info {
  padding: 24px 28px 28px;
}

.video-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 10px;
}

.video-featured-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  color: #F5F0E8;
  line-height: 1.3;
  margin-bottom: 10px;
}

.video-featured-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(245,240,232,0.5);
}

/* Vidéos secondaires */
.videos-secondary {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.video-secondary {
  background: #141008;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color var(--t-base) var(--ease);
}

.video-secondary:hover {
  border-color: rgba(255,255,255,0.14);
}

.video-secondary-player {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}

.video-secondary-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.video-secondary-info {
  padding: 14px 18px 18px;
}

.video-secondary-info .video-eyebrow {
  margin-bottom: 6px;
}

.video-secondary-info h4 {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  color: rgba(245,240,232,0.8);
  line-height: 1.3;
}

/* Grille photos */
.media-photo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.media-photo-item {
  overflow: hidden;
  border-radius: 0;
  background: var(--clr-alt);
  aspect-ratio: 1;
}

.media-photo-item .gallery-btn {
  width: 100%; height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.media-photo-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), filter var(--t-base) var(--ease);
  display: block;
  filter: saturate(0.88);
}

.media-photo-item:hover img {
  transform: scale(1.08);
  filter: saturate(1.05);
}

.media-photo-item .gallery-overlay {
  position: absolute; inset: 0;
  background: rgba(28,23,18,0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

.media-photo-item .gallery-icon { color: rgba(245,240,232,0.9); }
.media-photo-item:hover .gallery-overlay { opacity: 1; }


/* Vieux styles YouTube conservés (compatibilité) */
.video-thumb-btn { display: block; width: 100%; }
.video-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #0A0806; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-play-btn::before {
  content: '';
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(28,23,18,0.65);
  border: 1.5px solid rgba(28,23,18,0.5);
  position: absolute;
}
.video-play-btn svg { position: relative; z-index: 1; color: var(--clr-gold); margin-left: 3px; }
.video-duration {
  position: absolute; bottom: 10px; right: 12px;
  font-size: 11px; font-weight: 600;
  color: #F5F0E8;
  background: rgba(28,23,18,0.75);
  padding: 2px 7px; border-radius: 2px;
}
.video-iframe-wrapper { position: relative; aspect-ratio: 16/9; }
.video-iframe-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }


/* ============================================================
   13. UNIVERS MUSICAL
   ============================================================ */

.univers-portrait {
  position: relative;
  display: grid;
  grid-template-columns: minmax(72px, 0.22fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(34px, 6vw, 72px) 0;
  border-top: 1px solid var(--clr-rule-gold);
  border-bottom: 1px solid var(--clr-rule-gold);
}

.univers-portrait::before {
  content: '';
  position: absolute;
  inset: 18px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(28,23,18,0.16), transparent);
}

.univers-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.univers-mark span {
  display: block;
  width: 1px;
  height: clamp(170px, 24vw, 310px);
  background: rgba(28,23,18,0.22);
  transform: rotate(8deg);
}

.univers-mark span:nth-child(2) {
  height: clamp(120px, 18vw, 230px);
  margin-inline: 12px;
  opacity: 0.55;
}

.univers-mark span:nth-child(3) {
  height: clamp(78px, 12vw, 160px);
  opacity: 0.3;
}

.univers-copy {
  max-width: 760px;
}

.univers-copy p {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 2;
  color: var(--clr-body);
}

.univers-copy p + p {
  margin-top: 20px;
}

.univers-lead {
  font-family: var(--ff-display);
  font-size: clamp(25px, 3.2vw, 39px) !important;
  font-style: italic;
  line-height: 1.55 !important;
  color: var(--clr-ink) !important;
  padding-bottom: clamp(24px, 4vw, 36px);
  margin-bottom: clamp(24px, 4vw, 38px);
  border-bottom: 1px solid var(--clr-rule);
}

.univers-signature {
  display: inline-block;
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: 22px;
  border-top: 2px solid var(--clr-burgundy);
}

.univers-signature p {
  font-family: var(--ff-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-style: italic;
  line-height: 1.45;
  color: var(--clr-ink);
}

.univers-signature p + p {
  margin-top: 4px;
}


/* ============================================================
   14. ŒUVRES / SCÈNE
   ============================================================ */

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.work-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-rule);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform  var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

.work-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 52px rgba(28,23,18,0.10);
  border-color: rgba(28,23,18,0.2);
}

/* Couverture */
.work-cover {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--clr-alt);
}

.work-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(12%) saturate(0.9);
  transition: transform 0.9s var(--ease), filter var(--t-base) var(--ease);
}

.work-card:hover .work-cover img {
  transform: scale(1.05);
  filter: grayscale(0%) saturate(1.05);
}

.work-overlay {
  position: absolute; inset: 0;
  background: rgba(28,23,18,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.work-overlay span {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.9);
  border: 1px solid rgba(245,240,232,0.4);
  padding: 9px 22px;
}

.work-card:hover .work-overlay { opacity: 1; }

/* Hommage final (badge) */
.work-cover--upcoming {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(28,23,18,0.08), rgba(242,235,224,0.8));
}

.work-upcoming-badge { text-align: center; }

.work-upcoming-badge span {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 58px;
  font-weight: 600;
  color: var(--clr-burgundy);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
  opacity: 0.75;
}

.work-upcoming-badge p {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

/* Informations */
.work-info {
  padding: 20px 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 2px solid transparent;
  transition: border-color var(--t-base) var(--ease);
}

.work-card:hover .work-info {
  border-top-color: var(--clr-burgundy);
}

.work-year {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-burgundy);
  margin-bottom: 8px;
}

.work-title {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--clr-ink);
  margin-bottom: 5px;
  line-height: 1.3;
}

.work-type {
  font-size: 11px;
  color: var(--clr-muted);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.work-desc {
  font-size: 13px;
  line-height: 1.72;
  color: var(--clr-body);
  flex: 1;
}


/* ============================================================
   15. TÉMOIGNAGES
   ============================================================ */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.testimonial {
  background: var(--clr-white);
  border: 1px solid var(--clr-rule);
  border-top: 2px solid transparent;
  padding: 40px 32px 32px;
  position: relative;
  transition:
    border-top-color var(--t-base) var(--ease),
    box-shadow      var(--t-base) var(--ease),
    transform       var(--t-base) var(--ease);
}

.testimonial:hover {
  border-top-color: var(--clr-burgundy);
  box-shadow: 0 12px 40px rgba(28,23,18,0.08);
  transform: translateY(-3px);
}

/* Featured */
.testimonial--featured {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(28,23,18,0.05), rgba(250,248,244,0.6));
  border-color: rgba(28,23,18,0.15);
  border-top-color: var(--clr-burgundy);
}

.testimonial--featured p {
  font-size: clamp(16px, 1.7vw, 20px) !important;
}

/* Grand guillemet */
.testimonial-quote-mark {
  position: absolute;
  top: 14px; left: 24px;
  font-family: var(--ff-display);
  font-size: 88px;
  line-height: 1;
  color: var(--clr-burgundy);
  opacity: 0.13;
  user-select: none;
  pointer-events: none;
}

.testimonial p {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--clr-ink);
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.testimonial footer {
  border-top: 1px solid var(--clr-rule);
  padding-top: 18px;
}

.testimonial footer cite {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.testimonial footer cite strong {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-ink);
}

.testimonial footer cite span {
  font-size: 12px;
  color: var(--clr-muted);
}


/* ============================================================
   16. FOOTER
   ============================================================ */

.footer {
  background: #19120D;
  color: rgba(245,240,232,0.6);
  padding: clamp(64px, 9vw, 108px) 0 44px;
  border-top: 3px solid var(--clr-burgundy);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: 52px;
  margin-bottom: 64px;
}

.footer-name {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(26px, 4vw, 44px);
  color: #F5F0E8;
  font-weight: 400;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.footer-brand .footer-tagline {
  font-size: var(--fs-xs);
  color: rgba(245,240,232,0.35);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Nav footer */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.footer-nav a {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(245,240,232,0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease);
}
.footer-nav a:hover { color: rgba(245,240,232,0.9); }

/* Réseaux sociaux */
.footer-social {
  display: flex;
  gap: 10px;
  padding-top: 4px;
}

.social-link {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245,240,232,0.4);
  border: 1px solid rgba(245,240,232,0.1);
  border-radius: 50%;
  transition:
    color        var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    background   var(--t-fast) var(--ease);
}
.social-link:hover {
  color: #F5F0E8;
  border-color: rgba(28,23,18,0.5);
  background: rgba(28,23,18,0.08);
}

/* Séparateur footer */
.footer-divider {
  height: 1px;
  background: rgba(245,240,232,0.08);
  margin-bottom: 32px;
}

/* Copyright */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: 12px; color: rgba(245,240,232,0.3); }
.footer-credits { font-style: italic; }

/* Contact email (si réactivé) */
.footer-contact {
  text-align: center;
  margin-bottom: 56px;
}
.footer-contact p {
  font-size: var(--fs-xs);
  color: rgba(245,240,232,0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.footer-email {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(20px, 2.8vw, 30px);
  color: var(--clr-gold-light);
  transition: opacity var(--t-fast) var(--ease);
}
.footer-email:hover { opacity: 0.75; }


/* ============================================================
   17. LECTEUR MUSICAL FLOTTANT
   ============================================================ */

/* ============================================================
   ALBUMS & SINGLES — Cards cinématiques
   ============================================================ */

.album-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 900px;
  margin-inline: auto;
}

.album-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--clr-ink);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
  box-shadow: 0 4px 24px rgba(28,23,18,0.12);
}

.album-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(28,23,18,0.22);
}

/* Couverture */
.album-cover {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0a0a0a;
}

.album-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease);
}

.album-card:hover .album-cover img { transform: scale(1.04); }

/* Overlay central au survol */
.album-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  transition: background var(--t-base) var(--ease);
}

.album-card:hover .album-overlay { background: rgba(0,0,0,0.38); }

.album-play-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-ink);
  opacity: 0;
  transform: scale(0.75);
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.album-card:hover .album-play-btn {
  opacity: 1;
  transform: scale(1);
}

.album-play-btn svg { margin-left: 3px; }

/* Badge YouTube bas-gauche */
.album-info-overlay {
  position: absolute;
  bottom: 12px; left: 12px;
}

.album-platform {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: 100px;
}

/* Info titre sous la cover */
.album-meta {
  padding: 18px 20px 20px;
  background: var(--clr-ink);
}

.album-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255,255,255,0.92);
  line-height: 1.3;
  margin-bottom: 5px;
}

.album-sub {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}

@media (max-width: 600px) {
  .album-grid { grid-template-columns: 1fr; gap: 20px; }
}


/* ── Backdrop modal (lecteur musical) ───────────────────── */
.music-backdrop {
  position: fixed;
  inset: 0;
  z-index: 880;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background var(--t-base) var(--ease);
}

.music-backdrop.is-open {
  background: rgba(0,0,0,0.45);
  pointer-events: all;
  backdrop-filter: blur(2px);
}


/* ── Bouton flottant ─────────────────────────────────────── */
.music-fab {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--clr-ink);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(28,23,18,0.32);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
  outline-offset: 3px;
}

.music-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(28,23,18,0.42);
}

.music-fab-icon {
  position: absolute;
  color: rgba(255,255,255,0.9);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── État par défaut : note visible, reste caché ── */
.music-fab-icon--note  { opacity: 1;  transform: scale(1);   }
.music-fab-icon--close { opacity: 0;  transform: scale(0.6); }
.music-fab-icon--eq    { opacity: 0;  transform: scale(0.6); }

/* ── Ouvert, pas de lecture → croix ── */
.music-fab.is-open:not(.is-playing) .music-fab-icon--note  { opacity: 0; transform: scale(0.6); }
.music-fab.is-open:not(.is-playing) .music-fab-icon--close { opacity: 1; transform: scale(1);   }
.music-fab.is-open:not(.is-playing) .music-fab-icon--eq    { opacity: 0; transform: scale(0.6); }

/* ── Lecture en cours (ouvert ou fermé) → égaliseur ── */
.music-fab.is-playing .music-fab-icon--note  { opacity: 0; transform: scale(0.6); }
.music-fab.is-playing .music-fab-icon--close { opacity: 0; transform: scale(0.6); }
.music-fab.is-playing .music-fab-icon--eq    { opacity: 1; transform: scale(1);   }

/* ── Barres égaliseur dans le FAB ── */
.music-fab-icon--eq {
  gap: 3px;
  align-items: flex-end;
  height: 22px;
}

.music-fab-icon--eq i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.9);
  height: 4px;
}

/* Animations des 5 barres — chacune indépendante */
.music-fab.is-playing .music-fab-icon--eq i:nth-child(1) {
  animation: fab-bar 0.7s ease-in-out infinite alternate;
  animation-delay: 0.00s;
  --bar-h: 18px;
}
.music-fab.is-playing .music-fab-icon--eq i:nth-child(2) {
  animation: fab-bar 0.5s ease-in-out infinite alternate;
  animation-delay: 0.15s;
  --bar-h: 10px;
}
.music-fab.is-playing .music-fab-icon--eq i:nth-child(3) {
  animation: fab-bar 0.85s ease-in-out infinite alternate;
  animation-delay: 0.05s;
  --bar-h: 22px;
}
.music-fab.is-playing .music-fab-icon--eq i:nth-child(4) {
  animation: fab-bar 0.62s ease-in-out infinite alternate;
  animation-delay: 0.22s;
  --bar-h: 14px;
}
.music-fab.is-playing .music-fab-icon--eq i:nth-child(5) {
  animation: fab-bar 0.78s ease-in-out infinite alternate;
  animation-delay: 0.10s;
  --bar-h: 8px;
}

@keyframes fab-bar {
  from { height: 3px; }
  to   { height: var(--bar-h, 14px); }
}

/* Dot rouge = lecture en cours */
.music-fab-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e04040;
  border: 2px solid var(--clr-ink);
  opacity: 0;
  transform: scale(0);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.music-fab-dot.active {
  opacity: 1;
  transform: scale(1);
  animation: dot-pulse 1.8s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ── Visualiseur de son ─────────────────────────────────── */
.mp-visualizer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 48px;
  padding: 8px 20px 4px;
  overflow: hidden;
}

.mp-visualizer span {
  display: block;
  width: 3px;
  border-radius: 3px 3px 0 0;
  background: rgba(255,255,255,0.12);
  height: 4px;                         /* hauteur au repos */
  transition: background var(--t-base) var(--ease);
  flex-shrink: 0;
}

/* Lecture en cours — chaque barre s'anime indépendamment */
.music-player.is-playing .mp-visualizer span {
  background: rgba(255,255,255,0.55);
  animation: viz-dance var(--viz-dur, 0.9s) ease-in-out infinite alternate;
}

/* Délais et durées uniques pour chaque barre (30 barres) */
.mp-visualizer span:nth-child(1)  { --viz-dur:0.72s; --viz-h:14px; animation-delay:0.00s; }
.mp-visualizer span:nth-child(2)  { --viz-dur:0.58s; --viz-h:28px; animation-delay:0.06s; }
.mp-visualizer span:nth-child(3)  { --viz-dur:0.83s; --viz-h:38px; animation-delay:0.12s; }
.mp-visualizer span:nth-child(4)  { --viz-dur:0.65s; --viz-h:20px; animation-delay:0.04s; }
.mp-visualizer span:nth-child(5)  { --viz-dur:0.91s; --viz-h:32px; animation-delay:0.18s; }
.mp-visualizer span:nth-child(6)  { --viz-dur:0.54s; --viz-h:40px; animation-delay:0.08s; }
.mp-visualizer span:nth-child(7)  { --viz-dur:0.78s; --viz-h:18px; animation-delay:0.22s; }
.mp-visualizer span:nth-child(8)  { --viz-dur:0.67s; --viz-h:36px; animation-delay:0.10s; }
.mp-visualizer span:nth-child(9)  { --viz-dur:0.88s; --viz-h:44px; animation-delay:0.02s; }
.mp-visualizer span:nth-child(10) { --viz-dur:0.60s; --viz-h:26px; animation-delay:0.16s; }
.mp-visualizer span:nth-child(11) { --viz-dur:0.75s; --viz-h:34px; animation-delay:0.20s; }
.mp-visualizer span:nth-child(12) { --viz-dur:0.50s; --viz-h:42px; animation-delay:0.07s; }
.mp-visualizer span:nth-child(13) { --viz-dur:0.84s; --viz-h:16px; animation-delay:0.14s; }
.mp-visualizer span:nth-child(14) { --viz-dur:0.62s; --viz-h:38px; animation-delay:0.24s; }
.mp-visualizer span:nth-child(15) { --viz-dur:0.95s; --viz-h:30px; animation-delay:0.03s; }
.mp-visualizer span:nth-child(16) { --viz-dur:0.70s; --viz-h:22px; animation-delay:0.19s; }
.mp-visualizer span:nth-child(17) { --viz-dur:0.56s; --viz-h:40px; animation-delay:0.11s; }
.mp-visualizer span:nth-child(18) { --viz-dur:0.80s; --viz-h:12px; animation-delay:0.25s; }
.mp-visualizer span:nth-child(19) { --viz-dur:0.64s; --viz-h:36px; animation-delay:0.05s; }
.mp-visualizer span:nth-child(20) { --viz-dur:0.74s; --viz-h:28px; animation-delay:0.15s; }
.mp-visualizer span:nth-child(21) { --viz-dur:0.87s; --viz-h:20px; animation-delay:0.21s; }
.mp-visualizer span:nth-child(22) { --viz-dur:0.53s; --viz-h:44px; animation-delay:0.09s; }
.mp-visualizer span:nth-child(23) { --viz-dur:0.79s; --viz-h:32px; animation-delay:0.17s; }
.mp-visualizer span:nth-child(24) { --viz-dur:0.61s; --viz-h:18px; animation-delay:0.23s; }
.mp-visualizer span:nth-child(25) { --viz-dur:0.93s; --viz-h:38px; animation-delay:0.01s; }
.mp-visualizer span:nth-child(26) { --viz-dur:0.68s; --viz-h:24px; animation-delay:0.13s; }
.mp-visualizer span:nth-child(27) { --viz-dur:0.57s; --viz-h:40px; animation-delay:0.26s; }
.mp-visualizer span:nth-child(28) { --viz-dur:0.82s; --viz-h:16px; animation-delay:0.08s; }
.mp-visualizer span:nth-child(29) { --viz-dur:0.66s; --viz-h:34px; animation-delay:0.18s; }
.mp-visualizer span:nth-child(30) { --viz-dur:0.76s; --viz-h:28px; animation-delay:0.12s; }

@keyframes viz-dance {
  from { height: 4px; }
  to   { height: var(--viz-h, 20px); }
}

/* ── Popup en lecture — glow + fond animé ───────────────── */
.music-player {
  /* déjà défini — on ajoute les custom props pour l'animation */
}

.music-player.is-playing {
  box-shadow:
    0 24px 64px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 32px rgba(255,255,255,0.04);
  animation: player-glow 3s ease-in-out infinite;
}

@keyframes player-glow {
  0%, 100% {
    box-shadow:
      0 24px 64px rgba(0,0,0,0.55),
      0 0 0 1px rgba(255,255,255,0.06),
      0 0 28px rgba(255,255,255,0.03);
  }
  50% {
    box-shadow:
      0 28px 72px rgba(0,0,0,0.6),
      0 0 0 1px rgba(255,255,255,0.12),
      0 0 48px rgba(255,255,255,0.07);
  }
}

/* Fond dégradé qui respire */
.music-player::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%,
    rgba(255,255,255,0.04) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 0;
}

.music-player.is-playing::before {
  opacity: 1;
  animation: bg-breathe 3s ease-in-out infinite;
}

.music-player > * { position: relative; z-index: 1; }

@keyframes bg-breathe {
  0%, 100% { opacity: 0.6; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(1.05); }
}

/* Barre de progression — couleur vive en lecture */
.music-player.is-playing .mp-progress-fill {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 8px rgba(255,255,255,0.3);
}

/* Bouton play — pulse en lecture */
.music-player.is-playing .mp-btn--play {
  animation: play-pulse 2.4s ease-in-out infinite;
}

@keyframes play-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.12); }
  50%       { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}

/* ── Popup lecteur ───────────────────────────────────────── */
.music-player {
  position: fixed;
  bottom: 96px;
  right: 32px;
  z-index: 890;
  width: 340px;
  background: #17120E;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  overflow: hidden;

  /* État fermé */
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
  transform-origin: bottom right;
}

.music-player.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* ── En-tête ─────────────────────────────────────────────── */
.mp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 0;
}

.mp-eyebrow {
  font-family: var(--ff-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  margin-bottom: 4px;
}

.mp-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.mp-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 2px;
}

/* Toggle On/Off */
.mp-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.mp-toggle-label {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  transition: color var(--t-fast) var(--ease);
}

.mp-toggle[aria-pressed="true"] .mp-toggle-label { color: rgba(255,255,255,0.75); }

.mp-toggle-track {
  position: relative;
  width: 32px; height: 18px;
  background: rgba(255,255,255,0.12);
  border-radius: 100px;
  transition: background var(--t-fast) var(--ease);
  flex-shrink: 0;
}

.mp-toggle[aria-pressed="true"] .mp-toggle-track { background: rgba(255,255,255,0.35); }

.mp-toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.mp-toggle[aria-pressed="true"] .mp-toggle-thumb {
  transform: translateX(14px);
  background: #fff;
}

/* Bouton fermer */
.mp-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  flex-shrink: 0;
}

.mp-close:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* ── Barre de progression ───────────────────────────────── */
.mp-progress-wrap { padding: 18px 20px 0; }

.mp-progress-bar {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 100px;
  cursor: pointer;
}

.mp-progress-fill {
  height: 100%;
  border-radius: 100px;
  background: rgba(255,255,255,0.7);
  width: 0%;
  pointer-events: none;
  transition: width 0.25s linear;
}

.mp-progress-seek {
  position: absolute;
  inset: -6px 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  height: 16px;
  margin: 0;
}

.mp-time {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--ff-body);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
}

/* ── Contrôles lecture ──────────────────────────────────── */
.mp-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px 16px;
}

.mp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255,255,255,0.65);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.mp-btn:hover { background: rgba(255,255,255,0.12); color: #fff; transform: scale(1.06); }

.mp-btn--prev,
.mp-btn--next { width: 36px; height: 36px; }

.mp-btn--play {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 0;
}

.mp-btn--play:hover { background: rgba(255,255,255,0.22); }

.mp-volume {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.mp-btn--mute { width: 28px; height: 28px; background: none; }

.mp-volume-slider {
  width: 52px;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 100px;
  cursor: pointer;
  outline: none;
}

.mp-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  cursor: pointer;
}

/* ── Liste des morceaux ─────────────────────────────────── */
.mp-tracklist {
  border-top: 1px solid rgba(255,255,255,0.06);
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.mp-tracklist::-webkit-scrollbar { width: 4px; }
.mp-tracklist::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.mp-tracklist-label {
  padding: 10px 20px 6px;
  font-family: var(--ff-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
}

.mp-tracks {
  list-style: none;
  padding: 0 0 10px;
}

.mp-track {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  border-radius: 0;
}

.mp-track:hover { background: rgba(255,255,255,0.05); }
.mp-track:focus { outline: 2px solid rgba(255,255,255,0.2); outline-offset: -2px; }

.mp-track.is-active { background: rgba(255,255,255,0.08); }

.mp-track-num {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.2);
  width: 18px;
  flex-shrink: 0;
  transition: color var(--t-fast) var(--ease);
}

.mp-track.is-active .mp-track-num { color: rgba(255,255,255,0.0); }

.mp-track-name {
  flex: 1;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast) var(--ease);
}

.mp-track.is-active .mp-track-name { color: rgba(255,255,255,0.92); }

/* Barres animées (affiché uniquement quand actif + en lecture) */
.mp-track-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

.mp-track.is-active .mp-track-bars { opacity: 1; }

.mp-track-bars i {
  display: block;
  width: 2px;
  background: rgba(255,255,255,0.55);
  border-radius: 1px;
  animation: none;
}

.mp-track.is-active.is-playing .mp-track-bars i {
  animation: bar-dance 0.8s ease-in-out infinite;
}

.mp-track-bars i:nth-child(1) { height: 8px;  animation-delay: 0s; }
.mp-track-bars i:nth-child(2) { height: 14px; animation-delay: 0.18s; }
.mp-track-bars i:nth-child(3) { height: 5px;  animation-delay: 0.36s; }

.mp-track.is-active:not(.is-playing) .mp-track-bars i {
  height: 4px !important;
}

@keyframes bar-dance {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(0.3); }
}

/* ── Désactivé (toggle off) ─────────────────────────────── */
.music-player.is-disabled .mp-controls,
.music-player.is-disabled .mp-progress-wrap,
.music-player.is-disabled .mp-tracklist {
  opacity: 0.3;
  pointer-events: none;
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 520px) {
  .music-player {
    right: 16px;
    bottom: 88px;
    width: calc(100vw - 32px);
    max-width: 340px;
  }
  .music-fab {
    bottom: 24px;
    right: 16px;
  }
}


/* ============================================================
   18. ANIMATIONS & REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

.reveal-hero {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}
.reveal-hero.revealed { opacity: 1; transform: translateY(0); }

.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.26s; }
.delay-3 { transition-delay: 0.42s; }
.delay-4 { transition-delay: 0.60s; }

.reveal-left {
  opacity: 0; transform: translateX(-28px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal-left.revealed { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0; transform: translateX(28px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal-right.revealed { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-hero, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #reading-progress { display: none; }
  .hero-ambient { animation: none; }
}


/* ============================================================
   18. RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .videos-cinema    { grid-template-columns: 1fr; }
  .videos-secondary { flex-direction: row; }
  .video-secondary  { flex: 1; }
  .media-photo-grid { grid-template-columns: repeat(4, 1fr); }
  .works-grid       { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial--featured { grid-column: span 2; }
  .footer-top       { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  .bio-block,
  .bio-block--reverse,
  .bio-block--three {
    grid-template-columns: 1fr;
  }
  .bio-block--reverse .bio-block-text,
  .bio-block--reverse .bio-block-img { order: unset; }
  .bio-block-img { max-width: 400px; }

  .nav-fullname { display: none; }
  .nav-badge    { display: none; }

  .univers-portrait {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .univers-mark {
    justify-content: flex-start;
    min-height: 28px;
  }

  .univers-mark span {
    width: clamp(80px, 22vw, 140px);
    height: 1px;
    transform: none;
  }

  .univers-mark span:nth-child(2) {
    width: clamp(48px, 14vw, 92px);
    height: 1px;
    margin-inline: 10px;
  }

  .univers-mark span:nth-child(3) {
    width: clamp(28px, 9vw, 56px);
    height: 1px;
  }
}

@media (max-width: 768px) {
  .nav-burger { display: flex; }

  .nav-links {
    position: fixed; inset: 0;
    background: rgba(250, 248, 244, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
    z-index: 800;
  }
  .nav-links.open { opacity: 1; pointer-events: all; }
  .nav-links a { font-size: 16px; color: var(--clr-ink); }

  .partitions-grid { grid-template-columns: repeat(2, 1fr); }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
  }
  .gallery-item--large { grid-column: span 2; grid-row: span 1; }
  .gallery-item--wide  { grid-column: span 2; }

  .media-photo-grid { grid-template-columns: repeat(3, 1fr); }

  .works-grid { grid-template-columns: 1fr; }

  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonial--featured { grid-column: span 1; }

  #hero::before, #hero::after { display: none; }

  /* Hero — cadrer sur le côté droit de la photo (visage) sur mobile */
  .hero-bg {
    background-position: 78% center;
  }

  /* Vidéos YouTube — 1 colonne sur mobile */
  .yt-grid { grid-template-columns: 1fr; }

  /* Bio — empiler les colonnes */
  .bio-block,
  .bio-block--reverse {
    grid-template-columns: 1fr;
  }
  .bio-block--reverse .bio-block-text { order: 1; }
  .bio-block--reverse .bio-block-img  { order: 2; }

  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 900px) {
  /* Vidéos YouTube — 2 colonnes sur tablette */
  .yt-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .partitions-grid { grid-template-columns: 1fr; }
  .videos-secondary { flex-direction: column; }

  .nav-brand-sep, .nav-fullname, .nav-badge { display: none; }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
  }
  .gallery-item--large,
  .gallery-item--wide { grid-column: span 1; grid-row: span 1; }

  .media-photo-grid { grid-template-columns: repeat(2, 1fr); }

  .bio-pullquote { padding: 28px 28px 28px 36px; }
}