/* ============================================
   DEL! — Mix & Mastering Studio
   Main Layout Stylesheet
   ============================================ */

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

/* ---- CSS Custom Properties ---- */
:root {
  --black: #ffffff;
  --dark: #f5f5f5;
  --dark-lighter: #f0f0f0;
  --dark-card: #ffffff;
  --red: #D62828;
  --red-dark: #B71C1C;
  --red-accessible: #B71C1C;
  --red-glow: rgba(214, 40, 40, 0.4);
  --red-glow-subtle: rgba(214, 40, 40, 0.15);
  --white: #1a1a1a;
  --white-muted: rgba(26, 26, 26, 0.7);
  --gray: #4a4a4a;
  --gray-dark: #e0e0e0;
  --gray-border: rgba(0, 0, 0, 0.08);
  --cyan: #0097b2;
  --cyan-glow: rgba(0, 151, 178, 0.4);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --nav-height: 80px;
  --container-max: 1280px;
  --container-padding: 24px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 120px;

  --z-cursor: 9999;
  --z-preloader: 9000;
  --z-mobile-menu: 800;
  --z-nav: 900;
}

/* ---- Base Typography & Body ---- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background-color: var(--black);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  cursor: default;
}

/* ---- Selection ---- */
::selection {
  background: var(--red);
  color: #ffffff;
}

::-moz-selection {
  background: var(--red);
  color: #ffffff;
}

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--black);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-dark);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}

/* Firefox scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-dark) var(--black);
}

/* ---- Utility ---- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

ul {
  list-style: none;
}


/* ============================================
   PRELOADER
   ============================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease-out-expo),
              visibility 0.6s var(--ease-out-expo);
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.preloader__logo {
  display: flex;
  gap: 4px;
}

.preloader__letter {
  font-family: var(--font-display);
  font-size: clamp(48px, 10vw, 96px);
  font-weight: 700;
  color: var(--white);
  opacity: 0;
  transform: translateY(30px);
}

.preloader__letter[data-letter="!"] {
  color: var(--red);
}

.preloader__bar {
  width: 200px;
  height: 3px;
  background: var(--gray-dark);
  border-radius: 2px;
  overflow: hidden;
}

.preloader__bar-fill {
  width: 0%;
  height: 100%;
  background: var(--red);
  border-radius: 2px;
  transition: width 0.3s var(--ease-smooth);
}


/* ============================================
   CUSTOM CURSOR
   ============================================ */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  mix-blend-mode: difference;
}

.cursor__dot {
  width: 6px;
  height: 6px;
  background: var(--white);
  border-radius: 50%;
  position: absolute;
  top: -3px;
  left: -3px;
  transition: transform 0.1s var(--ease-smooth);
}

.cursor__ring {
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(26, 26, 26, 0.3);
  border-radius: 50%;
  position: absolute;
  top: -20px;
  left: -20px;
  transition: width 0.3s var(--ease-out-expo),
              height 0.3s var(--ease-out-expo),
              top 0.3s var(--ease-out-expo),
              left 0.3s var(--ease-out-expo),
              border-color 0.3s var(--ease-out-expo);
}

.cursor.is-hovering .cursor__ring {
  width: 64px;
  height: 64px;
  top: -32px;
  left: -32px;
  border-color: var(--red);
}


/* ============================================
   NAVIGATION
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  transition: background-color 0.4s var(--ease-smooth),
              backdrop-filter 0.4s var(--ease-smooth),
              box-shadow 0.4s var(--ease-smooth);
}

.header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--gray-border);
}

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

.nav__logo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: transform 0.3s var(--ease-out-back);
}

.nav__logo:hover {
  transform: scale(1.05);
}

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

.nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav__link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
  transition: color 0.3s var(--ease-smooth);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.3s var(--ease-out-expo);
}

.nav__link:hover {
  color: var(--red-accessible);
}

.nav__link:hover::after {
  width: 100%;
}

.nav__link--accent,
.mobile-menu__link--accent {
  color: var(--red) !important;
}

/* Bouton Studio (admin) — bulle rouge, texte blanc */
.nav__studio-item .nav__link {
  background: var(--red);
  color: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  transition: background 0.25s var(--ease-smooth);
}
.nav__studio-item .nav__link::after { display: none; }
.nav__studio-item .nav__link:hover {
  color: #fff;
  background: var(--red-dark);
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 32px;
  height: 32px;
  padding: 4px;
}

.nav__hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.3s var(--ease-out-expo),
              opacity 0.3s var(--ease-out-expo);
  transform-origin: center;
}

.nav__hamburger.is-active .nav__hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav__hamburger.is-active .nav__hamburger-line:nth-child(2) {
  opacity: 0;
}

