:root{
      /* Apple‑Luxe night indigo */
      --bg:#05061a;
      --panel:#0a0c26;
      --panel2:#07081b;
      --text:#eef1ff;
      --muted:#c2c9e6;
      --soft:#8f97c2;

      --gold:#d6b15a;
      --gold2:#b8923a;
      --line:rgba(214,177,90,.22);

      --shadow: 0 26px 80px rgba(0,0,0,.55);
      --radius: 22px;
      --radius2: 28px;
      --max: 1120px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
  margin:0;
  background:
    radial-gradient(1200px 900px at 14% 0%, rgba(214,177,90,.10), transparent 54%),
    radial-gradient(1000px 760px at 86% 8%, rgba(98,114,255,.22), transparent 58%),
    radial-gradient(900px 700px at 50% 100%, rgba(64,78,180,.16), transparent 62%),
    linear-gradient(180deg, #11183a 0%, #0d1330 38%, #0a1028 100%);
  background-color:#0d1330;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.45;
  font-size:16px;
}

    a{color:inherit; text-decoration:none}
    a:hover{opacity:.95}

    .wrap{max-width:var(--max); margin:0 auto; padding:28px 18px 80px}

    /* Top bar */
    .top{
      display:flex; gap:10px;
      padding:10px 0 18px;
      flex-direction:column;
    }
    .topRow{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
    }
    @media (min-width: 881px){
      .top{flex-direction:row; align-items:center; justify-content:space-between; gap:14px;}
      .topRow{flex: 0 1 auto; justify-content:flex-start;}
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      min-width: 0;
    }
    /* Logo wrapper: wider, and image fills the box */
    .logo{
      width:92px; height:52px; border-radius:12px;
      border:1px solid rgba(214,177,90,.35);
      background: rgba(10,12,38,.35);
      box-shadow: 0 10px 28px rgba(214,177,90,.09);
      overflow:hidden;
      flex: 0 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .logoImg{width:100%; height:100%; object-fit:contain; display:block; padding:0;}
    .brand h1{
      font-size:14px; margin:0; letter-spacing:.18em; text-transform:uppercase;
      color:rgba(238,241,255,.92);
      white-space:nowrap;
    }
    .brand span{
      display:block; font-size:12px; color:var(--soft); letter-spacing:.06em;
      max-width: 54ch;
    }

    .nav{
      display:flex; gap:10px; flex-wrap:wrap;
      justify-content:flex-start;
    }
    @media (min-width: 881px){
      .nav{justify-content:flex-end;}
    }
    @media (max-width: 425px){
      .nav{gap:8px; justify-content:space-between;}
      .pill{padding:8px 10px; font-size:11px;}
    }
    .pill{
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(214,177,90,.30);
      background: linear-gradient(180deg, rgba(214,177,90,.20), rgba(214,177,90,.06));
      color:rgba(238,241,255,.92);
      font-size:12px;
      letter-spacing:.06em;
      backdrop-filter: blur(8px);
      display:inline-flex; align-items:center; gap:8px;
      cursor:pointer;
    }
    .pill.gold{
      border-color: rgba(214,177,90,.42);
      background: linear-gradient(180deg, rgba(214,177,90,.18), rgba(214,177,90,.06));
    }
    .langPill{
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(214,177,90,.18);
      background:rgba(7,8,27,.35);
      display:inline-flex; align-items:center; gap:8px;
    }
    .flag{
      width:20px; height:14px;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.14);
      display:block;
    }
    .langPill a{display:inline-flex; align-items:center; gap:8px}
    .langPill a:hover{opacity:1}
    .langPill .sep{width:1px; height:14px; background:rgba(214,177,90,.16)}

    @media (max-width: 680px){
      .brand span{display:none}
      .nav{gap:8px}
      .pill{padding:10px 10px}
    }

    /* Hero */
    .hero{
      margin-top:10px;
      border-radius: var(--radius2);
      border:1px solid rgba(214,177,90,.20);
      background:
        linear-gradient(180deg, rgba(10,12,38,.72), rgba(7,8,27,.72));
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }

    .heroBanner{
  width:100%;
  max-height:440px;
  overflow:hidden;
  border-bottom:1px solid rgba(214,177,90,.14);
  background: rgba(214,177,90,.06);
  position:relative;
}

.heroBanner::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.06),
      rgba(7,8,27,0.10)
    );
  pointer-events:none;
}

