/* Déclaration de la police personnalisée */
@font-face {
  font-family: 'Thunderstrike Halftone';
  src: url('../../-footage-/fonts/thunderstrikehalf.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;

  font-display: swap;
}

.character-series-gallery-container {
    width: 860px;
    min-height: unset;
    margin: 20px auto;
    padding: 40px 100px 61px 100px;
    background-color: #000;
    border: 4px solid rgba(213, 166, 213, 0.30);
    box-shadow: 0 0 25px rgba(163, 147, 198, 0.25);
    border-radius: 0;
    position: relative;
}

.character-series-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -5px;
}

.character-series-title {
  font-family: 'Thunderstrike Halftone', serif;
  color: #ff69b4;
  font-size: 1.31rem;
  letter-spacing: 0.12em;
  font-weight: bold;
  text-align: center;
  margin: 22px 0 56px 0;
  width: 100%;
  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);
}

.character-series-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 56px;
  align-items: flex-start;
  margin: 0 auto;
  width: 100%;
}

.character-thumb-wrap {
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ——— ICI: +1px d'épaisseur et couleur #ff66cc ——— */
.character-thumb {
  width: 180px;
  height: 225px;
  background: #231642;
  border: 2.5px solid #ff66cc;   /* ← 2px → 3px, couleur cadre menu */
  box-shadow: 0 0 10px rgba(163, 147, 198, 0);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  transition: border-color 0.3s ease;
}

.character-thumb img {
  width: 180px;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.character-thumb a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.character-thumb-hover {
  display: block;
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  padding: 6px 0 2px 0;
  text-align: center;
  font-family: 'Thunderstrike Halftone', serif;
  font-size: 0.9rem;
  color: #fff;
  background: rgba(255, 105, 180, 0.82);
  border: 2px solid #ff69b4;
  border-radius: 0;
  letter-spacing: 0.13em;
  transition: opacity 0.22s;
  pointer-events: none;
  z-index: 10;
}
.character-thumb:hover .character-thumb-hover { opacity: 1; }


/* Glow rose au survol des vignettes */
.character-thumb:hover {
  box-shadow: 0 0 20px rgba(255, 119, 192, 0.75), 
              0 0 12px rgba(255, 180, 220, 0.6);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}



.character-thumb-label {
  margin-top: 14.5px;
  color: #ff69b4;
  font-family: 'Thunderstrike Halftone', serif;
  font-size: 0.9rem;
  letter-spacing: 0.07em;
  font-weight: 600;
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: none;
  border: none;
  padding: 0;
  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);
}

/* Menu actif “The World Of Eisth” — bordure seule */
nav.menu-box li.pink-link a {
  font-family: 'Thunderstrike Halftone', sans-serif;
  color: #ff69b4;
  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);
  position: relative;
  border: 2px solid #ff66cc !important;
  border-radius: 4px;
  box-shadow: none;
}

/* ——— ICI: cadre Follow the Candle — garde le style, change UNIQUEMENT la couleur ——— */
.subtitle-box {
    border-color: #ff66cc;  /* ← couleur uniquement */
    box-shadow: 0 0 8px rgba(255, 119, 192, 0.45),
                0 0 16px rgba(255, 119, 192, 0.45);
}

/* (Conserve les rayures comme avant) */
.subtitle-box { position: relative; overflow: hidden; }

.subtitle-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 4px,
    rgba(255, 51, 204, 0.17) 4px,   /* rose fluo plus saturé */
    rgba(255, 51, 204, 0.17) 6px
  );
  z-index: 0;
}

.subtitle { position: relative; z-index: 1; }

