.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

/* ---------- Hero avec parallax ---------- */

/*
   Le parallax est assuré par:
   - background-attachment: fixed sur .hero (le paysage reste « collé » à la fenêtre)
   - le titre (.hero-content) qui scrolle normalement avec la page.
   Ainsi, le titre « part » vers le haut avant que la sensation de
   mouvement du fond soit vraiment marquée.
*/

#home {
  display: grid;
}

#yeyu .frame-text {
  font-variant: small-caps;
}

.hero {
  position: relative;
  height: 100vh;
  padding-top: var(--nav-height);

  background-image: url("assets/home/home_bg.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* parallax simple, full CSS */

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

/* voile léger pour adoucir le paysage et mieux lire le titre */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(255, 240, 200, 0.2),
      transparent 55%
    ),
    linear-gradient(to top, black 15%, transparent 80% 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: block;
  align-items: center;
  justify-content: center;
}

/* Image de titre PNG centrée */
.hero-title {
  max-width: 60vw;
  width: 500px;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
  opacity: 0;
  animation: fadeInUp 1.7s ease-out 1.3s forwards;
}

/* Sous-titre avec police majestueuse */
.hero-subtitle {
  margin-top: 1.2rem;
  opacity: 0;
  animation: fadeInUp 2.0s ease-out 2.2s forwards;
  text-align: center;
}

.hero-subtitle p {
  margin: 0;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 450;
  font-variant: small-caps;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-shadow:
    0 4px 12px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(243, 228, 185, 0.6);
  color: #f6e5b0;
  line-height: 1.1;
}

/* Animation d'apparition fluide */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .hero-subtitle p {
    font-size: clamp(0.95rem, 5vw, 1.3rem);
    letter-spacing: 0.15em;
  }
}

/* ---------- Contenu de la page sous le hero ---------- */

.page-content {
  background: radial-gradient(circle at top, #1a0a12 0, #050308 55%);
}

.section {
  max-width: 900px;
  margin: 0 auto;
  padding: 6rem 1.5rem;
}

.section h2 {
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f6e5b0;
  margin-bottom: 1.5rem;
}

.section p {
  line-height: 1.7;
  color: #f5e7d5;
}

/* ---------- Section Character ---------- */
.character-section,
.stories-section {
  position: relative;
  /*min-height: 120vh;*/
  overflow: hidden;
}

/* Panneau parallax principal (part en premier) */
.character-panel {
  height: 130vh;
  display: flex;
  align-items: center;
}

/* Fond paysage parallax */
.panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  z-index: -1;
}

.panel-bg-character {
  background-image: url("assets/home/realistic-yeyu.webp");
}

.panel-bg-character2 {
  background-image: url("assets/home/character_section.webp");
}

.panel-bg-wanderer {
  background-image: url("assets/home/persona-bg-wanderer.webp");
}

.panel-bg-outlaw {
  background-image: url("assets/home/persona-bg-outlaw.webp");
}

.panel-bg-geji {
  background-image: url("assets/home/persona-bg-geji.webp");
}

.panel-bg-courtesan {
  background-image: url("assets/home/persona-bg-courtesan.webp");
}

#personas-intro {
  background:
    linear-gradient(to bottom, rgba(10, 5, 0, 1), black 20vh, transparent 80%),
    url(assets/default-bg.webp);
  background-size: cover;
}

#personas-intro .panel-frame,
.panel-frame.panel-frame-center {
  margin: auto;
  max-width: 80vw;
  border: unset;

  backdrop-filter: unset;
  -webkit-backdrop-filter: unset;
  box-shadow: unset;
}

#personas-intro .panel-frame h1,
.panel-frame.panel-frame-center {
  text-align: center;
}

/* Cadre doré adaptatif (gauche) */
/* Cadre doré TRANSPARENT (remplace ton .panel-frame existant) */
.panel-frame {
  position: relative;
  z-index: 3;
  margin-left: 8vw;
  max-width: 28vw;
  padding: 2.5rem 2rem;

  background: rgb(20 21 23 / 33%);

  /* Bordure fine dorée */
  border: 2px solid rgba(212, 167, 88, 0.8);
  border-radius: 12px;

  /* Effet verre dépoli + lueur */
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px);

  /* Ombres subtiles */
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(246, 229, 176, 0.2) inset;
}

