/* ============================================================
   STONAN — Site officiel
   DA : pirate futuriste · noir / blanc / argent · touches or
   Display : Pirata One · Texte : Archivo
   ============================================================ */

:root{
  --noir:#0a0b0d;
  --encre:#121317;
  --acier:#1d2027;
  --ligne:#262a33;
  --argent:#c7ccd6;
  --gris:#8a909c;
  --blanc:#f4f5f7;
  --or:#c9a55c;
  --or-clair:#e8cf96;
  --header-h:64px;
  --max:1100px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--noir);
  color:var(--argent);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

::selection{background:var(--or);color:var(--noir)}

/* ---------- Typo ---------- */
h1,h2,h3,.display{
  font-family:'Pirata One',cursive;
  font-weight:400;
  color:var(--blanc);
  line-height:1.05;
  letter-spacing:.01em;
}
h1{font-size:clamp(2.6rem,9vw,5.2rem)}
h2{font-size:clamp(2rem,6vw,3.2rem)}
h3{font-size:clamp(1.35rem,4vw,1.8rem)}
p{max-width:65ch}
strong{color:var(--blanc);font-weight:600}

.eyebrow{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--or);
  display:block;
  margin-bottom:.9rem;
}

/* Titre métallique — signature */
.metal{
  background:linear-gradient(175deg,#f7f8fa 0%,#c7ccd6 38%,#6f7684 52%,#d7dbe2 66%,#9aa1ad 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
}

/* ---------- Header ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(10,11,13,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ligne);
}
.header-in{
  width:100%;max-width:var(--max);margin:0 auto;
  padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{width:34px;height:34px}
.brand span{
  font-family:'Pirata One',cursive;
  font-size:1.5rem;color:var(--blanc);letter-spacing:.04em;
}
.nav{display:flex;gap:1.6rem}
.nav a{
  font-size:.82rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);
  padding:.4rem 0;
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--blanc)}
.nav a[aria-current="page"]{color:var(--or);border-color:var(--or)}

.burger{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;position:relative;z-index:110;
}
.burger span{
  position:absolute;left:10px;right:10px;height:2px;background:var(--blanc);
  transition:transform .3s,opacity .3s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:820px){
  .burger{display:block}
  .nav{
    position:fixed;
    top:0;left:0;
    width:100vw;height:100dvh;
    background:rgba(8,9,11,.98);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(.9rem,3.5vh,1.5rem);
    padding:calc(var(--header-h) + 12px) 24px 32px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s ease,visibility .25s ease;
    overflow-y:auto;
    z-index:105;
  }
  .nav.open{opacity:1;visibility:visible;pointer-events:auto}
  .nav a{
    font-size:1.15rem;
    width:100%;max-width:320px;
    text-align:center;
    padding:.65rem 0;
    border:0;
    border-bottom:1px solid var(--ligne);
  }
  .nav a:last-child{border-bottom:0}
  .nav a[aria-current="page"]{color:var(--or);border-bottom:1px solid var(--or)}
}

/* ---------- Sections ---------- */
main{padding-top:var(--header-h)}
.section{padding:72px 20px}
.section-in{max-width:var(--max);margin:0 auto}
.section.alt{background:var(--encre)}

/* Séparateur sabre */
.sabre{
  display:flex;align-items:center;gap:14px;
  max-width:var(--max);margin:0 auto;padding:0 20px;
}
.sabre::before,.sabre::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--ligne) 30%,var(--or) 50%,var(--ligne) 70%,transparent);
}
.sabre img{width:26px;height:26px;opacity:.85}

/* ---------- Hero (accueil) ---------- */
.hero{
  min-height:calc(100svh - var(--header-h));
  position:relative;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:url("../assets/img/hero-cagoule.webp") center 25%/cover no-repeat;
  filter:saturate(.9) contrast(1.06) brightness(.92);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,11,13,.45) 0%,rgba(10,11,13,.15) 35%,rgba(10,11,13,.92) 82%,var(--noir) 100%),
    radial-gradient(120% 60% at 50% 100%,rgba(201,165,92,.10),transparent 60%);
}
.hero-in{
  position:relative;z-index:2;
  width:100%;max-width:var(--max);margin:0 auto;
  padding:0 20px 56px;
}
.hero h1{
  font-size:clamp(4rem,17vw,10rem);
  margin:.2rem 0 .6rem;
}
.hero .tagline{
  font-size:clamp(1rem,2.6vw,1.25rem);
  color:var(--argent);
  max-width:34rem;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.8rem}

