@charset "utf-8";

/* ===============================
   VOYANCEPEOPLE — BASE (Bootstrap 5)
   =============================== */

:root{
	--vp-ink: #2b2b2b;
	--vp-muted: rgba(43,43,43,.72);

	--vp-bg: #f4efea;
	--vp-bg2: #efe7df;

	--vp-card: rgba(255,255,255,.58);
	--vp-cardBorder: rgba(74,57,89,.12);

	--vp-green: #3f5a4a;
	--vp-green2: #2f4438;

	--vp-bronze: #b07a4a;
	--vp-bronze2: #925f36;

	--vp-off: rgba(43,43,43,.35);

	--vp-radius: 22px;
	--vp-shadow: 0 14px 40px rgba(20, 18, 18, .10);
	--vp-shadow2: 0 10px 26px rgba(20, 18, 18, .10);
}

html, body{
	height: 100%;
}

body{
	font-family: "Raleway", Arial, sans-serif;
	color: var(--vp-ink);
	margin: 0;
	background:
		radial-gradient(800px 420px at 15% 5%, rgba(63,90,74,.16), transparent 55%),
		radial-gradient(700px 420px at 85% 10%, rgba(176,122,74,.16), transparent 55%),
		linear-gradient(180deg, var(--vp-bg), var(--vp-bg2));
	padding-top: 74px;
}

/* ===============================
   NAV
   =============================== */

.vp-nav{
	background: rgba(244,239,234,.78);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(74,57,89,.10);
}

.vp-brand{
	font-family: "Playfair Display", serif;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--vp-ink);
	text-decoration: none;
}

.vp-nav .nav-link{
	color: rgba(43,43,43,.78);
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
}

.vp-nav .nav-link:hover,
.vp-nav .nav-link.active{
	color: var(--vp-ink);
}

.vp-toggler{
	border: 0;
	color: var(--vp-ink);
	font-size: 1.8rem;
	padding: .25rem .35rem;
}

.vp-toggler:focus{
	box-shadow: none;
}

/* ===============================
   BUTTONS
   =============================== */

.vp-btn{
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: .01em;
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
}

.vp-btn--lg{
	padding: .92rem 1.15rem;
}

.vp-btn--pill{
	padding: .68rem 1rem;
}

.vp-btn--primary{
	background: linear-gradient(180deg, rgba(63,90,74,.95), rgba(47,68,56,.95));
	color: #fff;
	border-color: rgba(47,68,56,.35);
	box-shadow: 0 10px 24px rgba(47,68,56,.18);
}

.vp-btn--primary:hover{
	background: linear-gradient(180deg, rgba(47,68,56,.98), rgba(39,56,46,.98));
	color: #fff;
}

.vp-btn--soft{
	background: rgba(255,255,255,.62);
	color: var(--vp-ink);
	border-color: rgba(74,57,89,.14);
	box-shadow: 0 10px 24px rgba(20,18,18,.06);
}

.vp-btn--soft:hover{
	background: rgba(255,255,255,.78);
	color: var(--vp-ink);
}

.vp-btn--busy{
	background: linear-gradient(180deg, rgba(176,122,74,.95), rgba(146,95,54,.95));
	color: #fff;
	border-color: rgba(146,95,54,.30);
	box-shadow: 0 10px 24px rgba(146,95,54,.18);
}

.vp-btn--disabled{
	background: rgba(43,43,43,.16);
	color: rgba(43,43,43,.55);
	border-color: rgba(43,43,43,.10);
}

/* ===============================
   HERO (plein écran + courbe)
   =============================== */

.vp-hero{
	position: relative;
	padding: 84px 0 120px;
	overflow: hidden;

	border-radius: 0;

	/* même fond que body */
	background:
		radial-gradient(800px 420px at 15% 5%, rgba(63,90,74,.16), transparent 55%),
		radial-gradient(700px 420px at 85% 10%, rgba(176,122,74,.16), transparent 55%),
		linear-gradient(180deg, var(--vp-bg), var(--vp-bg2));

	isolation: isolate;
}

.vp-hero--cover{
	min-height: 520px;
	display: flex;
	align-items: center;
}

.vp-heroInner{
	position: relative;
	z-index: 5;
}

.vp-heroBg{
	position: absolute;
	inset: 0;
	z-index: 0;
}

