@font-face {
  font-family: "Roboto";
  src: url("/assets/css/fonts/Roboto-Light.ttf") format("truetype")
}

:root {
  /* Couleurs principales */
  --primary-blue: #0044ff;
  --primary-dark: #1a1a3e;
  --primary-cyan: #4dd4f7;
  
  /* Couleurs secondaires */
  --secondary-marine: #2d2d6b;
  --secondary-darker: #0f0f2e;
  --secondary-sky: #5e92f7;
  
  /* Couleurs neutres */
  --neutral-white: #ffffff;
  --neutral-gray: #b8b8d1;
  --neutral-translucent: rgba(255, 255, 255, 0.1);
  --neutral-border: rgba(255, 255, 255, 0.2);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0044ff 0%, #4dd4f7 100%);
  --gradient-background: linear-gradient(135deg, #1a1a3e 0%, #0f0f2e 100%);
  
  /* Ombres */
  --shadow-glow: 0 10px 30px rgba(77, 212, 247, 0.3);
  --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.2);
  
  /* Effets glassmorphism */
  --glass-background: rgba(255, 255, 255, 0.05);
  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
  --glass-blur: blur(10px);
}

.w-2   { width:  2% !important; }
.w-3   { width:  3% !important; }
.w-4   { width:  4% !important; }
.w-5   { width:  5% !important; }
.w-6   { width:  6% !important; }
.w-7   { width:  7% !important; }
.w-8   { width:  8% !important; }
.w-9   { width:  9% !important; }
.w-10  { width: 10% !important; }
.w-11  { width: 11% !important; }
.w-12  { width: 12% !important; }
.w-13  { width: 13% !important; }
.w-14  { width: 14% !important; }
.w-15  { width: 15% !important; }
.w-16  { width: 16% !important; }
.w-17  { width: 17% !important; }
.w-18  { width: 18% !important; }
.w-19  { width: 19% !important; }
.w-20  { width: 20% !important; }
.w-25  { width: 25% !important; }
.w-30  { width: 30% !important; }
.w-32  { width: 32% !important; }
.w-33  { width: 33.33% !important; }
.w-35  { width: 35% !important; }
.w-40  { width: 40% !important; }
.w-45  { width: 45% !important; }
.w-50  { width: 50% !important; }
.w-55  { width: 55% !important; }
.w-60  { width: 60% !important; }
.w-65  { width: 65% !important; }
.w-66  { width: 66.67% !important; }
.w-70  { width: 70% !important; }
.w-75  { width: 75% !important; }
.w-80  { width: 80% !important; }
.w-85  { width: 85% !important; }
.w-90  { width: 90% !important; }
.w-95  { width: 95% !important; }
.w-100 { width: 100% !important; }

.py-cust { 
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.my-cust {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.text-justify { text-align: justify; }

body {
  background: url("/assets/files/blue_2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  font-family: "Roboto";
}

h1, h2, h3, h4, h5, h6 {
  color: var(--secondary-marine);
}

.menu {
  position: sticky;
  top: 3rem;
  height: calc(100vh - 6rem);
  margin: 3rem 0;

  display: flex;
  flex-direction: column;
}

.bg-gradient-1 {
  background: var(--gradient-background);
}

.bg-gray {
  background: var(--neutral-gray);
}

.bg-primary-dark {
  background: var(--primary-dark);
}

.bg-glass {
  background: var(--glass-background);
}

.bg-seamless {
  background: url("/assets/files/seamless_pattern_blue_2.jpg");
  background-repeat: repeat;
  background-position: center;
  background-size: 50%;
}

.bg-blue-half {
  background: url("/assets/files/blue_1_half.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.bg-blue-half-2 {
  background: url("/assets/files/blue_1_half_2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.ul-menu {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}
.ul-menu li {
  padding: 0;
  margin: 0;
}
.ul-menu li a {
  display: block;
  width: 100%;
  padding: 5px 0;
  text-align: center;
  text-decoration: none;
  background-color: var(--gradient-background);
  color: var(--neutral-gray);
  border-radius: var(--bs-border-radius);
  transition: 0.25s;
}
.ul-menu li a:hover {
  background-color: var(--secondary-marine);
}

.lower-menu {
  margin-top: auto;
  color: var(--neutral-gray);
  text-align: center;
  font-size: 10px;

  display: flex;
  justify-content: space-around;
}

.lower-menu a {
  text-decoration: none;
  color: var(--neutral-gray);
  transition: 0.25s;
}
.lower-menu a:hover {
  color: var(--neutral-white);
}

.logo-text {
  color: var(--primary-dark);
}