:root {
  --bg: #06101d;
  --panel: #0d1b2e;
  --line: #213653;
  --text: #f4f8ff;
  --muted: #9db0c9;
  --blue: #69b7ff;
  --cyan: #66e3ff;
  --violet: #9f86ff;
  --green: #69e5a5;
  --amber: #ffd36e;
  --red: #ff7d93;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  background:
    radial-gradient(circle at 18% -10%, rgba(105, 183, 255, 0.17), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(159, 134, 255, 0.15), transparent 25%), var(--bg);
  color: var(--text);
  min-height: 100vh;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
.wrap {
  width: min(1320px, calc(100% - 24px));
  margin: auto;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 16, 29, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(33, 54, 83, 0.8);
}
.nav {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}
.brand {
  font-weight: 950;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.brand i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  color: #07111f;
  font-style: normal;
}
.nav nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.navbtn,
.back,
.btn {
  border: 1px solid var(--line);
  background: #0b1829;
  color: var(--text);
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 850;
}
.navbtn {
  color: var(--muted);
  border-radius: 999px;
}
.navbtn.active,
.btn.primary {
  background: linear-gradient(135deg, var(--blue), var(--violet));
  color: #07111f;
  border-color: transparent;
}
.hero {
  padding: 48px 0 24px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: 16px;
}
.hero-card,
.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16, 34, 58, 0.96), rgba(10, 22, 40, 0.96));
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.hero-card {
  padding: 24px;
}
.eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 900;
}
h1 {
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 0.96;
  margin: 10px 0 16px;
  max-width: 920px;
}
.lead {
  color: var(--muted);
  line-height: 1.7;
  max-width: 860px;
  margin: 0;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.kpi {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 16px;
  padding: 14px;
}
.kpi b {
  display: block;
  font-size: 1.5rem;
}
.kpi span,
.muted {
  color: var(--muted);
}
.level-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.level-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.level-badge {
  font-size: 2rem;
  font-weight: 950;
}
.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid #335077;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.72rem;
  color: #d5e3f5;
}
.bar {
  height: 10px;
  background: #1b2a42;
  border-radius: 99px;
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  width: 0;
}
.small {
  font-size: 0.84rem;
}
.home-tools {
  padding: 14px 0 56px;
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: end;
  flex-wrap: wrap;
  margin: 24px 0 14px;
}
.section-head h2 {
  margin: 0;
  font-size: 1.5rem;
}
.section-head p {
  margin: 4px 0 0;
  color: var(--muted);
}
.search,
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.field {
  border: 1px solid var(--line);
  background: #0a1728;
  color: var(--text);
  border-radius: 13px;
  padding: 11px 13px;
  outline: none;
}
.field:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(105, 183, 255, 0.12);
}
.modules,
.module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.module-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0f1e33, #0b1728);
  border-radius: 18px;
  padding: 16px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  transition: 0.2s;
}
.module-card:hover {
  transform: translateY(-2px);
  border-color: #3d5f89;
}
.module-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #132944;
  font-size: 1.25rem;
  margin-bottom: 12px;
}
.module-card h3 {
  margin: 0 0 7px;
  font-size: 1rem;
}
.module-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  flex: 1;
}
.tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.tag {
  border: 1px solid #2c4669;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 0.68rem;
  color: #c9d7ea;
}
.launch {
  margin-top: 12px;
  border: 1px solid rgba(105, 183, 255, 0.35);
  background: rgba(105, 183, 255, 0.1);
  color: #dcecff;
  border-radius: 11px;
  padding: 9px 10px;
  font-weight: 850;
}
.app {
  display: none;
  padding: 20px 0 60px;
}
.app.active {
  display: block;
}
.app-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 16px 0;
}
.app-title h2 {
  margin: 0 0 5px;
}
.app-title p {
  margin: 0;
  color: var(--muted);
}
.panel {
  padding: 18px;
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.btn.good {
  border-color: rgba(105, 229, 165, 0.5);
  background: rgba(105, 229, 165, 0.12);
}
.btn.warn {
  border-color: rgba(255, 211, 110, 0.5);
  background: rgba(255, 211, 110, 0.12);
}
.btn.bad {
  border-color: rgba(255, 125, 147, 0.5);
  background: rgba(255, 125, 147, 0.12);
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.big {
  font-size: 1.6rem;
  font-weight: 950;
}
.choice-grid {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}
.choice {
  border: 1px solid var(--line);
  background: #0b182a;
  color: var(--text);
  border-radius: 12px;
  padding: 12px;
  text-align: left;
}
.choice:hover {
  border-color: #476b96;
}
.choice.correct {
  border-color: var(--green);
  background: rgba(105, 229, 165, 0.11);
}
.choice.wrong {
  border-color: var(--red);
  background: rgba(255, 125, 147, 0.11);
}
.feedback {
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0a1728;
  line-height: 1.55;
}
.terminal {
  background: #03070c;
  border: 1px solid #1c3855;
  border-radius: 16px;
  overflow: hidden;
}
.term-top {
  padding: 10px 12px;
  border-bottom: 1px solid #18314b;
  background: #091321;
  color: #9fb6cf;
  font-size: 0.8rem;
}
.term-screen {
  height: 360px;
  overflow: auto;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  color: #c6f5d8;
  line-height: 1.45;
}
.term-input {
  display: flex;
  border-top: 1px solid #18314b;
}
.term-input span {
  padding: 11px;
  color: var(--cyan);
  font-family: monospace;
}
.term-input input {
  flex: 1;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 11px;
  outline: none;
  font-family: monospace;
}
.osi-layers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  margin-top: 14px;
}
.osi {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 8px;
  text-align: center;
  background: #0a1728;
  color: var(--text);
}
.osi strong {
  display: block;
  font-size: 0.78rem;
}
.osi span {
  font-size: 0.7rem;
  color: var(--muted);
}
.journey {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 8px 0;
}
.jstep {
  min-width: 130px;
  border: 1px solid var(--line);
  background: #0b182a;
  border-radius: 14px;
  padding: 12px;
}
.jstep.active {
  border-color: var(--cyan);
}
.jstep b {
  display: block;
  margin-bottom: 5px;
}
.jstep span {
  color: var(--muted);
  font-size: 0.78rem;
}
.ticket,
.email,
.case,
.calc-item,
.cheat,
.result-item,
.todo {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 14px;
  padding: 14px;
}
.permission {
  font-family: ui-monospace, monospace;
  font-size: 1.45rem;
  letter-spacing: 0.08em;
  padding: 18px;
  border-radius: 14px;
  background: #071321;
  border: 1px solid var(--line);
  text-align: center;
}
.flashcard {
  min-height: 220px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #11243c, #0a1728);
  border-radius: 20px;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
}
.flash-answer {
  display: none;
  margin-top: 16px;
  color: #d8e8fb;
  line-height: 1.6;
}
.flash-answer.show {
  display: block;
}
.bingo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.bcell {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 9px;
  padding: 6px;
  color: var(--text);
  font-size: 0.72rem;
  display: grid;
  place-items: center;
  text-align: center;
}
.bcell.on {
  background: rgba(105, 229, 165, 0.14);
  border-color: var(--green);
}
.calc-grid,
.calc-out {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.calc-out {
  margin-top: 14px;
}
.calc-item small {
  display: block;
  color: var(--muted);
  margin-bottom: 4px;
}
.cheats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cheat b {
  display: block;
  margin-bottom: 6px;
}
.cheat p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.84rem;
}
.timer {
  font-size: 3rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 20px;
}
.todo-list,
.result-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.todo {
  display: flex;
  gap: 10px;
  align-items: center;
}
.todo.done span {
  text-decoration: line-through;
  color: var(--muted);
}
.boss {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hp {
  height: 14px;
  background: #1e2b43;
  border-radius: 99px;
  overflow: hidden;
}
.hp i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--amber));
  width: 100%;
}
.hp.player i {
  background: linear-gradient(90deg, var(--green), var(--cyan));
}
.hidden {
  display: none !important;
}
hr.sep {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}
footer {
  border-top: 1px solid var(--line);
  padding: 24px 0 42px;
  color: var(--muted);
  font-size: 0.84rem;
}
@media (max-width: 1080px) {
  .modules,
  .module-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .kpis {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .modules,
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid2,
  .grid3,
  .boss {
    grid-template-columns: 1fr;
  }
  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .osi-layers {
    grid-template-columns: repeat(2, 1fr);
  }
  .cheats {
    grid-template-columns: 1fr;
  }
  .nav {
    align-items: flex-start;
    padding: 10px 0;
    flex-wrap: wrap;
  }
  .nav nav {
    display: flex;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .navbtn {
    flex: 0 0 auto;
  }
}
@media (max-width: 480px) {
  .wrap {
    width: min(100% - 16px, 1320px);
  }
  .modules,
  .module-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding-top: 28px;
  }
  .bingo {
    gap: 4px;
  }
  .bcell {
    font-size: 0.62rem;
  }
  .calc-grid,
  .calc-out {
    grid-template-columns: 1fr;
  }
  .kpis {
    grid-template-columns: 1fr 1fr;
  }
  .glossary-stats {
    grid-template-columns: 1fr 1fr;
  }
  .glossary-category-grid {
    grid-template-columns: 1fr;
  }
}

/* Organisation des modules */
.module-groups {
  display: grid;
  gap: 24px;
}
.module-group {
  display: grid;
  gap: 10px;
}
.module-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.module-group-head h3 {
  margin: 0;
  font-size: 1rem;
}
.module-group-head span {
  color: var(--muted);
  font-size: 0.78rem;
}
.empty-state {
  border: 1px dashed var(--line);
  border-radius: 18px;
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

/* Glossaire intégré */
.glossary-shell {
  display: grid;
  gap: 14px;
}
.glossary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.glossary-stat {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 15px;
  padding: 14px;
}
.glossary-stat b {
  display: block;
  font-size: 1.35rem;
}
.glossary-stat span {
  color: var(--muted);
  font-size: 0.78rem;
}
.glossary-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(220px, 0.9fr) auto;
  gap: 10px;
  align-items: center;
}
.glossary-toolbar .field {
  width: 100%;
}
.glossary-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.glossary-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.glossary-cat-card {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 15px;
  padding: 14px;
  text-align: left;
  color: var(--text);
  transition: 0.18s;
}
.glossary-cat-card:hover {
  border-color: #486f9d;
  transform: translateY(-1px);
}
.glossary-cat-card b {
  display: block;
  line-height: 1.35;
  margin-bottom: 8px;
}
.glossary-cat-card span {
  color: var(--muted);
  font-size: 0.76rem;
}
.glossary-results {
  display: grid;
  gap: 8px;
}
.glossary-entry {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 13px;
  overflow: hidden;
}
.glossary-entry summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 14px;
  font-weight: 850;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.glossary-entry summary::-webkit-details-marker {
  display: none;
}
.glossary-entry summary::after {
  content: '+';
  color: var(--cyan);
  font-weight: 900;
}
.glossary-entry[open] summary::after {
  content: '−';
}
.glossary-entry .definition {
  border-top: 1px solid var(--line);
  padding: 13px 14px;
  color: #d7e3f2;
  line-height: 1.62;
  white-space: pre-line;
}
.glossary-entry .entry-cat {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}
.glossary-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 8px;
}
.glossary-section-title h3 {
  margin: 0;
  font-size: 1rem;
}
.memo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.memo-card {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 15px;
  padding: 14px;
}
.memo-card h4 {
  margin: 0 0 10px;
}
.memo-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.memo-table-wrap {
  overflow-x: auto;
}
.memo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.memo-table th,
.memo-table td {
  border: 1px solid var(--line);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}
.memo-table th {
  background: #10253e;
  color: #dcecff;
}
.memo-list {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}
.glossary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.load-more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .glossary-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .glossary-toolbar .btn {
    grid-column: 1/-1;
  }
  .glossary-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .memo-grid {
    grid-template-columns: 1fr;
  }
}
.source-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.source-list a {
  display: block;
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--text);
  text-decoration: none;
}
.source-list a:hover {
  border-color: #486f9d;
}
.source-list a b {
  display: block;
  font-size: 0.84rem;
  line-height: 1.4;
}
.source-list a span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

/* Finition générale & outils permanents */
.kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.nav nav {
  align-items: center;
}
.navbtn {
  transition:
    border-color 0.18s,
    background 0.18s,
    color 0.18s,
    transform 0.18s;
}
.navbtn:hover {
  border-color: #456b96;
  color: #e7f1ff;
  transform: translateY(-1px);
}
.module-group-head h3 {
  letter-spacing: 0.01em;
}
.module-card {
  isolation: isolate;
}
.module-card .launch {
  transition: 0.18s;
}
.module-card .launch:hover {
  border-color: var(--blue);
  background: rgba(105, 183, 255, 0.17);
}
.todo-filter.active {
  border-color: var(--blue);
  background: rgba(105, 183, 255, 0.14);
  color: var(--text);
}

/* Planning */
.planner-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.35fr);
  gap: 14px;
  align-items: start;
}
.todo-main {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.todo-main span {
  overflow-wrap: anywhere;
}
.todo-main small {
  color: var(--muted);
  font-size: 0.72rem;
}
.todo input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  flex: 0 0 auto;
}
.todo-filters .btn {
  padding: 7px 10px;
}

/* GLPI */
.glpi-shell {
  max-width: 1050px;
  margin: auto;
}
.glpi-top {
  justify-content: space-between;
  align-items: flex-start;
}
.glpi-grid label {
  display: grid;
  gap: 7px;
  color: #d9e7f7;
  font-size: 0.84rem;
  font-weight: 750;
}
.glpi-grid .field {
  width: 100%;
}

/* Bloc-notes personnel */
.notes-layout {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.notes-sidebar {
  position: sticky;
  top: 84px;
}
.note-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 540px;
  overflow: auto;
  padding-right: 2px;
}
.note-item {
  border: 1px solid var(--line);
  background: #0a1728;
  color: var(--text);
  border-radius: 13px;
  padding: 11px 12px;
  text-align: left;
  display: grid;
  gap: 5px;
  transition: 0.16s;
}
.note-item:hover {
  border-color: #41658e;
}
.note-item.active {
  border-color: var(--blue);
  background: rgba(105, 183, 255, 0.1);
}
.note-item b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-item span {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-editor {
  min-height: 590px;
  display: flex;
  flex-direction: column;
}
.note-editor-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.note-title {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 900;
  outline: none;
  padding: 5px 2px;
}
.note-title:focus {
  box-shadow: inset 0 -2px 0 rgba(105, 183, 255, 0.5);
}
.note-body {
  width: 100%;
  flex: 1;
  min-height: 470px;
  resize: vertical;
  margin-top: 12px;
  border: 1px solid var(--line);
  background: #071321;
  color: #e8f1fc;
  border-radius: 14px;
  padding: 16px;
  outline: none;
  line-height: 1.65;
  font-family: inherit;
}
.note-body:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(105, 183, 255, 0.1);
}
.note-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.dashboard-stats .panel {
  min-height: 130px;
}

@media (max-width: 980px) {
  .grid4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .planner-layout,
  .notes-layout {
    grid-template-columns: 1fr;
  }
  .notes-sidebar {
    position: static;
  }
  .note-editor {
    min-height: 520px;
  }
  .note-body {
    min-height: 380px;
  }
}
@media (max-width: 560px) {
  .grid4 {
    grid-template-columns: 1fr;
  }
  .note-editor-top {
    align-items: flex-start;
    flex-direction: column;
  }
  .note-editor-top .row {
    width: 100%;
    justify-content: space-between;
  }
  .note-title {
    width: 100%;
  }
  .note-footer {
    flex-direction: column;
  }
  .kpis {
    grid-template-columns: 1fr 1fr;
  }
}

/* Parcours enrichis */
.level-dots {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.level-dots i {
  display: block;
  width: 34px;
  height: 7px;
  border-radius: 99px;
  background: #1b2a42;
  border: 1px solid var(--line);
}
.level-dots i.done {
  background: var(--green);
  border-color: transparent;
}
.level-dots i.active {
  background: linear-gradient(90deg, var(--blue), var(--violet));
  border-color: transparent;
}
.level-track {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.level-track span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #0a1728;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}
.level-track span.done {
  border-color: rgba(105, 229, 165, 0.55);
  background: rgba(105, 229, 165, 0.12);
  color: var(--green);
}
.level-track span.active {
  border-color: var(--blue);
  background: rgba(105, 183, 255, 0.15);
  color: #fff;
}
.completion-card {
  max-width: 760px;
  margin: auto;
}
.progress-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.progress-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.6fr) minmax(200px, 1fr);
  align-items: center;
  gap: 14px;
}
.progress-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.progress-row small {
  color: var(--muted);
}
details.feedback summary {
  cursor: pointer;
  font-weight: 850;
}
.email {
  border: 1px solid var(--line);
  background: #f7fafc;
  color: #142033;
  border-radius: 18px;
  padding: 18px;
  line-height: 1.6;
}
.email .badge {
  color: #24364d;
  border-color: #9db0c9;
}
.osi.correct {
  border-color: var(--green);
  background: rgba(105, 229, 165, 0.12);
}
.osi.wrong {
  border-color: var(--red);
  background: rgba(255, 125, 147, 0.12);
}
@media (max-width: 760px) {
  .progress-row {
    grid-template-columns: 1fr;
  }
  .progress-row > div:first-child {
    align-items: flex-start;
  }
  .level-track {
    gap: 4px;
  }
  .level-track span {
    width: 25px;
    height: 25px;
  }
}

/* lisibilité des types, TSSR Lab, Ports et Cheat Sheet */
.quiz-intro {
  margin-bottom: 10px;
}
.lab-shell {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.4fr);
  gap: 14px;
  align-items: start;
}
.lab-guide {
  position: sticky;
  top: 82px;
}
.hint-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.hint-item {
  border: 1px solid rgba(255, 211, 110, 0.35);
  background: rgba(255, 211, 110, 0.07);
  border-radius: 11px;
  padding: 9px 11px;
  color: #f6e5b7;
  line-height: 1.45;
}
.hint-item b {
  margin-right: 6px;
}
.term-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.term-mini {
  border: 1px solid #284764;
  background: #0c1b2d;
  color: #d9e9fb;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 0.72rem;
}
.term-screen {
  height: 430px;
}
.mode-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.mode-tabs .btn.primary {
  box-shadow: 0 0 0 3px rgba(105, 183, 255, 0.08);
}
.port-learn {
  max-width: 760px;
  margin: auto;
  text-align: center;
}
.port-number {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 950;
  letter-spacing: -0.04em;
  margin: 16px 0;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cheat-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(200px, 0.7fr);
  gap: 10px;
  margin-top: 14px;
}
.cheat .tag {
  display: inline-flex;
  margin-bottom: 8px;
}
.cheat b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.module-card .tags {
  min-height: 24px;
}
.module-card .tag {
  border-color: #3a5b82;
  color: #d7e7fb;
}
.module-card h3 {
  line-height: 1.35;
}
.app-title h2 {
  line-height: 1.25;
}
.panel code,
.feedback code,
.small code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #071321;
  border: 1px solid var(--line);
  padding: 2px 5px;
  border-radius: 6px;
  color: #d9efff;
}
.timer + .row {
  margin-top: 4px;
}
@media (max-width: 900px) {
  .lab-shell {
    grid-template-columns: 1fr;
  }
  .lab-guide {
    position: static;
  }
  .term-screen {
    height: 360px;
  }
  .cheat-toolbar {
    grid-template-columns: 1fr;
  }
}

