/* style-v2.css — overrides uniquement, base = style.css */

/* ─── HERO LOGO (remplace H1 texte) ──────────────────────────────────────── */
.hero-logo {
  margin-top: clamp(20px, 3vh, 40px);
  margin-bottom: auto;
  padding: 0;
  line-height: 1;
}
.hero-logo img {
  width: clamp(180px, 28vw, 340px);
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.4));
}

/* ─── LANG TOGGLE ────────────────────────────────────────────────────────── */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-hover);
  border-radius: 3px;
  overflow: hidden;
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 1.5px;
}
.lang-btn {
  padding: 6px 12px;
  color: var(--text-muted);
  background: transparent;
  transition: all 0.18s;
  cursor: pointer;
  border: none;
  font: inherit;
  letter-spacing: inherit;
}
.lang-btn.active {
  background: var(--purple);
  color: #fff;
}
.lang-btn:not(.active):hover { color: #fff; }

.lang-en, .lang-fr { display: none; }
.lang-en.visible, .lang-fr.visible { display: block; }
span.lang-en, span.lang-fr { display: none; }
span.lang-en.visible, span.lang-fr.visible { display: inline; }

/* ─── NAV BOOKING — bouton plein violet ──────────────────────────────────── */
.nav-cta {
  background: var(--purple);
  color: #fff;
}

/* ─── HERO EYEBROW — plus lumineux, même police que le nav ───────────────── */
.hero-eyebrow {
  font-family: var(--font-head);
  color: #c084fc;
  opacity: 1;
}

/* ─── LABELS DE SECTION — plus lisibles ──────────────────────────────────── */
.label {
  font-size: 13px;
}

/* ─── HERO — label au-dessus casquette, boutons restent en bas ───────────── */
.hero-content {
  justify-content: flex-start;
  padding-top: clamp(80px, 11vh, 130px);
  padding-bottom: 60px;
}
.hero-buttons {
  margin-top: 0;
  padding-top: 16px;
}

/* ─── SOUL PILL — boîte S.O.U.L. en bas, illuminée, cliquable ───────────── */
.soul-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 60vh;
}
.soul-pill {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: auto;
  padding: 18px 22px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.22s, border-color 0.22s;
  max-width: 500px;
}
.soul-pill:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.65);
}
.soul-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  margin-top: 6px;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}
.soul-pill span:not(.soul-pill-dot):not(.soul-pill-arrow) {
  font-size: 14px;
  font-weight: 300;
  color: rgba(220, 220, 220, 0.85);
  line-height: 1.65;
}
.soul-pill strong { color: var(--green); font-weight: 500; }
.soul-pill-arrow {
  font-size: 18px;
  color: var(--green);
  opacity: 0.7;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 10px;
  transition: opacity 0.2s, transform 0.2s;
}
.soul-pill:hover .soul-pill-arrow { opacity: 1; transform: translate(2px, -2px); }

/* ─── SOUL — image plus visible, décalée droite ──────────────────────────── */
#soul .soul-bg {
  opacity: 0.75;
}
#soul .soul-bg img {
  object-position: 65% center;
}
#soul .soul-overlay {
  background: linear-gradient(
    100deg,
    rgba(13,13,13,0.92) 0%,
    rgba(13,13,13,0.72) 38%,
    rgba(13,13,13,0.15) 70%,
    rgba(13,13,13,0.05) 100%
  );
}

/* ─── BIO — plein fond image comme le hero ───────────────────────────────── */
#bio {
  position: relative;
  padding: 0;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
}
.bio-bg {
  position: absolute;
  inset: 0;
}
.bio-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.45) saturate(0.8);
}
.bio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(13,13,13,0.88) 0%,
    rgba(13,13,13,0.60) 55%,
    rgba(13,13,13,0.30) 100%
  );
}
.bio-inner {
  position: relative;
  grid-template-columns: 1fr;
  max-width: 700px;
  padding: 80px 60px;
  gap: 32px;
}
.bio-portrait { display: none; }

