/* Pure black top header in both light and dark mode. */
.Header {
  --color-header-bg: #000;
  background-color: #000;
}

/* Page canvas pinned to #0d1117 in both colour modes. */
body {
  background-color: #0d1117;
}

/* Footer sits at the bottom of the window even when the page is short:
   the body is a full-height column and the main area absorbs the slack. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.application-main {
  flex: 1 0 auto;
  padding-bottom: 120px;
}
.footer {
  margin-top: auto;
}

/* No rule above the footer — the space does the separating. */
.footer > div {
  border-top: 0 !important;
}
.footer > div:first-of-type {
  margin-top: 0 !important;
}

/* Footer credit sits in the bottom-right corner instead of centred and spread. */
.footer > div:first-of-type {
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center;
}
.footer ul {
  width: auto !important;
  flex: 0 1 auto !important;
  justify-content: flex-start !important;
  column-gap: 18px;
}
.footer ul li {
  margin-right: 0 !important;
}
/* the theme's empty spacer div below the credit, which held it off the corner */
.footer > div:last-of-type {
  display: none;
}
/* ...and right into the corner: full-bleed footer, small gutter, tight to the bottom */
.footer.container-xl {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.footer > div:first-of-type {
  padding-top: 8px !important;
  padding-bottom: 12px !important;
}

/* Top bar detailed like GitHub's own: hairline under the bar, and a search
   field on the dark canvas colour rather than the bar colour. */
.Header {
  border-bottom: 1px solid #21262d;
}
.Header-search-label {
  background-color: #0d1117;
  border-color: #30363d;
}
.Header-search-label:focus-within {
  background-color: #0d1117;
  border-color: #1f6feb;
  box-shadow: 0 0 0 1px #1f6feb;
}
.Header ::placeholder {
  color: #8b949e;
}

/* --- Top bar: GitHub's own geometry ------------------------------------- */
/* GitHub's search does not widen on focus, and carries a "/" key hint. */
.Header-search { max-width: 360px; }
.Header-search:focus-within { max-width: 360px; }
.Header-search-input { min-height: 30px; }
.Header-search-icon {
  flex: 0 0 auto;
  margin-left: 10px;
  color: #8b949e;
}
.Header-search-input { padding-left: 8px; }

/* Section links sit to the right of the search field, as on GitHub. */
.Header-nav-link {
  margin-right: 16px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(240, 246, 252, 0.7);
  white-space: nowrap;
}
.Header-nav-link:hover { color: #fff; text-decoration: none; }

/* search sits at the right-hand end of the bar (full width only when the
   mobile menu drops it below the logo) */
@media (min-width: 768px) {
  #header-search {
    width: auto !important;
    margin-left: auto !important;   /* the theme ships no ml-auto utility */
  }
}

/* Page content is anchored to the left edge rather than centred in the
   window, so the profile column stays near the left on wide screens. */
.container-xl:not(.footer) {
  /* Equal margins left and right, so the gap from the window edge to the
     avatar matches the gap from the content's right edge to the other side.
     The theme's 1280px cap is lifted; the content fills what is between. */
  max-width: none !important;
  margin-left: clamp(0px, 3vw, 72px) !important;
  margin-right: clamp(0px, 3vw, 72px) !important;
}

/* Main column sits further right of the profile column; the profile column
   itself (avatar, bio, accounts) keeps its width and position. */
@media (min-width: 768px) {
  .gutter-lg > .col-md-9 {
    padding-left: 96px !important;
  }
}

/* --- Flash cards --------------------------------------------------------- */
.flashcard { cursor: pointer; }
.flashcard:hover { border-color: var(--color-border-primary); }
.flashcard:focus-visible { outline: 2px solid #1f6feb; outline-offset: 2px; }
.flashcard-num { font-variant-numeric: tabular-nums; }
.flashcard-a { display: none; border-top: 1px solid var(--color-border-secondary); }
.flashcard.is-flipped .flashcard-a { display: block; }
.flashcard.is-flipped .flashcard-hint { visibility: hidden; }
.flashcard-q > :last-child, .flashcard-a > :last-child { margin-bottom: 0; }

/* --- Lesson sidebar (Cours / TP / Quizz) --------------------------------- */
.lesson-aside { width: 100%; }
@media (min-width: 1012px) {
  .lesson-aside { width: 220px; }
}
.lesson-aside .Box-row { color: var(--color-text-primary); }
.lesson-aside .Box-row:hover { background-color: var(--color-bg-secondary); text-decoration: none; }
.lesson-aside-current {
  box-shadow: inset 2px 0 0 #f78166;      /* the same accent the selected tab uses */
  font-weight: 600;
}
/* --- Quizz --------------------------------------------------------------- */
.quizz-choices { list-style: none; padding-left: 24px; margin: 0; }
.quizz-choices li { padding: 2px 0; }
.quizz-choice {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font: inherit;
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary, #161b22);
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  cursor: pointer;
}
.quizz-choice:hover:not(:disabled) { border-color: var(--color-border-primary); }
.quizz-choice:focus-visible { outline: 2px solid #4f86c6; outline-offset: 1px; }
.quizz-choice:disabled { cursor: default; opacity: 1; }
.quizz-choice.is-right { border-color: #5a9367; box-shadow: inset 2px 0 0 #5a9367; }
.quizz-choice.is-wrong { border-color: #b4584f; box-shadow: inset 2px 0 0 #b4584f; }

.quizz-feedback { display: none; border-top: 1px solid var(--color-border-secondary); }
.quizz-item.is-answered .quizz-feedback { display: block; }
.quizz-item.is-right .quizz-verdict { color: #5a9367; }
.quizz-item.is-wrong .quizz-verdict { color: #b4584f; }
.quizz-num { font-variant-numeric: tabular-nums; }
/* the octicon sits next to the credit, not 24px away from it */
.footer-octicon { margin-right: 4px !important; }

/* Footer credit: quiet by design. The mark and the words share one muted grey,
   and only the link brightens, and only on hover. */
.footer > div:first-of-type {
  font-size: 12px;
  letter-spacing: 0.01em;
  padding-bottom: 16px !important;
}
.footer-octicon {
  color: #484f58;
  line-height: 0;
}
.footer-octicon svg {
  width: 16px;
  height: 16px;
}
.footer ul li { color: #6e7681; }
.footer ul a {
  color: #6e7681;
  text-decoration: none;
  border-bottom: 1px solid #30363d;
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer ul a:hover {
  color: #adbac7;
  border-bottom-color: #6e7681;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .footer ul a { transition: none; }
}

/* A lesson page is wrapped in .container-lg (1012px, centred) while the rest of
   the site uses .container-xl with equal margins. Line them up, but leave the
   article's own .container-lg alone so the text keeps a readable measure. */
.new-discussion-timeline.container-lg {
  max-width: none !important;
  margin-left: clamp(0px, 3vw, 72px) !important;
  margin-right: clamp(0px, 3vw, 72px) !important;
}