:root{
  --bg: #0B0B0B;
  --title: #F1F5F9;
  --title-bg: #151515;
  --text: #CDD3DA;
  --link: #EF4444;
  --btn-text: #FFFFFF;
   --btn: #64748B;
 /* BTN — enrichi mais compatible
  --btn: #64748B;
  --btn-text: #ffffff;*/
  --btn-invert: #9B8B74; 
    
  --rgb-bg: 11,11,11;
  --rgb-link: 239,68,68;
  --rgb-btn: 100,116,139;
  --rgb-btn-text: 255,255,255;
  --rgb-bt: 21,21,21;
  --rgb-title: 241,245,249;
} 

/* Police (Google Font chargée en HTML) */
body, .modal_theme { font-family: 'Poppins', sans-serif; }

/* ===== Ton CSS converti (avec variables) — inchangé sur le fond ===== */
    
html, body { height:100%; margin:0; display:flex; flex-direction:column; }

body, .modal_theme {
  background-color: var(--bg);
  color: var(--text);
  text-align: center;
  position: relative;
  z-index: 1;
}
.ftheme {
  background-color: var(--bg);
    opacity: 1;
    padding: 0;
    margin: 0;
}

.profile-logo-preview {
      height: 150px;
      border: 3px solid #fff;
      background: #fff;
      object-fit: cover;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      z-index: 10;
      margin-top: -75px;
    }

    .logo-wrapper {
      position: relative;
      z-index: 10;
    }
    @media (max-width: 576px) {
    .profile-logo-preview {
        width: 100px;
        height: 100px;
        bottom: -50%;
    }
}

.modal-content {
  background: linear-gradient(145deg, #1c1c1c, #2a2a2a);
  color: #fff;
  border: 1px solid #444;
}

.modal-content a:hover {
  text-decoration: underline;
}

.modal-header .btn-close {
  filter: invert(1);
}

.img-thumbnail {
    background-color: #000;
    border-color: black !important;
    border:2px;
}

.square-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Carré */
    overflow: hidden;
    border-radius: 12px;
    background-color: #000; /* Pour éviter un fond vide sur images transparentes */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.square-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zoom centré dans le carré */
    object-position: center center; /* Centre exact de l’image */
    display: block;
}
.qr-floating { display: none;}

.zb-scrolled .zb-footer__links .qr-floating {
  display: block !important; 
  position: relative !important;
  margin-left: 16px !important;
  margin-bottom: 16px !important;
  z-index: 1060000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  border:1px solid var(--bg);
  background: var(--link);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.qr-thumb{
    width:84px;
    height:84px;
    border-radius:6px;
    padding:5px 5px 5px;
    border-bottom: none; /* pour fusionner visuellement avec la légende */
    display: block;
}

.qr-caption {
  width: 84px;
  text-align: center;
  font-size: 0.70rem;
  line-height: 1.2;
  color: var(--btn-text);
  background: rgba(var(--rgb-bg),1);
  border-top: none; /* pas de bord supérieur */
  padding: 2px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 767.98px){
  .qr-floating{ display: none !important; }
}

.square-image-wrapper.img_square {
  position: relative;
  width: 100%;
  /* --- carré universel --- */
  aspect-ratio: 1 / 1;          /* gère les navigateurs modernes */
  padding-top: 100%;            /* fallback pour anciens navigateurs */
  overflow: hidden;
  border-radius: 12px;          /* optionnel */
  background: #000;             /* pour éviter fond blanc au chargement */
}

.square-image-wrapper.img_square > a {
  position: absolute;
  inset: 0;                     /* top/right/bottom/left: 0 */
  display: block;
  width: 100%;
  height: 100%;
}

.square-image-wrapper.img_square img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* remplit tout le carré */
  object-position: center center;
  display: block;
}

.zb-input {
    border: 1px solid var(--title-bg) !important;
}
.zb-input placeholder {
}
 .offcanvas {
  background-color: var(--bg);
  color: var(--text);
}
/* custom_css libre */


body.banner-none::before { content:none !important; background:none !important; }

body.banner-cover::before {
  content:"";
  position:fixed; top:0; left:0; width:100%; height:100%;
  background-image:url('/assets/uploads/banners/699d6c5f7b8ab.webp');  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:.7; z-index:-1;
}

body.banner-center::before {
  content:"";
  position:fixed; top:0; left:0; width:100%; height:100%;
  background-image:url('/assets/uploads/banners/699d6c5f7b8ab.webp');  background-size:auto; background-position:center center; background-repeat:no-repeat;
  opacity:.7; z-index:-1; pointer-events:none;
}

body.banner-cover::before,
body.banner-center::before {
  background-image:url('/assets/uploads/banners/699d6c5f7b8ab.webp');}

main { flex:1; padding:40px 20px;position: relative; }

.content-wrapper {
  background-color: rgba(var(--rgb-bg), .8);
  border:0 solid var(--link);
  overflow:hidden;
  position:relative;
}

.bg-zb { background:rgba(var(--rgb-bg), .9); border:1px solid var(--link); color:var(--title); }

