/* Animation trainée 1 et 0 */
.trail {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 100%;
    height: 100%;
}

.trail span {
    position: absolute;
    margin: 5px;
    /* Ajustez cette valeur pour augmenter ou diminuer l'espacement */
}

.trail span.zero {
    color: gray;
}

.trail span.one {
    color: red;
}

/* Couleur navbar page Artcile  */
.navbar-article {
    background-color: #1e3a8a;
    /* Bleu foncé */
    color: #ffffff;
    /* Blanc */
}

.navbar-article .nav-link {
    color: #ffffff;
    /* Blanc */
}

.navbar-article .nav-link:hover {
    color: #d1d5db;
    /* Gris clair pour le hover */
}

/* Barre de progression onscroll */
.progress-bar-container {
    position: fixed;
    bottom: 200px;
    right: 30px;
    height: 200px;
    width: 2px;
    /* display: block; */
    /* Toujours afficher le conteneur pour l'animation */
    opacity: 0;
    /* Initialement transparent */
    transform: translateX(100%);
    /* Initialement hors de l'écran à droite */
    transition: opacity 0.5s ease, transform 0.5s ease, height 0.2s;
    /* Animation pour l'opacité et la translation */
}

.progress-bar {
    position: absolute;
    top: 0;
    /* Débute du haut du conteneur */
    right: 0;
    width: 100%;
    /* Ajuste la largeur pour remplir la colonne */
    height: 0;
    background-color: #007bff;
    /* Couleur de remplissage */
    transition: height 0.2s;
}

.progress-label {
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: rotate(90deg);
    transform-origin: right bottom;
    white-space: nowrap;
    /* Assure que le texte ne se divise pas en plusieurs lignes */
    font-size: 15px;
    margin-bottom: 10px;
    /* Ajuste la marge pour donner de l'espace entre le texte et la barre */
    text-align: center;
    /* Centre le texte */
    cursor: pointer;
    /* Change le curseur en pointeur */
    color: #000;
    /* Couleur par défaut */
}

/* Classe pour afficher la barre "vers le haut" avec animation */
.progress-bar-container.visible {
    opacity: 1;
    /* Opacité pleine pour la visibilité */
    transform: translateX(0);
    /* Déplace la barre à sa position d'origine */
}

/* Couleur blanche pour un fond sombre */
.progress-label.white-bg {
    color: #fff;
    /* Texte blanc pour fond sombre */
}

