:root{
  /* Couleurs logo */
  --navy:#1D2F43;
  --navy-2:#0f1c2a;
  --gold:#AF9252;
  --gold-2:#97742D;

  /* Thème clair */
  --paper:#F6F3EC;          /* crème */
  --paper-2:#FFFFFF;        /* blanc */
  --ink:#10161d;            /* texte principal */
  --muted:#5f6b74;          /* texte secondaire */
  --line:rgba(29,47,67,.12);

  --radius-xl: 22px;
  --radius-lg: 16px;
  --shadow: 0 14px 45px rgba(13,18,25,.10);
  --shadow-soft: 0 12px 30px rgba(13,18,25,.08);
}

html{
  height: 100%;
  background: var(--paper); /* fallback si le calque ne se charge pas */
}

body{
  min-height: 100vh;   /* fallback */
  min-height: 100svh;  /* stable sur mobile (évite les sauts de barre d’adresse) */
  min-height: 100dvh;  /* dynamique si supporté */
  margin: 0;

  /* ✅ le fond ne doit PLUS être sur body */
  background: transparent !important;

  position: relative;
  isolation: isolate; /* assure le z-index du ::before */
  color: var(--ink);
}

/* Calque de fond fixe */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;

  /* Ton fond (reprends exactement tes gradients ici si tu veux) */
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(175,146,82,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(29,47,67,.12), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, #ffffff 60%, var(--paper) 100%);

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;

  /* petit + perf/anti-jitter sur certains mobiles */
  transform: translateZ(0);
  will-change: transform;
}

/* évite l'effet “flash blanc” pendant l’overscroll sur certains devices */
@supports (-webkit-touch-callout: none){
  body{ -webkit-overflow-scrolling: touch; }
}

a{ color:inherit; }
a:hover{ opacity:.92; }

.brand-font{ font-family: Cinzel, ui-serif, Georgia, serif; letter-spacing:.2px; }
.serif{ font-family: "Cormorant Garamond", ui-serif, Georgia, serif; }

.small-muted{ color: var(--muted); font-size: 13px; }

/* Navbar claire */
.navbar{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--line);
}
.navbar .nav-link{ color: rgba(16,22,29,.75); font-weight:600; }
.navbar .nav-link:hover{ color: rgba(16,22,29,1); }

/* Pills / badges */
.badge-gold{
  background: rgba(175,146,82,.14);
  color: var(--navy);
  border: 1px solid rgba(175,146,82,.35);
}

.btn-gold{
  background: linear-gradient(180deg, #B7964B 0%, #8E6B25 100%);
  border: 0;
  color: #ffffff !important;
  font-weight: 900;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(175,146,82,.22);
  text-shadow: 0 1px 0 rgba(0,0,0,.22); /* petit premium */
}
.btn-gold:hover{ filter: brightness(1.03); color:#fff; }


.btn-outline-ghost{
  border: 1px solid rgba(29,47,67,.18);
  background: rgba(255,255,255,.65);
  color: rgba(16,22,29,.88);
  border-radius: 14px;
}
.btn-outline-ghost:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(29,47,67,.28);
}

/* Hero claire */
.hero{
  padding: clamp(48px, 7vw, 84px) 0 32px;
}
.hero-card{
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(246,243,236,.75));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-card .inner{ padding: clamp(18px, 3vw, 28px); }

.hero-logo{
  width: min(640px, 100%);
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(13,18,25,.12));
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
}

/* Sections */
.section{ padding: 54px 0; }
.section-title{
  font-size: clamp(24px, 3.1vw, 36px);
  font-weight: 950;
  line-height: 1.05;
  color: var(--navy);
}
.section-subtitle{ color: rgba(16,22,29,.70); margin-top: 10px; }

/* Cards claires */
.card-glass{
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.80);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

