/*
 * Habillage des parcours de lecture du site : le règlement public (/reglement), la formation du staff
 * (/test-staff) et la remise à niveau des demandeurs de débannissement (/remise-a-niveau).
 *
 * Partagé par les trois pages, volontairement : elles affichent les MÊMES chapitres (voir
 * test-staff-content.js), et trois copies de cette feuille auraient divergé dès la première retouche.
 * Les jetons (couleurs, verre, ressorts) viennent de /site/site.css, chargé avant celle-ci.
 */

/* ---------- Ossature ----------
     Un chapitre à la fois, sommaire collant à gauche : un mur de texte de quinze chapitres ne se lit pas,
     et une progression ne se suit pas dans un document qui défile. Ici la PAGE défile normalement (pas
     de conteneur à défilement imbriqué) ; seul le sommaire tient en place via `position: sticky`. */

.fx-wrap { padding-bottom: clamp(72px, 9vw, 120px); }

/* Les pastilles d'information vivent dans l'en-tête de la page (.tete-infos) : même style que
   .pastille, sous le nom que leur donnent les scripts. */
.fx-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--encre-2);
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
  white-space: nowrap;
}

.fx-pill:empty { display: none; }
.fx-pill strong { color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-pill .rl-icon { color: var(--rouge-vif); }

/* ---------- Portail de connexion ---------- */

.fx-gate {
  position: relative;
  isolation: isolate;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 44px 30px;
  border-radius: var(--r-surface);
  background: var(--verre-fond), var(--verre-teinte);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 30px 80px -30px rgb(0 0 0 / 0.85);
}

.fx-gate-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 20px;
  font-size: 30px;
  color: var(--rouge-vif);
  background: rgb(255 59 78 / 0.12);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(255 59 78 / 0.22);
}

.fx-gate-ico .rl-icon { width: 32px; height: 32px; vertical-align: 0; }
.fx-gate h2 { margin: 0 0 12px; font-size: 24px; font-weight: 620; letter-spacing: -0.03em; }
.fx-gate p { color: var(--encre-2); line-height: 1.65; margin: 0 auto 22px; max-width: 430px; font-size: 15px; }
.fx-gate-note { font-size: 13px; color: var(--encre-3); margin-top: 18px; }

/* ---------- Deux colonnes ---------- */

.fx-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }

@media (max-width: 1000px) {
  .fx-layout { grid-template-columns: 1fr; }
}

/* Panneaux de verre : sommaire et chapitre. */
.fx-side,
.fx-chapter {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-surface);
  background: var(--verre-fond), var(--verre-teinte);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    inset 0 -1px 0 rgb(255 255 255 / 0.03),
    0 30px 80px -30px rgb(0 0 0 / 0.85);
}

@media (prefers-reduced-transparency: reduce) {
  .fx-side,
  .fx-chapter,
  .fx-gate {
    background: var(--noir-3);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- Sommaire ---------- */

/* Sous le bandeau fixe du site : 96 px le laissent passer sans jamais recouvrir le sommaire. */
.fx-side {
  position: sticky;
  top: 96px;
  padding: 20px 14px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  /* Barre fine mais visible : sur un écran bas, le sommaire défile, et rien d'autre ne le dirait. */
  scrollbar-width: thin;
}

@media (max-width: 1000px) { .fx-side { position: static; max-height: none; } }

.fx-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 0 8px; }
.fx-side-head strong { font-size: 15px; font-weight: 600; color: var(--encre); }
.fx-side-count { font-size: 12.5px; font-weight: 600; color: var(--rouge-vif); font-variant-numeric: tabular-nums; }

.fx-track { height: 5px; border-radius: 999px; background: rgb(255 255 255 / 0.07); overflow: hidden; margin: 0 8px 18px; }
.fx-track-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--rouge-profond), var(--rouge), var(--rouge-vif)); box-shadow: 0 0 10px var(--rouge-halo); transition: width 0.6s var(--ressort-doux); }

