@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

/*═══════════════════════════════════════════════════════════════════════════
  THEME « NOIR & BLEU » — FLASHSHP
  ---------------------------------------------------------------------------
  Charge APRES style.css : ce fichier repeint et retypographie le theme, il ne
  deplace rien. Aucune regle ici ne touche a une position, une largeur ou une
  grille — uniquement couleurs, polices, graisses, rayons et ombres.

  Le systeme visuel est celui des boutiques de reference du secteur, releve au
  navigateur puis reconstruit ici. Rien n'est copie de leur code : ce sont des
  valeurs de design (une palette, une echelle typographique, une recette de
  surface), pas du source.

  Les trois regles qui font tout le rendu :

    1. LE FOND RESTE NOIR. Le bleu n'est pas une teinture de page, c'est de la
       lumiere — halos radiaux a faible opacite, degrades de boutons, prix.
       Teinter le fond en bleu nuit ecrase le contraste.

    2. UNE SEULE RECETTE DE SURFACE, partout (--fs-surface-recipe plus bas) :
       fond #10131b, voile blanc en degrade tres faible, bordure 1px, filet
       clair en haut a l'interieur, et une ombre bleue large et tres diffuse
       sous la carte. C'est ce qui donne l'impression de verre.

    3. TITRES LOURDS ET SERRES. Poppins 900, interlettrage negatif (-.055em a
       -.075em), interligne .92. C'est la signature typographique du style.

  Pour revenir au theme d'origine : supprimer ce fichier.
═══════════════════════════════════════════════════════════════════════════*/

html:root {
  /* ── Noirs ─────────────────────────────────────────────────────────── */
  --fs-bg:         #080a0f;   /* canvas */
  --fs-card:       #10131b;   /* cartes, modales, panneaux */
  --fs-card-2:     #151927;   /* survol, champs */
  --fs-card-3:     #1b2130;   /* tuiles d'icone, etats actifs */

  /* ── Traits ────────────────────────────────────────────────────────── */
  --fs-line:       #252b3a;
  --fs-line-2:     rgba(58, 66, 86, .9);   /* bordure des surfaces en verre */
  --fs-line-3:     rgba(23, 107, 255, .45);

  /* ── Bleus ─────────────────────────────────────────────────────────── */
  --fs-acc:        #176bff;   /* le bleu de reference */
  --fs-acc-mid:    #178fff;
  --fs-acc-hi:     #3be7ff;   /* cyan : prix, sur-titres, accents fins */
  --fs-grad:       linear-gradient(135deg, #176bff 0%, #178fff 48%, #3be7ff 115%);
  --fs-grad-hi:    linear-gradient(135deg, #2f7cff 0%, #3a9fff 48%, #64edff 115%);

  /* ── Texte ─────────────────────────────────────────────────────────── */
  --fs-fg:         #f5f7ff;
  --fs-muted:      #9ca3b8;

  /* ── Geometrie ─────────────────────────────────────────────────────── */
  --fs-r:          1.35rem;   /* cartes, tuiles, gros boutons */
  --fs-r-sm:       1.05rem;   /* boutons compacts, pilules */

  --fs-ok:         #22c55e;

  /* Polices : une seule famille pour tout le site. */
  --font-ui:       'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-logo:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Jetons natifs du theme SellAuth (master.njk les redeclare en :root,
     d'ou le html:root ici qui gagne en specificite). */
  --cl-accent:  23 107 255;
  --cl-bg:       8  10  15;
  --cl-surface: 16  19  27;
  --cl-fg:     245 247 255;
  --cl-muted:  156 163 184;
  --cl-border:  37  43  58;

  /* Jetons de la page Avis (declares en :root par style.css).
     `--rv-accent` sert au chrome de la page (pilules, filtres, surbrillances),
     pas aux prix : il prend donc le bleu principal et non le cyan. */
  --rv-accent: var(--fs-acc);
  --rv-grad:   var(--fs-grad);
  --rv-ink:    #ffffff;
}

/*───────────────────────────────────────────────
  FOND DE PAGE
  Noir plat, plus trois halos bleus discrets sur un calque fixe. Le calque
  evite background-attachment: fixed, casse sur iOS et couteux au defilement.
───────────────────────────────────────────────*/
html { background-color: var(--fs-bg); }
body { background: transparent; color: var(--fs-fg); font-family: var(--font-ui); }

body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 78% 46% at 50% -6%, rgba(23, 107, 255, .15) 0%, transparent 64%),
    radial-gradient(ellipse 52% 38% at 85% 16%, rgba(59, 231, 255, .06) 0%, transparent 70%),
    radial-gradient(ellipse 58% 42% at 8% 94%,  rgba(23, 107, 255, .07) 0%, transparent 72%);
}

body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb {
  background: rgba(23, 107, 255, .38); border-color: var(--fs-bg);
}
body::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:hover { background: rgba(23, 107, 255, .58); }
body::-webkit-scrollbar-track, html::-webkit-scrollbar-track { background: var(--fs-bg); }
html { scrollbar-color: rgba(23, 107, 255, .4) var(--fs-bg); }

::selection { background: rgba(23, 107, 255, .35); color: #fff; }

:focus-visible { outline-color: var(--fs-acc-mid); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: rgba(23, 143, 255, .6); }

/*───────────────────────────────────────────────
  TYPOGRAPHIE
  Poppins 900 et interlettrage negatif sur tout ce qui est titre. Les tailles
  sont en clamp() pour que les gros titres ne debordent pas sur mobile.
───────────────────────────────────────────────*/
.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.075em;
  /* L'interlettrage negatif resserre aussi les espaces : sans compensation,
     « Welcome to the » se lit « Welcometothe ». On rend l'espace aux mots
     sans relacher les lettres, qui font la signature du titre. */
  word-spacing: .22em;
  line-height: .92;
}
.section__title,
.rv-hero h1, .pdx-sec__title, .pdx-head__name {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.055em;
}
.section__title { font-size: clamp(28px, 4.2vw, 48px); line-height: 1.02; }

.stats__value, .stat__number, .pc-price, .pdx-buy__price {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.055em;
}
.nav__logo, .footer__logo { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; }

.hero__eyebrow-text, .section__sub, .pdx-sec__sub { font-family: var(--font-ui); }
.hero__sub, .section__sub { color: var(--fs-muted); }

/*───────────────────────────────────────────────
  BADGE DU HERO
  Le sur-titre n'est plus un texte encadre de deux filets, mais une pilule en
  verre avec une pastille verte qui halote : c'est un signal de confiance
  place avant meme le titre.

  Fait entierement en CSS sur le balisage d'origine — les deux filets sont
  masques et la pastille est un ::before. Aucune modification de gabarit :
  le badge suit donc la boutique en ligne avec ce seul fichier.
───────────────────────────────────────────────*/
.hero__eyebrow {
  position: relative;   /* repere pour l'onde du ::after */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 25px 50px -12px rgba(23, 107, 255, .1);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  max-width: 100%;
}
.hero__eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fs-ok);
  box-shadow: 0 0 18px var(--fs-ok);
  animation: fsDotBreathe 2.4s ease-in-out infinite;
}
/* Halo qui se propage — meme animation que la pastille « live » du catalogue
   (statDotPulse dans style.css), pour que les deux signaux se ressemblent.
   Le ::before etant deja pris par la pastille, l'onde est un ::after place en
   absolu sur elle : left = le padding gauche de la pilule, donc les deux
   cercles sont concentriques. */
.hero__eyebrow::after {
  content: ''; position: absolute; z-index: 0;
  left: 16px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%;
  border: 1px solid var(--fs-ok);
  animation: fsDotPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes fsDotPulse {
  0%        { transform: scale(.6); opacity: .85; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
@keyframes fsDotBreathe {
  0%, 100% { box-shadow: 0 0 18px var(--fs-ok); }
  50%      { box-shadow: 0 0 26px var(--fs-ok); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow::after  { animation: none; opacity: 0; }
  .hero__eyebrow::before { animation: none; }
}
.hero__eyebrow-line { display: none; }
.hero__eyebrow-text {
  color: var(--fs-muted);
  font-size: 12px; font-weight: 700;
  letter-spacing: normal; text-transform: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*───────────────────────────────────────────────
  HERO
───────────────────────────────────────────────*/
.hero::before {
  background:
    radial-gradient(ellipse 56% 46% at 50% 0%, rgba(23, 107, 255, .13) 0%, transparent 68%),
    radial-gradient(ellipse 28% 24% at 50% 6%, rgba(59, 231, 255, .07) 0%, transparent 72%);
}
/* Le titre reste blanc ; seule la portion marquee .grad passe en degrade —
   c'est le contraste blanc / bleu sur deux lignes qui fait la signature.
   Le span est pose dans le titre via settings.json. */
.hero__title .grad {
  background-image: var(--fs-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* L'interlettrage negatif raccourcit la largeur d'avance du span, mais pas
     l'encre des glyphes : le dernier caractere depasse la boite d'environ
     .1em. Or background-clip: text ne peint que DANS la boite — la panse du
     dernier glyphe ressortait donc transparente. On elargit la zone peinte
     et on annule l'elargissement en marge, pour ne pas decaler le centrage. */
  padding: 0 .1em 0 .04em;
  margin:  0 -.1em 0 -.04em;
}

/*───────────────────────────────────────────────
  RECETTE DE SURFACE
  Le coeur du style : fond sombre + voile blanc degrade + bordure + filet
  clair interieur en haut + halo bleu large et tres diffuse sous l'element.
───────────────────────────────────────────────*/
.product-card,
.category-card,
.testimonial,
.pd-checkout,
.cry-modal,
.co-modal,
.inv-card,
.rv-card,
.sort-filter__panel,
.lang-dropdown {
  background-color: var(--fs-card);
  background-image: linear-gradient(rgba(245, 247, 255, .043), rgba(245, 247, 255, .02));
  border: 1px solid var(--fs-line-2);
  border-radius: var(--fs-r);
  box-shadow:
    inset 0 1px 0 0 rgba(245, 247, 255, .06),
    0 26px 70px -54px rgba(23, 107, 255, .8);
}
.product-card:hover,
.category-card:hover,
.rv-card:hover {
  border-color: rgba(23, 107, 255, .5);
  box-shadow:
    inset 0 1px 0 0 rgba(245, 247, 255, .09),
    0 30px 80px -50px rgba(23, 107, 255, .95);
}

/* Panneaux lateraux : meme fond, mais pas d'arrondi ni d'ombre flottante. */
.cart-panel, .drawer {
  background-color: var(--fs-card);
  background-image: linear-gradient(rgba(245, 247, 255, .03), transparent 40%);
  border-left: 1px solid var(--fs-line);
}
.stats-bar {
  background-image: linear-gradient(rgba(245, 247, 255, .055), rgba(245, 247, 255, .02));
  border-color: rgba(255, 255, 255, .08);
}
.stats__divider, .section__divider, .footer-wrap { border-color: var(--fs-line); background-color: var(--fs-line); }
.footer-wrap { background-color: transparent; }

/*───────────────────────────────────────────────
  BOUTONS
  Bouton plein = degrade bleu, texte blanc, coins tres arrondis.
───────────────────────────────────────────────*/
.btn-primary,
.co-submit,
.inv-btn,
.pd-btn-buynow,
.pdv3-btn-checkout,
.page-btn.active,
.cart-panel__checkout {
  background: var(--fs-grad);
  color: #fff;
  border-color: transparent;
  border-radius: var(--fs-r-sm);
  font-weight: 600;
  box-shadow: 0 18px 40px -22px rgba(23, 107, 255, .95);
}
.btn-primary:hover,
.inv-btn:hover,
.pd-btn-buynow:hover,
.cart-panel__checkout:hover {
  background: var(--fs-grad-hi);
  box-shadow: 0 22px 50px -20px rgba(23, 107, 255, 1);
}
.btn-primary:active { background: var(--fs-grad); }
.btn-primary--lg { border-radius: var(--fs-r); }

/* ── Les deux appels a l'action du hero ──
   Meme gabarit pour les deux (48px de haut, meme rayon, meme padding) : seule
   la couleur les distingue. Le second prend le blurple Discord, qui se
   reconnait sans lire le libelle. */
.hero__cta { gap: 16px; }

#heroCta1,
#heroCta2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 28px;
  border: 0; border-radius: var(--fs-r);
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  color: #fff; white-space: nowrap;
}
#heroCta1 svg, #heroCta2 svg { flex-shrink: 0; }

#heroCta1 {
  background: var(--fs-grad);
  box-shadow: 0 0 20px -6px rgba(0, 85, 251, .5);
  transition: box-shadow .2s ease, filter .2s ease;
}
#heroCta1:hover {
  background: var(--fs-grad);
  box-shadow: 0 0 32px -6px rgba(0, 85, 251, .65);
  filter: brightness(1.1);
}
#heroCta1:active { transform: translateY(1px); }

#heroCta2 {
  background: #5865f2;
  box-shadow: 0 8px 24px -8px rgba(88, 101, 242, .6);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
#heroCta2:hover {
  background: #6a75f4;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(88, 101, 242, .75);
}
#heroCta2:active { transform: translateY(0); }

/* Pilule secondaire (filtres, pagination) : verre discret, texte clair. */
.rv-pill, .rv-sort__btn, .sort-filter__btn, .page-btn {
  background-color: rgba(30, 36, 48, .3);
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-sm);
  color: var(--fs-fg);
}
.rv-pill:hover, .rv-sort__btn:hover, .sort-filter__btn:hover, .page-btn:hover {
  border-color: var(--fs-line-3);
  background-color: rgba(23, 107, 255, .1);
}

/*───────────────────────────────────────────────
  LIEN « VIEW ALL » D'EN-TETE DE SECTION
  Le titre porte deja le poids visuel : ce lien doit se lire comme une sortie
  discrete, pas comme un second bouton principal. Il reste donc gris tant
  qu'on ne le touche pas, et ne prend l'accent qu'au survol.

  La fleche vit dans sa propre pastille ronde, seule piece qui bouge : elle
  avance de 2px et se remplit du degrade. Un mouvement unique et court se lit
  comme une direction ; tout animer d'un coup ne lit plus rien.

  Le padding est asymetrique (15px a gauche, 8px a droite) parce que la
  pastille apporte deja sa propre marge optique a droite.
───────────────────────────────────────────────*/
.section__link {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  height: 36px; padding: 0 8px 0 15px;
  border: 1px solid var(--fs-line);
  border-radius: 999px;
  background-color: rgba(30, 36, 48, .45);
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: var(--fs-muted); white-space: nowrap;
  transition: color .22s ease, border-color .22s ease,
              background-color .22s ease, box-shadow .22s ease,
              transform .12s ease;
}
.section__link svg {
  width: 22px; height: 22px; padding: 3.5px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .06);
  color: var(--fs-fg);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1),
              background-color .22s ease, color .22s ease;
}

.section__link:hover {
  color: var(--fs-fg);
  border-color: var(--fs-line-3);
  background-color: rgba(23, 107, 255, .12);
  box-shadow: 0 0 24px -9px rgba(23, 107, 255, .85);
}
.section__link:hover svg {
  background: var(--fs-grad);
  color: #fff;
  transform: translateX(2px);
}
.section__link:active { transform: translateY(1px); }

.section__link:focus-visible {
  outline: none;
  color: var(--fs-fg);
  border-color: var(--fs-acc);
  box-shadow: 0 0 0 3px rgba(23, 107, 255, .32);
}

@media (prefers-reduced-motion: reduce) {
  .section__link, .section__link svg { transition: none; }
  .section__link:hover svg { transform: none; }
}

.btn-ghost:hover { background: rgba(23, 107, 255, .1); }
.btn-icon:hover  { background: rgba(23, 107, 255, .12); }

/*───────────────────────────────────────────────
  CARTE PRODUIT
  Le prix est l'information qu'on lit en premier : cyan, 900, serre.
───────────────────────────────────────────────*/
/*───────────────────────────────────────────────
  RANGEE DE PRODUITS QUI DEFILE
  La piste contient deux moities identiques et se translate de -50% : arrivee
  au bout de la premiere, elle est exactement revenue au depart, donc la
  boucle est invisible. Aucun JavaScript, aucun saut.

  Les deux masques degrades sur les bords evitent que les cartes soient
  tranchees net : elles entrent et sortent en fondu.
───────────────────────────────────────────────*/
.fs-marquee {
  position: relative;
  overflow: hidden;
  border-radius: 1.6rem;
  /* Deborde la largeur du .section pour que le fondu morde hors du contenu. */
  margin: 28px -8px 0;
}
.fs-marquee::before,
.fs-marquee::after {
  content: ''; position: absolute; inset-block: 0; z-index: 2;
  width: 64px; pointer-events: none;
}
.fs-marquee::before { left: 0;  background: linear-gradient(to right, var(--fs-bg) 0%, rgb(8 10 15 / .8) 45%, transparent 100%); }
.fs-marquee::after  { right: 0; background: linear-gradient(to left,  var(--fs-bg) 0%, rgb(8 10 15 / .8) 45%, transparent 100%); }

.fs-marquee__track {
  display: flex; width: max-content; gap: 16px;
  padding: 0 8px 12px;
  animation: fsMarquee 34s linear infinite;
}
/* Au survol, on suspend : le visiteur veut lire une carte, pas la poursuivre. */
.fs-marquee:hover .fs-marquee__track,
.fs-marquee:focus-within .fs-marquee__track { animation-play-state: paused; }

/* La copie doit se comporter comme les cartes qui la precedent, pas comme un
   bloc a part : `display: contents` la fait disparaitre de la mise en page. */
.fs-marquee__clone { display: contents; }

@keyframes fsMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.fs-marquee .product-card { flex: 0 0 265px; width: 265px; }
@media (max-width: 520px) { .fs-marquee .product-card { flex-basis: 232px; width: 232px; } }

/* Sans animation : la rangee devient une simple bande a faire defiler au
   doigt ou a la molette. Le contenu reste entierement atteignable.
   Le `!important` est necessaire ici parce que le bloc reduced-motion plus bas
   en porte un aussi : c'est ce qui laisse le reglage autoscroll du theme
   reprendre la main, sa specificite etant la plus forte des deux. */
.fs-marquee--static { overflow-x: auto; }
.fs-marquee--static .fs-marquee__track { animation-name: none !important; }

/* La rangee continue de defiler meme sous prefers-reduced-motion : c'est un
   choix assume de la boutique, les cartes qui depassent de l'ecran ne sont pas
   atteignables autrement. `style.css` coupe toutes les animations du site sous
   ce reglage (`* { animation-duration: .001ms !important }`), donc on rearme
   les quatre longhands ici. `animation-play-state` reste volontairement hors
   du `!important` pour que la pause au survol garde la main. */
@media (prefers-reduced-motion: reduce) {
  .fs-marquee__track {
    animation-name: fsMarquee !important;
    animation-duration: 34s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
}

/* Sur-titre de section, en petites capitales cyan. */
.section__eyebrow {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fs-acc-hi);
}

