/* Theranostic Atlas — visual identity (loaded last, over the page styles and theme.css).
   Direction: a scientific instrument. Navy header band carrying the nuclide-chart signature (β− blue, α yellow, β+ red),
   cool neutral surfaces, phase rings in neutral steps that darken toward the centre (closer to approval),
   so the radionuclide colours of the dots carry the information. IBM Plex: Sans for text, Condensed for titles and labels, Mono for figures. */
:root:not([data-page="carte"]) {
  --bg: #f2f4f7; --surface: #ffffff; --ink: #0e1a28; --muted: #445264; --faint: #687586; --line: #d8dee6;
  --sunken: #e9edf2; --raise: #f7f9fb;
  --nav: #0c2036; --nav-ink: #eef3f9; --nav-muted: #a3b5c8; --link: #1f5fd6;
  /* phases: four distinct muted tints, from approved (violet) through phase 3 (green), 2 (sand), 1 (peach); no phase in grey */
  --ring0: #ddd6f0; --ring0-on: #c9bee8; --ring3: #d4eada; --ring3-on: #bcdcc5;
  --ring2: #f2e8c8; --ring2-on: #e7d79f; --ring1: #f7e2d5; --ring1-on: #efcbb5; --ring4: #eef1f5; --ring4-on: #dde3ea;
  --hub: #0c2036; --hub-ink: #eef3f9; --sel: #0c2036; --sel-ink: #000000; --sel-tint: rgba(12, 32, 54, .07);
  --f-display: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-page="carte"]) {
    --bg: #0a1018; --surface: #101924; --ink: #e6edf5; --muted: #a8b6c6; --faint: #7f8e9f; --line: #233041;
    --sunken: #0d151f; --raise: #142030;
    --nav: #070d15; --nav-ink: #e6edf5; --nav-muted: #8fa2b6; --link: #6fa2ff;
    --ring0: #2d2846; --ring0-on: #3b3460; --ring3: #1d3527; --ring3-on: #284836;
    --ring2: #3a321c; --ring2-on: #4d4426; --ring1: #3d2920; --ring1-on: #52372b; --ring4: #161f2b; --ring4-on: #202b3a;
    --hub: #e6edf5; --hub-ink: #0a1018; --sel: #e6edf5; --sel-ink: #ffffff; --sel-tint: rgba(255, 255, 255, .08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]:not([data-page="carte"]) {
  --bg: #0a1018; --surface: #101924; --ink: #e6edf5; --muted: #a8b6c6; --faint: #7f8e9f; --line: #233041;
  --sunken: #0d151f; --raise: #142030;
  --nav: #070d15; --nav-ink: #e6edf5; --nav-muted: #8fa2b6; --link: #6fa2ff;
  --ring0: #2d2846; --ring0-on: #3b3460; --ring3: #1d3527; --ring3-on: #284836;
  --ring2: #3a321c; --ring2-on: #4d4426; --ring1: #3d2920; --ring1-on: #52372b; --ring4: #161f2b; --ring4-on: #202b3a;
  --hub: #e6edf5; --hub-ink: #0a1018; --sel: #e6edf5; --sel-ink: #ffffff; --sel-tint: rgba(255, 255, 255, .08);
  color-scheme: dark;
}

html { border-top: 0 !important; border-image: none !important; }
body { font-size: 14.5px; line-height: 1.5; }
a { color: var(--link); text-underline-offset: 2px; }