/* historique de corrections, glossaire maîtrisé & finition */
.app-head {
  align-items: center;
}
.app-title {
  min-width: 0;
  flex: 1;
}
.module-review-btn {
  margin-left: auto;
  white-space: nowrap;
  border-color: #36577f;
  background: rgba(105, 183, 255, 0.09);
}
.module-review-btn:hover {
  border-color: var(--blue);
  background: rgba(105, 183, 255, 0.16);
}
.review-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 16px;
}
.review-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 6, 14, 0.78);
  backdrop-filter: blur(7px);
}
.review-sheet {
  position: relative;
  width: min(980px, 100%);
  max-height: min(86vh, 900px);
  overflow: auto;
  border: 1px solid #315078;
  background: linear-gradient(180deg, #0e1e33, #071321);
  border-radius: 22px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.55);
  padding: 18px;
}
.review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  position: sticky;
  top: -18px;
  z-index: 2;
  background: linear-gradient(180deg, #0e1e33 78%, rgba(14, 30, 51, 0));
  padding: 18px 0 16px;
}
.review-head h3 {
  margin: 0 0 4px;
}
.review-filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}
.review-filters .btn {
  padding: 7px 10px;
}
.review-filters .btn.active {
  border-color: var(--blue);
  background: rgba(105, 183, 255, 0.15);
}
.review-content {
  display: grid;
  gap: 9px;
}
.review-item {
  border: 1px solid var(--line);
  background: #091727;
  border-radius: 14px;
  padding: 13px;
  line-height: 1.5;
}
.review-item.review-ok {
  border-left: 4px solid var(--green);
}
.review-item.review-wrong {
  border-left: 4px solid var(--red);
}
.review-item h4 {
  margin: 0 0 7px;
  font-size: 0.96rem;
}
.review-item p {
  margin: 5px 0;
  color: #d9e5f3;
}
.review-item small {
  color: var(--muted);
}
.review-answer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}
.review-answer > div {
  border: 1px solid var(--line);
  background: #071321;
  border-radius: 10px;
  padding: 9px;
}
.review-answer b {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 3px;
}
.mono-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.mastery-gloss-toolbar {
  grid-template-columns: minmax(280px, 1.5fr) minmax(190px, 0.7fr) minmax(170px, 0.55fr) auto;
}
.gloss-search-wrap {
  position: relative;
  min-width: 0;
}
.gloss-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  border: 1px solid #315078;
  background: #071321;
  border-radius: 13px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.gloss-suggest:empty {
  display: none;
}
.gloss-suggest button {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
}
.gloss-suggest button:last-child {
  border-bottom: 0;
}
.gloss-suggest button:hover,
.gloss-suggest button:focus {
  background: rgba(105, 183, 255, 0.12);
  outline: none;
}
.gloss-suggest b {
  display: block;
}
.gloss-suggest span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alpha-index {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.alpha-btn {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  background: #091727;
  color: #cfdded;
  border-radius: 9px;
  font-weight: 850;
  font-size: 0.76rem;
}
.alpha-btn:hover {
  border-color: var(--blue);
  background: rgba(105, 183, 255, 0.12);
}
.mastery-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  background: #091727;
  border-radius: 12px;
  padding: 9px 11px;
  margin-top: 10px;
}
.mastery-summary.is-mastered {
  border-color: rgba(105, 229, 165, 0.52);
  background: rgba(105, 229, 165, 0.08);
}
.master-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #dce8f6;
  cursor: pointer;
}
.master-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--green);
}
.glossary-entry.is-mastered {
  border-color: rgba(105, 229, 165, 0.38);
}
.glossary-entry.is-mastered summary::after {
  color: var(--green);
}
.glossary-entry mark {
  background: rgba(255, 211, 110, 0.22);
  color: #fff3cb;
  border-radius: 3px;
  padding: 0 2px;
}
.flash-review-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.flash-review-item {
  border: 1px solid var(--line);
  background: #091727;
  border-radius: 13px;
  padding: 12px;
}
.flash-review-item h4 {
  margin: 0 0 5px;
}
.flash-review-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.incident-step {
  border-left: 3px solid #315078;
  padding-left: 12px;
}
.incident-step.done {
  border-color: var(--green);
}
.lab-correction {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.mastery-stat-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.mastery-stat-row .badge {
  font-size: 0.76rem;
}
.panel kbd,
.feedback kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border: 1px solid #375477;
  border-bottom-width: 2px;
  background: #081525;
  color: #e7f2ff;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.78rem;
}
@media (max-width: 900px) {
  .mastery-gloss-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .mastery-gloss-toolbar .gloss-search-wrap {
    grid-column: 1/-1;
  }
  .review-answer {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .app-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .module-review-btn {
    width: 100%;
    margin-left: 0;
  }
  .mastery-gloss-toolbar {
    grid-template-columns: 1fr;
  }
  .mastery-gloss-toolbar .gloss-search-wrap {
    grid-column: auto;
  }
  .review-sheet {
    padding: 14px;
  }
  .review-head {
    top: -14px;
    padding-top: 14px;
  }
  .alpha-btn {
    width: 29px;
    height: 29px;
  }
  .mastery-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Ports & permissions Linux */
.format-help {
  border-color: rgba(102, 227, 255, 0.28);
  background: rgba(102, 227, 255, 0.07);
}
.perm-guide {
  display: grid;
  gap: 8px;
  color: var(--muted);
  line-height: 1.55;
}
.perm-guide p {
  margin: 0;
}
.perm-guide code,
.mono-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.mode-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.port-number {
  font-size: clamp(3rem, 9vw, 6rem);
  font-weight: 950;
  letter-spacing: -0.04em;
  margin: 18px 0 4px;
}
.port-learn {
  max-width: 760px;
  margin: auto;
}
.completion-card details.feedback summary {
  cursor: pointer;
}
.result-item b {
  line-height: 1.45;
}

/* espace permanent « À revoir » */
.review-hub-review {
  display: grid;
  gap: 14px;
}
.review-review-stats {
  margin-top: 14px;
}
.review-review-toolbar {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 74px;
  z-index: 12;
}
.review-source-tabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.review-source-tabs .btn.active {
  border-color: var(--blue);
  background: rgba(105, 183, 255, 0.15);
  color: var(--text);
}
.review-review-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(220px, 0.7fr) auto;
  gap: 9px;
}
.review-review-section {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.review-section-head {
  justify-content: space-between;
  align-items: flex-start;
}
.review-section-head h3 {
  margin: 5px 0 0;
}
.review-review-card h4 {
  margin: 8px 0 4px;
}
.review-review-card > .row:first-child > div {
  min-width: 0;
}
.review-card-actions {
  margin-top: 10px;
}
.review-review-card .badge {
  max-width: 100%;
}
.review-review-card small {
  display: block;
  margin-top: 3px;
}
.review-review-card p {
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .review-review-toolbar {
    position: static;
  }
  .review-review-filters {
    grid-template-columns: 1fr;
  }
  .review-source-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .review-source-tabs .btn {
    width: 100%;
  }
  .review-card-actions .btn {
    flex: 1 1 180px;
  }
}
@media (max-width: 460px) {
  .review-source-tabs {
    grid-template-columns: 1fr;
  }
  .review-card-actions {
    display: grid;
  }
  .review-card-actions .btn {
    width: 100%;
  }
}

/* Ports & services / Phishing enrichi */
.port-practice-card {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 18px;
  padding: 18px;
}
.port-practice-facts {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  margin: 12px 0;
}
.port-practice-facts > div {
  border: 1px solid var(--line);
  background: #071321;
  border-radius: 13px;
  padding: 12px;
}
.port-practice-facts span,
.phish-practice-analysis span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.phish-practice-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}
.phish-practice-analysis {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.phish-practice-analysis > div {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.phish-practice-analysis p {
  margin: 0;
  line-height: 1.55;
}
.phish-practice-analysis ul {
  margin: 4px 0 0;
  padding-left: 20px;
}
.phish-practice-analysis li {
  margin: 3px 0;
}
.choice[data-v='verify'] {
  border-color: rgba(255, 211, 110, 0.45);
  background: rgba(255, 211, 110, 0.08);
}
@media (max-width: 760px) {
  .port-practice-facts {
    grid-template-columns: 1fr;
  }
  .phish-practice-head {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ========================================================================== */
/* identité visuelle alignée sur la Bibliothèque de cours & révisions    */
/* ========================================================================== */
:root {
  --bg: #0b0d16;
  --panel: #121522;
  --panel-2: #171a2b;
  --panel-3: #1e2236;
  --line: rgba(255, 255, 255, 0.09);
  --text: #f7f7fb;
  --muted: #a8aec3;
  --pink: #ffacd7;
  --blue: #acacff;
  --violet: #acacff;
  --cyan: #9de7ff;
  --green: #9df3c7;
  --amber: #ffd36e;
  --red: #ff8fa3;
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
  --radius: 22px;
}
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 172, 215, 0.12), transparent 26rem),
    radial-gradient(circle at 88% 4%, rgba(172, 172, 255, 0.13), transparent 30rem),
    linear-gradient(180deg, #0a0c14 0%, #0d101a 48%, #090b12 100%);
  color: var(--text);
}
.wrap {
  width: min(1500px, calc(100% - 34px));
}
.topbar {
  background: rgba(10, 12, 20, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.nav {
  min-height: 68px;
}
.brand {
  letter-spacing: -0.01em;
}
.brand i {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #0b0d16;
  box-shadow: 0 8px 26px rgba(172, 172, 255, 0.16);
}
.navbtn,
.back,
.btn {
  border: 1px solid var(--line);
  background: #141827;
  color: #d7dbea;
  border-radius: 12px;
  transition: 0.18s;
}
.navbtn {
  border-radius: 999px;
  color: #aeb5ca;
}
.navbtn:hover,
.back:hover,
.btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.navbtn.active,
.btn.primary {
  background: linear-gradient(90deg, var(--pink), var(--violet));
  color: #0d1018;
  border-color: transparent;
  box-shadow: none;
}

/* Hero : même logique que la bibliothèque */
.hero-wrap {
  padding: 30px 0 18px;
}
.library-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 34px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  box-shadow: var(--shadow);
}
.library-hero::after {
  content: '';
  position: absolute;
  inset: auto -80px -110px auto;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.23), rgba(172, 172, 255, 0.16));
  filter: blur(15px);
  pointer-events: none;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d9dbeb;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pink), var(--violet));
}
.library-hero h1 {
  font-size: clamp(2.4rem, 5vw, 5.2rem);
  line-height: 0.94;
  margin: 12px 0 16px;
  letter-spacing: -0.055em;
  max-width: 1000px;
}
.library-hero h1 span {
  background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.library-hero .lead {
  max-width: 900px;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.7;
  margin: 0;
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  position: relative;
  z-index: 1;
}
.stat {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.16);
  padding: 10px 13px;
  border-radius: 999px;
  color: #d8dced;
  font-size: 0.87rem;
}
.stat strong {
  color: #fff;
}
.hero-progress {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(240px, 1.2fr);
  gap: 18px;
  align-items: end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.hero-progress-copy {
  display: grid;
  gap: 4px;
  color: #d8dced;
  font-size: 0.82rem;
}
.hero-progress-copy small {
  color: var(--muted);
}
.bar {
  height: 7px;
  background: #25293b;
  border-radius: 20px;
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  border-radius: inherit;
  transition: width 0.25s;
}

.home-tools {
  padding: 0 0 56px;
}
.library-section-head {
  margin: 22px 0 10px;
  align-items: flex-end;
}
.library-section-head .eyebrow {
  margin-bottom: 7px;
  color: #d9dbeb;
}
.library-section-head h2 {
  font-size: 1.55rem;
  margin: 0;
}
.library-section-head p {
  max-width: 920px;
}

/* Barre recherche / filtres */
.hub-toolbar {
  position: sticky;
  top: 78px;
  z-index: 20;
  margin: 14px 0 24px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(13, 16, 26, 0.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
}
.hub-toolbar-top {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.search-wrap {
  position: relative;
}
.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1.1rem;
  pointer-events: none;
}
#moduleSearch {
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  outline: none;
  background: #0f1220;
  color: #fff;
  padding: 0 15px 0 42px;
}
#moduleSearch:focus {
  border-color: rgba(172, 172, 255, 0.7);
  box-shadow: 0 0 0 4px rgba(172, 172, 255, 0.09);
}
.hub-toolbar-summary {
  min-width: 235px;
  color: var(--muted);
  font-size: 0.74rem;
  display: grid;
  gap: 4px;
  text-align: right;
}
.hub-toolbar-summary strong {
  color: #fff;
  font-size: 0.8rem;
}
.hub-filter-select {
  display: none;
}
.hub-filter-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-top: 12px;
  scrollbar-width: thin;
}
.hub-filter-pill {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #141827;
  color: #c6cad9;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 0.79rem;
  cursor: pointer;
  transition: 0.18s;
}
.hub-filter-pill span {
  color: #838aa1;
  margin-right: 5px;
  font-size: 0.68rem;
}
.hub-filter-pill:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.hub-filter-pill.active {
  color: #0d1018;
  border-color: transparent;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  font-weight: 800;
}
.hub-filter-pill.active span {
  color: #0d1018;
  opacity: 0.72;
}

/* Catégories et modules : même langage de cartes que la bibliothèque */
.library-module-groups {
  display: block;
}
.hub-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.hub-category {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 26, 43, 0.96), rgba(14, 17, 28, 0.96));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}
.hub-category-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: start;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.06), rgba(172, 172, 255, 0.055));
}
.hub-category-index {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #0b0d16;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  font-weight: 900;
  font-size: 0.82rem;
}
.hub-category-copy h2 {
  font-size: 1rem;
  line-height: 1.2;
  margin: 1px 0 4px;
  letter-spacing: -0.015em;
}
.hub-category-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}
.hub-category-count {
  font-size: 0.72rem;
  color: #c1c5d5;
  border: 1px solid var(--line);
  padding: 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.hub-resource-list {
  padding: 7px;
}
.hub-resource + .hub-resource {
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}
.hub-resource-open {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: center;
  min-height: 86px;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  color: inherit;
  text-align: left;
  transition: 0.18s;
}
.hub-resource-open:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}
.hub-resource-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.12), rgba(172, 172, 255, 0.13));
  border: 1px solid var(--line);
  font-size: 1.05rem;
}
.hub-resource-main {
  display: block;
  min-width: 0;
  position: relative;
}
.hub-resource-number {
  display: block;
  color: #717991;
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.hub-resource-title {
  display: block;
  color: #f1f3fa;
  font-size: 0.88rem;
  line-height: 1.35;
  font-weight: 700;
}
.hub-resource-desc {
  display: block;
  margin-top: 4px;
  color: #9fa6bb;
  font-size: 0.73rem;
  line-height: 1.45;
}
.hub-resource-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
  flex-wrap: wrap;
}
.hub-kind {
  font-size: 0.65rem;
  color: #aeb5cc;
  background: #24293b;
  border: 1px solid var(--line);
  padding: 3px 6px;
  border-radius: 6px;
}
.hub-open-label {
  font-size: 0.68rem;
  color: #8d95ad;
  transition: 0.18s;
}
.hub-resource-open:hover .hub-open-label {
  color: var(--violet);
}
.hub-resource-arrow {
  color: #737b93;
  font-size: 1.35rem;
  text-align: center;
  transition: 0.18s;
}
.hub-resource-open:hover .hub-resource-arrow {
  color: var(--violet);
  transform: translateX(2px);
}
.library-empty {
  margin: 24px 0;
  padding: 34px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  text-align: center;
  color: var(--muted);
}

/* Vue d’un module */
.app {
  padding: 24px 0 60px;
}
.app-head {
  margin: 6px 0 16px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(18, 21, 34, 0.76);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
}
.app-title h2 {
  letter-spacing: -0.02em;
}
.back {
  background: #141827;
}
.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(23, 26, 43, 0.96), rgba(14, 17, 28, 0.96));
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}
.field,
.choice,
.feedback,
.ticket,
.case,
.calc-item,
.cheat,
.result-item,
.todo,
.glossary-stat,
.glossary-cat-card,
.memo-card,
.glossary-entry,
.review-item,
.flash-review-item,
.port-practice-card {
  background: #111522;
  border-color: var(--line);
}
.choice:hover {
  border-color: rgba(172, 172, 255, 0.42);
}
.module-review-btn,
.launch {
  border-color: rgba(172, 172, 255, 0.24);
  background: rgba(172, 172, 255, 0.06);
  color: #dedfff;
}
.module-review-btn:hover,
.launch:hover {
  border-color: rgba(172, 172, 255, 0.44);
  background: rgba(172, 172, 255, 0.11);
}
.badge,
.tag,
.module-card .tag {
  border-color: rgba(255, 255, 255, 0.12);
  color: #cdd1df;
  background: rgba(255, 255, 255, 0.025);
}
.review-sheet {
  background: linear-gradient(180deg, #171a2b, #0e111c);
  border-color: rgba(172, 172, 255, 0.22);
}
.review-head {
  background: linear-gradient(180deg, #171a2b 78%, rgba(23, 26, 43, 0));
}
.gloss-suggest {
  background: #111522;
  border-color: rgba(172, 172, 255, 0.22);
}
.alpha-btn {
  background: #141827;
}
.alpha-btn:hover,
.review-filters .btn.active,
.review-source-tabs .btn.active {
  border-color: var(--violet);
  background: rgba(172, 172, 255, 0.09);
}
.port-number {
  background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.term-input span {
  color: var(--cyan);
}
footer {
  border-top: 1px solid var(--line);
  color: #7f879e;
}

@media (max-width: 980px) {
  .hub-category-grid {
    grid-template-columns: 1fr;
  }
  .hub-toolbar-top {
    grid-template-columns: 1fr;
  }
  .hub-toolbar-summary {
    text-align: left;
    min-width: 0;
  }
}
@media (max-width: 760px) {
  .wrap {
    width: min(100% - 20px, 1500px);
  }
  .hero-wrap {
    padding-top: 12px;
  }
  .library-hero {
    padding: 24px 20px;
    border-radius: 22px;
  }
  .library-hero h1 {
    font-size: clamp(2.4rem, 13vw, 4rem);
  }
  .hero-progress {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .hub-toolbar {
    top: 112px;
    border-radius: 18px;
  }
  .hub-filter-pills {
    display: none;
  }
  .hub-filter-select {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: #0f1220;
  }
  .hub-category-heading {
    grid-template-columns: auto 1fr;
  }
  .hub-category-count {
    grid-column: 2;
    justify-self: start;
  }
  .hub-resource-open {
    grid-template-columns: 38px minmax(0, 1fr) 20px;
  }
  .hub-resource-desc {
    font-size: 0.72rem;
  }
  .hub-open-label {
    display: none;
  }
}
@media (max-width: 480px) {
  .hero-stats {
    gap: 7px;
  }
  .stat {
    font-size: 0.78rem;
    padding: 8px 10px;
  }
  .hub-resource-open {
    min-height: 78px;
    padding: 9px 5px;
  }
  .hub-resource-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
}

/* navigation accordéon des modules */
.hub-toolbar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  flex-wrap: wrap;
}
.hub-toolbar-controls .hub-filter-select {
  display: block;
  width: min(360px, 100%);
  margin: 0;
  background: #0f1220;
}
.hub-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hub-toolbar-btn {
  border: 1px solid var(--line);
  background: #141827;
  color: #cdd1df;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 0.77rem;
  font-weight: 750;
  transition: 0.18s;
}
.hub-toolbar-btn:hover {
  color: #fff;
  border-color: rgba(172, 172, 255, 0.38);
  background: rgba(172, 172, 255, 0.08);
  transform: translateY(-1px);
}
.hub-filter-pills {
  display: none !important;
}
.hub-accordion-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
.hub-accordion {
  overflow: hidden;
}
.hub-category-toggle {
  width: 100%;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  transition:
    background 0.18s,
    border-color 0.18s;
}
.hub-category-toggle:hover {
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.085), rgba(172, 172, 255, 0.075));
}
.hub-category-copy {
  display: block;
  min-width: 0;
}
.hub-category-title {
  display: block;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #f5f6fb;
}
.hub-category-desc {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}
.hub-category-chevron {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: #aeb5cc;
  font-size: 1.05rem;
  transition:
    transform 0.22s,
    color 0.18s,
    background 0.18s;
}
.hub-category.open .hub-category-chevron {
  transform: rotate(180deg);
  color: #0d1018;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  border-color: transparent;
}
.hub-category-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.24s ease;
  border-top: 0 solid var(--line);
}
.hub-category.open .hub-category-body {
  grid-template-rows: 1fr;
  border-top-width: 1px;
}
.hub-category-body-inner {
  min-height: 0;
  overflow: hidden;
}
.hub-category.open .hub-category-heading {
  border-bottom: 0;
}
.hub-resource-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  padding: 7px 12px 10px;
}
.hub-resource {
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}
.hub-resource:nth-child(-n + 2) {
  border-top-color: transparent;
}
.hub-resource + .hub-resource {
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}
.hub-resource:nth-child(2) {
  border-top-color: transparent;
}
.hub-resource-open {
  min-height: 84px;
}

