/* ============================================================================
   OncoBook — feuille de style unique (35 pages)
   Direction : « atlas éditorial ». Papier chaud, titres en serif système,
   accent vert-encre, index typographique numéroté, aucun emoji décoratif
   (les pictogrammes présents dans le HTML sont neutralisés en CSS).
   ========================================================================== */

/* ---------------------------------------------------------------- Tokens -- */
:root {
  /* Surfaces : papier légèrement chaud plutôt que blanc pur */
  --paper:      #FBFAF7;
  --surface:    #FFFFFF;
  --surface-2:  #F5F3EE;
  --surface-3:  #EBE7DF;

  /* Encre */
  --text:       #16211F;
  --text-soft:  #45514E;
  --text-mut:   #7C8683;

  /* Accent unique : vert-encre profond */
  --accent:        #0E5049;
  --accent-strong: #093A34;
  --accent-weak:   #4C8A83;
  --accent-soft:   rgba(14, 80, 73, .075);
  --accent-line:   rgba(14, 80, 73, .18);

  --border:      #E5E0D7;
  --border-soft: #EFEBE3;

  --ok:    #2E7D5B;
  --warn:  #9A6408;
  --err:   #A33A32;
  --link:  var(--accent);

  /* Teintes par appareil — désaturées, cohérentes entre elles */
  --sys-senologie:     #A8446A;
  --sys-thoracique:    #1E7A8C;
  --sys-digestif:      #A9631F;
  --sys-urologique:    #4A6FA5;
  --sys-gynecologique: #93497A;
  --sys-tete-cou:      #6B7A3F;
  --sys-cutane:        #B08320;
  --sys-snc:           #74569E;
  --sys-endocrinien:   #2E7D6B;
  --sys-sarcomes:      #9E4A46;
  --sys-pediatrie:     #35818A;
  --sys-current:       var(--accent);

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(22, 33, 31, .05);
  --shadow:    0 4px 16px -6px rgba(22, 33, 31, .14);
  --shadow-lg: 0 18px 44px -20px rgba(22, 33, 31, .26);

  --maxw: 1140px;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
                "Book Antiqua", Georgia, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --font-display: "Avenir Next", Avenir, "Helvetica Neue", Helvetica,
                  var(--font-sans);
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Icônes en masque SVG : héritent de la couleur courante via background */
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='M15.8 15.8 20.5 20.5'/%3E%3C/svg%3E");
  --ico-top:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  --paper:      #101413;
  --surface:    #171D1C;
  --surface-2:  #1E2524;
  --surface-3:  #28302E;

  --text:       #E9EDEB;
  --text-soft:  #B4BFBC;
  --text-mut:   #859390;

  --accent:        #5CC3AE;
  --accent-strong: #8AD9C7;
  --accent-weak:   #3E8477;
  --accent-soft:   rgba(92, 195, 174, .12);
  --accent-line:   rgba(92, 195, 174, .26);

  --border:      #2B3331;
  --border-soft: #232A29;

  --ok:   #5FBF8C;
  --warn: #D9A54A;
  --err:  #E0796F;

  --sys-senologie:     #D585A5;
  --sys-thoracique:    #63BACB;
  --sys-digestif:      #DFA05B;
  --sys-urologique:    #8FAAD8;
  --sys-gynecologique: #C98FB5;
  --sys-tete-cou:      #AAB878;
  --sys-cutane:        #DFBE6A;
  --sys-snc:           #AE97D6;
  --sys-endocrinien:   #6FBFA8;
  --sys-sarcomes:      #D68B87;
  --sys-pediatrie:     #6FBAC3;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow:    0 4px 18px -6px rgba(0, 0, 0, .5);
  --shadow-lg: 0 20px 50px -22px rgba(0, 0, 0, .7);
}

/* ------------------------------------------------------------------ Base -- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Trame très discrète, sans dégradé « mesh » */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(22, 33, 31, .035) 1px, transparent 0);
  background-size: 22px 22px;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .025) 1px, transparent 0);
}

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; }
h1 { letter-spacing: -.015em; }

a { color: var(--link); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 650; color: var(--text); }
em { font-style: italic; }

::selection { background: var(--accent-soft); color: var(--accent-strong); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Pictogrammes emoji du balisage : neutralisés au profit d'une mise en forme
   typographique. Conservés dans le HTML pour ne pas toucher 35 fichiers. */
.sec-ico, .ci, .gi, .si, .nr-ico { display: none !important; }

/* ---------------------------------------------------------------- Topbar -- */
.read-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); z-index: 200;
  transition: width .1s linear;
}

.topbar {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  border-bottom: 1px solid var(--border-soft);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: .72rem 1.5rem .8rem;
  display: flex; align-items: center; gap: 1rem;
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  color: var(--text); text-decoration: none;
  font-size: 1.06rem; font-weight: 500; letter-spacing: -.01em;
  line-height: 1.25; overflow: visible;
}
.brand > span:last-child { font-family: var(--font-serif); font-weight: 600; }
.brand .logo {
  width: 31px; height: 31px; border-radius: 9px; flex: none;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0;
  transition: transform .35s var(--ease-out);
}
.brand:hover .logo { transform: rotate(-5deg); }
/* line-height et padding-bottom explicites : place garantie pour les jambages */
.brand small {
  display: block; font-family: var(--font-sans);
  color: var(--text-mut); font-weight: 400; font-size: .705rem;
  letter-spacing: .02em; line-height: 1.5; padding-bottom: 2px;
}
.topbar .spacer { flex: 1; }

.icon-btn {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-soft); width: 38px; height: 38px; border-radius: 10px;
  cursor: pointer; display: grid; place-items: center;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.icon-btn:hover { border-color: var(--accent-weak); color: var(--accent); background: var(--surface-2); }
.icon-btn:active { transform: scale(.95); }

/* Bascule de thème : icônes monochromes en currentColor */
.theme-toggle svg {
  width: 18px; height: 18px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s var(--ease-out);
}
.theme-toggle .ico-sun { display: none; }
[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
.theme-toggle:hover svg { transform: rotate(-20deg); }
[data-theme="dark"] .theme-toggle:hover svg { transform: rotate(20deg); }

.progress-chip {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--text-mut); border: 1px solid var(--border);
  padding: .3rem .58rem; border-radius: 999px; background: var(--surface);
  white-space: nowrap;
}

/* ------------------------------------------------------------ Breadcrumb -- */
.breadcrumb {
  max-width: var(--maxw); margin: 1.4rem auto 0; padding: 0 1.5rem;
  font-size: .78rem; color: var(--text-mut);
  letter-spacing: .02em;
}
.breadcrumb a { color: var(--text-mut); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb strong { color: var(--text-soft); font-weight: 500; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 1.75rem 1.5rem 5rem; }

/* ==========================================================================
   ACCUEIL
   ========================================================================== */
.hero-home {
  padding: 3.4rem 0 2.6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.2rem;
}
.hero-home h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.15rem);
  line-height: 1.02; margin: 1.15rem 0 0;
  max-width: 19ch; letter-spacing: -.028em; font-weight: 600;
}
/* Emphase éditoriale sur le dernier mot du titre */
.hero-home h1 .accent { color: var(--accent); font-style: italic; }
.hero-home .lede {
  font-size: 1.035rem; color: var(--text-soft);
  max-width: 60ch; margin: 1.15rem 0 0;
}
.hero-home .lede strong { color: var(--accent-strong); }

/* Compteurs : filet éditorial plutôt que boîtes */
.stat-row {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 2.1rem 0 0; border-top: 1px solid var(--border);
}
.stat {
  padding: .95rem 1.6rem .9rem 0; margin-right: 1.6rem;
  border-right: 1px solid var(--border-soft);
}
.stat:last-child { border-right: 0; margin-right: 0; }
.stat b {
  display: block; font-family: var(--font-serif);
  font-size: 1.85rem; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.stat span {
  display: block; margin-top: .3rem;
  font-size: .705rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mut);
}

