/* Layout and components, mobile first. Tokens live in tokens.css.
   CSP: no inline styles anywhere, every visual rule is here. */

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Flex column: lets the consent banner come first in the DOM yet show at
   the bottom (.consent-banner order). */
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  font-weight: 800;
}

p {
  margin: 0;
}

/* Links sit on the page background by default (footer, below the login
   card...): text colour + underline, since primary on bg is < 4.5:1 with the
   default palette. Primary only inside cards/tiles, where the admin theme
   guard checks primary/card (core.theme TEXT_PAIRS; core/tests/test_contrast.py). */
a {
  color: var(--color-text);
  text-decoration: underline;
}

.tile:not(.tile--gradient) a:not(.btn) {
  color: var(--color-primary);
}

img,
svg {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

html:not([data-js]) .js-only {
  display: none !important;
}

/* Visible only to screen readers: keeps text in the accessible name/content
   without showing it (e.g. "(nouvel onglet)" appended to a link's label). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.main:focus {
  outline: none;
}

.page {
  width: 100%; /* flex item with auto margins: no stretch otherwise */
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.main {
  flex: 1;
}

/* ---------- Icons (Lucide files used as masks: inherit currentColor) ---------- */
.icon {
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.icon--sun { mask-image: url("../icons/sun.afd0458b798c.svg"); }
.icon--moon { mask-image: url("../icons/moon.1e9f7d4d931e.svg"); }
.icon--menu { mask-image: url("../icons/menu.3d541bb615bb.svg"); }
.icon--x { mask-image: url("../icons/x.57dc2285eb24.svg"); }
.icon--user { mask-image: url("../icons/user.990ec4502cf2.svg"); }
.icon--log-in { mask-image: url("../icons/log-in.8c0fdeca278a.svg"); }
.icon--shield-check { mask-image: url("../icons/shield-check.bb687f49ce7a.svg"); }
.icon--key-round { mask-image: url("../icons/key-round.99296be22326.svg"); }
.icon--book-open { mask-image: url("../icons/book-open.4883dc168ee1.svg"); }
.icon--flask-conical { mask-image: url("../icons/flask-conical.241f970c7e3f.svg"); }
.icon--volume-2 { mask-image: url("../icons/volume-2.bb0ea61f48e1.svg"); }
.icon--message-circle-question-mark { mask-image: url("../icons/message-circle-question-mark.140786b50301.svg"); }
.icon--play { mask-image: url("../icons/play.b0228615b891.svg"); }
.icon--search { mask-image: url("../icons/search.1bec96880d10.svg"); }
.icon--info { mask-image: url("../icons/info.483364f0aec1.svg"); }
.icon--lightbulb { mask-image: url("../icons/lightbulb.c5f12be78ce9.svg"); }
.icon--triangle-alert { mask-image: url("../icons/triangle-alert.78f5591daf50.svg"); }
.icon--external-link { mask-image: url("../icons/external-link.fe38aaaf1054.svg"); }
.icon--chevron-left { mask-image: url("../icons/chevron-left.62c604ffedd7.svg"); }
.icon--chevron-right { mask-image: url("../icons/chevron-right.46ccbc1ad1f4.svg"); }
.icon--lock { mask-image: url("../icons/lock.88ed98547d85.svg"); }
.icon--message-circle { mask-image: url("../icons/message-circle.0da226a69c52.svg"); }
.icon--video { mask-image: url("../icons/video.707601e05bb9.svg"); }
.icon--check { mask-image: url("../icons/check.7d3fdab05557.svg"); }
.icon--plus { mask-image: url("../icons/plus.c09cbf71e568.svg"); }
.icon--clock { mask-image: url("../icons/clock.78d4f32a4a70.svg"); }
.icon--thumbs-up { mask-image: url("../icons/thumbs-up.d3a359e18e6d.svg"); }
.icon--award { mask-image: url("../icons/award.b6b0877d972e.svg"); }
.icon--medal { mask-image: url("../icons/medal.f58342015b90.svg"); }
.icon--trophy { mask-image: url("../icons/trophy.e4145231cd5d.svg"); }
.icon--star { mask-image: url("../icons/star.dde7c30e044d.svg"); }
.icon--sparkles { mask-image: url("../icons/sparkles.9a1bf5066717.svg"); }
.icon--heart-handshake { mask-image: url("../icons/heart-handshake.92d407848673.svg"); }
.icon--check-circle { mask-image: url("../icons/check-circle.e07fe23a1425.svg"); }
.icon--flame { mask-image: url("../icons/flame.a7cc36f1f751.svg"); }
.icon--crown { mask-image: url("../icons/crown.9a1acd04523f.svg"); }
.icon--flag { mask-image: url("../icons/flag.70b326994a10.svg"); }
.icon--download { mask-image: url("../icons/download.2a3d6027a7d8.svg"); }
.icon--copy { mask-image: url("../icons/copy.3f0d12221a8e.svg"); }
.icon--users { mask-image: url("../icons/users.583703bb7bc1.svg"); }
.icon--circle-plus { mask-image: url("../icons/circle-plus.41a16b0425dc.svg"); }
.icon--circle-minus { mask-image: url("../icons/circle-minus.ecb11af16d0e.svg"); }

/* ---------- Buttons and pills ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s, filter 0.15s;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  filter: brightness(1.08);
}

.btn--ghost {
  box-shadow: inset 0 0 0 1.5px var(--color-line);
}

.btn--ghost:hover {
  background: var(--color-bg);
}

.btn--light {
  background: #FFFFFF;
  color: #1C1C1E;
}

.btn--danger {
  background: transparent;
  color: var(--color-danger);
  box-shadow: inset 0 0 0 1.5px var(--color-danger-line);
}

.btn--link {
  min-height: 44px;
  padding: 0 var(--space-2);
  color: var(--color-primary);
}

.btn--block {
  width: 100%;
}

.icon-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.pill:hover,
.pill[aria-current] {
  background: var(--color-bg);
}

/* ---------- Tiles ---------- */
.tile {
  background: var(--color-card);
  border-radius: var(--radius-tile);
  padding: var(--space-5);
  box-shadow: var(--shadow-tile);
}

.tile__title {
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.tile--gradient {
  color: #FFFFFF;
  box-shadow: none;
}

.tile--gradient-tutos { background: var(--gradient-tutos); }
.tile--gradient-tests { background: var(--gradient-tests); }
.tile--gradient-guide { background: var(--gradient-guide); }
.tile--gradient-sons { background: var(--gradient-sons); }
.tile--gradient-entraide { background: var(--gradient-entraide); }

/* The blue focus ring would blend into coloured tiles. */
.tile--gradient :focus-visible {
  outline-color: #FFFFFF;
}

/* ---------- Header / navigation (lot 12, D1-D3) ----------
   Below 64rem: brand, theme, menu button, then the flat panel (open by
   default without JS). From 64rem: one line; the panel gives way to the bar
   entries (.nav__wide) and the <details> menus. */
.nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-tile);
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
}

[data-js] .nav {
  border-radius: var(--radius-pill);
}

[data-js] .nav.is-open {
  border-radius: var(--radius-tile);
}

.nav .nav__wide {
  display: none;
}

.nav .icon-btn {
  background: transparent;
}

.nav .icon-btn:hover,
.nav .icon-btn[aria-current] {
  background: var(--color-bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  min-width: 0;
  margin-right: auto;
  padding-right: var(--space-2);
  color: var(--color-text);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
}

.brand__mark {
  width: 32px;
  height: 32px;
}

.brand__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Name and slogan shrink with ellipsis: the bar never overflows (the full
   text stays in the link's accessible name). */
.brand__tagline {
  overflow: hidden;
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav__links {
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__links > li > a,
.nav__menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.nav__menu > summary::-webkit-details-marker {
  display: none;
}

.nav__links > li > a:hover,
.nav__links > li > a[aria-current],
.nav__menu > summary:hover,
.nav__menu > summary[aria-current],
.nav__menu[open] > summary {
  background: var(--color-bg);
}

.nav__menu {
  position: relative;
}

.icon--chevron-down { mask-image: url("../icons/chevron-down.547717d9d012.svg"); }
.icon--log-out { mask-image: url("../icons/log-out.cb4c525f592d.svg"); }

.nav__chev {
  width: 1rem;
  height: 1rem;
  transition: transform 0.15s;
}

.nav__menu[open] .nav__chev {
  transform: rotate(180deg);
}

/* The account summary: avatar + pseudo on a pastille. */
.nav__account > summary {
  gap: var(--space-2);
  padding: 4px var(--space-3) 4px 4px;
  background: var(--color-bg);
  font-weight: 700;
  font-size: 0.875rem;
}

.nav__username {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown panels (Contenus, account): tile surface, lifted. */
.nav__drop {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: var(--space-2);
  border-radius: 18px;
  background: var(--color-card);
  box-shadow: 0 0 0 1px var(--color-line), 0 12px 32px rgb(20 20 40 / 18%);
  list-style: none;
}

.nav__drop--right {
  right: 0;
  left: auto;
}

.nav__drop ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__drop a,
.nav__drop button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-field);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.nav__drop a:hover,
.nav__drop button:hover,
.nav__drop a[aria-current] {
  background: var(--color-bg);
}

.nav__drop small {
  display: block;
  margin-top: 1px;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.8125rem;
}

.nav__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #FFFFFF;
}

.nav__ico--sons { background: var(--gradient-sons); }
.nav__ico--tutos { background: var(--gradient-tutos); }

.nav__drop .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.nav__drop--right .icon {
  margin: 0 7px;
  color: var(--color-text-muted);
}

.nav__who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding: var(--space-2) var(--space-3) 10px;
  border-bottom: 1px solid var(--color-line);
}

.nav__who b {
  display: block;
  font-size: 0.9375rem;
}

.nav__who b + span {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.nav__drop--right ul {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-line);
}

/* Mobile flat panel: no dropdown, « Contenus » entries indented. */
.nav__panel {
  order: 1;
  flex-basis: 100%;
  padding: var(--space-2) 0 var(--space-1);
}

[data-js] .nav:not(.is-open) .nav__panel {
  display: none;
}

.nav__flat,
.nav__flat ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__flat a,
.nav__flat button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav__flat a:hover,
.nav__flat button:hover,
.nav__flat a[aria-current] {
  background: var(--color-bg);
}

.nav__flat ul a {
  min-height: 44px;
  padding-left: 28px;
  font-weight: 500;
  font-size: 0.9375rem;
}

.nav__group {
  display: block;
  padding: var(--space-3) var(--space-3) var(--space-1);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.8125rem;
}

.nav__flat--account {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.nav__flat .avatar {
  width: 28px;
  height: 28px;
  font-size: 0.6875rem;
}

.nav__join {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.nav__join .btn {
  flex: 1;
}

.theme-icon-dark,
.menu-icon-open,
.nav.is-open .menu-icon-closed {
  display: none;
}

.nav.is-open .menu-icon-open {
  display: inline-block;
}

[data-theme="dark"] .theme-icon-light {
  display: none;
}

[data-theme="dark"] .theme-icon-dark {
  display: inline-block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-light {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-icon-dark {
    display: inline-block;
  }
}

@media (min-width: 64rem) {
  .nav,
  [data-js] .nav,
  [data-js] .nav.is-open {
    flex-wrap: nowrap;
    border-radius: var(--radius-pill);
  }

  .brand {
    margin-right: var(--space-2);
  }

  .nav .nav__wide {
    display: block;
  }

  .nav .nav__links {
    display: flex;
  }

  .nav .icon-btn.nav__search {
    display: grid;
    margin-left: auto;
  }

  .nav .btn.nav__wide {
    display: inline-flex;
  }

  .nav__panel,
  [data-js] .nav:not(.is-open) .nav__panel,
  .nav__toggle {
    display: none !important;
  }
}

/* ---------- Messages and alerts ---------- */
.messages {
  display: grid;
  gap: var(--space-2);
  max-width: 560px;
  margin: 0 auto var(--space-4);
  padding: 0;
  list-style: none;
}

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: 14px;
  border-left: 4px solid var(--color-info);
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
  font-size: 0.9375rem;
  font-weight: 600;
}

.alert--success { border-left-color: var(--color-success); }
.alert--warning { border-left-color: var(--color-warning); }

.alert--error,
.alert--danger {
  border-left-color: var(--color-danger-line);
  color: var(--color-danger);
}

.alert .errorlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Home ---------- */
.home {
  display: grid;
  gap: var(--space-4);
}

.home__hero,
.home__side,
.home__latest-grid {
  display: grid;
  gap: var(--space-4);
}

.home__side {
  grid-template-rows: auto 1fr;
}

.hero {
  padding: var(--space-6);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
}

.hero__title {
  margin: var(--space-4) 0 var(--space-3);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
}

.hero__lead {
  max-width: 34rem;
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.flows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.flows__lead {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.flows__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: auto 0 0;
  padding: var(--space-3) 0 0;
  list-style: none;
}

.flow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-size: 0.875rem;
  font-weight: 600;
}

.flow__play {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-success);
  color: #FFFFFF;
}

.flow__play .icon {
  width: 14px;
  height: 14px;
}

.rubriques {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.rubrique {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 112px;
  padding: var(--space-4);
  border-radius: var(--radius-tile);
  color: #FFFFFF;
  text-decoration: none;
}

.rubrique__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-field);
  background: rgb(255 255 255 / 18%);
}

.rubrique__name {
  display: block;
  font-size: 1.125rem;
  font-weight: 800;
}

.rubrique__desc {
  display: none;
  font-size: 0.875rem;
}

.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-3);
  margin: var(--space-3) var(--space-1) var(--space-2);
}

.block-head h2 {
  font-size: 1.375rem;
  letter-spacing: -0.015em;
}

.block-head a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.home__empty {
  color: var(--color-text-muted);
}

.join {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.join h2 {
  font-size: 1.375rem;
  letter-spacing: -0.015em;
}

.join p {
  line-height: 1.5;
}

@media (min-width: 40rem) {
  .page {
    padding: var(--space-4);
  }

  .hero {
    padding: var(--space-8);
  }

  .rubriques {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .rubrique {
    min-height: 132px;
    padding: 18px;
  }

  .rubrique__desc {
    display: block;
  }

  .home__latest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .home__hero {
    grid-template-columns: 1.35fr 1fr;
  }

  .home__latest-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Auth pages (allauth) ---------- */
.auth {
  display: grid;
  /* minmax(0, ...): the captcha widget (316 px wide) must not widen the column past a 320 px screen. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.auth__card {
  width: 100%;
  max-width: 440px;
  padding: var(--space-6) var(--space-5);
}

.auth--manage .auth__card {
  max-width: 560px;
}

.auth__card > * + * {
  margin-top: var(--space-4);
}

/* Hidden helper forms (passkey login, "cancel" logout) take no space. */
.auth__card > form:not(.form) {
  margin: 0;
}

.auth__card h1 {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

.auth__card h1 + p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.auth__card h2 {
  font-size: 1.125rem;
}

.auth__card p {
  line-height: 1.5;
}

.auth__card a:not(.btn) {
  font-weight: 700;
  text-decoration: none;
}

.auth__card a:not(.btn):hover {
  text-decoration: underline;
}

.auth__below {
  color: var(--color-text-muted);
  text-align: center;
  font-size: 0.9375rem;
}

/* Forms */
.form {
  display: grid;
  gap: var(--space-4);
}

.form__actions,
.btn-group {
  display: grid;
  gap: var(--space-3);
}

.auth__card .form .btn,
.auth__card .btn-group .btn {
  width: 100%;
}

.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.field label {
  font-weight: 700;
  font-size: 0.875rem;
}

.field input:not([type="checkbox"], [type="radio"]),
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) 14px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-field);
  background: var(--color-field);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem;
}

.field textarea {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.05em;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--color-primary);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--color-danger-line);
}

.field input:disabled {
  color: var(--color-text-muted);
}

/* One-time code: large, spaced digits (the OTP step of the mockup). */
.field input[autocomplete="one-time-code"] {
  min-height: 56px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.35em;
  text-align: center;
}

.field--check {
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-3);
}