@media (max-width: 760px) {
  .hub-toolbar-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .hub-toolbar-controls .hub-filter-select {
    width: 100%;
    margin: 0;
  }
  .hub-toolbar-actions {
    width: 100%;
  }
  .hub-toolbar-btn {
    flex: 1;
  }
  .hub-category-toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .hub-category-count {
    grid-column: auto;
    justify-self: auto;
  }
  .hub-category-chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .hub-category-count {
    display: none;
  }
  .hub-resource-list {
    grid-template-columns: 1fr;
    padding: 6px 8px 9px;
  }
  .hub-resource:nth-child(2) {
    border-top-color: rgba(255, 255, 255, 0.045);
  }
  .hub-category-desc {
    font-size: 0.72rem;
  }
}
@media (max-width: 480px) {
  .hub-category-heading {
    padding: 14px 12px;
  }
  .hub-category-index {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .hub-category-title {
    font-size: 0.9rem;
  }
  .hub-category-chevron {
    width: 28px;
    height: 28px;
  }
}

/* ===== Anglais IT progressif ===== */
.english-english-intro {
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(255, 172, 215, 0.055),
    rgba(172, 172, 255, 0.045),
    rgba(157, 231, 255, 0.025)
  );
}
.english-english-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}
.english-english-hero h3 {
  margin: 6px 0 10px;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  letter-spacing: -0.025em;
}
.english-english-hero p {
  max-width: 900px;
  line-height: 1.65;
}
.english-english-total {
  min-width: 118px;
  min-height: 104px;
  border: 1px solid rgba(172, 172, 255, 0.18);
  border-radius: 22px;
  background: rgba(10, 12, 20, 0.35);
  display: grid;
  place-items: center;
  align-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.english-english-total strong {
  font-size: 2.25rem;
  line-height: 1;
  background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.english-english-total span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.english-support-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.english-support-pill {
  border: 1px solid var(--line);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #d7daea;
  background: rgba(0, 0, 0, 0.18);
}
.english-support-pill.easy {
  border-color: rgba(157, 243, 199, 0.2);
  background: rgba(157, 243, 199, 0.055);
  color: #dff9eb;
}
.english-support-pill.transition {
  border-color: rgba(157, 231, 255, 0.2);
  background: rgba(157, 231, 255, 0.055);
  color: #dff8ff;
}
.english-support-pill.advanced {
  border-color: rgba(172, 172, 255, 0.22);
  background: rgba(172, 172, 255, 0.06);
  color: #e2e2ff;
}
.english-level-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.english-level-card {
  appearance: none;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(22, 25, 40, 0.95), rgba(15, 18, 29, 0.96));
  color: var(--text);
  padding: 16px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  gap: 13px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  transition:
    0.18s transform,
    0.18s border-color,
    0.18s background;
}
.english-level-card:hover {
  transform: translateY(-2px);
  border-color: rgba(172, 172, 255, 0.28);
  background: linear-gradient(180deg, rgba(28, 31, 49, 0.98), rgba(17, 20, 32, 0.98));
}
.english-level-num {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #0b0d16;
  font-size: 0.78rem;
  font-weight: 950;
}
.english-level-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.english-level-kicker {
  color: #878fa9;
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.english-level-content strong {
  font-size: 0.95rem;
  line-height: 1.25;
}
.english-level-content small {
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.45;
}
.english-level-content em {
  font-style: normal;
  color: var(--violet);
  font-size: 0.68rem;
  font-weight: 800;
  margin-top: 2px;
}
.english-level-arrow {
  font-size: 1.35rem;
  color: #737c98;
  justify-self: end;
}
.english-english-note {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(157, 231, 255, 0.12);
  border-radius: 15px;
  background: rgba(157, 231, 255, 0.035);
  color: #9ea6bd;
  font-size: 0.76rem;
  line-height: 1.5;
}
.english-english-note b {
  color: #eaf8ff;
}
.english-quiz-panel {
  max-width: 980px;
  margin: 0 auto;
}
.english-quiz-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.english-progress {
  margin: 14px 0 20px;
}
.english-question {
  font-size: clamp(1.15rem, 2.45vw, 1.65rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  margin: 6px 0 12px;
}
.english-translation {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 15px;
  border: 1px solid rgba(157, 231, 255, 0.13);
  background: linear-gradient(135deg, rgba(157, 231, 255, 0.045), rgba(172, 172, 255, 0.035));
}
.english-translation > span {
  display: block;
  color: var(--cyan);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.english-translation p {
  margin: 0;
  color: #c9cedf;
  font-size: 0.87rem;
  line-height: 1.55;
}
.english-translation-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(172, 172, 255, 0.035);
}
.english-translation-toggle p {
  flex: 1 1 320px;
}
.english-translate-btn {
  font-size: 0.72rem;
  padding: 8px 10px;
}
.english-choices {
  gap: 10px;
}
.english-feedback {
  margin-top: 14px;
  line-height: 1.55;
}
.english-feedback > p {
  margin: 8px 0;
}
.english-correct-answer {
  margin-top: 7px;
  color: #d9ddef;
}
.english-correct-answer strong {
  color: #fff;
}
.english-vocab {
  margin-top: 9px;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(157, 243, 199, 0.045);
  border: 1px solid rgba(157, 243, 199, 0.12);
  color: #bfccca;
  font-size: 0.78rem;
}
.english-vocab b {
  color: var(--green);
}
.english-fr-note {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: #bbc0d1;
}
.english-mini-fr {
  margin: 6px 0;
  color: #aeb6ca;
  font-size: 0.75rem;
  font-weight: 500;
}
.english-completion {
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .english-english-hero {
    grid-template-columns: 1fr;
  }
  .english-english-total {
    min-width: 0;
    min-height: 88px;
    width: 100%;
  }
  .english-level-grid {
    grid-template-columns: 1fr;
  }
  .english-level-card {
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    padding: 13px;
  }
  .english-level-num {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .english-quiz-top {
    justify-content: flex-start;
  }
  .english-quiz-top .badge:last-child {
    margin-left: auto;
  }
}
@media (max-width: 430px) {
  .english-level-card {
    gap: 10px;
  }
  .english-question {
    font-size: 1.14rem;
  }
  .english-translation {
    padding: 10px 12px;
  }
  .english-quiz-top .badge {
    font-size: 0.63rem;
  }
}

/* ===== Navigation compacte + Cheat Sheet ===== */
.topbar .nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 72px;
}
.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}
.nav-direct {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
}
.nav-direct::-webkit-scrollbar {
  display: none;
}
.topbar .navbtn {
  padding: 9px 13px;
  font-size: 0.82rem;
  white-space: nowrap;
  background: #141827;
  border-color: var(--line);
  color: #c7cbdb;
  box-shadow: none;
}
.topbar .navbtn:hover {
  color: #fff;
  border-color: rgba(172, 172, 255, 0.34);
  background: rgba(172, 172, 255, 0.07);
}
.topbar .navbtn.active {
  color: #0d1018;
  border-color: transparent;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  font-weight: 900;
}
.nav-tools {
  position: relative;
  flex: 0 0 auto;
}
.nav-tools-trigger {
  display: flex;
  align-items: center;
  gap: 7px !important;
}
.nav-tools-count {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.66rem;
  color: #dfe2ee;
}
.nav-tools-chevron {
  font-size: 0.9rem;
  color: #8f96ab;
  transition: transform 0.18s;
}
.nav-tools-trigger[aria-expanded='true'] .nav-tools-chevron {
  transform: rotate(180deg);
}
.nav-tools:has(.nav-menu-item.active) .nav-tools-trigger {
  border-color: rgba(172, 172, 255, 0.35);
  background: rgba(172, 172, 255, 0.08);
  color: #fff;
}
.nav-tools-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 90;
  width: min(330px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(24, 27, 43, 0.99), rgba(12, 15, 25, 0.99));
  box-shadow: 0 22px 65px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(18px);
}
.nav-tools-popover[hidden] {
  display: none !important;
}
.nav-tools-label {
  padding: 5px 7px 9px;
  color: #858ca2;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.topbar .nav-menu-item {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-radius: 12px;
  text-align: left;
  padding: 10px;
  border: 1px solid transparent;
  background: transparent !important;
  color: #f2f3f8 !important;
}
.topbar .nav-menu-item + .nav-menu-item {
  margin-top: 3px;
}
.topbar .nav-menu-item:hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.045) !important;
}
.topbar .nav-menu-item.active {
  border-color: rgba(172, 172, 255, 0.24);
  background: rgba(172, 172, 255, 0.07) !important;
}
.nav-menu-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.9rem;
}
.nav-menu-item strong {
  display: block;
  font-size: 0.8rem;
  line-height: 1.2;
}
.nav-menu-item small {
  display: block;
  margin-top: 3px;
  color: #9299ad;
  font-size: 0.67rem;
  font-weight: 550;
}