.no-cover { border:none; box-shadow:4px 4px 12px rgba(var(--rgb-link), .25); }

.no-center, .no-none { border:1px solid var(--link); box-shadow:4px 4px 12px rgba(var(--rgb-link), .25); }

.logo-artist { max-height:180px; object-fit:contain; margin:0 auto 20px; display:block; padding:10px; }


h1{
    font-size:clamp(28px, 3.5vw, 42px);
    letter-spacing:-0.05em;
    margin:18px 0 18px;
    line-height:1.2;
    color:var(--zb-text-main);
    text-transform: uppercase;
}
h1::after,h2::after {
    content:"";
    display:block;
    width:15%;
    height:2px;
    margin-top:10px;
    background:rgba(var(--rgb-btn), .45);
}
h2 {
    font-size: 1.45em;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 2.2em 0 0.9em;
    position: relative;
    opacity: .88;
    position: relative;
    padding-bottom: 1.2em;
}

h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.8em;
    width: 48px;
    height: 2px;
    background: rgba(var(--rgb-btn), .65);
}

.bigtitle, .bigtitle h2, .eventcolor { background-color:var(--title-bg); color:var(--title); padding:10px; border-radius:10px; display:inline-block; }
.bigtitle h2::after {content: "";position: absolute;left: 0;bottom: 0;width: 0;height: 0;background: none}
.bigtitle{ background-color:rgba(var(--rgb-bt), 0.80); padding: 0.6em; font-weight: 700; margin: 0 25px; }
.bigtitle h2{ background-color:transparent !important; padding: 0; }

a { color:var(--link); text-decoration: none; }
a:hover { color:var(--btn); text-decoration: underline; }

.linkblock {
  margin:15px auto; padding:12px 20px;
}
.link-block {
margin:0 auto; padding:12px 20px;
margin-bottom:5px;
border:1px solid rgba(var(--rgb-btn), .75);
}
.linkblock:hover, .link-block:hover { background-color:rgba(var(--rgb-bg), .7); }
.linkblock a, .link-block a { text-decoration:none; font-weight:bold; display:flex; align-items:center; gap:10px; }

.link-block img.icon, .linkblock img.icon {
  width:24px; height:24px; object-fit:cover; padding:5px;
  background-color:var(--title-bg); border-radius:50%;
  transition: background-color .3s ease;
}
.link-block img.icon:hover, .linkblock img.icon:hover { background-color:var(--title); }

.btn-custom, a.btn-custom { background-color:var(--btn); border:none; color:var(--btn-text); }
.btn-custom:hover, a.btn-custom:hover, .badge-custom { background-color:var(--btn-text) !important; border:none; color:var(--btn); }
/*.btn-custom
{
  background-color: var(--btn);
  border: var(--btn-text);
  color: var(--btn-text);
}

a.btn-custom{
  color: var(--btn);
}

.btn-custom:hover
{
  background-color: var(--btn-invert);
  border: var(--btn);
  color: var(--btn);
}

a.btn-custom:hover
{
  color: var(--link);
}*/

.badge-custom{
  background-color: var(--title-bg);
  color: var(--btn);
}

.btn-outline-custom, a.btn-outline-custom { background-color:transparent;border-color:var(--btn); color:var(--btn); }
.btn-outline-custom:hover, a.btn-outline-custom:hover { background-color:var(--btn);border-color:var(--btn); color:var(--text); }

.genrs { color:var(--text); font-size:.8em; }

/* SHARE BUTTONS */
.share-buttons { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.8rem; margin-top:1rem; }

.share-buttons .btn-share {
  background-color:var(--btn); color:var(--text);
  border:1px solid var(--link); border-radius:10%;
  width:42px; height:42px; font-size:1.3rem;
  display:inline-flex; align-items:center; justify-content:center;
  transition: all .2s ease-in-out;
}
.share-buttons .btn-share:hover, hr { color:var(--text); margin-top:-10px; }

.share-total-wrapper { display:flex; flex-direction:column; align-items:center; margin-left:1rem; margin-top:.3rem; }
.share-total-count { font-size:1.2rem; font-weight:bold; color:var(--title); line-height:1.2; opacity:.5; }
.share-total-label { font-size:.75rem; color:var(--text); margin-top:.2rem; text-transform:uppercase; letter-spacing:.5px; opacity:.5; }

.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: rgba(var(--rgb-link),1); border-radius:50%; padding:20px;
  background-size:60% 60%; background-position:center; background-repeat:no-repeat;
}

