/* ============================================================================
   signature.css — la couche « scène » de tiklive.eu
   Chargée en DERNIER (après base, halo et tous les lots) : c'est elle qui donne
   son caractère à la page, et elle s'annule en retirant son seul import.

   Trois partis pris, tenus jusqu'au bout :
   1. LA PAGE PARLE LA LANGUE DU LOGO. Les deux dégradés du micro (cyan
      #00F0FF→#0077FF, magenta #FF007A→#9000FF) deviennent les seules couleurs
      d'accent du site. Plus de rose « à peu près » à côté d'un logo qui, lui,
      est précis.
   2. LES TITRES SONT DES AFFICHES. Énormes, chasse serrée, alignés à gauche,
      posés sur une page qui respire — au lieu de gros textes centrés.
   3. LA PAGE A DE LA MATIÈRE. Grain, filets dégradés, chiffres fantômes,
      séparateurs en biais : un aplat noir n'est pas un décor.
   ========================================================================== */

:root{
  /* Relevé au pixel sur TikLive_Logo.svg — ne pas « arrondir » ces valeurs */
  --cy-1:#00f0ff; --cy-2:#0077ff;
  --mg-1:#ff007a; --mg-2:#9000ff;
  --sig:linear-gradient(112deg,var(--cy-1) 0%,var(--mg-1) 54%,var(--mg-2) 100%);
  --sig-line:linear-gradient(112deg,rgba(0,240,255,.55),rgba(255,0,122,.55) 54%,rgba(144,0,255,.55));

  /* L'ancienne palette pointe désormais sur celle du logo */
  --rose:#ff007a; --rose-2:#ff3d95; --rose-deep:#cf0060;
  --rose-soft:rgba(255,0,122,.12); --rose-line:rgba(255,0,122,.38);
  --cyan:#00f0ff; --cyan-soft:rgba(0,240,255,.10); --cyan-line:rgba(0,240,255,.38);

  /* Blanc chaud : le blanc pur sur un noir profond fait mal aux yeux */
  --txt:#f5f3f1; --dim:#a2a6b4; --dim-2:#848b9d;
  --bg:#06070b; --bg-2:#090b11;

  /* Affiche */
  --disp:'Bricolage Grotesque','Manrope',sans-serif;
  --body:'Instrument Sans','Manrope',sans-serif;
  --h1:clamp(40px,6.2vw,86px);
  --h2:clamp(30px,4.4vw,58px);
  --h3:clamp(21px,2.1vw,28px);
}

/* ── 1. Typographie d'affiche ─────────────────────────────────────────────── */
h1,.h1{letter-spacing:-.055em;line-height:.9;font-weight:800}
h2{letter-spacing:-.042em;line-height:.94;font-weight:800}
h3{letter-spacing:-.02em}
.lead{max-width:56ch;font-size:clamp(16px,1.35vw,19px);line-height:1.62;color:var(--dim)}

/* Le mot accentué prend le dégradé du logo, pas un rose plat */
.ac{background:var(--sig);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;padding-right:.06em}

/* L'étiquette de section : un point dégradé + un filet, en capitales mono */
.tag{position:relative;align-items:center;gap:12px;color:var(--dim-2);letter-spacing:.2em}
.tag::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--sig);flex:none;
  box-shadow:0 0 0 4px rgba(255,0,122,.12)}
.tag .dot{display:none}                       /* le point est maintenant dans ::before */

/* ── 3. Matière : grain fixe + vignette ───────────────────────────────────────
   Un grain léger, FIXE (il ne défile pas avec la page), posé au-dessus du fond
   et sous la barre de navigation. C'est ce qui empêche les grands aplats noirs
   de ressembler à un écran éteint. */
body::after{
  content:'';position:fixed;inset:-50%;z-index:5;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
@media (prefers-reduced-motion:reduce){ body::after{opacity:.02} }

/* ── 4. Séparateurs en biais ───────────────────────────────────────────────── */
.sep{height:1px;background:none;overflow:visible}
.sep .glow-line{top:0;height:1px;background:var(--sig-line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}

/* ── 5. Boutons : gélule, dégradé du logo, reflet au survol ───────────────── */
.btn-p{position:relative;overflow:hidden;border-radius:var(--r-pill);height:54px;padding:0 30px;
  background:var(--sig);color:#0a0a12;font-weight:700;
  box-shadow:0 14px 38px -14px rgba(255,0,122,.85),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-p::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 46%,transparent 62%);
  transform:translateX(-120%);transition:transform calc(760ms*var(--m)) var(--ease)}
.btn-p:hover::after{transform:translateX(120%)}
.btn-p:hover{background:var(--sig);box-shadow:0 20px 48px -14px rgba(255,0,122,.95),inset 0 1px 0 rgba(255,255,255,.45);
  transform:translateY(calc(-2px*var(--mt)))}
.btn-p:active{transform:none}
.btn-p--xl{height:62px;padding:0 36px;font-size:17px}
.btn-s,.btn-g{border-radius:var(--r-pill)}

/* ── 6. Cartes : filet dégradé au lieu d'une bordure grise ────────────────── */
.hero-product,.gcard,.pf-score,.rcard,.how-panel,.app-shot,.hero-demo{position:relative}
.hero-product::after,.gcard::after,.pf-score::after,.rcard::after,.how-panel::after,.hero-demo::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(0,240,255,.34),rgba(255,0,122,.26) 46%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}