/* ---- Recherche ---- */
.search-bar {
  display: flex; align-items: center; gap: .7rem;
  margin: 2.1rem 0 0; max-width: 640px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .1rem .95rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-bar:focus-within {
  border-color: var(--accent-weak);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Loupe : masque SVG monochrome (l'emoji du balisage est masqué) */
.search-bar::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-left: .15rem;
  background: var(--text-mut);
  -webkit-mask: var(--ico-search) center / contain no-repeat;
          mask: var(--ico-search) center / contain no-repeat;
  transition: background .2s var(--ease);
}
.search-bar:focus-within::before { background: var(--accent); }
.search-bar input {
  flex: 1; border: 0; background: none; outline: none;
  font: inherit; font-size: .96rem; color: var(--text);
  padding: .82rem 0;
}
.search-bar input::placeholder { color: var(--text-mut); }
.kbd-hint {
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-mut);
  border: 1px solid var(--border); border-radius: 6px;
  padding: .1rem .38rem; background: var(--surface-2);
}

/* ---- Catégories ---- */
.filters {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin: 1.5rem 0 0;
}
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .845rem; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: .4rem .82rem .4rem .72rem;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease),
              background .18s var(--ease);
}
/* Pastille de couleur par appareil, à la place de l'emoji */
.chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--chip-color, var(--text-mut));
}
.chip .cn {
  font-family: var(--font-mono); font-size: .705rem;
  color: var(--text-mut); font-variant-numeric: tabular-nums;
}
.chip:hover { border-color: var(--accent-weak); color: var(--text); }
.chip.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.chip.active .cn { color: rgba(255, 255, 255, .72); }
.chip.active::before { background: rgba(255, 255, 255, .9); }
[data-theme="dark"] .chip.active { color: #0B1211; }
[data-theme="dark"] .chip.active .cn { color: rgba(11, 18, 17, .66); }
[data-theme="dark"] .chip.active::before { background: rgba(11, 18, 17, .8); }

.chip[data-filter="all"]           { --chip-color: var(--accent); }
.chip[data-filter="adulte"]        { --chip-color: var(--text-soft); }
.chip[data-filter="pediatrie"]     { --chip-color: var(--sys-pediatrie); }
.chip[data-filter="senologie"]     { --chip-color: var(--sys-senologie); }
.chip[data-filter="thoracique"]    { --chip-color: var(--sys-thoracique); }
.chip[data-filter="digestif"]      { --chip-color: var(--sys-digestif); }
.chip[data-filter="urologique"]    { --chip-color: var(--sys-urologique); }
.chip[data-filter="gynecologique"] { --chip-color: var(--sys-gynecologique); }
.chip[data-filter="tete-cou"]      { --chip-color: var(--sys-tete-cou); }
.chip[data-filter="cutane"]        { --chip-color: var(--sys-cutane); }
.chip[data-filter="snc"]           { --chip-color: var(--sys-snc); }
.chip[data-filter="endocrinien"]   { --chip-color: var(--sys-endocrinien); }
.chip[data-filter="sarcomes"]      { --chip-color: var(--sys-sarcomes); }

/* ---- Zone de résultats ---- */
.results { animation: fade .35s var(--ease-out); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.results-head {
  position: sticky; top: 60px; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 0; margin-bottom: .6rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.rh-count {
  font-family: var(--font-mono); font-size: .76rem;
  letter-spacing: .04em; color: var(--text-mut);
}
.rh-count b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---- Groupes d'appareil ---- */
.sys-group { margin: 2.3rem 0 0; }
.sys-group > h2 {
  display: flex; align-items: baseline; gap: .7rem;
  font-family: var(--font-sans); font-size: .735rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-mut);
  margin: 0 0 .55rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.sys-group > h2 .count {
  font-family: var(--font-mono); letter-spacing: 0;
  color: var(--text-mut); font-weight: 400;
}
.sys-group > h2::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--grp-color, var(--accent)); align-self: center;
}

/* ---- Index éditorial : chaque fiche est une ligne numérotée ---- */
.card-grid {
  counter-reset: fiche;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 0 2.4rem;
}
.cancer-card {
  counter-increment: fiche;
  position: relative;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0 .1rem;
  padding: .95rem 1.6rem .95rem .2rem;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none; color: inherit;
  transition: background .18s var(--ease);
  animation: rowIn .4s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
@keyframes rowIn { from { opacity: 0; transform: translateY(5px); } }
.cancer-card::before {
  content: counter(fiche, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-mono); font-size: .715rem;
  color: var(--text-mut); padding-top: .3rem;
  font-variant-numeric: tabular-nums;
  transition: color .18s var(--ease);
}
/* Liseré coloré révélé au survol */
.cancer-card::after {
  content: ""; position: absolute; left: 0; top: .55rem; bottom: .55rem;
  width: 2px; border-radius: 2px;
  background: var(--card-color, var(--accent));
  opacity: 0; transform: scaleY(.4); transform-origin: center;
  transition: opacity .2s var(--ease), transform .28s var(--ease-out);
}
.cancer-card h3 {
  font-size: 1.015rem; margin: 0; line-height: 1.3;
  color: var(--text); font-weight: 600; letter-spacing: -.008em;
  transition: color .18s var(--ease);
}
.cancer-card p {
  grid-column: 2; margin: .2rem 0 0;
  font-size: .82rem; line-height: 1.5; color: var(--text-mut);
}
.cancer-card:hover { background: var(--surface-2); }
.cancer-card:hover::after { opacity: 1; transform: scaleY(1); }
.cancer-card:hover h3 { color: var(--card-color, var(--accent)); }
.cancer-card:hover::before { color: var(--card-color, var(--accent)); }
/* Pied de carte : redondant avec le groupe, réduit à un état de lecture */
.cancer-card .cc-foot { display: none; }

.cancer-card[data-sys="senologie"],     .sys-group:has([data-sys="senologie"]) > h2     { --card-color: var(--sys-senologie);     --grp-color: var(--sys-senologie); }
.cancer-card[data-sys="thoracique"],    .sys-group:has([data-sys="thoracique"]) > h2    { --card-color: var(--sys-thoracique);    --grp-color: var(--sys-thoracique); }
.cancer-card[data-sys="digestif"],      .sys-group:has([data-sys="digestif"]) > h2      { --card-color: var(--sys-digestif);      --grp-color: var(--sys-digestif); }
.cancer-card[data-sys="urologique"],    .sys-group:has([data-sys="urologique"]) > h2    { --card-color: var(--sys-urologique);    --grp-color: var(--sys-urologique); }
.cancer-card[data-sys="gynecologique"], .sys-group:has([data-sys="gynecologique"]) > h2 { --card-color: var(--sys-gynecologique); --grp-color: var(--sys-gynecologique); }
.cancer-card[data-sys="tete-cou"],      .sys-group:has([data-sys="tete-cou"]) > h2      { --card-color: var(--sys-tete-cou);      --grp-color: var(--sys-tete-cou); }
.cancer-card[data-sys="cutane"],        .sys-group:has([data-sys="cutane"]) > h2        { --card-color: var(--sys-cutane);        --grp-color: var(--sys-cutane); }
.cancer-card[data-sys="snc"],           .sys-group:has([data-sys="snc"]) > h2           { --card-color: var(--sys-snc);           --grp-color: var(--sys-snc); }
.cancer-card[data-sys="endocrinien"],   .sys-group:has([data-sys="endocrinien"]) > h2   { --card-color: var(--sys-endocrinien);   --grp-color: var(--sys-endocrinien); }
.cancer-card[data-sys="sarcomes"],      .sys-group:has([data-sys="sarcomes"]) > h2      { --card-color: var(--sys-sarcomes);      --grp-color: var(--sys-sarcomes); }
.cancer-card[data-sys="pediatrie"],     .sys-group:has([data-sys="pediatrie"]) > h2     { --card-color: var(--sys-pediatrie);     --grp-color: var(--sys-pediatrie); }

/* Grille de résultats de recherche : même traitement, sans groupes */
.search-results { counter-reset: fiche; margin-top: .4rem; }

.ped-banner {
  margin: 2.6rem 0 .4rem; padding: .95rem 1.15rem;
  border: 1px solid var(--accent-line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--accent-soft);
  font-size: .875rem; color: var(--text-soft);
}
.ped-banner strong { color: var(--accent-strong); }

.no-result {
  display: none; text-align: center; padding: 3.4rem 1rem;
  color: var(--text-mut);
}
.no-result.show { display: block; }
.no-result p { margin: .3rem 0; }
.nr-sugg { font-size: .87rem; }
.nr-sugg b { color: var(--accent); font-weight: 600; }

.hit-terms {
  grid-column: 2; display: flex; flex-wrap: wrap; gap: .3rem;
  margin-top: .4rem;
}
.hit-terms span {
  font-family: var(--font-mono); font-size: .66rem;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: .06rem .34rem; border-radius: 4px;
}

/* ==========================================================================
   PAGE DE FICHE
   ========================================================================== */
.page-hero {
  padding: 2.2rem 0 1.9rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.page-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.04; margin: 0; letter-spacing: -.025em;
  max-width: 26ch;
}
.page-hero .subtitle {
  margin: 1rem 0 0; font-size: .985rem; color: var(--text-soft);
  max-width: 68ch;
}
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.35rem 0 0; }
.tag {
  font-size: .735rem; letter-spacing: .02em;
  color: var(--text-soft); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .24rem .68rem;
}
.tag.sys {
  color: #fff; background: var(--accent); border-color: var(--accent);
  font-weight: 500;
}
[data-theme="dark"] .tag.sys { color: #0B1211; }

/* ---- Mise en page à deux colonnes ---- */
.page-layout { display: block; }

/* ---- Sommaire ---- */
.toc { margin-bottom: 2rem; }
.toc h4 {
  font-family: var(--font-sans); font-size: .695rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-mut); margin: 0 0 .7rem;
}
.toc ol {
  list-style: none; counter-reset: toc; margin: 0; padding: 0;
  border-left: 1px solid var(--border);
}
.toc li { counter-increment: toc; margin: 0; }
.toc a {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .34rem .7rem; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: .825rem; line-height: 1.35;
  color: var(--text-mut); text-decoration: none;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .66rem;
  color: var(--text-mut); opacity: .7; flex: none;
  font-variant-numeric: tabular-nums;
}
.toc a:hover { color: var(--accent); }
.toc a.active {
  color: var(--accent-strong); border-left-color: var(--accent);
  font-weight: 500;
}
.toc a.active::before { color: var(--accent); opacity: 1; }

/* ---- Sections ---- */
.page-content { counter-reset: sec; }

.section {
  counter-increment: sec;
  margin: 0 0 .4rem;
  border-top: 1px solid var(--border);
  scroll-margin-top: 90px;
}
.section:first-child { border-top: 0; }
.section > h2 {
  display: flex; align-items: baseline; gap: .8rem;
  font-size: 1.42rem; letter-spacing: -.015em; font-weight: 600;
  margin: 0; padding: 1.6rem 0 .9rem;
  cursor: pointer; user-select: none;
  transition: color .18s var(--ease);
}
.section > h2::before {
  content: counter(sec, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 400;
  color: var(--accent); flex: none;
  padding-top: .42rem; letter-spacing: .04em;
}
.section > h2:hover { color: var(--accent); }
.section > h2 .chev {
  margin-left: auto; flex: none; align-self: center;
  font-size: 0; width: 9px; height: 9px; position: relative;
  transition: transform .28s var(--ease-out);
}
.section > h2 .chev::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 7px; height: 7px;
  border-right: 1.6px solid var(--text-mut);
  border-bottom: 1.6px solid var(--text-mut);
  transform: rotate(45deg) translate(-1px, -1px);
}
.section.collapsed > h2 .chev { transform: rotate(-90deg); }
/* La mesure de lecture confortable (~74 caractères) s'applique au texte courant,
   mais PAS aux tableaux : les tableaux de doses ont jusqu'à 5 colonnes et doivent
   pouvoir occuper toute la largeur de la colonne de contenu. */
.section-body { padding-bottom: 1.7rem; }
.section-body > p,
.section-body > ul,
.section-body > ol,
.section-body > h3,
.section-body > h4,
.section-body > .callout,
.section-body > .dose-warn,
.section-body > .dose-note,
.section-body > .case-intro { max-width: 74ch; }
.section.collapsed .section-body { display: none; }

.section h3 {
  font-size: 1.055rem; margin: 1.7rem 0 .55rem;
  color: var(--text); letter-spacing: -.008em;
}
.section h3:first-child { margin-top: 0; }
.section h4 {
  font-family: var(--font-sans); font-size: .875rem; font-weight: 650;
  margin: 1.2rem 0 .4rem; color: var(--text-soft);
  letter-spacing: .01em;
}
.section p { margin: .7rem 0; }
.section ul, .section ol { margin: .7rem 0; padding-left: 1.3rem; }
.section li { margin: .38rem 0; }
.section li::marker { color: var(--accent-weak); }

.moleculaire {
  font-family: var(--font-mono); font-size: .89em;
  color: var(--accent-strong); background: var(--accent-soft);
  padding: .04em .3em; border-radius: 4px;
  white-space: nowrap;
}
.trial {
  font-weight: 600; color: var(--accent-strong);
  font-variant-caps: all-small-caps; letter-spacing: .04em;
  font-size: 1.04em;
}
.abbr { border-bottom: 1px dotted var(--text-mut); cursor: help; }

/* ---- Encadrés ---- */
.callout {
  display: flex; gap: .8rem; align-items: flex-start;
  margin: 1.2rem 0; padding: .95rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  font-size: .915rem;
}
.callout p { margin: 0; }
.callout .ci { display: none !important; }
.callout.key    { border-left-color: var(--accent);  background: var(--accent-soft); }
.callout.pearl  { border-left-color: var(--warn);    background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.callout::before {
  content: "Point clé"; flex: none;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); padding-top: .18rem;
}
.callout.pearl::before { content: "À retenir"; color: var(--warn); }

/* ---- Tableaux ---- */
.table-scroll {
  position: relative;
  overflow-x: auto; margin: 1.1rem 0 1.3rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
  /* Ombres latérales indiquant qu'il reste du contenu à faire défiler */
  background-image:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to left,  var(--surface) 30%, transparent),
    linear-gradient(to right, rgba(22,33,31,.11), transparent 12px),
    linear-gradient(to left,  rgba(22,33,31,.11), transparent 12px);
  background-repeat: no-repeat;
  background-size: 42px 100%, 42px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-attachment: local, local, scroll, scroll;
}
table.data {
  border-collapse: collapse; width: 100%;
  font-size: .855rem; min-width: 480px;
  background: transparent;
}
table.data th, table.data td {
  text-align: left; padding: .62rem .85rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
table.data thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); color: var(--text-mut);
  font-family: var(--font-sans); font-size: .685rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--accent-soft); }
