/* ===========================================================================
   reperes.css — Repères chronologiques de culture générale (frise + révision)

   CHARTE DU SITE (23/10/2026). Les deux pages reprennent le vocabulaire du
   quiz de verbes irréguliers (ivq/css.css) et de la page Ressources
   linguistiques (css/dicos.css) :
     - tuiles en dégradé, texte blanc en Plus Jakarta Sans, nombre ou code en
       filigrane rogné par le bord (niveaux, périodes) ;
     - mini-tuiles encre à liseré multicolore (modes de révision) ;
     - titres de partie précédés d'une pastille encre (période) ;
     - cartes blanches à grand rayon (liste des repères, réglages) ;
     - boutons canoniques .btn-u (buttons.css).
   Les couleurs viennent de tokens.css, chargé par le gabarit : AUCUNE n'est
   recopiée ici, hormis les quatre qui n'y existent pas (contour de contrôle,
   juste / faux / moyen) et les couleurs de niveau, empruntées au quiz de
   verbes (vert, orange, rouge).

   Pas de thème sombre : le site n'en a pas. La bascule a été retirée.

   Rien sur :root, html ni body : le gabarit du site en est maître. Tout vit
   sous .gk, l'élément <main> des deux pages. La spécificité .gk .x (0,2,0)
   l'emporte sur les classes génériques du site.
   =========================================================================== */

/* ---- Les quatre couleurs absentes de tokens.css ----
   dev/contrast.js relit ce bloc ET tokens.css. */
.gk {
  --edge: #7b8597;     /* contour d'un contrôle : 3:1 sur blanc et sur le fond (WCAG 1.4.11) */
  --ok:   #15803d;     /* réponse juste — vert franc, loin du bleu de marque */
  --ko:   #c62828;     /* réponse fausse */
  --warn: #b45309;     /* score moyen */
}

/* ---- Constantes de mise en page ---- */
.gk {
  --jakarta: 'Plus Jakarta Sans', 'Inter', 'Inter-fallback', system-ui, sans-serif;
  --maxw: 1100px;
  --measure: 68ch;
  --pad-x: clamp(16px, 4vw, 32px);
  --aside-w: 260px;

  display: block;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem) 0 var(--space-8);
  color: var(--text-body);
  font-family: 'Inter', 'Inter-fallback', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
.gk *, .gk *::before, .gk *::after { box-sizing: border-box; }

/* L'attribut [hidden] vaut display:none dans la feuille du navigateur, de
   spécificité nulle : toute classe qui pose un display le battrait.
   Cette règle vaut pour tous. */
[hidden] { display: none !important; }

/* Héros plus bas, comme sur le quiz de verbes (ivq/css.css §1) : l'outil
   commençait trop bas. Cette feuille n'est chargée que par nos deux pages. */
.hero { padding-block: clamp(1.5rem, 3.5vw, 2.5rem); }
.hero h1.page-title { margin-bottom: .5rem; }

.gk .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.gk h1, .gk h2, .gk h3, .gk p { margin: 0; }
.gk button { font-family: inherit; }

.gk .fsection-title {
  margin: 0;
  padding: 0;
  font-size: .72rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.gk .opt { text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); }

/* ---- Couleurs des six périodes ----
   La palette des langues du site (tokens.css), dans l'ordre du ruban, plus
   une terre pour la Préhistoire. Le ruban, les titres de période, les cartes
   de synthèse et les tuiles de la révision la partagent ([data-pid]). */
.gk [data-pid="prehistoire"]   { --tuile-1: #c9a17a;            --tuile-2: #9a6b43; }
.gk [data-pid="antiquite"]     { --tuile-1: var(--lang-es-1);   --tuile-2: var(--lang-es-2); }
.gk [data-pid="moyenage"]      { --tuile-1: var(--lang-it-1);   --tuile-2: var(--lang-it-2); }
.gk [data-pid="renaissance"]   { --tuile-1: var(--lang-de-1);   --tuile-2: var(--lang-de-2); }
.gk [data-pid="moderne"]       { --tuile-1: var(--lang-fr-1);   --tuile-2: var(--lang-fr-2); }
.gk [data-pid="contemporaine"] { --tuile-1: var(--lang-en-1);   --tuile-2: var(--lang-en-2); }
.gk [data-pid] { --tint: var(--tuile-2); }

/* ===========================================================================
   Introduction : le chapeau de la page Ressources, et l'action « Réviser »
   =========================================================================== */
.gk .intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-5);
}
.gk .lede {
  max-width: 60ch;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--text-strong);
}
.gk .rev-cta { flex: none; }
.gk .cta-arrow,
.gk .bl-arrow { transition: transform var(--duration-fast) var(--ease); }
.gk .rev-cta:hover .cta-arrow { transform: translateX(3px); }
.gk .back-link:hover .bl-arrow { transform: translateX(-3px); }

/* ===========================================================================
   Ruban des périodes : six tuiles en dégradé, leurs sous-périodes dessous
   ---------------------------------------------------------------------------
   Chaque période est une tuile à part, comme les tuiles des dictionnaires :
   dégradé, nom blanc en Plus Jakarta, numéro romain en filigrane. Sa largeur
   vaut son nombre de sous-périodes (--u, posé en JS) : chaque case du bas a
   la même largeur, assez pour y écrire son nom.
   =========================================================================== */
.gk .ribbon-wrap { margin-bottom: var(--space-5); }
/* Le ruban déborde de la colonne de 1 100 px, jusqu'à 1 240 px : 17 cases
   nommées y gagnent 8 px chacune, assez pour « Absolutisme & sciences ». */
.gk .ribbon-scroll,
.gk .ribbon-foot {
  margin-left: calc(50% - min(620px, 50vw - var(--pad-x)));
  margin-right: calc(50% - min(620px, 50vw - var(--pad-x)));
}
.gk .ribbon-scroll { position: relative; }
.gk .ribbon-inner {
  display: flex;
  gap: 6px;
  width: 100%;
  padding-bottom: 14px;            /* l'ombre des tuiles choisies */
  user-select: none;
}
.gk .per-col {
  flex: var(--u, 1) 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 16px -8px var(--tuile-2);
  transition: opacity var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.gk .band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-height: 74px;
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border: 0;
  border-radius: 0;
  text-align: left;
  color: var(--on-dark);
  background: linear-gradient(135deg, var(--tuile-1), var(--tuile-2));
  cursor: pointer;
}
/* Reflet doux en haut à gauche, comme les tuiles des dictionnaires. */
.gk .band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 120% at 0% 0%, var(--on-dark-35), transparent 45%);
  opacity: .5;
  pointer-events: none;
}
.gk .band-fil {
  position: absolute;
  z-index: -1;
  right: .08em;
  bottom: -.22em;
  font-family: var(--jakarta);
  font-size: 3.4rem;
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--on-dark-22);
  pointer-events: none;
  transition: transform var(--duration-slow) var(--ease), color var(--duration-slow) var(--ease);
}
.gk .band-name {
  font-family: var(--jakarta);
  font-size: 1rem;
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px var(--ink-a28);
}
.gk .band-sub {
  font-size: .74rem;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--on-dark-92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px var(--ink-a28);
}