/* Glint métallique au chargement */
@keyframes glint{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.hero h1.metal{
  background-image:
    linear-gradient(100deg,transparent 40%,rgba(255,246,220,.9) 50%,transparent 60%),
    linear-gradient(175deg,#f7f8fa 0%,#c7ccd6 38%,#6f7684 52%,#d7dbe2 66%,#9aa1ad 100%);
  background-size:250% 100%,100% 100%;
  background-repeat:no-repeat;
  animation:glint 2.4s ease .5s 1 both;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.6rem;
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--argent);
  color:var(--blanc);
  transition:background .2s,color .2s,border-color .2s,transform .15s;
}
.btn:hover{background:var(--blanc);color:var(--noir);transform:translateY(-2px)}
.btn.or{border-color:var(--or);color:var(--or-clair)}
.btn.or:hover{background:var(--or);color:var(--noir)}
.btn.plein{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.btn.plein:hover{background:var(--or);border-color:var(--or)}

/* ---------- Grille discographie ---------- */
.grid-tracks{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  margin-top:2.2rem;
}
.track{
  background:var(--encre);
  border:1px solid var(--ligne);
  transition:transform .22s,border-color .22s;
  display:flex;flex-direction:column;
}
.track:hover{transform:translateY(-5px);border-color:var(--or)}
.track .cover{position:relative;aspect-ratio:1;overflow:hidden;background:var(--acier)}
.track .cover img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.track:hover .cover img{transform:scale(1.04)}
.cover-mono{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  background:
    radial-gradient(80% 80% at 50% 30%,rgba(201,165,92,.08),transparent),
    var(--acier);
}
.cover-mono img{width:38%;height:auto;opacity:.9}
.cover-mono span{font-family:'Pirata One',cursive;font-size:1.6rem;color:var(--argent)}
.track-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:.35rem;flex:1}
.track-body h3{font-size:1.5rem}
.track-meta{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.track-links{margin-top:auto;padding-top:.8rem;display:flex;flex-wrap:wrap;gap:.5rem}
.track-links a{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.42rem .8rem;border:1px solid var(--ligne);color:var(--argent);
  transition:border-color .2s,color .2s;
}
.track-links a:hover{border-color:var(--or);color:var(--or-clair)}

/* ---------- Galerie ---------- */
.grid-gal{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  margin-top:2rem;
}
.grid-gal figure{
  position:relative;overflow:hidden;cursor:pointer;
  border:1px solid var(--ligne);aspect-ratio:1;background:var(--acier);
}
.grid-gal img{width:100%;height:100%;object-fit:cover;transition:transform .35s,filter .35s}
.grid-gal figure:hover img{transform:scale(1.05);filter:brightness(1.08)}
.grid-gal figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 12px 10px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(180deg,transparent,rgba(10,11,13,.85));
  color:var(--argent);
}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(6,7,9,.94);
  display:none;align-items:center;justify-content:center;
  padding:24px;
}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,900px);max-height:86vh;object-fit:contain;border:1px solid var(--ligne)}
.lightbox button{
  position:absolute;top:18px;right:18px;
  width:46px;height:46px;
  background:none;border:1px solid var(--argent);color:var(--blanc);
  font-size:1.3rem;cursor:pointer;
}

/* ---------- Presse ---------- */
.presse-card{
  display:grid;gap:0;
  grid-template-columns:1fr 1.1fr;
  background:var(--encre);border:1px solid var(--ligne);
  margin-top:2.2rem;
}
.presse-card .visuel{position:relative;min-height:280px;background:var(--acier)}
.presse-card .visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.presse-body{padding:34px 30px;display:flex;flex-direction:column;gap:.9rem}
.presse-body .media{
  font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--or);
}
.presse-body blockquote{
  border-left:2px solid var(--or);
  padding-left:1rem;color:var(--blanc);font-style:italic;
}
@media (max-width:760px){.presse-card{grid-template-columns:1fr}}

/* ---------- Clips ---------- */
.clip{
  position:relative;aspect-ratio:16/9;
  background:var(--acier);border:1px solid var(--ligne);
  overflow:hidden;cursor:pointer;margin-top:2rem;
}
.clip img{width:100%;height:100%;object-fit:cover;filter:brightness(.75);transition:filter .25s,transform .35s}
.clip:hover img{filter:brightness(.95);transform:scale(1.02)}
.clip .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;
  border:2px solid var(--blanc);
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,11,13,.55);
  transition:background .2s,border-color .2s;
}
.clip:hover .play{background:var(--or);border-color:var(--or)}
.clip .play::after{
  content:"";display:block;margin-left:6px;
  border-left:20px solid var(--blanc);
  border-top:12px solid transparent;border-bottom:12px solid transparent;
}
.clip:hover .play::after{border-left-color:var(--noir)}
.clip iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.clip-titre{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 18px 14px;
  background:linear-gradient(180deg,transparent,rgba(10,11,13,.9));
  font-family:'Pirata One',cursive;font-size:1.5rem;color:var(--blanc);
}

/* ---------- Liens officiels ---------- */
.grid-liens{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  margin-top:1.4rem;
}
@media (max-width:560px){.grid-liens{grid-template-columns:1fr 1fr;gap:8px}}
.lien-card{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:13px 16px;
  background:var(--encre);border:1px solid var(--ligne);
  transition:border-color .2s,transform .2s;
}
.lien-card:hover{border-color:var(--or);transform:translateY(-2px)}
.lien-card .nom{font-weight:600;font-size:.9rem;color:var(--blanc);letter-spacing:.03em}
.lien-card .fleche{color:var(--or);font-size:1rem;transition:transform .2s}
.lien-card:hover .fleche{transform:translateX(4px)}
.liens-groupe{margin-top:2.4rem}
.liens-groupe h2{
  font-family:'Archivo',sans-serif;
  font-size:.75rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gris);
  display:flex;align-items:center;gap:12px;
}
.liens-groupe h2::after{content:"";flex:1;height:1px;background:var(--ligne)}