.nav__hamburger.is-active .nav__hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ============================================
   MOBILE MENU OVERLAY
   ============================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-menu);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out-expo),
              visibility 0.4s var(--ease-out-expo);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(40px);
  transition: color 0.3s var(--ease-smooth),
              opacity 0.5s var(--ease-out-expo),
              transform 0.5s var(--ease-out-expo);
}

.mobile-menu.is-open .mobile-menu__link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.3s; }

.mobile-menu__link:hover {
  color: var(--red);
}

.mobile-menu__close {
  position: absolute;
  top: 0;
  right: 0;
  height: var(--nav-height);
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}

.mobile-menu__close:hover {
  color: var(--red);
  transform: rotate(90deg);
}


/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--black);
  width: 100%;
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding-top: calc(var(--nav-height) + 32px);
}

.hero__mascot-wrapper {
  position: relative;
  width: 100%;
  /* Remonte la video pour ne laisser qu'un petit espace tete/titre :
     compense la marge blanche interne de la video (159px/1080 de sa hauteur
     affichee = 8.28vw a 100vw). La video est transparente, le chevauchement
     du cadre avec le titre est invisible. */
  margin-top: calc(14px - 8.28vw);
}

/* Emetteurs de notes : points sans dimension, cales sur les ecouteurs.
   Les notes sont creees dedans en JS (voir initHeroNotes). */
.hero__notes {
  position: absolute;
  top: 36%; /* haut des coussinets, mesuré sur la video 16:9 (hero-loop-v2) */
  width: 0;
  height: 0;
  pointer-events: none;
}

.hero__notes--left {
  left: 43%;
}

.hero__notes--right {
  left: 57%;
}

/* Les notes traversent la tete rouge puis le fond blanc : encre sombre
   + halo clair, sinon elles disparaissent sur l'un ou sur l'autre. */
.hero__note {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  color: var(--white);
  line-height: 1;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
  will-change: transform, opacity;
}

.hero__mascot {
  width: 100vw;
  min-width: 100%;
  height: auto;
  /* Cadre stable avant le chargement des metadonnees video (geometrie de la
     video finale : 1896x1046 apres crops stab + bas + zoom 5px). */
  aspect-ratio: 1896 / 1046;
  display: block;
  /* Recouvre le liseré d'arrondi sous-pixel possible entre le bas de la video
     et la section suivante sur les ecrans a DPR fractionnaire. */
  margin-bottom: -1px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(64px, 15vw, 160px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.hero__title-accent {
  color: var(--red);
  display: inline-block;
}

.hero__subtitle {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white-muted);
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 300;
  font-style: italic;
  color: var(--gray);
  margin-top: 4px;
}


/* Scroll indicator */
.hero__scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.hero__scroll-text {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
}

.hero__scroll-arrow {
  color: var(--gray);
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}


/* ============================================
   HERO — CARTES FLOTTANTES (lecteur + horaires)
   Posees dans les zones vides de part et d'autre de la mascotte.
   ============================================ */
.hero-player,
.hero-schedule {
  position: absolute;
  top: 46%;
  z-index: 0;
  width: 300px;
  padding: 20px;
  background: var(--dark-card);
  border: 1px solid var(--gray-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10);
  opacity: 0;
  animation: heroCardIn 0.9s var(--ease-out-expo) 0.5s forwards;
}

/* Le lecteur est purement decoratif ; les horaires restent lisibles/selectables. */
.hero-player {
  left: clamp(24px, 6vw, 96px);
  pointer-events: none;
}

.hero-schedule {
  right: clamp(24px, 6vw, 96px);
  animation-delay: 0.65s;
}

@keyframes heroCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 0.92; transform: none; }
}

.hero-player__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* Vinyle : disque noir, sillons, pastille rouge */
.hero-player__disc {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--red) 0 18%, #111 18% 22%, transparent 22%),
    repeating-radial-gradient(circle, #1a1a1a 0 2px, #262626 2px 4px);
  animation: heroPlayerSpin 4s linear infinite;
}

.hero-player__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hero-player__track {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-player__artist {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gray);
}

.hero-player__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 44px;
  margin-bottom: 14px;
}

.hero-player__wave span {
  flex: 1;
  height: var(--h);
  min-height: 3px;
  border-radius: 2px;
  background: var(--red);
  opacity: 0.55;
  transform-origin: center;
  animation: heroPlayerPulse 1.1s var(--ease-smooth) infinite alternate;
}

/* Delais decales : les barres ondulent au lieu de battre a l'unisson */
.hero-player__wave span:nth-child(3n)   { animation-delay: -0.20s; animation-duration: 0.9s; }
.hero-player__wave span:nth-child(3n+1) { animation-delay: -0.55s; animation-duration: 1.3s; }
.hero-player__wave span:nth-child(3n+2) { animation-delay: -0.85s; }
.hero-player__wave span:nth-child(4n)   { animation-delay: -0.40s; animation-duration: 1.5s; }

