/* Remplace l'icône Font Awesome "fa-play" par ton SVG colorable */
/* === Icône PLAY === */
.fa-play,
i.fa-play {
  display: inline-block;
  width: 1em;
  height: 1em;

  /* Le SVG sert de masque */
  -webkit-mask-image: url('../icone/icone-play.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url('../icone/icone-play.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  /* La couleur vient d'ici → c’est ce qui colorera ton icône */
  background-color: currentColor;  /* = prend la valeur de "color" */

  /* Alignement et neutralisation du glyphe Font Awesome */
  vertical-align: middle;
  line-height: 0;
  font-family: inherit !important;
}

.fa-play::before {
  content: none !important;
  display: none !important;
}

/* === Icône VOLUME === */
.fa-volume-up,
i.fa-volume-up {
  display: inline-block;
  width: 1em;
  height: 1em;
  -webkit-mask-image: url('../icone/icone-son.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url('../icone/icone-son.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  background-color: currentColor;
  vertical-align: middle;
  line-height: 0;
  font-family: inherit !important;
}

.fa-volume-up::before {
  content: none !important;
  display: none !important;
}

/* === Icône PAUSE === */
.fa-pause,
i.fa-pause {
  display: inline-block;
  width: 1em;
  height: 1em;
  -webkit-mask-image: url('../icone/icone-pause.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url('../icone/icone-pause.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  background-color: currentColor;
  vertical-align: middle;
  line-height: 0;
  font-family: inherit !important;
}

.fa-pause::before {
  content: none !important;
  display: none !important;
}

/* === Icône PARAMÈTRES === */
.fa-cog,
i.fa-cog {
  display: inline-block;
  width: 1em;
  height: 1em;
  -webkit-mask-image: url('../icone/icon-parametres.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url('../icone/icon-parametres.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  background-color: currentColor;
  vertical-align: middle;
  line-height: 0;
  font-family: inherit !important;
}

.fa-cog::before {
  content: none !important;
  display: none !important;
}


/* === Icône RECULER 10sec === */
.fa-backward,
i.fa-backward {
  display: inline-block;
  width: 1em;
  height: 1em;
  -webkit-mask-image: url('../icone/icone-reculer.svg '); /* ton SVG reculer */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url('../icone/icone-reculer.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  background-color: currentColor;
  vertical-align: middle;
  line-height: 0;
  font-family: inherit !important;
}

.fa-backward::before {
  content: none !important;
  display: none !important;
}

/* === Icône AVANCER 30sec === */
.fa-forward,
i.fa-forward {
  display: inline-block;
  width: 1em;
  height: 1em;
  -webkit-mask-image: url('../icone/icone-avancer.svg'); /* ton SVG avancer */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url('../icone/icone-avancer.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  background-color: currentColor;
  vertical-align: middle;
  line-height: 0;
  font-family: inherit !important;
}

.fa-forward::before {
  content: none !important;
  display: none !important;
}