/* FOOTER */
footer {
  font-size:.85em; background-color:var(--bg);
  position:relative;
  padding: 0 auto;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.f { transition: transform .3s ease, filter .3s ease; display:inline-block; }
.social-icon:hover { transform: scale(1.3) rotate(-10deg); filter: brightness(1.3); }

i.bi-footer , .bi-footer {
    color: var(--btn);
    padding: 0.2rem; 
}
/*.square-image-wrapper:hover { transform: scale(1.05); box-shadow: 0 0 16px 4px var(--link) !important; }*/

.img_square {
  border:2px solid var(--link);
  box-shadow:0 0 8px 2px var(--link);
  border-radius:12px; aspect-ratio:1/1; overflow:hidden; background-color:#000;
  cursor:pointer; transition: transform .3s ease, box-shadow .3s ease;
}

/* ===== CSS site  ===== */
body.zb-minisite .content-wrapper{
  overflow: visible; /* ou auto si tu veux un scroll interne */
}

body.zb-minisite{
  /* Ton template met déjà body en flex/column + bg/texte. */
  text-align: left; /* pages = lecture, pas centré */
}

/* On garde ton .content-wrapper existant, mais on le “spécialise” */
body.zb-minisite .content-wrapper.zb-shell {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 18px;
}

.ftheme.zb-shell {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
    padding: 0px;
}

/* Espace global (au lieu de main padding 40/20 “one page”) */
body.zb-minisite main.zb-main{
  padding: 18px 0 10px;
}

/* Typo standards */
body.zb-minisite .zb-title{
  margin: 0;
  color: var(--title);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
}

body.zb-minisite .zb-h2{
  margin: 0 0 4px;
  color: var(--title);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  letter-spacing: -0.01em;
}

body.zb-minisite .zb-h3{
  margin: 0 0 4px;
  color: var(--title);
  font-size: clamp(1.rem, 2vw, 1.15rem);
  letter-spacing: -0.01em;
}

body.zb-minisite .zb-muted{
  color: var(--text);
  opacity: .72;
  font-size: .93rem;
  line-height: 1.35;
}

/* Image featured */
.zb-featured-cover {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Desktop : image carrée obligatoire */
@media (min-width: 768px) {
  .zb-featured-cover {
    aspect-ratio: 1 / 1;
    height: 100%;
  }
}

/* Mobile : image horizontale (rectangle) */
@media (max-width: 767.98px) {
  .zb-featured-cover {
    aspect-ratio: 16 / 9;
    margin-bottom: 12px;
  }
}


/* Header minisite */
body.zb-minisite .zb-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 8px;

    background-size: cover;
    background-position: center 70%;
    background-repeat: no-repeat;
}
.zb-bottom 
{
    border-bottom: 1px solid rgba(var(--rgb-btn), .75);
}
/* Parallax*/
body.zb-minisite .zb-header.zb-hero-parallax {
    background-attachment: fixed;
} 

/* le contenu passe au-dessus du voile */
header.zb-header .zb-hero__content {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    body.zb-minisite .zb-header.has-banner {
        background-attachment: scroll;
    }
}

body.zb-minisite .zb-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;

}
body.zb-minisite .zb-hero__top {
    display: flex;
    gap: 12px;
    align-items: center;
}


body.zb-minisite .zb-avatar{
  /*width: 174px;
  height: 200px;*/
    max-height: 200px;
  /*border-radius: 999px;*/
  object-fit: cover;
  /*border: 1px solid rgba(var(--rgb-link), .35);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);*/
  flex: 0 0 auto;
}

body.zb-minisite .zb-identity{ min-width: 0; }

body.zb-minisite .zb-meta{
  color: var(--text);
  opacity: .7;
  font-size: .9rem;
  margin-top: 2px;
}
/* ================================================
   Logo Positionning - zb-header (minisite)
   ================================================ */

/* ---------------- Left ---------------- */
body.zb-minisite .zb-header.avatar-left .zb-hero__top {
    justify-content: flex-start;
}

body.zb-minisite .zb-header.avatar-left .zb-avatar {
    margin-left: 24px;
    margin-top: 24px;
}

/* ---------------- Center ---------------- */
body.zb-minisite .zb-header.avatar-center .zb-hero__top {
    flex-direction: column;
    text-align: center;
}
body.zb-minisite .zb-header.avatar-center .zb-avatar {
    margin: 24px auto 12px;
}
body.zb-minisite .zb-header.avatar-center .zb-identity {
    align-items: center;
}
body.zb-minisite .zb-header.avatar-center .zb-nav {
    justify-content: center;
}
body.zb-minisite .zb-header.avatar-overlay .zb-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* ---------------- Overlay ---------------- */
body.zb-minisite .zb-header.avatar-overlay .zb-hero__top {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding-top: 80px;
}
body.zb-minisite .zb-header.avatar-overlay .zb-avatar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 200px;
    border-radius: 0;
    object-fit: cover;
    border: 0px solid rgba(var(--rgb-link), .35);
    /*box-shadow: 0 6px 20px rgba(0,0,0,.35);*/
    z-index: 3;
}
body.zb-minisite .zb-header.avatar-overlay .zb-hero__content {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
body.zb-minisite .zb-header.avatar-overlay .zb-nav {
    justify-content: center;
}

/* Buttons */
body.zb-minisite .zb-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--rgb-link), .35);
    font-weight: 700;
    text-decoration: none;
    gap: 8px;
}
body.zb-minisite .zb-btn--primary{
    background: var(--btn);
    color: var(--text);
    border-color: rgba(var(--rgb-btn), .55);
}
body.zb-minisite .zb-btn--ghost{
    background: rgba(255,255,255,.05);
    color: var(--text);
}
body.zb-minisite .zb-hero__actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Nav */
body.zb-minisite .zb-nav{
    display: flex;
    gap: 10px;
    overflow: auto;
    padding: 8px 2px 2px;
    scrollbar-width: thin;
    flex-wrap: wrap;
    justify-content: center;
}
body.zb-minisite .zb-nav__item{
    white-space: nowrap;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(var(--rgb-bt), 1);
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: .9rem;
    opacity: .92;
}
body.zb-minisite .zb-nav__item:hover{
    background-color: rgba(var(--rgb-link), 1);
  /*  box-shadow: 0 0 0 3px rgba(var(--rgb-link), .55);*/
}
/*


/* Wrapper menu + socials */
.zb-nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px;
    width: 100%;
    margin-top: 1.5em; 
    /*box-shadow: 0 10px 30px rgba(var(--rgb-link),.25);*/
}
.zb-nav-wrapper {
    background: var(--rgb-bt); /* ou la couleur que tu veux */
    padding: 8px 0; /* padding vertical léger */
}

