/* styles.css */

/* S'assurer que le contenu prend toute la hauteur de la page */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color:#333;
    color: white;
}

/* Footer toujours en bas, même quand le contenu est court */
.footer {
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 10px 0;
    margin-top: auto;
}

/* Marge pour éviter que le contenu passe sous la navbar flottante */
.content-padding-top {
    padding-top: 50px;
}

/* (optionnel) Adoucir le responsive padding des containers */
.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.texte-index {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* centre horizontalement */
    align-items: center;      /* centre verticalement */
    height: 100vh;            /* prend toute la hauteur de la fenêtre */
    color: white;             /* texte en blanc */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }

  
.below {
    /* pas de centrage vertical ici, juste sous le premier div */
    padding: 10px;
    background: lightgray;
  }
  
.bg-cover {
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Animation fade in/out sur le texte */
.fade {
    opacity: 0;
    transition: opacity 1s ease;
  }
  
  .fade.show {
    opacity: 1;
  }
  
  /* Pour le fondu complet de la page lors de la redirection */
  /* .page-fade {
    opacity: 1;
    transition: opacity 1s ease;
  } */
  
  /* .page-fade.fade-out {
    opacity: 0;
  } */
  
  .page-fade {
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  
  .page-fade.visible {
    opacity: 1;
  }

  .navbar-animate {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  }
  
  .navbar-animate.visible {
    transform: translateY(0);
    opacity: 1;
  }

  .navbar-blur-bar {
    position: fixed;
    top: 70px; /* ajusté à la hauteur estimée de la navbar */
    left: 0;
    width: 100%;
    height: 20px;
    backdrop-filter: blur(6px);
    z-index: 998; /* juste en dessous de la navbar (qui est 999 par défaut en Bootstrap) */
  }

/* HTML: <div class="loader"></div> */
.loader {
    height: 80px;
    aspect-ratio: 1;
    padding: 10px;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    mask: conic-gradient(#000 0 0) content-box exclude,conic-gradient(#000 0 0);
    filter: blur(12px);
  }
  .loader:before {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(#0000 35%, #FF0000, #0000 65%);
    animation: l1 1.5s linear infinite;
  }
  @keyframes l1 {
    to {rotate: 1turn}
  }