/* ============================================================================
   v3-grades.css : V2 refonte « Hextech Or » : pages Grade (keup) + parcours.
   Chargé APRÈS glass-site.css et hextech-or.css, UNIQUEMENT sur :
   - les 9 hubs keup/keup-XtoY.html (+ leurs 6 sous-pages générées chacune)
   - parcours.html
   Généré/branché par scripts/gen-keup-v3.mjs (keup) ; parcours édité à la main.
   Scopes : .v3k = pages keup (le div .content porte content mhero v3k),
            .v3pc = parcours.  Règles charte : aucun arrondi, or satin unique,
   hiérarchie par opacités de blanc, rouge réservé ceintures/gemmes.
   ========================================================================== */

/* ── commun : liens de fil d'ariane ── */
.v3k .crumb a, .v3pc .crumb a { color: inherit; text-decoration: none; }
.v3k .crumb a:hover, .v3pc .crumb a:hover { color: #fff; }

/* ============================================================================
   PAGES KEUP (.v3k) : en-tête v3 injecté au-dessus du contenu Webflow
   ========================================================================== */

/* chrome legacy remplacé par l'en-tête v3 (le contenu des panes reste intact) */
.v3k .top_nav { display: none; }
.v3k .tabs-menu { display: none; }
.v3k .warning_container { display: none; }           /* remplacé par .warn */
.v3k .intro_badge_container-keup { display: none; }  /* remplacé par eyebrow + gemme */

/* bloc titre : barre ceinture + eyebrow gemme + h1 + fleuron */
.v3k .khead { display: flex; align-items: flex-end; gap: 18px; margin-top: 18px; }
.v3k .kbar { flex: 0 0 10px; width: 10px; height: 56px; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.v3k .keyebrow { display: flex; align-items: center; gap: 9px;
  font: 600 10.5px Inter; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.78); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.v3k .kgem { flex: 0 0 11px; width: 11px; height: 11px; transform: rotate(45deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px rgba(255,255,255,.22), 0 0 8px rgba(0,0,0,.4); }
.v3k h1.display { font-size: 56px; line-height: 1.05; margin: 4px 0 0; }

/* les onglets .wtabs naviguent (liens) : mêmes recettes que hextech-or */
.v3k .wtabs a.wtab { text-decoration: none; }
.v3k .wtabs + .warn { margin-top: 20px; }
.v3k .tabs-container { margin-top: 10px; }

/* ============================================================================
   CONTENU DES ONGLETS — il était resté au gabarit Webflow d'origine (grilles
   figées, titres « Résumé : », lignes sans cadre) : seul l'en-tête avait reçu
   la charte v3. Le contenu vient d'Airtable et est écrit par keup-live.js /
   keup-v3.js dans ces nœuds : on ne touche donc QUE l'habillage, en CSS, avec
   les mêmes recettes que la fiche poomsae (titre en pavé, lignes clé/valeur).
   ========================================================================== */
/* les grilles Webflow des panes redeviennent des blocs qui s'empilent */
.v3k .w-tab-pane .introduction_container,
.v3k .w-tab-pane .grid_overview,
.v3k .w-tab-pane .left_introduction {
  display: block !important; height: auto !important; overflow: visible !important;
  grid-template-columns: none !important; margin: 0; padding: 0; width: auto;
}
.v3k .w-tab-pane { padding-bottom: 4px; }

/* titres de section (h2 « Résumé : », h3 Kibon) → pavé hexagonal de la charte.
   Le « : » final vient d'Airtable/Webflow, il est masqué par un pseudo-élément
   plutôt que retiré du texte (sinon on casserait les clés de traduction). */
.v3k .w-tab-pane h2.heading_2,
.v3k .w-tab-pane h3.kibon_title {
  position: relative; isolation: isolate; display: inline-flex; width: fit-content;
  /* ⚠ LE « grand trait blanc » : la feuille Webflow pose un
     `border-bottom: 6px solid #fff` sur .heading_2 (le soulignement de la
     maquette d'origine). Le ::before du contour, lui, part de la boîte de
     PADDING : il ne recouvre donc jamais ce bord, et les 6 px de blanc
     restaient en travers du bas de la pastille (retour Jason 25/08, onglet
     Résumé et « Poomsae Exécution »). */
  border: 0;
  margin: 22px 0 12px; padding: 10px 28px;
  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;
}
.v3k .w-tab-pane h2.heading_2::before,
.v3k .w-tab-pane h3.kibon_title::before {
  /* L'intérieur était rentré deux fois (boîte à 1,3 px PUIS polygone à 1-1,5 px) :
     aux deux pointes le trait blanc atteignait 3 px et mangeait le titre. Un
     seul pixel de retrait, et le chanfrein réduit de 16 à 15,2 px pour que les
     diagonales restent parallèles (retour Jason 24/08). */
  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;
}
.v3k .w-tab-pane .intro_content_text h2.heading_2:first-child { margin-top: 6px; }

/* le bloc de lignes devient une carte, chaque ligne une paire clé / valeur.
   RECTANGLE net, aucun biseau : le chanfrein hexagonal reste réservé aux
   boutons et aux puces. Posé sur une LISTE, il devient illisible : l'onglet
   Théorie de keup 2→1 fait 142 lignes, soit 449 px de large sur 8 879 px de
   haut, et les deux pointes tombent à mi-hauteur, environ 4 440 px sous le
   haut de la carte. On ne lit plus un hexagone, on lit un ruban tordu qui
   rogne les premières et les dernières lignes (retour Jason 25/08).
   Le clip-path parti, le filet de contour redevient permis (la règle maison
   interdit un contour SUR un clip-path, pas ailleurs) : 1 px en inset. */
.v3k .w-tab-pane .keup_overview_collection {
  position: relative; isolation: isolate;              /* accueille les équerres d'angle (.gkco, hextech-or.css) */
  padding: 2px 20px; margin-bottom: 20px; border-radius: 0;
  /* la carte de l'app (CardV3) : une base opaque SOUS le verre, sinon le
     tableau se dilue dans la photo du héros et se lit à peine */
  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));
}
.v3k .w-tab-pane .keup_overview_collection::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;
}
.v3k .w-tab-pane .flex-h.space_between.intro,
.v3k .w-tab-pane .w-dyn-item > .flex-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.08); margin: 0;
}
.v3k .w-tab-pane .w-dyn-item:last-child .flex-h { border-bottom: 0; }
/* ⚠ opacity:1 : la classe Webflow ._70 pose opacity:.7, ce qui s'ajoutait au
   gris déjà atténué du libellé (#8A93AD × 0,7) → texte quasi illisible. La
   hiérarchie est portée par la couleur, pas par l'opacité. */