.zb-nav {
    padding: 0; /* évite les marges internes inutiles */
}

/* Liens sociaux */
.zb-social {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Optionnel : alignement mobile */
@media (max-width: 768px) {
    .zb-nav-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .zb-social {
        margin-top: 8px;
        position: relative;
        top: auto;
        right: auto;
        transform: none;
    }
}
/* Sections */
body.zb-minisite .zb-section{
  padding: 14px 0;
}

body.zb-minisite .zb-section__head{
  margin-bottom: 10px;
}

/* Grilles / listes */
body.zb-minisite .zb-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
margin-top : 25px;
}

@media (min-width: 820px){
  body.zb-minisite .zb-grid--2{
    grid-template-columns: 1fr 1fr;
  }
}

/* Arrondis / carrés */
body.zb-cards-rounded .zb-card, body.zb-cards-rounded .video-grid { border-radius: 18px; }
body.zb-cards-square  .zb-card, body.zb-cards-square  .video-grid { border-radius: 0; }

/* Cards */
body.zb-minisite .zb-card{
  padding: 14px;
  /*box-shadow: 0 10px 30px rgba(0,0,0,.25);*/
border:0px solid rgba(var(--rgb-btn), 0.1);
margin-bottom:25px;
}

/* OPAQUE */
body.zb-cards-opaque .zb-card, body.zb-cards-opaque .video-grid {
  background: rgba(var(--rgb-bg), 1);
  border-color: rgba(var(--rgb-btn), .9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* SEMI (glass) */
body.zb-cards-semi .zb-card, body.zb-cards-semi .video-grid {
  background: rgba(var(--rgb-bg),.55);
  border-color: rgba(var(--rgb-btn), .50);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* TRANSPARENT (quasi full transparent) */
body.zb-cards-transparent .zb-card, body.zb-cards-transparent .video-grid {
  background: rgba(var(--rgb-bg),.10);
  border-color: rgba(var(--rgb-btn), .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.zb-minisite .zb-card__title{
  font-weight: 900;
  color: var(--title);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

/* Lignes type “list row” (articles, events, press, etc.) */
body.zb-minisite .zb-row{
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 6px !important;
  /*background: rgba(255,255,255,.04);*/
  border:0px solid rgba(var(--rgb-btn), .6);
}

body.zb-minisite .zb-thumb {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.10);
}

body.zb-minisite .zb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.zb-minisite .zb-mini {
  max-width: 300px;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.10);
}

body.zb-minisite .zb-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.zb-minisite .zb-row__title{
  font-weight: 900;
  color: var(--title);
  margin: 0 0 2px;
}

body.zb-minisite .zb-row__meta{
  color: var(--text);
  opacity: .72;
  font-size: .9rem;
}

/* Footer */
body.zb-minisite .zb-footer{
  max-width: 100%;
  margin: 0 auto;
  padding: 14px 0 22px;
  background: rgba(var(--rgb-bg),.5);
}

body.zb-minisite .zb-footer__inner{
  max-width: 100%;
  margin: 0 auto;
  padding: 5% 18px;
  /*display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;*/
}
body.zb-minisite .zb-footer__inner a {
    font-size: 1em;
    font-weight: normal;
    text-decoration: none;
    color: var(--link);
    font-weight: bold;
   
}
body.zb-minisite .zb-linklike{
  color: var(--link);
  text-decoration: none;
}

body.zb-minisite .zb-linklike:hover{
  text-decoration: underline;
}

@media (max-width: 576px){
  body.zb-minisite .content-wrapper.zb-shell{
    margin: 12px auto;
    padding: 14px;
  }
  body.zb-minisite .zb-row{
    grid-template-columns: 64px 1fr;
    grid-auto-rows: auto;
  }
}
/*.discography-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}*/
.discography-grid > .zb-card .all-disco-wrap {
    margin-top: auto;
}
.video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    border:1px solid rgba(var(--rgb-btn), 0.03);
    margin-bottom:25px;
    position: relative; /* ajoute ceci */
    z-index: 0;        /* pour ne pas bloquer les modals */
}

@media (max-width: 992px) { /* tablette */
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) { /* mobile */
    .video-grid {
        grid-template-columns: 1fr;
    }
}
#btn-back-to-top {
    position: fixed;
    bottom: 50px;
    right: 20px;
    display: none; /* caché par défaut */
    z-index: 1000;
}
.embed {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.embed.spotify     { aspect-ratio: 1 / 1.2; }   /* carte verticale */
.embed.soundcloud  { aspect-ratio: 3 / 1; }     /* très large */
.embed.mixcloud    { aspect-ratio: 4 / 1; }
.embed.youtube     { aspect-ratio: 16 / 9; }

/* Featured discography layout */
.zb-featured-coverbox{
  width:100%;
  border-radius: 16px;
  overflow:hidden;
  background:#000;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.zb-featured-coverimg{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Placeholder cover */
.zb-featured-coverph{
  width:100%;
  height:100%;
  background: rgba(0,0,0,.25);
}

/* Desktop: cover carrée + “grosse” */
@media (min-width: 768px){
  .zb-featured-coverbox{ aspect-ratio: 1 / 1; }
}

/* Mobile: un peu plus “banner” */
@media (max-width: 767.98px){
  .zb-featured-coverbox{ aspect-ratio: 16 / 9; }
}

.zb-featured-title{
  font-weight: 900;
  color: var(--title);
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: left;
}

.zb-featured-meta{
  opacity: .92;
  text-align: left;
}

.zb-featured-desc{
  color: var(--text);
  opacity: .82;
  line-height: 1.45;
  text-align: left;
  font-size: 1rem;
}

/* Featured parallax */
.zb-featured-parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.zb-featured-parallax {
  min-height: 320px;
}

/* Désactivation mobile (important) */
@media (max-width: 768px) {
  .zb-featured-parallax {
    background-attachment: scroll;
  }
}

/*.zb-featured-parallax {
  transform: scaleX(-1);
}

.zb-featured-parallax > * {
  transform: scaleX(-1);
}
*/

/* ============ ZB TIMELINE (vertical, date next to dot) ============ */
.zb-timeline{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* 2 colonnes : rail | contenu */
.zb-timeline__item{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:14px;
  align-items:stretch; /* IMPORTANT: rail = même hauteur que le contenu */
}

.zb-timeline__rail{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  padding-top: 2px;

  /* IMPORTANT: pour que la ligne puisse aller jusqu'en bas */
  height: 100%;
  min-height: 100%;
}
.zb-timeline__dot{
  flex: 0 0 auto;
  width:12px;
  height:12px;
  border-radius:999px;
  background: var(--link);
  box-shadow:
    0 0 0 4px rgba(var(--rgb-link), .18),
    0 6px 16px rgba(var(--rgb-link), .14);
  margin-top: 5px;
  z-index:2;
}

/* Ligne verticale: du dessous du point jusqu'en bas de l'item */
.zb-timeline__line{
  position:absolute;
  top: 22px;          /* sous le point */
  bottom: 0;          /* va jusqu'en bas (grâce à align-items:stretch) */
  left: 6px;          /* centre du point (12/2) */
  width: 2px;

  /* rendu premium, basé sur tes vars */
  background: rgba(var(--rgb-link), .22);
  box-shadow: 0 0 0 1px rgba(var(--rgb-link), .06);
  border-radius: 999px;
}



/* Date à côté du point */
.zb-timeline__date{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--text);
  opacity: .9;
  white-space: nowrap;         /* évite les retours qui dégueulent */
  overflow: hidden;
  text-overflow: ellipsis;     /* sécurité si date longue */
    font-weight: 600;
}

/* Dernier élément : pas de ligne 
.zb-timeline__item:last-child .zb-timeline__line{
  display:none;
}*/

.zb-timeline__content{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 16px;
  padding: 14px;
  padding-bottom: 18px; /* donne un espace visuel pour la fin de ligne */
}


/* Mobile : rail plus compact, date autorisée à passer sur 2 lignes */
@media (max-width: 576px){
  .zb-timeline__item{
    grid-template-columns: 1fr;
  }

  .zb-timeline__rail{
    padding-left: 0;
  }

  .zb-timeline__line{
    display:none; /* sur mobile, souvent plus propre sans la ligne */
  }

  .zb-timeline__date{
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
  }
}

.zb-breadcrumb{
    margin-bottom:0px;
    overflow-x:auto;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(var(--rgb-btn),.06), rgba(var(--rgb-bg),.42));
    box-shadow:inset 0 0 0 1px rgba(var(--rgb-btn),.12);}

.zb-breadcrumb ol, .zb-breadcrumb ul  {
    list-style:none;
    display:flex;
    align-items:center;
    margin:0;
    flex-wrap:nowrap;
    padding:10px 14px;
    gap:10px;
    
    font-size:13px;
    white-space:nowrap;
}

.zb-breadcrumb li{
    opacity:.75;
}

.zb-breadcrumb li:last-child{
    opacity:1;
    font-weight:600;
}

.zb-breadcrumb li:not(:last-child)::after{
    content:"/";
    margin-left:10px;
    opacity:.35;
}
.zb-breadcrumb ul li:not(:last-child)::after{
    content:"";
    margin-left:10px;
    opacity:.35;
}

.zb-breadcrumb a{
    text-decoration:none;
    color:inherit;
}

.zb-breadcrumb a:hover{
    text-decoration:underline;
}
.zb-disco-topbar{
  margin:1.5em 0 2em;
  padding:1.6em;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.35));
  border:1px solid rgba(255,255,255,.08);
}

.zb-disco-price{
  font-size:1.6em;
  font-weight:600;
  color:var(--link);
  margin-bottom:1em;
}

.zb-disco-platform-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
  gap:14px;
  margin-bottom:1.4em;
}

