*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

img, svg, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 var(--space-3); color: var(--text-muted); }

button, input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
}

button {
  cursor: pointer;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--primary);
  color: #fff;
}

/* Scrollbar sombre, coherente avec le theme */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ==================== Animations d'apparition au scroll ====================
   Portees par "html.reveal-ready", classe ajoutee UNIQUEMENT par animations.js
   une fois l'observateur reellement pret (pas juste "le JS existe"). Si le
   script ne se charge pas, plante, ou que l'observateur echoue pour une
   raison quelconque, cette classe n'apparait jamais et le contenu reste
   visible par defaut - aucun risque de section vide. */
html.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-snap), transform var(--dur-slow) var(--ease-snap);
  will-change: opacity, transform;
}
html.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
html.reveal-ready [data-reveal="scale"] { transform: translateY(0) scale(0.92); }
html.reveal-ready [data-reveal="scale"].is-visible { transform: translateY(0) scale(1); }
html.reveal-ready [data-reveal="left"] { transform: translateX(-32px); }
html.reveal-ready [data-reveal="left"].is-visible { transform: translateX(0); }
html.reveal-ready [data-reveal="right"] { transform: translateX(32px); }
html.reveal-ready [data-reveal="right"].is-visible { transform: translateX(0); }

/* Decalage en cascade pour les grilles (poses via JS sur les enfants directs) */
html.reveal-ready [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-med) var(--ease-snap), transform var(--dur-med) var(--ease-snap);
}
html.reveal-ready [data-reveal-group].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
html.reveal-ready [data-reveal-group] > *:nth-child(1) { transition-delay: 0.03s; }
html.reveal-ready [data-reveal-group] > *:nth-child(2) { transition-delay: 0.08s; }
html.reveal-ready [data-reveal-group] > *:nth-child(3) { transition-delay: 0.13s; }
html.reveal-ready [data-reveal-group] > *:nth-child(4) { transition-delay: 0.18s; }
html.reveal-ready [data-reveal-group] > *:nth-child(5) { transition-delay: 0.23s; }
html.reveal-ready [data-reveal-group] > *:nth-child(6) { transition-delay: 0.28s; }
html.reveal-ready [data-reveal-group] > *:nth-child(7) { transition-delay: 0.33s; }
html.reveal-ready [data-reveal-group] > *:nth-child(8) { transition-delay: 0.38s; }
html.reveal-ready [data-reveal-group] > *:nth-child(n+9) { transition-delay: 0.42s; }

@media (max-width: 768px) {
  .container { padding: 0 var(--space-5); }
}
@media (max-width: 420px) {
  .container { padding: 0 var(--space-4); }
}

/* Cibles tactiles confortables sur mobile (accessibilite + "pro") */
@media (max-width: 640px) {
  .btn, .nav-icon-btn, .qty-stepper button, .pagination a, .pagination span, .action-icons a, .action-icons button {
    min-height: 40px;
  }
  .pca-btn, .quickview-close, .gallery-zoom-btn {
    min-width: 40px;
    min-height: 40px;
  }
  .nav-dropdown-toggle {
    width: 32px;
    height: 32px;
  }
  .account-dropdown-item {
    padding: var(--space-3);
  }
}

/* ==================== Accessibilite ==================== */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -60px;
  z-index: 2000;
  background: var(--primary-gradient);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.9rem;
  transition: top var(--dur-fast) ease;
}
.skip-link:focus { top: var(--space-3); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary-2);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}