/* ══════════════════════════════════════════════════════════════════════════
   Couche STUDIO du site (24/09/2026) — la vitrine aux couleurs de l'app 1.0.
   ──────────────────────────────────────────────────────────────────────────
   Demande du user : « retape la page complète du site pour que les thèmes
   coordonnent ». L'app est passée en DA « Studio » (launcher 1.0.0) : rose
   #ff2d6b, titres Unbounded, texte Instrument Sans, surfaces à filet de
   lumière, gélules. Le site gardait sa palette à lui (#ff007a, Bricolage +
   Manrope) : on voyait deux marques.

   Chargée APRÈS halo.css (index.php, site/page.php). Elle ne change aucun
   contenu ni aucune mise en page : tokens, typographie, surfaces, boutons.
   Pour revenir en arrière : retirer la balise <link> de ces deux fichiers.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/unbounded.woff2') format('woff2');
}

:root {
  /* La palette de l'app (studio.css / arcade.css côté launcher). */
  --rose: #ff2d6b;
  --rose-2: #ff5e8a;
  --rose-deep: #e11d74;
  --rose-soft: rgba(255, 45, 107, .12);
  --rose-line: rgba(255, 45, 107, .38);
  --cyan: #25f4ee;
  --cyan-soft: rgba(37, 244, 238, .10);
  --cyan-line: rgba(37, 244, 238, .35);
  --bg: #07080c;
  --bg-2: #0b0d14;
  --txt: #f2f6fb;
  --dim: #9aa8ba;
  --dim-2: #8b93a3;

  /* Les polices de l'app. Repli sur les anciennes pour les écritures
     qu'Unbounded ne couvre pas (japonais, coréen, thaï...). */
  --disp: 'Unbounded', 'Bricolage Grotesque', 'Manrope', sans-serif;
  --body: 'Instrument Sans', 'Manrope', sans-serif;

  /* Unbounded est large : à taille égale, un titre prendrait une ligne de plus. */
  --h1: clamp(36px, 6vw, 80px);
  --h2: clamp(28px, 3.6vw, 50px);
  --h3: clamp(19px, 1.8vw, 24px);

  /* Les surfaces de l'app : un fond à peine plus clair, un filet de lumière. */
  --st-surface: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
  --st-relief: 0 22px 50px -18px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .075), inset 0 1px 0 rgba(255, 255, 255, .08);
  --hm-surface: rgba(255, 255, 255, .04);
  --hm-rayon: 20px;
}

body { background: var(--bg); font-family: var(--body); letter-spacing: 0; }
::selection { background: var(--rose); color: #fff; }
:focus-visible { outline-color: var(--rose); }

/* Le fond : les deux lueurs de l'app (rose en haut, cyan en bas). */
#tlx-space-css {
  background:
    radial-gradient(60vw 52vh at 82% -4%, rgba(255, 45, 107, .17), transparent 68%),
    radial-gradient(46vw 44vh at 4% 72%, rgba(37, 244, 238, .09), transparent 70%),
    #07080c !important;
}

