.duotone {
  position: relative;
  margin: 0 auto;
  background-color: #f9c705;
}

.duotone img {
  filter: grayscale(100%);
  mix-blend-mode: multiply;
}

/* CSS generated layers for duotone shadow/highlight colors */

.duotone::before,
.duotone::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 30px;
}

/* highlight color */
@supports (mix-blend-mode: darken){
.duotone::after{
  background-color: hsla(48, 96%, 50%, 1);
  mix-blend-mode: darken;
}
}

/* shadow color */
@supports (mix-blend-mode: lighten){
.duotone::before{
  background-color: hsl(213, 68%, 15%, 1);
  mix-blend-mode: lighten;
}
}

.duotone-bleu {
  position: relative;
  margin: 0 auto;
  background-color: white;
}

.duotone-bleu img {
  filter: grayscale(100%);
  mix-blend-mode: multiply;
}

/* CSS generated layers for duotone shadow/highlight colors */

.duotone-bleu::before,
.duotone-bleu::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

/* highlight color */
@supports (mix-blend-mode: darken){
.duotone-bleu:after{
  background-color: #25488b;
    mix-blend-mode: hue;
}
}

/* shadow color */
@supports (mix-blend-mode: lighten){
.duotone-bleu:before{
  background-color: #25488b;
  mix-blend-mode: color;
}
}

/*bleu clair 
#25488b*/