/* =========================================================
   NIROXY — MYSELLAUTH (BOUTIQUE) OVERRIDE ✅ v9 DARK DEFAULT
   Demandes :
   ✅ Thème SOMBRE par défaut (pas clair)
   ✅ Tout très visible (contrastes, textes, boutons)
   ✅ Garder les arrondis + transparence légère (glass)
   ✅ FIX produits : pas de “ronds affreux”, pas d’infos coupées
   ✅ Logo arrondi
========================================================= */

/* ---------------------------------------------------------
   0) Kill particles canvas
--------------------------------------------------------- */
canvas.particles-js-canvas-el{ display:none !important; }

/* ---------------------------------------------------------
   1) Variables — DARK par défaut
--------------------------------------------------------- */
:root{
  /* Ink (texte) */
  --nx-ink: #eaf2ff;
  --nx-ink-soft: rgba(234,242,255,.82);
  --nx-ink-mute: rgba(234,242,255,.62);

  /* Accent */
  --nx-accent: 62,170,255;         /* rgb tuple */
  --nx-accent-hex: #6fb7ff;        /* accent texte */

  /* Surfaces (glass) */
  --nx-surface: rgba(10,24,58,.60);     /* cards / panels */
  --nx-surface-2: rgba(12,32,78,.70);   /* hover */
  --nx-surface-3: rgba(7,16,42,.62);    /* inputs / inner */
  --nx-surface-4: rgba(5,13,34,.74);    /* deep */

  /* Traits */
  --nx-stroke: rgba(167,200,255,.16);
  --nx-stroke-2: rgba(167,200,255,.26);

  /* Ombres */
  --nx-shadow-soft: 0 14px 40px rgba(0,0,0,.38);
  --nx-shadow: 0 20px 60px rgba(0,0,0,.52);

  /* Rayons */
  --nx-radius: 16px;
  --nx-radius-lg: 22px;
  --nx-radius-pill: 999px;

  /* Focus ring */
  --nx-ring: 0 0 0 4px rgba(111,183,255,.22);

  /* Background */
  --nx-bg-0: #06102a;
  --nx-bg-1: #071a3a;
  --nx-bg-2: #050d22;
}

/* ---------------------------------------------------------
   2) Base (DARK)
--------------------------------------------------------- */
html{ scroll-behavior:smooth; }

body{
  color: var(--nx-ink) !important;
  background:
    radial-gradient(1100px 700px at 18% 10%, rgba(62,170,255,.18), transparent 62%),
    radial-gradient(950px 560px at 82% 16%, rgba(20,90,255,.16), transparent 60%),
    radial-gradient(900px 520px at 50% 86%, rgba(9,30,80,.28), transparent 62%),
    linear-gradient(180deg, var(--nx-bg-0) 0%, var(--nx-bg-1) 55%, var(--nx-bg-2) 100%) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
}

/* ✅ “eau / mouillé” (overlay subtil en dark) */
body::before{
  content:"";
  position: fixed;
  inset: -48px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(620px 230px at 18% 26%, rgba(255,255,255,.08), transparent 65%),
    radial-gradient(560px 220px at 72% 18%, rgba(255,255,255,.07), transparent 62%),
    radial-gradient(760px 280px at 55% 78%, rgba(255,255,255,.06), transparent 66%),
    repeating-linear-gradient(
      115deg,
      rgba(111,183,255,.075) 0px,
      rgba(111,183,255,.075) 10px,
      rgba(255,255,255,.020) 18px,
      rgba(255,255,255,.020) 32px
    );
  filter: blur(1.6px);
  opacity: .80;
  mix-blend-mode: overlay;
  transform: translate3d(0,0,0);
  animation: nxWaterDrift 9s ease-in-out infinite alternate;
}
@keyframes nxWaterDrift{
  from{ transform: translate3d(-12px,-10px,0) scale(1.01); opacity: .74; }
  to  { transform: translate3d(12px,10px,0) scale(1.03);  opacity: .86; }
}

/* ✅ contenu au-dessus */
body > *{ position: relative; z-index: 1; }

::selection{ background: rgba(111,183,255,.22); color: var(--nx-ink); }

/* Background image container (si présent) */
.fixed.inset-0.bg-cover{
  opacity: .20;
  filter: saturate(1.10) contrast(1.08);
}

