/* ################### */
/* ###   GENERAL   ### */
/* ################### */

	html {scroll-behavior: smooth;}
	
	/* Pour plus tard, thème clair */
	body.light {
		--body-bkg: rgba(255,255,255,0.8);
		background: linear-gradient(to bottom, rgba(5,10,15,0.02) 0%, rgba(5,10,15,0.02) 100%), 
		url('../images/fondClair.jpg') center center / cover no-repeat fixed;
		
	}
	/* Fin pour plus tard, thème clair */
		
	body::before {
		content: "";
		position: fixed;
		inset: 0;
		background: var(--body-before-bkg);
		pointer-events: none;
		background: rgba(0,0,0,0.50);
	}
	
	body {
		background: var(--body-bkg);
		color: var(--color-text-strong);
		margin: 0;
		font-family: inter;
		background: linear-gradient(to bottom, rgba(5,10,15,0.85) 0%, rgba(5,10,15,0.85) 100%), 
		url('../images/fond.jpg') center center / cover no-repeat fixed;
	}
	
	.site-header {padding-top: 100px;}


/* ################### */
/* ###   CONTENU   ### */
/* ################### */
	
/*====== CONTAINER  ======*/
	.section{margin-bottom: 40px;}
	
	.section:first-child {margin-top: 0;}

/* ===== BREADCRUMB ===== */	

	.breadcrumb {
		font-size: 12px;
		margin: 3px 0;
		color: #aaa;
	}

	.breadcrumb a {
		color: #4fc3f7;
		text-decoration: none;
	}

	.breadcrumb a:hover {text-decoration: underline;}

	.breadcrumb span {color: #efefef;}
	
/* ===== BARRE de TITRE ===== */
	.section.barre {margin-bottom: 0;}
	
	.page-title {
	    background: var(--barre-shadow-bkg);
		color: var(--color-text-strong);
		text-align: center;
		padding: 15px 0;
		font-size: 28px;
		font-weight: 600;
	}

	.main-content {
		background: #f4f6f9;
		background: transparent;
		padding: 40px 0;
	}

	.content-box {
		backdrop-filter: blur(6px);
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 15px;
	}
	
/* ===== BACKtoHEAD ===== */

	#backToHead {
		position: fixed;
		bottom: 1.2rem;
		right: 1.2rem;
		width: 44px;
		height: 44px;
		border-radius: 12px;
		border: none;
		background: rgba(255,255,255,0.85);
		color: #0d6efd;
		backdrop-filter: blur(8px);
		font-size: 1.2rem;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		opacity: 0;
		pointer-events: none;
		transform: translateY(12px);
		transition:
			opacity 0.3s ease,
			transform 0.3s ease,
			background 0.2s ease;
		transform: scale(0.9);
		box-shadow: 0 10px 25px rgba(13,110,253,0.35);
		z-index: 9999;
	}

	#backToHead.show {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	#backToHead:hover {background: #9da2a8;}


/* ################## */
/* ###   FOOTER   ### */
/* ################## */

	.site-footer {
		background: var(--footer-bkg)!important;
		color: var(--footer-text-col);
	}

/*====== TETE FOOTER  ======*/
	.footer-top {padding: 0;}

/*====== PRESENTATION  ======*/
	.footer-presentation {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.footer-avatar {
		width: 80px;
		border-radius: 50%;
		margin-bottom: 15px;
	}

/*====== TEXTE  ======*/
	.footer-text {
		font-size: 14px;
		max-width: 300px;
	}

/*====== TITRE  ======*/
	.footer-nav.navig h5, .footer-nav.info h5 {
		color: var(--footer-title-col);
		font-size: 14px;
		margin-bottom: 5px;
		padding-left:150px;
		text-align:left;
	}
	
	.footer-nav.info h5 {padding-left:50px;}

/*====== LIENS  ======*/
	.footer-nav.navig ul, .footer-nav.info ul {
		list-style: none;
		padding: 0;
		padding-left:170px;
		text-align:left;
	}
	
	.footer-nav.info ul {padding-left:70px;}

	.footer-nav a {
		color: var(--footer-link-col);
		text-decoration: none;
		font-size: 14px;
	}

	.footer-nav a:hover {color: var(--footer-title-col);}

/*====== PIED FOOTER  ======*/
	.footer-bottom {
		border-top: 1px solid var(--footer-pied-border);
		padding:6px 0;
		font-size: 12px;
	}
	
	.footer-bottom .copy {
	    justify-content: space-around;
		flex-direction: row;
	}

/*====== SOCIAL  ======*/
	.footer-social {
		color: var(--footer-link-col);
		font-size: 24px;
		margin-left: -150px;
	}

/*====== SCROLL TOP  ======*/
	.footer-bottom .scroll-top {
		text-decoration: none;
		color: var(--footer-title-col);
		font-size: 18px;
	}
	
/* MODAL GLOBAL */
	.modal-steph .modal-content {
		background: rgba(20, 25, 35, 0.75);
		border: 1px solid rgba(255,255,255,0.08);
		border-radius: 16px;

		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);

		color: #e5e7eb;
	}

	
