Add /fiches

src/components/Knowledge/styles.module.scss

@@ -122,3 +122,181 @@
         background-color: $color-active-niet;
     }
 }
+
+/* Cards */
+
+.card {
+    display: inline-block;
+    vertical-align: top;
+    width: 48vw;
+    margin: 1vw;
+    break-inside: avoid;
+    border: $color-black solid 0.1vw;
+}
+
+.header {
+    color: $color-white;
+    background-color: #e18502;
+    text-align: center;
+    font-size: 2.5vw;
+    line-height: 5vw;
+    font-family: $font-pel;
+}
+.imageContainer {
+    padding: 1vw;
+}
+
+.benevolesContainer {
+    width: 100%;
+}
+.tableBenevoles {
+    width: 100%;
+    vertical-align: top;
+    padding-top: 1vw;
+}
+.gameImage {
+    width: 10vw;
+}
+
+.okHeader,
+.bofHeader {
+    text-align: center;
+    width: 100%;
+    font-size: 1.8vw;
+    font-weight: bold;
+}
+.okHeader {
+    background-color: #9dba5d;
+}
+.listOk {
+    text-align: center;
+}
+.listOk td {
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+.bofHeader {
+    background-color: #cb9902;
+}
+.listBof {
+    text-align: center;
+}
+.listBof td {
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+
+.nicknameContainer {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-content: center;
+    gap: 0.5vw;
+}
+.nickname {
+    flex: 1 1 auto;
+    white-space: nowrap;
+}
+
+.numberOfPlayersImgContainer {
+    width: 6.3vw;
+}
+
+.numberOfPlayersImg {
+    width: 6vw;
+    height: 4vw;
+    background: url("../../app/img/knowledgeCards/nombre_joueurs-fiche.png") no-repeat center center;
+    background-size: cover;
+}
+.numberOfPlayers {
+    font-family: $font-pel;
+    font-size: 1.6vw;
+    white-space: nowrap;
+}
+
+.durationImgContainer {
+    width: 6.1vw;
+    padding-left: 1vw;
+}
+.durationImg {
+    width: 6vw;
+    height: 4vw;
+    background: url("../../app/img/knowledgeCards/duree-fiche.png") no-repeat center center;
+    background-size: cover;
+}
+.duration {
+    font-family: $font-pel;
+    font-size: 1.6vw;
+    white-space: nowrap;
+}
+
+.typeImgContainer {
+    width: 6.2vw;
+    padding-left: 1.1vw;
+}
+.verteImg,
+.orangeImg,
+.rougeImg {
+    width: 6vw;
+    height: 6vw;
+    background-size: cover;
+}
+.verteImg {
+    background: url("../../app/img/knowledgeCards/jauge-verte.png") no-repeat center center;
+}
+.orangeImg {
+    background: url("../../app/img/knowledgeCards/jauge-orange.png") no-repeat center center;
+}
+.rougeImg {
+    background: url("../../app/img/knowledgeCards/jauge-rouge.png") no-repeat center center;
+}
+
+.type {
+    font-family: $font-pel;
+    font-size: 1.6vw;
+    white-space: nowrap;
+}
+
+.pppImgContainer {
+    width: 6vw;
+    padding-left: 0.7vw;
+}
+.pppImg {
+    width: 6vw;
+    height: 3.4vw;
+    background: url("../../app/img/knowledgeCards/ppp-fiche-ko-trespetit.png") no-repeat center
+        center;
+    background-size: cover;
+}
+
+.oneDayOnly {
+    color: $color-red;
+}
+
+.footer {
+    height: 3vw;
+    font-family: $font-pel;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-content: center;
+    background-color: #96b397;
+    font-style: oblique;
+}
+
+.year {
+    flex: 0 1 auto;
+    align-self: center;
+    margin-left: 1vw;
+    font-size: 1vw;
+}
+
+.container {
+    flex: 0 1 auto;
+    align-self: center;
+    margin-right: 1vw;
+    font-size: 1.5vw;
+}