/* Ogrelo · élèves sans ENT (sans-ent.js) : accueil, création du compte, code de reprise, Moi, carte de l'accueil. Couleurs : variables du thème (clair + sombre). */
.plat-se .plat-ic{color:var(--ogre-d)}
.se-reprendre{text-align:center;margin:14px 0 0}.se-reprendre .linkbtn2{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.se-reprendre i,.se-retour i,.se-rassure i,.se-rep-warn i{width:16px;height:16px;flex:none}
.se-blk{display:flex;flex-direction:column;gap:4px}
.se-retour{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;margin:0 0 10px;font-weight:700}
.se-intro{margin:0 0 14px;color:var(--soft);line-height:1.45}
.se-choix{display:grid;gap:10px;margin:0 0 12px}
.se-c{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:18px;background:var(--sheet);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.se-c:active{transform:scale(.98)}.se-c:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.se-c .plat-tx{flex:1}.se-c .plat-tx small{font-size:.8rem;font-weight:700;color:var(--soft)}
.se-fl{flex:none;width:18px;height:18px;color:var(--soft)}
.se-rassure{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:.85rem;color:var(--soft);line-height:1.4}
.se-ligne{display:flex;gap:8px;align-items:stretch}.se-ligne .exo-in{flex:1;min-width:0;margin:0}.se-ligne .btn{margin:0;width:auto;flex:none;padding:0 18px}
.se-code-in{font-family:var(--display);font-weight:900;font-size:1.25rem;letter-spacing:.14em;text-align:center;text-transform:uppercase}
.se-aide{margin:8px 0 4px;font-size:.85rem;color:var(--soft);line-height:1.4}.se-aide:empty{display:none}
.se-msg.ok{color:var(--ogre-d);font-weight:700}
.se-blk .exo-in{margin-bottom:12px}.se-blk .btn{margin:6px 0 0}.se-blk .r-err:empty{margin:0}
.se-cl{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 14px;border-radius:14px;background:color-mix(in srgb,var(--ogre) 9%,var(--sheet));border:2px solid color-mix(in srgb,var(--ogre) 30%,var(--line))}
.se-cl .plat-tx{flex:1}.se-cl small{color:var(--soft);font-weight:700;font-size:.8rem}.se-ok{width:20px;height:20px;color:var(--ogre-d);flex:none}
.se-nivs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 0 14px;border-radius:14px}
.se-nivs button{min-width:0;padding:10px 2px;border:2px solid var(--line);border-radius:12px;background:var(--sheet);color:var(--ink);font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-nivs button[aria-checked="true"]{border-color:var(--ogre-d);background:color-mix(in srgb,var(--ogre) 16%,var(--sheet));color:var(--ink)}
.se-requis{border-color:#D9534F!important;box-shadow:0 0 0 3px color-mix(in srgb,#D9534F 25%,transparent)!important}
.se-rep-h{display:flex;gap:12px;align-items:center;margin:0 0 6px}.se-rep-h svg{width:60px;height:60px;flex:none}.se-rep-h b{display:block;font-family:var(--display);font-size:1.15rem}.se-rep-h small{display:block;color:var(--soft);line-height:1.4;margin-top:2px}
.se-rep-code{margin:12px 0 10px;text-align:center;font-family:var(--display);font-weight:900;font-size:clamp(1.35rem,7vw,1.8rem);letter-spacing:.08em;color:var(--ink);background:var(--paper);border:3px dashed var(--line);border-radius:16px;padding:10px 6px;user-select:all;overflow-wrap:anywhere}
.se-rep-code.petit{font-size:clamp(1.1rem,5.6vw,1.4rem);margin:8px 0}
.se-rep-warn{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;font-size:.85rem;font-weight:700;color:var(--t-warn,#8A5A00);line-height:1.4}
.se-deux{display:grid;grid-template-columns:1fr 1fr;gap:10px}.se-deux .btn{margin:0;width:auto;min-width:0;padding-left:6px;padding-right:6px;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.se-deux .btn i{width:16px;height:16px;flex:none}
/* Moi */
.se-moi h3{display:flex;align-items:center;gap:8px}.se-moi h3 i{width:20px;height:20px}
.se-bloc{padding:14px 0 4px;border-top:1px solid var(--line)}.se-bloc:first-of-type{border-top:0;padding-top:4px}.se-bloc>b{display:block;margin:0 0 2px}
.se-bloc .se-nivs{margin:10px 0 6px}.se-voir{margin:6px 0 0;display:inline-flex;align-items:center;gap:8px;width:auto}
/* accueil d'un compte sans ENT */
.se-home{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:14px;border-radius:18px;background:color-mix(in srgb,var(--ogre) 8%,var(--sheet));border:2px solid color-mix(in srgb,var(--ogre) 22%,var(--line))}
.se-home-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--ogre) 18%,var(--sheet));color:var(--ogre-d)}.se-home-ic i{width:20px;height:20px}
.se-home-t{flex:1;min-width:0}.se-home-t b{display:block;font-family:var(--display);font-size:1.05rem}.se-home-t small{display:block;color:var(--soft);line-height:1.4;margin:2px 0 10px}
.se-home-b{display:grid;grid-template-columns:1fr 1fr;gap:8px}.se-home-b .btn{margin:0;width:auto;min-width:0;padding:10px 4px;overflow:hidden;text-overflow:ellipsis;font-size:.88rem;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.se-home-b .btn i{width:16px;height:16px;flex:none}
/* champ obligatoire oublié : fenêtre rouge en bas (même dessin que le mode classe) */
.t-demo.t-err{background:linear-gradient(135deg,#B83A30,#D9534F)!important;box-shadow:0 -10px 30px rgba(120,30,20,.3)!important}
.t-demo .t-ic{flex:none;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}.t-demo .t-ic i{width:22px;height:22px}
@media (max-width:350px){.se-nivs{grid-template-columns:repeat(3,1fr)}.se-home{flex-direction:column}}
.se-suppr{text-align:center}.se-suppr .linkbtn2{display:inline-flex;align-items:center;gap:6px;color:var(--ko,#C2362C);font-weight:700}.se-suppr i{width:14px;height:14px}


@media (max-width:430px){.se-reprendre{margin:10px 0 0}.se-reprendre button{font-size:.9rem}}

.plat-ic.plat-ogre{padding:0;overflow:hidden;background:none}.plat-ic.plat-ogre img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ---------- écrans « Compte Ogrelo » (sans-ent.js) : même style que l'accueil (connexion.css, bulles.css, tuiles.css) ----------
   un écran par étape : flèche de retour 48 px + titre, Ogrelo qui parle, une action ; tuiles et boutons en relief ; clair + sombre, 320 px d'abord */
.se-vue{display:flex;flex-direction:column;gap:18px;animation:lxSlide .3s cubic-bezier(.2,1,.4,1) both}
.se-vue>*{margin:0}
.se-vue .lx-tete b{font-size:1.18rem}
/* Ogrelo + LA bulle : 84 px sur le 1er écran, 64 px ensuite (place pour le clavier) */
.se-vue .se-dit{margin:0 0 2px}
.se-vue .se-dit>.f{width:84px;height:84px;transform-origin:50% 90%;animation:lxPop .5s cubic-bezier(.2,1.5,.4,1) both,lxBob 3.6s ease-in-out .6s infinite}
.se-vue .se-dit.petit>.f{width:64px;height:64px}
.se-vue .se-dit .og-bulle p{font-size:1.12rem;line-height:1.38}
/* les deux grosses tuiles (lx-role de connexion.css) */
.se-tuiles{display:flex;flex-direction:column;gap:16px}
/* le code de la classe : 6 grosses cases (comme le code du Défi), 3 + 3 */
.se-cases{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 4px repeat(3,minmax(0,1fr));gap:7px;cursor:text;border-radius:16px}
.se-cases input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;font-size:16px;color:transparent;caret-color:transparent;background:transparent;z-index:1}
.se-case{height:62px;border-radius:14px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--ink);text-transform:uppercase;
  background:var(--card);border:2px solid var(--line);box-shadow:0 4px 0 var(--duo-ombre,var(--line));transition:transform .08s ease,border-color .1s,box-shadow .1s}
.se-case:nth-of-type(4){grid-column:5}
.se-case.plein{border-color:color-mix(in srgb,var(--ogre) 60%,var(--line));box-shadow:0 4px 0 color-mix(in srgb,var(--ogre-d) 60%,var(--line));color:var(--ogre-d)}
.se-case.ici{border-color:var(--ogre-d);box-shadow:0 4px 0 var(--ogre-d);transform:translateY(-2px)}
.se-case.ici:empty::after{content:"";width:2px;height:26px;background:var(--ogre-d);animation:seCurseur 1s steps(1) infinite}
@keyframes seCurseur{50%{opacity:0}}
.se-cases,.se-cases:focus-within,.se-cases.se-requis{outline:none!important;box-shadow:none!important}.se-cases input:focus,.se-cases input:focus-visible{outline:none!important;box-shadow:none!important}.se-cases.se-requis .se-case{border-color:#D9534F}
/* champs en relief (prénom, initiale, code de reprise) */
.se-gros{display:block;width:100%;box-sizing:border-box;min-height:58px;margin:0;padding:12px 16px;font:inherit;font-family:var(--display);font-weight:800;font-size:1.3rem;
  border:2px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);box-shadow:0 4px 0 var(--duo-ombre,var(--line))}
.se-gros:focus{outline:none;border-color:var(--ogre-d);box-shadow:0 4px 0 var(--ogre-d)}
.se-gros::placeholder{color:var(--soft);font-weight:700;opacity:.6}
.se-rep-in{text-align:center;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(1.1rem,5.6vw,1.4rem)}
.se-vue .se-ini{display:flex;gap:12px;align-items:center;margin:0}
.se-vue .se-ini .se-ini-c{width:64px;flex:none;padding:10px 0;text-align:center;text-transform:uppercase}
.se-vue .se-ini label{display:block;font-weight:800;font-size:.95rem;line-height:1.3}
.se-vue .se-ini small{display:block;font-size:.82rem;color:var(--soft);line-height:1.35;margin-top:2px}
/* la classe : grosses pastilles en relief, la choisie en vert plein */
.se-vue .se-pills{--rc:#58A93F;--rd:#3D7F2B;display:flex;flex-wrap:wrap;gap:14px 12px;margin:0;border-radius:20px}
.se-vue .se-pills button{flex:1 1 calc(33.333% - 12px);min-width:0;min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 6px;
  border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;white-space:normal;overflow:visible;
  box-shadow:0 5px 0 var(--duo-ombre,var(--line));transition:transform .08s ease,box-shadow .08s ease;animation:lxIn .4s cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(.05s + var(--d,0)*.05s);-webkit-tap-highlight-color:transparent}
.se-pills button b{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1}
.se-pills button small{font-size:.78rem;font-weight:800;line-height:1.1;color:var(--soft)}
.se-vue .se-pills button[aria-checked="true"]{background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 88%,#fff),var(--rc));border-color:var(--rd);color:#fff;box-shadow:0 5px 0 var(--rd)}
.se-pills button[aria-checked="true"] b{text-shadow:0 2px 0 rgba(0,0,0,.14)}
.se-pills button[aria-checked="true"] small{color:#fff;opacity:.92}
.se-vue .se-pills button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--duo-ombre,var(--line))}
.se-vue .se-pills button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .se-vue .se-pills{--rc:#4E9A37;--rd:#2F6A22}}
:root[data-theme="dark"] .se-vue .se-pills{--rc:#4E9A37;--rd:#2F6A22}
/* « Valider » : gros bouton en relief, grisé tant que ce n'est pas prêt (il reste cliquable : il dit ce qui manque) */
.se-vue .btn{margin:0;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;font-size:1.12rem}
.se-vue .btn i{width:20px;height:20px;flex:none}
.se-vue .se-go:not(.pret){background:color-mix(in srgb,var(--line) 70%,var(--card));border-color:transparent;color:color-mix(in srgb,var(--ink) 50%,transparent);box-shadow:0 5px 0 var(--duo-ombre,var(--line))}
.se-vue .se-aide{margin:-8px 0 0;text-align:center;font-weight:700}
.se-vue .se-cl{margin:0}
.se-vue .se-rep-code{margin:0}
.se-vue .se-rep-warn{margin:0}
.se-vue .se-deux .btn{font-size:1rem}
/* la phrase qui rassure, petite, en bas de la fenêtre */
.se-pied{display:inline-flex;align-items:flex-start;gap:6px;font-size:.82rem;line-height:1.4;text-align:left}
.se-pied i{width:14px;height:14px;flex:none;margin-top:2px}
@media (prefers-reduced-motion:reduce){.se-vue,.se-vue .se-dit>.f,.se-vue .se-pills button,.se-case.ici:empty::after{animation:none!important}.se-case,.se-vue .se-pills button{transition:none}}

/* niveau trouvé par le code de classe : pré-choisi, marqué « ta classe » */
.se-pills button[data-trouve] .se-trouve{display:block;margin-top:2px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.se-vue .se-pills button{flex-basis:calc(33.333% - 12px)}
.se-bloc .se-nivs{grid-template-columns:repeat(4,1fr)}