/* French tricolor — shared across all pages */
:root {
  --bg: #ffffff;
  --surface: #f5f7fb;
  --glass: #ffffff;
  --glass-hover: rgba(0, 35, 149, 0.05);
  --border: rgba(0, 35, 149, 0.12);
  --text: #1a1f36;
  --muted: #5c6578;
  --fr-blue: #002395;
  --fr-white: #ffffff;
  --fr-red: #ed2939;
  --accent: var(--fr-red);
  --accent-glow: rgba(237, 41, 57, 0.25);
  --indigo: #002395;
  --indigo-glow: rgba(0, 35, 149, 0.18);
  --radius: 16px;
  --radius-sm: 10px;
  --font: "Outfit", system-ui, sans-serif;
}

.flag-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 10000;
  background: linear-gradient(
    90deg,
    var(--fr-blue) 33.33%,
    var(--fr-white) 33.33% 66.66%,
    var(--fr-red) 66.66%
  );
  box-shadow: 0 1px 0 rgba(0, 35, 149, 0.08);
}

.site-logo {
  display: block;
  height: 52px;
  width: auto;
  max-width: min(100%, 300px);
  object-fit: contain;
}

.brand--landing {
  justify-content: center;
}

.brand--landing .site-logo {
  height: 56px;
  max-width: min(100%, 340px);
  margin: 0 auto;
}

@media (max-width: 480px) {
  .site-logo {
    height: 44px;
    max-width: min(100%, 260px);
  }

  .brand--landing .site-logo {
    height: 48px;
  }
}