/* style.css — thème Tetley Studio.
   ⚠️ AUCUN TWIG DANS CE FICHIER : il est servi via asset(), donc Tebex renvoie le fichier
   BRUT, sans passer par Twig. Toute valeur du panel passe par une variable CSS déclarée
   dans le bloc <style> de layout.html.
   📖 Documentation complète (le pourquoi de chaque règle, les pièges, les mesures qui ont
   motivé les choix) : DOCUMENTATION.md, à la racine du thème, section « style.css ». */
:root {
    --bg: #060606;
    --ink: #050505;
    --ink-2: #0a0a0a;
    --panel: #0e0e0e;
    --panel-2: #141414;
    --line: #1e1e1e;

    --main-color: #3d6fff;
    --accent-1: #2f52d8;
    --accent-2: #6a95ff;
    --accent-grad: linear-gradient(118deg, var(--accent-2) 0%, var(--main-color) 50%, var(--accent-1) 100%);

    --text: #f5f5f5;
    --dim: #b5b5b5;
    --mute: #8f8f8f;

    --promo: #e2342f;
    --promo-2: #ff3b30;

    --font-head: 'Archivo', sans-serif;
    --font-body: 'Sora', sans-serif;

    --glow: color-mix(in srgb, var(--main-color), transparent 78%);
    --glow-strong: color-mix(in srgb, var(--main-color), transparent 55%);

    --shadow-dropdown: 0 24px 60px -30px rgba(0, 0, 0, .7);
    --shadow-card: 0 20px 50px -24px rgba(0, 0, 0, .55);
    --shadow-strong: 0 24px 60px -28px rgba(0, 0, 0, .7);
    --overlay-soft: rgba(255, 255, 255, .06);
    --glow-white: rgba(255, 255, 255, .5);
    --img-outline: rgba(255, 255, 255, .08);

    --r1: calc(8px * var(--radius-scale, 1));    --r2: calc(12px * var(--radius-scale, 1));    --r3: calc(20px * var(--radius-scale, 1));
}

* { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }

html { scrollbar-width: thin; scrollbar-color: var(--main-color) var(--ink-2); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: var(--main-color); border-radius: 999px; border: 3px solid var(--ink-2); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }

.ts-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ts-i {  /* flex:none obligatoire : sinon l icone est ecrasee par un texte long */
    display: inline-block;
    height: 1em; width: 1em;
    fill: currentColor;
    vertical-align: -.125em;
    flex: none;
}
.ts-i-spin { animation: ts-i-spin 2s linear infinite; }
@keyframes ts-i-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ts-i-spin { animation: none; } }

.ts-i-arrow-right { width: 0.8750em; }
.ts-i-bars { width: 0.8750em; }
.ts-i-basket-shopping { width: 1.1250em; }
.ts-i-bolt { width: 0.8750em; }
.ts-i-cart-shopping { width: 1.1250em; }
.ts-i-check { width: 0.8750em; }
.ts-i-copy { width: 0.8750em; }
.ts-i-credit-card { width: 1.1250em; }
.ts-i-discord { width: 1.2500em; }
.ts-i-file-invoice { width: 0.7500em; }
.ts-i-file-lines { width: 0.7500em; }
.ts-i-github { width: 0.9688em; }
.ts-i-grip { width: 0.8750em; }
.ts-i-house { width: 1.1250em; }
.ts-i-instagram { width: 0.8750em; }
.ts-i-layer-group { width: 1.1250em; }
.ts-i-location-dot { width: 0.7500em; }
.ts-i-map-location-dot { width: 1.1250em; }
.ts-i-star { width: 1.1250em; }
.ts-i-ticket { width: 1.1250em; }
.ts-i-tiktok { width: 0.8750em; }
.ts-i-trash { width: 0.8750em; }
.ts-i-user { width: 0.8750em; }
.ts-i-xmark { width: 0.7500em; }
.ts-i-youtube { width: 1.1250em; }

:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 3px;
    border-radius: 3px;
}

@keyframes ts-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ts-fade-in { from { opacity: 0; } to { opacity: 1; } }

.ts-reveal { opacity: 0; translate: 0 24px; transition: opacity 500ms cubic-bezier(.16,1,.3,1), translate 500ms cubic-bezier(.16,1,.3,1); }
.ts-reveal.in-view { opacity: 1; translate: 0 0; }

