/* Ludisca — la feuille de style de l'application (sortie de index.html le 24/10/2026). */ *{box-sizing:border-box;margin:0;padding:0} :root{--violet:#5B47B8;--violet-l:#EEEBFB;--bg:#fff;--bg2:#EEF2F8;--bg3:#F5F8FC;--text:#1B2436;--text2:#4F5B70;--text3:#8A94A6;--border:#DDE3EC;--border2:#C3CCD9;--teal:#0E7C70;--teal-l:#DDF4F1;--teal-d:#0A6158;--blue:#185FA5;--blue-l:#E6F1FB;--amber:#854F0B;--amber-l:#FAEEDA;--red:#C2410C;--red-l:#FCE9DC;--green:#00775A;--green-l:#DDF2EB;--corr:#6D3FA0;--corr-l:#F1E9FA;--gray-l:#EEF1F6;--gray:#5A6475;--titre:#243B6B;--turq:#18B6A4;--corail:#FF8066;--sur-teal:#fff;--r:8px;--rl:12px} /* Couleurs : « juste » en vert bleuté, « faux » en orange vermillon, la correction en violet — trois teintes qui restent distinctes avec un daltonisme rouge-vert. Et chaque état a aussi sa forme (✓, ✗, pointillés, hachures, double trait) : rien ne se lit par la seule couleur. */ @media(prefers-color-scheme:dark){:root{--violet:#B3A6F0;--violet-l:#2A2346;--bg:#162033;--bg2:#1E2A40;--bg3:#26334A;--text:#E8EDF5;--text2:#A9B4C6;--text3:#7D889B;--border:#33415A;--border2:#4A5873;--teal-l:#0B3A38;--blue-l:#042C53;--amber-l:#412402;--red-l:#4A1E08;--green-l:#06362B;--corr:#C8A2E8;--corr-l:#2E1F3D;--gray-l:#222D41;--teal:#2CC4B2;--teal-d:#6FDCCE;--sur-teal:#0B1A2E;--titre:#C9D6EA}} body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg3);color:var(--text);font-size:14px;height:100vh;display:flex;flex-direction:column;overflow:hidden} .topbar{background:var(--bg);border-bottom:1px solid var(--border);padding:.6rem 1.25rem;display:flex;align-items:center;gap:12px;flex-shrink:0} .topbar-title{font-size:14px;font-weight:600;flex:1;display:flex;align-items:center;gap:7px} /* Le logo : le symbole (dessin vectoriel) et le mot « ludisca », dont la couleur suit le thème (marine en clair, bleu pâle en sombre). */ :root{--marque:#243B6B} @media(prefers-color-scheme:dark){:root{--marque:#C9D6EA}} .marque-sym{height:24px;width:auto;flex-shrink:0} .marque-mot{display:inline-block;height:19px;aspect-ratio:988/251;flex-shrink:0;background:var(--marque); -webkit-mask:url(/logo-texte.png) center/contain no-repeat;mask:url(/logo-texte.png) center/contain no-repeat} .save-ok{font-size:11px;color:var(--teal);display:flex;align-items:center;gap:4px} .app{display:flex;flex:1;min-height:0;overflow:hidden} .ni{display:flex;align-items:center;gap:9px;padding:8px .75rem;cursor:pointer;font-size:13px;color:var(--text2);border-left:3px solid transparent;transition:all .12s} .ni:hover{background:var(--bg2);color:var(--text)} .ni.active{background:var(--bg2);color:var(--teal);border-left-color:var(--teal);font-weight:500} .ni i{font-size:16px} .main{flex:1;overflow-y:auto;overflow-x:hidden;padding:1.5rem;min-width:0;max-width:calc(100vw - 200px)} .page{display:none}.page.active{display:block} h2{font-size:17px;font-weight:600;margin-bottom:1.25rem;color:var(--titre)} h1,h3{color:var(--titre)} .stat{background:var(--bg2);border-radius:var(--r);padding:.9rem;text-align:center} .stat .val{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums} .stat .ss{font-size:12px;color:var(--blue);margin-top:4px;line-height:1.3} .stat .ss:empty{display:none} .btn{padding:7px 14px;border-radius:var(--r);border:1px solid var(--border2);background:var(--bg);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .12s;white-space:nowrap} .btn:hover{background:var(--bg2)} .btn.pr{background:var(--teal);color:var(--sur-teal);border-color:var(--teal)}.btn.pr:hover{background:var(--teal-d);border-color:var(--teal-d)} .btn.dr{background:#E24B4A;color:#fff;border-color:#E24B4A}.btn.dr:hover{background:var(--red)} .btn.sm{padding:5px 10px;font-size:12px} .th{display:grid;padding:8px 1rem;font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);font-weight:600} .tr{display:grid;padding:9px 1rem;font-size:13px;border-bottom:1px solid var(--border);align-items:center;transition:background .1s} .tr:last-child{border-bottom:none} .tr:hover{background:var(--bg2)} .badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600} .b-wip{background:var(--amber-l);color:var(--amber)} .b-done{background:var(--green-l);color:var(--green)} .b-high{background:var(--red-l);color:var(--red)} .b-mid{background:var(--amber-l);color:var(--amber)} .b-low{background:var(--gray-l);color:var(--gray)} .wn{display:flex;align-items:center;gap:8px;margin-bottom:.9rem} .wl{font-size:14px;font-weight:600;flex:1} .wg{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:1rem} .dc{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);min-height:140px;overflow:hidden} .dh{padding:7px;text-align:center;border-bottom:1px solid var(--border);font-size:11px;color:var(--text2)} .dh .dn{font-size:17px;font-weight:700;display:block;color:var(--text)} .de{padding:5px} .ec{background:var(--blue-l);color:var(--blue);border-radius:5px;padding:3px 6px;font-size:10px;margin-bottom:3px;display:flex;justify-content:space-between;align-items:center} .ec button{background:none;border:none;cursor:pointer;color:inherit;opacity:0;font-size:11px;padding:0 2px} .ec:hover button{opacity:1} .cn{font-size:14px;font-weight:600} .cs{font-size:12px;color:var(--text2);margin-top:2px} .ce{font-size:12px;color:var(--blue);margin-top:5px;word-break:break-all} .mb{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center} .mb.open{display:flex} /* Ces fenêtres s'ouvrent aussi depuis l'écran d'un exercice (z-index 400) : elles passent devant. */ #wb-conf-mb,#pt-mb,#ptf-mb{z-index:650} .mo{background:var(--bg);border:1px solid var(--border2);border-radius:var(--rl);padding:1.5rem;width:370px;max-width:95vw;max-height:90vh;overflow-y:auto} .mo h3{font-size:15px;font-weight:600;margin-bottom:1rem} .fg{margin-bottom:11px} .fg label{display:block;font-size:12px;color:var(--text2);margin-bottom:3px;font-weight:500} .fg input,.fg select,.fg textarea{width:100%;padding:8px 10px;font-size:13px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);outline:none} .fg input:focus,.fg select:focus{border-color:var(--teal)} .fg textarea{resize:vertical;min-height:70px;font-family:inherit} .ma{display:flex;gap:8px;justify-content:flex-end;margin-top:.9rem} .db{background:none;border:none;cursor:pointer;color:var(--text3);padding:3px 5px;border-radius:4px;font-size:14px;display:flex;align-items:center} .db:hover{color:var(--red);background:var(--red-l)} .sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem} .fact-table{width:100%;border-collapse:collapse;font-size:13px} .fact-table th{text-align:left;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;padding:7px 12px;background:var(--bg2);border-bottom:1px solid var(--border)} .fact-table td{padding:10px 12px;border-bottom:1px solid var(--border)} .fact-table tr:last-child td{border-bottom:none} .fact-table tr:hover td{background:var(--bg2)} .dash-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .login-screen{position:fixed;inset:0;background:var(--bg3);z-index:1000;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:16px 0} /* marge auto : centre quand ça tient, laisse défiler sinon — sans cela le bas de la carte devenait inatteignable sur un écran de téléphone */ .login-screen .login-card{margin:auto} .login-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:2.5rem 2rem;width:340px;max-width:95vw;text-align:center} .login-logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:.6rem} .login-logo .marque-sym{height:46px}.login-logo .marque-mot{height:36px} .login-title{font-size:18px;font-weight:600;margin-bottom:.25rem} .login-sub{font-size:12px;color:var(--text3);margin-bottom:1.75rem} .login-field{margin-bottom:12px;text-align:left} .login-field label{display:block;font-size:12px;color:var(--text2);font-weight:500;margin-bottom:4px} .login-field input{width:100%;padding:10px 12px;font-size:14px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);outline:none;transition:border-color .15s} .login-field input:focus{border-color:var(--teal)} .login-btn{width:100%;padding:11px;background:var(--teal);color:var(--sur-teal);border:none;border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;margin-top:8px;transition:background .15s} .login-btn:hover{background:var(--teal-d)} .login-oubli{display:block;margin:10px auto 0;background:none;border:none;color:var(--teal);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline} .login-oubli[hidden],#login-oubli[hidden]{display:none} .login-partage{display:flex;gap:8px;align-items:flex-start;text-align:left;font-size:12.5px;line-height:1.4;color:var(--text2);margin:2px 0 6px;cursor:pointer} .login-partage input{flex:none;margin-top:2px;accent-color:var(--teal);width:16px;height:16px} .login-card.etape-2fa .login-partage{display:none} /* Ordinateur partagé : jamais « faire confiance à cet appareil ». */ body:has(#login-partage:checked) .login-2fa-conf{display:none} .login-inscription{display:block;width:100%;margin:16px 0 0;padding:10px;border:1.5px dashed var(--teal);border-radius:var(--r);background:var(--teal-l);color:var(--teal);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer} .login-inscription[hidden]{display:none} #ins-mb{z-index:1100} /* au-dessus de l'écran de connexion */ /* Ouvertes depuis la fiche ou le constructeur d'une activité (#exo-vue, z-index 400) : au-dessus d'elle. */ #wb-assign-mb,#wb-conf-mb,#rv-mb,#geo-mod-mb{z-index:1150} .rv-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px} .rv-liste li{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:var(--r);padding:6px 10px;font-size:14px} .rv-liste li i{color:var(--fam-memo)} .rv-liste li span{flex:1;color:var(--text3);font-size:12.5px} .rv-total{font-size:13px;color:var(--text2);margin-top:6px;font-weight:600} .ins-mo{max-width:560px;width:95%;text-align:left} .ins-formules{display:grid;gap:8px;margin:10px 0 14px} .ins-formules[hidden]{display:none} .ins-f{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;border:1.5px solid var(--border2);border-radius:var(--rl);cursor:pointer} .ins-f input{grid-row:1 / 3;accent-color:var(--teal);width:18px;height:18px} .ins-f i{grid-row:1 / 3;font-size:24px;color:var(--teal)} .ins-f b{font-size:14.5px} .ins-f span{grid-column:3;font-size:12.5px;color:var(--text2)} .ins-f:has(input:checked){border-color:var(--teal);background:var(--teal-l)} .ins-piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} .ins-cond{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;margin:4px 0 8px} .ins-cond input{margin-top:2px;accent-color:var(--teal);flex:none} .ins-fait p{font-size:14px;line-height:1.55;margin:0 0 10px} #login-oubli{margin-top:12px} #login-oubli input{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--border2);border-radius:var(--r);font:inherit;margin:6px 0 10px;background:var(--bg);color:var(--text)} .login-oubli-msg{font-size:13px;color:var(--text2);margin-top:8px;line-height:1.45} .login-oubli-msg:empty{display:none} .login-err{color:var(--red);font-size:12px;margin-top:10px;display:none} .sec-assist{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)} .sec-assist h4{font-size:13px;margin-bottom:6px;color:var(--titre)} .sec-assist-liste{font-size:12px;color:var(--text2);margin:4px 0 0 18px;line-height:1.6} /* Bandeau de l'état de l'espace (essai, impayé, lecture seule) : un pictogramme en plus de la couleur. */ .esp-bandeau{display:flex;align-items:center;gap:10px;padding:7px 1.25rem;font-size:13px;background:var(--teal-l);color:var(--text);border-bottom:1px solid var(--border);flex-shrink:0} .esp-bandeau.alerte{background:var(--red-l);border-bottom-color:var(--red)} /* Caché, il l'est vraiment (le display:flex ci-dessus l'emportait sur « hidden »). */ .esp-bandeau[hidden]{display:none} .esp-bandeau .esp-pic{font-weight:700;color:var(--teal)} #offre-bandeau button{background:none;border:1px solid var(--border2);border-radius:var(--r);padding:3px 9px;font:inherit;font-size:12px;color:var(--text);cursor:pointer} .of-nom{font-size:16px;font-weight:700;color:var(--titre);margin-bottom:6px} .of-essai{font-size:12px;font-weight:600;color:var(--amber);border:1px dashed var(--amber);border-radius:999px;padding:1px 8px;margin-left:6px} .of-j{margin:12px 0} .of-jt{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--text2)} .of-jt b{color:var(--text);font-variant-numeric:tabular-nums} .of-jb{height:8px;border-radius:4px;background:var(--bg2);margin-top:5px;overflow:hidden} .of-jb span{display:block;height:100%;background:var(--teal);border-radius:4px} .of-j.plein .of-jb span{background:repeating-linear-gradient(45deg,var(--red) 0 6px,transparent 6px 9px),var(--red-l)} .of-jp{font-size:12px;color:var(--red);margin-top:4px} .of-v{font-size:13px;margin-top:10px} .of-pai{border-top:1px solid var(--border);margin-top:14px;padding-top:4px} .of-t{font-size:14px;margin:10px 0 6px;color:var(--titre)} .of-btns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0} .of-msg{border-radius:var(--r);padding:8px 10px;font-size:13px;background:var(--teal-l);margin:0 0 10px} .of-msg span{font-weight:700;margin-right:6px;color:var(--teal)} .of-msg.alerte{background:var(--red-l)}.of-msg.alerte span{color:var(--red)} .of-note{font-size:12px;color:var(--text3);margin:6px 0} .of-err{font-size:13px;color:var(--red);margin:8px 0}.of-err.ok{color:var(--teal)} .of-offres{display:flex;flex-direction:column;gap:6px;margin:10px 0} .of-offre{display:flex;align-items:center;gap:10px;border:1px solid var(--border2);border-radius:var(--r);padding:8px 10px;cursor:pointer;font-size:13.5px} .of-offre.on{border-color:var(--teal);border-width:2px;padding:7px 9px;background:var(--teal-l)} .of-ol{flex:1}.of-ol em{font-style:normal;color:var(--text3);font-size:12px} .of-offre b small{font-weight:400;color:var(--text3)} .of-case{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:8px 0;cursor:pointer} .of-case input{margin-top:2px} .of-renonce{background:var(--bg2);border-radius:var(--r);padding:8px 10px} .of-total{font-size:14px;margin:10px 0 4px} .of-hist{margin-top:10px;font-size:12.5px}.of-hist summary{cursor:pointer;color:var(--text2)} .of-hist div{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:4px 0;border-bottom:1px solid var(--border)} .esp-bandeau button.esp-offre{margin-left:auto;border:1px solid var(--border2);border-radius:var(--r);padding:3px 9px;font-size:12px;color:var(--text)} .esp-bandeau button.esp-offre + button{margin-left:6px} .of-ok{color:var(--teal);font-weight:700} .of-non{color:var(--red);font-weight:700} .esp-bandeau.alerte .esp-pic{color:var(--red)} .esp-bandeau button{margin-left:auto;border:none;background:transparent;color:var(--text2);cursor:pointer;font-size:14px} .esp-bandeau.assist{background:var(--violet-l);border-bottom:2px dashed var(--violet)} .esp-bandeau.assist .esp-pic{color:var(--violet)} .esp-bandeau .assist-fin{border:1px solid var(--violet);color:var(--violet);border-radius:var(--r);padding:4px 10px;font-size:12px;font-weight:600;background:var(--bg)} /* Pendant une assistance, pas de déconnexion ni de réglages de sécurité : on termine l'assistance. */ .mode-assistance #topbar-logout,.mode-assistance [onclick="secOuvrir()"]{display:none!important} .mode-assistance .esp-bandeau .assist-fin{display:inline-block!important} .login-err.visible{display:block} /* Double vérification */ #login-2fa{display:none} .login-card.etape-2fa #login-2fa{display:block} .login-card.etape-2fa .login-field,.login-card.etape-2fa > .login-btn,.login-card.etape-2fa #login-err, .login-card.etape-2fa #google-repli,.login-card.etape-2fa #google-zone{display:none!important} .login-2fa-t{font-weight:700;font-size:15px;margin:6px 0 6px;display:flex;align-items:center;gap:6px} .login-2fa-t i{color:var(--teal);font-size:18px} .login-2fa-p{font-size:13px;color:var(--text2);margin-bottom:10px;line-height:1.45} #login-2fa-code{width:100%;box-sizing:border-box;font-size:24px;letter-spacing:6px;text-align:center;padding:10px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:inherit} .login-2fa-conf{display:flex;align-items:center;gap:7px;font-size:13px;margin:10px 0 12px;cursor:pointer} .login-2fa-liens{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px} .login-2fa-liens button{background:none;border:none;font-family:inherit;font-size:12px;color:var(--text3);cursor:pointer;text-decoration:underline;padding:3px} .sec-etat{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);font-size:14px;margin-bottom:12px} .sec-etat.on{background:var(--green-l);color:var(--green)} .sec-etat.off{background:var(--amber-l);color:var(--amber)} .sec-etat i{font-size:20px} .sec-p{font-size:13.5px;line-height:1.5;color:var(--text2);margin:0 0 10px} .sec-qr{display:flex;justify-content:center;padding:12px;background:#fff;border-radius:var(--r);margin:8px auto;width:max-content} .sec-secret{font-family:monospace;font-size:14px;letter-spacing:1px;word-break:break-all;background:var(--bg2);padding:8px 10px;border-radius:var(--r);text-align:center} .sec-codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-family:monospace;font-size:16px;text-align:center;margin:8px 0} .sec-codes span{background:var(--bg2);padding:6px;border-radius:var(--r)} .sec-in{width:100%;box-sizing:border-box;font-size:20px;letter-spacing:4px;text-align:center;padding:8px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:inherit} .sec-err{color:var(--red);font-size:12.5px;margin-top:6px;min-height:1em} .login-session{font-size:11px;color:var(--text3);margin-top:14px} .liens-legaux{font-size:11px;color:var(--text3);margin-top:10px;text-align:center;line-height:1.8} .liens-legaux a{color:inherit;text-decoration:underline;text-underline-offset:2px} .liens-legaux a:hover{color:var(--text)} .logout-btn{background:none;border:none;cursor:pointer;font-size:12px;color:var(--text3);display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:var(--r)} .logout-btn:hover{color:var(--red);background:var(--red-l)} .home-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:1.5rem 1rem;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:all .15s;text-align:center} .home-card:hover{border-color:var(--teal);background:var(--teal-l);color:var(--teal)} .home-card i{font-size:26px;color:var(--teal)} .home-card span{font-size:13px;font-weight:500} /* Vue semaine et jour avec heures */ .cal-outer{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--bg);max-height:620px;display:flex;flex-direction:column} .cal-header-row{display:flex;flex-shrink:0;border-bottom:1px solid var(--border)} .cal-header-corner{width:52px;min-width:52px;background:var(--bg2);border-right:1px solid var(--border)} .cal-header-days{flex:1;display:flex;overflow-x:hidden} .cal-body{display:flex;flex:1;overflow-y:auto;overflow-x:auto;background:var(--bg)} .cal-hours{width:52px;min-width:52px;border-right:1px solid var(--border);background:var(--bg2);flex-shrink:0;position:sticky;left:0;z-index:3} .cal-hour-label{height:48px;display:flex;align-items:flex-start;justify-content:flex-end;padding:2px 6px 0 0;font-size:10px;color:var(--text3);border-bottom:1px solid var(--border);position:relative;z-index:1} .cal-days{flex:1;display:flex;position:relative;align-items:stretch;background-image:repeating-linear-gradient(to bottom,transparent,transparent 47px,var(--border) 47px,var(--border) 48px);background-size:100% 48px;background-position:0 0} .cal-day-col{flex:1;min-width:90px;border-right:1px solid var(--border);position:relative;background:var(--bg);align-self:stretch} .cal-day-col:last-child{border-right:none} .cal-day-header{height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg2);flex:1;border-right:1px solid var(--border)} .cal-day-header:last-child{border-right:none} .cal-day-header .dname{font-size:10px;color:var(--text2);text-transform:uppercase} .cal-day-header .dnum{font-size:16px;font-weight:700;color:var(--text);line-height:1} .cal-slot{height:48px;border-bottom:1px solid var(--border);position:relative;box-sizing:border-box} .cal-slot:nth-child(odd){background:rgba(0,0,0,.015)} .cal-slot:nth-child(even){background:var(--bg)} .cal-ev-block{position:absolute;left:2px;right:2px;border-radius:4px;padding:2px 5px;font-size:10px;overflow:hidden;cursor:pointer;z-index:1;line-height:1.3} .cal-ev-block strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cal-ev-block span{font-size:9px;opacity:.8} .edt-planned{background:var(--blue-l);color:var(--blue);border:1px solid #a8c8ef} .edt-done{background:var(--green-l);color:var(--green);border:1px solid #9ecb70} .edt-not-done{background:var(--red-l);color:var(--red);border:1px solid #e8aaaa} /* ── TABLEAU BLANC ───────────────────────────────────────────────────────── La surface n'a pas de hauteur fixée ici : elle est calculée en JavaScript, car elle dépend de la place que laisse réellement la barre d'outils — qui se replie sur deux ou trois lignes selon la largeur de l'écran. */ .wb-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px} #wb-selbar{position:absolute;z-index:13;margin:0;gap:4px;max-width:calc(100% - 16px);padding:4px;background:var(--bg);border:1px solid var(--border2);border-radius:12px;box-shadow:0 4px 14px rgba(20,40,80,.18)} #wb-selbar .btn{min-width:38px;min-height:38px;justify-content:center}.wb-sel-t{padding:0 6px;font-size:13px} .wb-tool{padding:6px 9px;border:1px solid var(--border2);background:var(--bg);color:var(--text);border-radius:var(--r);cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;gap:5px} .wb-tool:hover{border-color:var(--teal)} .wb-tool.on{background:var(--teal);border-color:var(--teal);color:var(--sur-teal)} .wb-sw{width:22px;height:22px;border-radius:50%;border:2px solid var(--border2);cursor:pointer;padding:0;flex-shrink:0} .wb-sw.on{border-color:var(--text);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--text3)} .wb-size{width:27px;height:27px;border:1px solid var(--border2);background:var(--bg);color:var(--text);border-radius:var(--r);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:14px} .wb-size.on{border-color:var(--teal);background:var(--teal-l)} .wb-size i{display:block;border-radius:50%;background:var(--text)} .wb-surface{position:relative;border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;background:#fff} /* Survol d'un glisser-déposer. Le cadre dit où le fichier va tomber : sans ce retour, on lâche au jugé et on ne sait pas si la zone a pris ou non. */ .wb-survol{outline:3px dashed var(--teal);outline-offset:-5px} .wb-survol:after{content:'Déposez ici';position:absolute;z-index:8;top:10px;left:50%;transform:translateX(-50%); font-size:12px;font-weight:600;color:var(--teal-d);background:var(--teal-l); border-radius:999px;padding:4px 14px;pointer-events:none} #wb-list-view.wb-survol{position:relative;min-height:220px;border-radius:var(--rl)} #wb-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair} #wb-canvas.wb-grab{cursor:grab} #wb-canvas.wb-text{cursor:text} #wb-canvas.wb-pointeur{cursor:cell} #wb-canvas.wb-croix{cursor:crosshair} /* La gomme : une gomme inclinée, bout rose en bas à gauche. Le point actif (6 22) est sur ce bout : c'est là qu'elle efface. Le contour sombre la rend visible sur une page blanche comme sur une photo. */ #wb-canvas.wb-gomme{cursor:url("data:image/svg+xml;utf8,") 6 22, cell} /* Le champ de saisie se superpose au tableau, à la place exacte qu'occupera le texte : ce qu'on tape est déjà à sa taille et dans sa police. Le fond reste transparent pour laisser voir ce qu'il y a dessous. */ #wb-text-edit{position:absolute;margin:0;padding:0;border:1px dashed var(--teal);border-radius:3px; background:rgba(255,255,255,.82);color:#1a1a1a;resize:none;overflow:hidden;outline:none; box-shadow:0 0 0 2px rgba(29,158,117,.18);z-index:5; /* Tentative de refuser l'écriture manuscrite du stylet. Chromium n'active la reconnaissance dans un champ que s'il autorise « pan-x » ET « pan-y » ; en retirer un devrait donc l'éteindre, et « pan-y » seul conserve le défilement vertical, le seul dont une zone de texte ait besoin. Essayé sur une Galaxy : sans effet, la reconnaissance venant du clavier du constructeur et non du navigateur. La déclaration reste parce qu'elle est juste et sans coût, mais le vrai réglage est sur l'appareil. Le web n'a rien de mieux à offrir : l'attribut « handwriting » proposé par Edge a été abandonné en novembre 2024 au profit d'un mot-clé « touch-action » encore non livré. */ touch-action:pan-y} /* Navigation d'un diaporama, posée sur la surface. Elle n'apparaît que s'il y a plusieurs pages, et se tient au bord pour masquer le moins possible de ce qu'on regarde. */ .wb-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:64px;z-index:6; border:1px solid var(--border2);background:rgba(255,255,255,.85);color:#5F5E5A; border-radius:var(--r);cursor:pointer;display:none;align-items:center;justify-content:center; font-size:22px;box-shadow:0 1px 6px rgba(0,0,0,.12)} .wb-nav:hover{background:#fff;color:var(--teal);border-color:var(--teal)} .wb-nav:disabled{opacity:.28;cursor:default;box-shadow:none} .wb-nav-g{left:8px} .wb-nav-d{right:8px} /* Commandes posées en bas à gauche de la surface, donc atteignables aussi en plein écran, où la colonne n'est plus là. Revenir en arrière doit être à portée de pouce : c'est le geste qui rattrape tous les autres. */ .wb-flot{position:absolute;bottom:10px;left:10px;z-index:6;display:flex;gap:7px} .wb-flot button{width:54px;height:54px;border:1px solid var(--border2);background:rgba(255,255,255,.85); color:#5F5E5A;border-radius:var(--r);cursor:pointer;display:flex;align-items:center; justify-content:center;font-size:25px;box-shadow:0 1px 6px rgba(0,0,0,.12)} .wb-flot button:hover{background:#fff;color:var(--teal);border-color:var(--teal)} .wb-flot button.on{background:var(--teal);border-color:var(--teal);color:var(--sur-teal)} .wb-flot button.indispo{display:none} .wb-rec{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:8;display:flex; align-items:center;gap:9px;padding:7px 12px;background:var(--bg);border:1px solid var(--red); border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.16);font-size:13px;font-weight:600; color:var(--red);font-variant-numeric:tabular-nums} .wb-rec-pt{width:11px;height:11px;border-radius:50%;background:var(--red);animation:wbPulse 1.1s infinite} @keyframes wbPulse{0%,100%{opacity:1}50%{opacity:.25}} /* Sur écran étroit, trois boutons de 54 px viendraient buter contre le numéro de page, centré en bas. On les resserre : ils restent largement assez grands pour le pouce, et la tablette, elle, garde les grands. */ @media(max-width:640px){ .wb-flot{gap:5px;bottom:8px;left:8px} .wb-flot button{width:44px;height:44px;font-size:21px} } .wb-menu{position:absolute;z-index:9;min-width:196px;padding:4px;background:var(--bg); border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 4px 16px rgba(0,0,0,.18)} .wb-menu-i{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:none; background:none;color:var(--text);font-size:13px;font-family:inherit;text-align:left; cursor:pointer;border-radius:5px} .wb-menu-i:hover{background:var(--teal-l);color:var(--teal-d)} .wb-menu-i.danger{color:var(--red)} .wb-menu-i.danger:hover{background:var(--red-l)} .wb-menu-i i{font-size:16px;flex-shrink:0} .wb-menu-sep{height:1px;background:var(--border);margin:4px 6px} .wb-pagenum{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:6;display:none; font-size:12px;font-weight:600;color:#5F5E5A;background:rgba(255,255,255,.9); border:1px solid var(--border2);border-radius:var(--r);padding:3px 11px;pointer-events:none; max-width:min(60%,420px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wb-surface.wb-diapo .wb-nav{display:flex} /* En bloc et non en flex : les points de suspension d'un nom trop long ne s'appliquent qu'à un texte posé dans un bloc. */ .wb-surface.wb-diapo .wb-pagenum{display:block} /* Le bouton du sommaire suit la même règle que la navigation : devant une page unique, il n'y aurait rien à survoler. */ .wb-flot .wb-somm-b{display:none} .wb-surface.wb-diapo .wb-flot .wb-somm-b{display:flex} /* Vue sommaire : toutes les pages d'un coup d'œil, par-dessus la surface. Elle est posée dans la surface et non dans la page, pour rester accessible en plein écran, là où l'on en a le plus besoin. */ .wb-somm{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column; background:#cfcfc8;touch-action:pan-y} .wb-somm-t{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;font-weight:600; color:#5F5E5A;flex-shrink:0} .wb-somm-t small{font-weight:400;color:#7a7a73} .wb-somm-x{margin-left:auto;width:44px;height:44px;border:1px solid var(--border2);background:rgba(255,255,255,.9); color:#5F5E5A;border-radius:var(--r);cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center} .wb-somm-x:hover{background:#fff;color:var(--teal);border-color:var(--teal)} .wb-somm-g{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 20px;display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;align-content:start} .wb-somm-v{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:none;background:none; cursor:pointer;font-family:inherit;color:#5F5E5A;font-size:13px;font-weight:600} .wb-somm-c{display:block;width:100%;border:1px solid #a9a9a2;box-shadow:0 1px 5px rgba(0,0,0,.14);overflow:hidden} .wb-somm-c canvas{display:block;width:100%;height:100%} .wb-somm-v:hover .wb-somm-c{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal)} .wb-somm-v.on .wb-somm-c{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal)} .wb-somm-v.on{color:var(--teal-d)} /* Un nom long ne doit pas déformer la grille : il tient sur deux lignes, puis s'arrête net. Le nom complet reste dans l'infobulle. */ .wb-somm-l{max-width:100%;text-align:center;line-height:1.3;overflow:hidden; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word} @media(max-width:640px){ .wb-somm-g{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;padding:4px 12px 16px} } /* Minuteur de séance. Il se pose sur la surface, en haut à droite, là où il ne recouvre ni la page ni les commandes de navigation. Ce n'est pas un contenu du document : il n'est donc ni enregistré ni synchronisé, et il continue de tourner quand on change de document. */ .wb-chrono{position:absolute;top:10px;left:10px;z-index:7;display:none;flex-direction:column; align-items:center;gap:6px;padding:8px 10px;background:rgba(255,255,255,.94); border:1px solid var(--border2);border-radius:var(--rl);box-shadow:0 2px 10px rgba(0,0,0,.14); transform-origin:top left;cursor:move;touch-action:none;user-select:none} .wb-chrono.on{display:flex} .wb-chrono-t{font-size:31px;font-weight:700;line-height:1;color:#1a1a1a; font-variant-numeric:tabular-nums;font-family:ui-monospace,Consolas,monospace} .wb-chrono.fini .wb-chrono-t{color:#A32D2D;animation:wbClign 1s steps(2,start) infinite} @keyframes wbClign{to{opacity:.2}} .wb-chrono-b{display:flex;gap:4px} .wb-chrono .wb-tool{padding:5px 7px;font-size:14px;color:#5F5E5A;background:#fff;cursor:pointer} .wb-chrono-reg{display:none;flex-direction:column;align-items:center;gap:5px; padding-top:6px;border-top:1px solid var(--border);width:100%} .wb-chrono.reglages .wb-chrono-reg{display:flex} .wb-chrono.en-route .wb-chrono-reg{display:none} .wb-chrono-p{display:flex;gap:3px;flex-wrap:wrap;justify-content:center} .wb-chrono-p button{font-size:11px;padding:3px 6px;border:1px solid var(--border2);background:#fff; color:#5F5E5A;border-radius:5px;cursor:pointer;font-family:inherit} .wb-chrono-p button.on{background:var(--teal);border-color:var(--teal);color:var(--sur-teal);font-weight:600} .wb-chrono-m{display:flex;align-items:center;gap:3px;font-size:12px;color:#5F5E5A} .wb-chrono-m input{width:42px;padding:3px 4px;font-size:12px;text-align:center;font-family:inherit; border:1px solid var(--border2);border-radius:5px;background:#fff;color:#1a1a1a} .wb-chrono-m select{max-width:118px;padding:3px 4px;font-size:11px;font-family:inherit; border:1px solid var(--border2);border-radius:5px;background:#fff;color:#5F5E5A} /* Au-dessus des boutons flottants, qui occupent le coin : un message posé par-dessus eux serait illisible et les masquerait. */ .wb-hint{position:absolute;left:10px;bottom:72px;max-width:60%;font-size:11px;color:var(--text3);background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:3px 8px;pointer-events:none} @media(max-width:640px){ .wb-hint{bottom:60px;left:8px} } .wb-hint.alerte{font-size:14px;line-height:1.4;color:var(--amber);background:var(--amber-l);border-color:var(--amber);padding:8px 12px;max-width:min(560px,85%)} .wb-hl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--text3);margin:0 0 10px} .wb-hl:empty{display:none} /* Pastilles du hors-ligne choisi : un signe et un mot, pas seulement une couleur. */ .hl-p{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:1px 7px;border-radius:10px;white-space:nowrap} .hl-epingle{color:var(--teal);padding:1px 4px} .pt-p{color:var(--violet);border:1px solid var(--violet)} .pt-maj{color:var(--blue);border:1px dashed var(--blue)} .pt-da{color:#fff;background:var(--red);font-weight:600} .pt-da-b{margin:10px 0;padding:10px 12px;border-radius:var(--r);border:2px solid var(--red);background:var(--red-l);color:var(--text);font-size:13px;line-height:1.5} .pt-da-b i{color:var(--red)} .pt-maj-b{border-style:dashed!important} .pt-maj-l{padding:12px 14px;border-top:1px solid var(--border)} .pt-maj-l:first-child{border-top:none} .pt-demande-t{flex:1 1 260px;min-width:0} .pt-demande-b{display:inline-flex;gap:4px;flex-wrap:wrap;margin-left:4px} .pt-demande-n{display:block;font-size:12px;color:var(--text3)} .pt-demande{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;padding:6px 8px;border-radius:var(--r);background:var(--amber-l);color:var(--amber);font-size:12.5px} .pt-corr{margin:6px 0 4px 18px;font-size:12.5px;line-height:1.6;color:var(--text2)} .pt-corr span{color:var(--text3)} .pt-mo{max-width:620px;width:95%;max-height:92vh;overflow-y:auto} .pt-lab{display:block;font-size:12.5px;font-weight:600;color:var(--text2);margin:12px 0 4px} .pt-lab span{font-weight:400;color:var(--text3)} .pt-puces{display:flex;flex-wrap:wrap;gap:5px} .pt-sm{border-left:3px solid var(--teal-l);padding:2px 0 6px 10px;margin:6px 0} .pt-sm > b{display:block;font-size:12.5px;margin-bottom:4px} .pt-sm-c{display:block;font-size:11.5px;color:var(--text3);margin:4px 0 3px} .pt-sm .pt-autre{margin-top:5px;border-style:dashed} .pt-sm .pt-prop{margin-top:6px} .pt-carte-sm{color:var(--text3)} .cla-sous .cla-groupe{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:4px 0 8px} .cla-gnom{font-size:12.5px;width:100%;color:var(--text2)} .cla-cycle{font-size:11.5px;color:var(--text3);width:100%;margin-top:2px} .pt-dans{font-size:14px;margin:18px 0 8px;color:var(--titre)} .pt-dans span{font-weight:400;color:var(--text3)} .pt-puce{padding:4px 10px;border-radius:16px;border:1px solid var(--border2);background:var(--bg);color:var(--text2);font-size:12.5px;cursor:pointer;font-family:inherit} .pt-puce.on{background:var(--teal);border-color:var(--teal);color:var(--sur-teal);font-weight:600} .pt-chaine{display:flex;flex-direction:column;gap:4px;margin:-4px 0 12px;padding:10px 12px;border-radius:12px;background:var(--teal-l);font-size:13.5px} .pt-chaine b{color:var(--teal-d)} .pt-chaine-b{display:flex;gap:4px;margin-top:2px} .pt-chaine-b i{flex:1;height:6px;border-radius:3px;background:var(--border2)} .pt-chaine-b i.fait{background:var(--teal)} .pt-chaine-b i.cour{background:var(--amber)} .pt-avis{margin-top:12px;padding:10px 12px;border-radius:var(--r);background:var(--amber-l);color:var(--amber);font-size:13px;line-height:1.5} .pt-engage{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:13px;line-height:1.5} .pt-engage ul{margin:6px 0 8px 18px;color:var(--text2)} .pt-coche{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer} .pt-coche input{width:18px;height:18px} .pt-fige{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0;padding:10px 12px;border-radius:var(--r);background:var(--violet-l);color:var(--text);font-size:13px} .pt-fige span{flex:1;min-width:200px} .pt-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} .pt-liste{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl)} .pt-ligne{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--border);flex-wrap:wrap} .pt-ligne:first-child{border-top:none} .pt-ligne-t{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px;font-size:13.5px} .pt-ligne-t span{font-size:12px;color:var(--text3)} .pt-ligne-t .pt-motif{color:var(--amber);font-weight:600} .pt-chiffres{font-size:12px;color:var(--text2);white-space:nowrap} .pt-etat{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:12px;white-space:nowrap} .pt-nv{color:var(--teal);border:1px dashed var(--teal)} .pt-ok{color:var(--teal);background:var(--teal-l)} .pt-masque{color:var(--gray);border:1px solid var(--gray)} .pt-refuse{color:var(--red);border:1px solid var(--red)} .pt-retire{color:var(--text3);border:1px dotted var(--text3)} .pt-onglets{display:flex;gap:6px;margin-bottom:12px} .pt-onglets button{padding:6px 12px;border-radius:16px;border:1px solid var(--border2);background:var(--bg);color:var(--text2);font-size:13px;cursor:pointer;font-family:inherit} .pt-onglets button.on{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d);font-weight:600} .pt-filtres{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} .pt-filtres-l{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .pt-filtres-l select{padding:6px 10px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:inherit;font-size:13px} .pt-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px} .pt-carte{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:12px 14px;cursor:pointer;font-family:inherit;color:var(--text)} .pt-carte:hover{border-color:var(--border2);background:var(--bg3)} .pt-carte-t{font-weight:600;font-size:14px} .pt-carte-t i{color:var(--teal)} .pt-carte-m{font-size:12px;color:var(--text3)} .pt-carte-b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px} .pt-chiffres span{color:var(--text3)} .pt-recup{font-size:12px;color:var(--teal);font-weight:600} .pt-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--text2);margin-top:4px} .pt-apercu{margin-top:10px;padding:10px 12px;border-radius:var(--r);background:var(--bg2);font-size:13px;line-height:1.5} .pt-apercu ul,.pt-apercu ol{margin:4px 0 0 18px;color:var(--text2)} .pt-consigne{font-style:italic;color:var(--text2);margin-bottom:4px} .pt-avis-zone{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)} .pt-etoiles{display:inline-flex;gap:2px;vertical-align:middle} .pt-etoile{border:none;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--text3);padding:0 2px} .pt-etoile.on{color:var(--amber)} .pt-signal{display:flex;flex-direction:column;gap:6px;margin-top:8px} .pt-ok{margin-top:10px;padding:10px 12px;border-radius:var(--r);background:var(--teal-l);color:var(--text);font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pt-vide{padding:18px;border:1px dashed var(--border2);border-radius:var(--rl);color:var(--text2);font-size:13px;line-height:1.6} .hl-partiel{color:var(--amber);border:1px solid var(--amber)} .hl-enligne{color:var(--text3);border:1px dashed var(--text3)} .wb-hl i{font-size:16px} .wb-hl.ok{color:var(--teal)} .wb-hl.manque{color:var(--amber);background:var(--amber-l);padding:8px 12px;border-radius:var(--r);font-size:13.5px} .hl-l{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto} .hl-li{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;padding:8px 10px} .hl-t{flex:1;min-width:0;display:flex;flex-direction:column} .hl-t small{color:var(--text3);font-size:12.5px} .hl-ko{color:#B5520F;font-weight:600} .wb-hl-barre{flex:0 0 140px;height:6px;border-radius:3px;background:var(--bg3);overflow:hidden} .wb-hl-barre span{display:block;height:100%;background:var(--teal);transition:width .2s} /* Onglets des documents ouverts. Le point ambre signale un document modifié depuis son ouverture : c'est la convention des éditeurs, et elle évite d'avoir à lire un libellé pour savoir où l'on en est. */ .wb-tabs{display:none;align-items:stretch;gap:3px;margin-bottom:12px;overflow-x:auto; border-bottom:1px solid var(--border)} .wb-tabs.on{display:flex} .wb-tab{display:flex;align-items:center;gap:7px;max-width:230px;flex-shrink:0;padding:7px 10px; border:1px solid var(--border);border-bottom:none;border-radius:var(--r) var(--r) 0 0; background:var(--bg2);color:var(--text2);font-size:12.5px;cursor:pointer;white-space:nowrap; position:relative;top:1px} .wb-tab:hover{color:var(--text)} .wb-tab.on{background:var(--bg);color:var(--text);font-weight:600;border-bottom:1px solid var(--bg)} .wb-tab-nom{overflow:hidden;text-overflow:ellipsis} .wb-tab-pt{color:var(--amber);font-size:17px;line-height:0;margin-top:-2px} .wb-tab-x{opacity:.45;font-size:14px;line-height:1;padding:1px 2px;border-radius:3px} .wb-tab-x:hover{opacity:1;color:var(--red);background:var(--red-l)} .wb-tab-plus{display:flex;align-items:center;padding:7px 11px;border:1px dashed var(--border2); border-bottom:none;border-radius:var(--r) var(--r) 0 0;background:none;color:var(--text3); font-size:14px;cursor:pointer;flex-shrink:0;position:relative;top:1px} .wb-tab-plus:hover{color:var(--teal);border-color:var(--teal)} .wb-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:.75rem 1rem;display:flex;align-items:center;gap:12px;cursor:pointer;transition:border-color .12s} /* La sélection de plusieurs documents (17/10/2026) : un carré par carte, une barre d'actions. */ .wb-coche{flex:none;display:grid;place-items:center;width:30px;height:30px;margin:-6px -4px -6px -8px;border-radius:8px;cursor:pointer} .wb-coche input{width:18px;height:18px;margin:0;cursor:pointer;accent-color:var(--teal)} @media (hover:hover) and (pointer:fine){ .wb-grille:not(.choix-en-cours) .wb-card:not(:hover) .wb-coche input{opacity:0} } .wb-card.choisi{border-color:var(--teal);background:var(--teal-l)} /* L'élève, pendant un exercice ou un jeu (dans son espace, ou en séance) : pas de texte sélectionné ni de menu à l'appui long. */ html.mode-eleve #exo-vue :not(input):not(textarea):not(select), body.en-seance #exo-vue :not(input):not(textarea):not(select){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} html.mode-eleve #exo-vue img, body.en-seance #exo-vue img{-webkit-user-drag:none} #wb-choix-barre{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:calc(100vw - 24px);padding:8px 10px;background:var(--bg);border:1.5px solid var(--teal);border-radius:14px;box-shadow:0 10px 30px rgba(20,40,80,.18)} #wb-choix-barre[hidden]{display:none} body.choix-actif #wb-list{padding-bottom:120px} @media (max-width:700px){ #wb-choix-barre{left:8px;right:8px;bottom:8px;transform:none;max-width:none;flex-wrap:nowrap;overflow-x:auto} #wb-choix-barre .btn,#wb-choix-barre .nb{white-space:nowrap;flex:none} body.choix-actif #wb-list{padding-bottom:80px} } /* L'affichage en liste compacte (17/10/2026) */ .wb-aff{display:inline-flex;border:1px solid var(--border2);border-radius:var(--r);overflow:hidden} .wb-aff button{border:none;background:var(--bg);color:var(--text2);padding:6px 9px;cursor:pointer;font-size:15px;line-height:1} .wb-aff button+button{border-left:1px solid var(--border2)} .wb-aff button.on{background:var(--teal);color:#fff} .wb-liste-w{overflow-x:auto;margin-bottom:12px;border:1px solid var(--border);border-radius:var(--rl);background:var(--bg)} .wb-liste{width:100%;border-collapse:collapse;font-size:13px} .wb-liste th{text-align:left;font-size:11.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;padding:7px 8px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--bg2)} .wb-liste th button{border:none;background:none;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;padding:0} .wb-liste th button.on{color:var(--teal-d)} .wb-liste td{padding:5px 8px;border-bottom:1px solid var(--border);vertical-align:middle} .wb-liste tr:last-child td{border-bottom:none} .wb-ligne{cursor:pointer} .wb-ligne:hover td{background:var(--bg3)} .wb-ligne.choisi td{background:var(--teal-l)} .wb-liste .t{font-weight:600;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wb-liste .t i{margin-right:6px;color:var(--text3);vertical-align:-1px} .wb-liste .pb{color:var(--red);margin-left:6px} .wb-liste .etq{display:flex;gap:3px;flex-wrap:wrap} .wb-liste .d{color:var(--text3);white-space:nowrap} .wb-liste .a{text-align:right;white-space:nowrap} .wb-liste .wb-coche{margin:0} .pa-fiche-nom{font-size:20px;margin:0;color:var(--titre, var(--text));flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .pa-mode{font-size:13px;color:var(--text2);background:var(--bg2);border-radius:var(--r);padding:7px 10px;margin:-4px 0 12px} .pa-mode i{color:var(--teal);margin-right:4px} .pa-cree{display:flex;align-items:center;gap:8px;background:var(--teal-l);color:var(--teal-d);border-radius:var(--r);padding:9px 12px;margin-bottom:12px;font-size:14px;font-weight:600} .pa-fiche-desc{color:var(--text2);font-size:14px;margin:0 0 8px;white-space:pre-wrap} .pa-contenu{border:1px solid var(--border);border-radius:var(--rl);background:var(--bg);padding:8px 12px;margin-top:8px} .pa-contenu summary{cursor:pointer;font-weight:600;font-size:14px} .pa-contenu-l{margin:8px 0 2px;padding-left:22px;display:grid;gap:4px;font-size:13.5px} .pa-contenu-l i{color:var(--text3);margin-right:2px} .pa-contenu-l span{color:var(--text3);font-size:12px;margin-left:4px} .pa-els tr.arch td{opacity:.65} .pa-date{display:inline-flex;align-items:center;gap:5px;border:1px dashed var(--border2);background:var(--bg);color:var(--text3);border-radius:999px;padding:3px 10px;font:inherit;font-size:12.5px;cursor:pointer} .pa-date.oui{border-style:solid;color:var(--text)} .pa-date.passee{border-style:solid;border-color:var(--red);color:var(--red)} .pa-date:hover{border-color:var(--teal)} .pa-att-q{width:100%;padding:8px 12px;font-size:13px;margin-bottom:10px;font-family:inherit;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text)} .pa-att-l{max-height:44vh;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r)} .pa-att-l .wb-coch.deja{opacity:.6} .pa-att-date{display:grid;gap:8px;margin-top:12px;font-size:14px} .pa-att-date input[type=date]{font:inherit;padding:5px 8px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);margin-left:6px} .pa-tab .t{max-width:300px} @media (hover:hover) and (pointer:fine){ .wb-liste:not(.choix-en-cours) .wb-ligne:not(:hover) .wb-coche input{opacity:0} } @media (max-width:760px){ .wb-liste .col-niv,.wb-liste .col-mat,.wb-liste .col-mod,.wb-liste .col-dos{display:none} .wb-liste .t{max-width:180px} } #wb-choix-barre .nb{font-weight:700;padding:0 6px;color:var(--teal-d)} .choix-el{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer} .choix-el input{width:18px;height:18px;accent-color:var(--teal)} .choix-classes{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px} .wb-card:hover{border-color:var(--teal)} .wb-sep-v{width:1px;height:22px;background:var(--border);margin:0 4px;flex-shrink:0} .wb-dossier{display:flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--border); background:var(--bg);color:var(--text);border-radius:var(--r);font-size:13px;font-weight:500; font-family:inherit;cursor:pointer} .wb-dossier:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-l)} .wb-dossier i{font-size:16px;color:var(--amber)} .wb-rayon{display:flex;align-items:center;gap:8px;margin:2px 0 8px;font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.07em;color:var(--text3)} .wb-rayon:after{content:'';order:2;flex:1;height:1px;background:var(--border)} .wb-rayon span{order:1;font-weight:400;letter-spacing:0;text-transform:none;font-size:12px} /* Rayon repliable : le même titre, devenu bouton sur toute la largeur. */ .wb-rayon-b{width:100%;border:none;background:none;padding:6px 0;cursor:pointer;font-family:inherit;text-align:left} .wb-rayon-b:hover{color:var(--teal-d)} .wb-rayon-b i{font-size:14px;order:0} .wb-fil-saisie{display:flex;align-items:center;gap:5px;margin-left:6px} .wb-fil-saisie input{padding:6px 9px;font-size:13px;font-family:inherit;min-width:160px; border:1px solid var(--teal);border-radius:var(--r);background:var(--bg);color:var(--text);outline:none} .wb-range-l{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:13px;cursor:pointer; border-bottom:1px solid var(--border)} .wb-range-l:last-child{border-bottom:none} .wb-range-l:hover{background:var(--teal-l);color:var(--teal-d)} .wb-range-l.ici{background:var(--bg2);font-weight:600} .wb-range-l.interdit{opacity:.4;cursor:not-allowed;pointer-events:auto} .wb-range-l.interdit:hover{background:none;color:inherit} .wb-range-l>i{font-size:16px;color:var(--amber);flex-shrink:0} .wb-range-n{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--bg2); border-bottom:1px solid var(--border)} .wb-range-n input{flex:1;min-width:0;padding:5px 8px;font-size:13px;font-family:inherit; border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text)} .wb-thumb{width:52px;height:38px;border-radius:6px;background:var(--bg2);border:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:17px} /* Étagère « Reprendre » : les derniers documents ouverts, en pastilles courtes. On y revient d'un geste sans traverser l'arborescence. */ .wb-repr{margin-bottom:14px} .wb-repr-l{display:flex;gap:6px;flex-wrap:wrap} .wb-repr-b{display:flex;align-items:center;gap:7px;max-width:230px;padding:7px 12px;border:1px solid var(--border); background:var(--bg);color:var(--text);border-radius:999px;font-size:12.5px;font-family:inherit;cursor:pointer} .wb-repr-b:hover{border-color:var(--teal);color:var(--teal-d);background:var(--teal-l)} .wb-repr-b i{font-size:15px;color:var(--teal);flex-shrink:0} .wb-repr-b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Sur téléphone, dix pastilles empilées repousseraient la bibliothèque hors de l'écran : elles défilent alors sur une seule ligne. */ @media(max-width:640px){ .wb-repr-l{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px} .wb-repr-b{flex-shrink:0;max-width:60vw} } /* Bascule documents / élèves, en tête de bibliothèque. */ .wb-ong{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--border)} .wb-ong button{padding:8px 14px;border:none;background:none;color:var(--text2);font-size:13px;font-weight:600; font-family:inherit;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px} .wb-ong button:hover{color:var(--teal-d)} .wb-ong button.on{color:var(--teal-d);border-bottom-color:var(--teal)} .wb-el-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;color:var(--sur-teal);background:var(--teal)} /* Une ligne de favori : le document, et la croix qui le retire de la liste sans jamais toucher au document lui-même. */ .wb-fav{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--border); border-radius:var(--r);background:var(--bg);cursor:pointer;font-size:13px} .wb-fav:hover{border-color:var(--teal)} .wb-fav>i{font-size:16px;color:var(--text3);flex-shrink:0} .wb-coch{display:flex;align-items:center;gap:10px;padding:8px 11px;font-size:13px;cursor:pointer; border-bottom:1px solid var(--border)} .wb-coch:last-child{border-bottom:none} .wb-coch:hover{background:var(--teal-l)} .wb-coch input{width:16px;height:16px;flex-shrink:0;accent-color:var(--teal);cursor:pointer} /* Menus Niveaux / Matières de la bibliothèque */ .wb-fclasse{display:inline-flex;gap:4px;flex-wrap:wrap} .wb-fmenu{position:relative;display:inline-block} .wb-fpanneau{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:230px;max-height:60vh;overflow-y:auto; background:var(--bg);border:1px solid var(--border2);border-radius:var(--rl);box-shadow:0 10px 30px rgba(0,0,0,.15);padding:6px} .wb-fpanneau .wb-coch{border-bottom:none;border-radius:8px;padding:7px 9px} .wb-fpanneau .wb-coch.sous{padding-left:30px;font-size:12.5px;color:var(--text2)} .wb-fpanneau .btn{margin:6px 4px 2px} .wb-fvide{font-size:13px;color:var(--text3);padding:8px} .wb-tri{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text3)} .wb-tri select{font-size:12px;font-family:inherit;padding:5px 8px;border:1px solid var(--border2);border-radius:999px;background:var(--bg);color:var(--text);cursor:pointer} .wb-tool.wb-feffacer{color:var(--red);border-color:var(--red-l)} .wb-tool.wb-feffacer:hover{background:var(--red-l);border-color:var(--red)} /* ── Bibliothèque : habillage ────────────────────────────────────────────── Une couleur par sorte de document, reprise sur la vignette et les pastilles ; des cartes et des dossiers qui se détachent du fond ; les commandes secondaires effacées tant qu'on ne s'en sert pas. */ #wb-list-view .sh h2{font-size:20px;font-weight:700;letter-spacing:-.01em} .wb-ong{display:inline-flex;gap:2px;padding:3px;background:var(--bg2);border:1px solid var(--border);border-radius:11px;margin-bottom:16px} .wb-ong button{border:none;border-radius:8px;padding:7px 16px;margin:0;color:var(--text2)} /* Un intitulé ne se coupe jamais en deux lignes : s'il manque de la place, la barre passe à la ligne (24/10/2026). */ .wb-ong{flex-wrap:wrap;max-width:100%} .wb-ong button{white-space:nowrap;padding:7px 12px} .wb-ong button.on{background:var(--bg);color:var(--teal-d);box-shadow:0 1px 3px rgba(0,0,0,.1)} #wb-fil{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:6px 8px;gap:6px;flex-wrap:wrap} .wb-fil-chemin{display:flex;align-items:center;flex-wrap:wrap;gap:2px;font-size:15px;min-width:0} .wb-fil-pas{border:none;background:none;color:var(--teal-d);font:inherit;font-weight:600;padding:5px 8px;border-radius:var(--r);cursor:pointer;text-decoration:underline;text-underline-offset:3px} .wb-fil-pas:hover{background:var(--teal-l)} .wb-fil-ici{font-weight:700;color:var(--text);padding:5px 8px} .wb-fil-sep{color:var(--text3);font-size:18px;padding:0 2px} .wb-fil-haut{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border2);background:var(--bg);color:var(--text);font:inherit;font-size:14px;font-weight:600;padding:6px 11px;border-radius:var(--r);cursor:pointer} .wb-fil-acts{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto} .wb-fil-act{display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;background:none;color:var(--text2);font:inherit;font-size:13.5px;font-weight:600;padding:5px 9px;border-radius:var(--r);cursor:pointer} .wb-fil-act:hover{border-color:var(--border);background:var(--bg3)} .wb-fil-act.on{color:var(--teal);border-color:var(--teal-l);background:var(--teal-l)} .wb-fil-act.danger{color:var(--red)} .wb-fil-menu{display:none;position:relative} .wb-fil-menu summary{list-style:none;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border2);padding:6px 10px;border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer} .wb-fil-menu summary::-webkit-details-marker{display:none} .wb-fil-menu > div{position:absolute;right:0;top:calc(100% + 4px);z-index:30;background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;display:grid;min-width:210px} @media (max-width:760px){.wb-fil-acts{display:none} .wb-fil-menu{display:block;margin-left:auto}} #wb-fil .wb-tool{border-color:transparent;background:transparent;font-weight:600;color:var(--text2)} #wb-fil .wb-tool:hover{background:var(--bg);border-color:var(--border)} #wb-fil>.wb-tool:first-child{color:var(--teal-d)} .wb-dossiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;width:100%;margin-top:12px} .wb-dossier{padding:16px 16px;min-height:72px;border-radius:14px;gap:12px;font-size:14.5px;box-shadow:0 1px 2px rgba(0,0,0,.05); transition:border-color .12s, box-shadow .15s, transform .15s;text-align:left;align-items:center} .wb-dossier:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.08);color:var(--text);background:var(--bg)} .wb-dossier i{font-size:30px;flex-shrink:0} /* Un nom long passe à la ligne plutôt que d'être coupé. */ .wb-dos-nom{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.3} .wb-dossier.vide{opacity:.55} .wb-dos-n{font-size:11.5px;font-weight:600;color:var(--text2);background:var(--bg2);border-radius:999px;padding:1px 8px;flex-shrink:0} #wb-docs-view #wb-search{border-radius:999px!important;padding-left:36px!important; background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m21 21-6-6'/%3E%3C/svg%3E") no-repeat 13px center/15px!important} #wb-docs-view #wb-search:focus{outline:none;border-color:var(--teal)!important;box-shadow:0 0 0 3px var(--teal-l)} #wb-docs-view .wb-bar .wb-tool{border-radius:999px} .wb-rayon{color:var(--text2);font-size:11.5px;margin-top:6px} .wb-grille{display:grid;gap:10px;margin-bottom:20px} #wb-list-view .wb-card{padding:12px 14px;gap:14px;box-shadow:0 1px 2px rgba(0,0,0,.05); transition:border-color .12s, box-shadow .15s, transform .15s} #wb-list-view .wb-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-1px)} .wb-thumb{width:46px;height:46px;border-radius:12px;border:none;font-size:22px;background:var(--teal-l);color:var(--teal-d)} .wb-thumb[data-cat=diaporama]{background:var(--blue-l);color:var(--blue)} .wb-thumb[data-cat=exercice]{background:var(--violet-l);color:var(--violet)} .wb-thumb[data-cat=image]{background:var(--green-l);color:var(--green)} .wb-thumb[data-cat=pdf]{background:var(--red-l);color:var(--red)} .wb-thumb[data-cat=son]{background:var(--amber-l);color:var(--amber)} .wb-repr-b[data-cat=diaporama] i{color:var(--blue)} .wb-repr-b[data-cat=exercice] i{color:var(--violet)} .wb-repr-b[data-cat=image] i{color:var(--green)} .wb-repr-b[data-cat=pdf] i{color:var(--red)} .wb-repr-b[data-cat=son] i{color:var(--amber)} .wb-repr-b{box-shadow:0 1px 2px rgba(0,0,0,.05);padding:8px 14px} .wb-mot{font-size:11px;background:var(--bg2);color:var(--text2);border:1px solid var(--border);border-radius:999px;padding:0 8px;line-height:18px} .cla-etq{border-radius:999px;padding:0 8px;line-height:20px;font-weight:600} .wb-nonsync{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--amber);background:var(--amber-l);border-radius:999px;padding:1px 8px;white-space:nowrap} #wb-list-view .wb-card .wb-tool{border-color:transparent;background:transparent;color:var(--text3)} #wb-list-view .wb-card .wb-tool:hover{background:var(--bg2);color:var(--text)} /* Pas d'étoile pleine dans la police d'icônes : un favori se reconnaît à sa couleur et à son fond. */ #wb-list-view .wb-card .wb-etoile.on{background:var(--amber-l);color:var(--amber)} #wb-list-view .wb-card .wb-etoile.on i{color:var(--amber)} /* En sombre, les textes colorés sur fond teinté s'éclaircissent pour rester lisibles (les couleurs de base de l'appli restent celles du mode clair). */ @media(prefers-color-scheme:dark){ #wb-list-view .cla-etq.mat,.wb-thumb[data-cat=diaporama],.wb-repr-b[data-cat=diaporama] i{color:#8EC1F5} #wb-list-view .cla-etq.niv,.wb-thumb[data-cat=son],.wb-repr-b[data-cat=son] i,.wb-nonsync, #wb-list-view .wb-card .wb-etoile.on,#wb-list-view .wb-card .wb-etoile.on i{color:#F2C27B} .wb-thumb[data-cat=pdf],.wb-repr-b[data-cat=pdf] i{color:#F09595} .wb-thumb[data-cat=image],.wb-repr-b[data-cat=image] i{color:#A8D47A} .wb-thumb[data-cat=tableau]{color:#6FDCCE} } .wb-el-av{box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)} /* Sur téléphone, les commandes d'une carte passent sous son texte plutôt que d'être coupées au bord de l'écran. */ @media(max-width:640px){ #wb-list-view .wb-card{flex-wrap:wrap;row-gap:8px} #wb-list-view .wb-card>div:last-child{width:100%;justify-content:flex-end} .wb-dossiers{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .wb-dossier{padding:13px 12px;min-height:64px;font-size:14px} .wb-dossier i{font-size:26px} } /* Colonne du mode tableau. Elle prend exactement la place de la barre de gestion, qui s'efface : en séance on n'a pas besoin de la comptabilité sous les yeux, et le tableau gagne toute la largeur. Une seule classe sur commande l'échange. */ .wb-side{width:200px;min-width:200px;background:var(--bg);border-right:1px solid var(--border);display:none;flex-direction:column;overflow-y:auto;flex-shrink:0} body.wb-mode .wb-side{display:flex} .wb-side-head{padding:1rem .75rem .75rem;border-bottom:1px solid var(--border)} .wb-side-head h1{font-size:14px;font-weight:600} .wb-side-head small{display:block;font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wb-grp{padding:.45rem .6rem} .wb-grp+.wb-grp{border-top:1px solid var(--border)} .wb-lab{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);font-weight:600;margin-bottom:5px} .wb-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap} /* La colonne ne fait que 200px : tout ce qui y tient à peine doit pouvoir se rétrécir, sinon un élément passe à la ligne et le groupe se disloque. */ .wb-row>select{flex:1;min-width:0} /* Cinq boutons doivent tenir sur une rangée d'environ 165 px — la colonne perd une quinzaine de pixels dès qu'une barre de défilement apparaît. Au rembourrage par défaut, le dernier passait seul à la ligne. */ .wb-side .wb-tool{padding:6px 5px;min-width:28px;justify-content:center} .wb-item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;margin-bottom:4px;border:1px solid var(--border2);background:var(--bg);color:var(--text2);border-radius:var(--r);font-size:12.5px;font-family:inherit;text-align:left;cursor:pointer} .wb-item:last-child{margin-bottom:0} .wb-item:hover{border-color:var(--teal);color:var(--teal)} .wb-item.wb-danger:hover{border-color:var(--red);color:var(--red);background:var(--red-l)} .wb-item.on{background:var(--teal);border-color:var(--teal);color:var(--sur-teal);font-weight:600} .wb-side-foot{margin-top:auto;padding:.6rem .7rem;border-top:1px solid var(--border)} .wb-hidden{display:none} /* Replié en bandeau horizontal, « .wb-grp », « .wb-sec » et « .wb-grp>div » imposent display:flex ; à spécificité égale, la dernière règle l'emportait et un groupe masqué réapparaissait sur écran étroit. Celle-ci pèse plus lourd qu'elles, et le masquage redevient le masquage. */ .wb-side .wb-hidden{display:none} /* ── Outils principaux ───────────────────────────────────────────────────── Quatre grandes cibles, avec leur nom : en séance, on les vise au stylet ou au doigt sans regarder, et un pictogramme de 14 px n'y suffisait pas. */ .wb-outils{display:grid;grid-template-columns:1fr 1fr;gap:5px} .wb-gros{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; padding:9px 4px;border:1px solid var(--border2);background:var(--bg);color:var(--text2); border-radius:var(--r);font-family:inherit;font-size:11px;cursor:pointer;line-height:1.1} .wb-gros i{font-size:21px} .wb-gros:hover{border-color:var(--teal);color:var(--teal)} .wb-gros.on{background:var(--teal);border-color:var(--teal);color:var(--sur-teal);font-weight:600} /* Couleur et épaisseur : un bouton qui montre l'état courant, et qui déplie son choix. Six pastilles alignées de force tenaient sur une ligne trop serrée pour être visées. */ .wb-pick{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;margin-bottom:4px; border:1px solid var(--border2);background:var(--bg);color:var(--text2);border-radius:var(--r); font-family:inherit;font-size:12.5px;cursor:pointer} .wb-pick:hover{border-color:var(--teal)} .wb-pick .wb-pick-n{flex:1;text-align:left} .wb-pick>i{font-size:15px;transition:transform .15s} .wb-pick.on>i{transform:rotate(180deg)} .wb-pastille{width:19px;height:19px;border-radius:50%;border:1px solid var(--border2);flex-shrink:0} .wb-pal{display:none;gap:6px;flex-wrap:wrap;justify-content:center;padding:6px 0 9px} .wb-pal.on{display:flex} .wb-pal .wb-sw{width:34px;height:34px;margin:0} .wb-pal .wb-size{width:38px;height:38px} /* ── Sections repliables ─────────────────────────────────────────────────── Une seule ouverte à la fois : la colonne reste courte, et l'on n'a jamais à chercher un bouton au milieu de quarante autres. */ .wb-sec{border-top:1px solid var(--border)} .wb-sec-t{display:flex;align-items:center;gap:8px;width:100%;padding:10px .7rem;border:none; background:none;color:var(--text2);font-family:inherit;font-size:12.5px;font-weight:600; text-align:left;cursor:pointer} .wb-sec-t:hover{color:var(--teal);background:var(--bg2)} .wb-sec-t>i:first-child{font-size:16px} .wb-sec-t .wb-chev{margin-left:auto;font-size:14px;transition:transform .15s;opacity:.6} .wb-sec.on .wb-sec-t{color:var(--teal)} .wb-sec.on .wb-chev{transform:rotate(180deg)} .wb-sec-i{margin-left:auto;font-size:11px;font-weight:400;color:var(--text3)} .wb-sec-t .wb-sec-i+.wb-chev{margin-left:6px} .wb-sec-c{display:none;padding:0 .7rem .7rem} /* Intertitre à l'intérieur d'une section dépliée : « Insérer », « Pages », « Fond ». Il remplace autant de sections séparées, sans les faire payer d'une ligne de plus quand elles sont repliées. */ .wb-reg-t{display:flex;align-items:center;gap:6px;margin:11px 0 6px;font-size:10.5px;font-weight:700; text-transform:uppercase;letter-spacing:.07em;color:var(--text3)} .wb-reg-t:first-child{margin-top:2px} .wb-reg-t span{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;font-size:11.5px} .wb-reg+.wb-reg{margin-top:2px} .wb-reg-n{font-size:12px;color:var(--text2);margin-bottom:7px;line-height:1.45} /* Liste des pages d'un diaporama. Plafonnée en hauteur : un diaporama de vingt pages ne doit pas repousser le reste de la colonne hors de l'écran. */ .wb-pages{max-height:38vh;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r); background:var(--bg)} .wb-page-l{display:flex;align-items:center;gap:3px;padding:4px 5px;border-bottom:1px solid var(--border); font-size:12.5px} .wb-page-l:last-child{border-bottom:none} .wb-page-l.on{background:var(--teal-l)} .wb-page-n{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:3px 4px;border:none; background:none;font:inherit;color:var(--text2);text-align:left;cursor:pointer;border-radius:4px} .wb-page-l.on .wb-page-n{color:var(--teal-d);font-weight:700} .wb-page-n:hover{background:var(--bg2)} .wb-page-n small{color:var(--text3);font-weight:400;font-size:11px} /* La colonne est étroite : cinq commandes et un nom de page ne tiennent pas sur une ligne. Le libellé prend donc toute la largeur, et les commandes passent dessous, rangées à droite. */ .wb-page-l{flex-wrap:wrap} .wb-page-n{flex:1 0 100%} .wb-page-n + .wb-page-b{margin-left:auto} .wb-page-nom{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25} .wb-page-t,.wb-page-nom small{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .wb-page-b{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center; border:none;background:none;color:var(--text3);font-size:14px;cursor:pointer;border-radius:4px} .wb-page-b:hover{background:var(--teal-l);color:var(--teal-d)} .wb-page-b:disabled{opacity:.25;cursor:default;background:none} .wb-page-b.sup:hover{background:var(--red-l);color:var(--red)} /* Insérer entre deux pages : une bande fine qui ne se révèle qu'au survol, pour ne pas hacher la liste d'autant de boutons qu'il y a d'intervalles. */ .wb-page-i{display:block;width:100%;height:11px;border:none;background:none;cursor:pointer;position:relative} .wb-page-i:after{content:'';position:absolute;left:8px;right:8px;top:5px;height:1px;background:transparent} .wb-page-i:hover:after{background:var(--teal)} .wb-page-i:before{content:'+';position:absolute;left:50%;top:-3px;transform:translateX(-50%); font-size:13px;line-height:1;color:transparent;font-weight:700} .wb-page-i:hover:before{color:var(--teal)} .wb-sec.on .wb-sec-c{display:block} .wb-sec-c select{padding:6px 5px;font-size:12px;font-family:inherit;border:1px solid var(--border2); border-radius:var(--r);background:var(--bg);color:var(--text)} /* Mode présentation. Ne reste à l'écran que ce dont on se sert en séance : la page et les outils de tracé. La gestion des documents, elle, n'a rien à faire là — on ne range pas sa bibliothèque devant un élève. */ body.wb-plein .topbar, body.wb-plein .wb-tabs, body.wb-plein #wb-entete, body.wb-plein .wb-side-head, body.wb-plein .wb-side-foot, body.wb-plein .wb-side .wb-hors-plein{display:none} body.wb-plein .main{padding:.45rem} body.wb-plein .wb-surface{border-radius:var(--r)} /* La colonne garde sa largeur : la rétrécir disloquait les rangées de cinq boutons, qui passaient à la ligne. Le gain se fait en hauteur, et en retirant ce qui ne sert pas. */ /* Diaporama en plein écran : la colonne ne prend plus de place. Elle flotte par-dessus la page, repliée par défaut — la page occupe tout l'écran, et l'on ouvre les outils d'un toucher sur la poignée, en bas à gauche. Elle se referme dès qu'on touche la page, pour ne pas la masquer pendant qu'on écrit. Le tableau blanc garde sa colonne : il n'a pas de page à dégager. */ body.wb-plein.wb-plein-diapo .wb-side{position:fixed;left:10px;top:10px;z-index:30; flex-direction:column;align-items:stretch;overflow-x:hidden;overflow-y:auto; max-height:calc(100vh - 92px);width:220px;min-width:0;max-width:calc(100vw - 20px); border:1px solid var(--border2);border-radius:var(--rl);box-shadow:0 6px 24px rgba(0,0,0,.22)} body.wb-plein.wb-plein-diapo:not(.wb-side-ouverte) .wb-side{display:none} /* Barre de titre : la prise pour déplacer la boîte, et son épingle. Collée en haut de la boîte même quand son contenu défile. touch-action:none : sans lui, le doigt ferait défiler la page au lieu de tirer la boîte. */ .wb-flot-tete{display:none} /* Une ligne de la rubrique « Verrouillage » : ce qu'elle vise, puis ses deux boutons côte à côte, pour tenir dans la largeur de la colonne. */ .wb-verr-t{font-size:11px;color:var(--text3);margin:6px 0 3px} .wb-verr-l{display:flex;align-items:center;gap:4px;margin-bottom:2px} .wb-verr-l .wb-item{flex:1;min-width:0;justify-content:center;gap:4px;padding-left:3px;padding-right:3px;margin:0;font-size:11.5px;white-space:nowrap} .wb-verr-l .wb-item:last-child{flex:1.3} /* « Déverrouiller » est plus long */ .wb-verr-l .wb-item:disabled,#wb-verr-struct:disabled{opacity:.4;cursor:default} #wb-verr-struct.on{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d)} body.wb-plein.wb-plein-diapo .wb-flot-tete{display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:2; padding:6px 8px 6px 10px;background:var(--bg2);border-bottom:1px solid var(--border);cursor:move;touch-action:none;user-select:none} .wb-flot-tete button{width:34px;height:34px;border:1px solid transparent;background:none;border-radius:var(--r); color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px} .wb-flot-tete button:hover{background:var(--bg);border-color:var(--border2)} .wb-flot-tete button.on{background:var(--teal);color:var(--sur-teal);border-color:var(--teal)} /* La zone principale réserve d'ordinaire la largeur de la colonne. */ body.wb-plein.wb-plein-diapo .main{max-width:100vw} /* Avec la poignée et le cadenas, la rangée du bas compte six boutons : le numéro de page, centré, venait buter contre eux sur un écran moyen. Il passe en bas à droite, où il n'y a rien. */ body.wb-plein.wb-plein-diapo .wb-pagenum{left:auto;right:10px;transform:none} .wb-flot .wb-poignee,.wb-flot .wb-verrou{display:none} body.wb-plein.wb-plein-diapo .wb-flot .wb-poignee, body.wb-plein.wb-plein-diapo .wb-flot .wb-verrou{display:flex} @media(max-width:700px){ /* Sur un écran étroit, la même colonne devient un bandeau horizontal qui défile : mêmes outils, même code, mais le tableau reste visible au lieu d'être masqué par un tiroir qu'il faudrait ouvrir à chaque couleur. */ body.wb-mode .app{flex-direction:column} .wb-side{width:auto;min-width:0;max-width:100vw;border-right:none;border-bottom:1px solid var(--border); overflow-x:auto;overflow-y:hidden} body.wb-mode .wb-side{flex-direction:row;align-items:stretch} /* Le bandeau commence par les outils : ce sont eux qu'on cherche en séance. La gestion des documents et la synchronisation passent à la fin, où l'on va les chercher en faisant défiler. */ body.wb-mode .wb-side .wb-hors-plein{order:9} body.wb-mode .wb-side-foot{order:10} /* Repliées en bandeau, les sections s'ouvrent dans le fil : le bandeau défile, la hauteur ne bouge pas. */ .wb-sec{border-top:none;border-left:1px solid var(--border);display:flex;align-items:center; gap:4px;padding:0 .3rem;flex-shrink:0} .wb-sec-t{width:auto;padding:8px 8px;white-space:nowrap} .wb-sec.on .wb-sec-c{display:flex;align-items:center;gap:4px;padding:0 4px 0 0} .wb-sec-c .wb-row{flex-wrap:nowrap} .wb-sec-c .wb-item{margin-bottom:0} .wb-outils{display:flex;gap:4px} .wb-gros{padding:5px 8px;font-size:10px} .wb-gros i{font-size:17px} .wb-pick{width:auto;margin-bottom:0;white-space:nowrap} .wb-pal{padding:0} .wb-side-head{display:none} /* Chaque groupe tient sur une seule ligne, libellé compris : empilés, ils faisaient un bandeau de 160 px qui repoussait le tableau hors de l'écran. La largeur, elle, n'est pas un problème — le bandeau défile. */ .wb-grp{padding:.4rem .5rem;flex-shrink:0;display:flex;align-items:center;gap:4px} .wb-grp>div{display:flex;align-items:center;gap:4px} .wb-lab{margin-bottom:0;margin-right:2px;white-space:nowrap} .wb-grp+.wb-grp{border-top:none;border-left:1px solid var(--border)} .wb-row{flex-wrap:nowrap} .wb-item{width:auto;margin-bottom:0;white-space:nowrap} .wb-side-foot{margin-top:0;padding:.45rem .55rem;border-top:none;border-left:1px solid var(--border); flex-shrink:0;display:flex;align-items:center;gap:6px} } @media(max-width:700px){ .topbar{flex-wrap:wrap;padding:.5rem .7rem;gap:8px} .topbar-title img{max-height:26px} #td{display:none} /* la date longue prend trop de place */ /* Barre latérale en tiroir coulissant */ .app{position:relative} /* Zone principale : plus de réserve de 200px pour la barre latérale */ .main{max-width:100vw;padding:.9rem .7rem} .sh{flex-wrap:wrap;gap:8px} .sh h2{font-size:16px} .stat{padding:.7rem .5rem} .stat .val{font-size:17px} .mo{padding:1.1rem} /* Grilles calendaires : intrinsèquement larges, on les fait défiler */ .wg{min-width:660px} } /* ── Exerciseur ─────────────────────────────────────────────────────────── */ .exo-vue{position:fixed;inset:0;z-index:400;background:var(--bg2);display:flex;flex-direction:column} .exo-tete{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;background:var(--bg); border-bottom:1px solid var(--border)} .exo-tete h2{font-size:15px;font-weight:600;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .exo-corps{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch} /* Pavé numérique des activités : posé en bas à droite, déplaçable. La page garde de quoi défiler sous lui — par un espace en fin de page, pas par une marge intérieure, qui décalait le bandeau « Vérifier » (collé au bas de la zone, marge comprise) jusqu'au milieu de l'écran. */ #exo-vue.avec-pave .exo-corps::after{content:'';display:block;height:330px} .exo-pave{position:fixed;right:16px;bottom:16px;z-index:70;width:300px;max-width:calc(100vw - 32px);background:var(--bg);border:1px solid var(--border2); border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:8px 10px 10px;user-select:none;-webkit-user-select:none;touch-action:manipulation} .exo-pave-t{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text3);margin:-8px -10px 6px;padding:8px 10px 2px 14px; cursor:grab;touch-action:none;border-radius:16px 16px 0 0} .exo-pave-t span{display:inline-flex;align-items:center;gap:6px} .exo-pave-t .ti-grip-horizontal{font-size:20px} /* Mots croisés : la définition du mot en cours, dans la barre du clavier, pour la lire même quand le clavier couvre la liste des définitions. */ .exo-pave-t span.exo-pave-def{flex:1;min-width:0;display:block;color:var(--text);font-size:14.5px;line-height:1.3;padding:2px 0; overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .exo-pave-t [hidden]{display:none !important} .exo-pave-def img{max-height:34px;vertical-align:middle;border-radius:4px} .exo-pave-def .exo-pson-b{width:30px;height:30px;font-size:16px} .exo-pave.deplace{box-shadow:0 14px 40px rgba(0,0,0,.28);opacity:.96} .exo-pave.deplace .exo-pave-t{cursor:grabbing} .exo-pave-x{border:none;background:none;color:var(--text2);font-size:20px;width:40px;height:34px;border-radius:8px;cursor:pointer} .exo-pave-g{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .exo-pave-g button{height:56px;border-radius:12px;border:1px solid var(--border2);background:var(--bg2);color:var(--text);font-size:24px;font-weight:600; font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center} .exo-pave-g button:active{background:var(--teal-l);border-color:var(--teal)} .exo-pave-g button.fn{font-size:22px;color:var(--text2)} .exo-pave-g button.ok{grid-row:span 2;height:auto;background:var(--teal);border-color:var(--teal);color:var(--sur-teal)} .exo-pave-g button.zero{grid-column:span 2} /* Clavier de lettres : AZERTY, accents en tête, posé en bas au milieu. */ .exo-pave.lettres{width:min(780px, calc(100vw - 16px));max-width:none} #exo-vue.avec-pave:has(.exo-pave.lettres) .exo-corps::after{height:360px} .exo-cl{display:flex;flex-direction:column;gap:6px} .exo-cl-l{display:flex;gap:5px} .exo-cl-l button{flex:1 1 0;min-width:0;height:52px;padding:0;border-radius:10px;border:1px solid var(--border2);background:var(--bg2);color:var(--text); font-size:22px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center} .exo-cl-l button:active{background:var(--teal-l);border-color:var(--teal)} .exo-cl-l.accents button{height:44px;background:var(--violet-l);border-color:transparent;color:var(--violet);font-size:20px} .exo-cl-l button.large{flex-grow:1.5} .exo-cl-l button.large2{flex-grow:2} .exo-cl-l button.espace{flex-grow:5;font-size:15px;font-weight:500;color:var(--text3)} .exo-cl-l button.fn{font-size:18px;color:var(--text2)} .exo-cl-l button.fn i{font-size:22px} .exo-cl-l button.ok{background:var(--teal);border-color:var(--teal);color:var(--sur-teal)} .exo-cl-l button.on{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d)} @media(max-width:640px){ .exo-cl-l{gap:3px} .exo-cl-l button{height:46px;font-size:19px;border-radius:8px} .exo-cl-l.accents button{height:40px;font-size:17px} } @media(max-width:500px){ .exo-cl-l button{height:38px;font-size:17px} .exo-cl-l.accents button{height:32px;font-size:15px} .exo-pave-g button{height:46px} .exo-pave{padding:6px 6px 8px} #exo-vue.avec-pave .exo-corps::after{height:280px} #exo-vue.avec-pave:has(.exo-pave.lettres) .exo-corps::after{height:280px} } /* Statistiques par question */ .exo-pq{padding:10px 14px} .exo-pq-l{display:grid;grid-template-columns:minmax(0,1fr) 140px 90px;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:13.5px} .exo-pq-l:last-of-type{border-bottom:none} .exo-pq-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .exo-pq-barre{height:8px;border-radius:4px;background:var(--bg3);overflow:hidden} .exo-pq-barre span{display:block;height:100%;background:var(--amber)} .exo-pq-barre span.bon{background:var(--green)} .exo-pq-barre span.faible{background:var(--red)} .exo-pq-v{text-align:right;white-space:nowrap} .exo-pq-v small{color:var(--text3)} .exo-pq-vide{font-size:12.5px;color:var(--text3);margin-top:12px} @media(max-width:640px){ .exo-pq-l{grid-template-columns:minmax(0,1fr) 70px 70px} } /* Parcours : date limite */ .pa-ech{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;font-size:13.5px} .pa-ech label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:600} .pa-ech input[type=date]{padding:5px 8px;border:1px solid var(--border2);border-radius:var(--r);font-family:inherit;font-size:13.5px;background:var(--bg);color:var(--text)} .pa-ech-b{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--blue-l);color:var(--blue)} .pa-ech-b.passee{background:var(--red-l);color:var(--red)} .pa-retard{margin-left:6px;font-size:11.5px;font-weight:700;color:var(--red);background:var(--red-l);padding:2px 8px;border-radius:999px} .pa-ech-el{display:flex!important;align-items:center;gap:5px;font-size:12.5px!important;color:var(--blue)!important;font-weight:600;margin-top:4px} .pa-ech-el.passee{color:var(--amber)!important} .pa-ech-el.grand{font-size:14.5px!important;margin-top:8px} /* Bilans des séances */ .bil-filtre{padding:6px 10px;border:1px solid var(--border2);border-radius:var(--r);font-size:13px;font-family:inherit;background:var(--bg);color:var(--text)} .bil-liste{display:flex;flex-direction:column;gap:8px} .bil-carte{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);cursor:pointer} .bil-carte:hover{border-color:var(--teal)} .bil-tete{font-size:13.5px} .bil-tete b{font-size:14.5px} .bil-apercu{font-size:12.5px;color:var(--text2);margin-top:4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .bil-txt{width:100%;box-sizing:border-box;font-size:14px;line-height:1.6} /* Espace élève */ html.mode-eleve #login-screen{display:none!important} html.mode-eleve .topbar-title{visibility:hidden} html.mode-eleve #topbar-mode-eleve, body.en-seance #topbar-mode-eleve{display:none!important} .el-verrou{opacity:.55} .el-verrou:hover{opacity:1} .el-verrou span{font-size:12px;margin-left:4px} /* téléphone, imprimable (29/10/2026) : de petites icônes sur les cartes */ .sup-ic{display:inline-flex;align-items:center;color:var(--text2);font-size:15px} .sup-ic+.sup-ic{margin-left:2px} /* le mode enfant, bien visible pour une famille (le bouton du haut a un style en ligne) */ body.f-famille #topbar-mode-eleve{background:var(--teal)!important;border-color:var(--teal)!important;color:#fff!important;font-weight:600} .mv-apercu{display:flex;align-items:center;gap:8px;margin:10px 0;padding:8px 10px;border:1px dashed var(--border2);border-radius:var(--r);background:var(--bg2);font-size:13px} .mv-apercu .mv-cad{margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:2px solid var(--teal);border-radius:var(--r);background:var(--bg)} .mv-apercu .mv-fl{color:var(--teal);font-weight:700} html.el-hors-ligne-cnx body > :not(#el-login){visibility:hidden} html.mode-eleve #wb-sidebar .wb-liste, html.mode-eleve #wb-sidebar .wb-grp.wb-tools{display:none!important} html.mode-eleve .wb-sf, html.mode-eleve #wb-horsligne{display:none!important} html.mode-eleve #wb-sidebar .wb-side-foot, html.mode-eleve #wb-sidebar .wb-side-head{display:none!important} html.mode-eleve:not(.el-doc) #wb-sidebar{display:none!important} /* Sur sa copie annotable : écrire, surligner, gommer, écrire du texte, des formes — ni déplacer, ni effacer la page, ni ajouter d'images ou de sons. */ html.mode-eleve.el-annote #wb-sidebar .wb-grp.wb-tools:not(.wb-hidden){display:block!important} html.mode-eleve.el-annote #wb-t-hand, html.mode-eleve.el-annote #wb-sidebar .wb-danger, html.mode-eleve.el-annote #wb-sidebar .wb-sec:has(> .wb-sec-t[onclick="wbSec('doc')"]){display:none!important} .el-login{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px; background:linear-gradient(160deg, var(--blue-l), var(--bg2) 60%);overflow-y:auto} .el-carte{width:100%;max-width:420px;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:28px 24px;box-shadow:0 10px 40px rgba(0,0,0,.08)} .el-logo{height:56px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center} .el-logo img{height:56px;width:auto} .el-carte h1{text-align:center;font-size:22px;margin:0 0 16px} .el-carte h2{font-size:17px;margin:0 0 6px} .el-carte p{font-size:14px;color:var(--text2);line-height:1.5;margin:0 0 14px} .el-carte label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:12px} .el-carte input{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:12px 14px;font-size:17px;font-family:inherit;border:1px solid var(--border2);border-radius:12px;background:var(--bg);color:var(--text)} .el-carte input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l)} .el-btn{width:100%;min-height:50px;font-size:16px;margin-top:4px} /* L'espace élève prend le bleu profond de Ludisca (texte blanc bien lisible). */ .el-carte .btn.pr{background:#243B6B;border-color:#243B6B;color:#fff} .el-carte .btn.pr:hover{background:#1B2D52;border-color:#1B2D52} .el-carte input:focus{border-color:#243B6B!important;box-shadow:0 0 0 3px var(--blue-l)!important} @media(prefers-color-scheme:dark){.el-carte .btn.pr{background:#C9D6EA;border-color:#C9D6EA;color:#0B1A2E}.el-carte .btn.pr:hover{background:#E1E9F5}.el-lien{color:#9DB3D8!important}} .el-lien{display:block;margin:14px auto 0;border:none;background:none;color:#243B6B;font-size:14px;font-family:inherit;cursor:pointer;text-decoration:underline} .el-err{padding:10px 12px;margin-bottom:12px;border-radius:10px;background:var(--red-l);color:var(--red);font-size:14px} .el-titre{font-size:20px;margin:4px 0 12px;display:flex;align-items:center;gap:8px} /* Exercices donnés un par un : à part des parcours */ .el-exos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px} .el-exo{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px solid var(--violet-l, #e9defa);border-radius:14px;background:var(--bg);cursor:pointer;font-family:inherit;color:var(--text);text-align:left} .el-exo:hover{border-color:var(--violet)} .el-exo b{display:block;font-size:15px} .el-exo span span{display:block;font-size:12px;color:var(--text3)} .el-exo-ico{font-size:26px;color:var(--violet);background:var(--violet-l, #f1e9fd);border-radius:12px;padding:8px} .el-exo-st{font-size:12.5px;color:var(--text2);white-space:nowrap} .el-exo.parfait{border-color:var(--green)} .el-exo.parfait .el-exo-st{color:var(--green)} .el-exo.valide .el-exo-st{color:var(--blue)} .el-exo.encours .el-exo-st{color:var(--amber)} /* Espace en pause */ .el-pause-msg{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#eef2ff,#f5f0ff);border:2px solid #c7d2fe;border-radius:16px;padding:18px 20px;margin:4px 0 18px;color:#312e81} .el-pause-msg i{font-size:44px;color:#6366f1} .el-pause-msg b{display:block;font-size:18px;margin-bottom:4px} .el-pause-msg span{font-size:14.5px;line-height:1.5} .el-gris{filter:grayscale(1);opacity:.45;pointer-events:none;user-select:none} /* Archivé : consultable, plus faisable */ .pa-el-carte.arch,.el-exo.arch{filter:grayscale(1);opacity:.6} .el-exo.arch{cursor:default} .pa-etape.ferme{filter:grayscale(1);opacity:.6;cursor:default} .el-arch-b,.pa-arch-b{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--bg3);color:var(--text2);vertical-align:2px} .pa-arch-msg{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);padding:10px 14px;margin:0 0 12px;font-size:14px;color:var(--text2)} .pa-arch-msg i{font-size:22px} .pa-chip.arch{opacity:.65} /* Nouveau */ .el-nouv-b{display:inline-flex;align-items:center;margin-left:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:1px 8px;border-radius:999px;background:var(--corail);color:#243B6B;vertical-align:2px} .el-nouv-l{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.45} .el-nouv-l li{display:flex;gap:8px;align-items:flex-start} .el-nouv-l i{font-size:18px;margin-top:1px} .ac-badge.pause{background:#eef2ff;color:#4f46e5} .ex-ind{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r)} .ex-ind-l{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:13.5px} .ex-ind-l:last-child{border-bottom:none} .ex-ind-l > i{font-size:20px;color:var(--violet)} .ex-ind-l small{display:block;color:var(--text3);font-size:12px} .el-vide{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:3rem 1rem;color:var(--text2);font-size:15px;line-height:1.6} .el-vide i{font-size:48px;color:var(--teal)} /* Accès depuis la maison */ .ac-boite{padding:14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);margin-bottom:16px} .ac-ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;padding:4px 0} .ac-ligne>span:first-child{min-width:110px;color:var(--text3);font-size:12.5px} .ac-login{font-family:Consolas,"Courier New",monospace;font-size:15px} .ac-badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px;white-space:nowrap} .ac-badge.actif{background:var(--green-l);color:var(--green)} .ac-badge.attente{background:var(--blue-l);color:var(--blue)} .ac-badge.coupe{background:var(--bg3);color:var(--text3)} .ac-badge.oubli{background:var(--red-l);color:var(--red)} .ac-oubli{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-bottom:10px;border-radius:var(--r);background:var(--red-l);color:var(--red);font-size:13.5px} .ac-oubli>i{font-size:20px} .ac-code{font-family:Consolas,"Courier New",monospace;font-size:38px;font-weight:700;letter-spacing:8px;text-align:center;padding:14px;margin-bottom:12px; background:var(--teal-l);color:var(--teal-d);border-radius:var(--rl)} .ac-pastille{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:999px; background:var(--red);color:#fff;font-size:11px;font-weight:700;vertical-align:1px} /* Visio */ #visio{position:fixed;inset:0;z-index:3400;background:#0b0b0b;color:#fff;overflow:hidden} #visio #vi-autre{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0b0b0b} #vi-autre-off{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:20px;color:#bbb} #vi-autre-off i{font-size:64px;color:#555} #vi-moi{position:absolute;right:16px;bottom:92px;width:min(26vw,280px);aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#222;border:2px solid rgba(255,255,255,.25);transform:scaleX(-1)} #vi-etat{position:absolute;top:16px;left:50%;transform:translateX(-50%);max-width:min(680px,calc(100% - 32px));background:rgba(0,0,0,.65);padding:10px 16px;border-radius:12px;font-size:14.5px;line-height:1.45;text-align:center} #visio .vi-barre{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:12px;padding:8px 12px;background:rgba(0,0,0,.55);border-radius:999px} #visio .vi-barre button{width:54px;height:54px;border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center} #visio .vi-barre button:hover{background:rgba(255,255,255,.28)} #visio .vi-barre button.off{background:#fff;color:#c0392b} #visio .vi-barre button.on{background:var(--teal);color:var(--sur-teal)} #visio .vi-barre button.rouge{background:#d63031} #visio.mini{inset:auto 16px 16px auto;width:min(360px,calc(100vw - 32px));height:auto;aspect-ratio:16/10;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.45)} #visio.mini #vi-moi{width:30%;right:8px;bottom:60px;border-radius:8px} #visio.mini #vi-etat{font-size:12px;padding:6px 10px;top:8px} #visio.mini .vi-barre{bottom:8px;gap:6px;padding:4px 6px} #visio.mini .vi-barre button{width:38px;height:38px;font-size:16px} #visio.mini #vi-autre-off i{font-size:36px} #visio.mini #vi-autre-off{font-size:14px} #visio .vi-fin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-size:18px;text-align:center;padding:20px} #visio .vi-fin i{font-size:56px;color:#d63031} #vi-tab{position:absolute;inset:0 0 88px 0;background:#cfcfc8} #vi-tab canvas{display:block} #vi-tab .vi-tab-info{position:absolute;bottom:10px;left:12px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;padding:4px 10px;border-radius:999px} #vi-tab .vi-tab-info:empty{display:none} #visio.tableau:not(.mini) #vi-autre{inset:auto;top:12px;right:12px;width:min(24vw,260px);height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.4);z-index:2} #visio.tableau:not(.mini) #vi-autre-off{inset:auto;top:12px;right:12px;width:min(24vw,260px);aspect-ratio:16/9;border-radius:10px;background:#222;font-size:13px;z-index:2} #visio.tableau:not(.mini) #vi-autre-off i{font-size:28px} #visio.tableau:not(.mini) #vi-moi{display:none} #visio.mini #vi-tab{display:none} #vi-vues{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:8px} #vi-vues button{border:none;border-radius:999px;background:rgba(0,0,0,.65);color:#fff; padding:8px 14px;font-size:13.5px;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:6px} #vi-outils{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px; background:rgba(255,255,255,.96);color:#222;padding:8px 6px;border-radius:14px;box-shadow:0 4px 18px rgba(0,0,0,.25);max-height:calc(100% - 20px);overflow-y:auto;z-index:3} #vi-outils button{width:44px;height:44px;border-radius:10px;border:1px solid transparent;background:none;font-size:21px;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0} #vi-outils button.on{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d)} #vi-outils button:disabled{opacity:.35;cursor:default} #vi-outils button.pastille{width:30px;height:30px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 1px #bbb} #vi-outils button.pastille.on{box-shadow:0 0 0 3px var(--teal)} #vi-outils .sep{width:28px;height:1px;background:#ddd;margin:2px 0;flex-shrink:0} #vi-texte{position:absolute;z-index:4;display:flex;flex-direction:column;gap:6px;background:#fff;padding:6px;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.3)} #vi-texte textarea{min-width:240px;border:1px solid #ccc;border-radius:6px;padding:6px;font-family:inherit;resize:both;background:#fff} #vi-texte div{display:flex;gap:6px;justify-content:flex-end} #vi-miroir{position:absolute;inset:0 0 88px 0;background:#3a3a3a;overflow:hidden} #vi-miroir iframe{position:absolute;border:none;background:#fff;transform-origin:0 0;box-shadow:0 4px 20px rgba(0,0,0,.4)} .vi-ctl-flash{outline:4px solid #f4a261!important;outline-offset:2px;transition:outline-color .7s} #vi-ctl-info{position:fixed;top:12px;left:50%;transform:translate(-50%,-30px);z-index:3600;background:#f4a261;color:#222;font-weight:700;font-size:14px; padding:8px 16px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.25);opacity:0;transition:opacity .2s, transform .2s;pointer-events:none} #vi-ctl-info.on{opacity:1;transform:translate(-50%,0)} #vi-miroir .vi-miroir-info{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.7);color:#fff;padding:12px 18px;border-radius:12px;font-size:15px;text-align:center} #visio.miroir:not(.mini) #vi-autre{inset:auto;top:12px;right:12px;width:min(22vw,240px);height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.4);z-index:2} #visio.miroir:not(.mini) #vi-autre-off{inset:auto;top:12px;right:12px;width:min(22vw,240px);aspect-ratio:16/9;border-radius:10px;background:#222;font-size:13px;z-index:2} #visio.miroir:not(.mini) #vi-moi{display:none} #visio.mini #vi-miroir{display:none} #visio.mini.haut{inset:64px 12px auto auto;width:min(240px,calc(100vw - 24px))} .vi-choix-l{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:none;border-bottom:1px solid var(--border);background:none;text-align:left;font-family:inherit;cursor:pointer;color:var(--text)} .vi-choix-l:hover{background:var(--teal-l)} .vi-choix-l i{font-size:22px;color:var(--violet)} .vi-choix-l span{display:flex;flex-direction:column} .vi-choix-l small{color:var(--text3);font-size:12px} #vi-ailleurs{position:fixed;right:16px;bottom:16px;z-index:3400;display:flex;align-items:center;gap:10px;background:#111;color:#fff; padding:10px 14px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:13.5px} #vi-ailleurs i{color:var(--teal);font-size:18px} #vi-sonne{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:3500;display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:min(620px,calc(100vw - 32px)); background:var(--bg);color:var(--text);border:2px solid var(--teal);border-radius:16px;padding:14px 18px;box-shadow:0 12px 40px rgba(0,0,0,.3);animation:viSonne 1s ease-in-out infinite alternate} #vi-sonne b{display:block;font-size:17px} #vi-sonne span{display:block;font-size:13px;color:var(--text2)} #vi-sonne .vi-sonne-ico{font-size:34px;color:var(--teal)} #vi-sonne .btn{min-height:46px;font-size:15px} /* ── Visio de groupe ── */ #gv-mb{z-index:3550} .gv-test-res{display:flex;flex-direction:column;gap:8px;margin:10px 0} .gv-test-res:empty{display:none} .gv-test-l{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);font-size:13.5px} .gv-test-l b{display:block} .gv-test-l span{display:block;color:var(--text2);font-size:12.5px;margin-top:2px} .gv-test-i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--bg2);color:var(--text2)} .gv-test-l.ok{border-color:var(--teal)} .gv-test-l.ok .gv-test-i{background:var(--teal-l);color:var(--teal)} .gv-test-l.ko{border:1.5px dashed var(--red)} .gv-test-l.ko .gv-test-i{background:var(--red-l);color:var(--red)} .gv-test-l.neutre{border-style:dotted} .gv-test-c{margin:4px 0 0;font-size:14px;font-weight:600} .gv-test-lien{display:inline-flex;align-items:center;gap:6px;margin-top:8px;background:none;border:none;color:var(--teal);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;padding:0} .gv-chat-fils{display:flex;gap:6px;flex-wrap:wrap;padding:8px;border-bottom:1px solid #2b3a57;max-height:30%;overflow-y:auto} .gv-fil{background:#1e2a40;color:#dfe6f2;border:1px solid #33456a;border-radius:999px;padding:4px 10px;font:inherit;font-size:12.5px;cursor:pointer} .gv-fil.on{background:#0e7c70;border-color:#18b6a4;color:#fff} .gv-fil-n{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:#e8b030;color:#1b1b1b;font-size:11px;text-align:center} #gv-ailleurs{position:fixed;right:16px;bottom:16px;z-index:3300;display:flex;align-items:center;gap:10px;background:var(--bg);border:2px solid var(--teal);border-radius:12px;padding:8px 12px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:13.5px} .gv-onglet{display:flex;flex-direction:column;gap:22px} .gv-onglet-t{font-size:15px;margin:0 0 8px;color:var(--titre);display:flex;align-items:center;gap:6px} .gv-onglet-l{display:flex;flex-direction:column;gap:8px} .gv-onglet .gv-ligne .wb-el-av{flex:none} /* Le choix d'une activité s'ouvre pendant une visio (individuelle ou de groupe) : devant elle. */ #vi-choix{z-index:3600} .gv-quand{display:block!important;font-size:12px;color:var(--teal)!important;margin-top:2px} .gv-planif{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;margin-top:12px} .gv-planif label.sec-p{grid-column:1 / -1;margin:0} .gv-hebdo{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap} .gv-prevue{display:flex;align-items:center;gap:10px;margin:8px 0 0;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);font-size:13.5px} .gv-prevue i{font-size:20px;color:var(--teal)} .gv-prevue.proche{border:2px solid var(--teal);background:var(--teal-l)} #gv-rappel{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:3300;display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:min(620px,calc(100vw - 32px)); background:var(--bg);color:var(--text);border:2px solid var(--teal);border-radius:14px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:14px} #gv-rappel > i{font-size:24px;color:var(--teal)} #wb-conf-mb{z-index:3600} .gv-lignes{display:flex;flex-direction:column;gap:8px;margin:12px 0;max-height:50vh;overflow:auto} .gv-ligne{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg)} .gv-ligne b{font-size:14px} .gv-ligne span{display:block;font-size:12px;color:var(--text2)} .gv-ouverte{display:inline!important;color:var(--teal);font-weight:700;font-size:12px} .gv-els{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;max-height:42vh;overflow:auto;padding:2px} .gv-el{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--border);border-radius:var(--r);font-size:13px;cursor:pointer;min-width:0} .gv-el span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .gv-el small{font-size:11px;color:var(--text3)} .gv-el.off{opacity:.55;cursor:default} #gv-sonne{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:3500;display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:min(620px,calc(100vw - 32px)); background:var(--bg);color:var(--text);border:2px solid var(--teal);border-radius:16px;padding:14px 18px;box-shadow:0 12px 40px rgba(0,0,0,.3);animation:viSonne 1s ease-in-out infinite alternate} #gv-sonne b{display:block;font-size:17px} #gv-sonne span{display:block;font-size:13px;color:var(--text2)} #gv-sonne .vi-sonne-ico{font-size:34px;color:var(--teal)} #gv-sonne .btn{min-height:46px;font-size:15px} .gv [hidden]{display:none!important} .gv{position:fixed;inset:0;z-index:3400;background:#0d1320;color:#fff;display:flex;flex-direction:column;overflow:hidden} .gv-haut{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#131b2b;flex-wrap:wrap} .gv-titre{font-size:15px} .gv-etat{font-size:13px;color:#b9c4d6} .gv-cmd{display:flex;gap:6px;flex-wrap:wrap} .gv-b{display:inline-flex;align-items:center;gap:6px;background:#22304a;color:#fff;border:1px solid #33456a;border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer} .gv-b i{font-size:17px} .gv-b:hover{background:#2c3d5d} .gv-b.off{background:#3a2a22;border-color:#8a4b2f} .gv-b.rouge{background:#9a3412;border-color:#c2410c} .gv-b.actif{background:#7a5a10;border-color:#d9a520} .gv-b.vert{background:#0e7c70;border-color:#18b6a4} .gv-mains{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;background:#2b2410;color:#ffe7a8;font-size:13px} .gv-scene{flex:1;min-height:0;padding:10px;display:grid;gap:8px;grid-template-columns:repeat(var(--gv-col,3),minmax(0,1fr));align-content:center;overflow:auto} .gv-t{position:relative;background:#1c2638;border-radius:10px;overflow:hidden;aspect-ratio:16/10;min-width:0;border:3px solid transparent} .gv-t .gv-v,.gv-t .gv-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .gv-t.moi .gv-v video{transform:scaleX(-1)} .gv-t .gv-n{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.6);padding:2px 8px;border-radius:6px;font-size:12px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gv-t .gv-badges{position:absolute;right:8px;top:8px;display:flex;gap:4px;font-size:18px} .gv-t .gv-badges span{background:rgba(0,0,0,.6);border-radius:6px;padding:0 5px} .gv-t .gv-act{position:absolute;right:8px;bottom:8px} .gv-t.absent{opacity:.45} .gv-t.absent .gv-act{display:none} .gv-t.sans-cam .gv-v::after{content:"\1F464";position:absolute;inset:0;display:grid;place-items:center;font-size:42px;opacity:.5} .gv-t.main{border:3px dashed #e8b030} .gv-t.parole{border:3px solid #18b6a4} .gv-t.parle{box-shadow:0 0 0 3px #fff inset} .gv-prof .gv-scene{grid-template-rows:repeat(var(--gv-lig,1),minmax(0,1fr));align-content:stretch;padding-right:240px} .gv-prof .gv-scene .gv-t{aspect-ratio:auto;min-height:0} @media (max-width:900px){.gv-prof .gv-scene{padding-right:10px;padding-bottom:150px}} .gv-eleve .gv-scene{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)} .gv-eleve .gv-scene.avec-autres{grid-template-columns:minmax(0,3fr) minmax(0,1fr);grid-auto-rows:min-content} .gv-eleve .gv-t.grande{aspect-ratio:auto;height:100%;min-height:200px} .gv-eleve .gv-scene.avec-autres .gv-t.grande{grid-row:1 / span 6} .gv-eleve .gv-t.grande .gv-v video{object-fit:contain;background:#000} .gv-bas{position:absolute;right:14px;bottom:14px;width:min(220px,32vw)} .gv-bas .gv-t{aspect-ratio:4/3;box-shadow:0 6px 20px rgba(0,0,0,.5)} .gv-tabzone{position:relative;flex:1;min-height:0} .gv #visio{position:absolute;inset:0;z-index:auto;background:#cfcfc8} .gv #vi-tab{inset:0} .gv.gv-tab .gv-scene{display:none} .gv.gv-tab .gv-bas{display:flex;flex-direction:column;gap:8px;width:min(200px,28vw);z-index:5} .gv-stylo{background:#22304a;color:#fff;border:1px solid #33456a;border-radius:999px;padding:6px 10px;font:inherit;font-size:13px} .gv-t.ecran{cursor:pointer} .gv-t.ecran .gv-v{opacity:0} .gv-t .gv-ecran-h{position:absolute;inset:0;overflow:hidden;background:#fff;display:none} .gv-t.ecran .gv-ecran-h{display:block} .gv-t.ecran:hover{border-color:#8fb3ff} .gv-grand{position:absolute;inset:0;z-index:20;background:#0d1320;display:flex;flex-direction:column} .gv-grand-haut{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#131b2b;flex-wrap:wrap;font-size:13px;color:#b9c4d6} .gv-grand-haut b{color:#fff;font-size:15px} .gv-grand-zone{position:relative;flex:1;min-height:0;background:#3a3a3a;overflow:hidden} .gv-grand-zone iframe{position:absolute;border:none;background:#fff;transform-origin:0 0;box-shadow:0 4px 20px rgba(0,0,0,.4)} .gv-grand-info{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.7);padding:12px 18px;border-radius:12px;font-size:15px} .gv.gv-exo{inset:auto 10px 10px auto;width:min(230px,45vw);height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5)} .gv.gv-exo .gv-titre,.gv.gv-exo .gv-etat,.gv.gv-exo .gv-b span,.gv.gv-exo .gv-bas,.gv.gv-exo .gv-tabzone{display:none} .gv.gv-exo .gv-haut{padding:6px} .gv.gv-exo .gv-scene{padding:4px;grid-template-columns:1fr} .gv.gv-exo .gv-t.grande{min-height:110px;height:130px} .gv-chat{position:absolute;right:10px;top:64px;bottom:10px;width:min(320px,calc(100vw - 20px));z-index:15;background:#131b2b;border:1px solid #2b3a57;border-radius:12px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.45)} .gv-chat-haut{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-bottom:1px solid #2b3a57;font-size:13px} .gv-chat-haut span{color:#9fb0c8;font-size:12px} .gv-chat-l{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px} .gv-msg{background:#1e2a40;border-radius:10px;padding:6px 10px;max-width:92%;align-self:flex-start;font-size:13.5px;line-height:1.4;overflow-wrap:anywhere} .gv-msg.moi{align-self:flex-end;background:#16465a} .gv-msg.prof{border-left:3px solid #18b6a4} .gv-msg-n{display:block;font-size:11.5px;color:#9fb0c8;margin-bottom:2px} .gv-msg-t{white-space:pre-wrap} .gv-chat-vide{color:#9fb0c8;font-size:13px;text-align:center;margin:12px} .gv-chat-pied{padding:8px;border-top:1px solid #2b3a57;display:flex;flex-direction:column;gap:6px} .gv-chat-ouv{font-size:12px;color:#b9c4d6;display:flex;align-items:center;gap:6px} .gv-chat-saisie{display:flex;gap:6px} .gv-chat-saisie input{flex:1;min-width:0;background:#0d1320;color:#fff;border:1px solid #33456a;border-radius:8px;padding:8px 10px;font:inherit;font-size:14px} .gv-chat-attente{outline:2px dashed #e8b030} .gv.gv-mini .gv-chat,.gv.gv-exo .gv-chat{display:none} .gv-t.ecran-prof .gv-v video{object-fit:contain;background:#000} @media (max-width:640px){.gv-chat{left:10px;width:auto;top:auto;height:55vh}} .gv-fin{position:absolute;inset:0;background:rgba(13,19,32,.94);display:grid;place-items:center;text-align:center;font-size:17px} .gv-fin p{margin-bottom:14px} .gv-son-bloque{position:absolute;left:50%;top:70px;transform:translateX(-50%)} .gv.gv-mini{inset:auto 16px 16px auto;width:360px;height:240px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5)} .gv.gv-mini .gv-haut .gv-etat,.gv.gv-mini .gv-b span,.gv.gv-mini .gv-mains,.gv.gv-mini .gv-bas{display:none} @media (max-width:640px){.gv-b span{display:none}.gv-eleve .gv-scene.avec-autres{grid-template-columns:1fr}.gv-eleve .gv-scene.avec-autres .gv-t.grande{grid-row:auto;min-height:45vh}} @keyframes viSonne{from{box-shadow:0 12px 40px rgba(0,0,0,.3)}to{box-shadow:0 12px 40px rgba(20,150,130,.55)}} /* À la maison */ #ma-cloche{position:relative;background:none;border:1px solid var(--border2);border-radius:var(--r);padding:5px 9px;font-size:15px;color:var(--text3);cursor:pointer;display:flex;align-items:center} #ma-cloche.actif{color:var(--teal-d);border-color:var(--teal)} #ma-cloche .ma-n{position:absolute;top:-6px;right:-7px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;display:none;align-items:center;justify-content:center} #ma-cloche.actif .ma-n{display:inline-flex} #ma-vignettes{position:fixed;right:16px;bottom:16px;z-index:900;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px))} .ma-vig{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border:1px solid var(--border2);border-left:4px solid var(--teal);border-radius:var(--rl);padding:10px 12px;box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:13.5px;line-height:1.4;cursor:pointer;animation:maEntre .25s ease-out;transition:opacity .4s,transform .4s} .ma-vig > i{font-size:20px;margin-top:2px} .ma-vig > div{flex:1} .ma-vig-t{font-size:11px;font-weight:700;color:var(--teal-d);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px} .ma-vig button{background:none;border:none;color:var(--text3);cursor:pointer;padding:0;font-size:15px} .ma-vig.part{opacity:0;transform:translateX(30px)} @keyframes maEntre{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} body.en-seance #ma-vignettes{display:none} .ma-notif{font-size:12.5px;color:var(--text3);display:inline-flex;align-items:center;gap:5px} .ma-notif.on{color:var(--green)} .ma-liste{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden} .ma-jour{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);padding:10px 14px 6px;background:var(--bg2);border-bottom:1px solid var(--border)} .ma-l{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);font-size:13.5px} .ma-l:last-child{border-bottom:none} .ma-l.lien{cursor:pointer} .ma-l.lien:hover{background:var(--bg2)} .ma-l.neuf{background:var(--teal-l, rgba(20,150,130,.08))} .ma-l > i{font-size:18px;flex-shrink:0} .ma-l-t{flex:1} .ma-l-h{font-size:12px;color:var(--text3);white-space:nowrap} /* Document annotable d'un parcours */ .pa-annot{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text2);white-space:nowrap;cursor:pointer;padding:3px 8px;border-radius:999px;border:1px solid var(--border2)} .pa-annot input{width:16px;height:16px} /* Statistiques d'un élève dans un parcours */ .pa-st-act{border-top:1px solid var(--border);padding:12px 0} .pa-st-titre{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-bottom:6px} .pa-st-ligne{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--text2);margin-bottom:8px} /* Parcours : retour bien visible, temps du meilleur score */ .pa-retour{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:10px 22px;margin-bottom:12px;border-radius:14px;border:2px solid var(--teal); background:var(--teal);color:var(--sur-teal);font-size:17px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08)} .pa-retour i{font-size:22px} .pa-retour:hover{filter:brightness(1.05)} .pa-temps{display:block;font-size:10.5px;font-weight:600;opacity:.85;margin-top:1px} /* Parcours : enregistrement et niveaux */ .pa-etat{font-size:12px;color:var(--text3);white-space:nowrap} .pa-etat.modif{color:var(--amber)} .pa-nivs{display:inline-flex;flex-wrap:wrap;gap:3px;vertical-align:middle;margin-left:4px} .pa-el-carte .pa-nivs{display:flex;margin:5px 0 0} .pa-niv-filtre{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:-2px 0 10px;font-size:12.5px;color:var(--text3)} .pa-niv-filtre button{border:1px solid var(--border2);background:var(--bg);color:var(--text2);border-radius:999px;padding:3px 10px;font-size:12.5px;font-family:inherit;cursor:pointer} .pa-niv-filtre button.on{background:var(--teal);border-color:var(--teal);color:var(--sur-teal)} /* Parcours */ #wb-docs-view.pa-ouvert > :not(#wb-pa-vue){display:none!important} .pa-cercle .fond{fill:none;stroke:var(--border2);stroke-width:6} .pa-cercle .trace{fill:none;stroke:var(--teal);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .6s} .pa-cercle.fini .trace{stroke:var(--green)} .pa-cercle text{fill:var(--text);font-weight:700;font-family:inherit} .pa-cercle.fini text{fill:var(--green)} .pa-liste{display:flex;flex-direction:column;gap:10px} .pa-carte{display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);cursor:pointer} .pa-carte:hover{border-color:var(--teal)} /* L'onglet « Les jeux de logique » */ .lg-intro{font-size:14px;color:var(--text2);margin-bottom:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .lg-tete{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px} .lg-tete h3{margin:0;font-size:16px;flex:1;min-width:200px} .lg-n{font-size:12.5px;color:var(--text3)} .lg-nivf{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:0 0 10px} .lg-nivf>span{font-size:13px;color:var(--text2);margin-right:4px} .lud-niv-b{font-style:normal;font-size:11.5px;font-weight:700;color:var(--fam-log);border:1.5px solid var(--fam-log);border-radius:999px;padding:0 7px;margin-left:4px;white-space:nowrap;vertical-align:1px} .lg-miens{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px} .lg-mien{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--border);border-radius:var(--rl);background:var(--bg);padding:10px 12px;cursor:pointer;font:inherit;color:var(--text)} .lg-mien:hover{border-color:var(--fam-log)} .lg-mien i{font-size:24px;color:var(--fam-log)} .lg-mien span{display:flex;flex-direction:column;min-width:0} .lg-mien small{color:var(--text3);font-size:12.5px} #pa-fil{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:6px 8px;gap:6px;flex-wrap:wrap} .pa-dossiers{margin:0 0 14px} .pa-ranger{flex-shrink:0;align-self:center} .pa-carte-dos{color:var(--text3)} .pa-carte-ico{flex:0 0 44px;height:44px;border-radius:12px;background:var(--teal-l);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:24px} .pa-carte-nom{font-weight:700;font-size:15.5px} .pa-carte-info{font-size:12.5px;color:var(--text2);margin-top:2px} .pa-carte-els{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px} .pa-el{display:inline-flex;align-items:center;gap:6px;font-size:13px} .pa-el.fini{color:var(--green);font-weight:600} .pa-nom{flex:1;min-width:160px;font-size:17px;font-weight:700;font-family:inherit;padding:7px 10px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text)} .pa-desc{width:100%;box-sizing:border-box;font-size:13.5px} .pa-items{display:flex;flex-direction:column;gap:6px} .pa-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r)} .pa-num{flex:0 0 26px;height:26px;border-radius:50%;background:var(--bg3);color:var(--text2);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center} .pa-item-ico{font-size:20px;color:var(--text3)} .pa-item-ico[data-cat=exercice]{color:var(--violet)} .pa-item-nom{display:block;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pa-item-type{display:block;font-size:12px;color:var(--text3)} .pa-nonpartage{display:inline-block;margin-left:4px;padding:0 7px;border:1px dashed var(--amber);border-radius:999px;color:var(--amber);font-weight:600;font-size:11.5px} .pa-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 12px;border-radius:999px;background:var(--teal-l);color:var(--teal-d);font-size:13px;font-weight:600} .pa-chip button{border:none;background:none;color:inherit;cursor:pointer;padding:0 4px;font-size:14px} .pa-suivi td,.pa-suivi th{padding:6px 8px} .pa-case{display:inline-block;min-width:44px;padding:3px 6px;border-radius:6px;font-size:12px;font-weight:700;text-align:center} .pa-case.afaire{background:var(--bg3);color:var(--text3)} .pa-case.encours{background:var(--amber-l);color:var(--amber)} .pa-case.valide{background:var(--blue-l);color:var(--blue)} .pa-case.parfait{background:var(--green-l);color:var(--green)} .pa-case.fait{background:var(--violet-l);color:var(--violet)} .pa-case.suspect{background:var(--bg);color:var(--red);border:1.5px dashed var(--red)} .pa-case.attente{background:var(--bg);color:var(--violet);border:1.5px dashed var(--violet)} /* « À voix haute » */ .vh{max-width:680px;margin:0 auto;text-align:center} .vh-n{font-size:13px;color:var(--text3);margin-bottom:8px} .vh-texte{font-size:clamp(20px, 3.4vw, 30px);line-height:1.35;margin:8px 0 14px} .vh-bas{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px} .vh-rec{width:92px;height:92px;border-radius:50%;border:none;background:var(--red);color:#fff;font-size:40px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center} .vh-rec.on{background:var(--text);color:var(--bg);animation:vh-pouls 1.2s ease-in-out infinite} .vh-rec-lib{font-weight:600;font-size:15px} .vh-temps{font-variant-numeric:tabular-nums;color:var(--text2);font-size:14px} .vh-niveau{width:200px;max-width:80%;height:8px;background:var(--bg2);border-radius:4px;overflow:hidden} .vh-niveau i{display:block;height:100%;background:var(--teal);width:0;transition:width .08s} .vh-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .vh-actions .btn{min-height:46px;font-size:15px} .vh-avis{font-size:13.5px;margin-top:12px;color:var(--text2)} .vh-avis.valide{color:var(--teal-d)} .vh-avis.refaire{color:var(--violet)} .vh-recap{text-align:left;margin-top:14px;display:grid;gap:8px} .vh-recap-l{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px} .vh-recap-l audio{height:34px;max-width:100%} .vh-ec-l{border:1px solid var(--border);border-radius:var(--rl);padding:10px 12px;margin-bottom:8px;background:var(--bg)} .vh-ec-l.attente{border-color:var(--violet);border-style:dashed} .vh-ec-t{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .vh-ec-t b{flex:1;min-width:160px} .vh-ec-son{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px} .vh-ec-son audio{height:36px;flex:1;min-width:200px} .vh-ec-avis{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px} .vh-ec-avis .btn.on.ok{background:var(--teal);border-color:var(--teal);color:var(--sur-teal)} .vh-ec-avis .btn.on.re{background:var(--violet);border-color:var(--violet);color:#fff} .vh-ec-avis input{flex:1;min-width:180px} @keyframes vh-pouls{50%{transform:scale(1.06)}} @media (prefers-reduced-motion: reduce){.vh-rec.on{animation:none}} .res-susp{color:var(--red);font-weight:600} .pa-legende{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--text3);margin-top:8px} .pa-legende .pa-case{min-width:26px} .pa-termine{margin-left:6px;font-size:11.5px;font-weight:700;color:var(--green);background:var(--green-l);padding:2px 8px;border-radius:999px} .exo-fiche-pa{margin-top:10px;padding:8px 12px;border-radius:var(--r);background:var(--amber-l);color:var(--amber);font-size:13px} /* Parcours, côté élève (séance) */ .pa-el-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:0 0 16px} .pa-el-carte{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--bg);border:2px solid var(--teal-l);border-radius:16px;cursor:pointer;font-family:inherit;color:var(--text)} .pa-el-carte b{display:block;font-size:16px} .pa-el-carte span span{display:block;font-size:13px;color:var(--text2);margin-top:2px} /* les étiquettes restent des étiquettes, pas des lignes */ .pa-el-carte span .el-nouv-b,.el-exo span .el-nouv-b{display:inline-flex;font-size:11px;color:#243B6B;margin-top:0} .pa-el-carte span .el-arch-b,.el-exo span .el-arch-b{display:inline-flex;font-size:11.5px;color:var(--text2);margin-top:0} .pa-el-carte.fini{border-color:var(--green-l)} .pa-vue-tete{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);margin-bottom:14px} .pa-vue-tete h2{margin:0;font-size:22px} .pa-vue-desc{font-size:14px;color:var(--text2);margin-top:4px;white-space:pre-line} .pa-vue-av{font-size:14px;margin-top:6px;color:var(--text2)} .pa-vue-av.fini{color:var(--green);font-weight:700;font-size:16px} .pa-etapes{display:flex;flex-direction:column;gap:8px} .pa-etape{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:64px;background:var(--bg);border:1px solid var(--border);border-left:6px solid var(--border2);border-radius:var(--rl);cursor:pointer;font-family:inherit;color:var(--text);font-size:15px} .pa-etape .pa-item-nom{font-size:15.5px} .pa-etape-st{font-size:13px;color:var(--text2);text-align:right} .pa-etape.afaire{border-left-color:var(--border2)} .pa-etape.encours{border-left-color:var(--amber);background:linear-gradient(90deg, var(--amber-l), var(--bg) 40%)} .pa-etape.encours .pa-etape-st{color:var(--amber)} .pa-etape.valide{border-left-color:var(--blue);background:linear-gradient(90deg, var(--blue-l), var(--bg) 40%)} .pa-etape.valide .pa-etape-st{color:var(--blue)} .pa-etape.parfait{border-left-color:var(--green);background:linear-gradient(90deg, var(--green-l), var(--bg) 40%)} .pa-etape.parfait .pa-etape-st{color:var(--green)} .pa-etape.ouvert{border-left-color:var(--teal)} /* Une activité (à faire, compte dans la progression) ne ressemble pas à un document (à consulter). */ .pa-etape.act{box-shadow:0 2px 6px rgba(0,0,0,.07)} .pa-etape.act.afaire{border-left-color:var(--violet)} .pa-etape.docu{background:var(--bg2);border-style:dashed;border-left-style:solid;border-left-color:var(--teal);min-height:54px;padding:10px 16px} .pa-etape.docu .pa-item-nom{font-weight:500} .pa-etape.docu .pa-num{background:transparent;border:1px dashed var(--border2)} .pa-sorte{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;width:max-content;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 8px;border-radius:999px;margin-bottom:3px} .pa-sorte.act{background:var(--violet-l, rgba(124,58,237,.12));color:var(--violet)} .pa-sorte.docu{background:var(--teal-l);color:var(--teal-d)} .pa-legende{font-size:12.5px;color:var(--text3);margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px} /* Le lecteur de l'élève */ #wb-lecteur{position:fixed;inset:0;z-index:2500;background:#111;display:flex;flex-direction:column;color:#fff} #wb-lecteur .lec-tete{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#1d1d1d;font-size:15px;font-weight:600} #wb-lecteur .lec-tete span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #wb-lecteur .lec-x{border:none;background:#fff;color:#111;border-radius:999px;padding:10px 18px;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:46px} #wb-lecteur .lec-corps{flex:1;overflow:auto;-webkit-overflow-scrolling:touch} #wb-lecteur .lec-corps.image{display:flex;align-items:center;justify-content:center;padding:10px} #wb-lecteur .lec-corps.image img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;background:#fff} #wb-lecteur .lec-corps.image.reel{display:block} #wb-lecteur .lec-corps.image.reel img{max-width:none;max-height:none;cursor:zoom-out} #wb-lecteur .lec-corps.pdf{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px} #wb-lecteur .lec-corps.pdf canvas{max-width:100%;height:auto;box-shadow:0 2px 12px rgba(0,0,0,.5)} #wb-lecteur .lec-info{padding:40px 20px;text-align:center;font-size:16px;color:#ccc} #wb-lecteur .lec-son{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;height:100%;padding:20px} #wb-lecteur .lec-son i{font-size:90px;color:var(--teal)} #wb-lecteur .lec-son audio{width:min(520px,100%)} @media(max-width:640px){ .pa-etape{flex-wrap:wrap} .pa-etape-st{width:100%;text-align:left;padding-left:38px} } /* Quiz */ .exo-quiz-reg{margin-top:12px;padding:10px 12px;border-radius:var(--r);background:var(--bg2)} .exo-quiz-reg>label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;font-weight:600} .exo-quiz-reg>label span,.exo-quiz-opt span{font-weight:400;color:var(--text3);font-size:12px} .exo-quiz-reg input[type=number]{width:80px;padding:5px 8px;border:1px solid var(--border2);border-radius:var(--r);font-size:14px;font-family:inherit;background:var(--bg);color:var(--text)} .exo-quiz-opt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;margin-top:4px;cursor:pointer} .exo-forme-seg{display:inline-flex;border:1px solid var(--border2);border-radius:999px;overflow:hidden} .exo-forme-seg button{border:none;background:var(--bg);color:var(--text2);font:inherit;font-size:13px;padding:5px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:4px} .exo-forme-seg button+button{border-left:1px solid var(--border2)} .exo-forme-seg button.on{background:var(--teal);color:var(--sur-teal, #fff);font-weight:600} .exo-quiz-forme{padding:4px 8px;border:1px solid var(--border2);border-radius:var(--r);font-size:13px;font-family:inherit;background:var(--bg);color:var(--text)} .exo-qz-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;color:var(--text2);margin-bottom:6px} .exo-qz-minut{display:inline-flex;align-items:center;gap:5px;padding:3px 12px;border-radius:999px;background:var(--amber-l);color:var(--amber);font-weight:700} .exo-qz-minut.urgent{background:var(--red);color:#fff} .exo-qz-barre{height:8px;border-radius:4px;background:var(--bg3);overflow:hidden;margin-bottom:12px} .exo-qz-barre span{display:block;height:100%;background:var(--teal);transition:width .3s} .exo-qz-in{width:100%;box-sizing:border-box;min-height:52px;font-size:20px!important;margin-top:8px} .exo-qz-pied{display:flex;justify-content:flex-end;margin-top:14px} .exo-qz-pied .btn{min-height:50px;font-size:16px} .exo-qz-ligne{display:flex;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border)} .exo-qz-ligne:last-child{border-bottom:none} .exo-qz-ico{flex:0 0 28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff} .exo-qz-ligne.ok .exo-qz-ico{background:var(--green)} .exo-qz-ligne.ko .exo-qz-ico{background:var(--red)} .exo-qz-q{font-weight:600} .exo-qz-r{font-size:13.5px;color:var(--text2);margin-top:2px} .exo-qz-r.bonne{color:var(--green);font-weight:600} /* Minuteur */ .exo-minut{display:flex;align-items:center;gap:6px;margin:6px 0 0 26px;font-size:13px} .exo-minut input{width:64px;padding:6px 8px;border:1px solid var(--border2);border-radius:var(--r);font-size:14px;font-family:inherit;background:var(--bg);color:var(--text)} .exo-chrono.minuteur.alerte{color:var(--amber);background:var(--amber-l)} .exo-chrono.minuteur.urgent{color:#fff;background:var(--red)} .exo-bilan.temps{border-color:var(--red);background:var(--red-l)} /* Images agrandissables dans les activités */ .exo-img-zoom{position:relative;display:block;width:fit-content;max-width:100%;margin:8px auto;cursor:zoom-in} .exo-img-zoom .exo-img{margin:0!important} /* Activité incomplète, signalée sur sa carte */ #wb-list-view .wb-card .btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6)} .exo-carte-pb{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:12px;font-weight:600;color:var(--red);min-width:0} .exo-carte-pb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .exo-carte-pb i{font-size:14px;flex-shrink:0} /* Fiche d'une activité */ .exo-fiche-haut{display:flex;gap:14px;align-items:flex-start} .exo-fiche-ico{flex:0 0 56px;height:56px;border-radius:14px;background:var(--violet-l);color:var(--violet);display:flex;align-items:center;justify-content:center;font-size:30px} .exo-fiche-titre{font-size:20px;font-weight:700;line-height:1.25} .exo-fiche-info{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:6px;font-size:13px;color:var(--text2)} .exo-fiche-info i{vertical-align:-2px} .exo-fiche-consigne{margin-top:12px;padding:10px 12px;border-radius:var(--r);background:var(--teal-l);font-size:14px} .exo-fiche-consigne i{color:var(--teal)} .exo-fiche-pb{display:flex;gap:10px;margin-top:12px;padding:10px 12px;border-radius:var(--r);background:var(--red-l);color:var(--red);font-size:13.5px;line-height:1.45} .exo-fiche-pb>i{font-size:20px;flex-shrink:0} .exo-fiche-pb ul{margin:4px 0 0;padding-left:18px} .exo-fiche-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .exo-fiche-btns .btn{min-height:44px;font-size:14.5px} .exo-fiche-tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px} .exo-fiche-tuile{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:12px 14px;display:flex;flex-direction:column;gap:2px} .exo-fiche-tuile b{font-size:22px;line-height:1.2} .exo-fiche-tuile span{font-size:12px;color:var(--text3)} .exo-fiche-tuile.bon b,.exo-sc.bon{color:var(--green)} .exo-fiche-tuile.moyen b,.exo-sc.moyen{color:var(--amber)} .exo-fiche-tuile.faible b,.exo-sc.faible{color:var(--red)} .exo-sc{font-weight:600} .exo-ecart{font-size:11.5px;font-weight:600;padding:1px 6px;border-radius:999px} .exo-ecart.plus{background:var(--green-l);color:var(--green)} .exo-ecart.moins{background:var(--red-l);color:var(--red)} .exo-fiche-tous{margin-top:10px} .exo-fiche-tous summary{cursor:pointer;font-size:13px;color:var(--text2)} #exo-clavier-b.on{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d)} @media(max-width:640px){ .exo-pave{left:8px;right:auto;bottom:8px;width:calc(100vw - 16px);max-width:none} } .exo-col{max-width:820px;margin:0 auto} .exo-carte{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:14px 16px;margin-bottom:12px} .exo-carte.ok{border-color:var(--green);box-shadow:0 0 0 2px var(--green-l)} .exo-carte.ko{border-color:var(--red);box-shadow:0 0 0 2px var(--red-l)} .exo-lab{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px} /* L'éditeur en quatre sections */ .exo-barre{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px} .exo-barre button{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;border:1px solid var(--border2);background:var(--bg);color:var(--text2);font-size:12.5px;cursor:pointer;font-family:inherit} .exo-barre button:hover{background:var(--bg2)} .exo-barre .exo-pb-puce{color:var(--amber);border-color:var(--amber);font-weight:600} .exo-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--teal-l);color:var(--teal-d);font-size:11.5px;font-weight:700;flex-shrink:0} .exo-sec-t{display:flex;align-items:baseline;gap:8px;margin:20px 0 8px;font-size:15px;font-weight:600;color:var(--titre);scroll-margin-top:10px} .exo-sec-t .exo-num{align-self:center} .exo-sec-t small{font-size:12px;font-weight:400;color:var(--text3)} .exo-regs{padding:4px 16px} .exo-reg{display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--border)} .exo-reg:first-child{border-top:none} .exo-reg-n{width:150px;flex-shrink:0;font-size:13px;font-weight:600;color:var(--text2);padding-top:3px} .exo-reg-v{flex:1;min-width:0} .exo-reg-v .exo-quiz-opt:first-child{margin-top:0} .exo-reg-nb{width:70px;padding:4px 8px;border:1px solid var(--border2);border-radius:var(--r);font-family:inherit;background:var(--bg);color:var(--text)} .exo-coche{display:flex;align-items:flex-start;gap:8px;font-size:13px;cursor:pointer;margin-top:6px} .exo-coche:first-child{margin-top:0} .exo-coche input{width:18px;height:18px;flex-shrink:0;margin-top:0} .exo-coche span,.exo-reg-v .exo-quiz-opt span{color:var(--text3);font-size:12px} .exo-coche.inactif{opacity:.5;cursor:not-allowed} .exo-resume{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:9px 12px;margin-bottom:6px;cursor:pointer;font-family:inherit;font-size:13.5px;color:var(--text)} .exo-resume:hover{border-color:var(--border2);background:var(--bg3)} .exo-resume-n{color:var(--text3);font-variant-numeric:tabular-nums;min-width:18px} .exo-resume-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .exo-resume-i{font-size:12px;color:var(--text3);white-space:nowrap} .exo-resume-pb{font-size:12px;color:var(--amber);font-weight:600;white-space:nowrap} .exo-ajouter{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px} @media(max-width:640px){.exo-reg{flex-direction:column;gap:6px}.exo-reg-n{width:auto}} .exo-in{width:100%;padding:9px 11px;font-size:14px;font-family:inherit;border:1px solid var(--border2);border-radius:var(--r); background:var(--bg);color:var(--text);box-sizing:border-box} .exo-in:focus{outline:none;border-color:var(--teal)} textarea.exo-in{resize:vertical;min-height:44px} .exo-rep{display:flex;align-items:center;gap:8px;margin-top:6px} .exo-rep input[type=checkbox]{width:20px;height:20px;flex-shrink:0;accent-color:var(--green)} .exo-mini{border:none;background:none;color:var(--text3);cursor:pointer;width:32px;height:32px;border-radius:var(--r); display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} .exo-mini:hover{background:var(--bg2);color:var(--text)} .exo-mini.sup:hover{background:var(--red-l);color:var(--red)} .exo-mini:disabled{opacity:.3;cursor:default} .exo-img{display:block;max-width:100%;max-height:260px;border-radius:var(--r);border:1px solid var(--border);margin:8px 0} /* Le lecteur : de grandes cibles pour le doigt, lisibles de loin. */ .exo-q{font-size:18px;font-weight:600;line-height:1.4;margin-bottom:10px;white-space:pre-wrap} .exo-choix{display:grid;gap:8px} .exo-choix button{display:flex;align-items:center;gap:10px;text-align:left;width:100%;min-height:52px;padding:10px 14px; font-size:16px;font-family:inherit;border:2px solid var(--border2);border-radius:var(--rl);background:var(--bg); color:var(--text);cursor:pointer} .exo-choix button i{font-size:20px;color:var(--text3)} /* Des propositions avec image : des cartes ; un son seul : un grand haut-parleur et sa lettre (20/10/2026) */ .exo-rep-el{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;flex:1} .exo-choix .exo-court{font-size:inherit} .exo-choix button .exo-pson-b i{color:inherit;font-size:inherit} .exo-rep:has(.exo-rep-img, .exo-pson){align-items:flex-start} .exo-rep:has(.exo-rep-img, .exo-pson) > input[type=checkbox]{margin-top:12px} .exo-choix button img{max-width:100%;max-height:150px;border-radius:8px;display:block} .exo-choix.media,.exo-choix.sons{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))} .exo-choix.media button,.exo-choix.sons button{flex-direction:column;justify-content:center;text-align:center} .exo-choix.media .exo-rep-el,.exo-choix.sons .exo-rep-el{flex-direction:column;justify-content:center} .exo-choix button.lit,.exo-q.lit{box-shadow:0 0 0 4px #7B5CC4;border-color:#7B5CC4} .exo-q{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-radius:10px} .exo-lire{margin:0 0 10px} .exo-rep-img{max-height:90px!important;margin-top:6px} .exo-rep-mini{max-height:44px;border-radius:5px;vertical-align:middle;margin-right:4px} .exo-choix button.on{border-color:var(--teal);background:var(--teal-l)} .exo-choix button.on i{color:var(--teal-d)} .exo-choix button.juste{border-color:var(--green);background:var(--green-l)} .exo-choix button.faux{border-color:var(--red);background:var(--red-l)} .exo-choix button:disabled{cursor:default} /* Juste / faux se reconnaissent SANS la couleur : une pastille ✓ ou ✗, et ce qui est faux a un bord en pointillés et un fond hachuré (les champs à écrire, qui ne portent pas de pastille, gardent bord et hachures). */ .exo-choix button.juste,.exo-choix button.faux,.exo-case.juste,.exo-case.faux,.exo-pcarte.juste,.exo-pcarte.faux, .exo-mem-carte.rate,.exo-pe-clavier button.bon{position:relative} .exo-choix button.juste::after,.exo-case.juste::after,.exo-pcarte.juste::after,.exo-pe-clavier button.bon::after{content:'✓';background:var(--green)} .exo-choix button.faux::after,.exo-case.faux::after,.exo-pcarte.faux::after,.exo-mem-carte.rate::after{content:'✗';background:var(--red)} .exo-choix button.juste::after,.exo-case.juste::after,.exo-pcarte.juste::after,.exo-pe-clavier button.bon::after, .exo-choix button.faux::after,.exo-case.faux::after,.exo-pcarte.faux::after,.exo-mem-carte.rate::after{ position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;color:#fff;font-size:15px;font-weight:900; line-height:24px;text-align:center;box-shadow:0 0 0 2px var(--bg);pointer-events:none;z-index:1;font-family:system-ui,sans-serif} .exo-pe-clavier button.bon::after{width:18px;height:18px;line-height:18px;font-size:11px;top:-6px;right:-6px} .exo-choix button.faux,.exo-case.faux,.exo-pcarte.faux,.exo-trou.faux,.exo-cr-case.faux,.exo-mem-carte.rate{border-style:dashed!important; background-image:repeating-linear-gradient(135deg, transparent 0 7px, rgba(0,0,0,.07) 7px 12px)} .exo-trou.juste,.exo-cr-case.juste{border-bottom-width:4px!important} /* Le bouton flotte seul, sans bandeau : les cartes restent visibles autour (un fond en dégradé effaçait les étiquettes qui passaient dessous). En fin de défilement, il se range sous la dernière ligne. */ .exo-pied{position:sticky;bottom:0;background:none;padding:14px 0 10px;text-align:center;pointer-events:none} .exo-pied .btn{min-height:48px;font-size:16px;padding:10px 26px;pointer-events:auto;box-shadow:0 4px 16px rgba(0,0,0,.22)} :root{--fam-jeu:#C2410C;--fam-jeu-l:#FFE8D9;--fam-log:#1864AB;--fam-log-l:#E3F0FC;--fam-memo:#A3245E;--fam-memo-l:#FBE3EE} @media(prefers-color-scheme:dark){:root{--fam-jeu:#FFA36E;--fam-jeu-l:#47230F;--fam-log:#8EC1F5;--fam-log-l:#0D2E4D;--fam-memo:#F49AC1;--fam-memo-l:#4A1630}} [data-fam=exercice]{--fam:var(--violet);--fam-l:var(--violet-l)} [data-fam=jeu]{--fam:var(--fam-jeu);--fam-l:var(--fam-jeu-l)} [data-fam=logique]{--fam:var(--fam-log);--fam-l:var(--fam-log-l)} [data-fam=memo]{--fam:var(--fam-memo);--fam-l:var(--fam-memo-l)} .exo-fam{margin-bottom:22px;padding:14px;border-radius:18px;background:var(--fam-l);border-left:6px solid var(--fam)} .exo-fam-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;font-size:19px;color:var(--fam)} .exo-fam-t small{flex-basis:100%;font-size:13px;font-weight:400;color:var(--text2);margin-left:50px;margin-top:-8px} .exo-fam-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--fam);color:#fff;font-size:22px} .exo-types button[data-fam]{border-color:transparent;box-shadow:0 2px 8px rgba(20,40,80,.06)} .exo-types button[data-fam] i{color:var(--fam)!important} .exo-types button[data-fam]:hover{border-color:var(--fam)!important} .wb-thumb[data-cat=jeu]{background:var(--fam-jeu-l);color:var(--fam-jeu)} .wb-thumb[data-cat=logique]{background:var(--fam-log-l);color:var(--fam-log)} .wb-thumb[data-cat=memo]{background:var(--fam-memo-l);color:var(--fam-memo)} .wb-repr-b[data-cat=jeu] i{color:var(--fam-jeu)} .wb-repr-b[data-cat=logique] i{color:var(--fam-log)} .wb-repr-b[data-cat=memo] i{color:var(--fam-memo)} .pa-item-ico[data-cat=jeu]{color:var(--fam-jeu)} .pa-item-ico[data-cat=logique]{color:var(--fam-log)} .pa-item-ico[data-cat=memo]{color:var(--fam-memo)} .el-exo-ico[data-fam]{color:var(--fam)!important;background:var(--fam-l)!important} /* Les cartes mémoire */ .lt{text-align:center;max-width:620px;margin:0 auto} .lt-n{font-size:13px;color:var(--text3);margin-bottom:10px} .lt-carte{border:2px solid var(--fam-memo);border-radius:18px;background:var(--bg);padding:22px 18px;min-height:150px;display:grid;gap:12px;align-content:center;box-shadow:0 6px 20px rgba(20,40,80,.08)} .lt-q{font-size:clamp(22px, 4vw, 32px);font-weight:700} .lt-verso{border-top:2px dashed var(--fam-memo-l);padding-top:12px} .lt-rep{font-size:clamp(22px, 4vw, 32px);font-weight:700;color:var(--fam-memo)} .lt-autres{font-size:14px;color:var(--text2);margin-top:4px} .lt-saisie{font-size:22px;text-align:center;max-width:420px;margin:0 auto;width:100%} .ef{max-width:760px;margin:0 auto} /* Tracer les lettres (19/10/2026) */ .tcr-note{font-size:12.5px;color:var(--text3);margin-top:6px} .tcr-gris{color:var(--text3)} .tcr-apercu{margin-top:10px} .tcr-ap-mots{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px} .tcr-ap-mot{border:1.5px solid var(--border);background:var(--bg);color:var(--text);border-radius:16px;padding:3px 11px;font-size:14px;cursor:pointer} .tcr-ap-mot.on{border-color:var(--teal);background:var(--teal-l)} .tcr-ap-svg{max-width:560px;border:1px solid var(--border);border-radius:10px;background:#fff} .tcr-ap-svg svg{max-height:200px} .tcr-etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px} .tcr-etape{border:1.5px solid var(--border);border-radius:10px;padding:8px 10px;font-size:14px;cursor:pointer;display:flex;gap:6px;align-items:center} .tcr-etape.on{border-color:var(--teal);background:var(--teal-l)} .tcr-ligne{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:14px;margin:8px 0} .tcr-ligne>span{color:var(--text2)} .tcr-ligne input{width:17px;height:17px;vertical-align:-3px} .tcr{text-align:center} .tcr-compte{font-size:14.5px;color:var(--text2);margin-bottom:10px} .tcr-zone{display:flex;justify-content:center} .tcr-feuille{margin:0 auto;background:#fff;border-radius:12px;border:1px solid #DDE3EC} .tcr-svg{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none} .tcr-cote{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center} .tcr-cote.ligne{flex-direction:row;justify-content:center;gap:12px} .tcr-cote.ligne.gaucher{flex-direction:row-reverse} .tcr-cote.ligne .tcr-feuille{margin:0} .tcr-l{stroke:#D5CFF5;stroke-width:10} .tcr-l.fort{stroke:#B3A8EA;stroke-width:16} .tcr-l.base{stroke:#9C8FE0;stroke-width:24} .tcr-m{fill:none;stroke:#DCE1E6;stroke-width:148;stroke-linecap:round;stroke-linejoin:round} .tcr-m.fort{stroke:#8E9AA6} .tcr-m.pt{stroke:#9AA6B0;stroke-width:70;stroke-dasharray:0 150} .tcr-a{fill:none;stroke:#1F2A30;stroke-width:148;stroke-linecap:round;stroke-linejoin:round} .tcr-stylo{fill:#0E7C70;stroke:#fff;stroke-width:24} .tcr-dep{fill:#7B5CC4} .tcr-e{fill:none;stroke:#1C5DB0;stroke-width:118;stroke-linecap:round;stroke-linejoin:round;opacity:.9} .tcr-point{fill:#1C5DB0} .tcr-manque{fill:none;stroke:#7B5CC4;stroke-width:60;stroke-dasharray:70 60;stroke-linecap:round} .tcr-dehors{fill:none;stroke:#D9541E;stroke-width:46;stroke-dasharray:30 40;stroke-linecap:round} .tcr-msg{max-width:600px;margin:12px auto 0;border-radius:10px;padding:10px 14px;font-size:16px;text-align:left;line-height:1.6} .tcr-msg.ok{background:var(--teal-l);border:1.5px solid var(--teal)} .tcr-msg.ko{background:var(--red-l);border:1.5px dashed #D9541E} .tcr-ic{display:inline-block;min-width:22px;font-weight:800} .tcr-ic.vio{color:#7B5CC4} .tcr-ic.ver{color:#D9541E} .tcr-voile{position:fixed;inset:0;background:rgba(10,20,30,.45);z-index:3000;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px 12px} .tcr-boite{background:var(--bg);color:var(--text);border-radius:14px;max-width:900px;width:100%;padding:16px 18px} .tcr-v-tete{display:flex;gap:8px;align-items:center;font-size:15px} .tcr-v-tete .exo-mini{margin-left:auto} .tcr-v-ligne{margin:8px 0 14px} .tcr-v-titre{font-size:14.5px;margin-bottom:4px} /* Graphisme (19/10/2026) */ .gra-barre{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:10px 0} .gra-f{border:1.5px solid var(--border);border-radius:16px;padding:4px 11px;font-size:13.5px;background:var(--bg);color:var(--text);cursor:pointer} .gra-f.on{border-color:var(--teal);background:var(--teal-l)} .gra-f.vio{border-color:#7B5CC4;color:#5B3FA8;background:#EFEAFB} .gra-choisis{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px} .gra-choix{border:1.5px solid var(--teal);background:var(--teal-l);color:var(--text);border-radius:14px;padding:3px 4px 3px 10px;font-size:13.5px;display:inline-flex;align-items:center;gap:4px} .gra-choix button{border:none;background:none;cursor:pointer;color:var(--text2);font-size:13px;padding:0 4px} .gra-fam{margin:16px 0 8px;font-weight:600;font-size:15px} .gra-fam span{font-weight:400;color:var(--text3);font-size:13px;margin-left:6px} .gra-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px} .gra-g{border:1.5px solid var(--border);border-radius:12px;padding:8px;cursor:pointer;position:relative;background:var(--bg)} .gra-g.on{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l)} .gra-g.on::after{content:"✓ " attr(data-ordre);position:absolute;top:6px;right:6px;background:var(--teal);color:#fff;border-radius:10px;padding:1px 8px;font-size:12px;font-weight:600} .gra-g svg{width:100%;height:54px;background:#FAFBFD;border-radius:8px;display:block} .gra-g b{display:block;margin:6px 0 3px;font-size:14px} .gra-niv{display:inline-block;border-radius:9px;padding:1px 7px;font-size:11.5px;font-weight:600} .gra-niv.ps{background:#FFF1D6;color:#8A5A00} .gra-niv.ms{background:#DCEBFF;color:#1C4F96} .gra-niv.gs{background:#EFE3FA;color:#6232A8} .gra-fl{color:var(--text3);font-size:11px;margin:0 3px} .gra-prep{font-size:12.5px;color:var(--text2);margin-top:4px} .gra-bas{display:flex;gap:4px;margin-top:5px} .gra-cons{border:1px solid transparent;background:none;color:#5B3FA8;font-size:12.5px;cursor:pointer;padding:2px 6px;border-radius:8px} .gra-cons.on{border-color:#7B5CC4;background:#EFEAFB} .gra-det{margin:10px 0 4px;border:1.5px solid #7B5CC4;background:#F6F2FD;color:#1B2436;border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.55} .gra-det-t{font-weight:600;color:#5B3FA8;margin-bottom:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .gra-det-t .exo-mini{margin-left:auto} .gra-ap{margin:8px 0;background:#fff;border:1px solid #DDE3EC;border-radius:10px} .gra-ap svg{max-height:200px} .gra-dire{display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px;font-weight:600;margin:0 0 6px;line-height:1.3} .gra-hp{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--teal);background:var(--bg);color:var(--teal);cursor:pointer;font-size:18px;flex:none} .gra-deco{pointer-events:none;user-select:none;-webkit-user-select:none} .gra-chemin{fill:none;stroke:#D6EEE9;stroke-linecap:round;stroke-linejoin:round} .gra-chemin-pt{fill:#D6EEE9} .gra-rep{fill:#B8C1CC} .gra-fleche{fill:none;stroke:#7B5CC4;stroke-width:42;stroke-linecap:round;stroke-linejoin:round} .gra-point{fill:#DCE1E6} .gra-point.fort{fill:#8E9AA6} .gra-point.pt{fill:#9AA6B0} .gra-des{display:grid;grid-template-columns:1fr 260px;gap:14px} @media (max-width:760px){.gra-des{grid-template-columns:1fr}} .gra-des-zone{border:1px solid #DDE3EC;border-radius:12px;background:#fff} .gra-des-ap{border:1px solid #DDE3EC;border-radius:10px;background:#fff;min-height:40px} .gra-des-ch label{display:block;font-size:14px;margin:6px 0} .gra-des-ch .exo-in{width:100%} .tcr-v-svg{background:#fff;border:1px solid #DDE3EC;border-radius:10px;max-height:240px} .tcr-ok{color:var(--teal);font-weight:800} .tcr-ko{color:#D9541E;font-weight:800} /* L'encodage (19/10/2026) */ @font-face{font-family:'Ludisca cursive';src:url(/polices/cursive.woff2) format('woff2');font-display:swap} /* Luciole (luciole-vision.com, CC BY 4.0 : polices/LICENCE-luciole.txt) : pour le texte en syllabes. */ @font-face{font-family:'Luciole';src:url(/polices/Luciole-Regular.woff2) format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Luciole';src:url(/polices/Luciole-Bold.woff2) format('woff2');font-weight:700;font-display:swap} .cod-srcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-bottom:8px} .cod-src{border:1.5px solid var(--border);border-radius:10px;padding:9px 10px;cursor:pointer;display:flex;gap:8px;align-items:flex-start;font-size:14px} .cod-src.on{border-color:var(--teal);background:var(--teal-l)} .cod-src small{display:block;color:var(--text3);font-size:12px;margin-top:2px} .cod-ligne{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:14px;margin:7px 0} .cod-ligne>span{color:var(--text2)} .cod-ligne input[type=checkbox],.cod-ligne input[type=radio]{width:17px;height:17px;vertical-align:-3px} .cod-fam{display:flex;align-items:center;gap:8px;margin:10px 0 5px;font-size:12.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.04em} .cod-sons{display:flex;flex-wrap:wrap;gap:6px} .cod-son{border:1.5px solid var(--border);border-radius:8px;padding:5px 10px;font-size:15px;background:var(--bg);color:var(--text);cursor:pointer;min-width:40px} .cod-son.on{background:var(--teal);border-color:var(--teal);color:var(--sur-teal)} .cod-son.on::before{content:'✓ ';font-size:11px} .cod-apercu{background:var(--bg2);border-radius:10px;padding:9px 11px;margin-top:10px;font-size:15px;line-height:1.9} .cod-ap{margin-right:8px;white-space:nowrap} .cod-mien{border-top:1px solid var(--border);padding:9px 0} .cod-mien-l{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .cod-mien-t{width:150px} .cod-mien-d{width:170px;font-family:ui-monospace,Consolas,monospace;font-size:14px} .cod-mien-ap{display:inline-flex;gap:6px;font-size:17px} .cod-ap-syl{display:inline-flex;gap:1px;border-bottom:2.5px solid var(--text2);border-radius:0 0 50% 50%/0 0 9px 9px;padding:0 3px 4px} .cod-ap-g{background:var(--bg2);border-radius:4px;padding:0 4px} .cod-ap-g.muet{color:var(--text3)} .cod-mien-img{width:40px;height:40px;object-fit:contain;border-radius:6px} .cod-mien-emo{font-size:28px} .cod{text-align:center} .cod-compte{font-size:13.5px;color:var(--text3);margin-bottom:8px} .cod-ecoute{display:flex;justify-content:center;align-items:center;gap:20px;margin-bottom:16px} .cod-hp{width:74px;height:74px;border-radius:50%;border:none;background:var(--teal);color:var(--sur-teal);font-size:36px;cursor:pointer;box-shadow:0 3px 0 var(--teal-d)} .cod-hp:active{transform:translateY(2px);box-shadow:0 1px 0 var(--teal-d)} .cod-img{font-size:72px;line-height:1} .cod-img-f{max-width:140px;max-height:110px;object-fit:contain;border-radius:10px} .cod-zone{min-height:96px;display:inline-flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;gap:3px;padding:12px 18px 14px;border-bottom:3px solid var(--text);min-width:min(300px, 80%)} .cod-zone.arcs{padding-bottom:6px} .cod-zone.reussi{border-bottom-color:var(--teal)} .cod-pl{font:inherit;font-size:clamp(34px, 6vw, 48px);font-weight:600;line-height:1.15;padding:0 2px;background:none;border:none;color:var(--text);cursor:pointer;position:relative} .cod-pl:disabled{cursor:default;color:var(--text)} .cod-pl.muet{color:#A5AEB4;cursor:default} .cod-pl.trou{display:inline-block;width:.75em;height:1.1em;border-bottom:3px dashed var(--text3);cursor:default} .cod-pl.ok::after{content:'✓';position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:16px;color:var(--teal)} .cod-pl.ko{outline:2.5px dashed #D9541E;outline-offset:1px;border-radius:6px;color:#B8431A} .cod-pl.ko::after{content:'✗';position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:16px;font-weight:800;color:#D9541E} .cod-syl{display:inline-flex;align-items:flex-end;position:relative;padding:0 5px 20px} .cod-arc{position:absolute;left:3px;right:3px;bottom:2px;height:13px;border:3px solid var(--text);border-top:none;border-radius:0 0 50% 50%/0 0 100% 100%;cursor:pointer} .cod-arc.pt{border-style:dashed} .cod-vide{color:var(--text3);font-size:19px;align-self:center;margin-right:8px} .cod-msg{max-width:560px;margin:14px auto 0;border-radius:10px;padding:10px 14px;font-size:16px;text-align:left;background:var(--bg2)} .cod-msg.ok{background:var(--teal-l);border:1.5px solid var(--teal)} .cod-msg.ko{background:var(--red-l);border:1.5px dashed #D9541E;color:var(--text)} .cod-reserve{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:24px auto 4px;max-width:720px} .cod-et{min-width:56px;height:56px;padding:0 10px;border-radius:12px;border:2px solid var(--border);background:var(--bg);color:var(--text);font:inherit;font-size:28px;font-weight:600;cursor:pointer;box-shadow:0 3px 0 var(--border)} .cod-et:active{transform:translateY(2px);box-shadow:0 1px 0 var(--border)} .cod-et.pris{visibility:hidden} .cod-capitales .cod-pl,.cod-capitales .cod-et{text-transform:uppercase} .cod-cursive .cod-pl,.cod-cursive .cod-et{font-family:'Ludisca cursive','Segoe Script','Comic Sans MS',cursive;font-weight:400;text-transform:none} /* En cursive, les lettres posées forment un seul texte, pour se lier. */ .cod-cursive .cod-zone{display:inline-block;text-align:center;padding-top:68px;padding-bottom:22px} .cod-cursive .cod-pl{display:inline;padding:0;font-size:clamp(40px, 7vw, 56px);line-height:1.15} .cod-cursive .cod-syl{display:inline;padding:0;position:relative} .cod-cursive .cod-arc{bottom:-12px;left:0;right:0} .cod-cursive .cod-pl.trou{display:inline-block;vertical-align:baseline} /* La police a une grande hauteur de ligne : les marques se posent près des lettres, sans cadre. */ .cod-cursive .cod-pl.ko{outline:none;text-decoration:underline dashed #D9541E 3px;text-underline-offset:4px} .cod-cursive .cod-pl.ok::after,.cod-cursive .cod-pl.ko::after{top:-1.15em} .cod-cursive .cod-vide{display:inline-block;vertical-align:middle} @media (max-width:560px){ .cod-et{min-width:48px;height:48px;font-size:24px} .cod-hp{width:62px;height:62px;font-size:30px} } .ef-tour{font-size:13.5px;color:var(--text3);margin-bottom:6px;text-align:center} .ef-points{display:flex;gap:6px;justify-content:center;margin-bottom:12px} .ef-points i{width:30px;height:6px;border-radius:3px;background:var(--fam-memo-l)} .ef-points i.fait{background:var(--fam-memo)} .ef-points i.ici{background:var(--fam-memo);box-shadow:0 0 0 2px var(--fam-memo-l)} .ef-txt{font-size:clamp(18px, 2.4vw, 22px);line-height:2.1;text-align:left;padding:4px 6px} .ef-in{display:inline-block;padding:2px 6px;font-size:inherit;min-height:0;height:1.6em;vertical-align:baseline;border-color:var(--fam-memo);text-align:center} .ef-ok{color:var(--teal-d);font-weight:700;border-bottom:2px solid var(--teal)} .ef-non s{color:var(--text3)} .ef-non b{color:var(--fam-memo);border-bottom:3px dashed var(--fam-memo)} .ef-bilan{font-weight:700;font-size:16px;align-self:center} .ef-trou{display:inline-block;height:1.45em;line-height:1.45em;vertical-align:-.3em;border-bottom:3px solid var(--fam-memo);background:var(--fam-memo-l);border-radius:4px;color:var(--fam-memo);font-weight:700;text-align:left;padding-left:2px} .ef-vu{color:var(--fam-memo);font-weight:700;border-bottom:3px solid var(--fam-memo)} .ef-consigne-o{text-align:center;font-size:14.5px;color:var(--text2);margin-bottom:6px} .ef-consigne-o i{color:var(--fam-memo)} .ef-texte{font-size:15px;line-height:1.6} .im-regarde-t{font-weight:700;font-size:16px;color:var(--fam-memo)} .im-regarde .exo-zone{cursor:default} .im-memo-l{display:flex;align-items:center;justify-content:center;border:2px solid var(--fam-memo);border-radius:10px;color:var(--text);font-weight:600} .lt-carte > .lt-verso:first-child{border-top:none;padding-top:0} .lt-regarde .lt-rep{font-size:clamp(28px, 5vw, 42px);letter-spacing:.02em} .lt-temps{height:6px;border-radius:3px;background:var(--fam-memo-l);overflow:hidden;max-width:320px;margin:10px auto 0} .lt-temps i{display:block;height:100%;background:var(--fam-memo);animation:lt-temps linear forwards} @keyframes lt-temps{from{width:100%}to{width:0}} @media (prefers-reduced-motion:reduce){.lt-temps i{animation:none;width:50%}} .lt-ok .lt-rep{color:var(--teal-d)} .lt-saisi{font-size:clamp(20px, 3.6vw, 28px);font-weight:600;color:var(--text2)} .lt-saisi i{color:var(--fam-memo)} mark.lt-trop{background:none;color:var(--fam-memo);text-decoration:line-through;text-decoration-thickness:2px} mark.lt-manque{background:var(--fam-memo-l);color:var(--fam-memo);border-bottom:3px solid var(--fam-memo);border-radius:2px;padding:0 1px} .lt-mode{display:grid;gap:4px} .lt-mode label{display:flex;gap:6px;align-items:baseline;font-size:14px} .lt-mode span{color:var(--text3);font-size:12.5px} .lt-bas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px} .lt-bas .btn{min-height:52px;font-size:17px;padding:10px 22px} .lt-revoir{border:2px dashed var(--fam-memo);color:var(--fam-memo)} .lt-fin-t{font-size:22px;font-weight:700;color:var(--teal-d)} .lt-fin-s{font-size:15.5px;color:var(--text2);margin-top:6px} .lt-ko{margin-top:10px;font-size:14px} .lt-boites{display:flex;gap:10px;justify-content:center;align-items:flex-end;margin:8px 0} .lt-boite{display:grid;gap:2px;justify-items:center;font-size:12px;color:var(--text3)} .lt-boite b{font-size:15px;color:var(--text)} .lt-boite-b{width:34px;height:70px;border:1.5px solid var(--fam-memo);border-radius:6px;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg)} .lt-boite-b i{display:block;width:100%;background:var(--fam-memo-l);border-top:2px solid var(--fam-memo)} .lt-note{font-size:12.5px;color:var(--text3);margin-top:8px} .lt-opts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border2)} .lt-opts .exo-in{flex:1;min-width:200px} .lt-pause{font-size:13px;display:inline-flex;gap:5px;align-items:center} .lt-pause span{color:var(--text3)} .lt-delais{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .lt-delais label{display:inline-flex;gap:4px;align-items:center;font-size:13px} .lt-mini{display:inline-flex;gap:3px} .lt-mini span{min-width:24px;text-align:center;border:1px solid var(--fam-memo);border-radius:5px;font-size:12px;padding:0 4px} .exo-type-badge[data-fam]{color:var(--fam)!important;background:var(--fam-l)!important} .exo-fiche-ico[data-fam]{color:var(--fam)!important;background:var(--fam-l)!important} .wb-rayon[data-fam]{color:var(--fam)} .wb-fav i[data-fam]{color:var(--fam)} .wb-sf-b[data-fam]:not(.on) i,.wb-tool[data-fam]:not(.on) i{color:var(--fam)} .exo-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} .exo-types button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px;min-height:120px; font-family:inherit;border:1px solid var(--border2);border-radius:var(--rl);background:var(--bg);color:var(--text);cursor:pointer} .exo-types button:hover{border-color:var(--teal)} .exo-types button i{font-size:26px;color:var(--teal)} .exo-types button strong{font-size:15px} .exo-types button span{font-size:12.5px;color:var(--text2);line-height:1.4} /* Texte à trous : le texte se lit comme un texte, les cases s'y glissent. */ .exo-bilan{margin-top:18px;padding:14px 16px;border:2px solid var(--red);border-radius:12px;background:var(--red-l);text-align:center} .exo-bilan.ok{border-color:var(--green);background:var(--green-l)} /* À plusieurs */ /* Questions des jeux, morpion, jeu de l'oie, compte est bon */ .jq-fond{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:16px} .jq-carte{width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--bg);border:2px solid var(--teal);border-radius:16px;padding:18px} .jq-qui{display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:8px} .jq-ecrire{display:flex;gap:8px;flex-wrap:wrap} .jq-ecrire input{flex:1 1 200px;font-size:18px;min-height:48px} .jq-oral{display:flex;gap:12px;justify-content:center;margin-top:10px} .jq-oral .btn{min-height:52px;min-width:130px;font-size:17px;font-weight:600} .jq-ok{border:2px solid var(--green)!important;color:var(--green)!important} .jq-ko{border:2px dashed var(--red)!important;color:var(--red)!important} .jq-attendu{margin:8px 0;font-size:13.5px;color:var(--text2)} .jq-attendu summary{cursor:pointer;color:var(--teal)} .jq-res{text-align:center;font-size:20px;font-weight:700;padding:10px;border-radius:12px} .jq-res.ok{color:var(--green);border:2px solid var(--green);background:var(--green-l)} .jq-res.ko{color:var(--red);border:2px dashed var(--red);background:var(--red-l)} .jq-bonne{font-size:15px;font-weight:400;color:var(--text);margin-top:4px} .mo-etat{display:flex;align-items:center;gap:6px;justify-content:center;font-size:17px;margin-bottom:6px;text-align:center} .mo-leg{text-align:center;font-size:13px;color:var(--text3);margin-bottom:8px} .mo-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:360px;margin:0 auto} .mo-case{aspect-ratio:1;border:2px solid var(--border2);border-radius:14px;background:var(--bg2);font-size:56px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3)} .mo-case i{font-size:30px} .mo-case:not(:disabled):hover{border-color:var(--teal);background:var(--teal-l)} .mo-case.prise{background:var(--bg);cursor:default} .mo-case.derniere{border-style:dashed;border-color:var(--teal)} .mo-case.ligne{border:3px solid var(--green);background:var(--green-l)} .oie-plateau{display:grid;gap:4px} .oie-case{position:relative;min-height:56px;border:1px solid var(--border2);border-radius:10px;background:var(--bg2);padding:3px 5px;display:flex;flex-direction:column;justify-content:space-between} .oie-case.depart,.oie-case.arrivee{background:var(--teal-l);border:2px solid var(--teal);font-weight:700} .oie-case.sp{background:var(--amber-l);border:2px dashed var(--amber)} .oie-n{font-size:12px;color:var(--text2)} .oie-sp{position:absolute;top:3px;right:4px;font-size:16px;color:var(--amber)} .oie-pions{display:flex;flex-wrap:wrap;gap:1px;font-size:20px;line-height:1} .oie-bas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px} .oie-de{display:flex;align-items:center;gap:6px;font-size:46px;line-height:1;min-width:90px} .oie-de b{font-size:22px} .oie-de.roule{animation:oie-roule .35s linear infinite} @keyframes oie-roule{50%{transform:rotate(20deg) scale(1.1)}} .oie-msg{flex:1;min-width:140px;font-size:16px;font-weight:600} .oie-lancer{min-height:52px;font-size:17px} .oie-leg{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;font-size:12.5px;color:var(--text3)} .cb-haut{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text3);min-height:24px} .cb-cible{display:flex;flex-direction:column;align-items:center;margin:4px 0 12px} .cb-cible span{font-size:13px;color:var(--text2)} .cb-cible b{font-size:44px;line-height:1.1;padding:4px 18px;border:3px solid var(--teal);border-radius:14px;background:var(--teal-l)} .cb-nb{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .cb-plaque{min-width:66px;min-height:60px;font-size:24px;font-weight:700;border:2px solid var(--border2);border-radius:12px;background:var(--bg);color:var(--text);cursor:pointer} .cb-plaque.calc{border-style:dashed;border-color:var(--violet);color:var(--violet)} .cb-plaque.sel{border:3px solid var(--teal);background:var(--teal-l);box-shadow:0 0 0 2px var(--teal)} .cb-ops{display:flex;gap:8px;justify-content:center;margin-top:12px} .cb-op{width:60px;height:56px;font-size:28px;border:2px solid var(--border2);border-radius:12px;background:var(--bg2);color:var(--text);cursor:pointer} .cb-op.sel{border:3px solid var(--teal);background:var(--teal-l)} .cb-op:disabled,.cb-plaque:disabled{opacity:.5;cursor:default} .cb-aide{text-align:center;font-size:13px;color:var(--text3);margin-top:8px} .cb-msg{text-align:center;font-size:14px;color:var(--amber);margin-top:8px} .cb-etapes{max-width:280px;margin:10px auto 0;font-size:17px} .cb-etapes li{padding:2px 0} .cb-btns{display:flex;gap:10px;justify-content:center;margin-top:14px} .cb-btns .btn{min-height:46px} .cb-reg{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;font-size:14px} .cb-reg>span:first-child{min-width:150px;color:var(--text2)} .cb-tir{display:flex;gap:6px;align-items:center;margin-top:6px} .bz-q{font-size:22px;text-align:center} .bz-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:14px} .bz-btn{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:110px;border:3px solid var(--c);border-radius:18px;background:var(--bg);color:var(--text);font:inherit;cursor:pointer} .bz-btn b{font-size:17px} .bz-btn small{font-size:12px;color:var(--text3)} .bz-btn:active{transform:scale(.97)} .bz-btn:disabled{opacity:.4;border-style:dashed;cursor:default} .do-chaine{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:8px 0} .do-fl{color:var(--text3);font-size:18px} .do-dom{display:inline-flex;align-items:stretch;min-height:64px;border:2px solid var(--border2);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;padding:0;overflow:hidden} button.do-dom{cursor:pointer} button.do-dom:hover{border-color:var(--teal)} .do-dom.bout{border:2px dashed var(--teal);box-shadow:0 0 0 2px var(--teal-l)} .do-dom.rate{border:2px dashed var(--red);background:var(--red-l)} .do-moitie{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:70px;max-width:180px;padding:6px 10px;font-size:15px} .do-moitie img{max-height:56px;max-width:120px} .do-sep{width:2px;background:var(--border2);margin:6px 0} .do-reste{display:flex;flex-wrap:wrap;gap:8px} .lo-tire{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border:2px solid var(--teal);border-radius:14px;background:var(--teal-l);margin-bottom:12px} .lo-lab{font-size:13px;color:var(--text2)} .lo-q{flex:1;font-size:20px;font-weight:600;display:flex;align-items:center;gap:8px} .lo-q img{max-height:80px} .lo-cartons{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} .lo-carton{border:2px solid var(--border2);border-radius:14px;padding:8px} .lo-carton.plein{border-color:var(--green);background:var(--green-l)} .lo-qui{display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:6px} .lo-grille{display:grid;gap:6px} .lo-case{position:relative;min-height:62px;border:2px solid var(--border2);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;font-size:15px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px} .lo-case img{max-height:48px;max-width:100%} .lo-case.on{border:2px solid var(--green);background:var(--green-l)} .lo-case.rate{border:2px dashed var(--red);background:var(--red-l)} .lo-coche{position:absolute;top:2px;right:4px;color:var(--green);font-size:18px} .mu-grille{display:flex;flex-direction:column;gap:5px;align-items:center;margin:6px 0 10px} .mu-rang{display:flex;gap:5px;align-items:center} .mu-case{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:2px solid var(--border2);border-radius:6px;font-size:22px;font-weight:700;background:var(--bg);text-transform:uppercase} .mu-rang.cour .mu-case{border-color:var(--teal)} .mu-case.bp{background:var(--teal);border-color:var(--teal);color:var(--sur-teal)} .mu-case.mp{border:3px solid var(--amber);border-radius:50%;color:var(--amber);background:var(--amber-l)} .mu-case.ab{background:var(--bg2);color:var(--text3);text-decoration:line-through} .mu-clavier{display:flex;flex-direction:column;gap:5px;align-items:center} .mu-clavier>div{display:flex;gap:4px;flex-wrap:wrap;justify-content:center} .mu-clavier button{min-width:34px;height:44px;border:1px solid var(--border2);border-radius:8px;background:var(--bg2);color:var(--text);font:inherit;font-size:16px;font-weight:600;cursor:pointer} .mu-clavier button.bp{background:var(--teal);color:var(--sur-teal)} .mu-clavier button.mp{border:2px solid var(--amber);border-radius:50%;color:var(--amber)} .mu-clavier button.ab{opacity:.45;text-decoration:line-through} .mu-clavier .mu-large{min-width:70px} .mu-clavier .mu-large.pr{background:var(--teal);color:var(--sur-teal);border-color:var(--teal)} .mu-leg{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--text3)} .mu-leg .mu-case{width:24px;height:24px;font-size:13px} @media (max-width:520px){ .mu-case{width:32px;height:32px;font-size:17px} .mu-clavier button{min-width:27px;height:40px;font-size:14px} } .vi-guide-fond{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:16px} .vi-guide{width:min(520px,100%);max-height:92vh;overflow:auto;background:var(--bg);color:var(--text);border-radius:16px;padding:18px 20px;border:2px solid var(--teal)} .vi-guide h3{margin:0 0 10px;font-size:17px} .vi-guide ol{margin:0 0 10px;padding-left:20px;line-height:1.6} .vi-son-b{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600} .vi-son-b.ok{background:var(--green-l);color:var(--green);border:1px solid var(--green)} .vi-son-b.ko{background:var(--red-l);color:var(--red);border:1px dashed var(--red);white-space:normal} #vi-son{position:absolute;left:12px;top:12px;z-index:5;max-width:calc(100% - 24px)} /* le petit train des animaux */ .tr-voie{position:relative;overflow:hidden;padding:12px 6px 18px;border-radius:16px;background:linear-gradient(#E9F6FF,#E9F6FF 70%,#B7DDB0 70%)} .tr-voie::after{content:'';position:absolute;left:0;right:0;bottom:12px;height:4px;background:repeating-linear-gradient(90deg,#7A5B3A 0 10px,transparent 10px 18px)} .tr-train{position:relative;display:flex;align-items:flex-end;gap:6px;transition:transform 2.6s cubic-bezier(.55,0,.85,.45) .6s} .tr-train.part{transform:translateX(-130%)} .tr-fumee{position:absolute;left:14px;top:-6px;width:30px;height:30px;pointer-events:none} .tr-fumee i{position:absolute;left:0;bottom:0;width:16px;height:16px;border-radius:50%;background:#CBD3DE;opacity:0} .tr-train.part .tr-fumee i{animation:tr-fumee 1.1s ease-out infinite} .tr-train.part .tr-fumee i:nth-child(2){animation-delay:.37s} .tr-train.part .tr-fumee i:nth-child(3){animation-delay:.74s} @keyframes tr-fumee{0%{opacity:.9;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(18px,-34px) scale(1.8)}} .tr-train.part .tr-roue{animation:tr-roule .5s linear infinite .6s} @keyframes tr-roule{to{transform:rotate(-360deg)}} .tr-perso,.tr-wagon{touch-action:none} .tr-fantome{position:fixed;z-index:3000;font-size:46px;line-height:1;pointer-events:none;transform:translate(-50%,-60%);filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))} .tr-wagon.survol{box-shadow:0 0 0 4px var(--teal)} .tr-carte.ecrit{flex-direction:column;align-items:flex-start;gap:4px} .tr-txt{font-size:13px;line-height:1.3;color:var(--text2);white-space:normal} .tr-regle{font-size:12px;font-weight:700;color:var(--fam-log)} .tr-cartes .tr-carte.preuve{border:3px solid #7B5CC4;box-shadow:0 0 0 3px rgba(123,92,196,.18)} .tr-cartes .tr-carte.preuve::before{content:'💡';position:absolute;top:-10px;left:-8px;font-size:18px} .tr-locomotive{font-size:54px;line-height:1;transform:scaleX(1)} .tr-wagon{position:relative;width:76px;height:70px;border:3px solid #0E7C70;border-radius:10px 10px 6px 6px;background:#FFF7E6;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:38px;padding:0} .tr-wagon.vide{background:var(--bg);border-style:dashed} .tr-wagon.cible{box-shadow:0 0 0 3px var(--amber)} .tr-wagon .tr-num{position:absolute;top:2px;left:4px} .tr-roue{position:absolute;bottom:-9px;left:10px;width:16px;height:16px;border-radius:50%;background:conic-gradient(#1B2436 0 25%,#56627A 0 50%,#1B2436 0 75%,#56627A 0);border:3px solid #7A869A} .tr-roue.d{left:auto;right:10px} .tr-num{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:6px;background:#0E7C70;color:#fff;font-size:12px;font-weight:700;line-height:1} .tr-pas{color:var(--red);font-weight:800;font-size:19px;margin:0 -2px 0 2px} .tr-num.barre,.tr-lien.barre,.tr-bout.barre{position:relative;opacity:.95} .tr-num.barre::after,.tr-lien.barre::after,.tr-bout.barre::after{content:'';position:absolute;left:-5px;right:-5px;top:50%;height:4px;border-radius:2px;background:var(--red);transform:rotate(-30deg)} .tr-quai{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px} .tr-perso{width:62px;height:62px;border-radius:50%;border:2px solid var(--border2);background:var(--bg);font-size:36px;cursor:pointer;box-shadow:0 4px 0 var(--border2)} .tr-perso.sel{border:3px solid var(--teal);transform:translateY(-4px);box-shadow:0 6px 0 var(--teal-l)} .tr-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:8px} .tr-carte{position:relative;display:flex;align-items:center;gap:6px;padding:10px 34px 10px 10px;border:2px solid var(--border2);border-radius:14px;background:var(--bg);font-size:28px;min-height:58px} .tr-carte.ok{border-color:var(--green);background:var(--green-l)} .tr-carte.ko{border:2px dashed var(--red);background:var(--red-l)} .tr-ico{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;white-space:nowrap} .tr-loco{font-size:20px;opacity:.85} .tr-lien{font-size:20px;color:var(--text2);font-weight:700} .tr-carte.ou{grid-column:span 2} .tr-ou{display:inline-flex;align-items:center;gap:2px;font-size:.8em} .tr-oub{font-size:14px;color:var(--fam-log);margin:0 4px} .tr-bout{font-size:16px;color:var(--text2);font-weight:700;letter-spacing:4px} .tr-et{position:absolute;top:4px;right:8px;font-size:16px;font-weight:800} .tr-carte.ok .tr-et{color:var(--green)} .tr-carte.ko .tr-et{color:var(--red)} .tr-dire{position:absolute;bottom:4px;right:4px;border:none;background:none;color:var(--teal);font-size:16px;cursor:pointer;padding:2px} /* le sentier des formes */ .sf-ruban{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;padding:8px;border-radius:999px;background:var(--bg2);margin-bottom:12px;font-size:26px} .sf-r{opacity:.55} .sf-r.fait{opacity:.25} .sf-r.cour{opacity:1;transform:scale(1.35);text-shadow:0 0 0 currentColor;border-bottom:3px solid currentColor} .sf-zone{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start} .sf-grille{flex:1 1 300px;max-width:440px;display:grid;gap:5px;padding:8px;border-radius:16px;background:linear-gradient(145deg,var(--teal-l),var(--violet-l))} .sf-case{position:relative;min-width:0;min-height:0;border:none;border-radius:12px;background:var(--bg);box-shadow:0 3px 0 rgba(20,40,80,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} .sf-f{font-size:clamp(22px,5vw,36px);line-height:1} .sf-case.pris{background:#FFF3C4;box-shadow:0 0 0 3px var(--amber) inset} .sf-case.bout{box-shadow:0 0 0 4px var(--teal) inset} .sf-case.rate{animation:ro-choc .45s ease;background:var(--red-l)} .sf-case.indice{animation:ro-indice 1s ease infinite;box-shadow:0 0 0 3px var(--amber)} .sf-marque{position:absolute;top:1px;left:3px;font-size:16px} .sf-cocci,.sf-drapeau{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(20,30,50,.35))} .sf-grille{touch-action:none} .sf-case.impasse{box-shadow:0 0 0 3px #D9541E inset;background-image:repeating-linear-gradient(45deg,rgba(217,84,30,.13) 0 6px,transparent 6px 12px)} .sf-case.impasse::after{content:'✗';position:absolute;top:2px;right:5px;font-size:15px;font-weight:800;color:#D9541E} .sf-case.retour{box-shadow:0 0 0 4px #7B5CC4 inset} .sf-cocci{width:54%;top:-14%;left:-12%;transition:transform .2s} .sf-drapeau{width:56%;top:-26%;right:-10%;transform-origin:20% 95%;animation:sf-flotte 1.4s ease-in-out infinite alternate} @keyframes sf-flotte{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}} .sf-case.but{background:repeating-conic-gradient(#E3E8F0 0 25%,#fff 0 50%) 50% 50%/18px 18px;box-shadow:0 0 0 3px #1B2436 inset} .sf-case.but.pris{box-shadow:0 0 0 3px var(--amber) inset} .sf-case.dep{box-shadow:0 0 0 3px #E0412F inset} @media (prefers-reduced-motion: reduce){ .sf-drapeau{animation:none} } .sf-pas{position:absolute;bottom:2px;right:5px;font-size:10px;font-weight:700;color:var(--amber)} .sf-cote{flex:1 1 240px} .sf-regle{font-size:18px;color:var(--text)} .sf-regle b{color:var(--fam-log)} .sf.nb .sf-f{font-size:clamp(14px,3.2vw,22px);font-weight:700} .sf-case.autour .sf-f{opacity:.3} .tr-ed-train{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .tr-ed-train .tr-locomotive{font-size:30px} .tr-ed-w{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:12px;background:var(--fam-log-l)} .tr-ed-w .tr-num{position:static} .sf-prochain{font-size:17px;font-weight:600;margin-bottom:6px} .sf-prochain span{font-size:32px;vertical-align:-4px} @media (prefers-reduced-motion: reduce){ .tr-train{transition:none} .tr-train.part .tr-roue,.tr-train.part .tr-fumee i{animation:none} .sf-case.indice,.sf-case.rate{animation:none} } /* les tours de cubes */ .to-vues{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:6px 0 14px} .to-vue{padding:10px 12px;border-radius:14px;background:var(--bg2);text-align:center} .to-vue-t{font-size:13px;font-weight:700;color:var(--fam-log);margin-bottom:6px} .to-vue svg{display:block;margin:0 auto;max-width:100%;height:auto} .to-vue-pied{display:flex;justify-content:center;gap:8px;font-size:11px;color:var(--text3);margin-top:3px;text-align:center} .to-vue-pied:has(span){justify-content:space-between} .to-zone{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start} .to-plan-b{flex:1 1 220px;max-width:300px} .to-plan{display:grid;gap:5px;padding:7px;border-radius:14px;background:var(--fam-log-l)} .to-case{position:relative;min-width:0;min-height:0;border:none;border-radius:10px;background:var(--bg);box-shadow:0 3px 0 rgba(20,40,80,.14);cursor:pointer;font-size:clamp(20px,4.5vw,30px);font-weight:800;color:var(--fam-log);display:flex;align-items:center;justify-content:center;padding:0} .to-case.plein{background:#DCEEFC;color:#163F63} .to-case.fixe{background:#FCE7B2;color:#7A5208;cursor:default;box-shadow:none;outline:2px dashed #C98B1C;outline-offset:-3px} .to-case.indice{animation:ro-indice 1s ease infinite} .to-cad{position:absolute;top:2px;right:4px;font-size:12px} .to-moins{position:absolute;bottom:3px;right:3px;width:26px;height:26px;border-radius:50%;background:var(--bg);border:1.5px solid #2C78B8;color:#2C78B8;font-size:18px;font-weight:800;line-height:22px;text-align:center;cursor:pointer} .to-moins:hover{background:#2C78B8;color:#fff} .to-mes{margin-top:8px;padding-top:6px;border-top:1px dashed var(--border2)} .to-mes .to-vue-t{color:var(--text2)} .to-preuve{outline:3px solid #7B5CC4;outline-offset:2px;border-radius:6px} .to-tombe{animation:to-tombe .38s cubic-bezier(.3,1.35,.6,1)} @keyframes to-tombe{from{transform:translateY(-34px);opacity:0}} @media (prefers-reduced-motion: reduce){ .to-tombe{animation:none} } .to-cote{flex:1 1 240px;min-width:0} .to-dessin-b{padding:8px;border-radius:14px;background:var(--bg2);display:flex;justify-content:center;overflow:auto} .to-dessin{max-width:100%;height:auto} .to-mm{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:10px 0} .to-mm-l{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;padding:8px 12px;border-radius:12px;background:var(--fam-log-l)} .to-mm-l input{width:70px;font-size:20px;text-align:center;border:2px solid var(--border2);border-radius:8px;padding:4px} .to-mm-l.ok{background:var(--green-l)} .to-mm-l.ko{background:var(--red-l);outline:2px dashed var(--red)} .to-mm-l i{font-style:normal;color:var(--red);font-weight:800} .to-mm-l i.v{color:var(--green)} /* les balances */ .ba-bals{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center;margin:6px 0 10px} .ba-bal{position:relative;width:330px;max-width:100%;height:205px;border-radius:16px} .ba-poteau{position:absolute;left:50%;top:40px;bottom:16px;width:9px;margin-left:-4.5px;border-radius:4px;background:linear-gradient(90deg,#56627A,#8D99AB 60%,#6B7A90)} .ba-socle{position:absolute;left:50%;bottom:4px;width:96px;height:15px;margin-left:-48px;border-radius:10px 10px 5px 5px;background:linear-gradient(#6B7A90,#4A5568)} .ba-pivot{position:absolute;left:50%;top:31px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FAD98C,#C98B1C);border:2px solid #8A5A2B;z-index:4} .ba-fleau{position:absolute;left:62px;right:62px;top:38px;height:7px;border-radius:4px;background:linear-gradient(#7A869A,#4A5568);transition:transform .7s cubic-bezier(.35,1.5,.5,1);z-index:3} .ba-fleau::before,.ba-fleau::after{content:'';position:absolute;top:-3px;width:11px;height:11px;border-radius:50%;background:#4A5568} .ba-fleau::before{left:-5px} .ba-fleau::after{right:-5px} .ba-pan{position:absolute;top:42px;width:142px;transition:transform .7s cubic-bezier(.35,1.5,.5,1);z-index:2} .ba-pan.g{left:-9px} .ba-pan.d{right:-9px} .ba-ch{display:block;width:100%;height:40px} .ba-plat{position:relative;min-height:34px;display:flex;flex-wrap:wrap;align-items:flex-end;align-content:flex-end;justify-content:center;gap:2px;padding:0 4px 3px;margin-top:-2px; border-bottom:7px solid #8D99AB;border-radius:0 0 50% 50% / 0 0 14px 14px;font-size:30px;line-height:1.05} .ba-fr{letter-spacing:-2px} .ba-masse{position:relative;display:inline-flex;font-variant-numeric:tabular-nums;align-items:center;justify-content:center;min-width:48px;height:40px;padding:8px 9px 0;margin-left:4px;background:linear-gradient(#5D6B80,#2B3446);color:#fff;font-size:24px;font-weight:800;border-radius:5px 5px 3px 3px;clip-path:polygon(16% 22%,84% 22%,100% 100%,0 100%,16% 22%,38% 22%,38% 0,62% 0,62% 22%)} .ba-bal.ko .ba-fleau{background:var(--red)} .ba-bal.ok .ba-fleau{background:var(--green)} .ba-et{position:absolute;top:56px;left:50%;transform:translateX(-50%);font-size:18px;font-weight:800;z-index:4;background:var(--bg);border-radius:50%;width:24px;height:24px;line-height:24px;text-align:center} .ba-et.ok{color:var(--green)} .ba-et.ko{color:var(--red)} .ba-bal.preuve{outline:3px solid #7B5CC4;outline-offset:4px} .ba-bal.preuve::after{content:'💡';position:absolute;top:-12px;left:-10px;font-size:18px} .ba-bals.gagne .ba-fleau{animation:ba-oscille 1.3s ease} @keyframes ba-oscille{20%{transform:rotate(5deg)}45%{transform:rotate(-3.5deg)}70%{transform:rotate(2deg)}90%{transform:rotate(-.8deg)}} .ba-v-in{width:72px;text-align:center;font-family:inherit;font-size:32px;font-weight:800;line-height:1.2;color:var(--fam-log);border:2px solid transparent;border-radius:10px;background:var(--bg);padding:2px 0} .ba-v-in:focus{outline:none;border-color:var(--fam-log)} .ba-direct{text-align:center;margin:-2px 0 6px} .ba-bals.petit .ba-bal{width:280px} .ba-bals.petit .ba-plat{font-size:25px} .ba-bals.petit .ba-pan{width:120px} .ba-bals.petit .ba-masse{font-size:20px;height:34px;min-width:40px;padding-top:6px} .ba-fruits{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px} .ba-f{position:relative;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:16px;background:var(--fam-log-l)} .ba-f.fixe{background:#FCE7B2;outline:2px dashed #C98B1C;outline-offset:-3px} .ba-f.indice{animation:ro-indice 1s ease infinite} .ba-f-e{font-size:40px} .ba-egal{font-size:28px;font-weight:700;color:var(--text2)} .ba-v{min-width:44px;text-align:center;font-size:32px;font-weight:800;color:var(--fam-log)} .ba-pm{width:50px;height:50px;border:none;border-radius:12px;background:var(--bg);box-shadow:0 3px 0 rgba(20,40,80,.14);font-size:28px;font-weight:700;color:var(--text);cursor:pointer} .ba-pm:active{transform:translateY(2px);box-shadow:none} /* les tuyaux du potager */ .tu-zone{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start} .tu-grille{flex:1 1 300px;max-width:440px;display:grid;gap:3px;padding:6px;border-radius:16px;background:#8B6B4A} .tu-case{position:relative;min-width:0;min-height:0;border:none;border-radius:8px;background:#C9A77C;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden} .tu-case>span:first-child{display:block;width:100%;height:100%} .tu-case svg{display:block;width:100%;height:100%} .tu-case.vide{background:#A8875F;cursor:default} .tu-case.fixe{outline:2px dashed #FFE08A;outline-offset:-3px} .tu-case.sel{outline:4px solid var(--fam-log);outline-offset:-4px} .tu-case.indice{animation:ro-indice 1s ease infinite} .tu-em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,4.5vw,30px);pointer-events:none} .tu-tourne{animation:tu-tourne .22s ease-out} .tu-tourne-g{animation:tu-tourne-g .22s ease-out} @keyframes tu-tourne{from{transform:rotate(-90deg)}to{transform:rotate(0)}} @keyframes tu-tourne-g{from{transform:rotate(90deg)}to{transform:rotate(0)}} .tu-case{touch-action:manipulation;-webkit-touch-callout:none;user-select:none} .tu-case:not(.vide){background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18) 0 8%,transparent 9%),radial-gradient(circle at 72% 78%,rgba(90,60,30,.16) 0 7%,transparent 8%),#C9A77C} .tu-flux{stroke-dasharray:7 9;animation:tu-flux .9s linear infinite} @keyframes tu-flux{to{stroke-dashoffset:-16}} .tu-goutte{animation:tu-goutte 1s ease-in infinite;transform-box:fill-box;transform-origin:center} @keyframes tu-goutte{0%{opacity:0;transform:translate(0,-4px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(0,8px) scale(1)}} .tu-em.eclot{animation:tu-eclot .55s cubic-bezier(.3,1.6,.5,1) both} @keyframes tu-eclot{from{transform:scale(.2) rotate(-20deg);opacity:.2}to{transform:none;opacity:1}} .tu-case.preuve{outline:3px solid #7B5CC4;outline-offset:-3px} .tu-cote{flex:1 1 240px;min-width:0} .tu-compte{display:flex;flex-direction:column;gap:4px;font-size:15px;margin-bottom:6px} .tu-fuite{color:var(--red)} @media (prefers-reduced-motion: reduce){ .tu-tourne,.tu-tourne-g,.tu-flux,.tu-goutte,.tu-em.eclot,.to-case.indice,.ba-f.indice,.tu-case.indice,.ba-bals.gagne .ba-fleau{animation:none} .ba-fleau,.ba-pan{transition:none} } @media(prefers-color-scheme:dark){ .to-case.plein{background:#1D3D5C;color:#DCEEFC} .to-case.fixe,.ba-f.fixe{background:#4A3A12;color:#FCE7B2} } /* la course à 20 */ .co-regle{text-align:center;font-size:15px;color:var(--text2);margin:2px 0 6px} .co-total{display:flex;flex-direction:column;align-items:center;margin:4px 0 10px} .co-total span{font-size:13px;color:var(--text3)} .co-total b{font-size:56px;line-height:1.05;color:var(--fam-log)} .co-total small{font-size:13px;color:var(--text2)} .co-piste{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:720px;margin:0 auto 12px} .co-p{position:relative;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;background:var(--bg2);color:var(--text3);border:2px solid var(--border)} .co-p.dit{background:var(--bg);color:var(--text);border-color:var(--pc)} .co-p.dit i{position:absolute;top:-7px;right:-5px;font-style:normal;font-size:13px;color:var(--pc)} .co-p.but{border:3px double var(--fam-log);color:var(--fam-log)} .co-p.der{box-shadow:0 0 0 3px var(--fam-log-l);transform:scale(1.12)} .co-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .co-piste{padding:30px 8px 14px;row-gap:30px;border-radius:18px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 6px,transparent 6px 14px),linear-gradient(#CDE9C2,#B6DCA8);box-shadow:inset 0 0 0 2px rgba(60,120,50,.18)} .co-p{border-radius:12px;background:#F6F1E4;border:2px solid #D8CDB4;color:#8A7A5A} .co-p.neuf{animation:co-neuf .45s ease both} @keyframes co-neuf{from{transform:scale(.6);opacity:.3}60%{transform:scale(1.18)}to{transform:none;opacity:1}} .co-p i.co-coureur{position:absolute;top:-26px;right:auto;left:50%;transform:translateX(-50%);font-size:24px;font-style:normal;color:inherit;animation:co-saut .5s ease;filter:drop-shadow(0 2px 1px rgba(0,0,0,.25))} @keyframes co-saut{40%{transform:translate(-50%,-8px)}} .co-p.but::after{content:'🏁';position:absolute;top:-20px;right:-10px;font-size:18px} .co-p.etoile{border:2px solid #7B5CC4;box-shadow:0 0 0 2px rgba(123,92,196,.2)} .co-p.etoile::before{content:'★';position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-size:12px;color:#7B5CC4;line-height:1} .co-secret{max-width:620px;margin:12px auto 0;padding:12px 14px;border-radius:16px;background:var(--fam-log-l);text-align:center} .co-secret .co-piste{background:none;box-shadow:none;padding:4px} .co-secret .co-p{cursor:pointer} .co-secret .co-p.choisi{background:#7B5CC4;color:#fff;border-color:#5B3FA0} .co-secret .co-p.juste{outline:3px solid var(--green);outline-offset:1px} .co-secret .co-p.faux{outline:3px dashed var(--red);outline-offset:1px} .co-pomme.pre,.co-pomme:hover:not(:disabled),.co-pomme:hover:not(:disabled)~.co-pomme{background:var(--red-l);transform:translateY(-3px);box-shadow:0 0 0 2px var(--red)} .co-pomme{position:relative} .co-pomme.pre-1::after,.co-pomme:hover:not(:disabled)::after{content:attr(data-n);position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:800;color:var(--red);white-space:nowrap} @media (prefers-reduced-motion: reduce){ .co-p.neuf,.co-p i.co-coureur{animation:none} } .co-tas{display:flex;flex-direction:column;gap:8px;max-width:620px;margin:6px auto} .co-panier{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:var(--fam-log-l)} .co-pn{font-size:13px;color:var(--text2);min-width:64px} .co-panier>b{margin-left:auto;font-size:20px;color:var(--fam-log)} .co-pommes{display:flex;flex-wrap:wrap;gap:4px} .co-pomme{border:none;background:none;font-size:30px;cursor:pointer;padding:2px;border-radius:8px} .co-b{display:flex;flex-direction:column;align-items:center;min-width:96px;padding:12px 16px;border:none;border-radius:18px;background:var(--fam-log);color:#fff;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.2)} .co-b b{font-size:28px} .co-b span{font-size:13px;opacity:.85} .co-b:active{transform:translateY(3px);box-shadow:none} /* les enclos */ .en-pts{text-align:center;font-size:16px;margin-bottom:6px} .en-pre{max-width:460px;margin:0 auto;padding:6px;border-radius:18px;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.25) 0 2%,transparent 3%) 0 0/38px 38px,radial-gradient(circle at 70% 70%,rgba(60,120,40,.18) 0 2%,transparent 3%) 0 0/31px 31px,linear-gradient(160deg,#CFEDBF,#B3DFA2);box-shadow:inset 0 0 0 2px rgba(60,120,40,.2)} .en-saute{animation:en-saute .6s cubic-bezier(.3,1.6,.5,1) both;transform-box:fill-box;transform-origin:center bottom} @keyframes en-saute{from{transform:translateY(-26px) scale(.5);opacity:0}to{transform:none;opacity:1}} .en-der{animation:en-der 1.2s ease} @keyframes en-der{30%{opacity:.4}} .en-indice{animation:en-indice 1s ease-in-out infinite} @keyframes en-indice{50%{opacity:.35}} .en-danger{fill:rgba(217,84,30,.12);stroke:#D9541E;stroke-width:3;stroke-dasharray:7 5;opacity:0;pointer-events:none;transition:opacity .15s} .en-danger.vu{opacity:1} .en-danger-t{opacity:0;pointer-events:none} .en-danger.vu+.en-danger-t{opacity:1} @media (prefers-reduced-motion: reduce){ .en-saute,.en-der,.en-indice{animation:none} } .en-svg{display:block;width:100%;height:auto} .en-hit{cursor:pointer} .en-hit:hover{stroke:rgba(14,124,112,.35)} /* le pont des castors */ .ca-leg{display:flex;flex-direction:column;gap:2px;align-items:center;font-size:14px;color:var(--text2);margin-bottom:6px} .ca-riv{max-width:620px;margin:0 auto} .ca-svg{display:block;width:100%;height:auto} .ca-hit{cursor:pointer} .ca-hit:hover{fill:#E6F4FC} .ca-compte{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:15px;margin:2px 0 6px} .ca-compte b{font-size:18px} .ca-vagues{animation:ca-vague 3.2s linear infinite} @keyframes ca-vague{to{transform:translateX(-40px)}} .ca-pose{animation:ca-pose .45s cubic-bezier(.3,1.5,.5,1) both;transform-box:fill-box;transform-origin:center} @keyframes ca-pose{from{transform:translateY(-14px) scale(.6);opacity:0}to{transform:none;opacity:1}} .ca-gagne{animation:ca-brille 1.2s ease-in-out infinite} @keyframes ca-brille{50%{opacity:.55}} .ca-indice{animation:ca-brille 1s ease-in-out infinite} @media (prefers-reduced-motion: reduce){ .ca-vagues,.ca-pose,.ca-gagne,.ca-indice{animation:none} } /* le bloc mystère */ .bl-zone{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start} .bl-pieces{flex:2 1 320px;display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px} .bl-p{position:relative;aspect-ratio:1;border:2px solid var(--border);border-radius:14px;background:var(--bg);cursor:pointer;padding:4px} .bl-p svg{display:block;width:100%;height:100%} .bl-p:hover:not(:disabled){border-color:var(--fam-log)} .bl-p.ecart{opacity:.38;border-style:dashed;border-color:var(--border2);transform:perspective(220px) rotateX(52deg) translateY(10px) scale(.92);background:var(--bg2)} .bl-p.ecart::after{content:'↓';position:absolute;top:2px;right:6px;font-weight:800;font-size:15px;color:var(--text2)} .bl-p.ecart .bl-nb{text-decoration:line-through 3px;color:var(--text3)} .bl-compte{font-size:15px;margin-bottom:8px} .bl-compte b{font-size:18px} .bl-q.indice{border:2.5px solid #7B5CC4;box-shadow:0 0 0 3px rgba(123,92,196,.25)} .bl-comp{flex-direction:column;align-items:stretch!important} .bl-c-phrase{display:flex;align-items:center;gap:8px;justify-content:space-between;font-weight:600;font-size:15px;background:var(--bg2);border-radius:8px;padding:6px 10px} .bl-c-r{display:flex;flex-wrap:wrap;gap:5px} .bl-c-et{border:1.5px solid var(--border2);background:var(--bg);color:var(--text);border-radius:14px;padding:4px 10px;font-size:13.5px;cursor:pointer} .bl-c-et.on{background:var(--fam-log, var(--teal));border-color:var(--fam-log, var(--teal));color:#fff} .bl-c-et.op{font-weight:700;min-width:44px} .bl-p{transition:opacity .15s, transform .15s} .bl-p.verif{opacity:1;border:3px solid var(--violet)} .bl-v{position:absolute;top:0;left:4px;color:var(--violet);font-weight:800;font-size:20px} .bl-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px} .bl-pieces.designer .bl-p:not(.ecart):not(.faux){border-color:var(--fam-log);border-width:3px} .bl-p.faux{opacity:.4;border:2px dashed var(--red);cursor:default} .bl-p.trouve{border:3px solid var(--green);box-shadow:0 0 0 4px var(--green-l)} .bl-p:disabled{cursor:default} .bl-nb{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:clamp(18px,4vw,26px);font-weight:800;color:var(--text)} .bl-x{position:absolute;top:2px;right:6px;color:var(--red);font-weight:800;font-size:18px} .bl-cote{flex:1 1 260px;min-width:0} .bl-qs{display:flex;flex-wrap:wrap;gap:6px} .bl-q{min-height:42px;display:inline-flex;align-items:center;gap:6px} .bl-pt{display:inline-block;width:14px;height:14px;border-radius:50%;border:1.5px solid #1B2436} .bl-comp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px} .bl-hist{margin-top:10px;display:flex;flex-direction:column;gap:3px;font-size:14px;max-height:220px;overflow:auto} .bl-hist .oui{color:var(--green)} .bl-hist .non{color:var(--red)} .lud-mo{max-width:560px} .lud-merite{margin:-4px 0 12px;padding:8px 12px;border-radius:12px;background:var(--green-l);color:var(--green);font-weight:700;font-size:14px} .lud-nivs{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px} .lud-niv{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border:2px solid var(--border2);border-radius:16px;background:var(--bg);cursor:pointer;color:var(--text)} .lud-niv b{font-size:28px;color:var(--fam-log)} .lud-cl{font-size:10.5px;color:var(--text3);line-height:1;margin-top:-2px} .lud-niv small{font-size:11px;color:var(--fam-log);font-weight:700} .lud-niv.sien{border:3px solid var(--fam-log);background:var(--fam-log-l)} .lud-niv:disabled{opacity:.4;cursor:not-allowed;border-style:dashed} .lud-niv i{font-size:14px;color:var(--text3)} .jx-mo{width:min(660px,94vw);max-width:none;max-height:90vh;overflow:auto} .jx-l{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)} .jx-c{flex:1;display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0} .jx-c input{width:20px;height:20px;flex:none} .jx-c>i{font-size:24px;color:var(--fam-log);flex:none} .jx-c span{display:flex;flex-direction:column;min-width:0} .jx-c small{font-size:12px;color:var(--text2)} /* les pyramides */ .py-pyr{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;margin:14px auto 26px;padding:12px 18px 0;width:max-content;max-width:100%} .py-pyr::after{content:'';position:absolute;left:0;right:0;bottom:-10px;height:10px;border-radius:5px;background:linear-gradient(#C9B28F,#A88F6A)} .py-rang{display:flex;gap:5px} .py-b{position:relative;width:68px;height:48px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;color:#4A2E14; border:1px solid #9C7244;background:radial-gradient(circle at 22% 30%,rgba(255,255,255,.35) 0 5%,transparent 6%),radial-gradient(circle at 76% 70%,rgba(120,80,40,.18) 0 6%,transparent 7%),linear-gradient(170deg,#F2D7AE,#D9B282); box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(120,80,40,.25),0 3px 0 #8A6236} .py-b.vide{background:linear-gradient(170deg,#E9DCC8,#F5EDE1);border:2px dashed #B8865A;box-shadow:inset 0 3px 6px rgba(90,60,30,.22);color:var(--fam-log)} .py-b input{width:100%;height:100%;border:none;background:transparent;text-align:center;font:inherit;color:inherit;border-radius:5px} .py-b input:focus{outline:3px solid var(--fam-log);outline-offset:-3px} .py-b.brille{animation:py-brille .7s ease both} @keyframes py-brille{0%{filter:none}45%{filter:brightness(1.35) drop-shadow(0 0 8px #FFD76A);transform:translateY(-3px)}100%{filter:none;transform:none}} @media (prefers-reduced-motion: reduce){ .py-b.brille{animation:none} } .py-b.ok{border:2px solid var(--green);background:var(--green-l)} .py-b.ko{border:2px dashed var(--red);background:var(--red-l)} .py-b.indice{animation:ro-indice 1s ease infinite} .py-b small{opacity:.4;font-weight:600} .py-x{position:absolute;top:-6px;right:-4px;color:var(--red);font-style:normal;font-size:14px} button.py-b{cursor:pointer} .py-b.preuve{outline:3px solid #7B5CC4;outline-offset:2px} @media (max-width:480px){ .py-b{width:52px;height:40px;font-size:17px} } /* le loup et les moutons */ .lp-plateau{display:grid;max-width:440px;margin:6px auto;border:4px solid #8B6B4A;border-radius:8px;overflow:hidden;aspect-ratio:1} .lp-c{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,5vw,34px);border:none;padding:0} .lp-c.blanche{background:#F3E6D2} .lp-c.noire{background:#9C7A57;cursor:pointer} .lp-c.sel{box-shadow:inset 0 0 0 4px var(--fam-log)} .lp-c.cible{background:#B89470} .lp-c.der{box-shadow:inset 0 0 0 3px #F2C27B} .lp-c{position:relative;touch-action:none} .lp-c.pas{background-image:radial-gradient(circle, rgba(123,92,196,.55) 0 18%, transparent 19%);outline:2px dashed rgba(123,92,196,.65);outline-offset:-5px} .lp-c.trou{outline:3px dashed #D9541E;outline-offset:-5px} .lp-c.ind{outline:3px solid #7B5CC4;outline-offset:-4px} .lp-c.ind-de{outline:3px dashed #7B5CC4;outline-offset:-4px} .lp-m{position:absolute;top:1px;right:3px;font-size:.5em;line-height:1} .lp-m.et{color:#D9541E;font-size:.6em} .lp-m.ko{color:#D9541E;font-weight:800;font-size:.55em} .lp-pion{display:inline-block;line-height:1} .lp-pion.glisse{animation:lp-glisse .32s ease-out} @keyframes lp-glisse{from{transform:translate(var(--dx), var(--dy))}} .lp-fantome{position:fixed;z-index:4000;pointer-events:none;transform:translate(-50%, -60%);filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))} .lp-compte{text-align:center;font-size:14.5px;margin:4px 0 2px} .lp-leg{color:var(--text3)} @media (prefers-reduced-motion: reduce){ .lp-pion.glisse{animation:none} } .lp-pt{width:30%;height:30%;border-radius:50%;background:var(--fam-log-l);border:2px solid var(--fam-log)} /* les jeux de maternelle */ .mt-consigne{display:flex;align-items:center;gap:10px;justify-content:center;font-size:19px;font-weight:600;margin:4px 0 8px;text-align:center} .mt-hp{flex:none;width:54px;height:54px;border-radius:50%;border:2px solid #0E7C70;background:#E6F4F1;color:#0E7C70;font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center} .mt-scene{display:flex;flex-direction:column;align-items:center;gap:14px;margin:6px 0 10px;padding:16px 10px;border:1px solid var(--border);border-radius:22px;background:radial-gradient(circle,var(--border2) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--bg2)} .mt-reserve{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:flex-end} .mt-src{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;background:var(--bg);border:3px solid var(--border);border-radius:20px;padding:8px;min-width:76px;min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:inherit;color:var(--text);box-shadow:0 3px 0 var(--border)} .mt-src.on{border-color:#7B5CC4;box-shadow:0 0 0 4px rgba(123,92,196,.3)} .mt-src.faux{opacity:.35} .mt-src.ok,.mt-plateau .ok{outline:4px solid #0E7C70;border-radius:18px} .mt-tenu{opacity:.35} .mt-fant{opacity:.9;transform:scale(1.08);box-shadow:0 10px 24px rgba(0,0,0,.25)} .mt-emo{line-height:1;display:inline-block} .mt-ombre{filter:brightness(0);opacity:.82} .mt-collier{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;padding:10px 14px;background:linear-gradient(transparent 47%,#A0692B 47%,#A0692B 53%,transparent 53%);border-radius:12px} .mt-perle{display:flex} .mt-trou{width:70px;height:70px;border-radius:50%;border:4px dashed #7B5CC4;background:#fff;cursor:pointer} .mt-boites{display:flex;flex-wrap:wrap;gap:16px;justify-content:center} .mt-boite{min-width:170px;min-height:150px;border:4px solid #A0692B;border-radius:12px 12px 22px 22px;background:#F6E7CF;display:flex;flex-direction:column;align-items:center;padding:8px;cursor:pointer} .mt-boite-h{display:flex;align-items:center;gap:8px;min-height:56px} .mt-boite-c{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:180px} .mt-tache{display:inline-block;width:48px;height:48px;border-radius:14px;border:3px solid rgba(0,0,0,.25)} .mt-tab{border-collapse:separate;border-spacing:8px} .mt-tab th{padding:4px} .mt-case{width:130px;height:110px;border:3px dashed #94A3B8;border-radius:16px;background:var(--bg);cursor:pointer;text-align:center;vertical-align:middle} .mt-serie{display:flex;align-items:flex-end;gap:6px;justify-content:center;flex-wrap:wrap} .mt-slot{min-width:96px;min-height:110px;border:4px dashed #7B5CC4;border-radius:18px;background:#fff;display:flex;align-items:flex-end;justify-content:center;padding:4px;cursor:pointer} .mt-slot.plein{border-style:solid;border-color:#0E7C70;cursor:default} .mt-sep{font-size:30px;color:var(--text3);align-self:center} .mt-fl{align-self:center;opacity:.7} .mt-modele{padding:10px 26px;border-radius:24px;background:var(--bg);border:3px solid var(--border)} .mt-ombre-b{padding:10px} .mt-points{display:flex;gap:8px} .mt-points span{width:18px;height:18px;border-radius:50%;border:3px solid #94A3B8} .mt-points .ok{background:#0E7C70;border-color:#0E7C70} .mt-points .ici{border-color:#7B5CC4} .mt-nuage{display:grid;grid-template-columns:repeat(4,72px);grid-template-rows:repeat(3,72px);gap:4px;padding:10px;border-radius:24px;background:var(--bg);border:3px solid var(--border)} .mt-nuage span{display:flex;align-items:center;justify-content:center} .mt-nb b{font-size:46px;line-height:1} .mt-assiette{min-width:280px;min-height:96px;border-radius:50px;border:4px solid #94A3B8;background:#fff;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:10px} .mt-jeton{width:40px;height:40px;border-radius:50%;background:#E5A800;border:3px solid #8A5A00} .mt-vide{color:var(--text3);font-size:16px} .mt-plateau{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:14px;border-radius:24px;background:#F6E7CF;border:4px solid #A0692B;min-height:110px} .mt-plateau>span{display:flex;align-items:center;justify-content:center;min-width:84px;min-height:84px} .mt-trou-k{min-width:84px;min-height:84px;border:4px dashed #7B5CC4;border-radius:18px;font-size:44px;font-weight:800;color:#7B5CC4;display:flex;align-items:center;justify-content:center} .mt-rideau{font-size:110px;text-align:center;padding:40px;border-radius:22px;background:var(--bg2);animation:mtRideau .9s ease} @keyframes mtRideau{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}} .mt-grille{width:100%;height:auto} .mt-cl{cursor:pointer} .mt-prog{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:56px;padding:6px 12px;border-radius:16px;background:var(--bg);border:3px solid var(--border)} .mt-prog span{font-size:36px} .exo-vue.jeu .exo-corps .btn.mt-fleche{font-size:30px;min-width:70px} .mt-formes{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center} .mt-modele-svg{background:#fff;border-radius:22px;border:3px solid var(--border);max-width:100%;height:auto} .mt-pieces{max-width:360px} .mt-msg{font-size:18px;text-align:center} .mt-secoue .mt-scene{animation:mtSecoue .4s} @keyframes mtSecoue{0%,100%{transform:none}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}} @media (prefers-reduced-motion:reduce){.mt-secoue .mt-scene,.mt-rideau{animation:none}} .el-jx-tard{margin-top:12px} .el-jx-tard summary{cursor:pointer;font-size:16px;font-weight:700;color:var(--text2);padding:6px 0} .el-exo.verrou{opacity:.6;cursor:default} /* le relevé du 22/10/2026 : les douze dernières activités (des textes de 10 à 14 px, trop petits) */ #exo-vue .exo-axe-nb{font-size:16px} #exo-vue .exo-cr-cel>span{font-size:12px} #exo-vue .exo-cr-sep span{font-size:15px} #exo-vue .oie-n{font-size:14px} #exo-vue .oie-leg{font-size:15px} #exo-vue .lo-lab{font-size:15px} #exo-vue .cb-cible>span{font-size:16px} #exo-vue .mu-leg{font-size:15px} #exo-vue .mu-leg .mu-case{width:28px;height:28px;font-size:15px} #exo-vue .exo-cr-defs .exo-lab{font-size:16px} #exo-vue .syl-ch{font-size:16px} #exo-vue .syl-ch input{width:20px;height:20px} /* le jeu de Nim et l'échantillon */ .bt-scene,.ea-scene{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:22px;margin:6px 0 10px;padding:16px 8px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(circle,var(--border2) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--bg2)} .bt-tous{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap;justify-content:center} .bt-tas{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:16px;color:var(--text2)} .bt-tas b{font-size:22px;color:var(--text)} .bt-pile{display:flex;flex-direction:column;gap:4px;align-items:center} .bt-b{width:120px;height:14px;border-radius:7px;border:2px solid #8A5A1C;background:linear-gradient(90deg,#E9C27D,#C98A2E);cursor:pointer;padding:0;position:relative} .bt-b::after{content:'';position:absolute;right:-6px;top:-3px;width:14px;height:16px;border-radius:50%;background:#D9541E} .bt-b:hover:not(:disabled),.bt-b:hover:not(:disabled)~.bt-b{filter:brightness(1.1)} .bt-b:disabled{cursor:default} .bt-pile .bt-b:hover:not(:disabled){outline:3px solid #7B5CC4} .bt-b.ind{outline:3px dashed #7B5CC4} .bt-bin{border-collapse:collapse;font-size:16px} .bt-bin th,.bt-bin td{border:1px solid var(--border2);padding:4px 10px;text-align:center;background:var(--bg)} .bt-bin td{font:700 18px ui-monospace,Consolas,monospace} .bt-par td.pair{color:#0E7C70} .bt-par td.imp{color:#D9541E} .bt-hist{text-align:center;font-size:15px;color:var(--text2);margin-bottom:6px} .ea-sac{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-content:center;width:240px;min-height:150px;padding:18px 14px 14px;border-radius:30px 30px 44px 44px;background:#E9D5B0;border:4px solid #A0692B} .ea-sac.cache{flex-direction:column;align-items:center} .ea-q{font-size:56px;font-weight:800;color:#8A5A1C} .ea-sac small{color:#6B4419;font-weight:700} .ea-der{display:flex;flex-wrap:wrap;gap:2px;max-width:300px;justify-content:center} .ea-tab{border-collapse:collapse;font-size:16px} .ea-tab th,.ea-tab td{border:1px solid var(--border2);padding:4px 10px;text-align:center;background:var(--bg)} .ea-res{font-size:20px;text-align:center;padding:14px 20px;border-radius:16px;background:var(--bg);border:2px solid var(--border2)} .ea-res b{font-size:26px} .bt .ro-btns,.ea .ro-btns{align-items:center} /* le code secret et les graphes */ .cs-scene,.gf-scene{display:flex;flex-direction:column;align-items:center;gap:12px;margin:6px 0 10px;padding:14px 8px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(circle,var(--border2) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--bg2)} .cs-msg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .cs-l{display:flex;flex-direction:column;align-items:center;min-width:58px;padding:8px 8px 4px;border-radius:12px;background:#1B2436;color:#FDE68A} .cs-l b{font:800 24px/1.1 ui-monospace,Consolas,monospace;letter-spacing:.04em} .cs-l i{font-style:normal;font-weight:800;font-size:18px;min-height:22px;color:#fff} .cs-l.ok{box-shadow:0 0 0 3px #0E7C70} .cs-l.ko{box-shadow:0 0 0 3px #D9541E} .cs-outil{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%} .cs-reglette{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:760px} .cs-reglette span{display:flex;flex-direction:column;align-items:center;width:27px;border:1px solid var(--border2);border-radius:6px;background:var(--bg);font-size:15px} .cs-reglette b{color:var(--text2)} .cs-reglette i{font-style:normal;font-weight:800;color:#7B5CC4;border-top:1px dashed var(--border2);width:100%;text-align:center} .cs-reg-l{font-size:15px;color:var(--text2);display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center} .cs-poly{border-collapse:collapse;font-size:20px;font-weight:700} .cs-poly th{color:#7B5CC4;padding:4px 10px} .cs-poly td{border:1px solid var(--border2);padding:6px 12px;background:var(--bg);text-align:center} .cs-poids{display:flex;gap:6px} .cs-poids span{width:52px;text-align:center;font:800 20px ui-monospace,Consolas,monospace;padding:6px;border-radius:8px;background:var(--bg);border:2px solid var(--border2)} .eg-rep .cs-in,.cs-in{width:min(380px,78vw);font-size:26px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-align:center;border:2px solid var(--border2);border-radius:10px;padding:6px 10px} /* plus large que les cases de nombre (.eg-rep input) : un mot entier, jusqu'à 12 lettres */ .gf-svg{width:100%;max-width:640px;height:auto;max-height:52vh} .gf-cl{cursor:pointer} .gf-v{font-size:22px;font-weight:800;fill:#1b2436} .gf-v.b{fill:#fff} .gf-v2{font-size:15px;font-weight:800;fill:var(--text2)} .gf-w{font-size:16px;font-weight:800;fill:#1b2436} .gf-ord{font-size:15px;font-weight:800;fill:#0E7C70} .gf-dep{font-size:14px;font-weight:800;fill:#0E7C70} .cs .ro-btns,.gf .ro-btns{align-items:center} /* la fausse pièce */ .fp-scene{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0 10px;padding:10px 8px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(circle,var(--border2) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--bg2)} .fp-svg{width:100%;max-width:760px;height:auto;max-height:42vh} .fp-table{width:100%;height:auto} .fp-cl{cursor:pointer} .fp-vide{font-size:15px;color:var(--text3)} .fp-n{font-weight:800;fill:#4A3410} .fp-ok{font-weight:800;fill:#fff} .fp-f{font-size:16px;font-weight:800;fill:#D9541E} .fp-pinceaux{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0} .fp-pinceaux .btn.on{border-color:#7B5CC4;background:rgba(123,92,196,.12);box-shadow:inset 0 0 0 2px #7B5CC4;font-weight:700} .fp-histo{max-width:640px;margin:4px auto 8px;padding-left:22px;font-size:16px;line-height:1.7} .fp-trois{display:flex;gap:24px;justify-content:center;flex-wrap:wrap} .fp-trois div{display:flex;flex-direction:column;align-items:center;font-weight:700;color:var(--text2)} .exo-vue.jeu .exo-corps .btn.fp-gros{min-height:52px;font-size:17px;padding:8px 22px} .fp .ro-btns{align-items:center} /* les lampes */ .la-scene{display:flex;justify-content:center;margin:6px 0 10px;padding:12px 8px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(circle,var(--border2) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--bg2)} .la-svg{width:100%;height:auto;max-height:56vh} .la-cl{cursor:pointer} .la-cl:hover circle{filter:brightness(1.06)} .la-b{font-size:26px;font-weight:800;fill:#fff} .la-t{font-size:22px;font-weight:800;fill:var(--text2)} .la-modele{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0} .la-modele span{font-size:15px;font-weight:700;color:var(--text2)} .la-rangs{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;align-items:center} .la-inters{display:flex;gap:12px} .la-inter{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;cursor:pointer;font:inherit;color:var(--text)} .la-inter:disabled{cursor:default} .la-inter b{font-size:22px} .la-inter span{font-size:14px;font-weight:700;color:var(--text2)} .la-inter.on span{color:#0E7C70} .la-regles{display:flex;flex-direction:column;gap:6px} .la-regle{display:flex;align-items:center;gap:10px} .la-regle b{display:block;font-size:15px;color:var(--text2)} .la-formule{font-size:21px;font-weight:800;color:#7B5CC4;letter-spacing:.02em} .exo-vue.jeu .exo-corps .btn.la-gros{min-height:52px;font-size:17px;padding:8px 20px} .la .ro-btns{align-items:center} /* les miroirs */ .mi-scene{display:flex;justify-content:center;margin:6px 0 10px;padding:10px 8px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(circle,var(--border2) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--bg2)} .mi-svg{width:100%;height:auto;max-height:58vh} .mi-c{fill:transparent;cursor:pointer} .mi-c:hover{fill:rgba(255,255,255,.1)} .mi-cl{cursor:pointer} .mi-l{font-size:22px;font-weight:800;fill:#7B5CC4} .mi-l.b{fill:#fff} .mi-ang{font-size:22px;font-weight:800;fill:#0E7C70} .mi-ang.v{fill:#7B5CC4} .mi-cote{font-size:16px;font-weight:700;fill:var(--text2)} .mi-cote.ko{fill:#D9541E} .exo-vue.jeu .exo-corps .btn.mi-gros{min-height:52px;font-size:17px;padding:8px 20px} .mi .ro-btns{align-items:center} /* les clepsydres */ .cl-scene{margin:6px 0 10px;padding:12px 8px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(circle,var(--border2) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--bg2)} .cl-rang{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:22px} .cl-b{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;color:inherit} .cl-q{font-size:24px;font-weight:800;color:#1E40AF} .cl-cap{font-size:15px;font-weight:600;color:var(--text2)} .cl-viol{color:#7B5CC4;font-weight:700} .cl-svg{display:block;overflow:visible} .cl-touche{background:none;border:0;padding:4px;border-radius:16px;cursor:pointer} .cl-touche:disabled{cursor:default} .cl-touche:not(:disabled):hover{background:rgba(123,92,196,.08)} .cl-touche.on{background:rgba(123,92,196,.14)} .cl-choix{cursor:pointer;padding:8px;border-radius:16px;border:2px solid transparent} .cl-choix.on{border-color:#7B5CC4;background:rgba(123,92,196,.1)} .cl-rv{display:flex;gap:6px} .exo-vue.jeu .exo-corps .cl-rv .btn{min-height:44px;font-size:15px;padding:6px 10px} .exo-vue.jeu .exo-corps .btn.cl-gros{min-height:52px;font-size:17px;padding:8px 18px} .exo-vue.jeu .exo-corps .btn.cl-pichet{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:90px;min-width:88px;font-size:18px;font-weight:700;justify-content:flex-end} .cl-verses{text-align:center;font-size:20px;font-weight:700;color:var(--text2);margin-top:8px} .cl-horloge{display:flex;justify-content:center;gap:22px;font-size:18px;margin-top:10px;color:var(--text2)} .cl-chrono b{color:#0E7C70} .cl-temps{display:block;width:100%;max-width:640px;margin:4px auto 0} .cl-tt{font-size:13px;font-weight:700;fill:var(--text2)} .cl-tc{font-size:13px;font-weight:700;fill:#0E7C70} .cl .ro-btns{align-items:center} .cl-sol{margin:10px auto;max-width:560px;font-size:16px} .cl-sol summary{font-weight:700;cursor:pointer} .cl-sol ol{margin:6px 0 0 22px;line-height:1.7} /* l'atelier des engrenages */ .eg-scene{display:flex;justify-content:center;margin:6px 0 10px;padding:8px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(circle,var(--border2) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--bg2)} .eg-svg{width:100%;max-width:920px;max-height:46vh;height:auto} .eg-t{font-size:15px;font-weight:700;fill:var(--text2)} .eg-q{font-size:30px;font-weight:800;fill:#7B5CC4} .eg-sens{font-size:30px;font-weight:800;fill:#0E7C70} .eg-sens.k{fill:#7B5CC4} .eg-etoile{font-size:26px;fill:#D9541E} .eg-choix{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:8px 0} .exo-vue.jeu .exo-corps .btn.eg-gros{min-height:56px;font-size:18px;padding:10px 22px} .eg-compte{font-size:17px;font-weight:700;color:var(--text2)} .eg-rep{font-size:18px;font-weight:600;display:flex;align-items:center;gap:8px} .eg-rep input{width:76px;font-size:24px;font-weight:800;text-align:center;border:2px solid var(--border2);border-radius:10px;padding:4px} .eg-lab{font-size:15px;font-weight:700;color:var(--text2);margin:10px 0 6px} .eg-lab span{font-weight:500;color:var(--text3)} .eg-plateau{display:flex;flex-wrap:wrap;gap:8px} .eg-p{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:104px;padding:8px 10px;border:2px solid var(--border);border-radius:14px;background:var(--bg);box-shadow:0 2px 0 var(--border);transition:transform .12s,border-color .12s;cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;color:var(--text)} .eg-p:hover{border-color:#7B5CC4;transform:translateY(-1px)} .eg-p.on{border-color:#7B5CC4;background:#F1ECFB;box-shadow:inset 0 0 0 2px #7B5CC4} .eg-mini{width:62px;height:62px} .eg-poses{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0} .eg-pose{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border:1.5px solid var(--border2);border-radius:20px;background:var(--bg2);font:inherit;font-size:15px;cursor:pointer;color:var(--text)} /* le jardin de mémoire */ .ja-zone{display:flex;justify-content:center;align-items:center;gap:10px;margin:8px 0} .ja-g{display:grid;gap:4px;padding:6px;border-radius:14px;background:#BFE6B5;width:min(320px,80vw)} .ja-zone.deux .ja-g{width:min(260px,42vw)} .ja-c{aspect-ratio:1;border:none;border-radius:10px;background:#8FCB7E;font-size:clamp(18px,4.5vw,30px);display:flex;align-items:center;justify-content:center;position:relative;padding:0;cursor:pointer} .ja-c:disabled{cursor:default;opacity:1;color:inherit} .ja-c.juste{box-shadow:inset 0 0 0 3px var(--green)} .ja-c.faux{box-shadow:inset 0 0 0 3px var(--red);background:#E9B8A8} .ja-c.manque{box-shadow:inset 0 0 0 3px var(--green);outline:2px dashed var(--green);outline-offset:-7px} .ja-c i{position:absolute;top:0;right:4px;color:var(--red);font-style:normal;font-weight:800;font-size:14px} .ja-zone{position:relative} .ja-fleches{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:2} .ja-rep{position:absolute;left:4px;top:2px;font-size:10px;font-weight:700;color:rgba(30,60,30,.55)} .ja-c.montre{box-shadow:inset 0 0 0 3px #7B5CC4} .ja-c.pousse{animation:ja-pousse .45s cubic-bezier(.3,1.6,.5,1)} @keyframes ja-pousse{from{transform:scale(.4)}} .ja-c.eclot{animation:ja-eclot .9s ease-in-out 2} @keyframes ja-eclot{50%{transform:scale(1.15) rotate(-6deg)}} .ja-vol{position:fixed;z-index:4000;display:flex;align-items:center;justify-content:center;font-size:30px;pointer-events:none;transition:transform 1s cubic-bezier(.4,.1,.3,1)} .ja-temps{max-width:540px;height:8px;margin:4px auto 2px;background:var(--bg2);border-radius:4px;overflow:hidden} .ja-temps i{display:block;height:100%;background:var(--fam-log);transform-origin:left;animation:ja-temps linear forwards} @keyframes ja-temps{to{transform:scaleX(0)}} @media (prefers-reduced-motion: reduce){ .ja-c.pousse,.ja-c.eclot{animation:none} .ja-vol{transition:none} } .ja-pt{color:var(--fam-log);font-size:.9em} .ja-axe{align-self:stretch;width:4px;border-left:4px dashed var(--fam-log);position:relative} .ja-axe.rot{border:none;width:auto;display:flex;align-items:center;font-size:22px;color:var(--fam-log);font-weight:800} /* l'écho */ .ec-ts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:12px 0} .ec-t{width:84px;height:84px;border-radius:50%;border:4px solid var(--tc);background:var(--bg);color:var(--tc);font-size:34px;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.18);transition:transform .08s,background .08s} .ec-t.gros{width:150px;height:150px;font-size:60px} .ec-t.on{background:var(--tc);color:#fff;transform:scale(1.08)} .ec-t:disabled{opacity:.55;cursor:default} .ec-long{display:flex;gap:4px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:6px} .ec-long i{width:14px;height:14px;border-radius:50%;background:var(--border2)} .ec-long i.fait{background:var(--fam-log)} .ec-long span{font-size:12px;color:var(--text3);margin-left:6px} .ec-nota-b{display:flex;justify-content:center;margin:6px 0;overflow-x:auto} .ec-nota{max-width:100%;height:auto} .ec-long i.g3{margin-right:10px} .ec-bilan{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0 4px} .ec-b{position:relative;width:40px;height:40px;border-radius:50%;border:3px solid var(--tc);color:var(--tc);display:inline-flex;align-items:center;justify-content:center;font-size:18px;background:var(--bg)} .ec-b b{position:absolute;right:-6px;top:-8px;font-size:13px;background:var(--bg);border-radius:50%;padding:0 2px} .ec-b.ok b{color:var(--teal)} .ec-b.ko{border-style:dashed} .ec-b.ko b{color:#D9541E} .ec-b.att{box-shadow:0 0 0 4px var(--bg),0 0 0 6.5px #7B5CC4} .ec-b.reste{opacity:.45} .ec-ligne-b{display:flex;flex-direction:column;align-items:center;margin:8px 0} .ec-ligne{max-width:100%;height:auto} .ec-ligne-l{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:12.5px;color:var(--text2);margin-top:2px} .ro-msg.ast{background:#EFEAFB;color:#5B3FA8;border:1px solid #7B5CC4} .lud-modes{display:flex;gap:8px;justify-content:center;margin-bottom:10px} .tg-zone{display:flex;justify-content:center;margin:6px auto;touch-action:none;padding:10px;border-radius:18px; background:repeating-linear-gradient(97deg,rgba(150,105,55,.07) 0 3px,transparent 3px 11px),repeating-linear-gradient(93deg,rgba(255,255,255,.12) 0 2px,transparent 2px 23px),linear-gradient(160deg,#EFD9B4,#E0C08F); box-shadow:inset 0 0 0 2px rgba(140,95,45,.25),0 6px 16px rgba(60,40,15,.15)} .tg-zone.fini{animation:tg-fini .9s ease} @keyframes tg-fini{40%{box-shadow:inset 0 0 0 2px rgba(140,95,45,.25),0 0 0 6px rgba(242,181,68,.55),0 6px 16px rgba(60,40,15,.15)}} .tg-poignee{cursor:pointer} .tg-poignee circle{fill:#fff;stroke:#1B2436;stroke-width:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))} .tg-poignee text{fill:#1B2436;font-weight:800;pointer-events:none} .tg-poignee:hover circle{fill:#FFF3C4} .tg-p{transform-box:view-box} .tg-p.attention{stroke:#D9541E!important;stroke-width:3.5!important;stroke-dasharray:7 5;animation:tg-attention 1s ease-in-out infinite} @keyframes tg-attention{50%{opacity:.75}} .tg-anim-d{animation:tg-rot-d .28s cubic-bezier(.3,.9,.4,1)} .tg-anim-g{animation:tg-rot-g .28s cubic-bezier(.3,.9,.4,1)} .tg-anim-flip{animation:tg-flip .28s ease-out} @keyframes tg-rot-d{from{transform:rotate(-45deg)}} @keyframes tg-rot-g{from{transform:rotate(45deg)}} @keyframes tg-flip{from{transform:scaleX(-1)}} .tg-eclat{opacity:0;animation:tg-eclat 1.2s ease-out both;transform-box:fill-box;transform-origin:center} @keyframes tg-eclat{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(.8) translateY(-10px)}} @media (prefers-reduced-motion: reduce){ .tg-anim-d,.tg-anim-g,.tg-anim-flip,.tg-zone.fini{animation:none} .tg-eclat{animation:none;opacity:1} } /* Aussi grand que l'écran le permet : des pièces faciles à attraper au doigt. */ .tg-svg{display:block;width:100%;height:min(68vh, 720px);touch-action:none;user-select:none;overflow:visible} @media (max-width:600px){ .tg-svg{width:100%;height:auto} } .tg-p{cursor:grab} .tg-p.fixe{cursor:default;opacity:.97} .mj-coop{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px} /* Le mode simple (20/10/2026) */ .srs-bascule{display:inline-flex;border:1.5px solid var(--border2);border-radius:20px;overflow:hidden;margin-left:auto} .srs-bascule button{border:none;background:var(--bg);color:var(--text);padding:6px 12px;font-size:13.5px;cursor:pointer;font-family:inherit} .srs-bascule button.on{background:var(--teal);color:var(--sur-teal, #fff)} .srs{max-width:980px} .srs-q{font-size:19px;font-weight:600;margin:6px 0 14px} .srs-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px} .srs-carte{display:flex;gap:12px;align-items:flex-start;text-align:left;border:2px solid var(--border);border-radius:16px;padding:16px;background:var(--bg);color:var(--text);cursor:pointer;font-family:inherit} .srs-carte:hover{border-color:var(--teal)} .srs-carte b{display:block;font-size:16.5px;margin-bottom:4px} .srs-carte small{display:block;font-size:13.5px;color:var(--text2);line-height:1.45} .srs-carte.bientot{opacity:.55;cursor:default;border-style:dashed} .srs-carte.bientot b::after{content:" · bientôt";font-weight:400;font-size:12px;color:var(--text3)} .srs-ic{font-size:34px;line-height:1} .srs-note{font-size:13.5px;color:var(--text2);margin:14px 0} .srs-ligne2{display:grid;grid-template-columns:1fr 280px;gap:14px} @media (max-width:700px){.srs-ligne2{grid-template-columns:1fr}} .srs-champ{margin:12px 0} .srs-champ > label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px} .srs-aide{font-size:12.5px;color:var(--text3);margin-top:4px} .srs-gris{font-weight:400;color:var(--text3);font-size:13px} .srs-chips{display:flex;gap:8px;flex-wrap:wrap} .srs-chips button{border:1.5px solid var(--border2);border-radius:20px;padding:7px 13px;font-size:14px;background:var(--bg);color:var(--text);cursor:pointer;font-family:inherit} .srs-chips button.on{border-color:var(--teal);background:var(--teal-l);font-weight:600} .srs-mots{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .srs-mots span{background:var(--bg2);border-radius:14px;padding:4px 10px;font-size:14px} .srs-etapes{display:flex;flex-direction:column;gap:10px;margin:12px 0} .srs-et{display:flex;gap:14px;align-items:center;border:1.5px solid var(--border);border-radius:14px;padding:12px 14px;background:var(--bg)} .srs-et > span:nth-child(3){flex:1} .srs-et b{display:block;font-size:15.5px} .srs-et small{color:var(--text2);font-size:13px} .srs-n{width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none} .srs-eic{font-size:26px;flex:none} .srs-bas{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap} .srs-serie-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0} .srs-serie-t h3{margin:0;font-size:21px} .srs-pas{background:var(--teal-l);color:var(--teal-d);border-radius:12px;padding:3px 10px;font-size:13px;font-weight:600} .srs-paires{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-height:260px;overflow:auto} .srs-paires div{display:flex;gap:10px;align-items:baseline;background:var(--bg2);border-radius:8px;padding:5px 10px;font-size:14px} .srs-paires span{flex:1} .srs-paires b{font-weight:600;color:var(--teal-d)} .srs-paires .ko b{color:#B5520F} .srs-cj{background:var(--bg2);border-radius:10px;padding:8px 12px;margin-top:8px;font-size:14px} .srs-cj b{display:block;margin-bottom:3px} .srs-cj.ko{background:#FDF3E6} .srs-cj.ko span{color:#9A5200} .srs-cj input{margin-top:6px} .srs-cadre{border:1.5px solid #7B5CC4;background:#EFEAFB;color:#3F2C78;border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.5;margin:10px 0} .exo-srs-lien{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:2px dashed var(--teal);border-radius:14px;padding:12px 16px;background:var(--teal-l);color:var(--text);cursor:pointer;margin-bottom:14px;font-family:inherit} .exo-srs-lien b{font-size:15.5px} .exo-srs-lien small{display:block;color:var(--text2);font-size:13px} /* Les parcours, côté élève (20/10/2026) */ .pel-tete{display:flex;align-items:center;gap:12px;margin:0 0 12px} .pel-perso-b{width:52px;height:52px;border-radius:50%;border:2.5px solid #E8A33D;background:#FFF3D6;font-size:30px;cursor:pointer;line-height:1} .pel-etoiles{background:#FFF6E0;border:1.5px solid #E8A33D;border-radius:20px;padding:6px 14px;font-weight:800;color:#8A5A00;font-size:15px} .pel-go{display:flex;align-items:center;gap:16px;width:100%;border:none;border-radius:20px;padding:16px 22px;background:linear-gradient(135deg,#0E7C70,#18A08F);color:#fff;box-shadow:0 6px 0 #0A5E55;cursor:pointer;text-align:left;font-family:inherit} .pel-go b{display:block;font-size:22px;font-weight:800} .pel-go small{display:block;font-size:14.5px;opacity:.95;margin-top:3px} .pel-go-i{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:24px;flex:none} .pel-go:active{transform:translateY(3px);box-shadow:0 3px 0 #0A5E55} .pel-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px} .pel-carte{position:relative;overflow:hidden;text-align:left;border-radius:20px;background:var(--bg);border:2px solid var(--c);padding:14px 16px;cursor:pointer;font-family:inherit;color:var(--text);display:flex;flex-direction:column;gap:6px} .pel-carte::before{content:"";position:absolute;inset:0 0 auto 0;height:66px;background:var(--cl)} .pel-carte > *{position:relative} .pel-carte .pel-em{font-size:44px;line-height:1} .pel-carte b{font-size:17px;line-height:1.25} .pel-carte.arch{opacity:.7;border-style:dashed} .pel-badges:empty{display:none} .pel-pas{display:flex;gap:5px;align-items:center;flex-wrap:wrap} .pel-pas i{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--c);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;color:#fff;font-weight:800} .pel-pas i.f{background:var(--c)} .pel-pas i.f::after{content:"✓"} .pel-pas i.ici{width:26px;height:26px;box-shadow:0 0 0 4px var(--cl)} .pel-tr{font-size:17px;margin-left:2px} .pel-bas{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px;color:var(--text2);flex-wrap:wrap} .pel-st,.pel-or{color:#B07A12;font-weight:800} .pel-ech{background:#EEF2FF;color:#3B4C9B;border-radius:12px;padding:3px 9px;font-size:12.5px;font-weight:600} .pel-ech.passee{background:#FDF3E6;color:#9A5200} .pel-cartes.sobre .pel-carte::before{height:6px} .pel-cartes.sobre .pel-em{font-size:26px} .pel-troph{display:flex;gap:10px;flex-wrap:wrap} .pel-troph button{background:var(--bg);border:2px solid #F1D48F;border-radius:16px;padding:10px 12px;text-align:center;font-size:13px;width:130px;cursor:pointer;font-family:inherit;color:var(--text)} .pel-troph button span{display:block;font-size:32px} .pel-persos{display:grid;grid-template-columns:repeat(6,1fr);gap:8px} .pel-persos button{font-size:30px;border:2px solid var(--border);border-radius:12px;background:var(--bg);padding:6px;cursor:pointer} .pel-persos button.on{border-color:var(--teal);background:var(--teal-l)} .pel-vtete{display:flex;gap:14px;align-items:center;background:var(--bg);border-radius:18px;padding:14px 18px;border:2px solid var(--c);margin-bottom:6px} .pel-vtete .pel-em{font-size:50px;line-height:1} .pel-vtete h2{margin:0;font-size:22px} .pel-vs{font-size:14px;color:var(--text2);margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center} .pel-chemin{position:relative;margin-top:6px} .pel-chemin svg{position:absolute;inset:0;width:100%;height:100%} .pel-etp{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;width:160px;max-width:44vw;text-align:center;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--text);padding:0} .pel-rond{width:76px;height:76px;border-radius:50%;background:var(--bg);border:5px solid var(--c);display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:0 5px 0 rgba(0,0,0,.12);position:relative} .pel-etp.doc .pel-rond{border-style:dashed} .pel-etp.f .pel-rond{background:var(--cl)} .pel-etp.f .pel-rond::after{content:"✓";position:absolute;right:-6px;top:-6px;background:var(--c);color:#fff;border-radius:50%;width:26px;height:26px;font-size:15px;display:flex;align-items:center;justify-content:center;font-weight:800} .pel-etp.ici .pel-rond{width:96px;height:96px;font-size:44px;animation:pel-pulse 1.6s infinite} @keyframes pel-pulse{50%{box-shadow:0 5px 0 rgba(0,0,0,.12),0 0 0 10px var(--cl)}} @media (prefers-reduced-motion:reduce){.pel-etp.ici .pel-rond{animation:none}} .pel-nm{font-size:14px;font-weight:700;line-height:1.25} .pel-sl{font-size:13px;color:var(--text2)} .pel-et{color:#E8A33D;letter-spacing:1px;font-size:16px} .pel-et .v{color:#D5DAE1} .pel-ici{background:var(--c);color:#fff;font-size:12.5px;font-weight:800;border-radius:10px;padding:2px 8px} .pel-perso{font-size:38px;line-height:1;margin-bottom:-4px} .pel-fin{cursor:default} .pel-tr-g{font-size:54px;filter:grayscale(.85);opacity:.6} .pel-fin.f .pel-tr-g{filter:none;opacity:1} .pel-liste{display:flex;flex-direction:column;gap:8px;margin-top:10px} .pel-ligne{display:flex;gap:12px;align-items:center;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;padding:11px 14px;cursor:pointer;text-align:left;font-family:inherit;color:var(--text)} .pel-pt{width:30px;height:30px;border-radius:50%;border:3px solid var(--c);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none} .pel-ligne.f .pel-pt{background:var(--c);color:#fff} .pel-ligne.ici{border-color:var(--c);box-shadow:0 0 0 3px var(--cl)} .pel-ligne.doc .pel-pt{border-style:dashed} .pel-le{font-size:22px} .pel-lt{flex:1;min-width:0} .pel-lt b{display:block;font-size:15px} .pel-lt small{display:block;color:var(--text2);font-size:13px} .pel-fete{position:fixed;inset:0;z-index:4000;background:rgba(10,20,30,.45);display:flex;align-items:center;justify-content:center;overflow:hidden} .pel-fete-b{position:relative;background:var(--bg);color:var(--text);border-radius:22px;padding:24px 28px;text-align:center;max-width:460px;width:92%} .pel-fete-b h2{font-size:30px;margin:6px 0} .pel-fete-tr{font-size:84px;line-height:1} .pel-gris{color:var(--text3);font-size:14px} .pel-conf{position:absolute;top:-20px;width:10px;height:16px;animation:pel-tombe 3.2s linear infinite} @keyframes pel-tombe{to{transform:translateY(110vh) rotate(540deg)}} @media (prefers-reduced-motion:reduce){.pel-conf{display:none}} .pa-look{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:13.5px} .pa-look-t{font-weight:600;color:var(--text2)} .pa-look-l{display:flex;gap:4px;flex-wrap:wrap} .pa-look-l button{font-size:20px;border:1.5px solid var(--border);border-radius:8px;background:var(--bg);padding:2px 5px;cursor:pointer;line-height:1.2} .pa-look-l button.on{border-color:var(--teal);background:var(--teal-l)} .pa-look-c{width:26px;height:26px;border-radius:50% !important;border:2px solid #fff !important;box-shadow:0 0 0 1.5px var(--border)} .pa-look-c.on{box-shadow:0 0 0 3px var(--text)} .pa-look-g{color:var(--text3)} /* les chevaliers et les menteurs (20/10/2026) */ .mt-p.vu{outline:3px solid #7B5CC4;background:#EFEAFB} .mt-p.fixe{background:#F3EFFC} .mt-cloche{font-size:13px;color:#B5520F;font-weight:600;margin-top:4px} .mt-aide{max-width:620px;margin:6px auto 10px;border:1.5px solid var(--border);border-radius:12px;padding:6px 12px;font-size:14px;background:var(--bg)} .mt-aide summary{cursor:pointer;font-weight:600;color:var(--teal)} .mt-aide p{margin:6px 0;line-height:1.45} .mt-cas{border-collapse:collapse;margin:8px auto 0;font-size:13px;background:var(--bg);color:var(--text)} .mt-cas th,.mt-cas td{border:1px solid var(--border);padding:3px 8px;text-align:center;font-weight:500} .mt-cas td.ko{color:#B5520F;text-align:left} /* le cadenas */ .cd-ind.vu{outline:3px solid #7B5CC4;background:#EFEAFB} .cd-ecart{flex-basis:100%;font-size:13px;color:#B5520F;font-weight:600} .cd-leg{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--text2);margin:4px 0} .cd-brou{display:flex;gap:5px;justify-content:center;align-items:center;flex-wrap:wrap;margin:10px 0 2px} .cd-brou > span{font-size:13px;color:var(--text2);margin-right:4px} .cd-bd{position:relative;width:36px;height:40px;border-radius:8px;border:2px solid var(--border2);background:var(--bg);color:var(--text);font-size:18px;font-weight:700;cursor:pointer} .cd-bd i{position:absolute;top:-8px;right:-6px;font-style:normal;font-size:13px;background:var(--bg);border-radius:50%;padding:0 2px} .cd-bd.s1{border-style:dashed;border-color:#D9541E;color:var(--text3);text-decoration:line-through} .cd-bd.s1 i{color:#D9541E} .cd-bd.s2{border-color:var(--teal);background:var(--teal-l)} .cd-bd.s2 i{color:var(--teal)} .cd-brou-l{text-align:center;font-size:12px;color:var(--text3);margin-bottom:6px} .cd-inds{display:flex;flex-direction:column;gap:6px;max-width:560px;margin:8px auto} .cd-ind{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:var(--bg2)} .cd-ind.ko{outline:2px dashed var(--red);background:var(--red-l)} .cd-g{display:flex;gap:4px} .cd-g b{width:30px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--bg);border:1px solid var(--border2);font-size:18px} .cd-r{font-size:14px} .cd-bp{color:var(--teal);letter-spacing:2px} .cd-mp{color:var(--amber);letter-spacing:2px} .cd-rien{color:var(--text3)} .cd-ar{font-size:15px} .cd-x{position:absolute;right:8px;color:var(--red);font-style:normal;font-weight:800} .cd-code{display:flex;gap:8px;justify-content:center;align-items:center;margin:12px 0;font-size:28px} .cd-case{width:52px;height:60px;border-radius:10px;border:3px solid var(--border2);background:var(--bg);font-size:28px;font-weight:800;color:var(--text);cursor:pointer} .cd-case.sel{border-color:var(--fam-log);box-shadow:0 0 0 3px var(--fam-log-l)} .cd-case.fixe{background:#FCE7B2;border-style:dashed;cursor:default} .cd-pave{display:grid;grid-template-columns:repeat(6,52px);gap:6px;justify-content:center} .cd-t{height:48px;border:none;border-radius:10px;background:var(--bg2);font-size:22px;font-weight:700;cursor:pointer;color:var(--text)} .cd-t:active{transform:translateY(2px)} /* les sommes croisées */ .sc-g{border-collapse:separate;border-spacing:5px;margin:8px auto} .sc-c{width:54px;height:54px;border-radius:10px;background:var(--bg);border:2px solid var(--border2);text-align:center;font-size:22px;font-weight:800;padding:0} .sc-c input{width:100%;height:100%;border:none;background:transparent;text-align:center;font:inherit;color:var(--fam-log)} .sc-c.donne{background:var(--bg2);color:var(--text)} .sc-c.aide{background:#EFEAFB;color:#5B3FA8} .sc-c button{width:100%;height:100%;border:none;background:transparent;font:inherit;color:var(--fam-log);cursor:pointer;border-radius:8px} .sc-c.sel{border-color:var(--fam-log);box-shadow:0 0 0 3px var(--fam-log-l)} .sc-c.dbl{border:2.5px dashed #D9541E} .sc-c.vu{outline:3px solid #7B5CC4;outline-offset:1px} .sc-c.fin{color:var(--fam-log)} .sc-t small{display:block;font-size:12px;font-weight:600;color:var(--text3)} .sc-t small.ko{color:#D9541E} .sc-t.vu{outline:3px solid #7B5CC4;border-radius:8px} .sc-pave{margin-top:6px} .cd-t.on{background:var(--fam-log);color:#fff} .sc-t{font-size:15px;font-weight:700;color:var(--text2);white-space:nowrap;padding:0 4px;text-align:center} .sc-t.ok{color:var(--teal)} .sc-t.ko{color:#D9541E} .sc-t.ko small{color:#D9541E} /* les chevaliers et les menteurs */ .mt-l{display:flex;flex-direction:column;gap:8px;max-width:640px;margin:8px auto} .mt-p{position:relative;display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--bg2)} .mt-p.ko{outline:2px dashed var(--red)} .mt-p.fixe{background:#FCE7B2} .mt-av{flex:none;width:44px;height:44px;border-radius:50%;background:var(--fam-log);color:#fff;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center} .mt-c{flex:1;min-width:0} .mt-bulle{margin:4px 0 8px;padding:8px 12px;border-radius:12px;background:var(--bg);font-size:15px} .mt-ch{display:flex;gap:6px} .mt-x{position:absolute;right:10px;top:8px;color:var(--red);font-style:normal;font-weight:800} /* la chasse au trésor */ .ts-zone{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start} .ts-svg{flex:1 1 300px;max-width:420px;width:100%;height:auto} .ts-pt{fill:transparent;cursor:pointer} .ts-pt:hover{fill:var(--fam-log-l)} .ts-pt.barrer:hover{fill:#FDE7DA} .ts-forme{fill:none;stroke:#7B5CC4;stroke-width:2.5;stroke-dasharray:6 5} .ts-poss{fill:#7B5CC4;pointer-events:none} .ts-barre{fill:#D9541E;pointer-events:none} .ts-signe{min-width:34px;font-weight:800} .ts-cote{flex:1 1 240px;min-width:0} .ts-saisie{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:16px} .ts-saisie input{width:56px;font-size:18px;text-align:center;border:2px solid var(--border2);border-radius:8px;padding:4px} .ts-hist{margin-top:8px;font-size:13px;color:var(--text2);display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto} /* la machine à nombres */ .mq-zone{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:center;margin:8px 0} .mq-machine{display:flex;align-items:center;gap:6px} .mq-boite{display:flex;flex-direction:column;align-items:center;justify-content:center;width:90px;height:90px;border-radius:18px;background:linear-gradient(160deg,#5D6B80,#3B4A63);color:#fff;font-size:30px} .mq-boite b{font-size:22px} .mq-ent{font-size:26px;color:var(--text3)} .mq-ec{color:#7B5CC4;font-weight:700} .mq-graphe{flex:0 1 280px} .mq-graphe svg{width:100%;height:auto;background:var(--bg);border:1px solid var(--border);border-radius:10px} .mq-t{border-collapse:collapse;min-width:220px} .mq-t th,.mq-t td{border:1px solid var(--border);padding:6px 12px;text-align:center} .mq-t th{background:var(--bg2);font-size:13px} .mq-saisie{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:10px} .mq-saisie .exo-in{width:110px;font-size:18px;text-align:center} /* l'équipe */ .eq-pas{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#7B5CC4;border:1px solid #7B5CC455;border-radius:10px;padding:1px 7px;white-space:nowrap} .eq-pas.moi{color:var(--teal);border-color:var(--teal-l)} .eq-liste{display:flex;flex-direction:column;gap:6px} .eq-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--border);border-radius:var(--r);padding:8px 10px} .eq-av{width:32px;height:32px;border-radius:50%;background:var(--teal-l);color:var(--teal);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0} .eq-t{flex:1;min-width:180px;display:flex;flex-direction:column} .eq-t small{color:var(--text2);font-size:12px} .eq-conf{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--text2)} .eq-inv{display:flex;gap:6px;flex-wrap:wrap} .eq-inv input{flex:1;min-width:160px} .ask-cases{display:flex;flex-direction:column;gap:6px;border:1px solid var(--border);border-radius:var(--r);padding:8px 10px} .fg .ask-case{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px;color:var(--text);margin:0;text-transform:none;letter-spacing:0;cursor:pointer} .fg .ask-case input{width:auto;margin:0;flex:none} .wb-menu-i.info{color:var(--text3);cursor:default;font-size:12.5px} /* le tracé : la lettre (ou le motif) en cause */ .tcr-faute{fill:#7B5CC41a;stroke:#7B5CC4;stroke-width:22;stroke-dasharray:60 40} /* un élève dans deux espaces */ .el-espaces{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px} .el-esp{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;border:2px solid var(--border2);background:var(--bg);color:var(--text2);font:inherit;font-weight:600;font-size:15px;cursor:pointer} .el-esp.ici{border-color:var(--teal);background:var(--teal-l);color:var(--teal);cursor:default} .ac-code-lia{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:8px 0;padding:10px 14px;border:2px dashed #7B5CC4;border-radius:var(--r)} .ac-code-lia b{font-size:24px;letter-spacing:3px;font-family:ui-monospace,monospace;color:#7B5CC4} .ac-code-lia span,.ac-code-lia small{font-size:12px;color:var(--text2)} /* les outils */ /* lecture ligne par ligne, karaoké */ .lg-boite,.ka-boite{position:relative;max-height:70vh;overflow:auto;border-radius:var(--r)} .lg-boite:fullscreen,.ka-boite:fullscreen{max-height:none;background:#fff;padding:4vh 5vw} .lg-masque{position:absolute;left:0;right:0;background:rgba(255,255,255,.93);pointer-events:none;transition:top .15s,height .15s} .lg-masque.haut{top:0} .lg-masque.bas{bottom:0} .lg-bande{position:absolute;left:0;right:0;background:rgba(255,205,0,.28);border-left:5px solid #7B5CC4;pointer-events:none;mix-blend-mode:multiply;transition:top .15s,height .15s} .syl-res.lg{outline:none} .lg-nav{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap} .lg-pos{flex:1;text-align:center;font-size:13px;color:var(--text2)} .ka-barre{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} .syl-res.ka .syl-mot{border-radius:6px;transition:background .1s} .syl-res.ka .syl-mot.ka-lu{opacity:.6} .syl-res.ka .syl-mot.ka-on{background:#ffe27a;box-shadow:0 3px 0 #7B5CC4;opacity:1} /* lecteur de nombres */ /* l'horloge, les fractions, la conversion, la table, le boulier, le tirage, les dés, b d p q, les groupes de sens, la copie */ .hr-svg{touch-action:none;cursor:grab} .hr-n{font-size:26px;font-weight:800;fill:#1b2436} .hr-m{font-size:15px;font-weight:700;fill:#2563EB} .hr-res{font-size:20px;text-align:center} .hr-mots{color:var(--text2)} .fx-z{background:var(--bg);border-radius:16px;padding:12px} .fx-z:fullscreen{display:flex;flex-direction:column;justify-content:center;padding:30px} .fx-l{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center} .fx-l.barre{flex-direction:column} .fx-b{display:flex;flex-direction:column;align-items:center;gap:8px} .fx-r{display:flex;align-items:center;gap:8px} .fx-d{font-size:24px;min-width:30px;text-align:center} .fx-svg.disque{width:min(260px,70vw)} .fx-svg.barre{width:min(620px,88vw)} .fx-frac{display:inline-flex;flex-direction:column;align-items:center;font-size:40px;font-weight:800;line-height:1.05} .fx-num{border-bottom:4px solid #334155;padding:0 10px} .fx-cmp{font-size:60px;font-weight:800;color:#7B5CC4} .cv-def{overflow-x:auto} .cv-tab{border-collapse:collapse;margin:0 auto;font-size:22px} .cv-tab th,.cv-tab td{border:1.5px solid var(--border2);min-width:44px;height:56px;text-align:center;position:relative;padding:0 6px} .cv-tab th{font-size:17px;background:var(--bg2)} .cv-tab th.v,.cv-tab td.v{background:#F3EEFC} .cv-tab th.de{box-shadow:inset 0 -4px 0 #0E7C70} .cv-0{color:#7B5CC4;border-bottom:3px dotted #7B5CC4;font-weight:800} .cv-virg{position:absolute;right:-6px;bottom:2px;font-size:34px;font-weight:900;color:#D9541E;z-index:1} .tm-z{background:var(--bg);border-radius:16px;padding:12px} .tm-l{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:flex-start} .tm-tab{border-collapse:collapse;font-size:18px} .tm-tab th,.tm-tab td{width:44px;height:40px;text-align:center;border:1.5px solid var(--border2)} .tm-tab th{background:var(--bg2);font-weight:800} .tm-tab th.on{background:#E6F4F1} .tm-tab td{cursor:pointer} .tm-tab td.lig{background:#F3EEFC} .tm-tab td.sel{background:#7B5CC4;color:#fff;font-weight:800} .tm-tab td.sym{outline:3px dashed #7B5CC4;outline-offset:-3px} .tm-tab td.car{font-weight:800;text-decoration:underline} .tm-dots{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:360px} .tm-dots svg{width:100%} .bo-svg{width:100%;height:auto;touch-action:manipulation} .ti-z{min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--bg);border-radius:16px;padding:14px} .ti-nom{font-size:56px;font-weight:800;color:#0E7C70;text-align:center} .ti-nom.vide{font-size:22px;color:var(--text3);font-weight:600} .ti-nom.roule{color:var(--text3)} .ti-gr{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .ti-g{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border:2px solid var(--border2);border-radius:14px;min-width:140px;font-size:19px} .ti-g b{color:#7B5CC4} .dv-des{display:flex;gap:14px;justify-content:center} .dv-des.roule svg{transform:rotate(12deg)} .dv-n{font-size:38px;font-weight:800;fill:#1b2436} .dv-tab{width:100%;max-width:720px} .dv-barres{display:flex;gap:4px;align-items:flex-end;justify-content:center;overflow-x:auto;padding-top:20px} .dv-b{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:26px} .dv-bar{width:22px;background:#0E7C70;border-radius:4px 4px 0 0;min-height:2px} .dv-c{font-size:13px;color:var(--text2)} .dv-b b{font-size:15px} .bq-formes .bq-b{text-decoration:underline solid 3px;text-underline-offset:5px} .bq-formes .bq-d{text-decoration:underline dashed 3px;text-underline-offset:5px} .bq-formes .bq-p{text-decoration:underline dotted 4px;text-underline-offset:5px} .bq-formes .bq-q{text-decoration:underline double 3px;text-underline-offset:5px} .bq-leg{font-size:18px} .bq-leg span{font-size:24px} .bq-leg .bq-b{text-decoration:underline solid 3px} .bq-leg .bq-d{text-decoration:underline dashed 3px} .bq-leg .bq-p{text-decoration:underline dotted 4px} .bq-leg .bq-q{text-decoration:underline double 3px} .gs-res .gs-g{padding:2px 6px;border-radius:8px} .gs-res div.gs-g{margin:4px 0} .gs-g.g0{color:#0B5F56} .gs-g.g1{color:#5B3FA8;background:rgba(123,92,196,.07)} .gs-barre{color:#D9541E;font-weight:900} .gs-m{cursor:pointer} .gs-m:hover{text-decoration:underline} .cp-boite{background:var(--bg);border-radius:16px;padding:16px;outline:none} .cp-boite:fullscreen{display:flex;align-items:center;justify-content:center;padding:40px} .cp-m.fait{color:var(--text)} .cp-m.ici{background:#FFF3C4;box-shadow:0 0 0 3px #E5A800;border-radius:6px;font-weight:700} .cp-m.apres{color:var(--text3);opacity:.45} .cp-m.cache{color:var(--text3);letter-spacing:.05em} .fx-choix{flex-wrap:wrap;gap:18px;justify-content:center;margin-bottom:12px} .fx-pas{display:flex;flex-direction:column;gap:6px} .fx-btns{display:flex;flex-wrap:wrap;gap:6px} .fx-cartes{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .fx-c{border:2px solid var(--border);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:120px;background:var(--bg3)} .fx-c.cache{border-style:dashed} .fx-c-t{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--text2);font-size:14px} .fx-oeil{padding:2px 6px} .fx-q{flex:1;font-size:48px;font-weight:800;color:#7B5CC4;background:none;border:none;cursor:pointer} .fx-unites{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center} .fx-unites.col{flex-direction:column;align-items:stretch} .fx-mini{width:100%;max-width:150px;height:auto} .fx-mini.barre{max-width:560px;align-self:center} .fx-dg-n{font-size:20px;font-weight:700;fill:var(--text)} .fx-dg-p{font-size:18px;font-weight:800;fill:#7B5CC4} .fx-ecr{font-size:26px;text-align:center;margin:auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px} .fx-somme{font-size:20px;gap:4px} .fx-mf{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1;vertical-align:middle;font-weight:700} .fx-mf span:first-child{border-bottom:2.5px solid currentColor;padding:0 4px} .fx-eg{align-items:center} .fx-eg .fx-mf{font-size:34px} .fx-fl{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--text2);font-size:15px;gap:4px} .fx-fl .ti{font-size:30px} .fx-btns .btn.on{border:2px solid #7B5CC4;background:#F3EEFC;color:#5B3FA8;font-weight:800} .fx-ch{display:inline-block;padding:2px 4px;margin:0 2px} @media(min-width:760px){.fx-c[data-c=droite],.fx-c[data-c=barre]{grid-column:span 2}} .fx-calc{font-size:26px;margin-top:10px} .fx-chaine{text-align:center;font-size:22px;margin-top:8px;color:var(--text2)} .fx-ch.ici{color:#7B5CC4;outline:3px dashed #7B5CC4;outline-offset:3px;border-radius:6px} /* les listes de réglages des outils : toutes pareilles, assez grandes pour le doigt */ .syl select{font:inherit;font-size:14px;padding:6px 8px;min-height:34px;border:1px solid var(--border2);border-radius:8px;background:var(--bg);color:var(--text);max-width:100%} @media(max-width:520px){.syl .nb-haut{flex-wrap:wrap} .syl .nb-in{font-size:18px;min-width:0;width:100%;flex-basis:100%} .cv-tab{font-size:17px} .cv-tab th,.cv-tab td{min-width:30px;height:46px;padding:0 3px} .cv-tab th{font-size:14px} .cv-virg{font-size:28px}} /* les fractions : l'exercice et les défis */ .fra-qs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px} .fra-qs.un{grid-template-columns:minmax(0,640px);justify-content:center} .fra-q{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center} .fra-cons{font-size:18px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center} .fra-cons .fx-mf{font-size:17px} .fra-figs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;width:100%} .fra-fig{height:auto} .fra-fig.disque{width:min(170px,40vw)} .fra-fig.barre{width:100%;max-width:420px} .fra-fig.grille{width:100%} .fra-fig.droite{width:100%;max-width:560px} .fra-dg-n{font-size:20px;font-weight:700;fill:var(--text)} .fra-in{display:inline-flex;flex-direction:column;align-items:center;gap:3px;vertical-align:middle} .fra-barre{display:block;width:100%;min-width:44px;height:3px;background:var(--text);border-radius:2px} .fra-c{text-align:center;font-size:20px;font-weight:700} .fra-ligne{font-size:26px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap} .fra-ligne .fx-mf{font-size:26px} .fra-mots{font-size:22px;font-weight:600} .fra-signe{min-width:36px;font-weight:800;color:#7B5CC4;border-bottom:3px dotted #7B5CC4;text-align:center} .fra-signes{display:flex;gap:8px} .fra-signes .btn{font-size:22px;min-width:56px;justify-content:center;font-weight:800} .fra-signes .btn.on{border:2px solid #7B5CC4;background:#F3EEFC;color:#5B3FA8} .fra-aide{font-size:13px;color:var(--text2)} .fra-corr{color:#7B5CC4;font-weight:700;display:flex;align-items:center;gap:6px} .fra-corr .fx-mf{font-size:18px} .fra-groupes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} .fra-gr{border:2px dashed var(--border2);border-radius:10px;padding:2px 6px;color:#0E7C70;letter-spacing:2px;font-size:15px} .fra-score{font-weight:700;color:var(--text2)} .fra-rep{display:flex;justify-content:center} /* l'esthétique des nouveaux outils (23/10/2026) : une scène commune, des résultats en étiquette */ #hr-z,#bo-z,#dv-z,#cv-z,.tm-z,.fx-z,.ti-z,#bq-res,#gs-res,.cp-boite{background:var(--bg);border:1px solid var(--border);border-radius:20px;box-shadow:0 2px 12px rgba(27,36,54,.06)} #hr-z,#bo-z,#dv-z,#cv-z{padding:20px 16px} .hr-digi{display:inline-block;background:#1b2436;color:#fff;border-radius:12px;padding:3px 14px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em;box-shadow:0 2px 0 rgba(0,0,0,.15)} .hr-mots-l{font-size:1.05em;color:var(--text);font-weight:600} .hr-res{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px} .hr-n{font-size:27px;font-weight:800;fill:#1b2436} .hr-m{font-size:14px;font-weight:800;fill:#2563EB} .bo-cpt{font-size:20px;font-weight:800;fill:#fff} .dv-des svg{filter:none;transition:transform .12s} .dv-des.roule svg{transform:rotate(14deg) scale(.96)} .dv-barres{border-bottom:2px solid var(--border2);padding-bottom:0;width:fit-content;max-width:100%;margin:0 auto} .dv-bar{width:24px;background:linear-gradient(#22A694,#0E7C70);border-radius:6px 6px 0 0} .dv-b b{margin-top:4px} .ti-ticket{width:100%;max-width:520px;border-radius:18px;padding:22px 16px;background:linear-gradient(135deg,var(--teal-l),var(--bg) 70%);border:2px dashed #0E7C70;text-align:center} .ti-nom{font-size:60px;text-shadow:0 3px 0 rgba(14,124,112,.15)} .ti-suivi{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center} .ti-puce{padding:3px 10px;border-radius:999px;background:var(--bg2);border:1px solid var(--border);font-size:14px} .ti-puce.der{background:#0E7C70;color:#fff;border-color:#0E7C70;font-weight:700} .ti-cpt{font-size:13px;color:var(--text2);font-weight:700;margin:0 4px} .ti-g{background:var(--bg3);box-shadow:0 1px 4px rgba(27,36,54,.06)} .tm-tab{border-collapse:separate;border-spacing:3px} .tm-tab th,.tm-tab td{border:none;border-radius:8px;background:var(--bg3)} .tm-tab th{background:var(--teal-l);color:var(--teal-d)} .tm-tab th.on{background:#0E7C70;color:#fff} .tm-tab tr:first-child th:first-child{background:#1b2436;color:#fff} .tm-tab td:hover{background:var(--bg2)} .tm-tab td.lig{background:#EEE8FB} .tm-tab td.sel{background:#7B5CC4;box-shadow:0 2px 6px rgba(123,92,196,.4)} .cv-tab{border-collapse:separate;border-spacing:0;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1.5px var(--border2)} .cv-tab th{background:var(--teal-l);color:var(--teal-d)} .cv-tab th.v,.cv-tab td.v{background:#EEE8FB} .cv-tab th.v{color:#5B3FA8} .cv-tab td b{color:#0E7C70;font-size:1.1em} .gs-res div.gs-g{padding:4px 12px;border-left:5px solid #0E7C70;background:var(--teal-l);border-radius:0 10px 10px 0;margin:6px 0} .gs-res div.gs-g.g1{border-left:5px dashed #7B5CC4;background:#F1ECFC} .lg-pos{display:inline-flex;align-items:center;gap:8px} .cp-barre{display:inline-block;width:110px;height:8px;border-radius:99px;background:var(--bg2);overflow:hidden} .cp-barre i{display:block;height:100%;background:#0E7C70;border-radius:99px;transition:width .2s} /* les rubriques des outils, « Lire un texte » */ .ou-rub{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--text2);margin:18px 0 8px;text-transform:none} .ou-rub:first-child{margin-top:4px} .ou-rub .ti{color:#0E7C70;font-size:19px} .ou-rub.el{font-size:15px;margin:12px 0 6px} #ou-lire-mb .ou-lire-l{margin-top:6px;padding:8px 10px} .ou-lire-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;padding:4px 6px;border-radius:8px;background:var(--bg3)} .ou-lire-l>b{min-width:120px} .ou-lire-l .ou-qui{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto} .ou-lire{margin-bottom:8px} @media(max-width:700px){.ou-lire-b{grid-column:auto}} /* la fluence */ .flu-pret,.flu-fin{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:28px 16px} .flu-ico{font-size:54px;color:#0E7C70} .flu-p1{font-size:22px;font-weight:700} .flu-p2{font-size:15px;color:var(--text2);max-width:560px} .flu-go{font-size:20px;min-height:56px;padding:10px 26px} .flu-der{font-size:15px;color:var(--teal-d);background:var(--teal-l);border-radius:10px;padding:6px 12px} .flu-lec{padding:14px 18px} .flu-barre{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap} .flu-temps{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;color:#1b2436;background:var(--bg2);border-radius:12px;padding:2px 14px} .flu-jauge{flex:1;min-width:120px;height:10px;border-radius:99px;background:var(--bg2);overflow:hidden} .flu-jauge i{display:block;height:100%;width:100%;background:#0E7C70;border-radius:99px} .flu-rec{flex:1;color:#D9541E;font-weight:700} .flu-barre .btn{margin-left:auto} .flu-texte{text-align:left;line-height:1.9;font-family:var(--police-lecture, inherit)} .flu-texte p{margin:0 0 .6em} .flu-texte.t-moyen{font-size:20px} .flu-texte.t-grand{font-size:27px;line-height:2} .flu-texte.t-tresgrand{font-size:36px;line-height:2.1} .flu-texte.marque .flu-m{cursor:pointer;border-radius:5px;padding:0 2px} .flu-texte.marque .flu-m:hover{background:var(--bg2)} .flu-m.err{color:#D9541E;text-decoration:line-through 3px #D9541E;background:#FCE9DC} .flu-m.fin{outline:3px solid #7B5CC4;outline-offset:1px;background:#F1ECFC;font-weight:800} .flu-m.fin::after{content:' ⏹';color:#7B5CC4;font-size:.7em} .flu-m.apres{color:var(--text3)} .flu-s{color:var(--text3)} .flu-modes{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0} .flu-modes .btn.on{border:2px solid #7B5CC4;background:#F3EEFC;color:#5B3FA8;font-weight:700} .flu-ex{font-size:12px;padding:0 4px;border-radius:4px} .flu-ex.err{color:#D9541E;text-decoration:line-through 2px;background:#FCE9DC} .flu-ex.fin{outline:2px solid #7B5CC4;background:#F1ECFC} .flu-calc{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:10px 0;font-size:14px;color:var(--text2)} .flu-mclm{font-size:16px;color:var(--text)} .flu-mclm b{font-size:26px;color:#0E7C70} .flu-obj{color:#5B3FA8;font-weight:700} .flu-ec{display:flex;flex-direction:column;gap:6px} .flu-fait{color:var(--teal-d);font-weight:700;font-size:13px} .flu-att{color:var(--violet);font-weight:700;font-size:13px} .flu-d-haut{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 10px} .flu-stop{font-size:20px;font-weight:800;color:#D9541E} .flu-els{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;max-height:60vh;overflow:auto} .flu-d #flu-t-direct{max-height:56vh;overflow:auto;border:1px solid var(--border);border-radius:12px;padding:10px 14px} .flu-suivi{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .flu-courbe{width:100%;max-width:560px;height:auto} .flu-c-v{font-size:12px;font-weight:700;fill:var(--text)} .flu-c-rep{font-size:12px;font-weight:700;fill:#7B5CC4} .flu-suivi-l{display:grid;gap:4px;font-size:13px;min-width:220px} .flu-suivi-l div{display:flex;gap:8px;flex-wrap:wrap} .flu-suivi-l span{color:var(--text2)} /* la demi-droite graduée */ .dg-z{display:flex;flex-direction:column;gap:10px;background:var(--bg);border-radius:16px;padding:12px} .dg-z:fullscreen{justify-content:center;padding:30px} .dg-q{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:20px} .dg-a{color:#7B5CC4} .dg-nb{font-size:26px} .dg-in{width:120px;font-size:22px;font-weight:700;text-align:center;border:2px solid var(--border2);border-radius:10px;padding:4px} .dg-svg{width:100%;height:auto;cursor:crosshair} .dg-t{font-size:22px;font-weight:600;fill:var(--text2)} .dg-t.g{font-weight:800;fill:var(--text)} .dg-p{font-size:30px;font-weight:800} .dg-pn{font-size:22px;font-weight:800} .dg-res{font-size:19px;text-align:center;min-height:26px} .dg-aide{font-size:15px;color:var(--text2)} /* la monnaie */ .eu-z{display:flex;flex-direction:column;gap:12px;background:var(--bg);border-radius:16px;padding:12px} .eu-z:fullscreen{justify-content:center;padding:30px} .eu-objet{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:19px} .eu-objet svg{vertical-align:middle} .eu-emo{font-size:46px;line-height:1} .eu-tapis{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:110px;padding:14px;border-radius:18px;background:#E6F0E6;border:3px dashed #7C9A7C} .eu-vide{color:var(--text3);font-size:17px} .eu-res{font-size:22px;text-align:center} .eu-res b{font-size:26px} .eu-ok{color:#0E7C70;font-weight:800} .eu-ko{color:#B4431A;font-weight:700} .eu-chemin{margin-top:8px;font-size:18px;line-height:2.2} .eu-pas svg{vertical-align:middle} .eu-palette{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center} .eu-p{background:none;border:0;padding:2px;cursor:pointer;border-radius:12px} .eu-p:hover{background:rgba(123,92,196,.1)} .eu-v{font-weight:800;fill:#1b2436} .eu-vb{font-size:34px;fill:#fff;stroke:#1b2436;stroke-width:.6;stroke-opacity:.5} .eu-pe{font-size:16px;font-weight:800;fill:#fff} .eu-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center} /* la bande numérique et le minuteur visuel */ .bd-regl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px} .bd-regl .btn.on{border-color:#7B5CC4;box-shadow:inset 0 0 0 2px #7B5CC4;font-weight:700} .bd-lab{font-weight:700;color:var(--text2)} .bd-sep{width:14px} .bd-z{background:var(--bg);border-radius:16px;padding:10px 6px} .bd-z:fullscreen,.mn-z:fullscreen{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px;background:var(--bg)} .bd-defile{overflow-x:auto;padding-bottom:8px} .bd-bande{position:relative;padding-top:92px;margin:0 auto} .bd-arcs{position:absolute;top:0;left:0} .bd-arc-t{font-size:17px;font-weight:800;fill:#7B5CC4} .bd-ligne{display:flex;gap:6px} .bd-tab{display:grid;grid-template-columns:repeat(10,minmax(44px,1fr));gap:6px;max-width:760px;margin:36px auto 0} .bd-c{position:relative;flex:none;width:58px;height:62px;border:2px solid var(--border2);border-radius:10px;background:var(--bg2);font:inherit;font-size:22px;font-weight:700;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} .bd-tab .bd-c{width:auto;height:52px;font-size:19px} .bd-c.dz{border:4px solid #0E7C70;background:#E6F4F1;color:#0B5F56} .bd-c.cq{border-bottom:5px double #0E7C70} .bd-c.zero{border:4px solid #334155} .bd-c.sel{box-shadow:0 0 0 4px #7B5CC4;z-index:1} .bd-c.cache{background:#F3EEFC;color:#7B5CC4;border-style:dashed} .bd-pion{position:absolute;top:-38px;left:50%;transform:translateX(-50%);font-size:30px;line-height:1} .bd-tab .bd-pion{top:-30px;font-size:24px} .bd-info{margin-top:10px;font-size:18px;color:var(--text2);text-align:center} .mn-z{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px} .mn-svg{width:min(70vmin,420px);height:auto} .mn-txt{font-size:42px;font-weight:800;fill:#1b2436} .mn-fin{font-size:46px;font-weight:800;fill:#7B5CC4} .mn-svg.fini{animation:mnFin 1s ease-in-out 3} @keyframes mnFin{50%{transform:scale(1.04)}} @media (prefers-reduced-motion:reduce){.mn-svg.fini{animation:none}} .mn-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .nb-haut{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px} .nb-in{flex:1;min-width:220px;font:inherit;font-size:24px;font-weight:600;padding:8px 12px;border:1.5px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text)} .nb-boutons{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px} .nb-orth{margin-left:auto} .nb-orth select{font:inherit;font-size:13px;padding:4px 6px;border:1px solid var(--border2);border-radius:6px;background:var(--bg);color:var(--text)} .nb-res{display:flex;flex-direction:column;gap:12px} .nb-grand{font-size:44px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)} .nb-lettres{font-size:24px;color:#0E7C70;font-weight:600} .nb-aussi{font-size:15px;color:var(--text2)} .nb-tab-z{overflow-x:auto} .nb-tab{border-collapse:collapse;font-variant-numeric:tabular-nums} .nb-tab th,.nb-tab td{border:1.5px solid var(--border2);padding:4px 8px;text-align:center;min-width:34px} .nb-tab th{font-size:12px;color:var(--text2);font-weight:700} .nb-tab .nb-ch td{font-size:26px;font-weight:700;height:44px;color:#1b2436} .nb-tab .nbk0{background:#e3f3f0} .nb-tab .nbk1{background:#fdece4} .nb-tab .nbk2{background:#eee8fa} .nb-tab .nbk3{background:#e6ecf6} .nb-tab .nbkd{background:#eef2fb} .nb-tab .nbv-s{border:none;background:none;font-weight:700;min-width:12px;padding:0 2px} .nb-tab .nbkd[title]{font-size:10.5px} .nb-dec{font-size:17px;display:flex;flex-direction:column;gap:4px;color:var(--text)} /* conjugueur */ .cjv-temps{margin-bottom:8px} .cjv-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin:6px 0 12px} .cjv-r{color:#0E7C70;font-weight:600} .cjv-t{color:#D9541E;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} .cjv-a{color:#7B5CC4;font-weight:700;border-bottom:2px dotted #7B5CC4} .cjv-x{color:#1D4ED8;font-weight:700;font-style:italic} .cjv-g{font-size:14px;color:var(--text2);margin-bottom:10px} .cjv-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .cjv-carte{border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;background:#fff;color:#1b2436} .cjv-tt{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:14px;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em} .cjv-l{font-size:21px;line-height:1.7} .cjv-p{color:#5b6576} .cjv-carte .cjv-r{color:#0E7C70} .cjv-non{font-size:14px;color:#D9541E;padding:10px 0} .ou-carte-b{display:flex;flex-direction:column;gap:6px} .ou-el{font-size:12.5px;color:var(--text2);padding-left:4px} .el-jx-jeux{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;max-height:40vh;overflow:auto} .el-jx-j{display:flex;align-items:center;gap:8px;text-align:left;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font:inherit;font-size:13.5px;cursor:pointer} .el-jx-j i{font-size:20px;color:var(--fam-log)} .el-jx-j small{display:block;color:var(--text3);font-size:11.5px} .el-jx-j.on{border:2px solid var(--fam-log);background:var(--bg2)} .el-jx-nivs{display:flex;flex-wrap:wrap;gap:6px} .el-jx-n{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:6px 8px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);font:inherit;cursor:pointer} .el-jx-n b{font-size:18px} .el-jx-n small{font-size:11px;color:var(--text3)} .el-jx-n.large{min-width:150px;font-weight:600} .el-jx-n.on{border:2px solid #0E7C70;background:#e3f3f0;color:#0b4f47} .jx-qui{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-left:auto} .jx-qui .ou-qui-l{text-align:right} .ou-qui{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-left:4px} .ou-qui-l{font-size:12.5px;color:#0E7C70} .ou-qui-mo{max-width:620px;width:94%;max-height:86vh;overflow:auto} .ou-qui-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 12px;margin:6px 0 12px} .ou-qui-c{display:flex;align-items:center;gap:8px;padding:5px 2px;cursor:pointer;font-size:14px} .ou-qui-c input{width:18px;height:18px} .ou-qui-c small{color:var(--text3)} .el-outil{max-width:1100px;width:96%;max-height:92vh;overflow:auto} .lec-barre{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .ocr-zone{display:flex;justify-content:center;background:var(--bg2);border-radius:var(--r);padding:6px} .ocr-zone canvas{max-width:100%;touch-action:none;cursor:crosshair;border-radius:6px} .ocr-barre{height:10px;border-radius:5px;background:var(--bg2);overflow:hidden;margin:8px 0} .ocr-barre span{display:block;height:100%;background:var(--teal);transition:width .3s} .ou-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} .ou-carte{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font:inherit;cursor:pointer} .ou-carte i{font-size:26px;color:var(--teal)} .ou-carte span{font-size:13px;color:var(--text2)} .syl-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} .syl-tete h3{margin:0;font-size:17px} .syl-act{margin-left:auto;display:flex;gap:6px} .syl-corps{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:14px} @media(max-width:900px){.syl-corps{grid-template-columns:1fr}} .syl-g textarea{width:100%;min-height:140px;font:inherit;font-size:15px;padding:10px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text)} .syl-reg{display:flex;flex-direction:column;gap:8px;margin-top:8px;font-size:13px} .syl-l{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center} .syl-l>span{font-weight:600;color:var(--text2);width:100%} .syl-l select{font:inherit;font-size:13px;padding:4px 6px;border:1px solid var(--border2);border-radius:6px;background:var(--bg);color:var(--text)} .syl-ch{display:flex;align-items:center;gap:5px;cursor:pointer} .syl-cur{display:flex;align-items:center;gap:6px} .syl-son{font:inherit;font-size:13px;font-weight:700;padding:3px 9px;border:1px solid var(--border2);border-radius:14px;background:var(--bg);color:var(--text);cursor:pointer} .syl-son.on{background:#7B5CC4;border-color:#7B5CC4;color:#fff} .syl-aide{font-size:12px;color:var(--text3);margin:2px 0 0} .syl-res{min-height:300px;padding:22px 26px;border:1px solid var(--border);border-radius:var(--r);background:#fff;color:#1b2436;overflow-wrap:anywhere} .syl-res.lignes{background-image:linear-gradient(to bottom,transparent 50%,#eef2f8 50%);background-origin:content-box;background-position:0 0} .syl-res:fullscreen{padding:5vh 6vw;overflow:auto} .syl-vide{color:#8a94a6;font-size:16px} .syl-mot{cursor:pointer;white-space:nowrap} .sy.s0{color:#0E7C70} .sy.s1{color:#D9541E} .pal-c .sy.s0,.pal-c .syl-mot.w0{color:#C62828} .pal-c .sy.s1,.pal-c .syl-mot.w1{color:#1D4ED8} .syl-mot.w0{color:#0E7C70} .syl-mot.w1{color:#D9541E} .lignes-t .syl-mot{color:#1b2436} .lignes-t .syl-mot.l1{color:#1D4ED8} .syl-mot.li{position:relative} .syl-mot.li::after{content:'';position:absolute;left:calc(100% - .08em);width:calc(var(--sp, .55em) + .16em);bottom:-.1em;height:.45em;border-bottom:2.5px solid #7B5CC4;border-radius:0 0 50% 50% / 0 0 100% 100%;pointer-events:none} .sy.arc{border-bottom:1.5px solid currentColor;border-radius:0 0 50% 50% / 0 0 40% 40%;padding:0 .03em .04em;margin:0 .01em} .sy:not(.s0):not(.s1).arc{border-bottom-color:#7B5CC4} .mu{color:#9aa3af !important} .so{background:#7B5CC42e;font-weight:700;border-radius:4px} .bq-b{color:#2F7DD1;font-weight:800} .bq-d{color:#D9541E;font-weight:800} .bq-p{color:#7B5CC4;font-weight:800} .bq-q{color:#0E7C70;font-weight:800} @media print{body.syl-imprime *{visibility:hidden} body.syl-imprime #syl-res,body.syl-imprime #syl-res *{visibility:visible} body.syl-imprime #syl-res{position:absolute;left:0;top:0;width:100%;border:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}} /* la course des chevaux */ .ch-barres{max-width:520px;margin:10px auto 0} .ch-barres svg{width:100%;height:auto} .ch-b{fill:#2F7DD1} .ch-t{fill:none;stroke:#7B5CC4;stroke-width:2;stroke-dasharray:4 3} .ch-leg{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:12.5px;color:var(--text2);margin-top:2px} .ch-leg b.b{color:#2F7DD1} .ch-leg b.t{color:#7B5CC4} .ch-leg b.g{color:var(--teal)} .ch-leg b.m{color:#7B5CC4} .ch-grille{border-collapse:collapse;margin:12px auto 4px;font-size:14px} .ch-grille th,.ch-grille td{border:1px solid var(--border);width:38px;height:32px;text-align:center;position:relative} .ch-grille th{background:var(--bg2);font-size:12px;font-weight:600} .ch-grille td.g{background:var(--teal-l);font-weight:800} .ch-grille td.m{outline:2.5px dashed #7B5CC4;outline-offset:-3px;font-weight:800} .ch-grille td i{position:absolute;right:2px;top:0;font-style:normal;font-size:10px} .ch-grille td.g i{color:var(--teal)} .ch-grille td.m i{color:#7B5CC4} .ch-zone{display:flex;flex-direction:column;gap:4px;max-width:680px;margin:6px auto} .ch-l{display:flex;align-items:center;gap:8px} .ch-n{min-width:58px;height:34px;border-radius:8px;border:2px solid var(--border2);background:var(--bg);font-weight:800;font-size:15px;cursor:pointer;color:var(--text)} .ch-n:disabled{cursor:default} .ch-l.pris .ch-n{border-color:var(--fam-log);background:var(--fam-log-l)} .ch-piste{position:relative;flex:1;display:grid;grid-template-columns:repeat(10,1fr);gap:2px;height:30px} .ch-piste span{border-radius:4px;background:#E8F2D8;display:flex;align-items:center;justify-content:center;font-size:20px} .ch-piste span.ici{background:#CFE6B0} .ch-piste .ch-arr{background:none} .ch-piste .ch-dep{background:var(--bg2)} .ch-st{min-width:110px;font-size:12px;color:var(--text2);text-align:right} .ch-des{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:10px 0} .ch-des>b{font-size:20px} /* le robot cueilleur */ .ro-zone{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start} .ro-jardin{position:relative;flex:1 1 300px;max-width:440px;display:grid;border-radius:18px;overflow:hidden;background:#A9D99B;border:7px solid #B07A47;box-shadow:inset 0 0 0 2px #8A5A2B,0 0 0 2px #8A5A2B,0 8px 18px rgba(20,40,80,.18)} .ro-case{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;overflow:hidden;font-size:clamp(20px,5vw,34px); background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 60%),#C4EBB6} .ro-case.b{background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 60%),#B3E1A4} .ro-ico{width:82%;height:82%;display:block} .ro-pomme .ro-ico{width:66%;height:66%;animation:ro-pomme 2.4s ease-in-out infinite} @keyframes ro-pomme{50%{transform:translateY(-6%) rotate(-4deg)}} .ro-trace{position:absolute;width:24%;aspect-ratio:1;border-radius:50%;background:rgba(14,124,112,.45);box-shadow:0 0 0 3px rgba(255,255,255,.6)} .ro-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 3px rgba(0,0,0,.28))} .ro-pommes{float:right;font-weight:700;color:var(--text)} .ro-case.choc{background:#FFD3C2;outline:3px dashed var(--red);outline-offset:-3px} .ro-robot{position:absolute;display:flex;align-items:center;justify-content:center;transition:left .35s ease,top .35s ease;z-index:2} .ro-corps{position:relative;width:84%;height:84%;transition:transform .3s ease;display:flex;align-items:center;justify-content:center} .ro-nez{position:absolute;top:-22%;left:50%;transform:translateX(-50%);border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:13px solid #FF8066} .ro-yeux{display:flex;gap:18%;width:60%;justify-content:center;margin-top:-10%} .ro-yeux i{width:22%;aspect-ratio:1;background:#fff;border-radius:50%;box-shadow:inset 0 -3px 0 #1B2436} .ro-robot.content .ro-corps{animation:ro-saute .5s ease 2} .ro-robot.triste .ro-corps{filter:saturate(.4);animation:ro-choc .45s ease} @keyframes ro-choc{20%,60%{translate:-8% 0}40%,80%{translate:8% 0}} @keyframes ro-saute{50%{translate:0 -18%}} .ro-cote{flex:1 1 280px;min-width:0} .ro-lab{font-size:13px;color:var(--text2);margin-bottom:6px} .ro-prog{display:flex;flex-wrap:wrap;gap:6px;min-height:58px;padding:8px;border:2px dashed var(--border2);border-radius:14px;background:var(--bg)} .ro-vide{font-size:13px;color:var(--text3);align-self:center} .ro-c{position:relative;width:46px;height:46px;border:2px solid var(--teal);border-radius:10px;background:var(--teal-l);color:var(--text);font-size:24px;cursor:grab;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none} .ro-c small,.ro-x{position:absolute;bottom:-7px;right:-7px;background:var(--violet);color:#fff;border:none;border-radius:999px;font-family:inherit;font-size:11px;font-weight:700;line-height:16px;padding:0 5px;cursor:pointer} .ro-x.un{background:var(--bg);color:var(--violet);border:1.5px solid var(--violet)} .ro-c.tire{opacity:.35} .ro-c.avant::before,.ro-c.apres::after{content:'';position:absolute;top:-4px;bottom:-4px;width:4px;border-radius:2px;background:var(--violet)} .ro-c.avant::before{left:-6px} .ro-c.apres::after{right:-6px} .ro-prog.cible{border-color:var(--violet);background:var(--bg2)} .ro-p{touch-action:none} .ro-fantome{position:fixed;z-index:3000;pointer-events:none;transform:translate(-50%,-50%) scale(1.1);opacity:.92} .ro-c.rep{background:#FCE7B2;border-color:#C98B1C;color:#7A5208} .ro-c.fin{background:#FCE7B2;border:2px dashed #C98B1C;color:#7A5208;cursor:default} .ro-c.d1{box-shadow:inset 0 -5px 0 #F2C27B} .ro-c.d2{box-shadow:inset 0 -5px 0 #F2C27B, inset 0 5px 0 #F2C27B} .ro-p.rep span{color:#C98B1C} .ro-c.joue{background:var(--teal);color:var(--sur-teal);transform:scale(1.12);box-shadow:0 0 0 3px var(--teal-l)} .ro-astuce{font-size:12px;color:var(--text3);margin-top:4px} .ro-astuce.nouveau{font-size:13px;color:var(--text);background:var(--bg2);border:1.5px solid var(--teal);border-radius:var(--r);padding:8px 10px;margin:6px 0} .ro-astuce.nouveau i{color:var(--teal);margin-right:4px} .ro-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px} .ro-p{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:74px;border:none;border-radius:16px;background:var(--bg);box-shadow:0 5px 0 var(--border2);cursor:pointer;color:var(--text);font:inherit;padding:6px 2px} .ro-p span{font-size:32px;line-height:1.1} .ro-p small{font-size:11px;color:var(--text2);text-align:center;line-height:1.15} .ro-p:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--border2)} .ro-p.indice{box-shadow:0 0 0 3px var(--amber),0 5px 0 var(--border2);animation:ro-indice 1s ease infinite} @keyframes ro-indice{50%{transform:translateY(-3px)}} .ro-msg{margin-top:10px;padding:8px 12px;border-radius:12px;background:var(--amber-l);color:var(--amber);font-size:14px;font-weight:600} .ro-msg.ko{background:var(--red-l);color:var(--red);border:1px dashed var(--red)} .ro-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .ro-btns .btn{min-height:46px} .ro-go{flex:1;font-size:18px} .ro-outils{display:flex;flex-wrap:wrap;gap:6px} .ro-ed{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start} .ro-ed-grille{display:grid;flex:0 1 300px;width:300px;max-width:100%;border-radius:12px;overflow:hidden;border:2px solid var(--border2)} .ro-ed-case{border:none;border-right:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06);background:#CDEFC2;font-size:22px;cursor:pointer;min-height:0;min-width:0;padding:0;display:flex;align-items:center;justify-content:center} .ro-ed-case.b{background:#BDE5B0} .ro-ed-case:hover{outline:2px solid var(--teal);outline-offset:-2px} .ro-ed-robot{display:flex;flex-direction:column;align-items:center;line-height:1} .ro-ed-robot b{font-size:13px;color:#0A6158} .ro-ed-reg{flex:1 1 220px} .ro-ed-etat{margin-top:10px;padding:6px 10px;border-radius:10px;font-size:13.5px;font-weight:600} .ro-ed-etat.ok{background:var(--green-l);color:var(--green);border:1px solid var(--green)} .ro-ed-etat.ko{background:var(--red-l);color:var(--red);border:1px dashed var(--red)} .ro-tab{border-collapse:collapse;font-size:13px;width:100%} .ro-tab th,.ro-tab td{border-bottom:1px solid var(--border);padding:4px 6px;text-align:left} @media (prefers-reduced-motion: reduce){ .ro-robot,.ro-corps{transition:none!important} .ro-robot.content .ro-corps,.ro-p.indice{animation:none!important} } /* ══ L'allure des jeux (14/10/2026) ══ */ .exo-vue.ludique{background:radial-gradient(1200px 500px at 10% -10%, var(--teal-l), transparent 60%), radial-gradient(900px 500px at 110% 10%, var(--violet-l), transparent 55%), var(--bg2)} .exo-vue.ludique .exo-carte{border-radius:18px;box-shadow:0 6px 18px rgba(20,40,80,.08);border-color:transparent} .exo-vue.ludique .exo-consigne-bloc{border-radius:18px} .exo-vue.ludique.sobre{background:var(--bg2)} .exo-vue.ludique.sobre .exo-carte{border-radius:10px;box-shadow:none;border:1px solid var(--border)} .exo-vue.ludique.sobre .exo-consigne-bloc{border-radius:10px} .exo-vue.sobre .jq-res{font-size:17px} .exo-vue.sobre .ro-robot.content .ro-corps{animation:none} .mj-pion{text-shadow:0 2px 0 rgba(0,0,0,.18)} .mj-depart{text-align:left} .mj-depart h3{font-size:22px!important} .mj-mode{transition:transform .15s, box-shadow .15s} .mj-mode:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(20,40,80,.1)} .mj-mode i{font-size:40px!important;width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--teal-l)} .mj-mode.on i{background:var(--teal);color:var(--sur-teal)!important} .mj-bandeau{border:none!important;background:linear-gradient(90deg, var(--teal-l), var(--violet-l))!important;box-shadow:0 4px 12px rgba(20,40,80,.08)} .mj-score{box-shadow:0 2px 6px rgba(20,40,80,.06)} .mj-score.on{border:2px solid var(--teal)!important;transform:scale(1.06);transition:transform .2s} .mj-fin{position:relative;overflow:hidden} .mj-podium li:nth-child(1)::before{content:'🥇';margin-right:2px} .mj-podium li:nth-child(2)::before{content:'🥈';margin-right:2px} .mj-podium li:nth-child(3)::before{content:'🥉';margin-right:2px} .confettis{position:fixed;inset:0;pointer-events:none;z-index:4000;overflow:hidden} .confettis i{position:absolute;top:-12px;width:9px;height:14px;animation:conf-tombe linear forwards} @keyframes conf-tombe{to{top:105%;transform:rotate(720deg) translateX(40px)}} /* le dé */ .de3{display:inline-grid;grid-template-columns:repeat(3,1fr);gap:3px;width:52px;height:52px;padding:7px;border-radius:12px;background:linear-gradient(145deg,#fff,#e9edf3);box-shadow:0 4px 0 #c9d1dc,0 6px 12px rgba(0,0,0,.15);border:1px solid #d5dbe4} .de3 i{border-radius:50%} .de3 i.p{background:#1B2436} .de3.roule{animation:de-roule .35s linear infinite} @keyframes de-roule{25%{transform:rotate(12deg) translateY(-3px)}50%{transform:rotate(-8deg)}75%{transform:rotate(6deg) translateY(-2px)}} .oie-de{min-width:110px} /* jeu de l'oie : des cases en couleurs, comme un vrai plateau */ .oie-plateau{padding:8px;border-radius:16px;background:linear-gradient(160deg,var(--teal-l),var(--violet-l))} .oie-case{border:none!important;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);background:var(--bg);color:#1B2436} .oie-case .oie-n{color:#4F5B70} .oie-case:nth-child(4n+1){background:#FFF7E6} .oie-case:nth-child(4n+2){background:#EAF7F4} .oie-case:nth-child(4n+3){background:#EFEBFB} .oie-case:nth-child(4n){background:#E9F2FC} .oie-case.sp{background:#FFE7C2!important;outline:2px dashed var(--amber);outline-offset:-3px} .oie-case.depart,.oie-case.arrivee{background:var(--teal)!important;color:var(--sur-teal)} .oie-case.depart .oie-n,.oie-case.arrivee .oie-n{color:var(--sur-teal)} .oie-pions span{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;background:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);font-size:16px} /* morpion */ .mo-grille{padding:10px;border-radius:20px;background:linear-gradient(145deg,var(--teal-l),var(--violet-l));gap:10px} .mo-case{border:none!important;background:var(--bg)!important;box-shadow:0 4px 0 rgba(20,40,80,.12);transition:transform .12s} .mo-case:not(:disabled):hover{transform:translateY(-2px)} .mo-case.derniere span{display:inline-block;animation:pion-pose .45s cubic-bezier(.3,1.6,.5,1)} .mo-case.ligne{background:var(--green-l)!important;box-shadow:0 0 0 3px var(--green),0 4px 0 rgba(0,0,0,.1)} @keyframes pion-pose{from{transform:scale(.2) rotate(-30deg);opacity:.2}} /* course aux réponses : de gros boutons ronds */ .bz-btn{border-radius:24px!important;background:radial-gradient(circle at 50% 30%, var(--bg), var(--bg2))!important;box-shadow:0 6px 0 var(--c),0 10px 16px rgba(0,0,0,.12);transition:transform .08s, box-shadow .08s} .bz-btn:active:not(:disabled){transform:translateY(5px);box-shadow:0 1px 0 var(--c)} /* dominos : comme en vrai */ .do-dom{background:linear-gradient(160deg,#FFFDF6,#F3EEDF)!important;border:2px solid #3B3527!important;border-radius:10px!important;box-shadow:0 3px 0 #3B3527;color:#1B2436} .do-sep{background:#3B3527!important;width:3px!important} .do-dom.bout{box-shadow:0 0 0 3px var(--teal),0 3px 0 #3B3527} .do-dom.rate{background:var(--red-l)!important} /* loto : des cartons */ .lo-carton{border:none!important;background:var(--bg);box-shadow:0 4px 12px rgba(20,40,80,.1);padding:0!important;overflow:hidden} .lo-qui{margin:0!important;padding:8px 12px;background:linear-gradient(90deg,var(--teal-l),transparent)} .lo-grille{padding:10px} .lo-case{border-style:dashed!important} .lo-case.on{border-style:solid!important} .lo-case.on .lo-coche{animation:pion-pose .4s cubic-bezier(.3,1.6,.5,1);font-size:22px} .lo-tire{background:linear-gradient(90deg,var(--teal-l),var(--violet-l))!important;border:none!important} /* mot mystère : les lettres se retournent */ .mu-case{box-shadow:0 2px 0 rgba(0,0,0,.08)} .mu-rang.flip .mu-case{animation:mu-flip .5s ease both} @keyframes mu-flip{0%{transform:rotateX(90deg)}100%{transform:none}} /* le compte est bon */ .cb-cible b{background:#1B2436!important;color:#7CF2D8!important;border-color:#1B2436!important;font-family:ui-monospace,Consolas,monospace;letter-spacing:2px;box-shadow:inset 0 0 12px rgba(124,242,216,.25)} .cb-plaque{background:linear-gradient(160deg,var(--bg),var(--bg2))!important;box-shadow:0 4px 0 var(--border2)} .cb-plaque.sel{transform:translateY(-3px)} /* mémoire : le dos des cartes */ .exo-mem-carte:not(.visible){background:repeating-linear-gradient(45deg,var(--teal),var(--teal) 10px,var(--teal-d) 10px,var(--teal-d) 20px)!important;color:#fff!important} /* serpents et échelles */ .se-plateau{position:relative;width:min(100%, 1100px, calc((100vh - 230px) * 10 / var(--r, 5)));min-width:min(100%, 320px);margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(20,40,80,.12);border:3px solid #111;box-sizing:border-box} .se-grille{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr)} .se-case{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:3px 5px;min-width:0;box-sizing:border-box;border-top:3px solid #111;border-left:1px solid rgba(17,17,17,.18)} .se-case.monte{border-top-color:transparent} .se-case.vise{box-shadow:inset 0 0 0 3px var(--violet)} .se-sens{position:absolute;right:4px;bottom:3px;font-size:clamp(10px, 1.4vw, 16px);color:rgba(17,17,17,.35);z-index:1} .se-n small{font-weight:600;font-size:.8em} .se-case.c0{background:#FFF7E6} .se-case.c1{background:#EAF7F4} .se-case.arrivee{background:var(--teal)!important;color:var(--sur-teal)} .se-n{font-size:clamp(11px, 1.5vw, 17px);font-weight:700;color:#2E3748} .se-case.arrivee .se-n{color:var(--sur-teal)} .se-pions{display:flex;flex-wrap:wrap;gap:1px;position:relative;z-index:3} .se-pion{display:inline-flex;width:clamp(20px, 3vw, 34px);height:clamp(20px, 3vw, 34px);align-items:center;justify-content:center;background:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.25);color:var(--c);font-size:clamp(13px, 2vw, 21px)} .se-pion.saute{animation:pion-pose .5s cubic-bezier(.3,1.6,.5,1)} .se-dessin{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none} .se-ech line{stroke:#9A6B2F;stroke-width:.07;stroke-linecap:round} .se-ser .corps{fill:none;stroke-width:.2;stroke-linecap:round;opacity:.92} .se-ser .motif{fill:none;stroke:#fff;stroke-width:.05;stroke-dasharray:.06 .14;stroke-linecap:round;opacity:.8} .se-ser.s0 .corps,.se-ser.s0 .tete{stroke:#C2410C;fill:#C2410C} .se-ser.s1 .corps,.se-ser.s1 .tete{stroke:#5B47B8;fill:#5B47B8} .se-ser.s2 .corps,.se-ser.s2 .tete{stroke:#00775A;fill:#00775A} .se-ser .corps{fill:none!important} .se-ser .oeil{fill:#fff;stroke:none!important} .se-ser .tete{stroke:none!important} @media (prefers-reduced-motion: reduce){ .de3.roule,.mo-case.derniere span,.lo-case.on .lo-coche,.mu-rang.flip .mu-case,.se-pion.saute,.oie-de.roule{animation:none!important} } .mj-depart h3{margin:0 0 12px;font-size:18px} .mj-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px} .mj-mode{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;border:2px solid var(--border2);border-radius:14px;background:var(--bg);color:var(--text);font:inherit;cursor:pointer} .mj-mode i{font-size:30px;color:var(--teal)} .mj-mode b{font-size:16px} .mj-mode span{font-size:12.5px;color:var(--text3)} .mj-mode.on{border-color:var(--teal);background:var(--teal-l);box-shadow:0 0 0 2px var(--teal) inset} .mj-nb{display:flex;gap:6px;align-items:center;margin:14px 0 8px;font-size:14px} .mj-noms{display:grid;gap:8px;margin-top:8px} .mj-nom{display:flex;gap:8px;align-items:center} .mj-pion{display:inline-block;width:1.3em;text-align:center;font-size:20px;line-height:1;flex:none} .mj-pion.grand{font-size:30px} .mj-bandeau{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px;padding:10px 14px;border:2px solid var(--teal);border-radius:14px;background:var(--teal-l)} .mj-tour{display:flex;align-items:center;gap:8px;font-size:19px} .mj-scores{display:flex;flex-wrap:wrap;gap:6px} .mj-score{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border:1px solid var(--border2);border-radius:999px;background:var(--bg);font-size:13.5px} .mj-score.on{border:2px dashed var(--teal);font-weight:600} .mj-podium{list-style:none;margin:12px auto;padding:0;max-width:340px;text-align:left} .mj-podium li{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--border);font-size:16px} .mj-podium li span{flex:1;text-align:left} .mj-podium li:first-child{font-weight:700;font-size:18px} .exo-texte{font-size:19px;line-height:2.2;white-space:pre-wrap} .exo-trou{font-size:18px;font-family:inherit;padding:3px 8px;margin:0 2px;border:2px solid var(--border2);border-radius:8px; background:var(--bg);color:var(--text);min-width:3ch;text-align:center} .exo-trou:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l)} .exo-trou.juste{border-color:var(--green);background:var(--green-l)} .exo-trou.faux{border-color:var(--red);background:var(--red-l)} .exo-banque{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .exo-banque button{font-size:17px;font-family:inherit;padding:8px 14px;min-height:44px;border:2px solid var(--teal); border-radius:20px;background:var(--bg);color:var(--teal-d);cursor:pointer} .exo-banque button.pris{opacity:.35} /* Glisser-déposer */ #exo-vue [data-glisse]{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab} #exo-vue [data-glisse] img{-webkit-user-drag:none;pointer-events:none} .exo-fantome{position:fixed!important;left:0;top:0;z-index:3000;pointer-events:none;margin:0!important;opacity:.92; box-shadow:0 10px 28px rgba(0,0,0,.28)!important;transform-origin:center;cursor:grabbing;box-sizing:border-box} .glisse-src{opacity:.3} body.exo-glisse, body.exo-glisse *{cursor:grabbing!important} #exo-vue .depot-possible{outline:2px dashed var(--border2);outline-offset:2px} #exo-vue .depot-sur{outline:3px solid var(--teal)!important;outline-offset:2px;background-color:var(--teal-l)!important} /* Paires : constructeur en lignes, lecteur en deux colonnes et un tas. */ .exo-pligne{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-top:1px solid var(--border)} .exo-pligne:first-of-type{border-top:none} .exo-pnum{font-size:12px;color:var(--text3);width:16px;margin-top:10px} .exo-pcote{flex:1;min-width:0} .exo-jligne{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:10px} .exo-elem,.exo-case,.exo-pcarte{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; min-height:56px;padding:8px 10px;border-radius:10px;font-size:17px;font-family:inherit;text-align:center;color:var(--text)} .exo-elem{background:var(--bg2);border:2px solid transparent} .exo-case{border:2px solid var(--border2);background:var(--bg);cursor:pointer} .exo-case.vide{border-style:dashed} .exo-case.juste{border-color:var(--green);background:var(--green-l)} .exo-case.faux{border-color:var(--red);background:var(--red-l)} .exo-elem img,.exo-case img,.exo-pcarte img{max-width:100%;max-height:120px;border-radius:6px} .exo-tas{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--border2)} .exo-oserie-t{font-weight:700;font-size:16px;margin:0 0 10px;color:var(--titre);position:relative;z-index:2} .exo-oserie-t + .exo-colle-haut{margin-top:0} .exo-oserie-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 10px} .exo-oserie-pts{display:flex;gap:3px;color:var(--teal);font-size:12px} .exo-oserie-pts .on{transform:scale(1.4)} .exo-pson{position:relative;margin-top:6px;padding:6px 30px 6px 8px;border-radius:8px;background:var(--bg2)} .exo-pson-x{position:absolute;top:4px;right:4px} .exo-pson-b{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--teal-l);color:var(--teal);font-size:20px;cursor:pointer;flex-shrink:0} .exo-pson-b:hover{background:var(--teal);color:var(--sur-teal)} .exo-pson-b.seul{width:52px;height:52px;font-size:28px} .exo-pson-n{font-size:14px;font-weight:700;color:var(--teal);letter-spacing:.02em} /* Une carte qui n'a qu'un son : de la place autour du haut-parleur pour la prendre (toucher ou glisser). */ .exo-pcarte:has(.exo-pson-b.seul){min-width:120px;min-height:96px;padding:14px 18px} /* Classer par paires (19/10/2026) : des tuiles ; --ptuile, la hauteur d'une tuile, posée pour tenir dans l'écran. */ .exo-pj{--ptuile:180px} .exo-pj-haut{font-size:12px;color:var(--text3);margin-bottom:8px} .exo-ptuiles{display:grid;grid-template-columns:repeat(var(--pcols, 3), minmax(0, 1fr));gap:10px;align-content:start} /* la hauteur calculée est un minimum : un texte long, un son, une image font grandir la tuile plutôt que déborder sur la suivante */ .exo-ptuile{display:flex;flex-direction:column;gap:6px;border:1.5px solid var(--border);border-radius:12px;padding:6px;min-width:0;min-height:var(--ptuile)} .exo-ptuile .exo-elem,.exo-ptuile .exo-case{flex:1 0 auto;min-height:calc((var(--ptuile) - 18px) / 2);overflow-wrap:anywhere;font-size:clamp(14px, calc(var(--ptuile) * .13), 28px);padding:4px 6px} .exo-ptuile .exo-elem img,.exo-ptuile .exo-case img{max-height:calc(var(--ptuile) * .36);max-width:100%;width:auto} .exo-pvide{color:var(--text3);font-size:12px} .exo-ptuile .exo-court,.exo-ptas .exo-court,.exo-rel-item .exo-court{font-size:1.9em;line-height:1} .exo-ptas .exo-pcarte{font-size:clamp(14px, calc(var(--ptuile) * .12), 24px)} .exo-ptas .exo-pcarte img{max-height:calc(var(--ptuile) * .32)} @media (orientation:landscape) and (min-width:760px){ .exo-pj{display:grid;grid-template-columns:minmax(0, 1fr) minmax(170px, 24%);column-gap:14px;align-items:start} .exo-pj > .exo-pj-haut,.exo-pj > .exo-ppages{grid-column:1 / -1} .exo-pj .exo-ptas{position:sticky;top:6px;bottom:auto;margin:0;padding:4px 0 4px 12px;border-top:none;border-left:1.5px dashed var(--border2);box-shadow:none; flex-direction:column;flex-wrap:nowrap;max-height:calc(100vh - 150px);overflow-y:auto} .exo-pj .exo-ptas .exo-pcarte.exo-pcarte{max-width:none;flex-shrink:0;align-self:stretch;overflow-wrap:break-word} .exo-pj.gaucher{grid-template-columns:minmax(170px, 24%) minmax(0, 1fr)} .exo-pj.gaucher .exo-ptas{order:-1;grid-row:span 1;border-left:none;border-right:1.5px dashed var(--border2);padding:4px 12px 4px 0} .exo-pj.gaucher .exo-ptuiles{order:2} } .exo-ppages{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 10px;font-size:14px} .exo-ppages b{display:inline-block;min-width:24px;padding:2px 6px;margin:0 2px;border-radius:12px;background:var(--bg2);text-align:center} .exo-ppages b.ici{background:var(--teal);color:var(--sur-teal)} .exo-relier{position:relative;display:grid;grid-template-columns:minmax(0, 1fr) clamp(40px, 16%, 220px) minmax(0, 1fr);max-width:900px;margin:0 auto;--prel:70px} .exo-rel-col{display:flex;flex-direction:column;gap:10px;z-index:1} .exo-rel-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:2px solid var(--border2);border-radius:10px;background:var(--bg);color:var(--text); min-height:var(--prel);padding:4px 10px;font:inherit;font-size:clamp(15px, calc(var(--prel) * .3), 26px);cursor:pointer;text-align:left} .exo-rel-item.d{justify-content:flex-start} .exo-rel-c{display:flex;align-items:center;gap:8px;min-width:0} .exo-rel-c img{max-height:calc(var(--prel) - 12px);max-width:100%;border-radius:6px} .exo-rel-item.choisi{border-color:#7B5CC4;box-shadow:0 0 0 4px rgba(123,92,196,.35)} .exo-rel-item.juste{border-color:var(--teal)} .exo-rel-item.faux{border-color:#D9541E;border-style:dashed} .exo-rel-pt{width:16px;height:16px;flex:none;border-radius:50%;border:3px solid var(--teal);background:var(--bg)} .exo-rel-pt.plein{background:var(--teal)} .exo-rel-svg{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:visible} .exo-rel-l{stroke:var(--teal);stroke-width:4;stroke-linecap:round} .exo-rel-l.ko{stroke:#D9541E;stroke-dasharray:9 7} .exo-rel-l.corr{stroke:#185FA5;stroke-dasharray:2 6} .exo-rel-hit{stroke:transparent;stroke-width:18;pointer-events:stroke;cursor:pointer} .exo-rel-m{font-size:18px;font-weight:800} .exo-rel-m.ok{fill:var(--teal)} .exo-rel-m.ko{fill:#D9541E} /* Les paires : la taille suit le nombre de paires (--pimg, posé par le jeu) et la largeur des colonnes. */ .exo-paires-jeu .exo-elem img,.exo-paires-jeu .exo-case img{max-height:var(--pimg);width:auto;max-width:100%} .exo-paires-jeu .exo-elem,.exo-paires-jeu .exo-case{font-size:clamp(18px, 2.4vw, 30px);min-height:calc(var(--pimg) * .45)} .exo-paires-jeu .exo-tas .exo-pcarte{max-width:min(320px, 45%);font-size:clamp(17px, 2vw, 26px)} .exo-paires-jeu .exo-tas .exo-pcarte img{max-height:calc(var(--pimg) * .7)} .exo-pcarte{border:2px solid var(--teal);background:var(--bg);cursor:pointer;min-width:90px;max-width:220px} .exo-pcarte.main{box-shadow:0 0 0 4px var(--teal)} .exo-pcarte.juste{border-color:var(--green);background:var(--green-l);cursor:default} .exo-pcarte.faux{border-color:var(--red);background:var(--red-l)} .exo-grp-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .exo-grp{border:2px dashed var(--border2);border-radius:12px;min-height:130px;padding:10px;background:var(--bg);cursor:pointer} .exo-grp.cible{border-color:var(--teal);background:var(--teal-l)} .exo-grp-nom{font-weight:700;font-size:16px;text-align:center;margin-bottom:8px} .exo-grp-contenu{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .exo-grp-contenu .exo-pcarte{min-width:70px;font-size:16px} /* Axe : la zone garde de la marge de chaque côté pour les emplacements des extrémités ; sur un écran étroit, l'axe défile plutôt que de s'écraser. */ .exo-axe-defile{overflow-x:auto;-webkit-overflow-scrolling:touch} .exo-axe{position:relative;min-width:560px} .exo-axe-zone{position:absolute;left:60px;right:60px} .exo-axe-ligne{position:absolute;left:-20px;right:-20px;height:3px;background:var(--text);border-radius:2px} .exo-axe-trait{position:absolute;top:-5px;width:1.5px;height:13px;background:var(--text2);transform:translateX(-50%)} .exo-axe-trait.fort{top:-8px;height:19px;width:2px;background:var(--text)} .exo-axe-nb{position:absolute;top:14px;transform:translateX(-50%);font-size:13px;color:var(--text);white-space:nowrap} .exo-axe-tige{position:absolute;width:0;border-left:2px dotted var(--border2);transform:translateX(-50%)} .exo-axe-place{position:absolute;transform:translateX(-50%);width:104px} .exo-axe-place .exo-case{width:100%;min-height:56px;max-height:66px;padding:4px 6px;font-size:15px;overflow:hidden;box-sizing:border-box} .exo-axe-place img{max-height:40px} /* Placement sur image : les emplacements sont centrés sur leur point. */ .exo-fond{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;user-select:none;-webkit-user-select:none} .exo-fond img{display:block;max-width:100%;max-height:70vh;border-radius:8px} /* (le cadre prend les proportions de l'image, lues à son chargement : les emplacements restent dessus) */ .exo-fond.prop{width:min(100%, calc(70vh * var(--r)));aspect-ratio:var(--r)} .exo-fond.prop img{width:100%;height:100%;max-height:none;object-fit:contain} .exo-repere{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--teal);color:var(--sur-teal); font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none} .exo-repere.sel{background:var(--amber);box-shadow:0 0 0 4px var(--amber-l)} .exo-zone{position:absolute;transform:translate(-50%,-50%);min-width:70px;max-width:160px;min-height:40px;padding:4px 8px; font-size:15px;background:color-mix(in srgb, var(--bg) 88%, transparent);box-shadow:0 1px 4px rgba(0,0,0,.25)} .exo-zone img{max-height:36px} /* Mémoire : des cartes carrées, au doigt. */ .exo-mem{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px} .exo-mem-carte{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px; border-radius:12px;border:2px solid var(--teal);background:var(--teal);color:var(--sur-teal);font-size:30px;font-family:inherit;cursor:pointer; overflow:hidden;transition:transform .15s} .exo-mem-carte:active{transform:scale(.97)} .exo-mem-carte.visible{background:var(--bg);color:var(--text);font-size:16px} .exo-mem-carte.trouvee{border-color:var(--green);background:var(--green-l);cursor:default} .exo-mem-carte.rate{border-color:var(--red);background:var(--red-l)} .exo-mem-carte img{max-width:100%;max-height:70%;border-radius:6px;object-fit:contain} /* Pendu */ .exo-pe-haut{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px} .exo-pe-mot{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:14px 0} .exo-pe-lettre{width:30px;height:40px;border-bottom:3px solid var(--text);display:flex;align-items:flex-end;justify-content:center; font-size:26px;font-weight:700;line-height:1} .exo-pe-lettre.manque{color:var(--red)} .exo-pe-signe{height:40px;display:flex;align-items:flex-end;font-size:26px;font-weight:700} .exo-pe-espace{width:18px} .exo-pe-clavier{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;max-width:560px;margin:0 auto} .exo-langue,.exo-langue-c{padding:4px 8px;border:1px solid var(--border2);border-radius:var(--r);font-family:inherit;font-size:12.5px;background:var(--bg);color:var(--text)} .exo-langue{font-size:13.5px;font-weight:600} .exo-tirage{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:600} .exo-tirage input{width:80px;padding:5px 8px;border:1px solid var(--border2);border-radius:var(--r);font-family:inherit;font-size:13.5px;background:var(--bg);color:var(--text)} .exo-tirage span{font-weight:400;color:var(--text3);font-size:12.5px} .exo-pe-sep{grid-column:1/-1;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text3);margin-top:6px;border-top:1px dashed var(--border2);padding-top:8px} .exo-pe-clavier button{min-height:46px;font-size:18px;font-weight:600;font-family:inherit;border:1px solid var(--border2);border-radius:8px; background:var(--bg);color:var(--text);cursor:pointer} .exo-pe-clavier button.bon{background:var(--green-l);border-color:var(--green);color:var(--green)} .exo-pe-clavier button.mauvais{background:var(--bg2);color:var(--text3);text-decoration:line-through} /* Mots mêlés */ .exo-ml{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;justify-content:center} .exo-ml-grille{display:grid;flex:1 1 300px;touch-action:none;user-select:none;-webkit-user-select:none;border:2px solid var(--border2); border-radius:8px;overflow:hidden;background:var(--bg)} .exo-ml-case{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:clamp(13px,2.6vw,20px); border:1px solid var(--border);cursor:pointer;color:var(--text)} .exo-ml-case.sel{background:var(--teal)!important;color:#fff!important} .exo-ml-case.manque{background:var(--red-l);color:var(--red)} .exo-ml-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:150px;font-size:16px} .exo-ml-liste li{padding:6px 10px;border-radius:8px;background:var(--bg2)} .exo-ml-liste li.vu{text-decoration:line-through;color:var(--text3)} .exo-ml-liste img{max-height:50px;border-radius:4px;display:block} /* Mots croisés */ .exo-cr{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start} .exo-cr-grille{display:grid;flex:1 1 280px;gap:2px} .exo-cr-cel{position:relative;aspect-ratio:1} .exo-cr-vide{height:12px} .exo-cr-sep{display:flex;align-items:center;margin:10px 0 6px;border-top:2px dashed var(--border2);padding-top:6px;font-size:12px;font-weight:600;color:var(--text2);min-width:0} .exo-cr-sep span{white-space:normal} .exo-cr-cel>span{position:absolute;top:1px;left:3px;font-size:10px;font-weight:600;color:var(--text2);pointer-events:none;z-index:1} .exo-cr-cel.apercu{display:flex;align-items:center;justify-content:center;border:1px solid var(--border2);border-radius:3px;font-size:12px;font-weight:700} .exo-cr-cel.apercu>span{font-size:8px} .exo-cr-case{width:100%;height:100%;box-sizing:border-box;border:1.5px solid var(--text2);border-radius:4px;text-align:center; font-size:clamp(14px,2.4vw,20px);font-weight:700;font-family:inherit;text-transform:uppercase;background:var(--bg);color:var(--text);padding:0} .exo-cr-case:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px var(--teal)} .exo-cr-case.mot{background:var(--teal-l)} .exo-cr-case.juste{border-color:var(--green);background:var(--green-l);color:var(--green)} .exo-cr-case.faux{border-color:var(--red);background:var(--red-l)} .exo-cr-defs{flex:1 1 260px;font-size:15px} .exo-cr-defs ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} .exo-cr-defs li{padding:6px 8px;border-radius:8px;cursor:pointer;display:flex;gap:6px;align-items:center;flex-wrap:wrap} .exo-cr-defs li.mot{background:var(--teal-l)} .exo-cr-defs li.juste{color:var(--green)} .exo-cr-defs li.faux{color:var(--red)} .exo-cr-defs li img{max-height:48px;border-radius:4px} /* ── Classes et groupes ── */ .guide{border:1.5px solid var(--teal);border-radius:var(--rl);background:var(--teal-l);padding:12px 14px;margin:0 0 16px} .guide-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px} .guide-tete b{font-size:15px;color:var(--teal)} .guide-n{font-size:12.5px;font-weight:700;color:var(--teal)} .btn.pa-classe{border-color:var(--teal);color:var(--teal);font-weight:600} .wb-fait{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap} .wb-fait.ok{background:var(--green-l);color:var(--green);border:1px solid var(--green)} .wb-fait.cours{background:var(--amber-l);color:var(--amber);border:1px dashed var(--amber)} .wb-fait.susp{background:var(--red-l);color:var(--red);border:1px dashed var(--red)} .pa-filtres{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px} .pa-filtres input{flex:1 1 220px;min-width:0} .pa-filtres select{flex:0 1 auto;width:auto;min-width:0;max-width:100%} .aide-q{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:30px;height:30px;padding:0 6px;border-radius:999px;color:var(--teal);font-size:13px;text-decoration:none;flex:none} .aide-q i{font-size:20px} .aide-q:hover,.aide-q:focus-visible{background:var(--teal-l)} .aide-q.avec-lib{padding:0 10px;font-weight:600} html:not(.mode-eleve) body.en-seance .aide-q, html:not(.mode-eleve) body.en-seance [data-aide]{display:none!important} .el-bandeau .aide-q{margin-right:4px} .guide-masquer{margin-left:auto;background:none;border:none;color:var(--text2);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer} .guide-l{list-style:none;margin:0;padding:0;display:grid;gap:6px} .guide-l li{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px} .guide-l li.fait{border-style:dashed;opacity:.8} .guide-pas{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;border:1.5px solid var(--teal);color:var(--teal)} .guide-l li.fait .guide-pas{background:var(--teal);color:var(--sur-teal)} .guide-x{flex:1;min-width:0;font-size:13.5px} .guide-x span{display:block;font-size:12.5px;color:var(--text2);margin-top:1px} .guide-x .guide-ok{display:inline;color:var(--teal);font-weight:600;margin:0} /* Démonstration : seulement l'exercice (et, pour un jeu de logique, le choix du niveau). */ html.mode-demo body > :not(#exo-vue):not(#lud-mb):not(script):not(style){display:none!important} /* L'aperçu de relecture : la barre en haut, le document en grand ; ni connexion, ni bibliothèque, ni menus. */ html.mode-apercu #login-screen, html.mode-apercu .topbar > button, html.mode-apercu .topbar > a, html.mode-apercu #esp-bandeau, html.mode-apercu #offre-bandeau, html.mode-apercu #wb-eleves-b, html.mode-apercu #wb-enreg, html.mode-apercu [onclick="wbShowList()"], html.mode-apercu .wb-side-foot{display:none!important} html.mode-apercu body{padding-top:var(--ap-h, 46px)} #ap-barre{position:fixed;top:0;left:0;right:0;z-index:1200;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 14px;background:var(--violet-l, #EEEBFB);border-bottom:1px solid var(--border);font-size:13px} #ap-barre b{color:var(--violet, #5B47B8)} #ap-barre span{color:var(--text2)} #ap-barre .ap-docs{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto} html.mode-apercu #exo-vue{top:var(--ap-h, 46px)} html.mode-demo #exo-vue [onclick^="exoModifier"], html.mode-demo #exo-vue [onclick*="exoPleinEcran"], html.mode-demo #exo-vue [onclick="exoFermer()"]{display:none!important} .pt-pre{background:var(--teal-l);border-radius:var(--r);padding:7px 10px;margin:4px 0 2px} .pt-pre i{color:var(--teal);margin-right:4px} body.f-famille #wb-partager, body.en-seance #wb-partager, body.en-seance #wb-classer, html.mode-apercu #wb-classer, html.mode-apercu #wb-partager{display:none!important} .gr-puces{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px} .gr-puce{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;border:1px solid var(--border2);background:var(--bg);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .gr-puce span{font-weight:500;color:var(--text3);font-size:12px} .gr-puce.on{background:var(--teal);border-color:var(--teal);color:var(--sur-teal)} .gr-puce.on span{color:inherit;opacity:.85} .gr-puce.plus{border-style:dashed;color:var(--teal)} .gr-nb{margin-left:4px} .gr-tete{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;margin:0 0 12px;border:1px solid var(--border);border-radius:var(--rl);background:var(--bg2)} .gr-arch{color:var(--text3)} .gr-etq{display:inline-block;padding:0 7px;border-radius:999px;background:var(--teal-l);color:var(--teal);font-size:11.5px} .gr-etq.arch{background:var(--bg2);color:var(--text3);border:1px dotted var(--border2)} /* ── Formule Famille : ni séance ni publication (le serveur refuse aussi) ── */ body.f-famille [onclick*="wbSeanceDebut"], body.f-famille [onclick^="_seanceCodeChoisir"], body.f-famille [onclick^="ptPartager"]{display:none!important} /* ── Séance verrouillée : ce qui disparaît, et une bibliothèque simplifiée ── */ body.en-seance .topbar button{display:none!important} body.en-seance .topbar-title{pointer-events:none} body.en-seance #exo-plein{display:none!important} body.en-seance #wb-sidebar [onclick^="exoNouveau"], body.en-seance #wb-sidebar [onclick^="wbChoisirFichier"], body.en-seance #wb-sidebar .wb-danger, body.en-seance #wb-sidebar [onclick^="wbExport"], body.en-seance #wb-sidebar .wb-ajout-fic{display:none!important} body.en-seance #wb-keys, body.en-seance #wb-eleves-b{display:none!important} body.en-seance #wb-title{pointer-events:none;border-color:transparent} body.en-seance #wb-fil [onclick^="wbDossierNouveau"], body.en-seance #wb-fil [onclick^="wbDossierRenommer"], body.en-seance #wb-fil [onclick^="wbDossierSupprimer"], body.en-seance #wb-fil [onclick^="wbDossierDeplacer"], body.en-seance #wb-fil .wb-fil-menu, body.en-seance #wb-fil .wb-sep-v{display:none!important} body.en-seance #wb-filtres, body.en-seance #wb-fclasse, body.en-seance .wb-tri, body.en-seance #wb-compte, body.en-seance .cla-sous{display:none!important} body.en-seance #wb-list-view .sh{display:none} /* La barre de filtre de la séance remplace la recherche ordinaire. */ .wb-sf{display:none} body.en-seance .wb-sf{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;padding:10px 12px;background:var(--bg); border:1px solid var(--border);border-radius:var(--rl);box-shadow:0 1px 2px rgba(0,0,0,.05)} body.en-seance .wb-recherche-l{display:none!important} .wb-sf input{flex:1 1 220px;min-width:180px;font-size:16px;font-family:inherit;padding:10px 14px 10px 38px;border:1px solid var(--border2);border-radius:999px; background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m21 21-6-6'/%3E%3C/svg%3E") no-repeat 14px center/16px;color:var(--text)} .wb-sf input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l)} .wb-sf-puces{display:flex;flex-wrap:wrap;gap:8px} .wb-sf-b{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--border2); background:var(--bg);color:var(--text);font-size:15px;font-weight:600;font-family:inherit;cursor:pointer} .wb-sf-b i{font-size:18px} .wb-sf-b.on{background:var(--teal);border-color:var(--teal);color:var(--sur-teal)} .wb-sf-b:disabled{opacity:.45;cursor:default} .wb-sf-b.efface{color:var(--red);border-color:var(--red-l)} #wb-seance-veille.on{background:var(--amber-l);border-color:var(--amber);color:var(--amber)} /* Les documents en grandes tuiles, sans les détails qui servent à l'enseignant. */ body.en-seance .wb-grille{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} body.en-seance #wb-list-view .wb-card{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 14px;min-height:150px;justify-content:center} body.en-seance #wb-list-view .wb-card>div:nth-child(2){width:100%} body.en-seance #wb-list-view .wb-card>div:nth-child(2)>div:not(:first-child){display:none} body.en-seance #wb-list-view .wb-card>div:nth-child(2)>div:first-child{font-size:18px!important;white-space:normal!important;line-height:1.3} body.en-seance #wb-list-view .wb-card>div:last-child>*:not(.btn):not(.wb-fait){display:none!important} body.en-seance #wb-list-view .wb-card>div:last-child{flex-direction:column} body.en-seance #wb-list-view .wb-fait{font-size:12.5px;order:-1} body.en-seance #wb-list-view .wb-card .btn{min-height:44px;font-size:16px;padding:8px 20px} body.en-seance .wb-thumb{width:64px;height:64px;font-size:32px;border-radius:16px} body.en-seance .wb-dossier{min-height:84px;font-size:17px} body.en-seance .wb-repr-b{font-size:15px;padding:10px 16px} body.en-seance #wb-docs-view #wb-search{font-size:16px!important;padding-top:11px!important;padding-bottom:11px!important} /* Fenêtre du code de séance */ #tel-avis{position:fixed;left:10px;right:10px;bottom:10px;z-index:1500;display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--bg);border:1.5px solid var(--teal);border-radius:14px;box-shadow:0 10px 30px rgba(20,40,80,.2);font-size:14px;line-height:1.45;color:var(--text)} #tel-avis i.ti{font-size:26px;color:var(--teal);flex:none} #tel-avis .btn{margin-top:8px} .seance-fen{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px} .seance-boite{background:var(--bg);border-radius:16px;padding:22px 24px;max-width:420px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.3)} .seance-boite h3{margin:0 0 8px;font-size:18px;display:flex;align-items:center;gap:8px} .seance-boite p{font-size:14px;color:var(--text2);line-height:1.5;margin:0 0 12px} .seance-lab{display:block;font-size:13px;color:var(--text2);margin-bottom:10px} .seance-code{display:block;width:150px;margin-top:4px;padding:10px 12px;font-size:26px;letter-spacing:10px;text-align:center;font-family:inherit; border:2px solid var(--border2);border-radius:10px;background:var(--bg);color:var(--text)} .seance-code:focus{outline:none;border-color:var(--teal)} .seance-err{color:var(--red)!important} .seance-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px} .seance-btns .btn{min-height:44px;padding:8px 18px} .seance-oubli{display:block;margin:12px auto 0;background:none;border:none;color:var(--text3);font-size:12.5px;text-decoration:underline;cursor:pointer;font-family:inherit} /* Séance avec un élève */ .wb-seance{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border-radius:var(--rl); background:var(--teal-l);border:1px solid var(--teal);font-size:14px} .wb-etoile i{color:var(--text3)} .wb-etoile.on i{color:var(--amber)} /* Classement : matières et niveaux */ .cla-puces{display:flex;flex-wrap:wrap;gap:6px 10px} .cla-groupe{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px 6px;border:1px dashed var(--border2);border-radius:10px} .cla-puce{font-size:13px;font-family:inherit;padding:5px 11px;min-height:32px;border-radius:16px;border:1px solid var(--border2); background:var(--bg);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:4px} .cla-puce.sous{font-size:12px;padding:4px 9px;min-height:28px;color:var(--text2)} .cla-puce.on{background:var(--teal);border-color:var(--teal);color:var(--sur-teal)} .cla-etq{font-size:11px;border-radius:4px;padding:1px 7px} .cla-etq.mat{background:var(--blue-l, #e6f0fb);color:var(--blue, #185fa5)} .cla-etq.niv{background:var(--amber-l);color:var(--amber)} .cla-org{display:grid;grid-template-columns:3fr 2fr;gap:18px} @media (max-width:640px){ .cla-org{grid-template-columns:1fr} } .cla-bloc{border:1px solid var(--border);border-radius:var(--r);padding:6px;margin-bottom:8px} .cla-ligne{display:flex;align-items:center;gap:4px;margin:3px 0} .cla-ligne.sous{padding-left:14px} .cla-ligne .exo-in{flex:1;min-width:0;padding:5px 8px;font-size:13px} .exo-chrono{display:inline-flex;align-items:center;gap:5px;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums; padding:4px 12px;border-radius:999px;background:var(--teal-l);color:var(--teal-d)} .exo-chrono.fini{background:var(--green-l);color:var(--green)} /* Réserve d'étiquettes accrochée à l'écran : avec beaucoup d'éléments, on voit toujours ce qu'on peut poser, même tout en haut ou tout en bas de la liste. Trop remplie, elle défile sur elle-même plutôt que de masquer tout. */ .exo-colle-bas,.exo-colle-haut{position:sticky;z-index:3;background:var(--bg);max-height:38vh;overflow-y:auto} .exo-colle-bas{bottom:-16px;margin-bottom:-14px;padding:12px 2px 14px;box-shadow:0 -10px 14px -10px rgba(0,0,0,.22)} .exo-colle-haut{top:-16px;padding:12px 2px;margin:-14px 0 14px;border-top:none;border-bottom:1px dashed var(--border2);box-shadow:0 10px 14px -10px rgba(0,0,0,.22)} .exo-tas.exo-colle-bas{margin-top:16px} .exo-grp-reserve.exo-colle-haut{margin:0 0 12px;padding:14px 16px;border:1px solid var(--border)} /* Sur téléphone (17/10/2026) : tout se resserre d'un tiers, et la réserve d'éléments passe en bas de l'écran, sous le pouce, au lieu d'occuper le haut ; elle reste accrochée pendant qu'on fait défiler les places. */ @media(max-width:500px){ #exo-vue .exo-corps{padding:10px} #exo-vue .exo-carte{padding:10px 11px;margin-bottom:9px} #exo-vue .exo-banque{gap:6px;margin-top:10px} #exo-vue .exo-banque button{font-size:15px;min-height:40px} #exo-vue .exo-tas{gap:7px} #exo-vue .exo-pcarte{min-width:64px} .exo-paires-jeu{--pimg:90px !important} .exo-paires-jeu .exo-elem,.exo-paires-jeu .exo-case{font-size:16px;min-height:44px} .exo-paires-jeu .exo-tas .exo-pcarte{font-size:15px;max-width:48%} .exo-grp-grille{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px} .exo-grp{min-height:84px;padding:7px} .exo-grp-nom{font-size:14px;margin-bottom:5px} .exo-elem img,.exo-case img,.exo-pcarte img{max-height:80px} .exo-carte:has(> .exo-colle-haut),div:has(> .exo-grp-reserve){display:flex;flex-direction:column} .exo-carte:has(> .exo-colle-haut) > *,div:has(> .exo-grp-reserve) > *{min-width:0} #exo-vue .exo-colle-haut{order:9;top:auto;bottom:-10px;max-height:32vh;margin:12px 0 -10px;padding:10px 2px 12px; border-bottom:none;border-top:1px dashed var(--border2);box-shadow:0 -10px 14px -10px rgba(0,0,0,.22)} #exo-vue .exo-grp-reserve.exo-colle-haut{margin:10px 0 -10px;padding:10px 11px;border:1px solid var(--border)} #exo-vue .exo-colle-bas{bottom:-10px;max-height:32vh} } .exo-tete h2{min-width:180px} .exo-type-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px; background:var(--violet-l);color:var(--violet);white-space:nowrap} /* Image d'en-tête de l'activité, et son agrandissement */ .sp-carte{flex-wrap:wrap} body:has(.mb.open) #sp-deroule,body:has(.seance-fen) #sp-deroule,body:has(.exo-video-plein) #sp-deroule{display:none} #sp-deroule{position:fixed;left:12px;bottom:12px;z-index:450;max-width:min(560px, calc(100vw - 24px));background:var(--bg);border:1px solid var(--border2); border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.22);font-size:13.5px} .sp-de-tete{display:flex;align-items:center;gap:8px;padding:8px 10px;flex-wrap:wrap} .sp-de-pli{border:0;background:var(--bg2);border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--text)} .sp-de-n{font-weight:700;color:var(--teal)} .sp-de-nom{flex:1;min-width:120px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sp-de-temps{font-variant-numeric:tabular-nums;color:var(--text2)} .sp-de-temps.trop{color:var(--red);font-weight:700} .sp-de-temps.trop::before{content:'✗ '} .sp-de-l{list-style:none;margin:0;padding:0 8px 4px;max-height:40vh;overflow-y:auto;border-top:1px solid var(--border)} .sp-de-l button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 6px;border:0;background:none;font:inherit;color:inherit;cursor:pointer;border-radius:8px;text-align:left} .sp-de-l li.on button{background:var(--bg2);font-weight:600} .sp-de-l li.fait .sp-de-x{color:var(--text3);text-decoration:line-through} .sp-de-f{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;border:1.5px solid var(--border2);font-size:11.5px;flex:none} .sp-de-l li.fait .sp-de-f{background:var(--teal);border-color:var(--teal);color:#fff} .sp-de-x{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sp-de-l small{color:var(--text3)} .sp-de-pied{font-size:12px;color:var(--text3);padding:4px 14px 8px} #el-avert{position:fixed;top:12px;left:12px;right:12px;margin:0 auto;width:fit-content;z-index:3000;display:flex;align-items:center;gap:8px; background:var(--bg);border:2px solid var(--amber);border-radius:12px;padding:10px 14px;font-size:14.5px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.2)} #el-avert i.ti-clock{color:var(--amber);font-size:20px} #el-avert button{border:0;background:none;cursor:pointer;color:var(--text3);font-size:16px} .el-pause-msg span strong{display:inline;font-weight:700} .el-prochaine{font-size:13.5px;color:var(--text2);margin-top:3px} .el-prochaine i{color:var(--teal)} .ho-mo{max-width:640px;width:95%;max-height:92vh;overflow-y:auto} .ho-etat{font-weight:700} .ho-etat.ouvert{color:var(--teal)} .ho-etat.ferme{color:var(--red)} .ho-pause{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .ho-jusqua{display:inline-flex;gap:4px;align-items:center} .ho-jusqua input{width:auto} .ho-modes{display:grid;gap:4px;margin-bottom:8px} .ho-bloc{display:grid;gap:6px;justify-items:start} .ho-ligne{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px} .ho-ligne input[type=time],.ho-ligne input[type=date]{width:auto} .ho-h small{color:var(--text3)} .ho-jours{display:inline-flex;gap:2px} .ho-jours button{width:28px;height:28px;border-radius:50%;border:1px solid var(--border2);background:none;font:inherit;font-size:12px;cursor:pointer;color:var(--text2)} .ho-jours button.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700} .sp-et.avec{margin-left:26px;border-left:3px solid var(--teal);padding-left:8px} .sp-pour{border:1px dashed var(--border2);background:none;border-radius:99px;padding:3px 9px;font:inherit;font-size:12px;color:var(--text2);cursor:pointer;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis} .sp-pour.cible{border-style:solid;border-color:var(--teal);color:var(--teal);font-weight:600} .sp-avec{display:flex;align-items:center;gap:3px;font-size:11.5px;color:var(--text2);white-space:nowrap} .sp-gb{display:flex;gap:6px;flex-wrap:wrap} .sp-gb-x{display:inline-flex;border:1px solid var(--border2);border-radius:99px;overflow:hidden} .sp-gb-x.on{border-color:var(--teal);background:var(--bg2)} .sp-gb-x button{border:0;background:none;font:inherit;font-size:13px;padding:5px 10px;cursor:pointer;color:var(--text)} .sp-gb-x button small{color:var(--text3)} .sp-gb-x .sup{padding:5px 7px;color:var(--text3);border-left:1px solid var(--border)} .sp-de-bloc{display:grid;gap:4px;padding:0 10px 8px} .sp-de-ligne{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 8px;border:1px solid var(--border);border-radius:10px} .sp-de-ligne.fait .sp-de-nom{color:var(--text3);text-decoration:line-through} .sp-de-pour{font-size:11.5px;font-weight:700;color:var(--teal);background:var(--bg2);border-radius:99px;padding:2px 8px;white-space:nowrap} .sp-ph{border:1px solid var(--border);border-radius:12px;padding:10px;margin-bottom:10px;display:grid;gap:8px;background:var(--bg)} .sp-ph.avec{margin-left:26px;border-left:3px solid var(--teal)} .sp-ph-tete{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .sp-ph-titre{flex:1 1 200px;min-width:0;font-weight:600} .sp-ph-texte{width:100%;resize:vertical} .sp-ph-l{display:grid;gap:4px} .sp-ph-act,.sp-ph-lien{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 6px;border-radius:8px;background:var(--bg2)} .sp-ph-act i,.sp-ph-lien>i{color:var(--text3);font-size:17px} .sp-ph-lien input{flex:1 1 160px;min-width:0} .sp-ph-lien.faux{outline:2px dashed var(--red)} .sp-ph-lien small{flex:1 1 100%;color:var(--red);font-size:12px} .sp-ph-note{display:grid;gap:4px;font-size:12.5px;color:var(--text2)} .sp-ph-note textarea{background:var(--bg2)} .sp-ph-btns{display:flex;gap:6px;flex-wrap:wrap} .sp-de-bloc{max-height:46vh;overflow-y:auto} .sp-de-ligne{display:grid;gap:6px} .sp-de-ph{display:flex;align-items:center;gap:8px} .sp-de-texte{font-size:13.5px;color:var(--text);white-space:pre-line;background:var(--bg2);border-radius:8px;padding:6px 8px} .sp-de-act{display:flex;align-items:center;gap:6px} .sp-de-act .sp-de-x{flex:1;min-width:0} .sp-de-act.fait .sp-de-x{color:var(--text3);text-decoration:line-through} .sp-de-act .exo-mini.on{background:var(--teal);color:#fff;border-color:var(--teal)} .sp-de-liens{display:flex;gap:6px;flex-wrap:wrap} .sp-de-fin{display:flex;justify-content:flex-end} .sp-reste-liens{display:flex;gap:4px 12px;flex-wrap:wrap;align-items:center;flex:1 1 100%;font-size:12.5px;padding-left:4px} .sp-reste{display:grid;gap:6px} .sp-reste-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px} .sp-reste-l span{flex:1;min-width:140px} .sp-reste-l select{width:auto} .sp-maison[hidden]{display:none} .sp-maison{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13px;margin-top:8px} .sp-auj{display:flex;flex-direction:column;gap:6px;background:var(--bg);border:1px solid var(--teal);border-radius:12px;padding:10px 14px;margin-bottom:14px} .sp-auj > b{color:var(--teal)} .sp-auj-x{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px} .sp-carte .sp-quand{flex:0 0 210px;font-size:13.5px;display:flex;flex-direction:column;gap:3px} @media (max-width:560px){ .sp-carte .sp-quand{flex-basis:calc(100% - 30px)} } .sp-carte.passee{border-style:dashed} .sp-etq{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--teal);font-weight:600} .sp-etq.passee{color:var(--amber)} .sp-et{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)} .sp-et-t{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis} .sp-et-t small{display:block;font-size:11.5px;color:var(--text3)} .sp-et .sp-et-texte{flex:1;min-width:0} .sp-et-min{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--text2)} .sp-et-min input,.sp-min input{width:64px} .sp-min{display:flex;align-items:center;gap:4px} .sp-trop{color:var(--red);font-weight:600} .sp-quand-ed{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px} .sp-quand-ed label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;font-weight:600;color:var(--text2)} .sp-quand-ed label span{font-weight:400} .sp-els{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .sp-el{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 4px;border:1px solid var(--border);border-radius:99px;font-size:13px} .sp-el button{border:0;background:none;color:var(--text3);cursor:pointer;padding:0 4px} .sp-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--text2);background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin-bottom:12px} .exo-ncr-avis{display:flex;gap:8px;margin-top:10px;padding:8px 10px;border:2px solid var(--amber);border-radius:10px;font-size:13px;line-height:1.5;background:var(--bg)} .exo-ncr-avis i{color:var(--amber);font-size:18px;flex:none} .exo-ncr{display:grid;gap:8px;margin-top:10px;padding-left:26px} .exo-ncr-l{display:flex;flex-wrap:wrap;gap:4px 14px} .exo-ncr-t{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:13px} .exo-ncr-t button{min-width:34px;height:30px;border:1px solid var(--border2);border-radius:8px;background:none;font:inherit;cursor:pointer;color:var(--text2)} .exo-ncr-t button.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700} .wb-assign-tete{display:flex;justify-content:space-between;padding:6px 11px;font-size:11.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border)} .wb-assign-tete span:first-child{padding-left:26px} .wb-assign-l{cursor:default} .wb-assign-m{display:flex;align-items:center;gap:4px;padding-left:12px;border-left:1px solid var(--border);color:var(--text2);cursor:pointer;white-space:nowrap} .dc-barre{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px} .dc-sel{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);max-width:100%} .dc-sel.on{border-color:var(--teal);color:var(--teal);font-weight:600;box-shadow:inset 0 0 0 1px var(--teal)} .dc-masquer{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--text2)} .dc-compte{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text3);margin-bottom:8px;min-height:28px} .dc-ligne{flex-wrap:wrap} .dc-titre{flex:1 1 200px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left} .dc-meta{font-size:12px;color:var(--text3);white-space:nowrap} .sp-choix{width:100%;border:0;background:none;font:inherit;color:inherit} .exo-fin{border:1px solid var(--border);border-radius:10px;padding:8px 10px;margin-bottom:8px} .exo-fin-t{font-weight:600;font-size:13.5px;margin-bottom:6px;display:flex;align-items:center;gap:6px} .exo-fin-f{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;color:#fff;font-size:13px} .exo-fin-f.juste{background:var(--teal)}.exo-fin-f.partiel{background:var(--amber)}.exo-fin-f.faux{background:var(--red)} .exo-video{position:relative;width:100%;max-width:760px;aspect-ratio:16/9;margin:0 auto 16px;border-radius:12px;overflow:hidden;background:#1d2733;border:1px solid var(--border)} .exo-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .exo-video-play{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#1d2733,#2c3e50);color:#fff;border:0;cursor:pointer;font:inherit} .exo-video-rond{width:72px;height:72px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:0 6px 18px rgba(0,0,0,.35)} .exo-video-play:hover .exo-video-rond{transform:scale(1.07)} .exo-video-txt{font-weight:700;font-size:16px;text-align:center;padding:0 12px} .exo-video-txt small{display:block;font-weight:400;font-size:12px;opacity:.8;margin-top:3px} .exo-video-plein{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:56px 12px 12px} .exo-video-plein iframe{width:min(100%, calc((100vh - 70px) * 16 / 9));aspect-ratio:16/9;border:0;border-radius:8px} .exo-video-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#000;font-size:22px;cursor:pointer} .exo-entete{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto 16px} .exo-entete img{display:block;max-width:100%;max-height:min(42vh,420px);border-radius:12px;border:1px solid var(--border);cursor:zoom-in;background:var(--bg)} .exo-entete-loupe{position:absolute;right:8px;bottom:8px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff; display:flex;align-items:center;justify-content:center;font-size:20px;pointer-events:none} .exo-zoom{position:absolute;inset:0;z-index:70;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:12px} .exo-zoom img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px} .exo-zoom-x{position:absolute;top:12px;right:12px;width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.18); color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center} /* Côté élève, les images sont centrées ; le texte à trous peut l'être. */ .exo-vue.jeu .exo-img{margin-left:auto!important;margin-right:auto!important} /* Les activités, côté élève (22/10/2026) : tout se lit et se touche bien sur une tablette, avec un doigt d'enfant (les boutons à 44 px au moins, les textes à 14 px au moins, la règle du jeu à 16 px et plus foncée). */ .exo-vue.jeu .exo-corps .btn{min-height:44px;font-size:16px;padding:9px 18px;border-radius:12px} .exo-vue.jeu .exo-corps .btn.sm{min-height:40px;font-size:15px;padding:7px 14px} .exo-vue.jeu .exo-corps .btn > i.ti{font-size:1.15em} .exo-vue.jeu .cb-aide{font-size:16px;color:var(--text2);line-height:1.45} .exo-vue.jeu .cb-haut{font-size:14.5px;color:var(--text2)} .exo-vue.jeu .ro-lab,.exo-vue.jeu .mo-leg{font-size:15px;color:var(--text2)} .exo-vue.jeu .exo-pvide{font-size:14.5px} .exo-vue.jeu .exo-corps [style*="font-size:11px"],.exo-vue.jeu .exo-corps [style*="font-size:12px"]{font-size:14px!important} .exo-vue.jeu .exo-corps [style*="font-size:12.5px"],.exo-vue.jeu .exo-corps [style*="font-size:13px"]{font-size:14.5px!important} /* jeu par jeu : ce que le relevé du 22/10/2026 a trouvé sous 14 px, ou trop petit pour un doigt */ .exo-vue.jeu .co-total span,.exo-vue.jeu .ro-vide,.exo-vue.jeu .lt-n,.exo-vue.jeu .vh-n,.exo-vue.jeu .exo-pj-haut,.exo-vue.jeu .cd-brou-l,.exo-vue.jeu .ts-hist{font-size:15px} .exo-vue.jeu .ec-long span,.exo-vue.jeu .to-vue-pied,.exo-vue.jeu .exo-pe-sep{font-size:14px} .exo-vue.jeu .exo-lab{font-size:13.5px} .exo-vue.jeu .exo-corps th{font-size:14.5px} .exo-vue.jeu .tr-num{font-size:15px;min-width:24px;height:24px} .exo-vue.jeu .tr-dire{font-size:22px;padding:6px;min-width:40px;min-height:40px;bottom:0;right:0} .exo-vue.jeu .ro-p small{font-size:14px} .exo-vue.jeu .to-vue-t{font-size:15px} .exo-vue.jeu .sc-t small{font-size:14px} .exo-vue.jeu .exo-onum{width:32px;height:32px;font-size:15px} .exo-vue.jeu .cd-r,.exo-vue.jeu .cd-bp,.exo-vue.jeu .cd-mp{font-size:16px} .exo-vue.jeu .ch-n{height:42px;font-size:17px} .exo-vue.jeu .ts-zone .ts-svg{flex:1 1 420px;max-width:560px;max-height:calc(100vh - 250px)} /* la carte tient dans l'écran, sans défiler */ .exo-texte.centre{text-align:center} /* Calcul mental */ .exo-calcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} .exo-calc{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:14px 16px;font-size:24px;font-weight:600; display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font-variant-numeric:tabular-nums} .exo-calc.ok{border-color:var(--green);background:var(--green-l)} .exo-calc.ko{border-color:var(--red)} .exo-calc .exo-trou{font-size:24px;font-weight:600;text-align:center;min-width:3ch} .exo-vue.jeu .exo-calc,.exo-vue.jeu .exo-calc .exo-trou{font-size:28px} .exo-calc-ligne{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .exo-calc-nb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2)} .exo-calc-nb .exo-in{width:80px} .exo-calc-apercu{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:15px;padding:8px 10px;background:var(--bg2);border-radius:8px} .exo-calc-ex{white-space:nowrap} /* Saisie mise en forme */ .exo-riche{border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);overflow:hidden} .exo-riche:focus-within{border-color:var(--teal)} .exo-riche-barre{display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:4px 6px;background:var(--bg2);border-bottom:1px solid var(--border)} .exo-riche-barre button{min-width:30px;height:30px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text); font-size:15px;font-family:Georgia,serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .exo-riche-barre button:hover{background:var(--bg);border-color:var(--border2)} .exo-riche-barre .exo-riche-coul{min-width:22px;width:22px;height:22px;border-radius:50%;border:2px solid var(--bg)!important;box-shadow:0 0 0 1px var(--border2)} .exo-riche-sep{width:1px;height:20px;background:var(--border2);margin:0 4px} .exo-riche-zone{border:none!important;border-radius:0!important;outline:none;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;cursor:text} .exo-riche-zone:empty:before{content:attr(data-ph);color:var(--text3)} /* Champ court : une ligne ; sa barre flotte au-dessus pendant la saisie. */ .exo-riche.court{position:relative;overflow:visible} .exo-riche.court .exo-riche-barre{display:none;position:absolute;bottom:calc(100% + 4px);right:0;z-index:20;border:1px solid var(--border2); border-radius:var(--r);box-shadow:0 6px 18px rgba(0,0,0,.15);background:var(--bg)} .exo-riche.court:focus-within .exo-riche-barre{display:flex} .exo-riche.court .exo-riche-zone{white-space:normal;padding:7px 10px;min-height:0} .exo-rep-champ .exo-riche{border-color:var(--exo-bord, var(--border2))} /* Texte à trous : les réponses de chaque trou */ .exo-trep{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--border)} .exo-trep:first-child{border-top:none} .exo-trep-n{font-weight:700;color:var(--teal-d);min-width:38px;padding-top:8px} .exo-trep-l{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1} .exo-trep-i{display:inline-flex;align-items:center;gap:2px} .exo-trep-i .exo-in{width:170px;padding:6px 9px} /* Fenêtre de l'appli, posée sur l'activité */ .exo-dialogue{position:absolute;inset:0;z-index:60;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:16px} .exo-dialogue-boite{background:var(--bg);border-radius:16px;padding:24px 26px;max-width:460px;width:100%;text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.25)} .exo-dialogue-msg{font-size:19px;line-height:1.5;margin-bottom:20px} .exo-dialogue-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .exo-dialogue-btns .btn{min-height:50px;font-size:17px;padding:10px 20px} /* Correction : en bleu, figée. */ .exo-fige{pointer-events:none} .exo-bilan.corr{border-color:var(--corr, var(--blue));background:var(--corr-l, var(--blue-l))} /* La correction a sa forme à elle (double trait), en plus de sa couleur. */ .exo-choix button.corr,.exo-case.corr,.exo-pcarte.corr,.exo-cr-case.corr{border-color:var(--corr, var(--blue))!important;background:var(--corr-l, var(--blue-l))!important;color:var(--corr, var(--blue))!important;border-style:double!important;border-width:4px!important} .exo-trou.corr{display:inline-block;border-color:var(--corr, var(--blue));background:var(--corr-l, var(--blue-l));color:var(--corr, var(--blue));font-weight:600;padding:3px 8px;border-style:double;border-width:4px} /* Opérations posées */ .pos-ops{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start} .pos-op{flex:0 0 auto;padding:12px 18px 16px;margin:0} .pos-tete{font-size:15px;font-weight:600;color:var(--text2);margin-bottom:8px} .pos-g{--pc:46px;--psg:34px;display:grid;font-size:26px;font-variant-numeric:tabular-nums;width:max-content;max-width:100%;overflow-x:auto} .pos-g.grand{--pc:60px;font-size:34px} .pos-k,.pos-s{height:var(--pc);display:flex;align-items:center;justify-content:center;position:relative} .pos-k.r,.pos-s.r{height:calc(var(--pc) * .62);font-size:.62em} .pos-s{color:var(--text2);font-weight:700} .pos-s.r{color:var(--text3);font-size:12px;font-weight:600} .pos-k.f{font-weight:600;color:var(--text)} .pos-k.m{justify-content:flex-end;padding-right:6px} .pos-k.barre span{text-decoration:line-through;text-decoration-thickness:2px;color:var(--text3)} .pos-l{grid-column:1 / -1;border-top:3px solid var(--text);margin:3px 0} .pos-c{width:calc(var(--pc) - 6px);height:calc(var(--pc) - 6px);text-align:center;font:inherit;font-weight:600;border:1.5px solid var(--border2);border-radius:7px;background:var(--bg);color:var(--text);padding:0} .pos-k.r .pos-c{width:calc(var(--pc) * .56);height:calc(var(--pc) * .56);border-style:dotted;color:#7B5CC4} .pos-c.mini{position:absolute;left:1px;top:1px;width:calc(var(--pc) * .42);height:calc(var(--pc) * .46);font-size:.55em;border-style:dotted;color:#7B5CC4;border-radius:5px} .pos-c.mini.plus{top:auto;bottom:1px} .pos-c.mini::placeholder{color:var(--text3)} .pos-c:focus{outline:3px solid #7B5CC4;outline-offset:0} .pos-c.juste{border:2.5px solid #0E7C70;background:#e3f3f0} .pos-c.faux{border:2.5px dashed #D9541E;background:#fdece4} .pos-c.corr{border:4px double #1D4ED8;color:#1D4ED8;background:var(--bg)} .pos-c:disabled{opacity:1} .pos-g.col .k0{background:rgba(14,124,112,.10)} .pos-g.col .k1{background:rgba(217,84,30,.09)} .pos-g.col .k2{background:rgba(123,92,196,.11)} .pos-k.bar{border-left:3px solid var(--text)} .pos-k.sous{border-bottom:3px solid var(--text)} .pos-k.lp,.pos-s.lp{height:7px} .pos-k.lp.trait{border-top:2px solid var(--text)} .pos-g.div .pos-k.bar{padding-left:4px} .pos-k.z>span:first-of-type,.pos-v.z{color:var(--text3)} .pos-v{position:absolute;right:-2px;bottom:4px;font-weight:700;line-height:1} .pos-k.virg .pos-c{width:calc(var(--pc) * .5);padding:0} .pos-k.kc{font-weight:700} .pos-g.col .kv{background:rgba(29,78,216,.07)} .pos-vr{margin-top:12px;font-size:16px;color:var(--text2);display:flex;align-items:center;gap:6px;flex-wrap:wrap} .pos-reste{font-size:.8em;color:var(--text2);font-weight:500} .pos-ent{font-size:12px;font-weight:700;color:var(--text3);height:22px;display:flex;align-items:flex-end;justify-content:center} .pos-note{font-size:13.5px;color:var(--text2);margin:10px 0} .pos-lu{font-size:13px;color:var(--text2);margin:6px 0} .pos-err{color:#D9541E;margin-top:3px} .pos-ch{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;cursor:pointer} .pos-ch input{width:18px;height:18px} .pos-gen{margin:10px 0 0 26px;display:flex;flex-direction:column;gap:8px} .pos-l1{font-size:13.5px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px} .pos-l1 b{font-size:18px;min-width:18px} .pos-nb{width:64px!important;display:inline-block} .pos-sel{width:auto!important;display:inline-block;max-width:100%} /* les maths */ .exo-riche-maths{width:auto!important;padding:0 8px!important;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:3px} .exo-math-ap{font-size:15px;padding:6px 10px;margin-top:4px;border:1px dashed var(--border2);border-radius:var(--r);background:var(--bg2);color:var(--text)} .exo-math-lab{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-right:6px} #math-mb{z-index:600} /* au-dessus de l'éditeur d'exercice (400) */ .math-mo{max-width:640px;width:95%;max-height:90vh;overflow:auto} .math-mods{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px} .math-mod{font:inherit;font-size:13.5px;padding:6px 12px;border:1px solid var(--border2);border-radius:16px;background:var(--bg);color:var(--text);cursor:pointer} .math-mod.on{background:#0E7C70;border-color:#0E7C70;color:#fff} .math-form{border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px} .math-ch{display:flex;flex-wrap:wrap;gap:8px} .math-ch label,.math-latex{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--text2)} .math-ch input{width:130px} .math-latex input{width:100%} .math-ap{font-size:20px;min-height:36px;display:flex;align-items:center;gap:6px} .math-syms{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 12px} .math-syms button{font:inherit;font-size:18px;min-width:40px;height:38px;padding:0 8px;border:1px solid var(--border2);border-radius:8px;background:var(--bg);color:var(--text);cursor:pointer} .math-syms.unites button{font-size:14px} .katex{font-size:1.12em} .exo-pave-m{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .exo-pave-m button{height:50px;border-radius:12px;border:1px solid var(--border2);background:var(--bg2);color:var(--text);font-size:21px;font-weight:600;font-family:inherit;cursor:pointer;touch-action:manipulation} .exo-pave-m button:active{background:var(--teal-l);border-color:var(--teal)} .exo-pave-m button.fn{font-size:17px;color:var(--text2)} .exo-pave-m button.ok{background:var(--teal);border-color:var(--teal);color:var(--sur-teal)} .exo-pave-m button.op{font-weight:700;color:#7B5CC4} @media(max-width:500px){ .exo-pave-m button{height:42px;font-size:18px} } .exo-pave.maths{width:min(420px,96vw)} .exo-trou.corr s{color:var(--red);font-weight:400;opacity:.8} .exo-corr-txt{margin-top:6px;font-size:16px;font-weight:600;color:var(--corr, var(--blue))} .exo-cr-defs li.corr{color:var(--corr, var(--blue))} @media(prefers-color-scheme:dark){ .exo-choix button.corr,.exo-case.corr,.exo-pcarte.corr,.exo-cr-case.corr{color:#8EC1F5!important} .exo-trou.corr,.exo-corr-txt,.exo-cr-defs li.corr,.exo-bilan.corr>div:first-child{color:#8EC1F5} } /* Remettre dans l'ordre : les cases se suivent de gauche à droite, comme on lit, et passent à la ligne quand la place manque. */ .exo-oliste{display:flex;flex-wrap:wrap;gap:12px 10px;align-items:stretch} .exo-oliste .exo-oligne{margin:0;gap:6px} .exo-oliste .exo-case{min-width:110px;max-width:260px;min-height:56px} /* ── L'activité, côté élève : toute la largeur, et plus grand ────────────── */ .exo-consigne{font-size:17px;font-weight:600;color:var(--text);white-space:pre-wrap;flex:1;min-width:0;line-height:1.45} /* Un bouton inactif se voit inactif (Enregistrer quand tout l'est, Lancer tant que l'exercice est incomplet…). */ #exo-vue .btn:disabled{opacity:.45;cursor:default;filter:grayscale(.3)} /* La consigne, bien en vue : un encadré, son icône, ses boutons. */ .exo-consigne-bloc{display:flex;align-items:flex-start;gap:10px;background:var(--teal-l);border:1px solid var(--teal);border-left:5px solid var(--teal); border-radius:12px;padding:12px 14px;margin-bottom:14px} .exo-consigne-ico{font-size:24px;color:var(--teal-d);flex-shrink:0;margin-top:1px} .exo-cs-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;min-height:42px;min-width:42px;justify-content:center;padding:6px 12px; border-radius:999px;border:1px solid var(--teal);background:var(--bg);color:var(--teal-d);font-size:16px;font-weight:600;font-family:inherit;cursor:pointer} .exo-cs-btn i{font-size:20px} .exo-cs-btn.aide{border-color:var(--amber);color:var(--amber)} .exo-cs-btn.aide.on{background:var(--amber-l)} .exo-aide{position:relative;background:var(--amber-l);border:1px solid var(--amber);border-radius:12px;padding:14px 48px 14px 16px;margin:-6px 0 14px;text-align:center} .exo-aide-txt{font-size:17px;white-space:pre-wrap;text-align:left;margin-bottom:8px;color:var(--text)} .exo-aide-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.08);color:var(--text);cursor:pointer;font-size:18px} .exo-aide-ed{margin-top:12px;padding:10px 12px;border:1px dashed var(--amber);border-radius:10px;background:var(--bg)} @media(prefers-color-scheme:dark){ .exo-cs-btn.aide,.exo-aide .exo-aide-txt{color:#F2C27B} } .exo-vue.jeu .exo-col{max-width:1500px} @media(min-width:900px){ .exo-vue.jeu{--exo-ml:58px;--exo-cr:54px} .exo-vue.jeu .exo-corps{padding:22px 32px} .exo-vue.jeu .exo-tete h2{font-size:19px} .exo-vue.jeu .exo-consigne{font-size:21px} .exo-vue.jeu .exo-consigne-bloc{padding:16px 18px;margin-bottom:18px} .exo-vue.jeu .exo-cs-btn{min-height:50px;min-width:50px;font-size:18px} .exo-vue.jeu .exo-aide-txt{font-size:20px} .exo-vue.jeu .exo-carte{padding:20px 26px;margin-bottom:16px} .exo-vue.jeu .exo-q{font-size:24px;margin-bottom:14px} .exo-vue.jeu .exo-choix{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px} .exo-vue.jeu .exo-choix button{font-size:21px;min-height:66px;padding:12px 20px} .exo-vue.jeu .exo-choix button i{font-size:24px} .exo-vue.jeu .exo-img{max-height:420px!important} .exo-vue.jeu .exo-texte{font-size:26px;line-height:2.3} .exo-vue.jeu .exo-trou{font-size:24px;padding:4px 10px} .exo-vue.jeu .exo-banque button{font-size:22px;min-height:54px;padding:8px 18px} .exo-vue.jeu .exo-elem,.exo-vue.jeu .exo-case,.exo-vue.jeu .exo-pcarte{font-size:22px;min-height:70px;padding:10px 14px} .exo-vue.jeu .exo-elem img,.exo-vue.jeu .exo-case img,.exo-vue.jeu .exo-pcarte img{max-height:160px} .exo-vue.jeu .exo-jligne{gap:16px;margin-bottom:12px} .exo-vue.jeu .exo-oliste .exo-case{min-width:140px;max-width:320px} .exo-vue.jeu .exo-grp-grille{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .exo-vue.jeu .exo-grp{min-height:170px;padding:14px} .exo-vue.jeu .exo-grp-nom{font-size:21px} .exo-vue.jeu .exo-ecr-grille{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px} .exo-vue.jeu .exo-mem{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px} .exo-vue.jeu .exo-mem-carte.visible{font-size:20px} .exo-vue.jeu .exo-pe-lettre{width:40px;height:54px;font-size:34px} .exo-vue.jeu .exo-pe-signe{height:54px;font-size:34px} .exo-vue.jeu .exo-pe-clavier{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));max-width:900px;gap:8px} .exo-vue.jeu .exo-pe-clavier button{min-height:58px;font-size:24px} .exo-vue.jeu .exo-ml-liste{font-size:20px;min-width:200px} .exo-vue.jeu .exo-ml-case{font-size:clamp(16px,2.2vw,26px)} .exo-vue.jeu .exo-cr-case{font-size:clamp(16px,2vw,26px)} .exo-vue.jeu .exo-cr-defs{font-size:19px} .exo-vue.jeu .exo-axe-place .exo-case{font-size:17px} .exo-vue.jeu .exo-zone{font-size:18px;min-height:46px} .exo-vue.jeu .exo-pied .btn,.exo-vue.jeu .exo-bilan .btn{font-size:18px;min-height:54px;padding:10px 28px} .exo-vue.jeu .exo-chrono{font-size:20px} } .exo-oligne{display:flex;align-items:center;gap:10px;margin-bottom:8px} .exo-onum{width:26px;height:26px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:600;flex-shrink:0} .exo-ecr-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .exo-ecr-grille .exo-carte{margin-bottom:0} .exo-eleves{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px} .exo-eleves button{min-height:56px;font-size:15px;font-family:inherit;border:1px solid var(--border2);border-radius:var(--rl); background:var(--bg);color:var(--text);cursor:pointer;padding:10px} .exo-eleves button:hover{border-color:var(--teal);color:var(--teal-d)} .exo-eleves button.fav{border-color:var(--teal)} /* ── Écrans tactiles : des cibles plus grandes dans la gestion ───────────── Tablette et téléphone se pilotent au doigt, et les boutons pensés pour la souris (24 à 30 px de haut) se ratent. On vise environ 40 px pour les boutons, 36 px pour les petits et les icônes : assez pour le doigt, sans doubler la place prise. Seul l'agrandissement change — couleurs, disposition et textes restent les mêmes. « pointer: coarse » désigne un écran tactile, quelle que soit sa taille : une tablette en paysage en profite aussi. Le tableau blanc (body.wb-mode) a ses propres réglages de doigt et de stylet : il n'est pas concerné. */ @media (pointer: coarse){ body:not(.wb-mode) .btn{min-height:40px;padding:8px 15px;font-size:14px} body:not(.wb-mode) .btn.sm{min-height:36px;padding:6px 12px;font-size:13px} body:not(.wb-mode) .syl select{min-height:40px;font-size:15px} body:not(.wb-mode) .db{min-width:36px;min-height:36px;justify-content:center;font-size:17px} body:not(.wb-mode) .ni{padding:11px .9rem;font-size:14px} body:not(.wb-mode) .ni i{font-size:18px} body:not(.wb-mode) .fg input:not([type=checkbox]):not([type=radio]), body:not(.wb-mode) .fg select{min-height:42px;font-size:15px} body:not(.wb-mode) .fg textarea{font-size:15px} body:not(.wb-mode) input[type=checkbox], body:not(.wb-mode) input[type=radio]{width:20px;height:20px} } /* Le défi du jour (24/10/2026) */ .df-accueil{display:flex;flex-direction:column;gap:10px} .df-serie{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:14px;background:var(--bg2);font-size:15px;color:var(--text2);text-align:center} .df-serie.fini{background:var(--teal-l);color:var(--teal);font-weight:600} .df-etoiles{font-size:24px;letter-spacing:3px;color:var(--amber)} .el-exo .df-etoiles{font-size:15px;letter-spacing:1px} .df-jour{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:14px;background:var(--bg);cursor:pointer;font-family:inherit;color:var(--text);text-align:left} .df-jour:hover{border-color:var(--violet)} .df-jour.auj{border-color:var(--violet);padding:18px 16px} .df-jour.auj .df-t b{font-size:19px} .df-ic{font-size:28px;color:var(--violet);background:var(--violet-l);border-radius:12px;padding:8px} .df-t{flex:1;min-width:0} .df-t b{display:block;font-size:15px} .df-t span{display:block;font-size:13px;color:var(--text3)} .df-st{font-size:13px;color:var(--text2);white-space:nowrap} .df-jour.ok{border-color:var(--teal)} .df-jour.ok .df-st{color:var(--teal);font-weight:600} .df-jour.ko{border-style:dashed} .df-jour.ko .df-st{color:var(--red)} .df-rien{text-align:center;color:var(--text3);font-size:15px;padding:14px} .df-jours{display:flex;flex-wrap:wrap;gap:4px 14px} @media (max-width:480px){ .df-st{white-space:normal;text-align:right;max-width:110px} } /* Fluence : les lectures répétées (24/10/2026) */ #flu-mod{margin:12px 0} #flu-mod .flu-m.on{background:#F1ECFC;outline:3px solid #7B5CC4;outline-offset:1px;border-radius:5px} #flu-mod .flu-m.lu{color:var(--text2)} .flu-barres{display:flex;flex-direction:column;gap:6px;width:min(100%, 460px);margin:10px auto} .flu-bl{display:grid;grid-template-columns:92px 1fr 70px;align-items:center;gap:8px;font-size:14px} .flu-bl.cur{font-weight:700} .flu-bn{text-align:right;color:var(--text2)} .flu-bb{height:16px;border-radius:8px;background:var(--bg2);overflow:hidden} .flu-bb i{display:block;height:100%;border-radius:8px;background:#0E7C70} .flu-bl.cur .flu-bb i{background:repeating-linear-gradient(45deg,#0E7C70 0 8px,#139488 8px 16px)} .flu-bt{white-space:nowrap} /* Les sous-onglets de « Mon atelier » (24/10/2026) : sous l'onglet allumé, plus discrets. */ .wb-sous{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 16px} .wb-sous[hidden]{display:none} .wb-sous button{border:1px solid var(--border);background:var(--bg);color:var(--text2);border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;position:relative} .wb-sous button:hover{border-color:var(--teal);color:var(--teal-d)} .wb-sous button.on{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d)} .wb-sous button[hidden]{display:none} /* Fluence : la liste de décodage en grille, la grille de prosodie (24/10/2026) */ .flu-texte.liste p{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.3em .6em;text-align:center} .flu-texte.liste .flu-m{display:inline-block;padding:.1em .2em} .flu-pro{margin:10px 0 4px;border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;background:var(--bg)} .flu-pro summary{cursor:pointer;font-weight:700;font-size:14px} .flu-pro-t{color:#0E7C70;margin-left:6px} .flu-pro-l{display:grid;grid-template-columns:170px auto 1fr;align-items:center;gap:6px 10px;margin-top:6px;font-size:13px} .flu-pro-b{display:inline-flex;gap:4px} .flu-pro-b .btn.on{background:#0E7C70;border-color:#0E7C70;color:#fff;font-weight:700} .flu-pro-d{color:var(--text2)} @media (max-width:560px){ .flu-pro-l{grid-template-columns:1fr auto} .flu-pro-d{grid-column:1 / -1} } /* La roue de la chance (24/10/2026) */ .rou-roue{position:relative;width:min(320px,82vw);margin:6px auto 0} .rou-roue svg{display:block;width:100%;height:auto} .rou-disque{will-change:transform} .rou-rep{position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:28px solid #1b2436;z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))} .rou-t{fill:#fff;font-weight:800;paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:2px} .rou-res{min-height:44px;margin:10px 0 4px;font-size:26px;display:flex;align-items:center;justify-content:center;gap:10px} .rou-pt{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;color:#fff;font-weight:800;font-size:13px;flex-shrink:0} .rou-res .rou-pt{width:34px;height:34px;font-size:18px} .rou-mode{display:inline-flex;gap:12px;flex-wrap:wrap;font-size:13.5px} .rou-regl{margin:4px 0 8px;border:1px solid var(--border);border-radius:var(--r);padding:6px 10px;background:var(--bg)} .rou-regl summary{cursor:pointer;font-weight:700;font-size:14px} .rou-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:13.5px} .rou-nom{width:150px;padding:5px 8px;border:1px solid var(--border2);border-radius:8px;font:inherit} .rou-w input{width:56px;padding:4px 6px;border:1px solid var(--border2);border-radius:8px;font:inherit} .rou-p{color:var(--text2);margin-left:auto} .rou-col{position:relative;display:flex;align-items:flex-end;width:26px} .rou-col .dv-bar{width:26px;background-image:none!important} .rou-att{position:absolute;left:-5px;right:-5px;border-top:3px dashed #1b2436} .rou-barres small{font-size:12px;color:var(--text2);text-align:center;line-height:1.25} .rou-pp{color:var(--text3)} .rou-leg{display:flex;gap:16px;justify-content:center} .rou-leg span{display:inline-flex;align-items:center;gap:6px} .rou-leg-b{display:inline-block;width:14px;height:14px;border-radius:3px;background:#56606F} .rou-leg-a{display:inline-block;width:18px;border-top:3px dashed #1b2436} .flu-autres{margin-top:12px} .flu-autres>div:not(.exo-lab){display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;padding:3px 0;border-bottom:1px solid var(--border)} .flu-autres>div:not(.exo-lab) span{color:var(--text2)} /* Les compétences (24/10/2026) */ .cpt-choisies{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .cpt-puce{display:flex;align-items:flex-start;gap:6px;max-width:100%;padding:5px 6px 5px 10px;border:1px solid var(--teal);border-radius:10px;background:var(--teal-l);font-size:13px} .cpt-puce b{color:var(--teal-d);margin-right:2px} .cpt-puce button{border:none;background:none;color:var(--text2);cursor:pointer;padding:0 2px} #cpt-mb{z-index:650} /* au-dessus de l’éditeur d’exercice (.exo-vue) */ .cpt-mo{max-width:680px;width:96%;max-height:88vh;display:flex;flex-direction:column} .cpt-liste{overflow-y:auto;flex:1;margin-top:8px} .cpt-tete{font-weight:800;margin:10px 0 4px;color:var(--teal-d)} .cpt-dom{border:1px solid var(--border);border-radius:var(--r);margin:6px 0;padding:4px 8px;background:var(--bg)} .cpt-dom summary{cursor:pointer;font-weight:700;font-size:14px;padding:4px 0} .cpt-dom summary .cpt-fam{width:17px;height:17px;margin:0 6px 0 2px;vertical-align:-3px;accent-color:var(--teal);cursor:pointer} .cpt-dom .wb-coch{align-items:flex-start;border-bottom:none;padding:6px 4px} .cpt-nb{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--teal);color:#fff;font-size:12px;text-align:center} .exo-fiche-cpt{margin-top:8px;font-size:13px;color:var(--text2)} .exo-fiche-cpt li{margin:2px 0} /* « À écouter » sur la fiche d’un élève (25/10/2026) */ .vh-el-l{display:grid;gap:7px;margin-bottom:16px} .vh-el-l .wb-fav{width:100%;font:inherit;color:inherit;cursor:pointer} /* L'impression des exercices (25/10/2026) : un aperçu par-dessus tout, puis seules les feuilles s'impriment */ .impr{position:fixed;inset:0;z-index:5000;background:#dfe3e8;overflow:auto;color:#1a1a1a} .impr-barre{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--border);color:var(--text)} .impr-opt{display:flex;align-items:center;gap:6px;font-size:13.5px} .impr-opt span{color:var(--text3)} .impr-note{max-width:210mm;margin:12px auto 0;padding:8px 12px;border-radius:10px;background:#fff;font-size:13px;color:#444} .impr-pages{padding:16px 0 40px} .impr-feuille{box-sizing:border-box;width:210mm;max-width:calc(100% - 32px);min-height:297mm;margin:16px auto;padding:14mm 15mm;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.18);font:11.5pt/1.45 system-ui,"Segoe UI",Helvetica,Arial,sans-serif;color:#1a1a1a} .impr-tete{border-bottom:1.5pt solid #1a1a1a;padding-bottom:3mm;margin-bottom:5mm} .impr-id{display:flex;gap:6mm;font-size:10.5pt;margin-bottom:4mm} .impr-id span{flex:1;display:flex;gap:2mm} .impr-id i{flex:1;border-bottom:1px dotted #555} .impr-tete h1{font-size:17pt;margin:0 0 1mm;line-height:1.2} .impr-meta{font-size:10pt;color:#444} .impr-cpt{list-style:none;margin:2mm 0 0;padding:0;font-size:9.5pt;color:#333} .impr-cpt li{margin:.5mm 0} .impr-cpt .ti{display:none} .impr-cpt li::before{content:"◆ ";color:#0E7C70} .impr-corr-b{display:inline-block;margin-bottom:3mm;padding:1mm 3mm;border:1.5pt solid #0E7C70;border-radius:2mm;color:#0E7C70;font-weight:700} .impr-consigne{margin-bottom:5mm;font-weight:600} .impr-entete{display:block;max-width:100%;max-height:70mm;margin:0 auto 5mm} .impr-img{display:block;max-width:100%;max-height:60mm;margin:2mm 0} .impr-img-p{display:inline-block;max-height:22mm;max-width:40mm;vertical-align:middle;margin:0 1mm} .impr-son{font-style:italic;color:#444} .impr-qs{margin:0;padding-left:7mm} .impr-qs>li{margin-bottom:5mm;break-inside:avoid} .impr-props{list-style:none;margin:2mm 0 0;padding:0;display:flex;flex-wrap:wrap;gap:2mm 8mm} .impr-props li{display:flex;align-items:center;gap:2mm} .impr-case{display:inline-flex;align-items:center;justify-content:center;width:4.2mm;height:4.2mm;border:1.2pt solid #1a1a1a;flex-shrink:0;font-size:9pt;font-weight:700;color:#0E7C70} .impr-case.rond{border-radius:50%} .impr-case.carre{border-radius:.8mm} .impr-props li.ok{font-weight:700} .impr-props li.ok .impr-case{border-color:#0E7C70;background:#e6f3f1} .impr-ligne{display:block;height:8mm;border-bottom:1px solid #777} .impr-rl{margin-top:1mm} .impr-rep{color:#0E7C70;font-weight:700} .impr-aide{font-size:10pt;color:#444;font-style:italic;margin:1mm 0 3mm} .impr-texte{font-size:12.5pt;line-height:2.3} .impr-texte.centre{text-align:center} .impr-trou{display:inline-block;min-width:4em;border-bottom:1.2pt solid #1a1a1a;height:1.1em;vertical-align:baseline} .impr-trou.court{min-width:3em} .impr-trou-r{text-decoration:underline;text-underline-offset:3px} .impr-banque{display:flex;flex-wrap:wrap;gap:2mm 3mm;margin:0 0 5mm;padding:3mm;border:1px dashed #777;border-radius:2mm} .impr-banque>span{padding:.5mm 2mm;border:1px solid #999;border-radius:1.5mm} .impr-relier{display:grid;grid-template-columns:auto auto;justify-content:center;gap:0 30mm} .impr-rel{display:flex;align-items:center;gap:3mm;min-height:11mm;break-inside:avoid} .impr-rel.g{justify-content:flex-end;text-align:right} .impr-rel .pt{font-size:9pt} .impr-tab{width:100%;border-collapse:collapse} .impr-tab td,.impr-tab th{border:1px solid #777;padding:2mm;vertical-align:top;text-align:left} .impr-tab td.n{width:10mm;text-align:center;font-weight:700} .impr-tab td.l{width:14mm;white-space:nowrap;text-align:center} .impr-col{min-height:80mm} .impr-ordre{display:grid;gap:3mm} .impr-ordre>div{display:flex;align-items:center;gap:3mm;break-inside:avoid} .impr-num{display:inline-block;width:9mm;height:9mm;border:1.2pt solid #1a1a1a;border-radius:1.5mm;flex-shrink:0} .impr-ordre-c li{margin-bottom:2mm} .impr-h2{font-size:13pt;margin:5mm 0 2mm} .impr-calc{columns:2;column-gap:14mm;padding-left:8mm;font-size:13pt} .impr-calc li{margin-bottom:5mm;break-inside:avoid} /* L'impression, étape 2 (26/10/2026) : les grilles et les figures */ .impr .exo-carte,.impr .fra-q{background:#fff;box-shadow:none;border:1px solid #bbb;color:#1a1a1a} .impr input{background:#fff!important;color:#1a1a1a;border:1px solid #555!important;opacity:1} .impr-ml-z,.impr-cr-z{display:flex;flex-wrap:wrap;gap:8mm;align-items:flex-start} .impr-ml{border-collapse:collapse;font:600 12pt/1 ui-monospace,Consolas,monospace} .impr-ml td{width:7mm;height:7mm;text-align:center;border:1px solid #999} .impr-ml td.m{background:#d5ebe7;outline:1.5pt solid #0E7C70;outline-offset:-2px;color:#0E7C70} .impr-ml-l{columns:2;column-gap:8mm;margin:0;padding-left:5mm;font-size:11pt} .impr-cr{border-collapse:collapse} .impr-cr td{width:7.5mm;height:7.5mm;padding:0;position:relative;text-align:center;font:700 12pt/1 system-ui,sans-serif} .impr-cr td.c{border:1.2pt solid #1a1a1a} .impr-cr td.c span{position:absolute;left:.6mm;top:.3mm;font-size:6.5pt;font-weight:400} .impr-cr td.c b{color:#0E7C70} .impr-cr tr.sep td{height:3mm;border-top:1px dashed #777} .impr-cr-d{flex:1;min-width:60mm} .impr-cr-d ol{list-style:none;padding:0;margin:0 0 3mm} .impr-cr-d li{margin-bottom:1.5mm} .impr-aide-n{color:#666;font-size:9pt} .impr-pose .pos-op{break-inside:avoid;border:none;padding:0;margin:0 0 6mm} .impr-pose{display:flex;flex-wrap:wrap;gap:8mm} .impr-fra .fra-q{break-inside:avoid} .impr-fra-q{display:flex;gap:2mm;align-items:flex-start;margin-bottom:4mm;break-inside:avoid} .impr-fra-q>.fra-q{flex:1} .impr-fra-n{padding-top:3mm} .impr-fra .fra-signes{display:none} .impr-corrige .fra-cons i.ti,.impr-corrige .fra-aide{display:none} .impr-zone{display:inline-flex;align-items:center;justify-content:center;min-width:16mm;min-height:7mm;padding:.5mm 1.5mm;border:1.2pt solid #1a1a1a;border-radius:1.5mm;background:#fff;font-size:10pt} .impr-zone i{font-style:normal;font-size:7pt;color:#777;align-self:flex-start} .impr-zone.r{border-color:#0E7C70;color:#0E7C70;font-weight:700} .impr-axe .exo-axe-defile{overflow:visible} .impr-axe .exo-axe{min-width:0!important} .impr-fond{position:relative;display:inline-block;max-width:100%} .impr-fond-i{display:block;max-width:100%;max-height:190mm} .impr-fond .impr-zone{position:absolute;transform:translate(-50%,-50%)} .impr-cod{padding-left:7mm} .impr-cod li{display:flex;align-items:center;gap:4mm;margin-bottom:4mm;break-inside:avoid} .impr-emo{font-size:22pt} .impr-cod-c{display:inline-flex;gap:1mm} .impr-cod-c i{width:8mm;height:9mm;border:1.2pt solid #1a1a1a;border-radius:1mm} .impr-cod-r{font-size:14pt} .impr-cod-r .cod-ap-syl{margin-right:2mm;border-bottom:2px solid #0E7C70} .impr-cod-r .cod-ap-g.muet{color:#999} .impr-plaque{display:inline-block;min-width:7mm;padding:.5mm 1.5mm;border:1.2pt solid #1a1a1a;border-radius:1.5mm;text-align:center;font-weight:700} .impr-cible{font-size:13pt} .impr-lg{break-inside:avoid;margin-bottom:6mm} .impr-lg .py-b{background:#fff;color:#1a1a1a;border-color:#1a1a1a} .impr-lg .py-b.montre{background:#eee} .impr-sc{border-collapse:collapse} .impr-sc td{width:11mm;height:11mm;border:1.2pt solid #1a1a1a;text-align:center;font-size:13pt} .impr-sc td.d{background:#eee;font-weight:700} .impr-sc td.t{border:none;font-size:11pt;white-space:nowrap;padding:0 2mm} /* L'impression, étape 3 (26/10/2026) : l'écriture, les jeux à découper, la fluence, les textes à lire */ .impr-tcr{break-inside:avoid;margin-bottom:6mm} .impr-tcr-l{display:flex;gap:0;overflow:hidden} .impr-tcr-l .tcr-svg{height:30mm;width:auto;flex-shrink:0} .impr-tcr-v .tcr-svg{display:block;width:100%;height:30mm} .impr-tcr-v .tcr-l{vector-effect:non-scaling-stroke;stroke-width:1px} .impr-tcr-v .tcr-l.base,.impr-tcr-v .tcr-l.fort{stroke-width:1.6px} .impr-graf .tcr-svg,.impr-tcr>.tcr-svg{display:block;width:100%;height:auto;max-height:34mm;margin:0 0 2mm} .impr-tcr .tcr-l{stroke:#9bb} .impr-tcr .tcr-l.base{stroke:#0E7C70} .impr-tcr .tcr-m{stroke:#1a1a1a} .impr-tcr .tcr-m.pt{stroke:#555} .impr-cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .impr-cartes.q{grid-template-columns:repeat(3,1fr)} .impr-carte{position:relative;min-height:32mm;padding:3mm;border:1px dashed #777;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;break-inside:avoid;font-size:12pt} .impr-cartes.q .impr-carte{align-items:flex-start;justify-content:flex-start;text-align:left;font-size:10.5pt} .impr-carte ul{margin:1mm 0 0;padding-left:4mm} .impr-carte-n{position:absolute;right:2mm;top:1mm;font-size:8pt;color:#777} .impr-img-c{max-height:24mm;max-width:100%;display:block;margin:1mm auto} .impr-doms{display:grid;grid-template-columns:repeat(2,1fr);gap:3mm} .impr-dom{display:grid;grid-template-columns:1fr 1fr;border:1.5pt solid #1a1a1a;border-radius:2mm;min-height:26mm;break-inside:avoid;outline:1px dashed #999;outline-offset:1.5mm} .impr-dom span{display:flex;align-items:center;justify-content:center;text-align:center;padding:2mm} .impr-dom span+span{border-left:1.2pt solid #1a1a1a} .impr-cartons{display:grid;grid-template-columns:repeat(2,1fr);gap:5mm;margin-bottom:5mm} .impr-carton{break-inside:avoid} .impr-carton>div{display:grid;border:1.5pt solid #1a1a1a} .impr-carton>div>div{min-height:20mm;border:1px solid #777;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5mm;font-size:10.5pt} .impr-flu p{margin:0 0 3mm;line-height:1.7} .impr-flu.t-moyen{font-size:13pt} .impr-flu.t-grand{font-size:16pt} .impr-flu.t-tresgrand{font-size:20pt} .impr-flu-a{width:100%;border-collapse:collapse;font-size:11pt} .impr-flu-a td{padding:1.2mm 2mm;border-bottom:1px solid #ddd;vertical-align:top} .impr-flu-a td.n{width:12mm;text-align:right;color:#0E7C70;font-weight:700} .impr-flu-c{display:grid;grid-template-columns:repeat(3,1fr);gap:3mm;margin:5mm 0 3mm} .impr-flu-c div{border:1.2pt solid #1a1a1a;border-radius:2mm;padding:2mm 3mm} .impr-flu-c span{display:block;font-size:9pt;color:#444} .impr-flu-c b{font-size:13pt} .impr-lec{border:none!important;background:#fff!important;box-shadow:none!important} .impr-voix li{margin-bottom:6mm;font-size:14pt;break-inside:avoid} @page{size:A4;margin:10mm} @media print{ body.impr-on>*:not(#impr){display:none!important} body.impr-on{background:#fff!important} .impr{position:static;overflow:visible;background:#fff} .impr-barre,.impr-note{display:none} .impr-pages{padding:0} .impr-feuille{width:auto;max-width:none;min-height:0;margin:0;padding:0;box-shadow:none;break-after:page} .impr-feuille:last-child{break-after:auto} } /* Ludiscapade (partie 12) : l'onglet de l'enseignant */ .lpd-tete h3{margin:0 0 4px} .lpd-jeux{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:12px} .lpd-jeu{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);cursor:pointer;font:inherit;color:inherit} .lpd-jeu:hover{border-color:var(--violet)} .lpd-jeu b{font-size:16px}.lpd-meta{font-size:12.5px;color:var(--text2)}.lpd-res{font-size:13px;color:var(--text2)} .lpd-ouv{font-size:12.5px;color:var(--teal);font-weight:600} .lpd-fiche{margin-top:12px;padding:14px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg)} .lpd-fiche h3{margin:0}.lpd-fiche h4{margin:18px 0 6px} .lpd-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0} .lpd-ouv-l{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)} .lpd-regl{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px} .lpd-suivi{width:100%;border-collapse:collapse;font-size:13px}.lpd-suivi th,.lpd-suivi td{border-bottom:1px solid var(--border);padding:6px 8px;text-align:left} .lpd-mo{max-width:720px;width:95%;max-height:90vh;overflow:auto} .lpd-g-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;margin-top:10px} .lpd-g-el{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:13px} .lpd-saisie{overflow-x:auto}.lpd-saisie table{border-collapse:collapse;font-size:13px}.lpd-saisie th,.lpd-saisie td{border:1px solid var(--border);padding:4px 6px;white-space:nowrap}.lpd-saisie th small{display:block;font-weight:400;color:var(--text2)} /* Le schéma en barres (27/10/2026) */ .sb-pb{display:flex;flex-direction:column;gap:4px;margin:6px 0 10px} .sb-pb textarea{width:100%;font:inherit;font-size:16px;padding:8px 10px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);resize:vertical} .sb-q{font-weight:700;margin:6px 0} .sb-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:8px 0} .sb-carte{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:12px;border:2px solid var(--border);border-radius:14px;background:var(--bg);color:var(--text);cursor:pointer;font:inherit} .sb-carte:hover{border-color:#0E7C70} .sb-carte.on{border-color:#0E7C70;box-shadow:0 0 0 3px rgba(14,124,112,.2)} .sb-carte small{opacity:.75} .sb-mini{width:120px;height:42px;color:var(--text)} .sb-autre{margin:4px 0 10px} .sb-autre summary{cursor:pointer;padding:6px 0} .sb-corps{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start} .sb-z{flex:2 1 380px;min-width:0;background:var(--bg);border-radius:16px;padding:12px;color:var(--text)} .sb-fig{width:100%;height:auto;display:block} .sb-v{font-size:24px;font-weight:700;fill:#13202f} .sb-v.q{fill:#5B47B8;font-weight:800} .sb-l.q{fill:var(--violet);font-weight:800} .sb-l{font-size:20px;font-weight:600;fill:currentColor} .sb-n{font-size:22px;font-weight:700;fill:currentColor} .sb-form{flex:1 1 300px;display:flex;flex-direction:column;gap:8px} .sb-l1{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .sb-e{flex-basis:100%;font-weight:600;font-size:14px} .sb-form>.btn{align-self:flex-start} .sb-i{font:inherit;font-size:16px;padding:6px 8px;border:1.5px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);width:130px} .sb-i.n{width:90px} .sb-i:disabled{border-style:dashed;border-color:#7B5CC4} .sb-inc{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1.5px dashed transparent;border-radius:8px;cursor:pointer;font-size:14px} .sb-inc b{color:#7B5CC4} .sb-inc.on{border-color:#7B5CC4;background:rgba(123,92,196,.1)} .sb-calc{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(14,124,112,.1)} .sb-z:fullscreen{display:flex;flex-direction:column;justify-content:center;padding:4vw} /* L'activité « Schéma en barres » (27/10/2026) */ .sbx-fil{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px} .sbx-fil span{padding:4px 10px;border-radius:999px;border:1.5px solid var(--border);font-size:13px;color:var(--text2)} .sbx-fil span.on{border-color:#0E7C70;color:var(--text);font-weight:700} .sbx-fil span.fait{border-style:dashed;color:var(--teal)} .sbx-enonce{font-size:19px;line-height:1.5;margin:4px 0 10px;padding:10px 14px;border-left:4px solid var(--teal);background:var(--bg3);border-radius:8px} .sbx-msg{margin:8px 0;padding:10px 12px;border-radius:10px;font-weight:600;display:flex;gap:8px;align-items:flex-start} .sbx-msg.ok{background:var(--teal-l);color:var(--text)} .sbx-msg.ko{background:var(--violet-l);color:var(--text);border:1.5px dashed var(--violet)} .sbx-rep{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px} .sbx-l{display:flex;gap:8px;align-items:center;font-weight:600;flex-wrap:wrap} .sbx-ph .sb-i{width:min(360px,80vw)} .sb-calc.ko{background:var(--violet-l)} .sbe-img{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap} .sbe-mods{margin:6px 0 10px} .impr-sb li{margin-bottom:18px;break-inside:avoid} .impr-sb-4{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:6px 0} .impr-sb-4 b{font-size:12px} .impr-sb-4 svg{width:100%;height:auto} .impr-sb-f svg{width:100%;max-width:460px;height:auto} .sbx .sb-z{max-width:680px} .sbx .sb-corps .sb-z{max-width:none} .el-escapade{text-align:center;margin:14px 0 0;font-weight:600} .el-escapade span{display:block;font-weight:400;font-size:13px;color:var(--text3)} /* La séance en classe (Ludiscapade, 27/10/2026) : le panneau de l'enseignant, le code à projeter */ .lpd-seance{border:1.5px solid var(--border);border-radius:12px;padding:10px 12px;margin:8px 0;background:var(--bg)} .lpd-seance-t{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px} .lpd-code{font-size:22px;font-weight:800;letter-spacing:.1em;padding:2px 10px;border:2px dashed var(--violet);border-radius:8px} .lpd-g-noms{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;margin:6px 0} .lpd-code-z{position:fixed;inset:0;z-index:1200;background:rgba(15,20,30,.55);display:flex;align-items:center;justify-content:center;padding:16px} .lpd-code-c{background:var(--bg);color:var(--text);border-radius:18px;padding:22px 26px;text-align:center;max-width:min(560px,100%);max-height:100%;overflow:auto} .lpd-code-g{font-size:clamp(40px,9vw,72px);font-weight:900;letter-spacing:.12em;margin:6px 0} .lpd-qr{display:inline-block;padding:10px;background:#fff;border-radius:10px} .lpd-qr img,.lpd-qr canvas{display:block;width:240px;height:240px} .lpd-code-n{font-weight:700} .lpd-nom{font:inherit;padding:6px 8px;border:1.5px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)} .lpd-code-z[hidden]{display:none} /* Le tableau de bord en direct (27/10/2026) */ .lpd-tab-z{position:fixed;inset:0;z-index:1150;background:var(--bg2);overflow:auto;padding:16px} .lpd-tab-z[hidden]{display:none} .lpd-tab-tete{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px} .lpd-tab-tete h2{margin:0 12px 0 0;display:flex;gap:10px;align-items:center} .lpd-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin:10px 0} .lpd-carte{display:flex;flex-direction:column;gap:6px;padding:12px;border:2px solid var(--border);border-radius:14px;background:var(--bg)} .lpd-carte.bloque{border:3px dashed var(--red)} .lpd-carte.fini{border-color:var(--teal)} .lpd-carte-t{display:flex;justify-content:space-between;gap:6px;align-items:baseline;font-size:17px} .lpd-tab{font-size:12.5px;color:var(--text2)} .lpd-carte-l{font-size:13.5px} .lpd-alerte{font-weight:700;color:var(--red);background:var(--red-l);border-radius:8px;padding:4px 8px} .lpd-chaudron{display:flex;gap:6px} .lpd-ing{position:relative;width:38px;height:38px;border:2px dashed var(--border);border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center} .lpd-ing.ok{border:2px solid var(--teal)} .lpd-ing img{width:100%;height:100%;object-fit:contain;opacity:.35;filter:grayscale(1)} .lpd-ing.ok img{opacity:1;filter:none} .lpd-ing b{position:absolute;right:0;bottom:-2px;font-size:12px;background:var(--bg);border-radius:50%;padding:0 2px} .lpd-ing.ok b{color:var(--teal)} .lpd-barre{display:block;height:10px;border-radius:5px;background:var(--bg2);overflow:hidden;border:1px solid var(--border)} .lpd-barre span{display:block;height:100%;background:var(--teal)} .lpd-tab-msg{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .lpd-tab-msg input{flex:1 1 140px;font:inherit;font-size:14px;padding:5px 8px;border:1.5px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)} .lpd-tab-msg select{flex:1 1 140px;font:inherit;font-size:14px;padding:4px 6px;max-width:100%} .lpd-tous{min-width:280px} .lpd-puce{font:inherit;font-size:13px;padding:3px 9px;border:1.5px solid var(--border);border-radius:999px;background:var(--bg);color:var(--text);cursor:pointer;margin:2px} .lpd-tab.projeter .lpd-cartes{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} .lpd-tab.projeter .lpd-carte-t{font-size:24px} .lpd-tab.projeter .lpd-ing{width:56px;height:56px} .lpd-tab.projeter .lpd-barre{height:18px} .lpd-tab.projeter small,.lpd-tab.projeter .lpd-carte-l:not(.lpd-av),.lpd-tab.projeter .lpd-tab,.lpd-tab.projeter .lpd-alerte{display:none} .lpd-tab.projeter .lpd-av{font-size:20px} .lpd-tab.projeter .lpd-carte.bloque{border:2px solid var(--border)} .lpd-dipl-z{position:fixed;inset:0;z-index:1250;background:var(--bg2);overflow:auto;padding:16px} .lpd-dipl-z[hidden]{display:none} .lpd-dip{max-width:680px;margin:0 auto 18px;padding:28px;text-align:center;border:6px double var(--violet);border-radius:14px;background:#fff;color:#1B2436} .lpd-dip-t{font-size:26px;font-weight:800} .lpd-dip-n{font-size:22px;font-weight:700} .lpd-dip-x{font-style:italic} .lpd-dip-s{display:flex;gap:8px;align-items:center;justify-content:flex-end;font-weight:700} .lpd-dip-s img{width:44px;height:44px;border-radius:50%;object-fit:cover} .lpd-dip-barre{display:flex;gap:8px;justify-content:center;margin:10px} @media print{body.lpd-dipl-impr>*:not(#lpd-dipl-z){display:none!important}body.lpd-dipl-impr #lpd-dipl-z{position:static;padding:0;background:#fff}body.lpd-dipl-impr .lpd-dip-barre{display:none}body.lpd-dipl-impr .lpd-dip{page-break-after:always;margin-top:30mm}} /* ══ Repérer les mots (27/10/2026) : trois crayons, chacun sa couleur ET son trait ══ */ .rep-z{font-size:22px;line-height:2.4;user-select:none;-webkit-user-select:none;touch-action:none;padding:4px 2px;overflow-wrap:anywhere} .rep-z.fige{touch-action:auto} .rep-m{cursor:pointer;border-radius:4px} .rep-z.fige .rep-m{cursor:default} .rep-z:not(.fige) .rep-m:hover{background:var(--bg2)} .rep-m.pre{background:var(--bg2);outline:2px dashed var(--text3);outline-offset:1px} .rep-g{padding:2px 2px 1px;border-radius:4px 4px 0 0} .rep-g.rc0{background:var(--teal-l);border-bottom:3px solid var(--teal)} .rep-g.rc1{background:var(--red-l);border-bottom:6px double var(--red)} .rep-g.rc2{background:var(--violet-l);border-bottom:3px dotted var(--violet)} .rep-g.faux{outline:2px dashed var(--text2);outline-offset:2px} .rep-g.corr{outline:3px double var(--corr);outline-offset:3px} .rep-v{font-style:normal;font-size:.62em;font-weight:700;vertical-align:super;margin-left:2px} .rep-g.ok .rep-v{color:var(--green)}.rep-g.faux .rep-v{color:var(--red)} .rep-ech{display:inline-block;width:28px;height:4px;vertical-align:middle;margin-right:4px} .rep-ech.rc0{border-bottom:3px solid var(--teal)}.rep-ech.rc1{border-bottom:6px double var(--red)}.rep-ech.rc2{border-bottom:3px dotted var(--violet)} .rep-crs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px} .rep-cr{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border:1.5px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);font:inherit;font-size:15px;cursor:pointer} .rep-cr.on{border:2.5px solid var(--text);background:var(--bg2);font-weight:700} .rep-cr-l{display:flex;align-items:center;gap:8px;margin:6px 0} .rep-cr-l input{flex:1;min-width:0} .rep-cr-trait{font-size:12.5px;color:var(--text3);min-width:92px} .rep-ph-t{display:flex;align-items:center;gap:8px;margin-bottom:6px} .rep-ta{width:100%;font-size:16px;margin-bottom:6px;resize:vertical} .rep-aide-ed{font-size:13.5px;color:var(--text2)} .rep-aide-ed .ti{color:var(--teal);margin-right:4px} .rep-compte{font-size:14px;color:var(--text2);margin:0 0 4px} ol.impr-rep{padding-left:22px;margin:0;color:inherit;font-weight:400} /* (la liste de Repérer les mots ; .impr-rep seul : une réponse ✓ du corrigé) */ ol.impr-rep li{margin:0 0 12px} .impr-rep .rep-z{font-size:15pt;line-height:2.3;touch-action:auto} .impr-rep .rep-g{background:none} .impr-rep-leg{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 10px;font-size:11pt} /* Le geste groupé : la liste des contenus à republier */ .pt-vg{margin:0 0 12px;padding-left:20px;max-height:180px;overflow:auto;font-size:13.5px} .pt-vg span{color:var(--amber)} /* Après « Enregistrer » sur un original partagé : proposer la nouvelle version */ #pt-proposer{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:900;display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:min(680px,calc(100vw - 32px)); background:var(--bg);color:var(--text);border:1px solid var(--teal);border-radius:12px;padding:10px 14px;box-shadow:0 8px 28px rgba(0,0,0,.16);font-size:13.5px;line-height:1.45} #pt-proposer[hidden]{display:none} #pt-proposer > i{color:var(--teal);font-size:20px} #pt-proposer > span{flex:1;min-width:200px} /* La géométrie (partie 13, 28/10/2026) : la feuille en cm, les instruments, les codages */ .geo-z{display:flex;flex-direction:column;gap:8px;background:var(--bg)} /* Les solides (partie 15, 29/10/2026) */ .sol-z{display:flex;gap:12px;align-items:stretch;background:var(--bg);min-height:560px} .sol-z:fullscreen{padding:12px;height:100vh;box-sizing:border-box} .sol-g,.sol-d{flex:0 0 220px;display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--border);border-radius:var(--rl);background:var(--bg);overflow:auto} .sol-d{flex-basis:250px;gap:8px} .sol-c{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--border);border-radius:var(--rl)} .sol-t{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text2)} .sol-sol{display:flex;align-items:center;gap:8px;width:100%;min-height:42px;padding:0 10px;border:1px solid transparent;border-radius:var(--r);background:none;color:var(--text);font:inherit;font-size:14px;cursor:pointer;text-align:left} .sol-sol small{margin-left:auto;font-size:11px;color:var(--text3)} .sol-sol.on{background:var(--teal-l);border-color:var(--teal);font-weight:600} .sol-mes{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:13px} .sol-mes input{width:62px;padding:5px 6px;border:1px solid var(--border2);border-radius:var(--r);font:inherit;background:var(--bg);color:var(--text)} .sol-opts{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap} .sol-vues{display:inline-flex;gap:4px} .sol-svg{flex:1 1 auto;min-height:340px;width:100%;background:var(--bg2);border-radius:var(--r);touch-action:none;cursor:grab;user-select:none} .sol-svg.prise{cursor:grabbing} .sol-f{stroke:none} .sol-f.on{stroke:var(--teal);stroke-width:4} .sol-ar{stroke:var(--text);stroke-width:2;stroke-linecap:round} .sol-ar.cache{stroke:var(--text2);stroke-width:1.5;stroke-dasharray:7 6} .sol-ar.on{stroke:var(--teal);stroke-width:6} .sol-ar-t{stroke:transparent;stroke-width:16;cursor:pointer} .sol-som{fill:var(--bg);stroke:var(--text);stroke-width:2;cursor:pointer} .sol-som.on{fill:var(--teal);stroke:var(--teal)} .sol-num{font-size:22px;font-weight:700;fill:#1B2436;text-anchor:middle;dominant-baseline:central;pointer-events:none} .sol-ok{font-size:22px;font-weight:700;fill:#0A6158;text-anchor:middle;dominant-baseline:central;pointer-events:none} .sol-som.on+.sol-ok{fill:#fff;font-size:12px} .sol-pli{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .sol-pli input[type=range]{flex:1 1 160px;accent-color:var(--teal)} .sol-gris{font-size:12.5px;color:var(--text2);margin:0} .sol-aide{font-size:12.5px;color:var(--text3)} .sol-cpt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .sol-cpt-b{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font:inherit;cursor:pointer} .sol-cpt-b b{font-size:20px}.sol-cpt-b span{font-size:12px;color:var(--text2)} .sol-cpt-b.on{border:2px solid var(--teal);background:var(--teal-l)} .sol-l{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px} .sol-res{padding:8px 10px;border-radius:var(--r);font-size:13px} .sol-res.ok{background:var(--teal-l);color:var(--teal-d,#0A6158)} .sol-res.ko{background:#FDF0E8;color:#7A2E0B} .sol-sep{height:1px;background:var(--border);margin:4px 0} .sol-pats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .sol-pat{display:grid;place-items:center;height:58px;padding:3px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);cursor:pointer} .sol-pat polygon{fill:var(--bg);stroke:var(--text);stroke-width:1} .sol-pat.on{border:2px solid var(--teal)}.sol-pat.on polygon{fill:var(--teal-l)} .sol-pat polygon.l{stroke:none} .sol-impr .sol-i-f{fill:#fff;stroke:none} .sol-impr .sol-i-lang{fill:#E6E6E6;stroke:#000;stroke-width:0.02} .sol-impr .sol-i-cut{stroke:#000;stroke-width:0.025} .sol-impr .sol-i-pli{stroke:#000;stroke-width:0.02;stroke-dasharray:0.15 0.12} .sol-impr .sol-i-num{font-size:0.6px;fill:#999;text-anchor:middle;dominant-baseline:central} @media (max-width:900px){.sol-z{flex-direction:column}.sol-g,.sol-d{flex-basis:auto}} .sol-modes{margin-bottom:10px;flex-wrap:wrap} .sol-g>.btn{width:100%;justify-content:flex-start;margin-top:4px} .sol-q{fill:var(--bg);stroke:#C9D3E0;stroke-width:1;cursor:pointer} .sol-q.on{fill:#CDEFEA;stroke:#1B2436;stroke-width:2} .sol-q.trop{fill:#FBE3D3;stroke:#C2410C;stroke-width:2.5;stroke-dasharray:8 5} .sol-ko{font-size:26px;font-weight:700;fill:#7A2E0B;text-anchor:middle;dominant-baseline:central;pointer-events:none} .sol-cube{stroke:#1B2436;stroke-width:1.4;stroke-linejoin:round} .sol-vide{font-size:16px;fill:var(--text2);text-anchor:middle} .sol-plan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:6px 0 2px} .sol-plan-c{aspect-ratio:1;border:1px dashed var(--border2);border-radius:6px;background:var(--bg);color:var(--text);font:inherit;font-size:18px;font-weight:700;cursor:pointer} .sol-plan-c.p{border:1.5px solid var(--text);background:#CDEFEA;color:#1B2436} .sol-vg{display:flex;gap:10px;flex-wrap:wrap} .sol-vg figure{margin:0;text-align:center;font-size:12px;color:var(--text2)} .sol-vg rect{fill:var(--bg);stroke:#C9D3E0;stroke-width:1;stroke-dasharray:2 2} .sol-vg rect.p{fill:#CDEFEA;stroke:#1B2436;stroke-dasharray:none} .sol-calc{margin:0 0 6px;font-size:14px} .sol-tab{flex:1 1 auto;overflow:auto} .sol-tableau{border-collapse:collapse;width:100%;font-size:14px} .sol-tableau th,.sol-tableau td{border:1px solid var(--border);padding:6px 8px;text-align:center} .sol-tableau th{background:var(--bg3);font-weight:600} .sol-tableau td:first-child,.sol-tableau th:first-child{text-align:left} .sol-tableau input{width:56px;padding:4px 6px;border:1px solid var(--border2);border-radius:6px;font:inherit;text-align:center;background:var(--bg);color:var(--text)} .sol-euler{font-weight:700;color:var(--teal-d)} .sol-okt{color:var(--teal-d)}.sol-kot{color:#C2410C} /* Le type d'exercice « Les solides » (29/10/2026) */ .solx-svg{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;background:var(--bg2);border-radius:var(--r)} .solx-choix{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .solx-c{min-height:44px;flex-direction:column;gap:4px} .solx-c.on{border:2px solid var(--violet);background:var(--violet-l)} .solx-c.bon{border:2px solid var(--teal);background:var(--teal-l)} .solx-centre{display:flex;justify-content:center;margin:6px 0} .solx-pat rect{fill:var(--bg);stroke:var(--text);stroke-width:1.5} .solx-pat rect[onclick]{cursor:pointer} .solx-pat rect.grise{fill:#9AA5B6} .solx-pat rect.choisie{fill:var(--violet-l)} .solx-pat rect.bon{fill:var(--teal-l)} .solx-pat rect.trop{fill:#FBE3D3;stroke:#C2410C;stroke-dasharray:5 4;stroke-width:2} .solx-pt{fill:#0E7C70}.solx-tri{fill:#7B5CC4} .solx-vue rect{fill:var(--bg);stroke:#C9D3E0;stroke-dasharray:2 2} .solx-vue rect.p{fill:#CDEFEA;stroke:#1B2436;stroke-dasharray:none} .solx-pli{margin-top:6px} /* Les sections (29/10/2026) : le plan en violet clair, la section en violet, pointillés au bord du plan */ .sol-plan-coupe{fill:#7B5CC4;fill-opacity:.12;stroke:#7B5CC4;stroke-width:1.5;stroke-dasharray:8 6;pointer-events:none} .sol-section{fill:#7B5CC4;fill-opacity:.55;stroke:#4B2E9A;stroke-width:3;stroke-linejoin:round;pointer-events:none} .sol-sec-2d polygon{fill:#E6DEF7;stroke:#4B2E9A;stroke-width:2.5;stroke-linejoin:round} .sol-pli select{height:34px;border:1px solid var(--border2);border-radius:var(--r);font:inherit;font-size:13px;background:var(--bg);color:var(--text)} .geo-z:fullscreen{padding:12px;overflow:auto} .geo-barre{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .geo-barre .syl-ch{font-size:13px} .geo-ins.on{background:var(--teal);border-color:var(--teal);color:#fff} .geo-sep{width:1px;height:24px;background:var(--border);margin:0 4px} .geo-seg{display:inline-flex;border:1px solid var(--border2);border-radius:var(--r);overflow:hidden} .geo-seg button{border:0;background:var(--bg);color:var(--text);font:inherit;font-size:12.5px;padding:5px 10px;cursor:pointer} .geo-seg button.on{background:var(--teal-l);color:var(--teal-d);font-weight:600} .geo-milieu{display:flex;gap:8px;align-items:flex-start;min-width:0} .geo-outils{display:flex;flex-direction:column;gap:2px;flex-shrink:0;max-height:72vh;overflow-y:auto} .geo-outils-t{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);text-align:center;border-top:1px solid var(--border);margin-top:6px;padding-top:6px} .geo-outil{display:flex;flex-direction:column;align-items:center;gap:2px;width:70px;padding:6px 2px;border:1px solid transparent;border-radius:10px;background:none;color:var(--text2);font:inherit;font-size:10.5px;line-height:1.15;cursor:pointer;text-align:center} .geo-outil:hover{background:var(--bg2)} .geo-outil.on{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d);font-weight:600} .geo-outil svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .geo-svg{display:block;flex:none;min-width:0;width:100%;height:66vh;background:#fff;border:1px solid var(--border);border-radius:var(--r);touch-action:none;user-select:none;-webkit-user-select:none} .geo-svg[data-outil="deplacer"]{cursor:grab}.geo-svg:not([data-outil="deplacer"]){cursor:crosshair} .geo-svg text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;pointer-events:none} .geo-trait{fill:none;stroke:#243B6B;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round} .geo-main{stroke:#4F5B70;stroke-width:1.6px} .geo-apercu{stroke:#0E7C70;stroke-dasharray:6 5} .geo-hit{fill:none;stroke:transparent;stroke-width:16px;vector-effect:non-scaling-stroke} .geo-code{fill:none;stroke:#5B47B8;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round} .geo-mes{fill:#4F5B70;text-anchor:middle} .geo-nom{fill:#243B6B;font-weight:600} .geo-pt{fill:#fff;stroke:#0E7C70;stroke-width:2px;vector-effect:non-scaling-stroke} .geo-pt-z{fill:transparent} .geo-croix{fill:none;stroke:#000;stroke-width:1.2px;vector-effect:non-scaling-stroke} .geo-croix.e{stroke:#243B6B;stroke-width:2px;stroke-linecap:round} .geo-regle{fill:#FFF7D6;fill-opacity:.93;stroke:#B59A4A;stroke-width:1.2px;vector-effect:non-scaling-stroke;cursor:grab} .geo-regle-t{stroke:#5C4B12;stroke-width:1px;vector-effect:non-scaling-stroke} .geo-regle-n{fill:#5C4B12;text-anchor:middle} .geo-eq{fill:#0E7C70;fill-opacity:.13;stroke:#0E7C70;stroke-width:1.5px;vector-effect:non-scaling-stroke;cursor:grab} .geo-eq-t{fill:none;stroke:#0A6158;stroke-width:1px;vector-effect:non-scaling-stroke;pointer-events:none} .geo-rap{fill:#5B47B8;fill-opacity:.09;stroke:#5B47B8;stroke-width:1.2px;vector-effect:non-scaling-stroke;cursor:grab} .geo-rap-t{fill:none;stroke:#5B47B8;stroke-width:1px;vector-effect:non-scaling-stroke;pointer-events:none} .geo-rap-n{fill:#5B47B8;text-anchor:middle} .geo-poig{fill:#fff;stroke-width:1.5px;vector-effect:non-scaling-stroke;cursor:alias} .geo-poig.r{stroke:#B59A4A}.geo-poig.e{stroke:#0E7C70}.geo-poig.v{stroke:#5B47B8}.geo-poig.c{stroke:#4F5B70} .geo-poig-i{fill:none;stroke:#4F5B70;stroke-width:1.4px;vector-effect:non-scaling-stroke;stroke-linecap:round;pointer-events:none} .geo-cp{fill:none;stroke:#4F5B70;stroke-width:5px;vector-effect:non-scaling-stroke;stroke-linecap:round;pointer-events:none} .geo-cp.g{stroke-width:7px} .geo-cp-a{fill:#fff;stroke:#4F5B70;stroke-width:2.5px;vector-effect:non-scaling-stroke;pointer-events:none} .geo-cp-p{fill:#4F5B70;fill-opacity:.3;stroke:#4F5B70;stroke-width:2px;vector-effect:non-scaling-stroke;cursor:move} .geo-cp-m{fill:#DDF4F1;stroke:#0E7C70;stroke-width:2.2px;vector-effect:non-scaling-stroke;cursor:ew-resize} .geo-cp-l{fill:#0A6158;font-weight:600;text-anchor:middle} .geo-aide{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:6px} .geo-aide i{color:var(--teal);font-size:16px} .geo-impr-tete{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.2pt solid #000;padding-bottom:2mm;margin-bottom:6mm;font-size:13pt} .geo-impr-fig{display:block;margin:0 auto} .geo-impr-pied{display:flex;align-items:center;gap:4mm;margin-top:8mm;padding:3mm;border:1px dashed #888;border-radius:2mm;font-size:9.5pt;color:#333} .geo-impr-quad{fill:none;stroke:#C9D3E0;stroke-width:0.012}.geo-impr-pt{fill:#9AA5B6} .impr-geo-prog{margin:0 0 4mm 5mm;font-size:12pt;line-height:1.6} .geo-impr .geo-trait{stroke:#000}.geo-impr .geo-code{stroke:#000}.geo-impr .geo-nom{fill:#000}.geo-impr .geo-mes{fill:#333}.geo-impr .geo-main{stroke:#555} /* La géométrie : la feuille remplit le cadre, la barre des figures, le plein écran ; le bouton pour quitter le plein écran (tous les outils) */ .geo-feuille{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .geo-figbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;padding:6px 8px;background:var(--teal-l);border-radius:var(--r)} .geo-figbar[hidden]{display:none} .geo-figbar input{width:70px;margin:0 4px} .geo-z:fullscreen{display:flex;flex-direction:column;height:100vh;box-sizing:border-box} .geo-z:fullscreen .geo-milieu{flex:1;min-height:0} .geo-z:fullscreen .geo-feuille{height:100%} .geo-z:fullscreen .geo-svg{height:auto;flex:1;min-height:0} .geo-z:fullscreen .geo-outils{max-height:100%} .ou-plein-sortir{position:fixed;top:10px;right:12px;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.18)} /* Le programme de construction (partie 13) : la feuille de l'élève et son programme ; le constructeur */ .geo-exo{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap} .geo-exo-prog{flex:0 1 240px;min-width:210px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:12px 14px} .geo-exo-prog h3{margin:0 0 10px;font-size:15px;color:var(--titre)} .geo-exo .geo{flex:1 1 560px;min-width:0} .geo-prog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .geo-prog>li{display:flex;gap:9px;align-items:flex-start;padding:8px;border-radius:10px;font-size:14px;line-height:1.4} .geo-prog>li.cour{background:var(--teal-l);outline:2px solid var(--teal)} .geo-prog>li.ok{background:var(--teal-l)} .geo-prog>li.ko{background:var(--red-l);outline:1.5px dashed var(--red)} .geo-prog>li.cache{color:var(--text3)} .geo-cache{font-style:italic} .geo-pic{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--bg2);color:var(--text2);display:grid;place-items:center;font-size:12.5px;font-weight:700} .geo-pic.ok{background:var(--teal);color:#fff}.geo-pic.ko{background:var(--red);color:#fff} .geo-msgs{margin:6px 0 0;padding-left:16px;font-size:12.5px;color:#8A3A0B} .geo-exo-bas{margin-top:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start} .geo-exo-n{margin:0;font-size:12.5px;color:var(--text2)} .geo-corr{fill:none;stroke:#0E7C70;stroke-width:2px;stroke-dasharray:7 5;vector-effect:non-scaling-stroke;pointer-events:none} .geo-corr-n{fill:#0E7C70;font-weight:600} .geo-donne{stroke:#8A94A6;stroke-dasharray:3 4} .geo-ed .geo-svg{height:52vh} .geo-ed-aide{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:var(--text2)} .geo-etape{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px} .geo-etape textarea{flex:1} .geo-vlist{display:flex;flex-direction:column;gap:4px;margin-bottom:8px} .geo-v{display:flex;align-items:center;gap:10px;font-size:13.5px} .geo-v label{flex:1;display:flex;gap:8px;align-items:center} .geo-regl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .geo-regl>div{display:flex;flex-direction:column;gap:6px;font-size:13.5px} /* Reproduire une figure : le point de départ */ .geo-depart{fill:none;stroke:#0E7C70;stroke-width:2.5px;vector-effect:non-scaling-stroke} /* L'accueil des familles (partie 14, 29/10/2026) ; « Donner à… » dans la fiche d'un contenu de la bibliothèque */ body.f-famille #wb-ong-ac{order:1}body.f-famille #wb-ong-el{order:2}body.f-famille #wb-ong-pt{order:3}body.f-famille #wb-ong-flg{order:4}body.f-famille #wb-ong-fma{order:5} body.f-famille #wb-ong-doc{order:6;margin-left:auto}body.f-famille #wb-ong-pa{order:7}body.f-famille #wb-ong-ou{order:8}body.f-famille #wb-ong-se{order:9}body.f-famille #wb-ong-lud{order:10} .fa{display:flex;flex-direction:column;gap:18px;padding:4px 0 24px} .fa h2{margin:0 0 10px;font-size:18px;color:var(--titre)} .fa-etapes{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap} .fa-etapes>i{align-self:center;color:var(--text3);font-size:20px} .fa-etape{flex:1 1 220px;display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:12px;background:var(--bg);border:1px solid var(--border)} .fa-etape div{display:flex;flex-direction:column;gap:2px}.fa-etape div span{font-size:13px;color:var(--text2)} .fa-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:700} .fa-ajout{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:16px 18px;border-radius:14px;background:var(--bg);border:2px solid var(--teal)} .fa-ajout.petit{border:1px dashed var(--border2)} .fa-ajout-t{display:flex;flex-direction:column;gap:2px;flex:1 1 260px}.fa-ajout-t b{font-size:16px}.fa-ajout-t span{font-size:13px;color:var(--text2)} .fa-ajout label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--text2)} .fa-ajout input,.fa-ajout select{height:42px;padding:0 12px;border:1px solid var(--border2);border-radius:9px;font:inherit;font-size:14.5px;background:var(--bg);color:var(--text)} .fa-ajout input{width:200px} .fa-enfs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px} .fa-enf{display:flex;flex-direction:column;gap:9px;padding:16px 18px;border-radius:14px;background:var(--bg);border:1px solid var(--border);font-size:14px} .fa-enf-t{display:flex;align-items:baseline;gap:10px}.fa-enf-t b{font-size:19px} .fa-niv{padding:1px 8px;border-radius:10px;background:var(--violet-l);color:var(--violet);font-size:12px;font-weight:600} .fa-barre-l{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text2)} .fa-barre{flex:1;height:10px;border-radius:5px;background:var(--bg2);overflow:hidden}.fa-barre i{display:block;height:100%;background:var(--teal);border-radius:5px} .fa-gris{font-size:13px;color:var(--text2)}.fa-ok{color:var(--teal-d)} .fa-note{padding:10px 12px;border-radius:10px;background:var(--bg3);font-size:13px;color:var(--text2)} .fa-enf-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto} .fa-deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px} .fa-gros{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:14px;background:var(--bg);border:1px solid var(--border)} .fa-gros-t{display:flex;gap:12px;align-items:center}.fa-gros-t>i{font-size:32px;color:var(--teal)}.fa-gros-t>i.vi{color:var(--violet)} .fa-gros-t div{display:flex;flex-direction:column;gap:2px}.fa-gros-t b{font-size:17px}.fa-gros-t span{font-size:13px;color:var(--text2)} .fa-tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .fa-tuile{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);font:inherit;font-size:12.5px;color:var(--text2);text-align:left} .fa-tuile b{font-size:14px;color:var(--text)}.fa-tuile.b{cursor:pointer}.fa-tuile.b:hover{border-color:var(--teal)} .btn.vi{background:var(--violet);border-color:var(--violet);color:#fff} .fa-creer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-radius:12px;background:var(--bg);border:1px dashed var(--border2)} .fa-creer>i{font-size:24px;color:var(--text2)}.fa-creer div{flex:1 1 320px;display:flex;flex-direction:column;gap:2px}.fa-creer span{font-size:13px;color:var(--text2)} .fa-don{display:flex;flex-direction:column;gap:9px;margin-top:12px;padding:14px;border-radius:12px;border:2px solid var(--teal);background:var(--bg)} .fa-don-enf{display:flex;gap:6px;flex-wrap:wrap} .fa-choix{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:10px;cursor:pointer} .fa-choix.on{border:2px solid var(--teal);background:var(--teal-l)} .fa-choix span{display:flex;flex-direction:column;gap:2px}.fa-choix small{color:var(--text2)} /* ── Au téléphone (28/10/2026, l'audit à 375 px) ─────────────────────────────────────────────── */ @media(max-width:600px){ /* l'en-tête : une seule ligne ; les boutons du compte en icônes (leur nom reste lu par les lecteurs d'écran) */ .topbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding:.4rem .6rem} .topbar::-webkit-scrollbar{display:none} .topbar .marque-mot{display:none} .topbar>button:not(#topbar-mode-eleve):not(#topbar-espaces){font-size:0!important;min-width:40px;min-height:40px;padding:0 8px!important;flex-shrink:0} .topbar>button i{font-size:19px!important;margin:0!important} .topbar .save-ok{font-size:0}.topbar .save-ok i{font-size:17px} .topbar .ma-n{font-size:11px} #topbar-mode-eleve{min-height:40px;flex-shrink:0;font-size:13px!important} /* une famille ne crée pas au téléphone : la barre « Nouveau tableau… » laisse la place (elle revient dans un document) */ body.f-famille .wb-side:not(:has(.wb-tools:not(.wb-hidden))){display:none} /* les onglets : une seule ligne, qu'on fait glisser */ .wb-ong{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;scroll-snap-type:x proximity} .wb-ong::-webkit-scrollbar{display:none} .wb-ong button{flex:0 0 auto;min-height:40px;scroll-snap-align:start} /* des cibles pour le doigt */ .main .btn,.exo-vue .btn,.el-bandeau .btn{min-height:40px} .exo-tete .btn{min-height:40px} .liens-legaux a{display:inline-block;padding:10px 4px} /* « Vérifier » : posé sur un fond qui s'estompe, il ne coupe plus le texte qu'on lit */ .exo-pied{background:linear-gradient(to bottom,transparent,var(--bg2) 45%)} /* l'accueil des familles : les trois étapes empilées, sans les flèches entre elles */ .fa-etapes>i{display:none} } /* Placer sur une image, en écrivant (28/10/2026) : la case se pose sur l'emplacement, centrée */ .exo-zone.im-ecrire{transform:translate(-50%,-50%);max-width:none;min-height:36px;font-size:16px;text-align:center;padding:4px 8px;background:var(--bg);box-shadow:0 2px 6px rgba(0,0,0,.18)} /* Géométrie (29/10/2026) : le bord d'instrument visé par l'outil de trait ; un codage donné à l'élève (dans la figure attendue) */ .geo-bord{fill:none;stroke:#2F7DE1;stroke-width:7px;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.4;pointer-events:none} .geo-code.geo-code-donne{stroke:#8A94A6;stroke-dasharray:3 3} /* La fenêtre « demander » (29/10/2026) : par-dessus un exercice aussi (nommer un point en géométrie : elle s'ouvrait derrière) */ #ask-mb{z-index:460} /* L'accueil de l'enseignant et le suivi d'une classe (partie 16, 29/10/2026) */ .en-bloc h2{display:flex;align-items:center;gap:8px}.en-bloc h2 i{color:var(--teal)} .en-seas{display:flex;flex-direction:column;gap:8px} .en-sea{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--border)}.en-sea>span{flex:1 1 240px} .en-atts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px} .en-att{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--border);font:inherit;font-size:14px;color:var(--text);text-align:left;cursor:pointer} .en-att:hover{border-color:var(--teal)}.en-att>i{font-size:20px;color:var(--violet)}.en-att-t{flex:1}.en-att>i.ti-chevron-right{color:var(--text3);font-size:16px} .en-att-n{min-width:28px;height:28px;padding:0 6px;border-radius:14px;background:var(--violet);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13.5px} .en-rien{padding:12px 14px;border-radius:12px;background:var(--teal-l);color:var(--teal-d);font-size:14px}.en-rien span{font-weight:700;margin-right:4px} .en-racs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px} .en-rac{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border-radius:14px;background:var(--bg);border:1px solid var(--border);font:inherit;text-align:left;cursor:pointer;color:var(--text)} .en-rac:hover{border-color:var(--teal)}.en-rac>i{font-size:28px;color:var(--teal)}.en-rac b{font-size:15.5px}.en-rac span{font-size:12.5px;color:var(--text2)} .en-retard{font-size:13px;color:var(--amber)}.en-retard i{vertical-align:-2px} .en-sv-w{padding:8px 10px;overflow-x:auto} .en-sv th{text-align:center;vertical-align:bottom;max-width:150px}.en-sv th:first-child{text-align:left}.en-sv td{text-align:center} .en-sv-p,.en-sv-el button{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .en-sv td.en-sv-el{text-align:left;white-space:nowrap} .en-sv-c{position:relative;background:none;border:1px solid transparent;border-radius:10px;padding:3px;cursor:pointer}.en-sv-c:hover{border-color:var(--teal)} .en-sv-c.retard{border:2px dashed var(--amber)}.en-sv-c>i{position:absolute;right:-6px;top:-6px;font-size:14px;color:var(--amber);background:var(--bg);border-radius:50%} .en-sv-x{color:var(--text3)} /* La recherche de l'espace (partie 16) */ #topbar-chercher{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--border2);border-radius:var(--r);padding:5px 10px;font:inherit;font-size:12.5px;color:var(--text2);cursor:pointer} #topbar-chercher:hover{border-color:var(--teal);color:var(--teal-d)} #topbar-chercher kbd,.rch-champ kbd{font:inherit;font-size:10.5px;padding:1px 5px;border:1px solid var(--border2);border-radius:5px;color:var(--text3);background:var(--bg2)} @media (max-width:760px){#topbar-chercher .rch-lib,#topbar-chercher kbd{display:none}} html.mode-eleve #topbar-chercher{display:none!important} #rch-mb{align-items:flex-start;padding-top:10vh} .rch-mo{max-width:620px;width:95%;padding:0!important;overflow:hidden} .rch-champ{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)} .rch-champ>i{font-size:20px;color:var(--teal)} .rch-champ input{flex:1;border:0;outline:0;font:inherit;font-size:16px;background:none;color:var(--text);min-width:0} .rch-l{max-height:60vh;overflow-y:auto;padding:6px} .rch-g{padding:10px 10px 4px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text3)} .rch-r{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:2px solid transparent;border-radius:9px;background:none;font:inherit;text-align:left;color:var(--text);cursor:pointer} .rch-r>i{font-size:18px;color:var(--teal);flex-shrink:0} .rch-r span{display:flex;flex-direction:column;min-width:0}.rch-r b{font-weight:600;font-size:14px} .rch-r small{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rch-r.on{background:var(--teal-l);border-color:var(--teal)} .rch-vide{padding:18px;text-align:center;font-size:13.5px;color:var(--text2)} /* « Plus de réglages » dans le créateur d'exercices (29/10/2026) */ .exo-plus>summary{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;cursor:pointer;list-style:none;font-size:14.5px} .exo-plus>summary::-webkit-details-marker{display:none} .exo-plus>summary::before{content:"▸";color:var(--teal);font-size:14px;width:12px} .exo-plus[open]>summary::before{content:"▾"} .exo-plus>summary>i{color:var(--teal);align-self:center} .exo-plus>summary small{color:var(--text2);font-size:12.5px} .exo-plus[open]>summary{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)} /* « Montrez-moi » : l'endroit du guide (partie 16) */ .guide-ici{outline:3px dashed var(--violet)!important;outline-offset:4px;animation:guide-ici 1s ease-in-out infinite alternate;position:relative;z-index:5} @keyframes guide-ici{from{outline-offset:2px}to{outline-offset:8px}} @media (prefers-reduced-motion:reduce){.guide-ici{animation:none}} .guide-bulle{position:fixed;z-index:470;display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--violet);color:#fff;font-size:13.5px;line-height:1.4;box-shadow:0 6px 20px rgba(0,0,0,.18);pointer-events:none} .guide-bulle i{font-size:18px;flex-shrink:0} /* L'écran de connexion : la page d'accueil publique, à un lien (29/10/2026) */ .login-decouvrir{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--text2);text-decoration:underline;text-underline-offset:2px}.login-decouvrir:hover{color:var(--teal-d)} /* Les fonctions (partie 17, 29/10/2026) : le repère reste une feuille blanche, même en sombre */ .fn-z{display:flex;gap:12px;align-items:stretch;background:var(--bg);flex-wrap:wrap} .fn-z:fullscreen{padding:12px;height:100vh;box-sizing:border-box;overflow:auto} .fn-g,.fn-d{flex:0 0 300px;display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--border);border-radius:var(--rl);background:var(--bg);min-width:0} .fn-d{flex-basis:230px} .fn-c{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--border);border-radius:var(--rl)} .fn-svg{width:100%;max-width:640px;margin:0 auto;aspect-ratio:1;border-radius:var(--r);touch-action:none;cursor:crosshair;user-select:none} .fn-fond{fill:#fff}.fn-grille{stroke:#DDE3EC;fill:none}.fn-axe{stroke:#1B2436;fill:none}.fn-grad{fill:#4F5B70;font-family:inherit}.fn-axe-n{font-style:italic} .fn-nom{font-family:Cambria,Georgia,serif;font-weight:700;font-style:italic} .fn-f{font-family:Cambria,Georgia,serif;font-size:17px} .fn-ligne{display:flex;align-items:center;gap:8px} .fn-in{flex:1 1 auto;min-width:0;font:17px Cambria,Georgia,serif;padding:7px 10px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text)} .fn-nb{width:64px;padding:5px 6px;border:1px solid var(--border2);border-radius:var(--r);font:inherit;background:var(--bg);color:var(--text)} .fn-err{font-size:12.5px;color:var(--red);min-height:0}.fn-err:empty{display:none} .fn-l{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:13px} .fn-l .btn.on{border-color:#7B5CC4;box-shadow:inset 0 0 0 2px #7B5CC4;font-weight:700} .fn-tab-s{max-width:100%;overflow-x:auto} .fn-tab{border-collapse:collapse;font-family:Cambria,Georgia,serif;font-size:16px;text-align:center} .fn-tab th,.fn-tab td{border:1px solid var(--border2);padding:5px 8px;white-space:nowrap} .fn-tab th{background:var(--bg2);font-weight:700} .fn-tab td.on{background:var(--amber-l);outline:2px solid var(--text);outline-offset:-2px;font-weight:700} .fn-tab td button{border:0;background:none;font:inherit;color:inherit;cursor:pointer;min-width:28px;min-height:28px} .fn-pt{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:var(--rl);background:var(--amber-l)}.fn-pt:empty{display:none} .fn-inter{display:flex;flex-direction:column;gap:6px}.fn-inter small{color:var(--text3)} .fn-grande{font-size:28px;text-align:center;color:var(--teal-d)} .fn-va{color:#854F0B}.fn-vb{color:var(--violet)} @media(prefers-color-scheme:dark){.fn-va{color:#F0B860}} .fn-cur{display:flex;flex-direction:column;gap:4px;font-size:13.5px}.fn-cur>span{display:flex;justify-content:space-between;gap:8px}.fn-cur input{width:100%;height:28px} .fn-nat{background:var(--bg2);border-radius:var(--r);padding:9px 11px;font-size:13.5px;line-height:1.5} .fn-p{margin:0 0 6px;font-size:13.5px;line-height:1.5;color:var(--text2)} .fn-ph{display:flex;flex-direction:column;gap:8px} .fn-cadre{border-radius:var(--r);padding:10px 12px;font-family:Cambria,Georgia,serif;font-size:17px;line-height:1.5} .fn-cadre.ant{background:var(--violet-l)}.fn-cadre.img{background:var(--teal-l)} .fn-etapes{margin:0;padding-left:20px;font-size:14px;line-height:1.6} .fn-gris{opacity:.5} .fn-defi{display:flex;flex-direction:column;gap:6px} .fn-qsvg{width:100%;max-width:340px;height:auto;display:block;margin:0 auto;border-radius:var(--r);border:1px solid var(--border)} .fn-qz{position:relative;width:100%;max-width:340px;margin:0 auto} .fn-q-zoom{position:absolute;top:6px;left:6px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border2);border-radius:50%;background:var(--bg);color:var(--text);font-size:22px;cursor:pointer} .impr .fn-q-zoom{display:none} .exo-zoom svg.fn-qsvg{width:min(100%,calc(100vh - 40px));max-width:none;height:auto;background:#fff;transform-origin:center center;transition:transform .08s linear;touch-action:none} .fra-qs:has(.fn-qtab){grid-template-columns:repeat(auto-fill,minmax(min(470px,100%),1fr))} .fn-qf{font-size:20px} .fn-qtab td,.fn-qtab th{padding:6px 10px} .fn-qtab .exo-trou{margin:0} .fn-corr-c{color:#7B5CC4;font-weight:700;border-bottom:3px dotted #7B5CC4} .fn-confond{background:var(--red-l);border-radius:var(--r);padding:9px 11px;font-size:14px;line-height:1.5;text-align:left} .fn-pas{border:2px dashed #7B5CC4;background:var(--corr-l);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;text-align:left;font-size:14.5px} .fn-assoc{display:flex;flex-direction:column;gap:8px;width:100%} .fn-assoc-l{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .fn-assoc-l .solx-choix{margin:0} .fn-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:2.5px solid;font-weight:700} .fn-tab-i{margin:0 0 4mm;font-size:11pt}.fn-tab-i th,.fn-tab-i td{border-color:#555} .fn-impr-fig{display:block;margin:0 auto} .impr .fn-qsvg{border-color:#999} .fn-ligne label{white-space:nowrap} .fn-qtab .exo-trou{width:2.9em!important;min-width:0;padding:3px 1px;font-size:16px;margin:0}.fn-qtab td,.fn-qtab th{padding:3px 4px} /* Repérer les mots : encadrer (29/10/2026) — le même trait que le crayon, tout autour */ .rep-g.enc{border-bottom:0;border-radius:6px;padding:1px 4px} .rep-g.enc.rc0{border:3px solid var(--teal)}.rep-g.enc.rc1{border:6px double var(--red)}.rep-g.enc.rc2{border:3px dotted var(--violet)} .rep-ech.enc{width:22px;height:14px;border-radius:3px;margin-bottom:2px} .rep-ech.enc.rc0{border:3px solid var(--teal)}.rep-ech.enc.rc1{border:5px double var(--red)}.rep-ech.enc.rc2{border:3px dotted var(--violet)} .rep-geste{display:inline-flex;gap:4px}.rep-geste .btn.on{border-color:#7B5CC4;box-shadow:inset 0 0 0 2px #7B5CC4;font-weight:700} .impr-rep .rep-g.enc{background:none} /* Le créateur de géométrie (refonte du 29/10/2026) : la feuille en grand, le programme et les vérifications à côté */ .exo-col.large{max-width:1500px} .geo-ed-tete{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:flex-end} .geo-ed-act{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto} .geo-atelier{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap} .geo-at-g{flex:999 1 620px;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:10px} .geo-at-d{flex:1 1 300px;max-width:440px;display:flex;flex-direction:column;gap:10px;min-width:0} .geo-at-b{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:12px} .geo-atelier .geo-svg{height:70vh} .geo-atelier:fullscreen{background:var(--bg3);padding:10px;height:100vh;box-sizing:border-box;overflow:auto;flex-wrap:nowrap} .geo-atelier:fullscreen .geo-svg{height:calc(100vh - 190px)} .geo-plus summary{cursor:pointer;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.geo-plus summary span{font-size:12.5px;color:var(--text3)} .geo-plus[open] summary{margin-bottom:10px} .geo-trace{display:inline-flex;gap:3px;background:var(--bg2);padding:3px;border-radius:10px;margin-right:4px} .geo-trace button{border:0;background:none;border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;color:var(--text2);display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:36px} .geo-trace button.on{background:var(--bg);color:var(--teal-d);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.12)} .geo-trace svg{width:24px;height:6px} .geo-cons{stroke:#0E7C70} .geo-donne-pt{stroke:#8A94A6} .geo-halo{fill:none;stroke:#B9AEEB;stroke-width:12px;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.9;pointer-events:none} .geo-halo.voir{stroke:#F3C98B} .geo-halo-n{fill:#5B47B8;pointer-events:none}.geo-halo-t{fill:#fff;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none} .geo-relbar{border:2px solid #5B47B8;border-radius:12px;background:var(--bg);padding:10px 12px;display:flex;flex-direction:column;gap:8px} .geo-relbar[hidden]{display:none} .geo-rel-t{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .geo-rel-t>.btn{margin-left:auto} .geo-rel-m{background:var(--amber-l);color:#854F0B;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600} @media(prefers-color-scheme:dark){.geo-rel-m{color:#F0B860}} .geo-rel-n{font-size:12px;color:var(--text3)} .geo-rel-b{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .geo-rel-b>.btn{min-height:44px} .geo-rel-ch{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border2);border-radius:10px;padding:4px 8px;min-height:44px;box-sizing:border-box;flex-wrap:wrap} .geo-rel-ch input{width:64px;font:inherit;padding:4px 6px;border:1px solid var(--border2);border-radius:6px;background:var(--bg);color:var(--text)} .geo-v.acc,.geo-v.sug{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px} .geo-v.sug{border-style:dashed;background:var(--bg3)} .geo-v.on{border:2px solid #E8A54B;background:var(--amber-l)} .geo-v-t{flex:1;text-align:left;border:0;background:none;font:inherit;font-size:13.5px;color:var(--text);cursor:pointer;padding:6px 0;min-width:0} .geo-v.sug .geo-v-t{color:var(--text2)} .geo-v-b{display:inline-flex;gap:4px;align-items:center;flex-shrink:0} .geo-sug-t{display:flex;align-items:center;gap:8px;margin-top:12px}.geo-sug-t .btn{margin-left:auto} .geo-apercu-svg{width:100%;height:auto;border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px;display:block} .geo-mod-mo{max-width:960px} .geo-mod-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px} .geo-mod{text-align:left;border:1px solid var(--border);border-radius:var(--rl);background:var(--bg);padding:8px;font:inherit;color:var(--text);cursor:pointer;display:flex;flex-direction:column;gap:4px} .geo-mod:hover,.geo-mod:focus-visible{border-color:#5B47B8} .geo-mod svg{width:100%;height:auto;background:#FAFBFD;border-radius:var(--r)} .geo-mod svg line,.geo-mod svg circle{fill:none;stroke-width:0.18}.geo-mod svg .d{stroke:#8A94A6;stroke-dasharray:0.5 0.35}.geo-mod svg .c{stroke:#0E7C70} .geo-mod svg text{font-size:0.9px;font-weight:700;fill:#1B2436} .geo-mod span{font-size:12px;color:var(--text2)} /* Repérer les mots : une phrase à la fois (29/10/2026) */ .rep-aff{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}.rep-aff label{display:flex;gap:6px;align-items:center} .rep-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px} .rep-pas-l{display:flex;gap:4px;flex-wrap:wrap;flex:1;justify-content:center} .rep-pas{min-width:40px;min-height:40px;border:1.5px solid var(--border2);border-radius:999px;background:var(--bg);color:var(--text);font:inherit;font-weight:600;cursor:pointer} .rep-pas.on{border:2.5px solid var(--text);background:var(--bg2)} .rep-pas.ok{border-color:var(--green);color:var(--green)}.rep-pas.ko{border-color:var(--red);color:var(--red);border-style:dashed} /* Mon atelier sans colonne de gauche (29/10/2026) : elle ne revient qu'avec un document ouvert, pour ses outils */ body.wb-mode.wb-sans-colonne .wb-side{display:none} .wb-side-foot{display:none} .wb-creer-z{position:relative;display:inline-flex} .wb-creer-z>.btn{min-height:38px} .wb-creer-m{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:300px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--rl);box-shadow:0 10px 30px rgba(27,36,54,.16);padding:6px;display:flex;flex-direction:column;gap:2px} .wb-creer-m[hidden]{display:none} .wb-creer-m>button,.wb-creer-m>label{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:0;background:none;border-radius:var(--r);padding:9px 12px;font:inherit;color:var(--text);cursor:pointer} .wb-creer-m>button:hover,.wb-creer-m>label:hover,.wb-creer-m>button:focus-visible{background:var(--bg2)} .wb-creer-m b{display:flex;align-items:center;gap:6px;font-size:14px}.wb-creer-m span{font-size:12px;color:var(--text2)} html.mode-eleve .wb-creer-z{display:none!important} body.en-seance .wb-creer-m [data-c="exo"],body.en-seance .wb-creer-m [data-c="fic"]{display:none!important} button.save-ok{border:1px solid transparent;background:none;border-radius:8px;padding:4px 8px;font:inherit;font-size:11px;cursor:pointer;min-height:32px} button.save-ok:hover{border-color:var(--border2)} button.save-ok[data-etat="ok"]{color:var(--teal)} button.save-ok[data-etat="envoi"]{color:var(--text3)}button.save-ok[data-etat="envoi"] i{animation:tourne 1s linear infinite} button.save-ok[data-etat="hors"]{color:var(--text2);border:1px dashed var(--border2)} button.save-ok[data-etat="ko"]{color:var(--red);border:2px solid var(--red);font-weight:700} @keyframes tourne{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){button.save-ok[data-etat="envoi"] i{animation:none}} body.wb-mode.wb-sans-colonne .main{max-width:100vw} /* Repérer les mots : corriger les fautes, toucher des lettres (29/10/2026) */ .rep-m.rep-x{text-decoration:line-through;text-decoration-thickness:2px;padding:0 1px} .rep-m.rep-x.rc0{text-decoration-color:var(--teal);border-bottom:3px solid var(--teal)} .rep-m.rep-x.rc1{text-decoration-color:var(--red);border-bottom:6px double var(--red)} .rep-m.rep-x.rc2{text-decoration-color:var(--violet);border-bottom:3px dotted var(--violet)} .rep-m.rep-x.faux{outline:2px dashed var(--text2);outline-offset:2px} .rep-m.rep-x.corr{outline:3px double var(--corr);outline-offset:3px} .rep-cx-a{position:relative;display:inline-block;width:0;height:1em;vertical-align:baseline} .rep-cx{position:absolute;left:0;bottom:1.55em;white-space:nowrap;font-size:.66em;line-height:1;font-weight:700;pointer-events:none} .rep-cx.rc0{color:var(--teal-d, var(--teal))}.rep-cx.rc1{color:var(--red)}.rep-cx.rc2{color:var(--violet)} .rep-cx.corr{color:var(--corr)} .rep-v.ok{color:var(--green)}.rep-v.faux{color:var(--red)} .rep-ech-c{font-size:15px;margin:0 4px 0 -2px;vertical-align:middle} .rep-cl{display:flex;flex-direction:column;gap:6px;margin-top:4px} .rep-cl-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .rep-cl-l .exo-in{flex:1 1 160px;min-width:0;font-size:16px} .rep-cl-l .rep-cl-a{flex:1.4 1 200px;font-size:14px} .rep-cl-mot{font-weight:600} .rep-unite{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap} .rep-unite-o{display:inline-flex;align-items:center;gap:6px;font-size:14px} .rep-z.lettres .rep-m{padding:0 .07em} .rep-z.lettres .rep-g .rep-m{padding:0 .07em} .rep-z.grand{font-size:32px;line-height:2.3} .rep-z.lettres.grand .rep-m{padding:0 .12em} .rep-z.cursive{font-family:'Ludisca cursive','Segoe Script','Comic Sans MS',cursive} .rep-z.cursive .rep-m,.rep-z.cursive.lettres.grand .rep-m{padding:0;box-shadow:none} .rep-z.cursive .rep-g{padding:0} /* en cursive, rien entre les lettres : elles restent liées */ .impr-rep .rep-z.grand{font-size:20pt} /* L'image agrandie qui se zoome (30/10/2026) */ .exo-zoom{touch-action:none;overflow:hidden;cursor:default} .exo-zoom img{transform-origin:center center;transition:transform .08s linear;user-select:none;-webkit-user-select:none;cursor:zoom-in} .exo-zoom.zoome img{cursor:grab} .exo-zoom-b{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;background:rgba(0,0,0,.45);border-radius:999px;padding:6px} .exo-zoom-b button{width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.18);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center} .exo-zoom-b button:hover,.exo-zoom-b button:focus-visible{background:rgba(255,255,255,.32)} /* Le bandeau d'une activité partagée, à jour */ .pt-fige.ajour{flex-wrap:wrap} .pt-ajour{color:var(--teal-d, var(--teal));font-weight:700;white-space:nowrap} .pt-lien{border:0;background:none;padding:4px 0;margin-left:auto;font:inherit;font-size:12.5px;color:var(--text2);text-decoration:underline;cursor:pointer} /* Une série vite faite : où sont rangées ses activités (30/10/2026) */ .srs-ou{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg2);border-radius:var(--r);padding:10px 12px;font-size:14.5px;margin:6px 0 10px} .srs-ou>.ti{font-size:20px;color:var(--teal)} .srs-ou>span{flex:1 1 260px} /* Le choix du type : les modèles favoris, l'étoile de chaque modèle (30/10/2026) */ .exo-type-c{position:relative;display:flex} .exo-type-c>button[data-fam]{flex:1;padding-right:44px} .exo-types button.exo-fav-b{position:absolute;top:6px;right:6px;width:40px;height:40px;min-height:0;padding:0;align-items:center;justify-content:center;border:1px solid transparent;border-radius:50%;background:transparent;box-shadow:none} .exo-types button.exo-fav-b span{font-size:24px;line-height:1;color:var(--text3)} .exo-types button.exo-fav-b:hover{border-color:var(--border2)!important;background:var(--bg)} .exo-types button.exo-fav-b.on span{color:var(--amber)} .exo-favs{--fam:var(--amber);--fam-l:var(--amber-l)} /* Relier, avec des phrases (30/10/2026) : deux colonnes égales, texte à gauche, le point au bord, une ligne entre les paires */ .impr-relier.long{grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-content:stretch;gap:0 24mm} .impr-relier.long .impr-rel{justify-content:space-between;text-align:left;gap:4mm;padding:2.5mm 0;border-bottom:0.3pt solid #bbb;line-height:1.35} .impr-relier.long .impr-rel .c{flex:1 1 auto;min-width:0} .impr-relier.long .impr-rel.d .c{order:2} /* Géométrie : le menu d'un objet (clic droit, appui long), les pointillés, le nom d'une droite (30/10/2026) */ .geo-feuille{position:relative} .geo-menu{position:absolute;z-index:40;min-width:230px;max-width:320px;background:var(--bg);border:1px solid var(--border2);border-radius:12px;box-shadow:0 10px 30px rgba(27,36,54,.18);padding:5px;display:flex;flex-direction:column} .geo-menu button{display:flex;align-items:center;gap:8px;text-align:left;border:0;background:none;border-radius:8px;padding:9px 10px;min-height:40px;font:inherit;font-size:14px;color:var(--text);cursor:pointer} .geo-menu button:hover,.geo-menu button:focus-visible{background:var(--bg2)} .geo-menu button .ti{font-size:18px;color:var(--text2)} .geo-menu button.danger{color:var(--red)}.geo-menu button.danger .ti{color:var(--red)} .geo-tir{stroke-dasharray:7 6} .geo-nom-o{font-style:italic} .geo-taille{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--text2);border:1px solid var(--border);border-radius:10px;padding:2px 4px}.geo-taille .btn{min-width:32px;padding:2px 8px} /* Géométrie : la poignée qui fait tourner un trait (30/10/2026) */ .geo-tourne-l{fill:none;stroke:#7B5CC4;stroke-width:1.5px;stroke-dasharray:4 4;vector-effect:non-scaling-stroke} .geo-tourne-p{fill:#7B5CC4} .geo-tourne-h{stroke:#7B5CC4;cursor:grab} .rep-ecr{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text2);margin-left:10px}.rep-ecr select{font:inherit;font-size:13px;padding:3px 6px;border:1px solid var(--border2);border-radius:8px;background:var(--bg)} /* Repérer : très grand, pour le CP (30/10/2026) */ .rep-z.tgrand{font-size:72px;line-height:1.9} .rep-z.lettres.tgrand .rep-m{padding:0 .14em} .impr-rep .rep-z.tgrand{font-size:40pt} /* À voix haute : le texte grand, très grand (CP), en cursive (30/10/2026) */ /* (30/10/2026) Écrit « .exo-vue .exo-q.vh-texte » : sur un écran large, « .exo-vue.jeu .exo-q » fixait le texte à 24 px et l'emportait. Grand et très grand : centrés, comme le reste de la carte ; la cursive, qui paraît plus petite, un cran au-dessus. */ .exo-vue .exo-q.vh-texte.t-g,.exo-vue .exo-q.vh-texte.t-tg{justify-content:center;text-align:center} .exo-vue .exo-q.vh-texte.t-g{font-size:clamp(30px, 4.6vw, 48px)} .exo-vue .exo-q.vh-texte.t-tg{font-size:clamp(48px, 8vw, 84px);line-height:1.2} .exo-vue .exo-q.vh-texte.cursive{font-family:'Ludisca cursive','Segoe Script','Comic Sans MS',cursive;font-weight:400} .exo-vue .exo-q.vh-texte.t-g.cursive{font-size:clamp(36px, 5.6vw, 60px)} .exo-vue .exo-q.vh-texte.t-tg.cursive{font-size:clamp(60px, 10vw, 104px)} /* La cursive descend loin sous la ligne (j, g, p, q, y) : de la place sous le mot, sinon le jambage passe sous le micro. */ .exo-vue .exo-q.vh-texte.cursive{line-height:1.6;padding-bottom:.2em} /* Réponses à écrire : une réponse en liste (30/10/2026) */ .exo-cliste{display:flex;flex-direction:column;gap:2px;margin-top:6px} .exo-liste-b{margin-top:6px;font-size:14px;color:var(--text2)} /* Réponses à écrire : l'énoncé commun, « Mes calculs », l'avis de l'enseignant (30/10/2026) */ .exo-ecr-grille .exo-enonce{grid-column:1 / -1;background:var(--bg2);border-left:5px solid var(--teal)} .exo-enonce .exo-q{text-align:left} .exo-calc{width:100%;box-sizing:border-box;margin-top:8px;font-size:16px;font-family:inherit;resize:vertical} .exo-calc-avis{margin:0 0 12px;padding:10px 14px;border-radius:var(--r);font-weight:600} .exo-calc-avis.ok{background:var(--teal-l);color:var(--teal-d, var(--teal));border:1px solid var(--teal)} .exo-calc-avis.refaire{background:var(--red-l);color:var(--red);border:2px dashed var(--red)} .calc-v-ligne{border-top:1px solid var(--border);padding:8px 0} .calc-v-t{white-space:pre-wrap;font-family:inherit;background:var(--bg2);border-radius:8px;padding:8px 10px;margin-top:4px} .impr-enonce{list-style:none;margin:0 0 4mm -6mm;font-weight:600} .impr-calc{font-size:10pt;color:#555;margin-top:2mm} .exo-ecr-grille textarea.exo-calc{font-size:16px!important;text-align:left;min-height:0} /* Les claviers (30/10/2026) : touches larges du clavier de maths ; le passage du pavé au clavier de maths */ .exo-pave-m button.l2{grid-column:span 2}.exo-pave-m button.l3{grid-column:span 3} .exo-pave-g button.maths-b{grid-column:span 4;height:44px;font-size:15px} /* Le bouton Maths d'une case réponse (30/10/2026) */ .exo-mrep-l{display:flex;gap:4px;align-items:center}.exo-mrep-l .exo-in{flex:1;min-width:0} .exo-mrep i{font-size:16px} /* Repérer (30/10/2026) : ce qui tient sur une ligne est centré ; une phrase sur plusieurs lignes reste alignée à gauche (le bloc intérieur prend sa largeur juste, ou toute la largeur dès qu'il passe à la ligne) */ .rep-z{text-align:center} .rep-in{display:inline-block;text-align:left;max-width:100%} .impr-rep .rep-z{text-align:left} /* les mots bien séparés quand les lettres sont des cases */ .rep-z.lettres{word-spacing:.5em} .rep-z.lettres.tgrand .rep-m,.rep-z.lettres.grand .rep-m{padding:0 .06em} /* Tableau figé (30/10/2026) : le cadenas porte un petit stylo (on écrit) ou un stylo barré (tout figé) ; l'appui long se voit à la barre qui se remplit ; un geste refusé fait tressaillir le cadenas. */ .wb-flot button{position:relative} .wb-fige-pt{position:absolute;right:4px;bottom:3px;font-size:16px} .wb-flot button.appui::after{content:'';position:absolute;left:0;bottom:0;height:6px;width:0;background:var(--violet); border-radius:0 0 var(--r) var(--r);animation:wbAppui 1s linear forwards} @keyframes wbAppui{to{width:100%}} .wb-flot button.secoue{animation:wbSecoue .4s} @keyframes wbSecoue{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}} .wb-fige-m{position:absolute;left:10px;bottom:74px;z-index:11;display:flex;flex-direction:column;gap:4px;padding:6px; background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 4px 18px rgba(0,0,0,.18);max-width:min(380px,calc(100% - 20px))} .wb-fige-m button{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:8px 10px;border:1px solid transparent; background:none;border-radius:var(--r);cursor:pointer;color:var(--text);font:inherit} .wb-fige-m button:hover{background:var(--bg2);border-color:var(--border2)} .wb-fige-m button.on{border-color:var(--teal);background:var(--bg2)} .wb-fige-m small{display:block;color:var(--text2);font-size:12px;margin-top:2px} .wb-fige-ic{position:relative;font-size:24px;width:30px;flex:none} .wb-fige-ic .wb-fige-pt{right:-4px;bottom:-2px;font-size:13px} /* La barre à hauteur d'enfant : en bas, au milieu, gros boutons. Les commandes de l'enseignant montent au-dessus. */ .wb-bas{display:none} .wb-surface.wb-bas-on .wb-bas{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:7;display:flex;gap:8px; padding:8px;background:rgba(255,255,255,.92);border:1px solid var(--border2);border-radius:18px;box-shadow:0 2px 12px rgba(0,0,0,.16); max-width:calc(100% - 20px);overflow-x:auto} .wb-bas .wb-bas-reg{width:40px;border-style:dashed} .en-tp{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px} .en-tp button{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);font:inherit;font-size:13.5px;text-align:left;cursor:pointer} .en-tp button:hover{background:var(--bg2)} .en-tp i{font-size:20px;color:var(--teal)} .wb-bas-ch{display:flex;flex-wrap:wrap;gap:6px 14px} .wb-bas-sw{display:inline-block;width:24px;height:24px;border-radius:50%;vertical-align:middle} .wb-bas button{width:68px;height:68px;flex:none;border:2px solid var(--border2);background:#fff;color:#444;border-radius:14px; cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:34px} .wb-bas button.on{background:var(--teal);border-color:var(--teal);color:#fff} .wb-bas .wb-bas-c span{width:40px;height:40px;border-radius:50%;display:block} .wb-bas .wb-bas-c.on{background:#fff;border:4px solid var(--teal)} .wb-bas .wb-bas-c.on span{box-shadow:0 0 0 3px #fff,0 0 0 6px #444} .wb-surface.wb-bas-on .wb-flot{bottom:98px} .wb-surface.wb-bas-on .wb-fige-m{bottom:162px} .wb-surface.wb-bas-on .wb-pagenum{bottom:98px} /* Tout figé : les outils d'écriture de la barre sont grisés (les pages restent). */ .wb-surface.wb-fige2 .wb-bas button:not([onclick^="wbPage"]){opacity:.35} /* Poser sur le tableau (30/10/2026) : le menu, la fenêtre d'un outil, les outils de classe. */ .wb-poser-m{position:absolute;left:10px;bottom:74px;z-index:11;width:min(560px,calc(100% - 20px));max-height:calc(100% - 90px);overflow:auto; padding:8px 10px 10px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 4px 18px rgba(0,0,0,.18)} .wb-surface.wb-bas-on .wb-poser-m{bottom:162px;max-height:calc(100% - 175px)} .wb-po-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px} .wb-po-x{border:none;background:none;cursor:pointer;font-size:18px;color:var(--text2)} .wb-po-rub{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.03em;margin:8px 0 4px} .wb-po-rub small{text-transform:none;font-weight:400;letter-spacing:0} .wb-po-sep{border-top:1px solid var(--border);padding-top:8px} .wb-po-i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 8px;border:1px solid transparent;background:none; border-radius:var(--r);cursor:pointer;color:var(--text);font:inherit} .wb-po-i>i{font-size:22px;color:var(--teal)} .wb-po-i small{display:block;color:var(--text2);font-size:12px} .wb-po-i:hover,.wb-po-t:hover{background:var(--bg2)} .wb-po-i.on,.wb-po-t.on{border-color:var(--teal);background:var(--bg2)} .wb-po-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:4px} .wb-po-t{display:flex;align-items:center;gap:6px;padding:6px 7px;border:1px solid var(--border);background:var(--bg);border-radius:var(--r); cursor:pointer;color:var(--text);font:inherit;font-size:12.5px;text-align:left;line-height:1.2} .wb-po-t i{font-size:18px;color:var(--teal);flex:none} .wb-wid{position:absolute;z-index:9;transform-origin:top left;background:var(--bg);border:1px solid var(--border2);border-radius:var(--rl); box-shadow:0 3px 14px rgba(0,0,0,.18);padding:10px 12px;cursor:move;touch-action:none;color:var(--text)} .wb-wid .btn,.wb-wid button,.wb-wid input{cursor:pointer} .wb-wid,.wb-chrono{-webkit-user-select:none;user-select:none} .wb-wid input,.wb-chrono input{-webkit-user-select:text;user-select:text} .sb-pb-vu{display:none} .wb-outil-p .sb-pb-vu:not([hidden]){display:block;margin:0 0 8px;font-size:18px;line-height:1.35;font-weight:600;white-space:pre-wrap} .wb-bruit-j{position:relative;height:30px;border:2px solid var(--border2);border-radius:999px;overflow:hidden;background:var(--bg2)} .wb-bruit-n{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--teal);transition:width .1s} .wb-bruit-j.alerte .wb-bruit-n{background:repeating-linear-gradient(45deg,var(--red) 0 8px,#7a2a08 8px 16px)} .wb-bruit-s{position:absolute;top:-2px;bottom:-2px;border-left:3px dashed var(--text)} .wb-wid-bruit.alerte{border:3px solid var(--red)} .wb-date-hd{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--text2)} .wb-cal-t{text-align:center;font-weight:700;text-transform:capitalize;margin-bottom:3px} .wb-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size:13px} .wb-cal-g span{padding:2px 0;border-radius:50%} .wb-cal-g .wb-cal-j{font-weight:700;color:var(--text2)} .wb-cal-g .we{color:var(--text3)} .wb-cal-g .auj{border:2px solid var(--teal);font-weight:700;color:var(--teal)} .wb-meteo{display:grid;grid-template-columns:repeat(4,1fr);gap:4px} .wb-meteo button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;border:1px solid var(--border);background:var(--bg);border-radius:var(--r);color:var(--text);font-size:11px} .wb-meteo button i{font-size:24px;color:var(--blue)} .wb-meteo button.on{border:2px solid var(--teal);background:var(--teal-l)} .wb-wid.devant{z-index:10} /* Une nouvelle version prête (30/10/2026) : un bandeau en bas, au-dessus de tout. */ .maj-bandeau{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:3000;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 12px 10px 16px;border-radius:var(--r);background:var(--bg);color:var(--text);border:2px solid var(--teal);box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:14px} .maj-bandeau>i{font-size:20px;color:var(--teal)} /* L'activité d'une version plus récente : un avis, pas une erreur. */ .exo-fiche-pb.exo-plus-recente{background:var(--blue-l);color:var(--text);font-size:15px} .exo-fiche-pb.exo-plus-recente>i{color:var(--blue)} /* Le tiroir « Mes images » (30/10/2026) : à droite, au-dessus du tableau ; une miniature se touche ou se tire. */ .wb-img-t{position:absolute;right:10px;top:10px;bottom:74px;z-index:11;width:min(330px,calc(100% - 20px));display:flex;flex-direction:column;gap:6px; padding:8px 10px 10px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 4px 18px rgba(0,0,0,.18)} .wb-surface.wb-bas-on .wb-img-t{bottom:162px} .wb-img-t.survol{outline:3px dashed var(--teal);outline-offset:-3px} .wb-ti-q{width:100%} .wb-ti-dos{display:flex;gap:4px;flex-wrap:wrap} .wb-ti-c{border:1px solid var(--border2);background:var(--bg);color:var(--text);border-radius:999px;padding:3px 10px;font:inherit;font-size:12.5px;cursor:pointer} .wb-ti-c.on{border:2px solid var(--teal);background:var(--teal-l);font-weight:600} .wb-ti-g{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-content:start} .wb-ti-i{display:flex;flex-direction:column;gap:3px;padding:4px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);cursor:grab; touch-action:pan-y;font:inherit;font-size:11.5px;color:var(--text2);user-select:none;-webkit-user-select:none} .wb-ti-i:hover{border-color:var(--teal)} .wb-ti-i img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--bg3);border-radius:4px;pointer-events:none} .wb-ti-i span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center} .wb-ti-vide{grid-column:1/-1;color:var(--text2);font-size:13px;line-height:1.5;padding:10px 4px} .wb-ti-aj{align-self:flex-start;cursor:pointer} .wb-ti-aide{font-size:12px;color:var(--text3);line-height:1.4} .wb-ti-fantome{position:fixed;z-index:5000;width:96px;height:96px;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none; border:2px dashed var(--teal);background:var(--bg);border-radius:6px;opacity:.9} /* La banque de pictogrammes, dans le tiroir (30/10/2026) : deux onglets, 2D / 3D, les thèmes. */ .wb-ti-ong{display:flex;gap:4px;border-bottom:1px solid var(--border)} .wb-ti-ong button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;border:none;border-bottom:3px solid transparent;background:none;font:inherit;font-size:13.5px;color:var(--text2);cursor:pointer} .wb-ti-ong button.on{border-bottom-color:var(--teal);color:var(--text);font-weight:600} .wb-ti-l1{display:flex;gap:6px;align-items:center} .wb-ti-l1 .wb-ti-q{flex:1;min-width:0} .wb-ti-st{display:flex;border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;flex:none} .wb-ti-st button{border:none;background:var(--bg);color:var(--text2);font:inherit;font-size:12.5px;font-weight:600;padding:6px 9px;cursor:pointer} .wb-ti-st button.on{background:var(--teal);color:var(--sur-teal)} .wb-ti-dos.eteint{opacity:.45} .wb-ti-g.b{grid-template-columns:repeat(4,minmax(0,1fr))} .wb-ti-g.b .wb-ti-i{font-size:10.5px;padding:3px} .wb-ti-g.b .wb-ti-i img{background:none} /* Les images à régler (30/10/2026) : la liste, puis les réglages et l’aperçu. */ .wb-ti-g.id{grid-template-columns:repeat(2,minmax(0,1fr))} .wb-ti-i.id{flex-direction:row;align-items:center;gap:8px;padding:10px 8px;font-size:13px;color:var(--text);text-align:left} .wb-ti-i.id i{font-size:24px;color:var(--teal);flex:none} .wb-ti-i.id span{white-space:normal;text-align:left} .wb-id-t{display:flex;align-items:center;gap:8px} .wb-id-f{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px} .wb-id-c{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--text2)} .wb-id-ap{border:1px dashed var(--border2);border-radius:var(--r);padding:6px;background:#fff;text-align:center} .wb-id-ap svg{max-width:100%;height:auto;max-height:240px} /* Gérer Mes images depuis le tiroir (30/10/2026) : le bouton « … » de chaque miniature et son menu. */ .wb-ti-w{position:relative;display:flex} .wb-ti-w>.wb-ti-i{flex:1;min-width:0} .wb-ti-plus{position:absolute;top:3px;right:3px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border2);border-radius:999px;background:var(--bg);color:var(--text);cursor:pointer;padding:0} .wb-ti-plus:hover{border-color:var(--teal)} .wb-ti-menu{position:absolute;top:34px;right:0;z-index:3;min-width:150px;display:flex;flex-direction:column;padding:4px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 4px 14px rgba(0,0,0,.18)} .wb-ti-menu button{display:flex;align-items:center;gap:8px;padding:7px 8px;border:none;background:none;font:inherit;font-size:13px;color:var(--text);text-align:left;border-radius:6px;cursor:pointer} .wb-ti-menu button:hover{background:var(--bg2)} .wb-ti-menu button.dr{color:var(--red)} .wb-ti-nom{font-size:12px;padding:3px 5px;min-height:0;height:auto} /* Les outils posés sur le tableau (31/10/2026) : l'objet seul, les boutons au toucher, les réglages à côté. */ .wb-outil-p{position:absolute;z-index:8;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border2);border-radius:var(--rl);box-shadow:0 3px 14px rgba(0,0,0,.18);min-width:150px;min-height:90px} .wb-outil-p.devant{z-index:9} .wb-outil-p.regle{z-index:11} .wb-outil-p.plein{border-radius:0} .wb-op-c{flex:1;min-height:0;overflow:auto;padding:8px;border-radius:inherit;container-type:size} .wb-outil-p.entier .wb-op-c{padding-top:44px} .wb-op-b{position:absolute;top:4px;right:4px;z-index:2;display:flex;gap:4px;visibility:hidden} .wb-outil-p.vue .wb-op-b,.wb-outil-p.regle .wb-op-b,.wb-outil-p.entier .wb-op-b{visibility:visible} .wb-op-b>*{width:36px;height:36px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--border2);border-radius:999px;background:var(--bg);color:var(--text);font-size:18px;cursor:pointer} .wb-op-tire{cursor:move;touch-action:none} .wb-op-taille{position:absolute;right:0;bottom:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:nwse-resize;touch-action:none;color:var(--teal);background:var(--bg);border-top-left-radius:var(--r);border-bottom-right-radius:var(--rl);font-size:16px;visibility:hidden} .wb-outil-p.vue .wb-op-taille,.wb-outil-p.entier .wb-op-taille{visibility:visible} .wb-outil-p.plein .wb-op-taille{display:none} .wb-op-r{display:none;position:absolute;width:310px;max-width:calc(100vw - 32px);overflow:auto;padding:10px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--rl);box-shadow:0 6px 24px rgba(0,0,0,.22);color:var(--text)} .wb-outil-p.regle .wb-op-r{display:block} .wb-op-rt{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .wb-op-rt button{width:32px;height:32px;border:none;background:none;color:var(--text);font-size:18px;cursor:pointer;border-radius:var(--r)} .wb-op-rt button:hover{background:var(--bg2)} .wb-op-rd:not(:empty){margin-bottom:8px} .wb-op-rc>*{margin-bottom:8px} .wb-op-rc .syl-g textarea,.wb-op-rc textarea{width:100%;min-height:90px} /* L'outil réduit : ses cadres disparaissent, son dessin prend la place qu'on lui donne. */ .mini .wb-op-c>.syl{height:100%;display:flex;flex-direction:column;min-height:0;margin:0;padding:0;max-width:none} .mini #hr-z,.mini #bo-z,.mini #dv-z,.mini #rou-z,.mini .ti-z,.mini .fx-z,.mini .tm-z,.mini #cv-z,.mini .bd-z,.mini #dg-z,.mini #eu-z{flex:1;min-height:0;border:none;box-shadow:none;background:none;padding:0;border-radius:0} .mini .syl-corps,.mini .syl-d{display:flex;flex-direction:column;flex:1;min-height:0;gap:8px} .mini #syl-res,.mini #lg-boite,.mini #ka-boite,.mini #gs-res,.mini #cp-boite{flex:1;min-height:0;overflow:auto;margin:0} .mini #hr-svg{flex:1;width:100%;height:auto;min-height:0} .mini #bo-z{justify-content:center} .mini #bo-z svg{flex:1;width:100%;height:auto;min-height:0} .mini #dv-z{justify-content:center} .mini .dv-des{flex-wrap:nowrap;min-height:0} .mini .dv-des{width:100%;justify-content:center} .mini .dv-des svg{flex:1 1 0;min-width:0;width:0;max-width:62cqh;height:auto;aspect-ratio:1} .mini .dg-aide{display:none} .mini .dv-tab .dg-aide{display:block} .mini .bd-bande:not(:has(.bd-arcs)){padding-top:44px} .resume[data-o="horloge"] #hr-q{display:none} .mini .rou-roue{width:min(92cqw,calc(100cqh - 120px));margin-top:0} .mini #rou-z{gap:4px;justify-content:center} .mini .rou-res{margin:0;min-height:34px} .mini .ti-z{gap:6px} .mini .ti-nom{font-size:min(11cqw,20cqh)} .mini .tm-tab{width:100%;height:100%} .resume[data-o="horloge"] #hr-res,.resume[data-o="des"] #dv-z .eu-btns .btn:not(.pr),.resume[data-o="des"] #dv-z .dv-tab,.resume[data-o="roue"] #rou-z .eu-btns .btn:not(.pr),.resume[data-o="roue"] #rou-z .dv-tab{display:none} /* Les outils de classe : les boutons au toucher, les réglages sous l'outil. */ .wb-wid-b{position:absolute;top:-1px;right:-1px;z-index:2;display:flex;gap:2px;padding:2px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);visibility:hidden} .wb-wid.vue .wb-wid-b,.wb-wid.regle .wb-wid-b{visibility:visible} .wb-wid-b button{border:none;background:none;cursor:pointer;color:var(--text2);font-size:16px;min-width:30px;height:30px;padding:0 5px;border-radius:6px} .wb-wid-b button:hover{background:var(--bg2);color:var(--text)} .wb-wid-r{display:none;position:absolute;top:calc(100% + 6px);left:0;width:280px;padding:10px;flex-direction:column;gap:8px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--rl);box-shadow:0 6px 24px rgba(0,0,0,.22);cursor:default;touch-action:auto;font-size:14px} .wb-wid.regle .wb-wid-r{display:flex} .wb-wid.regle{z-index:11} .wb-wid.r-haut .wb-wid-r{top:auto;bottom:calc(100% + 6px)} .wb-wid.r-droite .wb-wid-r{left:auto;right:0} .wb-wid-r small{color:var(--text2)} .wb-wid-r label:not(.syl-ch){display:flex;align-items:center;gap:8px} .wb-feu{display:flex;flex-direction:column;gap:8px} .wb-feu button{width:66px;height:66px;border:3px solid var(--c);background:var(--bg);color:var(--c);border-radius:50%;font-size:32px;display:flex;align-items:center;justify-content:center;padding:0} .wb-feu button.on{background:var(--c);color:#fff;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--c)} .wb-bruit{width:290px;display:flex;align-items:center;gap:10px} .wb-bruit-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .wb-bruit-go{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--border2);border-radius:50%;background:var(--bg);color:var(--text);font-size:22px} .wb-bruit-tete{font-weight:700;font-size:15px} .wb-date{display:flex;flex-direction:column;gap:6px;min-width:170px;max-width:300px} .wb-date-a{display:flex;flex-direction:column;align-items:center;line-height:1.15} .wb-date-a span{font-size:16px;color:var(--text2)} .wb-date-a b{font-size:30px;color:var(--titre);white-space:nowrap} .wb-date-a i{font-size:30px;color:var(--blue);margin-top:2px} .wb-date-m{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;width:0;min-width:100%} .wb-wid-nom{text-align:center;font-weight:700;font-size:16px;margin-bottom:4px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wb-wid-nom[hidden]{display:none} .wb-min{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:150px} .wb-min-t{font-size:42px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1} .wb-wid.fini .wb-min-t{font-size:30px} .wb-wid.fini{outline:4px dashed var(--teal);outline-offset:2px} .wb-min-cmd{display:flex;gap:6px} .wb-wid .wb-min-cmd .btn{width:60px;height:44px;justify-content:center;padding:0;font-size:24px} .wb-wid.en-route .wb-wid-reg,.wb-wid.en-route .wb-min-z{display:none} .wb-min-s{display:flex;align-items:center;gap:6px} .wb-min-s input{width:64px;padding:5px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);font:inherit} .wb-fonds{display:flex;gap:6px} .wb-fonds button{width:36px;height:36px;padding:0;border:1px solid var(--border2);border-radius:50%;color:#1b2436;font-weight:700;font-size:18px} .wb-fonds button.on{border:3px solid var(--teal)} /* La géométrie posée : la feuille, ses outils, ses instruments, Annuler ; la roue dentée déplie le reste sur place. */ .mini .geo-z{height:100%;min-height:0} .mini .geo-milieu{flex:1;min-height:0} .mini .geo-feuille{height:100%} .mini .geo-svg{height:auto;flex:1;min-height:0} .mini .geo-outils{max-height:100%} .mini #geo-barre{padding-right:150px;min-height:36px} .sur-place:not(.regle) #geo-barre>:not(.geo-ins):not(.geo-taille):not([onclick^="geoAnnuler"]):not([onclick^="geoRefaire"]),.sur-place:not(.regle) .geo-aide{display:none} /* Les solides et les fonctions posés : le dessin seul, tout le reste dans le panneau. */ .mini .sol-z,.mini .fn-z{flex:1;min-height:0;flex-wrap:nowrap} .mini .sol-c,.mini .fn-c{flex:1;min-height:0;padding:0;border:none} .mini .sol-svg{height:0;min-height:0} .mini .fn-svg{flex:1;height:0;min-height:0;width:100%;max-width:none;aspect-ratio:auto} .wb-outil-p[data-o="solides"] .wb-op-r,.wb-outil-p[data-o="fonctions"] .wb-op-r{width:390px} .wb-op-rc .sol-g,.wb-op-rc .sol-d,.wb-op-rc .fn-g,.wb-op-rc .fn-d{flex:none;width:auto;max-width:none} /* Une vérification qui s'appuie sur un trait que l'élève n'aura pas (31/10/2026). */ .geo-v-al{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:-2px 0 8px;padding:8px 10px;border:2px dashed var(--amber,#E8A54B);border-radius:var(--r);background:var(--amber-l);font-size:13px} .geo-v-al .ti{color:var(--text)} /* Des questions sous la figure (31/10/2026). */ .geo-exo-d{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;gap:12px} .geo-exo-qs:empty{display:none} .geo-exo-qs{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:12px 14px} .geo-exo-qs h3{margin:0 0 10px;font-size:15px;color:var(--titre)} .geo-q{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px} .geo-q-c{flex:1;min-width:0} .geo-q .exo-trou{max-width:100%} .gr-z{margin-bottom:14px} .gr-l{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}.gr-t{flex:1;min-width:0;line-height:2.1;font-size:17px} .gr-in{min-width:3ch;max-width:100%;margin:0 3px;padding:2px 4px;font-size:16px} .gr-ordre{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}.gr-ordre li{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .gr-vide{flex:1;padding:6px 10px;border:2px dashed var(--border2);border-radius:var(--r);color:var(--text3);text-align:center} .gr-etiq{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px dashed var(--border2)} .gr-e{flex:1;padding:8px 10px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);font:inherit;font-size:16px;text-align:left;cursor:pointer} .gr-e.pose{border-color:var(--teal)} .gr-ed{margin-bottom:12px;padding:10px;border:1px solid var(--border2);border-radius:var(--r)}.gr-ed-t{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .gr-ed-l{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}.gr-c{width:52px}.gr-v{width:72px} .gr-ed textarea{width:100%;font-family:inherit} .gr-impr-t{display:inline-block;min-width:2.5em;border-bottom:1px dotted #000;margin:0 2px} .geo-corrige{margin:8px 0 12px;display:flex;flex-direction:column;gap:4px} .geo-qs-aj{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .geo-impr-qs{margin-top:12px} .exo-pq-eq{margin-top:14px;font-size:13.5px;color:var(--text2)} .geo-exo-d:has(.geo-exo-qs:not(:empty)) .geo-svg{height:60vh} /* Un document ou une activité dans une fenêtre du tableau (31/10/2026). */ .wb-doc-z{height:100%;overflow:auto;cursor:zoom-in} .wb-outil-p.plein .wb-doc-z{cursor:zoom-out} .wb-doc-z img,.wb-doc-z canvas{display:block;width:100%;height:auto;margin:0 auto 8px} .wb-exo-dep{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:12px} .wb-exo-dep>i{font-size:44px;color:var(--teal)} .wb-exo-dep b{font-size:20px;color:var(--titre)} .wb-exo-dep small{color:var(--text2)} .wb-op-c:has(>.exo-vue){padding:0;overflow:hidden;position:relative} .exo-vue.en-fen{position:absolute;inset:0;z-index:1;border-radius:inherit} .wb-op-encre{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;border-radius:inherit} .wb-outil-p.encre .wb-op-encre{pointer-events:auto;touch-action:none;cursor:crosshair} .wb-outil-p.encre .wb-op-b{visibility:visible} .wb-op-ef{display:none!important} .wb-outil-p.encre .wb-op-ef{display:flex!important} .wb-outil-p.encre .wb-op-b button[title^="Écrire"]{background:var(--teal);color:var(--sur-teal)} .wb-podoc-l{max-height:50vh;overflow:auto;margin-top:8px;display:flex;flex-direction:column;gap:2px} .wb-podoc-i{display:flex;align-items:center;gap:10px;padding:8px;border:none;background:none;font:inherit;color:var(--text);text-align:left;border-radius:var(--r);cursor:pointer} .wb-podoc-i:hover{background:var(--bg2)} .wb-podoc-i>i{font-size:20px;color:var(--teal)} .wb-podoc-i span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wb-podoc-i small{color:var(--text2)} /* Le rideau et le projecteur : sous les outils posés, au-dessus du tableau. */ .wb-ri{position:absolute;z-index:5;background:#2B3445;touch-action:none;cursor:move} .wb-ri-p{position:absolute;display:flex;align-items:center;justify-content:center;background:#F2C200;color:#1b2436;font-size:20px;touch-action:none} .wb-ri-p.h,.wb-ri-p.b{left:50%;width:84px;height:30px;margin-left:-42px;cursor:ns-resize} .wb-ri-p.h{top:0;border-radius:0 0 12px 12px} .wb-ri-p.b{bottom:0;border-radius:12px 12px 0 0} .wb-ri-p.g,.wb-ri-p.d{top:50%;width:30px;height:84px;margin-top:-42px;cursor:ew-resize} .wb-ri-p.g{left:0;border-radius:0 12px 12px 0} .wb-ri-p.d{right:0;border-radius:12px 0 0 12px} .wb-vo-x{position:absolute;top:6px;right:6px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#fff;color:#1b2436;font-size:18px;cursor:pointer} .wb-pj{position:absolute;z-index:12;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 300vmax rgb(8,12,20);pointer-events:none} .wb-lo{box-shadow:0 0 0 3px #1b2436,0 0 0 6px #fff,0 4px 18px rgba(0,0,0,.35);z-index:11;background:#fff} .wb-lo canvas{width:100%;height:100%;border-radius:50%;display:block} .wb-pj-b{position:absolute;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#fff;color:#1b2436;font-size:18px;pointer-events:auto;touch-action:none;cursor:pointer} .wb-pj-b.m{top:-19px;left:50%;margin-left:-19px;cursor:move} .wb-pj-b.t{top:85%;left:85%;margin:-19px 0 0 -19px;cursor:nwse-resize} .wb-pj-x{top:15%;left:85%;margin:-19px 0 0 -19px} /* La trace de la séance (31/10/2026). */ .wb-trace-l{max-height:40vh;overflow:auto;display:flex;flex-direction:column;gap:2px} .cb-sol{margin-top:10px;text-align:center} .cb-sol .cb-etapes{margin-top:4px;text-align:left} /* Le projecteur est au-dessus des outils posés (tout est dans le noir, sauf le rond) ; les commandes restent au-dessus de lui. */ .wb-surface:has(.wb-pj) :is(.wb-flot,.wb-bas,.wb-pagenum,.wb-poser-m,.wb-img-t,.wb-fige-m,.wb-menu,.wb-somm){z-index:13} /* Les fenêtres ouvertes depuis la fiche d'une activité (Donner, Classer…) : au-dessus d'elle (31/10/2026). */ body:has(> #exo-vue:not([style*="none"])) .mb:not(.lud-fen){z-index:450} /* La feuille de l'élève, plus grande (31/10/2026) ; un énoncé court au-dessus d'elle, et non à côté. */ .geo-exo .geo-svg{height:72vh} .geo-exo-prog{position:sticky;top:0} .exo-vue:has(.geo-exo) .exo-consigne{font-size:16px;line-height:1.3} .exo-vue:has(.geo-exo) .exo-consigne-bloc{padding:6px 12px;margin-bottom:8px;align-items:center} .exo-vue:has(.geo-exo) .exo-corps{padding-top:8px} .geo-exo{gap:8px} .exo-vue .exo-corps .geo-exo .geo-barre .syl-ch{font-size:13px;min-height:0} .exo-vue .exo-corps .geo-exo .geo-barre .btn{min-height:34px;padding:3px 9px;font-size:14px} .exo-vue .exo-corps .geo-exo.haut .geo-exo-prog .btn{min-height:36px;padding:4px 14px;font-size:15px} .exo-vue .exo-corps .geo-exo.haut .geo-exo-prog{padding:4px 12px;min-height:0} .exo-vue .exo-corps .geo-exo.haut .geo-exo-bas{flex-direction:row;align-items:center} .geo-exo.haut .geo-svg{height:max(60vh, min(72vh, calc(100vh - 272px)))} .geo-exo.haut{flex-direction:column;align-items:stretch} .geo-exo.haut .geo-exo-prog{position:static;flex:none;min-width:0;display:flex;align-items:center;gap:6px 14px;padding:5px 12px} @media (max-width:700px){.geo-exo.haut .geo-exo-prog{flex-wrap:wrap}} .geo-exo.haut .geo-exo-prog h3{margin:0;flex:none} .geo-exo.haut .geo-prog>li{padding:3px 8px} .geo-exo.haut .geo-prog{flex:1 1 300px;min-width:0} .geo-exo.haut .geo-exo-bas{margin:0} .geo-exo.haut .geo-exo-d{flex:none;width:100%} /* Le créateur : les outils sur deux colonnes, sans ascenseur (31/10/2026). */ .geo[data-geo="modele"] .geo-outils{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:3px;max-height:none;overflow:visible} .geo[data-geo="modele"] .geo-outils-t{grid-column:1/-1} /* Surligner en géométrie (31/10/2026). */ .gs-cr{display:inline-flex;gap:4px} .gs-cr button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:3px 10px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);color:var(--text);font:inherit;font-size:13px;cursor:pointer} .gs-cr button.on{border:2px solid var(--teal);background:var(--teal-l);font-weight:700} .gs-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .gs-form select{font:inherit;padding:5px 6px;border:1px solid var(--border2);border-radius:6px;background:var(--bg);color:var(--text);max-width:100%} .gs-form .exo-in{flex:1 1 170px;min-width:0} .gs-rel .btn{display:inline-flex;align-items:center;gap:5px}