.field--check input {
  width: 22px;
  height: 22px;
  margin: 11px 0;
  accent-color: var(--color-primary);
}

.field--check label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.field--check .field__help,
.field--check .errorlist {
  grid-column: 1 / -1;
}

.field__help {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.field__help ul {
  margin: var(--space-1) 0 0;
  padding-left: 1.1em;
}

/* allauth puts the "forgot password" link in the password help text. */
.field__help > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
}

.errorlist {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-danger);
  font-size: 0.8125rem;
  font-weight: 600;
}

.sep {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.sep::before,
.sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

/* Friendly Captcha renders its own widget inside this container. */
.frc-captcha {
  max-width: 100%;
  border-radius: var(--radius-field);
}

/* TOTP QR code (data: SVG, black on transparent): needs a light plate in dark mode. */
.auth__card img {
  width: 200px;
  height: 200px;
  margin-inline: auto;
  padding: var(--space-3);
  border-radius: var(--radius-field);
  background: #FFFFFF;
}

/* MFA overview panels and key list */
.auth__card section {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.auth__card section > * + * {
  margin-top: var(--space-2);
}

.auth__card section ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.auth__card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.auth__card th,
.auth__card td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
}

.subnav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1);
  border-radius: var(--radius-tile);
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
  list-style: none;
}