.ts-reveal-stagger > * { opacity: 0; translate: 0 24px; transition: opacity 500ms cubic-bezier(.16,1,.3,1), translate 500ms cubic-bezier(.16,1,.3,1); transition-delay: calc(min(var(--ts-i, 0), 2) * 60ms); }
.ts-reveal-stagger > *.in-view { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
    .ts-reveal, .ts-reveal-stagger > *, .ts-stage h1, .ts-stage .ts-powered-by, .ts-stage .ts-stage-sub, .ts-stage .ts-stage-cta, .ts-stage-video-wrap {
        animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; translate: none !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: radial-gradient(900px circle at 100% 0%, color-mix(in srgb, var(--main-color), transparent 90%), transparent 55%), var(--bg);
    color: var(--text);
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
::selection { background: var(--main-color); color: #fff; }

/* INTERRUPTEUR DES HALOS DE FOND — une seule valeur à changer.
     paused  = les halos restent en place (aucun travail du compositeur : c'est l'état actuel)
     running = ils dérivent lentement comme avant
   Pour comparer en direct sans toucher au fichier, dans la console du navigateur :
     document.documentElement.style.setProperty('--ts-halo-motion','running')
     document.documentElement.style.setProperty('--ts-halo-motion','paused')
   Les halos, leur flou et leur couleur ne bougent pas d'un pixel : SEULE la dérive s'arrête.
   Le fond garde donc son relief, et la lueur qui suit le curseur continue de vivre. */
:root { --ts-halo-motion: paused; }

body::before,
body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    /* Flou remonté à 110px maintenant que les halos sont FIGÉS (--ts-halo-motion: paused).
       C'est tout le renversement : un calque flou animé est recomposé à CHAQUE frame, donc son
       rayon se paie en continu ; un calque flou immobile est rastérisé UNE fois puis simplement
       posé par le compositeur. On peut donc être généreux sur le flou et la taille sans aucun
       coût récurrent — ce qui était impossible tant que ça dérivait.
       ⚠️ Si tu repasses `--ts-halo-motion` à `running`, redescends ces valeurs (70px et ~44vw),
       sinon tu paies le gros flou 60 fois par seconde. */
    filter: blur(110px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}
/* Halos AGRANDIS et repositionnés plus haut/plus au bord : figés, ils ne dérivent plus pour
   aller occuper le reste de l'écran, donc ils doivent couvrir la zone tout de suite. Le point
   de fuite du dégradé passe à 88 % : plus le calque est grand, plus la chute vers le
   transparent doit être longue, sinon on voit un bord de disque. */
body::before {
    top: -6%;
    left: -4%;
    width: 68vw;
    height: 68vw;
    max-width: 1080px;
    max-height: 1080px;
    background: radial-gradient(circle, color-mix(in srgb, var(--main-color), transparent 62%) 0%, transparent 88%);
    animation: ts-glow-drift-a 17s infinite;
}
body::after {
    bottom: -8%;
    right: -4%;
    width: 72vw;
    height: 72vw;
    max-width: 1160px;
    max-height: 1160px;
    background: radial-gradient(circle, color-mix(in srgb, var(--main-color), transparent 68%) 0%, transparent 88%);
    animation: ts-glow-drift-b 20s infinite;
}
/* ⚠️ CETTE RÈGLE DOIT RESTER APRÈS les deux blocs ci-dessus. `animation` est un RACCOURCI :
   il réinitialise tous ses longhands, dont `animation-play-state`. Placé avant, l'interrupteur
   était silencieusement remis à `running` et ne faisait rien du tout (constaté et mesuré). */
body::before, body::after { animation-play-state: var(--ts-halo-motion, running); }
@keyframes ts-glow-drift-a {
    0%   { transform: translate(0, 0); opacity: 0.80; }
    18%  { transform: translate(6vw, 4vh); opacity: 1; }
    41%  { transform: translate(3vw, 8vh); opacity: 0.55; }
    63%  { transform: translate(-6vw, 3vh); opacity: 1; }
    82%  { transform: translate(-4vw, -5vh); opacity: 0.65; }
    100% { transform: translate(0, 0); opacity: 0.80; }
}
@keyframes ts-glow-drift-b {
    0%   { transform: translate(0, 0); opacity: 0.75; }
    22%  { transform: translate(-5vw, -4vh); opacity: 0.55; }
    47%  { transform: translate(-7vw, 2vh); opacity: 1; }
    69%  { transform: translate(-3vw, 5vh); opacity: 0.60; }
    88%  { transform: translate(3vw, -3vh); opacity: 0.95; }
    100% { transform: translate(0, 0); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none; }
}
@media (hover: none), (max-width: 900px) {
    body::before, body::after { display: none; }
}

.ts-mouse-glow {
    position: fixed;
    top: 0; left: 0;
    width: 420px; height: 420px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(90px);
    background: radial-gradient(circle, color-mix(in srgb, var(--main-color), transparent 62%) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
}
.ts-mouse-glow.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce), (hover: none) {
    .ts-mouse-glow { display: none; }
}

.ts-main {
    min-height: 100vh;
    position: relative;
}
.ts-wrap { width: 100%; max-width: 1600px; margin: 0 auto; padding-left: 64px; padding-right: 64px; }

.ts-rail {  /* position pilotee par --ts-rail-position, injectee par layout.html */
    position: var(--ts-rail-position, relative);
    top: 0;
    z-index: 80;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 16px 40px;
    background: transparent;
}
.ts-rail > * { position: relative; z-index: 1; }

.ts-rail-left { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-width: 0; }
.ts-rail-right { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; min-width: 0; }
.ts-brand { display: flex; align-items: center; gap: 14px; background: none; }
.ts-brand img { height: 84px; width: auto; max-width: 220px; object-fit: contain; }
.ts-brand-text { display: flex; flex-direction: column; gap: 3px; }
.ts-brand .ts-word {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
}
.ts-brand-powered {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-body); font-weight: 400; font-size: 13px;
    color: var(--mute); white-space: nowrap;
}
.ts-brand-powered .ts-i { color: var(--mute); font-size: 11px; }
.ts-brand-powered b { color: var(--mute); font-weight: 700; }

.ts-nav-wrap { flex: 1; min-width: 0; display: flex; justify-content: center; overflow: hidden; }
.ts-nav {
    display: flex; flex-direction: row; align-items: center; gap: 2px; max-width: 100%;
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; scrollbar-color: var(--main-color) transparent; padding: 6px;
    background: var(--panel-2); border-radius: 999px;
}
.ts-nav::-webkit-scrollbar { height: 4px; }
.ts-nav::-webkit-scrollbar-thumb { background: var(--main-color); border-radius: 4px; }
.ts-nav::-webkit-scrollbar-track { background: transparent; }
.ts-nav > li { position: relative; flex: 0 0 auto; }
.ts-nav > li > a {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 15px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14px;
    color: var(--dim);
    position: relative;
    white-space: nowrap;
}
.ts-nav > li > a .ts-i { font-size: 13px; color: var(--mute); transition: color .2s ease; }
.ts-nav > li > a:hover { color: var(--text); background: var(--panel); }
.ts-nav > li > a:hover .ts-i { color: var(--main-color); }
.ts-nav > li.active > a { color: #ffffff !important; background: var(--accent-grad) !important; font-weight: 700; }
.ts-nav > li.active > a .ts-i { color: #ffffff !important; }
.ts-nav .ts-sub {
    position: absolute; top: calc(100% + 8px); left: 0; margin-top: 0;
    min-width: 200px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r2);
    padding: 8px; box-shadow: var(--shadow-dropdown); z-index: 90;
    display: flex; flex-direction: column;
    opacity: 0; translate: 0 -6px; pointer-events: none;
    transition: opacity .18s ease, translate .18s ease;
}
.ts-nav .open .ts-sub { opacity: 1; translate: 0 0; pointer-events: auto; }
.ts-nav .ts-sub a { padding: 9px 12px; border-radius: var(--r1); font-size: 13px; color: var(--dim); }
.ts-nav .ts-sub a:hover { background: var(--panel); color: var(--text); }

.ts-currency { position: relative; }
.ts-currency > button {
    background: var(--panel); border: 1px solid var(--line); color: var(--dim);
    border-radius: 999px; padding: 13px 18px; font-family: var(--font-head); font-weight: 700; font-size: 13px;
    display: inline-flex; align-items: center; gap: 8px; height: 46px; box-sizing: border-box;
    transition: color .2s ease, border-color .2s ease;
}
.ts-currency > button:hover { color: var(--text); border-color: var(--glow-strong); }
.ts-currency .ts-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; left: auto; min-width: 130px; max-height: 260px; overflow-y: auto;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r2); padding: 8px;
    box-shadow: var(--shadow-dropdown); display: block; z-index: 90;
    opacity: 0; translate: 0 -6px; pointer-events: none;
    transition: opacity .18s ease, translate .18s ease;
}
.ts-currency.open .ts-dropdown { opacity: 1; translate: 0 0; pointer-events: auto; }
.ts-currency .ts-dropdown a { display: block; padding: 8px 12px; border-radius: var(--r1); color: var(--dim); font-size: 13px; }
.ts-currency .ts-dropdown a:hover { background: var(--panel); color: var(--text); }
.ts-currency .ts-dropdown li.active a { color: var(--main-color); }

.ts-login {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--text); color: var(--bg);
    border-radius: 999px; padding: 13px 20px;
    font-family: var(--font-head); font-weight: 800; font-size: 13px;
    transition: box-shadow .2s ease, transform .18s ease;
    white-space: nowrap; height: 46px; box-sizing: border-box;
}
.ts-login:hover { box-shadow: 0 14px 34px -16px var(--glow-white); transform: translateY(-1px); }
.ts-login:active { transform: translateY(-1px) scale(.96); }
.ts-account { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.ts-account .ts-ign {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--panel); border: 1px solid var(--line); color: var(--text);
    border-radius: 999px; padding: 11px 15px; font-family: var(--font-head); font-weight: 700; font-size: 13px;
    white-space: nowrap;
}
.ts-cart {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--accent-grad); color: #ffffff;
    border-radius: 999px; padding: 12px 16px; font-family: var(--font-head); font-weight: 800; font-size: 13px;
    white-space: nowrap;
}
.ts-cart .ts-cart-n { background: rgba(0,0,0,.25); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-variant-numeric: tabular-nums; }

