/* gk-mur.css — le « mur » d'invitation à créer un compte.
   ---------------------------------------------------------------------------
   Une seule pièce de vocabulaire, réutilisée partout : un VOILE qui se pose au
   bas d'une zone coupée (le contenu continue derrière, flouté par
   backdrop-filter), et un PANNEAU plein qui remplace un contenu entier.
   Rien n'est supprimé du DOM : le mur est purement visuel, réversible, et le
   contenu reste lisible par les moteurs de recherche (échantillonnage souple,
   déclaré en JSON-LD isAccessibleForFree — cf. gk-mur.js).
   Charte : or satin #C8AA6E sur fond #0B0E1A, hexagones au clip-path, aucun
   arrondi. Aucune animation d'attente (pas de point qui pulse). */

/* ── zone coupée ─────────────────────────────────────────────────────────── */
.gkm-zone { position: relative; }
.gkm-zone.is--coupe { overflow: hidden !important; }   /* !important : v3-fiche.css
   impose `overflow: visible` au déroulé et aux rangées 3D (règle du défilement
   unique). La coupe reste sans scrollbar : `hidden` ne crée aucun défileur. */
/* la coupe ne doit pas rogner un survol/ombre quand le mur est levé */
.gkm-zone:not(.is--coupe) { max-height: none !important; }

/* ── le voile ────────────────────────────────────────────────────────────
   Deux calques : .gkm-fondu porte le dégradé ET le flou, adouci par un masque
   pour que le flou ARRIVE progressivement (sinon la dernière ligne encore
   « offerte » se retrouvait floutée net) ; .gkm-in porte le message, hors du
   masque, sinon le cadenas et le bouton s'effaçaient avec lui. */
.gkm-voile { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 20px 18px; cursor: pointer; height: 208px; max-height: 100%; }
.gkm-fondu { position: absolute; inset: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(7px) saturate(.72);
  backdrop-filter: blur(7px) saturate(.72);
  background: linear-gradient(to bottom,
    rgba(11,14,26,0) 0%, rgba(11,14,26,.5) 34%, rgba(11,14,26,.88) 66%, rgba(11,14,26,.985) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 22%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 22%); }
/* variante « plein » : le voile couvre toute la zone, message au centre */
.gkm-voile.is--plein { top: 0; height: auto; align-items: center; padding: 20px; }
.gkm-voile.is--plein .gkm-fondu { -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(to bottom, rgba(11,14,26,.62), rgba(11,14,26,.93)); }
.gkm-voile .gkm-in { position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 9px; max-width: 40ch; }
/* colonne étroite (le déroulé, la liste des techniques) : message resserré */
.gkm-voile.is--etroit { padding: 0 10px 14px; }
.gkm-voile.is--etroit .gkm-in { gap: 6px; }
.gkm-voile.is--etroit .gkm-in > p { display: none; }
.gkm-voile.is--etroit .gkm-cad { width: 32px; height: 36px; }
.gkm-voile.is--etroit .gkm-cad i { font-size: 15px; }
.gkm-voile.is--etroit b { font-size: 15px; }
.gkm-voile.is--etroit .cta { padding: 10px 20px; font-size: 12px; }

/* cadenas hexagonal (recette .hxring du site : fond = trait, ::before intérieur) */
.gkm-cad { --hx: 9px; --hxw: 1px; --hxc: rgba(200,170,110,.62); --hxfill: rgba(11,14,26,.85);
  width: 40px; height: 44px; display: grid; place-items: center;
  clip-path: polygon(var(--hx) 0, calc(100% - var(--hx)) 0, 100% 50%, calc(100% - var(--hx)) 100%, var(--hx) 100%, 0 50%); }
.gkm-cad i { font-size: 19px; color: #E8C77E; }

.gkm-voile b {
  font: italic 700 18px/1.25 'GT Sectra Display', Georgia, serif; color: #F2F4FA; text-wrap: balance; }
.gkm-voile p {
  margin: 0; font: 400 12.5px/1.6 Inter, sans-serif; color: rgba(255,255,255,.66); }
.gkm-voile .cta { margin-top: 6px; }
/* second choix, discret : on ne met pas deux boutons pleins côte à côte */
.gkm-deja { appearance: none; background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font: 500 11.5px Inter, sans-serif; color: rgba(255,255,255,.5);
  text-decoration: underline; text-underline-offset: 3px; }
.gkm-deja:hover { color: #F0E6D2; }

/* ── contrôle verrouillé (bouton de lecture, flèches, carte de reel) ─────── */
/* le cadenas est un VRAI nœud posé par gk-mur.js (.gkm-cle) : une pseudo-classe
   ::after aurait dû coder en dur un point de code Phosphor, illisible dès que
   la police du vendor change de version. */
.gkm-lock { position: relative; cursor: pointer; }
.gkm-cle { position: absolute; right: 8px; top: 8px; z-index: 4; pointer-events: none;
  width: 22px; height: 24px; display: grid; place-items: center;
  background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); }
.gkm-cle i { font-size: 11px; color: #0B0E1A; }
/* les flèches du déroulé : pas de badge, juste l'état terne */
.gkm-lock.is--nu { opacity: .45; }
.gkm-lock.is--nu .gkm-cle { display: none; }

/* ── ligne de contexte glissée dans la modale de compte ──────────────────── */
.gkm-raison { display: flex; align-items: center; gap: 9px; margin: 2px 0 14px; padding: 10px 13px;
  font: 400 12.5px/1.5 Inter, sans-serif; color: rgba(255,255,255,.74);
  background: rgba(200,170,110,.09); box-shadow: inset 0 0 0 1px rgba(200,170,110,.24); }
.gkm-raison i { font-size: 16px; color: #E8C77E; flex: 0 0 auto; }

@media (max-width: 700px) {
  .gkm-voile { padding: 0 14px 18px; }
  .gkm-voile b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .gkm-voile { transition: none; } }

/* ── teaser « Rejoins la communauté » (communaute.js) ─────────────────────
   On y ajoute « Créer un compte » : le bouton d'origine devient donc le SECOND
   choix, et doit cesser d'être aussi appuyé que le premier (deux boutons pleins
   côte à côte ne hiérarchisent rien). */
.gk-com-teaser [data-gkm-act="signup"] ~ .gk-fl-go {
  background: rgba(10,12,22,.55) !important; color: #F2F4FA;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); border-radius: 0;
  font: 600 12.5px Inter, sans-serif; letter-spacing: .04em; padding: 11px 26px;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }
.gk-com-teaser [data-gkm-act="signup"] ~ .gk-fl-go:hover { filter: none; background: rgba(255,255,255,.08) !important; }