/* ===== VARIABLES & RESET ===== */
:root {
	--color-bg: #f6f4f4;
	--color-white: #ffffff;
	--color-text: #3a3a3a;
	--color-text-light: #6b6b6b;
	--color-accent: #e573eb;
	--color-accent-light: #ebcced;
	--color-accent-dark: #402642;
	--color-border: #ddd;
	--font-body: 'Inter', sans-serif;
	--font-heading: 'Playfair Display', serif;
	--radius: 12px;
	--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	background-color: var(--color-bg);
	color: var(--color-text);
	line-height: 1.7;
	font-size: 16px;
	background-image: url("data:image/svg+xml;utf8,<svg opacity='0.08' xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='10' cy='10' r='2' fill='%23bbbbbb'/></svg>");
}

section:not(:last-child) {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.fade-in {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.9s ease forwards;
}

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

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	line-height: 1.3;
}

h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
}

h2 {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 600;
	margin-bottom: 16px;
}

h3 {
	font-size: 1.25rem;
	font-weight: 600;
	font-style: italic;
}

h4 {
	font-size: 1rem;
	font-weight: 600;
}

p {
	color: var(--color-text-light);
	margin-bottom: 1rem;
}

p:last-child {
	margin-bottom: 0;
}

/* Container des boutons flottants */
#floating-buttons {
	position: fixed;
	bottom: 28px;
	right: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 9999;
}

/* Style général des boutons flottants */
#btnTop,
#btnRencontrer {
	background: var(--color-accent-dark);
	border: none;
	padding: 14px;
	border-radius: 50%;
	cursor: pointer;

	/* Halo lumineux */
	box-shadow:
		0 0 12px rgba(229, 115, 235, 0.6),
		0 4px 20px rgba(0, 0, 0, 0.25);

	transition: all .3s ease;
}

#btnTop,
#btnRencontrer {
	display: none;
}

#btnTop:hover,
#btnRencontrer:hover {
	background: var(--color-accent);
	transform: translateY(-3px) scale(1.07);
	box-shadow:
		0 0 18px rgba(229, 115, 235, 0.8),
		0 10px 26px rgba(0, 0, 0, 0.40);
}

#btnTop svg,
#btnRencontrer svg {
	display: block;
}

/* ================================== */
/* ============= FOOTER ============= */
/* ================================== */
footer {
	background-color: var(--color-accent-dark);
	color: rgba(255, 255, 255, 0.85);
	text-align: center;
	padding: 28px 24px;
	font-size: 0.875rem;
}

footer a:hover {
	color: var(--color-accent-light);
}

.link-pages-legales {
	font-size: 0.6rem;
	text-align: center;
}

/* ================================== */
/* ============= RESEAUX ============ */
/* ================================== */
/* Facebook officiel */
.fb-btn {
	background: #1877F2;
	box-shadow: 0 0 10px rgba(24, 119, 242, 0.45);
}

.fb-btn:hover {
	background: #0f63d0;
	transform: translateY(-4px) scale(1.07);
	box-shadow: 0 0 16px rgba(24, 119, 242, 0.65);
}

/* Instagram officiel */
.insta-btn {
	background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF, #515BD4);
	box-shadow: 0 0 10px rgba(221, 42, 123, 0.45);
}

.insta-btn:hover {
	transform: translateY(-4px) scale(1.07);
	box-shadow: 0 0 16px rgba(221, 42, 123, 0.65);
}

/* LinkedIn — couleur officielle */
.linkedin-btn {
	background: #0A66C2;
	/* bleu officiel LinkedIn */
	box-shadow: 0 0 10px rgba(10, 102, 194, 0.45);
}

.linkedin-btn:hover {
	background: #084f99;
	transform: translateY(-4px) scale(1.07);
	box-shadow: 0 0 16px rgba(10, 102, 194, 0.65);
}

.img-responsive {
	max-width: 100%;
	/* L'image ne sera jamais plus large que son parent */
	height: auto;
	/* Conserve le ratio de l'image pour éviter de l'écraser */
	display: block;
	/* Supprime l'espace vide sous l'image */
}

@media (max-width: 768px) {
	#contact-social-buttons {
		justify-content: center;
		gap: 14px;
	}

	.social-btn {
		width: 42px;
		height: 42px;
	}

	section {
		padding: 60px 18px;
	}

	p {
		line-height: 1.8;
	}

	h2 {
		text-align: center;
	}
}