Maquettes Claude Design avec visio de classe

This commit is contained in:
Adam Belkacemi 2026-10-06 23:28:18 +02:00
parent 238070ae54
commit 236d2d3567
243 changed files with 27992 additions and 0 deletions

BIN
design/.thumbnail Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,181 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>body{margin:0;background:#f5f6f8;font-family:Mulish,system-ui,sans-serif;color:#111827} a{color:inherit;text-decoration:none} a:hover{color:#1d4ed8} select,input,button{font-family:inherit}</style>
</helmet>
<div style="display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh">
<aside style="display:flex;flex-direction:column;padding:20px 0 24px">
<a href="Apercu%20accueil%20Blade.html" aria-label="Syllabus, accueil" style="display:block;padding:0 24px"><img src="images/logo-syllabus.png" alt="Syllabus" style="display:block;height:52px;width:auto"></a>
<nav style="margin-top:28px;display:flex;flex-direction:column;flex:1;background:#fff;border:1px solid #e5e7eb;border-left:0;border-radius:0 14px 14px 0;padding:24px 12px 20px">
<div style="display:grid;gap:2px;font-size:13px;font-weight:600;color:#4b5563">
<a href="#" style="display:flex;align-items:center;gap:10px;padding:8px 12px;color:#1d4ed8;font-weight:700"><svg width="16" height="16" viewBox="0 0 24 24" fill="#2563eb"><rect x="3" y="4" width="18" height="16" rx="3"></rect><rect x="6" y="8" width="12" height="2" fill="#fff"></rect></svg>Cours</a>
<a href="#" style="display:flex;align-items:center;gap:10px;padding:7px 12px 7px 26px;color:#1d4ed8;font-weight:700"><span style="width:5px;height:5px;border-radius:50%;background:#2563eb"></span>Bibliothèque</a>
<a href="apercu-devoirs.html" style="padding:7px 12px 7px 41px">Mes séquences</a>
<a href="apercu-espace-eleve.html" style="display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"></rect><path d="M3 10h18M8 3v4M16 3v4"></path></svg>Planning</a>
<a href="apercu-cohortes.html" style="display:flex;align-items:center;gap:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><circle cx="9" cy="8" r="3.5"></circle><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M16 11a3 3 0 1 0 0-6M21 20c0-2.6-1.7-4.8-4-5.6"></path></svg>Élèves</a>
<a href="apercu-suivi.html" style="display:flex;align-items:center;gap:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><path d="M12 3v9l6 5"></path></svg>Suivi</a>
<a href="apercu-labs.html" style="display:flex;align-items:center;gap:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"></rect><path d="m7 10 3 2-3 2M12 15h5"></path></svg>TP Linux</a>
<a href="apercu-banque.html" style="display:flex;align-items:center;gap:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1.5"></rect><rect x="14" y="3" width="7" height="7" rx="1.5"></rect><rect x="3" y="14" width="7" height="7" rx="1.5"></rect><rect x="14" y="14" width="7" height="7" rx="1.5"></rect></svg>Catalogue</a>
</div>
<div style="margin-top:auto;display:grid;gap:2px;font-size:13px;font-weight:600;color:#4b5563">
<a href="apercu-aide.html" style="display:flex;align-items:center;gap:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z"></path></svg>Aide</a>
<a href="apercu-pourquoi.html" style="display:flex;align-items:center;gap:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><path d="M12 11v6M12 7h.01"></path></svg>Infos</a>
</div>
</nav>
</aside>
<main style="min-width:0;padding:22px 36px 40px 28px">
<header style="display:flex;flex-wrap:wrap;align-items:center;gap:20px">
<h1 style="margin:22px 0 0;font-size:24px;font-weight:800;letter-spacing:-0.01em">Bibliothèque des cours</h1>
<a href="apercu-quiz-projection.html" style="margin-top:22px;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:6px;background:#1d5cf5;color:#fff;font-size:13px;font-weight:700;box-shadow:0 1px 2px rgba(29,92,245,.35)" style-hover="background:#174bd0;color:#fff"><span style="font-size:18px;line-height:1">+</span>Lancer une séance</a>
<div style="margin-left:auto;align-self:flex-start;display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 1px 2px rgba(17,24,39,.04)">
<span style="display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#111827;color:#fff;font-size:11px;font-weight:800">AB</span>
<span style="display:grid;line-height:1.2;padding-right:14px"><span style="font-size:10px;color:#6b7280">Enseignant</span><span style="font-size:12px;font-weight:800">Adam Belkacemi</span></span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1e3a8a" stroke-width="3"><path d="m6 9 6 6 6-6"></path></svg>
</div>
</header>
<section style="margin-top:24px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(17,24,39,.04)">
<div style="padding:18px 20px 16px;border-bottom:1px solid #eef0f3">
<h2 style="margin:0 0 12px;font-size:17px;font-weight:700">Filtrer</h2>
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:10px">
<label style="position:relative;display:block">
<select value="{{ cursus }}" onChange="{{ onCursus }}" style="appearance:none;width:180px;height:34px;padding:0 34px 0 12px;border:0;border-radius:6px;background:#f1f2f5;color:#6b7280;font-size:12px;font-weight:600">
<sc-for list="{{ cursusList }}" as="c" hint-placeholder-count="4"><option value="{{ c }}">{{ c }}</option></sc-for>
</select>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1e3a8a" stroke-width="3" style="position:absolute;right:12px;top:10px;pointer-events:none"><path d="m6 9 6 6 6-6"></path></svg>
</label>
<label style="position:relative;display:block">
<select value="{{ theme }}" onChange="{{ onTheme }}" style="appearance:none;width:180px;height:34px;padding:0 34px 0 12px;border:0;border-radius:6px;background:#f1f2f5;color:#6b7280;font-size:12px;font-weight:600">
<sc-for list="{{ themeList }}" as="t" hint-placeholder-count="4"><option value="{{ t }}">{{ t }}</option></sc-for>
</select>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1e3a8a" stroke-width="3" style="position:absolute;right:12px;top:10px;pointer-events:none"><path d="m6 9 6 6 6-6"></path></svg>
</label>
<label style="position:relative;display:block">
<input placeholder="Rechercher…" value="{{ q }}" onChange="{{ onQ }}" style="width:180px;height:34px;padding:0 34px 0 12px;border:0;border-radius:6px;background:#f1f2f5;color:#111827;font-size:12px;font-weight:600;outline-color:#1d5cf5">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2.5" style="position:absolute;right:12px;top:10px;pointer-events:none"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg>
</label>
<span style="margin-left:auto;font-size:12px;font-weight:600;color:#6b7280">{{ countLabel }}</span>
<div style="display:flex;gap:6px">
<button type="button" aria-label="Vue grille" aria-pressed="{{ isGrid }}" onClick="{{ setGrid }}" style="{{ gridBtn }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="5" width="16" height="10" rx="1.5"></rect><rect x="4" y="17" width="16" height="2" rx="1"></rect></svg></button>
<button type="button" aria-label="Vue liste" aria-pressed="{{ isList }}" onClick="{{ setList }}" style="{{ listBtn }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01"></path></svg></button>
</div>
</div>
</div>
<div style="padding:16px 12px 20px">
<div style="{{ gridStyle }}">
<sc-for list="{{ items }}" as="c" hint-placeholder-count="6">
<a href="{{ c.href }}" style="{{ cardStyle }}" style-hover="box-shadow:0 6px 18px rgba(17,24,39,.08);color:#111827">
<div style="{{ c.bandStyle }}"></div>
<div style="display:flex;flex-direction:column;flex:1;padding:12px 14px 14px">
<h3 style="margin:0;font-size:14px;font-weight:700;line-height:1.3">{{ c.titre }}</h3>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px">
<div>
<p style="margin:0;font-size:10px;color:#9ca3af">Parties de cours</p>
<p style="margin:3px 0 0;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700"><span style="display:grid;place-items:center;width:18px;height:18px;border-radius:4px;background:#eef2ff"><svg width="10" height="10" viewBox="0 0 24 24" fill="#1e3a8a"><path d="M4 4h16v16H4z"></path></svg></span>{{ c.parties }} parties</p>
</div>
<div>
<p style="margin:0;font-size:10px;color:#9ca3af">Exercices</p>
<p style="margin:3px 0 0;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700"><span style="display:grid;place-items:center;width:18px;height:18px;border-radius:4px;background:#eef2ff"><svg width="10" height="10" viewBox="0 0 24 24" fill="#1e3a8a"><path d="M12 3 2 8l10 5 10-5z"></path><path d="M6 11v5c3 2 9 2 12 0v-5l-6 3z"></path></svg></span>{{ c.exos }}</p>
</div>
</div>
<p style="margin:12px 0 0;padding-top:10px;border-top:1px solid #eef0f3;font-size:11px;line-height:1.55;color:#6b7280">{{ c.desc }}</p>
<div style="margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:6px">
<sc-for list="{{ c.tags }}" as="t" hint-placeholder-count="3"><span style="{{ t.style }}">{{ t.label }}</span></sc-for>
</div>
</div>
</a>
</sc-for>
</div>
<sc-if value="{{ empty }}" hint-placeholder-val="{{ false }}">
<p style="margin:0;padding:40px 8px;font-size:14px;font-weight:600;color:#4b5563">Aucun cours ne correspond. Essayez un autre cursus ou un autre mot.</p>
</sc-if>
</div>
</section>
</main>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;vue&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;grille&quot;,&quot;liste&quot;],&quot;default&quot;:&quot;grille&quot;,&quot;tsType&quot;:&quot;'grille' | 'liste'&quot;}}">
const COURS = [
['Diagnostic réseau en ligne de commande', 'Réseaux', 8, '7 TD', 'Méthode par couches, ping, traceroute, ss, ARP et tcpdump pour résoudre un incident en cinq minutes.', ['BTS SIO', 'BUT R&T', 'TSSR']],
['Adressage IPv4 : masques et sous-réseaux', 'Réseaux', 8, '7 TD', 'Calcul réseau et diffusion, nombre magique, découpage égal et VLSM, agrégation de routes.', ['BTS SIO', 'BTS CIEL', 'BUT R&T']],
['VLAN 802.1Q et routage inter-VLAN', 'Réseaux', 8, '5 TD', 'Segmenter un établissement sans recâbler, configurer un switch et filtrer entre VLAN.', ['BTS SIO', 'SISR']],
['DHCP : serveur, relais et baux', 'Réseaux', 8, '7 TD', 'DORA, étendues et réservations, relais inter-VLAN, DHCP snooping contre les faux serveurs.', ['BTS SIO', 'SISR']],
['DNS : zones, enregistrements et Bind9', 'Réseaux', 9, '7 TD', 'Résolveur et serveur faisant autorité, fichiers de zone, TTL, DNSSEC et diagnostic avec dig.', ['BTS SIO', 'BUT R&T', 'AIS']],
['NAT et PAT avec nftables', 'Réseaux', 7, '7 TD', 'Masquerade, redirection de ports, suivi de connexions et hairpin NAT sur une passerelle Linux.', ['BTS SIO', 'BUT R&T']],
['Routage statique et route par défaut', 'Réseaux', 8, '6 TD', 'Table de routage, correspondance la plus longue, persistance et chemin retour.', ['BTS SIO', 'BTS CIEL']],
['Modèles OSI et TCP/IP', 'Réseaux', 8, '4 TD', 'Les couches comme méthode de diagnostic, TCP et UDP, ARP et équipements.', ['SNT', 'BTS SIO', 'BUT R&T']],
['Le terminal Linux', 'Systèmes', 8, '4 TD', 'Arborescence, chemins, fichiers, recherche et productivité au clavier.', ['NSI', 'BTS SIO', 'TSSR']],
['Droits, utilisateurs et groupes', 'Systèmes', 8, '5 TD', 'Lecture et calcul des droits, SUID et SGID, sudo et audit d’un serveur.', ['BTS SIO', 'BTS CIEL']],
['Redirections, tubes et filtres', 'Systèmes', 7, '4 TD', 'Les trois flux, grep, awk, sed et la chaîne qui repère une attaque SSH.', ['BTS SIO', 'BUT R&T']],
['Conteneurs Docker', 'DevOps', 7, '4 TD', 'Namespaces et cgroups, Dockerfile de production, volumes, réseaux et sécurité.', ['BTS SIO', 'BUT DevCloud', 'AIS']],
['Docker Compose', 'DevOps', 6, '3 TD', 'Application multi-conteneurs, healthchecks, secrets et mise à jour sans perte.', ['BTS SIO', 'AIS']],
['Ansible', 'DevOps', 6, '3 TD', 'Automatiser la configuration de dizaines de serveurs, idempotence et déploiement par lots.', ['BTS SIO', 'BUT DevCloud']],
['SQL : interroger une base relationnelle', 'Données', 10, '5 TD', 'SELECT, jointures, agrégats, modélisation, index, transactions et injection SQL.', ['NSI', 'BTS SIO', 'BUT Info']],
['Python : variables, boucles et fonctions', 'Programmation', 10, '5 TD', 'Types, conditions, boucles, fonctions testées, fichiers CSV et gestion des erreurs.', ['SNT', 'NSI', 'BTS SIO']],
['Binaire et hexadécimal', 'Programmation', 8, '6 TD', 'Bases 2 et 16, complément à deux, opérations bit à bit appliquées aux masques.', ['NSI', 'BTS CIEL']],
['Le Web : HTTP, HTML, CSS et Apache', 'Web', 9, '4 TD', 'Requêtes et codes HTTP, structure HTML, mise en page CSS et serveur Apache.', ['SNT', 'NSI', 'BTS SIO']],
['Cryptographie appliquée', 'Cybersécurité', 9, '4 TD', 'Hachage, stockage des mots de passe, chiffrement, certificats et SSH par clé.', ['BTS SIO', 'BUT Cyber', 'Master']]
];
const BANDS = [
'radial-gradient(circle at 38% 20%, #ffffff 0 4%, #e9d5ff 12%, transparent 24%), radial-gradient(circle at 44% 70%, #f5d0fe 0 10%, transparent 26%), linear-gradient(110deg, #c7d2fe 0%, #ddd6fe 40%, #bae6fd 100%)',
'radial-gradient(ellipse at 30% 110%, transparent 40%, #fde68a55 41% 43%, transparent 44%), radial-gradient(ellipse at 70% -20%, transparent 45%, #fbbf2433 46% 48%, transparent 49%), linear-gradient(110deg, #fef3c7, #ffedd5 60%, #fde2e4)',
'radial-gradient(circle at 78% 55%, #ffffff 0 6%, #e5e7eb 16%, transparent 30%), linear-gradient(110deg, #99f6e4 0%, #c7d2fe 55%, #fbcfe8 100%)',
'radial-gradient(ellipse at 45% 120%, #ff2ebf 0 12%, #a21caf 26%, transparent 46%), linear-gradient(110deg, #1e1b4b 0%, #3b0764 50%, #312e81 100%)',
'repeating-linear-gradient(115deg, #7dd3fc 0 6px, #a5b4fc 6px 12px, transparent 12px 22px), linear-gradient(110deg, #4338ca, #6d28d9 60%, #1e40af)',
'repeating-linear-gradient(100deg, #ffffff66 0 3px, transparent 3px 14px), linear-gradient(110deg, #bfdbfe, #dbeafe 50%, #c7d2fe)'
];
const TAGS = {
'BTS SIO': ['#ede4ff', '#6d28d9'], 'BTS CIEL': ['#dcfce7', '#15803d'], 'BUT R&T': ['#fce7f3', '#be185d'], 'BUT Info': ['#fce7f3', '#be185d'],
'BUT DevCloud': ['#dbeafe', '#1d4ed8'], 'BUT Cyber': ['#fce7f3', '#be185d'], 'SISR': ['#dcfce7', '#15803d'], 'TSSR': ['#ffedd5', '#c2410c'],
'AIS': ['#ffedd5', '#c2410c'], 'SNT': ['#dcfce7', '#15803d'], 'NSI': ['#dbeafe', '#1d4ed8'], 'Master': ['#ffedd5', '#c2410c']
};
const btnBase = { display: 'grid', placeItems: 'center', width: 32, height: 32, border: 0, borderRadius: 6, cursor: 'pointer' };
class Component extends DCLogic {
state = { cursus: 'Tous les cursus', theme: 'Tous les thèmes', q: '', vue: null };
renderVals() {
const vue = this.state.vue || this.props.vue || 'grille';
const liste = vue === 'liste';
const { cursus, theme, q } = this.state;
const ql = q.trim().toLowerCase();
const items = COURS.map((c, i) => [c, i]).filter(([c]) =>
(cursus === 'Tous les cursus' || c[5].some(t => t.indexOf(cursus) === 0)) &&
(theme === 'Tous les thèmes' || c[1] === theme) &&
(!ql || (c[0] + ' ' + c[4]).toLowerCase().includes(ql))
).map(([c, i]) => ({
titre: c[0], parties: c[2], exos: c[3], desc: c[4],
href: 'apercu-cours-fiche.html?chapitre=' + encodeURIComponent(c[0]),
tags: c[5].map(t => { const col = TAGS[t] || ['#f1f2f5', '#374151']; return { label: t, style: { padding: '3px 8px', borderRadius: 4, background: col[0], color: col[1], fontSize: 10, fontWeight: 700 } }; }),
bandStyle: liste
? { width: 150, flexShrink: 0, background: BANDS[i % BANDS.length], borderRadius: '9px 0 0 9px' }
: { height: 66, background: BANDS[i % BANDS.length], borderRadius: '9px 9px 0 0' }
}));
const set = k => e => this.setState({ [k]: e.target.value });
const on = { ...btnBase, background: '#dbe6ff', color: '#1d4ed8' }, off = { ...btnBase, background: 'transparent', color: '#1d4ed8' };
return {
cursusList: ['Tous les cursus', 'SNT', 'NSI', 'BTS SIO', 'BTS CIEL', 'BUT R&T', 'BUT Info', 'BUT DevCloud', 'TSSR', 'AIS', 'Master'],
themeList: ['Tous les thèmes', 'Réseaux', 'Systèmes', 'DevOps', 'Données', 'Programmation', 'Web', 'Cybersécurité'],
cursus, theme, q, items, empty: items.length === 0,
countLabel: items.length + ' cours',
onCursus: set('cursus'), onTheme: set('theme'), onQ: e => this.setState({ q: e.target.value }),
isGrid: !liste, isList: liste, gridBtn: liste ? off : on, listBtn: liste ? on : off,
setGrid: () => this.setState({ vue: 'grille' }), setList: () => this.setState({ vue: 'liste' }),
gridStyle: liste ? { display: 'grid', gap: 12 } : { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 12 },
cardStyle: { display: 'flex', flexDirection: liste ? 'row' : 'column', border: '1px solid #e5e7eb', borderRadius: 10, background: '#fff', transition: 'box-shadow .15s' }
};
}
}
</script>
</body>
</html>

View file

@ -0,0 +1,147 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="stylesheet" href="_ds/modernist-39fc7197-4120-4057-af21-114438cd2248/styles.css">
<script src="_ds/modernist-39fc7197-4120-4057-af21-114438cd2248/_ds_bundle.js"></script>
<script src="./image-slot.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
body{margin:0;background:#ffffff;}
a{color:#201e1d;text-decoration:none;}
a:hover{color:#ec3013;}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-8px) rotate(var(--r,0deg))}}
@media (prefers-reduced-motion: reduce){*{animation:none !important}}
</style>
</helmet>
<div style="background:#ffffff;color:#201e1d;font-family:Archivo, system-ui, sans-serif;min-height:100vh;overflow:hidden;">
<header style="display:flex;align-items:center;gap:32px;padding:20px clamp(20px,5vw,72px);border-bottom:2px solid #201e1d;flex-wrap:wrap;">
<a href="#" style="display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;letter-spacing:-0.03em;">
<span style="display:grid;grid-template-columns:10px 10px;grid-template-rows:10px 10px;gap:2px;">
<span style="background:#ec3013;"></span><span style="background:#ffd23f;"></span><span style="background:#2fb36b;"></span><span style="background:#3d6bf5;"></span>
</span>
Syllabus
</a>
<nav style="display:flex;gap:28px;font-size:15px;font-weight:500;flex:1;flex-wrap:wrap;">
<a href="#">Labs</a><a href="#">Cours gratuits</a><a href="#">Établissements</a><a href="#">Tarifs</a>
</nav>
<div style="display:flex;gap:12px;align-items:center;">
<a href="#" style="font-size:15px;font-weight:600;">Se connecter</a>
<a href="#" class="btn btn-primary" style="color:#ffffff;">Créer une classe</a>
</div>
</header>
<section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:48px;padding:clamp(40px,6vw,88px) clamp(20px,5vw,72px) 64px;position:relative;">
<div style="display:flex;flex-direction:column;align-items:flex-start;gap:28px;position:relative;z-index:1;">
<span style="background:#ffd23f;border:2px solid #201e1d;box-shadow:4px 4px 0 #201e1d;padding:6px 14px;font-weight:700;font-size:14px;transform:rotate(-2deg);">Du lycée au BTS, sans rien installer</span>
<h1 style="font-size:clamp(48px,6.4vw,96px);line-height:0.95;letter-spacing:-0.045em;font-weight:900;margin:0;text-wrap:balance;">Une vraie machine Linux pour <span style="background:#ec3013;color:#ffffff;padding:0 0.12em;">chaque</span> élève.</h1>
<p style="font-size:19px;line-height:1.5;margin:0;max-width:30em;color:#444141;text-wrap:pretty;">Debian s'ouvre dans le navigateur en moins de 5 secondes. Les labs se corrigent tout seuls, et le prof voit qui avance, qui bloque, qui lève la main.</p>
<div style="display:flex;gap:20px;flex-wrap:wrap;font-weight:600;font-size:15px;border-top:2px solid #201e1d;padding-top:20px;">
<span style="display:flex;align-items:center;gap:8px;"><span style="width:14px;height:14px;background:#2fb36b;border:2px solid #201e1d;"></span>Terminal en &lt; 5 s</span>
<span style="display:flex;align-items:center;gap:8px;"><span style="width:14px;height:14px;background:#3d6bf5;border:2px solid #201e1d;"></span>Correction automatique</span>
<span style="display:flex;align-items:center;gap:8px;"><span style="width:14px;height:14px;background:#ff7ac6;border:2px solid #201e1d;"></span>Hébergé en Europe</span>
</div>
<div style="display:flex;gap:12px;flex-wrap:wrap;">
<a href="#" style="display:flex;align-items:center;gap:14px;background:#201e1d;color:#ffffff;padding:16px 22px;font-weight:800;font-size:16px;border:2px solid #201e1d;box-shadow:5px 5px 0 #ec3013;" style-hover="background:#ec3013;color:#ffffff;box-shadow:5px 5px 0 #201e1d;">Lancer un lab d'essai <span style="font-family:'IBM Plex Mono',monospace;">→</span></a>
<a href="#" style="display:flex;align-items:center;background:#ffffff;padding:16px 22px;font-weight:700;font-size:16px;border:2px solid #201e1d;" style-hover="background:#fff2ef;">Voir les labs</a>
</div>
</div>
<div style="position:relative;min-height:600px;">
<div style="position:absolute;left:4%;top:28px;width:66%;height:420px;background:#3d6bf5;border:2px solid #201e1d;transform:translate(14px,14px);"></div>
<div style="position:absolute;left:4%;top:28px;width:66%;height:420px;border:2px solid #201e1d;background:#ffffff;">
<image-slot id="hero-jeunes" shape="rect" fit="contain" placeholder="Illustration : des jeunes devant leur ordinateur (style flat, couleurs vives)"></image-slot>
</div>
<div style="position:absolute;right:0;top:0;width:44%;min-width:210px;background:#2fb36b;border:2px solid #201e1d;box-shadow:6px 6px 0 #201e1d;padding:16px 18px;display:flex;flex-direction:column;gap:6px;">
<span style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#0b3a22;">Vérification</span>
<span style="font-size:18px;font-weight:800;color:#0b1f14;">Étape 3 / 5 validée</span>
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:6px;">
<span style="height:8px;background:#201e1d;"></span><span style="height:8px;background:#201e1d;"></span><span style="height:8px;background:#201e1d;"></span><span style="height:8px;background:#ffffff;border:2px solid #201e1d;"></span><span style="height:8px;background:#ffffff;border:2px solid #201e1d;"></span>
</div>
</div>
<sc-if value="{{ showTerminal }}" hint-placeholder-val="{{ true }}">
<div style="position:absolute;right:2%;bottom:0;width:62%;min-width:280px;background:#13233a;border:2px solid #201e1d;box-shadow:8px 8px 0 #ffd23f;font-family:'IBM Plex Mono',monospace;font-size:14px;color:#e8edf5;">
<div style="display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:2px solid #201e1d;background:#0d192b;">
<span style="width:10px;height:10px;background:#ec3013;"></span><span style="width:10px;height:10px;background:#ffd23f;"></span><span style="width:10px;height:10px;background:#2fb36b;"></span>
<span style="margin-left:8px;font-size:12px;color:#9fb0c8;">lea@debian-lab — Premiers pas dans le shell</span>
</div>
<div style="padding:14px 16px;display:flex;flex-direction:column;gap:4px;line-height:1.5;">
<span><span style="color:#2fb36b;">lea@debian</span><span style="color:#9fb0c8;">:~$</span> mkdir projets &amp;&amp; cd projets</span>
<span><span style="color:#2fb36b;">lea@debian</span><span style="color:#9fb0c8;">:~/projets$</span> ls -la</span>
<span style="color:#9fb0c8;">drwxr-xr-x 2 lea lea 4096 .</span>
<span><span style="color:#ffd23f;">✓</span> <span style="color:#ffd23f;">Dossier « projets » créé</span></span>
<span><span style="color:#2fb36b;">lea@debian</span><span style="color:#9fb0c8;">:~/projets$</span> {{ cursor }}</span>
</div>
</div>
</sc-if>
<div style="position:absolute;left:0;bottom:70px;background:#ffd23f;border:2px solid #201e1d;box-shadow:5px 5px 0 #201e1d;padding:12px 16px;display:flex;align-items:center;gap:12px;transform:rotate(-3deg);">
<span style="width:34px;height:34px;background:#ff7ac6;border:2px solid #201e1d;display:grid;place-items:center;font-weight:900;">N</span>
<span style="display:flex;flex-direction:column;">
<span style="font-weight:800;font-size:15px;">Nora lève la main</span>
<span style="font-size:13px;color:#444141;">bloquée depuis 8 min · étape 2</span>
</span>
</div>
<sc-if value="{{ showConfetti }}" hint-placeholder-val="{{ true }}">
{{ confetti }}
</sc-if>
</div>
</section>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:2px solid #201e1d;border-bottom:2px solid #201e1d;">
<div style="padding:20px clamp(20px,3vw,32px);border-right:2px solid #201e1d;background:#ffd23f;font-weight:800;font-size:17px;">Lycée NSI</div>
<div style="padding:20px clamp(20px,3vw,32px);border-right:2px solid #201e1d;background:#ffffff;font-weight:800;font-size:17px;">BTS SIO SISR</div>
<div style="padding:20px clamp(20px,3vw,32px);border-right:2px solid #201e1d;background:#2fb36b;font-weight:800;font-size:17px;">BTS CIEL</div>
<div style="padding:20px clamp(20px,3vw,32px);border-right:2px solid #201e1d;background:#ffffff;font-weight:800;font-size:17px;">BUT R&amp;T</div>
<div style="padding:20px clamp(20px,3vw,32px);background:#ff7ac6;font-weight:800;font-size:17px;">Titre pro TSSR</div>
</div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;showConfetti&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Hero&quot;},&quot;showTerminal&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Hero&quot;}}">
class Component extends DCLogic {
renderVals() {
const h = React.createElement;
const cursor = h('span', { style: { display: 'inline-block', width: '9px', height: '17px', background: '#ffd23f', verticalAlign: 'text-bottom', animation: 'blink 1s steps(1) infinite' } });
const shapes = [
{ l: '-4%', t: '2%', c: '#ec3013', k: 'star', s: 44, r: '12deg', d: '0s' },
{ l: '76%', t: '34%', c: '#ff7ac6', k: 'circle', s: 30, r: '0deg', d: '.6s' },
{ l: '40%', t: '-3%', c: '#ffd23f', k: 'tri', s: 34, r: '-18deg', d: '1.2s' },
{ l: '-2%', t: '60%', c: '#3d6bf5', k: 'square', s: 22, r: '20deg', d: '.3s' },
{ l: '90%', t: '62%', c: '#2fb36b', k: 'tri', s: 26, r: '30deg', d: '.9s' },
{ l: '30%', t: '90%', c: '#ec3013', k: 'circle', s: 18, r: '0deg', d: '1.5s' },
];
const path = (k, c) => {
const p = { fill: c, stroke: '#201e1d', strokeWidth: 3, strokeLinejoin: 'round' };
if (k === 'star') return h('polygon', { ...p, points: '20,2 25,15 38,15 28,24 32,37 20,29 8,37 12,24 2,15 15,15' });
if (k === 'circle') return h('circle', { ...p, cx: 20, cy: 20, r: 16 });
if (k === 'tri') return h('polygon', { ...p, points: '20,3 37,35 3,35' });
return h('rect', { ...p, x: 4, y: 4, width: 32, height: 32 });
};
const confetti = shapes.map((s, i) => h('svg', {
key: i, viewBox: '0 0 40 40', width: s.s, height: s.s, 'aria-hidden': true,
style: { position: 'absolute', left: s.l, top: s.t, zIndex: 2, '--r': s.r, transform: `rotate(${s.r})`, animation: `floaty 5s ease-in-out ${s.d} infinite`, pointerEvents: 'none' }
}, path(s.k, s.c)));
return {
cursor,
confetti,
showConfetti: this.props.showConfetti ?? true,
showTerminal: this.props.showTerminal ?? true,
};
}
}
</script>
</body>
</html>

View file

@ -0,0 +1,361 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paillasse — Une vraie machine Linux pour chaque élève</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="js/paillasse-terminal.js"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="Apercu%20accueil%20Blade.html" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="apercu-fonctionnalites.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cockpit.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="apercu-vie-scolaire.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="apercu-academie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cours.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="apercu-labs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="apercu-lab-web.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="apercu-ide.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="apercu-maison.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-bibliotheque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="apercu-banque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="apercu-generateur.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="apercu-td-imprimable.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="apercu-quiz-projection.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-sujet.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="apercu-devoirs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="apercu-correction.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="apercu-fiche-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="apercu-messagerie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="apercu-export.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="apercu-aide.html" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="apercu-etablissements.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="apercu-tarifs.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="apercu-pourquoi.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="apercu-connexion.html" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="apercu-inscription.html" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="relative overflow-hidden">
<div aria-hidden="true" class="pointer-events-none absolute inset-0">
<span class="etoile flotte absolute left-[46%] top-10 h-12 w-12 bg-[#FFD23F] [--r:14deg]"></span>
<span class="flotte absolute right-[6%] top-[46%] h-7 w-7 rotate-12 border-4 border-black bg-[#FF6FB5] [--r:12deg] [animation-delay:1s]"></span>
<span class="flotte absolute bottom-16 left-[38%] h-9 w-9 rounded-full border-4 border-black bg-[#7CF2C0] [animation-delay:2s]"></span>
<span class="zigzag absolute bottom-10 left-5 h-4 w-40 lg:left-10"></span>
<span class="absolute right-[40%] top-[62%] hidden h-5 w-5 border-4 border-black lg:block"></span>
</div>
<div class="relative mx-auto grid max-w-7xl gap-14 px-5 pb-24 pt-14 lg:grid-cols-12 lg:px-10 lg:pt-20">
<div class="lg:col-span-7">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Du lycée au master · rien à installer</p>
<h1 class="mt-8 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-[7.5rem]">
Une vraie<br>
machine Linux<br>
pour <span class="relative inline-block -rotate-1 border-4 border-black bg-[#C4B5FD] px-3 shadow-[6px_6px_0px_#000000]">chaque</span><br>
élève.
</h1>
<p class="mt-10 max-w-xl text-xl font-medium leading-relaxed text-black">
Debian ou l’IDE s’ouvre dans le navigateur en moins de 5&nbsp;secondes. Les labs se corrigent tout seuls, et vous voyez qui avance, qui bloque, qui lève la main.
</p>
<div class="mt-10 flex flex-wrap items-center gap-4">
<a href="apercu-lab-essai.html" class="group flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">
Lancer un lab d'essai
<span class="font-mono transition-transform group-hover:translate-x-1" aria-hidden="true">→</span>
</a>
<a href="apercu-labs.html" class="border-4 border-black bg-white px-6 py-4 text-lg font-extrabold hover:bg-[#7CF2C0]">Voir les labs</a>
</div>
</div>
<div class="relative min-h-[560px] lg:col-span-5">
<div class="absolute left-0 top-4 h-[360px] w-[88%] translate-x-4 translate-y-4 border-4 border-black bg-[#FF6FB5]" aria-hidden="true"></div>
<figure class="absolute left-0 top-4 h-[360px] w-[88%] overflow-hidden border-4 border-black bg-white">
<div class="flex h-full flex-col" aria-label="Classe en direct : 12 élèves, leur étape et leurs alertes">
<div class="flex items-center justify-between gap-3 border-b-4 border-black bg-[#FFD23F] px-4 py-2"><span class="font-black">2nde NSI · en direct</span><span class="font-mono text-xs font-semibold">24 élèves connectés</span></div>
<ul class="grid flex-1 grid-cols-3 gap-2 p-3 sm:grid-cols-4">
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#7CF2C0] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-[#FFD23F] text-sm font-black">L</span><span class="text-sm font-extrabold leading-none">Léa</span><span class="font-mono text-[11px] font-semibold leading-none">5/5 ✓</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#C4B5FD] text-sm font-black">Y</span><span class="text-sm font-extrabold leading-none">Yanis</span><span class="font-mono text-[11px] font-semibold leading-none">étape 3</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#FF6FB5] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rotate-12 bg-white text-sm font-black">N</span><span class="text-sm font-extrabold leading-none">Nora</span><span class="font-mono text-[11px] font-semibold leading-none">main levée</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-[#7CF2C0] text-sm font-black">T</span><span class="text-sm font-extrabold leading-none">Tom</span><span class="font-mono text-[11px] font-semibold leading-none">étape 4</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#C4B5FD] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#FFD23F] text-sm font-black">I</span><span class="text-sm font-extrabold leading-none">Inès</span><span class="font-mono text-[11px] font-semibold leading-none">étape 2</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#ec3013] text-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-white text-black text-sm font-black">S</span><span class="text-sm font-extrabold leading-none">Sami</span><span class="font-mono text-[11px] font-semibold leading-none">bloqué 9 min</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#7CF2C0] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black -rotate-6 bg-[#FF6FB5] text-sm font-black">C</span><span class="text-sm font-extrabold leading-none">Chloé</span><span class="font-mono text-[11px] font-semibold leading-none">5/5 ✓</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#7CF2C0] text-sm font-black">A</span><span class="text-sm font-extrabold leading-none">Adam</span><span class="font-mono text-[11px] font-semibold leading-none">étape 3</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#FFD23F] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-white text-sm font-black">M</span><span class="text-sm font-extrabold leading-none">Maël</span><span class="font-mono text-[11px] font-semibold leading-none">étape 4</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rotate-6 bg-[#FF6FB5] text-sm font-black">J</span><span class="text-sm font-extrabold leading-none">Jade</span><span class="font-mono text-[11px] font-semibold leading-none">étape 1</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#FFD23F] text-sm font-black">H</span><span class="text-sm font-extrabold leading-none">Hugo</span><span class="font-mono text-[11px] font-semibold leading-none">étape 3</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#7CF2C0] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-[#C4B5FD] text-sm font-black">L</span><span class="text-sm font-extrabold leading-none">Lina</span><span class="font-mono text-[11px] font-semibold leading-none">5/5 ✓</span></li>
</ul>
</div>
</figure>
<span class="absolute -right-2 top-0 rotate-6 border-2 border-black bg-[#7CF2C0] px-3 py-1 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">&lt; 5 s</span>
<div class="absolute bottom-0 right-0 w-[92%] -rotate-2 border-4 border-black bg-[#13233A] font-mono text-sm text-white shadow-[8px_8px_0px_#FFD23F]" aria-label="Terminal élève, démonstration xterm.js">
<div class="flex items-center gap-2 border-b-4 border-black bg-[#0d192b] px-4 py-2">
<span class="h-3 w-3 bg-[#ec3013]"></span><span class="h-3 w-3 bg-[#FFD23F]"></span><span class="h-3 w-3 bg-[#7CF2C0]"></span>
<span class="ml-2 text-xs text-white">lea@debian · xterm.js</span>
</div>
<div id="xterm-hero" class="h-[170px] bg-[#13233A] p-2"></div>
</div>
<div class="absolute left-0 bottom-48 rotate-3 border-4 border-black bg-[#FFD23F] px-4 py-3 shadow-[5px_5px_0px_#000000] lg:-left-8">
<p class="font-extrabold">Nora lève la main</p>
<p class="text-sm font-medium">bloquée depuis 8 min</p>
</div>
</div>
</div>
</section>
<div class="grid grid-cols-2 border-y-4 border-black text-lg font-extrabold sm:grid-cols-3 lg:grid-cols-5">
<p class="border-b-4 border-r-4 border-black bg-[#FFD23F] px-6 py-5 lg:border-b-0">Lycée NSI</p>
<p class="border-b-4 border-black bg-white px-6 py-5 sm:border-r-4 lg:border-b-0">BTS SIO · SISR et SLAM</p>
<p class="border-b-4 border-r-4 border-black bg-[#7CF2C0] px-6 py-5 sm:border-r-0 lg:border-b-0 lg:border-r-4">BTS CIEL</p>
<p class="border-b-4 border-black bg-white px-6 py-5 sm:border-b-0 sm:border-r-4">BUT · Licence pro</p>
<p class="col-span-2 border-black bg-[#C4B5FD] px-6 py-5 sm:col-span-1">Master · École d’ingé</p>
</div>
<section class="relative overflow-hidden bg-white" aria-labelledby="titre-presentation">
<span aria-hidden="true" class="etoile flotte pointer-events-none absolute right-[8%] top-16 h-16 w-16 bg-[#FF6FB5] [--r:-10deg]"></span>
<span aria-hidden="true" class="zigzag pointer-events-none absolute bottom-6 left-10 h-4 w-48"></span>
<div class="relative mx-auto max-w-7xl px-5 pb-32 pt-24 lg:px-10">
<div class="grid gap-8 lg:grid-cols-12">
<h2 id="titre-presentation" class="text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl lg:col-span-8 xl:text-7xl">
Trois choses que votre salle info ne fait pas.
</h2>
<p class="self-end text-lg font-medium lg:col-span-4">
Chaque élève a sa propre VM Debian, sur un cloud hébergé en France. Rien ne s'installe sur les postes du lycée.
</p>
</div>
<ul class="mt-20 grid gap-12 lg:grid-cols-3 lg:gap-8">
<li class="relative min-h-[340px] xl:aspect-square border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] transition-transform hover:-translate-y-1 lg:-rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Élève</span>
<div class="flex h-full flex-col justify-between gap-8 pb-4">
<span class="font-mono text-5xl font-semibold xl:text-6xl">01</span>
<div>
<h3 class="text-2xl font-black leading-tight tracking-tight xl:text-3xl">Un terminal en moins de 5&nbsp;secondes</h3>
<p class="mt-3 text-base font-medium">Des VM déjà démarrées attendent en réserve. L'élève clique, la console s'ouvre, même sur un vieux PC ou un Chromebook.</p>
</div>
</div>
</li>
<li class="relative min-h-[340px] xl:aspect-square border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] transition-transform hover:-translate-y-1 lg:translate-y-12">
<span class="absolute -left-4 -top-4 -rotate-3 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Correction</span>
<div class="flex h-full flex-col justify-between gap-8 pb-4">
<span class="self-end font-mono text-5xl font-semibold xl:text-6xl">02</span>
<div>
<h3 class="text-2xl font-black leading-tight tracking-tight xl:text-3xl">Les labs se corrigent tout seuls</h3>
<p class="mt-3 text-base font-medium">Chaque étape est vérifiée directement dans la VM. L'élève sait tout de suite s'il a réussi, avec un indice s'il bloque.</p>
</div>
</div>
</li>
<li class="relative min-h-[340px] xl:aspect-square border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] transition-transform hover:-translate-y-1 lg:rotate-1">
<span class="absolute -bottom-4 right-6 rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Enseignant</span>
<div class="flex h-full flex-col justify-between gap-8 pb-4">
<span class="font-mono text-5xl font-semibold xl:text-6xl">03</span>
<div>
<h3 class="text-2xl font-black leading-tight tracking-tight xl:text-3xl">Toute la classe sur un écran</h3>
<p class="mt-3 text-base font-medium">Une tuile par élève : son étape, sa main levée, son blocage. Vous ouvrez sa console pour l'aider sans vous déplacer.</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<section class="border-t-4 border-black bg-[#FFD23F]" aria-labelledby="titre-seance">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-24 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Séance en direct</p>
<h2 id="titre-seance" class="mt-8 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vous voyez qui bloque avant qu'il abandonne.</h2>
<p class="mt-8 max-w-md text-lg font-medium">Une tuile par élève : son étape, sa main levée, le temps passé sans avancer. Un clic ouvre sa console en lecture, un second vous donne la main.</p>
<ul class="mt-8 flex flex-wrap gap-3 text-sm font-extrabold">
<li class="border-2 border-black bg-white px-3 py-1">Lecture de la console</li>
<li class="border-2 border-black bg-[#7CF2C0] px-3 py-1">Prise de main</li>
<li class="border-2 border-black bg-[#ec3013] px-3 py-1 text-white">Mode examen</li>
</ul>
<div class="mt-8 flex flex-wrap gap-4">
<a href="apercu-suivi.html" class="inline-flex items-center gap-3 border-4 border-black bg-black px-5 py-3 font-extrabold text-white shadow-[4px_4px_0px_#ec3013] hover:bg-[#ec3013]">Voir le suivi d’une classe <span class="font-mono" aria-hidden="true">→</span></a>
<a href="apercu-examen.html" class="inline-flex items-center border-4 border-black bg-white px-5 py-3 font-extrabold hover:bg-[#FF6FB5]">Essayer le mode examen</a>
</div>
</div>
<div class="relative lg:col-span-7">
<div class="border-4 border-black bg-white p-5 shadow-[10px_10px_0px_#000000]">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-4 border-black pb-4">
<p class="text-xl font-black">2nde NSI · Groupe B</p>
<p class="font-mono text-sm font-semibold">Premiers pas dans le shell · 24 élèves</p>
</div>
<ul class="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-4">
<li class="border-2 border-black bg-[#7CF2C0] p-3"><p class="font-extrabold">Léa M.</p><p class="font-mono text-sm">étape 5/5 ✓</p></li>
<li class="border-2 border-black bg-white p-3"><p class="font-extrabold">Yanis B.</p><p class="font-mono text-sm">étape 3/5</p></li>
<li class="-rotate-2 border-4 border-black bg-[#FF6FB5] p-3 shadow-[4px_4px_0px_#000000]"><p class="font-extrabold">Nora K.</p><p class="font-mono text-sm">main levée</p></li>
<li class="border-2 border-black bg-white p-3"><p class="font-extrabold">Tom R.</p><p class="font-mono text-sm">étape 4/5</p></li>
<li class="border-2 border-black bg-white p-3"><p class="font-extrabold">Inès D.</p><p class="font-mono text-sm">étape 2/5</p></li>
<li class="border-2 border-black bg-[#ec3013] p-3 text-white"><p class="font-extrabold">Sami L.</p><p class="font-mono text-sm">bloqué 9 min</p></li>
<li class="border-2 border-black bg-[#7CF2C0] p-3"><p class="font-extrabold">Chloé P.</p><p class="font-mono text-sm">étape 5/5 ✓</p></li>
<li class="border-2 border-black bg-white p-3"><p class="font-extrabold">Adam F.</p><p class="font-mono text-sm">étape 3/5</p></li>
</ul>
</div>
<span aria-hidden="true" class="etoile flotte pointer-events-none absolute -right-3 -top-6 h-14 w-14 bg-[#C4B5FD] [--r:20deg]"></span>
</div>
</div>
</section>
<section class="relative overflow-hidden border-t-4 border-black bg-white" aria-labelledby="titre-eleves">
<span aria-hidden="true" class="flotte pointer-events-none absolute left-[55%] top-12 h-8 w-8 rounded-full border-4 border-black bg-[#FFD23F]"></span>
<div class="relative mx-auto max-w-7xl px-5 py-24 lg:px-10">
<h2 id="titre-eleves" class="max-w-3xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Toute la classe connectée en un quart d'heure.</h2>
<ol class="mt-16 grid border-4 border-black md:grid-cols-2 lg:grid-cols-5">
<li class="border-b-4 border-black bg-[#C4B5FD] p-6 lg:border-b-0 lg:border-r-4"><span class="font-mono text-sm font-semibold">01</span><p class="mt-10 text-xl font-black leading-tight">Code ou QR de classe</p><p class="mt-2 font-medium">Vous validez chaque demande.</p></li>
<li class="border-b-4 border-black bg-white p-6 md:border-l-4 lg:border-b-0 lg:border-l-0 lg:border-r-4"><span class="font-mono text-sm font-semibold">02</span><p class="mt-10 text-xl font-black leading-tight">Import CSV</p><p class="mt-2 font-medium">Nom, prénom, groupe. Rien de plus.</p></li>
<li class="border-b-4 border-black bg-[#7CF2C0] p-6 lg:border-b-0 lg:border-r-4"><span class="font-mono text-sm font-semibold">03</span><p class="mt-10 text-xl font-black leading-tight">Saisie rapide</p><p class="mt-2 font-medium">Une ligne par élève.</p></li>
<li class="border-b-4 border-black bg-white p-6 md:border-l-4 lg:border-b-0 lg:border-l-0 lg:border-r-4"><span class="font-mono text-sm font-semibold">04</span><p class="mt-10 text-xl font-black leading-tight">Fiche de connexion</p><p class="mt-2 font-medium">Identifiant et QR imprimés, sans e-mail pour les mineurs.</p></li>
<li class="relative bg-[#FF6FB5] p-6 md:col-span-2 lg:col-span-1"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 text-xs font-extrabold shadow-[3px_3px_0px_#000000]">Bientôt</span><span class="font-mono text-sm font-semibold">05</span><p class="mt-10 text-xl font-black leading-tight">Moodle LTI 1.3</p><p class="mt-2 font-medium">Les élèves arrivent depuis votre ENT.</p></li>
</ol>
</div>
</section>
<section class="border-t-4 border-black bg-[#13233A] text-white" aria-labelledby="titre-etab">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-24 lg:grid-cols-12 lg:px-10">
<h2 id="titre-etab" class="text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl lg:col-span-5">Ça passe le filtrage du lycée.</h2>
<ul class="grid gap-6 sm:grid-cols-2 lg:col-span-7">
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#FFD23F]"><p class="font-mono text-3xl font-semibold text-[#FFD23F]">443</p><p class="mt-3 text-lg font-bold">Tout passe par HTTPS. Aucun port à ouvrir sur le réseau de l'établissement.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#7CF2C0] sm:translate-y-8"><p class="font-mono text-3xl font-semibold text-[#7CF2C0]">FR</p><p class="mt-3 text-lg font-bold">Hébergé en France. Données d'élèves minimales, supprimées 90 jours après l'archivage.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#FF6FB5]"><p class="font-mono text-3xl font-semibold text-[#FF6FB5]">0 install</p><p class="mt-3 text-lg font-bold">Vieux PC, Chromebook, connexion lente : un navigateur suffit.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#C4B5FD] sm:translate-y-8"><p class="font-mono text-3xl font-semibold text-[#C4B5FD]">NAT</p><p class="mt-3 text-lg font-bold">Les VM ne sortent pas sur Internet. Seuls les miroirs de paquets répondent.</p></li>
</ul>
</div>
</section>
<section class="relative overflow-hidden border-t-4 border-black bg-[#ec3013]" aria-labelledby="titre-cta">
<span aria-hidden="true" class="zigzag pointer-events-none absolute right-10 top-10 h-4 w-48"></span>
<span aria-hidden="true" class="etoile flotte pointer-events-none absolute bottom-10 right-[30%] h-12 w-12 bg-[#FFD23F] [--r:-8deg]"></span>
<div class="relative mx-auto flex max-w-7xl flex-col items-start gap-10 px-5 py-24 lg:px-10">
<h2 id="titre-cta" class="max-w-4xl text-6xl font-black leading-[0.9] tracking-tighter text-white sm:text-7xl xl:text-8xl">Votre prochain TP commence dans 5&nbsp;secondes.</h2>
<div class="flex flex-wrap gap-4">
<a href="apercu-lab-essai.html" class="flex items-center gap-4 border-4 border-black bg-white px-6 py-4 text-lg font-extrabold shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Lancer un lab d'essai <span class="font-mono" aria-hidden="true">→</span></a>
<a href="apercu-etablissements.html" class="border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white hover:bg-[#13233A]">Équiper mon établissement</a>
</div>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-espaces">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Un espace pour chacun</p>
<h2 id="t-espaces" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Prof, élève, vie scolaire, académie.</h2>
<ul class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<li><a href="apercu-cockpit.html" class="group flex h-full flex-col border-4 border-black bg-[#13233A] text-white p-6 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1"><span class="self-start border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black">Prof</span><span class="mt-4 text-2xl font-black leading-tight">Cockpit prof</span><span class="mt-2 flex-1 font-semibold">Alertes, mains levées, examen, DM : tout se pilote sur un écran.</span><span class="mt-5 font-extrabold underline underline-offset-4 group-hover:no-underline">Découvrir →</span></a></li>
<li><a href="apercu-espace-eleve.html" class="group flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1"><span class="self-start border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black">Élève</span><span class="mt-4 text-2xl font-black leading-tight">Espace élève</span><span class="mt-2 flex-1 font-semibold">Calendrier, devoirs, examens à venir et exercices pour s’entraîner.</span><span class="mt-5 font-extrabold underline underline-offset-4 group-hover:no-underline">Découvrir →</span></a></li>
<li><a href="apercu-vie-scolaire.html" class="group flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1"><span class="self-start border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black">CPE · intendance</span><span class="mt-4 text-2xl font-black leading-tight">Vie scolaire</span><span class="mt-2 flex-1 font-semibold">Alertes toutes classes, conseils de classe, licences et factures.</span><span class="mt-5 font-extrabold underline underline-offset-4 group-hover:no-underline">Découvrir →</span></a></li>
<li><a href="apercu-academie.html" class="group flex h-full flex-col border-4 border-black bg-[#FFD23F] p-6 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1"><span class="self-start border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black">Académie</span><span class="mt-4 text-2xl font-black leading-tight">Multi-établissements</span><span class="mt-2 flex-1 font-semibold">Usage et compétences agrégés, sans donnée nominative.</span><span class="mt-5 font-extrabold underline underline-offset-4 group-hover:no-underline">Découvrir →</span></a></li>
</ul>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-label="Lever la main">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="relative grid items-center gap-10 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FF6FB5] sm:p-12 md:grid-cols-[auto_1fr]">
<div class="grid h-40 w-40 -rotate-6 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black shadow-[6px_6px_0px_#FFFFFF]" role="img" aria-label="Moins 40 décibels"><span class="flex flex-col items-center gap-1 text-center"><span class="font-mono text-5xl font-semibold leading-none">−40</span><span class="text-2xl font-black leading-none">dB</span></span></div>
<div>
<p class="text-4xl font-black leading-tight tracking-tight sm:text-5xl">Vous devenez le roi du silence grâce à la fonction <span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
<p class="mt-6 text-2xl font-bold">Vos élèves n’auront plus que le droit de tousser ou de respirer&nbsp;!</p>
</div>
</div>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-pdf">
<div class="mx-auto grid max-w-7xl items-center gap-10 px-5 py-16 lg:grid-cols-12 lg:px-10">
<div class="border-4 border-black bg-white shadow-[10px_10px_0px_#000000] lg:col-span-6"><div class="aspect-[10/7]"><svg viewBox="0 0 600 420" class="h-full w-full" role="img" aria-label="Un smiley qui sourit à côté des cours à télécharger">
<defs><pattern id="pts" width="24" height="24" patternUnits="userSpaceOnUse"><circle cx="6" cy="6" r="3" fill="#000"/></pattern></defs>
<rect x="330" y="0" width="270" height="420" fill="url(#pts)"/>
<path d="M0 50 C150 20 270 80 320 170 L310 250 C230 215 120 240 0 285 Z" fill="#FF3E9A"/>
<path d="M190 262 C225 160 350 80 470 76 C575 72 606 170 566 262 C526 352 404 400 292 380 C210 364 172 318 190 262 Z" fill="#35E0E8"/>
<g transform="translate(486 104) rotate(14)"><path d="M-20 -26 H10 L22 -14 V28 H-20 Z" fill="#fff" stroke="#000" stroke-width="5" stroke-linejoin="round"/><path d="M10 -26 V-14 H22" fill="#FFD23F" stroke="#000" stroke-width="5" stroke-linejoin="round"/><rect x="-26" y="-2" width="38" height="16" fill="#ec3013" stroke="#000" stroke-width="5"/><text x="-7" y="11" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="12" fill="#fff">PDF</text></g>
<path d="M540 190 l7 15 16 2 -12 11 3 16 -14 -8 -14 8 3 -16 -12 -11 16 -2 z" fill="#FFD23F" stroke="#000" stroke-width="4" stroke-linejoin="round"/>
<g transform="rotate(-10 200 170)">
<circle cx="208" cy="178" r="112" fill="#000"/>
<circle cx="200" cy="170" r="112" fill="#FFDD57" stroke="#000" stroke-width="8"/>
<ellipse cx="160" cy="140" rx="13" ry="20" fill="#000"/>
<ellipse cx="240" cy="140" rx="13" ry="20" fill="#000"/>
<path d="M128 192 C150 250 250 250 272 192 Z" fill="#000" stroke="#000" stroke-width="8" stroke-linejoin="round"/>
<path d="M142 198 H258 C254 212 248 218 244 222 H156 C150 216 146 210 142 198 Z" fill="#fff"/>
</g>
<g font-family="Archivo, sans-serif" font-weight="900" transform="rotate(-8 400 350)">
<text x="208" y="352" font-size="40" fill="#FF3E9A" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<text x="205" y="349" font-size="40" fill="#000" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<rect x="204" y="362" width="340" height="26" fill="#fff" stroke="#000" stroke-width="3"/><text x="214" y="381" font-size="15" fill="#000" letter-spacing="1">COURS · TD · CORRECTIONS EN PDF</text>
</g>
</svg></div></div>
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-[#35E0E8] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Gratuit · à télécharger</p>
<h2 id="t-pdf" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Tous les cours se téléchargent en PDF.</h2>
<p class="mt-5 text-xl font-medium leading-relaxed">CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2">
<li><a href="apercu-cours-ipv4-cm.html" class="flex items-center gap-4 border-4 border-black bg-[#FFD23F] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>CM complet<span class="block font-mono text-xs font-semibold">Adressage IPv4 · 12 pages</span></span></a></li>
<li><a href="apercu-td-imprimable.html" class="flex items-center gap-4 border-4 border-black bg-[#7CF2C0] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>TD à imprimer<span class="block font-mono text-xs font-semibold">Étapes + cases à remplir</span></span></a></li>
<li><a href="apercu-td-imprimable.html#correction" class="flex items-center gap-4 border-4 border-black bg-[#FF6FB5] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Correction<span class="block font-mono text-xs font-semibold">Réservée au prof</span></span></a></li>
<li><a href="apercu-cours.html" class="flex items-center gap-4 border-4 border-black bg-[#C4B5FD] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Tous les cours<span class="block font-mono text-xs font-semibold">Par cursus, du SNT au master</span></span></a></li>
</ul>
</div>
</div>
</section>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-cockpit.html" class="hover:underline">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="hover:underline">Espace élève</a></li><li><a href="apercu-aide.html" class="hover:underline">Aide et tutoriels</a></li><li><a href="apercu-labs.html" class="hover:underline">Labs</a></li><li><a href="apercu-fonctionnalites.html" class="hover:underline">Fonctionnalités</a></li><li><a href="apercu-cours.html" class="hover:underline">Cours gratuits</a></li><li><a href="apercu-bibliotheque.html" class="hover:underline">Bibliothèque</a></li><li><a href="apercu-ide.html" class="hover:underline">IDE en ligne</a></li><li><a href="apercu-generateur.html" class="hover:underline">Générateur de TD</a></li><li><a href="apercu-lab-web.html" class="hover:underline">Lab web</a></li><li><a href="apercu-tarifs.html" class="hover:underline">Tarifs</a></li><li><a href="apercu-pourquoi.html" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-etablissements.html" class="hover:underline">Équiper une classe</a></li><li><a href="apercu-connexion.html" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="apercu-legal.html#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="apercu-legal.html#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function () {
PaillasseTerminal.mount(document.getElementById('xterm-hero'), {
user: 'lea', host: 'debian', fontSize: 13,
demo: ['mkdir projets && cd projets', 'echo "Léa" > notes.txt', 'ls -la', 'cat notes.txt']
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,456 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cours gratuits · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="Apercu%20accueil%20Blade.html" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="apercu-fonctionnalites.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cockpit.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="apercu-vie-scolaire.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="apercu-academie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cours.html" aria-current="page" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="apercu-labs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="apercu-lab-web.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="apercu-ide.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="apercu-maison.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-bibliotheque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="apercu-banque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="apercu-generateur.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="apercu-td-imprimable.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="apercu-quiz-projection.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-sujet.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="apercu-devoirs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="apercu-correction.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="apercu-fiche-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="apercu-messagerie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="apercu-export.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="apercu-aide.html" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="apercu-etablissements.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="apercu-tarifs.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="apercu-pourquoi.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="apercu-connexion.html" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="apercu-inscription.html" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="zigzag absolute right-10 top-16 h-4 w-40"></span><span class="etoile flotte absolute right-[22%] bottom-24 h-10 w-10 bg-[#C4B5FD] [--r:12deg]"></span><span class="flotte absolute right-[8%] bottom-10 h-9 w-9 rounded-full border-4 border-black bg-[#7CF2C0] [animation-delay:1.5s]"></span></div>
<div class="relative mx-auto max-w-7xl px-5 pb-16 pt-14 lg:px-10 lg:pt-20">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Gratuit, sans compte</p>
<h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">99 cours gratuits, calés sur vos référentiels.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Chaque cours suit le découpage de l’Éducation nationale : un CM pour comprendre, un TD pour s’exercer sur papier, un TP sur une vraie VM, un QCM corrigé et expliqué.</p>
<dl class="mt-12 grid max-w-3xl grid-cols-2 border-4 border-black sm:grid-cols-4">
<div class="border-b-4 border-r-4 border-black bg-white p-4 sm:border-b-0"><dt class="font-mono text-sm font-semibold">Cours</dt><dd class="text-4xl font-black">99</dd></div>
<div class="border-b-4 border-black bg-[#C4B5FD] p-4 sm:border-b-0 sm:border-r-4"><dt class="font-mono text-sm font-semibold">TD</dt><dd class="text-4xl font-black">45</dd></div>
<div class="border-r-4 border-black bg-[#7CF2C0] p-4"><dt class="font-mono text-sm font-semibold">TP sur VM</dt><dd class="text-4xl font-black">59</dd></div>
<div class="bg-[#FFD23F] p-4"><dt class="font-mono text-sm font-semibold">QCM corrigés</dt><dd class="text-4xl font-black">98</dd></div>
</dl>
<div class="mt-8 flex flex-wrap gap-4"><a href="apercu-bibliotheque.html" class="inline-flex items-center gap-3 border-4 border-black bg-black px-5 py-3 font-extrabold text-white shadow-[4px_4px_0px_#ec3013]">Bibliothèque complète · 225 fiches →</a><a href="apercu-generateur.html" class="inline-flex items-center gap-3 border-4 border-black bg-[#FF6FB5] px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">Générateur de TD</a><a href="apercu-ide.html" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">IDE en ligne</a></div>
</div>
</section>
<nav class="sticky top-0 z-20 border-b-4 border-black bg-white" aria-label="Filtres des cours">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-3 px-5 py-4 lg:px-10">
<span class="mr-1 font-extrabold">Cursus</span>
<a href="#nsi" class="border-2 border-black bg-[#FFD23F] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Lycée NSI</a>
<a href="#sio" class="border-2 border-black bg-[#7CF2C0] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">BTS SIO SISR</a>
<a href="#ciel" class="border-2 border-black bg-[#C4B5FD] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">BTS CIEL</a>
<a href="#but" class="border-2 border-black bg-[#FF6FB5] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">BUT R&amp;T</a>
<a href="#tssr" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Titre pro TSSR</a>
<a href="#prog" class="border-2 border-black bg-[#FF6FB5] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Programmation</a>
<div class="ml-auto flex flex-wrap items-center gap-2" role="group" aria-label="Filtrer par type">
<span class="mr-1 font-extrabold">Contient</span>
<button type="button" data-filtre="Tout" aria-pressed="true" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">Tout</button>
<button type="button" data-filtre="TD" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">TD</button>
<button type="button" data-filtre="TP" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">TP</button>
<button type="button" data-filtre="QCM" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">QCM</button>
<button type="button" data-filtre="IDE" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">IDE</button>
</div>
</div>
</nav>
<div class="border-b-4 border-black bg-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-4 px-5 py-3 text-sm font-semibold lg:px-10">
<span class="flex items-center gap-2"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span> Cours magistral</span>
<span class="flex items-center gap-2"><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span> Travaux dirigés, corrigés</span>
<span class="flex items-center gap-2"><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span> Travaux pratiques sur VM</span>
<span class="flex items-center gap-2"><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span> Quiz à correction expliquée</span>
<span class="flex items-center gap-2"><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span> Exercice de code dans l’IDE</span>
</div>
</div>
<section id="nsi" class="scroll-mt-24 border-b-4 border-black" aria-labelledby="t-nsi">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="flex flex-wrap items-end gap-x-8 gap-y-3">
<h2 id="t-nsi" class="inline-block -rotate-1 border-4 border-black bg-[#FFD23F] px-4 py-1 text-5xl font-black tracking-tighter shadow-[6px_6px_0px_#000000] sm:text-6xl">Lycée NSI</h2>
<p class="text-lg font-semibold">Première et Terminale · spécialité NSI · 16 cours</p>
</div>
<div class="mt-12 grid gap-10 lg:grid-cols-2">
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-[#FFD23F] px-5 py-3 text-lg font-black">Première · Représentation des données</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Entiers naturels : binaire et hexadécimal</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Entiers relatifs et complément à deux</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Nombres flottants et leurs pièges</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Codage des caractères : ASCII, Unicode, UTF-8</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] lg:translate-y-6">
<h3 class="border-b-4 border-black bg-[#FFD23F] px-5 py-3 text-lg font-black">Première · Architectures et systèmes</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Modèle de von Neumann</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Système d’exploitation et commandes Linux</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Droits et permissions des fichiers</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Réseau : TCP/IP et protocole du bit alterné</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-[#FFD23F] px-5 py-3 text-lg font-black">Première · Web et données</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">HTTP, formulaires GET et POST</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Traitement de données en tables CSV</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] lg:translate-y-6">
<h3 class="border-b-4 border-black bg-[#FFD23F] px-5 py-3 text-lg font-black">Terminale · Architectures, réseaux, sécurité</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Processus et ordonnancement</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Routage : protocoles RIP et OSPF</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Chiffrement symétrique, asymétrique et HTTPS</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-[#FFD23F] px-5 py-3 text-lg font-black">Terminale · Données et structures</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Bases de données relationnelles et SQL</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Piles, files et listes chaînées</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Arbres binaires et graphes</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
</ul>
</div>
</div>
</div>
</section>
<section id="sio" class="scroll-mt-24 border-b-4 border-black" aria-labelledby="t-sio">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="flex flex-wrap items-end gap-x-8 gap-y-3">
<h2 id="t-sio" class="inline-block rotate-1 border-4 border-black bg-[#7CF2C0] px-4 py-1 text-5xl font-black tracking-tighter shadow-[6px_6px_0px_#000000] sm:text-6xl">BTS SIO SISR</h2>
<p class="text-lg font-semibold">Services informatiques aux organisations · option SISR · 18 cours</p>
</div>
<div class="mt-12 grid gap-10 lg:grid-cols-2">
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-[#7CF2C0] px-5 py-3 text-lg font-black">Bloc 1 · Support et mise à disposition de services</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Gérer le parc avec GLPI</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Traiter un incident : ticket, diagnostic, résolution</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Installer et configurer un poste Debian</span><span class="flex gap-1"><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Présence en ligne : nom de domaine et DNS public</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] lg:translate-y-6">
<h3 class="border-b-4 border-black bg-[#7CF2C0] px-5 py-3 text-lg font-black">Bloc 2 · Administration des systèmes et des réseaux</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Adressage IPv4 et sous-réseaux</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">VLAN et commutation</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Routage inter-VLAN</span><span class="flex gap-1"><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Serveur DHCP sous Debian</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Serveur DNS avec BIND 9</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Annuaire Samba AD et stratégies de groupe</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Supervision avec Zabbix</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Sauvegarde et restauration</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Virtualisation et conteneurs</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-[#7CF2C0] px-5 py-3 text-lg font-black">Bloc 3 · Cybersécurité des services</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">RGPD et protection des données</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Authentification et mots de passe</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Pare-feu avec nftables</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">VPN avec WireGuard</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Journalisation et détection d’intrusion</span><span class="flex gap-1"><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
</ul>
</div>
</div>
</div>
</section>
<section id="ciel" class="scroll-mt-24 border-b-4 border-black" aria-labelledby="t-ciel">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="flex flex-wrap items-end gap-x-8 gap-y-3">
<h2 id="t-ciel" class="inline-block -rotate-1 border-4 border-black bg-[#C4B5FD] px-4 py-1 text-5xl font-black tracking-tighter shadow-[6px_6px_0px_#000000] sm:text-6xl">BTS CIEL</h2>
<p class="text-lg font-semibold">Cybersécurité, informatique et réseaux, électronique · option IR · 12 cours</p>
</div>
<div class="mt-12 grid gap-10 lg:grid-cols-2">
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-[#C4B5FD] px-5 py-3 text-lg font-black">Réseaux</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Numération et codage de l’information</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Modèle OSI et encapsulation</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Ethernet, câblage et commutation</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Adressage IPv4 et IPv6</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Services réseau : SSH, HTTP, FTP</span><span class="flex gap-1"><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Capturer et analyser des trames avec tcpdump</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] lg:translate-y-6">
<h3 class="border-b-4 border-black bg-[#C4B5FD] px-5 py-3 text-lg font-black">Informatique</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Scripts Bash</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Python pour l’administration système</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Objets connectés et protocole MQTT</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-[#C4B5FD] px-5 py-3 text-lg font-black">Cybersécurité</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Analyse de risques</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Durcir un serveur Linux</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Détecter une attaque dans les journaux</span><span class="flex gap-1"><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
</ul>
</div>
</div>
</div>
</section>
<section id="but" class="scroll-mt-24 border-b-4 border-black" aria-labelledby="t-but">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="flex flex-wrap items-end gap-x-8 gap-y-3">
<h2 id="t-but" class="inline-block rotate-1 border-4 border-black bg-[#FF6FB5] px-4 py-1 text-5xl font-black tracking-tighter shadow-[6px_6px_0px_#000000] sm:text-6xl">BUT R&amp;T</h2>
<p class="text-lg font-semibold">Réseaux et télécommunications · parcours Cybersécurité et DevCloud · 13 cours</p>
</div>
<div class="mt-12 grid gap-10 lg:grid-cols-2">
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-[#FF6FB5] px-5 py-3 text-lg font-black">Semestres 1 et 2</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Initiation aux réseaux informatiques</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Fondamentaux des systèmes Linux</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Architecture des systèmes numériques</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Transmission et supports physiques</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Bases de la programmation</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] lg:translate-y-6">
<h3 class="border-b-4 border-black bg-[#FF6FB5] px-5 py-3 text-lg font-black">Semestres 3 et 4</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Routage dynamique OSPF</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Services réseaux : DNS, mail, web</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Réseaux d’opérateurs : BGP et MPLS</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Supervision et métrologie</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Automatiser avec Ansible</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-[#FF6FB5] px-5 py-3 text-lg font-black">Parcours Cybersécurité et DevCloud</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Cryptographie appliquée : PKI et certificats</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Conteneurs Docker et orchestration</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Auditer la sécurité d’un réseau</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
</ul>
</div>
</div>
</div>
</section>
<section id="tssr" class="scroll-mt-24 border-b-4 border-black" aria-labelledby="t-tssr">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="flex flex-wrap items-end gap-x-8 gap-y-3">
<h2 id="t-tssr" class="inline-block -rotate-1 border-4 border-black bg-white px-4 py-1 text-5xl font-black tracking-tighter shadow-[6px_6px_0px_#000000] sm:text-6xl">Titre pro TSSR</h2>
<p class="text-lg font-semibold">Technicien supérieur systèmes et réseaux · niveau 5 · 11 cours</p>
</div>
<div class="mt-12 grid gap-10 lg:grid-cols-2">
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-white px-5 py-3 text-lg font-black">CCP 1 · Assister les utilisateurs</h3>
<ul class="divide-y-2 divide-black">
<li data-types="TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Mettre en service un poste client</span><span class="flex gap-1"><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="TD TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Diagnostiquer une panne réseau</span><span class="flex gap-1"><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Rédiger une procédure utilisateur</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] lg:translate-y-6">
<h3 class="border-b-4 border-black bg-white px-5 py-3 text-lg font-black">CCP 2 · Infrastructure centralisée</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Déployer un domaine Samba AD</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Partages de fichiers et ACL</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Sauvegardes avec restic</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Superviser une infrastructure</span><span class="flex gap-1"><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-white px-5 py-3 text-lg font-black">CCP 3 · Infrastructure distribuée</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Déployer des services dans le cloud</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Docker Compose en production</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Automatiser l’administration en Bash</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-cours-ipv4.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">VPN site à site</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
</ul>
</div>
</div>
</div>
</section>
<section id="prog" class="scroll-mt-24 border-b-4 border-black" aria-labelledby="t-prog">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="flex flex-wrap items-end gap-x-8 gap-y-3">
<h2 id="t-prog" class="inline-block -rotate-1 border-4 border-black bg-[#FF6FB5] px-4 py-1 text-5xl font-black tracking-tighter shadow-[6px_6px_0px_#000000] sm:text-6xl">Programmation</h2>
<p class="text-lg font-semibold">Python, web, SQL, Bash, C · exercices dans l’IDE en ligne · 29 cours</p>
<a href="apercu-ide.html" class="ml-auto border-4 border-black bg-black px-4 py-2 font-extrabold text-white shadow-[4px_4px_0px_#FFD23F] hover:bg-[#ec3013]">Ouvrir l’IDE →</a>
</div>
<div class="mt-12 grid gap-10 lg:grid-cols-2">
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-[#FF6FB5] px-5 py-3 text-lg font-black">Python · les bases</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=py-pair" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Variables et types</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TD IDE QCM"><a href="apercu-ide.html?ex=py-pair" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Conditions : if, elif, else</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TD IDE QCM"><a href="apercu-ide.html?ex=py-somme" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Boucles for et while</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=py-pair" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Fonctions et paramètres</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD IDE QCM"><a href="apercu-ide.html?ex=py-somme" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Listes et tuples</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=py-voyelles" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Chaînes de caractères</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=py-voyelles" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Dictionnaires</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=py-somme" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Lire et écrire des fichiers CSV</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] lg:translate-y-6">
<h3 class="border-b-4 border-black bg-[#FF6FB5] px-5 py-3 text-lg font-black">Python · aller plus loin</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD IDE QCM"><a href="apercu-ide.html?ex=py-somme" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Récursivité</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=py-pair" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Programmation orientée objet</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
<li data-types="CM TD IDE QCM"><a href="apercu-ide.html?ex=py-somme" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Algorithmes de tri</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD IDE QCM"><a href="apercu-ide.html?ex=py-somme" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Recherche dichotomique</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=py-pair" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Tester son code avec assert</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-lab-essai.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Sockets : un client réseau en Python</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-[#FF6FB5] px-5 py-3 text-lg font-black">Web</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=web-bouton" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">HTML : structurer une page</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=web-bouton" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">CSS : flexbox et grid</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD IDE QCM"><a href="apercu-ide.html?ex=web-bouton" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">JavaScript et le DOM</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=web-bouton" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Formulaires et validation</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=web-bouton" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">API REST et JSON avec fetch</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-lab-essai.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">PHP côté serveur</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] lg:translate-y-6">
<h3 class="border-b-4 border-black bg-[#FF6FB5] px-5 py-3 text-lg font-black">Bases de données</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM TD IDE QCM"><a href="apercu-ide.html?ex=sql-select" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">SELECT, WHERE, ORDER BY</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TD IDE QCM"><a href="apercu-ide.html?ex=sql-group" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Agrégats et GROUP BY</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TD IDE QCM"><a href="apercu-ide.html?ex=sql-select" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Jointures</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=sql-select" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Créer des tables et des contraintes</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=sql-select" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Injection SQL : comprendre et s’en protéger</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
</ul>
</div>
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] ">
<h3 class="border-b-4 border-black bg-[#FF6FB5] px-5 py-3 text-lg font-black">Système et outils</h3>
<ul class="divide-y-2 divide-black">
<li data-types="CM IDE TP QCM"><a href="apercu-ide.html?ex=bash-tp" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Scripts Bash avancés</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM IDE QCM"><a href="apercu-ide.html?ex=bash-tp" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Expressions régulières</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">2 h</span></a></li>
<li data-types="CM TP QCM"><a href="apercu-lab-essai.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Git : versionner son code</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">3 h</span></a></li>
<li data-types="CM TD TP QCM"><a href="apercu-lab-essai.html" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">Langage C : pointeurs et mémoire</span><span class="flex gap-1"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span></span><span class="w-10 text-right font-mono text-sm font-semibold">4 h</span></a></li>
</ul>
</div>
</div>
</div>
</section>
<script>
document.querySelectorAll('[data-filtre]').forEach(function (b) {
b.addEventListener('click', function () {
var f = b.dataset.filtre;
document.querySelectorAll('[data-filtre]').forEach(function (x) { x.setAttribute('aria-pressed', x === b); });
document.querySelectorAll('[data-types]').forEach(function (li) {
li.hidden = f !== 'Tout' && li.dataset.types.split(' ').indexOf(f) === -1;
});
document.querySelectorAll('[data-bloc]').forEach(function (b) { b.hidden = !b.querySelector('[data-types]:not([hidden])'); });
document.querySelectorAll('section[id]').forEach(function (s) { if (s.querySelector('[data-bloc]')) s.hidden = !s.querySelector('[data-bloc]:not([hidden])'); });
});
});
</script>
<section class="border-t-4 border-black bg-white" aria-label="Lever la main">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="relative grid items-center gap-10 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FF6FB5] sm:p-12 md:grid-cols-[auto_1fr]">
<div class="grid h-40 w-40 -rotate-6 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black shadow-[6px_6px_0px_#FFFFFF]" role="img" aria-label="Moins 40 décibels"><span class="flex flex-col items-center gap-1 text-center"><span class="font-mono text-5xl font-semibold leading-none">−40</span><span class="text-2xl font-black leading-none">dB</span></span></div>
<div>
<p class="text-4xl font-black leading-tight tracking-tight sm:text-5xl">Vous devenez le roi du silence grâce à la fonction <span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
<p class="mt-6 text-2xl font-bold">Vos élèves n’auront plus que le droit de tousser ou de respirer&nbsp;!</p>
</div>
</div>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-pdf">
<div class="mx-auto grid max-w-7xl items-center gap-10 px-5 py-16 lg:grid-cols-12 lg:px-10">
<div class="border-4 border-black bg-white shadow-[10px_10px_0px_#000000] lg:col-span-6"><div class="aspect-[10/7]"><svg viewBox="0 0 600 420" class="h-full w-full" role="img" aria-label="Un smiley qui sourit à côté des cours à télécharger">
<defs><pattern id="pts" width="24" height="24" patternUnits="userSpaceOnUse"><circle cx="6" cy="6" r="3" fill="#000"/></pattern></defs>
<rect x="330" y="0" width="270" height="420" fill="url(#pts)"/>
<path d="M0 50 C150 20 270 80 320 170 L310 250 C230 215 120 240 0 285 Z" fill="#FF3E9A"/>
<path d="M190 262 C225 160 350 80 470 76 C575 72 606 170 566 262 C526 352 404 400 292 380 C210 364 172 318 190 262 Z" fill="#35E0E8"/>
<g transform="translate(486 104) rotate(14)"><path d="M-20 -26 H10 L22 -14 V28 H-20 Z" fill="#fff" stroke="#000" stroke-width="5" stroke-linejoin="round"/><path d="M10 -26 V-14 H22" fill="#FFD23F" stroke="#000" stroke-width="5" stroke-linejoin="round"/><rect x="-26" y="-2" width="38" height="16" fill="#ec3013" stroke="#000" stroke-width="5"/><text x="-7" y="11" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="12" fill="#fff">PDF</text></g>
<path d="M540 190 l7 15 16 2 -12 11 3 16 -14 -8 -14 8 3 -16 -12 -11 16 -2 z" fill="#FFD23F" stroke="#000" stroke-width="4" stroke-linejoin="round"/>
<g transform="rotate(-10 200 170)">
<circle cx="208" cy="178" r="112" fill="#000"/>
<circle cx="200" cy="170" r="112" fill="#FFDD57" stroke="#000" stroke-width="8"/>
<ellipse cx="160" cy="140" rx="13" ry="20" fill="#000"/>
<ellipse cx="240" cy="140" rx="13" ry="20" fill="#000"/>
<path d="M128 192 C150 250 250 250 272 192 Z" fill="#000" stroke="#000" stroke-width="8" stroke-linejoin="round"/>
<path d="M142 198 H258 C254 212 248 218 244 222 H156 C150 216 146 210 142 198 Z" fill="#fff"/>
</g>
<g font-family="Archivo, sans-serif" font-weight="900" transform="rotate(-8 400 350)">
<text x="208" y="352" font-size="40" fill="#FF3E9A" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<text x="205" y="349" font-size="40" fill="#000" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<rect x="204" y="362" width="340" height="26" fill="#fff" stroke="#000" stroke-width="3"/><text x="214" y="381" font-size="15" fill="#000" letter-spacing="1">COURS · TD · CORRECTIONS EN PDF</text>
</g>
</svg></div></div>
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-[#35E0E8] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Gratuit · à télécharger</p>
<h2 id="t-pdf" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Tous les cours se téléchargent en PDF.</h2>
<p class="mt-5 text-xl font-medium leading-relaxed">CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2">
<li><a href="apercu-cours-ipv4-cm.html" class="flex items-center gap-4 border-4 border-black bg-[#FFD23F] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>CM complet<span class="block font-mono text-xs font-semibold">Adressage IPv4 · 12 pages</span></span></a></li>
<li><a href="apercu-td-imprimable.html" class="flex items-center gap-4 border-4 border-black bg-[#7CF2C0] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>TD à imprimer<span class="block font-mono text-xs font-semibold">Étapes + cases à remplir</span></span></a></li>
<li><a href="apercu-td-imprimable.html#correction" class="flex items-center gap-4 border-4 border-black bg-[#FF6FB5] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Correction<span class="block font-mono text-xs font-semibold">Réservée au prof</span></span></a></li>
<li><a href="apercu-cours.html" class="flex items-center gap-4 border-4 border-black bg-[#C4B5FD] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Tous les cours<span class="block font-mono text-xs font-semibold">Par cursus, du SNT au master</span></span></a></li>
</ul>
</div>
</div>
</section>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-cockpit.html" class="hover:underline">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="hover:underline">Espace élève</a></li><li><a href="apercu-aide.html" class="hover:underline">Aide et tutoriels</a></li><li><a href="apercu-labs.html" class="hover:underline">Labs</a></li><li><a href="apercu-fonctionnalites.html" class="hover:underline">Fonctionnalités</a></li><li><a href="apercu-cours.html" class="hover:underline">Cours gratuits</a></li><li><a href="apercu-bibliotheque.html" class="hover:underline">Bibliothèque</a></li><li><a href="apercu-ide.html" class="hover:underline">IDE en ligne</a></li><li><a href="apercu-generateur.html" class="hover:underline">Générateur de TD</a></li><li><a href="apercu-lab-web.html" class="hover:underline">Lab web</a></li><li><a href="apercu-tarifs.html" class="hover:underline">Tarifs</a></li><li><a href="apercu-pourquoi.html" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-etablissements.html" class="hover:underline">Équiper une classe</a></li><li><a href="apercu-connexion.html" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="apercu-legal.html#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="apercu-legal.html#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Établissements · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="Apercu%20accueil%20Blade.html" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="apercu-fonctionnalites.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cockpit.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="apercu-vie-scolaire.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="apercu-academie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cours.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="apercu-labs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="apercu-lab-web.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="apercu-ide.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="apercu-maison.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-bibliotheque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="apercu-banque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="apercu-generateur.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="apercu-td-imprimable.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="apercu-quiz-projection.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-sujet.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="apercu-devoirs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="apercu-correction.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="apercu-fiche-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="apercu-messagerie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="apercu-export.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="apercu-aide.html" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="apercu-etablissements.html" aria-current="page" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="apercu-tarifs.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="apercu-pourquoi.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="apercu-connexion.html" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="apercu-inscription.html" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[8%] top-10 h-14 w-14 bg-[#FFD23F] [--r:12deg]"></span><span class="flotte absolute right-[35%] bottom-8 h-9 w-9 rounded-full border-4 border-black bg-[#7CF2C0] [animation-delay:1.5s]"></span></div>
<div class="relative mx-auto max-w-7xl px-5 pb-20 pt-14 lg:px-10 lg:pt-20">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Pour les établissements</p>
<h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Un projet par établissement. Un réseau par classe.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Chaque établissement a son espace isolé sur notre cloud OpenStack hébergé en France. Chaque classe a son propre réseau, sans IP publique.</p>
</div>
</section>
<section class="mx-auto max-w-7xl px-5 pb-28 pt-20 lg:px-10" aria-labelledby="titre-roles">
<h2 id="titre-roles" class="text-5xl font-black tracking-tighter sm:text-6xl">Chacun son rôle.</h2>
<ul class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<li class="border-4 border-black bg-[#FFD23F] p-6 shadow-[6px_6px_0px_#000000]"><h3 class="text-2xl font-black">Administrateur</h3><p class="mt-3 font-medium">Crée les classes, gère les enseignants et les quotas de l’établissement.</p></li>
<li class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000] lg:translate-y-8"><h3 class="text-2xl font-black">Enseignant</h3><p class="mt-3 font-medium">Réserve une séance, suit la classe en direct, prend la main sur une console.</p></li>
<li class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000]"><h3 class="text-2xl font-black">Élève</h3><p class="mt-3 font-medium">Se connecte avec sa fiche, lance le lab, lève la main s’il bloque.</p></li>
<li class="border-4 border-black bg-[#FF6FB5] p-6 shadow-[6px_6px_0px_#000000] lg:translate-y-8"><h3 class="text-2xl font-black">Formateur</h3><p class="mt-3 font-medium">Anime des sessions pour adultes en titre professionnel.</p></li>
</ul>
</section>
<section class="border-y-4 border-black bg-[#FFD23F]" aria-labelledby="titre-biblio">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-20 lg:grid-cols-12 lg:px-10">
<h2 id="titre-biblio" class="text-5xl font-black leading-[0.95] tracking-tighter lg:col-span-5">Une bibliothèque à dupliquer et adapter.</h2>
<div class="lg:col-span-7">
<p class="text-xl font-medium">Des séquences complètes, reliées aux référentiels : cours, TD, quiz et lab. Dupliquez une séquence, modifiez-la pour votre classe. Les quiz s’exportent en GIFT et Moodle XML.</p>
<ul class="mt-8 flex flex-wrap gap-3 text-sm font-extrabold">
<li class="border-2 border-black bg-white px-3 py-1">Cours</li><li class="border-2 border-black bg-[#7CF2C0] px-3 py-1">TD</li><li class="border-2 border-black bg-[#C4B5FD] px-3 py-1">Quiz</li><li class="border-2 border-black bg-[#FF6FB5] px-3 py-1">Lab</li>
<li class="border-2 border-black bg-black px-3 py-1 text-white">Moodle LTI 1.3 · bientôt</li><li class="border-2 border-black bg-black px-3 py-1 text-white">SSO ENT · plus tard</li>
</ul>
</div>
</div>
</section>
<section class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10" aria-labelledby="titre-contact">
<div class="lg:col-span-5">
<h2 id="titre-contact" class="text-5xl font-black leading-[0.95] tracking-tighter">Équiper votre établissement.</h2>
<p class="mt-6 text-lg font-medium">Dites-nous combien de classes et quelles formations. On vous répond avec une proposition.</p>
</div>
<form action="apercu-etablissements.html" method="post" class="grid gap-5 border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] sm:grid-cols-2 lg:col-span-7">
<label class="grid gap-2 font-extrabold">Nom<input name="nom" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Établissement<input name="etablissement" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold sm:col-span-2">E-mail professionnel<input type="email" name="email" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold sm:col-span-2">Votre besoin<textarea name="message" rows="4" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none" placeholder="2 classes de BTS SIO, 30 élèves chacune"></textarea></label>
<div class="sm:col-span-2"><button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Envoyer la demande <span class="font-mono" aria-hidden="true">→</span></button></div>
</form>
</section>
<section class="border-t-4 border-black bg-white" aria-label="Lever la main">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="relative grid items-center gap-10 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FF6FB5] sm:p-12 md:grid-cols-[auto_1fr]">
<div class="grid h-40 w-40 -rotate-6 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black shadow-[6px_6px_0px_#FFFFFF]" role="img" aria-label="Moins 40 décibels"><span class="flex flex-col items-center gap-1 text-center"><span class="font-mono text-5xl font-semibold leading-none">−40</span><span class="text-2xl font-black leading-none">dB</span></span></div>
<div>
<p class="text-4xl font-black leading-tight tracking-tight sm:text-5xl">Vous devenez le roi du silence grâce à la fonction <span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
<p class="mt-6 text-2xl font-bold">Vos élèves n’auront plus que le droit de tousser ou de respirer&nbsp;!</p>
</div>
</div>
</div>
</section>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-cockpit.html" class="hover:underline">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="hover:underline">Espace élève</a></li><li><a href="apercu-aide.html" class="hover:underline">Aide et tutoriels</a></li><li><a href="apercu-labs.html" class="hover:underline">Labs</a></li><li><a href="apercu-fonctionnalites.html" class="hover:underline">Fonctionnalités</a></li><li><a href="apercu-cours.html" class="hover:underline">Cours gratuits</a></li><li><a href="apercu-bibliotheque.html" class="hover:underline">Bibliothèque</a></li><li><a href="apercu-ide.html" class="hover:underline">IDE en ligne</a></li><li><a href="apercu-generateur.html" class="hover:underline">Générateur de TD</a></li><li><a href="apercu-lab-web.html" class="hover:underline">Lab web</a></li><li><a href="apercu-tarifs.html" class="hover:underline">Tarifs</a></li><li><a href="apercu-pourquoi.html" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-etablissements.html" class="hover:underline">Équiper une classe</a></li><li><a href="apercu-connexion.html" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="apercu-legal.html#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="apercu-legal.html#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,421 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fonctionnalités · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="Apercu%20accueil%20Blade.html" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="apercu-fonctionnalites.html" aria-current="page" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cockpit.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="apercu-vie-scolaire.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="apercu-academie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cours.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="apercu-labs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="apercu-lab-web.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="apercu-ide.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="apercu-maison.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-bibliotheque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="apercu-banque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="apercu-generateur.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="apercu-td-imprimable.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="apercu-quiz-projection.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-sujet.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="apercu-devoirs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="apercu-correction.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="apercu-fiche-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="apercu-messagerie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="apercu-export.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="apercu-aide.html" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="apercu-etablissements.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="apercu-tarifs.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="apercu-pourquoi.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="apercu-connexion.html" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="apercu-inscription.html" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[10%] top-12 h-14 w-14 bg-[#FF6FB5] [--r:12deg]"></span><span class="zigzag absolute bottom-10 right-[30%] h-4 w-40"></span></div>
<div class="relative mx-auto max-w-7xl px-5 pb-16 pt-14 lg:px-10 lg:pt-20">
<p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Fonctionnalités</p>
<h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Tout ce qu’il faut pour une classe, en ligne.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Des cours aux conseils de classe, de l’IDE aux TD à imprimer, sans rien installer. Un navigateur suffit, pour l’élève comme pour le prof.</p>
</div>
</section>
<section id="pourquoi-outil" class="relative overflow-hidden border-b-4 border-black bg-white" aria-labelledby="t-interet">
<div aria-hidden="true" class="pointer-events-none absolute inset-0 hidden lg:block"><svg viewBox="0 0 80 40" class="absolute left-[46%] top-24 h-10 w-20 rotate-12"><path d="M4 30 C20 6 44 6 60 20 M52 10 L62 21 L48 26" fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="absolute bottom-16 left-8 h-10 w-10 rotate-12 border-4 border-black bg-[#E6FF3F]"></span><span class="absolute right-10 top-10 h-8 w-8 rounded-full border-4 border-black bg-[#FF6FB5]"></span><span class="zigzag absolute bottom-10 right-[40%] h-4 w-32"></span></div>
<div class="relative mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-7">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Pourquoi un tel outil&nbsp;?</p>
<h2 id="t-interet" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Suivre chaque élève, même dans une classe de 35.</h2>
<div class="mt-8 grid gap-5 text-xl font-medium leading-relaxed">
<p>Avec des classes entières et une charge de travail déjà lourde, <strong class="font-black">suivre chaque élève individuellement</strong> devient presque impossible. Un <strong class="font-black">élève en difficulté décroche vite</strong>, souvent sans bruit, et le prof, pris par ses nombreuses classes, s’en rend compte trop tard.</p>
<p>Paillasse <strong class="font-black">surveille tout, sans être intrusif</strong>. Le <strong class="font-black">QCM de début d’heure</strong>, celui qui suit la <strong class="font-black">lecture du cours</strong>, les <strong class="font-black">TP</strong>, les <strong class="font-black">devoirs et exercices maison</strong> : chaque trace remonte au prof. Il voit rapidement <strong class="font-black">qui accompagner plus régulièrement</strong>, qui faire passer au premier rang, à qui demander de réexpliquer une notion.</p>
<p>C’est une <strong class="font-black">supervision bienveillante et naturelle</strong>, qui ne remplace pas le regard du prof mais l’aide à savoir <strong class="font-black">où concentrer ses efforts</strong>. Tout remonte dans le <strong class="font-black">cockpit prof</strong>, d’où il pilote et supervise examens, devoirs maison, quiz et labs.</p>
<p>Dans les labs, chaque étape a ses <strong class="font-black">indices, qui se débloquent après un certain nombre de tentatives</strong>. Ils ne remplacent pas l’aide d’un prof (ni une recherche Google&nbsp;😉), mais ils poussent l’élève à <strong class="font-black">réfléchir un tout petit peu plus avant de vous appeler</strong>. Et souvent, ils vous <strong class="font-black">évitent les questions triviales</strong>.</p>
<p>Et dans l’autre sens, <strong class="font-black">l’élève en excellence peut s’épanouir</strong>. Il aborde des notions plus avancées, avec une difficulté plus forte, <strong class="font-black">sans prendre d’avance sur le programme</strong> : il explore des notions connexes qui développent sa <strong class="font-black">culture générale</strong>.</p>
<p class="relative mt-4 inline-block -rotate-1 self-start border-4 border-black bg-black px-5 py-4 text-3xl font-black leading-tight text-white shadow-[6px_6px_0px_#E6FF3F]">Tout cela dans un unique but : <span class="text-[#E6FF3F]">faciliter votre travail.</span><svg viewBox="0 0 40 40" class="absolute -right-6 -top-6 h-10 w-10" aria-hidden="true"><path d="M20 2 l5 12 13 1 -10 8 3 13 -11 -7 -11 7 3 -13 -10 -8 13 -1 z" fill="#FF6FB5" stroke="#000" stroke-width="3" stroke-linejoin="round"/></svg></p>
</div>
</div>
<div class="grid content-start gap-8 lg:col-span-5 lg:pt-16">
<article class="relative border-4 border-black bg-[#FFD23F] p-6 shadow-[8px_8px_0px_#000000] lg:-rotate-1">
<span class="absolute -top-4 right-5 rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[2px_2px_0px_#000000]">Alerte douce</span>
<h3 class="text-2xl font-black">Un élève décroche</h3>
<ul class="mt-4 grid gap-2 font-semibold"><li class="flex gap-3"><span aria-hidden="true">■</span>3 QCM de début d’heure sous la moyenne</li><li class="flex gap-3"><span aria-hidden="true">■</span>Cours lu en 2 minutes au lieu de 15</li><li class="flex gap-3"><span aria-hidden="true">■</span>Devoir maison non rendu</li></ul>
<p class="mt-4 border-t-2 border-black pt-3 font-extrabold">→ Premier rang, notion à réexpliquer, suivi plus régulier.</p>
</article>
<article class="relative border-4 border-black bg-[#7CF2C0] p-6 shadow-[8px_8px_0px_#000000] lg:translate-x-6 lg:rotate-1">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[2px_2px_0px_#000000]">Excellence</span>
<h3 class="text-2xl font-black">Un élève s’ennuie</h3>
<ul class="mt-4 grid gap-2 font-semibold"><li class="flex gap-3"><span aria-hidden="true">■</span>Tous les TP réussis du premier coup</li><li class="flex gap-3"><span aria-hidden="true">■</span>20/20 au QCM de lecture</li><li class="flex gap-3"><span aria-hidden="true">■</span>Finit avant tout le monde</li></ul>
<p class="mt-4 border-t-2 border-black pt-3 font-extrabold">→ Défis plus durs sur des notions connexes, sans prendre d’avance sur le programme.</p>
</article>
<article class="relative border-4 border-black bg-[#C4B5FD] p-6 shadow-[8px_8px_0px_#000000] lg:-translate-x-3 lg:-rotate-1">
<span class="absolute -top-4 right-5 rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[2px_2px_0px_#000000]">Labs</span>
<div class="flex items-center gap-4"><svg viewBox="0 0 64 64" class="h-14 w-14 shrink-0" aria-hidden="true"><g stroke="#000" stroke-width="4" stroke-linejoin="round" stroke-linecap="round"><path d="M32 6 C18 6 10 16 10 27 C10 36 16 40 20 46 H44 C48 40 54 36 54 27 C54 16 46 6 32 6 Z" fill="#E6FF3F"/><rect x="21" y="46" width="22" height="7" fill="#fff"/><rect x="24" y="53" width="16" height="6" fill="#fff"/><path d="M26 28 L32 36 L38 28" fill="none"/></g><g stroke="#000" stroke-width="3.5" stroke-linecap="round"><path d="M2 20 L7 22 M62 20 L57 22 M8 4 L12 9 M56 4 L52 9"/></g></svg><h3 class="text-2xl font-black">Un indice se débloque</h3></div>
<ol class="mt-4 grid gap-2 font-mono text-sm font-semibold"><li class="border-2 border-black bg-white px-3 py-2">Tentative 1 · <span class="text-[#b3001b]">échec</span></li><li class="border-2 border-black bg-white px-3 py-2">Tentative 3 · 💡 Indice 1 : regarde la commande <strong>ip addr</strong></li><li class="border-2 border-black bg-white px-3 py-2">Tentative 5 · 💡 Indice 2 : le masque /26 donne 62 hôtes</li></ol>
<p class="mt-4 border-t-2 border-black pt-3 font-extrabold">→ L’élève cherche d’abord. Vous gardez votre temps pour les vraies questions.</p>
</article>
</div>
</div>
</section>
<section id="cockpit" class="scroll-mt-16 border-b-4 border-black bg-[#13233A] text-white" aria-labelledby="t-cockpit">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider text-black shadow-[4px_4px_0px_#000000]">Cockpit prof</p>
<h2 id="t-cockpit" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Un seul écran pour tout piloter.</h2>
<p class="mt-6 text-xl font-medium leading-relaxed">Le cockpit prof fait remonter les <strong class="font-black">informations importantes</strong> : qui décroche, qui a fini, qui lève la main, qui n’a pas rendu son devoir. De là, vous <strong class="font-black">pilotez et supervisez</strong> tout le reste : examens, devoirs maison, quiz flash, labs et QCM.</p>
<ul class="mt-8 grid gap-3 font-semibold sm:grid-cols-2">
<li class="flex gap-3 border-2 border-white p-3"><span aria-hidden="true">■</span>Lancer ou arrêter un examen</li>
<li class="flex gap-3 border-2 border-white p-3"><span aria-hidden="true">■</span>Programmer un devoir maison</li>
<li class="flex gap-3 border-2 border-white p-3"><span aria-hidden="true">■</span>Projeter un quiz flash</li>
<li class="flex gap-3 border-2 border-white p-3"><span aria-hidden="true">■</span>Répondre aux mains levées</li>
</ul>
<a href="apercu-cockpit.html" class="mt-8 inline-flex items-center gap-4 border-4 border-black bg-[#FFD23F] px-6 py-4 text-lg font-extrabold text-black shadow-[6px_6px_0px_#000000] hover:bg-white">Ouvrir le cockpit →</a>
</div>
<div class="lg:col-span-7">
<div class="border-4 border-black bg-white text-black shadow-[10px_10px_0px_#FF6FB5]">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-4 border-black bg-[#FFD23F] px-5 py-3"><p class="text-xl font-black">Cockpit · BTS SIO 1</p><p class="font-mono text-sm font-semibold">mardi 29/09 · 10 h 12</p></div>
<ul class="grid gap-3 p-5 sm:grid-cols-4">
<li class="border-4 border-black bg-[#ec3013] text-white p-4"><p class="font-mono text-xs font-semibold uppercase">À aider</p><p class="mt-1 text-3xl font-black leading-none">3</p><p class="mt-1 text-sm font-semibold">élèves en difficulté</p></li><li class="border-4 border-black bg-[#FF6FB5] p-4"><p class="font-mono text-xs font-semibold uppercase">Mains levées</p><p class="mt-1 text-3xl font-black leading-none">2</p><p class="mt-1 text-sm font-semibold">en attente</p></li><li class="border-4 border-black bg-[#7CF2C0] p-4"><p class="font-mono text-xs font-semibold uppercase">Examen</p><p class="mt-1 text-3xl font-black leading-none">24/24</p><p class="mt-1 text-sm font-semibold">en cours, 0 sortie</p></li><li class="border-4 border-black bg-[#C4B5FD] p-4"><p class="font-mono text-xs font-semibold uppercase">DM</p><p class="mt-1 text-3xl font-black leading-none">19/24</p><p class="mt-1 text-sm font-semibold">rendus avant vendredi</p></li>
</ul>
<ol class="grid gap-2 border-t-4 border-black p-5 font-semibold">
<li class="flex flex-wrap items-center gap-3"><span class="border-2 border-black bg-[#ec3013] px-2 text-sm font-extrabold text-white">Alerte</span>Léa M. · 3 QCM sous la moyenne · proposer le premier rang</li>
<li class="flex flex-wrap items-center gap-3"><span class="border-2 border-black bg-[#FF6FB5] px-2 text-sm font-extrabold">Main levée</span>Yanis B. · bloqué à l’étape 4 du lab VLAN</li>
<li class="flex flex-wrap items-center gap-3"><span class="border-2 border-black bg-[#FFD23F] px-2 text-sm font-extrabold">DM</span>5 devoirs non rendus · relance automatique jeudi</li>
<li class="flex flex-wrap items-center gap-3"><span class="border-2 border-black bg-[#7CF2C0] px-2 text-sm font-extrabold">Excellence</span>Inès K. · tout réussi · défi connexe proposé</li>
</ol>
</div>
</div>
</div>
</section>
<nav class="sticky top-0 z-20 border-b-4 border-black bg-white" aria-label="Sections">
<ul class="mx-auto flex max-w-7xl flex-wrap gap-2 px-5 py-3 text-sm font-extrabold lg:px-10">
<li><a href="#cockpit" class="block border-2 border-black bg-[#FFD23F] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Cockpit prof</a></li><li><a href="#pourquoi-outil" class="block border-2 border-black bg-[#FF6FB5] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Pourquoi</a></li><li><a href="#ressources" class="block border-2 border-black bg-black text-white px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#FFD23F]">Toutes les ressources</a></li><li><a href="#examen" class="block border-2 border-black bg-[#ec3013] text-white px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Mode examen</a></li><li><a href="#qcm" class="block border-2 border-black bg-[#FFD23F] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">QCM et quiz</a></li><li><a href="#banque" class="block border-2 border-black bg-[#FFD23F] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Quiz flash et banque</a></li><li><a href="#cours" class="block border-2 border-black bg-[#C4B5FD] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">CM, TD, TP</a></li><li><a href="#eleves" class="block border-2 border-black bg-[#7CF2C0] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Élèves et classes</a></li><li><a href="#evolution" class="block border-2 border-black bg-[#FF6FB5] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Évolution</a></li><li><a href="#conseil" class="block border-2 border-black bg-white px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Conseil de classe</a></li><li><a href="#en-ligne" class="block border-2 border-black bg-white px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">100 % en ligne</a></li>
</ul>
</nav>
<section id="ressources" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-ressources">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Toutes les ressources</p>
<h2 id="t-ressources" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">22 outils, un seul site.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Tout ce qui a été ajouté à Paillasse, au même endroit. Chaque carte ouvre l’outil.</p>
<ul class="mt-14 grid gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-4">
<li class="sm:col-span-2 lg:col-span-4"><a href="apercu-cockpit.html" class="group relative flex flex-col gap-2 border-4 border-black bg-[#13233A] p-6 text-white shadow-[8px_8px_0px_#FFD23F] transition-transform hover:-translate-y-1 sm:flex-row sm:items-center sm:justify-between"><span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-[#FFD23F] px-2 py-0.5 font-mono text-xs font-semibold text-black">Nouveau</span><span><span class="text-3xl font-black">Cockpit prof</span><span class="mt-2 flex-1 block font-semibold">Alertes, mains levées, examen, DM, observations : tout se pilote sur un seul écran.</span></span><span class="shrink-0 font-extrabold underline underline-offset-4">Ouvrir →</span></a></li>
<li class=""><a href="apercu-cours.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Gratuit</span><span class="font-mono text-sm font-semibold">01</span><span class="mt-2 text-2xl font-black leading-tight">Cours complets</span><span class="mt-2 flex-1 font-semibold">CM chronométrés, illustrés, avec vidéos. QCM de lecture, TD optionnel, TP pour pratiquer. Du SNT au master.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="apercu-ide.html" class="group relative flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Nouveau</span><span class="font-mono text-sm font-semibold">02</span><span class="mt-2 text-2xl font-black leading-tight">IDE en ligne</span><span class="mt-2 flex-1 font-semibold">Python, SQL, HTML/CSS/JS, Bash, C. Tests automatiques et corrigés, sans rien installer.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-labs.html" class="group relative flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">VM Debian</span><span class="font-mono text-sm font-semibold">03</span><span class="mt-2 text-2xl font-black leading-tight">Labs sur VM</span><span class="mt-2 flex-1 font-semibold">Un vrai terminal Linux (xterm.js) par élève. Chaque étape est vérifiée dans la VM.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="apercu-lab-web.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FF6FB5] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Nouveau</span><span class="font-mono text-sm font-semibold">04</span><span class="mt-2 text-2xl font-black leading-tight">Lab web</span><span class="mt-2 flex-1 font-semibold">Terminal et navigateur reliés : l’élève installe Apache, modifie la page, voit le résultat.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-bibliotheque.html" class="group relative flex h-full flex-col border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">225 fiches</span><span class="font-mono text-sm font-semibold">05</span><span class="mt-2 text-2xl font-black leading-tight">Bibliothèque du prof</span><span class="mt-2 flex-1 font-semibold">Tout le référentiel, du SNT au master, vérifié sur les textes officiels (BO, arrêtés, RNCP).</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="apercu-banque.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">1 240 questions</span><span class="font-mono text-sm font-semibold">06</span><span class="mt-2 text-2xl font-black leading-tight">Banque de sujets</span><span class="mt-2 flex-1 font-semibold">Questions et sujets d’examen personnalisables, classés par cursus, notion et difficulté.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-generateur.html" class="group relative flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">À l’infini</span><span class="font-mono text-sm font-semibold">07</span><span class="mt-2 text-2xl font-black leading-tight">Générateur de TD</span><span class="mt-2 flex-1 font-semibold">Des exercices toujours nouveaux : sous-réseaux, conversions, droits Unix, SQL…</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="apercu-td-imprimable.html" class="group relative flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">PDF</span><span class="font-mono text-sm font-semibold">08</span><span class="mt-2 text-2xl font-black leading-tight">TD à imprimer</span><span class="mt-2 flex-1 font-semibold">Étapes numérotées, cases à remplir, auto-évaluation. Correction imprimée à part.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-quiz-projection.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FF6FB5] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Début d’heure</span><span class="font-mono text-sm font-semibold">09</span><span class="mt-2 text-2xl font-black leading-tight">Quiz flash</span><span class="mt-2 flex-1 font-semibold">Diaporama projeté, élèves connectés depuis PC ou mobile. Vous voyez qui manque.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="apercu-devoirs.html" class="group relative flex h-full flex-col border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Maison</span><span class="font-mono text-sm font-semibold">10</span><span class="mt-2 text-2xl font-black leading-tight">Devoirs maison</span><span class="mt-2 flex-1 font-semibold">Programmez un devoir, fixez la date de rendu, suivez qui a rendu et corrigez en ligne.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-maison.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Aller plus loin</span><span class="font-mono text-sm font-semibold">11</span><span class="mt-2 text-2xl font-black leading-tight">Ressources à la maison</span><span class="mt-2 flex-1 font-semibold">HackerRank, DataCamp et d’autres ressources gratuites pour les élèves motivés.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="apercu-examen.html" class="group relative flex h-full flex-col border-4 border-black bg-[#ec3013] text-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Surveillé</span><span class="font-mono text-sm font-semibold">12</span><span class="mt-2 text-2xl font-black leading-tight">Mode examen</span><span class="mt-2 flex-1 font-semibold">Changement d’onglet, souris qui sort, fenêtre quittée : tout est noté en direct.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-espace-eleve.html" class="group relative flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Élève</span><span class="font-mono text-sm font-semibold">13</span><span class="mt-2 text-2xl font-black leading-tight">Espace élève</span><span class="mt-2 flex-1 font-semibold">Calendrier, devoirs, examens à venir, exercices par niveau, progression et « Lever la main ».</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="apercu-vie-scolaire.html" class="group relative flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">CPE · intendance</span><span class="font-mono text-sm font-semibold">14</span><span class="mt-2 text-2xl font-black leading-tight">Vie scolaire</span><span class="mt-2 flex-1 font-semibold">Alertes toutes classes, conseils de classe, journal des examens, licences, factures et consommation de VM.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-fiche-eleve.html" class="group relative flex h-full flex-col border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Équipe</span><span class="font-mono text-sm font-semibold">15</span><span class="mt-2 text-2xl font-black leading-tight">Fiche élève</span><span class="mt-2 flex-1 font-semibold">Compétences, historique, observations et alertes réunis sur une seule fiche.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="apercu-correction.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Gain de temps</span><span class="font-mono text-sm font-semibold">16</span><span class="mt-2 text-2xl font-black leading-tight">Correction assistée</span><span class="mt-2 flex-1 font-semibold">Barème pré-rempli à partir des calculs, des commandes rejouées et des tests. Vous validez.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-sujet.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FF6FB5] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">5 étapes</span><span class="font-mono text-sm font-semibold">17</span><span class="mt-2 text-2xl font-black leading-tight">Créer un sujet</span><span class="mt-2 flex-1 font-semibold">Cadre, questions de la banque, barème, surveillance, publication.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="apercu-messagerie.html" class="group relative flex h-full flex-col border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Encadrée</span><span class="font-mono text-sm font-semibold">18</span><span class="mt-2 text-2xl font-black leading-tight">Messagerie</span><span class="mt-2 flex-1 font-semibold">Prof, élève, classe, collègues et CPE. Réponses rapides : indice, cours, créneau.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-export.html" class="group relative flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">CSV</span><span class="font-mono text-sm font-semibold">19</span><span class="mt-2 text-2xl font-black leading-tight">Export Pronote / ENT</span><span class="mt-2 flex-1 font-semibold">Notes, présences et appréciations prêtes à charger dans votre logiciel.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="apercu-academie.html" class="group relative flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Multi-sites</span><span class="font-mono text-sm font-semibold">20</span><span class="mt-2 text-2xl font-black leading-tight">Académie</span><span class="mt-2 flex-1 font-semibold">Usage et compétences agrégés par établissement, sans donnée nominative.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-aide.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Vidéos</span><span class="font-mono text-sm font-semibold">21</span><span class="mt-2 text-2xl font-black leading-tight">Aide et tutoriels</span><span class="mt-2 flex-1 font-semibold">Tutoriels courts et guides pas à pas, réponse sous 24 h.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
</ul>
</div>
</section>
<section id="examen" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-examen">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-[#ec3013] text-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Mode examen</p>
<h2 id="t-examen" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vous savez quand un élève quitte sa copie.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Pendant une épreuve, Paillasse enregistre chaque sortie de l’élève : changement d’onglet, fenêtre quittée, souris sortie du navigateur. Chaque événement est horodaté et apparaît en direct sur votre écran.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2"><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Changement d’onglet détecté</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Fenêtre du navigateur quittée</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Souris sortie de la page</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Sortie du plein écran</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Copier-coller bloqué</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Indices désactivés</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>VM sans accès Internet</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Remise automatique à la fin du temps</span></li></ul>
<a href="apercu-examen.html" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] mt-10">Voir le mode examen <span class="font-mono" aria-hidden="true">→</span></a>
</div>
<div class="lg:col-span-6">
<div class="border-4 border-black bg-[#13233A] text-white shadow-[10px_10px_0px_#FFD23F]" id="demo-examen">
<div class="flex flex-wrap items-center gap-3 border-b-4 border-black bg-black px-5 py-3">
<span class="border-2 border-white bg-[#ec3013] px-2 font-mono text-xs font-semibold">EN DIRECT</span>
<p class="flex-1 font-extrabold">Essayez : changez d’onglet ou sortez la souris de la page</p>
<p class="font-mono text-sm"><span id="nb-incidents" class="text-2xl font-semibold text-[#FFD23F]">0</span> incident(s)</p>
</div>
<ol id="journal-examen" class="grid max-h-[340px] min-h-[260px] content-start gap-2 overflow-y-auto p-5 font-mono text-sm" aria-live="polite">
<li class="text-[#9fb0c8]">En attente… Rien à signaler pour l’instant.</li>
</ol>
<p class="border-t-4 border-black bg-[#0d192b] px-5 py-3 text-sm font-semibold">Essayez aussi de copier ce texte : la copie est bloquée pendant l’épreuve.</p>
</div>
</div>
</div>
</section>
<section id="qcm" class="scroll-mt-16 border-b-4 border-black bg-[#FFD23F]" aria-labelledby="t-qcm">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-7">
<p class="inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">QCM et quiz</p>
<h2 id="t-qcm" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Chaque erreur devient une explication.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">L’élève valide, voit sa note, puis lit pourquoi la bonne réponse est la bonne. Vous voyez quelles questions font trébucher la classe.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2"><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Choix unique ou multiple</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Vrai / faux, réponse numérique</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Texte à trous</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Correction expliquée question par question</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Tirage aléatoire dans une banque</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Import et export GIFT et Moodle XML</span></li></ul>
</div>
<div class="grid content-start gap-5 lg:col-span-5">
<div class="border-4 border-black bg-white p-5 shadow-[8px_8px_0px_#000000] lg:rotate-1">
<p class="font-mono text-sm font-semibold">Question 2 · réussie par 38 % de la classe</p>
<p class="mt-2 text-xl font-extrabold">Quelle est l’adresse réseau de 10.0.3.200/22 ?</p>
<div class="mt-4 h-4 border-2 border-black bg-white"><div class="h-full w-[38%] border-r-2 border-black bg-[#ec3013]"></div></div>
<p class="mt-3 font-semibold">Erreur fréquente : 10.0.3.0 (le masque n’est pas appliqué au 3ᵉ octet).</p>
</div>
<a href="apercu-cours-ipv4.html#qcm" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F] self-start">Essayer un QCM corrigé</a>
</div>
</div>
</section>
<section id="banque" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-banque">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-2 lg:px-10">
<div>
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Quiz de début d’heure</p>
<h2 id="t-banque" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter">5 minutes pour réveiller la classe.</h2>
<p class="mt-6 text-xl font-medium leading-relaxed">Sélectionnez les outils à réviser parmi ceux proposés : ls, chmod, grep, ip, ssh, systemctl… Un diaporama s’affiche au tableau. Les élèves se connectent avec leur identifiant, sur téléphone ou sur PC, depuis leur navigateur. Vous voyez en direct qui est là et qui manque.</p>
<ul class="mt-6 flex flex-wrap gap-2 font-mono text-sm font-semibold"><li class="border-2 border-black bg-black text-white px-2 py-0.5">ls</li><li class="border-2 border-black bg-white px-2 py-0.5">chmod</li><li class="border-2 border-black bg-white px-2 py-0.5">grep</li><li class="border-2 border-black bg-black text-white px-2 py-0.5">ip</li><li class="border-2 border-black bg-white px-2 py-0.5">ping</li><li class="border-2 border-black bg-white px-2 py-0.5">ssh</li><li class="border-2 border-black bg-black text-white px-2 py-0.5">systemctl</li><li class="border-2 border-black bg-white px-2 py-0.5">dig</li></ul>
<a href="apercu-banque.html#flash" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F] mt-8">Créer un quiz flash</a>
</div>
<div class="border-4 border-black bg-[#C4B5FD] p-7 shadow-[10px_10px_0px_#000000] lg:rotate-1">
<p class="inline-block border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider">Banque de sujets</p>
<h3 class="mt-5 text-4xl font-black leading-tight tracking-tighter">1 240 questions, à votre sauce.</h3>
<p class="mt-4 text-lg font-semibold">Classées par cursus, notion et difficulté. Modifiez-les, écrivez les vôtres, partagez-les avec vos collègues. Composez un sujet d’examen en quelques clics.</p>
<ul class="mt-5 grid gap-2 font-semibold"><li class="flex gap-3"><span aria-hidden="true">■</span>6 types de questions</li><li class="flex gap-3"><span aria-hidden="true">■</span>Explication pour chaque réponse</li><li class="flex gap-3"><span aria-hidden="true">■</span>Statistiques de réussite par question</li><li class="flex gap-3"><span aria-hidden="true">■</span>Sujets prêts : E6 blanc SISR, contrôles, QCM de trimestre</li></ul>
<a href="apercu-banque.html" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] mt-8">Ouvrir la banque <span class="font-mono" aria-hidden="true">→</span></a><div class="mt-4 flex flex-wrap gap-3"><a href="apercu-bibliotheque.html" class="border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Bibliothèque du référentiel →</a><a href="apercu-generateur.html" class="border-4 border-black bg-[#FF6FB5] px-4 py-2 font-extrabold">Générateur de TD →</a></div>
</div>
</div>
</section>
<section id="cours" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-cours">
<div class="mx-auto max-w-7xl px-5 py-20 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]">CM, TD, TP</p>
<h2 id="t-cours" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Des séquences prêtes, à votre main.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Chaque cours suit le même parcours, calé sur votre référentiel. Dupliquez-le, changez ce que vous voulez, assignez-le en un clic.</p>
<ol class="mt-12 grid gap-6 md:grid-cols-5">
<li class="border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000]"><p class="font-mono text-sm font-semibold">1 · CM</p><p class="mt-3 text-xl font-black">Une page complète</p><p class="mt-2 font-semibold">Illustrée, chronométrée. L’élève doit tout lire.</p></li>
<li class="border-4 border-black bg-[#FFD23F] p-6 shadow-[6px_6px_0px_#000000] md:translate-y-6"><p class="font-mono text-sm font-semibold">2 · QCM</p><p class="mt-3 text-xl font-black">A-t-il bien lu ?</p><p class="mt-2 font-semibold">Questions sur les notions du texte.</p></li>
<li class="border-4 border-dashed border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000]"><p class="font-mono text-sm font-semibold">3 · TD</p><p class="mt-3 text-xl font-black">Optionnel</p><p class="mt-2 font-semibold">Exercices corrigés pour s’entraîner.</p></li>
<li class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000] md:translate-y-6"><p class="font-mono text-sm font-semibold">4 · TP</p><p class="mt-3 text-xl font-black">Pratiquer</p><p class="mt-2 font-semibold">VM prête en 5 s, étapes vérifiées.</p></li>
<li class="border-4 border-black bg-black p-6 text-white shadow-[6px_6px_0px_#ec3013]"><p class="font-mono text-sm font-semibold">5 · Examen</p><p class="mt-3 text-xl font-black">Quand le prof veut</p><p class="mt-2 font-semibold">Sujet tiré de la banque, surveillé en direct.</p></li>
</ol>
<div class="mt-16 flex flex-wrap gap-4"><a href="apercu-cours-ipv4-cm.html" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000]">Lire un CM complet <span class="font-mono" aria-hidden="true">→</span></a>
<a href="apercu-cours.html" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F]">Parcourir les cours gratuits</a><a href="apercu-ide.html" class="inline-flex items-center gap-3 border-4 border-black bg-[#FF6FB5] px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">Ouvrir l’IDE en ligne</a></div>
</div>
</section>
<section id="eleves" class="scroll-mt-16 border-b-4 border-black bg-[#7CF2C0]" aria-labelledby="t-eleves">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Élèves et classes</p>
<h2 id="t-eleves" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vos classes, vos groupes, en quelques minutes.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Créez une classe, découpez-la en groupes, ajoutez les élèves comme vous préférez. L’établissement garde la main sur tout depuis l’espace administrateur, CPE compris.</p></div>
<ol class="grid content-start gap-3 lg:col-span-6">
<li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] "><span class="font-mono text-2xl font-semibold">1</span>Code ou QR de classe, validé par le prof</li><li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] md:ml-8"><span class="font-mono text-2xl font-semibold">2</span>Import CSV : nom, prénom, groupe</li><li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] "><span class="font-mono text-2xl font-semibold">3</span>Saisie rapide, une ligne par élève</li><li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] md:ml-8"><span class="font-mono text-2xl font-semibold">4</span>Fiche de connexion imprimée pour les mineurs, sans e-mail</li><li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] "><span class="font-mono text-2xl font-semibold">5</span>Moodle LTI 1.3 (bientôt)</li>
<li class="mt-4 border-4 border-black bg-black p-4 font-bold text-white">Fin d’année : archivage de la classe, suppression automatique 90 jours après.</li>
</ol>
</div>
</section>
<section id="evolution" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-evolution">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Évolution des élèves</p>
<h2 id="t-evolution" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Voyez qui progresse, semaine après semaine.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Notes de QCM, étapes de TP réussies, temps passé, compétences du référentiel : tout se suit dans le temps, pour un élève ou pour la classe.</p>
<a href="apercu-suivi.html" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] mt-10">Ouvrir le suivi de classe <span class="font-mono" aria-hidden="true">→</span></a>
</div>
<figure class="border-4 border-black bg-white p-5 shadow-[10px_10px_0px_#000000] lg:col-span-7">
<figcaption class="flex flex-wrap items-center justify-between gap-3">
<span class="text-xl font-black">Nora Kaci · moyenne aux QCM</span>
<span class="flex gap-4 text-sm font-semibold"><span class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black bg-[#FF6FB5]"></span>Nora</span><span class="flex items-center gap-2"><span class="w-6 border-t-[3px] border-dashed border-black"></span>Classe</span></span>
</figcaption>
<div class="mt-4"><svg viewBox="0 0 600 240" class="h-auto w-full" role="img" aria-label="Moyenne aux QCM de Nora sur 10 semaines, de 9 à 15,5 sur 20, contre 11 à 13 pour la classe">
<line x1="36" x2="564" y1="204" y2="204" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="208" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">8</text><line x1="36" x2="564" y1="162" y2="162" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="166" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">10</text><line x1="36" x2="564" y1="120" y2="120" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="124" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">12</text><line x1="36" x2="564" y1="78" y2="78" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="82" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">14</text><line x1="36" x2="564" y1="36" y2="36" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="40" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">16</text>
<text x="36" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S1</text><text x="94.66666666666666" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S2</text><text x="153.33333333333331" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S3</text><text x="212" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S4</text><text x="270.66666666666663" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S5</text><text x="329.3333333333333" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S6</text><text x="388" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S7</text><text x="446.6666666666667" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S8</text><text x="505.3333333333333" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S9</text><text x="564" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S10</text>
<polyline points="36.0,141.0 94.7,141.0 153.3,130.5 212.0,130.5 270.7,120.0 329.3,120.0 388.0,109.5 446.7,109.5 505.3,99.0 564.0,99.0" fill="none" stroke="#000" stroke-width="3" stroke-dasharray="8 6"/>
<polyline points="36.0,183.0 94.7,162.0 153.3,141.0 212.0,151.5 270.7,120.0 329.3,99.0 388.0,109.5 446.7,78.0 505.3,57.0 564.0,46.5" fill="none" stroke="#000" stroke-width="5" stroke-linejoin="round"/>
<rect x="30" y="177" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="88.66666666666666" y="156" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="147.33333333333331" y="135" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="206" y="145.5" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="264.66666666666663" y="114" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="323.3333333333333" y="93" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="382" y="103.5" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="440.6666666666667" y="72" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="499.3333333333333" y="51" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="558" y="40.5" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/>
</svg></div>
<p class="mt-2 border-t-2 border-black pt-3 font-semibold">+6,5 points en 10 semaines. Décrochage repéré en S4, rattrapé après le TD assigné.</p>
</figure>
</div>
</section>
<section id="conseil" class="scroll-mt-16 border-b-4 border-black bg-[#C4B5FD]" aria-labelledby="t-conseil">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Conseil de classe</p>
<h2 id="t-conseil" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vos remarques, prêtes pour le conseil.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Notez une observation en deux clics pendant le cours. Au moment du conseil de classe, tout est rangé par élève et par période : notes, progression, assiduité en TP, remarques datées.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2"><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Remarques datées et catégorisées</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Visibles par l’équipe et le CPE</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Synthèse par trimestre ou semestre</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Export PDF et CSV pour le conseil</span></li></ul>
</div>
<div class="grid content-start gap-6 lg:col-span-7">
<article class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]">
<div class="flex flex-wrap items-baseline justify-between gap-3 border-b-4 border-black pb-3"><h3 class="text-2xl font-black">Sami Lefèvre · 1er trimestre</h3><span class="font-mono text-sm font-semibold">QCM 11,2 · TP 14/20 étapes</span></div>
<ol class="mt-4 grid gap-3">
<li class="flex flex-wrap gap-3"><span class="border-2 border-black bg-[#7CF2C0] px-2 text-sm font-extrabold">Progrès</span><span class="font-mono text-sm">14/11</span><span class="font-semibold">Beaucoup plus autonome sur les TP réseau.</span></li>
<li class="flex flex-wrap gap-3"><span class="border-2 border-black bg-[#FFD23F] px-2 text-sm font-extrabold">Travail</span><span class="font-mono text-sm">28/10</span><span class="font-semibold">QCM VLAN non rendu, rattrapé le lendemain.</span></li>
<li class="flex flex-wrap gap-3"><span class="border-2 border-black bg-[#FF6FB5] px-2 text-sm font-extrabold">Comportement</span><span class="font-mono text-sm">03/10</span><span class="font-semibold">A aidé deux camarades bloqués sur le DHCP.</span></li>
</ol>
<div class="mt-5 flex flex-wrap gap-3"><button type="button" class="border-4 border-black bg-black px-4 py-2 font-extrabold text-white">+ Ajouter une remarque</button><button type="button" class="border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Exporter pour le conseil</button></div>
</article>
</div>
</div>
</section>
<section id="en-ligne" class="scroll-mt-16 bg-[#13233A] text-white" aria-labelledby="t-en-ligne">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<h2 id="t-en-ligne" class="max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">100 % en ligne. Rien à installer.</h2>
<ul class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#FFD23F]"><p class="text-xl font-black">Vieux PC et Chromebooks</p><p class="mt-2 font-semibold">Un navigateur récent suffit.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#7CF2C0]"><p class="text-xl font-black">Réseau du lycée</p><p class="mt-2 font-semibold">Aucun port à ouvrir, ça passe le filtrage.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#FF6FB5]"><p class="text-xl font-black">À la maison aussi</p><p class="mt-2 font-semibold">L’élève reprend son TP là où il l’a laissé.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#C4B5FD]"><p class="text-xl font-black">Connexion lente</p><p class="mt-2 font-semibold">Le terminal est léger, il reste fluide.</p></li>
</ul>
</div>
</section>
<script>
(function () {
var journal = document.getElementById('journal-examen'), nb = document.getElementById('nb-incidents'), n = 0, vide = true, dernier = '';
function note(t, c) {
if (t === dernier && Date.now() - note.t < 800) return; dernier = t; note.t = Date.now();
if (vide) { journal.innerHTML = ''; vide = false; }
n++; nb.textContent = n;
var li = document.createElement('li');
li.className = 'flex flex-wrap gap-3 border-2 border-white p-2 ' + c;
li.innerHTML = '<span class="font-semibold">' + new Date().toLocaleTimeString('fr-FR') + '</span><span>' + t + '</span>';
journal.prepend(li);
}
note.t = 0;
document.addEventListener('visibilitychange', function () { if (document.hidden) note('Changement d’onglet', 'bg-[#ec3013]'); else note('Retour sur la copie', 'bg-[#0d192b]'); });
window.addEventListener('blur', function () { note('Fenêtre du navigateur quittée', 'bg-[#ec3013]'); });
document.documentElement.addEventListener('mouseleave', function () { note('Souris sortie de la page', 'bg-[#FF6FB5] text-black'); });
['copy', 'cut', 'paste'].forEach(function (ev) {
document.getElementById('demo-examen').addEventListener(ev, function (e) { e.preventDefault(); note('Tentative de ' + (ev === 'paste' ? 'collage' : 'copie') + ' bloquée', 'bg-[#FFD23F] text-black'); });
});
})();
</script>
<section class="border-t-4 border-black bg-white" aria-label="Lever la main">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="relative grid items-center gap-10 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FF6FB5] sm:p-12 md:grid-cols-[auto_1fr]">
<div class="grid h-40 w-40 -rotate-6 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black shadow-[6px_6px_0px_#FFFFFF]" role="img" aria-label="Moins 40 décibels"><span class="flex flex-col items-center gap-1 text-center"><span class="font-mono text-5xl font-semibold leading-none">−40</span><span class="text-2xl font-black leading-none">dB</span></span></div>
<div>
<p class="text-4xl font-black leading-tight tracking-tight sm:text-5xl">Vous devenez le roi du silence grâce à la fonction <span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
<p class="mt-6 text-2xl font-bold">Vos élèves n’auront plus que le droit de tousser ou de respirer&nbsp;!</p>
</div>
</div>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-pdf">
<div class="mx-auto grid max-w-7xl items-center gap-10 px-5 py-16 lg:grid-cols-12 lg:px-10">
<div class="border-4 border-black bg-white shadow-[10px_10px_0px_#000000] lg:col-span-6"><div class="aspect-[10/7]"><svg viewBox="0 0 600 420" class="h-full w-full" role="img" aria-label="Un smiley qui sourit à côté des cours à télécharger">
<defs><pattern id="pts" width="24" height="24" patternUnits="userSpaceOnUse"><circle cx="6" cy="6" r="3" fill="#000"/></pattern></defs>
<rect x="330" y="0" width="270" height="420" fill="url(#pts)"/>
<path d="M0 50 C150 20 270 80 320 170 L310 250 C230 215 120 240 0 285 Z" fill="#FF3E9A"/>
<path d="M190 262 C225 160 350 80 470 76 C575 72 606 170 566 262 C526 352 404 400 292 380 C210 364 172 318 190 262 Z" fill="#35E0E8"/>
<g transform="translate(486 104) rotate(14)"><path d="M-20 -26 H10 L22 -14 V28 H-20 Z" fill="#fff" stroke="#000" stroke-width="5" stroke-linejoin="round"/><path d="M10 -26 V-14 H22" fill="#FFD23F" stroke="#000" stroke-width="5" stroke-linejoin="round"/><rect x="-26" y="-2" width="38" height="16" fill="#ec3013" stroke="#000" stroke-width="5"/><text x="-7" y="11" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="12" fill="#fff">PDF</text></g>
<path d="M540 190 l7 15 16 2 -12 11 3 16 -14 -8 -14 8 3 -16 -12 -11 16 -2 z" fill="#FFD23F" stroke="#000" stroke-width="4" stroke-linejoin="round"/>
<g transform="rotate(-10 200 170)">
<circle cx="208" cy="178" r="112" fill="#000"/>
<circle cx="200" cy="170" r="112" fill="#FFDD57" stroke="#000" stroke-width="8"/>
<ellipse cx="160" cy="140" rx="13" ry="20" fill="#000"/>
<ellipse cx="240" cy="140" rx="13" ry="20" fill="#000"/>
<path d="M128 192 C150 250 250 250 272 192 Z" fill="#000" stroke="#000" stroke-width="8" stroke-linejoin="round"/>
<path d="M142 198 H258 C254 212 248 218 244 222 H156 C150 216 146 210 142 198 Z" fill="#fff"/>
</g>
<g font-family="Archivo, sans-serif" font-weight="900" transform="rotate(-8 400 350)">
<text x="208" y="352" font-size="40" fill="#FF3E9A" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<text x="205" y="349" font-size="40" fill="#000" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<rect x="204" y="362" width="340" height="26" fill="#fff" stroke="#000" stroke-width="3"/><text x="214" y="381" font-size="15" fill="#000" letter-spacing="1">COURS · TD · CORRECTIONS EN PDF</text>
</g>
</svg></div></div>
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-[#35E0E8] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Gratuit · à télécharger</p>
<h2 id="t-pdf" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Tous les cours se téléchargent en PDF.</h2>
<p class="mt-5 text-xl font-medium leading-relaxed">CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2">
<li><a href="apercu-cours-ipv4-cm.html" class="flex items-center gap-4 border-4 border-black bg-[#FFD23F] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>CM complet<span class="block font-mono text-xs font-semibold">Adressage IPv4 · 12 pages</span></span></a></li>
<li><a href="apercu-td-imprimable.html" class="flex items-center gap-4 border-4 border-black bg-[#7CF2C0] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>TD à imprimer<span class="block font-mono text-xs font-semibold">Étapes + cases à remplir</span></span></a></li>
<li><a href="apercu-td-imprimable.html#correction" class="flex items-center gap-4 border-4 border-black bg-[#FF6FB5] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Correction<span class="block font-mono text-xs font-semibold">Réservée au prof</span></span></a></li>
<li><a href="apercu-cours.html" class="flex items-center gap-4 border-4 border-black bg-[#C4B5FD] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Tous les cours<span class="block font-mono text-xs font-semibold">Par cursus, du SNT au master</span></span></a></li>
</ul>
</div>
</div>
</section>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-cockpit.html" class="hover:underline">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="hover:underline">Espace élève</a></li><li><a href="apercu-aide.html" class="hover:underline">Aide et tutoriels</a></li><li><a href="apercu-labs.html" class="hover:underline">Labs</a></li><li><a href="apercu-fonctionnalites.html" class="hover:underline">Fonctionnalités</a></li><li><a href="apercu-cours.html" class="hover:underline">Cours gratuits</a></li><li><a href="apercu-bibliotheque.html" class="hover:underline">Bibliothèque</a></li><li><a href="apercu-ide.html" class="hover:underline">IDE en ligne</a></li><li><a href="apercu-generateur.html" class="hover:underline">Générateur de TD</a></li><li><a href="apercu-lab-web.html" class="hover:underline">Lab web</a></li><li><a href="apercu-tarifs.html" class="hover:underline">Tarifs</a></li><li><a href="apercu-pourquoi.html" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-etablissements.html" class="hover:underline">Équiper une classe</a></li><li><a href="apercu-connexion.html" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="apercu-legal.html#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="apercu-legal.html#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Labs · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="Apercu%20accueil%20Blade.html" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="apercu-fonctionnalites.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cockpit.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="apercu-vie-scolaire.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="apercu-academie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cours.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="apercu-labs.html" aria-current="page" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="apercu-lab-web.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="apercu-ide.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="apercu-maison.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-bibliotheque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="apercu-banque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="apercu-generateur.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="apercu-td-imprimable.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="apercu-quiz-projection.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-sujet.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="apercu-devoirs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="apercu-correction.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="apercu-fiche-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="apercu-messagerie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="apercu-export.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="apercu-aide.html" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="apercu-etablissements.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="apercu-tarifs.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="apercu-pourquoi.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="apercu-connexion.html" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="apercu-inscription.html" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[10%] top-12 h-12 w-12 bg-[#FF6FB5] [--r:12deg]"></span><span class="flotte absolute right-[30%] bottom-10 h-9 w-9 rounded-full border-4 border-black bg-[#FFD23F] [animation-delay:1.5s]"></span></div>
<div class="relative mx-auto max-w-7xl px-5 pb-20 pt-14 lg:px-10 lg:pt-20">
<p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Catalogue</p>
<h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Des labs qui se corrigent tout seuls.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Chaque lab est une vraie VM Debian, ou plusieurs reliées en réseau. L’élève suit les consignes, la vérification valide chaque étape.</p>
</div>
</section>
<section class="mx-auto max-w-7xl px-5 py-16 lg:px-10" aria-labelledby="titre-catalogue">
<div class="flex flex-wrap items-center gap-3">
<h2 id="titre-catalogue" class="mr-4 text-2xl font-black">Filtrer</h2>
<button type="button" class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white">Tous</button>
<button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Linux</button>
<button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#7CF2C0]">Réseau</button>
<button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#C4B5FD]">Services</button>
</div>
<ul class="mt-14 grid gap-10 pb-12 sm:grid-cols-2 lg:grid-cols-3">
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] -rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Linux</span>
<span class="font-mono text-5xl font-semibold">01</span>
<div>
<p class="font-mono text-sm font-semibold">Lycée NSI</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Premiers pas dans le shell</h3>
<p class="mt-3 font-medium">Se déplacer, créer des dossiers, lire des fichiers.</p>
<a href="apercu-lab-essai.html" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] md:translate-y-10">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Linux</span>
<span class="font-mono text-5xl font-semibold">02</span>
<div>
<p class="font-mono text-sm font-semibold">BTS SIO · SISR et SLAM</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Utilisateurs et droits</h3>
<p class="mt-3 font-medium">Créer des comptes, régler chmod et chown, tester les accès.</p>
<a href="apercu-lab-essai.html" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Réseau</span>
<span class="font-mono text-5xl font-semibold">03</span>
<div>
<p class="font-mono text-sm font-semibold">BTS CIEL</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Adressage IPv4</h3>
<p class="mt-3 font-medium">Configurer deux VM pour qu’elles se voient, puis diagnostiquer.</p>
<a href="apercu-lab-essai.html" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#FF6FB5] p-7 shadow-[8px_8px_0px_#000000] rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Réseau</span>
<span class="font-mono text-5xl font-semibold">04</span>
<div>
<p class="font-mono text-sm font-semibold">BUT · Licence pro</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Routage statique avec Kathará</h3>
<p class="mt-3 font-medium">Trois routeurs en conteneurs, une topologie à faire communiquer.</p>
<a href="apercu-lab-essai.html" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] md:translate-y-10">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Services</span>
<span class="font-mono text-5xl font-semibold">05</span>
<div>
<p class="font-mono text-sm font-semibold">BTS SIO · SISR et SLAM</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Serveur web Apache</h3>
<p class="mt-3 font-medium">Installer, publier une page, lire les journaux.</p>
<a href="apercu-lab-essai.html" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] -rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Services</span>
<span class="font-mono text-5xl font-semibold">06</span>
<div>
<p class="font-mono text-sm font-semibold">Master · École d’ingé</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Annuaire Samba AD</h3>
<p class="mt-3 font-medium">Monter un contrôleur de domaine et joindre un client.</p>
<a href="apercu-lab-essai.html" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
</ul>
</section>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-cockpit.html" class="hover:underline">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="hover:underline">Espace élève</a></li><li><a href="apercu-aide.html" class="hover:underline">Aide et tutoriels</a></li><li><a href="apercu-labs.html" class="hover:underline">Labs</a></li><li><a href="apercu-fonctionnalites.html" class="hover:underline">Fonctionnalités</a></li><li><a href="apercu-cours.html" class="hover:underline">Cours gratuits</a></li><li><a href="apercu-bibliotheque.html" class="hover:underline">Bibliothèque</a></li><li><a href="apercu-ide.html" class="hover:underline">IDE en ligne</a></li><li><a href="apercu-generateur.html" class="hover:underline">Générateur de TD</a></li><li><a href="apercu-lab-web.html" class="hover:underline">Lab web</a></li><li><a href="apercu-tarifs.html" class="hover:underline">Tarifs</a></li><li><a href="apercu-pourquoi.html" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-etablissements.html" class="hover:underline">Équiper une classe</a></li><li><a href="apercu-connexion.html" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="apercu-legal.html#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="apercu-legal.html#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ressources à la maison · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="js/paillasse-terminal.js"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="Apercu%20accueil%20Blade.html" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="apercu-fonctionnalites.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cockpit.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="apercu-vie-scolaire.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="apercu-academie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cours.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="apercu-labs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="apercu-lab-web.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="apercu-ide.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="apercu-maison.html" aria-current="page" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-bibliotheque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="apercu-banque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="apercu-generateur.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="apercu-td-imprimable.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="apercu-quiz-projection.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-sujet.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="apercu-devoirs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="apercu-correction.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="apercu-fiche-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="apercu-messagerie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="apercu-export.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="apercu-aide.html" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="apercu-etablissements.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="apercu-tarifs.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="apercu-pourquoi.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="apercu-connexion.html" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="apercu-inscription.html" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="border-b-4 border-black bg-white">
<div class="mx-auto max-w-7xl px-5 pb-12 pt-12 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Pour les élèves</p>
<h1 class="mt-6 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Envie d’aller plus loin à la maison&nbsp;?</h1>
<p class="mt-6 max-w-3xl text-xl font-medium leading-relaxed">Sur Paillasse, tu retrouves tes cours, tes QCM, l’IDE et le générateur de TD depuis chez toi, sur ton PC ou ton téléphone. Et si tu en veux encore, voici des ressources gratuites, sérieuses et en grande partie en français.</p>
<div class="mt-8 flex flex-wrap gap-4"><a href="apercu-ide.html" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] hover:bg-[#ec3013]">Coder dans l’IDE →</a><a href="apercu-generateur.html" class="inline-flex items-center border-4 border-black bg-[#FF6FB5] px-6 py-4 text-lg font-extrabold shadow-[6px_6px_0px_#000000]">S’entraîner au générateur de TD</a><a href="apercu-cours.html" class="inline-flex items-center border-4 border-black bg-white px-6 py-4 text-lg font-extrabold shadow-[6px_6px_0px_#000000] hover:bg-[#FFD23F]">Relire les cours</a></div>
</div>
</section>
<section class="mx-auto max-w-7xl px-5 py-16 lg:px-10" aria-labelledby="t-ext">
<h2 id="t-ext" class="text-4xl font-black tracking-tighter">Ressources externes gratuites</h2>
<p class="mt-3 max-w-2xl text-lg font-semibold">Elles ne font pas partie de Paillasse. Certaines demandent de créer un compte : demande l’accord de tes parents si tu es mineur.</p>
<ul id="ext" class="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-3"></ul>
</section>
<script src="js/referentiel.js"></script>
<script>
(function () {
var C = ["bg-[#FFD23F]","bg-[#7CF2C0]","bg-[#C4B5FD]","bg-[#FF6FB5]","bg-white"];
document.getElementById('ext').innerHTML = window.REFERENTIEL.plusLoin.map(function (r, i) {
return '<li class="flex flex-col border-4 border-black ' + C[i % C.length] + ' p-6 shadow-[6px_6px_0px_#000000] ' + (i % 3 === 1 ? 'lg:translate-y-4' : '') + '"><p class="font-mono text-xs font-semibold uppercase">' + r[0] + '</p><p class="mt-2 text-2xl font-black">' + r[1] + '</p><p class="mt-2 flex-1 font-semibold">' + r[3] + '</p><a href="' + r[2] + '" target="_blank" rel="noopener" class="mt-4 self-start border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-black hover:text-white">Ouvrir ↗</a></li>';
}).join('');
})();
</script>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-pdf">
<div class="mx-auto grid max-w-7xl items-center gap-10 px-5 py-16 lg:grid-cols-12 lg:px-10">
<div class="border-4 border-black bg-white shadow-[10px_10px_0px_#000000] lg:col-span-6"><div class="aspect-[10/7]"><svg viewBox="0 0 600 420" class="h-full w-full" role="img" aria-label="Un smiley qui sourit à côté des cours à télécharger">
<defs><pattern id="pts" width="24" height="24" patternUnits="userSpaceOnUse"><circle cx="6" cy="6" r="3" fill="#000"/></pattern></defs>
<rect x="330" y="0" width="270" height="420" fill="url(#pts)"/>
<path d="M0 50 C150 20 270 80 320 170 L310 250 C230 215 120 240 0 285 Z" fill="#FF3E9A"/>
<path d="M190 262 C225 160 350 80 470 76 C575 72 606 170 566 262 C526 352 404 400 292 380 C210 364 172 318 190 262 Z" fill="#35E0E8"/>
<g transform="translate(486 104) rotate(14)"><path d="M-20 -26 H10 L22 -14 V28 H-20 Z" fill="#fff" stroke="#000" stroke-width="5" stroke-linejoin="round"/><path d="M10 -26 V-14 H22" fill="#FFD23F" stroke="#000" stroke-width="5" stroke-linejoin="round"/><rect x="-26" y="-2" width="38" height="16" fill="#ec3013" stroke="#000" stroke-width="5"/><text x="-7" y="11" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="12" fill="#fff">PDF</text></g>
<path d="M540 190 l7 15 16 2 -12 11 3 16 -14 -8 -14 8 3 -16 -12 -11 16 -2 z" fill="#FFD23F" stroke="#000" stroke-width="4" stroke-linejoin="round"/>
<g transform="rotate(-10 200 170)">
<circle cx="208" cy="178" r="112" fill="#000"/>
<circle cx="200" cy="170" r="112" fill="#FFDD57" stroke="#000" stroke-width="8"/>
<ellipse cx="160" cy="140" rx="13" ry="20" fill="#000"/>
<ellipse cx="240" cy="140" rx="13" ry="20" fill="#000"/>
<path d="M128 192 C150 250 250 250 272 192 Z" fill="#000" stroke="#000" stroke-width="8" stroke-linejoin="round"/>
<path d="M142 198 H258 C254 212 248 218 244 222 H156 C150 216 146 210 142 198 Z" fill="#fff"/>
</g>
<g font-family="Archivo, sans-serif" font-weight="900" transform="rotate(-8 400 350)">
<text x="208" y="352" font-size="40" fill="#FF3E9A" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<text x="205" y="349" font-size="40" fill="#000" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<rect x="204" y="362" width="340" height="26" fill="#fff" stroke="#000" stroke-width="3"/><text x="214" y="381" font-size="15" fill="#000" letter-spacing="1">COURS · TD · CORRECTIONS EN PDF</text>
</g>
</svg></div></div>
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-[#35E0E8] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Gratuit · à télécharger</p>
<h2 id="t-pdf" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Tous les cours se téléchargent en PDF.</h2>
<p class="mt-5 text-xl font-medium leading-relaxed">CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2">
<li><a href="apercu-cours-ipv4-cm.html" class="flex items-center gap-4 border-4 border-black bg-[#FFD23F] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>CM complet<span class="block font-mono text-xs font-semibold">Adressage IPv4 · 12 pages</span></span></a></li>
<li><a href="apercu-td-imprimable.html" class="flex items-center gap-4 border-4 border-black bg-[#7CF2C0] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>TD à imprimer<span class="block font-mono text-xs font-semibold">Étapes + cases à remplir</span></span></a></li>
<li><a href="apercu-td-imprimable.html#correction" class="flex items-center gap-4 border-4 border-black bg-[#FF6FB5] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Correction<span class="block font-mono text-xs font-semibold">Réservée au prof</span></span></a></li>
<li><a href="apercu-cours.html" class="flex items-center gap-4 border-4 border-black bg-[#C4B5FD] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Tous les cours<span class="block font-mono text-xs font-semibold">Par cursus, du SNT au master</span></span></a></li>
</ul>
</div>
</div>
</section>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-cockpit.html" class="hover:underline">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="hover:underline">Espace élève</a></li><li><a href="apercu-aide.html" class="hover:underline">Aide et tutoriels</a></li><li><a href="apercu-labs.html" class="hover:underline">Labs</a></li><li><a href="apercu-fonctionnalites.html" class="hover:underline">Fonctionnalités</a></li><li><a href="apercu-cours.html" class="hover:underline">Cours gratuits</a></li><li><a href="apercu-bibliotheque.html" class="hover:underline">Bibliothèque</a></li><li><a href="apercu-ide.html" class="hover:underline">IDE en ligne</a></li><li><a href="apercu-generateur.html" class="hover:underline">Générateur de TD</a></li><li><a href="apercu-lab-web.html" class="hover:underline">Lab web</a></li><li><a href="apercu-tarifs.html" class="hover:underline">Tarifs</a></li><li><a href="apercu-pourquoi.html" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-etablissements.html" class="hover:underline">Équiper une classe</a></li><li><a href="apercu-connexion.html" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="apercu-legal.html#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="apercu-legal.html#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,350 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pourquoi ce projet ? · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="Apercu%20accueil%20Blade.html" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="apercu-fonctionnalites.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cockpit.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="apercu-vie-scolaire.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="apercu-academie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cours.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="apercu-labs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="apercu-lab-web.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="apercu-ide.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="apercu-maison.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-bibliotheque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="apercu-banque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="apercu-generateur.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="apercu-td-imprimable.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="apercu-quiz-projection.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-sujet.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="apercu-devoirs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="apercu-correction.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="apercu-fiche-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="apercu-messagerie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="apercu-export.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="apercu-aide.html" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="apercu-etablissements.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="apercu-tarifs.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="apercu-pourquoi.html" aria-current="page" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="apercu-connexion.html" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="apercu-inscription.html" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0">
<span class="etoile flotte absolute left-[44%] top-10 h-12 w-12 bg-[#FFD23F] [--r:14deg]"></span>
<span class="zigzag absolute bottom-10 left-10 h-4 w-40"></span>
<span class="flotte absolute top-[45%] right-[2%] h-9 w-9 rounded-full border-4 border-black bg-[#7CF2C0]"></span>
</div>
<div class="relative mx-auto grid max-w-7xl gap-14 px-5 pb-20 pt-14 lg:grid-cols-12 lg:px-10 lg:pt-20">
<div class="lg:col-span-7">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Le fondateur</p>
<h1 class="mt-8 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Pourquoi ce projet&nbsp;?</h1>
<p class="mt-10 max-w-xl text-2xl font-bold leading-snug">Parce qu’un BTS peut changer une vie. Il a changé la mienne.</p>
<p class="mt-8 max-w-xl text-3xl font-black">Salut&nbsp;! Moi, c’est Adam Belkacemi.</p>
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">Après un bac S, je n’ai pas trouvé de filière qui me correspondait. J’ai très tôt intégré le marché du travail, et j’ai fait plein de boulots&nbsp;!</p>
<ul class="mt-6 flex max-w-xl flex-wrap gap-3 text-sm font-extrabold" aria-label="Mon parcours, des premiers boulots au métier de data engineer">
<li class="-rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 shadow-[3px_3px_0px_#000000]">Coursier Uber Eats</li>
<li class="rotate-1 border-2 border-black bg-[#FFD23F] px-3 py-1 shadow-[3px_3px_0px_#000000]">Caissier</li>
<li class="-rotate-1 border-2 border-black bg-[#C4B5FD] px-3 py-1 shadow-[3px_3px_0px_#000000]">Employé polyvalent en grande distribution</li>
<li class="rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 shadow-[3px_3px_0px_#000000]">Manutentionnaire</li>
</ul>
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">L’informatique et le développement web, je les ai appris seul, en autodidacte. Au départ, c’était pour rendre service : mon frère avait besoin d’un site pour son cabinet d’infirmier, puis mon oncle pour son activité d’artisan. Le soir, après le boulot, j’apprenais, je testais, je cassais, je recommençais.</p>
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">J’ai pris goût à la programmation. Un nouveau monde s’est ouvert à moi&nbsp;!</p>
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">En 2019, j’intègre un BTS SN-IR, la seule formation qui voulait bien de moi… <strong class="bg-[#FFD23F] px-1">Ça a été le meilleur choix de toute ma vie&nbsp;!!!</strong></p>
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">Pour la première fois, j’avais une vraie machine sous les mains, des profs qui me poussaient et un cadre pour progresser. Deux ans plus tard, j’en sors avec de bonnes notes et une lettre de recommandation de mon prof principal. Direction l’école d’ingénieur. Ça a été la plus belle expérience de toute ma vie&nbsp;! 😊 Je le souhaite à tout le monde.</p>
<p class="mt-6 inline-block -rotate-1 border-4 border-black bg-[#7CF2C0] px-4 py-3 text-xl font-black shadow-[5px_5px_0px_#000000]">Aujourd’hui, je suis data ingénieur et entrepreneur.</p>
</div>
<div class="relative mx-auto w-full max-w-sm self-start lg:col-span-5 lg:mt-10">
<div class="absolute inset-0 translate-x-5 translate-y-5 border-4 border-black bg-[#C4B5FD]" aria-hidden="true"></div>
<figure class="relative aspect-square overflow-hidden border-4 border-black bg-white">
<img src="images/adam-belkacemi.jpeg" alt="Portrait d’Adam Belkacemi" class="h-full w-full object-cover">
</figure>
<span class="absolute -left-6 top-8 -rotate-6 border-2 border-black bg-[#FFD23F] px-3 py-1 font-extrabold shadow-[4px_4px_0px_#000000]">Data ingénieur · entrepreneur</span>
<span class="absolute -right-4 top-[300px] z-20 rotate-3 border-2 border-black bg-[#7CF2C0] px-3 py-1 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">Ancien BTS SN-IR · 2019-2021</span>
<div class="relative z-10 translate-x-5 px-3 pb-8 pt-10" aria-label="Mes premiers boulots">
<svg class="pointer-events-none absolute inset-0 h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><polyline points="30,5 70,25 30,46 70,67 30,88 50,100" fill="none" stroke="#000" stroke-width="0.8" stroke-dasharray="3 2.5" vector-effect="non-scaling-stroke" style="stroke-width:3px"/></svg>
<ul class="relative grid gap-6">
<li class="ml-0 w-[62%] -rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Coursier à vélo"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#EEEAFF"/><g fill="#D9D2FF"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><g stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round" fill="none"><circle cx="66" cy="72" r="16" fill="#fff"/><circle cx="134" cy="72" r="16" fill="#fff"/><path d="M66 72 L90 48 L124 48 L134 72 M90 48 L102 72 L124 48 M124 48 L119 37 L129 35 M90 48 L86 41 L96 41"/></g><g stroke="#13233A" stroke-width="1.4" opacity=".6"><path d="M66 58 V86 M52 72 H80 M134 58 V86 M120 72 H148"/></g><circle cx="66" cy="72" r="3" fill="#13233A"/><circle cx="134" cy="72" r="3" fill="#13233A"/><circle cx="102" cy="72" r="4" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M100 44 L108 60 L102 72" stroke="#3d6bf5" stroke-width="7" stroke-linecap="round" fill="none"/><path d="M104 44 L116 58 L112 68" stroke="#2c55d6" stroke-width="7" stroke-linecap="round" fill="none"/><path d="M100 72 h8 M110 68 h8" stroke="#13233A" stroke-width="3.5" stroke-linecap="round"/><g transform="rotate(-10 86 30)"><rect x="70" y="16" width="30" height="26" rx="3" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="70" y="16" width="30" height="7" fill="#F5B800" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M80 30 h10" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/></g><path d="M96 32 C104 24 118 26 122 36 L114 48 L98 46 Z" fill="#ec3013" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M106 30 L112 46" stroke="#b92410" stroke-width="2"/><path d="M114 36 L126 40" stroke="#F2C9A0" stroke-width="5" stroke-linecap="round"/><path d="M114 36 L126 40" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round" fill="none" opacity="0"/><circle cx="122" cy="22" r="7.5" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M113 21 C113 11 131 11 131 21 Z" fill="#7CF2C0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M121 13 v6" stroke="#13233A" stroke-width="1.6"/><g stroke="#13233A" stroke-width="2" stroke-linecap="round" opacity=".45"><path d="M36 60 h14 M30 68 h18 M38 76 h10"/></g></svg></div></li>
<li class="ml-auto w-[62%] rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Caissier"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#E3FAF1"/><g fill="#C4F0DF"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><path d="M34 58 H166 V90 H34 Z" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M34 58 H166 V66 H34 Z" fill="#C4B5FD" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M44 74 H120" stroke="#13233A" stroke-width="2" stroke-dasharray="5 4" opacity=".5"/><circle cx="84" cy="24" r="9" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M74 22 C74 11 94 11 94 22 C90 18 80 18 74 22 Z" fill="#6b3f1f" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M66 58 C66 38 102 38 102 58 Z" fill="#7CF2C0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M78 40 V58 M90 40 V58" stroke="#13233A" stroke-width="2"/><rect x="80" y="46" width="8" height="6" fill="#fff" stroke="#13233A" stroke-width="1.8"/><path d="M100 52 L112 46" stroke="#F2C9A0" stroke-width="5" stroke-linecap="round"/><rect x="114" y="32" width="34" height="26" rx="2" fill="#13233A" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="118" y="36" width="26" height="10" fill="#7CF2C0"/><path d="M121 41 h8 M132 41 h9" stroke="#13233A" stroke-width="1.6"/><g fill="#fff"><rect x="119" y="49" width="5" height="4"/><rect x="126" y="49" width="5" height="4"/><rect x="133" y="49" width="5" height="4"/><rect x="140" y="49" width="4" height="4"/></g><rect x="124" y="24" width="14" height="8" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="42" y="46" width="14" height="12" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><circle cx="52" cy="42" r="4" fill="#ec3013" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="152" y="44" width="8" height="14" rx="2" fill="#FF6FB5" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><circle cx="160" cy="80" r="0"/></svg></div></li>
<li class="ml-0 w-[62%] -rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Employé en usine avec EPI"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#FFF3C4"/><g fill="#FBE38A"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><rect x="118" y="30" width="60" height="60" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="118" y="30" width="60" height="10" fill="#C4B5FD" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><g transform="translate(148 62)"><circle r="15" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><circle r="5" fill="#13233A"/><path d="M0 -21 v6 M0 15 v6 M-21 0 h6 M15 0 h6 M-15 -15 l4 4 M11 11 l4 4 M15 -15 l-4 4 M-11 11 l-4 4" stroke="#13233A" stroke-width="3.2" stroke-linecap="round"/></g><circle cx="126" cy="35" r="2.5" fill="#ec3013"/><circle cx="133" cy="35" r="2.5" fill="#7CF2C0"/><path d="M56 90 L60 52 C64 40 90 40 94 52 L98 90 Z" fill="#E6FF3F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M66 44 V90 M88 44 V90" stroke="#ec3013" stroke-width="3.2"/><path d="M60 66 H96" stroke="#c9c9c9" stroke-width="3"/><circle cx="77" cy="28" r="9.5" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M64 27 C64 11 90 11 90 27 Z" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M60 27 H94" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round" fill="none"/><path d="M77 14 v8" stroke="#13233A" stroke-width="1.6"/><rect x="70" y="27" width="14" height="5" rx="2.5" fill="#7CE3F2" stroke="#13233A" stroke-width="2"/><path d="M94 56 L114 58" stroke="#3d6bf5" stroke-width="7" stroke-linecap="round"/><circle cx="116" cy="58" r="4.5" fill="#FF6FB5" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/></svg></div></li>
<li class="ml-auto w-[62%] rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Manutentionnaire"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#FFE3F0"/><g fill="#FFC7DE"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><rect x="112" y="82" width="66" height="8" fill="#C98404" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M122 82 v8 M144 82 v8 M166 82 v8" stroke="#13233A" stroke-width="2"/><g stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"><rect x="114" y="56" width="30" height="26" fill="#FFD23F"/><rect x="146" y="56" width="30" height="26" fill="#F5B800"/><rect x="128" y="30" width="32" height="26" fill="#FFD23F"/></g><g stroke="#13233A" stroke-width="2"><path d="M129 56 v8 M161 56 v8 M144 30 v8"/></g><path d="M120 72 h8 M152 72 h8" stroke="#ec3013" stroke-width="2.4"/><circle cx="66" cy="22" r="8.5" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M57 20 C57 10 75 10 75 20 Z" fill="#ec3013" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M73 17 h8" stroke="#13233A" stroke-width="2.6" stroke-linecap="round"/><rect x="70" y="32" width="32" height="26" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M86 32 v8" stroke="#13233A" stroke-width="2"/><path d="M52 62 C50 38 78 32 80 48 L78 62 Z" fill="#7CF2C0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M60 62 L56 88 M72 62 L78 88" stroke="#3d6bf5" stroke-width="8" stroke-linecap="round"/><path d="M56 89 h-8 M78 89 h8" stroke="#13233A" stroke-width="4.5" stroke-linecap="round"/></svg></div></li>
<li class="ml-0 w-[62%] -rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Développeur et data engineer"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#E6F7FF"/><g fill="#C9E8F7"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><rect x="40" y="70" width="130" height="6" fill="#C98404" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M50 76 V90 M160 76 V90" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="94" y="30" width="58" height="36" rx="2" fill="#13233A" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M118 66 h10 v4 h-10 Z" fill="#13233A"/><g stroke-width="2.4" stroke-linecap="round"><path d="M100 38 h14" stroke="#FF6FB5"/><path d="M104 44 h22" stroke="#7CF2C0"/><path d="M104 50 h16" stroke="#FFD23F"/><path d="M100 56 h10" stroke="#C4B5FD"/></g><g><rect x="132" y="44" width="4" height="14" fill="#7CF2C0"/><rect x="138" y="38" width="4" height="20" fill="#FFD23F"/><rect x="144" y="48" width="4" height="10" fill="#FF6FB5"/></g><circle cx="66" cy="34" r="9" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M56 32 C56 21 76 21 76 32 C70 28 62 28 56 32 Z" fill="#13233A" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M57 36 C56 42 76 42 75 36" stroke="#6b3f1f" stroke-width="3" fill="none"/><path d="M48 70 C46 48 84 44 86 60 L86 70 Z" fill="#FF6FB5" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M80 58 L96 62" stroke="#F2C9A0" stroke-width="5" stroke-linecap="round"/><rect x="52" y="54" width="0" height="0"/><rect x="156" y="56" width="10" height="14" rx="2" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M166 60 c4 0 4 6 0 6" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round" fill="none"/><path d="M44 70 C38 60 42 52 48 58" fill="#7CF2C0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="40" y="62" width="10" height="8" fill="#ec3013" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><g font-family="IBM Plex Mono" font-size="7" font-weight="700" fill="#13233A" opacity=".55"><text x="102" y="24">{ data }</text><text x="150" y="26">SQL</text></g></svg></div></li>
</ul>
</div>
</div>
</div>
</section>
<section class="border-b-4 border-black bg-white" aria-labelledby="t-chemin">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<h2 id="t-chemin" class="max-w-3xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Ce que j’ai appris en chemin.</h2>
<div class="mt-14 grid gap-10 lg:grid-cols-12">
<article class="relative border-4 border-black bg-[#FFD23F] p-8 shadow-[8px_8px_0px_#000000] lg:col-span-7">
<span class="absolute -right-4 -top-4 rotate-3 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Télécom Saint-Étienne · alternance</span>
<figure class="mb-6 overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]">
<img src="images/telecom-saint-etienne.jpeg" alt="Façade de Télécom Saint-Étienne" class="aspect-[16/7] w-full object-cover">
</figure>
<h3 class="text-3xl font-black leading-tight">Montée en charge : d’alternant à chef de projet digital</h3>
<p class="mt-4 text-lg font-medium leading-relaxed">Juste après mon BTS, je tente le concours Mines-Télécom réservé aux alternants. Mes bonnes notes de BTS et la lettre de recommandation de mon prof principal font la différence : j’entre à Télécom Saint-Étienne, en école d’ingénieur.</p>
<a href="https://alternance.imt.fr/" target="_blank" rel="noopener" class="mt-5 flex items-center gap-4 border-4 border-black bg-white p-3 shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-y-0.5">
<span class="grid h-14 w-20 shrink-0 place-items-center border-2 border-black bg-[#13233A] font-black text-white">IMT</span>
<span class="flex-1"><span class="block font-black">Concours Mines-Télécom, voie alternance</span><span class="block font-mono text-sm font-semibold">alternance.imt.fr ↗</span></span>
</a>
<p class="mt-4 text-lg font-medium leading-relaxed">Il me reste une étape, et pas des moindres : il me faut une entreprise ! Je la trouve chez un industriel américain, à Grenoble et Échirolles, comme chef de projet digital.</p>
<p class="mt-4 text-lg font-medium leading-relaxed">Pendant 3 ans, je pilote des projets à plusieurs centaines de milliers d’euros. Je découvre les outils de data engineering et d’IA, le suivi de production industrielle automatisé (SCADA, MES, IHM), la gestion de la qualité et la maintenance. Je permets aux équipes de terrain de suivre leur production en temps réel et de réagir plus vite quand une machine s’arrête.</p>
<p class="mt-4 text-lg font-bold">Autant vous dire que les machines qui tombent en panne au pire moment, je connais.</p>
</article>
<article class="relative border-4 border-black bg-[#C4B5FD] p-8 shadow-[8px_8px_0px_#000000] lg:col-span-5 lg:mt-16 lg:-rotate-1">
<span class="absolute -left-4 -top-4 -rotate-3 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Partir de zéro</span>
<h3 class="text-3xl font-black leading-tight">Des IA construites de A à Z</h3>
<p class="mt-4 text-lg font-medium leading-relaxed">À l’école, j’ai aussi créé des IA en partant de zéro, en Python. L’une reconnaît la voix et la transforme en texte. Une autre lit les caractères et reconnaît les formes (OCR).</p>
<ul class="mt-5 flex flex-wrap gap-2 font-mono text-sm font-semibold"><li class="border-2 border-black bg-white px-2 py-0.5">Python</li><li class="border-2 border-black bg-white px-2 py-0.5">NumPy</li><li class="border-2 border-black bg-white px-2 py-0.5">Pandas</li><li class="border-2 border-black bg-white px-2 py-0.5">scikit-learn</li><li class="border-2 border-black bg-white px-2 py-0.5">TensorFlow</li><li class="border-2 border-black bg-white px-2 py-0.5">PyTorch</li><li class="border-2 border-black bg-white px-2 py-0.5">OpenCV</li><li class="border-2 border-black bg-white px-2 py-0.5">Jupyter</li></ul>
<p class="mt-4 text-lg font-bold">C’est là que j’ai compris qu’on apprend vraiment en faisant.</p>
<div class="mt-6 border-t-4 border-black pt-5">
<p class="text-lg font-medium leading-relaxed">À l’école d’ingé, j’ai aussi touché à tout ce qu’on y voit : les différents types de bases de données, SQL ou NoSQL, les principaux langages, les réseaux, l’électronique, la gestion de projet lean et agile, et même la compta.</p>
<div class="mt-4 grid gap-3">
<div><p class="font-mono text-xs font-semibold uppercase">Bases de données</p><ul class="mt-1.5 flex flex-wrap gap-1.5 font-mono text-sm font-semibold"><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">SQL</li><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">MongoDB</li><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">Cassandra</li><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">Redis</li><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">Neo4j</li></ul></div>
<div><p class="font-mono text-xs font-semibold uppercase">Langages</p><ul class="mt-1.5 flex flex-wrap gap-1.5 font-mono text-sm font-semibold"><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">Java</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">SQL</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">Python</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">JavaScript</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">TypeScript</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">PHP</li></ul></div>
<div><p class="font-mono text-xs font-semibold uppercase">Et aussi</p><ul class="mt-1.5 flex flex-wrap gap-1.5 font-mono text-sm font-semibold"><li class="border-2 border-black bg-white px-2 py-0.5">Réseaux</li><li class="border-2 border-black bg-white px-2 py-0.5">Électronique</li><li class="border-2 border-black bg-white px-2 py-0.5">Lean</li><li class="border-2 border-black bg-white px-2 py-0.5">Agile</li><li class="border-2 border-black bg-white px-2 py-0.5">Gestion de projet</li><li class="border-2 border-black bg-white px-2 py-0.5">Comptabilité</li></ul></div>
</div>
</div>
<ul class="mt-6 grid grid-cols-5 gap-3" aria-hidden="true">
<li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-2"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="12" y="14" width="40" height="26" fill="#13233A"/><path d="M18 22 l6 4 -6 4 M28 32 h10" stroke="#7CF2C0"/><path d="M4 48 h56 l-4 -8 H8 Z" fill="#fff"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-3"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16 L32 32 L12 48 M52 16 L32 32 L52 48 M12 16 L52 16 M12 48 L52 48" stroke-width="2.5"/><circle cx="12" cy="16" r="5" fill="#FF6FB5"/><circle cx="12" cy="48" r="5" fill="#FF6FB5"/><circle cx="32" cy="32" r="6" fill="#FFD23F"/><circle cx="52" cy="16" r="5" fill="#7CF2C0"/><circle cx="52" cy="48" r="5" fill="#7CF2C0"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-3"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="32" cy="14" rx="18" ry="6" fill="#FFD23F"/><path d="M14 14 v36 c0 8 36 8 36 0 v-36"/><path d="M14 26 c0 8 36 8 36 0 M14 38 c0 8 36 8 36 0"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-2"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="14" y="6" width="36" height="16" fill="#fff"/><rect x="14" y="24" width="36" height="16" fill="#fff"/><rect x="14" y="42" width="36" height="16" fill="#fff"/><circle cx="22" cy="14" r="2" fill="#7CF2C0"/><circle cx="22" cy="32" r="2" fill="#ec3013"/><circle cx="22" cy="50" r="2" fill="#7CF2C0"/><path d="M30 14 h14 M30 32 h14 M30 50 h14"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000] -rotate-6"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M32 32 m0 0 c0 -3 4 -3 4 0 c0 6 -10 6 -10 0 c0 -10 16 -10 16 0 c0 14 -22 14 -22 0 c0 -18 28 -18 28 0 c0 22 -34 22 -34 0"/></svg></li>
</ul>
</article>
<article class="relative border-4 border-black bg-[#7CF2C0] p-8 shadow-[8px_8px_0px_#000000] lg:col-span-6">
<span class="absolute -bottom-4 right-6 rotate-2 border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold shadow-[3px_3px_0px_#000000]">3 mois · en anglais</span>
<h3 class="text-3xl font-black leading-tight">Direction Den Bosch, aux Pays-Bas</h3>
<p class="mt-4 text-lg font-medium leading-relaxed">Trois mois à ’s-Hertogenbosch, que tout le monde là-bas appelle Den Bosch, comme développeur full stack, à construire une solution RH, le tout en anglais. Les premiers jours, on s’accroche. Et puis on se lance. J’en suis revenu avec un bien meilleur anglais et une expérience que je n’oublierai pas.</p>
<ul class="mt-6 grid grid-cols-6 gap-2" aria-label="Souvenirs des Pays-Bas">
<li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-3" title="Moulin"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Moulin"><path d="M24 58 L28 26 H36 L40 58 Z" fill="#fff" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><rect x="29" y="46" width="6" height="12" fill="#C98404" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><g transform="translate(32 24)"><g stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"><path d="M0 0 L-4 -22 L4 -22 Z" fill="#ec3013"/><path d="M0 0 L22 -4 L22 4 Z" fill="#ec3013"/><path d="M0 0 L4 22 L-4 22 Z" fill="#ec3013"/><path d="M0 0 L-22 4 L-22 -4 Z" fill="#ec3013"/></g><circle r="3" fill="#13233A"/></g></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-2" title="Vélo"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Vélo"><g fill="none" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"><circle cx="16" cy="42" r="10" fill="#fff"/><circle cx="48" cy="42" r="10" fill="#fff"/><path d="M16 42 L28 26 L44 26 L48 42 M28 26 L32 42 L44 26 M44 26 L42 20 L48 19 M28 26 L26 21 L32 21"/></g><rect x="36" y="28" width="12" height="6" fill="#FF6FB5" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-2" title="Tulipe"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Tulipe"><path d="M32 30 V58" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" fill="none"/><path d="M32 46 C22 44 18 36 20 32 C26 34 30 38 32 46 Z M32 50 C42 48 46 40 44 36 C38 38 34 42 32 50 Z" fill="#7CF2C0" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><path d="M20 12 L26 20 L32 10 L38 20 L44 12 C46 24 42 32 32 32 C22 32 18 24 20 12 Z" fill="#ec3013" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-3" title="Sabot en bois"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Sabot en bois"><path d="M6 44 C6 34 18 30 30 30 L44 26 C54 24 60 32 58 40 C56 48 48 50 40 50 H14 C8 50 6 48 6 44 Z" fill="#FFD23F" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><path d="M40 30 C44 34 48 34 52 32" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" fill="none"/><path d="M16 38 h10" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-2" title="Fromage"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Fromage"><path d="M6 44 L36 18 L58 34 V50 H6 Z" fill="#FFD23F" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><path d="M6 44 H58" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><g fill="#F5B800" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"><circle cx="20" cy="47" r="0"/></g><circle cx="44" cy="40" r="4" fill="#F5B800" stroke="#13233A" stroke-width="2"/><circle cx="30" cy="36" r="3" fill="#F5B800" stroke="#13233A" stroke-width="2"/><circle cx="22" cy="47" r="2.5" fill="#F5B800" stroke="#13233A" stroke-width="2"/><circle cx="50" cy="46" r="2" fill="#F5B800" stroke="#13233A" stroke-width="2"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-2" title="Drapeau des Pays-Bas"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Drapeau des Pays-Bas"><path d="M10 8 V58" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" fill="none"/><g stroke="#13233A" stroke-width="3" stroke-linejoin="round"><rect x="12" y="10" width="42" height="10" fill="#AE1C28"/><rect x="12" y="20" width="42" height="10" fill="#fff"/><rect x="12" y="30" width="42" height="10" fill="#21468B"/></g></svg></li>
</ul>
</article>
<figure class="relative lg:col-span-6 lg:mt-10" aria-label="Den Bosch">
<div class="absolute inset-0 translate-x-4 translate-y-4 border-4 border-black bg-[#FF6FB5]" aria-hidden="true"></div>
<div class="relative aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="images/den-bosch.jpg" alt="Canal et maisons de Den Bosch" class="h-full w-full object-cover"></div>
<figcaption class="absolute -top-4 left-6 -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Den Bosch, mon QG pendant 3 mois</figcaption>
</figure>
</div>
</div>
</section>
<section class="mx-auto max-w-7xl px-5 py-20 lg:px-10" aria-labelledby="t-envie">
<div class="grid gap-10 lg:grid-cols-12">
<h2 id="t-envie" class="text-5xl font-black leading-[0.95] tracking-tighter lg:col-span-5">Tout le monde mérite sa place et la réussite.</h2>
<div class="grid gap-6 text-xl font-medium leading-relaxed lg:col-span-7">
<p>Chaque élève mérite une vraie machine pour apprendre, pas une salle informatique qui plante. Chaque prof mérite de passer son temps à enseigner, pas à réparer des postes.</p>
<p>J’ai donc construit Paillasse : un outil clé en main, prêt en 5 secondes, pensé par quelqu’un qui a été assis au fond de la salle de TP.</p>
</div>
</div>
<ul class="mt-16 grid gap-10 pb-6 md:grid-cols-3">
<li class="relative border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] md:-rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Élèves</span>
<p class="text-2xl font-black leading-tight">Une vraie VM Debian à soi, des TP qui se corrigent tout seuls, et le droit de se tromper sans rien casser.</p>
</li>
<li class="relative border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] md:translate-y-8">
<span class="absolute -left-4 -top-4 -rotate-3 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Profs</span>
<p class="mb-4 inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-lg font-black">« Pas de cours à préparer, enfin… très peu :) »</p>
<p class="text-2xl font-black leading-tight">Moins de dépannage, plus de pédagogie. Vous voyez qui bloque et vous aidez ceux qui en ont le plus besoin.</p>
</li>
<li class="relative border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] md:rotate-1">
<span class="absolute -bottom-4 right-6 rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">CPE</span>
<p class="text-2xl font-black leading-tight">Tous les apprenants sur un seul écran : qui est connecté, qui avance, qui décroche.</p>
</li>
</ul>
<div class="relative mt-20 grid items-center gap-10 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FF6FB5] sm:p-12 md:grid-cols-[auto_1fr]">
<div class="grid h-40 w-40 -rotate-6 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black shadow-[6px_6px_0px_#FFFFFF]" role="img" aria-label="Moins 40 décibels">
<span class="flex flex-col items-center gap-1 text-center"><span class="font-mono text-5xl font-semibold leading-none">−40</span><span class="text-2xl font-black leading-none">dB</span></span>
</div>
<div>
<p class="text-4xl font-black leading-tight tracking-tight sm:text-5xl">Vous devenez le roi du silence grâce à la fonction <span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
<p class="mt-6 text-2xl font-bold">Vos élèves n’auront plus que le droit de tousser ou de respirer&nbsp;!</p>
</div>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-couleurs">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Un choix, pas un hasard</p>
<h2 id="t-couleurs" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Pourquoi Paillasse est aussi coloré&nbsp;?</h2>
<div class="mt-8 grid gap-6 text-xl font-medium leading-relaxed lg:grid-cols-2">
<p>On a fait exprès de choisir des couleurs vives : jaune, vert menthe, rose, lavande, sur un fond blanc et des bordures noires épaisses. Le but est simple : que le regard de l’élève tombe tout de suite sur ce qui compte, la consigne, le terminal, la question, le bouton à cliquer.</p>
<p>Ce n’est pas une intuition de designer. La recherche en psychologie cognitive montre depuis longtemps que la couleur et le contraste guident l’attention, et que ce qui attire l’attention est mieux retenu. Mais elle montre aussi l’inverse : trop de stimulations visuelles dispersent. Paillasse est construit sur ces deux résultats à la fois.</p>
</div>
<div class="mt-16 grid gap-10 md:grid-cols-2">
<article class="relative flex flex-col border-4 border-black bg-[#FFD23F] p-6 shadow-[8px_8px_0px_#000000] md:-rotate-1">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Revue scientifique · 2013</span>
<h3 class="mt-2 text-2xl font-black leading-tight">La couleur capte l’attention, et l’attention fait la mémoire</h3>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Cette revue de la littérature explique que la couleur est un facteur clé pour capter l’attention, et que plus une information reçoit d’attention, plus elle a de chances d’être mémorisée. Les couleurs chaudes, comme le rouge et le jaune, attirent davantage le regard.</p>
<a href="https://pubmed.ncbi.nlm.nih.gov/23983571/" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">Dzulkifli &amp; Mustafar, The Malaysian Journal of Medical Sciences, 2013 ↗</a>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#7CF2C0] p-6 shadow-[8px_8px_0px_#000000] md:translate-y-8">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Psychologie de la mémoire · depuis 1933</span>
<h3 class="mt-2 text-2xl font-black leading-tight">Ce qui se distingue est mieux retenu</h3>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">C’est l’« effet von Restorff » : dans une série d’éléments semblables, celui qui se démarque par sa couleur, sa taille ou sa forme est mieux mémorisé. L’effet a été reproduit de nombreuses fois, on le retrouve chez l’enfant comme chez l’adulte âgé. C’est pour ça qu’une notion clé, chez nous, est toujours surlignée en couleur.</p>
<a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3607156/" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">Étude électrophysiologique de l’effet von Restorff (PMC) ↗</a>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#C4B5FD] p-6 shadow-[8px_8px_0px_#000000] ">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Recherche privée · Nielsen Norman Group</span>
<h3 class="mt-2 text-2xl font-black leading-tight">Peu de couleurs, bien placées</h3>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Le cabinet de référence en ergonomie web recommande de limiter le nombre de couleurs : cela renforce la hiérarchie visuelle et laisse moins de choses qui distraient. La couleur doit attirer l’œil vers ce que l’on veut mettre en avant, et toujours avec le même sens d’un écran à l’autre.</p>
<a href="https://www.nngroup.com/articles/color-enhance-design/" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">NN/g, « Using Color to Enhance Your Design », 2024 ↗</a>
</article>
</div>
<div class="mt-24">
<h3 class="max-w-4xl text-4xl font-black leading-tight tracking-tighter sm:text-5xl">La couleur qui capte : des exemples partout autour de nous</h3>
<p class="mt-4 max-w-3xl text-xl font-medium leading-relaxed">Ceux qui ont besoin qu’on les regarde, ou qu’on ne rate rien, ont tous fait le même choix : une couleur vive, utilisée avec une règle précise.</p>
<div class="mt-12 grid gap-10 md:grid-cols-2 lg:grid-cols-3">
<article class="relative flex flex-col border-4 border-black bg-[#FFD90F] p-6 shadow-[8px_8px_0px_#000000] md:-rotate-1">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Télévision · 1987</span>
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="images/couleurs/simpson.jpg" alt="La famille Simpson sur son canapé" class="h-full w-full object-cover"></figure>
<h4 class="mt-2 text-2xl font-black leading-tight">Les Simpson sont jaunes pour une raison</h4>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Matt Groening a choisi ce jaune proposé par la coloriste Gyorgyi Peluce pour une raison simple : dans les années 80, les gens zappaient. Il l’a expliqué à la BBC en 2007 : quand un éclair jaune passe pendant que tu changes de chaîne, tu sais que tu regardes les Simpson. Presque 40 ans plus tard, tout le monde reconnaît encore cette famille au premier coup d’œil.</p>
<a href="https://www.joe.co.uk/entertainment/matt-groening-explains-why-the-simpsons-are-yellow-366502" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">Groening à la BBC, cité par Joe.co.uk ↗</a>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#ec3013] text-white p-6 shadow-[8px_8px_0px_#000000] md:translate-y-8">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Marques</span>
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="images/couleurs/marques.jpg" alt="Logos de chaînes de restauration rapide" class="h-full w-full object-contain p-3"></figure>
<h4 class="mt-2 text-2xl font-black leading-tight">Une couleur, et on sait qui c’est</h4>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Le jaune et le rouge d’une chaîne de fast-food, le rouge d’une marque de soda, le bleu d’un réseau social : les grandes marques choisissent une ou deux couleurs vives et ne les quittent plus. Le but : être reconnues en une fraction de seconde, de loin, sur un écran ou au bord d’une route. Chez Paillasse, c’est pareil : le jaune veut toujours dire « regarde ici ».</p>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#FFD23F] p-6 shadow-[8px_8px_0px_#000000] md:rotate-1">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Aviation · règle FAA</span>
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="images/couleurs/cockpit.jpg" alt="Cockpit d’avion et ses écrans" class="h-full w-full object-cover"></figure>
<h4 class="mt-2 text-2xl font-black leading-tight">Dans le cockpit, le rouge est réservé</h4>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">La réglementation américaine de l’aviation (14 CFR 25.1322) impose le rouge pour les alertes qui demandent une action immédiate, et l’ambre ou le jaune pour les mises en garde. Elle limite leur usage ailleurs, car trop de rouge et de jaune usent leur pouvoir d’alerte : les pilotes finissent par ne plus y réagir. Notre règle « une couleur = une information » vient de là.</p>
<a href="https://www.ecfr.gov/current/title-14/chapter-I/subchapter-C/part-25/subpart-F/subject-group-ECFR3043e8882f16d6e/section-25.1322" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">14 CFR 25.1322 · eCFR ↗</a>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#7CF2C0] p-6 shadow-[8px_8px_0px_#000000] md:translate-y-8">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Médical</span>
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="images/couleurs/moniteur.webp" alt="Moniteur médical de surveillance" class="h-full w-full object-contain p-3"></figure>
<h4 class="mt-2 text-2xl font-black leading-tight">Le moniteur qui clignote au bon moment</h4>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Dans un service de soins, les moniteurs suivent aussi un code de couleurs normé (norme IEC 60601-1-8) : rouge pour une alarme de haute priorité, jaune pour une priorité moyenne. Une infirmière qui entre dans une chambre voit en un regard ce qui presse. Sur le tableau de bord du prof, c’est pareil : l’élève bloqué passe en rouge, la main levée en rose.</p>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#E6FF3F] p-6 shadow-[8px_8px_0px_#000000] md:-rotate-1">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Sécurité</span>
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="images/couleurs/gilet.jpg" alt="Gilet jaune et triangle de signalisation" class="h-full w-full object-cover"></figure>
<h4 class="mt-2 text-2xl font-black leading-tight">Le gilet jaune fluo</h4>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Les vêtements de haute visibilité (norme EN ISO 20471) sont jaune fluo, orange ou rouge fluo pour une raison : ces couleurs se détachent de presque tous les décors, de jour comme au crépuscule. On ne met pas du fluo partout sur un chantier : seulement sur ce qui doit absolument être vu.</p>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#C4B5FD] p-6 shadow-[8px_8px_0px_#000000] md:translate-y-8">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Ce qu’on en retient</span>
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="images/couleurs/paillasse.jpg" alt="L’IDE en ligne de Paillasse" class="h-full w-full object-cover object-left-top"></figure>
<h4 class="mt-2 text-2xl font-black leading-tight">Vif, mais rare et toujours au même sens</h4>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Tous ces exemples disent la même chose que la recherche : une couleur vive capte l’attention, à condition d’être réservée à l’essentiel et de garder toujours le même sens. C’est exactement la règle de Paillasse : fond blanc, et du jaune, du vert, du rose seulement là où l’élève doit regarder.</p>
</article>
</div>
</div>
<div class="mt-24 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FFD23F]">
<h3 class="text-3xl font-black">Nos trois règles de couleur</h3>
<ol class="mt-6 grid gap-6 md:grid-cols-3">
<li class="border-4 border-white p-5"><p class="font-mono text-3xl font-semibold text-[#FFD23F]">1</p><p class="mt-2 text-xl font-black">Fond blanc, toujours</p><p class="mt-2 font-semibold">Rien autour ne vient voler l’attention. L’écran reste calme.</p></li>
<li class="border-4 border-white p-5"><p class="font-mono text-3xl font-semibold text-[#7CF2C0]">2</p><p class="mt-2 text-xl font-black">Une couleur = une information</p><p class="mt-2 font-semibold">Vert : réussi. Rose : main levée. Rouge : bloqué ou examen. Jaune : à lire maintenant.</p></li>
<li class="border-4 border-white p-5"><p class="font-mono text-3xl font-semibold text-[#FF6FB5]">3</p><p class="mt-2 text-xl font-black">Lisible par tous</p><p class="mt-2 font-semibold">Texte noir sur couleur vive, contraste élevé, et jamais une information portée par la couleur seule.</p></li>
</ol>
<p class="mt-8 max-w-3xl text-lg font-semibold">Soyons honnêtes : aucune couleur n’empêche à elle seule un élève de regarder son téléphone. Mais un écran clair, où l’essentiel saute aux yeux, lui donne moins de raisons de décrocher. Le reste, c’est le travail du prof, et Paillasse est là pour lui libérer du temps.</p>
</div>
</div>
</section>
<section class="relative overflow-hidden border-t-4 border-black bg-[#ec3013]" aria-labelledby="t-vivant">
<span aria-hidden="true" class="etoile flotte pointer-events-none absolute right-[12%] top-10 h-14 w-14 bg-[#FFD23F] [--r:-8deg]"></span>
<div class="relative mx-auto flex max-w-7xl flex-col items-start gap-8 px-5 py-20 lg:px-10">
<h2 id="t-vivant" class="max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter text-white sm:text-6xl">Paillasse grandit avec vous.</h2>
<p class="max-w-2xl text-2xl font-bold text-white">Un bug, une idée, un TP qui manque ? Écrivez-moi directement. Je lis tout et je réponds.</p>
<div class="grid w-full gap-8 lg:grid-cols-12">
<form id="form-contact" action="#" method="post" class="grid gap-4 border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000] lg:col-span-8">
<div class="grid gap-4 sm:grid-cols-2">
<label class="grid gap-2 font-extrabold">Votre nom<input name="nom" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Votre e-mail<input type="email" name="email" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
</div>
<label class="grid gap-2 font-extrabold">Votre message<textarea name="message" rows="4" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none" placeholder="Il manque un TP sur…"></textarea></label>
<div class="flex flex-wrap items-center gap-4">
<button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#FFD23F] hover:bg-[#13233A]">Envoyer à Adam <span class="font-mono" aria-hidden="true">→</span></button>
<p id="contact-ok" class="border-4 border-black bg-[#7CF2C0] px-4 py-2 font-extrabold" hidden>Message envoyé, merci ! Je vous réponds vite.</p>
</div>
</form>
<div class="grid content-start gap-3 lg:col-span-4">
<p class="text-lg font-bold text-white">Ou écrivez-moi directement :</p>
<p class="border-4 border-black bg-white px-4 py-3 font-mono text-lg font-semibold">adam@belkacemi.me</p>
<button type="button" id="copier-mail" class="self-start border-4 border-black bg-[#FFD23F] px-4 py-2 font-extrabold shadow-[4px_4px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Copier l’adresse</button>
</div>
</div>
<script>
document.getElementById('copier-mail').addEventListener('click', function () {
var b = this;
navigator.clipboard.writeText('adam@belkacemi.me').then(function () { b.textContent = 'Adresse copiée ✓'; }, function () { b.textContent = 'adam@belkacemi.me'; });
});
document.getElementById('form-contact').addEventListener('submit', function (e) {
e.preventDefault(); this.reset(); document.getElementById('contact-ok').hidden = false;
});
</script>
</div>
</section>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-cockpit.html" class="hover:underline">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="hover:underline">Espace élève</a></li><li><a href="apercu-aide.html" class="hover:underline">Aide et tutoriels</a></li><li><a href="apercu-labs.html" class="hover:underline">Labs</a></li><li><a href="apercu-fonctionnalites.html" class="hover:underline">Fonctionnalités</a></li><li><a href="apercu-cours.html" class="hover:underline">Cours gratuits</a></li><li><a href="apercu-bibliotheque.html" class="hover:underline">Bibliothèque</a></li><li><a href="apercu-ide.html" class="hover:underline">IDE en ligne</a></li><li><a href="apercu-generateur.html" class="hover:underline">Générateur de TD</a></li><li><a href="apercu-lab-web.html" class="hover:underline">Lab web</a></li><li><a href="apercu-tarifs.html" class="hover:underline">Tarifs</a></li><li><a href="apercu-pourquoi.html" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-etablissements.html" class="hover:underline">Équiper une classe</a></li><li><a href="apercu-connexion.html" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="apercu-legal.html#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="apercu-legal.html#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,188 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tarifs · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="Apercu%20accueil%20Blade.html" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="apercu-fonctionnalites.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cockpit.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="apercu-vie-scolaire.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="apercu-academie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cours.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="apercu-labs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="apercu-lab-web.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="apercu-ide.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="apercu-maison.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-bibliotheque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="apercu-banque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="apercu-generateur.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="apercu-td-imprimable.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="apercu-quiz-projection.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-sujet.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="apercu-devoirs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="apercu-correction.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="apercu-fiche-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="apercu-messagerie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="apercu-export.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="apercu-aide.html" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="apercu-etablissements.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="apercu-tarifs.html" aria-current="page" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="apercu-pourquoi.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="apercu-connexion.html" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="apercu-inscription.html" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div class="relative mx-auto grid max-w-7xl items-center gap-10 px-5 pb-16 pt-14 lg:grid-cols-12 lg:px-10 lg:pt-20">
<div class="lg:col-span-7">
<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]">Tarifs HT</p>
<h1 class="mt-8 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Les cours sont gratuits. Les VM coûtent moins qu’un manuel.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Une licence Paillasse pour un élève coûte 24 € par an : QCM, TP sur VM, suivi et mode examen compris.</p>
</div>
<figure class="mx-auto w-full max-w-md lg:col-span-5 lg:max-w-none"><svg viewBox="0 0 500 470" class="h-auto w-full" role="img" aria-label="Un ordinateur portable, avec une pièce de 0 €, un billet gratuit et une carte bancaire barrée">
<defs><pattern id="tp" width="22" height="22" patternUnits="userSpaceOnUse"><circle cx="5" cy="5" r="2.6" fill="#000"/></pattern></defs>
<rect x="290" y="270" width="210" height="200" fill="url(#tp)"/><rect x="0" y="330" width="150" height="140" fill="url(#tp)"/>
<circle cx="118" cy="120" r="64" fill="#FF3E9A"/>
<g transform="translate(190 300) rotate(-10) scale(.5)">
<rect x="-118" y="-100" width="236" height="150" fill="#000" transform="translate(8 8)"/>
<rect x="-118" y="-100" width="236" height="150" fill="#13233A" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/>
<rect x="-104" y="-86" width="208" height="122" fill="#35E0E8" stroke="#000" stroke-width="4"/>
<path d="M-80 -60 h60 M-80 -40 h110 M-80 -20 h80 M-80 0 h120" stroke="#000" stroke-width="8" stroke-linecap="round"/>
<path d="M-150 50 H150 L136 72 H-136 Z" fill="#fff" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><rect x="-26" y="54" width="52" height="7" fill="#000"/>
</g>
<g transform="translate(110 120) rotate(-14)"><circle r="44" fill="#000" transform="translate(5 5)"/><circle r="44" fill="#FFD23F" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><circle r="33" fill="none" stroke="#000" stroke-width="3" stroke-dasharray="4 5"/><text y="12" text-anchor="middle" font-family="IBM Plex Mono,monospace" font-weight="600" font-size="32" fill="#000">0€</text></g>
<g transform="translate(360 405) rotate(8)"><rect x="-74" y="-36" width="148" height="72" fill="#000" transform="translate(6 6)"/><rect x="-74" y="-36" width="148" height="72" fill="#7CF2C0" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><rect x="-62" y="-24" width="124" height="48" fill="none" stroke="#000" stroke-width="3"/><text x="0" y="7" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="20" fill="#000">GRATUIT</text></g>
<g transform="translate(400 110) rotate(-12)"><rect x="-44" y="-28" width="88" height="56" fill="#C4B5FD" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><rect x="-44" y="-16" width="88" height="11" fill="#000"/><rect x="-32" y="4" width="18" height="13" fill="#FFD23F" stroke="#000" stroke-width="3"/><path d="M-50 32 L50 -32" stroke="#000" stroke-width="14" stroke-linecap="round"/><path d="M-50 32 L50 -32" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/></g>
<path d="M60 250 l6 13 14 2 -10 10 2 14 -12 -7 -12 7 2 -14 -10 -10 14 -2 z" fill="#7CF2C0" stroke="#000" stroke-width="4" stroke-linejoin="round"/>
<path d="M455 250 l4 9 10 1 -7 7 2 10 -9 -5 -9 5 2 -10 -7 -7 10 -1 z" fill="#FF6FB5" stroke="#000" stroke-width="3" stroke-linejoin="round"/>
<path d="M110 430 l14 -14 14 14 14 -14 14 14 14 -14 14 14" fill="none" stroke="#000" stroke-width="5" stroke-linejoin="round"/>
</svg></figure>
</div>
</section>
<section class="mx-auto max-w-7xl px-5 py-20 lg:px-10" aria-label="Offres">
<ul class="grid gap-10 md:grid-cols-2 xl:grid-cols-4">
<li class="relative flex flex-col border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] ">
<h2 class="text-3xl font-black">Découverte</h2>
<p class="mt-1 font-semibold">Élèves, curieux, enseignants</p>
<p class="mt-6 flex items-baseline gap-2"><span class="font-mono text-5xl font-semibold">0 €</span><span class="font-bold"></span></p>
<p class="mt-1 font-mono text-sm font-semibold">pour toujours</p>
<ul class="mt-6 flex-1 space-y-2 border-t-4 border-black pt-5 font-semibold"><li class="flex gap-2"><span aria-hidden="true">■</span><span>Les 99 cours : CM, TD, QCM</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Corrections expliquées</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>1 lab d’essai de 30 min par jour</span></li></ul>
<a href="apercu-cours.html" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none mt-8 self-start">Lire les cours</a>
</li>
<li class="relative flex flex-col border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] xl:translate-y-8">
<h2 class="text-3xl font-black">Enseignant</h2>
<p class="mt-1 font-semibold">Une classe, sans passer par l’intendance</p>
<p class="mt-6 flex items-baseline gap-2"><span class="font-mono text-5xl font-semibold">29 €</span><span class="font-bold">/ mois</span></p>
<p class="mt-1 font-mono text-sm font-semibold">ou 290 € / an · jusqu’à 35 élèves</p>
<ul class="mt-6 flex-1 space-y-2 border-t-4 border-black pt-5 font-semibold"><li class="flex gap-2"><span aria-hidden="true">■</span><span>Les 59 TP sur VM</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Correction automatique</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Suivi des élèves</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Mode examen</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Cockpit prof, messagerie, correction assistée</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>15 h de VM par élève et par mois</span></li></ul>
<a href="apercu-paiement.html" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none mt-8 self-start">Souscrire</a>
</li>
<li class="relative flex flex-col border-4 border-black bg-[#FFD23F] p-7 shadow-[10px_10px_0px_#000000] xl:-rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-[#ec3013] px-3 py-1 text-sm font-extrabold text-white shadow-[3px_3px_0px_#000000]">Le plus choisi</span>
<h2 class="text-3xl font-black">Établissement</h2>
<p class="mt-1 font-semibold">Lycée, BTS, IUT, université, école</p>
<p class="mt-6 flex items-baseline gap-2"><span class="font-mono text-5xl font-semibold">24 €</span><span class="font-bold">/ élève / an</span></p>
<p class="mt-1 font-mono text-sm font-semibold">à partir de 60 élèves · 1 440 € / an</p>
<ul class="mt-6 flex-1 space-y-2 border-t-4 border-black pt-5 font-semibold"><li class="flex gap-2"><span aria-hidden="true">■</span><span>Tout Enseignant, classes illimitées</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Espace vie scolaire : CPE, direction, intendance</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Export Pronote / ENT</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Tableau de bord académie sur devis</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Espace administrateur</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Séances réservées, VM prêtes 10 min avant</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Bibliothèque partagée entre collègues</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Paiement par mandat administratif</span></li></ul>
<a href="apercu-etablissements.html" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none mt-8 self-start">Demander un devis</a>
</li>
<li class="relative flex flex-col border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] xl:translate-y-8">
<h2 class="text-3xl font-black">Région et OF</h2>
<p class="mt-1 font-semibold">Académies, régions, organismes de formation</p>
<p class="mt-6 flex items-baseline gap-2"><span class="font-mono text-5xl font-semibold">Devis</span><span class="font-bold"></span></p>
<p class="mt-1 font-mono text-sm font-semibold">à partir de 500 élèves ou stagiaires</p>
<ul class="mt-6 flex-1 space-y-2 border-t-4 border-black pt-5 font-semibold"><li class="flex gap-2"><span aria-hidden="true">■</span><span>Tout Établissement</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Capacité réservée</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Suivi par centre ou par site</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Accompagnement au déploiement</span></li></ul>
<a href="apercu-etablissements.html" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none mt-8 self-start">Nous contacter</a>
</li>
</ul>
</section>
<section class="border-y-4 border-black bg-[#13233A] text-white" aria-labelledby="t-api">
<div class="mx-auto grid max-w-7xl items-center gap-8 px-5 py-14 lg:grid-cols-12 lg:px-10">
<h2 id="t-api" class="text-4xl font-black tracking-tighter lg:col-span-4">API et MCP pour développeurs</h2>
<p class="text-lg font-semibold lg:col-span-5">19 € HT par mois avec 100 h de VM incluses, puis 0,09 € HT l’heure. Quotas par jeton. Les classes restent toujours prioritaires sur la capacité.</p>
<a href="apercu-etablissements.html" class="inline-flex items-center gap-3 self-start justify-self-start border-4 border-white bg-[#FFD23F] px-5 py-3 font-extrabold text-black shadow-[4px_4px_0px_#FF6FB5] lg:col-span-3">Obtenir une clé</a>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-faq">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">FAQ</p>
<h2 id="t-faq" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vos questions, nos réponses.</h2>
<p class="mt-4 max-w-2xl text-xl font-medium">Intendance, données, pédagogie, technique. Une question manque&nbsp;? <a href="mailto:adam@belkacemi.me" class="font-extrabold underline underline-offset-4">adam@belkacemi.me</a></p>
<div class="mt-12 grid gap-x-8 gap-y-14 lg:grid-cols-2">
<div class=""><h3 class="inline-block border-4 border-black bg-[#FFD23F] px-4 py-2 text-2xl font-black shadow-[4px_4px_0px_#000000] -rotate-1">Achat et intendance</h3><ul class="mt-6 grid gap-4"><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Bon de commande et Chorus Pro ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui. Nous envoyons un devis, vous émettez un bon de commande, la facture arrive sur Chorus Pro. Paiement par mandat administratif à 30 jours.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Faut-il une carte bancaire pour essayer ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Non. Un enseignant crée sa classe gratuitement, sans CB. En échange, on vous demande juste un coup de pouce : vos remarques, ou votre aide pour faire souscrire votre établissement.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Une licence couvre quelle période ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Une licence suit l’année scolaire, de septembre à août. Les comptes archivés sont supprimés 90 jours après la fin d’année.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Les élèves qui redoublent ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Ils repartent sur la licence de l’année suivante. Leur historique (notes, observations, progression) peut être conservé si l’établissement le demande.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Peut-on payer par région ou par académie ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui, un devis groupé est possible pour plusieurs établissements. Écrivez-nous pour en parler.</p></details></li></ul></div>
<div class="lg:translate-y-10"><h3 class="inline-block border-4 border-black bg-[#7CF2C0] px-4 py-2 text-2xl font-black shadow-[4px_4px_0px_#000000] rotate-1">Élèves et données</h3><ul class="mt-6 grid gap-4"><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Où sont hébergées les données ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">En France, chez Scaleway, sur des serveurs situés à Strasbourg. Rien ne sort de l’Union européenne.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Et le RGPD ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Nous collectons le minimum : nom, prénom, classe, résultats. Pas de publicité, pas de revente, pas de traceurs tiers. Un contrat de sous-traitance est fourni à l’établissement.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Les élèves mineurs peuvent-ils s’inscrire seuls ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Non. C’est l’enseignant qui crée la classe et distribue les identifiants. L’élève n’a pas besoin d’adresse e-mail.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Un élève peut-il travailler chez lui ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui, depuis n’importe quel navigateur, sur PC ou téléphone. Cours, QCM, IDE et devoirs maison restent accessibles toute l’année.</p></details></li></ul></div>
<div class=""><h3 class="inline-block border-4 border-black bg-[#C4B5FD] px-4 py-2 text-2xl font-black shadow-[4px_4px_0px_#000000] -rotate-1">Pédagogie</h3><ul class="mt-6 grid gap-4"><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Les cours suivent-ils les programmes officiels ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui. Ils sont construits à partir des référentiels officiels (BO, arrêtés, fiches RNCP), du SNT au master. Chaque CM, TD et TP indique les compétences visées.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Puis-je modifier un cours ou un sujet ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui. Tout se duplique et se modifie : CM, questions, TD, sujets d’examen. Vos versions restent dans votre bibliothèque.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Comment marche le mode examen ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">L’élève passe en plein écran. Si sa souris sort de la fenêtre ou s’il change d’onglet, vous le voyez en direct, avec l’heure et la durée.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Les TD s’impriment-ils ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui. Chaque TD se télécharge en PDF avec ses étapes et ses cases à remplir. La correction s’imprime à part, pour vous.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Et la fonction « Lever la main » ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">L’élève lève la main depuis son écran, vous voyez la file d’attente. Fini les « Madame ! Monsieur ! » en boucle.</p></details></li></ul></div>
<div class="lg:translate-y-10"><h3 class="inline-block border-4 border-black bg-[#FF6FB5] px-4 py-2 text-2xl font-black shadow-[4px_4px_0px_#000000] rotate-1">Technique</h3><ul class="mt-6 grid gap-4"><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Faut-il installer quelque chose ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Non. Tout se passe dans le navigateur : terminal Debian, IDE, navigateur relié à la VM. Rien à installer sur les postes du lycée.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Et si un élève dépasse 15 h de VM ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Le compteur est partagé par la classe : un élève peut consommer plus si d’autres consomment moins. Au-delà, les TP restent ouverts en lecture.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Le réseau du lycée bloque souvent tout…<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Paillasse passe par une connexion web chiffrée classique, comme n’importe quel site. En cas de souci, on vous aide à le régler avec votre administrateur réseau.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Une VM peut-elle casser le réseau du lycée ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Non. Chaque VM est isolée chez nous. L’élève peut tout casser dedans, il la réinitialise en un clic.</p></details></li></ul></div>
</div>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-label="Lever la main">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="relative grid items-center gap-10 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FF6FB5] sm:p-12 md:grid-cols-[auto_1fr]">
<div class="grid h-40 w-40 -rotate-6 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black shadow-[6px_6px_0px_#FFFFFF]" role="img" aria-label="Moins 40 décibels"><span class="flex flex-col items-center gap-1 text-center"><span class="font-mono text-5xl font-semibold leading-none">−40</span><span class="text-2xl font-black leading-none">dB</span></span></div>
<div>
<p class="text-4xl font-black leading-tight tracking-tight sm:text-5xl">Vous devenez le roi du silence grâce à la fonction <span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
<p class="mt-6 text-2xl font-bold">Vos élèves n’auront plus que le droit de tousser ou de respirer&nbsp;!</p>
</div>
</div>
</div>
</section>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-cockpit.html" class="hover:underline">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="hover:underline">Espace élève</a></li><li><a href="apercu-aide.html" class="hover:underline">Aide et tutoriels</a></li><li><a href="apercu-labs.html" class="hover:underline">Labs</a></li><li><a href="apercu-fonctionnalites.html" class="hover:underline">Fonctionnalités</a></li><li><a href="apercu-cours.html" class="hover:underline">Cours gratuits</a></li><li><a href="apercu-bibliotheque.html" class="hover:underline">Bibliothèque</a></li><li><a href="apercu-ide.html" class="hover:underline">IDE en ligne</a></li><li><a href="apercu-generateur.html" class="hover:underline">Générateur de TD</a></li><li><a href="apercu-lab-web.html" class="hover:underline">Lab web</a></li><li><a href="apercu-tarifs.html" class="hover:underline">Tarifs</a></li><li><a href="apercu-pourquoi.html" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-etablissements.html" class="hover:underline">Équiper une classe</a></li><li><a href="apercu-connexion.html" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="apercu-legal.html#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="apercu-legal.html#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,370 @@
{{-- resources/views/accueil.blade.php --}}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paillasse — Une vraie machine Linux pour chaque élève</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" @if(request()->routeIs('fonctionnalites')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" @if(request()->routeIs('cockpit')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" @if(request()->routeIs('espace.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" @if(request()->routeIs('vie.scolaire')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" @if(request()->routeIs('academie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" @if(request()->routeIs('labs.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" @if(request()->routeIs('labs.web')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" @if(request()->routeIs('ide')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" @if(request()->routeIs('maison')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" @if(request()->routeIs('bibliotheque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" @if(request()->routeIs('banque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" @if(request()->routeIs('generateur')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" @if(request()->routeIs('td.imprimable')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" @if(request()->routeIs('quiz.projection')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" @if(request()->routeIs('sujet.creer')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" @if(request()->routeIs('devoirs')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" @if(request()->routeIs('correction')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" @if(request()->routeIs('fiche.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" @if(request()->routeIs('messagerie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" @if(request()->routeIs('export.ent')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" @if(request()->routeIs('etablissements')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" @if(request()->routeIs('tarifs')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" @if(request()->routeIs('pourquoi')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
{{-- HERO --}}
<section class="relative overflow-hidden">
{{-- décor flottant --}}
<div aria-hidden="true" class="pointer-events-none absolute inset-0">
<span class="etoile flotte absolute left-[46%] top-10 h-12 w-12 bg-[#FFD23F] [--r:14deg]"></span>
<span class="flotte absolute right-[6%] top-[46%] h-7 w-7 rotate-12 border-4 border-black bg-[#FF6FB5] [--r:12deg] [animation-delay:1s]"></span>
<span class="flotte absolute bottom-16 left-[38%] h-9 w-9 rounded-full border-4 border-black bg-[#7CF2C0] [animation-delay:2s]"></span>
<span class="zigzag absolute bottom-10 left-5 h-4 w-40 lg:left-10"></span>
<span class="absolute right-[40%] top-[62%] hidden h-5 w-5 border-4 border-black lg:block"></span>
</div>
<div class="relative mx-auto grid max-w-7xl gap-14 px-5 pb-24 pt-14 lg:grid-cols-12 lg:px-10 lg:pt-20">
<div class="lg:col-span-7">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Du lycée au master · rien à installer</p>
<h1 class="mt-8 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-[7.5rem]">
Une vraie<br>
machine Linux<br>
pour <span class="relative inline-block -rotate-1 border-4 border-black bg-[#C4B5FD] px-3 shadow-[6px_6px_0px_#000000]">chaque</span><br>
élève.
</h1>
<p class="mt-10 max-w-xl text-xl font-medium leading-relaxed text-black">
Debian ou l’IDE s’ouvre dans le navigateur en moins de 5&nbsp;secondes. Les labs se corrigent tout seuls, et vous voyez qui avance, qui bloque, qui lève la main.
</p>
<div class="mt-10 flex flex-wrap items-center gap-4">
<a href="{{ route('labs.essai') }}" class="group flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">
Lancer un lab d'essai
<span class="font-mono transition-transform group-hover:translate-x-1" aria-hidden="true">→</span>
</a>
<a href="{{ route('labs.index') }}" class="border-4 border-black bg-white px-6 py-4 text-lg font-extrabold hover:bg-[#7CF2C0]">Voir les labs</a>
</div>
</div>
{{-- collage de droite --}}
<div class="relative min-h-[560px] lg:col-span-5">
<div class="absolute left-0 top-4 h-[360px] w-[88%] translate-x-4 translate-y-4 border-4 border-black bg-[#FF6FB5]" aria-hidden="true"></div>
<figure class="absolute left-0 top-4 h-[360px] w-[88%] overflow-hidden border-4 border-black bg-white">
<div class="flex h-full flex-col" aria-label="Classe en direct : 12 élèves, leur étape et leurs alertes">
<div class="flex items-center justify-between gap-3 border-b-4 border-black bg-[#FFD23F] px-4 py-2"><span class="font-black">2nde NSI · en direct</span><span class="font-mono text-xs font-semibold">24 élèves connectés</span></div>
<ul class="grid flex-1 grid-cols-3 gap-2 p-3 sm:grid-cols-4">
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#7CF2C0] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-[#FFD23F] text-sm font-black">L</span><span class="text-sm font-extrabold leading-none">Léa</span><span class="font-mono text-[11px] font-semibold leading-none">5/5 ✓</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#C4B5FD] text-sm font-black">Y</span><span class="text-sm font-extrabold leading-none">Yanis</span><span class="font-mono text-[11px] font-semibold leading-none">étape 3</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#FF6FB5] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rotate-12 bg-white text-sm font-black">N</span><span class="text-sm font-extrabold leading-none">Nora</span><span class="font-mono text-[11px] font-semibold leading-none">main levée</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-[#7CF2C0] text-sm font-black">T</span><span class="text-sm font-extrabold leading-none">Tom</span><span class="font-mono text-[11px] font-semibold leading-none">étape 4</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#C4B5FD] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#FFD23F] text-sm font-black">I</span><span class="text-sm font-extrabold leading-none">Inès</span><span class="font-mono text-[11px] font-semibold leading-none">étape 2</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#ec3013] text-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-white text-black text-sm font-black">S</span><span class="text-sm font-extrabold leading-none">Sami</span><span class="font-mono text-[11px] font-semibold leading-none">bloqué 9 min</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#7CF2C0] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black -rotate-6 bg-[#FF6FB5] text-sm font-black">C</span><span class="text-sm font-extrabold leading-none">Chloé</span><span class="font-mono text-[11px] font-semibold leading-none">5/5 ✓</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#7CF2C0] text-sm font-black">A</span><span class="text-sm font-extrabold leading-none">Adam</span><span class="font-mono text-[11px] font-semibold leading-none">étape 3</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#FFD23F] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-white text-sm font-black">M</span><span class="text-sm font-extrabold leading-none">Maël</span><span class="font-mono text-[11px] font-semibold leading-none">étape 4</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rotate-6 bg-[#FF6FB5] text-sm font-black">J</span><span class="text-sm font-extrabold leading-none">Jade</span><span class="font-mono text-[11px] font-semibold leading-none">étape 1</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#FFD23F] text-sm font-black">H</span><span class="text-sm font-extrabold leading-none">Hugo</span><span class="font-mono text-[11px] font-semibold leading-none">étape 3</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#7CF2C0] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-[#C4B5FD] text-sm font-black">L</span><span class="text-sm font-extrabold leading-none">Lina</span><span class="font-mono text-[11px] font-semibold leading-none">5/5 ✓</span></li>
</ul>
</div>
</figure>
<span class="absolute -right-2 top-0 rotate-6 border-2 border-black bg-[#7CF2C0] px-3 py-1 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">&lt; 5 s</span>
<div class="absolute bottom-0 right-0 w-[92%] -rotate-2 border-4 border-black bg-[#13233A] font-mono text-sm text-white shadow-[8px_8px_0px_#FFD23F]" aria-label="Terminal élève, démonstration xterm.js">
<div class="flex items-center gap-2 border-b-4 border-black bg-[#0d192b] px-4 py-2">
<span class="h-3 w-3 bg-[#ec3013]"></span><span class="h-3 w-3 bg-[#FFD23F]"></span><span class="h-3 w-3 bg-[#7CF2C0]"></span>
<span class="ml-2 text-xs text-white">lea@debian · xterm.js</span>
</div>
<div id="xterm-hero" class="h-[170px] bg-[#13233A] p-2"></div>
</div>
<div class="absolute left-0 bottom-48 rotate-3 border-4 border-black bg-[#FFD23F] px-4 py-3 shadow-[5px_5px_0px_#000000] lg:-left-8">
<p class="font-extrabold">Nora lève la main</p>
<p class="text-sm font-medium">bloquée depuis 8 min</p>
</div>
</div>
</div>
</section>
{{-- BANDEAU FORMATIONS --}}
<div class="grid grid-cols-2 border-y-4 border-black text-lg font-extrabold sm:grid-cols-3 lg:grid-cols-5">
<p class="border-b-4 border-r-4 border-black bg-[#FFD23F] px-6 py-5 lg:border-b-0">Lycée NSI</p>
<p class="border-b-4 border-black bg-white px-6 py-5 sm:border-r-4 lg:border-b-0">BTS SIO · SISR et SLAM</p>
<p class="border-b-4 border-r-4 border-black bg-[#7CF2C0] px-6 py-5 sm:border-r-0 lg:border-b-0 lg:border-r-4">BTS CIEL</p>
<p class="border-b-4 border-black bg-white px-6 py-5 sm:border-b-0 sm:border-r-4">BUT · Licence pro</p>
<p class="col-span-2 border-black bg-[#C4B5FD] px-6 py-5 sm:col-span-1">Master · École d’ingé</p>
</div>
{{-- PRÉSENTATION --}}
<section class="relative overflow-hidden bg-white" aria-labelledby="titre-presentation">
<span aria-hidden="true" class="etoile flotte pointer-events-none absolute right-[8%] top-16 h-16 w-16 bg-[#FF6FB5] [--r:-10deg]"></span>
<span aria-hidden="true" class="zigzag pointer-events-none absolute bottom-6 left-10 h-4 w-48"></span>
<div class="relative mx-auto max-w-7xl px-5 pb-32 pt-24 lg:px-10">
<div class="grid gap-8 lg:grid-cols-12">
<h2 id="titre-presentation" class="text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl lg:col-span-8 xl:text-7xl">
Trois choses que votre salle info ne fait pas.
</h2>
<p class="self-end text-lg font-medium lg:col-span-4">
Chaque élève a sa propre VM Debian, sur un cloud hébergé en France. Rien ne s'installe sur les postes du lycée.
</p>
</div>
<ul class="mt-20 grid gap-12 lg:grid-cols-3 lg:gap-8">
<li class="relative min-h-[340px] xl:aspect-square border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] transition-transform hover:-translate-y-1 lg:-rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Élève</span>
<div class="flex h-full flex-col justify-between gap-8 pb-4">
<span class="font-mono text-5xl font-semibold xl:text-6xl">01</span>
<div>
<h3 class="text-2xl font-black leading-tight tracking-tight xl:text-3xl">Un terminal en moins de 5&nbsp;secondes</h3>
<p class="mt-3 text-base font-medium">Des VM déjà démarrées attendent en réserve. L'élève clique, la console s'ouvre, même sur un vieux PC ou un Chromebook.</p>
</div>
</div>
</li>
<li class="relative min-h-[340px] xl:aspect-square border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] transition-transform hover:-translate-y-1 lg:translate-y-12">
<span class="absolute -left-4 -top-4 -rotate-3 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Correction</span>
<div class="flex h-full flex-col justify-between gap-8 pb-4">
<span class="self-end font-mono text-5xl font-semibold xl:text-6xl">02</span>
<div>
<h3 class="text-2xl font-black leading-tight tracking-tight xl:text-3xl">Les labs se corrigent tout seuls</h3>
<p class="mt-3 text-base font-medium">Chaque étape est vérifiée directement dans la VM. L'élève sait tout de suite s'il a réussi, avec un indice s'il bloque.</p>
</div>
</div>
</li>
<li class="relative min-h-[340px] xl:aspect-square border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] transition-transform hover:-translate-y-1 lg:rotate-1">
<span class="absolute -bottom-4 right-6 rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Enseignant</span>
<div class="flex h-full flex-col justify-between gap-8 pb-4">
<span class="font-mono text-5xl font-semibold xl:text-6xl">03</span>
<div>
<h3 class="text-2xl font-black leading-tight tracking-tight xl:text-3xl">Toute la classe sur un écran</h3>
<p class="mt-3 text-base font-medium">Une tuile par élève : son étape, sa main levée, son blocage. Vous ouvrez sa console pour l'aider sans vous déplacer.</p>
</div>
</div>
</li>
</ul>
</div>
</section>
{{-- SÉANCE EN DIRECT --}}
<section class="border-t-4 border-black bg-[#FFD23F]" aria-labelledby="titre-seance">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-24 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Séance en direct</p>
<h2 id="titre-seance" class="mt-8 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vous voyez qui bloque avant qu'il abandonne.</h2>
<p class="mt-8 max-w-md text-lg font-medium">Une tuile par élève : son étape, sa main levée, le temps passé sans avancer. Un clic ouvre sa console en lecture, un second vous donne la main.</p>
<ul class="mt-8 flex flex-wrap gap-3 text-sm font-extrabold">
<li class="border-2 border-black bg-white px-3 py-1">Lecture de la console</li>
<li class="border-2 border-black bg-[#7CF2C0] px-3 py-1">Prise de main</li>
<li class="border-2 border-black bg-[#ec3013] px-3 py-1 text-white">Mode examen</li>
</ul>
<div class="mt-8 flex flex-wrap gap-4">
<a href="{{ route('suivi') }}" class="inline-flex items-center gap-3 border-4 border-black bg-black px-5 py-3 font-extrabold text-white shadow-[4px_4px_0px_#ec3013] hover:bg-[#ec3013]">Voir le suivi d’une classe <span class="font-mono" aria-hidden="true">→</span></a>
<a href="{{ route('examen') }}" class="inline-flex items-center border-4 border-black bg-white px-5 py-3 font-extrabold hover:bg-[#FF6FB5]">Essayer le mode examen</a>
</div>
</div>
<div class="relative lg:col-span-7">
<div class="border-4 border-black bg-white p-5 shadow-[10px_10px_0px_#000000]">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-4 border-black pb-4">
<p class="text-xl font-black">2nde NSI · Groupe B</p>
<p class="font-mono text-sm font-semibold">Premiers pas dans le shell · 24 élèves</p>
</div>
<ul class="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-4">
<li class="border-2 border-black bg-[#7CF2C0] p-3"><p class="font-extrabold">Léa M.</p><p class="font-mono text-sm">étape 5/5 ✓</p></li>
<li class="border-2 border-black bg-white p-3"><p class="font-extrabold">Yanis B.</p><p class="font-mono text-sm">étape 3/5</p></li>
<li class="-rotate-2 border-4 border-black bg-[#FF6FB5] p-3 shadow-[4px_4px_0px_#000000]"><p class="font-extrabold">Nora K.</p><p class="font-mono text-sm">main levée</p></li>
<li class="border-2 border-black bg-white p-3"><p class="font-extrabold">Tom R.</p><p class="font-mono text-sm">étape 4/5</p></li>
<li class="border-2 border-black bg-white p-3"><p class="font-extrabold">Inès D.</p><p class="font-mono text-sm">étape 2/5</p></li>
<li class="border-2 border-black bg-[#ec3013] p-3 text-white"><p class="font-extrabold">Sami L.</p><p class="font-mono text-sm">bloqué 9 min</p></li>
<li class="border-2 border-black bg-[#7CF2C0] p-3"><p class="font-extrabold">Chloé P.</p><p class="font-mono text-sm">étape 5/5 ✓</p></li>
<li class="border-2 border-black bg-white p-3"><p class="font-extrabold">Adam F.</p><p class="font-mono text-sm">étape 3/5</p></li>
</ul>
</div>
<span aria-hidden="true" class="etoile flotte pointer-events-none absolute -right-3 -top-6 h-14 w-14 bg-[#C4B5FD] [--r:20deg]"></span>
</div>
</div>
</section>
{{-- AJOUTER LES ÉLÈVES --}}
<section class="relative overflow-hidden border-t-4 border-black bg-white" aria-labelledby="titre-eleves">
<span aria-hidden="true" class="flotte pointer-events-none absolute left-[55%] top-12 h-8 w-8 rounded-full border-4 border-black bg-[#FFD23F]"></span>
<div class="relative mx-auto max-w-7xl px-5 py-24 lg:px-10">
<h2 id="titre-eleves" class="max-w-3xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Toute la classe connectée en un quart d'heure.</h2>
<ol class="mt-16 grid border-4 border-black md:grid-cols-2 lg:grid-cols-5">
<li class="border-b-4 border-black bg-[#C4B5FD] p-6 lg:border-b-0 lg:border-r-4"><span class="font-mono text-sm font-semibold">01</span><p class="mt-10 text-xl font-black leading-tight">Code ou QR de classe</p><p class="mt-2 font-medium">Vous validez chaque demande.</p></li>
<li class="border-b-4 border-black bg-white p-6 md:border-l-4 lg:border-b-0 lg:border-l-0 lg:border-r-4"><span class="font-mono text-sm font-semibold">02</span><p class="mt-10 text-xl font-black leading-tight">Import CSV</p><p class="mt-2 font-medium">Nom, prénom, groupe. Rien de plus.</p></li>
<li class="border-b-4 border-black bg-[#7CF2C0] p-6 lg:border-b-0 lg:border-r-4"><span class="font-mono text-sm font-semibold">03</span><p class="mt-10 text-xl font-black leading-tight">Saisie rapide</p><p class="mt-2 font-medium">Une ligne par élève.</p></li>
<li class="border-b-4 border-black bg-white p-6 md:border-l-4 lg:border-b-0 lg:border-l-0 lg:border-r-4"><span class="font-mono text-sm font-semibold">04</span><p class="mt-10 text-xl font-black leading-tight">Fiche de connexion</p><p class="mt-2 font-medium">Identifiant et QR imprimés, sans e-mail pour les mineurs.</p></li>
<li class="relative bg-[#FF6FB5] p-6 md:col-span-2 lg:col-span-1"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 text-xs font-extrabold shadow-[3px_3px_0px_#000000]">Bientôt</span><span class="font-mono text-sm font-semibold">05</span><p class="mt-10 text-xl font-black leading-tight">Moodle LTI 1.3</p><p class="mt-2 font-medium">Les élèves arrivent depuis votre ENT.</p></li>
</ol>
</div>
</section>
{{-- ÉTABLISSEMENTS --}}
<section class="border-t-4 border-black bg-[#13233A] text-white" aria-labelledby="titre-etab">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-24 lg:grid-cols-12 lg:px-10">
<h2 id="titre-etab" class="text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl lg:col-span-5">Ça passe le filtrage du lycée.</h2>
<ul class="grid gap-6 sm:grid-cols-2 lg:col-span-7">
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#FFD23F]"><p class="font-mono text-3xl font-semibold text-[#FFD23F]">443</p><p class="mt-3 text-lg font-bold">Tout passe par HTTPS. Aucun port à ouvrir sur le réseau de l'établissement.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#7CF2C0] sm:translate-y-8"><p class="font-mono text-3xl font-semibold text-[#7CF2C0]">FR</p><p class="mt-3 text-lg font-bold">Hébergé en France. Données d'élèves minimales, supprimées 90 jours après l'archivage.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#FF6FB5]"><p class="font-mono text-3xl font-semibold text-[#FF6FB5]">0 install</p><p class="mt-3 text-lg font-bold">Vieux PC, Chromebook, connexion lente : un navigateur suffit.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#C4B5FD] sm:translate-y-8"><p class="font-mono text-3xl font-semibold text-[#C4B5FD]">NAT</p><p class="mt-3 text-lg font-bold">Les VM ne sortent pas sur Internet. Seuls les miroirs de paquets répondent.</p></li>
</ul>
</div>
</section>
{{-- APPEL FINAL --}}
<section class="relative overflow-hidden border-t-4 border-black bg-[#ec3013]" aria-labelledby="titre-cta">
<span aria-hidden="true" class="zigzag pointer-events-none absolute right-10 top-10 h-4 w-48"></span>
<span aria-hidden="true" class="etoile flotte pointer-events-none absolute bottom-10 right-[30%] h-12 w-12 bg-[#FFD23F] [--r:-8deg]"></span>
<div class="relative mx-auto flex max-w-7xl flex-col items-start gap-10 px-5 py-24 lg:px-10">
<h2 id="titre-cta" class="max-w-4xl text-6xl font-black leading-[0.9] tracking-tighter text-white sm:text-7xl xl:text-8xl">Votre prochain TP commence dans 5&nbsp;secondes.</h2>
<div class="flex flex-wrap gap-4">
<a href="{{ route('labs.essai') }}" class="flex items-center gap-4 border-4 border-black bg-white px-6 py-4 text-lg font-extrabold shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Lancer un lab d'essai <span class="font-mono" aria-hidden="true">→</span></a>
<a href="{{ route('etablissements') }}" class="border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white hover:bg-[#13233A]">Équiper mon établissement</a>
</div>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-espaces">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Un espace pour chacun</p>
<h2 id="t-espaces" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Prof, élève, vie scolaire, académie.</h2>
<ul class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<li><a href="{{ route('cockpit') }}" class="group flex h-full flex-col border-4 border-black bg-[#13233A] text-white p-6 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1"><span class="self-start border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black">Prof</span><span class="mt-4 text-2xl font-black leading-tight">Cockpit prof</span><span class="mt-2 flex-1 font-semibold">Alertes, mains levées, examen, DM : tout se pilote sur un écran.</span><span class="mt-5 font-extrabold underline underline-offset-4 group-hover:no-underline">Découvrir →</span></a></li>
<li><a href="{{ route('espace.eleve') }}" class="group flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1"><span class="self-start border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black">Élève</span><span class="mt-4 text-2xl font-black leading-tight">Espace élève</span><span class="mt-2 flex-1 font-semibold">Calendrier, devoirs, examens à venir et exercices pour s’entraîner.</span><span class="mt-5 font-extrabold underline underline-offset-4 group-hover:no-underline">Découvrir →</span></a></li>
<li><a href="{{ route('vie.scolaire') }}" class="group flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1"><span class="self-start border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black">CPE · intendance</span><span class="mt-4 text-2xl font-black leading-tight">Vie scolaire</span><span class="mt-2 flex-1 font-semibold">Alertes toutes classes, conseils de classe, licences et factures.</span><span class="mt-5 font-extrabold underline underline-offset-4 group-hover:no-underline">Découvrir →</span></a></li>
<li><a href="{{ route('academie') }}" class="group flex h-full flex-col border-4 border-black bg-[#FFD23F] p-6 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1"><span class="self-start border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black">Académie</span><span class="mt-4 text-2xl font-black leading-tight">Multi-établissements</span><span class="mt-2 flex-1 font-semibold">Usage et compétences agrégés, sans donnée nominative.</span><span class="mt-5 font-extrabold underline underline-offset-4 group-hover:no-underline">Découvrir →</span></a></li>
</ul>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-label="Lever la main">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="relative grid items-center gap-10 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FF6FB5] sm:p-12 md:grid-cols-[auto_1fr]">
<div class="grid h-40 w-40 -rotate-6 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black shadow-[6px_6px_0px_#FFFFFF]" role="img" aria-label="Moins 40 décibels"><span class="flex flex-col items-center gap-1 text-center"><span class="font-mono text-5xl font-semibold leading-none">−40</span><span class="text-2xl font-black leading-none">dB</span></span></div>
<div>
<p class="text-4xl font-black leading-tight tracking-tight sm:text-5xl">Vous devenez le roi du silence grâce à la fonction <span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
<p class="mt-6 text-2xl font-bold">Vos élèves n’auront plus que le droit de tousser ou de respirer&nbsp;!</p>
</div>
</div>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-pdf">
<div class="mx-auto grid max-w-7xl items-center gap-10 px-5 py-16 lg:grid-cols-12 lg:px-10">
<div class="border-4 border-black bg-white shadow-[10px_10px_0px_#000000] lg:col-span-6"><div class="aspect-[10/7]"><svg viewBox="0 0 600 420" class="h-full w-full" role="img" aria-label="Un smiley qui sourit à côté des cours à télécharger">
<defs><pattern id="pts" width="24" height="24" patternUnits="userSpaceOnUse"><circle cx="6" cy="6" r="3" fill="#000"/></pattern></defs>
<rect x="330" y="0" width="270" height="420" fill="url(#pts)"/>
<path d="M0 50 C150 20 270 80 320 170 L310 250 C230 215 120 240 0 285 Z" fill="#FF3E9A"/>
<path d="M190 262 C225 160 350 80 470 76 C575 72 606 170 566 262 C526 352 404 400 292 380 C210 364 172 318 190 262 Z" fill="#35E0E8"/>
<g transform="translate(486 104) rotate(14)"><path d="M-20 -26 H10 L22 -14 V28 H-20 Z" fill="#fff" stroke="#000" stroke-width="5" stroke-linejoin="round"/><path d="M10 -26 V-14 H22" fill="#FFD23F" stroke="#000" stroke-width="5" stroke-linejoin="round"/><rect x="-26" y="-2" width="38" height="16" fill="#ec3013" stroke="#000" stroke-width="5"/><text x="-7" y="11" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="12" fill="#fff">PDF</text></g>
<path d="M540 190 l7 15 16 2 -12 11 3 16 -14 -8 -14 8 3 -16 -12 -11 16 -2 z" fill="#FFD23F" stroke="#000" stroke-width="4" stroke-linejoin="round"/>
<g transform="rotate(-10 200 170)">
<circle cx="208" cy="178" r="112" fill="#000"/>
<circle cx="200" cy="170" r="112" fill="#FFDD57" stroke="#000" stroke-width="8"/>
<ellipse cx="160" cy="140" rx="13" ry="20" fill="#000"/>
<ellipse cx="240" cy="140" rx="13" ry="20" fill="#000"/>
<path d="M128 192 C150 250 250 250 272 192 Z" fill="#000" stroke="#000" stroke-width="8" stroke-linejoin="round"/>
<path d="M142 198 H258 C254 212 248 218 244 222 H156 C150 216 146 210 142 198 Z" fill="#fff"/>
</g>
<g font-family="Archivo, sans-serif" font-weight="900" transform="rotate(-8 400 350)">
<text x="208" y="352" font-size="40" fill="#FF3E9A" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<text x="205" y="349" font-size="40" fill="#000" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<rect x="204" y="362" width="340" height="26" fill="#fff" stroke="#000" stroke-width="3"/><text x="214" y="381" font-size="15" fill="#000" letter-spacing="1">COURS · TD · CORRECTIONS EN PDF</text>
</g>
</svg></div></div>
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-[#35E0E8] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Gratuit · à télécharger</p>
<h2 id="t-pdf" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Tous les cours se téléchargent en PDF.</h2>
<p class="mt-5 text-xl font-medium leading-relaxed">CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2">
<li><a href="{{ route('cours.cm') }}" class="flex items-center gap-4 border-4 border-black bg-[#FFD23F] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>CM complet<span class="block font-mono text-xs font-semibold">Adressage IPv4 · 12 pages</span></span></a></li>
<li><a href="{{ route('td.imprimable') }}" class="flex items-center gap-4 border-4 border-black bg-[#7CF2C0] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>TD à imprimer<span class="block font-mono text-xs font-semibold">Étapes + cases à remplir</span></span></a></li>
<li><a href="apercu-td-imprimable.html#correction" class="flex items-center gap-4 border-4 border-black bg-[#FF6FB5] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Correction<span class="block font-mono text-xs font-semibold">Réservée au prof</span></span></a></li>
<li><a href="{{ route('cours.index') }}" class="flex items-center gap-4 border-4 border-black bg-[#C4B5FD] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Tous les cours<span class="block font-mono text-xs font-semibold">Par cursus, du SNT au master</span></span></a></li>
</ul>
</div>
</div>
</section>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function () {
PaillasseTerminal.mount(document.getElementById('xterm-hero'), {
user: 'lea', host: 'debian', fontSize: 13,
demo: ['mkdir projets && cd projets', 'echo "Léa" > notes.txt', 'ls -la', 'cat notes.txt']
});
});
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,61 @@
@extends('layouts.vitrine')
@section('titre', 'Se connecter')
@section('contenu')
<section class="relative overflow-hidden">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute left-[45%] top-8 h-10 w-10 bg-[#FF6FB5] [--r:12deg]"></span><span class="zigzag absolute bottom-10 right-10 h-4 w-40"></span></div>
<div class="relative mx-auto max-w-7xl px-5 pb-28 pt-16 lg:px-10">
<h1 class="text-6xl font-black tracking-tighter sm:text-7xl">Se connecter.</h1>
<div class="mt-12 grid gap-10 lg:grid-cols-2">
<form action="{{ route('eleve') }}" method="get" class="grid gap-5 border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] lg:-rotate-1">
<h2 class="text-3xl font-black">Je suis élève</h2>
<label class="grid gap-2 font-extrabold">Identifiant<input name="identifiant" autocomplete="username" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono" placeholder="lea.m.2nde-b"></label>
<label class="grid gap-2 font-extrabold">Code secret<input type="password" name="code" autocomplete="current-password" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono"></label>
<p class="font-medium">Ils sont sur ta fiche de connexion. Tu peux aussi scanner le QR.</p>
<div><button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Entrer <span class="font-mono" aria-hidden="true">→</span></button></div>
</form>
<form action="{{ route('suivi') }}" method="get" class="grid gap-5 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] lg:translate-y-10">
<h2 class="text-3xl font-black">Je suis enseignant</h2>
<div class="grid gap-4">
<label class="grid gap-2 font-extrabold" for="etab-connexion">Établissement</label>
<select id="etab-connexion" name="etablissement_id" required data-etab class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none -mt-2">
<option value="">Choisir dans la liste</option>
<optgroup label="Lycées"><option value="L0">Lycée Jean-Jaurès · Montreuil</option><option value="L1">Lycée Louis-Armand · Paris 15e</option><option value="L2">Lycée Gustave-Eiffel · Bordeaux</option><option value="L3">Lycée La Martinière Monplaisir · Lyon</option></optgroup>
<optgroup label="BTS et IUT"><option value="B0">Lycée Saint-Exupéry · Marseille</option><option value="B1">IUT de Villetaneuse · R&amp;T</option><option value="B2">IUT de Lannion · R&amp;T</option></optgroup>
<optgroup label="Organismes de formation"><option value="O0">Télécom Saint-Étienne · école d’ingénieurs</option><option value="O1">AFPA · Centre de Rennes</option></optgroup>
<option value="autre">Mon établissement n’est pas dans la liste</option>
</select>
<div data-etab-autre hidden class="relative grid gap-4 border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]">
<span class="absolute -right-3 -top-4 rotate-3 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Version démo</span>
<p class="font-semibold">Paillasse est en version démo. C’est avec grand plaisir qu’on vous laisse l’accès, sans carte bancaire. En échange, donnez-nous un coup de pouce : aidez-nous à faire souscrire une offre à votre établissement, ou envoyez-nous vos critiques et remarques pour rendre l’outil plus utile.</p>
<label class="grid gap-2 font-extrabold">Nom de l’établissement<input name="etablissement_nom" data-req class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none" placeholder="Lycée Marie-Curie"></label>
<div class="grid gap-4 sm:grid-cols-2">
<label class="grid gap-2 font-extrabold">Ville<input name="etablissement_ville" data-req class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Code UAI <span class="font-semibold">(facultatif)</span><input name="etablissement_uai" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono" placeholder="0931234A"></label>
</div>
<fieldset class="grid gap-2 font-semibold">
<legend class="font-extrabold">Mon coup de pouce</legend>
<label class="flex items-center gap-3"><input type="checkbox" name="aide[]" value="offre" class="h-5 w-5 accent-black"> Aider à faire souscrire une offre</label>
<label class="flex items-center gap-3"><input type="checkbox" name="aide[]" value="avis" class="h-5 w-5 accent-black"> Envoyer mes critiques et remarques</label>
</fieldset>
</div>
</div>
<label class="grid gap-2 font-extrabold">E-mail<input type="email" name="email" autocomplete="email" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Mot de passe<input type="password" name="password" autocomplete="current-password" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<div class="flex flex-wrap items-center gap-5"><button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Se connecter</button><a href="{{ route('register') }}" class="font-extrabold underline underline-offset-4">Créer une classe</a></div>
</form>
</div>
</div>
</section>
<script>
document.querySelectorAll('[data-etab]').forEach(function (s) {
var box = s.parentNode.querySelector('[data-etab-autre]');
function maj() {
box.hidden = s.value !== 'autre';
box.querySelectorAll('[data-req]').forEach(function (i) { i.required = !box.hidden; });
}
s.addEventListener('change', maj); maj();
});
</script>
@endsection

View file

@ -0,0 +1,61 @@
@extends('layouts.vitrine')
@section('titre', 'Créer une classe')
@section('contenu')
<section class="relative overflow-hidden">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[8%] top-10 h-14 w-14 bg-[#7CF2C0] [--r:12deg]"></span><span class="flotte absolute left-[40%] bottom-10 h-9 w-9 rounded-full border-4 border-black bg-[#FF6FB5] [animation-delay:1.5s]"></span></div>
<div class="relative mx-auto grid max-w-7xl gap-12 px-5 pb-24 pt-16 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Enseignants</p>
<h1 class="mt-8 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Créer une classe.</h1>
<p class="mt-6 inline-block rotate-2 border-4 border-black bg-[#FF6FB5] px-4 py-2 text-2xl font-black shadow-[5px_5px_0px_#000000]">Gratuit · sans CB</p>
<p class="mt-8 text-xl font-medium">Ensuite, ajoutez vos élèves par code de classe, import CSV ou saisie rapide. Pour les mineurs, on ne demande que le nom, le prénom et le groupe.</p>
</div>
<form action="{{ route('suivi') }}" method="get" class="grid gap-5 border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] sm:grid-cols-2 lg:col-span-7">
@csrf
<label class="grid gap-2 font-extrabold">Prénom<input name="prenom" autocomplete="given-name" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Nom<input name="nom" autocomplete="family-name" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold sm:col-span-2">E-mail professionnel<input type="email" name="email" autocomplete="email" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<div class="sm:col-span-2"><div class="grid gap-4">
<label class="grid gap-2 font-extrabold" for="etab-inscription">Établissement</label>
<select id="etab-inscription" name="etablissement_id" required data-etab class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none -mt-2">
<option value="">Choisir dans la liste</option>
<optgroup label="Lycées"><option value="L0">Lycée Jean-Jaurès · Montreuil</option><option value="L1">Lycée Louis-Armand · Paris 15e</option><option value="L2">Lycée Gustave-Eiffel · Bordeaux</option><option value="L3">Lycée La Martinière Monplaisir · Lyon</option></optgroup>
<optgroup label="BTS et IUT"><option value="B0">Lycée Saint-Exupéry · Marseille</option><option value="B1">IUT de Villetaneuse · R&amp;T</option><option value="B2">IUT de Lannion · R&amp;T</option></optgroup>
<optgroup label="Organismes de formation"><option value="O0">Télécom Saint-Étienne · école d’ingénieurs</option><option value="O1">AFPA · Centre de Rennes</option></optgroup>
<option value="autre">Mon établissement n’est pas dans la liste</option>
</select>
<div data-etab-autre hidden class="relative grid gap-4 border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]">
<span class="absolute -right-3 -top-4 rotate-3 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Version démo</span>
<p class="font-semibold">Paillasse est en version démo. C’est avec grand plaisir qu’on vous laisse l’accès, sans carte bancaire. En échange, donnez-nous un coup de pouce : aidez-nous à faire souscrire une offre à votre établissement, ou envoyez-nous vos critiques et remarques pour rendre l’outil plus utile.</p>
<label class="grid gap-2 font-extrabold">Nom de l’établissement<input name="etablissement_nom" data-req class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none" placeholder="Lycée Marie-Curie"></label>
<div class="grid gap-4 sm:grid-cols-2">
<label class="grid gap-2 font-extrabold">Ville<input name="etablissement_ville" data-req class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Code UAI <span class="font-semibold">(facultatif)</span><input name="etablissement_uai" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono" placeholder="0931234A"></label>
</div>
<fieldset class="grid gap-2 font-semibold">
<legend class="font-extrabold">Mon coup de pouce</legend>
<label class="flex items-center gap-3"><input type="checkbox" name="aide[]" value="offre" class="h-5 w-5 accent-black"> Aider à faire souscrire une offre</label>
<label class="flex items-center gap-3"><input type="checkbox" name="aide[]" value="avis" class="h-5 w-5 accent-black"> Envoyer mes critiques et remarques</label>
</fieldset>
</div>
</div></div>
<label class="grid gap-2 font-extrabold">Formation<select name="formation" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Lycée NSI</option><option>BTS SIO SISR</option><option>BTS CIEL</option><option>BUT R&amp;T</option><option>Titre pro TSSR</option></select></label>
<label class="grid gap-2 font-extrabold">Nom de la classe<input name="classe" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none" placeholder="2nde NSI · Groupe B"></label>
<div class="sm:col-span-2"><button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Créer la classe <span class="font-mono" aria-hidden="true">→</span></button>
<p class="mt-3 font-semibold">Aucune carte bancaire demandée.</p></div>
</form>
</div>
</section>
<script>
document.querySelectorAll('[data-etab]').forEach(function (s) {
var box = s.parentNode.querySelector('[data-etab-autre]');
function maj() {
box.hidden = s.value !== 'autre';
box.querySelectorAll('[data-req]').forEach(function (i) { i.required = !box.hidden; });
}
s.addEventListener('change', maj); maj();
});
</script>
@endsection

View file

@ -0,0 +1,184 @@
@extends('layouts.vitrine')
@section('titre', 'Banque de sujets')
@section('contenu')
<section class="border-b-4 border-black bg-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-end gap-6 px-5 pb-10 pt-10 lg:px-10">
<div class="flex-1">
<p class="font-mono text-sm font-semibold">Espace enseignant · Banque</p>
<h1 class="mt-2 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Banque de sujets et de questions</h1>
<p class="mt-3 max-w-2xl text-lg font-semibold">1 240 questions classées par cursus et par notion. Modifiez-les, ajoutez les vôtres, composez vos sujets.</p><div class="mt-4 flex flex-wrap gap-3"><a href="{{ route('bibliotheque') }}" class="border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Bibliothèque du référentiel →</a><a href="{{ route('generateur') }}" class="border-4 border-black bg-[#FF6FB5] px-4 py-2 font-extrabold">Générateur de TD →</a></div>
</div>
<a href="#editeur" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">+ Nouvelle question</a>
</div>
</section>
<section id="flash" class="scroll-mt-6 border-b-4 border-black bg-[#FFD23F]" aria-labelledby="t-flash">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-4">
<p class="inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Début d’heure</p>
<h2 id="t-flash" class="mt-5 text-4xl font-black leading-tight tracking-tighter">Un quiz flash pour lancer le cours.</h2>
<p class="mt-4 text-lg font-semibold">Choisissez les outils à réviser. Paillasse tire les questions dans la banque. Un diaporama s’ouvre au tableau. Les élèves se connectent avec leur identifiant depuis leur téléphone ou leur PC, et vous voyez tout de suite qui manque.</p>
<span class="mt-4 flex flex-wrap gap-4"><a href="{{ route('quiz.projection') }}" class="font-extrabold underline underline-offset-4">Voir le diaporama →</a><a href="{{ route('quiz.eleve') }}" class="font-extrabold underline underline-offset-4">Voir la vue élève →</a></span>
</div>
<div class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000] lg:col-span-8">
<p class="font-extrabold">Outils à réviser</p>
<div class="mt-3 flex flex-wrap gap-2" role="group" aria-label="Outils">
<button type="button" data-outil aria-pressed="true" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ls</button>
<button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">cd</button>
<button type="button" data-outil aria-pressed="true" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">chmod</button>
<button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">chown</button>
<button type="button" data-outil aria-pressed="true" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">grep</button>
<button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">find</button>
<button type="button" data-outil aria-pressed="true" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ip</button>
<button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ping</button>
<button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ss</button>
<button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">dig</button>
<button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ssh</button>
<button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">systemctl</button>
<button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">apt</button>
<button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">journalctl</button>
<button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">tar</button>
</div>
<div class="mt-5 grid gap-4 sm:grid-cols-3">
<label class="grid gap-2 font-extrabold">Questions<select id="flash-n" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>5</option><option>8</option><option>10</option></select></label>
<label class="grid gap-2 font-extrabold">Durée<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>5 min</option><option>8 min</option><option>10 min</option></select></label>
<label class="grid gap-2 font-extrabold">Classe<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>BTS SIO 1 · Groupe A</option><option>2nde NSI · Groupe B</option></select></label>
</div>
<div class="mt-6 flex flex-wrap items-center gap-5">
<button type="button" id="flash-go" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">Lancer le diaporama →</button>
<p id="flash-res" hidden class="border-4 border-black bg-[#7CF2C0] px-4 py-2 font-extrabold" aria-live="polite"></p>
</div>
</div>
</div>
</section>
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-12 lg:grid-cols-12 lg:px-10">
<aside class="grid content-start gap-5 lg:col-span-3" aria-label="Filtres">
<label class="grid gap-2 font-extrabold">Rechercher<input id="recherche" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none" placeholder="masque, VLAN…"></label>
<label class="grid gap-2 font-extrabold">Cursus<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Tous</option><option>NSI</option><option>BTS SIO</option><option>BTS CIEL</option><option>BUT R&amp;T</option><option>TSSR</option></select></label>
<label class="grid gap-2 font-extrabold">Type<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Tous</option><option>Choix unique</option><option>Choix multiple</option><option>Vrai / faux</option><option>Réponse numérique</option><option>Réponse courte</option><option>Texte à trous</option></select></label>
<label class="grid gap-2 font-extrabold">Difficulté<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Toutes</option><option>Facile</option><option>Moyen</option><option>Difficile</option></select></label>
<div class="border-4 border-black bg-[#C4B5FD] p-4">
<p class="font-extrabold">Sujets prêts</p>
<ul class="mt-3 grid gap-2"><li class="border-2 border-black bg-[#FFD23F] p-2"><p class="font-bold leading-tight">E6 blanc SISR · Adressage et VLAN</p><p class="font-mono text-xs font-semibold">12 questions + TP · 1 h</p></li><li class="border-2 border-black bg-[#7CF2C0] p-2"><p class="font-bold leading-tight">QCM Bloc 2 · fin de trimestre</p><p class="font-mono text-xs font-semibold">20 questions · 40 min</p></li><li class="border-2 border-black bg-[#C4B5FD] p-2"><p class="font-bold leading-tight">Contrôle NSI · Architectures</p><p class="font-mono text-xs font-semibold">10 questions · 30 min</p></li></ul>
</div>
</aside>
<section class="lg:col-span-5" aria-labelledby="t-questions">
<h2 id="t-questions" class="text-2xl font-black">Questions <span class="font-mono text-base font-semibold">· 7 affichées sur 1 240</span></h2>
<ul id="liste-questions" class="mt-5 grid gap-5">
<li data-question data-pts="2" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Choix unique</span><span class="border-2 border-black px-2">BTS SIO · Bloc 2</span><span class="border-2 border-black bg-[#7CF2C0] px-2">Adressage IPv4</span><span class="border-2 border-black bg-[#C4B5FD] px-2">Moyen</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Quelle est l’adresse réseau de 10.0.3.200/22 ?</p>
<p class="mt-2 font-mono text-xs font-semibold">2 pts · utilisée 34 fois · réussite 38 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
</li>
<li data-question data-pts="1" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Choix unique</span><span class="border-2 border-black px-2">BTS CIEL · Réseaux</span><span class="border-2 border-black bg-[#7CF2C0] px-2">Adressage IPv4</span><span class="border-2 border-black bg-white px-2">Facile</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Combien d’hôtes utilisables dans un /27 ?</p>
<p class="mt-2 font-mono text-xs font-semibold">1 pt · utilisée 51 fois · réussite 71 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
</li>
<li data-question data-pts="1" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Choix multiple</span><span class="border-2 border-black px-2">NSI · Première</span><span class="border-2 border-black bg-[#7CF2C0] px-2">Commandes Linux</span><span class="border-2 border-black bg-white px-2">Facile</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Quelles commandes affichent les interfaces réseau sous Debian ?</p>
<p class="mt-2 font-mono text-xs font-semibold">1 pt · utilisée 22 fois · réussite 64 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
</li>
<li data-question data-pts="1" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Vrai / faux</span><span class="border-2 border-black px-2">BTS SIO · Bloc 2</span><span class="border-2 border-black bg-[#7CF2C0] px-2">VLAN</span><span class="border-2 border-black bg-white px-2">Facile</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Un VLAN isole le trafic au niveau 2 du modèle OSI.</p>
<p class="mt-2 font-mono text-xs font-semibold">1 pt · utilisée 40 fois · réussite 82 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
</li>
<li data-question data-pts="2" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Réponse courte</span><span class="border-2 border-black px-2">BTS SIO · Bloc 1</span><span class="border-2 border-black bg-[#7CF2C0] px-2">Droits Linux</span><span class="border-2 border-black bg-[#C4B5FD] px-2">Moyen</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Écrivez la commande qui donne les droits rwxr-x--- au fichier notes.txt.</p>
<p class="mt-2 font-mono text-xs font-semibold">2 pts · utilisée 18 fois · réussite 47 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
</li>
<li data-question data-pts="1" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Réponse numérique</span><span class="border-2 border-black px-2">BUT R&amp;T · S1</span><span class="border-2 border-black bg-[#7CF2C0] px-2">Services réseau</span><span class="border-2 border-black bg-white px-2">Facile</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Quel port utilise par défaut le protocole SSH ?</p>
<p class="mt-2 font-mono text-xs font-semibold">1 pt · utilisée 29 fois · réussite 88 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
</li>
<li data-question data-pts="3" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Texte à trous</span><span class="border-2 border-black px-2">BTS CIEL · Réseaux</span><span class="border-2 border-black bg-[#7CF2C0] px-2">Routage</span><span class="border-2 border-black bg-[#ec3013] text-white px-2">Difficile</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Complétez : la route par défaut s’écrit ___ via 192.168.1.1.</p>
<p class="mt-2 font-mono text-xs font-semibold">3 pts · utilisée 9 fois · réussite 29 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
</li>
</ul>
</section>
<aside class="grid content-start gap-8 lg:col-span-4">
<section class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[8px_8px_0px_#000000] lg:sticky lg:top-6" aria-labelledby="t-sujet">
<h2 id="t-sujet" class="text-2xl font-black">Sujet en cours</h2>
<label class="mt-4 grid gap-2 font-extrabold">Titre<input value="Examen · Adressage IPv4" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<ol id="sujet" class="mt-4 grid gap-2 font-semibold"><li data-vide class="border-2 border-dashed border-black bg-white p-3">Ajoutez des questions depuis la liste.</li></ol>
<p class="mt-4 font-mono font-semibold"><span id="nb-q">0</span> question(s) · <span id="nb-pts">0</span> point(s)</p>
<fieldset class="mt-4 grid gap-2 font-semibold"><legend class="font-extrabold">Options</legend>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Mélanger les questions</label>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Ajouter une partie TP</label>
<label class="flex items-center gap-3"><input type="checkbox" class="h-5 w-5 accent-black"> Corrections visibles après l’épreuve</label>
</fieldset>
<a href="{{ route('examen') }}" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none mt-6">Programmer l’examen</a>
</section>
</aside>
</div>
<section id="editeur" class="scroll-mt-6 border-t-4 border-black bg-[#C4B5FD]" aria-labelledby="t-editeur">
<div class="mx-auto max-w-7xl px-5 py-14 lg:px-10">
<h2 id="t-editeur" class="text-4xl font-black tracking-tighter">Créer ou modifier une question</h2>
<form class="mt-8 grid gap-5 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] lg:grid-cols-2" onsubmit="event.preventDefault(); this.querySelector('[data-ok]').hidden = false;">
<label class="grid gap-2 font-extrabold lg:col-span-2">Énoncé<textarea rows="2" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none">Quel masque correspond à /26 ?</textarea></label>
<label class="grid gap-2 font-extrabold">Type<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Choix unique</option><option>Choix multiple</option><option>Vrai / faux</option><option>Réponse numérique</option><option>Réponse courte</option><option>Texte à trous</option></select></label>
<div class="grid grid-cols-2 gap-4"><label class="grid gap-2 font-extrabold">Points<input type="number" value="1" min="0" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label><label class="grid gap-2 font-extrabold">Difficulté<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Facile</option><option selected>Moyen</option><option>Difficile</option></select></label></div>
<fieldset class="grid gap-3 lg:col-span-2"><legend class="font-extrabold">Réponses <span class="font-semibold">(cochez la bonne)</span></legend>
<label class="flex items-center gap-3"><input type="radio" name="bonne" class="h-5 w-5 shrink-0 accent-black"><input value="255.255.255.128" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono" aria-label="Réponse 1"></label>
<label class="flex items-center gap-3"><input type="radio" name="bonne" checked class="h-5 w-5 shrink-0 accent-black"><input value="255.255.255.192" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono" aria-label="Réponse 2"></label>
<label class="flex items-center gap-3"><input type="radio" name="bonne" class="h-5 w-5 shrink-0 accent-black"><input value="255.255.255.224" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono" aria-label="Réponse 3"></label>
<label class="flex items-center gap-3"><input type="radio" name="bonne" class="h-5 w-5 shrink-0 accent-black"><input value="255.255.255.240" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono" aria-label="Réponse 4"></label>
</fieldset>
<label class="grid gap-2 font-extrabold lg:col-span-2">Explication montrée à l’élève<textarea rows="2" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none">26 bits = 24 bits (255.255.255) + 2 bits dans le dernier octet : 128 + 64 = 192.</textarea></label>
<label class="grid gap-2 font-extrabold">Cursus<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>BTS SIO · Bloc 2</option><option>BTS CIEL · Réseaux</option><option>NSI · Terminale</option><option>BUT R&amp;T · S1</option><option>TSSR · CCP 2</option></select></label>
<label class="grid gap-2 font-extrabold">Notion<input value="Adressage IPv4" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<div class="flex flex-wrap items-center gap-4 lg:col-span-2"><button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">Enregistrer dans ma banque</button><label class="flex items-center gap-3 font-semibold"><input type="checkbox" class="h-5 w-5 accent-black"> Partager avec mon établissement</label><p data-ok hidden class="border-4 border-black bg-[#7CF2C0] px-4 py-2 font-extrabold">Question enregistrée ✓</p></div>
</form>
</div>
</section>
<script>
(function () {
var sujet = document.getElementById('sujet'), nbq = document.getElementById('nb-q'), nbp = document.getElementById('nb-pts'), q = 0, p = 0;
document.querySelectorAll('[data-ajouter]').forEach(function (b) {
b.addEventListener('click', function () {
var li = b.closest('[data-question]');
if (b.disabled) return;
var vide = sujet.querySelector('[data-vide]'); if (vide) vide.remove();
q++; p += Number(li.dataset.pts);
var it = document.createElement('li');
it.className = 'flex gap-3 border-2 border-black bg-white p-3';
it.innerHTML = '<span class="font-mono font-semibold">' + q + '</span><span>' + li.querySelector('[data-enonce]').textContent + '</span>';
sujet.appendChild(it);
nbq.textContent = q; nbp.textContent = p;
b.disabled = true; b.textContent = 'Ajoutée ✓'; b.classList.remove('bg-black', 'text-white'); b.classList.add('bg-[#7CF2C0]');
});
});
document.querySelectorAll('[data-outil]').forEach(function (b) { b.addEventListener('click', function () { b.setAttribute('aria-pressed', b.getAttribute('aria-pressed') !== 'true'); }); });
document.getElementById('flash-go').addEventListener('click', function () {
var sel = Array.prototype.filter.call(document.querySelectorAll('[data-outil]'), function (b) { return b.getAttribute('aria-pressed') === 'true'; }).map(function (b) { return b.textContent; });
var r = document.getElementById('flash-res'); r.hidden = false;
if (!sel.length) { r.textContent = 'Choisissez au moins un outil.'; return; }
r.textContent = 'Ouverture du diaporama…'; location.href = '{{ route('quiz.projection') }}';
});
var rech = document.getElementById('recherche');
rech.addEventListener('input', function () {
var v = rech.value.toLowerCase();
document.querySelectorAll('[data-question]').forEach(function (li) { li.hidden = v && li.textContent.toLowerCase().indexOf(v) === -1; });
});
})();
</script>
@endsection

View file

@ -0,0 +1,96 @@
@extends('layouts.vitrine')
@section('titre', 'Bibliothèque')
@section('contenu')
<section class="border-b-4 border-black bg-white">
<div class="mx-auto max-w-7xl px-5 pb-12 pt-12 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]">Bibliothèque du prof</p>
<h1 class="mt-6 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Tout le référentiel, fiche par fiche.</h1>
<p class="mt-6 max-w-3xl text-xl font-medium leading-relaxed">Du SNT au master, en passant par l’école d’ingénieurs. Chaque fiche regroupe cours, quiz, TD, labs et examens. Un même chapitre sert plusieurs formations : OSPF compte pour la NSI, le BTS SIO, le BTS CIEL, le BUT R&amp;T et les titres pro.</p>
<dl id="stats" class="mt-10 grid max-w-4xl grid-cols-2 border-4 border-black sm:grid-cols-5"></dl>
<div class="mt-6 max-w-4xl border-4 border-black bg-[#7CF2C0] p-4 text-sm font-bold shadow-[4px_4px_0px_#000000]"><p>Construit à partir des programmes officiels. Vérifié le 29 septembre 2026 :</p><ul class="mt-2 flex flex-wrap gap-x-5 gap-y-1 underline underline-offset-4"><li><a href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000049926463" target="_blank" rel="noopener">BTS SIO · arrêté du 8 juillet 2024 (épreuves E5, E6, E7)</a></li><li><a href="https://www.francecompetences.fr/recherche/rncp/37391/" target="_blank" rel="noopener">BTS CIEL · RNCP37391, arrêté du 25 janvier 2023</a></li><li><a href="https://www.onisep.fr/ressources/univers-formation/formations/post-bac/but-reseaux-et-telecommunications-parcours-cybersecurite" target="_blank" rel="noopener">BUT R&amp;T · 5 parcours (Onisep)</a></li></ul></div>
</div>
</section>
<div class="sticky top-0 z-20 border-b-4 border-black bg-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-3 px-5 py-3 lg:px-10">
<div class="flex border-4 border-black font-extrabold" role="tablist">
<button type="button" data-vue="themes" aria-selected="true" class="px-4 py-2 aria-selected:bg-black aria-selected:text-white">Par thème</button>
<button type="button" data-vue="formations" aria-selected="false" class="border-l-4 border-black px-4 py-2 aria-selected:bg-black aria-selected:text-white">Par formation</button>
<button type="button" data-vue="examens" aria-selected="false" class="border-l-4 border-black px-4 py-2 aria-selected:bg-black aria-selected:text-white">Examens</button>
</div>
<input id="b-recherche" class="min-w-[200px] flex-1 border-4 border-black px-3 py-2 font-semibold focus:bg-[#FFFBEA] focus:outline-none" placeholder="Rechercher : OSPF, chmod, RSA…" aria-label="Rechercher">
<select id="b-theme" class="border-4 border-black px-3 py-2 font-bold" aria-label="Thème"><option value="">Tous les thèmes</option></select>
<label class="flex items-center gap-2 font-bold"><input id="b-vm" type="checkbox" class="h-5 w-5 accent-black"> Masquer hors VM</label>
<p class="ml-auto border-4 border-black bg-[#7CF2C0] px-3 py-2 font-extrabold">Ma séquence : <span id="b-seq">0</span></p>
</div>
<div class="mx-auto flex max-w-7xl flex-wrap gap-2 px-5 pb-3 lg:px-10" role="group" aria-label="Activités">
<button type="button" data-tag="C" aria-pressed="false" class="border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-1 aria-pressed:outline-black">C · Cours</button>
<button type="button" data-tag="Q" aria-pressed="false" class="border-2 border-black bg-[#FFD23F] px-2 py-0.5 font-mono text-xs font-semibold aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-1 aria-pressed:outline-black">Q · Quiz</button>
<button type="button" data-tag="TD" aria-pressed="false" class="border-2 border-black bg-[#C4B5FD] px-2 py-0.5 font-mono text-xs font-semibold aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-1 aria-pressed:outline-black">TD · TD</button>
<button type="button" data-tag="LAB" aria-pressed="false" class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5 font-mono text-xs font-semibold aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-1 aria-pressed:outline-black">LAB · TP sur VM</button>
<button type="button" data-tag="LAB+" aria-pressed="false" class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5 font-mono text-xs font-semibold aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-1 aria-pressed:outline-black">LAB+ · Lab multi-VM</button>
<button type="button" data-tag="IDE" aria-pressed="false" class="border-2 border-black bg-[#13233A] text-white px-2 py-0.5 font-mono text-xs font-semibold aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-1 aria-pressed:outline-black">IDE · IDE</button>
<button type="button" data-tag="GEN" aria-pressed="false" class="border-2 border-black bg-[#FF6FB5] px-2 py-0.5 font-mono text-xs font-semibold aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-1 aria-pressed:outline-black">GEN · Générateur</button>
<button type="button" data-tag="EXAM" aria-pressed="false" class="border-2 border-black bg-[#ec3013] text-white px-2 py-0.5 font-mono text-xs font-semibold aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-1 aria-pressed:outline-black">EXAM · Examen</button>
<button type="button" data-tag="PROJ" aria-pressed="false" class="border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-1 aria-pressed:outline-black">PROJ · Projet</button>
<button type="button" data-tag="CTF" aria-pressed="false" class="border-2 border-black bg-black text-white px-2 py-0.5 font-mono text-xs font-semibold aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-1 aria-pressed:outline-black">CTF · CTF</button>
</div>
</div>
<div id="b-contenu" class="mx-auto max-w-7xl px-5 py-12 lg:px-10" data-url-cours="{{ route('cours.show') }}" data-url-ide="{{ route('ide') }}" data-url-lab="{{ route('labs.essai') }}" data-url-gen="{{ route('generateur') }}" data-url-exam="{{ route('examen') }}" data-url-banque="{{ route('banque') }}"></div>
<script src="{{ asset('js/referentiel.js') }}"></script>
<script>
(function () {
var R = window.REFERENTIEL, box = document.getElementById('b-contenu'), vue = 'themes', seq = 0, actifs = [];
var BG = {"C":"bg-white","Q":"bg-[#FFD23F]","TD":"bg-[#C4B5FD]","LAB":"bg-[#7CF2C0]","LAB+":"bg-[#7CF2C0]","IDE":"bg-[#13233A] text-white","GEN":"bg-[#FF6FB5]","EXAM":"bg-[#ec3013] text-white","PROJ":"bg-white","CTF":"bg-black text-white"}; BG.HV = 'bg-white border-dashed';
var U = box.dataset;
var esc = function (s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;'); };
var badges = function (tags) { return tags.split(' ').map(function (t) { return '<span class="border-2 border-black ' + (BG[t] || 'bg-white') + ' px-1.5 font-mono text-[11px] font-semibold">' + (t === 'HV' ? 'hors VM' : t) + '</span>'; }).join(''); };
var lien = function (tags) { var t = tags.split(' '); return t.indexOf('IDE') > -1 ? U.urlIde : t.indexOf('GEN') > -1 ? U.urlGen : (t.indexOf('LAB') > -1 || t.indexOf('LAB+') > -1) ? U.urlLab : t.indexOf('EXAM') > -1 ? U.urlExam : U.urlCours; };
var tous = []; R.themes.forEach(function (th) { th.items.forEach(function (it, i) { tous.push({ code: th.code + '-' + (i + 1), theme: th.code, t: it[0], tags: it[1] }); }); });
var nb = function (tag) { return tous.filter(function (f) { return f.tags.split(' ').indexOf(tag) > -1; }).length; };
document.getElementById('stats').innerHTML = [['Fiches', tous.length, 'bg-white'], ['Quiz', nb('Q'), 'bg-[#FFD23F]'], ['Labs', nb('LAB') + nb('LAB+'), 'bg-[#7CF2C0]'], ['Formations', R.formations.length, 'bg-[#C4B5FD]'], ['Examens', R.examens.length + nb('EXAM'), 'bg-[#FF6FB5]']].map(function (s, i) { return '<div class="' + (i ? 'border-l-4 ' : '') + 'border-black ' + s[2] + ' p-4"><dt class="font-mono text-sm font-semibold">' + s[0] + '</dt><dd class="text-4xl font-black">' + s[1] + '</dd></div>'; }).join('');
var sel = document.getElementById('b-theme'); R.themes.forEach(function (th) { var o = document.createElement('option'); o.value = th.code; o.textContent = th.code + ' · ' + th.nom; sel.appendChild(o); });
function garde(t, tags) {
var q = document.getElementById('b-recherche').value.toLowerCase(), tg = tags.split(' ');
if (q && t.toLowerCase().indexOf(q) === -1) return false;
if (document.getElementById('b-vm').checked && tg.indexOf('HV') > -1) return false;
return actifs.every(function (a) { return tg.indexOf(a) > -1; });
}
function carte(code, t, tags, sous) {
return '<li class="flex flex-col gap-3 border-4 border-black bg-white p-4 shadow-[5px_5px_0px_#000000]"><div class="flex items-start justify-between gap-2"><span class="border-2 border-black bg-black px-1.5 font-mono text-xs font-semibold text-white">' + code + '</span>' + (sous ? '<span class="text-right text-xs font-bold">' + sous + '</span>' : '') + '</div><p class="flex-1 font-extrabold leading-snug">' + esc(t) + '</p><div class="flex flex-wrap gap-1">' + badges(tags) + '</div><div class="flex flex-wrap gap-2 border-t-2 border-black pt-3"><a href="' + lien(tags) + '" class="border-2 border-black bg-[#FFD23F] px-2 py-0.5 text-sm font-extrabold hover:bg-black hover:text-white">Ouvrir</a><button type="button" data-ajout class="border-2 border-black bg-white px-2 py-0.5 text-sm font-extrabold hover:bg-[#7CF2C0]">+ Séquence</button></div></li>';
}
function rendre() {
var h = '', th = sel.value;
if (vue === 'themes') {
R.themes.filter(function (x) { return !th || x.code === th; }).forEach(function (x) {
var its = x.items.map(function (it, i) { return [x.code + '-' + (i + 1), it[0], it[1]]; }).filter(function (it) { return garde(it[1], it[2]); });
if (!its.length) return;
h += '<section class="mb-14"><h2 class="flex flex-wrap items-baseline gap-3 text-3xl font-black tracking-tight"><span class="border-4 border-black bg-[#C4B5FD] px-2 font-mono text-2xl shadow-[4px_4px_0px_#000000]">' + x.code + '</span>' + esc(x.nom) + '<span class="font-mono text-base font-semibold">' + its.length + ' fiche(s)</span></h2><ul class="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">' + its.map(function (it) { return carte(it[0], it[1], it[2]); }).join('') + '</ul></section>';
});
} else if (vue === 'formations') {
var gr = {}; R.formations.forEach(function (f) { (gr[f.groupe] = gr[f.groupe] || []).push(f); });
Object.keys(gr).forEach(function (g) {
var bloc = gr[g].map(function (f) {
var ch = f.chapitres.filter(function (c) { return garde(c[0], c[1]); });
if (!ch.length) return '';
return '<details class="border-4 border-black bg-white shadow-[5px_5px_0px_#000000]" open><summary class="cursor-pointer border-b-4 border-black bg-[#7CF2C0] px-5 py-3 text-xl font-black">' + esc(f.nom) + ' <span class="font-mono text-sm font-semibold">· ' + ch.length + ' chapitre(s)</span></summary><ul class="divide-y-2 divide-black">' + ch.map(function (c, i) { return '<li class="flex flex-wrap items-center gap-3 px-5 py-3"><span class="font-mono text-sm font-semibold">' + (i + 1) + '</span><a href="' + lien(c[1]) + '" class="min-w-0 flex-1 font-bold hover:underline">' + esc(c[0]) + '</a><span class="flex flex-wrap gap-1">' + badges(c[1]) + '</span><button type="button" data-ajout class="border-2 border-black px-2 text-xs font-extrabold hover:bg-[#7CF2C0]">+ Séquence</button></li>'; }).join('') + '</ul></details>';
}).join('');
if (bloc) h += '<section class="mb-12"><h2 class="text-3xl font-black tracking-tight">' + esc(g) + '</h2><div class="mt-5 grid gap-6">' + bloc + '</div></section>';
});
} else {
var ex = R.examens.filter(function (e) { return garde(e[0] + ' ' + e[1], 'EXAM'); });
var ext = tous.filter(function (f) { return f.tags.split(' ').indexOf('EXAM') > -1 && garde(f.t, f.tags); });
h += '<section class="mb-12"><h2 class="text-3xl font-black tracking-tight">Épreuves et examens blancs</h2><ul class="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">' + ex.map(function (e) { return '<li class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]"><p class="font-mono text-sm font-semibold">⏱ ' + e[2] + '</p><p class="mt-2 text-xl font-black">' + esc(e[0]) + '</p><p class="mt-1 font-semibold">' + esc(e[1]) + '</p><div class="mt-4 flex gap-2"><a href="' + U.urlExam + '" class="border-2 border-black bg-[#ec3013] px-2 py-0.5 text-sm font-extrabold text-white">Aperçu</a><a href="' + U.urlBanque + '" class="border-2 border-black bg-white px-2 py-0.5 text-sm font-extrabold hover:bg-[#FFD23F]">Personnaliser</a></div></li>'; }).join('') + '</ul></section>';
h += '<section><h2 class="text-3xl font-black tracking-tight">Fiches avec mode examen</h2><ul class="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">' + ext.map(function (f) { return carte(f.code, f.t, f.tags); }).join('') + '</ul></section>';
}
box.innerHTML = h || '<p class="border-4 border-black bg-white p-6 text-xl font-black">Aucune fiche ne correspond à ces filtres.</p>';
}
box.addEventListener('click', function (e) { var b = e.target.closest('[data-ajout]'); if (!b || b.disabled) return; seq++; document.getElementById('b-seq').textContent = seq; b.textContent = 'Ajoutée ✓'; b.disabled = true; b.classList.add('bg-[#7CF2C0]'); });
document.querySelectorAll('[data-vue]').forEach(function (b) { b.addEventListener('click', function () { vue = b.dataset.vue; document.querySelectorAll('[data-vue]').forEach(function (x) { x.setAttribute('aria-selected', x === b); }); rendre(); }); });
document.querySelectorAll('[data-tag]').forEach(function (b) { b.addEventListener('click', function () { var on = b.getAttribute('aria-pressed') !== 'true'; b.setAttribute('aria-pressed', on); actifs = Array.prototype.filter.call(document.querySelectorAll('[data-tag]'), function (x) { return x.getAttribute('aria-pressed') === 'true'; }).map(function (x) { return x.dataset.tag; }); rendre(); }); });
['b-recherche', 'b-theme', 'b-vm'].forEach(function (id) { document.getElementById(id).addEventListener('input', rendre); document.getElementById(id).addEventListener('change', rendre); });
rendre();
})();
</script>
@endsection

View file

@ -0,0 +1,156 @@
@extends('layouts.vitrine')
@section('titre', 'Suivi de classe')
@section('contenu')
<section class="border-b-4 border-black bg-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-end gap-6 px-5 pb-10 pt-10 lg:px-10">
<div class="flex-1">
<p class="font-mono text-sm font-semibold">Espace enseignant · Suivi</p>
<h1 class="mt-2 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">BTS SIO 1 · Groupe A</h1>
<p class="mt-3 text-lg font-semibold">Bloc 2 · Administration des systèmes et des réseaux · 24 élèves</p>
</div>
<div class="flex flex-wrap gap-3">
<a href="{{ route('banque') }}#flash" class="inline-flex items-center gap-3 border-4 border-black bg-[#FFD23F] px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">Quiz flash de début d’heure</a>
<a href="{{ route('devoirs') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F]">Devoirs maison</a>
<a href="{{ route('cours.show') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none">Voir la séquence</a>
<button type="button" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none">Exporter les notes (CSV)</button>
</div>
</div>
</section>
<div class="mx-auto max-w-7xl px-5 py-10 lg:px-10">
<dl class="grid grid-cols-2 gap-5 lg:grid-cols-4">
<div class="border-4 border-black bg-[#FFD23F] p-5 shadow-[5px_5px_0px_#000000]"><dt class="font-semibold">Progression moyenne</dt><dd class="mt-1 font-mono text-4xl font-semibold">52 %</dd></div>
<div class="border-4 border-black bg-[#C4B5FD] p-5 shadow-[5px_5px_0px_#000000] lg:translate-y-3"><dt class="font-semibold">Moyenne aux QCM</dt><dd class="mt-1 font-mono text-4xl font-semibold">13,4</dd></div>
<div class="border-4 border-black bg-[#7CF2C0] p-5 shadow-[5px_5px_0px_#000000]"><dt class="font-semibold">Actifs cette semaine</dt><dd class="mt-1 font-mono text-4xl font-semibold">21 / 24</dd></div>
<div class="border-4 border-black bg-[#ec3013] p-5 text-white shadow-[5px_5px_0px_#000000] lg:translate-y-3"><dt class="font-semibold">À aider maintenant</dt><dd class="mt-1 font-mono text-4xl font-semibold">2</dd></div>
</dl>
<div class="mt-14 grid gap-10 lg:grid-cols-12">
<section class="lg:col-span-8" aria-labelledby="t-tab">
<h2 id="t-tab" class="text-3xl font-black">Élèves</h2>
<div class="mt-5 overflow-x-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000]">
<table class="w-full min-w-[760px] text-left">
<thead class="bg-black text-white"><tr><th class="px-4 py-3">Élève</th><th class="px-3 py-3 font-mono text-xs font-semibold">Adressage IPv4</th><th class="px-3 py-3 font-mono text-xs font-semibold">VLAN</th><th class="px-3 py-3 font-mono text-xs font-semibold">Inter-VLAN</th><th class="px-3 py-3 font-mono text-xs font-semibold">DHCP</th><th class="px-3 py-3 font-mono text-xs font-semibold">DNS BIND</th><th class="px-3 py-3">QCM</th><th class="px-3 py-3">Temps VM</th></tr></thead>
<tbody class="divide-y-2 divide-black">
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#7CF2C0] font-black ">L</span><span><span class="block font-extrabold">Léa Martin</span><span class="block font-mono text-xs font-semibold">Terminé</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">18/20</td>
<td class="px-3 py-3 font-mono text-sm">12 h 40</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-white font-black ">Y</span><span><span class="block font-extrabold">Yanis Benali</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="1 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">14/20</td>
<td class="px-3 py-3 font-mono text-sm">9 h 10</td>
</tr>
<tr class="bg-[#FFD9E8]">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#FF6FB5] font-black ">N</span><span><span class="block font-extrabold">Nora Kaci</span><span class="block font-mono text-xs font-semibold">Main levée</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="2 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">11/20</td>
<td class="px-3 py-3 font-mono text-sm">8 h 05</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-white font-black ">T</span><span><span class="block font-extrabold">Tom Robert</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="2 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">16/20</td>
<td class="px-3 py-3 font-mono text-sm">10 h 30</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-white font-black ">I</span><span><span class="block font-extrabold">Inès Durand</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="2 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">9/20</td>
<td class="px-3 py-3 font-mono text-sm">5 h 20</td>
</tr>
<tr class="bg-[#FFE4DF]">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#ec3013] font-black text-white">S</span><span><span class="block font-extrabold">Sami Lefèvre</span><span class="block font-mono text-xs font-semibold">Bloqué 9 min</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="1 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">7/20</td>
<td class="px-3 py-3 font-mono text-sm">6 h 45</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#7CF2C0] font-black ">C</span><span><span class="block font-extrabold">Chloé Petit</span><span class="block font-mono text-xs font-semibold">En avance</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="1 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">19/20</td>
<td class="px-3 py-3 font-mono text-sm">13 h 15</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-white font-black ">A</span><span><span class="block font-extrabold">Adam Fontaine</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">13/20</td>
<td class="px-3 py-3 font-mono text-sm">8 h 50</td>
</tr>
</tbody>
</table>
</div>
<p class="mt-4 font-semibold">8 élèves sur 24 affichés · triés par besoin d’aide</p>
</section>
<aside class="grid content-start gap-8 lg:col-span-4">
<section class="border-4 border-black bg-[#FF6FB5] p-6 shadow-[8px_8px_0px_#000000]" aria-labelledby="t-nora">
<p class="font-mono text-sm font-semibold">Fiche élève</p>
<h2 id="t-nora" class="mt-1 text-3xl font-black">Nora Kaci</h2>
<ol class="mt-5 grid gap-3 border-l-4 border-black pl-4 font-semibold">
<li><span class="font-mono text-xs">10:42</span><br>Main levée · Inter-VLAN, étape 3</li>
<li><span class="font-mono text-xs">10:31</span><br>Étape 2 validée après 3 essais</li>
<li><span class="font-mono text-xs">Mar.</span><br>QCM Adressage IPv4 : 11/20. Erreurs sur le calcul de l’adresse réseau (/22).</li>
</ol>
<div class="mt-6 flex flex-wrap gap-3">
<a href="{{ route('labs.essai') }}" class="border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Ouvrir sa console</a>
<a href="{{ route('cours.show') }}" class="border-4 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#13233A]">Lui assigner le TD</a>
</div>
</section>
<section class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]" aria-labelledby="t-exam">
<h2 id="t-exam" class="text-3xl font-black">Mode examen</h2>
<a href="{{ route('banque') }}" class="mt-3 inline-block font-extrabold underline underline-offset-4">Composer un sujet dans la banque →</a>
<form action="{{ route('examen') }}" method="get" class="mt-5 grid gap-4">
<label class="grid gap-2 font-extrabold">Épreuve<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Adressage et VLAN · E6 blanc SISR</option><option>QCM Bloc 2</option></select></label>
<label class="grid gap-2 font-extrabold">Durée<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>1 h</option><option>2 h</option><option>4 h</option></select></label>
<fieldset class="grid gap-2 font-semibold">
<legend class="font-extrabold">Pendant l’épreuve</legend>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Indices désactivés</label>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Copier-coller bloqué</label>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Sortie d’onglet signalée</label>
<label class="flex items-center gap-3"><input type="checkbox" class="h-5 w-5 accent-black"> Ordre des questions mélangé</label>
</fieldset>
<button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Lancer l’examen</button>
</form>
</section>
</aside>
</div>
</div>
@endsection

View file

@ -0,0 +1,208 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cockpit prof · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" @if(request()->routeIs('cockpit')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" @if(request()->routeIs('espace.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" @if(request()->routeIs('vie.scolaire')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" @if(request()->routeIs('academie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" @if(request()->routeIs('labs.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" @if(request()->routeIs('labs.web')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" @if(request()->routeIs('ide')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" @if(request()->routeIs('maison')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" @if(request()->routeIs('bibliotheque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" @if(request()->routeIs('banque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" @if(request()->routeIs('generateur')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" @if(request()->routeIs('td.imprimable')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" @if(request()->routeIs('quiz.projection')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" @if(request()->routeIs('sujet.creer')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" @if(request()->routeIs('devoirs')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" @if(request()->routeIs('correction')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" @if(request()->routeIs('fiche.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" @if(request()->routeIs('messagerie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" @if(request()->routeIs('export.ent')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<div class="border-b-2 border-black bg-[#F6F5F1]">
<div class="mx-auto grid max-w-[1600px] lg:grid-cols-[240px_minmax(0,1fr)]">
<aside class="border-b-2 border-black bg-white p-5 lg:border-b-0 lg:border-r-2">
<p class="font-mono text-[11px] font-semibold uppercase tracking-wider">Mes classes</p>
<label class="mt-2 block"><span class="sr-only">Classe</span><select class="h-11 w-full border-2 border-black bg-white px-2 font-bold"><option>BTS SIO 1 · Groupe A</option><option>BTS SIO 1 · Groupe B</option><option>BTS SIO 2 · SISR</option><option>Terminale NSI</option></select></label>
<p class="mt-6 font-mono text-[11px] font-semibold uppercase tracking-wider">Cockpit</p>
<ul class="mt-2 grid gap-1"><li><a href="#vue" class="flex items-center gap-3 border-2 border-black bg-black text-white px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/></svg><span class="flex-1">Vue d’ensemble</span></a></li><li><a href="#eleves" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg><span class="flex-1">Élèves</span></a></li><li><a href="#examen" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><span class="flex-1">Examen</span></a></li><li><a href="#devoirs" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/><path d="M6.5 17H20v5H6.5A2.5 2.5 0 0 1 4 19.5"/></svg><span class="flex-1">Devoirs maison</span></a></li><li><a href="#quiz" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg><span class="flex-1">Quiz flash</span></a></li><li><a href="#obs" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg><span class="flex-1">Observations</span></a></li></ul>
<div class="mt-6 border-2 border-black bg-[#FFFBEA] p-3 text-sm font-semibold"><p class="font-black">Séance en cours</p><p class="mt-1">VLAN et routage inter-VLAN</p><p class="mt-2 font-mono text-xs">10:00 → 12:00</p><div class="mt-2 h-2 border-2 border-black bg-white"><div class="h-full w-[18%] bg-black"></div></div></div>
</aside>
<div class="min-w-0 p-5 lg:p-8">
<div id="vue" class="flex flex-wrap items-end justify-between gap-4">
<div><p class="font-mono text-xs font-semibold">Cockpit prof</p><h1 class="mt-1 text-4xl font-black tracking-tight">BTS SIO 1 · Groupe A</h1><p class="mt-1 font-semibold">16 élèves · mardi 29 septembre · <span id="c-heure" class="font-mono">10:22</span></p></div>
<div class="flex flex-wrap gap-3">
<a href="{{ route('quiz.projection') }}" class="inline-flex h-11 items-center gap-2 border-2 border-black bg-white px-4 text-sm font-extrabold hover:bg-[#FFFBEA]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>Quiz flash</a>
<a href="{{ route('devoirs') }}" class="inline-flex h-11 items-center gap-2 border-2 border-black bg-white px-4 text-sm font-extrabold hover:bg-[#FFFBEA]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/><path d="M6.5 17H20v5H6.5A2.5 2.5 0 0 1 4 19.5"/></svg>Programmer un DM</a>
<button type="button" id="c-exam" class="inline-flex h-11 items-center gap-2 border-2 border-black bg-[#ec3013] px-4 text-sm font-extrabold text-white shadow-[3px_3px_0px_#000000] active:translate-x-0.5 active:translate-y-0.5 active:shadow-none"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><span>Lancer l’examen</span></button>
</div>
</div>
<ul class="mt-6 grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-5" aria-label="Indicateurs">
<li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Présents</p><span class="h-2.5 w-2.5 bg-[#7CF2C0]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">15/16</p><div class="mt-3 flex items-end justify-between gap-2"><p class="text-xs font-bold text-black">1 absent signalé</p><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline points="0,12 16,10 32,12 48,8 64,10 80,6" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round"/></svg></div></li>
<li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Moyenne QCM</p><span class="h-2.5 w-2.5 bg-[#FFD23F]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">13,4</p><div class="mt-3 flex items-end justify-between gap-2"><p class="text-xs font-bold text-[#0a7a4b]">+0,8 sur 4 semaines</p><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline points="0,18 16,16 32,17 48,12 64,10 80,8" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round"/></svg></div></li>
<li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">À accompagner</p><span class="h-2.5 w-2.5 bg-[#ec3013]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">3</p><div class="mt-3 flex items-end justify-between gap-2"><p class="text-xs font-bold text-[#b3001b]">+1 cette semaine</p><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline points="0,20 16,18 32,18 48,14 64,12 80,10" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round"/></svg></div></li>
<li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Mains levées</p><span class="h-2.5 w-2.5 bg-[#FF6FB5]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none"><span id="c-nb-mains">3</span></p><div class="mt-3 flex items-end justify-between gap-2"><p class="text-xs font-bold text-black">attente moy. 2 min</p><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline points="0,20 16,14 32,18 48,10 64,16 80,12" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round"/></svg></div></li>
<li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">DM rendus</p><span class="h-2.5 w-2.5 bg-[#C4B5FD]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">13/16</p><div class="mt-3 flex items-end justify-between gap-2"><p class="text-xs font-bold text-black">échéance vendredi</p><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline points="0,22 16,20 32,14 48,12 64,8 80,6" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round"/></svg></div></li>
</ul>
<section class="mt-6 border-2 border-black bg-white p-5" aria-labelledby="t-prog">
<div class="flex flex-wrap items-baseline justify-between gap-2"><h2 id="t-prog" class="text-lg font-black">Avancement du lab « VLAN »</h2><p class="font-mono text-xs font-semibold">6 étapes · médiane : étape 3</p></div>
<div class="mt-4 flex h-10 border-2 border-black" role="img" aria-label="Répartition des élèves par étape"><div class="flex items-center justify-center border-r-2 border-black font-mono text-xs font-semibold last:border-r-0" style="width:6.666666666666667%;background:#fff;color:#000">É1 · 1</div><div class="flex items-center justify-center border-r-2 border-black font-mono text-xs font-semibold last:border-r-0" style="width:13.333333333333334%;background:#FFFBEA;color:#000">É2 · 2</div><div class="flex items-center justify-center border-r-2 border-black font-mono text-xs font-semibold last:border-r-0" style="width:26.666666666666668%;background:#FFD23F;color:#000">É3 · 4</div><div class="flex items-center justify-center border-r-2 border-black font-mono text-xs font-semibold last:border-r-0" style="width:20%;background:#7CF2C0;color:#000">É4 · 3</div><div class="flex items-center justify-center border-r-2 border-black font-mono text-xs font-semibold last:border-r-0" style="width:20%;background:#35E0E8;color:#000">É5 · 3</div><div class="flex items-center justify-center border-r-2 border-black font-mono text-xs font-semibold last:border-r-0" style="width:13.333333333333334%;background:#000;color:#fff">É6 · 2</div></div>
<p class="mt-2 text-xs font-semibold">Largeur = nombre d’élèves à chaque étape. 2 élèves ont terminé.</p>
</section>
<section id="eleves" class="mt-6 border-2 border-black bg-white" aria-labelledby="t-eleves">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4">
<h2 id="t-eleves" class="text-lg font-black">Élèves</h2>
<div class="flex flex-wrap items-center gap-2">
<label class="flex h-10 items-center gap-2 border-2 border-black px-2"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><span class="sr-only">Rechercher</span><input id="c-q" type="search" placeholder="Rechercher un élève" class="w-40 bg-transparent text-sm font-semibold outline-none"></label>
<div id="c-filtres" class="flex flex-wrap text-sm font-bold"><button type="button" data-f="all" class="h-10 border-2 border-black px-3 bg-black text-white">Tous</button><button type="button" data-f="aider" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">À accompagner</button><button type="button" data-f="main" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">Main levée</button><button type="button" data-f="dm" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">DM manquant</button><button type="button" data-f="exc" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">Excellence</button></div>
</div>
</div>
<div class="overflow-x-auto"><table class="w-full min-w-[860px] border-collapse text-left text-sm">
<thead class="border-b-2 border-black bg-[#F6F5F1] font-mono text-[11px] uppercase tracking-wider"><tr><th class="px-4 py-3 font-semibold"><button type="button" data-sort="nom" class="inline-flex items-center gap-1 hover:underline">Élève <span aria-hidden="true">↕</span></button></th><th class="px-4 py-3 font-semibold"><button type="button" data-sort="statut" class="inline-flex items-center gap-1 hover:underline">Statut <span aria-hidden="true">↕</span></button></th><th class="px-4 py-3 font-semibold"><button type="button" data-sort="etape" class="inline-flex items-center gap-1 hover:underline">Lab <span aria-hidden="true">↕</span></button></th><th class="px-4 py-3 font-semibold"><button type="button" data-sort="qcm" class="inline-flex items-center gap-1 hover:underline">QCM moy. <span aria-hidden="true">↕</span></button></th><th class="px-4 py-3 font-semibold">Tendance</th><th class="px-4 py-3 font-semibold"><button type="button" data-sort="dm" class="inline-flex items-center gap-1 hover:underline">DM <span aria-hidden="true">↕</span></button></th><th class="px-4 py-3 font-semibold"><button type="button" data-sort="ind" class="inline-flex items-center gap-1 hover:underline">Indices <span aria-hidden="true">↕</span></button></th><th class="px-4 py-3 font-semibold"></th></tr></thead>
<tbody id="c-rows"></tbody>
</table></div>
</section>
<div class="mt-6 grid gap-6 xl:grid-cols-2">
<section id="examen" class="border-2 border-black bg-white" aria-labelledby="t-exam">
<div class="flex items-center justify-between gap-3 border-b-2 border-black p-4"><h2 id="t-exam" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>Surveillance d’examen</h2><span id="c-exam-etat" class="border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold">Inactif</span></div>
<div class="p-4"><div class="flex items-baseline justify-between"><p class="font-semibold">E6 blanc SISR · 1 h 30</p><p id="c-chrono" class="font-mono text-2xl font-semibold">00:00</p></div><ol id="c-sorties" class="mt-3 grid gap-2 font-mono text-xs font-semibold"><li class="border-2 border-dashed border-black p-3 text-center">Lancez l’examen pour suivre les sorties d’onglet et de fenêtre.</li></ol></div>
</section>
<section id="devoirs" class="border-2 border-black bg-white" aria-labelledby="t-dm">
<div class="flex items-center justify-between gap-3 border-b-2 border-black p-4"><h2 id="t-dm" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/><path d="M6.5 17H20v5H6.5A2.5 2.5 0 0 1 4 19.5"/></svg>Devoirs maison</h2><a href="{{ route('devoirs') }}" class="text-sm font-extrabold underline underline-offset-4">Tout voir</a></div>
<ul class="divide-y-2 divide-black"><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">DM 3 · Plan d’adressage</p><p class="font-mono text-xs">Rendu ven. 03/10</p></div><p class="font-mono text-sm font-semibold">13/16</p><div class="col-span-2 h-2 border-2 border-black"><div class="h-full bg-black" style="width:81%"></div></div></li><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">TP maison · Scripts Bash</p><p class="font-mono text-xs">Rendu lun. 06/10</p></div><p class="font-mono text-sm font-semibold">6/16</p><div class="col-span-2 h-2 border-2 border-black"><div class="h-full bg-black" style="width:38%"></div></div></li><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">QCM · Lecture CM VLAN</p><p class="font-mono text-xs">Rendu ce soir</p></div><p class="font-mono text-sm font-semibold">15/16</p><div class="col-span-2 h-2 border-2 border-black"><div class="h-full bg-black" style="width:94%"></div></div></li></ul>
</section>
</div>
</div>
</div>
</div>
<div class="mx-auto grid max-w-[1600px] gap-6 px-5 py-8 lg:grid-cols-3 lg:px-8">
<section class="border-2 border-black bg-white" aria-labelledby="t-mains">
<div class="flex items-center justify-between border-b-2 border-black bg-[#FF6FB5] p-4"><h2 id="t-mains" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v6M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.4l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15"/></svg>Mains levées</h2><span class="font-mono text-xs font-semibold">ordre d’arrivée</span></div>
<ol id="c-mains" class="divide-y-2 divide-black"></ol>
</section>
<section class="border-2 border-black bg-white" aria-labelledby="t-alertes">
<div class="flex items-center justify-between border-b-2 border-black p-4"><h2 id="t-alertes" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"/></svg>Priorités du jour</h2></div>
<ul class="divide-y-2 divide-black text-sm"><li class="flex gap-3 p-4"><span class="mt-1 h-3 w-3 shrink-0 border-2 border-black" style="background:#ec3013"></span><div><p class="font-black">Léa Martin <span class="ml-1 font-mono text-[11px] font-semibold uppercase">Accompagner</span></p><p class="mt-0.5 font-medium">3 QCM sous 8/20. Proposer le premier rang et réexpliquer les VLAN.</p></div></li><li class="flex gap-3 p-4"><span class="mt-1 h-3 w-3 shrink-0 border-2 border-black" style="background:#ec3013"></span><div><p class="font-black">Lucas Moreau <span class="ml-1 font-mono text-[11px] font-semibold uppercase">Accompagner</span></p><p class="mt-0.5 font-medium">Cours lu en 2 min au lieu de 15. QCM de lecture à refaire.</p></div></li><li class="flex gap-3 p-4"><span class="mt-1 h-3 w-3 shrink-0 border-2 border-black" style="background:#FFD23F"></span><div><p class="font-black">Hugo Petit <span class="ml-1 font-mono text-[11px] font-semibold uppercase">Relancer</span></p><p class="mt-0.5 font-medium">DM 3 non rendu. Relance automatique jeudi 18 h.</p></div></li><li class="flex gap-3 p-4"><span class="mt-1 h-3 w-3 shrink-0 border-2 border-black" style="background:#7CF2C0"></span><div><p class="font-black">Inès Kaci <span class="ml-1 font-mono text-[11px] font-semibold uppercase">Stimuler</span></p><p class="mt-0.5 font-medium">Tous les labs réussis. Défi connexe proposé : QoS et priorisation.</p></div></li></ul>
</section>
<section id="obs" class="border-2 border-black bg-white" aria-labelledby="t-obs">
<div class="border-b-2 border-black p-4"><h2 id="t-obs" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>Observation rapide</h2><p class="mt-0.5 text-sm font-semibold">Classée par élève pour le conseil de classe.</p></div>
<form id="c-obs" class="grid gap-3 p-4"><select id="c-obs-eleve" class="h-11 border-2 border-black bg-white px-2 font-bold"></select><div class="flex flex-wrap gap-2 text-xs font-extrabold"><button type="button" data-tag="Progrès" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">Progrès</button><button type="button" data-tag="Investi" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">Investi</button><button type="button" data-tag="Bavardage" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">Bavardage</button><button type="button" data-tag="Difficulté" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">Difficulté</button><button type="button" data-tag="Autonome" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">Autonome</button></div><textarea rows="3" class="border-2 border-black bg-white p-2 text-sm font-medium" placeholder="Ex. : a aidé son voisin sur l’étape 4"></textarea><button type="submit" class="h-11 border-2 border-black bg-black text-sm font-extrabold text-white">Enregistrer l’observation</button><p id="c-obs-ok" class="hidden text-sm font-extrabold" aria-live="polite">Observation enregistrée ✓</p></form>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var E = [
['Léa Martin','aider',2,7.5,[12,10,9,8,7],'oui',3],['Yanis Benali','main',4,12,[11,12,12,13,12],'oui',1],['Inès Kaci','exc',6,19,[17,18,18,19,19],'oui',0],['Tom Leroy','ok',5,14,[13,13,14,14,14],'oui',1],
['Sarah Nguyen','ok',6,16,[14,15,15,16,16],'oui',0],['Hugo Petit','dm',3,11,[12,11,11,11,11],'non',2],['Chloé Robert','ok',5,13.5,[12,13,13,14,13],'oui',1],['Adam Diallo','main',3,12.5,[11,12,12,12,13],'oui',2],
['Emma Garnier','ok',4,15,[14,14,15,15,15],'oui',0],['Lucas Moreau','aider',1,8,[11,10,9,9,8],'non',4],['Jade Fontaine','ok',4,14.5,[13,14,14,15,14],'oui',1],['Nathan Roux','abs',0,12,[12,12,11,12,12],'non',0],
['Maël Girard','ok',3,13,[12,12,13,13,13],'oui',2],['Zoé Lambert','ok',4,15.5,[14,15,15,15,16],'oui',0],['Rayan Haddad','main',2,11.5,[10,11,11,12,11],'oui',3],['Camille Dubois','aider',2,9,[12,11,10,10,9],'oui',3]];
var LAB = { aider:['#ec3013','#fff','À accompagner'], main:['#FF6FB5','#000','Main levée'], exc:['#7CF2C0','#000','Excellence'], ok:['#fff','#000','En cours'], dm:['#FFD23F','#000','DM manquant'], abs:['#e5e5e5','#000','Absent'] };
var filtre = 'all', q = '', tri = null, sens = 1;
function spark(v) { var mn = 6, mx = 20; return '<svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline fill="none" stroke="' + (v[4] < v[0] ? '#b3001b' : '#000') + '" stroke-width="2" points="' + v.map(function (x, i) { return (i * 20) + ',' + (22 - (x - mn) / (mx - mn) * 20).toFixed(1); }).join(' ') + '"/></svg>'; }
function ini(n) { return n.split(' ').map(function (p) { return p[0]; }).join(''); }
function rendre() {
var rows = E.filter(function (e) { return (filtre === 'all' || e[1] === filtre || (filtre === 'dm' && e[5] === 'non')) && e[0].toLowerCase().indexOf(q) > -1; });
if (tri !== null) rows.sort(function (a, b) { return (a[tri] > b[tri] ? 1 : a[tri] < b[tri] ? -1 : 0) * sens; });
document.getElementById('c-rows').innerHTML = rows.map(function (e) { var l = LAB[e[1]];
return '<tr class="border-b-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-white font-mono text-xs font-semibold">' + ini(e[0]) + '</span><span class="font-bold">' + e[0] + '</span></span></td>' +
'<td class="px-4 py-3"><span class="inline-block border-2 border-black px-2 py-0.5 text-xs font-extrabold" style="background:' + l[0] + ';color:' + l[1] + '">' + l[2] + '</span></td>' +
'<td class="px-4 py-3"><span class="flex items-center gap-2"><span class="flex h-2.5 w-24 border-2 border-black">' + [1,2,3,4,5,6].map(function (s) { return '<span class="flex-1 ' + (s <= e[2] ? 'bg-black' : '') + '"></span>'; }).join('') + '</span><span class="font-mono text-xs font-semibold">' + (e[2] === 6 ? 'fini' : e[2] ? 'É' + e[2] : '—') + '</span></span></td>' +
'<td class="px-4 py-3 font-mono font-semibold ' + (e[3] < 10 ? 'text-[#b3001b]' : '') + '">' + String(e[3]).replace('.', ',') + '</td><td class="px-4 py-3">' + spark(e[4]) + '</td>' +
'<td class="px-4 py-3 font-bold">' + (e[5] === 'oui' ? '✓ rendu' : '<span class="text-[#b3001b]">✕ manquant</span>') + '</td><td class="px-4 py-3 font-mono font-semibold">' + e[6] + '</td>' +
'<td class="px-4 py-3 text-right"><a href="{{ route('suivi') }}" class="border-2 border-black px-2 py-1 text-xs font-extrabold hover:bg-black hover:text-white">Fiche</a></td></tr>'; }).join('') || '<tr><td colspan="8" class="p-6 text-center font-bold">Aucun élève.</td></tr>';
}
document.querySelectorAll('#c-filtres button').forEach(function (b) { b.addEventListener('click', function () { filtre = b.dataset.f; document.querySelectorAll('#c-filtres button').forEach(function (x, i) { x.className = 'h-10 border-2 border-black px-3 ' + (i ? '-ml-0.5 ' : '') + (x === b ? 'bg-black text-white' : 'bg-white'); }); rendre(); }); });
document.getElementById('c-q').addEventListener('input', function (e) { q = e.target.value.toLowerCase(); rendre(); });
var COL = { nom: 0, statut: 1, etape: 2, qcm: 3, dm: 5, ind: 6 };
document.querySelectorAll('[data-sort]').forEach(function (b) { b.addEventListener('click', function () { var c = COL[b.dataset.sort]; sens = tri === c ? -sens : 1; tri = c; rendre(); }); });
rendre();
document.getElementById('c-obs-eleve').innerHTML = E.map(function (e) { return '<option>' + e[0] + '</option>'; }).join('');
document.querySelectorAll('[data-tag]').forEach(function (b) { b.addEventListener('click', function () { var t = document.querySelector('#c-obs textarea'); t.value = (t.value ? t.value + ' · ' : '') + b.dataset.tag; }); });
document.getElementById('c-obs').addEventListener('submit', function (e) { e.preventDefault(); var ok = document.getElementById('c-obs-ok'); ok.classList.remove('hidden'); e.target.querySelector('textarea').value = ''; setTimeout(function () { ok.classList.add('hidden'); }, 2500); });
var M = [['Yanis Benali','Lab VLAN · étape 4',190],['Adam Diallo','Masque /26',75],['Rayan Haddad','Lab VLAN · étape 2',20]];
function mains() { var ol = document.getElementById('c-mains'); document.getElementById('c-nb-mains').textContent = M.length;
ol.innerHTML = M.length ? M.map(function (m, i) { return '<li class="flex items-center justify-between gap-3 p-4"><span class="flex items-center gap-3"><span class="font-mono text-sm font-semibold">' + (i + 1) + '</span><span><span class="block font-black">' + m[0] + '</span><span class="text-sm font-semibold">' + m[1] + ' · <span class="font-mono">' + Math.floor(m[2] / 60) + ' min ' + String(m[2] % 60).padStart(2, '0') + '</span></span></span></span><button type="button" data-i="' + i + '" class="h-9 border-2 border-black bg-black px-3 text-xs font-extrabold text-white hover:bg-[#ec3013]">J’arrive</button></li>'; }).join('') : '<li class="p-6 text-center font-bold">Aucune main levée. Silence royal.</li>';
ol.querySelectorAll('button').forEach(function (b) { b.addEventListener('click', function () { M.splice(+b.dataset.i, 1); mains(); }); }); }
mains(); setInterval(function () { M.forEach(function (m) { m[2]++; }); mains(); }, 1000);
var t = null, s = 0, btn = document.getElementById('c-exam'), et = document.getElementById('c-exam-etat'), so = document.getElementById('c-sorties');
btn.addEventListener('click', function () {
if (t) { clearInterval(t); t = null; btn.querySelector('span').textContent = 'Lancer l’examen'; et.textContent = 'Terminé'; et.style.background = '#fff'; return; }
s = 0; btn.querySelector('span').textContent = 'Arrêter l’examen'; et.textContent = 'En cours · 16/16 connectés'; et.style.background = '#7CF2C0';
so.innerHTML = '<li class="border-2 border-black p-3">Aucune sortie détectée.</li>';
window.scrollTo({ top: document.getElementById('examen').getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
t = setInterval(function () { s++; document.getElementById('c-chrono').textContent = String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0');
var ev = { 4: ['#FFD23F','Hugo Petit','changement d’onglet','3 s'], 9: ['#FF6FB5','Lucas Moreau','souris hors de la fenêtre','6 s'], 15: ['#FFD23F','Camille Dubois','fenêtre réduite','2 s'] }[s];
if (ev) { if (so.children[0] && so.children[0].textContent.indexOf('Aucune') === 0) so.innerHTML = ''; so.insertAdjacentHTML('afterbegin', '<li class="flex items-center justify-between gap-3 border-2 border-black p-2" style="background:' + ev[0] + '"><span>' + document.getElementById('c-chrono').textContent + ' · ' + ev[1] + ' · ' + ev[2] + '</span><span>' + ev[3] + '</span></li>'); }
}, 1000);
});
function h() { var d = new Date(); document.getElementById('c-heure').textContent = String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0'); } h(); setInterval(h, 30000);
});
</script>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Correction assistée · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" @if(request()->routeIs('cockpit')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" @if(request()->routeIs('espace.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" @if(request()->routeIs('vie.scolaire')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" @if(request()->routeIs('academie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" @if(request()->routeIs('labs.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" @if(request()->routeIs('labs.web')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" @if(request()->routeIs('ide')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" @if(request()->routeIs('maison')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" @if(request()->routeIs('bibliotheque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" @if(request()->routeIs('banque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" @if(request()->routeIs('generateur')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" @if(request()->routeIs('td.imprimable')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" @if(request()->routeIs('quiz.projection')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" @if(request()->routeIs('sujet.creer')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" @if(request()->routeIs('devoirs')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" @if(request()->routeIs('correction')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" @if(request()->routeIs('fiche.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" @if(request()->routeIs('messagerie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" @if(request()->routeIs('export.ent')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<div class="border-b-2 border-black bg-[#F6F5F1]"><div class="mx-auto grid max-w-[1600px] lg:grid-cols-[240px_minmax(0,1fr)]"><aside class="border-b-2 border-black bg-white p-5 lg:border-b-0 lg:border-r-2"><p class="font-mono text-[11px] font-semibold uppercase tracking-wider">Devoir</p><p class="mt-1 font-black leading-tight">DM 3 · Plan d’adressage</p><p class="text-sm font-semibold">BTS SIO 1 A · 13/16 rendus</p><div class="mt-3 h-2 border-2 border-black"><div class="h-full w-[38%] bg-black"></div></div><p class="mt-1 font-mono text-xs font-semibold">5 corrigées sur 13</p>
<p class="mt-6 font-mono text-[11px] font-semibold uppercase tracking-wider">Copies</p><ul class="mt-2 grid gap-1"><li><a href="#" class="flex items-center justify-between gap-2 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><span>Sarah Nguyen</span><span class="font-mono text-xs">16/20</span></a></li><li><a href="#" class="flex items-center justify-between gap-2 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><span>Tom Leroy</span><span class="font-mono text-xs">à corriger</span></a></li><li><a href="#" class="flex items-center justify-between gap-2 border-2 border-black bg-black text-white px-3 py-2 text-sm font-bold"><span>Léa Martin</span><span class="font-mono text-xs">à corriger</span></a></li><li><a href="#" class="flex items-center justify-between gap-2 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><span>Hugo Petit</span><span class="font-mono text-xs">✕</span></a></li><li><a href="#" class="flex items-center justify-between gap-2 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><span>Inès Kaci</span><span class="font-mono text-xs">19/20</span></a></li><li><a href="#" class="flex items-center justify-between gap-2 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><span>Adam Diallo</span><span class="font-mono text-xs">à corriger</span></a></li></ul></aside><div class="min-w-0 p-5 lg:p-8"><div class="flex flex-wrap items-end justify-between gap-4"><div><p class="font-mono text-xs font-semibold">Correction assistée</p><h1 class="mt-1 text-4xl font-black tracking-tight">Copie de Léa Martin</h1><p class="mt-1 font-semibold">Paillasse pré-corrige selon votre barème. Vous validez, ajustez et commentez.</p></div><div class="flex flex-wrap gap-3"><button type="button" class="inline-flex h-11 items-center gap-2 border-2 border-black px-4 text-sm font-extrabold bg-white hover:bg-[#FFFBEA]">← Précédente</button><button type="button" class="inline-flex h-11 items-center gap-2 border-2 border-black px-4 text-sm font-extrabold bg-white hover:bg-[#FFFBEA]">Suivante →</button><button type="button" class="inline-flex h-11 items-center gap-2 border-2 border-black px-4 text-sm font-extrabold bg-[#7CF2C0] shadow-[3px_3px_0px_#000000]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Valider et publier</button></div></div><div class="mt-6 grid gap-6 xl:grid-cols-2">
<section id="copie" class="border-2 border-black bg-white" aria-labelledby="t-copie"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-copie" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/></svg>Rendu de l’élève</h2></div><div class="grid gap-4 p-4 text-sm"><div><p class="font-mono text-xs font-semibold uppercase">Question 2 · masque</p><p class="mt-1 border-2 border-black bg-[#FFFBEA] p-3 font-medium">J’emprunte 2 bits car 2² = 4 sous-réseaux. Le masque devient /26 soit 255.255.255.192.</p></div><div><p class="font-mono text-xs font-semibold uppercase">Question 4 · plan d’adressage</p><table class="mt-1 w-full border-collapse border-2 border-black font-mono text-xs"><tr class="bg-[#F6F5F1]"><th class="border-2 border-black p-1.5 text-left">SR</th><th class="border-2 border-black p-1.5 text-left">Réseau</th><th class="border-2 border-black p-1.5 text-left">Broadcast</th></tr><tr><td class="border-2 border-black p-1.5">SR1</td><td class="border-2 border-black p-1.5">.0</td><td class="border-2 border-black p-1.5 ">.63</td></tr><tr><td class="border-2 border-black p-1.5">SR2</td><td class="border-2 border-black p-1.5">.64</td><td class="border-2 border-black p-1.5 ">.127</td></tr><tr><td class="border-2 border-black p-1.5">SR3</td><td class="border-2 border-black p-1.5">.128</td><td class="border-2 border-black p-1.5 bg-[#FF6FB5] font-semibold">.190 ✕</td></tr><tr><td class="border-2 border-black p-1.5">SR4</td><td class="border-2 border-black p-1.5">.192</td><td class="border-2 border-black p-1.5 ">.255</td></tr></table></div><div><p class="font-mono text-xs font-semibold uppercase">Question 5 · terminal (rejoué)</p><pre class="mt-1 overflow-x-auto border-2 border-black bg-[#13233A] p-3 font-mono text-xs text-white">eleve@srv:~$ sudo ip addr add 192.168.10.65/26 dev eth0
eleve@srv:~$ ip a show eth0
inet 192.168.10.65/26 scope global eth0</pre></div></div></section>
<section id="bareme" class="border-2 border-black bg-white" aria-labelledby="t-bareme"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-bareme" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Barème et pré-correction</h2><span class="border-2 border-black bg-[#FFD23F] px-2 py-0.5 font-mono text-xs font-semibold">pré-correction · à valider</span></div><ul class="divide-y-2 divide-black"><li class="grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 p-4"><span class="mt-0.5 grid h-6 w-6 place-items-center border-2 border-black text-xs font-black" style="background:#7CF2C0">✓</span><div><p class="text-sm font-bold">Masque choisi et justifié</p><p class="text-xs font-semibold">Suggestion : /26 correct, justification 2² = 4</p></div><label class="flex items-center gap-1 font-mono text-sm font-semibold"><input data-crit type="number" min="0" max="3" value="3" class="h-9 w-12 border-2 border-black text-center">/3</label></li><li class="grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 p-4"><span class="mt-0.5 grid h-6 w-6 place-items-center border-2 border-black text-xs font-black" style="background:#FF6FB5">✕</span><div><p class="text-sm font-bold">Plan d’adressage complet</p><p class="text-xs font-semibold">Suggestion : SR3 : broadcast .190 au lieu de .191</p></div><label class="flex items-center gap-1 font-mono text-sm font-semibold"><input data-crit type="number" min="0" max="5" value="4" class="h-9 w-12 border-2 border-black text-center">/5</label></li><li class="grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 p-4"><span class="mt-0.5 grid h-6 w-6 place-items-center border-2 border-black text-xs font-black" style="background:#7CF2C0">✓</span><div><p class="text-sm font-bold">Commande de configuration</p><p class="text-xs font-semibold">Suggestion : ip addr add 192.168.10.65/26 dev eth0</p></div><label class="flex items-center gap-1 font-mono text-sm font-semibold"><input data-crit type="number" min="0" max="4" value="4" class="h-9 w-12 border-2 border-black text-center">/4</label></li><li class="grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 p-4"><span class="mt-0.5 grid h-6 w-6 place-items-center border-2 border-black text-xs font-black" style="background:#FF6FB5">✕</span><div><p class="text-sm font-bold">Tests de connectivité</p><p class="text-xs font-semibold">Suggestion : ping manquant entre SR1 et SR2</p></div><label class="flex items-center gap-1 font-mono text-sm font-semibold"><input data-crit type="number" min="0" max="3" value="1" class="h-9 w-12 border-2 border-black text-center">/3</label></li><li class="grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 p-4"><span class="mt-0.5 grid h-6 w-6 place-items-center border-2 border-black text-xs font-black" style="background:#FFD23F">?</span><div><p class="text-sm font-bold">Rédaction et clarté</p><p class="text-xs font-semibold">À évaluer par vous</p></div><label class="flex items-center gap-1 font-mono text-sm font-semibold"><input data-crit type="number" min="0" max="5" value="3" class="h-9 w-12 border-2 border-black text-center">/5</label></li></ul>
<div class="border-t-2 border-black p-4"><div class="flex items-baseline justify-between"><p class="font-black">Note</p><p class="font-mono text-3xl font-semibold"><span id="k-total">15</span>/20</p></div><label class="mt-3 block text-sm font-bold">Commentaire pour l’élève<textarea rows="3" class="mt-1 w-full border-2 border-black p-2 font-medium">Bon raisonnement sur le masque. Attention au broadcast de SR3 : c’est toujours l’adresse juste avant le réseau suivant. Pense à tester avec ping.</textarea></label><div class="mt-2 flex flex-wrap gap-2 text-xs font-extrabold"><button type="button" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">+ Bravo</button><button type="button" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">+ Relis le cours</button><button type="button" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">+ Attention aux calculs</button><button type="button" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">+ Pense à tester</button></div></div></section>
</div>
<p class="mt-6 border-2 border-black bg-white p-4 text-sm font-semibold">La pré-correction vérifie ce qui est vérifiable (calculs, commandes rejouées dans la VM, tests de code). Elle ne décide jamais seule : la note n’est publiée qu’après votre validation.</p>
<script>document.addEventListener('DOMContentLoaded',function(){function t(){var s=0;document.querySelectorAll('[data-crit]').forEach(function(i){s+=+i.value||0;});document.getElementById('k-total').textContent=s;}document.querySelectorAll('[data-crit]').forEach(function(i){i.addEventListener('input',t);});t();document.querySelectorAll('#bareme button').forEach(function(b){b.addEventListener('click',function(){var a=document.querySelector('#bareme textarea');a.value+=' '+b.textContent.replace('+ ','')+'.';});});});</script></div></div></div>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,242 @@
@extends('layouts.vitrine')
@section('titre', 'CM · Adressage IPv4')
@section('contenu')
<div class="sticky top-0 z-30 border-b-4 border-black bg-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-4 px-5 py-3 lg:px-10">
<span class="border-2 border-black bg-white px-2 font-mono text-sm font-semibold">CM</span>
<p class="min-w-0 flex-1 truncate font-extrabold">Adressage IPv4 et sous-réseaux</p>
<p class="font-mono text-sm font-semibold">Lu : <span id="pct">0</span> %</p>
<p class="flex items-center gap-2 border-2 border-black bg-[#FFD23F] px-3 py-1 font-mono font-semibold" role="timer"><span aria-hidden="true">⏱</span><span id="chrono">00:00</span><span class="text-xs">/ 20:00 conseillées</span></p>
</div>
<div class="h-2 bg-white"><div id="barre-lecture" class="h-full w-0 bg-[#ec3013]"></div></div>
</div>
<section class="border-b-4 border-black bg-white">
<div class="mx-auto max-w-7xl px-5 pb-12 pt-10 lg:px-10">
<nav aria-label="Fil d’Ariane" class="flex flex-wrap gap-2 font-semibold"><a href="{{ route('cours.index') }}" class="underline underline-offset-4">Cours</a><span>/</span><a href="{{ route('cours.show') }}" class="underline underline-offset-4">Adressage IPv4</a><span>/</span><span>CM</span></nav>
<h1 class="mt-6 max-w-4xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Adressage IPv4 et sous-réseaux</h1>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Lis le cours jusqu’au bout. Le QCM de lecture se débloque quand toutes les parties ont été lues et que 5 minutes se sont écoulées.</p>
<ol class="mt-8 flex flex-wrap gap-2 text-sm font-extrabold" aria-label="Parcours">
<li class="border-2 border-black bg-black px-3 py-1 text-white">1 · CM</li><li class="border-2 border-black bg-[#FFD23F] px-3 py-1">2 · QCM de lecture</li><li class="border-2 border-dashed border-black bg-white px-3 py-1">3 · TD optionnel</li><li class="border-2 border-black bg-[#7CF2C0] px-3 py-1">4 · TP</li><li class="border-2 border-black bg-[#ec3013] px-3 py-1 text-white">5 · Examen</li>
</ol>
</div>
</section>
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-14 lg:grid-cols-12 lg:px-10">
<nav class="lg:col-span-3" aria-label="Parties du cours">
<ol class="sticky top-24 grid gap-2">
<li><a href="#pourquoi" data-lien="pourquoi" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>1. Pourquoi des adresses ?</a></li>
<li><a href="#bits" data-lien="bits" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>2. Une adresse, 32 bits</a></li>
<li><a href="#masque" data-lien="masque" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>3. Le masque de sous-réseau</a></li>
<li><a href="#et" data-lien="et" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>4. Trouver l’adresse réseau : le ET logique</a></li>
<li><a href="#diffusion" data-lien="diffusion" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>5. Diffusion et nombre d’hôtes</a></li>
<li><a href="#decoupe" data-lien="decoupe" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>6. Découper un réseau en sous-réseaux</a></li>
<li><a href="#privees" data-lien="privees" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>7. Adresses privées et adresses particulières</a></li>
<li><a href="#retenir" data-lien="retenir" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>8. À retenir</a></li>
</ol>
</nav>
<article class="grid gap-16 text-lg font-medium leading-relaxed lg:col-span-9">
<section id="pourquoi" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-pourquoi">
<h2 id="t-pourquoi" class="text-4xl font-black leading-tight tracking-tighter">1. Pourquoi des adresses ?</h2>
<p>Sur un réseau, chaque machine doit pouvoir être trouvée. Comme une lettre a besoin d’une adresse postale, un paquet a besoin d’une adresse IP de destination.</p>
<div class="grid gap-4 sm:grid-cols-2">
<div class="border-4 border-black bg-[#C4B5FD] p-5"><p class="font-mono text-sm font-semibold">La rue</p><p class="mt-1 text-2xl font-black">= le réseau</p><p class="mt-2 font-semibold">Toutes les maisons de la rue partagent le même nom de rue.</p></div>
<div class="border-4 border-black bg-[#7CF2C0] p-5"><p class="font-mono text-sm font-semibold">Le numéro</p><p class="mt-1 text-2xl font-black">= l’hôte</p><p class="mt-2 font-semibold">Chaque maison a son numéro, unique dans la rue.</p></div>
</div>
<p>Une adresse IPv4 contient les deux informations. Le <strong>masque</strong> indique où s’arrête la rue et où commence le numéro.</p>
</section>
<section id="video" class="grid scroll-mt-28 gap-4 border-4 border-black bg-[#13233A] p-6 text-white shadow-[8px_8px_0px_#FF6FB5]" aria-labelledby="t-video">
<h2 id="t-video" class="text-3xl font-black">Vidéo de contexte</h2>
<div id="v-cadre" class="grid aspect-video place-items-center border-4 border-black bg-[#0D192B] text-center"><p class="max-w-md px-4 font-semibold text-[#9fb0c8]">Ton prof peut ajouter ici une vidéo YouTube pour illustrer le cours.</p></div>
<form id="v-form" class="flex flex-wrap gap-3"><label class="sr-only" for="v-url">Lien YouTube</label><input id="v-url" class="min-w-[240px] flex-1 border-4 border-black px-3 py-2 font-mono text-sm font-semibold text-black" placeholder="https://www.youtube.com/watch?v=…"><button type="submit" class="border-4 border-black bg-[#FFD23F] px-4 py-2 font-extrabold text-black">Intégrer la vidéo</button></form>
<p class="text-sm font-semibold text-[#9fb0c8]">Espace prof · la vidéo s’affiche en mode sans cookie (youtube-nocookie.com).</p>
</section>
<section id="bits" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-bits">
<h2 id="t-bits" class="text-4xl font-black leading-tight tracking-tighter">2. Une adresse, 32 bits</h2>
<p>Une adresse IPv4 est un nombre de <strong>32 bits</strong>. Pour la lire plus facilement, on la découpe en 4 octets de 8 bits, écrits en décimal et séparés par des points.</p>
<figure class="overflow-x-auto border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<p class="font-mono text-2xl font-semibold">192.168.10.77</p>
<div class="mt-4 flex min-w-max items-end gap-1"><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span></span><span class="self-end px-0.5 font-black">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span></span><span class="self-end px-0.5 font-black">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span></span><span class="self-end px-0.5 font-black">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span></span></div>
<figcaption class="mt-3 font-semibold">192 = 11000000 · 168 = 10101000 · 10 = 00001010 · 77 = 01001101</figcaption>
</figure>
<p>Chaque octet va de 0 (00000000) à 255 (11111111). Une adresse comme 192.168.10.300 est donc impossible.</p>
</section>
<section id="masque" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-masque">
<h2 id="t-masque" class="text-4xl font-black leading-tight tracking-tighter">3. Le masque de sous-réseau</h2>
<p>Le masque est lui aussi un nombre de 32 bits. Il commence par une suite de 1 (la partie réseau) suivie d’une suite de 0 (la partie hôte). La notation <strong>CIDR</strong> écrit simplement le nombre de 1 : <code class="border-2 border-black bg-[#FFD23F] px-1 font-mono">/26</code>.</p>
<figure class="overflow-x-auto border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<p class="font-mono text-2xl font-semibold">/26 = 255.255.255.192</p>
<div class="mt-4 flex min-w-max items-end gap-1"><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span></span><span class="self-end px-0.5 font-black">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span></span><span class="self-end px-0.5 font-black">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span></span><span class="self-end px-0.5 font-black">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#7CF2C0]">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#7CF2C0]">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#7CF2C0]">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#7CF2C0]">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#7CF2C0]">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#7CF2C0]">0</span></span></div>
<figcaption class="mt-3 flex flex-wrap gap-4 font-semibold"><span class="flex items-center gap-2"><span class="h-4 w-4 border-2 border-black bg-[#C4B5FD]"></span>26 bits de réseau</span><span class="flex items-center gap-2"><span class="h-4 w-4 border-2 border-black bg-[#7CF2C0]"></span>6 bits d’hôte</span></figcaption>
</figure>
<p>Dans le dernier octet, les 2 premiers bits valent 1 : 128 + 64 = 192. D’où 255.255.255.192.</p>
</section>
<section id="et" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-et">
<h2 id="t-et" class="text-4xl font-black leading-tight tracking-tighter">4. Trouver l’adresse réseau : le ET logique</h2>
<p>Pour trouver le réseau d’une adresse, on fait un <strong>ET logique</strong> bit à bit entre l’adresse et le masque. Le résultat vaut 1 seulement si les deux bits valent 1.</p>
<div class="grid gap-6 md:grid-cols-2">
<table class="border-4 border-black bg-white text-center font-mono text-lg shadow-[6px_6px_0px_#000000]"><caption class="sr-only">Table du ET logique</caption><thead class="bg-black text-white"><tr><th class="px-4 py-2">A</th><th class="px-4 py-2">B</th><th class="px-4 py-2">A ET B</th></tr></thead><tbody class="divide-y-2 divide-black"><tr><td class="py-1">0</td><td>0</td><td class="font-semibold">0</td></tr><tr><td class="py-1">0</td><td>1</td><td class="font-semibold">0</td></tr><tr><td class="py-1">1</td><td>0</td><td class="font-semibold">0</td></tr><tr class="bg-[#FFD23F]"><td class="py-1">1</td><td>1</td><td class="font-semibold">1</td></tr></tbody></table>
<div class="border-4 border-black bg-[#13233A] p-5 font-mono text-white shadow-[6px_6px_0px_#7CF2C0]">
<p class="text-sm text-[#9fb0c8]">Dernier octet seulement</p>
<p class="mt-2"> 01001101 <span class="text-[#9fb0c8]">(77)</span></p>
<p>ET 11000000 <span class="text-[#9fb0c8]">(192)</span></p>
<p class="border-t-2 border-white pt-1 text-[#FFD23F]">= 01000000 (64)</p>
</div>
</div>
<p>Les trois premiers octets du masque valent 255 : ils recopient l’adresse telle quelle. L’adresse réseau de 192.168.10.77/26 est donc <strong>192.168.10.64</strong>.</p>
</section>
<section id="diffusion" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-diffusion">
<h2 id="t-diffusion" class="text-4xl font-black leading-tight tracking-tighter">5. Diffusion et nombre d’hôtes</h2>
<p>L’adresse de <strong>diffusion</strong> (broadcast) met tous les bits d’hôte à 1. Un paquet envoyé à cette adresse arrive à toutes les machines du réseau.</p>
<p>Ici, les 6 bits d’hôte à 1 donnent 01111111 = 127 : la diffusion est <strong>192.168.10.127</strong>.</p>
<div class="border-4 border-black bg-[#FF6FB5] p-5 text-xl font-black shadow-[6px_6px_0px_#000000]">Hôtes utilisables = 2<sup>bits d’hôte</sup> − 2</div>
<p>On retire 2 adresses : celle du réseau et celle de diffusion. Avec 6 bits : 2⁶ − 2 = <strong>62 hôtes</strong>, de 192.168.10.65 à 192.168.10.126.</p>
</section>
<section id="decoupe" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-decoupe">
<h2 id="t-decoupe" class="text-4xl font-black leading-tight tracking-tighter">6. Découper un réseau en sous-réseaux</h2>
<p>Emprunter des bits d’hôte pour le réseau crée des sous-réseaux plus petits. Emprunter 2 bits à un /24 donne 2² = 4 sous-réseaux en /26.</p>
<figure class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<p class="font-mono font-semibold">192.168.10.0/24 découpé en 4 × /26</p>
<div class="mt-4 grid grid-cols-4 border-4 border-black font-mono text-sm font-semibold">
<div class="border-r-4 border-black bg-[#FFD23F] p-3">.0<br>→ .63</div><div class="border-r-4 border-black bg-[#7CF2C0] p-3">.64<br>→ .127</div><div class="border-r-4 border-black bg-[#C4B5FD] p-3">.128<br>→ .191</div><div class="bg-[#FF6FB5] p-3">.192<br>→ .255</div>
</div>
<figcaption class="mt-3 font-semibold">Chaque bloc : 64 adresses, 62 hôtes. L’adresse .77 tombe dans le 2ᵉ bloc.</figcaption>
</figure>
<p>Astuce : la taille d’un bloc vaut 256 moins la valeur du dernier octet du masque. Pour 192 : 256 − 192 = 64.</p>
</section>
<section id="privees" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-privees">
<h2 id="t-privees" class="text-4xl font-black leading-tight tracking-tighter">7. Adresses privées et adresses particulières</h2>
<p>Certaines plages sont réservées aux réseaux internes (RFC 1918). Elles ne sont pas routées sur Internet.</p>
<ul class="grid gap-3 sm:grid-cols-3"><li class="border-4 border-black bg-[#FFD23F] p-4 font-mono text-lg font-semibold">10.0.0.0/8</li><li class="border-4 border-black bg-[#7CF2C0] p-4 font-mono text-lg font-semibold">172.16.0.0/12</li><li class="border-4 border-black bg-[#C4B5FD] p-4 font-mono text-lg font-semibold">192.168.0.0/16</li></ul>
<ul class="grid gap-2"><li class="flex flex-wrap gap-3"><span class="font-mono font-semibold">127.0.0.1</span><span>la boucle locale : la machine elle-même</span></li><li class="flex flex-wrap gap-3"><span class="font-mono font-semibold">169.254.x.x</span><span>adresse automatique quand aucun DHCP ne répond</span></li><li class="flex flex-wrap gap-3"><span class="font-mono font-semibold">0.0.0.0</span><span>« n’importe quelle adresse » ou « pas encore d’adresse »</span></li><li class="flex flex-wrap gap-3"><span class="font-mono font-semibold">255.255.255.255</span><span>diffusion limitée au réseau local</span></li></ul>
</section>
<section id="retenir" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-retenir">
<h2 id="t-retenir" class="text-4xl font-black leading-tight tracking-tighter">8. À retenir</h2>
<ul class="grid gap-3"><li class="flex gap-3 border-2 border-black bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Une adresse IPv4 = 32 bits = 4 octets de 0 à 255.</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Le masque sépare la partie réseau de la partie hôte. /n = n bits à 1.</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Adresse réseau = adresse ET masque. Diffusion = bits d’hôte à 1.</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Hôtes utilisables = 2<sup>bits d’hôte</sup> − 2.</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Taille d’un bloc = 256 − dernier octet du masque.</span></li></ul>
</section>
<section id="qcm-lecture" class="scroll-mt-28 border-4 border-black bg-[#FFD23F] p-6 shadow-[10px_10px_0px_#000000]" aria-labelledby="t-lecture">
<h2 id="t-lecture" class="text-4xl font-black tracking-tighter">QCM de lecture</h2>
<p class="mt-3 font-semibold">4 questions sur les notions du texte, pour vérifier que tu as bien lu.</p>
<div id="verrou" class="mt-6 border-4 border-black bg-white p-5">
<p class="text-xl font-black">🔒 Encore un peu de lecture</p>
<p id="verrou-texte" class="mt-2 font-semibold">Parties lues : 0 / 8 · Temps : 0 / 5 min</p>
<button type="button" id="debloquer" class="mt-4 text-sm font-bold underline underline-offset-4">Aperçu : débloquer sans attendre</button>
</div>
<form id="form-lecture" hidden class="mt-6 grid gap-6">
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="2">
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 1</legend>
<p class="text-xl font-extrabold">Combien de bits contient une adresse IPv4 ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l0" value="0" class="h-5 w-5 accent-black"><span>8</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l0" value="1" class="h-5 w-5 accent-black"><span>16</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l0" value="2" class="h-5 w-5 accent-black"><span>32</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l0" value="3" class="h-5 w-5 accent-black"><span>64</span></label>
</div>
<div data-correction hidden class="mt-4 border-2 border-black p-4"><p data-verdict class="font-black"></p><p class="mt-1 font-medium">Une adresse IPv4 fait 32 bits, découpés en 4 octets de 8 bits (partie 2).</p></div>
</fieldset>
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 2</legend>
<p class="text-xl font-extrabold">Dans l’analogie de l’adresse postale, à quoi correspond le numéro de la maison ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l1" value="0" class="h-5 w-5 accent-black"><span>Au réseau</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l1" value="1" class="h-5 w-5 accent-black"><span>À l’hôte</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l1" value="2" class="h-5 w-5 accent-black"><span>Au masque</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l1" value="3" class="h-5 w-5 accent-black"><span>À la diffusion</span></label>
</div>
<div data-correction hidden class="mt-4 border-2 border-black p-4"><p data-verdict class="font-black"></p><p class="mt-1 font-medium">La rue représente le réseau, le numéro représente l’hôte, unique dans ce réseau (partie 1).</p></div>
</fieldset>
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="2">
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 3</legend>
<p class="text-xl font-extrabold">Quelle opération permet de trouver l’adresse réseau ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l2" value="0" class="h-5 w-5 accent-black"><span>Un OU logique</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l2" value="1" class="h-5 w-5 accent-black"><span>Une addition</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l2" value="2" class="h-5 w-5 accent-black"><span>Un ET logique</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l2" value="3" class="h-5 w-5 accent-black"><span>Une soustraction</span></label>
</div>
<div data-correction hidden class="mt-4 border-2 border-black p-4"><p data-verdict class="font-black"></p><p class="mt-1 font-medium">On fait un ET logique bit à bit entre l’adresse et le masque (partie 4).</p></div>
</fieldset>
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 4</legend>
<p class="text-xl font-extrabold">Laquelle de ces adresses est privée ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l3" value="0" class="h-5 w-5 accent-black"><span>8.8.8.8</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l3" value="1" class="h-5 w-5 accent-black"><span>172.20.4.1</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l3" value="2" class="h-5 w-5 accent-black"><span>172.32.0.1</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l3" value="3" class="h-5 w-5 accent-black"><span>193.168.1.1</span></label>
</div>
<div data-correction hidden class="mt-4 border-2 border-black p-4"><p data-verdict class="font-black"></p><p class="mt-1 font-medium">172.16.0.0/12 va de 172.16.0.0 à 172.31.255.255. 172.20.4.1 en fait partie, pas 172.32.0.1 (partie 7).</p></div>
</fieldset>
<div class="flex flex-wrap items-center gap-5"><button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">Valider ma lecture</button><p id="score-lecture" hidden class="border-4 border-black bg-white px-4 py-2 text-2xl font-black"></p></div>
</form>
</section>
<section class="border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000]" aria-labelledby="t-plus">
<h2 id="t-plus" class="text-2xl font-black">Pour aller plus loin</h2>
<p class="mt-2 font-semibold">Des plateformes externes pour s’entraîner encore, à ton rythme. Elles ne font pas partie de Paillasse.</p>
<div class="mt-4"><ul class="grid gap-2"><li><a href="https://www.hackerrank.com/domains/python" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>HackerRank · Python</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.hackerrank.com/domains/sql" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>HackerRank · SQL</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.hackerrank.com/domains/shell" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>HackerRank · Linux Shell</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.datacamp.com/category/python" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>DataCamp · Python</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.datacamp.com/category/sql" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>DataCamp · SQL</span><span class="font-mono" aria-hidden="true">↗</span></a></li></ul></div>
</section>
<section id="suite" hidden class="grid gap-6 md:grid-cols-3" aria-label="Étapes suivantes">
<a href="{{ route('cours.show') }}#td" class="relative border-4 border-dashed border-black bg-white p-6 shadow-[6px_6px_0px_#000000] hover:-translate-y-1"><span class="absolute -right-3 -top-4 rotate-3 border-2 border-black bg-[#C4B5FD] px-2 text-sm font-extrabold">Optionnel</span><p class="font-mono text-sm font-semibold">Étape 3</p><p class="mt-2 text-2xl font-black">TD corrigé</p><p class="mt-2 font-semibold">3 exercices pour s’entraîner.</p></a>
<a href="{{ route('labs.essai') }}" class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000] hover:-translate-y-1"><p class="font-mono text-sm font-semibold">Étape 4</p><p class="mt-2 text-2xl font-black">TP sur VM</p><p class="mt-2 font-semibold">Deux VM, un routeur, 45 min.</p></a>
<a href="{{ route('examen') }}" class="border-4 border-black bg-black p-6 text-white shadow-[6px_6px_0px_#ec3013] hover:-translate-y-1"><p class="font-mono text-sm font-semibold">Étape 5</p><p class="mt-2 text-2xl font-black">Examen</p><p class="mt-2 font-semibold">Quand ton prof le programme.</p></a>
</section>
</article>
</div>
<script>
(function () {
var debut = Date.now(), vues = {}, total = 8, MIN = 300, force = false;
var chrono = document.getElementById('chrono'), pct = document.getElementById('pct'), barre = document.getElementById('barre-lecture');
var verrou = document.getElementById('verrou'), vt = document.getElementById('verrou-texte'), form = document.getElementById('form-lecture');
function s() { return Math.floor((Date.now() - debut) / 1000); }
function maj() {
var t = s(), n = Object.keys(vues).length;
chrono.textContent = String(Math.floor(t / 60)).padStart(2, '0') + ':' + String(t % 60).padStart(2, '0');
var p = Math.round(n / total * 100); pct.textContent = p; barre.style.width = p + '%';
vt.textContent = 'Parties lues : ' + n + ' / ' + total + ' · Temps : ' + Math.min(5, Math.floor(t / 60)) + ' / 5 min';
if (force || (n === total && t >= MIN)) { verrou.hidden = true; form.hidden = false; }
}
var io = new IntersectionObserver(function (es) {
es.forEach(function (e) {
if (e.isIntersecting && e.intersectionRatio > 0.35) {
vues[e.target.id] = true;
var a = document.querySelector('[data-lien="' + e.target.id + '"]');
if (a) { a.classList.add('bg-[#7CF2C0]'); a.querySelector('[data-coche]').textContent = '✓'; a.querySelector('[data-coche]').classList.add('bg-black', 'text-white'); }
}
});
maj();
}, { threshold: [0.35] });
document.querySelectorAll('[data-partie]').forEach(function (el) { io.observe(el); });
document.getElementById('debloquer').addEventListener('click', function () { force = true; maj(); });
setInterval(maj, 1000); maj();
})();
(function () {
var form = document.getElementById('form-lecture'), score = document.getElementById('score-lecture');
form.addEventListener('submit', function (e) {
e.preventDefault();
var bons = 0, total = 0;
form.querySelectorAll('[data-q]').forEach(function (q) {
total++;
var choix = q.querySelector('input:checked'), ok = choix && choix.value === q.dataset.ok, c = q.querySelector('[data-correction]');
if (ok) bons++;
c.hidden = false; c.className = 'mt-4 border-2 border-black p-4 ' + (ok ? 'bg-[#7CF2C0]' : 'bg-[#FFD9E8]');
q.querySelector('[data-verdict]').textContent = ok ? 'Bonne réponse.' : (choix ? 'Pas tout à fait.' : 'Pas de réponse.');
q.querySelectorAll('label').forEach(function (l, i) { var b = String(i) === q.dataset.ok; l.classList.toggle('outline', b); l.classList.toggle('outline-4', b); l.classList.toggle('outline-black', b); });
});
score.hidden = false; score.textContent = bons + ' / ' + total;
document.getElementById('suite').hidden = false;
});
})();
(function () {
var cadre = document.getElementById('v-cadre'), cle = 'paillasse-video-' + location.pathname;
function montrer(u) {
var m = String(u).match(/(?:youtu\.be\/|v=|embed\/|shorts\/)([\w-]{11})/); if (!m) return false;
cadre.innerHTML = '<iframe class="h-full w-full" src="https://www.youtube-nocookie.com/embed/' + m[1] + '" title="Vidéo de contexte" allow="accelerometer; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
return true;
}
var s = localStorage.getItem(cle); if (s) montrer(s);
document.getElementById('v-form').addEventListener('submit', function (e) { e.preventDefault(); var u = document.getElementById('v-url').value; if (montrer(u)) localStorage.setItem(cle, u); else alert('Lien YouTube non reconnu.'); });
})();
</script>
@endsection

View file

@ -0,0 +1,88 @@
@extends('layouts.vitrine')
@section('titre', 'Cours gratuits')
@section('contenu')
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="zigzag absolute right-10 top-16 h-4 w-40"></span><span class="etoile flotte absolute right-[22%] bottom-24 h-10 w-10 bg-[#C4B5FD] [--r:12deg]"></span><span class="flotte absolute right-[8%] bottom-10 h-9 w-9 rounded-full border-4 border-black bg-[#7CF2C0] [animation-delay:1.5s]"></span></div>
<div class="relative mx-auto max-w-7xl px-5 pb-16 pt-14 lg:px-10 lg:pt-20">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Gratuit, sans compte</p>
<h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">99 cours gratuits, calés sur vos référentiels.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Chaque cours suit le découpage de l’Éducation nationale : un CM pour comprendre, un TD pour s’exercer sur papier, un TP sur une vraie VM, un QCM corrigé et expliqué.</p>
<dl class="mt-12 grid max-w-3xl grid-cols-2 border-4 border-black sm:grid-cols-4">
<div class="border-b-4 border-r-4 border-black bg-white p-4 sm:border-b-0"><dt class="font-mono text-sm font-semibold">Cours</dt><dd class="text-4xl font-black">99</dd></div>
<div class="border-b-4 border-black bg-[#C4B5FD] p-4 sm:border-b-0 sm:border-r-4"><dt class="font-mono text-sm font-semibold">TD</dt><dd class="text-4xl font-black">45</dd></div>
<div class="border-r-4 border-black bg-[#7CF2C0] p-4"><dt class="font-mono text-sm font-semibold">TP sur VM</dt><dd class="text-4xl font-black">59</dd></div>
<div class="bg-[#FFD23F] p-4"><dt class="font-mono text-sm font-semibold">QCM corrigés</dt><dd class="text-4xl font-black">98</dd></div>
</dl>
<div class="mt-8 flex flex-wrap gap-4"><a href="{{ route('bibliotheque') }}" class="inline-flex items-center gap-3 border-4 border-black bg-black px-5 py-3 font-extrabold text-white shadow-[4px_4px_0px_#ec3013]">Bibliothèque complète · 225 fiches →</a><a href="{{ route('generateur') }}" class="inline-flex items-center gap-3 border-4 border-black bg-[#FF6FB5] px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">Générateur de TD</a><a href="{{ route('ide') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">IDE en ligne</a></div>
</div>
</section>
<nav class="sticky top-0 z-20 border-b-4 border-black bg-white" aria-label="Filtres des cours">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-3 px-5 py-4 lg:px-10">
<span class="mr-1 font-extrabold">Cursus</span>
<a href="#nsi" class="border-2 border-black bg-[#FFD23F] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Lycée NSI</a>
<a href="#sio" class="border-2 border-black bg-[#7CF2C0] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">BTS SIO SISR</a>
<a href="#ciel" class="border-2 border-black bg-[#C4B5FD] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">BTS CIEL</a>
<a href="#but" class="border-2 border-black bg-[#FF6FB5] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">BUT R&amp;T</a>
<a href="#tssr" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Titre pro TSSR</a>
<a href="#prog" class="border-2 border-black bg-[#FF6FB5] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Programmation</a>
<div class="ml-auto flex flex-wrap items-center gap-2" role="group" aria-label="Filtrer par type">
<span class="mr-1 font-extrabold">Contient</span>
<button type="button" data-filtre="Tout" aria-pressed="true" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">Tout</button>
<button type="button" data-filtre="TD" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">TD</button>
<button type="button" data-filtre="TP" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">TP</button>
<button type="button" data-filtre="QCM" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">QCM</button>
<button type="button" data-filtre="IDE" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">IDE</button>
</div>
</div>
</nav>
<div class="border-b-4 border-black bg-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-4 px-5 py-3 text-sm font-semibold lg:px-10">
<span class="flex items-center gap-2"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span> Cours magistral</span>
<span class="flex items-center gap-2"><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span> Travaux dirigés, corrigés</span>
<span class="flex items-center gap-2"><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span> Travaux pratiques sur VM</span>
<span class="flex items-center gap-2"><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span> Quiz à correction expliquée</span>
<span class="flex items-center gap-2"><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span> Exercice de code dans l’IDE</span>
</div>
</div>
@php
$cursus = config('cours');
$fond = ['CM' => 'bg-white', 'TD' => 'bg-[#C4B5FD]', 'TP' => 'bg-[#7CF2C0]', 'QCM' => 'bg-[#FFD23F]', 'IDE' => 'bg-[#13233A] text-white'];
@endphp
@foreach ($cursus as $c)
<section id="{{ $c['id'] }}" class="scroll-mt-24 border-b-4 border-black" aria-labelledby="t-{{ $c['id'] }}">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="flex flex-wrap items-end gap-x-8 gap-y-3">
<h2 id="t-{{ $c['id'] }}" class="inline-block {{ $loop->odd ? '-rotate-1' : 'rotate-1' }} border-4 border-black {{ $c['couleur'] }} px-4 py-1 text-5xl font-black tracking-tighter shadow-[6px_6px_0px_#000000] sm:text-6xl">{{ $c['nom'] }}</h2>
<p class="text-lg font-semibold">{{ $c['sous_titre'] }} · {{ collect($c['blocs'])->sum(fn ($b) => count($b['cours'])) }} cours</p>
</div>
<div class="mt-12 grid gap-10 lg:grid-cols-2">
@foreach ($c['blocs'] as $b)
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] {{ $loop->even ? 'lg:translate-y-6' : '' }}">
<h3 class="border-b-4 border-black {{ $c['couleur'] }} px-5 py-3 text-lg font-black">{{ $b['titre'] }}</h3>
<ul class="divide-y-2 divide-black">
@foreach ($b['cours'] as $k)
<li data-types="{{ implode(' ', $k['types']) }}"><a href="{{ isset($k['exercice']) ? route('ide', ['ex' => $k['exercice']]) : route('cours.show') }}" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">{{ $k['titre'] }}</span><span class="flex gap-1">@foreach ($k['types'] as $t)<span class="border-2 border-black {{ $fond[$t] }} px-1.5 font-mono text-xs font-semibold">{{ $t }}</span>@endforeach</span><span class="w-10 text-right font-mono text-sm font-semibold">{{ $k['heures'] }} h</span></a></li>
@endforeach
</ul>
</div>
@endforeach
</div>
</div>
</section>
@endforeach
<script>
document.querySelectorAll('[data-filtre]').forEach(function (b) {
b.addEventListener('click', function () {
var f = b.dataset.filtre;
document.querySelectorAll('[data-filtre]').forEach(function (x) { x.setAttribute('aria-pressed', x === b); });
document.querySelectorAll('[data-types]').forEach(function (li) {
li.hidden = f !== 'Tout' && li.dataset.types.split(' ').indexOf(f) === -1;
});
document.querySelectorAll('[data-bloc]').forEach(function (b) { b.hidden = !b.querySelector('[data-types]:not([hidden])'); });
document.querySelectorAll('section[id]').forEach(function (s) { if (s.querySelector('[data-bloc]')) s.hidden = !s.querySelector('[data-bloc]:not([hidden])'); });
});
});
</script>
@endsection

View file

@ -0,0 +1,224 @@
@extends('layouts.vitrine')
@section('titre', 'Adressage IPv4 et sous-réseaux')
@section('contenu')
<section class="border-b-4 border-black bg-[#7CF2C0]">
<div class="mx-auto max-w-7xl px-5 pb-14 pt-10 lg:px-10">
<nav aria-label="Fil d’Ariane" class="flex flex-wrap gap-2 font-semibold"><a href="{{ route('cours.index') }}" class="underline underline-offset-4">Cours</a><span>/</span><a href="{{ route('cours.index') }}#sio" class="underline underline-offset-4">BTS SIO SISR</a><span>/</span><span>Bloc 2</span></nav>
<h1 class="mt-6 max-w-4xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Adressage IPv4 et sous-réseaux</h1>
<div class="mt-8 flex flex-wrap gap-3 text-sm font-extrabold">
<span class="border-2 border-black bg-white px-3 py-1">BTS SIO SISR · Bloc 2</span>
<span class="border-2 border-black bg-white px-3 py-1">Aussi : BTS CIEL, BUT R&amp;T S1</span>
<span class="border-2 border-black bg-black px-3 py-1 text-white">4 h</span>
</div>
</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="Parties du cours">
<ol class="sticky top-6 grid gap-3">
<li><a href="{{ route('cours.cm') }}" class="flex items-center gap-3 border-4 border-black bg-white px-4 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFFBEA]"><span class="font-mono">1</span> CM · Lire</a></li>
<li><a href="#qcm" class="flex items-center gap-3 border-4 border-black bg-[#FFD23F] px-4 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><span class="font-mono">2</span> QCM · Valider</a></li>
<li><a href="#td" class="flex items-center gap-3 border-4 border-dashed border-black bg-[#C4B5FD] px-4 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><span class="font-mono">3</span> TD · optionnel</a></li>
<li><a href="#tp" class="flex items-center gap-3 border-4 border-black bg-[#7CF2C0] px-4 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><span class="font-mono">4</span> TP · Pratiquer</a></li>
<li><a href="#exam" class="flex items-center gap-3 border-4 border-black bg-black px-4 py-3 font-extrabold text-white shadow-[4px_4px_0px_#ec3013] hover:bg-[#ec3013]"><span class="font-mono">5</span> Examen</a></li>
</ol>
</nav>
<div class="grid gap-20 lg:col-span-9">
<section id="cm" class="scroll-mt-6" aria-labelledby="t-cm">
<h2 id="t-cm" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">1 · CM ·</span> Lire le cours</h2>
<a href="{{ route('cours.cm') }}" class="mt-8 grid gap-6 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] transition-transform hover:-translate-y-1 md:grid-cols-[1fr_auto]">
<div>
<p class="text-3xl font-black leading-tight">Adressage IPv4 et sous-réseaux · cours complet</p>
<p class="mt-3 text-lg font-semibold">8 parties illustrées : bits, masque, ET logique, diffusion, découpage, adresses privées. Chronométré, à lire en entier pour débloquer le QCM de lecture.</p>
</div>
<div class="grid content-start gap-2 text-center"><span class="border-4 border-black bg-[#FFD23F] px-4 py-2 font-mono text-2xl font-semibold">⏱ 20 min</span><span class="font-extrabold">Lire le CM →</span></div>
</a>
</section>
<section id="qcm" class="scroll-mt-6" aria-labelledby="t-qcm">
<div class="flex flex-wrap items-end justify-between gap-4">
<h2 id="t-qcm" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">2 · QCM ·</span> Valider les notions</h2>
<p class="font-semibold">5 questions · correction expliquée</p>
</div>
<form id="qcm-form" class="mt-8 grid gap-6">
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 1</legend>
<p class="text-xl font-extrabold">Combien d’adresses d’hôtes utilisables dans un réseau /27 ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q0" value="0" class="h-5 w-5 accent-black"><span class="font-mono">32</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q0" value="1" class="h-5 w-5 accent-black"><span class="font-mono">30</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q0" value="2" class="h-5 w-5 accent-black"><span class="font-mono">27</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q0" value="3" class="h-5 w-5 accent-black"><span class="font-mono">62</span></label>
</div>
<div data-correction hidden class="mt-4 border-2 border-black p-4">
<p data-verdict class="font-black"></p>
<p class="mt-1 font-medium">Un /27 laisse 32 − 27 = 5 bits pour les hôtes, soit 2⁵ = 32 adresses. On retire l’adresse du réseau et celle de diffusion : il reste 30 hôtes.</p>
</div>
</fieldset>
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="2">
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 2</legend>
<p class="text-xl font-extrabold">Quelle est l’adresse réseau de 10.0.3.200/22 ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q1" value="0" class="h-5 w-5 accent-black"><span class="font-mono">10.0.3.0</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q1" value="1" class="h-5 w-5 accent-black"><span class="font-mono">10.0.2.0</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q1" value="2" class="h-5 w-5 accent-black"><span class="font-mono">10.0.0.0</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q1" value="3" class="h-5 w-5 accent-black"><span class="font-mono">10.0.4.0</span></label>
</div>
<div data-correction hidden class="mt-4 border-2 border-black p-4">
<p data-verdict class="font-black"></p>
<p class="mt-1 font-medium">Le masque /22 vaut 255.255.252.0. Sur le 3ᵉ octet, 3 ET 252 = 0. L’adresse réseau est donc 10.0.0.0, et le réseau va jusqu’à 10.0.3.255.</p>
</div>
</fieldset>
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 3</legend>
<p class="text-xl font-extrabold">Quel masque correspond à /26 ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q2" value="0" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.128</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q2" value="1" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.192</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q2" value="2" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.224</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q2" value="3" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.240</span></label>
</div>
<div data-correction hidden class="mt-4 border-2 border-black p-4">
<p data-verdict class="font-black"></p>
<p class="mt-1 font-medium">26 bits = 24 bits (255.255.255) + 2 bits dans le dernier octet. 2 bits à 1 à gauche : 128 + 64 = 192.</p>
</div>
</fieldset>
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 4</legend>
<p class="text-xl font-extrabold">192.168.1.130/25 et 192.168.1.100/25 sont-ils dans le même réseau ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q3" value="0" class="h-5 w-5 accent-black"><span class="font-mono">Oui</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q3" value="1" class="h-5 w-5 accent-black"><span class="font-mono">Non</span></label>
</div>
<div data-correction hidden class="mt-4 border-2 border-black p-4">
<p data-verdict class="font-black"></p>
<p class="mt-1 font-medium">Avec /25, le dernier octet se coupe en deux blocs : 0 à 127 et 128 à 255. 100 est dans le premier, 130 dans le second. Il faut un routeur pour qu’ils communiquent.</p>
</div>
</fieldset>
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 5</legend>
<p class="text-xl font-extrabold">Quelle commande affiche les adresses IP sous Debian ?</p>
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q4" value="0" class="h-5 w-5 accent-black"><span class="font-mono">ipconfig</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q4" value="1" class="h-5 w-5 accent-black"><span class="font-mono">ip addr</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q4" value="2" class="h-5 w-5 accent-black"><span class="font-mono">ifconfig /all</span></label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q4" value="3" class="h-5 w-5 accent-black"><span class="font-mono">netstat -r</span></label>
</div>
<div data-correction hidden class="mt-4 border-2 border-black p-4">
<p data-verdict class="font-black"></p>
<p class="mt-1 font-medium">ip addr (ou ip a) fait partie d’iproute2, installé par défaut. ipconfig est une commande Windows, et ifconfig vient de net-tools, qui n’est plus installé par défaut.</p>
</div>
</fieldset>
<div class="flex flex-wrap items-center gap-5">
<button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Corriger mon QCM</button>
<button type="reset" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none">Recommencer</button>
<p id="qcm-score" class="border-4 border-black bg-[#FFD23F] px-4 py-2 text-2xl font-black" hidden></p>
</div>
</form>
</section>
<section id="td" class="scroll-mt-6" aria-labelledby="t-td">
<h2 id="t-td" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">3 · TD ·</span> S’exercer <span class="ml-2 inline-block rotate-2 border-2 border-black bg-[#C4B5FD] px-2 align-middle text-base">optionnel</span></h2>
<ol class="mt-8 grid gap-6">
<li class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000] ">
<p class="font-mono text-sm font-semibold">Exercice 1</p>
<p class="mt-2 text-xl font-extrabold">Pour 172.16.5.130/25, donnez l’adresse réseau, la diffusion et le nombre d’hôtes.</p>
<details class="mt-4 border-2 border-black bg-white">
<summary class="cursor-pointer px-4 py-2 font-extrabold">Voir la correction expliquée</summary>
<p class="border-t-2 border-black px-4 py-3 font-medium">Un /25 coupe le dernier octet en blocs de 128. 130 est dans le bloc 128–255. Réseau : 172.16.5.128. Diffusion : 172.16.5.255. Hôtes : 2⁷ − 2 = 126.</p>
</details>
</li>
<li class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000] md:ml-10">
<p class="font-mono text-sm font-semibold">Exercice 2</p>
<p class="mt-2 text-xl font-extrabold">Découpez 192.168.1.0/24 en 4 sous-réseaux de même taille.</p>
<details class="mt-4 border-2 border-black bg-white">
<summary class="cursor-pointer px-4 py-2 font-extrabold">Voir la correction expliquée</summary>
<p class="border-t-2 border-black px-4 py-3 font-medium">4 sous-réseaux = 2 bits empruntés, donc /26. Sous-réseaux : 192.168.1.0, .64, .128 et .192, avec 62 hôtes chacun.</p>
</details>
</li>
<li class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000] ">
<p class="font-mono text-sm font-semibold">Exercice 3</p>
<p class="mt-2 text-xl font-extrabold">Le service comptabilité a 50 postes. Quel est le plus petit sous-réseau qui convient ?</p>
<details class="mt-4 border-2 border-black bg-white">
<summary class="cursor-pointer px-4 py-2 font-extrabold">Voir la correction expliquée</summary>
<p class="border-t-2 border-black px-4 py-3 font-medium">Il faut 2ʰ − 2 ≥ 50. Avec h = 6 : 64 − 2 = 62. On garde 6 bits d’hôte, soit un /26 (255.255.255.192). Un /27 ne donnerait que 30 hôtes.</p>
</details>
</li>
</ol>
</section>
<section id="tp" class="scroll-mt-6" aria-labelledby="t-tp">
<h2 id="t-tp" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">4 · TP ·</span> Pratiquer sur VM</h2>
<div class="mt-8 grid gap-8 md:grid-cols-2">
<div class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000]">
<h3 class="text-2xl font-black">Deux VM, un routeur</h3>
<ol class="mt-4 grid gap-2 font-semibold">
<li>1. Placez deux VM dans 192.168.10.0/26.</li>
<li>2. Vérifiez qu’elles se joignent avec ping.</li>
<li>3. Passez la seconde en 192.168.10.70/26.</li>
<li>4. Constatez l’échec, puis ajoutez une route.</li>
</ol>
<p class="mt-4 font-mono text-sm font-semibold">4 étapes vérifiées automatiquement · 45 min</p>
<a href="{{ route('labs.essai') }}" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none mt-6">Lancer le TP <span class="font-mono" aria-hidden="true">→</span></a>
</div>
<div class="border-4 border-black bg-[#13233A] p-5 font-mono text-sm text-white shadow-[6px_6px_0px_#FF6FB5] md:translate-y-6">
<p><span class="text-[#7CF2C0]">eleve@vm1</span>:~$ sudo ip addr add 192.168.10.10/26 dev ens3</p>
<p><span class="text-[#7CF2C0]">eleve@vm1</span>:~$ ip -br addr</p>
<p>ens3 UP 192.168.10.10/26</p>
<p><span class="text-[#7CF2C0]">eleve@vm1</span>:~$ ping -c 1 192.168.10.11</p>
<p>1 packets transmitted, 1 received</p>
<p class="mt-2 text-[#FFD23F]">✓ Étape 2 validée</p>
</div>
</div>
</section>
<section id="exam" class="scroll-mt-6" aria-labelledby="t-exam">
<h2 id="t-exam" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">5 · EXAMEN ·</span> Quand le prof le décide</h2>
<div class="mt-8 grid gap-6 border-4 border-black bg-black p-7 text-white shadow-[8px_8px_0px_#ec3013] md:grid-cols-[1fr_auto]">
<p class="text-xl font-bold">Le prof compose son sujet dans la banque de questions, le programme pour la classe, et suit l’épreuve en direct : sorties d’onglet, copier-coller bloqué, remise automatique.</p>
<div class="grid content-start gap-3"><a href="{{ route('examen') }}" class="border-4 border-white bg-[#ec3013] px-5 py-3 font-extrabold">Voir le mode examen</a><a href="{{ route('banque') }}" class="border-4 border-white bg-white px-5 py-3 font-extrabold text-black hover:bg-[#FFD23F]">Banque de sujets (profs)</a></div>
</div>
</section>
</div>
</div>
<script>
(function () {
var form = document.getElementById('qcm-form');
var score = document.getElementById('qcm-score');
form.addEventListener('submit', function (e) {
e.preventDefault();
var bons = 0, total = 0;
form.querySelectorAll('[data-q]').forEach(function (q) {
total++;
var choix = q.querySelector('input:checked');
var ok = choix && choix.value === q.dataset.ok;
if (ok) bons++;
var c = q.querySelector('[data-correction]');
c.hidden = false;
c.className = 'mt-4 border-2 border-black p-4 ' + (ok ? 'bg-[#7CF2C0]' : 'bg-[#FFD9E8]');
q.querySelector('[data-verdict]').textContent = ok ? 'Bonne réponse.' : (choix ? 'Pas tout à fait.' : 'Pas de réponse.');
q.querySelectorAll('label').forEach(function (l, i) {
l.classList.toggle('outline', String(i) === q.dataset.ok);
l.classList.toggle('outline-4', String(i) === q.dataset.ok);
l.classList.toggle('outline-black', String(i) === q.dataset.ok);
});
});
score.hidden = false;
score.textContent = bons + ' / ' + total;
});
form.addEventListener('reset', function () {
form.querySelectorAll('[data-correction]').forEach(function (c) { c.hidden = true; });
form.querySelectorAll('label').forEach(function (l) { l.classList.remove('outline', 'outline-4', 'outline-black'); });
score.hidden = true;
});
})();
</script>
@endsection

View file

@ -0,0 +1,64 @@
@extends('layouts.vitrine')
@section('titre', 'Devoirs maison')
@section('contenu')
<section class="border-b-4 border-black bg-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-end gap-6 px-5 pb-10 pt-10 lg:px-10">
<div class="flex-1"><p class="font-mono text-sm font-semibold">Espace enseignant · Devoirs</p><h1 class="mt-2 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Devoirs maison</h1><p class="mt-3 max-w-2xl text-lg font-semibold">Donnez un TP, un QCM, un TD ou un exercice de code à faire à la maison. Programmez l’ouverture et la date limite, suivez les rendus, corrigez et notez.</p></div>
<a href="#nouveau" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] hover:bg-[#ec3013]">+ Nouveau devoir</a>
</div>
</section>
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-12 lg:grid-cols-12 lg:px-10">
<section class="lg:col-span-7" aria-labelledby="t-liste">
<h2 id="t-liste" class="text-3xl font-black">Devoirs programmés</h2>
<ul id="liste-devoirs" class="mt-6 grid gap-5">
<li class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]"><div class="flex flex-wrap items-center gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#7CF2C0] px-2">TP sur VM</span><span class="border-2 border-black px-2">BTS SIO 1 · A</span><span class="ml-auto font-mono">⏰ Ven. 3 oct. · 23:59</span></div><p class="mt-3 text-xl font-black">TP Routage inter-VLAN</p><div class="mt-3 h-4 border-2 border-black bg-white"><div class="h-full border-r-2 border-black bg-black" style="width:75%"></div></div><p class="mt-2 font-mono text-sm font-semibold">18 / 24 rendus · <span class="bg-[#ec3013] px-1 text-white">2 en retard</span></p></li>
<li class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]"><div class="flex flex-wrap items-center gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">QCM</span><span class="border-2 border-black px-2">BTS SIO 1 · A</span><span class="ml-auto font-mono">⏰ Lun. 6 oct. · 08:00</span></div><p class="mt-3 text-xl font-black">QCM Adressage IPv4 · 2ᵉ essai</p><div class="mt-3 h-4 border-2 border-black bg-white"><div class="h-full border-r-2 border-black bg-black" style="width:46%"></div></div><p class="mt-2 font-mono text-sm font-semibold">11 / 24 rendus</p></li>
<li class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]"><div class="flex flex-wrap items-center gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FF6FB5] px-2">IDE</span><span class="border-2 border-black px-2">2nde NSI · B</span><span class="ml-auto font-mono">⏰ Mer. 8 oct. · 18:00</span></div><p class="mt-3 text-xl font-black">Défi Python : somme d’une liste</p><div class="mt-3 h-4 border-2 border-black bg-white"><div class="h-full border-r-2 border-black bg-black" style="width:18%"></div></div><p class="mt-2 font-mono text-sm font-semibold">5 / 28 rendus</p></li>
<li class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]"><div class="flex flex-wrap items-center gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#C4B5FD] px-2">TD</span><span class="border-2 border-black px-2">BTS SIO 1 · A</span><span class="ml-auto font-mono">⏰ Clos · 29 sept.</span></div><p class="mt-3 text-xl font-black">TD Découpage en sous-réseaux</p><div class="mt-3 h-4 border-2 border-black bg-white"><div class="h-full border-r-2 border-black bg-black" style="width:100%"></div></div><p class="mt-2 font-mono text-sm font-semibold">24 / 24 rendus · <span class="bg-[#ec3013] px-1 text-white">3 en retard</span></p></li>
</ul>
</section>
<section class="lg:col-span-5" aria-labelledby="t-rendus">
<div class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[8px_8px_0px_#000000]">
<h2 id="t-rendus" class="text-2xl font-black">Rendus · TD Découpage en sous-réseaux</h2>
<table class="mt-4 w-full border-4 border-black bg-white text-left text-sm"><thead class="bg-black text-white"><tr><th class="px-3 py-2">Élève</th><th class="px-3 py-2">État</th><th class="px-3 py-2">Note</th></tr></thead><tbody class="divide-y-2 divide-black">
<tr><td class="px-3 py-2"><span class="block font-extrabold">Léa Martin</span><span class="font-mono text-xs">30 sept. · 17:42</span></td><td class="px-3 py-2"><span class="border-2 border-black px-1.5 text-xs font-extrabold bg-[#7CF2C0]">Rendu</span></td><td class="px-3 py-2 font-mono font-semibold">18/20</td></tr>
<tr><td class="px-3 py-2"><span class="block font-extrabold">Yanis Benali</span><span class="font-mono text-xs">1 oct. · 22:10</span></td><td class="px-3 py-2"><span class="border-2 border-black px-1.5 text-xs font-extrabold bg-[#7CF2C0]">Rendu</span></td><td class="px-3 py-2 font-mono font-semibold">14/20</td></tr>
<tr><td class="px-3 py-2"><span class="block font-extrabold">Nora Kaci</span><span class="font-mono text-xs">2 oct. · 09:05</span></td><td class="px-3 py-2"><span class="border-2 border-black px-1.5 text-xs font-extrabold bg-[#FFD23F]">En retard</span></td><td class="px-3 py-2 font-mono font-semibold">—</td></tr>
<tr><td class="px-3 py-2"><span class="block font-extrabold">Sami Lefèvre</span><span class="font-mono text-xs">—</span></td><td class="px-3 py-2"><span class="border-2 border-black px-1.5 text-xs font-extrabold bg-[#ec3013] text-white">Non rendu</span></td><td class="px-3 py-2 font-mono font-semibold">—</td></tr>
<tr><td class="px-3 py-2"><span class="block font-extrabold">Chloé Petit</span><span class="font-mono text-xs">29 sept. · 20:31</span></td><td class="px-3 py-2"><span class="border-2 border-black px-1.5 text-xs font-extrabold bg-[#7CF2C0]">Rendu</span></td><td class="px-3 py-2 font-mono font-semibold">19/20</td></tr>
</tbody></table>
<div class="mt-4 flex flex-wrap gap-3"><button type="button" class="border-4 border-black bg-black px-4 py-2 font-extrabold text-white">Relancer les non-rendus</button><button type="button" class="border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Exporter les notes</button></div>
</div>
</section>
</div>
<section id="nouveau" class="scroll-mt-6 border-t-4 border-black bg-[#FFD23F]" aria-labelledby="t-nouveau">
<div class="mx-auto max-w-7xl px-5 py-14 lg:px-10">
<h2 id="t-nouveau" class="text-4xl font-black tracking-tighter">Programmer un devoir</h2>
<form id="f-devoir" class="mt-8 grid gap-5 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] md:grid-cols-2">
<label class="grid gap-2 font-extrabold md:col-span-2">Titre<input id="d-titre" required value="TP Serveur web Apache" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Activité<select id="d-type" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>TP sur VM</option><option>Lab web (terminal + navigateur)</option><option>QCM</option><option>TD</option><option>IDE</option><option>Générateur de TD</option><option>Rendu de fichier</option></select></label>
<label class="grid gap-2 font-extrabold">Classe<select id="d-classe" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>BTS SIO 1 · A</option><option>2nde NSI · B</option><option>BUT R&amp;T 1</option></select></label>
<label class="grid gap-2 font-extrabold">Ouverture<input type="datetime-local" value="2026-10-01T08:00" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono"></label>
<label class="grid gap-2 font-extrabold">Date limite<input id="d-lim" type="datetime-local" value="2026-10-10T23:59" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono"></label>
<fieldset class="grid gap-2 font-semibold md:col-span-2"><legend class="font-extrabold">Options</legend>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Accepter les rendus en retard (signalés)</label>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Correction automatique, visible après la date limite</label>
<label class="flex items-center gap-3"><input type="checkbox" class="h-5 w-5 accent-black"> Rappel aux élèves la veille</label>
</fieldset>
<div class="flex flex-wrap items-center gap-4 md:col-span-2"><button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] hover:bg-[#ec3013]">Programmer le devoir</button><a href="{{ route('bibliotheque') }}" class="font-extrabold underline underline-offset-4">Choisir dans la bibliothèque</a><p id="d-ok" hidden class="border-4 border-black bg-[#7CF2C0] px-4 py-2 font-extrabold">Devoir programmé ✓</p></div>
</form>
</div>
</section>
<script>
document.getElementById('f-devoir').addEventListener('submit', function (e) {
e.preventDefault();
var li = document.createElement('li'), lim = new Date(document.getElementById('d-lim').value);
li.className = 'border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] outline outline-4 outline-[#7CF2C0]';
li.innerHTML = '<div class="flex flex-wrap items-center gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#7CF2C0] px-2">' + document.getElementById('d-type').value + '</span><span class="border-2 border-black px-2">' + document.getElementById('d-classe').value + '</span><span class="ml-auto font-mono">⏰ ' + lim.toLocaleString('fr-FR', { dateStyle: 'short', timeStyle: 'short' }) + '</span></div><p class="mt-3 text-xl font-black"></p><p class="mt-2 font-mono text-sm font-semibold">0 rendu · ouverture programmée</p>';
li.querySelector('p').textContent = document.getElementById('d-titre').value;
document.getElementById('liste-devoirs').prepend(li); document.getElementById('d-ok').hidden = false;
});
</script>
@endsection

View file

@ -0,0 +1,64 @@
@extends('layouts.vitrine')
@section('titre', 'Espace élève')
@section('contenu')
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[10%] top-10 h-12 w-12 bg-[#7CF2C0] [--r:12deg]"></span></div>
<div class="relative mx-auto flex max-w-7xl flex-wrap items-end gap-6 px-5 pb-12 pt-12 lg:px-10">
<div class="flex-1">
<p class="font-mono text-sm font-semibold">Espace élève · lea.m.sio1-a</p>
<h1 class="mt-2 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Salut Léa.</h1>
<p class="mt-4 text-xl font-semibold">BTS SIO 1 · Groupe A · Bloc 2</p>
</div>
<a href="{{ route('labs.essai') }}" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Reprendre mon TP <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</section>
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-14 lg:grid-cols-12 lg:px-10">
<section class="lg:col-span-7" aria-labelledby="t-afaire">
<h2 id="t-afaire" class="text-4xl font-black tracking-tighter">À faire</h2>
<ul class="mt-8 grid gap-6">
<li><a href="{{ route('ide') }}" class="relative flex flex-wrap items-center gap-4 border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] hover:-translate-y-1"><span class="absolute -right-3 -top-4 rotate-3 border-2 border-black bg-[#ec3013] px-2 py-0.5 text-sm font-extrabold text-white">Devoir maison</span><span class="border-2 border-black bg-[#13233A] px-2 font-mono text-sm font-semibold text-white">IDE</span><span class="flex-1"><span class="block text-xl font-black">Défi Python : somme d’une liste</span><span class="block font-semibold">À rendre mer. 8 oct. · 18:00</span></span><span class="font-mono font-semibold">Rendre →</span></a></li>
<li><a href="{{ route('labs.essai') }}" class="relative flex flex-wrap items-center gap-4 border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1">
<span class="absolute -right-3 -top-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 text-sm font-extrabold">En cours</span>
<span class="border-2 border-black bg-white px-2 font-mono text-sm font-semibold">TP</span>
<span class="flex-1"><span class="block text-xl font-black">Routage inter-VLAN</span><span class="block font-semibold">Étape 3 sur 4 · VM prête</span></span>
<span class="font-mono font-semibold">Continuer →</span></a></li>
<li><a href="{{ route('cours.show') }}#qcm" class="flex flex-wrap items-center gap-4 border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1 md:ml-8">
<span class="border-2 border-black bg-white px-2 font-mono text-sm font-semibold">QCM</span>
<span class="flex-1"><span class="block text-xl font-black">Adressage IPv4 · 2ᵉ essai</span><span class="block font-semibold">Pour vendredi · 5 questions</span></span>
<span class="font-mono font-semibold">Commencer →</span></a></li>
<li><a href="{{ route('cours.show') }}#td" class="flex flex-wrap items-center gap-4 border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1">
<span class="border-2 border-black bg-white px-2 font-mono text-sm font-semibold">TD</span>
<span class="flex-1"><span class="block text-xl font-black">Découpage en sous-réseaux</span><span class="block font-semibold">Assigné par Mme Roux · 3 exercices</span></span>
<span class="font-mono font-semibold">Ouvrir →</span></a></li>
<li><a href="{{ route('examen') }}" class="flex flex-wrap items-center gap-4 border-4 border-black bg-black p-5 text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-y-1 md:ml-8">
<span class="border-2 border-white bg-[#ec3013] px-2 font-mono text-sm font-semibold">EXAMEN</span>
<span class="flex-1"><span class="block text-xl font-black">E6 blanc SISR · Adressage et VLAN</span><span class="block font-semibold">Lundi 10:00 · 1 h</span></span>
<span class="font-mono font-semibold">Voir →</span></a></li>
</ul>
</section>
<aside class="grid content-start gap-10 lg:col-span-5">
<section class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]" aria-labelledby="t-prog">
<h2 id="t-prog" class="text-2xl font-black">Ma progression</h2>
<ul class="mt-5 grid gap-4">
<li><p class="flex justify-between font-bold"><span>Adressage IPv4</span><span class="font-mono">100 %</span></p><div class="mt-1 h-4 border-2 border-black bg-white"><div class="h-full bg-[#7CF2C0] border-r-2 border-black" style="width:100%"></div></div></li>
<li><p class="flex justify-between font-bold"><span>VLAN et commutation</span><span class="font-mono">100 %</span></p><div class="mt-1 h-4 border-2 border-black bg-white"><div class="h-full bg-[#7CF2C0] border-r-2 border-black" style="width:100%"></div></div></li>
<li><p class="flex justify-between font-bold"><span>Routage inter-VLAN</span><span class="font-mono">75 %</span></p><div class="mt-1 h-4 border-2 border-black bg-white"><div class="h-full bg-[#FFD23F] border-r-2 border-black" style="width:75%"></div></div></li>
<li><p class="flex justify-between font-bold"><span>Serveur DHCP</span><span class="font-mono">25 %</span></p><div class="mt-1 h-4 border-2 border-black bg-white"><div class="h-full bg-[#FFD23F] border-r-2 border-black" style="width:25%"></div></div></li>
<li><p class="flex justify-between font-bold"><span>Serveur DNS avec BIND 9</span><span class="font-mono">0 %</span></p><div class="mt-1 h-4 border-2 border-black bg-white"><div class="h-full bg-white border-r-2 border-black" style="width:0%"></div></div></li>
</ul>
</section>
<section class="border-4 border-black bg-[#FF6FB5] p-6 shadow-[8px_8px_0px_#000000] lg:-rotate-1" aria-labelledby="t-notes">
<h2 id="t-notes" class="text-2xl font-black">Mes QCM</h2>
<ul class="mt-4 divide-y-2 divide-black border-2 border-black bg-white font-semibold">
<li class="flex justify-between px-4 py-2"><span>VLAN et commutation</span><span class="font-mono">17/20</span></li>
<li class="flex justify-between px-4 py-2"><span>Adressage IPv4</span><span class="font-mono">14/20</span></li>
<li class="flex justify-between px-4 py-2"><span>Modèle OSI</span><span class="font-mono">18/20</span></li>
</ul>
<a href="{{ route('cours.index') }}" class="mt-5 inline-block border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Réviser dans les cours</a>
<a href="{{ route('maison') }}" class="mt-3 block font-extrabold underline underline-offset-4">Aller plus loin à la maison →</a>
</section>
</aside>
</div>
@endsection

View file

@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mon espace élève · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" @if(request()->routeIs('cockpit')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" @if(request()->routeIs('espace.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" @if(request()->routeIs('vie.scolaire')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" @if(request()->routeIs('academie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" @if(request()->routeIs('labs.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" @if(request()->routeIs('labs.web')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" @if(request()->routeIs('ide')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" @if(request()->routeIs('maison')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" @if(request()->routeIs('bibliotheque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" @if(request()->routeIs('banque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" @if(request()->routeIs('generateur')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" @if(request()->routeIs('td.imprimable')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" @if(request()->routeIs('quiz.projection')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" @if(request()->routeIs('sujet.creer')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" @if(request()->routeIs('devoirs')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" @if(request()->routeIs('correction')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" @if(request()->routeIs('fiche.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" @if(request()->routeIs('messagerie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" @if(request()->routeIs('export.ent')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<div class="border-b-2 border-black bg-[#F6F5F1]">
<div class="mx-auto grid max-w-[1600px] lg:grid-cols-[240px_minmax(0,1fr)]">
<aside class="border-b-2 border-black bg-white p-5 lg:border-b-0 lg:border-r-2">
<div class="flex items-center gap-3"><span class="grid h-11 w-11 place-items-center border-2 border-black bg-[#FFD23F] font-mono text-sm font-semibold">SN</span><div><p class="font-black leading-tight">Sarah Nguyen</p><p class="text-sm font-semibold">BTS SIO 1 · Groupe A</p></div></div>
<p class="mt-6 font-mono text-[11px] font-semibold uppercase tracking-wider">Mon espace</p>
<ul class="mt-2 grid gap-1"><li><a href="#vue" class="flex items-center gap-3 border-2 border-black bg-black text-white px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/></svg><span class="flex-1">Aujourd’hui</span></a></li><li><a href="#calendrier" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span class="flex-1">Calendrier</span></a></li><li><a href="#devoirs" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/><path d="M6.5 17H20v5H6.5A2.5 2.5 0 0 1 4 19.5"/></svg><span class="flex-1">Devoirs</span></a></li><li><a href="#examens" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><span class="flex-1">Examens à venir</span></a></li><li><a href="#entrainement" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg><span class="flex-1">S’entraîner</span></a></li><li><a href="#progres" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9H4a2 2 0 0 1 0-4h2M18 9h2a2 2 0 0 0 0-4h-2M4 22h16M10 14.7V17c0 .6-.5 1-1 1.2C7.8 18.8 7 20.2 7 22M14 14.7V17c0 .6.5 1 1 1.2 1.2.6 2 2 2 3.8M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg><span class="flex-1">Ma progression</span></a></li></ul>
<button type="button" id="e-main" class="mt-6 flex h-12 w-full items-center justify-center gap-2 border-2 border-black bg-[#FF6FB5] text-sm font-extrabold shadow-[3px_3px_0px_#000000] active:translate-x-0.5 active:translate-y-0.5 active:shadow-none"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v6M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.4l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15"/></svg><span>Lever la main</span></button>
<p id="e-main-info" class="mt-2 hidden text-center text-xs font-bold" aria-live="polite">Main levée · 2<sup>e</sup> dans la file</p>
</aside>
<div class="min-w-0 p-5 lg:p-8">
<div id="vue" class="flex flex-wrap items-end justify-between gap-4">
<div><p class="font-mono text-xs font-semibold">Mon espace élève</p><h1 class="mt-1 text-4xl font-black tracking-tight">Bonjour Sarah&nbsp;!</h1><p class="mt-1 font-semibold">Mardi 29 septembre · 2 devoirs cette semaine · 1 examen dans 9 jours</p></div>
<a href="{{ route('labs.essai') }}" class="inline-flex h-11 items-center gap-2 border-2 border-black bg-black px-4 text-sm font-extrabold text-white shadow-[3px_3px_0px_#ec3013] hover:bg-[#13233A]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 3 14 9-14 9V3z"/></svg>Reprendre le lab VLAN · étape 6</a>
</div>
<ul class="mt-6 grid grid-cols-2 gap-4 md:grid-cols-4" aria-label="Mes indicateurs">
<li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Moyenne QCM</p><span class="h-2.5 w-2.5 bg-[#FFD23F]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">16,0</p><p class="mt-3 text-xs font-bold">+1,2 sur 4 semaines</p></li><li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Labs réussis</p><span class="h-2.5 w-2.5 bg-[#7CF2C0]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">11/14</p><p class="mt-3 text-xs font-bold">dont 3 sans indice</p></li><li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Devoirs à rendre</p><span class="h-2.5 w-2.5 bg-[#C4B5FD]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">2</p><p class="mt-3 text-xs font-bold">le prochain vendredi</p></li><li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Série</p><span class="h-2.5 w-2.5 bg-[#FF6FB5]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">6 j</p><p class="mt-3 text-xs font-bold">d’entraînement d’affilée</p></li>
</ul>
<div class="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
<section id="calendrier" class="border-2 border-black bg-white" aria-labelledby="t-cal">
<div class="flex items-center justify-between gap-3 border-b-2 border-black p-4"><h2 id="t-cal" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span id="e-mois">Septembre – octobre 2026</span></h2><div class="flex gap-1"><button type="button" id="e-prev" class="grid h-9 w-9 place-items-center border-2 border-black font-black hover:bg-[#FFFBEA]" aria-label="Semaine précédente">←</button><button type="button" id="e-next" class="grid h-9 w-9 place-items-center border-2 border-black font-black hover:bg-[#FFFBEA]" aria-label="Semaine suivante">→</button></div></div>
<div class="grid grid-cols-7 border-b-2 border-black bg-[#F6F5F1] font-mono text-[11px] font-semibold uppercase"><p class="px-2 py-2">Lun</p><p class="px-2 py-2">Mar</p><p class="px-2 py-2">Mer</p><p class="px-2 py-2">Jeu</p><p class="px-2 py-2">Ven</p><p class="px-2 py-2">Sam</p><p class="px-2 py-2">Dim</p></div>
<div id="e-grille" class="grid grid-cols-7"></div>
<div class="flex flex-wrap gap-4 border-t-2 border-black p-3 text-xs font-bold"><span class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black" style="background:#ec3013"></span>Examen</span><span class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Devoir</span><span class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Quiz</span><span class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Cours / TP</span></div>
</section>
<section class="border-2 border-black bg-white" aria-labelledby="t-jour">
<div class="border-b-2 border-black p-4"><h2 id="t-jour" class="text-lg font-black">Au programme</h2><p id="e-jour-titre" class="font-mono text-xs font-semibold">mardi 29/09</p></div>
<ol id="e-jour" class="divide-y-2 divide-black"></ol>
</section>
</div>
<div class="mt-6 grid gap-6 xl:grid-cols-2">
<section id="devoirs" class="border-2 border-black bg-white" aria-labelledby="t-dev">
<div class="flex items-center justify-between border-b-2 border-black bg-[#C4B5FD] p-4"><h2 id="t-dev" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/><path d="M6.5 17H20v5H6.5A2.5 2.5 0 0 1 4 19.5"/></svg>Mes devoirs</h2><span class="font-mono text-xs font-semibold">2 à rendre</span></div>
<ul class="divide-y-2 divide-black"><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">DM 3 · Plan d’adressage</p><p class="text-sm font-semibold">Réseaux · M. Belkacemi · <span class="font-mono">ven. 03/10 · 23 h 59</span></p></div><a href="{{ route('devoirs') }}" class="border-2 border-black px-3 py-1 text-xs font-extrabold bg-white hover:bg-black hover:text-white">À rendre</a><div class="col-span-2 flex items-center gap-2"><div class="h-2 flex-1 border-2 border-black"><div class="h-full bg-black" style="width:60%"></div></div><span class="font-mono text-xs font-semibold">60 %</span></div></li><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">TP maison · Scripts Bash</p><p class="text-sm font-semibold">Linux · Mme Roche · <span class="font-mono">lun. 06/10 · 18 h</span></p></div><a href="{{ route('ide') }}" class="border-2 border-black px-3 py-1 text-xs font-extrabold bg-white hover:bg-black hover:text-white">À rendre</a><div class="col-span-2 flex items-center gap-2"><div class="h-2 flex-1 border-2 border-black"><div class="h-full bg-black" style="width:20%"></div></div><span class="font-mono text-xs font-semibold">20 %</span></div></li><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">QCM · Lecture CM VLAN</p><p class="text-sm font-semibold">Réseaux · <span class="font-mono">hier</span></p></div><a href="{{ route('cours.cm') }}" class="border-2 border-black px-3 py-1 text-xs font-extrabold bg-[#7CF2C0]">Rendu · 17/20</a><div class="col-span-2 flex items-center gap-2"><div class="h-2 flex-1 border-2 border-black"><div class="h-full bg-black" style="width:100%"></div></div><span class="font-mono text-xs font-semibold">100 %</span></div></li></ul>
</section>
<section id="examens" class="border-2 border-black bg-white" aria-labelledby="t-exa">
<div class="flex items-center justify-between border-b-2 border-black bg-[#ec3013] p-4 text-white"><h2 id="t-exa" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>Examens à venir</h2></div>
<ul class="divide-y-2 divide-black"><li class="flex items-center gap-4 p-4"><span class="grid h-12 w-14 shrink-0 place-items-center border-2 border-black bg-[#FFFBEA] font-mono text-sm font-semibold">J-9</span><div class="min-w-0 flex-1"><p class="font-bold">E6 blanc SISR</p><p class="text-sm font-semibold">Administration systèmes et réseaux · <span class="font-mono">jeu. 08/10 · 8 h</span></p></div><a href="{{ route('examen') }}" class="shrink-0 border-2 border-black px-3 py-1 text-xs font-extrabold hover:bg-black hover:text-white">Réviser</a></li><li class="flex items-center gap-4 p-4"><span class="grid h-12 w-14 shrink-0 place-items-center border-2 border-black bg-[#FFFBEA] font-mono text-sm font-semibold">J-14</span><div class="min-w-0 flex-1"><p class="font-bold">Contrôle · Adressage IPv4</p><p class="text-sm font-semibold">Réseaux · 1 h · <span class="font-mono">mar. 13/10 · 10 h</span></p></div><a href="{{ route('examen') }}" class="shrink-0 border-2 border-black px-3 py-1 text-xs font-extrabold hover:bg-black hover:text-white">Réviser</a></li><li class="flex items-center gap-4 p-4"><span class="grid h-12 w-14 shrink-0 place-items-center border-2 border-black bg-[#FFFBEA] font-mono text-sm font-semibold">—</span><div class="min-w-0 flex-1"><p class="font-bold">QCM flash · Commandes Linux</p><p class="text-sm font-semibold">Début d’heure · 5 min · <span class="font-mono">chaque lundi</span></p></div><a href="{{ route('quiz.eleve') }}" class="shrink-0 border-2 border-black px-3 py-1 text-xs font-extrabold hover:bg-black hover:text-white">Réviser</a></li></ul>
<p class="border-t-2 border-black bg-[#FFFBEA] p-3 text-sm font-semibold">Pendant un examen, reste sur la page : les changements d’onglet et de fenêtre sont signalés au prof.</p>
</section>
</div>
<section id="entrainement" class="mt-6 border-2 border-black bg-white" aria-labelledby="t-ent">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4"><h2 id="t-ent" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg>S’entraîner</h2>
<div id="e-niv" class="flex text-sm font-bold"><button type="button" data-n="all" class="h-10 border-2 border-black px-3 bg-black text-white">Tout</button><button type="button" data-n="base" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">Revoir les bases</button><button type="button" data-n="prog" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">Dans le programme</button><button type="button" data-n="plus" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">Pour aller plus loin</button></div></div>
<ul id="e-exos" class="grid gap-px bg-black sm:grid-cols-2 xl:grid-cols-4"></ul>
</section>
<section id="progres" class="mt-6 border-2 border-black bg-white p-5" aria-labelledby="t-prog">
<div class="flex flex-wrap items-baseline justify-between gap-2"><h2 id="t-prog" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9H4a2 2 0 0 1 0-4h2M18 9h2a2 2 0 0 0 0-4h-2M4 22h16M10 14.7V17c0 .6-.5 1-1 1.2C7.8 18.8 7 20.2 7 22M14 14.7V17c0 .6.5 1 1 1.2 1.2.6 2 2 2 3.8M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg>Ma progression par compétence</h2><p class="font-mono text-xs font-semibold">référentiel BTS SIO</p></div>
<ul class="mt-4 grid gap-3 md:grid-cols-2"><li><div class="flex justify-between text-sm font-bold"><span>Installer et configurer un poste</span><span class="font-mono">85 %</span></div><div class="mt-1 h-3 border-2 border-black"><div class="h-full" style="width:85%;background:#7CF2C0"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>Adressage IPv4 et sous-réseaux</span><span class="font-mono">72 %</span></div><div class="mt-1 h-3 border-2 border-black"><div class="h-full" style="width:72%;background:#7CF2C0"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>VLAN et commutation</span><span class="font-mono">64 %</span></div><div class="mt-1 h-3 border-2 border-black"><div class="h-full" style="width:64%;background:#FFD23F"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>Scripts Bash</span><span class="font-mono">48 %</span></div><div class="mt-1 h-3 border-2 border-black"><div class="h-full" style="width:48%;background:#FF6FB5"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>Sécurité des accès</span><span class="font-mono">55 %</span></div><div class="mt-1 h-3 border-2 border-black"><div class="h-full" style="width:55%;background:#FFD23F"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>Services réseau (DHCP, DNS)</span><span class="font-mono">30 %</span></div><div class="mt-1 h-3 border-2 border-black"><div class="h-full" style="width:30%;background:#FF6FB5"></div></div></li></ul>
</section>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var C = { exam: '#ec3013', dm: '#C4B5FD', quiz: '#FFD23F', cours: '#7CF2C0' };
var EV = {
'2026-09-28': [['quiz','8:00','Quiz flash · Commandes Linux'],['cours','8:05','CM · VLAN et commutation']],
'2026-09-29': [['cours','10:00','TP · Lab VLAN et routage'],['dm','23:59','QCM · Lecture CM VLAN (rendu)']],
'2026-09-30': [['cours','14:00','TD · Découper un réseau IPv4']],
'2026-10-01': [['cours','9:00','CM · Scripts Bash']],
'2026-10-02': [['cours','13:00','TP · Services DHCP']],
'2026-10-03': [['dm','23:59','DM 3 · Plan d’adressage']],
'2026-10-05': [['quiz','8:00','Quiz flash · Réseaux']],
'2026-10-06': [['dm','18:00','TP maison · Scripts Bash']],
'2026-10-08': [['exam','8:00','E6 blanc SISR · 1 h 30']],
'2026-10-13': [['exam','10:00','Contrôle · Adressage IPv4']]
};
var debut = new Date(2026, 8, 28), sel = '2026-09-29';
var MOIS = ['janvier','février','mars','avril','mai','juin','juillet','août','septembre','octobre','novembre','décembre'];
function k(d) { return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0'); }
function cal() {
var g = document.getElementById('e-grille'), h = '';
for (var i = 0; i < 14; i++) { var d = new Date(debut); d.setDate(d.getDate() + i); var key = k(d), ev = EV[key] || [], today = key === '2026-09-29';
h += '<button type="button" data-d="' + key + '" class="flex min-h-[92px] flex-col items-start gap-1 border-b-2 border-r-2 border-black p-2 text-left [&:nth-child(7n)]:border-r-0 ' + (key === sel ? 'bg-[#FFFBEA] outline outline-4 -outline-offset-4 outline-black' : 'hover:bg-[#FFFBEA]') + (i > 6 ? ' [&]:border-b-0' : '') + '"><span class="font-mono text-sm font-semibold ' + (today ? 'bg-black px-1 text-white' : '') + '">' + d.getDate() + '</span>' + ev.map(function (e) { return '<span class="w-full truncate border-2 border-black px-1 text-[11px] font-bold" style="background:' + C[e[0]] + ';color:' + (e[0] === 'exam' ? '#fff' : '#000') + '">' + e[2] + '</span>'; }).join('') + '</button>'; }
g.innerHTML = h;
var f = new Date(debut); f.setDate(f.getDate() + 13);
document.getElementById('e-mois').textContent = (debut.getMonth() === f.getMonth() ? MOIS[debut.getMonth()] : MOIS[debut.getMonth()] + ' – ' + MOIS[f.getMonth()]) + ' ' + f.getFullYear();
g.querySelectorAll('button').forEach(function (b) { b.addEventListener('click', function () { sel = b.dataset.d; cal(); jour(); }); });
}
function jour() { var ev = EV[sel] || [], p = sel.split('-');
document.getElementById('e-jour-titre').textContent = new Date(+p[0], +p[1] - 1, +p[2]).toLocaleDateString('fr-FR', { weekday: 'long', day: '2-digit', month: '2-digit' });
document.getElementById('e-jour').innerHTML = ev.length ? ev.map(function (e) { return '<li class="flex items-center gap-3 p-4"><span class="w-14 shrink-0 font-mono text-sm font-semibold">' + e[1] + '</span><span class="h-8 w-1.5 shrink-0 border-2 border-black" style="background:' + C[e[0]] + '"></span><span class="font-bold">' + e[2] + '</span></li>'; }).join('') : '<li class="p-6 text-center font-bold">Rien de prévu. Un petit exercice&nbsp;?</li>'; }
document.getElementById('e-prev').addEventListener('click', function () { debut.setDate(debut.getDate() - 7); cal(); });
document.getElementById('e-next').addEventListener('click', function () { debut.setDate(debut.getDate() + 7); cal(); });
cal(); jour();
var X = [
['base','Réseaux','Convertir binaire ↔ décimal','Générateur · 10 questions','5 min','apercu-generateur.html'],
['base','Linux','Les 10 commandes du shell','Quiz d’entraînement','5 min','apercu-quiz-eleve.html'],
['prog','Réseaux','Découper un réseau IPv4','TD à imprimer ou en ligne','30 min','apercu-td-imprimable.html'],
['prog','Linux','Mon premier serveur Apache','Lab web · terminal + navigateur','40 min','apercu-lab-web.html'],
['prog','Programmation','Scripts Bash : boucles','IDE · tests automatiques','20 min','apercu-ide.html'],
['prog','Bases de données','Requêtes SQL SELECT','IDE · SQL','20 min','apercu-ide.html'],
['plus','Programmation','Défis Python','HackerRank · gratuit','libre','https://www.hackerrank.com/domains/python'],
['plus','Data','Introduction à Python pour la data','DataCamp · 1er chapitre gratuit','libre','https://www.datacamp.com/courses/intro-to-python-for-data-science']];
var niv = { base: ['#FFFBEA','Revoir les bases'], prog: ['#7CF2C0','Dans le programme'], plus: ['#C4B5FD','Pour aller plus loin'] };
function exos(f) { document.getElementById('e-exos').innerHTML = X.filter(function (x) { return f === 'all' || x[0] === f; }).map(function (x) { var ext = x[5].indexOf('http') === 0;
return '<li class="flex flex-col bg-white p-4"><span class="self-start border-2 border-black px-1.5 font-mono text-[11px] font-semibold" style="background:' + niv[x[0]][0] + '">' + niv[x[0]][1] + '</span><p class="mt-3 font-mono text-xs font-semibold uppercase">' + x[1] + '</p><p class="mt-1 text-lg font-black leading-tight">' + x[2] + '</p><p class="mt-1 flex-1 text-sm font-semibold">' + x[3] + ' · ' + x[4] + '</p><a href="' + x[5] + '"' + (ext ? ' target="_blank" rel="noopener"' : '') + ' class="mt-4 self-start border-2 border-black px-3 py-1 text-xs font-extrabold hover:bg-black hover:text-white">' + (ext ? 'Ouvrir ↗' : 'Commencer →') + '</a></li>'; }).join(''); }
document.querySelectorAll('#e-niv button').forEach(function (b) { b.addEventListener('click', function () { document.querySelectorAll('#e-niv button').forEach(function (x, i) { x.className = 'h-10 border-2 border-black px-3 ' + (i ? '-ml-0.5 ' : '') + (x === b ? 'bg-black text-white' : 'bg-white'); }); exos(b.dataset.n); }); });
exos('all');
var mb = document.getElementById('e-main');
mb.addEventListener('click', function () { var on = mb.getAttribute('aria-pressed') === 'true'; mb.setAttribute('aria-pressed', on ? 'false' : 'true'); mb.querySelector('span').textContent = on ? 'Lever la main' : 'Baisser la main'; mb.style.background = on ? '#FF6FB5' : '#000'; mb.style.color = on ? '#000' : '#fff'; document.getElementById('e-main-info').classList.toggle('hidden', on); });
});
</script>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,49 @@
@extends('layouts.vitrine')
@section('titre', 'Établissements')
@section('contenu')
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[8%] top-10 h-14 w-14 bg-[#FFD23F] [--r:12deg]"></span><span class="flotte absolute right-[35%] bottom-8 h-9 w-9 rounded-full border-4 border-black bg-[#7CF2C0] [animation-delay:1.5s]"></span></div>
<div class="relative mx-auto max-w-7xl px-5 pb-20 pt-14 lg:px-10 lg:pt-20">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Pour les établissements</p>
<h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Un projet par établissement. Un réseau par classe.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Chaque établissement a son espace isolé sur notre cloud OpenStack hébergé en France. Chaque classe a son propre réseau, sans IP publique.</p>
</div>
</section>
<section class="mx-auto max-w-7xl px-5 pb-28 pt-20 lg:px-10" aria-labelledby="titre-roles">
<h2 id="titre-roles" class="text-5xl font-black tracking-tighter sm:text-6xl">Chacun son rôle.</h2>
<ul class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<li class="border-4 border-black bg-[#FFD23F] p-6 shadow-[6px_6px_0px_#000000]"><h3 class="text-2xl font-black">Administrateur</h3><p class="mt-3 font-medium">Crée les classes, gère les enseignants et les quotas de l’établissement.</p></li>
<li class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000] lg:translate-y-8"><h3 class="text-2xl font-black">Enseignant</h3><p class="mt-3 font-medium">Réserve une séance, suit la classe en direct, prend la main sur une console.</p></li>
<li class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000]"><h3 class="text-2xl font-black">Élève</h3><p class="mt-3 font-medium">Se connecte avec sa fiche, lance le lab, lève la main s’il bloque.</p></li>
<li class="border-4 border-black bg-[#FF6FB5] p-6 shadow-[6px_6px_0px_#000000] lg:translate-y-8"><h3 class="text-2xl font-black">Formateur</h3><p class="mt-3 font-medium">Anime des sessions pour adultes en titre professionnel.</p></li>
</ul>
</section>
<section class="border-y-4 border-black bg-[#FFD23F]" aria-labelledby="titre-biblio">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-20 lg:grid-cols-12 lg:px-10">
<h2 id="titre-biblio" class="text-5xl font-black leading-[0.95] tracking-tighter lg:col-span-5">Une bibliothèque à dupliquer et adapter.</h2>
<div class="lg:col-span-7">
<p class="text-xl font-medium">Des séquences complètes, reliées aux référentiels : cours, TD, quiz et lab. Dupliquez une séquence, modifiez-la pour votre classe. Les quiz s’exportent en GIFT et Moodle XML.</p>
<ul class="mt-8 flex flex-wrap gap-3 text-sm font-extrabold">
<li class="border-2 border-black bg-white px-3 py-1">Cours</li><li class="border-2 border-black bg-[#7CF2C0] px-3 py-1">TD</li><li class="border-2 border-black bg-[#C4B5FD] px-3 py-1">Quiz</li><li class="border-2 border-black bg-[#FF6FB5] px-3 py-1">Lab</li>
<li class="border-2 border-black bg-black px-3 py-1 text-white">Moodle LTI 1.3 · bientôt</li><li class="border-2 border-black bg-black px-3 py-1 text-white">SSO ENT · plus tard</li>
</ul>
</div>
</div>
</section>
<section class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10" aria-labelledby="titre-contact">
<div class="lg:col-span-5">
<h2 id="titre-contact" class="text-5xl font-black leading-[0.95] tracking-tighter">Équiper votre établissement.</h2>
<p class="mt-6 text-lg font-medium">Dites-nous combien de classes et quelles formations. On vous répond avec une proposition.</p>
</div>
<form action="{{ route('etablissements') }}" method="post" class="grid gap-5 border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] sm:grid-cols-2 lg:col-span-7">
@csrf
<label class="grid gap-2 font-extrabold">Nom<input name="nom" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Établissement<input name="etablissement" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold sm:col-span-2">E-mail professionnel<input type="email" name="email" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold sm:col-span-2">Votre besoin<textarea name="message" rows="4" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none" placeholder="2 classes de BTS SIO, 30 élèves chacune"></textarea></label>
<div class="sm:col-span-2"><button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Envoyer la demande <span class="font-mono" aria-hidden="true">→</span></button></div>
</form>
</section>
@endsection

View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mode examen · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black bg-black text-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-3 px-5 py-4 lg:px-10">
<span class="border-2 border-white bg-[#ec3013] px-3 py-1 font-extrabold">MODE EXAMEN</span>
<p class="flex-1 font-bold">Adressage et VLAN · E6 blanc SISR · Léa Martin</p>
<p class="flex items-center gap-3"><span class="font-semibold">Temps restant</span><span id="chrono" class="border-2 border-white bg-[#FFD23F] px-3 py-1 font-mono text-2xl font-semibold text-black" role="timer" aria-live="off">59:59</span></p>
</div>
</header>
<div class="border-b-4 border-black bg-[#FFD23F]">
<ul class="mx-auto flex max-w-7xl flex-wrap gap-x-6 gap-y-1 px-5 py-2 text-sm font-extrabold lg:px-10">
<li>■ Indices désactivés</li><li>■ Copier-coller bloqué</li><li>■ Sortie d’onglet signalée à l’enseignant</li><li>■ VM sans accès Internet</li><li class="ml-auto">Incidents signalés : <span id="incidents" class="font-mono">0</span></li>
</ul>
</div>
<main class="mx-auto grid max-w-7xl gap-10 px-5 py-10 lg:grid-cols-12 lg:px-10">
<nav class="lg:col-span-3" aria-label="Questions">
<h2 class="text-xl font-black">Questions</h2>
<ol class="mt-4 grid grid-cols-5 gap-2 lg:grid-cols-4">
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-black text-white">1</a></li>
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-black text-white">2</a></li>
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-black text-white">3</a></li>
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-black text-white">4</a></li>
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-[#FFD23F] shadow-[3px_3px_0px_#000000]" aria-current="step">5</a></li>
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-white">6</a></li>
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-white">7</a></li>
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-[#FF6FB5]">8</a></li>
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-white">9</a></li>
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-white">10</a></li>
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-white">11</a></li>
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-white">12</a></li>
</ol>
<ul class="mt-5 grid gap-1 text-sm font-semibold">
<li class="flex items-center gap-2"><span class="h-3 w-3 bg-black"></span> Répondue</li>
<li class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black bg-[#FF6FB5]"></span> Marquée pour revoir</li>
</ul>
<p class="mt-6 border-2 border-black p-3 font-mono text-sm font-semibold">4 / 12 répondues · Partie TP : 0 / 3 étapes</p>
</nav>
<div class="grid gap-10 lg:col-span-9">
<fieldset id="q" class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]">
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 5 · 1 point</legend>
<p class="text-2xl font-extrabold">Un service de 50 postes doit avoir son propre sous-réseau. Quel masque choisissez-vous ?</p>
<div class="mt-5 grid gap-3 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-mono font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q5" class="h-5 w-5 accent-black"> /24 · 255.255.255.0</label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-mono font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q5" class="h-5 w-5 accent-black"> /25 · 255.255.255.128</label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-mono font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q5" class="h-5 w-5 accent-black"> /26 · 255.255.255.192</label>
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-mono font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q5" class="h-5 w-5 accent-black"> /27 · 255.255.255.224</label>
</div>
<div class="mt-6 flex flex-wrap gap-3">
<a href="#q" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none">← Précédente</a>
<button type="button" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none">Marquer pour revoir</button>
<a href="#q" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none bg-black text-white hover:text-black">Suivante →</a>
</div>
</fieldset>
<section class="border-4 border-black bg-[#13233A] font-mono text-white shadow-[8px_8px_0px_#7CF2C0]" aria-labelledby="t-partie">
<div class="flex flex-wrap items-center gap-3 border-b-4 border-black bg-[#0d192b] px-4 py-2">
<h2 id="t-partie" class="flex-1 text-sm font-semibold">Partie TP · commutateur-sw1 · console 1</h2>
<span class="border-2 border-white px-2 text-xs">vérification à la remise</span>
</div>
<div class="space-y-1 p-5 text-sm leading-relaxed">
<p class="text-[#FFD23F]">Créez le VLAN 20 « compta » et placez-y l’interface eth2.</p>
<p><span class="text-[#7CF2C0]">root@sw1</span>:~# ip link add link eth0 name eth0.20 type vlan id 20</p>
<p><span class="text-[#7CF2C0]">root@sw1</span>:~# <span class="curseur inline-block h-4 w-2.5 translate-y-0.5 bg-[#FFD23F]"></span></p>
</div>
</section>
<div class="flex flex-wrap items-center gap-5">
<button type="button" id="rendre" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Rendre ma copie</button>
<p class="font-semibold">La copie est rendue automatiquement à la fin du temps.</p>
</div>
</div>
</main>
<script>
(function () {
var fin = Date.now() + 60 * 60 * 1000 - 1000;
var el = document.getElementById('chrono');
function tic() {
var s = Math.max(0, Math.round((fin - Date.now()) / 1000));
el.textContent = String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0');
if (s < 300) el.classList.add('bg-[#ec3013]', 'text-white');
}
tic(); setInterval(tic, 1000);
var inc = 0, spot = document.getElementById('incidents'), last = 0;
function signal() { if (Date.now() - last < 800) return; last = Date.now(); inc++; spot.textContent = inc; spot.parentNode.classList.add('bg-[#ec3013]', 'text-white', 'px-2'); }
document.addEventListener('visibilitychange', function () { if (document.hidden) signal(); });
window.addEventListener('blur', signal);
document.documentElement.addEventListener('mouseleave', signal);
['copy', 'cut', 'paste'].forEach(function (ev) { document.addEventListener(ev, function (e) { e.preventDefault(); signal(); }); });
document.getElementById('rendre').addEventListener('click', function () {
if (confirm('Rendre la copie ? Vous ne pourrez plus la modifier.')) {
this.textContent = 'Copie rendue ✓';
this.disabled = true;
}
});
})();
</script>
</body>
</html>

View file

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Export Pronote et ENT · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" @if(request()->routeIs('cockpit')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" @if(request()->routeIs('espace.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" @if(request()->routeIs('vie.scolaire')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" @if(request()->routeIs('academie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" @if(request()->routeIs('labs.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" @if(request()->routeIs('labs.web')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" @if(request()->routeIs('ide')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" @if(request()->routeIs('maison')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" @if(request()->routeIs('bibliotheque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" @if(request()->routeIs('banque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" @if(request()->routeIs('generateur')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" @if(request()->routeIs('td.imprimable')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" @if(request()->routeIs('quiz.projection')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" @if(request()->routeIs('sujet.creer')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" @if(request()->routeIs('devoirs')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" @if(request()->routeIs('correction')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" @if(request()->routeIs('fiche.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" @if(request()->routeIs('messagerie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" @if(request()->routeIs('export.ent')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<div class="border-b-2 border-black bg-[#F6F5F1]"><div class="mx-auto grid max-w-[1600px] lg:grid-cols-[240px_minmax(0,1fr)]"><aside class="border-b-2 border-black bg-white p-5 lg:border-b-0 lg:border-r-2"><p class="font-mono text-[11px] font-semibold uppercase tracking-wider">Exporter</p><ul class="mt-2 grid gap-1"><li><a href="#notes" class="flex items-center gap-3 border-2 border-black bg-black text-white px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg><span class="flex-1">Notes et moyennes</span></a></li><li><a href="#absences" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg><span class="flex-1">Présences</span></a></li><li><a href="#appreciations" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg><span class="flex-1">Appréciations</span></a></li><li><a href="#historique" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/></svg><span class="flex-1">Exports passés</span></a></li></ul><div class="mt-6 border-2 border-black bg-[#FFFBEA] p-3 text-xs font-semibold"><p class="font-black">Connecteurs directs</p><p class="mt-1">L’envoi automatique vers les logiciels de vie scolaire et les ENT est à l’étude. En attendant, les fichiers d’export se chargent à la main.</p></div></aside><div class="min-w-0 p-5 lg:p-8"><div class="flex flex-wrap items-end justify-between gap-4"><div><p class="font-mono text-xs font-semibold">Exports</p><h1 class="mt-1 text-4xl font-black tracking-tight">Export vers Pronote et l’ENT</h1><p class="mt-1 font-semibold">Vos notes, présences et appréciations, prêtes à charger dans votre logiciel de vie scolaire.</p></div><div class="flex flex-wrap gap-3"><button type="button" class="inline-flex h-11 items-center gap-2 border-2 border-black px-4 text-sm font-extrabold bg-white hover:bg-[#FFFBEA]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/></svg>Historique</button></div></div><div class="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
<section id="notes" class="border-2 border-black bg-white" aria-labelledby="t-notes"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-notes" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>1 · Que voulez-vous exporter ?</h2></div><div class="grid gap-4 p-4 sm:grid-cols-2"><label class="grid gap-1 text-sm font-bold">Contenu<select class="h-11 border-2 border-black bg-white px-2 font-semibold"><option>Notes des devoirs et examens</option><option>Moyennes par compétence</option><option>Présences aux séances en ligne</option><option>Appréciations pour le bulletin</option></select></label><label class="grid gap-1 text-sm font-bold">Classe<select class="h-11 border-2 border-black bg-white px-2 font-semibold"><option>BTS SIO 1 · Groupe A</option><option>BTS SIO 1 · Groupe B</option><option>Toutes mes classes</option></select></label><label class="grid gap-1 text-sm font-bold">Période<select class="h-11 border-2 border-black bg-white px-2 font-semibold"><option>1er trimestre</option><option>2e trimestre</option><option>Du 01/09 au 03/10</option></select></label><label class="grid gap-1 text-sm font-bold">Évaluations<select class="h-11 border-2 border-black bg-white px-2 font-semibold"><option>Toutes (8)</option><option>Examens uniquement (2)</option><option>DM uniquement (3)</option></select></label></div></section>
<section id="format" class="border-2 border-black bg-white" aria-labelledby="t-format"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-format" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>2 · Format</h2></div><ul class="grid gap-3 p-4"><li><label class="flex items-start gap-3 border-2 border-black bg-white p-3"><input type="radio" name="fmt" checked class="mt-1 h-5 w-5 accent-black"><span><span class="block text-sm font-black">Tableur CSV (séparateur point-virgule)</span><span class="block text-xs font-semibold">Pronote, École Directe, la plupart des ENT</span></span></label></li><li><label class="flex items-start gap-3 border-2 border-black bg-white p-3"><input type="radio" name="fmt" class="mt-1 h-5 w-5 accent-black"><span><span class="block text-sm font-black">Tableur Excel (.xlsx)</span><span class="block text-xs font-semibold">Pour retravailler dans un tableur</span></span></label></li><li><label class="flex items-start gap-3 border-2 border-black bg-white p-3"><input type="radio" name="fmt" class="mt-1 h-5 w-5 accent-black"><span><span class="block text-sm font-black">PDF récapitulatif</span><span class="block text-xs font-semibold">Pour le conseil de classe ou l’archivage</span></span></label></li></ul></section>
</div>
<div class="mt-6"><section id="apercu" class="border-2 border-black bg-white" aria-labelledby="t-apercu"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-apercu" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/></svg>3 · Aperçu du fichier</h2><span class="font-mono text-xs font-semibold">notes-bts-sio-1a-dm3.csv</span></div><div class="overflow-x-auto"><table class="w-full min-w-[720px] border-collapse font-mono text-xs"><thead class="border-b-2 border-black bg-[#F6F5F1]"><tr><th class="border-r-2 border-black px-3 py-2 text-left font-semibold last:border-r-0">Nom</th><th class="border-r-2 border-black px-3 py-2 text-left font-semibold last:border-r-0">Prénom</th><th class="border-r-2 border-black px-3 py-2 text-left font-semibold last:border-r-0">Classe</th><th class="border-r-2 border-black px-3 py-2 text-left font-semibold last:border-r-0">Devoir</th><th class="border-r-2 border-black px-3 py-2 text-left font-semibold last:border-r-0">Note</th><th class="border-r-2 border-black px-3 py-2 text-left font-semibold last:border-r-0">Sur</th><th class="border-r-2 border-black px-3 py-2 text-left font-semibold last:border-r-0">Coef.</th><th class="border-r-2 border-black px-3 py-2 text-left font-semibold last:border-r-0">Date</th></tr></thead><tbody><tr class="border-b-2 border-black last:border-b-0"><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">Martin</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">Léa</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">BTS SIO 1 A</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">DM 3</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">11</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">20</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">1</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">03/10/2026</td></tr><tr class="border-b-2 border-black last:border-b-0"><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">Nguyen</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">Sarah</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">BTS SIO 1 A</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">DM 3</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">16</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">20</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">1</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">03/10/2026</td></tr><tr class="border-b-2 border-black last:border-b-0"><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">Kaci</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">Inès</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">BTS SIO 1 A</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">DM 3</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">19</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">20</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">1</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">03/10/2026</td></tr><tr class="border-b-2 border-black last:border-b-0"><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">Petit</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">Hugo</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">BTS SIO 1 A</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">DM 3</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 bg-[#FFD23F] font-semibold">ABS</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">20</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">1</td><td class="border-r-2 border-black px-3 py-2 last:border-r-0 ">03/10/2026</td></tr></tbody></table></div><div class="flex flex-wrap items-center justify-between gap-3 border-t-2 border-black p-4"><p class="text-sm font-semibold">16 lignes · les devoirs non rendus sont marqués ABS · encodage UTF-8</p><button type="button" id="x-dl" class="inline-flex h-12 items-center gap-2 border-2 border-black bg-[#ec3013] px-5 text-sm font-extrabold text-white shadow-[3px_3px_0px_#000000]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>Télécharger le fichier</button></div></section></div>
<div class="mt-6"><section id="guide" class="border-2 border-black bg-white" aria-labelledby="t-guide"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-guide" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01"/></svg>Charger le fichier dans votre logiciel</h2></div><ol class="grid gap-3 p-4 text-sm font-semibold md:grid-cols-3"><li class="flex gap-3 border-2 border-black p-3"><span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black bg-[#FFD23F] font-mono text-xs font-semibold">1</span>Téléchargez le fichier CSV ci-dessus.</li><li class="flex gap-3 border-2 border-black p-3"><span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black bg-[#FFD23F] font-mono text-xs font-semibold">2</span>Dans votre logiciel de vie scolaire, ouvrez l’import de notes du service concerné.</li><li class="flex gap-3 border-2 border-black p-3"><span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black bg-[#FFD23F] font-mono text-xs font-semibold">3</span>Choisissez le fichier, vérifiez la correspondance des colonnes, validez.</li></ol><p class="border-t-2 border-black bg-[#FFFBEA] p-3 text-xs font-semibold">Les menus exacts dépendent de votre logiciel et de ses réglages. Un tutoriel vidéo est disponible dans l’aide.</p></section></div>
<script>document.addEventListener('DOMContentLoaded',function(){document.getElementById('x-dl').addEventListener('click',function(){var c='Nom;Prénom;Classe;Devoir;Note;Sur;Coef;Date\nMartin;Léa;BTS SIO 1 A;DM 3;11;20;1;03/10/2026\nNguyen;Sarah;BTS SIO 1 A;DM 3;16;20;1;03/10/2026\n';var a=document.createElement('a');a.href=URL.createObjectURL(new Blob(['\ufeff'+c],{type:'text/csv'}));a.download='notes-bts-sio-1a-dm3.csv';a.click();});});</script></div></div></div>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mon abonnement · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<div class="border-b-2 border-black bg-[#F6F5F1]"><div class="mx-auto grid max-w-[1600px] lg:grid-cols-[240px_minmax(0,1fr)]"><aside class="border-b-2 border-black bg-white p-5 lg:border-b-0 lg:border-r-2"><p class="font-mono text-[11px] font-semibold uppercase tracking-wider">Mon compte</p><ul class="mt-2 grid gap-1"><li><a href="#abo" class="flex items-center gap-3 border-2 border-black bg-black text-white px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/></svg><span class="flex-1">Abonnement</span></a></li><li><a href="#factures" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg><span class="flex-1">Factures</span></a></li><li><a href="#moyen" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><span class="flex-1">Moyen de paiement</span></a></li></ul><div class="mt-6 border-2 border-black bg-[#FFFBEA] p-3 text-xs font-semibold"><p class="font-black">Paiements gérés par Stripe</p><p class="mt-1">Vos données bancaires ne transitent jamais par nos serveurs.</p></div></aside><div class="min-w-0 p-5 lg:p-8"><div class="flex flex-wrap items-end justify-between gap-4"><div><p class="font-mono text-xs font-semibold">Facturation</p><h1 class="mt-1 text-4xl font-black tracking-tight">Mon abonnement</h1><p class="mt-1 font-semibold">M. Belkacemi · BTS SIO 1 A et B</p></div><div class="flex flex-wrap gap-3"><a href="{{ route('paiement') }}" class="inline-flex h-11 items-center gap-2 border-2 border-black bg-[#FFD23F] px-4 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Changer d’offre</a></div></div><div class="mt-6 grid gap-6 xl:grid-cols-2"><section id="abo" class="border-2 border-black bg-white" aria-labelledby="t-abo"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-abo" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/></svg>Offre actuelle</h2></div><div class="grid gap-3 p-4"><div class="flex items-baseline justify-between"><p class="text-2xl font-black">Enseignant · mensuel</p><span class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5 text-xs font-extrabold">Actif</span></div><p class="font-mono font-semibold">29,00 € HT · 34,80 € TTC / mois</p><p class="text-sm font-semibold">Prochain paiement le 29/10/2026 · 2 classes · 33/35 élèves</p><div class="h-3 border-2 border-black"><div class="h-full bg-black" style="width:94%"></div></div><p class="text-xs font-semibold">VM ce mois : 270 h sur 495 h incluses</p><div class="mt-2 flex flex-wrap gap-3"><button type="button" class="inline-flex h-11 items-center gap-2 border-2 border-black px-4 text-sm font-extrabold bg-white hover:bg-[#FFFBEA]">Passer à l’annuel (−2 mois)</button><button type="button" class="inline-flex h-11 items-center gap-2 border-2 border-black px-4 text-sm font-extrabold bg-white hover:bg-[#FF6FB5]">Résilier</button></div></div></section>
<section id="moyen" class="border-2 border-black bg-white" aria-labelledby="t-moyen"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-moyen" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>Moyen de paiement</h2></div><div class="flex items-center justify-between gap-4 p-4"><div class="flex items-center gap-3"><span class="grid h-10 w-14 place-items-center border-2 border-black bg-[#C4B5FD] font-mono text-xs font-semibold">VISA</span><div><p class="font-mono font-semibold">•••• 4242</p><p class="text-xs font-semibold">expire 08/28</p></div></div><button type="button" class="inline-flex h-11 items-center gap-2 border-2 border-black px-4 text-sm font-extrabold bg-white hover:bg-[#FFFBEA]">Modifier</button></div><p class="border-t-2 border-black bg-[#FFFBEA] p-3 text-xs font-semibold">Vous pouvez aussi passer au prélèvement SEPA ou au bon de commande de votre établissement.</p></section></div>
<div class="mt-6"><section id="factures" class="border-2 border-black bg-white" aria-labelledby="t-factures"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-factures" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>Factures</h2></div><div class="overflow-x-auto"><table class="w-full min-w-[560px] border-collapse text-left text-sm"><thead class="border-b-2 border-black bg-[#F6F5F1] font-mono text-[11px] uppercase tracking-wider"><tr><th class="px-4 py-3 font-semibold">N°</th><th class="px-4 py-3 font-semibold">Date</th><th class="px-4 py-3 font-semibold">Montant TTC</th><th class="px-4 py-3 font-semibold">Statut</th><th class="px-4 py-3 font-semibold"></th></tr></thead><tbody><tr class="border-b-2 border-black last:border-b-0"><td class="px-4 py-3 font-mono font-semibold">F-2026-104</td><td class="px-4 py-3 font-mono">29/09/2026</td><td class="px-4 py-3 font-mono font-semibold">34,80 €</td><td class="px-4 py-3"><span class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5 text-xs font-extrabold">Payée</span></td><td class="px-4 py-3 text-right"><a href="#" class="inline-flex items-center gap-1 border-2 border-black px-2 py-1 text-xs font-extrabold hover:bg-black hover:text-white"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>PDF</a></td></tr><tr class="border-b-2 border-black last:border-b-0"><td class="px-4 py-3 font-mono font-semibold">F-2026-081</td><td class="px-4 py-3 font-mono">29/08/2026</td><td class="px-4 py-3 font-mono font-semibold">34,80 €</td><td class="px-4 py-3"><span class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5 text-xs font-extrabold">Payée</span></td><td class="px-4 py-3 text-right"><a href="#" class="inline-flex items-center gap-1 border-2 border-black px-2 py-1 text-xs font-extrabold hover:bg-black hover:text-white"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>PDF</a></td></tr><tr class="border-b-2 border-black last:border-b-0"><td class="px-4 py-3 font-mono font-semibold">F-2026-060</td><td class="px-4 py-3 font-mono">29/07/2026</td><td class="px-4 py-3 font-mono font-semibold">34,80 €</td><td class="px-4 py-3"><span class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5 text-xs font-extrabold">Payée</span></td><td class="px-4 py-3 text-right"><a href="#" class="inline-flex items-center gap-1 border-2 border-black px-2 py-1 text-xs font-extrabold hover:bg-black hover:text-white"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>PDF</a></td></tr></tbody></table></div></section></div></div></div></div>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fiche élève · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" @if(request()->routeIs('cockpit')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" @if(request()->routeIs('espace.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" @if(request()->routeIs('vie.scolaire')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" @if(request()->routeIs('academie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" @if(request()->routeIs('labs.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" @if(request()->routeIs('labs.web')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" @if(request()->routeIs('ide')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" @if(request()->routeIs('maison')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" @if(request()->routeIs('bibliotheque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" @if(request()->routeIs('banque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" @if(request()->routeIs('generateur')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" @if(request()->routeIs('td.imprimable')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" @if(request()->routeIs('quiz.projection')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" @if(request()->routeIs('sujet.creer')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" @if(request()->routeIs('devoirs')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" @if(request()->routeIs('correction')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" @if(request()->routeIs('fiche.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" @if(request()->routeIs('messagerie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" @if(request()->routeIs('export.ent')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<div class="border-b-2 border-black bg-[#F6F5F1]"><div class="mx-auto grid max-w-[1600px] lg:grid-cols-[240px_minmax(0,1fr)]"><aside class="border-b-2 border-black bg-white p-5 lg:border-b-0 lg:border-r-2"><div class="flex items-center gap-3"><span class="grid h-14 w-14 place-items-center border-2 border-black bg-[#FF6FB5] font-mono text-lg font-semibold">LM</span><div><p class="text-lg font-black leading-tight">Léa Martin</p><p class="text-sm font-semibold">BTS SIO 1 · Groupe A</p></div></div>
<dl class="mt-5 grid gap-2 text-sm"><div class="flex justify-between border-b-2 border-black pb-1"><dt class="font-semibold">Prof principal</dt><dd class="font-bold">M. Belkacemi</dd></div><div class="flex justify-between border-b-2 border-black pb-1"><dt class="font-semibold">Option</dt><dd class="font-bold">SISR</dd></div><div class="flex justify-between border-b-2 border-black pb-1"><dt class="font-semibold">Présence</dt><dd class="font-mono font-semibold">88 %</dd></div><div class="flex justify-between"><dt class="font-semibold">Aménagement</dt><dd class="font-bold">Tiers-temps</dd></div></dl>
<p class="mt-6 font-mono text-[11px] font-semibold uppercase tracking-wider">Fiche</p><ul class="mt-2 grid gap-1"><li><a href="#synthese" class="flex items-center gap-3 border-2 border-black bg-black text-white px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/></svg><span class="flex-1">Synthèse</span></a></li><li><a href="#competences" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9H4a2 2 0 0 1 0-4h2M18 9h2a2 2 0 0 0 0-4h-2M4 22h16M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg><span class="flex-1">Compétences</span></a></li><li><a href="#historique" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/></svg><span class="flex-1">Historique</span></a></li><li><a href="#observations" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg><span class="flex-1">Observations</span></a></li></ul>
<div class="mt-6 border-2 border-black bg-[#ec3013] p-3 text-sm font-semibold text-white"><p class="font-black">Alerte ouverte</p><p class="mt-1">Baisse continue depuis 4 semaines. Signalée à la CPE le 27/09.</p></div></aside><div class="min-w-0 p-5 lg:p-8"><div class="flex flex-wrap items-end justify-between gap-4"><div><p class="font-mono text-xs font-semibold">Fiche élève</p><h1 class="mt-1 text-4xl font-black tracking-tight">Léa Martin</h1><p class="mt-1 font-semibold">Accès journalisé · visible par l’équipe pédagogique et la vie scolaire</p></div><div class="flex flex-wrap gap-3"><a href="{{ route('messagerie') }}" class="inline-flex h-11 items-center gap-2 border-2 border-black bg-white px-4 text-sm font-extrabold hover:bg-[#FFFBEA]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>Écrire</a><button type="button" class="inline-flex h-11 items-center gap-2 border-2 border-black px-4 text-sm font-extrabold bg-white hover:bg-[#FFFBEA]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>Exporter en PDF</button><button type="button" class="inline-flex h-11 items-center gap-2 border-2 border-black px-4 text-sm font-extrabold bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>Proposer un accompagnement</button></div></div><ul id="synthese" class="mt-6 grid grid-cols-2 gap-4 md:grid-cols-4"><li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Moyenne QCM</p><span class="h-2.5 w-2.5 bg-[#ec3013]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">7,5</p><p class="mt-3 text-xs font-bold">−4,5 en 4 semaines</p></li><li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Labs réussis</p><span class="h-2.5 w-2.5 bg-[#FFD23F]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">5/14</p><p class="mt-3 text-xs font-bold">3,1 indices par lab</p></li><li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">DM rendus</p><span class="h-2.5 w-2.5 bg-[#7CF2C0]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">3/3</p><p class="mt-3 text-xs font-bold">moyenne 11/20</p></li><li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Temps de lecture</p><span class="h-2.5 w-2.5 bg-[#FF6FB5]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">−62 %</p><p class="mt-3 text-xs font-bold">vs moyenne de la classe</p></li></ul>
<div class="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
<section id="competences" class="border-2 border-black bg-white" aria-labelledby="t-competences"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-competences" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9H4a2 2 0 0 1 0-4h2M18 9h2a2 2 0 0 0 0-4h-2M4 22h16M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg>Compétences du référentiel</h2><span class="font-mono text-xs font-semibold">BTS SIO · bloc 1</span></div><ul class="divide-y-2 divide-black"><li class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-4 p-4"><div><p class="text-sm font-bold">Installer et configurer un poste</p><div class="mt-1 h-2.5 border-2 border-black"><div class="h-full" style="width:80%;background:#7CF2C0"></div></div></div><span class="font-mono text-sm font-semibold">80 %</span><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline fill="none" stroke="#000" stroke-width="2" points="0,10.0 20,9.0 40,8.0 60,7.0 80,6.0"/></svg></li><li class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-4 p-4"><div><p class="text-sm font-bold">Adressage IPv4</p><div class="mt-1 h-2.5 border-2 border-black"><div class="h-full" style="width:55%;background:#FFD23F"></div></div></div><span class="font-mono text-sm font-semibold">55 %</span><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline fill="none" stroke="#b3001b" stroke-width="2" points="0,8.0 20,8.8 40,10.0 60,10.4 80,11.0"/></svg></li><li class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-4 p-4"><div><p class="text-sm font-bold">VLAN et commutation</p><div class="mt-1 h-2.5 border-2 border-black"><div class="h-full" style="width:40%;background:#FF6FB5"></div></div></div><span class="font-mono text-sm font-semibold">40 %</span><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline fill="none" stroke="#b3001b" stroke-width="2" points="0,12.0 20,12.4 40,13.0 60,13.6 80,14.0"/></svg></li><li class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-4 p-4"><div><p class="text-sm font-bold">Scripts Bash</p><div class="mt-1 h-2.5 border-2 border-black"><div class="h-full" style="width:35%;background:#FF6FB5"></div></div></div><span class="font-mono text-sm font-semibold">35 %</span><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline fill="none" stroke="#000" stroke-width="2" points="0,16.0 20,15.6 40,15.0 60,15.2 80,15.0"/></svg></li><li class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-4 p-4"><div><p class="text-sm font-bold">Sécurité des accès</p><div class="mt-1 h-2.5 border-2 border-black"><div class="h-full" style="width:60%;background:#FFD23F"></div></div></div><span class="font-mono text-sm font-semibold">60 %</span><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline fill="none" stroke="#000" stroke-width="2" points="0,12.0 20,11.6 40,11.0 60,10.4 80,10.0"/></svg></li></ul></section>
<section id="observations" class="border-2 border-black bg-white" aria-labelledby="t-observations"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-observations" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>Observations</h2></div><ol class="divide-y-2 divide-black text-sm"><li class="p-4"><p class="flex flex-wrap items-center gap-2"><span class="border-2 border-black bg-[#FFFBEA] px-1.5 text-xs font-extrabold">Difficulté</span><span class="font-mono text-xs">21/09 · M. Belkacemi</span></p><p class="mt-1 font-medium">Participe mais se décourage vite.</p></li><li class="p-4"><p class="flex flex-wrap items-center gap-2"><span class="border-2 border-black bg-[#FFFBEA] px-1.5 text-xs font-extrabold">Progrès</span><span class="font-mono text-xs">14/09 · Mme Roche</span></p><p class="mt-1 font-medium">Très bon travail en binôme sur le câblage.</p></li><li class="p-4"><p class="flex flex-wrap items-center gap-2"><span class="border-2 border-black bg-[#FFFBEA] px-1.5 text-xs font-extrabold">CPE</span><span class="font-mono text-xs">27/09 · Mme Diallo</span></p><p class="mt-1 font-medium">Entretien prévu le 02/10 avec la famille.</p></li></ol><form class="flex gap-2 border-t-2 border-black p-4"><input class="h-10 min-w-0 flex-1 border-2 border-black px-2 text-sm font-medium" placeholder="Ajouter une observation"><button class="h-10 border-2 border-black bg-black px-3 text-sm font-extrabold text-white">Ajouter</button></form></section>
</div>
<div class="mt-6"><section id="historique" class="border-2 border-black bg-white" aria-labelledby="t-historique"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-historique" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/></svg>Historique</h2></div><ol class="divide-y-2 divide-black"><li class="flex items-start gap-4 p-4"><span class="w-12 shrink-0 font-mono text-sm font-semibold">29/09</span><span class="mt-0.5 w-24 shrink-0 border-2 border-black px-1.5 text-center text-xs font-extrabold" style="background:#FFD23F;color:#000">Lab</span><span class="font-semibold">Lab VLAN · étape 2 · 3 indices utilisés</span></li><li class="flex items-start gap-4 p-4"><span class="w-12 shrink-0 font-mono text-sm font-semibold">28/09</span><span class="mt-0.5 w-24 shrink-0 border-2 border-black px-1.5 text-center text-xs font-extrabold" style="background:#ec3013;color:#fff">Examen</span><span class="font-semibold">E6 blanc SISR · 9/20 · 1 sortie (6 s)</span></li><li class="flex items-start gap-4 p-4"><span class="w-12 shrink-0 font-mono text-sm font-semibold">26/09</span><span class="mt-0.5 w-24 shrink-0 border-2 border-black px-1.5 text-center text-xs font-extrabold" style="background:#FF6FB5;color:#000">QCM</span><span class="font-semibold">Lecture CM VLAN · 7/20 · cours lu en 4 min</span></li><li class="flex items-start gap-4 p-4"><span class="w-12 shrink-0 font-mono text-sm font-semibold">24/09</span><span class="mt-0.5 w-24 shrink-0 border-2 border-black px-1.5 text-center text-xs font-extrabold" style="background:#C4B5FD;color:#000">DM</span><span class="font-semibold">DM 2 · Adressage · rendu · 11/20</span></li><li class="flex items-start gap-4 p-4"><span class="w-12 shrink-0 font-mono text-sm font-semibold">22/09</span><span class="mt-0.5 w-24 shrink-0 border-2 border-black px-1.5 text-center text-xs font-extrabold" style="background:#FFD23F;color:#000">Quiz flash</span><span class="font-semibold">Commandes Linux · 3/5</span></li><li class="flex items-start gap-4 p-4"><span class="w-12 shrink-0 font-mono text-sm font-semibold">21/09</span><span class="mt-0.5 w-24 shrink-0 border-2 border-black px-1.5 text-center text-xs font-extrabold" style="background:#7CF2C0;color:#000">Observation</span><span class="font-semibold">« Participe mais se décourage vite. » · M. Belkacemi</span></li></ol></section></div></div></div></div>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,296 @@
@extends('layouts.vitrine')
@section('titre', 'Fonctionnalités')
@section('contenu')
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[10%] top-12 h-14 w-14 bg-[#FF6FB5] [--r:12deg]"></span><span class="zigzag absolute bottom-10 right-[30%] h-4 w-40"></span></div>
<div class="relative mx-auto max-w-7xl px-5 pb-16 pt-14 lg:px-10 lg:pt-20">
<p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Fonctionnalités</p>
<h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Tout ce qu’il faut pour une classe, en ligne.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Des cours aux conseils de classe, de l’IDE aux TD à imprimer, sans rien installer. Un navigateur suffit, pour l’élève comme pour le prof.</p>
</div>
</section>
<section id="pourquoi-outil" class="relative overflow-hidden border-b-4 border-black bg-white" aria-labelledby="t-interet">
<div aria-hidden="true" class="pointer-events-none absolute inset-0 hidden lg:block"><svg viewBox="0 0 80 40" class="absolute left-[46%] top-24 h-10 w-20 rotate-12"><path d="M4 30 C20 6 44 6 60 20 M52 10 L62 21 L48 26" fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="absolute bottom-16 left-8 h-10 w-10 rotate-12 border-4 border-black bg-[#E6FF3F]"></span><span class="absolute right-10 top-10 h-8 w-8 rounded-full border-4 border-black bg-[#FF6FB5]"></span><span class="zigzag absolute bottom-10 right-[40%] h-4 w-32"></span></div>
<div class="relative mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-7">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Pourquoi un tel outil&nbsp;?</p>
<h2 id="t-interet" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Suivre chaque élève, même dans une classe de 35.</h2>
<div class="mt-8 grid gap-5 text-xl font-medium leading-relaxed">
<p>Avec des classes entières et une charge de travail déjà lourde, <strong class="font-black">suivre chaque élève individuellement</strong> devient presque impossible. Un <strong class="font-black">élève en difficulté décroche vite</strong>, souvent sans bruit, et le prof, pris par ses nombreuses classes, s’en rend compte trop tard.</p>
<p>Paillasse <strong class="font-black">surveille tout, sans être intrusif</strong>. Le <strong class="font-black">QCM de début d’heure</strong>, celui qui suit la <strong class="font-black">lecture du cours</strong>, les <strong class="font-black">TP</strong>, les <strong class="font-black">devoirs et exercices maison</strong> : chaque trace remonte au prof. Il voit rapidement <strong class="font-black">qui accompagner plus régulièrement</strong>, qui faire passer au premier rang, à qui demander de réexpliquer une notion.</p>
<p>C’est une <strong class="font-black">supervision bienveillante et naturelle</strong>, qui ne remplace pas le regard du prof mais l’aide à savoir <strong class="font-black">où concentrer ses efforts</strong>. Tout remonte dans le <strong class="font-black">cockpit prof</strong>, d’où il pilote et supervise examens, devoirs maison, quiz et labs.</p>
<p>Dans les labs, chaque étape a ses <strong class="font-black">indices, qui se débloquent après un certain nombre de tentatives</strong>. Ils ne remplacent pas l’aide d’un prof (ni une recherche Google&nbsp;😉), mais ils poussent l’élève à <strong class="font-black">réfléchir un tout petit peu plus avant de vous appeler</strong>. Et souvent, ils vous <strong class="font-black">évitent les questions triviales</strong>.</p>
<p>Et dans l’autre sens, <strong class="font-black">l’élève en excellence peut s’épanouir</strong>. Il aborde des notions plus avancées, avec une difficulté plus forte, <strong class="font-black">sans prendre d’avance sur le programme</strong> : il explore des notions connexes qui développent sa <strong class="font-black">culture générale</strong>.</p>
<p class="relative mt-4 inline-block -rotate-1 self-start border-4 border-black bg-black px-5 py-4 text-3xl font-black leading-tight text-white shadow-[6px_6px_0px_#E6FF3F]">Tout cela dans un unique but : <span class="text-[#E6FF3F]">faciliter votre travail.</span><svg viewBox="0 0 40 40" class="absolute -right-6 -top-6 h-10 w-10" aria-hidden="true"><path d="M20 2 l5 12 13 1 -10 8 3 13 -11 -7 -11 7 3 -13 -10 -8 13 -1 z" fill="#FF6FB5" stroke="#000" stroke-width="3" stroke-linejoin="round"/></svg></p>
</div>
</div>
<div class="grid content-start gap-8 lg:col-span-5 lg:pt-16">
<article class="relative border-4 border-black bg-[#FFD23F] p-6 shadow-[8px_8px_0px_#000000] lg:-rotate-1">
<span class="absolute -top-4 right-5 rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[2px_2px_0px_#000000]">Alerte douce</span>
<h3 class="text-2xl font-black">Un élève décroche</h3>
<ul class="mt-4 grid gap-2 font-semibold"><li class="flex gap-3"><span aria-hidden="true">■</span>3 QCM de début d’heure sous la moyenne</li><li class="flex gap-3"><span aria-hidden="true">■</span>Cours lu en 2 minutes au lieu de 15</li><li class="flex gap-3"><span aria-hidden="true">■</span>Devoir maison non rendu</li></ul>
<p class="mt-4 border-t-2 border-black pt-3 font-extrabold">→ Premier rang, notion à réexpliquer, suivi plus régulier.</p>
</article>
<article class="relative border-4 border-black bg-[#7CF2C0] p-6 shadow-[8px_8px_0px_#000000] lg:translate-x-6 lg:rotate-1">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[2px_2px_0px_#000000]">Excellence</span>
<h3 class="text-2xl font-black">Un élève s’ennuie</h3>
<ul class="mt-4 grid gap-2 font-semibold"><li class="flex gap-3"><span aria-hidden="true">■</span>Tous les TP réussis du premier coup</li><li class="flex gap-3"><span aria-hidden="true">■</span>20/20 au QCM de lecture</li><li class="flex gap-3"><span aria-hidden="true">■</span>Finit avant tout le monde</li></ul>
<p class="mt-4 border-t-2 border-black pt-3 font-extrabold">→ Défis plus durs sur des notions connexes, sans prendre d’avance sur le programme.</p>
</article>
<article class="relative border-4 border-black bg-[#C4B5FD] p-6 shadow-[8px_8px_0px_#000000] lg:-translate-x-3 lg:-rotate-1">
<span class="absolute -top-4 right-5 rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[2px_2px_0px_#000000]">Labs</span>
<div class="flex items-center gap-4"><svg viewBox="0 0 64 64" class="h-14 w-14 shrink-0" aria-hidden="true"><g stroke="#000" stroke-width="4" stroke-linejoin="round" stroke-linecap="round"><path d="M32 6 C18 6 10 16 10 27 C10 36 16 40 20 46 H44 C48 40 54 36 54 27 C54 16 46 6 32 6 Z" fill="#E6FF3F"/><rect x="21" y="46" width="22" height="7" fill="#fff"/><rect x="24" y="53" width="16" height="6" fill="#fff"/><path d="M26 28 L32 36 L38 28" fill="none"/></g><g stroke="#000" stroke-width="3.5" stroke-linecap="round"><path d="M2 20 L7 22 M62 20 L57 22 M8 4 L12 9 M56 4 L52 9"/></g></svg><h3 class="text-2xl font-black">Un indice se débloque</h3></div>
<ol class="mt-4 grid gap-2 font-mono text-sm font-semibold"><li class="border-2 border-black bg-white px-3 py-2">Tentative 1 · <span class="text-[#b3001b]">échec</span></li><li class="border-2 border-black bg-white px-3 py-2">Tentative 3 · 💡 Indice 1 : regarde la commande <strong>ip addr</strong></li><li class="border-2 border-black bg-white px-3 py-2">Tentative 5 · 💡 Indice 2 : le masque /26 donne 62 hôtes</li></ol>
<p class="mt-4 border-t-2 border-black pt-3 font-extrabold">→ L’élève cherche d’abord. Vous gardez votre temps pour les vraies questions.</p>
</article>
</div>
</div>
</section>
<section id="cockpit" class="scroll-mt-16 border-b-4 border-black bg-[#13233A] text-white" aria-labelledby="t-cockpit">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider text-black shadow-[4px_4px_0px_#000000]">Cockpit prof</p>
<h2 id="t-cockpit" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Un seul écran pour tout piloter.</h2>
<p class="mt-6 text-xl font-medium leading-relaxed">Le cockpit prof fait remonter les <strong class="font-black">informations importantes</strong> : qui décroche, qui a fini, qui lève la main, qui n’a pas rendu son devoir. De là, vous <strong class="font-black">pilotez et supervisez</strong> tout le reste : examens, devoirs maison, quiz flash, labs et QCM.</p>
<ul class="mt-8 grid gap-3 font-semibold sm:grid-cols-2">
<li class="flex gap-3 border-2 border-white p-3"><span aria-hidden="true">■</span>Lancer ou arrêter un examen</li>
<li class="flex gap-3 border-2 border-white p-3"><span aria-hidden="true">■</span>Programmer un devoir maison</li>
<li class="flex gap-3 border-2 border-white p-3"><span aria-hidden="true">■</span>Projeter un quiz flash</li>
<li class="flex gap-3 border-2 border-white p-3"><span aria-hidden="true">■</span>Répondre aux mains levées</li>
</ul>
<a href="{{ route('cockpit') }}" class="mt-8 inline-flex items-center gap-4 border-4 border-black bg-[#FFD23F] px-6 py-4 text-lg font-extrabold text-black shadow-[6px_6px_0px_#000000] hover:bg-white">Ouvrir le cockpit →</a>
</div>
<div class="lg:col-span-7">
<div class="border-4 border-black bg-white text-black shadow-[10px_10px_0px_#FF6FB5]">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-4 border-black bg-[#FFD23F] px-5 py-3"><p class="text-xl font-black">Cockpit · BTS SIO 1</p><p class="font-mono text-sm font-semibold">mardi 29/09 · 10 h 12</p></div>
<ul class="grid gap-3 p-5 sm:grid-cols-4">
<li class="border-4 border-black bg-[#ec3013] text-white p-4"><p class="font-mono text-xs font-semibold uppercase">À aider</p><p class="mt-1 text-3xl font-black leading-none">3</p><p class="mt-1 text-sm font-semibold">élèves en difficulté</p></li><li class="border-4 border-black bg-[#FF6FB5] p-4"><p class="font-mono text-xs font-semibold uppercase">Mains levées</p><p class="mt-1 text-3xl font-black leading-none">2</p><p class="mt-1 text-sm font-semibold">en attente</p></li><li class="border-4 border-black bg-[#7CF2C0] p-4"><p class="font-mono text-xs font-semibold uppercase">Examen</p><p class="mt-1 text-3xl font-black leading-none">24/24</p><p class="mt-1 text-sm font-semibold">en cours, 0 sortie</p></li><li class="border-4 border-black bg-[#C4B5FD] p-4"><p class="font-mono text-xs font-semibold uppercase">DM</p><p class="mt-1 text-3xl font-black leading-none">19/24</p><p class="mt-1 text-sm font-semibold">rendus avant vendredi</p></li>
</ul>
<ol class="grid gap-2 border-t-4 border-black p-5 font-semibold">
<li class="flex flex-wrap items-center gap-3"><span class="border-2 border-black bg-[#ec3013] px-2 text-sm font-extrabold text-white">Alerte</span>Léa M. · 3 QCM sous la moyenne · proposer le premier rang</li>
<li class="flex flex-wrap items-center gap-3"><span class="border-2 border-black bg-[#FF6FB5] px-2 text-sm font-extrabold">Main levée</span>Yanis B. · bloqué à l’étape 4 du lab VLAN</li>
<li class="flex flex-wrap items-center gap-3"><span class="border-2 border-black bg-[#FFD23F] px-2 text-sm font-extrabold">DM</span>5 devoirs non rendus · relance automatique jeudi</li>
<li class="flex flex-wrap items-center gap-3"><span class="border-2 border-black bg-[#7CF2C0] px-2 text-sm font-extrabold">Excellence</span>Inès K. · tout réussi · défi connexe proposé</li>
</ol>
</div>
</div>
</div>
</section>
<nav class="sticky top-0 z-20 border-b-4 border-black bg-white" aria-label="Sections">
<ul class="mx-auto flex max-w-7xl flex-wrap gap-2 px-5 py-3 text-sm font-extrabold lg:px-10">
<li><a href="#cockpit" class="block border-2 border-black bg-[#FFD23F] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Cockpit prof</a></li><li><a href="#pourquoi-outil" class="block border-2 border-black bg-[#FF6FB5] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Pourquoi</a></li><li><a href="#ressources" class="block border-2 border-black bg-black text-white px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#FFD23F]">Toutes les ressources</a></li><li><a href="#examen" class="block border-2 border-black bg-[#ec3013] text-white px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Mode examen</a></li><li><a href="#qcm" class="block border-2 border-black bg-[#FFD23F] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">QCM et quiz</a></li><li><a href="#banque" class="block border-2 border-black bg-[#FFD23F] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Quiz flash et banque</a></li><li><a href="#cours" class="block border-2 border-black bg-[#C4B5FD] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">CM, TD, TP</a></li><li><a href="#eleves" class="block border-2 border-black bg-[#7CF2C0] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Élèves et classes</a></li><li><a href="#evolution" class="block border-2 border-black bg-[#FF6FB5] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Évolution</a></li><li><a href="#conseil" class="block border-2 border-black bg-white px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Conseil de classe</a></li><li><a href="#en-ligne" class="block border-2 border-black bg-white px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">100 % en ligne</a></li>
</ul>
</nav>
<section id="ressources" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-ressources">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Toutes les ressources</p>
<h2 id="t-ressources" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">22 outils, un seul site.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Tout ce qui a été ajouté à Paillasse, au même endroit. Chaque carte ouvre l’outil.</p>
<ul class="mt-14 grid gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-4">
<li class="sm:col-span-2 lg:col-span-4"><a href="{{ route('cockpit') }}" class="group relative flex flex-col gap-2 border-4 border-black bg-[#13233A] p-6 text-white shadow-[8px_8px_0px_#FFD23F] transition-transform hover:-translate-y-1 sm:flex-row sm:items-center sm:justify-between"><span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-[#FFD23F] px-2 py-0.5 font-mono text-xs font-semibold text-black">Nouveau</span><span><span class="text-3xl font-black">Cockpit prof</span><span class="mt-2 flex-1 block font-semibold">Alertes, mains levées, examen, DM, observations : tout se pilote sur un seul écran.</span></span><span class="shrink-0 font-extrabold underline underline-offset-4">Ouvrir →</span></a></li>
<li class=""><a href="{{ route('cours.index') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Gratuit</span><span class="font-mono text-sm font-semibold">01</span><span class="mt-2 text-2xl font-black leading-tight">Cours complets</span><span class="mt-2 flex-1 font-semibold">CM chronométrés, illustrés, avec vidéos. QCM de lecture, TD optionnel, TP pour pratiquer. Du SNT au master.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="{{ route('ide') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Nouveau</span><span class="font-mono text-sm font-semibold">02</span><span class="mt-2 text-2xl font-black leading-tight">IDE en ligne</span><span class="mt-2 flex-1 font-semibold">Python, SQL, HTML/CSS/JS, Bash, C. Tests automatiques et corrigés, sans rien installer.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="{{ route('labs.index') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">VM Debian</span><span class="font-mono text-sm font-semibold">03</span><span class="mt-2 text-2xl font-black leading-tight">Labs sur VM</span><span class="mt-2 flex-1 font-semibold">Un vrai terminal Linux (xterm.js) par élève. Chaque étape est vérifiée dans la VM.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="{{ route('labs.web') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#FF6FB5] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Nouveau</span><span class="font-mono text-sm font-semibold">04</span><span class="mt-2 text-2xl font-black leading-tight">Lab web</span><span class="mt-2 flex-1 font-semibold">Terminal et navigateur reliés : l’élève installe Apache, modifie la page, voit le résultat.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="{{ route('bibliotheque') }}" class="group relative flex h-full flex-col border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">225 fiches</span><span class="font-mono text-sm font-semibold">05</span><span class="mt-2 text-2xl font-black leading-tight">Bibliothèque du prof</span><span class="mt-2 flex-1 font-semibold">Tout le référentiel, du SNT au master, vérifié sur les textes officiels (BO, arrêtés, RNCP).</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="{{ route('banque') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">1 240 questions</span><span class="font-mono text-sm font-semibold">06</span><span class="mt-2 text-2xl font-black leading-tight">Banque de sujets</span><span class="mt-2 flex-1 font-semibold">Questions et sujets d’examen personnalisables, classés par cursus, notion et difficulté.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="{{ route('generateur') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">À l’infini</span><span class="font-mono text-sm font-semibold">07</span><span class="mt-2 text-2xl font-black leading-tight">Générateur de TD</span><span class="mt-2 flex-1 font-semibold">Des exercices toujours nouveaux : sous-réseaux, conversions, droits Unix, SQL…</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="{{ route('td.imprimable') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">PDF</span><span class="font-mono text-sm font-semibold">08</span><span class="mt-2 text-2xl font-black leading-tight">TD à imprimer</span><span class="mt-2 flex-1 font-semibold">Étapes numérotées, cases à remplir, auto-évaluation. Correction imprimée à part.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="{{ route('quiz.projection') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#FF6FB5] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Début d’heure</span><span class="font-mono text-sm font-semibold">09</span><span class="mt-2 text-2xl font-black leading-tight">Quiz flash</span><span class="mt-2 flex-1 font-semibold">Diaporama projeté, élèves connectés depuis PC ou mobile. Vous voyez qui manque.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="{{ route('devoirs') }}" class="group relative flex h-full flex-col border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Maison</span><span class="font-mono text-sm font-semibold">10</span><span class="mt-2 text-2xl font-black leading-tight">Devoirs maison</span><span class="mt-2 flex-1 font-semibold">Programmez un devoir, fixez la date de rendu, suivez qui a rendu et corrigez en ligne.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="{{ route('maison') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Aller plus loin</span><span class="font-mono text-sm font-semibold">11</span><span class="mt-2 text-2xl font-black leading-tight">Ressources à la maison</span><span class="mt-2 flex-1 font-semibold">HackerRank, DataCamp et d’autres ressources gratuites pour les élèves motivés.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="{{ route('examen') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#ec3013] text-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Surveillé</span><span class="font-mono text-sm font-semibold">12</span><span class="mt-2 text-2xl font-black leading-tight">Mode examen</span><span class="mt-2 flex-1 font-semibold">Changement d’onglet, souris qui sort, fenêtre quittée : tout est noté en direct.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="{{ route('espace.eleve') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Élève</span><span class="font-mono text-sm font-semibold">13</span><span class="mt-2 text-2xl font-black leading-tight">Espace élève</span><span class="mt-2 flex-1 font-semibold">Calendrier, devoirs, examens à venir, exercices par niveau, progression et « Lever la main ».</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="{{ route('vie.scolaire') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">CPE · intendance</span><span class="font-mono text-sm font-semibold">14</span><span class="mt-2 text-2xl font-black leading-tight">Vie scolaire</span><span class="mt-2 flex-1 font-semibold">Alertes toutes classes, conseils de classe, journal des examens, licences, factures et consommation de VM.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="{{ route('fiche.eleve') }}" class="group relative flex h-full flex-col border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Équipe</span><span class="font-mono text-sm font-semibold">15</span><span class="mt-2 text-2xl font-black leading-tight">Fiche élève</span><span class="mt-2 flex-1 font-semibold">Compétences, historique, observations et alertes réunis sur une seule fiche.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="{{ route('correction') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Gain de temps</span><span class="font-mono text-sm font-semibold">16</span><span class="mt-2 text-2xl font-black leading-tight">Correction assistée</span><span class="mt-2 flex-1 font-semibold">Barème pré-rempli à partir des calculs, des commandes rejouées et des tests. Vous validez.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="{{ route('sujet.creer') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#FF6FB5] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">5 étapes</span><span class="font-mono text-sm font-semibold">17</span><span class="mt-2 text-2xl font-black leading-tight">Créer un sujet</span><span class="mt-2 flex-1 font-semibold">Cadre, questions de la banque, barème, surveillance, publication.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="{{ route('messagerie') }}" class="group relative flex h-full flex-col border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Encadrée</span><span class="font-mono text-sm font-semibold">18</span><span class="mt-2 text-2xl font-black leading-tight">Messagerie</span><span class="mt-2 flex-1 font-semibold">Prof, élève, classe, collègues et CPE. Réponses rapides : indice, cours, créneau.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="{{ route('export.ent') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">CSV</span><span class="font-mono text-sm font-semibold">19</span><span class="mt-2 text-2xl font-black leading-tight">Export Pronote / ENT</span><span class="mt-2 flex-1 font-semibold">Notes, présences et appréciations prêtes à charger dans votre logiciel.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="{{ route('academie') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Multi-sites</span><span class="font-mono text-sm font-semibold">20</span><span class="mt-2 text-2xl font-black leading-tight">Académie</span><span class="mt-2 flex-1 font-semibold">Usage et compétences agrégés par établissement, sans donnée nominative.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="{{ route('aide') }}" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Vidéos</span><span class="font-mono text-sm font-semibold">21</span><span class="mt-2 text-2xl font-black leading-tight">Aide et tutoriels</span><span class="mt-2 flex-1 font-semibold">Tutoriels courts et guides pas à pas, réponse sous 24 h.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
</ul>
</div>
</section>
<section id="examen" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-examen">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-[#ec3013] text-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Mode examen</p>
<h2 id="t-examen" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vous savez quand un élève quitte sa copie.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Pendant une épreuve, Paillasse enregistre chaque sortie de l’élève : changement d’onglet, fenêtre quittée, souris sortie du navigateur. Chaque événement est horodaté et apparaît en direct sur votre écran.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2"><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Changement d’onglet détecté</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Fenêtre du navigateur quittée</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Souris sortie de la page</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Sortie du plein écran</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Copier-coller bloqué</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Indices désactivés</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>VM sans accès Internet</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Remise automatique à la fin du temps</span></li></ul>
<a href="{{ route('examen') }}" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] mt-10">Voir le mode examen <span class="font-mono" aria-hidden="true">→</span></a>
</div>
<div class="lg:col-span-6">
<div class="border-4 border-black bg-[#13233A] text-white shadow-[10px_10px_0px_#FFD23F]" id="demo-examen">
<div class="flex flex-wrap items-center gap-3 border-b-4 border-black bg-black px-5 py-3">
<span class="border-2 border-white bg-[#ec3013] px-2 font-mono text-xs font-semibold">EN DIRECT</span>
<p class="flex-1 font-extrabold">Essayez : changez d’onglet ou sortez la souris de la page</p>
<p class="font-mono text-sm"><span id="nb-incidents" class="text-2xl font-semibold text-[#FFD23F]">0</span> incident(s)</p>
</div>
<ol id="journal-examen" class="grid max-h-[340px] min-h-[260px] content-start gap-2 overflow-y-auto p-5 font-mono text-sm" aria-live="polite">
<li class="text-[#9fb0c8]">En attente… Rien à signaler pour l’instant.</li>
</ol>
<p class="border-t-4 border-black bg-[#0d192b] px-5 py-3 text-sm font-semibold">Essayez aussi de copier ce texte : la copie est bloquée pendant l’épreuve.</p>
</div>
</div>
</div>
</section>
<section id="qcm" class="scroll-mt-16 border-b-4 border-black bg-[#FFD23F]" aria-labelledby="t-qcm">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-7">
<p class="inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">QCM et quiz</p>
<h2 id="t-qcm" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Chaque erreur devient une explication.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">L’élève valide, voit sa note, puis lit pourquoi la bonne réponse est la bonne. Vous voyez quelles questions font trébucher la classe.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2"><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Choix unique ou multiple</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Vrai / faux, réponse numérique</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Texte à trous</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Correction expliquée question par question</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Tirage aléatoire dans une banque</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Import et export GIFT et Moodle XML</span></li></ul>
</div>
<div class="grid content-start gap-5 lg:col-span-5">
<div class="border-4 border-black bg-white p-5 shadow-[8px_8px_0px_#000000] lg:rotate-1">
<p class="font-mono text-sm font-semibold">Question 2 · réussie par 38 % de la classe</p>
<p class="mt-2 text-xl font-extrabold">Quelle est l’adresse réseau de 10.0.3.200/22 ?</p>
<div class="mt-4 h-4 border-2 border-black bg-white"><div class="h-full w-[38%] border-r-2 border-black bg-[#ec3013]"></div></div>
<p class="mt-3 font-semibold">Erreur fréquente : 10.0.3.0 (le masque n’est pas appliqué au 3ᵉ octet).</p>
</div>
<a href="{{ route('cours.show') }}#qcm" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F] self-start">Essayer un QCM corrigé</a>
</div>
</div>
</section>
<section id="banque" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-banque">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-2 lg:px-10">
<div>
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Quiz de début d’heure</p>
<h2 id="t-banque" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter">5 minutes pour réveiller la classe.</h2>
<p class="mt-6 text-xl font-medium leading-relaxed">Sélectionnez les outils à réviser parmi ceux proposés : ls, chmod, grep, ip, ssh, systemctl… Un diaporama s’affiche au tableau. Les élèves se connectent avec leur identifiant, sur téléphone ou sur PC, depuis leur navigateur. Vous voyez en direct qui est là et qui manque.</p>
<ul class="mt-6 flex flex-wrap gap-2 font-mono text-sm font-semibold"><li class="border-2 border-black bg-black text-white px-2 py-0.5">ls</li><li class="border-2 border-black bg-white px-2 py-0.5">chmod</li><li class="border-2 border-black bg-white px-2 py-0.5">grep</li><li class="border-2 border-black bg-black text-white px-2 py-0.5">ip</li><li class="border-2 border-black bg-white px-2 py-0.5">ping</li><li class="border-2 border-black bg-white px-2 py-0.5">ssh</li><li class="border-2 border-black bg-black text-white px-2 py-0.5">systemctl</li><li class="border-2 border-black bg-white px-2 py-0.5">dig</li></ul>
<a href="{{ route('banque') }}#flash" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F] mt-8">Créer un quiz flash</a>
</div>
<div class="border-4 border-black bg-[#C4B5FD] p-7 shadow-[10px_10px_0px_#000000] lg:rotate-1">
<p class="inline-block border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider">Banque de sujets</p>
<h3 class="mt-5 text-4xl font-black leading-tight tracking-tighter">1 240 questions, à votre sauce.</h3>
<p class="mt-4 text-lg font-semibold">Classées par cursus, notion et difficulté. Modifiez-les, écrivez les vôtres, partagez-les avec vos collègues. Composez un sujet d’examen en quelques clics.</p>
<ul class="mt-5 grid gap-2 font-semibold"><li class="flex gap-3"><span aria-hidden="true">■</span>6 types de questions</li><li class="flex gap-3"><span aria-hidden="true">■</span>Explication pour chaque réponse</li><li class="flex gap-3"><span aria-hidden="true">■</span>Statistiques de réussite par question</li><li class="flex gap-3"><span aria-hidden="true">■</span>Sujets prêts : E6 blanc SISR, contrôles, QCM de trimestre</li></ul>
<a href="{{ route('banque') }}" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] mt-8">Ouvrir la banque <span class="font-mono" aria-hidden="true">→</span></a><div class="mt-4 flex flex-wrap gap-3"><a href="{{ route('bibliotheque') }}" class="border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Bibliothèque du référentiel →</a><a href="{{ route('generateur') }}" class="border-4 border-black bg-[#FF6FB5] px-4 py-2 font-extrabold">Générateur de TD →</a></div>
</div>
</div>
</section>
<section id="cours" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-cours">
<div class="mx-auto max-w-7xl px-5 py-20 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]">CM, TD, TP</p>
<h2 id="t-cours" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Des séquences prêtes, à votre main.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Chaque cours suit le même parcours, calé sur votre référentiel. Dupliquez-le, changez ce que vous voulez, assignez-le en un clic.</p>
<ol class="mt-12 grid gap-6 md:grid-cols-5">
<li class="border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000]"><p class="font-mono text-sm font-semibold">1 · CM</p><p class="mt-3 text-xl font-black">Une page complète</p><p class="mt-2 font-semibold">Illustrée, chronométrée. L’élève doit tout lire.</p></li>
<li class="border-4 border-black bg-[#FFD23F] p-6 shadow-[6px_6px_0px_#000000] md:translate-y-6"><p class="font-mono text-sm font-semibold">2 · QCM</p><p class="mt-3 text-xl font-black">A-t-il bien lu ?</p><p class="mt-2 font-semibold">Questions sur les notions du texte.</p></li>
<li class="border-4 border-dashed border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000]"><p class="font-mono text-sm font-semibold">3 · TD</p><p class="mt-3 text-xl font-black">Optionnel</p><p class="mt-2 font-semibold">Exercices corrigés pour s’entraîner.</p></li>
<li class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000] md:translate-y-6"><p class="font-mono text-sm font-semibold">4 · TP</p><p class="mt-3 text-xl font-black">Pratiquer</p><p class="mt-2 font-semibold">VM prête en 5 s, étapes vérifiées.</p></li>
<li class="border-4 border-black bg-black p-6 text-white shadow-[6px_6px_0px_#ec3013]"><p class="font-mono text-sm font-semibold">5 · Examen</p><p class="mt-3 text-xl font-black">Quand le prof veut</p><p class="mt-2 font-semibold">Sujet tiré de la banque, surveillé en direct.</p></li>
</ol>
<div class="mt-16 flex flex-wrap gap-4"><a href="{{ route('cours.cm') }}" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000]">Lire un CM complet <span class="font-mono" aria-hidden="true">→</span></a>
<a href="{{ route('cours.index') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F]">Parcourir les cours gratuits</a><a href="{{ route('ide') }}" class="inline-flex items-center gap-3 border-4 border-black bg-[#FF6FB5] px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">Ouvrir l’IDE en ligne</a></div>
</div>
</section>
<section id="eleves" class="scroll-mt-16 border-b-4 border-black bg-[#7CF2C0]" aria-labelledby="t-eleves">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Élèves et classes</p>
<h2 id="t-eleves" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vos classes, vos groupes, en quelques minutes.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Créez une classe, découpez-la en groupes, ajoutez les élèves comme vous préférez. L’établissement garde la main sur tout depuis l’espace administrateur, CPE compris.</p></div>
<ol class="grid content-start gap-3 lg:col-span-6">
<li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] "><span class="font-mono text-2xl font-semibold">1</span>Code ou QR de classe, validé par le prof</li><li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] md:ml-8"><span class="font-mono text-2xl font-semibold">2</span>Import CSV : nom, prénom, groupe</li><li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] "><span class="font-mono text-2xl font-semibold">3</span>Saisie rapide, une ligne par élève</li><li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] md:ml-8"><span class="font-mono text-2xl font-semibold">4</span>Fiche de connexion imprimée pour les mineurs, sans e-mail</li><li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] "><span class="font-mono text-2xl font-semibold">5</span>Moodle LTI 1.3 (bientôt)</li>
<li class="mt-4 border-4 border-black bg-black p-4 font-bold text-white">Fin d’année : archivage de la classe, suppression automatique 90 jours après.</li>
</ol>
</div>
</section>
<section id="evolution" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-evolution">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Évolution des élèves</p>
<h2 id="t-evolution" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Voyez qui progresse, semaine après semaine.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Notes de QCM, étapes de TP réussies, temps passé, compétences du référentiel : tout se suit dans le temps, pour un élève ou pour la classe.</p>
<a href="{{ route('suivi') }}" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] mt-10">Ouvrir le suivi de classe <span class="font-mono" aria-hidden="true">→</span></a>
</div>
<figure class="border-4 border-black bg-white p-5 shadow-[10px_10px_0px_#000000] lg:col-span-7">
<figcaption class="flex flex-wrap items-center justify-between gap-3">
<span class="text-xl font-black">Nora Kaci · moyenne aux QCM</span>
<span class="flex gap-4 text-sm font-semibold"><span class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black bg-[#FF6FB5]"></span>Nora</span><span class="flex items-center gap-2"><span class="w-6 border-t-[3px] border-dashed border-black"></span>Classe</span></span>
</figcaption>
<div class="mt-4"><svg viewBox="0 0 600 240" class="h-auto w-full" role="img" aria-label="Moyenne aux QCM de Nora sur 10 semaines, de 9 à 15,5 sur 20, contre 11 à 13 pour la classe">
<line x1="36" x2="564" y1="204" y2="204" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="208" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">8</text><line x1="36" x2="564" y1="162" y2="162" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="166" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">10</text><line x1="36" x2="564" y1="120" y2="120" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="124" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">12</text><line x1="36" x2="564" y1="78" y2="78" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="82" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">14</text><line x1="36" x2="564" y1="36" y2="36" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="40" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">16</text>
<text x="36" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S1</text><text x="94.66666666666666" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S2</text><text x="153.33333333333331" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S3</text><text x="212" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S4</text><text x="270.66666666666663" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S5</text><text x="329.3333333333333" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S6</text><text x="388" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S7</text><text x="446.6666666666667" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S8</text><text x="505.3333333333333" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S9</text><text x="564" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S10</text>
<polyline points="36.0,141.0 94.7,141.0 153.3,130.5 212.0,130.5 270.7,120.0 329.3,120.0 388.0,109.5 446.7,109.5 505.3,99.0 564.0,99.0" fill="none" stroke="#000" stroke-width="3" stroke-dasharray="8 6"/>
<polyline points="36.0,183.0 94.7,162.0 153.3,141.0 212.0,151.5 270.7,120.0 329.3,99.0 388.0,109.5 446.7,78.0 505.3,57.0 564.0,46.5" fill="none" stroke="#000" stroke-width="5" stroke-linejoin="round"/>
<rect x="30" y="177" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="88.66666666666666" y="156" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="147.33333333333331" y="135" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="206" y="145.5" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="264.66666666666663" y="114" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="323.3333333333333" y="93" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="382" y="103.5" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="440.6666666666667" y="72" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="499.3333333333333" y="51" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="558" y="40.5" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/>
</svg></div>
<p class="mt-2 border-t-2 border-black pt-3 font-semibold">+6,5 points en 10 semaines. Décrochage repéré en S4, rattrapé après le TD assigné.</p>
</figure>
</div>
</section>
<section id="conseil" class="scroll-mt-16 border-b-4 border-black bg-[#C4B5FD]" aria-labelledby="t-conseil">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Conseil de classe</p>
<h2 id="t-conseil" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vos remarques, prêtes pour le conseil.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Notez une observation en deux clics pendant le cours. Au moment du conseil de classe, tout est rangé par élève et par période : notes, progression, assiduité en TP, remarques datées.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2"><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Remarques datées et catégorisées</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Visibles par l’équipe et le CPE</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Synthèse par trimestre ou semestre</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Export PDF et CSV pour le conseil</span></li></ul>
</div>
<div class="grid content-start gap-6 lg:col-span-7">
<article class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]">
<div class="flex flex-wrap items-baseline justify-between gap-3 border-b-4 border-black pb-3"><h3 class="text-2xl font-black">Sami Lefèvre · 1er trimestre</h3><span class="font-mono text-sm font-semibold">QCM 11,2 · TP 14/20 étapes</span></div>
<ol class="mt-4 grid gap-3">
<li class="flex flex-wrap gap-3"><span class="border-2 border-black bg-[#7CF2C0] px-2 text-sm font-extrabold">Progrès</span><span class="font-mono text-sm">14/11</span><span class="font-semibold">Beaucoup plus autonome sur les TP réseau.</span></li>
<li class="flex flex-wrap gap-3"><span class="border-2 border-black bg-[#FFD23F] px-2 text-sm font-extrabold">Travail</span><span class="font-mono text-sm">28/10</span><span class="font-semibold">QCM VLAN non rendu, rattrapé le lendemain.</span></li>
<li class="flex flex-wrap gap-3"><span class="border-2 border-black bg-[#FF6FB5] px-2 text-sm font-extrabold">Comportement</span><span class="font-mono text-sm">03/10</span><span class="font-semibold">A aidé deux camarades bloqués sur le DHCP.</span></li>
</ol>
<div class="mt-5 flex flex-wrap gap-3"><button type="button" class="border-4 border-black bg-black px-4 py-2 font-extrabold text-white">+ Ajouter une remarque</button><button type="button" class="border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Exporter pour le conseil</button></div>
</article>
</div>
</div>
</section>
<section id="en-ligne" class="scroll-mt-16 bg-[#13233A] text-white" aria-labelledby="t-en-ligne">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<h2 id="t-en-ligne" class="max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">100 % en ligne. Rien à installer.</h2>
<ul class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#FFD23F]"><p class="text-xl font-black">Vieux PC et Chromebooks</p><p class="mt-2 font-semibold">Un navigateur récent suffit.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#7CF2C0]"><p class="text-xl font-black">Réseau du lycée</p><p class="mt-2 font-semibold">Aucun port à ouvrir, ça passe le filtrage.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#FF6FB5]"><p class="text-xl font-black">À la maison aussi</p><p class="mt-2 font-semibold">L’élève reprend son TP là où il l’a laissé.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#C4B5FD]"><p class="text-xl font-black">Connexion lente</p><p class="mt-2 font-semibold">Le terminal est léger, il reste fluide.</p></li>
</ul>
</div>
</section>
<script>
(function () {
var journal = document.getElementById('journal-examen'), nb = document.getElementById('nb-incidents'), n = 0, vide = true, dernier = '';
function note(t, c) {
if (t === dernier && Date.now() - note.t < 800) return; dernier = t; note.t = Date.now();
if (vide) { journal.innerHTML = ''; vide = false; }
n++; nb.textContent = n;
var li = document.createElement('li');
li.className = 'flex flex-wrap gap-3 border-2 border-white p-2 ' + c;
li.innerHTML = '<span class="font-semibold">' + new Date().toLocaleTimeString('fr-FR') + '</span><span>' + t + '</span>';
journal.prepend(li);
}
note.t = 0;
document.addEventListener('visibilitychange', function () { if (document.hidden) note('Changement d’onglet', 'bg-[#ec3013]'); else note('Retour sur la copie', 'bg-[#0d192b]'); });
window.addEventListener('blur', function () { note('Fenêtre du navigateur quittée', 'bg-[#ec3013]'); });
document.documentElement.addEventListener('mouseleave', function () { note('Souris sortie de la page', 'bg-[#FF6FB5] text-black'); });
['copy', 'cut', 'paste'].forEach(function (ev) {
document.getElementById('demo-examen').addEventListener(ev, function (e) { e.preventDefault(); note('Tentative de ' + (ev === 'paste' ? 'collage' : 'copie') + ' bloquée', 'bg-[#FFD23F] text-black'); });
});
})();
</script>
@endsection

View file

@ -0,0 +1,104 @@
@extends('layouts.vitrine')
@section('titre', 'Générateur de TD')
@section('contenu')
<section class="border-b-4 border-black bg-white">
<div class="mx-auto max-w-7xl px-5 pb-12 pt-12 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Générateur de TD</p>
<h1 class="mt-6 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Des exercices à l’infini, corrigés tout de suite.</h1>
<p class="mt-6 max-w-3xl text-xl font-medium leading-relaxed">Chaque clic tire un nouvel exercice au hasard. La correction montre le calcul, étape par étape. En mode examen : 10 questions, chronométrées, notées sur 20.</p>
</div>
</section>
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-12 lg:grid-cols-12 lg:px-10">
<aside class="grid content-start gap-4 lg:col-span-3">
<p class="font-extrabold">Type d’exercice</p>
<div class="grid gap-2" role="group" aria-label="Type d’exercice">
<button type="button" data-type="reseau" aria-pressed="true" class="border-4 border-black bg-[#7CF2C0] px-4 py-3 text-left font-extrabold shadow-[4px_4px_0px_#000000] aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-2 aria-pressed:outline-black">Sous-réseaux</button>
<button type="button" data-type="binaire" aria-pressed="false" class="border-4 border-black bg-[#FFD23F] px-4 py-3 text-left font-extrabold shadow-[4px_4px_0px_#000000] aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-2 aria-pressed:outline-black">Décimal → binaire</button>
<button type="button" data-type="hexa" aria-pressed="false" class="border-4 border-black bg-[#C4B5FD] px-4 py-3 text-left font-extrabold shadow-[4px_4px_0px_#000000] aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-2 aria-pressed:outline-black">Décimal → hexadécimal</button>
<button type="button" data-type="c2" aria-pressed="false" class="border-4 border-black bg-[#FF6FB5] px-4 py-3 text-left font-extrabold shadow-[4px_4px_0px_#000000] aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-2 aria-pressed:outline-black">Complément à 2</button>
<button type="button" data-type="chmod" aria-pressed="false" class="border-4 border-black bg-white px-4 py-3 text-left font-extrabold shadow-[4px_4px_0px_#000000] aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-2 aria-pressed:outline-black">Droits chmod</button>
</div>
<div class="mt-4 border-4 border-black bg-black p-4 text-white">
<p class="font-extrabold">Mode examen</p>
<p class="mt-1 text-sm font-semibold">10 questions du type choisi, chrono, note sur 20.</p>
<button type="button" id="g-exam" class="mt-3 border-2 border-white bg-[#ec3013] px-3 py-1 font-extrabold">Lancer l’examen</button>
</div>
<p class="border-2 border-black bg-white p-3 font-mono text-sm font-semibold">Série : <span id="g-serie">0</span> · Réussis : <span id="g-ok">0</span> / <span id="g-tot">0</span></p>
</aside>
<section class="lg:col-span-9" aria-live="polite">
<div id="g-barre" hidden class="mb-5 flex flex-wrap items-center gap-4 border-4 border-black bg-[#ec3013] px-5 py-3 font-extrabold text-white"><span>MODE EXAMEN</span><span>Question <span id="g-qn">1</span> / 10</span><span class="ml-auto font-mono text-xl" id="g-chrono">00:00</span></div>
<form id="g-form" class="border-4 border-black bg-white p-7 shadow-[10px_10px_0px_#000000]">
<p id="g-titre" class="font-mono text-sm font-semibold"></p>
<p id="g-enonce" class="mt-3 text-3xl font-black leading-tight"></p>
<div id="g-champs" class="mt-6 grid gap-4 sm:grid-cols-3"></div>
<div class="mt-6 flex flex-wrap gap-4"><button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000]">Corriger</button><button type="button" id="g-new" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F]">Nouvel exercice</button></div>
<div id="g-corr" hidden class="mt-6 border-4 border-black p-5"><p id="g-verdict" class="text-xl font-black"></p><pre id="g-etapes" class="mt-3 whitespace-pre-wrap font-mono text-sm font-semibold"></pre></div>
</form>
<div id="g-fin" hidden class="mt-8 border-4 border-black bg-[#FFD23F] p-7 shadow-[10px_10px_0px_#000000]"><p class="text-2xl font-black">Examen terminé</p><p class="mt-2 font-mono text-7xl font-semibold"><span id="g-note">0</span> / 20</p><p id="g-temps" class="mt-2 text-lg font-bold"></p></div>
</section>
</div>
<script>
(function () {
var $ = function (id) { return document.getElementById(id); };
var type = 'reseau', cur = null, serie = 0, ok = 0, tot = 0, exam = null;
var r = function (a, b) { return a + Math.floor(Math.random() * (b - a + 1)); };
var ip = function (n) { return [n >>> 24, (n >>> 16) & 255, (n >>> 8) & 255, n & 255].join('.'); };
var b8 = function (n) { return (n & 255).toString(2).padStart(8, '0'); };
var G = {
reseau: function () {
var pref = [[10, r(0, 255)], [172, r(16, 31)], [192, 168]][r(0, 2)], a = ((pref[0] << 24) | (pref[1] << 16) | (r(0, 255) << 8) | r(1, 254)) >>> 0, c = r(20, 30);
var m = c === 0 ? 0 : (0xFFFFFFFF << (32 - c)) >>> 0, net = (a & m) >>> 0, bc = (net | (~m >>> 0)) >>> 0, h = Math.pow(2, 32 - c) - 2;
return { titre: 'Sous-réseaux · IPv4', enonce: ip(a) + '/' + c, champs: [['Adresse réseau', ip(net)], ['Diffusion', ip(bc)], ['Nombre d’hôtes', String(h)]],
etapes: 'Masque /' + c + ' = ' + ip(m) + '\nAdresse ET masque = ' + ip(net) + '\nBits d’hôte à 1 → diffusion ' + ip(bc) + '\nHôtes = 2^' + (32 - c) + ' − 2 = ' + h };
},
binaire: function () { var n = r(0, 255); return { titre: 'Conversion · décimal vers binaire (8 bits)', enonce: String(n), champs: [['En binaire', b8(n), function (v) { return /^[01]{1,8}$/.test(v) && parseInt(v, 2) === n; }]], etapes: [128, 64, 32, 16, 8, 4, 2, 1].map(function (p) { return p + ' → ' + ((n & p) ? '1' : '0'); }).join(' ') + '\n' + n + ' = ' + b8(n) }; },
hexa: function () { var n = r(0, 255), hx = n.toString(16).toUpperCase().padStart(2, '0'); return { titre: 'Conversion · décimal vers hexadécimal', enonce: String(n), champs: [['En hexadécimal', hx, function (v) { return parseInt(v.replace(/^0x/i, ''), 16) === n && /^(0x)?[0-9a-f]{1,2}$/i.test(v); }]], etapes: n + ' = ' + Math.floor(n / 16) + ' × 16 + ' + (n % 16) + '\n' + Math.floor(n / 16) + ' → ' + (Math.floor(n / 16)).toString(16).toUpperCase() + ', ' + (n % 16) + ' → ' + (n % 16).toString(16).toUpperCase() + '\nRésultat : ' + hx }; },
c2: function () { var n = r(-128, -1); return { titre: 'Complément à 2 · sur 8 bits', enonce: String(n), champs: [['Sur 8 bits', b8(n)]], etapes: '|' + n + '| = ' + (-n) + ' = ' + b8(-n) + '\nOn inverse les bits : ' + b8(~(-n)) + '\nOn ajoute 1 : ' + b8(n) }; },
chmod: function () {
var d = [r(4, 7), r(0, 7), r(0, 7)], s = function (x) { return (x & 4 ? 'r' : '-') + (x & 2 ? 'w' : '-') + (x & 1 ? 'x' : '-'); }, sym = d.map(s).join(''), oct = d.join('');
return Math.random() < .5
? { titre: 'Droits Linux · octal vers symbolique', enonce: 'chmod ' + oct, champs: [['Droits (ex. rwxr-x---)', sym]], etapes: d.map(function (x, i) { return ['propriétaire', 'groupe', 'autres'][i] + ' : ' + x + ' = ' + s(x); }).join('\n') + '\nr = 4, w = 2, x = 1' }
: { titre: 'Droits Linux · symbolique vers octal', enonce: sym, champs: [['En octal (ex. 750)', oct]], etapes: d.map(function (x, i) { return s(x) + ' = ' + x; }).join('\n') + '\nr = 4, w = 2, x = 1' };
}
};
function tirer() {
cur = G[type]();
$('g-titre').textContent = cur.titre; $('g-enonce').textContent = cur.enonce; $('g-corr').hidden = true;
$('g-champs').innerHTML = cur.champs.map(function (c, i) { return '<label class="grid gap-2 font-extrabold">' + c[0] + '<input data-i="' + i + '" autocomplete="off" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono"></label>'; }).join('');
var f = $('g-champs').querySelector('input'); if (f) f.focus();
if (exam) $('g-qn').textContent = exam.n + 1;
}
$('g-form').addEventListener('submit', function (e) {
e.preventDefault();
if (!$('g-corr').hidden) { if (exam) suivante(); return; }
var bons = 0;
cur.champs.forEach(function (c, i) {
var inp = $('g-champs').querySelector('[data-i="' + i + '"]'), v = inp.value.trim().replace(/\s/g, ''), juste = c[2] ? c[2](v) : v.toLowerCase() === c[1].toLowerCase();
if (juste) bons++; inp.classList.toggle('bg-[#7CF2C0]', juste); inp.classList.toggle('bg-[#FFD9E8]', !juste);
});
var tout = bons === cur.champs.length; tot++; if (tout) { ok++; serie++; } else serie = 0;
if (exam) exam.pts += bons / cur.champs.length;
$('g-serie').textContent = serie; $('g-ok').textContent = ok; $('g-tot').textContent = tot;
var cr = $('g-corr'); cr.hidden = false; cr.className = 'mt-6 border-4 border-black p-5 ' + (tout ? 'bg-[#7CF2C0]' : 'bg-[#FFD9E8]');
$('g-verdict').textContent = (tout ? 'Juste !' : 'Pas tout à fait.') + ' Réponse : ' + cur.champs.map(function (c) { return c[1]; }).join(' · ');
$('g-etapes').textContent = cur.etapes;
if (exam) $('g-new').textContent = exam.n === 9 ? 'Voir ma note' : 'Question suivante';
});
function suivante() { exam.n++; if (exam.n >= 10) return finir(); tirer(); }
function finir() {
clearInterval(exam.t); $('g-form').hidden = true; $('g-fin').hidden = false;
$('g-note').textContent = (Math.round(exam.pts * 2 * 10) / 10).toString().replace('.', ',');
$('g-temps').textContent = 'Temps : ' + $('g-chrono').textContent; exam = null; $('g-new').textContent = 'Nouvel exercice';
}
$('g-new').addEventListener('click', function () { if (exam) { if ($('g-corr').hidden) return; suivante(); } else tirer(); });
document.querySelectorAll('[data-type]').forEach(function (b) { b.addEventListener('click', function () { if (exam) return; type = b.dataset.type; document.querySelectorAll('[data-type]').forEach(function (x) { x.setAttribute('aria-pressed', x === b); }); tirer(); }); });
$('g-exam').addEventListener('click', function () {
var d = Date.now(); exam = { n: 0, pts: 0, t: setInterval(function () { var s = Math.floor((Date.now() - d) / 1000); $('g-chrono').textContent = String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0'); }, 1000) };
$('g-barre').hidden = false; $('g-fin').hidden = true; $('g-form').hidden = false; tirer();
});
tirer();
})();
</script>
@endsection

View file

@ -0,0 +1,285 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IDE en ligne · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/python/python.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/sql/sql.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/xml/xml.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/javascript/javascript.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/css/css.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/htmlmixed/htmlmixed.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/shell/shell.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/addon/edit/matchbrackets.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/addon/edit/closebrackets.min.js"></script>
<style>
.CodeMirror { height: 100%; font-family: "IBM Plex Mono", monospace; font-size: 15px; background: #13233A; color: #E8EDF5; }
.CodeMirror-gutters { background: #0D192B; border-right: 4px solid #000; }
.CodeMirror-linenumber { color: #6B7F99; }
.CodeMirror-cursor { border-left: 2px solid #FFD23F; }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: #2B4A73 !important; }
.CodeMirror-matchingbracket { color: #FFD23F !important; text-decoration: underline; }
.cm-s-default .cm-keyword { color: #FF6FB5; font-weight: 600; }
.cm-s-default .cm-string { color: #7CF2C0; }
.cm-s-default .cm-number { color: #FFD23F; }
.cm-s-default .cm-comment { color: #8DA2BF; font-style: italic; }
.cm-s-default .cm-def, .cm-s-default .cm-variable-2 { color: #A9C6FF; }
.cm-s-default .cm-builtin { color: #7CE3F2; }
.cm-s-default .cm-variable, .cm-s-default .cm-property { color: #E8EDF5; }
.cm-s-default .cm-operator { color: #FFD23F; }
.cm-s-default .cm-tag { color: #FF6FB5; } .cm-s-default .cm-attribute { color: #FFD23F; } .cm-s-default .cm-bracket { color: #9FB0C8; }
</style>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" @if(request()->routeIs('fonctionnalites')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" @if(request()->routeIs('cockpit')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" @if(request()->routeIs('espace.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" @if(request()->routeIs('vie.scolaire')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" @if(request()->routeIs('academie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" @if(request()->routeIs('labs.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" @if(request()->routeIs('labs.web')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" @if(request()->routeIs('ide')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" @if(request()->routeIs('maison')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" @if(request()->routeIs('bibliotheque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" @if(request()->routeIs('banque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" @if(request()->routeIs('generateur')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" @if(request()->routeIs('td.imprimable')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" @if(request()->routeIs('quiz.projection')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" @if(request()->routeIs('sujet.creer')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" @if(request()->routeIs('devoirs')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" @if(request()->routeIs('correction')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" @if(request()->routeIs('fiche.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" @if(request()->routeIs('messagerie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" @if(request()->routeIs('export.ent')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" @if(request()->routeIs('etablissements')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" @if(request()->routeIs('tarifs')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" @if(request()->routeIs('pourquoi')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="border-b-4 border-black bg-white">
<div class="mx-auto flex max-w-[1500px] flex-wrap items-end gap-6 px-5 pb-8 pt-10 lg:px-8">
<div class="flex-1">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">IDE en ligne</p>
<h1 class="mt-5 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Coder, exécuter, vérifier. Dans le navigateur.</h1>
<p class="mt-4 max-w-3xl text-lg font-semibold">Python, SQL, HTML/CSS/JavaScript et Linux. Le code s’exécute vraiment, les tests disent tout de suite si c’est juste. Ton code est gardé sur cet appareil.</p>
</div>
</div>
</section>
<div class="mx-auto grid max-w-[1500px] gap-6 px-5 py-8 lg:grid-cols-12 lg:px-8">
<nav class="lg:col-span-2" aria-label="Exercices">
<div class="grid gap-5 lg:sticky lg:top-4">
<div>
<p class="border-2 border-black bg-[#FFD23F] px-2 py-1 font-mono text-sm font-semibold">Python</p>
<ul class="mt-2 grid gap-1"><li><button type="button" data-ex="py-pair" class="w-full border-2 border-black bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#FFFBEA] aria-[current=true]:bg-black aria-[current=true]:text-white"><span data-etat class="mr-1 font-mono"></span>Nombre pair ou impair</button></li><li><button type="button" data-ex="py-somme" class="w-full border-2 border-black bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#FFFBEA] aria-[current=true]:bg-black aria-[current=true]:text-white"><span data-etat class="mr-1 font-mono"></span>Somme d’une liste</button></li><li><button type="button" data-ex="py-voyelles" class="w-full border-2 border-black bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#FFFBEA] aria-[current=true]:bg-black aria-[current=true]:text-white"><span data-etat class="mr-1 font-mono"></span>Compter les voyelles</button></li></ul>
</div>
<div>
<p class="border-2 border-black bg-[#C4B5FD] px-2 py-1 font-mono text-sm font-semibold">SQL</p>
<ul class="mt-2 grid gap-1"><li><button type="button" data-ex="sql-select" class="w-full border-2 border-black bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#FFFBEA] aria-[current=true]:bg-black aria-[current=true]:text-white"><span data-etat class="mr-1 font-mono"></span>Filtrer et trier</button></li><li><button type="button" data-ex="sql-group" class="w-full border-2 border-black bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#FFFBEA] aria-[current=true]:bg-black aria-[current=true]:text-white"><span data-etat class="mr-1 font-mono"></span>Moyenne par classe</button></li></ul>
</div>
<div>
<p class="border-2 border-black bg-[#FF6FB5] px-2 py-1 font-mono text-sm font-semibold">Web</p>
<ul class="mt-2 grid gap-1"><li><button type="button" data-ex="web-bouton" class="w-full border-2 border-black bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#FFFBEA] aria-[current=true]:bg-black aria-[current=true]:text-white"><span data-etat class="mr-1 font-mono"></span>Un bouton qui répond</button></li></ul>
</div>
<div>
<p class="border-2 border-black bg-[#7CF2C0] px-2 py-1 font-mono text-sm font-semibold">Linux</p>
<ul class="mt-2 grid gap-1"><li><button type="button" data-ex="bash-tp" class="w-full border-2 border-black bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#FFFBEA] aria-[current=true]:bg-black aria-[current=true]:text-white"><span data-etat class="mr-1 font-mono"></span>Préparer son dossier de TP</button></li></ul>
</div>
</div>
</nav>
<section class="flex min-w-0 flex-col border-4 border-black bg-[#13233A] shadow-[8px_8px_0px_#000000] lg:col-span-7" aria-label="Éditeur">
<div class="flex flex-wrap items-center gap-3 border-b-4 border-black bg-black px-3 py-2 text-white">
<span class="flex gap-1.5"><span class="h-3 w-3 bg-[#ec3013]"></span><span class="h-3 w-3 bg-[#FFD23F]"></span><span class="h-3 w-3 bg-[#7CF2C0]"></span></span>
<span id="fichier" class="font-mono text-sm font-semibold">main.py</span>
<span class="ml-auto flex flex-wrap gap-2">
<button type="button" id="b-reset" class="border-2 border-white px-3 py-1 text-sm font-extrabold hover:bg-white hover:text-black">Réinitialiser</button>
<button type="button" id="b-run" class="border-2 border-white bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold text-black">▶ Exécuter</button>
<button type="button" id="b-test" class="border-2 border-white bg-[#FFD23F] px-3 py-1 text-sm font-extrabold text-black">✓ Vérifier</button>
</span>
</div>
<div id="editeur" class="h-[440px]"></div>
<div class="border-t-4 border-black bg-[#0D192B]">
<div class="flex gap-0 border-b-2 border-black text-sm font-extrabold" role="tablist">
<button type="button" role="tab" data-onglet="sortie" aria-selected="true" class="border-r-2 border-black px-4 py-2 text-white aria-selected:bg-[#FFD23F] aria-selected:text-black">Sortie</button>
<button type="button" role="tab" data-onglet="apercu" aria-selected="false" class="border-r-2 border-black px-4 py-2 text-white aria-selected:bg-[#FFD23F] aria-selected:text-black">Aperçu web</button>
<button type="button" role="tab" data-onglet="terminal" aria-selected="false" class="border-r-2 border-black px-4 py-2 text-white aria-selected:bg-[#FFD23F] aria-selected:text-black">Terminal</button>
</div>
<pre id="p-sortie" data-panneau="sortie" class="h-[220px] overflow-auto whitespace-pre-wrap p-4 font-mono text-sm text-[#E8EDF5]">Clique sur ▶ Exécuter pour lancer ton code.</pre>
<div data-panneau="apercu" hidden class="h-[220px] bg-white"><iframe id="p-apercu" title="Aperçu de la page" class="h-full w-full" sandbox="allow-scripts allow-same-origin"></iframe></div>
<div data-panneau="terminal" hidden class="h-[220px] p-2"><div id="p-terminal" class="h-full"></div></div>
</div>
</section>
<aside class="grid content-start gap-6 lg:col-span-3">
<section class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]" aria-labelledby="c-titre">
<p id="c-cursus" class="font-mono text-xs font-semibold"></p>
<h2 id="c-titre" class="mt-1 text-2xl font-black leading-tight"></h2>
<p id="c-consigne" class="mt-3 font-medium leading-relaxed [&_code]:border-2 [&_code]:border-black [&_code]:bg-[#FFD23F] [&_code]:px-1 [&_code]:font-mono [&_code]:text-sm"></p>
</section>
<section class="border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000]" aria-labelledby="t-tests">
<h2 id="t-tests" class="text-xl font-black">Tests</h2>
<ul id="tests" class="mt-3 grid gap-2 font-mono text-sm font-semibold"><li>Clique sur ✓ Vérifier.</li></ul>
<p id="score" hidden class="mt-4 border-4 border-black bg-white px-3 py-2 text-lg font-black"></p>
</section>
<section class="border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000]"><h2 class="text-xl font-black">Pour aller plus loin</h2><p class="mt-1 text-sm font-semibold">Plateformes externes pour s’entraîner encore.</p><div class="mt-3"><ul class="grid gap-2"><li><a href="https://www.hackerrank.com/domains/python" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>HackerRank · Python</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.hackerrank.com/domains/sql" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>HackerRank · SQL</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.hackerrank.com/domains/shell" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>HackerRank · Linux Shell</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.datacamp.com/category/python" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>DataCamp · Python</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.datacamp.com/category/sql" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>DataCamp · SQL</span><span class="font-mono" aria-hidden="true">↗</span></a></li></ul></div></section>
<p class="border-2 border-black bg-[#FFD23F] p-3 text-sm font-bold">Python tourne dans ton navigateur (Pyodide), SQL aussi (SQLite). Rien à installer.</p>
</aside>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var EX = [{"id":"py-pair","lang":"python","groupe":"Python","titre":"Nombre pair ou impair","cursus":"NSI · Première","consigne":"Complète la fonction <code>est_pair(n)<\/code> : elle renvoie <code>True<\/code> si <code>n<\/code> est pair, <code>False<\/code> sinon. Astuce : l’opérateur <code>%<\/code> donne le reste de la division.","code":"def est_pair(n):\n # Renvoie True si n est pair, False sinon\n pass\n\n\nprint(est_pair(4))\nprint(est_pair(7))\n","tests":["est_pair(4) == True","est_pair(7) == False","est_pair(0) == True","est_pair(-2) == True"]},{"id":"py-somme","lang":"python","groupe":"Python","titre":"Somme d’une liste","cursus":"NSI · Première","consigne":"Écris <code>somme(liste)<\/code> qui renvoie la somme des éléments, <strong>sans utiliser<\/strong> la fonction <code>sum()<\/code>. Utilise une boucle <code>for<\/code>.","code":"def somme(liste):\n total = 0\n # Parcours la liste et ajoute chaque élément à total\n return total\n\n\nprint(somme([3, 5, 2]))\n","tests":["somme([3, 5, 2]) == 10","somme([]) == 0","somme([-1, 1]) == 0","somme([100]) == 100"]},{"id":"py-voyelles","lang":"python","groupe":"Python","titre":"Compter les voyelles","cursus":"BTS CIEL · Informatique","consigne":"Écris <code>nb_voyelles(mot)<\/code> qui compte les voyelles (a, e, i, o, u, y) d’un mot en minuscules.","code":"def nb_voyelles(mot):\n voyelles = \"aeiouy\"\n # À toi de jouer\n return 0\n\n\nprint(nb_voyelles(\"reseau\"))\n","tests":["nb_voyelles(\"reseau\") == 4","nb_voyelles(\"bcd\") == 0","nb_voyelles(\"python\") == 2"]},{"id":"sql-select","lang":"sql","groupe":"SQL","titre":"Filtrer et trier","cursus":"NSI · Terminale","consigne":"Table <code>eleves(nom, classe, moyenne)<\/code>. Affiche le <strong>nom<\/strong> et la <strong>moyenne<\/strong> des élèves de <code>SIO1<\/code> qui ont au moins 12, du meilleur au moins bon.","code":"SELECT nom, moyenne\nFROM eleves\n-- Complète la requête\n;\n","solution":"SELECT nom, moyenne FROM eleves WHERE classe = 'SIO1' AND moyenne >= 12 ORDER BY moyenne DESC;"},{"id":"sql-group","lang":"sql","groupe":"SQL","titre":"Moyenne par classe","cursus":"BTS SIO · Bloc 1","consigne":"Affiche chaque <strong>classe<\/strong> et la <strong>moyenne<\/strong> de ses élèves arrondie à 1 décimale, triées par classe. Utilise <code>GROUP BY<\/code> et <code>ROUND(AVG(...), 1)<\/code>.","code":"SELECT classe\nFROM eleves\n;\n","solution":"SELECT classe, ROUND(AVG(moyenne), 1) FROM eleves GROUP BY classe ORDER BY classe;"},{"id":"web-bouton","lang":"web","groupe":"Web","titre":"Un bouton qui répond","cursus":"NSI · Première","consigne":"Quand on clique sur le bouton, le paragraphe <code>#message<\/code> doit afficher <strong>Bonjour !<\/strong>. Ajoute un écouteur <code>click<\/code> en JavaScript.","code":"<!doctype html>\n<html lang=\"fr\">\n<body style=\"font-family: sans-serif; padding: 20px\">\n <button id=\"bouton\">Clique-moi<\/button>\n <p id=\"message\"><\/p>\n\n <script>\n const bouton = document.getElementById(\"bouton\");\n // Ajoute un écouteur de clic ici\n <\/script>\n<\/body>\n<\/html>\n"},{"id":"bash-tp","lang":"bash","groupe":"Linux","titre":"Préparer son dossier de TP","cursus":"BTS SIO · Bloc 2","consigne":"Dans le terminal : crée un dossier <code>tp<\/code>, entre dedans, puis crée un fichier <code>script.sh<\/code> qui contient <code>echo Bonjour<\/code>.","code":"# Cet exercice se fait dans le terminal, onglet ci-dessous.\n# Commandes utiles : mkdir, cd, echo \"...\" > fichier, cat\n"}];
var SETUP = "CREATE TABLE eleves (id INTEGER PRIMARY KEY, nom TEXT, classe TEXT, moyenne REAL);" +
"INSERT INTO eleves (nom, classe, moyenne) VALUES ('Léa', 'SIO1', 15.5), ('Yanis', 'SIO1', 11), ('Nora', 'SIO1', 12), ('Tom', 'SIO2', 14), ('Inès', 'SIO2', 9.5), ('Sami', 'SIO1', 13.25), ('Chloé', 'SIO2', 17);";
var MODES = { python: 'python', sql: 'text/x-sql', web: 'htmlmixed', bash: 'shell' };
var FICH = { python: 'main.py', sql: 'requete.sql', web: 'index.html', bash: 'notes.sh' };
var $ = function (id) { return document.getElementById(id); };
var cur = null, py = null, SQL = null, shell = null, termOk = false;
var ed = CodeMirror($('editeur'), { lineNumbers: true, indentUnit: 4, matchBrackets: true, autoCloseBrackets: true, viewportMargin: Infinity });
ed.on('change', function () { if (cur) localStorage.setItem('paillasse-ide-' + cur.id, ed.getValue()); });
function onglet(n) {
document.querySelectorAll('[data-onglet]').forEach(function (b) { b.setAttribute('aria-selected', b.dataset.onglet === n); });
document.querySelectorAll('[data-panneau]').forEach(function (p) { p.hidden = p.dataset.panneau !== n; });
if (n === 'terminal' && !termOk) {
termOk = true;
PaillasseTerminal.mount($('p-terminal'), { user: 'eleve', host: 'ide', fontSize: 13, focus: true, onCommand: function (l, sh) { shell = sh; }, welcome: 'Terminal Paillasse · tape help' });
}
}
document.querySelectorAll('[data-onglet]').forEach(function (b) { b.addEventListener('click', function () { onglet(b.dataset.onglet); }); });
function sortie(t, err) { var p = $('p-sortie'); p.textContent = t; p.style.color = err ? '#FF9A8A' : '#E8EDF5'; }
function charger(id) {
cur = EX.filter(function (e) { return e.id === id; })[0];
document.querySelectorAll('[data-ex]').forEach(function (b) { b.setAttribute('aria-current', b.dataset.ex === id); });
$('c-titre').textContent = cur.titre; $('c-cursus').textContent = cur.groupe + ' · ' + cur.cursus; $('c-consigne').innerHTML = cur.consigne;
$('fichier').textContent = FICH[cur.lang];
ed.setOption('mode', MODES[cur.lang]);
ed.setValue(localStorage.getItem('paillasse-ide-' + id) || cur.code);
$('tests').innerHTML = '<li>Clique sur ✓ Vérifier.</li>'; $('score').hidden = true;
sortie(cur.lang === 'bash' ? 'Ouvre l’onglet Terminal pour cet exercice.' : 'Clique sur ▶ Exécuter pour lancer ton code.');
onglet(cur.lang === 'web' ? 'apercu' : cur.lang === 'bash' ? 'terminal' : 'sortie');
if (cur.lang === 'web') $('p-apercu').srcdoc = ed.getValue();
}
function chargerScript(url) { return new Promise(function (ok, ko) { var s = document.createElement('script'); s.src = url; s.onload = ok; s.onerror = ko; document.head.appendChild(s); }); }
function python() {
if (py) return Promise.resolve(py);
sortie('Chargement de Python… (quelques secondes, la première fois seulement)');
return chargerScript('https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js').then(function () { return loadPyodide(); }).then(function (p) { py = p; return p; });
}
function sqlite() {
if (SQL) return Promise.resolve(SQL);
return chargerScript('https://cdn.jsdelivr.net/npm/sql.js@1.10.3/dist/sql-wasm.js').then(function () { return initSqlJs({ locateFile: function (f) { return 'https://cdn.jsdelivr.net/npm/sql.js@1.10.3/dist/' + f; } }); }).then(function (s) { SQL = s; return s; });
}
function base() { var db = new SQL.Database(); db.run(SETUP); return db; }
function tableau(res) {
if (!res.length) return '(aucune ligne)';
var r = res[res.length - 1], w = r.columns.map(function (c, i) { return Math.max(String(c).length, Math.max.apply(null, r.values.map(function (v) { return String(v[i]).length; }))); });
var ligne = function (a) { return a.map(function (x, i) { return String(x).padEnd(w[i]); }).join(' │ '); };
return ligne(r.columns) + '\n' + w.map(function (n) { return '─'.repeat(n); }).join('─┼─') + '\n' + r.values.map(ligne).join('\n') + '\n\n' + r.values.length + ' ligne(s)';
}
function executer() {
var code = ed.getValue();
if (cur.lang === 'python') {
return python().then(function (p) {
var out = '';
p.setStdout({ batched: function (s) { out += s + '\n'; } }); p.setStderr({ batched: function (s) { out += s + '\n'; } });
try { p.runPython(code); sortie(out || '(aucune sortie)'); } catch (e) { sortie(out + String(e.message).split('\n').slice(-3).join('\n'), true); }
});
}
if (cur.lang === 'sql') return sqlite().then(function () { try { sortie(tableau(base().exec(code))); } catch (e) { sortie('Erreur SQL : ' + e.message, true); } });
if (cur.lang === 'web') { $('p-apercu').srcdoc = code; onglet('apercu'); return Promise.resolve(); }
onglet('terminal'); return Promise.resolve();
}
function afficher(res) {
var ok = res.filter(function (r) { return r[1]; }).length;
$('tests').innerHTML = res.map(function (r) { return '<li class="flex gap-2 border-2 border-black ' + (r[1] ? 'bg-white' : 'bg-[#FFD9E8]') + ' px-2 py-1"><span>' + (r[1] ? '✓' : '✗') + '</span><span>' + r[0] + '</span></li>'; }).join('');
var s = $('score'); s.hidden = false; s.textContent = ok === res.length ? 'Bravo, tout est juste ! ' + ok + ' / ' + res.length : ok + ' / ' + res.length + ' tests réussis';
var b = document.querySelector('[data-ex="' + cur.id + '"] [data-etat]'); if (b) b.textContent = ok === res.length ? '✓' : '';
}
function verifier() {
var code = ed.getValue();
if (cur.lang === 'python') return python().then(function (p) {
try { p.runPython(code); } catch (e) { return afficher([['Le code s’exécute sans erreur', false]]); }
afficher(cur.tests.map(function (t) { var ok = false; try { ok = p.runPython(t) === true; } catch (e) {} return [t, ok]; }));
});
if (cur.lang === 'sql') return sqlite().then(function () {
var attendu = JSON.stringify(base().exec(cur.solution)[0].values), obtenu = null;
try { var r = base().exec(code); obtenu = r.length ? JSON.stringify(r[r.length - 1].values) : '[]'; } catch (e) { return afficher([['Requête valide', false]]); }
afficher([['Requête valide', true], ['Bonnes lignes, dans le bon ordre', obtenu === attendu]]);
});
if (cur.lang === 'web') {
var f = $('p-apercu'); f.srcdoc = code; onglet('apercu');
return new Promise(function (ok) { f.onload = function () {
var d = f.contentDocument, b = d && d.getElementById('bouton'), m = d && d.getElementById('message');
var r = [['Le bouton #bouton existe', !!b], ['Le paragraphe #message existe', !!m]];
if (b && m) { b.click(); r.push(['Le clic affiche « Bonjour ! »', /Bonjour/.test(m.textContent)]); }
afficher(r); ok();
}; });
}
onglet('terminal');
var h = shell ? shell.home : '/home/eleve', f2 = shell && shell.files.get(h + '/tp/script.sh');
afficher([['Le dossier ~/tp existe', !!(shell && shell.dirs.has(h + '/tp'))], ['Le fichier ~/tp/script.sh existe', f2 !== undefined && f2 !== null], ['Il contient echo Bonjour', !!f2 && /echo\s+"?Bonjour/.test(f2)]]);
return Promise.resolve();
}
document.querySelectorAll('[data-ex]').forEach(function (b) { b.addEventListener('click', function () { charger(b.dataset.ex); }); });
$('b-run').addEventListener('click', function () { executer().catch(function (e) { sortie('Impossible de charger l’environnement : ' + e, true); }); });
$('b-test').addEventListener('click', function () { verifier().catch(function (e) { sortie('Impossible de charger l’environnement : ' + e, true); }); });
$('b-reset').addEventListener('click', function () { localStorage.removeItem('paillasse-ide-' + cur.id); ed.setValue(cur.code); });
ed.setOption('extraKeys', { 'Ctrl-Enter': function () { $('b-run').click(); }, 'Cmd-Enter': function () { $('b-run').click(); } });
var q = new URLSearchParams(location.search).get('ex');
charger(q && EX.some(function (e) { return e.id === q; }) ? q : EX[0].id);
});
</script>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,82 @@
@extends('layouts.vitrine')
@section('titre', 'Lab d’essai · Premiers pas dans le shell')
@push('head')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
@endpush
@section('contenu')
<section class="border-b-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-4 px-5 py-4 lg:px-10">
<a href="{{ route('labs.index') }}" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-black hover:text-white">← Labs</a>
<h1 class="flex-1 text-2xl font-black tracking-tight">Premiers pas dans le shell</h1>
<span class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold">Lab d’essai</span>
</div>
</section>
<section class="mx-auto grid max-w-7xl gap-8 px-5 py-10 lg:grid-cols-12 lg:px-10" aria-label="Espace de lab">
<article class="border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] lg:col-span-3" aria-labelledby="t-consignes">
<h2 id="t-consignes" class="text-2xl font-black">Consignes</h2>
<ol id="consignes" class="mt-5 space-y-2 font-medium">
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">1</span><span>Affiche le dossier courant avec <code class="bg-[#FFD23F] px-1 font-mono">pwd</code>.</span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">2</span><span>Liste son contenu avec <code class="bg-[#FFD23F] px-1 font-mono">ls -la</code>.</span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">3</span><span>Crée un dossier <code class="bg-[#FFD23F] px-1 font-mono">projets</code> et entre dedans.</span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">4</span><span>Crée un fichier <code class="bg-[#FFD23F] px-1 font-mono">notes.txt</code>.</span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">5</span><span>Écris ton prénom dedans avec <code class="bg-[#FFD23F] px-1 font-mono">echo</code>.</span></li>
</ol>
</article>
<div class="border-4 border-black bg-[#13233A] font-mono text-white shadow-[8px_8px_0px_#FF6FB5] lg:col-span-6">
<div class="flex items-center gap-2 border-b-4 border-black bg-[#0d192b] px-4 py-2">
<span class="h-3 w-3 bg-[#ec3013]"></span><span class="h-3 w-3 bg-[#FFD23F]"></span><span class="h-3 w-3 bg-[#7CF2C0]"></span>
<span class="ml-2 text-sm">debian-lab · console 1 · xterm.js</span>
</div>
<div id="xterm-lab" class="h-[440px] bg-[#13233A] p-3"></div>
</div>
<aside class="flex flex-col gap-6 lg:col-span-3" aria-label="Vérification">
<div class="border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000]">
<h2 class="text-xl font-black">Vérification</h2>
<p id="etape-texte" class="mt-2 font-extrabold" aria-live="polite">Tape ta première commande</p>
<div id="etape-barre" class="mt-3 grid grid-cols-5 gap-1"><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span></div>
<p class="mt-4 text-sm font-semibold">Chaque étape se valide dès que la commande est juste.</p>
</div>
<details class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<summary class="cursor-pointer text-xl font-black">Indice</summary>
<p class="mt-3 font-medium">La commande <code class="bg-[#FFD23F] px-1 font-mono">touch</code> crée un fichier vide.</p>
</details>
<button type="button" onclick="const on=this.getAttribute('aria-pressed')!=='true';this.setAttribute('aria-pressed',on);this.querySelector('span').textContent=on?'Main levée · le prof est prévenu':'Lever la main';" aria-pressed="false" class="border-4 border-black bg-[#FF6FB5] px-5 py-4 text-left text-lg font-extrabold shadow-[6px_6px_0px_#000000] transition-transform active:translate-x-1 active:translate-y-1 active:shadow-none aria-pressed:bg-[#FFD23F]"><span>Lever la main</span></button>
</aside>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
var etapes = document.querySelectorAll('#consignes > li');
var barre = document.querySelectorAll('#etape-barre > span');
var texte = document.getElementById('etape-texte');
var fait = [false, false, false, false, false], vus = { pwd: false, ls: false };
function maj(sh) {
var h = sh.home, p = h + '/projets', n = p + '/notes.txt';
fait[0] = vus.pwd;
fait[1] = fait[0] && vus.ls;
fait[2] = fait[1] && sh.dirs.has(p) && sh.cwd === p;
fait[3] = fait[2] && sh.files.has(n);
fait[4] = fait[3] && (sh.files.get(n) || '').trim().length > 0;
var k = fait.indexOf(false); if (k === -1) k = 5;
etapes.forEach(function (li, i) {
li.className = 'flex gap-3 p-2 ' + (i < k ? 'line-through decoration-2' : i === k ? 'border-2 border-black bg-[#7CF2C0]' : '');
});
barre.forEach(function (b, i) { b.className = 'h-3 border-2 border-black ' + (i < k ? 'bg-black' : 'bg-white'); });
texte.textContent = k === 5 ? 'Lab terminé : 5 / 5 ✓' : k === 0 ? 'Tape ta première commande' : 'Étape ' + k + ' / 5 validée';
}
PaillasseTerminal.mount(document.getElementById('xterm-lab'), {
user: 'eleve', host: 'debian-lab', focus: true,
welcome: '\x1b[2mDebian GNU/Linux 13 · VM prête en 3,2 s\x1b[0m\nTape \x1b[93mhelp\x1b[0m pour voir les commandes.\n',
onCommand: function (line, sh) {
line.split(/&&|;/).forEach(function (c) { c = c.trim().split(/\s+/)[0]; if (c === 'pwd') vus.pwd = true; if (c === 'ls' && vus.pwd) vus.ls = true; });
maj(sh);
}
});
});
</script>
@endsection

View file

@ -0,0 +1,85 @@
@extends('layouts.vitrine')
@section('titre', 'Labs')
@section('contenu')
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[10%] top-12 h-12 w-12 bg-[#FF6FB5] [--r:12deg]"></span><span class="flotte absolute right-[30%] bottom-10 h-9 w-9 rounded-full border-4 border-black bg-[#FFD23F] [animation-delay:1.5s]"></span></div>
<div class="relative mx-auto max-w-7xl px-5 pb-20 pt-14 lg:px-10 lg:pt-20">
<p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Catalogue</p>
<h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Des labs qui se corrigent tout seuls.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Chaque lab est une vraie VM Debian, ou plusieurs reliées en réseau. L’élève suit les consignes, la vérification valide chaque étape.</p>
</div>
</section>
<section class="mx-auto max-w-7xl px-5 py-16 lg:px-10" aria-labelledby="titre-catalogue">
<div class="flex flex-wrap items-center gap-3">
<h2 id="titre-catalogue" class="mr-4 text-2xl font-black">Filtrer</h2>
<button type="button" class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white">Tous</button>
<button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Linux</button>
<button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#7CF2C0]">Réseau</button>
<button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#C4B5FD]">Services</button>
</div>
<ul class="mt-14 grid gap-10 pb-12 sm:grid-cols-2 lg:grid-cols-3">
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] -rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Linux</span>
<span class="font-mono text-5xl font-semibold">01</span>
<div>
<p class="font-mono text-sm font-semibold">Lycée NSI</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Premiers pas dans le shell</h3>
<p class="mt-3 font-medium">Se déplacer, créer des dossiers, lire des fichiers.</p>
<a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] md:translate-y-10">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Linux</span>
<span class="font-mono text-5xl font-semibold">02</span>
<div>
<p class="font-mono text-sm font-semibold">BTS SIO · SISR et SLAM</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Utilisateurs et droits</h3>
<p class="mt-3 font-medium">Créer des comptes, régler chmod et chown, tester les accès.</p>
<a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Réseau</span>
<span class="font-mono text-5xl font-semibold">03</span>
<div>
<p class="font-mono text-sm font-semibold">BTS CIEL</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Adressage IPv4</h3>
<p class="mt-3 font-medium">Configurer deux VM pour qu’elles se voient, puis diagnostiquer.</p>
<a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#FF6FB5] p-7 shadow-[8px_8px_0px_#000000] rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Réseau</span>
<span class="font-mono text-5xl font-semibold">04</span>
<div>
<p class="font-mono text-sm font-semibold">BUT · Licence pro</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Routage statique avec Kathará</h3>
<p class="mt-3 font-medium">Trois routeurs en conteneurs, une topologie à faire communiquer.</p>
<a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] md:translate-y-10">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Services</span>
<span class="font-mono text-5xl font-semibold">05</span>
<div>
<p class="font-mono text-sm font-semibold">BTS SIO · SISR et SLAM</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Serveur web Apache</h3>
<p class="mt-3 font-medium">Installer, publier une page, lire les journaux.</p>
<a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] -rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Services</span>
<span class="font-mono text-5xl font-semibold">06</span>
<div>
<p class="font-mono text-sm font-semibold">Master · École d’ingé</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Annuaire Samba AD</h3>
<p class="mt-3 font-medium">Monter un contrôleur de domaine et joindre un client.</p>
<a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
</ul>
</section>
@endsection

View file

@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lab web · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" @if(request()->routeIs('fonctionnalites')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" @if(request()->routeIs('cockpit')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" @if(request()->routeIs('espace.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" @if(request()->routeIs('vie.scolaire')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" @if(request()->routeIs('academie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" @if(request()->routeIs('labs.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" @if(request()->routeIs('labs.web')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" @if(request()->routeIs('ide')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" @if(request()->routeIs('maison')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" @if(request()->routeIs('bibliotheque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" @if(request()->routeIs('banque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" @if(request()->routeIs('generateur')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" @if(request()->routeIs('td.imprimable')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" @if(request()->routeIs('quiz.projection')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" @if(request()->routeIs('sujet.creer')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" @if(request()->routeIs('devoirs')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" @if(request()->routeIs('correction')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" @if(request()->routeIs('fiche.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" @if(request()->routeIs('messagerie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" @if(request()->routeIs('export.ent')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" @if(request()->routeIs('etablissements')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" @if(request()->routeIs('tarifs')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" @if(request()->routeIs('pourquoi')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="border-b-4 border-black bg-[#7CF2C0]">
<div class="mx-auto flex max-w-[1500px] flex-wrap items-center gap-4 px-5 py-4 lg:px-8">
<a href="{{ route('labs.index') }}" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-black hover:text-white">← Labs</a>
<h1 class="flex-1 text-2xl font-black tracking-tight">Lab web · Mon premier serveur Apache</h1>
<span class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold">SRV-1 · BTS SIO, BUT R&amp;T, NSI</span>
</div>
</section>
<div class="mx-auto grid max-w-[1500px] gap-6 px-5 py-8 lg:grid-cols-12 lg:px-8">
<aside class="grid content-start gap-5 lg:col-span-3">
<article class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<h2 class="text-2xl font-black">Consignes</h2>
<ol id="w-etapes" class="mt-4 grid gap-2 font-medium [&_code]:break-all [&_code]:bg-[#FFD23F] [&_code]:px-1 [&_code]:font-mono [&_code]:text-sm">
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">1</span><span>Installe le serveur : <code>sudo apt install apache2</code></span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">2</span><span>Vérifie qu’il tourne : <code>systemctl status apache2</code></span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">3</span><span>Remplace la page d’accueil : <code>echo "&lt;h1&gt;Bonjour&lt;/h1&gt;" &gt; /var/www/html/index.html</code></span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">4</span><span>Ouvre <code>http://192.168.10.10</code> dans le navigateur et actualise</span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">5</span><span>Teste aussi en ligne de commande : <code>curl localhost</code></span></li>
</ol>
</article>
<div class="border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000]"><p class="text-xl font-black">Vérification</p><p id="w-texte" class="mt-1 font-extrabold" aria-live="polite">Étape 0 / 5</p><div id="w-barre" class="mt-3 grid grid-cols-5 gap-1"><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span></div></div>
</aside>
<section class="flex min-w-0 flex-col border-4 border-black bg-[#13233A] shadow-[8px_8px_0px_#FF6FB5] lg:col-span-5" aria-label="Terminal de la VM">
<div class="flex items-center gap-2 border-b-4 border-black bg-[#0d192b] px-4 py-2 text-white"><span class="h-3 w-3 bg-[#ec3013]"></span><span class="h-3 w-3 bg-[#FFD23F]"></span><span class="h-3 w-3 bg-[#7CF2C0]"></span><span class="ml-2 font-mono text-sm">web-01 · 192.168.10.10 · xterm.js</span></div>
<div id="w-term" class="h-[520px] p-3"></div>
</section>
<section class="flex min-w-0 flex-col border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:col-span-4" aria-label="Navigateur relié à la VM">
<div class="flex items-center gap-2 border-b-4 border-black bg-[#C4B5FD] px-3 py-2">
<button type="button" id="w-reload" class="grid h-9 w-9 place-items-center border-2 border-black bg-white font-black hover:bg-[#FFD23F]" aria-label="Actualiser">↻</button>
<p class="flex-1 truncate border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold">http://192.168.10.10/</p>
</div>
<iframe id="w-nav" title="Navigateur de la VM" class="h-[520px] w-full bg-white" sandbox=""></iframe>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var etat = { apache: false, actif: false, statut: false, vu: false, curl: false }, sh = null;
var DEF = '<!doctype html><html><body style="font-family:sans-serif;margin:0"><div style="background:#d7003a;color:#fff;padding:24px"><h1 style="margin:0">Apache2 Debian Default Page</h1><p style="margin:8px 0 0">It works!</p></div><p style="padding:24px">This is the default welcome page used to test the correct operation of the Apache2 server after installation on Debian systems.</p></body></html>';
var ERR = '<!doctype html><html><body style="font-family:sans-serif;padding:32px;color:#201e1d"><h1>Impossible de se connecter</h1><p>Le serveur 192.168.10.10 ne répond pas sur le port 80.</p></body></html>';
var PAGE = '/var/www/html/index.html';
function page() { return sh && sh.files.has(PAGE) ? sh.files.get(PAGE) : ''; }
function recharger() { document.getElementById('w-nav').srcdoc = etat.actif ? (page() || '<p>403 Forbidden</p>') : ERR; if (etat.actif) { etat.vu = page().indexOf('It works') === -1 && page().length > 0; } maj(); }
function maj() {
var f = [etat.apache, etat.statut, etat.apache && page().indexOf('It works') === -1 && page().length > 0, etat.vu, etat.curl], k = 0;
while (k < 5 && f[k]) k++;
document.querySelectorAll('#w-etapes > li').forEach(function (li, i) { li.className = 'flex gap-3 p-2 ' + (i < k ? 'line-through decoration-2' : i === k ? 'border-2 border-black bg-[#7CF2C0]' : ''); });
document.querySelectorAll('#w-barre > span').forEach(function (b, i) { b.className = 'h-3 border-2 border-black ' + (i < k ? 'bg-black' : 'bg-white'); });
document.getElementById('w-texte').textContent = k === 5 ? 'Lab terminé : 5 / 5 ✓' : 'Étape ' + k + ' / 5';
}
var CMD = {
apt: function (a, s) {
if (a[0] !== 'install' || a.indexOf('apache2') === -1) return a[0] === 'update' ? 'Lecture des listes de paquets… Fait' : 'Usage : apt install <paquet>';
s.dirs.add('/var/www'); s.dirs.add('/var/www/html'); s.dirs.add('/etc/apache2'); s.files.set(PAGE, DEF); etat.apache = true; etat.actif = true;
return 'Lecture des listes de paquets… Fait\nLes NOUVEAUX paquets suivants seront installés : apache2 apache2-bin apache2-data\nParamétrage de apache2 (2.4.62-1) …\nCreated symlink /etc/systemd/system/multi-user.target.wants/apache2.service.';
},
systemctl: function (a) {
if (a[1] !== 'apache2') return 'Usage : systemctl status|start|stop|restart apache2';
if (!etat.apache) return false;
if (a[0] === 'stop') { etat.actif = false; return ''; }
if (a[0] === 'start' || a[0] === 'restart') { etat.actif = true; return ''; }
etat.statut = true;
return '\x1b[1;92m●\x1b[0m apache2.service - The Apache HTTP Server\n Loaded: loaded (/lib/systemd/system/apache2.service; enabled)\n Active: ' + (etat.actif ? '\x1b[1;92mactive (running)\x1b[0m' : 'inactive (dead)');
},
curl: function (a) { if (!etat.actif) return 'curl: (7) Failed to connect to ' + (a[0] || 'localhost') + ' port 80: Connexion refusée'; etat.curl = true; return page(); }
};
PaillasseTerminal.mount(document.getElementById('w-term'), {
user: 'eleve', host: 'web-01', commands: CMD, focus: true,
welcome: '\x1b[2mDebian GNU/Linux 13 · VM web-01 prête\x1b[0m\nLe navigateur à droite est relié à cette VM.',
onCommand: function (l, s) { sh = s; recharger(); }
});
document.getElementById('w-reload').addEventListener('click', recharger);
setTimeout(recharger, 300);
});
</script>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('titre') · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
@stack('head')
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" @if(request()->routeIs('fonctionnalites')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" @if(request()->routeIs('cockpit')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" @if(request()->routeIs('espace.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" @if(request()->routeIs('vie.scolaire')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" @if(request()->routeIs('academie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" @if(request()->routeIs('labs.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" @if(request()->routeIs('labs.web')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" @if(request()->routeIs('ide')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" @if(request()->routeIs('maison')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" @if(request()->routeIs('bibliotheque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" @if(request()->routeIs('banque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" @if(request()->routeIs('generateur')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" @if(request()->routeIs('td.imprimable')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" @if(request()->routeIs('quiz.projection')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" @if(request()->routeIs('sujet.creer')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" @if(request()->routeIs('devoirs')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" @if(request()->routeIs('correction')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" @if(request()->routeIs('fiche.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" @if(request()->routeIs('messagerie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" @if(request()->routeIs('export.ent')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" @if(request()->routeIs('etablissements')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" @if(request()->routeIs('tarifs')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" @if(request()->routeIs('pourquoi')) aria-current="page" @endif class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
@yield('contenu')
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -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

View file

@ -0,0 +1,28 @@
@extends('layouts.vitrine')
@section('titre', 'Ressources à la maison')
@section('contenu')
<section class="border-b-4 border-black bg-white">
<div class="mx-auto max-w-7xl px-5 pb-12 pt-12 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Pour les élèves</p>
<h1 class="mt-6 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Envie d’aller plus loin à la maison&nbsp;?</h1>
<p class="mt-6 max-w-3xl text-xl font-medium leading-relaxed">Sur Paillasse, tu retrouves tes cours, tes QCM, l’IDE et le générateur de TD depuis chez toi, sur ton PC ou ton téléphone. Et si tu en veux encore, voici des ressources gratuites, sérieuses et en grande partie en français.</p>
<div class="mt-8 flex flex-wrap gap-4"><a href="{{ route('ide') }}" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] hover:bg-[#ec3013]">Coder dans l’IDE →</a><a href="{{ route('generateur') }}" class="inline-flex items-center border-4 border-black bg-[#FF6FB5] px-6 py-4 text-lg font-extrabold shadow-[6px_6px_0px_#000000]">S’entraîner au générateur de TD</a><a href="{{ route('cours.index') }}" class="inline-flex items-center border-4 border-black bg-white px-6 py-4 text-lg font-extrabold shadow-[6px_6px_0px_#000000] hover:bg-[#FFD23F]">Relire les cours</a></div>
</div>
</section>
<section class="mx-auto max-w-7xl px-5 py-16 lg:px-10" aria-labelledby="t-ext">
<h2 id="t-ext" class="text-4xl font-black tracking-tighter">Ressources externes gratuites</h2>
<p class="mt-3 max-w-2xl text-lg font-semibold">Elles ne font pas partie de Paillasse. Certaines demandent de créer un compte : demande l’accord de tes parents si tu es mineur.</p>
<ul id="ext" class="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-3"></ul>
</section>
<script src="{{ asset('js/referentiel.js') }}"></script>
<script>
(function () {
var C = ["bg-[#FFD23F]","bg-[#7CF2C0]","bg-[#C4B5FD]","bg-[#FF6FB5]","bg-white"];
document.getElementById('ext').innerHTML = window.REFERENTIEL.plusLoin.map(function (r, i) {
return '<li class="flex flex-col border-4 border-black ' + C[i % C.length] + ' p-6 shadow-[6px_6px_0px_#000000] ' + (i % 3 === 1 ? 'lg:translate-y-4' : '') + '"><p class="font-mono text-xs font-semibold uppercase">' + r[0] + '</p><p class="mt-2 text-2xl font-black">' + r[1] + '</p><p class="mt-2 flex-1 font-semibold">' + r[3] + '</p><a href="' + r[2] + '" target="_blank" rel="noopener" class="mt-4 self-start border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-black hover:text-white">Ouvrir ↗</a></li>';
}).join('');
})();
</script>
@endsection

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paiement confirmé · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="bg-white"><div class="mx-auto max-w-3xl px-5 py-20 lg:px-10">
<span class="grid h-20 w-20 -rotate-6 place-items-center border-4 border-black bg-[#7CF2C0] text-4xl font-black shadow-[6px_6px_0px_#000000]" aria-hidden="true">✓</span>
<h1 class="mt-8 text-6xl font-black leading-[0.9] tracking-tighter">Merci&nbsp;! C’est activé.</h1>
<p class="mt-6 text-xl font-medium">Votre offre Enseignant est active. Le reçu et la facture sont envoyés par e-mail.</p>
<dl class="mt-8 grid gap-2 border-2 border-black bg-white p-5 font-semibold sm:grid-cols-2"><div><dt class="font-mono text-xs uppercase">Offre</dt><dd class="font-black">Enseignant · mensuel</dd></div><div><dt class="font-mono text-xs uppercase">Montant</dt><dd class="font-mono">34,80 € TTC / mois</dd></div><div><dt class="font-mono text-xs uppercase">Prochain paiement</dt><dd class="font-mono">29/10/2026</dd></div><div><dt class="font-mono text-xs uppercase">Facture</dt><dd><a href="#" class="underline">F-2026-104 (PDF)</a></dd></div></dl>
<div class="mt-8 flex flex-wrap gap-4"><a href="{{ route('cockpit') }}" class="inline-flex h-12 items-center border-4 border-black bg-black px-6 font-extrabold text-white shadow-[5px_5px_0px_#ec3013]">Ouvrir mon cockpit →</a><a href="{{ route('facturation') }}" class="inline-flex h-12 items-center border-4 border-black bg-white px-6 font-extrabold hover:bg-[#FFD23F]">Gérer mon abonnement</a></div>
<p class="mt-10 border-2 border-black bg-[#FFFBEA] p-4 font-semibold">Un coup de pouce en plus&nbsp;? Parlez de Paillasse à votre établissement, ou écrivez vos remarques à <a href="mailto:adam@belkacemi.me" class="underline">adam@belkacemi.me</a>.</p>
</div></section></main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paiement · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="border-b-4 border-black bg-white"><div class="mx-auto max-w-6xl px-5 py-10 lg:px-10"><a href="{{ route('tarifs') }}" class="text-sm font-extrabold underline underline-offset-4">← Retour aux tarifs</a><h1 class="mt-4 text-5xl font-black tracking-tighter">Passer à l’offre payante</h1><p class="mt-2 max-w-2xl text-lg font-semibold">Les cours restent gratuits pour toujours. Vous payez les VM, le suivi et les outils prof.</p></div></section>
<div class="mx-auto grid max-w-6xl gap-8 px-5 py-10 lg:grid-cols-[minmax(0,1fr)_380px] lg:px-10">
<div class="grid content-start gap-8">
<section class="border-2 border-black bg-white" aria-labelledby="t-offre"><h2 id="t-offre" class="border-b-2 border-black p-4 text-lg font-black">1 · Votre offre</h2>
<div id="p-offres" class="grid gap-3 p-4 sm:grid-cols-3"><label class="flex cursor-pointer flex-col gap-1 border-2 border-black p-3 has-[:checked]:bg-[#FFD23F] has-[:checked]:shadow-[4px_4px_0px_#000000]"><span class="flex items-center gap-2"><input type="radio" name="offre" value="ens-m" checked class="h-4 w-4 accent-black"><span class="font-black">Enseignant</span></span><span class="font-mono text-lg font-semibold">29 € / mois</span><span class="text-xs font-bold">sans engagement</span></label><label class="flex cursor-pointer flex-col gap-1 border-2 border-black p-3 has-[:checked]:bg-[#FFD23F] has-[:checked]:shadow-[4px_4px_0px_#000000]"><span class="flex items-center gap-2"><input type="radio" name="offre" value="ens-a" class="h-4 w-4 accent-black"><span class="font-black">Enseignant annuel</span></span><span class="font-mono text-lg font-semibold">290 € / an</span><span class="text-xs font-bold">2 mois offerts</span></label><label class="flex cursor-pointer flex-col gap-1 border-2 border-black p-3 has-[:checked]:bg-[#FFD23F] has-[:checked]:shadow-[4px_4px_0px_#000000]"><span class="flex items-center gap-2"><input type="radio" name="offre" value="etab" class="h-4 w-4 accent-black"><span class="font-black">Établissement</span></span><span class="font-mono text-lg font-semibold">24 € / élève / an</span><span class="text-xs font-bold">dès 60 élèves</span></label></div>
<div id="p-nb" class="hidden border-t-2 border-black p-4"><label class="flex flex-wrap items-center gap-3 text-sm font-bold">Nombre d’élèves<input id="p-eleves" type="number" min="60" value="120" class="h-11 w-28 border-2 border-black px-3 font-mono font-semibold"></label></div>
</section>
<section class="border-2 border-black bg-white" aria-labelledby="t-fact"><h2 id="t-fact" class="border-b-2 border-black p-4 text-lg font-black">2 · Facturation</h2>
<div class="grid gap-4 p-4 sm:grid-cols-2"><label class="grid gap-1 text-sm font-bold ">Nom ou établissement<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="Lycée Jean-Jaurès"></label><label class="grid gap-1 text-sm font-bold ">E-mail de facturation<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="intendance@lycee.fr"></label><label class="grid gap-1 text-sm font-bold sm:col-span-2">Adresse<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="12 rue de la République"></label><label class="grid gap-1 text-sm font-bold ">SIRET (établissements)<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="000 000 000 00000"></label><label class="grid gap-1 text-sm font-bold ">N° d’engagement (Chorus Pro)<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="facultatif"></label></div>
</section>
<section class="border-2 border-black bg-white" aria-labelledby="t-pay"><h2 id="t-pay" class="border-b-2 border-black p-4 text-lg font-black">3 · Moyen de paiement</h2>
<div id="p-modes" class="grid gap-3 p-4 sm:grid-cols-3"><label class="flex cursor-pointer flex-col gap-1 border-2 border-black p-3 has-[:checked]:bg-[#7CF2C0]"><span class="flex items-center gap-2"><input type="radio" name="mode" value="cb" checked class="h-4 w-4 accent-black"><span class="font-black">Carte bancaire</span></span><span class="text-xs font-bold">via Stripe</span></label><label class="flex cursor-pointer flex-col gap-1 border-2 border-black p-3 has-[:checked]:bg-[#7CF2C0]"><span class="flex items-center gap-2"><input type="radio" name="mode" value="sepa" class="h-4 w-4 accent-black"><span class="font-black">Prélèvement SEPA</span></span><span class="text-xs font-bold">via Stripe</span></label><label class="flex cursor-pointer flex-col gap-1 border-2 border-black p-3 has-[:checked]:bg-[#7CF2C0]"><span class="flex items-center gap-2"><input type="radio" name="mode" value="mandat" class="h-4 w-4 accent-black"><span class="font-black">Bon de commande</span></span><span class="text-xs font-bold">mandat administratif · Chorus Pro</span></label></div>
<div data-m="cb" class="grid gap-4 border-t-2 border-black p-4 sm:grid-cols-4"><label class="grid gap-1 text-sm font-bold sm:col-span-2">Numéro de carte<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="4242 4242 4242 4242"></label><label class="grid gap-1 text-sm font-bold ">Expiration<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="MM / AA"></label><label class="grid gap-1 text-sm font-bold ">CVC<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="123"></label><p class="flex items-center gap-2 text-xs font-semibold sm:col-span-4"><svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>Le numéro de carte est saisi dans un champ sécurisé fourni par Stripe. Paillasse ne le voit ni ne le stocke.</p></div>
<div data-m="sepa" class="hidden grid gap-4 border-t-2 border-black p-4"><label class="grid gap-1 text-sm font-bold ">IBAN<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="FR76 0000 0000 0000 0000 0000 000"></label><p class="text-xs font-semibold">En validant, vous autorisez Paillasse à prélever le montant indiqué via Stripe. Vous pouvez demander un remboursement à votre banque sous 8 semaines.</p></div>
<div data-m="mandat" class="hidden border-t-2 border-black p-4 text-sm font-semibold"><ol class="grid gap-2"><li class="flex gap-3"><span class="grid h-6 w-6 shrink-0 place-items-center border-2 border-black bg-[#FFD23F] font-mono text-xs">1</span>Vous recevez un devis par e-mail, tout de suite.</li><li class="flex gap-3"><span class="grid h-6 w-6 shrink-0 place-items-center border-2 border-black bg-[#FFD23F] font-mono text-xs">2</span>Votre intendance émet un bon de commande.</li><li class="flex gap-3"><span class="grid h-6 w-6 shrink-0 place-items-center border-2 border-black bg-[#FFD23F] font-mono text-xs">3</span>La facture est déposée sur Chorus Pro. Paiement à 30 jours.</li></ol><p class="mt-3 border-2 border-black bg-[#FFFBEA] p-2 text-xs">Votre classe est ouverte dès la réception du bon de commande.</p></div>
</section>
</div>
<aside class="lg:sticky lg:top-6 lg:self-start">
<section class="border-4 border-black bg-white shadow-[8px_8px_0px_#000000]" aria-labelledby="t-rec"><h2 id="t-rec" class="border-b-4 border-black bg-[#FFD23F] p-4 text-lg font-black">Récapitulatif</h2>
<dl class="grid gap-2 p-4 font-semibold"><div class="flex justify-between"><dt id="r-lib">Enseignant · mensuel</dt><dd id="r-ht" class="font-mono">29,00 €</dd></div><div class="flex justify-between text-sm"><dt>TVA 20 %</dt><dd id="r-tva" class="font-mono">5,80 €</dd></div><div class="flex justify-between border-t-2 border-black pt-2 text-lg font-black"><dt>Total TTC</dt><dd id="r-ttc" class="font-mono">34,80 €</dd></div><p id="r-per" class="text-xs font-bold">par mois · résiliable à tout moment</p></dl>
<div class="border-t-2 border-black p-4"><label class="flex items-start gap-2 text-xs font-semibold"><input id="p-cgv" type="checkbox" class="mt-0.5 h-4 w-4 accent-black">J’accepte les <a href="{{ route('legal') }}#cgu" class="underline">conditions générales</a> et la <a href="{{ route('legal') }}#confidentialite" class="underline">politique de confidentialité</a>.</label>
<a id="p-go" href="{{ route('paiement.ok') }}" aria-disabled="true" class="mt-4 flex h-12 items-center justify-center gap-2 border-2 border-black bg-[#ec3013] font-extrabold text-white opacity-50 shadow-[3px_3px_0px_#000000] aria-[disabled=false]:opacity-100"><svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg><span id="p-go-t">Payer 34,80 €</span></a>
<p class="mt-3 flex flex-wrap items-center justify-center gap-2 text-[11px] font-bold"><span class="border-2 border-black px-1.5">Stripe</span><span class="border-2 border-black px-1.5">3-D Secure</span><span class="border-2 border-black px-1.5">🇫🇷 Hébergé en France</span></p></div>
</section>
<p class="mt-4 text-sm font-semibold">Juste envie d’essayer&nbsp;? <a href="{{ route('register') }}" class="font-extrabold underline">Créez une classe gratuite, sans CB.</a></p>
</aside>
</div>
<script>document.addEventListener('DOMContentLoaded',function(){function eu(v){return v.toFixed(2).replace('.',',').replace(/\B(?=(\d{3})+(?!\d))/g,' ')+' €';}
function maj(){var o=document.querySelector('[name=offre]:checked').value,m=document.querySelector('[name=mode]:checked').value,n=Math.max(60,+document.getElementById('p-eleves').value||60),ht=o==='ens-m'?29:o==='ens-a'?290:24*n;
document.getElementById('p-nb').classList.toggle('hidden',o!=='etab');
document.getElementById('r-lib').textContent=o==='ens-m'?'Enseignant · mensuel':o==='ens-a'?'Enseignant · annuel':'Établissement · '+n+' élèves';
document.getElementById('r-ht').textContent=eu(ht);document.getElementById('r-tva').textContent=eu(ht*.2);document.getElementById('r-ttc').textContent=eu(ht*1.2);
document.getElementById('r-per').textContent=o==='ens-m'?'par mois · résiliable à tout moment':'par an · licence de septembre à août';
document.querySelectorAll('[data-m]').forEach(function(d){d.classList.toggle('hidden',d.dataset.m!==m);});
document.getElementById('p-go-t').textContent=m==='mandat'?'Recevoir le devis':'Payer '+eu(ht*1.2);}
document.querySelectorAll('input').forEach(function(i){i.addEventListener('input',maj);i.addEventListener('change',maj);});
var cg=document.getElementById('p-cgv'),go=document.getElementById('p-go');cg.addEventListener('change',function(){go.setAttribute('aria-disabled',cg.checked?'false':'true');});
go.addEventListener('click',function(e){if(!cg.checked){e.preventDefault();cg.focus();}});maj();});</script>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,269 @@
@extends('layouts.vitrine')
@section('titre', 'Pourquoi ce projet ?')
@section('contenu')
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0">
<span class="etoile flotte absolute left-[44%] top-10 h-12 w-12 bg-[#FFD23F] [--r:14deg]"></span>
<span class="zigzag absolute bottom-10 left-10 h-4 w-40"></span>
<span class="flotte absolute top-[45%] right-[2%] h-9 w-9 rounded-full border-4 border-black bg-[#7CF2C0]"></span>
</div>
<div class="relative mx-auto grid max-w-7xl gap-14 px-5 pb-20 pt-14 lg:grid-cols-12 lg:px-10 lg:pt-20">
<div class="lg:col-span-7">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Le fondateur</p>
<h1 class="mt-8 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Pourquoi ce projet&nbsp;?</h1>
<p class="mt-10 max-w-xl text-2xl font-bold leading-snug">Parce qu’un BTS peut changer une vie. Il a changé la mienne.</p>
<p class="mt-8 max-w-xl text-3xl font-black">Salut&nbsp;! Moi, c’est Adam Belkacemi.</p>
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">Après un bac S, je n’ai pas trouvé de filière qui me correspondait. J’ai très tôt intégré le marché du travail, et j’ai fait plein de boulots&nbsp;!</p>
<ul class="mt-6 flex max-w-xl flex-wrap gap-3 text-sm font-extrabold" aria-label="Mon parcours, des premiers boulots au métier de data engineer">
<li class="-rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 shadow-[3px_3px_0px_#000000]">Coursier Uber Eats</li>
<li class="rotate-1 border-2 border-black bg-[#FFD23F] px-3 py-1 shadow-[3px_3px_0px_#000000]">Caissier</li>
<li class="-rotate-1 border-2 border-black bg-[#C4B5FD] px-3 py-1 shadow-[3px_3px_0px_#000000]">Employé polyvalent en grande distribution</li>
<li class="rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 shadow-[3px_3px_0px_#000000]">Manutentionnaire</li>
</ul>
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">L’informatique et le développement web, je les ai appris seul, en autodidacte. Au départ, c’était pour rendre service : mon frère avait besoin d’un site pour son cabinet d’infirmier, puis mon oncle pour son activité d’artisan. Le soir, après le boulot, j’apprenais, je testais, je cassais, je recommençais.</p>
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">J’ai pris goût à la programmation. Un nouveau monde s’est ouvert à moi&nbsp;!</p>
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">En 2019, j’intègre un BTS SN-IR, la seule formation qui voulait bien de moi… <strong class="bg-[#FFD23F] px-1">Ça a été le meilleur choix de toute ma vie&nbsp;!!!</strong></p>
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">Pour la première fois, j’avais une vraie machine sous les mains, des profs qui me poussaient et un cadre pour progresser. Deux ans plus tard, j’en sors avec de bonnes notes et une lettre de recommandation de mon prof principal. Direction l’école d’ingénieur. Ça a été la plus belle expérience de toute ma vie&nbsp;! 😊 Je le souhaite à tout le monde.</p>
<p class="mt-6 inline-block -rotate-1 border-4 border-black bg-[#7CF2C0] px-4 py-3 text-xl font-black shadow-[5px_5px_0px_#000000]">Aujourd’hui, je suis data ingénieur et entrepreneur.</p>
</div>
<div class="relative mx-auto w-full max-w-sm self-start lg:col-span-5 lg:mt-10">
<div class="absolute inset-0 translate-x-5 translate-y-5 border-4 border-black bg-[#C4B5FD]" aria-hidden="true"></div>
<figure class="relative aspect-square overflow-hidden border-4 border-black bg-white">
<img src="{{ asset('images/adam-belkacemi.jpeg') }}" alt="Portrait d’Adam Belkacemi" class="h-full w-full object-cover">
</figure>
<span class="absolute -left-6 top-8 -rotate-6 border-2 border-black bg-[#FFD23F] px-3 py-1 font-extrabold shadow-[4px_4px_0px_#000000]">Data ingénieur · entrepreneur</span>
<span class="absolute -right-4 top-[300px] z-20 rotate-3 border-2 border-black bg-[#7CF2C0] px-3 py-1 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">Ancien BTS SN-IR · 2019-2021</span>
<div class="relative z-10 translate-x-5 px-3 pb-8 pt-10" aria-label="Mes premiers boulots">
<svg class="pointer-events-none absolute inset-0 h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><polyline points="30,5 70,25 30,46 70,67 30,88 50,100" fill="none" stroke="#000" stroke-width="0.8" stroke-dasharray="3 2.5" vector-effect="non-scaling-stroke" style="stroke-width:3px"/></svg>
<ul class="relative grid gap-6">
<li class="ml-0 w-[62%] -rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Coursier à vélo"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#EEEAFF"/><g fill="#D9D2FF"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><g stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round" fill="none"><circle cx="66" cy="72" r="16" fill="#fff"/><circle cx="134" cy="72" r="16" fill="#fff"/><path d="M66 72 L90 48 L124 48 L134 72 M90 48 L102 72 L124 48 M124 48 L119 37 L129 35 M90 48 L86 41 L96 41"/></g><g stroke="#13233A" stroke-width="1.4" opacity=".6"><path d="M66 58 V86 M52 72 H80 M134 58 V86 M120 72 H148"/></g><circle cx="66" cy="72" r="3" fill="#13233A"/><circle cx="134" cy="72" r="3" fill="#13233A"/><circle cx="102" cy="72" r="4" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M100 44 L108 60 L102 72" stroke="#3d6bf5" stroke-width="7" stroke-linecap="round" fill="none"/><path d="M104 44 L116 58 L112 68" stroke="#2c55d6" stroke-width="7" stroke-linecap="round" fill="none"/><path d="M100 72 h8 M110 68 h8" stroke="#13233A" stroke-width="3.5" stroke-linecap="round"/><g transform="rotate(-10 86 30)"><rect x="70" y="16" width="30" height="26" rx="3" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="70" y="16" width="30" height="7" fill="#F5B800" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M80 30 h10" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/></g><path d="M96 32 C104 24 118 26 122 36 L114 48 L98 46 Z" fill="#ec3013" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M106 30 L112 46" stroke="#b92410" stroke-width="2"/><path d="M114 36 L126 40" stroke="#F2C9A0" stroke-width="5" stroke-linecap="round"/><path d="M114 36 L126 40" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round" fill="none" opacity="0"/><circle cx="122" cy="22" r="7.5" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M113 21 C113 11 131 11 131 21 Z" fill="#7CF2C0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M121 13 v6" stroke="#13233A" stroke-width="1.6"/><g stroke="#13233A" stroke-width="2" stroke-linecap="round" opacity=".45"><path d="M36 60 h14 M30 68 h18 M38 76 h10"/></g></svg></div></li>
<li class="ml-auto w-[62%] rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Caissier"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#E3FAF1"/><g fill="#C4F0DF"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><path d="M34 58 H166 V90 H34 Z" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M34 58 H166 V66 H34 Z" fill="#C4B5FD" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M44 74 H120" stroke="#13233A" stroke-width="2" stroke-dasharray="5 4" opacity=".5"/><circle cx="84" cy="24" r="9" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M74 22 C74 11 94 11 94 22 C90 18 80 18 74 22 Z" fill="#6b3f1f" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M66 58 C66 38 102 38 102 58 Z" fill="#7CF2C0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M78 40 V58 M90 40 V58" stroke="#13233A" stroke-width="2"/><rect x="80" y="46" width="8" height="6" fill="#fff" stroke="#13233A" stroke-width="1.8"/><path d="M100 52 L112 46" stroke="#F2C9A0" stroke-width="5" stroke-linecap="round"/><rect x="114" y="32" width="34" height="26" rx="2" fill="#13233A" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="118" y="36" width="26" height="10" fill="#7CF2C0"/><path d="M121 41 h8 M132 41 h9" stroke="#13233A" stroke-width="1.6"/><g fill="#fff"><rect x="119" y="49" width="5" height="4"/><rect x="126" y="49" width="5" height="4"/><rect x="133" y="49" width="5" height="4"/><rect x="140" y="49" width="4" height="4"/></g><rect x="124" y="24" width="14" height="8" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="42" y="46" width="14" height="12" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><circle cx="52" cy="42" r="4" fill="#ec3013" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="152" y="44" width="8" height="14" rx="2" fill="#FF6FB5" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><circle cx="160" cy="80" r="0"/></svg></div></li>
<li class="ml-0 w-[62%] -rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Employé en usine avec EPI"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#FFF3C4"/><g fill="#FBE38A"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><rect x="118" y="30" width="60" height="60" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="118" y="30" width="60" height="10" fill="#C4B5FD" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><g transform="translate(148 62)"><circle r="15" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><circle r="5" fill="#13233A"/><path d="M0 -21 v6 M0 15 v6 M-21 0 h6 M15 0 h6 M-15 -15 l4 4 M11 11 l4 4 M15 -15 l-4 4 M-11 11 l-4 4" stroke="#13233A" stroke-width="3.2" stroke-linecap="round"/></g><circle cx="126" cy="35" r="2.5" fill="#ec3013"/><circle cx="133" cy="35" r="2.5" fill="#7CF2C0"/><path d="M56 90 L60 52 C64 40 90 40 94 52 L98 90 Z" fill="#E6FF3F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M66 44 V90 M88 44 V90" stroke="#ec3013" stroke-width="3.2"/><path d="M60 66 H96" stroke="#c9c9c9" stroke-width="3"/><circle cx="77" cy="28" r="9.5" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M64 27 C64 11 90 11 90 27 Z" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M60 27 H94" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round" fill="none"/><path d="M77 14 v8" stroke="#13233A" stroke-width="1.6"/><rect x="70" y="27" width="14" height="5" rx="2.5" fill="#7CE3F2" stroke="#13233A" stroke-width="2"/><path d="M94 56 L114 58" stroke="#3d6bf5" stroke-width="7" stroke-linecap="round"/><circle cx="116" cy="58" r="4.5" fill="#FF6FB5" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/></svg></div></li>
<li class="ml-auto w-[62%] rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Manutentionnaire"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#FFE3F0"/><g fill="#FFC7DE"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><rect x="112" y="82" width="66" height="8" fill="#C98404" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M122 82 v8 M144 82 v8 M166 82 v8" stroke="#13233A" stroke-width="2"/><g stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"><rect x="114" y="56" width="30" height="26" fill="#FFD23F"/><rect x="146" y="56" width="30" height="26" fill="#F5B800"/><rect x="128" y="30" width="32" height="26" fill="#FFD23F"/></g><g stroke="#13233A" stroke-width="2"><path d="M129 56 v8 M161 56 v8 M144 30 v8"/></g><path d="M120 72 h8 M152 72 h8" stroke="#ec3013" stroke-width="2.4"/><circle cx="66" cy="22" r="8.5" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M57 20 C57 10 75 10 75 20 Z" fill="#ec3013" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M73 17 h8" stroke="#13233A" stroke-width="2.6" stroke-linecap="round"/><rect x="70" y="32" width="32" height="26" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M86 32 v8" stroke="#13233A" stroke-width="2"/><path d="M52 62 C50 38 78 32 80 48 L78 62 Z" fill="#7CF2C0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M60 62 L56 88 M72 62 L78 88" stroke="#3d6bf5" stroke-width="8" stroke-linecap="round"/><path d="M56 89 h-8 M78 89 h8" stroke="#13233A" stroke-width="4.5" stroke-linecap="round"/></svg></div></li>
<li class="ml-0 w-[62%] -rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Développeur et data engineer"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#E6F7FF"/><g fill="#C9E8F7"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><rect x="40" y="70" width="130" height="6" fill="#C98404" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M50 76 V90 M160 76 V90" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="94" y="30" width="58" height="36" rx="2" fill="#13233A" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M118 66 h10 v4 h-10 Z" fill="#13233A"/><g stroke-width="2.4" stroke-linecap="round"><path d="M100 38 h14" stroke="#FF6FB5"/><path d="M104 44 h22" stroke="#7CF2C0"/><path d="M104 50 h16" stroke="#FFD23F"/><path d="M100 56 h10" stroke="#C4B5FD"/></g><g><rect x="132" y="44" width="4" height="14" fill="#7CF2C0"/><rect x="138" y="38" width="4" height="20" fill="#FFD23F"/><rect x="144" y="48" width="4" height="10" fill="#FF6FB5"/></g><circle cx="66" cy="34" r="9" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M56 32 C56 21 76 21 76 32 C70 28 62 28 56 32 Z" fill="#13233A" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M57 36 C56 42 76 42 75 36" stroke="#6b3f1f" stroke-width="3" fill="none"/><path d="M48 70 C46 48 84 44 86 60 L86 70 Z" fill="#FF6FB5" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M80 58 L96 62" stroke="#F2C9A0" stroke-width="5" stroke-linecap="round"/><rect x="52" y="54" width="0" height="0"/><rect x="156" y="56" width="10" height="14" rx="2" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M166 60 c4 0 4 6 0 6" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round" fill="none"/><path d="M44 70 C38 60 42 52 48 58" fill="#7CF2C0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="40" y="62" width="10" height="8" fill="#ec3013" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><g font-family="IBM Plex Mono" font-size="7" font-weight="700" fill="#13233A" opacity=".55"><text x="102" y="24">{ data }</text><text x="150" y="26">SQL</text></g></svg></div></li>
</ul>
</div>
</div>
</div>
</section>
<section class="border-b-4 border-black bg-white" aria-labelledby="t-chemin">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<h2 id="t-chemin" class="max-w-3xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Ce que j’ai appris en chemin.</h2>
<div class="mt-14 grid gap-10 lg:grid-cols-12">
<article class="relative border-4 border-black bg-[#FFD23F] p-8 shadow-[8px_8px_0px_#000000] lg:col-span-7">
<span class="absolute -right-4 -top-4 rotate-3 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Télécom Saint-Étienne · alternance</span>
<figure class="mb-6 overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]">
<img src="{{ asset('images/telecom-saint-etienne.jpeg') }}" alt="Façade de Télécom Saint-Étienne" class="aspect-[16/7] w-full object-cover">
</figure>
<h3 class="text-3xl font-black leading-tight">Montée en charge : d’alternant à chef de projet digital</h3>
<p class="mt-4 text-lg font-medium leading-relaxed">Juste après mon BTS, je tente le concours Mines-Télécom réservé aux alternants. Mes bonnes notes de BTS et la lettre de recommandation de mon prof principal font la différence : j’entre à Télécom Saint-Étienne, en école d’ingénieur.</p>
<a href="https://alternance.imt.fr/" target="_blank" rel="noopener" class="mt-5 flex items-center gap-4 border-4 border-black bg-white p-3 shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-y-0.5">
<span class="grid h-14 w-20 shrink-0 place-items-center border-2 border-black bg-[#13233A] font-black text-white">IMT</span>
<span class="flex-1"><span class="block font-black">Concours Mines-Télécom, voie alternance</span><span class="block font-mono text-sm font-semibold">alternance.imt.fr ↗</span></span>
</a>
<p class="mt-4 text-lg font-medium leading-relaxed">Il me reste une étape, et pas des moindres : il me faut une entreprise ! Je la trouve chez un industriel américain, à Grenoble et Échirolles, comme chef de projet digital.</p>
<p class="mt-4 text-lg font-medium leading-relaxed">Pendant 3 ans, je pilote des projets à plusieurs centaines de milliers d’euros. Je découvre les outils de data engineering et d’IA, le suivi de production industrielle automatisé (SCADA, MES, IHM), la gestion de la qualité et la maintenance. Je permets aux équipes de terrain de suivre leur production en temps réel et de réagir plus vite quand une machine s’arrête.</p>
<p class="mt-4 text-lg font-bold">Autant vous dire que les machines qui tombent en panne au pire moment, je connais.</p>
</article>
<article class="relative border-4 border-black bg-[#C4B5FD] p-8 shadow-[8px_8px_0px_#000000] lg:col-span-5 lg:mt-16 lg:-rotate-1">
<span class="absolute -left-4 -top-4 -rotate-3 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Partir de zéro</span>
<h3 class="text-3xl font-black leading-tight">Des IA construites de A à Z</h3>
<p class="mt-4 text-lg font-medium leading-relaxed">À l’école, j’ai aussi créé des IA en partant de zéro, en Python. L’une reconnaît la voix et la transforme en texte. Une autre lit les caractères et reconnaît les formes (OCR).</p>
<ul class="mt-5 flex flex-wrap gap-2 font-mono text-sm font-semibold"><li class="border-2 border-black bg-white px-2 py-0.5">Python</li><li class="border-2 border-black bg-white px-2 py-0.5">NumPy</li><li class="border-2 border-black bg-white px-2 py-0.5">Pandas</li><li class="border-2 border-black bg-white px-2 py-0.5">scikit-learn</li><li class="border-2 border-black bg-white px-2 py-0.5">TensorFlow</li><li class="border-2 border-black bg-white px-2 py-0.5">PyTorch</li><li class="border-2 border-black bg-white px-2 py-0.5">OpenCV</li><li class="border-2 border-black bg-white px-2 py-0.5">Jupyter</li></ul>
<p class="mt-4 text-lg font-bold">C’est là que j’ai compris qu’on apprend vraiment en faisant.</p>
<div class="mt-6 border-t-4 border-black pt-5">
<p class="text-lg font-medium leading-relaxed">À l’école d’ingé, j’ai aussi touché à tout ce qu’on y voit : les différents types de bases de données, SQL ou NoSQL, les principaux langages, les réseaux, l’électronique, la gestion de projet lean et agile, et même la compta.</p>
<div class="mt-4 grid gap-3">
<div><p class="font-mono text-xs font-semibold uppercase">Bases de données</p><ul class="mt-1.5 flex flex-wrap gap-1.5 font-mono text-sm font-semibold"><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">SQL</li><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">MongoDB</li><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">Cassandra</li><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">Redis</li><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">Neo4j</li></ul></div>
<div><p class="font-mono text-xs font-semibold uppercase">Langages</p><ul class="mt-1.5 flex flex-wrap gap-1.5 font-mono text-sm font-semibold"><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">Java</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">SQL</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">Python</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">JavaScript</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">TypeScript</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">PHP</li></ul></div>
<div><p class="font-mono text-xs font-semibold uppercase">Et aussi</p><ul class="mt-1.5 flex flex-wrap gap-1.5 font-mono text-sm font-semibold"><li class="border-2 border-black bg-white px-2 py-0.5">Réseaux</li><li class="border-2 border-black bg-white px-2 py-0.5">Électronique</li><li class="border-2 border-black bg-white px-2 py-0.5">Lean</li><li class="border-2 border-black bg-white px-2 py-0.5">Agile</li><li class="border-2 border-black bg-white px-2 py-0.5">Gestion de projet</li><li class="border-2 border-black bg-white px-2 py-0.5">Comptabilité</li></ul></div>
</div>
</div>
<ul class="mt-6 grid grid-cols-5 gap-3" aria-hidden="true">
<li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-2"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="12" y="14" width="40" height="26" fill="#13233A"/><path d="M18 22 l6 4 -6 4 M28 32 h10" stroke="#7CF2C0"/><path d="M4 48 h56 l-4 -8 H8 Z" fill="#fff"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-3"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16 L32 32 L12 48 M52 16 L32 32 L52 48 M12 16 L52 16 M12 48 L52 48" stroke-width="2.5"/><circle cx="12" cy="16" r="5" fill="#FF6FB5"/><circle cx="12" cy="48" r="5" fill="#FF6FB5"/><circle cx="32" cy="32" r="6" fill="#FFD23F"/><circle cx="52" cy="16" r="5" fill="#7CF2C0"/><circle cx="52" cy="48" r="5" fill="#7CF2C0"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-3"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="32" cy="14" rx="18" ry="6" fill="#FFD23F"/><path d="M14 14 v36 c0 8 36 8 36 0 v-36"/><path d="M14 26 c0 8 36 8 36 0 M14 38 c0 8 36 8 36 0"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-2"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="14" y="6" width="36" height="16" fill="#fff"/><rect x="14" y="24" width="36" height="16" fill="#fff"/><rect x="14" y="42" width="36" height="16" fill="#fff"/><circle cx="22" cy="14" r="2" fill="#7CF2C0"/><circle cx="22" cy="32" r="2" fill="#ec3013"/><circle cx="22" cy="50" r="2" fill="#7CF2C0"/><path d="M30 14 h14 M30 32 h14 M30 50 h14"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000] -rotate-6"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M32 32 m0 0 c0 -3 4 -3 4 0 c0 6 -10 6 -10 0 c0 -10 16 -10 16 0 c0 14 -22 14 -22 0 c0 -18 28 -18 28 0 c0 22 -34 22 -34 0"/></svg></li>
</ul>
</article>
<article class="relative border-4 border-black bg-[#7CF2C0] p-8 shadow-[8px_8px_0px_#000000] lg:col-span-6">
<span class="absolute -bottom-4 right-6 rotate-2 border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold shadow-[3px_3px_0px_#000000]">3 mois · en anglais</span>
<h3 class="text-3xl font-black leading-tight">Direction Den Bosch, aux Pays-Bas</h3>
<p class="mt-4 text-lg font-medium leading-relaxed">Trois mois à ’s-Hertogenbosch, que tout le monde là-bas appelle Den Bosch, comme développeur full stack, à construire une solution RH, le tout en anglais. Les premiers jours, on s’accroche. Et puis on se lance. J’en suis revenu avec un bien meilleur anglais et une expérience que je n’oublierai pas.</p>
<ul class="mt-6 grid grid-cols-6 gap-2" aria-label="Souvenirs des Pays-Bas">
<li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-3" title="Moulin"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Moulin"><path d="M24 58 L28 26 H36 L40 58 Z" fill="#fff" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><rect x="29" y="46" width="6" height="12" fill="#C98404" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><g transform="translate(32 24)"><g stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"><path d="M0 0 L-4 -22 L4 -22 Z" fill="#ec3013"/><path d="M0 0 L22 -4 L22 4 Z" fill="#ec3013"/><path d="M0 0 L4 22 L-4 22 Z" fill="#ec3013"/><path d="M0 0 L-22 4 L-22 -4 Z" fill="#ec3013"/></g><circle r="3" fill="#13233A"/></g></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-2" title="Vélo"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Vélo"><g fill="none" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"><circle cx="16" cy="42" r="10" fill="#fff"/><circle cx="48" cy="42" r="10" fill="#fff"/><path d="M16 42 L28 26 L44 26 L48 42 M28 26 L32 42 L44 26 M44 26 L42 20 L48 19 M28 26 L26 21 L32 21"/></g><rect x="36" y="28" width="12" height="6" fill="#FF6FB5" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-2" title="Tulipe"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Tulipe"><path d="M32 30 V58" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" fill="none"/><path d="M32 46 C22 44 18 36 20 32 C26 34 30 38 32 46 Z M32 50 C42 48 46 40 44 36 C38 38 34 42 32 50 Z" fill="#7CF2C0" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><path d="M20 12 L26 20 L32 10 L38 20 L44 12 C46 24 42 32 32 32 C22 32 18 24 20 12 Z" fill="#ec3013" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-3" title="Sabot en bois"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Sabot en bois"><path d="M6 44 C6 34 18 30 30 30 L44 26 C54 24 60 32 58 40 C56 48 48 50 40 50 H14 C8 50 6 48 6 44 Z" fill="#FFD23F" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><path d="M40 30 C44 34 48 34 52 32" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" fill="none"/><path d="M16 38 h10" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-2" title="Fromage"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Fromage"><path d="M6 44 L36 18 L58 34 V50 H6 Z" fill="#FFD23F" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><path d="M6 44 H58" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><g fill="#F5B800" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"><circle cx="20" cy="47" r="0"/></g><circle cx="44" cy="40" r="4" fill="#F5B800" stroke="#13233A" stroke-width="2"/><circle cx="30" cy="36" r="3" fill="#F5B800" stroke="#13233A" stroke-width="2"/><circle cx="22" cy="47" r="2.5" fill="#F5B800" stroke="#13233A" stroke-width="2"/><circle cx="50" cy="46" r="2" fill="#F5B800" stroke="#13233A" stroke-width="2"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-2" title="Drapeau des Pays-Bas"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Drapeau des Pays-Bas"><path d="M10 8 V58" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" fill="none"/><g stroke="#13233A" stroke-width="3" stroke-linejoin="round"><rect x="12" y="10" width="42" height="10" fill="#AE1C28"/><rect x="12" y="20" width="42" height="10" fill="#fff"/><rect x="12" y="30" width="42" height="10" fill="#21468B"/></g></svg></li>
</ul>
</article>
<figure class="relative lg:col-span-6 lg:mt-10" aria-label="Den Bosch">
<div class="absolute inset-0 translate-x-4 translate-y-4 border-4 border-black bg-[#FF6FB5]" aria-hidden="true"></div>
<div class="relative aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/den-bosch.jpg') }}" alt="Canal et maisons de Den Bosch" class="h-full w-full object-cover"></div>
<figcaption class="absolute -top-4 left-6 -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Den Bosch, mon QG pendant 3 mois</figcaption>
</figure>
</div>
</div>
</section>
<section class="mx-auto max-w-7xl px-5 py-20 lg:px-10" aria-labelledby="t-envie">
<div class="grid gap-10 lg:grid-cols-12">
<h2 id="t-envie" class="text-5xl font-black leading-[0.95] tracking-tighter lg:col-span-5">Tout le monde mérite sa place et la réussite.</h2>
<div class="grid gap-6 text-xl font-medium leading-relaxed lg:col-span-7">
<p>Chaque élève mérite une vraie machine pour apprendre, pas une salle informatique qui plante. Chaque prof mérite de passer son temps à enseigner, pas à réparer des postes.</p>
<p>J’ai donc construit Paillasse : un outil clé en main, prêt en 5 secondes, pensé par quelqu’un qui a été assis au fond de la salle de TP.</p>
</div>
</div>
<ul class="mt-16 grid gap-10 pb-6 md:grid-cols-3">
<li class="relative border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] md:-rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Élèves</span>
<p class="text-2xl font-black leading-tight">Une vraie VM Debian à soi, des TP qui se corrigent tout seuls, et le droit de se tromper sans rien casser.</p>
</li>
<li class="relative border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] md:translate-y-8">
<span class="absolute -left-4 -top-4 -rotate-3 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Profs</span>
<p class="mb-4 inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-lg font-black">« Pas de cours à préparer, enfin… très peu :) »</p>
<p class="text-2xl font-black leading-tight">Moins de dépannage, plus de pédagogie. Vous voyez qui bloque et vous aidez ceux qui en ont le plus besoin.</p>
</li>
<li class="relative border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] md:rotate-1">
<span class="absolute -bottom-4 right-6 rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">CPE</span>
<p class="text-2xl font-black leading-tight">Tous les apprenants sur un seul écran : qui est connecté, qui avance, qui décroche.</p>
</li>
</ul>
<div class="relative mt-20 grid items-center gap-10 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FF6FB5] sm:p-12 md:grid-cols-[auto_1fr]">
<div class="grid h-40 w-40 -rotate-6 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black shadow-[6px_6px_0px_#FFFFFF]" role="img" aria-label="Moins 40 décibels">
<span class="flex flex-col items-center gap-1 text-center"><span class="font-mono text-5xl font-semibold leading-none">−40</span><span class="text-2xl font-black leading-none">dB</span></span>
</div>
<div>
<p class="text-4xl font-black leading-tight tracking-tight sm:text-5xl">Vous devenez le roi du silence grâce à la fonction <span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
<p class="mt-6 text-2xl font-bold">Vos élèves n’auront plus que le droit de tousser ou de respirer&nbsp;!</p>
</div>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-couleurs">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Un choix, pas un hasard</p>
<h2 id="t-couleurs" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Pourquoi Paillasse est aussi coloré&nbsp;?</h2>
<div class="mt-8 grid gap-6 text-xl font-medium leading-relaxed lg:grid-cols-2">
<p>On a fait exprès de choisir des couleurs vives : jaune, vert menthe, rose, lavande, sur un fond blanc et des bordures noires épaisses. Le but est simple : que le regard de l’élève tombe tout de suite sur ce qui compte, la consigne, le terminal, la question, le bouton à cliquer.</p>
<p>Ce n’est pas une intuition de designer. La recherche en psychologie cognitive montre depuis longtemps que la couleur et le contraste guident l’attention, et que ce qui attire l’attention est mieux retenu. Mais elle montre aussi l’inverse : trop de stimulations visuelles dispersent. Paillasse est construit sur ces deux résultats à la fois.</p>
</div>
<div class="mt-16 grid gap-10 md:grid-cols-2">
<article class="relative flex flex-col border-4 border-black bg-[#FFD23F] p-6 shadow-[8px_8px_0px_#000000] md:-rotate-1">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Revue scientifique · 2013</span>
<h3 class="mt-2 text-2xl font-black leading-tight">La couleur capte l’attention, et l’attention fait la mémoire</h3>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Cette revue de la littérature explique que la couleur est un facteur clé pour capter l’attention, et que plus une information reçoit d’attention, plus elle a de chances d’être mémorisée. Les couleurs chaudes, comme le rouge et le jaune, attirent davantage le regard.</p>
<a href="https://pubmed.ncbi.nlm.nih.gov/23983571/" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">Dzulkifli &amp; Mustafar, The Malaysian Journal of Medical Sciences, 2013 ↗</a>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#7CF2C0] p-6 shadow-[8px_8px_0px_#000000] md:translate-y-8">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Psychologie de la mémoire · depuis 1933</span>
<h3 class="mt-2 text-2xl font-black leading-tight">Ce qui se distingue est mieux retenu</h3>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">C’est l’« effet von Restorff » : dans une série d’éléments semblables, celui qui se démarque par sa couleur, sa taille ou sa forme est mieux mémorisé. L’effet a été reproduit de nombreuses fois, on le retrouve chez l’enfant comme chez l’adulte âgé. C’est pour ça qu’une notion clé, chez nous, est toujours surlignée en couleur.</p>
<a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3607156/" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">Étude électrophysiologique de l’effet von Restorff (PMC) ↗</a>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#C4B5FD] p-6 shadow-[8px_8px_0px_#000000] ">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Recherche privée · Nielsen Norman Group</span>
<h3 class="mt-2 text-2xl font-black leading-tight">Peu de couleurs, bien placées</h3>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Le cabinet de référence en ergonomie web recommande de limiter le nombre de couleurs : cela renforce la hiérarchie visuelle et laisse moins de choses qui distraient. La couleur doit attirer l’œil vers ce que l’on veut mettre en avant, et toujours avec le même sens d’un écran à l’autre.</p>
<a href="https://www.nngroup.com/articles/color-enhance-design/" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">NN/g, « Using Color to Enhance Your Design », 2024 ↗</a>
</article>
</div>
<div class="mt-24">
<h3 class="max-w-4xl text-4xl font-black leading-tight tracking-tighter sm:text-5xl">La couleur qui capte : des exemples partout autour de nous</h3>
<p class="mt-4 max-w-3xl text-xl font-medium leading-relaxed">Ceux qui ont besoin qu’on les regarde, ou qu’on ne rate rien, ont tous fait le même choix : une couleur vive, utilisée avec une règle précise.</p>
<div class="mt-12 grid gap-10 md:grid-cols-2 lg:grid-cols-3">
<article class="relative flex flex-col border-4 border-black bg-[#FFD90F] p-6 shadow-[8px_8px_0px_#000000] md:-rotate-1">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Télévision · 1987</span>
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/couleurs/simpson.jpg') }}" alt="La famille Simpson sur son canapé" class="h-full w-full object-cover"></figure>
<h4 class="mt-2 text-2xl font-black leading-tight">Les Simpson sont jaunes pour une raison</h4>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Matt Groening a choisi ce jaune proposé par la coloriste Gyorgyi Peluce pour une raison simple : dans les années 80, les gens zappaient. Il l’a expliqué à la BBC en 2007 : quand un éclair jaune passe pendant que tu changes de chaîne, tu sais que tu regardes les Simpson. Presque 40 ans plus tard, tout le monde reconnaît encore cette famille au premier coup d’œil.</p>
<a href="https://www.joe.co.uk/entertainment/matt-groening-explains-why-the-simpsons-are-yellow-366502" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">Groening à la BBC, cité par Joe.co.uk ↗</a>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#ec3013] text-white p-6 shadow-[8px_8px_0px_#000000] md:translate-y-8">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Marques</span>
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/couleurs/marques.jpg') }}" alt="Logos de chaînes de restauration rapide" class="h-full w-full object-contain p-3"></figure>
<h4 class="mt-2 text-2xl font-black leading-tight">Une couleur, et on sait qui c’est</h4>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Le jaune et le rouge d’une chaîne de fast-food, le rouge d’une marque de soda, le bleu d’un réseau social : les grandes marques choisissent une ou deux couleurs vives et ne les quittent plus. Le but : être reconnues en une fraction de seconde, de loin, sur un écran ou au bord d’une route. Chez Paillasse, c’est pareil : le jaune veut toujours dire « regarde ici ».</p>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#FFD23F] p-6 shadow-[8px_8px_0px_#000000] md:rotate-1">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Aviation · règle FAA</span>
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/couleurs/cockpit.jpg') }}" alt="Cockpit d’avion et ses écrans" class="h-full w-full object-cover"></figure>
<h4 class="mt-2 text-2xl font-black leading-tight">Dans le cockpit, le rouge est réservé</h4>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">La réglementation américaine de l’aviation (14 CFR 25.1322) impose le rouge pour les alertes qui demandent une action immédiate, et l’ambre ou le jaune pour les mises en garde. Elle limite leur usage ailleurs, car trop de rouge et de jaune usent leur pouvoir d’alerte : les pilotes finissent par ne plus y réagir. Notre règle « une couleur = une information » vient de là.</p>
<a href="https://www.ecfr.gov/current/title-14/chapter-I/subchapter-C/part-25/subpart-F/subject-group-ECFR3043e8882f16d6e/section-25.1322" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">14 CFR 25.1322 · eCFR ↗</a>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#7CF2C0] p-6 shadow-[8px_8px_0px_#000000] md:translate-y-8">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Médical</span>
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/couleurs/moniteur.webp') }}" alt="Moniteur médical de surveillance" class="h-full w-full object-contain p-3"></figure>
<h4 class="mt-2 text-2xl font-black leading-tight">Le moniteur qui clignote au bon moment</h4>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Dans un service de soins, les moniteurs suivent aussi un code de couleurs normé (norme IEC 60601-1-8) : rouge pour une alarme de haute priorité, jaune pour une priorité moyenne. Une infirmière qui entre dans une chambre voit en un regard ce qui presse. Sur le tableau de bord du prof, c’est pareil : l’élève bloqué passe en rouge, la main levée en rose.</p>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#E6FF3F] p-6 shadow-[8px_8px_0px_#000000] md:-rotate-1">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Sécurité</span>
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/couleurs/gilet.jpg') }}" alt="Gilet jaune et triangle de signalisation" class="h-full w-full object-cover"></figure>
<h4 class="mt-2 text-2xl font-black leading-tight">Le gilet jaune fluo</h4>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Les vêtements de haute visibilité (norme EN ISO 20471) sont jaune fluo, orange ou rouge fluo pour une raison : ces couleurs se détachent de presque tous les décors, de jour comme au crépuscule. On ne met pas du fluo partout sur un chantier : seulement sur ce qui doit absolument être vu.</p>
</article>
<article class="relative flex flex-col border-4 border-black bg-[#C4B5FD] p-6 shadow-[8px_8px_0px_#000000] md:translate-y-8">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Ce qu’on en retient</span>
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/couleurs/paillasse.jpg') }}" alt="L’IDE en ligne de Paillasse" class="h-full w-full object-cover object-left-top"></figure>
<h4 class="mt-2 text-2xl font-black leading-tight">Vif, mais rare et toujours au même sens</h4>
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Tous ces exemples disent la même chose que la recherche : une couleur vive capte l’attention, à condition d’être réservée à l’essentiel et de garder toujours le même sens. C’est exactement la règle de Paillasse : fond blanc, et du jaune, du vert, du rose seulement là où l’élève doit regarder.</p>
</article>
</div>
</div>
<div class="mt-24 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FFD23F]">
<h3 class="text-3xl font-black">Nos trois règles de couleur</h3>
<ol class="mt-6 grid gap-6 md:grid-cols-3">
<li class="border-4 border-white p-5"><p class="font-mono text-3xl font-semibold text-[#FFD23F]">1</p><p class="mt-2 text-xl font-black">Fond blanc, toujours</p><p class="mt-2 font-semibold">Rien autour ne vient voler l’attention. L’écran reste calme.</p></li>
<li class="border-4 border-white p-5"><p class="font-mono text-3xl font-semibold text-[#7CF2C0]">2</p><p class="mt-2 text-xl font-black">Une couleur = une information</p><p class="mt-2 font-semibold">Vert : réussi. Rose : main levée. Rouge : bloqué ou examen. Jaune : à lire maintenant.</p></li>
<li class="border-4 border-white p-5"><p class="font-mono text-3xl font-semibold text-[#FF6FB5]">3</p><p class="mt-2 text-xl font-black">Lisible par tous</p><p class="mt-2 font-semibold">Texte noir sur couleur vive, contraste élevé, et jamais une information portée par la couleur seule.</p></li>
</ol>
<p class="mt-8 max-w-3xl text-lg font-semibold">Soyons honnêtes : aucune couleur n’empêche à elle seule un élève de regarder son téléphone. Mais un écran clair, où l’essentiel saute aux yeux, lui donne moins de raisons de décrocher. Le reste, c’est le travail du prof, et Paillasse est là pour lui libérer du temps.</p>
</div>
</div>
</section>
<section class="relative overflow-hidden border-t-4 border-black bg-[#ec3013]" aria-labelledby="t-vivant">
<span aria-hidden="true" class="etoile flotte pointer-events-none absolute right-[12%] top-10 h-14 w-14 bg-[#FFD23F] [--r:-8deg]"></span>
<div class="relative mx-auto flex max-w-7xl flex-col items-start gap-8 px-5 py-20 lg:px-10">
<h2 id="t-vivant" class="max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter text-white sm:text-6xl">Paillasse grandit avec vous.</h2>
<p class="max-w-2xl text-2xl font-bold text-white">Un bug, une idée, un TP qui manque ? Écrivez-moi directement. Je lis tout et je réponds.</p>
<div class="grid w-full gap-8 lg:grid-cols-12">
<form id="form-contact" action="{{ route('contact') }}" method="post" class="grid gap-4 border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000] lg:col-span-8">
@csrf
<div class="grid gap-4 sm:grid-cols-2">
<label class="grid gap-2 font-extrabold">Votre nom<input name="nom" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Votre e-mail<input type="email" name="email" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
</div>
<label class="grid gap-2 font-extrabold">Votre message<textarea name="message" rows="4" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none" placeholder="Il manque un TP sur…"></textarea></label>
<div class="flex flex-wrap items-center gap-4">
<button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#FFD23F] hover:bg-[#13233A]">Envoyer à Adam <span class="font-mono" aria-hidden="true">→</span></button>
<p id="contact-ok" class="border-4 border-black bg-[#7CF2C0] px-4 py-2 font-extrabold" @if(!session('contact_ok')) hidden @endif>Message envoyé, merci ! Je vous réponds vite.</p>
</div>
</form>
<div class="grid content-start gap-3 lg:col-span-4">
<p class="text-lg font-bold text-white">Ou écrivez-moi directement :</p>
<p class="border-4 border-black bg-white px-4 py-3 font-mono text-lg font-semibold">adam@belkacemi.me</p>
<button type="button" id="copier-mail" class="self-start border-4 border-black bg-[#FFD23F] px-4 py-2 font-extrabold shadow-[4px_4px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Copier l’adresse</button>
</div>
</div>
<script>
document.getElementById('copier-mail').addEventListener('click', function () {
var b = this;
navigator.clipboard.writeText('adam@belkacemi.me').then(function () { b.textContent = 'Adresse copiée ✓'; }, function () { b.textContent = 'adam@belkacemi.me'; });
});
</script>
</div>
</section>
@endsection

View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz flash · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
</head>
<body class="min-h-screen bg-[#C4B5FD] font-display text-black antialiased">
<main class="mx-auto flex min-h-screen max-w-md flex-col gap-6 px-5 py-8">
<p class="self-start border-2 border-black bg-white px-3 py-1 text-sm font-extrabold">Vue élève · téléphone ou PC</p>
<section id="e-login" class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]">
<h1 class="text-4xl font-black leading-none tracking-tighter">Quiz flash</h1>
<form id="f-login" class="mt-6 grid gap-4">
<label class="grid gap-2 font-extrabold">Code du quiz<input required value="K7Q4" maxlength="4" class="w-full border-4 border-black px-4 py-3 font-mono text-3xl font-semibold uppercase tracking-widest focus:bg-[#FFFBEA] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Identifiant<input required value="lea.m.sio1-a" autocomplete="username" class="w-full border-4 border-black px-4 py-3 font-mono text-lg font-semibold focus:bg-[#FFFBEA] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Code secret<input required type="password" value="••••••" autocomplete="current-password" class="w-full border-4 border-black px-4 py-3 font-mono text-lg font-semibold focus:bg-[#FFFBEA] focus:outline-none"></label>
<button type="submit" class="min-h-[56px] border-4 border-black bg-black px-6 py-4 text-left text-xl font-extrabold text-white shadow-[6px_6px_0px_#FFD23F]">Rejoindre →</button>
</form>
</section>
<section id="e-attente" hidden class="border-4 border-black bg-[#7CF2C0] p-6 text-center shadow-[8px_8px_0px_#000000]">
<p class="text-3xl font-black">Tu es connectée, Léa&nbsp;!</p>
<p class="mt-3 text-lg font-bold">Regarde l’écran. La question arrive…</p>
<button type="button" id="e-go" class="mt-6 border-2 border-black bg-white px-3 py-1 text-sm font-bold underline">Aperçu : afficher la question</button>
</section>
<section id="e-question" hidden>
<p class="font-mono font-semibold">Question 3 / 5 · la question est affichée au tableau</p>
<div class="mt-4 grid grid-cols-2 gap-4">
<button type="button" data-choix="0" class="grid aspect-square place-items-center border-4 border-black bg-[#FF6FB5] font-mono text-6xl font-semibold shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">A</button>
<button type="button" data-choix="1" class="grid aspect-square place-items-center border-4 border-black bg-[#7CF2C0] font-mono text-6xl font-semibold shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">B</button>
<button type="button" data-choix="2" class="grid aspect-square place-items-center border-4 border-black bg-[#FFD23F] font-mono text-6xl font-semibold shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">C</button>
<button type="button" data-choix="3" class="grid aspect-square place-items-center border-4 border-black bg-[#C4B5FD] font-mono text-6xl font-semibold shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">D</button>
</div>
</section>
<section id="e-envoye" hidden class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]">
<p class="text-3xl font-black">Réponse <span id="e-lettre"></span> envoyée ✓</p>
<p class="mt-2 text-lg font-bold">Attends la correction au tableau.</p>
</section>
</main>
<script>
(function () {
var $ = function (id) { return document.getElementById(id); };
$('f-login').addEventListener('submit', function (e) { e.preventDefault(); $('e-login').hidden = true; $('e-attente').hidden = false; });
$('e-go').addEventListener('click', function () { $('e-attente').hidden = true; $('e-question').hidden = false; });
document.querySelectorAll('[data-choix]').forEach(function (b) { b.addEventListener('click', function () { $('e-lettre').textContent = b.textContent.trim(); $('e-question').hidden = true; $('e-envoye').hidden = false; }); });
})();
</script>
</body>
</html>

View file

@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz flash · projection · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
</head>
<body class="min-h-screen bg-white font-display text-black antialiased">
<div id="scene" class="flex min-h-screen flex-col">
<header class="flex flex-wrap items-center gap-4 border-b-4 border-black bg-black px-6 py-3 text-white">
<span class="border-2 border-white bg-[#FFD23F] px-3 py-1 font-extrabold text-black">QUIZ FLASH</span>
<p class="flex-1 font-bold">BTS SIO 1 · Groupe A · ls, chmod, grep, ip, ping</p>
<p class="font-mono"><span id="p-count">0</span> / 24 connectés</p>
<button type="button" id="plein" class="border-2 border-white px-3 py-1 font-extrabold hover:bg-white hover:text-black">Plein écran</button>
</header>
<section id="s-attente" class="grid flex-1 gap-8 p-8 lg:grid-cols-12">
<div class="flex flex-col justify-center lg:col-span-7">
<p class="text-3xl font-black">Sur ton téléphone ou ton PC, va sur</p>
<p class="mt-4 inline-block self-start -rotate-1 border-4 border-black bg-[#7CF2C0] px-5 py-3 font-mono text-5xl font-semibold shadow-[8px_8px_0px_#000000]">paillasse.fr/quiz</p>
<p class="mt-10 text-3xl font-black">et entre le code</p>
<p class="mt-4 inline-block self-start rotate-1 border-4 border-black bg-[#FFD23F] px-6 py-4 font-mono text-8xl font-semibold tracking-widest shadow-[10px_10px_0px_#000000]">K7Q4</p>
<p class="mt-10 text-xl font-bold">Connecte-toi avec ton identifiant Paillasse.</p>
</div>
<div class="flex flex-col border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:col-span-5">
<div class="flex items-center justify-between border-b-4 border-black bg-[#C4B5FD] px-5 py-3"><p class="text-xl font-black">Présences</p><p class="font-mono font-semibold"><span id="p-count2">0</span> / 24</p></div>
<ul id="presences" class="grid flex-1 content-start grid-cols-2 gap-2 overflow-y-auto p-4 text-sm font-bold sm:grid-cols-3">
<li data-eleve="Léa Martin" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Léa Martin</li>
<li data-eleve="Yanis Benali" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Yanis Benali</li>
<li data-eleve="Nora Kaci" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Nora Kaci</li>
<li data-eleve="Tom Robert" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Tom Robert</li>
<li data-eleve="Inès Durand" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Inès Durand</li>
<li data-eleve="Sami Lefèvre" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Sami Lefèvre</li>
<li data-eleve="Chloé Petit" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Chloé Petit</li>
<li data-eleve="Adam Fontaine" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Adam Fontaine</li>
<li data-eleve="Maël Girard" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Maël Girard</li>
<li data-eleve="Jade Thomas" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Jade Thomas</li>
<li data-eleve="Hugo Moreau" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Hugo Moreau</li>
<li data-eleve="Lina Garcia" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Lina Garcia</li>
<li data-eleve="Rayan Faure" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Rayan Faure</li>
<li data-eleve="Emma Blanc" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Emma Blanc</li>
<li data-eleve="Noah Henry" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Noah Henry</li>
<li data-eleve="Sarah Roux" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Sarah Roux</li>
<li data-eleve="Ilyes Morel" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Ilyes Morel</li>
<li data-eleve="Manon Lopez" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Manon Lopez</li>
<li data-eleve="Lucas Mercier" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Lucas Mercier</li>
<li data-eleve="Zoé Dupont" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Zoé Dupont</li>
<li data-eleve="Enzo Lambert" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Enzo Lambert</li>
<li data-eleve="Camille Bonnet" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Camille Bonnet</li>
<li data-eleve="Nathan Fournier" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Nathan Fournier</li>
<li data-eleve="Anaïs Leroy" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Anaïs Leroy</li>
</ul>
<div class="border-t-4 border-black p-4">
<p id="manquants" class="font-bold">En attente des connexions…</p>
<button type="button" id="demarrer" class="mt-4 w-full border-4 border-black bg-black px-6 py-4 text-left text-xl font-extrabold text-white shadow-[6px_6px_0px_#ec3013] hover:bg-[#ec3013]">Démarrer le quiz →</button>
</div>
</div>
</section>
<section id="s-question" hidden class="flex flex-1 flex-col p-8">
<div class="flex flex-wrap items-center gap-4">
<p class="border-4 border-black bg-white px-4 py-2 font-mono text-xl font-semibold">Question <span id="q-num">1</span> / 5</p>
<div class="h-6 flex-1 border-4 border-black bg-white"><div id="q-timer" class="h-full bg-[#ec3013]" style="width:100%"></div></div>
<p class="font-mono text-3xl font-semibold"><span id="q-sec">20</span> s</p>
</div>
<h1 id="q-texte" class="mt-10 max-w-5xl text-5xl font-black leading-tight tracking-tight lg:text-7xl"></h1>
<ol id="q-reps" class="mt-10 grid flex-1 content-start gap-5 md:grid-cols-2"></ol>
<div class="mt-8 flex flex-wrap items-center gap-5">
<p class="text-2xl font-black"><span id="q-rep">0</span> / <span id="q-pres">0</span> ont répondu</p>
<p id="q-expl" hidden class="flex-1 border-4 border-black bg-[#7CF2C0] px-5 py-3 text-xl font-bold"></p>
<button type="button" id="suivant" class="ml-auto border-4 border-black bg-black px-6 py-4 text-xl font-extrabold text-white shadow-[6px_6px_0px_#FFD23F]">Afficher la réponse →</button>
</div>
</section>
<section id="s-fin" hidden class="grid flex-1 content-center gap-8 p-8 lg:grid-cols-3">
<div class="border-4 border-black bg-[#FFD23F] p-8 shadow-[10px_10px_0px_#000000] lg:col-span-2">
<p class="text-2xl font-black">Quiz terminé&nbsp;!</p>
<p class="mt-4 font-mono text-8xl font-semibold"><span id="f-score">0</span> %</p>
<p class="mt-2 text-2xl font-bold">de bonnes réponses pour la classe</p>
<p id="f-rate" class="mt-6 border-t-4 border-black pt-4 text-xl font-bold"></p>
</div>
<div class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]">
<p class="text-xl font-black">Absents au quiz</p>
<ul class="mt-3 grid gap-2 font-bold"><li class="border-2 border-black bg-[#FFE4DF] px-3 py-1">Inès Durand</li><li class="border-2 border-black bg-[#FFE4DF] px-3 py-1">Hugo Moreau</li><li class="border-2 border-black bg-[#FFE4DF] px-3 py-1">Jade Thomas</li></ul>
<p class="mt-4 font-semibold">Résultats enregistrés dans le suivi de la classe.</p>
<a href="{{ route('banque') }}" class="mt-5 inline-block border-4 border-black bg-black px-4 py-2 font-extrabold text-white">Retour à la banque</a>
</div>
</section>
</div>
<script>
(function () {
var Q = [["Que fait ls -a en plus de ls ?",["Affiche les fichiers cachés","Affiche les droits","Affiche la taille en Ko","N’affiche que les dossiers"],0,"L’option -a (all) affiche aussi les fichiers qui commencent par un point, comme .bashrc."],["chmod 750 script.sh donne au groupe…",["Lecture et exécution","Lecture seule","Tous les droits","Aucun droit"],0,"7 = rwx pour le propriétaire, 5 = r-x pour le groupe, 0 = rien pour les autres."],["Quelle commande cherche « erreur » dans app.log ?",["find erreur app.log","grep erreur app.log","cat -s erreur app.log","ls erreur app.log"],1,"grep affiche les lignes d’un fichier qui contiennent un motif."],["À quoi sert ip a ?",["Pinger une machine","Ajouter une route","Afficher les adresses des interfaces","Redémarrer le réseau"],2,"ip a (ip address) liste les interfaces réseau et leurs adresses IP."],["ping -c 4 8.8.8.8 envoie…",["Pendant 4 secondes","4 paquets puis s’arrête","À 4 machines","4 fois plus vite"],1,"L’option -c (count) fixe le nombre de paquets envoyés."]], COL = ["bg-[#FF6FB5]","bg-[#7CF2C0]","bg-[#FFD23F]","bg-[#C4B5FD]"], ABS = ["Inès Durand","Hugo Moreau","Jade Thomas"], L = 'ABCD';
var eleves = Array.prototype.slice.call(document.querySelectorAll('[data-eleve]')), connectes = 0, i = -1, phase = 'q', tic, bons = 0, total = 0, rate = [];
var $ = function (id) { return document.getElementById(id); };
var file = eleves.filter(function (li) { return ABS.indexOf(li.dataset.eleve) === -1; });
file.sort(function () { return Math.random() - .5; });
var joins = setInterval(function () {
var li = file.shift(); if (!li) { clearInterval(joins); return; }
li.classList.remove('opacity-40'); li.classList.add('bg-[#7CF2C0]'); li.querySelector('[data-pastille]').classList.replace('bg-white', 'bg-black');
connectes++; $('p-count').textContent = $('p-count2').textContent = connectes;
var m = eleves.filter(function (e) { return e.classList.contains('opacity-40'); }).map(function (e) { return e.dataset.eleve; });
$('manquants').innerHTML = m.length ? '<span class="bg-[#ec3013] px-1 text-white">Manquants : ' + m.length + '</span> ' + m.join(', ') : 'Tout le monde est là ✓';
$('demarrer').textContent = 'Démarrer le quiz (' + connectes + ' / ' + eleves.length + ') →';
}, 350);
function question() {
i++; phase = 'q';
if (i >= Q.length) return fin();
var q = Q[i], t = 20, rep = 0;
$('q-num').textContent = i + 1; $('q-texte').textContent = q[0]; $('q-pres').textContent = connectes; $('q-rep').textContent = 0;
$('q-expl').hidden = true; $('suivant').textContent = 'Afficher la réponse →';
$('q-reps').innerHTML = q[1].map(function (r, k) {
return '<li data-r class="flex items-center gap-5 border-4 border-black ' + COL[k] + ' p-6 text-3xl font-black shadow-[6px_6px_0px_#000000]"><span class="grid h-14 w-14 shrink-0 place-items-center border-4 border-black bg-white font-mono">' + L[k] + '</span><span class="flex-1">' + r + '</span><span data-pc class="font-mono text-2xl" hidden></span></li>';
}).join('');
clearInterval(tic);
tic = setInterval(function () {
t--; $('q-sec').textContent = Math.max(0, t); $('q-timer').style.width = Math.max(0, t / 20 * 100) + '%';
if (rep < connectes && Math.random() < .55) { rep = Math.min(connectes, rep + 1 + Math.floor(Math.random() * 3)); $('q-rep').textContent = rep; }
if (t <= 0) reponse();
}, 1000);
}
function reponse() {
clearInterval(tic); phase = 'r';
var q = Q[i], ok = q[2], n = Number($('q-rep').textContent) || connectes, part = [0, 0, 0, 0];
var pBon = .45 + Math.random() * .45; part[ok] = Math.round(n * pBon);
var reste = n - part[ok]; [0, 1, 2, 3].filter(function (k) { return k !== ok; }).forEach(function (k, j, arr) { var v = j === arr.length - 1 ? reste : Math.floor(Math.random() * (reste + 1)); part[k] = v; reste -= v; });
bons += part[ok]; total += n; rate.push([i + 1, Math.round(pBon * 100)]);
document.querySelectorAll('#q-reps [data-r]').forEach(function (li, k) {
var pc = li.querySelector('[data-pc]'); pc.hidden = false; pc.textContent = part[k] + ' élève' + (part[k] > 1 ? 's' : '');
if (k !== ok) li.classList.add('opacity-40'); else li.classList.add('outline', 'outline-8', 'outline-black');
});
$('q-expl').hidden = false; $('q-expl').textContent = '✓ ' + q[3];
$('suivant').textContent = i === Q.length - 1 ? 'Voir le bilan →' : 'Question suivante →';
}
function fin() {
$('s-question').hidden = true; $('s-fin').hidden = false;
$('f-score').textContent = Math.round(bons / Math.max(1, total) * 100);
var pire = rate.slice().sort(function (a, b) { return a[1] - b[1]; })[0];
$('f-rate').textContent = 'À revoir en cours : question ' + pire[0] + ' (' + pire[1] + ' % de réussite).';
}
$('demarrer').addEventListener('click', function () { clearInterval(joins); $('s-attente').hidden = true; $('s-question').hidden = false; question(); });
$('suivant').addEventListener('click', function () { phase === 'q' ? reponse() : question(); });
document.addEventListener('keydown', function (e) { if ((e.key === 'ArrowRight' || e.key === ' ') && !$('s-question').hidden) { e.preventDefault(); $('suivant').click(); } });
$('plein').addEventListener('click', function () { document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen && document.documentElement.requestFullscreen(); });
})();
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,100 @@
@extends('layouts.vitrine')
@section('titre', 'Tarifs')
@section('contenu')
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div class="relative mx-auto grid max-w-7xl items-center gap-10 px-5 pb-16 pt-14 lg:grid-cols-12 lg:px-10 lg:pt-20">
<div class="lg:col-span-7">
<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]">Tarifs HT</p>
<h1 class="mt-8 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Les cours sont gratuits. Les VM coûtent moins qu’un manuel.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Une licence Paillasse pour un élève coûte 24 € par an : QCM, TP sur VM, suivi et mode examen compris.</p>
</div>
<figure class="mx-auto w-full max-w-md lg:col-span-5 lg:max-w-none"><svg viewBox="0 0 500 470" class="h-auto w-full" role="img" aria-label="Un ordinateur portable, avec une pièce de 0 €, un billet gratuit et une carte bancaire barrée">
<defs><pattern id="tp" width="22" height="22" patternUnits="userSpaceOnUse"><circle cx="5" cy="5" r="2.6" fill="#000"/></pattern></defs>
<rect x="290" y="270" width="210" height="200" fill="url(#tp)"/><rect x="0" y="330" width="150" height="140" fill="url(#tp)"/>
<circle cx="118" cy="120" r="64" fill="#FF3E9A"/>
<g transform="translate(190 300) rotate(-10) scale(.5)">
<rect x="-118" y="-100" width="236" height="150" fill="#000" transform="translate(8 8)"/>
<rect x="-118" y="-100" width="236" height="150" fill="#13233A" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/>
<rect x="-104" y="-86" width="208" height="122" fill="#35E0E8" stroke="#000" stroke-width="4"/>
<path d="M-80 -60 h60 M-80 -40 h110 M-80 -20 h80 M-80 0 h120" stroke="#000" stroke-width="8" stroke-linecap="round"/>
<path d="M-150 50 H150 L136 72 H-136 Z" fill="#fff" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><rect x="-26" y="54" width="52" height="7" fill="#000"/>
</g>
<g transform="translate(110 120) rotate(-14)"><circle r="44" fill="#000" transform="translate(5 5)"/><circle r="44" fill="#FFD23F" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><circle r="33" fill="none" stroke="#000" stroke-width="3" stroke-dasharray="4 5"/><text y="12" text-anchor="middle" font-family="IBM Plex Mono,monospace" font-weight="600" font-size="32" fill="#000">0€</text></g>
<g transform="translate(360 405) rotate(8)"><rect x="-74" y="-36" width="148" height="72" fill="#000" transform="translate(6 6)"/><rect x="-74" y="-36" width="148" height="72" fill="#7CF2C0" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><rect x="-62" y="-24" width="124" height="48" fill="none" stroke="#000" stroke-width="3"/><text x="0" y="7" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="20" fill="#000">GRATUIT</text></g>
<g transform="translate(400 110) rotate(-12)"><rect x="-44" y="-28" width="88" height="56" fill="#C4B5FD" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><rect x="-44" y="-16" width="88" height="11" fill="#000"/><rect x="-32" y="4" width="18" height="13" fill="#FFD23F" stroke="#000" stroke-width="3"/><path d="M-50 32 L50 -32" stroke="#000" stroke-width="14" stroke-linecap="round"/><path d="M-50 32 L50 -32" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/></g>
<path d="M60 250 l6 13 14 2 -10 10 2 14 -12 -7 -12 7 2 -14 -10 -10 14 -2 z" fill="#7CF2C0" stroke="#000" stroke-width="4" stroke-linejoin="round"/>
<path d="M455 250 l4 9 10 1 -7 7 2 10 -9 -5 -9 5 2 -10 -7 -7 10 -1 z" fill="#FF6FB5" stroke="#000" stroke-width="3" stroke-linejoin="round"/>
<path d="M110 430 l14 -14 14 14 14 -14 14 14 14 -14 14 14" fill="none" stroke="#000" stroke-width="5" stroke-linejoin="round"/>
</svg></figure>
</div>
</section>
<section class="mx-auto max-w-7xl px-5 py-20 lg:px-10" aria-label="Offres">
<ul class="grid gap-10 md:grid-cols-2 xl:grid-cols-4">
<li class="relative flex flex-col border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] ">
<h2 class="text-3xl font-black">Découverte</h2>
<p class="mt-1 font-semibold">Élèves, curieux, enseignants</p>
<p class="mt-6 flex items-baseline gap-2"><span class="font-mono text-5xl font-semibold">0 €</span><span class="font-bold"></span></p>
<p class="mt-1 font-mono text-sm font-semibold">pour toujours</p>
<ul class="mt-6 flex-1 space-y-2 border-t-4 border-black pt-5 font-semibold"><li class="flex gap-2"><span aria-hidden="true">■</span><span>Les 99 cours : CM, TD, QCM</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Corrections expliquées</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>1 lab d’essai de 30 min par jour</span></li></ul>
<a href="{{ route('cours.index') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none mt-8 self-start">Lire les cours</a>
</li>
<li class="relative flex flex-col border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] xl:translate-y-8">
<h2 class="text-3xl font-black">Enseignant</h2>
<p class="mt-1 font-semibold">Une classe, sans passer par l’intendance</p>
<p class="mt-6 flex items-baseline gap-2"><span class="font-mono text-5xl font-semibold">29 €</span><span class="font-bold">/ mois</span></p>
<p class="mt-1 font-mono text-sm font-semibold">ou 290 € / an · jusqu’à 35 élèves</p>
<ul class="mt-6 flex-1 space-y-2 border-t-4 border-black pt-5 font-semibold"><li class="flex gap-2"><span aria-hidden="true">■</span><span>Les 59 TP sur VM</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Correction automatique</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Suivi des élèves</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Mode examen</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Cockpit prof, messagerie, correction assistée</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>15 h de VM par élève et par mois</span></li></ul>
<a href="{{ route('paiement') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none mt-8 self-start">Souscrire</a>
</li>
<li class="relative flex flex-col border-4 border-black bg-[#FFD23F] p-7 shadow-[10px_10px_0px_#000000] xl:-rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-[#ec3013] px-3 py-1 text-sm font-extrabold text-white shadow-[3px_3px_0px_#000000]">Le plus choisi</span>
<h2 class="text-3xl font-black">Établissement</h2>
<p class="mt-1 font-semibold">Lycée, BTS, IUT, université, école</p>
<p class="mt-6 flex items-baseline gap-2"><span class="font-mono text-5xl font-semibold">24 €</span><span class="font-bold">/ élève / an</span></p>
<p class="mt-1 font-mono text-sm font-semibold">à partir de 60 élèves · 1 440 € / an</p>
<ul class="mt-6 flex-1 space-y-2 border-t-4 border-black pt-5 font-semibold"><li class="flex gap-2"><span aria-hidden="true">■</span><span>Tout Enseignant, classes illimitées</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Espace vie scolaire : CPE, direction, intendance</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Export Pronote / ENT</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Tableau de bord académie sur devis</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Espace administrateur</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Séances réservées, VM prêtes 10 min avant</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Bibliothèque partagée entre collègues</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Paiement par mandat administratif</span></li></ul>
<a href="{{ route('etablissements') }}" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none mt-8 self-start">Demander un devis</a>
</li>
<li class="relative flex flex-col border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] xl:translate-y-8">
<h2 class="text-3xl font-black">Région et OF</h2>
<p class="mt-1 font-semibold">Académies, régions, organismes de formation</p>
<p class="mt-6 flex items-baseline gap-2"><span class="font-mono text-5xl font-semibold">Devis</span><span class="font-bold"></span></p>
<p class="mt-1 font-mono text-sm font-semibold">à partir de 500 élèves ou stagiaires</p>
<ul class="mt-6 flex-1 space-y-2 border-t-4 border-black pt-5 font-semibold"><li class="flex gap-2"><span aria-hidden="true">■</span><span>Tout Établissement</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Capacité réservée</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Suivi par centre ou par site</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Accompagnement au déploiement</span></li></ul>
<a href="{{ route('etablissements') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none mt-8 self-start">Nous contacter</a>
</li>
</ul>
</section>
<section class="border-y-4 border-black bg-[#13233A] text-white" aria-labelledby="t-api">
<div class="mx-auto grid max-w-7xl items-center gap-8 px-5 py-14 lg:grid-cols-12 lg:px-10">
<h2 id="t-api" class="text-4xl font-black tracking-tighter lg:col-span-4">API et MCP pour développeurs</h2>
<p class="text-lg font-semibold lg:col-span-5">19 € HT par mois avec 100 h de VM incluses, puis 0,09 € HT l’heure. Quotas par jeton. Les classes restent toujours prioritaires sur la capacité.</p>
<a href="{{ route('etablissements') }}" class="inline-flex items-center gap-3 self-start justify-self-start border-4 border-white bg-[#FFD23F] px-5 py-3 font-extrabold text-black shadow-[4px_4px_0px_#FF6FB5] lg:col-span-3">Obtenir une clé</a>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-faq">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">FAQ</p>
<h2 id="t-faq" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vos questions, nos réponses.</h2>
<p class="mt-4 max-w-2xl text-xl font-medium">Intendance, données, pédagogie, technique. Une question manque&nbsp;? <a href="mailto:adam@belkacemi.me" class="font-extrabold underline underline-offset-4">adam@belkacemi.me</a></p>
<div class="mt-12 grid gap-x-8 gap-y-14 lg:grid-cols-2">
<div class=""><h3 class="inline-block border-4 border-black bg-[#FFD23F] px-4 py-2 text-2xl font-black shadow-[4px_4px_0px_#000000] -rotate-1">Achat et intendance</h3><ul class="mt-6 grid gap-4"><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Bon de commande et Chorus Pro ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui. Nous envoyons un devis, vous émettez un bon de commande, la facture arrive sur Chorus Pro. Paiement par mandat administratif à 30 jours.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Faut-il une carte bancaire pour essayer ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Non. Un enseignant crée sa classe gratuitement, sans CB. En échange, on vous demande juste un coup de pouce : vos remarques, ou votre aide pour faire souscrire votre établissement.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Une licence couvre quelle période ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Une licence suit l’année scolaire, de septembre à août. Les comptes archivés sont supprimés 90 jours après la fin d’année.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Les élèves qui redoublent ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Ils repartent sur la licence de l’année suivante. Leur historique (notes, observations, progression) peut être conservé si l’établissement le demande.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Peut-on payer par région ou par académie ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui, un devis groupé est possible pour plusieurs établissements. Écrivez-nous pour en parler.</p></details></li></ul></div>
<div class="lg:translate-y-10"><h3 class="inline-block border-4 border-black bg-[#7CF2C0] px-4 py-2 text-2xl font-black shadow-[4px_4px_0px_#000000] rotate-1">Élèves et données</h3><ul class="mt-6 grid gap-4"><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Où sont hébergées les données ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">En France, chez Scaleway, sur des serveurs situés à Strasbourg. Rien ne sort de l’Union européenne.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Et le RGPD ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Nous collectons le minimum : nom, prénom, classe, résultats. Pas de publicité, pas de revente, pas de traceurs tiers. Un contrat de sous-traitance est fourni à l’établissement.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Les élèves mineurs peuvent-ils s’inscrire seuls ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Non. C’est l’enseignant qui crée la classe et distribue les identifiants. L’élève n’a pas besoin d’adresse e-mail.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Un élève peut-il travailler chez lui ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui, depuis n’importe quel navigateur, sur PC ou téléphone. Cours, QCM, IDE et devoirs maison restent accessibles toute l’année.</p></details></li></ul></div>
<div class=""><h3 class="inline-block border-4 border-black bg-[#C4B5FD] px-4 py-2 text-2xl font-black shadow-[4px_4px_0px_#000000] -rotate-1">Pédagogie</h3><ul class="mt-6 grid gap-4"><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Les cours suivent-ils les programmes officiels ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui. Ils sont construits à partir des référentiels officiels (BO, arrêtés, fiches RNCP), du SNT au master. Chaque CM, TD et TP indique les compétences visées.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Puis-je modifier un cours ou un sujet ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui. Tout se duplique et se modifie : CM, questions, TD, sujets d’examen. Vos versions restent dans votre bibliothèque.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Comment marche le mode examen ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">L’élève passe en plein écran. Si sa souris sort de la fenêtre ou s’il change d’onglet, vous le voyez en direct, avec l’heure et la durée.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Les TD s’impriment-ils ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui. Chaque TD se télécharge en PDF avec ses étapes et ses cases à remplir. La correction s’imprime à part, pour vous.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Et la fonction « Lever la main » ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">L’élève lève la main depuis son écran, vous voyez la file d’attente. Fini les « Madame ! Monsieur ! » en boucle.</p></details></li></ul></div>
<div class="lg:translate-y-10"><h3 class="inline-block border-4 border-black bg-[#FF6FB5] px-4 py-2 text-2xl font-black shadow-[4px_4px_0px_#000000] rotate-1">Technique</h3><ul class="mt-6 grid gap-4"><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Faut-il installer quelque chose ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Non. Tout se passe dans le navigateur : terminal Debian, IDE, navigateur relié à la VM. Rien à installer sur les postes du lycée.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Et si un élève dépasse 15 h de VM ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Le compteur est partagé par la classe : un élève peut consommer plus si d’autres consomment moins. Au-delà, les TP restent ouverts en lecture.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Le réseau du lycée bloque souvent tout…<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Paillasse passe par une connexion web chiffrée classique, comme n’importe quel site. En cas de souci, on vous aide à le régler avec votre administrateur réseau.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Une VM peut-elle casser le réseau du lycée ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Non. Chaque VM est isolée chez nous. L’élève peut tout casser dedans, il la réinitialise en un clic.</p></details></li></ul></div>
</div>
</div>
</section>
@endsection

View file

@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TD à imprimer · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
@media print { header, footer, .print\:hidden { display: none !important; } body:not(.avec-corr) .corr { display: none; } .corr { break-before: page; } @page { size: A4; margin: 12mm; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" @if(request()->routeIs('cockpit')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" @if(request()->routeIs('espace.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" @if(request()->routeIs('vie.scolaire')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" @if(request()->routeIs('academie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" @if(request()->routeIs('labs.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" @if(request()->routeIs('labs.web')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" @if(request()->routeIs('ide')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" @if(request()->routeIs('maison')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" @if(request()->routeIs('bibliotheque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" @if(request()->routeIs('banque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" @if(request()->routeIs('generateur')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" @if(request()->routeIs('td.imprimable')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" @if(request()->routeIs('quiz.projection')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" @if(request()->routeIs('sujet.creer')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" @if(request()->routeIs('devoirs')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" @if(request()->routeIs('correction')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" @if(request()->routeIs('fiche.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" @if(request()->routeIs('messagerie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" @if(request()->routeIs('export.ent')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="border-b-4 border-black bg-white print:hidden">
<div class="mx-auto flex max-w-5xl flex-wrap items-end gap-6 px-5 py-12 lg:px-10">
<div class="flex-1">
<p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">TD prêt à imprimer</p>
<h1 class="mt-6 text-6xl font-black leading-[0.9] tracking-tighter">Découper un réseau IPv4.</h1>
<p class="mt-4 max-w-2xl text-xl font-medium">Étapes numérotées, cases à remplir, auto-évaluation. La correction s’imprime à part, pour le prof.</p>
</div>
<div class="grid gap-3">
<button type="button" onclick="document.body.classList.remove('avec-corr');window.print()" class="flex items-center gap-3 border-4 border-black bg-[#FFD23F] px-4 py-3 text-left font-extrabold shadow-[5px_5px_0px_#000000] hover:bg-[#FFE680] active:translate-x-1 active:translate-y-1 active:shadow-none"><svg viewBox="0 0 40 48" class="h-10 w-8 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Télécharger le TD<span class="block font-mono text-xs font-semibold">PDF · 2 pages A4</span></span></button>
<button type="button" onclick="document.body.classList.add('avec-corr');window.print()" class="flex items-center gap-3 border-4 border-black bg-[#FF6FB5] px-4 py-3 text-left font-extrabold shadow-[5px_5px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><svg viewBox="0 0 40 48" class="h-10 w-8 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>TD + correction<span class="block font-mono text-xs font-semibold">PDF · version prof</span></span></button>
</div>
</div>
</section>
<div class="mx-auto max-w-5xl px-5 py-12 lg:px-10 print:max-w-none print:p-0">
<article class="border-4 border-black p-6 print:border-2" aria-label="Sujet">
<header class="flex flex-wrap items-start justify-between gap-4 border-b-4 border-black pb-4">
<div><p class="font-mono text-sm font-semibold">BTS SIO · BTS CIEL · BUT R&amp;T 1re année</p><h2 class="text-3xl font-black">TD · Découper un réseau IPv4</h2><p class="font-semibold">Durée : 1 h · Calculatrice interdite</p></div>
<div class="grid gap-2 font-bold"><p>Nom : <span class="inline-block h-9 w-48 border-2 border-black bg-white align-middle print:bg-white"></span></p><p>Classe : <span class="inline-block h-9 w-40 border-2 border-black bg-white align-middle print:bg-white"></span></p><p>Date : <span class="inline-block h-9 w-40 border-2 border-black bg-white align-middle print:bg-white"></span></p></div>
</header>
<p class="mt-4 border-2 border-black bg-[#FFFBEA] p-3 font-semibold">Rappel : un masque /n laisse 32 − n bits pour les hôtes. Nombre d’hôtes utilisables = 2<sup>(32 − n)</sup> − 2.</p>
<div class="mt-6 grid gap-6">
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#FFD23F] font-mono text-2xl font-semibold">1</span><div><h3 class="text-2xl font-black">Lire l’adresse</h3><p class="mt-1 text-lg font-medium">L’établissement dispose du réseau 192.168.10.0/24. Complète les cases.</p></div></div>
<div class="mt-5"><div class="grid gap-3 sm:grid-cols-2"><label class="grid gap-1 font-bold">Classe de l’adresse<span class="inline-block h-9 w-full border-2 border-black bg-white align-middle print:bg-white"></span></label><label class="grid gap-1 font-bold">Partie réseau (bits)<span class="inline-block h-9 w-full border-2 border-black bg-white align-middle print:bg-white"></span></label><label class="grid gap-1 font-bold">Partie hôte (bits)<span class="inline-block h-9 w-full border-2 border-black bg-white align-middle print:bg-white"></span></label><label class="grid gap-1 font-bold">Adresses totales<span class="inline-block h-9 w-full border-2 border-black bg-white align-middle print:bg-white"></span></label></div></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#7CF2C0] font-mono text-2xl font-semibold">2</span><div><h3 class="text-2xl font-black">Choisir le masque</h3><p class="mt-1 text-lg font-medium">Il faut 4 sous-réseaux de même taille. Combien de bits emprunter ? Coche puis justifie.</p></div></div>
<div class="mt-5"><div class="flex flex-wrap gap-4 font-bold"><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>1 bit</span><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>2 bits</span><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>3 bits</span><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>4 bits</span></div><p class="mt-4 font-bold">Justification :</p><div class="mt-1 grid gap-2"><span class="inline-block h-9 w-full border-2 border-black bg-white align-middle print:bg-white"></span><span class="inline-block h-9 w-full border-2 border-black bg-white align-middle print:bg-white"></span></div></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#C4B5FD] font-mono text-2xl font-semibold">3</span><div><h3 class="text-2xl font-black">Calculer la taille d’un sous-réseau</h3><p class="mt-1 text-lg font-medium">Avec ton masque, complète le tableau.</p></div></div>
<div class="mt-5"><table class="w-full border-collapse border-4 border-black"><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Adresse réseau</th><td class="h-12 border-2 border-black p-2"></td></tr><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Masque (décimal)</th><td class="h-12 border-2 border-black p-2"></td></tr><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Nombre d’adresses par sous-réseau</th><td class="h-12 border-2 border-black p-2"></td></tr><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Hôtes utilisables</th><td class="h-12 border-2 border-black p-2"></td></tr></table></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#FF6FB5] font-mono text-2xl font-semibold">4</span><div><h3 class="text-2xl font-black">Découper le réseau</h3><p class="mt-1 text-lg font-medium">Remplis le plan d’adressage des 4 sous-réseaux.</p></div></div>
<div class="mt-5"><table class="w-full border-collapse border-4 border-black text-left"><thead class="bg-black text-white"><tr><th class="border-2 border-black p-2">Sous-réseau</th><th class="border-2 border-black p-2">Adresse réseau</th><th class="border-2 border-black p-2">Plage d’hôtes</th><th class="border-2 border-black p-2">Broadcast</th></tr></thead><tbody><tr><td class="border-2 border-black p-2 font-bold">SR1 · Administration</td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td></tr><tr><td class="border-2 border-black p-2 font-bold">SR2 · Élèves</td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td></tr><tr><td class="border-2 border-black p-2 font-bold">SR3 · Serveurs</td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td></tr><tr><td class="border-2 border-black p-2 font-bold">SR4 · Wi-Fi invités</td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td></tr></tbody></table></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#FFD23F] font-mono text-2xl font-semibold">5</span><div><h3 class="text-2xl font-black">Vérifier sur le lab</h3><p class="mt-1 text-lg font-medium">Connecte-toi au lab « Adressage IPv4 » et configure le poste du SR2. Recopie la commande utilisée.</p></div></div>
<div class="mt-5"><div class="h-16 border-2 border-dashed border-black bg-[#13233A]"></div></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-white font-mono text-2xl font-semibold">6</span><div><h3 class="text-2xl font-black">Auto-évaluation</h3><p class="mt-1 text-lg font-medium">Coche ce que tu sais faire.</p></div></div>
<div class="mt-5"><ul class="grid gap-2 font-bold"><li class="flex items-center gap-3"><span class="h-7 w-7 border-2 border-black"></span>Je sais lire une notation CIDR</li><li class="flex items-center gap-3"><span class="h-7 w-7 border-2 border-black"></span>Je sais calculer un masque</li><li class="flex items-center gap-3"><span class="h-7 w-7 border-2 border-black"></span>Je sais trouver une adresse de broadcast</li></ul></div>
</section></div>
</article>
<article id="correction" class="corr mt-12 border-4 border-[#ec3013] p-6" aria-label="Correction">
<header class="flex items-center justify-between gap-4 border-b-4 border-[#ec3013] pb-4"><h2 class="text-3xl font-black">Correction</h2><span class="border-2 border-black bg-[#ec3013] px-3 py-1 font-extrabold text-white">Version prof</span></header>
<div class="mt-6 grid gap-6">
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#FFD23F] font-mono text-2xl font-semibold">1</span><div><h3 class="text-2xl font-black">Lire l’adresse</h3><p class="mt-1 text-lg font-medium">L’établissement dispose du réseau 192.168.10.0/24. Complète les cases.</p></div></div>
<div class="mt-5"><div class="grid gap-3 sm:grid-cols-2"><label class="grid gap-1 font-bold">Classe de l’adresse<span class="border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">C</span></span></label><label class="grid gap-1 font-bold">Partie réseau (bits)<span class="border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">24</span></span></label><label class="grid gap-1 font-bold">Partie hôte (bits)<span class="border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">8</span></span></label><label class="grid gap-1 font-bold">Adresses totales<span class="border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">256</span></span></label></div></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#7CF2C0] font-mono text-2xl font-semibold">2</span><div><h3 class="text-2xl font-black">Choisir le masque</h3><p class="mt-1 text-lg font-medium">Il faut 4 sous-réseaux de même taille. Combien de bits emprunter ? Coche puis justifie.</p></div></div>
<div class="mt-5"><div class="flex flex-wrap gap-4 font-bold"><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>1 bit</span><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black">✕</span>2 bits</span><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>3 bits</span><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>4 bits</span></div><p class="mt-4 font-bold">Justification :</p><p class="mt-1 border-2 border-black p-3 font-medium"><span class="font-mono font-semibold text-[#ec3013]">2² = 4 sous-réseaux. Le masque passe de /24 à /26.</span></p></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#C4B5FD] font-mono text-2xl font-semibold">3</span><div><h3 class="text-2xl font-black">Calculer la taille d’un sous-réseau</h3><p class="mt-1 text-lg font-medium">Avec ton masque, complète le tableau.</p></div></div>
<div class="mt-5"><table class="w-full border-collapse border-4 border-black"><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Adresse réseau</th><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.0</span></td></tr><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Masque (décimal)</th><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">255.255.255.192</span></td></tr><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Nombre d’adresses par sous-réseau</th><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">64</span></td></tr><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Hôtes utilisables</th><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">62</span></td></tr></table></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#FF6FB5] font-mono text-2xl font-semibold">4</span><div><h3 class="text-2xl font-black">Découper le réseau</h3><p class="mt-1 text-lg font-medium">Remplis le plan d’adressage des 4 sous-réseaux.</p></div></div>
<div class="mt-5"><table class="w-full border-collapse border-4 border-black text-left"><thead class="bg-black text-white"><tr><th class="border-2 border-black p-2">Sous-réseau</th><th class="border-2 border-black p-2">Adresse réseau</th><th class="border-2 border-black p-2">Plage d’hôtes</th><th class="border-2 border-black p-2">Broadcast</th></tr></thead><tbody><tr><td class="border-2 border-black p-2 font-bold">SR1 · Administration</td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.0</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.1 – .62</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.63</span></td></tr><tr><td class="border-2 border-black p-2 font-bold">SR2 · Élèves</td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.64</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.65 – .126</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.127</span></td></tr><tr><td class="border-2 border-black p-2 font-bold">SR3 · Serveurs</td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.128</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.129 – .190</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.191</span></td></tr><tr><td class="border-2 border-black p-2 font-bold">SR4 · Wi-Fi invités</td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.192</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.193 – .254</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.255</span></td></tr></tbody></table></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#FFD23F] font-mono text-2xl font-semibold">5</span><div><h3 class="text-2xl font-black">Vérifier sur le lab</h3><p class="mt-1 text-lg font-medium">Connecte-toi au lab « Adressage IPv4 » et configure le poste du SR2. Recopie la commande utilisée.</p></div></div>
<div class="mt-5"><p class="border-2 border-black p-3"><span class="font-mono font-semibold text-[#ec3013]">sudo ip addr add 192.168.10.65/26 dev eth0</span></p></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-white font-mono text-2xl font-semibold">6</span><div><h3 class="text-2xl font-black">Auto-évaluation</h3><p class="mt-1 text-lg font-medium">Coche ce que tu sais faire.</p></div></div>
<div class="mt-5"><ul class="grid gap-2 font-bold"><li class="flex items-center gap-3"><span class="h-7 w-7 border-2 border-black"></span>Je sais lire une notation CIDR</li><li class="flex items-center gap-3"><span class="h-7 w-7 border-2 border-black"></span>Je sais calculer un masque</li><li class="flex items-center gap-3"><span class="h-7 w-7 border-2 border-black"></span>Je sais trouver une adresse de broadcast</li></ul></div>
</section></div>
</article>
</div>
<section class="border-t-4 border-black bg-white" aria-label="Lever la main">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="relative grid items-center gap-10 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FF6FB5] sm:p-12 md:grid-cols-[auto_1fr]">
<div class="grid h-40 w-40 -rotate-6 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black shadow-[6px_6px_0px_#FFFFFF]" role="img" aria-label="Moins 40 décibels"><span class="flex flex-col items-center gap-1 text-center"><span class="font-mono text-5xl font-semibold leading-none">−40</span><span class="text-2xl font-black leading-none">dB</span></span></div>
<div>
<p class="text-4xl font-black leading-tight tracking-tight sm:text-5xl">Vous devenez le roi du silence grâce à la fonction <span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
<p class="mt-6 text-2xl font-bold">Vos élèves n’auront plus que le droit de tousser ou de respirer&nbsp;!</p>
</div>
</div>
</div>
</section>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="apercu-legal.html#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="apercu-legal.html#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>

File diff suppressed because one or more lines are too long

11
design/_build/helpers.js Normal file
View file

@ -0,0 +1,11 @@
var ICON={grid:'<path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/>',alert:'<path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"/>',users:'<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>',note:'<path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/>',shield:'<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',book:'<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/>',chat:'<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',check:'<path d="M20 6 9 17l-5-5"/>',download:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>',help:'<circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01"/>',map:'<path d="M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4zM8 2v16M16 6v16"/>',trophy:'<path d="M6 9H4a2 2 0 0 1 0-4h2M18 9h2a2 2 0 0 0 0-4h-2M4 22h16M18 2H6v7a6 6 0 0 0 12 0V2z"/>',play:'<path d="m6 3 14 9-14 9V3z"/>',search:'<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',spark:'<path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/>'};
var I=function(n,c){return '<svg viewBox="0 0 24 24" class="'+(c||'h-4 w-4')+' shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'+ICON[n]+'</svg>';};
var navi=function(i,t,n,act){return '<li><a href="#'+t+'" class="flex items-center gap-3 border-2 '+(act?'border-black bg-black text-white':'border-transparent hover:border-black')+' px-3 py-2 text-sm font-bold">'+I(i)+'<span class="flex-1">'+n+'</span></a></li>';};
var panel=function(ic,id,t,body,extra,bg){return '<section id="'+id+'" class="border-2 border-black bg-white" aria-labelledby="t-'+id+'"><div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 '+(bg||'')+'"><h2 id="t-'+id+'" class="flex items-center gap-2 text-lg font-black">'+I(ic)+t+'</h2>'+(extra||'')+'</div>'+body+'</section>';};
var kpi=function(k,v,d,bar){return '<li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">'+k+'</p><span class="h-2.5 w-2.5 '+bar+'"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">'+v+'</p><p class="mt-3 text-xs font-bold">'+d+'</p></li>';};
var btn=function(t,ic,cls){return '<button type="button" class="inline-flex h-11 items-center gap-2 border-2 border-black px-4 text-sm font-extrabold '+(cls||'bg-white hover:bg-[#FFFBEA]')+'">'+(ic?I(ic):'')+t+'</button>';};
var shell=function(aside,title,kicker,sub,actions,body){return '\n <div class="border-b-2 border-black bg-[#F6F5F1]"><div class="mx-auto grid max-w-[1600px] lg:grid-cols-[240px_minmax(0,1fr)]"><aside class="border-b-2 border-black bg-white p-5 lg:border-b-0 lg:border-r-2">'+aside+'</aside><div class="min-w-0 p-5 lg:p-8"><div class="flex flex-wrap items-end justify-between gap-4"><div><p class="font-mono text-xs font-semibold">'+kicker+'</p><h1 class="mt-1 text-4xl font-black tracking-tight">'+title+'</h1><p class="mt-1 font-semibold">'+sub+'</p></div><div class="flex flex-wrap gap-3">'+actions+'</div></div>'+body+'</div></div></div>\n';};
var P={accueil:'Apercu%20accueil%20Blade.html','labs.index':'apercu-labs.html','labs.essai':'apercu-lab-essai.html','labs.web':'apercu-lab-web.html','cours.index':'apercu-cours.html','cours.cm':'apercu-cours-ipv4-cm.html',etablissements:'apercu-etablissements.html',tarifs:'apercu-tarifs.html',login:'apercu-connexion.html',register:'apercu-inscription.html',examen:'apercu-examen.html',suivi:'apercu-suivi.html',pourquoi:'apercu-pourquoi.html',fonctionnalites:'apercu-fonctionnalites.html',legal:'apercu-legal.html',banque:'apercu-banque.html',ide:'apercu-ide.html',bibliotheque:'apercu-bibliotheque.html',generateur:'apercu-generateur.html','quiz.projection':'apercu-quiz-projection.html','quiz.eleve':'apercu-quiz-eleve.html',devoirs:'apercu-devoirs.html',maison:'apercu-maison.html','td.imprimable':'apercu-td-imprimable.html',cockpit:'apercu-cockpit.html','espace.eleve':'apercu-espace-eleve.html','vie.scolaire':'apercu-vie-scolaire.html','fiche.eleve':'apercu-fiche-eleve.html',correction:'apercu-correction.html','sujet.creer':'apercu-sujet.html',messagerie:'apercu-messagerie.html','export.ent':'apercu-export.html',aide:'apercu-aide.html','cours.fiche':'apercu-cours-fiche.html',paiement:'apercu-paiement.html','paiement.ok':'apercu-paiement-ok.html',facturation:'apercu-facturation.html',academie:'apercu-academie.html'};
var R={};Object.keys(P).forEach(function(k){R[P[k]]=k;});
var toBlade=function(s){return s.replace(/href="([^"#:]+?\.html)(#[^"]*)?"/g,function(m,u,x){return R[u]?'href="{{ route(\''+R[u]+'\') }}'+(x||'')+'"':m;}).replace(/src="(images\/[^"]+|js\/[^"]+)"/g,"src=\"{{ asset('$1') }}\"");};

4
design/_build/pro.js Normal file
View file

@ -0,0 +1,4 @@
var rot=/^(?:[a-z0-9]+:)?-?rotate-(?:1|2|3|6|12|\[[^\]]+\])$/,tr=/^(?:(?:sm|md|lg|xl|2xl):)?-?translate-[xy]-(?:3|4|6|8|10|12|16)$/;var fix=h=>{h=h.replace(/Parce qu’un BTS peut changer une vie\. Il a changé la mienne\./g,'Parce que les études peuvent changer une vie. Elles ont changé la mienne, pourquoi pas la vôtre&nbsp;?');
h=h.replace(/<span[^>]*class="[^"]*(?:etoile flotte|zigzag absolute)[^"]*"[^>]*><\/span>/g,'');
h=h.replace(/class="([^"]*)"/g,(m,c)=>'class="'+c.split(/\s+/).filter(x=>x&&!rot.test(x)&&!tr.test(x)).map(x=>x.replace(/^((?:[a-z]+:)?)shadow-\[(?:6|8|10)px_(?:6|8|10)px_0px_(#[0-9A-Fa-f]+)\]$/,'$1shadow-[4px_4px_0px_$2]').replace(/^xl:text-8xl$/,'xl:text-7xl').replace(/^xl:text-\[7\.5rem\]$/,'xl:text-7xl')).join(' ')+'"');
return h.replace(/'lg:translate-y-4'|'lg:translate-y-6'/g,"''");};

24
design/_build/sy.js Normal file
View file

@ -0,0 +1,24 @@
// Générateur des pages vitrine épurées (utilisé uniquement à la construction)
var SY = (function () {
var INK = '#0b1220', TXT = '#3c4043', MUT = '#5f6368', BLUE = '#0b57d0', HAIR = '#e3e5e8', SOFT = '#f8f9fa';
var P = { accueil: 'Apercu%20accueil%20Blade.html', register: 'apercu-inscription.html', login: 'apercu-connexion.html', tarifs: 'apercu-tarifs.html', etablissements: 'apercu-etablissements.html', fonctionnalites: 'apercu-fonctionnalites.html', 'cours.index': 'apercu-cours.html', 'labs.essai': 'apercu-lab-essai.html', 'td.imprimable': 'apercu-td-imprimable.html', 'cours.fiche': 'apercu-cours-fiche.html', legal: 'apercu-legal.html', pourquoi: 'apercu-pourquoi.html', 'espace.etablissement': 'apercu-espace-etablissement.html', integration: 'apercu-integration.html', aide: 'apercu-aide.html', ressource: 'apercu-ressource.html' };
var mk = function (blade) {
var u = function (r, q) { return blade ? "{{ route('" + r + "') }}" + (q || '') : P[r] + (q || ''); };
var S = {
u: u,
wrap: function (w, inner, pad, bg) { return '<section style="padding:' + (pad || '112px 20px') + ';background:' + (bg || '#fff') + '"><div style="max-width:' + w + 'px;margin:0 auto">' + inner + '</div></section>'; },
kicker: function (t, center) { return '<p style="margin:0;font-size:15px;font-weight:700;color:' + BLUE + (center ? ';text-align:center' : '') + '">' + t + '</p>'; },
h1: function (t) { return '<h1 style="margin:20px 0 0;font-size:clamp(40px,6vw,72px);line-height:1.04;font-weight:800;letter-spacing:-0.03em;color:' + INK + ';text-align:center;text-wrap:balance">' + t + '</h1>'; },
h2: function (t, center) { return '<h2 style="margin:12px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:' + INK + (center ? ';text-align:center' : '') + ';text-wrap:balance">' + t + '</h2>'; },
lead: function (t, center) { return '<p style="margin:24px ' + (center ? 'auto' : '0') + ' 0;max-width:660px;font-size:20px;line-height:1.6;font-weight:500;color:' + TXT + (center ? ';text-align:center' : '') + ';text-wrap:pretty">' + t + '</p>'; },
cta: function (t, href, note) { return '<div style="margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px"><a href="' + href + '" style="display:inline-flex;align-items:center;height:56px;padding:0 32px;border-radius:999px;background:' + BLUE + ';color:#fff;font-size:17px;font-weight:700;text-decoration:none">' + t + '</a>' + (note ? '<p style="margin:0;font-size:14px;font-weight:600;color:' + MUT + '">' + note + '</p>' : '') + '</div>'; },
link: function (t, href) { return '<a href="' + href + '" style="font-size:16px;font-weight:700;color:' + BLUE + ';text-decoration:none">' + t + '</a>'; },
cols: function (items, min) { return '<ul style="margin:56px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(' + (min || 240) + 'px,1fr));gap:56px 48px">' + items.map(function (it) { return '<li>' + (it.k ? '<p style="margin:0;font-size:' + (it.big ? '40px' : '14px') + ';font-weight:800;color:' + BLUE + ';letter-spacing:-0.01em">' + it.k + '</p>' : '') + '<h3 style="margin:' + (it.k ? '12px' : '0') + ' 0 0;font-size:20px;font-weight:800;letter-spacing:-0.01em;color:' + INK + '">' + it.t + '</h3>' + (it.d ? '<p style="margin:10px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:' + TXT + '">' + it.d + '</p>' : '') + (it.a ? '<p style="margin:16px 0 0">' + S.link(it.a[0], it.a[1]) + '</p>' : '') + '</li>'; }).join('') + '</ul>'; },
steps: function (items) { return '<ol style="margin:48px 0 0;padding:0;list-style:none;display:grid;gap:28px">' + items.map(function (s, i) { return '<li style="display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:baseline"><span style="font-size:28px;font-weight:800;color:' + BLUE + ';font-variant-numeric:tabular-nums">' + String(i + 1).padStart(2, '0') + '</span><div><p style="margin:0;font-size:20px;font-weight:700;color:' + INK + '">' + s[0] + '</p>' + (s[1] ? '<p style="margin:6px 0 0;font-size:16px;line-height:1.6;font-weight:500;color:' + TXT + '">' + s[1] + '</p>' : '') + '</div></li>'; }).join('') + '</ol>'; },
frame: function (inner) { return '<div style="margin-top:72px;border-radius:24px;overflow:hidden;background:#fff;border:1px solid ' + HAIR + ';box-shadow:0 1px 2px rgba(15,23,42,.06),0 24px 48px -24px rgba(15,23,42,.18)">' + inner + '</div>'; },
INK: INK, TXT: TXT, MUT: MUT, BLUE: BLUE, HAIR: HAIR, SOFT: SOFT
};
return S;
};
return { mk: mk };
})();

View file

@ -0,0 +1,11 @@
/* @ds-bundle: {"format":4,"namespace":"Modernist_modern","components":[],"sourceHashes":{},"inlinedExternals":[],"unexposedExports":[]} */
(() => {
const __ds_ns = (window.Modernist_modern = window.Modernist_modern || {});
const __ds_scope = {};
(__ds_ns.__errors = __ds_ns.__errors || []);
})();

View file

@ -0,0 +1,252 @@
/* Modernist — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');
:root {
--color-bg: #f3f2f2;
--color-surface: #eae9e9;
--color-text: #201e1d;
--color-accent: #ec3013;
--color-accent-2: #e15b47;
--color-divider: color-mix(in srgb, #201e1d 40%, transparent);
/* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
same step of any role matches the others in visual value. */
--color-neutral-100: #f8f4f4;
--color-neutral-200: #eae7e7;
--color-neutral-300: #d7d3d3;
--color-neutral-400: #bab6b6;
--color-neutral-500: #9b9797;
--color-neutral-600: #7d7979;
--color-neutral-700: #605d5d;
--color-neutral-800: #444141;
--color-neutral-900: #2d2b2b;
--color-accent-100: #fff2ef;
--color-accent-200: #ffe0d9;
--color-accent-300: #ffc4b8;
--color-accent-400: #ff9783;
--color-accent-500: #ff563c;
--color-accent-600: #dd2b0f;
--color-accent-700: #ae1800;
--color-accent-800: #7c1405;
--color-accent-900: #4d170e;
--color-accent-2-100: #fff2ef;
--color-accent-2-200: #ffe0da;
--color-accent-2-300: #ffc4b9;
--color-accent-2-400: #ff9784;
--color-accent-2-500: #ef6853;
--color-accent-2-600: #c94b39;
--color-accent-2-700: #9e3526;
--color-accent-2-800: #71261b;
--color-accent-2-900: #471d16;
--font-heading: "Archivo", system-ui, sans-serif;
--font-heading-weight: 800;
--font-body: "Archivo", system-ui, sans-serif;
--space-1: 4.0px;
--space-2: 8.0px;
--space-3: 12.0px;
--space-4: 16.0px;
--space-6: 24.0px;
--space-8: 32.0px;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
/* Elevation — derived from the ground: soft ink-tinted shadows on a
light theme, a hairline edge + ambient darkness on a dark one. */
--shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
--shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
--shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.grayscale{filter:grayscale(1) contrast(1.08)}
/* ══════════════════════════════════════════════════════════════════════════
Components — built with the tokens above. Plain CSS
on plain HTML: no JavaScript, no build step. Each class is documented in
readme.md and demonstrated in foundations/ and components/.
══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
font-size: 11px; margin-top: var(--space-1);
color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
/* — rules — */
.hr {
height: 2px; border: 0; margin: var(--space-4) 0;
background: var(--color-divider);
}
/* — buttons — */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
cursor: pointer; text-decoration: none;
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
the pair sits side by side in sign-up rows */
background: transparent; border: 1px solid transparent;
padding: var(--space-2) calc(var(--space-3) * 1.2);
border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }
/* — forms — */
.field > label {
display: block; font-size: 12px; margin-bottom: 5px;
color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
background: var(--color-surface);
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
width: 16px; height: 16px; flex: none; border-radius: 50%;
border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
border-color: var(--color-accent); background: var(--color-accent);
box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
display: inline-flex; overflow: hidden;
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* — cards — */
.card {
display: flex; flex-direction: column; gap: var(--space-2);
padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
display: flex; align-items: center; gap: 6px; font-size: 11px;
color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
/* — tags — */
.tag {
display: inline-flex; align-items: center; font-size: 11px;
letter-spacing: 0.02em; padding: 3px 10px;
border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
/* — navigation — */
.nav {
display: flex; align-items: center; gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border-bottom: 2px solid var(--color-divider);
}
.nav-brand {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }
/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: color-mix(in srgb, var(--color-text) 60%, transparent);
padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td {
padding: var(--space-2);
border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
/* — dialog — */
.dialog-backdrop {
position: fixed; inset: 0; display: grid; place-items: center;
padding: var(--space-4);
background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-4); border-radius: var(--radius-lg);
background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

File diff suppressed because one or more lines are too long

68
design/apercu-aide.html Normal file

File diff suppressed because one or more lines are too long

239
design/apercu-banque.html Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

185
design/apercu-cockpit.html Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

390
design/apercu-cours.html Normal file

File diff suppressed because one or more lines are too long

134
design/apercu-devoirs.html Normal file

File diff suppressed because one or more lines are too long

118
design/apercu-eleve.html Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

117
design/apercu-examen.html Normal file
View file

@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mode examen · Syllabus</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="css/syllabus-theme.css">
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black bg-black text-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-3 px-5 py-4 lg:px-10">
<span class="border-2 border-white bg-[#ec3013] px-3 py-1 font-extrabold">MODE EXAMEN</span>
<p class="flex-1 font-bold">Adressage et VLAN · E6 blanc SISR · Léa M.</p>
<p class="flex items-center gap-3"><span class="font-semibold">Temps restant</span><span id="chrono" class="border-2 border-white bg-[#FFD23F] px-3 py-1 font-mono text-2xl font-semibold text-black" role="timer" aria-live="off">59:59</span></p>
</div>
</header>
<div class="border-b border-[#e3e5e8] bg-[#fef7e0]">
<ul class="mx-auto flex max-w-7xl flex-wrap gap-x-6 gap-y-1 px-5 py-2 text-sm font-extrabold lg:px-10">
<li>■ Indices désactivés</li><li>■ Copier-coller bloqué</li><li>■ Sortie d’onglet signalée à l’enseignant</li><li>■ VM sans accès Internet</li><li class="ml-auto">Incidents signalés : <span id="incidents" class="font-mono">0</span></li>
</ul>
</div>
<main class="mx-auto grid max-w-7xl gap-10 px-5 py-10 lg:grid-cols-12 lg:px-10">
<nav class="lg:col-span-3" aria-label="Questions">
<h2 class="text-xl font-extrabold">Questions</h2>
<ol class="mt-4 grid grid-cols-5 gap-2 lg:grid-cols-4">
<li><a href="#q" class="grid h-11 place-items-center border border-[#dadce0] rounded-lg font-mono font-semibold bg-[#0b57d0] text-white">1</a></li>
<li><a href="#q" class="grid h-11 place-items-center border border-[#dadce0] rounded-lg font-mono font-semibold bg-[#0b57d0] text-white">2</a></li>
<li><a href="#q" class="grid h-11 place-items-center border border-[#dadce0] rounded-lg font-mono font-semibold bg-[#0b57d0] text-white">3</a></li>
<li><a href="#q" class="grid h-11 place-items-center border border-[#dadce0] rounded-lg font-mono font-semibold bg-[#0b57d0] text-white">4</a></li>
<li><a href="#q" class="grid h-11 place-items-center border border-[#dadce0] rounded-lg font-mono font-semibold bg-[#fef7e0]" aria-current="step">5</a></li>
<li><a href="#q" class="grid h-11 place-items-center border border-[#dadce0] rounded-lg font-mono font-semibold bg-white">6</a></li>
<li><a href="#q" class="grid h-11 place-items-center border border-[#dadce0] rounded-lg font-mono font-semibold bg-white">7</a></li>
<li><a href="#q" class="grid h-11 place-items-center border border-[#dadce0] rounded-lg font-mono font-semibold bg-[#fce8e6]">8</a></li>
<li><a href="#q" class="grid h-11 place-items-center border border-[#dadce0] rounded-lg font-mono font-semibold bg-white">9</a></li>
<li><a href="#q" class="grid h-11 place-items-center border border-[#dadce0] rounded-lg font-mono font-semibold bg-white">10</a></li>
<li><a href="#q" class="grid h-11 place-items-center border border-[#dadce0] rounded-lg font-mono font-semibold bg-white">11</a></li>
<li><a href="#q" class="grid h-11 place-items-center border border-[#dadce0] rounded-lg font-mono font-semibold bg-white">12</a></li>
</ol>
<ul class="mt-5 grid gap-1 text-sm font-semibold">
<li class="flex items-center gap-2"><span class="h-3 w-3 bg-black"></span> Répondue</li>
<li class="flex items-center gap-2"><span class="h-3 w-3 border border-[#dadce0] rounded-lg bg-[#fce8e6]"></span> Marquée pour revoir</li>
</ul>
<p class="mt-6 border border-[#dadce0] rounded-lg p-3 font-mono text-sm font-semibold">4 / 12 répondues · Partie TP : 0 / 3 étapes</p>
</nav>
<div class="grid gap-10 lg:col-span-9">
<fieldset id="q" class="border border-[#e3e5e8] rounded-2xl bg-white p-6">
<legend class="-ml-2 border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2 font-mono text-sm font-semibold">Question 5 · 1 point</legend>
<p class="text-2xl font-extrabold">Un service de 50 postes doit avoir son propre sous-réseau. Quel masque choisissez-vous ?</p>
<div class="mt-5 grid gap-3 sm:grid-cols-2">
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-mono font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="q5" class="h-5 w-5 accent-black"> /24 · 255.255.255.0</label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-mono font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="q5" class="h-5 w-5 accent-black"> /25 · 255.255.255.128</label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-mono font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="q5" class="h-5 w-5 accent-black"> /26 · 255.255.255.192</label>
<label class="flex cursor-pointer items-center gap-3 border border-[#dadce0] rounded-lg px-4 py-3 font-mono font-semibold hover:bg-[#f8f9fa] has-[:checked]:bg-[#eef0fd]"><input type="radio" name="q5" class="h-5 w-5 accent-black"> /27 · 255.255.255.224</label>
</div>
<div class="mt-6 flex flex-wrap gap-3">
<a href="#q" class="inline-flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-white px-5 py-3 font-extrabold transition-transform hover:bg-[#fef7e0] active:shadow-none">← Précédente</a>
<button type="button" class="inline-flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-white px-5 py-3 font-extrabold transition-transform hover:bg-[#fef7e0] active:shadow-none">Marquer pour revoir</button>
<a href="#q" class="inline-flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-white px-5 py-3 font-extrabold transition-transform hover:bg-[#fef7e0] active:shadow-none bg-[#0b57d0] text-white hover:text-black">Suivante →</a>
</div>
</fieldset>
<section class="border border-[#e3e5e8] rounded-2xl bg-[#13233A] font-mono text-white" aria-labelledby="t-partie">
<div class="flex flex-wrap items-center gap-3 border-b border-[#e3e5e8] bg-[#0d192b] px-4 py-2">
<h2 id="t-partie" class="flex-1 text-sm font-semibold">Partie TP · commutateur-sw1 · console 1</h2>
<span class="border-2 border-white px-2 text-xs">vérification à la remise</span>
</div>
<div class="space-y-1 p-5 text-sm leading-relaxed">
<p class="text-[#FFD23F]">Créez le VLAN 20 « compta » et placez-y l’interface eth2.</p>
<p><span class="text-[#7CF2C0]">root@sw1</span>:~# ip link add link eth0 name eth0.20 type vlan id 20</p>
<p><span class="text-[#7CF2C0]">root@sw1</span>:~# <span class="curseur inline-block h-4 w-2.5 translate-y-0.5 bg-[#fef7e0]"></span></p>
</div>
</section>
<div class="flex flex-wrap items-center gap-5">
<button type="button" id="rendre" class="inline-flex items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013].5.5 active:shadow-none">Rendre ma copie</button>
<p class="font-semibold">La copie est rendue automatiquement à la fin du temps.</p>
</div>
</div>
</main>
<script>
(function () {
var fin = Date.now() + 60 * 60 * 1000 - 1000;
var el = document.getElementById('chrono');
function tic() {
var s = Math.max(0, Math.round((fin - Date.now()) / 1000));
el.textContent = String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0');
if (s < 300) el.classList.add('bg-[#ec3013]', 'text-white');
}
tic(); setInterval(tic, 1000);
var inc = 0, spot = document.getElementById('incidents'), last = 0;
function signal() { if (Date.now() - last < 800) return; last = Date.now(); inc++; spot.textContent = inc; spot.parentNode.classList.add('bg-[#ec3013]', 'text-white', 'px-2'); }
document.addEventListener('visibilitychange', function () { if (document.hidden) signal(); });
window.addEventListener('blur', signal);
document.documentElement.addEventListener('mouseleave', signal);
['copy', 'cut', 'paste'].forEach(function (ev) { document.addEventListener(ev, function (e) { e.preventDefault(); signal(); }); });
document.getElementById('rendre').addEventListener('click', function () {
if (confirm('Rendre la copie ? Vous ne pourrez plus la modifier.')) {
this.textContent = 'Copie rendue ✓';
this.disabled = true;
}
});
})();
</script>
</body>
</html>

72
design/apercu-export.html Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

263
design/apercu-ide.html Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

138
design/apercu-lab-web.html Normal file

File diff suppressed because one or more lines are too long

139
design/apercu-labs.html Normal file

File diff suppressed because one or more lines are too long

124
design/apercu-legal.html Normal file

File diff suppressed because one or more lines are too long

123
design/apercu-maison.html Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

103
design/apercu-paiement.html Normal file

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz flash · Syllabus</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="css/syllabus-theme.css">
</head>
<body class="min-h-screen bg-[#eef0fd] font-display text-black antialiased">
<main class="mx-auto flex min-h-screen max-w-md flex-col gap-6 px-5 py-8">
<p class="self-start border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">Vue élève · téléphone ou PC</p>
<section id="e-login" class="border border-[#e3e5e8] rounded-2xl bg-white p-6">
<div class="min-w-0 flex-1"><p data-public="E" class="mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#0b5e3c]">Pour les élèves</p>
<h1 class="text-4xl font-extrabold leading-none tracking-tight">Quiz flash</h1></div>
<form id="f-login" class="mt-6 grid gap-4">
<label class="grid gap-2 font-extrabold">Code du quiz<input required value="K7Q4" maxlength="4" class="w-full border border-[#e3e5e8] rounded-2xl px-4 py-3 font-mono text-3xl font-semibold uppercase tracking-widest focus:bg-[#f8f9fa] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Identifiant<input required value="lea.m.sio1-a" autocomplete="username" class="w-full border border-[#e3e5e8] rounded-2xl px-4 py-3 font-mono text-lg font-semibold focus:bg-[#f8f9fa] focus:outline-none"></label>
<label class="grid gap-2 font-extrabold">Code secret<input required type="password" value="••••••" autocomplete="current-password" class="w-full border border-[#e3e5e8] rounded-2xl px-4 py-3 font-mono text-lg font-semibold focus:bg-[#f8f9fa] focus:outline-none"></label>
<button type="submit" class="min-h-[56px] border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-left text-xl font-extrabold text-white">Rejoindre →</button>
</form>
</section>
<section id="e-attente" hidden class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-6 text-center">
<p class="text-3xl font-extrabold">Tu es connectée, Léa&nbsp;!</p>
<p class="mt-3 text-lg font-bold">Regarde l’écran. La question arrive…</p>
<button type="button" id="e-go" class="mt-6 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-bold underline">Aperçu : afficher la question</button>
</section>
<section id="e-question" hidden>
<p class="font-mono font-semibold">Question 3 / 5 · la question est affichée au tableau</p>
<div class="mt-4 grid grid-cols-2 gap-4">
<button type="button" data-choix="0" class="grid aspect-square place-items-center border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] font-mono text-6xl font-semibold active:shadow-none">A</button>
<button type="button" data-choix="1" class="grid aspect-square place-items-center border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] font-mono text-6xl font-semibold active:shadow-none">B</button>
<button type="button" data-choix="2" class="grid aspect-square place-items-center border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] font-mono text-6xl font-semibold active:shadow-none">C</button>
<button type="button" data-choix="3" class="grid aspect-square place-items-center border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] font-mono text-6xl font-semibold active:shadow-none">D</button>
</div>
</section>
<section id="e-envoye" hidden class="border border-[#e3e5e8] rounded-2xl bg-white p-6">
<p class="text-3xl font-extrabold">Réponse <span id="e-lettre"></span> envoyée ✓</p>
<p class="mt-2 text-lg font-bold">Attends la correction au tableau.</p>
</section>
</main>
<script>
(function () {
var $ = function (id) { return document.getElementById(id); };
$('f-login').addEventListener('submit', function (e) { e.preventDefault(); $('e-login').hidden = true; $('e-attente').hidden = false; });
$('e-go').addEventListener('click', function () { $('e-attente').hidden = true; $('e-question').hidden = false; });
document.querySelectorAll('[data-choix]').forEach(function (b) { b.addEventListener('click', function () { $('e-lettre').textContent = b.textContent.trim(); $('e-question').hidden = true; $('e-envoye').hidden = false; }); });
})();
</script>
</body>
</html>

View file

@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz flash · projection · Syllabus</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="css/syllabus-theme.css">
</head>
<body class="min-h-screen bg-white font-display text-black antialiased">
<div id="scene" class="flex min-h-screen flex-col">
<header class="flex flex-wrap items-center gap-4 border-b-4 border-black bg-black px-6 py-3 text-white">
<span class="border-2 border-white bg-[#FFD23F] px-3 py-1 font-extrabold text-black">QUIZ FLASH</span>
<p class="flex-1 font-bold">BTS SIO 1 · Groupe A · ls, chmod, grep, ip, ping</p>
<p class="font-mono"><span id="p-count">0</span> / 24 connectés</p>
<button type="button" id="plein" class="border-2 border-white px-3 py-1 font-extrabold hover:bg-white hover:text-black">Plein écran</button>
</header>
<section id="s-attente" class="grid flex-1 gap-8 p-8 lg:grid-cols-12">
<div class="flex flex-col justify-center lg:col-span-7">
<p class="text-3xl font-extrabold">Sur ton téléphone ou ton PC, va sur</p>
<p class="mt-4 inline-block self-start border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] px-5 py-3 font-mono text-5xl font-semibold">syllabus.fr/quiz</p>
<p class="mt-10 text-3xl font-extrabold">et entre le code</p>
<p class="mt-4 inline-block self-start border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] px-6 py-4 font-mono text-8xl font-semibold tracking-widest">K7Q4</p>
<p class="mt-10 text-xl font-bold">Connecte-toi avec ton identifiant Syllabus.</p>
</div>
<div class="flex flex-col border border-[#e3e5e8] rounded-2xl bg-white lg:col-span-5">
<div class="flex items-center justify-between border-b border-[#e3e5e8] bg-[#eef0fd] px-5 py-3"><p class="text-xl font-extrabold">Présences</p><p class="font-mono font-semibold"><span id="p-count2">0</span> / 24</p></div>
<ul id="presences" class="grid flex-1 content-start grid-cols-2 gap-2 overflow-y-auto p-4 text-sm font-bold sm:grid-cols-3">
<li data-eleve="Léa M." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Léa M.</li>
<li data-eleve="Yanis B." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Yanis B.</li>
<li data-eleve="Nora Kaci" class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Nora Kaci</li>
<li data-eleve="Tom R." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Tom R.</li>
<li data-eleve="Inès D." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Inès D.</li>
<li data-eleve="Sami L." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Sami L.</li>
<li data-eleve="Chloé P." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Chloé P.</li>
<li data-eleve="Adam F." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Adam F.</li>
<li data-eleve="Maël G." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Maël G.</li>
<li data-eleve="Jade T." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Jade T.</li>
<li data-eleve="Hugo M." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Hugo M.</li>
<li data-eleve="Lina G." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Lina G.</li>
<li data-eleve="Rayan F." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Rayan F.</li>
<li data-eleve="Emma B." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Emma B.</li>
<li data-eleve="Noah H." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Noah H.</li>
<li data-eleve="Sarah R." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Sarah R.</li>
<li data-eleve="Ilyes M." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Ilyes M.</li>
<li data-eleve="Manon L." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Manon L.</li>
<li data-eleve="Lucas M." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Lucas M.</li>
<li data-eleve="Zoé D." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Zoé D.</li>
<li data-eleve="Enzo L." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Enzo L.</li>
<li data-eleve="Camille B." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Camille B.</li>
<li data-eleve="Nathan F." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Nathan F.</li>
<li data-eleve="Anaïs L." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Anaïs L.</li>
</ul>
<div class="border-t border-[#e3e5e8] p-4">
<p id="manquants" class="font-bold">En attente des connexions…</p>
<button type="button" id="demarrer" class="mt-4 w-full border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-left text-xl font-extrabold text-white hover:bg-[#ec3013]">Démarrer le quiz →</button>
</div>
</div>
</section>
<section id="s-question" hidden class="flex flex-1 flex-col p-8">
<div class="flex flex-wrap items-center gap-4">
<p class="border border-[#e3e5e8] rounded-2xl bg-white px-4 py-2 font-mono text-xl font-semibold">Question <span id="q-num">1</span> / 5</p>
<div class="h-6 flex-1 border border-[#e3e5e8] rounded-2xl bg-white"><div id="q-timer" class="h-full bg-[#ec3013]" style="width:100%"></div></div>
<p class="font-mono text-3xl font-semibold"><span id="q-sec">20</span> s</p>
</div>
<div class="min-w-0 flex-1"><p data-public="P" class="mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#1d3fa8]">Pour les profs</p>
<h1 id="q-texte" class="mt-10 max-w-5xl text-5xl font-extrabold leading-tight tracking-tight lg:text-7xl"></h1></div>
<ol id="q-reps" class="mt-10 grid flex-1 content-start gap-5 md:grid-cols-2"></ol>
<div class="mt-8 flex flex-wrap items-center gap-5">
<p class="text-2xl font-extrabold"><span id="q-rep">0</span> / <span id="q-pres">0</span> ont répondu</p>
<p id="q-expl" hidden class="flex-1 border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] px-5 py-3 text-xl font-bold"></p>
<button type="button" id="suivant" class="ml-auto border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-xl font-extrabold text-white">Afficher la réponse →</button>
</div>
</section>
<section id="s-fin" hidden class="grid flex-1 content-center gap-8 p-8 lg:grid-cols-3">
<div class="border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-8 lg:col-span-2">
<p class="text-2xl font-extrabold">Quiz terminé&nbsp;!</p>
<p class="mt-4 font-mono text-8xl font-semibold"><span id="f-score">0</span> %</p>
<p class="mt-2 text-2xl font-bold">de bonnes réponses pour la classe</p>
<p id="f-rate" class="mt-6 border-t border-[#e3e5e8] pt-4 text-xl font-bold"></p>
</div>
<div class="border border-[#e3e5e8] rounded-2xl bg-white p-6">
<p class="text-xl font-extrabold">Absents au quiz</p>
<ul class="mt-3 grid gap-2 font-bold"><li class="border border-[#dadce0] rounded-lg bg-[#FFE4DF] px-3 py-1">Inès D.</li><li class="border border-[#dadce0] rounded-lg bg-[#FFE4DF] px-3 py-1">Hugo M.</li><li class="border border-[#dadce0] rounded-lg bg-[#FFE4DF] px-3 py-1">Jade T.</li></ul>
<p class="mt-4 font-semibold">Résultats enregistrés dans le suivi de la classe.</p>
<a href="apercu-banque.html" class="mt-5 inline-block border border-[#e3e5e8] rounded-2xl bg-black px-4 py-2 font-extrabold text-white">Retour à la banque</a>
</div>
</section>
</div>
<script>
(function () {
var Q = [["Que fait ls -a en plus de ls ?",["Affiche les fichiers cachés","Affiche les droits","Affiche la taille en Ko","N’affiche que les dossiers"],0,"L’option -a (all) affiche aussi les fichiers qui commencent par un point, comme .bashrc."],["chmod 750 script.sh donne au groupe…",["Lecture et exécution","Lecture seule","Tous les droits","Aucun droit"],0,"7 = rwx pour le propriétaire, 5 = r-x pour le groupe, 0 = rien pour les autres."],["Quelle commande cherche « erreur » dans app.log ?",["find erreur app.log","grep erreur app.log","cat -s erreur app.log","ls erreur app.log"],1,"grep affiche les lignes d’un fichier qui contiennent un motif."],["À quoi sert ip a ?",["Pinger une machine","Ajouter une route","Afficher les adresses des interfaces","Redémarrer le réseau"],2,"ip a (ip address) liste les interfaces réseau et leurs adresses IP."],["ping -c 4 8.8.8.8 envoie…",["Pendant 4 secondes","4 paquets puis s’arrête","À 4 machines","4 fois plus vite"],1,"L’option -c (count) fixe le nombre de paquets envoyés."]], COL = ["bg-[#fce8e6]","bg-[#e6f4ea]","bg-[#fef7e0]","bg-[#eef0fd]"], ABS = ["Inès D.","Hugo M.","Jade T."], L = 'ABCD';
var eleves = Array.prototype.slice.call(document.querySelectorAll('[data-eleve]')), connectes = 0, i = -1, phase = 'q', tic, bons = 0, total = 0, rate = [];
var $ = function (id) { return document.getElementById(id); };
var file = eleves.filter(function (li) { return ABS.indexOf(li.dataset.eleve) === -1; });
file.sort(function () { return Math.random() - .5; });
var joins = setInterval(function () {
var li = file.shift(); if (!li) { clearInterval(joins); return; }
li.classList.remove('opacity-40'); li.classList.add('bg-[#e6f4ea]'); li.querySelector('[data-pastille]').classList.replace('bg-white', 'bg-black');
connectes++; $('p-count').textContent = $('p-count2').textContent = connectes;
var m = eleves.filter(function (e) { return e.classList.contains('opacity-40'); }).map(function (e) { return e.dataset.eleve; });
$('manquants').innerHTML = m.length ? '<span class="bg-[#ec3013] px-1 text-white">Manquants : ' + m.length + '</span> ' + m.join(', ') : 'Tout le monde est là ✓';
$('demarrer').textContent = 'Démarrer le quiz (' + connectes + ' / ' + eleves.length + ') →';
}, 350);
function question() {
i++; phase = 'q';
if (i >= Q.length) return fin();
var q = Q[i], t = 20, rep = 0;
$('q-num').textContent = i + 1; $('q-texte').textContent = q[0]; $('q-pres').textContent = connectes; $('q-rep').textContent = 0;
$('q-expl').hidden = true; $('suivant').textContent = 'Afficher la réponse →';
$('q-reps').innerHTML = q[1].map(function (r, k) {
return '<li data-r class="flex items-center gap-5 border border-[#e3e5e8] rounded-2xl ' + COL[k] + ' p-6 text-3xl font-extrabold"><span class="grid h-14 w-14 shrink-0 place-items-center border border-[#e3e5e8] rounded-2xl bg-white font-mono">' + L[k] + '</span><span class="flex-1">' + r + '</span><span data-pc class="font-mono text-2xl" hidden></span></li>';
}).join('');
clearInterval(tic);
tic = setInterval(function () {
t--; $('q-sec').textContent = Math.max(0, t); $('q-timer').style.width = Math.max(0, t / 20 * 100) + '%';
if (rep < connectes && Math.random() < .55) { rep = Math.min(connectes, rep + 1 + Math.floor(Math.random() * 3)); $('q-rep').textContent = rep; }
if (t <= 0) reponse();
}, 1000);
}
function reponse() {
clearInterval(tic); phase = 'r';
var q = Q[i], ok = q[2], n = Number($('q-rep').textContent) || connectes, part = [0, 0, 0, 0];
var pBon = .45 + Math.random() * .45; part[ok] = Math.round(n * pBon);
var reste = n - part[ok]; [0, 1, 2, 3].filter(function (k) { return k !== ok; }).forEach(function (k, j, arr) { var v = j === arr.length - 1 ? reste : Math.floor(Math.random() * (reste + 1)); part[k] = v; reste -= v; });
bons += part[ok]; total += n; rate.push([i + 1, Math.round(pBon * 100)]);
document.querySelectorAll('#q-reps [data-r]').forEach(function (li, k) {
var pc = li.querySelector('[data-pc]'); pc.hidden = false; pc.textContent = part[k] + ' élève' + (part[k] > 1 ? 's' : '');
if (k !== ok) li.classList.add('opacity-40'); else li.classList.add('outline', 'outline-8', 'outline-black');
});
$('q-expl').hidden = false; $('q-expl').textContent = '✓ ' + q[3];
$('suivant').textContent = i === Q.length - 1 ? 'Voir le bilan →' : 'Question suivante →';
}
function fin() {
$('s-question').hidden = true; $('s-fin').hidden = false;
$('f-score').textContent = Math.round(bons / Math.max(1, total) * 100);
var pire = rate.slice().sort(function (a, b) { return a[1] - b[1]; })[0];
$('f-rate').textContent = 'À revoir en cours : question ' + pire[0] + ' (' + pire[1] + ' % de réussite).';
}
$('demarrer').addEventListener('click', function () { clearInterval(joins); $('s-attente').hidden = true; $('s-question').hidden = false; question(); });
$('suivant').addEventListener('click', function () { phase === 'q' ? reponse() : question(); });
document.addEventListener('keydown', function (e) { if ((e.key === 'ArrowRight' || e.key === ' ') && !$('s-question').hidden) { e.preventDefault(); $('suivant').click(); } });
$('plein').addEventListener('click', function () { document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen && document.documentElement.requestFullscreen(); });
})();
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

221
design/apercu-suivi.html Normal file

File diff suppressed because one or more lines are too long

66
design/apercu-sujet.html Normal file

File diff suppressed because one or more lines are too long

70
design/apercu-tarifs.html Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

190
design/apercu-visio.html Normal file

File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show more