html, body { height:100%; margin:0; background:#0b1220; color:#e6eef8; font-family:Inter,system-ui,Segoe UI,Roboto,Arial; } body { display:flex; flex-direction:column; } .topbar { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px 14px; background:rgba(255,255,255,0.02); backdrop-filter:blur(4px); position:fixed; top:0; width:100%; z-index:100; } .topbar-title { display:flex; align-items:center; gap:8px; width:100%; } .label { font-size:14px; color:#94a3b8; } .controls { display:flex; gap:10px; margin-top:5px; } .controls button { padding:10px; font-size:18px; border-radius:6px; border:none; background-color:#64748b; color:white; cursor:pointer; } .controls button:hover { background-color:#475569; } .viewer-wrap { display:flex; justify-content:center; align-items:flex-start; padding:18px; flex:1; margin-top:64px; /* hauteur topbar */ margin-bottom:50px; /* hauteur bottombar */ overflow:auto; gap:10px; position:relative; } canvas { background:white; border-radius:6px; box-shadow:0 6px 30px rgba(2,6,23,0.6); margin:0 5px; } #rule-box { display:none; position:fixed; top:30px; left:50%; transform:translateX(-50%); width:95%; max-width:1200px; height:15%; background: rgba(59,130,246,0.05); border: 2px solid #3b82f6; border-radius: 8px; pointer-events:auto; z-index:200; overflow-y:auto; cursor:grab; } .access-container { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; padding:20px; text-align:center; } .bottombar { display:flex; justify-content:space-between; align-items:center; padding:5px 20px; background:rgba(255,255,255,0.02); backdrop-filter:blur(4px); position:fixed; bottom:0; width:100%; z-index:100; } @media print{ body *{display:none !important} } .logos-bottom { display:flex; justify-content:center; align-items:center; gap:5vw; margin-top:5vh; } .logo-large { width:20vw; height:auto; } .logo-small { width:12vw; height:auto; } .info-icon { position: fixed; top: 5px; /* plus proche du haut de l'écran */ right: 15px; font-size: 28px; cursor: pointer; z-index: 1000; } /* Modale infos utiles */ .info-modal { display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); justify-content:center; align-items:center; } .info-content { background:white; color:black; padding:20px; border-radius:12px; max-width:400px; width:90%; text-align:left; } .info-content h2 { margin-top:0; color:#333; } .info-content ul { padding-left:20px; } .info-content a { color:#0077cc; text-decoration:none; } .info-content a:hover { text-decoration:underline; } .close { float:right; font-size:24px; cursor:pointer; }

ℹ️

Bienvenue sur le Lecteur DEJ

Ici, les conseils ne sont pas donnés comme dans un manuel ennuyeux.
Chaque leçon chemines avec l'histoire : un personnage, une situation, un problème… et surtout une solution.

Entre ton code et commence l'aventure…