.v3k .w-tab-pane .flex-h .body-s.white._70 { flex: 0 1 auto; font: 500 12px Inter; color: var(--muted); opacity: 1; }
.v3k .w-tab-pane .flex-h .body-s.white { flex: 0 1 auto; text-align: right; font: 600 13px Inter; color: #F2F4FA; }
/* lignes à une seule cellule (théorie, notation, exécution) : pleine largeur */
.v3k .w-tab-pane .w-dyn-item .flex-h > .body-s:only-child { flex: 1; text-align: left; font: 400 13.5px/1.7 Inter; color: rgba(255,255,255,.85); }
/* état vide propre plutôt qu'une carte fantôme */
.v3k .w-tab-pane .w-dyn-empty { padding: 16px 0; font: 500 12.5px Inter; color: var(--muted); background: none; }

/* galerie vidéos des SOUS-PAGES (copie des règles injectées par keup-videos.js,
   qui ne tourne pas hors des hubs ; mêmes classes .kv-*, posées par keup-v3.js) */
.v3k .kv-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 0 0 22px; width: 100%; }
.v3k .kv-vid { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v3k .kv-play { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0;
  overflow: hidden; cursor: pointer; background: #0b0f14;
  clip-path: polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%); }
.v3k .kv-play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; transition: opacity .2s ease; }
.v3k .kv-play:hover img { opacity: 1; }
.v3k .kv-pbtn { position: absolute; left: 50%; top: 50%; width: 50px; height: 40px; transform: translate(-50%,-50%);
  background: rgba(10,15,28,.65); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  clip-path: polygon(11px 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,11px 100%,0 50%); }
