/* ============================================================================
   v3-fiche.css — complément v3 « Hextech Or » des fiches poomsae.
   Chargé APRÈS hextech-or.css ; tout est scopé .gk-fiche-v3 (classe posée sur
   la .content par js/poomsae-fiche-v3.js) → zéro effet hors fiche.
   Les !important répondent à ceux de glass-site.css (pilule .tabs-menu) :
   même arme, spécificité supérieure + chargé en dernier.
   ========================================================================== */

/* ── breadcrumb Webflow redondant (ou son remplaçant .glass-breadcrumb posé
      par tkd-account.js) : masqué, le .crumb v3 le remplace. Le .top_nav reste
      dans le DOM (point d'accroche de secours du cœur favori). ── */
.content.gk-fiche-v3 .top_nav .breadcrumb,
.content.gk-fiche-v3 .top_nav .glass-breadcrumb { display: none !important; }
.content.gk-fiche-v3 .top_nav { min-height: 0; margin: 0; padding: 0; }

/* ── en-tête injecté : crumb, eyebrow, h1 + hangeul ── */
.gkf-crumb a { color: inherit; }
.gkf-crumb a:hover { color: #F2F4FA; }
.gkf-head { margin-top: 18px; }
.gkf-eb { font: 600 10px Inter; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.main.mhero .gkf-eb { color: rgba(255,255,255,.66); }
.gkf-head h1.display { font-size: 46px; line-height: 1.05; margin-top: 6px; }
.gkf-head h1.display em {
  font: 500 17px 'Noto Serif KR', serif; font-style: normal;
  letter-spacing: .06em; margin-left: 10px; color: var(--muted);
}

/* ── onglets : le composant .wtabs du reste du site. poomsae-fiche-v3.js
      déplace les liens Webflow dans un .wtabs interne ; le cœur favori reste
      enfant direct de .tabs-menu (un clip-path sur le conteneur le rognerait).
      .tabs-menu redevient une simple rangée transparente. ── */
.content.gk-fiche-v3 .tabs-menu.w-tab-menu {
  display: flex !important;
  align-items: center !important;
  /* Webflow pose justify-content:flex-end + largeur au contenu : la pilule
     flottait au centre-droit. Pleine largeur + départ à gauche : onglets à
     GAUCHE, cœur/partager à DROITE via le margin-left:auto du cœur (retour
     Jason 31/08 soir). */
  width: 100% !important;
  justify-content: flex-start !important;
  /* le margin-right:32px Webflow + conteneur flex-end décalait TOUTE la rangée
     de 32 px à gauche des cartes */
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Le cœur reste SUR la ligne des onglets, à la même hauteur : sans nowrap,
     le flex-wrap hérité de Webflow le faisait passer dessous (retour Jason
     26/08). L'écart sous l'en-tête, porté avant par le margin-top du .wtabs,
     remonte ici : sinon le cœur (sans cette marge) se centrait 10 px plus
     haut que la pilule. */
  flex-wrap: nowrap !important;
  /* ⚠ Webflow fige .tabs-menu à height:40px : la pilule .wtabs (49px) débordait
     et cœur/partager, étirés sur le CONTENEUR, restaient 9px plus courts
     qu'elle (contre-audit 31/08). Hauteur libre = tout s'aligne sur la pilule. */
  height: auto !important;
  min-height: 0 !important;
  margin-top: 6px !important;   /* onglets remontés près du titre (Jason 01/09) */
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 0;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* les liens sont des .wtab nus DANS la pilule : tout le décor vient de .wtabs */
.content.gk-fiche-v3 .tabs-menu .wtabs .tab.w-tab-link,
.content.gk-fiche-v3.mhero .tabs-menu .wtabs .tab.w-tab-link {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.72) !important;
}
.content.gk-fiche-v3 .tabs-menu .wtabs .tab.w-tab-link:hover { color: #fff !important; }
.content.gk-fiche-v3 .tabs-menu .wtabs .tab.w-tab-link.on,
.content.gk-fiche-v3.mhero .tabs-menu .wtabs .tab.w-tab-link.on {
  background: none !important;
  color: #fff !important;
}
/* Le cœur rejoint le flux à droite des onglets (il débordait en absolu à
   right:-44px). Il était rond, plus court que la barre d'onglets et calé plus
   haut : il devient un hexagone de la MÊME hauteur, aligné dessus (retour
   Jason 24/08). Contour par le fond + ::before rentré : un box-shadow serait
   coupé par le clip-path. */
.content.gk-fiche-v3 .tabs-menu { display: flex; align-items: center; }
.content.gk-fiche-v3 .tabs-menu .wtabs { margin-top: 0; }
/* Cœur et Partager : le MÊME habillage que la pilule des onglets (dégradé 135°
   en anneau + fond nuit flouté), même hauteur que le CONTAINER : toute la
   ligne se lit d'un seul tenant (retour Jason 26/08). L'anneau blanc à 20 %
   d'avant était invisible sur le fond sombre : le bouton semblait plus petit. */
.content.gk-fiche-v3 .tabs-menu .gk-fav-heart,
.content.gk-fiche-v3 .tabs-menu .gk-share-btn {
  position: relative !important;
  right: auto !important; top: auto !important; left: auto !important;
  margin: 0 0 0 10px !important;
  /* même hauteur que le CONTENEUR d'onglets : les boutons s'étirent dessus */
  align-self: stretch; flex: 0 0 auto;
  width: 58px; height: auto; min-height: 0;
  display: inline-grid; place-items: center;
  isolation: isolate; cursor: pointer;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  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)) !important;
  color: rgba(255,255,255,.82) !important;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);
}
.content.gk-fiche-v3 .tabs-menu .gk-fav-heart::before,
.content.gk-fiche-v3 .tabs-menu .gk-share-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(14,18,30,.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  clip-path: polygon(13.6px 1.5px, calc(100% - 13.6px) 1.5px, calc(100% - 1.8px) 50%, calc(100% - 13.6px) calc(100% - 1.5px), 13.6px calc(100% - 1.5px), 1.8px 50%);
}
.content.gk-fiche-v3 .tabs-menu .gk-fav-heart:hover,
.content.gk-fiche-v3 .tabs-menu .gk-share-btn:hover { color: #F0E6D2 !important; }
.content.gk-fiche-v3 .tabs-menu .gk-fav-heart.is--on {
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%) !important;
  color: #C8AA6E !important;
}
/* le cœur juste avant Partager, tout à droite, quel que soit l'ordre d'insertion
   (le cœur arrive plus tard, posé par tkd-account). Le margin-left:auto du cœur
   fait le « space-between » : onglets à gauche, les 2 boutons collés à droite
   (retour Jason 31/08). */
