/* =============================================================
   base.css — Reset moderne, typo, layout grid de base
   Charge après tokens.css. Pas de composants ici.
   ============================================================= */

/* ----- Self-hosted fonts -----
   Les fichiers .woff2 doivent être placés dans assets/fonts/<famille>/
   Si absents, fallback vers les system fonts définies dans tokens.css.
   ------------------------------------------------------------- */

/* Cormorant Garamond — display, weight 300-700, normal + italic */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/cormorant-garamond/CormorantGaramond-Light.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/cormorant-garamond/CormorantGaramond-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-garamond/CormorantGaramond-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/cormorant-garamond/CormorantGaramond-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/cormorant-garamond/CormorantGaramond-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/cormorant-garamond/CormorantGaramond-LightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/cormorant-garamond/CormorantGaramond-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-garamond/CormorantGaramond-MediumItalic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/cormorant-garamond/CormorantGaramond-SemiBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/cormorant-garamond/CormorantGaramond-BoldItalic.woff2') format('woff2'); }

/* Inter — body, weight 300-700 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/inter/Inter-Light.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter/Inter-Bold.woff2') format('woff2'); }

/* DM Mono — labels & captions, weight 400-500 */
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dm-mono/DMMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/dm-mono/DMMono-Medium.woff2') format('woff2'); }

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  font-weight: 300;
  line-height: var(--lh-body);
  min-height: 100vh;
  /* Bruit subtil en background pour casser le plat numérique */
  background-image:
    radial-gradient(ellipse at top, rgba(91, 58, 138, 0.08), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(217, 180, 113, 0.04), transparent 50%);
}

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

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

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing);
}

a:hover {
  color: var(--color-gold);
}

ul, ol {
  list-style: none;
  padding: 0;
}

/* Focus accessibilité */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--lh-display);
  color: var(--color-paper);
}

h1 {
  font-size: var(--fs-display-xl);
  letter-spacing: var(--ls-display-tight);
  line-height: var(--lh-display-tight);
}
h2 { font-size: var(--fs-display-l); }
h3 { font-size: var(--fs-display-m); }
h4 { font-size: var(--fs-display-s); }

em, i {
  color: var(--color-gold);
  font-style: italic;
}

p {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--color-paper);
}

p + p {
  margin-top: 1em;
}

/* ----- Helpers typo ----- */

.kicker,
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 400;
}

.dek {
  font-size: var(--fs-body-l);
  line-height: 1.55;
  color: var(--color-mute);
  font-weight: 300;
}

.italic-gold {
  font-style: italic;
  color: var(--color-gold);
  font-family: var(--font-display);
}

/* ----- Layout containers ----- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ----- Sections ----- */

section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

@media (max-width: 768px) {
  section {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
}

/* ----- Séparateur fin or ----- */

.divider {
  border: 0;
  height: 1px;
  background: var(--color-line);
  margin: var(--space-5) 0;
}

/* ----- Skip link a11y ----- */

.skip-to-main {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-gold);
  color: var(--color-ink);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  z-index: var(--z-toast);
}
.skip-to-main:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* Filet de sécurité mobile : aucun élément ne doit faire glisser la page sur le côté.
   clip (et non hidden) pour ne pas casser l'en-tête collant (position: sticky). */
html { overflow-x: clip; }