/* Styles pour la navbar */
.navbar-dark {
    background-color: #343a40 !important;
    transition: background-color 0.3s ease;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' linecap='round' linejoin='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Ombre section hero */
.hero {
    width: 100%;
    height: 100%;
    /* Assure que le conteneur prend toute la hauteur et la largeur */
    background-image: url("../images/bg-hero-441ee25974280fbe9ca0f51c2d3f7854.webp");
    /* Assurez-vous que le chemin est correct */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Utilisez 100% pour couvrir toute la hauteur du parent */
    background: rgba(0, 0, 0, 0.5);
    /* Superposition sombre */
    z-index: 1;
}

/* Couleurs sections */
.bg-light-gray {
    background-color: #f8f9fa !important;
}

.bg-blue-light {
    background-color: #e9f5ff !important;
}

.bg-off-white {
    background-color: #fdfdfe !important;
}

.bg-gray-light {
    background-color: #f1f3f5 !important;
}

.bg-blue-dark {
    background-color: #004085 !important;
}

.bg-blue-very-dark {
    background-color: #002752 !important;
}

.bg-gray-blue {
    color: #eef2f6 !important;
    /* Blanc cassé */
}

.text-gray-dark {
    color: #343a40 !important;
    /* Gris foncé */
}

.text-dark-gray {
    color: #343a40 !important;
}

.text-blue-dark {
    color: #004085 !important;
}

.text-gray-dark {
    color: #495057 !important;
}

/* Section Parcours & Prestations*/
.shadow {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.card-body-parcours {
    height: 100%;
    /* Assure que le conteneur prend toute la hauteur */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color 0.3s ease;
}

.card-body-parcours:hover {
    background-color: #f8f9fa;
}

.fa-calendar {
    margin-right: 5px;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.icon {
    font-size: 2rem;
}

@media (max-width: 767.98px) {
    .circle {
        width: 75px;
        height: 75px;
    }

    .icon {
        font-size: 1.5rem;
    }
}


/* Section Vlog - Garantir que toutes les cartes conservent une taille fixe et uniforme */
.fixed-size-card {
    width: 100%;
    max-width: 430px;
    /* Fixez cette valeur selon vos besoins */
    min-height: 450px;
    /* Hauteur minimale de la carte */
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    /* Centrer la carte si nécessaire */
}

.video-container {
    position: relative;
    width: 100%;
    height: 200px;
    /* Hauteur fixe de la vidéo */
    background-color: #000;
    /* Arrière-plan noir pour les vidéos */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La vidéo couvre toute la zone, en conservant son ratio */
}

/* Media queries section Accueil */
/* @media (min-width: 768px) {
    .logo-desktop {
        margin-right: 50px; */
/* Ajuste la position du logo vers la droite sur les écrans moyens et plus grands */
/* }

    .col-md-5 {
        justify-content: flex-end; */
/* Ajuste la position du logo à droite */
/* }

    .col-md-7 {
        justify-content: flex-start; */
/* Ajuste la position du texte à gauche */
/* }
} */



/* CSS EN TEST  */


/* Mode sombre clair */

/* Mode sombre global */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

/* corriger la navbar */
body.dark-mode .navbar,
body.dark-mode .navbar-article,
body.dark-mode .navbar-glass {
    background-color: #1f1f1f !important;
    color: #ffffff !important;
}

/* corriger les cartes */
body.dark-mode .card-body-parcours {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}
body.dark-mode .card-body-parcours:hover {
    background-color: #2a2a2a !important;
}

/* corriger les sections avec bg clair */
body.dark-mode .bg-light-gray,
body.dark-mode .bg-blue-light,
body.dark-mode .bg-off-white,
body.dark-mode .bg-gray-light {
    background-color: #1e1e1e !important;
}

/* corriger les textes */
body.dark-mode .text-gray-dark,
body.dark-mode .text-dark-gray,
body.dark-mode .text-blue-dark {
    color: #e0e0e0 !important;
}

/* corriger labels et progress bar */
body.dark-mode .progress-label {
    color: #ffffff !important;
}
body.dark-mode .progress-bar {
    background-color: #bb86fc !important; /* violet clair typique du dark mode */
}
/* Mode clair global */

body.light-mode {
    background-color: #ffffff;
    color: #000000;
}

.toggle-container {
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
}

.toggle-container i {
    cursor: pointer;
    font-size: 2rem;
    margin: 0 5px;
}

/*
    =================================================
    Correctif effectué par MS en date du 13/08/2025
    =================================================
*/

.navbar-glass {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: background-color .3s ease,  backdrop-filter .3s ease;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

/* ------------------ CCS NON UTILISE -----------------*/

/* Animation texte accueil */
/* .animated-container {
    overflow: hidden;
    position: relative;
}

.animated-line {
    opacity: 0;
    transform: translateY(20px); */
/* background-color: rgba(0, 0, 0, 0.75); */
/* animation: fadeInUp 1s forwards;
}

.animated-container:nth-child(1) .animated-line {
    animation-delay: 0.3s;
}

.animated-container:nth-child(2) .animated-line {
    animation-delay: 0.6s;
}

.animated-container:nth-child(3) .animated-line {
    animation-delay: 0.9s;
}

.animated-container:nth-child(4) .animated-line {
    animation-delay: 1.2s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
} */

/* Blur fond d'écran non utilisé */
/* .blur-bg {
    backdrop-filter: blur(10px); */
/* Filtrer l'image de fond avec un flou */
/* -webkit-backdrop-filter: blur(10px); */
/* Pour une compatibilité avec certains navigateurs */
/* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
} */

/* Styles pour la navbar opaque */
/* .navbar.bg-opaque {
    background-color: rgba(255, 255, 255, 0.3) !important; */
/* Couleur de fond blanche avec 80% d'opacité */
/* transition: background-color 0.3s ease-in-out; */
/* Transition pour l'effet fluide */
/* } */

/* Styles pour la flèche et le texte */
/* .arrow-container {
    position: fixed;
    bottom: 40px;
    right: 30px;
    text-align: center;
    cursor: pointer;
}

.arrow {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 12px solid white;
    margin-bottom: 10px;
}

.text-vertical {
    writing-mode: vertical-rl; */
/* Écriture verticale */
/* transform: rotate(180deg); */
/* Rotation pour l'orientation verticale */
/* } */


/* Overlay parcours non utilisé */
/* .image-box {
    position: relative;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.5s ease;
}

.image-box:hover .overlay {
    height: 100%;
}

.text {
    color: white;
    font-size: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
} */