.fx-group { margin-bottom: 10px; }
.fx-group-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--encre-3); padding: 0 8px; margin-bottom: 6px; }

.fx-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 12px;
  color: var(--encre-2);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: color 0.2s, background-color 0.2s;
}

.fx-link:hover { color: var(--encre); background: rgb(255 255 255 / 0.05); }

.fx-link[aria-current="true"] {
  color: var(--encre);
  background: rgb(255 59 78 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 107 92 / 0.35);
}

.fx-link-ico { flex: 0 0 auto; width: 20px; text-align: center; color: var(--encre-3); line-height: 1; }
.fx-link[aria-current="true"] .fx-link-ico { color: var(--rouge-vif); }
.fx-link-txt { flex: 1; min-width: 0; }
.fx-link-done { flex: 0 0 auto; font-size: 12px; color: var(--vert); opacity: 0; transition: opacity 0.2s; }
.fx-link.is-done .fx-link-done { opacity: 1; }

/* ---------- Chapitre ---------- */

.fx-main { min-width: 0; }

.fx-chapter {
  padding: clamp(24px, 3.4vw, 44px);
  animation: chapitre 0.6s var(--ressort-doux) both;
}

/* Changer de chapitre : le texte arrive doucement plutôt que de remplacer l'autre d'un coup. */
@keyframes chapitre {
  from { opacity: 0; translate: 0 12px; }
}

.fx-chapter-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fx-chapter-step { font-size: 13px; font-weight: 600; color: var(--rouge-vif); }
.fx-chapter-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--encre-2);
  padding: 3px 11px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
}

.fx-chapter h1 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 630;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.fx-chapter h1 .rl-icon {
  flex: none;
  box-sizing: content-box;
  width: 26px;
  height: 26px;
  padding: 11px;
  border-radius: 15px;
  color: var(--rouge-vif);
  background: rgb(255 59 78 / 0.12);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 0 0 1px rgb(255 59 78 / 0.22);
}

.fx-chapter-resume { color: var(--encre-2); font-size: 16.5px; line-height: 1.6; margin: 0 0 26px; padding-bottom: 24px; border-bottom: 1px solid var(--trait); }

.fx-body { font-size: 16px; line-height: 1.72; color: rgb(246 238 238 / 0.86); }
.fx-body p { margin: 0 0 16px; }
.fx-body h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 620; letter-spacing: -0.02em; color: var(--encre); margin: 34px 0 14px; }
.fx-body h2::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, var(--rouge-vif), var(--rouge)); box-shadow: 0 0 10px var(--rouge-halo); }
.fx-body h3 { font-size: 16.5px; font-weight: 600; color: var(--encre); margin: 0 0 10px; }
.fx-body ul { margin: 0 0 16px; padding-left: 22px; }
.fx-body li { margin-bottom: 8px; }
.fx-body li::marker { color: var(--rouge-vif); }
.fx-body strong { font-weight: 600; color: var(--encre); }
.fx-body em { color: var(--encre-2); font-style: italic; }
.fx-body a { color: var(--rouge-vif); text-decoration: none; border-bottom: 1px solid rgb(255 107 92 / 0.35); transition: border-color 0.2s; }
.fx-body a:hover { border-bottom-color: currentColor; }
.fx-body code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.86em; padding: 2px 7px; border-radius: 7px; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }

/* Liste à coches : les conditions cumulatives (Octogone) se lisent mieux comme une check-list. */
.fx-body ul.fx-check { list-style: none; padding-left: 0; }
.fx-body ul.fx-check li { position: relative; padding-left: 30px; }
.fx-body ul.fx-check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.35em;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--vert-fond);
  box-shadow: inset 0 0 0 1px rgb(61 220 132 / 0.4);
}
.fx-body ul.fx-check li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(0.35em + 4px);
  width: 5px;
  height: 9px;
  border: solid var(--vert);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