.heroBanner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 40%,
      rgba(7,8,27,0.35) 100%
    );
  pointer-events:none;
}

.hero h1{
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

.hero{
  transform:translateZ(0);
}

.heroBanner img{
  width:100%;
  height:440px;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:contrast(1.02) saturate(1.02);
}

/* Mobile */
@media (max-width: 768px){

  .heroBanner{
    max-height:none;
  }

  .heroBanner img{
    height:auto;
    object-fit:contain;
  }

}

    .heroInner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  padding:28px 26px 30px;
  align-items:start;
}
@media (max-width: 880px){
  .heroInner{grid-template-columns:1fr; padding:22px 18px 24px}
}

/* --- Effet visuel albums --- */

.albumCard{
  transition: transform .35s ease, box-shadow .35s ease;
}

.albumCard img{
  transition: transform .45s ease;
}

.albumCard:hover{
  transform: translateY(-6px);
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    0 0 0 1px rgba(214,177,90,.35),
    0 0 28px rgba(214,177,90,.25);
}

.albumCard:hover img{
  transform: scale(1.05);
}

    .kicker{
      font-size:12px;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:rgba(214,177,90,.85);
      margin:0 0 10px;
    }
    .heroTitle{
      font-size:44px;
      line-height:1.02;
      margin:0;
      letter-spacing:-0.02em;
    }
    @media (max-width: 520px){ .heroTitle{font-size:36px} }
    .heroTitle .gold{color:var(--gold)}
    .heroSub{
      margin:14px 0 0;
      color:rgba(238,241,255,.86);
      font-size:16px;
      max-width:62ch;
    }
    .ctaRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
    .btn{
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(214,177,90,.25);
      background:rgba(7,8,27,.35);
      color:rgba(238,241,255,.96);
      font-size:13px;
      letter-spacing:.06em;
      display:inline-flex; align-items:center; gap:10px;
      cursor:pointer;
      transition: transform .06s ease, opacity .2s ease;
      margin:8px 10px;
    }
    .btn:active{transform: translateY(1px)}
    .btn.primary{
      background: linear-gradient(180deg, rgba(214,177,90,.22), rgba(214,177,90,.08));
      border-color: rgba(214,177,90,.45);
    }
    .btn small{opacity:.8; letter-spacing:.12em}

    .heroCard{
      border-radius: var(--radius);
      border:1px solid rgba(214,177,90,.18);
      background: linear-gradient(180deg, rgba(7,8,27,.55), rgba(7,8,27,.28));
      padding:18px 16px;
    }
    .heroCard h3{margin:0 0 10px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:rgba(214,177,90,.85)}
    .heroCard p{margin:0; color:rgba(238,241,255,.82); font-size:13px}
    .divider{height:1px; background:rgba(214,177,90,.18); margin:14px 0}
    .mini{display:flex; gap:12px; align-items:flex-start; color:rgba(238,241,255,.78); font-size:13px}
    .dot{width:10px; height:10px; border-radius:50%; background:rgba(214,177,90,.85); box-shadow: 0 0 0 6px rgba(214,177,90,.10); margin-top:5px; flex:0 0 auto}

    /* Sections */
    section{margin-top:26px}
    .sectionHead{
      display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
      margin:0 0 12px;
    }
    .sectionHead h2{
      margin:0;
      font-size:20px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:rgba(238,241,255,.92);
    }
    .sectionHead p{margin:0; color:var(--soft); font-size:13px}

    .card{
      border-radius: var(--radius);
      border:1px solid rgba(214,177,90,.18);
      background: linear-gradient(180deg, rgba(10,12,38,.62), rgba(7,8,27,.28));
      box-shadow: 0 18px 50px rgba(0,0,0,.35);
      overflow:hidden;
    }
    .card.pad{padding:18px 16px}
    .muted{color:rgba(238,241,255,.74)}
    .fine{color:var(--soft)}
    .goldText{color:rgba(214,177,90,.92)}
    .hr{height:1px; background:rgba(214,177,90,.14); margin:14px 0}

    .twoCol{display:grid; gap:14px; grid-template-columns: 1fr 1fr}
    @media (max-width: 880px){ .twoCol{grid-template-columns:1fr} }
    /* Slightly favor text on desktop for image+text blocks */
    @media (min-width: 881px){
      .twoCol.imgText{grid-template-columns: .9fr 1.1fr; align-items:center}
    }

    /* Media boxes (prevents mobile overflow) */
    .mediaBox{
      border-radius: 22px;
      overflow: hidden;
      border:1px solid rgba(214,177,90,.14);
      background: rgba(5,6,10,.35);
    }
    .mediaBox img{width:100%; height:100%; object-fit:cover; display:block;}
    .clubBox{aspect-ratio: 16 / 10; max-height: 360px;}
    @media (max-width: 880px){
      .clubBox{aspect-ratio: 4 / 3; max-height: 55vh;}
    }

    .mediaRow{display:grid; gap:14px; grid-template-columns: 1fr 1fr; align-items:stretch}
    @media (max-width: 880px){ .mediaRow{grid-template-columns:1fr} }

    .mediaBox{
      border-radius: 18px;
      border:1px solid rgba(214,177,90,.14);
      background: rgba(5,6,20,.35);
      overflow:hidden;
      min-height: 260px;
    }
    @media (max-width: 880px){ .mediaBox{min-height: 220px} }
    .mediaBox.slim{min-height: 220px}
    .mediaBox img{width:100%; height:100%; object-fit:cover; display:block}

    /* App section: mobile layout (image full width, then text + badges) */
    @media (max-width: 640px){
      #app .mediaRow{grid-template-columns:1fr !important;}
      #app .mediaBox{min-height:auto; padding:0;}
      #app .mediaBox img{height:auto; object-fit:cover;}
      #app .mediaContent{padding-top:6px;}
    }

    /* Quote */
    .quote{
      margin:10px 0 0;
      font-size:15px;
      padding:14px 14px;
      border-left:2px solid rgba(214,177,90,.60);
      background: rgba(214,177,90,.06);
      border-radius: 14px;
      color:rgba(238,241,255,.82);
    }

    /* Form */
    audio{width:100%}
    label{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(238,241,255,.72); margin:10px 0 6px}
    input, textarea{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(214,177,90,.28);
      background: rgba(4,5,18,.78);
      padding:12px 12px;
      color:var(--text);
      outline:none;
    }
    input:focus, textarea:focus{border-color: rgba(214,177,90,.55); box-shadow: 0 0 0 4px rgba(214,177,90,.10)}
    textarea{min-height:130px; resize:vertical}
    .formRow{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
    @media (max-width: 640px){ .formRow{grid-template-columns:1fr} }
    .submit{margin-top:12px; width:100%; justify-content:center}

    /* Stats */
    .stats{display:grid; gap:10px; grid-template-columns: repeat(3, 1fr)}
    @media (max-width: 880px){ .stats{grid-template-columns: repeat(2, 1fr);} }
    @media (max-width: 520px){ .stats{grid-template-columns: 1fr;} }

    .stat{
      padding:16px 14px;
      border-radius: 18px;
      border:1px solid rgba(214,177,90,.16);
      background: rgba(7,8,27,.40);
      display:flex; gap:12px; align-items:center;
      min-height: 84px;
    }
    .statIcon{
      width:46px; height:46px;
      border-radius: 14px;
      border:1px solid rgba(214,177,90,.18);
      background: rgba(5,6,20,.35);
      display:flex; align-items:center; justify-content:center;
      flex: 0 0 auto;
      overflow:hidden;
    }
    .statIcon img{width:70%; height:70%; object-fit:contain; display:block}
    .statText b{display:block; font-size:18px; letter-spacing:-0.01em}
    .statText span{display:block; margin-top:6px; color:var(--soft); font-size:12px; letter-spacing:.10em; text-transform:uppercase}

    /* Albums */
    .albumsGrid{display:grid; gap:12px; grid-template-columns: repeat(3, 1fr)}
    @media (max-width: 880px){ .albumsGrid{grid-template-columns: repeat(2, 1fr);} }
    @media (max-width: 560px){ .albumsGrid{grid-template-columns: 1fr;} }

    .albumCard{
      border-radius: 22px;
      border:1px solid rgba(214,177,90,.18);
      background: linear-gradient(180deg, rgba(10,12,38,.68), rgba(7,8,27,.25));
      overflow:hidden;
      box-shadow: 0 18px 50px rgba(0,0,0,.35);
      display:flex; flex-direction:column;
    }
    .cover{
      aspect-ratio: 1 / 1;
      background: rgba(214,177,90,.06);
      border-bottom:1px solid rgba(214,177,90,.14);
      display:flex; align-items:center; justify-content:center;
      position:relative;
    }
    .cover img{width:100%; height:100%; object-fit:cover; display:block}
    .cover .ph{color:rgba(238,241,255,.60); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
    .albumBody{padding:14px 14px 12px}
    .albumBody h3{margin:0; font-size:15px; letter-spacing:.02em}
    .albumBody p{margin:6px 0 0; color:rgba(238,241,255,.72); font-size:13px}
    .albumActions{padding:0 14px 14px}
    .tiny{font-size:12px; color:var(--soft)}
    .tagline{margin:8px 0 0; color:rgba(233,237,247,.78); font-size:13px; line-height:1.35}
    .tracklist{
      margin:10px 0 0;
      padding:10px 12px;
      border-radius:16px;
      border:1px solid rgba(214,177,90,.14);
      background: rgba(4,5,18,.58);
      color:rgba(238,241,255,.74);
      font-size:12px;
    }
    .tracklist ul{margin:8px 0 0; padding-left:18px}
    .tracklist li{margin:4px 0}

    /* Store badges */
    .storeRow{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:12px}
    .storeBadge{
      display:inline-flex;
      border-radius: 14px;
      border:1px solid rgba(214,177,90,.18);
      background: rgba(7,8,27,.35);
      overflow:hidden;
    }
    .storeBadge img{height:56px; width:auto; display:block}
    @media (max-width: 520px){ .storeBadge img{height:52px} }

    /* Footer */
    .footerImg{
      margin-top:26px;
      border-radius: var(--radius2);
      border:1px solid rgba(214,177,90,.18);
      overflow:hidden;
      background: rgba(214,177,90,.06);
      box-shadow: 0 18px 55px rgba(0,0,0,.35);
    }
    .footerImg img{width:100%; height:auto; display:block}

    footer{
      margin-top:18px;
      color:rgba(238,241,255,.55);
      font-size:12px;
      border-top:1px solid rgba(214,177,90,.12);
      padding-top:18px;
      display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
    }

    .toast{
      position: fixed;
      bottom: 18px; left: 50%; transform: translateX(-50%);
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(214,177,90,.22);
      background: rgba(7,8,27,.82);
      backdrop-filter: blur(10px);
      color: rgba(238,241,255,.92);
      font-size: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
    }
    .toast.show{opacity: 1;}
  
    /* Layout tuning for desktop balance */
    @media (min-width: 900px){
      #procede .mediaRow{grid-template-columns: .9fr 1.1fr}
      #tests .mediaRow,
      #artistes .mediaRow,
      #app .mediaRow,
      #ateliers .mediaRow{grid-template-columns: .85fr 1.15fr}
      #tests .mediaBox,
      #artistes .mediaBox,
      #app .mediaBox,
      #ateliers .mediaBox{max-width: 420px; margin-left:auto; margin-right:auto}
      #tests .card.pad p.muted,
      #artistes .card.pad p.muted{font-size:15px; line-height:1.45}
    }
  
    /* Layout tuning v8 */
    @media (min-width: 900px){
      #procede .mediaRow{grid-template-columns: .9fr 1.1fr}
      #procede .card.pad{padding:28px}
      #tests .mediaRow,
      #artistes .mediaRow,
      #app .mediaRow,
      #ateliers .mediaRow{grid-template-columns: .82fr 1.18fr}
      #tests .mediaBox,
      #artistes .mediaBox,
      #app .mediaBox,
      #ateliers .mediaBox{max-width: 420px; margin-left:auto; margin-right:auto}
      #tests .card.pad p.muted,
      #artistes .card.pad p.muted{font-size:15px; line-height:1.5}
    }
    

.footerEnd{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  justify-content:flex-end;
}
.footerLink{
  color:rgba(233,237,247,.62);
  font-size:12px;
  letter-spacing:.06em;
  text-decoration:none;
}
.footerLink:hover{color:rgba(233,237,247,.80)}
.yt img{width:22px; height:22px; display:block; opacity:.9}
.yt:hover img{opacity:1}
@media (max-width: 520px){
  .footerEnd{justify-content:flex-start}
}

    /* --- Media blocks: keep images inside the viewport on all screens --- */
    .mediaCard{
      display:grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      gap:18px;
      align-items:center;
    }
    .mediaImg{min-width:0;}
    .mediaImg img{
      width:100%;
      height:auto;
      display:block;
      max-width:100%;
      border-radius:22px;
    }
    @media (max-width: 980px){
      .mediaCard{grid-template-columns:1fr;}
    }
    /* Club image: prevent oversize on small screens */
    #club .mediaImg img{max-height:420px; object-fit:contain;}
    @media (max-width: 980px){
      #club .mediaImg img{max-height:55vh;}
    }
#club .clubBox {
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin: 0 auto;
}

#club .clubBox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}
  
    /* Mobile header: logo + title + flags on first row, menu on second row */
    @media (max-width: 520px){
      .top{gap:10px}
      .topRow{gap:10px}
      .brand h1{font-size:12px; letter-spacing:0.22em}
      .brand .sub{
  display:block;
  font-size:11px;
  line-height:1.2;
}
      .logo{width:60px;height:34px}
      .langPill{padding:6px 8px; gap:6px}
      .langPill .sep{display:none}
      .flag{width:22px; height:16px}
      .nav{justify-content:flex-start; flex-wrap:wrap}
      .nav .pill{flex:1 1 calc(50% - 8px); text-align:center}
    }

  
    .cardImg img{width:100%; height:auto; display:block; border-radius:18px}
    .cardImg{overflow:hidden}


    /* --- Desktop balance: image/text sections --- */
    @media (min-width: 900px){
      .twoCol{align-items:center;}
      .mediaRow{align-items:center;}

      .twoCol > div:last-child,
      .mediaRow > div:last-child{
        max-width: 560px;
      }

      #procede .mediaRow > div:last-child,
      #tests .mediaRow > div:last-child,
      #partout .mediaRow > div:last-child,
      #artistes .mediaRow > div:last-child,
      #app .mediaRow > div:last-child,
      #pros .twoCol > div:last-child,
      #club .twoCol > div:last-child{
        max-width: 540px;
      }
    }

/* --- Applications clés BMO --- */
.appsIntro{
  max-width: 760px;
  color: rgba(238,241,255,.78);
}

.appsGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
}

@media (max-width: 880px){
  .appsGrid{grid-template-columns:1fr}
}

.appCard{
  height:100%;
  display:flex;
  flex-direction:column;
}

.appCard .mediaBox{
  min-height: 220px;
  margin-bottom: 14px;
}

.appCardBody{
  display:flex;
  flex-direction:column;
  flex:1;
}

.appCardBody p{
  margin:0;
}

.appCardBody .ctaRow{
  margin-top:auto;
  padding-top:16px;
}

.appLabel{
  display:inline-block;
  margin-bottom:10px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(214,177,90,.82);
}