:root{
      --bg:#0f0f12;
      --panel:#15151a;
      --text:#f2f2f3;
      --muted:#b9b9c2;
      --line:rgba(255,255,255,.10);
      --accent:#f2c14e; /* doré discret */
      --shadow: 0 12px 30px rgba(0,0,0,.45);
      --radius: 14px;
      --max: 1180px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: radial-gradient(1200px 900px at 15% -10%, rgba(242,193,78,.18), transparent 60%),
                  radial-gradient(1200px 900px at 95% 0%, rgba(255,255,255,.08), transparent 55%),
                  var(--bg);
      color:var(--text);
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{width:min(var(--max), calc(100% - 32px)); margin-inline:auto}

    /* Top bar */
    .topbar{
      border-bottom:1px solid var(--line);
      background: rgba(0,0,0,.25);
      backdrop-filter: blur(10px);
    }
    .topbar__inner{
      display:flex; align-items:center; justify-content:flex-end;
      padding:10px 0;
      gap:14px;
      font-size:13px;
      color:var(--muted);
    }
    .pill{
      padding:8px 12px;
      border:1px solid var(--line);
      border-radius:999px;
      background: rgba(255,255,255,.04);
      transition:.2s ease;
    }
    .pill:hover{transform: translateY(-1px); border-color:rgba(255,255,255,.18)}

    /* Header + nav */
    header{
      position:sticky; top:0; z-index:50;
      background: rgba(15,15,18,.72);
      backdrop-filter: blur(14px);
      border-bottom:1px solid var(--line);
    }
    .header__inner{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
      gap:16px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      min-width: 220px;
    }
    .brand__logo{
      width:40px; height:40px; border-radius:12px;
      background: linear-gradient(135deg, rgba(242,193,78,.9), rgba(255,255,255,.12));
      box-shadow: var(--shadow);
      display:grid; place-items:center;
      font-weight:800; color:#111;
    }
    .brand__name{
      font-weight:800;
      letter-spacing:.2px;
      line-height:1.1;
    }
    .brand__tag{
      font-size:12px; color:var(--muted); margin-top:2px;
      font-weight:500;
    }

    nav{flex:1}
    .nav{
      display:flex; align-items:center; justify-content:center;
      gap:10px; flex-wrap:wrap;
    }
    .nav > li{list-style:none; position:relative}
    .nav > li > a{
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid transparent;
      color: rgba(255,255,255,.92);
      font-weight:600;
      font-size:14px;
      transition:.2s ease;
    }
    .nav > li > a:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.12);
    }
    .caret{
      width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
      border-top:6px solid rgba(255,255,255,.75);
      transform: translateY(1px);
    }

    /* Dropdown */
    .dropdown{
      position:absolute;
      top: calc(100% + 10px);
      left: 0;
      width: 220px;
      background: rgba(21,21,26,.98);
      border:1px solid var(--line);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding:10px;
      display:none;
    }
    .dropdown a{
      display:flex; align-items:center;
      padding:10px 10px;
      border-radius: 10px;
      color: rgba(255,255,255,.9);
      font-weight:600;
      font-size:13px;
    }
    .dropdown a:hover{background: rgba(255,255,255,.06)}
    .nav > li:hover .dropdown{display:block}

    /* Right header actions */
    .header__actions{
      display:flex; align-items:center; justify-content:flex-end;
      gap:10px;
      min-width: 220px;
    }
    .cart{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      font-weight:700;
      font-size:13px;
    }
    .dot{
      width:8px; height:8px; border-radius:50%;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(242,193,78,.18);
    }

    /* Mobile menu */
    .burger{
      display:none;
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      border-radius: 12px;
      padding:10px 12px;
      cursor:pointer;
      color: rgba(255,255,255,.9);
      font-weight:700;
    }
    .mobilepanel{
      display: none;
    }


    @media (max-width: 980px){
      .brand{min-width:auto}
      .header__actions{min-width:auto}
      nav{display:none}
      .burger{display:inline-flex}
      .mobilepanel{
        display:none;
        border-top:1px solid var(--line);
        padding:12px 0 16px;
      }
      .mobilepanel.is-open{display:block}
      .mobilepanel a{
        display:flex;
        padding:12px 10px;
        border-radius: 12px;
        border:1px solid transparent;
        font-weight:700;
      }
      .mobilepanel a:hover{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10)}
      .mobilegroup{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(255,255,255,.10)}
      .subhead{color:var(--muted); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.12em; padding:0 10px 8px}
    }

    /* Hero slider */
    .hero{padding:22px 0 10px}
    .slider{
      border-radius: var(--radius);
      overflow:hidden;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      box-shadow: var(--shadow);
      position:relative;
      min-height: 320px;
    }
    .slides{
      display:flex;
      transition: transform .55s cubic-bezier(.2,.8,.2,1);
      will-change: transform;
    }
    .slide{
      min-width:100%;
      position:relative;
      aspect-ratio: 16/7;
      background:
        radial-gradient(900px 260px at 20% 10%, rgba(242,193,78,.25), transparent 60%),
        radial-gradient(700px 260px at 80% 20%, rgba(255,255,255,.14), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.05));
    }
    .slide__bg{
      position:absolute; inset:0;
      background-size: cover;
      background-position: center;
      filter: saturate(1.08) contrast(1.02);
      opacity:1;
      transform: scale(1.02);
    }
    .slide__overlay{
      display: none;
      /*position:absolute;
      inset:0;
      background: linear-gradient(
        90deg,
        rgba(0,0,0,.35),
        rgba(0,0,0,.10) 60%,
        rgba(0,0,0,.25)
      );*/
    }

    .slide__content{
      position:absolute; inset:0;
      display:flex; flex-direction:column; justify-content:flex-end;
      padding:22px;
      gap:8px;
    }
    .kicker{
      color: rgba(255,255,255,.78);
      font-weight:700;
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.12em;
    }
    .title{
      font-size: clamp(22px, 3vw, 34px);
      font-weight: 800;
      margin:0;
    }
    .desc{
      color: rgba(255,255,255,.80);
      margin:0;
      max-width: 60ch;
      font-weight: 500;
      line-height:1.45;
      font-size: 14px;
    }

    .slider__btn{
      position:absolute;
      top:50%;
      transform: translateY(-50%);
      width:42px;height:42px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.35);
      color: rgba(255,255,255,.92);
      display:grid; place-items:center;
      cursor:pointer;
      transition:.2s ease;
      user-select:none;
    }
    .slider__btn:hover{background: rgba(0,0,0,.55); transform: translateY(-50%) scale(1.02)}
    .slider__btn.prev{left:12px}
    .slider__btn.next{right:12px}

    .dots{
      position:absolute;
      left:50%; bottom:12px;
      transform: translateX(-50%);
      display:flex; gap:8px;
      padding:8px 10px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.25);
      border-radius:999px;
      backdrop-filter: blur(10px);
    }
    .dotbtn{
      width:8px;height:8px;border-radius:50%;
      border:0;
      background: rgba(255,255,255,.30);
      cursor:pointer;
    }
    .dotbtn.is-active{background: var(--accent)}

    /* Section */
    .section{
      padding:18px 0 34px;
    }
    .section__head{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:16px;
      margin: 16px 0 14px;
    }
    h2{
      margin:0;
      font-size: 22px;
      font-weight: 900;
      letter-spacing:.2px;
    }
    .section__sub{
      color: var(--muted);
      font-weight:600;
      font-size: 13px;
      line-height:1.4;
      max-width: 70ch;
    }

    /* Cards grid */
    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 12px;
    }
    .card{
      grid-column: span 6;
      background: rgba(255,255,255,.03);
      border:1px solid var(--line);
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: 0 10px 22px rgba(0,0,0,.25);
      transition: .2s ease;
      position:relative;
    }
    .card:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.16)}
    .card__media{
      height: 250px;
      background:
        radial-gradient(900px 220px at 15% 10%, rgba(242,193,78,.22), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
      position:relative;
    }
    .card__media::after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
    }
    .card__body{padding:14px}
    .card__title{margin:0 0 6px; font-weight:900; font-size:15px}
    .card__text{margin:0; color: rgba(255,255,255,.78); font-size:13px; line-height:1.45}
    .card__link{
      margin-top:12px;
      display:inline-flex; gap:10px; align-items:center;
      font-weight:900;
      font-size:13px;
      color: var(--accent);
    }

    @media (max-width: 900px){
      .card{grid-column: span 12}
      .slide{aspect-ratio: 16/10}
    }

    /* Footer */
    footer{
      border-top:1px solid var(--line);
      background: rgba(0,0,0,.20);
      padding: 18px 0;
      color: rgba(255,255,255,.75);
      font-size: 13px;
    }
    .footer__inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px; flex-wrap:wrap;
    }
    .smalllinks{display:flex; gap:12px; flex-wrap:wrap}
    .smalllinks a{color: rgba(255,255,255,.75)}
    .smalllinks a:hover{color: rgba(255,255,255,.92)}