.content.gk-fiche-v3 .tabs-menu .gk-fav-heart { order: 98; margin-left: auto !important; }
.content.gk-fiche-v3 .tabs-menu .gk-share-btn { order: 99; }
.content.gk-fiche-v3 .gk-fav-heart svg { width: 17px; height: 17px; }
.content.gk-fiche-v3 .gk-share-btn i { font-size: 17px; line-height: 1; }
/* la barre d'onglets passe SOUS l'en-tête v3 (l'ancien layout Webflow la remontait
   à hauteur du titre) : pleine ligne, marge claire, plus aucun chevauchement */
body .content .tabs-container.w-tabs { margin-top: 4px !important; }
/* ── En-tête COLLANT et COMPACT (demande Jason 01/09) ────────────────────────
   Au défilement, le titre se réduit et la rangée d'onglets vient se coller
   juste dessous : on garde le repère « où suis-je » sans manger un écran.
   ⚠ `.tabs-menu` doit passer en `sticky` : Webflow le fige en `relative`, d'où
   le !important. Le décalage `top` des onglets = hauteur du titre réduit. */
body .content.gk-fiche-v3 .tabs-menu.w-tab-menu {
  position: sticky !important; top: 44px; z-index: 29;
  margin-top: 6px !important;
}
.content.gk-fiche-v3 .gkf-head {
  position: sticky; top: 0; z-index: 30;
  transition: padding .16s ease;
}
.content.gk-fiche-v3 .gkf-head h1.display { transition: font-size .16s ease, margin .16s ease; }
/* état compact : posé par poomsae-fiche-v3.js dès que la page a défilé */
.content.gk-fiche-v3.is--compact .gkf-head {
  margin-top: 0; padding: 7px 0 5px;
  background: rgba(11,14,26,.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.content.gk-fiche-v3.is--compact .gkf-eb { display: none; }
.content.gk-fiche-v3.is--compact .gkf-head h1.display { font-size: 21px; margin-top: 0; }
.content.gk-fiche-v3.is--compact .gkf-head h1.display em { font-size: 13px; margin-left: 8px; }
.content.gk-fiche-v3.is--compact .tabs-menu.w-tab-menu {
  background: rgba(11,14,26,.94) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
  padding: 4px 0 8px !important;
  box-shadow: 0 10px 18px -14px rgba(0,0,0,.9);
}
/* le voile du héros ne doit pas passer PAR-DESSUS l'en-tête collant */
.content.gk-fiche-v3.mhero::before { z-index: 0; }

/* ── Onglet « À propos » v3 : miroir .gk-ap, source Webflow masquée ── */
.content.gk-fiche-v3 .w-tab-pane[data-w-tab="Tab 1"].gk-ap-on > .introduction_container { display: none; }
.gk-fiche-v3 .ap-top { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 14px; margin-top: 4px; }
/* colonne de droite : Description, puis le schéma des appuis juste dessous
   (retour Jason 31/08 ; le schéma occupait toute la largeur en bas d'onglet) */
.gk-fiche-v3 .ap-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gk-fiche-v3 .ap-right .hxt { margin: 6px 0 -4px; }
/* La carte de contenu de l'app (CardV3) : un RECTANGLE aux angles nets, un fond
   verre en dégradé 125°, un filet 1 px en dégradé 135° et les équerres d'angle
   (.gkco, hextech-or.css). Plus d'hexagone : sur une carte haute, les pointes de
   mi-hauteur ne se lisent plus comme une forme, seulement comme un accident. */
.gk-fiche-v3 .apcard {
  position: relative; isolation: isolate;
  padding: 4px 24px 22px;
  background-color: rgba(21,26,43,.55);           /* CARD_BASE de l'app : #151A2B à 55 % */
  background-image: linear-gradient(125deg,rgba(255,255,255,.10),rgba(255,255,255,.04) 46%,rgba(255,255,255,.06));
}
/* le filet, en masque : une bordure ne peut pas porter de dégradé sans décaler
   la boîte, et box-shadow ne dégrade pas. */
.gk-fiche-v3 .apcard::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.10) 40%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.24));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.gk-fiche-v3 .apcard .hx { margin: 18px 0 14px; }

