/* =========================================================================
   BourgPoket — UI Enhancement Layer (v1)
   Additive polish only. No layout/structure changes — purely visual & UX.
   Theme : noir #050505 · or #D4AF37 · Montserrat · esthétique luxe.
   Chargé APRÈS index-*.css. Réversible (supprimer ce fichier + son <link>).
   ========================================================================= */

:root {
  --bp-gold: #d4af37;
  --bp-gold-soft: rgba(212, 175, 55, 0.55);
  --bp-gold-faint: rgba(212, 175, 55, 0.14);
  --bp-ink: #050505;
  --bp-muted: #7a756b;
  --bp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- 1. Rendu typographique premium ---------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  letter-spacing: 0.01em;
}
/* Chiffres alignés pour prix, compteurs et tableaux */
input[type="number"],
[class*="price"],
#bp-cd-d, #bp-cd-h, #bp-cd-m, #bp-cd-s {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- 2. États de focus accessibles & raccord au thème ---------------- */
/* Supprime le contour bleu navigateur au clic, garde un anneau or au clavier */
:focus:not(:focus-visible) { outline: none; }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bp-gold);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px var(--bp-gold-faint);
}

/* ---- 3. Micro-interactions homogènes (sans reflow) ------------------- */
/* Transitions uniquement sur des propriétés non géométriques :
   pas de déplacement de mise en page, juste de la matière. */
a,
button,
[role="button"],
input,
select,
textarea,
label,
summary {
  transition:
    color 0.25s var(--bp-ease),
    background-color 0.25s var(--bp-ease),
    border-color 0.25s var(--bp-ease),
    box-shadow 0.25s var(--bp-ease),
    opacity 0.25s var(--bp-ease),
    filter 0.25s var(--bp-ease);
}
/* Retour tactile discret à l'appui sur les boutons */
button:active:not(:disabled),
[role="button"]:active {
  filter: brightness(0.94);
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ---- 4. Champs de saisie soignés ------------------------------------- */
input,
textarea,
select {
  caret-color: var(--bp-gold);
}
input::placeholder,
textarea::placeholder {
  color: var(--bp-muted);
  opacity: 0.8;
}
/* Auto-fill : conserve le fond sombre au lieu du bleu/blanc Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #0d0d0d inset;
  caret-color: var(--bp-gold);
  transition: background-color 9999s ease-in-out 0s;
}

/* ---- 5. Scrollbar raffinée (WebKit + Firefox) ------------------------ */
* { scrollbar-width: thin; scrollbar-color: #2a2a2a var(--bp-ink); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bp-ink); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  border-radius: 8px;
  border: 2px solid var(--bp-ink);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--bp-gold), #b8932c);
}

/* ---- 6. Médias : rendu propre & non sélectionnables ------------------ */
img, video {
  image-rendering: auto;
  -webkit-user-drag: none;
  user-select: none;
}
/* Atténue le “flash” des images avant chargement complet */
img { backface-visibility: hidden; }

/* ---- 8. CTA — boutons .luxury-button --------------------------------- */
/* Existant : bordure or translucide → remplissage or plein + texte noir au
   survol (transition all .6s). On ajoute de la profondeur sans rien déplacer. */
.luxury-button {
  isolation: isolate;             /* le balayage reste sous le texte */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
/* Balayage lumineux diagonal qui traverse le bouton au survol (effet luxe).
   Translucide → le libellé reste parfaitement lisible. overflow:hidden déjà posé. */
.luxury-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -160%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: skewX(-22deg);
  transition: left 0.7s var(--bp-ease);
  pointer-events: none;
  z-index: 1;
}
.luxury-button:hover::before { left: 160%; }
/* Lévitation + halo or au survol (transform/box-shadow : aucun reflow) */
.luxury-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -10px rgba(212, 175, 55, 0.55);
}
.luxury-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px -8px rgba(212, 175, 55, 0.5);
  filter: brightness(0.96);
}
/* Bouton désactivé : pas de halo ni de balayage */
.luxury-button:disabled,
.luxury-button[aria-disabled="true"] {
  transform: none;
  box-shadow: none;
  opacity: 0.5;
  cursor: not-allowed;
}
.luxury-button:disabled::before { display: none; }