/* ---------------------------------------------------------
   3) Anchor spacing (#products)
--------------------------------------------------------- */
#products{ scroll-margin-top: 110px; }
@media (max-width: 1024px){ #products{ scroll-margin-top: 95px; } }
@media (max-width: 640px){  #products{ scroll-margin-top: 88px; } }

/* Spacing sections (aligné à ton style) */
section[data-component-id="products"] .py-6{
  padding-top: 1.25rem !important;
  padding-bottom: 1.75rem !important;
}
@media (min-width: 1024px){
  section[data-component-id="products"] .lg\:py-8{
    padding-top: 1.5rem !important;
    padding-bottom: 2.25rem !important;
  }
}
section[data-component-id="hero"] .py-24{ padding-bottom: 5.5rem !important; }
@media (min-width: 1024px){
  section[data-component-id="hero"] .py-24{
    padding-top: 6.5rem !important;
    padding-bottom: 6rem !important;
  }
}
@media (max-width: 640px){
  section[data-component-id="hero"] .py-24{
    padding-top: 4.75rem !important;
    padding-bottom: 4.5rem !important;
  }
}

/* ---------------------------------------------------------
   4) Règle PRINCIPALE : VISIBILITÉ (texte clair) + NO "text-white" bug
   (en dark on veut du clair partout, donc on force sur les classes trop sombres)
--------------------------------------------------------- */

/* Texte par défaut clair */
body :where(
  p, span, div, li, ul, ol, a, label, small, strong, em, b, i,
  h1, h2, h3, h4, h5, h6,
  td, th, dd, dt,
  input, textarea, select, button
):not(svg):not(path):not(img):not(video):not(canvas):not(iframe){
  color: var(--nx-ink) !important;
  text-shadow: none !important;
}

/* Attrape Tailwind text-black / text-slate-900 etc. (trop sombres en dark) */
:where(
  .text-black, [class*="text-black"],
  .text-slate-900, .text-slate-800, .text-slate-700,
  .text-zinc-900, .text-zinc-800, .text-zinc-700,
  .text-neutral-900, .text-neutral-800, .text-neutral-700,
  .text-gray-900, .text-gray-800, .text-gray-700
){
  color: var(--nx-ink) !important;
  text-shadow: none !important;
}

/* Ton système t-primary */
.text-t-primary\/50{ color: var(--nx-ink-mute) !important; }
.text-t-primary\/75{ color: var(--nx-ink-soft) !important; }
.text-t-primary\/80{ color: rgba(234,242,255,.90) !important; }

/* Accent lisible */
.text-accent-500,
.text-accent-400{
  color: var(--nx-accent-hex) !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------------
   5) Arrondis & glass — sans “bulldozer” sur les produits
--------------------------------------------------------- */

/* Composants (cards / dialogs / panels) */
:where(
  .card, .modal, .dialog, .panel,
  .bg-card, [class*="bg-card"],
  [role="dialog"]
){
  border-radius: var(--nx-radius-lg) !important;
}

/* Inputs / chips */
:where(input, textarea, select, .badge, .chip){
  border-radius: 14px !important;
}

/* Boutons = pill */
:where(
  button,
  a[role="button"],
  .btn, .button,
  [class*="btn"],
  [class*="button"]
){
  border-radius: var(--nx-radius-pill) !important;
}

/* Cards glass global */
.bg-card\/75,
.bg-card\/90,
.bg-card\/25,
.bg-card{
  background: linear-gradient(135deg, rgba(10,24,58,.62), rgba(12,32,78,.42)) !important;
  border: 1px solid var(--nx-stroke) !important;
  backdrop-filter: blur(18px);
  border-radius: var(--nx-radius-lg) !important;
  box-shadow: var(--nx-shadow-soft) !important;

  /* ✅ MODIF : on enlève les “lignes derrière” dues aux backgrounds/traits
     -> en dark, certaines couches peuvent créer des bandes/traits visibles.
     On stabilise le rendu (anti banding) via un léger overlay uniforme. */
  background-image:
    linear-gradient(135deg, rgba(10,24,58,.62), rgba(12,32,78,.42)),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)) !important;
}

