/* Grignon : bouton flottant, panneau de discussion, tableau blanc */
[hidden]{display:none!important}
:root{--board:#FFFFFF;--board-line:#DCE6EC;--marker:#24303A;--marker-red:#D23A2E;--marker-blue:#1F66C2;--marker-green:#2B8A3E;--hand:"Patrick Hand","Comic Sans MS",cursive}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--board:#F7F5EE}}
:root[data-theme="dark"]{--board:#F7F5EE}

.g-fab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:flex-end;gap:6px;border:0;background:none;padding:0}
.g-fab .face{width:74px;height:74px;border-radius:50%;background:var(--card);border:4px solid var(--ogre-d);box-shadow:0 6px 0 rgba(0,0,0,.18);display:grid;place-items:center;overflow:hidden}
.g-fab .face .ogre{width:66px;height:66px}
.g-fab .tip{background:var(--ink);color:var(--paper);font-family:var(--display);font-weight:800;border-radius:16px 16px 4px 16px;padding:8px 12px;margin-bottom:40px;white-space:nowrap;box-shadow:var(--shadow)}
body.g-open .g-fab{display:none}
body .wrap{padding-bottom:130px}

.g-msg.him .w{opacity:.18;transition:opacity .15s}
.g-msg.him .w.on{opacity:1}
.g-msg.him{font-size:1.1rem;line-height:1.45}
.g-panel{position:fixed;inset:auto 0 0 0;z-index:45;height:min(90vh,820px);display:flex;flex-direction:column;background:var(--paper);border-top:4px solid var(--ogre-d);border-radius:26px 26px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom,0px)}
.g-panel[hidden]{display:none!important}
@media (min-width:760px){.g-panel{left:auto;right:16px;bottom:16px;width:440px;height:min(88vh,780px);border-radius:26px;border:4px solid var(--ogre-d)}}
.g-head{display:flex;align-items:center;gap:10px;padding:10px 14px 6px}
.g-head .ogre{width:52px;height:52px}
.g-head b{font-family:var(--display);font-size:1.2rem;flex:1}
.g-head small{display:block;font-family:var(--body);font-weight:400;color:var(--soft);font-size:.8rem}
.g-x{border:0;background:var(--card);border-radius:999px;width:40px;height:40px;font-size:1.2rem;box-shadow:var(--shadow)}
.g-body{flex:1;min-height:0;overflow-y:auto;padding:4px 14px 8px;display:flex;flex-direction:column;gap:10px}

