/* MAIN */
:root {
	--bs-primary: #5170FF;
	--bs-primary-rgb: 81, 112, 255;
}
html, body {
	overflow-x: hidden;
}
.ff-1{
	font-family: 'Sanchez', serif; 
	font-weight: 600 !important;
	color: #343a40;
}
.hero {
	height: 100vh;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	background: url('../img/Photo/Back3.jpg') no-repeat center center/cover;
}
.hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(to right, rgba(220, 245, 253, 1) 30%, rgba(255, 255, 255, 0) 70%);
}
.text-justify {
    text-align: justify;
    text-justify: inter-word;
}
/* Titres de section principaux, similaires à ceux de la page d'accueil */
.display-6.fw-semibold, .training-title {
	font-family: 'Sanchez', serif; /* Utilisation de Sanchez pour les titres */
	font-weight: 600 !important;
	color: #343a40;
}
.navbar{background: linear-gradient(180deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);}

/* Styles pour l'effet de dégradé sur le bouton de la navbar */
.btn-navbar-gradient {
	position: relative;
	overflow: hidden;
	z-index: 1; /* Assure que le texte est visible au-dessus du dégradé */
	background-color: #f8f9fa; /* Couleur de fond initiale (btn-light) */
	color: #212529; /* Couleur du texte initiale (text-black) */
	transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-navbar-gradient::before {
	content: '';
	position: absolute;
	top: var(--y, 50%); /* Position initiale au centre, mise à jour par JS */
	left: var(--x, 50%); /* Position initiale au centre, mise à jour par JS */
	width: 0;
	height: 0;
	background: radial-gradient(circle at center, #007bff 0%, #6f42c1 50%, transparent 100%);
	transform: translate(-50%, -50%); /* Centre le dégradé sur le curseur */
	border-radius: 50%;
	opacity: 0;
	transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
	z-index: -1; /* Place le pseudo-élément derrière le texte */
}

.btn-navbar-gradient:hover::before {
	width: 200%; /* Agrandit le dégradé pour couvrir tout le bouton */
	height: 200%;
	opacity: 1;
}

.btn-navbar-gradient:hover {
	color: white; /* Change la couleur du texte en blanc au survol */
}

/* Formation */

.fs-op {
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
.card-custom {
border-radius: 1.5rem; /* Coins arrondis pour les cartes */
border: 1px solid #e0e0e0; /* Bordure légère */
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); /* Ombre légère */
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%; /* Assure que les cartes ont la même hauteur */
background-color: #ffffff;
}
.card-custom:hover {
transform: translateY(-5px);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
}
.card-img-top-custom {
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
object-fit: cover;
height: 180px; /* Hauteur fixe pour les images des cartes */
}
.card-title-custom {
font-size: 1.75rem;
font-weight: 600;
color: #4a4a4a;
}
.card-text-custom {
color: #6c757d;
font-size: 0.95rem;
}
/* Bouton "Rendez-vous" avec dégradé, inspiré de l'image 2.png */
.btn-gradient-purple-blue {
background: linear-gradient(to right, #6f42c1, #007bff);
border: none;
color: white;
border-radius: 0.75rem;
padding: 0.75rem 1.5rem;
font-weight: 600;
transition: opacity 0.3s ease;
}
.btn-gradient-purple-blue:hover {
opacity: 0.9;
color: white;
}
.btn-outline-purple {
color: #6f42c1; /* Texte violet */
border-color: #6f42c1; /* Bordure violette */
background-color: transparent;
border-radius: 0.75rem;
padding: 0.75rem 1.5rem;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-outline-purple:hover {
color: white; /* Texte blanc au survol */
background: linear-gradient(to right, #6f42c1, #007bff); /* Dégradé au survol */
border-color: #6f42c1; /* La bordure reste violette pour un effet de remplissage */
}		

/* Styles pour les badges de difficulté et durée */
.badge-custom {
background-color: #e9ecef; /* Couleur de fond des badges */
color: #495057; /* Couleur du texte des badges */
padding: 0.5rem 1rem;
border-radius: 1rem;
font-weight: 500;
}
.stat-box {
background-color: #ffffff;
border-radius: 1.5rem;
padding: 2rem;
text-align: center;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
height: 100%;
}
.stat-value {
font-size: 3rem;
font-weight: 700;
color: #007bff; /* Couleur primaire de Bootstrap */
}
.stat-description {
font-size: 1.1rem;
color: #4a4a4a;
}
.quote-section {
background-color: #f0f3f7; /* Couleur de fond légèrement différente pour les citations */
border-radius: 1.5rem;
padding: 3rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
}
.quote-icon {
font-size: 4rem;
color: #6f42c1; /* Couleur violette pour les icônes de citation */
margin-bottom: 1rem;
}
.quote-text {
font-size: 1.5rem;
font-style: italic;
color: #343a40;
line-height: 1.6;
}
.quote-author {
font-size: 1.1rem;
font-weight: 600;
color: #6c757d;
margin-top: 1rem;
}
.logo-img {
max-height: 50px;
object-fit: contain;
margin: 0 1rem;
}

       .header-section, .content-section {
            background-color: #ffffff; /* Fond blanc pour les sections principales */
            border-radius: 1.5rem; /* Coins arrondis pour les sections */
            padding: 3rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); /* Ombre légère pour la profondeur */
        }
        /* Bouton "Prendre RDV" avec dégradé, inspiré de l'image 2.png */
        .btn-gradient-purple-blue {
            background: linear-gradient(to right, #6f42c1, var(--bs-primary)); /* Utilise la nouvelle couleur primaire */
            border: none;
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 0.75rem;
            font-weight: 600;
            transition: opacity 0.3s ease;
        }
        .btn-gradient-purple-blue:hover {
            opacity: 0.9;
            color: white;
        }
        /* Styles personnalisés pour les onglets de navigation (nav-tabs) */
        .nav-tabs-custom .nav-link {
            color: #6c757d; /* Couleur du texte des onglets inactifs */
            font-weight: 600;
            border: none;
            border-bottom: 3px solid transparent; /* Bordure inférieure transparente pour l'indicateur */
            padding-bottom: 0.75rem;
            margin-right: 1.5rem; /* Espacement entre les onglets */
            font-family: 'Inter', sans-serif; /* Assurer la police Inter pour les onglets */
        }
        .nav-tabs-custom .nav-link.active {
            color: #6f42c1; /* Couleur du texte de l'onglet actif (violet) */
            border-bottom-color: #6f42c1; /* Couleur de la bordure inférieure de l'onglet actif */
            background-color: transparent; /* Pas de fond pour l'onglet actif */
        }
        .nav-tabs-custom .nav-link:hover {
            border-bottom-color: #adb5bd; /* Couleur de la bordure inférieure au survol */
        }
        /* Espacement pour le contenu des sections */
        .content-section {
            margin-top: 2rem;
        }
        /* Titres à l'intérieur des sections de contenu */
        .content-section h3 {
            font-family: 'Sanchez', serif; /* Utilisation de Sanchez pour les sous-titres */
            font-size: 2rem;
            font-weight: 600;
            color: #4a4a4a;
            margin-bottom: 1.5rem;
        }
        .content-section h4 {
            font-family: 'Sanchez', serif; /* Utilisation de Sanchez pour les sous-titres */
            font-weight: 600;
            color: #4a4a4a;
        }
        /* Liste sans puces */
        .content-section ul {
            list-style: none;
            padding-left: 0;
        }
        /* Éléments de liste */
        .content-section ul li {
            margin-bottom: 0.75rem;
            color: #4a4a4a;
        }
        /* Icônes dans les listes */
        .content-section ul li i {
            color: #28a745; /* Couleur verte pour les coches */
            margin-right: 0.75rem;
        }
        /* Titres avec icônes */
        .icon-title {
            font-family: 'Sanchez', serif; /* Utilisation de Sanchez pour les titres avec icônes */
            font-size: 1.8rem;
            font-weight: 600;
            color: #4a4a4a;
            margin-bottom: 1rem;
        }
        .icon-title i {
            color: #6f42c1; /* Couleur violette pour les icônes de titre */
            margin-right: 0.75rem;
        }
        /* Styles pour les badges de difficulté et durée */
        .badge-custom {
            background-color: #e9ecef; /* Couleur de fond des badges */
            color: #495057; /* Couleur du texte des badges */
            padding: 0.5rem 1rem;
            border-radius: 1rem;
            font-weight: 500;
        }