/* Borders */
.border-white\/5{ border-color: var(--nx-stroke) !important; }
.bg-card\/75.border,
.bg-card\/90.border,
.border.border-white\/5{
  border-color: var(--nx-stroke) !important;
  border-radius: var(--nx-radius-lg) !important;
  box-shadow: var(--nx-shadow-soft) !important;
}

/* Hover cards */
.group.bg-card\/75,
a.bg-card\/75,
div.bg-card\/75,
.bg-card\/75.border.border-white\/5{
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.group:hover.bg-card\/75,
a.bg-card\/75:hover,
.bg-card\/75.border.border-white\/5:hover{
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(12,32,78,.72), rgba(10,24,58,.44)) !important;
  border-color: var(--nx-stroke-2) !important;
  box-shadow: var(--nx-shadow) !important;
}

/* ---------------------------------------------------------
   6) Logo ARRONDI ✅
   (Cible large : images/avatars dans navbar/header)
--------------------------------------------------------- */

/* Si ton logo est une image dans la navbar */
nav[data-component-id="navbar"] img,
nav[data-component-id="navbar"] a img,
nav[data-component-id="navbar"] .logo img,
header img[alt*="logo" i],
header a img[alt*="logo" i]{
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid rgba(167,200,255,.18) !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
}

/* Si le logo est dans un conteneur carré */
nav[data-component-id="navbar"] :where(.logo, [class*="logo"], [data-logo]){
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* ---------------------------------------------------------
   7) Hero
--------------------------------------------------------- */
section[data-component-id="hero"] h1{
  color: var(--nx-ink) !important;
  max-width: none !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  letter-spacing: -0.6px;
  text-shadow: none !important;
}

/* Hero search bar container */
section[data-component-id="hero"] .bg-card\/75 .flex.items-center.gap-4{
  position: relative;
  border-radius: var(--nx-radius-lg) !important;
  background: var(--nx-surface) !important;
  border: 1px solid rgba(167,200,255,.18) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
section[data-component-id="hero"] .bg-card\/75 .flex.items-center.gap-4:hover,
section[data-component-id="hero"] .bg-card\/75 .flex.items-center.gap-4:focus-within{
  border-color: rgba(111,183,255,.40) !important;
  box-shadow: var(--nx-shadow-soft) !important;
  background: var(--nx-surface-2) !important;
}

/* ---------------------------------------------------------
   8) Navbar
--------------------------------------------------------- */
nav[data-component-id="navbar"] .bg-card\/75{
  border-radius: var(--nx-radius-lg) !important;
  box-shadow: var(--nx-shadow-soft) !important;
}

nav[data-component-id="navbar"] a.px-4.py-2{
  position: relative;
  border-radius: 14px;
  transition: .18s ease;
  color: var(--nx-ink-soft) !important;
}
nav[data-component-id="navbar"] a.px-4.py-2:hover{
  background: rgba(111,183,255,.10);
  color: var(--nx-ink) !important;
}

nav[data-component-id="navbar"] a.px-4.py-2::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:6px;
  height:2px; border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(111,183,255,.60), transparent);
  opacity:0; transform: translateY(2px);
  transition: .18s ease;
}
nav[data-component-id="navbar"] a.px-4.py-2:hover::after{
  opacity:1; transform: translateY(0);
}

nav[data-component-id="navbar"] a[href*="/cart"]{
  border-radius: var(--nx-radius-pill) !important;
  box-shadow: 0 0 0 1px rgba(167,200,255,.12);
  background: rgba(255,255,255,.04);
}
nav[data-component-id="navbar"] a[href*="/cart"]:hover{
  box-shadow: var(--nx-shadow-soft);
}

nav[data-component-id="navbar"] a[href*="login"],
nav[data-component-id="navbar"] a[href*="signin"],
nav[data-component-id="navbar"] a[href*="auth"]{
  padding: .5rem 1rem !important;
  border-radius: var(--nx-radius-pill) !important;
}
nav[data-component-id="navbar"] a[href*="login"]:hover,
nav[data-component-id="navbar"] a[href*="signin"]:hover,
nav[data-component-id="navbar"] a[href*="auth"]:hover{
  background: rgba(111,183,255,.10) !important;
}