.ts-burger { display: none; width: 42px; height: 42px; border-radius: var(--r2); background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: 16px; align-items: center; justify-content: center; }

.ts-stage {
    position: relative;
    min-height: 74vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 120px 0 60px;
    background: transparent;
}

.ts-stage-inner { position: relative; z-index: 2; width: 100%; max-width: 1800px; margin: 0 auto; padding: 0 56px; }
.ts-stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; }

.ts-stage h1 { animation: ts-fade-up 1.1s cubic-bezier(.22,1,.36,1) both; animation-delay: .25s; }
.ts-stage .ts-powered-by { animation: ts-fade-in 1s ease both; animation-delay: .45s; }
.ts-stage .ts-stage-sub { animation: ts-fade-up 1.1s cubic-bezier(.22,1,.36,1) both; animation-delay: .5s; }
.ts-stage .ts-stage-cta { animation: ts-fade-up 1.1s cubic-bezier(.22,1,.36,1) both; animation-delay: .65s; }
.ts-stage-video-wrap { animation: ts-fade-in 1.3s ease both; animation-delay: .35s; }

.ts-stage h1 {
    font-family: var(--font-head); font-weight: 900;
    font-size: clamp(56px, 7.6vw, 112px);
    line-height: .96; letter-spacing: -0.03em; text-transform: uppercase;
    max-width: 12ch;
}
.ts-powered-by {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-body); font-weight: 400; font-size: 13px;
    color: var(--mute); margin-top: 16px;
}
.ts-powered-by .ts-i { color: var(--mute); font-size: 12px; }
.ts-powered-by b { color: var(--dim); font-weight: 700; }
.ts-stage-sub { color: var(--dim); font-size: clamp(17px, 1.6vw, 22px); max-width: 50ch; margin: 26px 0 30px; }
.ts-stage-content { display: flex; flex-direction: column; height: 100%; padding-top: 32px; }
.ts-stage-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 40px; }

.ts-stage-video-wrap { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.ts-stage-video {
    position: relative; width: 92%; aspect-ratio: 16 / 9; border-radius: var(--r3); overflow: hidden;
    border: 1px solid var(--line); background: var(--panel-2);
    box-shadow: var(--shadow-strong), 0 0 0 1px var(--glow);
}
.ts-stage-video video, .ts-stage-video .ts-stage-still, .ts-stage-video .ts-stage-yt {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
}
.ts-stage-video .ts-stage-yt { pointer-events: none; transform: scale(1.35); transform-origin: center; }
.ts-stage-video .ts-stage-still { background: var(--ts-hero, none) center/cover no-repeat; }
.ts-stage-video::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--ink), transparent 45%) 100%);
}
.ts-coupon-row { display: flex; flex-direction: column; align-items: center; gap: 36px; width: 92%; margin: auto 0; }
.ts-coupon-pill {
    display: flex; align-items: center; gap: 18px; width: 75%;
    padding: 20px 26px 20px 16px; border-radius: var(--r3);
    background: var(--panel); border: 1px solid var(--line);
    font-family: var(--font-head); text-align: left; cursor: pointer;
    transition: border-color .18s ease, transform .18s ease;
}
.ts-coupon-pill:hover { border-color: var(--glow-strong); transform: translateY(-1px); }
.ts-coupon-pill:active { transform: translateY(-1px) scale(.96); }
.ts-coupon-pill.copied { border-color: var(--main-color); }
.ts-coupon-icon {
    flex: 0 0 auto; border-radius: 999px;
    background: transparent; color: var(--main-color);
    display: flex; align-items: center; justify-content: center; font-size: 34px;
}
.ts-coupon-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ts-coupon-line { display: flex; align-items: baseline; gap: 11px; }
.ts-coupon-code { font-weight: 800; font-size: 22px; letter-spacing: .02em; color: var(--text); }
.ts-coupon-off { font-weight: 700; font-size: 18px; color: var(--main-color); }
.ts-coupon-note { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: .03em; color: var(--mute); }
.ts-coupon-copy {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    color: var(--dim); font-size: 18px; margin-left: 2px; align-self: center;
    transition: color .18s ease;
}
.ts-coupon-pill.copied .ts-coupon-copy { color: var(--main-color); }

