Paillasse/design/_backup-ludique/apercu-cours.html

457 lines
108 KiB
HTML
Raw Permalink Normal View History

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