/* ============================================================================
   v3-social.css — V4 « Hextech Or » : Profil, Communauté, Découverte,
   Découvrir, Nouveautés. Chargé APRÈS glass-site.css + hextech-or.css :
   uniquement additif (aucun composant du kit n'est redéfini ailleurs).
   Règles charte : aucun arrondi, accent or satin unique, hiérarchie par
   opacités de blanc, rouge réservé ceintures/gemmes, encre #0B0E1A sur or.
   ========================================================================== */

/* ── En-tête de page v3 partagé ── */
.v3-title { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; }

/* ============================================================================
   PROFIL (/profile.html) — gabarit maquette « Wiki · Profil »
   ========================================================================== */
.gk-pf .pf-hero { margin-top: 18px; }
.pf-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pf-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pf-ava { position: relative; width: 88px; height: 88px; flex: 0 0 88px; display: grid; place-items: center;
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0 50%);
  background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.18) 35%, rgba(255,255,255,.06) 60%, rgba(255,255,255,.26));
  overflow: hidden; }
.pf-ava img { width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover;
  clip-path: polygon(21px 0, calc(100% - 21px) 0, 100% 50%, calc(100% - 21px) 100%, 21px 100%, 0 50%); }
.pf-ava .ini { display: grid; place-items: center; width: calc(100% - 4px); height: calc(100% - 4px);
  font: italic 700 30px 'GT Sectra Display', Georgia, serif; color: #F2F4FA; background: #131A2B;
  clip-path: polygon(21px 0, calc(100% - 21px) 0, 100% 50%, calc(100% - 21px) 100%, 21px 100%, 0 50%); }
.pf-name h1 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; }
.pf-belt { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap;
  font: 600 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--gk-muted); }
.pf-belt .sw { width: 22px; height: 8px; flex: 0 0 22px; display: inline-flex; align-items: flex-end; justify-content: center; gap: 1px; }
.pf-belt .sw i { width: 2px; height: 5px; display: block; }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-btn { appearance: none; border: 0; display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px;
  font: 600 12.5px Inter, sans-serif; letter-spacing: .04em; color: #F2F4FA; cursor: pointer;
  background: rgba(10,12,22,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%); }
.pf-btn:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.pf-btn.gold { color: #0B0E1A; font: 800 italic 12.5px 'Inter Tight', Inter, sans-serif;
  background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%);
  box-shadow: inset 0 0 0 1px rgba(200,170,110,.5); }
.pf-btn.gold:hover { filter: brightness(1.06); }
/* action réduite à son icône (roue crantée Paramètres, comme l'en-tête de l'app) */
.pf-btn.is--ic { padding: 11px 15px; }
.pf-btn.is--ic i { font-size: 16px; }

/* menu « … » d'une publication (Signaler · Bloquer) : remplace le prompt() */
.gk-com-menu { position: absolute; z-index: 100003; min-width: 178px; padding: 5px;
  display: flex; flex-direction: column;
  background: #131A2B; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.5); }
.gk-com-menu button { appearance: none; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; text-align: left;
  font: 500 13px Inter, sans-serif; color: #F2F4FA; }
.gk-com-menu button:hover { background: rgba(255,255,255,.07); }
.gk-com-menu button.is--danger { color: #E7796D; }
.gk-com-menu i { font-size: 16px; }

/* teaser déconnecté */
.pf-teaser { max-width: 52ch; }
.pf-teaser p { margin: 12px 0 16px; font: 400 13.5px/1.65 Inter, sans-serif; color: rgba(255,255,255,.78); }
/* barre de stats */
.pf-stats { display: flex; align-items: center; gap: 34px; margin-top: 2px; flex-wrap: wrap; }
.pf-stats[hidden] { display: none; }
.pf-stat b { font: italic 700 24px 'GT Sectra Display', Georgia, serif; color: #F2F4FA; }
.pf-stat span { display: block; font: 600 9.5px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gk-muted); margin-top: 2px; }
/* Une seule colonne, comme l'app : les onglets et leur contenu occupent une
   largeur de lecture, sans colonne latérale (l'app n'en a pas). */
.pf-main { max-width: 720px; margin-top: 18px; }
@media (max-width: 900px) { .pf-stats { gap: 22px; } }
.pf-pane[hidden] { display: none; }
/* le kit communauté passe au hextech dans le profil et la communauté */
.gk-pf .gk-com-card, .gk-comv3 .gk-com-card { border-radius: 0; background: rgba(255,255,255,.05); border: 1px solid transparent;
  border-image: linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.1) 40%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.22)) 1; }
