/* Déclaration de la police personnalisée */
@font-face {
  font-family: 'Hellios Gothic';
  src: url('../../-footage-/fonts/hellios-gothic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Thunderstrike Halftone';
  src: url('../../-footage-/fonts/thunderstrikehalf.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

  font-display: swap;
}




/* ===== RESET GLOBAL ===== */



/* ===== BANNIÈRE ===== */
.banner {
  width: 60%;
  max-width: 400px;
  margin-top: 5px;
  position: relative;
  cursor: pointer !important;  /* feedback visuel (toggle audio) */
  z-index: 20 !important;      /* logo toujours au-dessus */
}

.banner-wrap .banner {
  width: 9.4% !important;
  max-width: 327px !important;
  margin-top: 6px !important;
  margin-bottom: 14px !important;
}


/* ===== RESET GLOBAL ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #000; /* noir pur */
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}

/* ===== MAIN STRUCTURE ===== */
main {
  min-height: auto !important;
  margin-bottom: 90px; /* espace avant le footer */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
  background: transparent;
}

/* ===== CONTENT WRAPPER ===== */
.content {
  position: relative;
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px !important;   /* Discover → cadres */
  padding: 10px 0;
  z-index: auto !important;
}

/* ===== MENU ===== */
nav.menu-box {
  position: relative;                 /* contexte flèches */
  z-index: 4;                         /* au-dessus du cadre */
  width: 76%;
  max-width: 1078px;
  margin: 1rem auto;
  background: #000;
  border: 4px solid rgba(100,100,100,0.4);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 0;
}

/* Ajustements d’espacement du bloc menu */
.menu-box {
  margin-top: -2px !important;
  margin-bottom: 14px !important;     /* rapproche le bloc suivant */
  padding: 0.6rem 0 !important;
}

/* Flèches décoratives autour du menu */
nav.menu-box img.arrow-left,
nav.menu-box img.arrow-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
}
nav.menu-box img.arrow-left  { left: -43px; }
nav.menu-box img.arrow-right { right: -43px; }

/* Liste & items */
nav.menu-box ul {
  list-style: none;
  display: flex;
  gap: 28px;
}
nav.menu-box ul li { display: inline-block; margin: 0 2px; }

/* Liens du menu (commun) */
nav.menu-box ul a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 4px 8px;
  border: 2px solid #fff;
  border-radius: 4px;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  text-decoration: none;
  color: #fff;
  transition: background 0.3s, color 0.3s;
}

/* Hover global — exclut TCS et WOE */
nav.menu-box ul a:not([href$="the-character-series.html"]):not([href$="the-world-of-eisth.html"]):hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* Lien "bleu" */
nav.menu-box li.blue-link a {
  color: #fff;
  font-family: 'IM Fell English SC', serif;
  font-style: italic;
  font-weight: 700;
}

/* Lien "The World of Eisth" (pink-link) */
nav.menu-box li.pink-link a {
  color: #fff;
  font-family: 'Thunderstrike Halftone', sans-serif;
  justify-content: flex-start;            /* au lieu de center */
  padding: 4px 12px 4px 4px;              /* top right bottom left */
}

/* État actif (The Character Series) */
.menu-box a.active {
  color: #9f9fd0 !important;
  border-color: #9f9fd0 !important;
  font-weight: bold !important;
  background: transparent !important;
  text-shadow: 0 0 6px #9f9fd033;
}

/* Override glow (hors blue-link & pink-link) → glow blanc */
nav.menu-box li:not(.blue-link):not(.pink-link) a {
  text-shadow: 0 0 4px #fff, 0 0 8px #fff !important;
}

/* ===== MENU CONTAINER (flèches décoratives) ===== */
.menu-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arrow-left,
.arrow-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: auto;
}

/* Home link (logo/menu) */
.home-link { cursor: pointer; }


