/* ===== CSS NETTOYÉ & OPTIMISÉ – SELENE ASH @Joez8932 ===== */
/* Variables uniques (supprimé doublons) */
:root {
  --bg: #0b0a0a;
  --panel: #141111;
  --panel-2: #191414;
  --red: #b21010;
  --red-soft: #e14545;
  --beige: #ff2b2b;
  --beige-soft: #ff2b2b;
  --shadow: rgba(0,0,0,.6);
  --player-bg: #0b0b0b;
  --player-ring: #1a1a1a;
  --player-face: #1d1c1c;
  --player-face-edge: #2a2a2a;
  --player-text: #e6e6e6;
  --led-off: #3a0b0b;
  --led-on: #ff2b2b;
  --btn-bg: #1a1a1a;
  --btn-bg-hover: #ff2b2b;
  --btn-icon: #ff2b2b;
  --accent-red: #ff2b2b;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);height:auto;overflow-y:auto}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-soft)}
button{font:inherit}
body{
  color:var(--red);
  font-family:"Cinzel Decorative",serif;
  line-height:1.5;
}
h1,h2,.subtitle{
  font-family:"Cinzel Decorative",serif;
  letter-spacing:.02em;
  color:var(--red);
  text-shadow:0 0 8px rgba(0,0,0,.8);
}
h2{font-size:clamp(28px,4vw,56px);margin:0 0 .6rem}

/* HERO */
.hero{
  position:relative;
  height:min(58vw,520px);
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.02) saturate(1.05);
}
.hero__logo{
  position:absolute;left:50%;top:10%;transform:translateX(-50%);
  width:min(60vw,980px);
  filter:drop-shadow(0 10px 18px var(--shadow));
  pointer-events:none;z-index:2;
}

/* NAV */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.4));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.main-nav{
  display:flex;gap:28px;align-items:center;padding:14px 18px;
  font-family:"Cinzel Decorative",serif;
  font-size:clamp(18px,2.2vw,28px);
}
.nav-link{color:var(--red)}
.subtitle{
  text-align:center;padding:6px 0 12px;
  font-size:clamp(14px,1.6vw,22px);opacity:.9;
}