/* ---------------------------------------------------------
   9) Buttons (CTA premium, ultra lisibles)
--------------------------------------------------------- */
.bg-accent-500,
button.bg-accent-500,
a.bg-accent-500,
section[data-component-id="hero"] a[href="#products"],
section[data-component-id="hero"] a[href*="#products"]{
  border-radius: var(--nx-radius-pill) !important;
  background: linear-gradient(135deg, rgba(62,170,255,.38), rgba(20,90,255,.18)) !important;
  border: 1px solid rgba(167,200,255,.28) !important;
  color: var(--nx-ink) !important;
  box-shadow: var(--nx-shadow-soft) !important;
}
.bg-accent-500:hover,
button.bg-accent-500:hover,
a.bg-accent-500:hover,
section[data-component-id="hero"] a[href*="#products"]:hover{
  filter: brightness(1.06);
  box-shadow: var(--nx-shadow) !important;
}

/* Boutons outline accent */
.border-accent-500,
a.border-accent-500,
button.border-accent-500{
  border-color: rgba(167,200,255,.34) !important;
  border-radius: var(--nx-radius-pill) !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--nx-ink) !important;
}
.text-accent-500.border-accent-500{
  box-shadow: 0 0 0 1px rgba(167,200,255,.10), 0 12px 30px rgba(0,0,0,.30) !important;
}
.text-accent-500.border-accent-500:hover{
  background: rgba(111,183,255,.10) !important;
}

/* ---------------------------------------------------------
   10) Inputs (dark + visibles)
--------------------------------------------------------- */
:where(input, textarea, select){
  border-color: rgba(167,200,255,.18) !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--nx-ink) !important;
}
:where(input, textarea, select):focus{
  outline: none !important;
  border-color: rgba(111,183,255,.45) !important;
  box-shadow: var(--nx-ring) !important;
}
:where(input, textarea)::placeholder{
  color: rgba(234,242,255,.55) !important;
}

/* ---------------------------------------------------------
   11) Modales (login + search) — dark + lisible
--------------------------------------------------------- */

/* Backdrop */
[role="dialog"] ~ .fixed.inset-0,
[role="dialog"] + .fixed.inset-0,
div[data-state="open"].fixed.inset-0,
div[aria-hidden="true"].fixed.inset-0,
div.fixed.inset-0.z-50,
div.fixed.inset-0.bg-black\/50,
div.fixed.inset-0.bg-background\/80,
[role="dialog"] .fixed.inset-0{
  background: rgba(0,0,0,.62) !important;
  backdrop-filter: blur(4px);
}

/* Panel modal */
[role="dialog"] .bg-background{
  background: linear-gradient(135deg, rgba(10,24,58,.84), rgba(12,32,78,.54)) !important;
  border: 1px solid rgba(167,200,255,.18) !important;
  box-shadow: var(--nx-shadow) !important;
  border-radius: var(--nx-radius-lg) !important;
  backdrop-filter: blur(20px);
}

/* Largeur */
[role="dialog"] .inline-block.w-full.max-w-md,
[role="dialog"] .inline-block.w-full.max-w-lg{
  width: min(30rem, calc(100vw - 2rem)) !important;
}

/* Inputs modal */
[role="dialog"] input,
[role="dialog"] textarea,
[role="dialog"] select{
  border-radius: 14px !important;
  border-color: rgba(167,200,255,.18) !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--nx-ink) !important;
}

/* Search results container */
[role="dialog"][aria-label*="search" i] .overflow-hidden,
[data-search-results]{
  background: linear-gradient(135deg, rgba(10,24,58,.88), rgba(12,32,78,.58)) !important;
  border: 1px solid rgba(167,200,255,.20) !important;
  border-radius: var(--nx-radius-lg) !important;
  box-shadow: var(--nx-shadow) !important;
  padding: 12px !important;
}

/* Search items */
[role="dialog"][aria-label*="search" i] a,
[data-search-results] a,
[data-search-results] > div{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(167,200,255,.12) !important;
  margin-bottom: 8px !important;
  transition: all .18s ease !important;
}
[role="dialog"][aria-label*="search" i] a:hover,
[data-search-results] a:hover,
[data-search-results] > div:hover{
  background: rgba(111,183,255,.08) !important;
  border-color: rgba(167,200,255,.20) !important;
  transform: translateX(4px);
  box-shadow: var(--nx-shadow-soft) !important;
}

