/* ============================================================
   LE PÉRIMÈTRE : feuille de style commune
   ============================================================ */

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

:root {
  --navy:        #16283f;
  --navy-deep:   #101d2e;
  --navy-line:   #2c3f57;
  --steel:       #8ea6c4;
  --steel-dim:   #6b8099;
  --ink:         #1c242e;
  --ink-mid:     #414b57;
  --ink-light:   #79838f;
  --paper:       #f5f4ef;
  --paper-warm:  #efeee7;
  --card:        #fcfbf7;
  --rule:        #d8d7cf;
  --rule-soft:   #e6e5dd;
  --red:         #b3392e;
  --red-dark:    #8f2c23;
}

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------------- HEADER ---------------- */
header {
  background: var(--navy-deep);
  border-bottom: 2px solid var(--red);
  padding: 0 clamp(20px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.header-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.header-brand img { width: 34px; height: 34px; display: block; }
.header-logo {
  font-family: 'Spectral', Georgia, serif;
  font-size: 1rem; font-weight: 700; letter-spacing: .085em;
  color: #fff; text-transform: uppercase; white-space: nowrap;
}
.header-nav { display: flex; align-items: center; gap: 26px; }
.header-nav a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel);
  text-decoration: none; transition: color .2s;
}
.header-nav a:hover, .header-nav a.active { color: #fff; }

a:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }

/* ---------------- LABELS ---------------- */
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .66rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red);
}
.section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-light);
}
.section-label::before { content: '// '; color: var(--red); }

/* ---------------- FOOTER ---------------- */
footer {
  background: var(--navy-deep);
  border-top: 1px solid var(--navy-line);
  padding: 26px clamp(20px, 5vw, 64px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 11px; }
.footer-brand img { width: 26px; height: 26px; }
.footer-logo {
  font-family: 'Spectral', Georgia, serif; font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.footer-meta, .footer-contact a {
  font-family: 'IBM Plex Mono', monospace; font-size: .64rem;
  color: var(--steel); letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none;
}
.footer-contact { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-contact a { text-transform: none; }
.footer-contact a:hover { color: #fff; }

@media (max-width: 700px) {
  .header-nav { gap: 14px; }
  .header-nav a { font-size: .6rem; letter-spacing: .08em; }
}

/* Petits écrans : le menu passe sous le logo */
@media (max-width: 560px) {
  header {
    position: relative; height: auto; flex-direction: column;
    align-items: flex-start; gap: 10px; padding-top: 14px; padding-bottom: 12px;
  }
  .header-nav { gap: 18px; flex-wrap: wrap; }
}