/* PLAYER COMPACT */
.clock-player{
  position:fixed;top:20px;right:20px;width:200px;
  background:rgba(0,0,0,0.42);border:2px solid #ff2b2b;border-radius:16px;
  padding:10px;box-shadow:0 0 25px #ff2b2b66;backdrop-filter:blur(4px);
  z-index:9999;display:flex;flex-direction:column;gap:15px;
  font-family:"Cinzel Decorative",cursive;color:#ff0000;
  cursor:move;user-select:none;resize:both;overflow:hidden;
}
.clock-player__dial{
  aspect-ratio:1/1;border-radius:50%;margin-bottom:10px;
  display:grid;place-items:center;position:relative;
  border:3px solid #000;
  background:radial-gradient(circle at 50% 50%,#1f1f1f 0%,#0f0f0f 60%),linear-gradient(#000,#0b0b0b);
  box-shadow:inset 0 4px 12px rgba(255,0,0,.08),inset 0 -6px 14px rgba(0,0,0,.75);
  cursor:grab;user-select:none;
}
.clock-player__dial:active{cursor:grabbing}
.clock-player__led{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle,var(--led-on) 40%,#880808 70%,#3a0b0b 100%);
  box-shadow:0 0 16px var(--led-on),0 0 28px var(--led-on);
}
.clock-player__title{
  font-family:"UnifrakturMaguntia",serif;color:var(--player-text);
  font-size:clamp(14px,1.4vw,20px);text-align:center;padding:0 12px;
  text-shadow:0 0 6px rgba(0,0,0,.9),0 0 12px rgba(255,0,0,.15);
  pointer-events:none;user-select:none;
}
.clock-player__controls{
  display:flex;gap:10px;justify-content:center;padding-top:2px;
}
.ctrl{
  width:48px;height:48px;border-radius:50%;background:#222;color:#ff2b2b;
  border:1px solid #ff2b2b33;font-size:20px;cursor:pointer;transition:0.2s;
}
.ctrl:hover{background:#ff2b2b55;color:white}
.volume-line input[type="range"]::-webkit-slider-thumb{background:#ff2b2b}
.volume-line input[type="range"]::-webkit-slider-runnable-track{background:#440000}
.vol input{
  width:140px;height:6px;border-radius:3px;background:#300;outline:none;-webkit-appearance:none;
}
.vol input::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;background:var(--accent-red);
  border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--accent-red);
}
.vol{display:flex;align-items:center;gap:8px;font-size:12px;opacity:.9}
.drag-handle{
  position:absolute;top:0;left:0;right:0;height:20px;
  background:rgba(30,0,0,0.7);cursor:move;text-align:center;
  font-size:0.7rem;line-height:20px;color:#ff0000;
  font-family:"Cinzel Decorative",cursive;
}
.player-resizer{
  position:absolute;bottom:6px;right:6px;width:16px;height:16px;
  background:linear-gradient(-45deg,transparent 45%,var(--accent-red) 45%,var(--accent-red) 55%,transparent 55%);
  cursor:se-resize;z-index:10;opacity:0.7;transition:opacity 0.2s;
}
.player-resizer:hover{opacity:1}

/* SECTIONS */
main{padding:24px 16px 80px}
.welcome,.user-gallery{
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.06);
  border-radius:18px;padding:24px;margin:18px auto;max-width:1200px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

/* GALLERY */
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:16px;
}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden}
.card__img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card__body{padding:10px 12px}
.card__meta{opacity:.8;font-size:14px;margin-bottom:6px}
.card__comment{width:100%;background:#101010;color:var(--beige);border:1px solid #7a1616;border-radius:10px;padding:10px}
.card__save{margin-top:8px}

/* UPLOAD */
.upload{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.input{
  width:min(640px,100%);background:#101010;color:var(--beige);
  border:1px solid #7a1616;border-radius:10px;padding:10px 12px;
}

/* BUTTONS */
.btn{
  border-radius:12px;padding:10px 16px;cursor:pointer;border:1px solid transparent;
}
.btn-primary{
  background:linear-gradient(#b21010,#8b0f0f);color:#fff;border-color:#6e0909;
  box-shadow:0 6px 14px rgba(178,16,16,.4);
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{
  color:var(--beige);border-color:rgba(255,255,255,.14);background:transparent;
}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* AGE GATE */
.age-gate {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* bien au-dessus du player */
}

.age-gate[hidden] {
  display: none;
}

.age-gate__card {
  width: min(720px, 92%);
  max-height: 90vh;
  background: var(--panel-2, #111); /* fallback au cas où la variable existe pas */
  color: #f5f5f5; /* texte clair pour éviter l'effet "tout noir" */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 22px 20px;
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.age-gate__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
  position: sticky;
  bottom: 0;
  padding: 14px 0 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);
}

/* Empêche le scroll derrière la gate quand elle est active */
body.age-gate-open {
  overflow: hidden;
  height: 100vh;
}

/* Optionnel : garder ce que tu avais déjà */
.footer {
  opacity: 0.8;
  text-align: center;
  padding: 24px 0 40px;
}

strong {
  color: var(--beige-soft);
}


/* PAGE MUSIQUE – RÈGNE */
.music-section{
  margin:4rem auto;max-width:1200px;padding:0 1.5rem;
}
.music-section__title{
  font-family:"Cinzel Decorative",serif;font-size:2rem;letter-spacing:0.14em;
  text-transform:uppercase;color:#ff2b2b;text-align:center;margin-bottom:0.75rem;
}
.music-section__subtitle{
  max-width:720px;margin:0 auto 2.5rem;text-align:center;color:#ff2b2b;
  font-size:0.95rem;line-height:1.5;
}

/* GRILLE 3 COLONNES */
.music-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  padding:40px 20px;max-width:1400px;margin:0 auto;
}

/* CARTE CHANSON – CARRÉ POCHETTE */
.track-card{
  background:rgba(0,0,0,0.85);border:1px solid #ff2b2b;border-radius:12px;
  overflow:hidden;transition:all .4s ease;box-shadow:0 0 15px rgba(255,43,43,.3);
  display:flex;flex-direction:column;height:100%;position:relative;
}
.track-card:hover{
  transform:translateY(-8px);box-shadow:0 0 25px rgba(255,43,43,.6);border-color:#fff;
}

/* POCHETTE CARRÉE */
.track-card__media{
  width:100%;height:0;padding-bottom:100%;position:relative;overflow:hidden;
  border-bottom:2px solid #ff2b2b;margin-bottom:14px;display:block;
  box-shadow:0 0 20px rgba(255,43,43,.5);
}
.track-card__media img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
  transition:all .5s ease;filter:brightness(1.05);
}
.track-card:hover .track-card__media{
  box-shadow:0 0 35px rgba(255,43,43,.8);
}
.track-card:hover .track-card__media img{
  transform:scale(1.1);filter:brightness(1.2) contrast(1.1);
}

/* TITRE & TAGLINE – TITRE EN #ff2b2b */
.track-card__body{
  padding:0 16px 8px;flex-grow:1;display:flex;flex-direction:column;justify-content:center;
}
.track-card__title{
  font-family:'Cinzel Decorative',cursive;font-weight:900;font-size:1.4rem;
  margin:0 0 8px;text-align:center;color:#ff2b2b !important; /* ROUGE VIF */
}
.track-card__tagline{
  margin:0 0 12px;text-align:center;color:#ff2b2b;font-size:.85rem;line-height:1.35;
  text-shadow:0 0 8px rgba(255,43,43,.6);
}

/* ACTIONS */
.track-card__actions{
  padding:12px 16px;display:flex;flex-direction:column;gap:10px;
}
.btn-fragment,.btn-offrande{
  padding:10px;border-radius:8px;font-weight:bold;text-align:center;
  transition:all .3s ease;box-shadow:0 0 12px rgba(255,43,43,.5);
}
.btn-fragment{
  background:transparent;border:1px solid #ff2b2b;color:#ff2b2b;
}
.btn-fragment:hover{
  background:#ff2b2b;color:#000;box-shadow:0 0 20px rgba(255,43,43,.8);
}
.btn-offrande{
  background:#ff2b2b;color:#000;text-decoration:none;
}
.btn-offrande:hover{
  background:#fff;color:#ff2b2b;box-shadow:0 0 20px rgba(255,43,43,.8);
}

/* RESPONSIVE */
@media (max-width:992px){
  .music-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .music-grid{grid-template-columns:1fr}
  .track-card__media{padding-bottom:80%}
}

/* PATCH HEURE + DATE + TITRE PLAYER – ROUGE #ff2b2b + CINZEL DECORATIVE */
#ros-date, #track-title {
  font-family: 'Cinzel Decorative', cursive !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-shadow: 0 0 10px rgba(255, 43, 43, 0.7), 0 0 20px rgba(255, 43, 43, 0.4) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin: 4px 0 !important;
  transition: all 0.4s ease !important;
}

#ros-date {
  font-size: clamp(14px, 1.6vw, 20px) !important; /* Heure/date comme avant */
  color: #ff2b2b !important; /* Rouge vif sang */
}