/*───────────────────────────────────────────────
  MUR D'AVIS QUI DEFILE
  Deux rangees en sens opposes. Meme mecanique que la rangee produits — deux
  moities identiques translatees de -50%, donc boucle invisible sans JS.

  Le fondu des bords se fait ici par `mask-image` et non par deux calques
  degrades poses par-dessus : le masque decoupe reellement le contenu, donc il
  fonctionne quel que soit le fond derriere, la ou un calque opaque aurait
  laisse une bande plus sombre sur les halos bleus de la page.
───────────────────────────────────────────────*/
.fs-wall {
  display: flex; flex-direction: column; gap: 20px;
  margin-top: 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.fs-wall__row { overflow: hidden; }
.fs-wall__track {
  display: flex; width: max-content; gap: 20px;
  animation: fsWall 46s linear infinite;
}
.fs-wall__track--reverse { animation-direction: reverse; }
.fs-wall__row:hover .fs-wall__track { animation-play-state: paused; }
.fs-wall__clone { display: contents; }

@keyframes fsWall {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Meme choix que pour la rangee produits : le mur defile aussi sous
   prefers-reduced-motion, donc on rearme les longhands que le reset global de
   `style.css` ecraserait. La pause au survol reste intacte, la propriete
   `animation-play-state` n'etant pas forcee. */
@media (prefers-reduced-motion: reduce) {
  .fs-wall__track {
    animation-name: fsWall !important;
    animation-duration: 46s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
}

/* ── La carte ── */
.fs-rv {
  position: relative; overflow: hidden;
  flex: 0 0 320px; width: 320px;
  display: flex; flex-direction: column; gap: 14px;
  margin: 0; padding: 20px;
  border-radius: var(--fs-r);
  border: 1px solid var(--fs-line);
  background: var(--fs-card);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
@media (min-width: 640px) { .fs-rv { flex-basis: 360px; width: 360px; } }
.fs-rv:hover {
  transform: translateY(-4px);
  border-color: rgba(23, 107, 255, .5);
  box-shadow: 0 18px 50px -24px rgba(0, 85, 251, .55);
}
.fs-rv__line {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(23, 107, 255, .7), transparent);
  opacity: .7; pointer-events: none;
  transition: opacity .3s ease;
}
.fs-rv:hover .fs-rv__line { opacity: 1; }

.fs-rv__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fs-rv__stars { display: flex; gap: 2px; color: #fbbf24; flex-shrink: 0; }
.fs-rv__stars svg { width: 14px; height: 14px; }
.fs-rv__tag {
  padding: 3px 8px; border-radius: 999px;
  background: rgba(245, 247, 255, .05);
  border: 1px solid var(--fs-line);
  color: var(--fs-muted);
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%;
}

.fs-rv__quote {
  margin: 0; flex: 1;
  font-size: 14.5px; font-weight: 500; line-height: 1.55; color: var(--fs-fg);
}

.fs-rv__who { display: flex; align-items: center; gap: 10px; }
.fs-rv__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  color: #fff; font-size: 12px; font-weight: 800;
}
.fs-rv__name { display: block; font-size: 13.5px; font-weight: 700; color: var(--fs-fg); }
.fs-rv__role {
  display: flex; align-items: center; gap: 5px; margin-top: 1px;
  font-size: 11.5px; color: var(--fs-muted);
}
.fs-rv__role svg { width: 12px; height: 12px; color: var(--fs-ok); flex-shrink: 0; }

/*───────────────────────────────────────────────
  CARTE PRODUIT — mise en page empilee
  Le theme d'origine posait les informations EN SURIMPRESSION du visuel, dans
  une carte au format 5/3. On passe a une carte empilee : visuel en haut,
  informations dessous, action en bas. Deux raisons :
    - le texte cesse de dependre de la luminosite de l'image ;
    - il y a la place pour le delai, le prix de depart et un vrai bouton.
───────────────────────────────────────────────*/
.product-card {
  aspect-ratio: auto;
  display: flex; flex-direction: column;
}
.pc-thumb {
  position: relative; inset: auto;
  width: 100%; aspect-ratio: 16 / 10;
  display: block;
}
.pc-info {
  position: relative; left: auto; right: auto; bottom: auto;
  margin-top: auto;                 /* colle le bloc en bas si la carte est etiree */
  padding: 12px 14px 14px;
  background: none;                 /* le degrade sombre ne sert plus a rien */
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 9px;
}
/* La superposition « Buy Now » au survol est remplacee par un bouton permanent. */
.pc-buy-hover { display: none; }

/* Ligne du haut : delai de livraison, et la note si elle existe. */
.pc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(23, 107, 255, .14);
  border: 1px solid rgba(23, 107, 255, .3);
  color: var(--fs-acc-hi);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pc-chip svg { width: 10px; height: 10px; }
.pc-rating { font-size: 11.5px; font-weight: 600; color: var(--fs-muted); }
.pc-rating-count { color: rgba(156, 163, 184, .65); font-weight: 500; }

.pc-title {
  font-size: 14.5px; font-weight: 600; color: var(--fs-fg);
  letter-spacing: -.01em; margin-bottom: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pc-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
/* « A partir de » n'apparait que si le prix varie (groupe, ou fourchette). */
.pc-from {
  flex-basis: 100%;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fs-muted); line-height: 1;
}
.pc-price-orig { font-size: 12px; color: var(--fs-muted); text-decoration: line-through; margin-right: 0; }

/* Pastille de disponibilite, posee sur le visuel. */
.pc-stockdot {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(8, 10, 15, .72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.pc-stockdot i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pc-stockdot--in      { color: #4ade80; }
.pc-stockdot--in i    { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .9); }
.pc-stockdot--out     { color: #f87171; }
.pc-stockdot--out i   { background: #ef4444; }

/* L'action, pleine largeur. */
.pc-buy {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 38px; margin-top: 1px;
  border-radius: var(--fs-r-sm);
  background: var(--fs-grad); color: #fff;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 14px 32px -20px rgba(23, 107, 255, .95);
  transition: filter .2s ease, box-shadow .2s ease;
}
.pc-buy svg { width: 14px; height: 14px; }
.product-card:hover .pc-buy { filter: brightness(1.1); box-shadow: 0 16px 38px -18px rgba(23, 107, 255, 1); }
/* Produit epuise : le bouton s'efface, il ne promet plus rien. */
.product-card[data-stock="0"] .pc-buy { opacity: .45; filter: grayscale(.5); }

/* Les references tiennent visuellement sur leurs jaquettes ; nos produits
   n'ont pas d'image chargee, la vignette de repli est donc un aplat vide.
   On lui donne une pochette generee — degrade bleu en diagonale + halo — pour
   que la carte tienne debout en attendant de vrais visuels. Des qu'une image
   est chargee, .pc-thumb--img prend le dessus et cette regle ne s'applique
   plus. */
.pc-thumb:not(.pc-thumb--img) {
  background:
    radial-gradient(ellipse 70% 60% at 78% 12%, rgba(59, 231, 255, .16) 0%, transparent 62%),
    linear-gradient(150deg, #16233d 0%, #101728 46%, #0b0f18 100%);
}
.pc-thumb:not(.pc-thumb--img) .pc-big-text { color: rgba(245, 247, 255, .17); }

.pc-price { color: var(--fs-acc-hi); font-size: 1.5rem; }
.pc-price-orig { color: var(--fs-muted); }
.pc-title { font-weight: 600; }

/* Pastille « en stock » a la couleur de succes, hors palette bleue. */
.pc-stock--in  { background: rgba(34, 197, 94, .1);  border-color: rgba(34, 197, 94, .28);  color: var(--fs-ok); }
.pc-label--featured { background: rgba(23, 107, 255, .16); border-color: rgba(23, 107, 255, .38); color: var(--fs-acc-hi); }
.badge--new         { background: rgba(23, 107, 255, .16); border-color: rgba(23, 107, 255, .38); color: var(--fs-acc-hi); }

/* Tuiles sombres : icones de categorie, vignettes du panier, bouton au survol */
.pc-buy-btn,
.sidebar__cat-icon,
.sidebar__item-icon,
.cart-panel__item-icon {
  background: var(--fs-card-2);
  border-color: var(--fs-line);
  color: var(--fs-fg);
}
.pc-buy-btn { background: var(--fs-grad); color: #fff; border-color: transparent; border-radius: var(--fs-r-sm); font-weight: 700; }
.product-card:hover .pc-buy-btn:hover { background: var(--fs-grad-hi); }
.sidebar__item:hover .sidebar__item-icon { background: var(--fs-card-3); border-color: var(--fs-line-2); }
.sidebar__item.active::before { background: var(--fs-acc-mid); box-shadow: 0 0 10px rgba(23, 143, 255, .9); }

/*───────────────────────────────────────────────
  NAVIGATION ET PIED DE PAGE
───────────────────────────────────────────────*/
/* ── Barre flottante ──
   La barre n'est plus une bande pleine largeur collee en haut, mais une
   pilule qui flotte. Deux elements se partagent le role :

     .nav        reserve la hauteur et reste fixe, mais devient TRANSPARENT et
                 `pointer-events: none` — sinon une bande invisible de 76px
                 couvrirait toute la largeur de l'ecran et avalerait les clics
                 de part et d'autre de la pilule.
     .nav__inner porte le fond, la bordure, le flou et les coins ronds, et
                 reprend `pointer-events: auto` pour redevenir cliquable. */
.nav {
  height: 76px;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
  pointer-events: none;
}
.nav.scrolled { background: transparent; box-shadow: none; }

.nav__inner {
  pointer-events: auto;
  width: min(1100px, calc(100% - 32px));
  height: 56px;
  margin: 12px auto 0;
  /* Plus de marge a droite qu'a gauche : « Sign In » est un aplat colore, il
     touchait le bord de la pilule alors que le logo, lui, a de l'air autour. */
  padding: 0 16px 0 20px;
  border-radius: 999px;
  background: rgba(8, 10, 15, .72);
  border: 1px solid rgba(30, 36, 48, .5);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nav.scrolled .nav__inner {
  background: rgba(8, 10, 15, .92);
  border-color: rgba(37, 43, 58, .85);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .55);
}

/* Ces elements etaient cales sur une barre de 72px : dans une pilule de 56px
   ils debordaient. On les ramene a la hauteur interieure. */
.nav__links a,
.nav__lang,
.nav__hamburger { height: 40px; }
.nav__actions { gap: 14px; }

/* Logo image. La hauteur est fixee et la largeur suit : le fichier fait
   127x72, mais c'est le rapport qui compte, pas ses pixels. */
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo-img { height: 30px; width: auto; display: block; }
@media (max-width: 639px) { .nav__logo-img { height: 26px; } }

.nav__links a {
  position: relative;
  padding: 0 12px;
  color: var(--fs-muted); font-weight: 500;
}
.nav__links a:hover { color: var(--fs-fg); }
/* Soulignement qui se deploie de la gauche au survol. */
.nav__links a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 1px;
  background: var(--fs-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.nav__links a:hover::after { transform: scaleX(1); }

/* ── Actions de droite ──
   Deux poids differents, et c'est voulu : le panier est une tuile discrete
   qu'on ne remarque que quand on la cherche, « Sign In » est un aplat bleu
   compact. Le bleu PLEIN, pas le degrade : dans une pilule de 56px le degrade
   attirait trop l'oeil et concurrencait les boutons du hero. */
.nav__login {
  /* Pas de marge propre : le `gap` de .nav__actions suffit. La marge de 8px
     s'y ajoutait et creusait un ecart de 22px entre le panier et « Sign In »,
     contre 14px entre Discord et le panier — la rangee etait irreguliere. */
  height: 28px; padding: 0 10px; margin-left: 0;
  border: 0; border-radius: 12px;
  background: var(--fs-acc); color: #fff;
  font-size: 12.8px; font-weight: 500;
  box-shadow: none;
  transition: background .2s ease, box-shadow .2s ease;
}
.nav__login:hover {
  background: #2f7cff; color: #fff;
  box-shadow: 0 0 22px -6px rgba(23, 107, 255, .8);
}
/* Le libelle se suffit a lui-meme : l'icone de personne faisait doublon. */
.nav__login svg { display: none; }

/* Panier : carre a icone seule. Le mot « Cart » disparait — l'icone est
   universelle et la barre a besoin de sa place. */
.nav__cart {
  position: relative;
  width: 36px; height: 36px; padding: 0;
  border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--fs-fg);
  transition: background .2s ease;
  /* Le bouton etait concu pour « icone + libelle » : il alignait donc son
     contenu au debut, avec un ecart de 7px entre les deux. Le libelle masque,
     l'icone restait calee a gauche — 9px hors du centre. On recentre et on
     supprime l'ecart, qui n'a plus rien a separer. */
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.nav__cart:hover { background: var(--fs-card-2); }
.nav__cart-label { display: none; }
.nav__cart svg { width: 16px; height: 16px; }
/* Le compteur devient une pastille posee sur le coin, faute de place en ligne.
   Elle mord SUR le carre plutot que de deborder au-dessus : en debordant, elle
   ajoutait de la matiere en haut du panier et le faisait paraitre plus haut
   que ses voisins, alors que les boites sont exactement alignees. */
.nav__cart-count {
  position: absolute; top: -2px; right: -2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--fs-acc); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 1;
  /* Un lisere de la couleur de la pilule detache la pastille de l'icone. */
  box-shadow: 0 0 0 2px rgba(8, 10, 15, .92);
}

.nav__lang { padding: 0 10px; border-radius: 12px; }
.nav__lang:hover { background: var(--fs-card-2); }

/* Raccourci Discord, a gauche du panier. Il porte le blurple de la marque et
   pas le bleu du theme : c'est justement sa reconnaissance instantanee qui le
   rend utile — un carre bleu quelconque ne dirait rien. */
.nav__discord {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border: 0; border-radius: 12px;
  background: #5865f2; color: #fff;
  /* Halo centre, pas porte vers le bas. Une ombre decalee vers le bas donnait
     du poids sous le bouton et le faisait lire plus bas que le panier — d'ou
     une impression de desalignement alors que les deux boites coincident. */
  box-shadow: 0 0 22px -8px rgba(88, 101, 242, .85);
  transition: background .2s ease, box-shadow .2s ease;
}
.nav__discord:hover {
  background: #6a75f4; color: #fff;
  box-shadow: 0 0 28px -6px rgba(88, 101, 242, .95);
}
.nav__discord svg { width: 17px; height: 13px; display: block; }
/* Sous 900px la pilule est deja pleine ; le lien reste dans le hero et le
   tiroir mobile, on ne perd donc rien en le retirant ici. */
@media (max-width: 900px) { .nav__discord { display: none; } }

@media (max-width: 639px) {
  .nav__inner { width: calc(100% - 20px); padding: 0 6px 0 14px; }
}
.nav__cart-count { background: var(--fs-grad); color: #fff; }
.sa-announce { background: rgba(23, 107, 255, .12); border-bottom: 1px solid var(--fs-line); }

.footer__col-links a, .footer__desc, .footer__copy { color: var(--fs-muted); }
.footer__col-links a:hover { color: var(--fs-acc-hi); }

/*───────────────────────────────────────────────
  BAS DE PAGE
  Le pied n'est plus une bande pleine largeur separee du reste par un filet,
  mais une carte posee sur le fond — meme rayon, meme bordure, meme verre que
  les autres blocs. Le filet horizontal coupait la page en deux ; la carte la
  termine.

  Deux halos flous (bleu en haut a gauche, cyan en bas a droite) creusent le
  degrade. Ils sont purement decoratifs : hors du flux, sans evenement souris,
  et rognes par le `overflow: hidden` de la carte.

  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.
───────────────────────────────────────────────*/
.footer-wrap {
  border-top: 0;
  background-color: transparent;
  padding: 0 80px 40px;
}

.footer {
  position: relative;
  isolation: isolate;   /* borne les halos en z-index negatif a cette carte */
  overflow: hidden;
  max-width: 1440px;
  margin: 0 auto;
  padding: 44px 44px 26px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.8rem;
  background-image: linear-gradient(180deg, rgba(21, 25, 39, .72), rgba(8, 10, 15, .92));
  box-shadow: 0 28px 100px -78px rgba(23, 107, 255, .95);
}

.footer::before,
.footer::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 256px; height: 256px;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}
.footer::before { top: -96px;    left: -96px;  background-color: rgba(23, 107, 255, .14); }
.footer::after  { bottom: -112px; right: 25%;  background-color: rgba(103, 232, 249, .08); }

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

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

.footer__logo { display: inline-flex; align-items: center; margin-bottom: 16px; }
.footer__logo-img { display: block; height: 40px; width: auto; }
.footer__desc { font-size: 14px; line-height: 24px; max-width: 20rem; }

/* Pastilles sociales : meme grammaire que la pilule « View all ». */
.footer__socials {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-top: 20px; margin-left: 0;
}
.footer__social {
  width: auto; height: auto;
  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-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  color: var(--fs-muted);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.footer__social:hover {
  color: var(--fs-acc-hi);
  border-color: rgba(59, 231, 255, .5);
  background-color: rgba(23, 107, 255, .1);
}

/* Titres de colonne clairs et lourds, liens en retrait : c'est le contraste
   entre les deux qui donne la hierarchie, pas la taille. */
.footer__col-title {
  margin-bottom: 14px;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(245, 247, 255, .9);
}
.footer__col-links { gap: 10px; }
.footer__col-links a { font-size: 14px; line-height: 20px; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 22px;
}

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

/*───────────────────────────────────────────────
  CHAMPS DE SAISIE
───────────────────────────────────────────────*/
.co-promo-input, .inv-input, .co-input {
  background: var(--fs-card-2); border-color: var(--fs-line); border-radius: var(--fs-r-sm);
}
.co-promo-input:focus, .inv-input:focus, .co-input:focus,
input:focus, textarea:focus, select:focus { border-color: rgba(23, 143, 255, .6); }

/*───────────────────────────────────────────────
  FICHE PRODUIT — jetons dedies (--pdx-*)
───────────────────────────────────────────────*/
.pdx-page {
  --pdx-accent:      var(--fs-acc-hi);
  --pdx-accent-line: rgba(23, 107, 255, .45);
  --pdx-accent-soft: rgba(23, 107, 255, .09);
  --pdx-accent-glow: rgba(23, 107, 255, .26);
  --pdx-accent-grad: var(--fs-grad);
  --pdx-panel:       rgba(245, 247, 255, .03);
  --pdx-panel-hi:    rgba(245, 247, 255, .055);
  --pdx-line:        var(--fs-line);
  --pdx-r:           var(--fs-r);
}
/* Ces deux elements posaient un texte presque noir sur l'ancien degrade clair.
   Le degrade est desormais bleu fonce : le texte doit passer en blanc. */
.pdx-plan__flag,
.pdx-feat__icon { color: #fff; }

/*───────────────────────────────────────────────
  TUILES DE STATISTIQUES
  Une tuile par compteur plutot qu'une barre a separateurs. Chacune porte sa
  teinte dans `--fs-stat-accent`, en canaux RVB : la meme variable alimente
  l'icone, son cerclage et le halo du coin, a trois opacites differentes.

  Trois details font le rendu :
    - le halo flou dans le coin haut-droit, qui grossit au survol ;
    - le filet clair en haut, qui simule un bord eclaire ;
    - l'ombre bleue, tres etalee et tres decalee, qui pose la tuile.
───────────────────────────────────────────────*/
/* Memes paliers que la reference : 1 colonne, puis 2, puis 4. Des colonnes
   fixes plutot qu'un auto-fit — a 3 colonnes, un 4e compteur se retrouverait
   orphelin sur une ligne a lui tout seul. */
.fs-stats {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
  max-width: var(--container, 1280px);
  margin: 0 auto; padding: 0 24px;
}
@media (min-width: 640px)  { .fs-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fs-stats { grid-template-columns: repeat(4, 1fr); } }

.fs-stat {
  position: relative; overflow: hidden;
  /* Un peu plus d'air a gauche : le rail d'accent occupe le bord. */
  padding: 20px 20px 20px 26px;
  border-radius: var(--fs-r);
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(245, 247, 255, .055), rgba(245, 247, 255, .018));
  box-shadow: 0 18px 70px -58px rgba(23, 107, 255, .75);
  transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
  /* Entree en cascade : chaque tuile monte 90 ms apres la precedente (--i est
     pose sur l'element). `backwards` tient l'etat de depart pendant le delai
     sans dependre d'une classe posee par JS. */
  animation: revealUp 620ms cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}

/* Balayage de lumiere au survol — notre signature, absente de la reference.
   Une bande diagonale claire traverse la tuile une fois. */
.fs-stat::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .07) 48%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .85s cubic-bezier(.22, .61, .36, 1);
}
.fs-stat:hover::after { transform: translateX(130%); }
.fs-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 24px 95px -62px rgba(23, 107, 255, .95);
}

/* Le halo est recale plus loin dans le coin et un cran moins opaque que la
   reference : nos tuiles sont plus basses que les leurs (99px contre 112px),
   donc a reglage egal la teinte deborde sur le libelle et lui mange son
   contraste. */
/* Le halo vient du BAS-DROITE, pas du haut-droite comme la reference : la
   lumiere monte vers le chiffre au lieu de lui tomber dessus. */
.fs-stat__glow {
  position: absolute; bottom: -56px; right: -46px;
  width: 112px; height: 112px; border-radius: 50%;
  background: rgb(var(--fs-stat-accent));
  opacity: .3; filter: blur(38px);
  pointer-events: none;
  transition: transform .5s ease, opacity .5s ease;
  /* Le halo respire lentement au repos. L'animation ne touche QUE l'opacite :
     si elle animait aussi transform, elle prendrait le pas sur le scale du
     survol, qu'une regle ordinaire ne peut pas depasser. */
  animation: fsStatGlow 6s ease-in-out infinite;
}
.fs-stat:hover .fs-stat__glow {
  animation: none;       /* rend la main a la regle de survol */
  transform: scale(1.3);
  opacity: .5;
}
@keyframes fsStatGlow {
  0%, 100% { opacity: .24; }
  50%      { opacity: .38; }
}

/* Rien ne bouge si l'utilisateur refuse le mouvement : les tuiles sont
   simplement la, a leur place, halo fixe. */
@media (prefers-reduced-motion: reduce) {
  .fs-stat { animation: none; }
  .fs-stat__glow { animation: none; opacity: .3; }
  .fs-stat::after { display: none; }
}

/* Rail d'accent sur le bord gauche — il remplace le filet horizontal en haut
   de la reference. Le meme element sert a autre chose : c'est un montant
   colore qui tient la tuile, pas un liseré blanc. Il s'allonge au survol. */
.fs-stat__hairline {
  position: absolute; top: 14px; bottom: 14px; left: 0; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg,
    rgb(var(--fs-stat-accent)) 0%,
    rgb(var(--fs-stat-accent) / .35) 55%,
    transparent 100%);
  opacity: .85; pointer-events: none;
  transition: top .35s ease, bottom .35s ease, opacity .35s ease;
}
.fs-stat:hover .fs-stat__hairline { top: 6px; bottom: 6px; opacity: 1; }

.fs-stat__row { position: relative; display: flex; align-items: center; gap: 16px; }

/* Pastille RONDE, la ou la reference met un carre arrondi. Le cercle est
   aussi ce qui distingue le mieux la tuile de la carte produit, qui elle
   reste sur des angles arrondis. */
.fs-stat__icon {
  position: relative;
  display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%;
  color: rgb(var(--fs-stat-accent));
  background: rgb(var(--fs-stat-accent) / .13);
  box-shadow:
    inset 0 0 0 1px rgb(var(--fs-stat-accent) / .28),
    0 14px 38px -26px rgb(var(--fs-stat-accent));
  transition: transform .3s ease, box-shadow .3s ease;
}
/* Anneau fin qui se detache au survol, en echo a la pastille du badge. */
.fs-stat__icon::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid rgb(var(--fs-stat-accent) / .3);
  opacity: 0; transform: scale(.82);
  transition: opacity .35s ease, transform .35s ease;
}
.fs-stat:hover .fs-stat__icon        { transform: scale(1.05); }
.fs-stat:hover .fs-stat__icon::after { opacity: 1; transform: scale(1); }
.fs-stat__icon svg { width: 20px; height: 20px; transition: transform .3s ease; }
.fs-stat:hover .fs-stat__icon svg { transform: rotate(-6deg) scale(1.1); }

.fs-stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 900; letter-spacing: -.055em; line-height: 1.15;
  color: var(--fs-fg);
  /* Chiffres a chasse fixe : les compteurs ne sautillent pas quand ils
     changent de valeur. */
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) { .fs-stat__value { font-size: 30px; } }
.fs-stat__label {
  display: block; margin-top: 2px;
  font-size: 12px; font-weight: 500; color: var(--fs-muted);
}

/*───────────────────────────────────────────────
  BARRE DE RECHERCHE DU HERO
  Quand on vend plusieurs dizaines de references, le visiteur cherche un nom
  precis : la recherche merite le premier ecran, pas la barre de filtres du
  catalogue.

  Le formulaire est un GET vers /products — la page catalogue lit deja `?q=`
  et pre-remplit son champ. Aucun JavaScript, donc la recherche marche meme
  si les scripts tombent.
───────────────────────────────────────────────*/
.fs-search {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 560px; margin: 0 auto 32px;
  min-height: 56px; padding: 8px;
  border-radius: var(--fs-r);
  border: 1px solid rgba(23, 107, 255, .3);
  background: rgba(16, 19, 27, .85);
  box-shadow: 0 0 70px -34px rgba(0, 85, 251, .9);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transition: border-color .2s ease;
  /* Le hero est centre : le champ, lui, se lit a gauche. */
  text-align: left;
  /* `backwards` tient l'etat de depart pendant le delai sans dependre d'une
     classe posee par JS : si les scripts echouent, la barre s'affiche quand
     meme. C'est une commande, elle ne doit jamais rester invisible. */
  animation: revealUp 650ms cubic-bezier(.16, 1, .3, 1) 200ms backwards;
}
/* C'est la pilule entiere qui signale le focus, pas le champ.
   Sans la regle ci-dessous, l'anneau de focus generique (`input:focus-visible`,
   rectangulaire et arrondi a 6px) dessine une seconde boite a l'interieur de
   la premiere. Le selecteur double la classe pour passer devant lui.
   L'indicateur n'est pas supprime, il est deplace sur la pilule — bordure plus
   vive et halo net — donc la navigation au clavier reste lisible. */
.fs-search__input:focus,
.fs-search__input:focus-visible { outline: none; }
.fs-search:focus-within {
  border-color: rgba(23, 107, 255, .7);
  box-shadow:
    0 0 70px -34px rgba(0, 85, 251, .9),
    0 0 0 3px rgba(23, 107, 255, .18);
}
/* Meme logique pour le bouton : l'anneau epouse son rayon au lieu du 6px. */
.fs-search__btn:focus-visible { outline: 2px solid var(--fs-acc-hi); outline-offset: 2px; border-radius: var(--fs-r-sm); }

.fs-search__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--fs-r-sm);
  background: rgba(23, 107, 255, .1);
  color: var(--fs-acc);
}
.fs-search__input {
  height: 40px; min-width: 0; flex: 1;
  background: transparent; border: 0; outline: none;
  color: var(--fs-fg);
  font-family: var(--font-ui); font-size: 14px; font-weight: 500;
}
.fs-search__input::placeholder { color: var(--fs-muted); }
/* Chrome ajoute une croix native sur type=search, qui jure avec le reste. */
.fs-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.fs-search__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 20px; flex-shrink: 0;
  border: 0; border-radius: var(--fs-r-sm);
  background: var(--fs-grad); color: #fff;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 20px -6px rgba(0, 85, 251, .5);
  transition: box-shadow .2s ease, filter .2s ease;
}
.fs-search__btn:hover { box-shadow: 0 0 32px -6px rgba(0, 85, 251, .65); filter: brightness(1.1); }
.fs-search__btn:active { transform: translateY(1px); }

/* Sur mobile le bouton mange toute la largeur du champ : la loupe et la
   touche Entree suffisent. */
@media (max-width: 639px) {
  .fs-search { min-height: 52px; gap: 8px; }
  .fs-search__btn { display: none; }
}


/*───────────────────────────────────────────────
  BARRE DE FILTRES DE LA BOUTIQUE
  Elle etait montee en blanc : lueur blanche, boutons ouverts en degrade
  blanc sur texte noir, curseur de prix blanc. Sur un site dont tout
  l'accent est bleu, c'etait le seul bloc qui parlait une autre langue.

  Tout passe au bleu, et les etats se distinguent par l'intensite plutot que
  par la teinte : au repos le verre est presque neutre, au survol il prend un
  voile bleu, ouvert il prend le degrade plein. Trois marches, une seule
  couleur — on lit l'etat sans avoir a le deviner.

  Les popovers passaient de `display:none` a `display:block` d'un coup. Une
  `animation` (et non une `transition`, qui ne peut pas partir de
  `display:none`) leur donne une entree de 180 ms : on voit d'ou la liste
  sort, donc on ne la cherche pas.
───────────────────────────────────────────────*/
.shop-filterbar {
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r);
  background: linear-gradient(160deg, rgba(30, 36, 48, .55), rgba(16, 19, 27, .35) 60%);

  /* Les popovers Tri et Prix tombaient DERRIERE les vignettes produit.
     `.shop-filterbar__row` est en `position:relative; z-index:1`, ce qui en
     fait un contexte d'empilement : le `z-index:60` du popover ne valait donc
     que dans la barre, et la barre entiere concourait a 1 contre les badges
     des cartes, qui sont a 3. On donne son etage a la barre — au-dessus des
     cartes (6 au plus haut), sous la navigation (200), le panier (301) et
     les notifications (400). */
  z-index: 50;
}
/* Lueur d'ambiance : bleue, plus le meme blanc. */
.shop-filterbar::before {
  background: radial-gradient(circle, rgba(23, 107, 255, .16), transparent 70%);
}

