/* ═══════════════════════════════════════════════════════════════════════
   TIKLIVE // RÉGIE — couche de refonte visuelle du site (2026)

   Même langage de formes que l'application de bureau, pour que le site et
   le launcher se lisent comme un seul produit. Les COULEURS du site ne
   changent pas : rose #ff2d6b, cyan #25f4ee, fonds #07080c / #0e1118.

   Chargée EN DERNIER (juste avant </body>) : elle passe après les quatre
   blocs <style> internes de index.php, donc elle gagne à spécificité égale.

   Le langage : chanfrein · rail lumineux · étiquettes capitales.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --hud-cut: 12px;
  --hud-cut-sm: 8px;
  --hud-cut-xs: 5px;
  --hud-line: rgba(255,255,255,0.09);
  --hud-line-hot: rgba(255,45,107,0.45);
  --hud-glow-hot: 0 0 18px rgba(255,45,107,0.30);
  --hud-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Panneaux : le chanfrein remplace le rayon uniforme ────────────── */

.tlx-feat,
.tlx-plan,
.tlx-mode,
.tlx-rev,
.tlx-faq-item,
.tlx-step,
.tlx-demo,
.tlx-shot-main,
.tlx-referral,
.tlx-stat,
.tlx-pop {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--hud-cut) 0, 100% 0,
    100% calc(100% - var(--hud-cut)), calc(100% - var(--hud-cut)) 100%,
    0 100%, 0 var(--hud-cut)
  );
  box-shadow: none !important;
  border: 1px solid var(--hud-line) !important;
  position: relative;
  transition: border-color .18s var(--hud-ease), transform .18s var(--hud-ease);
}

.tlx-feat:hover,
.tlx-plan:hover,
.tlx-mode:hover,
.tlx-rev:hover {
  border-color: var(--hud-line-hot) !important;
  transform: translateY(-3px);
}

/* Rail lumineux sur les cartes de fonctionnalité et les offres : c'est le
   signal qui rattache le site à l'app. */
.tlx-feat::after,
.tlx-plan::after,
.tlx-mode::after {
  content: '';
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 2px;
  background: var(--ts-accent, #ff2d6b);
  box-shadow: var(--hud-glow-hot);
  opacity: .55;
  transition: opacity .18s var(--hud-ease);
  pointer-events: none;
}
.tlx-feat:hover::after,
.tlx-plan:hover::after,
.tlx-mode:hover::after { opacity: 1; }

/* ── Boutons : forme unique, seule la couleur distingue ────────────── */

.tlx-btn,
.tlx-btn-primary,
.tlx-btn-ghost,
.tlx-btn-full {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--hud-cut-sm) 0, 100% 0,
    100% calc(100% - var(--hud-cut-sm)), calc(100% - var(--hud-cut-sm)) 100%,
    0 100%, 0 var(--hud-cut-sm)
  );
  box-shadow: none !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  transition: transform .15s var(--hud-ease), filter .15s var(--hud-ease) !important;
}
.tlx-btn:hover,
.tlx-btn-primary:hover,
.tlx-btn-ghost:hover,
.tlx-btn-full:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* ── Étiquettes de section : micro-libellés de console ─────────────── */

.tlx-kicker,
.tlx-ckick {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
}
.tlx-kicker::before,
.tlx-ckick::before {
  content: '';
  width: 16px; height: 1px;
  background: #ff2d6b;
  box-shadow: var(--hud-glow-hot);
  flex: 0 0 auto;
}

/* ── Petits éléments : coupe réduite ───────────────────────────────── */

.tlx-pill,
.tlx-mode-tag,
.tlx-price,
.tlx-amt,
.tlx-amt-alt,
.tlx-demo-fx,
.tlx-langsbar-sel {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--hud-cut-xs) 0, 100% 0,
    100% calc(100% - var(--hud-cut-xs)), calc(100% - var(--hud-cut-xs)) 100%,
    0 100%, 0 var(--hud-cut-xs)
  );
}

/* Les avatars d'avis restent ronds — les couper les rendrait illisibles. */
.tlx-rev-av,
.tlx-flag {
  clip-path: none !important;
}
.tlx-rev-av { border-radius: 50% !important; }

/* ── Aperçu de l'app : même traitement que dans l'app elle-même ────── */

.tlx-demo-bar {
  border-radius: 0 !important;
}
.tlx-demo-fx {
  border-left: 2px solid #ff2d6b !important;
  box-shadow: none !important;
}

/* ── Champs (barre de langue, éventuels formulaires) ───────────────── */

.tlx-langsbar select,
input[type='text'],
input[type='email'],
select {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--hud-cut-xs) 0, 100% 0,
    100% calc(100% - var(--hud-cut-xs)), calc(100% - var(--hud-cut-xs)) 100%,
    0 100%, 0 var(--hud-cut-xs)
  );
}

/* ── Grille de fond : même échelle que l'app (44 px) ───────────────── */

/* La grille passe DERRIERE tout le contenu via un z-index negatif.
   Surtout ne pas toucher au position des enfants de body : le site a un
   en-tete en position:fixed, le forcer en relative le fait tomber dans le
   flux et la page se vide (regression constatee puis corrigee le 28/08). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: -1;
}

/* ── Accessibilité ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tlx-feat, .tlx-plan, .tlx-mode, .tlx-rev,
  .tlx-btn, .tlx-btn-primary, .tlx-btn-ghost, .tlx-btn-full {
    transition: none !important;
  }
}