/* ── Titres ─────────────────────────────────────────────────────────────── */
h1, h2, h3, .disp {
  font-family: var(--disp);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
}
.sec-hero h1 { font-size: clamp(40px, 6.2vw, 84px); letter-spacing: -.045em; }
/* Le mot mis en avant : le même dégradé que les titres de l'app. */
.sec-hero .ac, h2 .ac, h1 .ac {
  background: linear-gradient(100deg, #ff8fb0, #ff2d6b 55%, #25f4ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Sur-titres : exactement ceux de l'app (rose, tiret lumineux) ───────── */
.tag {
  padding: 0;
  background: none;
  box-shadow: none;
  font: 700 12.5px/1 var(--body);
  letter-spacing: .01em;
  text-transform: none;
  color: var(--rose-2);
}
.tag::before {
  display: block !important;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--rose);
  box-shadow: 0 0 10px rgba(255, 45, 107, .8);
}
.tag--rose { color: var(--rose-2); }
.tag--cyan { color: #7ff9f5; }
.tag--cyan::before { background: var(--cyan); box-shadow: 0 0 10px rgba(37, 244, 238, .7); }
/* Sur une image de jeu, le sur-titre reste lisible sur une pastille. */
.gcard .tag { padding: 6px 11px; border-radius: 999px; background: rgba(7, 8, 12, .78); }
.gcard .tag::before { display: none !important; }

/* ── Boutons : gélules, comme dans l'app ────────────────────────────────── */
.btn-p, .btn-g { border-radius: 999px; font-family: var(--body); font-weight: 800; letter-spacing: 0; }
.btn-p {
  background: linear-gradient(145deg, #ff2d6b, #e11d74);
  box-shadow: 0 14px 32px -12px rgba(255, 45, 107, .9), inset 0 1px 0 rgba(255, 255, 255, .22);
  color: #fff;
}
.btn-p:hover {
  background: linear-gradient(145deg, #ff4a80, #ff2d6b);
  box-shadow: 0 18px 38px -12px rgba(255, 45, 107, 1), inset 0 1px 0 rgba(255, 255, 255, .26);
  transform: translateY(-1px);
}
.btn-g {
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.btn-g:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.chip { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); border-radius: 999px; }

/* ── Barre de navigation : la barre du haut de l'app ────────────────────── */
.nav { background: rgba(7, 8, 12, .82); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.nav .links > a { font-family: var(--body); font-weight: 600; letter-spacing: 0; }
.nav .links > a::after { background: var(--rose); box-shadow: 0 0 10px rgba(255, 45, 107, .8); }

/* ── Surfaces : cartes, écrans, panneaux ────────────────────────────────── */
.gcard, .rcard, .screen, .how-panel, .sheet-panel, .modal-panel {
  border-radius: 22px;
  box-shadow: var(--st-relief);
}
.rcard, .how-panel { background: var(--st-surface); }
.gcard { background: #0e1118; }
.gcard::after { background: linear-gradient(180deg, transparent 30%, rgba(7, 8, 12, .96) 100%); }
.gcard:hover { box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 45, 107, .45); }
.how-num { background: linear-gradient(145deg, #ff2d6b, #e11d74); color: #fff; box-shadow: 0 10px 24px -10px rgba(255, 45, 107, .9); }
.hero-product, .app-shot {
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  box-shadow: 0 40px 110px -30px rgba(0, 0, 0, .75), 0 0 80px -20px rgba(255, 45, 107, .25), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.hero-product__glow { background: radial-gradient(ellipse, rgba(255, 45, 107, .26), transparent 65%); }
.hero-product__bar i { color: var(--cyan); }
.sep { background: linear-gradient(90deg, transparent, rgba(255, 45, 107, .35), rgba(255, 255, 255, .08) 60%, transparent); }

/* ── Tarifs : le même rose, les mêmes gélules ───────────────────────────── */
.pr-seg { border-radius: 999px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.pr-seg-b { border-radius: 999px; font-family: var(--body); font-weight: 700; }
.pr-seg-ind { border-radius: 999px; background: linear-gradient(145deg, #ff2d6b, #e11d74); box-shadow: 0 6px 18px -8px rgba(255, 45, 107, .9); }
.pr-price, .pr-name { font-family: var(--disp); letter-spacing: -.03em; }
.pr-node--rose { background: var(--rose); box-shadow: 0 0 12px rgba(255, 45, 107, .8); }

/* ── Bandeau de chiffres, FAQ, appel final, pied de page ────────────────── */
.sec-rail { background: rgba(255, 255, 255, .02); }
.sec-faq details { border-radius: 16px; }
.cta-main { border-radius: 26px; }
.footer { background: #06070a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.ft-logo, .ft-tag { font-family: var(--disp); }