/* ---------- header band ---------- */
.shell { background: var(--nav); border-bottom: 0;
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.shell::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--k-beta) 0 46%, var(--k-alpha) 46% 62%, var(--k-posi) 62% 100%); }
.shell-in { padding-block: 10px; gap: 8px 22px; }
.shell .home { background: transparent !important; color: var(--nav-muted) !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 6px !important; }
.shell .home:hover { color: var(--nav-ink) !important; border-color: var(--nav-muted) !important; }
.shell .brand { color: var(--nav-ink) !important; font: 600 21px/1 var(--f-display) !important; letter-spacing: .01em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.shell .brand::before { content: ""; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: radial-gradient(circle, var(--nav-ink) 0 1.6px, transparent 2px), conic-gradient(from 20deg, rgba(238, 243, 249, .55), rgba(238, 243, 249, 0) 32%),
              radial-gradient(circle, transparent 0 4.5px, rgba(238, 243, 249, .35) 5px 5.6px, transparent 6px 8.5px, rgba(238, 243, 249, .5) 9px 10px, transparent 10.5px); }
.shell .brand i { color: var(--nav-muted) !important; }
.shell .tabs { gap: 4px; margin-left: auto; }
.shell .tab { background: transparent; border: 0; border-radius: 6px; color: var(--nav-muted); padding: 8px 12px; text-decoration: none; }
.shell .tab:hover { color: var(--nav-ink); background: rgba(255, 255, 255, .06); }
.shell .tab b { font: 600 15px/1 var(--f-display); letter-spacing: .02em; }
.shell .tab small { font: 11.5px var(--f-mono); color: inherit; opacity: .8; }
.shell .tab[aria-selected="true"] { background: rgba(255, 255, 255, .1); color: var(--nav-ink); box-shadow: inset 0 -2px 0 var(--nav-ink); }

/* ---------- page head: compact, the instrument comes first ---------- */
.wrap { padding-block: 16px 40px; gap: 12px; }
header.top { align-items: end; }
header.top h1 { font: 600 clamp(24px, 2.6vw, 30px)/1.05 var(--f-display); letter-spacing: 0; }
header.top h1 i { font-style: normal; color: var(--muted); }
header.top .sub { font-size: 13.5px; line-height: 1.45; color: var(--muted); max-width: 120ch; margin-top: 4px; }
.stamp { font: 12px/1.5 var(--f-mono); color: var(--muted); }

/* ---------- filters: primary controls in one row, the rest behind "More filters" ---------- */
.strip { padding: 10px 12px; gap: 10px 16px; border-radius: var(--r); }
.strip .grp.more { display: none; }
.strip.open .grp.more { display: flex; }
.strip .morebtn { margin-left: auto; }
.strip .morebtn .n { font: 600 11px var(--f-mono); background: var(--k-beta); color: #fff; border-radius: 999px; padding: 1px 6px; margin-left: 6px; }
.strip .morebtn .n:empty { display: none; }
.lbl { font: 500 10.5px var(--f-mono); letter-spacing: .06em; color: var(--faint); }
.chip { border-radius: 4px; font-size: 13px; }
.chip.seg[aria-pressed="true"], .chip.tog[aria-pressed="true"] { background: var(--hub); color: var(--hub-ink); border-color: var(--hub); }
input[type="search"], select { border-radius: 4px; }
.strip input[type="search"] { min-width: min(280px, 100%); }

/* ---------- dial and readout side by side, both within the screen ---------- */
main { gap: 14px; }
@media (min-width: 1001px) { main { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); } }
.dial svg { max-height: calc(100vh - 110px); }
@media (min-width: 1001px) {
  .panel { position: sticky; top: 72px; max-height: calc(100vh - 86px); overflow-y: auto; overscroll-behavior: contain; }
}
.tlabel { font: 500 12px var(--f-display); }
.tlabel .c { font-size: 10px; }
.hubn { font: 600 30px var(--f-display); }
.hubl { font-family: var(--f-mono); letter-spacing: .08em; }
.dot.hl { stroke: var(--sel); stroke-width: 2.6; }
.card { border-radius: var(--r); }
.ph h2 { font: 600 24px/1.1 var(--f-display); }
.est { font-size: 12.5px; color: var(--muted); }
.sect-h { font: 500 10.5px var(--f-mono); letter-spacing: .07em; color: var(--faint); }
.due { padding: 8px 0; }
.due small { color: var(--muted); }
.ovtabs button { font: 600 14px/1.1 var(--f-display); letter-spacing: .02em; }
.ovtabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--k-beta); }

/* ---------- home ---------- */
.homev .hh { font: 600 clamp(36px, 5vw, 56px)/1 var(--f-display); letter-spacing: -.005em; }
.homev .hh i { font-style: normal; color: var(--muted); }
.hdoor { border-radius: 8px; }
.hdoor:hover { border-color: var(--k-beta); }
.hdoor b { font: 600 26px/1.05 var(--f-display); }