/* ################## */
/* #####  LOGIN  #### */
/* ################## */


	.auth-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 80px 20px;
	}

	.auth-card {
		width: 100%;
		max-width: 420px;
		padding: 30px;
		border-radius: 15px;

		background: rgba(255,255,255,0.05);
		backdrop-filter: blur(10px);

		box-shadow: 0 0 30px rgba(0,0,0,0.5);
	}

/* 🔥 FORCE colonne propre */
	.auth-card form {
		display: flex;
		flex-direction: column !important;
	}

/* TITRE */
	.auth-card h2 {
		text-align: center;
		margin-bottom: 20px;
	}

/* LABEL */
	.auth-card label {
		display: block;
		margin-top: 15px;
		font-size: 14px;
		opacity: 0.8;
	}

/* INPUT */
	.auth-card input {
		display: block !important;
		width: 100%;
		padding: 10px;
		margin-top: 5px;

		border-radius: 8px;
		border: 1px solid rgba(255,255,255,0.1);

		background: rgba(255,255,255,0.08);
		color: #fff;
	}

	.auth-card input,
	.auth-card label,
	.input-error {width: 100%;}

	.auth-card input:focus {
		outline: none;
		border-color: #38bdf8;
	}

/* BOUTON */
	.auth-card button {
		margin-top: 25px;
		padding: 12px;
		border-radius: 8px;
		border: none;
		background: linear-gradient(90deg, #38bdf8, #818cf8);
		color: #000;
		font-weight: bold;
		cursor: pointer;
	}

	.auth-card button:hover {opacity: 0.9;}

/* ERREURS */
	.input-error {
		display: block;
		color: #f87171;
		font-size: 12px;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.error-global {
		display: block;
		background: rgba(248,113,113,0.1);
		color: #f87171;
		padding: 10px;
		border-radius: 8px;
		margin-bottom: 15px;
		text-align: center;
	}
	
	.alert {
		width: 600px;
		margin: 0 auto 50px auto;
		border: none;
		border-radius: 10px;
		padding: 14px 18px;
		font-size: 14px;
		backdrop-filter: blur(6px);
		box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	}
	
	.alert:hover {
		transform: translateY(-1px);
		transition: 0.2s ease;
	}
		
	.alert-success {
		background: rgba(0, 200, 150, 0.12);
		color: #00d4a3;
		border-left: 4px solid #00d4a3;
	}

	.alert-warning {
		background: rgba(255, 180, 0, 0.12);
		color: #ffb400;
		border-left: 4px solid #ffb400;
	}

	.alert-danger {
		background: rgba(255, 70, 70, 0.12);
		color: #ff4d4d;
		border-left: 4px solid #ff4d4d;
	}

/* FOOTER */
	.auth-footer {
		text-align: center;
		margin-top: 15px;
		font-size: 13px;
	}

	.auth-footer a {color: #38bdf8;}
	

/* ################## */
/* ###   MODAL   ### */
/* ################## */

	.modal-steph .modal-content {
		background: rgba(20,25,35,0.75);
		border-radius: 16px;
		border: 1px solid rgba(255,255,255,0.08);
		backdrop-filter: blur(14px);
		color: #e5e7eb;
	}

	.modal-steph a {
		text-decoration: none;
		position: relative;
		transition: 0.25s;
		color: #cbd5e1;
		background: rgba(255,255,255,0.06);
		padding: 2px 6px;
		border-radius: 6px;
		transition: 0.25s;
		font-size: 0.95em;
	}
	
	.modal-steph a::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -2px;
		width: 0%;
		height: 1px;
		background: linear-gradient(90deg, #60a5fa, #22d3ee);
		transition: 0.3s;
	}

	.modal-steph a:hover {
		background: rgba(96,165,250,0.15);
		color: #efefef;
	}

	.modal-steph a:hover::after {width: 100%;}

	.modal-steph .steph-intro {
		display: flex;
		gap: 20px;
		align-items: center;
		margin-bottom: 30px;
	}

	.modal-steph .steph-intro img {
		width: 90px;
		height: 90px;
		border-radius: 50%;
	}

	.modal-steph .timeline {
		position: relative;
		margin: 30px 0;
		padding-left: 40px;
	}

	.modal-steph .timeline::before {
		content: "";
		position: absolute;
		left: 10px;
		top: 0;
		bottom: 0;
		width: 2px;
		background: rgba(255,255,255,0.1);
	}

	.modal-steph .timeline-item {
		position: relative;
		margin-bottom: 22px;
		padding-left: 12px;
	}

	.modal-steph .timeline-dot {
		position: absolute;
		left: -8px;
		top: 2px;
		width: 12px;
		height: 12px;
		background: #4cc9f0;
		border-radius: 50%;
	}

	.modal-steph .timeline-content h4 {
		font-size: 14px;
		color: #fff;
		margin-bottom: 4px;
	}

	.modal-steph .timeline-content p {
		font-size: 13px;
		color: #cbd5e1;
	}

	.modal-steph .steph-cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
		margin: 30px 0;
	}

	.modal-steph .steph-card {
		background: rgba(255,255,255,0.05);
		padding: 15px;
		border-radius: 12px;
		transition: 0.3s;
	}

	.modal-steph .steph-card:hover {
		transform: translateY(-3px);
		background: rgba(255,255,255,0.08);
	}

	.modal-steph .steph-card h4 {
		margin-bottom: 8px;
		font-size: 14px;
	}

	.modal-steph .steph-content p {
		margin-bottom: 12px;
		font-size: 14px;
		color: #cbd5e1;
	}

	.modal-steph .btn-close-modal {
		background: rgba(255,255,255,0.08);
		border: 1px solid rgba(255,255,255,0.1);
		padding: 6px 14px;
		border-radius: 8px;
		color: #fff;
	}

	.modal-steph .fade-in {
		opacity: 0;
		transform: translateY(10px);
		animation: fadeIn 0.6s ease forwards;
	}

	.modal-steph .fade-in:nth-child(2) { animation-delay: 0.1s; }
	
	.modal-steph .fade-in:nth-child(3) { animation-delay: 0.2s; }
	
	.modal-steph .fade-in:nth-child(4) { animation-delay: 0.3s; }

	@keyframes fadeIn {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}



/* RESPONSIVE */
@media (max-width: 768px) {
    .steph-cards {
        grid-template-columns: 1fr;
    }

    .steph-intro {
        flex-direction: column;
        text-align: center;
    }
}
/* RESPONSIVE */
@media (max-width: 768px) {
    .steph-intro {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .steph-intro img {
        width: 90px;
        height: 90px;
    }
}

/*====== RESPONSIVE  ======*/
	@media (max-width: 992px) {

	/* ################## */
	/* ###   FOOTER   ### */
	/* ################## */

		.footer-top {text-align: center;}

		.footer-text {margin: auto;}

	}

	@media (max-width: 576px) {
	
	/* ################## */
	/* ###   FOOTER   ### */
	/* ################## */
	
		/* PASSAGE en COLONNES */
		.site-footer .row {
			flex-direction: column;
			text-align: center;
		}

		/* COLONNES PLEINE LARGEUR */
		.site-footer .col-md-4 {width: 100%;}

		/* ESPACEMENT BLOCS */
		.footer-nav {margin-top: 20px;}
		
		.footer-text{text-align: justify;}
		
		.footer-avatar {margin-left: 50px;

		/* LIENS VISIBLES */
		.footer-nav a {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 40px;
			padding: 6px 0;
			/* font-size: 16px; A voir en live... */
		}

		/* PIED du FOOTER */
		.footer-bottom {
			flex-direction: column;
			gap: 10px;
			text-align: center;
		}
		
	}