/* ---------- Encarts ---------- */

.fx-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 20px 0;
  padding: 15px 17px;
  border-radius: var(--r-interne);
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
  font-size: 15px;
  line-height: 1.62;
}

.fx-note-ico { flex: 0 0 auto; font-size: 18px; line-height: 1; margin-top: 2px; color: var(--rouge-vif); }
.fx-note p { margin: 0; }
.fx-note.danger { background: rgb(255 59 78 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 59 78 / 0.3); }
.fx-note.warn { background: var(--ambre-fond); box-shadow: inset 0 0 0 1px rgb(245 185 78 / 0.3); }
.fx-note.ok { background: var(--vert-fond); box-shadow: inset 0 0 0 1px rgb(61 220 132 / 0.28); }
.fx-note.tip { background: rgb(106 209 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(106 209 255 / 0.26); }
/* « Côté staff » : de la lecture appliquée, pas du règlement — il doit se distinguer d'un coup d'œil. */
.fx-note.staff { background: rgb(255 255 255 / 0.05); box-shadow: inset 3px 0 0 var(--rouge), inset 0 0 0 1px rgb(255 255 255 / 0.07); }
.fx-note.warn .fx-note-ico { color: var(--ambre); }
.fx-note.ok .fx-note-ico { color: var(--vert); }
.fx-note.tip .fx-note-ico { color: #6ad1ff; }

/* Citation littérale d'un règlement. */
.fx-quote {
  margin: 20px 0;
  padding: 18px 22px;
  border-radius: var(--r-interne);
  background: rgb(255 59 78 / 0.06);
  box-shadow: inset 3px 0 0 var(--rouge), inset 0 0 0 1px rgb(255 255 255 / 0.05);
  font-size: 15.5px;
  line-height: 1.66;
  font-style: italic;
}

.fx-quote::before { content: "Texte du règlement"; display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--rouge-vif); margin-bottom: 8px; }

/* ---------- Étapes numérotées ---------- */

.fx-steps { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.fx-step { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-interne); background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); }
.fx-step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(180deg, #f2384d, #a10e26);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3);
}
.fx-step > div { font-size: 15px; line-height: 1.6; }
.fx-steps-big .fx-step { padding: 17px 19px; }

/* ---------- Tableaux ---------- */

.fx-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0; font-size: 14.5px; border-radius: var(--r-interne); overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.fx-table th { text-align: left; padding: 12px 15px; background: rgb(255 255 255 / 0.06); font-size: 12.5px; font-weight: 600; color: var(--encre-2); }
.fx-table td { padding: 13px 15px; border-top: 1px solid var(--trait); line-height: 1.55; vertical-align: top; }
.fx-table tbody tr:nth-child(even) td { background: rgb(255 255 255 / 0.02); }
/* Précision sous un libellé de tableau (nombre de salons, liste courte) : elle doit s'effacer
   derrière le libellé, pas le concurrencer. */
.fx-sous { display: block; margin-top: 3px; font-size: 13px; color: var(--encre-3); font-weight: 400; }

/* Un tableau à trois colonnes ne se comprime pas indéfiniment : sur téléphone, le contenu impose une
   largeur minimale et c'est la PAGE entière qui se mettait à défiler de travers. Le tableau défile
   donc dans son propre bloc — la page, elle, reste à la largeur de l'écran. L'enveloppe est posée par
   les scripts après chaque rendu, pour ne pas avoir à la répéter dans chaque chapitre. */
.fx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; border-radius: var(--r-interne); }
.fx-scroll > .fx-table { margin: 0; }

@media (max-width: 620px) {
  .fx-table { font-size: 13.5px; }
  .fx-table th, .fx-table td { padding: 10px 12px; }
}

/* ---------- Étiquettes ---------- */