/* Images résultat */
[role="dialog"][aria-label*="search" i] img,
[data-search-results] img{
  width: 50px !important;
  height: 50px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 1px solid rgba(167,200,255,.16) !important;
  flex-shrink: 0 !important;
  background: rgba(255,255,255,.03);
}

/* Titres / prix */
[role="dialog"][aria-label*="search" i] a h3,
[role="dialog"][aria-label*="search" i] a h4,
[data-search-results] h3,
[data-search-results] h4{
  color: var(--nx-ink) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}
[role="dialog"][aria-label*="search" i] a span,
[data-search-results] span{
  color: var(--nx-ink-soft) !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  white-space: nowrap !important;
}

/* ---------------------------------------------------------
   12) FAQ arrows (clair, lisible en dark)
--------------------------------------------------------- */
[data-component-id^="faq"] button svg,
[id^="faq"] button svg,
details summary svg,
.accordion svg,
[role="button"][aria-expanded] svg{
  color: var(--nx-ink) !important;
  fill: var(--nx-ink) !important;
  stroke: var(--nx-ink) !important;
  filter: none !important;
}

/* ---------------------------------------------------------
   13) TEXT BLOCKS — <carte> system
--------------------------------------------------------- */
section[data-component-id^="text-block"] .bg-card\/75.border.border-white\/5{
  border-radius: var(--nx-radius-lg) !important;
  box-shadow: var(--nx-shadow-soft);
}
section[data-component-id^="text-block"] .text-left p{ margin: 0 !important; }

section[data-component-id^="text-block"] .text-left .whitespace-pre-line{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 1rem !important;
  white-space: normal !important;
  align-items: stretch !important;
}

section[data-component-id^="text-block"] carte{
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
  padding: 1.15rem 1.35rem !important;

  border-radius: var(--nx-radius-lg) !important;
  background: var(--nx-surface) !important;
  border: 1px solid rgba(167,200,255,.18) !important;
  backdrop-filter: blur(16px);

  box-shadow: var(--nx-shadow-soft) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;

  min-height: 100% !important;
  height: 100% !important;
}
section[data-component-id^="text-block"] carte:hover{
  transform: translateY(-3px);
  border-color: rgba(167,200,255,.26) !important;
  background: var(--nx-surface-2) !important;
  box-shadow: var(--nx-shadow) !important;
}
section[data-component-id^="text-block"] carte titre{
  display:block !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  color: var(--nx-ink) !important;
  margin-bottom: .25rem !important;
}
section[data-component-id^="text-block"] carte description{
  display:block !important;
  font-size: .92rem !important;
  line-height: 1.5 !important;
  color: var(--nx-ink-soft) !important;
  flex: 1 !important;
}
@media (max-width: 640px){
  section[data-component-id^="text-block"] .text-left .whitespace-pre-line{
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------
   14) PRODUCT PAGE — fiche produit (dark + lisible)
--------------------------------------------------------- */

/* Containers */
#product-page .bg-card{
  border-radius: var(--nx-radius-lg) !important;
  overflow: hidden;
}
#product-page .bg-background\/35.border.border-white\/5{
  border-radius: var(--nx-radius-lg) !important;
  border-color: rgba(167,200,255,.16) !important;
}

/* Title */
#product-page h1{
  color: var(--nx-ink) !important;
  text-shadow: none !important;
}

/* Bloc header */
#product-page .bg-card\/75.border-b.border-x.border-white\/5{
  border-radius: var(--nx-radius-lg) !important;
  border-top: 1px solid rgba(167,200,255,.16) !important;
  border-color: rgba(167,200,255,.16) !important;
  background: var(--nx-surface) !important;
}

/* Qty container */
#product-page .flex.overflow-hidden.focus-within\:border-accent-500{
  border-radius: var(--nx-radius-pill) !important;
  border: 1px solid rgba(167,200,255,.22) !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03);
}