/* ===== SUBTITLE BOX ===== */
.subtitle-box {
  background: rgba(0,0,0,0.1);
  border: 1px solid #fdfdf4;
  padding: 9px;
  border-radius: 4px;
  width: calc(49% - 4px);
  max-width: 620px;
  box-shadow:
    0 0 1px #fdfdf4,
    0 0 2px #fdfdf4,
    inset 0 0 16px rgba(253,253,244,0.35); /* Glow externe + inner glow */
}

/* Sous-titre (glow ajusté) */
.subtitle {
  font-family: 'Allura', cursive;
  font-size: 1.45rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.3;
  margin: 0;
  text-shadow:
    0 0 3px rgba(255,255,255,0.9),
    0 0 6px rgba(255,255,255,0.7),
    0 0 10px rgba(255,255,255,0.55),
    0 0 14px rgba(255,255,255,0.4);
}


/* ===== CATEGORIES ===== */

/* Libellés spécifiques */
.menu-thecharacterseries,
.section-thecharacterseries {
  color: #d6a5ff;
  font-weight: bold;
  text-shadow: 0 0 6px #d6a5ff, 0 0 12px #d6a5ff;
}

/* Grille + items */
.categories {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 86% !important;
  margin: 22px auto !important;
  gap: 5px !important;
}
.categories .category { margin-top: 20px !important; }
.categories > .category { position: relative; }          /* active z-index par item */
.category {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Cadres Blue & Pink (boîtes) */
.category.blue-neon,
.category.pink-neon {
  padding: 20px 20px 15px !important; /* haut/droite/gauche + bas */
  min-height: 420px !important;
  transform-origin: top center;
}
.categories > .category.blue-neon,
.categories > .category.pink-neon {
  margin-top: 0 !important;
  transform: scale(0.95);
  transform-origin: top center;
}

/* Paragraphes (général + centrage dans cadres) */
.category p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #fff;
  line-height: 1.7;
  margin-top: 12px;
}
.category p:not(.category-logo) {
  font-size: 0.9rem !important;
  transform: translateY(-5px);
}
.category.blue-neon p,
.category.pink-neon p {
  max-width: 95% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Logos dans cadres */
.category.blue-neon .category-logo,
.category.pink-neon .category-logo {
  transform: scale(0.89) translateY(-9px);
  transform-origin: top center;
}

/* ===== TITRES ===== */

/* Blue Neon — titre */
.blue-neon h2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 80px !important;
  width: 96.6% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 20px !important;
  margin: 1px calc(1.9% - 0.5px) 0.75rem calc(1.5% + 0.5px) !important;

  font-family: 'Great Vibes', cursive !important;
  color: #cfc4ff !important;
  font-size: 2.34rem !important;
  line-height: 0.98 !important;           /* léger écrasement vertical */
  letter-spacing: -0.012em !important;

  text-shadow:
    0 0 6px #8ab6ff,
    0 0 14px #8ab6ff,
    0 0 28px #5f5fa0,
    0 0 48px #5f5fa0;

  border: 1px solid #bbaeff !important;
  border-radius: 4px !important;
  background: rgba(0,0,0,0.5) !important;
}

/* Pink Neon — ghost dot off */
.category.pink-neon > h2.pink-link .ghost-dot {
  color: transparent;
  text-shadow: none !important;
  pointer-events: none;
}

/* Pink Neon — titre (multilignes stable) */
.category.pink-neon h2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 98%;
  max-width: 100%;
  margin: 2px auto 0.75rem;    /* remonté de 3px au total */
  box-sizing: border-box;
  padding: 0 12px;
  transform: scaleX(0.98);

  height: auto;                /* deux lignes OK */
  min-height: 79px;            /* +1px */
  line-height: 1.15;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;

  font-family: 'Thunderstrike Halftone', sans-serif;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  color: #fff;
  text-shadow:
    0 0 8px rgba(255, 51, 102, 0.5),
    0 0 16px rgba(255, 51, 102, 0.5),
    0 0 24px rgba(255, 51, 102, 0.5),
    0 0 32px rgba(255, 51, 102, 0.5);

  border: 1.55px solid rgba(255,155,200,0.8);
  border-radius: 4px;
  background: rgba(0,0,0,0.5);
}