table.data td:first-child { font-weight: 550; color: var(--text); }

/* ---- Tableaux de posologie ---- */
.dose-table td, .dose-table th { font-variant-numeric: tabular-nums; }
.dose-table td:first-child { white-space: nowrap; color: var(--text-soft); font-weight: 500; }
.dose-table .dose {
  font-family: var(--font-mono); font-size: .95em; font-weight: 600;
  color: var(--accent-strong); white-space: nowrap;
}
.dose-table tbody tr.proto-head td {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent-strong);
  font-family: var(--font-sans); font-weight: 650; font-size: .715rem;
  letter-spacing: .09em; text-transform: uppercase;
  border-bottom: 1px solid var(--accent-line);
}
.dose-table tbody tr.proto-head:hover td { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.dose-note {
  font-size: .815rem; line-height: 1.6; color: var(--text-mut);
  margin: -.35rem 0 1.5rem; padding-left: .9rem;
  border-left: 2px solid var(--border);
}
.dose-note strong { color: var(--text-soft); }
.dose-warn {
  display: flex; gap: .8rem; align-items: flex-start;
  margin: 0 0 1.5rem; padding: .9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--warn) 32%, var(--border));
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 6%, var(--surface));
  font-size: .865rem; color: var(--text-soft);
}
.dose-warn p { margin: 0; }
.dose-warn .ci { display: none !important; }
.dose-warn::before {
  content: "Avertissement"; flex: none;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--warn); padding-top: .18rem;
}

/* ---- Points clés ---- */
ul.keypoints { list-style: none; padding: 0; margin: .5rem 0; }
ul.keypoints li {
  position: relative; padding-left: 1.5rem; margin: .6rem 0;
  font-size: .93rem;
}
ul.keypoints li::before {
  content: ""; position: absolute; left: .25rem; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* ==========================================================================
   QCM
   ========================================================================== */
.qcm-item {
  padding: 1.3rem 0; border-top: 1px solid var(--border-soft);
}
.qcm-item:first-of-type { border-top: 0; padding-top: .3rem; }
.qcm-q {
  display: flex; gap: .7rem; align-items: baseline;
  font-weight: 550; margin: 0 0 .85rem; font-size: .965rem;
}
.qnum {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 400;
  color: var(--accent); flex: none; padding-top: .18rem;
}
.qcm-opts { display: grid; gap: .4rem; }
.qcm-opt {
  display: flex; gap: .7rem; align-items: flex-start;
  text-align: left; font: inherit; font-size: .895rem;
  color: var(--text-soft); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .62rem .85rem; cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease),
              color .16s var(--ease);
}
.qcm-opt .letter {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  color: var(--text-mut); flex: none;
  width: 1.15rem; padding-top: .1rem;
  transition: color .16s var(--ease);
}
.qcm-opt:hover:not(:disabled) {
  border-color: var(--accent-weak); background: var(--accent-soft);
  color: var(--text);
}
.qcm-opt:disabled { cursor: default; }
.qcm-opt.correct {
  border-color: var(--ok); color: var(--text);
  background: color-mix(in srgb, var(--ok) 9%, var(--surface));
}
.qcm-opt.correct .letter { color: var(--ok); }
.qcm-opt.wrong {
  border-color: var(--err); color: var(--text);
  background: color-mix(in srgb, var(--err) 8%, var(--surface));
}
.qcm-opt.wrong .letter { color: var(--err); }

.qcm-feedback {
  display: none; margin-top: .7rem; padding: .8rem 1rem;
  font-size: .875rem; line-height: 1.58; color: var(--text-soft);
  background: var(--surface-2); border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent-weak);
}
.qcm-feedback.show { display: block; animation: fade .3s var(--ease-out); }
.verdict { font-weight: 650; margin-right: .3rem; }
.verdict.ok  { color: var(--ok); }
.verdict.ko  { color: var(--err); }

/* ---- Panneau de score ---- */
.score-panel {
  display: flex; align-items: center; flex-wrap: wrap; gap: .9rem;
  margin: 1.6rem 0 .3rem; padding: 1rem 1.15rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.sp-label {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-mut);
}
.sp-score {
  font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.sp-bar {
  flex: 1; min-width: 130px; height: 5px; border-radius: 999px;
  background: var(--surface-3); overflow: hidden;
}
.sp-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--accent); transition: width .5s var(--ease-out);
}
.btn-reset {
  font: inherit; font-size: .8rem; color: var(--text-soft);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .3rem .78rem; cursor: pointer;
  transition: all .18s var(--ease);
}
.btn-reset:hover { border-color: var(--accent-weak); color: var(--accent); }

/* ==========================================================================
   CAS CLINIQUES
   ========================================================================== */
.case-intro { font-size: .9rem; color: var(--text-mut); margin-bottom: 1.4rem; }

.case {
  margin: 1.5rem 0; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
  overflow: hidden;
}
.case-head {
  padding: 1.15rem 1.3rem 1.1rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.case-num {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.case-head h3 {
  margin: .3rem 0 .55rem; font-size: 1.115rem; letter-spacing: -.012em;
}
.case-vignette {
  margin: 0; font-size: .885rem; line-height: 1.6; color: var(--text-soft);
}
.case-progress {
  display: flex; align-items: center; gap: .7rem; margin-top: 1rem;
}
.case-bar {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--surface-3); overflow: hidden;
}
.case-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--accent); transition: width .45s var(--ease-out);
}
.case-count {
  font-family: var(--font-mono); font-size: .705rem; color: var(--text-mut);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.case-steps { list-style: none; margin: 0; padding: 0; }
.case-step {
  display: none; padding: 1.2rem 1.3rem;
  border-top: 1px solid var(--border-soft);
}
.case-step:first-child { border-top: 0; }
.case-step.visible { display: block; animation: fade .35s var(--ease-out); }
.step-tag {
  display: inline-block; margin-bottom: .7rem;
  font-family: var(--font-mono); font-size: .665rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: .18rem .5rem; border-radius: 4px;
}
.case-new {
  margin: 0 0 .9rem; padding: .8rem 1rem;
  font-size: .875rem; line-height: 1.58; color: var(--text-soft);
  background: var(--surface-2); border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent-weak);
}
.case-new strong { color: var(--accent-strong); }
.case-next {
  display: none; margin-top: .9rem;
  font: inherit; font-size: .84rem; font-weight: 500;
  color: #fff; background: var(--accent);
  border: 0; border-radius: 999px; padding: .46rem 1.1rem;
  cursor: pointer; transition: opacity .18s var(--ease), transform .18s var(--ease);
}
[data-theme="dark"] .case-next { color: #0B1211; }
.case-next.show { display: inline-block; animation: fade .3s var(--ease-out); }
.case-next:hover { opacity: .88; }
.case-next:active { transform: scale(.97); }

.case-summary {
  display: none; padding: 1.15rem 1.3rem;
  border-top: 1px solid var(--accent-line);
  background: var(--accent-soft);
}
.case-summary.show { display: block; animation: fade .35s var(--ease-out); }
.case-summary h4 {
  font-family: var(--font-serif); font-size: 1rem; font-weight: 600;
  margin: 0 0 .45rem; color: var(--accent-strong);
  letter-spacing: 0; text-transform: none;
}
.case-summary p { margin: 0; font-size: .885rem; line-height: 1.62; color: var(--text-soft); }

/* ==========================================================================
   FLASHCARDS
   ========================================================================== */
.flash-deck {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  margin-top: 1rem;
}
.flashcard { perspective: 1200px; height: 178px; cursor: pointer; }
.flashcard-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .6s var(--ease-out);
  transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flash-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.05rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  font-size: .875rem; line-height: 1.55;
}
.flash-front { align-items: flex-start; }
.fc-q { font-weight: 550; color: var(--text); font-size: .915rem; }
.fc-hint {
  margin-top: auto; font-family: var(--font-mono); font-size: .655rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-mut);
}
.flash-back {
  transform: rotateY(180deg); color: var(--text-soft);
  background: var(--surface-2); overflow: auto;
}
.flash-rate { display: flex; gap: .4rem; margin-top: .8rem; }
.flash-rate button {
  font: inherit; font-size: .74rem; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-soft); border-radius: 999px; padding: .22rem .62rem;
  transition: all .16s var(--ease);
}
.flash-rate button:hover { border-color: var(--accent-weak); color: var(--accent); }
.flash-meta {
  margin: .5rem 0 0; font-family: var(--font-mono);
  font-size: .655rem; color: var(--text-mut);
}

