/* Pas d `@import` de police ici. Il y en avait un — Inter en sept graisses
   statiques — alors que master.njk charge deja Inter en police variable. Le
   navigateur ne decouvre un `@import` qu une fois CE fichier telecharge : la
   requete vers Google partait donc en dernier et bloquait le premier affichage
   pour un fichier de police deja en route. La police se charge dans le <head>
   de master.njk, et nulle part ailleurs. */

/*═══════════════════════════════════════════════════════════════════════════
  THEME "NIVEX"
  ---------------------------------------------------------------------------
  Loads after style.css and built.css. Sizes, colours and timings here were
  measured off the reference storefront's computed styles at 1905px wide.

  ANIMATIONS AND REDUCED MOTION. style.css forces every animation down to
  .001ms under `prefers-reduced-motion: reduce` with a `*` selector and
  !important. The shop owner's machine reports that preference, so every
  decorative animation below is declared with !important on a class
  selector: same importance, higher specificity, so it keeps running.
═══════════════════════════════════════════════════════════════════════════*/

html:root {
  --nx-bg:        #0b1320;
  --nx-card:      #0f1829;
  --nx-card-2:    #142033;
  --nx-card-3:    #1a2940;

  --nx-line:      rgba(255, 255, 255, .06);
  --nx-line-2:    rgba(59, 130, 246, .22);
  --nx-line-3:    rgba(59, 130, 246, .45);
  --nx-navline:   rgba(21, 97, 213, .28);

  --nx-acc:       #3b82f6;
  --nx-acc-hi:    #60a5fa;
  --nx-sky:       #38bdf8;
  --nx-grad:      linear-gradient(180deg, #4a8cf7 0%, #3b82f6 100%);
  --nx-grad-hi:   linear-gradient(180deg, #5b97f8 0%, #4687f7 100%);
  --nx-grad-line: linear-gradient(90deg, #38bdf8, #3b82f6);

  --nx-fg:        #ffffff;
  --nx-muted:     rgba(255, 255, 255, .6);

  --nx-r:         14px;
  --nx-r-sm:      10px;
  --nx-ok:        #22c55e;
  --nx-discord:   #5865f2;

  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-logo:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --cl-accent:         59 130 246;
  --cl-bg:             11  19  32;
  --cl-surface:        15  24  41;
  --cl-fg:            255 255 255;
  --cl-muted:         170 180 198;
  --cl-border:         30  42  62;
  --cl-on-accent:     255 255 255;
  --cl-t-primary:     255 255 255;
  --cl-t-muted:       170 180 198;
  --cl-background:     11  19  32;
  --cl-surface-raised: 20  32  51;
  --cl-success:        34 197  94;
  --cl-warning:       245 158  11;
  --cl-error:         239  68  68;
}

html { background-color: var(--nx-bg); }
/* Le fond n est plus sur `body` mais dans le calque `.nx-bg` (bloc « FOND DU
   SITE » plus bas). `body` doit rester transparent : un calque en z-index
   negatif passe derriere le fond de son parent, donc un `body` opaque le
   recouvrirait entierement. `html body` bat la regle `body { background }` du
   pont de reglages de style.css. */
html body { background: transparent; color: var(--nx-fg); font-family: var(--font-ui); }
body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, .38); border-color: var(--nx-bg); }
body::-webkit-scrollbar-track, html::-webkit-scrollbar-track { background: var(--nx-bg); }
html { scrollbar-color: rgba(59, 130, 246, .4) var(--nx-bg); }
::selection { background: rgba(59, 130, 246, .35); color: #fff; }
:focus-visible { outline-color: var(--nx-acc-hi); }

/*═══════════════════════════════════════════════════════════════════════════
  FOND DU SITE
  ---------------------------------------------------------------------------
  UN SEUL CALQUE FIXE (`<div class="nx-bg">` dans master.njk), derriere toutes
  les pages. De bas en haut :
    1. base : degrade vertical marine, jamais de noir pur
    2. trois nappes de lumiere (bleu accent, ciel, indigo), analogues pour ne
       pas sortir de l identite bleue
    3. `::after` : vignette qui assombrit les bords + grain fin qui casse les
       paliers des grands degrades

  Mouvement : les nappes derivent en `transform` seul (compose par le GPU, pas
  de repeinture). Aucun `filter: blur`, trop couteux en plein ecran : le
  radial-gradient est deja doux. Durees premieres entre elles et en
  `alternate`, donc le motif ne se repete jamais exactement. Declare avec
  `!important` : meme raison que le reste du theme, voir l en-tete du fichier.

  Au repos (animation coupee ou onglet masque) les nappes restent a leur
  position de depart : la page est complete sans mouvement.

  `--nxbg-k` regle l intensite des nappes par gabarit (voir plus bas).
═══════════════════════════════════════════════════════════════════════════*/
.nx-bg {
  --nxbg-a: 59, 130, 246;
  --nxbg-b: 56, 189, 248;
  --nxbg-c: 79, 70, 229;
  position: fixed; inset: 0; z-index: -1;
  height: 100vh; height: 100lvh;
  overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #0c1526 0%, #0b1320 45%, #080d17 100%);
}
.nx-bg i {
  position: absolute; display: block; border-radius: 50%;
  opacity: var(--nxbg-k, .9);
  will-change: transform;
}
.nx-bg i:nth-child(1) {
  width: 78vmax; height: 78vmax; left: -18vmax; top: -34vmax;
  background: radial-gradient(circle, rgba(var(--nxbg-a), .26) 0%, rgba(var(--nxbg-a), .09) 40%, transparent 68%);
  animation: nxBgA 72s ease-in-out infinite alternate !important;
}
.nx-bg i:nth-child(2) {
  width: 64vmax; height: 64vmax; right: -22vmax; top: 18vh;
  background: radial-gradient(circle, rgba(var(--nxbg-b), .20) 0%, rgba(var(--nxbg-b), .07) 42%, transparent 68%);
  animation: nxBgB 96s ease-in-out infinite alternate !important;
}
.nx-bg i:nth-child(3) {
  width: 70vmax; height: 70vmax; left: -12vmax; bottom: -38vmax;
  background: radial-gradient(circle, rgba(var(--nxbg-c), .24) 0%, rgba(var(--nxbg-c), .09) 42%, transparent 68%);
  animation: nxBgC 120s ease-in-out infinite alternate !important;
}
.nx-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"),
    radial-gradient(130% 100% at 50% 42%, transparent 60%, rgba(4, 8, 16, .4) 100%);
  background-size: 160px 160px, auto;
  background-repeat: repeat, no-repeat;
}
@keyframes nxBgA { from { transform: translate3d(-4vw, -3vh, 0) scale(1); }    to { transform: translate3d(12vw, 10vh, 0) scale(1.14); } }
@keyframes nxBgB { from { transform: translate3d(6vw, 4vh, 0) scale(1.08); }   to { transform: translate3d(-14vw, -8vh, 0) scale(.94); } }
@keyframes nxBgC { from { transform: translate3d(-6vw, 6vh, 0) scale(1); }     to { transform: translate3d(16vw, -10vh, 0) scale(1.1); } }

/* Intensite par gabarit. Le catalogue est dense : nappes plus discretes. La
   page Avis avait deja une teinte bleue plus presente que les autres. */
body.sa-tpl-products { --nxbg-k: .7; }
body.sa-tpl-feedback { --nxbg-k: 1; }

@media (max-width: 760px) {
  .nx-bg i:nth-child(3) { display: none; }
}

/* Les bandeaux de section ci-dessous debordent volontairement a 100vw (une
   `.section` est plafonnee a 1440px). `clip`, pas `hidden` : il coupe sans
   creer de conteneur de defilement, donc le `position: sticky` du catalogue
   continue de fonctionner. */
#sa-main { overflow-x: clip; }

@keyframes nxSpin     { to { transform: rotate(360deg); } }
@keyframes nxMarquee   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nxBlink     { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes nxDivPulse  { 0%, 100% { opacity: .15; } 50% { opacity: .6; } }
@keyframes nxFloatY    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes nxPulseRing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }
@keyframes nxOrbPulse  { 0%, 100% { opacity: .6; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
@keyframes nxOrbit     { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.05); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes nxParticle  { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .2; } 50% { transform: translate(20px, -30px) scale(1.2); opacity: .6; } }
@keyframes nxIconPulse { 0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, .1); } 50% { box-shadow: 0 0 22px rgba(59, 130, 246, .32); } }

@keyframes nxFlake1 { 0%, 100% { transform: translate(0, 0); opacity: .35; } 30% { transform: translate(38px, -28px); opacity: .9; } 60% { transform: translate(66px, 12px); opacity: .5; } }
@keyframes nxFlake2 { 0%, 100% { transform: translate(0, 0); opacity: .35; } 35% { transform: translate(-42px, -22px); opacity: .85; } 70% { transform: translate(-18px, -52px); opacity: .55; } }
@keyframes nxFlake3 { 0%, 100% { transform: translate(0, 0); opacity: .4; }  25% { transform: translate(-28px, 38px); opacity: .9; } 55% { transform: translate(22px, 62px); opacity: .5; } }
@keyframes nxFlake4 { 0%, 100% { transform: translate(0, 0); opacity: .35; } 30% { transform: translate(34px, 42px); opacity: .9; } 65% { transform: translate(-14px, 22px); opacity: .5; } }
@keyframes nxFlake5 { 0%, 100% { transform: translate(0, 0); opacity: .4; }  30% { transform: translate(-52px, 16px); opacity: .85; } 60% { transform: translate(-24px, -32px); opacity: .5; } }
@keyframes nxFlake6 { 0%, 100% { transform: translate(0, 0); opacity: .35; } 35% { transform: translate(48px, -46px); opacity: .9; } 70% { transform: translate(14px, -12px); opacity: .5; } }

/*───────────────────────────────────────────────
  BUTTONS (product page, cart, drawers)
───────────────────────────────────────────────*/
.btn-primary, .pdv3-btn-checkout, .sa-add-to-cart, .cart-panel__checkout {
  background: var(--nx-grad); color: #fff;
  border: 0; border-radius: 999px; font-weight: 600;
  box-shadow: 0 10px 25px rgba(59, 130, 246, .35);
}
.btn-primary:hover, .cart-panel__checkout:hover { background: var(--nx-grad-hi); color: #fff; }
.btn-primary--lg { border-radius: 999px; height: 48px; padding: 0 28px; font-size: 15px; }
.btn-pill {
  background: #fff; color: #0b1320;
  border: 0; border-radius: 999px;
  height: 44px; padding: 0 24px;
  font-weight: 600; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 9px;
}
.btn-pill svg { color: var(--nx-discord); flex-shrink: 0; }
.btn-ghost:hover { background: rgba(59, 130, 246, .1); }
.btn-icon:hover { background: rgba(59, 130, 246, .12); }

/*───────────────────────────────────────────────
  SURFACES
───────────────────────────────────────────────*/
.product-card, .category-card, .testimonial, .pd-checkout, .cry-modal, .co-modal,
.inv-card, .rv-card, .sort-filter__panel, .lang-dropdown, .faq-item {
  background: var(--nx-card);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--nx-r);
  box-shadow: none;
}
.product-card:hover, .rv-card:hover { border-color: var(--nx-line-3); box-shadow: 0 18px 40px -22px rgba(59, 130, 246, .6); }
.cart-panel, .drawer { background: #0a1426; border-left: 1px solid var(--nx-navline); }
/* Le panier et le tiroir mobile sont ranges juste hors ecran (translateX 100%)
   mais restent `visibility: visible` : leur grosse ombre noire (-24px 0 60px)
   debordait donc sur le bord droit de TOUTES les pages, en permanence — une
   bande sombre de 40 a 60px que le fond uni cachait mal et que le nouveau
   fond rendait evidente. L ombre n existe plus que panneau ouvert, et se
   fond avec le glissement. */
.cart-panel:not(.open), .drawer:not(.open) { box-shadow: none; }
.cart-panel { transition: transform 320ms cubic-bezier(.16, 1, .3, 1), box-shadow 320ms ease; }
.drawer     { transition: transform 300ms ease, box-shadow 300ms ease; }

/*───────────────────────────────────────────────
  NAVBAR — floating pill, 1180px wide, 16px from the top.
───────────────────────────────────────────────*/
.nav {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 200;
  height: auto; padding: 0 16px;
  background: transparent; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  pointer-events: none;
}
.nav.scrolled { background: transparent; box-shadow: none; }
.nav__inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 16px;
  width: 100%; max-width: 1180px; height: 60px; margin: 0 auto;
  padding: 0 10px 0 18px;
  /* Verre depoli : le fond du site et les cartes qui defilent dessous passent
     a travers, floutes, au lieu d un aplat. */
  background: rgba(10, 23, 48, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--nx-navline); border-radius: 999px;
  box-shadow: 0 8px 30px rgba(4, 10, 26, .45);
}
.nav__logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav__logo-mark { display: inline-flex; width: 32px; height: 32px; }
.nav__logo-mark svg { width: 100%; height: 100%; }
.nav__logo-img { height: 40px; width: auto; }
/* The bundled FS mark is wider than tall (127x72), so it is sized by height
   and keeps its own proportions inside the pill. */
.nav__logo-img--mark { height: 34px; }

.nav__links { display: flex; align-items: center; justify-content: flex-start; gap: 4px; margin: 0 0 0 8px; padding: 0; list-style: none; }
.nav__links a {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 15px; margin: 0;
  border-radius: 999px;
  font-size: 13.6px; font-weight: 500; color: rgba(226, 232, 240, .65);
  transition: color .2s ease, background-color .2s ease !important;
}
.nav__links a:hover { color: #f1f5f9; background: rgba(21, 97, 213, .12); }
/* `is-current` is set by navbar.njk; script.js's markActiveLinks strips `.active`. */
.nav__links a.active, .nav__links a.is-current { color: #f1f5f9; font-weight: 600; background: rgba(21, 97, 213, .22); }

.nav__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* ── Language switcher (replaces the old search icon) ──
   style.css sizes it for a 72px-tall bar; this pill is 60px, so the button is
   re-cut here and the dropdown repainted in the theme's navy. */
.nav__lang-wrap { position: relative; display: inline-flex; }
.nav__lang {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 12px; border-radius: 999px;
  background: transparent; border: 0; color: rgba(226, 232, 240, .78);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  transition: background-color .2s ease, color .2s ease !important;
}
.nav__lang:hover, .nav__lang[aria-expanded="true"] { background: rgba(21, 97, 213, .22); color: #fff; }
.nav__lang svg { width: 17px; height: 17px; flex-shrink: 0; }
.lang-dropdown {
  top: calc(100% + 10px); right: 0; min-width: 194px; padding: 6px;
  background: #0a1426; border: 1px solid var(--nx-navline); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(4, 10, 26, .6);
}
.lang-option {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 11px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .66);
  transition: background-color .18s ease, color .18s ease !important;
}
.lang-option b { min-width: 24px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--nx-acc-hi); }
.lang-option:hover { background: rgba(21, 97, 213, .18); color: #fff; }
.lang-option.selected { background: rgba(21, 97, 213, .3); color: #fff; }
@media (max-width: 480px) { .nav__lang span { display: none; } .nav__lang { padding: 0 9px; } }
.nav__search, .nav__cart {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; gap: 0;
  border: 0; border-radius: 999px; background: transparent;
  color: rgba(226, 232, 240, .65); cursor: pointer;
  transition: color .2s ease, background-color .2s ease !important;
}
.nav__search:hover, .nav__cart:hover { color: #f1f5f9; background: rgba(21, 97, 213, .14); }
.nav__cart-label { display: none; }
.nav__cart-count {
  position: absolute; top: 1px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--nx-acc); color: #fff;
  font-size: 10px; font-weight: 700;
  box-shadow: 0 0 0 2px #0a1730;
}
.nav__sep { display: block; width: 1px; height: 22px; margin: 0 6px; background: var(--nx-navline); }
.nav__login {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 18px; margin: 0 2px;
  border: 1px solid var(--nx-navline); border-radius: 999px;
  background: rgba(21, 97, 213, .14); color: #f1f5f9;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease !important;
}
.nav__login:hover { background: rgba(21, 97, 213, .26); border-color: rgba(59, 130, 246, .5); color: #fff; }
.nav__login svg { color: #f1f5f9; flex-shrink: 0; }
.nav__hamburger { display: none; }
.sa-announce { background: rgba(59, 130, 246, .12); border-bottom: 1px solid var(--nx-navline); }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__hamburger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; color: #f1f5f9; }
  .nav__login-label { display: none; }
  .nav__login { padding: 0 12px; }
}
@media (max-width: 480px) {
  .nav__inner { padding: 0 8px 0 14px; gap: 8px; }
  .nav__sep { display: none; }
}

/*───────────────────────────────────────────────
  HERO
───────────────────────────────────────────────*/
.hero--split {
  position: relative; overflow: hidden;
  display: block; min-height: 0; text-align: left;
  padding: 0 24px;
  /* Transparent : le hero laisse voir le calque `.nx-bg` (FOND DU SITE). Il
     etait opaque et se fondait vers un aplat sur ses 150 derniers px ; avec
     un fond qui n est plus uni, ce fondu ferait une couture. Plus de fondu :
     les orbes meurent d eux-memes avant le bord (voir .hero-orb--bottom). */
  background: transparent;
}
.hero--split::before, .hero--split::after { display: none; }

/* Le calque global porte deja une nappe en haut a gauche : ce halo ne fait
   plus que prolonger la lumiere derriere le titre, d ou l alpha ramene de
   .15 a .09 pour ne pas doubler l eclat. */
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1200px 600px at 50% -200px, rgba(59, 130, 246, .09), transparent 70%);
}

/* FONDU DU BAS DU HERO. Le hero est en `overflow: hidden` : sa grille animee
   (inset: 0) et ses flocons etaient rognes net sur son bord bas, et c etait
   le fondu vers un aplat — retire plus haut — qui le cachait. Sans lui, la
   grille s arretait sur une ligne droite et le haut de la page changeait de
   ton d un coup. Ces trois calques s eteignent maintenant eux-memes sur la
   moitie basse, et se fondent dans le fond du site. */
.hero-bg, .hero-grid-lines, .hero-flakes {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 96%);
}
.hero-orb {
  position: absolute; left: 50%;
  width: 1600px; height: 900px; border-radius: 50%;
  filter: blur(90px); pointer-events: none;
  transform: translateX(-50%);
}
.hero-orb--top {
  top: -420px;
  background: radial-gradient(circle, rgba(56, 189, 248, .16) 0%, rgba(59, 130, 246, .08) 45%, transparent 75%);
  animation: nxOrbPulse 12s ease-in-out infinite !important;
}
/* Sits fully inside the section and dies out ~70px before the bottom edge.
   It used to hang 420px below the hero, so `overflow: hidden` sliced it at
   53% of its height — right where the glow is still at full strength — and
   that cut read as a hard horizontal line against the next section.
   Letting it spill instead is not an option: the orb is 1600px wide and the
   page would gain 260px of horizontal scroll. */
.hero-orb--bottom {
  bottom: 0;
  height: 620px;
  background: radial-gradient(ellipse 62% 50% at 50% 50%, rgba(59, 130, 246, .12) 0%, rgba(56, 189, 248, .05) 45%, transparent 78%);
  animation: nxOrbPulse 15s ease-in-out infinite reverse !important;
}

.hero-flakes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* The wrapper carries the position and the pointer-dodge offset; the flake
   inside carries the drift animation (see components/hero.njk). */
.hero-flake-wrap { position: absolute; pointer-events: none; }
.hero-flake {
  position: static; display: block; border-radius: 50%; opacity: .4;
  background: radial-gradient(circle, rgba(148, 210, 255, .95) 0%, rgba(56, 189, 248, .55) 45%, rgba(56, 189, 248, 0) 75%);
  box-shadow: 0 0 12px 2px rgba(56, 189, 248, .55);
  animation: var(--a) var(--d) ease-in-out var(--dl) infinite !important;
}

.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center;
  max-width: 1300px; margin: 0 auto;
  padding: 130px 0 70px;
}
@media (min-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); min-height: 755px; padding: 110px 0 60px; }
}
.hero__copy { max-width: none; }