/* ── Champ de recherche : celui de l'accueil ──
   Meme anatomie que `.fs-search` du hero — enveloppe en pilule bordee de
   bleu, loupe dans sa pastille, champ transparent posee dedans. La loupe
   etait en `position:absolute` par-dessus un input bordé ; elle repasse dans
   le flux, l'input perd sa bordure, et c'est l'enveloppe qui porte la forme.

   Une difference assumee : pas de bouton « Search ». Ici la saisie filtre la
   grille en direct, il n'y a rien a soumettre. Sur l'accueil le formulaire
   part vers /products, d'ou son bouton.

   L'anneau de focus est porte par l'enveloppe, pas par l'input : un
   `:focus-visible` sur l'input dessinerait un second cadre par-dessus le
   premier — exactement le « 2eme carre » corrige sur l'accueil. */
.shop-filterbar__search {
  display: flex; align-items: center; gap: 12px;
  /* 40 (pastille) + 2x5 (padding) + 2x1 (bordure) = 52, la hauteur des autres
     controles de la rangee. La boite est en `border-box` : le padding et la
     bordure se comptent dedans, donc 6px de padding donnerait 54. */
  min-height: 52px; padding: 5px;
  border-radius: var(--fs-r);
  border: 1px solid rgba(23, 107, 255, .3);
  background: rgba(16, 19, 27, .85);
  box-shadow: 0 0 70px -34px rgba(0, 85, 251, .9);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.shop-filterbar__search:focus-within {
  border-color: rgba(23, 107, 255, .7);
  box-shadow:
    0 0 70px -34px rgba(0, 85, 251, .9),
    0 0 0 3px rgba(23, 107, 255, .18);
}

/* La loupe EST le svg (pas un span qui l'enveloppe comme sur l'accueil) :
   le `padding` creuse la pastille, et le viewBox se remet a l'echelle
   dedans — d'ou un glyphe de 18px dans un carre de 40. */
.shop-filterbar__search-icon {
  position: static; transform: none;
  width: 40px; height: 40px; padding: 11px; flex-shrink: 0;
  border-radius: var(--fs-r-sm);
  background: rgba(23, 107, 255, .1);
  color: var(--fs-acc);
  transition: color .2s ease, background-color .2s ease;
}
.shop-filterbar__search:focus-within .shop-filterbar__search-icon {
  color: var(--fs-acc-mid);
  background: rgba(23, 107, 255, .18);
}

.shop-filterbar__search-input {
  height: 40px; min-width: 0; flex: 1;
  padding: 0; border: 0; border-radius: 0;
  background: transparent;
  color: var(--fs-fg);
  font-family: var(--font-ui); font-size: 14px; font-weight: 500;
}
.shop-filterbar__search-input::placeholder { color: var(--fs-muted); }
.shop-filterbar__search-input:focus,
.shop-filterbar__search-input:focus-visible { outline: none; border: 0; }

.shop-filterbar__search-clear {
  position: static; transform: none;
  width: 28px; height: 28px; flex-shrink: 0; margin-right: 8px;
  border-radius: 50%;
}
.shop-filterbar__search-clear:hover {
  background: rgba(23, 107, 255, .18);
  color: var(--fs-acc-mid);
}

/* ── Boutons Tri et Prix : meme gabarit, trois etats ──
   52px comme la pilule de recherche : dans une rangee, des controles de
   hauteurs differentes se lisent comme un defaut d'alignement. */
.sort-filter__btn,
.price-filter__btn {
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--fs-line);
  background: var(--fs-card-2);
  color: var(--fs-fg); font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, color .2s ease;
}
.sort-filter__btn:hover,
.price-filter__btn:hover {
  background-color: rgba(23, 107, 255, .12);
  border-color: var(--fs-line-3);
}
/* Ouvert / actif : degrade plein, comme le bouton principal du hero.
   `.price-filter.open` autant que `.active` : sans lui, Prix ouvert restait
   au repos alors que Tri ouvert s'allumait — deux boutons cote a cote qui ne
   reagissaient pas pareil au meme geste. */
.sort-filter.open .sort-filter__btn,
.price-filter.open .price-filter__btn,
.price-filter__btn.active {
  background: var(--fs-acc);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 24px -8px rgba(23, 107, 255, .9);
}
.sort-filter__btn svg,
.price-filter__btn svg { transition: transform .2s ease; }

/* ── Popovers ── */
.sort-filter__panel,
.price-filter__panel {
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-sm);
  background: var(--fs-card-2);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8),
              0 0 40px -24px rgba(23, 107, 255, .7);
}
.sort-filter.open .sort-filter__panel,
.price-filter.open .price-filter__panel {
  animation: fsFilterPop .18s cubic-bezier(.22, 1, .36, 1);
  transform-origin: top center;
}
@keyframes fsFilterPop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.sort-filter__option {
  border-radius: calc(var(--fs-r-sm) - 6px);
  color: var(--fs-muted);
}
.sort-filter__option:hover {
  background: rgba(23, 107, 255, .14);
  color: var(--fs-fg);
}
.sort-filter__option.selected {
  background: rgba(23, 107, 255, .2);
  color: var(--fs-acc-mid);
}

.price-filter__field-input input {
  border-radius: 10px;
  border-color: var(--fs-line);
  background: var(--fs-card-3);
}
.price-filter__field-input input:focus { border-color: var(--fs-acc); }

/* ── Curseur de prix ── */
.price-slider__track { background: var(--fs-line); }
.price-slider__range { background: var(--fs-acc); }
.price-slider input[type="range"]::-webkit-slider-thumb {
  background: var(--fs-acc-mid);
  border: 2px solid var(--fs-bg);
  box-shadow: 0 0 0 1px var(--fs-acc), 0 0 12px rgba(23, 107, 255, .8);
  transition: transform .15s ease, box-shadow .15s ease;
}
.price-slider input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.18);
  box-shadow: 0 0 0 1px var(--fs-acc), 0 0 18px rgba(23, 107, 255, 1);
}
.price-slider input[type="range"]::-moz-range-thumb {
  background: var(--fs-acc-mid);
  border: 2px solid var(--fs-bg);
  box-shadow: 0 0 0 1px var(--fs-acc), 0 0 12px rgba(23, 107, 255, .8);
}

/* ── Compteur de produits ──
   La pastille etait verte ; elle passe au bleu comme le reste de la barre.
   Le halo qui bat reste : c'est lui qui dit que le catalogue est vivant. */
/* Pas de pilule autour : le compteur n'est pas une commande, on ne clique
   pas dessus. L'encadrer le faisait passer pour un bouton de plus dans une
   rangee qui n'en manque pas. Restent le point et le chiffre, qui suffisent. */
.shop-filterbar__stat {
  height: 52px; border-radius: 0;
  color: var(--fs-acc-mid);
  background: none;
  border: 0;
  box-shadow: none;
}
.shop-filterbar__stat:hover {
  border: 0;
  box-shadow: none;
}
.shop-filterbar__stat-dot {
  background: var(--fs-acc);
  box-shadow: 0 0 8px rgba(23, 107, 255, 1);
}
.shop-filterbar__stat-dot::after { border-color: rgba(23, 107, 255, .8); }

@media (max-width: 640px) {
  /* 34 + 2x6 + 2x1 = 48 */
  .shop-filterbar__search { min-height: 48px; padding: 6px; gap: 8px; }
  .shop-filterbar__search-icon { width: 34px; height: 34px; padding: 9px; }
  .shop-filterbar__search-input { height: 34px; }
  .shop-filterbar__stat,
  .sort-filter__btn, .price-filter__btn { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .sort-filter.open .sort-filter__panel,
  .price-filter.open .price-filter__panel { animation: none; }
  .price-slider input[type="range"]::-webkit-slider-thumb { transition: none; }
  .price-slider input[type="range"]::-webkit-slider-thumb:hover { transform: none; }
}

/*───────────────────────────────────────────────
  PANNEAU PANIER
  Il etait reste au theme d'origine : fond presque noir, boutons blancs sur
  noir, pastille grise. C'etait le dernier ecran du site a parler blanc alors
  que tout le reste parle bleu — et c'est l'ecran qui mene au paiement, donc
  celui ou l'on veut le moins d'hesitation.

  Le bouton d'action prend le degrade du site : dans un panier, il n'y a
  qu'une seule chose a faire, et elle doit se voir sans etre cherchee.

  La largeur passe de 390 a 448px (28rem). A 390, un nom de produit un peu
  long et son prix se disputaient la ligne.
───────────────────────────────────────────────*/
.cart-panel__header {
  padding: 20px 24px 18px;
  border-bottom-color: var(--fs-line);
}
.cart-panel__heading { gap: 10px; }
.cart-panel__heading-icon { color: var(--fs-acc); }
.cart-panel__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
}
.cart-panel__count { color: var(--fs-muted); }

.cart-panel__body { padding: 14px 18px; }
.cart-panel__body::-webkit-scrollbar-thumb { background: var(--fs-line-2); }

/* ── Etat vide ──
   La pastille passe de 112 a 92px : a 112 elle pesait plus lourd que le
   message, alors qu'elle ne fait qu'occuper le vide. */
.cart-panel__empty-badge {
  width: 92px; height: 92px;
  background: var(--fs-card-2);
  border: 1px solid var(--fs-line);
  color: var(--fs-muted);
  margin-bottom: 22px;
}
.cart-panel__empty-badge > svg { width: 38px; height: 38px; }
.cart-panel__empty-dot {
  top: 6px; right: 4px;
  background: rgba(23, 107, 255, .22);
  border: 1px solid rgba(23, 107, 255, .4);
  color: var(--fs-acc-mid);
}
.cart-panel__empty-title { font-family: var(--font-display); font-size: 18px; }
.cart-panel__empty-sub { color: var(--fs-muted); }

/* ── Les deux boutons d'action : meme degrade que le bouton du hero ── */
.cart-panel__empty-cta,
.cart-panel__checkout {
  height: 48px;
  border-radius: var(--fs-r-sm);
  background: var(--fs-grad); color: #fff;
  font-family: var(--font-ui); font-weight: 600;
  box-shadow: 0 0 22px -6px rgba(0, 85, 251, .55);
  transition: box-shadow .2s ease, filter .2s ease, transform .14s ease;
}
.cart-panel__empty-cta:hover,
.cart-panel__checkout:hover {
  background: var(--fs-grad);
  box-shadow: 0 0 34px -6px rgba(0, 85, 251, .7);
  filter: brightness(1.1);
}
.cart-panel__empty-cta:active,
.cart-panel__checkout:active { transform: translateY(1px) scale(.995); }

