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 > Lab web · 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 >
< 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-[#e6f4ea] " >
< div class = " mx-auto flex max-w-[1500px] flex-wrap items-center gap-4 px-5 py-4 lg:px-8 " >
< a href = " { { route('labs.index') }} " class = " border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#0b57d0] hover:text-white " > ← Labs </ a >
< 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 = " flex-1 text-2xl font-extrabold tracking-tight " > Lab web · Mon premier serveur Apache </ h1 ></ div >
< span class = " border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono text-sm font-semibold " > SRV - 1 · BTS SIO , BUT R & amp ; T , NSI </ span >
</ div >
</ section >
< div class = " mx-auto grid max-w-[1500px] gap-6 px-5 py-8 lg:grid-cols-12 lg:px-8 " >
< aside class = " grid content-start gap-5 lg:col-span-3 " >
< article class = " border border-[#e3e5e8] rounded-2xl bg-white p-5 " >
< h2 class = " text-2xl font-extrabold " > Consignes </ h2 >
< ol id = " w-etapes " class = " mt-4 grid gap-2 font-medium [&_code]:break-all [&_code]:bg-[#fef7e0] [&_code]:px-1 [&_code]:font-mono [&_code]:text-sm " >
< li class = " flex gap-3 p-2 " >< span class = " font-mono font-semibold " > 1 </ span >< span > Installe le serveur : < code > sudo apt install apache2 </ code ></ span ></ li >
< li class = " flex gap-3 p-2 " >< span class = " font-mono font-semibold " > 2 </ span >< span > Vérifie qu’ tourne : < code > systemctl status apache2 </ code ></ span ></ li >
< li class = " flex gap-3 p-2 " >< span class = " font-mono font-semibold " > 3 </ span >< span > Remplace la page d’ : < code > echo " <h1>Bonjour</h1> " & gt ; / var / www / html / index . html </ code ></ span ></ li >
< li class = " flex gap-3 p-2 " >< span class = " font-mono font-semibold " > 4 </ span >< span > Ouvre < code > http :// 192.168 . 10.10 </ code > dans le navigateur et actualise </ span ></ li >
< li class = " flex gap-3 p-2 " >< span class = " font-mono font-semibold " > 5 </ span >< span > Teste aussi en ligne de commande : < code > curl localhost </ code ></ span ></ li >
</ ol >
</ article >
< div class = " border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-5 " >< p class = " text-xl font-extrabold " > Vérification </ p >< p id = " w-texte " class = " mt-1 font-extrabold " aria - live = " polite " > Étape 0 / 5 </ p >< div id = " w-barre " class = " mt-3 grid grid-cols-5 gap-1 " >< span class = " h-3 border border-[#dadce0] rounded-lg bg-white " ></ span >< span class = " h-3 border border-[#dadce0] rounded-lg bg-white " ></ span >< span class = " h-3 border border-[#dadce0] rounded-lg bg-white " ></ span >< span class = " h-3 border border-[#dadce0] rounded-lg bg-white " ></ span >< span class = " h-3 border border-[#dadce0] rounded-lg bg-white " ></ span ></ div ></ div >
</ aside >
< section class = " flex min-w-0 flex-col border border-[#e3e5e8] rounded-2xl bg-[#13233A] lg:col-span-5 " aria - label = " Terminal de la VM " >
< div class = " flex items-center gap-2 border-b border-[#e3e5e8] bg-[#0d192b] px-4 py-2 text-white " >< 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 class = " ml-2 font-mono text-sm " > web - 01 · 192.168 . 10.10 · xterm . js </ span ></ div >
< div id = " w-term " class = " h-[520px] p-3 " ></ div >
</ section >
< section class = " flex min-w-0 flex-col border border-[#e3e5e8] rounded-2xl bg-white lg:col-span-4 " aria - label = " Navigateur relié à la VM " >
< div class = " flex items-center gap-2 border-b border-[#e3e5e8] bg-[#eef0fd] px-3 py-2 " >
< button type = " button " id = " w-reload " class = " grid h-9 w-9 place-items-center border border-[#dadce0] rounded-lg bg-white font-extrabold hover:bg-[#fef7e0] " aria - label = " Actualiser " > ↻ </ button >
< p class = " flex-1 truncate border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono text-sm font-semibold " > http :// 192.168 . 10.10 /</ p >
</ div >
< iframe id = " w-nav " title = " Navigateur de la VM " class = " h-[520px] w-full bg-white " sandbox = " " ></ iframe >
</ section >
</ div >
< script >
document . addEventListener ( 'DOMContentLoaded' , function () {
var etat = { apache : false , actif : false , statut : false , vu : false , curl : false }, sh = null ;
var DEF = '<!doctype html><html><body style="font-family:sans-serif;margin:0"><div style="background:#d7003a;color:#fff;padding:24px"><h1 style="margin:0">Apache2 Debian Default Page</h1><p style="margin:8px 0 0">It works!</p></div><p style="padding:24px">This is the default welcome page used to test the correct operation of the Apache2 server after installation on Debian systems.</p></body></html>' ;
var ERR = '<!doctype html><html><body style="font-family:sans-serif;padding:32px;color:#201e1d"><h1>Impossible de se connecter</h1><p>Le serveur 192.168.10.10 ne répond pas sur le port 80.</p></body></html>' ;
var PAGE = '/var/www/html/index.html' ;
function page () { return sh && sh . files . has ( PAGE ) ? sh . files . get ( PAGE ) : '' ; }
function recharger () { document . getElementById ( 'w-nav' ) . srcdoc = etat . actif ? ( page () || '<p>403 Forbidden</p>' ) : ERR ; if ( etat . actif ) { etat . vu = page () . indexOf ( 'It works' ) === - 1 && page () . length > 0 ; } maj (); }
function maj () {
var f = [ etat . apache , etat . statut , etat . apache && page () . indexOf ( 'It works' ) === - 1 && page () . length > 0 , etat . vu , etat . curl ], k = 0 ;
while ( k < 5 && f [ k ]) k ++ ;
document . querySelectorAll ( '#w-etapes > li' ) . forEach ( function ( li , i ) { li . className = 'flex gap-3 p-2 ' + ( i < k ? 'line-through decoration-2' : i === k ? 'border border-[#dadce0] rounded-lg bg-[#e6f4ea]' : '' ); });
document . querySelectorAll ( '#w-barre > span' ) . forEach ( function ( b , i ) { b . className = 'h-3 border border-[#dadce0] rounded-lg ' + ( i < k ? 'bg-black' : 'bg-white' ); });
document . getElementById ( 'w-texte' ) . textContent = k === 5 ? 'Lab terminé : 5 / 5 ✓' : 'Étape ' + k + ' / 5' ;
}
var CMD = {
apt : function ( a , s ) {
if ( a [ 0 ] !== 'install' || a . indexOf ( 'apache2' ) === - 1 ) return a [ 0 ] === 'update' ? 'Lecture des listes de paquets… Fait' : 'Usage : apt install <paquet>' ;
s . dirs . add ( '/var/www' ); s . dirs . add ( '/var/www/html' ); s . dirs . add ( '/etc/apache2' ); s . files . set ( PAGE , DEF ); etat . apache = true ; etat . actif = true ;
return 'Lecture des listes de paquets… Fait\nLes NOUVEAUX paquets suivants seront installés : apache2 apache2-bin apache2-data\nParamétrage de apache2 (2.4.62-1) …\nCreated symlink /etc/systemd/system/multi-user.target.wants/apache2.service.' ;
},
systemctl : function ( a ) {
if ( a [ 1 ] !== 'apache2' ) return 'Usage : systemctl status|start|stop|restart apache2' ;
if ( ! etat . apache ) return false ;
if ( a [ 0 ] === 'stop' ) { etat . actif = false ; return '' ; }
if ( a [ 0 ] === 'start' || a [ 0 ] === 'restart' ) { etat . actif = true ; return '' ; }
etat . statut = true ;
return '\x1b[1;92m●\x1b[0m apache2.service - The Apache HTTP Server\n Loaded: loaded (/lib/systemd/system/apache2.service; enabled)\n Active: ' + ( etat . actif ? '\x1b[1;92mactive (running)\x1b[0m' : 'inactive (dead)' );
},
curl : function ( a ) { if ( ! etat . actif ) return 'curl: (7) Failed to connect to ' + ( a [ 0 ] || 'localhost' ) + ' port 80: Connexion refusée' ; etat . curl = true ; return page (); }
};
SyllabusTerminal . mount ( document . getElementById ( 'w-term' ), {
user : 'eleve' , host : 'web-01' , commands : CMD , focus : true ,
welcome : '\x1b[2mDebian GNU/Linux 13 · VM web-01 prête\x1b[0m\nLe navigateur à droite est relié à cette VM.' ,
onCommand : function ( l , s ) { sh = s ; recharger (); }
});
document . getElementById ( 'w-reload' ) . addEventListener ( 'click' , recharger );
setTimeout ( recharger , 300 );
});
</ script >
</ main >
< footer 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 >
