/* =====================================================================
   Animations APM41033 — styles partagés.
   Chrome du site + rôles de visualisation (palette validée, cf. dataviz).
   ===================================================================== */
:root{
  --bg:#faf9f6; --surface:#ffffff; --text:#20242a; --muted:#68707c;
  --line:#e5e2da; --accent:#0000b3; --accent-soft:#eaeaf9;
  /* rôles viz (palette de référence validée — mode clair) */
  --viz-surface:#fcfcfb;
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a;
  --ink-1:#0b0b0b; --ink-2:#52514e; --ink-muted:#898781;
  --grid:#e1e0d9; --baseline:#c3c2b7;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14161a; --surface:#1b1e24; --text:#e8e6e1; --muted:#9aa2ad;
    --line:#2c313a; --accent:#9c9cff; --accent-soft:#23234d;
    --viz-surface:#1a1a19;
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
    --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-muted:#898781;
    --grid:#2c2c2a; --baseline:#383835;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#14161a; --surface:#1b1e24; --text:#e8e6e1; --muted:#9aa2ad;
  --line:#2c313a; --accent:#9c9cff; --accent-soft:#23234d;
  --viz-surface:#1a1a19;
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
  --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-muted:#898781;
  --grid:#2c2c2a; --baseline:#383835;
  color-scheme: dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif}
main{max-width:52rem; margin:0 auto; padding:1.6rem 1.2rem 4rem}
/* mode intégré (déplié dans la page semaine) : compact, aucun défilement interne */
.embedded body{overflow:hidden}
.embedded main{padding:.4rem .5rem 1rem; max-width:none}
.embedded header.anim .back{display:none}
.embedded header.anim h1{margin-top:0; font-size:1.1rem}
.embedded header.anim .sub{display:none}
.embedded header.anim .slug{display:none}
.embedded .note{display:none}
header.anim{margin-bottom:1.2rem}
header.anim .back{font-size:.82rem; color:var(--accent); text-decoration:none}
header.anim h1{font:600 1.35rem/1.25 Charter,Georgia,serif; margin:.5rem 0 .2rem}
header.anim .sub{color:var(--muted); font-size:.9rem; margin:0}
header.anim .slug{font-size:.72rem; color:var(--ink-muted); font-family:ui-monospace,Menlo,monospace}

/* contrôles */
.controls{display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:end;
  border:1px solid var(--line); background:var(--surface); border-radius:10px;
  padding:.9rem 1.1rem; margin:1rem 0 1.2rem}
.ctl{display:flex; flex-direction:column; gap:.25rem; min-width:9.5rem}
.ctl label{font-size:.78rem; color:var(--muted)}
.ctl output{font-weight:700; font-size:.85rem; font-variant-numeric:tabular-nums}
.ctl input[type=range]{width:11rem; accent-color:var(--accent)}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.seg button{appearance:none; border:none; background:none; cursor:pointer; color:var(--muted);
  padding:.4rem .9rem; font-size:.82rem}
.seg button.on{background:var(--accent); color:#fff; font-weight:600}
:root[data-theme="dark"] .seg button.on{color:#14161a}
button.action{appearance:none; cursor:pointer; border:1px solid var(--accent);
  background:var(--accent-soft); color:var(--accent); border-radius:8px;
  padding:.45rem .95rem; font-size:.84rem; font-weight:600}

/* bandeau des données observées */
.datastrip{border:1px solid var(--line); border-left:4px solid var(--series-1); border-radius:8px;
  background:var(--surface); padding:.6rem .9rem; margin:0 0 1rem}
.datastrip .lbl{font-size:.75rem; color:var(--muted); margin-bottom:.25rem}
.datastrip .vals{font-family:ui-monospace,Menlo,monospace; font-size:.85rem; font-variant-numeric:tabular-nums;
  line-height:1.7; word-break:break-word}
.datastrip .reminder{margin:.45rem 0 0; font-size:.86rem; font-weight:600}

/* carte graphique */
.card{border:1px solid var(--line); border-radius:10px; background:var(--viz-surface);
  padding:1rem 1rem .6rem; margin:0 0 1rem}
.card h2{font-size:.95rem; margin:.1rem 0 .1rem; font-weight:600}
.card .csub{font-size:.8rem; color:var(--muted); margin:0 0 .5rem}
.card svg{display:block; width:100%; height:auto}
.legend{display:flex; gap:1.1rem; flex-wrap:wrap; padding:.45rem .1rem .3rem; font-size:.8rem; color:var(--ink-2)}
.legend .chip{display:inline; line-height:1.5}
.legend .sw{width:.85rem; height:.55rem; border-radius:2px; display:inline-block; vertical-align:middle; margin-right:.4rem}

/* tuiles de stats */
.tiles{display:flex; gap:.8rem; flex-wrap:wrap; margin:.2rem 0 1rem}
.tile{border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:.55rem .9rem; min-width:8.5rem}
.tile .tl{font-size:.72rem; color:var(--muted)}
.tile .tv{font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums}

.note{font-size:.85rem; color:var(--muted); border-left:3px solid var(--line);
  padding-left:.9rem; margin:1.2rem 0}
.note a{color:var(--accent)}

/* tooltip */
.viz-tip{position:fixed; z-index:50; pointer-events:none; background:var(--surface);
  border:1px solid var(--line); border-radius:6px; padding:.3rem .55rem; font-size:.76rem;
  box-shadow:0 4px 14px rgba(0,0,0,.12); display:none; font-variant-numeric:tabular-nums}

/* marques SVG (spécifs : traits fins, grille discrète) */
.gridline{stroke:var(--grid); stroke-width:1}
.axisline{stroke:var(--baseline); stroke-width:1}
.ticktext{fill:var(--ink-muted); font-size:10.5px}
.axistitle{fill:var(--ink-2); font-size:11px}
.dlabel{fill:var(--ink-2); font-size:11px; font-weight:600}

/* formules : composées par MathJax dans le HTML, par mathText() dans les SVG */
mjx-container{font-size:1em !important}
.card h2 mjx-container, header.anim h1 mjx-container{font-size:1em !important}
.card svg{overflow:visible}
text.mth{font-family:Charter,"Times New Roman",Georgia,serif}
text.mth.axistitle{font-size:12px}
text.mth.dlabel{font-size:12px}
.verdict{font-size:.86rem; margin:.2rem 0 .6rem}