.gk .phases {
  flex: 1 1 auto;                 /* toutes les rangées finissent à la même hauteur */
  display: flex;
  background: color-mix(in srgb, var(--tuile-2) 70%, var(--ink-900));
}
.gk .subper {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 7px 7px 8px;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  color: var(--on-dark);
  background: transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease);
}
.gk .subper + .subper { box-shadow: inset 1px 0 0 var(--on-dark-10); }
.gk .subper-name {
  font-size: .72rem;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  /* Pas de points de suspension : un nom tronqué ne se lit plus. Les mots
     longs se coupent à la française (« Paléo-lithique ») — lang="fr" est
     posé par le gabarit sur <html>. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.gk .subper-range {
  display: none;
  margin-top: 2px;
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark-72);
  white-space: nowrap;
}
@media (min-width: 1500px) { .gk .subper-range { display: block; } }

.gk .band:hover .band-fil { color: var(--on-dark-35); }
@media (prefers-reduced-motion: no-preference) {
  .gk .band:hover .band-fil { transform: translate(-.12em, -.1em) rotate(-6deg); }
}
.gk .subper:hover { background: var(--on-dark-10); }
.gk .band:focus-visible,
.gk .subper:focus-visible {
  outline: 3px solid var(--on-dark);
  outline-offset: -3px;
}

/* Sélection — même principe que le niveau choisi du quiz de verbes : la
   colonne choisie se soulève (ombre de sa couleur), les autres s'atténuent.
   La sous-période choisie porte une barre blanche en bas : l'atténuation
   seule ne suffirait pas à un daltonien. */
.gk .per-col:has(.band.sel),
.gk .per-col:has(.band.partial) {
  box-shadow: 0 14px 26px -12px var(--tuile-2);
}
.gk .band.dim,
.gk .subper.dim { opacity: .4; }
.gk .band.sel::before,
.gk .subper.sel::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--on-dark);
}
.gk .subper.sel { background: var(--on-dark-10); }
.gk .band.partial::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--on-dark-55);
}

.gk .ribbon-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  min-height: 36px;
}
.gk .range-readout { font-size: var(--text-sm); color: var(--text-muted); }
.gk .range-readout b { color: var(--text-strong); font-weight: var(--weight-bold); }
.gk .ribbon-hint { display: none; font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- Synthèse des périodes choisies ---------- */
.gk .period-synth {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-3);
}
.gk .synth-card {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.gk .synth-badge {
  font-family: var(--jakarta);
  font-size: 1rem;
  font-weight: var(--weight-black);
  color: var(--text-strong);
}
.gk .synth-range {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--tuile-2) 72%, var(--ink-900));
}
.gk .synth-text { margin-top: 6px; max-width: var(--measure); font-size: .94rem; line-height: var(--leading-snug); color: var(--text-body); }
.gk .synth-subs {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: var(--space-3);
}
.gk .synth-sub-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: .88rem; font-weight: var(--weight-bold); color: var(--text-strong); }
.gk .synth-sub-range { font-size: .76rem; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.gk .synth-sub-text { margin-top: 2px; max-width: var(--measure); font-size: .88rem; color: var(--text-soft); }

/* ===========================================================================
   Niveau : les tuiles colorées du quiz de verbes (ivq/css.css §2)
   Essentiel, Approfondi, Expert reprennent le vert, l'orange et le rouge de
   Facile, Moyen, Difficile. Le nombre de repères en filigrane (data-nb, posé
   en JS). Le niveau choisi : aplat plus profond et ombre de sa couleur ; les
   autres, atténués, reprennent leur éclat au survol.
   =========================================================================== */
.gk .levels { display: flex; flex-direction: column; gap: .55rem; margin-bottom: var(--space-5); }
.gk .seg-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.gk .level[data-level="1"] { --lvl: #3fb26a; --lvl-2: #23874a; }
.gk .level[data-level="2"] { --lvl: #ffa53d; --lvl-2: #e5730c; }
.gk .level[data-level="3"] { --lvl: #f2686c; --lvl-2: #cf353b; }
.gk .level {
  appearance: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  margin: 0;
  padding: .85rem 1rem 1.5rem;
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--lvl), var(--lvl-2));
  font: inherit;
  line-height: 1.2;
  text-align: left;
  color: var(--on-dark);
  cursor: pointer;
  opacity: .72;
  transition: opacity var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.gk .level-nom {
  font-family: var(--jakarta);
  font-size: 1.05rem;
  font-weight: var(--weight-black);
  text-shadow: 0 1px 2px var(--ink-a28);
}
.gk .level-n {
  font-size: .78rem;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--on-dark-92);
  text-shadow: 0 1px 2px var(--ink-a28);
}
.gk .level::after {
  content: attr(data-nb);
  position: absolute;
  z-index: -1;
  right: .1em;
  bottom: -.28em;
  font-family: var(--jakarta);
  font-size: 3.2rem;
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--on-dark-22);
  pointer-events: none;
}
.gk .level:hover { opacity: 1; }
.gk .level.active {
  opacity: 1;
  background: var(--lvl-2);
  box-shadow: 0 14px 26px -12px var(--lvl-2);
}
.gk .level.active::after { color: var(--on-dark-35); }
@media (prefers-reduced-motion: no-preference) {
  .gk .level:hover:not(.active) { transform: translateY(-2px); }
}
.gk .level:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }

/* ===========================================================================
   Corps : filtres à gauche, repères à droite ; sous 960 px, un tiroir
   =========================================================================== */
.gk .layout {
  display: grid;
  grid-template-columns: var(--aside-w) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.gk .filters {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.gk .filters-head { display: none; }
.gk .fsection {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* ---------- Catégories : liste, pictogramme à sa couleur ---------- */
.gk .theme-cards { display: flex; flex-direction: column; gap: 2px; }
.gk .theme-card {
  --tint: var(--card-accent, var(--text-muted));
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-strong);
  text-align: left;
  font-size: .94rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.gk .theme-card:hover { background: var(--brand-a06); }
.gk .theme-ic {
  width: 20px; height: 20px;
  fill: none;
  stroke: var(--tint);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--tint);
}
.gk .theme-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gk .theme-count { min-width: 2.5ch; font-size: .8rem; font-variant-numeric: tabular-nums; text-align: right; color: var(--text-muted); }
.gk .theme-card.on {
  background: color-mix(in srgb, var(--tint) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--tint) 65%, var(--surface));
  font-weight: var(--weight-bold);
}
.gk .theme-card.on .theme-count { color: var(--text-strong); font-weight: var(--weight-bold); }
.gk .theme-card.zero:not(.on) { opacity: .5; }

.gk .subcats {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
}
.gk .subcat-group { --tint: var(--text-muted); display: flex; flex-direction: column; gap: 6px; }
.gk .subcat-theme {
  font-size: .7rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tint) 70%, var(--ink-900));
}
.gk .subcat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Puces des sous-catégories ET des aires culturelles. Les aires n'ont pas de
   parent .subcat-group : sans repli sur --accent, `border-color` et le
   `color-mix` d'une puce cochée seraient invalides et la sélection invisible.
   --accent vaut ici le bleu de marque. */
