:root {
  /* Couleurs principales issues du logo */
  --fl-primary: #008CA3;
  --fl-primary-hover: #006F82;
  --fl-primary-soft: #E6F6F8;

  --fl-secondary: #F8C900;
  --fl-secondary-soft: #FFF7D6;

  --fl-accent-red: #E5002A;
  --fl-accent-red-soft: #FFE7EC;

  /* Fonds */
  --fl-bg: #FFFDF7;
  --fl-bg-soft: #FAF6EA;
  --fl-surface: #FFFFFF;

  /* Textes */
  --fl-text: #25252A;
  --fl-muted: #66666D;

  /* Bordures */
  --fl-border: #E9E2D3;
  --fl-border-blue: #D8EEF2;

  /* Rayons */
  --fl-radius-sm: 12px;
  --fl-radius-md: 20px;
  --fl-radius-lg: 28px;
  --fl-radius-pill: 999px;

  /* Ombres */
  --fl-shadow-soft: 0 18px 45px rgba(37, 37, 42, 0.08);
  --fl-shadow-card: 0 10px 28px rgba(37, 37, 42, 0.07);

  /* Layout */
  --fl-container: 1180px;
}

/* Base générale */
body {
  background: var(--fl-bg);
  color: var(--fl-text);
}

/* Sélection texte */
::selection {
  background: var(--fl-secondary);
  color: var(--fl-text);
}

/* Conteneur réutilisable */
.fl-container {
  width: min(var(--fl-container), calc(100% - 40px));
  margin-inline: auto;
}

/* Boutons */
.fl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--fl-radius-pill);
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
  transition: all 0.2s ease;
}

.fl-button--primary {
  background: var(--fl-primary);
  color: #fff;
  box-shadow: var(--fl-shadow-card);
}

.fl-button--primary:hover,
.fl-button--primary:focus-visible {
  background: var(--fl-primary-hover);
  color: #fff;
  transform: translateY(-1px);
}

.fl-button--outline {
  background: transparent;
  color: var(--fl-primary);
  border: 2px solid var(--fl-primary);
}

.fl-button--outline:hover,
.fl-button--outline:focus-visible {
  background: var(--fl-primary-soft);
  color: var(--fl-primary-hover);
}

.fl-button--light {
  background: var(--fl-surface);
  color: var(--fl-primary);
  border: 1px solid var(--fl-border-blue);
  box-shadow: var(--fl-shadow-card);
}

.fl-button--light:hover,
.fl-button--light:focus-visible {
  background: var(--fl-primary-soft);
  color: var(--fl-primary-hover);
}

/* Accessibilité */
.fl-button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(0, 140, 163, 0.32);
  outline-offset: 4px;
}

/* Sections */
.fl-section {
  padding: 88px 0;
}

.fl-section__header {
  max-width: 760px;
  margin-bottom: 40px;
}

.fl-section__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--fl-primary);
  font-weight: 800;
}

/* Badges réutilisables */
.fl-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--fl-radius-pill);
  background: var(--fl-secondary-soft);
  color: #7A6400;
  font-weight: 800;
  font-size: 0.95rem;
}

/* Cartes réutilisables */
.fl-card {
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
  box-shadow: var(--fl-shadow-card);
}

/* Responsive */
@media (max-width: 767px) {
  .fl-container {
    width: min(100% - 28px, var(--fl-container));
  }

  .fl-section {
    padding: 56px 0;
  }

  .fl-button {
    width: 100%;
  }
}