.hero--split .hero__title {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(40px, 3.9vw, 73.6px); font-weight: 600;
  letter-spacing: -1.5px; line-height: 1.05; color: #fff;
}
.type-wrap {
  position: relative; display: inline-block; vertical-align: top; max-width: 100%;
  filter: drop-shadow(0 0 14px rgba(59, 130, 246, .45));
}
.type-sizer { display: inline-block; visibility: hidden; white-space: nowrap; }
.type-box { position: absolute; inset: 0; white-space: nowrap; }
.hero--split .hero__title .grad {
  display: inline-block;
  background-image: var(--nx-grad-line);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero--split .hero__sub {
  margin: 0 0 40px; max-width: 540px; text-align: left;
  font-size: clamp(16px, 1.1vw, 20.8px); line-height: 1.5; color: rgba(255, 255, 255, .7);
}
.hero--split .hero__sub b { color: #fff; font-weight: 700; }
.hero--split .hero__cta { justify-content: flex-start; gap: 15px; flex-wrap: wrap; }

.hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: clamp(15px, .9vw, 16.8px); font-weight: 600; line-height: 1.5; white-space: nowrap;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.hero-btn--ghost { padding: 16px 34px; border-radius: 50px; border: 1px solid rgba(255, 255, 255, .15); background: transparent; color: #fff; }
.hero-btn--ghost:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); color: #fff; transform: translateY(-2px); }
.hero-btn--primary { padding: 16px 32px; border-radius: 40px; background: var(--nx-acc); color: #fff; box-shadow: 0 10px 25px rgba(59, 130, 246, .4); }
.hero-btn--primary:hover { background: #4b8ef8; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(59, 130, 246, .55); }

/* ── Tilted "browser window" card ── */
.hero__showcase { position: relative; z-index: 1; display: flex; justify-content: center; perspective: 1500px; }
.hwin {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 500px;
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(rgba(15, 23, 42, .9), rgba(4, 8, 20, .95));
  border: 1px solid rgba(59, 130, 246, .35);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, .08), 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(59, 130, 246, .12);
  transform: rotateY(-9deg) rotateX(4deg);
  transition: transform .2s ease-out !important;
  will-change: transform;
}
.hwin__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.hwin__dots { display: flex; gap: 7px; }
.hwin__dots i { display: block; width: 9px; height: 9px; border-radius: 999px; background: #ff5f57; }
.hwin__dots i:nth-child(2) { background: #febc2e; }
.hwin__dots i:nth-child(3) { background: #28c840; }
.hwin__live { display: flex; align-items: center; gap: 6px; font-size: 11.2px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.hwin__live i { display: block; width: 6px; height: 6px; border-radius: 999px; background: #28c840; box-shadow: 0 0 8px #28c840; animation: nxBlink 2s ease-in-out infinite !important; }

.hwin__body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 30px 22px; }
.hwin__icon { position: relative; width: 96px; height: 96px; margin: 0 0 14px; }
.hwin__ring { position: absolute; inset: 0; border: 1px dashed rgba(59, 130, 246, .45); border-radius: 999px; animation: nxSpin 9s linear infinite !important; }
.hwin__circle {
  position: absolute; inset: 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(59, 130, 246, .35), rgba(59, 130, 246, .05) 70%);
}
.hwin__circle img { width: 68px; height: 68px; object-fit: contain; }
.hwin__circle svg { width: 38px; height: 38px; }
.hwin__eyebrow { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nx-acc-hi); }
.hwin__title { margin: 0 0 18px; font-size: clamp(24px, 1.6vw, 30.4px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: #fff; }

.hwin__stats { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.hwin__stat { display: flex; flex-direction: column; align-items: center; min-width: 88px; }
.hwin__val { font-size: clamp(22px, 1.45vw, 27.2px); font-weight: 700; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; }
.hwin__lbl { margin-top: 4px; font-size: 12.5px; letter-spacing: 1px; line-height: 1.5; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.hwin__div { display: block; width: 1px; height: 38px; background: rgba(255, 255, 255, .35); animation: nxDivPulse 3s ease-in-out infinite !important; }

.hwin__btns { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.hwin__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border-radius: 40px;
  font-size: 14.7px; font-weight: 600; color: #fff;
  transition: transform .2s ease, background-color .2s ease !important;
}
.hwin__btn--shop { background: var(--nx-acc); box-shadow: 0 10px 25px rgba(59, 130, 246, .4); }
.hwin__btn--shop:hover { background: #4b8ef8; color: #fff; transform: translateY(-1px); }
.hwin__btn--ghost { border: 1px solid rgba(255, 255, 255, .2); }
.hwin__btn--ghost:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.hwin__reviews {
  width: 100%; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* padding-right = gap, so -50% lands exactly on the second copy. */
.hwin__track { display: flex; gap: 12px; width: max-content; padding-right: 12px; animation: nxMarquee 22s linear infinite !important; }
.hwin__chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  font-size: 11.5px; line-height: 1.5; white-space: nowrap;
}
.hwin__chip-stars { color: var(--nx-acc); letter-spacing: 1px; }
.hwin__chip-text { color: rgba(255, 255, 255, .7); }
.hwin__chip-ok { color: #28c840; font-weight: 600; }

@media (max-width: 1099px) { .hwin { transform: none; } }
@media (max-width: 480px) {
  .hero--split .hero__title { font-size: 34px; letter-spacing: -1px; }
  .hwin__body { padding: 22px 18px 18px; }
  .hwin__stats { gap: 10px; }
  .hwin__stat { min-width: 0; }
}

/*───────────────────────────────────────────────
  SECTION HEADERS (simple FAQ page, other sections)
───────────────────────────────────────────────*/
.section { padding: 72px 24px; max-width: var(--container, 1280px); }
.section__eyebrow { margin: 0 0 10px; font-size: 12.8px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--nx-acc); }
.section__title { font-size: clamp(26px, 3.2vw, 40px); font-weight: 600; letter-spacing: -1px; color: #fff; }
.section__sub { color: rgba(255, 255, 255, .5); }

/*───────────────────────────────────────────────
  FEATURES — "Premium Quality / Instant Delivery / Live Support"
───────────────────────────────────────────────*/
.sa-features--icon-grid .sa-features-items { max-width: 1160px; margin-inline: auto; gap: 50px !important; }
.sa-features--icon-grid .sa-features-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .4s ease-out !important;
}
.sa-features--icon-grid .sa-features-item:hover { transform: translateY(-8px); }
.feat-icon {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  width: 90px; height: 90px; margin: 0 auto 30px;
  border-radius: 50%; color: #fff;
  border: 2px solid rgba(59, 130, 246, .2);
  background: linear-gradient(135deg, rgba(59, 130, 246, .15), rgba(59, 130, 246, .03));
  animation: nxIconPulse 4s ease-in-out infinite !important;
  transition: border-color .4s ease !important;
}
.feat-icon::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 120px; height: 120px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--nx-acc); filter: blur(50px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease !important;
}
.sa-features-item:hover .feat-icon { border-color: rgba(59, 130, 246, .5); }
.sa-features-item:hover .feat-icon::before { opacity: .35; }
.feat-icon svg { width: 38px; height: 38px; stroke-width: 2.2; }
.feat-title { margin: 0 0 8px; font-size: 24px !important; font-weight: 700 !important; letter-spacing: .5px; line-height: 1.2; color: #fff !important; }
.feat-line { display: block; width: 40px; height: 3px; margin: 0 auto 20px; border-radius: 10px; background: var(--nx-acc); transition: width .4s ease !important; }
.sa-features-item:hover .feat-line { width: 70px; }
.feat-text { max-width: 320px; margin: 0 !important; font-size: 16px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, .7) !important; }

/*───────────────────────────────────────────────
  CATEGORIES — the category image IS the card, plus a "Buy Now" pill.
───────────────────────────────────────────────*/
.sa-categories--banner .wrap { max-width: 1400px; }
.cat-banner-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.cat-banner-grid > a { flex: 0 0 calc((100% - 40px) / 3); }
@media (max-width: 1023px) { .cat-banner-grid > a { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 639px)  { .cat-banner-grid > a { flex-basis: 100%; } }

.cat-card {
  position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: #000;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}
.cat-card img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.9); transition: filter .3s ease, transform .5s ease !important; }
.cat-card:hover { transform: translateY(-4px); border-color: rgba(59, 130, 246, .45); box-shadow: 0 18px 40px -20px rgba(59, 130, 246, .55); }
.cat-card:hover img { filter: brightness(1); transform: scale(1.03); }
.cat-card__btn {
  position: absolute; left: 12px; bottom: 20px;
  padding: 5px 16px; border-radius: 21px;
  background: rgba(60, 60, 60, .85); color: #fff;
  font-size: 12px; font-weight: 500; letter-spacing: .3px; line-height: 18px;
  transition: background-color .2s ease, color .2s ease !important;
}
.cat-card:hover .cat-card__btn { background: #fff; color: #000; }

/* Fallback when a category has no image: a generated tile of the same shape. */
.cat-banner {
  --cat-accent: #3b82f6;
  position: relative; overflow: hidden; display: block; aspect-ratio: 2 / 1;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 3px solid var(--cat-accent);
  background: linear-gradient(155deg, #16233d 0%, #101728 55%, #0b0f18 100%);
  padding: 16px 18px;
  transition: transform .3s ease, border-color .3s ease !important;
}
.cat-banner:hover { transform: translateY(-4px); border-color: rgba(59, 130, 246, .45); border-bottom-color: var(--cat-accent); }
.cat-banner__head { display: flex; align-items: center; gap: 8px; }
.cat-banner__icon { width: 20px; height: 20px; object-fit: contain; }
.cat-banner__label { font-size: 13px; font-weight: 700; color: #fff; }
.cat-banner__big {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  max-width: 80%; font-size: 40px; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .18);
}
.cat-banner__buy {
  position: absolute; left: 12px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 16px; border-radius: 21px;
  background: rgba(60, 60, 60, .85); color: #fff; font-size: 12px; font-weight: 500;
}
.cat-banner-grid a:nth-child(9n+1) { --cat-accent: #a855f7; }
.cat-banner-grid a:nth-child(9n+2) { --cat-accent: #3b82f6; }
.cat-banner-grid a:nth-child(9n+3) { --cat-accent: #ef4444; }
.cat-banner-grid a:nth-child(9n+4) { --cat-accent: #84cc16; }
.cat-banner-grid a:nth-child(9n+5) { --cat-accent: #eab308; }
.cat-banner-grid a:nth-child(9n+6) { --cat-accent: #22c55e; }
.cat-banner-grid a:nth-child(9n+7) { --cat-accent: #f97316; }
.cat-banner-grid a:nth-child(9n+8) { --cat-accent: #06b6d4; }
.cat-banner-grid a:nth-child(9n+9) { --cat-accent: #ec4899; }

/*───────────────────────────────────────────────
  REVIEWS — scrolling strip of verified feedback
───────────────────────────────────────────────*/
.rv-mhead { max-width: 700px; margin: 0 auto 28px; text-align: center; }
.rv-mhead__eyebrow { margin: 0 0 5px; font-size: 14.4px; letter-spacing: 1px; text-transform: uppercase; color: #0084ff; }
.rv-mhead__title { font-size: clamp(28px, 2.2vw, 40px); font-weight: 600; letter-spacing: -1px; line-height: 1.2; color: #fff; }
.rv-mhead__sub { margin: 10px auto 20px; font-size: 16px; font-weight: 300; color: rgba(255, 255, 255, .5); }
.rv-marquee {
  overflow: hidden; margin-bottom: 20px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.rv-marquee__track { display: flex; gap: 20px; width: max-content; padding: 10px 20px 10px 0; animation: nxMarquee 90s linear infinite !important; }
.rv-marquee:hover .rv-marquee__track { animation-play-state: paused !important; }
.rv-mcard {
  flex: 0 0 320px; width: 320px;
  display: flex; flex-direction: column;
  padding: 24px; border-radius: 14px;
  background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .05);
  transition: border-color .3s ease, transform .3s ease !important;
}
.rv-mcard:hover { border-color: rgba(59, 130, 246, .35); transform: translateY(-3px); }
.rv-mcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rv-mcard__stars { display: flex; gap: 2px; }
.rv-mcard__stars svg { width: 16px; height: 16px; fill: rgba(255, 255, 255, .15); }
.rv-mcard__stars svg.is-on { fill: #0084ff; }
.rv-mcard__date { font-size: 12.8px; color: rgba(255, 255, 255, .25); }
.rv-mcard__text {
  flex: 1; margin: 0 0 20px;
  font-size: 15.2px; line-height: 1.5; color: rgba(255, 255, 255, .7);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-mcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .05); }
.rv-mcard__product { max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.4px; font-weight: 500; color: #fff; }
.rv-mcard__ok {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(0, 200, 83, .08); border: 1px solid rgba(0, 200, 83, .15);
  color: #00c853; font-size: 12px; font-weight: 700;
}
.rv-mcard__ok svg { width: 12px; height: 12px; }

/* Review cards on the product page (feedback-card.njk). */
.rv-card { padding: 18px; }
.rv-card__stars { color: #0084ff; }
.rv-card__check, .rv-card__verified { color: #00c853; }
.rv-card__verified { font-weight: 700; font-size: 11.5px; }
.rv-card__date { color: rgba(255, 255, 255, .3); font-size: 11.5px; }
.rv-card__text { color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.55; }

/*───────────────────────────────────────────────
  SUPPORT HUB — FAQ + "talk to a human" card
───────────────────────────────────────────────*/
.support-hub { padding: 100px 20px; }
.support-hub__wrap {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center;
  max-width: 1296px; margin: 0 auto; padding: 60px;
  border-radius: 40px;
  /* Aplat unique auparavant. Deux nappes d accent en diagonale opposee
     donnent de la profondeur au panneau, et le liseré clair du haut lui rend
     son aspect de verre. */
  /* UNE seule source de lumiere, en haut a gauche, derriere le titre. Deux
     nappes de couleur opposees donnaient ce halo flou symetrique qui fait
     « fond genere » ; une lumiere unique se lit comme un eclairage. */
  background:
    radial-gradient(85% 68% at 6% -8%, rgba(59, 130, 246, .13), transparent 62%),
    linear-gradient(165deg, #0e1728 0%, #0b111e 58%, #090e19 100%);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 120px rgba(0, 0, 0, .45),
    0 24px 60px -30px rgba(0, 0, 0, .8);
}
@media (min-width: 1000px) { .support-hub__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }

@media (max-width: 639px)  { .support-hub { padding: 60px 12px; } .support-hub__wrap { padding: 32px 20px; border-radius: 28px; } }

.support-hub__bg { position: absolute; inset: 0; pointer-events: none; }

/*── Trame technique ───────────────────────────────────────────────────────
  Des LIGNES, pas des points : une grille fine se lit comme un plan, alors
  qu une pluie de points se lit comme une texture d illustration. Elle est
  masquee en radial depuis le coin eclaire, donc elle s eteint avant les
  bords — on ne voit jamais ou elle s arrete, et elle ne concurrence jamais
  le texte pose dessus.                                                     */
.support-hub__bg::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(115% 85% at 10% -5%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 72%);
          mask-image: radial-gradient(115% 85% at 10% -5%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 72%);
}

/* Arete haute eclairee : un filet net qui s eteint aux deux bouts. C est le
   detail qui donne au panneau son epaisseur, et il ne coute rien. */
.support-hub__bg::after {
  content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, .45), transparent);
}

.support-hub__info, .support-hub__faq { position: relative; z-index: 1; }

.support-hub__eyebrow { margin: 0 0 12px; font-size: 12.8px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--nx-acc); }
.support-hub__title { margin: 0 0 15px; font-size: clamp(30px, 2.4vw, 44.8px); font-weight: 600; line-height: 1.1; color: #fff; }
.support-hub__sub { margin: 0 0 40px; max-width: 400px; font-size: 16.8px; line-height: 1.5; color: rgba(255, 255, 255, .4); }

.support-hub__card { padding: 30px; border-radius: 30px; text-align: center; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
.support-hub__visual { position: relative; display: flex; align-items: center; justify-content: center; height: 160px; margin: 0 0 20px; }

.support-hub__img { position: relative; width: 150px; height: 150px; object-fit: contain; animation: nxFloatY 4s ease-in-out infinite !important; }
.support-hub__glow { position: absolute; width: 140px; height: 140px; border-radius: 50%; background: var(--nx-acc); filter: blur(70px); opacity: .28; }

/*── Medaillon du support ──────────────────────────────────────────────────
  L orbe etait en cyan sature (#22d3ee) sur une page entierement bleu marine :
  il ressortait comme une piece rapportee. Il reprend desormais le degrade
  d accent du theme, avec une lumiere en haut a gauche pour lui donner du
  volume plutot qu un aplat.

  Trois couches de mouvement, lentes et decalees pour qu elles ne battent
  jamais ensemble : l orbe respire, des ondes s en echappent, un arc en fait
  le tour. !important sur des selecteurs de classe — style.css aplatit toute
  animation sous prefers-reduced-motion, actif chez le proprietaire.        */
.support-hub__avatar {
  position: relative; display: grid; place-items: center;
  width: 124px; height: 124px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .32), transparent 48%),
    linear-gradient(152deg, #60a5fa 0%, #3b82f6 46%, #1d4ed8 100%);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 0 0 9px rgba(59, 130, 246, .09),
    0 24px 50px -20px rgba(29, 78, 216, .9);
  animation: nxSupBreathe 6s ease-in-out infinite !important;
}
@keyframes nxSupBreathe {
  0%, 100% { transform: translateY(0)    scale(1);    }
  50%      { transform: translateY(-7px) scale(1.022); }
}

.support-hub__mark {
  position: relative; z-index: 2;
  width: 58px; height: 58px;
  filter: drop-shadow(0 3px 6px rgba(9, 24, 58, .45));
}

/* Ondes : elles partent du bord de l orbe et se dissipent, comme un signal
   qu on emet. Trois, decalees d un tiers de cycle. */
.support-hub__wave {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(147, 197, 253, .5);
  opacity: 0; pointer-events: none;
  animation: nxSupWave 3.6s cubic-bezier(.2, .55, .3, 1) infinite !important;
  animation-delay: calc(var(--i, 0) * 1.2s) !important;
}
@keyframes nxSupWave {
  0%   { transform: scale(1);   opacity: .6; }
  75%  { opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Arc qui fait le tour, en trait SVG : degrade proprement en cercle si quoi
   que ce soit empeche l animation. */
.support-hub__orbit {
  position: absolute; z-index: 1; pointer-events: none;
  width: calc(100% + 22px); height: calc(100% + 22px);
  animation: nxSpin 7s linear infinite !important;
}
.support-hub__orbit circle {
  fill: none; stroke: rgba(125, 211, 252, .85);
  stroke-width: 1.6; stroke-linecap: round;
  /* Circonference ≈ 301 : un arc de 34 laisse une trainee courte. */
  stroke-dasharray: 34 267;
}
.support-hub__live {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 15px; padding: 8px 16px; border-radius: 100px;
  background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .2);
  font-size: 13.6px; font-weight: 500; color: #fff;
}
.support-hub__live i { position: relative; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-ok); }
.support-hub__live i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--nx-ok); animation: nxPulseRing 2s ease-out infinite !important; }
.support-hub__answer { margin: 0 0 25px; font-size: 15.2px; color: rgba(255, 255, 255, .4); }
.support-hub__answer span { color: var(--nx-acc); font-weight: 600; }
.support-hub__cta {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 56px; padding: 16px; border-radius: 15px;
  background: #fff; color: #000; font-size: 16px; font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.support-hub__cta:hover { color: #000; transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(255, 255, 255, .35); }
.support-hub__cta svg { color: #000; }

.support-hub__faq { display: flex; flex-direction: column; gap: 15px; }
.support-faq {
  overflow: hidden; border-radius: 20px;
  background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .05);
  transition: border-color .3s ease, background-color .3s ease !important;
}
.support-faq:hover { border-color: rgba(59, 130, 246, .25); }
.support-faq[open] { background: rgba(255, 255, 255, .035); border-color: rgba(59, 130, 246, .3); }
.support-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; list-style: none; cursor: pointer; color: #fff; }
.support-faq summary::-webkit-details-marker { display: none; }
.support-faq__q { display: flex; align-items: center; gap: 12px; font-size: 16.8px; font-weight: 500; line-height: 1.5; }
.support-faq__icon { flex-shrink: 0; width: 26px; font-size: 19.2px; line-height: 1; }
.support-faq__plus { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.support-faq__plus i { position: absolute; border-radius: 2px; background: #fff; transition: transform .3s ease, opacity .3s ease !important; }
.support-faq__plus i:first-child { left: 6px; top: 0; width: 2px; height: 14px; }
.support-faq__plus i:last-child  { left: 0; top: 6px; width: 14px; height: 2px; }
.support-faq[open] .support-faq__plus i:first-child { transform: rotate(90deg); opacity: 0; }
.support-faq__a p { margin: 0; padding: 0 24px 24px 62px; font-size: 15.2px; line-height: 1.6; color: rgba(255, 255, 255, .45); }
@media (max-width: 639px) { .support-faq__a p { padding-left: 24px; } .support-faq summary { padding: 18px; } }

/* Plain FAQ (the /faq page). */
.faq-item__q { color: #fff; }
.faq-item:hover { border-color: rgba(59, 130, 246, .3); }
.faq-item[open] { border-color: rgba(59, 130, 246, .4); }

/*───────────────────────────────────────────────
  TRUST BADGES / PAYMENT ROW
───────────────────────────────────────────────*/
.sa-trust-badges { color: var(--nx-muted); }
.sa-trust-badges-title svg { color: var(--nx-ok); }

/*───────────────────────────────────────────────
  PRODUCT TILES (snippets/product-card.njk), measured off /all-products:
  #0a101f card, 14px radius, 16:9 image, 22.4px name, #0084ff price.
───────────────────────────────────────────────*/
.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1304px; margin: 0 auto; }
.product-card.nvx-tile {
  display: flex; flex-direction: column; aspect-ratio: auto; overflow: hidden;
  background: #0a101f; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
  color: #fff; text-decoration: none; box-shadow: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.product-card.nvx-tile:hover { transform: translateY(-4px); border-color: rgba(59, 130, 246, .45); box-shadow: 0 18px 40px -22px rgba(59, 130, 246, .6); }
.nvx-tile__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(150deg, #16233d 0%, #101728 46%, #0b0f18 100%); }
.nvx-tile__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease !important; }
.nvx-tile:hover .nvx-tile__media img { transform: scale(1.04); }
.nvx-tile__media--empty { display: flex; align-items: center; justify-content: center; padding: 20px; }
.nvx-tile__ph { font-size: 22px; font-weight: 700; text-align: center; color: rgba(255, 255, 255, .22); }
.nvx-tile__body { padding: 18px 22px 25px; }
.nvx-tile__name { margin-bottom: 15px; font-size: 22.4px; font-weight: 500; line-height: 1.25; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nvx-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nvx-tile__price { font-size: 18.4px; font-weight: 600; color: #0084ff; }
.nvx-tile__stock { font-size: 16px; white-space: nowrap; color: rgba(255, 255, 255, .6); }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .product-grid { grid-template-columns: 1fr; } .nvx-tile__name { font-size: 19px; } }

/*───────────────────────────────────────────────
  ALL-PRODUCTS HEADER + SEARCH
───────────────────────────────────────────────*/
.products-page-title { max-width: 1304px; margin: 0 auto 44px; font-size: 28px; font-weight: 500; color: #fff; }
.products-hero { max-width: 770px; margin: 0 auto 28px; text-align: center; }
.products-hero__eyebrow { margin-bottom: 10px; font-size: 12.8px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #0084ff; }
.products-hero__title { margin-bottom: 10px; font-size: 32px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.products-hero__sub { font-size: 14.5px; color: rgba(255, 255, 255, .55); }
.products-search {
  display: flex; align-items: center; gap: 12px;
  max-width: 770px; margin: 0 auto 48px; padding: 15px 25px;
  border-radius: 12px;
  background: #0a101f; border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .4);
}
.products-search:focus-within { border-color: rgba(59, 130, 246, .55); }
.products-search__input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font-size: 17.6px; }
.products-search__input:focus { outline: none; }
.products-search__input::placeholder { color: rgba(255, 255, 255, .4); }

/*───────────────────────────────────────────────
  FOOTER (snippets/nvx-footer.njk)
  Le pied n est plus une bande pleine largeur : c est une carte posee sur le
  fond du site, meme rayon et meme bordure que les autres blocs. Le calque
  `.nx-bg` reste visible tout autour, donc la page se termine sur une forme
  au lieu de s eteindre contre un bord.

  Deux halos flous (bleu en haut a gauche, ciel en bas) creusent le degrade de
  la carte. Purement decoratifs : hors du flux, sans evenement souris, et
  rognes par le `overflow: hidden` de la carte. `isolation` les borne a elle.

  Repartition 1.25fr / 2.6fr : la marque tient dans une colonne etroite et les
  liens se partagent le reste. Une marque a 50 % donnerait un pied bancal.
───────────────────────────────────────────────*/
.nvx-footer { padding: 28px 80px 40px; }
.nvx-footer__card {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1440px; margin: 0 auto; padding: 44px 44px 26px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.8rem;
  /* Meme marine que le fond du site (#0b1320), et TRANSLUCIDE : la carte ne
     peint qu un voile leger, donc les nappes de lumiere de `.nx-bg` passent a
     travers et elle se fond dans la page au lieu de former une dalle plus
     sombre. Une premiere version descendait a .92 d opacite vers un quasi-noir
     (6,10,19) : plus sombre que le bas de la page elle-meme. */
  background-image: linear-gradient(180deg, rgba(22, 36, 62, .46), rgba(14, 24, 42, .34));
  box-shadow: 0 28px 100px -78px rgba(59, 130, 246, .7);
}
.nvx-footer__card::before,
.nvx-footer__card::after {
  content: ''; position: absolute; z-index: -1;
  width: 256px; height: 256px; border-radius: 50%;
  filter: blur(64px); pointer-events: none;
}
.nvx-footer__card::before { top: -96px;    left: -96px; background-color: rgba(59, 130, 246, .16); }
.nvx-footer__card::after  { bottom: -112px; right: 25%; background-color: rgba(56, 189, 248, .08); }

.nvx-footer__top { display: grid; grid-template-columns: 1.25fr 2.6fr; gap: 34px; margin-bottom: 34px; }

/* `auto-fit` : le nombre de colonnes vient des reglages du theme, deux ou
   quatre, elles se partagent la largeur sans laisser de trou. */
.nvx-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 28px; }

.nvx-footer__logo { display: inline-flex; align-items: center; margin-bottom: 18px; }
/* La marque FS est large (127x72) : on fixe la hauteur, la largeur suit. */
.nvx-footer__logo-img { display: block; height: 44px; width: auto; }
.nvx-footer__tag { max-width: 20rem; font-size: 14px; line-height: 24px; color: var(--nx-muted); }

/* Pastilles sociales : meme grammaire que la pilule « View all ». */
.nvx-footer__socials { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.nvx-footer__social {
  display: inline-flex; align-items: center; padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px;
  background-color: rgba(255, 255, 255, .035);
  font-size: 12px; font-weight: 600; color: var(--nx-muted);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease !important;
}
.nvx-footer__social:hover { color: var(--nx-acc-hi); border-color: rgba(56, 189, 248, .5); background-color: rgba(59, 130, 246, .1); }

/* Titres de colonne clairs et lourds, liens en retrait : c est le contraste
   entre les deux qui donne la hierarchie, pas la taille. */
.nvx-footer__col-title {
  margin: 0 0 14px; font-size: 12px; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 247, 255, .9);
}
.nvx-footer__links { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.nvx-footer__links a { font-size: 14px; line-height: 20px; color: var(--nx-muted); transition: color .2s ease !important; }
.nvx-footer__links a:hover { color: var(--nx-acc-hi); }

.nvx-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.nvx-footer__copy { font-size: 13px; color: rgba(255, 255, 255, .3); }

/* Cryptos acceptees, aux couleurs de marque. Elles se lisent a 80 %, et
   s allument toutes ensemble quand on survole la rangee. */
.nvx-footer__pay { display: flex; align-items: center; gap: 14px; }
.nvx-footer__coin { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; opacity: .8; transition: opacity .2s ease !important; }
.nvx-footer__pay:hover .nvx-footer__coin { opacity: 1; }
.nvx-footer__coin svg { display: block; width: 100%; height: 100%; }

@media (max-width: 1439px) {
  .nvx-footer { padding: 28px 40px 40px; }
  .nvx-footer__card { padding: 40px 36px 24px; }
}
@media (max-width: 1023px) {
  .nvx-footer { padding: 24px 24px 32px; }
  .nvx-footer__card { padding: 34px 26px 22px; border-radius: 1.5rem; }
  .nvx-footer__top { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 639px) {
  .nvx-footer { padding: 20px 16px 24px; }
  .nvx-footer__card { padding: 28px 20px 20px; border-radius: 1.25rem; }
  .nvx-footer__top { gap: 28px; }
  .nvx-footer__brand { text-align: center; }
  .nvx-footer__tag { margin-left: auto; margin-right: auto; }
  .nvx-footer__socials { justify-content: center; }
  .nvx-footer__bottom { flex-direction: column; text-align: center; gap: 12px; }
}

/*═══════════════════════════════════════════════════════════════════════════
  CUSTOMER SIGN-IN
  ---------------------------------------------------------------------------
  script.js builds the panel (email, then a 6-digit code — SellAuth hosts no
  login page of its own). The base style.css only dresses a narrow one-column
  box, so the brand column it also renders was unstyled here: everything below
  is the two-column design, in this theme's navy palette.

  The same panel serves twice: floating over the page as a modal, and as the
  page itself on /?login=1 — the URL SellAuth bounces every /customer/* visit
  to. `.lgn--page` is what turns the fixed overlay into normal page flow.
═══════════════════════════════════════════════════════════════════════════*/
.lgn__panel {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0;
  width: 100%; max-width: 880px; padding: 0; overflow: hidden;
  background: var(--nx-card);
  border: 1px solid var(--nx-line-2); border-radius: 22px;
  box-shadow: inset 0 1px 0 0 rgba(245, 247, 255, .06), 0 40px 120px -60px rgba(59, 130, 246, .9);
}

/* ── Left column: what the account is for ── */
.lgn__brand {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 42px 38px;
  border-right: 1px solid var(--nx-line-2);
  background: linear-gradient(165deg, rgba(59, 130, 246, .14), rgba(8, 13, 24, .2) 62%);
}
.lgn__brand::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 30% 32%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 78% 62% at 30% 32%, #000, transparent 78%);
}
.lgn__brand::after {
  content: ''; position: absolute; z-index: -1; left: -18%; top: -14%;
  width: 78%; height: 62%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(59, 130, 246, .3), transparent 68%);
}

.lgn__eyebrow {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, .35); background: rgba(59, 130, 246, .12);
  color: var(--nx-acc-hi);
  font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
}
.lgn__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 10px currentColor;
  animation: nxBlink 2.4s ease-in-out infinite !important;
}

.lgn__hero {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -.04em; line-height: .98; color: #fff;
}
.lgn__hero-accent {
  background-image: var(--nx-grad-line);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* The last glyph's ink overflows the box background-clip paints. */
  padding: 0 .1em 0 .04em; margin: 0 -.1em 0 -.04em;
}
.lgn__hero-sub { margin: -6px 0 0; max-width: 30ch; font-size: 13.5px; line-height: 1.6; color: var(--nx-muted); }

.lgn__perks { display: flex; flex-direction: column; gap: 13px; margin: 4px 0 0; padding: 0; list-style: none; }
.lgn__perk { display: flex; align-items: center; gap: 12px; }
.lgn__perk-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, .28); background: rgba(59, 130, 246, .11);
  color: var(--nx-acc-hi);
}
.lgn__perk-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lgn__perk-text b { font-size: 13px; font-weight: 700; color: #fff; }
.lgn__perk-text span { font-size: 12px; line-height: 1.45; color: var(--nx-muted); }

/* ── Right column: the form ── */
.lgn__main { display: flex; flex-direction: column; justify-content: center; padding: 42px 38px; }
.lgn__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 25px; letter-spacing: -.03em; color: #fff; }
.lgn__sub { margin: 0 0 22px; font-size: 13px; line-height: 1.6; color: var(--nx-muted); }
.lgn__sub b { color: #fff; font-weight: 700; }
.lgn__form { gap: 14px; }
.lgn__field { display: flex; flex-direction: column; gap: 7px; }
.lgn__label { font-size: 12px; font-weight: 700; color: rgba(245, 247, 255, .78); }
.lgn__input {
  min-height: 46px; padding: 0 14px; border-radius: var(--nx-r-sm);
  border: 1px solid var(--nx-line-2); background: rgba(8, 13, 24, .8);
  color: #fff; font-family: var(--font-ui); font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.lgn__input::placeholder { color: rgba(255, 255, 255, .28); }
.lgn__input:focus {
  outline: none; border-color: rgba(59, 130, 246, .55); background: rgba(8, 13, 24, .95);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
}
.lgn__input--code { letter-spacing: .55em; text-align: center; font-size: 20px; font-weight: 700; padding-left: .55em; font-variant-numeric: tabular-nums; }
.lgn__error {
  display: flex; gap: 8px; padding: 10px 12px; border-radius: var(--nx-r-sm);
  border: 1px solid rgba(248, 113, 113, .32); background: rgba(248, 113, 113, .1);
  font-size: 12.5px; line-height: 1.5; color: #fca5a5;
}
.lgn__submit { width: 100%; justify-content: center; margin-top: 4px; }
.lgn__back { align-self: center; margin-top: 14px; background: none; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--nx-muted); }
.lgn__back:hover { color: #fff; }
.lgn__foot { margin: 18px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .35); }
.lgn__close { top: 14px; right: 16px; z-index: 2; }

/* ── Page mode: the overlay becomes ordinary page flow ── */
.lgn--page {
  position: static; inset: auto; z-index: auto;
  min-height: 58vh; padding: 132px 16px 90px; opacity: 1;
}
.lgn--page .lgn__panel { margin: 0 auto; }

/* Below 860px the brand column would push the form — the actual task — under
   the fold, so it steps out. */
@media (max-width: 860px) {
  .lgn__panel { grid-template-columns: 1fr; max-width: 420px; }
  .lgn__brand { display: none; }
  .lgn__main { padding: 34px 26px 30px; }
  .lgn--page { padding: 112px 14px 70px; }
}

/*───────────────────────────────────────────────
  SOCIAL PROOF TOAST
───────────────────────────────────────────────*/
.sa-social-proof-item { background: #0d1a2e; border-color: rgba(59, 130, 246, .25); }

/*───────────────────────────────────────────────
  PROMO MODAL — "copy this code" popup, shown once a day.
───────────────────────────────────────────────*/
.promo-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; }
.promo-modal[hidden] { display: none; }
.promo-modal__overlay { position: absolute; inset: 0; background: rgba(4, 6, 12, .72); backdrop-filter: blur(3px); }
.promo-modal__card {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(rgba(15, 23, 42, .96), rgba(6, 10, 22, .98));
  border: 1px solid rgba(59, 130, 246, .35);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7), 0 0 60px rgba(59, 130, 246, .12);
  animation: promoPop .32s cubic-bezier(.16, 1, .3, 1) !important;
}
@keyframes promoPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.promo-modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(4, 6, 12, .4); border: 1px solid rgba(255, 255, 255, .12); color: #fff;
}
.promo-modal__close:hover { background: rgba(4, 6, 12, .6); }
.promo-modal__banner {
  position: relative; overflow: hidden;
  padding: 38px 24px 32px; text-align: center;
  background: linear-gradient(150deg, #14213b 0%, #0d1830 55%, #0a1226 100%);
}
.promo-modal__banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #22c55e, #38bdf8, #3b82f6); }
.promo-modal__glow { position: absolute; border-radius: 50%; filter: blur(30px); pointer-events: none; }
.promo-modal__glow--a { width: 180px; height: 180px; top: -60px; left: -40px; background: rgba(59, 130, 246, .35); }
.promo-modal__glow--b { width: 160px; height: 160px; bottom: -60px; right: -30px; background: rgba(56, 189, 248, .28); }
.promo-modal__sparkles { position: absolute; inset: 0; pointer-events: none; }
.promo-modal__spark {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .8;
  top: calc(10% + (var(--n) * 9%));
  left: calc((var(--n) * 53) % 100 * 1%);
  animation: promoTwinkle calc(1.6s + var(--n) * .3s) ease-in-out calc(var(--n) * -.4s) infinite !important;
}
@keyframes promoTwinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.promo-modal__eyebrow { position: relative; z-index: 1; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--nx-acc-hi); }
.promo-modal__title { position: relative; z-index: 1; font-size: 28px; font-weight: 800; letter-spacing: -.01em; color: #fff; font-style: italic; text-transform: uppercase; }
.promo-modal__body { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 26px 26px; text-align: center; }
.promo-modal__sub { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.promo-modal__code {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 16px; border-radius: 12px;
  background: rgba(59, 130, 246, .06); border: 1px dashed rgba(59, 130, 246, .45);
}
.promo-modal__code-text { font-size: 17px; font-weight: 800; letter-spacing: .12em; color: #fff; }
.promo-modal__code-action { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--nx-acc-hi); }
.promo-modal__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 46px; border-radius: 12px;
  background: linear-gradient(180deg, #1a8cff, #0b6fe0); color: #fff;
  font-size: 14.5px; font-weight: 700;
  box-shadow: 0 12px 28px -12px rgba(26, 140, 255, .9);
}
.promo-modal__cta:hover { color: #fff; filter: brightness(1.08); }
.promo-modal__later { font-size: 13px; color: rgba(255, 255, 255, .55); }
.promo-modal__later:hover { color: #fff; }
.promo-modal__trust { display: flex; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.promo-modal__trust span { display: inline-flex; align-items: center; gap: 5px; }
.promo-modal__trust svg { color: var(--nx-acc-hi); }

/*───────────────────────────────────────────────
  PRODUCT PAGE (templates/product.njk), measured off nivexshop.xyz/product/*
───────────────────────────────────────────────*/
.nvp { max-width: 1452px; margin: 0 auto; padding: 124px 24px 90px; }
.nvp-crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; color: rgba(255, 255, 255, .55); }
.nvp-crumb a { color: rgba(255, 255, 255, .6); }
.nvp-crumb a:hover { color: #fff; }
.nvp-crumb__sep { color: rgba(255, 255, 255, .3); }
.nvp-crumb__cur {
  max-width: 60vw; padding: 2px 10px; border-radius: 999px;
  background: rgba(4, 54, 148, .15); border: 1px solid rgba(4, 54, 148, .35);
  font-size: 13px; color: #7ec8ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* One panel holds both columns: 1404px wide at 1920, 762px gallery column,
   544px purchase column. */
.nvp-upper { padding: 32px; border-radius: 32px; background: rgba(4, 54, 148, .08); border: 1px solid rgba(4, 54, 148, .28); }
.nvp-grid { display: grid; grid-template-columns: minmax(0, 762fr) minmax(0, 544fr); gap: 34px; align-items: start; }

.nvp-visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px;
  background: #0a101f;
}
.nvp-count {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(4, 10, 26, .7); font-size: 12px; font-weight: 700; color: #fff;
}
.nvp-visual__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .16s ease !important; }
.nvp-visual__img.pdx-fade { opacity: 0; }
.nvp-visual__ph { padding: 24px; font-size: clamp(28px, 4vw, 48px); font-weight: 800; text-align: center; color: rgba(255, 255, 255, .18); }
.nvp-arrow {
  position: absolute; top: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
  background: rgba(4, 10, 26, .55); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background-color .2s ease, border-color .2s ease !important;
}
.nvp-arrow:hover { background: rgba(4, 54, 148, .85); border-color: rgba(76, 141, 255, .6); }
.nvp-arrow--prev { left: 14px; }
.nvp-arrow--next { right: 14px; }
.nvp-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.nvp-thumb.pdx-thumb {
  width: 100px; height: 66px; aspect-ratio: auto; padding: 0; overflow: hidden;
  border-radius: 12px; border: 2px solid transparent; background: #0a101f; box-shadow: none;
  opacity: .55; cursor: pointer;
  transition: opacity .2s ease, border-color .2s ease !important;
}
.nvp-thumb.pdx-thumb:hover { opacity: .85; transform: none; }
.nvp-thumb.pdx-thumb--active { opacity: 1; border-color: #3b82f6; }
.nvp-thumb img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }

.nvp-desccard { margin-top: 40px; padding: 26px; border-radius: 22px; background: rgba(4, 54, 148, .12); border: 1px solid rgba(4, 54, 148, .32); }
.nvp-tabs { display: flex; gap: 10px; margin-bottom: 24px; }
.nvp-tab {
  height: 42px; padding: 0 20px; border-radius: 999px;
  background: transparent; border: 2px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .75);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease !important;
}
.nvp-tab:hover { color: #fff; border-color: rgba(255, 255, 255, .32); }
.nvp-tab.is-active { background: rgba(4, 54, 148, .1); border-color: #043694; color: #4c8dff; }
.nvp-desc { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .82); overflow-wrap: anywhere; }
.nvp-desc p, .nvp-desc ul, .nvp-desc ol { margin: 0 0 8px; }
.nvp-desc ul, .nvp-desc ol { padding-left: 26px; }
.nvp-desc li { margin-bottom: 8px; font-size: 15px; }
.nvp-desc a { color: #4c8dff; }
.nvp-desc img { border-radius: 12px; }
.nvp-desc strong, .nvp-desc b { font-weight: 700; color: #fff; }
.nvp-desc h1, .nvp-desc h2, .nvp-desc h3, .nvp-desc h4 { margin: 14px 0 6px; font-weight: 500; line-height: 1.12; color: #f5f5f5; }
.nvp-desc h1 { margin-top: 0; font-size: 36px; }
.nvp-desc h2 { font-size: 30px; }
.nvp-desc h3 { font-size: 24px; }
.nvp-desc h4 { font-size: 20px; }
.nvp-desc--empty { color: rgba(255, 255, 255, .45); }
.nvp-support p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .75); }
.nvp-support__cta {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; margin-top: 6px; padding: 0 22px; border-radius: 14px;
  background: var(--nx-discord); color: #fff; font-size: 14.5px; font-weight: 600;
}
.nvp-support__cta:hover { color: #fff; filter: brightness(1.08); }

.nvp-title { margin: 0 0 20px; font-size: 38px; font-weight: 700; line-height: 1.1; letter-spacing: -1.14px; color: #f5f5f5; }

.nvp-buy { padding: 26px; border-radius: 22px; background: rgba(4, 54, 148, .12); border: 1px solid rgba(4, 54, 148, .32); }
.nvp-buy__title { margin: 0 0 14px; font-size: 25.6px; font-weight: 800; letter-spacing: -.512px; text-align: center; color: #fff; }
.nvp-plans { display: grid; gap: 10px; }
.nvp-buy .nvp-plan {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  width: 100%; padding: 18px 20px; border-radius: 18px;
  background: transparent; border: 2px solid rgba(4, 54, 148, .35); color: #f5f5f5;
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease !important;
}
.nvp-buy .nvp-plan:hover { background: rgba(4, 54, 148, .08); border-color: rgba(4, 54, 148, .7); }
.nvp-buy .nvp-plan.pdx-plan--active { background: rgba(4, 54, 148, .14); border-color: #043694; }
.nvp-buy .nvp-plan:disabled { opacity: .5; cursor: not-allowed; }
.nvp-buy .nvp-plan--static { cursor: default; }
.nvp-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.nvp-buy .nvp-plan__name { font-size: 15px; font-weight: 600; letter-spacing: -.3px; color: #f5f5f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nvp-plan__stock { flex-shrink: 0; font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.nvp-plan__flag { flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: #f87171; }
.nvp-plan__price { align-self: flex-start; padding: 4px 8px; border-radius: 8px; font-size: 22px; font-weight: 700; color: #4c9bff; }

.nvp-lbl { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #f4f4f4; }
.nvp-qty { margin-top: 18px; }
.nvp-qty__ctrl {
  display: flex; align-items: stretch; height: 46px; overflow: hidden; border-radius: 14px;
  background: rgba(4, 54, 148, .06); border: 1px solid rgba(4, 54, 148, .3);
}
.nvp-qty__btn { width: 42px; border: 0; background: rgba(4, 54, 148, .16); color: #f5f5f5; font-size: 18px; cursor: pointer; transition: background-color .2s ease !important; }
.nvp-qty__btn:hover:not(:disabled) { background: rgba(4, 54, 148, .38); }
.nvp-qty__btn:disabled { opacity: .45; cursor: not-allowed; }
.nvp-qty__val { display: flex; flex: 1; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; color: #f5f5f5; }

.nvp-buy .pdx-vol { margin-top: 14px; }

/* Addon cards: the checkbox stays in the DOM for script.js; the green
   "Add +" pill is its visible face. */
.nvp-addons { display: grid; gap: 10px; margin-top: 18px; }
.nvp-addons .nvp-lbl { margin-bottom: 0; }
.nvp-buy .nvp-addon__body {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-radius: 16px;
  background: rgba(4, 54, 148, .06); border: 1px solid rgba(4, 54, 148, .28);
}
.nvp-buy .pdx-addon__cb:checked + .nvp-addon__body { background: rgba(25, 135, 84, .08); border-color: rgba(25, 135, 84, .55); }
.nvp-buy .pdx-addon__cb:focus-visible + .nvp-addon__body .nvp-addon__add { outline: 2px solid #4c8dff; outline-offset: 2px; }
.nvp-addon__img { flex-shrink: 0; width: 54px; height: 54px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); object-fit: cover; }
.nvp-addon__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.nvp-buy .pdx-addon__name { font-size: 16px; font-weight: 500; color: #f5f5f5; }
.nvp-addon__desc { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .58); }
.nvp-buy .pdx-addon__price { flex-shrink: 0; font-size: 16px; font-weight: 500; color: #f5f5f5; }
.nvp-addon__add {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  min-width: 112px; height: 36px; padding: 0 14px; border-radius: 12px;
  background: #198754; border: 1px solid #198754; color: #fff; font-size: 14px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease !important;
}
.nvp-addon__add::before { content: 'Add +'; }
.nvp-addon__add:hover { background: #1e9e63; }
/* Une fois ajoute, le bouton devient l action de RETRAIT, en rouge. L etat
   precedent (« Added ✓ », sur fond transparent) decrivait l etat au lieu
   d offrir la sortie : il fallait deviner qu un second clic enlevait l option.
   « Remove × » dit ce que fait le clic, pas ou on en est. */
.pdx-addon__cb:checked + .nvp-addon__body .nvp-addon__add {
  background: #c2334a; border-color: #c2334a; color: #fff;
}
.pdx-addon__cb:checked + .nvp-addon__body .nvp-addon__add::before { content: 'Remove ×'; }
.pdx-addon__cb:checked + .nvp-addon__body .nvp-addon__add:hover { background: #d43d55; }

.nvp-total { display: flex; flex-direction: column; margin-top: 20px; }
.nvp-total__lbl { font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, .6); }
.nvp-total__val { font-size: 28px; font-weight: 800; line-height: 1.2; color: #3b82f6; }

.nvp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.nvp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 16px; border-radius: 18px;
  font: inherit; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease !important;
}
/* Dark-blue label on a dark card: that's how the reference ships it. */
.nvp-btn--cart { background: rgba(4, 54, 148, .1); border: 2px solid #043694; color: #043694; }
.nvp-btn--cart:hover:not(:disabled) { background: rgba(4, 54, 148, .25); color: #4c8dff; }
.nvp-btn--buy { background: #043694; border: 2px solid #043694; }
.nvp-btn--buy:hover:not(:disabled) { filter: brightness(1.2); }
.nvp-btn:disabled { opacity: .45; cursor: not-allowed; }

.nvp-sec { margin-top: 70px; }
.nvp-sec__hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.nvp-sec__title { margin: 0; font-size: 28px; font-weight: 600; color: #fff; }
.nvp-sec__link { font-size: 14px; font-weight: 600; color: #4c8dff; }

@media (max-width: 1100px) {
  .nvp-grid { grid-template-columns: 1fr; gap: 30px; }
  .nvp-title { font-size: 30px; }
}
@media (max-width: 560px) {
  .nvp { padding: 104px 12px 60px; }
  .nvp-upper { padding: 14px; border-radius: 22px; }
  .nvp-buy, .nvp-desccard { padding: 18px; }
  .nvp-desc h1 { font-size: 28px; }
  .nvp-addon__add { min-width: 84px; }
  .nvp-actions { grid-template-columns: 1fr; }
  .nvp-thumb.pdx-thumb { width: 76px; height: 50px; }
}

/*───────────────────────────────────────────────
  PURCHASE TOAST (snippets/social-proof-toast.njk)
  `backwards` fill only: a forwards fill would pin opacity/transform and
  stop the .is-out fade from ever showing.
───────────────────────────────────────────────*/
@keyframes nxToastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.nvx-toast {
  position: fixed; left: 20px; bottom: 20px; z-index: 150;
  max-width: 340px; padding: 12px 40px 12px 12px; border-radius: 14px;
  background: #0a1426; border: 1px solid rgba(59, 130, 246, .28);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6);
  animation: nxToastIn .4s ease backwards !important;
  transition: opacity .4s ease, transform .4s ease !important;
}
.nvx-toast[hidden], .nvx-toast__item[hidden] { display: none; }
.nvx-toast.is-out { opacity: 0; transform: translateY(12px); }
.nvx-toast__item { display: flex; align-items: center; gap: 12px; }
.nvx-toast__img { flex-shrink: 0; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.nvx-toast__img--empty { display: flex; align-items: center; justify-content: center; background: rgba(59, 130, 246, .14); color: var(--nx-acc-hi); }
.nvx-toast__img--empty svg { width: 22px; height: 22px; }
.nvx-toast__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.nvx-toast__name { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nvx-toast__meta { display: inline-flex; align-items: center; gap: 4px; }
.nvx-toast__meta svg { width: 13px; height: 13px; color: var(--nx-ok); }
.nvx-toast__meta b { font-weight: 600; color: #4ade80; }
.nvx-toast__close {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: none; color: rgba(255, 255, 255, .45); cursor: pointer;
}
.nvx-toast__close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nvx-toast__close svg { width: 14px; height: 14px; }
@media (max-width: 560px) { .nvx-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/*═══════════════════════════════════════════════════════════════════════════
  MOTION
  ---------------------------------------------------------------------------
  Every animation here carries !important on a class selector: style.css
  flattens all animation and transition durations to .001ms under
  `prefers-reduced-motion`, which the shop owner's machine reports. Same
  importance, higher specificity, so these keep running.

  Only `transform` and `opacity` are animated (plus two text-shadows), so the
  compositor does the work and the page stays smooth.
═══════════════════════════════════════════════════════════════════════════*/

@keyframes nxAurora {
  0%, 100% { transform: translate3d(-4%, 0, 0) scale(1); }
  50%      { transform: translate3d(4%, 3%, 0) scale(1.08); }
}
@keyframes nxGridDrift { to { transform: translate3d(80px, 80px, 0); } }
@keyframes nxLetterRise {
  from { opacity: 0; transform: translateY(.5em) rotateX(55deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes nxShine {
  from { transform: translateX(-140%) skewX(-18deg); }
  to   { transform: translateX(240%) skewX(-18deg); }
}
@keyframes nxScan {
  0%   { transform: translateY(-120%); opacity: 0; }
  15%  { opacity: .5; }
  100% { transform: translateY(560%); opacity: 0; }
}
@keyframes nxValGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(96, 165, 250, 0); }
  50%      { text-shadow: 0 0 18px rgba(96, 165, 250, .55); }
}

/* ── Hero background layers ── */
.hero-aurora {
  position: absolute; top: -200px; left: 50%; z-index: 0;
  width: 900px; height: 900px; margin-left: -450px;
  border-radius: 50%; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, .3), rgba(56, 189, 248, .12) 45%, transparent 70%);
  animation: nxAurora 26s ease-in-out infinite !important;
}
.hero-grid-lines { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .16; }
.hero-grid-lines::before {
  content: ''; position: absolute; inset: -80px;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: nxGridDrift 16s linear infinite !important;
}

/* ── Showcase card ──
   At rest the card does not move. While the pointer is on it, JS drives the
   transform frame by frame (`.is-tilting` drops the transition, which would
   otherwise smear the motion behind the pointer); on leave the transition
   comes back and eases the card home to its CSS rest tilt. */
.hwin { transition: transform .5s cubic-bezier(.16, 1, .3, 1) !important; }
.hwin.is-tilting { transition: none !important; }
.hwin__glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle 220px at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .16), transparent 60%);
  opacity: 0; transition: opacity .2s ease !important;
}
/* The white sweep is a hover reward too: parked off the top of the card the
   rest of the time, and played once each time the pointer arrives. */
.hwin::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18%; z-index: 2;
  pointer-events: none; transform: translateY(-120%);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .16), transparent);
}
.hwin:hover::after { animation: nxScan 1.4s ease-out !important; }
.hwin__icon { animation: nxFloatY 6s ease-in-out infinite !important; }

/* ── Logo mark ──
   No strokes at all: two light waves radiate out of the disc, offset by half
   a cycle so one is always travelling. Each wave is a radial gradient whose
   edges fade to transparent, so nothing reads as a drawn line the way the
   dashed ring and the thin arc did. The disc itself breathes a halo.
   Hovering the card tightens the rhythm. */
@keyframes nxWave {
  0%   { transform: scale(.85); opacity: 0; }
  18%  { opacity: .9; }
  100% { transform: scale(1.75); opacity: 0; }
}
@keyframes nxHalo {
  0%, 100% { box-shadow: 0 0 22px rgba(59, 130, 246, .18), inset 0 0 18px rgba(59, 130, 246, .12); }
  50%      { box-shadow: 0 0 40px rgba(96, 165, 250, .42), inset 0 0 26px rgba(96, 165, 250, .22); }
}

.hwin__ring {
  border: 0;
  -webkit-mask: none; mask: none;
  background: radial-gradient(circle at 50% 50%, transparent 54%, rgba(96, 165, 250, .5) 70%, rgba(56, 189, 248, .12) 82%, transparent 90%);
  animation: nxWave 3.4s cubic-bezier(.2, .6, .3, 1) infinite !important;
}
.hwin__icon::before {
  content: ''; position: absolute; inset: 0; border: 0; border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, transparent 54%, rgba(96, 165, 250, .4) 70%, rgba(56, 189, 248, .1) 82%, transparent 90%);
  animation: nxWave 3.4s cubic-bezier(.2, .6, .3, 1) 1.7s infinite !important;
}
.hwin__icon::after { content: none; }
.hwin__circle { animation: nxHalo 4.5s ease-in-out infinite !important; }

.hwin:hover .hwin__ring,
.hwin:hover .hwin__icon::before { animation-duration: 2.1s !important; }
.hwin:hover .hwin__circle { animation-duration: 2.6s !important; }
.hwin__val { animation: nxValGlow 3.6s ease-in-out infinite !important; }
.hwin:hover .hwin__track { animation-play-state: paused !important; }

/* ── Headline letters ── */
.nx-line { display: inline-block; }
.nx-letter { display: inline-block; transform-origin: 50% 100%; animation: nxLetterRise .7s cubic-bezier(.16, 1, .3, 1) backwards !important; }
.hero--split .hero__title { perspective: 600px; }

/* ── A light crosses the primary buttons on hover ── */
.hero-btn--primary, .hwin__btn--shop, .btn-primary { position: relative; overflow: hidden; }
.hero-btn--primary::after, .hwin__btn--shop::after, .btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-140%) skewX(-18deg);
}
.hero-btn--primary:hover::after, .hwin__btn--shop:hover::after, .btn-primary:hover::after {
  animation: nxShine .85s cubic-bezier(.16, 1, .3, 1) !important;
}

/* ── Cards: lift, image zoom and a sweep ── */
.product-card, .cat-card { transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease !important; }
.product-card:hover, .cat-card:hover { transform: translateY(-6px); }
.nvx-tile__media img, .cat-card img { transition: transform .5s ease !important; }
.nvx-tile:hover .nvx-tile__media img { transform: scale(1.09) rotate(.6deg); }
.cat-card:hover img { transform: scale(1.08); }
.nvx-tile__media, .cat-card { position: relative; overflow: hidden; }
.nvx-tile__media::after, .cat-card::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  transform: translateX(-140%) skewX(-18deg);
}
.nvx-tile:hover .nvx-tile__media::after, .cat-card:hover::after {
  animation: nxShine .9s cubic-bezier(.16, 1, .3, 1) !important;
}

/* ── Navbar: the active pill grows an underline ── */
.nav__links a { position: relative; }
.nav__links a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--nx-grad-line);
  transition: left .22s ease, right .22s ease !important;
}
.nav__links a:hover::after, .nav__links a.is-current::after { left: 15px; right: 15px; }
.nav__cart svg, .nav__search svg { transition: transform .22s ease !important; }
.nav__cart:hover svg, .nav__search:hover svg { transform: scale(1.15) rotate(-6deg); }

/* ── Feature icons breathe, support avatar floats ── */
.feat-icon { animation: nxFloatY 5.5s ease-in-out infinite, nxIconPulse 4s ease-in-out infinite !important; }
.features-grid > *:nth-child(2) .feat-icon { animation-delay: -1.8s, -1s !important; }
.features-grid > *:nth-child(3) .feat-icon { animation-delay: -3.4s, -2s !important; }


/*═══════════════════════════════════════════════════════════════════════════
  ESPACE CLIENT — LE PANEL
  ---------------------------------------------------------------------------
  POURQUOI CE BLOC EXISTE. Les gabarits et le script du panel client avaient
  ete repris depuis l ancien theme, mais PAS leur feuille de style : sur les
  142 classes utilisees par /customer/*, 97 n avaient aucune regle nulle part.
  Le tableau de bord s affichait donc en HTML brut — d ou l icone de marque
  etiree a 1195 px de large, un SVG sans dimension prenant toute la page.

  Deux familles de classes vivent ici, et c est voulu :
    .cdash-*  le panel lui-meme (rail, cartes, courbe, raccourcis)
    .acct-*   le contenu des pages Commandes / Solde / Tickets, dont le
              squelette est deja dans style.css ; on ne complete que ce qui
              manquait (liste de commandes, formulaire de recharge).

  ANIMATIONS. style.css ecrase toute animation a .001ms sous
  `prefers-reduced-motion: reduce`, et la machine du proprietaire annonce cette
  preference : les regles animees portent donc !important sur un selecteur de
  classe (meme importance, specificite superieure).

  RIEN N EST MASQUE PAR DEFAUT. L entree en cascade ne se declenche que quand
  custom.js pose `.is-in`. Si le script casse, si l onglet est en arriere-plan
  ou si l IntersectionObserver ne se declenche jamais, la page reste lisible :
  on anime vers l etat naturel au lieu de partir d un etat cache.
═══════════════════════════════════════════════════════════════════════════*/

/*── Coquille : meme grille pour le tableau de bord et les autres pages ────*/
.cdash,
.acct {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  max-width: 1220px;
  margin: 0 auto;
  padding: 112px 28px 88px;
}

.cdash-main,
.acct-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/*── Rail ──────────────────────────────────────────────────────────────────*/
.cdash-rail { position: sticky; top: 104px; }

.cdash-rail__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px 14px;
  border-radius: var(--nx-r);
  border: 1px solid var(--nx-line);
  background: linear-gradient(180deg, var(--nx-card-2) 0%, var(--nx-card) 100%);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .9);
}

.cdash-rail__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 6px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--nx-line);
}
/* La marque est une image bornee des deux cotes : c est le SVG sans hauteur
   qui gonflait la page a 1195 px. */
.cdash-rail__brand-mark {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 10px;
  background: rgba(59, 130, 246, .12);
  border: 1px solid var(--nx-line-2);
  overflow: hidden;
}
.cdash-rail__brand-mark img,
.cdash-rail__brand-mark svg { width: 26px; height: 26px; object-fit: contain; }

.cdash-rail__brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cdash-rail__brand-text b {
  font-size: 13.5px; font-weight: 700; color: var(--nx-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cdash-rail__brand-text em {
  font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .42);
}

.cdash-rail__label {
  padding: 12px 8px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .3);
}

.cdash-rail__nav { display: flex; flex-direction: column; gap: 2px; }

.cdash-rail__item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--nx-r-sm);
  font-size: 13.5px; font-weight: 500;
  color: rgba(255, 255, 255, .58);
  transition: background .2s ease, color .2s ease, transform .2s ease !important;
}
.cdash-rail__item:hover { background: rgba(255, 255, 255, .05); color: var(--nx-fg); }
.cdash-rail__item:hover .cdash-rail__icon { transform: scale(1.1); }

.cdash-rail__item.is-active {
  background: rgba(59, 130, 246, .14);
  color: var(--nx-fg); font-weight: 600;
}
.cdash-rail__item.is-active .cdash-rail__icon { color: var(--nx-acc-hi); }

/* Le trait actif se deplie depuis le centre plutot que d apparaitre. */
.cdash-rail__bar {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: var(--nx-grad-line);
  transition: height .24s cubic-bezier(.2, .8, .2, 1) !important;
}
.cdash-rail__item.is-active .cdash-rail__bar { height: 20px; }
.cdash-rail__item:hover .cdash-rail__bar { height: 12px; }

.cdash-rail__icon {
  width: 17px; height: 17px; flex-shrink: 0;
  transition: transform .2s ease !important;
}
.cdash-rail__icon--discord { color: #8f9bff; }
.cdash-rail__icon--tg { color: #4ab3e8; }
.cdash-rail__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cdash-rail__out {
  width: 12px; height: 12px; margin-left: auto; flex-shrink: 0;
  color: rgba(255, 255, 255, .28);
}
.cdash-rail__item--ext:hover .cdash-rail__out { color: var(--nx-acc-hi); }

.cdash-rail__item.is-soon { opacity: .4; cursor: default; }
.cdash-rail__item.is-soon:hover { background: none; color: rgba(255, 255, 255, .58); }
.cdash-rail__soon {
  margin-left: auto; font-style: normal;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}

.cdash-rail__shop {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; padding: 9px 10px;
  border-radius: var(--nx-r-sm);
  border: 1px solid var(--nx-line);
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .6);
  transition: border-color .2s ease, color .2s ease, background .2s ease !important;
}
.cdash-rail__shop svg { width: 14px; height: 14px; }
.cdash-rail__shop:hover {
  border-color: var(--nx-line-3); color: var(--nx-fg);
  background: rgba(59, 130, 246, .08);
}

.cdash-rail__account {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--nx-line);
}
.cdash-rail__avatar {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: var(--nx-grad);
  font-size: 13px; font-weight: 800; color: #fff;
}
.cdash-rail__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cdash-rail__who b {
  font-size: 12.5px; font-weight: 700; color: var(--nx-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cdash-rail__who em {
  font-style: normal; font-size: 10.5px; color: rgba(255, 255, 255, .38);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*── Fil d Ariane ──────────────────────────────────────────────────────────*/
.cdash-crumb { display: flex; align-items: center; gap: 7px; }
.cdash-crumb a { display: flex; color: rgba(255, 255, 255, .35); transition: color .2s ease !important; }
.cdash-crumb a:hover { color: var(--nx-acc-hi); }
.cdash-crumb svg { width: 14px; height: 14px; }
.cdash-crumb__sep { width: 12px; height: 12px; color: rgba(255, 255, 255, .2); }
.cdash-crumb__here {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .62);
}

/*── En-tete ───────────────────────────────────────────────────────────────*/
.cdash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.cdash-head__text { min-width: 0; }
.cdash-head__title {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1.18;
  color: var(--nx-fg);
}
.cdash-head__sub { margin-top: 7px; font-size: 13.5px; color: rgba(255, 255, 255, .45); }

.cdash-head__bell {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--nx-line);
  background: var(--nx-card);
  color: rgba(255, 255, 255, .55);
  transition: color .2s ease, border-color .2s ease, transform .2s ease !important;
}
.cdash-head__bell svg { width: 17px; height: 17px; }
.cdash-head__bell:hover {
  color: var(--nx-fg); border-color: var(--nx-line-3); transform: translateY(-2px);
}

/*── Barre de periode ──────────────────────────────────────────────────────*/
.cdash-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.cdash-showing { font-size: 13px; color: rgba(255, 255, 255, .4); }
.cdash-showing b { color: rgba(255, 255, 255, .72); font-weight: 600; }

.cdash-tabs {
  display: flex; gap: 3px; padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--nx-line);
  background: var(--nx-card);
}
.cdash-tabs[hidden] { display: none; }
.cdash-tab {
  padding: 6px 13px; border: 0; border-radius: 999px; background: none;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: rgba(255, 255, 255, .45); cursor: pointer;
  transition: background .2s ease, color .2s ease !important;
}
.cdash-tab:hover { color: var(--nx-fg); }
.cdash-tab.is-active { background: rgba(59, 130, 246, .18); color: var(--nx-acc-hi); }

/*── Cartes de chiffres ────────────────────────────────────────────────────*/
.cdash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cdash-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cdash-stat {
  position: relative; overflow: hidden;
  padding: 17px 18px 16px;
  border-radius: var(--nx-r);
  border: 1px solid var(--nx-line);
  background: var(--nx-card);
  transition: border-color .25s ease, transform .25s ease !important;
}
/* Halo suivant le curseur : custom.js pose --cd-mx / --cd-my. */
.cdash-stat::after,
.cdash-short__card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(220px circle at var(--cd-mx, 50%) var(--cd-my, 0),
                              rgba(59, 130, 246, .13), transparent 70%);
  opacity: 0; transition: opacity .3s ease !important;
}
.cdash-stat:hover::after,
.cdash-short__card:hover::after { opacity: 1; }
.cdash-stat:hover { border-color: var(--nx-line-2); transform: translateY(-3px); }

.cdash-stat__top { display: flex; align-items: center; gap: 9px; }
.cdash-stat__chip {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  background: rgba(59, 130, 246, .12);
  color: var(--nx-acc-hi);
}
.cdash-stat__chip svg { width: 15px; height: 15px; }
.cdash-stat__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.cdash-stat__act {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--nx-acc-hi);
  transition: color .2s ease !important;
}
.cdash-stat__act:hover { color: #93c5fd; }

.cdash-stat__value {
  margin-top: 13px;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800; letter-spacing: -.8px; line-height: 1.1;
  color: var(--nx-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cdash-stat__sub { margin-top: 5px; font-size: 11.5px; color: rgba(255, 255, 255, .36); }

/*── Courbe ────────────────────────────────────────────────────────────────*/
.cdash-chart {
  padding: 20px 22px;
  border-radius: var(--nx-r);
  border: 1px solid var(--nx-line);
  background: var(--nx-card);
}
.cdash-chart__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.cdash-chart__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: var(--nx-fg);
}
.cdash-chart__title svg { width: 16px; height: 16px; color: var(--nx-acc-hi); }
.cdash-chart__sub { margin-top: 5px; font-size: 12px; color: rgba(255, 255, 255, .38); }
.cdash-chart__total { text-align: right; }
.cdash-chart__total b {
  display: block;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 800; letter-spacing: -.6px; color: var(--nx-fg);
}
.cdash-chart__total em {
  font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .34);
}

.cdash-chart__plot { margin-top: 16px; }
.cdash-chart__plot[hidden] { display: none; }

.cdash-chart__empty {
  display: flex; align-items: center; justify-content: center;
  margin-top: 16px; padding: 34px 20px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, .1);
  font-size: 12.5px; color: rgba(255, 255, 255, .34); text-align: center;
}
.cdash-chart__empty[hidden] { display: none; }

/* Le SVG est bati par custom.js ; ces regles l habillent. */
.cdash-chart__grid { stroke: rgba(255, 255, 255, .055); stroke-width: 1; }
.cdash-chart__area { stroke: none; }
.cdash-chart__line {
  fill: none; stroke: var(--nx-acc); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Points PLEINS, cercles dans la couleur d accent avec un halo de la couleur
   de la carte : sur l aire degradee, un point creux se confond avec le fond. */
.cdash-chart__dot { fill: var(--nx-acc-hi); stroke: var(--nx-card); stroke-width: 2; }
/* `text-anchor` est pose par le script sur chaque etiquette (start / middle /
   end) : sans ca les mois des deux extremites sortaient du cadre. */
.cdash-chart__tick {
  fill: rgba(255, 255, 255, .3); font-size: 10px; font-weight: 600;
}
/* Le maximum est un reperage, pas un titre : il reste discret. */
.cdash-chart__peak {
  fill: rgba(255, 255, 255, .28); font-size: 10.5px; font-weight: 600; text-anchor: end;
}

/* Trace progressif. La longueur reelle du chemin est mesuree par custom.js et
   posee dans --cd-len : une valeur en dur ferait sauter le depart. */
.cdash--anim .cdash-chart__line {
  stroke-dasharray: var(--cd-len, 1200);
  stroke-dashoffset: var(--cd-len, 1200);
  animation: cdDraw 1.1s cubic-bezier(.4, 0, .2, 1) forwards !important;
}
.cdash--anim .cdash-chart__area { animation: cdFade .8s .5s ease both !important; }
.cdash--anim .cdash-chart__dot {
  animation: cdPop .35s cubic-bezier(.2, 1.4, .4, 1) both !important;
  animation-delay: calc(.55s + var(--cd-i, 0) * 55ms) !important;
}
@keyframes cdDraw { to { stroke-dashoffset: 0; } }
@keyframes cdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cdPop  { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }

.cdash-chart__foot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--nx-line);
}
.cdash-metric { display: flex; flex-direction: column; gap: 4px; }
.cdash-metric__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255, 255, 255, .3);
}
.cdash-metric__value { font-size: 15px; font-weight: 700; color: var(--nx-fg); }

/*── Derniere commande ─────────────────────────────────────────────────────*/
.cdash-last__row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  border-radius: var(--nx-r);
  border: 1px solid var(--nx-line);
  background: var(--nx-card);
  transition: border-color .22s ease, background .22s ease, transform .22s ease !important;
}
.cdash-last__row:hover {
  border-color: var(--nx-line-2); background: var(--nx-card-2); transform: translateY(-2px);
}
.cdash-last__chip {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(59, 130, 246, .12); color: var(--nx-acc-hi);
}
.cdash-last__chip svg { width: 17px; height: 17px; }
.cdash-last__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cdash-last__text b { font-size: 13.5px; font-weight: 700; color: var(--nx-fg); }
.cdash-last__text em {
  font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, .38);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cdash-last__total {
  font-size: 15px; font-weight: 800; color: var(--nx-fg); white-space: nowrap;
}
.cdash-last__go { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, .26); }
.cdash-last__row:hover .cdash-last__go { color: var(--nx-acc-hi); }

.cdash-badge {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: capitalize; white-space: nowrap;
  background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .6);
}
.cdash-badge--completed, .cdash-badge--paid, .cdash-badge--active {
  background: rgba(34, 197, 94, .14); color: #4ade80;
}
.cdash-badge--pending, .cdash-badge--processing {
  background: rgba(245, 158, 11, .14); color: #fbbf24;
}
.cdash-badge--cancelled, .cdash-badge--failed, .cdash-badge--expired, .cdash-badge--refunded {
  background: rgba(239, 68, 68, .14); color: #f87171;
}

/*── Titres de section + raccourcis ────────────────────────────────────────*/
.cdash-navhead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-top: 12px;
}
.cdash-navhead__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nx-acc-hi);
}
.cdash-navhead__title {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; letter-spacing: -.4px; color: var(--nx-fg);
}
.cdash-navhead__note { font-size: 12px; color: rgba(255, 255, 255, .32); }

.cdash-short { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.cdash-short__card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 17px;
  border-radius: var(--nx-r);
  border: 1px solid var(--nx-line);
  background: var(--nx-card);
  transition: border-color .22s ease, background .22s ease, transform .22s ease !important;
}
.cdash-short__card:hover {
  border-color: var(--nx-line-2); background: var(--nx-card-2); transform: translateY(-3px);
}
.cdash-short__chip {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(59, 130, 246, .12); color: var(--nx-acc-hi);
  transition: transform .22s ease !important;
}
.cdash-short__card:hover .cdash-short__chip { transform: scale(1.08) rotate(-4deg); }
.cdash-short__chip svg { width: 17px; height: 17px; }
.cdash-short__chip--discord { background: rgba(88, 101, 242, .16); color: #a5aeff; }
.cdash-short__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cdash-short__text b { font-size: 13.5px; font-weight: 700; color: var(--nx-fg); }
.cdash-short__text em { font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, .38); }
.cdash-short__go {
  width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, .26);
  transition: transform .22s ease, color .22s ease !important;
}
.cdash-short__card:hover .cdash-short__go { color: var(--nx-acc-hi); transform: translateX(3px); }

/*═══ Pages du panel : ce qui manquait au systeme .acct ════════════════════*/

/* En-tete de page, aligne sur celui du tableau de bord. */
.acct-head__title {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800; letter-spacing: -.8px;
}
.acct-card, .acct-stat, .acct-table {
  background: var(--nx-card) !important;
  border-color: var(--nx-line) !important;
  border-radius: var(--nx-r) !important;
}

/*── Recharge du solde (/customer/balance) ─────────────────────────────────*/
.acct-topup { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.acct-topup__presets { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-topup__chip {
  height: 34px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--nx-line); background: var(--nx-card-2);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: rgba(255, 255, 255, .6); cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease !important;
}
.acct-topup__chip:hover, .acct-topup__chip.is-active {
  border-color: var(--nx-line-3); color: var(--nx-fg); background: rgba(59, 130, 246, .12);
}
.acct-topup__row { display: flex; gap: 9px; }
.acct-topup__input {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px;
  border-radius: var(--nx-r-sm);
  border: 1px solid var(--nx-line); background: var(--nx-bg);
  font-family: inherit; font-size: 14px; color: var(--nx-fg);
  transition: border-color .2s ease !important;
}
.acct-topup__input:focus { outline: none; border-color: var(--nx-line-3); }
.acct-topup__submit { flex-shrink: 0; }
.acct-topup__hint { font-size: 11.5px; color: rgba(255, 255, 255, .34); }
.acct-topup__error { font-size: 12.5px; color: #f87171; }
.acct-topup__error[hidden] { display: none; }

/*── Cascade d entree ──────────────────────────────────────────────────────
  On N ANIME QUE VERS L ETAT NATUREL : sans `.is-in`, l element est deja a sa
  place. Un `opacity: 0` par defaut aurait laisse la page blanche le jour ou
  l observateur ne se declenche pas (onglet en arriere-plan, par exemple).   */
.cdash--anim [data-cd-in].is-in {
  animation: cdIn .6s cubic-bezier(.2, .8, .2, 1) both !important;
  animation-delay: var(--cd-delay, 0ms) !important;
}
@keyframes cdIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.cdash--anim .cdash-rail__brand,
.cdash--anim .cdash-rail__label,
.cdash--anim .cdash-rail__item,
.cdash--anim .cdash-rail__account {
  animation: cdRailIn .5s cubic-bezier(.2, .8, .2, 1) both !important;
  animation-delay: calc(var(--cd-i, 0) * 45ms) !important;
}
@keyframes cdRailIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

/*── Responsive ────────────────────────────────────────────────────────────*/
@media (max-width: 1080px) {
  .cdash, .acct { grid-template-columns: 1fr; gap: 20px; padding-top: 100px; }

  /* Le rail devient une barre d onglets horizontale : un menu vertical
     pleine largeur pousserait le contenu sous la ligne de flottaison. */
  .cdash-rail { position: static; }
  .cdash-rail__inner { padding: 12px; }
  .cdash-rail__brand, .cdash-rail__label, .cdash-rail__account, .cdash-rail__shop { display: none; }
  .cdash-rail__nav {
    flex-direction: row; flex-wrap: nowrap;
    gap: 6px; overflow-x: auto; scrollbar-width: none;
  }
  .cdash-rail__nav::-webkit-scrollbar { display: none; }
  .cdash-rail__item { white-space: nowrap; padding: 8px 13px; }
  .cdash-rail__bar { display: none; }

  .cdash-stats, .cdash-stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .cdash, .acct { padding: 92px 18px 64px; }
  .cdash-head { flex-direction: column; gap: 12px; }
  .cdash-head__title { font-size: 25px; }
  .acct-head__title { font-size: 25px; }
  .cdash-short { grid-template-columns: 1fr; }
  .cdash-chart { padding: 17px 16px; }
  .cdash-chart__foot { grid-template-columns: 1fr; gap: 11px; }
  .cdash-toolbar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .cdash-stats, .cdash-stats--3 { grid-template-columns: 1fr; }
  .cdash-tabs { width: 100%; justify-content: space-between; }
  .acct-topup__row { flex-direction: column; }
  .acct-topup__submit { width: 100%; }
}


/*═══════════════════════════════════════════════════════════════════════════
  PANEL CLIENT — VUE « JOBS »
  ---------------------------------------------------------------------------
  SellAuth ne sert pas de route /customer/jobs : la vue vit dans le tableau de
  bord, a `?view=jobs`. Les deux vues sont rendues par le serveur et c est une
  classe sur `.cdash`, posee pendant l analyse du document, qui choisit celle
  qu on voit — donc pas de clignotement, et le tableau de bord reste affiche
  entier si le script ne tourne pas.

  Les gouttieres etaient portees par `.cdash-main` ; ce sont les vues qui sont
  maintenant ses enfants, elles reprennent donc la colonne flex et son `gap`.
═══════════════════════════════════════════════════════════════════════════*/
.cdash-view { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cdash-view[data-view="jobs"] { display: none; }
.cdash--jobs .cdash-view[data-view="home"] { display: none; }
.cdash--jobs .cdash-view[data-view="jobs"] { display: flex; }

.jb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.jb-card {
  --jb: 59, 130, 246;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; height: 100%;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--nx-line);
  background: linear-gradient(180deg, var(--nx-card-2) 0%, var(--nx-card) 100%);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .04), 0 30px 70px -50px #000;
  transition: border-color .25s ease, transform .25s ease !important;
}
.jb-card:not(.is-closed):hover { border-color: rgba(var(--jb), .35); transform: translateY(-3px); }

.jb-card--red    { --jb: 240, 68, 77; }
.jb-card--green  { --jb: 34, 197, 94; }
.jb-card--amber  { --jb: 245, 158, 11; }
.jb-card--violet { --jb: 167, 139, 250; }

/* Une offre fermee est lisible mais visiblement en retrait — l etat est porte
   par le corps seul, pour que le pied de carte garde son contraste. */
.jb-card.is-closed .jb-card__body { opacity: .55; }

.jb-card__body { display: flex; flex-direction: column; flex: 1; }

.jb-card__top { display: flex; align-items: flex-start; gap: 12px; }
.jb-card__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(158deg, rgba(var(--jb), .19), rgba(var(--jb), .07));
  box-shadow: inset 0 0 0 1px rgba(var(--jb), .2), inset 0 1px 0 rgba(255, 255, 255, .07);
  color: rgb(var(--jb));
}
.jb-card__icon svg { width: 18px; height: 18px; }

.jb-card__id { min-width: 0; flex: 1; }
.jb-card__cat {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(var(--jb), .72);
}
.jb-card__title {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 16.5px; font-weight: 700; letter-spacing: -.25px; line-height: 1.2;
  color: var(--nx-fg);
}

.jb-card__status {
  flex-shrink: 0;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}
.jb-card__status.is-open {
  border-color: rgba(34, 197, 94, .3);
  background: rgba(34, 197, 94, .1);
  color: #4ade80;
}

.jb-card__desc { margin-top: 12px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .58); }

.jb-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.jb-tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--nx-line);
  background: rgba(255, 255, 255, .025);
  font-size: 11.5px; color: rgba(255, 255, 255, .55);
}

/* Pastille de remuneration : elle reprend la couleur de l offre pour ressortir
   de la rangee d etiquettes sans introduire une teinte de plus. */
.jb-tag--pay {
  border-color: rgba(var(--jb), .32);
  background: rgba(var(--jb), .1);
  color: rgb(var(--jb));
  font-weight: 700;
}

.jb-card__sec { margin-top: 16px; }
.jb-card__label {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

.jb-list { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.jb-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .66);
}
.jb-list__mark { width: 13px; height: 13px; flex-shrink: 0; margin-top: 3px; color: rgba(var(--jb), .8); }
.jb-list--check .jb-list__mark { width: 15px; height: 15px; margin-top: 2px; color: rgba(255, 255, 255, .32); }

/* Colle en bas : les boutons s alignent d une carte a l autre malgre des
   textes de longueurs differentes. */
.jb-card__foot {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--nx-line);
}
.jb-card__apply,
.jb-card__closed {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 42px; border-radius: 12px;
  font-size: 13px; font-weight: 700;
}
.jb-card__apply {
  background: linear-gradient(180deg, rgba(var(--jb), 1) 0%, rgba(var(--jb), .82) 100%);
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(var(--jb), .9);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.jb-card__apply svg { width: 15px; height: 15px; transition: transform .2s ease !important; }
.jb-card__apply:hover { filter: brightness(1.08); box-shadow: 0 14px 28px -14px rgba(var(--jb), 1); }
.jb-card__apply:hover svg { transform: translateX(3px); }
.jb-card__closed {
  border: 1px solid var(--nx-line);
  color: rgba(255, 255, 255, .3);
  letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px;
}

@media (max-width: 1080px) {
  .jb-grid { grid-template-columns: 1fr; }
}


/*── Formulaire de candidature ─────────────────────────────────────────────*/
.jb-modal {
  /* Au-dessus de la barre de navigation (200) ET du panier (301) : a 120 la
     barre passait par-dessus et coupait le titre de la fenetre. */
  position: fixed; inset: 0; z-index: 320;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .22s ease !important;
}
.jb-modal[hidden] { display: none !important; }
.jb-modal.is-open { opacity: 1; }

.jb-modal__veil { position: absolute; inset: 0; background: rgba(4, 7, 14, .78); }

.jb-modal__card {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 880px; max-height: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, var(--nx-card-2) 0%, var(--nx-card) 100%);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
  transform: translateY(12px) scale(.985);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1) !important;
}
.jb-modal.is-open .jb-modal__card { transform: none; }

.jb-modal__form { display: flex; flex-direction: column; min-height: 0; }

.jb-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--nx-line);
}
.jb-modal__headtext { min-width: 0; }
.jb-modal__title {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 800; letter-spacing: -.5px; color: var(--nx-fg);
}
.jb-modal__note { margin-top: 5px; font-size: 13px; color: rgba(255, 255, 255, .42); }
.jb-modal__x {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border: 0; border-radius: 9px; background: none; cursor: pointer;
  color: rgba(255, 255, 255, .4);
  transition: background .2s ease, color .2s ease !important;
}
.jb-modal__x svg { width: 17px; height: 17px; }
.jb-modal__x:hover { background: rgba(255, 255, 255, .06); color: var(--nx-fg); }

/* Le corps defile, l en-tete et le pied restent : sur un ecran court le
   bouton d envoi doit rester atteignable sans scroller jusqu en bas. */
.jb-modal__body { padding: 20px 24px; overflow-y: auto; min-height: 0; }

.jb-who {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; margin-bottom: 18px;
  border-radius: 12px;
  border: 1px solid var(--nx-line);
  background: rgba(255, 255, 255, .02);
}
.jb-who[hidden] { display: none; }
.jb-who__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}
.jb-who b { font-size: 13.5px; font-weight: 600; color: var(--nx-fg); word-break: break-all; }

.jb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jb-fields[hidden] { display: none; }
.jb-field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 7px; }
.jb-field--half { grid-column: span 1; }

.jb-field__label { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.jb-field__label i { font-style: normal; color: #f87171; }

.jb-input {
  width: 100%; min-width: 0; height: 44px; padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--nx-line);
  background: var(--nx-bg);
  font-family: inherit; font-size: 14px; color: var(--nx-fg);
  transition: border-color .2s ease, background .2s ease !important;
}
.jb-input::placeholder { color: rgba(255, 255, 255, .26); }
.jb-input:focus { outline: none; border-color: var(--nx-line-3); background: #0d1626; }
.jb-input.is-bad { border-color: rgba(239, 68, 68, .65); }

.jb-input--area { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; min-height: 96px; }

/* La fleche native d un <select> est grise sur fond clair chez la plupart des
   navigateurs : elle disparait sur ce fond, d ou celle dessinee ici. */
.jb-input--select {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a0b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
}
.jb-input--select option { background: var(--nx-card); color: var(--nx-fg); }

.jb-modal__error {
  margin-top: 16px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid rgba(239, 68, 68, .3);
  background: rgba(239, 68, 68, .08);
  font-size: 13px; color: #fca5a5;
}
.jb-modal__error[hidden] { display: none; }

.jb-done {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 34px 20px; text-align: center;
}
.jb-done[hidden] { display: none; }
.jb-done__mark {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(34, 197, 94, .14); color: #4ade80;
}
.jb-done__mark svg { width: 22px; height: 22px; }
.jb-done__title { font-size: 16px; font-weight: 700; color: var(--nx-fg); }
.jb-done__sub { font-size: 13.5px; color: rgba(255, 255, 255, .45); }

.jb-modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--nx-line);
}
.jb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: 11px;
  border: 1px solid transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: filter .2s ease, background .2s ease, color .2s ease !important;
}
.jb-btn svg { width: 15px; height: 15px; }
.jb-btn--ghost {
  border-color: var(--nx-line); background: none; color: rgba(255, 255, 255, .55);
}
.jb-btn--ghost:hover { background: rgba(255, 255, 255, .05); color: var(--nx-fg); }
.jb-btn--go {
  background: var(--nx-grad); color: #fff;
  box-shadow: 0 12px 26px -14px rgba(59, 130, 246, .9);
}
.jb-btn--go:hover { filter: brightness(1.08); }
.jb-btn--go:disabled { opacity: .6; cursor: default; filter: none; }
.jb-btn[hidden] { display: none !important; }

@media (max-width: 760px) {
  .jb-modal { padding: 0; }
  .jb-modal__card { max-width: none; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .jb-fields { grid-template-columns: 1fr; }
  .jb-field--half { grid-column: 1 / -1; }
  .jb-modal__head, .jb-modal__body, .jb-modal__foot { padding-left: 18px; padding-right: 18px; }
  .jb-modal__foot > .jb-btn { flex: 1; }
}


/*═══════════════════════════════════════════════════════════════════════════
  PANEL CLIENT — PAGE COMMANDES
  ---------------------------------------------------------------------------
  Cartes a deux etages : l en-tete (vignette, intitule, statut, montant) et un
  pied separe d un filet (numero copiable, avis, facture). Le pied est un vrai
  rang a part et non une ligne de plus : les actions doivent se lire comme des
  actions, pas comme du texte.

  Remplace l ancienne liste `.acct-olist__*`, dont les regles ont ete retirees
  en meme temps.
═══════════════════════════════════════════════════════════════════════════*/

/*── Barre de filtres et recherche ─────────────────────────────────────────*/
.ord-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.ord-bar[hidden] { display: none; }

.ord-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.ord-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--nx-line); background: var(--nx-card);
  font-family: inherit; font-size: 12.5px; font-weight: 600; text-transform: capitalize;
  color: rgba(255, 255, 255, .5); cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease !important;
}
.ord-pill em {
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .45);
}
.ord-pill:hover { color: var(--nx-fg); border-color: rgba(255, 255, 255, .14); }
.ord-pill.is-on {
  background: rgba(59, 130, 246, .14); border-color: var(--nx-line-2); color: var(--nx-fg);
}
.ord-pill.is-on em { background: rgba(59, 130, 246, .22); color: var(--nx-acc-hi); }

.ord-search { position: relative; flex: 1; min-width: 220px; max-width: 340px; }
.ord-search svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: rgba(255, 255, 255, .3); pointer-events: none;
}
.ord-search input {
  width: 100%; height: 40px; padding: 0 14px 0 36px;
  border-radius: 11px;
  border: 1px solid var(--nx-line); background: var(--nx-card);
  font-family: inherit; font-size: 13.5px; color: var(--nx-fg);
  transition: border-color .2s ease !important;
}
.ord-search input::placeholder { color: rgba(255, 255, 255, .28); }
.ord-search input:focus { outline: none; border-color: var(--nx-line-3); }
/* La croix native de `type="search"` est dessinee en sombre sur sombre. */
.ord-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .35; }

/*── Liste ─────────────────────────────────────────────────────────────────*/
.ord-list { display: flex; flex-direction: column; gap: 12px; }

.ord-card {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--nx-line);
  background: linear-gradient(180deg, var(--nx-card-2) 0%, var(--nx-card) 100%);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .04), 0 30px 70px -50px #000;
  transition: border-color .22s ease !important;
}
.ord-card[hidden] { display: none !important; }
.ord-card:hover { border-color: rgba(255, 255, 255, .14); }

.ord-card__head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px 14px; }