/* ===== CURSEURS ===== */
.category.blue-neon      { cursor: pointer; }
.category.blue-neon:hover {
  cursor: url("../../-footage-/banner-and-logos/arrow-left-cursor.png") 16 16, pointer;
}
.category.pink-neon:hover {
  cursor: url("../../-footage-/banner-and-logos/arrow-right-cursor.png") 16 16, pointer;
}

/* ===== FILTRES (cadres) ===== */

/* Filtres globaux sur cadres */
.category.blue-neon {
  filter: hue-rotate(0deg) saturate(150%) contrast(93%) brightness(90%) !important;
}
.category.pink-neon {
  filter: hue-rotate(0deg) saturate(100%) contrast(90%) brightness(110%) !important;
}

/* Contre-filtres titres (annule les filtres parent) */
/* Parent BLUE:  saturate(150%) contrast(93%) brightness(90%)
   Inverse théorique: saturate(66.6667%) contrast(107.5269%) brightness(111.1111%) */
.category.blue-neon > h2 {
  filter: hue-rotate(0deg) saturate(90%) contrast(107.5269%) brightness(110%) !important;
  position: relative;
  z-index: 3;
  isolation: isolate;
}

/* Parent PINK:  saturate(100%) contrast(90%) brightness(110%)
   Inverse:      saturate(100%) contrast(111.1111%) brightness(90.9091%) */
.category.pink-neon > h2 {
  filter: hue-rotate(0deg) saturate(100%) contrast(111.1111%) brightness(90.9091%) !important;
  position: relative;
  z-index: 3;
  isolation: isolate;
}

/* Z-index layering pour clones/reflets */
.categories > .category:not([data-reflection-clone="1"]) { z-index: 3; } /* devant la frame */
.categories > .category[data-reflection-clone="1"] {
  z-index: 1;                 /* derrière la frame */
  pointer-events: none;
}




/* === NEWSLETTER (mini) === */

.wof-mini {
  /* Vars */
  --mini-border: 2.4px;
  --mini-radius: 6px;
  --newsletter-y: -500px; /* négatif = remonte, positif = descend */

  position: relative !important;
  z-index: 4;                 /* devant l’outer frame */
  display: inline-block;
  top: var(--newsletter-y);

  /* Cadre bicolore (45% / 55%) avec fond noir interne */
  border: var(--mini-border) solid transparent;
  border-radius: var(--mini-radius);
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(90deg, #9c8cff 45%, #ff66e0 55%) border-box;
}

.wof-mini > .newsletter {
  position: relative;
  z-index: 6;                 /* au-dessus du glow */
  display: block;
  padding: 12px 21px;
  background: #000;
  border: none !important;
  border-radius: calc(var(--mini-radius) - 1px);

  font-family: 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem;
  color: #fdfdf4 !important;

  text-shadow:
    0 0 1px rgba(255,255,240,0.6),
    0 0 2px rgba(255,255,240,0.8);
}

/* Glow layer */
.wof-mini-glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: var(--mini-radius);
}

.wof-mini-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #9c8cff 47%,
    #c27cff 49%,
    #ff66e0 51%,
    #ff66e0 53%
  );
  filter: blur(12px);
  opacity: 0.9;
}


/* === FOOTER === */

footer {
  background: rgba(20, 20, 20, 0.9);
  padding: 30px 20px;
  color: #ffffff;
}

.footer {
  background: rgba(20, 20, 20, 0.9);
  padding: 30px 20px 12px;
  color: #fff;
  font-family: inherit;
}

.footer-flex-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
}

