:root {
  /* ── Couleurs ── */
  --color-bg:        #FFFDF7; /* crème — fond général, header */
  --color-blue:      #366CFF; /* bleu principal — liens, boutons, icônes */
  --color-blue-dark: #1f4fd4; /* bleu foncé — hover CTA mobile */
  --color-footer-bg: #F5F5F5; /* gris clair — fond footer */
  --color-white:     #FFFFFF; /* blanc — bloc contact footer */
  --color-black:     #000000; /* noir — texte adresse */
  --color-muted:     #999999; /* gris — bandeau légal */
  --color-border:    #E0E0E0; /* gris clair — séparateur bandeau légal */

  /* ── Polices ── */
  --font-heading:  'Fredoka', sans-serif;    /* titres, nav */
  --font-body:     'Martian Mono', monospace; /* corps de texte */
  --font-display:  'rousse', sans-serif;     /* CTA, éléments décoratifs */

  /* ── Tailles de texte ── */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   21px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  42px;
  --text-5xl:  50px;

  /* ── Espacements / Layout ── */
  --container-width: 1200px;
  --container-px:    32px;
  --container-px-mobile: 20px;

  /* ── Bordures ── */
  --radius-sm: 9px;
  --radius-md: 11px;
  --radius-lg: 14px;

  /* ── Z-index ── */
  --z-header: 1000;
  --z-cta:    999;

  /* ── Breakpoints (référence doc — non utilisables en CSS natif) ── */
  /* --bp-mobile: 767px */
}

/* ── Reset minimal ── */

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

html, body {
  overflow-x: hidden;
}

/* ── Typographie par défaut ── */

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 200;
  line-height: 1.7;
  color: var(--color-black);
  background-color: var(--color-bg);
  margin: 0;
}

h1 {
  font-family: var(--font-heading);
  /* Fluide : 28px en mobile étroit → 50px en desktop */
  font-size: clamp(28px, 6vw, 50px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-blue);
  text-transform: uppercase !important;
  margin: 0 0 0.5em;
  overflow-wrap: break-word;
  hyphens: auto;
}

h2 {
  font-family: var(--font-heading);
  /* Fluide : 26px en mobile étroit → 43px en desktop */
  font-size: clamp(26px, 5vw, 43px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-blue);
  text-transform: uppercase !important;
  margin: 0 0 0.5em;
  overflow-wrap: break-word;
  hyphens: auto;
}

h3 {
  font-family: var(--font-heading);
  /* Fluide : 18px → 24px */
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-blue);
  text-transform: uppercase !important;
  margin: 0 0 0.5em;
  overflow-wrap: break-word;
  hyphens: auto;
}

p {
  margin: 0 0 1em;
  color: var(--color-blue);
}

a {
  color: var(--color-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

strong {
  font-weight: 600;
}

@media (max-width: 767px) {
  h2 {
    text-align: center !important;
  }
}