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 > Visio de classe · Syllabus </ title >
2026-10-09 21:07:25 +02:00
{{ Vite :: fonts () }}
2026-10-08 02:01:58 +02:00
< 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 ( 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 = " 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 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] [&::-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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " padding:22px 20px 20px;min-w
< 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') }} " 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') }} " 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 style = " background:#f8f9fa " >
< section style = " padding:40px 20px 8px " >< div style = " max-width:1280px;margin:0 auto " >
< p style = " margin:0;display:inline-flex;align-items:center;gap:8px;border:1px solid #b8c1cf;border-radius:999px;background:#fff;padding:4px 12px;font-size:14px;font-weight:700;color:#1d3fa8 " > Visio de classe </ p >
< h1 style = " margin:14px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:#0b1220 " > La classe à distance , sans brouhaha .</ h1 >
< p style = " margin:12px 0 0;max-width:720px;font-size:18px;line-height:1.6;font-weight:500;color:#3c4043 " > Tous les élèves arrivent en sourdine . Ils lèvent la main , vous donnez la parole , un à la fois .</ p >
< div role = " tablist " aria - label = " Vue " style = " margin-top:28px;display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:#eef0f3 " >
< button type = " button " role = " tab " data - vue = " prof " style = " display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:0 " > Vue prof </ button >
< button type = " button " role = " tab " data - vue = " eleve " style = " display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:0 " > Vue élève </ button >
< button type = " button " role = " tab " data - vue = " mobile " style = " display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:0 " > Mobile élève </ button >
</ div >
< p style = " margin:12px 0 0;font-size:14px;font-weight:600;color:#5f6368 " > Les vues sont reliées : levez la main côté élève ( Léa M . ), puis donnez - lui la parole côté prof .</ p >
</ div ></ section >
< section data - panel = " prof " style = " padding:20px 20px 72px " >< div class = " grid gap-5 lg:grid-cols-[minmax(0,1fr)_360px] " style = " max-width:1280px;margin:0 auto " >
< div style = " background:#fff;border:1px solid #e3e5e8;border-radius:20px;overflow:hidden;min-width:0 " >
< div style = " display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #e3e5e8 " >
< div style = " display:flex;align-items:center;gap:12px;flex-wrap:wrap " >< span style = " display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:#fce8e6;color:#b3261e;font-size:13px;font-weight:800 " >< span style = " width:8px;height:8px;border-radius:50%;background:#d93025 " ></ span > En direct · < span id = " v-chrono " style = " font-family:'IBM Plex Mono',monospace " > 00 : 24 : 12 </ span ></ span >< span style = " font-size:14px;font-weight:700;color:#0b1220 " > BTS SIO 1 · Groupe A </ span >< span id = " v-nb " style = " font-size:14px;font-weight:600;color:#5f6368 " ></ span ></ div >
< div style = " display:flex;gap:8px;flex-wrap:wrap " >< button type = " button " id = " v-mute-all " style = " display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid #dadce0;background:#fff;color:#0b1220 " >< svg viewBox = " 0 0 24 24 " width = " 18 " height = " 18 " fill = " none " stroke = " currentColor " stroke - width = " 2 " stroke - linecap = " round " stroke - linejoin = " round " aria - hidden = " true " >< rect x = " 9 " y = " 2 " width = " 6 " height = " 12 " rx = " 3 " />< path d = " M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M3 3l18 18 " /></ svg > Couper tous les micros </ button >< button type = " button " style = " display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:0;background:#d93025;color:#fff " > Terminer la visio </ button ></ div >
</ div >
< div id = " v-parole " style = " display:none " ></ div >
< ul id = " v-grille " aria - label = " Participants " style = " margin:0;padding:20px;list-style:none;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) " ></ ul >
</ div >
< div style = " display:grid;gap:20px;align-content:start;min-width:0 " >
< section style = " background:#fff;border:1px solid #e3e5e8;border-radius:20px " aria - labelledby = " t-mains " >< div style = " display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e3e5e8 " >< h2 id = " t-mains " style = " margin:0;font-size:16px;font-weight:800;color:#0b1220 " > Mains levées </ h2 >< span id = " v-nb-mains " style = " min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:#fef7e0;color:#7a4b00;display:inline-grid;place-items:center;font-size:13px;font-weight:800 " ></ span ></ div >< ol id = " v-mains " style = " margin:0;padding:8px 12px;list-style:none " ></ ol >< p style = " margin:0;padding:0 20px 14px;font-size:13px;font-weight:600;color:#5f6368 " > Premier arrivé en haut .</ p ></ section >
< section style = " background:#fff;border:1px solid #e3e5e8;border-radius:20px " aria - labelledby = " t-attente " >< div style = " display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 20px;border-bottom:1px solid #e3e5e8 " >< h2 id = " t-attente " style = " margin:0;font-size:16px;font-weight:800;color:#0b1220 " > Salle d’ </ h2 >< button type = " button " id = " v-tout-admettre " style = " border:0;background:none;color:#0b57d0;font-size:14px;font-weight:700;cursor:pointer " > Tout admettre </ button ></ div >< ul id = " v-attente " style = " margin:0;padding:8px 12px;list-style:none " ></ ul ></ section >
< section style = " background:#fff;border:1px solid #e3e5e8;border-radius:20px " aria - labelledby = " t-chat " >< div style = " display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 20px;border-bottom:1px solid #e3e5e8 " >< h2 id = " t-chat " style = " margin:0;font-size:16px;font-weight:800;color:#0b1220 " > Chat des élèves </ h2 >< button type = " button " id = " v-chat-switch " role = " switch " aria - checked = " false " aria - label = " Activer le chat des élèves " style = " position:relative;width:44px;height:26px;border-radius:999px;border:0;cursor:pointer;transition:background .2s " >< span style = " position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s " ></ span ></ button ></ div >< div id = " v-chat " style = " padding:16px 20px " ></ div ></ section >
</ div >
</ div ></ section >
< section data - panel = " eleve " style = " padding:20px 20px 72px " >< div style = " max-width:1100px;margin:0 auto;background:#fff;border:1px solid #e3e5e8;border-radius:20px;overflow:hidden " >
< div style = " display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #e3e5e8 " >< span style = " font-size:14px;font-weight:700;color:#0b1220 " > BTS SIO 1 · Groupe A · VLAN et routage </ span >< span data - statut - e style = " display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:700 " ></ span ></ div >
< div style = " padding:20px " >< div style = " position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#202124;display:grid;place-items:center " >
< div style = " text-align:center " >< div style = " width:120px;height:120px;margin:0 auto;border-radius:50%;background:#8ab4f8;display:grid;place-items:center;font-size:42px;font-weight:800;color:#0b1220 " > MB </ div >< p style = " margin:16px 0 0;font-size:18px;font-weight:700;color:#fff " > M . B . · votre professeur </ p ></ div >
< span style = " position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:700 " >< svg viewBox = " 0 0 24 24 " width = " 16 " height = " 16 " fill = " none " stroke = " currentColor " stroke - width = " 2 " stroke - linecap = " round " stroke - linejoin = " round " aria - hidden = " true " >< rect x = " 9 " y = " 2 " width = " 6 " height = " 12 " rx = " 3 " />< path d = " M19 10v2a7 7 0 0 1-14 0v-2M12 19v3 " /></ svg > M . B .</ span >
< div style = " position:absolute;right:16px;bottom:16px;width:min(26%,200px);aspect-ratio:4/3;border-radius:12px;background:#3c4043;border:2px solid rgba(255,255,255,.25);display:grid;place-items:center " >< span style = " font-size:20px;font-weight:800;color:#fff " > LM </ span >< span style = " position:absolute;left:8px;bottom:6px;font-size:12px;font-weight:700;color:#fff " > Vous </ span ></ div >
</ div ></ div >
< div style = " display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:4px 20px 24px " >
< button type = " button " data - micro - e aria - label = " Micro " style = " width:52px;height:52px;border-radius:50%;display:grid;place-items:center " ></ button >
< button type = " button " data - cam - e aria - label = " Caméra " style = " width:52px;height:52px;border-radius:50%;display:grid;place-items:center " ></ button >
< button type = " button " data - main - e aria - pressed = " false " class = " border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] px-5 py-4 text-left text-lg font-extrabold aria-pressed:bg-[#fef7e0] " style = " display:inline-flex;align-items:center;gap:10px " >< svg viewBox = " 0 0 24 24 " width = " 22 " height = " 22 " fill = " none " stroke = " currentColor " stroke - width = " 2 " stroke - linecap = " round " stroke - linejoin = " round " aria - hidden = " true " >< path d = " M18 11V6a2 2 0 0 0-4 0v5 " />< path d = " M14 10V4a2 2 0 0 0-4 0v6 " />< path d = " M10 10.5V6a2 2 0 0 0-4 0v8 " />< path d = " M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15 " /></ svg >< span > Lever la main </ span ></ button >
< a href = " { { route('espace.eleve') }} " style = " display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;height:52px;padding:0 22px;background:#d93025;color:#fff;text-decoration:none " >< svg viewBox = " 0 0 24 24 " width = " 18 " height = " 18 " fill = " none " stroke = " currentColor " stroke - width = " 2 " stroke - linecap = " round " stroke - linejoin = " round " aria - hidden = " true " >< path d = " M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9 " /></ svg > Quitter </ a >
</ div >
< p data - aide - e style = " margin:0;padding:0 20px 24px;text-align:center;font-size:14px;font-weight:600;color:#5f6368 " ></ p >
</ div ></ section >
< section data - panel = " mobile " style = " padding:20px 20px 72px " >< div style = " display:flex;justify-content:center " >
< div style = " width:min(100%,390px);height:780px;border-radius:44px;border:10px solid #111;background:#202124;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 48px -16px rgba(15,23,42,.35) " >
< div style = " padding:18px 20px 10px;display:flex;align-items:center;justify-content:space-between;color:#fff " >< span style = " font-size:15px;font-weight:700 " > BTS SIO 1 · A </ span >< span style = " display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#f28b82 " >< span style = " width:7px;height:7px;border-radius:50%;background:#f28b82 " ></ span > En direct </ span ></ div >
< div style = " flex:1;position:relative;margin:0 12px;border-radius:20px;background:#3c4043;display:grid;place-items:center " >
< div style = " text-align:center " >< div style = " width:96px;height:96px;margin:0 auto;border-radius:50%;background:#8ab4f8;display:grid;place-items:center;font-size:34px;font-weight:800;color:#0b1220 " > MB </ div >< p style = " margin:12px 0 0;font-size:16px;font-weight:700;color:#fff " > M . B .</ p ></ div >
< div style = " position:absolute;right:12px;top:12px;width:88px;height:118px;border-radius:12px;background:#5f6368;display:grid;place-items:center;font-size:16px;font-weight:800;color:#fff " > LM </ div >
</ div >
< div style = " padding:14px 12px 0;display:flex;justify-content:center " >< span data - statut - e style = " display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700 " ></ span ></ div >
< div style = " padding:14px 16px 26px;display:grid;gap:12px " >
< button type = " button " data - main - e aria - pressed = " false " class = " border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] px-5 py-4 text-lg font-extrabold aria-pressed:bg-[#fef7e0] " style = " display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px " >< svg viewBox = " 0 0 24 24 " width = " 22 " height = " 22 " fill = " none " stroke = " currentColor " stroke - width = " 2 " stroke - linecap = " round " stroke - linejoin = " round " aria - hidden = " true " >< path d = " M18 11V6a2 2 0 0 0-4 0v5 " />< path d = " M14 10V4a2 2 0 0 0-4 0v6 " />< path d = " M10 10.5V6a2 2 0 0 0-4 0v8 " />< path d = " M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15 " /></ svg >< span > Lever la main </ span ></ button >
< div style = " display:flex;justify-content:space-between;gap:12px " >
< button type = " button " data - micro - e aria - label = " Micro " style = " flex:1;height:52px;border-radius:999px;display:grid;place-items:center " ></ button >
< button type = " button " data - cam - e aria - label = " Caméra " style = " flex:1;height:52px;border-radius:999px;display:grid;place-items:center " ></ button >
< a href = " { { route('espace.eleve') }} " aria - label = " Quitter " style = " flex:1;height:52px;border-radius:999px;display:grid;place-items:center;background:#d93025;color:#fff " >< svg viewBox = " 0 0 24 24 " width = " 20 " height = " 20 " fill = " none " stroke = " currentColor " stroke - width = " 2 " stroke - linecap = " round " stroke - linejoin = " round " aria - hidden = " true " >< path d = " M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9 " /></ svg ></ a >
</ div >
</ div >
</ div >
</ div ></ section >
< script >
( function () {
var IC = { " mic " : " <svg viewBox= \" 0 0 24 24 \" width= \" 18 \" height= \" 18 \" fill= \" none \" stroke= \" currentColor \" stroke-width= \" 2 \" stroke-linecap= \" round \" stroke-linejoin= \" round \" aria-hidden= \" true \" ><rect x= \" 9 \" y= \" 2 \" width= \" 6 \" height= \" 12 \" rx= \" 3 \" /><path d= \" M19 10v2a7 7 0 0 1-14 0v-2M12 19v3 \" /></svg> " , " micoff " : " <svg viewBox= \" 0 0 24 24 \" width= \" 18 \" height= \" 18 \" fill= \" none \" stroke= \" currentColor \" stroke-width= \" 2 \" stroke-linecap= \" round \" stroke-linejoin= \" round \" aria-hidden= \" true \" ><rect x= \" 9 \" y= \" 2 \" width= \" 6 \" height= \" 12 \" rx= \" 3 \" /><path d= \" M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M3 3l18 18 \" /></svg> " , " cam " : " <svg viewBox= \" 0 0 24 24 \" width= \" 18 \" height= \" 18 \" fill= \" none \" stroke= \" currentColor \" stroke-width= \" 2 \" stroke-linecap= \" round \" stroke-linejoin= \" round \" aria-hidden= \" true \" ><path d= \" m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11 \" /><rect x= \" 2 \" y= \" 6 \" width= \" 14 \" height= \" 12 \" rx= \" 2 \" /></svg> " , " camoff " : " <svg viewBox= \" 0 0 24 24 \" width= \" 18 \" height= \" 18 \" fill= \" none \" stroke= \" currentColor \" stroke-width= \" 2 \" stroke-linecap= \" round \" stroke-linejoin= \" round \" aria-hidden= \" true \" ><path d= \" m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11 \" /><rect x= \" 2 \" y= \" 6 \" width= \" 14 \" height= \" 12 \" rx= \" 2 \" /><path d= \" M2 2l20 20 \" /></svg> " , " hand " : " <svg viewBox= \" 0 0 24 24 \" width= \" 18 \" height= \" 18 \" fill= \" none \" stroke= \" currentColor \" stroke-width= \" 2 \" stroke-linecap= \" round \" stroke-linejoin= \" round \" aria-hidden= \" true \" ><path d= \" M18 11V6a2 2 0 0 0-4 0v5 \" /><path d= \" M14 10V4a2 2 0 0 0-4 0v6 \" /><path d= \" M10 10.5V6a2 2 0 0 0-4 0v8 \" /><path d= \" M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15 \" /></svg> " };
var IC22 = { " mic " : " <svg viewBox= \" 0 0 24 24 \" width= \" 22 \" height= \" 22 \" fill= \" none \" stroke= \" currentColor \" stroke-width= \" 2 \" stroke-linecap= \" round \" stroke-linejoin= \" round \" aria-hidden= \" true \" ><rect x= \" 9 \" y= \" 2 \" width= \" 6 \" height= \" 12 \" rx= \" 3 \" /><path d= \" M19 10v2a7 7 0 0 1-14 0v-2M12 19v3 \" /></svg> " , " micoff " : " <svg viewBox= \" 0 0 24 24 \" width= \" 22 \" height= \" 22 \" fill= \" none \" stroke= \" currentColor \" stroke-width= \" 2 \" stroke-linecap= \" round \" stroke-linejoin= \" round \" aria-hidden= \" true \" ><rect x= \" 9 \" y= \" 2 \" width= \" 6 \" height= \" 12 \" rx= \" 3 \" /><path d= \" M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M3 3l18 18 \" /></svg> " , " cam " : " <svg viewBox= \" 0 0 24 24 \" width= \" 22 \" height= \" 22 \" fill= \" none \" stroke= \" currentColor \" stroke-width= \" 2 \" stroke-linecap= \" round \" stroke-linejoin= \" round \" aria-hidden= \" true \" ><path d= \" m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11 \" /><rect x= \" 2 \" y= \" 6 \" width= \" 14 \" height= \" 12 \" rx= \" 2 \" /></svg> " , " camoff " : " <svg viewBox= \" 0 0 24 24 \" width= \" 22 \" height= \" 22 \" fill= \" none \" stroke= \" currentColor \" stroke-width= \" 2 \" stroke-linecap= \" round \" stroke-linejoin= \" round \" aria-hidden= \" true \" ><path d= \" m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11 \" /><rect x= \" 2 \" y= \" 6 \" width= \" 14 \" height= \" 12 \" rx= \" 2 \" /><path d= \" M2 2l20 20 \" /></svg> " };
var S = {
eleves : [ 'Léa M.' , 'Yanis B.' , 'Adam D.' , 'Rayan H.' , 'Emma G.' , 'Lucas M.' , 'Jade F.' , 'Maël G.' , 'Zoé L.' , 'Camille D.' , 'Sarah N.' , 'Tom L.' , 'Hugo P.' ],
mains : [[ 'Yanis B.' , 'Lab VLAN · étape 4' , 190 ], [ 'Adam D.' , 'Masque /26' , 75 ], [ 'Rayan H.' , 'Lab VLAN · étape 2' , 40 ]],
attente : [ 'Nathan R.' , 'Inès K.' ], parole : null , chat : false , moi : 'Léa M.'
};
var $ = function ( s ) { return document . querySelector ( s ); }, $ $ = function ( s ) { return document . querySelectorAll ( s ); };
var ini = function ( n ) { return n . split ( ' ' ) . map ( function ( p ) { return p [ 0 ]; }) . join ( '' ); };
var duree = function ( s ) { return s < 60 ? s + ' s' : Math . floor ( s / 60 ) + ' min' ; };
var COUL = [ '#d2e3fc' , '#ceead6' , '#fde293' , '#fad2cf' , '#e9d2fd' , '#cbf0f8' ];
var btnB = 'display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:0;cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap;' ;
function enMain ( n ) { return S . mains . some ( function ( m ) { return m [ 0 ] === n ; }); }
function donner ( n ) { S . parole = n ; S . mains = S . mains . filter ( function ( m ) { return m [ 0 ] !== n ; }); rendre (); }
function renderProf () {
$ ( '#v-nb' ) . textContent = ( S . eleves . length + 1 ) + ' participants' ;
var g = '<li style="position:relative;aspect-ratio:4/3;border-radius:16px;background:#e8f0fe;display:grid;place-items:center"><span style="width:56px;height:56px;border-radius:50%;background:#0b57d0;color:#fff;display:grid;place-items:center;font-size:18px;font-weight:800">MB</span><span style="position:absolute;left:10px;bottom:8px;font-size:13px;font-weight:700;color:#0b1220">M. B. (vous)</span><span style="position:absolute;right:10px;bottom:8px;color:#0b57d0">' + IC . mic + '</span></li>' ;
g += S . eleves . map ( function ( n , i ) {
var p = S . parole === n , m = enMain ( n );
return '<li class="group" style="position:relative;aspect-ratio:4/3;border-radius:16px;background:#f1f3f4;display:grid;place-items:center;' + ( p ? 'box-shadow:inset 0 0 0 3px #0b57d0;' : '' ) + '"><span style="width:56px;height:56px;border-radius:50%;background:' + COUL [ i % COUL . length ] + ';color:#0b1220;display:grid;place-items:center;font-size:18px;font-weight:800">' + ini ( n ) + '</span>' +
( m ? '<span style="position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:999px;background:#fef7e0;color:#7a4b00;font-size:12px;font-weight:800">' + IC . hand . replace ( / width = " 18 " height = " 18 " / , 'width="14" height="14"' ) + 'Main levée</span>' : '' ) +
( p ? '<span style="position:absolute;left:8px;top:8px;height:24px;padding:0 8px;border-radius:999px;background:#0b57d0;color:#fff;display:inline-flex;align-items:center;font-size:12px;font-weight:800">A la parole</span>' : '' ) +
'<button type="button" data-exclure="' + n + '" class="opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100" style="position:absolute;right:8px;top:8px;height:26px;padding:0 10px;border-radius:999px;border:1px solid #dadce0;background:#fff;color:#b3261e;font-size:12px;font-weight:700;cursor:pointer">Exclure</button>' +
'<span style="position:absolute;left:10px;bottom:8px;font-size:13px;font-weight:700;color:#0b1220">' + n + '</span><span title="' + ( p ? 'Micro ouvert' : 'En sourdine' ) + '" style="position:absolute;right:10px;bottom:8px;color:' + ( p ? '#0b57d0' : '#b3261e' ) + '">' + ( p ? IC . mic : IC . micoff ) + '</span></li>' ;
}) . join ( '' );
$ ( '#v-grille' ) . innerHTML = g ;
var bar = $ ( '#v-parole' );
if ( S . parole ) { bar . style . cssText = 'display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;background:#e8f0fe;border-bottom:1px solid #d2e3fc' ; bar . innerHTML = '<span style="display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#0b57d0">' + IC . mic + S . parole + ' a la parole</span><button type="button" id="v-retirer" style="' + btnB + 'background:#fff;color:#0b1220;border:1px solid #dadce0">Retirer la parole</button>' ; }
else bar . style . cssText = 'display:none' ;
$ ( '#v-nb-mains' ) . textContent = S . mains . length ;
$ ( '#v-mains' ) . innerHTML = S . mains . length ? S . mains . map ( function ( m , i ) { return '<li style="display:flex;align-items:center;gap:12px;padding:10px 8px;' + ( i ? 'border-top:1px solid #f1f3f4' : '' ) + '"><span style="width:20px;font-family:IBM Plex Mono,monospace;font-size:13px;font-weight:600;color:#5f6368">' + ( i + 1 ) + '</span><span style="flex:1;min-width:0"><span style="display:block;font-size:15px;font-weight:700;color:#0b1220">' + m [ 0 ] + '</span><span style="display:block;font-size:13px;font-weight:500;color:#5f6368">' + m [ 1 ] + ' · depuis ' + duree ( m [ 2 ]) + '</span></span><button type="button" data-donner="' + m [ 0 ] + '" style="' + btnB + 'background:#0b57d0;color:#fff">Donner la parole</button></li>' ; }) . join ( '' ) : '<li style="padding:16px 8px;font-size:14px;font-weight:600;color:#5f6368">Aucune main levée.</li>' ;
$ ( '#v-attente' ) . innerHTML = S . attente . length ? S . attente . map ( function ( n , i ) { return '<li style="display:flex;align-items:center;gap:8px;padding:10px 8px;' + ( i ? 'border-top:1px solid #f1f3f4' : '' ) + '"><span style="flex:1;font-size:15px;font-weight:700;color:#0b1220">' + n + '</span><button type="button" data-refuser="' + n + '" style="' + btnB + 'background:none;color:#5f6368">Refuser</button><button type="button" data-admettre="' + n + '" style="' + btnB + 'background:#e8f0fe;color:#0b57d0">Admettre</button></li>' ; }) . join ( '' ) : '<li style="padding:16px 8px;font-size:14px;font-weight:600;color:#5f6368">Personne en attente.</li>' ;
var sw = $ ( '#v-chat-switch' ); sw . setAttribute ( 'aria-checked' , String ( S . chat )); sw . style . background = S . chat ? '#0b57d0' : '#9aa0a6' ; sw . firstElementChild . style . transform = S . chat ? 'translateX(18px)' : 'none' ;
$ ( '#v-chat' ) . innerHTML = S . chat ? '<ul style="margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:14px"><li><b>Sarah N.</b> <span style="color:#3c4043">Le lien du lab ne s’ ’ : '<p style="margin:0;font-size:14px;font-weight:600;color:#5f6368">Chat désactivé. Les élèves ne peuvent pas écrire.</p>' ;
}
function renderEleve () {
var p = S . parole === S . moi , m = enMain ( S . moi );
$ $ ( '[data-statut-e]' ) . forEach ( function ( e ) { e . style . background = p ? '#e6f4ea' : '#f1f3f4' ; e . style . color = p ? '#137333' : '#3c4043' ; e . innerHTML = ( p ? IC . mic : IC . micoff ) + ( p ? 'Tu as la parole' : ( m ? 'Main levée · en attente' : 'En sourdine' )); });
$ $ ( '[data-micro-e],[data-cam-e]' ) . forEach ( function ( b ) { var cam = b . hasAttribute ( 'data-cam-e' ); b . disabled = ! p ; b . innerHTML = cam ? ( p ? IC22 . cam : IC22 . camoff ) : ( p ? IC22 . mic : IC22 . micoff ); b . style . background = p ? '#e8f0fe' : '#e8eaed' ; b . style . color = p ? '#0b57d0' : '#9aa0a6' ; b . style . border = '0' ; b . style . cursor = p ? 'pointer' : 'not-allowed' ; b . title = p ? ( cam ? 'Caméra' : 'Micro' ) : 'Le prof doit te donner la parole' ; });
$ $ ( '[data-main-e]' ) . forEach ( function ( b ) { b . setAttribute ( 'aria-pressed' , String ( m )); b . disabled = p ; b . style . opacity = p ? '.5' : '1' ; b . querySelector ( 'span' ) . textContent = m ? 'Main levée · le prof est prévenu' : 'Lever la main' ; });
$ ( '[data-aide-e]' ) . textContent = p ? 'Ton micro et ta caméra sont débloqués. Le prof peut te retirer la parole à tout moment.' : 'Ton micro et ta caméra s’ ;
}
function rendre () { renderProf (); renderEleve (); }
function vue ( v ) { $ $ ( '[data-panel]' ) . forEach ( function ( p ) { p . style . display = p . dataset . panel === v ? '' : 'none' ; }); $ $ ( '[data-vue]' ) . forEach ( function ( b ) { var on = b . dataset . vue === v ; b . setAttribute ( 'aria-selected' , String ( on )); b . style . background = on ? '#fff' : 'transparent' ; b . style . color = on ? '#0b57d0' : '#3c4043' ; b . style . boxShadow = on ? '0 1px 2px rgba(15,23,42,.15)' : 'none' ; }); try { localStorage . setItem ( 'syllabus-visio-vue' , v ); } catch ( x ) {} }
document . addEventListener ( 'click' , function ( e ) {
var t = e . target . closest ( 'button' ); if ( ! t ) return ;
if ( t . dataset . vue ) return vue ( t . dataset . vue );
if ( t . dataset . donner ) return donner ( t . dataset . donner );
if ( t . dataset . admettre ) { S . attente = S . attente . filter ( function ( n ) { return n !== t . dataset . admettre ; }); S . eleves . push ( t . dataset . admettre ); return rendre (); }
if ( t . dataset . refuser ) { S . attente = S . attente . filter ( function ( n ) { return n !== t . dataset . refuser ; }); return rendre (); }
if ( t . dataset . exclure ) { var n = t . dataset . exclure ; if ( confirm ( 'Exclure ' + n + ' de la visio ?' )) { S . eleves = S . eleves . filter ( function ( x ) { return x !== n ; }); S . mains = S . mains . filter ( function ( m ) { return m [ 0 ] !== n ; }); if ( S . parole === n ) S . parole = null ; rendre (); } return ; }
if ( t . id === 'v-retirer' || t . id === 'v-mute-all' ) { S . parole = null ; return rendre (); }
if ( t . id === 'v-tout-admettre' ) { S . eleves = S . eleves . concat ( S . attente ); S . attente = []; return rendre (); }
if ( t . id === 'v-chat-switch' ) { S . chat = ! S . chat ; return rendre (); }
if ( t . hasAttribute ( 'data-main-e' )) { if ( enMain ( S . moi )) S . mains = S . mains . filter ( function ( m ) { return m [ 0 ] !== S . moi ; }); else if ( S . parole !== S . moi ) S . mains . push ([ S . moi , 'Lab VLAN · étape 3' , 0 ]); return rendre (); }
});
var t0 = 24 * 60 + 12 ;
setInterval ( function () { t0 ++ ; S . mains . forEach ( function ( m ) { m [ 2 ] ++ ; }); $ ( '#v-chrono' ) . textContent = [ Math . floor ( t0 / 3600 ), Math . floor ( t0 / 60 ) % 60 , t0 % 60 ] . map ( function ( x ) { return String ( x ) . padStart ( 2 , '0' ); }) . join ( ':' ); if ( t0 % 15 === 0 ) renderProf (); }, 1000 );
var v0 = 'prof' ; try { v0 = new URLSearchParams ( location . search ) . get ( 'vue' ) || localStorage . getItem ( 'syllabus-visio-vue' ) || 'prof' ; } catch ( x ) {}
rendre (); vue ( v0 );
})();
</ 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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?outil=sujet " style = " font-size:14px;font-weight:500;color:#5f6368;text-decoration:none " class = " hover:text-[#0b57d0] " > Examens </ a ></ li >< li >< a href = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 = " apercu-ressource.html?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 >
