/**
 * Bijoux — base.css
 * Reset léger, typographie, éléments de base, conteneur, rythme vertical.
 * 100% piloté par les design tokens (aucune valeur en dur). Mobile-first, WCAG AA.
 */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-base);
}

::selection { background: var(--color-accent); color: var(--color-on-accent); }

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

a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-base), opacity var(--transition-base);
}
a:hover { color: var(--color-accent-ink); }

/* --- Typographie : serif d'affichage (Cormorant) + sans (Jost) --- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  letter-spacing: 0.005em;
}
h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); }      /* ~40 → 64px */
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }   /* ~30 → 44px */
h3 { font-size: clamp(1.4rem, 2.2vw, 1.875rem); }  /* ~22 → 30px */
h4 { font-size: 1.375rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--font-weight-medium); }
small { font-size: var(--font-size-sm); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

ul, ol { margin: 0 0 var(--space-4); padding-inline-start: var(--space-5); }

/* Number rendering for prices / tables */
.tabular, .sws-price, table td, table th { font-variant-numeric: tabular-nums; }

/* --- Conteneur & sections --- */
.sws-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, var(--container-padding));
}
.sws-container--narrow { max-width: 760px; }
.sws-container--wide { max-width: 1440px; }

.sws-section { padding-block: clamp(48px, 8vw, var(--section-spacing)); }
.sws-section--tight { padding-block: clamp(32px, 5vw, 56px); }
.sws-section--alt { background: var(--color-surface-alt); }

/* Section header (eyebrow + title + intro), centré premium */
.sws-section__head { max-width: 640px; margin: 0 auto var(--space-7); text-align: center; }
.sws-section__head--start { margin-inline: 0; text-align: start; }
.sws-section__title { margin: 0; }
.sws-section__intro { margin: var(--space-3) 0 0; color: var(--color-text-muted); }

/* Eyebrow / kicker */
.sws-eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-3);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

/* Filet accent décoratif sous les titres de section */
.sws-rule {
  width: 48px; height: 1px; margin: var(--space-4) auto 0;
  background: var(--color-accent);
}
.sws-section__head--start .sws-rule { margin-inline: 0; }

/* --- Accessibilité : focus visible & skip link --- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent-ink);
  outline-offset: 2px;
}
.sws-skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--space-3) var(--space-4);
}
.sws-skip-link:focus { left: var(--space-3); top: var(--space-3); }

.sws-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

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