/* ============================================================================
   Occasional Chef - base
   Reset moderne, typographie, prose (corps article/recette), liens, focus.
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* --- Titres --------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--ink);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); font-weight: 700; }

p { text-wrap: pretty; }

/* --- Liens ---------------------------------------------------------------- */
a {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent);
  text-underline-offset: 0.18em;
  transition: color var(--transition);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

/* --- Focus visible (a11y) ------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Lien d'evitement clavier */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  background: var(--ink);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  z-index: 200;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-3); color: #fff; }

/* --- Conteneurs / utilitaires de mise en page ----------------------------- */
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2rem, var(--container-narrow)); margin-inline: auto; }
.container--wide { width: min(100% - 2rem, var(--container-wide)); margin-inline: auto; }

.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-6); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--terracotta);
}

.text-soft { color: var(--ink-soft); }
.text-faint { color: var(--ink-faint); }
.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;
}

main { flex: 1 0 auto; }

/* --- Prose : corps des articles et recettes ------------------------------- */
.prose {
  max-width: var(--measure);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--ink);
}
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-size: var(--step-1);
  margin-top: 1.8em;
  padding-top: 0.2em;
}
.prose h3 { font-size: var(--step-0); font-weight: 700; margin-top: 1.4em; }
.prose p { color: var(--ink); }
.prose a { font-weight: 500; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote {
  border-left: 3px solid var(--terracotta);
  padding-left: var(--space-4);
  font-style: italic;
  color: var(--ink-soft);
}
.prose img { border-radius: var(--radius-lg); margin-block: var(--space-5); }
.prose strong { font-weight: 650; }
.prose code {
  background: var(--surface-sunk);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  font-size: 0.92em;
}

/* --- Reglages divers ------------------------------------------------------ */
hr {
  border: none;
  border-top: 1px solid var(--line);
  margin-block: var(--space-6);
}

::selection { background: var(--mustard-tint); color: var(--ink); }

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