@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
}

/* Thème & couleurs */
:root {
	--brand-primary: #22C463;
	--bs-primary: var(--brand-primary);
    --bs-font-sans-serif: 'Poppins', sans-serif;
    --radius-global: 10px;
	--color-success: #22ab5b;
	--color-danger: #c23616;
}

/* Sticky footer layout */
html, body { height: 100%; }
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
    background: #181A1B !important;
    color: #fff;
}
main { flex: 1 0 auto; }

/* Logo */
.brand-logo {
	height: 50px;
    width: auto;
    padding: 10px;
}

/* Fond sombre du header avec transparence et blur */
.bg-dark-custom {
	background: #181a1ba6 !important;
	border-bottom: 1.5px solid #232627 !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Nom du site en vert et plus gros */
.brand-green {
	color: #22C463 !important;
	font-size: 2rem;
	font-family: inherit;
}

.navbar-nav {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-navbar-color);
    --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
    --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    gap: 5px; /* au lieu de 10px */
}

/* Liens du menu */
.navbar .nav-link {
	padding: .5rem 2.2rem;
	font-weight: 500;
	color: #fff;
	position: relative;
	transition: color .2s ease;
	background: transparent !important;
}

/* Au survol, seul le texte devient vert */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
	color: #22C463 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

/* Supprimer tout effet de barre/bordure/fond */
.navbar .nav-link::after,
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
	content: none !important;
	display: none !important;
}

.navbar .nav-link.active {
	color: #22C463;
}

/* Centrage du menu */
.navbar-nav {
	text-align: center;
}

.navbar-toggler:focus {
	outline: none;
	box-shadow: 0 0 0 0.2rem rgba(34, 196, 99, 0);
}

/* Boutons */
.btn-primary {
	--bs-btn-bg: var(--brand-primary);
	--bs-btn-border-color: var(--brand-primary);
	--bs-btn-hover-bg: #1fb55b;
	--bs-btn-hover-border-color: #1fb55b;
	--bs-btn-active-bg: #199749;
	--bs-btn-active-border-color: #199749;
}

.btn-link {
	color: var(--brand-primary);
	text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* Bouton Panel */
.btn-panel {
	background: transparent;
	color: #fff;
	border: 1px solid #444;
	border-radius: var(--radius-global) !important;
	font-weight: 600;
	padding: 0.4rem 1.2rem;
	transition: border-color .2s, color .2s;
}
.btn-panel:hover, .btn-panel:focus {
	color: #22C463;
	border-color: #22C463;
	background: rgba(34,196,99,0.05);
}

/* Toggler (burger) */
.navbar-toggler .ti {
	line-height: 1;
	color: #fff !important;
}

/* Padding pour compenser la navbar sticky */
.pt-navbar {
	padding-top: 72px; /* Ajuste selon la hauteur réelle de ta navbar */
}

/* Ajustements responsive */
@media (max-width: 991.98px) {
	.navbar .navbar-collapse {
		margin-top: .5rem;
	}
	.navbar .nav-link::after {
		left: 0.5rem;
		right: 0.5rem;
	}
	.collapse.navbar-collapse .d-flex {
		justify-content: center !important;
		width: 100%;
	}
	.collapse.navbar-collapse .btn-panel {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Offcanvas mobile sombre */
.offcanvas-dark {
	background: #181A1B;
	color: #fff;
	width: min(85vw, 380px);
	border-right: 1.5px solid #232627;
}
.offcanvas-dark .offcanvas-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1rem;
}
.offcanvas-dark .navbar-nav .nav-link {
	color: #fff;
	padding: .35rem 0;
	transition: color .2s ease;
}
.offcanvas-dark .navbar-nav .nav-link:hover,
.offcanvas-dark .navbar-nav .nav-link:focus,
.offcanvas-dark .navbar-nav .nav-link.active {
	color: #22C463 !important;
}
.offcanvas-dark .btn-panel {
	display: inline-flex;
	align-items: center; /* Ajouté pour centrer verticalement l'icône */
	gap: 7px; /* Optionnel : espace entre icône et texte */
}

/* Centrage du bouton Panel dans le offcanvas */
@media (max-width: 991.98px) {
	.offcanvas-dark .offcanvas-body {
		gap: 1rem;
	}
}

/* Inputs, selects, textarea */
input,
select,
textarea {
    border-radius: var(--radius-global) !important;
}

.btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 109, 253, 0);
    opacity: 1;
}

/* Centrage absolu du menu en Desktop */
@media (min-width: 992px) {
	.navbar .container { position: relative; }
	.navbar .nav-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}

.fs-25 {
    font-size: 25px;
}

.fs-48 {
    font-size: 48px;
}

.offcanvas-dark .offcanvas-header button[data-bs-dismiss="offcanvas"] {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.offcanvas-dark .offcanvas-header .ti-x {
	color: #fff !important;
	font-size: 2rem !important;
	line-height: 1;
}

/* Forcer les colonnes des sections (ex: about-tech) à s'étirer pour égaliser la hauteur des cards */
.about-section .row > [class*="col-"] {
	display: flex;
	align-items: stretch;
}

/* Les cartes prennent toute la hauteur de la colonne et s'organisent en colonne */
.about-tech-card,
.about-fonction-card,
.about-box {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Optionnel : garantir que le contenu principal (texte) occupe l'espace restant */
.about-tech-card .about-tech-desc,
.about-fonction-card .about-fonction-desc {
	flex: 1 1 auto;
}

/* Personnalisation des alertes Bootstrap (local à cette page) */
.alert { border-width: 1.5px; border-radius: 10px; }

.alert-success {
	--bs-alert-bg: #0f3d2a;        /* fond vert foncé */
	--bs-alert-border-color: #1fb55b02; /* bordure vert brand */
	--bs-alert-color: #c7ffdf;     /* texte vert pâle lisible */
}
.alert-warning {
	--bs-alert-bg: #3d2f0f;        /* fond ocre foncé */
	--bs-alert-border-color: #f0b42902; /* bordure jaune */
	--bs-alert-color: #ffe8b5;     /* texte jaune pâle */
}
.alert-danger {
	--bs-alert-bg: #3d1515;        /* fond rouge foncé */
	--bs-alert-border-color: #ff4d5002; /* bordure rouge */
	--bs-alert-color: #ffd6d6;     /* texte rose pâle */
}

/* Croisillons blancs pour les boutons de fermeture des alertes */
.btn-close-white {
	filter: invert(1) grayscale(100%) brightness(200%);
	opacity: .9;
}
.btn-close-white:hover { opacity: 1; }

.btn-primary{background:var(--brand-primary);color:#ffffff;border-color:var(--brand-primary)}
.btn-primary:hover{background:var(--brand-primary);border-color:var(--brand-primary)}
.btn-primary.btn-beta{background:#38bdf8;border-color:#38bdf8;color:#0b1220}
.btn-secondary{background:transparent;color:#9ca3af;cursor:not-allowed}