.ts-advbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 16px;
    background: transparent;
}
.ts-adv {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 28px 30px;
    min-width: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r3);
    transition: background .25s ease, border-color .25s ease;
}
.ts-adv::before {
    content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    pointer-events: none;
}
.ts-adv:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.ts-adv-icon, .ts-adv-t, .ts-adv-d { transition: transform .25s ease; }
.ts-adv:hover .ts-adv-icon, .ts-adv:hover .ts-adv-t, .ts-adv:hover .ts-adv-d { transform: translateY(-3px); }
.ts-adv-icon { font-size: 24px; color: var(--main-color); }
.ts-adv-t { font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.ts-adv-d { color: var(--mute); font-size: 14px; line-height: 1.5; }

.ts-sec { padding-top: 90px; padding-bottom: 90px; }
.ts-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.ts-sec-head.ts-minimap-head { margin-bottom: 28px; }
.ts-sec-head .ts-kicker { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--main-color); margin-bottom: 12px; }
.ts-sec-head h2 { font-family: var(--font-head); font-weight: 900; font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.03em; text-transform: uppercase; }
.ts-sec-head .ts-sec-desc { color: var(--dim); font-size: 15px; max-width: 42ch; }
.ts-minimap-title { word-spacing: .18em; }

.ts-market { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ts-market.featured-packages-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.ts-market.featured-packages-grid > * { max-width: 100%; }
.ts-row, .featured-package-item {
    display: flex; flex-direction: column; align-items: stretch;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: opacity 500ms cubic-bezier(.16,1,.3,1) calc(min(var(--ts-i, 0), 2) * 60ms), translate 500ms cubic-bezier(.16,1,.3,1) calc(min(var(--ts-i, 0), 2) * 60ms), border-color .25s ease, transform .25s ease;
}
.ts-row:hover, .featured-package-item:hover {
    border-color: var(--glow-strong); transform: translateY(-3px);
}
.ts-shot, .featured-package-image {
    position: relative; overflow: hidden; background: var(--panel-2); flex: 0 0 auto;
    aspect-ratio: 16 / 9;
}
.ts-shot::after, .featured-package-image::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    box-shadow: inset 0 0 0 1px var(--img-outline);
}
.ts-shot img, .featured-package-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ts-row:hover .ts-shot img, .featured-package-item:hover .featured-package-image img { transform: scale(1.05); }

.ts-row-body, .featured-package-info {
    padding: 20px 22px; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; flex: 1; min-height: 0;
}
.ts-tag {
    align-self: flex-start;
    font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--main-color); padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--glow-strong); background: var(--glow);
}
.ts-row-name, .featured-package-name { font-family: var(--font-head); font-weight: 800; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.01em; line-height: 1.1; }
.ts-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 2px; flex-wrap: wrap; }
.ts-row-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; }
.ts-row-actions .ts-btn { flex: 1; }
.ts-row-actions .ts-btn-icon { flex: 0 0 auto; width: 48px; padding: 0; }
.ts-price, .featured-package-price { display: flex; flex-direction: column; line-height: 1.1; }
.ts-price-label { font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; }
.ts-price-amt { font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--main-color); font-variant-numeric: tabular-nums; }
.ts-price-amt small { font-size: 13px; color: var(--dim); }
.ts-price-old { color: var(--promo-2); text-decoration: line-through; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ts-free { color: #4ade80; font-family: var(--font-head); font-weight: 800; font-size: 22px; }

.ts-shot .ts-disc, .featured-package-image .ts-disc, .package-page-discount-badge-overlay {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    background: var(--promo); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 13px;
    padding: 6px 11px; border-radius: var(--r1); box-shadow: 0 8px 22px -10px rgba(226,52,47,.8);
}

.ts-row-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-row-tags:empty { display: none; }
.ts-tag-pill {
    font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: .02em;
    text-transform: lowercase; color: var(--dim); background: var(--panel-2);
    border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px;
}
.ts-row-tops {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.ts-tag-top {
    font-family: var(--font-head); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: #fff; background: var(--accent-grad); padding: 5px 10px; border-radius: var(--r1);
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--main-color), transparent 40%);
}

.ts-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border: 1px solid transparent; border-radius: 999px; padding: 20px 36px;
    font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1;
    transition: transform .18s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
    white-space: nowrap;
}
.ts-btn:hover { transform: translateY(-1px); }
.ts-btn:active { transform: translateY(-1px) scale(.96); }
.ts-btn-white { background: var(--text); color: var(--bg); border-color: var(--text); }
.ts-btn-white:hover { background: #fff; box-shadow: 0 14px 32px -16px var(--glow-white); }
.ts-btn-accent { background: var(--accent-grad); color: #ffffff; box-shadow: 0 18px 44px -22px var(--glow-strong); }
.ts-btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.ts-btn-ghost:hover { border-color: var(--glow-strong); color: var(--text); }
.ts-btn-red { background: color-mix(in srgb, var(--promo), transparent 86%); color: var(--promo-2); border-color: color-mix(in srgb, var(--promo), transparent 60%); }
.ts-btn-red:hover { background: var(--promo); color: var(--text); border-color: var(--promo); }
.ts-btn[disabled], .ts-btn:disabled { opacity: .45; pointer-events: none; }
.ts-btn-icon { width: 46px; height: 46px; padding: 0; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
    .ts-btn:hover, .ts-btn:active, .ts-login:hover, .ts-login:active, .ts-coupon-pill:hover, .ts-coupon-pill:active { transform: none; }
}

.ts-search { position: relative; margin-bottom: 38px; }
.ts-search .ts-i { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--mute); font-size: 15px; }
.ts-search input {
    width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2);
    padding: 18px 22px 18px 52px; color: var(--text); font-family: var(--font-body); font-size: 15px; outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ts-search input::placeholder { color: var(--mute); }
.ts-search input:focus { border-color: var(--glow-strong); box-shadow: 0 0 0 4px var(--glow); }

.ts-plain-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; flex-wrap: wrap; }
.ts-plain-head-text h1 { font-family: var(--font-head); font-weight: 900; font-size: clamp(28px, 3.4vw, 42px); text-transform: uppercase; letter-spacing: -0.02em; }
.ts-plain-head-desc { color: var(--dim); font-size: 15px; margin-top: 10px; max-width: 60ch; }
.ts-plain-head-tools { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 560px; min-width: 260px; }
.ts-search-inline { margin-bottom: 0; flex: 1; }
.ts-search-inline input { padding: 14px 18px 14px 46px; }
.ts-search-inline .ts-i { left: 18px; font-size: 14px; }
.ts-sort { position: relative; flex: 0 0 auto; }
.ts-sort-toggle {
    appearance: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2);
    padding: 14px 16px; color: var(--text); font-family: var(--font-body); font-size: 14px; outline: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px; height: 48px; box-sizing: border-box; min-width: 180px;
    justify-content: space-between; transition: border-color .2s ease, color .2s ease;
}
.ts-sort-toggle:hover { border-color: var(--glow-strong); color: var(--text); }
.ts-sort-toggle .ts-i { color: var(--mute); font-size: 11px; transition: transform .18s ease; }
.ts-sort.open .ts-sort-toggle .ts-i { transform: rotate(180deg); }
.ts-sort .ts-sort-list {
    position: absolute; top: calc(100% + 8px); right: 0; left: auto; min-width: 100%; max-height: 260px; overflow-y: auto;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r2); padding: 8px;
    box-shadow: var(--shadow-dropdown); z-index: 90;
    opacity: 0; translate: 0 -6px; pointer-events: none;
    transition: opacity .18s ease, translate .18s ease;
}
.ts-sort.open .ts-sort-list { opacity: 1; translate: 0 0; pointer-events: auto; }
.ts-sort .ts-sort-list a { display: block; padding: 8px 12px; border-radius: var(--r1); color: var(--dim); font-size: 13px; white-space: nowrap; }
.ts-sort .ts-sort-list a:hover { background: var(--panel); color: var(--text); }
.ts-sort .ts-sort-list li.active a { color: var(--main-color); }
.ts-sort .ts-sort-list li.ts-sort-sep { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }

