/* ==========================================================================
   MSD SARL — Socle global du thème enfant (tokens, typographie, boutons,
   accessibilité). Valeurs issues du prototype validé (prototype/).
   Ne contient aucun style de page : les pages seront construites avec
   Elementor Free en s'appuyant sur ces tokens.
   ========================================================================== */

:root {
  /* Palette officielle */
  --msd-forest-black: #0B0F0D;
  --msd-deep-forest: #16352A;
  --msd-warm-ivory: #F3F0E8;
  --msd-stone: #B8B4A9;
  --msd-muted-gold: #A88A4A;

  /* Dérivés utilisés par le prototype */
  --msd-card: #F8F6F0;
  --msd-ivory-deep: #E9E5DA;
  --msd-ink-soft: #2B302D;
  --msd-text-on-dark: #E4E0D6;
  --msd-rule-light: rgba(184, 180, 169, .22);

  /* Typographies (polices locales à fournir, voir assets/fonts/) */
  --msd-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --msd-font-sans: "Geist", "Segoe UI", Arial, sans-serif;
  --msd-font-mono: "Geist Mono", ui-monospace, Consolas, monospace;

  /* Mise en page */
  --msd-container: 1330px;
  --msd-gutter: clamp(16px, 3.8vw, 55px);
  --msd-section-y: clamp(44px, 4.6vw, 80px);
  --msd-gap: clamp(16px, 1.8vw, 28px);
}

/* ---------- Base ---------- */

body {
  background: var(--msd-warm-ivory);
  color: var(--msd-ink-soft);
  font-family: var(--msd-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

.msd-container {
  width: 100%;
  max-width: calc(var(--msd-container) + 2 * var(--msd-gutter));
  margin-inline: auto;
  padding-inline: var(--msd-gutter);
}

.msd-section { padding-block: var(--msd-section-y); }

/* ---------- Typographie ---------- */

h1, h2, h3, h4 {
  font-family: var(--msd-font-serif);
  font-weight: 400;
  line-height: 1.05;
  color: var(--msd-forest-black);
}
h1 { font-size: clamp(42px, 4.6vw, 74px); }
h2 { font-size: clamp(32px, 3.2vw, 50px); }
h3 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.12; }
h1 em, h2 em { font-style: italic; color: var(--msd-muted-gold); }

.msd-eyebrow {
  font-family: var(--msd-font-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--msd-muted-gold);
}

/* ---------- Boutons ---------- */

.msd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 46px; padding: 0 24px;
  border: 1.5px solid var(--msd-muted-gold); border-radius: 2px;
  font-family: var(--msd-font-sans); font-weight: 500; font-size: 15px;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.msd-btn--gold { background: var(--msd-muted-gold); color: var(--msd-forest-black); }
.msd-btn--gold:hover { background: #BFA062; }
.msd-btn--outline { background: transparent; color: var(--msd-muted-gold); }
.msd-btn--outline:hover { background: rgba(168, 138, 74, .16); }

/* ---------- Accessibilité ---------- */

/* Anneau de focus or du prototype. Spécificité volontairement supérieure à celle du reset
   de Hello Elementor (a:focus-visible { outline: 2px solid #000; box-shadow: 0 0 0 4px #fff }),
   qui l'écrasait. Les styles de focus propres à un composant (champs de formulaire) restent prioritaires. */
html :is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--msd-muted-gold);
  outline-offset: 3px;
  box-shadow: none;
}

.msd-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

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

/* ---------- Responsive (points de rupture du prototype) ---------- */
/* ≥ 1280 : desktop · 1024–1279 : desktop compact · 768–1023 : tablette · < 768 : mobile */

@media (max-width: 767px) {
  .msd-btn { width: 100%; }
}