:root {
	--header-bg: url('../media/background_1_lbdw.jpg');
	/* --hero-bg removed as we don't want the brown banner anymore */
	--accent: #ffcc00;
	--nav-height: 70px;
	/* Adjusted to match new navbar height approx */
}

@font-face {
	font-family: 'Anton';
	src: url('../font/Anton-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

html,
body {
	height: 100%;
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	font-weight: bold;
	/* Make all text bold as requested */
	color: #fff
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.card-title {
	font-family: 'Anton', sans-serif;
	letter-spacing: 0.05em;
	/* Anton usually looks better with spacing */
}

/* Global blurred background applied to entire site */
body {
	position: relative;
	min-height: 100vh;
	background: transparent
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background-image: var(--header-bg);
	background-size: cover;
	background-position: center center;
	transform: scale(1.03);
	filter: blur(4px) brightness(.55)
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.12))
}

/* Accessibility */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden
}

.skip-link:focus {
	left: 8px;
	top: 8px;
	width: auto;
	height: auto;
	padding: 8px 12px;
	background: #000000;
	color: #fff;
	z-index: 9999
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth
}

/* Header hero (separate hero behind title) */
/* Main Welcome Hero Section */
.welcome-hero {
	position: relative;
	min-height: 100vh;
	/* Takes full viewport height */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 1rem;
	color: #fff;
	/* No background here, so it sees the body background */
}

.header-inner {
	position: relative;
	z-index: 2;
	max-width: 1100px;
	margin: 0 auto
}

.site-title {
	font-size: clamp(1.5rem, 4vw, 3.25rem);
	margin: 0 0 .5rem;
	letter-spacing: 0.02em
}

.site-subtitle {
	font-size: clamp(.9rem, 2vw, 1.25rem);
	margin: 0 0 1rem;
	opacity: .95
}

.hero-cta {
	display: inline-block;
	padding: .75rem 1.25rem;
	background: var(--accent);
	color: #000000;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600
}

/* Reveal animation */
.reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .6s ease, transform .6s ease
}

.reveal.is-visible {
	opacity: 1;
	transform: none
}

/* Footer button */
footer.site-footer {
	padding: 1.25rem 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.04);
	text-align: center
}

.footer-btn {
	display: inline-block;
	padding: .6rem 1rem;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	border: none;
	cursor: pointer
}

.footer-btn:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px
}

/* New Navbar Styles from Request */
#mainNavbar {
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#mainNavbar.transparent {
	background-color: rgba(255, 255, 255, 0.8) !important;
	/* Slightly transparent white/light */
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Ensure navbar links are visible on dark background if needed, or stick to user request style */
/* The user request had text-black for links, but our site is dark theme. 
   We should probably adapt to keep text white/light for our dark theme, 
   OR if we strictly follow the user request, the navbar is white.
   Let's try to adapt the user's "functional" request to our "dark" theme first, 
   or if we must use the white navbar, we need to make sure it looks good.
   
   The user said "adapter cette page web à partir de cette base".
   The base has a white navbar. Our site is dark.
   A white navbar might look jarring. 
   I will use a dark navbar that becomes transparent/translucent, 
   but keep the structure requested.
*/

/* Overriding Bootstrap navbar for our dark theme preference, 
   but keeping the structure/logic requested. */
.navbar {
	background-color: rgba(0, 0, 0, 0.2);
	/* Initial state */
	padding-top: 1rem;
	padding-bottom: 1rem;
}

#mainNavbar.transparent {
	background-color: rgba(0, 0, 0, 0.479) !important;
	/* Dark background on scroll */
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.navbar-brand,
.nav-link {
	color: #fff !important;
}

.nav-link:hover {
	color: var(--accent) !important;
}

.navbar-toggler {
	border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Center container helpers */
.center-container {
	padding-top: 80px;
	/* Offset for fixed navbar */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* Align content to the top */
	align-items: center;
	text-align: center;
}

/* Main content spacing */
main {
	padding: 0;
	/* Remove default padding as we handle it in sections */
}

/* Images responsive */
img {
	max-width: 100%;
	height: auto
}

/* News Section Styles */
.news-card {
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
	border-color: var(--accent);
}

.news-card .card-body {
	padding: 1.5rem;
}

.news-card .card-title {
	color: var(--accent);
	font-weight: 700;
}

.news-meta {
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 0.9rem;
}

.news-content {
	color: rgba(255, 255, 255, 0.9);
}

.news-image img {
	max-height: 300px;
	object-fit: cover;
	width: 100%;
	border-radius: 8px;
}

/* Instagram Feed Styles */
.insta-wrapper {
	backdrop-filter: blur(4px);
}

.insta-item {
	display: block;
	overflow: hidden;
	border-radius: 4px;
	position: relative;
	aspect-ratio: 1/1;
	/* Square images */
}

.insta-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.insta-item:hover img {
	transform: scale(1.1);
}

/* Toggle Button Custom Style */
#news-toggle-btn {
	border-color: var(--accent);
	color: var(--accent);
}

#news-toggle-btn:hover {
	background-color: var(--accent);
	color: #000;
}

/* About Section Layout - Updated for Grid */
.about-text {
	font-size: 1.25rem;
	line-height: 1.6;
}

.about-image-wrapper img {
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.about-image-wrapper img:hover {
	transform: scale(1.02);
}

/* Desktop Layout specific adjustments if needed, 
   but Bootstrap grid handles most of it now. */
@media (min-width: 768px) {
	.about-text {
		text-align: left;
	}
}

/* Override for Welcome Section to remain centered */
#welcome-section {
	justify-content: center;
}

/* Footer Social Links */
.footer-links {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	/* Ensure successful wrap on very small screens */
}

.footer-link {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 1.1rem;
	font-weight: 500;
	transition: color 0.3s ease, transform 0.2s ease;
	padding: 0.5rem;
	/* Touch target size */
}

.footer-link:hover,
.footer-link:focus {
	color: var(--accent);
	transform: translateY(-2px);
}