/* F4IOZ — the mascots' little cartoons (mascottes-scene.js): the stage, its subtitles and buttons, the objects to
   handle, and the Chappe tower (chappe.js). Only .sc-…, .so-… and .ch-… classes; the site's colours when it has them,
   light and dark. With « reduced motion », nothing moves on its own (the engine shows every move at its end). */

.sc {
  --sc-ciel-haut: #8EC9FF; --sc-ciel-bas: #DDF0FF; --sc-colline: #6FAE6B; --sc-colline2: #9CC79A; --sc-soleil: #FFD45C; --sc-trait: #2B3A4C;
  --sc-bois: #4A3424; --sc-bois-clair: #7A5A40; --sc-pierre: #D9CDB8; --sc-pierre-trait: #A99A80; --sc-toit: #8B4B3A; --sc-piece: #F6EBD3;
  --sc-texte: var(--text, #14202E); --sc-fond: var(--panel-2, #F3F6FB); --sc-bord: var(--border-strong, #C5D0DE); --sc-or: #E0A400;
  --sc-brume: #EEF2F6; --sc-nuit: #0A1024;
  margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
:root[data-theme="dark"] .sc {
  --sc-ciel-haut: #1B2E57; --sc-ciel-bas: #3B5B8C; --sc-colline: #2F5A3C; --sc-colline2: #3D6B4A; --sc-soleil: #F2C94C; --sc-trait: #CFD8E6;
  --sc-bois: #2A1D14; --sc-bois-clair: #6E523B; --sc-pierre: #A89D8B; --sc-pierre-trait: #6F6758; --sc-toit: #7A4234; --sc-piece: #CDBF9F;
  --sc-texte: var(--text, #E8EEF6); --sc-fond: var(--panel-2, #1A2333); --sc-bord: var(--border-strong, #34425A); --sc-or: #FFC94D; --sc-brume: #C9D1DB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc {
    --sc-ciel-haut: #1B2E57; --sc-ciel-bas: #3B5B8C; --sc-colline: #2F5A3C; --sc-colline2: #3D6B4A; --sc-soleil: #F2C94C; --sc-trait: #CFD8E6;
    --sc-bois: #2A1D14; --sc-bois-clair: #6E523B; --sc-pierre: #A89D8B; --sc-pierre-trait: #6F6758; --sc-toit: #7A4234; --sc-piece: #CDBF9F;
    --sc-texte: var(--text, #E8EEF6); --sc-fond: var(--panel-2, #1A2333); --sc-bord: var(--border-strong, #34425A); --sc-or: #FFC94D; --sc-brume: #C9D1DB;
  }
}

.sc-cadre { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--sc-bord); background: linear-gradient(var(--sc-ciel-haut), var(--sc-ciel-bas)); }
.sc-svg { display: block; width: 100%; height: auto; max-height: min(62vh, 520px); }
.sc-ciel { fill: transparent; }
.sc-soleil { fill: var(--sc-soleil); opacity: .9; }
.sc-colline { fill: var(--sc-colline); } .sc-colline2 { fill: var(--sc-colline2); opacity: .8; }
.sc-nuit { fill: var(--sc-nuit); transition: opacity .6s linear; pointer-events: none; }
.sc-lieu { font: 700 15px system-ui, sans-serif; fill: var(--sc-trait); }
.sc-etiquette { font: 800 16px system-ui, sans-serif; fill: var(--sc-trait); paint-order: stroke; stroke: var(--sc-ciel-bas); stroke-width: 3px; stroke-linejoin: round; }
.sc-fleche { stroke: var(--sc-trait); stroke-width: 1.3; stroke-dasharray: 3 3; fill: none; }
.sc-eclair { fill: var(--sc-or); filter: drop-shadow(0 0 6px var(--sc-or)); }
.sc-lunette { fill: none; stroke: var(--sc-bois); stroke-width: 10; }
.sc-brume circle { fill: var(--sc-brume); filter: blur(6px); }

/* The subtitles under the stage, the player's buttons, the scene's words. */
.sc-sous-titre { margin: 0; min-height: 3.1em; padding: 8px 12px; font-size: 15px; line-height: 1.4; color: var(--sc-texte); background: color-mix(in srgb, var(--sc-fond) 92%, transparent);
  border-top: 1px solid var(--sc-bord); }
.sc-sous-titre:empty { display: none; }
.sc-nom { font: 800 11px system-ui, sans-serif; letter-spacing: .7px; text-transform: uppercase; margin-right: 4px; }
.sc-sous-titre[data-qui="gamma"] .sc-nom { color: var(--ma-gamma-bord, #2A7FAF); } .sc-sous-titre[data-qui="kepler"] .sc-nom { color: var(--ma-kepler-bord, #B07A1A); }
.sc-sous-titre[data-qui="doppler"] .sc-nom { color: var(--ma-doppler-bord, #C24E33); }
.sc-commandes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-b { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--sc-bord); background: var(--sc-fond); color: var(--sc-texte); font: 600 13.5px system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.sc-b:hover:not(:disabled) { border-color: var(--accent, #2F7DF6); }
.sc-b:disabled { opacity: .45; cursor: default; }
.sc-b:focus-visible { outline: 3px solid var(--sc-or); outline-offset: 2px; }
.sc-avance { margin-left: auto; font-size: 12px; color: var(--text-dim, #5A6B80); font-variant-numeric: tabular-nums; }
.sc-texte { font-size: 13.5px; }
.sc-texte summary { cursor: pointer; color: var(--text-dim, #5A6B80); }
.sc-fil { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

/* The actors: their shadow, the one speaking a little bigger, the pointing arm. */
.sc-ombre { fill: #000; opacity: .16; }
.sc-acteur .ma-svg { overflow: visible; }
.sc-acteur.parle .sc-corps { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sc-or) 70%, transparent)); }
.sc-doigt { transition: opacity .2s; }
.sc-bras { stroke: var(--sc-trait); stroke-width: 3.2; stroke-linecap: round; fill: none; }
.sc-main { fill: var(--sc-or); stroke: var(--sc-trait); stroke-width: 1.2; stroke-linejoin: round; }
.sc-sans-mascottes .sc-acteur { display: none; }

/* The objects. */
.so-socle, .so-axe, .so-hampe, .so-pied { fill: var(--sc-bois); stroke: var(--sc-bois); }
.so-tige, .so-rayon { stroke: var(--sc-bois); stroke-width: 3.5; stroke-linecap: round; fill: none; }
.so-pommeau, .so-poignee { fill: #C0392B; }
.so-roue { fill: none; stroke: var(--sc-bois-clair); stroke-width: 3; }
.so-hampe { stroke-width: 2.5; fill: none; }
.so-drapeau { fill: #E74C3C; stroke: #A93226; stroke-width: 1; }
.so-pied { stroke-width: 2; fill: none; }
.so-tube { fill: #B08D57; stroke: var(--sc-bois); stroke-width: 1; } .so-oculaire { fill: var(--sc-bois); }
.so-cadran { fill: #FFFDF5; stroke: var(--sc-trait); stroke-width: 2; } .so-graduations { stroke: var(--sc-trait); stroke-width: 1.4; }
.so-aiguille { stroke: #C0392B; stroke-width: 2; stroke-linecap: round; } .so-bouton { fill: var(--sc-trait); }

/* The Chappe tower: stone, a slatted regulator, its indicators and counterweights, the room and its manipulator. */
.ch-sol { stroke: var(--sc-trait); stroke-width: 1.2; opacity: .4; }
.ch-mur { fill: var(--sc-pierre); stroke: var(--sc-pierre-trait); stroke-width: 1.2; }
.ch-pierres { stroke: var(--sc-pierre-trait); stroke-width: .8; fill: none; opacity: .7; }
.ch-toit { fill: var(--sc-toit); }
.ch-mat { fill: var(--sc-bois); }
.ch-haubans { stroke: var(--sc-bois); stroke-width: .8; opacity: .55; fill: none; }
.ch-porte { fill: var(--sc-bois-clair); } .ch-fenetre { fill: #5D7FA3; stroke: var(--sc-pierre-trait); }
.ch-poutre { fill: var(--sc-bois); }
.ch-persiennes, .ch-lames { stroke: var(--sc-bois-clair); stroke-width: 1.6; }
.ch-bras { fill: var(--sc-bois); }
.ch-contre { fill: #5A5E66; }
.ch-axe, .ch-pivot { fill: #9AA3AF; }
.ch-piece { fill: var(--sc-piece); stroke: var(--sc-pierre-trait); stroke-width: 1.2; }
.ch-pied { stroke: var(--sc-bois-clair); stroke-width: 2; fill: none; }
.ch-lunettes path { stroke: #8A6B3C; stroke-width: 3; stroke-linecap: round; } .ch-lunettes circle { fill: var(--sc-bois); }

/* In a corner of the page (compagnon.js): a smaller stage. */
.sc-compagnon .sc-cadre { border: none; border-radius: 12px; }
.sc-compagnon .sc-svg { max-height: 120px; }
.sc-compagnon .sc-sous-titre { font-size: 14px; min-height: 0; }
.sc-compagnon .sc-texte { display: none; }
.sc-compagnon .sc-b { min-height: 32px; padding: 0 10px; font-size: 12.5px; }

@media (max-width: 600px) {
  .sc-sous-titre { font-size: 14px; }
  .sc-b { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-nuit, .sc-doigt { transition: none; }
}