.zb-disco-platform-share{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:14px;
  margin-bottom:1.4em;
}

.zb-platform-tile, .zb-platform-share {
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  transition:.25s;
}
.zb-platform-share {
    height: 78px;
    padding: 0.8em 0;

}
.zb-platform-tile:hover { transform:translateY(-3px); background:rgba(255,255,255,.08); }
.zb-platform-share:hover { text-decoration: none; transform:translateY(0); background:rgba(255,255,255,.08);color:var(--text); }
.zb-disco-platform-share .social-icon:hover { transform: scale(1) rotate(0); filter: brightness(1);color:var(--text); }

.zb-disco-platform-line{
  display:flex;
  gap:16px;
  opacity:.55;
}
.zb-disco-platform-line a:hover{opacity:1}


.zb-track-card {background: rgba(255,255,255,.03); padding:1rem; border-radius:14px; border:1px solid rgba(255,255,255,.08);transition:.2s; }
.zb-track-card:hover { background: rgba(255,255,255,.05); }
.zb-track-num{ font-weight:600; min-width:2em; color:var(--link);}
.zb-track-dur{ margin-left:auto; font-size:.9em;}
.zb-track-lyrics pre { background: rgba(255,255,255,.03); padding:.6em; border-radius:6px; overflow-x:auto; }




