2026-10-08 02:01:58 +02:00
<! DOCTYPE html >
< html lang = " fr " >
< head >
< meta charset = " utf-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1 " >
< title > IDE en ligne · Syllabus </ title >
2026-10-09 21:07:25 +02:00
{{ Vite :: fonts () }}
2026-10-08 02:01:58 +02:00
@ vite ([ 'resources/css/app.css' , 'resources/js/app.js' ])
< style >
. etoile { clip - path : polygon ( 50 % 0 , 61 % 35 % , 98 % 35 % , 68 % 57 % , 79 % 91 % , 50 % 70 % , 21 % 91 % , 32 % 57 % , 2 % 35 % , 39 % 35 % ); }
. zigzag { background : linear - gradient ( 135 deg , 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 , 0 deg )); } 50 % { transform : translateY ( - 10 px ) rotate ( var ( -- r , 0 deg )); } }
. flotte { animation : flotte 6 s ease - in - out infinite ; }
@ keyframes clignote { 50 % { opacity : 0 ; } }
. curseur { animation : clignote 1 s steps ( 1 ) infinite ; }
@ media ( prefers - reduced - motion : reduce ) { . flotte , . curseur { animation : none ; } }
</ style >
2026-10-09 21:07:25 +02:00
< link rel = " stylesheet " href = " { { asset('vendor/xterm/xterm.css') }} " >
< script defer src = " { { asset('vendor/xterm/xterm.js') }} " ></ script >
< script defer src = " { { asset('vendor/xterm/addon-fit.js') }} " ></ script >
2026-10-08 02:01:58 +02:00
< script defer src = " { { asset('js/paillasse-terminal.js') }} " ></ script >
2026-10-09 21:07:25 +02:00
< link rel = " stylesheet " href = " { { asset('vendor/codemirror/codemirror.css') }} " >
< script defer src = " { { asset('vendor/codemirror/codemirror.js') }} " ></ script >
< script defer src = " { { asset('vendor/codemirror/mode/python.js') }} " ></ script >
< script defer src = " { { asset('vendor/codemirror/mode/sql.js') }} " ></ script >
< script defer src = " { { asset('vendor/codemirror/mode/xml.js') }} " ></ script >
< script defer src = " { { asset('vendor/codemirror/mode/javascript.js') }} " ></ script >
< script defer src = " { { asset('vendor/codemirror/mode/css.js') }} " ></ script >
< script defer src = " { { asset('vendor/codemirror/mode/htmlmixed.js') }} " ></ script >
< script defer src = " { { asset('vendor/codemirror/mode/shell.js') }} " ></ script >
< script defer src = " { { asset('vendor/codemirror/matchbrackets.js') }} " ></ script >
< script defer src = " { { asset('vendor/codemirror/closebrackets.js') }} " ></ script >
2026-10-08 02:01:58 +02:00
< style >
. CodeMirror { height : 100 % ; font - family : " IBM Plex Mono " , monospace ; font - size : 15 px ; background : #13233A; color: #E8EDF5; }
. CodeMirror - gutters { background : #0D192B; border-right: 4px solid #000; }
. CodeMirror - linenumber { color : #6B7F99; }
. CodeMirror - cursor { border - left : 2 px solid #FFD23F; }
. CodeMirror - selected , . CodeMirror - focused . CodeMirror - selected { background : #2B4A73 !important; }
. CodeMirror - matchingbracket { color : #FFD23F !important; text-decoration: underline; }
. cm - s - default . cm - keyword { color : #FF6FB5; font-weight: 600; }
. cm - s - default . cm - string { color : #7CF2C0; }
. cm - s - default . cm - number { color : #FFD23F; }
. cm - s - default . cm - comment { color : #8DA2BF; font-style: italic; }
. cm - s - default . cm - def , . cm - s - default . cm - variable - 2 { color : #A9C6FF; }
. cm - s - default . cm - builtin { color : #7CE3F2; }
. cm - s - default . cm - variable , . cm - s - default . cm - property { color : #E8EDF5; }
. cm - s - default . cm - operator { color : #FFD23F; }
. cm - s - default . cm - tag { color : #FF6FB5; } .cm-s-default .cm-attribute { color: #FFD23F; } .cm-s-default .cm-bracket { color: #9FB0C8; }
</ style >
< link rel = " stylesheet " href = " { { asset('css/syllabus-theme.css') }} " >
</ head >
< body class = " bg-white font-display text-black antialiased " >
2026-10-09 21:07:25 +02:00
@ include ( 'partials.apercu' )
2026-10-08 02:01:58 +02:00
< header style = " position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #e3e5e8 " >
< nav aria - label = " Navigation principale " style = " position:relative;max-width:1200px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px " >
< a href = " { { route('accueil') }} " aria - label = " Syllabus, accueil " style = " display:flex;align-items:center;gap:0;text-decoration:none " >< img src = " { { asset('images/logo-syllabus-icone.png') }} " alt = " " style = " height:32px;width:auto;display:block " >< span style = " font-family:Mulish,system-ui,sans-serif;font-weight:800;font-size:19px;color:#111827;letter-spacing:-0.01em;margin-left:-14px;position:relative " > Syllabus </ span ></ a >
< ul style = " margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;flex:1;line-height:1.5 " >< li >< details class = " group " >< summary @ if ( request () -> routeIs ( 'fonctionnalites' ) || request () -> routeIs ( 'ressource' )) aria - current = " page " @ endif style = " cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;height:36px;margin:-6px -12px;padding:0 12px;border-radius:999px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220 " class = " hover:bg-[#f1f3f4] group-open:bg-[#e8f0fe] group-open:text-[#0b57d0] aria-[current=page]:text-[#0b57d0] [&::-webkit-details-marker]:hidden " > Fonctionnalités < svg aria - hidden = " true " viewBox = " 0 0 16 16 " width = " 16 " height = " 16 " class = " transition-transform duration-200 group-open:rotate-180 " style = " flex:none;opacity:.7 " >< path d = " M4 6l4 4 4-4 " fill = " none " stroke = " currentColor " stroke - width = " 1.8 " stroke - linecap = " round " stroke - linejoin = " round " /></ svg ></ summary >
< div style = " position:absolute;left:20px;right:20px;top:100%;margin-top:4px;z-index:50;max-width:1160px;margin-left:auto;margin-right:auto;box-sizing:border-box;max-height:calc(100vh - 90px);overflow:auto;border-radius:20px;background:#fff;border:1px solid #e3e5e8;box-shadow:0 24px 48px -16px rgba(15,23,42,.22) " >
< div class = " grid grid-cols-2 sm:grid-cols-3 min-[1100px]:grid-cols-5 [&>div:last-child]:col-span-2 min-[1100px]:[&>div:last-child]:col-span-1 " style = " gap:1px;background:#e3e5e8 " >< div style = " padding:22px 20px 20px;min-width:0;background:#fff " >< p style = " margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220 " >< span aria - hidden = " true " style = " flex:none;width:10px;height:10px;border-radius:3px;background:#0b57d0 " ></ span > Piloter la classe </ p >< p style = " margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368 " > En direct et au quotidien </ p >< ul style = " margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px " >< li >< a href = " { { route('ressource') }}?outil=cockpit " style = " display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:bg-[#f1f3f4] hover:text-[#0b57d0] " > Tableau de bord prof </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=visio " style = " display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:bg-[#f1f3f4] hover:text-[#0b57d0] " > Visio de classe </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=espace-eleve " style = " display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:bg-[#f1f3f4] hover:text-[#0b57d0] " > Espace élève </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=fiche-eleve " style = " display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:bg-[#f1f3f4] hover:text-[#0b57d0] " > Fiche élève </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=messagerie " style = " display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:bg-[#f1f3f4] hover:text-[#0b57d0] " > Messagerie </ a ></ li ></ ul ></ div >< div style = " padding:22px 20px 20px;min-width:0;background:#fff " >< p style = " margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220 " >< span aria - hidden = " true " style = " flex:none;width:10px;height:10px;border-radius:3px;background:#137333 " ></ span > Apprendre </ p >< p style = " margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368 " > Cours , TP et code </ p >< ul style = " margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px " >< li >< a href = " { { route('ressource') }}?outil=cours " style = " display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:bg-[#f1f3f4] hover:text-[#0b57d0] " > Cours gratuits </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=labs " style = " display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:bg-[#f1f3f4] hover:text-[#0b57d0] " > TP sur machine Linux </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=lab-web " style = " display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:bg-[#f1f3f4] hover:text-[#0b57d0] " > Lab web </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=ide " style = " display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:bg-[#f1f3f4] hover:text-[#0b57d0] " > Éditeur de code en ligne </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=maison " style = " display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:bg-[#f1f3f4] hover:text-[#0b57d0] " > Ressources à la maison </ a ></ li ></ ul ></ div >< div style
< div style = " position:sticky;bottom:0;padding:14px 24px;border-top:1px solid #e3e5e8;background:#f8f9fa;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px " >< span style = " font-size:14px;font-weight:500;color:#5f6368 " > 24 outils , chacun avec sa présentation et sa démo </ span >< a href = " { { route('fonctionnalites') }} " style = " font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none " > Voir toutes les fonctionnalités → </ a ></ div >
</ div ></ details ></ li >< li >< a href = " { { route('cours.index') }} " @ if ( request () -> routeIs ( 'cours.index' )) aria - current = " page " @ endif style = " display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0] " > Cours </ a ></ li >< li >< a href = " { { route('tarifs') }} " @ if ( request () -> routeIs ( 'tarifs' )) aria - current = " page " @ endif style = " display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0] " > Tarifs </ a ></ li ></ ul >
< div style = " display:flex;align-items:center;gap:20px " >
< a href = " { { route('login') }} " style = " font-size:15px;font-weight:600;color:#0b1220;text-decoration:none " class = " hover:text-[#0b57d0] " > Se connecter </ a >
< a href = " { { route('register') }} " style = " display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:#0b57d0;color:#fff;font-size:15px;font-weight:700;text-decoration:none " > Créer une classe </ a >
</ div >
</ nav >
</ header >
< main >
< section class = " border-b border-[#e3e5e8] bg-white " >
< div class = " mx-auto flex max-w-[1500px] flex-wrap items-end gap-6 px-5 pb-8 pt-10 lg:px-8 " >
< div class = " flex-1 " >
< p class = " inline-block border border-[#dadce0] rounded-lg bg-[#fef7e0] px-3 py-1 text-sm font-bold " > IDE en ligne </ p >
< div class = " min-w-0 flex-1 " >< p data - public = " E " class = " mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#0b5e3c] " > Pour les élèves </ p >
< h1 class = " mt-5 text-5xl font-extrabold leading-[0.95] tracking-tight sm:text-6xl " > Coder , exécuter , vérifier . Dans le navigateur .</ h1 ></ div >
< p class = " mt-4 max-w-3xl text-lg font-semibold " > Python , SQL , HTML / CSS / JavaScript et Linux . Le code s’ vraiment , les tests disent tout de suite si c’ juste . Ton code est gardé sur cet appareil .</ p >
</ div >
</ div >
</ section >
< div class = " mx-auto grid max-w-[1500px] gap-6 px-5 py-8 lg:grid-cols-12 lg:px-8 " >
< nav class = " lg:col-span-2 " aria - label = " Exercices " >
< div class = " grid gap-5 lg:sticky lg:top-4 " >
< div >
< p class = " border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2 py-1 font-mono text-sm font-semibold " > Python </ p >
< ul class = " mt-2 grid gap-1 " >< li >< button type = " button " data - ex = " py-pair " class = " w-full border border-[#dadce0] rounded-lg bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#f8f9fa] aria-[current=true]:bg-black aria-[current=true]:text-white " >< span data - etat class = " mr-1 font-mono " ></ span > Nombre pair ou impair </ button ></ li >< li >< button type = " button " data - ex = " py-somme " class = " w-full border border-[#dadce0] rounded-lg bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#f8f9fa] aria-[current=true]:bg-black aria-[current=true]:text-white " >< span data - etat class = " mr-1 font-mono " ></ span > Somme d’ liste </ button ></ li >< li >< button type = " button " data - ex = " py-voyelles " class = " w-full border border-[#dadce0] rounded-lg bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#f8f9fa] aria-[current=true]:bg-black aria-[current=true]:text-white " >< span data - etat class = " mr-1 font-mono " ></ span > Compter les voyelles </ button ></ li ></ ul >
</ div >
< div >
< p class = " border border-[#dadce0] rounded-lg bg-[#eef0fd] px-2 py-1 font-mono text-sm font-semibold " > SQL </ p >
< ul class = " mt-2 grid gap-1 " >< li >< button type = " button " data - ex = " sql-select " class = " w-full border border-[#dadce0] rounded-lg bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#f8f9fa] aria-[current=true]:bg-black aria-[current=true]:text-white " >< span data - etat class = " mr-1 font-mono " ></ span > Filtrer et trier </ button ></ li >< li >< button type = " button " data - ex = " sql-group " class = " w-full border border-[#dadce0] rounded-lg bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#f8f9fa] aria-[current=true]:bg-black aria-[current=true]:text-white " >< span data - etat class = " mr-1 font-mono " ></ span > Moyenne par classe </ button ></ li ></ ul >
</ div >
< div >
< p class = " border border-[#dadce0] rounded-lg bg-[#fce8e6] px-2 py-1 font-mono text-sm font-semibold " > Web </ p >
< ul class = " mt-2 grid gap-1 " >< li >< button type = " button " data - ex = " web-bouton " class = " w-full border border-[#dadce0] rounded-lg bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#f8f9fa] aria-[current=true]:bg-black aria-[current=true]:text-white " >< span data - etat class = " mr-1 font-mono " ></ span > Un bouton qui répond </ button ></ li ></ ul >
</ div >
< div >
< p class = " border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2 py-1 font-mono text-sm font-semibold " > Linux </ p >
< ul class = " mt-2 grid gap-1 " >< li >< button type = " button " data - ex = " bash-tp " class = " w-full border border-[#dadce0] rounded-lg bg-white px-2 py-2 text-left text-sm font-bold hover:bg-[#f8f9fa] aria-[current=true]:bg-black aria-[current=true]:text-white " >< span data - etat class = " mr-1 font-mono " ></ span > Préparer son dossier de TP </ button ></ li ></ ul >
</ div >
</ div >
</ nav >
< section class = " flex min-w-0 flex-col border border-[#e3e5e8] rounded-2xl bg-[#13233A] lg:col-span-7 " aria - label = " Éditeur " >
< div class = " flex flex-wrap items-center gap-3 border-b border-[#e3e5e8] bg-black px-3 py-2 text-white " >
< span class = " flex gap-1.5 " >< span class = " h-3 w-3 bg-[#ec3013] " ></ span >< span class = " h-3 w-3 bg-[#fef7e0] " ></ span >< span class = " h-3 w-3 bg-[#e6f4ea] " ></ span ></ span >
< span id = " fichier " class = " font-mono text-sm font-semibold " > main . py </ span >
< span class = " ml-auto flex flex-wrap gap-2 " >
< button type = " button " id = " b-reset " class = " border-2 border-white px-3 py-1 text-sm font-extrabold hover:bg-white hover:text-black " > Réinitialiser </ button >
< button type = " button " id = " b-run " class = " border-2 border-white bg-[#e6f4ea] px-3 py-1 text-sm font-extrabold text-black " > ▶ Exécuter </ button >
< button type = " button " id = " b-test " class = " border-2 border-white bg-[#fef7e0] px-3 py-1 text-sm font-extrabold text-black " > ✓ Vérifier </ button >
</ span >
</ div >
< div id = " editeur " class = " h-[440px] " ></ div >
< div class = " border-t border-[#e3e5e8] bg-[#0D192B] " >
< div class = " flex gap-0 border-b border-[#e3e5e8] text-sm font-extrabold " role = " tablist " >
< button type = " button " role = " tab " data - onglet = " sortie " aria - selected = " true " class = " border-r border-[#e3e5e8] px-4 py-2 text-white aria-selected:bg-[#fef7e0] aria-selected:text-black " > Sortie </ button >
< button type = " button " role = " tab " data - onglet = " apercu " aria - selected = " false " class = " border-r border-[#e3e5e8] px-4 py-2 text-white aria-selected:bg-[#fef7e0] aria-selected:text-black " > Aperçu web </ button >
< button type = " button " role = " tab " data - onglet = " terminal " aria - selected = " false " class = " border-r border-[#e3e5e8] px-4 py-2 text-white aria-selected:bg-[#fef7e0] aria-selected:text-black " > Terminal </ button >
</ div >
< pre id = " p-sortie " data - panneau = " sortie " class = " h-[220px] overflow-auto whitespace-pre-wrap p-4 font-mono text-sm text-[#E8EDF5] " > Clique sur ▶ Exécuter pour lancer ton code .</ pre >
2026-10-09 21:44:02 +02:00
< div data - panneau = " apercu " hidden class = " h-[220px] bg-white " >< iframe id = " p-apercu " title = " Aperçu de la page " class = " h-full w-full " sandbox = " allow-scripts " ></ iframe ></ div >
2026-10-08 02:01:58 +02:00
< div data - panneau = " terminal " hidden class = " h-[220px] p-2 " >< div id = " p-terminal " class = " h-full " ></ div ></ div >
</ div >
</ section >
< aside class = " grid content-start gap-6 lg:col-span-3 " >
< section class = " border border-[#e3e5e8] rounded-2xl bg-white p-5 " aria - labelledby = " c-titre " >
< p id = " c-cursus " class = " font-mono text-xs font-semibold " ></ p >
< h2 id = " c-titre " class = " mt-1 text-2xl font-extrabold leading-tight " ></ h2 >
< p id = " c-consigne " class = " mt-3 font-medium leading-relaxed [&_code]:border-2 [&_code]:border-black [&_code]:bg-[#fef7e0] [&_code]:px-1 [&_code]:font-mono [&_code]:text-sm " ></ p >
</ section >
< section class = " border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-5 " aria - labelledby = " t-tests " >
< h2 id = " t-tests " class = " text-xl font-extrabold " > Tests </ h2 >
< ul id = " tests " class = " mt-3 grid gap-2 font-mono text-sm font-semibold " >< li > Clique sur ✓ Vérifier .</ li ></ ul >
< p id = " score " hidden class = " mt-4 border border-[#e3e5e8] rounded-2xl bg-white px-3 py-2 text-lg font-extrabold " ></ p >
</ section >
< section class = " border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-5 " >< h2 class = " text-xl font-extrabold " > Pour aller plus loin </ h2 >< p class = " mt-1 text-sm font-semibold " > Plateformes externes pour s’ encore .</ p >< div class = " mt-3 " >< ul class = " grid gap-2 " >< li >< a href = " https://www.hackerrank.com/domains/python " target = " _blank " rel = " noopener " class = " flex items-center justify-between gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#fef7e0] " >< span > HackerRank · Python </ span >< span class = " font-mono " aria - hidden = " true " > ↗ </ span ></ a ></ li >< li >< a href = " https://www.hackerrank.com/domains/sql " target = " _blank " rel = " noopener " class = " flex items-center justify-between gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#fef7e0] " >< span > HackerRank · SQL </ span >< span class = " font-mono " aria - hidden = " true " > ↗ </ span ></ a ></ li >< li >< a href = " https://www.hackerrank.com/domains/shell " target = " _blank " rel = " noopener " class = " flex items-center justify-between gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#fef7e0] " >< span > HackerRank · Linux Shell </ span >< span class = " font-mono " aria - hidden = " true " > ↗ </ span ></ a ></ li >< li >< a href = " https://www.datacamp.com/category/python " target = " _blank " rel = " noopener " class = " flex items-center justify-between gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#fef7e0] " >< span > DataCamp · Python </ span >< span class = " font-mono " aria - hidden = " true " > ↗ </ span ></ a ></ li >< li >< a href = " https://www.datacamp.com/category/sql " target = " _blank " rel = " noopener " class = " flex items-center justify-between gap-3 border border-[#dadce0] rounded-lg bg-white px-3 py-2 font-bold hover:bg-[#fef7e0] " >< span > DataCamp · SQL </ span >< span class = " font-mono " aria - hidden = " true " > ↗ </ span ></ a ></ li ></ ul ></ div ></ section >
< p class = " border border-[#dadce0] rounded-lg bg-[#fef7e0] p-3 text-sm font-bold " > Python tourne dans ton navigateur ( Pyodide ), SQL aussi ( SQLite ) . Rien à installer .</ p >
</ aside >
</ div >
< script >
document . addEventListener ( 'DOMContentLoaded' , function () {
var EX = [{ " id " : " py-pair " , " lang " : " python " , " groupe " : " Python " , " titre " : " Nombre pair ou impair " , " cursus " : " NSI · Première " , " consigne " : " Complète la fonction <code>est_pair(n)< \ /code> : elle renvoie <code>True< \ /code> si <code>n< \ /code> est pair, <code>False< \ /code> sinon. Astuce : l’ \ /code> donne le reste de la division. " , " code " : " def est_pair(n): \n # Renvoie True si n est pair, False sinon \n pass \n \n \n print(est_pair(4)) \n print(est_pair(7)) \n " , " tests " : [ " est_pair(4) == True " , " est_pair(7) == False " , " est_pair(0) == True " , " est_pair(-2) == True " ]},{ " id " : " py-somme " , " lang " : " python " , " groupe " : " Python " , " titre " : " Somme d’ " , " cursus " : " NSI · Première " , " consigne " : " Écris <code>somme(liste)< \ /code> qui renvoie la somme des éléments, <strong>sans utiliser< \ /strong> la fonction <code>sum()< \ /code>. Utilise une boucle <code>for< \ /code>. " , " code " : " def somme(liste): \n total = 0 \n # Parcours la liste et ajoute chaque élément à total \n return total \n \n \n print(somme([3, 5, 2])) \n " , " tests " : [ " somme([3, 5, 2]) == 10 " , " somme([]) == 0 " , " somme([-1, 1]) == 0 " , " somme([100]) == 100 " ]},{ " id " : " py-voyelles " , " lang " : " python " , " groupe " : " Python " , " titre " : " Compter les voyelles " , " cursus " : " BTS CIEL · Informatique " , " consigne " : " Écris <code>nb_voyelles(mot)< \ /code> qui compte les voyelles (a, e, i, o, u, y) d’ " , " code " : " def nb_voyelles(mot): \n voyelles = \" aeiouy \" \n # À toi de jouer \n return 0 \n \n \n print(nb_voyelles( \" reseau \" )) \n " , " tests " : [ " nb_voyelles( \" reseau \" ) == 4 " , " nb_voyelles( \" bcd \" ) == 0 " , " nb_voyelles( \" python \" ) == 2 " ]},{ " id " : " sql-select " , " lang " : " sql " , " groupe " : " SQL " , " titre " : " Filtrer et trier " , " cursus " : " NSI · Terminale " , " consigne " : " Table <code>eleves(nom, classe, moyenne)< \ /code>. Affiche le <strong>nom< \ /strong> et la <strong>moyenne< \ /strong> des élèves de <code>SIO1< \ /code> qui ont au moins 12, du meilleur au moins bon. " , " code " : " SELECT nom, moyenne \n FROM eleves \n -- Complète la requête \n ; \n " , " solution " : " SELECT nom, moyenne FROM eleves WHERE classe = 'SIO1' AND moyenne >= 12 ORDER BY moyenne DESC; " },{ " id " : " sql-group " , " lang " : " sql " , " groupe " : " SQL " , " titre " : " Moyenne par classe " , " cursus " : " BTS SIO · Bloc 1 " , " consigne " : " Affiche chaque <strong>classe< \ /strong> et la <strong>moyenne< \ /strong> de ses élèves arrondie à 1 décimale, triées par classe. Utilise <code>GROUP BY< \ /code> et <code>ROUND(AVG(...), 1)< \ /code>. " , " code " : " SELECT classe \n FROM eleves \n ; \n " , " solution " : " SELECT classe, ROUND(AVG(moyenne), 1) FROM eleves GROUP BY classe ORDER BY classe; " },{ " id " : " web-bouton " , " lang " : " web " , " groupe " : " Web " , " titre " : " Un bouton qui répond " , " cursus " : " NSI · Première " , " consigne " : " Quand on clique sur le bouton, le paragraphe <code>#message< \ /code> doit afficher <strong>Bonjour.< \ /strong>. Ajoute un écouteur <code>click< \ /code> en JavaScript. " , " code " : " <!doctype html> \n <html lang= \" fr \" > \n <body style= \" font-family: sans-serif; padding: 20px \" > \n <button id= \" bouton \" >Clique-moi< \ /button> \n <p id= \" message \" >< \ /p> \n \n <script> \n const bouton = document.getElementById( \" bouton \" ); \n // Ajoute un écouteur de clic ici \n < \ /script> \n < \ /body> \n < \ /html> \n " },{ " id " : " bash-tp " , " lang " : " bash " , " groupe " : " Linux " , " titre " : " Préparer son dossier de TP " , " cursus " : " BTS SIO · Bloc 2 " , " consigne " : " Dans le terminal : crée un dossier <code>tp< \ /code>, entre dedans, puis crée un fichier <code>script.sh< \ /code> qui contient <code>echo Bonjour< \ /code>. " , " code " : " # Cet exercice se fait dans le terminal, onglet ci-dessous. \n # Commandes utiles : mkdir, cd, echo \" ... \" > fichier, cat \n " }];
var SETUP = " CREATE TABLE eleves (id INTEGER PRIMARY KEY, nom TEXT, classe TEXT, moyenne REAL); " +
" INSERT INTO eleves (nom, classe, moyenne) VALUES ('Léa', 'SIO1', 15.5), ('Yanis', 'SIO1', 11), ('Nora', 'SIO1', 12), ('Tom', 'SIO2', 14), ('Inès', 'SIO2', 9.5), ('Sami', 'SIO1', 13.25), ('Chloé', 'SIO2', 17); " ;
var MODES = { python : 'python' , sql : 'text/x-sql' , web : 'htmlmixed' , bash : 'shell' };
var FICH = { python : 'main.py' , sql : 'requete.sql' , web : 'index.html' , bash : 'notes.sh' };
var $ = function ( id ) { return document . getElementById ( id ); };
var cur = null , py = null , SQL = null , shell = null , termOk = false ;
var ed = CodeMirror ( $ ( 'editeur' ), { lineNumbers : true , indentUnit : 4 , matchBrackets : true , autoCloseBrackets : true , viewportMargin : Infinity });
ed . on ( 'change' , function () { if ( cur ) localStorage . setItem ( 'paillasse-ide-' + cur . id , ed . getValue ()); });
function onglet ( n ) {
document . querySelectorAll ( '[data-onglet]' ) . forEach ( function ( b ) { b . setAttribute ( 'aria-selected' , b . dataset . onglet === n ); });
document . querySelectorAll ( '[data-panneau]' ) . forEach ( function ( p ) { p . hidden = p . dataset . panneau !== n ; });
if ( n === 'terminal' && ! termOk ) {
termOk = true ;
SyllabusTerminal . mount ( $ ( 'p-terminal' ), { user : 'eleve' , host : 'ide' , fontSize : 13 , focus : true , onCommand : function ( l , sh ) { shell = sh ; }, welcome : 'Terminal Syllabus · tape help' });
}
}
document . querySelectorAll ( '[data-onglet]' ) . forEach ( function ( b ) { b . addEventListener ( 'click' , function () { onglet ( b . dataset . onglet ); }); });
function sortie ( t , err ) { var p = $ ( 'p-sortie' ); p . textContent = t ; p . style . color = err ? '#FF9A8A' : '#E8EDF5' ; }
function charger ( id ) {
cur = EX . filter ( function ( e ) { return e . id === id ; })[ 0 ];
document . querySelectorAll ( '[data-ex]' ) . forEach ( function ( b ) { b . setAttribute ( 'aria-current' , b . dataset . ex === id ); });
$ ( 'c-titre' ) . textContent = cur . titre ; $ ( 'c-cursus' ) . textContent = cur . groupe + ' · ' + cur . cursus ; $ ( 'c-consigne' ) . innerHTML = cur . consigne ;
$ ( 'fichier' ) . textContent = FICH [ cur . lang ];
ed . setOption ( 'mode' , MODES [ cur . lang ]);
ed . setValue ( localStorage . getItem ( 'paillasse-ide-' + id ) || cur . code );
$ ( 'tests' ) . innerHTML = '<li>Clique sur ✓ Vérifier.</li>' ; $ ( 'score' ) . hidden = true ;
sortie ( cur . lang === 'bash' ? 'Ouvre l’ : 'Clique sur ▶ Exécuter pour lancer ton code.' );
onglet ( cur . lang === 'web' ? 'apercu' : cur . lang === 'bash' ? 'terminal' : 'sortie' );
if ( cur . lang === 'web' ) $ ( 'p-apercu' ) . srcdoc = ed . getValue ();
}
function chargerScript ( url ) { return new Promise ( function ( ok , ko ) { var s = document . createElement ( 'script' ); s . src = url ; s . onload = ok ; s . onerror = ko ; document . head . appendChild ( s ); }); }
function python () {
if ( py ) return Promise . resolve ( py );
sortie ( 'Chargement de Python… (quelques secondes, la première fois seulement)' );
return chargerScript ( 'https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js' ) . then ( function () { return loadPyodide (); }) . then ( function ( p ) { py = p ; return p ; });
}
function sqlite () {
if ( SQL ) return Promise . resolve ( SQL );
return chargerScript ( 'https://cdn.jsdelivr.net/npm/sql.js@1.10.3/dist/sql-wasm.js' ) . then ( function () { return initSqlJs ({ locateFile : function ( f ) { return 'https://cdn.jsdelivr.net/npm/sql.js@1.10.3/dist/' + f ; } }); }) . then ( function ( s ) { SQL = s ; return s ; });
}
function base () { var db = new SQL . Database (); db . run ( SETUP ); return db ; }
function tableau ( res ) {
if ( ! res . length ) return '(aucune ligne)' ;
var r = res [ res . length - 1 ], w = r . columns . map ( function ( c , i ) { return Math . max ( String ( c ) . length , Math . max . apply ( null , r . values . map ( function ( v ) { return String ( v [ i ]) . length ; }))); });
var ligne = function ( a ) { return a . map ( function ( x , i ) { return String ( x ) . padEnd ( w [ i ]); }) . join ( ' │ ' ); };
return ligne ( r . columns ) + '\n' + w . map ( function ( n ) { return '─' . repeat ( n ); }) . join ( '─┼─' ) + '\n' + r . values . map ( ligne ) . join ( '\n' ) + '\n\n' + r . values . length + ' ligne(s)' ;
}
function executer () {
var code = ed . getValue ();
if ( cur . lang === 'python' ) {
return python () . then ( function ( p ) {
var out = '' ;
p . setStdout ({ batched : function ( s ) { out += s + '\n' ; } }); p . setStderr ({ batched : function ( s ) { out += s + '\n' ; } });
try { p . runPython ( code ); sortie ( out || '(aucune sortie)' ); } catch ( e ) { sortie ( out + String ( e . message ) . split ( '\n' ) . slice ( - 3 ) . join ( '\n' ), true ); }
});
}
if ( cur . lang === 'sql' ) return sqlite () . then ( function () { try { sortie ( tableau ( base () . exec ( code ))); } catch ( e ) { sortie ( 'Erreur SQL : ' + e . message , true ); } });
if ( cur . lang === 'web' ) { $ ( 'p-apercu' ) . srcdoc = code ; onglet ( 'apercu' ); return Promise . resolve (); }
onglet ( 'terminal' ); return Promise . resolve ();
}
function afficher ( res ) {
var ok = res . filter ( function ( r ) { return r [ 1 ]; }) . length ;
$ ( 'tests' ) . innerHTML = res . map ( function ( r ) { return '<li class="flex gap-2 border border-[#dadce0] rounded-lg ' + ( r [ 1 ] ? 'bg-white' : 'bg-[#FFD9E8]' ) + ' px-2 py-1"><span>' + ( r [ 1 ] ? '✓' : '✗' ) + '</span><span>' + r [ 0 ] + '</span></li>' ; }) . join ( '' );
var s = $ ( 'score' ); s . hidden = false ; s . textContent = ok === res . length ? 'Bravo, tout est juste ! ' + ok + ' / ' + res . length : ok + ' / ' + res . length + ' tests réussis' ;
var b = document . querySelector ( '[data-ex="' + cur . id + '"] [data-etat]' ); if ( b ) b . textContent = ok === res . length ? '✓' : '' ;
}
function verifier () {
var code = ed . getValue ();
if ( cur . lang === 'python' ) return python () . then ( function ( p ) {
try { p . runPython ( code ); } catch ( e ) { return afficher ([[ 'Le code s’ , false ]]); }
afficher ( cur . tests . map ( function ( t ) { var ok = false ; try { ok = p . runPython ( t ) === true ; } catch ( e ) {} return [ t , ok ]; }));
});
if ( cur . lang === 'sql' ) return sqlite () . then ( function () {
var attendu = JSON . stringify ( base () . exec ( cur . solution )[ 0 ] . values ), obtenu = null ;
try { var r = base () . exec ( code ); obtenu = r . length ? JSON . stringify ( r [ r . length - 1 ] . values ) : '[]' ; } catch ( e ) { return afficher ([[ 'Requête valide' , false ]]); }
afficher ([[ 'Requête valide' , true ], [ 'Bonnes lignes, dans le bon ordre' , obtenu === attendu ]]);
});
if ( cur . lang === 'web' ) {
2026-10-09 21:44:02 +02:00
// La vérification tourne DANS l'aperçu, isolé (sandbox sans
// allow-same-origin : le code de l'élève ne peut pas agir sur
// la page) ; elle renvoie ses résultats par postMessage.
var f = $ ( 'p-apercu' ); onglet ( 'apercu' );
var verif = '<script>addEventListener("load",function(){var b=document.getElementById("bouton"),m=document.getElementById("message"),r=[["Le bouton #bouton existe",!!b],["Le paragraphe #message existe",!!m]];if(b&&m){b.click();r.push(["Le clic affiche « Bonjour ! »",/Bonjour/.test(m.textContent)]);}parent.postMessage({syllabusVerif:r},"*");});<\/script>' ;
return new Promise ( function ( ok ) {
var fini = false ;
function terminer ( r ) { if ( fini ) return ; fini = true ; removeEventListener ( 'message' , recevoir ); afficher ( r ); ok (); }
function recevoir ( e ) { if ( e . source === f . contentWindow && e . data && e . data . syllabusVerif ) terminer ( e . data . syllabusVerif ); }
addEventListener ( 'message' , recevoir );
setTimeout ( function () { terminer ([[ 'La page s’ , false ]]); }, 3000 );
f . srcdoc = code + verif ;
});
2026-10-08 02:01:58 +02:00
}
onglet ( 'terminal' );
var h = shell ? shell . home : '/home/eleve' , f2 = shell && shell . files . get ( h + '/tp/script.sh' );
2026-10-09 21:44:02 +02:00
afficher ([[ 'Le dossier ~/tp existe' , !! ( shell && shell . dirs . has ( h + '/tp' ))], [ 'Le fichier ~/tp/script.sh existe' , f2 !== undefined && f2 !== null ], [ 'Il contient echo Bonjour' , !! f2 && / echo \s + " ?Bonjour/.test(f2)]]);
2026-10-08 02:01:58 +02:00
return Promise . resolve ();
}
document . querySelectorAll ( '[data-ex]' ) . forEach ( function ( b ) { b . addEventListener ( 'click' , function () { charger ( b . dataset . ex ); }); });
$ ( 'b-run' ) . addEventListener ( 'click' , function () { executer () . catch ( function ( e ) { sortie ( 'Impossible de charger l’ + e , true ); }); });
$ ( 'b-test' ) . addEventListener ( 'click' , function () { verifier () . catch ( function ( e ) { sortie ( 'Impossible de charger l’ + e , true ); }); });
$ ( 'b-reset' ) . addEventListener ( 'click' , function () { localStorage . removeItem ( 'paillasse-ide-' + cur . id ); ed . setValue ( cur . code ); });
ed . setOption ( 'extraKeys' , { 'Ctrl-Enter' : function () { $ ( 'b-run' ) . click (); }, 'Cmd-Enter' : function () { $ ( 'b-run' ) . click (); } });
var q = new URLSearchParams ( location . search ) . get ( 'ex' );
charger ( q && EX . some ( function ( e ) { return e . id === q ; }) ? q : EX [ 0 ] . id );
});
</ script >
</ main >
< footer style = " background:#f8f9fa;border-top:1px solid #e3e5e8;font-family:Mulish,system-ui,sans-serif " >
< 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 style = " margin:0;font-size:18px;font-weight:800;color:#0b1220 " > Syllabus </ p >
< p style = " margin:10px 0 0;font-size:14px;line-height:1.6;font-weight:500;color:#5f6368 " > Cours , labs , IDE et examens en ligne , du lycée au master .</ p >
</ div >
< nav aria - label = " Produit " >< p style = " margin:0;font-size:13px;font-weight:800;color:#0b1220 " > Produit </ p >< ul style = " margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px " >< li >< a href = " { { route('fonctionnalites') }} " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Fonctionnalités </ a ></ li >< li >< a href = " { { route('cours.index') }} " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Cours gratuits </ a ></ li >< li >< a href = " { { route('labs.essai') }} " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Essayer un lab </ a ></ li >< li >< a href = " { { route('tarifs') }} " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Tarifs </ a ></ li ></ ul ></ nav >< nav aria - label = " Outils " >< p style = " margin:0;font-size:13px;font-weight:800;color:#0b1220 " > Outils </ p >< ul style = " margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px " >< li >< a href = " { { route('ressource') }}?outil=cockpit " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Tableau de bord prof </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=labs " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > TP sur machine Linux </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=ide " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Éditeur de code </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=quiz " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Quiz flash </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=sujet " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Examens </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=bibliotheque " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Bibliothèque du prof </ a ></ li ></ ul ></ nav >< nav aria - label = " Établissements " >< p style = " margin:0;font-size:13px;font-weight:800;color:#0b1220 " > Établissements </ p >< ul style = " margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px " >< li >< a href = " { { route('etablissements') }} " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Équiper une classe </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=vie-scolaire " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Vie scolaire </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=espace-etablissement " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Licences et factures </ a ></ li >< li >< a href = " { { route('ressource') }}?outil=integration " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Intégration et sécurité </ a ></ li ></ ul ></ nav >< nav aria - label = " Syllabus " >< p style = " margin:0;font-size:13px;font-weight:800;color:#0b1220 " > Syllabus </ p >< ul style = " margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px " >< li >< a href = " { { route('aide') }} " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Aide et tutoriels </ a ></ li >< li >< a href = " { { route('legal') }} " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Mentions légales et RGPD </ a ></ li ></ ul ></ nav >
< p style = " margin:0;align-self:start;font-size:14px;font-weight:600;color:#5f6368 " >< span style = " color:#137333 " > ● </ span > Tous les services fonctionnent </ p >
</ div >
2026-10-09 21:07:25 +02:00
< div style = " border-top:1px solid #e3e5e8 " >< ul aria - label = " Engagements " style = " max-width:1200px;margin:0 auto;padding:24px 20px;list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px " >< li style = " font-size:14px;font-weight:700;color:#0b1220 " > Hébergé en France </ li >< li style = " font-size:14px;font-weight:700;color:#0b1220 " >< a href = " { { route('confidentialite') }} " style = " color:#0b1220 " > Conforme au RGPD </ a > < span style = " font-weight:500;color:#5f6368 " > · données minimisées </ span ></ li >< li style = " font-size:14px;font-weight:700;color:#0b1220 " > 6 cursus < span style = " font-weight:500;color:#5f6368 " > · du lycée au BUT </ span ></ li >< li style = " font-size:14px;font-weight:700;color:#0b1220 " > 0 € < span style = " font-weight:500;color:#5f6368 " > · sans carte bancaire </ span ></ li ></ ul >
2026-10-08 02:01:58 +02:00
</ div >
< div style = " border-top:1px solid #e3e5e8 " >
2026-10-09 21:07:25 +02:00
< div class = " mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10 " >< nav aria - label = " Informations légales " >< ul class = " flex flex-wrap justify-center gap-x-5 gap-y-1 " style = " margin:0;padding:0;list-style:none;font-size:14px;font-weight:500 " >< li >< a href = " { { route('legal') }}#mentions " style = " color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Mentions légales </ a ></ li >< li >< a href = " { { route('legal') }}#cgu " style = " color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > CGU </ a ></ li >< li >< a href = " { { route('confidentialite') }}#confidentialite " style = " color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Confidentialité et RGPD </ a ></ li >< li >< a href = " { { route('confidentialite') }}#cookies " style = " color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Cookies </ a ></ li >< li >< a href = " { { route('confidentialite') }}#sous-traitance " style = " color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Sous - traitance </ a ></ li >< li >< a href = " { { route('statut') }} " style = " color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Statut du service </ a ></ li ></ ul ></ nav ></ div >
2026-10-08 02:01:58 +02:00
</ div >
</ footer >
</ body >
</ html >