.cheat-cheatsheet-shell {
  display: grid;
  gap: 12px;
}
.cheat-cheatsheet-intro {
  overflow: visible;
  background: linear-gradient(
    135deg,
    rgba(255, 172, 215, 0.055),
    rgba(172, 172, 255, 0.045),
    rgba(157, 231, 255, 0.025)
  );
}
.cheat-cheatsheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
}
.cheat-cheatsheet-head h3 {
  margin: 6px 0 8px;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: -0.025em;
}
.cheat-cheatsheet-head p {
  margin: 0;
  max-width: 860px;
  line-height: 1.6;
}
.cheat-cheatsheet-total {
  min-width: 104px;
  min-height: 88px;
  border: 1px solid rgba(172, 172, 255, 0.18);
  border-radius: 20px;
  background: rgba(10, 12, 20, 0.33);
  display: grid;
  place-items: center;
  align-content: center;
}
.cheat-cheatsheet-total strong {
  font-size: 2rem;
  line-height: 1;
  background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cheat-cheatsheet-total span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cheat-cheatsheet-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.cheat-cheatsheet-search-wrap {
  position: relative;
  display: block;
}
#cheatSearchCheatsheet {
  width: 100%;
  height: 46px;
  background: #0f1220;
  padding: 0 44px 0 42px;
  border-radius: 14px;
}
#cheatSearchCheatsheet:focus {
  border-color: rgba(172, 172, 255, 0.7);
  box-shadow: 0 0 0 4px rgba(172, 172, 255, 0.09);
}
.cheat-clear {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8f96aa;
  font-size: 1.15rem;
}
.cheat-clear:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.cheat-cheatsheet-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cheat-cheatsheet-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 9px;
  color: #838aa0;
  font-size: 0.69rem;
}
.cheat-cheatsheet-meta span:first-child {
  color: #cfd3e1;
  font-weight: 800;
}
.cheat-cheatsheet-quick {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-top: 12px;
  padding: 1px 0 4px;
  scrollbar-width: thin;
}
.cheat-quick-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #141827;
  color: #c7cbda;
  padding: 7px 9px;
  font-size: 0.7rem;
  font-weight: 750;
  transition: 0.18s;
}
.cheat-quick-btn:hover {
  color: #fff;
  border-color: rgba(172, 172, 255, 0.34);
  background: rgba(172, 172, 255, 0.065);
  transform: translateY(-1px);
}
.cheat-quick-btn > span {
  color: #777f95;
  font-size: 0.62rem;
}
.cheat-quick-btn > b {
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.59rem;
  color: #aeb4c7;
}
.cheat-cheatsheet-sections {
  display: grid;
  gap: 9px;
}
.cheat-section {
  scroll-margin-top: 160px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 26, 43, 0.96), rgba(14, 17, 28, 0.96));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
}
.cheat-section-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 34px minmax(0, 1fr) 30px;
  gap: 10px;
  align-items: center;
  padding: 14px 15px;
  border: 0;
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.045), rgba(172, 172, 255, 0.04));
  color: inherit;
  text-align: left;
  transition: 0.18s;
}
.cheat-section-toggle:hover {
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.08), rgba(172, 172, 255, 0.07));
}
.cheat-section-index {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #0b0d16;
  font-size: 0.72rem;
  font-weight: 950;
}
.cheat-section-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  color: #cbd0e0;
  font-size: 0.8rem;
  font-weight: 900;
}
.cheat-section-copy {
  display: block;
  min-width: 0;
}
.cheat-section-copy strong {
  display: block;
  color: #f5f6fa;
  font-size: 0.9rem;
}
.cheat-section-copy small {
  display: block;
  margin-top: 3px;
  color: #8f96aa;
  font-size: 0.68rem;
}
.cheat-section-chevron {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #9aa1b6;
  transition: 0.2s;
}
.cheat-section.open .cheat-section-chevron {
  transform: rotate(180deg);
  color: #0d1018;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  border-color: transparent;
}
.cheat-section-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
  border-top: 0 solid var(--line);
}
.cheat-section.open .cheat-section-body {
  grid-template-rows: 1fr;
  border-top-width: 1px;
}
.cheat-section-inner {
  min-height: 0;
  overflow: hidden;
}
.cheat-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.055);
}
.cheat-entry {
  min-height: 102px;
  padding: 14px 16px;
  background: #111522;
}
.cheat-entry-term {
  display: inline-flex;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #f3f4fb;
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.cheat-entry p {
  margin: 7px 0 0;
  color: #9fa6bb;
  font-size: 0.76rem;
  line-height: 1.5;
}
.cheat-cheatsheet-empty {
  padding: 32px;
  border: 1px dashed rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 880px) {
  .topbar .nav {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 0 11px;
  }
  .top-actions {
    width: 100%;
    justify-content: space-between;
    margin: 0;
  }
  .nav-direct {
    justify-content: flex-start;
    flex: 1 1 auto;
  }
  .hub-toolbar {
    top: 116px;
  }
}
@media (max-width: 700px) {
  .topbar .navbtn {
    font-size: 0.78rem;
    padding: 8px 11px;
  }
  .nav-tools-popover {
    position: fixed;
    right: 10px;
    top: 112px;
    width: min(330px, calc(100vw - 20px));
  }
  .cheat-cheatsheet-head {
    grid-template-columns: 1fr;
  }
  .cheat-cheatsheet-total {
    min-width: 0;
    min-height: 72px;
    width: 100%;
  }
  .cheat-cheatsheet-toolbar {
    grid-template-columns: 1fr;
  }
  .cheat-cheatsheet-actions {
    width: 100%;
  }
  .cheat-cheatsheet-actions .hub-toolbar-btn {
    flex: 1;
  }
  .cheat-entry-grid {
    grid-template-columns: 1fr;
  }
  .cheat-section {
    scroll-margin-top: 132px;
  }
}
@media (max-width: 430px) {
  .brand span {
    font-size: 0.96rem;
  }
  .topbar .navbtn {
    font-size: 0.74rem;
    padding: 8px 10px;
  }
  .nav-tools-count {
    display: none;
  }
  .cheat-section-toggle {
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    gap: 9px;
    padding: 12px;
  }
  .cheat-section-icon {
    display: none;
  }
  .cheat-section-index {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .cheat-entry {
    padding: 12px 13px;
    min-height: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cheat-section-body,
  .cheat-section-chevron,
  .nav-tools-chevron {
    transition: none !important;
  }
}
/* mobile containment: the quick-access strip scrolls inside the card instead of widening the page. */
.cheat-cheatsheet-shell,
.cheat-cheatsheet-intro,
.cheat-cheatsheet-sections,
.cheat-section,
.cheat-section-toggle,
.cheat-section-body,
.cheat-section-inner,
.cheat-entry-grid {
  min-width: 0;
  max-width: 100%;
}
.cheat-cheatsheet-intro {
  overflow: hidden;
}
.cheat-cheatsheet-quick {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
}
@media (max-width: 430px) {
  .top-actions {
    gap: 5px;
  }
  .nav-direct {
    gap: 4px;
  }
  .topbar .navbtn {
    font-size: 0.68rem;
    padding: 7px 8px;
  }
  .nav-tools-trigger {
    gap: 4px !important;
  }
  .nav-tools-chevron {
    font-size: 0.75rem;
  }
}

/* ===== Choix libre du niveau ===== */
.levels-app-level-action {
  margin-left: auto;
  align-self: center;
  flex: 0 0 auto;
}
.levels-change-level {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(172, 172, 255, 0.25);
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.1), rgba(172, 172, 255, 0.11));
  color: #f7f7fb;
  border-radius: 13px;
  padding: 9px 12px;
  cursor: pointer;
  font: inherit;
  transition: 0.18s;
}
.levels-change-level:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 172, 215, 0.5);
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.16), rgba(172, 172, 255, 0.16));
}
.levels-change-level span {
  color: var(--pink);
  font-weight: 900;
}
.levels-change-level b {
  font-size: 0.78rem;
}
.levels-level-shell {
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(23, 26, 43, 0.97), rgba(13, 16, 26, 0.98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}
.levels-level-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 4px 2px 20px;
  border-bottom: 1px solid var(--line);
}
.levels-level-intro h3 {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  letter-spacing: -0.035em;
  margin: 4px 0 8px;
}
.levels-level-intro p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.88rem;
}
.levels-level-reminder {
  min-width: 126px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.17);
  padding: 11px 13px;
  border-radius: 14px;
  text-align: right;
}
.levels-level-reminder span {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.levels-level-reminder strong {
  display: block;
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--violet);
}
.levels-level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 18px;
}
.levels-level-grid.levels-level-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.levels-level-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  min-height: 112px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #111522;
  color: var(--text);
  cursor: pointer;
  transition: 0.18s;
  overflow: hidden;
}
.levels-level-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 172, 215, 0.05),
    rgba(172, 172, 255, 0.04),
    transparent 65%
  );
  opacity: 0;
  transition: 0.18s;
  pointer-events: none;
}
.levels-level-card:hover {
  transform: translateY(-2px);
  border-color: rgba(172, 172, 255, 0.35);
  background: #171b2b;
}
.levels-level-card:hover::before {
  opacity: 1;
}
.levels-level-card.is-last {
  border-color: rgba(157, 231, 255, 0.2);
}
.levels-level-number {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #0b0d16;
  font-weight: 950;
  font-size: 0.78rem;
}
.levels-level-copy {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
}
.levels-level-copy small {
  display: block;
  color: #858ca5;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}
.levels-level-copy strong {
  display: block;
  margin-top: 4px;
  color: #f7f7fb;
  font-size: 0.9rem;
  line-height: 1.25;
}
.levels-level-copy em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.42;
  font-style: normal;
}
.levels-level-arrow {
  position: relative;
  z-index: 1;
  color: var(--violet);
  font-size: 1.4rem;
}
.levels-level-card:hover .levels-level-arrow {
  transform: translateX(2px);
}
.levels-level-footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  color: #7f879e;
  font-size: 0.67rem;
}
.levels-home-level-badge {
  margin-left: auto;
  flex: 0 0 auto;
  border: 1px solid rgba(172, 172, 255, 0.19);
  background: rgba(172, 172, 255, 0.07);
  color: #d8d8ff;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 0.58rem;
  font-weight: 800;
  white-space: nowrap;
}
@media (max-width: 1050px) {
  .levels-level-grid,
  .levels-level-grid.levels-level-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .app-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .levels-app-level-action {
    width: 100%;
    margin-left: 0;
  }
  .levels-change-level {
    width: 100%;
    justify-content: center;
  }
  .levels-level-shell {
    padding: 14px;
    border-radius: 20px;
  }
  .levels-level-intro {
    grid-template-columns: 1fr;
  }
  .levels-level-reminder {
    text-align: left;
    min-width: 0;
  }
  .levels-level-grid,
  .levels-level-grid.levels-level-grid-compact {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .levels-level-card {
    min-height: 90px;
    padding: 12px;
  }
  .levels-level-copy em {
    font-size: 0.68rem;
  }
  .levels-home-level-badge {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .levels-level-card,
  .levels-change-level,
  .levels-level-card::before {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   GLOSSAIRE : recherche, catégories, favoris, récents
   ========================================================= */
body.glossary-lock {
  overflow: hidden;
}
.glossary-shell {
  display: grid;
  gap: 16px;
  --glossary-panel: rgba(18, 21, 34, 0.96);
  --glossary-panel2: #111522;
  --glossary-line: rgba(255, 255, 255, 0.09);
  --glossary-muted: #a8aec3;
  --glossary-pink: #ffacd7;
  --glossary-violet: #acacff;
  --glossary-cyan: #9de7ff;
  --glossary-green: #9df3c7;
}
.glossary-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 24px;
  background: linear-gradient(
    135deg,
    rgba(255, 172, 215, 0.07),
    rgba(172, 172, 255, 0.045) 50%,
    rgba(157, 231, 255, 0.035)
  );
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
}
.glossary-hero:after {
  content: '';
  position: absolute;
  right: -90px;
  top: -120px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.18), rgba(172, 172, 255, 0.13));
  filter: blur(20px);
  pointer-events: none;
}
.glossary-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 860px;
}
.glossary-hero-copy h3 {
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
  margin: 4px 0 8px;
  letter-spacing: -0.035em;
}
.glossary-hero-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}
.glossary-hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 18px;
}
.glossary-stat {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(9, 12, 20, 0.42);
  color: var(--text);
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
}
.glossary-stat:hover {
  border-color: rgba(172, 172, 255, 0.35);
  transform: translateY(-1px);
}
.glossary-stat strong {
  display: block;
  font-size: 1.28rem;
}
.glossary-stat span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
}
.glossary-progress {
  position: relative;
  z-index: 1;
  margin-top: 14px;
}
.glossary-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: var(--muted);
  font-size: 0.73rem;
}
.glossary-progress b {
  color: #fff;
}
.glossary-progress-track {
  height: 7px;
  margin-top: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: #25293b;
}
.glossary-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan));
  transition: width 0.2s;
}
.glossary-command {
  position: sticky;
  top: 8px;
  z-index: 40;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 12px;
  background: rgba(11, 14, 23, 0.9);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.24);
}
.glossary-search-row {
  display: grid;
  grid-template-columns: minmax(280px, 1.45fr) auto auto;
  gap: 9px;
  align-items: center;
}
.glossary-search-wrap {
  position: relative;
  min-width: 0;
}
.glossary-search-wrap > span {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1.05rem;
}
.glossary-search-wrap input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #0f1220;
  color: #fff;
  padding: 0 42px 0 40px;
  outline: none;
}
.glossary-search-wrap input:focus {
  border-color: rgba(172, 172, 255, 0.7);
  box-shadow: 0 0 0 4px rgba(172, 172, 255, 0.08);
}
#glossaryClearQ {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
}
#glossaryClearQ:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.glossary-search-mode {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3px;
  background: #111522;
}
.glossary-search-mode button,
.glossary-statuses button,
.glossary-action,
.glossary-reset,
.glossary-browse-actions button,
.glossary-more button {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #b8bed1;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.74rem;
  white-space: nowrap;
}
.glossary-search-mode button.active,
.glossary-statuses button.active {
  background: linear-gradient(90deg, rgba(255, 172, 215, 0.95), rgba(172, 172, 255, 0.95));
  color: #0d1018;
  font-weight: 850;
}
.glossary-action {
  height: 44px;
  border: 1px solid var(--line);
  background: #141827;
  color: #e0e3ef;
}
.glossary-action:hover,
.glossary-reset:hover,
.glossary-browse-actions button:hover,
.glossary-more button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.glossary-filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 9px;
}
.glossary-statuses {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3px;
  background: #111522;
}
.glossary-select-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.72rem;
}
.glossary-select-label select {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #141827;
  color: #dbe0ef;
  padding: 7px 28px 7px 9px;
}
.glossary-reset {
  border: 1px solid var(--line);
  background: #141827;
}
.glossary-alpha {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  margin-top: 9px;
  padding-bottom: 1px;
}
.glossary-alpha button {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111522;
  color: #c9cede;
  font-size: 0.68rem;
  font-weight: 850;
  cursor: pointer;
}
.glossary-alpha button:hover,
.glossary-alpha button.active {
  border-color: rgba(172, 172, 255, 0.5);
  background: rgba(172, 172, 255, 0.12);
  color: #fff;
}
.glossary-command-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.68rem;
}
.glossary-command-foot kbd {
  font-family: ui-monospace, monospace;
  border: 1px solid var(--line);
  background: #111522;
  color: #e8eaf2;
  border-radius: 5px;
  padding: 1px 4px;
}
.glossary-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;
  border: 1px solid rgba(172, 172, 255, 0.28);
  border-radius: 13px;
  overflow: hidden;
  background: #0c101c;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.glossary-suggest button {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 9px 12px;
  text-align: left;
  cursor: pointer;
}
.glossary-suggest button:last-child {
  border-bottom: 0;
}
.glossary-suggest button:hover {
  background: rgba(172, 172, 255, 0.09);
}
.glossary-suggest b {
  display: block;
}
.glossary-suggest span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  margin-top: 2px;
}
.glossary-suggest mark,
.glossary-entry mark {
  background: rgba(255, 172, 215, 0.18);
  color: #fff;
  border-radius: 3px;
  padding: 0 2px;
}
.glossary-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.glossary-sidebar {
  position: sticky;
  top: 185px;
  max-height: calc(100vh - 200px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(18, 21, 34, 0.92);
  padding: 10px;
  scrollbar-width: thin;
}
.glossary-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 7px 10px;
}
.glossary-sidebar-head span {
  display: block;
  color: var(--muted);
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.glossary-sidebar-head strong {
  display: block;
  margin-top: 2px;
}
.glossary-cat-list {
  display: grid;
  gap: 5px;
}
.glossary-cat,
.glossary-cat-all {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  padding: 9px;
  text-align: left;
  cursor: pointer;
}
.glossary-cat-all {
  grid-template-columns: 1fr auto;
  margin-bottom: 6px;
  border-color: var(--line);
  background: #111522;
}
.glossary-cat:hover,
.glossary-cat-all:hover,
.glossary-cat.active,
.glossary-cat-all.active {
  background: rgba(172, 172, 255, 0.075);
  border-color: rgba(172, 172, 255, 0.2);
}
.glossary-cat-num {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #0c0e16;
  font-size: 0.68rem;
  font-weight: 950;
}
.glossary-cat-copy {
  min-width: 0;
}
.glossary-cat-copy b,
.glossary-cat-all b {
  display: block;
  font-size: 0.74rem;
  line-height: 1.28;
}
.glossary-cat-copy small,
.glossary-cat-all small {
  display: block;
  color: var(--muted);
  font-size: 0.62rem;
  margin-top: 3px;
}
.glossary-cat-copy i {
  display: block;
  height: 3px;
  margin-top: 6px;
  border-radius: 99px;
  background: #25293b;
  overflow: hidden;
}
.glossary-cat-copy u {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  text-decoration: none;
}
.glossary-cat em,
.glossary-cat-all em {
  font-style: normal;
  color: #9da4ba;
  font-size: 0.62rem;
}
.glossary-main {
  min-width: 0;
}
.glossary-browse-head,
.glossary-result-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 3px 2px 12px;
}
.glossary-browse-head h3,
.glossary-result-head h3 {
  margin: 3px 0 4px;
  font-size: 1.15rem;
}
.glossary-browse-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}
.glossary-browse-actions {
  display: flex;
  gap: 6px;
}
.glossary-browse-actions button,
.glossary-more button {
  border: 1px solid var(--line);
  background: #141827;
}
.glossary-result-head > span {
  color: var(--muted);
  font-size: 0.72rem;
}
.glossary-accordion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.glossary-accordion-grid.one {
  grid-template-columns: 1fr;
}
.glossary-accordion {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(23, 26, 43, 0.96), rgba(14, 17, 28, 0.96));
  overflow: hidden;
}
.glossary-accordion.open {
  grid-column: 1/-1;
  border-color: rgba(172, 172, 255, 0.18);
}
.glossary-acc-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  border: 0;
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.045), rgba(172, 172, 255, 0.04));
  color: var(--text);
  padding: 13px;
  text-align: left;
  cursor: pointer;
}
.glossary-acc-head strong {
  display: block;
  font-size: 0.82rem;
  line-height: 1.3;
}
.glossary-acc-head small {
  display: block;
  color: var(--muted);
  font-size: 0.64rem;
  margin-top: 3px;
}
.glossary-acc-head > i {
  font-style: normal;
  color: var(--violet);
  transition: transform 0.18s;
}
.glossary-accordion.open .glossary-acc-head > i {
  transform: rotate(180deg);
}
.glossary-acc-body {
  padding: 7px;
}
.glossary-entry {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #0f1320;
  overflow: hidden;
  margin: 6px 0;
}
.glossary-entry.is-mastered {
  border-color: rgba(157, 243, 199, 0.27);
}
.glossary-entry.is-favorite {
  box-shadow: inset 3px 0 0 rgba(255, 172, 215, 0.65);
}
.glossary-entry-toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
}
.glossary-entry-toggle:hover {
  background: rgba(255, 255, 255, 0.025);
}
.glossary-entry-toggle strong {
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
}
.glossary-entry-toggle small {
  display: block;
  color: var(--muted);
  font-size: 0.62rem;
  margin-top: 4px;
}
.glossary-entry-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.glossary-entry-actions > i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #191e2e;
  color: var(--violet);
  font-style: normal;
  font-weight: 900;
}
.glossary-entry.is-mastered .glossary-entry-actions > i {
  background: rgba(157, 243, 199, 0.1);
  color: var(--green);
}
.glossary-icon-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9ca4bb;
  font-size: 1rem;
  cursor: pointer;
}
.glossary-icon-btn:hover {
  background: rgba(255, 172, 215, 0.08);
  color: var(--pink);
}
.glossary-entry-body {
  border-top: 1px solid var(--line);
  padding: 12px;
}
.glossary-definition {
  color: #d8dbea;
  line-height: 1.62;
  font-size: 0.79rem;
  white-space: pre-line;
}
.glossary-entry-tools {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-top: 11px;
}
.glossary-master {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #dce2ed;
  font-size: 0.7rem;
  font-weight: 750;
  cursor: pointer;
}
.glossary-master input {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}
.glossary-copy-def {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #161b2a;
  color: #b8bed0;
  padding: 6px 8px;
  font-size: 0.67rem;
  cursor: pointer;
}
.glossary-copy-def:hover,
.glossary-copy-def.is-copied {
  color: #fff;
  border-color: rgba(172, 172, 255, 0.28);
}
.glossary-related {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
}
.glossary-related > span {
  color: var(--muted);
  font-size: 0.63rem;
  margin-right: 2px;
}
.glossary-related button {
  border: 1px solid rgba(172, 172, 255, 0.15);
  border-radius: 999px;
  background: rgba(172, 172, 255, 0.055);
  color: #cdd0ff;
  padding: 4px 7px;
  font-size: 0.62rem;
  cursor: pointer;
}
.glossary-related button:hover {
  border-color: rgba(172, 172, 255, 0.35);
  color: #fff;
}
.glossary-more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.glossary-empty {
  border: 1px dashed rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  padding: 26px;
  text-align: center;
  color: var(--muted);
}
.glossary-empty b,
.glossary-empty span {
  display: block;
}
.glossary-empty span {
  font-size: 0.75rem;
  margin-top: 6px;
}
.glossary-backdrop {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.glossary-mobile-only {
  display: none !important;
}
.glossary-welcome {
  padding: 20px;
}
.glossary-welcome-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.glossary-welcome-head h3 {
  margin: 4px 0 8px;
  font-size: 1.35rem;
}
.glossary-welcome-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
  max-width: 800px;
}
.glossary-welcome-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.glossary-welcome-card,
.glossary-mini-stat {
  border: 1px solid var(--line);
  background: #111522;
  border-radius: 15px;
  padding: 14px;
}
.glossary-welcome-card strong,
.glossary-mini-stat strong {
  display: block;
  font-size: 1.28rem;
}
.glossary-welcome-card span,
.glossary-mini-stat span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
}
.glossary-welcome-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 12px;
  margin-top: 14px;
}
.glossary-home-card {
  padding: 16px;
}
.glossary-home-card h4 {
  margin: 5px 0 10px;
}
.glossary-steps {
  margin: 0;
  padding-left: 18px;
  color: #dfe6f2;
  line-height: 1.7;
}
.glossary-steps li + li {
  margin-top: 4px;
}
.glossary-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.glossary-category-view {
  display: grid;
  gap: 12px;
}
.glossary-category-top {
  display: grid;
  gap: 14px;
}
.glossary-category-copy h3 {
  margin: 0 0 6px;
  font-size: 1.22rem;
}
.glossary-category-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}
.glossary-category-title-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.glossary-category-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.glossary-category-actions button,
.glossary-more button {
  border: 1px solid var(--line);
  background: #141827;
  color: #e5e9f1;
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
}
.glossary-category-actions button:hover,
.glossary-more button:hover {
  background: rgba(255, 255, 255, 0.06);
}
.glossary-category-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.glossary-category-entries {
  display: grid;
  gap: 8px;
}
@media (max-width: 1050px) {
  .glossary-layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }
  .glossary-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .glossary-search-row {
    grid-template-columns: minmax(240px, 1fr) auto;
  }
  .glossary-action#glossaryRandom {
    display: none;
  }
  .glossary-accordion-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .glossary-command {
    top: 5px;
  }
  .glossary-search-row {
    grid-template-columns: 1fr auto;
  }
  .glossary-search-mode {
    grid-column: 1/-1;
  }
  .glossary-search-mode button {
    flex: 1;
  }
  .glossary-filter-row {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .glossary-statuses {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .glossary-statuses button {
    flex: 0 0 auto;
  }
  .glossary-select-label {
    margin-left: 0;
  }
  .glossary-command-foot span:last-child {
    display: none;
  }
  .glossary-layout {
    grid-template-columns: 1fr;
  }
  .glossary-sidebar {
    position: fixed;
    z-index: 90;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: min(88vw, 360px);
    max-height: none;
    transform: translateX(calc(-100% - 24px));
    transition: transform 0.2s;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  }
  .glossary-sidebar.is-mobile-open {
    transform: translateX(0);
  }
  .glossary-mobile-only {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .glossary-search-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .glossary-search-row .glossary-mobile-only {
    height: 44px;
  }
  .glossary-hero {
    padding: 19px;
  }
  .glossary-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .glossary-browse-head,
  .glossary-result-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .glossary-entry-toggle strong {
    font-size: 0.82rem;
  }
  .glossary-entry-tools {
    align-items: flex-start;
    flex-direction: column;
  }
  .glossary-alpha {
    margin-left: -2px;
    margin-right: -2px;
  }
  .glossary-progress > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}
@media (max-width: 430px) {
  .glossary-hero-stats {
    grid-template-columns: 1fr 1fr;
  }
  .glossary-stat {
    padding: 10px;
  }
  .glossary-search-row {
    grid-template-columns: 1fr auto;
  }
  .glossary-search-wrap input {
    font-size: 0.84rem;
  }
  .glossary-select-label {
    width: 100%;
    justify-content: space-between;
  }
  .glossary-select-label select {
    flex: 1;
  }
  .glossary-reset {
    width: 100%;
  }
  .glossary-acc-head {
    padding: 11px;
  }
  .glossary-cat-num {
    width: 30px;
    height: 30px;
  }
  .glossary-command {
    padding: 9px;
    border-radius: 16px;
  }
}

@media (max-width: 1050px) {
  .glossary-welcome-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .glossary-welcome-grid {
    grid-template-columns: 1fr;
  }
  .glossary-category-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .glossary-welcome-head,
  .glossary-category-title-row {
    flex-direction: column;
  }
  .glossary-welcome-stats,
  .glossary-category-stats {
    grid-template-columns: 1fr 1fr;
  }
  .glossary-category-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .glossary-category-actions button {
    width: 100%;
  }
}
@media (max-width: 430px) {
  .glossary-welcome-stats,
  .glossary-category-stats {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .glossary-sidebar,
  .glossary-stat,
  .glossary-acc-head > i,
  .glossary-progress-track i {
    transition: none !important;
  }
}
.glossary-entry-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: stretch;
}
.glossary-entry-head > .glossary-star {
  align-self: center;
  justify-self: center;
}
.glossary-entry-toggle {
  min-width: 0;
}
.glossary-entry-toggle > i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #191e2e;
  color: var(--violet);
  font-style: normal;
  font-weight: 900;
  flex: 0 0 auto;
}
.glossary-entry.is-mastered .glossary-entry-toggle > i {
  background: rgba(157, 243, 199, 0.1);
  color: var(--green);
}

/* Windows Server : réponses uniques + multiples */
.win-windows-shell {
  max-width: 980px;
  margin: 0 auto;
}
.win-windows-question {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.38;
  margin: 18px 0 14px;
}
.win-windows-multi-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid rgba(255, 172, 215, 0.35);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 172, 215, 0.11), rgba(172, 172, 255, 0.09));
  margin-bottom: 14px;
}
.win-windows-multi-alert strong {
  color: var(--pink);
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}
.win-windows-multi-alert span {
  color: #d7daea;
  font-size: 0.82rem;
}
.win-windows-single-note {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.025);
}
.win-windows-choices .choice.selected {
  border-color: rgba(157, 231, 255, 0.68);
  background: linear-gradient(135deg, rgba(157, 231, 255, 0.14), rgba(172, 172, 255, 0.1));
  box-shadow: 0 0 0 2px rgba(157, 231, 255, 0.07) inset;
}
.win-windows-choices .choice.selected::before {
  content: '✓';
  font-weight: 900;
  color: var(--cyan);
  margin-right: 8px;
}
.win-windows-feedback {
  margin-top: 14px;
}
@media (max-width: 640px) {
  .win-windows-head {
    align-items: flex-start !important;
    gap: 8px;
  }
  .win-windows-multi-alert {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* navigation & clarté Windows Server */
.nav-tools-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 4px 10px;
}
.win-windows-term-note {
  display: grid;
  gap: 5px;
  margin: 12px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(102, 227, 255, 0.22);
  border-radius: 14px;
  background: rgba(102, 227, 255, 0.055);
  color: #cfd8e8;
  line-height: 1.48;
}
.win-windows-term-note b {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
}
.win-windows-term-note span {
  font-size: 0.82rem;
  color: #aeb8cc;
}

/* liens externes Outils + Cheat Sheet détaillé */
.topbar .nav-menu-link {
  text-decoration: none;
}
.topbar .nav-menu-link .nav-menu-icon {
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.09), rgba(172, 172, 255, 0.09));
}
.cheat-entry p {
  line-height: 1.62;
}
.cheat-entry-term {
  overflow-wrap: anywhere;
}