.footer-information-block {
  max-width: 180px;
  font-size: 0.85em;
  text-align: left;
  color: #fff;
  position: relative;
  z-index: 10;
  font-family: inherit;
}

.footer-information-block h3 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid #fff;
  padding-bottom: 4px;
  margin-bottom: 17px;
  margin-left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  font-family: inherit;
}

.footer-information-block ul {
  list-style: none;
  padding-left: 0;
  font-family: inherit;
}

.footer-information-block ul li {
  margin-bottom: 8px;
  padding-left: 10px;
  position: relative;
  font-family: inherit;
}

.footer-information-block ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  font-weight: bold;
  line-height: 0;
  color: #fff;
}

.footer-follow-me-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 180px;
  font-family: inherit;
}

.footer-follow-me-block h3 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid #fff;
  padding-bottom: 4px;
  margin-bottom: 17px;
  display: inline-block;
  font-family: inherit;
}

.footer-social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 10.5px;
  padding-top: 4px;
  font-family: inherit;
}

.footer-social-links a img {
  width: 32px;
  height: 32px;
  display: block;
}

.footer-copy {
  margin: 20px 0 4px;
  font-size: 0.75em;
  color: #fff;
  text-align: center;
  letter-spacing: 0.05em;
  font-family: inherit;
}

/* Structure générale du footer */
footer {
  position: relative;
  margin-top: 30px;
  padding-bottom: 7px !important;
  isolation: isolate; /* empêche le blend screen de la vidéo d’éclairer le texte */
}

footer h3 a {
  color: inherit;        /* reprend la couleur du h3 */
  text-decoration: none; /* pas de soulignement */
}

footer h3 a:hover {
  color: inherit;        /* garde la même couleur au survol */
}

footer { 
  background: rgba(20,20,20,0.6) !important; 
}


footer {
  z-index: 14 !important;
}




/* ===== UNIVERSES GALLERY ===== */
.character-gallery-wrapper {
  width: 94%;
  margin: 50px auto 0;
  padding: 48px 22px;
  background: #000;
  border: 4px solid rgba(100,100,100,0.4);
  border-radius: 0;                 /* angles droits */
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== TITRES / TEXTES ===== */
.personnage-title {
  font-family: 'Hellios Gothic', serif !important;
  font-size: 1.9rem !important;
  color: #9f9fd0 !important;
  text-shadow:
    0 0 2px #9f9fd0,
    0 0 6px #9f9fd0,
    0 0 12px #9f9fd0 !important;
  font-weight: normal;
  margin-bottom: 36px;
  text-align: center;
  letter-spacing: 0.03em;
}

/* ===== GALERIE ===== */
.gallery-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 24px;
}

.gallery-img-container {
  position: relative;
  width: 170px;
  height: 212px;                   /* 170 * 1350/1080 */
  background: #111;
  border: 4px solid rgba(100,100,100,0.4);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.gallery-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* Hover text */
.gallery-hover-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s;
  font-family: 'Hellios Gothic', serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(35,25,60,0.77);
  text-shadow: 0 0 8px #222;
  z-index: 3;
  border-radius: 0;
}
.gallery-img-container:hover .gallery-hover-text,
.gallery-watch:hover .gallery-hover-text { opacity: 1; }

/* Toujours visible */
.gallery-watch { position: relative; }
.gallery-always-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: 'Hellios Gothic', serif;
  font-size: 1.16em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(35,25,60,0.68);
  text-shadow: 0 0 10px #222;
  z-index: 3;
  border-radius: 0;
}

/* Description */
.character-desc {
  max-width: 270px;
  margin: 42px auto 0;            /* descend sous la galerie */
  font-family: 'Hellios Gothic', serif !important;
  font-size: 1.10em;
  line-height: 1.25;
  color: #fff;
  text-align: center;
  word-break: break-word;
}