.gk { --accent: var(--brand-500); }
.gk .subchip {
  min-height: 32px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-body);
  font-size: .8rem;
  line-height: 1.2;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.gk .subchip:hover { color: var(--text-strong); border-color: var(--tint, var(--accent)); }
.gk .subchip.on {
  color: var(--text-strong);
  border-color: var(--tint, var(--accent));
  background: color-mix(in srgb, var(--tint, var(--accent)) 14%, var(--surface));
  font-weight: var(--weight-bold);
}
.gk .subchip.on::before { content: "✓ "; }

.gk .filters-foot { display: flex; flex-direction: column; gap: var(--space-2); }
.gk .btn-u.filters-done { display: none; }

/* ===========================================================================
   Liste des repères : une carte blanche, comme le tableau du quiz de verbes
   =========================================================================== */
.gk .results {
  min-width: 0;
  padding: 0 clamp(1rem, 2.5vw, 1.75rem) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px -24px var(--ink-a28);
}

/* Barre de liste : recherche, compteur, actions. Elle colle en haut de
   l'écran : on cherche et on compte sans remonter. */
.gk .list-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 calc(-1 * clamp(1rem, 2.5vw, 1.75rem));
  padding: var(--space-4) clamp(1rem, 2.5vw, 1.75rem) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.gk .searchbox { position: relative; flex: 1 1 240px; display: flex; align-items: center; min-width: 0; }
.gk .searchbox .search-ic {
  position: absolute;
  left: 13px;
  width: 17px; height: 17px;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.gk .searchbox input[type="search"] {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 40px;
  font: inherit;
  font-size: .95rem;
  color: var(--text-strong);
  background: var(--surface-subtle);
  border: 1px solid var(--edge);
  border-radius: var(--radius-pill);
  outline: none;
  box-shadow: none;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.gk .searchbox input[type="search"]::placeholder { color: var(--text-muted); opacity: 1; }
.gk .searchbox input[type="search"]::-webkit-search-decoration,
.gk .searchbox input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.gk .searchbox input[type="search"]:focus-visible {
  background: var(--surface);
  border-color: var(--brand-500);
  box-shadow: var(--shadow-focus);
}
.gk .kbd {
  position: absolute;
  right: 14px;
  padding: 0 6px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: .72rem;
  color: var(--text-muted);
  pointer-events: none;
}
.gk .searchbox input:focus ~ .kbd,
.gk .searchbox input:not(:placeholder-shown) ~ .kbd { display: none; }
.gk .search-clear {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.gk .search-clear:hover { color: var(--text-strong); background: var(--brand-a08); }

.gk .bar-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.gk .count { font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.gk .count b { color: var(--text-strong); font-weight: var(--weight-bold); }
.gk .btn-u.open-filters { display: none; }
.gk .badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
  color: var(--on-dark);
  font-size: .72rem;
  font-weight: var(--weight-bold);
}

/* Filtres actifs, en clair et retirables un à un. */
.gk .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.gk .af-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin: 0;
  padding: 2px 6px 2px 12px;
  border: 1px solid var(--brand-a35);
  border-radius: var(--radius-pill);
  background: var(--brand-a06);
  color: var(--brand-text);
  font-size: .8rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.gk .af-chip::after {
  content: "×";
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: .95rem;
  line-height: 1;
}
.gk .af-chip:hover { border-color: var(--brand-500); }
.gk .af-chip:hover::after { background: var(--brand-a12); }

/* ---------- Groupes par période ----------
   Le titre reprend celui des parties de la page Ressources : Plus Jakarta
   noir, précédé d'une pastille encre — ici, le numéro de la période et un
   liseré à sa couleur. */
.gk .timeline { padding-top: var(--space-2); }
.gk .era { margin-top: var(--space-6); scroll-margin-top: 6rem; }
.gk .era:first-child { margin-top: var(--space-4); }
.gk .era-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-family: var(--jakarta);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
.gk .partie-glyphe {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, var(--tuile-1), var(--tuile-2)) top / 100% 3px no-repeat,
    linear-gradient(150deg, var(--ink-800), var(--ink-900));
  color: var(--on-dark);
  font-size: .95rem;
  font-weight: var(--weight-black);
  letter-spacing: -.02em;
}
.gk .era-range,
.gk .era-count {
  font-family: 'Inter', 'Inter-fallback', system-ui, sans-serif;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.gk .era-count { margin-left: auto; }

/* ---------- Un repère ----------
   Trois colonnes : la date (alignée à droite), l'axe et son nœud, le texte.
   --date-w est commun à toute la liste : les dates s'alignent. */
.gk .era-list {
  --date-w: 8.5rem;
  --axis-w: 28px;
  position: relative;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.gk .era-list::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(var(--date-w) + var(--axis-w) / 2);
  width: 2px;
  transform: translateX(-50%);
  background: var(--border-card);
}
.gk .event {
  position: relative;
  margin: 0;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.gk .event:hover { background: var(--brand-a04); }
.gk .event-head {
  display: grid;
  grid-template-columns: var(--date-w) var(--axis-w) minmax(0, 1fr) auto;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 10px 8px 10px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gk .event-head:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 0; }
/* Le contour de focus entoure TOUTE la carte, dépliée comprise (24/10/2026).
   Posé sur le seul bouton d'en-tête, il encadrait le titre et laissait la
   partie dépliée (classement, image, lien) dehors, comme une pièce rapportée.
   :has() est réservé aux navigateurs qui le connaissent : les autres gardent
   le contour sur l'en-tête, jamais aucun contour. */
@supports selector(:has(*)) {
  .gk .event:has(> .event-head:focus-visible) { outline: 2px solid var(--brand-500); outline-offset: 0; }
  /* !important : la couche de finition du site (polish.css, focus clavier
     global) pose un anneau en box-shadow sur tout bouton focalisé ; sans lui,
     un second cadre plus pâle restait autour de l'en-tête (24/10/2026). */
  .gk .event-head:focus-visible { outline: none !important; box-shadow: none !important; }
}
.gk .event.focused { background: var(--brand-a04); }

.gk .date {
  display: block;
  padding: 2px var(--space-2) 0 0;
  font-size: .84rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-align: right;
  color: var(--text-muted);
}
/* Le nœud est posé SUR l'axe. Largeur paire : centré au demi-pixel près. */
.gk .node {
  justify-self: center;
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ev-accent, var(--text-muted));
  transition: background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.gk .event:hover .node,
.gk .event.open .node { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ev-accent) 22%, transparent); }
.gk .event.open .node,
.gk .event.lvl-1 .node { background: var(--ev-accent, var(--text-muted)); }

.gk .ev-main { min-width: 0; }
.gk .title {
  display: inline;
  font-size: 1rem;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--text-strong);
  transition: color var(--duration-fast) var(--ease);
}
.gk .event:hover .title,
.gk .event.open .title,
.gk .event-head:focus-visible .title { color: var(--brand-700); }
.gk .tag {
  display: inline-block;
  margin-left: var(--space-2);
  vertical-align: 1px;
  font-size: .68rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--ev-accent) 62%, var(--ink-900));
}
.gk .timeline.one-cat .tag { display: none; }
.gk .desc {
  display: block;
  margin-top: 2px;
  max-width: var(--measure);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--text-soft);
}
.gk .chev {
  width: 28px; height: 28px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  color: var(--brand-700);
  border-radius: 50%;
  transition: transform var(--duration) var(--ease), background var(--duration-fast) var(--ease);
}
.gk .chev svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gk .event:hover .chev { background: var(--brand-a08); }
.gk .event.open .chev { transform: rotate(180deg); }

