/* ============================================================================
   v3-bibliotheque.css : V3a « Bibliothèque » (hub Ressources, fiches seogi/
   makgi/chagi/chigi/freestyle, lexique, chrome de l'arbre 3D).
   Chargé APRÈS glass-site.css + hextech-or.css. Tout le neuf est préfixé .rh-
   (hub) ou scopé .gk-bib-v3 / .gk-arbre-v3 → zéro effet ailleurs.
   Règles de la charte : aucun arrondi, accent or unique, hiérarchie par
   opacités de blanc, encre #0B0E1A sur or.
   ========================================================================== */

/* ── HUB /ressources ─────────────────────────────────────────────────────── */
.rh-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px; margin-top: 30px; align-items: start; }
/* ⚠ min-width:0 : par défaut un enfant de grille a min-width:auto, donc les
   noms de techniques (nowrap) poussaient la colonne de gauche bien au-delà de
   son 1.2fr et écrasaient la colonne Explorer à une bande illisible. */
.rh-left, .rh-right { min-width: 0; }
@media (max-width: 1100px) { .rh-grid { grid-template-columns: 1fr; } }

/* recherche catalogue : recette .srch pleine largeur avec vrai input */
.rh-search { max-width: none; display: flex; }
.rh-search i { color: #C8AA6E; }

/* chips (le .fchip d'hextech-or est pensé pour des span : reset du <button>) */
.rh-chips { display: flex; gap: 8px; margin-top: 12px; }
button.fchip { appearance: none; -webkit-appearance: none; border: 0; font-family: Inter, sans-serif; }
.rh-chips .fchip i { color: inherit; }

/* familles en chips de filtre : elles étaient une colonne de cartes à droite */
.rh-fams-chips { flex-wrap: wrap; margin-top: 8px; }

/* barre compteur + bascule liste/grille */
.rh-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
.rh-count { margin: 0; font: 500 12px Inter; color: var(--muted); }
.rh-count em { font-style: normal; color: #E8C77E; }
.rh-view { display: flex; gap: 4px; flex: 0 0 auto; }
.rh-vb { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
  width: 34px; height: 28px; display: grid; place-items: center; font-size: 14px;
  color: rgba(255,255,255,.6); background: rgba(255,255,255,.06);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.rh-vb:hover { color: #F2F4FA; background: rgba(255,255,255,.11); }
.rh-vb.on { color: #0B0E1A;
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%); }

/* ── répertoire A→Z ──
   ⚠ Le catalogue fait 200+ entrées : sans cadre, la page entière défilait sur
   des milliers de pixels et la colonne de droite se retrouvait à des écrans de
   distance. La liste défile donc DANS son propre cadre (le rail A→Z reste collé
   à côté, et .rh-cat crée le conteneur de défilement). */
.rh-cat { display: flex; gap: 16px; margin-top: 12px; }
.rh-list {
  flex: 1; min-width: 0;
  max-height: clamp(360px, 62vh, 720px); overflow-y: auto; overscroll-behavior: contain;
  padding-right: 8px;
}
.rh-list::-webkit-scrollbar { width: 5px; }
.rh-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
.rh-letter { position: sticky; top: 0; z-index: 1; background: var(--bg);
  font: 600 10px Inter; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding: 6px 0 4px; }
.rh-letter:first-child { padding-top: 0; }
.rh-row { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.07); text-decoration: none; color: inherit; }
.rh-row:hover { background: rgba(255,255,255,.04); }

/* affichage en grille : cartes en colonnes, mêmes données */
/* ⚠ `grid-auto-rows: max-content` est OBLIGATOIRE ici : les cartes portent
   `overflow:hidden`, ce qui annule leur taille minimale automatique ; dans un
   conteneur à `max-height` + `overflow-y:auto`, la rangée se réduisait alors à
   son seul padding (12 px) et toutes les cartes étaient écrasées (audit 24/08). */
.rh-list.is-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); grid-auto-rows: max-content; gap: 8px; align-content: start; }
.rh-list.is-grid .rh-row {
  flex-direction: column; align-items: flex-start; gap: 6px; border-bottom: 0;
  padding: 14px 15px; background: linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
.rh-list.is-grid .rh-row:hover { background: linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.05)); }
/* L'image d'abord, puis UNE ligne : le nom à gauche, la famille à droite.
   Avant, le nom et le hangeul se suivaient dans le même bloc, sur deux ou
   trois lignes, et la vignette n'avait plus de place (retour Jason 24/08).
   Le hangeul sort de la grille : il reste sur la fiche de la technique. */
.rh-list.is-grid .rh-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: 'img img' 'nm fam'; column-gap: 8px; row-gap: 7px;
}
.rh-list.is-grid .rh-img { grid-area: img; }
.rh-list.is-grid .rh-nm { grid-area: nm; white-space: normal; align-self: center; }
.rh-list.is-grid .rh-famtag { grid-area: fam; align-self: center; }
.rh-list.is-grid .rh-nm em { display: none; }
.rh-list.is-grid .rh-nm b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; line-height: 1.3;
}
.rh-list.is-grid .rh-dot { position: absolute; }
.rh-list.is-grid .rh-row { position: relative; padding-left: 15px; }
.rh-list.is-grid .rh-dot { top: 15px; right: 13px; }
/* Le losange dit le NIVEAU, plus la lecture (retour Jason 01/09) : doré pour
   les techniques du grade en cours, effacé pour celles des grades déjà passés.
   Marquer « déjà vu » en or noyait le repère utile sous une majorité d'items. */
