/* v3-article.css — les composants propres aux articles « débutant »
   (/prejuges et /poomsae-comprendre, produits par scripts/gen-articles.mjs).

   La coquille, les titres et les encadrés viennent du gabarit déjà en place
   (.gk-dkv3 / .gk-dk-*, cf. glass-site.css + v3-social.css) : ici on n'ajoute
   que ce que ces deux articles apportent en plus, c'est-à-dire leurs schémas.
   Charte « or hextech » : aucun arrondi, or #C8AA6E, hiérarchie par opacités
   de blanc, hexagones par clip-path. */

.gk-art .ar-wrap { max-width: 820px; }
.gk-art .ar-kicker { margin: 26px 0 8px; }

/* Le titre d'un préjugé est une CITATION : centré, en GT Sectra italique, il
   tranche avec le corps d'article qui le démonte juste en dessous. */
.gk-art .ar-myth {
  margin: 34px 0 0; text-align: center;
  font: italic 700 clamp(18px, 2.2vw, 22px)/1.25 'GT Sectra Display', Georgia, serif;
  color: #F2EEE4;
}
.gk-art .ar-myth + .gk-dk-p { margin-top: 10px; }

/* Encadrés : angles nets et filet, comme le reste du site. */
.gk-art .ar-card {
  margin-top: 18px; border: 0; border-radius: 0;
  background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  padding: 20px 22px;
}
.gk-art .ar-note {
  margin: 14px 0 0; font: 400 12.5px/1.6 'Inter', sans-serif; color: rgba(255,255,255,.58);
}
.gk-art .ar-cap {
  display: block; margin: 12px 0 0; text-align: center;
  font: italic 400 12px/1.5 'Inter', sans-serif; color: rgba(255,255,255,.5);
}
.gk-art .ar-sources {
  margin: 34px 0 0; font: 400 12px/1.7 'Inter', sans-serif; color: rgba(255,255,255,.45);
}

/* Le losange or de la charte, en puce et en jalon. */
.gk-art .ar-dia {
  flex: none; width: 7px; height: 7px; transform: rotate(45deg);
  background: linear-gradient(180deg, #F0E6D2, #C8AA6E 45%, #785A28);
}
.gk-art .ar-dia.is--hollow { background: none; box-shadow: inset 0 0 0 1px #C8AA6E; }
.gk-art .ar-bul { list-style: none; margin: 0; padding: 0; }
.gk-art .ar-bul li { display: flex; align-items: flex-start; gap: 11px; margin-top: 11px; }
.gk-art .ar-bul li:first-child { margin-top: 0; }
.gk-art .ar-bul li .ar-dia { margin-top: 6px; }
.gk-art .ar-bul li span { font: 400 13.5px/1.6 'Inter', sans-serif; color: rgba(255,255,255,.8); }

/* Grande charnière : le fil infini au lieu de la fleur. */
.gk-art .wsep.is--big { margin: 46px 0 10px; }
.gk-art .wsep { margin: 38px 0 6px; }

/* ── Préjugés · l'amplitude vient avec la pratique ─────────────────────────
   Quatre jalons qui montent, reliés par un trait. Les hauteurs disent la
   pente, pas des degrés : c'est une pédagogie, pas une mesure. */
/* Le schéma tient sur 440 px au plus : étiré sur toute la largeur d'un article
   de 820 px, la montée de 48 px se lisait comme une ligne plate, et c'est
   justement la pente qui porte le message. */
.gk-art .ar-flex { max-width: 440px; margin: 0 auto; }
.gk-art .ar-flex svg { display: block; width: 100%; height: 84px; overflow: visible; }
.gk-art .ar-flex-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.gk-art .ar-flex-col { text-align: center; padding: 0 4px; }
.gk-art .ar-flex-col .w {
  display: block; font: 700 9.5px 'Inter', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: #C8AA6E;
}
.gk-art .ar-flex-col .l {
  display: block; margin-top: 3px; font: 500 12px/1.35 'Inter', sans-serif; color: rgba(255,255,255,.72);
}

/* ── Préjugés · ce qu'on imagine / ce qui se passe ─────────────────────── */
.gk-art .ar-vs-row {
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: 16px; align-items: start;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08);
}
.gk-art .ar-vs-row::before { content: ''; grid-column: 2; align-self: stretch; background: rgba(255,255,255,.12); }
.gk-art .ar-vs-row > span:nth-of-type(1) { grid-column: 1; }
.gk-art .ar-vs-row > span:nth-of-type(2) { grid-column: 3; }
.gk-art .ar-vs-row.is--head {
  border-top: 0; padding-top: 0;
  font: 700 9.5px 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase;
}
.gk-art .ar-vs-row.is--head > span:nth-of-type(1) { color: rgba(255,255,255,.5); }
.gk-art .ar-vs-row.is--head > span:nth-of-type(2) { color: #C8AA6E; }
.gk-art .ar-vs-row .l { font: 400 13px/1.55 'Inter', sans-serif; color: rgba(255,255,255,.55); }
.gk-art .ar-vs-row .r { font: 500 13px/1.55 'Inter', sans-serif; color: rgba(255,255,255,.88); }

/* ── Préjugés · ce qu'il faut, et quand ────────────────────────────────── */
.gk-art .ar-kit-row {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding-top: 4px;
}
.gk-art .ar-kit-row::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: 7px; height: 1px;
  background: linear-gradient(90deg, rgba(200,170,110,.6), rgba(200,170,110,.15));
}
.gk-art .ar-kit-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; }
.gk-art .ar-kit-step .ar-dia { width: 9px; height: 9px; }
.gk-art .ar-kit-step .w {
  font: 700 9.5px 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #C8AA6E;
}
.gk-art .ar-kit-step .t { font: 500 12.5px/1.4 'Inter', sans-serif; color: rgba(255,255,255,.78); }