/* ========================================================================== */
/* Découvrir la cyber : guide interactif en 10 fiches                  */
/* ========================================================================== */
.cyber-guide-shell {
  --cyber-guide-accent: #acacff;
  --cyber-guide-accent-soft: rgba(172, 172, 255, 0.12);
  --cyber-guide-accent-line: rgba(172, 172, 255, 0.3);
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.cyber-guide-shell[data-tone='blue'] {
  --cyber-guide-accent: #8ec7ff;
  --cyber-guide-accent-soft: rgba(142, 199, 255, 0.11);
  --cyber-guide-accent-line: rgba(142, 199, 255, 0.3);
}
.cyber-guide-shell[data-tone='pink'] {
  --cyber-guide-accent: #ffacd7;
  --cyber-guide-accent-soft: rgba(255, 172, 215, 0.1);
  --cyber-guide-accent-line: rgba(255, 172, 215, 0.3);
}
.cyber-guide-shell[data-tone='orange'] {
  --cyber-guide-accent: #ffd08a;
  --cyber-guide-accent-soft: rgba(255, 208, 138, 0.1);
  --cyber-guide-accent-line: rgba(255, 208, 138, 0.28);
}
.cyber-guide-shell[data-tone='cyan'] {
  --cyber-guide-accent: #9de7ff;
  --cyber-guide-accent-soft: rgba(157, 231, 255, 0.1);
  --cyber-guide-accent-line: rgba(157, 231, 255, 0.28);
}
.cyber-guide-shell[data-tone='green'] {
  --cyber-guide-accent: #9df3c7;
  --cyber-guide-accent-soft: rgba(157, 243, 199, 0.09);
  --cyber-guide-accent-line: rgba(157, 243, 199, 0.27);
}
.cyber-guide-shell[data-tone='yellow'] {
  --cyber-guide-accent: #ffe49b;
  --cyber-guide-accent-soft: rgba(255, 228, 155, 0.1);
  --cyber-guide-accent-line: rgba(255, 228, 155, 0.28);
}
.cyber-guide-shell[data-tone='red'] {
  --cyber-guide-accent: #ff9cae;
  --cyber-guide-accent-soft: rgba(255, 156, 174, 0.1);
  --cyber-guide-accent-line: rgba(255, 156, 174, 0.28);
}
.cyber-guide-shell[data-tone='purple'] {
  --cyber-guide-accent: #c4adff;
  --cyber-guide-accent-soft: rgba(196, 173, 255, 0.11);
  --cyber-guide-accent-line: rgba(196, 173, 255, 0.3);
}
.cyber-guide-shell[data-tone='rose'] {
  --cyber-guide-accent: #ffb4ca;
  --cyber-guide-accent-soft: rgba(255, 180, 202, 0.1);
  --cyber-guide-accent-line: rgba(255, 180, 202, 0.3);
}
.cyber-guide-index {
  position: sticky;
  top: 84px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(23, 26, 43, 0.98), rgba(14, 17, 29, 0.98));
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18);
}
.cyber-guide-index-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.cyber-guide-index-head span {
  font-size: 0.67rem;
  letter-spacing: 0.14em;
  font-weight: 950;
  color: var(--cyber-guide-accent);
}
.cyber-guide-index-head strong {
  font-size: 0.69rem;
  color: #cbd0df;
}
.cyber-guide-readbar {
  height: 7px;
  margin-bottom: 12px;
}
.cyber-guide-readbar > i {
  background: linear-gradient(90deg, var(--cyber-guide-accent), #ffacd7);
}
.cyber-guide-page-list {
  display: grid;
  gap: 5px;
}
.cyber-guide-page-link {
  width: 100%;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid transparent;
  background: transparent;
  color: #c3c8d8;
  text-align: left;
  padding: 8px;
  border-radius: 11px;
  transition: 0.16s;
}
.cyber-guide-page-link:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line);
  color: #fff;
}
.cyber-guide-page-link span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 0.67rem;
  font-weight: 950;
  color: #aeb5c9;
  background: #111522;
}
.cyber-guide-page-link b {
  font-size: 0.72rem;
  line-height: 1.35;
  padding-top: 4px;
  font-weight: 750;
}
.cyber-guide-page-link.read span::after {
  content: '✓';
  position: absolute;
  opacity: 0;
}
.cyber-guide-page-link.active {
  background: var(--cyber-guide-accent-soft);
  border-color: var(--cyber-guide-accent-line);
  color: #fff;
}
.cyber-guide-page-link.active span {
  border-color: var(--cyber-guide-accent-line);
  color: #0b0d16;
  background: var(--cyber-guide-accent);
}
.cyber-guide-main {
  min-width: 0;
  display: grid;
  gap: 13px;
}
.cyber-guide-page-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
}
.cyber-guide-page-kicker {
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyber-guide-accent);
}
.cyber-guide-page-kicker span {
  margin-right: 5px;
}
.cyber-guide-page-progress {
  font-weight: 750;
}
.cyber-guide-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--cyber-guide-accent-line);
  background:
    radial-gradient(circle at 90% 0%, var(--cyber-guide-accent-soft), transparent 46%),
    linear-gradient(180deg, #171a2b, #111420);
  border-radius: 22px;
  padding: 22px 24px;
  overflow: hidden;
  position: relative;
}
.cyber-guide-hero::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--cyber-guide-accent);
}
.cyber-guide-hero h3 {
  margin: 0 0 7px;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  letter-spacing: -0.025em;
}
.cyber-guide-hero p {
  margin: 0;
  color: #b8bfd2;
  line-height: 1.55;
  max-width: 780px;
}
.cyber-guide-hero-number {
  font-size: 3.6rem;
  font-weight: 950;
  line-height: 1;
  color: var(--cyber-guide-accent);
  opacity: 0.22;
  letter-spacing: -0.08em;
  padding-right: 8px;
}
.cyber-guide-content {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #121522, #0f121d);
  border-radius: 22px;
  padding: 22px;
  color: #dfe3ee;
  line-height: 1.68;
}
.cyber-guide-content h4 {
  font-size: 1rem;
  margin: 22px 0 9px;
  color: #fff;
}
.cyber-guide-content h4:first-child {
  margin-top: 0;
}
.cyber-guide-content p {
  margin: 8px 0;
  color: #c2c8d8;
}
.cyber-guide-content code,
.cyber-guide-codebox pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cyber-guide-content code {
  background: #0b0e17;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 5px;
  color: #e9e5ff;
}
.cyber-guide-lead {
  font-size: 1rem;
  line-height: 1.72;
  color: #e4e6ef;
  margin-bottom: 15px;
}
.cyber-guide-grid2,
.cyber-guide-grid3 {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.cyber-guide-grid2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cyber-guide-grid3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cyber-guide-card,
.cyber-guide-mini,
.cyber-guide-terms > div,
.cyber-guide-compare > div {
  border: 1px solid var(--line);
  background: #0e111c;
  border-radius: 15px;
  padding: 14px;
}
.cyber-guide-card b,
.cyber-guide-mini b,
.cyber-guide-terms b,
.cyber-guide-compare b {
  display: block;
  color: #fff;
  margin-bottom: 5px;
}
.cyber-guide-card p,
.cyber-guide-mini p {
  margin: 0;
  color: #aeb5c8;
  font-size: 0.82rem;
  line-height: 1.55;
}
.cyber-guide-mini span {
  display: block;
  font-size: 1.35rem;
  margin-bottom: 7px;
}
.cyber-guide-callout,
.cyber-guide-note,
.cyber-guide-scenario {
  margin: 14px 0;
  border: 1px solid var(--cyber-guide-accent-line);
  background: var(--cyber-guide-accent-soft);
  border-radius: 15px;
  padding: 14px 15px;
}
.cyber-guide-callout b,
.cyber-guide-note b,
.cyber-guide-scenario b {
  color: #fff;
}
.cyber-guide-callout p,
.cyber-guide-note p,
.cyber-guide-scenario p {
  margin: 5px 0 0;
}
.cyber-guide-note {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}
.cyber-guide-scenario {
  border-style: dashed;
}
.cyber-guide-small {
  font-size: 0.77rem !important;
  color: #9da5bb !important;
}
.cyber-guide-flow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.cyber-guide-flow span {
  border: 1px solid var(--cyber-guide-accent-line);
  background: var(--cyber-guide-accent-soft);
  color: #eef0f8;
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 0.67rem;
  font-weight: 950;
  letter-spacing: 0.05em;
}
.cyber-guide-flow-large span {
  padding: 8px 10px;
}
.cyber-guide-terms,
.cyber-guide-compare {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.cyber-guide-terms {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cyber-guide-terms > div:last-child {
  grid-column: 1/-1;
}
.cyber-guide-terms span,
.cyber-guide-compare span {
  display: block;
  color: #aeb5c8;
  font-size: 0.82rem;
  line-height: 1.55;
}
.cyber-guide-timeline,
.cyber-guide-steps {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.cyber-guide-timeline > div,
.cyber-guide-steps > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  background: #0e111c;
  border-radius: 14px;
  padding: 12px;
}
.cyber-guide-timeline span,
.cyber-guide-steps span {
  grid-row: 1/3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--cyber-guide-accent-soft);
  border: 1px solid var(--cyber-guide-accent-line);
  color: var(--cyber-guide-accent);
  font-weight: 950;
  font-size: 0.72rem;
}
.cyber-guide-timeline b,
.cyber-guide-steps b {
  color: #fff;
}
.cyber-guide-timeline p,
.cyber-guide-steps p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: #aeb5c8;
}
.cyber-guide-pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.cyber-guide-pills span {
  border: 1px solid var(--line);
  background: #0e111c;
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 0.72rem;
  color: #cbd1e0;
}
.cyber-guide-codegrid {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.cyber-guide-codegrid > div {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  background: #0b0e17;
  border-radius: 13px;
  padding: 11px;
}
.cyber-guide-codegrid code {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--cyber-guide-accent);
  font-size: 0.82rem;
}
.cyber-guide-codegrid span {
  color: #aeb5c8;
  font-size: 0.8rem;
}
.cyber-guide-compare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cyber-guide-compare b {
  color: var(--cyber-guide-accent);
}
.cyber-guide-checklist {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.cyber-guide-checklist > div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
  border: 1px solid var(--line);
  background: #0e111c;
  border-radius: 13px;
  padding: 11px;
}
.cyber-guide-checklist > div > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--cyber-guide-accent-soft);
  color: var(--cyber-guide-accent);
  font-weight: 950;
}
.cyber-guide-checklist p {
  margin: 0;
  font-size: 0.84rem;
}
.cyber-guide-codebox {
  border: 1px solid var(--cyber-guide-accent-line);
  background: #090c14;
  border-radius: 16px;
  overflow: hidden;
  margin: 13px 0;
}
.cyber-guide-codebox > span {
  display: block;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
  color: var(--cyber-guide-accent);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cyber-guide-codebox pre {
  margin: 0;
  padding: 15px;
  overflow: auto;
  color: #d9e0f1;
  font-size: 0.8rem;
  line-height: 1.65;
}
.cyber-guide-roadmap {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.cyber-guide-roadmap > div {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  background: #0e111c;
  border-radius: 14px;
  padding: 12px;
}
.cyber-guide-roadmap > div > span {
  grid-row: 1/3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cyber-guide-accent-line);
  background: var(--cyber-guide-accent-soft);
  color: var(--cyber-guide-accent);
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 0.68rem;
  font-weight: 950;
}
.cyber-guide-roadmap b {
  color: #fff;
}
.cyber-guide-roadmap p {
  margin: 3px 0 0;
  font-size: 0.82rem;
}
.cyber-guide-memory {
  border: 1px solid var(--cyber-guide-accent-line);
  background: linear-gradient(180deg, var(--cyber-guide-accent-soft), rgba(255, 255, 255, 0.018));
  border-radius: 18px;
  padding: 15px;
}
.cyber-guide-memory .eyebrow {
  color: var(--cyber-guide-accent);
}
.cyber-guide-memory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}
.cyber-guide-memory-grid > div {
  display: grid;
  grid-template-columns: 23px 1fr;
  gap: 7px;
  align-items: start;
}
.cyber-guide-memory-grid span {
  color: var(--cyber-guide-accent);
  font-weight: 950;
}
.cyber-guide-memory-grid p {
  margin: 0;
  color: #d0d4e1;
  font-size: 0.8rem;
  line-height: 1.45;
}
.cyber-guide-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  background: #11141f;
  border-radius: 18px;
  padding: 15px;
}
.cyber-guide-check .eyebrow {
  color: var(--cyber-guide-accent);
}
.cyber-guide-check h4 {
  margin: 4px 0 0;
  font-size: 0.94rem;
  line-height: 1.45;
}
.cyber-guide-answer {
  grid-column: 1/-1;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: #cdd2df;
  font-size: 0.84rem;
  line-height: 1.6;
}
.cyber-guide-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cyber-guide-sources,
.cyber-guide-actions {
  border: 1px solid var(--line);
  background: #10131e;
  border-radius: 16px;
  padding: 12px;
}
.cyber-guide-sources > span,
.cyber-guide-actions > span {
  display: block;
  color: #929aaf;
  font-size: 0.67rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.cyber-guide-sources {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.cyber-guide-sources > span {
  width: 100%;
  margin-bottom: 1px;
}
.cyber-guide-sources a {
  color: #dfe2ef;
  text-decoration: none;
  border: 1px solid var(--line);
  background: #151927;
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 0.7rem;
}
.cyber-guide-sources a:hover {
  border-color: var(--cyber-guide-accent-line);
  color: #fff;
}
.cyber-guide-actions .row {
  gap: 7px;
}
.cyber-guide-actions .btn {
  padding: 7px 9px;
  font-size: 0.75rem;
}
.cyber-guide-pagination {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
}
.cyber-guide-number-nav {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.cyber-guide-number-nav button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  background: #121522;
  color: #aeb5c9;
  border-radius: 9px;
  font-size: 0.7rem;
  font-weight: 900;
}
.cyber-guide-number-nav button:hover {
  border-color: var(--cyber-guide-accent-line);
  color: #fff;
}
.cyber-guide-number-nav button.active {
  background: var(--cyber-guide-accent);
  color: #0b0d16;
  border-color: transparent;
}

@media (max-width: 980px) {
  .cyber-guide-shell {
    grid-template-columns: 1fr;
  }
  .cyber-guide-index {
    position: static;
  }
  .cyber-guide-page-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .cyber-guide-page-link {
    display: block;
    text-align: center;
    padding: 7px;
  }
  .cyber-guide-page-link b {
    display: none;
  }
  .cyber-guide-page-link span {
    margin: auto;
  }
  .cyber-guide-index-head {
    margin-bottom: 8px;
  }
}
@media (max-width: 720px) {
  .cyber-guide-grid2,
  .cyber-guide-grid3,
  .cyber-guide-terms,
  .cyber-guide-compare,
  .cyber-guide-memory-grid,
  .cyber-guide-bottom {
    grid-template-columns: 1fr;
  }
  .cyber-guide-terms > div:last-child {
    grid-column: auto;
  }
  .cyber-guide-codegrid > div {
    grid-template-columns: 1fr;
  }
  .cyber-guide-hero {
    padding: 18px;
  }
  .cyber-guide-hero-number {
    font-size: 2.7rem;
  }
  .cyber-guide-check {
    grid-template-columns: 1fr;
  }
  .cyber-guide-check .btn {
    justify-self: start;
  }
  .cyber-guide-pagination {
    grid-template-columns: 1fr 1fr;
  }
  .cyber-guide-number-nav {
    grid-column: 1/-1;
    grid-row: 1;
  }
  .cyber-guide-pagination .btn {
    width: 100%;
  }
  .cyber-guide-roadmap > div {
    grid-template-columns: 1fr;
  }
  .cyber-guide-roadmap > div > span {
    grid-row: auto;
    justify-self: start;
    margin-bottom: 3px;
  }
}
@media (max-width: 480px) {
  .cyber-guide-content {
    padding: 16px;
  }
  .cyber-guide-page-list {
    grid-template-columns: repeat(5, 1fr);
  }
  .cyber-guide-hero-number {
    display: none;
  }
  .cyber-guide-page-top {
    align-items: flex-start;
    flex-direction: column;
  }
  .cyber-guide-number-nav button {
    width: 27px;
    height: 27px;
  }
}

/* À revoir : organisation et exclusion des matières */
.subjects-review-hub {
  gap: 14px;
}
.subjects-matter-summary {
  display: grid;
  gap: 12px;
  border-color: rgba(172, 172, 255, 0.22);
  background: linear-gradient(180deg, rgba(172, 172, 255, 0.055), rgba(255, 255, 255, 0.012));
}
.subjects-matter-summary-top,
.subjects-matter-manager-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.subjects-matter-summary h3,
.subjects-matter-manager h4 {
  margin: 4px 0 5px;
}
.subjects-excluded-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.subjects-excluded-chip {
  appearance: none;
  border: 1px solid rgba(255, 126, 145, 0.34);
  background: rgba(255, 126, 145, 0.09);
  color: #ffd8df;
  border-radius: 999px;
  padding: 6px 9px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}
.subjects-excluded-chip:hover {
  border-color: rgba(255, 126, 145, 0.58);
  background: rgba(255, 126, 145, 0.14);
}
.subjects-excluded-chip span {
  opacity: 0.7;
  margin-left: 4px;
}
.subjects-all-included {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #bfe8d4;
  font-size: 0.79rem;
  font-weight: 700;
}
.subjects-all-included > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(105, 229, 165, 0.1);
  border: 1px solid rgba(105, 229, 165, 0.26);
}
.subjects-matter-manager {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: grid;
  gap: 14px;
}
.subjects-matter-manager-head p {
  max-width: 700px;
  margin-bottom: 0;
}
.subjects-matter-group {
  display: grid;
  gap: 8px;
}
.subjects-matter-group-title {
  font-size: 0.71rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted);
  font-weight: 900;
}
.subjects-matter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.subjects-matter-toggle {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  text-align: left;
  border: 1px solid var(--line);
  background: #0d1420;
  color: var(--text);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    opacity 0.15s ease;
}
.subjects-matter-toggle:hover {
  border-color: rgba(172, 172, 255, 0.42);
  background: rgba(172, 172, 255, 0.06);
}
.subjects-matter-toggle.is-included {
  border-color: rgba(105, 229, 165, 0.2);
}
.subjects-matter-toggle.is-excluded {
  opacity: 0.68;
  background: rgba(255, 126, 145, 0.035);
  border-color: rgba(255, 126, 145, 0.2);
}
.subjects-matter-check {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 950;
  background: rgba(105, 229, 165, 0.09);
  color: var(--green);
  border: 1px solid rgba(105, 229, 165, 0.18);
}
.subjects-matter-toggle.is-excluded .subjects-matter-check {
  background: rgba(255, 126, 145, 0.08);
  color: var(--red);
  border-color: rgba(255, 126, 145, 0.2);
}
.subjects-matter-label {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.subjects-matter-label b {
  font-size: 0.78rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.subjects-matter-label small {
  font-size: 0.67rem;
  color: var(--muted);
}
.subjects-matter-state {
  font-size: 0.66rem;
  font-weight: 900;
  color: #a9d9c4;
}
.subjects-matter-toggle.is-excluded .subjects-matter-state {
  color: #e7aeb9;
}
.subjects-stat-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 700;
}
@media (max-width: 920px) {
  .subjects-matter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .subjects-matter-summary-top,
  .subjects-matter-manager-head {
    flex-direction: column;
  }
  .subjects-matter-summary-top > .btn,
  .subjects-matter-manager-head > .btn {
    width: 100%;
  }
  .subjects-matter-grid {
    grid-template-columns: 1fr;
  }
  .subjects-matter-toggle {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }
}

/* Glossaire : mémos anti-confusion */
.glossary-confusion-panel {
  margin-top: 14px;
  border: 1px solid rgba(172, 172, 255, 0.22);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(172, 172, 255, 0.07), rgba(255, 172, 215, 0.04));
}
.glossary-confusion-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.glossary-confusion-head h4 {
  margin: 4px 0 0;
  font-size: 1rem;
}
.glossary-confusion-head > span {
  border: 1px solid rgba(255, 172, 215, 0.24);
  border-radius: 999px;
  background: rgba(255, 172, 215, 0.07);
  padding: 6px 9px;
  color: #ffd7eb;
  font-size: 0.66rem;
  font-weight: 850;
  white-space: nowrap;
}
.glossary-confusion-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.glossary-confusion-grid article {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  padding: 11px;
  background: #101421;
}
.glossary-confusion-grid strong {
  display: block;
  color: #fff;
  font-size: 0.74rem;
  line-height: 1.35;
}
.glossary-confusion-grid p {
  margin: 6px 0 0;
  color: #b8bfd2;
  font-size: 0.67rem;
  line-height: 1.52;
}
.glossary-entry.is-memo {
  border-color: rgba(255, 172, 215, 0.28);
  box-shadow: inset 3px 0 0 rgba(172, 172, 255, 0.65);
}
.glossary-entry.is-memo .glossary-entry-toggle {
  background: linear-gradient(90deg, rgba(172, 172, 255, 0.055), rgba(255, 172, 215, 0.035));
}
@media (max-width: 1250px) {
  .glossary-confusion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .glossary-confusion-head {
    flex-direction: column;
  }
  .glossary-confusion-grid {
    grid-template-columns: 1fr;
  }
}

