Ajoute la page numéro d'urgence

assets/sass/main.scss

@@ -104,4 +104,5 @@ nav {
 @import 'accueil.scss';
 @import 'cartes.scss';
 @import 'comment_reagir.scss';
+@import 'numeros_urgence.scss';
 @import 'apropos.scss';

assets/sass/numeros_urgence.scss

@@ -0,0 +1,101 @@
+.numeros-urgence {
+    max-width: $largeur;
+    margin: 0 auto;
+    text-align: justify;
+    font-size: 1.3rem;
+    position: relative;
+    margin-top: 1rem;
+
+    h1 {
+        font-family: VG5000;
+        text-transform: uppercase;
+        font-size: 2rem;
+        margin: 0;
+    }
+    p {
+        padding: 0 5rem;
+    }
+
+    .smartphone {
+        svg {
+            vertical-align: middle;
+            width: 3.5rem;
+            height: 3.5rem;
+            path {
+                fill: $bleu;
+            }
+        }
+    }
+
+    .numeros {
+        display: flex;
+        flex-direction: row;
+        gap: 0.3rem;
+        padding: 0;
+        width: 100%;
+        margin-bottom: 0.3rem;
+
+        li {
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 49%;
+            padding: 3rem;
+            text-align: center;
+
+            h2 {
+                font-size: 2.5rem;
+                color: white;
+                margin: 0;
+            }
+            .role {
+                margin-top: 1rem;
+                font-weight: bold;
+                color: white;
+            }
+            .description {
+                margin-top: 1rem;
+                font-style: italic;
+                font-size: 0.8rem;
+            }
+        }
+    }
+
+    .incitation, .loi {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+    }
+
+    .incitation {
+        text-align: center;
+        padding: 2rem 0;
+    }
+
+    .ampoule {
+        margin-top: 2rem;
+        svg {
+            width: 4rem;
+            height: 4rem;
+            transform: rotate(-15deg);
+            path {
+                fill: $bleu;
+            }
+        }
+    }
+
+    .sous-titre {
+        text-transform: uppercase;
+        color: white;
+        padding: 0.2rem 1rem;
+        font-weight: bold;
+        font-size: 1.5rem;
+    }
+
+    .loi {
+        margin-top: 3rem;
+        padding: 1rem 0;
+    }
+}

content/numeros_urgence.md

@@ -0,0 +1,31 @@
+---
+title: Numéros d'urgence
+layout: numeros_urgence
+bodyClass: bg-blanc
+class: numeros-urgence
+numéros:
+    -
+        numéro: Le 119
+        rôle: |
+            Pour les enfants en danger  
+            ou victimes de violences.
+        description: |
+            Chat et formulaire de signalement : demande d’aide  
+            accessibles en ligne sur le site internet  
+            https://www.allo119.gouv.fr/besoin-daide
+    -
+        numéro: Le 3018
+        rôle: |
+            En cas de harcèlement  
+            ou de cyberviolences.
+        description: Il existe aussi une application à télécharger pour stocker les preuves du harcèlement
+incitation: |
+    Contacte-les également si tu as été témoin de violences  
+    ou si tu connais un jeune qui est en danger !  
+    Ton appel pourrait lui sauver la vie !
+loi: |
+    Le cyberharcèlement est un délit. Les sanctions peuvent aller jusqu’à 3 ans de prison et 45 000 € d’amende si la victime a moins de 15 ans.
+
+    Un adulte n’a pas le droit de montrer des images pornographiques à un mineur, de s’exhiber nu, de demander des photos intimes ou de lui faire des propositions sexuelles. Dans la vraie vie, sur Internet et dans les jeux vidéo, c’est interdit par la loi ! Les sanctions peuvent aller jusqu’à 10 ans de prison et 150 000 € d’amende.
+---
+**Tu n'est pas seul(e). En cas de violence ou de danger**, tu peux aussi appeler **gratuitement** les numéros suivants pour expliquer ta situation. Des professionnel(les) pourront **te conseiller et t’aider** pour te défendre, signaler ou porter plainte.

layouts/page/numeros_urgence.html

@@ -0,0 +1,20 @@
+{{ define "main" }}
+<section class="{{ .Params.Class }}">
+    <h1>Numeros d'urgence !<span class="smartphone">{{ partial "smartphone.svg" }}</span></h1>
+    {{ .Content }}
+    <ul class="numeros">
+        {{ range .Params.Numéros }}
+            <li class="bg-jaune">
+                <h2>{{ .numéro }}</h2>
+                <div class="role">{{ .rôle | markdownify }}</div>
+                <div class="description">{{ .description | markdownify }}</div>
+            </li>
+        {{ end }}
+    </ul>
+    <div class="incitation bg-bleu"><p>{{ .Params.Incitation | markdownify }}</p></div>
+    <div class="ampoule">{{ partial "ampoule.svg" }}</div>
+    <h1>Tu as des droits !</h1>
+    <div class="sous-titre bg-jaune">Que dit la loi ?</div>
+    <div class="loi bg-bleu">{{ .Params.Loi | markdownify }}</div>
+</section>
+{{ end }}

layouts/partials/nav.html

@@ -4,6 +4,7 @@
    <li><a href="/cartes/">Passe le permis</a></li>
    <li><a href="/memo/">Mémo</a></li>
    <li><a href="/comment_reagir/">Comment réagir ?</a></li>
+   <li><a href="/numeros_urgence/">Numeros d'urgence !</a></li>
    <li><a href="/apropos/">À propos</a></li>
  </ul>
-</nav>
+</nav>