#track-title {
  font-size: clamp(16px, 1.8vw, 24px) !important; /* Titre chanson */
  color: #ff2b2b !important; /* Rouge vif sang */
}

/* GLOW AU CHANGEMENT (heure/date/titre) */
#ros-date.changed, #track-title.changed {
  animation: title-glow 1.5s ease-in-out !important;
}

@keyframes title-glow {
  0% { text-shadow: 0 0 10px rgba(255, 43, 43, 0.7), 0 0 20px rgba(255, 43, 43, 0.4); }
  50% { text-shadow: 0 0 20px rgba(255, 43, 43, 1), 0 0 40px rgba(255, 43, 43, 0.8); }
  100% { text-shadow: 0 0 10px rgba(255, 43, 43, 0.7), 0 0 20px rgba(255, 43, 43, 0.4); }
}

/* PATCH CERCLE 60% + HEURE/DATE 50% EN HAUT – !IMPORTANT MAX */
.clock-player__dial {
  position: relative !important;
  transform: scale(0.5) !important; /* 60% mini */
  transform-origin: center center !important;
  transition: transform 0.3s ease !important;
  overflow: visible !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 200px !important;
}

.clock-player:hover .clock-player__dial {
  transform: scale(0.65) !important; /* Hover léger */
}

/* HEURE/DATE EN HAUT (comme avant) – RÉDUITE 50% */
#ros-date {
  font-family: 'Cinzel Decorative', cursive !important;
  font-weight: 900 !important;
  font-size: clamp(6px, 0.8vw, 10px) !important; /* ~50% de base, adaptatif */
  color: #ff2b2b !important;
  text-shadow: 0 0 8px rgba(255, 43, 43, 0.6) !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 4px 0 8px !important; /* En haut du lecteur */
  transition: all 0.4s ease !important;
  opacity: 0.9 !important;
}

/* GLOW PULSE HEURE/DATE */
#ros-date.changed {
  animation: date-glow 1.5s ease-in-out !important;
}