/* Glossaire : classement multi-catégories sans doublons */
.glossary-entry-categories {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
}
.glossary-entry-categories > span {
  color: var(--muted);
  font-size: 0.63rem;
  margin-right: 2px;
}
.glossary-entry-categories button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid rgba(255, 172, 215, 0.16);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 172, 215, 0.055), rgba(172, 172, 255, 0.055));
  color: #d8dbef;
  padding: 5px 8px;
  font-size: 0.61rem;
  line-height: 1.25;
  cursor: pointer;
  text-align: left;
}
.glossary-entry-categories button:hover {
  border-color: rgba(172, 172, 255, 0.38);
  color: #fff;
  background: rgba(172, 172, 255, 0.1);
}
.glossary-entry-categories button b {
  display: inline-grid;
  place-items: center;
  min-width: 23px;
  height: 20px;
  border-radius: 7px;
  background: rgba(172, 172, 255, 0.12);
  color: #d7d6ff;
  font-size: 0.59rem;
}
@media (max-width: 760px) {
  .glossary-entry-categories {
    align-items: flex-start;
  }
  .glossary-entry-categories > span {
    width: 100%;
  }
  .glossary-entry-categories button {
    border-radius: 11px;
  }
}

/* GLPI rebuilt */
.glpi-tickets-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
  gap: 14px;
  align-items: start;
}
.glpi-tickets-main,
.glpi-tickets-memo {
  min-width: 0;
}
.glpi-tickets-memo {
  position: sticky;
  top: 14px;
}
.glpi-tickets-memo .result-item {
  line-height: 1.5;
}
@media (max-width: 900px) {
  .glpi-tickets-shell {
    grid-template-columns: 1fr;
  }
  .glpi-tickets-memo {
    position: static;
  }
}

/* Accueil : proportions harmonisées avec la Banque à Questions */
@media (min-width: 761px) {
  .home .library-hero h1 {
    font-size: clamp(2.6rem, 5.3vw, 5.5rem);
    line-height: 0.94;
    font-weight: 700;
    letter-spacing: -0.055em;
    margin: 12px 0 16px;
    max-width: 1040px;
  }
  .home .library-hero .lead {
    font-size: 1.03rem;
    line-height: 1.7;
    max-width: 900px;
  }
  .topbar .navbtn {
    font-size: 1rem;
    padding: 9px 12px;
  }
  .topbar .nav-tools-count {
    min-width: 22px;
    height: 22px;
    font-size: 0.72rem;
  }
}
@media (max-width: 760px) {
  .home .library-hero h1 {
    font-size: clamp(2.4rem, 13vw, 4rem);
    line-height: 0.94;
    font-weight: 700;
    letter-spacing: -0.055em;
  }
  .topbar .navbtn {
    font-size: 0.92rem;
  }
}

/* ========================================================================== */
/* Subnetting Trainer                                                   */
/* ========================================================================== */
.subnet-training {
  display: grid;
  gap: 14px;
}
.subnet-hero {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-end;
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.07), rgba(172, 172, 255, 0.06));
}
.subnet-hero h3 {
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  margin: 7px 0 8px;
  letter-spacing: -0.035em;
}
.subnet-hero p {
  margin: 0;
  color: var(--muted);
  max-width: 820px;
  line-height: 1.65;
}
.subnet-progress {
  display: grid;
  gap: 3px;
  text-align: right;
  white-space: nowrap;
}
.subnet-progress span {
  font-weight: 800;
}
.subnet-progress small {
  color: var(--muted);
}
.sub-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 1px 8px;
  scrollbar-width: thin;
}
.sub-tabs button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #141827;
  color: #b8bed0;
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 0.79rem;
  font-weight: 750;
}
.sub-tabs button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.sub-tabs button.active {
  background: linear-gradient(90deg, var(--pink), var(--violet));
  border-color: transparent;
  color: #0d1018;
}
.sub-stack {
  display: grid;
  gap: 14px;
}
.sub-two {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 14px;
}
.sub-panel h3 {
  margin: 4px 0 7px;
}
.sub-mini-guide p {
  margin: 8px 0;
  color: var(--muted);
  line-height: 1.5;
}
.sub-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(172, 172, 255, 0.25);
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.07), rgba(172, 172, 255, 0.08));
  border-radius: 16px;
  padding: 14px 15px;
}
.sub-callout b {
  min-width: max-content;
}
.sub-callout span {
  color: #c1c6d7;
  line-height: 1.55;
}
.sub-callout.soft {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--line);
}
.sub-formula-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.sub-kpi {
  border: 1px solid var(--line);
  background: #111522;
  border-radius: 15px;
  padding: 13px;
}
.sub-kpi span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  margin-bottom: 5px;
}
.sub-kpi b {
  font-size: 0.95rem;
}
.sub-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.sub-steps > div {
  border: 1px solid var(--line);
  background: #111522;
  border-radius: 15px;
  padding: 14px;
}
.sub-steps b {
  display: block;
  margin-bottom: 5px;
}
.sub-steps span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.sub-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.sub-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  background: #0f1320;
}
.sub-table th,
.sub-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 0.78rem;
  white-space: nowrap;
}
.sub-table th {
  position: sticky;
  top: 0;
  background: #171b2b;
  color: #bfc5d7;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sub-table tr:last-child td {
  border-bottom: 0;
}
.sub-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.sub-section-head h3 {
  font-size: 1.35rem;
  margin: 5px 0;
}
.sub-section-head p {
  margin: 0;
  color: var(--muted);
  max-width: 820px;
  line-height: 1.5;
}
.sub-exercise-box {
  border: 1px solid var(--line);
  background: #0f1320;
  border-radius: 18px;
  padding: 16px;
}
.sub-ip-big {
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.sub-exercise-box label {
  display: grid;
  gap: 6px;
  color: #c9cedd;
  font-size: 0.76rem;
}
.sub-exercise-box label > .field {
  width: 100%;
}
.sub-exercise-box > .row {
  margin-top: 12px;
}
.sub-input-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}
.sub-solution {
  margin-top: 12px;
  border: 1px solid rgba(157, 243, 199, 0.2);
  background: rgba(157, 243, 199, 0.045);
  border-radius: 15px;
  padding: 14px;
  line-height: 1.55;
}
.sub-solution p {
  margin: 7px 0;
}
.sub-binary {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 7px 12px;
  align-items: center;
  margin: 12px 0;
}
.sub-binary span {
  color: var(--muted);
  font-size: 0.76rem;
}
.sub-binary code {
  overflow: auto;
  background: #080b12;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  color: #d9dcff;
  font-size: 0.76rem;
}
.sub-answer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.sub-answer-grid .sub-kpi {
  padding: 11px;
}
.sub-needs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
}
.sub-needs span {
  border: 1px solid var(--line);
  background: #111522;
  border-radius: 999px;
  padding: 7px 10px;
  color: #bfc4d5;
  font-size: 0.75rem;
}
.sub-needs b {
  color: #fff;
  margin-left: 4px;
}
.sub-vlsm,
.sub-exam {
  padding: 0;
  overflow: hidden;
}
.sub-vlsm summary,
.sub-exam summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.045), rgba(172, 172, 255, 0.04));
}
.sub-vlsm summary::-webkit-details-marker,
.sub-exam summary::-webkit-details-marker {
  display: none;
}
.sub-vlsm summary span,
.sub-exam summary span {
  display: grid;
  gap: 3px;
}
.sub-vlsm summary small,
.sub-exam summary small {
  color: var(--muted);
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sub-vlsm summary b,
.sub-exam summary b {
  font-size: 0.95rem;
}
.sub-vlsm summary i,
.sub-exam summary i {
  font-style: normal;
  color: var(--muted);
  font-size: 1.2rem;
}
.sub-vlsm[open] summary i,
.sub-exam[open] summary i {
  transform: rotate(45deg);
}
.sub-vlsm-body {
  padding: 0 18px 18px;
}
.sub-warning {
  border: 1px solid rgba(255, 211, 110, 0.24);
  background: rgba(255, 211, 110, 0.055);
  border-radius: 15px;
  padding: 14px;
}
.sub-warning p {
  margin: 7px 0 0;
  color: #d2c8ad;
  line-height: 1.6;
}
.sub-note {
  border-left: 3px solid var(--violet);
  padding-left: 11px;
  color: #c8ccdc;
}
.sub-vlsm-solution[hidden],
.sub-solution[hidden] {
  display: none !important;
}
@media (max-width: 1050px) {
  .sub-formula-grid,
  .sub-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sub-input-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sub-answer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sub-two {
    grid-template-columns: 1fr;
  }
}

.sub-learning-card {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(560px, 1.25fr);
  gap: 18px;
  align-items: stretch;
  border: 1px solid rgba(172, 172, 255, 0.26);
  background: linear-gradient(
    115deg,
    rgba(255, 172, 215, 0.075),
    rgba(172, 172, 255, 0.075) 48%,
    rgba(157, 231, 255, 0.05)
  );
  border-radius: 20px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.sub-learning-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
  min-width: 0;
  padding: 2px;
}
.sub-learning-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.sub-learning-badge {
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(157, 243, 199, 0.24);
  background: rgba(157, 243, 199, 0.07);
  color: #bdf5d7;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sub-learning-copy strong {
  display: block;
  font-size: 1.12rem;
  letter-spacing: -0.015em;
}
.sub-learning-copy p {
  margin: 5px 0 0;
  color: #bfc5d7;
  font-size: 0.82rem;
  line-height: 1.58;
  max-width: 650px;
}
.sub-learning-cta {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #111522;
  border-radius: 12px;
  padding: 10px 12px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 850;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}
.sub-learning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sub-learning-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 172, 215, 0.45);
  background: #171b2b;
}
.sub-learning-cta b {
  color: var(--pink);
  font-size: 1rem;
}
.sub-learning-visual {
  border: 1px solid rgba(255, 255, 255, 0.085);
  background: linear-gradient(180deg, rgba(12, 16, 27, 0.94), rgba(15, 19, 32, 0.98));
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
  overflow: hidden;
}
.sub-visual-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.79rem;
  font-weight: 850;
}
.sub-visual-top span:not(.sv-arrow) {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 9px;
  background: #101421;
}
.sv-cidr {
  color: #ffacd7 !important;
  background: rgba(255, 172, 215, 0.07) !important;
}
.sv-mask {
  color: #acacff !important;
  background: rgba(172, 172, 255, 0.07) !important;
}
.sv-block {
  color: #9de7ff !important;
  background: rgba(157, 231, 255, 0.07) !important;
}
.sv-arrow {
  color: #788096;
}
.sub-visual-caption {
  text-align: center;
  color: #8991a8;
  font-size: 0.67rem;
  margin: 9px 0 10px;
}
.sub-range-preview {
  display: grid;
  grid-template-columns: 0.85fr 2.1fr 0.85fr 1fr;
  gap: 6px;
}
.sub-range-preview > div {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 8px 6px;
  text-align: center;
}
.sub-range-preview b {
  display: block;
  font-size: 0.94rem;
  line-height: 1.1;
}
.sub-range-preview span {
  display: block;
  margin-top: 4px;
  font-size: 0.63rem;
  color: #b8bfd0;
  line-height: 1.25;
}
.sv-network {
  border-color: rgba(157, 243, 199, 0.24) !important;
  background: rgba(157, 243, 199, 0.065) !important;
}
.sv-network b {
  color: #9df3c7;
}
.sv-hosts {
  border-color: rgba(255, 185, 223, 0.2) !important;
  background: rgba(255, 185, 223, 0.05) !important;
}
.sv-hosts b {
  color: #ffb9df;
}
.sv-broadcast {
  border-color: rgba(255, 211, 157, 0.24) !important;
  background: rgba(255, 211, 157, 0.06) !important;
}
.sv-broadcast b {
  color: #ffd39d;
}
.sv-next {
  border-color: rgba(157, 231, 255, 0.2) !important;
  background: rgba(157, 231, 255, 0.045) !important;
}
.sv-next b {
  color: #9de7ff;
}
.sub-visual-memory {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.sub-visual-memory span {
  flex: 1 1 190px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: #101421;
  border-radius: 9px;
  padding: 7px 8px;
  color: #aeb5c9;
  font-size: 0.65rem;
  line-height: 1.35;
}
.sub-visual-memory b {
  color: #f2f4fb;
}

@media (max-width: 1050px) {
  .sub-learning-card {
    grid-template-columns: 1fr;
  }
  .sub-learning-main {
    gap: 12px;
  }
  .sub-learning-cta {
    align-self: flex-start;
  }
}
@media (max-width: 680px) {
  .subnet-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .sub-learning-card {
    padding: 12px;
  }
  .sub-learning-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .sub-learning-cta {
    justify-content: center;
    width: 100%;
  }
  .sub-range-preview {
    grid-template-columns: 1fr 1.55fr;
  }
  .sub-range-preview > div {
    min-height: 64px;
  }
  .subnet-progress {
    text-align: left;
  }
  .sub-formula-grid,
  .sub-steps,
  .sub-input-grid,
  .sub-answer-grid {
    grid-template-columns: 1fr;
  }
  .sub-section-head {
    align-items: stretch;
    flex-direction: column;
  }
  .sub-binary {
    grid-template-columns: 1fr;
  }
  .sub-table th,
  .sub-table td {
    padding: 9px 10px;
  }
  .sub-callout {
    display: grid;
  }
  .sub-callout b {
    min-width: 0;
  }
}

/* ===== PowerShell Trainer ===== */
.powershell-shell {
  display: grid;
  gap: 16px;
}
.powershell-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 22px;
  align-items: stretch;
}
.powershell-hero-copy h3 {
  font-size: clamp(26px, 3vw, 40px);
  margin: 6px 0 10px;
}
.powershell-hero-copy p {
  line-height: 1.75;
  max-width: 850px;
}
.powershell-object-card {
  border: 1px solid rgba(155, 133, 255, 0.26);
  background: linear-gradient(135deg, rgba(242, 156, 214, 0.1), rgba(128, 184, 255, 0.08));
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
}
.powershell-object-card span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.powershell-object-card strong {
  font-size: 18px;
}
.powershell-object-card code,
.powershell-example code,
.powershell-command code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.powershell-object-card code {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  color: #dbe8ff;
}
.powershell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.powershell-command-list,
.powershell-tip-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}
.powershell-command {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
}
.powershell-command code {
  font-weight: 800;
  color: #c6b7ff;
  overflow-wrap: anywhere;
}
.powershell-command span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.powershell-tip {
  padding: 11px 12px;
  border-left: 3px solid #bd9dff;
  background: rgba(255, 255, 255, 0.018);
  border-radius: 0 12px 12px 0;
}
.powershell-tip b {
  font-size: 14px;
}
.powershell-tip p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.powershell-start {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.powershell-start h3 {
  margin: 5px 0;
}
.powershell-question {
  font-size: clamp(21px, 2.4vw, 31px);
  line-height: 1.25;
  max-width: 1000px;
}
.powershell-feedback p {
  line-height: 1.6;
}
.powershell-example {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(128, 184, 255, 0.22);
  background: rgba(128, 184, 255, 0.06);
}
.powershell-example span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted);
}
.powershell-example code {
  overflow-wrap: anywhere;
  color: #bde2ff;
}
.powershell-complete .big {
  margin: 10px 0;
}
.powershell-progress-head {
  align-items: center;
}
@media (max-width: 900px) {
  .powershell-hero,
  .powershell-grid {
    grid-template-columns: 1fr;
  }
  .powershell-start {
    align-items: flex-start;
    flex-direction: column;
  }
  .powershell-command {
    grid-template-columns: 1fr;
  }
  .powershell-object-card {
    min-width: 0;
  }
}
@media (max-width: 560px) {
  .powershell-example {
    grid-template-columns: 1fr;
  }
  .powershell-object-card,
  .powershell-command,
  .powershell-tip {
    border-radius: 12px;
  }
}

/* Subnetting : bases CIDR / masque */
.sub-cidr-foundation h3 {
  margin: 5px 0 7px;
  font-size: 1.45rem;
}
.sub-cidr-foundation > p {
  margin: 0 0 14px;
  line-height: 1.6;
}
.sub-cidr-equation {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 14px 0 2px;
}
.sub-cidr-equation > div {
  min-width: 104px;
  border: 1px solid var(--line);
  background: #0f1320;
  border-radius: 14px;
  padding: 11px 13px;
  text-align: center;
}
.sub-cidr-equation span {
  display: block;
  font-size: 1.18rem;
  font-weight: 900;
}
.sub-cidr-equation small {
  display: block;
  color: var(--muted);
  font-size: 0.67rem;
  margin-top: 3px;
}
.sub-cidr-equation > b {
  color: var(--muted);
}
.sub-cidr-equation > strong {
  font-size: 1.5rem;
  padding: 8px 12px;
  border-radius: 13px;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  color: #0d1018;
}
.sub-cidr-table code {
  color: #d9dcff;
}
.sub-memory-chain {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 13px 2px 2px;
}
.sub-memory-chain span {
  display: grid;
  place-items: center;
  min-width: 74px;
  border: 1px solid var(--line);
  background: #111522;
  border-radius: 13px;
  padding: 8px 10px;
}
.sub-memory-chain b {
  font-size: 0.86rem;
}
.sub-memory-chain i {
  font-style: normal;
  color: #c9cdef;
  font-size: 0.77rem;
  margin-top: 2px;
}
.sub-memory-chain em {
  font-style: normal;
  color: var(--muted);
}
.sub-cidr-question {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  background: #0f1320;
  border-radius: 16px;
  padding: 15px;
  margin: 12px 0;
}
.sub-cidr-question span,
.sub-cidr-question small {
  color: var(--muted);
}
.sub-cidr-question span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sub-cidr-question strong {
  font-size: clamp(1.35rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.sub-cidr-question small {
  font-size: 0.78rem;
}
.sub-steps-vertical {
  grid-template-columns: 1fr;
}
.sub-session-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
  color: var(--muted);
  font-size: 0.78rem;
}
.sub-session-score b {
  color: #fff;
  font-size: 1rem;
}
@media (max-width: 680px) {
  .sub-cidr-equation > div {
    min-width: 88px;
    flex: 1;
  }
  .sub-cidr-equation > b {
    display: none;
  }
  .sub-cidr-equation > strong {
    width: 100%;
    text-align: center;
  }
  .sub-memory-chain {
    padding-bottom: 5px;
  }
}

/* Subnetting : exercice complet + simulateur */
.sub-sim-inputs {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(250px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}
.sub-sim-inputs label {
  display: grid;
  gap: 6px;
  color: #c9cedd;
  font-size: 0.76rem;
}
.sub-sim-result {
  display: grid;
  gap: 14px;
}
.sub-sim-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}
.sub-sim-head h3 {
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  margin: 5px 0;
}
.sub-sim-head p {
  margin: 0;
  color: var(--muted);
}
.sub-sim-cidr {
  display: grid;
  justify-items: end;
  gap: 4px;
}
.sub-sim-cidr span {
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--pink);
}
.sub-sim-cidr small {
  color: #c5cae0;
  font-family: 'Cascadia Code', Consolas, monospace;
}
.sub-sim-range {
  display: grid;
  grid-template-columns: 1fr 2.1fr 1fr;
  gap: 8px;
}
.sub-sim-range > div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.sub-sim-range b {
  display: block;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.sub-sim-range span {
  display: block;
  margin-top: 5px;
  color: #b8bfd0;
  font-size: 0.68rem;
}
.sub-sim-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.sub-sim-details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0f1320;
  overflow: hidden;
}
.sub-sim-details summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 800;
  color: #dfe3f4;
}
.sub-sim-details > div,
.sub-sim-details > p {
  margin-left: 14px;
  margin-right: 14px;
}
.sub-field-ok {
  border-color: rgba(157, 243, 199, 0.65) !important;
  background: rgba(157, 243, 199, 0.055) !important;
}
.sub-field-bad {
  border-color: rgba(255, 145, 162, 0.62) !important;
  background: rgba(255, 145, 162, 0.05) !important;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}