/* ---- 9. Cartes produits — .luxury-card / .luxury-card-hover ---------- */
/* Existant :hover → bordure or 40% + halo 0 0 25px. On enrichit la profondeur,
   on ajoute une lévitation et un zoom doux de la visuelle (clippée par
   overflow-hidden de la carte). Aucune modification de taille ni de grille. */
.luxury-card-hover {
  will-change: transform;
}
.luxury-card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow:
    0 0 26px rgba(212, 175, 55, 0.22),
    0 22px 48px -22px rgba(0, 0, 0, 0.85);
}
/* Zoom maîtrisé de la visuelle dans son cadre carré */
.luxury-card .aspect-square img,
.luxury-card .aspect-square video,
.luxury-card-hover .aspect-square img,
.luxury-card-hover .aspect-square video {
  transition: transform 0.7s var(--bp-ease);
  will-change: transform;
}
.luxury-card-hover:hover .aspect-square img,
.luxury-card-hover:hover .aspect-square video {
  transform: scale(1.05);
}

/* ---- 10. Navigation — barre sticky + liens -------------------------- */
/* Barre principale : bg-luxury-black/95 + backdrop-blur-md + border-b or.
   On ajoute une ombre de décollement (séparation au scroll) et on ravive
   discrètement le liseré or. Aucune géométrie modifiée. */
.bg-luxury-black\/95.backdrop-blur-md {
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.95);
  border-bottom-color: rgba(212, 175, 55, 0.18);
}
/* Soulignement or animé sur les liens texte de la nav (exclut les icônes) */
.bg-luxury-black\/95.backdrop-blur-md a:not(:has(svg)):not(:has(img)) {
  position: relative;
}
.bg-luxury-black\/95.backdrop-blur-md a:not(:has(svg)):not(:has(img))::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bp-gold), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s var(--bp-ease);
  pointer-events: none;
}
.bg-luxury-black\/95.backdrop-blur-md a:not(:has(svg)):not(:has(img)):hover::after,
.bg-luxury-black\/95.backdrop-blur-md a[aria-current]:not(:has(svg)):not(:has(img))::after {
  transform: scaleX(1);
}
/* Boutons icônes ronds (panier, compte, menu, scroll) : halo or au survol */
.rounded-full.bg-luxury-black\/70:hover {
  box-shadow: 0 0 18px -4px rgba(212, 175, 55, 0.45);
}

/* ---- 11. Panier — drawers (aside) & page checkout ------------------- */
/* Les 3 drawers (CartDrawer / WishlistDrawer / MobileMenu) sont des <aside>
   en position fixe qui glissent par transform. On les fait « flotter »
   au-dessus de la page assombrie : ombre profonde + fin liseré or. */
aside {
  box-shadow:
    -24px 0 60px -28px rgba(0, 0, 0, 0.85),
    24px 0 60px -28px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(212, 175, 55, 0.06);
}
/* Lignes/éléments cliquables dans un drawer : retour visuel doux */
aside a:hover,
aside button:not(.luxury-button):not(:disabled):hover {
  color: var(--bp-gold);
}
/* En-tête de drawer (border-b luxury-gold/15) : liseré légèrement ravivé */
aside .border-luxury-gold\/15 {
  border-color: rgba(212, 175, 55, 0.22);
}
/* Inputs « soulignés » du panier/checkout : on évite le double cadre du
   focus global et on garde l'esthétique trait-de-soulignement maison. */
input.border-b:focus-visible,
textarea.border-b:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 0 var(--bp-gold);
}

/* ---- 7. Accessibilité : respect du mouvement réduit ------------------ */
/* Si l'utilisateur le demande, on calme les animations décoratives
   sans casser l'affichage (claw machine, pokémon, marquee, loaders…). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}