@keyframes date-glow {
  0% { text-shadow: 0 0 8px rgba(255, 43, 43, 0.6); }
  50% { text-shadow: 0 0 16px rgba(255, 43, 43, 1); }
  100% { text-shadow: 0 0 8px rgba(255, 43, 43, 0.6); }
}

/* ————— LAYOUT DES VIDÉOS ————— */

.videos-section {
  max-width: 1400px;
  margin: 4rem auto;
}

/* Grille de base */
.videos-grid {
  display: grid;
  gap: 3rem;
}

/* Bloc du haut : 2 x 2 reines en 16:9 */
.videos-grid--queens {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Bloc du bas : 3 x 2 vidéos verticales */
.videos-grid--shorts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Responsive */
@media (max-width: 1100px) {
  .videos-grid--queens {
    grid-template-columns: 1fr;
  }
  .videos-grid--shorts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .videos-grid--shorts {
    grid-template-columns: 1fr;
  }
}

/* ————— CARDS ————— */

.video-card {
  background: radial-gradient(circle at top, #1a0505 0%, #050101 55%, #000 100%);
  border-radius: 10px;
  padding: 1.5rem;
  border: 1px solid #ff2b2b;
  box-shadow: 0 0 18px rgba(255, 43, 43, 0.45);
}

/* Vidéo à l'intérieur de la card */
.video-card video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 2px solid #ff2b2b;
  box-shadow: 0 0 22px rgba(255, 43, 43, 0.9);
  object-fit: cover;
}

/* ————— SPÉCIAL VIDÉOS VERTICALES (9:16) ————— */

.video-card--portrait video {
  aspect-ratio: 9 / 16;
  object-fit: cover; /* on remplit bien la carte, pas de bandes bizarres */
}


/* Forcer les vidéos 9:16 à garder le ratio même en fullscreen */
video.video-portrait {
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* Correction spécial fullscreen */
video.video-portrait:fullscreen {
  width: auto !important;
  height: 100vh !important;
  aspect-ratio: 9/16 !important;
  object-fit: contain !important;
  background: black;
}


/* PLAYER ULTRA-COMPACT — AJUSTEMENTS VOLUME */
@media (max-width: 768px) {

  .clock-player {

    /* On garde ce qu'on avait déjà */
    position: fixed;
    top: 10px;
    right: 10px;
    width: 120px;
    padding: 4px 6px;
    border-radius: 8px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(5px);
    color: #ff2b2b; /* Tout devient rouge par défaut */
    z-index: 500;
  }

  /* Titre et textes */
  .clock-player .track-title {
    font-size: 0.70rem;
    color: #ff2b2b; /* rouge sacré */
  }

  /* Boutons (play/pause/next/back) */
  .clock-player button {
    font-size: 0.90rem;
    color: #ff2b2b;
  }

  /* Label “Volume” */
  .clock-player .volume-label {
    font-size: 0.65rem;     /* réduit */
    color: #ff2b2b;         /* rouge obligatoire */
    margin-bottom: 2px;
  }

  /* Slider du volume */
  .clock-player input[type="range"] {
    height: 2px;            /* plus mince */
    accent-color: #ff2b2b;  /* slider rouge */
    background-color: #ff2b2b;
  }
}

/* NAV ADAPTÉE AU MOBILE — TOUT AFFICHE */
@media (max-width: 768px) {

  nav {
    display: flex;
    flex-wrap: wrap;          /* permet de passer sur 2 lignes */
    justify-content: center;  /* tout centré */
    gap: 4px 12px;            /* espace entre les liens */
    padding: 6px 4px;         /* nav plus compacte */
  }

  nav a {
    font-size: 0.75rem;       /* ~30% plus petit */
    padding: 2px 6px;         /* réduit la hauteur & largeur */
    white-space: nowrap;      /* chaque mot reste sur une ligne */
  }
}

@media (max-width: 768px) {

  nav {
    padding: 4px 0;          /* moins haut */
  }

  nav a {
    line-height: 1;          /* liens plus serrés */
    margin: 0;               /* aucune marge verticale */
    padding: 2px 4px;        /* très compact */
    font-size: 0.70rem;      /* légèrement plus petit */
  }

  nav div, nav span, nav li {
    margin: 0;
    padding: 0;
  }
}



.lang-switch { transform: scale(0.4); }


/* Carte spéciale large (16:9) qui occupe 2 colonnes dans la grille */
.track-card--wide {
  grid-column: span 2;
}

/* Sur mobile, on revient à 1 colonne pour éviter les bugs */
@media (max-width: 900px) {
  .track-card--wide {
    grid-column: span 1;
  }
}

/* — Vidéo cards : hover & couleurs — */
.video-card {
  background: rgba(40, 0, 0, 0.85); /* rouge sombre uniforme */
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Unifier toutes les cartes vidéo avec le rouge officiel du Règne (#ff2b2b) */
.video-card {
  border: 2px solid #ff2b2b !important;
  background: rgba(0, 0, 0, 0.82) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.video-card__title,
.video-card__tagline {
  color: #ff2b2b !important;
}

.video-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 20px #ff2b2b;
  background: rgba(10, 0, 0, 0.92) !important;
}

/* SECTION FEATURED */
.home-featured {
  text-align: center;
  margin: 60px auto;
  max-width: 900px;
}

.home-featured__title {
  color: #ff2b2b;
  font-family: "Cinzel Decorative", serif;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;

  /* Pulse rouge harmonisé */
  animation: title-pulse 3.2s ease-in-out infinite;
}

/* FEATURED CARD */
.featured-card {
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #ff2b2b;
  border-radius: 16px;
  padding: 20px;
  transition: 0.3s ease;
  box-shadow: 0 0 25px #ff2b2b;
}

/* Glow + intensification au hover */
.featured-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 45px #ff2b2b, 0 0 80px #ff2b2b;
}

/* Video */
.featured-card__media video {
  width: 100%;
  border-radius: 12px;
}

/* Textes */
.featured-card__name {
  margin-top: 15px;
  font-size: 1.6rem;
  color: #ff2b2;
}

.featured-card__desc {
  margin-top: 10px;
  color: #ff2b2;
  font-size: 1rem;
  line-height: 1.5;
}


.ros-emblem {
  display: block;
  margin: 80px auto 40px auto;
  max-width: 260px;
  height: auto;

  /* Aura lumineuse très fine */
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))   /* pourtour blanc net */
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)); /* aura douce, légère */
animation: ros-pulse 3s ease-in-out infinite; /* Pulse sacré */
}