.ord-card__media {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--nx-line);
  background: rgba(59, 130, 246, .1);
  font-size: 16px; font-weight: 800; color: var(--nx-acc-hi);
}
.ord-card__media img { width: 100%; height: 100%; object-fit: cover; }

.ord-card__id { min-width: 0; flex: 1; }
.ord-card__name {
  font-size: 16.5px; font-weight: 700; line-height: 1.25; color: var(--nx-fg);
  overflow: hidden; text-overflow: ellipsis;
}
.ord-card__variant { font-weight: 500; color: rgba(255, 255, 255, .45); }
.ord-card__more {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; background: rgba(255, 255, 255, .07);
  font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .5);
  vertical-align: middle;
}
.ord-card__meta { margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, .4); }
.ord-card__meta span { color: rgba(255, 255, 255, .62); }

.ord-card__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0;
}
.ord-card__price {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 800; letter-spacing: -.3px; color: var(--nx-fg);
  white-space: nowrap;
}

.ord-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); white-space: nowrap;
}
.ord-badge svg { width: 12px; height: 12px; }
.ord-badge--completed {
  border-color: rgba(34, 197, 94, .3); background: rgba(34, 197, 94, .12); color: #6ee7a8;
}
.ord-badge--pending, .ord-badge--confirming, .ord-badge--partially_completed {
  border-color: rgba(245, 158, 11, .3); background: rgba(245, 158, 11, .12); color: #fbbf24;
}
.ord-badge--out_of_stock, .ord-badge--failed, .ord-badge--cancelled {
  border-color: rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .12); color: #f87171;
}