.rh-dot { width: 7px; height: 7px; flex: 0 0 7px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.rh-row.is-prog .rh-dot { box-shadow: none; background: linear-gradient(180deg,#F0E6D2,#C8AA6E 45%,#785A28); }
/* la lecture reste signalée par le nom (règle .rh-row.is-seen plus bas) */

/* séparateur entre le grade en cours et les grades déjà passés */
.rh-sep {
  margin: 22px 0 8px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  font: 700 9px Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: #8A93AD;
}
.rh-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-nm b { font: italic 700 15.5px 'GT Sectra Display', Georgia, serif; color: rgba(255,255,255,.65); }
.rh-row.is-seen .rh-nm b { color: #F2F4FA; }
.rh-nm em { font: 400 11.5px 'Noto Serif KR', serif; font-style: normal; color: rgba(255,255,255,.4); margin-left: 4px; }
.rh-famtag { flex: 0 0 auto; font: 600 9.5px Inter; letter-spacing: .12em; text-transform: uppercase; color: #C8AA6E; }
.rh-empty { font: 500 12.5px Inter; color: var(--muted); padding: 18px 2px; }
.rh-rail { flex: 0 0 auto; position: sticky; top: 20px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 8px; }
.rh-l { display: block; appearance: none; border: 0; background: none; padding: 0; margin: 0; font: 600 9px Inter; color: var(--muted); cursor: pointer; }
button.rh-l:hover { color: #C8AA6E; }
.rh-l.is-off { opacity: .3; cursor: default; }

/* tuiles Explorer (recette hxring de la maquette) */
.rh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rh-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1.5; padding: 16px 18px; color: inherit; text-decoration: none; --hxfill: rgba(255,255,255,.04); --hxw: 1px;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%); }
.rh-tile > i { position: absolute; top: 14px; left: 18px; font-size: 22px; color: #C8AA6E; }
.rh-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45); z-index: 0; }
.rh-tile b { position: relative; font-size: 18px; font-style: italic; color: #F2F4FA; }
.rh-tile > span { position: relative; font: 500 11px Inter; color: rgba(255,255,255,.6); }
.rh-tile .gsoon { position: absolute; right: 12px; top: 10px; bottom: auto; left: auto; }
.rh-tile.is--soon { opacity: .6; cursor: default; }
a.rh-tile:hover { filter: brightness(1.12); color: inherit; }

/* (l'ancienne colonne « Familles » en .card.bigmed a été remplacée par les
   chips de filtre .rh-fams-chips ; ses règles sont retirées avec elle) */

/* ── FICHES + LEXIQUE (scope .gk-bib-v3, posé par js/ressources-hub.js) ──── */
/* le breadcrumb Webflow (ou son remplaçant .glass-breadcrumb) est masqué :
   le .crumb v3 le remplace ; le .top_nav reste dans le DOM (accroches) */
.content.gk-bib-v3 .top_nav .breadcrumb,
.content.gk-bib-v3 .top_nav .glass-breadcrumb { display: none !important; }
.content.gk-bib-v3 .top_nav { min-height: 0; margin: 0; padding: 0; }

.gkb-crumb a { color: inherit; text-decoration: none; }
.gkb-crumb a:hover { color: #F2F4FA; }
.gkb-head { margin-top: 18px; margin-bottom: 8px; }
/* En-tête CENTRÉ (essai sur le lexique) : le titre au milieu, la fleur de la
   charte de part et d'autre au lieu d'être posée dessous. Les deux traits
   prennent la place qui reste et s'éteignent vers l'extérieur, le losange
   reste collé au titre. */
.gkb-head.is--centre { display: flex; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.gkb-head.is--centre h1.display { flex: 0 1 auto; min-width: 0; }
/* Filets BLANCS à faible opacité, pas d'or : le doré tirait l'œil plus que le
   titre. Et `align-self: baseline` les pose sur la LIGNE DE BASE du titre au
   lieu du milieu de sa boîte : c'est là qu'un filet se lit comme un trait de
   composition, pas comme une barre en travers (retour Jason 25/08). */
.gkb-head.is--centre .pgflr {
  flex: 1 1 0; min-width: 34px; margin: 0; display: flex;
  align-self: baseline;
}
.gkb-head.is--centre .pgflr .ln { flex: 1 1 auto; height: 1px; }
.gkb-head.is--centre .pgflr.g .ln { background: linear-gradient(90deg, transparent, rgba(255,255,255,.34)); }
.gkb-head.is--centre .pgflr.d .ln { background: linear-gradient(270deg, transparent, rgba(255,255,255,.34)); }
@media (max-width: 700px) {
  .gkb-head.is--centre { gap: 12px; }
  .gkb-head.is--centre .pgflr { min-width: 18px; }
}
.gkb-head h1.display { font-size: 46px; line-height: 1.05; margin: 0; }
.gkb-head h1.display em {
  font: 500 17px 'Noto Serif KR', serif; font-style: normal;
  letter-spacing: .06em; margin-left: 10px; color: rgba(255,255,255,.8);
}

/* titres de section re-titrés en .hx (CSS seul, le DOM baké/injecté est intact) :
   h1 Webflow des fiches, sections freestyle, sous-titres lexique */
.gk-bib-v3 h1.heading_1.techniques,
.gk-bib-v3 .gk-free-h,
.gk-bib-v3 .gk-lex-sub {
  position: relative; isolation: isolate; display: inline-flex; width: fit-content;
  margin: 26px 0 14px; padding: 10px 30px;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.2) 32%, rgba(255,255,255,.07) 58%, rgba(255,255,255,.28));
  font: italic 700 15px 'GT Sectra Display', Georgia, serif;
  letter-spacing: .06em; text-transform: none; color: #F2F4FA;
}
.gk-bib-v3 h1.heading_1.techniques::before,
.gk-bib-v3 .gk-free-h::before,
.gk-bib-v3 .gk-lex-sub::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  clip-path: polygon(15.2px 0, calc(100% - 15.2px) 0, 100% 50%, calc(100% - 15.2px) 100%, 15.2px 100%, 0 50%);
  background: #0D1524;
}
.gk-bib-v3 h1.heading_1.techniques.first { margin-top: 10px; }

/* lexique : le h1/lead de lexique-live doublonnent l'en-tête v3 → masqués ;
   hangeul + audio + catégories CONSERVÉS, restyle léger seulement */
.gk-bib-v3 .gk-lex-title, .gk-bib-v3 .gk-lex-lead { display: none; }
.gk-bib-v3 .gk-lex-bar { background: linear-gradient(180deg, rgba(11,14,26,.94) 70%, transparent); }
.gk-bib-v3 .gk-lex-chip {
  border: 0; border-radius: 0; background: rgba(255,255,255,.06); color: rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  font: 600 11px Inter; letter-spacing: .06em; padding: 9px 16px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.gk-bib-v3 .gk-lex-chip:hover { background: rgba(255,255,255,.1); color: #F2F4FA; }
.gk-bib-v3 .gk-lex-chip.is-on {
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
  color: #0B0E1A;
}
.gk-bib-v3 .gk-lex-item { border-radius: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); border-color: transparent; }

/* ============================================================================
   FICHES TECHNIQUES (/ressources/{seogi,makgi,chagi,chigi}) — grille de cartes
   Remplace la bande horizontale de la v4 (cartes de 264px qui s'étiraient à
   2090px au clic : illisible, et la photo de référence n'apparaissait pas).
   Ici : une carte = une technique, photo visible, nom + traduction lisibles, et
   la planche se déplie SUR PLACE. Piloté par js/ressources-blueprint.js.
   ========================================================================== */
.gk-res-detail .w-dyn-items.gk-bp-grid {
  display: grid !important; grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
  gap: 14px; padding: 4px 0 10px; overflow: visible;
}
.gk-res-detail .gk-bp-grid .collection-item {
  position: relative; width: auto; height: auto; cursor: pointer;
  background: linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.026));
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  transition: background .2s ease;
}
.gk-res-detail .gk-bp-grid .collection-item:hover { background: linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.05)); }
/* une carte ouverte prend toute la largeur de la grille et se déplie */
.gk-res-detail .gk-bp-grid .collection-item.is-open { grid-column: 1 / -1; cursor: default; }
.gk-res-detail .gk-bp-grid .collection-item.is-open .details_container,
.gk-res-detail .gk-bp-grid .collection-item.is-open > .reg { display: none !important; }

