/* Ogrelo · LA bulle d'Ogrelo (composant commun, chargé en dernier : il l'emporte sur les anciens styles de chaque page).
   Même forme partout : fond vert très doux, contour vert, coins arrondis, queue qui pointe vers le visage d'Ogrelo (à gauche, en bas),
   texte « écrit à la main », bien aéré ; contraste vérifié en clair et en sombre. Le texte s'écrit lettre par lettre (bubble.js · ecrireLettre).
   Nouvelles bulles : <div class="og-dit"><span class="f">${ogreSVG('happy')}</span><div class="og-bulle"><p>…</p></div></div> */
:root{--bul-bg:#F1F9EC;--bul-bd:#9FD08F;--bul-ink:#24323A;--bul-fort:#2F6E24;--bul-ombre:0 6px 0 #DCEFD3,0 10px 22px rgba(46,110,36,.12)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bul-bg:#26362C;--bul-bd:#4F8A43;--bul-ink:#F2F5EC;--bul-fort:#A6E394;--bul-ombre:0 6px 0 #1A251E,0 10px 22px rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--bul-bg:#26362C;--bul-bd:#4F8A43;--bul-ink:#F2F5EC;--bul-fort:#A6E394;--bul-ombre:0 6px 0 #1A251E,0 10px 22px rgba(0,0,0,.35)}

/* 1. l'ensemble visage + bulle : visage en bas à gauche, bulle à côté (la queue a sa place) */
.og-dit,.hello,.g-say,.gt-dit,.lg-dit,.ec-grignon,.pm-bulle,.h-conn,.h-mood,.c-him,.r-him{display:flex;align-items:flex-end!important;gap:14px!important}
.og-dit{margin:6px 0 24px}
.og-dit>.f,.gt-dit>.f,.lg-dit>.f,.ec-grignon>.f,.h-conn>.f,.h-mood>.f{flex:none;width:60px;height:60px}
.og-dit>.f svg,.gt-dit>.f svg,.lg-dit>.f svg,.ec-grignon>.f svg,.h-conn>.f svg,.h-mood>.f svg,.og-dit>.f .ogre,.h-conn .f .ogre,.h-mood .f .ogre{width:100%!important;height:100%!important}
.pm-bulle>svg{width:56px!important;height:56px!important}
/* les anciens cadres autour du visage disparaissent : seule la bulle reste */
.h-conn,.h-mood{background:none!important;border:0!important;padding:0!important;box-shadow:none!important}

/* 2. la bulle */
.og-bulle,.bubble,.g-say-b,.gt-dit>p,.lg-dit>p,.lg-dit>.lg-dd,.ec-dit,.pm-bulle>p,.h-conn>.t,.h-mood>.t,.lg-chat .lui>div{
  position:relative;flex:1;min-width:0;margin:0 0 4px 0!important;background:var(--bul-bg)!important;color:var(--bul-ink)!important;
  border:2px solid var(--bul-bd)!important;border-radius:22px 22px 22px 8px!important;padding:14px 18px!important;box-shadow:var(--bul-ombre)!important;filter:none!important;
  animation:bIn .4s cubic-bezier(.2,1.4,.4,1) both;transform-origin:0 100%;text-align:left}
.og-bulle p,.bubble p,.g-say-b p,.gt-dit>p,.lg-dit>p,.lg-dit>.lg-dd,.ec-dit p,.pm-bulle>p,.h-conn>.t p,.h-mood>.t p,.lg-chat .lui p.tw,.og-bulle .big,.bubble .big{
  font-family:"Patrick Hand","Comic Sans MS",cursive;font-size:1.16rem;line-height:1.4;letter-spacing:.01em;color:var(--bul-ink)}
.og-bulle p,.bubble p,.g-say-b p,.ec-dit p,.h-conn>.t p,.h-mood>.t p{margin:0}
.og-bulle p+p,.bubble p+p,.g-say-b p+p,.ec-dit p+p{margin-top:8px}
.og-bulle b,.bubble b,.g-say-b b,.gt-dit>p b,.lg-dit>p b,.lg-dit>.lg-dd p b,.ec-dit b,.pm-bulle>p b,.h-conn>.t b,.h-mood>.t b{color:var(--bul-fort)}
.h-conn>.t>b,.bubble .big{font-family:var(--display);font-size:1.15rem;display:block;margin-bottom:4px}
.h-conn>.t .btn,.h-mood>.t .btn{margin:12px 0 0}
.ec-dit .rel{color:color-mix(in srgb,var(--bul-ink) 70%,transparent)}
/* la queue : un petit losange qui continue le contour, pointé vers la bouche d'Ogrelo */
.og-bulle::before,.bubble::before,.g-say-b::before,.gt-dit>p::before,.lg-dit>p::before,.lg-dit>.lg-dd::before,.ec-dit::before,.pm-bulle>p::before,.h-conn>.t::before,.h-mood>.t::before,.lg-chat .lui>div::before{
  content:""!important;position:absolute!important;left:-9px!important;right:auto!important;top:auto!important;bottom:14px!important;width:16px!important;height:16px!important;
  background:var(--bul-bg)!important;border:0!important;border-left:2px solid var(--bul-bd)!important;border-bottom:2px solid var(--bul-bd)!important;
  clip-path:polygon(0 0,0 100%,100% 100%)!important;transform:rotate(45deg) skew(8deg,8deg)!important;border-radius:0 0 0 4px!important}
.og-bulle::after,.bubble::after,.g-say-b::after,.gt-dit>p::after,.lg-dit>p::after,.lg-dit>.lg-dd::after,.lg-chat .lui>div::after{content:none!important}
/* bulle sans visage à côté (consigne, prononciation) : pas de queue */
.og-bulle.seule::before{display:none!important}

/* 3. le chat d'Ogrelo : mini-visage à gauche de chaque série de messages, même bulle ; l'élève à droite, en bleu */
.g-body .g-msg.him{position:relative;margin-left:44px;max-width:calc(100% - 56px);background:var(--bul-bg)!important;color:var(--bul-ink)!important;border:2px solid var(--bul-bd)!important;
  border-radius:20px 20px 20px 8px!important;padding:12px 16px!important;box-shadow:var(--bul-ombre);animation:bIn .3s cubic-bezier(.2,1.3,.4,1) both;transform-origin:0 100%}
.g-body .g-msg.him::before{content:"";position:absolute;left:-46px;bottom:-2px;width:34px;height:34px;border-radius:50%;background:var(--card) var(--ogre-mini,none) center/88% no-repeat;box-shadow:0 0 0 2px var(--bul-bd)}
.g-body .g-msg.him+.g-msg.him::before{visibility:hidden}
.g-body .g-msg.him:not(.g-flux)::after{content:"";position:absolute;left:-9px;bottom:8px;width:16px;height:16px;background:var(--bul-bg);border-left:2px solid var(--bul-bd);border-bottom:2px solid var(--bul-bd);clip-path:polygon(0 0,0 100%,100% 100%);transform:rotate(45deg) skew(8deg,8deg);border-radius:0 0 0 4px}
.g-body .g-msg.me{position:relative;background:linear-gradient(150deg,#3A86D6,#2471AE);color:#fff;border-radius:20px 20px 8px 20px;padding:11px 16px;box-shadow:0 4px 0 #1B5687;animation:bIn .3s ease both;transform-origin:100% 100%}
.g-body .g-msg.g-typing{display:flex;gap:5px;align-items:center;min-height:46px;align-self:flex-start}
.lg-chat .lui{gap:12px!important;align-items:flex-end}
.lg-chat .lui>div{padding:11px 15px!important}

/* 4. la visite guidée : même teinte de texte, écriture à la main */
.vg-txt{font-family:"Patrick Hand","Comic Sans MS",cursive;font-size:1.12rem!important;line-height:1.4}

/* 5. état vide (cartes, défis, groupes) : la phrase d'Ogrelo devient une bulle, queue vers le haut (Ogrelo est au-dessus) */
.cm-vide>p{position:relative;max-width:440px;margin:14px auto 22px!important;background:var(--bul-bg);color:var(--bul-ink)!important;border:2px solid var(--bul-bd);border-radius:22px;padding:14px 18px;box-shadow:var(--bul-ombre);
  font-family:"Patrick Hand","Comic Sans MS",cursive;font-size:1.12rem;line-height:1.4}
.cm-vide>p::before{content:"";position:absolute;left:50%;top:-9px;width:16px;height:16px;margin-left:-8px;background:var(--bul-bg);border-left:2px solid var(--bul-bd);border-top:2px solid var(--bul-bd);transform:rotate(45deg);clip-path:polygon(0 0,100% 0,0 100%)}

@media (max-width:380px){.og-dit>.f,.gt-dit>.f,.lg-dit>.f,.ec-grignon>.f,.h-conn>.f,.h-mood>.f{width:50px;height:50px}
  .og-bulle,.bubble,.g-say-b,.gt-dit>p,.lg-dit>p,.lg-dit>.lg-dd,.ec-dit,.pm-bulle>p,.h-conn>.t,.h-mood>.t{padding:12px 15px!important}
  .og-bulle p,.bubble p,.g-say-b p,.gt-dit>p,.lg-dit>p,.lg-dit>.lg-dd,.ec-dit p,.pm-bulle>p,.h-conn>.t p,.h-mood>.t p{font-size:1.08rem}}
@media (prefers-reduced-motion: reduce){.og-bulle,.bubble,.g-say-b,.gt-dit>p,.lg-dit>p,.lg-dit>.lg-dd,.ec-dit,.pm-bulle>p,.h-conn>.t,.h-mood>.t,.lg-chat .lui>div,.g-body .g-msg{animation:none}}