/* Tableau blanc */
.g-board{background:var(--board);border:6px solid #8A6A43;border-radius:12px;padding:12px 14px;color:var(--marker);font-family:var(--hand);font-size:1.25rem;line-height:1.35;box-shadow:inset 0 0 0 2px #6E5333, var(--shadow);background-image:linear-gradient(var(--board-line) 1px,transparent 1px);background-size:100% 34px}
.g-board h4{font-family:var(--hand);font-size:1.5rem;margin:0 0 6px;color:var(--marker-blue);text-decoration:underline wavy var(--marker-red) 2px;text-underline-offset:5px}
.g-board .el{margin:6px 0;opacity:0}
.g-board .el.on{animation:g-draw .45s ease-out forwards}
@keyframes g-draw{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}   /* simple apparition, sans glissement horizontal */
.g-board .c-rouge{color:var(--marker-red)} .g-board .c-bleu{color:var(--marker-blue)} .g-board .c-vert{color:var(--marker-green)}
.g-board ul{margin:0;padding-left:1.2em}
.g-board ol{margin:0;padding:0;list-style:none;counter-reset:g}
.g-board ol li{counter-increment:g;display:flex;gap:8px;align-items:baseline}
.g-board ol li::before{content:counter(g);border:2px solid var(--marker-red);color:var(--marker-red);border-radius:50%;min-width:28px;height:28px;display:inline-grid;place-items:center;font-size:1rem}
.g-board .flow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.g-board .flow span.b{border:2px solid var(--marker);border-radius:10px;padding:0 8px}
.g-board .flow i{font-style:normal;color:var(--marker-red);font-size:1.4rem}
.g-board .mot{display:flex;flex-wrap:wrap;gap:2px}
.g-board .mot span{display:flex;flex-direction:column;align-items:center;font-size:1.8rem}
.g-board .mot span small{font-size:.95rem;border-top:2px solid currentColor;padding-top:1px}
.g-board .mot span:nth-child(1){color:var(--marker-blue)} .g-board .mot span:nth-child(2){color:var(--marker-red)} .g-board .mot span:nth-child(3){color:var(--marker-green)}
.g-board mark{background:#FFE45C;color:inherit;border-radius:4px;padding:0 3px}
.g-board .cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g-board .cmp>div{border:2px dashed var(--marker);border-radius:10px;padding:4px 8px;min-width:0}
.g-board .cmp b{color:var(--marker-blue)}
.g-board table{border-collapse:collapse;width:100%;font-size:1.05rem}
.g-board td,.g-board th{border:2px solid var(--marker);padding:2px 6px;text-align:left;vertical-align:top}
.g-board th{color:var(--marker-blue)}
.g-board .dessin{font-size:2.4rem;letter-spacing:6px;text-align:center}
.g-board .tblwrap{overflow-x:auto}

/* Bulles */
.g-msg{max-width:88%;padding:8px 12px;border-radius:18px;font-size:1rem}
.g-msg.me{align-self:flex-end;background:var(--sky);color:#fff;border-bottom-right-radius:4px}
.g-msg.him{align-self:flex-start;background:var(--card);border:2px solid var(--line);border-bottom-left-radius:4px}
.g-msg.info{align-self:center;background:none;color:var(--soft);font-size:.88rem;text-align:center}
.g-msg.err{align-self:center;background:var(--ko-bg);color:var(--ink);border:2px solid var(--ko)}
.g-chips{display:flex;flex-wrap:wrap;gap:6px}
.g-chip{border:2px solid var(--ogre);background:var(--card);border-radius:999px;padding:6px 12px;font-size:.92rem}

/* Barre du bas */
.g-bar{display:flex;align-items:center;gap:10px;padding:8px 14px 12px;border-top:2px solid var(--line)}
.g-mic{width:72px;height:72px;border-radius:50%;border:0;background:var(--ogre-d);color:#fff;font-size:1.9rem;flex:none;box-shadow:0 5px 0 rgba(0,0,0,.2);position:relative}
.g-mic.rec{background:var(--ko);animation:g-pulse 1.1s ease-in-out infinite}
.g-mic.busy{background:var(--soft)}
@keyframes g-pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,71,60,.5)}50%{box-shadow:0 0 0 14px rgba(224,71,60,0)}}
.g-status{flex:1;min-width:0;font-size:.95rem;color:var(--soft)}
.g-status b{display:block;color:var(--ink);font-family:var(--display);font-size:1.05rem}
.g-kb{border:0;background:var(--card);border-radius:14px;width:48px;height:48px;font-size:1.3rem;box-shadow:var(--shadow);flex:none}
.g-type{display:flex;gap:8px;padding:0 14px 10px}
.g-type input{flex:1;min-width:0;border:3px solid var(--line);border-radius:14px;padding:10px 12px;font:inherit;background:var(--card);color:var(--ink)}
.g-type button{border:0;border-radius:14px;background:var(--ogre-d);color:#fff;font-family:var(--display);font-weight:800;padding:0 16px}
.g-code{display:grid;gap:10px;padding:6px 0}
.g-code input{border:3px solid var(--line);border-radius:14px;padding:12px;font:inherit;font-size:1.2rem;text-align:center;letter-spacing:2px;background:var(--card);color:var(--ink)}
.g-dots::after{content:"";animation:g-dots 1.2s steps(4) infinite}
@keyframes g-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.ogre.talk .mouth{animation:g-talk .25s ease-in-out infinite alternate;transform-origin:50px 70px}
@keyframes g-talk{from{transform:scaleY(.6)}to{transform:scaleY(1.15)}}
@media (prefers-reduced-motion: reduce){.g-board .el.on{animation:none;opacity:1}.g-mic.rec,.ogre.talk .mouth,.g-dots::after{animation:none}}

/* Devoirs Pronote */
.pday{margin-bottom:12px}
.pdate{font-family:var(--display);font-weight:800;margin:4px 2px 6px;color:var(--soft)}
.pdv{background:var(--card);border:3px solid var(--line);border-radius:18px;padding:10px 12px;margin-bottom:8px;box-shadow:var(--shadow)}
.pdv p{margin:6px 0 2px;white-space:pre-line}
.pdv small{color:var(--soft)}
.pmat{display:inline-block;color:#fff;font-family:var(--display);font-weight:800;font-size:.8rem;border-radius:999px;padding:1px 10px}
.pneed{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:2px dashed var(--line)}
.pneed span{flex:1;min-width:160px;font-size:.95rem}
.pbtn{width:auto;display:inline-block;margin:0;padding:8px 14px;font-size:.95rem;cursor:pointer}
.linkbtn2{background:none;border:0;color:var(--sky);text-decoration:underline;font:inherit;padding:0}

/* bulle « Grignon écrit… » */
.g-typing{display:inline-flex;gap:5px;align-items:center;padding:14px 16px!important;min-height:0}
.g-typing span{width:8px;height:8px;border-radius:50%;background:var(--soft);opacity:.45;animation:g-wave 1.2s ease-in-out infinite}
.g-typing span:nth-child(2){animation-delay:.15s}.g-typing span:nth-child(3){animation-delay:.3s}
@keyframes g-wave{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-6px);opacity:1}}
@media (prefers-reduced-motion: reduce){.g-typing span{animation:none;opacity:.7}}
.g-kb{display:grid;place-items:center;font-size:1.6rem;color:var(--ink);width:52px;height:52px}.g-kb i{width:1.1em;height:1.1em}.chev i,.go i{vertical-align:-.2em}