/* ============================
   FORMULAIRE CONTACT
============================ */

.form-field{
  margin-bottom:16px;
}

.form-field input,
.form-field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
  color:#fff;
  font-family: inherit;
  font-size:14px;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
  color: rgba(255,255,255,.6);
}

.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color: var(--accent);
  background: rgba(255,255,255,.06);
}

.form-actions{
  margin-top:20px;
}

.form-actions button{
  padding:12px 20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.form-actions button:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* ============================
   FORMULAIRE – CONTROLES
============================ */

.form-control{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color:#fff;
  font-family: inherit;
  font-size:14px;
  transition: border-color .2s ease, background .2s ease;
}

.form-control::placeholder{
  color: rgba(255,255,255,.6);
}

.form-control:focus{
  outline:none;
  border-color: var(--accent);
  background: rgba(255,255,255,.06);
}

/* textarea spécifique */
textarea.form-control{
  resize: vertical;
  min-height:120px;
}


/* ============================
   AGENDA
============================ */

.agenda-card{
  display:flex;
  gap:16px;
  padding:14px;
}

.agenda-date{
  min-width:72px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  text-align:center;
  padding:10px 6px;
  font-weight:800;
}

.agenda-day{
  font-size:24px;
  display:block;
}

.agenda-month{
  font-size:12px;
  letter-spacing:.12em;
  color:var(--accent);
}

.agenda-year{
  font-size:11px;
  color:var(--muted);
}

@media (max-width:900px){
  .agenda-card{
    flex-direction:column;
  }
  .agenda-date{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
}
/* ============================
   BOUTIQUE – GRILLE PRODUITS
============================ */

/* Desktop : 4 produits par ligne */
@media (min-width: 1200px){
  .grid .card{
    grid-column: span 3;
  }
}

/* Tablette : 2 produits par ligne */
@media (min-width: 700px) and (max-width: 1199px){
  .grid .card{
    grid-column: span 6;
  }
}

/* Mobile : 1 produit par ligne */
@media (max-width: 699px){
  .grid .card{
    grid-column: span 12;
  }
}

#cartOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  opacity:0;
  pointer-events:none;
  transition:.3s;
  z-index:90;
}

#cartDrawer{
  position:fixed;
  top:0;
  right:-420px;
  width:380px;
  height:100%;
  background:#15151a;
  border-left:1px solid rgba(255,255,255,.1);
  transition:.35s ease;
  z-index:100;
  display:flex;
  flex-direction:column;
}