.v3k .kv-pbtn::after { content: ""; position: absolute; left: 53%; top: 50%; transform: translate(-50%,-50%);
  border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.v3k .kv-vid figcaption { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.72);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3k .kv-frame { width: 100%; aspect-ratio: 16/9; border: 0; display: block; background: #000;
  clip-path: polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%); }
@media (max-width: 820px) { .v3k .kv-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .v3k .kv-gallery { grid-template-columns: 1fr; } }

@media (max-width: 767px) {
  .v3k h1.display { font-size: 38px; }
  .v3k .kbar { height: 44px; }
  .v3k .wtabs { max-width: 100%; overflow-x: auto; }
  /* Pavés de titre : à 15 px et chanfrein 16 px, les longs libellés passaient
     sur 2 à 4 lignes (58, 77 et 96 px de haut mesurés à 375 px de large) et
     les pointes devenaient quasi verticales. On descend typo et chanfrein
     plutôt que d'interdire le retour à la ligne — `white-space: nowrap` a été
     écarté : les titres sont traduits à la volée par gk-i18n, et un libellé
     espagnol ou russe plus long déborderait sans possibilité de se replier.
     H = 9 + 9 + 15 = 33 px, a = 16,5, chanfrein 12 px → chanfrein intérieur
     12 × (1 − 1/16,5) = 11,3 px. */
  .v3k .w-tab-pane h2.heading_2,
  .v3k .w-tab-pane h3.kibon_title {
    margin: 18px 0 10px; padding: 9px 18px; font-size: 12.5px;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  }
  .v3k .w-tab-pane h2.heading_2::before,
  .v3k .w-tab-pane h3.kibon_title::before {
    clip-path: polygon(11.3px 0, calc(100% - 11.3px) 0, 100% 50%, calc(100% - 11.3px) 100%, 11.3px 100%, 0 50%);
  }
}

/* ============================================================================
   PARCOURS (.v3pc) : restyle v3 des blocs .gk-dk-* (textes FR inchangés)
   ========================================================================== */

.v3pc .gk-dk-wrap { max-width: 980px; padding-top: 26px; }