/*── Pied de carte ─────────────────────────────────────────────────────────*/
.ord-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 11px 20px;
  border-top: 1px solid var(--nx-line);
  background: rgba(0, 0, 0, .16);
}

.ord-ref {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; color: rgba(255, 255, 255, .34);
  transition: color .2s ease !important;
}
.ord-ref svg { width: 13px; height: 13px; }
.ord-ref span { font-variant-numeric: tabular-nums; }
.ord-ref:hover { color: rgba(255, 255, 255, .7); }
/* Retour visuel de la copie, sans deplacer quoi que ce soit autour. */
.ord-ref.is-copied { color: #4ade80; }
.ord-ref.is-copied span::after { content: ' · copied'; font-weight: 700; }

.ord-card__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ord-act {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .5);
  transition: color .2s ease, background .2s ease, border-color .2s ease !important;
}
.ord-act svg { width: 13px; height: 13px; }
.ord-act:hover { color: var(--nx-fg); background: rgba(255, 255, 255, .05); }
.ord-act--go {
  border: 1px solid var(--nx-line);
  background: var(--nx-card-3); color: rgba(255, 255, 255, .8);
}
.ord-act--go:hover { border-color: var(--nx-line-3); background: rgba(59, 130, 246, .14); color: #fff; }

.ord-empty {
  padding: 26px; text-align: center;
  border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .1);
  font-size: 13.5px; color: rgba(255, 255, 255, .38);
}
.ord-empty[hidden] { display: none; }
.ord-note { font-size: 12px; color: rgba(255, 255, 255, .32); text-align: center; }