.vp-heroBg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(1.02) contrast(1.02);
}

.vp-heroOverlay{
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;

	background:
		/* voile global léger (au lieu d'un "fond blanc") */
		linear-gradient(
			180deg,
			rgba(244,239,234,.12) 0%,
			rgba(244,239,234,.22) 45%,
			rgba(244,239,234,.32) 75%,
			rgba(244,239,234,.40) 100%
		),

		/* boost de lumière côté texte (allégé) */
		radial-gradient(
			900px 520px at 22% 40%,
			rgba(244,239,234,.72),
			rgba(244,239,234,.38) 42%,
			rgba(244,239,234,.10) 72%,
			rgba(244,239,234,0) 84%
		),

		/* voile latéral (allégé) */
		linear-gradient(
			90deg,
			rgba(244,239,234,.50) 0%,
			rgba(244,239,234,.26) 34%,
			rgba(244,239,234,.10) 60%,
			rgba(244,239,234,0) 78%
		);
}

.vp-heroBg img{
	filter: saturate(1.05) contrast(1.08);
}

.vp-heroCopy{
	max-width: 560px;
}

.vp-kicker{
	background: rgba(255,255,255,.58);
}

.vp-h1{
	margin: 0 0 14px;
	font-family: "Playfair Display", serif;
}

.vp-lead{
	margin: 0 0 18px;
}

/* Vague en bas du hero (style maquette) */
.vp-heroWave{
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 190px;
	z-index: 3;
	pointer-events: none;
}

.vp-heroWave svg{
	width: 100%;
	height: 100%;
	display: block;
}

.vp-heroWave{
	/* la vague doit se fondre avec le fond général */
	mix-blend-mode: normal;
}

/* Responsive */
@media (max-width: 991.98px){
	.vp-hero{
		padding: 74px 0 92px;
		min-height: 460px;
	}
	.vp-heroOverlay{
		background:
			radial-gradient(760px 520px at 30% 40%, rgba(244,239,234,.92), rgba(244,239,234,.60) 46%, rgba(244,239,234,.20) 74%, rgba(244,239,234,0) 86%),
			linear-gradient(90deg, rgba(244,239,234,.90) 0%, rgba(244,239,234,.55) 44%, rgba(244,239,234,.18) 72%, rgba(244,239,234,0) 90%);
	}
}

@media (max-width: 575.98px){
	.vp-hero{
		padding: 64px 0 112px;
		min-height: 420px;
		border-radius: 0;
	}
	.vp-heroCopy{
		max-width: 100%;
	}
	.vp-heroWave{ 
		height: 120px; 
	}
}


/* ===============================
   SECTIONS
   =============================== */

.vp-section{
	padding: 40px 0;
}

.vp-section--tight{
	padding: 26px 0 34px;
}

.vp-h2{
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	margin: 0;
}

/* ===============================
   AVATARS ROW
   =============================== */

.vp-avatarsRow{
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
	justify-items: center;
}

.vp-avatarItem{
	text-align: center;
	padding: 14px 10px 10px;
	width: 100%;
	max-width: 180px;
}

.vp-avatarRing{
	position: relative;
	width: 96px;
	height: 96px;
	margin: 0 auto 10px;
	border-radius: 999px;
	padding: 3px;
	background: rgba(255,255,255,.55);
	border: 1px solid rgba(74,57,89,.12);
	box-shadow: var(--vp-shadow2);
}

.vp-avatarRing img{
	width: 100%;
	height: 100%;
	border-radius: 999px;
	object-fit: cover;
	display: block;
	filter: saturate(1.02) contrast(1.02);
}

.vp-ring--online{
	border-color: rgba(63,90,74,.25);
}

.vp-ring--busy{
	border-color: rgba(176,122,74,.30);
}

.vp-ring--offline{
	border-color: rgba(43,43,43,.18);
}

.vp-statusDot{
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 3px solid rgba(244,239,234,.95);
	box-shadow: 0 10px 20px rgba(20,18,18,.14);
}

.vp-dot--online{ background: rgba(63,90,74,.95); }
.vp-dot--busy{ background: rgba(176,122,74,.95); }
.vp-dot--offline{ background: rgba(43,43,43,.35); }

.vp-avatarName{
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 1.15rem;
	margin-top: 2px;
}

