@import url('https://fonts.googleapis.com/css2?family=Average+Sans&family=Montserrat:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&display=swap');

/* ── Reset wrappers Kadence pour full-width ── */
body.home #main-content,
body.home #main-content * {
	box-sizing: border-box;
}

/* Prevent body background from showing in gaps between sections */
body.home {
	background-color: #050D5C;
}

.hp { font-family: 'Montserrat', sans-serif; }

/* ══════════════════════════════════════
   § 1 – HERO
══════════════════════════════════════ */
.hp-hero {
	position: relative;
	height: 65vh;
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hp-hero__video {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center top;
	z-index: 0;
}
.hp-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 1;
}
.hp-hero__wrap {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1080px;
	padding: 0 60px;
}
.hp-hero__content {
	max-width: 550px;
	text-align: left;
	margin-left: 50px;
}
.hp-hero__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 36px;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 12px;
	line-height: 1.15;
	letter-spacing: 1px;
}
.hp-hero__subtitle {
	font-size: 15px;
	font-style: italic;
	color: rgba(255,255,255,.9);
	margin: 0 0 28px;
	font-weight: 400;
	letter-spacing: .5px;
}
.hp-hero__search {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 30px;
	overflow: visible;
	max-width: 380px;
	margin: 0;
	box-shadow: 0 4px 20px rgba(0,0,0,.25);
	position: relative;
}
.hp-hero__search input {
	border: none !important;
	margin-left: 10px !important;
	outline: none;
	padding: 12px 18px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	color: #444;
	flex: 1;
	background: transparent;
}
.hp-hero__search button {
	border: none;
	background: none;
	cursor: pointer;
	padding: 10px 16px;
	color: #888;
	display: flex;
	align-items: center;
}

