/**
 * Carat — base.css
 * Reset doux, typographie éditoriale (serif display capitales espacées + sans léger),
 * éléments de formulaire natifs. Aucune couleur en dur : tout vient des tokens.
 */

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

html {
  font-size: 62.5%;            /* 1rem = 10px — cf. convention sws-listing */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@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;
  }
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  color: var(--color-text);
}

/* Titres de section Carat : serif, capitales, très espacés */
h1 { font-size: 4.4rem; letter-spacing: 0.02em; }
h2 { font-size: 3.4rem; letter-spacing: 0.02em; }
h3 { font-size: 2.2rem; }
h4 { font-size: 1.8rem; }

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

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

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

small { font-size: var(--font-size-xs); }
strong, b { font-weight: var(--font-weight-medium); }

/* ── Formulaires ─────────────────────────────────────────────── */
input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"], input[type="date"],
select, textarea {
  width: 100%;
  padding: 1.3rem 1.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-base);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  appearance: none;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

/* Focus visible clavier — accessibilité AA */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230E2E44' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  padding-inline-end: 4rem;
}
[dir="rtl"] select { background-position: left 1.6rem center; }

textarea { min-height: 14rem; resize: vertical; }

label { display: block; margin-bottom: var(--space-2); font-size: var(--font-size-sm); }

button { cursor: pointer; border: 0; background: none; padding: 0; }

::placeholder { color: var(--color-text-muted); opacity: 1; }

/* ── Lien d'évitement ─────────────────────────────────────────── */
.sws-skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.sws-skip-link:focus { inset-inline-start: 0; }

/* ── Sélection ────────────────────────────────────────────────── */
::selection { background: var(--color-accent); color: var(--color-on-accent); }