.panel-frame-yeyu {
  left: 4vw;
  top: -20vh;
}

.panel-frame-soft-heart {
  left: 50vw;
  top: -15vh;
  display: flex;
  flex-direction: column;
}

.panel-frame-explorer {
  top: -15vh;
  display: flex;
  flex-direction: column;
}

.panel-frame-explorer h1 {
  font-size: 2.2rem;
}

/* Texte contrasté pour lisibilité */
.frame-title {
  margin: 0 0 1.2rem 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #f6e5b0;
  text-shadow:
    0 3px 8px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(246, 229, 176, 0.3);
}

.frame-text {
  margin: 0;
  font-size: 1.4rem;
  color: #f8e9c2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* Portrait droite */
.panel-portrait {
  position: absolute;
  left: 10vw;
  bottom: 0;
  z-index: 3;
  height: 80vh;
  display: flex;
  align-items: flex-end;
}

.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Détails révélés au scroll */
.character-details {
  position: relative;
  z-index: 2;
  padding: 4rem 4vw 2rem;
}


/* Responsive */
@media (max-width: 900px) {
  .panel-frame {
    margin-left: 4vw;
    max-width: 45vw;
    padding: 2rem 1.5rem;
  }

  .panel-portrait {
    right: 4vw;
    width: 35vw;
  }

  .panel-bg {
    background-attachment: scroll; /* Parallax limité sur mobile */
  }
}

@media (max-width: 600px) {
  .character-panel {
    flex-direction: column;
    text-align: center;
  }

  .panel-frame {
    margin: 0 auto 2rem;
    max-width: 85vw;
  }

  .panel-portrait {
    position: relative;
    right: auto;
    width: 60vw;
    margin: 0 auto;
  }
}

/* Section Personas */
.persona-wrapper {
  position: relative;
}

/* Conteneur sticky aligné à droite */
.persona-menu-wrapper {
  position: absolute;
  top: 0;
  left: 5vw;
  bottom: 0;
  pointer-events: none; /* le menu interne reste cliquable */
  padding: 50vh 0 30vh 0;
}

/* Menu qui colle au viewport et reste centré verticalement */
.persona-menu {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 5;
}

.menu-btn {
  width: 140px;
  padding: 0.8rem 1.2rem;
  background: rgba(246, 229, 176, 0.12);
  border: 2px solid rgba(212, 167, 88, 0.6);
  border-radius: 8px;
  color: #f6e5b0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  backdrop-filter: blur(15px) saturate(1.5);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.menu-btn-dark {
  color: #582e26;
}

.menu-btn:hover {
  background: rgba(246, 229, 176, 0.25);
  border-color: #f6e5b0;
  box-shadow: 0 8px 25px rgba(246, 229, 176, 0.3);
}

.menu-btn.active {
  background: linear-gradient(
    145deg,
    rgba(246, 229, 176, 0.3),
    rgba(219, 168, 90, 0.2)
  );
  border-color: #dba85a;
  box-shadow: 0 0 0 3px rgba(219, 168, 90, 0.3);
}

/* Contenu principal */
.persona-content {
  position: relative; /* ← Relatif pour ancrage */
  flex: 1; /* ← Remplit espace restant */
  display: flex;
  align-items: center;
  justify-content: center; /* ← Centre horizontal */
  width: 100%;
  height: 100%; /* ← Plein viewport */
  padding: 0 8vw; /* ← Espacement équilibré */
}

.persona-portrait {
  position: relative; /* ← Relatif */
  flex-shrink: 0;
  width: 28vw;
  height: 100vh;
  z-index: 3;
}

.persona-portrait-outlaw {
  left: 6vh;
}

.persona-portrait-geji {
  right: 20vh;
}

.persona-portrait-courtesan {
  left: 20vw;
}

.persona-portrait-img {
  position: absolute;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.persona-portrait-img.active {
  opacity: 1;
}

/* Cadre texte DROITE flottant */
.persona-frame {
  position: relative; /* ← Relatif + visible */
  max-width: 30vw;
  z-index: 4;
  padding: 2rem 2.5rem 2rem;
  margin-left: initial;
  display: flex;
  flex-direction: column;
}

.persona-frame-wanderer,
.persona-frame-geji {
  left: 10vw;
}

.persona-frame-outlaw,
.persona-frame-courtesan {
  right: 30vw;
}

.frame-content {
  margin-bottom: 1.2rem;
}

.frame-content h1 {
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.15em;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  font-variant: small-caps;
}

.persona-frame-geji h1 {
  font-size: clamp(2.2rem, 6vw, 2.5rem);
}

.frame-content h2 {
  font-size: 1.35rem;
  letter-spacing: 0.2em;
  margin: 0 0 1.5rem 0;
  font-variant-caps: all-small-caps;
}

.frame-content p {
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0;
}

/* Responsive */
@media (max-width: 1100px) {
  .persona-portrait {
    width: 32vw;
    margin-right: 4vw;
  }
  .persona-frame {
    max-width: 35vw;
  }
}

@media (max-width: 768px) {
  .persona-content {
    flex-direction: column;
    padding: 2rem 4vw;
  }
  .persona-portrait {
    width: 80vw;
    height: 50vh;
    margin-right: 0;
    margin-bottom: 2rem;
  }
  .persona-frame {
    max-width: 90vw;
    text-align: center;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  .nav {
    padding-inline: 1.5rem;
  }

  .nav-links {
    gap: 1.2rem;
    font-size: 0.75rem;
  }

  .hero-title {
    max-width: 80vw;
  }

  /* Sur mobile, le support du parallax via background-attachment: fixed
     est parfois limité; on repasse en scroll normal si besoin. */
  .hero {
    background-attachment: scroll;
  }
}

/**/
.nav-hub {
  display: flex !important;
  flex-direction: row;
  width: 99vw;
  height: 100vh;
  gap: 0;
}

.nav-item {
  position: relative;
  width: 33.333%;
  height: 100vh;
  flex: 1 1 33.333%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ⚠️ Le conteneur IMG reçoit le filtre (PAS le titre) */
.nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: inherit; /* reprend l'image du parent */
  z-index: 0;
  filter: grayscale(85%) brightness(0.55) contrast(1.1);
  transition: filter 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Survol : SEULEMENT l'image se colore */
.nav-item:hover::before {
  filter: grayscale(0%) brightness(1) contrast(1.05) saturate(1.08);
}

/* Overlay sombre (toujours présent) */
.nav-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 8, 5, 0.85) 0%,
    rgba(25, 20, 15, 0.95) 50%,
    rgba(10, 8, 5, 0.85) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Contenu (titre) au-dessus, SANS filtre */
.nav-content {
  position: relative;
  z-index: 2; /* au-dessus de l'image + overlay */
  text-align: center;
  padding: 1.5rem;
}

/* Titre doré TOUJOURS coloré */
.nav-title {
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #f4d03f;
  text-shadow:
    0 0 20px rgba(244, 208, 63, 0.6),
    2px 2px 4px rgba(0, 0, 0, 0.9);
  margin: 0;
  line-height: 1.1;
}

/* Responsive (2 colonnes tablette, 1 colonne mobile) */
@media (max-width: 1024px) {
  .nav-hub {
    flex-direction: column;
  }

  .nav-item {
    width: 100%;
    height: 50vh;
  }
}

@media (max-width: 768px) {
  .nav-item {
    height: 33.333vh;
  }

  .nav-title {
    letter-spacing: 0.1em;
    font-size: clamp(1.4rem, 7vw, 2rem);
  }
}

/****************************/

.album-nav {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
.image-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: none;
}
.modal-img {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
}

/***************************/
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* couvre tout l'écran */
  z-index: -2;
}

.sound-toggle {
  font-size: 1.3rem;
  padding: 0.5rem;
  margin-left: auto; /* Pousse à droite */
  border: none;
  background: transparent;
  color: rgba(246, 229, 176, 0.8);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sound-toggle:hover {
  color: #f6e5b0;
  background: rgba(246, 229, 176, 0.15);
  transform: scale(1.1);
}

.sound-toggle.active {
  color: #dba85a;
}