/* MonQCM "Nuit Blanche": the one stylesheet of the server-rendered SEO pages (/qcm/…, /medecine-dentaire…, /medecine…).
   They never load the SPA bundle; tokens and shapes mirror the SPA's Nuit shell (frontend/src/styles/app.css).
   Dark is the default; html[data-theme="light"] (set before paint from localStorage.theme, the SPA's key) is the lit desk.
   nginx serves /static/ immutable with unhashed names: bump ?v= in base.html on every change. */

/* ---------- fonts: self-hosted latin subsets (copied from the frontend @fontsource packages) ---------- */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 900; font-display: swap; src: url(fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/martian-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/martian-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- tokens: the room at 2 a.m. (default) ---------- */
:root {
  color-scheme: dark;
  --bg:#0D0B18; --fg:#EEEBF8; --mist:#ABA5CC; --lamp:#F8B524; --violet:#857CD5; --teal:#2CC9AC; --red:#F07070;
  --dusk:#17142B; --dusk-lo:#141127; --dusk-hi:#1F1A35; --line:#2C2749; --edge:#3D3763; --pit:#08070F; --well:#2A2550;
  --lamp-ink:#F8B524; --lamp-deep:#A86E06; --on-lamp:#1D1404; --focus:#F8B524;
  --lamp-hi:#F8B524; --dim-ink:#6E6890;
  --violet-deep:#534AB7; --on-violet:#FFFFFF;
  --teal-deep:#0E5F52; --teal-text:#B4F3E6; --on-teal:#062A23;
  --red-deep:#8E2A2A; --red-text:#FFD3D3; --on-red:#2A0606;
  --bulb:#3D3763; --cone:transparent;
  --card-shadow:color-mix(in srgb,#534AB7 60%,transparent);
  --aur-lamp:color-mix(in srgb,#F8B524 26%,transparent);
  --aur-violet:color-mix(in srgb,#534AB7 42%,transparent);
  --grain:.07;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* the lamp is on: daylight at the desk */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#F7F6FB; --fg:#252152; --mist:#57537F; --lamp:#F8B524; --violet:#534AB7; --teal:#0C766A; --red:#C81E1E;
  --dusk:#FFFFFF; --dusk-lo:#F0EEF8; --dusk-hi:#FFFFFF; --line:#DDD9EE; --edge:#C9C3E3; --pit:#CFC9E6; --well:#ECEAFB;
  --lamp-ink:#9A5B00; --lamp-deep:#C98A0A; --on-lamp:#1D1404; --focus:#534AB7;
  --lamp-hi:#C27400; --dim-ink:#8A86AD;
  --violet-deep:#342E74; --on-violet:#FFFFFF;
  --teal-deep:#0A5A4F; --teal-text:#0B6457; --on-teal:#FFFFFF;
  --red-deep:#8A1414; --red-text:#A61B1B; --on-red:#FFFFFF;
  --bulb:#F8B524; --cone:color-mix(in srgb,#F8B524 55%,transparent);
  --card-shadow:color-mix(in srgb,#534AB7 22%,transparent);
  --aur-lamp:color-mix(in srgb,#F8B524 36%,transparent);
  --aur-violet:color-mix(in srgb,#857CD5 20%,transparent);
  --grain:.035;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
/* the desk lamp glows top right, the brand violet pools bottom left of the first screen */
body { margin: 0; min-height: 100vh; color: var(--fg); font: 400 16px/1.65 var(--f-body); -webkit-font-smoothing: antialiased;
  background: radial-gradient(56rem 34rem at 96% -8rem, var(--aur-lamp), transparent 70%) no-repeat,
              radial-gradient(60rem 40rem at -18% 30rem, var(--aur-violet), transparent 70%) no-repeat; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }

.kicker { display: flex; align-items: center; gap: 10px; font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lamp-ink); }
.kicker::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 10px 1px var(--lamp); }
.lead { color: var(--mist); font-size: clamp(16px, 1.35vw, 18.5px); max-width: 40em; }
.lead a, .faq p a { color: var(--fg); font-weight: 600; text-decoration-color: var(--lamp); text-underline-offset: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- chunky buttons that sink into their base ---------- */
.btn { --b: var(--lamp); --d: var(--lamp-deep); --t: var(--on-lamp); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 14px; background: var(--b); color: var(--t); font: 700 16px/1 var(--f-body); text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 var(--d); transition: transform .08s, box-shadow .08s, filter .2s; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--d); }
.btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn--ghost { --b: var(--dusk); --d: var(--pit); --t: var(--fg); box-shadow: 0 4px 0 var(--d), inset 0 0 0 1.5px var(--line); }
.btn--ghost:active { box-shadow: 0 0 0 var(--d), inset 0 0 0 1.5px var(--line); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14.5px; border-radius: 12px; }

/* ---------- nav: solid, sticky; no module list here (tests: nothing before <footer names a module) ---------- */
.n-nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.n-nav__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 68px; }
.n-logo { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; font: 900 27px/1 var(--f-display); letter-spacing: .01em; color: var(--fg); white-space: nowrap; }
.n-logo i { margin-right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--lamp) 70%, transparent); }
.n-logo span { color: var(--lamp-hi); }
.n-nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-right: 10px; }
.n-nav__links a { padding-block: 6px; font: 600 14px/1.65 var(--f-body); color: var(--mist); text-decoration: none; white-space: nowrap; }
.n-nav__links a:hover, .n-nav__links a[aria-current] { color: var(--fg); }
.n-icon-btn { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s; }
.n-icon-btn:hover { border-color: var(--edge); }
.n-icon-btn:focus-visible { outline-offset: 2px; }
.n-menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.n-menu-btn path { transition: transform .25s, opacity .2s; transform-origin: 12px 12px; }
.n-nav.is-open .n-menu-btn .m1 { transform: translateY(5px) rotate(45deg); }
.n-nav.is-open .n-menu-btn .m2 { opacity: 0; }
.n-nav.is-open .n-menu-btn .m3 { transform: translateY(-5px) rotate(-45deg); }
.n-nav .btn { white-space: nowrap; }
/* the theme switch is the desk lamp: pull the cord, the light comes on */
.n-lamp svg { width: 32px; height: 32px; overflow: visible; }
.n-lamp .lb-cone { fill: var(--cone); transition: fill .3s; }
.n-lamp .lb-wire { fill: none; stroke: var(--mist); stroke-width: 1.6; }
.n-lamp .lb-shade { fill: var(--dusk-hi); stroke: var(--fg); stroke-width: 1.9; stroke-linejoin: round; }
.n-lamp .lb-bulb { fill: var(--bulb); }
.n-lamp .lb-pull { fill: var(--lamp-ink); stroke: var(--mist); stroke-width: 1.4; transform-origin: 23.6px 18.2px; }
.n-lamp:hover .lb-pull { animation: swing 1.1s ease-in-out; }
@keyframes swing { 25% { transform: rotate(16deg); } 55% { transform: rotate(-10deg); } 80% { transform: rotate(4deg); } }
@media (min-width: 900px) { .n-menu-btn { display: none; } }
@media (max-width: 899.98px) {
  /* without JS the links wrap onto their own row; with JS (.js on <html>) they fold into the burger's panel */
  .n-nav__links { order: 1; flex-basis: 100%; margin: 0; padding-bottom: 8px; gap: 0 20px; }
  .js .n-nav__links { display: none; }
  .js .n-nav.is-open .n-nav__links { display: grid; position: absolute; left: 0; right: 0; top: 100%; gap: 0; padding: 6px clamp(16px, 4vw, 48px) 18px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 40px 60px -40px var(--card-shadow); max-height: calc(100dvh - 69px); overflow-y: auto; overscroll-behavior: contain; }
  .js .n-nav.is-open .n-nav__links a { display: flex; align-items: center; min-height: 52px; padding: 0; font: 800 26px/1 var(--f-display); letter-spacing: .01em; color: var(--fg); border-bottom: 1px solid var(--line); }
  .js .n-nav.is-open .n-nav__links a:last-child { border-bottom: 0; }
  .js .n-nav.is-open .n-nav__links a[aria-current] { color: var(--lamp-hi); }
}
@media (max-width: 420px) { .n-nav__in { gap: 6px; } .n-nav .btn--sm { padding: 0 13px; } }
/* 320–374px phones: logo, lamp, burger and CTA still share one row */
@media (max-width: 374px) {
  .n-nav__in, .js .n-nav.is-open .n-nav__links { padding-inline: 12px; }
  .n-nav__in { gap: 4px; }
  .n-nav .n-logo { font-size: 22px; }
  .n-nav .n-logo i { margin-right: 7px; }
  .n-nav .n-icon-btn { width: 40px; height: 40px; }
  .n-nav .btn--sm { padding: 0 10px; font-size: 13.5px; }
}

/* ---------- breadcrumbs ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: clamp(20px, 2.4vw, 32px); font: 500 11px/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.crumbs li { display: flex; gap: 10px; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--dim-ink); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.crumbs [aria-current] { color: var(--fg); }

/* ---------- hero ---------- */
.hero { display: grid; gap: 22px; justify-items: start; padding-block: clamp(28px, 4vw, 56px) clamp(48px, 5vw, 80px); }
.hero h1 { max-width: 100%; font: 900 clamp(42px, 6.4vw, 100px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.004em; hyphens: auto; overflow-wrap: break-word; }
.hero .lead { font-size: clamp(16.5px, 1.3vw, 18.5px); }
.notice { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--dusk) 70%, transparent); font: 500 12px/1.3 var(--f-mono); letter-spacing: .06em; color: var(--fg); }
.notice::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--lamp) 80%, transparent); }
.facts { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.facts li { display: flex; align-items: baseline; gap: 12px; font: 400 12px/1.4 var(--f-mono); letter-spacing: .02em; color: var(--mist); }
.facts b { font: 800 clamp(40px, 4vw, 56px)/1 var(--f-display); letter-spacing: 0; color: var(--lamp-hi); }

/* ---------- sections ---------- */
.sec { padding-block: clamp(48px, 5vw, 72px); border-top: 1px solid var(--line); }
.sec__head { display: grid; gap: 16px; max-width: 52rem; margin-bottom: clamp(28px, 3.4vw, 44px); }
.sec__head:last-child { margin-bottom: 0; }
.sec h2 { font: 800 clamp(38px, 4.6vw, 64px)/.95 var(--f-display); letter-spacing: .003em; hyphens: auto; overflow-wrap: break-word; }
@media (min-width: 880px) {
  .sec--split { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
  .sec--split > .sec__head { position: sticky; top: 110px; margin: 0; }
}
/* faculty page: année then semestre */
.sec h3 { margin: clamp(36px, 4vw, 56px) 0 4px; font: 800 clamp(32px, 3.4vw, 48px)/1 var(--f-display); }
.sec__head + h3 { margin-top: 0; }
.sec h4 { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.sec h4::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* exam rows */
.list { counter-reset: row; border-top: 1px solid var(--line); }
.list li { counter-increment: row; display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.list li::before { content: counter(row, decimal-leading-zero); font: 500 11px/1 var(--f-mono); color: var(--dim-ink); }
.list strong { font: 600 16px/1.35 var(--f-body); }
.list span { font: 400 11.5px/1.4 var(--f-mono); letter-spacing: .02em; color: var(--mist); white-space: nowrap; }
@media (max-width: 560px) { .list li { grid-template-columns: 2.2em minmax(0, 1fr); } .list span { grid-column: 2; } }

/* module and faculty cards: keys that sink like the buttons */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 18px 16px; }
.card { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; height: 100%; padding: 18px 20px 20px; border-radius: 16px; background: var(--dusk); box-shadow: 0 4px 0 var(--pit), inset 0 0 0 1.5px var(--line); color: var(--fg); text-decoration: none; transition: transform .14s cubic-bezier(.3,.7,.4,1), box-shadow .2s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--pit), inset 0 0 0 1.5px var(--violet); }
.card:active { transform: translateY(4px); box-shadow: 0 0 0 var(--pit), inset 0 0 0 1.5px var(--violet); transition-duration: .05s; }
.card strong { font: 700 16.5px/1.3 var(--f-body); }
.card span { font: 400 11.5px/1.5 var(--f-mono); letter-spacing: .02em; color: var(--mist); }
.cards--fac .card strong { font: 800 clamp(28px, 2.4vw, 34px)/1 var(--f-display); letter-spacing: .005em; }
@media (max-width: 560px) { .cards { gap: 12px; } .card { gap: 10px; padding: 14px 16px 16px; } }

/* ---------- sample questions: Nuit "fiches" with answer keys A, B, C… ---------- */
.qcms { display: grid; gap: 22px; }
.qcm { position: relative; display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 28px); border-radius: 24px; background: linear-gradient(180deg, var(--dusk-hi), var(--dusk-lo)); border: 1px solid var(--line); box-shadow: 0 40px 100px -40px var(--card-shadow); }
.qcm::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: linear-gradient(140deg, color-mix(in srgb, var(--lamp) 55%, transparent), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.qcm__q { font: 700 clamp(17px, 1.5vw, 20px)/1.4 var(--f-body); }
.qcm__n { display: block; margin-bottom: 8px; font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.qcm img { border-radius: 14px; border: 1px solid var(--line); }
.qcm__choices { counter-reset: key; display: grid; gap: 14px; }
.qcm__choices li { --k-face: var(--dusk); --k-base: var(--pit); --k-line: var(--line); counter-increment: key; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; min-height: 54px; padding: 9px 14px 9px 10px; border-radius: 14px; background: var(--k-face); border: 1.5px solid var(--k-line); box-shadow: 0 4px 0 var(--k-base); font: 600 15.5px/1.35 var(--f-body); transition: transform .14s cubic-bezier(.3,.7,.4,1), border-color .2s, background-color .2s, box-shadow .14s; }
.qcm__choices li::before { content: counter(key, upper-alpha); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--well); color: var(--fg); font: 500 12px/1 var(--f-mono); }
.qcm__ok { font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); white-space: nowrap; }
:root[data-theme="light"] .qcm__ok { color: var(--teal-text); } /* AA on the light teal key (the lit teal is 4.4:1) */
@media (max-width: 560px) { .qcm__choices li { grid-template-columns: 30px minmax(0, 1fr); } .qcm__ok { grid-column: 2; } }
/* answers shown (default, no JS, crawlers) and after "Vérifier": correct keys glow teal */
.qcm:not(.is-testing) .qcm__choices .is-correct { --k-face: color-mix(in srgb, var(--teal) 16%, var(--dusk)); --k-line: var(--teal); --k-base: var(--teal-deep); color: var(--teal-text); }
.qcm:not(.is-testing) .qcm__choices .is-correct::before { background: var(--teal); color: var(--on-teal); }
/* "Teste-toi": marks hidden, the visitor picks one or several keys */
.qcm.is-testing .qcm__ok { display: none; }
.qcm.is-testing .qcm__choices li { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.qcm.is-testing .qcm__choices li:active { transform: translateY(4px); box-shadow: 0 0 0 var(--k-base); transition-duration: .05s; }
@media (hover: hover) { .qcm.is-testing .qcm__choices li:hover { --k-line: var(--violet); transform: translateY(-2px); } }
.qcm .qcm__choices .is-picked { --k-face: color-mix(in srgb, var(--violet) 18%, var(--dusk)); --k-line: var(--violet); --k-base: var(--violet-deep); }
.qcm .qcm__choices .is-picked::before { background: var(--violet); color: var(--on-violet); }
/* "Vérifier": right picks teal, wrong picks red, missed answers outlined teal, the rest dimmed */
.qcm.is-revealed .qcm__choices li:not(.is-correct, .is-picked) { color: var(--mist); }
.qcm.is-revealed .qcm__choices .is-correct:not(.is-picked) { --k-face: var(--dusk); --k-base: var(--pit); border-style: dashed; color: var(--fg); }
.qcm.is-revealed .qcm__choices .is-correct:not(.is-picked)::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--teal); color: var(--teal); }
.qcm.is-revealed .qcm__choices .is-picked:not(.is-correct) { --k-face: color-mix(in srgb, var(--red) 14%, var(--dusk)); --k-line: var(--red); --k-base: var(--red-deep); color: var(--red-text); }
.qcm.is-revealed .qcm__choices .is-picked:not(.is-correct)::before { background: var(--red); color: var(--on-red); }
.qcm__tools { display: none; }
.js .qcm__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.qcm__result { font: 600 14.5px/1.4 var(--f-body); color: var(--mist); }
.qcm__result.is-ok { color: var(--teal); }
.qcm__result.is-ko { color: var(--red-text); }
.qcms > .actions { margin-top: 6px; }