/* ==========================================================================
   RÉFÉRENCES · NAVIGATION · PIED
   ========================================================================== */
ol.refs { padding-left: 1.4rem; font-size: .855rem; }
ol.refs li { margin: .55rem 0; color: var(--text-soft); line-height: 1.55; }
ol.refs li::marker { font-family: var(--font-mono); font-size: .8em; color: var(--text-mut); }
ol.refs em { color: var(--text-mut); }
a.pmid {
  font-family: var(--font-mono); font-size: .76rem;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  white-space: nowrap;
}
a.pmid:hover { border-bottom-color: var(--accent); }
.refs .verify {
  font-size: .74rem; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  padding: .04em .3em; border-radius: 4px;
}

.page-nav {
  display: grid; gap: .8rem; grid-template-columns: 1fr 1fr;
  margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}
.page-nav a {
  display: flex; flex-direction: column; gap: .18rem;
  padding: .85rem 1.05rem; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.page-nav a:hover { border-color: var(--accent-weak); background: var(--surface-2); }
.page-nav a small {
  font-family: var(--font-mono); font-size: .655rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-mut);
}
.page-nav a b { font-family: var(--font-serif); font-weight: 600; font-size: .955rem; }
.page-nav a.next { text-align: right; }

/* ---- Retour en haut (injecté par app.js sur les fiches) ---- */
.to-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease-out),
              visibility .22s, border-color .2s var(--ease);
}
.to-top::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 17px; height: 17px; background: var(--text-soft);
  -webkit-mask: var(--ico-top) center / contain no-repeat;
          mask: var(--ico-top) center / contain no-repeat;
  transition: background .2s var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: var(--accent-weak); }
.to-top:hover::before { background: var(--accent); }
.to-top:active { transform: scale(.94); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 900px) {
  /* minmax(0, 1fr) : sans cela le minimum de la colonne vaut min-content, et les
     tableaux de doses (cellules white-space: nowrap) élargissent la grille
     au-delà de --maxw, d'où une largeur variable d'une fiche à l'autre. */
  .page-layout {
    display: grid; grid-template-columns: 218px minmax(0, 1fr);
    gap: 3rem; align-items: start;
  }
  .toc {
    position: sticky; top: 86px; margin-bottom: 0;
    max-height: calc(100vh - 120px); overflow-y: auto;
    padding-right: .4rem;
  }
  .toc::-webkit-scrollbar { width: 4px; }
  .toc::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
}

@media (max-width: 899px) {
  body { font-size: 16px; }
  .toc {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: .9rem 1rem; background: var(--surface);
  }
  .hero-home { padding: 2.4rem 0 2rem; }
  .hero-home h1 { font-size: clamp(2.05rem, 8.6vw, 2.9rem); max-width: none; }
  .stat { padding: .8rem 1.1rem .75rem 0; margin-right: 1.1rem; }
  .stat b { font-size: 1.55rem; }
  .search-bar { max-width: none; }
  .card-grid { grid-template-columns: 1fr; gap: 0; }
  .results-head { top: 56px; }
  .page-nav { grid-template-columns: 1fr; }
  .section > h2 { font-size: 1.26rem; }
  .kbd-hint { display: none; }
}

@media (max-width: 560px) {
  .wrap { padding: 1.25rem 1.1rem 4rem; }
  .topbar-inner { padding: .6rem 1.1rem .7rem; }
  .breadcrumb { padding: 0 1.1rem; }
  .brand small { display: none; }
  .stat-row { gap: 0; }
  .stat { padding: .7rem .9rem .65rem 0; margin-right: .9rem; }
  .stat b { font-size: 1.35rem; }
  .case-head, .case-step, .case-summary { padding-left: 1rem; padding-right: 1rem; }
}

/* ==========================================================================
   PRÉFÉRENCES & IMPRESSION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .topbar, .toc, .read-progress, .filters, .search-bar, .page-nav,
  .case-next, .btn-reset, .results-head, .stat-row,
  .flash-deck, .theme-toggle { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .section { break-inside: avoid; border-top: 1px solid #ccc; }
  .section-body { display: block !important; max-width: none; }
  .case-step, .case-summary { display: block !important; }
  .qcm-feedback { display: block !important; }
  a { color: #000; text-decoration: none; }
  a.pmid::after { content: " (" attr(href) ")"; font-size: 8pt; }
}

/* ==========================================================================
   ONCOBOOK 2026 — « PRECISION ATLAS »
   A luminous clinical interface layered over the original content system.
   ========================================================================== */

:root {
  --paper: #f2f5f2;
  --surface: #ffffff;
  --surface-2: #f6f8f6;
  --surface-3: #e7ece8;
  --text: #0b2023;
  --text-soft: #3f5557;
  --text-mut: #748487;
  --accent: #0b6f6f;
  --accent-strong: #074f53;
  --accent-weak: #38a7a1;
  --accent-soft: rgba(11, 111, 111, .085);
  --accent-line: rgba(11, 111, 111, .2);
  --border: #dce5e0;
  --border-soft: #e9efeb;
  --ink: #071b21;
  --ink-2: #0b3439;
  --mint: #b9f5d8;
  --signal: #c8f35b;
  --coral: #ff7d6e;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 30px;
  --shadow-sm: 0 1px 2px rgba(4, 31, 34, .05), 0 8px 24px rgba(4, 31, 34, .035);
  --shadow: 0 18px 50px -30px rgba(4, 31, 34, .3);
  --shadow-lg: 0 44px 100px -48px rgba(4, 31, 34, .55);
  --maxw: 1240px;
}

[data-theme="dark"] {
  --paper: #06181d;
  --surface: #0c2429;
  --surface-2: #102d32;
  --surface-3: #193a3e;
  --text: #f0f6f2;
  --text-soft: #b6cac7;
  --text-mut: #78928f;
  --accent: #74dfc1;
  --accent-strong: #b9f5d8;
  --accent-weak: #4bbca7;
  --accent-soft: rgba(116, 223, 193, .105);
  --accent-line: rgba(116, 223, 193, .22);
  --border: #254349;
  --border-soft: #1c363b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .15), 0 8px 24px rgba(0, 0, 0, .1);
  --shadow: 0 20px 50px -30px rgba(0, 0, 0, .6);
}

body {
  background:
    radial-gradient(circle at 8% -4%, rgba(65, 183, 166, .08), transparent 30rem),
    radial-gradient(circle at 96% 24%, rgba(200, 243, 91, .05), transparent 24rem),
    var(--paper);
  font-size: 16px;
  letter-spacing: -.006em;
}