/* ── Lignes d'article ── */
.cart-panel__item { border-bottom-color: var(--fs-line); }
.cart-panel__item-icon {
  background: var(--fs-card-2);
  border-color: var(--fs-line);
  border-radius: 12px;
}
.cart-panel__item-price { color: var(--fs-acc-hi); font-weight: 800; }

.cart-panel__stepper {
  background: var(--fs-card-2);
  border-color: var(--fs-line);
  border-radius: 999px;
}
.cart-panel__step { color: var(--fs-muted); }
.cart-panel__step:hover { background: rgba(23, 107, 255, .18); color: var(--fs-acc-mid); }

/* ── Pied : total et paiement ── */
.cart-panel__footer { padding: 16px 18px; border-top-color: var(--fs-line); }
.cart-panel__totalrow span:first-child,
.cart-panel__subtotal-label { color: var(--fs-muted); }
.cart-panel__totalrow span:last-child,
.cart-panel__subtotal-value { color: var(--fs-acc-hi); font-weight: 800; }
.cart-panel__clear { color: var(--fs-muted); opacity: .6; }
.cart-panel__clear:hover { color: #ff7070; opacity: 1; }

/*───────────────────────────────────────────────
  CARTE D'AVIS — page Avis
  Hierarchie inversee : ce qui varie passe devant. Voir feedback-card.njk
  pour le raisonnement (60 cartes, 1 seul nom distinct).

  Les regles de style.css restent en place ; on ne redefinit que ce qui
  change, et les anciennes classes (__top, __id) disparaissent d'elles-memes
  puisque le balisage ne les emet plus.
───────────────────────────────────────────────*/
.rv-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease,
              box-shadow .3s ease, background-color .3s ease;
}
.rv-card:hover { transform: translateY(-3px); }

/* Filet d'accent en haut, revele au survol. */
.rv-card__line {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--fs-grad);
  opacity: 0; transition: opacity .3s ease;
}
.rv-card:hover .rv-card__line { opacity: 1; }

/* ── Tete : note a gauche, produit a droite ── */
.rv-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.rv-card__stars { display: inline-flex; gap: 2px; flex-shrink: 0; }
.rv-card__stars svg { color: var(--rv-star); }

/* Le produit devient une pastille : c'est une etiquette, pas une phrase. */
.rv-card__tag {
  display: inline-flex; align-items: center;
  max-width: 60%; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--fs-line);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--fs-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Le message : c'est lui qu'on vient lire ── */
.rv-card__text {
  font-size: 15px; line-height: 1.6; font-weight: 500;
  color: var(--fs-fg);
  margin: 0 0 16px;
  word-wrap: break-word;
}

/* ── Bas de carte : tout le reste, sur une seule ligne discrete ── */
/* Une seule ligne, jamais deux. En `flex-wrap: wrap`, « View » basculait sous
   la date des que la carte se resserrait — donc sur certaines cartes de la
   grille et pas sur leurs voisines, ce qui desalignait les hauteurs. La ligne
   ne se coupe plus : c'est le libelle « Verified purchase », seul element
   vraiment compressible, qui cede en premier. */
.rv-card__meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap;
  padding-top: 14px; border-top: 1px solid var(--fs-line);
  font-size: 12px; color: var(--fs-muted); white-space: nowrap;
}
.rv-card__check {
  display: grid; place-items: center; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(52, 211, 153, .16); color: var(--fs-ok, #22c55e);
}
.rv-card__verified {
  font-weight: 600; color: rgba(245, 247, 255, .72);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* Le separateur appartient au libelle, donc il s'efface avec lui. */
.rv-card__verified::after {
  content: '·'; margin-left: 7px; color: rgba(255, 255, 255, .22);
}
.rv-card__sep { color: rgba(255, 255, 255, .22); flex-shrink: 0; }
.rv-card__date { color: var(--fs-muted); flex-shrink: 0; }

/* La ligne du bas tient dans une carte de ~314px. En dessous, on retire du
   texte plutot que de le rogner : d'abord « purchase », puis le libelle entier
   — la pastille verte et son intitule accessible suffisent alors. La mesure
   porte sur la carte elle-meme, pas sur la fenetre : c'est la largeur de
   colonne qui contraint, et elle ne suit pas la fenetre de facon lineaire. */
.rv-cell { container-type: inline-size; }
@container (max-width: 320px) {
  .rv-card__verified-x { display: none; }
}
@container (max-width: 264px) {
  .rv-card__verified { display: none; }
}

/* L'avatar ne sert que lorsqu'un vrai pseudo existe : petit, en bas. */
.rv-card__avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 9px; font-weight: 800; color: #fff;
}
.rv-card__name { font-weight: 600; color: rgba(245, 247, 255, .8); }

/* « View » pousse a droite ; la fleche avance au survol. */
.rv-card__view {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto; flex-shrink: 0;
  font-size: 12px; font-weight: 600; color: var(--fs-muted);
  text-decoration: none;
  transition: color .2s ease;
}
.rv-card__view svg { transition: transform .2s cubic-bezier(.22,1,.36,1); }
.rv-card__view:hover { color: var(--fs-acc-mid); }
.rv-card__view:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .rv-card, .rv-card__line, .rv-card__view, .rv-card__view svg { transition: none; }
  .rv-card:hover { transform: none; }
  .rv-card__view:hover svg { transform: none; }
}

/*───────────────────────────────────────────────
  FILTRE PAR NOTE — SEGMENTED CONTROL
  Avant : six pilules detachees, bordure et fond chacune, separees de 8px, dont
  l'active virait au bloc bleu plein. Six objets de meme poids pour un choix
  qui est unique et exclusif — la forme contredisait la fonction, et les six
  bordures se disputaient l'attention juste a cote des barres de distribution.

  Maintenant : une piste, un cadre, un curseur qui glisse d'un segment a
  l'autre. Le mouvement lui-meme porte l'information « c'est le meme choix qui
  se deplace ». Les segments ne sont plus que du texte : le seul aplat de
  couleur de la rangee est celui qui est actif.

  Le curseur est positionne par custom.js (largeur variable selon le libelle).
  Sans JS, `.rv-seg` ne recoit jamais `--ready` et l'actif retombe sur un fond
  bleu discret : le filtre reste lisible.
───────────────────────────────────────────────*/
.rv-seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  max-width: 100%;
  border: 1px solid var(--fs-line);
  border-radius: 999px;
  background: rgba(11, 14, 20, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow-x: auto;
  scrollbar-width: none;
}
.rv-seg::-webkit-scrollbar { display: none; }

/* Le curseur. `left/top: 0` puis translate() : la position vient d'une seule
   propriete composee, donc l'animation reste sur le compositeur. */
.rv-seg__glider {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: var(--fs-grad);
  box-shadow: 0 8px 22px -10px rgba(23, 107, 255, .95);
  opacity: 0;
  pointer-events: none;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1),
              width     .42s cubic-bezier(.22, 1, .36, 1),
              opacity   .2s ease;
}
.rv-seg--ready .rv-seg__glider { opacity: 1; }
/* Pose initiale : on place le curseur sans qu'il traverse la piste. */
.rv-seg--init .rv-seg__glider { transition: none; }

.rv-seg .rv-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--fs-muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color .25s ease;
}
.rv-seg .rv-pill:hover:not(.active):not(:disabled) {
  color: var(--fs-fg);
  background: transparent;
  border-color: transparent;
}
.rv-seg .rv-pill.active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #fff;
}
.rv-seg .rv-pill:focus-visible {
  outline: 2px solid var(--fs-acc);
  outline-offset: 2px;
}

.rv-seg .rv-pill__star {
  width: 12px;
  height: 12px;
  color: var(--rv-star);
  transition: color .25s ease;
}
.rv-seg .rv-pill.active .rv-pill__star { color: #fff; }

/* Un segment sans avis sur cette page ne se clique pas : mieux vaut un controle
   visiblement inerte qu'une grille vide apres le clic. */
.rv-seg .rv-pill:disabled {
  opacity: .32;
  cursor: default;
}

/* Repli sans JS. */
.rv-seg:not(.rv-seg--ready) .rv-pill.active {
  background: rgba(23, 107, 255, .18);
  color: var(--fs-fg);
}

@media (prefers-reduced-motion: reduce) {
  .rv-seg__glider,
  .rv-seg .rv-pill,
  .rv-seg .rv-pill__star { transition: none; }
}

/*───────────────────────────────────────────────
  ETOILES A REMPLISSAGE FRACTIONNAIRE
  Le snippet d'origine plancherait la note : 4.97 allumait quatre etoiles. Deux
  rangees superposees maintenant — une vide qui donne la forme, une pleine
  rognee a la largeur exacte. La note se lit donc juste, quelle qu'elle soit.

  Les selecteurs sont volontairement a deux niveaux (`.rv-stars .rv-stars__…`) :
  plusieurs regles existantes colorent `.rv-score__stars svg` ou
  `.rv-card__stars svg` en dore, ce qui repeindrait aussi la rangee du fond et
  annulerait tout l'effet.
───────────────────────────────────────────────*/
.rv-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  white-space: nowrap;
}
.rv-stars__row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 0;
}
/* Les icones ne doivent jamais se comprimer : c'est le rognage qui doit reveler
   la fraction, pas un retrecissement des etoiles. */
.rv-stars__row > svg { flex: 0 0 auto; }

