.video-media {
  position: relative;
  background: #232323;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20,20,40,0.13);
  transition: transform 0.18s, box-shadow 0.18s;
  margin: 8px 14px;
}
.video-media:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 14px 32px rgba(0,0,0,0.24);
}
.video-media img {
  border-radius: 22px;
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}
.video-media .tuto-bandeau {
  position: absolute;
  left: 0; right: 0;
  background: rgba(0,0,0);
  color: #fff;
  padding: 12px 20px 10px 20px;
  width: 100%;
  z-index: 2;
  font-weight: 600;
  font-size: 1.07em;
}
.video-media .tuto-bandeau.bas {
  bottom: 0;
  border-radius: 0 0 22px 22px;
  font-size: 0.96em;
  padding-left: 10px;
  padding-top: 15px;
  padding-bottom: 50px;
  font-weight: 400;
  opacity: 0.98;
  text-shadow: 0 1px 5px #000;
}
.video-media .tuto-bandeau.haut {
  top: 0;
  border-radius: 22px 22px 0 0;
  opacity: 0.99;
}
.video-media .play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10 !important;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  display: inline-block;
  width: auto;
  height: auto;
  color: #fff;
  font-size: 3.5rem;
  margin-right: 1rem; /* "mr-3" approx */
  position: relative;
}
.owl-dots {
  display: flex !important;
  justify-content: center;
  margin-top: 20px;
}
.owl-dot span {
  background: #fff;
  width: 10px;
  height: 10px;
  border-radius:50%;
  display: block;
}
.owl-dot.active span {
  background: #ff0066;
}


/* ====== TABLE DARK THEME ====== */
.table {
  background: #1A1E25;            /* fond tableau */
  color: #e8e8e8;                  /* texte lisible */
  border-color: #373b44;           /* lignes */
}
.table th {
  background: #E93B6C;             /* en-tête brand */
  color: #fff;
  border-color: #ff2a80;
  font-weight: 700;
}
.table td, .table th {
  vertical-align: middle;
  padding: 12px 16px;
  color: #e8e8e8; /* gris clair lisible */
}

/* Forcer couleur des liens dans le tableau */
.table td a {
  color: #e8e8e8;
  text-decoration: none; /* pas de soulignement */
}

.table td a:hover {
  color: #ffffff; /* blanc pur au survol */
  text-decoration: underline; /* optionnel */
}

.table tbody tr:nth-child(even) { background: #20252d; }
.table tbody tr:nth-child(odd)  { background: #1b2027; }
.table tbody tr:hover { background: #2a303a; }

/* Optionnel: rendre le tableau scrollable sur mobile */
.table-wrap, .table-responsive { background: transparent; }