/* Conteneur du loader */
  .loader-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s ease-in-out; /* Ajout du fondu */
  }
  
  /* Logo centré et agrandi */
  .loader-container img.logo {
    width: 180px; /* Taille du logo */
    height: 180px;
    position: absolute;
    z-index: 2; /* Au-dessus du loader */
    border-radius: 50%;
  }
  
  /* Cercle de chargement autour du logo */
  .loader {
    width: 198px;  /* 10% plus grand que le logo */
    height: 198px;
    position: absolute;
    border-radius: 50%;
    border-top: 4px solid #7a5a48; /* Couleur du cercle */
    border-right: 4px solid transparent; /* Effet d'arc de cercle */
    box-sizing: border-box;
    animation: rotation 1.5s linear infinite;
    z-index: 1;
  }
  
  /* Animation de rotation du cercle */
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  /* Effet de fondu progressif avant de masquer complètement */
  body.loaded .loader-container {
    opacity: 0; /* Disparition progressive */
    pointer-events: none; /* Empêche toute interaction après disparition */
  }