@media (max-width: 620px) {
  .ord-card__head { flex-wrap: wrap; }
  .ord-card__right { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .ord-card__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ord-card__acts { width: 100%; }
  .ord-act, .ord-act--go { flex: 1; justify-content: center; }
  .ord-search { max-width: none; }
}


/*── Retour en haut (flottant) ─────────────────────────────────────────────
  Cache par `visibility` et non `display` : la transition d apparition a
  besoin que l element garde une boite, et `visibility` le sort quand meme de
  l ordre de tabulation quand il est masque.                                */
.nx-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 110;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--nx-line-2);
  background: rgba(15, 24, 41, .92);
  color: rgba(255, 255, 255, .68);
  cursor: pointer;
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .9);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s,
              border-color .2s ease, color .2s ease, background .2s ease !important;
}
.nx-top svg { width: 18px; height: 18px; }
.nx-top.is-on { opacity: 1; visibility: visible; transform: none; }
.nx-top.is-on:hover {
  border-color: var(--nx-line-3); color: #fff;
  background: rgba(59, 130, 246, .18); transform: translateY(-3px);
}

/*── Animation du clic ─────────────────────────────────────────────────────
  Trois gestes qui partent ensemble : le bouton s enfonce puis rebondit, un
  anneau se propage, et la fleche decolle pour revenir par le bas — le meme
  mouvement que la page.

  !important sur des selecteurs de classe : style.css aplatit toute animation
  a .001ms sous prefers-reduced-motion, que la machine du proprietaire
  annonce. Meme importance, specificite superieure, donc ca tourne.          */