/* ===== Pulse sacré du Règne ===== */
@keyframes ros-pulse {
  0% {
    filter:
      drop-shadow(0 0 2px rgba(200, 200, 200, 0.6))
      drop-shadow(0 0 5px rgba(200, 200, 200, 0.25));
  }
  50% {
    filter:
      drop-shadow(0 0 3px rgba(230, 230, 230, 0.75))
      drop-shadow(0 0 8px rgba(220, 220, 220, 0.38));
  }
  100% {
    filter:
      drop-shadow(0 0 2px rgba(200, 200, 200, 0.6))
      drop-shadow(0 0 5px rgba(200, 200, 200, 0.25));
  }
}

/* === Featured card (home video) === */
.featured-card {
  max-width: 400px;        /* ajuste selon ton goût */
  margin: 0 auto;          /* centre la carte */
}

.featured-card__media video {
  width: 100%;             /* prend la largeur du conteneur */
  height: auto;            /* respecte le ratio */
  border-radius: 12px;     /* optionnel : arrondir, style du Règne */
  display: block;
}


@keyframes title-pulse {
  0% {
    opacity: 1;
    text-shadow:
      0 0 4px rgba(255, 43, 43, 0.6),
      0 0 12px rgba(255, 43, 43, 0.4);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 6px rgba(255, 43, 43, 0.9),
      0 0 20px rgba(255, 43, 43, 0.65);
  }
  100% {
    opacity: 1;
    text-shadow:
      0 0 4px rgba(255, 43, 43, 0.6),
      0 0 12px rgba(255, 43, 43, 0.4);
  }
}

/* Emblème centré dans le HERO */
.veil-emblem {
  width: 200px;               /* Ajuste si tu veux plus grand */
  max-width: 35vw;            /* Responsive */
  filter: drop-shadow(0 0 15px #ff000088);
  animation: emblem-fade 2.5s ease-out forwards;
  opacity: 0;
}

@keyframes emblem-fade {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* === Scrollbar Rouge — Le Règne === */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #000; /* noir profond */
}

::-webkit-scrollbar-thumb {
  background-color: #ff2b2b; /* rouge signature */
  border-radius: 6px;
  border: 2px solid #000;
}

::-webkit-scrollbar-button {
  background-color: #ff2b2b; /* flèches rouges */
}

.chat-message,
.chat-message.self,
.chat-message * {
  text-shadow: none !important;
  box-shadow: none !important;
}


/* FIN CSS NETTOYÉ – SELENE ASH ∞ */