.rv-stars .rv-stars__base svg { color: rgba(255, 255, 255, .17); }
.rv-stars .rv-stars__fill {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.rv-stars .rv-stars__fill svg { color: var(--rv-star); }

/*───────────────────────────────────────────────
  BLOC DE NOTE
  La note est ce que la page vend : elle passe de 38px a 52px, avec son echelle
  accolee en petit plutot qu'en legende. Le total d'avis vient sous les etoiles,
  la ou il qualifie la moyenne.
───────────────────────────────────────────────*/
.rv-score__val {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rv-score__max {
  font-size: 19px;
  font-weight: 700;
  color: rgba(255, 255, 255, .3);
}
.rv-score__stars { margin: 10px 0 7px; }
.rv-score__out {
  font-size: 12px;
  color: var(--fs-muted);
  font-variant-numeric: tabular-nums;
}
.rv-score__out b { color: rgba(245, 247, 255, .85); font-weight: 700; }

/*───────────────────────────────────────────────
  DISTRIBUTION
  Une note non nulle garde une barre visible : `min-width` est pose dans le
  gabarit, sur les seules lignes qui comptent au moins un avis, pour qu'une
  ligne reellement vide reste vide. Les lignes a zero s'effacent legerement —
  elles restent lisibles sans occuper le meme poids que les autres.
───────────────────────────────────────────────*/
.rv-dist { gap: 7px; }
.rv-dist__bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}
.rv-dist__fill {
  border-radius: 999px;
  background: linear-gradient(90deg, #f5b423, #ffd27a);
}
.rv-dist__row.is-zero .rv-dist__lbl,
.rv-dist__row.is-zero .rv-dist__count { opacity: .45; }
.rv-dist__count { width: 34px; font-variant-numeric: tabular-nums; }
.rv-dist__pct {
  width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .3);
}

/*───────────────────────────────────────────────
  NOTE EN TYPOGRAPHIE DISPLAY
  Le cadran en anneau qui occupait cette place etait emprunte au vocabulaire des
  tableaux de bord — un registre etranger a ce site, dont l'identite tient a la
  grosse typo : « Reviews » a 84px en Poppins 900, les compteurs d'accueil en
  900 eux aussi. Le chiffre devient donc l'objet, a l'echelle d'un titre, dans
  le meme degrade dore que le reste de la page.

  Le remplissage que montrait l'arc n'est pas perdu : c'est le filet sous le
  chiffre, rempli a la meme fraction, avec la meme animation d'entree.
───────────────────────────────────────────────*/
.rv-score__num {
  display: flex;
  align-items: center;
  gap: 26px;
  text-align: left;
}

.rv-score__hero { flex-shrink: 0; }

.rv-score__val {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(52px, 6vw, 72px);
  letter-spacing: -.055em;
  line-height: .88;
  font-variant-numeric: tabular-nums;
}
/* Le degrade est peint sur le texte. `background-clip: text` ne peint que DANS
   la boite du glyphe, or l'interlettrage negatif raccourcit la largeur d'avance
   sans raccourcir l'encre : le dernier chiffre ressortait partiellement
   transparent. On elargit la zone peinte et on annule l'elargissement en marge.
   Meme correctif que sur `.hero__title .grad`. */
.rv-score__figure {
  background-image: linear-gradient(135deg, #f0a416 0%, #f8bf3a 48%, #ffdd94 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 0 .08em 0 .02em;
  margin:  0 -.08em 0 -.02em;
}
.rv-score__max {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .28);
}

/* Le filet. `transform: scaleX` plutot qu'une largeur animee : l'animation
   reste sur le compositeur, et la largeur d'arrivee reste celle du gabarit. */
.rv-score__meter {
  height: 3px;
  margin-top: 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.rv-score__meter-fill {
  display: block;
  height: 100%;
  width: var(--rv-fill, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, #f0a416, #ffdd94);
  box-shadow: 0 0 9px rgba(245, 180, 35, .5);
  transform-origin: left center;
  animation: rv-meter-in 1.15s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes rv-meter-in { from { transform: scaleX(0); } }

.rv-score__text { display: flex; flex-direction: column; gap: 7px; }
/* Le verdict est un mot de titre : il prend la police display et l'interlettrage
   serre du reste du site, comme `.section__title`. En police d'interface il
   detonnait a cote du chiffre. */
.rv-score__verdict {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1;
  color: #fff;
}
.rv-score__stars { margin: 0; justify-content: flex-start; }
.rv-score__out {
  font-size: 12px;
  color: var(--fs-muted);
  font-variant-numeric: tabular-nums;
}
.rv-score__out b { color: rgba(245, 247, 255, .85); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .rv-score__meter-fill { animation: none; }
}

@media (max-width: 640px) {
  .rv-score__num { gap: 18px; }
  .rv-score__verdict { font-size: 21px; }
}

/* Repartition du panneau. `.rv-filters` etait en `flex: 1` et absorbait toute
   la place restante pour y centrer six pilules, pendant que les barres de
   distribution restaient comprimees a leur minimum. C'est l'inverse qu'il
   faut : les barres sont ce qui gagne a etre long, les pilules ont une largeur
   naturelle. Elles sont donc poussees a droite, sans etirement. */
.rv-panel { align-items: center; }
.rv-score { flex: 1 1 460px; }
.rv-dist { flex: 1 1 240px; min-width: 200px; }
.rv-filters { flex: 0 0 auto; margin-left: auto; }

/*───────────────────────────────────────────────
  HERO DE LA PAGE AVIS — ALIGNEMENT SUR LE SITE
  Ce hero avait ete construit a part : halo blanc la ou tout le site pose des
  halos bleus, pilule en verre plus opaque et sans flou, texte en capitales
  espacees, titre moins serre que celui de l'accueil. Rien de faux pris
  isolement, mais la page ne se lisait pas comme le reste de la boutique.

  On aligne les quatre : couleur du halo, recette du verre, casse, typographie.
───────────────────────────────────────────────*/

/* Le halo. Meme paire de radiales que `.hero::before` — bleu de reference puis
   cyan plus haut et plus faible. La geometrie d'origine (boite fixe centree)
   est conservee, seules les couleurs changent. */
.rv-hero::before {
  background:
    radial-gradient(ellipse 46% 42% at 50% 26%, rgba(23, 107, 255, .16) 0%, transparent 68%),
    radial-gradient(ellipse 24% 22% at 50% 30%, rgba(59, 231, 255, .09) 0%, transparent 72%);
}

/* La pilule. Recette du badge d'accueil, au detail pres. */
.rv-hero__pill {
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 25px 50px -12px rgba(23, 107, 255, .1);
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  color: var(--fs-muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 26px;
  max-width: 100%;
}
.rv-hero__pill-icon {
  flex-shrink: 0;
  color: var(--rv-star);
  animation: rvStarBreathe 2.4s ease-in-out infinite;
}
/* Meme respiration que la pastille du hero d'accueil. Celle-ci passe par
   `filter` et non `box-shadow` : sur une icone SVG, une ombre de boite
   dessinerait un rectangle autour de l'etoile. */
@keyframes rvStarBreathe {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(245, 180, 35, .5)); }
  50%      { filter: drop-shadow(0 0 10px rgba(245, 180, 35, .85)); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-hero__pill-icon { animation: none; }
}

/* Le titre. Interlettrage et interligne du hero d'accueil, pas ceux des
   titres de section : c'est un titre de page. */
.rv-hero h1 {
  letter-spacing: -.075em;
  line-height: .92;
}

/*───────────────────────────────────────────────
  SELECTEUR DE LANGUE
  Le menu etait un <div> place a l'interieur du <button> : il est desormais son
  frere, dans une enveloppe qui sert d'ancrage. `.nav__lang` perd donc son role
  de repere positionnel au profit de `.nav__lang-wrap`.

  Les drapeaux emoji sont remplaces par des pastilles de code — ils ne
  s'affichaient pas sous Windows, et un pays n'est pas une langue.
───────────────────────────────────────────────*/
.nav__lang-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav__lang-caret {
  opacity: .35;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.nav__lang[aria-expanded="true"] .nav__lang-caret {
  transform: rotate(180deg);
  opacity: .7;
}
.nav__lang[aria-expanded="true"] { background: var(--fs-card-2); color: #fff; }

.lang-dropdown {
  top: calc(100% - 12px);
  min-width: 208px;
  padding: 7px;
  overflow: hidden;
}
/* Le menu descend en s'ouvrant. `display` n'etant pas animable, l'animation est
   portee par la classe `.open` que pose le script — donc elle ne joue qu'a
   l'ouverture, jamais au chargement. */
.lang-dropdown.open { animation: langDropIn .22s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes langDropIn {
  from { opacity: 0; transform: translateY(-6px); }
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: var(--fs-r-sm);
  background: transparent;
  color: var(--fs-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

/* La pastille de code : chasse fixe pour que les sept s'alignent, quelle que
   soit la largeur des lettres. */
.lang-option__code {
  flex-shrink: 0;
  min-width: 28px;
  padding: 3px 0;
  border: 1px solid var(--fs-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .5);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
  line-height: 1;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.lang-option__name { flex: 1; }
/* La coche n'occupe sa place que sur la ligne active. */
.lang-option__check {
  flex-shrink: 0;
  color: var(--fs-acc-mid);
  opacity: 0;
  transition: opacity .18s ease;
}

.lang-option:hover {
  background: rgba(23, 107, 255, .12);
  color: var(--fs-fg);
}
.lang-option:hover .lang-option__code {
  border-color: rgba(23, 107, 255, .4);
  color: rgba(255, 255, 255, .8);
}
.lang-option:focus-visible {
  outline: 2px solid var(--fs-acc);
  outline-offset: -2px;
}

.lang-option.selected {
  background: rgba(23, 107, 255, .16);
  color: #fff;
}
.lang-option.selected .lang-option__code {
  border-color: transparent;
  background: var(--fs-acc);
  color: #fff;
}
.lang-option.selected .lang-option__check { opacity: 1; }

/* En dessous du seuil du menu burger, c'est l'enveloppe entiere qui sort de la
   barre — sinon le menu resterait dans le DOM, ancre a un bouton masque. */
@media (max-width: 1023px) {
  .nav__lang-wrap { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-dropdown.open { animation: none; }
  .nav__lang-caret { transition: none; }
}

/*───────────────────────────────────────────────
  CONNEXION — PANNEAU EN DEUX COLONNES
  SellAuth ne fournit aucune page de connexion : toute URL /customer/* renvoie
  sur /?login=1 et laisse le theme porter l'interface. Il n'y a donc pas de
  gabarit a styler — l'ecran de connexion EST cette fenetre, et c'est en elle
  qu'on installe l'anatomie a deux colonnes.

  A gauche ce que le compte apporte, a droite le formulaire. Les deux colonnes
  ne se valent pas : celle de droite est la tache, celle de gauche la raison de
  s'y mettre. En dessous de 860px la colonne de gauche sort — sur un telephone
  elle repousserait le formulaire sous la ligne de flottaison.

  Le parcours reste celui de la boutique : email, puis code a 6 chiffres. Pas
  de mot de passe, pas de bouton tiers — on ne dessine pas des commandes qui
  n'existent pas derriere.
───────────────────────────────────────────────*/
.lgn__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 880px;
  padding: 0;
  overflow: hidden;
  background-color: var(--fs-card);
  border: 1px solid var(--fs-line-2);
  border-radius: var(--fs-r);
  box-shadow:
    inset 0 1px 0 0 rgba(245, 247, 255, .06),
    0 40px 120px -60px rgba(23, 107, 255, .9);
}

/* ── Colonne de gauche ── */
.lgn__brand {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 42px 38px;
  border-right: 1px solid var(--fs-line-2);
  background: linear-gradient(165deg, rgba(23, 107, 255, .13), rgba(11, 14, 20, .2) 62%);
}
/* Trame fine + halo : la meme grammaire que les fonds de section du site. */
.lgn__brand::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  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%);
  pointer-events: none;
}
.lgn__brand::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -18%;
  top: -14%;
  width: 78%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 107, 255, .3), transparent 68%);
  filter: blur(38px);
  pointer-events: none;
}

.lgn__eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid rgba(23, 107, 255, .35);
  border-radius: 999px;
  background: rgba(23, 107, 255, .12);
  color: var(--fs-acc-mid);
  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: lgnDot 2.4s ease-in-out infinite;
}
@keyframes lgnDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Le titre reprend la signature du site : blanc, puis une seconde ligne en
   degrade. Meme correctif de peinture que `.hero__title .grad` — l'encre du
   dernier glyphe deborde la boite que `background-clip: text` colore. */
.lgn__hero {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 3.6vw, 46px);
  letter-spacing: -.06em;
  line-height: .96;
  color: #fff;
}
.lgn__hero-accent {
  background-image: var(--fs-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  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(--fs-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(23, 107, 255, .28);
  background: rgba(23, 107, 255, .11);
  color: var(--fs-acc-mid);
}
.lgn__perk-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lgn__perk-text b { font-size: 13px; font-weight: 700; color: var(--fs-fg); }
.lgn__perk-text span { font-size: 12px; line-height: 1.45; color: var(--fs-muted); }

/* ── Colonne de droite ── */
.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: 900;
  font-size: 25px;
  letter-spacing: -.04em;
  color: #fff;
}
.lgn__sub { font-size: 13px; line-height: 1.6; color: var(--fs-muted); margin: 0 0 22px; }
.lgn__sub b { color: var(--fs-fg); 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: 1px solid var(--fs-line);
  border-radius: var(--fs-r-sm);
  background: rgba(16, 19, 27, .8);
  color: var(--fs-fg);
  font-family: var(--font-ui);
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.lgn__input::placeholder { color: rgba(255, 255, 255, .28); }
.lgn__input:focus {
  outline: none;
  border-color: rgba(23, 107, 255, .55);
  background: rgba(16, 19, 27, .95);
  box-shadow: 0 0 0 3px rgba(23, 107, 255, .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: 1px solid rgba(248, 113, 113, .32);
  border-radius: var(--fs-r-sm);
  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;
  color: var(--fs-muted);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
}
.lgn__back:hover { color: var(--fs-fg); }
.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; }

/* Sous 860px la colonne de marque sort : sur un telephone elle repousserait le
   formulaire — la tache reelle — sous la ligne de flottaison. */
@media (max-width: 860px) {
  .lgn__panel { grid-template-columns: 1fr; max-width: 420px; }
  .lgn__brand { display: none; }
  .lgn__main { padding: 34px 26px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .lgn__eyebrow-dot { animation: none; }
}

/* La tuile Support mene a Discord : elle porte l'icone de la marque et son
   blurple au survol, pas le bleu du theme — c'est la reconnaissance instantanee
   du logo qui dit ou mene le lien, comme pour le raccourci de la barre de
   navigation. Les tuiles etant en `text-align: center`, il faut repasser en
   flex pour aligner l'icone avec le mot. */
/* La mise en page est posee sur TOUTES les tuiles, pas sur la seule tuile
   Discord : chacune porte son icone, et une regle par tuile finirait par
   diverger. `text-align: center` ne centre que du texte — il faut un flex pour
   centrer un couple icone + mot. */
.acct-quick__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.acct-quick__icon {
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .2s ease;
}
.acct-quick__tile:hover .acct-quick__icon { opacity: 1; }
/* Le logo Discord porte `.acct-quick__icon` comme les autres : il suit la
   couleur du texte, sans teinte de marque et sans regle propre. */
@media (prefers-reduced-motion: reduce) {
  .acct-quick__icon { transition: none; }
}

/* La rangee de raccourcis etait figee a trois colonnes. La tuile Abonnements
   ayant ete retiree, la troisieme restait vide et les deux tuiles survivantes
   se serraient a gauche. `auto-fit` les laisse occuper toute la largeur, quel
   que soit leur nombre — et le jour ou une tuile revient, rien a retoucher. */
.acct-quick { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Entree « Support » de la navigation du compte : elle sort du site vers
   Discord, elle porte donc le logo et le blurple de la marque au survol, comme
   la tuile du tableau de bord et le raccourci de la barre principale. Les
   entrees etant des blocs, il faut un flex pour aligner l'icone avec le mot. */
/* Le logo Discord ne porte plus sa teinte de marque : il herite de
   `currentColor` comme les trois autres icones, donc la rangee se lit d'un seul
   ton. Il n'y a plus aucune regle propre a cette entree — la mise en page et
   l'etat de survol viennent des regles generales de `.acct-nav__link` et
   `.acct-nav__icon`. La classe `--discord` reste dans le gabarit comme point
   d'accroche si le besoin revient. */

/*───────────────────────────────────────────────
  LISTE DES COMMANDES
  Le tableau a quatre colonnes ne pouvait pas porter le nom des produits ET un
  acces a la livraison. Chaque commande devient une rangee : ce qui a ete
  achete en titre, la reference et le montant en dessous, statut et acces a la
  livraison a droite.
───────────────────────────────────────────────*/
.acct-olist {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r);
  overflow: hidden;
}
.acct-olist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .018);
  transition: background-color .2s ease;
}
.acct-olist__row + .acct-olist__row { border-top: 1px solid var(--fs-line); }
.acct-olist__row:hover { background: rgba(255, 255, 255, .045); }

.acct-olist__main { min-width: 0; }
.acct-olist__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fs-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-olist__more {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fs-muted);
}
.acct-olist__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--fs-muted);
  font-variant-numeric: tabular-nums;
}
.acct-olist__ref { font-weight: 600; color: var(--fs-acc-mid); }
.acct-olist__price { font-weight: 700; color: rgba(245, 247, 255, .85); }
.acct-olist__sep { color: rgba(255, 255, 255, .2); }

.acct-olist__side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
/* L'acces a la livraison est l'action reelle de cette page : il porte donc
   l'accent, pas le gris des liens secondaires. */
.acct-olist__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(23, 107, 255, .35);
  border-radius: var(--fs-r-sm);
  background: rgba(23, 107, 255, .1);
  color: var(--fs-acc-mid);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.acct-olist__cta:hover {
  background: rgba(23, 107, 255, .2);
  border-color: rgba(23, 107, 255, .6);
  color: #fff;
}

@media (max-width: 640px) {
  .acct-olist__row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .acct-olist__side { width: 100%; justify-content: space-between; }
  .acct-olist__name { white-space: normal; }
}

/*───────────────────────────────────────────────
  RECHARGE DE SOLDE
  Montants proposes en pastilles, plus un champ libre pour le reste. Les deux
  ecrivent dans le meme champ : il n'y a qu'une seule valeur, donc un seul
  endroit ou elle vit.
───────────────────────────────────────────────*/
/* La carte est en `flex-direction: column; align-items: flex-start` : sans
   `align-self`, le formulaire se reduit a la largeur de son contenu et le
   bouton retombait sous le champ. On l'etire, puis on le borne — un champ de
   montant large de 900px serait absurde. */
.acct-topup {
  margin-top: 18px;
  align-self: stretch;
  max-width: 440px;
}
.acct-topup__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.acct-topup__chip {
  padding: 8px 14px;
  border: 1px solid var(--fs-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--fs-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.acct-topup__chip:hover { border-color: rgba(23, 107, 255, .45); color: var(--fs-fg); }
.acct-topup__chip.is-on {
  border-color: transparent;
  background: var(--fs-acc);
  color: #fff;
}

.acct-topup__row { display: flex; gap: 10px; flex-wrap: wrap; }
.acct-topup__input {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-sm);
  background: rgba(16, 19, 27, .8);
  color: var(--fs-fg);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.acct-topup__input::placeholder { color: rgba(255, 255, 255, .28); font-weight: 500; }
.acct-topup__input:focus {
  outline: none;
  border-color: rgba(23, 107, 255, .55);
  box-shadow: 0 0 0 3px rgba(23, 107, 255, .16);
}
.acct-topup__submit { flex: 0 0 auto; }
.acct-topup__submit:disabled { opacity: .6; cursor: default; }

.acct-topup__hint {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .35);
  font-variant-numeric: tabular-nums;
}
.acct-topup__error {
  margin: 10px 0 0;
  padding: 9px 12px;
  border: 1px solid rgba(248, 113, 113, .32);
  border-radius: var(--fs-r-sm);
  background: rgba(248, 113, 113, .1);
  font-size: 12.5px;
  color: #fca5a5;
}
.acct-topup__error[hidden] { display: none; }

/* Icones de la navigation du compte. Les entrees etaient de simples blocs de
   texte : il leur faut un flex pour aligner l'icone sur la ligne de base du
   mot. L'icone herite de `currentColor`, donc elle s'eclaircit avec le texte
   au survol et sur l'entree active — aucune regle de couleur en plus.
   La regle Discord posee plus haut garde sa teinte de marque : elle est plus
   specifique et vient apres. */
.acct-nav__link {
  display: flex;
  align-items: center;
  gap: 9px;
}
.acct-nav__icon {
  flex-shrink: 0;
  opacity: .65;
  transition: opacity .2s ease;
}
.acct-nav__link:hover .acct-nav__icon,
.acct-nav__link.active .acct-nav__icon { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .acct-nav__icon { transition: none; }
}

/*───────────────────────────────────────────────
  RECHARGE — FINITION ET MOUVEMENT
  Le mouvement sert a deux choses ici, et rien d'autre : dire que les pastilles
  forment une seule rangee de choix (elles entrent l'une apres l'autre), et
  confirmer le choix au clic. Aucune animation ne retarde la saisie — tout est
  en `transform` et `opacity`, donc rien ne declenche de recalcul de mise en
  page pendant qu'on tape.
───────────────────────────────────────────────*/

/* Le solde prend la typo display du site, comme la note de la page d'avis. */
.acct-balance {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(135deg, #f5f7ff 0%, #9fc4ff 60%, #3be7ff 120%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /*
    `background-clip: text` ne peint que DANS la boite de l'element : tout ce
    que l'encre deborde ressort transparent. Il faut donc corriger les deux
    axes, pas seulement l'horizontal.

    Verticalement, l'element heritait d'un interligne de 20px alors que
    Poppins 900 a 34px ecrit 48px d'encre — 14px de glyphe au-dessus et 14px
    en dessous tombaient hors de la zone peinte, et les chiffres paraissaient
    coupes. `line-height: 1.45` porte la boite a ~49px, donc au-dela de
    l'encre ; la marge interne restante couvre les glyphes plus hauts que le
    chiffre (accents, autres symboles monetaires) et se rattrape en marge
    negative pour ne rien decaler autour.
  */
  line-height: 1.45;
  padding: .08em .06em .08em .02em;
  margin: -.08em -.06em -.08em -.02em;
}

/* Entree en cascade : `--i` est pose par le gabarit sur chaque pastille. */
.acct-topup__chip {
  animation: acctChipIn .42s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1),
              box-shadow .2s ease;
}
@keyframes acctChipIn {
  from { opacity: 0; transform: translateY(8px); }
}
.acct-topup__chip:hover { transform: translateY(-2px); }
.acct-topup__chip:active { transform: translateY(0) scale(.96); }

/* La pastille choisie prend le degrade du site et un halo, pour qu'on voie le
   choix sans relire les chiffres. */
.acct-topup__chip.is-on {
  background: var(--fs-grad);
  box-shadow: 0 8px 22px -10px rgba(23, 107, 255, .95);
}
.acct-topup__chip.is-on:hover { transform: translateY(-2px); }

.acct-topup__row { animation: acctChipIn .42s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .28s; }

.acct-topup__submit { transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease; }
.acct-topup__submit:not(:disabled):hover { transform: translateY(-1px); }
.acct-topup__submit:not(:disabled):active { transform: translateY(0) scale(.98); }

/* L'erreur se pose au lieu d'apparaitre d'un coup : elle arrive apres une
   action, donc elle doit se remarquer sans faire sursauter. */
.acct-topup__error { animation: acctErrIn .28s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes acctErrIn {
  from { opacity: 0; transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .acct-topup__chip,
  .acct-topup__row,
  .acct-topup__error { animation: none; }
  .acct-topup__chip:hover,
  .acct-topup__chip:active,
  .acct-topup__submit:not(:disabled):hover,
  .acct-topup__submit:not(:disabled):active { transform: none; }
}

/* Pastille du panier : rien plutot que « 0 ».
   La regle d'origine posait `display: none` et laissait `updateCartCount()`
   lever la classe `is-visible`. En repositionnant la pastille dans le coin,
   `display: inline-flex` avait ete repose SANS condition — ce qui annulait le
   masquage et affichait « 0 » en permanence. On rend la visibilite a la
   classe. */
.nav__cart-count { display: none; }
.nav__cart-count.is-visible { display: inline-flex; }

/*───────────────────────────────────────────────
  ETIQUETTES DE FICHE PRODUIT
  Trois affirmations de meme poids, sans hierarchie : livraison immediate et
  paiement securise sont des promesses, « 18 sold » est une preuve. La preuve
  passe donc en vert, la couleur que la boutique emploie deja pour ce qui est
  verifie, et les deux promesses gardent le bleu de l'interface.

  Les etiquettes entrent l'une apres l'autre, comme une rangee, et leur icone
  reagit au survol.
───────────────────────────────────────────────*/
.pdx-head__meta { gap: 8px; }

.pdx-head__meta .pdx-tag {
  align-items: center;
  gap: 9px;
  /* Rembourrage dissymetrique : la tuile touche presque le bord gauche, le
     libelle respire a droite. C'est ce qui empeche l'etiquette de ressembler
     a un bouton. */
  padding: 5px 13px 5px 5px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022));
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: rgba(255, 255, 255, .84);
  animation: pdxTagIn .45s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: border-color .22s ease, color .22s ease,
              background-color .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes pdxTagIn {
  from { opacity: 0; transform: translateY(7px); }
}

/* La tuile. Carre fixe : sans `flex: 0 0`, elle se comprime des que la rangee
   manque de place et l'icone sort de son fond. */
.pdx-head__meta .pdx-tag__ico {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(23, 107, 255, .13);
  box-shadow: inset 0 0 0 1px rgba(23, 107, 255, .24);
  color: #d5e4ff;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1),
              background-color .22s ease, box-shadow .22s ease, color .22s ease;
}
.pdx-head__meta .pdx-tag__ico svg { display: block; }

.pdx-head__meta .pdx-tag:hover {
  transform: translateY(-2px);
  border-color: rgba(23, 107, 255, .42);
  background: rgba(23, 107, 255, .08);
  color: var(--fs-fg);
}
.pdx-head__meta .pdx-tag:hover .pdx-tag__ico {
  transform: scale(1.08);
  background: rgba(23, 107, 255, .22);
  box-shadow: inset 0 0 0 1px rgba(23, 107, 255, .45);
  color: #fff;
}

/* L'eclair de la livraison bat doucement : c'est la promesse qui compte le
   plus sur une boutique de comptes livres a la seconde. */
.pdx-head__meta .pdx-tag--bolt svg { animation: pdxBolt 3.2s ease-in-out infinite; }
@keyframes pdxBolt {
  0%, 88%, 100% { opacity: 1; }
  92%           { opacity: .35; }
  96%           { opacity: 1; }
}

/* La preuve chiffree : vert, comme les mentions verifiees du reste du site.
   Seule la tuile change de teinte — le cadre reste neutre, sinon trois
   couleurs de bordure se disputent la rangee. */
.pdx-head__meta .pdx-tag--sold { color: rgba(209, 250, 229, .92); }
.pdx-head__meta .pdx-tag--sold .pdx-tag__ico {
  background: rgba(52, 211, 153, .14);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .3);
  color: #6ee7b7;
}
.pdx-head__meta .pdx-tag--sold:hover {
  border-color: rgba(52, 211, 153, .42);
  background: rgba(52, 211, 153, .08);
  color: #ecfdf5;
}
.pdx-head__meta .pdx-tag--sold:hover .pdx-tag__ico {
  background: rgba(52, 211, 153, .24);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .5);
  color: #a7f3d0;
}

/* La note : ambre, comme les etoiles des avis. */
.pdx-head__meta .pdx-tag--rating {
  border-color: rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022));
  color: rgba(255, 232, 186, .95);
}
.pdx-head__meta .pdx-tag--rating .pdx-tag__ico {
  background: rgba(255, 210, 122, .13);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 122, .26);
  color: var(--pdx-star, #ffd27a);
}
.pdx-head__meta .pdx-tag--rating:hover {
  border-color: rgba(255, 210, 122, .4);
  background: rgba(255, 210, 122, .07);
  color: #fff4e0;
}
.pdx-head__meta .pdx-tag--rating:hover .pdx-tag__ico {
  background: rgba(255, 210, 122, .22);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 122, .45);
}

/*───────────────────────────────────────────────
  SURVOL DE LA BARRE D'EN-TETE
  Les cartes de la page (`.pdx-feat`, `.pdx-rev-card`, `.pdx-rel__card`)
  reagissent toutes au survol ; l'en-tete, non. Il reprend donc le meme jeu —
  bordure d'accent, fond releve, souleve — mais a moitie d'amplitude : une
  barre large comme la page qui monte de 4px se voit comme un soubresaut,
  alors que la meme sur une vignette de 200px se lit comme un relief.

  Le soulevement passe par `translate` et non par `transform` : `.pdx-rise`
  occupe deja `transform` pour l'entree en scene, avec une transition de .62s.
  Reutiliser `transform` ici ferait durer le survol plus d'une demi-seconde.
  Les deux proprietes se composent et s'animent separement.
───────────────────────────────────────────────*/
.pdx-js .pdx-head.pdx-rise {
  transition: opacity .62s var(--pdx-ease), transform .62s var(--pdx-ease),
              translate .34s cubic-bezier(.22, 1, .36, 1),
              border-color .34s ease, background-color .34s ease, box-shadow .34s ease;
  transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms, 0ms, 0ms, 0ms;
}
.pdx-head {
  transition: translate .34s cubic-bezier(.22, 1, .36, 1),
              border-color .34s ease, background-color .34s ease, box-shadow .34s ease;
}
/* Le halo. Pose en `::before` absolu : `.pdx-head` est un conteneur flex, un
   pseudo en flux normal deviendrait une troisieme colonne. */
.pdx-head::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(620px 170px at 14% -40%, rgba(23, 107, 255, .2), transparent 70%);
  transition: opacity .34s ease;
}
.pdx-head:hover {
  translate: 0 -2px;
  border-color: rgba(23, 107, 255, .4);
  background: var(--pdx-panel-hi);
  box-shadow: 0 16px 38px -20px rgba(23, 107, 255, .6);
}
.pdx-head:hover::before { opacity: 1; }
/* Le lisere du haut s'etire jusqu'au bout au lieu de s'eteindre a mi-chemin. */
.pdx-head:hover::after {
  background: linear-gradient(90deg, var(--pdx-accent), rgba(23, 107, 255, .55) 60%, transparent);
}

/* Selecteur de quantite : une borne atteinte doit se voir avant le clic. */
.pdv3-qty-btn { transition: opacity .18s ease, transform .18s cubic-bezier(.22,1,.36,1), background-color .18s ease; }
.pdv3-qty-btn:disabled { opacity: .32; cursor: not-allowed; }
.pdv3-qty-btn:not(:disabled):hover { transform: translateY(-1px); }
.pdv3-qty-btn:not(:disabled):active { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  .pdx-head__meta .pdx-tag,
  .pdx-head__meta .pdx-tag--bolt svg { animation: none; }
  .pdx-head__meta .pdx-tag:hover,
  .pdx-head__meta .pdx-tag:hover .pdx-tag__ico,
  .pdv3-qty-btn:not(:disabled):hover,
  .pdv3-qty-btn:not(:disabled):active { transform: none; }
  .pdx-head:hover { translate: none; }
}

/*───────────────────────────────────────────────
  MARQUE — le sigle FS a la place du mot
  Le nom de la boutique reste dans le document (voir navbar.njk) ; il est
  simplement recouvert. « font-size: 0 » le retire de la vue sans le retirer
  du DOM : le lien garde un nom lisible par un lecteur d'ecran et par un
  moteur de recherche meme si l'image ne se charge pas.

  L'image est en data URI plutot qu'en fichier .png depose dans le theme : le
  pousseur de theme lit chaque fichier en UTF-8 et renverrait un binaire
  corrompu a chaque envoi. En texte, elle voyage intacte et se met en cache
  avec la feuille de style, sans requete supplementaire.

  « aspect-ratio » tient les proportions d'origine (127 x 72) : une seule
  hauteur a regler par emplacement, la largeur suit.
───────────────────────────────────────────────*/
.nav__logo-word,
.footer__logo-word,
.drawer__logo-word {
  display: block;
  aspect-ratio: 127 / 72;
  background: url("data:image/png;base64,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") center / contain no-repeat;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.nav__logo-word {
  height: 30px;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.nav__logo:hover .nav__logo-word { transform: scale(1.05); }
@media (max-width: 639px) { .nav__logo-word { height: 26px; } }

.footer__logo-word { height: 40px; margin-bottom: 16px; }

/* Le tiroir mobile porte la meme marque que la barre qui l'ouvre. */
.drawer__logo-word { height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .nav__logo:hover .nav__logo-word { transform: none; }
}

/*───────────────────────────────────────────────
  PAGES LEGALES — CGV, CONFIDENTIALITE, REMBOURSEMENT
  Ces trois pages passent par templates/*.njk : un `.page-head` puis le texte
  du dashboard dans `.prose`. Le theme ne maitrise pas le balisage interieur,
  seulement sa mise en forme — on style donc les elements bruts que l'editeur
  de SellAuth produit.

  Le corps entre dans une carte, et chaque titre de section ouvre son bloc par
  un filet. C'est ce qui donne le rythme : sans separateur, une suite de
  paragraphes de longueur egale se lit comme un mur.
───────────────────────────────────────────────*/
.page--legal { max-width: 900px; }

/* Pastille de rubrique au-dessus du titre : elle situe la page dans un
   ensemble (« Legal ») la ou le seul titre ne dit pas qu'il y en a d'autres. */
.page-head__eyebrow {
  display: inline-block;
  margin-bottom: 22px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(23, 107, 255, .35);
  background: rgba(23, 107, 255, .10);
  color: var(--fs-acc-hi);
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}

.page--legal .page-head__title {
  font-size: clamp(30px, 5vw, 42px);
  letter-spacing: -.03em;
  /* `.page-head` impose un interligne de 20px, herite du fil d'Ariane. Sans
     cette ligne, un titre de 42px se dessine dans une boite de 20px : les
     glyphes debordent vers le haut et viennent toucher la pastille, qui
     paraissait collee alors que sa marge etait bien la. */
  line-height: 1.08;
}

.page--legal .prose {
  max-width: none;
  padding: clamp(22px, 4vw, 40px);
  border-radius: var(--fs-r);
  border: 1px solid var(--fs-line);
  background: var(--fs-card);
  font-size: 16px; line-height: 1.72;
  color: var(--fs-muted);
}

/* Filet au-dessus de chaque titre de section — mais pas du premier, qui
   toucherait le bord haut de la carte. */
.page--legal .prose h2,
.page--legal .prose h3 {
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--fs-line);
  color: var(--fs-fg);
}
.page--legal .prose h2 { font-size: 20px; letter-spacing: -.01em; }
.page--legal .prose h3 { font-size: 17px; }
.page--legal .prose > :first-child {
  margin-top: 0; padding-top: 0; border-top: 0;
}
.page--legal .prose > :last-child { margin-bottom: 0; }

.page--legal .prose p { margin: 0 0 14px; }
.page--legal .prose ul, .page--legal .prose ol { margin: 0 0 16px 20px; }
.page--legal .prose li { margin-bottom: 7px; }

/* Le gras sort du gris du corps : c'est ce qui fait ressortir une clause. */
.page--legal .prose strong { color: var(--fs-fg); font-weight: 700; }
.page--legal .prose a {
  color: var(--fs-acc-hi);
  text-decoration-color: rgba(59, 231, 255, .4);
  text-underline-offset: .2em;
}
.page--legal .prose a:hover { text-decoration-color: currentColor; }

@media (max-width: 640px) {
  .page--legal .prose { font-size: 15px; }
  .page--legal .prose h2 { font-size: 18px; }
}

/* ── Bloc de contact en fin de page legale ──
   Il ferme la page comme une section a part entiere : filet au-dessus,
   titre au meme rang que ceux du texte. Le lecteur qui arrive au bout d'un
   texte juridique cherche generalement a qui parler ; c'est la qu'il faut le
   lui dire, pas dans un coin du pied de page. */
.legal-support { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--fs-line); }
.legal-support__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  color: var(--fs-fg);
}
.legal-support__intro { margin: 0 0 18px; font-size: 15px; color: var(--fs-muted); }

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

/* Blurple de Discord, pas le bleu du theme : meme raison qu'au raccourci de
   la navbar, c'est la couleur qui annonce la destination. */
.legal-support__btn {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  padding: 11px 18px;
  border-radius: var(--fs-r-sm);
  background: #5865f2; 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; }

/* Sous 560px le bouton passe sous le texte et prend toute la largeur : cote
   a cote, il ne resterait ni assez de place au libelle ni a la cible. */
@media (max-width: 560px) {
  .legal-support__card { flex-direction: column; align-items: stretch; gap: 14px; }
  .legal-support__btn { justify-content: center; }
}

/*───────────────────────────────────────────────
  SELECTEUR DE GROUPE — GRILLE DE CARTES
  Un groupe SellAuth n'a pas de page a lui : la carte ouvre ce panneau. Il
  presentait ses articles en lignes, ou l'image tombait a 44px — trop petit
  pour reconnaitre un produit, alors que c'est justement ce qu'on demande au
  visiteur a cet instant. Ils reprennent donc la forme des cartes du catalogue :
  meme grille, meme vignette, meme prix cyan. Choisir dans le panneau devient
  le meme geste que choisir sur la boutique.

  Ces regles vivent dans custom.css, charge apres style.css : elles ecrasent
  l'ancienne mise en page sans la supprimer, la structure du panneau (fond,
  entete, fermeture, animation d'ouverture) restant celle de style.css.
───────────────────────────────────────────────*/
.gpick__panel { max-width: 980px; }
.gpick__title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

.gpick__list {
  padding: 16px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.gpick__card {
  display: flex; flex-direction: column;
  border-radius: var(--fs-r-sm);
  border: 1px solid var(--fs-line);
  background: var(--fs-card);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.gpick__card:hover {
  transform: translateY(-3px);
  border-color: rgba(23, 107, 255, .5);
  box-shadow: 0 18px 40px -22px rgba(0, 85, 251, .6);
}

.gpick__thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
}
.gpick__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pastille de disponibilite : memes teintes que `.pc-stockdot` sur les cartes
   du catalogue. Le fond sombre translucide la detache de l'image, quelle que
   soit la vignette derriere. */
.gpick__stock {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(8, 10, 15, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.gpick__stock i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.gpick__stock--in    { color: #4ade80; }
.gpick__stock--in i  { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .9); }
.gpick__stock--out   { color: #f87171; }
.gpick__stock--out i { background: #ef4444; }

.gpick__off {
  position: absolute; top: 8px; right: 8px;
  padding: 4px 8px; border-radius: 999px;
  background: var(--fs-acc); color: #fff;
  font-size: 11px; font-weight: 800;
}

/* Rupture : le voile porte le mot sur la vignette. Une simple opacite sur la
   carte laissait deviner le produit sans dire pourquoi il etait terne. */
.gpick__veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 15, .62);
  color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.gpick__card--out { opacity: .72; }
.gpick__card--out:hover {
  transform: none; border-color: var(--fs-line); box-shadow: none;
}

.gpick__body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 7px; }
.gpick__name {
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--fs-fg);
  /* Deux lignes au plus : au-dela, les cartes de la grille se desalignent. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.gpick__prices { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.gpick__price {
  font-family: var(--font-display); font-weight: 900;
  letter-spacing: -.04em; font-size: 19px;
  color: var(--fs-acc-hi);
}
.gpick__was { font-size: 12px; color: var(--fs-muted); text-decoration: line-through; }

@media (max-width: 560px) {
  .gpick__list { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; padding: 12px; }
  .gpick__price { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .gpick__card { transition: none; }
  .gpick__card:hover { transform: none; }
}

/*───────────────────────────────────────────────
  PAGE PRODUIT — REMISES DEGRESSIVES
  La logique existait cote SellAuth mais la colonne d'achat maison ne
  l'affichait pas : les paliers etaient factures sans jamais etre annonces.

  Deux blocs, deux roles. Le rappel dit ce qu'il manque pour le palier
  suivant — c'est ce qui fait monter un panier. Le tableau montre l'echelle
  entiere — c'est ce qui rassure celui qui compare avant d'acheter. Afficher
  l'un sans l'autre laisse toujours une des deux questions sans reponse.
───────────────────────────────────────────────*/
.pdx-vol { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
.pdx-vol[hidden], .pdx-vol__nudge[hidden], .pdx-vol__table[hidden] { display: none; }

/* ── Le rappel ── */
.pdx-vol__nudge {
  display: flex; flex-direction: column; gap: 8px;
  padding: 9px 11px;
  border-radius: var(--fs-r-sm);
  border: 1px solid rgba(23, 107, 255, .28);
  background: rgba(23, 107, 255, .07);
}
.pdx-vol__nudge-row { display: flex; align-items: center; gap: 8px; }
.pdx-vol__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--fs-acc); color: #fff;
}
.pdx-vol__ico svg { width: 11px; height: 11px; }
.pdx-vol__nudge-txt { margin: 0; font-size: 12.5px; color: var(--fs-fg); line-height: 1.3; }
.pdx-vol__nudge-txt b { font-weight: 800; color: var(--fs-acc-hi); }

/* La barre mesure le chemin parcouru vers le palier suivant, pas un
   pourcentage de remise : elle repart de zero a chaque palier franchi. */
.pdx-vol__bar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .10);
}
.pdx-vol__bar-fill {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: var(--fs-grad);
  /* Court et sans rebond. A chaque « + » la barre doit avoir fini avant que le
     doigt ne revienne sur le bouton : une courbe elastique ferait croire que
     le clic n'a pas encore ete pris en compte. */
  transition: width .22s ease;
  /* La lueur reprend la teinte de la barre. A 6px de haut, un aplat parait
     plat ; le halo lui redonne du relief sans l'epaissir. */
  box-shadow: 0 0 14px rgba(23, 107, 255, .5);
}

/* Le compte restant grossit brievement quand il change : c'est l'accuse de
   reception du clic. Sans lui, ajouter un exemplaire ne fait bouger qu'une
   barre a l'autre bout du bloc, et le lien de cause a effet se perd. */
.pdx-vol__nudge-txt b { display: inline-block; }
.pdx-vol__nudge-txt b.pdx-vol__pop { animation: pdxVolPop .34s ease; }
@keyframes pdxVolPop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Palier atteint : une onde part de la ligne concernee. L'evenement merite
   d'etre marque — c'est le moment ou le prix baisse. */
.pdx-vol__row--just { animation: pdxVolUnlock .65s ease-out; }
@keyframes pdxVolUnlock {
  0%   { box-shadow: inset 2px 0 0 var(--fs-acc), 0 0 0 0 rgba(59, 231, 255, .5); }
  100% { box-shadow: inset 2px 0 0 var(--fs-acc), 0 0 0 16px rgba(59, 231, 255, 0); }
}

/* ── Le tableau ── */
.pdx-vol__table {
  border-radius: var(--fs-r-sm);
  border: 1px solid var(--fs-line);
  background: var(--fs-card);
  overflow: hidden;
}
/* Trois colonnes EGALES, et surtout identiques entre l'en-tete et les lignes.

   Deux pieges se cumulaient ici. Des colonnes `auto` se dimensionnent chacune
   sur leur propre contenu : l'en-tete et les lignes etant deux grilles
   distinctes, « UNIT PRICE » plus large que « €0.54 » les faisait tomber a des
   endroits differents. Et une premiere colonne en `1fr` absorbait tout
   l'espace restant, tassant les deux autres contre le bord droit et creusant
   un vide au milieu du tableau.

   Des tiers egaux reglent les deux : les colonnes se correspondent d'une
   grille a l'autre, et se repartissent sur toute la largeur. */
.pdx-vol__head, .pdx-vol__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px 11px;
}
/* La quantite reste calee a gauche : c'est l'entree de la ligne, ce par quoi
   on la cherche. Les deux valeurs se centrent dans leur colonne. */
.pdx-vol__head > :nth-child(2), .pdx-vol__row > :nth-child(2),
.pdx-vol__head > :nth-child(3), .pdx-vol__row > :nth-child(3) { text-align: center; }
.pdx-vol__head {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--fs-muted);
  border-bottom: 1px solid var(--fs-line);
}
.pdx-vol__row { font-size: 12.5px; color: var(--fs-fg); }
.pdx-vol__row + .pdx-vol__row { border-top: 1px solid rgba(255, 255, 255, .04); }

/* Le palier atteint se signale par un rail d'accent a gauche et non par une
   couleur de fond seule : la ligne reste lisible, et le repere tient meme
   quand plusieurs lignes se suivent. */
.pdx-vol__row--on {
  background: rgba(23, 107, 255, .08);
  box-shadow: inset 2px 0 0 var(--fs-acc);
}
.pdx-vol__off { font-weight: 800; color: var(--fs-acc-hi); }

/* Meme choix que pour les carrousels de la page d'accueil : ces trois
   mouvements sont conserves sous prefers-reduced-motion. `style.css` coupe
   toutes les animations du site sous ce reglage, donc on rearme les longhands
   en `!important`, cible sur ces trois regles uniquement.

   La raison n'est pas cosmetique : la barre, le nombre et l'onde sont le seul
   retour visuel au clic sur « + ». Coupes, le bouton parait inerte et
   l'acheteur ne sait pas que sa quantite a ete prise en compte. */
@media (prefers-reduced-motion: reduce) {
  .pdx-vol__bar-fill {
    transition-property: width !important;
    transition-duration: .22s !important;
    transition-timing-function: ease !important;
  }
  .pdx-vol__nudge-txt b.pdx-vol__pop {
    animation-name: pdxVolPop !important;
    animation-duration: .34s !important;
    animation-timing-function: ease !important;
    animation-iteration-count: 1 !important;
  }
  .pdx-vol__row--just {
    animation-name: pdxVolUnlock !important;
    animation-duration: .65s !important;
    animation-timing-function: ease-out !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Le bloc de contact vit DANS la carte ──
   Il herite donc des regles de `.prose`, dont trois le derangent et sont
   neutralisees ici, sur ce bloc uniquement :

   - le filet des titres de section : `.legal-support` porte deja le sien, on
     en aurait deux l'un sur l'autre ;
   - la couleur des liens de texte : le bouton Discord deviendrait cyan et
     souligne, alors qu'il doit rester blanc sur blurple ;
   - les marges de paragraphe, calees pour un texte courant et trop larges
     pour un chapeau de deux lignes.

   Ces selecteurs portent trois classes contre deux classes et un element pour
   ceux de `.prose` : ils l'emportent quel que soit l'ordre du fichier. */
.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; }


/* ==========================================================
   GRILLE PRODUITS — 4 par ligne + rendu moins « zoome »
   Ajoute le 21/08/2026. Ce bloc TOUCHE a la grille (largeur
   de colonne + echelle typo des cartes), contrairement au
   reste du fichier.
   ========================================================== */
.product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.product-card .pc-thumb { aspect-ratio: 16 / 10; }

.product-card .pc-info { padding: 10px 12px 12px; }
.product-card .pc-title { font-size: 13px; }
.product-card .pc-price { font-size: 19px; }
.product-card .pc-chip,
.product-card .pc-stockdot { font-size: 9px; padding: 3px 7px; }
.product-card .pc-buy { font-size: 12px; padding: 8px 10px; }
.product-card .pc-buy svg { width: 14px; height: 14px; }

@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
}


/* ==========================================================
   REFUND POLICY — bloc support remonte dans le texte
   Deplace par custom.js sous « How to Request a Refund ».
   Inline, on ne garde que la carte : le titre « Support » et
   son chapeau feraient doublon avec le titre de section juste
   au-dessus.
   ========================================================== */
.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;
}

/* ==========================================================
   PAGE CATALOGUE — RAIL LATERAL
   Ajoute le 26/08/2026. Refonte de /products et
   /products/{categorie} : rail collant a gauche (recherche +
   categories + produits), grille a droite. Inspiration
   exudos.gg / dailystore.me.

   Tout est ici et non dans style.css : ce fichier est charge
   en dernier et n est jamais ecrase par une mise a jour du
   theme. Les anciennes regles `.shop-filterbar__*` restent
   dans style.css, simplement plus utilisees par cette page.
   ========================================================== */

.shop-layout--rail {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  max-width: 1560px;
}

/* ── Le rail ─────────────────────────────────────────────── */
/* 96px = barre de navigation fixe (76px) + respiration. La hauteur
   fixe est ce qui permet au rail de defiler independamment de la
   grille, comme sur les boutiques de reference. */
.crail {
  position: sticky;
  top: 96px;
  align-self: start;
  height: calc(100vh - 128px);
  min-height: 420px;
}
.crail__inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ── Recherche ───────────────────────────────────────────── */
.crail__search { flex-shrink: 0; padding-bottom: 12px; }

/* ── Champ de recherche : la pilule bleue du site ──
   Meme anatomie que `.fs-search` du hero et que l ancienne barre de la page
   produits : enveloppe en pilule bordee de bleu avec sa lueur, loupe posee
   dans sa pastille bleutee, champ transparent dedans. Tout est en FLUX
   (loupe, champ, badge) et non en `position:absolute` : c est l enveloppe
   qui porte la forme et l anneau de focus, l input n a plus ni bordure ni
   cadre a lui — sans quoi un `:focus-visible` dessinerait un second carre
   par-dessus le premier.

   Seule adaptation au rail : 46px de haut et une pastille de 34 au lieu de
   52/40, la colonne ne fait que 268px de large. */