@media (min-width: 40rem) {
  .auth {
    padding: var(--space-8) 0 var(--space-4);
  }

  .auth__card {
    padding: var(--space-7);
  }

  .subnav ul {
    border-radius: var(--radius-pill);
  }
}

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-5) var(--space-2) var(--space-2);
  border-top: 1px solid var(--color-line);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.site-footer strong {
  color: var(--color-text);
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Article types ---------- */
/* Theme gradients only: core.theme checks white text on both ends of each. */
.type--actualite { background: var(--gradient-actualite); }
.type--test { background: var(--gradient-tests); }
.type--tuto { background: var(--gradient-tutos); }
.type--guide { background: var(--gradient-guide); }
.type--son { background: var(--gradient-sons); }

.type-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* ---------- Page titles, empty states, pagination ---------- */
.page-title {
  margin: var(--space-4) var(--space-1) var(--space-5);
}

.page-title h1 {
  margin-bottom: 6px;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  letter-spacing: -0.022em;
}

.page-title p {
  max-width: 40rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.empty {
  padding: var(--space-8) var(--space-5);
  text-align: center;
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.empty__icon .icon {
  width: 26px;
  height: 26px;
}

.empty h2 {
  margin-bottom: 6px;
  font-size: 1.1875rem;
}

.empty p {
  max-width: 440px;
  margin: 0 auto;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-5);
}

.pager > a,
.pager > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.875rem;
}

.pager > a {
  color: var(--color-text);
  text-underline-offset: 3px;
}

.pager > [aria-current] {
  background: var(--color-text);
  color: var(--color-bg);
}

.pager__off {
  color: var(--color-text-muted);
}

.pager .icon {
  width: 1rem;
  height: 1rem;
}

/* ---------- Article tiles (home, section index) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
}

.card__cover,
.card__cover img {
  width: 100%;
  height: auto; /* the img's height attribute would beat aspect-ratio */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
  padding: var(--space-4) 18px 18px;
}

.card__title {
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.card__title a {
  color: var(--color-text);
  text-decoration: none;
}

/* The whole tile is the link's hit area; the focus ring goes on the tile. */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__title a:hover {
  text-decoration: underline;
}

.card__title a:focus-visible {
  outline: none;
}

.card:has(.card__title a:focus-visible) {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.card__chapo {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Type filter on the Blog index */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.chips a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
}

.chips a[aria-current] {
  background: var(--color-text);
  color: var(--color-bg);
}

.chips__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ---------- Article page ---------- */
.reading {
  max-width: 780px;
  margin: 0 auto;
}

.crumbs {
  margin: var(--space-2) var(--space-1) var(--space-2);
  font-size: 0.875rem;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}

.crumbs li + li::before {
  content: "/";
  padding: 0 var(--space-2);
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
}

.provenance {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: 18px;
  padding: 14px var(--space-4);
  border-radius: 16px;
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
}

.provenance__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-info);
  color: #FFFFFF;
}

.provenance__icon .icon {
  width: 18px;
  height: 18px;
}

.provenance p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.provenance strong {
  display: block;
  color: var(--color-text);
  font-size: 0.9375rem;
}

.art-head {
  margin: 0 var(--space-1) var(--space-5);
}

.art-head h1 {
  margin: var(--space-3) 0;
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.chapo {
  margin-bottom: var(--space-4);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.5;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.byline strong {
  color: var(--color-text);
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradient-guide);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.875rem;
}

/* Avatar colour per member (community.templatetags.community_tags.avatar_color):
   one of the section gradient tokens, picked server-side from the user id. */
.avatar--tutos { background: var(--gradient-tutos); }
.avatar--tests { background: var(--gradient-tests); }
.avatar--guide { background: var(--gradient-guide); }
.avatar--sons { background: var(--gradient-sons); }
.avatar--entraide { background: var(--gradient-entraide); }
.avatar--actualite { background: var(--gradient-actualite); }

.art-cover,
.art-cover img {
  width: 100%;
  height: auto; /* the img's height attribute would beat aspect-ratio */
  aspect-ratio: 780 / 334;
  object-fit: cover;
  border-radius: var(--radius-tile);
}

.art-cover {
  margin-bottom: 14px;
}

/* Body: StreamField blocks are the direct children of .prose. */
.prose {
  padding: 22px 18px;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.prose > * {
  margin: 0;
}

.prose > * + * {
  margin-top: 18px;
}

.prose > * + h2 {
  margin-top: var(--space-8);
}

.prose > * + h3 {
  margin-top: var(--space-6);
}

.prose h2 {
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.prose h3 {
  font-size: 1.25rem;
}

.prose ul,
.prose ol:not(.steps) {
  padding-left: 1.25em;
}

.prose code,
.comment__body code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--color-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

/* Primary on the page background is < 4.5:1: links on --color-bg surfaces
   inside a tile keep the text colour (underlined, from the base `a` rule). */
.tile .callout a:not(.btn) {
  color: var(--color-text);
}

.article-figure img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.article-figure figcaption {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.steps {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-1) 14px;
  counter-increment: step;
}

.steps__item::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-card);
  font-weight: 800;
  font-size: 0.9375rem;
}

.steps__title {
  align-self: center;
  font-weight: 700;
}

.steps__body {
  color: var(--color-text-muted);
  font-size: 1rem;
}

.steps__body > * + * {
  margin-top: var(--space-2);
}

.callout {
  display: flex;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  border-left: 5px solid var(--color-success);
  border-radius: 14px;
  background: var(--color-bg);
  font-size: 1rem;
  line-height: 1.55;
}

.callout--attention {
  border-left-color: var(--color-warning);
}

.callout__icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--color-success);
}

.callout--attention .callout__icon {
  color: var(--color-warning);
}

.callout__label {
  font-weight: 800;
}

.callout div > * + * {
  margin-top: 6px;
}

/* Deliberate fixed dark code palette, whatever the theme (not admin-editable):
   #EDEDF2 on #1B1B20 = 14.7:1, #A1A1AA on #1B1B20 = 6.69:1; #33333B is a
   decorative separator only. */
.code-block {
  overflow: hidden;
  border-radius: 14px;
  background: #1B1B20;
  color: #EDEDF2;
}

.code-block__lang {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid #33333B;
  color: #A1A1AA;
  font-size: 0.8125rem;
  font-weight: 700;
}

.code-block pre {
  margin: 0;
  padding: 14px var(--space-4);
  overflow-x: auto;
  line-height: 1.55;
}