/* ---------- FAQ: lines and a plus that turns into a cross ---------- */
.faq-list { border-top: 1px solid var(--line); min-width: 0; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font: 700 clamp(17px, 1.5vw, 19px)/1.35 var(--f-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: linear-gradient(var(--lamp-ink), var(--lamp-ink)) center/12px 2px no-repeat, linear-gradient(var(--lamp-ink), var(--lamp-ink)) center/2px 12px no-repeat; transition: transform .3s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--lamp-ink); }
.faq p { padding: 0 48px 24px 0; color: var(--mist); max-width: 40em; }
@media (max-width: 880px) { .faq p { padding-right: 0; } }

/* ---------- faculty chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--dusk) 80%, transparent); font: 500 12px/1 var(--f-mono); letter-spacing: .03em; color: var(--fg); text-decoration: none; transition: border-color .2s, color .2s; }
.chips a:hover { border-color: var(--lamp-ink); color: var(--lamp-ink); }

/* ---------- footer ---------- */
.foot { margin-top: clamp(24px, 4vw, 48px); border-top: 1px solid var(--line); padding-block: 48px 40px; }
.foot__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px 72px; align-items: start; }
.foot__brand { display: grid; justify-items: start; gap: 10px; }
.foot__brand p { font: 500 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.foot__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, .8fr); gap: 32px 40px; }
.foot__title { margin-bottom: 14px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lamp-ink); }
.foot__title em { margin-left: 4px; font-style: normal; letter-spacing: .04em; color: var(--violet); }
.foot ul { display: grid; gap: 8px; }
.foot ul.foot__many { display: block; columns: 2 11.5rem; column-gap: 28px; }
.foot__many li { margin-bottom: 8px; break-inside: avoid; }
.foot ul a { font-size: 14px; color: var(--mist); text-decoration: none; }
.foot ul a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.foot__c { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mist); }
.foot__c a { color: inherit; text-underline-offset: 3px; }
.foot__c a:hover { color: var(--fg); }
@media (max-width: 1000px) { .foot__in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .foot__cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .15s !important; }
}
/* theme switch: a circle of light grows from the lamp (View Transitions), else a short cross-fade */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.n-theming, html.n-theming *, html.n-theming *::before, html.n-theming *::after { transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease, box-shadow .35s ease !important; }