/* ── BASE — reset, typography, layout, utilities ─────────────── */
/*
   Système de breakpoints — 4 valeurs autorisées uniquement :
   ┌────────────────────────────────────────────────────────────────────┐
   │  XS   max-width: 480px   petits mobiles         (0px → 480px)     │
   │  SM   max-width: 720px   mobile / grand tél.    (481px → 720px)   │
   │  MD   max-width: 1024px  tablette / petit laptop (721px → 1024px) │
   │  LG   max-width: 1440px  desktop                (1025px → 1440px) │
   │  XL   min-width: 1440px  grande fenêtre          (1440px → ∞)     │
   └────────────────────────────────────────────────────────────────────┘
   Règle : ne jamais utiliser d'autres valeurs de breakpoint.
*/

@layer base {

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--mj-ink);
  background: var(--mj-cream);
  transition: background-color 300ms var(--easing), color 300ms var(--easing);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 300; }
p { margin: 0; }

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
.display {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--mj-aubergine);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.display em {
  font-family: var(--font-display-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.display-xxl { font-size: clamp(32px, 5vw, 56px); line-height: 1.3; }
.display-xl { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.4; }
.display-l  { font-size: clamp(26px, 3vw, 36px); line-height: 1.4; }
.display-m  { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.3; }
.display-s  { font-size: clamp(20px, 2vw, 24px); line-height: 1.35; }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mj-graphite);
}
.eyebrow--sage { color: var(--mj-graphite); }
.eyebrow--mute { color: var(--mj-mute); }

.wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mj-ink);
}

.lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--mj-ink);
}

} /* end @layer base */

/* ── LAYOUT ───────────────────────────────────────────────── */
@layer layout {

.container {
  width: 100%;
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 1024px) { .container { padding: 0 24px; } }
@media (max-width: 720px) { .container { padding: 0 20px; } }
@media (max-width: 480px) { .container { padding: 0 16px; } }

.cream-band {
  padding-top: 0;
}
/* White rounded plate that overlaps the cream band — pulled up via negative margin-top */
.content-plate {
  border-radius: 48px;
  margin-left: clamp(16px, 3vw, 48px);
  margin-right: clamp(16px, 3vw, 48px);
  margin-bottom: clamp(64px, 9vw, 48px);
  position: relative;
  z-index: 1;
 
}

.content-plate.home {
  background: var(--mj-paper);
}
@media (max-width: 720px) {
  .content-plate { margin-left: 12px; margin-right: 12px; margin-bottom:48px; border-radius: 40px; }
}
@media (max-width: 480px) {
  .content-plate { margin-left: 8px; margin-right: 8px; border-radius: 28px; padding: 0px; }
}

@media (min-width: 1440px) {
  .container { max-width: 1400px; padding: 0 32px; }
}

} /* end @layer layout */

/* ── UTILITIES ────────────────────────────────────────────── */
@layer utilities {

.divider { height: 1px; background: var(--mj-divider); width: 100%; }
.hidden { display: none; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 16px; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--mj-aubergine);
  outline-offset: 2px;
  border-radius: 6px;
}

} /* end @layer utilities */

/* Tout le theming est dans theme.css */