/* ============================================================================
   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; }
.rh-dot { width: 7px; height: 7px; flex: 0 0 7px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.rh-row.is-seen .rh-dot { box-shadow: none; background: linear-gradient(180deg,#F0E6D2,#C8AA6E 45%,#785A28); }
.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; }
.gk-tech-heart { flex: 0 0 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-ko {
  font: 500 17px 'Noto Serif KR', serif; font-style: normal;
  letter-spacing: .06em; margin-left: 10px; color: rgba(255,255,255,.5);
}
[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); }
[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; }
}