/* ── 7. Navigation : soulignement qui se trace ────────────────────────────── */
.nav .links>a{position:relative}
.nav .links>a::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1.5px;border-radius:2px;
  background:var(--sig);transform:scaleX(0);transform-origin:right center;
  transition:transform var(--d) var(--ease)}
.nav .links>a:hover::after{transform:scaleX(1);transform-origin:left center}
.nav{background:rgba(6,7,11,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sig-line);opacity:.5}
.brand .word{letter-spacing:-.03em}

/* ── 8. Le héros, en affiche ──────────────────────────────────────────────────
   Le titre monte, le sous-titre et le bouton restent collés à sa base : un bloc
   compact en haut à gauche, pas trois éléments centrés qui flottent. */
.sec-hero .wrap{max-width:calc(var(--wrap) + 120px)}
/* halo.css fixe la taille du titre du héros en dur (clamp 48→94) : le token
   --h1 ne suffit pas, il faut reprendre la règle avec la même spécificité. */
.sec-hero h1{max-width:18ch;font-size:clamp(40px,6.4vw,88px);letter-spacing:-.045em;line-height:.98}
.sec-app h2,.sec-games h2,.sec-pricing h2,.sec-proof h2,.sec-faq h2,.sec-how h2{font-size:var(--h2)}
.sec-hero .tag{margin-bottom:clamp(16px,1.8vw,22px)}
.hero-product{border-radius:26px}

/* La carte de démo et l'aperçu partagent le même filet lumineux en haut */
.hero-demo::before,.hero-product::before{content:'';position:absolute;left:12%;right:12%;top:-1px;height:1px;
  background:var(--sig-line);opacity:.8;pointer-events:none}

/* ── 9. Détails ───────────────────────────────────────────────────────────── */
::selection{background:var(--mg-1);color:#fff}
:focus-visible{outline:2px solid var(--cy-1);outline-offset:3px}
.btn-sub,.fine{color:var(--dim-2);letter-spacing:.02em}
.sec-cta{display:grid;justify-items:start;gap:10px}
/* ⚠ `.btn-p` etait ecrit SANS PORTEE : la regle mettait TOUS les boutons
   principaux en pleine largeur sous 860 px, y compris celui de la barre de
   navigation. Celui-ci prenait alors toute la largeur du conteneur, poussait
   le menu burger hors de l'ecran (482 -> 526 px sur un ecran de 375) et
   creait 151 px de defilement horizontal sur chaque telephone.
   L'intention etait les boutons de `.sec-cta` : on la remet dans sa portee. */
@media (max-width:860px){ .sec-cta{justify-items:stretch} .sec-cta .btn-p{width:100%} }

/* ══ Les jeux : tout voir d'un coup ════════════════════════════════════════
   Le rail horizontal montrait 3 cartes sur 11 : les 8 autres n'existaient que
   pour qui pensait à faire défiler. Sur grand écran on passe en grille — les
   11 jeux sont là, c'est l'argument le plus fort de la page. Le rail reste tel
   quel sous 1080 px, où il est le bon geste (on fait défiler au doigt).
   Les flèches et le compteur sont MASQUÉS en grille : sans débordement ils ne
   commanderaient plus rien (games.js lit scrollLeft). */
@media (min-width:1080px){
  .sec-games .gnav{display:none}
  .sec-games .grail::before,.sec-games .grail::after{display:none}
  .sec-games .gtrack{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(16px,1.6vw,24px);
    overflow:visible;scroll-snap-type:none;cursor:default;
    padding-bottom:6px;
  }
  .sec-games .gcard{width:auto;height:clamp(300px,26vw,360px)}
  /* L'entrée en cascade du rail partait vers la droite : en grille elle monte. */
  html.js .sec-games .gtrack:not(.gm-in) .gcard{transform:translateY(calc(18px*var(--mt)))}
}
@media (min-width:1400px){ .sec-games .gtrack{grid-template-columns:repeat(4,minmax(0,1fr))} }


/* ── 12. Contraste (WCAG 2.1 AA) — posé le 21/09/2026 ─────────────────────────
   Trois écarts MESURÉS sur le rendu, pas lus dans la feuille : une règle peut
   venir d'ailleurs, seule la couleur calculée par le navigateur fait foi.

   1. `.btn-p` — l'étiquette est de l'encre sombre (#0a0a12) posée sur `--sig`,
      qui finit en violet `--mg-2` (#9000ff). Sous le texte, à l'extrémité du
      bouton, le rapport tombe à 3,4:1 ; il en faut 4,5:1 pour du 16 px.
      ⚠ Le dégradé du LOGO ne bouge pas. C'est le REMPLISSAGE DU BOUTON qui
      s'arrête au magenta `--mg-1`, la teinte la plus sombre où l'encre passe
      encore (5,4:1). Le violet reste partout ailleurs : halo, filets, titres,
      logo. `--sig` est intact.
   2. `.chip--rose` — #ff007a sur une pastille éclaircie : 4,3:1.
   3. `.faq-n` d'une question ouverte — #ff007a sur la carte : 4,49:1, raté
      d'un cheveu. Les deux passent à `--rose-2` (#ff3d95) : ~4,9:1.

   Pour revenir en arrière : supprimer ce bloc. Rien d'autre n'en dépend. */
:root{ --sig-btn:linear-gradient(112deg,var(--cy-1) 0%,var(--mg-1) 100%) }
.btn-p{background:var(--sig-btn)}
.btn-p:hover{background:var(--sig-btn)}
.chip--rose{color:var(--rose-2)}
.sec-faq .faq-item[open] .faq-n{color:var(--rose-2)}