/* ============================================================================
   hextech-or.css — Charte PWA v3 « Hextech Or » (handoff design_handoff_pwa_v3)
   Chargée APRÈS glass-site.css : 1) flip des tokens --gk-* (tout l'existant
   bascule or/navy sans toucher aux layouts), 2) composants v3 de la maquette
   (recettes hexagones .hxring/.ghx, onglets .wtab, séparateurs .wsep, héros
   .mhero, nav .sit…), 3) états hover/focus (absents de la maquette), 4) adap-
   tateur du shell (la .navbar devient .sb, la .content devient .main).
   Règles fermes : AUCUN arrondi ; accent unique or satin ; hiérarchie par
   opacités de blanc ; jamais de border/box-shadow de contour sur un clip-path
   (recette .hxring) ; rouge réservé ceintures/gemmes ; encre #0B0E1A sur or.
   ========================================================================== */

/* ── Fonts auto-hébergées (Inter, Inter Tight ; GT Sectra déjà dans glass-site,
      Noto Serif KR via Google Fonts, ~100 subsets coréens trop lourds à héberger) ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-normal-400-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-normal-500-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-normal-600-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-normal-700-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-tight-italic-700-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/inter-tight-italic-800-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-tight-normal-600-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Flip des tokens du kit : tout le site passe à la charte or ── */
:root {
  --gk-bg: #0B0E1A;
  --gk-aqua: #C8AA6E;            /* accent interface : or */
  --gk-violet: #E4CE9B;          /* fin de dégradé des primaires : or clair */
  --gk-amber: #C8AA6E;
  --gk-gold: #C8AA6E;
  --gk-muted: #8A93AD;
  --gk-glass: rgba(255,255,255,.05);
  --gk-glass-md: rgba(255,255,255,.08);
  --gk-glass-strong: rgba(255,255,255,.08);
  --gk-glass-lg: rgba(255,255,255,.12);
  --gk-border: rgba(255,255,255,.14);
  --gk-border-subtle: rgba(255,255,255,.08);
  --gk-border-bright: rgba(255,255,255,.35);
  --gk-glow: 0 0 40px rgba(200,170,110,.25);
  /* or satin : LA recette (texte dessus = encre #0B0E1A) */
  --gold-satin: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
}
body { background: var(--gk-bg); }

/* ============================================================================
   COMPOSANTS v3 (extraits du <style> de la maquette ; chrome de board retiré,
   collision .prog corrigée en .progbar, .desc→.gdesc et .two→.gtwo pour ne pas
   toucher aux classes Webflow existantes)
   ========================================================================== */