.topbar {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-bottom-color: color-mix(in srgb, var(--border) 76%, transparent);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.topbar-inner { max-width: var(--maxw); padding: .72rem 1.5rem; gap: .7rem; }
.brand { gap: .72rem; font-size: 1.02rem; letter-spacing: -.025em; }
.brand .logo,
.foot-brand .logo {
  width: 34px; height: 34px; border: 0; border-radius: 10px;
  color: var(--ink); background: linear-gradient(145deg, var(--mint), var(--signal));
  font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 8px 20px rgba(7, 79, 83, .14);
}
.brand small { font-family: var(--font-sans); font-size: .61rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }

.atlas-link {
  display: inline-flex; align-items: center; gap: .38rem; min-height: 36px;
  padding: 0 .78rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-soft); text-decoration: none;
  font-size: .76rem; font-weight: 680; letter-spacing: .01em;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.atlas-link:hover { color: var(--accent); border-color: var(--accent-weak); transform: translateY(-1px); }
.atlas-link span { font-size: 1.05rem; line-height: 1; }

.icon-btn { width: 36px; height: 36px; border-radius: 999px; background: var(--surface-2); }
.read-progress { height: 3px; background: linear-gradient(90deg, var(--mint), var(--signal)); }
.skip-link {
  position: fixed; z-index: 999; top: .6rem; left: .6rem; padding: .6rem .9rem;
  border-radius: 10px; color: var(--ink); background: var(--signal); font-size: .8rem; font-weight: 700;
  transform: translateY(-160%); transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }
.wrap { padding-top: 2rem; }

/* Home: hero as an interactive instrument panel */
body[data-page="index"] .wrap {
  width: 100%; max-width: none;
  padding: 0;
}
.hero-home {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 100%; min-width: 0;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(3rem, 7vh, 5.5rem) clamp(1.4rem, 3vh, 2.2rem);
  padding-inline: max(var(--shell-inner, 1rem), calc((100% - var(--shell-width, 1180px)) / 2 + var(--shell-inner, 1rem)));
  border: 0; border-radius: 0;
  background:
    radial-gradient(circle at 85% 30%, rgba(68, 213, 181, .18), transparent 28%),
    radial-gradient(circle at 74% 110%, rgba(200, 243, 91, .12), transparent 34%),
    linear-gradient(135deg, #06171d 0%, #082a30 56%, #0a3b3d 100%);
  box-shadow: none;
  color: #eef8f3;
}
.hero-home::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image:
    linear-gradient(rgba(185,245,216,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,245,216,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000);
          mask-image: linear-gradient(90deg, transparent 35%, #000);
}
.hero-home::after {
  content: ""; position: absolute; z-index: -1; width: 430px; height: 430px;
  right: -120px; top: -150px; border: 1px solid rgba(185, 245, 216, .2); border-radius: 50%;
  box-shadow: 0 0 0 56px rgba(185,245,216,.025), 0 0 0 112px rgba(185,245,216,.018);
}
.hero-home > *, .stat-row, .filters { max-width: 100%; min-width: 0; }
.hero-copy { width: 100%; max-width: 850px; min-width: 0; }
.hero-home h1 {
  max-width: 900px; margin: 0 0 1.15rem; color: #f5f3eb;
  font-family: var(--font-display); font-size: clamp(3.2rem, 7.2vw, 6.35rem);
  line-height: .92; letter-spacing: -.058em; font-weight: 300;
  font-feature-settings: "kern" 1; text-wrap: balance;
}
.hero-home h1 .accent { color: var(--mint); font-style: normal; font-weight: 400; }
.hero-home .lede { max-width: 730px; margin: 0; color: #a9c5c2; font-size: clamp(1.02rem, 1.8vw, 1.26rem); line-height: 1.62; }
.hero-home .lede strong { color: #eef8f3; font-weight: 600; }
.stat-row { margin: 3.2rem 0 2rem; gap: .65rem; }
.stat {
  min-width: 150px; margin: 0; padding: .8rem 1.1rem .8rem 0;
  border-right-color: rgba(185, 245, 216, .14);
}
.stat b { color: #f7f6ef; font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 560; }
.stat span { color: #819f9d; font-size: .64rem; letter-spacing: .085em; }

.search-zone {
  position: relative; width: 100%; max-width: 100%; min-width: 0;
  margin-top: .4rem; padding: 1rem 1rem .85rem;
  border: 1px solid rgba(185, 245, 216, .19); border-radius: 20px;
  background: rgba(3, 20, 25, .48); backdrop-filter: blur(14px);
}
.search-label,
.filter-label {
  display: block; margin: 0 0 .58rem; color: #a7c0bd;
  font-family: var(--font-sans); font-size: .65rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
}
.search-bar {
  max-width: none; height: 60px; margin: 0; border: 0; border-radius: 14px;
  background: #f6f8f4; box-shadow: 0 18px 50px rgba(0, 0, 0, .15);
}
.search-bar::before { left: 1.18rem; background: #3f6667; }
.search-bar input { min-width: 0; padding: 0 3.6rem 0 0; color: #0b2023; font-size: 1.02rem; }
.search-bar input::placeholder { color: #718386; }
.search-bar:focus-within { border: 0; box-shadow: 0 0 0 3px rgba(185,245,216,.3), 0 18px 50px rgba(0,0,0,.18); }
.kbd-hint { right: 1rem; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #dce5e0; border-radius: 7px; color: #63777a; background: #fff; }
.quick-search { display: flex; flex-wrap: wrap; align-items: center; gap: .42rem; margin-top: .72rem; }
.quick-search > span { margin-right: .15rem; color: #789592; font-size: .67rem; font-weight: 650; }
.quick-search button {
  border: 1px solid rgba(185,245,216,.14); border-radius: 999px; padding: .3rem .62rem;
  background: rgba(185,245,216,.06); color: #b9d2cf; font: inherit; font-size: .69rem; cursor: pointer;
  transition: color .17s ease, border-color .17s ease, background .17s ease;
}
.quick-search button:hover { color: #071b21; border-color: var(--mint); background: var(--mint); }
.filter-label { margin-top: 1.65rem; }
.filters { gap: .5rem; margin-top: 0; }
.chip {
  min-height: 36px; border-color: rgba(185,245,216,.15); background: rgba(185,245,216,.055);
  color: #acc3c1; font-size: .72rem; letter-spacing: .008em;
}
.chip::before { background: var(--chip-color, var(--mint)); opacity: .8; }
.chip .cn { color: #708e8c; }
.chip:hover { color: #fff; border-color: rgba(185,245,216,.38); background: rgba(185,245,216,.1); }
.chip.active, [data-theme="dark"] .chip.active { color: var(--ink); background: var(--signal); border-color: var(--signal); }

/* Discovery grid */
.results {
  margin-top: 2rem;
  padding: 0 clamp(.8rem, 2vw, 2rem) 4rem;
}
.results-head { top: 62px; margin: 0 0 .4rem; padding: .75rem 0; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); }
.rh-count { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; }
.results-head .rh-count { margin-left: auto; }
.sys-group { margin-top: 3.2rem; }
.sys-group > h2 {
  align-items: center; margin-bottom: 1rem; color: var(--text-soft);
  font-family: var(--font-sans); font-size: .72rem; font-weight: 780; letter-spacing: .105em; text-transform: uppercase;
}
.sys-group > h2::before { width: 8px; height: 8px; border-radius: 50%; background: var(--grp-color); }
.sys-group > h2 .count { color: var(--text-mut); font-size: .67rem; }
.card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; counter-reset: fiche; }
.cancer-card {
  min-height: 172px; padding: 1.4rem 3.2rem 1.35rem .2rem;
  display: flex; flex-direction: column; gap: 0;
  border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent;
  box-shadow: none; counter-increment: fiche;
  transition: transform .24s var(--ease-out), box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.cancer-card::before { content: counter(fiche, decimal-leading-zero); position: absolute; top: 1.4rem; right: 1.35rem; color: var(--text-mut); opacity: .65; }
.cancer-card::after {
  content: "↗"; inset: auto 1.35rem 1.2rem auto; width: auto; height: auto;
  border-radius: 0; background: none; color: var(--card-color, var(--accent));
  font-family: var(--font-sans); font-size: 1rem; opacity: .5; transform: none;
}
.cancer-card h3 {
  max-width: 25ch; font-family: var(--font-display); font-size: 1.38rem;
  line-height: 1.08; letter-spacing: -.035em; font-weight: 400;
}
.cancer-card p { margin-top: .75rem; color: var(--text-soft); font-size: .85rem; line-height: 1.58; }
.cancer-card:hover { transform: none; background: var(--accent-soft); border-color: var(--card-color, var(--accent)); box-shadow: none; }
.cancer-card:hover::after { opacity: 1; transform: translate(2px, -2px); box-shadow: none; }
.cancer-card .cc-foot { order: 4; display: flex; margin-top: auto; padding-top: 1rem; }
.search-results .hit-terms { order: 3; grid-column: auto; margin-top: .85rem; }
.cc-sys { color: var(--text-mut); font-size: .63rem; font-weight: 720; letter-spacing: .075em; text-transform: uppercase; }
.done-dot { display: none; }
.ped-banner { margin: 3.6rem 0 0; padding: 1.2rem 1.35rem; border: 1px solid var(--accent-line); border-radius: 18px; background: linear-gradient(110deg, var(--accent-soft), transparent); }

/* Article shell */
.breadcrumb { max-width: var(--maxw); padding-top: 1.2rem; color: var(--text-mut); font-size: .69rem; letter-spacing: .02em; }
.page-hero {
  position: relative; overflow: hidden; max-width: none; margin: .6rem 0 2.2rem; padding: clamp(2rem, 5vw, 4rem);
  border: 0; border-radius: 0; background: transparent;
  color: #eff8f3; box-shadow: none;
}
.page-hero::after {
  display: none;
}
.page-hero h1 {
  max-width: 900px; color: #f7f5ed; font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: .98;
  letter-spacing: -.052em; font-weight: 300; text-wrap: balance;
}
.page-hero .subtitle { max-width: 850px; color: #a9c5c2; font-size: 1rem; line-height: 1.67; }
.tag-row { position: relative; z-index: 1; }
.tag { border-color: rgba(185,245,216,.16); background: rgba(185,245,216,.07); color: #b9cfcc; }
.tag.sys, [data-theme="dark"] .tag.sys { color: var(--ink); background: var(--signal); border-color: var(--signal); }
.page-meta {
  position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid rgba(185,245,216,.13);
}
.meta-item { padding-right: .7rem; color: #789895; font-size: .67rem; }
.meta-item b { display: block; color: #d9eae4; font-size: .73rem; font-weight: 650; }
.meta-spacer { flex: 1; }
.meta-action {
  border: 1px solid rgba(185,245,216,.16); border-radius: 999px; padding: .4rem .72rem;
  background: rgba(185,245,216,.06); color: #c3d8d3; font: inherit; font-size: .69rem; cursor: pointer;
}
.meta-action:hover { color: var(--ink); border-color: var(--mint); background: var(--mint); }

.page-layout { gap: 2.1rem; }
.toc {
  padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
.toc h4 { margin: 0 0 .75rem; padding: 0 0 .65rem; border-bottom: 1px solid var(--border-soft); }
.toc a { border-radius: 8px; padding: .32rem .4rem; }
.toc a:hover { background: var(--accent-soft); }
.toc a.active { background: var(--accent-soft); }

.page-content { min-width: 0; }
.section {
  margin: 0; padding: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0;
  background: transparent; box-shadow: none; counter-increment: sec;
}
.section:first-child { border-top: 1px solid var(--border); }
.section > h2 {
  min-height: 72px; margin: 0; padding: 1.15rem 2.5rem 1.15rem 0;
  font-family: var(--font-display); font-size: clamp(1.18rem, 2vw, 1.48rem);
  font-weight: 400; letter-spacing: -.025em;
}
.section > h2::before { color: var(--accent); font-size: .62rem; opacity: .8; }
.section > h2 .chev { right: 0; }
.section-body { max-width: none; padding: 0 0 1.6rem; }
.section h3 { color: var(--accent-strong); }
.callout { border: 0; border-left: 3px solid; border-radius: 12px; }
.table-scroll { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border); }
table.data thead th { background: color-mix(in srgb, var(--surface-2) 90%, var(--accent-soft)); }
.qcm-item { border-top: 1px solid var(--border-soft); }
.qcm-opt { border-radius: 12px; background: var(--surface-2); }
.case, .score-panel { border-radius: 15px; }
.flash-face { border-radius: 16px; box-shadow: var(--shadow-sm); }
.page-nav { border-top: 0; margin-top: 1.3rem; }
.page-nav a { border-radius: 16px; box-shadow: var(--shadow-sm); }

.to-top { width: 44px; height: 44px; border: 0; background: var(--signal); box-shadow: 0 16px 35px rgba(7,27,33,.25); }
.to-top::before { background: var(--ink); }

@media (min-width: 900px) {
  .page-layout { grid-template-columns: 232px minmax(0, 1fr); }
  .toc { top: 88px; }
}

@media (max-width: 980px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-home { border-radius: 0; }
}

@media (max-width: 699px) {
  .topbar-inner { padding-inline: 1rem; }
  .atlas-link { display: none; }
  body[data-page="index"] .wrap { padding-inline: 0; }
  .hero-home { padding: 2.6rem 1.15rem 1.15rem; border-radius: 0; }
  .hero-home .stat-row, .hero-home .quick-search { display: none; }
  .hero-home h1 { letter-spacing: -.055em; }
  .stat-row { display: grid; grid-template-columns: 1fr 1fr; margin: 2.2rem 0 1.4rem; }
  .stat { min-width: 0; border-right: 0; border-top: 1px solid rgba(185,245,216,.12); }
  .search-zone { padding: .75rem; }
  .search-bar { height: 56px; }
  .quick-search > span { width: 100%; }
  .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .card-grid { grid-template-columns: 1fr; gap: .7rem; }
  .cancer-card { min-height: 180px; }
  .wrap { padding-inline: 1rem; }
  .page-hero { margin-top: .3rem; padding: 2rem 0; border-radius: 0; }
  .page-hero h1 { font-size: clamp(2.45rem, 13vw, 4rem); }
  .meta-spacer { display: none; }
  .page-meta { align-items: flex-end; }
  .section { padding-inline: 0; border-radius: 0; }
}

/* ==========================================================================
   LIGHT-FIRST THEME — default canvas, with an explicit persistent switch.
   ========================================================================== */

.theme-toggle {
  width: auto; min-width: 104px; padding: 0 .72rem; gap: .42rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-color: var(--border); color: var(--text-soft);
}
.theme-toggle::after {
  content: "Sombre"; font-family: var(--font-sans); font-size: .68rem;
  font-weight: 700; letter-spacing: .02em;
}
[data-theme="dark"] .theme-toggle::after { content: "Clair"; }
.theme-fab {
  position: absolute; z-index: 4; top: 1rem; right: 1rem;
  min-width: 34px; width: 34px; height: 34px; padding: 0;
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 8px 24px -16px rgba(7, 79, 83, .42);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.theme-fab::after { display: none; }
.hero-copy, .page-hero h1 { padding-right: 2.8rem; }

.hero-home {
  border-color: #d8e6df;
  background:
    radial-gradient(circle at 86% 24%, rgba(79, 190, 163, .18), transparent 27%),
    radial-gradient(circle at 76% 108%, rgba(200, 243, 91, .2), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f4faf6 56%, #ebf6ef 100%);
  box-shadow: none;
  color: var(--text);
}
.hero-home::before {
  background-image:
    linear-gradient(rgba(7,79,83,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,79,83,.045) 1px, transparent 1px);
}
.hero-home::after {
  border-color: rgba(11,111,111,.17);
  box-shadow: 0 0 0 56px rgba(11,111,111,.026), 0 0 0 112px rgba(11,111,111,.018);
}
.hero-home h1 { color: var(--text); }
.hero-home h1 .accent { color: var(--accent); }
.hero-home .lede { color: var(--text-soft); }
.hero-home .lede strong { color: var(--accent-strong); }
.stat { border-right-color: var(--border); }
.stat b { color: var(--text); }
.stat span { color: var(--text-mut); }
.search-zone { border-color: var(--border); background: rgba(255,255,255,.76); box-shadow: var(--shadow-sm); }
.search-label, .filter-label { color: var(--text-mut); }
.search-bar { border: 1px solid var(--border); background: var(--surface); box-shadow: 0 14px 34px -24px rgba(7,79,83,.28); }
.search-bar:focus-within { border: 1px solid var(--accent-weak); box-shadow: 0 0 0 3px var(--accent-soft), 0 14px 34px -24px rgba(7,79,83,.28); }
.quick-search > span { color: var(--text-mut); }
.quick-search button { border-color: var(--border); background: var(--surface-2); color: var(--text-soft); }
.chip { border-color: var(--border); background: rgba(255,255,255,.64); color: var(--text-soft); }
.chip .cn { color: var(--text-mut); }
.chip:hover { color: var(--accent-strong); border-color: var(--accent-weak); background: var(--surface); }

.page-hero {
  border-color: transparent; background: transparent;
  color: var(--text); box-shadow: none;
}
.page-hero::after {
  border-color: rgba(11,111,111,.15);
  box-shadow: 0 0 0 38px rgba(11,111,111,.026), 0 0 0 76px rgba(11,111,111,.018);
}
.page-hero h1 { color: var(--text); }
.page-hero .subtitle { color: var(--text-soft); }
.tag { border-color: var(--border); background: rgba(255,255,255,.68); color: var(--text-soft); }
.page-meta { border-top-color: var(--border); }
.meta-item { color: var(--text-mut); }
.meta-item b { color: var(--text-soft); }
.meta-action { border-color: var(--border); background: rgba(255,255,255,.72); color: var(--text-soft); }

[data-theme="dark"] .hero-home {
  border-color: rgba(185,245,216,.14);
  background:
    radial-gradient(circle at 85% 30%, rgba(68,213,181,.18), transparent 28%),
    radial-gradient(circle at 74% 110%, rgba(200,243,91,.12), transparent 34%),
    linear-gradient(135deg, #06171d 0%, #082a30 56%, #0a3b3d 100%);
  box-shadow: none; color: #eef8f3;
}
[data-theme="dark"] .hero-home::before {
  background-image:
    linear-gradient(rgba(185,245,216,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,245,216,.035) 1px, transparent 1px);
}
[data-theme="dark"] .hero-home::after {
  border-color: rgba(185,245,216,.2);
  box-shadow: 0 0 0 56px rgba(185,245,216,.025), 0 0 0 112px rgba(185,245,216,.018);
}
[data-theme="dark"] .hero-home h1 { color: #f5f3eb; }
[data-theme="dark"] .hero-home h1 .accent { color: var(--mint); }
[data-theme="dark"] .hero-home .lede { color: #a9c5c2; }
[data-theme="dark"] .hero-home .lede strong { color: #eef8f3; }
[data-theme="dark"] .stat { border-right-color: rgba(185,245,216,.14); }
[data-theme="dark"] .stat b { color: #f7f6ef; }
[data-theme="dark"] .stat span { color: #819f9d; }
[data-theme="dark"] .search-zone { border-color: rgba(185,245,216,.19); background: rgba(3,20,25,.48); }
[data-theme="dark"] .search-label,
[data-theme="dark"] .filter-label { color: #a7c0bd; }
[data-theme="dark"] .quick-search > span { color: #789592; }
[data-theme="dark"] .quick-search button { border-color: rgba(185,245,216,.14); background: rgba(185,245,216,.06); color: #b9d2cf; }
[data-theme="dark"] .chip { border-color: rgba(185,245,216,.15); background: rgba(185,245,216,.055); color: #acc3c1; }
[data-theme="dark"] .chip .cn { color: #708e8c; }
[data-theme="dark"] .chip:hover { color: #fff; border-color: rgba(185,245,216,.38); background: rgba(185,245,216,.1); }

[data-theme="dark"] .page-hero {
  border-color: transparent; background: transparent;
  color: #eff8f3; box-shadow: none;
}
[data-theme="dark"] .page-hero::after {
  border-color: rgba(185,245,216,.18);
  box-shadow: 0 0 0 38px rgba(185,245,216,.025), 0 0 0 76px rgba(185,245,216,.018);
}
[data-theme="dark"] .page-hero h1 { color: #f7f5ed; }
[data-theme="dark"] .page-hero .subtitle { color: #a9c5c2; }
[data-theme="dark"] .tag { border-color: rgba(185,245,216,.16); background: rgba(185,245,216,.07); color: #b9cfcc; }
[data-theme="dark"] .page-meta { border-top-color: rgba(185,245,216,.13); }
[data-theme="dark"] .meta-item { color: #789895; }
[data-theme="dark"] .meta-item b { color: #d9eae4; }
[data-theme="dark"] .meta-action { border-color: rgba(185,245,216,.16); background: rgba(185,245,216,.06); color: #c3d8d3; }

@media (max-width: 699px) {
  .theme-toggle { min-width: 44px; width: 44px; height: 44px; padding: 0; }
  .theme-toggle::after { display: none; }
  .theme-fab { min-width: 34px; width: 34px; height: 34px; top: .7rem; right: .7rem; }
  .hero-home { box-shadow: none; }
  .stat { border-top-color: var(--border); }
  .chip { min-height: 44px; }
  .quick-search button, .meta-action { min-height: 40px; }
  [data-theme="dark"] .stat { border-top-color: rgba(185,245,216,.12); }
}

@media print {
  .page-meta, .atlas-link, .quick-search, .filter-label { display: none !important; }
  .page-hero { color: #000; background: #fff; border: 1px solid #ccc; box-shadow: none; }
  .page-hero h1, .page-hero .subtitle { color: #000; }
  .section { box-shadow: none; }
}

/* ==========================================================================
   NAVIGATION LIQUID GLASS
   ========================================================================== */
:root {
  --shell-width: 1180px;
  --shell-gutter: 1.4rem;
  --shell-inner: 1rem;
  --maxw: var(--shell-width);
}
.site-menu {
  position: fixed; z-index: 300; top: max(.7rem, env(safe-area-inset-top)); left: 50%;
  width: min(calc(100% - var(--shell-gutter)), var(--shell-width)); min-height: 54px;
  display: flex; align-items: center; gap: 1rem; padding: .38rem .45rem .38rem 1rem;
  transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--surface) 72%, var(--accent-line));
  border-radius: 999px; color: var(--text);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  box-shadow: 0 18px 50px -28px rgba(5, 37, 42, .48), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7);
}
.site-menu::before {
  content: ""; position: absolute; inset: 1px 12% auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.86), transparent);
}
.site-menu-brand {
  flex: none; color: var(--text); text-decoration: none; font-family: var(--font-display);
  font-size: 1.04rem; font-weight: 500; letter-spacing: -.035em;
}
.site-menu-links { min-width: 0; margin-left: auto; display: flex; align-items: center; gap: .22rem; }
.site-menu-link,
.site-menu-icon {
  min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; color: var(--text-soft); background: transparent;
  font-family: var(--font-sans); font-size: .73rem; font-weight: 650;
  line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.site-menu-link { padding: 0 .78rem; }
.site-menu-link:hover,
.site-menu-link.active { color: var(--accent-strong); background: var(--accent-soft); }
.site-menu-icon { flex: none; width: 38px; min-width: 38px; height: 38px; padding: 0; }
.site-menu-icon:hover { color: var(--accent); background: var(--accent-soft); }
.site-menu-icon:active { transform: scale(.94); }
.site-menu .theme-toggle { width: 38px; min-width: 38px; height: 38px; padding: 0; gap: 0; }
.site-menu .theme-toggle::after { display: none; }
.site-menu .theme-toggle svg { width: 17px; height: 17px; }
.hero-copy, .page-hero h1 { padding-right: 0; }
body:not([data-page="index"]) .wrap {
  padding-top: 5rem; padding-inline: var(--shell-inner);
}
body[data-page="index"] .results {
  width: min(calc(100% - var(--shell-gutter)), var(--shell-width));
  margin-inline: auto; padding-inline: var(--shell-inner);
}
[data-theme="dark"] .site-menu {
  border-color: rgba(185,245,216,.14); background: rgba(12, 27, 30, .64);
  box-shadow: 0 22px 58px -30px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] .site-menu::before {
  background: linear-gradient(90deg, transparent, rgba(185,245,216,.2), transparent);
}
[data-theme="dark"] .site-menu-link:hover,
[data-theme="dark"] .site-menu-link.active,
[data-theme="dark"] .site-menu-icon:hover { color: var(--mint); background: rgba(185,245,216,.08); }

/* Toutes les disciplines restent dans un seul rail, quelle que soit la largeur. */
.filters {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: .3rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.filters::-webkit-scrollbar { display: none; }
.filters .chip { flex: 0 0 auto; }

@media (max-width: 699px) {
  :root { --shell-gutter: .7rem; --shell-inner: .72rem; }
  .site-menu {
    top: max(.45rem, env(safe-area-inset-top)); min-height: 49px;
    gap: .25rem; padding: .3rem .32rem .3rem .72rem;
  }
  .site-menu-brand { font-size: .88rem; }
  .site-menu-links { gap: .05rem; }
  .site-menu-link { min-height: 34px; padding: 0 clamp(.28rem, 1.5vw, .48rem); font-size: clamp(.61rem, 2.65vw, .69rem); }
  .site-menu-icon,
  .site-menu .theme-toggle { width: 34px; min-width: 34px; height: 34px; }
  .hero-home { padding-top: 5.2rem; padding-inline: var(--shell-inner); }
  body:not([data-page="index"]) .wrap { padding-top: 4.5rem; }
}

@media (max-width: 355px) {
  .site-menu-brand { font-size: .78rem; }
  .site-menu-link { padding-inline: .22rem; font-size: .59rem; }
  .site-menu-icon,
  .site-menu .theme-toggle { width: 31px; min-width: 31px; height: 31px; }
}

/* Catalogue : fiches compactes sur un rail unique par discipline. */
body[data-page="index"] .card-grid {
  display: flex; flex-wrap: nowrap; gap: .48rem; overflow-x: auto; overflow-y: hidden;
  padding: .08rem 0 .38rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
body[data-page="index"] .card-grid::-webkit-scrollbar { display: none; }
body[data-page="index"] .cancer-card {
  flex: 0 0 auto; width: auto; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .62rem 2rem .62rem .9rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent); box-shadow: none;
}
body[data-page="index"] .cancer-card::before,
body[data-page="index"] .cancer-card p,
body[data-page="index"] .cancer-card .cc-foot,
body[data-page="index"] .cancer-card .hit-terms { display: none; }
body[data-page="index"] .cancer-card h3 {
  max-width: none; margin: 0; font-size: .88rem; line-height: 1;
  letter-spacing: -.018em; font-weight: 450; white-space: nowrap;
}
body[data-page="index"] .cancer-card::after {
  inset: 50% .78rem auto auto; font-size: .72rem;
  transform: translateY(-52%); opacity: .48;
}
body[data-page="index"] .cancer-card:hover {
  background: var(--accent-soft); border-color: var(--card-color, var(--accent));
}
body[data-page="index"] .cancer-card:hover::after {
  transform: translate(2px, calc(-52% - 2px)); opacity: 1;
}

/* La recherche conserve son champ et révèle immédiatement de vraies fiches. */
body.search-view .hero-home {
  min-height: auto; justify-content: flex-start;
  padding-top: 5.4rem; padding-bottom: 1rem;
}
body.search-view .hero-copy,
body.search-view .stat-row,
body.search-view .quick-search { display: none; }
body.search-view .search-zone { margin-top: 0; }
body.search-view .results { margin-top: 0; padding-top: .25rem; }
body.search-view .results-head { top: 4.4rem; }
body[data-page="index"] .search-results {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem; overflow: visible; padding: .15rem 0;
}
body[data-page="index"] .search-results .cancer-card {
  width: auto; min-height: 164px; align-items: stretch; justify-content: flex-start;
  padding: 1.2rem 2.8rem 1.15rem 1.2rem; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
body[data-page="index"] .search-results .cancer-card::before { display: block; top: 1.2rem; right: 1rem; }
body[data-page="index"] .search-results .cancer-card h3 {
  max-width: 22ch; font-size: 1.25rem; line-height: 1.08; white-space: normal;
}
body[data-page="index"] .search-results .cancer-card p {
  display: block; margin-top: .65rem; font-size: .8rem; line-height: 1.5;
}
body[data-page="index"] .search-results .cancer-card .cc-foot {
  display: flex; margin-top: auto; padding-top: .8rem;
}
body[data-page="index"] .search-results .cancer-card .hit-terms { display: flex; flex-wrap: wrap; }

@media (max-width: 980px) {
  body[data-page="index"] .search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
  body.search-view .hero-home { padding-top: 4.8rem; }
  body.search-view .results-head { top: 3.9rem; }
  body[data-page="index"] .search-results { grid-template-columns: 1fr; }
}

/* Pages de population */
.population-page { min-height: 100svh; }
.population-hero {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.6rem);
  border-bottom: 1px solid var(--border);
}
.population-kicker {
  margin: 0 0 .9rem; color: var(--accent); font-family: var(--font-sans);
  font-size: .68rem; font-weight: 760; letter-spacing: .12em; text-transform: uppercase;
}
.population-hero h1 {
  max-width: 16ch; margin: 0; font-family: var(--font-display);
  font-size: clamp(3rem, 7.5vw, 6.2rem); line-height: .92;
  letter-spacing: -.058em; font-weight: 300;
}
.population-hero p:last-child {
  max-width: 66ch; margin: 1.25rem 0 0; color: var(--text-soft);
  font-size: clamp(.98rem, 1.6vw, 1.15rem); line-height: 1.65;
}
.population-catalogue { padding: 1.2rem 0 4rem; }
.population-summary {
  margin: 0 0 1rem; color: var(--text-mut); font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}
.population-group { margin-top: 2.5rem; }
.population-group h2 {
  display: flex; align-items: center; gap: .65rem; margin: 0 0 .8rem;
  color: var(--text-soft); font-family: var(--font-sans); font-size: .7rem;
  font-weight: 780; letter-spacing: .1em; text-transform: uppercase;
}
.population-group h2::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--grp-color, var(--accent));
}
.population-group h2 span { color: var(--text-mut); font-family: var(--font-mono); font-weight: 400; }
.population-links {
  display: flex; flex-wrap: wrap; gap: .48rem; overflow: visible;
  padding: .08rem 0 .38rem;
}
.population-card {
  flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; gap: .7rem;
  padding: .62rem .82rem .62rem .9rem; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); background: color-mix(in srgb, var(--surface) 82%, transparent);
  font-family: var(--font-display); font-size: .88rem; font-weight: 450;
  letter-spacing: -.018em; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.population-arrow { color: var(--accent); font-family: var(--font-sans); font-size: .72rem; opacity: .55; }
.population-card:hover {
  color: var(--accent-strong); border-color: var(--accent-weak); background: var(--accent-soft);
  transform: translateY(-1px);
}
.population-card:hover .population-arrow { opacity: 1; }

@media (max-width: 699px) {
  .population-hero { padding-top: 2.7rem; }
  .population-group { margin-top: 2rem; }
}

@media print {
  .site-menu { display: none !important; }
}


/* ==========================================================================
   iOS — DYNAMIC ISLAND & BARRE D'ADRESSE
   Méthode validée sur prbibault.fr et praxia.health, calquée sur Onco Arcade.

   Trois règles, dans cet ordre d'importance :

   (1) La couleur de fond ne vit que sur html, jamais sur body.
       Safari peint la bande de l'îlot avec le background-color qu'il trouve
       sur body ; s'il en trouve un, il l'applique en aplat opaque et plus
       rien ne peut apparaître derrière. body transparent, il n'a plus rien
       à peindre et compose les vrais pixels de la page.
       Corollaire : ni image ni dégradé sur body — Safari ne sait pas les
       échantillonner et retombe sur un aplat.

   (2) Aucun élément fixed ou sticky ne touche le bord haut. Safari inspecte
       ceux qui sont à moins de ~4 px du bord, quel que soit leur fond.

   (3) Les calques fixes masqués quittent l'arbre de rendu. opacity:0,
       visibility:hidden et transform ne suffisent pas : Safari lit leur
       background-color quand même.
   ========================================================================== */

:root { --ilot: env(safe-area-inset-top, 0px); }

/* ---- (1) Racine ---------------------------------------------------------- */

html { background: var(--paper); }
body { background-color: transparent; background-image: none; }

/* La trame de points repasse sur un pseudo-élément fixe : les
   pseudo-éléments sont invisibles à l'échantillonnage de Safari, la texture
   est donc conservée sans redevenir une surface échantillonnable. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(22, 33, 31, .035) 1px, transparent 0);
  background-size: 22px 22px;
}
[data-theme="dark"] body::before {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .025) 1px, transparent 0);
}

/* ---- (2) Rien au bord haut ----------------------------------------------- */

/* La jauge de lecture était en top:0 avec un fond plein : c'est elle que
   Safari échantillonnait en priorité. Elle descend sous la zone sûre. */
.read-progress { top: var(--ilot); }

/* Lien d'évitement : fixed, fond var(--signal), à .6rem du bord. */
.skip-link { top: calc(.6rem + var(--ilot)); }

/* La pastille flottante garde une respiration sous l'îlot, comme le
   .topbar d'Onco Arcade (14 px sous la zone sûre) plutôt que collée. */
.site-menu { top: max(.7rem, calc(var(--ilot) + .45rem)); }
@media (max-width: 699px) {
  .site-menu { top: max(.45rem, calc(var(--ilot) + .4rem)); }
}

/* ---- (3) Calques fixes masqués ------------------------------------------- */

/* Bouton « retour en haut » : fixed au bord bas, fond var(--surface),
   masqué par opacity + visibility — donc échantillonné pour la barre
   d'adresse. Le fondu est repris par allow-discrete. */
.to-top {
  display: none;
  bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  right: calc(1.4rem + env(safe-area-inset-right, 0px));
  transition: opacity .22s var(--ease), transform .22s var(--ease-out),
              display .22s allow-discrete, border-color .2s var(--ease);
}
.to-top.show { display: block; }
@starting-style {
  .to-top.show { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---- Compensation des safe areas ----------------------------------------- */

/* viewport-fit=cover fait démarrer le contenu à y=0 : les réserves de place
   sous la pastille flottante doivent absorber la hauteur de l'îlot, sinon le
   hero et les fiches passent dessous. */
.hero-home { padding-top: calc(clamp(3rem, 7vh, 5.5rem) + var(--ilot)); }
body:not([data-page="index"]) .wrap { padding-top: calc(5rem + var(--ilot)); }
.results-head { top: calc(60px + var(--ilot)); }

@media (max-width: 699px) {
  .hero-home { padding-top: calc(5.2rem + var(--ilot)); }
  body:not([data-page="index"]) .wrap { padding-top: calc(4.5rem + var(--ilot)); }
  body.search-view .hero-home { padding-top: calc(4.8rem + var(--ilot)); }
  body.search-view .results-head { top: calc(3.9rem + var(--ilot)); }
}


/* ---- Correctifs (2e passe) ----------------------------------------------- */

/* Le lien d'évitement était masqué par translateY(-160%), soit environ -64 px
   pour une hauteur de 40 px. En descendant son ancrage de env(safe-area-inset-top)
   (~59 px), ce recul ne suffisait plus à le sortir de l'écran : il restait
   visible par-dessus la barre d'état. Le décalage est désormais calculé à
   partir de sa position réelle. */
.skip-link {
  top: calc(.6rem + var(--ilot));
  transform: translateY(calc(-100% - .6rem - var(--ilot) - 12px));
}
.skip-link:focus { transform: translateY(0); }

/* Le bouton « retour en haut » est le seul élément fixed du bas sur les fiches.
   Visible, Safari lit son background-color et peint un aplat opaque sous la
   barre d'adresse — d'où le texte tranché net en bas des fiches, alors que
   l'index, qui n'a pas ce bouton, passait correctement dessous.
   L'élément fixed devient transparent, le disque descend sur un ::after :
   les pseudo-éléments ne sont pas échantillonnés. */
.to-top {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.to-top::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 16px 35px rgba(7, 27, 33, .25);
}
.to-top:hover::after { box-shadow: 0 18px 40px rgba(7, 27, 33, .3); }

/* ---- Pied de page ------------------------------------------------------- */

.site-foot {
  padding: 2.6rem var(--shell-inner, 1rem) calc(2.2rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: .78rem;
  letter-spacing: .01em;
  color: var(--text-mut);
}
.site-foot p { margin: 0; }
.site-foot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
.site-foot a:hover { color: var(--accent); }


/* ---- Correctifs (3e passe) ----------------------------------------------- */

/* Le lien d'évitement restait visible : translateY(calc(-100% - … - var(--ilot) …))
   mélangeait pourcentage, rem et env() dans une même expression, ce que Safari
   peut refuser d'analyser — la déclaration entière est alors invalidée et
   l'élément reste à sa position d'ancrage. Décalage exprimé en pixels fixes,
   valeur volontairement supérieure à tout cumul réaliste
   (îlot ~59 px + .6rem + hauteur ~38 px), doublé d'une opacité de sécurité :
   si le transform saute, l'élément reste invisible. */
.skip-link {
  top: calc(.6rem + var(--ilot));
  transform: translateY(-220px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.skip-link:focus {
  transform: translateY(0);
  opacity: 1;
}

/* Centrage du pied de page par flex plutôt que par text-align : insensible à
   tout héritage d'alignement, et marges latérales indépendantes de
   --shell-inner. */
.site-foot {
  display: flex;
  justify-content: center;
  padding: 2.6rem 1.25rem calc(2.2rem + env(safe-area-inset-bottom, 0px));
}
.site-foot p {
  margin: 0;
  max-width: 34rem;
  text-align: center;
}


/* ---- Raccord du hero d'accueil ------------------------------------------ */
/* Le hero est un panneau à part : dégradé blanc → vert pâle, trame, et un
   grand cercle décoratif ancré à -150px du haut. Contre le fond de page
   (var(--paper)), ses bords haut et bas se lisaient comme une image
   grossièrement recadrée — d'autant plus en haut, où Safari peint la bande de
   l'îlot en aplat de var(--paper) et coupe le cercle net.

   Le calque .hero-fade fond les deux extrémités vers var(--paper). En haut il
   reste opaque jusqu'à la limite de la zone sûre, si bien que la bande peinte
   par Safari et le début du hero sont exactement de la même couleur : la
   jonction disparaît quel que soit le défilement. */

.hero-fade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--paper) 0px,
      var(--paper) var(--ilot),
      transparent calc(var(--ilot) + 5rem)),
    linear-gradient(to top,
      var(--paper) 0px,
      transparent 7rem);
}

/* Le contenu repasse au-dessus du fondu. Les décors ::before (trame) et
   ::after (cercle) restent en z-index:-1, donc dessous : ce sont eux qu'il
   faut estomper. */
.hero-home > *:not(.hero-fade) {
  position: relative;
  z-index: 1;
}


/* ---- Jauge de progression de lecture : retirée --------------------------- */
/* Le <div class="read-progress"> a été supprimé des 38 pages. La règle reste
   par sécurité, au cas où un gabarit le réintroduirait. initReadProgress()
   dans app.js sort proprement quand l'élément est absent (if (!bar) return). */
.read-progress { display: none !important; }


/* ---- Accueil : tenir dans un écran, sans défilement ---------------------- */
/* Le hero était figé à min-height:100svh, auquel s'ajoutaient le pied de page
   et le padding haut compensant l'îlot : le total dépassait toujours la
   hauteur visible. La colonne fait désormais exactement un écran et le hero
   absorbe la place restante, pied de page déduit.
   100svh et non 100dvh : c'est la hauteur avec la barre d'outils Safari
   déployée, donc celle qui garantit l'absence de défilement dans tous les
   états. */
body[data-page="index"] .wrap {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body[data-page="index"] .hero-home {
  min-height: 0;
  flex: 1 1 auto;
}
/* En vue recherche, les résultats prennent la main : le hero reprend sa
   hauteur naturelle et la page redevient défilante. */
body[data-page="index"].search-view .hero-home {
  flex: 0 0 auto;
}


/* ---- Accueil : dégager le texte de la barre flottante -------------------- */
/* Le hero est centré verticalement, mais son contenu occupe presque toute la
   hauteur disponible : le centrage déborde alors vers le haut et le titre
   passait sous la pastille de navigation, qui est en position:fixed et ne
   réserve donc aucune place dans le flux.
   Le padding haut est porté à 7.5rem au-dessus de 700px — la pastille
   descend jusqu'à environ 65px — ce qui garantit le dégagement même quand le
   centrage déborde. La valeur mobile, déjà validée à l'écran, est inchangée. */
@media (min-width: 700px) {
  body[data-page="index"] .hero-home {
    padding-top: calc(var(--ilot) + 7.5rem);
  }
}