/* ---------- Box contact rapide ---------- */
.qc-overlay{
  position:fixed;inset:0;z-index:210;
  background:rgba(6,7,9,.85);
  display:none;align-items:center;justify-content:center;
  padding:24px;
}
.qc-overlay.open{display:flex}
.qc-box{
  width:100%;max-width:380px;
  background:var(--encre);
  border:1px solid var(--or);
  padding:28px 26px 26px;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.qc-box .qc-close{
  position:absolute;top:10px;right:10px;
  width:38px;height:38px;
  background:none;border:1px solid var(--ligne);color:var(--argent);
  font-size:1rem;cursor:pointer;
  transition:border-color .2s,color .2s;
}
.qc-box .qc-close:hover{border-color:var(--or);color:var(--or-clair)}
.qc-box h3{font-size:1.6rem;margin-bottom:1.1rem}
.qc-item{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.85rem 0;
  border-top:1px solid var(--ligne);
}
.qc-item .qc-label{
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
}
.qc-item a{
  color:var(--or-clair);font-weight:600;word-break:break-all;
  transition:color .2s;
}
.qc-item a:hover{color:var(--blanc)}

/* ---------- Bio ---------- */
.bio-grid{
  display:grid;gap:40px;
  grid-template-columns:1fr 1fr;
  align-items:start;margin-top:2rem;
}
.bio-grid .photo{border:1px solid var(--ligne)}
.bio-text p + p{margin-top:1rem}
@media (max-width:760px){.bio-grid{grid-template-columns:1fr}}

/* ---------- Aperçus accueil ---------- */
.apercu{display:grid;gap:26px;grid-template-columns:repeat(3,1fr);margin-top:2.2rem}
@media (max-width:820px){.apercu{grid-template-columns:1fr}}
.apercu-card{
  background:var(--encre);border:1px solid var(--ligne);
  padding:28px 24px;
  display:flex;flex-direction:column;gap:.8rem;
  transition:border-color .2s,transform .2s;
}
.apercu-card:hover{border-color:var(--or);transform:translateY(-4px)}
.apercu-card h3{font-size:1.7rem}
.apercu-card p{font-size:.94rem;color:var(--gris)}
.apercu-card .aller{margin-top:auto;padding-top:.6rem;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}

/* ---------- Formulaire / contact ---------- */
.contact-box{
  margin-top:2rem;background:var(--encre);border:1px solid var(--ligne);
  padding:34px 30px;max-width:640px;
}
.contact-box .mail{
  font-family:'Pirata One',cursive;font-size:clamp(1.4rem,4.5vw,2rem);
  color:var(--or-clair);word-break:break-all;
}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--ligne);
  background:var(--encre);
  padding:48px 20px 32px;
  margin-top:72px;
}
.footer-in{
  max-width:var(--max);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start;
}
.footer .brand span{font-size:1.3rem}
.footer-socials{display:flex;flex-wrap:wrap;gap:.5rem;max-width:520px}
.footer-socials a{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.42rem .8rem;border:1px solid var(--ligne);color:var(--gris);
  transition:border-color .2s,color .2s;
}
.footer-socials a:hover{border-color:var(--or);color:var(--or-clair)}
.footer-legal{
  width:100%;margin-top:26px;padding-top:20px;border-top:1px solid var(--ligne);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-size:.78rem;color:var(--gris);
}
.footer-legal a:hover{color:var(--blanc)}

/* ---------- Page 404 ---------- */
.p404{
  min-height:calc(100svh - var(--header-h));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 20px;gap:1.2rem;
}
.p404 img{width:110px;opacity:.9}
.p404 h1{font-size:clamp(3.5rem,14vw,7rem)}

/* ---------- Reveal au scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.vu{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* Lisibilité du texte hero sur fond clair */
.hero .eyebrow{
  color:#0a0b0d;
  font-weight:700;
  text-shadow:none;
}
.hero .tagline{text-shadow:0 1px 10px rgba(0,0,0,.8)}

/* ---------- Intro vidéo ---------- */
#intro{
  position:fixed;inset:0;z-index:400;
  background:var(--noir);
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .6s ease;
}
#intro video{
  width:100%;height:100%;object-fit:cover;
}
/* Mobile portrait : vidéo entière centrée, pas de zoom */
@media (orientation:portrait){
  #intro video{object-fit:contain}
}
#intro.intro-out{opacity:0;pointer-events:none}
.intro-vue #intro{display:none}
.intro-ui{
  position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));
  display:flex;justify-content:flex-end;align-items:center;
  padding:0 22px;
}
.intro-ui button{
  background:rgba(10,11,13,.55);
  border:1px solid var(--argent);
  color:var(--blanc);
  font-family:'Archivo',sans-serif;
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:.65rem 1.1rem;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .2s,color .2s,border-color .2s;
}
.intro-ui button:hover{background:var(--or);border-color:var(--or);color:var(--noir)}