.ts-pkg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; padding: 80px 0; }
.ts-gallery { min-width: 0; }
.ts-gallery-main {
    position: relative; width: 100%; aspect-ratio: 16 / 10;
    border-radius: var(--r3); overflow: hidden; border: 1px solid var(--line); background: var(--panel-2);
}
.ts-slider { position: relative; width: 100%; height: 100%; }
.ts-slide {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; visibility: hidden; transition: opacity .35s ease;
}
.ts-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.ts-slide img, .ts-slide iframe, .ts-slide picture, .ts-slide picture img, .ts-slide video {
    width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
    object-fit: cover !important; object-position: center; border: 0;
}
.ts-slide-fallback { display: flex; align-items: center; justify-content: center; background: var(--panel-2); }
.ts-fallback-icon { font-size: 48px; color: var(--line); }
.ts-gallery-nav { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; pointer-events: none; }
.ts-gallery-nav button { pointer-events: auto; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink), transparent 12%); color: var(--text); display: flex; align-items: center; justify-content: center; transition: color .18s ease, border-color .18s ease; }
.ts-gallery-nav button:hover { color: var(--main-color); border-color: var(--glow-strong); }
.ts-gallery-nav svg { width: 22px; height: 22px; fill: currentColor; }
.ts-thumbs {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; margin-top: 18px;
}
.ts-thumb {
    position: relative; aspect-ratio: 1/1; border-radius: var(--r2); overflow: hidden; cursor: pointer;
    border: 2px solid transparent; opacity: .5; transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
}
.ts-thumb img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ts-thumb::after {
    content: ""; position: absolute; inset: 0; border-radius: var(--r2);
    box-shadow: inset 0 0 0 1px var(--img-outline); pointer-events: none;
}
.ts-thumb.active, .ts-thumb:hover { opacity: 1; transform: translateY(-3px); }
.ts-thumb.active { border-color: var(--main-color); box-shadow: 0 10px 26px -14px var(--glow-strong); }

