.purple-navbar {
    background: linear-gradient(to right, #9d50bb, #6e48aa) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
} 

:root {
    --primary: #cb70f0;
    --primary-dark: #6e48aa;
    --gradiant-1: linear-gradient(to right, #9d50bb, #6e48aa) !important;
    --gradiant-2: linear-gradient(to left, #9d50bb, #6e48aa) !important;
    --primary-darker: #6e48aa;
    --text: #F9F9F9;
    --background: #1c1c1c;
    --secondary: #2E2E2E;
    --gray-border: #3E3E3E;
    --gray-border-hover: #505050;
    --gray-menu-button: #7E7E7E;
    --gray-menu-button-hover : #232323;    
    --navbar-height: 4rem;
    --gray-text-hover: #8f8f8f;
    --gray-icon: #A8A8A8;
}

.ViewDeckController .bg-gradiant-purple {
    --bs-bg-opacity: 1;
    background: linear-gradient(to right, #9d50bb, #6e48aa) !important;
}

.dropdown-item:focus, .dropdown-item:hover {
    background: #9d50bb17 !important;
}

.dropdown-item:focus, .dropdown-item:focus {
    color: #1c1c1c !important;
}

.icon-large {
    font-size: 24px;
}

.priest {
    background-color: #232323;
    border-radius: 10px;
    cursor: pointer;
}

.priest:hover {
    background-color: #3a3a3a;
}

.active-priest {
    border-radius: 10px;
    border: 2px solid #9d50bb;
    box-shadow: 0px 0px 99px -32px #9d50bb;
}

.hero.video {
    position: relative;
    height: 40vh; /* La hauteur de la div sera la hauteur de la fenêtre */
    overflow: hidden;
  }
  
  #background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que la vidéo couvre tout l'espace sans déformation */
    transform: translate(-50%, -50%);
    z-index: -1; /* Place la vidéo derrière le contenu */
  }

  /* */

.timeline {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    width: 2px; /* Largeur de la ligne */
    height: 100%;
    background-color: rgb(208, 168, 92);
    left: 57%; /* Position au centre */
    transform: translateX(-50%); /* Centrer exactement */
    top: 0; /* Ligne partant du haut de la div */
    z-index: 0; /* S'assurer que la ligne est derrière les éléments */
}

.timeline-marker {
    width: 15px;
    height: 15px;
    background-color: rgb(208, 168, 92);
    border: 2px solid palegoldenrod;
    border-radius: 50%;
    position: absolute;
    left: 57%; /* Position au centre */
    transform: translateX(-50%); /* Centrer exactement */
    top: 50%;
    z-index: 1;
    transition: transform 0.2s ease-in-out;
}

.timeline-marker:hover {
    transform: translateX(-50%) scale(1.3);
}

.timeline-step:last-child::before {
    display: none; /* Cache la ligne pour le dernier élément */
}

.hover-bg-dark:hover {
    background-color: #343a40; /* gris foncé Bootstrap */
  }

.gold-border {
    border: 2px solid goldenrod !important;
}