/* « Ce qu'Ogrelo sait de moi » + « Comment tu te sens ? » (memoire.js). Fonctionne dans l'appli élève (--paper, --card, --soft, --ogre…)
   et dans l'espace parent (--bg, --surface, --muted, --accent…) : chaque couleur a son repli. Clair / sombre par les variables des pages. */
.mem-fond{--m-bg:var(--paper,var(--bg,#FFF8E8));--m-card:var(--card,var(--surface,#fff));--m-ink:var(--ink,#2B2A3A);--m-soft:var(--soft,var(--muted,#6B6880));--m-line:var(--line,#EADFC6);--m-vert:var(--ogre-d,var(--accent,#3E7F31));--m-ko:var(--ko-t,var(--crit,#B8322A))}
.mem-parent,.mem-tuile{--m-bg:var(--paper,var(--bg,#FFF8E8));--m-card:var(--card,var(--surface,#fff));--m-ink:var(--ink,#2B2A3A);--m-soft:var(--soft,var(--muted,#6B6880));--m-line:var(--line,#EADFC6);--m-vert:var(--ogre-d,var(--accent,#3E7F31));--m-ko:var(--ko-t,var(--crit,#B8322A))}
body.mem-ouvert{overflow:hidden}
.mem-fond{position:fixed;inset:0;z-index:1200;color:var(--m-ink);font-family:var(--body,system-ui,sans-serif)}
.mem-fond *,.mem-parent *{box-sizing:border-box}
.mem-tete{display:inline-grid;place-items:center;width:56px;height:56px;flex:none}
.mem-tete .ogre{width:100%;height:100%}

/* tuile de l'onglet Moi */
.mem-tuile{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:2px solid var(--m-line);background:var(--m-card);color:var(--m-ink);border-radius:20px;padding:16px;margin:0 0 16px;font:inherit;cursor:pointer}
.mem-tuile .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mem-tuile b{font-family:var(--display);font-size:1.1rem;line-height:1.2}
.mem-tuile small{color:var(--m-soft);font-size:.9rem;line-height:1.35}
.mem-tuile .go{color:var(--m-soft)}
.mem-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;background:color-mix(in srgb,var(--m-vert) 14%,transparent);color:var(--m-vert);flex:none;font-size:1.05rem}
.mem-ic.g{width:46px;height:46px;border-radius:14px;font-size:1.35rem}

/* écran plein */
.mem-page{background:var(--m-bg);overflow-y:auto;-webkit-overflow-scrolling:touch}
.mem-in{max-width:620px;margin:0 auto;padding:12px 16px calc(40px + env(safe-area-inset-bottom,0px))}
.mem-h{display:flex;gap:12px;align-items:flex-start;position:sticky;top:0;z-index:2;background:var(--m-bg);padding:10px 0 14px}
.mem-h h2{font-family:var(--display);font-size:1.35rem;line-height:1.15;margin:4px 0 4px}
.mem-h p{margin:0;color:var(--m-soft);font-size:.95rem;line-height:1.4}
.mem-x{flex:none;width:44px;height:44px;border-radius:14px;border:2px solid var(--m-line);background:var(--m-card);color:var(--m-ink);display:grid;place-items:center;font-size:1.1rem;cursor:pointer}
.mem-charge{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 0;color:var(--m-soft)}
.mem-maj{display:flex;align-items:center;gap:8px;color:var(--m-soft);font-size:.88rem;margin:0 0 14px}

.mem-carte{background:var(--m-card);border:2px solid var(--m-line);border-radius:20px;padding:16px;margin:0 0 16px}
.mem-carte h3{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.08rem;line-height:1.2;margin:0 0 12px}
.mem-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mem-l li{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--m-ink) 4%,transparent);line-height:1.45;transition:opacity .25s,transform .25s}
.mem-l li.parti{opacity:0;transform:translateX(16px)}
.mem-faux{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--m-line);background:var(--m-card);color:var(--m-soft);border-radius:999px;padding:6px 12px;font:inherit;font-size:.85rem;cursor:pointer;min-height:36px}
.mem-faux:hover,.mem-faux:focus-visible{color:var(--m-ko);border-color:var(--m-ko)}
.mem-sous{font-weight:700;margin:12px 0 8px;font-size:.95rem}
.mem-sous:first-of-type{margin-top:0}
.mem-sous2{color:var(--m-soft);margin:0 0 12px;font-size:.92rem;line-height:1.45}
.mem-vide{color:var(--m-soft);margin:0;line-height:1.45;font-size:.92rem}
.mem-note{color:var(--m-soft);font-size:.82rem;line-height:1.4;margin:10px 0 0}
.mem-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mem-chips li{display:flex;flex-direction:column;padding:8px 12px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--m-vert) 40%,transparent);background:color-mix(in srgb,var(--m-vert) 8%,transparent);max-width:100%}
.mem-chips li.ko{border-color:color-mix(in srgb,var(--m-ko) 45%,transparent);background:color-mix(in srgb,var(--m-ko) 7%,transparent)}
.mem-chips b{font-size:.92rem;line-height:1.3}
.mem-chips small{color:var(--m-soft);font-size:.8rem}
.mem-up{display:flex;gap:14px;align-items:flex-start;border-color:color-mix(in srgb,var(--m-vert) 45%,var(--m-line))}
.mem-up p{margin:0 0 12px;line-height:1.45}
.mem-kick{display:flex;align-items:center;gap:6px;font-weight:800;color:var(--m-vert);font-size:.9rem;margin:4px 0 6px!important}
.mem-att{display:flex;gap:12px;align-items:center}
.mem-att p{margin:0;line-height:1.45}
.mem-hum{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.mem-hum li{display:flex;align-items:center;gap:10px}
.mem-hum .mem-tete{width:36px;height:36px}
.mem-hum span{display:flex;flex-direction:column;line-height:1.3}
.mem-hum small{color:var(--m-soft);font-size:.82rem}
.mem-ligne{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0 4px;border-top:1px solid var(--m-line)}
.mem-sw{flex:none;width:52px;height:32px;border-radius:999px;border:0;background:color-mix(in srgb,var(--m-ink) 22%,transparent);position:relative;cursor:pointer;padding:0}
.mem-sw i{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s}
.mem-sw[aria-checked="true"]{background:var(--m-vert)}
.mem-sw[aria-checked="true"] i{left:24px}
.mem-lien{display:inline-block;margin-top:10px;background:none;border:0;padding:6px 0;color:var(--m-vert);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mem-pts{margin:0 0 6px;padding-left:20px;line-height:1.5;font-size:.92rem}
.mem-pts li{margin:0 0 4px}
.mem-raz{text-align:center;margin:26px 0 8px}
.mem-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:14px;border:0;background:var(--m-vert);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.mem-b.sec{background:var(--m-card);color:var(--m-ink);border:2px solid var(--m-line)}
.mem-b.ko{background:transparent;color:var(--m-ko);border:2px solid color-mix(in srgb,var(--m-ko) 55%,transparent)}
.mem-conf .mem-b.ko{background:var(--m-ko);color:#fff;border:0}

/* boîtes : confirmation, aide */
.mem-conf{background:color-mix(in srgb,#000 50%,transparent);display:flex;align-items:center;justify-content:center;padding:16px}
.mem-boite{background:var(--m-card);border-radius:22px;padding:22px 18px;max-width:420px;width:100%;text-align:center;max-height:92vh;overflow:auto}
.mem-boite h2{font-family:var(--display);font-size:1.2rem;line-height:1.2;margin:10px 0 8px}
.mem-boite p{line-height:1.5;margin:0 0 16px}
.mem-2b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mem-2b .mem-b{flex:1 1 130px}
.mem-num{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:10px;text-align:left}
.mem-num a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;border-radius:14px;border:2px solid var(--m-line);color:var(--m-ink);text-decoration:none}
.mem-num span{font-weight:800;color:var(--m-vert);white-space:nowrap}
.mem-num small{grid-column:1/-1;color:var(--m-soft);font-size:.85rem}

/* feuille « Comment tu te sens ? » */
.mem-feuille{background:color-mix(in srgb,#000 40%,transparent);display:flex;align-items:flex-end;justify-content:center}
.mem-sheet{background:var(--m-card);width:100%;max-width:520px;border-radius:26px 26px 0 0;padding:22px 16px calc(18px + env(safe-area-inset-bottom,0px));text-align:center}
@media (min-width:600px){.mem-feuille{align-items:center}.mem-sheet{border-radius:26px}}
.mem-sheet h2{font-family:var(--display);font-size:1.3rem;margin:0 0 16px}
.mem-faces{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.mem-face{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid transparent;background:none;border-radius:16px;padding:8px 2px;cursor:pointer;color:var(--m-ink);font:inherit;min-width:0}
.mem-face .mem-tete{width:48px;height:48px}
.mem-face small{font-size:.75rem;line-height:1.2;color:var(--m-soft)}
.mem-face:hover,.mem-face:focus-visible{border-color:var(--m-vert)}
.mem-en{display:flex;flex-direction:column;gap:10px}
.mem-enb{display:flex;align-items:center;gap:14px;border:2px solid var(--m-line);background:var(--m-card);color:var(--m-ink);border-radius:16px;padding:14px 16px;font:inherit;font-weight:700;cursor:pointer;min-height:52px}
.mem-enb:hover,.mem-enb:focus-visible{border-color:var(--m-vert)}
.mem-bat{display:inline-flex;gap:3px;align-items:flex-end}
.mem-bat i{width:7px;border-radius:3px;background:color-mix(in srgb,var(--m-ink) 18%,transparent)}
.mem-bat i:nth-child(1){height:10px}.mem-bat i:nth-child(2){height:15px}.mem-bat i:nth-child(3){height:20px}
.mem-bat i.on{background:var(--m-vert)}
.mem-passer{margin:18px auto 0;display:block;min-height:44px;padding:8px 22px;border-radius:999px;border:2px solid var(--m-line);background:transparent;color:var(--m-soft);font:inherit;font-weight:700;cursor:pointer}
.mem-sheet .mem-note{margin-top:12px}

.mem-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:1300;width:max-content;max-width:min(92vw,440px);background:var(--ink,#2B2A3A);color:var(--paper,var(--bg,#fff));padding:12px 16px;border-radius:14px;line-height:1.4;font-size:.95rem;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:opacity .4s}
.mem-toast.out{opacity:0}

/* espace parent */
.mem-parent .mem-carte{border-width:1px;border-radius:var(--r,18px)}
.mem-parent .mem-ic{background:var(--accent-soft,color-mix(in srgb,var(--m-vert) 14%,transparent))}
@media (prefers-reduced-motion:reduce){.mem-l li,.mem-sw i,.mem-toast{transition:none}}