.fx-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; margin-right: 6px; }
.fx-tag.ok { background: var(--vert-fond); color: var(--vert); }
.fx-tag.no { background: rgb(255 59 78 / 0.13); color: var(--rouge-vif); }
.fx-tag.warn { background: var(--ambre-fond); color: var(--ambre); }

/* « Avertissement / Changement de pseudo forcé » ne tient pas sur une ligne de téléphone : le
   `nowrap` qui garde les étiquettes courtes d'un seul tenant y devient la cause du débordement.
   Cette règle doit rester APRÈS la déclaration de .fx-tag — à spécificité égale, c'est la dernière
   déclarée qui gagne, et posée plus haut elle était simplement ignorée. */
@media (max-width: 620px) {
  .fx-tag { white-space: normal; }
}

/* ---------- Cartes « portes » (règlements, points de contact) ---------- */

.fx-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 20px 0; }
.fx-door { padding: 16px 17px; border-radius: var(--r-interne); background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); transition: background-color 0.3s; }
.fx-door:hover { background: rgb(255 255 255 / 0.06); }
.fx-door-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--rouge-vif); margin-bottom: 8px; }
.fx-door strong { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 6px; }
.fx-door p { margin: 0; font-size: 14px; color: var(--encre-2); line-height: 1.55; }
.fx-door.fx-door-no { background: rgb(255 59 78 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 59 78 / 0.28); }

/* ---------- Paliers NSFW ---------- */

.fx-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 22px 0; }
.fx-tier { padding: 18px 19px; border-radius: var(--r-interne); background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); display: flex; flex-direction: column; }
.fx-tier-num { font-size: 12px; font-weight: 600; color: var(--rouge-vif); margin-bottom: 8px; }
.fx-tier h3 { font-size: 18px; margin: 0 0 12px; letter-spacing: -0.02em; }
.fx-tier p { margin: 0 0 11px; font-size: 14.5px; line-height: 1.58; }
.fx-tier p:last-child { margin-bottom: 0; }
.fx-tier-ok { padding-bottom: 11px; border-bottom: 1px dashed rgb(255 255 255 / 0.12); }

/* ---------- Deux encarts côte à côte ---------- */

.fx-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 20px 0; }
.fx-mini { padding: 15px 17px; border-radius: var(--r-interne); background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); }
.fx-mini p { margin: 0; font-size: 14.5px; line-height: 1.58; }

/* ---------- Pied de chapitre ---------- */

.fx-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--trait); }

.fx-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  color: var(--encre);
  font-size: 15px;
  font-weight: 600;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 0 0 1px rgb(255 255 255 / 0.1);
  transition: background-color 0.25s, scale 0.45s var(--ressort), opacity 0.2s;
}

.fx-nav-btn:hover:not(:disabled) { background: rgb(255 255 255 / 0.1); }
.fx-nav-btn:active:not(:disabled) { scale: 0.97; }
.fx-nav-btn:disabled { opacity: 0.35; cursor: default; }

.fx-nav-btn.primaire {
  color: #fff;
  text-shadow: 0 1px 0 rgb(60 0 8 / 0.35);
  background: linear-gradient(180deg, #f2384d 0%, #d4172f 52%, #a10e26 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.34), inset 0 -3px 8px rgb(70 0 10 / 0.35), 0 0 0 1px rgb(255 82 98 / 0.55), 0 12px 32px -10px var(--rouge-halo);
}

.fx-nav-btn .rl-icon { transition: translate 0.55s var(--ressort); }
.fx-nav-btn:hover:not(:disabled) .rl-icon:last-child:not(:first-child) { translate: 3px 0; }
.fx-nav-btn:hover:not(:disabled) .rl-icon:first-child:not(:last-child) { translate: -3px 0; }

/* ---------- Fin de parcours ---------- */

.fx-end { margin-top: 14px; padding: 28px; border-radius: var(--r-surface); background: rgb(255 255 255 / 0.03); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); text-align: center; }
.fx-end h2 { margin: 0 0 10px; font-size: 20px; font-weight: 620; letter-spacing: -0.02em; }
.fx-end p { margin: 0 auto; max-width: 480px; color: var(--encre-2); font-size: 15px; line-height: 1.62; }
.fx-end .fx-nav-btn { margin-top: 16px; }