.hero-player__bar {
  height: 3px;
  border-radius: 2px;
  background: var(--gray-dark);
  overflow: hidden;
}

/* 228s = 3:48, la duree affichee. Le compteur est resynchronise en JS. */
.hero-player__bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--red);
  animation: heroPlayerProgress 228s linear infinite;
}

.hero-player__time {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--gray);
}

@keyframes heroPlayerSpin {
  to { transform: rotate(360deg); }
}

@keyframes heroPlayerPulse {
  from { transform: scaleY(0.4); }
  to   { transform: scaleY(1); }
}

@keyframes heroPlayerProgress {
  from { width: 0; }
  to   { width: 100%; }
}

/* ---- Lecteur a l'arret : studio ferme, donc aucune session en cours ---- */
.hero-player.is-idle .hero-player__disc {
  animation-play-state: paused;
  filter: grayscale(1);
  opacity: 0.5;
}

.hero-player.is-idle .hero-player__wave span {
  height: 3px;
  background: var(--gray-dark);
  opacity: 1;
  animation: none;
  transform: none;
}

.hero-player.is-idle .hero-player__bar span {
  width: 0;
  animation: none;
}

.hero-player.is-idle .hero-player__duration {
  visibility: hidden;
}


/* ---- Carte horaires ---- */
.hero-schedule__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--gray-border);
}

.hero-schedule__state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}

.hero-schedule__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d13c3c;
  box-shadow: 0 0 0 0 rgba(209, 60, 60, 0.45);
}

/* Vert + halo pulsant uniquement quand le studio est ouvert */
.hero-schedule__state.is-open .hero-schedule__dot {
  background: #1faa59;
  box-shadow: 0 0 0 0 rgba(31, 170, 89, 0.45);
  animation: heroSchedulePing 2.2s ease-out infinite;
}

.hero-schedule__note {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--gray);
  white-space: nowrap;
}

.hero-schedule__days,
.hero-schedule__resume {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-schedule__days li,
.hero-schedule__resume li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--gray);
}

.hero-schedule__days li.is-closed span:last-child,
.hero-schedule__resume li.is-closed span:last-child {
  color: #b6b6b6;
}

/* La liste des 7 jours cede la place au resume sous 1024px (responsive.css) */
.hero-schedule__resume {
  display: none;
}

.hero-schedule__days li.is-today {
  font-weight: 600;
  color: var(--white);
}

.hero-schedule__days li.is-today span:first-child::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 2px;
  background: var(--red);
}

@keyframes heroSchedulePing {
  70%  { box-shadow: 0 0 0 7px rgba(31, 170, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 170, 89, 0); }
}


/* ============================================
   SERVICE HERO IMAGE
   ============================================ */
.service-hero__image-wrapper {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.service-hero__image {
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* ============================================
   SECTION HEADER (Shared)
   ============================================ */
.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-header__label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red-accessible);
  margin-bottom: 12px;
}

.section-header__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.section-header__line {
  width: 120px;
  height: 3px;
  background: var(--red);
  margin: 24px auto 0;
  border-radius: 2px;
}


/* ============================================
   SERVICES SECTION
   ============================================ */
.services {
  padding: 120px 0;
  position: relative;
  background: var(--dark);
}

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

/* Service Card */
.service-card {
  position: relative;
  background: var(--dark-card);
  border: 1px solid var(--gray-border);
  border-radius: 20px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out-expo),
              border-color 0.4s var(--ease-smooth);
}

.service-card:hover {
  border-color: rgba(214, 40, 40, 0.2);
  transform: translateY(-4px);
}

.service-card__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 30%, rgba(214, 40, 40, 0.25), transparent 80%);
  transition: opacity 0.4s var(--ease-smooth);
  pointer-events: none;
}

.service-card:hover .service-card__glow {
  opacity: 1;
}

.service-card__icon {
  width: 64px;
  height: 64px;
  color: var(--red);
}

.service-card__icon svg {
  width: 100%;
  height: 100%;
}

.service-card__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.service-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.service-card__price-value {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--red);
  line-height: 1;
}

.service-card__price-unit {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--gray);
}

.service-card__description {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--white-muted);
  max-width: 320px;
}

.service-card__cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--red-accessible);
  background-color: var(--black);
  padding: 12px 24px;
  border: 1px solid rgba(214, 40, 40, 0.3);
  border-radius: 50px;
  transition: background-color 0.3s var(--ease-smooth),
              border-color 0.3s var(--ease-smooth),
              transform 0.3s var(--ease-out-back);
}

.service-card__cta:hover {
  background-color: var(--red);
  border-color: var(--red);
  color: #ffffff;
  transform: scale(1.03);
}

.service-card__cta svg {
  transition: transform 0.3s var(--ease-out-expo);
}