/* Dropdown résultats recherche hero */
.hp-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: rgba(8,15,79,0.95);
	border-radius: 0 0 20px 20px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .3s cubic-bezier(0.25,0.46,0.45,0.94), opacity .25s;
	box-shadow: 0 12px 40px rgba(0,0,0,0.3);
	margin-top: -1px;
	z-index: 1000;
}
.hp-search-results.show {
	max-height: 300px;
	overflow-y: auto;
	opacity: 1;
}
.hp-search-group {
	padding: 12px 0;
}
.hp-search-group:not(:last-child) {
	border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hp-search-group-title {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	padding: 8px 14px 4px;
	margin: 0;
}
.hp-search-items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hp-search-item {
	display: block;
}
.hp-search-item a {
	display: block;
	padding: 10px 14px;
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	transition: background .15s;
}
.hp-search-item a:hover {
	background: rgba(255,255,255,0.08);
}
.hp-search-item__title {
	font-weight: 600;
	display: block;
}
.hp-search-item__subtitle {
	font-size: 11px;
	color: rgba(255,255,255,0.6);
	display: block;
}

/* ══════════════════════════════════════
   § 2 – INTRO + 4 CHEMINS
══════════════════════════════════════ */
.hp-intro {
	background: linear-gradient(180deg, #8fa9f6 0%, #444b81 100%);
	padding: 60px 40px;
	text-align: center;
}
.hp-intro__text {
	font-size: 18px;
	color: #fff;
	max-width: 760px;
	margin: 0 auto 36px;
	line-height: 1.8;
	text-align: justify;
}
.hp-intro__text strong { font-weight: 700; }
.hp-intro__heading {
	font-size: 28px;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 8px;
	text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hp-intro__subheading {
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 36px;
	text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hp-intro__pills {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}
.hp-intro__pill {
	display: inline-block;
	padding: 12px 32px;
	border-radius: 30px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	transition: opacity .2s, transform .2s;
}
.hp-intro__pill:hover { opacity: .85; transform: translateY(-2px); color: #fff; }
.hp-intro__pill--connexion  { background: #7B4FD4; }
.hp-intro__pill--ambition   { background: #C0392B; }
.hp-intro__pill--relations  { background: #2472C8; }
.hp-intro__pill--corps      { background: #1F8A4A; }

/* ══════════════════════════════════════
   § 3 – TENDANCES
══════════════════════════════════════ */
.hp-tendances {
	background: #080f4f;
	padding: 60px 40px;
}
.hp-tendances__title {
	font-size: 22px;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: 3px;
	text-align: center;
	margin: 0 0 40px;
}
.hp-tendances__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1080px;
	margin: 0 auto 20px;
}
.hp-card {
	border-radius: 15px;
	overflow: hidden;
	border: 2px solid #fff;
	position: relative;
	background: #1a2060;
	display: flex;
	flex-direction: column;
	transition: box-shadow .25s;
}
.hp-card:hover {
	box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.hp-card__img-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.hp-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.hp-card:hover .hp-card__img {
	transform: scale(1.06);
}
.hp-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #fff;
	z-index: 2;
}
.hp-card__cta-wrap {
	padding: 12px 16px;
	background: #080f4f;
	text-align: center;
}
.hp-card__cta {
	display: inline-block;
	padding: 8px 28px;
	border-radius: 30px;
	background: linear-gradient(1deg, #5835ff 0%, #2960ff 100%);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity .2s;
}
.hp-card__cta:hover { opacity: .85; color: #fff; }
.hp-card--placeholder {
	aspect-ratio: 4/3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	background: rgba(255,255,255,.05);
	color: rgba(255,255,255,.3);
}
.hp-tendances__more {
	text-align: right;
	max-width: 1080px;
	margin: 12px auto 0;
}
.hp-tendances__more a {
	color: rgba(255,255,255,.7);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 1px;
	transition: color .2s;
}
.hp-tendances__more a:hover { color: #fff; }

/* ══════════════════════════════════════
   § 4 – ACCÉDEZ
══════════════════════════════════════ */
.hp-acces {
	background: #fff;
	padding: 70px 40px;
	text-align: center;
}
.hp-acces__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 56px;
	font-weight: 800;
	text-transform: uppercase;
	color: #030a4b;
	line-height: 1.15;
	margin: 0;
	letter-spacing: 1px;
}

/* ══════════════════════════════════════
   § 5 – ABONNEMENT + FORFAITS
══════════════════════════════════════ */
.hp-abo {
	background: linear-gradient(180deg, #373f76 0%, #859de9 100%);
	padding: 70px 40px 80px;
	text-align: center;
}
.hp-abo__already {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 6px;
}
.hp-abo__connect-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 24px;
}
.hp-abo__btn-connect {
	display: inline-block;
	padding: 14px 48px;
	border-radius: 30px;
	background: linear-gradient(1deg, #5835ff 0%, #2960ff 100%);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 1px;
	margin-bottom: 60px;
	transition: opacity .2s;
}
.hp-abo__btn-connect:hover { opacity: .85; color: #fff; }
.hp-abo__forfait-title {
	font-size: 42px;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 20px;
	text-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.hp-abo__desc {
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	line-height: 1.6;
	margin: 0 0 12px;
}
.hp-abo__tagline {
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	color: #fff;
	margin: 0 0 50px;
}
.hp-abo__plans {
	display: flex;
	gap: 24px;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 860px;
	margin: 0 auto;
}
.hp-plan {
	flex: 1;
	min-width: 300px;
	max-width: 400px;
	border-radius: 20px;
	background: linear-gradient(211deg, #1f175e 0%, #0f002a 100%);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.hp-plan__header {
	padding: 40px 40px 20px;
	text-align: center;
}
.hp-plan__duration {
	font-size: 52px;
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	color: #fff;
	line-height: 1;
	margin: 0;
}
.hp-plan__price {
	font-size: 44px;
	font-weight: 800;
	font-style: italic;
	color: #fff;
	margin: 8px 0 0;
}
.hp-plan__price span { font-size: 20px; font-weight: 400; font-style: normal; }
.hp-plan__saving {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(255,255,255,.75);
	margin: 10px 0 0;
}
.hp-plan__features {
	padding: 24px 36px;
	flex: 1;
}
.hp-plan__feature {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	line-height: 1.6;
	margin: 0 0 14px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	text-align: left;
}
.hp-plan__feature-icon { flex-shrink: 0; margin-top: 2px; }
.hp-plan__cta-wrap {
	padding: 0 36px 36px;
}
.hp-plan__cta {
	display: block;
	width: 100%;
	padding: 14px;
	border-radius: 30px;
	background: linear-gradient(1deg, #789eff 0%, #9fc6ff 100%);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: opacity .2s;
}
.hp-plan__cta:hover { opacity: .85; color: #fff; }

/* ══════════════════════════════════════
   § 6 – FAQ
══════════════════════════════════════ */
.hp-faq {
	background: linear-gradient(180deg, #8fa9f6 0%, #c5d4ff 100%);
	padding: 60px 40px;
	text-align: center;
}
.hp-faq__title {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: 10px;
	text-transform: uppercase;
	color: #030a4b;
	margin: 0;
}

.sfaq-q{background:none !important;}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 900px) {
	.hp-hero { padding: 60px 30px; }
	.hp-hero__title { font-size: 28px; }
	.hp-tendances__grid { grid-template-columns: repeat(2, 1fr); }
	.hp-acces__title { font-size: 36px; }
	.hp-abo__forfait-title { font-size: 30px; }
}
@media (max-width: 580px) {
	.hp-tendances__grid { grid-template-columns: 1fr; }
	.hp-hero__title { font-size: 22px; }
	.hp-acces__title { font-size: 26px; }
	.hp-plan { min-width: 100%; }
}