@media (max-width: 900px) {
  .sub-sim-inputs {
    grid-template-columns: 1fr 1fr;
  }
  .sub-sim-inputs .btn {
    width: 100%;
  }
  .sub-sim-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .sub-sim-inputs {
    grid-template-columns: 1fr;
  }
  .sub-sim-head {
    display: grid;
  }
  .sub-sim-cidr {
    justify-items: start;
  }
  .sub-sim-range {
    grid-template-columns: 1fr;
  }
  .sub-sim-grid {
    grid-template-columns: 1fr;
  }
}

/* lisibilité des listes + raisonnement détaillé Subnetting */
select.field {
  color-scheme: dark;
}
select.field option {
  background: #111522;
  color: #f4f8ff;
}
.sub-reasoning {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.sub-reasoning h4 {
  margin: 0 0 9px;
  font-size: 0.95rem;
}
.sub-reasoning ol {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
  color: #c8ccdc;
  line-height: 1.55;
}
.sub-reasoning li b {
  color: #f4f8ff;
}

/* Windows Server Step by Step */
.windows-workshop-shell {
  display: grid;
  gap: 16px;
}
.windows-workshop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: 18px;
  align-items: stretch;
}
.windows-workshop-hero h3 {
  margin: 5px 0 8px;
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
}
.windows-workshop-hero p {
  margin: 0;
  line-height: 1.65;
}
.windows-workshop-progress-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.windows-workshop-progress-card span {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}
.windows-workshop-progress-card strong {
  font-size: 1.05rem;
}
.windows-workshop-progress-card small {
  color: var(--muted);
  line-height: 1.45;
}
.windows-workshop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.windows-workshop-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.windows-workshop-chapter-card {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 16px;
  padding: 14px;
  text-align: left;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}
.windows-workshop-chapter-card:hover {
  border-color: rgba(139, 132, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
.windows-workshop-code {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(139, 132, 255, 0.1);
  border: 1px solid rgba(139, 132, 255, 0.25);
  font-weight: 800;
  color: #c7c3ff;
}
.windows-workshop-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.windows-workshop-card-copy strong {
  font-size: 0.98rem;
}
.windows-workshop-card-copy small,
.windows-workshop-card-copy em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.windows-workshop-mini-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 4px;
}
.windows-workshop-mini-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #9089ff, #d188f8);
  border-radius: inherit;
}
.windows-workshop-arrow {
  font-size: 1.45rem;
  color: var(--muted);
}
.windows-workshop-detail {
  margin-top: 2px;
}
.windows-workshop-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.windows-workshop-detail-head h3 {
  margin: 5px 0 6px;
  font-size: 1.4rem;
}
.windows-workshop-detail-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.windows-workshop-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
  gap: 18px;
}
.windows-workshop-checklist {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.windows-workshop-check {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 11px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}
.windows-workshop-check input {
  margin-top: 4px;
  accent-color: #918cff;
}
.windows-workshop-check span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  line-height: 1.45;
}
.windows-workshop-check span b {
  color: #aaa4ff;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.windows-workshop-detail aside {
  border-left: 1px solid var(--border);
  padding-left: 18px;
}
.windows-workshop-detail aside h4 {
  line-height: 1.45;
  margin: 12px 0;
}
.windows-workshop-quiz-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.windows-workshop-quiz-done {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.025);
}
.windows-workshop-quiz-done strong {
  font-size: 1.7rem;
}
.windows-workshop-quiz-done p {
  color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 860px) {
  .windows-workshop-hero,
  .windows-workshop-detail-grid {
    grid-template-columns: 1fr;
  }
  .windows-workshop-detail aside {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 16px;
  }
  .windows-workshop-map {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .windows-workshop-chapter-card {
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    padding: 11px;
  }
  .windows-workshop-code {
    width: 40px;
    height: 40px;
  }
  .windows-workshop-detail-head {
    flex-direction: column;
  }
  .windows-workshop-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* Windows Server Step by Step : navigation latérale + panneau de travail */
.windows-workshop-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.windows-workshop-nav-panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
  padding: 14px;
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 104px);
  overflow: auto;
}
.windows-workshop-nav-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.windows-workshop-nav-head h4 {
  margin: 4px 0 0;
  font-size: 1.02rem;
}
.windows-workshop-nav-list {
  display: grid;
  gap: 7px;
}
.windows-workshop-nav-item {
  appearance: none;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  border-radius: 14px;
  padding: 10px;
  text-align: left;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}
.windows-workshop-nav-item:hover {
  border-color: rgba(139, 132, 255, 0.34);
  background: rgba(255, 255, 255, 0.025);
}
.windows-workshop-nav-item.active {
  border-color: rgba(196, 143, 255, 0.58);
  background: linear-gradient(135deg, rgba(238, 143, 205, 0.09), rgba(132, 141, 255, 0.07));
}
.windows-workshop-nav-item.active .windows-workshop-code {
  background: linear-gradient(135deg, rgba(239, 145, 208, 0.95), rgba(157, 145, 255, 0.95));
  color: #11131e;
  border-color: transparent;
}
.windows-workshop-nav-item.active .windows-workshop-arrow {
  color: #d6b7ff;
}
.windows-workshop-nav-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.windows-workshop-nav-copy strong {
  font-size: 0.9rem;
  line-height: 1.25;
}
.windows-workshop-nav-copy small,
.windows-workshop-nav-copy em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}
.windows-workshop-nav-copy .windows-workshop-mini-progress {
  margin-top: 4px;
}
.windows-workshop-detail-host {
  min-width: 0;
}
.windows-workshop-detail {
  margin: 0;
  min-height: 430px;
}
.windows-workshop-section-help {
  margin: 7px 0 12px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}
.windows-workshop-mobile-picker {
  display: none;
}
.windows-workshop-mobile-picker > span {
  display: block;
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 980px) {
  .windows-workshop-workspace {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  }
  .windows-workshop-detail-grid {
    grid-template-columns: 1fr;
  }
  .windows-workshop-detail aside {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 16px;
  }
}
@media (max-width: 760px) {
  .windows-workshop-workspace {
    grid-template-columns: 1fr;
  }
  .windows-workshop-nav-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .windows-workshop-nav-list {
    display: none;
  }
  .windows-workshop-mobile-picker {
    display: block;
  }
  .windows-workshop-nav-head {
    margin-bottom: 12px;
  }
}

/* retour contextuel depuis le sélecteur de niveau */
.levels-chooser-return {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.levels-chooser-return .back {
  background: linear-gradient(135deg, rgba(255, 172, 215, 0.1), rgba(172, 172, 255, 0.1));
  border-color: rgba(172, 172, 255, 0.28);
}
.levels-chooser-return > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}
@media (max-width: 640px) {
  .levels-chooser-return {
    align-items: stretch;
    flex-direction: column;
  }
  .levels-chooser-return .back {
    width: 100%;
    text-align: left;
  }
}

/* Saisie technique */