.zb-lyrics-preview, .zb-lyrics-full {
    border-radius:14px;
    background:linear-gradient(180deg, rgba(var(--rgb-btn),.06), rgba(var(--rgb-btn),.02));
    padding:5px 14px;
    white-space: pre-wrap;   /* respecte les retours à la ligne dans la DB */
    word-break: break-word;   /* coupe les mots trop longs si besoin */
    overflow: hidden;
    box-sizing: border-box;

}
/* Preview limité à 4 lignes avec fondu */
.zb-lyrics-preview {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 25%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}


.zb-lyrics-container.open .zb-lyrics-preview {
    max-height: 0;
    opacity: 0;
}
/* Container avec hauteur fixe pour 4 lignes */
.zb-lyrics-container {
    position: relative;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(var(--rgb-btn), .06), rgba(var(--rgb-btn), .02));
    padding: 10px 14px;
    overflow: hidden;
    max-height: 8em; /* 4 lignes × 1.5 line-height = 6em */
    transition: max-height 0.4s ease;
}

/* Fondu sur les 2 dernières lignes UNIQUEMENT quand fermé */
.zb-lyrics-container::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em; /* 2 lignes */
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(var(--rgb-bg), 0.95) 100%
    );
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* État ouvert */
.zb-lyrics-container.open {
    max-height: 1000px; /* Assez grand */
}

.zb-lyrics-container.open::before {
    opacity: 0; /* Fondu disparaît */
}

/* Contenu */
.zb-lyrics-content {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Bouton toggle */
.zb-lyrics-toggle {
    margin-top: 0.5em;
    padding: 0.3em 0.6em;
    font-size: 0.85em;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--link);
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
}

.zb-lyrics-toggle:hover {
    background: rgba(var(--rgb-link), 0.1);
    border-color: rgba(var(--rgb-link), 0.3);
}

/* Icône chevron qui tourne */
.collapse-icon {
    transition: transform 0.3s ease;
    font-size: 0.9em;
}

.zb-lyrics-container.open + .zb-lyrics-toggle .collapse-icon {
    transform: rotate(180deg);
}

/* Crédits sous paroles */
.zb-track-credits {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.5em 1em;
    background: rgba(255,255,255,0.02);
    font-size: 0.85em;
    color: var(--text);
    opacity: 0.8;
    margin-top: 0.5em;
}

.zb-credit-card{
    background: var(--rgb-bg);
    padding:.6rem;
    height:100%;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.06);
    transition:.25s;
}

.zb-credit-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.08);
}

.zb-credit-role{
  font-size:1em;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.65;
}

.zb-credit-name{
  font-weight:600;
  margin-top:.3em;
}

.zb-credit-note{
  font-size:.8em;
  opacity:.55;
  margin-top:.25em;
}

.bg-blur {
  position: relative;
  overflow: hidden;
}

.bg-blur::before {
  content: "";
  position: absolute;
  inset: -20px;             /* évite les bords transparents */
  background: inherit;
  /*filter: blur(4px) saturate(1.1);*/
  transform: scale(1.05);
  z-index: 0;
}