/* ===== BLOCS SPÉCIAUX ===== */
/* Collectible (bas gauche) */
.collectible-block {
  position: absolute;
  bottom: 24px;
  left: 24px;
  padding: 8px 24px;
  background: rgba(20,20,30,0.92);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 0;
  font-family: 'Hellios Gothic', serif;
  font-size: 1.08em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  z-index: 5;
  overflow: hidden;
}
.collectible-block span {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.collectible-block:hover span { opacity: 1; }

/* Shop Now (bas droite) */
.shop-block {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 22px;
  background: rgba(20,20,30,0.92);
  color: #fff;
  border: 2px solid #9f9fd0;
  border-radius: 4px;
  font-family: 'Hellios Gothic', serif;
  font-size: 1.08em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  z-index: 5;
}
.shop-block svg {
  width: 1.2em;
  height: 1.2em;
  fill: #9f9fd0;
}

/* ===== CAROUSEL MODAL ===== */
.carousel-modal {
  position: fixed !important;
  inset: 0;
  z-index: 25 !important;              /* au-dessus de tout */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,12,28,0.96);
  transition: opacity 0.19s;
}
.carousel-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.carousel-modal .carousel-content {
  position: relative;
  max-width: 85vw;
  max-height: 84vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #111;
  border: 3px solid #9f9fd0;
  border-radius: 0;
  /* pas de z-index ici pour laisser les flèches au-dessus */
}

.carousel-modal img {
  max-width: 80vw;
  max-height: 75vh;
  display: block;
  background: #000;
  border: none;
  border-radius: 0;
}

.carousel-modal .carousel-close {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 2.3em;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 3;
  text-shadow: 0 0 10px #9f9fd0;
}

.carousel-modal .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 18px;
  background: rgba(30,20,60,0.84);
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 2.6em;
  cursor: pointer;
  z-index: 2;                           /* au-dessus du contenu */
  transition: background 0.17s;
}
.carousel-modal .carousel-arrow.left  { left: 4px; }
.carousel-modal .carousel-arrow.right { right: 4px; }



/* =================== RESPONSIVE DESIGN =================== */

/* Images fluides */
img { max-width: 100%; height: auto; }

/* -------- ≥1200px -------- */
@media (min-width: 1200px) {
  .category.pink-neon h2 {
    white-space: nowrap !important;
    height: 79px !important;       /* +1px */
    line-height: 79px !important;  /* +1px */
  }
}

/* -------- ≤1024px (tablettes) -------- */
@media (max-width: 1024px) {
  body { font-size: 0.95rem; }      /* légèrement plus petit */

  nav.menu-box ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  nav.menu-box li { margin: 4px; }

  /* Empêche le débordement des flèches du menu */
  nav.menu-box img.arrow-left  { left: -24px; width: 56px; }
  nav.menu-box img.arrow-right { right: -24px; width: 56px; }
}

/* -------- ≤768px (mobiles) -------- */
@media (max-width: 768px) {
  body { font-size: 0.9rem; padding: 0 10px; }

  /* Menu en pile */
  nav.menu-box ul {
    flex-direction: column;
    align-items: center;
  }
  nav.menu-box li {
    width: 100%;
    text-align: center;
    margin: 4px 0;
  }

  /* Cacher les grandes flèches */
  nav.menu-box img.arrow-left,
  nav.menu-box img.arrow-right { display: none; }

  /* Grille catégories en 1 colonne */
  .categories {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 10px !important;
  }

  /* Texte divers */
  .carousel-text { font-size: 1rem; padding: 6px; }
  h1, h2, h3 { font-size: 1.2rem; }
}

/* -------- ≤600px -------- */
@media (max-width: 600px) {
  .subtitle-box { width: 90%; max-width: none; }
}

/* -------- ≤480px -------- */
@media (max-width: 480px) {
  .carousel-text { font-size: 0.9rem; }
  h1 { font-size: 1rem; }
  nav.menu-box li a { font-size: 0.9rem; padding: 6px 8px; }
}

/* ================= fin responsive ================= */