@charset "UTF-8";
@font-face {
  font-family: "EkaniStory"; /* Le nom que vous choisissez */
  src: url("./fonts/EkaniStory/Ekani Story.otf") format("opentype");
}
@font-face {
  font-family: "EkaniInfinite"; /* Le nom que vous choisissez */
  src: url("./fonts/EkaniInfinite/Ekani Infinite-Medium.otf") format("opentype");
}
@media screen and (max-width: 75rem) {
  .wrapper {
    width: 92%;
    margin: auto;
  }
}
@media (min-width: 75rem) {
  .wrapper {
    width: 72rem;
    margin: auto;
  }
}
a {
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

ul {
  margin: 0;
}

ul li {
  list-style: none;
}

body {
  background-color: #dfeaf3;
}

.site-header .wrapper {
  display: flex;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0rem 1rem 1rem 0rem;
  padding: 0.25rem 0.5rem;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  align-items: center;
}

.site-branding {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-family: "EkaniInfinite";
}

.main-navigation .menu {
  display: flex;
  font-family: "EkaniStory";
  padding: 0;
}
.main-navigation .menu .menu-item {
  margin-right: 1rem;
  letter-spacing: -1px;
  line-height: 1.375rem;
  color: rgba(1, 17, 26, 0.6);
  text-align: center;
  font-size: 0.95rem;
}

.header-lens {
  display: flex;
  align-items: center;
  font-family: "EkaniStory";
  justify-content: space-evenly;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(1, 17, 26, 0.6);
  letter-spacing: -1px;
}
.site-title {
  position: relative;
  font-size: 1.1rem;
  letter-spacing: -1px;
  line-height: 1.5rem;
  background: linear-gradient(89.52deg, #bf50ab, #004d99 33.5%, #0fc2da);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding: 2px;
}

.site-logo-container {
  position: relative;
  min-height: 2rem;
  min-width: 1rem;
}

.site-logo {
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  padding: 1rem 0.5rem;
  line-height: 1rem;
  font-size: 1.5rem;
  background: linear-gradient(89.52deg, #4f21a5, #214da5 17%, #11d7f2);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -3px;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(0%, -15%);
  z-index: 10;
}

.header {
  width: 100%;
  height: 5.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0rem 1rem;
}

.cta a {
  margin-left: 1rem;
  margin-right: 0;
}
.cta .void {
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid #0fc2da;
  display: inline-block;
  padding: 0.25rem 1rem;
  color: #005cb8;
}
.cta .full {
  border-radius: 1rem;
  display: inline-block;
  padding: 0.25rem 1rem;
  color: #dfeaf3;
  box-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3) inset, -1px -1px 3px rgba(255, 255, 255, 0.3) inset, 0px 3px 3px rgba(0, 102, 204, 0.3);
  border-radius: 1rem;
  background: linear-gradient(180deg, #0d99ff 30%, #0a73bf);
}

/**********************************************************************************
**********************************************************************************/
.current-issues .heading {
  display: flex;
}
.current-issues .heading .title {
  width: 30%;
  font-size: 1.25rem;
  letter-spacing: -1px;
  line-height: 3rem;
  font-weight: 600;
  font-family: "EkaniInfinite";
  background: linear-gradient(89.52deg, #b30000, #e660cd);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  text-shadow: 4px 4px 5px rgba(179, 0, 0, 0.3);
}
.current-issues .heading .subtitle {
  width: 60%;
  margin-left: auto;
  font-size: 1rem;
  letter-spacing: -1px;
  font-family: "EkaniStory";
  color: rgba(1, 17, 26, 0.95);
  text-align: left;
}
.current-issues .warning-section {
  display: flex;
  width: 100%;
  position: relative;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.01);
  box-shadow: 0px 13px 31px 4px rgba(236, 39, 0, 0.15);
  background: linear-gradient(0deg, rgba(251, 192, 192, 0.3), rgba(219, 201, 213, 0.3));
  border: 1px solid #fff;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  gap: 0rem;
}
.current-issues .warning-section .warning-title {
  width: 70%;
  letter-spacing: -1px;
  background: linear-gradient(89.52deg, #b30000, #e660cd), rgba(1, 17, 26, 0.95);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card {
  width: 30%;
  --content-bg: linear-gradient(318deg, #242424 0.48%, #2d2d2d 86.56%);
  --content-bg-hover: linear-gradient(
    318deg,
    rgba(121, 132, 204, 0.1) 0.48%,
    rgba(5, 12, 53, 0.1) 86.56%
  );
  line-height: 1.4;
  text-align: center;
}

.circular-loader {
  position: relative;
  width: 150px; /* Ajustez la taille de la barre de chargement */
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* Commence la progression à midi */
}

.loader-bg {
  fill: none;
  stroke: #eee; /* Couleur de fond de la couronne */
  stroke-width: 10; /* Épaisseur de la couronne */
}

.loader-progress {
  fill: none;
  stroke: #ff0000; /* Couleur de progression (rouge) */
  stroke-width: 10;
  stroke-linecap: round; /* Bords arrondis pour la progression */
  /* Circonférence : 2 * PI * rayon (45) = env. 282.74 */
  stroke-dasharray: 282.74; /* Longueur totale du cercle */
  stroke-dashoffset: 282.74; /* Cache initialement la progression */
  animation: fillProgress 3s linear forwards; /* Animation de 3 secondes */
}

/* Styles pour le texte du pourcentage animé en CSS pur */
.loader-text {
  /* Le texte original est masqué car le contenu est généré par ::before */
  visibility: hidden;
  position: absolute;
  font-family: Arial, sans-serif;
  font-size: 2em;
  color: #333;
}

.loader-text::before {
  content: "0%"; /* Valeur initiale par défaut */
  visibility: visible; /* Rend le pseudo-élément visible */
  animation: animateText 3s linear forwards; /* Animation du texte */
}

/* --- Keyframes pour l'animation de la progression de la couronne --- */
@keyframes fillProgress {
  to {
    stroke-dashoffset: 0; /* Révèle complètement le cercle */
  }
}
/* --- Keyframes pour l'animation du texte (approximative en CSS pur) --- */
/* Chaque étape représente un pourcentage, ce ne sera pas une transition fluide continue */
@keyframes animateText {
  0% {
    content: "0%";
  }
  10% {
    content: "10%";
  }
  20% {
    content: "20%";
  }
  30% {
    content: "30%";
  }
  40% {
    content: "40%";
  }
  50% {
    content: "50%";
  }
  60% {
    content: "60%";
  }
  70% {
    content: "70%";
  }
  80% {
    content: "80%";
  }
  90% {
    content: "90%";
  }
  100% {
    content: "100%";
  }
}/*# sourceMappingURL=main.css.map */