.tt-shell {
  display: grid;
  gap: 14px;
}
.tt-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}
.tt-head h3 {
  margin: 5px 0 7px;
}
.tt-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.tt-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.tt-kpi {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 14px;
  padding: 12px;
}
.tt-kpi b {
  display: block;
  font-size: 1.25rem;
}
.tt-kpi span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 3px;
}
.tt-target {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #111e31, #0a1728);
  border-radius: 18px;
  padding: 22px;
  line-height: 1.65;
  font-size: 1.12rem;
  font-weight: 750;
  min-height: 120px;
}
.tt-target .done {
  color: var(--green);
}
.tt-target .bad {
  background: rgba(255, 125, 147, 0.18);
  color: #ffdce3;
  border-radius: 4px;
}
.tt-topic {
  display: inline-flex;
  margin-bottom: 10px;
  border: 1px solid rgba(172, 172, 255, 0.24);
  background: rgba(172, 172, 255, 0.08);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.68rem;
  color: #dad9ff;
}
.tt-input {
  width: 100%;
  min-height: 115px;
  resize: vertical;
  border: 1px solid var(--line);
  background: #071321;
  color: #fff;
  border-radius: 16px;
  padding: 15px;
  outline: none;
  line-height: 1.55;
}
.tt-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(105, 183, 255, 0.12);
}
.tt-input.complete {
  border-color: rgba(105, 229, 165, 0.55);
  box-shadow: 0 0 0 3px rgba(105, 229, 165, 0.08);
}
.tt-status {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.tt-live {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.tt-pill {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 0.7rem;
  color: #cbd7e8;
}
.tt-pill.good {
  border-color: rgba(105, 229, 165, 0.35);
  color: #c9f8df;
}
.tt-pill.warn {
  border-color: rgba(255, 211, 110, 0.35);
  color: #ffe9ac;
}
.tt-result {
  border: 1px solid rgba(105, 229, 165, 0.32);
  background: rgba(105, 229, 165, 0.07);
  border-radius: 15px;
  padding: 13px;
}
.tt-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.tt-summary-card {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 15px;
  padding: 15px;
}
.tt-summary-card b {
  display: block;
  font-size: 1.5rem;
}
.tt-summary-card span {
  color: var(--muted);
  font-size: 0.76rem;
}
.tt-hint {
  color: var(--muted);
  font-size: 0.75rem;
}
.tt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .tt-head {
    grid-template-columns: 1fr;
  }
  .tt-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .tt-summary-grid {
    grid-template-columns: 1fr;
  }
  .tt-target {
    font-size: 1rem;
  }
}

/* Cybersécurité : défense */

.cyber-defense-shell {
  display: grid;
  gap: 14px;
}
.cyber-defense-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
}
.cyber-defense-note {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 16px;
  padding: 14px;
}
.cyber-defense-note strong {
  display: block;
  margin-bottom: 6px;
}
.cyber-defense-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.82rem;
}
.cyber-defense-source {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cyber-defense-source a {
  font-size: 0.7rem;
  color: #cfd8ff;
  text-decoration: none;
  border: 1px solid rgba(172, 172, 255, 0.24);
  background: rgba(172, 172, 255, 0.07);
  padding: 5px 8px;
  border-radius: 999px;
}
.cyber-defense-source a:hover {
  text-decoration: underline;
}
.cyber-defense-progress {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.cyber-defense-question {
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.5;
  margin: 13px 0;
}
.cyber-defense-context {
  border-left: 3px solid rgba(172, 172, 255, 0.55);
  padding: 10px 12px;
  background: rgba(172, 172, 255, 0.055);
  border-radius: 0 12px 12px 0;
  color: #d9e3f3;
  line-height: 1.55;
  margin: 10px 0;
}
.cyber-defense-log {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  background: #07111d;
  border-radius: 14px;
  padding: 13px;
  font:
    600 0.78rem/1.58 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  color: #cad7e8;
  margin: 10px 0;
}
.cyber-defense-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.cyber-defense-tag {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 0.68rem;
  color: #cbd7e8;
}
.cyber-defense-tag.high {
  border-color: rgba(255, 125, 147, 0.35);
  color: #ffd5dd;
}
.cyber-defense-tag.medium {
  border-color: rgba(255, 211, 110, 0.35);
  color: #ffecba;
}
.cyber-defense-tag.low {
  border-color: rgba(105, 229, 165, 0.3);
  color: #c8f7dd;
}
.cyber-defense-score {
  font-size: 0.76rem;
  color: var(--muted);
}
.cyber-defense-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.cyber-defense-summary > div {
  border: 1px solid var(--line);
  background: #0a1728;
  border-radius: 14px;
  padding: 14px;
}
.cyber-defense-summary b {
  display: block;
  font-size: 1.45rem;
}
.cyber-defense-summary span {
  font-size: 0.72rem;
  color: var(--muted);
}
.cyber-defense-tip {
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.5;
}
.cyber-defense-memo {
  margin-top: 12px;
  border: 1px solid rgba(98, 205, 255, 0.26);
  background: linear-gradient(135deg, rgba(51, 145, 255, 0.1), rgba(172, 172, 255, 0.06));
  border-radius: 13px;
  padding: 11px 12px;
}
.cyber-defense-memo-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #d9edff;
  font-size: 0.76rem;
  font-weight: 900;
  margin-bottom: 5px;
}
.cyber-defense-memo p {
  margin: 0;
  color: #c2cfdf;
  font-size: 0.76rem;
  line-height: 1.5;
}
.cyber-defense-memo + .cyber-defense-memo {
  margin-top: 7px;
}
@media (max-width: 820px) {
  .cyber-defense-intro {
    grid-template-columns: 1fr;
  }
  .cyber-defense-summary {
    grid-template-columns: 1fr;
  }
}

/* Ports réseau */

.ports-training {
  display: grid;
  gap: 14px;
}
.port-hero-ports {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 22px;
  align-items: center;
  background: linear-gradient(
    120deg,
    rgba(255, 172, 215, 0.06),
    rgba(172, 172, 255, 0.045) 52%,
    rgba(157, 231, 255, 0.025)
  );
}
.port-hero-copy-ports h3 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  margin: 5px 0 8px;
  letter-spacing: -0.025em;
}
.port-hero-copy-ports p {
  margin: 0;
  color: var(--muted);
  max-width: 880px;
  line-height: 1.62;
}
.port-hero-copy-ports p b {
  color: var(--text);
}
.port-bank-card-ports {
  border: 1px solid rgba(172, 172, 255, 0.2);
  background: rgba(11, 14, 25, 0.55);
  border-radius: 17px;
  padding: 14px;
  display: grid;
  gap: 3px;
}
.port-bank-card-ports > span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9098b3;
  font-weight: 850;
}
.port-bank-card-ports > strong {
  font-size: 1.08rem;
}
.port-bank-card-ports > b {
  color: var(--violet);
  font-size: 0.82rem;
}
.port-bank-card-ports > small {
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}
.port-roadmap-ports {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
}
.port-roadmap-step-ports {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.port-roadmap-step-ports > span {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #0b0d16;
  font-weight: 950;
}
.port-roadmap-step-ports strong,
.port-roadmap-step-ports small {
  display: block;
}
.port-roadmap-step-ports strong {
  font-size: 0.86rem;
}
.port-roadmap-step-ports small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}
.port-roadmap-arrow-ports {
  color: #69718b;
  font-size: 1.1rem;
}
.port-bank-index-ports {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.018);
  overflow: hidden;
}
.port-bank-index-ports summary {
  cursor: pointer;
  padding: 11px 14px;
  font-weight: 800;
  font-size: 0.82rem;
  color: #e9eafd;
}
.port-search-reference {
  padding: 16px 18px;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  gap: 14px 20px;
  align-items: center;
  background: linear-gradient(120deg, rgba(255, 172, 215, 0.035), rgba(172, 172, 255, 0.035));
}
.port-search-copy-reference h3 {
  margin: 3px 0 5px;
  font-size: 1rem;
}
.port-search-copy-reference p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.48;
}
.port-search-box-reference {
  position: relative;
}
.port-search-box-reference input {
  width: 100%;
  border: 1px solid rgba(172, 172, 255, 0.24);
  background: #0c101b;
  color: #eef0fb;
  border-radius: 13px;
  padding: 12px 42px 12px 14px;
  font: inherit;
  font-size: 0.82rem;
  outline: none;
}
.port-search-box-reference input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(172, 172, 255, 0.08);
}
.port-search-box-reference button {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #9aa2bb;
  font-size: 1.2rem;
  cursor: pointer;
}
.port-search-results-reference {
  grid-column: 1/-1;
  display: grid;
  gap: 8px;
}
.port-search-result-reference {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: #0d111c;
  border-radius: 13px;
  padding: 11px 13px;
}
.port-search-number-reference {
  font-family: Consolas, 'Cascadia Code', monospace;
  font-size: 1.05rem;
  color: var(--violet);
  font-weight: 900;
}
.port-search-title-reference {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.port-search-title-reference strong {
  font-size: 0.86rem;
}
.port-search-title-reference span {
  font-size: 0.65rem;
  border: 1px solid rgba(172, 172, 255, 0.16);
  border-radius: 999px;
  padding: 3px 6px;
  color: #c9ccef;
}
.port-search-result-reference p {
  margin: 5px 0 2px;
  font-size: 0.75rem;
  line-height: 1.45;
}
.port-search-result-reference small {
  color: var(--muted);
  line-height: 1.4;
}
.port-search-empty-reference {
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
}
.port-bank-index-ports[open] summary {
  border-bottom: 1px solid var(--line);
}
.port-bank-chips-ports {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px;
}
.port-bank-chips-ports span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #101421;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 0.7rem;
  color: #c2c8da;
}
.port-bank-chips-ports b {
  color: var(--violet);
  font-family: Consolas, 'Cascadia Code', monospace;
}
.port-workspace-ports {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #0f1320;
  overflow: hidden;
}
.port-mode-nav-ports {
  display: grid;
  grid-template-columns: 0.72fr 2.25fr 1fr;
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.port-mode-group-ports {
  background: #111522;
  padding: 10px;
}
.port-mode-group-ports > span {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #818aa5;
  font-weight: 850;
  margin: 0 0 7px 3px;
}
.port-mode-group-ports > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.port-mode-group-ports button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #0d111d;
  color: #dfe3ef;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 0.75rem;
  cursor: pointer;
  transition: 0.15s;
}
.port-mode-group-ports button:hover {
  border-color: rgba(172, 172, 255, 0.36);
  background: #171b2b;
}
.port-mode-group-ports button.active {
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #0b0d16;
  border-color: transparent;
}
.port-mode-intro-ports {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.012);
}
.port-mode-intro-ports > div > span {
  display: block;
  color: var(--violet);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 850;
}
.port-mode-intro-ports h3 {
  margin: 3px 0 4px;
  font-size: 1.08rem;
}
.port-mode-intro-ports p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.48;
  max-width: 780px;
}
.port-bank-mini-ports {
  flex: 0 0 auto;
  border: 1px solid rgba(172, 172, 255, 0.16);
  background: rgba(172, 172, 255, 0.05);
  border-radius: 999px;
  padding: 6px 9px;
  color: #d8d8ff;
  font-size: 0.66rem;
  font-weight: 800;
}
#portZonePorts {
  padding: 18px;
}
.port-learn-card-ports {
  max-width: 980px;
  margin: 0 auto;
}
.port-learn-progress-ports,
.port-quiz-top-ports,
.port-speed-top-ports {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #9ca5bf;
  font-size: 0.68rem;
  font-weight: 800;
}
.port-learn-main-ports {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  min-height: 240px;
  padding: 20px 0;
}
.port-learn-number-ports {
  font-size: clamp(4.8rem, 9vw, 7.2rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  color: var(--violet);
  letter-spacing: -0.06em;
}
.port-learn-prompt-ports span {
  display: block;
  color: #8f97b0;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 850;
}
.port-learn-prompt-ports h4 {
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 6px 0;
}
.port-learn-prompt-ports p {
  margin: 0;
  color: var(--muted);
}
.port-learn-reveal-ports {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.port-fact-grid-ports {
  display: grid;
  grid-template-columns: 1fr 0.75fr 1.5fr;
  gap: 10px;
}
.port-fact-grid-ports > div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 11px;
}
.port-fact-grid-ports span {
  display: block;
  color: #8f97b0;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 850;
}
.port-fact-grid-ports strong {
  display: block;
  margin-top: 5px;
  font-size: 0.82rem;
  line-height: 1.4;
}
.port-memory-ports {
  margin-top: 10px;
  border: 1px solid rgba(157, 243, 199, 0.14);
  background: rgba(157, 243, 199, 0.045);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 0.76rem;
  line-height: 1.5;
}
.port-memory-ports b {
  color: #bdf5d7;
  white-space: nowrap;
}
.port-memory-ports span {
  color: #c9cedd;
}
.port-learn-actions-ports {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.port-quiz-ports {
  max-width: 920px;
  margin: 0 auto;
}
.port-quiz-bar-ports {
  margin: 10px 0 18px;
}
.ports-question-card-ports {
  margin: 0 0 14px;
}
.ports-question-card-ports h3 {
  margin: 0 0 5px;
  font-size: 1.2rem;
}
.ports-question-card-ports p {
  margin: 0;
  color: var(--muted);
}
.port-feedback-ports {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}
.port-feedback-ports > small {
  color: var(--muted);
  line-height: 1.45;
}
.port-fact-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.port-pill {
  display: inline-flex;
  border: 1px solid rgba(172, 172, 255, 0.16);
  border-radius: 999px;
  padding: 4px 7px;
  color: #cfd3e4;
  font-size: 0.67rem;
}
.port-pill-number {
  color: var(--violet);
  font-family: Consolas, 'Cascadia Code', monospace;
  font-weight: 900;
}
.port-speed-ports {
  max-width: 920px;
  margin: 0 auto;
}
.port-speed-copy-ports {
  text-align: center;
  padding: 16px 0 10px;
}
.port-speed-copy-ports h3 {
  margin: 0 0 5px;
}
.port-speed-copy-ports p {
  margin: 0 auto;
  color: var(--muted);
  max-width: 650px;
  font-size: 0.78rem;
  line-height: 1.45;
}
.port-speed-ports > h4 {
  text-align: center;
  font-size: 1.15rem;
  margin: 18px 0 12px;
}
.port-speed-ports > #portsSpeedStartPorts {
  display: flex;
  margin: 14px auto 0;
}
.port-speed-end-ports {
  margin-top: 12px;
  justify-content: center;
}
@media (max-width: 900px) {
  .port-search-reference {
    grid-template-columns: 1fr;
  }
  .port-search-result-reference {
    grid-template-columns: 90px 1fr;
  }
  .port-hero-ports {
    grid-template-columns: 1fr;
  }
  .port-bank-card-ports {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .port-bank-card-ports > span,
  .port-bank-card-ports > small {
    grid-column: 1/-1;
  }
  .port-roadmap-ports {
    grid-template-columns: 1fr;
  }
  .port-roadmap-arrow-ports {
    display: none;
  }
  .port-mode-nav-ports {
    grid-template-columns: 1fr;
  }
  .port-mode-group-ports {
    border-bottom: 1px solid var(--line);
  }
  .port-learn-main-ports {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
    min-height: 0;
    padding: 24px 0;
  }
  .port-fact-grid-ports {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .port-search-result-reference {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .port-search-number-reference {
    font-size: 0.9rem;
  }
  .port-search-reference {
    padding: 13px;
  }
  .port-search-reference p {
    font-size: 0.72rem;
  }
  #portZonePorts {
    padding: 13px;
  }
  .port-mode-intro-ports {
    display: grid;
  }
  .port-bank-mini-ports {
    width: max-content;
  }
  .port-roadmap-step-ports {
    align-items: start;
  }
  .port-learn-number-ports {
    font-size: 4.8rem;
  }
  .port-learn-prompt-ports h4 {
    font-size: 1.08rem;
  }
  .port-memory-ports {
    display: grid;
  }
  .port-learn-actions-ports {
    display: grid;
    grid-template-columns: 1fr;
  }
  .port-learn-actions-ports .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Rôles Windows Server */

.winroles-hero-roles {
  background: linear-gradient(
    120deg,
    rgba(138, 193, 255, 0.055),
    rgba(172, 172, 255, 0.055) 52%,
    rgba(255, 172, 215, 0.035)
  );
}
.winroles-summary-roles > b {
  color: #a7c9ff;
}
.winroles-clarity-roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px;
}
.winroles-clarity-roles article {
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.018);
  border-radius: 13px;
  padding: 12px;
}
.winroles-clarity-roles article > span {
  display: block;
  color: var(--violet);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
}
.winroles-clarity-roles article > b {
  display: block;
  margin: 4px 0 5px;
  font-size: 0.9rem;
}
.winroles-clarity-roles article > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}
.winroles-index-groups-roles {
  padding: 12px;
}
.winroles-index-groups-roles section + section {
  margin-top: 12px;
}
.winroles-index-groups-roles h4 {
  margin: 0 0 5px;
  font-size: 0.78rem;
}
.winroles-index-groups-roles .port-bank-chips-ports {
  padding: 0;
}
.winroles-associated-reference summary {
  color: #e9eafd;
}
.winroles-associated-grid-reference {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 12px;
}
.winroles-associated-grid-reference article {
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.018);
  border-radius: 13px;
  padding: 12px;
}
.winroles-associated-grid-reference article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.winroles-associated-grid-reference article > div b {
  color: var(--violet);
}
.winroles-associated-grid-reference article > div span {
  font-size: 0.62rem;
  color: #aab2c9;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 3px 6px;
}
.winroles-associated-grid-reference h4 {
  margin: 7px 0 5px;
  font-size: 0.86rem;
}
.winroles-associated-grid-reference p {
  margin: 0;
  color: #d8dcea;
  font-size: 0.73rem;
  line-height: 1.48;
}
.winroles-associated-grid-reference small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.4;
}
.winroles-nav-roles {
  grid-template-columns: 0.95fr 2.25fr 1fr;
}
.winroles-zone-roles {
  padding: 18px;
}
.winroles-learn-main-roles {
  grid-template-columns: 250px minmax(0, 1fr);
}
.winroles-code-roles {
  font-size: clamp(2.9rem, 6vw, 5.4rem);
  white-space: normal;
  line-height: 0.95;
  overflow-wrap: anywhere;
}
.winroles-fact-grid-roles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.winroles-fact-grid-roles > div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 11px;
}
.winroles-fact-grid-roles > div.wide {
  grid-column: 1/-1;
}
.winroles-fact-grid-roles span {
  display: block;
  color: #8f97b0;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 850;
}
.winroles-fact-grid-roles strong {
  display: block;
  margin-top: 5px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.winroles-fact-grid-roles code {
  font-size: 0.78rem;
}
.winroles-answer-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.winroles-answer-line > span {
  border: 1px solid rgba(172, 172, 255, 0.17);
  border-radius: 999px;
  padding: 4px 7px;
  color: #cfd3e4;
  font-size: 0.67rem;
}
.winroles-answer-line > code {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 4px 7px;
}
.winroles-feedback-roles {
  display: grid;
  gap: 9px;
}
.winroles-feedback-roles small {
  color: var(--muted);
  line-height: 1.45;
}
.winroles-command-roles {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}
.winroles-command-roles h3 {
  margin: 4px 0 6px;
}
.winroles-command-roles p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.winroles-command-roles > small {
  max-width: 320px;
  color: #aab2c9;
  line-height: 1.45;
  border-left: 1px solid var(--line);
  padding-left: 16px;
}
.winroles-reference-revision {
  display: grid;
  gap: 14px;
}
.winroles-reference-head-revision {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 2px;
}
.winroles-reference-head-revision h4 {
  margin: 4px 0 7px;
  font-size: 1.05rem;
}
.winroles-reference-head-revision p {
  margin: 0;
  max-width: 820px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}
.winroles-reference-count-revision {
  flex: 0 0 auto;
  border: 1px solid rgba(172, 172, 255, 0.18);
  background: rgba(172, 172, 255, 0.055);
  border-radius: 999px;
  padding: 7px 10px;
  color: #d7d8ff;
  font-size: 0.69rem;
  font-weight: 850;
}
.winroles-reference-tools-revision {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.winroles-reference-tabs-revision {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.winroles-reference-tabs-revision button {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.018);
  color: #d9dceb;
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.71rem;
  font-weight: 800;
  cursor: pointer;
}
.winroles-reference-tabs-revision button small {
  margin-left: 5px;
  color: #8f97b0;
  font-size: 0.62rem;
}
.winroles-reference-tabs-revision button.active {
  border-color: rgba(241, 158, 219, 0.42);
  background: linear-gradient(135deg, rgba(244, 158, 215, 0.22), rgba(167, 169, 255, 0.22));
  color: #fff;
}
.winroles-reference-search-revision {
  display: grid;
  gap: 5px;
  min-width: min(320px, 100%);
}
.winroles-reference-search-revision span {
  color: #8f97b0;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 850;
}
.winroles-reference-search-revision input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #0d1120;
  color: #f4f5ff;
  border-radius: 10px;
  padding: 9px 11px;
  outline: none;
}
.winroles-reference-search-revision input:focus {
  border-color: rgba(172, 172, 255, 0.48);
  box-shadow: 0 0 0 3px rgba(172, 172, 255, 0.07);
}
.winroles-reference-section-head-revision {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 8px;
}
.winroles-reference-section-head-revision span {
  display: block;
  color: #8f97b0;
  font-size: 0.61rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 850;
}
.winroles-reference-section-head-revision h5 {
  margin: 2px 0 0;
  font-size: 0.9rem;
}
.winroles-reference-section-head-revision b {
  color: #aab2c9;
  font-size: 0.68rem;
}
.winroles-reference-table-wrap-revision {
  overflow: auto;
  max-height: 590px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.012);
}
.winroles-reference-table-revision {
  width: 100%;
  min-width: 930px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.winroles-reference-table-revision col.c1 {
  width: 22%;
}
.winroles-reference-table-revision col.c2 {
  width: 53%;
}
.winroles-reference-table-revision col.c3 {
  width: 25%;
}
.winroles-reference-table-revision th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  background: #141827;
  color: #f0efff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 11px 12px;
  font-size: 0.69rem;
  line-height: 1.35;
}
.winroles-reference-table-revision td {
  vertical-align: top;
  padding: 10px 12px;
  color: #d8dcea;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  font-size: 0.72rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: normal;
}
.winroles-reference-table-revision tbody tr:last-child td {
  border-bottom: 0;
}
.winroles-reference-table-revision tbody tr:hover td {
  background: rgba(172, 172, 255, 0.025);
}
.winroles-reference-table-revision td:first-child {
  color: #f0efff;
  font-weight: 760;
}
.winroles-reference-table-revision td:last-child {
  color: #bec5da;
}
.winroles-reference-empty-revision {
  text-align: center !important;
  color: var(--muted) !important;
  padding: 28px !important;
  font-weight: 600 !important;
}
@media (max-width: 900px) {
  .winroles-associated-grid-reference {
    grid-template-columns: 1fr;
  }
  .winroles-clarity-roles {
    grid-template-columns: 1fr;
  }
  .winroles-nav-roles {
    grid-template-columns: 1fr;
  }
  .winroles-reference-head-revision {
    display: grid;
  }
  .winroles-reference-count-revision {
    justify-self: start;
  }
  .winroles-reference-tools-revision {
    display: grid;
  }
  .winroles-reference-search-revision {
    min-width: 0;
    width: 100%;
  }
  .winroles-learn-main-roles {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .winroles-fact-grid-roles {
    grid-template-columns: 1fr;
  }
  .winroles-fact-grid-roles > div.wide {
    grid-column: auto;
  }
  .winroles-command-roles {
    display: grid;
  }
  .winroles-command-roles > small {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 12px 0 0;
    max-width: none;
  }
}
@media (max-width: 620px) {
  .winroles-zone-roles {
    padding: 13px;
  }
  .winroles-code-roles {
    font-size: 3rem;
  }
}

/* Énigmes de révision */

.escape-shell {
  display: grid;
  gap: 14px;
}
.escape-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 18px;
  align-items: center;
  background: linear-gradient(
    125deg,
    rgba(172, 172, 255, 0.08),
    rgba(255, 158, 211, 0.045) 55%,
    rgba(88, 196, 255, 0.04)
  );
}
.escape-hero h3 {
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  margin: 6px 0;
}
.escape-hero p {
  color: var(--muted);
  max-width: 850px;
  line-height: 1.62;
}
.escape-lock {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(172, 172, 255, 0.22);
  border-radius: 26px;
  background: rgba(172, 172, 255, 0.07);
  font-size: 2.4rem;
  font-weight: 950;
  color: #b9adff;
}
.escape-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.escape-rules span {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 5px 8px;
  color: #cbd1e3;
  font-size: 0.69rem;
}
.escape-prep h3 {
  margin: 6px 0;
}
.escape-prep p {
  line-height: 1.55;
}
.escape-card {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  padding: 22px;
}
.escape-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.escape-question {
  padding: 22px 0 16px;
}
.escape-question small {
  display: block;
  color: #9aa6c5;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.66rem;
  font-weight: 900;
}
.escape-question h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.42;
  margin: 8px 0 0;
}
.escape-answer-label {
  display: grid;
  gap: 7px;
  color: #aeb7cc;
  font-size: 0.72rem;
  font-weight: 850;
}
.escape-answer-label .field {
  width: 100%;
  font-size: 1rem;
  padding: 13px 14px;
}
.escape-actions {
  margin-top: 12px;
}
.escape-good,
.escape-correction {
  margin-top: 12px;
}
.escape-good p,
.escape-correction p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.escape-complete .big {
  font-size: clamp(3rem, 7vw, 5.8rem);
  color: #b3a6ff;
}
.escape-complete h3 {
  margin: 5px 0;
}
.escape-complete p {
  line-height: 1.55;
}
@media (max-width: 700px) {
  .escape-hero {
    grid-template-columns: 1fr;
  }
  .escape-lock {
    display: none;
  }
  .escape-card {
    padding: 15px;
  }
}

/* Cartes mémoire */

.flashcard-shell {
  display: grid;
  gap: 14px;
}
.flashcard-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 20px;
  align-items: center;
  background: linear-gradient(
    120deg,
    rgba(172, 172, 255, 0.07),
    rgba(255, 158, 211, 0.035) 58%,
    rgba(88, 196, 255, 0.035)
  );
}
.flashcard-intro h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  margin: 5px 0 8px;
}
.flashcard-intro p {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.flashcard-count {
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(172, 172, 255, 0.18);
  background: rgba(172, 172, 255, 0.055);
  border-radius: 22px;
  padding: 16px 10px;
}
.flashcard-count b {
  font-size: 2.2rem;
  color: #b7abff;
}
.flashcard-count span {
  font-size: 0.68rem;
  color: #9da7be;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.flashcard-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.flashcard-mode {
  display: flex;
  flex-direction: column;
  min-height: 270px;
}
.flashcard-mode .big {
  font-size: 2.8rem;
  color: #b9adff;
  margin: 4px 0;
}
.flashcard-mode h3 {
  margin: 0 0 8px;
}
.flashcard-mode p {
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}
.flashcard-mode small {
  display: block;
  color: #7f8aa4;
  margin-top: 9px;
  line-height: 1.4;
}
.flashcard-target {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}
.flashcard-target h3 {
  margin: 5px 0;
}
.flashcard-target p {
  margin: 0;
}
.flashcard-target-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.flashcard-target-controls .field {
  min-width: 210px;
}
.flashcard-how .eyebrow {
  margin-bottom: 10px;
}
.flashcard-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.flashcard-scale span {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}
.flashcard-scale b {
  font-size: 0.77rem;
}
.flashcard-scale small {
  color: #8f9ab3;
}
.flashcard-card-panel {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
.flashcard-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.flashcard-card-top > div {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.flashcard-flash {
  min-height: 300px;
}
.flashcard-flash h3 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}
.flashcard-list {
  margin-top: 2px;
}
@media (max-width: 900px) {
  .flashcard-mode-grid {
    grid-template-columns: 1fr;
  }
  .flashcard-mode {
    min-height: 0;
  }
  .flashcard-target {
    grid-template-columns: 1fr;
  }
  .flashcard-target-controls {
    align-items: stretch;
  }
  .flashcard-target-controls .field {
    min-width: 0;
    flex: 1;
  }
}
@media (max-width: 650px) {
  .flashcard-intro {
    grid-template-columns: 1fr;
  }
  .flashcard-count {
    display: none;
  }
  .flashcard-scale {
    grid-template-columns: repeat(2, 1fr);
  }
  .flashcard-target-controls {
    flex-direction: column;
  }
  .flashcard-target-controls .btn,
  .flashcard-target-controls .field {
    width: 100%;
  }
}

/* Lisibilité des rôles Windows Server */

/* Les cellules de grille/flex peuvent sinon conserver une largeur minimale liée au texte. */
.windows-roles .port-workspace-ports,
.windows-roles .winroles-zone-roles,
.windows-roles .winroles-learn-roles,
.windows-roles .winroles-learn-main-roles,
.windows-roles .port-learn-prompt-ports,
.windows-roles .port-learn-reveal-ports,
.windows-roles .winroles-fact-grid-roles,
.windows-roles .winroles-fact-grid-roles > div,
.windows-roles .port-memory-ports,
.windows-roles .port-memory-ports span,
.windows-roles .ports-question-card-ports,
.windows-roles .choice-grid,
.windows-roles .choice {
  min-width: 0;
}

/* Une fiche doit toujours grandir avec son contenu : jamais de texte coupé verticalement. */
.windows-roles .winroles-zone-roles,
.windows-roles .winroles-learn-roles,
.windows-roles .winroles-learn-main-roles,
.windows-roles .port-learn-reveal-ports {
  height: auto !important;
  max-height: none !important;
  overflow: visible;
}

/* Tous les textes longs restent lisibles en entier. */
.windows-roles .port-learn-prompt-ports h4,
.windows-roles .port-learn-prompt-ports p,
.windows-roles .winroles-fact-grid-roles strong,
.windows-roles .winroles-fact-grid-roles code,
.windows-roles .port-memory-ports span,
.windows-roles .ports-question-card-ports h3,
.windows-roles .ports-question-card-ports p,
.windows-roles .winroles-answer-line strong,
.windows-roles .winroles-answer-line code,
.windows-roles .choice {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip;
}

/* Les gros sigles/libellés (WDS Transport, Accès distant, RD Gateway…) restent dans la carte. */
.windows-roles .winroles-code-roles {
  min-width: 0;
  max-width: 100%;
  font-size: clamp(2.35rem, 5vw, 4.9rem);
  line-height: 1;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Les boutons de navigation/réponse ne rognent pas leur libellé. */
.windows-roles button,
.windows-roles .btn,
.windows-roles .choice {
  height: auto;
  min-height: 0;
  white-space: normal;
  line-height: 1.25;
}

/* La zone de réponse révélée conserve de l’air même quand le texte prend plusieurs lignes. */
.windows-roles .port-learn-reveal-ports:not(.hidden) {
  display: block;
  width: 100%;
  padding-bottom: 2px;
}

@media (max-width: 900px) {
  .windows-roles .winroles-code-roles {
    font-size: clamp(2.15rem, 9vw, 3.8rem);
  }
  .windows-roles .port-learn-prompt-ports {
    text-align: center;
  }
}

@media (max-width: 520px) {
  .windows-roles .port-learn-actions-ports .btn {
    flex: 1 1 100%;
  }
}