/* F4IOZ — the mascots' little notes (mascotte-note.js): a face and a short bubble, foldable to the face, closable.
   Only .mn-… classes; the site's colours, light and dark. Floating (the home page): bottom left, beside the rail. */

.mn { --mn-bord: var(--border-strong, #C5D0DE); display: flex; align-items: flex-start; gap: 8px; min-width: 0; color: var(--text, #14202E); }
.mn[hidden] { display: none; }
.mn[data-qui="gamma"] { --mn-nom: var(--ma-gamma-bord, #2A7FAF); } .mn[data-qui="kepler"] { --mn-nom: var(--ma-kepler-bord, #B07A1A); }
.mn[data-qui="doppler"] { --mn-nom: var(--ma-doppler-bord, #C24E33); }
.mn-perso { flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.mn-perso .ma-svg { width: 44px; height: 44px; }
.mn-perso:focus-visible, .mn-b:focus-visible, .mn-lien:focus-visible { outline: 3px solid #FFC94D; outline-offset: 2px; }
.mn-bulle { position: relative; flex: 1 1 auto; min-width: 0; padding: 6px 10px 7px; border-radius: 4px 14px 14px 14px; font-size: 13.5px; line-height: 1.4;
  background: var(--panel-2, #F3F6FB); border: 1px solid var(--mn-bord); }
.mn-nom { display: block; font: 800 10.5px/1.3 system-ui, sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--mn-nom); margin-bottom: 1px; }
.mn-lien { font-weight: 700; white-space: nowrap; }
.mn-actions { flex: none; display: flex; flex-direction: column; gap: 3px; }
.mn-b { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--mn-bord); background: var(--panel, #fff);
  color: var(--text-dim, #5A6B80); cursor: pointer; }
.mn-b svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.mn-b:hover { color: var(--text, #14202E); border-color: var(--accent, #2F7DF6); }
.mn-replie .mn-bulle, .mn-replie .mn-b.mn-autre { display: none; }
.mn-replie .mn-perso { border: 1px solid var(--mn-bord); background: var(--panel, #fff); }
.mn-replie .mn-actions { flex-direction: row; }
.mn-replie .mn-ferme { display: none; }

/* The home page: a corner, never over the content that matters; folded, a small round face. */
.mn-flottant { position: fixed; z-index: 55; left: calc(var(--rail-w, 0px) + 14px); bottom: 14px; width: min(360px, calc(100vw - var(--rail-w, 0px) - 28px));
  padding: 6px 8px; border-radius: 16px; background: var(--panel, #fff); border: 1px solid var(--mn-bord); box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  animation: mn-entre .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.mn-flottant.mn-replie { width: auto; padding: 3px; border-radius: 999px; }
.mn-flottant.mn-replie .mn-actions { display: none; }
.mn-flottant.mn-replie .mn-perso { border: 0; background: none; width: 48px; height: 48px; }
.mn-flottant.mn-replie .mn-perso .ma-svg { width: 48px; height: 48px; }

/* An inline one (404, Planning): flat, no frame; the planning's is tighter. */
.mn-en-ligne { margin: 0 0 8px; }
.pl-doppler .mn { margin: 0 0 8px; }
.pl-doppler .mn-perso, .pl-doppler .mn-perso .ma-svg { width: 36px; height: 36px; }
.pl-doppler .mn-bulle { font-size: 13px; padding: 4px 9px 5px; }
.erreur .mn { justify-content: center; text-align: left; margin: 10px auto 14px; max-width: 520px; }

@keyframes mn-entre { from { transform: translateY(18px) scale(.92); opacity: 0; } }
@media (max-width: 719px) { .mn-flottant { left: 8px; bottom: 8px; width: calc(100vw - 16px); } .mn-flottant.mn-replie { width: auto; } }
@media print { .mn { display: none; } }
@media (prefers-reduced-motion: reduce) { .mn-flottant { animation: none; } }