.service-card__cta:hover svg {
  transform: translateX(6px);
}

.service-card__cta:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.magnetic-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}


/* ============================================
   PROJECTS SECTION
   ============================================ */
.projects {
  padding: 120px 0;
  position: relative;
}

/* Filter Bar */
.projects__filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.filter-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 50px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  color: var(--gray);
  transition: all 0.3s var(--ease-smooth);
}

.filter-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

.filter-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

/* Projects Grid */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

/* Project Card */
.project-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--dark-card);
  border: 1px solid var(--gray-border);
  transition: transform 0.4s var(--ease-out-expo),
              border-color 0.4s var(--ease-smooth);
}

.project-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 0, 0, 0.12);
}

.project-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.project-cover__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.15);
  background: var(--dark);
}

.project-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo);
}

.project-card:hover .project-cover img,
.project-card:hover .project-cover__placeholder {
  transform: scale(1.05);
}

.project-cover__placeholder {
  transition: transform 0.6s var(--ease-out-expo);
}

/* Project Overlay */
.project-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth);
}

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

.platform-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.platform-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transition: background-color 0.3s var(--ease-smooth),
              transform 0.3s var(--ease-out-back);
  opacity: 0;
  transform: translateY(12px);
}

.project-card:hover .platform-link {
  opacity: 1;
  transform: translateY(0);
}

.project-card:hover .platform-link:nth-child(1) { transition-delay: 0.05s; }
.project-card:hover .platform-link:nth-child(2) { transition-delay: 0.1s; }
.project-card:hover .platform-link:nth-child(3) { transition-delay: 0.15s; }
.project-card:hover .platform-link:nth-child(4) { transition-delay: 0.2s; }

.platform-link svg {
  width: 20px;
  height: 20px;
}

.platform-link.spotify:hover   { background: #1DB954; }
.platform-link.apple:hover     { background: #fc3c44; }
.platform-link.youtube:hover   { background: #FF0000; }
.platform-link.soundcloud:hover { background: #ff5500; }

/* Project Info */
.project-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  width: fit-content;
}

.badge-mix {
  background: rgba(214, 40, 40, 0.1);
  color: var(--red);
  border: 1px solid rgba(214, 40, 40, 0.25);
}

.badge-mastering {
  background: rgba(0, 151, 178, 0.1);
  color: var(--cyan);
  border: 1px solid rgba(0, 151, 178, 0.25);
}

.badge-mix-master {
  background: linear-gradient(135deg, rgba(214, 40, 40, 0.1), rgba(0, 151, 178, 0.1));
  color: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.project-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.project-artist {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray);
}


/* ============================================
   SONS SLIDER (pages mix / mastering)
   Defilement continu des projets du portfolio, filtres par service.
   Contenu genere par scripts/build-projets.mjs — deux series identiques,
   la piste glisse de -50% en boucle pour un defilement sans couture.
   ============================================ */
.sons-slider {
  padding: 100px 0;
  background: var(--dark);
  overflow: hidden;
}

.sons-slider__fenetre {
  margin-top: 48px;
  overflow: hidden;
  /* les cartes apparaissent/disparaissent en fondu aux bords de l'ecran */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sons-slider__defilant {
  display: flex;
  width: max-content;
  animation: sonsDefile var(--duree, 40s) linear infinite;
  will-change: transform;
}

.sons-slider__fenetre:hover .sons-slider__defilant {
  animation-play-state: paused;
}

.sons-slider__serie {
  display: flex;
  gap: 24px;
  padding-right: 24px; /* espace entre la fin d'une serie et le debut de l'autre */
}

.son-carte {
  display: block;
  width: clamp(150px, 18vw, 210px);
  flex-shrink: 0;
  text-decoration: none;
}

.son-carte__cover {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--gray-border);
  background: var(--dark-lighter);
}

.son-carte__cover img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s var(--ease-out-expo);
}

.son-carte:hover .son-carte__cover img {
  transform: scale(1.06);
}

.son-carte__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.3s;
}

.son-carte:hover .son-carte__play {
  opacity: 1;
}

.son-carte__play svg {
  width: 36px;
  height: 36px;
}

.son-carte__titre {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.son-carte__artiste {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gray);
}

.sons-slider__cta {
  margin-top: 40px;
  text-align: center;
}

.sons-slider__lien {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--red-accessible);
  text-decoration: none;
}

.sons-slider__lien:hover {
  text-decoration: underline;
}

@keyframes sonsDefile {
  to { transform: translateX(-50%); }
}