/* running text is justified, with hyphenation */
p, .sub, .hl, .ph p, .sheet p, article.res p, .wrap > footer p, .homev p, .hero p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.est, .sect-h, .stamp, .wip p { text-align: left; }

/* ---------- home: navy hero with the radar of ongoing trials ---------- */
.homev { max-width: none; padding-block: 0 30px; gap: 22px; }
.homev > .hdoors, .homev > .hl { max-width: 1320px; width: 100%; margin-inline: auto; }
.hero { background: var(--nav); color: var(--nav-ink); margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 28px 34px; }
.hero-in { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px 40px; align-items: center; }
@media (max-width: 900px) { .hero-in { grid-template-columns: minmax(0, 1fr); } }
.hero .eyebrow { font: 500 11.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--nav-muted); margin: 0 0 12px; text-align: left; }
.hero .hh { color: var(--nav-ink); font: 600 clamp(32px, 4.4vw, 54px)/1.02 var(--f-display); margin: 0 0 14px; text-wrap: balance; }
.hero .hl { color: var(--nav-muted); font-size: 16px; line-height: 1.55; max-width: 58ch; margin: 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 18px; }
.cta { display: inline-grid; gap: 2px; text-decoration: none; padding: 12px 18px; border-radius: 6px; background: var(--nav-ink); color: var(--nav); min-width: 200px; }
.cta + .cta { background: transparent; color: var(--nav-ink); box-shadow: inset 0 0 0 1px rgba(238, 243, 249, .4); }
.cta b { font: 600 18px/1.1 var(--f-display); }
.cta span { font: 12px var(--f-mono); opacity: .8; }
.cta:hover { box-shadow: inset 0 0 0 2px var(--k-alpha); }
.hero-key { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--nav-muted); }
.hero-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 0; }
.hero-radar { margin: 0; display: grid; gap: 8px; }
#home-radar { width: 100%; max-width: 620px; aspect-ratio: 1; justify-self: center; display: block; }
.hero-radar figcaption { font-size: 12.5px; color: var(--nav-muted); max-width: 620px; justify-self: center; text-align: center; }
.homev .hdoors { margin-top: 4px; }
/* on narrow screens justified text leaves rivers: align left there */
@media (max-width: 600px) { p, .sub, .hl, .ph p, .sheet p, article.res p, .wrap > footer p, .homev p, .hero p { text-align: left; } }

