/* Les couleurs des étapes. Le Radar les appelle par `var(--c-<étape>)` sur la
   rivière et sur l'en-tête de chaque colonne ; sans ces définitions, les deux
   restaient transparents et leur texte blanc était illisible.
   L'étape se lit à la couleur : on s'éloigne du laboratoire et on se rapproche
   de la pharmacie. Le violet marque le dépôt du dossier, la dernière marche
   avant l'autorisation, en vert. Les arrêts restent gris, sans fausse promesse. */
:root{--c-precl:#7C6F8A;--c-p1:#1F5F8B;--c-p2:#1F8A7E;--c-p3:#C77C18;
      --c-depot:#D14A1F;--c-auto:#2E8B4E;--c-stop:#8A8078}

/* the phase river */
.river{display:flex;gap:4px;margin:22px 0 18px;border-radius:16px;overflow:hidden}
.river button{flex:1;border:0;cursor:pointer;color:#fff;padding:10px 8px;text-align:left;font:inherit;min-width:0}
.river button b{display:block;font:800 26px/1 'Baloo 2',sans-serif}
.river button span{font-size:13px;font-weight:800;opacity:.95;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.river button:focus-visible{outline:3px solid var(--sun);outline-offset:-3px}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.seg{display:inline-flex;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:none;color:var(--ink);font:800 14px Nunito,sans-serif;padding:7px 14px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--plum);color:#fff}
.seg button:focus-visible,.search:focus-visible,select:focus-visible{outline:3px solid var(--sun)}
.search,select{background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:999px;padding:9px 16px;font:700 14px Nunito,sans-serif}
.search{min-width:220px;flex:1;max-width:340px}
.news{background:var(--surface);border-left:6px solid var(--sun);border-radius:0 16px 16px 0;padding:12px 16px;margin-bottom:18px}
.news summary{cursor:pointer;font:800 20px 'Baloo 2',sans-serif}
.news ul{list-style:none;margin-top:6px;padding:0}
.news li{padding:5px 0;border-top:1px dashed var(--line);font-size:15px}
.news li b{color:var(--plum);margin-right:8px}
.river .sh{display:none}
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:10px;overflow-x:auto;padding-bottom:10px}
.col{background:var(--surface);border-radius:18px;display:flex;flex-direction:column;min-height:120px}
.colh{padding:12px 14px 10px;border-radius:18px 18px 0 0;color:#fff}
.colh h2{font:800 20px/1.05 'Baloo 2',sans-serif;display:flex;justify-content:space-between;gap:8px}
.colh p{font-size:12.5px;font-weight:700;opacity:.92;margin-top:2px}
.cards{padding:8px;display:flex;flex-direction:column;gap:8px}
.card{text-align:left;background:var(--bg);border:2px solid transparent;border-radius:14px;padding:9px 11px;cursor:pointer;color:var(--ink);font:inherit;width:100%}
.card:hover,.card:focus-visible{border-color:var(--plum);outline:none}
.card h3{font:800 17px/1.1 'Baloo 2',sans-serif}
.card .lab{font-size:12.5px;color:var(--muted);font-weight:700}
.card .s{font-size:13.5px;margin-top:4px}
.card .meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.chip{font-size:11.5px;font-weight:800;border-radius:999px;padding:1px 8px;background:var(--plumL);color:var(--plum)}
.chip.crohn{background:#D14A1F;color:#fff}.chip.rch{background:#1F8A7E;color:#fff}
.det{font-size:13px;margin-top:5px;color:var(--muted);font-weight:700}
.det b{color:var(--ink)}
.empty{padding:10px;font-size:13px;color:var(--muted);font-style:italic}
/* La fiche d'une molécule. */
dialog{margin:auto;border:0;border-radius:20px;max-width:600px;width:calc(100% - 28px);max-height:calc(100vh - 40px);background:var(--bg);color:var(--ink);padding:0;box-shadow:0 30px 80px rgba(31,27,36,.35)}
dialog::backdrop{background:rgba(31,27,36,.45);backdrop-filter:blur(3px)}
.dh{position:relative;background:linear-gradient(135deg,var(--dc,var(--teal)),color-mix(in srgb,var(--dc,var(--teal)) 70%,#fff));color:#fff;padding:12px 20px 14px}
.dh-et{display:inline-block;background:rgba(255,255,255,.22);border-radius:999px;padding:1px 10px;font-weight:800;font-size:12px;letter-spacing:.03em}
.dh h2{font:800 25px/1.1 'Baloo 2',sans-serif;margin:4px 44px 0 0;color:#fff}
.dh p{font-weight:700;opacity:.95;margin:0;font-size:14.5px}
.close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.25);border:0;color:#fff;font:700 20px/1 Nunito;cursor:pointer}
.close:hover{background:rgba(255,255,255,.4)}
.db{padding:14px 20px 18px}
.db h3{font:800 16px 'Baloo 2',sans-serif;margin:14px 0 6px}
.bref{font-size:15px;line-height:1.45;font-weight:600;background:var(--surface);border-left:5px solid var(--dc,var(--teal));border-radius:0 12px 12px 0;padding:9px 13px;margin:0}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;margin-top:10px}
.tu{background:var(--surface);border-radius:12px;padding:6px 11px}
.tu small{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tu b{font:800 14.5px/1.2 'Baloo 2',sans-serif}
.ind{background:var(--surface);border-radius:12px;padding:8px 12px;margin-bottom:6px}
.ind-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ind-t b{font:800 15px 'Baloo 2',sans-serif}
.ind p{margin:3px 0 0;font-size:14px;line-height:1.4}
.piste{display:flex;gap:3px;margin-left:auto}
.piste i{width:18px;height:7px;border-radius:4px;background:var(--line)}
.piste i.ok{background:var(--dc,var(--teal))}
.piste.arretee i.ok,.piste.arretee i{background:#D6CFC6}
.arrivee{margin-top:10px;background:linear-gradient(135deg,#FFF1E9,#FFE3D2);border-radius:12px;padding:8px 13px}
.arrivee small{display:block;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--coral)}
.arrivee b{font:800 15.5px/1.25 'Baloo 2',sans-serif}
.srcs{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.srcs li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.35;background:var(--surface);border-radius:10px;padding:6px 10px}
.srcs .sn{flex:none;width:19px;height:19px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-weight:900;font-size:12px}
.srcs a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.verif{font-size:12.5px;color:var(--muted);margin:10px 0 0}
footer{margin-top:24px;font-size:13.5px;color:var(--muted);max-width:90ch}
@media (max-width:800px){.river .lg{display:none}.river .sh{display:block}.board{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;overflow:visible}.river button span{font-size:11px}.river button b{font-size:20px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Statuts par agence (Europe / États-Unis) */
.ags{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 2px}
.ag{display:inline-flex;align-items:baseline;gap:5px;font-size:12.5px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--plumL);color:var(--ink)}
.ag b{font-size:10.5px;font-weight:900;letter-spacing:.04em;opacity:.75}
.ag-d{opacity:.75;font-weight:600}
.ag-auto{background:#D8F0E2;color:#17603A}
.ag-examen{background:#DCE9F8;color:#1C4F86}
.ag-essai{background:#DDF0EC;color:#17605A}
.ag-retire,.ag-non{background:#EFE9E2;color:#6B6069}
.ag-inconnu{background:transparent;color:#6B6069;border:1px dashed #D6CFC6}
.nosrc{color:#6B6069;font-style:italic}
dialog .ags{margin-top:6px}


/* Le mode tableau. Le Radar en colonnes montre le parcours ; le tableau sert à
   comparer et à chercher. Même données, même filtres, autre regard. */
/* Le tableau défile dans son propre cadre, pas avec la page : sinon son en-tête
   collant se glisse sous la barre de navigation du site, elle aussi collante.
   Avantage en prime, les filtres restent visibles pendant qu'on parcourt. */
.board.as-table{display:block;overflow:auto;max-height:72vh;
  -webkit-overflow-scrolling:touch;border:2px solid var(--line);border-radius:14px}
.tri-aide{font-size:14px;color:var(--muted);margin:0 0 8px}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--surface)}
.tbl th,.tbl td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
  vertical-align:top}
.tbl thead th{position:sticky;top:0;z-index:1;background:var(--plum);color:#fff;
  font-size:14px;white-space:nowrap;padding:0}
.tbl thead th button{all:unset;display:block;width:100%;padding:10px 12px;cursor:pointer;
  font-weight:800;color:#fff}
.tbl thead th button:focus-visible{outline:3px solid var(--sun);outline-offset:-3px}
.tbl thead th[aria-sort="ascending"] button::after{content:" ↑"}
.tbl thead th[aria-sort="descending"] button::after{content:" ↓"}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:nth-child(even){background:var(--sand)}
.tbl tbody tr:hover{background:var(--plumL)}
.tbl tbody th{font-weight:800;white-space:nowrap}
.tbl tbody th small{display:block;font-weight:600;color:var(--muted);font-size:13.5px}
.tbl .etape{display:inline-block;color:#fff;font-weight:800;font-size:13px;
  border-radius:999px;padding:2px 10px;white-space:nowrap}
@media (max-width:700px){.tbl{font-size:14.5px}.tbl th,.tbl td{padding:7px 9px}}

/* La frise. Verticale, pas horizontale : sur un téléphone, une frise horizontale
   oblige à faire défiler de côté pour lire l'avenir, ce qui est le contraire de
   ce qu'on veut d'une frise. */
.board.as-frise{display:block;overflow:visible;max-height:none}
.fr-avert{font-size:15px;line-height:1.45;color:var(--ink);background:var(--sand);
  border-left:5px solid var(--sun);border-radius:0 12px 12px 0;padding:12px 16px;margin:0 0 20px;
  max-width:72ch}
.fr{position:relative;padding-left:26px}
.fr::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:3px;
  background:var(--plumL);border-radius:2px}
.fr-an{margin-bottom:26px;position:relative}
.fr-an h2{font-size:23px;margin:0 0 10px;display:flex;align-items:center;gap:10px}
.fr-an h2 small{font-size:14px;font-weight:800;color:var(--muted);
  background:var(--line);border-radius:999px;padding:1px 9px}
.fr-pt{position:absolute;left:-26px;top:7px;width:17px;height:17px;border-radius:50%;
  background:var(--plum);border:3px solid var(--bg)}
.fr-a-part h2{color:var(--muted)}
.fr-a-part .fr-pt{background:var(--muted)}
.fr-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
@media (max-width:640px){.fr{padding-left:20px}.fr-pt{margin-left:-20px}}

/* Le bouton d'export, dans la rangée des filtres : il exporte ce que les filtres
   montrent, pas toute la base. */
button.csv{all:unset;cursor:pointer;background:var(--teal);color:#fff;font-weight:800;
  font-size:15px;border-radius:999px;padding:9px 16px;white-space:nowrap}
button.csv:hover{filter:brightness(1.08)}
button.csv:focus-visible{outline:3px solid var(--sun);outline-offset:2px}