/*Peau*/
.actif .Lisast0,.actif .Quentinst5,.actif .Yannst1,.actif .Mariest1,.actif .Valentinst1,.actif .Gauthierst3,.actif .Maximest3,.actif .Benjaminst2,.actif .Antoinest4,.actif .Louest0,.actif .Lucasst0,.actif .cls-4,.actif .Quentinst0{
    fill: #fe00f6;
    transition: fill 4s ease-out;
}
.Lisast0,.Yannst1,.Mariest1,.Valentinst1,.Quentinst5,.Gauthierst3,.Maximest3,.Benjaminst2,.Antoinest4, .Louest0,.Lucasst0,.cls-4, .Quentinst0{
    transition: fill 4s ease-out;
}

/*Yeux*/
.actif .Lisast5,.actif .Yannst4,.actif .Maximest9,.actif .Benjaminst7,.actif .Antoinest7,.actif .Louest6,.actif .Mariest7,.actif .Lucasst6,.actif .Valentinst8 ,.actif .cls-9,.actif .Gauthierst10,.actif .Quentinst3{
    fill: #f20455;
    transition: fill 4s ease-out;
}
.Lisast5,.Yannst4,.Maximest9,.Benjaminst7,.Antoinest7,.Louest6,.Mariest7,.Lucasst6, .Valentinst8 ,.cls-9,.Gauthierst10, .Quentinst3{
    transition: fill 4s ease-out;
}


/*Nez*/
.actif .Lisast3,.actif .Yannst2,.actif .Maximest6,.actif .Benjaminst5,.actif .Antoinest5,.actif .Louest4,.actif .Mariest5,.actif .Lucasst4,.actif .Valentinst3 ,.actif .cls-7,.actif .Gauthierst8,.actif .Quentinst1{
    fill: #fe0000;
    transition: fill 4s ease-out;
}
.Lisast3,.Yannst2,.Maximest6,.Benjaminst5,.Antoinest5,.Louest4,.Mariest5,.Lucasst4,.Valentinst3 ,.cls-7,.Gauthierst8,.Quentinst1{
    transition: fill 4s ease-out;
}


/*Reflet Nez*/
.actif .Lisast9,.actif .Yannst9,.actif .Maximest11,.actif .Benjaminst10,.actif .Antoinest12,.actif .Louest8,.actif .Mariest10,.actif .Lucasst9,.actif .Valentinst10 ,.actif .cls-11,.actif .Gauthierst13,.actif .Quentinst8{
    fill: #fefe44;
    transition: fill 4s ease-out;
}
.Lisast9,.Yannst9, .Maximest11,.Benjaminst10, .Antoinest12,.Louest8,.Mariest10,.Lucasst9,.Valentinst10 ,.cls-11,.Gauthierst13, .Quentinst8{
    transition: fill 4s ease-out;
}

/*Reflet oeil*/
.actif .Lisast8,.actif .Yannst8,.actif .Maximest10,.actif .Benjaminst9,.actif .Antoinest11,.actif .Louest7,.actif .Mariest9,.actif .Lucasst8,.actif .Valentinst9 ,.actif .cls-10,.actif .Gauthierst12,.actif .Quentinst7{
    fill: #0000ff;
    transition: fill 4s ease-out;
}
.Lisast8,.Yannst8,.Maximest10,.Benjaminst9,.Antoinest11,.Louest7,.Mariest9,.Lucasst8,.Valentinst9 ,.cls-10,.Gauthierst12,.Quentinst7{
    transition: fill 4s ease-out;
}

/*Couleur noir*/
.actif .Lisast1,.actif #CheveuxYann,.actif .Benjaminst8,.actif .Antoinest3,.actif .Antoinest2,.actif .Louest3,.actif .Valentinst2 ,.actif .Gauthierst0{
    fill: #fdfe02;
    transition: fill 4s ease-out;
}
.Lisast1,#CheveuxYann,.Benjaminst8,.Antoinest3,.Antoinest2,.Louest3,.Valentinst2 ,.Gauthierst0{
    transition: fill 4s ease-out;
}

/*Couleur jaune*/
.actif .Lisast2,.actif .Lisast7,.actif .Lucasst11,.actif .Lucasst7,.actif .cls-12, .actif .Mariest0, .actif .Mariest4, .actif .Maximest7, .actif .Quentinst4{
    fill: #011efe;
    transition: fill 4s ease-out;
}
.Lisast2,.Lisast7, .Lucasst11,.Lucasst7,.cls-12,.Mariest0,.Mariest4,.Maximest7, .Quentinst4{
    fill: #011efe;
    transition: fill 4s ease-out;
}
/*Couleur rose */
.actif .Yannst7, .actif .cls-2{
    fill: #44fefe;
    transition: fill 4s ease-out;
}
.Yannst7,.cls-2{
    transition: fill 4s ease-out;
}

/*Couleur Bleu*/
.actif .Yannst6, .actif .Mariest8, .actif .Valentinst11{
    fill: #f00f0f;
    transition: fill 4s ease-out;
}
.Yannst6,.Mariest8,.Valentinst11{
    transition: fill 4s ease-out;
}

/*Couleur Noir*/
.actif .Maximest5,.actif .Benjaminst0,.actif .Louest2,.actif .Lucasst2,.actif .Gauthierst5 ,.actif .Gauthierst1,.actif .Quentinst6{
    fill: #99ff05;
    transition: fill 4s ease-out;
}
.Maximest5,.Benjaminst0,.Louest2, .Lucasst2,.Gauthierst5, .Quentinst6,.Gauthierst1{
    transition: fill 4s ease-out;
}
/*Couleur blanche*/
.actif .Yannst5,.actif .Maximest1,.actif .Mariest2, .actif .Louest1, .actif .Lucasst1, .actif .cls-3, .actif .Gauthierst4{
    fill: #910901;
    transition: fill 4s ease-out;
}
.Yannst5,.Maximest1,.Mariest2,.Louest1,.Lucasst1,.cls-3,.Gauthierst4{
    transition: fill 4s ease-out;
}
/*Bonus*/

.actif .Valentinst6,.actif .Antoinest10, .actif .Maximest4{
    fill: #9ff0f0;
    transition: fill 4s ease-out;
}
.Valentinst6,.Antoinest10,.Maximest4{
    transition: fill 4s ease-out;
}

.actif .Lisast6{
    fill: #515951;
    transition: fill 4s ease-out;
}



.actif .Antoinest9{
    fill: #0ff0ff;
    transition: fill 4s ease-out;
}
.Antoinest9{
    transition: fill 4s ease-out;
}



#Interaction, #Interaction-2{
    opacity: 0;
    transition: opacity 1s ease-out;
}

.actif #Interaction,.actif #Interaction-2{
    opacity: 1;
    transition: opacity 4s ease-out;
}