#cartDrawer.open{
  right:0;
}

#cartOverlay.open{
  opacity:1;
  pointer-events:auto;
}

.cart-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.cart-body{
  padding:16px;
  overflow:auto;
}

#closeCart{
  background:none;
  border:none;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}
.qty-input {
  width: 50px;
  text-align: center;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}

.qty-btn {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.qty-btn:hover {
  background: rgba(255,255,255,.08);
}
/* =========================
   CHECKOUT
========================= */

.section {
  padding: 60px 0;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Cartes */
.card {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.card__body {
  padding: 24px;
}

.card__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

.card__text {
  color: var(--muted);
  font-size: 14px;
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* Inputs */
label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0f0f12;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}

input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Récap lignes */
.checkout-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.checkout-line strong {
  font-weight: 600;
}

/* Séparateur */
hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 16px 0;
}

/* Total */
.checkout-total {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 700;
}

/* Bouton paiement */
.card__link,
button.card__link {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #ffd97a);
  color: #000;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.card__link:hover,
button.card__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(242,193,78,.35);
}

/* Responsive */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .card__body {
    padding: 18px;
  }

  .card__title {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
.media-galerie {
  background-image: url("../assets/media/photo.png");
}
.media-musiques {
  background-image: url("../assets/media/musics.png");
}
.media-videos {
  background-image: url("../assets/media/video.png");
}
.media-boutique {
  background-image: url("../assets/media/boutique.png");
}
.media-partitions {
  background-image: url("../assets/media/partitions.png");
}
.media-presse {
  background-image: url("../assets/media/presse.png");
}

.media-card .card__media {
  height: 180px;
  background-size: cover;
  background-position: center;
}

/* ===== GALERIE ===== */
.gallery-filters{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;
}
.gallery-filters button{
  background:#caa75e;border:0;padding:6px 12px;
  font-size:13px;cursor:pointer;border-radius:4px;
}
.gallery-filters button.active{background:#fff;color:#000}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px;
}
.gallery-item{
  cursor:pointer;
  background:#fff;
  padding:6px;
  border-radius:4px;
}
.gallery-item img{
  width:100%;height:160px;object-fit:cover;border-radius:4px;
}

/* ===== MODAL ===== */
.lightbox{
  position:fixed;inset:0;
  background:rgba(0,0,0,.9);
  display:none;align-items:center;justify-content:center;
  z-index:9999;
}
.lightbox.active{display:flex}
.lightbox img{
  max-width:90vw;max-height:85vh;
}
.lightbox .close,
.lightbox .prev,
.lightbox .next{
  position:absolute;color:#fff;font-size:30px;
  cursor:pointer;user-select:none;
}
.lightbox .close{top:20px;right:30px}
.lightbox .prev{left:30px}
.lightbox .next{right:30px}



/* =========================
   FOOTER RÉSEAUX SOCIAUX
========================= */
.social-footer{
  background: linear-gradient(180deg, #111, #000);
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.social-footer__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.social-footer__title{
  color:#caa75e;
  font-size:16px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.social-footer__links{
  display:flex;
  gap:20px;
}

.social-footer__links a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  transition:all .25s ease;
}

.social-footer__links a:hover{
  background:#caa75e;
  transform:translateY(-3px);
}

.social-footer__links img{
  width:22px;
  height:22px;
  filter:invert(1);
}
.social-footer__links img{
  fill: #fff;
}
.social-footer__links a:hover img{
  fill: #000;
}