/* Repliée, la région sort de l'ordre de tabulation : `visibility: hidden`
   l'en retire et, contrairement à `display: none`, se laisse animer. */
.gk .body {
  margin-left: calc(var(--date-w) + var(--axis-w));
  padding-right: var(--space-3);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height .35s ease, opacity .25s ease, padding .25s ease, visibility 0s linear .35s;
}
.gk .event.open .body {
  max-height: 640px;
  opacity: 1;
  visibility: visible;
  padding-bottom: var(--space-3);
  transition-delay: 0s;
}
.gk .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--text-muted); }
.gk .meta b { color: var(--text-strong); font-weight: var(--weight-bold); }
.gk .illus { margin: var(--space-3) 0 0; max-width: 280px; }
.gk .credit {
  margin-top: 4px;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.gk .credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gk .credit a:hover { color: var(--text-strong); }
.gk .thumb {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.gk .ev-share { margin-top: var(--space-2); margin-left: calc(-1 * var(--space-3)); font-size: .82rem; }
.gk .event mark {
  padding: 0 1px;
  color: var(--text-strong);
  background: color-mix(in srgb, var(--ev-accent) 30%, transparent);
  border-radius: 2px;
}
.gk .event.targeted { background: var(--brand-a08); border-color: var(--brand-a35); }

.gk .empty {
  margin: var(--space-6) 0 var(--space-2);
  padding: var(--space-5);
  border: 1px dashed var(--border-card);
  border-radius: var(--radius-md);
  text-align: center;
}
.gk .empty-msg { margin: 0 auto var(--space-4); color: var(--text-muted); max-width: 60ch; }

.gk .to-top {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 30;
  width: 46px; height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--grad-brand);
  color: var(--on-dark);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.gk .to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ===========================================================================
   Boutons
   Les actions principales et secondaires sont les .btn-u du site
   (buttons.css). Reste ici l'action tertiaire, discrète : .link-btn.
   =========================================================================== */
.gk .btn-u.grow { flex: 1; width: auto; }
.gk .link-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  margin: 0;
  padding: 0 var(--space-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  font-size: .86rem;
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.gk .link-btn:hover { color: var(--brand-text); background: var(--brand-a06); border-color: var(--brand-a35); }
/* Bascule : le chevron pivote avec aria-pressed, pas sur le seul texte. */
.gk .link-btn.toggle::before {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--duration-fast) var(--ease);
}
.gk .link-btn.toggle[aria-pressed="true"]::before { transform: rotate(90deg); }
.gk .link-btn.reset { color: var(--brand-text); border-color: var(--brand-a35); }
.gk .link-btn.danger { color: var(--ko); border-color: color-mix(in srgb, var(--ko) 35%, transparent); }
.gk .link-btn.danger:hover { color: var(--on-dark); background: var(--ko); border-color: var(--ko); }

/* Focus visible partout, jamais supprimé (polish.css le pose aussi). */
.gk .link-btn:focus-visible,
.gk a:focus-visible,
.gk input:focus-visible,
.gk button:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* ---------- Lien d'évitement ----------
   Un <button>, pas un <a href="#…"> : le hash porte l'état des filtres. */
.gk .skip-link {
  position: absolute;
  left: var(--space-4);
  z-index: 100;
  margin-top: calc(-1 * var(--space-5));
  padding: var(--space-3) var(--space-4);
  background: var(--ink-900);
  color: var(--on-dark);
  font-size: .9rem;
  font-weight: var(--weight-bold);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transform: translateY(-200%);
  opacity: 0;
}
.gk .skip-link:focus { transform: translateY(0); opacity: 1; outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ---------- Sans JavaScript ----------
   La règle qui masque les contrôles vit dans un <style> placé DANS le
   <noscript> : `:has(noscript)` correspondrait aussi quand le script tourne. */
.gk .noscript {
  max-width: var(--measure);
  margin: var(--space-6) auto;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.gk .noscript p { margin: 0 0 var(--space-3); color: var(--text-muted); }
.gk .noscript p:last-child { margin-bottom: 0; }
.gk .noscript strong { color: var(--text-strong); }

/* ===========================================================================
   Écrans moyens et petits
   =========================================================================== */
.gk .drawer-veil { display: none; }

@media (max-width: 959px) {
  .gk .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gk .btn-u.open-filters { display: inline-flex; }

  .gk .filters {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2300;            /* au-dessus de la navbar du site (2200) */
    width: min(380px, 92vw);
    max-height: none;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: var(--shadow-xl);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s linear .28s;
  }
  .gk.drawer-open .filters { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  .gk .filters-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border-subtle);
  }
  .gk .filters-head h2 { font-family: var(--jakarta); font-size: 1.1rem; font-weight: var(--weight-black); color: var(--text-strong); }
  .gk .filters-body { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4); }
  .gk .filters-foot {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border-subtle);
  }
  .gk .btn-u.filters-done { display: inline-flex; }

  .gk .drawer-veil {
    position: fixed;
    inset: 0;
    z-index: 2250;
    display: block;
    background: rgba(10, 0, 37, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .gk.drawer-open .drawer-veil { opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media (min-width: 960px) {
  .gk .filters-body { display: contents; }
}

/* Le ruban défile à l'horizontale sous 1 180 px : en dessous, 17 cases
   nommées font moins de 65 px. La légende « Faites glisser » le signale. */
@media (max-width: 1179px) {
  .gk .ribbon-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .gk .ribbon-inner { min-width: 1120px; }
  .gk .per-col { scroll-snap-align: start; }
  .gk .ribbon-hint { display: block; }
}

@media (max-width: 640px) {
  .gk .intro { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .gk .rev-cta { width: 100%; }
  .gk .lede { font-size: 1rem; }
  .gk .period-synth { grid-template-columns: 1fr; max-height: 46vh; overflow-y: auto; }
  .gk .level { padding: .7rem .75rem 1.3rem; }
  .gk .level-nom { font-size: .92rem; }
  .gk .level::after { font-size: 2.4rem; }

  .gk .results { padding: 0 var(--space-3) var(--space-4); border-radius: var(--radius-md); }
  .gk .list-bar { margin: 0 calc(-1 * var(--space-3)); padding: var(--space-3); border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .gk .searchbox { flex-basis: 100%; }
  .gk .bar-actions { width: 100%; margin-left: 0; }
  .gk .bar-actions .count { margin-right: auto; }
  .gk .kbd { display: none; }

  /* La date passe au-dessus du titre ; l'axe reste à gauche. */
  .gk .era-list { --date-w: 0px; --axis-w: 26px; }
  .gk .event-head {
    grid-template-columns: var(--axis-w) minmax(0, 1fr) auto;
    grid-template-areas: "node date chev" "node main chev";
    padding-right: 2px;
  }
  .gk .event-head .date { grid-area: date; text-align: left; padding: 0; font-size: .8rem; }
  .gk .event-head .node { grid-area: node; }
  .gk .event-head .ev-main { grid-area: main; }
  .gk .event-head .chev { grid-area: chev; }
  .gk .era-count { margin-left: 0; width: 100%; }
}

/* ===========================================================================
   Page Réviser (fiches et quiz)
   ---------------------------------------------------------------------------
   Réglages en tuiles de la charte (niveaux du quiz de verbes, périodes aux
   couleurs du ruban, catégories en dégradé), et le panneau « Lancer » en
   carte blanche : ses deux modes sont des mini-tuiles encre, comme les
   exercices du quiz de verbes. Il reste à l'écran : colonne collante sur
   grand écran, barre collée en bas sous 900 px.
   =========================================================================== */
.gk .hidden { display: none !important; }

.gk .topbar,
.gk .rev-setup,
.gk .stage {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.gk .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }

.gk .rev-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--space-6);
  align-items: start;
}
.gk .rev-settings { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.gk .rev-intro { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-strong); max-width: 60ch; }
.gk .from-frise {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-a35);
  background: var(--brand-a06);
  font-size: .88rem;
  color: var(--text-strong);
}
.gk .rset { display: flex; flex-direction: column; gap: .55rem; }

/* Tuiles des périodes et des catégories : dégradé, texte blanc, compteur ;
   période : son numéro en filigrane. « Aucune = toutes » : tant que rien
   n'est coché, toutes sont en pleine couleur ; dès qu'un choix est fait, les
   autres s'atténuent (.has-sel). */
.gk .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .65rem;
}
.gk .tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 62px;
  margin: 0;
  padding: .75rem .9rem;
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--tuile-1), var(--tuile-2));
  box-shadow: 0 6px 16px -8px var(--tuile-2);
  color: var(--on-dark);
  text-align: left;
  cursor: pointer;
  transition: opacity var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
/* Catégorie : son dégradé dérive de sa couleur de data.js. */
.gk .tile.cat {
  --tuile-1: color-mix(in srgb, var(--tint) 72%, #ffffff);
  --tuile-2: color-mix(in srgb, var(--tint) 88%, #000000);
}
.gk .tile.per { grid-template-columns: minmax(0, 1fr) auto; }
.gk .tile-fil {
  position: absolute;
  z-index: -1;
  right: .1em;
  bottom: -.25em;
  font-family: var(--jakarta);
  font-size: 3rem;
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--on-dark-22);
  pointer-events: none;
}
.gk .tile-ic {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--on-dark);
  filter: drop-shadow(0 1px 1px var(--ink-a28));
}
.gk .tile-txt { display: flex; flex-direction: column; min-width: 0; }
.gk .tile-name {
  font-family: var(--jakarta);
  font-size: 1rem;
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  text-shadow: 0 1px 2px var(--ink-a28);
}
.gk .tile-sub { font-size: .74rem; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; color: var(--on-dark-92); text-shadow: 0 1px 2px var(--ink-a28); }
.gk .tile-n {
  align-self: start;
  font-size: .8rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--on-dark);
  text-shadow: 0 1px 2px var(--ink-a28);
}
.gk .tiles.has-sel .tile:not(.on) { opacity: .45; }
.gk .tiles.has-sel .tile:not(.on):hover { opacity: .8; }
.gk .tile.on {
  background: var(--tuile-2);
  box-shadow: 0 14px 26px -12px var(--tuile-2);
}
.gk .tile.on::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--on-dark);
  color: var(--tuile-2);
  font-size: .72rem;
  font-weight: var(--weight-black);
}
.gk .tile.on .tile-n { visibility: hidden; }
.gk .tile.zero:not(.on) { opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .gk .tile:hover:not(.on) { transform: translateY(-2px); }
}
.gk .tile:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }

