Paillasse/design/_backup-ludique/apercu-cours.html
2026-10-06 23:28:18 +02:00

456 lines
108 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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