body{
    font-family: Centra, sans-serif !important;
}

@font-face {
	font-family: Centra;
	src: url('../font/CentraNo2-Bold.ttf');
	font-weight: 700;
}
@font-face {
	font-family: Centra;
	src: url('../font/CentraNo2-Medium.ttf');
	font-weight: 500;
}
@font-face {
	font-family: Centra;
	src: url('../font/CentraNo2-Book.ttf');
	font-weight: 400;
}

.banner .tagline{
    background: linear-gradient(90.21deg, hsla(0, 35%, 83%, .5) -5.91%, hsla(240, 4%, 74%, .897) 111.58%);
    border: 1px solid hsla(0, 0%, 100%, .5);
    display: inline-block;
    font-size: 20px;
    margin-bottom: 16px;
    padding: 8px 10px;
}

#accueil{
    background-image: url('../img/background_bleu_sombre.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0;
}

#bloc_classe{
  background-image: url('../img/background_bleu_sombre_forme1.png');
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0;
}

#bloc_footer{
  background-image: url('../img/background_bleu_sombre_footer.png');
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0;
}

#typewriter {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: 2px;
  vertical-align: middle; /* Aligne correctement le texte et le caret */
}

/* Pseudo-élément pour créer le caret personnalisé */
#typewriter::after {
  content: ''; /* Pseudo-élément pour le caret */
  display: inline-block;
  width: 1px; /* Largeur du caret */
  height: 1em; /* Hauteur du caret, basée sur la taille du texte */
  background-color: white; /* Couleur du caret */
  vertical-align: middle; /* Aligner le caret avec le texte */
  animation: blink-caret 0.75s step-end infinite; /* Animation de clignotement */
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: white; }
}

.fixed-bottom-right {
  position: fixed;
  top: 8px;
  right: 6px;
  z-index: 1000; /* Assure que le bouton est au-dessus des autres éléments */
}

/* Drapeau français */
.bg-fr-flag {
  background-image: url('https://purecatamphetamine.github.io/country-flag-icons/3x2/FR.svg');
  background-size: cover;
  background-position: center;
}

/* Drapeau anglais */
.bg-eng-flag {
    background-image: url('https://purecatamphetamine.github.io/country-flag-icons/3x2/US.svg');
    background-size: cover;
    background-position: center;
}

#toggleCircle
{
  -webkit-box-shadow: 5px 3px 4px -2px rgba(102,102,102,0.58); 
  box-shadow: 5px 3px 4px -2px rgba(102,102,102,0.58);
}

#bloc_classe {
  overflow: hidden; /* Empêche le débordement */
}

/* .imgCarroussel{
  overscroll-behavior: none;
  height: 10vh;
  overflow: hidden; 
} */

.pb15
{
  padding-bottom: 15rem;
}

.pt15
{
  padding-top: 15rem;
}

.h-imgCarrousselMobile{
  height: 39rem;
}

.container1
{
  width: 75%;
}

.container2
{
  width : 50%;
}


.mt-10
{
    margin-top: 5rem;
}

.mt-15
{
  margin-top: 10rem;
}

.mt-20
{
  margin-top: 15rem;
}

.img-logo {
    animation: updown 8s linear infinite;
}

.bg-myGray-300
{
  background-color: #e5e7eb;
}

@keyframes updown {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px); /* Ajuste la valeur selon tes besoins */
    }
    100% {
      transform: translateY(0);
    }
  }

  .img-logo img {
    transform: scale(0.8); /* Réduit l'échelle initiale */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out; /* Transition pour le zoom et la transparence */
    opacity: 0; /* Commence avec une opacité nulle pour le fondu */
  }
  
  .img-logo img.zoom-in {
    transform: scale(1.4); /* Échelle normale lorsque visible */
    opacity: 1; /* Opacité normale */
  }

  
.imageGameplay {
    height: 420px; /* Hauteur des images */
    width: auto; /* Largeur automatique pour garder le ratio */
    object-fit: cover; /* Couvre l'espace sans déformation */
    border-radius: 0.5rem;
}

.bg-gradient-gray {
    background: linear-gradient(to right, #4e5f7e, #9ca3af);
}

.bg-gradient-gray-light {
    background: linear-gradient(to right, #adb2bb, #d1d5db);
}

.bg-gradient-gray-dark {
    background: linear-gradient(to right, #818387, #3a4c6c);
}