/* Boutons bas de page — texte = glow rose ; bordure = #ff66cc */
.go-back-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 7px;
    margin-bottom: 55px;
}
.go-back-btn {
    background: rgba(0,0,0,0.14);
    color: #ff69b4;
    border: 2px solid #ff66cc;
    padding: 17px 26px;
    font-family: 'Thunderstrike Halftone', serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s, text-shadow 0.2s;
    box-shadow: none;
    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);
}
.go-back-btn:hover { background:#ff66cc; color:#231642; border-color:#fff; text-shadow:none; }

/* Flèches (layout inchangé) */
.switch-universe { display:flex; align-items:center; gap:0; position:relative; }
.switch-arrow { width:72px; height:auto; display:block; }
.switch-universe .switch-arrow:first-child { position:relative; z-index:2; margin-right:-37px; }
.switch-universe .switch-arrow:last-child  { position:relative; z-index:2; margin-left:-37px; }











/* ================================
   Variables (optionnel)
   ================================ */
:root {
  --neon-pink: #ff66cc;
  --neon-pink-strong: #ff3399;
}

/* ================================
   Stacking & layout (néons intacts)
   ================================ */

/* Outer frame derrière le contenu ; menu = 4 ailleurs */
.wof-root {
  position: absolute;
  z-index: 2 !important;
}

/* Conteneur principal (au-dessus de l’outer frame, sous le menu) + allonge bas */
.frame-container {
  position: relative;
  z-index: 3 !important;
  padding-bottom: 427px; /* ajuster si besoin (ex: 80/160 px) */
}

/* Overlays & contenu écran digital */
.digital-screen-overlay {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.digital-screen-content {
  position: relative;
  z-index: 3;
  min-height: 50vh;
}

/* Wraps néon couvrant toute la hauteur */
.frame-wrap.lavender,
.frame-wrap.pink {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.home-neon-frame.lavender,
.home-neon-frame.pink {
  position: absolute;
  inset: 0;
}

/* Coller le contenu juste sous la SubtitleBox (sans toucher aux frames) */
.frame-container .digital-screen-content > .content .subtitle-box + .categories {
  display: none !important; /* sinon: height:0; margin:0; padding:0; */
}

/* Priorité flèches > bouton SWITCH UNIVERSE (sans bloquer le clic) */
.switch-universe .switch-arrow {
  position: relative;
  z-index: 6 !important;
  pointer-events: none;
}
.switch-universe > a.go-back-btn {
  position: relative;
  z-index: 5 !important; /* devant la frame, sous les flèches */
}

/* Boutons bas de page */
.go-back-btn {
  background: #000 !important;
  box-shadow: 0 0 8px var(--neon-pink);
  border-radius: 5px !important;
}
.go-back-container {
  margin-top: 0 !important; /* mettre négatif pour remonter */
}

/* ================================
   Galerie (container) — alignement & look
   ================================ */
.character-series-gallery-container {
  border-radius: 12px !important;
  overflow: hidden;                 /* rogne contenu aux coins */
  border-width: 3px !important;   /* style défini ailleurs */
  background-color: rgba(0, 0, 0, 0.4) !important; /* noir ~40% */
}

/* (Optionnel) figer la teinte/halo du texte comme BK */
.frame-container .digital-screen-content > .content .subtitle-box .subtitle {
  color: var(--neon-pink) !important;
  text-shadow:
    0 0 4px var(--neon-pink),
    0 0 10px var(--neon-pink-strong),
    0 0 18px var(--neon-pink-strong) !important;
}


/* Hover identique (remplissage rose, texte sombre, bordure blanche) */
.go-back-btn:hover {
  background: #ff66cc !important;
  color: #231642 !important;
  border-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Grand cadre — bords, couleur rose lumineuse, halo doux */
.character-series-gallery-container{
  border-color: rgba(255, 102, 204, 0.90) !important; /* rose #ff66cc en ~90% */
  background-color: rgba(0, 0, 0, 0.4) !important;    /* fond identique */
  box-shadow:
    0 0 12px rgba(255, 119, 192, 0.55),
    0 0 24px rgba(255, 119, 192, 0.35) !important;    /* halo rose */
}






/* === Responsive (clean) === */

/* ≤ 1024px */
@media (max-width: 1024px){
  .character-series-title{ font-size: 1.2rem; margin: 18px 0 44px; }
  .character-series-gallery{ gap: 28px 44px; }
}

/* ≤ 980px */
@media (max-width: 980px){
  .character-series-gallery-container{
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* ≤ 768px */
@media (max-width: 768px){
  .character-series-gallery-container{ width: 92%; padding: 24px 28px 48px; }
  .character-thumb,
  .character-thumb img{ width: 150px; height: 188px; }
  .character-thumb-wrap{ width: 150px; }
  .character-thumb-hover{ font-size: 0.95rem; bottom: 8px; padding: 6px 0 3px; }
  .character-thumb-label{ font-size: 0.95rem; margin-top: 10px; }

  /* Allonger uniquement le bas des frames en mobile */
  .frame-container{ padding-bottom: 80px; }
}

/* ≤ 520px */
@media (max-width: 520px){
  .character-series-title{ font-size: 1.05rem; letter-spacing: 0.08em; margin: 16px 0 36px; }
  .character-series-gallery{ gap: 22px; }
  .character-thumb,
  .character-thumb img{ width: 132px; height: 165px; }
  .character-thumb-wrap{ width: 132px; }
  .character-thumb-hover{ font-size: 0.88rem; }
  .character-thumb-label{ font-size: 0.88rem; }
}

/* ≤ 380px */
@media (max-width: 380px){
  .character-thumb,
  .character-thumb img{ width: 120px; height: 150px; }
  .character-thumb-wrap{ width: 120px; }
}

/* Height-based constraint (dedup) */
@media (max-height: 800px){
  .digital-screen-content{ min-height: 360px; }
}