/* ---------- Panneau « Lancer » ---------- */
.gk .rev-side { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }
.gk .launch {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 18px 50px -24px var(--ink-a28);
}
.gk .pool-count { font-size: 1rem; font-weight: var(--weight-medium); color: var(--text-muted); }
.gk .pool-count b {
  font-family: var(--jakarta);
  font-size: 2.6rem;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.gk .pool-note { margin-top: -6px; font-size: .85rem; color: var(--text-muted); }
.gk .mode-btns { display: flex; flex-direction: column; gap: .65rem; }

/* Modes : les mini-tuiles encre des exercices du quiz de verbes (ivq §2) —
   fond encre, liseré aux couleurs des langues, titre blanc, aide en petites
   capitales, glyphe en filigrane (data-fil) qui bouge au survol. */
.gk .mode-btn {
  appearance: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: var(--space-4) 3.6rem .9rem var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--ink-800), var(--ink-900));
  color: var(--on-dark);
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.gk .mode-btn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--lang-fr-1), var(--lang-en-1), var(--lang-de-1), var(--lang-es-1), var(--lang-it-2));
}
.gk .mode-btn::after {
  content: attr(data-fil);
  position: absolute;
  z-index: -1;
  right: .1em;
  bottom: -.22em;
  font-family: var(--jakarta);
  font-size: 3.2rem;
  font-weight: var(--weight-black);
  line-height: 1;
  color: var(--on-dark-10);
  pointer-events: none;
  transition: transform var(--duration-slow) var(--ease), color var(--duration-slow) var(--ease);
}
.gk .mode-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gk .mode-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gk .mode-txt b { font-family: var(--jakarta); font-size: 1.05rem; font-weight: var(--weight-black); }
.gk .mode-txt span {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--on-dark-72);
}
.gk .mode-btn:hover:not(:disabled) { box-shadow: 0 14px 26px -12px var(--ink-900); }
.gk .mode-btn:hover:not(:disabled)::after { color: var(--on-dark-22); }
@media (prefers-reduced-motion: no-preference) {
  .gk .mode-btn:hover:not(:disabled) { transform: translateY(-2px); }
  .gk .mode-btn:hover:not(:disabled)::after { transform: translate(-.15em, -.1em) rotate(-6deg); }
}
.gk .mode-btn:disabled { opacity: .45; cursor: not-allowed; }
.gk .mode-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }
.gk .launch .reset { align-self: flex-start; }

