/* ── CSS VARIABLES ── */
:root {
  --color-accent-500:     #e040fb;
  --color-accent-600:     #c026d3;
  --color-t-primary:      #f0eaf8;
  --color-t-accent:       #ffffff;
  --color-t-secondary:    #a998c4;
  --color-background:     #07040f;
  --color-card:           #0f0820;
}

/* ── BODY & BASE ── */
body {
  background: #07040f !important;
  color: #f0eaf8 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ── BACKGROUND CONTAINERS ── */
.bg-background,
[class*="bg-background"] {
  background-color: #07040f !important;
}
.bg-card,
[class*="bg-card"] {
  background-color: #0f0820 !important;
}
.bg-background\/35,
.bg-background\/50 {
  background-color: rgba(7,4,15,.6) !important;
}

/* ── BORDERS ── */
.border-white\/5,
[class*="border-white/5"] {
  /* Pilote la bordure de TOUS les blocs SellAuth d'origine. À .12 elle était
     invisible sur fond sombre ; .24 la rend lisible partout, comme les cartes. */
  border-color: rgba(224,64,251,.24) !important;
}
[class*="border-white/"] {
  border-color: rgba(255,255,255,.06) !important;
}

/* ── ACCENT ── */
.bg-accent-500,
[class*="bg-accent-500"] {
  background: linear-gradient(135deg, #7c3aed, #e040fb) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  color: #fff !important;
}
.bg-accent-500\/10,
[class*="bg-accent-500/10"] {
  background-color: rgba(224,64,251,.1) !important;
}
.hover\:bg-accent-500\/10:hover {
  background-color: rgba(224,64,251,.1) !important;
}
.hover\:enabled\:bg-accent-500\/50:hover:enabled {
  background: linear-gradient(135deg, rgba(124,58,237,.7), rgba(224,64,251,.7)) !important;
}
.text-accent-500,
[class*="text-accent-500"] {
  color: #e040fb !important;
}
.border-accent-500,
[class*="border-accent-500"] {
  border-color: #e040fb !important;
}
.fill-accent-500,
[class*="fill-accent-500"] {
  fill: #e040fb !important;
}

/* ── TYPOGRAPHY ──
   Ces règles sont la SOURCE DE VÉRITÉ des polices : en !important, elles
   écrasent tout font-family déclaré dans les composants.

   Avant, le ciblage se faisait par balise (h1–h5 → Syne). Problème : les noms
   de produits sont des <h1>/<h3>, donc ils étaient forcés en Syne — une police
   d'affichage large, peu lisible en petit — tandis que le nom de la marque,
   un <span>, se retrouvait en DM Sans. L'inverse de l'intention.

   Le ciblage se fait donc désormais par INTENTION :
   DM Sans partout (contenu, y compris les titres de produits),
   Syne uniquement sur la marque et les titres d'affichage, listés par classe. */
p, span, div, a, button, input, textarea, select, label,
h1, h2, h3, h4, h5, h6, li, td, th {
  font-family: 'DM Sans', sans-serif !important;
}

.mi-brand-name, .mi-footer-name, .mi-maint-logo-name, .mi-maint-title,
.mi-ht, .mi-l1, .mi-l2,
.mi-stit, .mi-ctit, .mi-stv, .mi-wn,
.mi-pp-title, .mi-cart-title,
.mi-fb-title, .mi-fb-sv,
.mi-contact-title, .mi-contact-hero-title,
.mi-widget-title,
header h1.text-2xl {
  font-family: 'Syne', sans-serif !important;
}

/* ══ ESPACE CLIENT ═══════════════════════════════════════════════════════════
   Les pages client sont du Tailwind SellAuth d'origine. Plutôt que réécrire
   1280 lignes de balisage — risqué et difficile à maintenir lors des mises à
   jour SellAuth — on les habille depuis ici, sous la portée .mi-acc posée sur
   la racine de chaque page. Le balisage reste intact.
   Mêmes jetons que le reste du site : carte #0d0820, bordure rose, rayon 18px. */

.mi-acc { padding-block: 0 !important }
.mi-acc > div:first-child { padding-block: 40px !important }

/* — Cartes — */
.mi-acc .bg-card\/75,
.mi-acc [class*="bg-card"] {
  background: #0d0820 !important;
  border: 1px solid rgba(224,64,251,.24) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 26px rgba(224,64,251,.05) !important;
  transition: border-color .3s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s !important;
}
/* Le survol ne concerne que les cartes de contenu, pas la barre latérale
   (qui contient la navigation : la faire bouger gênerait le pointage). */
.mi-acc .lg\:w-3\/4 .bg-card\/75:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(224,64,251,.45) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 26px rgba(224,64,251,.1) !important;
}

/* — Intitulés de carte : micro-label, comme sur la vitrine — */
.mi-acc .text-lg.text-t-primary\/80,
.mi-acc .text-base.text-t-primary\/80 {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #e040fb !important;
}

/* — Valeurs mises en avant — */
.mi-acc .text-2xl {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #f0eaf8 !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
}

/* — Titre de page — */
.mi-acc h3.text-xl {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #f0eaf8 !important;
}

/* — Barre latérale — */
.mi-acc ul a,
.mi-acc ul button {
  display: flex; align-items: center;
  padding: 10px 14px; border-radius: 12px;
  font-size: 14px; font-weight: 500;
  transition: background .2s, color .2s, transform .2s;
}
.mi-acc ul a:hover,
.mi-acc ul button:hover {
  background: rgba(255,255,255,.05);
  color: #f0eaf8 !important;
  transform: translateX(3px);
}
/* Élément actif. !important nécessaire : les utilitaires Tailwind portés par le
   lien (text-t-primary/80 …) l'emportent sinon sur la couleur et le fond. */
.mi-acc ul a.text-accent-500 {
  background: rgba(224,64,251,.12) !important;
  border-left: 2px solid #e040fb !important;
  color: #e040fb !important;
  font-weight: 600 !important;
}
.mi-acc ul a.text-accent-500:hover { transform: none !important }
.mi-acc ul { gap: 4px !important }

/* En-tête de la barre latérale : l'adresse e-mail est une information
   secondaire, et une adresse longue ne doit pas déborder sur trois lignes. */
.mi-acc h3.text-xl + p {
  font-size: 12px !important;
  color: #8a7aa8 !important;
  margin-top: 6px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}

/* — Tableaux — */
.mi-acc table { width: 100% }
.mi-acc th {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  color: #8a7aa8 !important;
  border-bottom: 1px solid rgba(224,64,251,.14) !important;
  padding: 12px 16px !important;
}
.mi-acc td {
  font-size: 13px !important; color: #a998c4 !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  padding: 14px 16px !important;
}
.mi-acc tbody tr { transition: background .2s }
.mi-acc tbody tr:hover { background: rgba(224,64,251,.04) }
.mi-acc tbody tr:last-child td { border-bottom: none !important }

/* — Boutons — */
.mi-acc button[class*="bg-accent"],
.mi-acc a[class*="bg-accent"] {
  background: linear-gradient(135deg,#7c3aed,#e040fb) !important;
  border: none !important; border-radius: 999px !important;
  font-weight: 600 !important; color: #fff !important;
  box-shadow: 0 4px 18px rgba(224,64,251,.28) !important;
  transition: opacity .2s, transform .2s !important;
}
.mi-acc button[class*="bg-accent"]:hover,
.mi-acc a[class*="bg-accent"]:hover { opacity: .9 !important; transform: translateY(-1px) !important }
/* Actions destructives : bien distinctes du reste */
.mi-acc button[class*="bg-red"],
.mi-acc button[class*="text-red"] {
  border-radius: 999px !important;
  border: 1px solid rgba(248,113,113,.3) !important;
  transition: background .2s, border-color .2s !important;
}
.mi-acc button[class*="bg-red"]:hover,
.mi-acc button[class*="text-red"]:hover { border-color: rgba(248,113,113,.6) !important }

/* — Champs — */
.mi-acc input, .mi-acc select, .mi-acc textarea {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  color: #f0eaf8 !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.mi-acc input:focus, .mi-acc select:focus, .mi-acc textarea:focus {
  border-color: rgba(224,64,251,.45) !important;
  box-shadow: 0 0 0 3px rgba(224,64,251,.1) !important;
}

/* — Liens d'accent — */
.mi-acc .text-accent-500:not(ul .text-accent-500) { color: #e040fb !important }

@media (max-width: 640px) {
  .mi-acc th, .mi-acc td { padding: 10px 12px !important }
  .mi-acc .text-2xl { font-size: 22px !important }
}

/* ── LIEN D'ÉVITEMENT ──
   Hors écran par défaut, ramené visuellement dès qu'il reçoit le focus clavier.
   On n'utilise pas display:none, qui le rendrait aussi inatteignable au clavier. */
.mi-skip {
  /* fixed et non absolute : ancré au viewport, il reste atteignable même si le
     focus arrive alors que la page est déjà défilée. */
  position: fixed; left: 8px; top: -60px; z-index: 1000;
  padding: 10px 18px; border-radius: 0 0 12px 12px;
  background: #e040fb; color: #fff !important;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: top .15s ease;
}
.mi-skip:focus { top: 0 }
#mi-contenu:focus { outline: none }

/* ── FOCUS CLAVIER ──
   Sans indicateur visible, la navigation au clavier est impossible à suivre.
   :focus-visible ne s'affiche qu'au clavier, jamais au clic souris. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #e040fb !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

/* ── MOUVEMENT RÉDUIT ──
   Le site utilise des bandeaux et carrousels en animation infinie. Pour les
   personnes sujettes au mal des transports ou aux troubles vestibulaires, ces
   mouvements permanents provoquent des malaises. On respecte le réglage système
   « réduire les animations » sans casser la mise en page. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Les pistes défilantes doivent rester lisibles une fois figées */
  .mi-tt, .mi-ct, .mi-ctr { transform: none !important; width: auto !important; }
  .mi-co { overflow-x: auto !important; }
}

/* ── CHAMPS DE SAISIE : anti-zoom iOS ──
   iOS Safari zoome automatiquement la page dès qu'un champ reçoit le focus si
   sa police fait MOINS de 16px — et il ne dézoome pas ensuite, d'où la mise en
   page décalée après une recherche. 16px supprime le déclencheur.

   À ne PAS "corriger" avec maximum-scale=1 dans le meta viewport : ça
   supprimerait aussi le zoom manuel, au détriment de l'accessibilité.

   Ciblé sur les appareils tactiles pour ne pas toucher la typo du desktop. */
@media (pointer: coarse), (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .choices__input {
    font-size: 16px !important;
  }
}

/* ── NAVBAR ── */
header.component {
  background: transparent !important;
  box-shadow: none !important;
}
header.component > div:first-child {
  background: rgba(13,8,25,.85) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(224,64,251,.12) !important;
  border-radius: 14px !important;
}
header h1.text-2xl {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: #f0eaf8 !important;
  letter-spacing: -.02em !important;
}
nav a[class*="rounded-lg"],
nav button[class*="rounded-lg"] {
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all .2s !important;
}
nav a.bg-accent-500\/10,
nav button.bg-accent-500\/10 {
  background: rgba(224,64,251,.12) !important;
  color: #e040fb !important;
  border-color: rgba(224,64,251,.25) !important;
}

/* ── BUTTONS (global) ── */
button[class*="bg-accent-500"],
a[class*="bg-accent-500"] {
  background: linear-gradient(135deg, #7c3aed, #e040fb) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #fff !important;
}
button[class*="bg-accent-500"]:hover,
a[class*="bg-accent-500"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(224,64,251,.4) !important;
  opacity: .92 !important;
}
button[class*="border-accent-500"],
a[class*="border-accent-500"] {
  border-radius: 999px !important;
}

/* ── INPUTS & FORMS ── */
input[class*="bg-white/5"],
textarea[class*="bg-white/5"],
select[class*="bg-white/5"] {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(224,64,251,.15) !important;
  border-radius: 10px !important;
  color: #f0eaf8 !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #e040fb !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(224,64,251,.1) !important;
}

/* ── CARDS & GENERAL ── */
.bg-card.rounded-lg,
.bg-card.border {
  background: #0f0820 !important;
  border: 1px solid rgba(224,64,251,.12) !important;
  border-radius: 16px !important;
}

/* ── SIDEBAR ── */
aside {
  background: rgba(13,8,25,.9) !important;
  backdrop-filter: blur(20px) !important;
  border-right: 1px solid rgba(224,64,251,.1) !important;
}

/* ── MODALS ── */
[class*="bg-background"].rounded-lg.border,
[class*="rounded-lg"][class*="border"][class*="bg-background"] {
  background: #0f0820 !important;
  border-color: rgba(224,64,251,.15) !important;
  border-radius: 20px !important;
}
.fixed.inset-0.bg-black\/75,
.fixed.inset-0.bg-black\/80 {
  background: rgba(0,0,0,.75) !important;
  backdrop-filter: blur(4px) !important;
}

/* ── ANNOUNCEMENT BAR ── */
.announcement .bg-accent-500 {
  background: rgba(224,64,251,.1) !important;
  border-bottom: 1px solid rgba(224,64,251,.15) !important;
}

/* ── PAGINATION ── */
[class*="pagination"] a,
[class*="pagination"] button,
[class*="pagination"] span {
  border-radius: 8px !important;
  transition: all .2s !important;
}

/* ── LOADER ── */
.milr{position:absolute;inset:0;border-radius:50%;border:2.5px solid transparent;animation:milSpin 1s linear infinite}
.milr1{border-top-color:#e040fb}
.milr2{inset:10px;border-top-color:rgba(124,58,237,.5);animation-duration:1.5s;animation-direction:reverse}
@keyframes milSpin{to{transform:rotate(360deg)}}