body {
  background-color:bisque;
}

.titre {
  font-family: cursive;
  text-align: center;
}

#youssef, #thomas, #sofiane, #Sami, #paul, #oliventhan, #maxime, #leopold, #kylian, #emma, #chloe, #adrien {
  width: 150px;
  height: 150px;
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.youssef, .thomas, .sofiane, .Sami, .paul, .oliventhan, .maxime, .leopold, .kylian, .emma, .chloe, .adrien {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #333;
  background-color:cornsilk;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#youssef:hover, #thomas:hover, #sofiane:hover, #Sami:hover, #paul:hover, #oliventhan:hover, #maxime:hover, #leopold:hover, #kylian:hover, #emma:hover, #chloe:hover, #adrien:hover {
  transform-origin: center;
  transform: scale(1.15) translateX(0%) translateY(0%);
}

.avatar {
margin-left: 20%;
margin-right: 20%;
}

.text {
  font-family:'Trebuchet MS';
  text-align: center;
  color: #000;
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.text:hover {
  transform-origin: center;
  transform: scale(1.25) translateX(0%) translateY(0%);
}

.card {
  width: 170px;
  height: 220px;
  display: inline-block;
}

.card__inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card__inner {
  transform: rotateY(180deg);
}

.card__face--front,
.card__face--back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card__face--front {
}

.card__face--back {
  transform: rotateY(180deg);
  color: white;
  justify-content: center;
  align-items: center;
}



.youssef-cls--1 {
  fill: #fff;
}

.youssef-cls--2 {
  fill: #020100;
}

.youssef-cls--3 {
  fill: url(#Dégradé_sans_nom_31);
}

.youssef-cls--4 {
  fill: none;
  stroke: #3b0700;
  stroke-miterlimit: 10;
  stroke-width: .1px;
}

.youssef-cls--5 {
  opacity: .65;
}

.youssef-cls--6 {
  fill: #605757;
}

.youssef-cls--7 {
  fill: #ffa95a;
}

.youssef-cls--8 {
  fill: #070100;
  opacity: .66;
}

.youssef-cls--9 {
  fill: url(#Dégradé_sans_nom_31-2);
}

.youssef-cls--10 {
  fill: url(#Dégradé_sans_nom_31-3);
}

.youssef-cls--11 {
  mask: url(#mask);
}

.youssef-cls--12 {
  fill: #ff9e57;
}

.youssef-cls--13 {
  fill: #6d4a2f;
}

.thomas-cls--1 {
  fill: #fff;
}

.thomas-cls--2 {
  fill: #f2642c;
}

.thomas-cls--3 {
  fill: none;
  stroke: #3b0700;
  stroke-width: .1px;
}

.thomas-cls--3, .thomas-cls--4 {
  stroke-miterlimit: 10;
}

.thomas-cls--5 {
  fill: #ffd29f;
}

.thomas-cls--6 {
  fill: #21316d;
}

.thomas-cls--4 {
  stroke: #000;
  stroke-width: .25px;
}

.thomas-cls--4, .thomas-cls--7 {
  fill: #7f512f;
}

.thomas-cls--8 {
  fill: #ffbf84;
}

.sofiane-cls-1 {
  fill: url(#Dégradé_sans_nom_16);
}

.sofiane-cls-2 {
  fill: #fff;
}

.sofiane-cls-3 {
  fill: #ef5b5b;
}

.sofiane-cls-4 {
  fill: none;
  stroke: #3b0700;
  stroke-miterlimit: 10;
  stroke-width: .1px;
}

.sofiane-cls-5 {
  fill: #ffa95a;
}

.sofiane-cls-6 {
  fill: url(#Dégradé_sans_nom_16-2);
}

.sofiane-cls-7 {
  fill: #ff9e57;
}

.sofiane-cls-8 {
  fill: #6d4a2f;
}

.sami-cls--1 {
  fill: #fff;
}

.sami-cls--2 {
  stroke: #3b0700;
  stroke-width: .1px;
}

.sami-cls--2, .sami-cls--3 {
  fill: none;
  stroke-miterlimit: 10;
}

.sami-cls--3 {
  stroke: #000;
  stroke-width: .25px;
}

.sami-cls--4 {
  fill: #ffa95a;
}

.sami-cls--5 {
  fill: #f91919;
}

.sami-cls--6 {
  fill: #ff9e57;
}

.sami-cls--7 {
  fill: #6d4a2f;
}

.paul-cls--1 {
  fill: #fff;
}

.paul-cls--2, .paul-cls--3 {
  fill: #9e5a2d;
}

.paul-cls--4 {
  stroke: #3b0700;
  stroke-width: .1px;
}

.paul-cls--4, .paul-cls--5 {
  fill: none;
}

.paul-cls--4, .paul-cls--5, .paul-cls--3 {
  stroke-miterlimit: 10;
}

.paul-cls--5, .paul-cls--3 {
  stroke: #000;
  stroke-width: .25px;
}

.paul-cls--6 {
  fill: #ffd29f;
}

.paul-cls--7 {
  fill: #ffbf84;
}

.paul-cls--8 {
  fill: #606060;
}

.paul-cls--9 {
  fill: #6d4a2f;
}

.oliventhan-cls--1 {
  fill: #fff;
}

.oliventhan-cls--2 {
  stroke: #000;
  stroke-width: .25px;
}

.oliventhan-cls--2, .oliventhan-cls--3 {
  stroke-miterlimit: 10;
}

.oliventhan-cls--4 {
  fill: #a06d47;
}

.oliventhan-cls--5 {
  fill: #0b1160;
}

.oliventhan-cls--3 {
  fill: none;
  stroke: #3b0700;
  stroke-width: .1px;
}

.oliventhan-cls--6 {
  fill: #b77a51;
}

.oliventhan-cls--7 {
  fill: #6d4a2f;
}

.maxime-cls--1 {
  fill: #ff9d00;
}

.maxime-cls--2, .maxime-cls--3 {
  fill: #66382b;
}

.maxime-cls--2, .maxime-cls--4, .maxime-cls--5 {
  stroke-miterlimit: 10;
}

.maxime-cls--2, .maxime-cls--5 {
  stroke: #000;
  stroke-width: .25px;
}

.maxime-cls--6 {
  fill: #fff;
}

.maxime-cls--4 {
  stroke: #3b0700;
  stroke-width: .1px;
}

.maxime-cls--4, .maxime-cls--5 {
  fill: none;
}

.maxime-cls--7 {
  fill: #ffd29f;
}

.maxime-cls--8 {
  fill: #ffbf84;
}

.maxime-cls--9 {
  fill: #0a3d08;
}

.leopold-cls--1 {
  fill: #fff;
}

.leopold-cls--2 {
  fill: #670075;
}

.leopold-cls--3 {
  stroke: #3b0700;
  stroke-width: .1px;
}

.leopold-cls--3, .leopold-cls--4, .leopold-cls--5 {
  stroke-miterlimit: 10;
}

.leopold-cls--3, .leopold-cls--5 {
  fill: none;
}

.leopold-cls--4, .leopold-cls--5 {
  stroke: #000;
  stroke-width: .25px;
}

.leopold-cls--4, .leopold-cls--6 {
  fill: #331711;
}

.leopold-cls--7 {
  fill: #ffd29f;
}

.leopold-cls--8 {
  fill: #ffbf84;
}

.leopold-cls--9 {
  fill: #6d4a2f;
}

.kylian-cls--1 {
  fill: #fff;
}

.kylian-cls--2 {
  fill: #f4bb82;
}

.kylian-cls--3, .kylian-cls--4, .kylian-cls--5, .kylian-cls--6 {
  stroke-miterlimit: 10;
}

.kylian-cls--3, .kylian-cls--5, .kylian-cls--6 {
  stroke: #000;
  stroke-width: .25px;
}

.kylian-cls--4 {
  stroke: #3b0700;
  stroke-width: .1px;
}

.kylian-cls--4, .kylian-cls--5 {
  fill: none;
}

.kylian-cls--6 {
  fill: #47230a;
}

.kylian-cls--7 {
  fill: #ffb6be;
}

.kylian-cls--8 {
  fill: #ffbf84;
}

.kylian-cls--9 {
  fill: #6d4a2f;
}

.emma-cls--1 {
  fill: #fff;
}

.emma-cls--2 {
  stroke: #3b0700;
  stroke-width: .1px;
}

.emma-cls--2, .emma-cls--3 {
  fill: none;
}

.emma-cls--2, .emma-cls--3, .emma-cls--4 {
  stroke-miterlimit: 10;
}

.emma-cls--3, .emma-cls--4 {
  stroke: #000;
  stroke-width: .25px;
}

.emma-cls--4 {
  fill: url(#Dégradé_sans_nom_70);
}

.emma-cls--5 {
  fill: #f9bb85;
}

.emma-cls--6 {
  fill: #ffbf84;
}

.emma-cls--7 {
  fill: #552d00;
}

.emma-cls--8 {
  fill: #050101;
}

.emma-cls--9 {
  fill: #0a3d08;
}

.emma-cls--10 {
  fill: #620044;
}

.chloe-cls--1 {
  fill: #fff;
}

.chloe-cls--2 {
  fill: none;
  stroke: #3b0700;
  stroke-width: .1px;
}

.chloe-cls--2, .chloe-cls--3 {
  stroke-miterlimit: 10;
}

.chloe-cls--4 {
  fill: #0085b8;
}

.chloe-cls--3 {
  fill: #020000;
  stroke: #000;
  stroke-width: .25px;
}

.chloe-cls--5 {
  fill: #f9bb85;
}

.chloe-cls--6 {
  fill: #ffbf84;
}

.chloe-cls--7 {
  fill: #050101;
}

.chloe-cls--8 {
  fill: #0a3d08;
}

.adrien-cls-1 {
  stroke: #000;
  stroke-width: .25px;
}

.adrien-cls-1, .adrien-cls-2 {
  fill: #66382b;
}

.adrien-cls-1, .adrien-cls-3 {
  stroke-miterlimit: 10;
}

.adrien-cls-4 {
  fill: #fff;
}

.adrien-cls-3 {
  fill: none;
  stroke: #3b0700;
  stroke-width: .1px;
}

.adrien-cls-5 {
  fill: #7c7c7c;
}

.adrien-cls-6 {
  fill: #ffd29f;
}

.adrien-cls-7 {
  fill: #ffbf84;
}

.adrien-cls-8 {
  fill: #0a3d08;
}


  .description {
    font-weight: 700;
    font-size: 15px;
    text-align: center;
  }

  .link {
    color: black;
    text-decoration: underline;
  }



  .logo_social {
    transform: scale(70%);
  }

  .des {
    margin: auto;    
    width: 700px;
    border: 1px solid #333;
    background-color:cornsilk;
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }