/* ============================================================
   NeliaStore — feuille principale
   Transposition fidèle de neliastore-maquette-v2.html
   Palette dérivée du logo NS (or / bleu royal / orange)
   ============================================================ */

:root{
  /* ---- THÈME CLAIR : fonds ---- */
  --bg:      #E8EDF5;      /* fond clair principal (demandé) */
  --surface: #FFFFFF;      /* header, bandeaux, pied */
  --card:    #FFFFFF;      /* cartes */
  --card-2:  #F2F6FC;      /* zones intérieures douces */
  --kd-dark: #1C1710;      /* fond SOMBRE des visuels dorés (KDMAX / EZ PIN) */

  /* ---- Textes (demandés) ---- */
  --ink:     #0F1A30;      /* texte principal */
  --muted:   #3A4A6E;      /* texte secondaire */

  /* ---- Couleurs de marque : ORANGE + BLEU (aucune remplacée) ----
     Aplats/boutons = teintes d'ORIGINE. Variantes assombries = TEXTE
     uniquement (l'or/l'orange vifs ne se lisent pas en texte sur clair). */
  --gold:     #ffb81c;     /* OR d'origine — remplissages, CTA */
  --gold-deep:#E0A200;     /* liseré : détache l'or sur fond clair */
  --gold-ink: #7A4E00;     /* OR assombri — TEXTE doré (prix portefeuille…) */
  --orange:   #ff6a2b;     /* ORANGE d'origine — grands aplats */
  --orange-br:#C2410C;     /* orange des petits badges à texte blanc */
  --orange-ink:#B23A10;    /* ORANGE assombri — TEXTE */
  --blue:     #3d5af1;     /* BLEU d'origine — aplats, boutons */
  --blue-ink: #1D33A0;     /* BLEU profond du logo — liens & TEXTE */

  --green:   #147A3A;      /* stock (assombri pour le clair) */
  --brd:     rgba(15,26,48,0.12);

  --radius:  14px;
  --radius-s: 10px;
  --wrap:    1280px;
  --ease:    cubic-bezier(.22,1,.36,1);
}

/* Mot-symbole NELIA STORE : Archivo 900 VRAIE italique (dessinée), embarquée
   EN LOCAL dans le thème — jamais Google Fonts ni service extérieur. */
@font-face{
  font-family:'Archivo';
  font-style:italic;font-weight:900;font-display:swap;
  src:url('../fonts/archivo-900-italic.woff2') format('woff2');
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.55;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#221500}
img{max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

.ns-container{max-width:var(--wrap);margin:0 auto;padding-left:24px;padding-right:24px}
.ns-main{min-height:40vh}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--gold);color:#221500;padding:12px 20px;font-weight:800;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}

/* ---------- Révélations au scroll ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s var(--ease)}
.rv.on{opacity:1;transform:none}

/* ---------- Boutons ---------- */
.btn{
  font-weight:800;font-size:15.5px;padding:15px 30px;border-radius:12px;
  display:inline-block;cursor:pointer;text-align:center;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s,color .25s;
}
.btn-gold{background:var(--gold);color:#221500}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(255,184,28,.4);color:#221500}
.btn-line{border:1px solid var(--brd);color:var(--ink)}
.btn-line:hover{border-color:var(--blue);color:#9db0ff;transform:translateY(-2px)}

/* ============================================================
   1. INTRO CINÉMATIQUE — HORLOGE DE LOGOS
   ------------------------------------------------------------
   Le HTML décrit la formation FINALE. Les classes posées par le
   template ne sont qu'une surcouche d'animation :
     .is-play  → cinématique complète (1re visite de la session)
     .is-quick → apparition rapide (visites suivantes)
     .is-skip  → saut de la cinématique (clic ou scroll)
   Sans classe (JS coupé, mouvement réduit) : formation immédiate.
   ============================================================ */
.ns-intro{
  /* Le cadran occupe le maximum de hauteur disponible. Toute la géométrie en
     découle : pastilles = 34 % du rayon, titre = 42 %. Un seul chiffre à
     bouger pour agrandir ou réduire l'ensemble. */
  --ns-r:     clamp(130px,min(32vh,40vw),440px);
  --ns-badge: clamp(52px,calc(var(--ns-r) * .34),124px);
  --ns-spin:  60s;                        /* durée d'un tour d'orbite */

  position:relative;height:100svh;min-height:560px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:
    radial-gradient(900px 520px at 70% 26%,rgba(61,90,241,.20),transparent 62%),
    radial-gradient(760px 460px at 22% 80%,rgba(255,184,28,.09),transparent 62%),
    var(--bg);
}
/* Écrans bas : on resserre le cadran, sinon les pastilles du bas mordent sur
   le bouton « Découvrir la boutique ».
   (Titre et pastilles suivent automatiquement : ce sont des ratios de --ns-r.) */
@media(max-height:820px){.ns-intro{--ns-r:clamp(120px,min(29vh,40vw),300px)}}

/* ---------- Fond : ciel étoilé épuré (3 couches, aucune requête) ---------- */
.ns-intro__sky{
  position:absolute;inset:-8%;pointer-events:none;z-index:0;opacity:.6;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 26%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 62%,rgba(200,214,255,.70),transparent 60%),
    radial-gradient(1.8px 1.8px at 44% 84%,rgba(255,214,150,.55),transparent 60%);
  background-size:190px 190px,260px 260px,340px 340px;
  animation:ns-sky 140s linear infinite;
}
@keyframes ns-sky{to{background-position:190px 0,-260px 0,170px -340px}}
.ns-intro__dust{position:absolute;inset:0;pointer-events:none;z-index:1}
/* Voile léger : garde le titre lisible sans éteindre les étoiles. */
.ns-intro__veil{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(46% 38% at 50% 50%,rgba(18,20,31,.72) 0%,rgba(18,20,31,.32) 55%,transparent 78%),
    linear-gradient(to bottom,transparent 66%,rgba(18,20,31,.80) 100%);
}

/* ---------- Le cadran de logos ---------- */
.ns-intro__stage{
  position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;pointer-events:none;
}
.ns-orbit{
  position:absolute;left:50%;top:50%;width:0;height:0;
  animation:ns-orbit var(--ns-spin) linear infinite;
}
@keyframes ns-orbit{to{transform:rotate(360deg)}}
/* Position sur le cadran : vecteur unitaire × rayon (--ux/--uy en desktop). */
.ns-orbit__item{
  position:absolute;left:0;top:0;
  transform:translate(-50%,-50%)
            translate(calc(var(--ux) * var(--ns-r)),calc(var(--uy) * var(--ns-r)));
}
.ns-orbit__fly{display:block;will-change:transform,opacity}
.ns-orbit__badge{
  position:relative;display:grid;place-items:center;pointer-events:auto;
  width:var(--ns-badge);height:var(--ns-badge);min-width:44px;min-height:44px;
  /* Contre-rotation exacte : la position tourne, le logo reste droit. */
  animation:ns-orbit-rev var(--ns-spin) linear infinite;
}
@keyframes ns-orbit-rev{to{transform:rotate(-360deg)}}
.ns-badge__in{
  display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:linear-gradient(158deg,rgba(40,45,72,.96),rgba(19,22,36,.96));
  border:2px solid var(--ns-c-soft,rgba(255,255,255,.18));
  box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.04);
  /* Le picto porte la couleur de sa marque (le SVG est en currentColor). */
  color:var(--ns-c,#fff);
  transition:transform .28s var(--ease),box-shadow .28s ease,border-color .28s ease;
}
.ns-badge__svg{display:block;width:54%;height:54%}
.ns-badge__img{display:block;width:58%;height:58%;object-fit:contain}
.ns-orbit__badge:hover .ns-badge__in,
.ns-orbit__badge:focus-visible .ns-badge__in{
  transform:scale(1.16);border-color:var(--ns-c,#fff);
  box-shadow:0 0 0 3px var(--ns-c-glow,rgba(255,255,255,.3)),
             0 14px 34px var(--ns-c-glow,rgba(0,0,0,.5));
}
.ns-orbit__badge:focus-visible{outline:none}
.ns-orbit__tip{
  position:absolute;left:50%;top:calc(100% + 9px);translate:-50% 0;
  padding:5px 11px;border-radius:9px;white-space:nowrap;
  font-size:12px;font-weight:800;letter-spacing:.02em;
  background:rgba(10,12,20,.94);border:1px solid var(--ns-c-soft,var(--brd));color:var(--ink);
  opacity:0;pointer-events:none;transition:opacity .2s ease,translate .2s var(--ease);
}
.ns-orbit__badge:hover .ns-orbit__tip,
.ns-orbit__badge:focus-visible .ns-orbit__tip{opacity:1;translate:-50% 5px}

/* ---------- Titre au centre ---------- */
.ns-intro__in{position:relative;z-index:4;text-align:center;padding:0 16px;pointer-events:none}
.ns-intro__title{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  /* Le titre est dimensionné par le cadran, pas par la fenêtre : il garde donc
     exactement la même marge avec les pastilles à toutes les tailles d'écran. */
  font-size:clamp(34px,calc(var(--ns-r) * .42),172px);line-height:.90;letter-spacing:-.038em;
  display:flex;flex-direction:column;align-items:center;
  will-change:transform,opacity;
}
.ns-intro__title b{
  display:block;font-weight:700;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Couleurs de la carte de visite : NELIA en bleu, STORE en dégradé orange. */
.ns-t--n{background-image:linear-gradient(102deg,#9FB2FF 4%,#5B74F5 44%,#2C42C6 98%)}
.ns-t--s{background-image:linear-gradient(102deg,#FFC93D 4%,#F9901A 46%,#E0453E 98%)}

/* Le sous-titre a été retiré du hero : le cadran agrandi occupe toute la
   hauteur, il ne reste aucune place entre les pastilles du bas et le bouton.
   Le nom du site reste lu par les lecteurs d'écran via le <h1>. */
.ns-intro__scroll{
  position:absolute;left:50%;bottom:30px;translate:-50% 0;z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--muted);
}
.ns-intro__scroll i{font-style:normal;font-size:18px;color:var(--gold);animation:ns-bob 2s ease-in-out infinite}
@keyframes ns-bob{0%,100%{translate:0 0}50%{translate:0 7px}}
.ns-intro__scroll:hover{color:var(--ink)}

/* ---------- Explosion de lumière (étape 3 de la cinématique) ---------- */
.ns-intro__flash,.ns-intro__shock{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  border-radius:50%;pointer-events:none;opacity:0;z-index:5;
}
.ns-intro__flash{
  width:min(130vw,1300px);aspect-ratio:1;mix-blend-mode:screen;
  background:radial-gradient(circle,
    rgba(255,255,255,.95) 0%,rgba(255,190,80,.70) 16%,
    rgba(61,90,241,.42) 40%,transparent 68%);
}
.ns-intro__shock{
  width:min(96vw,980px);aspect-ratio:1;
  border:2px solid rgba(255,201,110,.85);
  box-shadow:0 0 46px rgba(255,170,60,.5),inset 0 0 70px rgba(61,90,241,.45);
}
.ns-intro__burst{position:absolute;inset:0;pointer-events:none;z-index:6}

/* ---------- .is-play : la cinématique complète (≈ 2,8 s) ---------- */
/* 1. le titre arrive du fond de l'écran et s'arrête net devant le visiteur */
/* La courbe est volontairement lente au départ puis rapide : c'est ce qui
   donne l'impression de perspective — un objet qui vient du fond grossit peu
   au début, puis se précipite avant de freiner net devant le visiteur. */
.ns-intro.is-play .ns-intro__title{animation:ns-title-warp .95s cubic-bezier(.62,.03,.33,1) both}
@keyframes ns-title-warp{
  0%  {opacity:0;transform:scale(.02);filter:blur(6px)}
  12% {opacity:.85}
  60% {filter:blur(0)}
  70% {opacity:1;transform:scale(1.09);filter:blur(0)}  /* arrivée (≈ 665 ms) */
  84% {transform:scale(.98)}
  100%{opacity:1;transform:scale(1);filter:blur(0)}
}
/* 2. les logos arrivent des bords, chacun par un angle différent */
.ns-intro.is-play .ns-orbit__fly{
  animation:ns-logo-in .80s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(860ms + var(--i) * 48ms);
}
@keyframes ns-logo-in{
  0%  {opacity:0;transform:translate(var(--fx),var(--fy)) scale(.35) rotate(var(--fr))}
  32% {opacity:1}
  100%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg)}
}
/* 3. l'onde de lumière */
.ns-intro.is-play .ns-intro__flash{animation:ns-flash .62s ease-out 2.10s both}
.ns-intro.is-play .ns-intro__shock{animation:ns-shock .74s cubic-bezier(.2,.85,.3,1) 2.13s both}
@keyframes ns-flash{0%{opacity:0;scale:.10}20%{opacity:1}100%{opacity:0;scale:1.5}}
@keyframes ns-shock{0%{opacity:0;scale:.04}14%{opacity:.95}100%{opacity:0;scale:1.4}}
/* 4. l'orbite ne démarre qu'une fois la formation en place */
.ns-intro.is-play .ns-orbit,
.ns-intro.is-play .ns-orbit__badge{animation-delay:2.60s}
.ns-intro.is-play .ns-intro__scroll{animation:ns-fade-in .7s ease 2.80s both}
@keyframes ns-fade-in{from{opacity:0}to{opacity:1}}

/* ---------- .is-quick : visites suivantes, formation en 0,5 s ---------- */
.ns-intro.is-quick .ns-intro__title{animation:ns-quick-in .5s var(--ease) both}
.ns-intro.is-quick .ns-orbit__fly{
  animation:ns-quick-in .5s var(--ease) both;
  animation-delay:calc(var(--i) * 26ms);
}
@keyframes ns-quick-in{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}

/* ---------- .is-skip : la cinématique est sautée, retour adouci ----------
   Volontairement SANS « both » : si l'animation ne démarrait pas, l'élément
   resterait à son opacité normale (1) plutôt que de disparaître. */
.ns-intro.is-skip .ns-intro__title,
.ns-intro.is-skip .ns-orbit__fly{animation:ns-fade-in .28s ease}

/* ---------- Sortie au scroll (--ns-intro-p : 0 → 1, piloté en JS) ---------- */
.ns-intro__in{will-change:opacity,transform}
.ns-intro.is-leaving .ns-intro__in{
  opacity:calc(1 - var(--ns-intro-p,0));
  transform:translateY(calc(var(--ns-intro-p,0) * -60px)) scale(calc(1 - var(--ns-intro-p,0) * .12));
}
.ns-intro.is-leaving .ns-orbit{
  opacity:calc(1 - var(--ns-intro-p,0));
  scale:calc(1 - var(--ns-intro-p,0) * .18);
}
.ns-intro.is-leaving .ns-intro__scroll{opacity:calc(1 - var(--ns-intro-p,0) * 2)}

/* ---------- Cadran mobile : 6 logos, cercle plein écran ---------- */
@media(max-width:700px){
  /* Le rayon suit la largeur ET la hauteur : le cadran remplit l'écran du
     téléphone sans jamais descendre sur le bouton du bas. */
  .ns-intro{--ns-r:clamp(126px,min(46vmin,26vh),240px);--ns-badge:calc(var(--ns-r) * .32)}
  .ns-intro__title{font-size:clamp(30px,calc(var(--ns-r) * .40),80px)}
  .ns-orbit__item--extra{display:none}
  /* Les six logos restants se répartissent sur leurs propres coordonnées. */
  .ns-orbit__item{
    transform:translate(-50%,-50%)
              translate(calc(var(--mx) * var(--ns-r)),calc(var(--my) * var(--ns-r)));
  }
  .ns-intro__flash{width:170vw}
  .ns-intro__shock{width:120vw}
}

/* ============================================================
   2. HEADER STICKY + RANGÉE CATÉGORIES
   ============================================================ */
.ns-header{
  position:sticky;top:0;z-index:100;
  background:rgba(18,20,31,0.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--brd);
}
.ns-topbar{
  max-width:var(--wrap);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:22px;
}
.ns-logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;white-space:nowrap}
.ns-logo img{max-height:38px;width:auto}
/* Monogramme NS officiel (SVG intégré, voir inc/branding.php) */
.ns-logo-mark{flex:none;display:block;height:38px;width:auto}
.ns-logo-name{font-family:'Space Grotesk',sans-serif;letter-spacing:-.01em}
@media(max-width:560px){
  .ns-logo-mark{height:30px}
  .ns-logo{font-size:17px;gap:9px}
}

.ns-search{
  flex:1;display:flex;align-items:center;gap:10px;max-width:560px;
  background:var(--card);border:1px solid var(--brd);border-radius:12px;
  padding:5px 6px 5px 16px;transition:border-color .2s;
}
.ns-search:hover,
.ns-search:focus-within{border-color:rgba(255,184,28,.45)}
.ns-search__icon{color:var(--muted);flex:none;font-size:15px}
.ns-search input[type="search"]{
  flex:1;background:none;border:none;color:var(--ink);
  font-size:14.5px;padding:6px 0;min-width:0;
}
.ns-search input[type="search"]::placeholder{color:var(--muted)}
.ns-search input[type="search"]:focus{outline:none}
.ns-search button{
  flex:none;background:var(--gold);color:#221500;font-weight:800;font-size:13px;
  padding:8px 14px;border-radius:9px;transition:filter .2s;
}
.ns-search button:hover{filter:brightness(1.08)}

.ns-actions{display:flex;align-items:center;gap:18px;margin-left:auto;white-space:nowrap}
.ns-wallet-chip{
  display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;
  background:rgba(255,184,28,.1);border:1px solid rgba(255,184,28,.3);
  color:var(--gold);padding:9px 15px;border-radius:10px;transition:background .2s;
}
.ns-wallet-chip:hover{background:rgba(255,184,28,.18);color:var(--gold)}
.ns-icon-btn{font-size:19px;opacity:.85;cursor:pointer;position:relative;display:inline-flex;transition:opacity .2s}
.ns-icon-btn:hover{opacity:1}
/* Lien « Se connecter » visible pour les visiteurs déconnectés (mobile compris). */
.ns-login-link{align-items:center;gap:6px;opacity:1;font-size:14px;font-weight:700;
  padding:7px 12px;border-radius:9px;background:var(--gold,#ffb81c);color:#20130A;white-space:nowrap}
.ns-login-link:hover{filter:brightness(1.06)}
.ns-login-link__label{font-family:'Space Grotesk',sans-serif}
@media(max-width:400px){.ns-login-link{padding:6px 9px;font-size:13px}}
.ns-cart-dot{
  position:absolute;top:-6px;right:-8px;background:var(--orange);
  font-size:10px;font-weight:800;color:#fff;border-radius:99px;padding:1px 5px;line-height:1.4;
}
.ns-search-toggle{display:none}

/* Bouton d'installation PWA (révélé par le plugin nelia-reseau). */
.ns-pwa-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:1px solid rgba(255,184,28,.5);
  color:var(--gold);font-weight:700;font-size:13.5px;
  padding:8px 13px;border-radius:10px;cursor:pointer;
  transition:background .2s,border-color .2s;line-height:1;
}
.ns-pwa-btn:hover{background:rgba(255,184,28,.14);border-color:var(--gold)}
.ns-pwa-btn[hidden]{display:none}

@media(max-width:820px){
  .ns-search{
    display:none;order:5;flex-basis:100%;max-width:none;
  }
  .ns-search.is-open{display:flex}
  .ns-topbar{flex-wrap:wrap;gap:14px}
  .ns-search-toggle{display:inline-flex}
  .ns-wallet-chip .hide-m{display:none}
  /* Version compacte : icône seule. */
  .ns-pwa-btn{padding:8px 10px}
  .ns-pwa-btn__label{display:none}
}

/* ---------- Chips catégories ---------- */
.ns-chips-row{border-top:1px solid var(--brd)}
.ns-chips{
  max-width:var(--wrap);margin:0 auto;padding:10px 24px;
  display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.ns-chips::-webkit-scrollbar{display:none}
.ns-chip{
  flex:none;font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:99px;
  background:var(--card);border:1px solid var(--brd);color:var(--muted);
  cursor:pointer;transition:color .2s,border-color .2s,background .2s;
  display:inline-flex;align-items:center;gap:7px;
}
.ns-chip:hover{color:var(--ink);border-color:var(--blue)}
.ns-chip.on{background:var(--gold);color:#221500;border-color:var(--gold)}
/* Logo de plateforme : hauteur calée sur le texte, largeur libre (les logos
   ne sont pas carrés), jamais rogné. */
.ns-chip img,
.ns-chip__logo{height:22px;width:auto;max-width:56px;object-fit:contain;flex:none;border-radius:4px}
.ns-chip.on img{filter:none}

/* ============================================================
   3. CARROUSEL DE BANNIÈRES
   ============================================================ */
.ns-carousel{position:relative;border-bottom:1px solid var(--brd);background:var(--surface);overflow:hidden}
.ns-carousel__track{display:flex;transition:transform .7s var(--ease);will-change:transform}
.ns-slide{flex:0 0 100%;min-width:100%;position:relative;overflow:hidden}
.ns-slide__in{
  position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  display:grid;grid-template-columns:1.1fr .9fr;gap:30px;
  padding:64px 24px 72px;align-items:center;min-height:380px;
}
@media(max-width:900px){.ns-slide__in{grid-template-columns:1fr;padding:44px 24px 120px}}
.ns-slide__bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.ns-slide__shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,20,31,.94) 8%,rgba(18,20,31,.55) 55%,transparent 100%);
}
.ns-slide--brand{
  background:
    radial-gradient(900px 420px at 78% 30%,rgba(61,90,241,.16),transparent 60%),
    radial-gradient(700px 380px at 15% 80%,rgba(255,184,28,.08),transparent 60%),
    var(--surface);
}
.ns-dust{position:absolute;inset:0;pointer-events:none;z-index:1}
.ns-slide__tag{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:1px;color:var(--gold);background:rgba(255,184,28,.1);
  border:1px solid rgba(255,184,28,.3);padding:7px 14px;border-radius:99px;margin-bottom:22px;
}
.ns-slide h2,
.ns-slide__title{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(32px,4.6vw,54px);line-height:1.08;letter-spacing:-.5px;
  margin-bottom:18px;max-width:15ch;
}
.ns-slide__title em{font-style:normal;color:var(--gold)}
.ns-slide__text{color:var(--muted);font-size:17px;max-width:46ch;margin-bottom:32px}
.ns-slide__ctas{display:flex;gap:14px;flex-wrap:wrap}
.ns-slide__trust{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap}
.ns-trust-i{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.ns-trust-i b{color:var(--ink)}

/* Flèches, pastilles */
.ns-carousel__arrow{
  position:absolute;top:50%;translate:0 -50%;z-index:6;
  width:44px;height:44px;border-radius:50%;
  background:rgba(18,20,31,.7);border:1px solid var(--brd);backdrop-filter:blur(6px);
  color:var(--ink);font-size:18px;display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,opacity .2s;opacity:.75;
}
.ns-carousel__arrow:hover{opacity:1;border-color:var(--gold);background:rgba(18,20,31,.92)}
.ns-carousel__arrow--prev{left:14px}
.ns-carousel__arrow--next{right:14px}
.ns-carousel__dots{
  position:absolute;left:0;right:0;bottom:18px;z-index:6;
  display:flex;justify-content:center;gap:9px;
}
.ns-carousel__dots button{
  width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.25);
  transition:width .3s var(--ease),background .3s;
}
.ns-carousel__dots button[aria-current="true"]{width:26px;background:var(--gold)}
@media(max-width:640px){
  .ns-carousel__arrow{display:none}
}

/* ---------- Cartes cadeaux (slide de marque) ----------
   Design calqué sur la carte de visite Nelia Store : fond blanc, coin
   haut-gauche orange, coin bas-droite bleu, monogramme NS, filigrane
   de circuit imprimé.

   QUATRE cartes en GRILLE 2×2 (1 000 & 2 000 en haut, 5 000 & 10 000 en bas),
   entièrement dans le flux : aucune ne peut déborder ni être rognée. */
/* GRILLE 2×2 : 1 000 & 2 000 en haut, 5 000 & 10 000 en bas.
   Les cartes sont DANS LE FLUX (plus d'empilement absolu en éventail) : aucune
   ne peut déborder du cadre ni être rognée en bas. Un seul --ns-gc-w commande
   toute la taille ; --ns-i ne sert plus qu'à décaler l'apparition. */
.ns-stage{
  /* La carte grandit avec la largeur du viewport pour occuper la colonne sur
     grand écran (plus de vide à droite de 1024 à 1920 px), tout en restant
     bornée : à 2 cartes + gouttière, la grille ne dépasse jamais sa colonne
     (le wrap est plafonné à 1280 px → colonne ≈ 540 px, grille ≤ 506 px). */
  --ns-gc-w:  clamp(172px, 16vw, 240px);  /* largeur d'une carte (desktop) */
  --ns-gc-gap: clamp(18px, 1.4vw, 26px);  /* gouttière entre les cartes */

  perspective:1200px;position:relative;
  display:grid;
  grid-template-columns:repeat(2,var(--ns-gc-w));
  gap:var(--ns-gc-gap);
  justify-content:center;align-content:center;justify-items:center;
  /* Le flottement porte sur TOUTE la grille, jamais sur une seule carte. */
  animation:ns-floaty 5.5s ease-in-out infinite;
}
.ns-gcard{
  position:relative;width:var(--ns-gc-w);aspect-ratio:1.586;
  border-radius:calc(var(--ns-gc-w) * .056);overflow:hidden;background:#fff;
  /* Plus de décalage d'éventail : seule la souris incline la carte (--ns-r*),
     en place, sans jamais la faire sortir de sa case (--ns-r* écrit par le JS). */
  transform:rotateX(var(--ns-rx,0deg)) rotateY(var(--ns-ry,0deg));
  transition:transform .18s ease-out;
  box-shadow:0 24px 50px -22px rgba(0,0,0,.62);
}
/* Apparition sobre : fondu léger décalé carte par carte (--ns-i = rang).
   Neutralisée pour « prefers-reduced-motion » → cartes visibles d'emblée. */
@media (prefers-reduced-motion:no-preference){
  .ns-stage .ns-gcard{opacity:0;animation:ns-gcard-in .55s ease forwards;
    animation-delay:calc(var(--ns-i,0) * .09s)}
}
@keyframes ns-gcard-in{from{opacity:0}to{opacity:1}}
/* En grille 2×2 les quatre cartes ont un poids égal : aucun assombrissement. */
.ns-gcard--back{filter:none}
@keyframes ns-floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* Reflet qui balaie la carte du dessus */
.ns-gcard--front::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.55) 48%,transparent 62%);
  animation:ns-sheen 4.6s ease-in-out infinite;
}
@keyframes ns-sheen{0%,100%{transform:translateX(-22%)}50%{transform:translateX(22%)}}

/* Coins diagonaux décoratifs */
.ns-gcard__corner{position:absolute;pointer-events:none}
/* Dimensions calées pour que les triangles ne passent jamais sous le
   monogramme (en haut) ni sous la mention de livraison (en bas). */
.ns-gcard__corner--tl{
  top:0;left:0;width:44%;height:54%;
  background:linear-gradient(135deg,#F9B01A 0%,#F2792B 52%,#E0453E 100%);
  clip-path:polygon(0 0,100% 0,0 100%);
}
.ns-gcard__corner--br{
  right:0;bottom:0;width:42%;height:50%;
  background:linear-gradient(135deg,#4E60CC 0%,#1D33A0 100%);
  clip-path:polygon(100% 100%,100% 0,0 100%);
}

/* Filigrane circuit imprimé */
/* Filigrane placé sur la zone blanche du bord droit, au-dessus du coin bleu. */
.ns-gcard__circuit{
  position:absolute;right:4%;top:38%;translate:0 -50%;
  width:32%;height:auto;opacity:.15;pointer-events:none;
}

/* Tout l'intérieur de la carte est exprimé en fraction de sa largeur : changer
   --ns-gc-w suffit à redimensionner la carte entière sans rien décaler.
   (Les fractions viennent du dessin d'origine, calé sur 320 px de large.) */
.ns-gcard__in{
  position:absolute;inset:0;z-index:2;
  padding:calc(var(--ns-gc-w) * .056) calc(var(--ns-gc-w) * .069) calc(var(--ns-gc-w) * .05);
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  text-align:center;
}
.ns-gcard__head{
  display:flex;flex-direction:column;align-items:center;
  gap:calc(var(--ns-gc-w) * .0094);
}
.ns-gcard__logo{height:calc(var(--ns-gc-w) * .119);width:auto;display:block}
.ns-gcard__brand{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:calc(var(--ns-gc-w) * .078);
  line-height:1;letter-spacing:.02em;
}
.ns-gcard__brand-n{color:#1D33A0}
.ns-gcard__brand-s{
  background:linear-gradient(100deg,#F2792B,#E0453E);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Les mentions fines gardent un plancher : en dessous de 7 px elles ne sont
   plus lisibles, mieux vaut qu'elles cessent de rétrécir. */
.ns-gcard__tag{
  font-size:max(7px,calc(var(--ns-gc-w) * .0297));
  font-weight:800;letter-spacing:.23em;color:#5c6480;
}
.ns-gcard__val{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:calc(var(--ns-gc-w) * .119);line-height:1;color:#12141f;
  white-space:nowrap;
}
.ns-gcard__foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:6px;width:100%;
  font-size:max(6.5px,calc(var(--ns-gc-w) * .0275));
  font-weight:800;letter-spacing:.1em;color:#6b7490;
}
.ns-gcard__foot span:first-child{max-width:62%;text-align:left;line-height:1.2}
/* Les étoiles tombent sur le coin bleu : elles s'écrivent donc en blanc. */
.ns-gcard__foot span:last-child{
  color:#fff;letter-spacing:0;
  font-size:max(7.5px,calc(var(--ns-gc-w) * .031));
}

/* Tablette & mobile : la grille 2×2 reste, la carte se dimensionne au viewport.
   Les QUATRE cartes restent visibles — aucune n'est masquée. */
@media(max-width:900px){
  .ns-stage{--ns-gc-w:min(200px,40vw);--ns-gc-gap:18px;margin-top:10px}
}
@media(max-width:480px){
  .ns-stage{--ns-gc-w:min(160px,40vw);--ns-gc-gap:14px}
}

/* ---------- Slide « Sorties du mois » (RAWG) ---------- */
.ns-slide--releases .ns-slide__in{grid-template-columns:.85fr 1.15fr;align-items:center}
@media(max-width:900px){.ns-slide--releases .ns-slide__in{grid-template-columns:1fr}}
.ns-releases{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1100px){.ns-releases{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.ns-releases{grid-template-columns:repeat(3,1fr);gap:9px}}
@media(max-width:520px){.ns-releases{grid-template-columns:repeat(2,1fr)}}
.ns-release{
  display:block;background:var(--card);border:1px solid var(--brd);border-radius:12px;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s;
}
.ns-release:hover{transform:translateY(-5px);border-color:rgba(255,184,28,.4)}
.ns-release img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--card-2)}
.ns-release__b{padding:9px 10px 11px}
.ns-release__n{font-size:12.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
.ns-release__d{font-size:11px;color:var(--muted);margin-top:5px}

/* ============================================================
   4. BANDEAU PORTEFEUILLE
   ============================================================ */
.ns-strip{
  background:linear-gradient(90deg,rgba(255,184,28,.12),rgba(255,106,43,.1));
  border-bottom:1px solid var(--brd);
}
.ns-strip__in{
  max-width:var(--wrap);margin:0 auto;padding:13px 24px;
  display:flex;align-items:center;gap:12px;justify-content:center;
  font-size:14px;text-align:center;flex-wrap:wrap;
}
.ns-strip__in b{color:var(--gold)}
.ns-strip__in a{color:#9db0ff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ns-strip__in a:hover{color:var(--gold)}

/* ============================================================
   5. SECTIONS PRODUITS
   ============================================================ */
.ns-section{max-width:var(--wrap);margin:0 auto;padding:54px 24px 10px}
.ns-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.ns-sec-head h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(21px,2.6vw,28px)}
.ns-sec-head a{font-size:14px;font-weight:700;color:#9db0ff;white-space:nowrap}
.ns-sec-head a:hover{color:var(--gold)}

/* La grille couvre l'accueil (.ns-grid) ET toutes les archives WooCommerce
   (.woocommerce ul.products : boutique, catégories, sous-catégories, recherche).
   Le sélecteur .woocommerce est repris tel quel pour tenir tête au CSS de
   WooCommerce si une version future y remettait une grille en colonnes. */
.ns-grid,
.ns-shop ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px;
  list-style:none;margin:0;padding:0;float:none;
}
/* Chaque carte occupe sa cellule : on annule toute largeur/flottant hérités. */
.ns-shop ul.products li.product,
.woocommerce ul.products li.product{width:auto;float:none;margin:0}
@media(max-width:560px){
  .ns-grid,
  .ns-shop ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* Grille des sections d'ACCUEIL : colonnes FIXES, jamais de carte orpheline.
   Chaque section demande 6 produits ; 6 est divisible par 6, 3 et 2 → les lignes
   sont toujours pleines à chaque palier. (Les archives WooCommerce gardent
   l'auto-fill ci-dessus : leur nombre de produits est arbitraire.) */
.ns-grid--home{grid-template-columns:repeat(6,1fr)}
@media(max-width:1080px){.ns-grid--home{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ns-grid--home{grid-template-columns:repeat(2,1fr);gap:12px}}

.ns-empty{color:var(--muted);font-size:14.5px;padding:18px 0}

/* ---------- Carte produit ---------- */
.ns-p{
  background:var(--card);border:1px solid var(--brd);border-radius:var(--radius);
  overflow:hidden;position:relative;list-style:none;margin:0;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.ns-p:hover{transform:translateY(-6px);border-color:rgba(255,184,28,.4);box-shadow:0 18px 40px -14px rgba(0,0,0,.6)}
.ns-p__link{display:block;color:inherit}
.ns-p__art{
  aspect-ratio:1.35;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:6px;position:relative;overflow:hidden;
  font-family:'Space Grotesk',sans-serif;font-weight:700;color:rgba(255,255,255,.95);
  background:linear-gradient(150deg,#1b2140,#2c3566);
}
.ns-p__art img{width:100%;height:100%;object-fit:cover;display:block}
.ns-p__art .ns-p__ph{font-size:21px;letter-spacing:.5px;text-align:center;padding:0 12px}
.ns-off{
  position:absolute;top:10px;left:10px;z-index:2;background:var(--orange);color:#fff;
  font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:7px;
}
.ns-reg{
  position:absolute;top:10px;right:10px;z-index:2;
  background:var(--blue);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:1px;padding:4px 9px;border-radius:7px;
  box-shadow:0 4px 12px -3px rgba(61,90,241,.7);
  display:inline-flex;align-items:center;gap:4px;
}
.ns-reg::before{content:"🌍";font-size:11px}
.ns-p__body{padding:13px 14px 16px}
.ns-p__name{font-size:13.5px;font-weight:600;line-height:1.35;margin-bottom:9px;min-height:36px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ns-p__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ns-p__price b,
.ns-p__price ins{font-size:17px;color:var(--gold);font-weight:800;text-decoration:none;background:none}
.ns-p__price s,
.ns-p__price del{font-size:12px;color:var(--muted)}
.ns-p__price .woocommerce-Price-currencySymbol{font-size:.85em}
.ns-p__stock{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--green);font-weight:600;margin-top:7px}
.ns-p__stock::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--green);box-shadow:0 0 8px var(--green);flex:none}
.ns-p__stock--out{color:var(--muted)}
.ns-p__stock--out::before{background:var(--muted);box-shadow:none}
.ns-p__cart,
.ns-p a.button,
.ns-p a.added_to_cart{
  display:block;margin:11px 14px 14px;text-align:center;
  background:rgba(255,184,28,.12);border:1px solid rgba(255,184,28,.3);color:var(--gold);
  font-size:12.5px;font-weight:800;padding:9px 10px;border-radius:10px;
  transition:background .2s,color .2s,opacity .2s;
}
.ns-p__cart:hover,
.ns-p a.button:hover,
.ns-p a.added_to_cart:hover{background:var(--gold);color:#221500;transform:none;box-shadow:none}
.ns-p a.added_to_cart{background:transparent;border-color:var(--brd);color:var(--muted);margin-top:-6px}
.ns-p a.button.loading{opacity:.6}
.ns-p a.button.added::after{content:" ✓"}
.ns-p .button:disabled,.ns-p .button.disabled{opacity:.45}

/* ============================================================
   6. CONFIANCE
   ============================================================ */
.ns-trust{max-width:var(--wrap);margin:64px auto 0;padding:0 24px}
.ns-trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ns-t-card{
  background:var(--card);border:1px solid var(--brd);border-radius:var(--radius);
  padding:22px;display:flex;gap:14px;align-items:flex-start;
}
.ns-t-ico{
  width:42px;height:42px;border-radius:11px;flex:none;font-size:19px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,184,28,.12);border:1px solid rgba(255,184,28,.25);
}
.ns-t-card h3{font-size:15px;margin-bottom:4px}
.ns-t-card p{font-size:13px;color:var(--muted)}

/* ============================================================
   6bis. BANNIÈRE PUB AVANT LE PIED DE PAGE
   ============================================================ */
.ns-adband{max-width:var(--wrap);margin:70px auto 0;padding:0 24px}
.ns-adband__box{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--radius);border:1px solid rgba(255,184,28,.28);
  background:
    radial-gradient(700px 260px at 82% 30%,rgba(61,90,241,.20),transparent 62%),
    linear-gradient(100deg,var(--card) 0%,var(--surface) 100%);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
a.ns-adband__box:hover{
  transform:translateY(-3px);border-color:rgba(255,184,28,.6);
  box-shadow:0 22px 48px -20px rgba(0,0,0,.7);
}
.ns-adband__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.36}
.ns-adband__shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,20,31,.94) 10%,rgba(18,20,31,.6) 58%,transparent 100%);
}
.ns-adband__in{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:30px 32px;flex-wrap:wrap;
}
.ns-adband__txt{display:flex;flex-direction:column;gap:7px;min-width:0}
.ns-adband__title{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(19px,2.6vw,28px);line-height:1.15;color:var(--ink);
}
.ns-adband__sub{color:var(--muted);font-size:14.5px;max-width:60ch}
.ns-adband__cta{
  flex:none;background:var(--gold);color:#221500;font-weight:800;font-size:14.5px;
  padding:13px 26px;border-radius:11px;transition:filter .2s;
}
a.ns-adband__box:hover .ns-adband__cta{filter:brightness(1.07)}
@media(max-width:640px){
  .ns-adband{margin-top:48px}
  .ns-adband__in{padding:22px;gap:16px}
  .ns-adband__cta{width:100%;text-align:center}
}

/* ============================================================
   7. FOOTER
   ============================================================ */
.ns-footer{margin-top:80px;background:var(--surface);border-top:1px solid var(--brd)}
.ns-foot{
  max-width:var(--wrap);margin:0 auto;padding:52px 24px 30px;
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;
}
@media(max-width:820px){.ns-foot{grid-template-columns:1fr 1fr}}
.ns-foot h4{font-size:13px;letter-spacing:1.5px;color:var(--muted);margin-bottom:16px;font-weight:700;text-transform:uppercase}
.ns-foot a{display:block;font-size:14px;color:var(--muted);margin-bottom:10px;transition:color .2s}
.ns-foot a:hover{color:var(--gold)}
.ns-foot ul{list-style:none;margin:0;padding:0}
.ns-foot-brand .ns-logo{margin-bottom:0}
.ns-foot-brand p{color:var(--muted);font-size:13.5px;margin-top:14px;max-width:32ch}
.ns-foot-bottom{
  border-top:1px solid var(--brd);text-align:center;padding:20px;
  font-size:12px;color:var(--muted);
}

/* ============================================================
   8. PAGES CLASSIQUES (page.php / index.php / 404)
   ============================================================ */
.ns-page{max-width:860px;margin:0 auto;padding:52px 0 20px}
.ns-page h1,.ns-page h2,.ns-page h3{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.2;margin-bottom:14px}
.ns-page h1{font-size:clamp(28px,4vw,40px)}
.ns-page p,.ns-page li{color:#cdd2e0;margin-bottom:14px}
.ns-page a{color:#9db0ff;text-decoration:underline;text-underline-offset:3px}
.ns-page a:hover{color:var(--gold)}
.ns-page ul,.ns-page ol{padding-left:22px;margin-bottom:16px}
.ns-page img{border-radius:var(--radius)}
.ns-entry{background:var(--card);border:1px solid var(--brd);border-radius:var(--radius);padding:26px;margin-bottom:18px}
.ns-404{text-align:center;padding:90px 0}
.ns-404 .ns-big{font-family:'Space Grotesk',sans-serif;font-size:clamp(70px,16vw,150px);font-weight:700;
  background:linear-gradient(100deg,var(--gold),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.ns-pagination{display:flex;justify-content:center;gap:8px;margin:34px 0 10px;flex-wrap:wrap}
.ns-pagination .page-numbers{
  min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border-radius:10px;background:var(--card);border:1px solid var(--brd);
  color:var(--muted);font-weight:700;font-size:14px;transition:all .2s;
}
.ns-pagination .page-numbers:hover{color:var(--ink);border-color:var(--blue)}
.ns-pagination .page-numbers.current{background:var(--gold);color:#221500;border-color:var(--gold)}

/* ============================================================
   9. ACCESSIBILITÉ / MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  /* L'intro est déjà écrite en état final : couper les animations suffit,
     la formation de logos s'affiche telle quelle. */
  .ns-intro__title,.ns-orbit__fly,.ns-intro__scroll{opacity:1;transform:none;filter:none}
  .ns-intro__flash,.ns-intro__shock{display:none}
}

/* ============================================================
   ★ CORRECTIONS THÈME CLAIR ★
   Ne touche PAS à la structure : seulement les endroits où une teinte
   sombre / une lueur / un or-en-texte ne convient pas sur fond clair.
   Chaque bloc dit POURQUOI.
   ============================================================ */

/* Liens texte : le bleu clair d'origine (#9db0ff) sur clair → bleu profond. */
.btn-line:hover{color:var(--blue-ink)}
.ns-sec-head a{color:var(--blue-ink)}
.ns-sec-head a:hover{color:var(--blue-ink);text-decoration:underline}
.ns-strip__in a{color:var(--blue-ink)}
.ns-strip__in a:hover{color:var(--blue-ink)}
.ns-strip__in b{color:var(--gold-ink)}
.ns-page a{color:var(--blue-ink)}
.ns-page p,.ns-page li{color:var(--muted)}
.ns-foot a:hover{color:var(--ink)}

/* En-tête : voile blanc translucide (au lieu du navy). */
.ns-header{background:rgba(255,255,255,.9)}
.ns-wallet-chip{color:var(--gold-ink)}
.ns-wallet-chip:hover{color:var(--gold-ink)}

/* ============================================================
   HERO SOMBRE TRANSPLANTÉ (accueil uniquement)
   ------------------------------------------------------------
   Le hero reprend le fond SOMBRE, les étoiles, le cercle et les COULEURS VIVES
   d'origine ; tout le reste du site reste clair. Méthode : on restaure les
   variables sombres UNIQUEMENT dans .ns-intro (portée locale) → toutes les
   règles d'intro de base (déjà écrites pour le sombre) redeviennent sombres
   telles quelles, SANS rien redessiner ni recalculer. On ne garde ici que 2
   ajustements demandés : le mot-symbole (police + alignement) et l'estompage
   sobre des badges de catégorie vide.
   ============================================================ */
.ns-intro{
  --bg:#12141f; --surface:#1a1d2e; --card:#20243a; --card-2:#262b45;
  --ink:#f2f3f7; --muted:#9aa0b4;
  --gold:#ffb81c; --orange:#ff6a2b; --blue:#3d5af1; --green:#2ecc71;
  --brd:rgba(255,255,255,.07);
}
/* Catégorie vide / non reliée : badge légèrement estompé, AUCUN texte autour. */
.ns-orbit__item.is-dim{opacity:.55;transition:opacity .2s ease}
.ns-orbit__item.is-dim:hover{opacity:1}
/* Mot-symbole : Archivo 900 VRAIE italique, avec le REMPLISSAGE DÉGRADÉ VIF
   d'origine (.ns-t--n / .ns-t--s) — on ne touche donc ni à color ni au fill.
   NELIA et STORE égalisés à largeur IDENTIQUE par un scaleX symétrique (~5 %,
   constante de la police) : mêmes verticales gauche ET droite malgré l'italique.
   (text-align:justify n'étale RIEN sur un mot sans espaces — c'est ce scaleX qui
   aligne réellement, vérifié au pixel : NELIA = STORE, décalage 0.) */
.ns-intro__title{font-family:'Archivo',sans-serif;font-weight:900;font-style:italic;letter-spacing:0}
.ns-intro__title b{
  font-family:'Archivo',sans-serif;font-weight:900;font-style:italic;letter-spacing:0;
  width:auto;text-align:center;
}
.ns-intro__title b.ns-t--n{transform:scaleX(1.055);transform-origin:center}
.ns-intro__title b.ns-t--s{transform:scaleX(0.948);transform-origin:center}

/* ---------- CARROUSEL ---------- */
.ns-carousel__arrow{background:rgba(255,255,255,.82);color:var(--ink);border-color:var(--brd)}
.ns-carousel__arrow:hover{background:#fff;border-color:var(--gold-deep)}
.ns-carousel__dots button{background:rgba(15,26,48,.22)}
/* Le fondu de la bannière passe au clair pour laisser lire le texte foncé. */
.ns-slide__shade{background:linear-gradient(90deg,rgba(232,237,245,.94) 8%,rgba(232,237,245,.55) 55%,transparent 100%)}
.ns-slide__tag{color:var(--gold-ink)}
.ns-slide__title em{color:var(--orange-ink)}

/* ---------- CARTES PRODUIT ---------- */
/* La vignette reste SOMBRE (les jaquettes ressortent mieux) : rien à changer.
   Prix : l'or en texte est illisible sur blanc → encre foncée, gras, plus gros. */
.ns-p__price b,.ns-p__price ins{color:var(--ink)}
.ns-off,.ns-shop .onsale{background:var(--orange-br)}    /* badge promo : orange assombri, texte blanc AA */
.ns-p__stock::before{box-shadow:none}                    /* pas de lueur */
/* Bouton « ajouter au panier » : aplat OR + texte foncé (ressort plus). */
.ns-p__cart,
.ns-p a.button,
.ns-p a.added_to_cart{background:var(--gold);border-color:var(--gold-deep);color:#20130A}
.ns-p__cart:hover,
.ns-p a.button:hover{background:var(--gold);color:#20130A;filter:brightness(1.04)}
.ns-p a.added_to_cart{background:transparent;border-color:var(--brd);color:var(--muted)}

/* ---------- BANNIÈRE PUB AVANT PIED ---------- */
.ns-adband__shade{background:linear-gradient(90deg,rgba(232,237,245,.94) 10%,rgba(232,237,245,.6) 58%,transparent 100%)}

/* ---------- Confiance : pictos dans une pastille dorée douce ---------- */
.ns-t-ico{color:var(--gold-ink)}

/* ---------- Flèche « Retour » (toutes les pages internes) ---------- */
.ns-backbar{max-width:var(--wrap);margin:0 auto;padding:18px 24px 0}
.ns-back{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:14.5px;color:var(--ink);
  background:#fff;border:1px solid var(--brd);border-radius:10px;
  padding:9px 15px;box-shadow:0 6px 16px -8px rgba(19,38,74,.22);
  transition:color .15s,border-color .15s,transform .15s;
}
.ns-back:hover{color:var(--blue-ink);border-color:var(--blue-ink);transform:translateX(-2px)}
.ns-back__arrow{font-size:18px;line-height:1}
@media(max-width:640px){.ns-backbar{padding:14px 16px 0}}

/* ---------- Vignettes produit : image ENTIÈRE (contain) sur fond sombre chaud ----------
   Plus de recadrage (cover) qui coupait le cercle KDMAX ; ~15% de marge intérieure ;
   fond #1C1710 (le bleu marine refroidissait le doré). Vaut pour l'accueil, les
   archives, les produits liés — toute grille qui utilise la carte produit. */
/* Tuile CARRÉE (au lieu de paysage) : une jaquette portrait y est bien plus
   grande, une carte/logo aussi — le tout SANS recadrage (contain). Le fond
   sombre chaud remplit les marges éventuelles. */
.ns-p__art{background:var(--kd-dark);aspect-ratio:1}
.ns-p__art img{width:100%;height:100%;object-fit:contain;padding:4%;box-sizing:border-box}
.ns-p__ph{color:rgba(255,255,255,.92)}

/* ============================================================
   RÉSEAU — tableau de bord front-end (Mon réseau / Mon bonus / Caisse recharge)
   ------------------------------------------------------------
   Le plugin nelia-reseau code son dashboard EN DUR en sombre (public.css :
   --nrz-card:#20243a, textes clairs…) → « grand bloc sombre » sur le clair.
   On l'éclaircit ICI, dans le THÈME, avec le préfixe body.ns-theme :
     • le plugin n'est PAS modifié (aucune nouvelle version réseau) ;
     • le thème SOMBRE garde son dashboard sombre (sa CSS ne charge pas ceci) ;
     • la surspécificité (0,2,0) prime sur les règles .nrz-* du plugin (0,1,0),
       quel que soit l'ordre de chargement.
   L'or/l'orange servant de TEXTE passent en variantes foncées (illisibles sinon).
   ============================================================ */
body.ns-theme .nrz-box{
  --nrz-card:#FFFFFF; --nrz-ink:#0F1A30; --nrz-muted:#3A4A6E;
  --nrz-gold:#FFB81C; --nrz-blue:#3D5AF1; --nrz-green:#147A3A; --nrz-red:#C0362B;
  --nrz-brd:rgba(15,26,48,.12);
  box-shadow:0 18px 44px -24px rgba(19,38,74,.28);
}
/* Surfaces internes (étaient des voiles blancs translucides sur fond sombre). */
body.ns-theme .nrz-head,
body.ns-theme .nrz-bonus-totals,
body.ns-theme .nrz-pdv,
body.ns-theme .nrz-pilot__block,
body.ns-theme .nrz-card{background:#F2F6FC;border-color:rgba(15,26,48,.10)}
body.ns-theme .nrz-input{background:#FFFFFF;color:#0F1A30}
body.ns-theme .nrz-progress{background:rgba(15,26,48,.10)}
body.ns-theme .nrz-pilot__actions{background:linear-gradient(to top,#FFFFFF 70%,transparent)}
/* Textes clairs codés en dur → foncés. */
body.ns-theme .nrz-pdv__name,
body.ns-theme .nrz-card__title,
body.ns-theme .nrz-pdv__meta b,
body.ns-theme .nrz-bonus-totals b{color:#0F1A30}
body.ns-theme .nrz-pdv__meta,
body.ns-theme .nrz-card__meta,
body.ns-theme .nrz-hint,
body.ns-theme .nrz-pager__now{color:#3A4A6E}
body.ns-theme .nrz-btn--ghost{border-color:rgba(15,26,48,.2);color:#0F1A30}
body.ns-theme .nrz-btn--ghost:hover{border-color:var(--gold-deep);color:var(--gold-ink)}
/* Or / orange EN TEXTE → variantes lisibles sur clair. */
body.ns-theme .nrz-head__value,
body.ns-theme .nrz-recap__amount,
body.ns-theme .nrz-amount,
body.ns-theme .nrz-box--bonus .nrz-bonus-balance,
body.ns-theme .nrz-list__amount.is-out,
body.ns-theme .nrz-cart-bonus .nrz-bonus-amount{color:var(--gold-ink)}
body.ns-theme .nrz-bonus-badge,
body.ns-theme .nrz-reseller-chip{color:var(--gold-ink);background:var(--gold-tint);border-color:var(--gold-tintb)}
body.ns-theme .nrz-bonus-table .is-out{color:var(--orange-ink)}
/* Vert « entrant » un peu plus foncé pour le clair. */
body.ns-theme .nrz-list__amount.is-in,
body.ns-theme .nrz-bonus-table .is-in{color:var(--green)}
/* Puces de montant : texte blanc au survol (fond bleu). */
body.ns-theme .nrz-chip:hover,
body.ns-theme .nrz-chip.is-on{color:#fff}
/* Notices : textes clairs (pensés pour le sombre) → foncés lisibles. */
body.ns-theme .nrz-notice--success{color:#0e5a2b}
body.ns-theme .nrz-notice--error{color:#8a1f21}
body.ns-theme .nrz-notice--info{color:var(--blue-ink)}
body.ns-theme .nrz-link{color:var(--blue-ink)}