/* =========================================================
   CSS pour les pages SEO statiques (cluster HSK / quiz)
   Reprend le style "Liquid Glass" de l'app (index.html) :
   fond encre tres diffus + grain fin, cartes en verre depoli,
   meme palette et polices. Reste volontairement leger (pas
   d'images, juste gradients/SVG procedural) : ces pages n'ont
   pas de logique React et doivent charger vite.
   ========================================================= */

:root {
  --paper: #F1EBE1;
  --paper-2: #FBF7F1;
  --paper-3: #E7DFD2;
  --paper-rgb: 241, 235, 225;
  --paper-2-rgb: 251, 247, 241;
  --white-rgb: 255, 255, 255;
  --ink: #2A1D18;
  --ink-2: #5A4438;
  --ink-3: #8A7566;
  --ink-rgb: 42, 29, 24;
  --line: rgba(90, 68, 56, 0.16);
  --cinabre: #A8412F;
  --cinabre-strong: #8C3123;
  --cinabre-soft: rgba(168, 65, 47, 0.09);
  --jade: #4A6B52;
  --r-md: 14px;
  --r-lg: 24px;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Songti SC", "Noto Serif SC", Georgia, serif;
  --han: "Noto Serif SC", "Songti SC", "SimSun", serif;

  --ink-blob-1: rgba(52, 70, 112, 0.14);
  --ink-blob-2: rgba(196, 76, 50, 0.11);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  position: relative;
  background-color: var(--paper);
  background-image:
    radial-gradient(1400px 1000px at -10% -15%, var(--ink-blob-1), transparent 60%),
    radial-gradient(1200px 950px at 110% 115%, var(--ink-blob-2), transparent 58%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: scroll;
  color: var(--ink);
  font-family: var(--ui);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  position: relative;
}

.backLink {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s ease;
}
.backLink:hover { color: var(--cinabre); }

/* Fil d'Ariane (ajouté le 24/08/2026, maillage interne) : présent sur
   toutes les pages du cluster SEO + les 2 pages hub. Volontairement sobre
   (texte discret, pas de fond/carte) pour ne rien changer à l'apparence
   générale des pages. */
.breadcrumb { margin: 0 0 22px; }
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin: 0 6px;
  opacity: 0.55;
}
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--cinabre); text-decoration: underline; }
.breadcrumb li[aria-current="page"] { color: var(--ink-2); font-weight: 500; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinabre);
  margin: 0 0 10px;
}

h1 {
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  background: linear-gradient(100deg, var(--ink) 30%, var(--cinabre) 62%, var(--ink) 94%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1 + .lead::before {
  content: ""; display: block; width: 56px; height: 2px; margin: 4px 0 22px;
  background: linear-gradient(90deg, var(--cinabre), transparent);
  opacity: 0.6;
}

h2 {
  font-family: var(--serif);
  font-size: 25px;
  margin: 44px 0 12px;
  color: var(--ink);
}

p { color: var(--ink-2); font-size: 16px; }

.lead {
  font-size: 18px;
  color: var(--ink-2);
  margin: 0 0 28px;
}

.card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(var(--white-rgb), 0.35), transparent 60%),
    rgba(var(--paper-2-rgb), 0.62);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(var(--white-rgb), 0.5);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin: 18px 0;
  box-shadow: 0 18px 40px -26px rgba(74,47,38,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}

.wordList { list-style: none; padding: 0; margin: 0; }
.wordList li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.wordList li:last-child { border-bottom: none; }
.wordChar {
  font-family: var(--han);
  font-size: 26px;
  color: var(--ink);
  min-width: 46px;
}
.wordPinyin {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--cinabre);
  min-width: 90px;
}
.wordMeaning { font-size: 15px; color: var(--ink-2); }

