:root {
  /* — Couleurs de marque — */
  --mk-navy: #0a2540; /* texte principal, fonds sombres */
  --mk-blue: #0e7cc7; /* accent, boutons primaires      */
  --mk-blue-dark: #0a5c94; /* liens, survol bouton           */
  --mk-blue-light: #5bb4e8; /* accent sur fond sombre         */
  --mk-gold: #d4a017; /* accent secondaire              */

  /* — Surfaces — */
  --mk-bg: #f4f6fa; /* fond de page          */
  --mk-surface: #ffffff; /* cartes                */
  --mk-tint: #e4eaf2; /* emplacements d'images */
  --mk-input: #f8fafc; /* champs de formulaire  */

  /* — Texte — */
  --mk-text: #46566b;
  --mk-text-muted: #5a6a7e;
  --mk-text-soft: #8294aa;
  --mk-border: rgba(10, 37, 64, 0.08);
  --mk-success: #1f8a5b;

  /* — Typographie — */
  --mk-font: 'Manrope', system-ui, -apple-system, sans-serif;
  --mk-mono: 'JetBrains Mono', monospace;

  /* — Rayons — */
  --mk-r-sm: 8px;
  --mk-r-md: 11px;
  --mk-r-lg: 18px;
  --mk-r-pill: 999px;

  /* — Mise en page — */
  --mk-container: 1240px;
  --mk-gutter: 40px;
  --mk-shadow-card: 0 20px 44px rgba(10, 37, 64, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--mk-bg);
  font-family: var(--mk-font);
  color: var(--mk-navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  cursor: pointer;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input,
select,
textarea {
  font-family: inherit;
}

/* Striped image placeholder (matches the prototype's repeating gradient) */
.mk-placeholder {
  background: var(--mk-tint);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(10, 37, 64, 0.05) 0 16px,
    transparent 16px 32px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.mk-placeholder-label {
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8294aa;
}

/* — Interactive states (the prototype's style-hover / style-focus) — */

.mk-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--mk-blue);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 28px;
  text-decoration: none;
  border-radius: var(--mk-r-md);
  transition: background 0.2s ease;
  border: none;
}
.mk-cta-primary:hover {
  background: var(--mk-blue-dark);
}

.mk-cta-secondary {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--mk-navy);
  border: 1px solid rgba(10, 37, 64, 0.2);
  font-weight: 600;
  font-size: 16px;
  padding: 15px 26px;
  text-decoration: none;
  border-radius: var(--mk-r-md);
  transition: border-color 0.2s ease;
}
.mk-cta-secondary:hover {
  border-color: var(--mk-navy);
}

/* White button on dark/blue backgrounds */
.mk-cta-light {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--mk-navy);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 28px;
  text-decoration: none;
  border-radius: var(--mk-r-md);
  transition: background 0.2s ease, color 0.2s ease;
}
.mk-cta-light:hover {
  background: var(--mk-navy);
  color: #fff;
}

.mk-header-cta {
  background: var(--mk-blue);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 11px 20px;
  text-decoration: none;
  border-radius: 9px;
  transition: background 0.2s ease;
}
.mk-header-cta:hover {
  background: var(--mk-blue-dark);
}

.mk-lang-toggle {
  background: none;
  border: 1px solid rgba(10, 37, 64, 0.2);
  color: var(--mk-navy);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 9px 13px;
  border-radius: var(--mk-r-sm);
}
.mk-lang-toggle:focus-visible {
  outline: 2px solid var(--mk-blue);
  outline-offset: 2px;
}

/* Nav links */
.mk-nav-link {
  position: relative;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: #3a4a5e;
  padding: 6px 0;
  white-space: nowrap;
}
.mk-nav-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--mk-gold);
}

/* Cards with hover lift */
.mk-card-hover {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mk-card-hover:hover {
  box-shadow: var(--mk-shadow-card);
  transform: translateY(-4px);
}
.mk-card-hover-3:hover {
  box-shadow: 0 22px 48px rgba(10, 37, 64, 0.12);
  transform: translateY(-3px);
}
.mk-card-hover-flat:hover {
  box-shadow: 0 16px 36px rgba(10, 37, 64, 0.1);
}

/* Footer social + links */
.mk-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}
.mk-social:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Form fields */
.mk-input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(10, 37, 64, 0.18);
  border-radius: 10px;
  font-size: 15px;
  color: var(--mk-navy);
  background: var(--mk-input);
}
.mk-input:focus {
  outline: 2px solid var(--mk-blue);
  outline-offset: 1px;
  border-color: var(--mk-blue);
}

/* Text link with arrow */
.mk-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--mk-blue-dark);
  text-decoration: none;
}

/* Responsive: collapse grids per the charte breakpoints (1240 / 1024 / 768 / 480) */
@media (max-width: 1024px) {
  .mk-grid-3,
  .mk-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mk-two-col {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  .mk-hide-mobile {
    display: none !important;
  }
}
@media (max-width: 640px) {
  .mk-grid-3,
  .mk-grid-4,
  .mk-grid-2 {
    grid-template-columns: 1fr !important;
  }
}