.crail__search-box {
  display: flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 5px;
  border-radius: var(--fs-r, 1.35rem);
  border: 1px solid rgba(23, 107, 255, .3);
  background: rgba(16, 19, 27, .85);
  box-shadow: 0 0 70px -34px rgba(0, 85, 251, .9);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.crail__search-box:focus-within {
  border-color: rgba(23, 107, 255, .7);
  box-shadow:
    0 0 70px -34px rgba(0, 85, 251, .9),
    0 0 0 3px rgba(23, 107, 255, .18);
}

/* La loupe EST le svg : le `padding` creuse la pastille et le viewBox se
   remet a l echelle dedans — un glyphe de 16px dans un carre de 34. Les
   attributs width/height du gabarit sont ecrases par ces regles. */
.crail__search-icon {
  position: static; transform: none;
  width: 34px; height: 34px; padding: 9px; flex-shrink: 0;
  border-radius: var(--fs-r-sm, 1.05rem);
  background: rgba(23, 107, 255, .1);
  color: var(--fs-acc, #176bff);
  transition: color .2s ease, background-color .2s ease;
}
.crail__search-box:focus-within .crail__search-icon {
  color: var(--fs-acc-mid, #178fff);
  background: rgba(23, 107, 255, .18);
}

.crail__search-input {
  height: 34px; min-width: 0; flex: 1;
  padding: 0; border: 0; border-radius: 0;
  background: transparent;
  color: var(--fs-fg, #f5f7ff);
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
}
.crail__search-input::placeholder { color: var(--fs-muted, #9ca3b8); }
.crail__search-input:focus,
.crail__search-input:focus-visible { outline: none; border: 0; }
.crail__search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

/* Le badge et la croix se relaient : script.js en affiche toujours un seul.
   Tous deux en flux, donc la largeur du champ ne change pas au passage de
   l un a l autre. */
.crail__search-kbd {
  position: static; flex-shrink: 0;
  /* Meme encombrement que la croix (26 + 6) : le champ ne se redimensionne
     pas de quelques pixels au moment ou l un remplace l autre. */
  width: 26px; margin-right: 6px; text-align: right;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
  color: rgba(23, 107, 255, .55);
  pointer-events: none; user-select: none;
}
.crail__search-clear {
  position: static; transform: none;
  width: 26px; height: 26px; flex-shrink: 0; margin-right: 6px;
  border: 0; border-radius: 50%;
  background: none; color: var(--fs-muted, #9ca3b8);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.crail__search-clear:hover {
  background: rgba(23, 107, 255, .18);
  color: var(--fs-acc-mid, #178fff);
}

.crail__rule { flex-shrink: 0; height: 1px; background: rgba(255,255,255,.07); }
/* Le meme filet, mais pose DANS la liste defilante, sous « All products ». Il
   defile donc avec elle ; `.crail__nav` reserve 8px a droite pour l ascenseur,
   d ou la largeur legerement plus courte que celle du filet du haut. */
.crail__rule--nav { margin: 10px -8px 0 0; }

/* ── Liste defilante ─────────────────────────────────────── */
.crail__nav {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 8px 8px 8px 0;
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
  overscroll-behavior: contain;
}
.crail__nav::-webkit-scrollbar { width: 5px; }
.crail__nav::-webkit-scrollbar-track { background: transparent; }
.crail__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }
.crail__nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }

.crail__label {
  padding: 0 8px; margin: 14px 0 6px;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
}
.crail__label--spaced { margin-top: 18px; }

/* ── « All products » ────────────────────────────────────── */
.crail-all {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: background 200ms ease;
}
.crail-all:hover { background: rgba(255,255,255,.04); }
.crail-all.active { background: rgba(255,255,255,.06); }
.crail-all__icon {
  flex-shrink: 0;
  width: 27px; height: 27px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1e1e24, #121216);
  border: 1px solid rgba(255,255,255,.07);
  color: #fff;
}
.crail-all__icon svg { width: 13px; height: 13px; }
.crail-all__label {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: #fff;
}

/* ── Une categorie ───────────────────────────────────────── */
.crail-group { display: flex; flex-direction: column; }
.crail-group__head {
  display: flex; align-items: center; gap: 2px;
  /* 3px en haut/bas et non 6 : le bouton du chevron fait 22px de haut, la
     rangee garde donc exactement la hauteur qu elle avait avec le chevron
     nu (28px), zone cliquable en plus. */
  width: 100%; padding: 3px 4px 3px 8px; border-radius: 9px;
  color: inherit;
  transition: background 200ms ease;
}
.crail-group__head:hover { background: rgba(255,255,255,.03); }
/* Le nom occupe toute la rangee sauf le bouton : c est lui le lien vers la
   page de la categorie, le chevron a cote ne fait que plier la liste. */
.crail-group__link {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: inherit;
}
.crail-group__icon {
  flex-shrink: 0; display: flex;
  color: rgba(255,255,255,.35);
  transition: color 200ms ease;
}
.crail-group__icon svg { width: 12px; height: 12px; }
.crail-group__head:hover .crail-group__icon { color: rgba(255,255,255,.60); }
/* Petites capitales espacees : le nom de categorie se lit comme une etiquette
   de section, pas comme un lien. C est ce qui donne au rail sa lecture en
   deux etages — l etiquette, puis les produits en tuiles dessous. */
.crail-group__name {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 200ms ease;
}
.crail-group__head:hover .crail-group__name { color: rgba(255,255,255,.78); }
.crail-group__rule {
  flex: 1; min-width: 8px; height: 1px;
  background: rgba(255,255,255,.07);
}
.crail-group__count {
  flex-shrink: 0;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.32);
}
/* Bouton plier/deplier : 22px de cible cliquable autour du chevron, assez
   large pour le doigt sans elargir la rangee (le chevron seul faisait 13px). */
.crail-group__toggle {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin: 0;
  border: 0; border-radius: 7px; background: none;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  transition: background 200ms ease;
}
.crail-group__toggle:hover { background: rgba(255,255,255,.09); }
.crail-group__toggle:hover .crail-group__chevron { color: rgba(255,255,255,.85); }
.crail-group__toggle:focus-visible {
  outline: 2px solid rgba(255,255,255,.32); outline-offset: 1px;
}
.crail-group__chevron {
  flex-shrink: 0; color: rgba(255,255,255,.25);
  transition: transform 300ms ease, color 200ms ease;
}
.crail-group__head:hover .crail-group__chevron { color: rgba(255,255,255,.55); }

/* Une categorie fermee : le chevron avance d un cheveu au survol du bouton,
   comme un « ouvre-moi ». Depliee, il pointe vers le bas et ne bouge plus. */
.crail-group:not(.open) > .crail-group__head .crail-group__toggle:hover .crail-group__chevron { transform: translateX(2px); }
.crail-group.open > .crail-group__head .crail-group__chevron { transform: rotate(90deg); }

.crail-group__head.active { background: rgba(255,255,255,.06); }
.crail-group__head.active .crail-group__name { color: rgba(255,255,255,.92); }
.crail-group__head.active .crail-group__icon { color: #fff; }
.crail-group__head.active .crail-group__count { color: rgba(255,255,255,.55); }
.crail-group__head.active .crail-group__rule { background: rgba(255,255,255,.14); }
.crail-group__head.active .crail-group__chevron { color: rgba(255,255,255,.55); }

/* Les tuiles rentrent d un cheveu sous l etiquette de categorie : c est ce
   decalage qui fait lire le bloc comme « une section et ses entrees ». */
.crail-group__body { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 8px 6px; }
.crail-group__body--flat { padding: 4px 0 8px 0; }
/* Chaque categorie porte ses produits, y compris pliee : la recherche du rail
   doit pouvoir les retrouver dans toute la boutique. Pliee, on les masque —
   custom.js retire `open` le temps d une recherche pour les faire ressortir. */
.crail-group:not(.open) > .crail-group__body { display: none; }
/* Categorie sans produit : le gabarit rend le bloc sans la moindre espace,
   d ou `:empty` plutot qu un test cote serveur. */
.crail-group__body:empty { display: none; }

/* ── Une ligne produit ───────────────────────────────────── */
.crail-item {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 8px; border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: background 200ms ease;
}
.crail-item:hover { background: rgba(255,255,255,.05); }
/* Tuile 32px : les visuels produit sont des bannieres larges, pas des logos
   carres. `cover` recadre sur le centre, la ou le logo est toujours pose —
   `contain` reduirait la banniere entiere a 32x20 et rendrait le logo
   illisible. La bordure et le fond tiennent la tuile meme sans image. */
.crail-item__icon {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 9px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #141418; border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color 200ms ease;
}
.crail-item:hover .crail-item__icon { border-color: rgba(255,255,255,.14); }
.crail-item__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crail-item__icon i {
  font-style: normal; font-family: var(--font-ui);
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.55);
  text-transform: uppercase;
}
.crail-item__name {
  flex: 1; min-width: 0;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 500;
  color: rgba(255,255,255,.78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 200ms ease;
}
.crail-item:hover .crail-item__name { color: #fff; }
.crail-item__price {
  flex-shrink: 0;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.34);
  transition: color 200ms ease;
}
.crail-item:hover .crail-item__price { color: rgba(255,255,255,.70); }

/* Une entree de groupe (plusieurs formules sous un seul produit, ex.
   ChatGPT+) porte ce chevron : c'est le seul signe visuel qui la distingue
   d'un produit simple avant le clic — script.js ouvre la vue « plans
   disponibles » au lieu de naviguer. */
.crail-item__chevron {
  flex-shrink: 0; display: flex;
  color: rgba(255,255,255,.28);
  transition: color 200ms ease;
}
.crail-item:hover .crail-item__chevron { color: rgba(255,255,255,.6); }

.crail-noresult {
  padding: 18px 8px; text-align: center;
  font-family: var(--font-ui); font-size: 12px;
  color: rgba(255,255,255,.35);
}

/* Pastilles de categorie de /products (bloc « GRILLE PRODUITS » plus haut
   pour la mise en page — ici seulement la couleur). La categorie active
   reprend le degrade bleu des boutons plutot que le blanc plein du theme
   d'origine, pour rester dans la palette du site. */
.shop-cats { margin-bottom: 24px; border-color: var(--fs-line); }
.shop-cat-pill { gap: 7px; }
.shop-cat-pill svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .75; }
.shop-cat-pill:hover { border-color: rgba(23, 107, 255, .45); }
.shop-cat-pill:hover svg { opacity: 1; }
.shop-cat-pill.active {
  background: var(--fs-grad); border-color: transparent; color: #fff;
  box-shadow: 0 12px 28px -16px rgba(23, 107, 255, .9);
}
.shop-cat-pill.active svg { opacity: 1; }
.shop-cat-pill__count {
  font-size: 10.5px; font-weight: 700; opacity: .7;
  font-variant-numeric: tabular-nums;
}

/* Masquage pilote par la recherche (custom.js). */
.crail-item.is-hidden,
.crail-group.is-hidden,
.crail__label.is-hidden,
.crail-all.is-hidden { display: none !important; }

/* ── Carte d aide en pied de rail ────────────────────────── */
.crail__help {
  flex-shrink: 0; margin-top: 12px;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 12px;
  background: linear-gradient(160deg, rgba(88,101,242,.14), rgba(88,101,242,.05));
  border: 1px solid rgba(88,101,242,.22);
  text-decoration: none; color: inherit;
  transition: border-color 200ms ease, background 200ms ease;
}
.crail__help:hover {
  border-color: rgba(88,101,242,.45);
  background: linear-gradient(160deg, rgba(88,101,242,.22), rgba(88,101,242,.08));
}
.crail__help-icon {
  flex-shrink: 0; display: flex;
  width: 28px; height: 28px; border-radius: 8px;
  align-items: center; justify-content: center;
  background: rgba(88,101,242,.20); color: #c7ccff;
}
.crail__help-icon svg { width: 15px; height: 15px; }
.crail__help-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.crail__help-text b {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: #fff;
}
.crail__help-text em {
  font-style: normal; font-family: var(--font-ui);
  font-size: 11px; color: rgba(255,255,255,.50);
}

/* ── Barre d outils de la grille ─────────────────────────── */
.cat-toolbar {
  position: relative; /* les popovers Prix / Tri debordent */
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 2px 0 18px;
}
.cat-toolbar__count {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 500;
  color: rgba(255,255,255,.50);
}
.cat-toolbar__num { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.cat-toolbar__actions { display: flex; align-items: center; gap: 10px; }

.cat-toolbar__clear {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 10px; border: 0; border-radius: 9px;
  background: none; color: rgba(255,255,255,.45);
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: color 150ms ease, background 150ms ease;
}
.cat-toolbar__clear:hover { color: #fff; background: rgba(255,255,255,.06); }
.cat-toolbar__clear:disabled { opacity: 0; pointer-events: none; }

/* Les selecteurs Prix et Tri ont ete retires du gabarit le 26/08/2026 : la
   barre ne porte plus que le compteur, et le bouton « Clear » qui n apparait
   que pendant une recherche. Leurs styles restent dans style.css, inutilises
   par cette page. */

.cat-toolbar + .product-grid { margin-top: 0; }

/* ── Grille : le nombre de colonnes suit la largeur restante ── */
@media (min-width: 1024px) {
  .shop-layout--rail .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1360px) {
  .shop-layout--rail .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════
   SOUS 1024px — le rail se replie au-dessus de la grille
   Pas de tiroir lateral : le champ de recherche est unique
   sur la page (script.js le retrouve par son id), le cacher
   derriere un bouton le rendrait inaccessible au pouce.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .shop-layout--rail { display: block; }

  .crail {
    position: static; height: auto; min-height: 0;
    margin-bottom: 20px;
  }
  .crail__inner { display: block; }
  .crail__search { padding-bottom: 12px; }
  .crail__rule { display: none; }

  /* Les categories deviennent une rangee de pastilles defilante. */
  .crail__nav {
    flex-direction: row; align-items: center;
    gap: 8px; padding: 2px 0 8px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .crail__nav::-webkit-scrollbar { display: none; }

  .crail__label,
  .crail-group__body,
  .crail-group__rule,
  .crail-group__chevron,
  .crail-group__toggle,
  .crail__help { display: none; }

  .crail-all,
  .crail-group__head {
    flex-shrink: 0;
    height: 34px; padding: 0 13px; border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    white-space: nowrap;
  }
  .crail-all { gap: 7px; }
  /* Plus de bouton dans la pastille : le lien la remplit, la zone tactile
     reste la pastille entiere comme avant. */
  .crail-group__head { gap: 0; padding: 0 13px; }
  .crail-group__link { gap: 7px; height: 100%; }
  .crail-all__icon {
    width: 18px; height: 18px; border: 0; border-radius: 5px;
    background: none;
  }
  .crail-all__icon svg { width: 12px; height: 12px; }
  .crail-all__label,
  .crail-group__name {
    font-size: 12.5px; font-weight: 600;
    text-transform: none; letter-spacing: .005em;
  }
  .crail-all.active { background: #fff; border-color: #fff; }
  .crail-all.active .crail-all__label,
  .crail-all.active .crail-all__icon { color: #000; }
  .crail-group__head.active { background: #fff; border-color: #fff; }
  .crail-group__head.active .crail-group__name,
  .crail-group__head.active .crail-group__icon { color: #000; }
  .crail-group__head.active .crail-group__count { color: rgba(0,0,0,.45); }
  .crail-group__head:not(.active) .crail-group__count { color: rgba(255,255,255,.35); }

  .cat-toolbar { margin-bottom: 14px; }
}

@media (max-width: 560px) {
  .cat-toolbar { gap: 10px; }
}

/*===========================================================================
  ESPACE CLIENT — TABLEAU DE BORD
  ---------------------------------------------------------------------------
  Accompagne `templates/customer-dashboard.njk` (refonte du 28/08/2026, mise
  en page calquee sur exudos.gg/dashboard).

  Les valeurs viennent d un releve des styles calcules du modele : cartes en
  rayon 16px sur un filet blanc a 8 %, avec un lisere clair en haut (l ombre
  `inset`) qui donne le relief ; chiffres en 30px/600 a interlettrage negatif ;
  etiquettes en 700 majuscules tres espacees.

  Deux choses NE sont pas reprises du modele : leur rouge, remplace par le
  bleu de la boutique (`--cl-accent`), et Inter, remplace par Poppins
  (`--font-ui`) — sinon la page jurerait avec le reste du site.
===========================================================================*/

/* La barre de navigation du site est en `position: fixed` sur 76px et le
   <main> demarre a y=0 : sans ce retrait en haut, le fil d Ariane et le titre
   passaient DERRIERE elle. Chaque gabarit doit se decaler lui-meme, la
   plateforme ne reserve pas la place. */
.cdash {
  --cdash-nav: 76px;
  /* Inter, la police du modele, chargee par le gabarit. Poppins reste le repli
     et sert donc pendant le chargement de la fonte. */
  --cdash-font: 'Inter', var(--font-ui);
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 1420px;
  margin: 0 auto;
  padding: calc(var(--cdash-nav) + 28px) 20px 64px;
}
/* Une seule regle plutot que de reecrire chaque `font-family` : tout ce qui
   est dans le tableau de bord herite d Inter. */
.cdash,
.cdash [class^="cdash"],
.cdash [class*=" cdash"] { font-family: var(--cdash-font); }

/* ── Rail ──────────────────────────────────────────────────────────── */
/* Colle sous la barre de navigation : le modele n en a pas et occupe toute
   la hauteur, ici elle existe sur toutes les pages. */
.cdash-rail {
  /* `min-width: 0` sans quoi la rangee de pastilles du mode etroit impose sa
     largeur naturelle a la colonne de grille et fait deborder toute la page
     horizontalement (la valeur par defaut d un element de grille est `auto`). */
  min-width: 0;
  position: sticky; top: calc(var(--cdash-nav) + 16px);
  border-radius: 18px;
  background: rgba(255,255,255,.022);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: rgba(255,255,255,.04) 0 1px 0 0 inset, rgba(0,0,0,.55) 0 30px 70px -50px;
}
.cdash-rail__inner { display: flex; flex-direction: column; padding: 16px 12px 12px; }

.cdash-rail__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
.cdash-rail__brand-mark {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: rgb(var(--cl-accent) / .12);
  border: 1px solid rgb(var(--cl-accent) / .22);
  color: rgb(var(--cl-accent));
}
.cdash-rail__brand-mark svg { width: 16px; height: 16px; }
.cdash-rail__brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cdash-rail__brand-text b {
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: #fff;
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdash-rail__brand-text em {
  font-style: normal; font-family: var(--font-ui);
  font-size: 10.5px; color: rgba(255,255,255,.38);
}

.cdash-rail__label {
  padding: 0 10px; margin: 14px 0 6px;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.34);
}
.cdash-rail__nav { display: flex; flex-direction: column; gap: 2px; }

.cdash-rail__item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 12px;
  text-decoration: none; color: rgba(255,255,255,.55);
  transition: background 200ms ease, color 200ms ease;
}
.cdash-rail__item:hover { background: rgba(255,255,255,.04); color: rgba(255,255,255,.85); }
.cdash-rail__icon { flex-shrink: 0; width: 16px; height: 16px; }
.cdash-rail__icon--discord { color: #7d8ffb; }
.cdash-rail__text {
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Le trait a gauche de l entree courante, comme le modele. Il est en position
   absolue pour ne pas decaler le texte quand il apparait. */
.cdash-rail__bar {
  position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: rgb(var(--cl-accent));
  transition: height 220ms ease;
}
.cdash-rail__item.is-active { background: rgba(255,255,255,.06); color: #fff; }
.cdash-rail__item.is-active .cdash-rail__text { font-weight: 600; }
.cdash-rail__item.is-active .cdash-rail__bar { height: 18px; }
.cdash-rail__out {
  width: 12px; height: 12px; margin-left: auto;
  color: rgba(255,255,255,.22); flex-shrink: 0;
}

.cdash-rail__account {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 12px 8px 4px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cdash-rail__avatar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(160deg, #1e1e24, #121216);
  border: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: #fff;
}
.cdash-rail__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cdash-rail__who b {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdash-rail__who em {
  font-style: normal; font-family: var(--font-ui);
  font-size: 10.5px; color: rgba(255,255,255,.32);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Colonne principale ────────────────────────────────────────────── */
.cdash-main { min-width: 0; display: flex; flex-direction: column; }

.cdash-crumb { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.cdash-crumb a { display: flex; color: rgba(255,255,255,.3); transition: color 200ms ease; }
.cdash-crumb a:hover { color: rgba(255,255,255,.7); }
.cdash-crumb a svg { width: 13px; height: 13px; }
.cdash-crumb__sep { width: 12px; height: 12px; color: rgba(255,255,255,.15); flex-shrink: 0; }
.cdash-crumb__here {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 500;
  color: rgba(255,255,255,.55);
}
.cdash-crumb__here svg { width: 12px; height: 12px; }

.cdash-head { display: flex; align-items: flex-start; gap: 16px; }
.cdash-head__text { flex: 1; min-width: 0; }
.cdash-head__title {
  margin: 0; font-family: var(--font-ui);
  font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: #fff;
}
.cdash-head__sub {
  margin: 8px 0 0; font-family: var(--font-ui);
  font-size: 13px; color: rgba(255,255,255,.5);
}
.cdash-head__bell {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,.024);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.55);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.cdash-head__bell:hover {
  background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.16);
}
.cdash-head__bell svg { width: 16px; height: 16px; }

.cdash-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 24px 0 12px;
}
.cdash-showing { font-size: 12.5px; color: rgba(255,255,255,.4); }
.cdash-showing b { color: rgba(255,255,255,.75); font-weight: 600; }

/* Onglets de periode : du texte, pas des boutons — c est un filet sous
   l onglet actif qui marque la selection, comme le modele. */
.cdash-tabs { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.cdash-tab {
  position: relative;
  padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--cdash-font); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  transition: color 200ms ease;
}
.cdash-tab:hover { color: rgba(255,255,255,.7); }
.cdash-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; border-radius: 2px; background: #fff;
  opacity: 0; transition: opacity 200ms ease;
}
.cdash-tab.is-active { color: #fff; }
.cdash-tab.is-active::after { opacity: 1; }
.cdash-tab:focus-visible { outline: 2px solid rgba(255,255,255,.3); outline-offset: 3px; }

/* ── Carte generique ───────────────────────────────────────────────── */
/* Le lisere clair en haut vient du modele : c est lui qui fait « verre »
   plutot que « boite grise », et il coute une ombre au lieu d un degrade. */
.cdash-stat,
.cdash-chart,
.cdash-last__row,
.cdash-short__card,
.cdash-sec {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.015);
  box-shadow: rgba(255,255,255,.043) 0 1px 0 0 inset, rgba(0,0,0,.9) 0 30px 70px -50px;
}

/* ── Les quatre 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 { padding: 16px 20px; }
.cdash-stat__top { display: flex; align-items: center; gap: 9px; }
.cdash-stat__chip {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgb(var(--cl-accent) / .10);
  color: rgb(var(--cl-accent));
}
.cdash-stat__chip svg { width: 13px; height: 13px; }
.cdash-stat__label {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdash-stat__act {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
  color: rgb(var(--cl-accent)); text-decoration: none;
  transition: opacity 200ms ease;
}
.cdash-stat__act:hover { opacity: .75; }
.cdash-stat__value {
  margin-top: 14px;
  font-family: var(--font-ui); font-size: 30px; font-weight: 600;
  letter-spacing: -.025em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Une date ne tient pas en 30px dans une colonne de quart de largeur. */
.cdash-stat__value--date { font-size: 20px; letter-spacing: -.01em; }
.cdash-stat__sub {
  margin-top: 6px;
  font-family: var(--font-ui); font-size: 11.5px; color: rgba(255,255,255,.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Carte graphique ───────────────────────────────────────────────── */
.cdash-chart { margin-top: 14px; padding: 18px 22px 16px; }
.cdash-chart__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cdash-chart__title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: #fff;
}
.cdash-chart__title svg { width: 14px; height: 14px; color: rgba(255,255,255,.45); }
.cdash-chart__sub {
  margin-top: 4px;
  font-family: var(--font-ui); font-size: 12px; color: rgba(255,255,255,.4);
}
.cdash-chart__total { text-align: right; flex-shrink: 0; }
.cdash-chart__total b {
  display: block; font-family: var(--font-ui);
  font-size: 30px; font-weight: 600; letter-spacing: -.025em; color: #fff;
}
.cdash-chart__total em {
  font-style: normal; font-family: var(--font-ui);
  font-size: 11px; color: rgba(255,255,255,.35);
}

.cdash-chart__plot { margin: 18px 0 4px; }
.cdash-chart__plot svg { display: block; width: 100%; overflow: visible; }
.cdash-chart__line { stroke: rgb(var(--cl-accent)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.cdash-chart__grid { stroke: rgba(255,255,255,.055); stroke-width: 1; }
.cdash-chart__dot { fill: rgb(var(--cl-accent)); }
.cdash-chart__tick {
  fill: rgba(255,255,255,.32); font-family: var(--cdash-font);
  font-size: 11px; text-anchor: middle;
}
.cdash-chart__peak {
  fill: rgba(255,255,255,.3); font-family: var(--cdash-font);
  font-size: 10.5px; text-anchor: end;
}
.cdash-chart__axis {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-family: var(--font-ui); font-size: 11px; color: rgba(255,255,255,.3);
}
.cdash-chart__empty {
  margin: 22px 0 18px; padding: 26px 18px;
  border-radius: 12px; border: 1px dashed rgba(255,255,255,.08);
  text-align: center;
  font-family: var(--font-ui); font-size: 12.5px; color: rgba(255,255,255,.4);
}
.cdash-chart__empty a { color: rgb(var(--cl-accent)); text-decoration: none; }
.cdash-chart__empty a:hover { text-decoration: underline; }

.cdash-chart__foot {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-top: 16px; padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cdash-metric { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cdash-metric__label {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.32);
}
.cdash-metric__value {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Derniere commande ─────────────────────────────────────────────── */
.cdash-last { margin-top: 14px; }
.cdash-last__row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.cdash-last__row:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.03); }
.cdash-last__chip {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: rgb(var(--cl-accent) / .10); color: rgb(var(--cl-accent));
}
.cdash-last__chip svg { width: 15px; height: 15px; }
.cdash-last__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cdash-last__text b { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.88); }
.cdash-last__text em {
  font-style: normal; font-family: var(--font-ui);
  font-size: 11px; color: rgba(255,255,255,.38);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdash-last__total {
  flex-shrink: 0; font-family: var(--font-ui);
  font-size: 14px; font-weight: 600; color: #fff;
}
.cdash-last__go { width: 14px; height: 14px; color: rgba(255,255,255,.25); flex-shrink: 0; }

.cdash-badge {
  flex-shrink: 0; padding: 4px 9px; border-radius: 999px;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.6);
}
.cdash-badge--completed,
.cdash-badge--paid { background: rgba(34,197,94,.12); color: #4ade80; }
.cdash-badge--pending { background: rgba(245,158,11,.12); color: #fbbf24; }
.cdash-badge--cancelled,
.cdash-badge--refunded { background: rgba(239,68,68,.12); color: #f87171; }

/* ── Entetes de section + raccourcis ───────────────────────────────── */
.cdash-navhead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin: 28px 0 12px;
}
.cdash-navhead__label {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.32);
}
.cdash-navhead__title {
  margin-top: 4px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: #fff;
}
.cdash-navhead__note {
  font-family: var(--font-ui); font-size: 11px; color: rgba(255,255,255,.28);
}

.cdash-short { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 12px; }
.cdash-short__card {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.cdash-short__card:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.03); }
.cdash-short__card:hover .cdash-short__go { color: rgba(255,255,255,.6); transform: translateX(2px); }
.cdash-short__chip {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: rgb(var(--cl-accent) / .10); color: rgb(var(--cl-accent));
}
.cdash-short__chip--discord { background: rgba(88,101,242,.14); color: #98a4ff; }
.cdash-short__chip svg { width: 14px; height: 14px; }
.cdash-short__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cdash-short__text b {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdash-short__text em {
  font-style: normal; font-family: var(--font-ui);
  font-size: 10.5px; color: rgba(255,255,255,.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdash-short__go {
  width: 13px; height: 13px; flex-shrink: 0; color: rgba(255,255,255,.22);
  transition: color 200ms ease, transform 200ms ease;
}

/* ── Securite ──────────────────────────────────────────────────────── */
.cdash-sec { padding: 4px 18px; }
.cdash-sec__item {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.cdash-sec__item:last-child { border-bottom: 0; }
.cdash-sec__dot {
  flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.cdash-sec__item.is-on .cdash-sec__dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.14); }
.cdash-sec__item.is-warn .cdash-sec__dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.14); }
.cdash-sec__name {
  flex: 1; min-width: 0;
  font-family: var(--font-ui); font-size: 13px; color: rgba(255,255,255,.62);
}
.cdash-sec__item b {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.85);
}

/* ── Sous 1100px : le rail passe au-dessus ─────────────────────────── */
@media (max-width: 1100px) {
  .cdash { grid-template-columns: 1fr; gap: 18px; padding: calc(var(--cdash-nav) + 16px) 16px 48px; }
  .cdash-rail { position: static; }
  .cdash-rail__inner { padding: 12px; }
  /* Le menu devient une rangee de pastilles defilante, comme le rail du
     catalogue : une colonne de 300px de haut avant le contenu serait pire. */
  .cdash-rail__label { display: none; }
  .cdash-rail__nav {
    flex-direction: row; gap: 8px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  }
  .cdash-rail__nav::-webkit-scrollbar { display: none; }
  .cdash-rail__item { flex-shrink: 0; border: 1px solid rgba(255,255,255,.09); }
  .cdash-rail__bar { display: none; }
  .cdash-rail__account { margin-top: 12px; }
  .cdash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdash-stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .cdash-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cdash-tabs { gap: 16px; }
  .cdash-head__title { font-size: 23px; }
  .cdash-stats,
  .cdash-stats--3 { grid-template-columns: 1fr; }
  .cdash-chart { padding: 16px; }
  .cdash-chart__head { flex-direction: column; gap: 10px; }
  .cdash-chart__total { text-align: left; }
  .cdash-chart__total b { font-size: 24px; }
  .cdash-chart__foot { grid-template-columns: 1fr; gap: 12px; }
  .cdash-chart__plot svg { height: 150px; }
  .cdash-last__row { flex-wrap: wrap; }
  .cdash-stat__value { font-size: 26px; }
}

/*═══════════════════════════════════════════════════════════════════════
  TABLEAU DE BORD CLIENT — ANIMATIONS (ajout du 29/08/2026)
  -----------------------------------------------------------------------
  Trois couches, toutes pilotees par custom.js :
    1. entree en cascade des blocs (IntersectionObserver -> .is-in)
    2. chiffres qui montent (le script ecrit le texte, le CSS ne fait rien)
    3. trace progressif de la courbe (stroke-dashoffset)
  Tout est conditionne a la classe .cdash--anim, que le script pose
  seulement s il tourne ET si le visiteur n a pas demande moins de
  mouvement : sans script, la page reste exactement celle d avant, rien
  n est cache. C est la raison d etre de cette classe.
═══════════════════════════════════════════════════════════════════════*/

@keyframes cd-rise  { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cd-slide { from { opacity: 0; transform: translateX(-14px); }            to { opacity: 1; transform: none; } }
@keyframes cd-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cd-pop   { 0% { opacity: 0; transform: scale(.2); } 62% { opacity: 1; transform: scale(1.28); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cd-draw  { to { stroke-dashoffset: 0; } }
@keyframes cd-bar   { from { height: 0; } to { height: 18px; } }
@keyframes cd-sheen { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }

/* ── 1. Entree en cascade ──────────────────────────────────────────── */
/* Le retard est pose element par element par le script (--cd-delay) :
   une cascade ecrite en CSS avec :nth-child se casse des qu une carte
   conditionnelle (Balance, Reseller) disparait. */
.cdash--anim [data-cd-in]        { opacity: 0; }
.cdash--anim [data-cd-in].is-in  { animation: cd-rise 620ms cubic-bezier(.22,.9,.28,1) both; animation-delay: var(--cd-delay, 0ms); }
.cdash--anim .cdash-rail[data-cd-in].is-in { animation-name: cd-slide; }

/* Les entrees du rail arrivent une par une, apres le rail lui-meme. */
.cdash--anim .cdash-rail .cdash-rail__item,
.cdash--anim .cdash-rail__label,
.cdash--anim .cdash-rail__brand,
.cdash--anim .cdash-rail__account { opacity: 0; }
.cdash--anim .cdash-rail.is-in .cdash-rail__item,
.cdash--anim .cdash-rail.is-in .cdash-rail__label,
.cdash--anim .cdash-rail.is-in .cdash-rail__brand,
.cdash--anim .cdash-rail.is-in .cdash-rail__account {
  animation: cd-slide 440ms cubic-bezier(.22,.9,.28,1) both;
  animation-delay: calc(var(--cd-i, 0) * 42ms + 90ms);
}

/* Le filet de l entree courante se deploie au lieu d apparaitre. */
.cdash--anim .cdash-rail.is-in .cdash-rail__item.is-active .cdash-rail__bar {
  animation: cd-bar 520ms cubic-bezier(.22,.9,.28,1) both; animation-delay: 320ms;
}

/* ── 2. Survol ─────────────────────────────────────────────────────── */
.cdash-stat, .cdash-chart, .cdash-last__row, .cdash-short__card {
  transition: transform 280ms cubic-bezier(.22,.9,.28,1), border-color 220ms ease,
              background 220ms ease, box-shadow 280ms ease;
}
.cdash-stat:hover, .cdash-short__card:hover, .cdash-last__row:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: rgba(255,255,255,.06) 0 1px 0 0 inset, rgba(0,0,0,.9) 0 26px 54px -36px;
}

/* Halo qui suit le curseur : le script pose --cd-mx / --cd-my. */
.cdash-stat, .cdash-short__card { position: relative; overflow: hidden; }
.cdash-stat > *, .cdash-short__card > * { position: relative; z-index: 1; }
.cdash-stat::after, .cdash-short__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 0;
  background: radial-gradient(240px circle at var(--cd-mx, 50%) var(--cd-my, 50%), rgb(var(--cl-accent) / .13), transparent 68%);
  transition: opacity 280ms ease;
}
.cdash-stat:hover::after, .cdash-short__card:hover::after { opacity: 1; }

.cdash-stat__chip, .cdash-short__chip, .cdash-last__chip {
  transition: transform 280ms cubic-bezier(.3,1.3,.5,1), background 220ms ease;
}
.cdash-stat:hover .cdash-stat__chip,
.cdash-short__card:hover .cdash-short__chip,
.cdash-last__row:hover .cdash-last__chip { transform: scale(1.08) rotate(-5deg); }

.cdash-rail__item { transition: background 200ms ease, color 200ms ease, transform 220ms cubic-bezier(.22,.9,.28,1); }
.cdash-rail__item:hover { transform: translateX(3px); }
.cdash-head__bell { transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 260ms cubic-bezier(.3,1.3,.5,1); }
.cdash-head__bell:hover { transform: rotate(-10deg) scale(1.05); }

/* Un eclat traverse la pastille de marque au survol du rail. */
.cdash-rail__brand-mark { position: relative; overflow: hidden; }
.cdash-rail__brand-mark::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-140%) skewX(-18deg);
}
.cdash-rail:hover .cdash-rail__brand-mark::after { animation: cd-sheen 900ms ease-out; }

/* Le filet des onglets de periode glisse au lieu de clignoter. */
.cdash-tab::after { transform: scaleX(.35); transform-origin: left center; transition: opacity 220ms ease, transform 300ms cubic-bezier(.22,.9,.28,1); }
.cdash-tab.is-active::after { transform: scaleX(1); }
/* Les onglets naissent caches et n apparaissent qu une fois la serie lue. */
.cdash--anim .cdash-tabs:not([hidden]) { animation: cd-fade 420ms ease both; }

/* ── 3. Courbe ─────────────────────────────────────────────────────── */
/* --cd-len est la longueur reelle du trace, mesuree par le script apres
   coup : une valeur ecrite en dur donnerait un depart visible. */
.cdash--anim .cdash-chart__line {
  stroke-dasharray: var(--cd-len, 1400); stroke-dashoffset: var(--cd-len, 1400);
  animation: cd-draw 1150ms cubic-bezier(.42,0,.16,1) forwards;
}
.cdash--anim .cdash-chart__area { opacity: 0; animation: cd-fade 780ms ease 480ms forwards; }
.cdash--anim .cdash-chart__dot  {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: cd-pop 420ms cubic-bezier(.3,1.45,.5,1) both;
  animation-delay: calc(300ms + var(--cd-i, 0) * 55ms);
}
.cdash--anim .cdash-chart__grid { opacity: 0; animation: cd-fade 460ms ease both; animation-delay: calc(var(--cd-i, 0) * 70ms); }
.cdash--anim .cdash-chart__tick,
.cdash--anim .cdash-chart__peak { opacity: 0; animation: cd-fade 460ms ease 680ms both; }
/* Les chiffres qui montent : sans chasse fixe, la carte tremble. */
.cdash-stat__value, .cdash-chart__total b, .cdash-metric__value { font-variant-numeric: tabular-nums; }

/* ── 4. Entree « Soon » du bloc Tools ──────────────────────────────── */
.cdash-rail__item.is-soon { cursor: default; color: rgba(255,255,255,.3); }
.cdash-rail__item.is-soon:hover { background: none; transform: none; color: rgba(255,255,255,.3); }
.cdash-rail__soon {
  margin-left: auto; flex-shrink: 0; font-style: normal;
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.35);
}
.cdash-rail__icon--tg { color: #4aa8e8; }


/* Le rail passe en rangees de pastilles sous 1100px. Avec trois blocs
   (Menu / Tools / Links) au lieu d un seul, les rangees ne se distinguent
   plus sans leurs intitules : on les remet, en plus petit. */
@media (max-width: 1100px) {
  .cdash-rail__label { display: block; margin: 12px 0 6px; font-size: 9.5px; }
  .cdash-rail__nav:first-of-type { margin-top: 0; }
}

/*═══════════════════════════════════════════════════════════════════════
  CORRECTIF — CHIFFRES RASES EN HAUT (29/08/2026)
  -----------------------------------------------------------------------
  Le theme impose une hauteur de ligne de 20px a tout le corps de texte.
  Sur les trois textes d affichage du tableau de bord (28 et 30px), la
  boite de ligne est donc PLUS COURTE que les glyphes : avec le
  `overflow: hidden` de .cdash-stat__value (la, pour l ellipse sur les
  montants longs), le haut des chiffres etait litteralement coupe — un
  « 15 » rase sur sa premiere rangee de pixels.
  Mesure faite sur la page : boite 20px pour un texte de 31px.
  Chaque taille d affichage recoit donc sa propre hauteur de ligne.
═══════════════════════════════════════════════════════════════════════*/
/* Hauteur de ligne d abord, puis une marge interne verticale : la boite
   qui rogne devient plus haute que les glyphes, jambages compris. Le
   `margin-top` est reduit d autant pour que la carte garde sa hauteur. */
.cdash-stat__value   { line-height: 1.18; padding: 5px 0; margin-top: 9px; }
.cdash-chart__total b{ line-height: 1.18; }
.cdash-head__title   { line-height: 1.2; }