/* ── LE CATALOGUE ────────────────────────────────────────────────────
   Cent vingt metriques d'un cote, quatre objectifs de l'autre. La figure
   ne compare pas deux produits : elle montre la quantite que la seule
   reference comparable laissait a croiser soi-meme, et ce qui en reste
   quand on part d'une question au lieu d'une table. */
:root{
  --fk-case:rgba(10,18,32,.10);
  --fk-case-trait:rgba(10,18,32,.06);
}
html:not(.theme-light){
  --fk-case:rgba(242,235,219,.13);
  --fk-case-trait:rgba(242,235,219,.07);
}

.fk-h{ display:flex; flex-direction:column; gap:.5cqw; margin-bottom:1.6cqw; }
.fk-h b{ font-size:1.35cqw; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-mate); }
.fk-h span{ font-size:1.5cqw; font-weight:400; line-height:1.4; color:var(--fg-mate); }
.fk-h.est-vif b{ color:var(--fg-accent); }

/* La nappe : cent vingt cases, dix rangees de douze. */
.fk-nappe{ display:grid; grid-template-columns:repeat(12,1fr); gap:.62cqw; }
.fk-nappe i{ display:block; aspect-ratio:1; border-radius:.22cqw;
  background:var(--fk-case); border:1px solid var(--fk-case-trait); }


/* Les quatre objectifs, nommes. */
.fk-buts{ display:flex; flex-direction:column; gap:.9cqw; }
.fk-but{ display:flex; align-items:center; gap:1.1cqw;
  padding:1.15cqw 1.4cqw; border-radius:.5cqw;
  background:var(--fg-plaque); border:1px solid var(--fg-ligne); }
.fk-but s{ flex:none; width:1.5cqw; height:1.5cqw; border-radius:.25cqw;
  background:var(--fg-accent); text-decoration:none; }
.fk-but em{ font-style:normal; font-size:1.75cqw; font-weight:600;
  color:var(--fg-encre); line-height:1.2; }

/* Le passage de l'une a l'autre : un trait, pas une fleche decorative. */
.fk-fleche{ width:100%; height:auto; display:block; overflow:visible; }
.fk-fleche path{ fill:none; stroke:var(--fg-mate); stroke-width:1.4;
  stroke-linecap:round; opacity:.55; }
.fk-fleche polygon{ fill:var(--fg-mate); opacity:.55; }