@font-face {
  font-family: Figtree-Regular;
  src: url('/src/fonts/Figtree/Figtree-Regular.ttf');
  font-display: swap;
}

* {
  font-family: Figtree-Regular, Arial, Helvetica, sans-serif;
}

:root {
  /* Couleurs (fonds et police) */
  --bs-primary-rgb: 43, 49, 73;
  --bs-primary: #2b3149#2b3149;
  --bs-secondary-rgb: 28, 34, 50;
  --bs-secondary: #1c2232;
  --bs-info: #427999;
  --bs-info-rgb: 66, 121, 153;
  --bs-info-border-subtle: #427999;
  --bs-body-color: #000;
  --bs-tertiary-bg-rgb: 95, 95, 95;
  --bs-body-bg: transparent;
  --bs-emphasis-color: #fff;
  /* barre navigation */
  --navbar-light: #fff;
  --bs-dropdown-link-active-bg: transparent;
  /* Ombres */
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.85);
}

/* Couleur du burger "mode burger" */
.navbar-toggler.collapsed .toggler-icon {
  background-color: #fff;
}

/* Bordure retiré */
.navbar-toggler {
  border: 0 !important;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Lines of the Toggler */
.toggler-icon {
  width: 30px;
  height: 3px;
  background-color: #d13415;
  display: block;
  transition: all 0.2s;
}

/* Barre du milieu (burger) */
.middle-bar {
  margin: 5px auto;
}

/* Ouverture du menu burger */
/* inclinaison à 45° de la barre du haut */
.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

/* Disparition barre du milieu */
.navbar-toggler .middle-bar {
  opacity: 0;
  filter: alpha(opacity=0);
}

/* Inclinaison à -45° de la barre du haut */
.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

/* Fermeture du menu burger */
.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

/* Retrait de la bordure autour des menus déroulés */
.dropdown-menu {
  border: none;
}

/* Couleur des menus déroulés au survol */
.dropdown-menu a:hover {
  color: #000 !important;
}

.dropdown-menu a:active {
  background-color: #2b3149;
  color: #fff !important;
}

/* HEADER */
header {
  background-image: url(/src/img/webp/background500px.webp);
  background-size: cover;
  background-attachment: fixed;
  filter: contrast(175%) brightness(103%);
  height: 60vh;
}

/* Modification boutons #4889A5*/
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #427999;
  --bs-btn-border-color: #427999;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #427999;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #427999;
  --bs-btn-active-border-color: #427999;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #427999;
  --bs-btn-disabled-border-color: #427999;
}

.btn-outline-light {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #f8f9fa;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: #f8f9fa;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f8f9fa;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f8f9fa;
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #427999;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #427999;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: #427999;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f8f9fa;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f8f9fa;
  --bs-gradient: none;
}

a {
  color: #fff;
}

.bg-blue-gradient {
  background: linear-gradient(
    118deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(2, 3, 129, 1) 41%,
    rgba(0, 1, 175, 1) 95%
  );
}

@media (max-width: 425px) {
  header {
    background-image: url(/src/img/webp/backgroundmobile.webp);
    background-attachment: local;
  }
}