/* Sans animation, le doublon est inutile : on rend la piste scrollable */
@media (prefers-reduced-motion: reduce) {
  .sons-slider__defilant {
    animation: none;
  }

  .sons-slider__fenetre {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .sons-slider__serie[data-doublon] {
    display: none;
  }
}


/* ============================================
   CONTACT SECTION
   ============================================ */
.contact {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.contact .container {
  position: relative;
  z-index: 1;
}

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "about photo"
    "info  photo";
  align-items: center;
  gap: 56px 80px;
  position: relative;
  z-index: 2;
}

.contact__about { grid-area: about; align-self: end; }
.contact__info  { grid-area: info;  align-self: start; }
.contact__photo { grid-area: photo; }

.contact__about .section-header {
  text-align: left;
}

.contact__about .section-header__line {
  margin: 24px 0 0;
}

.contact__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--white-muted);
  margin-top: 32px;
  max-width: 480px;
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact__label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 12px;
}

.contact__email-link {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 500;
  transition: color 0.3s var(--ease-smooth);
  cursor: pointer;
  position: relative;
  z-index: 3;
}

.contact__email-link:hover {
  color: var(--red);
}

.contact__social-links {
  display: flex;
  gap: 16px;
}

.contact__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--gray-border);
  color: var(--gray);
  transition: background-color 0.3s var(--ease-smooth),
              border-color 0.3s var(--ease-smooth),
              transform 0.3s var(--ease-out-back);
}

.contact__social-link:hover {
  background-color: var(--red);
  border-color: var(--red);
  color: #ffffff;
  transform: scale(1.1);
}

.contact__social-link svg {
  width: 22px;
  height: 22px;
}

/* CTA Button */
.contact__cta {
  margin-top: 16px;
}

.magnetic-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 48px;
  border-radius: 60px;
  overflow: hidden;
  border: 2px solid var(--red);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out-back);
}

.magnetic-btn:hover {
  transform: scale(1.03);
}

.magnetic-btn__text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red-accessible);
  transition: color 0.4s var(--ease-smooth);
}

.magnetic-btn:hover .magnetic-btn__text {
  color: #ffffff;
}

.magnetic-btn__bg {
  position: absolute;
  inset: 0;
  background: var(--red);
  border-radius: 60px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out-expo);
}

.magnetic-btn:hover .magnetic-btn__bg {
  transform: scaleX(1);
}

/* Variante pleine : fond rouge, texte blanc dès le repos (hover = rouge foncé) */
.magnetic-btn--filled {
  background: var(--red);
}

.magnetic-btn--filled:hover {
  border-color: var(--red-dark);
}

.magnetic-btn--filled .magnetic-btn__text {
  color: #ffffff;
}

.magnetic-btn--filled .magnetic-btn__bg {
  background: var(--red-dark);
}

/* Contact — photo du studio (carte avec offset rouge signature) */
.contact__photo {
  position: relative;
  width: 100%;
}

.contact__photo::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: var(--red);
  border-radius: 20px;
  z-index: 0;
}

.contact__photo-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1238 / 758; /* réserve la hauteur avant le lazy load (CLS + triggers scroll) */
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}


/* ============================================
   FINDER PROMO BAND
   ============================================ */
.finder-promo {
  position: relative;
  padding: 28px 0;
  background: var(--red);
  overflow: visible;
}

/* NEW Badge */
.finder-promo__badge {
  position: absolute;
  top: -18px;
  right: 48px;
  display: inline-block;
  padding: 10px 24px;
  background: #1a1a1a;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 8px;
  transform: rotate(3deg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  z-index: 100;
  animation: badge-pulse 3s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    transform: rotate(3deg) scale(1);
  }
  50% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    transform: rotate(3deg) scale(1.05);
  }
}

.finder-promo__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.finder-promo__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #ffffff;
}

.finder-promo__title-accent {
  opacity: 0.85;
}

.finder-promo__description {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.finder-promo__cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 32px;
  background: #ffffff;
  color: var(--red);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out-back),
              box-shadow 0.3s var(--ease-smooth);
}

.finder-promo__cta:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}


/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 32px 0;
  border-top: 1px solid var(--gray-border);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__left {
  flex: 1;
}

.footer__copyright {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--gray);
  cursor: default;
  transition: color 0.3s var(--ease-smooth);
}

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

.footer__center {
  flex: 1;
  text-align: center;
}

.footer__logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  transition: transform 0.3s var(--ease-out-back);
  display: inline-block;
}

.footer__logo:hover {
  transform: scale(1.1);
}

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

.footer__right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.footer__social-links {
  display: flex;
  gap: 12px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--gray);
  transition: color 0.3s var(--ease-smooth),
              transform 0.3s var(--ease-out-back);
}

.footer__social-link:hover {
  color: var(--red);
  transform: scale(1.15);
}

.footer__social-link svg {
  width: 18px;
  height: 18px;
}


/* ============================================
   UTILITY CLASSES (for JS animations)
   ============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
}

.project-card[data-scroll] {
  opacity: 0;
  transform: translateY(40px);
}

/* Hidden state for filtered-out projects */
.project-card.is-hidden {
  display: none;
}