/* Qty buttons */
#product-page .flex.overflow-hidden button{
  background: rgba(255,255,255,.06) !important;
  color: var(--nx-ink) !important;
  border-radius: 0 !important;
}
#product-page .flex.overflow-hidden button:hover{
  background: rgba(111,183,255,.10) !important;
  box-shadow: none !important;
}
#product-page .flex.overflow-hidden button:first-child{
  border-top-left-radius: var(--nx-radius-pill) !important;
  border-bottom-left-radius: var(--nx-radius-pill) !important;
}
#product-page .flex.overflow-hidden button:last-child{
  border-top-right-radius: var(--nx-radius-pill) !important;
  border-bottom-right-radius: var(--nx-radius-pill) !important;
}

/* Input quantité */
#product-page input[name="quantity"],
#product-page input[type="number"]{
  background: transparent !important;
  color: var(--nx-ink) !important;
  caret-color: var(--nx-ink) !important;
  -webkit-text-fill-color: var(--nx-ink) !important;
}
#product-page input[name="quantity"]::placeholder,
#product-page input[type="number"]::placeholder{
  color: var(--nx-ink-mute) !important;
}

/* Boutons page produit */
#product-page button.border.border-white\/5{
  border-radius: var(--nx-radius-pill) !important;
  border-color: rgba(167,200,255,.16) !important;
  background: rgba(255,255,255,.04) !important;
  transition: .18s ease;
  color: var(--nx-ink) !important;
}
#product-page button.border.border-white\/5:hover{
  border-color: rgba(167,200,255,.26) !important;
  box-shadow: var(--nx-shadow-soft) !important;
}

/* CTA principal produit */
#product-page button.bg-accent-500{
  border-radius: var(--nx-radius-pill) !important;
  background: linear-gradient(135deg, rgba(62,170,255,.38), rgba(20,90,255,.18)) !important;
  border: 1px solid rgba(167,200,255,.28) !important;
  box-shadow: var(--nx-shadow-soft) !important;
  color: var(--nx-ink) !important;
}
#product-page button.bg-accent-500:hover{ box-shadow: var(--nx-shadow) !important; }

/* États sélectionnés */
#product-page button:active,
#product-page button:focus,
#product-page button:focus-visible,
#product-page button[aria-pressed="true"],
#product-page button[aria-selected="true"],
#product-page [role="radio"][aria-checked="true"],
#product-page [role="option"][aria-selected="true"],
#product-page [data-state="checked"],
#product-page [data-state="active"],
#product-page [data-state="open"]{
  color: var(--nx-ink) !important;
  background: rgba(111,183,255,.10) !important;
  border-color: rgba(167,200,255,.26) !important;
  box-shadow: var(--nx-ring) !important;
  text-shadow: none !important;
}

/* Description / éditeur */
#product-page .editor,
#product-page .editor *{
  color: var(--nx-ink) !important;
  -webkit-text-fill-color: var(--nx-ink) !important;
  text-shadow: none !important;
}

/* ✅ BADGES : garder couleur de base */
#product-page .badges > div{
  border-radius: var(--nx-radius-pill) !important;
  border: 1px solid rgba(167,200,255,.16) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
  background: unset !important;
  background-color: unset !important;
}

/* ---------------------------------------------------------
   15) Footer
--------------------------------------------------------- */
footer.bg-card\/90{
  border-radius: var(--nx-radius-lg) !important;
  box-shadow: var(--nx-shadow-soft) !important;
}
footer a:hover{ text-shadow: none !important; }

/* ---------------------------------------------------------
   16) Micro entrance animation
--------------------------------------------------------- */
@keyframes nxFadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to  { opacity:1; transform: translateY(0); }
}
nav[data-component-id="navbar"],
section[data-component-id="hero"],
section[data-component-id="products"],
section[data-component-id="features"],
section[id^="faq"],
section[data-component-id="product-page"],
footer{
  animation: nxFadeUp .35s ease both;
}
section[data-component-id="products"]{ animation-delay: .06s; }
section[data-component-id="features"]{ animation-delay: .10s; }
section[id^="faq"]{ animation-delay: .14s; }
section[data-component-id="product-page"]{ animation-delay: .08s; }
footer{ animation-delay: .18s; }

/* =========================================================
   17) ✅ PRODUCTS GRID FIX (anti rond / anti contenu coupé)
========================================================= */

/* Grille produits : spacing propre */
section[data-component-id="products"] :where(.grid){
  gap: 18px !important;
}

