/*
Theme Name: Morçego CDXV
Theme URI: https://ndofline.tv
Author: NDOFLINE Records
Author URI: https://www.youtube.com/@ndoflinetv2k22
Description: Thème WordPress officiel de Morçego — univers rap sombre, spectral et cinématographique. Esthétique occulte / VHS. Développé pour NDOFLINE Records.
Version: 1.6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: morcego
Tags: music, artist, dark, one-page, custom-colors
*/

/* ============================================================
   VARIABLES / DA
   ============================================================ */
:root{
  --black:#050505;
  --ink:#0b0b0d;
  --panel:#101013;
  --bone:#e9e4da;
  --bone-dim:#9a948a;
  --blood:#7a0f12;
  --blood-bright:#b51418;
  --static:#1a1a1f;
  --line:rgba(233,228,218,.12);
  --display:"Cinzel", "Times New Roman", serif;
  --gothic:"Oswald", "Arial Narrow", sans-serif;
  --body:"Inter", system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--black);
  color:var(--bone);
  font-family:var(--body);
  line-height:1.7;
  overflow-x:hidden;
  max-width:100%;
  -webkit-font-smoothing:antialiased;
}
/* Garde-fou anti-débordement : rien ne dépasse la largeur de l'écran */
.wrap,section,.hero{max-width:100%}
img,iframe,video{max-width:100%}

/* film grain + scanlines overlay */
body::before{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.5;
}
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.wrap{max-width:1180px;width:100%;margin:0 auto;padding:0 24px;min-width:0}

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:.04em;line-height:1.1}
.section-title{
  font-family:var(--gothic);text-transform:uppercase;letter-spacing:.4em;
  font-size:.8rem;color:var(--blood-bright);margin-bottom:1.4rem;
  display:flex;align-items:center;gap:14px;
}
.section-title::before{content:"";width:38px;height:1px;background:var(--blood-bright)}
.quote{font-family:var(--display);font-style:italic;color:var(--bone)}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;background:linear-gradient(180deg,rgba(5,5,5,.95),rgba(5,5,5,0));
  transition:background .3s;
}
.site-header.scrolled{background:rgba(5,5,5,.96);border-bottom:1px solid var(--line)}
.brand{font-family:var(--display);font-size:1.15rem;letter-spacing:.3em;text-transform:uppercase}
.brand span{color:var(--blood-bright)}
.nav-toggle{display:none;background:none;border:none;color:var(--bone);font-size:1.6rem;cursor:pointer;position:relative;z-index:101;line-height:1;padding:4px 6px}
.main-nav ul{display:flex;gap:30px;list-style:none}
.main-nav a{
  font-family:var(--gothic);text-transform:uppercase;font-size:.78rem;letter-spacing:.22em;
  color:var(--bone-dim);transition:color .2s;position:relative;
}
.main-nav a:hover{color:var(--bone)}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--blood-bright);transition:width .25s}
.main-nav a:hover::after{width:100%}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  position:relative;padding:120px 0 80px;text-align:center;
  background:radial-gradient(ellipse at 50% 30%,rgba(122,15,18,.22),transparent 60%),var(--black);
}
.hero .glyph{font-family:var(--display);font-size:clamp(3rem,15vw,12rem);line-height:.9;letter-spacing:.02em;white-space:nowrap;max-width:100%}
.hero .glyph em{font-style:normal;color:var(--blood-bright);text-shadow:0 0 40px rgba(181,20,24,.5)}
.hero .sub{font-family:var(--gothic);text-transform:uppercase;letter-spacing:.5em;font-size:.85rem;color:var(--bone-dim);margin-top:18px;overflow-wrap:break-word;max-width:100%}
.hero .lead-quote{font-family:var(--display);font-style:italic;font-size:clamp(1.1rem,2.4vw,1.7rem);margin:34px auto 0;max-width:680px;color:var(--bone)}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:42px;max-width:100%}

.btn{
  font-family:var(--gothic);text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;
  padding:14px 26px;border:1px solid var(--bone);color:var(--bone);
  transition:all .25s;display:inline-block;background:transparent;cursor:pointer;
}
.btn:hover{background:var(--bone);color:var(--black)}
.btn-blood{border-color:var(--blood-bright);color:var(--bone);background:var(--blood)}
.btn-blood:hover{background:var(--blood-bright);color:#fff}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:100px 0;position:relative}
.bio{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.bio p{margin-bottom:1.1rem;color:var(--bone-dim)}
.bio p strong{color:var(--bone);font-weight:600}
.bio-img{position:relative}
.bio-img img{filter:grayscale(.4) contrast(1.1);border:1px solid var(--line)}
.bio-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(122,15,18,.25));pointer-events:none}