.qa {
  position: relative;
  margin: 14px 0;
  padding: 14px 18px;
  background: rgba(168, 65, 47, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(168, 65, 47, 0.18);
  border-left: 3px solid var(--cinabre);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.qa .q { font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.qa .a { margin: 0; font-size: 15px; }

.ctaBtn {
  display: inline-block;
  margin: 24px 0 8px;
  padding: 15px 30px;
  background: linear-gradient(160deg, #C24E38 0%, var(--cinabre) 45%, var(--cinabre-strong) 100%);
  color: #fff;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 16px 32px -18px rgba(120,45,32,0.75), inset 0 1px 0 rgba(255,255,255,0.28);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.ctaBtn:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Rangée de CTA (2026-08-26) : le bouton principal (lancer l'exercice)
   reste .ctaBtn tel quel ; .ctaBtnGhost est un second bouton, contour
   seulement, vers la page guide correspondant à la langue de la page --
   présent sur toutes les pages sauf les 2 guides eux-mêmes. */
.ctaRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 24px 0 8px;
}
.ctaRow .ctaBtn { margin: 0; }
.ctaBtnGhost {
  display: inline-block;
  margin: 0;
  padding: 14px 28px;
  background: transparent;
  color: var(--cinabre);
  font-family: var(--ui);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: 999px;
  border: 1.5px solid var(--cinabre);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ctaBtnGhost:hover { background: var(--cinabre); color: #fff; transform: translateY(-1px); }

.related {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.related h2 { margin-top: 0; }
.related ul { padding-left: 20px; margin: 0; }
.related li { margin: 6px 0; }
.related a { color: var(--cinabre); text-decoration: none; }
.related a:hover { text-decoration: underline; }

/* Listes de liens des pages hub (/learn-chinese, /apprendre-le-chinois,
   ajoutées le 24/08/2026) : même logique visuelle que .related (flèche +
   lien + courte description), réutilisable plusieurs fois par page pour
   grouper les liens par catégorie (niveaux HSK, compétences, pratique). */
.hubLinks { list-style: none; padding: 0; margin: 0 0 8px; }
.hubLinks li {
  position: relative;
  margin: 10px 0;
  padding-left: 22px;
}
.hubLinks li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--cinabre);
}
.hubLinks a { color: var(--cinabre); text-decoration: none; font-weight: 600; }
.hubLinks a:hover { text-decoration: underline; }

footer {
  margin-top: 56px;
  font-size: 13px;
  color: var(--ink-3);
}
footer a { color: var(--ink-3); }

/* =========================================================================
   Intégration optionnelle de site-theme.css (ajouté 2026-08-25) — pour les
   pages du cluster SEO qui veulent l'habillage ".panel"/".panelTitle"
   complet d'index.html (grain fibre, sceau 印, liseré cinabre) au lieu du
   simple ".card" ci-dessus. Charger site-theme.css APRÈS ce fichier, et
   envelopper le contenu dans <div class="page"> (voir hsk-3-0.html pour un
   exemple). Non appliqué automatiquement aux pages existantes -- opt-in
   page par page tant que le rendu n'a pas été revu sur l'ensemble du
   cluster.
   - Flou réduit (16px au lieu de 40px) : ces pages n'ont pas le contexte
     "app" d'index.html qui justifie un flou plein, et doivent rester
     légères au chargement (pas de logique React/Babel ici).
   - Décor lourd (cerisier/montagnes, images) désactivé par défaut : texte
     avant tout sur ces pages, pas justifié systématiquement (voir analyse
     SEO du 2026-08-25, §11).
   - Fond figé (background-attachment: fixed) désactivé (2026-08-27,
     signalé par Jules -- FPS très bas en scrollant sur /apprendre-le-
     chinois) : combiné au flou du verre dépoli des .panel, un fond figé
     force le navigateur à repeindre l'intégralité du dégradé de fond à
     chaque frame de scroll au lieu de le traiter comme un calque GPU bon
     marché -- particulièrement coûteux sur les pages longues du cluster
     (menus à onglets, listes de mots). !important nécessaire : site-
     theme.css redéclare `background-attachment: fixed` sur .page deux
     fois, chargé après ce fichier donc gagnant sinon la cascade normale.
     index.html n'est pas touché (règle scopée à seo-pages.css).
   ========================================================================= */
.page {
  --glass-blur: 16px;
  --glass-radius-boost: 8px;
  background-attachment: scroll !important;
}
.page::before,
.page::after {
  display: none;
}

/* Liste complète du vocabulaire d'un niveau HSK (2026-08-26), inspirée de
   la barre de mots d'index.html (.wordSidebar) : conteneur défilant plutôt
   qu'une page qui s'étire sur des milliers de pixels pour les gros niveaux
   (HSK 6 = 1800 mots). Contenu texte intégralement présent dans le DOM dès
   le chargement (pas de rendu JS différé) : recherche navigateur (Ctrl/Cmd+F)
   et indexation par les moteurs fonctionnent normalement. */
.fullWordListNote {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0 0 16px;
}
.fullWordList {
  max-height: 620px;
  overflow-y: auto;
  border-radius: var(--r-md);
  margin: -4px -4px 0;
  padding: 0 4px;
}
.fullWordRow {
  padding: 11px 6px;
  border-bottom: 1px solid var(--line);
  /* Pas de virtualisation JS ici (contrairement a .wordSidebar
     d'index.html) : ces pages doivent rester indexables telles quelles,
     tous les mots doivent donc etre presents dans le DOM des le
     chargement -- voir CONTEXTE_PROJET.md. content-visibility: auto
     recupere quand meme l'essentiel du gain de performance de rendu
     (le navigateur saute la mise en page/peinture des lignes hors ecran)
     SANS les retirer du DOM, donc sans rien perdre pour l'indexation.
     contain-intrinsic-size = estimation de hauteur pour eviter un saut
     de la barre de defilement pendant que le navigateur decouvre les
     vraies tailles au scroll. */
  content-visibility: auto;
  contain-intrinsic-size: auto 58px;
}
.fullWordRow:last-child { border-bottom: none; }
.fullWordHead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.fullWordHan {
  font-family: var(--han);
  font-size: 19px;
  color: var(--ink);
  min-width: 38px;
}
.fullWordPinyin {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--cinabre);
  min-width: 70px;
}
.fullWordMeaning {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink-2);
  flex: 1 1 auto;
}
.fullWordExample {
  font-size: 12px;
  color: var(--ink-3);
  margin: 4px 0 0;
  line-height: 1.5;
}
.fullWordExample .exHan { font-family: var(--han); color: var(--ink-2); }

/* Recherche instantanée + prononciation au clic (2026-08-27, voir
   word-list.js) : amélioration progressive -- sans JS, .fullWordSearch et
   .fullWordEmpty n'ont aucun effet gênant (le champ reste utilisable pour
   rien, la liste reste entièrement affichée), et .fullWordHan n'affiche
   le curseur cliquable que si `.jsReady` a été ajouté par le script (donc
   jamais d'affordance trompeuse si JS est coupé). */
.fullWordSearch {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(var(--paper-rgb), 0.55);
  font-family: var(--ui);
  font-size: 14.5px;
  color: var(--ink);
}
.fullWordSearch::placeholder { color: var(--ink-3); }
.fullWordSearch:focus { outline: none; border-color: var(--cinabre); background: rgba(var(--white-rgb), 0.7); }
.fullWordEmpty {
  display: none;
  font-size: 13.5px;
  color: var(--ink-3);
  padding: 14px 6px;
  text-align: center;
}
.jsReady .fullWordHan { cursor: pointer; transition: color 0.12s ease; }
.jsReady .fullWordHan:hover { color: var(--cinabre); text-decoration: underline; text-decoration-style: dotted; }

/* Écriture / ordre des traits (HanziWriter, 2026-08-28) -- reprend
   fidèlement le composant StrokeOrderDisplay/SingleCharStrokeOrder
   d'index.html (mêmes réglages HanziWriter.create, même distinction
   démo/entraînement), en JS vanilla (voir word-list.js). La case ne se
   construit qu'au premier clic sur le bouton crayon -- pas de HTML
   supplémentaire par mot au chargement, pour ne pas alourdir encore les
   pages HSK4-6 (déjà volumineuses avec la liste complète). */
.fullWordWriterBtn {
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: rgba(var(--paper-2-rgb), 0.7);
  border-radius: 999px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 8px;
  font-size: 12px;
  line-height: 1;
  color: var(--ink-3);
}
.fullWordWriterBtn::before { content: "✎"; }
.fullWordWriterBtn:hover { border-color: var(--cinabre); background: var(--cinabre-soft); color: var(--cinabre); }
.fullWordWriterBtn-active { border-color: var(--cinabre); background: var(--cinabre); color: #fff; }
.fullWordWriterWrap { display: none; padding: 4px 0 2px; }
.strokeOrderGroup {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.strokeOrderBox { text-align: center; width: 168px; }
.strokeOrderTarget {
  width: 150px;
  height: 150px;
  margin: 10px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
.strokeOrderHeader { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.strokeOrderHeader .contextLabel { font-family: var(--ui); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.strokeOrderModeSwitch { display: flex; gap: 6px; }
.strokeOrderModeBtn {
  font-family: var(--ui);
  font-size: 11.5px;
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--paper-2-rgb), 0.6);
  color: var(--ink-2);
}
.strokeOrderModeActive { border-color: var(--cinabre) !important; background: rgba(168, 65, 47, 0.12) !important; color: var(--cinabre) !important; }
.strokeOrderReplayBtn {
  margin-top: 10px;
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--paper-2-rgb), 0.7);
  color: var(--ink-2);
  cursor: pointer;
}
.strokeOrderReplayBtn:hover { border-color: var(--cinabre); color: var(--cinabre); }
.strokeOrderQuizFooter { margin-top: 4px; }
.strokeOrderQuizHint { font-family: var(--ui); font-size: 12px; color: var(--ink-3); margin: 0; }
.strokeOrderQuizDone { font-family: var(--ui); font-size: 12.5px; color: var(--cinabre); font-weight: 700; margin: 0; }
.strokeOrderErrorMsg {
  display: none;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--cinabre);
  margin: 10px 0 0;
  line-height: 1.4;
  text-align: left;
  background: rgba(168, 65, 47, 0.06);
  border: 1px solid rgba(168, 65, 47, 0.3);
  border-radius: var(--r-md);
  padding: 8px 10px;
}

/* Tableau de données simple (ex. mots par niveau HSK), réutilisable sur
   toute page du cluster SEO -- ajouté avec .hskTable pour /hsk-3-0
   (2026-08-25), pas de dépendance à site-theme.css. */
.hskTable { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 14.5px; }
.hskTable th, .hskTable td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.hskTable th { font-weight: 700; color: var(--ink); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.hskTable td { color: var(--ink-2); }
.hskTable tr:last-child td { border-bottom: none; }
.hskTable .hskLevelCell { font-weight: 700; color: var(--cinabre); white-space: nowrap; }

/* =========================================================================
   MENU À ONGLETS INTERACTIF (2026-08-26) -- pages guides /apprendre-le-
   chinois et /learn-chinese : "un vrai menu où les choix arrivent juste
   après", sans JavaScript. Technique input radio + <label> : le clic sur
   un onglet coche son input associé, le CSS affiche le panneau qui suit
   via ~ (sélecteur de frère). Générique et réutilisable (jusqu'à 8
   onglets par instance de .tabNav, numérotés par position -- pas besoin
   d'ID différents par usage).
   - Accessible sans JS : inputs radio nativement navigables au clavier
     (Tab pour entrer dans le groupe, flèches pour changer d'onglet).
   - Tous les panneaux restent intégralement dans le DOM (juste masqués en
     CSS) : rien n'est perdu pour l'indexation, contrairement à un menu
     qui ne peuplerait le contenu qu'au clic via JS.
   ========================================================================= */
.tabNav { position: relative; margin: 22px 0; }
.tabNavRadio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tabNavTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
}
.tabNavTab {
  display: inline-block;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(var(--paper-2-rgb), 0.6);
  font-family: var(--ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-2);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  user-select: none;
}
.tabNavTab:hover { border-color: var(--cinabre); color: var(--ink); transform: translateY(-1px); }
.tabNavPanels { margin-top: 18px; }
.tabNavPanel {
  display: none;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, rgba(var(--white-rgb), 0.35), transparent 60%),
    rgba(var(--paper-2-rgb), 0.62);
  border: 1px solid rgba(var(--white-rgb), 0.5);
  box-shadow: 0 18px 40px -26px rgba(74,47,38,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.tabNavPanel h3 {
  font-family: var(--serif);
  font-size: 21px;
  margin: 0 0 8px;
  color: var(--ink);
}
.tabNavPanel p { margin: 0 0 14px; }
.tabNavPanel .ctaRow { margin: 8px 0 0; }
.tabNavPanel .ctaBtn,
.tabNavPanel .ctaBtnGhost { padding: 11px 22px; font-size: 14px; }

/* Association position N cochée -> onglet N actif + panneau N visible.
   :nth-of-type compte parmi les frères de même balise dans le même
   parent : chaque .tabNav garde son propre comptage, ce bloc marche donc
   pour n'importe quelle instance sans adaptation. */
.tabNavRadio:nth-of-type(1):checked ~ .tabNavPanels .tabNavPanel:nth-of-type(1),
.tabNavRadio:nth-of-type(2):checked ~ .tabNavPanels .tabNavPanel:nth-of-type(2),
.tabNavRadio:nth-of-type(3):checked ~ .tabNavPanels .tabNavPanel:nth-of-type(3),
.tabNavRadio:nth-of-type(4):checked ~ .tabNavPanels .tabNavPanel:nth-of-type(4),
.tabNavRadio:nth-of-type(5):checked ~ .tabNavPanels .tabNavPanel:nth-of-type(5),
.tabNavRadio:nth-of-type(6):checked ~ .tabNavPanels .tabNavPanel:nth-of-type(6),
.tabNavRadio:nth-of-type(7):checked ~ .tabNavPanels .tabNavPanel:nth-of-type(7),
.tabNavRadio:nth-of-type(8):checked ~ .tabNavPanels .tabNavPanel:nth-of-type(8) {
  display: block;
}

/* =========================================================================
   MODE PERFORMANCE (2026-08-27) -- désactive les effets coûteux (verre
   dépoli / backdrop-filter, ombres larges) pour les visiteurs dont le
   navigateur n'a pas d'accélération GPU active (rendu logiciel : cas
   diagnostiqué avec Jules sur Edge sans accélération matérielle -- même
   moteur Chromium que Chrome/Opera GX, mais lourdement ralenti dès qu'un
   flou CSS doit être recalculé au scroll). Activé automatiquement par
   perf-mode.js après quelques secondes de scroll réel si le framerate
   mesuré est mauvais, ou manuellement via le lien "Mode performance" en
   pied de page -- le choix manuel est toujours prioritaire sur la
   détection auto. `!important` nécessaire : la version normale du flou
   vient de site-theme.css (.panel) et de plus haut dans ce fichier (.card,
   .qa), toutes deux chargées/déclarées de façon à gagner la cascade sinon.
   Dégrade proprement sans JS : le mode normal (avec flou) reste actif par
   défaut, aucun contenu n'est masqué, seul un effet visuel change. */
[data-fx="lite"] .panel,
[data-fx="lite"] .wordSidebar,
[data-fx="lite"] .card,
[data-fx="lite"] .qa {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--paper-2) !important;
  box-shadow: none !important;
}

.fxModeToggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: underline;
  cursor: pointer;
}
.fxModeToggle:hover { color: var(--cinabre); }
.tabNavRadio:nth-of-type(1):checked ~ .tabNavTabs .tabNavTab:nth-of-type(1),
.tabNavRadio:nth-of-type(2):checked ~ .tabNavTabs .tabNavTab:nth-of-type(2),
.tabNavRadio:nth-of-type(3):checked ~ .tabNavTabs .tabNavTab:nth-of-type(3),
.tabNavRadio:nth-of-type(4):checked ~ .tabNavTabs .tabNavTab:nth-of-type(4),
.tabNavRadio:nth-of-type(5):checked ~ .tabNavTabs .tabNavTab:nth-of-type(5),
.tabNavRadio:nth-of-type(6):checked ~ .tabNavTabs .tabNavTab:nth-of-type(6),
.tabNavRadio:nth-of-type(7):checked ~ .tabNavTabs .tabNavTab:nth-of-type(7),
.tabNavRadio:nth-of-type(8):checked ~ .tabNavTabs .tabNavTab:nth-of-type(8) {
  background: linear-gradient(160deg, #C24E38 0%, var(--cinabre) 45%, var(--cinabre-strong) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 20px -14px rgba(120,45,32,0.7);
}
/* Anneau de focus visible au clavier (accessibilité) sur l'onglet actif */
.tabNavRadio:focus-visible ~ .tabNavTabs .tabNavTab {
  outline: none;
}
.tabNavRadio:nth-of-type(1):focus-visible ~ .tabNavTabs .tabNavTab:nth-of-type(1),
.tabNavRadio:nth-of-type(2):focus-visible ~ .tabNavTabs .tabNavTab:nth-of-type(2),
.tabNavRadio:nth-of-type(3):focus-visible ~ .tabNavTabs .tabNavTab:nth-of-type(3),
.tabNavRadio:nth-of-type(4):focus-visible ~ .tabNavTabs .tabNavTab:nth-of-type(4),
.tabNavRadio:nth-of-type(5):focus-visible ~ .tabNavTabs .tabNavTab:nth-of-type(5),
.tabNavRadio:nth-of-type(6):focus-visible ~ .tabNavTabs .tabNavTab:nth-of-type(6),
.tabNavRadio:nth-of-type(7):focus-visible ~ .tabNavTabs .tabNavTab:nth-of-type(7),
.tabNavRadio:nth-of-type(8):focus-visible ~ .tabNavTabs .tabNavTab:nth-of-type(8) {
  outline: 2px solid var(--cinabre);
  outline-offset: 2px;
}