/* Carte produit (souvent .group.bg-card/75) : card arrondie, pas pill */
section[data-component-id="products"] :where(.group.bg-card\/75, a.bg-card\/75, div.bg-card\/75){
  border-radius: var(--nx-radius-lg) !important;
  overflow: hidden !important; /* coupe l'image, pas le texte (voir plus bas) */
}

/* Si MySellauth met des wrappers overflow-hidden partout, on évite le rognage du texte */
section[data-component-id="products"] :where(.group .overflow-hidden){
  overflow: visible !important;
}

/* Images produits : jamais rondes */
section[data-component-id="products"] :where(img, video, iframe){
  border-radius: 0 !important;
}

/* Image produit (souvent img.aspect-video)
   ✅ MODIF : images trop grandes / coupées
   -> On fixe une hauteur de zone image (responsive) et on évite le crop agressif.
   -> Sur desktop: hauteur confortable, sur mobile: un peu plus petite.
   -> On passe en object-fit: contain pour ne pas couper (si tu veux garder cover, dis-moi). */
section[data-component-id="products"] :where(.aspect-video){
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.03) !important;
}
@media (max-width: 1024px){
  section[data-component-id="products"] :where(.aspect-video){
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
  }
}
@media (max-width: 640px){
  section[data-component-id="products"] :where(.aspect-video){
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
  }
}

section[data-component-id="products"] :where(img.aspect-video, .aspect-video img){
  width: 100% !important;
  height: 100% !important;          /* ✅ prend la hauteur du container */
  object-fit: contain !important;   /* ✅ ne coupe pas l'image */
  object-position: center !important;
  display: block !important;
  border: 0 !important;
  background: rgba(255,255,255,.03) !important;
  padding: 10px !important;         /* ✅ “respire” dans la case */
}

/* Titres produits : lisibles et propres */
section[data-component-id="products"] :where(h3, h4){
  color: var(--nx-ink) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.2px !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Infos secondaires */
section[data-component-id="products"] :where(p, .text-t-primary\/75, .text-t-primary\/50){
  color: var(--nx-ink-soft) !important;
}

/* Prix : visible */
section[data-component-id="products"] :where(.text-accent-500, .text-accent-400, [class*="price"]){
  color: var(--nx-accent-hex) !important;
  font-weight: 900 !important;
}

/* CTA dans la card : full width joli */
section[data-component-id="products"] :where(button, a[role="button"]){
  width: 100% !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  border-radius: var(--nx-radius-pill) !important;
}

/* Si un wrapper produit est “rounded-full”, on neutralise (cause fréquente du “rond”) */
section[data-component-id="products"] :where(.rounded-full, [class*="rounded-full"]){
  border-radius: var(--nx-radius-lg) !important;
}

/* Si la card est prise pour un bouton (role=button) */
section[data-component-id="products"] :where(a[role="button"].bg-card\/75, div[role="button"].bg-card\/75){
  border-radius: var(--nx-radius-lg) !important;
}

/* Glow premium au hover */
section[data-component-id="products"] :where(.group.bg-card\/75):hover{
  box-shadow: 0 20px 60px rgba(0,0,0,.52), 0 0 0 1px rgba(167,200,255,.12) !important;
}

/* =========================================================
   18) THEME TOGGLE (optionnel)
   -> Si ton toggle existe encore, il reste compatible.
========================================================= */
#nx-theme-toggle{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: var(--nx-radius-pill) !important;

  background: linear-gradient(135deg, rgba(10,24,58,.66), rgba(12,32,78,.44));
  border: 1px solid rgba(167,200,255,.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);

  color: var(--nx-ink) !important;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  backdrop-filter: blur(16px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
#nx-theme-toggle:hover{
  transform: translateY(-2px);
  border-color: rgba(167,200,255,.26);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
#nx-theme-toggle:active{ transform: translateY(0px) scale(.99); }
#nx-theme-toggle .nx-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(62,170,255,.95), rgba(20,90,255,.55));
  box-shadow: 0 0 0 3px rgba(111,183,255,.18);
}
@media (max-width: 640px){
  #nx-theme-toggle{ right: 12px; bottom: 12px; padding: 10px 12px; }
}

/* =========================================================
   FIN
========================================================= */