/* ==========================================================
     TOKENS
     ========================================================== */
  :root{
    --bg:            #060507;
    --bg-raised:     #100e14;
    --line:          #262230;
    --text:          #f2eef7;
    --text-dim:      #a79fb3;

    --pink:          #ff2f8f;
    --violet:        #8b3bf0;
    --blue:          #3763ff;

    --grad: linear-gradient(115deg, var(--pink) 0%, var(--violet) 52%, var(--blue) 100%);

    --font-display: 'Michroma', system-ui, sans-serif;
    --font-body:    'Rajdhani', system-ui, sans-serif;

    --wrap: 1180px;
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }

  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  h1,h2,h3{
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
  }

  p{ margin: 0; color: var(--text-dim); }

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

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

  .wrap{
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 24px;
  }

  section{ padding: 96px 0; border-top: 1px solid var(--line); }
  section:first-of-type{ border-top: none; }

  .eyebrow{ display:none; } /* volontairement inutilisé, cf. design brief */

  .section-head{
    max-width: 640px;
    margin-bottom: 56px;
  }
  .section-head h2{
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: 0.01em;
  }
  .section-head p{
    margin-top: 16px;
    font-size: 1.15rem;
    max-width: 60ch;
  }

  .grad-text{
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn:active{ transform: translateY(0); }
  .btn:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }

  .btn-grad{
    background: var(--grad);
    color: #0a0a0c;
  }
  .btn-ghost{
    background: transparent;
    border-color: var(--line);
    color: var(--text);
  }
  .btn-ghost:hover{ border-color: var(--text-dim); }

  /* ==========================================================
     NAV
     ========================================================== */
  header{
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    background: rgba(6,5,7,0);
    border-bottom: 1px solid transparent;
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  header.is-scrolled{
    background: rgba(6,5,7,0.88);
    backdrop-filter: blur(10px);
    border-color: var(--line);
  }
  nav.wrap{
    display:flex;
    align-items:center;
    justify-content: space-between;
    height: 76px;
  }
  .logo{
    display:flex;
    align-items:center;
  }
  .logo img{
    display:block;
    height: 26px;
    width: auto;
  }

  .nav-links{
    display:flex;
    gap: 32px;
    list-style:none;
    margin:0; padding:0;
  }
  .nav-links a{
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--text-dim);
    transition: color 0.15s ease;
  }
  .nav-links a:hover{ color: var(--text); }
  .nav-links a.active{ color: var(--text); border-bottom: 2px solid var(--pink); padding-bottom: 4px; }

  .nav-cta{ display:flex; align-items:center; gap:20px; }

  .nav-toggle{
    display:none;
    background:none; border:none; color:var(--text);
    width: 40px; height: 40px;
    cursor:pointer;
  }
  .nav-toggle span{
    display:block; width: 22px; height: 2px; background: var(--text);
    margin: 5px auto; transition: transform .2s ease, opacity .2s ease;
  }

  @media (max-width: 860px){
    .nav-links{
      position: fixed;
      top: 76px; left:0; right:0;
      flex-direction: column;
      background: rgba(6,5,7,0.98);
      border-bottom: 1px solid var(--line);
      padding: 24px;
      gap: 20px;
      transform: translateY(-8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
    }
    .nav-links.is-open{
      opacity:1; transform: translateY(0); pointer-events:auto;
    }
    .nav-toggle{ display:block; }
    .nav-cta .btn-ghost{ display:none; }
  }

  /* ==========================================================
     HERO
     ========================================================== */
  .hero{
    position: relative;
    min-height: 100svh;
    display:flex;
    flex-direction: column;
    justify-content:center;
    padding-top: 76px;
    overflow: hidden;
    border-top: none;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset: -20% -10% auto -10%;
    height: 140%;
    background:
      radial-gradient(circle at 22% 30%, rgba(255,47,143,0.35), transparent 45%),
      radial-gradient(circle at 78% 15%, rgba(59,99,255,0.30), transparent 40%),
      radial-gradient(circle at 55% 75%, rgba(139,59,240,0.25), transparent 45%);
    filter: blur(40px);
    pointer-events:none;
  }
  .hero-inner{
    position:relative;
    opacity:0;
    transform: translateY(18px);
    animation: rise 0.8s ease forwards 0.15s;
  }
  @keyframes rise{
    to{ opacity:1; transform: translateY(0); }
  }
  .hero-mark{
    display:block;
    line-height: 0;
  }
  .hero-mark img{
    display:block;
    width: min(78vw, 760px);
    height:auto;
  }
  .hero p.lede{
    margin-top: 28px;
    max-width: 62ch;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  }
  .hero-cta{
    display:flex; flex-wrap:wrap; gap:16px;
    margin-top: 40px;
  }
  .hero-meta{
    position:relative;
    display:flex;
    gap: 40px;
    margin-top: 88px;
    flex-wrap: wrap;
  }
  .hero-meta div strong{
    display:block;
    font-family: var(--font-display);
    font-size: 1.6rem;
  }
  .hero-meta div span{
    color: var(--text-dim);
    font-size: 0.95rem;
  }

  /* ==========================================================
     GALERIE
     ========================================================== */
  .gallery-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .gallery-tile{
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    padding: 22px;
    border: 1px solid var(--line);
    background: var(--grad);
    background-size: cover;
    background-position: center;
  }
  .gallery-tile::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 55%, rgba(0,0,0,0.35) 100%);
  }
  .gallery-tile span{
    position:relative;
    z-index:1;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.3;
  }
  .gallery-tile:nth-child(1){ background-image: linear-gradient(160deg, #3a0a2e, #100a2e); }
  .gallery-tile:nth-child(2){ background-image: linear-gradient(160deg, #0a1a3a, #1a0a3a); }
  .gallery-tile:nth-child(3){ background-image: linear-gradient(160deg, #2e0a3a, #0a1030); }
  .gallery-tile:nth-child(4){ background-image: linear-gradient(160deg, #3a0a1c, #0a1c3a); }
  .gallery-tile:nth-child(5){ background-image: linear-gradient(160deg, #120a3a, #3a0a2a); }
  .gallery-tile:nth-child(6){ background-image: linear-gradient(160deg, #0a2a3a, #2a0a3a); }

  @media (max-width: 860px){
    .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 540px){
    .gallery-grid{ grid-template-columns: 1fr; }
  }

  /* ==========================================================
     ALBUM (page individuelle)
     ========================================================== */
  .album-media-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
  .album-media-item{
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 4/3;
    background: var(--bg-raised);
  }
  .album-media-item img, .album-media-item video{
    width: 100%; height: 100%; object-fit: cover; display:block;
  }

  /* ==========================================================
     AGENDA
     ========================================================== */
  .agenda-list{ display:flex; flex-direction: column; }
  .agenda-row{
    display:grid;
    grid-template-columns: 110px 1fr auto;
    align-items:center;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
  }
  .agenda-row:first-child{ border-top: 1px solid var(--line); }
  .agenda-date{
    font-family: var(--font-display);
    line-height: 1;
  }
  .agenda-date .day{ font-size: 2.1rem; display:block; }
  .agenda-date .month{ font-size: 0.95rem; color: var(--text-dim); letter-spacing: 0.08em; }
  .agenda-info h3{ font-size: 1.3rem; font-family: var(--font-body); font-weight:700; }
  .agenda-info p{ margin-top:4px; }
  .agenda-note{
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-top: 20px;
  }

  @media (max-width: 640px){
    .agenda-row{ grid-template-columns: 70px 1fr; }
    .agenda-row .btn{ grid-column: 1 / -1; margin-top: 8px; justify-self:start; }
  }

  /* ==========================================================
     CARTE
     ========================================================== */
  #carte{
    height: 440px;
    border-radius: 16px;
    border: 1px solid var(--line);
    overflow:hidden;
  }
  .leaflet-popup-content-wrapper{
    background: var(--bg-raised);
    color: var(--text);
    border-radius: 10px;
  }
  .leaflet-popup-tip{ background: var(--bg-raised); }
  .leaflet-popup-content a{ color: var(--pink); font-weight:700; }
  .map-note{ margin-top: 18px; }

  /* ==========================================================
     DJS RÉSIDENTS
     ========================================================== */
  .djs-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
  }
  .dj-card{ text-align:left; }
  .dj-photo{
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: var(--grad);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: #0a0a0c;
    margin-bottom: 16px;
    background-size: cover;
    background-position: center;
    overflow:hidden;
  }
  .dj-card h3{ font-family: var(--font-body); font-size: 1.2rem; font-weight:700; }
  .dj-card .genre{ color: var(--pink); font-weight:600; font-size: 0.9rem; margin-top: 2px; }
  .dj-social{
    display:flex;
    gap: 14px;
    margin-top: 12px;
  }
  .dj-social a{
    display:flex; align-items:center; justify-content:center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--text-dim);
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .dj-social a:hover{ color: var(--text); border-color: var(--text-dim); }
  .dj-social svg{ width: 16px; height: 16px; }

  @media (max-width: 860px){
    .djs-grid{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 540px){
    .djs-grid{ grid-template-columns: 1fr; }
  }

  /* ==========================================================
     CONTACT
     ========================================================== */
  .contact-layout{
    display:grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 64px;
  }
  .contact-side h2{ font-size: clamp(2rem, 4vw, 2.6rem); }
  .contact-side p{ margin-top: 18px; font-size: 1.1rem; max-width: 42ch; }
  .contact-side .contact-email{
    display:inline-block;
    margin-top: 24px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--pink);
  }

  form{ display:flex; flex-direction:column; gap: 20px; }
  .field{ display:flex; flex-direction:column; gap: 8px; }
  .field label{ font-weight:600; font-size: 0.95rem; color: var(--text-dim); }
  .field input, .field textarea{
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
  }
  .field input:focus, .field textarea:focus{
    outline: none;
    border-color: var(--violet);
  }
  .field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }

  @media (max-width: 860px){
    .contact-layout{ grid-template-columns: 1fr; }
    .field-row{ grid-template-columns: 1fr; }
  }

  /* ==========================================================
     FOOTER
     ========================================================== */
  footer{
    border-top: 1px solid var(--line);
    padding: 40px 0;
  }
  .footer-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .footer-row p{ font-size: 0.9rem; }
  .footer-links{ display:flex; gap:20px; }
  .footer-links a{ color: var(--text-dim); font-weight:600; font-size:0.95rem; }
  .footer-links a:hover{ color: var(--text); }

/* ==========================================================
   SÉLECTEUR DE LANGUE
   ========================================================== */
.lang-switch{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:0.95rem; }
.lang-switch a{ color:var(--text-dim); padding:2px 4px; border-radius:4px; }
.lang-switch a:hover{ color:var(--text); }
.lang-switch a.active{ color:#fff; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lang-switch span{ color:var(--line); }

/* ==========================================================
   ÉVÉNEMENTS
   ========================================================== */
.events-group-title{
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 40px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.events-group-past{ color: var(--text-dim); }

.events-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap:22px; }

.event-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background: var(--bg-raised);
}
.event-card.is-past{ opacity:0.72; }
.event-card.is-past:hover{ opacity:1; }

.event-poster{ position:relative; aspect-ratio:16/9; background:var(--grad); }
.event-poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.event-poster-empty{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.3rem; color:#0a0a0c;
}
.event-badge{
  position:absolute; top:10px; left:10px;
  background:rgba(0,0,0,0.72); color:var(--text-dim);
  padding:4px 12px; border-radius:999px; font-size:0.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em;
}
.event-body{ display:flex; gap:16px; padding:18px 20px 20px; flex:1; flex-wrap:wrap; }
.event-date{ font-family:var(--font-display); line-height:1.05; flex-shrink:0; }
.event-date .day{ font-size:1.9rem; display:block; }
.event-date .month{ font-size:0.85rem; color:var(--text-dim); letter-spacing:0.06em; display:block; }
.event-date .year{ font-size:0.75rem; color:var(--text-dim); display:block; }
.event-info{ flex:1; min-width:150px; }
.event-info h3{ font-family:var(--font-body); font-size:1.15rem; font-weight:700; }
.event-info p{ margin-top:4px; font-size:0.95rem; }
.event-desc{ margin-top:8px !important; font-size:0.9rem !important; }
.event-actions{ display:flex; gap:10px; flex-wrap:wrap; width:100%; }
.event-actions .btn{ padding:9px 18px; font-size:0.92rem; }

/* ==========================================================
   FIL D'ARIANE + TUILE DOSSIER
   ========================================================== */
.breadcrumb{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; font-size:0.95rem; color:var(--text-dim); }
.breadcrumb a{ color:var(--text-dim); font-weight:600; }
.breadcrumb a:hover{ color:var(--text); }
.breadcrumb strong{ color:var(--text); }

.gallery-tile .tile-kind{
  position:absolute; top:14px; left:14px; z-index:1;
  background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.18);
  padding:3px 10px; border-radius:999px;
  font-family:var(--font-body); font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim);
}

.album-links{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }

/* ==========================================================
   MARQUEURS DE CARTE (miniatures + regroupement)
   ========================================================== */
.tc-marker{ background:none !important; border:none !important; }
.tc-marker-inner{
  display:block; width:100%; height:100%;
  border-radius:12px; border:2px solid #fff;
  background-size:cover; background-position:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.55);
}
.tc-marker-count{
  position:absolute; top:-6px; right:-6px;
  min-width:22px; height:22px; padding:0 5px;
  border-radius:999px; background:var(--grad); color:#0a0a0c;
  font-family:var(--font-body); font-size:0.78rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.5);
}
.tc-cluster .tc-marker-inner{ border-color:var(--pink); }

.tc-popup-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin-top:10px; }
.tc-popup-item{ display:block; text-decoration:none; }
.tc-popup-item span{
  display:block; aspect-ratio:1; border-radius:8px;
  background-size:cover; background-position:center; background-color:#1a1620;
}
.tc-popup-item em{
  display:block; margin-top:4px; font-style:normal;
  font-size:0.76rem; color:var(--text-dim); line-height:1.25;
}
.tc-popup-item:hover em{ color:var(--text); }

/* ==========================================================
   DJS : BIO, MÉDIAS, PRESS KIT
   ========================================================== */
.dj-bio{ margin-top:10px; font-size:0.95rem; }
.dj-media{ display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:6px; margin-top:12px; }
.dj-media-item{ aspect-ratio:1; border-radius:8px; overflow:hidden; background:var(--bg-raised); }
.dj-media-item img, .dj-media-item video{ width:100%; height:100%; object-fit:cover; display:block; }
.dj-presskit{
  display:inline-flex; align-items:center; height:34px; padding:0 14px;
  border:1px solid var(--line); border-radius:999px;
  font-size:0.82rem; font-weight:700; color:var(--text-dim);
}
.dj-presskit:hover{ color:var(--text); border-color:var(--text-dim); }

/* ==========================================================
   VIDÉO DE PRÉSENTATION + PAGE LIBRE
   ========================================================== */
.video-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:var(--bg-raised);
}
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.page-content{ max-width:70ch; font-size:1.05rem; color:var(--text-dim); margin-bottom:32px; }

/* ==========================================================
   ARRIÈRE-PLANS DYNAMIQUES
   ========================================================== */
body[class*="bg-mode-"]:not(.bg-mode-none){ background: #060507; }

/* --- Mosaïque : plusieurs photos visibles en même temps --- */
.site-bg-mosaic{
  position:fixed; inset:0; z-index:-2;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap:4px;
}
.site-bg-mosaic span{
  display:block;
  background-size:cover; background-position:center;
  animation: tcMosaic 26s ease-in-out infinite alternate;
}
.site-bg-mosaic span:nth-child(3n){   animation-duration: 32s; }
.site-bg-mosaic span:nth-child(4n+1){ animation-duration: 21s; }
.site-bg-mosaic span:nth-child(2){ animation-delay: -6s; }
.site-bg-mosaic span:nth-child(5){ animation-delay: -12s; }
.site-bg-mosaic span:nth-child(8){ animation-delay: -18s; }
.site-bg-mosaic span:nth-child(11){ animation-delay: -3s; }
@keyframes tcMosaic{
  from{ transform: scale(1); }
  to{ transform: scale(1.12); }
}
@media (max-width: 820px){
  .site-bg-mosaic{ grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce){
  .site-bg-mosaic span{ animation: none; }
}

/* --- Dégradé coloré (repli quand il n'y a pas d'images) --- */
.site-bg-gradient{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,47,143,0.40), transparent 46%),
    radial-gradient(circle at 82% 14%, rgba(55,99,255,0.34), transparent 42%),
    radial-gradient(circle at 60% 78%, rgba(139,59,240,0.32), transparent 48%),
    radial-gradient(circle at 12% 88%, rgba(255,47,143,0.22), transparent 44%),
    #060507;
  filter: blur(28px);
  transform: scale(1.08);
}

/* --- Image unique / diaporama --- */
.site-bg{
  position:fixed; inset:0; z-index:-2;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition: opacity 1.4s ease;
}
.site-bg-next{ opacity:0; }
.site-bg-next.is-visible{ opacity:1; }

/* --- Calque de lisibilité, commun à tous les modes photo --- */
.site-bg-overlay{ position:fixed; inset:0; z-index:-1; pointer-events:none; }

/* Le héros garde ses halos mais laisse voir le fond. */
body:not(.bg-mode-none):not(.bg-mode-gradient) .hero::before{ opacity:0.45; }
body.bg-mode-gradient .hero::before{ opacity:0.75; }

/* ==========================================================
   CARTE : lisibilité des tuiles
   ========================================================== */
#carte, #admin-map-picker{ background:#0d0b11; }
#carte .leaflet-tile-pane, #admin-map-picker .leaflet-tile-pane{
  filter: grayscale(0.55) brightness(0.92) contrast(1.08);
}
.leaflet-container{ background:#0d0b11; }
.leaflet-control-attribution{
  background: rgba(6,5,7,0.72) !important;
  color: var(--text-dim) !important;
  font-size: 0.7rem !important;
}
.leaflet-control-attribution a{ color: var(--pink) !important; }

/* Bulle de regroupement : plusieurs miniatures empilées */
.tc-cluster-stack{ position:relative; width:100%; height:100%; }
.tc-cluster-stack i{
  position:absolute; display:block;
  width:38px; height:38px; border-radius:9px;
  border:2px solid #fff; background-size:cover; background-position:center;
  box-shadow:0 3px 10px rgba(0,0,0,0.6);
}
.tc-cluster-stack i:nth-child(1){ top:0;  left:0;  z-index:3; }
.tc-cluster-stack i:nth-child(2){ top:8px; left:12px; z-index:2; border-color:var(--pink); }
.tc-cluster-stack i:nth-child(3){ top:16px; left:24px; z-index:1; border-color:var(--blue); }
.tc-cluster-more{
  position:absolute; bottom:-4px; right:-8px; z-index:4;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:999px; background:var(--grad); color:#0a0a0c;
  font-family:var(--font-body); font-size:0.76rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.55);
}
.tc-cluster-icon{ background:none !important; border:none !important; }

/* ==========================================================
   BOOKING
   ========================================================== */
.dj-booking{
  margin-top:10px; font-size:0.85rem; display:flex; flex-wrap:wrap; gap:6px;
}
.dj-booking span{ color:var(--text-dim); font-weight:600; }
.dj-booking a{ color:var(--pink); font-weight:600; }
.dj-booking a:hover{ text-decoration:underline; }

.booking-box{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:40px;
  border:1px solid var(--line); border-radius:18px;
  padding:36px 34px;
  background: var(--bg-raised);
}
.booking-main h2{ font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.booking-main p{ margin-top:16px; font-size:1.05rem; max-width:52ch; }
.booking-contact{ display:flex; flex-direction:column; gap:12px; }
.booking-line{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:14px 18px; border:1px solid var(--line); border-radius:12px;
  transition: border-color .15s ease;
}
.booking-line:hover{ border-color:var(--pink); }
.booking-line span{ color:var(--text-dim); font-size:0.88rem; font-weight:600; }
.booking-line strong{ font-weight:700; font-size:0.98rem; }
.booking-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }

@media (max-width: 860px){
  .booking-box{ grid-template-columns:1fr; gap:28px; padding:28px 22px; }
}
.dj-social{ flex-wrap:wrap; row-gap:8px; }
.dj-presskit{ white-space:nowrap; }