/* ---------- Questionnaire ----------
   Une question à la fois : quarante questions affichées d'un bloc, personne ne les lit. La réponse
   choisie reste visible en revenant en arrière, et rien n'est envoyé avant le clic final — c'est le
   serveur qui corrige (voir src/formation-quiz/answers.ts). */

.qz-etat { font-size: 13px; color: var(--encre-3); margin: 0 0 8px; }

.qz-question { font-size: clamp(19px, 2.4vw, 24px); font-weight: 620; line-height: 1.35; margin: 0 0 24px; letter-spacing: -0.025em; }

.qz-options { display: flex; flex-direction: column; gap: 10px; }

.qz-option {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 15px 17px;
  border-radius: var(--r-interne);
  color: var(--encre);
  font-size: 15px;
  line-height: 1.55;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  transition: background-color 0.2s, box-shadow 0.2s, scale 0.45s var(--ressort);
}

.qz-option:hover { background: rgb(255 255 255 / 0.07); }
.qz-option:active { scale: 0.99; }
.qz-option[aria-pressed="true"] { background: rgb(255 59 78 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 107 92 / 0.6); }

.qz-puce {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.3);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--encre-2);
}

.qz-option[aria-pressed="true"] .qz-puce { color: #fff; background: linear-gradient(180deg, #f2384d, #a10e26); box-shadow: none; }

.qz-grille { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }

.qz-jeton {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  padding: 0;
  color: var(--encre-3);
  font-size: 12.5px;
  font-weight: 600;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  font-variant-numeric: tabular-nums;
}

.qz-jeton.repondu { color: var(--rouge-vif); box-shadow: inset 0 0 0 1px rgb(255 107 92 / 0.5); }
.qz-jeton[aria-current="true"] { color: #fff; background: linear-gradient(180deg, #f2384d, #a10e26); box-shadow: none; }

/* ---------- Résultat ---------- */

.qz-score { text-align: center; padding: 26px 20px 8px; }
.qz-score-val { font-size: clamp(44px, 7vw, 64px); font-weight: 640; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.qz-score-val.reussi { color: var(--vert); }
.qz-score-val.rate { color: var(--rouge-vif); }
.qz-score-sous { color: var(--encre-2); font-size: 15px; margin-top: 12px; line-height: 1.6; }

.qz-revoir { margin-top: 26px; }

.qz-rate {
  padding: 15px 17px;
  border-radius: var(--r-interne);
  margin-bottom: 10px;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 3px 0 0 var(--rouge), inset 0 0 0 1px rgb(255 255 255 / 0.07);
}

.qz-rate-q { font-weight: 600; font-size: 15px; line-height: 1.5; margin-bottom: 9px; }
.qz-rate-ligne { font-size: 14.5px; line-height: 1.55; margin-bottom: 4px; }
.qz-rate-ligne .fx-tag { vertical-align: 1px; }
.qz-rate-lien { font-size: 13px; margin-top: 8px; }
.qz-rate-lien button { padding: 0; color: var(--rouge-vif); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .fx-track-fill,
  .fx-nav-btn,
  .fx-link { transition: none; }
}

/* Un règlement se garde volontiers en PDF : à l'impression, on enlève l'habillage. */
@media print {
  .nav,
  .menu,
  .pied,
  .grain,
  .tete-lumiere,
  .fx-side,
  .fx-nav { display: none !important; }

  body { background: #fff; color: #111; }
  .fx-layout { grid-template-columns: 1fr; }
  .fx-chapter { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fx-body { color: #111; }
}