.code-block pre:focus-visible {
  outline-offset: -3px;
}

.code-block code {
  padding: 0;
  background: none;
  font-size: 0.875rem;
  white-space: pre;
}

.article-table {
  overflow-x: auto;
}

.article-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.article-table caption {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: left;
}

.article-table th,
.article-table td {
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
}

.article-table th {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.article-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.taxo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.tag {
  padding: var(--space-1) 10px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.8125rem;
}

/* ---------- Comments ---------- */
.comments {
  margin-top: 14px;
  padding: 22px 18px;
}

.comments h2 {
  margin-bottom: 6px;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}

.comments__empty {
  padding: var(--space-3) 0;
  color: var(--color-text-muted);
}

.comment {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-1) var(--space-3);
  padding: 18px 0;
  border-top: 1px solid var(--color-line);
}

.comment .avatar {
  grid-row: span 2;
}

.comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) 10px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.comment__meta strong {
  color: var(--color-text);
  font-size: 0.9375rem;
}

.comment__body {
  grid-column: 2;
  min-width: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.comment__body > * {
  margin: 6px 0 0;
}

.comment__body ul,
.comment__body ol {
  padding-left: 20px;
}

.comment__body pre {
  overflow-x: auto;
}

.comments__form {
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}

.comments__form textarea {
  min-height: 130px;
  resize: vertical;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: normal;
}

.comments__actions {
  display: flex;
  justify-content: flex-end;
}

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: 16px;
  background: var(--color-bg);
}

.notice > .icon {
  width: 22px;
  height: 22px;
  color: var(--color-text-muted);
}

.notice p {
  flex: 1;
  min-width: 180px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ---------- Search ---------- */
.search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.search__field {
  flex: 1;
  min-width: min(100%, 220px);
}

.search__field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 0.9375rem;
}

.search__input {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-field);
  background: var(--color-field);
  color: var(--color-text-muted);
}

/* The ring is drawn on the wrapper, around the icon and the input. */
.search__input:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.search__input input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 1rem;
  outline: none;
}

.search .btn {
  min-height: 48px;
}

.count {
  margin: 18px var(--space-1) 10px;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.count strong {
  color: var(--color-text);
}

.results {
  margin: 0;
  padding: var(--space-1) var(--space-5);
  list-style: none;
}

.results li {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
}

.results li:first-child {
  border-top: 0;
}

.results h2 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.results h2 a {
  text-underline-offset: 3px;
}

.results__chapo {
  max-width: 70ch;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 40rem) {
  .prose,
  .comments {
    padding: var(--space-7) var(--space-8);
  }
}

/* ---------- Entraide (lot 4) ---------- */
/* Member names and question titles inside tiles keep the text colour
   (core/tests/test_contrast.py LINK_RULES); same specificity as the tile
   link rule above, later in the file, so they win. */
.tile a.who:not(.btn) {
  color: var(--color-text);
  text-decoration: none;
}

.tile a.title-link:not(.btn) {
  color: var(--color-text);
  text-decoration: none;
}

/* The underline sits on the name only: on the link it would also run
   under the avatar initials. */
a.who .who__name {
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 3px;
}

.tile a.title-link:not(.btn):hover,
a.who:hover .who__name {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* « Utile » link for visitors: a button look, not a text link. */
.tile a.vote:not(.btn) {
  color: var(--color-text);
  text-decoration: none;
}

/* Error summary links sit on --color-bg: text colour, underlined. */
.tile .errsum a:not(.btn) {
  color: var(--color-text);
  font-weight: 700;
}

.icon--ok {
  color: var(--color-success);
}

.who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--color-text);
  font-weight: 700;
  text-underline-offset: 3px;
}

.who .avatar {
  width: 24px;
  height: 24px;
  font-size: 0.625rem;
}

/* Status pill: tinted background + coloured mark (≥ 3:1), text stays
   --color-text (≥ 4.5:1 on the tint). */
.status {
  --status: var(--color-new);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--status) 14%, var(--color-card));
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 800;
}

.status--resolved {
  --status: var(--color-success);
}

.status__mark {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--status);
}

.status--share {
  --status: var(--color-secondary);
}

.status--resolved .status__mark,
.status--share .status__mark {
  background: var(--status);
  box-shadow: none;
  color: #FFFFFF;
}

.status__mark .icon {
  width: 10px;
  height: 10px;
}

/* Kind radio cards of the publish form (lot 12 D5). */
.kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.kind {
  position: relative;
  display: block;
}

.kind input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.kind__card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 12px;
  height: 100%;
  padding: 16px;
  border-radius: 16px;
  background: var(--color-field);
  box-shadow: inset 0 0 0 1.5px var(--color-line);
}

.kind__ic {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #FFFFFF;
}

.kind__ic--question { background: var(--gradient-entraide); }
.kind__ic--partage { background: var(--gradient-guide); }

.kind__card b {
  font-size: 1rem;
}

.kind__card small {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.kind input:checked + .kind__card {
  background: var(--color-card);
  box-shadow: inset 0 0 0 2.5px var(--color-primary);
}

.kind input:focus-visible + .kind__card {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Non-colour cue for the checked card (forced-colors users included). */
.kind input:checked + .kind__card::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  mask: url("../icons/check.7d3fdab05557.svg") center / 14px no-repeat;
}

.kind__card {
  position: relative;
}

@media (forced-colors: active) {
  .kind__card {
    border: 1px solid CanvasText;
  }

  .kind input:checked + .kind__card {
    outline: 3px solid Highlight;
  }

  .kind input:checked + .kind__card::after {
    background: Highlight;
  }
}

@media (max-width: 56rem) {
  .kinds { grid-template-columns: 1fr; }
}

.chips__dot--open { background: var(--color-new); }
.chips__dot--resolved { background: var(--color-success); }

.section-gap {
  margin-top: 14px;
}

.side-title {
  margin-bottom: var(--space-3);
}

.side-empty {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* List: the Entraide gradient lives only on this header band (and the
   leaderboard's top 3). */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 22px;
  border-radius: var(--radius-tile);
  background: var(--gradient-entraide);
  color: #FFFFFF;
}

.band h1 {
  margin-bottom: 6px;
  font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.25rem);
  letter-spacing: -0.022em;
}

.band p {
  max-width: 35rem;
  line-height: 1.5;
}

/* Blog tabs (lot 12): one band, two link tabs; the gradient follows the tab
   (entraide gradient is the .band default). */
.band--blog {
  display: block;
}

.band--blog-articles {
  background: var(--gradient-actualite);
}

.band__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.band-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-4);
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.22);
}

.band-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.band-tabs a:hover {
  background: rgba(255, 255, 255, 0.14);
}

.band-tabs .is-current,
.band-tabs .is-current:hover {
  background: #FFFFFF;
  color: #1C1C1E;
}

.band-tabs__n {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.75rem;
  font-weight: 800;
}

.band-tabs .is-current .band-tabs__n {
  background: #F2F2F7;
}

.band :focus-visible {
  outline-color: #FFFFFF;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) 28px;
  margin: var(--space-4) var(--space-1);
}

.filters__search {
  flex-basis: 100%;
}

.filters__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.filters__group .chips {
  margin: 0;
}

.filters__label {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 700;
}

.qa-grid {
  display: grid;
  gap: 14px;
  align-items: start;
}

.qa-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.qa-grid .count {
  margin-top: 0;
}

.qlist {
  margin: 0;
  padding: var(--space-1) var(--space-5);
  list-style: none;
}

.q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) 18px;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
}

.q:first-child {
  border-top: 0;
}