.nx-top::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: 50%; border: 1px solid rgba(59, 130, 246, .6);
  opacity: 0; pointer-events: none;
}
.nx-top.is-firing { animation: nxTopPush .62s cubic-bezier(.2, .9, .3, 1) !important; }
.nx-top.is-firing::after { animation: nxTopRing .62s cubic-bezier(.2, .8, .2, 1) !important; }
.nx-top.is-firing svg { animation: nxTopArrow .62s cubic-bezier(.4, 0, .2, 1) !important; }

@keyframes nxTopPush {
  0%   { transform: scale(1); }
  22%  { transform: scale(.86); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes nxTopRing {
  0%   { transform: scale(1);   opacity: .85; }
  100% { transform: scale(2.2); opacity: 0; }
}
/* La fleche sort par le haut, puis rentre par le bas : coupee net a 45% pour
   qu on ne la voie jamais traverser le bouton en sens inverse. */
@keyframes nxTopArrow {
  0%   { transform: translateY(0);     opacity: 1; }
  44%  { transform: translateY(-15px); opacity: 0; }
  45%  { transform: translateY(13px);  opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}

/* Les toasts occupent le meme coin : on les remonte au-dessus du bouton
   plutot que de les laisser le recouvrir. */
.toast-container { bottom: 82px; }

@media (max-width: 640px) {
  .nx-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
  .toast-container { bottom: 68px; }
}


/*── Avis (colonne droite du bloc support) ─────────────────────────────────
  CALQUEE SUR `.support-hub__card` : meme rayon de 30px, meme fond a 3 % de
  blanc, meme bordure, contenu centre, bouton blanc de 56px. Les deux colonnes
  se lisent comme une paire.

  La repartition n apparait que si la plateforme fournit les comptes globaux ;
  le gabarit s en charge. Ce qui reste toujours affiche, c est la moyenne et le
  total — deux agregats de toute la boutique.                                */
.support-hub__fbs {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 30px; border-radius: 30px; text-align: center;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
}

.fbs__head { display: flex; align-items: center; justify-content: center; gap: 12px; }
.fbs__badge {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(155deg, #fbbf24 0%, #f59e0b 100%);
  color: #3b2606;
  box-shadow: 0 14px 28px -14px rgba(245, 158, 11, .9);
}
.fbs__badge svg { width: 24px; height: 24px; }
.fbs__id { text-align: left; }
.fbs__id b {
  display: block;
  font-family: var(--font-display);
  font-size: 16.5px; font-weight: 800; letter-spacing: -.3px; color: #fff;
}
.fbs__id em { font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .42); }

.fbs__score { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.fbs__avg {
  font-family: var(--font-display);
  font-size: 52px; font-weight: 900; letter-spacing: -2.5px; line-height: 1; color: #fff;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fbs__avg {
    background: linear-gradient(180deg, #ffffff 0%, #93b9ff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.fbs__stars { display: flex; justify-content: center; gap: 3px; }
.fbs__stars svg { width: 17px; height: 17px; color: rgba(255, 255, 255, .16); }
.fbs__stars svg.is-on { color: #ffc53d; }
.fbs__count { font-size: 12px; color: rgba(255, 255, 255, .38); }
.fbs__total { font-size: 11.5px; color: rgba(255, 255, 255, .3); }
.fbs__total b { color: rgba(255, 255, 255, .6); font-weight: 700; }

.fbs__dist { display: flex; flex-direction: column; gap: 7px; }
.fbs__row { display: flex; align-items: center; gap: 10px; }
.fbs__lvl { width: 26px; flex-shrink: 0; text-align: left; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .45); }
.fbs__bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.fbs__bar i { display: block; height: 100%; border-radius: 999px; background: #94a3b8; }
.fbs__row--5 .fbs__bar i { background: #22c55e; }
.fbs__row--4 .fbs__bar i { background: #3b82f6; }
.fbs__row--3 .fbs__bar i { background: #94a3b8; }
.fbs__row--2 .fbs__bar i { background: #f59e0b; }
.fbs__row--1 .fbs__bar i { background: #ef4444; }
.fbs__n { width: 42px; flex-shrink: 0; text-align: right; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }

.fbs__empty { display: flex; flex-direction: column; gap: 7px; }
.fbs__empty b { font-size: 16px; font-weight: 700; color: #fff; }
.fbs__empty span { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .42); }

/* Bouton identique a celui du support : blanc, 56px, rayon 15px. */
.fbs__cta {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 56px; padding: 16px; border-radius: 15px;
  background: #fff; color: #000; font-size: 16px; font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.fbs__cta svg { width: 17px; height: 17px; color: #000; transition: transform .2s ease !important; }
.fbs__cta:hover { color: #000; transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(255, 255, 255, .35); }
.fbs__cta:hover svg { transform: translateX(3px); }

@media (max-width: 520px) {
  .support-hub__fbs { padding: 22px; }
  .fbs__avg { font-size: 42px; }
}

/*── Page Avis ─────────────────────────────────────────────────────────────
  Son fond propre (nappes bleues sur body) est remplace par le calque commun
  `.nx-bg`, avec `--nxbg-k: 1` pour garder une teinte plus presente que sur les
  autres pages (voir FOND DU SITE). Le dore des etoiles reste proscrit : le
  proprietaire n en veut pas, on reste dans le bleu du site.                 */

/* Halo derriere le titre : bleu lui aussi, avec une chute douce pour qu on ne
   voie pas le bord de l ellipse. */
.rv-hero::before {
  background: radial-gradient(ellipse at center,
    rgba(96, 165, 250, .2) 0%,
    rgba(59, 130, 246, .07) 44%,
    transparent 70%) !important;
}

/*── Panneau de note : corrections mesurees sur la boutique en ligne ───────
  Avec 1407 avis 5 etoiles, le compteur (4 chiffres) debordait sur le
  pourcentage : la ligne se lisait « 140799% ». La colonne etait figee a 18px
  dans style.css, une largeur calibree pour un seul chiffre.               */
.rv-dist__row { gap: 12px; }
.rv-dist__count { width: 46px !important; text-align: right; font-variant-numeric: tabular-nums; }
.rv-dist__pct { width: 40px !important; text-align: right; font-variant-numeric: tabular-nums; }
/* La barre prend ce qui reste, au lieu d etre poussee par les chiffres. */
.rv-dist__bar { flex: 1 1 auto; min-width: 60px; }

/* Un peu d air entre le bloc de note et la distribution, et une separation
   nette : les deux disaient la meme chose sans qu on voie ou l un finissait. */
.rv-score { gap: 30px; }
.rv-score__num { padding-right: 4px; }

/* Segment qui mene a la page triee plutot que d etre inerte : il reste
   cliquable, avec un point discret qui le distingue d un segment local. */
.rv-pill--elsewhere { opacity: .78; }
.rv-pill--elsewhere:hover { opacity: 1; }
.rv-pill--elsewhere .rv-pill__lbl::after {
  content: ''; display: inline-block;
  width: 3px; height: 3px; margin-left: 5px; vertical-align: middle;
  border-radius: 50%; background: currentColor; opacity: .55;
}

/*── Bloc de note : composition en colonne + barres colorees ──────────────
  Reprise du modele demande : la note en gros, les etoiles dessous, « out of
  5 », puis le total. A droite, une couleur par niveau — du vert au rouge —
  et le pourcentage entre parentheses derriere le compte.                   */
.rv-score__num {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 108px; flex-shrink: 0; text-align: center;
}
.rv-score__figure {
  font-family: var(--font-display);
  font-size: 52px; font-weight: 900; letter-spacing: -2.5px; line-height: 1;
  color: #fff;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rv-score__figure {
    background: linear-gradient(180deg, #ffffff 0%, #93b9ff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.rv-score__out { font-size: 12px; color: rgba(255, 255, 255, .38); }
.rv-score__total { margin-top: 2px; font-size: 11.5px; color: rgba(255, 255, 255, .3); }
.rv-score__total b { color: rgba(255, 255, 255, .6); font-weight: 700; }

.rv-dist__lbl {
  display: inline-flex; align-items: center; gap: 4px;
  width: 30px; flex-shrink: 0;
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .6);
}
.rv-dist__star { color: #ffc53d; flex-shrink: 0; }

/* Une teinte par niveau. La piste reste neutre : seule la part remplie
   colore la ligne, sinon cinq pistes colorees se liraient comme cinq etats. */
.rv-dist__row--5 .rv-dist__fill { background: #22c55e !important; }
.rv-dist__row--4 .rv-dist__fill { background: #3b82f6 !important; }
.rv-dist__row--3 .rv-dist__fill { background: #94a3b8 !important; }
.rv-dist__row--2 .rv-dist__fill { background: #f59e0b !important; }
.rv-dist__row--1 .rv-dist__fill { background: #ef4444 !important; }

.rv-dist__count { color: #fff; font-weight: 700; }
.rv-dist__pct { color: rgba(255, 255, 255, .3); }

/*═══════════════════════════════════════════════════════════════════════════
  PAGE AVIS — HABILLAGE MANQUANT (correctif du 2026-09-12)
  ---------------------------------------------------------------------------
  BUG SIGNALE : les etoiles s empilaient en colonne au lieu d etre en ligne.
  `.rv-card__stars` mesurait 70px de haut pour des icones de 14px — cinq
  etoiles l une sous l autre.

  CAUSE. `snippets/stars.njk` dessine DEUX rangees superposees (une vide qui
  donne la forme, une pleine rognee a la largeur de la note). Ces rangees
  n avaient AUCUNE regle : ni `.rv-stars__row`, ni `__base`, ni `__fill`, ni
  `.rv-star`. Les deux rangees devenaient donc deux elements flex cote a cote
  qui se comprimaient, et les cinq SVG de chacune passaient a la ligne.
  Audit complet : 17 classes employees par les gabarits de la page n avaient
  aucune declaration dans style.css, custom.css ni built.css. Le bloc existait
  dans reference/flashshp-custom/ et n avait jamais ete porte ici — d ou aussi
  le nom du produit affiche SOUS les etoiles au lieu d etre a leur droite.
═══════════════════════════════════════════════════════════════════════════*/

/*── Etoiles a remplissage fractionnaire ───────────────────────────────────
  `position: relative` sur le conteneur est indispensable : sans lui la rangee
  pleine, qui est absolue, se positionnerait sur un ancetre lointain.
  `flex: 0 0 auto` sur les icones l est tout autant : rogner la rangee pleine
  a 99.4% doit MASQUER un bout d etoile, pas retrecir les cinq.             */
.rv-stars { position: relative; line-height: 0; }
.rv-stars__row { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; }
.rv-stars__row .rv-star { flex: 0 0 auto; display: block; }
.rv-stars__base { color: rgba(255, 255, 255, .18); }
.rv-stars__fill {
  position: absolute; left: 0; top: 0;
  overflow: hidden; color: #ffd27a;
}

/*── En-tete de carte ──────────────────────────────────────────────────────
  La note a gauche, le produit a droite. Sans cette regle les deux
  s empilaient.                                                             */
.rv-card { position: relative; overflow: hidden; }
.rv-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }

/* Filet lumineux annonce par le gabarit : il n avait aucune regle, donc il ne
   s allumait jamais. */
.rv-card__line {
  position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .75), transparent);
  opacity: 0; transition: opacity .3s ease !important;
}
.rv-card:hover .rv-card__line { opacity: 1; }

.rv-card__tag {
  max-width: 58%; flex-shrink: 0;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .05);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*── Pied de carte ─────────────────────────────────────────────────────────*/
.rv-card__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 11.5px;
}
.rv-card__sep { color: rgba(255, 255, 255, .2); }
.rv-card__verified-x { color: inherit; }
/* Sous 520px, « purchase » saute : la pastille verte et son aria-label
   portent deja le sens. */
@media (max-width: 520px) {
  .rv-card__verified-x { display: none; }
}

/*── Controle segmente des notes ───────────────────────────────────────────
  custom.js mesure le segment actif et pose le curseur (largeur, hauteur,
  translation). Le curseur n avait aucune apparence : le script travaillait
  pour rien. Comme c est lui qui peint desormais l etat actif, la pastille
  active doit rendre son propre fond, sinon elle le masquerait.            */
.rv-seg {
  position: relative; display: flex; gap: 2px;
  padding: 4px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  overflow-x: auto; scrollbar-width: none;
}
.rv-seg::-webkit-scrollbar { display: none; }
.rv-seg__glider {
  position: absolute; left: 0; top: 0;
  border-radius: 999px;
  background: var(--nx-grad);
  box-shadow: 0 10px 22px -12px rgba(59, 130, 246, .95);
  opacity: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1),
              width .32s cubic-bezier(.2, .8, .2, 1),
              height .32s cubic-bezier(.2, .8, .2, 1),
              opacity .2s ease !important;
}
.rv-seg--ready .rv-seg__glider { opacity: 1; }
/* Premiere pose : on ne veut pas voir le curseur glisser depuis l origine. */
.rv-seg--init .rv-seg__glider { transition: none !important; }

.rv-seg .rv-pill {
  position: relative; z-index: 1;
  border-radius: 999px;
  background: none; border-color: transparent; box-shadow: none;
  transition: color .2s ease !important;
}
/* Le degrade du curseur est bleu : le texte sombre de `--rv-ink` y serait
   illisible. */
.rv-seg .rv-pill.active,
.rv-seg .rv-pill.active svg { color: #fff; }
.rv-pill__star { flex-shrink: 0; }
.rv-seg .rv-pill:disabled { opacity: .32; cursor: not-allowed; }

.rv-hero__pill-icon { color: #ffd27a; flex-shrink: 0; }

/*── Bloc de note sans aucun avis ──────────────────────────────────────────*/
.rv-score--none { align-items: center; }
.rv-score__text { display: flex; flex-direction: column; gap: 7px; }
.rv-score__verdict {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: #fff;
}

/*── Animations ────────────────────────────────────────────────────────────
  On reutilise `.pdx-rise`, deja observe par script.js (il pose `is-in` a
  l entree dans le champ) et surtout arme par `.pdx-js` : l etat cache
  n existe que si le script a pris la main, donc un echec de JS ne laisse
  jamais une grille blanche.

  !important sur un selecteur plus specifique que celui de style.css : la
  feuille de base ecrase toute animation sous prefers-reduced-motion, que la
  machine du proprietaire annonce, et rien ne se jouerait jamais.           */
.pdx-js .rv-cell.pdx-rise {
  opacity: 0; transform: translateY(20px) scale(.99);
  transition: opacity .62s cubic-bezier(.16, 1, .3, 1),
              transform .62s cubic-bezier(.16, 1, .3, 1) !important;
  transition-delay: var(--d, 0ms) !important;
}
.pdx-js .rv-cell.pdx-rise.is-in { opacity: 1 !important; transform: none !important; }

/* Les barres de distribution partent de zero et se remplissent : la largeur
   est posee en style en ligne par le gabarit, le script la remet a 0 puis la
   restaure, et c est cette transition qui la fait glisser. */
.rv-dist__bar .rv-dist__fill { transition: width 1.1s cubic-bezier(.2, .8, .2, 1) !important; }

/* Survol de carte, comme les cartes produit ailleurs sur le theme. */
.rv-card { transition: transform .28s ease, border-color .28s ease, background .28s ease !important; }
.rv-card:hover { transform: translateY(-4px); }

/* `.rv-card__view` avait une regle (taille, couleur) mais AUCUN `display` : le
   lien retombait en bloc et sa fleche passait sous le mot « View ». Il lui
   faut aussi `margin-left:auto` pour aller se caler a droite du pied, comme
   le gabarit le prevoit. */
.rv-card__view {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto; font-weight: 600;
}
.rv-card__view:hover { color: var(--nx-acc-hi); }

/*── Segment : hauteur et compression (constate sur mobile 375px) ──────────
  Le conteneur est etire par le parent flex (69px au lieu de 50), et les
  pastilles, etirees a leur tour, montaient a 59px pour un contenu de 20px.
  `align-self: center` l empeche d etre etire, `align-items: center` empeche
  les pastilles de l etre, et `flex-shrink: 0` les empeche d etre comprimees
  quand la rangee deborde — c est precisement a ce moment que `overflow-x`
  doit prendre le relais.                                                   */
.rv-seg { align-items: center; align-self: center; }
.rv-seg .rv-pill { flex-shrink: 0; }

/* Sur un telephone de 375px les six pastilles depassaient de 30px et la
   derniere etait coupee au bord — ce qui se lit comme un defaut, pas comme
   une invitation a faire defiler. Mesure faite en direct : a 7px de
   rembourrage la rangee demande 278px pour 286 disponibles, elle tient donc
   sur une ligne.

   Et si un ecran plus etroit ne suffisait quand meme pas, elle se replie au
   lieu d etre tronquee. custom.js place deja le curseur avec `offsetTop` en
   plus de `offsetLeft` : il suit sur la deuxieme ligne sans rien changer. */
@media (max-width: 520px) {
  .rv-seg {
    flex-wrap: wrap; justify-content: center;
    row-gap: 4px; overflow-x: visible;
  }
  .rv-seg .rv-pill { padding: 9px 7px; }
}

/*── Carte FAQ de la section support ───────────────────────────────────────
  Remplace la carte d avis dans la colonne de droite. Meme cadre que la carte
  support (rayon 30px, fond blanc a 3%, meme bordure) pour que les deux
  colonnes se lisent comme une paire.

  On reutilise `.faq-item` de style.css plutot que de redessiner un accordeon,
  mais PAS `.faq-list` : celui-la impose `max-width: 820px; margin: 0 auto`,
  calibre pour une pleine page, qui n a aucun sens dans une carte.          */
.support-hub__faq {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 18px;
  padding: 30px; border-radius: 30px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
}

.shfaq__head { display: flex; align-items: center; gap: 12px; }
.shfaq__badge {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(155deg, #60a5fa 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 14px 28px -14px rgba(37, 99, 235, .9);
}
.shfaq__badge svg { width: 24px; height: 24px; }
.shfaq__id b {
  display: block;
  font-family: var(--font-display);
  font-size: 16.5px; font-weight: 800; letter-spacing: -.3px; color: #fff;
}
.shfaq__id em { font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .42); }

.shfaq__list { display: flex; flex-direction: column; gap: 10px; }
/* Un cran plus serre qu en pleine page : la carte apporte deja 30px de marge
   interne, et quatre questions doivent y tenir sans l etirer. */
.shfaq__item .faq-item__q { padding: 14px 16px; font-size: 13.8px; }
.shfaq__item .faq-item__a { padding: 0 16px 15px; font-size: 13.3px; line-height: 20px; }

/*── FAQ : lignes facon Exudos ─────────────────────────────────────────────
  Reprise du modele montre par le proprietaire : deux intitules de groupe
  suivis d un filet qui s eteint, et des lignes a icone encadree + bouton
  « + ». Ici les groupes sont empiles au lieu d etre cote a cote — la carte
  fait 422px de large, deux colonnes y seraient illisibles.

  Le repli reste `<details>` natif : le « + » pivote en croix a l ouverture,
  sans une ligne de JavaScript.                                             */
.shfaq__group + .shfaq__group { margin-top: 20px; }

.shfaq__glabel { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.shfaq__glabel h3 {
  flex-shrink: 0; margin: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.shfaq__rule {
  flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .12), transparent);
}

.shfaq__item {
  overflow: hidden; border-radius: 16px;
  border: 1px solid rgba(191, 219, 254, .08);
  background: linear-gradient(110deg, #181a26 0%, #12161e 58%, #11141a 100%);
  transition: border-color .3s ease !important;
}
.shfaq__item:hover { border-color: rgba(147, 197, 253, .2); }

.shfaq__q {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 15px; cursor: pointer; list-style: none;
}
.shfaq__q::-webkit-details-marker { display: none; }

.shfaq__ico {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .5);
  transition: color .3s ease !important;
}
.shfaq__ico svg { width: 16px; height: 16px; }
.shfaq__emoji { font-size: 15px; line-height: 1; }
.shfaq__item:hover .shfaq__ico { color: rgba(255, 255, 255, .75); }

.shfaq__qt {
  flex: 1 1 auto; min-width: 0;
  font-size: 13.6px; font-weight: 600; line-height: 1.35;
  color: rgba(255, 255, 255, .85);
  transition: color .2s ease !important;
}
.shfaq__item:hover .shfaq__qt { color: #fff; }

.shfaq__plus {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .4);
  transition: transform .3s ease, color .3s ease, border-color .3s ease !important;
}
.shfaq__plus svg { width: 13px; height: 13px; }
.shfaq__item:hover .shfaq__plus { border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .7); }
/* Ouvert : le « + » devient une croix. */
.shfaq__item[open] .shfaq__plus { transform: rotate(45deg); color: rgba(255, 255, 255, .75); }

.shfaq__a {
  padding: 0 15px 14px 63px;
  font-size: 13.2px; line-height: 20px; color: rgba(255, 255, 255, .55);
}
/* Sous 420px l icone disparait de la marge : la reponse revient a gauche. */
@media (max-width: 480px) {
  .shfaq__a { padding-left: 15px; }
}

/*── Ouverture animee d une question ───────────────────────────────────────
  Un <details> natif bascule d un coup : son contenu n existe pas tant qu il
  est ferme, donc une transition de hauteur classique n a rien a animer. On
  passe par `::details-content`, le pseudo-element qui represente ce contenu
  et qui, lui, accepte les transitions — la hauteur peut donc se derouler.

  `interpolate-size: allow-keywords` est ce qui autorise l animation JUSQU A
  `auto` : sans lui, la valeur finale est un mot-cle et le navigateur saute
  directement a l arrivee. Il est pose sur la carte, pas sur :root, pour ne
  rien changer au reste du site (la propriete est heritee).

  `content-visibility` doit etre transitionne avec `allow-discrete`, sinon le
  contenu disparait des la premiere image et on n anime plus qu du vide.

  Aucun JavaScript : sur un navigateur qui ignore `::details-content`, la
  reponse s affiche instantanement — comme avant — et le fondu ci-dessous
  joue quand meme.

  Les `!important` sont obligatoires : la feuille de base ecrase toute
  transition sous `prefers-reduced-motion` via `*`, que la machine du
  proprietaire annonce. Un selecteur de classe passe devant `*`.          */
.support-hub__faq { interpolate-size: allow-keywords; }

.shfaq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .34s cubic-bezier(.2, .8, .2, 1),
              content-visibility .34s allow-discrete !important;
}
.shfaq__item[open]::details-content { block-size: auto; }

/* Le texte monte legerement et se revele, un cheveu apres la hauteur, pour
   qu on lise l ouverture plutot qu un bloc qui apparait. */
.shfaq__a {
  opacity: 0; transform: translateY(-5px);
  transition: opacity .3s ease .05s, transform .3s ease .05s !important;
}
.shfaq__item[open] .shfaq__a { opacity: 1 !important; transform: none !important; }

/* La ligne ouverte se distingue du reste de la pile. */
.shfaq__item[open] { border-color: rgba(147, 197, 253, .22); }

/*── Carrousel de produits (fs-marquee) ────────────────────────────────────
  Le gabarit existait depuis le debut mais n avait AUCUN style : ni
  `.fs-marquee`, ni `__track`, ni `__clone`. Rien ne defilait.

  POURQUOI DES MARGES ET PAS UN `gap`. La piste contient N cartes PUIS un
  clone qui en contient N autres, et l animation la translate de -50%. Pour
  que la boucle soit invisible, ce -50% doit tomber pile sur la premiere
  carte du clone.

  Avec `gap`, la piste compte N espaces au premier niveau mais seulement
  N-1 dans le clone : les deux moities different d une demi-gouttiere et la
  boucle saute de 9px a chaque tour. En donnant la gouttiere en
  `margin-right` a chaque carte, chacune occupe exactement largeur+marge, les
  deux moities sont rigoureusement egales, et le raccord est invisible.

  `!important` sur l animation : la feuille de base l aplatirait sous
  `prefers-reduced-motion`, actif sur la machine du proprietaire.          */
.fs-marquee {
  position: relative; overflow: hidden;
  /* Les bords s estompent au lieu d etre tranches net. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.fs-marquee__track {
  display: flex; width: max-content;
  animation: nxMarquee 55s linear infinite !important;
}
.fs-marquee__clone { display: flex; }

.fs-marquee__track .product-card {
  flex: 0 0 auto;
  width: 270px;
  margin-right: 18px;
}

/* On s arrete au survol : sans ca, viser un bouton sur une cible qui bouge
   est penible. */
.fs-marquee:hover .fs-marquee__track,
.fs-marquee:focus-within .fs-marquee__track { animation-play-state: paused !important; }

/* Defilement desactive dans les reglages : la rangee devient un simple
   ruban que l on fait glisser au doigt. */
.fs-marquee--static { overflow-x: auto; scrollbar-width: none; }
.fs-marquee--static::-webkit-scrollbar { display: none; }
.fs-marquee--static .fs-marquee__track { animation: none !important; }
.fs-marquee--static .fs-marquee__clone { display: none; }

@media (max-width: 639px) {
  .fs-marquee__track .product-card { width: 215px; margin-right: 12px; }
}

/*── Page Produits ─────────────────────────────────────────────────────────
  Son quadrillage fixe (grille, points d accent, hachures) est retire : le
  fond est desormais le calque commun `.nx-bg`, sans grille, avec des nappes
  plus discretes (`--nxbg-k: .7`, voir FOND DU SITE) parce que le catalogue
  est dense. L ancienne version est dans backups/bg-2026-10-07/.             */

/*── Acces staff sur la page de maintenance ────────────────────────────────
  Le mot de passe est verifie par la plateforme (POST /maintenance) : rien
  ici ne valide quoi que ce soit, et le theme ne contient aucun secret.     */
/* Le declencheur etait a 12.5px en blanc 55% : il se lisait comme une mention
   legale, pas comme la porte d entree. Il doit se voir sans voler la vedette
   au message. */
.mnt-open {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 28px; padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, .32);
  background: rgba(59, 130, 246, .12);
  color: rgba(255, 255, 255, .82);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease !important;
}
.mnt-open:hover { color: #fff; border-color: rgba(96, 165, 250, .6); background: rgba(59, 130, 246, .2); }

/* La modale se pose dans la MOITIE BASSE : le message de maintenance reste
   entierement visible au-dessus d elle, ce qui est tout l objet du voile
   leger ci-dessous. */
.mnt-modal {
  position: fixed; inset: 0; z-index: 330;
  display: grid; place-items: end center;
  padding: 20px 20px 7vh;
}
/* INDISPENSABLE. `display: grid` ci-dessus bat le `display: none` que le
   navigateur applique a [hidden] — sa regle vient de la feuille UA et perd
   en specificite face a une classe. Sans cette ligne la modale reste ouverte
   en permanence et le script, qui bascule pourtant `hidden` correctement,
   n a aucun effet visible. */
.mnt-modal[hidden] { display: none; }
/* VOILE LEGER, ET SANS FLOU. A .72 d opacite avec un blur(3px), le message
   derriere devenait illisible — or on veut justement continuer a le lire. Le
   flou est le pire coupable : il detruit le texte bien avant l assombrissement.
   La modale ressort par son propre fond et son ombre portee, pas en effacant
   la page. */
.mnt-modal__veil { position: absolute; inset: 0; background: rgba(5, 9, 17, .38); }
.mnt-modal__box {
  position: relative; width: 100%; max-width: 400px;
  padding: 26px; border-radius: 22px;
  background: linear-gradient(165deg, #101a2c 0%, #0b1320 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
}
.mnt-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mnt-modal__title { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 800; color: #fff; }
.mnt-modal__x {
  display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
  border: 0; border-radius: 9px; background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .55); cursor: pointer;
  transition: color .2s ease, background .2s ease !important;
}
.mnt-modal__x:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.mnt-modal__hint { margin: 10px 0 20px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .45); }

.mnt-form__label { display: block; margin-bottom: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.mnt-form__input {
  width: 100%; height: 46px; padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: #fff; font-size: 14px; font-family: inherit;
  transition: border-color .2s ease, background .2s ease !important;
}
.mnt-form__input:focus { outline: none; border-color: rgba(96, 165, 250, .55); background: rgba(255, 255, 255, .06); }
.mnt-form__error { margin: 10px 0 0; font-size: 12.5px; color: #f87171; }
.mnt-form__submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 48px; margin-top: 16px;
  border: 0; border-radius: 13px;
  background: var(--nx-grad); color: #fff;
  font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: filter .2s ease !important;
}
.mnt-form__submit:hover:enabled { filter: brightness(1.08); }
.mnt-form__submit:disabled { opacity: .6; cursor: progress; }

/* Le filet court devant l intitule, comme sur le modele. */
.bsel__eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.bsel__eyebrow i {
  display: block; width: 34px; height: 2px; flex-shrink: 0;
  border-radius: 999px; background: var(--nx-grad);
}

/*── Apparition des sections au defilement ─────────────────────────────────
  POURQUOI RIEN NE BOUGEAIT. Deux verrous, pas un.

  1. `body.nx-no-entrance`. script.js la pose des la DEUXIEME visite d une
     page dans la session (sessionStorage), pour ne pas rejouer l animation
     d entree du hero apres un rechargement. Legitime pour le hero — mais
     style.css l etendait a `.reveal`, donc l apparition des sections au
     defilement mourait avec, et definitivement puisque la classe reste
     posee ensuite. Entree de page et apparition au scroll sont deux choses
     differentes : on separe.

  2. `prefers-reduced-motion`, actif sur la machine du proprietaire, que la
     feuille de base traduit par « .reveal visible immediatement ».

  `html.pdx-js` est la condition de sureté : script.js ne la pose QUE s il a
  pu installer l IntersectionObserver. Sans JavaScript, l etat cache n existe
  donc jamais et la page reste lisible.                                     */
/* L etat cache s applique quel que soit `nx-no-entrance` : l entree de page
   (jouee une fois par session) et l apparition au defilement sont deux choses
   distinctes, style.css les confondait. */
html.pdx-js .reveal,
html.pdx-js body.nx-no-entrance .reveal {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition: opacity 620ms cubic-bezier(.16, 1, .3, 1),
              transform 620ms cubic-bezier(.16, 1, .3, 1) !important;
  transition-delay: var(--d, 0ms) !important;
}
html.pdx-js .reveal.visible,
html.pdx-js body.nx-no-entrance .reveal.visible {
  opacity: 1 !important;
  transform: none !important;
}

/*  ATTENTION — CHOIX EXPLICITE DU PROPRIETAIRE (2026-10-05).

   Ce bloc fait jouer l animation MEME pour les visiteurs dont le systeme
   demande « moins d animations ». Ce reglage n est pas une preference
   esthetique : des personnes l activent pour des troubles vestibulaires, que
   le mouvement peut reellement declencher.

   La version precedente respectait la demande en ne gardant qu un fondu, sans
   deplacement. Le proprietaire, dont la machine a ce reglage actif, a demande
   le mouvement complet pour tout le monde en connaissance de cause.

   Pour revenir a la version respectueuse : remplacer `transform` par `none` et
   retirer `transform` de la liste des proprietes transitionnees, ci-dessous
   uniquement. Le reste du theme n est pas concerne.

   Le selecteur complet est repete : une media query n ajoute aucune
   specificite, et style.css y remet `opacity: 1 !important` tout en aplatissant
   les durees a .001ms via `*`.                                               */
@media (prefers-reduced-motion: reduce) {
  html.pdx-js .reveal,
  html.pdx-js body.nx-no-entrance .reveal {
    opacity: 0 !important;
    transform: translateY(24px) !important;
    transition: opacity 620ms cubic-bezier(.16, 1, .3, 1),
                transform 620ms cubic-bezier(.16, 1, .3, 1) !important;
    transition-delay: var(--d, 0ms) !important;
  }
  html.pdx-js .reveal.visible,
  html.pdx-js body.nx-no-entrance .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
  }
}

/*── Vignette du panier : l image remplit la case ──────────────────────────
  Avant : `object-fit: contain` + `padding: 6px` sur un fond `#18181b`. Trois
  causes cumulees pour un meme defaut — l image etait rognee par la marge,
  posee entiere DANS la case plutot que de la remplir, et le fond quasi noir
  apparaissait donc tout autour.

  `cover` remplit la case en gardant les proportions : il rogne les bords de
  l image au lieu de laisser du vide. Plus aucun fond visible derriere une
  image, et la vignette est agrandie a 52px.

  Le fond reste defini pour le SEUL cas sans image, ou la case n affiche que
  l initiale du produit — et il reprend la teinte du theme au lieu du noir.  */
.cart-panel__item-icon {
  width: 52px; height: 52px;
  background: rgba(255, 255, 255, .05);
  border-radius: 12px;
}
.cart-panel__item-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
  padding: 0;
  display: block;
}

/*── Survol : l image se floute legerement ─────────────────────────────────
  Le flou s ajoute au leger zoom deja en place, il ne le remplace pas : les
  deux ensemble font reculer l image pendant que le titre et le prix, nets,
  passent au premier plan.

  Les deux familles de cartes sont visees — `.nvx-tile__media img` pour les
  groupes, `.pc-img` pour les produits seuls — sinon l effet n apparaitrait
  que sur la moitie du catalogue.

  `!important` sur la transition : sans lui, la regle `*` de
  `prefers-reduced-motion` la ramene a .001ms et le flou claque au lieu de
  s installer. Meme raison que pour l apparition au defilement.

  `will-change` evite que le navigateur reconstruise la texture a chaque
  image du flou, qui est l un des filtres les plus couteux.                 */
.nvx-tile__media img,
.pc-img {
  transition: transform .45s ease, filter .4s ease !important;
}
.nvx-tile:hover .nvx-tile__media img,
.product-card:hover .pc-img {
  filter: blur(2.5px);
  will-change: filter, transform;
}

/*── Onglet Support de la fiche produit ────────────────────────────────────
  Reprise de la forme demandee : un encart centre — icone, titre, texte,
  bouton — au lieu de deux paragraphes alignes a gauche suivis d un lien.

  Le fond, la bordure et le bouton restent ceux du theme : c est la
  composition qui est reprise du modele, pas sa palette, sinon l encart
  jurerait avec le reste de la fiche.                                       */
.nvp-support {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 44px 32px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(96, 165, 250, .14);
}
.nvp-support__mark { display: block; margin-bottom: 18px; color: var(--nx-acc-hi); }
.nvp-support__mark svg { display: block; }
.nvp-support__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 23px; font-weight: 800; letter-spacing: -.4px; color: #fff;
}
/* Le selecteur porte la classe : `.nvp-support p` plus haut dans le fichier
   alignait a gauche et laissait une marge basse. */
.nvp-support .nvp-support__text {
  max-width: 460px; margin: 0 0 24px;
  font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .55);
}
.nvp-support .nvp-support__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff; font-size: 14.5px; font-weight: 700;
  transition: background .2s ease, border-color .2s ease !important;
}
.nvp-support .nvp-support__cta:hover {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .24);
  filter: none;
}

@media (max-width: 560px) { .nvp-support { padding: 32px 20px; } }

/*── Onglet « Volume Discounts » de la fiche produit ───────────────────────
  Tableau en grille plutot qu en <table> : quatre colonnes a largeur fixe se
  replient proprement sur mobile, ce qu un vrai tableau ne fait pas sans
  defilement horizontal.

  Les prix sont alignes a droite et en chiffres tabulaires : sans ca les
  colonnes dansent d une ligne a l autre des que les montants n ont pas le
  meme nombre de chiffres.                                                  */
.nvp-vol {
  padding: 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
}
.nvp-vol__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.nvp-vol__badge {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 13px;
  background: rgba(59, 130, 246, .16);
  border: 1px solid rgba(96, 165, 250, .28);
  color: var(--nx-acc-hi);
}
.nvp-vol__badge svg { width: 21px; height: 21px; }
.nvp-vol__id b {
  display: block;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: #fff;
}
.nvp-vol__id em { font-style: normal; font-size: 13.5px; color: rgba(255, 255, 255, .45); }

.nvp-vol__row {
  display: grid; align-items: center;
  grid-template-columns: 1fr 1.2fr 1.2fr auto;
  gap: 12px;
  padding: 15px 4px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.nvp-vol__row--head {
  border-top: 0; padding-top: 0; padding-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}
.nvp-vol__units { font-size: 15.5px; font-weight: 800; color: #fff; }
.nvp-vol__unit,
.nvp-vol__total { font-size: 14.5px; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.nvp-vol__off {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; padding: 6px 12px;
  border-radius: 999px;
  background: var(--nx-grad); color: #fff;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .nvp-vol { padding: 18px; }
  .nvp-vol__row { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .nvp-vol__row--head { display: none; }
  .nvp-vol__total { display: none; }
}

/*── Encart de l onglet « Description » ────────────────────────────────────
  Le texte flottait a nu dans la carte alors que les deux autres onglets
  (`.nvp-vol`, `.nvp-support`) posent leur contenu dans un encart. Les trois
  panneaux partagent donc desormais le meme cadre — meme fond, meme bordure,
  meme rayon — pour que le passage d un onglet a l autre ne fasse pas sauter
  la mise en page.

  La regle porte sur `.nvp-desc`, qui est aussi l element de l etat vide :
  « No description for this product yet. » herite du cadre sans markup en
  plus.                                                                     */
.nvp-desc {
  padding: 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
}
/* Les paragraphes et listes portent `margin-bottom: 8px` : sans ca le dernier
   creuse l interieur du cadre de 8px de plus en bas qu en haut. */
.nvp-desc > *:last-child { margin-bottom: 0; }

@media (max-width: 560px) { .nvp-desc { padding: 18px; } }

/*── Rappel de palier sous le selecteur de quantite ────────────────────────
  « Add 2 more to unlock 3% off » + une barre de progression. Le tableau des
  paliers vit dans l onglet « Volume Discounts », mais lire un tableau ne dit
  pas a l acheteur ou il en est : c est au moment ou il touche le « + » que
  l information compte, donc elle se place la.

  Tout le remplissage vient de `renderVolumes()` dans script.js — ce bloc
  n est que la mise en forme. L encart entier (#pdVol) disparait quand la
  variante choisie n a aucun palier, et la ligne (#pdVolNudge) quand le
  dernier palier est deja atteint : plus rien a debloquer, plus rien a dire.  */
.nvp-vnudge { margin-top: 12px; }
.nvp-vnudge__box {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(96, 165, 250, .16);
}
.nvp-vnudge__line { display: flex; align-items: center; gap: 9px; }
.nvp-vnudge__icon { display: block; flex-shrink: 0; width: 16px; height: 16px; color: var(--nx-acc-hi); }
.nvp-vnudge__icon svg { display: block; width: 100%; height: 100%; }
.nvp-vnudge__txt { font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .62); }
/* Le nombre manquant et le pourcentage sont les deux seuls mots que l oeil
   doit accrocher : script.js les emballe dans des <b>, ils prennent l accent. */
.nvp-vnudge__txt b { display: inline-block; font-weight: 800; color: var(--nx-acc-hi); }

.nvp-vnudge__track {
  display: block; height: 5px; margin-top: 11px; overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
/* La largeur est posee en style inline par renderVolumes ; la transition la
   rend lisible — sans elle, la barre saute et on ne voit pas qu on avance.

   `!important` sur un selecteur de classe : `style.css` aplatit toutes les
   durees a .001ms via `*, *::before, *::after` sous prefers-reduced-motion,
   et une classe l emporte sur l universel a importance egale. Pour revenir au
   comportement respectueux du reglage systeme, retirer les deux `!important`
   de ce bloc et celui de `.pdx-vol__pop`.                                    */
.nvp-vnudge__bar {
  display: block; width: 0; height: 100%;
  border-radius: 999px;
  background: var(--nx-grad);
  transition: width .45s cubic-bezier(.16, 1, .3, 1) !important;
}

/* Pose par script.js uniquement quand le nombre a reellement change — pas au
   premier rendu, pas quand on coche un addon. */
.pdx-vol__pop { animation: nvpVolPop .34s cubic-bezier(.2, .8, .2, 1) !important; }
@keyframes nvpVolPop {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.32); }
  100% { transform: scale(1);    }
}

/*── Addons : seul le bouton ajoute ────────────────────────────────────────
  La ligne entiere etait une etiquette de formulaire : cliquer sur le nom, la
  description ou le prix cochait l option. On repartait avec la garantie sans
  l avoir demandee. La ligne est devenue une div, le `for` ne vit plus que sur
  le bouton — reste a ce que la ligne cesse d avoir l AIR cliquable, sinon le
  clic rate remplace le clic involontaire.

  `style.css` donne a `.pdx-addon` un `cursor: pointer` et eclaircit sa bordure
  au survol : les deux annonçaient une zone cliquable qui ne l est plus.       */
.nvp-buy .pdx-addon { cursor: default; }
.nvp-buy .pdx-addon:hover .nvp-addon__body { border-color: rgba(4, 54, 148, .28); }
/* La bordure verte de l etat « ajoute » doit survivre au survol de la ligne :
   le selecteur ci-dessus est a egalite de specificite avec la regle d origine,
   celui-ci passe devant les deux.                                             */
.nvp-buy .pdx-addon:hover .pdx-addon__cb:checked + .nvp-addon__body { border-color: rgba(25, 135, 84, .55); }
/* Le texte redevient selectionnable — il ne l etait pas tant que la ligne
   servait d etiquette. */
.nvp-buy .nvp-addon__body { user-select: text; }
.nvp-buy .nvp-addon__add { user-select: none; }

/*── Avis de l accueil : deux rangees + etat sans avis ─────────────────────
  La bande n avait qu une rangee. La seconde reprend les memes cartes dans
  l ordre inverse et defile a contresens : on lit deux flux, pas un doublon.

  Direction : `nxMarquee` va de 0 a -50 %. En sens inverse (`reverse`) la piste
  part de -50 % et revient a 0 — la boucle reste continue, aucun saut.
  Duree un peu plus longue (110 s contre 90 s) : deux rangees a la meme vitesse
  donnent l impression d une machine, deux vitesses voisines non.

  `!important` sur un selecteur de classe : meme raison que le defilement
  principal — `style.css` aplatit les durees a .001ms sous
  prefers-reduced-motion, et une classe l emporte sur le `*` universel.      */
.rv-marquee--rev .rv-marquee__track {
  animation-direction: reverse !important;
  animation-duration: 110s !important;
}
/* Le dernier defilement n a pas besoin de marge sous lui : l espacement vient
   du padding de la section. */
.sa-feedbacks .rv-marquee:last-child { margin-bottom: 0; }

/* Sans avis : meme famille visuelle que les cartes (fond, bordure, rayon),
   etoiles vides, un seul bouton. */
.rv-empty {
  display: flex; flex-direction: column; align-items: center;
  max-width: 560px; margin: 0 auto; padding: 38px 28px;
  text-align: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .06);
}
.rv-empty__stars { display: flex; gap: 4px; margin-bottom: 16px; }
.rv-empty__stars svg { width: 20px; height: 20px; fill: rgba(255, 255, 255, .13); }
.rv-empty .rv-empty__title { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: #fff; }
.rv-empty .rv-empty__text { max-width: 400px; margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .55); }
.rv-empty .rv-empty__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 24px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  color: #fff; font-size: 14px; font-weight: 700;
  transition: background .2s ease, border-color .2s ease !important;
}
.rv-empty .rv-empty__cta:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .24); }

/*── Meilleures ventes : bande qui defile, images entieres ─────────────────
  POURQUOI LES IMAGES ETAIENT COUPEES. Les visuels produit sont des bannieres
  16/9 (1920x1080). La grille de quatre les forcait en carre (format du modele
  astrashop) : `object-fit: cover` rognait donc les deux cotes — on lisait
  « ts » et « ducts » au lieu de « All Products ». Meme visuel, meme source,
  seulement mal cadre.

  La carte garde ici le 16/9 de la fiche produit : le visuel s affiche en
  entier et, comme il est ~5x plus grand que la carte (340 px), il reste net
  meme sur ecran Retina. Aucun `srcset` a prevoir, la source est deja la plus
  grande.

  Le defilement reutilise `.fs-marquee` (piste + clone, marges et non `gap`
  pour que le -50 % tombe pile). Seules la largeur de carte, la vitesse et la
  marge verticale changent.                                                  */
.fs-marquee--best {
  /* `overflow: hidden` coupe le soulevement au survol (-4px) et l ombre : on
     leur reserve de la place plutot que de les supprimer. */
  padding: 12px 0 26px;
}
.fs-marquee--best .fs-marquee__track {
  /* `--fs-dur` est calculee par le gabarit : 6 s par carte, donc la vitesse
     reste la meme quel que soit le nombre de produits. */
  animation-duration: var(--fs-dur, 60s) !important;
}
.fs-marquee--best .fs-marquee__track .product-card {
  width: 340px; margin-right: 22px;
  border-radius: 18px;
}
.fs-marquee--best .nvx-tile__media,
.fs-marquee--best .pc-thumb { aspect-ratio: 16 / 9; }
@media (max-width: 639px) {
  .fs-marquee--best .fs-marquee__track .product-card { width: 270px; margin-right: 14px; }
}

/*── Bandeaux des sections de l accueil ────────────────────────────────────
  Chaque section pose sous elle une nappe de lumiere, pour que l accueil se
  lise en trois temps au lieu d un long aplat. Les nappes alternent : droite
  pour les meilleures ventes, centre pour les categories, gauche pour les avis.

  AUCUNE LIGNE NI BORD. Une premiere version posait un filet de separation en
  haut de chaque section : il coupait la page. Le bandeau est maintenant masque
  en haut ET en bas (`mask-image`), donc sa teinte nait et meurt dans le fond
  du site sans jamais former d arete.

  Un `::before` pleine largeur (`left: 50%; width: 100vw`) et non un fond sur
  la section : `.section` est plafonnee a 1440px, son fond aurait des bords
  nets. `#sa-main { overflow-x: clip }` coupe ce qui depasse. `isolation`
  garde le pseudo-element DANS la section : derriere son contenu, devant le
  calque `.nx-bg`.

  Plus discret que le hero a dessein : c est lui la zone forte de la page.   */
.sa-featured, .sa-categories, .sa-feedbacks { position: relative; isolation: isolate; }
.sa-featured::before, .sa-categories::before, .sa-feedbacks::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.sa-featured::before   { background: radial-gradient(58% 78% at 84% 38%, rgba(56, 189, 248, .085), transparent 72%); }
.sa-categories::before { background: radial-gradient(64% 86% at 50% 50%, rgba(59, 130, 246, .075), transparent 74%); }
.sa-feedbacks::before  { background: radial-gradient(60% 82% at 12% 52%, rgba(79, 70, 229, .11), transparent 72%); }

/*═══════════════════════════════════════════════════════════════════════════
  PAGES LEGALES — BLOC « SUPPORT »
  ---------------------------------------------------------------------------
  Le snippet legal-support.njk a ete repris de l ancien theme FlashShp sans
  ses styles : le logo Discord, un SVG sans taille, prenait toute la largeur
  du texte. Memes regles qu a l origine, passees sur les jetons --nx-*.

  Le bloc vit DANS `.prose` (Terms, Privacy, Refund) : les selecteurs a trois
  classes neutralisent la marge des titres et la couleur soulignee des liens
  de `.prose`, quel que soit l ordre des fichiers.                          */
.legal-support { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--nx-line); }
.legal-support__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  color: var(--nx-fg);
}
.legal-support__intro { margin: 0 0 18px; font-size: 15px; color: var(--nx-muted); }

.legal-support__card {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 20px;
  border-radius: var(--nx-r-sm);
  border: 1px solid var(--nx-line-2);
  background: var(--nx-card);
}
.legal-support__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.legal-support__name { font-weight: 700; color: var(--nx-fg); }
.legal-support__sub  { font-size: 13.5px; color: var(--nx-muted); }

/* Blurple de Discord, pas le bleu du theme : c est la couleur qui annonce la
   destination, comme au raccourci de la navbar. */
.legal-support__btn {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  padding: 11px 18px;
  border-radius: var(--nx-r-sm);
  background: var(--nx-discord); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: 0 0 22px -8px rgba(88, 101, 242, .85);
  transition: background .2s ease, box-shadow .2s ease;
}
.legal-support__btn:hover {
  background: #6a75f4; color: #fff;
  box-shadow: 0 0 28px -6px rgba(88, 101, 242, .95);
}
.legal-support__btn svg { width: 19px; height: 14px; display: block; flex-shrink: 0; }

.page--legal .prose .legal-support { margin-top: 28px; padding-top: 22px; }
.page--legal .prose .legal-support__title { margin: 0 0 6px; padding-top: 0; border-top: 0; }
.page--legal .prose .legal-support__intro { margin: 0 0 16px; }
.page--legal .prose .legal-support__btn,
.page--legal .prose .legal-support__btn:hover { color: #fff; text-decoration: none; }

/* Refund Policy : custom.js remonte le bloc sous « How to Request a Refund ».
   On n y garde que la carte, le titre « Support » ferait doublon. Prefixe
   `.page--legal .prose` pour battre la regle a trois classes juste au-dessus. */
.page--legal .prose .legal-support--inline { margin: 4px 0 18px; padding-top: 0; border-top: 0; }
.legal-support--inline .legal-support__title,
.legal-support--inline .legal-support__intro { display: none; }

/* Sous 560px le bouton passe sous le texte et prend toute la largeur. */
@media (max-width: 560px) {
  .legal-support__card { flex-direction: column; align-items: stretch; gap: 14px; }
  .legal-support__btn { justify-content: center; }
}