/* ── Poomsae · les chiffres clés ───────────────────────────────────────── */
.gk-art .ar-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 26px; }
.gk-art .ar-stat {
  position: relative; isolation: isolate; text-align: center; padding: 14px 6px;
  background: rgba(255,255,255,.16);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
.gk-art .ar-stat::before {
  content: ''; position: absolute; inset: 1px; z-index: -1; background: #0E1424;
  clip-path: polygon(11.2px 0, calc(100% - 11.2px) 0, 100% 50%, calc(100% - 11.2px) 100%, 11.2px 100%, 0 50%);
}
.gk-art .ar-stat b {
  display: block; font: 800 italic 26px 'Inter Tight', Inter, sans-serif; color: #F2F4FA; line-height: 1;
}
.gk-art .ar-stat span {
  display: block; margin-top: 5px; font: 500 10px/1.3 'Inter', sans-serif; color: rgba(255,255,255,.55);
}
@media (max-width: 700px) { .gk-art .ar-stats { grid-template-columns: repeat(3, 1fr); } }

/* ── Poomsae · une rangée « hangeul + libellé » (commandes, positions) ─── */
.gk-art .ar-term {
  display: flex; align-items: flex-start; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.gk-art .ar-term:last-of-type { border-bottom: 0; }
.gk-art .ar-term .ko {
  flex: 0 0 76px; font: 500 19px 'Noto Serif KR', serif; color: #C8AA6E; line-height: 1.25;
}
.gk-art .ar-term .tx { flex: 1; min-width: 0; }
.gk-art .ar-term .tx b {
  display: block; font: italic 700 15px 'GT Sectra Display', Georgia, serif; color: #F2EEE4;
}
.gk-art .ar-term .tx b em { font-style: normal; font: 500 12px 'Inter', sans-serif; color: rgba(255,255,255,.45); }
.gk-art .ar-term .tx > span {
  display: block; margin-top: 3px; font: 400 13px/1.6 'Inter', sans-serif; color: rgba(255,255,255,.7);
}

/* ── Poomsae · les étapes numérotées (apprendre, biomécanique) ─────────── */
.gk-art .ar-steps { list-style: none; counter-reset: ar 0; margin: 16px 0 0; padding: 0; }
.gk-art .ar-steps li {
  counter-increment: ar; position: relative; padding: 0 0 0 44px; margin-top: 16px;
}
.gk-art .ar-steps li::before {
  content: counter(ar); position: absolute; left: 0; top: 1px;
  width: 28px; height: 25px; display: grid; place-items: center;
  font: 800 italic 12px 'Inter Tight', Inter, sans-serif; color: #0B0E1A;
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
}
.gk-art .ar-steps li b {
  display: block; font: italic 700 15px 'GT Sectra Display', Georgia, serif; color: #F2EEE4;
}
.gk-art .ar-steps li span {
  display: block; margin-top: 3px; font: 400 13px/1.6 'Inter', sans-serif; color: rgba(255,255,255,.72);
}

/* ── Poomsae · le tracé au sol (les huit Taegeuk dessinent 王) ─────────── */
.gk-art .ar-floor { margin-top: 14px; text-align: center; }
.gk-art .ar-floor svg { width: 132px; height: 139px; display: inline-block; }

/* ── Poomsae · la chaîne de la puissance ───────────────────────────────── */
.gk-art .ar-wedge { display: block; width: 100%; height: 18px; margin-top: 12px; }
.gk-art .ar-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }
.gk-art .ar-chain-chip {
  padding: 7px 14px; font: 500 12px 'Inter', sans-serif; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.07);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.gk-art .ar-chain-ar { width: 12px; height: 1px; background: rgba(200,170,110,.6); position: relative; }
.gk-art .ar-chain-ar::after {
  content: ''; position: absolute; right: -1px; top: -2.5px;
  border: 3px solid transparent; border-left-color: rgba(200,170,110,.85);
}
.gk-art .ar-chain-caps {
  display: flex; justify-content: space-between; margin-top: 9px;
  font: italic 400 11px 'Inter', sans-serif; color: rgba(255,255,255,.45);
}

/* ── Poomsae · ITF face à WT ───────────────────────────────────────────── */
.gk-art .ar-diag { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.gk-art .ar-diag svg { display: block; width: 100%; height: 42px; margin-top: 6px; }
.gk-art .ar-diag .l {
  font: 700 9.5px 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
@media (max-width: 640px) { .gk-art .ar-diag { grid-template-columns: 1fr; } }

/* ── Poomsae · la notation ─────────────────────────────────────────────── */
.gk-art .ar-score { margin-top: 16px; }
.gk-art .ar-score-row {
  display: flex; align-items: baseline; gap: 15px; padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.gk-art .ar-score-row:last-child { border-bottom: 0; }
.gk-art .ar-score-row .n {
  flex: 0 0 42px; font: 800 italic 19px 'Inter Tight', Inter, sans-serif; color: #C8AA6E;
}
.gk-art .ar-score-row .tx b { display: block; font: 600 13.5px 'Inter', sans-serif; color: #F2F4FA; }
.gk-art .ar-score-row .tx > span {
  display: block; margin-top: 2px; font: 400 12.5px/1.55 'Inter', sans-serif; color: rgba(255,255,255,.65);
}

/* ── Poomsae · les huit trigrammes ─────────────────────────────────────── */
.gk-art .ar-tri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 18px; }
.gk-art .ar-tri-cell {
  display: block; text-align: center; padding: 15px 10px 16px; text-decoration: none;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  transition: background .16s;
}
.gk-art .ar-tri-cell:hover { background: rgba(200,170,110,.14); }
.gk-art .ar-tri-cell .s { display: block; font-size: 24px; color: #C8AA6E; line-height: 1; }
.gk-art .ar-tri-cell .ko {
  display: block; margin-top: 4px; font: 500 12px 'Noto Serif KR', serif; color: rgba(255,255,255,.45);
}
.gk-art .ar-tri-cell b {
  display: block; margin-top: 7px; font: italic 700 14px 'GT Sectra Display', Georgia, serif; color: #F2EEE4;
}
.gk-art .ar-tri-cell .b {
  display: block; margin-top: 4px; font: 400 11.5px/1.45 'Inter', sans-serif; color: rgba(255,255,255,.6);
}
@media (max-width: 760px) { .gk-art .ar-tri { grid-template-columns: repeat(2, 1fr); } }

/* ── Poomsae · les neuf formes de ceinture noire ───────────────────────── */
.gk-art .ar-dan { margin-top: 14px; }
.gk-art .ar-dan-row {
  display: flex; align-items: flex-start; gap: 16px; padding: 12px 8px; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.gk-art .ar-dan-row:last-child { border-bottom: 0; }
a.gk-art .ar-dan-row:hover, .gk-art a.ar-dan-row:hover { background: rgba(255,255,255,.04); }
.gk-art .ar-dan-row .ko {
  flex: 0 0 62px; font: 500 17px 'Noto Serif KR', serif; color: #C8AA6E; line-height: 1.3;
}
.gk-art .ar-dan-row .tx b {
  display: block; font: italic 700 14.5px 'GT Sectra Display', Georgia, serif; color: #F2EEE4;
}
.gk-art .ar-dan-row .tx > span {
  display: block; margin-top: 2px; font: 400 12.5px/1.55 'Inter', sans-serif; color: rgba(255,255,255,.68);
}

@media (max-width: 560px) {
  .gk-art .ar-flex-row { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
  .gk-art .ar-kit-row { grid-template-columns: 1fr; }
  .gk-art .ar-kit-row::before { display: none; }
  .gk-art .ar-vs-row { grid-template-columns: 1fr; gap: 4px; }
  .gk-art .ar-vs-row::before { display: none; }
}