.q__title {
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.count-box {
  grid-row: span 2;
  align-self: center;
  min-width: 72px;
  padding: var(--space-2) 10px;
  border-radius: 14px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.count-box b {
  display: block;
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
}

.count-box--ok {
  box-shadow: inset 0 0 0 2px var(--color-success);
}

.rank {
  display: grid;
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.rank li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  border-top: 1px solid var(--color-line);
}

.rank li:first-child {
  border-top: 0;
}

.rank .who .avatar,
.lb .who .avatar {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

.rank__n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--color-text-muted);
  font-weight: 800;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.rank__n--top {
  background: var(--gradient-entraide);
  color: #FFFFFF;
}

.pts {
  font-weight: 800;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.pts small {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.75rem;
}

/* Question page */
.qhead {
  padding: 22px 18px;
}

.qhead h1 {
  margin: var(--space-3) 0 14px;
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  overflow-wrap: anywhere;
}

.qhead .byline {
  margin-bottom: var(--space-4);
}

.qhead .md {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Member Markdown (core.markdown.render) */
.md {
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.md > * {
  margin: 0 0 var(--space-3);
}

.md > :last-child {
  margin-bottom: 0;
}

.md ul,
.md ol {
  padding-left: 22px;
}

.md code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--color-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.md pre {
  overflow-x: auto;
  padding: var(--space-3);
  border-radius: var(--radius-field);
  background: var(--color-bg);
}

.md pre code {
  padding: 0;
}

.md a {
  font-weight: 700;
  text-underline-offset: 3px;
}

.owner-tile {
  margin-top: 14px;
}

.owner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.owner p {
  flex: 1;
  min-width: 200px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.answers-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: 28px var(--space-1) var(--space-3);
}

.answers-head h2 {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}

.answers-head p,
.answers-empty {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.answers {
  display: grid;
  gap: var(--space-3);
}

.answer {
  padding: 22px 18px;
  scroll-margin-top: var(--space-4);
}

.answer--best {
  box-shadow: inset 0 0 0 2px var(--color-success), var(--shadow-tile);
}

/* Fixed green: white text 5.0:1, theme-independent like the gradients. */
.best {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3) var(--space-1) 6px;
  border-radius: var(--radius-pill);
  background: #15803D;
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 800;
}

.best .icon {
  width: 16px;
  height: 16px;
}

.best--small {
  margin: 0;
  padding: 2px 10px 2px var(--space-1);
  font-size: 0.75rem;
}

.answer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.answer__head .who {
  font-size: 0.9375rem;
}

.answer__head .who .avatar {
  width: 36px;
  height: 36px;
  font-size: 0.8125rem;
}

.answer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px var(--space-3);
  margin-top: var(--space-4);
}

.answer__why {
  flex-basis: 100%;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.vote {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 6px 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.vote .icon {
  width: 18px;
  height: 18px;
}

.vote__count {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--color-card);
  font-variant-numeric: tabular-nums;
}

.vote--on {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.vote--on .vote__count {
  background: color-mix(in srgb, var(--color-on-primary) 16%, transparent);
}

.vote:disabled {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-line);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.vote:disabled .vote__count {
  background: var(--color-bg);
}

.reply {
  margin-top: 14px;
  padding: 22px 18px;
}

.reply h2 {
  margin-bottom: 14px;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
}

/* Attached images: thumbnails under the text, each links to the full size. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  max-width: 520px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.shots a {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.shots img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Question/answer forms: prose textareas (.field textarea is monospace for codes). */
.form--post textarea {
  min-height: 150px;
  resize: vertical;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: normal;
  line-height: 1.5;
}

.form--post input[type="file"] {
  min-height: 52px;
  padding: 7px;
  border-style: dashed;
  cursor: pointer;
}

.form--post input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: var(--space-3);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-card);
  box-shadow: inset 0 0 0 1.5px var(--color-line);
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* Ask page */
.ask {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.errsum {
  padding: 14px var(--space-4);
  border-left: 5px solid var(--color-danger-line);
  border-radius: 14px;
  background: var(--color-bg);
}

.errsum h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 6px;
  color: var(--color-danger);
  font-size: 1rem;
}

.errsum ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.7;
}

.md-help {
  margin-top: -8px;
  border-radius: var(--radius-field);
  background: var(--color-bg);
}

.md-help summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.md-help dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--space-4);
  margin: 0;
  padding: 0 14px 14px;
  font-size: 0.875rem;
}

.md-help code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
}

.md-help dd {
  margin: 0;
  color: var(--color-text-muted);
}

.tips ul {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding-left: 18px;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.tips__note {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ---------- Contact (lot 9) ---------- */
/* Memorable element: the three-promise strip above the form (privacy story). */
.contact h1,
.contact-card h1 {
  margin-bottom: 6px;
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2rem);
  letter-spacing: -0.02em;
}

.contact__lead {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.promise {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.promise li {
  padding: var(--space-3) 14px;
  border-radius: 14px;
  background: var(--color-bg);
  font-size: 0.875rem;
  line-height: 1.45;
}

.promise b {
  display: block;
  margin-bottom: 2px;
  font-size: 0.9375rem;
}

.two-fields {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.contact__side {
  display: grid;
  gap: 14px;
}

.contact__side .tile__title {
  margin-bottom: var(--space-2);
  font-size: 1.0625rem;
}

.contact__side p {
  font-size: 0.875rem;
  line-height: 1.55;
}

.contact__limit {
  padding: 14px var(--space-4);
  border-left: 5px solid var(--color-warning);
  border-radius: 14px;
  background: var(--color-bg);
  font-weight: 700;
}

.contact__limit p {
  margin: 0;
}

.contact-card {
  max-width: 640px;
  margin: var(--space-6) auto 0;
  padding: var(--space-8);
}

.contact-card p {
  margin: 0 0 var(--space-4);
  line-height: 1.6;
}

.contact-card__ok {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-success) 16%, var(--color-card));
  color: var(--color-success);
}

.contact-card__ok .icon {
  width: 28px;
  height: 28px;
}

@media (min-width: 40rem) {
  .promise {
    grid-template-columns: repeat(3, 1fr);
  }

  .two-fields {
    grid-template-columns: 1fr 1fr;
  }
}

/* Leaderboard */
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 var(--space-1) var(--space-4);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
}

.tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
}

.tabs a[aria-current] {
  background: var(--color-text);
  color: var(--color-bg);
}

.lb-wrap {
  overflow-x: auto;
  padding: var(--space-3) var(--space-1);
}

.lb {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.lb caption {
  padding: var(--space-1) var(--space-3) var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: left;
}

.lb th {
  padding: 0 var(--space-3) var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: left;
}

.lb td {
  height: 56px;
  padding: 6px var(--space-3);
  border-top: 1px solid var(--color-line);
}

.lb td:first-child {
  width: 48px;
}

.lb .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lb__you td {
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-card));
}

.you-tag {
  margin-left: 6px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.75rem;
  font-weight: 800;
}

