/* ============================================================
   ASAMAN MUSIC LABEL — Design System CSS
   Version 2.1 — Plugin NamasaProject Core
   Mobile-first | Tablette | Desktop
   Scope : .asaman-page-root (isolation Astra Pro)
   Auteur : Nicolas Alteirac / Namasa Project
============================================================ */

/* ─── VARIABLES ─────────────────────────────────────────── */
.asaman-page-root {
  --asaman-bg:            #0a0a0a;
  --asaman-bg-card:       rgba(20, 20, 20, 0.65);
  --asaman-card-blur:     8px;
  --asaman-card-radius:   20px;
  --asaman-shadow:        rgba(0, 0, 0, 0.32);
  --asaman-shadow-hover:  rgba(0, 0, 0, 0.48);
  --asaman-transition:    0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  --asaman-font:          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --asaman-text:          #ffffff;
  --asaman-text-dim:      rgba(255, 255, 255, 0.80);
  --asaman-text-muted:    rgba(255, 255, 255, 0.45);

  /* Dégradés plateformes */
  --asaman-yt:   linear-gradient(135deg, #c00 0%, #ff4d4d 100%);
  --asaman-sp:   linear-gradient(135deg, #127f3a 0%, #1ed760 100%);
  --asaman-dz:   linear-gradient(135deg, #004fa3 0%, #0076D6 100%);
  --asaman-am:   linear-gradient(135deg, #6a6a6a 0%, #c8c8c8 100%);
  --asaman-fb:   linear-gradient(135deg, #1a56db 0%, #4285f4 100%);
  --asaman-tt:   linear-gradient(135deg, #010101 0%, #25f4ee 100%);

  --asaman-focus: rgba(120, 210, 255, 0.55);
}

/* ─── RESET SCOPE ────────────────────────────────────────── */
.asaman-page-root,
.asaman-page-root * {
  box-sizing: border-box;
}

.asaman-page-root {
  font-family:   var(--asaman-font);
  color:         var(--asaman-text);
  background:    var(--asaman-bg);
  overflow-x:    hidden;
  -webkit-font-smoothing: antialiased;
}

.asaman-page-root h1,
.asaman-page-root h2,
.asaman-page-root p {
  margin: 0;
}

.asaman-page-root img {
  max-width: 100%;
  height:    auto;
  display:   block;
}

/* ─── HEADER / HERO ──────────────────────────────────────── */
.asaman-site-header {
  position:        relative;
  display:         grid;
  gap:             clamp(28px, 5vw, 48px);
  justify-items:   center;
  text-align:      center;
  padding:         clamp(60px, 10vw, 110px) clamp(20px, 5vw, 60px) clamp(40px, 6vw, 80px);
  overflow:        hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
    #0a0a0a;
}

/* Halo lumineux discret derrière le header */
.asaman-site-header::before {
  content:  "";
  position: absolute;
  inset:    -20%;
  z-index:  0;
  background: radial-gradient(
    circle at center,
    rgba(120, 150, 255, 0.14),
    transparent 55%
  );
  filter:          blur(40px);
  pointer-events:  none;
}

.asaman-site-header > * {
  position: relative;
  z-index:  1;
}

/* Desktop : layout 3 colonnes */
@media (min-width: 900px) {
  .asaman-site-header {
    grid-template-columns: auto 1fr;
    grid-template-rows:    auto auto;
    text-align:            left;
    justify-items:         start;
    column-gap:            clamp(32px, 5vw, 64px);
  }

  .asaman-logo {
    grid-row: 1 / 3;
  }

  .asaman-nav {
    grid-column: 2;
  }
}

/* ─── LOGO VINYL ─────────────────────────────────────────── */
.asaman-logo {
  display:         grid;
  place-items:     center;
  width:           clamp(130px, 28vw, 210px);
  aspect-ratio:    1 / 1;
  border-radius:   50%;
  filter:          drop-shadow(0 0 28px rgba(0, 180, 255, 0.22));
  transition:      filter var(--asaman-transition);
}

.asaman-logo:hover {
  filter: drop-shadow(0 0 42px rgba(0, 220, 255, 0.35));
}

.asaman-logo img {
  width:         100%;
  border-radius: 50%;
  animation:     asaman-vinyl-spin 30s linear infinite;
  will-change:   transform;
}

@keyframes asaman-vinyl-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .asaman-logo img { animation: none; }
}

/* ─── INTRO TEXTE ────────────────────────────────────────── */
.asaman-site-intro {
  max-width: 780px;
}

.asaman-site-intro h1 {
  font-size:      clamp(1.9rem, 5.5vw, 3.4rem);
  font-weight:    900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height:    1.08;
  margin-bottom:  14px;
  color:          #fff;
  text-shadow:
    0 0 14px rgba(0, 180, 255, 0.30),
    0 0 36px rgba(0, 180, 255, 0.12);
  animation:      asaman-glow-text 6s ease-in-out infinite;
}

.asaman-site-intro p {
  font-size:   clamp(0.9rem, 2vw, 1.1rem);
  line-height: 1.72;
  color:       var(--asaman-text-dim);
}

@keyframes asaman-glow-text {
  0%, 100% {
    text-shadow:
      0 0 12px rgba(0, 180, 255, 0.28),
      0 0 30px rgba(0, 180, 255, 0.10);
  }
  50% {
    text-shadow:
      0 0 20px rgba(0, 180, 255, 0.42),
      0 0 50px rgba(0, 180, 255, 0.18);
  }
}

/* ─── NAVIGATION 3 ZONES ─────────────────────────────────── */
.asaman-nav {
  width:           100%;
  max-width:       820px;
  display:         grid;
  grid-template-columns: 1fr;
  gap:             16px;
  align-items:     center;
}

/* Tablette+ : 3 colonnes */
@media (min-width: 640px) {
  .asaman-nav {
    grid-template-columns: 1fr auto;
    gap:                   20px;
  }
}

.asaman-nav--compact {
  max-width: 620px;
}

/* ── Zone gauche : réseaux sociaux ── */
.asaman-nav__social {
  display:         flex;
  flex-wrap:       wrap;
  gap:             10px;
  justify-content: center;
}

@media (min-width: 640px) {
  .asaman-nav__social {
    justify-content: flex-start;
  }
}

.asaman-nav__link {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         10px 18px;
  border-radius:   999px;
  font-size:       13px;
  font-weight:     600;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  color:           #fff;
  text-decoration: none;
  border:          1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  transition:      transform var(--asaman-transition),
                   box-shadow var(--asaman-transition),
                   border-color var(--asaman-transition);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04) 60%),
    rgba(255, 255, 255, 0.05);
  min-height: 44px;
}

.asaman-nav__link:hover {
  transform:       translateY(-2px);
  border-color:    rgba(255, 255, 255, 0.28);
  box-shadow:      0 6px 24px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  color:           #fff;
}

.asaman-nav__link--facebook:hover {
  background: var(--asaman-fb);
  border-color: transparent;
}

.asaman-nav__link--tiktok:hover {
  background: var(--asaman-tt);
  border-color: rgba(37, 244, 238, 0.4);
}

.asaman-nav__link-icon {
  font-size:   14px;
  line-height: 1;
}

/* ── Zone droite : MON CV ── */
.asaman-nav__right {
  display:         flex;
  justify-content: center;
}

@media (min-width: 640px) {
  .asaman-nav__right {
    justify-content: flex-end;
  }
}

.asaman-nav__cv {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         10px 18px;
  border-radius:   999px;
  text-decoration: none;
  color:           rgba(255, 255, 255, 0.72);
  font-size:       13px;
  font-weight:     600;
  letter-spacing:  0.04em;
  border:          1px solid rgba(255, 255, 255, 0.12);
  background:      rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  transition:
    transform var(--asaman-transition),
    color var(--asaman-transition),
    border-color var(--asaman-transition),
    background var(--asaman-transition);
  min-height: 44px;
}

.asaman-nav__cv:hover {
  transform:       translateY(-2px);
  color:           #fff;
  border-color:    rgba(255, 255, 255, 0.30);
  background:      rgba(255, 255, 255, 0.09);
  text-decoration: none;
}

.asaman-nav__cv-icon {
  font-size: 14px;
}

/* ─── SECTION ALBUMS (conteneur principal) ───────────────── */
.asaman-home {
  background: var(--asaman-bg);
  padding:    0;
}

/* ─── NOUVEL ALBUM ───────────────────────────────────────── */
.asaman-new-album {
  padding:    clamp(48px, 8vw, 96px) clamp(20px, 5vw, 60px);
  background: linear-gradient(180deg, #0d0d0d 0%, #111 100%);
  text-align: center;
}

.asaman-new-album header {
  margin-bottom: 32px;
}

.asaman-album-title {
  display:        block;
  font-size:      clamp(1.6rem, 4.5vw, 3.2rem);
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height:    1.12;
  margin-bottom:  16px;

  background:
    linear-gradient(90deg,
      #d6a24a 0%,
      #f8f0c8 40%,
      #f2e47a 60%,
      #d6a24a 100%);
  background-size:           300% 100%;
  -webkit-background-clip:   text;
  background-clip:           text;
  -webkit-text-fill-color:   transparent;
  animation:                 asaman-shimmer 4s linear infinite;
}

.asaman-album-date {
  display:        block;
  font-size:      clamp(0.85rem, 1.8vw, 1.1rem);
  font-weight:    500;
  letter-spacing: 0.08em;
  opacity:        0.80;
  margin-top:     8px;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.72);
}

@keyframes asaman-shimmer {
  0%   { background-position: 0%   50%; }
  100% { background-position: 200% 50%; }
}

.asaman-new-album > .album {
  max-width:     720px;
  margin:        0 auto;
}

.asaman-new-album > .album + .album {
  margin-top: clamp(24px, 5vw, 44px);
}

.asaman-new-album p {
  font-size:   clamp(0.95rem, 2vw, 1.15rem);
  color:       var(--asaman-text-dim);
  line-height: 1.75;
  max-width:   680px;
  margin:      0 auto;
}

/* ─── HERO UNIVERS ───────────────────────────────────────── */
.asaman-hero {
  position:   relative;
  padding:    clamp(64px, 9vw, 110px) clamp(20px, 5vw, 60px);
  text-align: center;
  overflow:   hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 55%),
    #0b0b0b;
}

.asaman-hero::before {
  content:    "";
  position:   absolute;
  inset:      -10%;
  z-index:    0;
  background: radial-gradient(
    circle at center,
    rgba(120, 150, 255, 0.20),
    transparent 52%
  );
  filter:     blur(36px);
}

.asaman-hero h1 {
  position:       relative;
  font-size:      clamp(2rem, 6vw, 4.2rem);
  font-weight:    900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom:  20px;
  color:          #fff;
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.15),
    0 0 32px rgba(160, 190, 255, 0.14);
}

.asaman-hero p {
  position:    relative;
  max-width:   680px;
  margin:      0 auto;
  font-size:   clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.65;
  color:       rgba(255, 255, 255, 0.68);
}

/* ─── GRILLE D'ALBUMS ────────────────────────────────────── */
.asaman-albums {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   clamp(16px, 3vw, 28px);
  padding:               clamp(32px, 6vw, 64px) clamp(20px, 5vw, 60px);
  max-width:             1400px;
  margin:                0 auto;
}

@media (max-width: 600px) {
  .asaman-albums {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 601px) and (max-width: 980px) {
  .asaman-albums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .asaman-site-header {
    padding-top: 42px;
  }

  .asaman-nav__social,
  .asaman-nav__right {
    width: 100%;
    justify-content: center;
  }

  .asaman-nav__link,
  .asaman-nav__cv {
    min-width: min(100%, 220px);
    justify-content: center;
  }
}

/* ─── CARD ALBUM ─────────────────────────────────────────── */
.album {
  content-visibility: auto;
  contain-intrinsic-size: 520px;
  display:         flex;
  flex-direction:  column;
  border-radius:   var(--asaman-card-radius);
  background:      var(--asaman-bg-card);
  backdrop-filter: blur(var(--asaman-card-blur));
  border:          1px solid rgba(255, 255, 255, 0.09);
  overflow:        hidden;
  box-shadow:      0 8px 28px var(--asaman-shadow);
  cursor:          default;
  transition:
    transform var(--asaman-transition),
    box-shadow var(--asaman-transition),
    border-color var(--asaman-transition);
}

.album:hover {
  transform:    translateY(-4px);
  box-shadow:   0 14px 34px var(--asaman-shadow-hover),
                0 0 22px rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.album img {
  width:       100%;
  aspect-ratio: 1 / 1;
  object-fit:   cover;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition:    transform var(--asaman-transition);
}

.album:hover img {
  transform: scale(1.02);
}

.album h2 {
  font-size:     1.1rem;
  font-weight:   700;
  margin:        14px 14px 6px;
  color:         rgba(255, 255, 255, 0.92);
}

.album > p {
  margin:      0 14px 14px;
  font-size:   0.88rem;
  line-height: 1.62;
  color:       var(--asaman-text-dim);
  flex:        1;
}

/* ─── LIENS PLATEFORMES ──────────────────────────────────── */
.album-links {
  display:         flex;
  flex-wrap:       wrap;
  gap:             8px;
  padding:         0 14px 16px;
  margin-top:      auto;
}

.album-links a {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  text-decoration: none;
  font-weight:     700;
  font-size:       0.82rem;
  padding:         8px 14px;
  border-radius:   10px;
  color:           #fff;
  background:      rgba(255, 255, 255, 0.10);
  border:          1px solid rgba(255, 255, 255, 0.15);
  position:        relative;
  overflow:        hidden;
  box-shadow:      0 3px 12px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--asaman-transition),
    box-shadow var(--asaman-transition);
  min-height: 38px;
}

.album-links a::before {
  content:         "";
  position:        absolute;
  inset:           0;
  opacity:         0;
  background:      rgba(255, 255, 255, 0.12);
  transition:      opacity var(--asaman-transition);
}

.album-links a:hover {
  transform:       translateY(-2px) scale(1.04);
  box-shadow:      0 8px 24px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  color:           #fff;
}

.album-links a:hover::before {
  opacity: 1;
}

/* Couleurs plateformes */
.album-links a[aria-label="YouTube"],
.album-links a:nth-child(1) {
  background: var(--asaman-yt);
  border-color: transparent;
}

.album-links a[aria-label="Spotify"],
.album-links a:nth-child(2) {
  background: var(--asaman-sp);
  border-color: transparent;
}

.album-links a[aria-label="Deezer"],
.album-links a:nth-child(3) {
  background: var(--asaman-dz);
  border-color: transparent;
}

.album-links a[aria-label="Apple Music"],
.album-links a:nth-child(4) {
  background: var(--asaman-am);
  border-color: transparent;
  color: #111;
}

.album-links a[aria-label="Apple Music"]:hover,
.album-links a:nth-child(4):hover {
  color: #111;
}

/* ─── FOOTER ARTISTIQUE ──────────────────────────────────── */
.asaman-footer {
  position:   relative;
  padding:    clamp(72px, 10vw, 120px) clamp(20px, 5vw, 60px) clamp(48px, 7vw, 80px);
  text-align: center;
  overflow:   hidden;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    linear-gradient(to bottom, #0c0c0c, #050505);
}

.asaman-footer::before {
  content:         "";
  position:        absolute;
  inset:           0;
  background:      radial-gradient(
    circle at center,
    rgba(0, 180, 255, 0.07),
    transparent 65%
  );
  pointer-events:  none;
}

.asaman-footer-inner {
  position:   relative;
  max-width:  680px;
  margin:     0 auto;
}

.asaman-footer-quote {
  font-size:      clamp(1.1rem, 2.4vw, 1.55rem);
  line-height:    1.65;
  letter-spacing: 0.04em;
  color:          rgba(255, 255, 255, 0.85);
  margin-bottom:  36px;
  text-shadow:
    0 0 14px rgba(0, 180, 255, 0.22),
    0 2px 20px rgba(0, 0, 0, 0.75);
}

.asaman-footer-signature {
  font-size:      0.82rem;
  letter-spacing: 0.38em;
  font-weight:    700;
  color:          rgba(255, 255, 255, 0.58);
  margin-bottom:  12px;
  text-transform: uppercase;
}

.asaman-footer-meta {
  font-size:      0.68rem;
  letter-spacing: 0.16em;
  color:          rgba(255, 255, 255, 0.28);
}

/* ─── RESPONSIVE FINAL ───────────────────────────────────── */
@media (max-width: 480px) {
  .asaman-nav__cv {
    width:      100%;
    max-width:  200px;
    justify-content: center;
  }
}

/* ─── SÉCURITÉ ISOLATION ASTRA ───────────────────────────── */
/* Empêche Astra d'interférer sur les éléments ASAMAN */
.asaman-page-root a:not(.asaman-nav__link):not(.asaman-nav__cv):not(.album-links a) {
  color: inherit;
}

.asaman-page-root .entry-content p {
  margin-bottom: 0;
}

/* Override des marges Astra sur les h1/h2 dans le conteneur */
.asaman-page-root h1,
.asaman-page-root h2 {
  margin-top: 0;
}