/* =========================================================
   RadiologicHub — Espace radioanatomie (visionneuse type console)
   ========================================================= */

/* ---------- Page d'accueil de l'espace ---------- */
.ra-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.ra-apropos { max-width: 76ch; }
.ra-apropos p { margin: 0 0 .8em; }

/* ---------- Station ---------- */
.ra-station {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "barre panneau" "ecran panneau" "defil panneau";
  height: min(86vh, 900px); min-height: 540px;
  border: 4px solid var(--ink); border-radius: var(--radius); overflow: hidden;
  background: #0d0e12; color: #e7e8ec;
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--purple) 40%, transparent);
}
.ra-station:fullscreen { height: 100vh; border-radius: 0; border: 0; }

.ra-barre { grid-area: barre; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 10px; background: #15161c; border-bottom: 1px solid #2a2b33; }
.ra-groupe { display: flex; align-items: center; gap: 4px; }
.ra-groupe-titre { margin-right: 2px; color: #9a9ba6; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ra-btn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px;
  border: 1.5px solid #3a3b45; border-radius: 999px; background: #1d1e25; color: #e7e8ec;
  font: 700 .72rem var(--font); letter-spacing: .02em; cursor: pointer; white-space: nowrap;
}
.ra-btn:hover { border-color: var(--amber); }
.ra-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ra-btn[aria-pressed="true"] { border-color: var(--amber); background: var(--amber); color: var(--ink); }
.ra-btn svg { width: 15px; height: 15px; flex: none; }

.ra-ecran { grid-area: ecran; position: relative; min-height: 0; background: #000; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; cursor: ns-resize; }
.ra-ecran[data-outil="fenetrage"] { cursor: crosshair; }
.ra-ecran[data-outil="zoom"] { cursor: zoom-in; }
.ra-ecran[data-outil="deplacer"] { cursor: grab; }
.ra-ecran[data-outil="identifier"] { cursor: help; }
.ra-ecran:focus-visible { box-shadow: inset 0 0 0 2px var(--amber); }
.ra-ecran canvas { position: absolute; inset: 0; display: block; }

.ra-coin { position: absolute; z-index: 2; color: #e9e9ec; font: 600 .7rem/1.45 var(--font); letter-spacing: .02em; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.ra-coin-hg { top: 8px; left: 10px; }
.ra-coin-hd { top: 8px; right: 10px; text-align: right; }
.ra-coin-bg { bottom: 8px; left: 10px; }
.ra-coin-bd { bottom: 8px; right: 10px; text-align: right; }
.ra-or { position: absolute; z-index: 2; color: var(--amber); font: 900 .85rem var(--font); text-shadow: 0 0 3px #000; pointer-events: none; }
.ra-or-haut { top: 6px; left: 50%; transform: translateX(-50%); }
.ra-or-bas { bottom: 6px; left: 50%; transform: translateX(-50%); }
.ra-or-gauche { left: 8px; top: 50%; transform: translateY(-50%); }
.ra-or-droite { right: 8px; top: 50%; transform: translateY(-50%); }

.ra-bulle { position: absolute; z-index: 3; max-width: 260px; padding: 6px 9px; border: 1px solid #4a4b55; border-radius: 10px; background: rgba(10, 10, 14, .9); color: #fff; font: 700 .74rem/1.35 var(--font); pointer-events: none; }
.ra-bulle.is-epingle { border-color: var(--amber); }
.ra-chargement { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; color: #cfd0d6; font: 700 .9rem var(--font); }
.ra-chargement small { color: #9a9ba6; font-weight: 600; }
.ra-chargement[hidden], .ra-bulle[hidden] { display: none; }

.ra-defilement { grid-area: defil; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #15161c; border-top: 1px solid #2a2b33; }
.ra-defilement input { flex: 1; min-width: 0; accent-color: var(--amber); }
.ra-compteur { min-width: 74px; text-align: right; font: 700 .74rem var(--font); color: #cfd0d6; }

/* ---------- Panneau ---------- */
.ra-panneau { grid-area: panneau; overflow: auto; padding: 14px 14px 18px; background: #111218; border-left: 1px solid #2a2b33; font-size: .8rem; }
.ra-panneau h2 { margin: 0 0 8px; color: #fff; font: 900 .74rem var(--font); letter-spacing: .1em; text-transform: uppercase; }
.ra-bloc { margin-bottom: 16px; }
.ra-bloc > .ra-groupe { flex-wrap: wrap; margin-bottom: 6px; }
.ra-interrupteur { display: flex; align-items: center; gap: 8px; margin: 5px 0; color: #e7e8ec; font-weight: 600; cursor: pointer; }
.ra-interrupteur input { width: 16px; height: 16px; accent-color: var(--amber); }
.ra-reglage { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; margin: 6px 0; color: #cfd0d6; font-weight: 600; }
.ra-reglage input[type="range"] { width: 100%; accent-color: var(--amber); }
.ra-reglage select, .ra-reglage input[type="number"] { min-width: 0; padding: 4px 6px; border: 1.5px solid #3a3b45; border-radius: 8px; background: #1d1e25; color: #e7e8ec; font: 600 .76rem var(--font); }

.ra-legende-groupe { margin-bottom: 6px; }
.ra-legende-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 4px 6px; border: 1.5px solid transparent; border-radius: 8px; background: none; color: #d9dae0; font: 600 .74rem/1.3 var(--font); text-align: left; cursor: pointer; }
.ra-legende-item.is-groupe { color: #fff; font-weight: 800; }
.ra-legende-item:not(.is-groupe) { padding-left: 22px; }
.ra-legende-item:hover { border-color: #3a3b45; }
.ra-legende-item[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.ra-pastille { flex: none; width: 12px; height: 12px; margin-top: 1px; border-radius: 4px; background: var(--c); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .35); }
.ra-legende-titre { margin: 10px 0 2px; color: #fff; font: 800 .74rem/1.3 var(--font); }
.ra-hachure-1 { background: repeating-linear-gradient(-45deg, #0c0c10 0 2px, #a3a4ae 2px 4px); }
.ra-hachure-2 { background: repeating-linear-gradient(45deg, #0c0c10 0 2px, #a3a4ae 2px 4px); }

.ra-info { padding: 10px 12px; border: 1.5px solid #2f303a; border-radius: 12px; background: #181920; color: #cfd0d6; line-height: 1.45; }
.ra-info p { margin: 0 0 .4em; }
.ra-info-titre { color: #fff; font-weight: 800; border-left: 4px solid var(--c); padding-left: 8px; }
.ra-info-groupe { color: #9a9ba6; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ra-info-vide { color: #9a9ba6; }

/* ---------- Mode test ---------- */
.ra-station.is-test .ra-hors-test { display: none; }
.ra-btn-test[aria-pressed="true"] { border-color: #3fbf52; background: #3fbf52; color: var(--ink); }
.ra-test { padding: 12px; border: 1.5px solid var(--amber); border-radius: 12px; background: #181920; }
.ra-test fieldset { margin: 10px 0 0; padding: 0; border: 0; }
.ra-test legend { margin-bottom: 6px; padding: 0; color: #fff; font: 800 .74rem var(--font); }
.ra-test-score { margin: 0 0 6px; color: #cfd0d6; font-weight: 700; }
.ra-test-score b, .ra-test-resultat b { color: var(--amber); }
.ra-test-resultat { margin: 4px 0 6px; color: #fff; font: 800 1rem var(--font); }
.ra-test-consigne { margin: 0; color: #9a9ba6; font-size: .74rem; line-height: 1.4; }
.ra-test-choix { display: grid; gap: 6px; }
.ra-choix { padding: 7px 10px; border: 1.5px solid #3a3b45; border-radius: 10px; background: #1d1e25; color: #e7e8ec; font: 600 .76rem/1.3 var(--font); text-align: left; cursor: pointer; }
.ra-choix:hover:not([disabled]) { border-color: #6a6b75; }
.ra-choix[aria-pressed="true"] { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, #1d1e25); }
.ra-choix.is-juste { border-color: #3fbf52; background: color-mix(in srgb, #3fbf52 24%, #1d1e25); color: #fff; }
.ra-choix.is-faux { border-color: #ea5a3d; background: color-mix(in srgb, #ea5a3d 24%, #1d1e25); color: #fff; }
.ra-choix[disabled] { cursor: default; }
.ra-test-correction { margin-top: 10px; padding: 8px 10px; border-left: 4px solid var(--amber); border-radius: 8px; background: #111218; color: #d9dae0; font-size: .76rem; line-height: 1.4; }
.ra-test-correction p { margin: 0 0 .35em; }
.ra-test-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ra-btn.is-primaire { border-color: var(--amber); background: var(--amber); color: var(--ink); }
.ra-btn[disabled] { opacity: .45; cursor: default; }

/* ---------- Sections sous la station ---------- */
.ra-aide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.ra-aide .fcard { padding: 18px 20px; }
.ra-aide h3 { margin: 0 0 8px; font-size: .95rem; font-weight: 900; }
.ra-aide ul { margin: 0; padding-left: 1.1em; font-size: .9rem; }
.ra-aide li { margin: .3em 0; }
.ra-aide kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; border: 1.5px solid var(--ink); border-radius: 6px; background: #fff; font: 800 .74rem var(--font); text-align: center; }
.ra-credits { font-size: .86rem; line-height: 1.55; }
.ra-credits p { margin: 0 0 .7em; }

@media (max-width: 960px) {
  .ra-station { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "barre" "ecran" "defil" "panneau"; height: auto; min-height: 0; }
  .ra-ecran { height: min(76vh, 118vw); }
  .ra-panneau { border-left: 0; border-top: 1px solid #2a2b33; }
}
@media (max-width: 560px) {
  .ra-station { box-shadow: 5px 5px 0 color-mix(in srgb, var(--purple) 40%, transparent); border-width: 3px; }
  .ra-barre { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ra-barre::-webkit-scrollbar { display: none; }
  .ra-btn .ra-btn-texte { display: none; }
  .ra-btn { padding: 0 9px; }
  .ra-coin { font-size: .62rem; }
  .ra-coin-long { display: none; }
}