/* Player clair */
.player{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.player .np{ font-weight: 950; color: var(--navy); }
.player .meta{ color: rgba(16,22,29,.65); font-size: 14px; }

.icon-btn{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(29,47,67,.18);
  background: rgba(255,255,255,.9);
  display:grid;
  place-items:center;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
  color: var(--navy);
}
.icon-btn:hover{
  background: rgba(246,243,236,.85);
  border-color: rgba(29,47,67,.28);
}
.icon-btn:active{ transform: translateY(1px); }

.range{ accent-color: var(--gold); }

hr.soft{ border-color: rgba(29,47,67,.14); opacity:1; }

/* Programme */
.program-pill{
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(29,47,67,.14);
  background: rgba(246,243,236,.55);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.program-pill.active{
  border-color: rgba(175,146,82,.45);
  background: rgba(175,146,82,.14);
}
.program-pill strong{ font-weight: 950; color: var(--navy); }

/* Table claire */
.table-darkish{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(29,47,67,.04);
  --bs-table-hover-bg: rgba(29,47,67,.06);
  --bs-table-color: rgba(16,22,29,.92);
  --bs-table-border-color: rgba(29,47,67,.12);
}

/* Visualizer clair */
#viz{
  width: 100%;
  height: 56px;
  border-radius: 14px;
  background:
    radial-gradient(120px 40px at 25% 30%, rgba(175,146,82,.20), transparent 60%),
    linear-gradient(180deg, rgba(29,47,67,.04), rgba(29,47,67,.02));
  border: 1px solid rgba(29,47,67,.14);
}

/* Footer clair */
footer{
  border-top: 1px solid var(--line);
  padding: 26px 0 40px;
  color: rgba(16,22,29,.70);
  background: rgba(255,255,255,.55);
}

.badge.text-bg-secondary{
  background: rgba(29,47,67,.10) !important;
  color: rgba(29,47,67,.95) !important;
  border: 1px solid rgba(29,47,67,.14) !important;
}

/* FIX: texte header illisible (si des classes text-white traînent) */
.navbar .navbar-brand,
.navbar .navbar-brand span,
.navbar .nav-link{
  color: rgba(29,47,67,.90) !important; /* navy */
}

.navbar .nav-link:hover{
  color: rgba(29,47,67,1) !important;
}

/* Si ton header/hero avait du texte forcé en blanc */
.hero-card,
.hero-card *{
  color: var(--ink);
}
.hero-card .badge,
.hero-card .btn{
  color: unset; /* évite d’écraser les boutons/badges */
}

/* FIX: lecteur alignement (Play + Stop + Volume sur une ligne) */
.controls{
  display:flex;
  align-items:center;
  gap:12px;
}

.controls-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;  /* ✅ empêche le wrap entre Play et Stop */
}

.controls-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 1 1 auto;  /* ✅ volume prend le reste */
  min-width: 220px;
}

.controls-right .range{
  flex: 1 1 auto;
  min-width: 140px; /* ✅ évite que ça se casse */
}
.modal-fx{
  border-radius: 18px;
  border: 1px solid rgba(29,47,67,.12);
  background: rgba(255,255,255,.92);
}

.modal-fx .modal-header{
  border-bottom: 1px solid rgba(29,47,67,.10);
}

.modal-fx .modal-footer{
  border-top: 1px solid rgba(29,47,67,.10);
}

.table-catalogue{
  font-size: 14px;
}
.table-catalogue thead th{
  color: rgba(29,47,67,.75);
  font-weight: 800;
}
.table-catalogue td{
  color: rgba(16,22,29,.92);
}

/* ==============================
   Pagination OR — uniquement modal
   + Responsive (mobile friendly)
   ============================== */

#musiquesModal .pagination{
  gap: 6px;
  flex-wrap: wrap;               /* ✅ passe à la ligne si besoin */
  justify-content: center;
}

#musiquesModal .pagination .page-item{
  margin: 0;                     /* on gère via gap */
}

#musiquesModal .pagination .page-link{
  color: var(--gold-2);
  border: 1px solid rgba(175,146,82,.38);
  background: rgba(255,255,255,.88);
  border-radius: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 10px 14px;            /* ✅ confortable desktop */
  min-width: 44px;               /* ✅ cible tactile */
  text-align: center;
  box-shadow: 0 6px 14px rgba(13,18,25,.06);
}

#musiquesModal .pagination .page-link:hover{
  color: var(--navy);
  background: rgba(175,146,82,.16);
  border-color: rgba(175,146,82,.60);
}

#musiquesModal .pagination .page-item.active .page-link{
  color: #fff;
  background: linear-gradient(180deg, #B7964B 0%, #8E6B25 100%);
  border-color: rgba(175,146,82,.70);
  box-shadow: 0 10px 18px rgba(175,146,82,.18);
}

#musiquesModal .pagination .page-item.disabled .page-link{
  color: rgba(29,47,67,.35);
  background: rgba(255,255,255,.55);
  border-color: rgba(29,47,67,.12);
  box-shadow: none;
}

/* Mobile: plus compact sans perdre le confort tactile */
@media (max-width: 576px){
  #musiquesModal .pagination{
    gap: 5px;
  }
  #musiquesModal .pagination .page-link{
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14px;
    min-width: 42px;
  }
}

/* Très petit écran: encore plus compact */
@media (max-width: 360px){
  #musiquesModal .pagination .page-link{
    padding: 8px 10px;
    font-size: 13px;
    min-width: 40px;
  }
}

/* Formulaire (premium, cohérent avec card-glass) */
.form-control{
  border-radius: 14px;
  border: 1px solid rgba(29,47,67,.14);
  background: rgba(255,255,255,.85);
  color: rgba(16,22,29,.92);
  padding: 12px 14px;
}
.form-control:focus{
  border-color: rgba(175,146,82,.55);
  box-shadow: 0 0 0 .2rem rgba(175,146,82,.15);
}
.form-label{ font-weight: 800; }
.hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}