/* ============================================
   AUTH NAV UI
   ============================================ */
.nav__auth-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__mobile-auth {
  display: none;
}

.nav__link--messages {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__link--messages svg {
  transition: color 0.3s var(--ease-smooth);
}

.nav__link--messages:hover svg {
  stroke: var(--red);
}

.nav__unread-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.nav__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--red);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out-back), box-shadow 0.3s var(--ease-smooth);
}

.nav__avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px var(--red-glow-subtle);
}

.nav__avatar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.nav__avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.nav__logout-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gray-border);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth), transform 0.3s var(--ease-out-back);
}

.nav__logout-btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  transform: scale(1.1);
}

/* ============================================
   ESPACE CLIENT — TRACKS SÉCURISÉS
   Card track + analyseurs + commentaires +
   modal publication + panneau projet
   ============================================ */

/* La bulle contenant une card track devient large et neutre */
.chat__message:has(.chat__track-container) {
  max-width: min(640px, 96%);
  width: 100%;
}
.chat__bubble:has(.chat__track-container) {
  background: #ffffff !important;
  border: 1px solid var(--gray-border) !important;
  padding: 6px 6px 8px !important;
  width: 100%;
}
.chat__bubble:has(.chat__track-container) .chat__time {
  color: var(--gray) !important;
  text-align: right;
  padding-right: 6px;
}
.chat__bubble:has(.chat__track-container) .chat__vu {
  color: var(--gray) !important;
}

/* ---- Card track ---- */
.strack {
  font-family: var(--font-body);
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 14px;
  user-select: none;
  -webkit-user-select: none;
}

.strack-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.strack-badge {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: var(--red);
  border-radius: 6px;
  padding: 3px 8px;
  flex-shrink: 0;
}

.strack-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.strack-duration {
  font-size: 12px;
  color: #777777;
  flex-shrink: 0;
}

.strack-wave {
  position: relative;
  height: 56px;
  cursor: pointer;
  border-radius: 6px;
  overflow: visible;
}

.strack-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.strack-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.strack-pin {
  position: absolute;
  top: -5px;
  width: 11px;
  height: 11px;
  border-radius: 50% 50% 50% 0;
  background: var(--red);
  border: 1.5px solid #ffffff;
  transform: translateX(-50%) rotate(-45deg);
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  transition: transform 0.15s var(--ease-smooth);
}
.strack-pin:hover { transform: translateX(-50%) rotate(-45deg) scale(1.25); }
.strack-pin--resolved { background: #b9b9b9; }

.strack-times {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #777777;
  margin-top: 4px;
}

.strack-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.strack-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--red);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: transform 0.2s var(--ease-out-back);
}
.strack-play:hover { transform: scale(1.07); }
.strack-play:active { transform: scale(0.95); }
.strack-play:disabled { opacity: 0.6; cursor: wait; }

.strack-volume {
  width: 84px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.strack-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
  border: none;
}
.strack-volume::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--red);
  border: none;
  cursor: pointer;
}