.gk-pf .gk-com-img, .gk-comv3 .gk-com-img, .gk-pf .gk-com-video, .gk-comv3 .gk-com-video { border-radius: 0; }
.gk-pf .gk-com-title, .gk-comv3 .gk-com-title { font: italic 700 17px 'GT Sectra Display', Georgia, serif; }
.gk-pf .gk-com-act.is--liked i, .gk-comv3 .gk-com-act.is--liked i { color: #C8AA6E; }
.gk-comv3 .gk-com-open-composer { border-radius: 0; border: 0; background: rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
/* sélecteur de ceinture (kit existant) en jetons hexagonaux */
.gk-pf .gk-belt-opt { border-radius: 0; border: 0; background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.gk-pf .gk-belt-opt.is--on { background: color-mix(in oklab, #C8AA6E 26%, transparent); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(200,170,110,.6); }
/* calendrier d'entraînement (page S'entraîner, comme dans l'app) */
.gk-tr-cal { margin-bottom: 26px; }
.gk-tr-cal .gk-cal-grid { grid-template-columns: repeat(7, minmax(0, 44px)); gap: 6px; }
.gk-tr-cal .gk-cal-day { border-radius: 0; height: 40px; background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.gk-tr-cal .gk-cal-day.is--on { color: #0B0E1A; background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%); }
.gk-tr-cal .gk-cal-day.is--today { outline: none; box-shadow: inset 0 0 0 1.5px rgba(200,170,110,.55); }

/* ============================================================================
   COMMUNAUTÉ (/communaute.html) — onglets News · Publications · Bientôt ×4
   ========================================================================== */
.comv3-pane[hidden] { display: none; }
.comv3-pane .gk-com-wrap { max-width: 640px; margin-top: 18px; }
/* rangées de news (rendu news-live.js, restylé maquette) */
.gk-comv3 .gk-news-grid { max-height: none; -webkit-mask-image: none; mask-image: none; padding: 0; overflow: visible; }
.gk-comv3 .gk-news-card { border-radius: 0; border: 0; gap: 7px; padding: 14px 20px;
  background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.028));
  box-shadow: inset 0 1.2px 0 rgba(255,255,255,.2), inset 0 -1.2px 0 rgba(255,255,255,.06);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.gk-comv3 .gk-news-card:hover { transform: none; filter: brightness(1.12); }
.gk-comv3 .gk-news-title { font: italic 700 16px/1.35 'GT Sectra Display', Georgia, serif; }
.gk-comv3 .gk-news-cat { border-radius: 0; border: 0; padding: 4px 11px;
  font: 700 9px Inter, sans-serif; letter-spacing: .16em;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); }
/* Plus AUCUN badge doré plein : rouge transparent + liseré rouge (retour Jason
   31/08). Le liseré est un ::before en anneau evenodd : un box-shadow ou une
   border resteraient RECTANGULAIRES sous le clip-path hexagonal (c'était le
   « stroke qui ne suit pas la forme »). */
.gk-comv3 .gk-news-cat.is-res, .gk-comv3 .gk-news-cat.is-comb {
  position: relative; isolation: isolate;
  background: rgba(226,74,102,.10); color: #F0A2AE; box-shadow: none;
}
.gk-comv3 .gk-news-cat.is-res::before, .gk-comv3 .gk-news-cat.is-comb::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(226,74,102,.55);
  clip-path: polygon(evenodd, 6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%, 6.2px 1px, calc(100% - 6.2px) 1px, calc(100% - 1px) 50%, calc(100% - 6.2px) calc(100% - 1px), 6.2px calc(100% - 1px), 1px 50%);
}
/* le badge Technique garde sa teinte or mais son liseré épouse enfin l'hexagone */
.gk-comv3 .gk-news-cat.is-poom {
  position: relative; isolation: isolate;
  background: rgba(200,170,110,.14); color: #E4CE9B; box-shadow: none;
}
.gk-comv3 .gk-news-cat.is-poom::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(200,170,110,.5);
  clip-path: polygon(evenodd, 6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%, 6.2px 1px, calc(100% - 6.2px) 1px, calc(100% - 1px) 50%, calc(100% - 6.2px) calc(100% - 1px), 6.2px calc(100% - 1px), 1px 50%);
}
.gk-comv3 .gk-news-cat.is-comp { background: #F2F4FA; color: #0B0E1A; }
/* labels côte à côte, plus étalés sur la largeur (retour Jason 31/08) */
.gk-comv3 .gk-news-row { justify-content: flex-start; flex-wrap: wrap; row-gap: 6px; }
/* ── News en 2 colonnes : national (pays du lecteur) / international ── */
.gk-comv3 .gk-news-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.gk-comv3 .gk-news-cols .gk-news-grid.is--col { grid-template-columns: 1fr; }
.gk-comv3 .gk-news-colh {
  display: flex; align-items: baseline; gap: 10px; margin: 4px 0 14px;
  font: italic 700 19px 'GT Sectra Display', Georgia, serif; color: #F2EEE4;
}
.gk-comv3 .gk-news-colh em {
  font: 600 9.5px Inter, sans-serif; font-style: normal;
  letter-spacing: .16em; text-transform: uppercase; color: #8A93AD;
}
.gk-comv3 .gk-news-colh::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(200,170,110,.5), rgba(200,170,110,0));
}
@media (max-width: 991px) {
  .gk-comv3 .gk-news-cols { grid-template-columns: 1fr; }
}
.gk-comv3 .gk-news-cat.is-actu { background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.gk-comv3 .gk-news-src { display: inline-flex; align-items: center; gap: 5px; }
.gk-comv3 .gk-news-ext { color: #C8AA6E; }
.gk-comv3 .gk-news-flag { color: #E8C77E; }
.gk-comv3 .gk-news-dot { border-radius: 0; width: 7px; height: 7px; transform: rotate(45deg); animation: none;
  background: linear-gradient(180deg, #F0E6D2, #C8AA6E 45%, #785A28); box-shadow: 0 0 8px rgba(200,170,110,.8); }

/* ============================================================================
   DÉCOUVERTE (/decouverte.html) — feed vidéo restylé .fcard (filtres gardés)
   ========================================================================== */
.gk-dscv3 .gk-disco { margin-top: 8px; }
.gk-dscv3 .gk-disco-bar { background: none; position: static; padding: 12px 0; }
.gk-dscv3 .gk-disco-chip { border-radius: 0; border: 0; padding: 8px 14px;
  font: 600 10.5px Inter, sans-serif; letter-spacing: .06em; color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.gk-dscv3 .gk-disco-chip:hover { transform: none; background: rgba(255,255,255,.1); }
.gk-dscv3 .gk-disco-chip.is-on { position: relative; isolation: isolate; background: rgba(200,170,110,.55); color: #E8C77E; }
.gk-dscv3 .gk-disco-chip.is-on::before { content: ''; position: absolute; inset: 1px; z-index: -1; background: #131A2B;
  clip-path: polygon(7.6px 0, calc(100% - 7.6px) 0, 100% 50%, calc(100% - 7.6px) 100%, 7.6px 100%, 0 50%); }
/* ── Mosaïque façon recherche Instagram ──────────────────────────────────────
   Colonnes maçonnées : chaque tuile garde son format naturel, donc les shorts
   verticaux sont hauts et les vidéos classiques larges, sans recadrage. Le
   `columns` CSS remplit colonne par colonne et évite le calcul de hauteurs en
   JS (aucune dépendance, aucun recalcul au resize).
   Tuiles RECTANGULAIRES : une découpe hexagonale laisserait des dents entre
   les tuiles ; l'hexagone reste sur les chips et les boutons. */
.gk-dscv3 .gk-disco-feed.gk-disco-mosaic {
  /* ⚠ display:block obligatoire : le conteneur d'origine est un flex column
     (feed plein écran), et `columns` n'a AUCUN effet sur un conteneur flex —
     les tuiles se retrouvaient à 0 de large, mosaïque invisible. */
  display: block; height: auto; overflow: visible; scroll-snap-type: none;
  columns: 4 220px; column-gap: 10px; margin-top: 4px;
}
.gk-dscv3 .gk-disco-item {
  display: block; min-height: 0; width: auto; padding: 0;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 10px; scroll-snap-align: none;
}
.gk-dscv3 .gk-disco-frame {
  position: relative; width: 100%; border: 0; border-radius: 0; box-shadow: none;
  background: #0B1322; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
}
.gk-dscv3 .gk-disco-item.is-short .gk-disco-frame { width: 100%; aspect-ratio: 9 / 16; }
.gk-dscv3 .gk-disco-thumb { filter: brightness(.82); transition: filter .2s ease, transform .35s ease; }
.gk-dscv3 .gk-disco-item:hover .gk-disco-thumb { filter: brightness(1); transform: scale(1.03); }
/* voile bas + légende DANS la tuile (mosaïque = pas de texte sous l'image) */
.gk-dscv3 .gk-disco-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; width: auto;
  padding: 26px 13px 11px; text-align: left; pointer-events: none;
  background: linear-gradient(180deg,transparent,rgba(6,9,17,.9));
}
.gk-dscv3 .gk-disco-meta .gk-disco-move { pointer-events: auto; }
.gk-dscv3 .gk-disco-cat { color: #C8AA6E; letter-spacing: .18em; font-size: 8.5px; }
.gk-dscv3 .gk-disco-title {
  font: italic 700 13.5px/1.3 'GT Sectra Display', Georgia, serif; color: #F2F4FA; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gk-dscv3 .gk-disco-move { color: #C8AA6E; font-size: 11px; margin-top: 5px; }
.gk-dscv3 .gk-disco-move:hover { color: #F0E6D2; text-decoration: none; }
/* bouton lecture : visible mais discret, il s'efface quand la vidéo tourne */
.gk-dscv3 .gk-disco-play { border-radius: 0; border: 0; width: 46px; height: 38px; font-size: 15px; color: #fff;
  background: rgba(10,15,28,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); z-index: 3;
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%); }
.gk-dscv3 .gk-disco-play:hover { transform: scale(1.06); background: rgba(10,15,28,.82); }
.gk-dscv3 .gk-disco-save { border-radius: 0; border: 0; width: 36px; height: 30px; font-size: 13px; z-index: 3;
  color: rgba(255,255,255,.85); background: rgba(10,15,28,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.gk-dscv3 .gk-disco-save:hover { transform: scale(1.06); background: rgba(10,15,28,.85); }
.gk-dscv3 .gk-disco-save.is-on { color: #0B0E1A;
  background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%);
  box-shadow: inset 0 0 0 1px rgba(200,170,110,.5); }
/* pendant la lecture : plus de voile ni de bouton par-dessus l'iframe */
.gk-dscv3 .gk-disco-item.is-playing .gk-disco-meta,
.gk-dscv3 .gk-disco-item.is-playing .gk-disco-play { display: none; }
.gk-dscv3 .gk-disco-spin { border-color: rgba(200,170,110,.25); border-top-color: #C8AA6E; }
@media (max-width: 991px) { .gk-dscv3 .gk-disco-feed.gk-disco-mosaic { columns: 2 150px; column-gap: 8px; } }

/* ============================================================================
   DÉCOUVRIR (/decouvrir.html) — article maquette : héros, .hx, tuiles, serment
   ========================================================================== */
.gk-dkv3 .gk-dk-wrap { padding-top: 0; }
.gk-dkv3 .gk-dk-kick { font: 500 15px 'Noto Serif KR', serif; color: var(--gk-muted); margin: 22px 0 6px; }
.gk-dkv3 .gk-dk-hero { font-style: italic; font-weight: 700; }
.gk-dkv3 .gk-dk-eyebrow { color: #C8AA6E; letter-spacing: .22em; font-size: 10px; margin-bottom: 0; }
.gk-dkv3 .gk-dk-sec .hx { margin: 8px 0 14px; }
.gk-dkv3 .hx .gk-dk-h2 { margin: 0; font: italic 700 17px/1.3 'GT Sectra Display', Georgia, serif; letter-spacing: .05em; }
/* l'ancien rappel du nom est remplacé par les tuiles maquette ; l'eyebrow
   « Le nom » de la section suivante devient redondant (chaîne conservée) */
.gk-dkv3 .gk-dk-name-row { display: none; }
.gk-dkv3 .dk-sec-name + .gk-dk-sec > .gk-dk-eyebrow { display: none; }
/* tuiles 태 / 권 / 도 */
.dk-name3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 4px; }
.dk-name3-tile { text-align: center; padding: 20px 12px 18px;
  background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: inset 0 1.4px 0 rgba(255,255,255,.26), inset 0 -1.4px 0 rgba(255,255,255,.08);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%); }
.dk-name3-tile b { display: block; font: 700 36px 'Noto Serif KR', serif; color: #F2F4FA; }
.dk-name3-tile .r { display: block; font: italic 700 15px 'GT Sectra Display', Georgia, serif; color: #F2F4FA; margin-top: 8px; }
.dk-name3-tile .m { display: block; font: 500 11.5px Inter, sans-serif; color: var(--gk-muted); margin-top: 4px; }
/* cartes et repères de l'article au hextech */
/* Cartes d'article : RECTANGLES (les fonds de contenu ne sont plus des
   hexagones ; les deux filets haut/bas redeviennent pleine largeur). */
.gk-dkv3 .gk-dk-name-cell, .gk-dkv3 .gk-dk-card { border: 0; border-radius: 0;
  background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: inset 0 1.4px 0 rgba(255,255,255,.26), inset 0 -1.4px 0 rgba(255,255,255,.08); }
.gk-dkv3 .gk-dk-tri { border: 0; border-radius: 0; background: linear-gradient(150deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.1);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); }
.gk-dkv3 .gk-dk-kwan-seal { border-radius: 0; }
/* le serment de l'élève : encadré or maquette */
.gk-dkv3 .gk-dk-quote { border-left: 0; margin-top: 24px; padding: 18px 22px;
  background: color-mix(in oklab, #C8AA6E 12%, transparent);
  box-shadow: inset 0 0 0 1px rgba(200,170,110,.4);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%); }
.gk-dkv3 .gk-dk-quote-ko { color: #C8AA6E; letter-spacing: .2em; font-size: 9.5px; }
.gk-dkv3 .gk-dk-quote-txt { font: italic 700 15px/1.55 'GT Sectra Display', Georgia, serif; }
.gk-dkv3 .gk-dk-oath-note { display: block; margin-top: 10px; font: 400 12px/1.6 Inter, sans-serif; color: rgba(255,255,255,.7); }
/* CTA finaux : or satin + fantôme hexagonal */
.gk-dkv3 .gk-dk-ctas { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.gk-dkv3 .gk-dk-cta { border-radius: 0; padding: 13px 30px; color: #0B0E1A;
  font: 800 italic 13px 'Inter Tight', Inter, sans-serif;
  background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%);
  box-shadow: inset 0 0 0 1px rgba(200,170,110,.5);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }
.gk-dkv3 .gk-dk-cta-ghost { border: 0; border-radius: 0; padding: 13px 26px; color: #F2F4FA;
  font: 600 12.5px Inter, sans-serif; background: rgba(10,12,22,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }
.gk-dkv3 .gk-dk-cta-ghost:hover { background: rgba(255,255,255,.08); }

/* ============================================================================
   NOUVEAUTÉS (/nouveautes.html) — en-tête simple, pas de héros
   ========================================================================== */
.nvv3 .gk-rel-sub { margin-top: 14px; }

/* ============================================================================
   PROFIL — édition en place, trophées, page Paramètres (retours Jason 14/08)
   ========================================================================== */
/* — édition en place : le héros devient le formulaire, plus de modale — */
.pf-edit { margin-top: 18px; }
.pf-edit-row { display: flex; align-items: flex-start; gap: 18px; }
.pf-edit-photo { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.pf-edit-photo .pf-btn-sm i { font-size: 14px; }
.pf-edit-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-edit-two { display: grid; grid-template-columns: 1fr 210px; gap: 10px; }
@media (max-width: 600px) { .pf-edit-two { grid-template-columns: 1fr; } }
.pf-edit .gk-field { display: block; }
.pf-edit .gk-field > span {
  display: block; margin-bottom: 5px;
  font: 600 9.5px Inter; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.pf-edit .gk-field input, .pf-edit .gk-field select {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 14px; border: 0; outline: 0;
  font: 500 13px Inter; color: #F2F4FA; background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-appearance: none; appearance: none;
}
/* chevron du sélecteur de pays (appearance:none le retire) */
.pf-edit .gk-field select {
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%), linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
  background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.pf-edit .gk-field select option { color: #F2F4FA; background: #131A2B; }
.pf-edit .gk-field input:focus, .pf-edit .gk-field select:focus { box-shadow: inset 0 0 0 1px rgba(200,170,110,.65); }
.gk-belt-grid.is--wide .gk-belt-opt { padding: 10px 16px; }
.pf-edit-grade { margin-top: 18px; }
.pf-edit-lab { display: block; margin-bottom: 8px; font: 600 9.5px Inter; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pf-edit-err { margin-top: 12px; font: 500 12px Inter; color: #E8C77E; }
.pf-edit .pf-actions { margin-top: 18px; }
.pf-btn-sm { margin-top: 12px; font-size: 11px; padding: 7px 14px; }

/* — trophées (Firestore trophy_claims, écrits par l'app) — */
/* Trophées : planche de familles (port de components/TrophiesTab.tsx).
   Tout est volontairement en retrait (opacité) et coiffé d'un bandeau : dans
   l'app aussi la feature est marquée « en cours de développement ». */
.tphy-wip { display: flex; align-items: center; gap: 9px; padding: 11px 16px; margin-top: 4px;
  font: 600 11px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #E8C77E;
  background: color-mix(in oklab, #C8AA6E 12%, transparent);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%); }
.tphy-fsub { margin: -6px 0 12px; font: 400 12px/1.5 Inter, sans-serif; color: var(--gk-muted); }
.tphy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .tphy-grid { grid-template-columns: repeat(2, 1fr); } }
.tphy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  padding: 16px 10px 14px; opacity: .45;
  background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.026));
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }
.tphy.is--earned { opacity: 1; }
.tphy.is--progress { opacity: .7; }
/* médaillon : dégradé radial de la matière (GEMS de l'app), barrettes de keup,
   traits de dan. Une pastille plate ne distinguait pas les 8 tuiles de dan. */
.tphy-gem { position: relative; width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 3px;
  background: radial-gradient(circle at 30% 20%, var(--g1) 0%, var(--g2) 45%, var(--g3) 100%);
  color: #0B0E1A; font-size: 17px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.tphy-stripes { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; }
.tphy-stripes i { width: 3px; height: 7px; background: rgba(255,255,255,.9); box-shadow: 0 0 0 .5px rgba(0,0,0,.35); }
.tphy-bars { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tphy-bars i { width: 16px; height: 1.5px; background: linear-gradient(90deg, #8A6A2F, #E4CE9B); }
.tphy-count { font: 700 10px 'Inter Tight', Inter, sans-serif; color: #E8C77E; }
.tphy.is--gold .tphy-gem { box-shadow: 0 0 0 1.5px rgba(200,170,110,.85); }
.tphy.is--locked .tphy-gem { filter: grayscale(1) brightness(.5); }
.tphy-bar { width: 76px; height: 3px; background: rgba(255,255,255,.14); display: block; }
.tphy-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8A6A2F, #E4CE9B); }
.tphy b { font: 600 11.5px/1.3 Inter, sans-serif; color: #F2F4FA; }
.tphy-sub { font: 400 10px/1.35 Inter, sans-serif; color: var(--gk-muted); }
.tphy-sub.is--claim { color: #E8C77E; font-weight: 600; }
.tphy-sub.is--rejected { color: #E7796D; }

/* — page /parametres — colonne unique de sections empilées, comme l'app — */
.set-main { max-width: 620px; margin-top: 26px; }
.set-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 1.2px 0 rgba(255,255,255,.2), inset 0 -1.2px 0 rgba(255,255,255,.06); }
.set-card .gk-prof-avatar { flex: 0 0 auto; }
.set-card .gk-prof-name { font: italic 700 19px 'GT Sectra Display', Georgia, serif; color: #F2F4FA; }
.set-card .gk-prof-mail { font: 500 12px Inter, sans-serif; color: var(--gk-muted); margin-top: 2px; }
.set-main .hxt { margin-top: 26px; }
.set-rows { display: flex; flex-direction: column; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  box-sizing: border-box; padding: 14px 4px; text-align: left; text-decoration: none; color: #F2F4FA;
  background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font: 500 13.5px Inter, sans-serif; }
.set-rows .set-row:last-child { border-bottom: 0; }
.set-row .k { color: rgba(255,255,255,.9); }
.set-row b { font: 500 13px Inter, sans-serif; color: var(--gk-muted); }
.set-row i { color: var(--gk-muted); font-size: 15px; }
.set-row.is--go { cursor: pointer; }
.set-row.is--go:hover { color: #fff; }
.set-row.is--go:hover i { color: #E8C77E; }
.set-row.is--danger .k, .set-row.is--danger i { color: #E7796D; }
.set-sel { appearance: none; -webkit-appearance: none; border: 0; outline: 0; cursor: pointer;
  padding: 7px 26px 7px 12px; font: 500 13px Inter, sans-serif; color: #F2F4FA;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%), linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
  background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.set-sel option { color: #F2F4FA; background: #131A2B; }
.set-pill { font: 700 9.5px Inter, sans-serif; letter-spacing: .14em; padding: 4px 9px;
  color: var(--gk-muted); background: rgba(255,255,255,.07); }
.set-pill.is--on { color: #0B0E1A; background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%); }
.set-ver { margin-top: 30px; text-align: center; font: 500 11px Inter, sans-serif; color: var(--gk-muted); }
@media (max-width: 900px) {
  .pf-edit-row { flex-direction: column; }
  .pf-edit-two { grid-template-columns: 1fr; }
}

/* sentinelle de chargement progressif de la mosaïque (500+ vidéos) */
.gk-dscv3 .gk-disco-more { display: flex; justify-content: center; padding: 22px 0 4px; }
.gk-dscv3 .gk-disco-more[hidden] { display: none; }
.gk-dscv3 .gk-disco-sentinel {
  width: 22px; height: 22px; border: 2px solid rgba(200,170,110,.25); border-top-color: #C8AA6E;
  border-radius: 50%; animation: gk-disco-spin .9s linear infinite;
}
@keyframes gk-disco-spin { to { transform: rotate(360deg); } }

/* raccourci « Mes mouvements » en tête des filtres Découverte (chip bookmark de l'app) */
.gk-dscv3 .gk-disco-chip.is-saved { display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: #E8C77E; box-shadow: inset 0 0 0 1px rgba(200,170,110,.45); }
.gk-dscv3 .gk-disco-chip.is-saved:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(200,170,110,.8); }

/* réglage avec sous-titre (« Données d'usage et amélioration ») */
.set-row .k small { display: block; margin-top: 3px; font: 400 11.5px/1.4 Inter, sans-serif; color: var(--gk-muted); }

/* mention « Débutant » sur la ceinture blanche (comme le sélecteur de l'app) */
.gk-belt-note { font: 600 8.5px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: #E8C77E; font-style: normal; margin-left: 5px; }

/* ═══════ Inspiration : MAÇONNERIE en quinconce + lecteur centré (24/08) ═══════
   La mosaïque en columns (toutes les cartes de la même taille) devient une grille
   DENSE à tailles mélangées : les plus vues (champ `views`, relevé YouTube côté
   backoffice) prennent 2 colonnes, le reste alterne grand / standard.
   ⚠ La hauteur d'une carte vient UNIQUEMENT du nombre de rangées (grid-row: span N,
   rangée de 8 px + gap 8 px → N rangées = 16N-8 px). Le cadre doit donc remplir sa
   case en ABSOLU : laissé en flux avec son `aspect-ratio` (16/9 ou 9/16 selon
   .is-short), il ne remplissait pas la case et la grille se trouait. */
/* ⚠ .gk-disco-feed (glass-site, ancien feed plein écran) pose align-items:center :
   en grille, les cartes ne s'étirent alors plus à leur case et, leur cadre étant
   en absolu, tombent à une hauteur de 0. D'où le stretch explicite. */
/* Toutes les vidéos sont verticales : la carte est en 9:16, sans exception
   (demande Jason 24/08). Pour que le rapport soit EXACT, les colonnes ont une
   largeur fixe et la hauteur de rangée en découle : une carte standard occupe
   une case, une grande occupe 2 × 2. Avec des colonnes élastiques (1fr) la
   largeur réelle est inconnue en CSS et le rapport ne pourrait qu'être
   approché. L'espace restant se répartit entre les colonnes. */
.gk-dscv3 .gk-disco-feed.gk-disco-mosaic{
  --dc:176px;
  display:grid;columns:auto;column-width:auto;
  grid-template-columns:repeat(auto-fill,var(--dc));
  grid-auto-rows:calc(var(--dc) * 16 / 9);
  grid-auto-flow:dense;gap:10px;justify-content:space-between;
  height:auto;overflow:visible;align-items:stretch;align-content:start}
.gk-dscv3 .gk-disco-mosaic .gk-disco-item{position:relative;margin:0;overflow:hidden;break-inside:auto;align-self:stretch;min-height:0;height:auto}
.gk-dscv3 .gk-disco-mosaic .gk-disco-item .gk-disco-frame{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important}
.gk-dscv3 .gk-disco-mosaic .gk-disco-item .gk-disco-thumb{width:100%;height:100%;object-fit:cover}
.gk-dscv3 .gk-disco-mosaic .gk-disco-item.is-s,
.gk-dscv3 .gk-disco-mosaic .gk-disco-item.is-m{grid-column:span 1;grid-row:span 1}
.gk-dscv3 .gk-disco-mosaic .gk-disco-item.is-xl{grid-column:span 2;grid-row:span 2}
.gk-dscv3 .gk-disco-views{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;font:600 10px Inter;letter-spacing:.04em;color:#F0E6D2;background:rgba(8,12,22,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
.gk-dscv3 .gk-disco-views i{font-size:11px;color:#C8AA6E}
.gk-dscv3 .gk-disco-item.is-xl .gk-disco-title{font-size:14px}
@media (max-width:991px){ .gk-dscv3 .gk-disco-feed.gk-disco-mosaic{--dc:150px} }
@media (max-width:640px){
  /* Sur deux colonnes, « span 2 » vaut pleine largeur : une grande carte
     mangerait tout l'écran. Toutes les cartes passent donc à la même taille,
     toujours en 9:16. */
  .gk-dscv3 .gk-disco-feed.gk-disco-mosaic{--dc:calc(50% - 5px)}
  .gk-dscv3 .gk-disco-mosaic .gk-disco-item.is-xl{grid-column:span 1;grid-row:span 1}
}

/* Aller au poomsae : une icône, juste sous le marque-page, comme dans l'app
   (demande Jason 24/08). L'étiquette dorée en bas de carte la remplaçait mais
   mangeait la vignette et n'existait pas dans l'app. */
.gk-dscv3 .gk-disco-poom{position:absolute;top:46px;right:10px;z-index:3;
  width:36px;height:30px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:15px;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.30);isolation:isolate;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);
  transition:transform .2s,color .2s}
.gk-dscv3 .gk-disco-poom::before{content:'';position:absolute;inset:1px;z-index:-1;
  background:rgba(10,15,28,.72);
  clip-path:polygon(7.2px 0,calc(100% - 7.2px) 0,100% 50%,calc(100% - 7.2px) 100%,7.2px 100%,0 50%)}
.gk-dscv3 .gk-disco-poom:hover{transform:scale(1.06);color:#F0E6D2;background:rgba(200,170,110,.85)}
/* pendant la lecture, comme le reste du chrome : on dégage */
.gk-dscv3 .gk-disco-frame:has(iframe) .gk-disco-poom{display:none}
.gk-disco-lb-poom{display:inline-flex;align-items:center;gap:7px;margin-top:8px;text-decoration:none;
  font:600 12px Inter;color:#0B0E1A;padding:7px 14px;
  background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
.gk-disco-lb-poom[hidden]{display:none}
.gk-disco-lb-poom:hover{filter:brightness(1.08)}

/* — lecteur centré : UNE vidéo au milieu, molette / flèches / swipe = suivante — */
.gk-disco-lb{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center}
.gk-disco-lb[hidden]{display:none}
.gk-disco-lb-bg{position:absolute;inset:0;background:rgba(5,8,16,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gk-disco-lb-stage{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;width:min(92vw,420px)}
.gk-disco-lb-frame{position:relative;aspect-ratio:9/16;max-height:76vh;margin:0 auto;width:auto;height:76vh;background:#0B1322;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 80px rgba(0,0,0,.6)}
.gk-disco-lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gk-disco-lb-meta{display:flex;align-items:center;gap:12px;padding:0 2px}
.gk-disco-lb-meta .c{font:600 9.5px Inter;letter-spacing:.16em;text-transform:uppercase;color:#C8AA6E;white-space:nowrap}
.gk-disco-lb-meta p{flex:1;margin:0;font:500 12px Inter;line-height:1.45;color:rgba(255,255,255,.85);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gk-disco-lb-save{flex:0 0 auto;border:0;cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#F2F4FA;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
.gk-disco-lb-save.is-on{color:#0B0E1A;background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%)}
.gk-disco-lb-x{position:absolute;top:22px;right:26px;z-index:3;border:0;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:17px;color:#F2F4FA;background:rgba(255,255,255,.08);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-disco-lb-x:hover{background:rgba(255,255,255,.16)}
.gk-disco-lb-nav{position:relative;z-index:2;border:0;cursor:pointer;width:44px;height:44px;margin:0 26px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#E4CE9B;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,11px 100%,0 50%)}
.gk-disco-lb-nav:hover{background:rgba(255,255,255,.14)}
@media (max-width:767px){
  .gk-disco-lb-nav{display:none}
  .gk-disco-lb-stage{width:min(94vw,400px)}
  .gk-disco-lb-frame{height:70vh}
}

/* ═══════ Calendrier S'entraîner : style de l'app (TrainingCalendar) 24/08 ═══════
   Cases = hexagones couchés (fond blanc .05, liseré .16 : recette fond-porte-le-
   trait + ::before re-clippé, jamais de border sur un clip-path). Aujourd'hui =
   cadre relief OR, intérieur nuit, texte ivoire. Jour entraîné = losange or plein
   SOUS la case ; jour prévu = losange ajouré. Mois en GT Sectra italique. */
/* ── « Ta régularité » ──────────────────────────────────────────────────────
   Le mois d'un côté, ce qu'il raconte de l'autre. Avant : une grille de 420 px
   perdue dans une colonne deux fois plus large, des cases serrées et un seul
   chiffre en pied (retour Jason 24/08). Pas de boîte autour : la page en pose
   déjà une, on sépare les deux colonnes par un filet. */
.gk-calx-wrap{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:26px;align-items:start;max-width:660px}
.gk-calx{min-width:0}
.gk-calx-side{display:flex;flex-direction:column;gap:16px;padding-left:26px;
  border-left:1px solid rgba(255,255,255,.10);align-self:stretch}
.gk-calx-stat b{display:block;font:800 italic 30px 'Inter Tight',Inter,sans-serif;color:#F2F4FA;line-height:1}
.gk-calx-stat span{display:block;margin-top:3px;font:600 10px Inter;letter-spacing:.14em;text-transform:uppercase;color:#8A93AD}
.gk-calx-leg{margin-top:auto;display:flex;flex-direction:column;gap:7px;
  font:500 11px Inter;color:rgba(255,255,255,.55)}
.gk-calx-leg span{display:flex;align-items:center;gap:8px}
.gk-calx-leg i{flex:none}
@media (max-width:820px){
  .gk-calx-wrap{grid-template-columns:1fr;gap:18px}
  .gk-calx-side{flex-direction:row;flex-wrap:wrap;gap:22px;padding:16px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.10)}
  .gk-calx-leg{margin:0 0 0 auto}
}
.gk-calx-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gk-calx-month{font:italic 700 20px 'GT Sectra Display',Georgia,serif;color:#F2F4FA}
.gk-calx-nav{position:relative;isolation:isolate;border:0;cursor:pointer;width:37px;height:30px;display:flex;align-items:center;justify-content:center;color:#F2F4FA;font-size:13px;background:rgba(255,255,255,.07);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
.gk-calx-nav:hover{background:rgba(255,255,255,.13)}
.gk-calx-dows{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px}
.gk-calx-dows span{text-align:center;font:600 11px Inter;color:rgba(255,255,255,.6)}
.gk-calx-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.gk-calx-cell{display:flex;flex-direction:column;align-items:center;padding:4px 0 0;min-width:0}
.gk-calx-day{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;max-width:46px;aspect-ratio:38/34;font:600 13.5px Inter;color:rgba(255,255,255,.85);background:rgba(255,255,255,.16);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
.gk-calx-day::before{content:'';position:absolute;inset:1px;z-index:-1;background:#11182A;clip-path:polygon(7.4px 0,calc(100% - 7.4px) 0,100% 50%,calc(100% - 7.4px) 100%,7.4px 100%,0 50%)}
.gk-calx-day.is--today{background:linear-gradient(160deg,#F0E6D2 0%,#C8AA6E 30%,#785A28 66%,#C8AA6E 100%);color:#F0E6D2}
/* Trait d'épaisseur constante. Un hexagone rentré d'un `inset` uniforme n'est
   PAS parallèle au grand : le trait vaut l'inset en haut et en bas, mais moins
   sur les biseaux (mesuré 1,15 px contre 1,6 px, d'où le « haut plus épais »
   signalé par Jason). Pour un chanfrein N, une demi-hauteur a et un côté
   oblique L, l'hexagone intérieur parallèle a un chanfrein N(1 - w/a) et ses
   pointes rentrent de w·L/a, pas de w. Case de 46×41,16 px, N=8, w=1,6 :
   chanfrein 7,35 px, retrait horizontal 1,73 px. */
.gk-calx-day.is--today::before{inset:1.6px 1.73px;background:#0B0E1A;clip-path:polygon(7.35px 0,calc(100% - 7.35px) 0,100% 50%,calc(100% - 7.35px) 100%,7.35px 100%,0 50%)}
.gk-calx-mark{height:10px;display:flex;align-items:center;justify-content:center;margin-top:3px}
.gk-calx-dia{width:6px;height:6px;transform:rotate(45deg);background:linear-gradient(180deg,#F0E6D2,#C8AA6E 55%,#785A28)}
.gk-calx-dia.is--hollow{background:none;box-shadow:inset 0 0 0 1px #C8AA6E}
.gk-calx-foot{margin-top:10px;text-align:center;font:500 13px Inter;color:rgba(255,255,255,.6)}

/* compteur global des trophées, sous le bandeau : on sait tout de suite où on
   en est sur les 56. */
.tphy-total {
  margin: 10px 0 0; font: 700 italic 22px 'Inter Tight', Inter, sans-serif;
  font-variant-numeric: tabular-nums; color: #C8AA6E;
}

/* Visiteur non connecté : la planche complète s'affiche quand même, tout
   verrouillé, avec une invitation discrète. On ne cache plus le catalogue
   derrière la connexion. */
.tphy-invite {
  margin: 4px 0 0; font: 400 13px/1.5 Inter, sans-serif; color: rgba(255,255,255,.55);
}