/* ===== EJKCSS - Bannières animées ===== */
.banniere-js {
  position: relative;
  width: 100%;
  height: 300px;
  /*aspect-ratio: 2000 / 300;*/
  overflow: hidden;
}

.banniere-js canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 300px;
  display: block;
}

.banniere-js .overlay-content {
  position: relative;
  text-align: center;
  vertical-align: middle;
  z-index: 2;
  height: 100%;
  padding: 20px 40px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* Fonds de couleur (réutilise ta convention rouge / bleu / vert ...) */
.banniere-js.fond-rouge  { background: linear-gradient(135deg,#7a1f1f,#2b0a0a); }
.banniere-js.fond-bleu   { background: linear-gradient(135deg,#1f3a7a,#0a1a2b); }
.banniere-js.fond-vert   { background: linear-gradient(135deg,#1f7a3a,#0a2b12); }
.banniere-js.fond-jaune  { background: linear-gradient(135deg,#7a6a1f,#2b230a); }
.banniere-js.fond-rose   { background: linear-gradient(135deg,#4a1f7a,#1a0a2b); }
.banniere-js.fond-orange { background: linear-gradient(135deg,#f09205,#754d03); }
.banniere-js.fond-gris   { background: linear-gradient(135deg,#000000,#000000); }