.rules {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px var(--space-3);
  align-items: baseline;
  margin: 0 0 var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.rules dt {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rules dd {
  margin: 0;
}

.rules__note {
  margin-bottom: 14px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.nightly {
  display: flex;
  gap: 10px;
  padding: var(--space-3) 14px;
  border-radius: 14px;
  background: var(--color-bg);
  font-size: 0.875rem;
  line-height: 1.45;
}

.nightly .icon {
  color: var(--color-text-muted);
}

/* Profile */
.prof {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px var(--space-6);
  align-items: center;
  padding: 22px 18px;
}

.prof > .avatar {
  width: 72px;
  height: 72px;
  font-size: 1.625rem;
}

.prof h1 {
  margin-bottom: var(--space-1);
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2rem);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.prof__since {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.prof__bio,
.prof__edit {
  grid-column: 1 / -1;
}

.prof__bio {
  max-width: 65ch;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.stats > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-size: 0.875rem;
  font-weight: 600;
}

.stats .icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.badges li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 2px var(--space-3);
  align-items: start;
  padding: 14px;
  border-radius: 16px;
  background: var(--color-bg);
}

.badges__icon {
  display: grid;
  place-items: center;
  grid-row: span 3;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--gradient-entraide);
  color: #FFFFFF;
}

.badges__icon--accepted { background: var(--gradient-sons); }
.badges__icon--seniority_days { background: var(--gradient-guide); }

.badges b {
  font-size: 0.9375rem;
}

.badges li > span:not(.badges__icon) {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.badges small {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.two {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.mini {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini li {
  display: grid;
  gap: 6px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.mini li:first-child {
  padding-top: 0;
  border-top: 0;
}

.mini .title-link {
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Search page: matching questions above the articles. */
.entraide-results {
  margin-top: 14px;
}

.entraide-results__more {
  margin-top: var(--space-3);
}

@media (min-width: 40rem) {
  .band {
    padding: 28px var(--space-8);
  }

  .qhead,
  .prof {
    padding: 28px var(--space-8);
  }

  .answer,
  .reply {
    padding: 22px var(--space-6);
  }

  .two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .qa-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .ask {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
}

/* ---------- Moderation (lot 5) ---------- */
/* « Signaler »: discreet on purpose (mockup screen 1), last item of the
   content's action row, pushed right; 44 px target, underline on hover. */
.report-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
}

.report-link .icon {
  width: 15px;
  height: 15px;
}

.tile a.report-link:not(.btn) {
  color: var(--color-text-muted);
  text-decoration: none;
}

.tile a.report-link:not(.btn):hover,
.tile a.report-link:not(.btn):focus-visible {
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Question: alone under the body, right-aligned. */
.qhead > .report-link {
  display: flex;
  width: fit-content;
  margin: var(--space-3) -10px -10px auto;
}

.comment > .report-link {
  grid-column: 2;
  justify-self: end;
  margin: -6px -10px -10px 0;
}

/* Report page (mockup screen 2) */
.report .form {
  gap: var(--space-5);
}

.excerpt {
  margin: 0;
  padding: 14px var(--space-4);
  border-left: 4px solid var(--color-line);
  border-radius: 0 14px 14px 0;
  background: var(--color-bg);
}

.excerpt figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin-bottom: 6px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.excerpt b {
  color: var(--color-text);
}

.excerpt p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: 0.9375rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-weight: 700;
  font-size: 0.9375rem;
}

.reasons {
  display: grid;
  gap: var(--space-2);
}

.field .reason {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 2px var(--space-3);
  min-height: 52px;
  padding: var(--space-3) 14px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-field);
  background: var(--color-field);
  font-weight: 400;
  font-size: 0.9375rem;
  cursor: pointer;
}

.reason input {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--color-primary);
}

.reason span {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.reason:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-field));
}

.reason:has(input:focus-visible) {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

fieldset[aria-describedby] .reason {
  border-color: var(--color-danger-line);
}

/* ---------- Sons (lot 6) ---------- */
/* The one memorable element (mockup): the duration, printed large on the
   Sons gradient; a notification sound is picked on its length first.
   Text on the gradient is plain white (>= 5:1 on both stops): no opacity,
   no translucent fill under text. */
.band--sons {
  background: var(--gradient-sons);
}

.band__note {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px #FFFFFF;
  font-size: 0.875rem;
  font-weight: 600;
}

.sounds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sound {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
}

.sound__face {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 104px;
  padding: var(--space-4) 18px 14px;
  background: var(--gradient-sons);
  color: #FFFFFF;
}

.dur {
  font-size: 2.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.dur small {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
}

.fmt {
  padding: 2px 8px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
}

.sound__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px var(--space-4);
}

.sound__title {
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.sound__title a {
  text-decoration-color: var(--color-line);
  text-underline-offset: 3px;
}

.sound__title a:hover {
  text-decoration-color: currentColor;
}

.sound__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin-top: auto;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* The browser's own player (<audio controls>): its look varies by browser. */
.player {
  display: block;
  width: 100%;
  min-height: 44px;
}

.btn.dl {
  padding: 0 14px;
  background: var(--color-bg);
  font-size: 0.875rem;
}

.btn.dl .icon {
  width: 1rem;
  height: 1rem;
}

.sounds--compact {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.sounds--compact .sound__face {
  min-height: 84px;
}

.sounds--compact .dur {
  font-size: 2.25rem;
}

/* Sound page */
.sound-head {
  display: grid;
  gap: 14px;
}

.sound-main h1 {
  margin: 10px 0 var(--space-3);
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
  letter-spacing: -0.022em;
  overflow-wrap: anywhere;
}

.sound-main__lead {
  max-width: 62ch;
  margin-bottom: var(--space-5);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.player--big {
  min-height: 54px;
}

.sound-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.sound-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: var(--space-6);
}

.sound-side .dur {
  font-size: clamp(3.5rem, 2.8rem + 3vw, 4.5rem);
}

.sound-side dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 0.875rem;
}

.sound-side dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sound-side .btn--light {
  width: 100%;
}

.licence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px 18px;
  margin-top: 14px;
}

.licence__mark {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 52px;
  padding: 0 6px;
  border-radius: var(--space-4);
  background: var(--color-bg);
  font-weight: 800;
  font-size: 0.9375rem;
}

.licence h2 {
  margin-bottom: 6px;
  font-size: 1.125rem;
}

.licence p {
  max-width: 70ch;
  margin-bottom: 10px;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.licence__link {
  font-weight: 700;
  text-underline-offset: 3px;
}

.licence__link .icon {
  width: 14px;
  height: 14px;
  margin-left: var(--space-1);
  vertical-align: -2px;
}

.credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.credit__text {
  flex: 1;
  min-width: min(220px, 100%);
  padding: var(--space-3) 14px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-field);
  background: var(--color-field);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

/* .btn sets display: the hidden attribute alone would not hide it. */
.credit [hidden] {
  display: none;
}

/* Outside the .credit row: empty, it takes no space and stays in the
   accessibility tree (never display: none, or the message is often skipped). */
.credit__done {
  font-size: 0.875rem;
  font-weight: 700;
}

.credit__done:not(:empty) {
  margin-top: var(--space-2);
}

/* Article « Son » block: sits on --color-bg inside the article tile, so its
   links keep the text colour (primary on bg is < 4.5:1). */
.sound-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  padding: 14px;
  border-radius: 18px;
  background: var(--color-bg);
}

.tile .sound-block a:not(.btn) {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sound-block__chip {
  display: grid;
  place-content: center;
  width: 76px;
  height: 76px;
  border-radius: var(--space-4);
  background: var(--gradient-sons);
  color: #FFFFFF;
  text-align: center;
}

.sound-block__chip b {
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.sound-block__chip small {
  font-size: 0.75rem;
  font-weight: 700;
}

.sound-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.sound-block__title {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.sound-block__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.sound-block .btn.dl {
  background: var(--color-card);
}

.sound-block .player {
  grid-column: 1 / -1;
}

/* Home: latest questions next to the latest sounds */
.home__two {
  display: grid;
  gap: var(--space-4);
}

.qmini {
  padding: 6px var(--space-5);
}

.qmini__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qmini__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  padding: 14px 0;
  border-top: 1px solid var(--color-line);
}

.qmini__list li:first-child {
  border-top: 0;
}

.qmini .title-link {
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.qmini .title-link:hover {
  text-decoration: underline;
}

.qmini__n {
  grid-row: span 2;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.qmini__n b {
  display: block;
  color: var(--color-text);
  font-size: 1.125rem;
}

@media (min-width: 40rem) {
  .sound-main {
    padding: 28px var(--space-8);
  }

  .licence {
    padding: 22px var(--space-6);
  }

  .sound-block__chip {
    grid-row: span 2;
  }

  .sound-block .player {
    grid-column: 2;
  }
}

@media (min-width: 64rem) {
  .sound-head {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .home__two {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

/* ---------- Guide d'achat (lot 7) ---------- */
/* The one memorable element (mockup): the « fiche technique » strip,
   protocols, Homey seal, then the dated price, always in this order on the
   cards, the comparison table, the product page and the article block. */
.band--guide,
.band--videos {
  background: var(--gradient-guide);
}

.guide-cats {
  display: grid;
  gap: var(--space-3);
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.guide-cats a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-tile);
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
  font-weight: 800;
  text-decoration: none;
}

.guide-cats a:hover span:last-child {
  text-decoration: underline;
}

.guide-cats small {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.guide-cats__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--space-3);
  background: var(--gradient-guide);
  color: #FFFFFF;
  font-size: 1.125rem;
}

.guide-grid {
  display: grid;
  align-items: start;
  gap: 14px;
  margin-top: 14px;
}

.filter-form fieldset {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.filter-form legend {
  margin-bottom: var(--space-1);
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 800;
}

.filter-form .tile__title {
  margin-bottom: var(--space-3);
}

.filter-form .field {
  margin-bottom: 18px;
}

.filter-form .field label {
  font-size: 0.9375rem;
  font-weight: 800;
}

.filter-form__two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}

/* The whole label is the target: 44 px high. */
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 0.9375rem;
  cursor: pointer;
}

.opt input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-primary);
}

.filter-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.filter-form__actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-underline-offset: 3px;
}

/* « Effacer les filtres »: text colour, underlined (mockup). */
.tile .filter-form__actions a:not(.btn) {
  color: var(--color-text);
  text-decoration: underline;
}

.guide-grid .count {
  margin-top: 0;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
}

/* Photos keep their own colours in both themes; an empty box keeps rows aligned. */
.product__shot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--color-bg);
}

.product__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px var(--space-4);
}

.brand-line {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.product__title {
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.product__title a,
.pblock__title {
  text-decoration-color: var(--color-line);
  text-underline-offset: 3px;
}

.product__title a:hover,
.pblock__title:hover {
  text-decoration-color: currentColor;
}

.product__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) 10px;
  margin-top: auto;
}

.spec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.proto {
  padding: 3px 9px;
  border-radius: var(--space-2);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Seal: tinted fill + coloured mark (>= 3:1 on the tint and on the card, white
   glyph >= 3:1 on the mark), text stays --color-text. The text always names
   the support: the colour is only a cue. Fixed colours, darker in light mode,
   lighter in dark mode. */
.seal {
  --seal: #636370;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--seal) 14%, var(--color-card));
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.seal--official { --seal: #15803D; }
.seal--community { --seal: #0070D9; }
.seal--native { --seal: #7243E1; }

.seal__mark {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--seal);
  color: #FFFFFF;
  font-size: 0.6875rem;
  line-height: 1;
}

.seal__mark .icon {
  width: 10px;
  height: 10px;
}

[data-theme="dark"] .seal { --seal: #8A8A96; }
[data-theme="dark"] .seal--official { --seal: #16A34A; }
[data-theme="dark"] .seal--community { --seal: #0082FA; }
[data-theme="dark"] .seal--native { --seal: #8B5CF6; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seal { --seal: #8A8A96; }
  :root:not([data-theme="light"]) .seal--official { --seal: #16A34A; }
  :root:not([data-theme="light"]) .seal--community { --seal: #0082FA; }
  :root:not([data-theme="light"]) .seal--native { --seal: #8B5CF6; }
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 800;
}

/* Fixed amber (>= 3:1 on the card in both themes); decoration only. */
.stars {
  color: #B45309;
  font-size: 0.9375rem;
  letter-spacing: 1px;
}

.stars .off {
  color: var(--color-line);
}

.price {
  font-size: 0.875rem;
  line-height: 1.4;
}

.price b {
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}

.price small,
.price__lead {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.price__lead {
  font-size: 0.875rem;
}

.price .price__none {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Affiliation: the badge always sits right after its link, never apart. */
.aff {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.aff-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #B45309 14%, var(--color-card));
  box-shadow: inset 0 0 0 1.5px #B45309;
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.aff-badge .icon {
  width: 13px;
  height: 13px;
}

.btn--shop {
  padding: 0 14px;
  font-size: 0.875rem;
}

.btn--shop:not(.btn--primary) {
  background: var(--color-bg);
}

.btn--shop .icon {
  width: 15px;
  height: 15px;
}

/* Category guide page */
.cat-head {
  display: grid;
  gap: 14px;
}

.cat-head h1 {
  margin-bottom: 10px;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.125rem);
  letter-spacing: -0.022em;
}

.cat-head h2 {
  margin-bottom: var(--space-2);
  font-size: 1.125rem;
}

.cat-head p,
.cat-head li {
  max-width: 65ch;
  line-height: 1.6;
}

.cat-head p + p {
  margin-top: 10px;
}

.cat-head ul,
.cat-head ol {
  margin: 0;
  padding-left: 20px;
}

.cat-head + .block-head,
.cmp-wrap + .block-head {
  margin-top: 26px;
}

.cmp-wrap {
  padding: var(--space-2) var(--space-2) var(--space-1);
  overflow-x: auto;
}

.cmp {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.cmp caption {
  padding: var(--space-2) var(--space-3) var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: left;
}

.cmp thead th {
  padding: 0 var(--space-3) var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: left;
}

.cmp td,
.cmp tbody th {
  padding: 10px var(--space-3);
  border-top: 1px solid var(--color-line);
  text-align: left;
  vertical-align: middle;
}

.cmp tbody th {
  font-weight: 800;
}

/* Product names keep the text colour, underlined (mockup). */
.tile .cmp th a:not(.btn) {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cmp tbody th small {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.cmp .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cmp .price b {
  font-size: 0.9375rem;
}

.cmp__none {
  color: var(--color-text-muted);
}

/* Product page */
.pp {
  display: grid;
  align-items: start;
  gap: 14px;
}

.pp-main {
  padding: 22px 18px;
}

.pp-top {
  display: grid;
  align-items: start;
  gap: 22px;
}

.pp-top__shot {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  background: var(--color-bg);
}

.pp-top__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pp h1 {
  margin: 6px 0 10px;
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  overflow-wrap: anywhere;
}

.pp-lead {
  margin-top: var(--space-3);
  line-height: 1.6;
}

.pp-lead > * + * {
  margin-top: 10px;
}

.pp-lead ul,
.pp-lead ol {
  margin: 0;
  padding-left: 20px;
}

.pc {
  display: grid;
  gap: var(--space-3);
  margin-top: 22px;
}

.pc section {
  padding: var(--space-4) 18px;
  border-radius: var(--space-4);
  background: var(--color-bg);
}

.pc h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 1rem;
}

.pc ul {
  margin: 0;
  padding-left: 20px;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.pc__plus .icon { color: var(--color-success); }
.pc__minus .icon { color: var(--color-danger); }

.review {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}

.review h2 {
  margin-bottom: var(--space-2);
  font-size: 1.125rem;
}

.review p {
  max-width: 70ch;
  margin-bottom: 10px;
  line-height: 1.6;
}

.review__test {
  font-weight: 700;
  text-underline-offset: 3px;
}

.buy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}

.buy .price b {
  font-size: 1.625rem;
}

.buy .btn--shop {
  width: 100%;
}

.buy dl {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font-size: 0.875rem;
}

.buy dt {
  color: var(--color-text-muted);
}

.buy dd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.mention {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: 14px;
  padding: var(--space-4) 18px;
  border-radius: var(--space-4);
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
  font-size: 0.875rem;
  line-height: 1.55;
}

.mention .icon {
  margin-top: 1px;
  color: #B45309;
}

/* Article « Fiche produit » block: sits on --color-bg inside the article
   tile, so its links keep the text colour (primary on bg is < 4.5:1). */
.pblock {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: 14px;
  border-radius: 18px;
  background: var(--color-bg);
}

.pblock:has(.pblock__shot) {
  grid-template-columns: 72px minmax(0, 1fr);
}

.tile .pblock a:not(.btn) {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pblock__shot {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-card);
}

.pblock__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pblock__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.pblock__title {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pblock__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.pblock .btn--shop:not(.btn--primary),
.pblock .proto {
  background: var(--color-card);
}

@media (min-width: 40rem) {
  .guide-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pp-main {
    padding: 28px var(--space-8);
  }

  .pp-top:has(.pp-top__shot) {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .pc {
    grid-template-columns: 1fr 1fr;
  }

  .pblock:has(.pblock__shot) {
    grid-template-columns: 110px minmax(0, 1fr);
  }
}

@media (min-width: 64rem) {
  .guide-cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .guide-grid {
    grid-template-columns: 290px minmax(0, 1fr);
  }

  .cat-head:has(.cat-head__tips) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .cat-head .tile {
    padding: 26px 28px;
  }

  .pp {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .buy {
    position: sticky;
    top: var(--space-4);
  }
}

/* ---------- Vidéos et consentement (lot 8) ---------- */
/* The one memorable element (mockup): the façade. A local image behind a
   large round play button; before any consent the click turns the same 16:9
   box into a calm question in place, so nothing leaves the site before a
   « oui ». Children inherit the box's radius (no overflow clipping: the
   focus ring stays outside and the question may grow taller than 16:9). */
.facade {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  background: #111114;
  color: #FFFFFF;
}

.facade__link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  color: #FFFFFF;
  text-decoration: none;
}

.facade__link:focus-visible {
  outline-offset: 3px;
}

.facade__thumb,
.facade__placeholder,
.facade__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

.facade__thumb {
  object-fit: cover;
}

.facade__placeholder {
  background: var(--gradient-guide);
}

.facade__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: auto;
  border-radius: 50%;
  background: rgb(15 15 20 / 78%);
  box-shadow: 0 0 0 3px #FFFFFF;
  color: #FFFFFF; /* explicit: links inside tiles take the primary colour */
  transition: background-color 0.15s;
}

.facade__play .icon {
  width: 26px;
  height: 26px;
  margin-left: 4px;
}

.facade__link:hover .facade__play {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Caption over any image: a scrim at least 70 % black under the text
   (white text >= 8:1 even over a white picture). */
.facade__cap {
  position: absolute;
  inset: auto 0 0;
  padding: 28px var(--space-4) var(--space-3);
  border-radius: inherit;
  background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 70%) 45%);
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}

/* In-flow (static) so the box grows if the question needs more than 16:9;
   empty, it sits under the link and takes no clicks. */
.facade__prompt:not(:empty) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 18px 22px;
  border-radius: inherit;
  background: var(--color-card);
  box-shadow: inset 0 0 0 1.5px var(--color-line);
  color: var(--color-text);
}

.facade__prompt p {
  font-size: 0.875rem;
  line-height: 1.5;
}

.facade__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.facade__manage {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-underline-offset: 3px;
}

.prose > .facade {
  border-radius: 16px;
}

/* « Nos contenus » and home: at most 3 cards per row in the 1200 px page. */
.band--videos {
  margin-bottom: var(--space-4);
}

/* Outlined chips: plain white text on the gradient, no translucent fill. */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.socials a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px #FFFFFF;
  color: inherit; /* the band's white */
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.socials a:hover {
  text-decoration: underline;
}

.socials .icon {
  width: 1rem;
  height: 1rem;
}

.videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-tile);
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
}

.vcard .facade {
  border-radius: var(--radius-tile) var(--radius-tile) 0 0;
}

.vcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px 16px;
}

.vcard__title {
  font-size: 1rem;
  line-height: 1.35;
}

/* Consent banner: first in the DOM, shown after the page (order) and sticky
   at the bottom of the viewport. It reaches its own place after the footer
   at the end of the scroll, so it never hides content for good, and it
   traps nothing. */
.consent-banner {
  order: 1;
  position: sticky;
  bottom: var(--space-3);
  z-index: 5;
  width: calc(100% - 2 * var(--space-3));
  max-width: 760px;
  margin: 0 auto var(--space-3);
  padding: var(--space-5) 22px 18px;
  border-radius: var(--radius-tile);
  background: var(--color-card);
  box-shadow: 0 0 0 1px var(--color-line), 0 8px 40px rgb(20 20 40 / 18%);
}

/* Keyboard focus scrolled into view stays above the banner: banner height
   + its 12 px offset, measured at 320 px wide (stacked, 303 px) and from
   40rem (3 per row, 212 px at most); see core/tests/test_consent.py. */
html:has(.consent-banner) {
  scroll-padding-bottom: 20rem;
}

.consent-banner h2 {
  margin: 0 var(--space-10) 6px 0;
  font-size: 1.0625rem;
}

.consent-banner p {
  margin-bottom: 14px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.consent-banner__actions {
  display: grid;
  gap: var(--space-2);
}

.consent-banner__more {
  display: none;
}

/* Same element, class and size for the three choices: no dark pattern. */
.consent-banner__button {
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
}

.consent-banner__button:hover {
  border-color: var(--color-text-muted);
}

.consent-banner__close {
  display: grid;
  place-items: center;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.consent-banner__close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* « Gérer mes cookies » */
.cookies {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}

.cookies .tile {
  padding: 22px;
}

.cookies h1 {
  margin-bottom: var(--space-2);
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.cookies h2 {
  margin-bottom: var(--space-2);
  font-size: 1.125rem;
}

.cookies p {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.cookies p + p {
  margin-top: var(--space-2);
}

.cookies fieldset {
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.cookies legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: 1.125rem;
  font-weight: 800;
}

.cookies__note {
  color: var(--color-text-muted);
}

.switch-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 14px 0;
  border-top: 1px solid var(--color-line);
}

.switch-row:first-of-type {
  border-top: 0;
}

.switch-row label:not(.toggle) {
  font-weight: 800;
}

.switch-row p {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* Switch: off = outlined track, knob left; on = filled green, knob right
   (the position tells the state, not only the colour; both >= 3:1). */
.toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 800;
  cursor: pointer;
}

.toggle input {
  appearance: none;
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  margin: 0;
  border: 2px solid var(--color-text-muted);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}

.toggle input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: left 0.15s;
}

.toggle input:checked {
  border-color: var(--color-success);
  background: var(--color-success);
}

.toggle input:checked::after {
  left: 25px;
  background: #FFFFFF;
}

.toggle input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (forced-colors: active) {
  .toggle input::after {
    background: CanvasText;
  }

  .toggle input:checked::after {
    background: Highlight;
  }
}

@media (min-width: 40rem) {
  html:has(.consent-banner) {
    scroll-padding-bottom: 15rem;
  }

  .consent-banner__more {
    display: inline;
  }

  .consent-banner__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .cookies .tile {
    padding: 26px 28px;
  }
}

/* ---------- Légal, mes données (lot 10) ---------- */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-4);
  margin: var(--space-2) 0;
  padding: 0;
  list-style: none;
}

.legal {
  max-width: 760px;
  margin: var(--space-4) auto 0;
}

.legal__card {
  padding: 22px 18px;
}

.legal__card h1 {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2rem);
  letter-spacing: -0.02em;
}

.legal__updated {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.legal__body {
  margin-top: var(--space-5);
  line-height: 1.65;
  overflow-wrap: break-word;
}

.legal__body > * {
  margin: 0;
}

.legal__body > * + * {
  margin-top: var(--space-3);
}

.legal__body > * + h2 {
  margin-top: 26px;
}

.legal__body > * + h3 {
  margin-top: var(--space-5);
}

.legal__body h2 {
  font-size: 1.25rem;
}

.legal__body h3 {
  font-size: 1.0625rem;
}

.legal__body ul,
.legal__body ol {
  padding-left: 1.25em;
}

.legal__body code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--color-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.legal-toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Card links: text colour on --color-card, underlined on hover only. */
.legal-toc a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  border-radius: 16px;
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
  font-weight: 800;
  text-decoration: none;
}

.legal-toc a:hover {
  text-decoration: underline;
}

/* « Ce qui est effacé / Ce qui reste, anonymisé »: read before any button.
   Columns stack by themselves when the card is narrow (no media query). */
.erase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
}

.erase__col {
  padding: var(--space-4);
  border-radius: 16px;
  background: var(--color-bg);
}

.erase h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1rem;
}

/* Decorative dot: the heading text carries the meaning. */
.erase h2::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.erase__col--gone h2::before {
  background: var(--color-danger-line);
}

.erase ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.875rem;
  line-height: 1.6;
}

@media (min-width: 40rem) {
  .legal__card {
    padding: 28px 32px;
  }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}