/* readout tabs never shrink when the list below is long */
.ovtabs { flex: none; }
.duet { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.duet .chip { font-size: 12px; padding: 3px 8px; }

/* ---------- pipeline view: molecules as bars from phase 1 to their most advanced stage ---------- */
.pipe { max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; font-size: 13px; }
.pipe-h, .pipe-r { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 0 0; align-items: center; }
.pipe-h { position: sticky; top: 0; z-index: 1; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px 6px; font: 500 10.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pipe-h span + span { border-left: 1px solid var(--line); padding-left: 6px; }
.pipe-t { display: flex; align-items: baseline; gap: 8px; padding: 14px 6px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pipe-t b { font: 600 16px/1.1 var(--f-display); }
.pipe-t span { font: 11px var(--f-mono); color: var(--faint); }
.pipe-r { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 5px 6px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.pipe-r:hover, .pipe-r.on { background: var(--sel-tint); }
.pipe-r.done { opacity: .5; }
.pipe-r .pn { display: grid; min-width: 0; padding-right: 8px; }
.pipe-r .pn b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-r .pn small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-r .bar { grid-column: 2 / 6; position: relative; height: 12px;
  background: linear-gradient(90deg, transparent calc(25% - 1px), var(--line) calc(25% - 1px) 25%, transparent 25% calc(50% - 1px), var(--line) calc(50% - 1px) 50%, transparent 50% calc(75% - 1px), var(--line) calc(75% - 1px) 75%, transparent 75%); }
.pipe-r .bar i { position: absolute; left: 0; top: 2px; bottom: 2px; width: calc(var(--n) * 25% - 4px); background: var(--c); border-radius: 2px 6px 6px 2px; }
.pipe-r .bar em { position: absolute; left: calc(var(--n) * 25% + 2px); top: -1px; font: 600 9.5px var(--f-mono); font-style: normal; color: var(--muted); text-transform: uppercase; }

.citebox { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; background: var(--sunken); border-radius: var(--r); padding: 10px 14px; font-size: 14px; }
.citebox p { margin: 0; flex: 1 1 400px; text-align: left; }
.citebtn { font: inherit; }

/* ---------- mechanism of a target: 1 target, 2 irradiate (or image), 3 exposure ---------- */
.mech { display: grid; gap: 14px; margin: 10px 0 14px; }
.mstep { border-left: 2px solid var(--line); padding-left: 12px; display: grid; gap: 8px; }
.mh { font: 600 15px/1 var(--f-display); letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.mh b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--surface); font: 600 11px var(--f-mono); }
.schem-svg { width: 100%; height: auto; display: block; }
.schem-svg .sl { font: 500 11px var(--f-mono); fill: var(--ink); }
.orgs { display: grid; gap: 8px; }
.orgs > div { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.orgs .k { font: 500 10.5px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); width: 100%; }
.ochip { font-size: 12.5px; padding: 3px 8px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); }

/* view switch at the top of the instrument: Radar or Pipeline */
.viewsw { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 6px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.viewsw button { display: inline-flex; align-items: center; gap: 7px; font: 600 15px/1 var(--f-display); letter-spacing: .02em; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.viewsw button svg { width: 16px; height: 16px; }
.viewsw button[aria-pressed="true"] { background: var(--hub); color: var(--hub-ink); border-color: var(--hub); }
.viewsw .vwhint { font-size: 12.5px; color: var(--muted); flex: 1 1 260px; }

/* guided tour */
.tour-hl { position: fixed; z-index: 60; border-radius: 8px; box-shadow: 0 0 0 3px var(--k-alpha), 0 0 0 9999px rgba(6, 14, 24, .55); pointer-events: none; transition: all .25s ease; }
.tour-card { position: fixed; z-index: 61; background: var(--surface); color: var(--ink); border-radius: 8px; padding: 14px 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); display: grid; gap: 6px; }
.tour-card h4 { margin: 0; font: 600 18px/1.1 var(--f-display); }
.tour-card p { margin: 0; font-size: 14px; text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.tour-n { font: 500 11px var(--f-mono); color: var(--faint); }
.tour-b { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.tour-b span { flex: 1; }
.tour-toast { position: fixed; z-index: 55; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); background: var(--nav); color: var(--nav-ink); border-radius: 8px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 8px 30px rgba(0, 0, 0, .3); font-size: 14px; max-width: calc(100vw - 32px); }
.tour-toast .linkbtn { color: var(--nav-ink); font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .tour-hl { transition: none; } }

.shell .mlink { color: var(--nav-muted); text-decoration: none; font: 600 15px/1 var(--f-display); letter-spacing: .02em; padding: 8px 10px; border-radius: 6px; }
.shell .mlink:hover { color: var(--nav-ink); background: rgba(255, 255, 255, .06); }
footer.methref { margin-top: 8px; }
footer.methref p { font-size: 14px; color: var(--muted); text-align: left; }

/* téléphone : « Méthode » sur la même ligne que les deux volets, au lieu d'une ligne orpheline */
@media (max-width: 560px) {
  .shell-in { column-gap: 8px; }
  .shell .tabs { width: auto; flex: 1 1 calc(100% - 100px); min-width: 0; margin-left: 0; }
  .shell .tab { min-width: 0; padding: 7px 4px; }
  .shell .tab small { font-size: 10.5px; text-align: center; }
  .shell .mlink { flex: none; align-self: stretch; display: inline-flex; align-items: center; padding: 0 8px; }
}

.feedrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.feedrow code { font: 12.5px var(--f-mono); background: var(--sunken); padding: 5px 8px; border-radius: 4px; overflow-wrap: anywhere; }
.tlink { font-size: 12px; margin-left: 6px; }