.ts-pkg-info .ts-tag { margin-bottom: 18px; }
.ts-pkg-name { font-family: var(--font-head); font-weight: 900; font-size: clamp(30px, 3.6vw, 50px); line-height: .98; text-transform: uppercase; letter-spacing: -0.025em; margin-bottom: 12px; }
.ts-pkg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ts-pkg-tags:empty { display: none; margin-bottom: 0; }
.ts-pkg-tags .ts-tag-pill { font-size: 12px; padding: 5px 12px; }
.ts-pkg-price { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.ts-pkg-price .ts-price-amt { font-size: 36px; }
.ts-pkg-price .ts-price-old { font-size: 20px; }
.ts-pkg-buy { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.ts-pkg-buy .ts-btn { flex: 1; min-width: 150px; }
.ts-gift-form {
    width: 100%; display: grid; grid-template-rows: 0fr; margin-top: 0;
    opacity: 0; pointer-events: none;
    transition: grid-template-rows .3s ease, opacity .25s ease, margin-top .3s ease;
}
.ts-gift-form > * { overflow: hidden; }
.ts-gift-form.show { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; margin-top: 4px; }
.ts-gift-row { display: flex; gap: 10px; }
.ts-gift-form input { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 13px 18px; color: var(--text); font-family: var(--font-body); font-size: 15px; outline: none; }
.ts-gift-form input:focus { border-color: var(--glow-strong); }
.ts-gift-form button { width: 50px; border-radius: 999px; border: 0; background: var(--accent-grad); color: #ffffff; }
.ts-pkg-desc { border-top: 1px solid var(--line); padding-top: 30px; }
.ts-pkg-desc h2 { font-family: var(--font-head); font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 18px; }
.ts-pkg-desc .ts-rich { color: var(--dim); font-size: 16px; line-height: 1.75; }
.ts-pkg-desc .ts-rich img { border-radius: var(--r2); margin: 16px 0; outline: 1px solid var(--img-outline); outline-offset: -1px; }
.ts-pkg-desc .ts-rich h1, .ts-pkg-desc .ts-rich h2, .ts-pkg-desc .ts-rich h3 { color: var(--text); margin: 24px 0 12px; }
.ts-pkg-desc .ts-rich ul, .ts-pkg-desc .ts-rich ol { margin: 0 0 1em; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.ts-pkg-desc .ts-rich ul { list-style: disc; }
.ts-pkg-desc .ts-rich ol { list-style: decimal; }
.ts-pkg-desc .ts-rich li { color: var(--dim); }
.ts-pkg-desc .ts-rich li p { margin: 0; }
.ts-pkg-desc .ts-rich li::marker { color: var(--main-color); }
.ts-pkg-desc .ts-rich strong, .ts-pkg-desc .ts-rich b { color: var(--text); }
.ts-pkg-desc .ts-rich a { color: var(--main-color); }

/* RENDU PARESSEUX DES SECTIONS BASSES — `content-visibility: auto` est le pendant de
   `loading="lazy"`, mais pour le RENDU : tant que la section est loin de l'écran, le navigateur
   saute entièrement sa mise en page et sa peinture, et ne les calcule qu'en s'en approchant.
   C'est ce qui allège le plus le scroll : le coût par frame ne dépend plus de la longueur de la
   page, mais de ce qui est réellement visible.

   Réservé à DEUX sections, choisies parce qu'elles sont toujours sous la ligne de flottaison
   (mesuré : avis à 2267 px, FAQ à 2679 px, pour une fenêtre de ~900 px) ET parce qu'elles sont
   les plus chères à peindre — le carrousel porte un masque de dégradé, donc une passe de
   compositing en plus, et la FAQ empile deux colonnes de cartes.

   ⚠️ NE PAS étendre à `.ts-sec` en général : cette classe porte aussi la section de la CARTE, et
   sauter la mise en page d'un conteneur Leaflet lui ferait calculer des dimensions fausses.
   ⚠️ `contain-intrinsic-size: auto <h>` et pas une hauteur sèche : le mot-clé `auto` fait
   MÉMORISER au navigateur la hauteur réelle après le premier rendu. Sans lui l'estimation reste
   figée, et la barre de défilement saute quand la vraie taille arrive. Les valeurs sont les
   hauteurs effectivement mesurées sur l'accueil. */
.ts-quotes-carousel,
.ts-faq { content-visibility: auto; }
.ts-quotes-carousel { contain-intrinsic-size: auto 346px; }
.ts-faq { contain-intrinsic-size: auto 407px; }

.ts-quotes-carousel {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 50px, #000 calc(100% - 50px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 50px, #000 calc(100% - 50px), transparent 100%);
}
.ts-quotes-rail {
    display: flex; gap: 22px; width: max-content;
}
.ts-quote {
    flex: 0 0 380px; max-width: 380px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); padding: 32px;
    display: flex; flex-direction: column; gap: 18px; transition: border-color .2s ease, transform .2s ease;
}
.ts-quote:hover { border-color: var(--glow-strong); transform: translateY(-3px); }
.ts-quote .ts-stars { display: flex; gap: 3px; color: var(--main-color); font-size: 14px; }
.ts-quote-text { color: var(--text); font-size: 16px; line-height: 1.6; flex: 1; font-weight: 300; }
.ts-quote-user { display: flex; align-items: center; gap: 13px; padding-top: 4px; border-top: 1px solid var(--line); }
.ts-quote-avatar { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; border: 1px solid var(--line); background: var(--panel-2); }
.ts-quote-name { font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.ts-quote-role { font-size: 11px; color: var(--main-color); text-transform: uppercase; letter-spacing: .08em; }

.ts-faq { display: block; }
.ts-faq-head { text-align: center; margin: 0 auto 40px; }
.ts-faq-head .ts-kicker { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--main-color); margin-bottom: 14px; }
.ts-faq-head h2 { font-family: var(--font-head); font-weight: 900; font-size: clamp(22px, 3.2vw, 40px); letter-spacing: -0.03em; }
.ts-faq-head p { color: var(--dim); margin: 16px auto 0; font-size: 15px; max-width: 640px; }
.ts-faq-list { display: flex; gap: 18px; align-items: flex-start; }
.ts-faq-col { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ts-faq-item { border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--panel); transition: border-color .2s ease; }
.ts-faq-item:hover { border-color: var(--glow-strong); }
.ts-faq-item.active { border-color: var(--glow-strong); }
.ts-faq-q {
    width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 24px;
    background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
    font-family: var(--font-head); font-weight: 600; font-size: 16px;
}
.ts-faq-n { color: var(--main-color); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.ts-faq-q span.t { flex: 1; }
.ts-faq-q::after {
    content: ""; flex: none; width: 12px; height: 12px;
    color: var(--mute);
    background:
        linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
    transition: transform .25s ease, color .2s ease;
}
.ts-faq-item.active .ts-faq-q::after {
    color: var(--main-color);
    background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
    transform: rotate(180deg);
}
.ts-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.ts-faq-a > * {  /* min-height:0 + enveloppe .ts-faq-a-in SANS padding : sinon la reponse ne se referme pas a 0 (cf. DOCUMENTATION.md) */ overflow: hidden; min-height: 0; }
.ts-faq-item.active .ts-faq-a { grid-template-rows: 1fr; }
.ts-faq-a p { padding: 0 24px 24px 56px; margin: 0; color: var(--dim); font-size: 14px; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) {
    .ts-faq-a, .ts-faq-q::after, .ts-gift-form { transition: none; }
}

.ts-foot { background: transparent; }
.ts-foot-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding-top: 56px; padding-bottom: 40px; }
.ts-foot-brand { display: inline-flex; align-items: center; }
.ts-foot-brand .ts-word span {
    font-family: var(--font-head); font-weight: 900; font-size: 24px; letter-spacing: 0.01em; text-transform: uppercase;
    color: var(--text);
}
.ts-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; }
.ts-foot-links a { color: var(--mute); font-size: 14px; }
.ts-foot-links a:hover { color: var(--text); }

.ts-foot-socials { display: flex; justify-content: center; gap: 10px; }
.ts-foot-socials a { width: 42px; height: 42px; border-radius: var(--r2); background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 16px; transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.ts-foot-socials a:hover { color: var(--main-color); border-color: var(--glow-strong); transform: translateY(-2px); }

.ts-dmca { display: flex; justify-content: center; }
.ts-dmca-official-badge { display: block; width: fit-content; }
.ts-dmca-official-badge img { height: 40px; width: auto; border-radius: 6px; display: block; }

.ts-foot-copy { color: var(--mute); font-size: 13px; }
.ts-foot-disclaimer { color: var(--mute); font-size: 12px; line-height: 1.6; max-width: 60ch; }

.ts-checkout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; padding: 80px 0; align-items: start; }
.ts-co-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); padding: 32px; }
.ts-co-head { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.ts-co-icon { width: 50px; height: 50px; border-radius: var(--r2); background: var(--panel-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 18px; }
.ts-co-icon.accent { background: var(--accent-grad); color: #ffffff; }
.ts-co-sub { color: var(--mute); font-size: 12px; }
.ts-co-title { font-family: var(--font-head); font-weight: 800; font-size: 20px; }
.ts-co-title b { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ts-co-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r2); margin-bottom: 12px; }
.ts-co-item .ts-co-name { font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.ts-co-gift { font-size: 12px; color: var(--main-color); margin: 4px 0; }
.ts-co-price { color: var(--text); font-family: var(--font-head); font-weight: 700; font-variant-numeric: tabular-nums; }
.ts-co-coupon { display: flex; gap: 10px; margin-bottom: 18px; }
.ts-co-coupon input { flex: 1; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 13px 20px; color: var(--text); font-family: var(--font-body); font-size: 15px; outline: none; }
.ts-co-coupon input:focus { border-color: var(--glow-strong); }
.ts-co-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.ts-co-table td { padding: 12px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--dim); }
tebex-checkout a { display: flex; align-items: center; justify-content: center; background: var(--accent-grad); color: #ffffff !important; border-radius: 999px; padding: 16px 24px; font-family: var(--font-head); font-weight: 800; font-size: 16px; box-shadow: 0 18px 44px -22px var(--glow-strong); cursor: pointer; }

.ts-login-page,
.ts-login-modal {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 22px;
    background: color-mix(in srgb, var(--bg, #070707), transparent 30%);
    overflow-y: auto;
}
/* La page /login est toujours visible : son voile porte le flou en permanence, c'est normal. */
.ts-login-page { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ⚠️ LE FLOU N'EST POSÉ QUE SUR LA MODALE OUVERTE — ne le remonte pas dans la règle commune.
   Ce calque est présent sur TOUTES les pages du site (il attend un clic sur « Login »), en
   `position: fixed` et `inset: 0`, donc PLEIN ÉCRAN. Avec le `backdrop-filter` déclaré
   inconditionnellement, le navigateur devait maintenir une racine de compositing plein cadre
   en permanence, y compris fermé — et ça se paie pendant le SCROLL, sur toutes les pages, pour
   un élément qu'on ne voit jamais. `opacity: 0` ne suffit pas à l'en dispenser.
   Ici il n'existe que pendant que la modale est réellement ouverte. Zéro changement visuel. */
.ts-login-modal {
    opacity: 0; visibility: hidden;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.ts-login-modal.is-open { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ts-login-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.ts-login-modal .ts-login-card {
    transform: translateY(10px) scale(.98);
    transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
}
.ts-login-modal.is-open .ts-login-card { transform: none; }
.ts-login-modal.is-loading::after {
    content: ""; width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--main-color);
    animation: ts-login-spin .7s linear infinite;
}
@keyframes ts-login-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ts-login-modal, .ts-login-modal .ts-login-card { transition: none; }
    .ts-login-modal.is-loading::after { animation: none; }
}
.ts-login-card {
    position: relative; overflow: hidden;
    width: 100%; max-width: 420px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r3);
    padding: 34px 30px;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    text-align: center;
    box-shadow: var(--shadow-strong), 0 0 60px -20px var(--glow);
}
.ts-login-card::before {
    content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    pointer-events: none;
}
.ts-login-logo { width: 190px; max-width: 70%; height: auto; object-fit: contain; }
.ts-login-desc { color: var(--dim); font-size: 14px; line-height: 1.6; margin: 0; }
.ts-login-msg {
    width: 100%; background: var(--panel-2); border: 1px solid var(--line);
    border-left: 3px solid var(--main-color);
    border-radius: var(--r1);
    padding: 10px 14px; color: var(--text); font-size: 14px; text-align: left;
}
.ts-login-actions { display: flex; gap: 10px; width: 100%; }
.ts-login-cancel { flex: 0 0 auto; height: 46px; padding: 0 22px; justify-content: center; }
.ts-login-btn { flex: 1 1 auto; justify-content: center; height: 46px; font-size: 15px; }
.ts-login-help { color: var(--dim); font-size: 13px; text-decoration: none; transition: color .18s ease; }
.ts-login-help:hover { color: var(--text); }

.ts-btn.is-busy { opacity: .55; pointer-events: none; }

.ts-opt-form { display: flex; flex-direction: column; gap: 16px; }
.ts-opt-field { display: flex; flex-direction: column; gap: 7px; }
.ts-opt-label { color: var(--dim); font-size: 14px; line-height: 1.5; }
.ts-opt-form select,
.ts-opt-form input[type="text"],
.ts-opt-form input[type="number"] {
    width: 100%; height: 46px; padding: 0 14px;
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: var(--r2);
    color: var(--text); font-family: var(--font-body); font-size: 15px;
    outline: none; transition: border-color .18s ease;
}
.ts-opt-form select:focus,
.ts-opt-form input:focus { border-color: var(--main-color); }
.ts-opt-discord-btn { width: 100%; justify-content: center; height: 46px; gap: 9px; }
.ts-opt-discord {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: var(--r2);
    padding: 12px 14px; color: var(--text); font-size: 14px;
}
.ts-opt-discord-ok .ts-i { color: var(--main-color); }
.ts-opt-discord-change { margin-left: auto; color: var(--dim); font-size: 12px; text-decoration: underline; }
.ts-opt-discord-change:hover { color: var(--text); }
.ts-opt-price-row { display: flex; align-items: center; gap: 10px; }
.ts-opt-price-row input { flex: 1 1 auto; }
.ts-opt-currency { color: var(--dim); font-size: 14px; flex: 0 0 auto; }

.ts-cms { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); padding: 44px; margin: 80px 0; }
.ts-cms .ts-rich { color: var(--dim); font-size: 16px; line-height: 1.8; }
.ts-cms .ts-rich ul, .ts-cms .ts-rich ol { margin: 0 0 1em; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.ts-cms .ts-rich li p { margin: 0; }
.ts-cms .ts-rich ul { list-style: disc; }
.ts-cms .ts-rich ol { list-style: decimal; }
.ts-cms .ts-rich li::marker { color: var(--main-color); }
.ts-cms .ts-rich strong, .ts-cms .ts-rich b { color: var(--text); }
.ts-cms .ts-rich a { color: var(--main-color); }
.ts-cms h1, .ts-cms h2, .ts-cms h3 { color: var(--text); margin: 24px 0 12px; }

:root {
    --tebex-legal-footer-background-color: var(--bg, #070707);
    --tebex-legal-footer-text-color: var(--mute, #8f8f8f);
    --tebex-legal-footer-border-color: var(--bg, #070707);
    --tebex-legal-footer-logo-color: var(--text, #f5f5f5);
    --tebex-legal-footer-max-width: 1600px;}

.ts-main .site-content { width: min(100%, 1180px); margin: 0 auto; padding: 0 22px; }
.ts-main .site-content > .store-sidebar { display: none; }
.ts-main .store-text,
.ts-main .text-content {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r3);
    padding: 44px; margin: 40px 0 80px;
    color: var(--dim); font-size: 16px; line-height: 1.8;
}
.ts-main .text-content h1, .ts-main .text-content h2, .ts-main .text-content h3,
.ts-main .text-content h4 { color: var(--text); margin: 28px 0 12px; line-height: 1.3; }
.ts-main .text-content h1:first-child, .ts-main .text-content h2:first-child { margin-top: 0; }
.ts-main .text-content p { margin: 0 0 1em; }
.ts-main .text-content ul, .ts-main .text-content ol { margin: 0 0 1em; padding-left: 22px; }
.ts-main .text-content ul { list-style: disc; }
.ts-main .text-content ol { list-style: decimal; }
.ts-main .text-content li { margin-bottom: 6px; }
.ts-main .text-content li::marker { color: var(--main-color); }
.ts-main .text-content strong, .ts-main .text-content b { color: var(--text); }
.ts-main .text-content a { color: var(--main-color); }
.ts-main .text-content table { width: 100%; border-collapse: collapse; margin: 0 0 1em; display: block; overflow-x: auto; }
.ts-main .text-content th, .ts-main .text-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.ts-main .text-content th { color: var(--text); }

.ts-notif { padding-top: 24px; }
.ts-alert { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--main-color); border-radius: var(--r2); padding: 16px 20px; color: var(--text); position: relative; margin-top: 24px; }
.ts-alert .close { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; background: none; border: 0; color: var(--mute); font-size: 20px; line-height: 1; }
.ts-alert .close:hover { color: var(--text); }
.ts-alert.alert-danger { border-left-color: var(--promo); }
.donator-module, .payments-module { display: none; }

html.ts-no-scroll { overflow: hidden; }

@media (min-width: 1301px) {
    .ts-mobile-menu { display: contents; }
    .ts-mobile-brand { display: none; }
}

.ts-mobile-backdrop { display: none; }

@media (max-width: 1300px) {
    .ts-rail { flex-wrap: wrap; padding: 14px 24px; }
    .ts-rail-left { flex: 1; justify-content: space-between; order: 1; }
    .ts-burger { display: flex; }

    .ts-mobile-backdrop {
        display: block; position: fixed; inset: 0; z-index: 190;
        background: rgba(0,0,0,.62);
        opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    .ts-rail.open .ts-mobile-backdrop { opacity: 1; pointer-events: auto; }

    .ts-mobile-menu {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
        width: min(84vw, 360px); max-width: 100vw;
        background: var(--ink); border-left: 1px solid var(--line);
        display: flex; flex-direction: column; gap: 4px;
        padding: 22px 18px 24px; overflow-y: auto;
        transform: translateX(100%); transition: transform .3s cubic-bezier(.16,1,.3,1);
    }
    .ts-rail.open .ts-mobile-menu { transform: translateX(0); }

    .ts-mobile-brand {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        font-family: var(--font-head); font-weight: 900; font-size: 20px; text-transform: uppercase;
        letter-spacing: 0.01em; color: var(--text);
        padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
    }
    .ts-mobile-close {
        flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px;
        background: var(--panel); border: 1px solid var(--line); color: var(--text);
        display: flex; align-items: center; justify-content: center; font-size: 15px;
    }

    .ts-nav-wrap { display: block; width: 100%; }
    .ts-nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; justify-content: flex-start; max-width: none; width: 100%; border-radius: var(--r2); padding: 10px; background: var(--panel); }
    .ts-nav .ts-sub { position: static; box-shadow: none; margin-top: 4px; }
    .ts-rail-right { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin-top: 14px; gap: 12px; }
    .ts-currency .ts-dropdown {
        position: static; display: grid; box-shadow: none;
        width: 100%; grid-template-columns: repeat(2, 1fr);
        max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; translate: none;
        overflow: hidden; pointer-events: none;
        transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease, padding .3s ease;
    }
    .ts-currency.open .ts-dropdown { max-height: 260px; margin-top: 8px; padding-top: 8px; padding-bottom: 8px; opacity: 1; pointer-events: auto; }
}

@media (max-width: 1024px) {
    .ts-market { grid-template-columns: repeat(2, 1fr); }
    .ts-pkg { grid-template-columns: 1fr; gap: 36px; }
    .ts-faq-list { flex-direction: column; }
    .ts-advbar { grid-template-columns: 1fr 1fr; }
    .ts-checkout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .ts-stage { min-height: unset; padding: 100px 0 40px; }
    .ts-stage-grid { grid-template-columns: 1fr; gap: 36px; }
    .ts-stage-video-wrap { width: 100%; height: auto; align-items: center; }
    .ts-coupon-row { margin: 32px 0 0; }
    .ts-stage-inner { padding-left: 32px; padding-right: 32px; }
    .ts-wrap { padding-left: 32px; padding-right: 32px; }
    .ts-sec { padding-top: 60px; padding-bottom: 60px; }
    .ts-sec-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    .ts-coupon-pill { width: 100%; gap: 12px; padding: 14px 16px 14px 12px; }
    .ts-coupon-icon { width: 40px; height: 40px; font-size: 18px; }
    .ts-coupon-code { font-size: 16px; }
    .ts-coupon-off { font-size: 13px; }
    .ts-coupon-note { font-size: 11px; }
    .ts-advbar { grid-template-columns: 1fr; }
    .ts-stage-inner { padding: 0 22px; }
    .ts-wrap { padding-left: 22px; padding-right: 22px; }
    .ts-row-body, .featured-package-info { padding: 24px; }
    .ts-quote { flex-basis: 300px; }
    .ts-login-page { min-height: calc(100dvh - 160px); padding: 24px 16px; }
    .ts-login-card { padding: 26px 22px; }
    .ts-main .store-text, .ts-main .text-content { padding: 24px; margin: 24px 0 48px; }
    .ts-plain-head-tools { max-width: none; }
    .ts-sort-toggle { min-width: 0; width: 48px; padding: 0; justify-content: center; gap: 0; }
    .ts-sort-toggle .ts-sort-label { display: none; }
    .ts-sort .ts-sort-list { left: auto; right: 0; }
}

@media (max-width: 480px) {
    .ts-market { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
    .ts-wrap, .ts-stage-inner { padding-left: 16px; padding-right: 16px; }
    .ts-rail { padding: 12px 16px; }
    .ts-stage h1 { font-size: clamp(34px, 11vw, 56px); }
    .ts-stage-sub { font-size: 14px; }
    .ts-sec-head h2 { font-size: 22px; }
    .ts-row-body, .featured-package-info { padding: 18px; }
    .ts-row-name, .featured-package-name { font-size: 18px; }
    .ts-pkg-name { font-size: 26px; }
    .ts-co-panel { padding: 20px; }
    .ts-btn { padding: 11px 18px; font-size: 13px; }
    .ts-quote { flex-basis: 260px; }
}