:root{--bg:#0B0E1A;--bg2:#0D1524;--card:rgba(255,255,255,.05);--border:rgba(255,255,255,.14);--glass-b:rgba(255,255,255,.22);--text:#F2F4FA;--muted:#8A93AD;--acc:#C8AA6E;--gold:#C8AA6E;--goldlt:#E8C77E;--ivory:#F0E6D2;--hexc:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%)}
/* stroke hexagonal qui suit la forme : fond = couleur de stroke, ::before intérieur inset re-clippé */
.hxring{position:relative;isolation:isolate;background:var(--hxc,rgba(255,255,255,.16))}
.hxring::before{content:'';position:absolute;inset:var(--hxw,1px);background:var(--hxfill,rgba(255,255,255,.05));clip-path:polygon(calc(var(--hx,10px) - var(--hxw,1px)) 0,calc(100% - var(--hx,10px) + var(--hxw,1px)) 0,100% 50%,calc(100% - var(--hx,10px) + var(--hxw,1px)) 100%,calc(var(--hx,10px) - var(--hxw,1px)) 100%,0 50%);z-index:-1}
.hxring>*{position:relative;z-index:1}
.ghx{position:relative;isolation:isolate;background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%)!important}
.ghx::before{content:'';position:absolute;inset:1.5px;background:var(--ghxfill,#131A2B);clip-path:polygon(calc(var(--hx,10px) - 1.5px) 0,calc(100% - var(--hx,10px) + 1.5px) 0,100% 50%,calc(100% - var(--hx,10px) + 1.5px) 100%,calc(var(--hx,10px) - 1.5px) 100%,0 50%);z-index:-1}
.ghx>*{position:relative;z-index:1}
/* Équerres d'angle de la carte de l'app (CardV3 / .card::after du handoff) :
   4 traits de 10 × 1 px en #F2F4FA à 50 %, en HAUT-GAUCHE et BAS-DROITE
   seulement. C'est la signature de la carte, ne pas « compléter » les quatre
   coins. Se pose sur un rectangle : sur une forme découpée au clip-path, les
   traits tomberaient dans le vide des pointes. */
.gkco{position:relative}
.gkco::after,.v3k .w-tab-pane .keup_overview_collection::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
 background-image:linear-gradient(#F2F4FA,#F2F4FA),linear-gradient(#F2F4FA,#F2F4FA),linear-gradient(#F2F4FA,#F2F4FA),linear-gradient(#F2F4FA,#F2F4FA);
 background-size:10px 1px,1px 10px,10px 1px,1px 10px;
 background-position:left top,left top,right bottom,right bottom;
 background-repeat:no-repeat}
.wtab.goldring{position:relative;isolation:isolate;background:linear-gradient(135deg,#E4CE9B,rgba(200,170,110,.55) 38%,rgba(138,106,47,.75) 70%,#C8AA6E)!important;box-shadow:none!important;color:#E8C77E!important}
.wtab.goldring::before{content:''!important;position:absolute!important;inset:1px!important;background:#141A2B!important;clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%)!important;z-index:-1!important}
*{box-sizing:border-box}
.display{font-family:'GT Sectra Display',Georgia,serif;font-weight:700;font-style:italic}
h1,h2,h3,p{margin:0}
.page{display:flex;min-height:820px;background:var(--bg);overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(10,17,30,.4)}
.page::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(60% 45% at 80% 0,rgba(46,78,126,.22),transparent 70%),radial-gradient(50% 40% at 10% 100%,rgba(200,170,110,.1),transparent 70%)}
.sb{position:relative;z-index:2;flex:0 0 250px;background:rgba(10,12,22,.65);backdrop-filter:blur(16px);border-right:1px solid rgba(255,255,255,.1);padding:22px 18px;display:flex;flex-direction:column;gap:2px}
.sb .brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
/* La plaque logo de l'app (LogoPlaque) : le SVG vient de gk-shell.js, ici
   seulement la taille et l'inclinaison -3° du composant d'origine. */
.sb .brand .lg{width:38px;height:38px;display:block;transform:rotate(-3deg)}
.sb .brand .lg svg{display:block}
/* L'emblème 士 cerclé (celui de Koryeo) peint à l'or de la charte : le PNG
   sert de MASQUE, donc la couleur est exactement celle du dégradé et non une
   teinte approchée par filtre. Le tour comme l'intérieur viennent du même
   fichier, ils sont dorés ensemble. */
.sb .brand .lg i{width:24px;height:24px;display:block;
  background:linear-gradient(115deg,#8A6A2F 0 12%,#F7EFDC 32%,#C8AA6E 54%,#E4CE9B 76%,#8A6A2F 94%);
  -webkit-mask:url('/images/v3/jang/il-jang.svg') center/contain no-repeat;
  mask:url('/images/v3/jang/il-jang.svg') center/contain no-repeat}
.sb .brand b{font:italic 700 16px 'GT Sectra Display',Georgia,serif}
/* ⚠ Cette règle visait la ligne coréenne sous le nom, mais elle attrapait
   aussi le conteneur du nom : le text-transform descendait dans le <b> et
   « TKD Wiki World » sortait tout en capitales (retour Jason 24/08). */
.sb .brand .nm{display:block}
.sbsep{display:flex;align-items:center;gap:8px;margin:12px 0}
.sbsep .ln{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28))}
.sbsep .ln.r{background:linear-gradient(270deg,transparent,rgba(255,255,255,.28))}
.sbsep img{width:12px;height:12px;opacity:.6}
.sit{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:13.5px;color:rgba(255,255,255,.82);cursor:pointer}
.sit i{font-size:16px;color:var(--muted)}
.sit.on{color:#fff}
/* Onglet actif : SEULE l'icône passe à l'or. Le chevron doré et le lavis en
   dégradé derrière la ligne ont été retirés (retour Jason 25/08 : « cette
   parenthèse dorée est super moche »). */
.sit.on i{background-image:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sgrp{font:600 9.5px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px;padding:0 10px;display:flex;align-items:center;justify-content:space-between}
.sgrp i{font-size:12px}
.ssub{display:flex;flex-direction:column}
.ssub .sit{padding:6px 10px 6px 34px;font-size:12.5px;color:rgba(255,255,255,.66)}
.ssub .sit .bdot{width:7px;height:7px;flex:0 0 7px;transform:rotate(45deg)}
.ssub2{display:flex;flex-direction:column}
.ssub2 .sit{padding:4.5px 10px 4.5px 52px;font-size:12px;color:rgba(255,255,255,.55)}
.ssub2 .sit .bdot{width:5px;height:5px;flex:0 0 5px;transform:rotate(45deg)}
.sb .push{margin-top:auto}
.sb .ver{font:600 9px Inter;letter-spacing:.14em;color:#3D465C;padding:10px 10px 0}
/* ⚠ overflow: la maquette avait .page{min-height:820px} + .main{overflow:hidden}.
   Ici .content vit dans .body-inside-container{height:100vh} : un overflow:hidden
   enfermerait toute la page dans un écran (contenu rogné, plus de défilement) et
   tuerait les position:sticky enfants (rail A→Z, barres Lexique/Découverte).
   overflow-x:clip borne l'horizontal SANS créer de conteneur de défilement. */
.main{position:relative;z-index:1;flex:1;padding:26px 34px 40px;overflow-x:clip;overflow-y:visible}
.page>.main{overflow:hidden}   /* maquettes autonomes _open-*.html : comportement d'origine */
.crumb{display:flex;align-items:center;gap:10px;font:500 13px Inter;letter-spacing:0;text-transform:none;color:var(--muted)}
.crumb b{white-space:nowrap;color:#F2F4FA;font-weight:600;padding:4px 12px;background:rgba(255,255,255,.07);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.crumb .d{width:auto;height:auto;transform:none;background:none;color:rgba(255,255,255,.3);font-size:12px}
.crumb .d::before{content:'›'}
.main.mhero::before{content:'';position:absolute;left:0;right:0;top:0;height:250px;z-index:0;background-image:linear-gradient(180deg,rgba(10,17,30,.42),rgba(10,17,30,.66) 55%,var(--bg) 97%),var(--mh);background-size:cover,cover;background-position:center,center 26%;background-repeat:no-repeat;filter:saturate(.92)}
.main.mhero>*{position:relative;z-index:1}
/* lisibilité sur les headers image : voile renforcé + éléments éclaircis */
/* Le voile s'arrêtait sur un aplat opaque (var(--bg)) posé sur un fond de page
   qui, lui, n'était PAS de la même teinte : on voyait la ligne de coupe, et la
   bande basse tirait sur le violet là où la page tire sur le bleu (retour Jason
   24/08). On fond maintenant le calque entier vers la transparence avec un
   masque : c'est le fond de page qui apparaît, donc aucune couture possible. */
.main.mhero::before{
  background-image:linear-gradient(180deg,rgba(8,12,22,.52),rgba(8,12,22,.74) 58%,rgba(8,12,22,.92) 100%),var(--mh);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 38%,rgba(0,0,0,.55) 74%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 38%,rgba(0,0,0,.55) 74%,transparent 100%);
}
.main.mhero .crumb{color:rgba(255,255,255,.78)}
.main.mhero .crumb .d{color:rgba(255,255,255,.5)}
.main.mhero .crumb b{background:rgba(8,12,22,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.main.mhero h1.display{text-shadow:0 2px 18px rgba(0,0,0,.6)}
.main.mhero [style*="Noto Serif KR"]{color:rgba(255,255,255,.8)!important;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.main.mhero .wtab{background:rgba(8,12,22,.55);color:rgba(255,255,255,.75)}
.main.mhero .wtab.on{background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(8,12,22,.5));color:#fff}
.main.mhero .wtabs+*{position:relative}
/* ⚠ COLLISION DE NOM : les pages Keup portent un <div class="introduction_container resume">
   (classe Webflow d'origine). La recette v3 « .resume » est la carte Reprendre :
   height:118px + overflow:hidden. Sans l'exclusion ci-dessous, elle rognait tout
   le contenu des onglets de grade à 118px de haut (77 lignes Airtable invisibles).
   Le :not() est la correction la moins invasive : les usages v3 (Poomsae, Apprendre)
   restent intacts. */
.resume:not(.introduction_container){position:relative;height:118px;margin-top:20px;overflow:hidden;clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,24px 100%,0 50%);cursor:pointer}
.resume:not(.introduction_container) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.resume::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,22,.9),rgba(8,12,22,.35) 60%,rgba(8,12,22,.1))}
.resume:not(.introduction_container) .rtx{position:absolute;left:46px;top:44%;transform:translateY(-50%);z-index:2}
.resume:not(.introduction_container) .rtx .k{font:600 9.5px Inter;letter-spacing:.18em;text-transform:uppercase;color:#C8AA6E}
.resume:not(.introduction_container) .rtx b{display:block;white-space:nowrap;font:italic 700 21px 'GT Sectra Display',Georgia,serif;margin:5px 0 3px}
.resume:not(.introduction_container) .rtx span{font-size:12px;color:rgba(255,255,255,.7)}
.resume:not(.introduction_container) .go2{position:absolute;right:40px;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:44px;height:44px;font-size:19px;color:#0B0E1A;background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);box-shadow:inset 0 0 0 1px rgba(200,170,110,.5);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}
.resume:not(.introduction_container) .rpb{position:absolute;left:46px;right:40px;bottom:12px;height:3px;background:rgba(255,255,255,.15);z-index:2}
.resume:not(.introduction_container) .rpb i{display:block;width:40%;height:100%;background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%)}
.snav{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 12px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.06);clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%);cursor:text}
.snav i{font-size:14px}
/* Actualités — flux presse */
.newsl{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.nrow{display:flex;flex-direction:column;gap:7px;padding:14px 20px;background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.028));box-shadow:inset 0 1.2px 0 rgba(255,255,255,.2),inset 0 -1.2px 0 rgba(255,255,255,.06);clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%);cursor:pointer}
.nrow .top{display:flex;align-items:center;justify-content:space-between}
.ntag{padding:4px 11px;font:700 9px Inter;letter-spacing:.16em;text-transform:uppercase;color:#0B0E1A;background:#F2F4FA;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%)}
.ntag.v{position:relative;isolation:isolate;background:rgba(200,170,110,.55);color:#E8C77E}.ntag.v::before{content:"";position:absolute;inset:1px;z-index:-1;background:#131A2B;clip-path:polygon(5.6px 0,calc(100% - 5.6px) 0,100% 50%,calc(100% - 5.6px) 100%,5.6px 100%,0 50%)}
.nrow .dt{font:600 10.5px Inter;letter-spacing:.06em;color:var(--muted)}
.nrow h4{margin:0;font:600 14px Inter;line-height:1.4;color:#F2F4FA}
.nrow .src{display:inline-flex;align-items:center;gap:5px;font:500 11px Inter;color:var(--muted)}
.nrow .src i{font-size:10px;color:#C8AA6E}
.nfoot{display:flex;align-items:center;gap:10px;margin-top:12px;font:500 11.5px Inter;color:var(--muted)}
.nfoot .live{width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(180deg,#F0E6D2,#C8AA6E 45%,#785A28);box-shadow:0 0 8px rgba(200,170,110,.8)}
.nfoot b{color:rgba(255,255,255,.85);font-weight:600}
/* Wireframes de zoning */
/* News compact */
.nrow.sm{padding:10px 14px;gap:5px}
.nrow.sm h4{font-size:12.5px;line-height:1.35}
.nrow.sm .ntag{padding:3px 8px;font-size:8px}
.seeall{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 10.5px Inter;letter-spacing:.12em;text-transform:uppercase;color:#C8AA6E;cursor:pointer}
/* Portes de section */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.porte{display:flex;align-items:center;gap:13px;padding:15px 18px;background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:inset 0 1.2px 0 rgba(255,255,255,.24),inset 0 -1.2px 0 rgba(255,255,255,.07);clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%);cursor:pointer}
.porte i.ic{font-size:24px;color:#F2F4FA;opacity:.9}
.porte .tx{flex:1;min-width:0}
.porte .tx b{display:block;font:italic 700 15.5px 'GT Sectra Display',Georgia,serif;color:#F2F4FA}
.porte .tx span{font:500 11px Inter;color:var(--muted)}
.porte i.go{font-size:13px;color:var(--muted)}
/* Mises à jour */
.upd{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.07)}
.upd:last-child{border-bottom:0}
.upd .dm2{flex:0 0 6px;width:6px;height:6px;transform:rotate(45deg);background:rgba(255,255,255,.4)}
.upd .dm2.v{background:linear-gradient(180deg,#F0E6D2,#C8AA6E 45%,#785A28);box-shadow:0 0 7px rgba(200,170,110,.7)}
.upd .tx{flex:1;font:500 12.5px Inter;color:rgba(255,255,255,.85)}
.upd .tx em{font-style:normal;color:var(--muted)}
.upd .dt{font:600 10px Inter;letter-spacing:.08em;color:var(--muted)}
/* Bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.bt2{position:relative;padding:18px 20px;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%);overflow:hidden;cursor:pointer}
.bt2 .k{font:600 9.5px Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bt2 .k.v{color:#C8AA6E}
.bt2 .big{font:italic 700 40px 'GT Sectra Display',Georgia,serif;line-height:1;margin-top:10px;color:#F2F4FA}
.bt2 .sub{font:500 11.5px Inter;color:var(--muted);margin-top:6px}
.bt2.img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5)}
.bt2.img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,22,.85),rgba(8,12,22,.25))}
.bt2.img>*:not(img){position:relative;z-index:2}

/* Calendrier */
.calhead{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
.calnav{display:flex;align-items:center;gap:10px}
/* ⚠ `.calnav span` visait les flèches < > de la maquette, mais les onglets
   Mois / Liste sont AUSSI des <span> dans cette barre : ils héritaient d'un
   width:38px qui écrasait leur libellé (« Aujourd'hui » réduit à « AU », « Liste »
   coupé). La règle ne s'applique donc plus qu'aux boutons .calarr. */
.calnav > span.calarr{display:grid;place-items:center;width:38px;height:34px;font-size:15px;color:#F2F4FA;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%);cursor:pointer}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:16px}
.calfil{display:flex;align-items:center;gap:8px;margin-top:16px}
.calfil .lb{font:600 9.5px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.fsel{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;font:600 11px Inter;letter-spacing:.04em;color:#F2F4FA;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.06);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);cursor:pointer}
.fsel i{font-size:12px;color:var(--muted)}
.fsel em{font-style:normal;color:var(--muted);font-weight:500}
.fchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;font:600 10.5px Inter;letter-spacing:.06em;color:rgba(255,255,255,.8);background:rgba(255,255,255,.06);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%);cursor:pointer}
.fchip.on{position:relative;isolation:isolate;background:rgba(200,170,110,.55);color:#E8C77E}
.fchip.on::before{content:'';position:absolute;inset:1px;z-index:-1;background:#131A2B;clip-path:polygon(7.6px 0,calc(100% - 7.6px) 0,100% 50%,calc(100% - 7.6px) 100%,7.6px 100%,0 50%)}
.fchip i{font-size:11px}
/* Portes visuelles (image hex) */
.gate{position:relative;height:116px;overflow:hidden;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);cursor:pointer}
.gate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.9)}
.gate::after{content:'';position:absolute;inset:0;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),inset 0 -1.5px 0 rgba(255,255,255,.1)}
.gate .ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.gate .ov i{font-size:21px;color:#F2F4FA;opacity:.95}
.gate .ov b{font:italic 700 17px 'GT Sectra Display',Georgia,serif;color:#F2F4FA}
.gate .ov span{font:500 10.5px Inter;color:rgba(255,255,255,.65)}
/* Paravent byeongpung */
.parv{display:flex;margin-top:14px;perspective:900px}
.parv .pn{position:relative;flex:1;height:158px;overflow:hidden;cursor:pointer;transform:rotateY(14deg);transform-origin:left center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.parv .pn:nth-child(even){transform:rotateY(-14deg);transform-origin:right center;filter:brightness(.62);margin-left:-11px}
.parv .pn>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.66)}
.parv .pn .lb{position:absolute;left:0;right:0;bottom:10px;z-index:2;text-align:center}
.parv .pn .lb b{display:block;font:italic 700 15px 'GT Sectra Display',Georgia,serif;color:#F2F4FA;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.parv .pn .lb span{font:500 9.5px Inter;letter-spacing:.08em;color:rgba(255,255,255,.7)}
.parv .pn .tk{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:5px;height:5px;background:linear-gradient(180deg,#F0E6D2,#C8AA6E 45%,#785A28);z-index:2;box-shadow:0 0 7px rgba(200,170,110,.8)}
/* Board : bandeaux de groupe */

/* Landing non connecté */
.lpbar{position:relative;z-index:5;display:flex;align-items:center;gap:26px;padding:16px 34px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(10,12,22,.55);backdrop-filter:blur(14px)}
.lpbar .blg{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.lpbar .blg .lg2{width:38px;height:38px;display:grid;place-items:center;font:700 17px 'Noto Serif KR',serif;color:#F2F4FA;background:linear-gradient(135deg,#C8AA6E,#785A28);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%)}
.lpbar .blg b{font:italic 700 16px 'GT Sectra Display',Georgia,serif;white-space:nowrap}
.lpbar .blg span{display:block;font:500 9.5px Inter;letter-spacing:.14em;color:var(--muted)}
.lpbar .lnk{display:flex;gap:22px;flex:1;justify-content:center;font:600 11px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lpbar .lnk span{cursor:pointer}
.lpbar .lnk span.on{color:#F2F4FA}
.lphero{position:relative;height:600px;overflow:hidden}
.lphero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:brightness(.42) saturate(.9)}
.lphero::before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(46% 55% at 50% 44%,rgba(200,170,110,.28),transparent 72%)}
.lphero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,14,26,.3),rgba(10,14,26,.42) 55%,#0B0E1A 99%)}
.lphero .wm{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:1;font:700 300px 'Noto Serif KR',serif;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);white-space:nowrap;pointer-events:none}
.lphero .in{position:absolute;left:0;right:0;top:74px;z-index:2;text-align:center;padding:0 60px}
.lphero .kk{display:inline-flex;align-items:center;gap:10px;font:600 10.5px Inter;letter-spacing:.24em;text-transform:uppercase;color:#F2F4FA;padding:9px 22px;background:rgba(200,170,110,.32);box-shadow:inset 0 0 0 1px rgba(200,170,110,.5);clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%)}
.lphero .kk i{width:6px;height:6px;background:linear-gradient(180deg,#F0E6D2,#C8AA6E 45%,#785A28);transform:rotate(45deg);box-shadow:0 0 8px rgba(200,170,110,.9);animation:lpglow 2.6s ease-in-out infinite}
.lphero h1{margin:22px 0 0;font:italic 700 62px 'GT Sectra Display',Georgia,serif;line-height:1.03;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.lphero .kr{margin-top:12px;font:500 17px 'Noto Serif KR',serif;color:rgba(255,255,255,.72);letter-spacing:.2em}
.lphero p{margin:18px auto 0;max-width:620px;font:400 15px Inter;line-height:1.65;color:rgba(255,255,255,.82)}
.lphero .ctas{display:flex;gap:12px;justify-content:center;margin-top:26px}
.lpnum{position:absolute;left:60px;right:60px;bottom:30px;z-index:2;display:flex;gap:12px}
.lpnum div{flex:1;text-align:center;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%)}
.lpnum b{display:block;font:italic 700 30px 'GT Sectra Display',Georgia,serif;color:#F2F4FA}
.lpnum span{font:600 9.5px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lpmarq{position:relative;overflow:hidden;padding:15px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.lpmarq .tr{display:flex;gap:46px;width:max-content;animation:lpmarq 26s linear infinite}
.lpmarq .it{display:inline-flex;align-items:center;gap:14px;font:700 15px 'Noto Serif KR',serif;color:rgba(255,255,255,.5);white-space:nowrap}
.lpmarq .it em{font:italic 700 14px 'GT Sectra Display',Georgia,serif;color:rgba(255,255,255,.32)}
.lpmarq .it i{width:5px;height:5px;background:rgba(200,170,110,.7);transform:rotate(45deg)}
.lpmain{padding:0 34px 40px}
.lpvoie{display:flex;align-items:center;gap:0;margin-top:14px;padding:22px 26px;background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 1.4px 0 rgba(255,255,255,.24),inset 0 -1.4px 0 rgba(255,255,255,.07);clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%,0 50%)}
.lpvoie .bd{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.lpvoie .bd i{width:15px;height:15px;transform:rotate(45deg);animation:lpfloat 3.4s ease-in-out infinite}
.lpvoie .bd:nth-child(3) i{animation-delay:.4s}.lpvoie .bd:nth-child(5) i{animation-delay:.8s}.lpvoie .bd:nth-child(7) i{animation-delay:1.2s}.lpvoie .bd:nth-child(9) i{animation-delay:1.6s}.lpvoie .bd:nth-child(11) i{animation-delay:2s}
.lpvoie .bd span{font:600 8.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lpvoie .ln3{flex:1;height:1px;margin:0 14px 18px;background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.1))}
.lpband{position:relative;height:210px;margin-top:26px;overflow:hidden;clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,26px 100%,0 50%)}
.lpband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.4)}
.lpband::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 50%,rgba(200,170,110,.3),rgba(8,12,22,.55) 78%)}
.lpband .in2{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.lpband h3{margin:0;font:italic 700 32px 'GT Sectra Display',Georgia,serif}
.lpband .sub2{font:500 13px Inter;color:rgba(255,255,255,.75)}
@keyframes lpmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lpfloat{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(-3px,-3px)}}
@keyframes lpglow{0%,100%{box-shadow:0 0 6px rgba(200,170,110,.6)}50%{box-shadow:0 0 14px rgba(200,170,110,1)}}
/* Player flashcards — leçon en cours */
.fcp{display:flex;flex-direction:column;min-height:100%}
.fcp-top{display:flex;align-items:center;justify-content:space-between;padding:4px 0 0}
.fcp-top .ttl{text-align:center}
.fcp-top .ttl .k{font:600 9.5px Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fcp-top .ttl b{display:block;font:italic 700 20px 'GT Sectra Display',Georgia,serif;margin-top:4px}
.fcp-top .cnt{font:800 italic 14px 'Inter Tight';color:#F2F4FA}
.fcp-top .cnt em{font-style:normal;font-weight:600;color:var(--muted)}
.fcp-x{display:grid;place-items:center;width:40px;height:36px;font-size:16px;color:#F2F4FA;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%);cursor:pointer}
.fcp-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.fcp-side{flex:0 0 70px;text-align:center;cursor:pointer}
.fcp-side .nb{font:italic 700 30px 'GT Sectra Display',Georgia,serif;line-height:1}
.fcp-side .lb{margin-top:6px;font:600 9px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fcp-side.rev .nb{color:#C8AA6E}
.fcp-side.ok .nb{color:#5DBB63}
.fcp-card{position:relative;flex:0 0 580px;height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.045));box-shadow:inset 0 1.6px 0 rgba(255,255,255,.42),inset 0 -1.6px 0 rgba(255,255,255,.16),0 24px 60px rgba(0,0,0,.45);clip-path:polygon(34px 0,calc(100% - 34px) 0,100% 50%,calc(100% - 34px) 100%,34px 100%,0 50%);cursor:pointer}
.fcp-card .kk{font:600 10px Inter;letter-spacing:.2em;text-transform:uppercase;color:#C8AA6E}
.fcp-card .hg{font:700 76px 'Noto Serif KR',serif;line-height:1;color:#F2F4FA}
.fcp-card .rm{font:italic 700 26px 'GT Sectra Display',Georgia,serif;color:rgba(255,255,255,.85)}
.fcp-card .flip{position:absolute;bottom:18px;display:flex;align-items:center;gap:7px;font:600 9.5px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fcp-card .star{position:absolute;top:18px;right:44px;font-size:17px;color:var(--muted);cursor:pointer}
.fcp-card .snd{position:absolute;top:18px;left:44px;font-size:17px;color:var(--muted);cursor:pointer}
.fcp-arr{flex:0 0 64px;display:grid;place-items:center;width:64px;height:56px;font-size:22px;color:#F2F4FA;background:rgba(255,255,255,.08);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),inset 0 -1.5px 0 rgba(255,255,255,.1);clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,15px 100%,0 50%);cursor:pointer}
.fcp-arr.v{background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);box-shadow:inset 0 0 0 1px rgba(200,170,110,.55),inset 0 1.5px 0 rgba(255,255,255,.28)}
.fcp-ctl{display:flex;align-items:center;justify-content:space-between;margin-top:26px}
.fcp-ctl .grp{display:flex;gap:8px}
.fcp-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font:600 10.5px Inter;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);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%);cursor:pointer}
.fcp-btn.on{background:color-mix(in oklab,#C8AA6E 30%,transparent);box-shadow:inset 0 0 0 1px rgba(200,170,110,.5);color:#fff}
.fcp-pb{position:relative;height:3px;margin-top:22px;background:rgba(255,255,255,.12)}
.fcp-pb i{position:absolute;left:0;top:0;bottom:0;width:40%;background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%)}
.fcp-pb em{position:absolute;right:0;top:-22px;font:600 10px Inter;letter-spacing:.1em;color:var(--muted);font-style:normal}
.fcp-kbd{display:flex;justify-content:center;gap:18px;margin-top:16px;font:500 10.5px Inter;color:var(--muted)}
.fcp-kbd b{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;margin-right:6px;font:600 10px Inter;color:#F2F4FA;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 50%,calc(100% - 5px) 100%,5px 100%,0 50%)}
.cdow{font:600 9.5px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:4px}
.cday{position:relative;min-height:96px;padding:9px 10px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.11);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);cursor:pointer}
.cday.out{opacity:.32}
.cday.today{background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1.5px rgba(200,170,110,.55)}
.cday .n{font:800 italic 14px 'Inter Tight';color:#F2F4FA}
.cday.out .n{color:var(--muted)}
.cev{display:block;margin-top:6px;padding:4px 7px;font:600 9.5px Inter;letter-spacing:.02em;color:#F2F4FA;background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);border-left:2px solid rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cev.v{background:color-mix(in oklab,#C8AA6E 26%,transparent);border-left-color:#C8AA6E}
.cev.b{border-left-color:#3B82C4}
.cev.g{border-left-color:#5DBB63}
.cmore{display:block;margin-top:5px;font:600 9px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.evlist{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.evrow{display:flex;align-items:center;gap:16px;padding:14px 18px;background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.03));box-shadow:inset 0 1.2px 0 rgba(255,255,255,.22),inset 0 -1.2px 0 rgba(255,255,255,.07);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);cursor:pointer}
.evd{flex:0 0 60px;text-align:center}
.evd b{display:block;font:italic 700 26px 'GT Sectra Display',Georgia,serif;line-height:1}
.evd span{font:600 9px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.evt{flex:1;min-width:0}
.evt b{display:block;font:italic 700 17px 'GT Sectra Display',Georgia,serif}
.evt span{font-size:12px;color:var(--muted)}
.evtag{flex:0 0 auto;padding:5px 13px;font:600 9px Inter;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
.evtag.v{background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);box-shadow:inset 0 0 0 1px rgba(200,170,110,.5);color:#fff}
/* Fiche événement */
.evhero{position:relative;height:300px;margin-top:20px;overflow:hidden;clip-path:polygon(30px 0,calc(100% - 30px) 0,100% 50%,calc(100% - 30px) 100%,30px 100%,0 50%)}
.evhero img{width:100%;height:100%;object-fit:cover;filter:brightness(.62)}
.evhero .ov{position:absolute;left:44px;bottom:32px;right:44px;z-index:2}
.evhero .ov .k{font:600 10px Inter;letter-spacing:.2em;text-transform:uppercase;color:#C8AA6E}
.evhero .ov h2{margin:8px 0 0;font:italic 700 38px 'GT Sectra Display',Georgia,serif;line-height:1.05}
.evhero .ov .mt{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:13px;color:rgba(255,255,255,.85)}
.evhero .ov .mt i.dm{width:4px;height:4px;transform:rotate(45deg);background:rgba(255,255,255,.35)}
.evfact{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.evfact div{padding:14px 16px;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,11px 100%,0 50%)}
.evfact .lb{font:600 9px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.evfact .vl{margin-top:6px;font:800 italic 15px 'Inter Tight';color:#F2F4FA}
.prog{display:flex;flex-direction:column;gap:0;margin-top:8px}
.prow{display:flex;align-items:center;gap:18px;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
.prow:last-child{border-bottom:0}
.prow .hh{flex:0 0 62px;font:800 italic 13px 'Inter Tight';color:#F2F4FA}
.prow .dd{flex:1;font-size:13px;color:rgba(255,255,255,.82)}
.prow .dd em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:3px}
.pdot{flex:0 0 auto;width:7px;height:7px;transform:rotate(45deg);background:rgba(255,255,255,.35)}
.pdot.v{background:linear-gradient(180deg,#F0E6D2,#C8AA6E 45%,#785A28);box-shadow:0 0 8px rgba(200,170,110,.7)}
.cta{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font:800 italic 13px 'Inter Tight';color:#0B0E1A;padding:13px 32px;background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);box-shadow:inset 0 0 0 1px rgba(200,170,110,.5);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);cursor:pointer}
.med i{font-size:30px;color:#F2F4FA;opacity:.92}
.bigmed .jg i{font-size:26px;color:rgba(255,255,255,.85)}
.crumb .home{color:rgba(255,255,255,.85);display:flex;align-items:center;font-size:15px}
/* fil d'Ariane SANS doré (retour Jason 31/08) : le `a{color:#C8AA6E}` global
   peignait les maillons en or sur les pages sans feuille propre (Poomsae…) */
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{color:#F2F4FA}
/* Respiration en BAS de toutes les pages : le dernier élément collait au bord
   (retour Jason 31/08 : « 80 px de padding bottom sur le main, tout sauf la
   nav »). */
.body-inside-container > .content { padding-bottom: 80px; }
/* ⚠ Ce padding ne suffisait PAS sur les pages dont le contenu dépasse l'écran
   sans être très long (page Clubs en mode carte, retour Jason 01/09). Cause :
   .body-inside-container est un flex en RANGÉE (sidebar | contenu) et .content
   y est étiré (align-self:stretch) à la hauteur de la LIGNE, soit un écran. Sa
   boîte reste donc à 100 % de haut pendant que ses enfants débordent, et les
   80 px de padding vivent À L'INTÉRIEUR de cette boîte, donc au-dessus du
   contenu qui déborde. Mesuré : padding réel de -110 px sur /clubs.
   On retire l'étirement et on rend la hauteur au contenu, en gardant un écran
   de haut minimum pour les pages courtes (comportement d'avant). */
.body-inside-container > .content.main {
  align-self: flex-start;
  height: auto;
  min-height: 100%;
}
.wtabs{display:flex;width:fit-content;gap:2px;margin-top:20px}
.wtab{position:relative;flex:0 0 auto;white-space:nowrap;padding:11px 30px;font:600 12.5px Inter;letter-spacing:.04em;color:var(--muted);clip-path:var(--hexc);background:rgba(255,255,255,.05);cursor:pointer}
.wtab.on{color:#F2F4FA;background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
.wtab.on:not(.wtabs .wtab)::before{content:'';position:absolute;inset:0;clip-path:var(--hexc);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),inset 0 -1.5px 0 rgba(255,255,255,.2);pointer-events:none}
.hx{display:inline-flex;margin:26px 0 14px;position:relative;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))}
/* filet d'1 px sur les SIX côtés : voir la note dans css/v3-grades.css */
.hx::before{content:'';position:absolute;inset:1px;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}
.hx .t{position:relative;z-index:1;font:italic 700 15px 'GT Sectra Display',Georgia,serif;letter-spacing:.06em}
.hx .t em{font-style:normal;font:500 11px 'Noto Serif KR',serif;color:var(--muted);margin-left:8px}
.wsep{display:flex;align-items:center;justify-content:center;gap:12px;margin:30px 0 6px}
.wsep .ln{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35))}
.wsep .ln.r{background:linear-gradient(270deg,transparent,rgba(255,255,255,.35))}
.wsep .sfil{width:20px;height:20px;filter:brightness(0) saturate(100%) invert(78%) sepia(24%) saturate(614%) hue-rotate(2deg) brightness(92%) contrast(88%) drop-shadow(0 0 6px color-mix(in oklab,#C8AA6E 45%,transparent))}
.wsep .sfleur{width:12px;height:12px;opacity:.55}
.card{position:relative;background:var(--card);border:1px solid transparent;border-image:linear-gradient(135deg,rgba(255,255,255,.4),rgba(255,255,255,.1) 40%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.22)) 1}
.hero2{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px;margin-top:22px}
.hcard{position:relative;height:210px;overflow:hidden;clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,24px 100%,0 50%)}
.hcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hcard::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,22,.86),rgba(8,12,22,.4) 55%,rgba(8,12,22,.15))}
.hcard .htx{position:absolute;left:44px;top:50%;transform:translateY(-50%);z-index:2;max-width:60%}
.hcard .k{font:600 9.5px Inter;letter-spacing:.18em;text-transform:uppercase;color:#C8AA6E}
.hcard h3{font-size:26px;margin:7px 0 6px}
.hcard p{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.5}
.hcard .go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:800 italic 12px 'Inter Tight';color:#0B0E1A;padding:9px 22px;background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);box-shadow:inset 0 0 0 1px rgba(200,170,110,.5);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%)}
.medgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.med{position:relative;height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%,0 50%);background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.1);cursor:pointer}
.med img{width:34px;height:34px;opacity:.92}
.med span{font:800 italic 10.5px 'Inter Tight';color:#F2F4FA}
.med .bn{position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px}
.dangrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.dant{position:relative;height:120px;overflow:hidden;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%);cursor:pointer}
.dant img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.dant .nm{position:absolute;left:0;right:0;bottom:12px;text-align:center;z-index:2}
.dant .nm b{display:block;font-size:15px;color:#fff}
.dant .nm em{font:500 10px 'Noto Serif KR',serif;font-style:normal;color:rgba(255,255,255,.7)}
.krow{display:flex;align-items:center;gap:13px;padding:11px 16px;margin-top:9px;cursor:pointer}
.krow .kb{width:6px;height:40px;flex:0 0 6px}
.krow .kt{flex:1}
.krow .kt b{display:block;font-size:16px}
.krow .kt span{font-size:11.5px;color:var(--muted)}
.krow .kn{font:800 italic 12px 'Inter Tight';color:var(--muted)}
.krow i{color:var(--muted)}
.sumgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:4px}
.sumrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.09)}
.sumrow .k{font:600 10px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sumrow .v{font-size:14px;text-align:right}
.sumrow .v.dsp{font:italic 700 16px 'GT Sectra Display',Georgia,serif}
.fichegrid{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:start}
.schemabox{position:relative;padding:22px;background:linear-gradient(160deg,#12203A,#0B1322);clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,24px 100%,0 50%)}
.schemabox::before{content:'';position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(88,225,218,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(88,225,218,.07) 1px,transparent 1px);background-size:26px 26px}
.schemabox img{position:relative;width:100%;display:block}
.gdesc{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.72);text-wrap:pretty;margin-top:10px}
.skillgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.skill{position:relative;height:150px;overflow:hidden;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);cursor:pointer}
.skill img{width:100%;height:100%;object-fit:cover;filter:brightness(.78)}
.skill .nm{position:absolute;left:14px;right:14px;bottom:10px;z-index:2;font:800 italic 11px 'Inter Tight';color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.85);text-align:center}
.skill::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,9,18,.8))}
.notab{margin-top:6px}
.notrow{display:flex;align-items:center;gap:14px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.09)}
.notrow:last-child{border-bottom:0}
.notrow .lb{flex:1;font-size:13.5px;color:rgba(255,255,255,.8)}
.notrow .pt{font:800 italic 14px 'Inter Tight';color:#F2F4FA;white-space:nowrap}
.notrow.tot .lb{font:italic 700 15px 'GT Sectra Display',Georgia,serif;color:#F2F4FA}
.notrow.tot .pt{color:#C8AA6E;font-size:16px}
.warn{display:flex;gap:12px;align-items:center;margin-top:20px;padding:12px 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%)}
.warn i{font-size:18px;color:#C8AA6E}
.warn p{flex:1;font-size:12.5px;color:rgba(255,255,255,.8)}
/* la croix : le rappel se lit une fois, pas à chaque onglet */
.warn-x{flex:none;width:24px;height:24px;display:grid;place-items:center;border:0;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.5);font-size:13px;padding:0}
.warn-x:hover{color:#F0E6D2}
.gtwo{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;align-items:start}
.repgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px}
.reprow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.08)}
.reprow b{font-size:14px;font-weight:600}
.reprow span{font-size:12px;color:var(--muted);text-align:right}
.seogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.seocard{position:relative;overflow:hidden;cursor:pointer}
.seocard .ph{position:relative;height:170px;overflow:hidden}
.seocard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.seocard .bp{position:absolute;right:8px;bottom:8px;width:52px;height:52px;padding:6px;background:rgba(10,18,34,.85);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(88,225,218,.35);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%)}
.seocard .bp img{width:100%;height:100%;object-fit:contain}
.seocard .tx{padding:11px 13px 13px}
.seocard .tx b{display:block;font-size:15px}
.seocard .tx span{font-size:11.5px;color:var(--muted)}
a{color:#C8AA6E;text-decoration:none}a:hover{color:#F2F4FA}
/* compléments pages 5-10 */
.srch{display:flex;align-items:center;gap:10px;margin-top:20px;padding:12px 20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);clip-path:var(--hexc);color:var(--muted);font-size:13px;max-width:420px}
.letter{display:inline-flex;margin:24px 0 8px;padding:7px 22px;position:relative;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.05));font:italic 700 15px 'GT Sectra Display',Georgia,serif}
.bigmed{display:flex;gap:14px;align-items:center;padding:16px 22px;cursor:pointer}
.bigmed .jg{flex:0 0 54px;width:54px;height:54px;display:grid;place-items:center;clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%);background:rgba(255,255,255,.08)}
.bigmed .jg img{width:32px;height:32px}
.bigmed .bt{flex:1}
.bigmed .bt b{display:block;font-size:18px}
.bigmed .bt span{font-size:11.5px;color:var(--muted)}
.bigmed .bnv{width:8px;height:44px;flex:0 0 8px}
.mvview{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;margin-top:22px;align-items:start}
.mvbig{position:relative;height:380px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mvbig img{width:100%;height:100%;object-fit:cover}
.mvbig .cap{position:static;padding:14px 6px 0;background:none}
.mvbig2{aspect-ratio:1;height:auto}
.mvduo{display:grid;grid-template-columns:1fr 170px;gap:12px;align-items:start}
.mvfoot{position:relative;aspect-ratio:1;padding:14px;background:linear-gradient(160deg,#12203A,#0B1322);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.mvfoot::before{content:'';position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px}
.mvfoot img{position:relative;width:100%;height:100%;object-fit:contain}
/* le libellé « Appuis · Ap Kubi » était en cyan : hors charte sur une fiche
   (le cyan reste réservé aux planches techniques) — retour Jason 24/08 */
.mvfoot .fl{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:600 8.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:#C8AA6E;z-index:2}
.mvgif{position:relative;margin-top:12px;aspect-ratio:1;overflow:hidden;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);background:#0B1322;cursor:pointer}
.mvgif img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.mvgif .pb2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:38px;display:grid;place-items:center;font-size:15px;color:#fff;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(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);z-index:2}
.mvgif .fl2{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:600 8.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);z-index:2}
.mvbig .cap b{font-size:22px}
.mvbig .cap span{display:block;font-size:12px;color:rgba(255,255,255,.7);margin-top:3px}
.mvnum{position:absolute;top:14px;left:40px;z-index:2;font:800 italic 13px 'Inter Tight';color:#F2F4FA;padding:7px 16px;background:rgba(10,15,28,.7);backdrop-filter:blur(8px);clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%)}
/* déroulé : lignes et vignettes plus hautes, on ne lisait rien (Jason 24/08) */
.mvrow{display:flex;align-items:center;gap:13px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer}
.mvrow:last-child{border-bottom:0}
.mvrow .n{flex:0 0 30px;font:800 italic 11px 'Inter Tight';color:var(--muted)}
.mvrow .th{flex:0 0 66px;width:66px;height:50px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);overflow:hidden}
.mvrow .th img{width:100%;height:100%;object-fit:cover}
.mvrow .tx{flex:1;min-width:0}
.mvrow .tx b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvrow .tx span{font-size:10.5px;color:var(--muted)}
.mvrow.on{margin:3px -10px;padding:12px 10px;background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1.5px rgba(200,170,110,.6);border-bottom:0}
.mvrow .n.red{color:#C8AA6E}

/* ── Fond de page ──────────────────────────────────────────────────────────
   glass-site.css (ancienne charte « Liquid Glass ») peint le body en
   #0B1322 → #050A14, un bleu plus vert que la nuit de la charte (#0B0E1A) sur
   laquelle tout le reste est construit. L'écart se voyait au bas des héros,
   comme une bande plus chaude. On aligne le fond sur la charte. */
body{background:linear-gradient(180deg,#0B0E1A,#070A12) fixed !important}

/* ── Flux news : pays, discipline, chapô ───────────────────────────────────
   Une brève ne se résume pas à un titre : on annonce d'où ça vient, de quoi il
   s'agit (combat ou technique), et deux ou trois lignes de contexte. */
.gk-news-pays{display:inline-flex;align-items:center;gap:5px;font:700 9px Inter;letter-spacing:.13em;text-transform:uppercase;
  color:#F0E6D2;padding:3px 9px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%)}
.gk-news-pays .fl{font-size:12px;line-height:1}
.gk-news-cat.is-comb{color:#0B0E1A;background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%)}
.gk-news-cat.is-poom{color:#E4CE9B;background:rgba(200,170,110,.16);box-shadow:inset 0 0 0 1px rgba(200,170,110,.45)}
.gk-news-title em{font-style:normal;color:#E4CE9B;font-weight:700}
.gk-news-res{margin:7px 0 0;font:500 12.5px/1.6 Inter;color:rgba(255,255,255,.66);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── Accueil : les articles d'entrée (ceinture blanche) ────────────────────
   À la place des trois intentions, qui supposent qu'on sait déjà ce qu'est un
   poomsae ou un keup. Vraies cartes d'article de blog (demande Jason) : une
   photo, une rubrique, un titre, un chapô, la durée de lecture. La ligne à
   pictogramme d'avant ne se lisait pas comme un article.
   Le biseau est ici en COINS coupés (haut gauche, bas droit) et non l'hexagone
   à pointes de mi-hauteur : sur une carte haute, la pointe médiane transforme
   le rectangle en losange. Le trait est fait à la recette maison, l'élément
   porte la couleur du trait et l'intérieur repose sur .in, rentré d'1 px. */
.hvb-arts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:8px}
.hvb-art{position:relative;display:block;padding:1px;text-decoration:none;
  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,transform .18s}
/* Pas de carte qui se soulève au survol : c'est le tic d'animation qu'on
   s'interdit ici. Le trait qui s'allume suffit à dire que c'est cliquable. */
.hvb-art:hover{background:linear-gradient(150deg,#F7EFDC,#C8AA6E 45%,#8A6A2F)}
.hvb-art .in{display:flex;flex-direction:column;height:100%;background:#0E1424;overflow:hidden;
  clip-path:polygon(19px 0,100% 0,100% calc(100% - 19px),calc(100% - 19px) 100%,0 100%,0 19px)}
.hvb-art .ph{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;flex:none}
.hvb-art .ph img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.72) saturate(.95);transition:filter .25s}
/* ⚠ SURTOUT PAS de `transform` sur cette image au survol. Un élément transformé
   part dans sa propre couche de composition et se peint AU-DESSUS du voile
   `.ph::after`, même en lui donnant un z-index : le dégradé sombre du bas de
   la photo disparaissait pendant le survol et laissait une barre claire entre
   la photo et le texte (retour Jason 25/08). Le filtre, lui, ne pose pas ce
   problème : il suffit à marquer le survol. */
.hvb-art:hover .ph img{filter:brightness(.95) saturate(1)}
.hvb-art .ph::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,#0E1424 2%,rgba(14,20,36,.25) 46%,transparent 78%)}
.hvb-art .kd{position:absolute;left:14px;bottom:11px;z-index:2;font:700 8.5px Inter,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:#C8AA6E}
.hvb-art .bd{display:flex;flex-direction:column;gap:7px;padding:14px 18px 0;flex:1}
.hvb-art .bd b{font:italic 700 19px/1.22 'GT Sectra Display',Georgia,serif;color:#F2EEE4;text-wrap:balance}
.hvb-art .bd .ex{font:400 12.5px/1.55 Inter,sans-serif;color:rgba(255,255,255,.6);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hvb-art .ft{display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap;
  margin:auto 18px 0;padding:12px 0 15px;color:#8A93AD;border-top:1px solid rgba(255,255,255,.07)}
.hvb-art .ft .min{font:700 italic 12px 'Inter Tight',Inter,sans-serif;font-variant-numeric:tabular-nums}
.hvb-art .ft .go{display:inline-flex;align-items:center;gap:5px;font:600 10.5px Inter,sans-serif;
  letter-spacing:.02em;color:#C8AA6E}
.hvb-art:hover .ft .go{color:#F0E6D2}
.hvb-art .ft .go i{font-size:12px;transition:transform .18s}
.hvb-art:hover .ft .go i{transform:translateX(3px)}
@media (max-width:1100px){.hvb-arts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hvb-arts{grid-template-columns:1fr;gap:11px}.hvb-art .bd b{font-size:17px}}

/* ── S'entraîner : le web consulte, l'app lance ────────────────────────────
   Les colonnes de l'échauffement n'étaient pas nommées, et il faut dire où se
   lance une séance maintenant que le bouton a disparu. */
.gk-ted-wcols{display:grid;grid-template-columns:minmax(180px,1fr) 50px 50px 52px 24px;gap:6px;align-items:center;
  padding:0 6px 6px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.14);
  font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#8A93AD}
.gk-ted-wcols span:nth-child(n+2){text-align:center}
.gk-tr-appnote{display:inline-flex;align-items:center;gap:7px;font:500 12px Inter;color:rgba(255,255,255,.55)}
.gk-tr-appnote i{font-size:15px;color:#C8AA6E}

/* ── Communauté : le web est en lecture seule ──────────────────────────────
   On publie depuis l'app mobile ; le bandeau le dit au lieu d'ouvrir un
   formulaire qui ne mène nulle part. */
.gk-com-composer.is--lecture{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 16px;margin-bottom:18px;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
  clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%)}
.gk-com-composer.is--lecture i{font-size:19px;color:#C8AA6E}
.gk-com-composer.is--lecture span{flex:1;min-width:180px;font:500 13px Inter;color:rgba(255,255,255,.78)}
.gk-com-stores{font:700 10px Inter;letter-spacing:.12em;text-transform:uppercase;color:#0B0E1A;text-decoration:none;
  padding:7px 13px;background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
.gk-com-stores:hover{filter:brightness(1.08)}

/* ── /poomsae : suggestions de MOUVEMENTS sous la recherche ────────────────
   « ap chagi » vit dans 15 poomsae : on liste les gestes, pas les fiches, et
   chaque ligne ouvre la Vue détaillée sur le bon numéro. */
.pl-sug{position:relative;margin-top:8px;max-height:min(52vh,420px);overflow:auto;display:none;
  background:rgba(11,14,26,.97);box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),0 26px 60px -24px rgba(0,0,0,.8);
  overscroll-behavior:contain;z-index:40}
.pl-sug.open{display:block}
.pl-s{display:flex;align-items:center;gap:12px;padding:11px 14px;text-decoration:none;color:#D8D4CC;
  border-bottom:1px solid rgba(255,255,255,.06)}
.pl-s:last-child{border-bottom:0}
.pl-s:hover,.pl-s.cur{background:rgba(200,170,110,.16);color:#F4EEDF}
.pl-s .pn{flex:0 0 148px;font:600 10px Inter;letter-spacing:.14em;text-transform:uppercase;color:#C8AA6E;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-s .pm{flex:1;min-width:0}
.pl-s .pm b{display:block;font:600 13.5px Inter;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-s .pm span{font:500 11px Inter;color:var(--muted)}
.pl-s .pnum{flex:none;font:800 italic 11px 'Inter Tight',Inter,sans-serif;color:var(--muted)}
@media (max-width:700px){.pl-s .pn{flex-basis:96px;font-size:9px}}
.vplay{position:relative;height:430px;overflow:hidden;clip-path:polygon(30px 0,calc(100% - 30px) 0,100% 50%,calc(100% - 30px) 100%,30px 100%,0 50%)}
.vplay img{width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.vplay .pb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:64px;display:grid;place-items:center;font-size:26px;color:#fff;background:rgba(10,15,28,.6);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);clip-path:polygon(17px 0,calc(100% - 17px) 0,100% 50%,calc(100% - 17px) 100%,17px 100%,0 50%);z-index:2}
.vplay .bar{position:absolute;left:44px;right:44px;bottom:20px;z-index:2}
.vplay .bar .tl{height:4px;background:rgba(255,255,255,.2)}
.vplay .bar .tl i{display:block;height:100%;width:34%;background:#C8AA6E;box-shadow:0 0 8px rgba(200,170,110,.7)}
.vplay .bar .tms{display:flex;justify-content:space-between;font:800 italic 11px 'Inter Tight';color:rgba(255,255,255,.8);margin-top:8px}
.chap{display:flex;gap:10px;margin-top:14px}
.chap .ch{flex:1;padding:10px 14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,11px 100%,0 50%);cursor:pointer}
.chap .ch b{display:block;font-size:12.5px}
.chap .ch span{font:800 italic 10.5px 'Inter Tight';color:var(--muted)}
.chap .ch.on{box-shadow:inset 0 0 0 1.5px rgba(200,170,110,.6)}
.tree{position:relative;height:560px;margin-top:22px;overflow:hidden;clip-path:polygon(30px 0,calc(100% - 30px) 0,100% 50%,calc(100% - 30px) 100%,30px 100%,0 50%);background:radial-gradient(70% 60% at 50% 40%,#13223C,#080E1A)}
.tree::before{content:'';position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(88,225,218,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(88,225,218,.06) 1px,transparent 1px);background-size:34px 34px}
.tnode{position:absolute;display:grid;place-items:center;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);font:800 italic 11px 'Inter Tight';color:#F2F4FA;padding:10px 20px}
.tnode.root{background:color-mix(in oklab,#C8AA6E 50%,transparent);box-shadow:inset 0 0 0 1.5px rgba(200,170,110,.7),0 0 24px rgba(200,170,110,.4)}
.tlink{position:absolute;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.08));transform-origin:0 0}
.tctl{position:absolute;right:22px;bottom:22px;display:flex;flex-direction:column;gap:8px;z-index:3}
.tctl span{width:42px;height:36px;display:grid;place-items:center;color:#F2F4FA;background:rgba(10,15,28,.75);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%)}
.feedg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.fcard{position:relative;height:230px;overflow:hidden;clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%,0 50%);cursor:pointer}
.fcard img{width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.fcard::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,9,18,.85))}
.fcard .k2{position:absolute;top:12px;left:30px;z-index:2;font:600 8.5px Inter;letter-spacing:.16em;text-transform:uppercase;color:#F2F4FA;padding:5px 13px;background:rgba(10,15,28,.65);backdrop-filter:blur(6px);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
.fcard .tx2{position:absolute;left:30px;right:30px;bottom:14px;z-index:2}
.fcard .tx2 b{display:block;font-size:17px}
.fcard .tx2 span{font-size:11px;color:rgba(255,255,255,.7)}

/* ===== portage charte mobile v3 ===== */
/* onglets solohex (container satin lumière haut-gauche + actif hexagone éclairé) */
.wtabs{position:relative;width:fit-content;gap:2px;padding:6px;margin-top:20px;background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.28) 30%,rgba(255,255,255,.07) 55%,rgba(255,255,255,.22) 82%,rgba(255,255,255,.40));clip-path:polygon(17px 0,calc(100% - 17px) 0,100% 50%,calc(100% - 17px) 100%,17px 100%,0 50%)}
.wtabs::before{content:'';position:absolute;inset:0;z-index:0;background:rgba(14,18,30,.72);backdrop-filter:blur(12px);clip-path:polygon(17.8px 1.5px,calc(100% - 17.8px) 1.5px,calc(100% - 1.8px) 50%,calc(100% - 17.8px) calc(100% - 1.5px),17.8px calc(100% - 1.5px),1.8px 50%)}
.wtabs>*{position:relative;z-index:1}
.wtabs .wtab{background:none;clip-path:none;box-shadow:none;color:rgba(255,255,255,.72)}
.wtabs .wtab.on{position:relative;isolation:isolate;color:#fff;background:none;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.wtabs .wtab.on::before{content:'';position:absolute;inset:0;z-index:-2;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,.82),rgba(255,255,255,.34) 32%,rgba(255,255,255,.10) 56%,rgba(255,255,255,.26) 82%,rgba(255,255,255,.52))}
.wtabs .wtab.on::after{content:'';position:absolute;inset:1.5px;z-index:-1;clip-path:polygon(14.7px 0,calc(100% - 14.7px) 0,100% 50%,calc(100% - 14.7px) 100%,14.7px 100%,0 50%);background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.05) 44%,rgba(255,255,255,.13) 100%),#161D30}
.main.mhero .wtabs .wtab,.main.mhero .wtabs .wtab.on{background:none}
/* fleuron sous les titres de page (repris du header mobile) */
.pgflr{display:flex;align-items:center;gap:8px;margin-top:9px}
.pgflr i{width:6px;height:6px;transform:rotate(45deg);background:linear-gradient(180deg,#F0E6D2,#C8AA6E 42%,#785A28);box-shadow:inset 0 1px 0 rgba(240,230,210,.8),0 0 6px rgba(200,170,110,.25)}
.pgflr .l1{width:26px;height:1px;background:linear-gradient(270deg,#C89B3C,transparent)}
.pgflr .l2{width:64px;height:1px;background:linear-gradient(90deg,#C89B3C,transparent)}
/* barres de progression : or, coupe hexagonale */
.bar,.progbar{clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 50%,calc(100% - 3px) 100%,3px 100%,0 50%)}
.bar>span,.prog>span,.bar>em,.prog>em{background:linear-gradient(90deg,#C8AA6E,#785A28)!important}
/* swatch ceinture vertical : coupe hexagonale comme les médaillons */
.bnv{clip-path:polygon(0 6px,100% 0,100% calc(100% - 6px),0 100%)}

/* rangées hexagonales façon mobile */
.card.bigmed{border:0;background:rgba(255,255,255,.05);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.05);margin-bottom:10px}
.bigmed .jg{background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.bigmed:hover{background:rgba(255,255,255,.08)}

/* cartes dan avec image — reprises de l'app */
.pdangrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pdan{position:relative;height:120px;overflow:hidden;clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%,0 50%);cursor:pointer}
.pdan img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.72)}

.pdan .pdn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2}
.pdan .pdn b{font:italic 700 27px 'GT Sectra Display',Georgia,serif;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.pdan .fg{position:absolute;left:50%;top:50%;width:86px;height:86px;transform:translate(-50%,-50%);z-index:1;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.25) 34%,rgba(0,0,0,0) 58%),linear-gradient(0deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 22%),#0A0E1A}
.pdan .pdn em{display:block;font:400 13px 'Noto Serif KR',serif;font-style:normal;color:rgba(255,255,255,.72);margin-top:3px;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.pdan .dtag{position:absolute;right:26px;top:10px;z-index:2;font:800 italic 10.5px 'Inter Tight';color:#E8C77E}


/* ============================================================================
   ÉTATS (la maquette n'en définit aucun) — conventions du site conservées
   ========================================================================== */
.sit:hover { background: rgba(255,255,255,.05); color: #fff; }
.sit.on:hover { background: none; }
.sit.on:hover::after { background: linear-gradient(90deg,color-mix(in oklab,#C8AA6E 28%,transparent),transparent 80%); }
.wtab:hover { color: var(--text); }
.wtabs .wtab:hover { color: #fff; }
.fchip:hover, .fsel:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.porte:hover, .nrow:hover, .evrow:hover, .letter:hover { filter: brightness(1.12); }
.cta:hover, .resume:not(.introduction_container) .go2:hover { filter: brightness(1.06); }
.seeall:hover, a.seeall:hover { color: #F0E6D2; }
.hxring:hover { --hxc: rgba(255,255,255,.3); }
.snav:hover, .srch:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
button:focus-visible, a:focus-visible, .sit:focus-visible, .wtab:focus-visible {
  outline: 2px solid #C8AA6E; outline-offset: 2px;
}
[disabled], .is--soon { opacity: .55; cursor: default; }
/* badge « Bientôt » */
.gsoon { font: 600 8.5px Inter; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5);
  padding: 3px 8px; background: rgba(255,255,255,.06);
  clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%); }

/* ============================================================================
   ADAPTATEUR SHELL — gk-shell.js pose .sb sur la .navbar et .main sur .content
   ========================================================================== */
.navbar.sb {
  width: 250px; min-width: 250px; max-width: 250px; height: 100vh;
  overflow-y: auto; border-radius: 0;
}
/* ⚠ La nav DOIT rester à l'écran, et sticky ne peut pas le faire ici : le
   défilement se fait sur <body> (html+body ont overflow-x:hidden, donc un
   overflow-y:auto implicite) alors que .body-inside-container est figé à
   height:100vh. Un position:sticky est borné par son parent : dans un parent
   qui ne dépasse pas l'écran il n'a aucune marge de déplacement, la nav
   remontait donc avec la page. On la sort du flux (fixed = calé sur le
   viewport ; vérifié : aucun ancêtre n'a transform/filter/perspective qui
   ferait retomber le fixed en absolute) et on rend sa largeur au contenu par
   une marge. Le sélecteur exige le conteneur de page pour ne pas toucher les
   maquettes de nav des pages de démo _logo-*.html.
   <= 991px : la nav est déjà en off-canvas fixed (responsive-mobile.css). */
@media (min-width: 992px) {
  .body-inside-container > .navbar.sb { position: fixed; left: 0; top: 0; }
  .body-inside-container > .content.main { margin-left: 250px; }
  /* .content est un ENFANT FLEX : sans min-width:0, sa largeur minimale est
     dictée par son plus large enfant insécable (la rangée d'onglets nowrap
     des fiches, 971 px) et TOUTE la page déborde à droite sur iPad paysage
     (audit responsive 29/08). */
  .body-inside-container > .content { min-width: 0; }
}
.navbar.sb::-webkit-scrollbar { width: 5px; }
.navbar.sb::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* ── Nav REPLIABLE : rail d'icônes 64px + tooltips (retour Jason 31/08) ──────
   L'état (html.gk-sb-mini) est posé par gk-shell.js avant le rendu. Le rail
   n'existe qu'à partir de 992px : en dessous, la nav est déjà en off-canvas
   (responsive-mobile.css) et garde son hamburger. */
.sb-tete { display: flex; align-items: center; margin-bottom: 16px; }
.sb-tete .brand { margin-bottom: 0; flex: 1; min-width: 0; }
.sb-plier {
  flex: none; width: 30px; height: 30px; display: none; place-items: center;
  border: 0; cursor: pointer; color: #8A93AD; background: rgba(255,255,255,.06);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
}
.sb-plier:hover { color: #F0E6D2; background: rgba(200,170,110,.25); }
.sb-plier i { font-size: 14px; }
@media (min-width: 992px) {
  .sb-plier { display: grid; }
  /* la transition n'existe QUE pendant le clic sur le bouton plier (classe posée
     320 ms par gk-shell) : permanente, elle rejouait un glissement de 0,2 s à
     chaque navigation (nav deferred + swap SPA changent les styles après le
     1er rendu : bug home ↔ Inspiration, Jason 31/08 soir) */
  html.gk-sb-anim .navbar.sb { transition: width .22s ease, min-width .22s ease, max-width .22s ease, padding .22s ease; }
  html.gk-sb-anim .body-inside-container > .content.main { transition: margin-left .22s ease; }
  html.gk-sb-mini .navbar.sb { width: 64px; min-width: 64px; max-width: 64px; padding: 18px 9px; }
  html.gk-sb-mini .body-inside-container > .content.main { margin-left: 64px; }
  html.gk-sb-mini .sb-tete { flex-direction: column; gap: 10px; }
  html.gk-sb-mini .sb .brand { justify-content: center; }
  html.gk-sb-mini .sb .brand .lg, html.gk-sb-mini .sb .brand .lg svg { width: 32px; height: 32px; }
  html.gk-sb-mini .sb .brand .nm,
  html.gk-sb-mini .sb .sit .tx,
  html.gk-sb-mini .sb .sgrp,
  html.gk-sb-mini .sb .ssub,
  html.gk-sb-mini .sb .sit-more,
  html.gk-sb-mini .sb .sbsep,
  html.gk-sb-mini .sb .nav_bottom,
  html.gk-sb-mini .sb .ver { display: none; }
  html.gk-sb-mini .sb .sit { justify-content: center; padding: 11px 0; }
  html.gk-sb-mini .sb .sit i { font-size: 19px; margin: 0; }
}
/* le tooltip du rail : RECTANGLE (un panneau flottant, pas un bouton), anneau
   or, posé en fixed par gk-shell pour échapper à l'overflow de la sidebar */
.sb-tip {
  position: fixed; z-index: 1300; transform: translateY(-50%);
  padding: 7px 14px; white-space: nowrap; pointer-events: none;
  font: 600 11.5px Inter, sans-serif; color: #F2F4FA;
  background: #0E1424;
  box-shadow: inset 0 0 0 1px rgba(200,170,110,.45), 0 10px 26px rgba(0,0,0,.5);
}
.content.main { border-radius: 0; }
/* ── Cluster utilisateur (bas de sidebar) ────────────────────────────────────
   UNE rangée : identité (bouton compte, flex 1) + cloche réduite à son icône.
   Avant : deux gros blocs empilés « Compte » (avec menu déroulant) et
   « Notifications », de même poids visuel pour deux natures différentes.
   Le menu a disparu (tkd-account) : le bouton NAVIGUE (profil ou connexion),
   la cloche ALERTE. Stores et langue en dessous, version en pied. */
.sb .nav_bottom { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 0;
  /* la sidebar (flex column) étire ce bloc : sans align-content:start, les
     rangées de la grille se partagent l'excédent et tout devient obèse */
  align-content: start; grid-auto-rows: min-content; align-items: stretch; }
.sb .gk-acct-wrap { grid-column: 1; margin: 0; min-width: 0; }
.sb .gk-acct-btn { height: 100%; border-radius: 0; transform: none !important;
  background: rgba(255,255,255,.05); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  padding: 9px 16px; font-size: 13px; }
.sb .gk-acct-btn:hover { background: rgba(255,255,255,.09); }
.sb .gk-acct-btn.is--in { box-shadow: inset 0 0 0 1px rgba(200,170,110,.4); }
/* ⚠ MÊME SENS que le bouton qui le contient : pointes à gauche et à droite,
   pas en haut et en bas. Un hexagone pointe-en-haut dans un hexagone
   pointe-sur-le-côté, les angles partent dans deux directions et ça se voit
   tout de suite (retour Jason 25/08). */
.sb .gk-acct-avatar { border-radius: 0; width: 24px; height: 24px; font-size: 11px; color: #0B0E1A;
  background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.sb .gk-acct-go { margin-left: auto; font-size: 13px; color: var(--gk-muted); }
.sb .gk-acct-btn:hover .gk-acct-go { color: #E8C77E; }
/* cloche : icône seule, même hauteur que le bouton compte, badge conservé */
.sb .gk-ntf-bell { grid-column: 2; width: 42px; margin: 0; padding: 0; justify-content: center;
  border-radius: 0; border: 0; transform: none !important;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.sb .gk-ntf-bell:hover { background: rgba(255,255,255,.09); }
.sb .gk-ntf-bell-tx { display: none; }
.sb .gk-ntf-badge { top: 1px; right: 3px; }
.sb .flex_store { grid-column: 1 / -1; display: flex; gap: 6px; }
.sb .gk-lang { grid-column: 1 / -1; }
.sb .gk-store-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; font: 600 10px Inter; letter-spacing: .04em; color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);
  border: 0; text-decoration: none; }
/* le rouge d interface bascule à l or (le rouge ne reste que ceinture/gemme) */
.gk-ntf-badge, .gk-ntf-dot { background: #C8AA6E; color: #0B0E1A; box-shadow: 0 0 0 2px rgba(11,14,26,.8); }
.gk-ntf-reply.is--new { border-color: rgba(200,170,110,.5); }
.gk-tr-finish { color: #E8C77E; background: color-mix(in oklab,#C8AA6E 12%,transparent);
  border: 1px solid rgba(200,170,110,.45); }
.gk-tr-finish:hover { background: color-mix(in oklab,#C8AA6E 20%,transparent); }
/* mode clair auto : déclinaisons or foncé */
.gk-light { --gk-aqua: #8a6d1c; --gk-amber: #8a6d1c; --gk-gold: #8a6d1c; }
/* l'attribut hidden doit gagner sur .ssub{display:flex} (groupes repliés) */
.ssub[hidden], .ssub2[hidden] { display: none; }

/* ============================================================================
   MOBILE — la maquette v3 était desktop 1280 uniquement : ce bloc rattrape les
   composants qui ne tiennent pas sur un téléphone. Rien ne change au-dessus de
   991px (le rendu maquette est conservé tel quel sur desktop).
   ========================================================================== */
@media (max-width: 991px) {
  .navbar.sb { padding: 18px 14px; }
  /* ⚠ padding-left en !important : responsive-mobile.css pose
     `.content { padding-left: 0 !important }` sous 991px, et .main EST cette
     .content. Sans ce rappel, tout le contenu colle au bord gauche de l'écran
     alors qu'il garde 16px à droite — asymétrie visible sur chaque page. */
  .main { padding: 18px 16px 32px; padding-left: 16px !important; }
  .main.mhero::before { height: 190px; }

  /* onglets : jamais tronqués, la barre défile (6 onglets sur Communauté).
     height:auto car le conteneur perd sa découpe et son padding ici : la
     hauteur fixe du bloc « géométrie hexagonale » n'a plus de raison d'être. */
  .wtabs {
    width: auto; max-width: 100%; height: auto;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    clip-path: none; background: none; padding: 0;
  }
  .wtabs::-webkit-scrollbar { display: none; }
  .wtabs::before { display: none; }
  .wtab { padding: 10px 18px; font-size: 12px; }

  /* l'échelle typo 56px de la maquette déborde à 375px */
  h1.display { font-size: clamp(30px, 8.2vw, 44px) !important; line-height: 1.08 !important; }
  .gkf-head h1.display { font-size: clamp(28px, 7.6vw, 40px) !important; }
  .hx { margin: 20px 0 12px; padding: 9px 22px; }

  /* toutes les grilles multi-colonnes de la refonte repassent en 1 colonne */
  .gtwo, .fichegrid, .sumgrid, .medgrid, .pdangrid, .mvduo,
  .ap-top, .rh-grid, .com-grid, .ev-grid, .club-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* ce qui doit défiler plutôt que déborder */
  .calgrid-wrap, .ted-scroll { overflow-x: auto; }
  .rh-rail { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
}
@media (max-width: 480px) {
  .main { padding: 14px 12px 28px; padding-left: 12px !important; }
  .wtab { padding: 9px 14px; }
  .crumb { font-size: 12px; gap: 6px; }
  .cta { width: 100%; justify-content: center; }
  .calgrid { min-width: 320px; }
}

/* ============================================================================
   GÉOMÉTRIE HEXAGONALE — retours Jason 14/08

   Deux défauts systémiques de la maquette, corrigés ici pour tout le site.

   1) « la stroke ne suit pas l'hexagone »
      Un `box-shadow: inset 0 0 0 1px` dessine TOUJOURS un rectangle. Sur une
      surface découpée au clip-path, ce rectangle est rogné aux pointes : on
      voyait un carré à l'intérieur de l'hexagone (barre de recherche Poomsae,
      chips, boutons de contrôle). Remplacement : la surface porte la couleur du
      trait, un pseudo-élément posé en `inset: t` redonne le fond. Le trait
      épouse alors exactement la découpe.

   2) « les angles du conteneur et de l'onglet actif ne sont pas parallèles »
      Deux hexagones concentriques n'ont le même angle que si le retrait
      horizontal est homothétique à la hauteur :
            x_intérieur = x_extérieur × (H − 2t) ÷ H
      Le composant onglets violait cette règle : conteneur 17px pour 49px de
      haut (pente 0,69) contre onglet actif 16px pour 37px (pente 0,86).
      Tous les nombres ci-dessous sortent de cette formule.

   ⚠ Les hauteurs sont FIXÉES en box-border. Avec `line-height: normal` la
   hauteur dépend des métriques de la police : les retraits calculés ci-dessus
   deviendraient faux au premier changement de fonte.
   ========================================================================== */

/* — Onglets : pente unique 17 / 24,5 = 0,694 —
   conteneur H=49 x=17 · fond interne t=1,5 → H=46 x=15,96
   onglet actif H=37 x=12,84 · fond interne t=1,5 → H=34 x=11,80 */
.wtabs { height: 49px; box-sizing: border-box; align-items: stretch; flex-shrink: 0; }
.wtabs .wtab { display: inline-flex; align-items: center; line-height: 1; }
.wtabs::before {
  inset: 1.5px;
  clip-path: polygon(15.96px 0,calc(100% - 15.96px) 0,100% 50%,calc(100% - 15.96px) 100%,15.96px 100%,0 50%);
}
.wtabs .wtab.on::before {
  clip-path: polygon(12.84px 0,calc(100% - 12.84px) 0,100% 50%,calc(100% - 12.84px) 100%,12.84px 100%,0 50%);
}
.wtabs .wtab.on::after {
  clip-path: polygon(11.8px 0,calc(100% - 11.8px) 0,100% 50%,calc(100% - 11.8px) 100%,11.8px 100%,0 50%);
}

/* — Onglet isolé (hors conteneur) : le liseré haut/bas bavait sur les pointes,
     il devient un vrai anneau hexagonal. H=37 x=14 · t=1,5 → H=34 x=12,86 — */
.wtab.on:not(.wtabs .wtab) {
  position: relative; isolation: isolate;
  background: linear-gradient(150deg,rgba(255,255,255,.46),rgba(255,255,255,.13));
}
.wtab.on:not(.wtabs .wtab)::before {
  inset: 1.5px; z-index: -1; box-shadow: none;
  clip-path: polygon(12.86px 0,calc(100% - 12.86px) 0,100% 50%,calc(100% - 12.86px) 100%,12.86px 100%,0 50%);
  background: linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.06)), var(--bg);
}


/* ⚠ flex-shrink:0 sur tous les contrôles à hauteur fixe du bloc ci-dessous.
   Beaucoup vivent dans un conteneur flex en colonne (.content pour la barre de
   recherche, la sidebar pour .snav) : par défaut un enfant flex se COMPRIME
   sous sa hauteur déclarée quand la place manque. Résultat constaté : la barre
   de recherche tombait à 24px au lieu de 40, celle de la sidebar à 20px au lieu
   de 31, avec un padding vertical nul, donc du texte collé aux bords. */
/* — Barre de recherche (Poomsae, Ressources, Lexique) : c'était le « carré
     dans l'hexagone » le plus visible. H=40 x=14 · t=1 → H=38 x=13,3 — */
.srch {
  position: relative; isolation: isolate; flex: 0 0 auto;
  height: 40px; box-sizing: border-box; padding: 0 20px; margin-top: 20px;
  box-shadow: none; background: rgba(255,255,255,.2);
}
/* ⚠ Le remplissage doit être SOMBRE, pas du blanc translucide : posé sur un fond
   déjà à .2 de blanc (qui porte le trait), un fill à .06 de blanc donnait un
   intérieur PLUS CLAIR que le contour, d'où « le carré blanc horrible dans
   l'hexagone » (Jason 24/08). Même recette que .hvb-field. */
.srch::after {
  content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background: rgba(12,16,30,.86);
  clip-path: polygon(13.3px 0,calc(100% - 13.3px) 0,100% 50%,calc(100% - 13.3px) 100%,13.3px 100%,0 50%);
}
/* L'input a son propre trait et son propre fond, hérités du kit : posés au
   milieu de l'hexagone, ça faisait un rectangle visible dedans (retour Jason
   25/08). Le contenant porte déjà le contour, l'input n'a rien à dessiner.
   !important : les règles d'input du socle sont elles-mêmes en !important. */
/* ⚠ SPÉCIFICITÉ. glass-site.css impose
     input:not([type=checkbox]):not([type=radio]):not([type=range]) {
       border: 1px solid … !important }
   soit (0,3,1). Un simple `.srch input !important` pèse (0,1,1) : il PERD, et
   le rectangle restait visible dans l'hexagone. On reprend donc la même chaîne
   de :not() — `:is()` ne compte que son argument le plus spécifique — pour
   monter à (0,4,1). */
:is(.srch, .snav, .hvb-field, .clb-champ, .gk-lex)
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  background: transparent !important; border-radius: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.srch:hover, .srch:focus-within { box-shadow: none; background: rgba(255,255,255,.42); }
.srch:hover::after, .srch:focus-within::after { background: rgba(14,19,36,.9); }

/* — Recherche de la sidebar : H=31 x=9 · t=1 → H=29 x=8,42 — */
.snav {
  position: relative; isolation: isolate; flex: 0 0 auto;
  height: 31px; box-sizing: border-box; padding: 0 12px;
  box-shadow: none; background: rgba(255,255,255,.18);
}
.snav::after {
  content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.05);
  clip-path: polygon(8.42px 0,calc(100% - 8.42px) 0,100% 50%,calc(100% - 8.42px) 100%,8.42px 100%,0 50%);
}
.snav:hover { box-shadow: none; background: rgba(255,255,255,.3); }

/* — Chips de filtre : H=27 x=8 · t=1 → H=25 x=7,41 (l'état actif utilisait
     7,6px, donc un angle légèrement différent de sa propre découpe) — */
.fchip {
  position: relative; isolation: isolate; flex: 0 0 auto;
  height: 27px; box-sizing: border-box; padding: 0 13px;
  box-shadow: none; background: rgba(255,255,255,.16);
}
.fchip::after {
  content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.06);
  clip-path: polygon(7.41px 0,calc(100% - 7.41px) 0,100% 50%,calc(100% - 7.41px) 100%,7.41px 100%,0 50%);
}
.fchip:hover { box-shadow: none; background: rgba(255,255,255,.3); }
.fchip.on::before {
  clip-path: polygon(7.41px 0,calc(100% - 7.41px) 0,100% 50%,calc(100% - 7.41px) 100%,7.41px 100%,0 50%);
}
.fchip.on::after { background: none; }

/* — Sélecteurs : H=31 x=10 · t=1 → H=29 x=9,35 — */
.fsel {
  position: relative; isolation: isolate; flex: 0 0 auto;
  height: 31px; box-sizing: border-box; padding: 0 16px;
  box-shadow: none; background: rgba(255,255,255,.2);
}
.fsel::after {
  content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.07);
  clip-path: polygon(9.35px 0,calc(100% - 9.35px) 0,100% 50%,calc(100% - 9.35px) 100%,9.35px 100%,0 50%);
}
.fsel:hover { box-shadow: none; background: rgba(255,255,255,.34); }

/* — Boutons stores de la sidebar : H=30 x=8 · t=1 → H=28 x=7,47 — */
.sb .gk-store-btn {
  position: relative; isolation: isolate;
  height: 30px; box-sizing: border-box; padding: 0 6px;
  box-shadow: none; background: rgba(255,255,255,.16);
}
.sb .gk-store-btn::after {
  content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.05);
  clip-path: polygon(7.47px 0,calc(100% - 7.47px) 0,100% 50%,calc(100% - 7.47px) 100%,7.47px 100%,0 50%);
}

/* — Puces de chapitre vidéo : H=39 x=11 · t=1 → H=37 x=10,44 — */
.chap .ch {
  position: relative; isolation: isolate; flex-shrink: 0;
  height: 39px; box-sizing: border-box; padding: 0 14px;
  box-shadow: none; background: rgba(255,255,255,.16);
}
.chap .ch::after {
  content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.05);
  clip-path: polygon(10.44px 0,calc(100% - 10.44px) 0,100% 50%,calc(100% - 10.44px) 100%,10.44px 100%,0 50%);
}
.chap .ch.on { box-shadow: none; background: rgba(200,170,110,.6); }

/* — Boutons or pleins : l'anneau rectangulaire coupait les pointes et
     n'apportait rien sur un fond déjà doré. Retiré. — */
.cta, .resume:not(.introduction_container) .go2, .hcard .go { box-shadow: none; }

/* ============================================================================
   HÉROS — l'image s'arrêtait 24px avant le bord droit de la fenêtre :
   glass-site.css annule les paddings gauche/haut/bas de .body-inside-container
   au-dessus de 992px mais garde `padding: 24px` à DROITE. La nav est collée à
   gauche, le contenu doit donc l'être à droite : le bandeau prend enfin toute
   la largeur disponible.
   ========================================================================== */
@media (min-width: 992px) {
  .gkv3 .body-inside-container { padding-right: 0 !important; }
}

/* La dernière section touchait le bas de l'écran : 40px de respiration ne
   suffisent pas sous une grille de tuiles de 116px. */
.main { padding-bottom: 88px; }
@media (max-width: 991px) { .main { padding-bottom: 64px; } }

/* ============================================================================
   TITRES DE SECTION .hxt — les gros pavés hexagonaux (« Taegeuk · les 8 Jang »,
   « Dan · ceinture noire ») écrasaient le titre dans une pastille étroite.
   Remplacés par un vrai titre de section, plus grand, encadré d'un filet à
   gauche et à droite. Le pavé .hx reste pour les sous-titres INTERNES aux
   composants (Déroulé, Chapitres), où il est à sa place.
   ========================================================================== */
/* Respiration demandée par Jason (25/08) : 120 px au-dessus, 64 px en dessous.
   Le premier titre d'une page garde une marge normale, sinon il décollerait du
   fil d'Ariane. */
.hxt { display: flex; align-items: center; gap: 18px; margin: 120px 0 64px; }
.hxt:first-child, .content > .hxt:first-of-type { margin-top: 44px; }
.hxt .ln { flex: 1; height: 1px; min-width: 20px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.34)); }
.hxt .ln.r { background: linear-gradient(270deg,transparent,rgba(255,255,255,.34)); }
.hxt .t { flex: 0 0 auto; text-align: center;
  font: italic 700 clamp(20px,2.2vw,27px) 'GT Sectra Display',Georgia,serif;
  letter-spacing: .02em; color: #F2F4FA; }
.hxt .t em { display: block; margin: 3px 0 0; font-style: normal;
  font: 500 12px 'Noto Serif KR',serif; letter-spacing: .1em; color: var(--muted); }
@media (max-width: 480px) { .hxt { gap: 10px; } }

/* ── Intertitres en petites capitales portés par un <hN> ─────────────────────
   glass-site.css impose `font-family:"GT Sectra Display"… !important` à TOUS
   les h1-h6 : c'était pour battre le `h2{font-family:Urbanist}` baké dans la
   feuille Webflow. Effet de bord : les intertitres du kit qui demandent de
   l'Inter en petites capitales sortaient en SERIF 12,5 px — « TA RÉGULARITÉ »
   (/entrainement), « FAVORIS » et « ENREGISTRÉS » (/profile), « ENTRAÎNEMENT »
   (profil public). D'où l'impression d'un titre resté brut : un serif en
   capitales à 12 px ne ressemble à rien d'autre sur le site. Et .gk-prof-h
   n'avait jamais été passé à l'or, alors que ses trois jumeaux du même bloc
   (.gk-free-h, .gk-pv-h, .gk-lex-sub) le sont.
   On leur rend l'eyebrow standard : Inter 600 10 px, .18em, or. Seul un
   !important peut reprendre la main sur la famille.
   EXCLUS : .gk-bib-v3 (/ressources, /lexique) et .gk-fiche-v3 (/poomsae/*),
   qui re-titrent déjà ces classes en filet ou en pavé : elles vont bien. */
.gk-prof-h,
.content:not(.gk-bib-v3):not(.gk-fiche-v3) .gk-free-h,
.content:not(.gk-bib-v3):not(.gk-fiche-v3) .gk-pv-h,
.content:not(.gk-bib-v3):not(.gk-fiche-v3) .gk-lex-sub {
  font-family: "Inter", sans-serif !important;
  font-size: 10px; font-weight: 600; font-style: normal; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
  color: #C8AA6E;
  margin: 30px 0 14px;
}

/* Symboles des Taegeuk : 6 SVG sur 8 sont en #F2F4FA mais chil-jang et
   pal-jang en #F7D8A9 (crème), d'où deux icônes qui juraient dans la grille.
   Normalisé en CSS plutôt qu'en retouchant les fichiers : vrai pour tout
   nouveau symbole ajouté plus tard, quelle que soit sa couleur d'origine. */
.bigmed .jg img { filter: brightness(0) invert(1); }

/* ── Features réservées au compte admin (gk-admin.js) ────────────────────────
   Le web a de l'avance sur l'app : Calendrier des événements, fiches club,
   onglets Carte/Clubs/Fédérations/Compétitions. Rien n'est supprimé, tout est
   masqué tant que la feature n'est pas sortie. `[hidden]` seul ne suffit pas :
   les classes du kit imposent un display, d'où le !important ciblé. */
[data-gk-admin-only][hidden] { display: none !important; }
/* page gardée : invisible tant que l'auth n'a pas tranché (pas de clignotement) */
.gk-gate-off { visibility: hidden; }
/* page réservée vue par un visiteur : le contenu est MASQUÉ, pas détruit, pour
   revenir instantanément si l'admin se connecte depuis cette page. */
.gk-gated > *:not(.crumb):not([data-gk-soon]) { display: none !important; }

/* ── Panneau « Bientôt » ─────────────────────────────────────────────────────
   Vit ICI et non dans v3-social.css : gk-admin.js l'injecte aussi dans les
   pages Calendrier / Événement / Club, qui ne chargent que v3-agenda.css.
   Sans ça, le panneau de garde s'affichait sans aucun style. */
/* ── Panneau « Bientôt » (Communauté : Carte / Clubs / Fédérations / Compétitions) ── */
.v3-soon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; margin-top: 22px; padding: 54px 28px;
  background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.028));
  box-shadow: inset 0 1.2px 0 rgba(255,255,255,.2), inset 0 -1.2px 0 rgba(255,255,255,.06);
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 24px 100%, 0 50%); }
.v3-soon > i { font-size: 34px; color: #E8C77E; }
.v3-soon > b { font: italic 700 22px 'GT Sectra Display', Georgia, serif; color: #F2F4FA; }
.v3-soon > p { max-width: 46ch; font: 400 13px/1.6 Inter, sans-serif; color: var(--gk-muted); margin: 0; }
.v3-soon .gsoon { margin-top: 8px; }

/* ── Dialogues (gk-dialog.js) ────────────────────────────────────────────────
   Ici et non dans v3-social.css : une confirmation ou un toast peut surgir
   sur n'importe quelle page (suppression d'un entraînement, déconnexion…). */
/* boîte de confirmation (remplace les confirm() natifs) */
.gk-confirm .gk-modal-card { max-width: 420px; }
.gk-confirm-msg { margin: 10px 0 0; font: 400 13.5px/1.6 Inter, sans-serif; color: rgba(255,255,255,.78); }
.gk-confirm-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.pf-btn.is--danger { color: #E7796D; box-shadow: inset 0 0 0 1px rgba(231,121,109,.5); }
.pf-btn.is--danger:hover { box-shadow: inset 0 0 0 1px rgba(231,121,109,.8); }

/* confirmation brève (remplace les alert() natives) */
.gk-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 100004;
  padding: 11px 24px; font: 600 12.5px Inter, sans-serif; color: #0B0E1A;
  background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.gk-toast.is--on { opacity: 1; }
.gk-confirm .pf-btn { appearance: none; border: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 26px; font: 600 12.5px Inter, sans-serif; letter-spacing: .04em; color: #F2F4FA; cursor: pointer;
  background: rgba(10,12,22,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%); }
.gk-confirm .pf-btn.gold { color: #0B0E1A;
  background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%); }

/* ── Anti-FOUC (« un quart de seconde d'ancien design au chargement ») ───────
   Le HTML livre encore l'ancienne nav Webflow ; gk-shell (defer) ne la
   reconstruit qu'après le premier rendu. La classe .gk-boot est posée par un
   script INLINE du <head> (donc avant toute peinture) et devient inerte dès
   que la nav porte .sb : pendant la reconstruction on peint un panneau sombre
   vide à la place exacte de la sidebar finale, et le contenu est déjà décalé.
   Le script retire .gk-boot après 3 s : si gk-shell ne tourne pas (JS bloqué),
   l'ancienne nav revient au lieu de laisser un site sans navigation. */
.gk-boot .navbar:not(.sb) { visibility: hidden; }
.gk-boot .navbar:not(.sb) > * { display: none !important; }
@media (min-width: 992px) {
  .gk-boot .body-inside-container > .navbar:not(.sb) {
    visibility: visible; position: fixed; left: 0; top: 0;
    width: 250px; min-width: 250px; max-width: 250px; height: 100vh;
    background: #0B0E1A; box-shadow: inset -1px 0 0 rgba(255,255,255,.08);
  }
  .gk-boot .body-inside-container > .content:not(.main) { margin-left: 250px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CONTOURS HEXAGONAUX — réparation générale (24/08/2026)

   Un `box-shadow: inset` suit la boîte RECTANGULAIRE de l'élément. Sur une
   forme découpée au clip-path, le découpage rogne ensuite les quatre biseaux :
   il ne restait du trait que les côtés droits, d'où « un carré dans un
   hexagone » (signalé par Jason sur le bouton « garder » d'Inspiration).

   Le trait est refait en POLYGONE À TROU : le ::before dessine l'hexagone
   extérieur puis l'hexagone rentré d'un pixel, avec la règle de remplissage
   `evenodd` — la matière ne subsiste qu'entre les deux. C'est un vrai border,
   pour une forme qui n'en accepte pas.

   ⚠ `position` : le ::before a besoin d'un parent positionné, d'où le
   `position:relative`. Mais ce bloc est chargé en dernier et son sélecteur
   commence par `body`, donc il ÉCRASE les `position:absolute` déclarés
   ailleurs : l'élément retombe dans le flux et ses top/right deviennent des
   décalages relatifs. Il part alors n'importe où (constaté sur les boutons de
   Découverte : la lecture collée en haut, le marque-page sorti à gauche de la
   vignette). Les sélecteurs concernés gardent donc `position:absolute` ci-
   dessous — un élément déjà positionné fait tout aussi bien référence.

   ⚠ Ne PAS remplacer ça par « le fond porte la couleur du trait + un ::before
   rentré repose le fond » : sur un fond translucide (le bandeau « Programme
   indicatif » est un or à 12 %), la couleur du trait transparaît et l'élément
   entier vire à cette couleur. Essayé le 24/08, régression immédiate.

   Bloc généré par un script d'audit, sélecteurs préfixés `body ` pour l'emporter
   quel que soit l'ordre des feuilles. Retirable d'un seul tenant.
   ════════════════════════════════════════════════════════════════════════════ */
body .gk-art .ar-tri-cell{isolation:isolate;position:relative;box-shadow:none!important;}
body .gk-art .ar-tri-cell::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.09);clip-path:polygon(evenodd,12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%,12.2px 1px,calc(100% - 12.2px) 1px,calc(100% - 1px) 50%,calc(100% - 12.2px) calc(100% - 1px),12.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .v3k .kv-pbtn{isolation:isolate;box-shadow:none!important;}
body .v3k .kv-pbtn::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.35);clip-path:polygon(evenodd,11px 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,11px 100%,0 50%,11.2px 1px,calc(100% - 11.2px) 1px,calc(100% - 1px) 50%,calc(100% - 11.2px) calc(100% - 1px),11.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .v3pc .gk-dk-card--note{isolation:isolate;position:relative;box-shadow:none!important;}
body .v3pc .gk-dk-card--note::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(200,170,110,.4);clip-path:polygon(evenodd,14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%,14.2px 1px,calc(100% - 14.2px) 1px,calc(100% - 1px) 50%,calc(100% - 14.2px) calc(100% - 1px),14.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .hxbtn{isolation:isolate;position:relative;box-shadow:none!important;}
body .hxbtn::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.2);clip-path:polygon(evenodd,8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%,8.2px 1px,calc(100% - 8.2px) 1px,calc(100% - 1px) 50%,calc(100% - 8.2px) calc(100% - 1px),8.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .pf-btn{isolation:isolate;position:relative;box-shadow:none!important;}
body .pf-btn::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.28);clip-path:polygon(evenodd,13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%,13.2px 1px,calc(100% - 13.2px) 1px,calc(100% - 1px) 50%,calc(100% - 13.2px) calc(100% - 1px),13.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .gk-dscv3 .gk-disco-play{isolation:isolate;position:absolute;box-shadow:none!important;}
body .gk-dscv3 .gk-disco-play::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.32);clip-path:polygon(evenodd,11px 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,11px 100%,0 50%,11.2px 1px,calc(100% - 11.2px) 1px,calc(100% - 1px) 50%,calc(100% - 11.2px) calc(100% - 1px),11.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .gk-dscv3 .gk-disco-save{isolation:isolate;position:absolute;box-shadow:none!important;}
body .gk-dscv3 .gk-disco-save::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.28);clip-path:polygon(evenodd,8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%,8.2px 1px,calc(100% - 8.2px) 1px,calc(100% - 1px) 50%,calc(100% - 8.2px) calc(100% - 1px),8.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .gk-dkv3 .gk-dk-quote{isolation:isolate;position:relative;box-shadow:none!important;}
body .gk-dkv3 .gk-dk-quote::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(200,170,110,.4);clip-path:polygon(evenodd,16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%,16.2px 1px,calc(100% - 16.2px) 1px,calc(100% - 1px) 50%,calc(100% - 16.2px) calc(100% - 1px),16.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .gk-dkv3 .gk-dk-cta{isolation:isolate;position:relative;box-shadow:none!important;}
body .gk-dkv3 .gk-dk-cta::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(200,170,110,.5);clip-path:polygon(evenodd,12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%,12.2px 1px,calc(100% - 12.2px) 1px,calc(100% - 1px) 50%,calc(100% - 12.2px) calc(100% - 1px),12.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .gk-dkv3 .gk-dk-cta-ghost{isolation:isolate;position:relative;box-shadow:none!important;}
body .gk-dkv3 .gk-dk-cta-ghost::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.28);clip-path:polygon(evenodd,12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%,12.2px 1px,calc(100% - 12.2px) 1px,calc(100% - 1px) 50%,calc(100% - 12.2px) calc(100% - 1px),12.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .fl3-ghost{isolation:isolate;position:relative;box-shadow:none!important;}
body .fl3-ghost::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.18);clip-path:polygon(evenodd,10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%,10.2px 1px,calc(100% - 10.2px) 1px,calc(100% - 1px) 50%,calc(100% - 10.2px) calc(100% - 1px),10.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .fl3-play .gk-fl-face-img{isolation:isolate;position:relative;box-shadow:none!important;}
body .fl3-play .gk-fl-face-img::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.14);clip-path:polygon(evenodd,16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%,16.2px 1px,calc(100% - 16.2px) 1px,calc(100% - 1px) 50%,calc(100% - 16.2px) calc(100% - 1px),16.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .fl3-play .gk-fl-go{isolation:isolate;position:relative;box-shadow:none!important;}
body .fl3-play .gk-fl-go::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(200,170,110,.5);clip-path:polygon(evenodd,12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%,12.2px 1px,calc(100% - 12.2px) 1px,calc(100% - 1px) 50%,calc(100% - 12.2px) calc(100% - 1px),12.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .fl3-play .gk-fl-audio{isolation:isolate;position:relative;box-shadow:none!important;}
body .fl3-play .gk-fl-audio::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.18);clip-path:polygon(evenodd,10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%,10.2px 1px,calc(100% - 10.2px) 1px,calc(100% - 1px) 50%,calc(100% - 10.2px) calc(100% - 1px),10.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .resume:not(.introduction_container) .go2{isolation:isolate;box-shadow:none!important;}
body .resume:not(.introduction_container) .go2::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(200,170,110,.5);clip-path:polygon(evenodd,12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%,12.2px 1px,calc(100% - 12.2px) 1px,calc(100% - 1px) 50%,calc(100% - 12.2px) calc(100% - 1px),12.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .lphero .kk{isolation:isolate;position:relative;box-shadow:none!important;}
body .lphero .kk::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(200,170,110,.5);clip-path:polygon(evenodd,9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%,9.2px 1px,calc(100% - 9.2px) 1px,calc(100% - 1px) 50%,calc(100% - 9.2px) calc(100% - 1px),9.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .evtag{isolation:isolate;position:relative;box-shadow:none!important;}
body .evtag::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.18);clip-path:polygon(evenodd,7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%,7.2px 1px,calc(100% - 7.2px) 1px,calc(100% - 1px) 50%,calc(100% - 7.2px) calc(100% - 1px),7.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .cta{isolation:isolate;position:relative;box-shadow:none!important;}
body .cta::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(200,170,110,.5);clip-path:polygon(evenodd,12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%,12.2px 1px,calc(100% - 12.2px) 1px,calc(100% - 1px) 50%,calc(100% - 12.2px) calc(100% - 1px),12.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .hcard .go{isolation:isolate;position:relative;box-shadow:none!important;}
body .hcard .go::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(200,170,110,.5);clip-path:polygon(evenodd,10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%,10.2px 1px,calc(100% - 10.2px) 1px,calc(100% - 1px) 50%,calc(100% - 10.2px) calc(100% - 1px),10.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .warn{isolation:isolate;position:relative;box-shadow:none!important;}
body .warn::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(200,170,110,.4);clip-path:polygon(evenodd,14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%,14.2px 1px,calc(100% - 14.2px) 1px,calc(100% - 1px) 50%,calc(100% - 14.2px) calc(100% - 1px),14.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .seocard .bp{isolation:isolate;box-shadow:none!important;}
body .seocard .bp::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(88,225,218,.35);clip-path:polygon(evenodd,10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%,10.2px 1px,calc(100% - 10.2px) 1px,calc(100% - 1px) 50%,calc(100% - 10.2px) calc(100% - 1px),10.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .mvgif .pb2{isolation:isolate;box-shadow:none!important;}
body .mvgif .pb2::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.35);clip-path:polygon(evenodd,10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%,10.2px 1px,calc(100% - 10.2px) 1px,calc(100% - 1px) 50%,calc(100% - 10.2px) calc(100% - 1px),10.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .gk-news-pays{isolation:isolate;position:relative;box-shadow:none!important;}
body .gk-news-pays::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.14);clip-path:polygon(evenodd,6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%,6.2px 1px,calc(100% - 6.2px) 1px,calc(100% - 1px) 50%,calc(100% - 6.2px) calc(100% - 1px),6.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .gk-com-composer.is--lecture{isolation:isolate;position:relative;box-shadow:none!important;}
body .gk-com-composer.is--lecture::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.11);clip-path:polygon(evenodd,13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%,13.2px 1px,calc(100% - 13.2px) 1px,calc(100% - 1px) 50%,calc(100% - 13.2px) calc(100% - 1px),13.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .vplay .pb{isolation:isolate;box-shadow:none!important;}
body .vplay .pb::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.4);clip-path:polygon(evenodd,17px 0,calc(100% - 17px) 0,100% 50%,calc(100% - 17px) 100%,17px 100%,0 50%,17.3px 1.5px,calc(100% - 17.3px) 1.5px,calc(100% - 1.5px) 50%,calc(100% - 17.3px) calc(100% - 1.5px),17.3px calc(100% - 1.5px),1.5px 50%);pointer-events:none}
body .chap .ch{isolation:isolate;position:relative;box-shadow:none!important;}
body .chap .ch::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.14);clip-path:polygon(evenodd,11px 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,11px 100%,0 50%,11.2px 1px,calc(100% - 11.2px) 1px,calc(100% - 1px) 50%,calc(100% - 11.2px) calc(100% - 1px),11.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .tnode{isolation:isolate;box-shadow:none!important;}
body .tnode::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.28);clip-path:polygon(evenodd,12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%,12.2px 1px,calc(100% - 12.2px) 1px,calc(100% - 1px) 50%,calc(100% - 12.2px) calc(100% - 1px),12.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .tctl span{isolation:isolate;position:relative;box-shadow:none!important;}
body .tctl span::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.22);clip-path:polygon(evenodd,10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%,10.2px 1px,calc(100% - 10.2px) 1px,calc(100% - 1px) 50%,calc(100% - 10.2px) calc(100% - 1px),10.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .sb .gk-acct-btn{isolation:isolate;position:relative;box-shadow:none!important;}
body .sb .gk-acct-btn::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.22);clip-path:polygon(evenodd,10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%,10.2px 1px,calc(100% - 10.2px) 1px,calc(100% - 1px) 50%,calc(100% - 10.2px) calc(100% - 1px),10.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .sb .gk-ntf-bell{isolation:isolate;position:relative;box-shadow:none!important;}
body .sb .gk-ntf-bell::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.22);clip-path:polygon(evenodd,8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%,8.2px 1px,calc(100% - 8.2px) 1px,calc(100% - 1px) 50%,calc(100% - 8.2px) calc(100% - 1px),8.2px calc(100% - 1px),1px 50%);pointer-events:none}
body .gk-confirm .pf-btn{isolation:isolate;position:relative;box-shadow:none!important;}
body .gk-confirm .pf-btn::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.28);clip-path:polygon(evenodd,13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%,13.2px 1px,calc(100% - 13.2px) 1px,calc(100% - 1px) 50%,calc(100% - 13.2px) calc(100% - 1px),13.2px calc(100% - 1px),1px 50%);pointer-events:none}

/* ── Hangeul décoratif : coréen seulement ────────────────────────────────────
   Les sous-titres coréens posés sous les intertitres, à côté des titres de
   page, sous les noms de famille de techniques et en filigrane des cartes sont
   de la DÉCORATION, pas du contenu. En français ou en anglais ils n'apprennent
   rien et alourdissent (retour Jason 25/08 sur « Pour bien commencer »). On ne
   les montre donc qu'en coréen, où ils redeviennent la langue de lecture.
   Ils portent tous le même marqueur : un <em data-gk-noi18n>.
   ⚠ NE COUVRE PAS le hangeul de CONTENU : l'article /decouvrir (le nom
   태권도, les kwan, les fondateurs, les serments), le lexique, les noms de
   technique. Là, le coréen EST le sujet.
   `lang` est posé sur la racine par gk-i18n.js à chaque changement de langue. */
:root:not([lang|="ko"]) em[data-gk-noi18n],
:root:not([lang|="ko"]) .hvb-fam span[data-gk-noi18n] { display: none; }

/* ── Raccourcis (= les favoris) : des blasons, pas une liste de noms ─────────
   On reconnaît un poomsae à son emblème bien avant de lire son nom, et
   « Taegeuk Sam Jang » écrit huit fois de suite ne dit rien. L'emblème est
   l'anneau à idéogramme de /images/v3/jang/, posé en masque, dans un petit
   hexagone ; le titre court vient DESSOUS, hors de la forme.
   ⚠ La classe s'appelle `sqk-h`, jamais `hx` : `.hx` est le pavé de titre du
   site (marge 26 px, padding 10/30, fond clair, ::before). La tuile en héritait
   tout : 107 px de haut et un pavé blanc au milieu.
   ⚠ Et le biseau va sur une boîte à peu près carrée (46 × 40). Sur une tuile
   haute, les pointes de mi-hauteur étirent l'hexagone en losange difforme,
   même erreur que sur les listes de l'onglet Théorie. */
.sb .sqk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; padding: 6px 0 4px; }
.sb .sqk-t {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0; text-decoration: none; color: var(--muted);
}
.sb .sqk-h {
  flex: none; width: 46px; height: 40px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); transition: background .15s;
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%);
}
.sb .sqk-t:hover .sqk-h, .sb .sqk-t.on .sqk-h { background: rgba(200,170,110,.22); }
.sb .sqk-h .em {
  width: 26px; height: 26px; display: block; background: #C8AA6E;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.sb .sqk-t:hover .sqk-h .em, .sb .sqk-t.on .sqk-h .em { background: #F0E6D2; }
.sb .sqk-h b { font: 700 italic 14px 'Inter Tight', Inter, sans-serif; color: #C8AA6E; }
/* le médaillon keup (gk-medaillon) centré dans la tuile, comme l'emblème */
.sb .sqk-h .gkmed { display: block; }
.sb .sqk-h i { font-size: 17px; color: #C8AA6E; }
.sb .sqk-t .lb {
  font: 600 9px Inter, sans-serif; letter-spacing: .05em; line-height: 1.2; text-align: center;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb .sqk-t:hover .lb, .sb .sqk-t.on .lb { color: #F0E6D2; }

/* ── Répertoire Kibon : technique cliquable + aperçu au survol ───────────────
   Le nom romanisé mène à /technique/<slug>. Au survol, un carré montre la
   photo du mouvement : on sait ce qu'on va ouvrir avant de cliquer. Le carré
   est posé sur <body> et déplacé à la demande, un seul pour toute la page. */
.kp-tech { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(200,170,110,.32); }
.kp-tech:hover { color: #F0E6D2; border-bottom-color: #C8AA6E; }
.kp-apercu {
  position: fixed; z-index: 60; width: 148px; height: 148px; padding: 4px;
  background: linear-gradient(150deg, rgba(200,170,110,.6), rgba(255,255,255,.16) 45%, rgba(200,170,110,.34));
  opacity: 0; visibility: hidden; transition: opacity .14s;
  pointer-events: none;
}
.kp-apercu.is--on { opacity: 1; visibility: visible; }
.kp-apercu img { width: 100%; height: 100%; object-fit: cover; display: block; background: #0E1424; }
@media (max-width: 860px) { .kp-apercu { display: none; } }

/* ── Keup, volet Poomsae : les deux tableaux AU-DESSUS des vidéos ────────────
   Le gabarit Webflow met les tableaux dans une colonne étroite (0.6fr) à
   gauche et la vidéo à droite, et empile Exécution au-dessus de Notation. On
   inverse : une seule colonne, donc les tableaux d'abord (ils sont avant la
   vidéo dans le DOM), et les deux tableaux côte à côte (demande Jason 25/08).
   `.grid_keup` n'existe que sur les 66 pages keup. */
.grid_keup { grid-template-columns: 1fr !important; }
.grid_keup .grid-in-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start; }
@media (max-width: 860px) { .grid_keup .grid-in-grid { grid-template-columns: 1fr !important; } }

/* ── AUCUN ARRONDI : remise à plat des conteneurs hérités de Webflow ─────────
   La charte n'a d'angle arrondi nulle part : bord net, ou chanfrein au
   clip-path. Ces conteneurs gardaient encore le rayon du gabarit Webflow
   (12 / 8 / 16 / 4 px), que personne n'avait neutralisé : blocs Résumé,
   Exécution, Notation et Répertoire des pages keup, bandeau d'avertissement,
   cartes de technique des fiches poomsae, tuiles de la vue d'ensemble,
   encadrés « Sources », vignettes vidéo.
   Liste EXPLICITE, surtout pas `* { border-radius: 0 }` : les ronds VOULUS
   restent ronds (cœur des favoris, bouton de lecture, avatars, pastilles).
   Les préfixes ne sont pas décoratifs : `body` passe devant le <style> injecté
   par keup-videos.js et devant responsive-mobile.css ; `.gk-res-detail` est
   nécessaire pour battre les `8px !important` de glass-site.css. */
body .left_introduction, body .right_introduction, body .schema_container_image,
body .details_container, body .details_foot, body .details_foot_image,
body .container_keup, body .warning_container, body .video_container,
body .overview_img_overlay, body .overview_label, body .overview_text-sources,
body .text-sources, body .kv-play, body .kv-pbtn, body .kv-frame,
body .nav-hamburger,
body .gk-res-detail .collection-item, body .gk-res-detail .details_card,
body .gk-res-detail .main-img, body .gk-res-detail .details_foot_image {
  border-radius: 0 !important;
}

/* ── Le soulignement blanc de Webflow, partout ──────────────────────────────
   `.heading_2.white.intro { border-bottom: 6px solid #fff }` vient du gabarit
   Webflow. Sur une pastille au clip-path, le contour dessiné au ::before part
   de la boîte de PADDING et ne recouvre jamais ce bord : il reste 6 px de
   blanc plein en travers du bas. La règle était neutralisée uniquement dans
   les onglets keup ; elle l'est maintenant partout, ce soulignement n'existe
   nulle part dans la charte. */
body .heading_2.white.intro, body h2.heading_2, body h3.kibon_title { border-bottom: 0; }

/* La fleur sous le titre des pages keup : Jason n'en veut pas. Elle reste
   ailleurs (fiches ressources, parcours), c'est ici qu'elle alourdit. */
.v3k .pgflr { display: none; }