/* le dégradé + le contenu restent nets */
.bg-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      270deg,
      rgba(var(--rgb-bg), .78),
      rgba(var(--rgb-btn), .92)
  );
  z-index: 1;
}

.bg-blur > * {
  position: relative;
  z-index: 2;
}

/* =============== */
/* Réseaux gratuits */
/* =============== */

/* Facebook */
.text-facebook  { color: #1877F2 !important; }
.bg-facebook    { background-color: #1877F2 !important; color:#ffffff !important; }
.border-facebook{ border-color: #1877F2 !important; }
.btn-facebook   { background-color: #1877F2 !important; border-color:#1877F2 !important; color:#ffffff !important; }

/* Instagram */
.text-instagram  { color: #E4405F !important; }
.bg-instagram    { background-color: #E4405F !important; color:#ffffff !important; }
.border-instagram{ border-color: #E4405F !important; }
.btn-instagram   { background-color: #E4405F !important; border-color:#E4405F !important; color:#ffffff !important; }

/* YouTube */
.text-youtube  { color: #FF0000 !important; }
.bg-youtube    { background-color: #FF0000 !important; color:#ffffff !important; }
.border-youtube{ border-color: #FF0000 !important; }
.btn-youtube   { background-color: #FF0000 !important; border-color:#FF0000 !important; color:#ffffff !important; }

/* TikTok */
.text-tiktok  { color: #000000 !important; }
.bg-tiktok    { background-color: #000000 !important; color:#ffffff !important; }
.border-tiktok{ border-color: #000000 !important; }
.btn-tiktok   { background-color: #000000 !important; border-color:#000000 !important; color:#ffffff !important; }

/* Snapchat */
.text-snapchat  { color: #FFFC00 !important; }
.bg-snapchat    { background-color: #FFFC00 !important; color:#000000 !important; }
.border-snapchat{ border-color: #FFFC00 !important; }
.btn-snapchat   { background-color: #FFFC00 !important; border-color:#FFFC00 !important; color:#000000 !important; }

/* X (Twitter) */
.text-x  { color: #000000 !important; }
.bg-x    { background-color: #000000 !important; color:#ffffff !important; }
.border-x{ border-color: #000000 !important; }
.btn-x   { background-color: #000000 !important; border-color:#000000 !important; color:#ffffff !important; }

/* LinkedIn */
.text-linkedin  { color: #0A66C2 !important; }
.bg-linkedin    { background-color: #0A66C2 !important; color:#ffffff !important; }
.border-linkedin{ border-color: #0A66C2 !important; }
.btn-linkedin   { background-color: #0A66C2 !important; border-color:#0A66C2 !important; color:#ffffff !important; }

/* Pinterest */
.text-pinterest  { color: #E60023 !important; }
.bg-pinterest    { background-color: #E60023 !important; color:#ffffff !important; }
.border-pinterest{ border-color: #E60023 !important; }
.btn-pinterest   { background-color: #E60023 !important; border-color:#E60023 !important; color:#ffffff !important; }

/* WhatsApp */
.text-whatsapp  { color: #25D366 !important; }
.bg-whatsapp    { background-color: #25D366 !important; color:#ffffff !important; }
.border-whatsapp{ border-color: #25D366 !important; }
.btn-whatsapp   { background-color: #25D366 !important; border-color:#25D366 !important; color:#ffffff !important; }

/* Messenger */
.text-messenger  { color: #0084FF !important; }
.bg-messenger    { background-color: #0084FF !important; color:#ffffff !important; }
.border-messenger{ border-color: #0084FF !important; }
.btn-messenger   { background-color: #0084FF !important; border-color:#0084FF !important; color:#ffffff !important; }

/* Threads */
.text-threads  { color: #000000 !important; }
.bg-threads    { background-color: #000000 !important; color:#ffffff !important; }
.border-threads{ border-color: #000000 !important; }
.btn-threads   { background-color: #000000 !important; border-color:#000000 !important; color:#ffffff !important; }

/* Telegram */
.text-telegram  { color: #0088CC !important; }
.bg-telegram    { background-color: #0088CC !important; color:#ffffff !important; }
.border-telegram{ border-color: #0088CC !important; }
.btn-telegram   { background-color: #0088CC !important; border-color:#0088CC !important; color:#ffffff !important; }

/* Reverbnation */
.text-reverbnation   { color: #ED2FD7 !important; }
.bg-reverbnation     { background-color: #ED2FD7 !important; color:#ffffff !important; }
.border-reverbnation { border-color: #ED2FD7 !important; }
.btn-reverbnation    { background-color: #ED2FD7 !important; border-color:#ED2FD7 !important; color:#ffffff !important; }

.zb-footer__links {
  font-size: 0.9em;
    /*background: var(--rgb-bg);*/
  background: rgba(0,0,0,0.8);
  position:relative;
  padding: 15px;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
    font-weight: normal;
    color: #fff;
}
.zb-footer__links a {
    color:#f1f1f1 !important;
    text-decoration: none;
}.zb-footer__links a:hover {
    color:#fff !important;
    text-decoration: underline;;
}
/* =============== */
/* Réseaux premium */
/* =============== */

/* Discord */
/* Discord */
.text-discord  { color: #5865F2 !important; }
.bg-discord    { background-color: #5865F2 !important; color:#ffffff !important; }
.border-discord{ border-color: #5865F2 !important; }
.btn-discord   { background-color: #5865F2 !important; border-color:#5865F2 !important; color:#ffffff !important; }

/* Twitch */
.text-twitch  { color: #9146FF !important; }
.bg-twitch    { background-color: #9146FF !important; color:#ffffff !important; }
.border-twitch{ border-color: #9146FF !important; }
.btn-twitch   { background-color: #9146FF !important; border-color:#9146FF !important; color:#ffffff !important; }

.zb-gallery-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.zb-gallery-card .square-image-wrapper {
    position: relative;
    overflow: hidden;
}

.zb-gallery-card img {
    transition: transform 0.4s ease, filter 0.4s ease;
}

.zb-gallery-card:hover img {
    transform: scale(1.08);
    filter: brightness(0.7);
}

.zb-gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(var(--rgb-bg), 0.85);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 1.5rem;
    border-top: 1px solid rgba(var(--rgb-bg), 1);
}

.zb-gallery-card:hover .zb-gallery-overlay {
    opacity: 1;
    transform: translateY(0);
}

.zb-gallery-info {
    width: 100%;
}

.zb-gallery-info .fw-semibold {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.zb-gallery-info .small {
    font-size: 0.875rem;
    color: var(--link);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.zb-gallery-info .small i {
    font-size: 1rem;
}
.newsletter-alert {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 20px 32px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 15px;
    font-weight: 600;
    max-width: 500px;
    width: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    animation: slideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: all 0.4s ease;
}

.newsletter-alert-success {
    background: rgba(34, 197, 94, 0.15);
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.4);
}

.newsletter-alert-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ffffff;
    border-color: rgba(239, 68, 68, 0.4);
}

.newsletter-alert i {
    font-size: 22px;
    flex-shrink: 0;
    opacity: 0.9;
}

.newsletter-alert span {
    line-height: 1.5;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    .newsletter-alert {
        top: 100px;
        font-size: 14px;
        padding: 16px 24px;
        max-width: calc(100% - 40px);
        border-radius: 12px;
    }
    
    .newsletter-alert i {
        font-size: 20px;
    }
}

/* Modal Shop */
.shop-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999999;
    animation: shopModalFadeIn 0.3s ease;
}

.shop-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.shop-modal-content {
    position: relative;
    max-width: 600px;
    width: 90%;
    margin: 0 auto;
    animation: shopModalSlideUp 0.4s ease;
}

.shop-modal-close {
    position: absolute;
    top: -60px;
    right: 0;
    background: transparent;
    border: none;
    color: var(--zb-light);
    font-size: 2rem;
    cursor: pointer;
    padding: 10px;
    transition: all 0.3s ease;
    z-index: 10;
}

.shop-modal-close:hover {
    transform: rotate(90deg);
    color: var(--zb-primary);
}

.shop-modal-body {
    background: var(--zb-dark);
    border: 2px solid var(--zb-primary);
    border-radius: var(--zb-border-radius-lg);
    padding: 3rem 2.5rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.shop-modal-icon {
    font-size: 4rem;
    color: var(--zb-primary);
    margin-bottom: 1.5rem;
}

.shop-modal-title {
    color: var(--zb-light);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: var(--zb-font-heading);
}

.shop-modal-description {
    color: var(--zb-gray-light);
    font-size: 1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.shop-modal-preview {
    background: var(--zb-darker);
    border: 1px solid var(--zb-gray-dark);
    border-radius: var(--zb-border-radius);
    padding: 2rem;
    margin-bottom: 2rem;
}

.shop-modal-platform {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--zb-primary);
    color: var(--zb-dark);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(var(--zb-primary-rgb), 0.3);
}

.shop-modal-platform i {
    font-size: 1.25rem;
}

.shop-modal-url {
    color: var(--zb-gray);
    font-size: 0.9rem;
    margin: 0;
    font-family: var(--zb-font-mono);
}

.shop-modal-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shop-modal-cta {
    min-width: 250px;
    font-size: 1.1rem;
    padding: 1rem 2rem;
}

.shop-modal-cta i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.shop-modal-cta:hover i {
    transform: translateX(5px);
}

@keyframes shopModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes shopModalSlideUp {
    from { 
        opacity: 0;
        transform: translateY(30px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .shop-modal-body {
        padding: 2rem 1.5rem;
    }
    
    .shop-modal-title {
        font-size: 1.5rem;
    }
    
    .shop-modal-close {
        top: -50px;
        font-size: 1.5rem;
    }
    
    .shop-modal-icon {
        font-size: 3rem;
    }
}

/* ===== CSS additionnel final depuis parseCustomThemeCSS() ===== */
body {background:linear-gradient(0deg,rgba(11,11,11,0.28),rgba(11,11,11,0.28)) fixed, url("/assets/bg/metal/metal-granite-forge4.webp") center/cover no-repeat fixed;}