@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
/* ============================================================================
glass-site.css — UI Kit « Liquid Glass » appliqué à TOUT le wiki TKD.
----------------------------------------------------------------------------
Réplique fidèlement le UI Kit (palette cyan/violet, fond verre sombre,
GT Sectra Display pour les titres, Inter pour le corps), injecté avant
sur toutes les pages + une scène de blobs (.gk-scene) après .
Cosmétique uniquement (fond / flou / bordures / ombres / couleurs / typo) :
aucune règle de layout structurel. Réversible : retirer le + la scène.
Charte « hextech » (reprise du backoffice 17/07) : nuit #050A14/#0B1322 ·
accent blanc rgba(255,255,255,.92) · ruby #E24A66 (rare) · cyan #5ee7df ·
angles vifs (radius 0), GT Sectra Bold Italic, grain + 2 halos dérivants.
========================================================================== */
@font-face {
font-family: "GT Sectra Display";
src: url("/fonts/GT-Sectra-Display-Regular.otf") format("opentype");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "GT Sectra Display";
src: url("/fonts/GT-Sectra-Display-Regular-Italic.otf") format("opentype");
font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
font-family: "GT Sectra Display";
src: url("/fonts/GT-Sectra-Display-Medium.otf") format("opentype");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "GT Sectra Display";
src: url("/fonts/GT-Sectra-Display-Medium-Italic.otf") format("opentype");
font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
font-family: "GT Sectra Display";
src: url("/fonts/GTSectraDisplay-BoldItalic.ttf") format("truetype");
font-weight: 700; font-style: italic; font-display: swap;
}
:root {
--gk-bg: #050A14;
--gk-aqua: #5ee7df;
--gk-violet: rgba(255,255,255,.92);
--gk-rose: #E24A66;
--gk-gold: #E8B62A; /* or app (repos, récompenses) — l'« amber » du kit est devenu aqua */
--gk-amber: #5ee7df;
/* ── Tokens alignés sur le UI Kit (valeurs exactes de ui-kit.html :root) ── */
--gk-text: #ffffff; /* kit --color-text (lisibilité max) */
--gk-muted: rgba(255, 255, 255, .62); /* kit --color-text-muted .55 remonté à .62 */
--gk-glass: rgba(255, 255, 255, .12); /* kit --glass-white */
--gk-glass-strong: rgba(255, 255, 255, .20); /* = --glass-white-md */
--gk-glass-md: rgba(255, 255, 255, .20); /* kit --glass-white-md */
--gk-glass-lg: rgba(255, 255, 255, .30); /* kit --glass-white-lg */
--gk-border: rgba(255, 255, 255, .25); /* kit --glass-border */
--gk-border-subtle: rgba(255, 255, 255, .12);/* kit --glass-border-subtle */
--gk-border-bright: rgba(255, 255, 255, .5); /* kit --glass-border-bright */
--gk-radius: 0; /* kit --radius-md */
--gk-radius-sm: 0; /* kit --radius-sm */
--gk-radius-md: 0; /* kit --radius-md */
--gk-radius-lg: 0; /* kit --radius-xl */
--gk-radius-full: 0;
--gk-shadow: 0 8px 32px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .3); /* kit --shadow-glass */
--gk-shadow-float: 0 20px 56px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255, 255, 255, .05);
--gk-glow: 0 0 40px rgba(94, 231, 223, .30);
--gk-blur: blur(18px) saturate(150%); /* kit --blur-md (+ saturate gardé) */
--gk-blur-lg: blur(30px) saturate(155%);
--gk-reflection: linear-gradient(135deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 50%); /* kit --reflection-top */
}
/* ----------------------------------------------------------------------------
1. Fond global « hextech » : dégradé nuit + 2 halos dérivants + grain
(repris du backoffice, index.html charte 17/07)
-------------------------------------------------------------------------- */
html { background-color: var(--gk-bg) !important; }
body {
background: linear-gradient(180deg, #0B1322, #050A14) fixed !important;
color: var(--gk-text) !important;
}
/* ancien halo body::before désactivé (était en z-index négatif → piégé). */
body::before { content: none !important; }
/* Grain plein écran (feTurbulence), au-dessus de tout, non interactif. */
body::after {
content: '';
position: fixed; inset: 0; pointer-events: none; z-index: 60;
opacity: .17; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* ⚠️ le calque décor reste en z-index 0 (un z négatif serait piégé derrière le
fond) et le contenu en z-index 1. .gk-scene est déjà injecté sur les pages :
il porte désormais les 2 halos hextech (ruby + bleu nuit). */
.gk-scene {
position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.gk-scene::before {
content: ''; position: absolute; width: 640px; height: 640px; border-radius: 50%;
left: 8%; top: -220px;
background: radial-gradient(circle, rgba(194,24,63,.13), transparent 65%);
animation: gkDrift1 23s ease-in-out infinite alternate;
}
.gk-scene::after {
content: ''; position: absolute; width: 760px; height: 760px; border-radius: 50%;
right: -160px; bottom: -320px;
background: radial-gradient(circle, rgba(76,98,180,.16), transparent 65%);
animation: gkDrift2 29s ease-in-out infinite alternate-reverse;
}
/* le contenu passe AU-DESSUS du calque couleur */
.body-container, .body-inside-container { position: relative !important; z-index: 1 !important; }
/* anciens blobs cyan/violet/rose : retirés de la charte (le markup injecté reste inoffensif) */
.gk-scene .gk-blob { display: none !important; }
@keyframes gkDrift1 { to { transform: translate(90px, 36px); } }
@keyframes gkDrift2 { to { transform: translate(90px, 36px); } }
@media (prefers-reduced-motion: reduce) {
.gk-scene::before, .gk-scene::after { animation: none; }
}
/* overlay app-push masqué partout (comme responsive-mobile.css) */
.device-blocker { display: none !important; }
/* Fond = image de couverture du poomsae, floutée (injecté par glass-site.js sur
les fiches /poomsae/…, façon app mobile). Derrière le contenu, au-dessus du
fond sombre ; les blobs gardent leur lueur par-dessus. */
.gk-poomsae-bg {
position: fixed;
inset: 0;
z-index: 0; /* même calque que .gk-scene (qui est masqué sur les poomsae) ; négatif = piégé */
pointer-events: none;
background-size: cover;
background-position: center;
filter: blur(30px) saturate(1.45) brightness(1.28);
transform: scale(1.14);
opacity: .8;
}
/* voile très léger juste pour unifier (le texte reste sur des cartes glass) */
.gk-poomsae-bg::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(5,10,20,0) 0%, rgba(5,10,20,.14) 60%, rgba(5,10,20,.30) 100%);
}
/* Fiches poomsae : colonnes de contenu en verre dépoli sombre → le texte reste
lisible quelle que soit la couverture floutée derrière (claire OU sombre). */
.left_introduction,
.right_introduction {
background-color: rgba(5,10,20,.5) !important;
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
}
/* ----------------------------------------------------------------------------
2. Typographie : corps Inter, titres GT Sectra (gros titres en dégradé)
-------------------------------------------------------------------------- */
body, p, li, a, span, div, td, th, input, textarea, select, button {
font-family: "Inter", sans-serif;
}
h1, h2, h3, h4, h5, h6,
.heading_1, .heading_2, .heading_3,
.techniques_heading, .display-1, .display-2 {
font-family: "GT Sectra Display", "Inter", sans-serif !important;
color: #fff;
}
/* gros titres de section → couleur unie (pas de dégradé) */
.heading_1,
.heading_2,
.techniques_heading {
color: var(--gk-text);
}
/* Signature hextech : les titres de premier niveau en GT Sectra BOLD ITALIC
(même voix que le H1 de l'accueil backoffice). */
h1, .heading_1, .display-1 {
font-weight: 700 !important;
font-style: italic !important;
}
/* liens neutres par défaut (couleur réservée aux liens de prose .w-richtext a) */
a { color: inherit; }
/* ----------------------------------------------------------------------------
3. Surface de verre générique (mixin appliqué aux conteneurs ci-dessous)
-------------------------------------------------------------------------- */
.home_container,
.top_nav,
.navbar,
.dropdown-list,
.overview_card,
.card_keup,
.list_keup_img,
.video_button_container,
.w-richtext blockquote,
.shortcut,
.navbar__shortcut {
-webkit-backdrop-filter: var(--gk-blur);
backdrop-filter: var(--gk-blur);
}
.home_container,
.overview_card,
.card_keup {
background-color: var(--gk-glass) !important;
border: 1px solid var(--gk-border) !important;
border-radius: var(--gk-radius-lg) !important;
box-shadow: var(--gk-shadow) !important;
}
/* ----------------------------------------------------------------------------
4. Nav (sidebar) + breadcrumb → verre
-------------------------------------------------------------------------- */
.navbar {
background-image: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)) !important;
border: 1px solid var(--gk-border) !important;
box-shadow: var(--gk-shadow) !important;
}
/* ── Breadcrumb : COPIE EXACTE du composant .glass-breadcrumb du UI Kit ──
.top_nav redevient un simple wrapper transparent (plus de barre pleine
largeur) ; c'est .breadcrumb qui est le conteneur pill compact, et chaque
.top-nav-link est un « crumb » pill, l'actif étant un pill rempli. */
.top_nav {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
align-items: center !important;
}
/* .breadcrumb = .glass-breadcrumb (conteneur pill compact, hug content) */
.breadcrumb {
display: inline-flex !important;
align-items: center;
padding: 6px 8px;
border-radius: 0;
flex-wrap: nowrap;
width: auto;
background: var(--gk-glass);
border: 1px solid var(--gk-border);
box-shadow: var(--gk-shadow);
-webkit-backdrop-filter: var(--gk-blur);
backdrop-filter: var(--gk-blur);
font-family: "Inter", sans-serif;
}
/* chaque lien = .glass-breadcrumb__crumb (pill cliquable) */
.breadcrumb .top-nav-link {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 6px 14px !important;
border-radius: 0 !important;
font-size: .82rem;
white-space: nowrap;
color: var(--gk-text) !important;
text-decoration: none;
transition: background .18s ease, color .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.breadcrumb .top-nav-link:hover {
background: rgba(255, 255, 255, .12);
transform: translateY(-1px);
color: #fff !important;
}
/* crumb courant = .glass-breadcrumb__crumb--active : pill BLANC frosté, NEUTRE (kit) */
.breadcrumb .top-nav-link.w--current {
background: rgba(255, 255, 255, .20) !important;
border: 1px solid var(--gk-border);
box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
color: #fff !important;
cursor: default;
}
.breadcrumb .top-nav-link.w--current:hover { transform: none; }
/* séparateur « / » = .glass-breadcrumb__sep (discret) */
.breadcrumb .separator-text {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
flex-shrink: 0;
opacity: .25;
font-size: .65rem;
pointer-events: none;
user-select: none;
}
.breadcrumb .separator-text.hidden,
.breadcrumb .top-nav-link.hidden { display: none !important; }
/* Onglets de page (Webflow Tabs) → pill du kit + onglet actif cyan/violet lisible */
.tabs-menu.w-tab-menu {
background: var(--gk-glass) !important;
border: 1px solid var(--gk-border) !important;
border-radius: 0 !important;
padding: 5px !important;
gap: 2px;
-webkit-backdrop-filter: var(--gk-blur);
backdrop-filter: var(--gk-blur);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.tabs-menu .tab,
.tab.w-tab-link {
background: transparent !important;
color: var(--gk-muted) !important;
border: none !important; /* tue le border-right séparateur Webflow (sinon arrondi en arc) */
border-radius: 0 !important;
font-family: "Inter", sans-serif;
font-weight: 500;
transition: background .2s ease, color .2s ease;
}
.tabs-menu .tab:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
.tab.w--current {
background: rgba(255, 255, 255, .20) !important;
border: 1px solid var(--gk-border) !important;
color: #fff !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}
/* (side nav + dropdowns + raccourcis : voir le BLOC UNIQUE consolidé plus bas) */
/* ----------------------------------------------------------------------------
5. Cartes de la grille d'accueil (home) → verre + survol
-------------------------------------------------------------------------- */
.home_grid_item {
position: relative;
border-radius: 0;
overflow: hidden;
transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s cubic-bezier(.2,.7,.2,1);
}
.home_grid_img { border-radius: inherit !important; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.home_grid_item:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .16); }
.home_grid_item:hover .home_grid_img { transform: scale(1.06); }
/* liserés de label → neutre (blanc discret), pas de couleur */
.label_stroke { background: rgba(255, 255, 255, .4) !important; }
/* ----------------------------------------------------------------------------
6. Cartes de contenu (pages détail poomsae / keup) → verre + survol
-------------------------------------------------------------------------- */
.overview_card, .card_keup {
transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.overview_card:hover, .card_keup:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, .24) !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .14) !important;
}
.overview_image, .main-img, .reverse-img, .list_keup_img { border-radius: 0; }
/* ----------------------------------------------------------------------------
7. Boutons / liens d'action → verre type « glass-btn » du kit
-------------------------------------------------------------------------- */
.container_link_store,
.video_button_container,
.btn,
.button,
.w-button {
background-color: var(--gk-glass) !important;
border: 1px solid var(--gk-border) !important;
border-radius: 0;
-webkit-backdrop-filter: blur(10px) saturate(140%);
backdrop-filter: blur(10px) saturate(140%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.container_link_store:hover,
.video_button_container:hover,
.btn:hover,
.button:hover,
.w-button:hover {
background: rgba(255, 255, 255, .14) !important;
border-color: rgba(255, 255, 255, .28) !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.video_button_play { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }
/* ----------------------------------------------------------------------------
8. Pages richtext (privacy-policy…) : encart verre + texte lisible
-------------------------------------------------------------------------- */
.w-richtext { color: var(--gk-text); }
.w-richtext a { color: var(--gk-aqua); }
.w-richtext blockquote {
background-color: var(--gk-glass) !important;
border-left: 3px solid var(--gk-aqua) !important;
border-radius: 0 12px 12px 0;
}
/* ----------------------------------------------------------------------------
9. Scrollbar fine teintée + accessibilité (réduction du mouvement)
-------------------------------------------------------------------------- */
.content { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.content::-webkit-scrollbar { width: 10px; }
.content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border: 3px solid transparent; border-radius: 0; background-clip: padding-box; }
/* ============================================================================
10. RESHAPE vers le kit — formes des composants (passe « tout d'un coup »)
========================================================================== */
/* (side nav réglée dans le BLOC UNIQUE plus bas — juste un petit espacement) */
.navbar__link, .dropdown-toggle { margin-bottom: 2px; }
/* --- Cartes : rayons du kit (radius-lg / xl) --- */
.home_container { border-radius: 0 !important; }
.home_grid_item,
.overview_card,
.card_keup { border-radius: 0 !important; }
.overview_image, .main-img, .reverse-img, .list_keup_img, .home_grid_img { border-radius: 0 !important; }
/* --- Boutons : pills type glass-btn ; survol = gradient aqua→bleu du kit --- */
.btn, .button, .w-button, .video_button_container {
border-radius: 0 !important;
}
.btn:hover, .button:hover, .w-button:hover, .container_link_store:hover, .video_button_container:hover {
background: rgba(255, 255, 255, .14) !important;
border-color: rgba(255, 255, 255, .28) !important;
}
.container_link_store { border-radius: 0 !important; }
/* --- Bouton « play » vidéo : pastille ronde de verre lumineuse --- */
.video_button_play {
border-radius: 0 !important;
background: rgba(255, 255, 255, .14) !important;
border: 1px solid rgba(255, 255, 255, .28) !important;
}
/* --- Champs de formulaire → glass-input du kit (si présents) --- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea, select, .w-input, .w-select {
background: var(--gk-glass) !important;
border: 1px solid var(--gk-border) !important;
border-radius: 0 !important;
color: var(--gk-text) !important;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
input::placeholder, textarea::placeholder { color: var(--gk-muted); }
select option { background: #11162a; color: #fff; }
/* --- Badges / labels secondaires → mini-pills du kit --- */
.overview_label,
.label_home_text,
.label_text {
letter-spacing: .04em;
text-transform: uppercase;
font-size: .68rem;
color: var(--gk-muted) !important;
}
/* ----------------------------------------------------------------------------
11. Sidebar collée à gauche (plus flottante) + raccourcis sans cadre
-------------------------------------------------------------------------- */
/* DESKTOP uniquement (>991px) : sur mobile la navbar est en off-canvas et le
conteneur garde son padding-top pour le hamburger — on n'y touche pas. */
@media (min-width: 992px) {
.body-inside-container {
padding-left: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.navbar {
height: 100vh !important; /* Webflow met 98% (gap en bas) → pleine hauteur viewport */
border-radius: 0 !important; /* collée : coins droits */
box-shadow: none !important; /* plus de flottement */
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
}
.content { padding-top: 24px !important; }
}
/* ============================================================================
SIDE NAV + DROPDOWNS = copie fidèle du UI Kit (.glass-nav__item / .glass-dropdown).
BLOC UNIQUE — remplace les anciens jeux de règles en conflit.
========================================================================== */
/* Liens de nav = .glass-nav__item : pas de fond, inactif lisible (.78), lift au
survol, item courant = pill verre dépoli (.20) + bordure + ombre. */
.navbar__link,
.dropdown-toggle {
border-radius: var(--gk-radius-full) !important;
background-color: transparent !important;
box-shadow: none !important;
opacity: .78;
transition: opacity .18s ease, background-color .18s ease,
transform .18s cubic-bezier(.34, 1.56, .64, 1) !important;
}
.navbar__link:hover,
.dropdown-toggle:hover {
opacity: 1;
background-color: transparent !important;
box-shadow: none !important;
transform: translateY(-1px);
}
.navbar__link.w--current {
opacity: 1;
background-color: var(--gk-glass-md) !important;
border: 1px solid var(--gk-border) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, .2) !important;
}
.navbar__link.w--current:hover { transform: none; }
/* icône des liens : jamais de carré (repos + survol) */
.square.is--link,
.navbar__link .square.is--link,
.navbar__link:hover .square.is--link,
.dropdown-toggle .square.is--link,
.dropdown-toggle:hover .square.is--link {
background-color: transparent !important;
box-shadow: none !important;
border-radius: var(--gk-radius-sm) !important;
}
/* Raccourcis : aucun cadre, léger lift */
.navbar__shortcut,
.navbar__shortcut:hover {
border-radius: var(--gk-radius) !important;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.navbar__shortcut { transition: transform .2s ease, opacity .2s ease; }
.navbar__shortcut:hover { transform: translateY(-2px); }
.navbar__shortcut .square.is--link,
.navbar__shortcut .icon-navigation,
.navbar__shortcut:hover .square.is--link,
.navbar__shortcut:hover .icon-navigation { background: transparent !important; box-shadow: none !important; }
/* Dropdowns sidebar = .glass-dropdown-menu, mais LISTE REPLIÉE dans la barre
(Webflow force .dropdown-list.w--open{position:static} → inline indenté). */
.dropdown-list.w--open {
background-color: var(--gk-glass) !important;
border: 1px solid var(--gk-border-subtle) !important;
border-radius: var(--gk-radius-lg) !important;
box-shadow: var(--gk-shadow) !important;
padding: 4px !important;
padding-left: 36px !important;
margin-top: 4px !important;
-webkit-backdrop-filter: var(--gk-blur);
backdrop-filter: var(--gk-blur);
}
.dropdown-list .link-block,
.dropdown-link {
border-radius: var(--gk-radius-sm) !important;
color: #fff;
transition: background-color .18s ease, color .18s ease;
}
.dropdown-list .link-block:hover,
.dropdown-link:hover {
background-color: var(--gk-glass-md) !important;
color: #fff !important;
}
.dropdown-list .link-block.w--current,
.dropdown-list .link-block.w--current .dropdown-link {
background-color: rgba(94, 231, 223, .18) !important;
color: var(--gk-aqua) !important;
}
/* chevron (CaretUpDown.svg = double ↕) : éclairé à l'ouverture (rotation = no-op) */
.icon-navigation_dropdown { opacity: .55; transition: opacity .18s ease, transform .18s ease; }
.w--open .icon-navigation_dropdown { opacity: 1; transform: scale(1.05); }
/* ── Reflet « verre » du kit (--reflection-top) posé en FOND (derrière le contenu,
jamais en ::before qui recouvrirait le texte) sur les surfaces dépolies. ── */
.home_container, .overview_card, .card_keup,
.breadcrumb, .tabs-menu.w-tab-menu, .dropdown-list.w--open,
.btn, .button, .w-button, .video_button_container {
background-image: var(--gk-reflection) !important;
}
/* ── Lisibilité des gros titres en dégradé clippé : drop-shadow survit au clip
(contrairement à text-shadow) → titre net même sur un blob de couleur. ── */
.heading_1, .heading_2, .techniques_heading {
filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .35));
}
/* ── Vidéos par mouvement (fiche poomsae, onglet « Vue détaillée ») : se lancent
au SURVOL, comme l'app mobile. Injectées par glass-site.js dans .details_video. */
.details_video.gk-movvid {
position: relative;
overflow: hidden;
cursor: pointer;
border-radius: var(--gk-radius);
background: #000;
aspect-ratio: 1 / 1; /* clips carrés (1360×1360) */
}
.details_video.gk-movvid video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.details_video.gk-movvid .gk-movvid-overlay {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
pointer-events: none; color: #fff;
background: rgba(0, 0, 0, .22);
transition: opacity .25s ease;
}
.details_video.gk-movvid:hover .gk-movvid-overlay { opacity: 0; }
.details_video.gk-movvid .gk-movvid-play { font-size: 1.5rem; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .55)); }
.details_video.gk-movvid .gk-movvid-hint { font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; opacity: .82; }
/* ----------------------------------------------------------------------------
12. Skeleton Loader (style UI Kit) sur les images pendant le chargement
-------------------------------------------------------------------------- */
img.gk-img-loading {
background-color: var(--gk-glass);
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, .16) 40%,
rgba(255, 255, 255, .26) 50%,
rgba(255, 255, 255, .16) 60%,
rgba(255, 255, 255, 0) 100%);
background-size: 200% 100%;
background-repeat: no-repeat;
animation: gkSkeletonShimmer 1.6s linear infinite;
color: transparent; /* masque l'alt-text pendant le chargement */
}
img.gk-img-loaded { animation: none !important; background-image: none !important; background-color: transparent !important; color: inherit; }
@keyframes gkSkeletonShimmer { from { background-position: -150% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) {
.gk-scene .gk-blob { animation: none !important; }
img.gk-img-loading { animation: none !important; }
.home_grid_item, .home_grid_img, .overview_card, .card_keup,
.container_link_store, .video_button_container, .navbar__shortcut,
.navbar__link, .dropdown-toggle, .dropdown-link, .top-nav-link { transition: none !important; }
}
/* ============================================================================
13. Compte (connexion / inscription) + Favoris — « iso » app mobile
----------------------------------------------------------------------------
Injecté par js/tkd-account.js. Style kit : verre dépoli, aqua/violet.
========================================================================== */
body.gk-modal-open { overflow: hidden; }
/* —— Bouton compte dans la navbar (.nav_bottom) —— */
.gk-acct-wrap { position: relative; width: 100%; box-sizing: border-box; margin: 0 0 10px; }
.gk-acct-btn {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 12px; cursor: pointer;
font: 600 14px/1.2 "Inter", sans-serif; color: var(--gk-text);
background-color: var(--gk-glass); border: 1px solid var(--gk-border);
border-radius: var(--gk-radius-full);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
-webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur);
transition: background-color .18s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.gk-acct-btn:hover { background-color: var(--gk-glass-md); transform: translateY(-1px); }
.gk-acct-ic { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; }
.gk-acct-ic svg { display: block; }
.gk-acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk-acct-avatar {
flex: 0 0 auto; display: grid; place-items: center;
width: 28px; height: 28px; border-radius: 50%;
font: 700 12px/1 "Inter", sans-serif; color: #050A14;
background: linear-gradient(135deg, var(--gk-aqua), var(--gk-violet));
}
/* IMPORTANT : .gk-acct-menu et .gk-field ont display:flex → l'attribut [hidden]
(UA display:none) est écrasé. On force le masquage explicitement. */
.gk-acct-menu[hidden], .gk-field[hidden] { display: none !important; }
/* menu (popover au-dessus du bouton, ancré en bas de la sidebar ; peut déborder
à droite sur le contenu pour éviter que le texte se coupe) */
.gk-acct-menu {
position: absolute; left: 0; right: auto; bottom: calc(100% + 10px); z-index: 1500;
min-width: 212px; max-width: 280px;
display: flex; flex-direction: column; gap: 2px; padding: 6px;
background-color: rgba(13, 16, 26, .80); border: 1px solid var(--gk-border-bright);
border-radius: var(--gk-radius); box-shadow: var(--gk-shadow-float);
-webkit-backdrop-filter: var(--gk-blur-lg); backdrop-filter: var(--gk-blur-lg);
}
.gk-acct-mi {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 10px; cursor: pointer; text-align: left; white-space: nowrap;
font: 500 13.5px/1.2 "Inter", sans-serif; color: var(--gk-text);
background: transparent; border: 0; border-radius: var(--gk-radius-sm);
transition: background-color .15s ease;
}
.gk-acct-mi svg { flex: 0 0 auto; opacity: .85; }
.gk-acct-mi:hover { background-color: var(--gk-glass-md); }
.gk-acct-mi:hover svg { opacity: 1; }
.gk-acct-mi.is--danger { color: #ffb4b4; }
.gk-acct-count {
margin-left: auto; padding: 1px 8px; border-radius: var(--gk-radius-full);
font-size: 12px; font-weight: 700; color: #050A14; background: var(--gk-aqua);
}
/* —— Modale d'auth —— */
.gk-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; }
.gk-modal[hidden], .gk-drawer[hidden] { display: none; }
.gk-modal-backdrop, .gk-drawer-backdrop {
position: absolute; inset: 0; background: rgba(6, 8, 16, .62);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.gk-modal-card {
position: relative; z-index: 1; width: min(92vw, 420px);
max-height: 92vh; overflow: auto; padding: 26px 24px 22px;
background-color: rgba(20, 24, 40, .72); border: 1px solid var(--gk-border);
border-radius: var(--gk-radius-lg); box-shadow: var(--gk-shadow-float);
-webkit-backdrop-filter: var(--gk-blur-lg); backdrop-filter: var(--gk-blur-lg);
}
.gk-modal-card.is--busy { opacity: .6; pointer-events: none; }
.gk-modal-x {
position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
display: grid; place-items: center; cursor: pointer; color: var(--gk-muted);
background: var(--gk-glass); border: 1px solid var(--gk-border-subtle);
border-radius: 50%; font-size: 14px; transition: color .15s, background-color .15s;
}
.gk-modal-x:hover { color: var(--gk-text); background: var(--gk-glass-md); }
.gk-modal-title { margin: 2px 0 16px; padding-right: 28px;
font-family: "GT Sectra Display", serif; font-weight: 500; font-size: 24px;
line-height: 1.15; color: var(--gk-text); }
.gk-modal-tabs { display: flex; gap: 6px; margin: 0 0 18px; padding: 4px;
background: var(--gk-glass); border-radius: var(--gk-radius-full); }
.gk-modal-tab {
flex: 1; padding: 9px 12px; cursor: pointer;
font: 600 14px/1 "Inter", sans-serif; color: var(--gk-muted);
background: transparent; border: 0; border-radius: var(--gk-radius-full);
transition: background-color .18s, color .18s;
}
.gk-modal-tab.is--active { color: var(--gk-text); background-color: var(--gk-glass-md);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.gk-modal-form { display: flex; flex-direction: column; gap: 13px; }
.gk-field { display: flex; flex-direction: column; gap: 5px; }
.gk-field > span { font: 500 12.5px/1 "Inter", sans-serif; color: var(--gk-muted); }
.gk-field input {
width: 100%; padding: 11px 13px; box-sizing: border-box;
font: 400 15px/1.3 "Inter", sans-serif; color: var(--gk-text);
background-color: var(--gk-glass); border: 1px solid var(--gk-border);
border-radius: var(--gk-radius-md); outline: none;
transition: border-color .15s, box-shadow .15s;
}
.gk-field input::placeholder { color: var(--gk-muted); }
.gk-field input:focus { border-color: var(--gk-aqua); box-shadow: 0 0 0 3px rgba(94, 231, 223, .22); }
.gk-modal-forgot {
align-self: flex-end; margin-top: -4px; padding: 2px 0; cursor: pointer;
font: 500 12.5px/1 "Inter", sans-serif; color: var(--gk-aqua);
background: none; border: 0;
}
.gk-modal-forgot:hover { text-decoration: underline; }
.gk-modal-error {
padding: 9px 12px; border-radius: var(--gk-radius-sm);
font: 500 13px/1.35 "Inter", sans-serif; color: #ffd0d0;
background: rgba(248, 113, 113, .14); border: 1px solid rgba(248, 113, 113, .32);
}
.gk-modal-error.is--ok { color: #c8ffe2; background: rgba(94, 231, 223, .14); border-color: rgba(94, 231, 223, .34); }
.gk-modal-submit {
margin-top: 4px; padding: 12px 16px; cursor: pointer;
font: 700 15px/1 "Inter", sans-serif; color: #050A14;
background: linear-gradient(135deg, var(--gk-aqua), var(--gk-violet));
border: 0; border-radius: var(--gk-radius-full);
box-shadow: 0 6px 20px rgba(94, 231, 223, .28); transition: transform .15s, filter .15s;
}
.gk-modal-submit:not([disabled]):hover { transform: translateY(-1px); filter: brightness(1.05); }
.gk-modal-submit[disabled] { opacity: .55; cursor: default; }
.gk-modal-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--gk-muted);
font: 500 12px/1 "Inter", sans-serif; }
.gk-modal-or::before, .gk-modal-or::after { content: ""; flex: 1; height: 1px; background: var(--gk-border-subtle); }
.gk-modal-providers { display: flex; flex-direction: column; gap: 9px; }
.gk-prov {
display: flex; align-items: center; justify-content: center; gap: 9px;
padding: 11px 14px; cursor: pointer;
font: 600 14px/1 "Inter", sans-serif; color: var(--gk-text);
background-color: var(--gk-glass); border: 1px solid var(--gk-border);
border-radius: var(--gk-radius-full); transition: background-color .15s, transform .15s;
}
.gk-prov:hover { background-color: var(--gk-glass-md); transform: translateY(-1px); }
.gk-prov-ic { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; }
.gk-prov-ic svg { display: block; }
/* —— Cœur favori (fiches poomsae, dans .top_nav) —— */
.top_nav:has(.gk-fav-heart) { display: flex; align-items: center; gap: 12px; }
/* cœur À CÔTÉ de la barre d'onglets : enfant de .tabs-menu posé en absolu juste à droite
de la pilule (sans wrapper → onglets Webflow intacts) */
.tabs-menu.w-tab-menu:has(.gk-fav-heart) { position: relative; overflow: visible; }
.tabs-menu.w-tab-menu .gk-fav-heart { position: absolute; left: calc(100% + 8px); top: 50%; margin-top: -18px; }
.gk-fav-heart {
flex: 0 0 auto; display: grid; place-items: center;
width: 36px; height: 36px; cursor: pointer; color: var(--gk-muted);
background-color: var(--gk-glass); border: 1px solid var(--gk-border);
border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
-webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background-color .15s, color .15s;
}
.gk-fav-heart:hover { color: var(--gk-text); background-color: var(--gk-glass-md); transform: translateY(-1px); }
.gk-fav-heart.is--on { border-color: rgba(248, 113, 113, .5); background-color: rgba(248, 113, 113, .14); }
.gk-fav-heart svg { display: block; }
/* —— Tiroir « Mes favoris » —— */
.gk-drawer { position: fixed; inset: 0; z-index: 9998; }
.gk-drawer-panel {
position: absolute; top: 0; right: 0; height: 100%; width: min(92vw, 360px);
display: flex; flex-direction: column; padding: 20px 18px;
background-color: rgba(20, 24, 40, .82); border-left: 1px solid var(--gk-border);
box-shadow: var(--gk-shadow-float);
-webkit-backdrop-filter: var(--gk-blur-lg); backdrop-filter: var(--gk-blur-lg);
}
.gk-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.gk-drawer-head h3 { margin: 0; font-family: "GT Sectra Display", serif; font-weight: 500;
font-size: 22px; color: var(--gk-text); }
.gk-drawer-x {
width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
color: var(--gk-muted); background: var(--gk-glass); border: 1px solid var(--gk-border-subtle);
border-radius: 50%; transition: color .15s, background-color .15s;
}
.gk-drawer-x:hover { color: var(--gk-text); background: var(--gk-glass-md); }
.gk-drawer-list { display: flex; flex-direction: column; gap: 9px; overflow: auto; }
.gk-drawer-empty { margin: 24px 4px; color: var(--gk-muted); font: 400 14px/1.5 "Inter", sans-serif; text-align: center; }
.gk-fav-item {
display: flex; align-items: center; gap: 12px; padding: 10px 12px;
text-decoration: none; color: var(--gk-text);
background-color: var(--gk-glass); border: 1px solid var(--gk-border-subtle);
border-radius: var(--gk-radius); transition: background-color .15s, transform .15s;
}
.gk-fav-item:hover { background-color: var(--gk-glass-md); transform: translateX(-2px); }
.gk-fav-ko { flex: 0 0 auto; width: 40px; text-align: center;
font-family: "GT Sectra Display", serif; font-size: 22px; color: var(--gk-aqua); }
.gk-fav-name { flex: 1; font: 600 14.5px/1.2 "Inter", sans-serif; }
.gk-fav-rm {
flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center;
cursor: pointer; color: var(--gk-muted); background: transparent;
border: 1px solid transparent; border-radius: 50%; font-size: 12px;
transition: color .15s, background-color .15s, border-color .15s;
}
.gk-fav-rm:hover { color: #ffb4b4; background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .32); }
@media (prefers-reduced-motion: reduce) {
.gk-acct-btn, .gk-prov, .gk-fav-heart, .gk-fav-item, .gk-modal-submit { transition: none !important; }
}
/* ============================================================================
14. Nav sans dropdowns (liens directs) + section Favoris + pages hub
========================================================================== */
/* le caret des dropdowns est masqué (les dropdowns deviennent des liens via JS) */
.navbar__link_dropdown .icon-navigation_dropdown { display: none !important; }
/* —— Section « Favoris » de la sidebar (remplace « Raccourcis ») —— */
.gk-favnav-empty {
grid-column: 1 / -1; padding: 6px 4px; text-align: center;
font: 400 11.5px/1.5 "Inter", sans-serif; color: var(--gk-muted);
}
/* —— Boutons stores (App Store + Google Play) sur UNE ligne, pleine largeur —— */
.nav_bottom .flex_store { display: flex; flex-direction: row; gap: 8px; width: 100%; box-sizing: border-box; }
.gk-store-btn {
flex: 1 1 0; min-width: 0; box-sizing: border-box;
display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px;
padding: 11px 8px; text-decoration: none; cursor: pointer; white-space: nowrap;
font: 600 10px/1.1 "Inter", sans-serif; letter-spacing: .01em; color: var(--gk-text);
background-color: var(--gk-glass); border: 1px solid var(--gk-border);
border-radius: var(--gk-radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
-webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur);
transition: background-color .15s ease, transform .15s ease;
}
.gk-store-btn:hover { background-color: var(--gk-glass-md); transform: translateY(-1px); }
.gk-store-btn svg { display: block; flex: 0 0 auto; }
/* —— Placeholder « pas de vidéo » (mouvement sans clip) —— */
.details_video.gk-movvid-none {
display: grid; place-items: center; background: var(--gk-glass);
border: 1px dashed var(--gk-border-bright);
}
.gk-movvid-none-in { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--gk-muted); }
.gk-movvid-none-in span { font: 500 12px/1.2 "Inter", sans-serif; }
/* —— Fil d'Ariane = composant kit .glass-breadcrumb (exact) —— */
.glass-breadcrumb {
display: inline-flex; align-items: center; padding: 6px 8px; flex-wrap: nowrap; max-width: 100%;
border-radius: var(--gk-radius-full);
background-color: var(--gk-glass); border: 1px solid var(--gk-border); box-shadow: var(--gk-shadow);
-webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur);
}
.glass-breadcrumb__crumb {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
border-radius: var(--gk-radius-full); font: 500 14px/1 "Inter", sans-serif;
color: var(--gk-text); text-decoration: none; white-space: nowrap; cursor: pointer;
transition: background-color .18s ease, color .18s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.glass-breadcrumb__crumb:hover { background-color: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.glass-breadcrumb__crumb--active {
background-color: var(--gk-glass-md); border: 1px solid var(--gk-border);
box-shadow: 0 2px 12px rgba(0, 0, 0, .2); cursor: default; pointer-events: none;
}
.glass-breadcrumb__crumb--active:hover { transform: none; }
.glass-breadcrumb__crumb-icon { font-size: .85em; opacity: .7; }
.glass-breadcrumb__sep {
display: inline-flex; align-items: center; justify-content: center; width: 16px; flex-shrink: 0;
opacity: .25; font-size: .8em; pointer-events: none; user-select: none;
}
/* ============================================================================
15. Mode clair AUTO — appliqué par JS (.gk-light) quand le fond est trop clair.
Redéfinit les tokens --gk-* (mirror du kit [data-theme="light"]) → tout
composant verre devient lisible (texte sombre, verre blanc opaque).
========================================================================== */
.gk-light {
--gk-text: #0f172a;
--gk-muted: rgba(15, 23, 42, .62);
--gk-glass: rgba(255, 255, 255, .62);
--gk-glass-md: rgba(255, 255, 255, .80);
--gk-glass-strong: rgba(255, 255, 255, .90);
--gk-glass-lg: rgba(255, 255, 255, .92);
--gk-border: rgba(15, 23, 42, .20);
--gk-border-subtle: rgba(15, 23, 42, .10);
--gk-border-bright: rgba(15, 23, 42, .30);
--gk-aqua: #0891b2;
--gk-violet: #6d28d9;
--gk-shadow: 0 8px 32px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
--gk-amber: #0891b2; --gk-rose: #be1b3e; --gk-gold: #8a6d1c;
}
/* overrides là où une couleur claire est codée en dur (onglets, hover breadcrumb) */
.gk-light.tabs-menu .tab.w-tab-link,
.gk-light .tab.w-tab-link { color: var(--gk-text) !important; }
.gk-light.tabs-menu .tab:hover,
.gk-light .tabs-menu .tab:hover { background: rgba(15, 23, 42, .06) !important; color: #0f172a !important; }
.gk-light.tabs-menu .tab.w--current,
.gk-light .tab.w--current { background: rgba(255, 255, 255, .85) !important; color: #0f172a !important; border-color: rgba(15, 23, 42, .20) !important; }
.gk-light.glass-breadcrumb .glass-breadcrumb__crumb:hover { background-color: rgba(15, 23, 42, .07); }
.gk-light.glass-breadcrumb .glass-breadcrumb__sep { opacity: .4; }
/* —— Pages hub (poomsae.html, ressources.html) —— */
.gk-hub-wrap { width: 100%; max-width: 920px; box-sizing: border-box; margin: 8px auto 0; padding: 0 4px; }
.gk-hub-title {
margin: 0 0 4px; font-family: "GT Sectra Display", serif; font-weight: 500;
font-size: 34px; line-height: 1.1; color: var(--gk-text);
}
.gk-hub-intro { margin: 0 0 22px; font: 400 15px/1.5 "Inter", sans-serif; color: var(--gk-muted); }
.gk-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.gk-hub-card {
position: relative; display: flex; flex-direction: column; gap: 5px;
padding: 22px 20px 20px; text-decoration: none; overflow: hidden;
background-color: var(--gk-glass); border: 1px solid var(--gk-border);
border-radius: var(--gk-radius-lg); box-shadow: var(--gk-shadow);
-webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background-color .18s, box-shadow .18s;
}
.gk-hub-card::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
background: var(--gk-reflection); pointer-events: none;
}
a.gk-hub-card:hover { transform: translateY(-3px); background-color: var(--gk-glass-md); box-shadow: var(--gk-shadow-float); }
.gk-hub-ko {
font-family: "GT Sectra Display", serif; font-size: 40px; line-height: 1;
color: var(--gk-aqua); margin-bottom: 4px;
}
.gk-hub-name { font: 700 19px/1.2 "Inter", sans-serif; color: var(--gk-text); }
.gk-hub-sub { font: 400 13.5px/1.45 "Inter", sans-serif; color: var(--gk-muted); }
.gk-hub-card.is--soon { opacity: .55; cursor: default; }
.gk-hub-soon-badge {
position: absolute; top: 12px; right: 12px; z-index: 1;
padding: 2px 9px; border-radius: var(--gk-radius-full);
font: 600 10.5px/1.4 "Inter", sans-serif; letter-spacing: .04em; text-transform: uppercase;
color: var(--gk-text); background: var(--gk-glass-md); border: 1px solid var(--gk-border-subtle);
}
/* ===================== §16 — Mode debug (provenance) =====================
Activé par `body.gk-debug-on` (gk-debug.js). Surligne tout `[data-gk-src]`,
couleur selon la source (en phase avec l'objet SRC de gk-debug.js). */
body.gk-debug-on [data-gk-src] { --gk-c: #9fb0c8; cursor: help; }
body.gk-debug-on [data-gk-src="airtable"] { --gk-c: var(--gk-aqua); }
body.gk-debug-on [data-gk-src="video"] { --gk-c: var(--gk-amber); }
body.gk-debug-on [data-gk-src="favorites"] { --gk-c: var(--gk-violet); }
body.gk-debug-on [data-gk-src="theme"] { --gk-c: var(--gk-rose); }
body.gk-debug-on [data-gk-src="breadcrumb"]{ --gk-c: #9fb0c8; }
/* Voile noir & blanc : toute la page passe en gris (backdrop-filter sur un voile
plein écran). SAUF ce qui est AU-DESSUS du voile = les éléments dynamiques
(z-index relevé), le tooltip et la légende → les couleurs du debug ressortent. */
body.gk-debug-on::before {
content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
-webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1);
}
/* Marqueur universel : contour pointillé + AU-DESSUS du voile (garde la couleur) */
body.gk-debug-on [data-gk-src] {
position: relative; z-index: 9001;
outline: 1px dashed var(--gk-c); outline-offset: 2px; border-radius: 0;
}
/* Texte : soulignement ondulé coloré + ⚡ en exposant */
body.gk-debug-on [data-gk-src]:not(img):not(.details_video) {
text-decoration: underline wavy var(--gk-c);
text-underline-offset: 3px; -webkit-text-decoration-color: var(--gk-c);
}
body.gk-debug-on [data-gk-src]:not(img):not(.details_video)::after {
content: "⚡"; font-size: .78em; margin-left: 3px; vertical-align: super; line-height: 0;
color: var(--gk-c); -webkit-text-fill-color: var(--gk-c); text-decoration: none;
}
/* Images & emplacements vidéo : contour fort + halo (::after ne rend pas sur ![]()
) */
body.gk-debug-on img[data-gk-src],
body.gk-debug-on .details_video[data-gk-src] {
outline: 2px dashed var(--gk-c); outline-offset: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 14px var(--gk-c);
}
/* État « fallback » (devrait être live mais proxy KO) : pointillés + atténué */
body.gk-debug-on [data-gk-src="airtable"][data-gk-state="fallback"] {
text-decoration-style: dotted; opacity: .82;
}
/* —— Tooltip de provenance —— */
.gk-dbg-tip {
position: fixed; z-index: 100000; max-width: 360px; pointer-events: none;
padding: 11px 13px; border-radius: var(--gk-radius);
color: var(--gk-text); font: 400 12.5px/1.5 "Inter", sans-serif;
background: rgba(12,16,28,.88); border: 1px solid var(--gk-border);
-webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur);
box-shadow: var(--gk-shadow);
}
.gk-dbg-tip-h { font: 700 13.5px/1.2 "Inter", sans-serif; margin-bottom: 2px; }
.gk-dbg-tip-note { color: var(--gk-muted); font-style: italic; margin-bottom: 7px; }
.gk-dbg-tip-r { margin-top: 4px; word-break: break-word; }
.gk-dbg-tip-r b { display: inline-block; min-width: 78px; color: var(--gk-muted); font-weight: 600; margin-right: 6px; }
/* —— Panneau légende (coin bas-droite) —— */
.gk-dbg-legend {
position: fixed; right: 16px; bottom: 16px; z-index: 99999; width: 236px;
padding: 13px 14px; border-radius: var(--gk-radius-lg);
color: var(--gk-text); font: 400 12.5px/1.4 "Inter", sans-serif;
background: rgba(12,16,28,.84); border: 1px solid var(--gk-border);
-webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur);
box-shadow: var(--gk-shadow-float, var(--gk-shadow));
}
.gk-dbg-leg-h { font: 700 14px/1.2 "Inter", sans-serif; margin-bottom: 9px; }
.gk-dbg-leg-sub { display: block; font: 400 11px/1.3 "Inter", sans-serif; color: var(--gk-muted); margin-top: 2px; }
.gk-dbg-leg-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.gk-dbg-leg-row.is--empty { opacity: .4; }
.gk-dbg-leg-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 7px currentColor; }
.gk-dbg-leg-lbl { flex: 1 1 auto; }
.gk-dbg-leg-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.gk-dbg-leg-off {
margin-top: 11px; width: 100%; padding: 7px 0; cursor: pointer;
font: 600 12.5px/1 "Inter", sans-serif; color: var(--gk-text);
background: var(--gk-glass-md); border: 1px solid var(--gk-border); border-radius: var(--gk-radius);
}
.gk-dbg-leg-off:hover { background: var(--gk-glass-lg); }
/* —— Item « Mode debug » du menu compte —— */
.gk-acct-mi--debug.is--on { color: var(--gk-aqua); }
.gk-acct-mi--debug .gk-dbg-state { background: var(--gk-glass-md); color: var(--gk-text); }
.gk-acct-mi--debug.is--on .gk-dbg-state { background: var(--gk-aqua); color: #050A14; }
/* ===================== §17 — Ressources : CARTES « BLUEPRINT » (repliées) ====================
Langage planche technique : papier millimétré sombre, repères d'angle, plaque FIG, photo en
planche, schéma de pieds (seogi) posé sur fond sombre (PNG transparents → pieds visibles, AUCUN
fond blanc), nom gravé. Cyan = accent léger. Scopé `.gk-res-detail` (n'affecte pas les poomsae).
Décorations FIG/repères/APPUIS + ouverture en place = js/ressources-blueprint.js. */
.gk-res-detail .w-dyn-list { width: 100%; }
.gk-res-detail .w-dyn-items {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
gap: 20px; align-items: stretch;
}
.gk-res-detail .collection-item {
position: relative; cursor: pointer; display: flex; flex-direction: column;
border-radius: 8px; overflow: hidden;
background-color: #0c1322;
background-image:
linear-gradient(rgba(150,175,195,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(150,175,195,.045) 1px, transparent 1px),
linear-gradient(rgba(150,175,195,.075) 1px, transparent 1px),
linear-gradient(90deg, rgba(150,175,195,.075) 1px, transparent 1px);
background-size: 13px 13px, 13px 13px, 65px 65px, 65px 65px;
background-position: center;
border: 1px solid rgba(255,255,255,.13);
box-shadow: 0 8px 26px rgba(0,0,0,.32);
transition: transform .25s, border-color .25s, box-shadow .25s;
}
.gk-res-detail .collection-item:hover {
transform: translateY(-4px); border-color: rgba(94,231,223,.4);
box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 22px rgba(94,231,223,.10);
}
.gk-res-detail .details_container { display: flex !important; flex-direction: column; gap: 0; padding: 0 !important; height: 100%; }
/* en-tête FIG (injecté) */
.gk-res-detail .bp-top {
order: -3; display: flex; align-items: center; justify-content: space-between;
padding: 11px 15px; font-family: ui-monospace, Menlo, monospace; font-size: 10px;
letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55);
border-bottom: 1px dashed rgba(255,255,255,.14);
}
.gk-res-detail .bp-top .bp-fig { color: rgba(120,205,200,.85); }
.gk-res-detail .bp-top .bp-ref { color: rgba(255,255,255,.4); }
/* plate photo = ENTIÈRE (contain), aucun crop */
.gk-res-detail .details_card {
order: -2; position: relative; margin: 14px 14px 0; height: 150px;
display: flex; align-items: center; justify-content: center; overflow: hidden;
background: rgba(255,255,255,.025); border: 1px dashed rgba(255,255,255,.14); border-radius: 8px; padding: 12px;
}
.gk-res-detail .main-img {
max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important;
object-fit: contain !important; aspect-ratio: auto !important; display: block; border-radius: 8px !important;
}
/* bande APPUIS (seogi) : pieds sur fond SOMBRE, jamais de fond blanc */
.gk-res-detail .details_foot {
order: -1; position: relative; margin: 11px 14px 0; height: 120px;
display: flex; align-items: center; justify-content: center; overflow: hidden;
padding: 18px 10px 10px; background: rgba(255,255,255,.02); border: 1px dashed rgba(255,255,255,.14); border-radius: 8px;
}
.gk-res-detail .details_foot .bp-footlab {
position: absolute; top: 6px; left: 9px; font-family: ui-monospace, Menlo, monospace;
font-size: 8px; letter-spacing: .14em; color: rgba(190,205,210,.6);
}
.gk-res-detail .details_foot_image {
max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important;
object-fit: contain !important; aspect-ratio: auto !important; border-radius: 8px !important;
transform: scale(1.42); filter: brightness(1.08) contrast(1.04);
}
/* nom gravé + traduction (mono) */
.gk-res-detail .detais_text { order: 0; flex: 1 1 auto; padding: 12px 16px 16px; text-align: left; }
.gk-res-detail .techniques_heading {
margin: 0 0 3px; font-family: "GT Sectra Display", Georgia, serif; font-weight: 500; font-size: 17px; letter-spacing: .02em;
}
.gk-res-detail .techniques_heading::after {
content: ""; display: block; width: 26px; height: 2px; margin-top: 7px;
background: linear-gradient(90deg, rgba(94,231,223,.55), transparent);
}
.gk-res-detail .desc {
margin: 8px 0 0 !important; font-family: ui-monospace, Menlo, monospace; font-size: 11px;
letter-spacing: .05em; text-transform: uppercase; color: var(--gk-muted); text-align: left !important;
}
.gk-res-detail .container-bottom { display: none; }
/* repères d'angle + indice (injectés) */
.gk-res-detail .reg { position: absolute; width: 9px; height: 9px; z-index: 5; opacity: .5; pointer-events: none; }
.gk-res-detail .reg::before, .gk-res-detail .reg::after { content: ""; position: absolute; background: rgba(255,255,255,.42); }
.gk-res-detail .reg::before { width: 9px; height: 1px; top: 4px; }
.gk-res-detail .reg::after { width: 1px; height: 9px; left: 4px; }
.gk-res-detail .reg-tl { top: 6px; left: 6px; } .gk-res-detail .reg-tr { top: 6px; right: 6px; }
.gk-res-detail .reg-bl { bottom: 6px; left: 6px; } .gk-res-detail .reg-br { bottom: 6px; right: 6px; }
/* indice « voir la planche » : DANS le flux, sous la description (jamais de chevauchement) */
.gk-res-detail .bp-open {
display: block; margin-top: 10px; text-align: right;
font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .14em;
color: rgba(94,231,223,.72); opacity: 0; transition: opacity .2s;
}
.gk-res-detail .collection-item:hover .bp-open { opacity: 1; }
/* ===================== §18 — Ressources : PLANCHE ouverte EN PLACE (blueprint) ====================
Au clic, la carte prend toute la largeur et la planche s'affiche DEDANS (js/ressources-blueprint.js).
Données réelles uniquement (photo, schéma de pieds seogi, traduction, autres positions de la page). */
.gk-res-detail .collection-item.is-open { grid-column: 1 / -1; cursor: default; }
.gk-res-detail .collection-item.is-open .details_container,
.gk-res-detail .collection-item.is-open > .reg,
.gk-res-detail .collection-item.is-open > .bp-open { display: none !important; }
.gk-res-detail .bp-planche { position: relative; padding: 30px 30px 36px; animation: bpPlOpen .4s cubic-bezier(.2,.85,.25,1) both; }
@keyframes bpPlOpen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gk-res-detail .bp-close {
position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 17px; color: #fff;
background: rgba(5,10,20,.6); border: 1px solid var(--gk-border-bright); transition: transform .25s, background .25s; z-index: 10;
}
.gk-res-detail .bp-close:hover { transform: rotate(90deg) scale(1.06); background: rgba(247,168,196,.3); }
.gk-res-detail .bp-pl-head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-right: 54px;
border-bottom: 1px dashed rgba(255,255,255,.16); padding-bottom: 18px; margin-bottom: 22px;
}
.gk-res-detail .bp-pl-kicker { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(120,205,200,.85); }
.gk-res-detail .bp-pl-title { font-family: "GT Sectra Display", Georgia, serif; font-weight: 500; font-size: 34px; margin: 8px 0 0; letter-spacing: .01em; line-height: 1.05; }
.gk-res-detail .bp-pl-sub { font-style: italic; color: var(--gk-muted); margin: 6px 0 0; font-size: 15px; }
.gk-res-detail .bp-pl-fig { font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .16em; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
.gk-res-detail .bp-pl-lab { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(190,205,210,.65); margin-bottom: 8px; }
.gk-res-detail .bp-pl-media { display: grid; gap: 18px; margin-bottom: 22px; }
.gk-res-detail .bp-pl-media.two { grid-template-columns: 1.1fr .9fr; }
.gk-res-detail .bp-pl-media.one { grid-template-columns: minmax(0, 560px); justify-content: center; }
.gk-res-detail .bp-pl-schema, .gk-res-detail .bp-pl-photo {
position: relative; padding: 30px 16px 16px; border-radius: 8px;
background-color: rgba(255,255,255,.025); border: 1px dashed rgba(255,255,255,.16);
background-image: linear-gradient(rgba(150,175,195,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(150,175,195,.05) 1px, transparent 1px);
background-size: 22px 22px; display: flex; align-items: center; justify-content: center; min-height: 240px;
}
.gk-res-detail .bp-pl-schema .bp-pl-lab, .gk-res-detail .bp-pl-photo .bp-pl-lab { position: absolute; top: 12px; left: 14px; margin: 0; }
.gk-res-detail .bp-pl-schema img { max-width: 100%; max-height: 330px; object-fit: contain; transform: scale(1.05); filter: brightness(1.06); }
.gk-res-detail .bp-pl-photo img { max-width: 100%; max-height: 360px; object-fit: contain; border-radius: 8px; }
.gk-res-detail .bp-pl-notes { margin-bottom: 22px; padding: 16px 18px; border-left: 2px solid rgba(94,231,223,.5); background: rgba(255,255,255,.03); border-radius: 0 6px 6px 0; }
.gk-res-detail .bp-pl-notes p { margin: 0; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.6; }
.gk-res-detail .bp-pl-also .bp-pl-thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.gk-res-detail .bp-pl-thumb { margin: 0; width: 130px; }
.gk-res-detail .bp-pl-thumb img { width: 100%; height: 96px; object-fit: contain; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.14); border-radius: 8px; padding: 6px; }
.gk-res-detail .bp-pl-thumb figcaption { margin-top: 6px; font-size: 11px; color: var(--gk-muted); text-align: center; }
@media (max-width: 760px) { .gk-res-detail .bp-pl-media.two { grid-template-columns: 1fr; } }
/* ===================== §19 — Sidebar repliée : rail d'icônes propre + tooltips =====================
Classe .gk-nav-collapsed posée par glass-site.js quand le rail est étroit (< 170px).
- chaque icône a son nom en TOOLTIP au survol (élément flottant .gk-nav-tip créé en JS, sur le côté) ;
- le bas : bouton Compte = AVATAR ROND net (JG), centré ; Store / bêta / titre Favoris retirés (réapparaissent dépliés). */
.navbar.gk-nav-collapsed .nav_bottom { padding-bottom: 14px; align-items: center; gap: 4px; }
.navbar.gk-nav-collapsed .nav_bottom .overview_label.navigation,
.navbar.gk-nav-collapsed .title-shortcut,
.navbar.gk-nav-collapsed .gk-favnav-empty { display: none !important; }
/* replié : boutons store (iOS + Android) → RONDS, même taille que le bouton compte (44px), empilés */
.navbar.gk-nav-collapsed .nav_bottom .flex_store {
display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 2px 0 0;
}
.navbar.gk-nav-collapsed .nav_bottom .flex_store .gk-store-btn {
flex: 0 0 auto; width: 44px; height: 44px; padding: 0; gap: 0; border-radius: 50%;
}
.navbar.gk-nav-collapsed .nav_bottom .flex_store .gk-store-btn span { display: none; }
/* replié : la sidebar prend son propre contexte d'empilement AU-DESSUS du contenu
(sinon le menu compte qui déborde passe derrière des cartes en position:relative z-index) */
.navbar.gk-nav-collapsed { position: relative; z-index: 50; }
.navbar.gk-nav-collapsed .nav_bottom .gk-acct-name { display: none !important; }
.navbar.gk-nav-collapsed .nav_bottom .gk-acct-wrap { width: auto; margin: 0; display: flex; justify-content: center; }
.navbar.gk-nav-collapsed .nav_bottom .gk-acct-btn {
width: 44px; height: 44px; min-width: 0; padding: 0; gap: 0; justify-content: center; border-radius: 50%;
}
.navbar.gk-nav-collapsed .nav_bottom .gk-acct-avatar { width: 30px; height: 30px; font-size: 13px; }
.navbar.gk-nav-collapsed .gk-acct-btn { cursor: pointer; }
/* replié : laisser le menu compte SORTIR du rail (sinon coupé) et le faire flotter à droite de l'avatar */
.navbar.gk-nav-collapsed { overflow: visible; }
.navbar.gk-nav-collapsed .gk-acct-menu {
left: calc(100% + 12px); right: auto; bottom: 0; top: auto; min-width: 220px;
}
/* replié : sélecteur de langue → bouton rond globe-only, centré, homogène avec compte/store ;
menu déroulant qui SORT à droite du rail (comme le menu compte). */
.navbar.gk-nav-collapsed .gk-lang { margin: 6px 0 4px; display: flex; justify-content: center; }
.navbar.gk-nav-collapsed .gk-lang-btn { width: 44px; height: 44px; min-width: 0; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
.navbar.gk-nav-collapsed .gk-lang-cur { display: none; }
.navbar.gk-nav-collapsed .gk-lang-globe { font-size: 17px; }
.navbar.gk-nav-collapsed .gk-lang-menu { left: calc(100% + 12px); right: auto; bottom: 0; min-width: 180px; }
/* tooltip flottant du rail (créé/positionné en JS → échappe au overflow:hidden de la sidebar) */
.gk-nav-tip {
position: fixed; z-index: 9999; pointer-events: none; opacity: 0; transform: translateX(-4px);
transition: opacity .14s ease, transform .14s ease;
padding: 8px 13px; border-radius: 0; font: 600 12.5px/1 "Inter", system-ui, sans-serif; white-space: nowrap;
color: var(--gk-text); background: var(--gk-glass-lg); border: 1px solid var(--gk-border-bright);
box-shadow: var(--gk-shadow-float), inset 0 1px 0 rgba(255,255,255,.40);
-webkit-backdrop-filter: var(--gk-blur-lg); backdrop-filter: var(--gk-blur-lg);
}
.gk-nav-tip.show { opacity: 1; transform: none; }
/* flèche = carré tourné, mais on NE garde que sa moitié EXTÉRIEURE (clip-path) → un seul
triangle. Sinon, le corps étant translucide, la moitié intérieure du carré reste visible
et on voit le losange entier (= 2 triangles dos à dos). */
.gk-nav-tip::before {
content: ""; position: absolute; left: -4px; top: 50%; transform: translateY(-50%) rotate(45deg);
width: 9px; height: 9px; background: var(--gk-glass-lg);
border-left: 1px solid var(--gk-border-bright); border-bottom: 1px solid var(--gk-border-bright);
clip-path: polygon(0 0, 0 100%, 100% 100%);
}
/* ===================== §20 — Logo animé nav (Circuit qui s'allume) ===================== */
.gk-logoanim{position:relative;display:inline-block;overflow:hidden;line-height:0;border-radius: 0}
.gk-logoanim svg{display:block;width:100%;height:100%}
.gk-logoanim use{fill:#fff}
.logo-navigation.gk-logoanim{padding:0;background:none;flex:0 0 32px;width:32px;min-width:32px;height:32px}
.eff-circuit{position:relative}
.eff-circuit .lg,.eff-circuit{overflow:hidden}
.eff-circuit .circuit-grid,
.eff-circuit .circuit-vig{position:absolute;inset:0;pointer-events:none;border-radius: 0}
.eff-circuit .circuit-grid{
background-image:linear-gradient(rgba(94,231,223,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(94,231,223,.10) 1px,transparent 1px);
background-size:13px 13px;mix-blend-mode:screen;
animation:circuit-gridpan 6s linear infinite;opacity:.5}
.eff-circuit .circuit-vig{
background:radial-gradient(circle at 50% 50%,transparent 45%,rgba(4,8,12,.72) 100%);
box-shadow:inset 0 0 0 1px rgba(94,231,223,.25)}
@keyframes circuit-gridpan{from{background-position:0 0,0 0}to{background-position:13px 13px,13px 13px}}
.eff-circuit .circuit-emblem{
transform-box:fill-box;transform-origin:center;
animation:circuit-emblem 4.4s ease-in-out infinite}
@keyframes circuit-emblem{
0%{filter:drop-shadow(0 0 3px rgba(94,231,223,.55));opacity:.86}
42%{filter:drop-shadow(0 0 11px rgba(94,231,223,.95)) drop-shadow(0 0 22px rgba(123,208,236,.55));opacity:1}
70%{filter:drop-shadow(0 0 14px rgba(94,231,223,.9)) drop-shadow(0 0 26px rgba(94,231,223,.5));opacity:1}
100%{filter:drop-shadow(0 0 3px rgba(94,231,223,.55));opacity:.86}}
.eff-circuit .circuit-halo{
transform-box:fill-box;transform-origin:center;
animation:circuit-halo 4.4s ease-in-out infinite}
@keyframes circuit-halo{
0%,100%{transform:scale(.78);opacity:.35}
50%{transform:scale(1.04);opacity:.75}}
.eff-circuit .circuit-tr{
stroke-dasharray:300;stroke-dashoffset:300;
animation:circuit-draw 4.4s ease-in-out infinite}
@keyframes circuit-draw{
0%{stroke-dashoffset:300;opacity:.15}
10%{opacity:.4}
40%{stroke-dashoffset:0;opacity:1}
78%{stroke-dashoffset:0;opacity:1}
92%{stroke-dashoffset:-300;opacity:.2}
100%{stroke-dashoffset:-300;opacity:.15}}
.eff-circuit .circuit-tr1{animation-delay:0s}
.eff-circuit .circuit-tr5{animation-delay:.12s}
.eff-circuit .circuit-tr7{animation-delay:.24s}
.eff-circuit .circuit-tr3{animation-delay:.36s}
.eff-circuit .circuit-tr2{animation-delay:.2s}
.eff-circuit .circuit-tr8{animation-delay:.32s}
.eff-circuit .circuit-tr4{animation-delay:.44s}
.eff-circuit .circuit-tr6{animation-delay:.56s}
.eff-circuit .circuit-nd{
transform-box:fill-box;transform-origin:center;
animation:circuit-pulse 4.4s ease-in-out infinite}
@keyframes circuit-pulse{
0%{transform:scale(.3);opacity:0;fill:#5ee7df}
35%{transform:scale(.3);opacity:0}
46%{transform:scale(1.5);opacity:1;fill:#cdeffb}
60%{transform:scale(1);opacity:.95;fill:#5ee7df}
80%{transform:scale(1.15);opacity:1;fill:#5ee7df}
100%{transform:scale(.3);opacity:0;fill:#5ee7df}}
.eff-circuit .circuit-n1{animation-delay:.3s}
.eff-circuit .circuit-n6{animation-delay:.42s}
.eff-circuit .circuit-n2{animation-delay:.5s}
.eff-circuit .circuit-n8{animation-delay:.54s}
.eff-circuit .circuit-n4{animation-delay:.6s}
.eff-circuit .circuit-n3{animation-delay:.52s}
.eff-circuit .circuit-n9{animation-delay:.62s}
.eff-circuit .circuit-n7{animation-delay:.74s}
.eff-circuit .circuit-n5{animation-delay:.78s}
.eff-circuit .circuit-scanline{
animation:circuit-scan 4.4s linear infinite;mix-blend-mode:screen}
@keyframes circuit-scan{
0%{transform:translateY(-20px);opacity:0}
8%{opacity:.55}
46%{transform:translateY(570px);opacity:.55}
54%{opacity:0}
100%{transform:translateY(570px);opacity:0}}
/* ===================== §21 — Page profil (/profile.html) ===================== */
.gk-prof-wrap { max-width: 760px; margin: 0 auto; padding: 30px 22px 64px; }
.gk-prof-title { font: 500 30px/1.1 "GT Sectra Display", Georgia, serif; margin: 0 0 18px; }
.gk-prof-card { background: var(--gk-glass); border: 1px solid var(--gk-border); border-radius: var(--gk-radius-lg); padding: 24px; -webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur); box-shadow: var(--gk-shadow); }
.gk-prof-head { display: flex; align-items: center; gap: 16px; }
.gk-prof-avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 24px; color: #06121e; background: linear-gradient(135deg, var(--gk-aqua), var(--gk-violet)); flex: 0 0 auto; }
.gk-prof-avatar--ghost { background: var(--gk-glass-md); color: var(--gk-muted); }
.gk-prof-id { flex: 1; min-width: 0; }
.gk-prof-name { font: 600 20px/1.2 "GT Sectra Display", Georgia, serif; }
.gk-prof-mail { color: var(--gk-muted); font-size: 13.5px; margin-top: 2px; }
.gk-prof-stat { text-align: center; flex: 0 0 auto; }
.gk-prof-stat b { display: block; font-size: 24px; font-weight: 700; color: var(--gk-aqua); }
.gk-prof-stat span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gk-muted); }
.gk-prof-h { margin: 26px 0 12px; font: 600 12.5px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gk-muted); }
.gk-prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.gk-prof-fav { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--gk-radius); background: var(--gk-glass); border: 1px solid var(--gk-border-subtle); text-decoration: none; color: var(--gk-text); transition: background-color .18s, transform .18s; }
.gk-prof-fav:hover { background: var(--gk-glass-md); transform: translateY(-1px); }
.gk-prof-fav-img { width: 42px; height: 42px; border-radius: 0; background-size: cover; background-position: center; flex: 0 0 auto; }
.gk-prof-fav-tx b { display: block; font-size: 13.5px; font-weight: 600; }
.gk-prof-fav-tx small { color: var(--gk-muted); font-size: 12px; }
.gk-prof-empty { color: var(--gk-muted); font-size: 13.5px; padding: 14px 2px; }
.gk-prof-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.gk-prof-btn { appearance: none; border: 1px solid var(--gk-border); background: var(--gk-glass); color: var(--gk-text); font: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 18px; border-radius: var(--gk-radius-full); cursor: pointer; -webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur); transition: background-color .15s; }
.gk-prof-btn:hover { background: var(--gk-glass-md); }
.gk-prof-btn.is--primary { border-color: transparent; background: linear-gradient(90deg, var(--gk-aqua), var(--gk-violet)); color: #06121e; }
.gk-prof-btn.is--danger { color: #ffb4b4; border-color: rgba(255,120,120,.4); }
.gk-prof-signin { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gk-prof-signin .gk-prof-mail { max-width: 42ch; }
.gk-prof-signin .gk-prof-actions { justify-content: center; }
/* lien "Mon profil" dans le menu compte (c'est un , pas un