Ajoute la section des résultats

assets/sass/main.scss

@@ -3,23 +3,34 @@ $jaune: #FCBE00;
 $bleu: #243887;
 
 body {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 0 3rem;
+  margin: 0;
+  padding: 0;
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem 3rem;
   font-family: Lato;
-  background-color: $bleu;
-  color: white;
 }
 
-ol {
-  counter-reset: compteurQuestion;
-  padding:0;
-  li {
-    list-style-type: none;
-  }
+.bg-blanc {
+  background-color: white;
+  color: $bleu
+}
+.bg-jaune {
+  background-color: $jaune;
+  color: $bleu
+}
+.bg-bleu {
+  background-color: $bleu;
+  color: white;
 }
 
 nav ul {
+  display: flex;
+  gap: 1rem;
   list-style: none;
   padding: 3px 5px;
   background: #111;
@@ -50,80 +61,181 @@ nav ul {
   }
 }
 
-.carte {
-  border: 1rem solid white;
-  border-radius: 1rem;
-  color: $bleu;
-  background-color: white;
-  margin-top: 1rem;
+.symbole {
+  display: flex;
+  justify-content: center;
+  font-family: Andalemono;
+}
 
-  .question {
-    .image {
-      display: flex;
-      border-radius: 1rem 1rem 0 0;
-      overflow: hidden;
-      img {
-        width: 100%;
+.questions {
+  ol {
+    counter-reset: compteurQuestion;
+    padding:0;
+    li {
+      list-style-type: none;
+    }
+  }
+
+  .carte {
+    max-width: 600px;
+    border: 1rem solid white;
+    border-radius: 1rem;
+    color: $bleu;
+    background-color: white;
+    margin-top: 1rem;
+
+    .question {
+      .image {
+        display: flex;
+        border-radius: 1rem 1rem 0 0;
+        overflow: hidden;
+        img {
+          width: 100%;
+        }
+      }
+      .titre {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-family: VG5000;
+        font-size: 3rem;
+        background-color: $jaune;
+        padding-right: 1rem;
+
+        .numero:before {
+          counter-increment: compteurQuestion;
+          content: counter(compteurQuestion)".";
+          margin-right: .3em;
+          margin-left: 1rem;
+        }
+        h2 {
+          font-size: 1rem;
+          font-weight: normal;
+        }
       }
     }
-    .titre {
+
+    .reponses {
       display: flex;
-      flex-direction: row;
-      align-items: center;
-      font-family: VG5000;
-      font-size: 3rem;
-      background-color: $jaune;
-      padding-right: 1rem;
-
-      .numero:before {
-        counter-increment: compteurQuestion;
-        content: counter(compteurQuestion)".";
-        margin-right: .3em;
-        margin-left: 1rem;
+      flex-direction: column;
+      gap: 1rem;
+      list-style: none;
+      padding: 2rem 3.5rem 1rem 1.5rem;
+
+      .choix {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        input[type=radio] {
+          appearance: none;
+          position: absolute;
+
+          &:checked + .symbole {
+            color: $jaune;
+          }
+        }
+
+        .symbole {
+          width: 3rem;
+          flex-shrink: 0;
+          font-size: 1.5rem;
+
+          &.◆, &.● {
+            font-size: 2rem;
+          }
+        }
+
+        .reponse {
+          font-size: 0.85rem;
+        }
       }
-      h2 {
-        font-size: 1rem;
-        font-weight: normal;
+    }
+  }
+}
+
+.resultats {
+  .titre {
+    width: 100%;
+    max-width: 600px;
+    padding: 0 3rem;
+
+    h2 {
+      text-transform: uppercase;
+      text-align: center;
+      margin-bottom: 0;
+    }
+    .mes-resultats {
+      display: flex;
+      justify-content: center;
+      margin: 0.5rem 0 1.5rem 0;
+      ul {
+        display: flex;
+        gap: 1.5rem;
+        align-items: center;
+        margin: 0;
+        padding: 0;
+        li {
+          display: flex;
+          align-items: center;
+          list-style-type: none;
+          .nombre-reponse {
+            margin-right: 0.25rem;
+          }
+          .symbole {
+            display: inline;
+            font-size: 1rem;
+            line-height: 1;
+
+            &.◆, &.● {
+              font-size: 1.5rem;
+            }
+          }
+        }
       }
     }
   }
 
-  .reponses {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    list-style: none;
-    padding: 2rem 3.5rem 1rem 1.5rem;
+  .resultat {
+    max-width: 600px;
+    padding: 1.5rem 3rem;
 
-    .choix {
+    .entete {
       display: flex;
       align-items: center;
-      cursor: pointer;
+      .symboles {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        flex-shrink: 0;
+        width: 4rem;
+        justify-content: end;
 
-      input[type=radio] {
-        appearance: none;
-        position: absolute;
+        .symbole {
+          font-size: 2.5rem;
 
-        &:checked + .symbol {
-          color: $jaune;
+          &.◆, &.● {
+            font-size: 3rem;
+          }
         }
       }
-
-      .symbol {
-        width: 3rem;
-        flex-shrink: 0;
-        display: flex;
-        justify-content: center;
-        font-family: Andalemono;
-        font-size: 1.5rem;
-
-        &.◆, &.● {
-          font-size: 2rem;
+      .texte {
+        margin-left: 1rem;
+        .categorie {
+          text-transform: uppercase;
+          font-weight: bold;
+        }
+        h3 {
+          font-size: 1rem;
+          margin: 0;
         }
       }
-
-      .reponse {
-        font-size: 0.85rem;
+    }
+    .description {
+      font-size: 0.85rem;
+      margin-top: 1rem;
+      p {
+        margin: 0;
       }
     }
   }

content/apropos.md

@@ -1,5 +1,5 @@
 ---
-title: About
+title: À propos
 ---
 Auteures : Dominique de Saint Mars et Socheata Sim, en collaboration avec Bertrand Lionet.
 

content/cartes/_index.md

@@ -1,4 +1,37 @@
 ---
 title: Permis de cyberprudence
+titreResultat: Découvre tes résultats !
+symboles:
+  - ▲
+  - ◆
+  - ■
+  - ●
+resultats:
+  - symboles:
+      - ▲
+      - ◆
+    couleur: blanc
+    categorie: "Si tu as des triangles ou des losanges :"
+    titre: tu as raté ton permis de cyberprudence !
+    description: |
+      **Fais attention**, tu ne te rends pas vraiment compte de ce qui est **dangereux, normal ou anormal**, et tu fais confiance à des inconnus.
+
+      Tu peux penser que tu es en sécurité derrière ton écran mais tu peux être piégé(e) et en souffrir, même en dehors d’Internet.
+
+      **Sois plus méfiant(e)**, repasse ton permis avec tes parents ou une personne en qui tu as confiance pour ne plus te mettre en danger.
+  - symboles:
+      - ■
+    couleur: jaune
+    categorie: "Si tu as plus de carrés :"
+    titre: tu prends des risques, repasse ton  permis !
+    description: |
+      Tu hésites parfois et **tu essaies de faire attention**. Mais **sois plus prudent(e)**, ne crois pas tout ce qu’on te dit, **ose dire non et parler** de situations qui te posent problème. Évite de prendre des risques et discute avec tes parents ou des adultes de confiance pour mieux savoir comment te protéger sur Internet.
+  - symboles:
+      - ●
+    couleur: bleu
+    categorie: "Si tu as surtout des ronds :"
+    titre: bien joué, tu as réussi ton permis !
+    description: |
+      Tu as compris qu’Internet et les réseaux sociaux peuvent comporter des risques. Tu n’as pas peur de parler des choses qui te mettent mal à l’aise ou qui te choquent et tu sais refuser des propositions dangereuses. Montre ton permis de cyberprudence à ta famille ou tes ami(e)s pour discuter de ce que vous faites sur Internet, ou deviens coach et fais-le passer aux autres !
 ---