.strack-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.strack-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #444444;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), background 0.2s var(--ease-smooth);
}
.strack-btn:hover { border-color: var(--red); color: var(--red); }
.strack-btn--active { background: #1a1a1a; border-color: #1a1a1a; color: #ffffff; }
.strack-btn--active:hover { border-color: #1a1a1a; color: #ffffff; }
.strack-btn:disabled { opacity: 0.5; cursor: wait; }

/* Pilotage livraison (admin) sur la card track */
.strack-btn-deliver--on { color: #0e9f6e; border-color: rgba(16, 185, 129, 0.45); }
.strack-btn-deliver--on:hover { color: #0e9f6e; border-color: #10B981; }

/* ============================================
   CARTE DE PAIEMENT (chat) — PayPal / BTC / SOL
   ============================================ */
/* La bulle porteuse passe en blanc quel que soit l'expéditeur
   (même pattern que la card track) */
.chat__bubble:has(.pmt) {
  background: #ffffff !important;
  border: 1px solid var(--gray-border) !important;
  color: #1a1a1a !important;
  width: min(440px, 100%);
}
.chat__bubble:has(.pmt) .chat__time { color: var(--gray) !important; text-align: right; }
.chat__bubble:has(.pmt) .chat__vu { color: var(--gray) !important; }

.pmt {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pmt__head {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

.pmt__sub {
  font-size: 12.5px;
  color: #777777;
  margin-bottom: 2px;
}

.pmt__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 11px 14px;
  background: #ffffff;
  text-decoration: none;
  transition: border-color 0.2s var(--ease-smooth), background 0.2s var(--ease-smooth);
}

.pmt__option--paypal {
  cursor: pointer;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--red);
  border-color: var(--red);
}
.pmt__option--paypal:hover { background: var(--red-dark); border-color: var(--red-dark); }

.pmt__option--crypto { background: #fafafa; }

.pmt__option-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1a1a;
}
.pmt__option--paypal .pmt__option-name { color: #ffffff; }

.pmt__option-hint {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
}

.pmt__crypto-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pmt__addr {
  font-family: monospace;
  font-size: 11px;
  color: #777777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmt__copy {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #444444;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth);
}
.pmt__copy:hover { border-color: var(--red); color: var(--red); }
.pmt__copy--done { color: #0e9f6e; border-color: rgba(16, 185, 129, 0.45); }

.pmt__foot {
  font-size: 11.5px;
  color: #999999;
  margin-top: 2px;
}

/* Bouton client "J'ai envoyé le paiement" */
.pmt__declare {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth);
}
.pmt__declare:hover { border-color: var(--red); color: var(--red); }
.pmt__declare:disabled { cursor: default; opacity: 0.9; }
.pmt__declare--done { color: #0e9f6e; border-color: rgba(16, 185, 129, 0.45); }
.pmt__declare--done:hover { color: #0e9f6e; border-color: rgba(16, 185, 129, 0.45); }

/* ============================================
   MODALE DE FACTURATION (admin)
   ============================================ */
.bill-back {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.bill {
  width: min(440px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.bill__head {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}

.bill__seg {
  display: flex;
  gap: 8px;
}
.bill__segbtn {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #444444;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth);
}
.bill__segbtn--active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #ffffff;
}

.bill__pane { display: flex; flex-direction: column; gap: 10px; }

.bill__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: #1a1a1a;
}
.bill__row--note { flex-direction: column; align-items: stretch; gap: 6px; }
.bill__row--note span { font-size: 12.5px; color: #777777; }

.bill__input {
  font-family: var(--font-body);
  font-size: 14px;
  color: #1a1a1a;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 9px;
  padding: 9px 11px;
  width: 130px;
}
.bill__row--note .bill__input { width: 100%; }
.bill__input:focus { outline: none; border-color: var(--red); }

.bill__hint { font-size: 12px; color: #999999; }

.bill__lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--gray-border);
  padding-top: 10px;
}
.bill__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: #444444;
}
.bill__linedetail { font-size: 11.5px; color: #999999; }
.bill__lineamt { margin-left: auto; font-weight: 600; color: #1a1a1a; }

.bill__row--total {
  border-top: 1px solid var(--gray-border);
  padding-top: 12px;
  font-weight: 700;
  font-size: 15px;
}
.bill__totalwrap { display: inline-flex; align-items: center; gap: 6px; }
.bill__totalwrap .bill__input { width: 100px; font-weight: 700; }

.bill__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.bill__btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: var(--red);
  border: none;
  border-radius: 9px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s var(--ease-smooth);
}
.bill__btn:hover { background: var(--red-dark); }
.bill__btn--ghost {
  color: #666666;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.14);
}
.bill__btn--ghost:hover { background: #fafafa; color: #1a1a1a; }

/* Détail de la demande de paiement (carte client) */
.pmt__detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  border-top: 1px solid var(--gray-border);
  border-bottom: 1px solid var(--gray-border);
}
.pmt__detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: #555555;
}
.pmt__detail-amt { font-weight: 600; color: #1a1a1a; }
.pmt__detail-note { font-size: 11.5px; color: #999999; font-style: italic; }

/* ============================================
   RÉCAPITULATIF DE PRESTATION (chat)
   ============================================ */
.chat__bubble:has(.inv) {
  background: #ffffff !important;
  border: 1px solid var(--gray-border) !important;
  color: #1a1a1a !important;
  width: min(420px, 100%);
}
.chat__bubble:has(.inv) .chat__time { color: var(--gray) !important; text-align: right; }
.chat__bubble:has(.inv) .chat__vu { color: var(--gray) !important; }

.inv { display: flex; flex-direction: column; gap: 2px; }

.inv__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.inv__brand {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
}
.inv__num { font-size: 12px; color: #999999; font-family: monospace; }
.inv__meta, .inv__client { font-size: 12px; color: #777777; }
.inv__client { margin-bottom: 6px; }

.inv__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #444444;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.inv__lineamt { font-weight: 600; color: #1a1a1a; }
.inv__note { font-size: 12px; color: #999999; font-style: italic; padding: 6px 0; }

.inv__total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: #1a1a1a;
  padding: 10px 0 2px;
}

.inv__items, .inv__legal { font-size: 11.5px; color: #999999; }

.inv__print {
  align-self: flex-start;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #444444;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth);
}
.inv__print:hover { border-color: var(--red); color: var(--red); }

/* Carte-statut "paiement envoyé — en attente de vérification" */
.chat__bubble:has(.pmt-sent) {
  background: #ffffff !important;
  border: 1px solid var(--gray-border) !important;
  color: #1a1a1a !important;
  width: min(360px, 100%);
}
.chat__bubble:has(.pmt-sent) .chat__time { color: var(--gray) !important; text-align: right; }

.pmt-sent {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pmt-sent__head {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.pmt-sent__sub {
  font-size: 12px;
  color: #777777;
}

.strack-locked {
  font-size: 11.5px;
  color: #999999;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Validation de version par le client */
.strack-btn-approve {
  color: #ffffff;
  background: #1a1a1a;
  border-color: #1a1a1a;
}
.strack-btn-approve:hover { background: var(--red); border-color: var(--red); color: #ffffff; }
.strack-btn-approve:disabled { opacity: 0.6; cursor: wait; }

.strack-approved {
  font-size: 11.5px;
  font-weight: 600;
  color: #0e9f6e;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.strack-status {
  font-size: 12px;
  color: #777777;
  margin-top: 8px;
}

/* ---- Commentaires timestampés ---- */
.strack-comment-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.strack-comment-at {
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  flex-shrink: 0;
}

.strack-comment-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  color: #1a1a1a;
}
.strack-comment-input:focus { border-color: var(--red); }

.strack-comment-send {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: var(--red);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}
.strack-comment-send:disabled { opacity: 0.6; }

.strack-comments {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.strack-comment {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  padding: 4px 2px;
}

.strack-comment-time {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.strack-comment-time:hover { text-decoration: underline; }

.strack-comment-text {
  color: #333333;
  line-height: 1.45;
  word-break: break-word;
  flex: 1;
}

.strack-comment--resolved .strack-comment-text {
  color: #a0a0a0;
  text-decoration: line-through;
}
.strack-comment--resolved .strack-comment-time { color: #a0a0a0; }

.strack-comment-resolve {
  font-size: 11px;
  font-weight: 600;
  color: #777777;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.strack-comment-resolve:hover { border-color: var(--red); color: var(--red); }

/* ---- Modal publication (admin) ---- */
.tpub-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-smooth);
}
.tpub-overlay--visible { opacity: 1; pointer-events: auto; }

.tpub-modal {
  width: min(480px, 100%);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  font-family: var(--font-body);
}

.tpub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-border);
}

.tpub-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

.tpub-close {
  background: none;
  border: none;
  color: #999999;
  cursor: pointer;
  padding: 4px;
  display: flex;
}
.tpub-close:hover { color: #1a1a1a; }

.tpub-body { padding: 20px; }

.tpub-drop {
  border: 2px dashed rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  padding: 36px 20px;
  text-align: center;
  color: #777777;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-smooth), background 0.2s var(--ease-smooth);
}
.tpub-drop:hover, .tpub-drop--over {
  border-color: var(--red);
  background: rgba(214, 40, 40, 0.04);
  color: var(--red);
}

.tpub-drop-text {
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
  line-height: 1.5;
}

.tpub-drop-hint {
  font-size: 12px;
  margin-top: 6px;
  opacity: 0.7;
}

.tpub-error {
  margin-top: 12px;
  font-size: 13px;
  color: var(--red);
  line-height: 1.5;
}

.tpub-fileinfo {
  font-size: 13px;
  color: #555555;
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  word-break: break-word;
}
.tpub-fileinfo strong { color: #1a1a1a; }

.tpub-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999999;
  margin-bottom: 12px;
}

.tpub-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  color: #1a1a1a;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  padding: 10px 14px;
  outline: none;
}
.tpub-input:focus { border-color: var(--red); }

.tpub-publish-btn {
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: var(--red);
  border: none;
  border-radius: 10px;
  padding: 13px;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out-back), opacity 0.2s;
}
.tpub-publish-btn:hover { transform: translateY(-1px); }
.tpub-publish-btn:disabled { opacity: 0.6; }

.tpub-progress-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.tpub-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--red);
  border-radius: 4px;
  transition: width 0.25s var(--ease-smooth);
}

.tpub-progress-text {
  margin-top: 10px;
  font-size: 13px;
  color: #555555;
  text-align: center;
}

.tpub-retry-btn {
  display: block;
  margin: 14px auto 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  background: none;
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}
.tpub-retry-btn:hover { background: rgba(214, 40, 40, 0.06); }

/* ---- Pastilles statut sidebar ---- */
.sidebar__status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ---- Responsive (impeccable à 390 px) ---- */
@media (max-width: 480px) {
  .chat__message:has(.chat__track-container) { max-width: 100%; }

  .strack { padding: 10px; }

  .strack-controls { gap: 8px; }
  .strack-volume { width: 64px; }
  .strack-actions { margin-left: 0; width: 100%; }

}

/* Lien légal du footer (RGPD / conformité pub) */
.footer__legal {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gray);
  transition: color 0.3s ease;
}

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