/* En-tête du résumé : le MÉDAILLON de l'app (gk-medaillon.js, pastille .bsw3
   agrandie à 1,45 = 49,3 × 43,5, gemme de la ceinture et emblème gravé) posé à
   côté du nom du poomsae, exactement comme sur mobile. L'ancien badge PNG reste
   en repli tant que le script n'a pas chargé. */
.gk-fiche-v3 .aphead {
  display: flex; align-items: center; gap: 13px; margin: 2px 0 14px;
}
.gk-fiche-v3 .aphead .apb { flex: 0 0 auto; display: block; line-height: 0; }
.gk-fiche-v3 .aphead .apb .gkmed { display: block; }
.gk-fiche-v3 .aphead .apb img { width: 46px; height: 46px; object-fit: contain; display: block; }
.gk-fiche-v3 .aphead .apnom {
  flex: 1; min-width: 0; font: italic 700 21px/1.15 'GT Sectra Display', Georgia, serif;
  color: #F2EEE4; text-wrap: balance;
}

/* renvoi vers le programme du keup, juste sous le nom */
.gk-fiche-v3 .apgrade {
  display: flex; align-items: center; gap: 13px; padding: 11px 14px; margin-bottom: 4px;
  text-decoration: none; color: inherit; cursor: pointer;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.gk-fiche-v3 .apgrade:hover { background: rgba(255,255,255,.1); }
.gk-fiche-v3 .apgrade[hidden] { display: none; }
/* un poomsae dan n'a pas de keup : la ligne est un CONSTAT, pas un lien */
.gk-fiche-v3 .apgrade.is--fixe { cursor: default; pointer-events: none; }
.gk-fiche-v3 .apgrade.is--fixe > i { display: none; }
.gk-fiche-v3 .apgrade .aptx { flex: 1; min-width: 0; }
.gk-fiche-v3 .apgrade .aptx b { display: block; font: 600 13.5px Inter; color: #F2F4FA; }
.gk-fiche-v3 .apgrade .aptx span { font: 600 10px Inter; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gk-fiche-v3 .apgrade i { font-size: 14px; color: var(--muted); }
/* clé / valeur : le libellé à gauche, la valeur alignée à droite */
.gk-fiche-v3 .apr {
  display: flex; align-items: baseline; gap: 14px; justify-content: space-between;
  padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.gk-fiche-v3 .apr:last-child { border-bottom: 0; }
.gk-fiche-v3 .apr span { flex: 0 1 auto; font: 500 12px Inter; color: var(--muted); }
.gk-fiche-v3 .apr b { flex: 0 1 auto; text-align: right; font: 600 13px Inter; color: #F2F4FA; }
.gk-fiche-v3 .apdesc { margin: 0; font: 400 13.5px/1.72 Inter; color: rgba(255,255,255,.82); }
.gk-fiche-v3 .apdesc[hidden] { display: none; }
/* schéma des appuis : caisson blueprint, image noir-sur-blanc inversée.
   Le titre vit DEDANS, même pavé .hx que Résumé/Description, et l'image est
   bornée à 400 px sur son PLUS GRAND côté, ratio conservé (retour Jason
   31/08 : « beaucoup plus petit »). */
.gk-fiche-v3 .apschema {
  position: relative; margin-top: 4px; padding: 4px 20px 20px;
  background: linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);   /* redevient permis : rectangle */
  text-align: center;
}
.gk-fiche-v3 .apschema[hidden], .gk-fiche-v3 .hxt[hidden] { display: none; }
/* display:flex + width:max-content : pavé calé à GAUCHE malgré le text-align
   center du caisson, comme dans les cartes voisines */
.gk-fiche-v3 .apschema .hx { display: flex; width: max-content; max-width: 100%; margin: 14px 0 12px; }
.gk-fiche-v3 .apschema .apsc {
  max-width: min(100%, 400px); max-height: 400px; width: auto; height: auto;
  filter: invert(1) hue-rotate(180deg) saturate(1.35);
}
/* ── Menu Partager (desktop) : petit panneau nuit ancré sous le bouton ────── */
.gk-share-menu {
  position: fixed; z-index: 1400; min-width: 216px; padding: 8px;
  display: flex; flex-direction: column;
  background: #0E121E;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.5);
}
.gk-share-menu a, .gk-share-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 600 13px Inter, sans-serif; color: rgba(255,255,255,.85); text-decoration: none;
}
.gk-share-menu a:hover, .gk-share-menu button:hover { background: rgba(255,255,255,.07); color: #fff; }
.gk-share-menu i { font-size: 17px; color: rgba(255,255,255,.75); }
.gk-share-menu .sep { display: block; height: 1px; margin: 6px 4px; background: rgba(255,255,255,.12); }

/* légende : en bas à GAUCHE et plus grande (retour Jason 31/08 soir :
   le schéma se lit bien, la légende était trop petite) */
.gk-fiche-v3 .apschema .aplg {
  display: block; margin: 18px auto 0 0; width: min(100%, 300px); height: auto; opacity: .9;
  filter: invert(1) hue-rotate(180deg) saturate(1.35);
}
/* descriptions et exécution des techniques (onglet Technique, données Airtable ;
   l'hôte est .detais_text sur la planche live, .technique_card_left en statique) */
.gk-fiche-v3 .tk-desc, .gk-fiche-v3 .tk-exec {
  margin: 8px 0 0; font: 400 12.5px/1.6 Inter; color: rgba(255,255,255,.72);
  text-align: left;
}
.gk-fiche-v3 .tk-exec b {
  display: block; margin-bottom: 2px;
  font: 600 9.5px Inter; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 991px) {
  .gk-fiche-v3 .ap-top { grid-template-columns: 1fr; }
  .gk-fiche-v3 .apcard { padding: 4px 16px 18px; }
}

/* ── V1.5 lecteur « Vue détaillée » (recettes .mvview/.mvduo/.mvbig/.mvfoot/
      .mvnum/.mvrow/.hx : hextech-or.css ; ici seulement le complément).
      Les cartes Webflow restent la SOURCE (poomsae-live + i18n écrivent
      dedans) : masquées visuellement, jamais retirées du DOM. ── */
.content.gk-fiche-v3 .w-tab-pane[data-w-tab="Tab 4"].gk-mv-on > .w-dyn-list { display: none; }
.gk-fiche-v3 .gk-mv .mvbig img { background: #0B1322; }
/* schémas d'appuis noir-sur-blanc → inversés pour le caisson blueprint (maquette) */
/* Le schéma d'appuis est DÉJÀ blanc sur fond transparent dans Airtable :
   l'ancien invert(1) le repeignait donc en NOIR sur le fond sombre, et les
   pieds disparaissaient (signalé par Jason 24/08). On ne filtre plus. */
.gk-fiche-v3 .gk-mv .mvfoot img { filter: none; }
.gk-fiche-v3 .gk-mv .mvfoot[hidden] { display: none; }
.gk-fiche-v3 .gk-mv-cap { padding: 14px 4px 0; }
.gk-fiche-v3 .gk-mv-cap b { font-size: 22px; }
.gk-fiche-v3 .gk-mv-cap .p { display: block; font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 4px; line-height: 1.55; }
.gk-fiche-v3 .gk-mv-cap .p em { font-style: normal; }
/* colonne de droite de la visionneuse : le schéma d'appuis puis les flèches */
.gk-fiche-v3 .gk-mv .mvside { display: flex; flex-direction: column; gap: 12px; }
.gk-fiche-v3 .gk-mv-nav { display: flex; gap: 10px; }
.gk-fiche-v3 .gk-mv-nav button {
  display: grid; place-items: center; width: 44px; height: 38px; padding: 0; border: 0;
  font-size: 16px; color: #F2F4FA; cursor: pointer;
  background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
}
.gk-fiche-v3 .gk-mv-nav button:hover { background: rgba(255,255,255,.12); }
.gk-fiche-v3 .gk-mv-nav button[disabled] { opacity: .4; cursor: default; }
.gk-fiche-v3 .gk-mv-right .hx { margin-top: 0; }
/* ⚠ AUCUN défilement interne : la page entière défile d'un seul bloc (demande
   Jason 01/09, valable sur TOUS les onglets). Ne jamais remettre de
   max-height + overflow ici : la molette défilerait la liste au lieu de la page. */
.gk-fiche-v3 .gk-mv-list { max-height: none; overflow: visible; padding-right: 6px; }
/* déroulé (retours Jason 31/08) : numéros décalés de 8 px vers la droite ;
   miniatures plus HAUTES (1 de large pour 1,26 de haut) — les pointes de
   l'hexagone mangent les flancs, un carré exact paraissait écrasé */
.gk-fiche-v3 .gk-mv-list .mvrow .n { margin-left: 8px; }
/* miniatures du déroulé : CARRÉES (l'hexagone rognait les pratiquants et
   rendait la lecture confuse, retour Jason 01/09) */
.gk-fiche-v3 .gk-mv-list .mvrow .th {
  flex: 0 0 72px; width: 72px; height: 72px; clip-path: none; border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.gk-fiche-v3 .gk-mv-list::-webkit-scrollbar { width: 5px; }
.gk-fiche-v3 .gk-mv-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }
.gk-fiche-v3 .gk-mv .mvrow:focus-visible { outline: 2px solid #C8AA6E; outline-offset: -2px; }
@media (max-width: 991px) {
  .gk-fiche-v3 .gk-mv.mvview { grid-template-columns: 1fr; }
  .gk-fiche-v3 .gk-mv-list { max-height: none; }
}

/* ── V1.5 chapitres vidéo (recettes .hx/.chap/.ch : hextech-or.css) :
      reset <button> + retour à la ligne si beaucoup de chapitres ── */
.gk-fiche-v3 .gk-chap .chap { flex-wrap: wrap; }
.gk-fiche-v3 .gk-chap .ch {
  border: 0; font-family: inherit; color: inherit; text-align: left;
  flex: 1 1 140px; min-width: 120px;
}
.gk-fiche-v3 .gk-chap .ch b { color: #F2F4FA; }


/* ── Onglet « Vidéo » ───────────────────────────────────────────────────────
   La vidéo prenait toute la largeur disponible et gardait les coins arrondis
   de l'export Webflow ; les intertitres des grilles étaient de simples lignes
   dorées de 12 px sans rapport avec les autres sections du site.
   Retours Jason 24/08. */
.content.gk-fiche-v3 .w-tab-pane[data-w-tab="Tab 5"] .video_container {
  max-width: none; margin: 0; border-radius: 0 !important;
}
/* rectangle net + les coins de l'app, plus d'hexagone (retour Jason 26/08) */
.content.gk-fiche-v3 .poomsae_video {
  position: relative; border-radius: 0 !important; overflow: hidden; background: #0B1322;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.content.gk-fiche-v3 .poomsae_video::after {
  content: ''; position: absolute; inset: 0; z-index: 3; 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;
}
/* duo : la principale à gauche, les explicatives en colonne à droite ;
   les shorts suivent en dessous, en 9:16 */
.content.gk-fiche-v3 .gk-vid-duo {
  display: grid; grid-template-columns: minmax(0,1.7fr) minmax(250px,1fr);
  gap: 18px; align-items: start;
}
/* la principale reste FIXE pendant le défilement des explicatives (retour
   Jason 31/08) : sticky sous la barre d'onglets */
.content.gk-fiche-v3 .gk-vid-duo .video_container { min-width: 0; }   /* plus de sticky : un seul défilement */
@media (max-width: 991px) {
  .content.gk-fiche-v3 .gk-vid-duo .video_container { position: static; }
}
.content.gk-fiche-v3 .gk-pv-main { min-width: 0; }
.content.gk-fiche-v3 .gk-pv-main .gk-pv-h { margin-top: 0; }
.content.gk-fiche-v3 .gk-pv-side { min-width: 0; }
.content.gk-fiche-v3 .gk-pv-side .gk-pv-h { margin-top: 0; }
.content.gk-fiche-v3 .gk-pv-side .gk-pv-grid { grid-template-columns: 1fr; }
@media (max-width: 991px) {
  .content.gk-fiche-v3 .gk-vid-duo { grid-template-columns: 1fr; }
}
.content.gk-fiche-v3 .gk-vfac {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer; background: #0B1322; display: block;
}
.content.gk-fiche-v3 .gk-vfac img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.78) saturate(.95); transition: filter .28s, transform .5s;
}
.content.gk-fiche-v3 .gk-vfac:hover img { filter: brightness(.94); transform: scale(1.02); }
/* le bouton de lecture : hexagone or de la charte, pas la pastille rouge */
.content.gk-fiche-v3 .gk-vfac .pb {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 88px; height: 74px; display: grid; place-items: center;
  font-size: 30px; color: #0B0E1A;
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
  clip-path: polygon(19px 0, calc(100% - 19px) 0, 100% 50%, calc(100% - 19px) 100%, 19px 100%, 0 50%);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.content.gk-fiche-v3 .gk-vfac:hover .pb { transform: translate(-50%,-50%) scale(1.06); }
.content.gk-fiche-v3 .gk-vfac .pb i { margin-left: 3px; }

/* intertitres des grilles de vidéos : même filet + libellé que les autres
   sections du site (.hxt), au lieu d'un mot doré perdu sur une ligne */
.content.gk-fiche-v3 .gk-pvids { max-width: none; margin: 26px 0 0; }
.content.gk-fiche-v3 .gk-pv-grid.is--shorts {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.content.gk-fiche-v3 .gk-pv-card.is--short .gk-pv-thumb { aspect-ratio: 9/16; }
/* cartes : rectangles nets, fini l'arrondi de glass-site */
.content.gk-fiche-v3 .gk-pv-thumb {
  border-radius: 0; border: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
/* le bouton play passe à la charte : hexagone or, encre nuit (le rond cyan
   était l'ancienne direction) */
.content.gk-fiche-v3 .gk-pv-play {
  border-radius: 0; border: 0; width: 44px; height: 36px;
  display: grid; place-items: center; font-size: 15px; color: #0B0E1A;
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.content.gk-fiche-v3 .gk-pv-card:hover .gk-pv-play {
  transform: scale(1.08); background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
}
.content.gk-fiche-v3 .gk-pv-play i { margin-left: 2px; }
.content.gk-fiche-v3 .gk-pv-h {
  display: flex; align-items: center; gap: 14px;
  margin: 34px 0 16px; font: 700 italic 19px 'GT Sectra Display', Georgia, serif;
  line-height: 1.1; color: #F2EEE4; letter-spacing: 0; text-transform: none;
}
.content.gk-fiche-v3 .gk-pv-h::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(200,170,110,.55), rgba(200,170,110,0));
}


/* ── Onglet « Vue d'ensemble » ──────────────────────────────────────────────
   Le numéro du mouvement (0/30) : badge DISCRET, anneau blanc en dégradé sur
   fond nuit (l'or plein criait plus fort que la technique, retour Jason
   26/08 ; la règle est plus bas dans le fichier). La ligne « Sources » reste
   petite, juste remontée du bas de l'image. */
.content.gk-fiche-v3 .overview_card .overview_label { display: inline-flex; align-items: center; }
/* plus AUCUN pavé derrière le badge hexagonal du numéro : le rectangle blanc
   translucide venait de la classe Webflow .overview_label (retour Jason 31/08) */
.content.gk-fiche-v3 .overview_card .overview_label {
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
  /* le blur(4px) Webflow dessinait encore un léger rectangle flou */
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.content.gk-fiche-v3 .overview_text-sources {
  position: relative; top: -9px;
  font-size: 8px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
/* « Sources : Taekwonbox » DANS l'image, à 4 px de son bord bas (retour Jason
   31/08). buildOverviewFlip DÉPLACE le label dans .overview_img_overlay, le
   calque qui couvre exactement l'image : bottom:4px y tombe juste.
   ⚠ PAS de container-type ici : la largeur des cartes vient de leur contenu,
   le confinement inline les effondrait à 2 px (constaté 31/08). */
.content.gk-fiche-v3 .overview_card .overview_img_overlay { position: relative; }
.content.gk-fiche-v3 .overview_card .overview_img_overlay .overview_text-sources {
  position: absolute; left: 0; right: 0; bottom: 4px; top: auto; z-index: 3;
  text-align: center;
}


/* ── Onglet « Vue 3D » : déroulé à droite de la scène ───────────────────────
   Le poomsae est un enchaînement : la scène seule ne dit pas où l'on en est
   ni ce qui vient après. La colonne de droite liste tous les mouvements, met
   en relief celui qu'on regarde et permet d'y sauter (demande Jason 24/08). */
.content.gk-fiche-v3 .gk-s3d--big {
  display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 18px; align-items: start;
}
.content.gk-fiche-v3 .gk-s3d--big .gk-s3d-title { grid-column: 1 / -1; }
.content.gk-fiche-v3 .gk-s3d-list {
  min-width: 0; background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  padding: 16px 12px 14px;
}
.content.gk-fiche-v3 .gk-s3d-lh {
  display: flex; align-items: baseline; gap: 8px; padding: 0 6px 10px;
  font: 700 italic 15px 'GT Sectra Display', Georgia, serif; color: #F2EEE4;
}
.content.gk-fiche-v3 .gk-s3d-lh em {
  font: 600 9.5px 'Inter', sans-serif; font-style: normal;
  letter-spacing: .14em; text-transform: uppercase; color: #8A93AD;
}
.content.gk-fiche-v3 .gk-s3d-rows {
  max-height: none; overflow: visible; padding-right: 4px;   /* un seul défilement */
}
.content.gk-fiche-v3 .gk-s3d-rows::-webkit-scrollbar { width: 5px; }
.content.gk-fiche-v3 .gk-s3d-rows::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
.content.gk-fiche-v3 .gk-s3d-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 6px; border: 0; background: transparent; cursor: pointer; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.content.gk-fiche-v3 .gk-s3d-row:last-child { border-bottom: 0; }
.content.gk-fiche-v3 .gk-s3d-row:hover { background: rgba(255,255,255,.05); }
.content.gk-fiche-v3 .gk-s3d-row .n {
  flex: 0 0 30px; font: 800 italic 11px 'Inter Tight', Inter, sans-serif; color: #8A93AD;
}
.content.gk-fiche-v3 .gk-s3d-row .th {
  flex: 0 0 46px; width: 46px; height: 36px; overflow: hidden; background: #0B1322;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
}
.content.gk-fiche-v3 .gk-s3d-row .th img { width: 100%; height: 100%; object-fit: cover; }
.content.gk-fiche-v3 .gk-s3d-row .tx { flex: 1; min-width: 0; }
.content.gk-fiche-v3 .gk-s3d-row .tx b {
  display: block; font: 600 12.5px Inter, sans-serif; color: #E8E5DE;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.content.gk-fiche-v3 .gk-s3d-row .tx span { font: 500 10.5px Inter, sans-serif; color: #8A93AD; }
.content.gk-fiche-v3 .gk-s3d-row .ki {
  flex: none; font: 700 8px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: #0B0E1A; padding: 3px 7px;
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 5px 100%, 0 50%);
}
.content.gk-fiche-v3 .gk-s3d-row.on {
  background: rgba(200,170,110,.14);
  box-shadow: inset 0 0 0 1.5px rgba(200,170,110,.5);
  border-bottom-color: transparent;
}
.content.gk-fiche-v3 .gk-s3d-row.on .n { color: #C8AA6E; }
.content.gk-fiche-v3 .gk-s3d-row.on .tx b { color: #F7EFDC; }
@media (max-width: 1120px) {
  .content.gk-fiche-v3 .gk-s3d--big { grid-template-columns: 1fr; }
  .content.gk-fiche-v3 .gk-s3d-rows { max-height: 340px; }
}


/* ── Vue détaillée : compléments 26/08 ─────────────────────────────────────── */
/* la grande image et le caisson des appuis portent les coins de l'app
   (haut-gauche + bas-droite), comme les cartes */
.gk-fiche-v3 .mvbig::after, .gk-fiche-v3 .mvfoot::after, .gk-fiche-v3 .mvrev::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;
}

/* la photo « reverse » (vue de face), SOUS les appuis (retour Jason 31/08) :
   même caisson que .mvfoot, hauteur libre ; l'écart vient du gap de .mvside */
.gk-fiche-v3 .mvrev {
  position: relative; padding: 10px;
  background: linear-gradient(160deg,#12203A,#0B1322);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.gk-fiche-v3 .mvrev img { display: block; width: 100%; height: auto; }
.gk-fiche-v3 .mvrev .fl, .gk-fiche-v3 .mvfoot .fl {
  position: absolute; left: 10px; bottom: 8px; z-index: 3;
  font: 700 8.5px Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.gk-fiche-v3 .mvrev[hidden] { display: none; }

/* le clip du mouvement remplace l'image fixe dans la même boîte */
.gk-fiche-v3 .mvbig .gk-mv-clip { width: 100%; height: 100%; object-fit: cover; display: block; }
.gk-fiche-v3 .mvbig .gk-mv-clip[hidden] { display: none; }

/* bouton play du clip : la recette or du site (kv-pbtn), en bas à droite */
.gk-fiche-v3 .mvbig .mvplay {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  width: 50px; height: 40px; display: grid; place-items: center;
  border: 0; cursor: pointer; color: #0B0E1A; font-size: 16px;
  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%);
}
.gk-fiche-v3 .mvbig .mvplay:hover { filter: brightness(1.08); }
.gk-fiche-v3 .mvbig .mvplay[hidden] { display: none; }

/* ── Vue d'ensemble : le numéro redevient un badge discret ──────────────────
   (l'or plein criait plus fort que la technique elle-même). Le même langage
   que le reste du site : anneau blanc en dégradé 135°, fond nuit translucide. */
.content.gk-fiche-v3 .overview_card .label_text {
  color: rgba(255,255,255,.85) !important;
  font: 700 10.5px 'Inter Tight', Inter, sans-serif !important; font-style: italic !important;
  letter-spacing: .04em;
  text-transform: none;   /* « 2a », pas « 2A » : glass-site uppercase tous les .label_text */
  padding: 3px 12px;
  position: relative; isolation: isolate;
  background: linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.22) 35%,rgba(255,255,255,.08) 60%,rgba(255,255,255,.30));
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}
.content.gk-fiche-v3 .overview_card .label_text::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(14,18,30,.78);
  clip-path: polygon(6.7px 1px, calc(100% - 6.7px) 1px, calc(100% - 1.2px) 50%, calc(100% - 6.7px) calc(100% - 1px), 6.7px calc(100% - 1px), 1.2px 50%);
}

/* ── Vue d'ensemble : le flip des cartes (recto photo / verso appuis + détail) ── */
.content.gk-fiche-v3 .overview_card.ovc {
  perspective: 1100px; background: transparent; cursor: pointer;
}
.content.gk-fiche-v3 .ovc-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.7,.25,1);
}
.content.gk-fiche-v3 .overview_card.is--flip .ovc-inner { transform: rotateY(180deg); }
.content.gk-fiche-v3 .ovc-front, .content.gk-fiche-v3 .ovc-back {
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.content.gk-fiche-v3 .ovc-front { position: relative; height: 100%; }
.content.gk-fiche-v3 .ovc-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  overflow: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  background: linear-gradient(160deg,#12203A,#0B1322);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  scrollbar-width: thin;
}
.content.gk-fiche-v3 .ovc-back .bk-n {
  font: 700 italic 10.5px 'Inter Tight', Inter, sans-serif; color: #C8AA6E; letter-spacing: .04em;
}
.content.gk-fiche-v3 .ovc-back b {
  font: italic 700 15px 'GT Sectra Display', Georgia, serif; color: #F2EEE4; line-height: 1.15;
}
.content.gk-fiche-v3 .ovc-back em {
  font: 600 9.5px Inter, sans-serif; font-style: normal; letter-spacing: .14em;
  text-transform: uppercase; color: #8A93AD;
}
.content.gk-fiche-v3 .ovc-back .bk-foot { display: block; width: 100%; margin: 4px 0; }
.content.gk-fiche-v3 .ovc-back .bk-foot img { display: block; max-width: 92px; margin: 0 auto; }
.content.gk-fiche-v3 .ovc-back p {
  margin: 0; font: 400 11.5px/1.55 Inter, sans-serif; color: rgba(255,255,255,.78); text-align: left;
}

/* Mobile : la ligne d'onglets reste UNE ligne (cœur et partager alignés) mais
   DÉFILE horizontalement : sans ça, le nowrap posé pour aligner le cœur
   rendait les derniers onglets inatteignables sur petit écran. */
/* iPad et petits écrans (audit responsive 29/08) : sous 1200 px la rangée
   onglets + cœur + partager ne tient plus en pleine graisse. On compacte les
   onglets, on aligne la rangée à GAUCHE (l'oversize centré la faisait spiller
   SOUS la sidebar en paysage), et on la laisse défiler en dernier recours. */
@media (max-width: 1200px) {
  .content.gk-fiche-v3 .tabs-menu.w-tab-menu {
    /* la rangée est un ENFANT FLEX du .tabs-container : sans min-width:0 elle
       garde sa largeur min-content (755 px) et spille sous la sidebar ; bornée
       à 100 %, son overflow-x interne prend le relais */
    min-width: 0; max-width: 100%;
    margin-right: 0 !important; align-self: flex-start;
    justify-content: flex-start !important;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px !important;
  }
  .content.gk-fiche-v3 .tabs-menu.w-tab-menu::-webkit-scrollbar { display: none; }
  /* UN seul défileur : le scroll interne du .wtabs (posé par hextech-or pour
     les autres pages) capterait le geste et le cœur resterait invisible */
  .content.gk-fiche-v3 .tabs-menu .wtabs {
    max-width: none !important; overflow-x: visible !important; flex: 0 0 auto;
  }
  .content.gk-fiche-v3 .wtabs .wtab { padding: 11px 14px; }
  .content.gk-fiche-v3 .tabs-menu .gk-fav-heart,
  .content.gk-fiche-v3 .tabs-menu .gk-share-btn { width: 48px; margin-left: 8px !important; }
  /* space-between conservé quand la rangée tient ; en défilement, l'auto vaut 0 */
  .content.gk-fiche-v3 .tabs-menu .gk-fav-heart { margin-left: auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Onglet « Technique » : vue MAÎTRE-DÉTAIL (retenue par Jason le 01/09).
   Liste à gauche, TOUT le détail à droite. Les variantes Répertoire/Cartes et
   le bouton « Voir la planche » ont été retirés, la planche blueprint aussi.
   ⚠ Aucun overflow interne : la page défile d'un seul bloc.
   ═══════════════════════════════════════════════════════════════════════ */
.gk-fiche-v3 .gk-tk-on .techniques_content { display: none; }
.gk-fiche-v3 .gk-tk { text-align: left; }

.gk-fiche-v3 .gk-tk .tkm {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px;
  align-items: start; margin-top: 20px;
}
/* la liste ne défile PAS : elle s'étire, c'est la page qui bouge */
.gk-fiche-v3 .gk-tk .tkm-list {
  display: flex; flex-direction: column; padding: 6px;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  position: sticky; top: 122px;      /* suit la lecture sans créer de 2e défilement */
}
.gk-fiche-v3 .gk-tk .tkm-fam {
  padding: 14px 10px 7px;
  font: 700 8.5px Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #C8AA6E;
}
.gk-fiche-v3 .gk-tk .tkm-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 7px 10px; border: 0; background: none; cursor: pointer; text-align: left;
}
.gk-fiche-v3 .gk-tk .tkm-row b { font: italic 700 14px 'GT Sectra Display', Georgia, serif; color: rgba(242,238,228,.85); }
.gk-fiche-v3 .gk-tk .tkm-row:hover { background: rgba(255,255,255,.05); }
.gk-fiche-v3 .gk-tk .tkm-row.on { background: linear-gradient(115deg,#F7EFDC,#C8AA6E 55%,#8A6A2F); }
.gk-fiche-v3 .gk-tk .tkm-row.on b { color: #0B0E1A; }
/* vignettes CARRÉES (comme le déroulé) : l'hexagone rognait les pratiquants */
.gk-fiche-v3 .gk-tk .tkm-row .th {
  flex: 0 0 auto; width: 46px; height: 46px; overflow: hidden;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.gk-fiche-v3 .gk-tk .tkm-row .th img { width: 100%; height: 100%; object-fit: cover; }

/* le panneau de détail : tout y est, plus besoin d'ouvrir quoi que ce soit */
.gk-fiche-v3 .gk-tk .tkm-view { padding-bottom: 26px; }
.gk-fiche-v3 .gk-tk .tkm-meta { display: flex; align-items: baseline; gap: 12px; margin: -4px 0 14px; }
.gk-fiche-v3 .gk-tk .tkm-meta .fam {
  font: 700 8.5px Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #C8AA6E;
}
.gk-fiche-v3 .gk-tk .tkm-meta .pos { font: 500 12.5px Inter, sans-serif; color: rgba(255,255,255,.6); }
.gk-fiche-v3 .gk-tk .tkm-view .ph { margin-bottom: 18px; }
.gk-fiche-v3 .gk-tk .tkm-view .ph img {
  display: block; width: 100%; max-height: 60vh; object-fit: contain;
  background: #0B1322; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.gk-fiche-v3 .gk-tk .bl { margin-top: 18px; }
.gk-fiche-v3 .gk-tk .bl .lb {
  display: block; margin-bottom: 6px;
  font: 700 8.5px Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #8A93AD;
}
.gk-fiche-v3 .gk-tk .bl .d, .gk-fiche-v3 .gk-tk .bl .x {
  font: 400 13.5px/1.72 Inter, sans-serif; color: rgba(255,255,255,.82); max-width: 80ch;
}
.gk-fiche-v3 .gk-tk .bl .d p, .gk-fiche-v3 .gk-tk .bl .x p { margin: 0 0 8px; }
.gk-fiche-v3 .gk-tk .bl .ap img {
  max-width: min(100%, 320px); height: auto; display: block;
  filter: invert(1) hue-rotate(180deg) saturate(1.35);
}
.gk-fiche-v3 .gk-tk .tkm-vide { margin: 16px 0 0; font: 400 13px Inter, sans-serif; color: rgba(255,255,255,.45); }

@media (max-width: 900px) {
  .gk-fiche-v3 .gk-tk .tkm { grid-template-columns: 1fr; }
  .gk-fiche-v3 .gk-tk .tkm-list { position: static; }
}