Maquettes Claude Design avec visio de classe

design/_backup-ludique/resources/views/legal.blade.php

@@ -0,0 +1,70 @@
+@extends('layouts.vitrine')
+
+@section('titre', 'Informations légales')
+
+@section('contenu')
+    <section class="border-b-4 border-black bg-white">
+        <div class="mx-auto max-w-7xl px-5 pb-14 pt-14 lg:px-10">
+            <p class="inline-block -rotate-2 border-2 border-black bg-[#C4B5FD] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Informations légales</p>
+            <h1 class="mt-8 max-w-4xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Le cadre, en clair.</h1>
+            <p class="mt-6 font-mono text-sm font-semibold">Dernière mise à jour : 29 septembre 2026</p>
+        </div>
+    </section>
+    <div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 lg:grid-cols-12 lg:px-10">
+        <nav class="lg:col-span-3" aria-label="Sommaire">
+            <ol class="sticky top-6 grid gap-2 font-extrabold">
+                <li><a href="#mentions" class="block border-4 border-black bg-white px-4 py-2 shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5">Mentions légales</a></li><li><a href="#cgu" class="block border-4 border-black bg-[#7CF2C0] px-4 py-2 shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5">Conditions d’utilisation</a></li><li><a href="#confidentialite" class="block border-4 border-black bg-[#FFD23F] px-4 py-2 shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5">Confidentialité et RGPD</a></li><li><a href="#cookies" class="block border-4 border-black bg-[#FF6FB5] px-4 py-2 shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5">Cookies</a></li><li><a href="#sous-traitance" class="block border-4 border-black bg-[#C4B5FD] px-4 py-2 shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5">Sous-traitance (art. 28)</a></li>
+            </ol>
+        </nav>
+        <div class="grid gap-12 lg:col-span-9">
+
+        <section id="mentions" class="scroll-mt-6 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000]" aria-labelledby="t-mentions">
+            <h2 id="t-mentions" class="text-4xl font-black tracking-tighter">Mentions légales</h2>
+            <div class="mt-6 grid gap-4 text-lg font-medium leading-relaxed [&_h3]:mt-4 [&_h3]:text-xl [&_h3]:font-black">
+                <p><strong>Éditeur :</strong> Paillasse, édité par Adam Belkacemi, <mark class="bg-[#FFD23F] px-1 font-bold">[à compléter]</mark> (forme juridique, capital, SIRET, adresse du siège).</p>
+                <p><strong>Directeur de la publication :</strong> Adam Belkacemi. <strong>Contact :</strong> adam@belkacemi.me.</p>
+                <p><strong>Hébergeur :</strong> Scaleway SAS, 8 rue de la Ville-l’Évêque, 75008 Paris. Les serveurs sont situés en France, à Strasbourg.</p></div>
+        </section>
+
+        <section id="cgu" class="scroll-mt-6 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000]" aria-labelledby="t-cgu">
+            <h2 id="t-cgu" class="text-4xl font-black tracking-tighter">Conditions générales d’utilisation</h2>
+            <div class="mt-6 grid gap-4 text-lg font-medium leading-relaxed [&_h3]:mt-4 [&_h3]:text-xl [&_h3]:font-black">
+                <h3>1. Objet</h3><p>Paillasse met à disposition des cours, des labs Linux et réseau sur machines virtuelles, des QCM et des outils de suivi pour l’enseignement.</p>
+                <h3>2. Comptes</h3><p>Les enseignants créent un compte avec leur e-mail professionnel. Les élèves se connectent avec l’identifiant et le code remis par leur enseignant. Chacun est responsable de la confidentialité de ses accès.</p>
+                <h3>3. Version démo</h3><p>Pendant la phase de démonstration, l’accès est gratuit et sans carte bancaire. Paillasse peut faire évoluer les fonctionnalités et les limites d’usage, en prévenant les utilisateurs.</p>
+                <h3>4. Usage acceptable</h3><p>Les VM servent uniquement à l’apprentissage. Sont interdits : le minage, les attaques vers des tiers, le contournement des quotas ou du mode examen. Le trafic sortant des VM est bloqué par défaut et l’activité est journalisée.</p>
+                <h3>5. Mode examen</h3><p>Pendant une épreuve, les changements d’onglet, sorties de fenêtre et sorties de souris sont enregistrés et transmis à l’enseignant. L’élève en est informé avant de commencer.</p>
+                <h3>6. Contenus</h3><p>Les conditions de réutilisation des contenus pédagogiques seront précisées ultérieurement. Les travaux des élèves leur appartiennent.</p>
+                <h3>7. Disponibilité et responsabilité</h3><p>Paillasse fait ses meilleurs efforts pour assurer la disponibilité du service, sans garantie d’absence d’interruption. <mark class="bg-[#FFD23F] px-1 font-bold">[à compléter]</mark></p>
+                <h3>8. Droit applicable</h3><p>Les présentes conditions sont soumises au droit français.</p></div>
+        </section>
+
+        <section id="confidentialite" class="scroll-mt-6 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000]" aria-labelledby="t-confidentialite">
+            <h2 id="t-confidentialite" class="text-4xl font-black tracking-tighter">Confidentialité et RGPD</h2>
+            <div class="mt-6 grid gap-4 text-lg font-medium leading-relaxed [&_h3]:mt-4 [&_h3]:text-xl [&_h3]:font-black">
+                <p>Quand un établissement utilise Paillasse avec ses élèves, <strong>l’établissement est responsable du traitement</strong> et Paillasse agit comme <strong>sous-traitant</strong>. Pour les comptes enseignants créés directement, Paillasse est responsable du traitement.</p>
+                <h3>Données collectées</h3>
+                <ul class="grid gap-2"><li class="flex gap-3"><span aria-hidden="true">■</span><span>Élèves : nom, prénom, groupe. Aucun e-mail pour les mineurs.</span></li><li class="flex gap-3"><span aria-hidden="true">■</span><span>Enseignants : nom, e-mail professionnel, établissement.</span></li><li class="flex gap-3"><span aria-hidden="true">■</span><span>Activité pédagogique : étapes de TP, réponses aux QCM, temps passé, remarques des enseignants.</span></li><li class="flex gap-3"><span aria-hidden="true">■</span><span>Mode examen : événements de sortie de copie, uniquement pendant l’épreuve.</span></li><li class="flex gap-3"><span aria-hidden="true">■</span><span>Journaux techniques de sécurité.</span></li></ul>
+                <h3>Finalités et base légale</h3><p>Fournir le service d’enseignement demandé par l’établissement (mission d’intérêt public de l’établissement) ou par l’enseignant (exécution du contrat).</p>
+                <h3>Conservation</h3><p>Les données d’une classe sont supprimées automatiquement 90 jours après son archivage de fin d’année.</p>
+                <h3>Hébergement</h3><p>Toutes les données sont hébergées en France, chez Scaleway. Elles ne quittent pas l’Union européenne. Aucune donnée n’est vendue ni utilisée à des fins publicitaires.</p>
+                <h3>Vos droits</h3><p>Accès, rectification, effacement, limitation, opposition et portabilité : écrivez à adam@belkacemi.me ou à votre établissement. Vous pouvez aussi adresser une réclamation à la CNIL (cnil.fr).</p>
+                <p><strong>Délégué à la protection des données :</strong> <mark class="bg-[#FFD23F] px-1 font-bold">[à compléter]</mark></p></div>
+        </section>
+
+        <section id="cookies" class="scroll-mt-6 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000]" aria-labelledby="t-cookies">
+            <h2 id="t-cookies" class="text-4xl font-black tracking-tighter">Cookies</h2>
+            <div class="mt-6 grid gap-4 text-lg font-medium leading-relaxed [&_h3]:mt-4 [&_h3]:text-xl [&_h3]:font-black">
+                <p>Paillasse n’utilise que des cookies strictement nécessaires : le cookie de session qui vous garde connecté, et le jeton de sécurité des formulaires. Aucun cookie publicitaire, aucun traceur tiers. Ils ne demandent donc pas de consentement.</p></div>
+        </section>
+
+        <section id="sous-traitance" class="scroll-mt-6 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000]" aria-labelledby="t-sous-traitance">
+            <h2 id="t-sous-traitance" class="text-4xl font-black tracking-tighter">Accord de sous-traitance (article 28 du RGPD)</h2>
+            <div class="mt-6 grid gap-4 text-lg font-medium leading-relaxed [&_h3]:mt-4 [&_h3]:text-xl [&_h3]:font-black">
+                <p>Pour chaque établissement, un accord de sous-traitance précise :</p>
+                <ul class="grid gap-2"><li class="flex gap-3"><span aria-hidden="true">■</span><span>l’objet, la durée et la nature des traitements ;</span></li><li class="flex gap-3"><span aria-hidden="true">■</span><span>les mesures de sécurité : chiffrement en transit, isolement des classes, sauvegardes chiffrées ;</span></li><li class="flex gap-3"><span aria-hidden="true">■</span><span>la confidentialité des personnes autorisées ;</span></li><li class="flex gap-3"><span aria-hidden="true">■</span><span>la liste des sous-traitants ultérieurs (hébergement : Scaleway SAS, France) ;</span></li><li class="flex gap-3"><span aria-hidden="true">■</span><span>l’assistance pour répondre aux demandes de droits ;</span></li><li class="flex gap-3"><span aria-hidden="true">■</span><span>la notification des violations de données ;</span></li><li class="flex gap-3"><span aria-hidden="true">■</span><span>la suppression ou la restitution des données en fin de contrat.</span></li></ul>
+                <p><a href="{{ route('etablissements') }}" class="font-extrabold underline underline-offset-4">Demander l’accord pour votre établissement</a></p></div>
+        </section>
+        </div>
+    </div>
+@endsection