.vp-avatarMeta{
	color: rgba(43,43,43,.68);
	font-weight: 700;
	font-size: .95rem;
	margin-bottom: 10px;
}

.vp-metaDot{
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	margin-right: 8px;
	transform: translateY(1px);
}

/* ===============================
   CARDS EXPERTS
   =============================== */

.vp-card{
	position: relative;
	border-radius: var(--vp-radius);
	background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.46));
	border: 1px solid var(--vp-cardBorder);
	box-shadow: var(--vp-shadow);
	overflow: hidden;
}

.vp-card--expert{
	padding: 18px 18px 16px;
}

.vp-cardTop{
	display: flex;
	justify-content: center;
	padding-top: 6px;
}

.vp-cardBody{
	text-align: center;
	padding: 12px 10px 8px;
}

.vp-h3{
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 1.4rem;
	margin: 0 0 6px;
}

.vp-sub{
	margin: 0 0 10px;
	color: rgba(43,43,43,.70);
	font-weight: 600;
}

.vp-inlineStatus{
	font-family: "Raleway", Arial, sans-serif;
	font-size: .95rem;
	font-weight: 700;
	color: rgba(43,43,43,.55);
}

.vp-rating{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: rgba(43,43,43,.78);
	margin-bottom: 6px;
}

.vp-stars i{
	margin: 0 1px;
}

.vp-score{
	font-weight: 800;
}

.vp-cardCta{
	padding: 12px 10px 2px;
}

.vp-ribbon{
	position: absolute;
	top: 14px;
	left: -44px;
	transform: rotate(-35deg);
	background: rgba(176,122,74,.95);
	color: #fff;
	font-weight: 800;
	letter-spacing: .02em;
	padding: 8px 64px;
	border-radius: 999px;
	box-shadow: 0 12px 26px rgba(146,95,54,.20);
}

/* ===============================
   CTA FINAL
   =============================== */

.vp-section--cta{
	padding: 36px 0 56px;
}

.vp-ctaCard{
	border-radius: calc(var(--vp-radius) + 6px);
	background:
		radial-gradient(620px 240px at 20% 15%, rgba(63,90,74,.16), transparent 60%),
		radial-gradient(620px 240px at 80% 10%, rgba(176,122,74,.16), transparent 60%),
		linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.40));
	border: 1px solid rgba(74,57,89,.12);
	box-shadow: var(--vp-shadow);
	padding: 26px 18px;
}

/* ===============================
   FOOTER
   =============================== */

.vp-footer{
	padding: 40px 0 22px;
	background: rgba(255,255,255,.30);
	border-top: 1px solid rgba(74,57,89,.12);
}

.vp-footerTitle{
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0 0 10px;
}

.vp-footerList{
	list-style: none;
	padding: 0;
	margin: 0;
}

.vp-footerList li{
	margin-bottom: 8px;
}

.vp-footerList a{
	color: rgba(43,43,43,.78);
	text-decoration: none;
	font-weight: 600;
}

.vp-footerList a:hover{
	color: rgba(43,43,43,.95);
	text-decoration: underline;
}

.vp-footerContact a{
	color: rgba(43,43,43,.78);
	text-decoration: none;
	font-weight: 700;
}

.vp-footerContact a:hover{
	text-decoration: underline;
}

.vp-social{
	display: flex;
	gap: 10px;
}

.vp-socialLink{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: rgba(255,255,255,.55);
	border: 1px solid rgba(74,57,89,.12);
	color: rgba(43,43,43,.80);
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(20,18,18,.06);
}

.vp-socialLink:hover{
	background: rgba(255,255,255,.75);
	color: rgba(43,43,43,.95);
}

.vp-footerBottom{
	margin-top: 18px;
	text-align: center;
	color: rgba(43,43,43,.68);
}

.vp-footerLine{
	height: 1px;
	background: rgba(74,57,89,.12);
	margin: 0 auto 12px;
	max-width: 520px;
}

/* ===============================
   RESPONSIVE
   =============================== */

@media (max-width: 991.98px){
	body{ padding-top: 70px; }
	.vp-avatarsRow{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vp-avatarItem{ max-width: 220px; }
}

@media (max-width: 575.98px){
	.vp-avatarsRow{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vp-avatarRing{ width: 90px; height: 90px; }
	.vp-heroWave{ height: 160px; }
}