/* ADN */
.adn{background:linear-gradient(180deg,var(--ink),#0d0d10);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.adn::before{content:"ADN";position:absolute;top:-3.5rem;right:2rem;font-family:var(--display);font-weight:900;font-size:18rem;line-height:1;color:var(--bone);opacity:.025;pointer-events:none;user-select:none}
.adn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:34px;counter-reset:adn}
.adn-card{
  position:relative;padding:30px 26px 28px;background:rgba(16,16,19,.7);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;
  transition:transform .3s,border-color .3s,background .3s;counter-increment:adn;
}
.adn-card::before{
  content:counter(adn,decimal-leading-zero);position:absolute;top:16px;right:18px;
  font-family:var(--gothic);font-weight:300;font-size:1.1rem;color:var(--bone);opacity:.18;letter-spacing:.05em;
}
.adn-card::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--blood-bright);transform:scaleY(0);transform-origin:top;transition:transform .35s}
.adn-card:hover{transform:translateY(-4px);border-color:rgba(181,20,24,.5);background:rgba(20,16,17,.85)}
.adn-card:hover::after{transform:scaleY(1)}
.adn-card h4{font-family:var(--gothic);text-transform:uppercase;letter-spacing:.3em;font-size:.68rem;color:var(--blood-bright);margin-bottom:14px}
.adn-card p{color:var(--bone);font-size:1.02rem;line-height:1.5;font-family:var(--display);font-style:italic;opacity:.92}
.adn-card--wide{grid-column:span 2}
@media(max-width:560px){.adn-card--wide{grid-column:span 1}}

/* RELEASES */
.releases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px;margin-top:34px;counter-reset:rel}
.release{
  position:relative;border:1px solid var(--line);background:var(--panel);
  border-radius:2px;overflow:hidden;counter-increment:rel;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;
}
.release:hover{transform:translateY(-8px);border-color:rgba(181,20,24,.55);box-shadow:0 24px 50px -20px rgba(122,15,18,.55)}
.release-cover{
  aspect-ratio:1;background:var(--static) center/cover;position:relative;
  display:flex;align-items:flex-end;filter:grayscale(.25) contrast(1.05);transition:filter .4s,transform .6s;
}
.release:hover .release-cover{filter:grayscale(0) contrast(1.08);transform:scale(1.03)}
.release-cover::before{
  content:counter(rel,decimal-leading-zero);position:absolute;top:14px;left:16px;z-index:2;
  font-family:var(--display);font-weight:900;font-size:1.5rem;color:var(--bone);
  text-shadow:0 2px 14px rgba(0,0,0,.9);opacity:.85;
}
.release-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.15) 0%,transparent 35%,rgba(5,5,5,.92) 100%)}
.release-body{padding:22px 24px 26px;position:relative;z-index:1}
.release-body .tag{
  display:inline-block;font-family:var(--gothic);text-transform:uppercase;letter-spacing:.28em;
  font-size:.62rem;color:var(--blood-bright);padding:4px 10px;border:1px solid rgba(181,20,24,.45);border-radius:2px;
}
.release-body h3{font-size:1.55rem;margin:14px 0 12px;line-height:1.1}
.release-body .quote{display:block;font-family:var(--display);font-style:italic;font-size:.95rem;color:var(--bone-dim);margin-bottom:14px}
.release-body p{margin-bottom:18px}
.release-body .btn{width:100%;text-align:center}

/* CLIPS */
.clips{background:var(--ink);border-top:1px solid var(--line)}
.clips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:30px}
.clip iframe{width:100%;aspect-ratio:16/9;border:1px solid var(--line);display:block}
.clip h3{font-size:1.2rem;margin-top:14px}
.clip p{color:var(--bone-dim);font-size:.9rem}

