/* TeamKit — fond de la page communauté (3 oct. 2026), posé par js/communaute-fond.js.
   --cm-img : l'image (perso ou bannière du jeu) ; --cm-h : la teinte propre à la communauté. */
.community-hero { position: relative; overflow: hidden; isolation: isolate; transition: background .4s ease; }

/* 1 et 2 : une image, assombrie à gauche pour que le texte reste lisible */
.community-hero.cm-fond {
  background:
    linear-gradient(90deg, rgba(10, 10, 15, .96) 0%, rgba(10, 10, 15, .82) 42%, rgba(10, 10, 15, .45) 100%),
    linear-gradient(0deg, rgba(10, 10, 15, .9) 0%, rgba(10, 10, 15, 0) 40%),
    var(--cm-img) center / cover no-repeat;
}
/* une bannière « fabriquée » (logo sur fond) : plus discrète, le logo du jeu ne doit pas concurrencer le nom de la commu */
.community-hero.cm-fond-jeu-fabrique {
  background:
    linear-gradient(90deg, rgba(10, 10, 15, .97) 0%, rgba(10, 10, 15, .9) 50%, rgba(10, 10, 15, .7) 100%),
    var(--cm-img) right center / contain no-repeat,
    #0b0b12;
}

/* 3 : le fond TeamKit, teinté par le nom de la communauté */
.community-hero.cm-fond-teamkit {
  background:
    radial-gradient(ellipse at 88% 15%, hsla(var(--cm-h, 190), 85%, 55%, .32), transparent 55%),
    radial-gradient(ellipse at 8% 100%, rgba(123, 44, 191, .38), transparent 55%),
    linear-gradient(135deg, #0c0c15 0%, #12121c 100%);
}
.community-hero.cm-fond-teamkit::before {   /* une grille légère, comme un écran de jeu */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}
.community-hero.cm-fond-teamkit::after {    /* la mascotte TeamKit, en filigrane à droite */
  content: ''; position: absolute; right: -40px; bottom: -30px; width: 340px; height: 340px; z-index: -1; pointer-events: none;
  background: url('/assets/brand/mascotte_512.png') center / contain no-repeat;
  opacity: .1; filter: drop-shadow(0 0 30px hsla(var(--cm-h, 190), 90%, 60%, .6));
}

/* Le haut de la page gagne en présence quand il a un fond */
.community-hero.cm-fond, .community-hero.cm-fond-teamkit { border-bottom-color: hsla(var(--cm-h, 190), 70%, 55%, .35); }
.community-hero.cm-fond .community-logo-large, .community-hero.cm-fond-teamkit .community-logo-large,
.community-hero.cm-fond .community-logo-large-placeholder, .community-hero.cm-fond-teamkit .community-logo-large-placeholder {
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55), 0 0 0 4px hsla(var(--cm-h, 190), 80%, 55%, .25);
}
.community-hero.cm-fond h1, .community-hero.cm-fond-teamkit h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }

@media (max-width: 700px) {
  .community-hero.cm-fond {
    background:
      linear-gradient(0deg, rgba(10, 10, 15, .97) 0%, rgba(10, 10, 15, .8) 55%, rgba(10, 10, 15, .5) 100%),
      var(--cm-img) center / cover no-repeat;
  }
  .community-hero.cm-fond-teamkit::after { width: 200px; height: 200px; right: -30px; bottom: -20px; }
}
@media (prefers-reduced-motion: reduce) { .community-hero { transition: none; } }