/* héros */
.v3pc .v3pc-head { margin-top: 20px; max-width: 660px; }
.v3pc .v3pc-kk { font: 500 15px 'Noto Serif KR', serif; color: rgba(255,255,255,.8);
  text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.v3pc .gk-dk-hero { font: italic 700 clamp(32px, 4.6vw, 44px)/1.08 'GT Sectra Display', Georgia, serif;
  margin: 6px 0 0; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.v3pc .v3pc-head .pgflr { margin: 12px 0 14px; }
.v3pc .gk-dk-lead { color: rgba(255,255,255,.82); }

/* bandeau 5 chiffres (façon lpnum) */
.v3pc .gk-dk-stats { grid-template-columns: repeat(5,1fr); gap: 12px; margin-top: 26px; }
.v3pc .gk-dk-stat { border: 0; border-radius: 0; padding: 16px 8px 13px;
  background: rgba(12,16,30,.55); backdrop-filter: blur(10px);
  box-shadow: inset 0 1.4px 0 rgba(255,255,255,.28), inset 0 -1.4px 0 rgba(255,255,255,.08);
  clip-path: polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%); }
.v3pc .gk-dk-stat-n { font: italic 700 30px 'GT Sectra Display', Georgia, serif; color: #F2F4FA; }
.v3pc .gk-dk-stat-l { font: 600 9.5px Inter; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gk-muted); margin-top: 6px; }

/* titres de section */
.v3pc .gk-dk-h2 { font: italic 700 26px/1.2 'GT Sectra Display', Georgia, serif; }

/* cartes « Les grades » + note FFTDA : hexagones satin */
.v3pc .gk-dk-card { border: 0; border-radius: 0; padding: 18px 22px;
  background: linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  box-shadow: inset 0 1.4px 0 rgba(255,255,255,.26), inset 0 -1.4px 0 rgba(255,255,255,.08);
  clip-path: polygon(15px 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,15px 100%,0 50%); }
.v3pc .gk-dk-card-t { font: 600 9.5px Inter; letter-spacing: .18em; text-transform: uppercase;
  color: #C8AA6E; margin-bottom: 10px; }
.v3pc .gk-dk-arrow { font: italic 700 21px 'GT Sectra Display', Georgia, serif; color: #F2F4FA; margin-bottom: 8px; }
.v3pc .gk-dk-card-b { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.75); }
.v3pc .gk-dk-card--note { margin-top: 18px;
  background: color-mix(in oklab,#C8AA6E 12%,transparent);
  box-shadow: inset 0 0 0 1px rgba(200,170,110,.4);
  clip-path: polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%); }

/* la feuille de route : ADULTES = frise horizontale de 10 pastilles gemmes */
.v3pc .gk-dk-road { display: block; }
.v3pc .gk-dk-road-col + .gk-dk-road-col { margin-top: 30px; }
.v3pc .gk-dk-road-head { font: 600 10px Inter; letter-spacing: .18em; text-transform: uppercase; color: #C8AA6E; }
.v3pc .gk-dk-beltband { border: 0; border-radius: 0; }
.v3pc .v3pc-frise .gk-dk-beltlist { position: relative; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 4px; margin-top: 14px; padding: 4px 6px 0; }
.v3pc .v3pc-frise .gk-dk-beltlist::before { content: ''; position: absolute; left: 26px; right: 26px; top: 11px;
  height: 1px; background: linear-gradient(90deg,rgba(255,255,255,.32),rgba(255,255,255,.12)); }
.v3pc .v3pc-frise .gk-dk-beltrow { position: relative; flex: 1 1 0; flex-direction: column; gap: 9px;
  padding: 0; text-align: center; align-items: center; }
.v3pc .v3pc-frise .gk-dk-beltband { width: 15px; height: 15px; transform: rotate(45deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1.2px rgba(255,255,255,.3), 0 0 10px rgba(0,0,0,.45); }
.v3pc .v3pc-frise .gk-dk-belt-l { flex: none; font: 500 11px Inter; color: rgba(255,255,255,.8); line-height: 1.3; }
.v3pc .v3pc-frise .gk-dk-belt-k { font: 800 italic 10.5px 'Inter Tight'; color: var(--gk-muted); }
/* gemmes (palette gk-shell) : 1 blanche, 2 jaune, 3-4 verte, 5-7 bleue, 8-10 rouge */
.v3pc .v3pc-frise .gk-dk-beltrow:nth-child(1) .gk-dk-beltband { background: radial-gradient(120% 150% at 30% 20%,#FFFDF6,#F2EAD8 45%,#DCCFB4 100%) !important; }
.v3pc .v3pc-frise .gk-dk-beltrow:nth-child(2) .gk-dk-beltband { background: radial-gradient(110% 140% at 32% 22%,#FFE9A8,#F0B93F 42%,#B0740E 100%) !important; }
.v3pc .v3pc-frise .gk-dk-beltrow:nth-child(3) .gk-dk-beltband,
.v3pc .v3pc-frise .gk-dk-beltrow:nth-child(4) .gk-dk-beltband { background: radial-gradient(120% 150% at 28% 18%,#D9F5E2,#57A97A 46%,#1E5C3E 100%) !important; }
.v3pc .v3pc-frise .gk-dk-beltrow:nth-child(5) .gk-dk-beltband,
.v3pc .v3pc-frise .gk-dk-beltrow:nth-child(6) .gk-dk-beltband,
.v3pc .v3pc-frise .gk-dk-beltrow:nth-child(7) .gk-dk-beltband { background: radial-gradient(115% 145% at 30% 20%,#A8CBFF,#2B62B8 44%,#0D2A63 100%) !important; }
.v3pc .v3pc-frise .gk-dk-beltrow:nth-child(8) .gk-dk-beltband,
.v3pc .v3pc-frise .gk-dk-beltrow:nth-child(9) .gk-dk-beltband,
.v3pc .v3pc-frise .gk-dk-beltrow:nth-child(10) .gk-dk-beltband { background: radial-gradient(110% 140% at 32% 22%,#FFB3C0,#C4213F 44%,#5E0A1E 100%) !important; }

/* ENFANTS : liste compacte sur 2 colonnes, bandes losange */
.v3pc .v3pc-kids .gk-dk-beltlist { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 30px; margin-top: 10px; }
.v3pc .v3pc-kids .gk-dk-beltrow { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.v3pc .v3pc-kids .gk-dk-beltband { width: 11px; height: 11px; flex: 0 0 11px; transform: rotate(45deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(255,255,255,.28); }
.v3pc .v3pc-kids .gk-dk-belt-l { font-size: 12.5px; color: rgba(255,255,255,.8); }
.v3pc .v3pc-kids .gk-dk-belt-k { font: 800 italic 11px 'Inter Tight'; }

/* 2 colonnes examen / dan */
.v3pc .v3pc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; align-items: start; }
.v3pc .v3pc-two .gk-dk-sec { margin-top: 34px; }
.v3pc .gk-dk-exam-row { margin-top: 0; padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.09); align-items: center; }
.v3pc .gk-dk-exam-row:last-of-type { border-bottom: 0; }
.v3pc .gk-dk-exam-ko { font: 500 15px 'Noto Serif KR', serif; color: rgba(255,255,255,.66); }
.v3pc .gk-dk-exam-r { font: 600 13.5px Inter; }
.v3pc .gk-dk-exam-b { font-size: 12.5px; color: rgba(255,255,255,.7); }
.v3pc .gk-dk-dan-row { margin-top: 0; padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.09); align-items: center; }
.v3pc .gk-dk-dan-row:last-of-type { border-bottom: 0; }
.v3pc .gk-dk-dan-row::before { content: ''; flex: 0 0 13px; width: 13px; height: 13px; transform: rotate(45deg);
  background: radial-gradient(120% 150% at 30% 20%,#3a3f52,#171B28 55%,#05070D 100%);
  box-shadow: 0 0 0 1.2px rgba(255,255,255,.55); }
.v3pc .gk-dk-dan-ko { width: 40px; font: 500 15px 'Noto Serif KR', serif; color: rgba(255,255,255,.66); }
.v3pc .gk-dk-dan-t { font: 600 13.5px Inter; }
.v3pc .gk-dk-dan-b { font-size: 12.5px; color: rgba(255,255,255,.7); }

/* le temps */
.v3pc .gk-dk-time-row { margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.v3pc .gk-dk-time-n { font: italic 700 18px 'GT Sectra Display', Georgia, serif; color: #E8C77E; }

/* CTA : bandeau visuel + bouton or satin */
.v3pc .v3pc-band { position: relative; margin-top: 44px; overflow: hidden;
  clip-path: polygon(26px 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,26px 100%,0 50%); }
.v3pc .v3pc-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.38) saturate(.9); }
.v3pc .v3pc-band::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 90% at 50% 50%,rgba(200,170,110,.28),rgba(8,12,22,.55) 78%); }
.v3pc .v3pc-band .in2 { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; text-align: center; padding: 40px 40px 36px; }
.v3pc .v3pc-band .gk-dk-h2 { text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.v3pc .v3pc-band .gk-dk-p { color: rgba(255,255,255,.8); max-width: 52ch; }
.v3pc .gk-dk-ctas { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 12px; max-width: none; margin-top: 20px; }
.v3pc .gk-dk-cta, .v3pc .gk-dk-cta-ghost { border: 0; border-radius: 0;
  font: 800 italic 13px 'Inter Tight'; padding: 13px 28px;
  clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%); }
.v3pc .gk-dk-cta { color: #0B0E1A; background: var(--gold-satin);
  box-shadow: inset 0 0 0 1px rgba(200,170,110,.5); }
.v3pc .gk-dk-cta-ghost { color: rgba(255,255,255,.88); background: rgba(12,16,30,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.1); }
.v3pc .gk-dk-cta-ghost:hover { background: rgba(20,26,44,.75); }

/* liens keup : chips hexagonales avec gemme de ceinture */
.v3pc .gk-dk-keuplinks { justify-content: center; margin-top: 26px; }
.v3pc .gk-dk-keuplink { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 0;
  font: 600 11px Inter; letter-spacing: .05em; color: rgba(255,255,255,.82);
  padding: 9px 15px; background: rgba(255,255,255,.06);
  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%); }
.v3pc .gk-dk-keuplink:hover { background: rgba(255,255,255,.1); color: #fff; }
.v3pc .gk-dk-keuplink::before { content: ''; width: 7px; height: 7px; flex: 0 0 7px; transform: rotate(45deg); }
.v3pc .gk-dk-keuplink:nth-child(1)::before { background: radial-gradient(120% 150% at 30% 20%,#FFFDF6,#F2EAD8 45%,#DCCFB4 100%); }
.v3pc .gk-dk-keuplink:nth-child(2)::before,
.v3pc .gk-dk-keuplink:nth-child(3)::before { background: radial-gradient(110% 140% at 32% 22%,#FFE9A8,#F0B93F 42%,#B0740E 100%); }
.v3pc .gk-dk-keuplink:nth-child(4)::before,
.v3pc .gk-dk-keuplink:nth-child(5)::before { background: radial-gradient(120% 150% at 28% 18%,#D9F5E2,#57A97A 46%,#1E5C3E 100%); }
.v3pc .gk-dk-keuplink:nth-child(6)::before,
.v3pc .gk-dk-keuplink:nth-child(7)::before { background: radial-gradient(115% 145% at 30% 20%,#A8CBFF,#2B62B8 44%,#0D2A63 100%); }
.v3pc .gk-dk-keuplink:nth-child(8)::before,
.v3pc .gk-dk-keuplink:nth-child(9)::before { background: radial-gradient(110% 140% at 32% 22%,#FFB3C0,#C4213F 44%,#5E0A1E 100%); }

.v3pc .gk-dk-sources { text-align: center; }

@media (max-width: 860px) {
  .v3pc .gk-dk-stats { grid-template-columns: repeat(2,1fr); }
  .v3pc .v3pc-two { grid-template-columns: 1fr; }
  .v3pc .v3pc-frise .gk-dk-beltlist { flex-wrap: wrap; gap: 14px 4px; }
  .v3pc .v3pc-frise .gk-dk-beltlist::before { display: none; }
  .v3pc .v3pc-frise .gk-dk-beltrow { flex: 1 1 18%; }
  .v3pc .v3pc-kids .gk-dk-beltlist { grid-template-columns: 1fr; }
}

/* ── Tableau officiel des durées (Parcours) : 3 colonnes, charnière or au passage
      des couleurs à la ceinture noire, monospace pour aligner les chiffres. ── */
.v3pc .gk-dk-tbl { margin-top: 18px; }
.v3pc .gk-dk-tbl-head,
.v3pc .gk-dk-tbl-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px;
  align-items: baseline; padding: 9px 2px;
}
.v3pc .gk-dk-tbl-head {
  font: 600 10px Inter; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid rgba(255,255,255,.14);
}
.v3pc .gk-dk-tbl-head span + span,
.v3pc .gk-dk-tbl-row .gk-dk-tbl-v { text-align: right; }
.v3pc .gk-dk-tbl-row { border-bottom: 1px solid rgba(255,255,255,.07); }
.v3pc .gk-dk-tbl-row.is--hinge { border-bottom-color: rgba(200,170,110,.55); }
.v3pc .gk-dk-tbl-r { font: italic 700 14px 'GT Sectra Display', Georgia, serif; }
.v3pc .gk-dk-tbl-v { font: 500 12.5px ui-monospace, Menlo, monospace; color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums; }
.v3pc .gk-dk-note { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 480px) {
  .v3pc .gk-dk-tbl-head, .v3pc .gk-dk-tbl-row { grid-template-columns: 1.1fr .95fr .95fr; gap: 6px; }
  .v3pc .gk-dk-tbl-r { font-size: 13px; }
  .v3pc .gk-dk-tbl-v { font-size: 11.5px; }
}

/* ── Page Grades : la frise du blanc au noir ────────────────────────────────
   Parité app (app/grade.tsx) : une rangée par passage plutôt qu'une grille de
   photos. Numéro, ceinture en bandeau (couleur + barrette de la suivante),
   rang en hangeul, titre, libellé. Un fil vertical relie les rangées : on lit
   le chemin d'un bout à l'autre (demande Jason 24/08). */
.kfr-lead {
  margin: 0 0 22px; max-width: 56ch;
  font: 400 14.5px/1.6 'Inter', sans-serif; color: rgba(255,255,255,.62);
}
.kfr { position: relative; max-width: 760px; }
/* le fil du parcours, calé sur l'axe des numéros */
.kfr::before {
  content: ''; position: absolute; left: 21px; top: 26px; bottom: 26px; width: 1px;
  background: linear-gradient(180deg, rgba(200,170,110,.5), rgba(200,170,110,.12));
}
.kfr-row {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 14px 18px 14px 0; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .16s;
}
.kfr-row:last-child { border-bottom: 0; }
.kfr-row:hover { background: rgba(255,255,255,.045); }
.kfr-n {
  position: relative; z-index: 1; flex: 0 0 42px; text-align: center;
  font: 800 italic 13px 'Inter Tight', Inter, sans-serif; color: #C8AA6E;
  background: #0B0E1A; padding: 4px 0;
}
/* La ceinture : un bandeau plein, barré de la couleur suivante quand le passage
   est un « demi-grade » (blanche → jaune, jaune → verte…). */
.kfr-belt {
  position: relative; flex: 0 0 54px; height: 15px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 0 rgba(0,0,0,.4);
}
.kfr-belt i { position: absolute; right: 0; top: 0; bottom: 0; width: 40%; }
.kfr-tx { flex: 1; min-width: 0; }
.kfr-ko {
  display: block; font: 500 11.5px 'Noto Serif KR', serif; color: rgba(255,255,255,.45);
}
.kfr-tx b {
  display: block; margin-top: 1px;
  font: italic 700 17px 'GT Sectra Display', Georgia, serif; color: #F2EEE4;
}
.kfr-lbl {
  display: block; margin-top: 2px;
  font: 500 12px 'Inter', sans-serif; color: rgba(255,255,255,.55);
}
.kfr-go { flex: none; font-size: 15px; color: rgba(255,255,255,.35); }
.kfr-row:hover .kfr-go { color: #C8AA6E; }
@media (max-width: 560px) {
  .kfr::before { left: 15px; }
  .kfr-row { gap: 11px; padding-right: 4px; }
  .kfr-n { flex-basis: 30px; font-size: 11px; }
  .kfr-belt { flex-basis: 40px; height: 13px; }
  .kfr-tx b { font-size: 15px; }
}

/* ============================================================================
   DÉFILEMENT : un seul ascenseur, et la barre d'onglets qui colle en haut.

   LE DOUBLE SCROLL venait de la feuille Webflow distante (non modifiable) :
       .tab_container { height: 90vh; padding-bottom: 32px; overflow: scroll }
   Le contenu des onglets défilait DANS sa boîte de 90vh (8 030 px à faire
   défiler sur « Théorie » du 2 vers 1) pendant que la page défilait de son
   côté sur <body> (280 px) : .body-inside-container est figé à height:100vh,
   .content à height:100%, et body porte overflow-x:hidden (responsive-mobile)
   donc un overflow-y:auto implicite.

   1) on rend sa hauteur au contenu des onglets ;
   2) on laisse la colonne grandir avec lui ;
   3) on rend <body> transparent au défilement : tant qu'il est conteneur de
      défilement, un position:sticky se cale sur LUI, et comme lui ne défile
      plus une fois (2) fait, la barre ne collerait jamais. overflow-x:clip
      borne l'horizontal SANS créer de conteneur de défilement.
      ⚠ overflow-y AUSSI en !important : glass-site.css (body.gk-modal-open) et
      responsive-mobile.css (body.nav-open) remettent overflow:hidden sur body
      pour verrouiller l'arrière-plan. clip sur X + hidden sur Y, la spec fait
      calculer clip en hidden : body redeviendrait défileur et la barre
      décrocherait. Le verrou est repris sur la racine, juste en dessous.
   ========================================================================== */
body:has(.content.v3k) { overflow-x: clip !important; overflow-y: visible !important; }
.body-inside-container:has(> .content.v3k) { height: auto; min-height: 100vh; }
.content.v3k { height: auto; }
.v3k .tab_container { height: auto; overflow: visible; }

/* Le verrou de défilement des modales et du menu off-canvas visait <body>,
   qui était le défileur. Ce n'est plus lui : on le pose sur la racine. */
html:has(body.gk-modal-open .content.v3k),
html:has(body.nav-open .content.v3k) { overflow: hidden; }

/* La barre d'onglets colle en haut. Sélecteur en > pour battre
   `.main.mhero > *` qui la remet en position:relative. */
.content.v3k > .wtabs { position: sticky; top: 0; z-index: 30; }

/* Le bandeau opaque derrière la barre collée.
   ⚠ Il ne peut PAS être un pseudo de .wtabs : sticky + z-index en font un
   contexte d'empilement, et un enfant en z-index négatif s'y peint AU-DESSUS
   du fond de l'élément, donc par-dessus le liseré or.
   ⚠ Il ne peut pas non plus vivre sur <body> : .body-container porte
   z-index:1, tout ce qui est plus haut recouvrirait la barre elle-même.
   Il vit donc sur .content, dans le MÊME contexte d'empilement que la barre,
   un cran en dessous. Invisible au repos, sinon il barre le dégradé du héros :
   la classe .kstuck est posée par js/keup-v3.js au moment où la barre colle.
   left:250px = largeur de la sidebar fixe, qu'il ne doit pas couvrir. */
.content.v3k::after {
  content: ''; position: fixed; top: 0; left: 250px; right: 0; height: 64px;
  z-index: 29; pointer-events: none; opacity: 0; transition: opacity .14s linear;
  background: linear-gradient(180deg, #0B0E1A 0 49px, rgba(11,14,26,0) 64px);
}
body.kstuck .content.v3k::after { opacity: 1; }

@media (max-width: 991px) {
  /* le hamburger fixe occupe 12 à 58 px : la barre se cale juste dessous. */
  .content.v3k > .wtabs { top: 62px; }
  .content.v3k::after {
    left: 0; height: 126px;
    background: linear-gradient(180deg, #0B0E1A 0 111px, rgba(11,14,26,0) 126px);
  }
}

/* ── Les tableaux d'abord, les vidéos ensuite ────────────────────────────────
   La galerie de vidéos (.kv-gallery, posée par keup-v3.js) était injectée en
   tête du volet, donc au-dessus des tableaux Exécution / Notation. Jason les
   veut au-dessus des vidéos (25/08). Le volet passe en colonne flex et la
   galerie prend le dernier rang : ça vaut pour tous les onglets, le texte
   avant la vidéo. */
.v3k .w-tab-pane { display: flex; flex-direction: column; }
.v3k .w-tab-pane > .kv-gallery { order: 2; }
/* le bloc vidéo du gabarit Webflow est vide sur toutes les pages : il ne sert
   qu'à laisser un trou dans la grille. */
.v3k .video_container:empty { display: none; }