.gk-res-detail .gk-bp-grid .details_container { display: flex; flex-direction: column; height: 100%; padding: 0; }
/* repère technique en tête de carte */
.gk-res-detail .bp-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px 0; font: 600 8.5px Inter; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.gk-res-detail .bp-top .bp-ref { color: #C8AA6E; font-family: 'Noto Serif KR', serif; letter-spacing: .1em; font-size: 10px; }
/* photo de référence : le visuel principal de la carte.
   ⚠ !important : la classe Webflow .main-img impose sa propre largeur fixe
   (150px) et gagnerait sinon. Les photos source sont carrées (650 × 650),
   d'où le 1/1 : le pratiquant tient entier dans le cadre, sans recadrage. */
.gk-res-detail .gk-bp-grid .details_card { order: 1; position: relative; margin: 10px 0 0; padding: 0; background: none; border: 0; }
.gk-res-detail .gk-bp-grid .details_card .main-img {
  display: block !important; width: 100% !important; max-width: none !important; height: auto !important;
  aspect-ratio: 1 / 1; object-fit: cover; background: #0B1322;
}
.gk-res-detail .gk-bp-grid .details_card .container-bottom { display: none; }
/* nom + traduction */
.gk-res-detail .gk-bp-grid .detais_text { order: 2; padding: 12px 16px 14px; text-align: left; }
.gk-res-detail .gk-bp-grid .techniques_heading {
  margin: 0; font: italic 700 15.5px/1.25 'GT Sectra Display', Georgia, serif; color: #F2F4FA;
}
.gk-res-detail .gk-bp-grid .detais_text .desc,
.gk-res-detail .gk-bp-grid .detais_text .body-s.white._70 {
  margin-top: 4px; font: 500 11.5px/1.45 Inter; color: var(--muted); opacity: 1; text-align: left;
}
.gk-res-detail .bp-open {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font: 600 9.5px Inter; letter-spacing: .14em; text-transform: uppercase; color: #C8AA6E;
}
.gk-res-detail .gk-bp-grid .collection-item:hover .bp-open { color: #F0E6D2; }
/* schéma des appuis : vignette d'angle, pas un grand cadre vide */
.gk-res-detail .gk-bp-grid .details_foot {
  order: 0; position: absolute; right: 10px; top: 32px; z-index: 2;
  width: 52px; height: 52px; padding: 5px; display: grid !important; place-items: center;
  background: rgba(10,15,28,.85);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.gk-res-detail .gk-bp-grid .details_foot .bp-footlab { display: none; }
.gk-res-detail .gk-bp-grid .details_foot_image {
  display: block !important; width: auto !important; max-width: 100% !important;
  max-height: 100%; height: auto !important;
  filter: invert(1) hue-rotate(180deg) saturate(1.3);
}
/* petits repères d'angle (chrome blueprint conservé) */
.gk-res-detail .gk-bp-grid .reg { position: absolute; width: 9px; height: 9px; border: 1px solid rgba(200,170,110,.4); z-index: 3; }
.gk-res-detail .gk-bp-grid .reg-tl { top: 6px; left: 20px; border-right: 0; border-bottom: 0; }
.gk-res-detail .gk-bp-grid .reg-tr { top: 6px; right: 20px; border-left: 0; border-bottom: 0; }
.gk-res-detail .gk-bp-grid .reg-bl { bottom: 6px; left: 20px; border-right: 0; border-top: 0; }
.gk-res-detail .gk-bp-grid .reg-br { bottom: 6px; right: 20px; border-left: 0; border-top: 0; }

/* ── planche dépliée : uniquement des données réelles (photo, appuis, texte) ── */
.gk-res-detail .bp-planche { position: relative; padding: 22px 26px 24px; }
.gk-res-detail .bp-close {
  position: absolute; top: 14px; right: 18px; z-index: 4; appearance: none; border: 0; cursor: pointer;
  width: 34px; height: 30px; display: grid; place-items: center; font-size: 14px; color: #F2F4FA;
  background: rgba(255,255,255,.09);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.gk-res-detail .bp-close:hover { background: rgba(255,255,255,.18); }
.gk-res-detail .bp-pl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-right: 44px; }
.gk-res-detail .bp-pl-kicker { font: 600 9.5px Inter; letter-spacing: .18em; text-transform: uppercase; color: #C8AA6E; }
.gk-res-detail .bp-pl-kicker em { font-style: normal; font-family: 'Noto Serif KR', serif; letter-spacing: .1em; }
.gk-res-detail .bp-pl-title { margin: 6px 0 0; font: italic 700 clamp(24px,3vw,34px)/1.1 'GT Sectra Display', Georgia, serif; color: #F2F4FA; }
.gk-res-detail .bp-pl-sub { margin: 8px 0 0; font: 400 13.5px/1.7 Inter; color: rgba(255,255,255,.82); max-width: 62ch; }
.gk-res-detail .bp-pl-fig { flex: 0 0 auto; font: 600 9px Inter; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.gk-res-detail .bp-pl-media { display: grid; gap: 14px; margin-top: 20px; }
.gk-res-detail .bp-pl-media.two { grid-template-columns: 1.5fr 1fr; }
.gk-res-detail .bp-pl-media.one { grid-template-columns: minmax(0,560px); }
.gk-res-detail .bp-fr { margin: 0; background: rgba(255,255,255,.04); padding: 12px; }
.gk-res-detail .bp-fr figcaption {
  font: 600 9px Inter; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.gk-res-detail .bp-fr figcaption em { font-style: normal; font-family: 'Noto Serif KR', serif; color: #C8AA6E; }
.gk-res-detail .bp-fr img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.gk-res-detail .bp-fr-foot img { filter: invert(1) hue-rotate(180deg) saturate(1.3); max-height: 300px; }
.gk-res-detail .bp-pl-src { margin: 14px 0 0; font: 500 10.5px Inter; color: var(--muted); }
@media (max-width: 760px) {
  .gk-res-detail .bp-pl-media.two { grid-template-columns: 1fr; }
  .gk-res-detail .bp-planche { padding: 18px 16px 20px; }
}

/* freestyle : le h1/lead de freestyle-live doublonnent l'en-tête v3 → masqués */
.gk-bib-v3 .gk-free-title, .gk-bib-v3 .gk-free-lead { display: none; }
.gk-bib-v3 .gk-free-card { border-radius: 0; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }

/* ── ARBRE 3D (scope .gk-arbre-v3, chrome seulement : iframe intouchée) ──── */
.content.gk-arbre-v3 { display: flex; flex-direction: column; min-height: 100vh; }
.content.gk-arbre-v3 .top_nav .breadcrumb { display: none !important; }
.gk-arbre-v3 .crumb a.home { text-decoration: none; color: inherit; }
.gk-arbre-v3 .gkb-kr { font: 500 15px 'Noto Serif KR', serif; color: var(--muted); }
.gk-arbre-v3 .gkb-head h1.display { font-size: 48px; }
.gk-arbre-v3 .top_nav { min-height: 0; margin: 6px 0 0; padding: 0; }
.gk-arbre-v3 .arbre-filters { padding: 10px 0 0; margin-left: 0; }
.gk-arbre-v3 .arbre-filters .af-label { color: var(--muted); }
.gk-arbre-v3 .arbre-filters .af-chip {
  border: 0; border-radius: 0; background: rgba(255,255,255,.06); color: rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  font: 600 11px Inter; letter-spacing: .06em; padding: 8px 14px;
}
.gk-arbre-v3 .arbre-filters .af-chip:hover { background: rgba(255,255,255,.1); color: #F2F4FA; }
.gk-arbre-v3 .arbre-filters .af-chip.on {
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
  color: #0B0E1A; border-color: transparent;
}
.gk-arbre-v3 .arbre-filters select {
  border-radius: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: #F2F4FA; font: 600 11px Inter; padding: 7px 10px;
}
.gk-arbre-v3 .arbre-filters .af-count { color: var(--muted); }
.gk-arbre-v3 .arbre-stage { flex: 1; min-height: 540px; margin-top: 14px; border-radius: 0; background: #0B0E1A; }

/* ═══ Lexique pleine largeur (demande Jason 24/08) ═══
   ⚠ `.content` est un conteneur FLEX : lever le max-width ne suffisait pas, le
   lexique restait un flex item taillé à son contenu (563 px sur 1250). */
/* La boîte était bien pleine largeur, mais son CONTENU restait rentré de 22 px
   de chaque côté (`padding: 30px 22px 64px`, glass-site.css), jamais annulé
   ici. Le fil d'Ariane et le h1 sont enfants directs de `.content.main` et
   n'ont pas de padding propre : leur bord, c'est celui de `.main`. On annule
   donc l'horizontal et on garde le rythme vertical. */
.gk-lex { max-width: none; flex: 1 1 auto; width: 100%; min-width: 0; padding-left: 0; padding-right: 0; }

/* ═══ Hub Ressources : vignettes en vue grille (les images manquaient) ═══
   ⚠ La vignette était dimensionnée par `aspect-ratio` sur une largeur en
   POURCENTAGE : pendant le calcul de taille intrinsèque la largeur est
   indéfinie, la hauteur l'est donc aussi et la vignette ne contribuait PAS à la
   hauteur de sa rangée. Résultat : toutes les rangées à 12 px et les cartes
   écrasées (audit 24/08). Hauteur EXPLICITE, donc plus d'ambiguïté. */
.rh-list.is-grid .rh-row { padding: 0 14px 13px; overflow: hidden; align-items: stretch; }
.rh-list.is-grid .rh-img { display: block; width: 100%; height: 148px; flex: 0 0 148px; aspect-ratio: auto; background: #0B1322; }
.rh-list.is-grid .rh-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(.92); }
.rh-list.is-grid .rh-img-empty { display: flex; align-items: center; justify-content: center; }
.rh-list.is-grid .rh-img-empty i { font-size: 30px; color: rgba(255,255,255,.22); }
/* l'image sort des marges latérales de la carte, le pied garde les siennes */
.rh-list.is-grid .rh-img { margin: 0 -14px; width: calc(100% + 28px); }
.rh-list.is-grid .rh-nm { padding: 0; display: block; }
.rh-list.is-grid .rh-famtag { margin: 0; white-space: nowrap; }
.rh-list .rh-img { display: none; }  /* la vue liste reste texte seul */

/* ═══ Fiche technique dédiée /technique/<slug> ═══ */
/* Pleine largeur (demande Jason 01/09) : même recette que le lexique ci-dessus,
   `.content` étant un conteneur FLEX, lever le max-width ne suffit pas, il faut
   aussi flex + width sinon la boîte se taille à son contenu. Le padding latéral
   tombe à 0 : le bord de la page, c'est celui de `.main` (comme le fil d'Ariane
   et le h1, enfants directs de `.content`). Le bas est laissé aux 80 px globaux. */
.gk-tech-wrap { max-width: none; flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; padding: 26px 0 0; }
.gk-tech-head { margin-top: 16px; }
.gk-tech-kicker { font: 600 10px "Inter", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #C8AA6E; }
.gk-tech-kicker em { font-style: normal; font-family: "Noto Serif KR", serif; letter-spacing: 0; color: rgba(255,255,255,.5); }
.gk-tech-ttl { display: flex; align-items: flex-start; gap: 16px; }
.gk-tech-ttl h1 { margin: 8px 0 0; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.05; }
/* le cœur va à l'extrême droite de la page, pas collé au titre (demande
   Jason 03/09) : margin-left auto le pousse au bout de la ligne. */
.gk-tech-heart { flex: 0 0 auto; margin-left: auto; margin-top: 18px; border: 0; cursor: pointer; width: 40px; height: 36px;
  display: flex; align-items: center; justify-content: center; font-size: 17px; color: #F2F4FA;
  background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%); }
.gk-tech-heart.is--on { color: #0B0E1A; background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%); }
.gk-tech-ko { display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font-family: "Noto Serif KR", serif; font-size: 19px; color: rgba(255,255,255,.62); }
.gk-tech-audio { border: 0; cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #C8AA6E; background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.gk-tech-audio:hover { color: #F0E6D2; background: rgba(255,255,255,.13); }
.gk-tech-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.gk-tech-badge { font: 600 10px "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75);
  padding: 5px 11px; background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%); }
.gk-tech-badge.v { color: #E8C77E; background: rgba(200,170,110,.14); }
.gk-tech-head .pgflr { margin-top: 18px; }
.gk-tech-desc { max-width: 68ch; font: 500 14.5px/1.7 "Inter", sans-serif; color: rgba(255,255,255,.78); margin: 18px 0 0; }
.gk-tech-sub { display: flex; align-items: baseline; gap: 9px; margin: 30px 0 12px;
  font: italic 700 19px "GT Sectra Display", Georgia, serif; color: #F2F4FA; }
.gk-tech-sub em { font-style: normal; font-family: "Noto Serif KR", serif; font-size: 11px; color: rgba(255,255,255,.4); }
.gk-tech-wrap .bp-pl-media { margin-top: 22px; }
.gk-tech-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.gk-tech-vid { position: relative; border: 0; padding: 0; cursor: pointer; aspect-ratio: 9/16; overflow: hidden;
  background: #0B1322; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.gk-tech-vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); transition: filter .2s; }
.gk-tech-vid:hover img { filter: brightness(1); }
.gk-tech-vid .pl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #F2F4FA; font-size: 22px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.gk-tech-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gk-tech-vid.is-playing .pl { display: none; }

.gk-free-wrap { max-width: none; }
.gk-free-card { display: block; }

/* fiche technique : l'image de référence ne doit pas manger un écran entier */
.gk-tech-wrap .bp-pl-media img { max-height: 62vh; object-fit: contain; }
.gk-tech-wrap .bp-pl-media.one { max-width: 620px; }


/* Rail alphabétique : cible tactile utilisable au doigt (6,6 × 11 px avant) */
@media (max-width: 860px) {
  .rh-rail { width: auto; }
  .rh-rail .rh-l { min-width: 26px; min-height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
}

/* ── Lexique : six mots par ligne ────────────────────────────────────────────
   La boîte prenait déjà toute la largeur, mais la grille restait sur un
   minimum de 210 px par carte (glass-site.css) : 4 à 5 colonnes seulement,
   et beaucoup de vide dans chaque carte. Nombre de colonnes FIXE plutôt
   qu'auto-fill, pour que ce soit six et pas « ça dépend » (Jason 25/08). */
.gk-lex .gk-lex-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1240px) { .gk-lex .gk-lex-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1040px) { .gk-lex .gk-lex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .gk-lex .gk-lex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .gk-lex .gk-lex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══════════════════════════════════════════════════════════════════════════
   FICHE TECHNIQUE — mise en page « Planche » (validée par Jason le 31/08) :
   caisson d'images + cartes Résumé/Description/Exécution façon fiche poomsae.
   ═══════════════════════════════════════════════════════════════════════ */
[data-gk-technique] .tkp-head .gk-tech-ttl { align-items: center; }
[data-gk-technique] .tkp-duo {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 14px; margin-top: 22px; align-items: start;
}
/* la carte CardV3 de l'app (recette de v3-fiche.css : base #151A2B 55 %,
   verre 125°, filet 135° en masque, équerres .gkco) */
[data-gk-technique] .tkp-card, [data-gk-technique] .tkp-media {
  position: relative; isolation: isolate;
  background-color: rgba(21,26,43,.55);
  background-image: linear-gradient(125deg,rgba(255,255,255,.10),rgba(255,255,255,.04) 46%,rgba(255,255,255,.06));
}
[data-gk-technique] .tkp-card::before, [data-gk-technique] .tkp-media::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.10) 40%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.24));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
[data-gk-technique] .tkp-card { padding: 4px 24px 22px; }
[data-gk-technique] .tkp-card .hx { margin: 18px 0 14px; }
[data-gk-technique] .tkp-media { padding: 18px; display: grid; gap: 14px; align-content: start; }
[data-gk-technique] .tkp-media.two { grid-template-columns: 1fr 1fr; }
[data-gk-technique] .tkp-fig { margin: 0; }
[data-gk-technique] .tkp-fig img { display: block; width: 100%; height: auto; background: #0B1322; }
[data-gk-technique] .tkp-fig figcaption {
  margin-top: 8px; font: 700 8.5px Inter, sans-serif; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
[data-gk-technique] .tkp-noimg {
  display: grid; place-items: center; gap: 8px; padding: 46px 0;
  font: 500 12px Inter, sans-serif; color: rgba(255,255,255,.4);
}
[data-gk-technique] .tkp-noimg i { font-size: 40px; color: rgba(255,255,255,.25); }
[data-gk-technique] .tkp-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
[data-gk-technique] .tkr {
  display: flex; align-items: baseline; gap: 14px; justify-content: space-between;
  padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.07);
}
[data-gk-technique] .tkr:last-child { border-bottom: 0; }
[data-gk-technique] .tkr span { flex: 0 1 auto; font: 500 12px Inter, sans-serif; color: #8A93AD; }
[data-gk-technique] .tkr b { flex: 0 1 auto; text-align: right; font: 600 13px Inter, sans-serif; color: #F2F4FA; }
[data-gk-technique] .tkr b a { color: #C8AA6E; text-decoration: none; }
[data-gk-technique] .tkr b a:hover { color: #F2F4FA; }
[data-gk-technique] .tkp-txt { margin: 0; font: 400 13.5px/1.72 Inter, sans-serif; color: rgba(255,255,255,.82); }
/* la carte « Qu'est-ce qu'un… ? » et sa ligne des graphies (SEO, 14/09) : la
   réponse est un texte comme un autre, les graphies une note en dessous */
[data-gk-technique] .gk-tech-alt { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.6); overflow-wrap: anywhere; }
[data-gk-technique] .gk-tech-alt b { color: var(--rc-gold, #C8AA6E); font-weight: 600; }
[data-gk-technique] .tkp-steps { margin: 0; padding: 0; list-style: none; counter-reset: tkstep; }
[data-gk-technique] .tkp-steps li {
  position: relative; display: flex; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); counter-increment: tkstep;
}
[data-gk-technique] .tkp-steps li:last-child { border-bottom: 0; }
[data-gk-technique] .tkp-steps li::before {
  content: counter(tkstep); flex: 0 0 26px; text-align: center; padding: 3px 0;
  font: 800 italic 11px 'Inter Tight', Inter, sans-serif; color: #E8C77E;
  background: rgba(200,170,110,.14);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}
@media (max-width: 991px) {
  [data-gk-technique] .tkp-duo { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Pages /ressources/<famille> en LISTE (retour Jason 01/09 : la planche
   blueprint « FIG.04 + équerres » ne ressemblait pas au reste du site).
   La source reste dans le DOM (données live + logique de clic), masquée.
   Deux propositions en revue, cf. js/ressources-liste.js.
   ═══════════════════════════════════════════════════════════════════════ */
.gk-rl-on .gk-res-detail { display: none; }
.gk-rl { text-align: left; }
.gk-rl .hxt { margin: 34px 0 14px; }
.gk-rl .hxt:first-of-type { margin-top: 22px; }

.gk-rl .rl-props { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; flex-wrap: wrap; }
.gk-rl .rl-props span {
  font: 700 8.5px Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: #8A93AD; margin-right: 4px;
}
.gk-rl .rl-props button {
  padding: 7px 14px; border: 0; cursor: pointer;
  font: 600 11.5px Inter, sans-serif; color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
}
.gk-rl .rl-props button:hover { color: #fff; background: rgba(255,255,255,.1); }
.gk-rl .rl-props button.on {
  color: #0B0E1A; box-shadow: none;
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
}

/* ── A · Rangées illustrées ── */
.gk-rl .rl-list { display: flex; flex-direction: column; }
.gk-rl .rl-row {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 11px 8px; border: 0; background: none; cursor: pointer; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.gk-rl .rl-row:hover { background: rgba(255,255,255,.035); }
.gk-rl .rl-row .th {
  flex: 0 0 auto; width: 58px; height: 50px; overflow: hidden; background: rgba(255,255,255,.05);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.gk-rl .rl-row .th img { width: 100%; height: 100%; object-fit: cover; }
.gk-rl .rl-row .tx { flex: 1 1 auto; min-width: 0; }
.gk-rl .rl-row .tx b {
  display: block; font: italic 700 16px 'GT Sectra Display', Georgia, serif; color: #F2EEE4;
}
.gk-rl .rl-row .tx span {
  display: block; margin-top: 3px; font: 400 12.5px/1.5 Inter, sans-serif; color: rgba(255,255,255,.55);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.gk-rl .rl-row .ko {
  flex: 0 0 auto; font: 500 13px 'Noto Serif KR', serif; font-style: normal; color: rgba(255,255,255,.45);
}
.gk-rl .rl-row .ap { flex: 0 0 auto; width: 44px; height: 44px; opacity: .75; }
.gk-rl .rl-row .ap img {
  width: 100%; height: 100%; object-fit: contain;
  filter: invert(1) hue-rotate(180deg) saturate(1.35);
}
.gk-rl .rl-row i { flex: 0 0 auto; font-size: 14px; color: rgba(255,255,255,.35); }
.gk-rl .rl-row:hover i { color: #C8AA6E; }

/* ── B · Index typographique ── */
.gk-rl .rl-index { display: flex; flex-direction: column; }
.gk-rl .rl-ix {
  display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(90px, .5fr) minmax(0, 2fr) 16px;
  align-items: baseline; gap: 18px; width: 100%;
  padding: 10px 8px; border: 0; background: none; cursor: pointer; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.gk-rl .rl-ix:hover { background: rgba(255,255,255,.035); }
.gk-rl .rl-ix b { font: 600 14px Inter, sans-serif; color: #F2F4FA; }
.gk-rl .rl-ix em {
  font: 500 12.5px 'Noto Serif KR', serif; font-style: normal; color: rgba(255,255,255,.42);
}
.gk-rl .rl-ix span {
  font: 400 12.5px/1.5 Inter, sans-serif; color: rgba(255,255,255,.5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gk-rl .rl-ix i { font-size: 13px; color: rgba(255,255,255,.3); }
.gk-rl .rl-ix:hover i { color: #C8AA6E; }

@media (max-width: 760px) {
  .gk-rl .rl-row .ap, .gk-rl .rl-row .ko { display: none; }
  .gk-rl .rl-ix { grid-template-columns: 1fr auto; }
  .gk-rl .rl-ix span { display: none; }
}

/* ── /ressources : section « Histoire du taekwondo » (Jason 01/09) ───────────
   Les 4 articles de fond, les mêmes que dans l'app (le texte vit dans les
   locales, 11 langues). Le catalogue est js/gk-articles.js, partagé avec la
   Home : aucune liste recopiée ici. Les cartes .hvb-art viennent de
   css/home-vars.css, que la page Ressources ne chargeait pas. */
.rh-arts { display: block; margin-top: 8px; }
.rh-arts .hxt { margin: 40px 0 10px; }
.rh-arts-sub {
  margin: 0 0 18px; max-width: 70ch;
  font: 400 13px/1.6 Inter, sans-serif; color: rgba(255,255,255,.55);
}

/* ══ PAGE PLEINE 3D ═════════════════════════════════════════════════════════
   La recette de /arbre (Jason 24/08 : « la 3D prend 100 % de la page, le titre
   est DEDANS »), sortie ici pour que /corps la partage au lieu de la recopier.
   La scène est en absolu sur toute la surface de .content ; le titre flotte
   par-dessus, sur un voile dégradé qui garde le texte lisible sans masquer la
   scène. /arbre porte .gk-plein3d et .stage3d en plus de ses propres classes
   (ses sélecteurs JS lisent encore .arbre-stage). */
.gk-plein3d { position: relative; padding: 0 !important; overflow: hidden; }
.gk-plein3d .stage3d {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 0; overflow: hidden; background: #0F0D0B;
  margin: 0 !important; box-shadow: none;
}
.gk-plein3d .pl-over {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  padding: 22px 26px 30px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,11,20,.92) 0%, rgba(8,11,20,.72) 46%, rgba(8,11,20,0) 100%);
}
.gk-plein3d .pl-over > * { pointer-events: auto; }

/* ── /corps : « Le corps », vocabulaire 3D embarqué (Jason 01/09) ────────────
   L'outil vit dans le backoffice (/public/corps-3d) et est embarqué en iframe,
   comme l'UI kit : une seule source, aucune copie à maintenir ici.
   Page PLEINE depuis le 03/09, comme /arbre. */
.gk-corps-sub {
  margin: 6px 0 0; max-width: 70ch;
  font: 400 13.5px/1.65 Inter, sans-serif; color: rgba(255,255,255,.66);
}
.gk-corps-v3 .crumb { margin-bottom: 10px; }
/* le bandeau s'arrête AVANT le panneau de vocabulaire du cadre (320 px à droite) */
.gk-corps-v3 .pl-over { right: 340px; }
@media (max-width: 900px) { .gk-corps-v3 .pl-over { right: 0; } }
.gk-corps-v3 .gkf-head { margin-top: 0; }
.gk-corps-v3 .gkf-head h1.display { font-size: clamp(26px, 3.4vw, 38px); margin: 0; }
.gk-corps-frame { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 720px) { .gk-corps-sub { display: none; } }

/* ── Résumé posé dans le HTML des pages /technique/<slug> ───────────────────
   Les 310 fiches sont prégénérées (scripts/seo/gen-technique-pages.mjs) : elles
   portent leur nom, leur hangeul et leur description DANS le HTML, sans attendre
   le JavaScript. technique-fiche.js remplace ce bloc par la fiche complète ;
   ces règles servent la fraction de seconde d'avant, et le cas sans JS. */
/* Le résumé prend désormais EXACTEMENT la forme de la fiche finale (en-tête,
   caisson d'images, cartes) : la page ne s'affiche plus en texte nu avant de
   « s'adapter » quand le catalogue répond (retour Jason 03/09). Ce qui n'est
   pas encore connu est posé en squelette, comme dans l'app. */
.gk-tech-ssr { padding: 0; }
.gk-tech-ssr .gk-tech-kick { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gk-tech-ssr .gk-tech-fam { margin: 0; font: 700 9px Inter, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.45); }
.gk-tech-ssr .gk-tech-trad { margin: 0; font: 500 13px Inter, sans-serif; color: #C8AA6E; }

/* ── Squelette de chargement ────────────────────────────────────────────────
   Même principe que components/ui/Skeleton.tsx de l'app : bloc en verre + un
   reflet qui le traverse. Angles nets : la charte v3 n'a aucun arrondi. */
.gk-skel {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.gk-skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.11) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: gk-skel-passe 1.5s ease-in-out infinite;
}
@keyframes gk-skel-passe { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .gk-skel::after { animation: none; } }
.gk-tech-ssr .gk-skel-media { min-height: 320px; }
.gk-tech-ssr .gk-skel-lignes { display: flex; flex-direction: column; gap: 11px; }
.gk-tech-ssr .gk-skel-lignes .gk-skel { height: 13px; }
.gk-tech-ssr .gk-skel-lignes .gk-skel:nth-child(2) { width: 76%; }
.gk-tech-ssr .gk-skel-lignes .gk-skel:nth-child(3) { width: 58%; }

/* Filigrane : le hangeul du nom passe DERRIÈRE le titre (Jason 03/09). Il
   n'occupe plus de ligne à lui, il ne se lit plus comme une seconde étiquette,
   mais il est toujours là pour qui le cherche. */
[data-gk-technique] .gk-tech-ttl { position: relative; }
[data-gk-technique] .gk-tech-ttl > *:not(.tkp-ko) { position: relative; z-index: 1; }
[data-gk-technique] .tkp-ko {
  position: absolute; right: 0; top: 50%; z-index: 0;
  transform: translateY(-50%);
  margin: 0; pointer-events: none; -webkit-user-select: none; user-select: none;
  font: 400 clamp(48px, 7.5vw, 92px)/1 'Noto Serif KR', serif; font-style: normal;
  letter-spacing: .04em; white-space: nowrap;
  color: rgba(255,255,255,.085);
}
@media (max-width: 720px) { [data-gk-technique] .tkp-ko { display: none; } }


/* ── Ressources, colonne droite (retours Jason 02/09) ────────────────────────
   1) les articles sur DEUX colonnes (ils étaient trop petits à quatre) ;
   2) les items d'Explorer prennent la FORME des cartes d'article (.hvb-art) :
      liseré doré d'1 px, panneau #0E1424, coins coupés à 20 px, liseré qui
      s'allume au survol. Plus d'hexagone pour eux. */
.rh-right .rh-arts .hvb-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rh-right .rh-tile.hxring {
  --hxc: transparent; --hxfill: #0E1424;
  padding: 17px 19px; aspect-ratio: 1.5;
  background: linear-gradient(150deg, rgba(200,170,110,.55), rgba(255,255,255,.16) 42%, rgba(200,170,110,.28));
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  transition: background .18s; }
.rh-right .rh-tile.hxring::before {
  inset: 1px; background: #0E1424;
  clip-path: polygon(19px 0, 100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%, 0 19px); }
.rh-right .rh-tile.hxring > img { inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px);
  clip-path: polygon(19px 0, 100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%, 0 19px); }
.rh-right a.rh-tile.hxring:hover { filter: none; background: linear-gradient(150deg, #F7EFDC, #C8AA6E 45%, #8A6A2F); }
.rh-right .rh-tile.is--soon { --hxc: transparent; background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); }

/* ── Coréen : le nom affiché est le hangeul (règle de l'app) ────────────────
   ressources-hub.js, ressources-liste.js et freestyle-live.js posent le hangeul
   à la place du romanisé quand la langue est le coréen. Les fontes du site
   (GT Sectra Display, en italique) n'ont aucun glyphe coréen : sans ces règles,
   le hangeul tombe sur une fonte système faussement penchée. Rien ne bouge dans
   les autres langues. */
html[lang="ko"] .rh-nm b,
html[lang="ko"] .rh-list.is-grid .rh-nm b,
html[lang="ko"] .gk-rl .rl-row .tx b {
  font-family: 'Noto Serif KR', serif; font-style: normal;
}
/* Freestyle : le hangeul EST le nom, la ligne qui le portait au-dessus a
   disparu ; il en reprend la taille et l'or. */
html[lang="ko"] .gk-free-nm {
  margin-top: 0; font-family: 'Noto Serif KR', serif; font-size: 19px;
  color: var(--gk-amber, #C8AA6E);
}

/* ── Explorer : cinq portes, la dernière en bandeau ─────────────────────────
   Chaque tuile porte désormais une image de CE qu'elle ouvre : le mannequin
   3D pour le corps, l'arbre pour le répertoire, les cartes du lexique, le
   palais de la page Découvrir (demande Jason 03/09). Cinq tuiles sur deux
   colonnes laissent une orpheline : « Règles & arbitrage », qui n'existe pas
   encore, prend toute la largeur en bandeau plutôt que la moitié d'une ligne. */
.rh-right .rh-tile.is--wide { grid-column: 1 / -1; aspect-ratio: 3.2; }
/* la tuile éteinte garde son image, mais très en retrait : elle annonce, elle
   n'invite pas (le reste du bandeau « Bientôt » ne bouge pas) */
.rh-right .rh-tile.is--soon > img { filter: brightness(.28) grayscale(.45); }

/* Voile de lecture. Les cinq images n'ont pas la même densité : le mannequin
   3D est sur fond noir, le palais de Découvrir est un plein jour. Un simple
   assombrissement global rendait les unes illisibles et les autres ternes. On
   éclaircit donc l'image et on assoit le titre sur un dégradé, en bas, où il
   se trouve. Le voile passe SOUS le texte (z-index), sinon le ::after, dernier
   enfant, le recouvrirait. */
.rh-right .rh-tile.hxring > img { filter: brightness(.62); }
.rh-right .rh-tile.hxring::after {
  content: ''; position: absolute; inset: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11,14,26,.94) 0, rgba(11,14,26,.6) 45%, rgba(11,14,26,.1) 100%);
  clip-path: polygon(19px 0, 100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%, 0 19px);
}
.rh-right .rh-tile.hxring > i,
.rh-right .rh-tile.hxring > b,
.rh-right .rh-tile.hxring > span { z-index: 1; }


/* ═══ Vue GRILLE du hub Ressources : la carte en rectangle biseauté ════════
   Demandé par Jason le 12/09. La carte était un HEXAGONE : les deux pointes
   latérales mordaient sur l'image, et une vignette carrée dans une pointe se
   lit mal. Elle devient un rectangle aux quatre coins coupés, ce qui garde la
   charte (aucun arrondi, jamais) sans rogner le sujet de la photo.

   La carte est UN SEUL bloc : l'image en 1:1 en haut, le nom juste dessous,
   tous les deux dans le même <a>. L'image touche les trois bords, seul le pied
   garde de l'air. C'est ce qui fait lire l'ensemble comme une vignette et pas
   comme une photo posée dans un cadre.

   ⚠ Le biseau est une VALEUR PARTAGÉE : il sert au clip de la carte et au
     calcul du retrait du pied. Une seule variable, sinon les deux dérivent. */

/* LA FORME DES CARTES D'ARTICLE DE L'APPLICATION : UN OCTOGONE.
   Les QUATRE coins sont coupés en diagonale, pas deux. Recette reprise telle
   quelle de `components/ui/hex/geometry.ts` (fonction `chamferPoints`) et de
   l'appel des cartes d'article de l'accueil, `components/DiscoverTkdContent.tsx`
   l. 74 : `chanfrein: 12`. La coupe y est FIXE, 12 px, jamais proportionnelle :
   c'est l'argument même du chanfrein contre l'hexagone, l'angle reste le même
   quelle que soit la hauteur de la carte.

   ⚠ Ne pas confondre avec les DEUX autres formes biseautées de la maison :
     · deux coins coupés (haut gauche, bas droite) : les articles, les pages,
       et les cartes « Explorer » plus bas sur cette page ;
     · hexagone à pointes latérales : les puces, les boutons, les médaillons.
   Ici c'est bien l'octogone de l'app. */
.rh-list.is-grid .rh-row {
  --rh-bis: 12px;
  clip-path: polygon(
    0 var(--rh-bis), var(--rh-bis) 0,
    calc(100% - var(--rh-bis)) 0, 100% var(--rh-bis),
    100% calc(100% - var(--rh-bis)), calc(100% - var(--rh-bis)) 100%,
    var(--rh-bis) 100%, 0 calc(100% - var(--rh-bis)));
  padding: 0 0 12px;
  row-gap: 9px;
  /* La carte porte son propre fond, pour se détacher de la page : blanc à 10 %
     (demande Jason 13/09). C'est la div MÈRE, celle qui tient la vignette ET le
     nom de la technique. */
  background: rgba(255, 255, 255, .10);
}
.rh-list.is-grid .rh-row:hover { background: rgba(255, 255, 255, .16); }

/* L'IMAGE EN 1:1.
   ⚠ La hauteur était FIXE (148 px) pour contourner un vieux piège : une
     `aspect-ratio` sur une largeur en pourcentage ne contribue pas à la hauteur
     intrinsèque de la rangée, et toutes les cartes s'écrasaient (audit 24/08).
     Ce piège ne vaut plus ici : en grille, la piste `minmax(190px, 1fr)` donne
     une largeur DÉFINIE à la carte, donc le carré se résout. Vérifié à l'écran
     à 190, 240 et 320 px de colonne. */
.rh-list.is-grid .rh-img {
  margin: 0; width: 100%; height: auto; flex: none;
  aspect-ratio: 1 / 1;
  /* ⚠ la rangée est en `align-items: stretch` : sans ça, une carte dont le nom
     tient sur DEUX lignes étire sa vignette de quelques pixels et le carré
     n'en est plus un. Mesuré : 219 × 228 au lieu de 219 × 219. */
  align-self: start;
}
.rh-list.is-grid .rh-img img { object-position: center; }

/* le pied reprend les marges que la carte n'a plus */
.rh-list.is-grid .rh-nm,
.rh-list.is-grid .rh-famtag { padding-inline: 13px; }
.rh-list.is-grid .rh-famtag { padding-right: 13px; }

/* le losange de niveau se pose hors du coin coupé */
.rh-list.is-grid .rh-dot { top: 11px; right: 11px; }