/* Training HUB — système visuel commun. Présentation uniquement. */
html:root {
  --bg: #0c1018;
  --panel: #151b27;
  --panel2: #192130;
  --panel3: #202a3b;
  --line: #2a3446;
  --text: #eef2fa;
  --muted: #a0aec4;
  --blue: #91baff;
  --cyan: #84ddd0;
  --violet: #b3a0ff;
  --pink: #b3a0ff;
  --accent: #b3a0ff;
  --green: #84ddb0;
  --amber: #f3cf85;
  --red: #ff96a6;
  --shadow: 0 12px 32px #00000024;
  --ux-rail: 212px;
  --ux-radius: 16px;
  color-scheme: dark;
}
html { background-color: #0c1018; }
.proxmox-module-courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.proxmox-module-courses > .panel { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.proxmox-module-courses h3 { line-height: 1.35; }
.proxmox-module-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; }
@media (max-width: 760px) { .proxmox-module-courses { grid-template-columns: 1fr; } }
html.ux-pending body { visibility: hidden; }
html.ux-pending::after { content: 'Chargement du HUB…'; position: fixed; inset: 0; display: grid; place-items: center; color: #a0aec4; font: 14px system-ui,sans-serif; }
body.ux-platform {
  background: radial-gradient(ellipse at 80% 0, #22234255, transparent 680px), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding-left: var(--ux-rail);
  line-height: 1.65;
}
.ux-platform :where(h1,h2,h3,h4) { letter-spacing: -.035em; text-wrap: balance; }
.ux-platform :where(h1) { font-size: clamp(1.9rem,3.3vw,3rem); line-height: 1.15; }
.ux-platform :where(h2) { font-size: clamp(1.35rem,2vw,1.8rem); }
.ux-platform :where(p) { text-wrap: pretty; }
.ux-platform :where(.wrap,.shell,.resource-nav-inner) { width: min(1280px,calc(100% - 64px)); }
.ux-platform :where(.panel,.card,.hero,.library-hero,.glossary-hero,.quick-card,.subject-card,.home-resource-link,.category,.local-section) {
  border-color: var(--line);
  border-radius: var(--ux-radius);
  box-shadow: none;
  background-color: var(--panel);
}
.ux-platform :where(.hero,.library-hero,.glossary-hero) {
  background: linear-gradient(115deg,#192135,#161b28 75%);
  padding: 28px;
  margin-top: 24px;
}
.ux-platform :where(.hero,.library-hero)::after { display: none; }
.ux-platform :where(.lead,.intro) { font-size: .95rem; line-height: 1.7; max-width: 72ch; }
.ux-platform :where(.eyebrow) { color: var(--cyan); font-size: .7rem; letter-spacing: .14em; font-weight: 700; }
.ux-platform :where(.stat) { background: #ffffff05; border-color: var(--line); padding: 5px 10px; border-radius: 8px; font-size: .76rem; }
.ux-platform :where(.hero-stats) { gap: 8px; margin-top: 20px; }
.ux-platform :where(.btn,.navbtn,.nav-action,.primary-btn,.secondary-btn,.action-btn,.hub-toolbar-btn) {
  min-height: 42px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 650;
  transition: border-color .16s ease, background-color .16s ease;
}
.ux-platform :where(.btn.primary,.primary-btn) { background: #b3a0ff; border-color: #b3a0ff; color: #171126; }
.ux-platform :where(input[type=search],input[type=text],select,textarea,.field) {
  border-radius: 10px;
  border-color: var(--line);
  color: var(--text);
  background-color: #0f1622;
}
.ux-platform :where(input,select,button,a,summary):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.ux-platform :where(pre) { background: #0a101b; border: 1px solid var(--line); border-radius: 12px; padding: 18px; line-height: 1.7; }
.ux-platform :where(code,kbd) { font-family: 'Cascadia Code', Consolas, monospace; }
.ux-platform :where(table) { width: 100%; border-collapse: collapse; }
.ux-platform :where(th,td) { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.ux-platform :where(th) { color: #c7d2e7; background: #ffffff04; }
.ux-platform :where(.memo,.callout,.feedback,.note,.tip,.warning) { border-radius: 12px; line-height: 1.7; }
.ux-platform :where(.bar,.progress-track,.glossary-progress-track) { background: #293348; height: 6px; }
.ux-platform :where(.topbar,.resource-nav,.top) { background: #0e1420f5; border-color: var(--line); box-shadow: none; }
.ux-platform .topbar .nav { min-height: 70px; }
.ux-platform .brand { font-size: .94rem; }
.ux-platform .brand i { border-radius: 10px; background: var(--violet); }
.ux-page-label { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: .74rem; font-weight: 600; letter-spacing: .035em; }
.ux-page-marker { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }
.ux-platform .ux-page-label.brand,
.ux-platform .ux-page-label.account-brand { font-size: .74rem; font-weight: 600; color: var(--muted); }
.ux-platform .resource-nav-inner { min-height: 64px; gap: 8px; }
.ux-platform .resource-nav a { border: 0; font-size: .78rem; padding: 8px 10px; }
.ux-platform .resource-hub-link { background: #b3a0ff1c; color: #d9ceff; }
.ux-platform .resource-account-link { background: var(--accent) !important; }
.ux-platform .resource-bank-links { gap: 2px; }
.ux-platform .resource-nav a[aria-current=page] { background: #ffffff08; color: var(--cyan); }

/* Une navigation commune, jamais à la place des moteurs des pages. */
.ux-rail {
  position: fixed; inset: 0 auto 0 0; width: var(--ux-rail); z-index: 85;
  display: flex; flex-direction: column; padding: 24px 14px;
  background: #101621; border-right: 1px solid var(--line); overflow-y: auto;
}
.ux-rail-brand { position: relative; display: flex; align-items: center; gap: 9px; min-height: 64px; padding: 10px; margin-bottom: 24px; border: 1px solid #b3a0ff38; border-radius: 15px; background: linear-gradient(125deg,#b3a0ff20,#84ddd00a 90%); box-shadow: inset 0 1px #ffffff12, 0 8px 24px #0002; text-decoration: none; color: var(--text); }
.ux-rail-brand::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: -13px; height: 3px; border-radius: 999px; background: linear-gradient(90deg,var(--violet),var(--cyan) 68%,transparent); box-shadow: 0 0 12px #b3a0ff55; }
.ux-rail-brand:hover { border-color: #b3a0ff6b; background: linear-gradient(125deg,#b3a0ff2c,#84ddd012 90%); }
.ux-rail-brand > b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--violet); color: #191327; font-size: .8rem; }
.ux-rail-brand span { display: grid; line-height: 1.4; }
.ux-rail-brand strong { font-size: .94rem; }
.ux-rail-brand small { color: var(--muted); font-size: .65rem; letter-spacing: .09em; }
.ux-rail-nav { display: grid; gap: 5px; }
.ux-rail-link { display: flex; align-items: center; gap: 11px; min-height: 45px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; color: #aebbd0; font-size: .83rem; text-decoration: none; }
.ux-rail-link svg { width: 19px; height: 19px; flex-shrink: 0; }
.ux-rail-link:hover { color: #fff; background: #ffffff05; border-color: #ffffff08; }
.ux-rail-link[aria-current=page] { color: #e5dcff; background: #b3a0ff17; border-color: #b3a0ff28; }
.ux-rail-search { display: grid; gap: 6px; margin: -5px 0 16px; }
.ux-rail-search label { color: var(--muted); font-size: .68rem; font-weight: 700; }
.ux-rail-search input { width: 100%; min-width: 0; min-height: 42px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #0f1622; color: var(--text); font: inherit; font-size: .76rem; }
.ux-rail-search input::placeholder { color: #8e9cb2; }
.ux-rail-search input:focus { border-color: var(--violet); outline: 2px solid #b3a0ff35; }
.ux-mobile-search { display: none; }
.ux-search-panel { position: fixed; z-index: 120; top: 24px; left: calc(var(--ux-rail) + 12px); width: min(540px,calc(100vw - var(--ux-rail) - 28px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 16px; border: 1px solid #b3a0ff55; border-radius: 16px; background: #151c29; box-shadow: 0 20px 55px #0009; }
.ux-search-panel[hidden] { display: none; }
.ux-search-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ux-search-head div { display: grid; gap: 2px; }
.ux-search-head strong { color: var(--text); font-size: 1rem; }
.ux-search-head small,.ux-search-status { color: var(--muted); font-size: .76rem; }
.ux-search-close { flex: 0 0 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: #202a3b; color: var(--text); font-size: 1.3rem; cursor: pointer; }
.ux-search-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #0f1622; color: var(--text); font: inherit; }
.ux-search-status { margin: 10px 1px; }
.ux-search-results { display: grid; gap: 6px; }
.ux-search-result { display: grid; gap: 1px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; background: #101824; }
.ux-search-result:hover,.ux-search-result:focus-visible { border-color: var(--violet); background: #1e2638; }
.ux-search-result small { color: var(--cyan); font-size: .67rem; }
.ux-search-result strong { font-size: .81rem; line-height: 1.4; overflow-wrap: anywhere; }
.ux-search-more { width: 100%; margin-top: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #202a3b; color: var(--text); cursor: pointer; }
.ux-search-more[hidden] { display: none; }
.ux-rail-bottom { margin-top: auto; padding-top: 26px; }
.ux-rail-bottom p { position: relative; margin: 0; padding: 14px 11px 14px 16px; border: 1px solid #84ddd026; border-radius: 12px; background: linear-gradient(135deg,#84ddd010,#b3a0ff0a); color: #a8b8cd; font-size: .71rem; line-height: 1.55; }
.ux-rail-bottom p::before { content: ''; position: absolute; left: 7px; top: 16px; bottom: 16px; width: 2px; border-radius: 3px; background: linear-gradient(var(--cyan),var(--violet)); }
.ux-rail-bottom strong { color: #d9e6ed; font-weight: 600; }
.ux-rail details summary { list-style: none; cursor: pointer; }
.ux-rail details summary::-webkit-details-marker { display: none; }
.ux-tool-links { display: grid; border-left: 1px solid var(--line); margin: 8px 0 8px 22px; }
.ux-tool-links a { color: var(--muted); text-decoration: none; font-size: .78rem; padding: 8px 14px; }
.ux-tool-links a:hover { color: #fff; }
.ux-platform .ux-page-label,.ux-platform #navTools { display: none; }
.ux-platform .top-actions { margin-left: auto; }
.ux-tools-trigger { width: 100%; font: inherit; font-size: .83rem; text-align: left; background: transparent; cursor: pointer; }
.ux-tools-trigger[aria-expanded=true] { border-color: var(--line); background: #ffffff05; }
.ux-tools-panel { position: fixed; z-index: 100; top: 410px; left: calc(var(--ux-rail) + 12px); width: 240px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #151c29; box-shadow: 0 12px 36px #0005; }
.ux-tools-panel[hidden] { display: none; }
.ux-tools-panel strong { display: block; color: var(--muted); font-size: .72rem; padding: 6px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.ux-tools-panel a { display: block; padding: 10px; border-radius: 8px; text-decoration: none; color: #c3cde0; font-size: .8rem; }
.ux-tools-panel a:hover { background: #ffffff06; color: #fff; }
.ux-context { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 13px 0; color: var(--muted); font-size: .76rem; }
.ux-context a { color: #bac9e2; text-decoration: none; }
.ux-context a:hover { color: var(--cyan); }
.ux-context > span { color: #66758c; }
.ux-context-shortcuts { display: flex; gap: 16px; margin-left: auto; }
.ux-platform .app-head { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.ux-platform #appDesc { max-width: 80ch; font-size: .88rem; }
/* Le titre reçoit le focus de lecture à l’ouverture, sans imiter un champ sélectionné. */
.ux-platform #appTitle:focus { outline: none; box-shadow: none; }
.ux-platform #appBody { padding-top: 10px; }
.ux-platform .app-title h2 { font-size: 1.75rem; }

/* Accueil : entrer dans les matières sans étape intermédiaire. */
.ux-platform .hero-wrap { padding-top: 0; }
.ux-home-intro { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; align-items: stretch; }
.ux-home-intro .library-hero { margin-bottom: 0; }
.ux-platform .ux-home-intro { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ux-platform .library-hero h1 { font-size: clamp(1.8rem,3vw,2.8rem); }
.ux-platform .hero-progress { margin-top: 20px; padding-top: 16px; border-top: 1px solid #ffffff0b; }
.ux-platform .hero-progress-copy { font-size: .73rem; }
.ux-platform .home-resources { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.ux-platform .home-resource-link { min-height: 86px; padding: 16px; background: #151c29; border: 1px solid var(--line); color: var(--text); text-align: left; }
.ux-platform .home-resource-link:hover { border-color: #b3a0ff75; background: #1a2132; transform: none; }
.ux-platform .home-resource-copy strong { font-size: .88rem; }
.ux-platform .home-resource-copy small { font-size: .65rem; color: var(--muted); }
.ux-platform .home-resource-link .hub-resource-icon { background: #ffffff07; border-radius: 10px; width: 36px; height: 36px; font-size: 1rem; }
.ux-platform .home-tools { padding-top: 28px; }
.ux-platform .library-section-head h2 { font-size: 1.45rem; margin: 0; }
.ux-platform .library-section-head p { max-width: 78ch; font-size: .85rem; }
.ux-platform .hub-toolbar { background: transparent; border: 0; padding: 0 0 20px; box-shadow: none; }
.ux-platform .hub-toolbar-summary { border: 0; background: transparent; }
.ux-catalogue-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 20px; align-items: start; }
.ux-subject-nav { background: #121925; border: 1px solid var(--line); border-radius: 14px; padding: 12px; position: sticky; top: 90px; }
.ux-subject-nav h3 { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin: 6px 10px 14px; }
.ux-subject-list { display: grid; gap: 5px; }
.ux-subject-list button { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px; text-align: left; color: #b7c4db; font-size: .78rem; background: transparent; border: 1px solid transparent; border-radius: 9px; min-height: 42px; }
.ux-subject-list button small { color: #8292ac; font-size: .7rem; }
.ux-subject-list button:hover { background: #ffffff05; }
.ux-subject-list button[aria-pressed=true] { color: #e2daff; background: #b3a0ff13; border-color: #b3a0ff25; }
.ux-platform .hub-accordion-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ux-platform .hub-category { background: #151c29; border-color: var(--line); border-radius: 13px; }
.ux-platform .hub-category-heading { padding: 17px 18px; }
.ux-platform .hub-category-index { background: #ffffff05; color: var(--violet); border-radius: 10px; box-shadow: none; }
.ux-platform .hub-category-title { font-size: .95rem; }
.ux-platform .hub-category-desc { color: var(--muted); font-size: .75rem; }
.ux-platform .hub-resource-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.ux-platform .hub-resource { background: #101824; border-color: var(--line); border-radius: 11px; }
.ux-platform .hub-resource-open { padding: 15px; min-height: 120px; }
.ux-platform .hub-resource-title { font-size: .89rem; line-height: 1.45; }
.ux-platform .hub-resource-desc { font-size: .76rem; line-height: 1.6; }
.ux-platform .hub-resource-number { display: none; }
.ux-platform .hub-kind { background: #b3a0ff0b; border-color: #b3a0ff25; font-size: .65rem; color: #cabdff; }
.ux-platform .hub-resource-arrow { color: var(--muted); }
.ux-platform .hub-category-count { font-size: .65rem; background: #ffffff04; border-color: var(--line); }
.ux-platform .levels-choice-card { border-radius: 14px; box-shadow: none; }
.ux-platform .levels-choice-grid { gap: 14px; }

/* Bibliothèque : matières puis sous-thèmes, toutes les ressources restent en place. */
.ux-library-layout { display: grid; grid-template-columns: 205px minmax(0,1fr); gap: 22px; align-items: start; margin-top: 26px; }
.ux-library-content { min-width: 0; }
.ux-platform.resource-page-courses > .shell { padding-top: 0; }
.ux-platform .toolbar { background: #131b29; border: 1px solid var(--line); box-shadow: none; border-radius: 14px; padding: 18px; margin-top: 0; }
.ux-platform .courses-grid { gap: 12px; }
/* Une liste continue, même fermée : les descriptions ne gonflent plus des
   cellules étroites et chaque catégorie garde sa hauteur naturelle. */
body.ux-platform.resource-page-courses #courseGrid.grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
body.ux-platform.resource-page-courses #courseGrid > .category { grid-column: auto; }
body.ux-platform.resource-page-courses #courseGrid .category-heading { grid-template-columns: 32px minmax(0,1fr) auto 30px; padding: 13px 16px; gap: 12px; }
body.ux-platform.resource-page-courses #courseGrid .category-index { width: 32px; height: 32px; box-shadow: none; }
body.ux-platform.resource-page-courses #courseGrid .category-heading h2 { margin-bottom: 4px; }
body.ux-platform.resource-page-courses #courseGrid .category-count { grid-column: 3; margin-top: 0; }
body.ux-platform.resource-page-courses #courseGrid .category-chevron { grid-column: 4; }
@media(max-width:640px) {
  body.ux-platform.resource-page-courses #courseGrid .category-heading { grid-template-columns: 32px minmax(0,1fr) 30px; padding: 12px; gap: 6px 10px; }
  body.ux-platform.resource-page-courses #courseGrid .category-count { grid-column: 2; grid-row: 2; justify-self: start; }
  body.ux-platform.resource-page-courses #courseGrid .category-chevron { grid-column: 3; grid-row: 1; }
}
.ux-platform .category { border-radius: 13px; background: #151b27; }
.ux-platform .category-heading { padding: 18px; background: transparent; }
.ux-platform .category-heading h2 { font-size: 1rem; }
.ux-platform .resource { background: #101724; border-color: #263248; border-radius: 10px; }
.ux-platform .resource-link { padding: 13px; }
.ux-platform .resource-title { font-size: .83rem; line-height: 1.5; }
.ux-platform .resource-number { font-size: .7rem; background: #ffffff04; color: var(--muted); }
.ux-platform .resource .platform { font-size: .68rem; color: var(--muted); }
.ux-platform .resource:hover { border-color: #b3a0ff75; transform: none; }
.ux-platform .local-resource { background: #141c2b; border-color: var(--line); border-radius: 11px; }
.ux-platform .local-head { padding: 20px; }
.ux-platform .local-head h2 { font-size: 1.05rem; }
.ux-topic-panel { margin-bottom: 18px; }
.ux-topic-panel:empty { display: none; }
.ux-topic-panel > p { margin: 0 0 10px; font-size: .76rem; color: var(--muted); }
.ux-topic-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.ux-topic-actions a { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: #151d2a; color: #e0d9ff; font-size: .74rem; text-decoration: none; }
.ux-topic-actions a:hover { border-color: #b3a0ff68; background: #b3a0ff1c; }
.ux-topic-list { display: flex; flex-wrap: wrap; gap: 7px; }
.ux-topic-list button { border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; background: #151d2a; color: #b5c3da; font-size: .74rem; min-height: 36px; }
.ux-topic-list button[aria-pressed=true] { background: #b3a0ff1c; border-color: #b3a0ff68; color: #e6ddff; }
.ux-scope-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ux-scope-heading h2 { margin: 0; font-size: 1.25rem; }
.ux-scope-heading button { border: 0; background: transparent; color: var(--cyan); padding: 6px; font-size: .78rem; }
.ux-scope-empty { padding: 25px; border: 1px dashed var(--line); color: var(--muted); border-radius: 12px; }
.ux-family-hidden { display: none !important; }
.ux-duplicate-resource { display: none !important; }
/* Une seule navigation globale ; les anciens moteurs restent disponibles. */
.ux-platform .resource-bank-links { display: none; }
.ux-platform #moduleFilter { display: none; }
.ux-platform .ux-duplicate-home,
.ux-platform #backHome,
.ux-platform .ux-context [data-ux-home],
.ux-platform .ux-context [data-ux-home] + span { display: none; }
.ux-platform.resource-page-questions .hero h1,
.ux-platform.resource-page-questions .page-title { font-size: clamp(1.8rem,3vw,2.8rem); line-height: 1.15; letter-spacing: -.035em; }
.ux-single-quiz-nav > .topbar { display: none; }
.ux-single-quiz-nav .resource-nav-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
.ux-single-quiz-nav .resource-nav .nav-tabs { margin: 0; min-width: 0; gap: 6px; overflow-x: auto; }
.ux-single-quiz-nav .resource-nav .navbtn { border-radius: 9px; font-size: .76rem; padding: 9px 11px; }
.ux-single-quiz-nav .quiz-side { top: calc(var(--resource-nav-height) + 16px); }

/* Glossaire, révisions, quiz et galerie : même vocabulaire visuel. */
.ux-platform .glossary-hero { margin-top: 0; }
.ux-platform .glossary-stat { background: #ffffff04; border-color: var(--line); border-radius: 12px; }
.ux-platform .glossary-command { background: #141c2a; border-color: var(--line); border-radius: 14px; box-shadow: none; }
.ux-platform .glossary-entry { border-color: var(--line); border-radius: 12px; background: #141c29; }
.ux-platform .glossary-entry-toggle { padding: 16px; }
.ux-platform .glossary-theme-card { background: #151c29; border-color: var(--line); box-shadow: none; border-radius: 12px; }
.ux-platform .glossary-theme-card strong { font-size: .83rem; }
.ux-platform .glossary-theme-mark { background: #b3a0ff10; color: var(--violet); }
.ux-platform .glossary-sidebar { background: #111a26; border-color: var(--line); }
.ux-platform .glossary-learning-path { background: #121b2a; border: 1px solid var(--line); padding: 18px; }
.ux-platform .gr-card { background: #161e2d; border-color: var(--line); }
.ux-platform .gr-card h2 { line-height: 1.5; }
.ux-platform .gr-stats article { background: #141c29; border-color: var(--line); border-radius: 12px; }
.ux-platform .gr-controls { background: #131b29; }
.ux-platform .gr-answer { border-color: #84ddd045; background: #84ddd008; }
.ux-platform .quick-card { background: #161e2e; border-color: var(--line); border-radius: 14px; box-shadow: none; }
.ux-platform .subject-group,.ux-platform .subject-card { border-color: var(--line); border-radius: 13px; box-shadow: none; }
.ux-platform .quiz-question,.ux-platform .question-card { border-color: var(--line); background: #161e2d; border-radius: 15px; }
.ux-platform .quiz-question h2 { line-height: 1.5; }
.ux-platform .resource-page-questions .topbar { top: 64px; }
.ux-platform .gallery-card,.ux-platform .image-card { background: #141c29; border-color: var(--line); box-shadow: none; border-radius: 13px; }
.ux-platform .image-card img { border-radius: 9px; }
.ux-platform .course-tabs { padding: 10px; background: #101725; border-color: var(--line); border-radius: 12px; }
.ux-platform .course-tabs button { border-radius: 8px; font-size: .8rem; }
.ux-platform .course-tabs button[aria-selected=true] { background: #b3a0ff1c; border-color: #b3a0ff65; color: #e6ddff; }
.ux-platform .course-progress { background: #141c29; border-color: var(--line); border-radius: 13px; }
.ux-platform .course-nav { box-shadow: none; }
.ux-platform .diagram { background: #101824; border-color: var(--line); border-radius: 13px; }
.ux-platform .course-step .card { margin-bottom: 18px; }
.ux-platform .memo { border-color: #b3a0ff38; background-color: #b3a0ff09; }
.ux-platform .account-card { border-color: var(--line); box-shadow: none; }
.ux-platform footer { margin-top: 35px; color: var(--muted); font-size: .76rem; }
.ux-platform .hero h1 span { color: var(--violet); background: none; -webkit-text-fill-color: currentColor; }

@media (min-width: 1500px) { html:root { --ux-rail: 232px; } }
@media (max-width: 1150px) {
  html:root { --ux-rail: 184px; }
  .ux-rail-brand { gap: 7px; padding: 9px 7px; }
  .ux-rail-brand > b { width: 32px; height: 32px; flex: 0 0 32px; }
  .ux-rail-brand strong { font-size: .8rem; }
  .ux-rail-brand small { font-size: .56rem; }
  .ux-platform :where(.wrap,.shell,.resource-nav-inner) { width: calc(100% - 36px); }
  .ux-catalogue-layout,.ux-library-layout { grid-template-columns: 170px minmax(0,1fr); gap: 14px; }
  .ux-platform .nav { flex-wrap: wrap; padding: 10px 0; }
  .ux-platform .resource-nav-inner { flex-wrap: wrap; }
  .ux-platform .resource-bank-links { margin-left: 0; }
}
@media (max-width: 900px) {
  body.ux-platform { padding-left: 0; padding-bottom: 76px; }
  .ux-rail { inset: auto 0 0; width: 100%; height: 68px; padding: 5px 10px; border-right: 0; border-top: 1px solid var(--line); background: #101621f5; overflow: visible; }
  .ux-rail-brand,.ux-rail-bottom,.ux-rail .ux-revision-link,.ux-rail [data-ux-route="cheat"] { display: none; }
  .ux-rail-search { display: none; }
  .ux-mobile-search { display: flex; }
  .ux-rail-nav { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 2px; height: 100%; }
  .ux-search-panel { inset: 12px 12px 80px; width: auto; max-height: none; }
  .ux-tp-link span { font-size: 0; }
  .ux-tp-link span::after { content: 'TP'; font-size: .62rem; }
  .ux-tools-panel { top: auto; bottom: 80px; left: 14px; right: 14px; width: auto; }
  .ux-rail-link { display: flex; flex-direction: column; gap: 3px; padding: 6px 2px; min-height: 52px; font-size: .62rem; border-radius: 8px; }
  .ux-rail-link svg { width: 18px; height: 18px; }
  .ux-platform .chat-widget { bottom: 84px; }
  .ux-platform .chat-launcher { bottom: 82px; }
}
@media (max-width: 400px) {
  .ux-rail-nav { grid-template-columns: repeat(8,minmax(0,1fr)); }
  .ux-rail-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 350px) {
  .ux-rail-link span { display: none; }
  .ux-rail-link { align-items: center; justify-content: center; }
}
@media (max-width: 650px) {
  .ux-platform :where(.wrap,.shell,.resource-nav-inner) { width: calc(100% - 28px); }
  .ux-platform :where(.hero,.library-hero,.glossary-hero) { padding: 20px; }
  .ux-platform .home-resources { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ux-platform .home-resource-link { min-height: 90px; padding: 12px; gap: 9px; }
  .ux-platform .home-resource-copy strong { font-size: .75rem; }
  .ux-platform .home-resource-link .hub-resource-icon { display: none; }
  .ux-catalogue-layout,.ux-library-layout { grid-template-columns: 1fr; gap: 14px; }
  .ux-subject-nav { position: static; padding: 9px; min-width: 0; width: 100%; box-sizing: border-box; }
  .ux-platform .nav-direct { flex-wrap: wrap; min-width: 0; order: 3; width: 100%; }
  .ux-platform .nav-direct > :not([data-nav="cheat"]) { display: none; }
  .ux-platform .top-actions { flex-wrap: wrap; }
  .ux-subject-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .ux-subject-list button { flex-shrink: 0; padding: 8px 10px; }
  .ux-subject-list button small { display: none; }
  .ux-platform .hub-resource-list { grid-template-columns: 1fr; }
  .ux-platform .hub-category-desc { display: none; }
  .ux-platform .resource-bank-links { display: none; }
  .ux-platform .resource-nav-inner { justify-content: space-between; }
  .ux-context-shortcuts { width: 100%; margin-left: 0; font-size: .7rem; }
  .ux-platform .toolbar-top { grid-template-columns: 1fr; }
  .ux-platform .glossary-layout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ux-platform,.ux-platform * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Boutons communs : même finition que les banques Cours et Quiz. */
body.ux-platform :is(.btn,.navbtn,.nav-action,.primary-btn,.secondary-btn,.action-btn,.hub-toolbar-btn,.account-primary,.account-secondary,.account-danger,.copy-code,[data-account-link],[data-course-tab]) {
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 9px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .16s ease,border-color .16s ease,color .16s ease;
}
body.ux-platform :is(.btn,.navbtn,.nav-action,.secondary-btn,.action-btn,.hub-toolbar-btn,.account-secondary,.copy-code):not(:is(.primary,.active,.good,.bad,.danger,.correct,.incorrect,.success,.error,.selected,.is-active)) {
  background: #151d2a;
  color: #c3cde0;
  border: 1px solid var(--line);
}
body.ux-platform :is(.btn.primary,.primary-btn,.account-primary,.navbtn.active) {
  background: var(--violet);
  color: #171126;
  border: 1px solid var(--violet);
}
body.ux-platform :is(.btn,.navbtn,.secondary-btn,.hub-toolbar-btn,.account-secondary,.copy-code):not(:disabled):hover {
  border-color: #8f83c7;
  box-shadow: none;
  transform: none;
}
body.ux-platform :is(.btn,.navbtn,.primary-btn,.secondary-btn,.account-primary,.account-secondary):disabled {
  opacity: .48;
  cursor: not-allowed;
}
body.ux-platform [data-account-link] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  background: var(--accent) !important;
  color: #171126 !important;
  border: 1px solid var(--accent) !important;
}
body.ux-platform [data-account-link]:hover { background: #c1b1ff !important; }
body.ux-platform .account-nav-link > span[aria-hidden=true] { display: none; }
body.ux-platform [data-account-link]::before { content: none; }
body.ux-platform [data-account-link].is-authenticated::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #17633e;
}

/* Galerie et espace membre : pas de panneaux flottants superposés. */
body.ux-platform.resource-page-images .toolbar { position: static; margin: 20px 0 24px; }
body.ux-platform.resource-page-images .hero { margin-bottom: 20px; }
body.ux-platform.resource-page-images .organize-bar { gap: 16px; margin-bottom: 18px; }
body.ux-platform.resource-page-images .gallery-section { margin-bottom: 18px; }
body.ux-platform .account-resource-links { display: none; }
body.ux-platform.account-page .account-topbar { position: static; background: #0e1420; }
body.ux-platform.account-page #accountMain { padding-top: 24px; }
body.ux-platform.account-page :is(.account-hero,.account-panel,.account-stat) { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
body.ux-platform.account-page .account-member-hero { display: flex; flex-wrap: wrap; gap: 20px; }
body.ux-platform.account-page .account-member-hero h1 { font-size: clamp(1.8rem,3vw,2.8rem); line-height: 1.15; letter-spacing: -.035em; }
body.ux-platform.account-page .account-member-hero > div { min-width: 0; }
body.ux-platform.account-page .account-section-head { flex-wrap: wrap; }
body.ux-platform.account-page .account-stat-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
body.ux-platform.account-page :is(.account-auth-grid,.account-settings-grid,.account-overview-grid,.account-stat-grid) > * { min-width: 0; overflow-wrap: anywhere; }
body.ux-platform.account-page .account-session-actions { max-width: 100%; }
body.ux-platform.account-page #memberArea { display: grid; gap: 24px; }
body.ux-platform.account-page #memberArea > :is(.account-section,.account-settings-grid,.account-migration) { margin-top: 0; }
body.ux-platform.account-page #progressSection { display: grid; gap: 20px; }
body.ux-platform.account-page #progressSection > * { margin: 0; min-width: 0; }
body.ux-platform.account-page .learning-row > div { min-width: 0; overflow-wrap: anywhere; }
body.ux-platform.account-page .learning-row .learning-badge { flex-shrink: 0; }
.ux-platform .ux-activity-hidden { display: none !important; }
.ux-platform .ux-activity-toggle { margin-top: 14px; }

/* Détente : dimensionnement selon la place laissée par la navigation. */
body.chill-active .app-head,body.chill-active .ux-context{display:none!important}
body.ux-platform .chill-shell { width: 100%; max-width: none; min-width: 0; margin-inline: 0; container-type: inline-size; }
body.ux-platform .chill-shell > * { min-width: 0; }
body.ux-platform .chill-hero { padding: 20px; border-radius: 14px; gap: 16px; }
body.ux-platform .chill-hero h3 { font-size: clamp(1.35rem,2.1vw,1.8rem); }
body.ux-platform .chill-companion-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
body.ux-platform .chill-home-grid { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 16px; }
body.ux-platform .chill-nav { flex-wrap: wrap; gap: 5px; border-radius: 12px; }
body.ux-platform .chill-nav button { min-height: 38px; padding: 8px 10px; font-size: .78rem; font-weight: 650; border-radius: 8px; }
body.ux-platform .chill-nav button.active { background: var(--violet); color: #171126; }
body.ux-platform :is(.chill-room-card,.chill-care-card,.chill-wardrobe) { padding: 18px; }
body.ux-platform .chill-pet-caption { flex-wrap: wrap; align-items: flex-start; }
body.ux-platform .chill-section-head { flex-wrap: wrap; }
@container (max-width: 880px) {
  body.ux-platform .chill-home-grid,body.ux-platform .chill-companion-grid { grid-template-columns: 1fr; }
  body.ux-platform .chill-welcome-card { grid-template-columns: minmax(0,1fr) 200px; }
}
@container (max-width: 520px) {
  body.ux-platform .chill-welcome-card { grid-template-columns: 1fr; }
  body.ux-platform .chill-hero { flex-wrap: wrap; }
}
@media (max-width: 650px) {
  body.ux-platform .chill-nav { flex-wrap: wrap; overflow: visible; }
  body.ux-platform :is(.chill-room-card,.chill-care-card,.chill-wardrobe) { padding: 14px; }
}
.ux-platform .ux-account-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; order: -1; }
body.ux-platform .ux-back-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; flex-shrink:0; cursor:pointer; }
body.ux-platform .ux-back-button[hidden] { display:none !important; }
.ux-platform .ux-back-button span:first-child { font-size:1.2em; }
.ux-platform .ux-back-bar { display:flex; padding:12px 24px; border-bottom:1px solid var(--line,#334155); }
.ux-platform .ux-back-bar:has(.ux-back-button[hidden]) { display:none; }
.ux-platform .ux-back-button:focus-visible { outline:2px solid #67e8f9; outline-offset:3px; }
.ux-platform .ux-account-actions [data-account-link] { width: auto; }
.ux-platform .ux-account-actions [data-header-logout] { width: auto; min-width: 0; }
.ux-platform .ux-account-actions [data-header-logout][hidden] { display: none !important; }
.ux-platform .top-actions { margin-left: 0; }
.ux-single-quiz-nav .resource-nav-inner { grid-template-columns: auto minmax(0,1fr); }
.ux-single-quiz-nav .resource-nav .nav-tabs { justify-content: flex-end; }
.ux-platform .account-nav { flex-wrap: wrap; }
.ux-platform .account-session-actions #logoutButton { display: none; }
@media (max-width: 1150px) {
  .ux-single-quiz-nav .resource-nav .nav-tabs { justify-content: flex-start; }
}
@media (max-width: 650px) {
  .ux-single-quiz-nav .resource-nav-inner { grid-template-columns: 1fr; }
  .ux-single-quiz-nav .resource-nav .nav-tabs { width: 100%; }
  .ux-single-quiz-nav .resource-nav .ux-account-actions { justify-content: flex-start; }
}
@media (max-width: 850px) {
  body.ux-platform.account-page .account-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.ux-platform.account-page .account-session-actions { justify-content: flex-start; }
}

/* Typographie des commandes : même référence sur les modules et les ressources.
   Seules ces deux propriétés sont prioritaires ; les tailles des icônes et les
   lignes de code cliquables des exercices gardent leur présentation propre. */
:root { --hub-control-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --hub-control-font-size: 14px; }
body.ux-platform :is(button,input[type="submit"],input[type="button"],input[type="reset"],a.btn,a.button,a.navbtn,a.nav-action,a.primary-btn,a.secondary-btn,a.action-btn,a.hub-toolbar-btn,a.account-primary,a.account-secondary,a.account-danger,a[role="button"],a[data-account-link],a[data-course-tab]):not(.code-line) {
  font-family: var(--hub-control-font) !important;
  font-size: var(--hub-control-font-size) !important;
}

/* Les huit libellés de navigation mobile conservent leur format compact. */
@media(max-width:900px){body.ux-platform .ux-rail a.ux-rail-link,body.ux-platform .ux-rail button.ux-rail-link{font-size:.62rem!important;}}

/* La taille commune reste lisible : les actions passent à la ligne sur mobile. */
@media(max-width:900px){
 body.ux-platform .top .top-inner{flex-wrap:wrap;}
 body.ux-platform .top .top-inner>.ux-account-actions{flex-shrink:0;}
 body.ux-platform .top .top-inner>.actions,body.ux-platform .top .top-inner>.row{flex-wrap:wrap;min-width:0;}
 body.ux-platform .top .top-inner>.actions>.btn{flex:1 1 120px;}
}

/* Navigation mobile : une seule rangée, quel que soit le nombre de destinations. */
@media(max-width:900px){body.ux-platform .ux-rail .ux-rail-nav{display:flex!important;flex-wrap:nowrap;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity}body.ux-platform .ux-rail .ux-rail-link{flex:1 0 54px;min-width:54px;max-height:58px;box-sizing:border-box;white-space:nowrap;scroll-snap-align:center}body.ux-platform .ux-rail [data-ux-route="sheets"] span{font-size:0}body.ux-platform .ux-rail [data-ux-route="sheets"] span:after{content:'Fiches';font-size:.62rem}body.ux-platform .ux-rail-nav::-webkit-scrollbar{display:none}}

/* Libellé compact de l’accès direct aux quiz corrigés sur mobile. */
@media(max-width:900px){body.ux-platform .ux-rail [data-ux-route="corrected"] span{font-size:0}body.ux-platform .ux-rail [data-ux-route="corrected"] span:after{content:"Corrigés";font-size:.62rem}}

/* Le bouton du chat doit laisser la navigation mobile accessible. */
@media(max-width:900px){body.ux-platform .member-chat{bottom:84px}}
@media(max-width:520px){body.ux-platform .member-chat .chat-panel{bottom:84px}}

/* Navigation hiérarchisée : les raccourcis restent directs dans la barre mobile. */
.ux-course-progression{margin:20px 0;padding:18px 22px;background:var(--panel);border:1px solid var(--line);border-radius:16px;color:var(--text)}
.ux-course-progression summary,.ux-course-glossary summary{cursor:pointer;font-weight:750;line-height:1.6}
.ux-course-progression ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 24px;padding-left:24px;line-height:1.7}
.ux-course-progression a{color:var(--cyan)}
.ux-course-progression p{font-size:.88rem;line-height:1.6;color:var(--muted)}
.ux-course-glossary{margin:24px 0;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);min-width:0}
.ux-course-glossary p{line-height:1.7;font-size:.9rem;color:var(--muted)}
.ux-course-glossary a{display:inline-flex;padding:8px 12px;margin:5px 6px 5px 0;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:var(--cyan);line-height:1.5}
@media(max-width:900px){.ux-nav-group,.ux-nav-sub{display:contents}.ux-nav-group>summary,.ux-nav-extra{display:none}.ux-nav-sub .ux-rail-link{padding:6px 3px;font-size:.62rem}.ux-nav-sub .ux-rail-link svg{width:18px;height:18px}body.ux-platform .ux-rail [data-ux-route="courses"] span,body.ux-platform .ux-rail [data-ux-route="glossary"] span,body.ux-platform .ux-rail [data-ux-route="revision"] span{font-size:0}body.ux-platform .ux-rail [data-ux-route="courses"] span:after{content:'Cours';font-size:.62rem}body.ux-platform .ux-rail [data-ux-route="glossary"] span:after{content:'Glossaire';font-size:.62rem}body.ux-platform .ux-rail [data-ux-route="revision"] span:after{content:'Révisions';font-size:.62rem}.ux-course-progression ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.ux-course-progression{padding:16px}.ux-course-progression ol{grid-template-columns:1fr}.ux-course-glossary{padding:14px}}

@media(max-width:900px){body.ux-platform .ux-nav-group{display:none}body.ux-platform .ux-rail .ux-revision-link,body.ux-platform .ux-rail [data-ux-route="cheat"]{display:flex}body.ux-platform .ux-rail [data-ux-route="cheat"] span{font-size:0}body.ux-platform .ux-rail [data-ux-route="cheat"] span:after{content:"Mémo";font-size:.62rem}}

/* Sous-menus ferm?s au chargement ; ouverture uniquement au clic. */
.ux-nav-group{min-width:0;border:0;margin:0;padding:0}
.ux-rail .ux-nav-group>summary{display:flex;align-items:center;gap:11px;min-height:45px;padding:10px 12px;border:1px solid transparent;border-radius:10px;cursor:pointer;font-size:.83rem;font-weight:400;color:#d5def0;list-style:none}
.ux-nav-group>summary::-webkit-details-marker{display:none}
.ux-nav-group>summary svg{width:19px;height:19px;flex-shrink:0}
.ux-nav-group>summary i{margin-left:auto;font-style:normal;transition:transform .15s}
.ux-nav-group[open]>summary i{transform:rotate(180deg)}
.ux-nav-group.has-active>summary{color:var(--cyan);background:#84ddd00a}
.ux-nav-sub{display:grid;gap:3px;padding:4px 0 10px 8px;border-left:1px solid #b3a0ff24;margin-left:10px}
.ux-nav-sub .ux-rail-link{padding:8px;min-height:39px;font-size:.78rem;gap:8px}
.ux-nav-sub .ux-rail-link svg{width:15px;height:15px}
.ux-nav-extra{display:block;padding:8px 10px;color:var(--muted);text-decoration:none;font-size:.76rem;line-height:1.5;border-radius:7px}
.ux-nav-extra:hover,.ux-nav-extra:focus-visible{background:#ffffff08;color:var(--text)}

/* RESTORED_HEADER_WRAP */
@media(max-width:560px){body.ux-platform .top .top-inner>.ux-account-actions{flex-shrink:1;flex-basis:100%;max-width:100%;flex-wrap:wrap}}