/* Catamaran Zéphyr — socle
   Reset minimal, typographie, rythme vertical. Rien de décoratif ici : les
   composants vivent dans components.css, la mise en page dans layout.css. */

/* ── Reset ────────────────────────────────────────────────────────────────
   Court par choix. Un reset qui remet tout à zéro oblige à tout redéclarer ;
   celui-ci ne corrige que ce qui gêne réellement. */

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

html {
  -webkit-text-size-adjust: 100%;   /* iOS grossit le texte en paysage sans ça */
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--cz-paper);
  color: var(--cz-ink);
  font: var(--cz-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

/* Dans une grille, une image se dimensionne sur sa hauteur intrinsèque et
   déborde du conteneur. C'est le défaut qui casse les galeries à hauteur fixe
   du handoff — la contrainte est ici une fois pour toutes. */
img { min-height: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

/* ── Typographie ──────────────────────────────────────────────────────────
   L'échelle est celle de la charte, en desktop 1440. `clamp()` porte la
   descente vers le mobile : une seule déclaration, pas de point de rupture à
   maintenir en double. */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--cz-display);
  font-weight: 300;
  color: var(--cz-ink);
}

h1 {
  font-size: clamp(40px, 6.4vw, 82px);
  line-height: 1.02;
  letter-spacing: var(--cz-ls-h1);
}

h2 {
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.08;
  letter-spacing: var(--cz-ls-h2);
}

h3 {
  font-size: clamp(26px, 2.9vw, 36px);
  line-height: 1.12;
  letter-spacing: -.6px;
}

h4 {
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.2;
}

/* L'italique de titre est en laiton : c'est le second membre de phrase des
   heros, jamais un mot isolé au milieu d'une ligne. */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--cz-brass);
}

p { margin: 0 0 1.2em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--cz-dur) var(--cz-ease);
}

/* Soulignement au survol uniquement — règle de la charte. Le focus, lui, est
   toujours visible : c'est une exigence d'accessibilité, pas un effet. */
a:hover { text-decoration: underline; text-underline-offset: .22em; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cz-brass);
  outline-offset: 3px;
}

strong { font-weight: 500; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.1em; }
li { margin-bottom: .5em; }

blockquote {
  margin: 0;
  font: var(--cz-quote);
  color: var(--cz-ink);
}

/* ── Familles utilitaires ────────────────────────────────────────────────
   Trois seulement. Au-delà, ce n'est plus un socle, c'est un framework. */

.cz-eyebrow {
  font: var(--cz-eyebrow);
  letter-spacing: var(--cz-ls-eyebrow);
  text-transform: uppercase;
  color: var(--cz-brass);
  margin: 0 0 14px;
}

.cz-mono {
  font: var(--cz-coords);
  letter-spacing: var(--cz-ls-coords);
  color: var(--cz-brass);
}

.cz-lede {
  font: 300 clamp(14px, 1.1vw, 15px)/1.85 var(--cz-text-font);
  color: var(--cz-text);
  max-width: 600px;
}

/* ── Accessibilité ───────────────────────────────────────────────────────── */

.cz-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le lien d'évitement doit être atteignable au clavier et invisible autrement.
   `display: none` le retirerait de l'ordre de tabulation : il serait inutile. */
.cz-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cz-ink);
  color: var(--cz-paper);
  padding: 14px 22px;
  font: var(--cz-button);
  letter-spacing: var(--cz-ls-button);
  text-transform: uppercase;
}

.cz-skip:focus { left: 0; }

/* ── Sélection ───────────────────────────────────────────────────────────── */

::selection { background: var(--cz-linen); color: var(--cz-ink); }