.bio-text h2 { font-size: clamp(28px, 4vw, 48px); }
.bio-text p  { color: rgba(220,220,220,0.92); max-width: 560px; }
.bio-facts { background: rgba(13,13,13,0.5); border-color: rgba(255,255,255,0.12); }
.bio-fact  { background: rgba(13,13,13,0.4); color: rgba(220,220,220,0.88); font-size: 13px; }
.bio-fact:nth-child(1)::before { background: var(--purple); }
.bio-fact:nth-child(2)::before { background: var(--green); }
.bio-fact:nth-child(3)::before { background: #22d3ee; }
.bio-fact:nth-child(4)::before { background: #fbbf24; }
.bio-fact:nth-child(5)::before { background: #fb923c; }

/* ─── MUSIC — 4 cartes avec icônes ──────────────────────────────────────── */
.music-card {
  padding: 32px 28px 28px;
  gap: 12px;
}
.music-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.music-icon svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.music-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
.music-card {
  padding: 0 0 16px;
  gap: 8px;
}
.music-card .music-title { font-size: 12px; padding: 0 14px; }
.music-card .music-arrow { padding: 0 14px; }
.music-card .music-icon { padding: 0 14px; gap: 7px; }
.music-card .music-icon svg { width: 16px; height: 16px; }
.music-card .music-platform { font-size: 10px; }
.music-styles {
  max-width: 900px;
  margin: 36px auto 0;
  padding: 0 20px;
}
.music-card-cover-yt {
  aspect-ratio: 16 / 7 !important;
}

/* ─── GLOBAL BRIGHTNESS — override --text-muted partout ─────────────────── */
:root { --text-muted: #b2b2b2; }
section { margin-bottom: 20px; }

/* ─── BLACK & BLUE CREDENTIAL (in live section) ──────────────────────────── */
.split-credential {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 220px;
}
.split-credential img {
  width: 100%;
  border-radius: 4px;
  opacity: 0.82;
  transition: opacity 0.25s;
}
.split-credential:hover img { opacity: 1; }
.split-caption {
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(220,220,220,0.45);
}

/* ─── MUSIC SUBTITLE ─────────────────────────────────────────────────────── */
#music h2 { margin-bottom: 12px; }
.music-sub {
  font-size: 15px;
  font-weight: 300;
  color: rgba(220,220,220,0.72);
  margin-bottom: 40px;
  text-align: center;
}

/* ─── SALON DAOMÉ ────────────────────────────────────────────────────────── */
#daome {
  padding: 100px 60px;
  background: rgba(255,255,255,0.02);
}
.daome-wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.daome-intro {
  max-width: 620px;
  font-size: 16px;
  font-weight: 300;
  color: rgba(220,220,220,0.88);
  line-height: 1.8;
  margin: 20px 0 48px;
}
.daome-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
.daome-item {
  width: calc(25% - 12px);
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}
.daome-item img {
  width: 100%;
  height: auto;
  object-fit: unset;
  display: block;
  filter: saturate(0.85) brightness(0.9);
  transition: filter 0.35s, transform 0.35s;
}
.daome-item:hover img {
  filter: saturate(1) brightness(1);
  transform: scale(1.02);
}
.daome-caption {
  display: block;
  font-size: 11px;
  font-style: italic;
  font-weight: 300;
  color: rgba(220,220,220,0.52);
  letter-spacing: 0.3px;
  margin-top: 8px;
  line-height: 1.4;
}

/* ─── MEDAL BLOCK ────────────────────────────────────────────────────────── */
.exp-medal {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin: 52px 0 52px auto;
  padding: 24px;
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 6px;
  background: rgba(168,85,247,0.04);
  max-width: 580px;
}
.exp-medal-img {
  width: 130px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}
.exp-medal-img img {
  width: 100%;
  height: auto;
  object-fit: unset;
  display: block;
}
.exp-medal-label {
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 10px;
}
.exp-medal-text p {
  font-size: 14px;
  font-weight: 300;
  color: rgba(220,220,220,0.88);
  line-height: 1.75;
  margin: 0;
}

/* ─── EXP STATEMENT (grande ligne d'ouverture) ───────────────────────────── */
.exp-statement {
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 300;
  color: rgba(220,220,220,0.88);
  line-height: 1.5;
  max-width: 720px;
  margin: 0 0 32px;
  border-left: 2px solid var(--purple);
  padding-left: 20px;
}

/* ─── EXPERIENCE / PARCOURS ──────────────────────────────────────────────── */
#experience {
  padding: 100px 60px;
}
.exp-wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.exp-intro {
  max-width: 680px;
  font-size: 17px;
  font-weight: 300;
  color: rgba(220,220,220,0.83);
  line-height: 1.8;
  margin: 28px 0 60px;
}
.exp-lists {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 60px;
}
.exp-list-title {
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 18px;
}
.exp-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.exp-item {
  font-size: 14px;
  font-weight: 300;
  color: rgba(220,220,220,0.88);
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
}
.exp-item::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--purple);
  opacity: 0.55;
}
.exp-item a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: color 0.2s, border-color 0.2s;
}
.exp-item a:hover { color: var(--purple); border-color: var(--purple); }
.exp-bio {
  max-width: 720px;
  margin-bottom: 52px;
}
.exp-bio p {
  font-size: 15px;
  font-weight: 300;
  color: rgba(220,220,220,0.82);
  line-height: 1.9;
  margin-bottom: 22px;
}
.exp-bio p:last-child { margin-bottom: 0; }
.exp-styles-label {
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(220,220,220,0.72);
  margin-bottom: 16px;
}
.exp-styles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.exp-style-tag {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.8px;
  padding: 10px 18px;
  border-radius: 3px;
  text-align: center;
  display: block;
}
.exp-styles a.exp-style-tag { text-decoration: none; transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s; }
.exp-styles a.exp-style-tag:hover { opacity: 1; transform: translateY(-2px); filter: brightness(1.15); }
/* Col 1 — Rouge/Rose : positions 1, 5, 9 */
.exp-styles .exp-style-tag:nth-child(1)  { border: 1px solid #ef4444; color: #ef4444; background: rgba(239,68,68,0.09);   box-shadow: 0 0 8px rgba(239,68,68,0.15); }
.exp-styles .exp-style-tag:nth-child(5)  { border: 1px solid #f43f5e; color: #f43f5e; background: rgba(244,63,94,0.09);   box-shadow: 0 0 8px rgba(244,63,94,0.15); }
.exp-styles .exp-style-tag:nth-child(9)  { border: 1px solid #ec4899; color: #ec4899; background: rgba(236,72,153,0.09);  box-shadow: 0 0 8px rgba(236,72,153,0.15); }
/* Col 2 — Jaune/Orange : positions 2, 6, 10 */
.exp-styles .exp-style-tag:nth-child(2)  { border: 1px solid #f59e0b; color: #f59e0b; background: rgba(245,158,11,0.09);  box-shadow: 0 0 8px rgba(245,158,11,0.15); }
.exp-styles .exp-style-tag:nth-child(6)  { border: 1px solid #f97316; color: #f97316; background: rgba(249,115,22,0.09);  box-shadow: 0 0 8px rgba(249,115,22,0.15); }
.exp-styles .exp-style-tag:nth-child(10) { border: 1px solid #fb923c; color: #fb923c; background: rgba(251,146,60,0.09);  box-shadow: 0 0 8px rgba(251,146,60,0.15); }
/* Col 3 — Vert/Teal : positions 3, 7, 11 */
.exp-styles .exp-style-tag:nth-child(3)  { border: 1px solid #84cc16; color: #84cc16; background: rgba(132,204,22,0.09);  box-shadow: 0 0 8px rgba(132,204,22,0.15); }
.exp-styles .exp-style-tag:nth-child(7)  { border: 1px solid #4ade80; color: #4ade80; background: rgba(74,222,128,0.09);  box-shadow: 0 0 8px rgba(74,222,128,0.15); }
.exp-styles .exp-style-tag:nth-child(11) { border: 1px solid #14b8a6; color: #14b8a6; background: rgba(20,184,166,0.09);  box-shadow: 0 0 8px rgba(20,184,166,0.15); }
/* Col 4 — Bleu/Violet : positions 4, 8, 12 */
.exp-styles .exp-style-tag:nth-child(4)  { border: 1px solid #22d3ee; color: #22d3ee; background: rgba(34,211,238,0.09);  box-shadow: 0 0 8px rgba(34,211,238,0.15); }
.exp-styles .exp-style-tag:nth-child(8)  { border: 1px solid #38bdf8; color: #38bdf8; background: rgba(56,189,248,0.09);  box-shadow: 0 0 8px rgba(56,189,248,0.15); }
.exp-styles .exp-style-tag:nth-child(12) { border: 1px solid #a855f7; color: #a855f7; background: rgba(168,85,247,0.09);  box-shadow: 0 0 8px rgba(168,85,247,0.15); }

/* ─── RESPONSIVE OVERRIDES ───────────────────────────────────────────────── */
/* ─── CONTACT ICONS ──────────────────────────────────────────────────────── */
.contact-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-icon {
  width: 15px;
  height: 15px;
  color: var(--purple);
  flex-shrink: 0;
  opacity: 0.75;
}

/* ─── MUSIC CARD COVERS ──────────────────────────────────────────────────── */
.music-card-cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.04);
}
.music-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
  display: block;
}
.music-card:hover .music-card-cover img { transform: scale(1.04); }

/* ─── CONTACT — version lumineuse ───────────────────────────────────────── */
#contact {
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.08);
}
#contact h2 { color: #f0f0f0; }
.contact-sub { color: rgba(220,220,220,0.80); }
.contact-rows { border-color: rgba(255,255,255,0.10); }
.contact-row { border-color: rgba(255,255,255,0.08); }
.contact-row-label { color: #d0d0d0; }
.contact-row-value { color: #b8b8b8; }
.contact-form label { color: #d0d0d0; font-weight: 400; }
.contact-form input,
.contact-form textarea {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  color: #e8e8e8;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(220,220,220,0.38); }
.contact-form input:focus,
.contact-form textarea:focus {
  background: rgba(255,255,255,0.10);
  border-color: var(--purple);
  outline: none;
}
.btn-submit {
  background: var(--purple);
  color: #fff;
  border: none;
  opacity: 1;
  font-weight: 500;
}
.btn-submit:hover { background: #9333ea; }

/* ─── FEATURED PHOTO ─────────────────────────────────────────────────────── */
#featured-photo {
  padding: 60px 40px 80px;
  display: flex;
  justify-content: center;
}
.featured-photo-wrap {
  max-width: 860px;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6);
}
.featured-photo-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.9) brightness(0.95);
  transition: filter 0.5s;
}
.featured-photo-wrap:hover img {
  filter: saturate(1) brightness(1);
}

/* ─── PHOTO GALLERY (Daomé + Octenbulle + Human) ────────────────────────── */
#photo-gallery {
  padding: 100px 60px;
}
.photo-gallery-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.photo-gallery-intro {
  max-width: 620px;
  font-size: 15px;
  font-weight: 300;
  color: rgba(220,220,220,0.75);
  line-height: 1.8;
  margin: 16px 0 48px;
}
.photo-gallery-grid {
  columns: 4;
  column-gap: 12px;
}
.photo-gallery-item {
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: 4px;
  overflow: hidden;
  display: block;
}
.photo-gallery-item img {
  width: 100%;
  height: auto !important;
  object-fit: unset !important;
  display: block;
  filter: saturate(0.85) brightness(0.88);
  transition: filter 0.35s, transform 0.35s;
}
.photo-gallery-item:hover img {
  filter: saturate(1) brightness(1);
  transform: scale(1.02);
}

@media (max-width: 1024px) { .photo-gallery-grid { columns: 3; } }

/* ─── RESPONSIVE OVERRIDES ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bio-inner { padding: 64px 24px; }
  .music-grid { grid-template-columns: 1fr; }
  .lang-toggle { order: -1; }
  #experience { padding: 64px 24px; }
  .exp-lists { grid-template-columns: 1fr; gap: 36px; }
  #daome { padding: 64px 24px; }
  .daome-grid { flex-direction: column; }
  .daome-item { width: 100%; }
  .exp-medal { flex-direction: column; margin-left: 0; }
  .exp-medal-img { width: 100px; }
  .split-credential { max-width: 100%; }
  #photo-gallery { padding: 64px 24px; }
  .photo-gallery-grid { columns: 2; }
  .exp-styles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .photo-gallery-grid { columns: 1; }
  .hero-logo img { width: clamp(140px, 55vw, 220px); }
}