/* clip preview (thumbnail -> player) */
.clip-player{position:relative;aspect-ratio:16/9;border:1px solid var(--line);background:var(--static);cursor:pointer;overflow:hidden;display:block}
@supports not (aspect-ratio:16/9){.clip-player{height:0;padding-bottom:56.25%}.clip-player .clip-thumb,.clip-player iframe{position:absolute;inset:0}}
.clip-player .clip-thumb{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05) brightness(.82);transition:filter .35s,transform .6s}
.clip-player::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.1),rgba(122,15,18,.25));opacity:.7;transition:opacity .35s}
.clip-player:hover .clip-thumb{filter:grayscale(0) contrast(1.05) brightness(1);transform:scale(1.04)}
.clip-player:hover::after{opacity:.4}
.clip-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.clip-play svg{width:74px;height:52px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6));transition:transform .25s}
.clip-play-bg{fill:var(--blood);opacity:.92;transition:fill .25s}
.clip-player:hover .clip-play svg{transform:scale(1.12)}
.clip-player:hover .clip-play-bg{fill:var(--blood-bright)}
.clip-player:focus-visible{outline:2px solid var(--blood-bright);outline-offset:2px}
.clip-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.clip-empty{
  position:relative;aspect-ratio:16/9;border:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 40%,rgba(122,15,18,.22),transparent 65%),var(--static);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;overflow:hidden;transition:border-color .3s,background .3s;
}
.clip-empty::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 4px);opacity:.4;pointer-events:none}
.clip-empty:hover{border-color:rgba(181,20,24,.6);background:radial-gradient(ellipse at 50% 40%,rgba(122,15,18,.32),transparent 65%),var(--static)}
.clip-empty-glyph{
  width:62px;height:62px;border:1px solid rgba(233,228,218,.3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--bone);
  padding-left:4px;transition:all .3s;
}
.clip-empty:hover .clip-empty-glyph{border-color:var(--blood-bright);background:var(--blood);color:#fff}
.clip-empty-label{font-family:var(--display);font-size:1.05rem;color:var(--bone);letter-spacing:.04em;padding:0 16px}
.clip-empty-hint{font-family:var(--gothic);text-transform:uppercase;letter-spacing:.22em;font-size:.6rem;color:var(--bone-dim)}

/* LINKS BAND */
.links-band{text-align:center;background:radial-gradient(ellipse at 50% 50%,rgba(122,15,18,.18),transparent 70%)}
.links-band .btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* CONTACT */
.contact{text-align:center;border-top:1px solid var(--line)}
.contact .info{font-family:var(--gothic);text-transform:uppercase;letter-spacing:.18em;font-size:1rem;margin:8px 0;color:var(--bone)}
.contact .info a{color:var(--blood-bright)}
.socials{display:flex;gap:22px;justify-content:center;margin-top:30px}

/* contact form */
.contact-form{max-width:560px;margin:30px auto 0;text-align:left;display:flex;flex-direction:column;gap:14px}
.contact-form .cf-row{display:flex;gap:14px}
.contact-form .cf-row > *{flex:1}
.contact-form input,.contact-form textarea{
  width:100%;background:var(--panel);border:1px solid var(--line);color:var(--bone);
  font-family:var(--body);font-size:.95rem;padding:13px 15px;transition:border-color .2s;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--bone-dim)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--blood-bright)}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form .btn{align-self:flex-start;border:none;cursor:pointer}
.contact-form .cf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.contact-form .cf-feedback{margin:0;font-family:var(--gothic);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;min-height:1.2em}
.contact-form .cf-feedback.ok{color:#5fae6a}
.contact-form .cf-feedback.err{color:var(--blood-bright)}
.contact-form.sending button{opacity:.5;pointer-events:none}
@media(max-width:560px){.contact-form .cf-row{flex-direction:column}}

.socials a{
  width:54px;height:54px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:all .25s;color:var(--bone-dim);
}
.socials a:hover{border-color:var(--blood-bright);color:var(--bone);background:var(--blood)}
.socials svg{width:22px;height:22px;fill:currentColor}

/* FOOTER */
.site-footer{border-top:1px solid var(--line);padding:40px 0;text-align:center;background:var(--ink)}
.site-footer .brand{display:block;margin-bottom:14px}
.footer-nav{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;list-style:none}
.footer-nav a{font-family:var(--gothic);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--bone-dim)}
.footer-nav a:hover{color:var(--blood-bright)}
.copy{font-size:.72rem;color:var(--bone-dim);letter-spacing:.2em;text-transform:uppercase}

/* reveal animation (n'occulte le contenu que si le JS est actif) */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:860px){
  .bio{grid-template-columns:1fr;gap:36px}
  .nav-toggle{display:block}
  .main-nav{
    position:fixed;inset:0;background:rgba(5,5,5,.98);
    display:flex;align-items:center;justify-content:center;
    transform:translateX(100%);transition:transform .35s;z-index:99;
  }
  .main-nav.open{transform:none}
  .main-nav ul{flex-direction:column;gap:30px;text-align:center}
  .main-nav a{font-size:1.1rem}
}

/* Tablette / grand téléphone */
@media(max-width:680px){
  .wrap{padding:0 18px}
  section{padding:70px 0}
  .site-header{padding:14px 18px}
  .hero{padding:110px 0 70px}
  .hero-cta{gap:12px}
  .hero-cta .btn{flex:1 1 auto;text-align:center}
  .adn::before{font-size:9rem;top:-1.5rem;right:1rem}
  .releases-grid,.clips-grid,.adn-grid{gap:18px}
  .links-band .btns{flex-direction:column}
  .links-band .btns .btn{width:100%;text-align:center}
}

/* Petit téléphone */
@media(max-width:420px){
  .wrap{padding:0 14px}
  .hero .glyph{font-size:13.5vw;white-space:nowrap}
  .hero .sub{letter-spacing:.25em;font-size:.68rem}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .btn{padding:13px 18px;font-size:.74rem}
  .section-title{letter-spacing:.28em}
  .release-body h3{font-size:1.35rem}
  .socials{gap:16px}
  .socials a{width:48px;height:48px}
  .site-footer .footer-nav{gap:16px}
}