.gk .side-block { display: flex; flex-direction: column; gap: .55rem; }
.gk .weak-card { background: linear-gradient(150deg, #9a3412, #6b1d0b); }
.gk .hist-list { display: flex; flex-direction: column; gap: 6px; }
.gk .hist-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: .85rem;
}
.gk .hist-when { color: var(--text-strong); }
.gk .hist-scope { color: var(--text-muted); font-size: .78rem; }
.gk .hist-score { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.gk .hist-score.good { color: var(--ok); }
.gk .hist-score.mid  { color: var(--warn); }
.gk .hist-score.low  { color: var(--ko); }
.gk .side-block .danger { align-self: flex-start; }

/* ---------- Session ---------- */
.gk .stage { max-width: 800px; }
.gk .stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-5);
}
.gk .progress {
  font-size: .72rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.gk .stage-actions { display: flex; align-items: center; gap: var(--space-2); }
.gk .score-pill {
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--brand-a10);
  color: var(--brand-text);
  font-size: .82rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.gk .pbar { width: 100%; height: 6px; border-radius: var(--radius-pill); background: var(--border-subtle); overflow: hidden; }
.gk .pbar span { display: block; width: 0; height: 100%; border-radius: var(--radius-pill); background: var(--grad-brand); transition: width var(--duration) var(--ease); }

/* ---------- Fiche laquée, retournée en 3D (23/10/2026) ----------
   Structure (quiz.js, renderCard) :
     .card (#revCard, le bouton, porte la perspective)
       .card-floor   l'ombre sur la table, qui s'éloigne quand la fiche se lève
       .card-lift    se soulève pendant le retournement, puis se repose
         .card-flip  pivote de 180° (face-up)
           .face-front  recto : encre laquée, la question
           .face-back   verso : blanc nacré, la réponse
   Les deux faces sont empilées dans la même case de grille : la fiche prend
   la hauteur de la plus haute, et ne saute pas au retournement.
   Pas d'overflow: hidden au-dessus des faces : il aplatirait la 3D. */
.gk .card {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1600px;
  -webkit-tap-highlight-color: transparent;
}
.gk .card:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 6px; border-radius: var(--radius-lg); }

.gk .card-floor {
  position: absolute;
  inset: 8% 5% 0;
  border-radius: 18px;
  box-shadow: 0 34px 46px -22px rgba(10, 0, 37, .5);
  pointer-events: none;
}
.gk .card-lift { position: relative; transform-style: preserve-3d; }
.gk .card-flip {
  display: grid;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.3, .7, .25, 1);
}
.gk .card.face-up .card-flip { transform: rotateY(180deg); }
.gk .card.no-anim .card-flip { transition: none; }

/* Les faces : cartes laquées (23/10/2026, après le bristol, jugé trop
   scolaire). Recto encre, comme les mini-tuiles du site ; verso blanc nacré.
   Le brillant tient en deux couches : un reflet fixe (dégradé clair en haut à
   gauche, liseré de lumière sur l'arête) et un éclat qui balaie la carte
   pendant le retournement (::before, animé plus bas). */
.gk .face {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 300px;
  padding: 32px 32px 24px;
  border-radius: 18px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.gk .face-front {
  color: var(--on-dark);
  /* Au repos, un lustre discret : un peu de lumière en haut à gauche, un fil
     clair sur l'arête. Le reflet, lui, ne vit que pendant le retournement. */
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 65%),
    radial-gradient(120% 90% at 100% 110%, color-mix(in srgb, var(--tint) 45%, transparent) 0%, transparent 55%),
    linear-gradient(150deg, var(--ink-800), var(--ink-900));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.gk .face-back {
  transform: rotateY(180deg);
  color: var(--text-body);
  /* Blanc très légèrement nacré : le reflet du retournement doit pouvoir
     s'y lire. */
  background:
    radial-gradient(90% 70% at 0% 0%, #ffffff 0%, rgba(255,255,255,0) 65%),
    radial-gradient(120% 90% at 100% 110%, color-mix(in srgb, var(--tint) 12%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, #fbfcfe 0%, #eceff5 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 0 0 1px rgba(10, 0, 37, .07);
}
/* Le reflet du retournement : la lumière d'une lampe sur une surface satinée.
   Large et doux, sans bord : un dégradé deux fois plus large que la carte,
   qu'on fait glisser. Invisible au repos (opacity 0), il n'existe que pendant
   le retournement (animations gk-reflet-* plus bas). */
.gk .face::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 220%;
  z-index: 2;            /* au-dessus du voile d'ombre (::after) */
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.10) 40%,
    rgba(255,255,255,.28) 48%,
    rgba(255,255,255,.10) 56%,
    rgba(255,255,255,0) 68%);
  opacity: 0;
  pointer-events: none;
}
.gk .face-back::before {
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.35) 40%,
    rgba(255,255,255,.85) 48%,
    rgba(255,255,255,.35) 56%,
    rgba(255,255,255,0) 68%);
}
/* La lumière : une face qui se dérobe s'assombrit jusqu'à disparaître de
   profil ; l'autre arrive sombre et s'éclaire. */
