:root {
  --rse-blue-dark: #0c3350;
  --rse-blue-light: #5bc5f1;
  --rse-green: #8ec89a;
  --rse-yellow: #ffe163;
}

a {
  color: var(--rse-blue-dark);
}
a:hover {
  color: var(--rse-blue-light);
}
.btn-primary {
  background-color: var(--rse-yellow);
  color: var(--rse-blue-dark);
}
.btn-primary:hover {
  background-color: var(--rse-blue-light);
  color: #fff;
}
.btn-topbar {
  background-color: #ffe163; /* Jaune charte */
  color: #0c3350; /* Bleu soutenu */
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  margin-left: 10px;
  transition: background-color 0.3s ease;
}
.btn-topbar:hover {
  background-color: #5bc5f1; /* Bleu clair charte */
  color: #ffffff;
}
.btn-topbar {
  background-color: #ffe163; /* Jaune charte */
  color: #0c3350; /* Bleu soutenu */
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.btn-topbar:hover {
  background-color: #5bc5f1; /* Bleu clair charte */
  color: #ffffff;
}
@media (max-width: 768px) {
  .sp-top-bar .row {
    flex-direction: column;
    text-align: center;
  }
  .btn-topbar {
    display: inline-block;
    margin-top: 5px;
  }
}
@media (max-width: 768px) {
  .sp-default-logo img {
    max-height: 50px;
  }
}

.sp-megamenu-parent > li > a {
  font-weight: bold;
  text-transform: uppercase;
}
.sp-megamenu-parent > li:hover > a {
  background-color: transparent;
  color: #ffe163 !important;
}
/* Bouton 1 */
.hero-section .sppb-btn:first-child {
  background-color: #ffe163 !important;
  color: #0c3350 !important;
}
/* Bouton 2 */
.hero-section .sppb-btn:last-child {
  background-color: #5bc5f1 !important;
  color: #ffffff !important;
}
/* Hover */
.hero-section .sppb-btn:first-child:hover {
  background-color: #5bc5f1 !important;
  color: #ffffff !important;
}
.hero-section .sppb-btn:last-child:hover {
  background-color: #0c3350 !important;
  color: #ffe163 !important;
}
/* =========================
   CHARTE GRAPHIQUE RSE
   ========================= */

/* --- Couleurs principales --- */
:root {
  --bleu-soutenu: #0c3350;
  --bleu-clair: #5bc5f1;
  --jaune-charte: #ffe163;
  --vert-charte: #8ec89a;
  --gris-fonce: #333333;
}

/* --- Polices --- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Kai', sans-serif;
  font-weight: normal;
  color: var(--bleu-soutenu);
}
body, p, li {
  font-family: 'Roboto', sans-serif;
  color: var(--gris-fonce);
}

/* --- Topbar --- */
.sp-top-bar {
  background-color: var(--bleu-soutenu);
  color: #ffffff;
  font-size: 14px;
}
.sp-top-bar a {
  color: #ffffff;
  text-decoration: none;
}
.sp-top-bar a:hover {
  color: var(--jaune-charte);
}

/* --- Boutons génériques --- */
.btn, .sppb-btn {
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-primary, .sppb-btn-primary {
  background-color: var(--jaune-charte);
  color: var(--bleu-soutenu);
}
.btn-primary:hover, .sppb-btn-primary:hover {
  background-color: var(--bleu-clair);
  color: #ffffff;
}
.btn-secondary, .sppb-btn-secondary {
  background-color: var(--bleu-clair);
  color: #ffffff;
}
.btn-secondary:hover, .sppb-btn-secondary:hover {
  background-color: var(--bleu-soutenu);
  color: var(--jaune-charte);
}

/* --- Menu --- */
.sp-megamenu-parent > li > a {
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
}
.sp-megamenu-parent > li:hover > a {
  color: var(--jaune-charte);
}
.sp-megamenu-parent > li.active > a {
  color: var(--vert-charte);
}

/* --- Hero --- */
.hero-section {
  background-color: var(--bleu-soutenu);
  color: #ffffff;
  text-align: center;
}
.hero-section h1 {
  color: #ffffff;
}
.hero-section p {
  color: var(--bleu-clair);
}

/* --- Icônes Services --- */
.sppb-addon-feature .sppb-icon {
  color: var(--bleu-clair);
  transition: color 0.3s ease;
}
.sppb-addon-feature:hover .sppb-icon {
  color: var(--jaune-charte);
}

/* --- Footer --- */
#sp-footer {
  background-color: var(--bleu-soutenu);
  color: #ffffff;
}
#sp-footer a {
  color: #ffffff;
}
#sp-footer a:hover {
  color: var(--jaune-charte);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .sp-top-bar .row {
    flex-direction: column;
    text-align: center;
  }
  .btn, .sppb-btn {
    display: inline-block;
    margin-top: 5px;
  }
}