.gk .face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10, 0, 37, .05), rgba(10, 0, 37, .45));
  opacity: 0;
  pointer-events: none;
}
.gk .face > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* Retournement : la fiche se lève, pivote un peu dans la main, se repose. */
  .gk .card.flipping .card-lift  { animation: gk-lift  .75s cubic-bezier(.3, .7, .25, 1); }
  .gk .card.flipping .card-floor { animation: gk-floor .75s cubic-bezier(.3, .7, .25, 1); }
  .gk .card.flipping .face::after { animation: gk-shade .75s ease-in-out; }
  /* Le reflet suit l'angle : la face qui part s'incline vers la lumière, le
     reflet monte et glisse, puis s'éteint avant qu'elle soit de profil ; la
     face qui arrive en reçoit un second, plus faible, en se posant. Mêmes
     durée et courbe que la rotation, pour rester calé sur elle. */
  .gk .card.flipping:not(.face-up) .face-back::before,
  .gk .card.flipping.face-up .face-front::before  { animation: gk-reflet-depart  .75s cubic-bezier(.3, .7, .25, 1); }
  .gk .card.flipping:not(.face-up) .face-front::before,
  .gk .card.flipping.face-up .face-back::before   { animation: gk-reflet-arrivee .75s cubic-bezier(.3, .7, .25, 1); }
  /* Fiche suivante / précédente : posée sur la table depuis le côté. */
  .gk .card.deal-next .card-lift { animation: gk-deal-next .42s cubic-bezier(.2, .8, .25, 1); }
  .gk .card.deal-prev .card-lift { animation: gk-deal-prev .42s cubic-bezier(.2, .8, .25, 1); }
}
@keyframes gk-lift {
  0%   { transform: translateZ(0) rotateZ(0); }
  45%  { transform: translateZ(90px) translateY(-10px) rotateZ(-1.8deg); }
  100% { transform: translateZ(0) rotateZ(0); }
}
@keyframes gk-floor {
  0%   { transform: none; opacity: 1; }
  45%  { transform: translateY(26px) scale(.82); opacity: .45; filter: blur(4px); }
  100% { transform: none; opacity: 1; }
}
@keyframes gk-reflet-depart {
  0%   { opacity: 0; transform: translateX(-28%); }
  18%  { opacity: 1; }
  40%  { opacity: .6; transform: translateX(6%); }
  50%  { opacity: 0; transform: translateX(14%); }
  100% { opacity: 0; transform: translateX(14%); }
}
@keyframes gk-reflet-arrivee {
  0%, 50% { opacity: 0; transform: translateX(-14%); }
  68%  { opacity: .55; }
  100% { opacity: 0; transform: translateX(24%); }
}
@keyframes gk-shade {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes gk-deal-next {
  from { transform: translateX(70px) translateY(8px) rotateZ(4deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes gk-deal-prev {
  from { transform: translateX(-70px) translateY(8px) rotateZ(-4deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gk .card-flip { transition: none; }
}

.gk .card-tag {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: .72rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tint, var(--text-muted)) 62%, var(--ink-900));
}
.gk .card-per { color: var(--text-muted); }
/* Recto encre : textes clairs. */
.gk .face-front .card-tag { color: color-mix(in srgb, var(--tint) 45%, #ffffff); }
.gk .face-front .card-per { color: var(--on-dark-55); }
.gk .face-front .card-ask { color: var(--on-dark-72); }
.gk .face-front .card-front-title { color: var(--on-dark); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.gk .face-front .card-hint { color: var(--on-dark-88); }
.gk .card-front-q { margin: auto 0; display: flex; flex-direction: column; gap: var(--space-2); }
.gk .card-ask { font-size: .95rem; color: var(--text-muted); }
.gk .card-front-title {
  font-family: var(--jakarta);
  font-size: clamp(1.6rem, 4.4vw, 2.3rem);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  color: var(--text-strong);
}
.gk .card-answer { margin: auto 0; }
.gk .card-date {
  font-family: var(--jakarta);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: color-mix(in srgb, var(--tint, var(--text-strong)) 62%, var(--ink-900));
  margin: 0 0 var(--space-2);
}
.gk .card-title { font-family: var(--jakarta); font-size: 1.35rem; font-weight: var(--weight-black); color: var(--text-strong); margin: 0 0 var(--space-2); }
.gk .card-desc { color: var(--text-soft); font-size: 1.02rem; max-width: var(--measure); }
.gk .card-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  font-size: .84rem;
  font-weight: var(--weight-bold);
  color: var(--brand-text);
}
.gk .card-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gk .card:hover .card-hint svg { transform: rotate(-30deg); transition: transform var(--duration) var(--ease); }

.gk .deck-nav {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.gk .kbd-hint { margin-top: var(--space-2); font-size: .78rem; color: var(--text-muted); text-align: center; }
.gk kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  border: 1px solid var(--border-card);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: .74rem;
  text-align: center;
  color: var(--text-strong);
  background: var(--surface);
}
@media (hover: none) { .gk .kbd-hint { display: none; } }

/* ---------- Quiz : la question dans une carte blanche ---------- */
.gk #quizBody {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 18px 50px -24px var(--ink-a28);
}
.gk .q-text {
  margin: 0 0 var(--space-2);
  font-size: .72rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.gk .q-sub {
  font-family: var(--jakarta);
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  color: var(--text-strong);
  margin: 0 0 var(--space-5);
}
/* Contexte sous le titre d'une question « période » (quiz.js,
   contextePeriode) : la description du repère, ou sa catégorie. */
.gk .q-sub .q-ctx {
  display: block;
  margin-top: var(--space-2);
  font-family: 'Inter', 'Inter-fallback', system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--text-soft);
}
.gk .options { display: flex; flex-direction: column; gap: var(--space-2); }
.gk .option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 10px 46px 10px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-strong);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
/* La lettre est un ::before : elle ne s'ajoute pas au textContent, qui sert
   de clé de comparaison dans choose(). */
.gk .option::before {
  content: attr(data-letter);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-xs);
  background: var(--brand-a10);
  font-size: .82rem;
  font-weight: var(--weight-bold);
  color: var(--brand-text);
}
.gk .option:hover:not(:disabled) { border-color: var(--brand-500); background: var(--brand-a04); }
.gk .option:disabled { cursor: default; }
.gk .option:disabled:not(.correct):not(.wrong) { opacity: .55; }
/* Juste / faux ne reposent pas sur la seule couleur (WCAG 1.4.1). */
.gk .option.correct,
.gk .option.wrong { border-width: 2px; }
.gk .option.correct::after,
.gk .option.wrong::after {
  position: absolute;
  right: 14px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: .78rem; font-weight: var(--weight-bold); line-height: 1;
  color: var(--on-dark);
}
.gk .option.correct::after { content: "✓"; background: var(--ok); }
.gk .option.wrong::after   { content: "✕"; background: var(--ko); }
.gk .option.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.gk .option.wrong   { border-color: var(--ko); background: color-mix(in srgb, var(--ko) 10%, var(--surface)); }
.gk .option.correct::before { background: var(--ok); color: var(--on-dark); }
.gk .option.wrong::before   { background: var(--ko); color: var(--on-dark); }

.gk .q-feedback {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
  font-size: .92rem;
}
.gk .q-feedback.show { display: block; }
/* Bilan coloré sur tout le pourtour, en trait fin, et fond à peine teinté
   (24/10/2026 : plus de bord gauche épais). */
.gk .q-feedback.is-ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 6%, var(--surface, #fff)); }
.gk .q-feedback.is-ko { border-color: color-mix(in srgb, var(--ko) 45%, transparent); background: color-mix(in srgb, var(--ko) 6%, var(--surface, #fff)); }
.gk .fb-verdict { font-weight: var(--weight-black); margin-bottom: 2px; }
.gk .q-feedback.is-ok .fb-verdict { color: var(--ok); }
.gk .q-feedback.is-ko .fb-verdict { color: var(--ko); }
.gk .q-feedback .fb-title { font-weight: var(--weight-bold); color: var(--text-strong); margin-bottom: 2px; }
.gk .q-feedback .fb-desc { color: var(--text-soft); }

/* ---------- Résultat ---------- */
.gk .result {
  text-align: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 18px 50px -24px var(--ink-a28);
}
.gk .score-ring { position: relative; width: 200px; height: 200px; margin: 0 auto 8px; }
.gk .score-ring svg { width: 100%; height: 100%; display: block; }
.gk .ring-track { fill: none; stroke: var(--border-subtle); stroke-width: 12; }
.gk .ring-fill {
  fill: none;
  stroke: var(--ring-color, var(--brand-500));
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1), stroke .6s ease;
}
.gk .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.gk .ring-score { font-family: var(--jakarta); font-size: 3.4rem; font-weight: var(--weight-black); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.gk .ring-total { font-size: .9rem; color: var(--text-muted); margin-top: 4px; }
.gk .result .verdict { font-family: var(--jakarta); font-size: 1.45rem; font-weight: var(--weight-black); color: var(--text-strong); margin: 12px 0 4px; }
.gk .result .detail { color: var(--text-muted); margin: 0; }
.gk .result-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }

.gk .recap { margin-top: var(--space-6); }
.gk .recap-title {
  font-family: var(--jakarta);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: var(--weight-black);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}
.gk .rc-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 12px 16px;
  margin-bottom: var(--space-2);
}
.gk .rc-item.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.gk .rc-item.ko { border-color: color-mix(in srgb, var(--ko) 40%, transparent); }
.gk .rc-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 6px; }
.gk .rc-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: .7rem; font-weight: var(--weight-bold); color: var(--on-dark); flex: 0 0 auto;
}
.gk .rc-item.ok .rc-mark { background: var(--ok); }
.gk .rc-item.ko .rc-mark { background: var(--ko); }
.gk .rc-num { font-size: .68rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); font-weight: var(--weight-bold); }
.gk .rc-prompt { font-size: .86rem; color: var(--text-strong); }
.gk .rc-indice { font-weight: var(--weight-bold); font-size: 1rem; color: var(--text-strong); margin: 0 0 8px; }
.gk .rc-line { font-size: .9rem; margin-top: 3px; }
.gk .rc-line span { font-weight: var(--weight-bold); }
.gk .rc-yours { color: var(--text-muted); }
.gk .rc-yours span { color: var(--ko); }
.gk .rc-good { color: var(--text-muted); }
.gk .rc-good span { color: var(--ok); }
.gk .rc-ctx { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); font-size: .82rem; color: var(--text-muted); }

/* ---------- Sous 900 px : une colonne, « Lancer » en barre du bas ----------
   .rev-side s'efface (display: contents) : ses enfants deviennent ceux de la
   grille, qui couvre toute la page de réglages. Une barre `sticky; bottom: 0`
   ne colle qu'à l'intérieur de son parent : dans .rev-side, qui commence sous
   les réglages, elle n'apparaîtrait qu'après eux. */
@media (max-width: 899px) {
  .gk .rev-setup { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .gk .rev-side { display: contents; }
  .gk .launch {
    position: sticky;
    bottom: 0;
    z-index: 20;
    order: 1;
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: center;
    gap: var(--space-2);
    margin: 0 calc(-1 * var(--pad-x));
    padding: var(--space-2) var(--pad-x) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    border-width: 1px 0 0;
    box-shadow: 0 -10px 30px -16px var(--ink-a28);
  }
  .gk .rev-settings { order: 0; }
  .gk .side-block { order: 2; }
  .gk .pool-count { display: flex; flex-direction: column; align-items: center; line-height: 1.1; font-size: .72rem; padding-right: var(--space-2); }
  .gk .pool-count b { font-size: 1.6rem; }
  .gk .pool-note, .gk .launch .reset { display: none !important; }
  .gk .mode-btns { display: contents; }
  .gk .mode-btn { min-height: 50px; grid-template-columns: 22px auto; justify-content: center; padding: 8px 10px; }
  .gk .mode-btn::after { font-size: 2.2rem; }
  .gk .mode-btn svg { width: 20px; height: 20px; }
  .gk .mode-txt span { display: none; }
  .gk .weak-card .mode-txt span { display: block; }
  .gk .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 640px) {
  .gk .face { padding: 24px 20px 18px; min-height: 260px; }
  .gk .tile { padding: .65rem .75rem; gap: var(--space-2); min-height: 56px; }
  .gk .tile-sub { display: none; }
  .gk .tile-name { font-size: .92rem; }
  .gk .tile-fil { font-size: 2.4rem; }
  .gk .rev-intro { font-size: 1rem; }
}

/* ===========================================================================
   Mouvement réduit : toute animation, même ajoutée plus tard, est ramenée à
   l'imperceptible.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gk *, .gk *::before, .gk *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Images de la révision (24/10/2026) ----------
   Vignettes hébergées par le site (general-knowledge/img/). Au dos des
   fiches, à côté de la réponse ; dans le quiz, avec la question « quelle
   période ? », ou après la réponse pour « quel repère ? » (plus tôt, elle
   donnerait la réponse). */
.gk .card-illus, .gk .q-illus, .gk .fb-illus { margin: 0; }
.gk .card-illus img, .gk .q-illus img, .gk .fb-illus img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 220px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: #fff;
}
.gk .card-answer.has-illus {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}
.gk .card-illus .credit { margin-top: 6px; }
.gk .q-illus { margin: calc(-1 * var(--space-2)) 0 var(--space-5); max-width: 320px; }
.gk .fb-illus { float: right; width: 150px; margin: 0 0 var(--space-2) var(--space-4); }
.gk .fb-illus img { max-height: 160px; }
.gk .q-feedback::after { content: ''; display: block; clear: both; }
@media (max-width: 600px) {
  .gk .card-answer.has-illus { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .gk .card-illus img { max-height: 150px; }
  .gk .q-illus img { max-height: 180px; }
  .gk .fb-illus { width: 110px; }
}