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

:root {
	--bg: #03040b;
	--panel: #080b18;
	--panel2: #0c1020;
	--pink: #ff0aa8;
	--pink2: #ff4ac5;
	--purple: #7927ff;
	--line: #30385a;
	--muted: #aeb1c8;
	--white: #f7f7ff;
	--orange: #ff774c;
	--max: 1200px
}

* {
	box-sizing: border-box;
	scroll-behavior: smooth
}

html, body {
	margin: 0;
	background: var(--bg);
	color: var(--white);
	font-family: Inter, Arial, sans-serif
}

body {
	overflow-x: hidden
}

a {
	color: inherit;
	text-decoration: none
}

button, input, textarea, select {
	font: inherit
}

button {
	cursor: pointer
}

.page {
	min-height: 100vh;
	background: radial-gradient(circle at 8% 20%, rgba(255, 0, 170, .16),
		transparent 22%),
		radial-gradient(circle at 90% 70%, rgba(121, 39, 255, .15),
		transparent 25%), var(--bg)
}

.container {
	width: min(var(--max), 92%);
	margin: auto
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(3, 4, 11, .92);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid #1c2238
}

.nav {
	height: 82px;
	display: flex;
	align-items: center;
	gap: 20px
}

.brand {
	width: 74px;
	height: 74px;
	display: grid;
	place-items: center;
	flex: none
}

.brand img {
	width: 74px;
	height: 74px;
	object-fit: contain;
	filter: drop-shadow(0 0 12px rgba(255, 0, 170, .35))
}

.main-nav {
	display: flex;
	align-items: stretch;
	height: 100%;
	gap: 2px;
	flex: 1
}

.nav-item {
	position: relative;
	display: flex;
	align-items: center
}

.nav-link {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 13px;
	font-size: 13px;
	font-weight: 700;
	color: #d8d9e3;
	position: relative
}

.nav-link:hover, .nav-item.active>.nav-link {
	color: #fff
}

.nav-item.active>.nav-link:after {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 0;
	height: 2px;
	background: var(--pink);
	box-shadow: 0 0 12px var(--pink)
}

.caret {
	color: #8b8fa6;
	font-size: 9px;
	margin-left: 6px
}

.dropdown {
	position: absolute;
	top: 81px;
	left: 0;
	min-width: 235px;
	padding: 8px;
	background: rgba(6, 8, 18, .98);
	border: 1px solid #343b5d;
	border-radius: 0 0 13px 13px;
	box-shadow: 0 20px 45px #0008, 0 0 25px #ff00aa18;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-7px);
	transition: .18s
}

.nav-item:hover .dropdown, .nav-item:focus-within .dropdown {
	opacity: 1;
	visibility: visible;
	transform: none
}

.dropdown a {
	display: block;
	padding: 11px 12px;
	border-radius: 8px;
	color: #c7c9d5;
	font-size: 12px;
	font-weight: 600
}

.dropdown a:hover {
	background: #ff0aa814;
	color: var(--pink2)
}

.nav-contact {
	font-size: 11px;
	white-space: nowrap
}

.nav-contact b {
	color: var(--pink)
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	padding: 12px 19px;
	border: 1px solid var(--pink);
	font-weight: 800;
	font-size: 12px;
	transition: .18s
}

.btn-primary {
	background: linear-gradient(100deg, var(--pink), #ff1bb7);
	border-color: transparent;
	box-shadow: 0 0 22px #ff00aa28
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 30px #ff00aa44
}

.btn-ghost {
	background: #070914
}

.mobile-toggle {
	display: none;
	border: 1px solid var(--line);
	background: #080b18;
	color: #fff;
	border-radius: 10px;
	padding: 9px 11px
}

.hero {
	min-height: 590px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	position: relative;
	overflow: hidden
}

.hero:before {
	content: "";
	position: absolute;
	inset: auto -10% -55% -10%;
	height: 65%;
	background: radial-gradient(ellipse, #ff0aa830, transparent 60%);
	pointer-events: none
}

.hero-copy {
	padding: 70px 0;
	position: relative;
	z-index: 2
}

.eyebrow {
	color: var(--pink);
	font-size: 12px;
	letter-spacing: .13em;
	text-transform: uppercase;
	font-weight: 800;
	margin: 0 0 13px
}

.hero h1 {
	font-size: clamp(48px, 6vw, 78px);
	line-height: .98;
	letter-spacing: -.055em;
	margin: 0 0 22px
}

.hero h1 em, .section-title h2 em, .page-hero h1 em {
	font-family: Pacifico, cursive;
	font-style: normal;
	color: var(--pink);
	font-weight: 400
}

.hero p {
	color: #c7cad8;
	line-height: 1.65;
	max-width: 570px;
	font-size: 16px
}

.hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px
}

.hero-art {
	height: 540px;
	position: relative;
	border: 1px solid #343b5d;
	border-radius: 26px;
	overflow: hidden;
	background: url('../assets/Pink-Wallpaper-Beautiful-C23.jpg') center/cover;
	box-shadow: 0 0 55px #ff00aa16
}

.hero-art:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #050711 0%, #05071120 36%, #05071100 75%),
		linear-gradient(0deg, #050711b8, transparent 55%)
}

.hero-art .sun {
	position: absolute;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #ffd2b7;
	left: 46%;
	top: 18%;
	box-shadow: 0 0 75px #ff3eae
}

.road {
	position: absolute;
	left: 25%;
	right: -5%;
	bottom: -8%;
	height: 48%;
	background: linear-gradient(180deg, #191425, #050711);
	clip-path: polygon(23% 0, 73% 0, 100% 100%, 0 100%);
	z-index: 1
}

.car {
	position: absolute;
	z-index: 3;
	bottom: -5px;
	width: 44%;
	height: 48%;
	overflow: hidden;
	border-radius: 18px 18px 3px 3px;
	box-shadow: 0 20px 35px #0009
}

.car img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.78) saturate(1.1)
}

.car.one {
	left: 8%
}

.car.two {
	right: 3%;
	width: 41%;
	bottom: -20px
}

.roof {
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--pink);
	color: #06040c;
	font-weight: 900;
	font-size: 8px;
	padding: 5px 9px;
	border-radius: 3px;
	z-index: 4;
	white-space: nowrap
}

.section {
	padding: 95px 0
}

.section-title {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 42px
}

.section-title h2 {
	font-size: clamp(34px, 4vw, 54px);
	line-height: 1.04;
	margin: 0 0 15px
}

.section-title p {
	color: var(--muted);
	line-height: 1.65
}

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px
}

.card {
	background: linear-gradient(145deg, #101329, #070a15);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 26px
}

.card:hover {
	border-color: #ff0aa866;
	box-shadow: 0 12px 30px #0005
}

.card.featured {
	border-color: var(--pink);
	box-shadow: 0 0 25px #ff00aa12
}

.icon {
	width: 46px;
	height: 46px;
	border: 2px solid var(--pink);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 20px;
	margin-bottom: 18px
}

.card h3 {
	margin: 0 0 9px;
	font-size: 20px
}

.card p {
	color: #b9bccb;
	line-height: 1.6;
	font-size: 14px
}

.card a {
	color: var(--pink2);
	font-weight: 800;
	font-size: 12px
}

.stats {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 24px 0
}

.stats>div {
	text-align: center;
	border-right: 1px solid var(--line)
}

.stats>div:last-child {
	border: 0
}

.stats strong {
	display: block;
	font-size: 32px;
	color: var(--pink)
}

.stats span {
	font-size: 12px;
	color: #aeb1c8
}

.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px
}

.review {
	background: #080b18;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 22px
}

.review .who {
	font-weight: 800
}

.stars {
	color: var(--pink);
	margin: 7px 0
}

.review p {
	color: #c9cbd7;
	line-height: 1.6;
	font-size: 14px
}

.cta {
	padding: 75px 0
}

.cta-box {
	border: 1px solid #ff0aa855;
	border-radius: 24px;
	padding: 45px;
	background: linear-gradient(120deg, #160a20, #080b18);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px
}

.cta-box h2 {
	margin: 0 0 10px;
	font-size: 34px
}

.cta-box p {
	color: var(--muted);
	margin: 0;
	line-height: 1.6
}

.page-hero {
	padding: 90px 0 70px;
	border-bottom: 1px solid #1e253d;
	background: linear-gradient(120deg, #080612, #03040b)
}

.page-hero h1 {
	font-size: clamp(42px, 6vw, 68px);
	margin: 0 0 15px;
	line-height: 1
}

.page-hero p {
	max-width: 700px;
	color: #bfc2d0;
	line-height: 1.7
}

.breadcrumbs {
	font-size: 11px;
	color: #7f849b;
	margin-bottom: 18px
}

.breadcrumbs a {
	color: #aeb1c8
}

.content-grid {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 28px
}

.prose, .side-card {
	background: #080b18;
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 28px
}

.prose h2, .prose h3 {
	margin-top: 0
}

.prose p, .prose li {
	color: #c4c7d4;
	line-height: 1.75;
	font-size: 15px
}

.prose ul {
	padding-left: 20px
}

.side-card h3 {
	margin-top: 0
}

.side-card ul {
	list-style: none;
	padding: 0;
	margin: 0
}

.side-card li {
	padding: 11px 0;
	border-bottom: 1px solid #1c2238;
	color: #b9bccb;
	font-size: 13px
}

.side-card li:last-child {
	border: 0
}

.side-card a:hover {
	color: var(--pink)
}

.price-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px
}

.price-card {
	padding: 25px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #080b18
}

.price-card strong {
	display: block;
	color: var(--pink);
	font-size: 30px;
	margin: 10px 0
}

.price-card p {
	color: #b9bccb;
	line-height: 1.6
}

.form {
	display: grid;
	gap: 12px
}

.form input, .form textarea, .form select {
	width: 100%;
	background: #050713;
	border: 1px solid #3a4261;
	border-radius: 10px;
	color: #fff;
	padding: 13px;
	outline: none
}

.form textarea {
	min-height: 140px;
	resize: vertical
}

.form input:focus, .form textarea:focus {
	border-color: var(--pink);
	box-shadow: 0 0 0 3px #ff00aa12
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px
}

.contact-info {
	display: grid;
	gap: 12px
}

.contact-info .info {
	padding: 19px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #080b18
}

.info b {
	display: block;
	color: var(--pink);
	margin-bottom: 6px
}

.map {
	min-height: 300px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: radial-gradient(circle at 50% 50%, #ff0aa82b, transparent 18%),
		linear-gradient(145deg, #11152b, #060812);
	display: grid;
	place-items: center;
	text-align: center;
	color: #bfc2d0
}

.faq {
	display: grid;
	gap: 10px
}

.faq details {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #080b18;
	padding: 15px 18px
}

.faq summary {
	font-weight: 800;
	cursor: pointer
}

.faq p {
	color: #bfc2d0;
	line-height: 1.6
}

.timeline {
	display: grid;
	gap: 14px
}

.step {
	display: grid;
	grid-template-columns: 55px 1fr;
	gap: 16px;
	align-items: start
}

.step .num {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #ff0aa8;
	color: #08030b;
	font-weight: 900
}

.step h3 {
	margin: 2px 0 6px
}

.step p {
	margin: 0;
	color: #b9bccb;
	line-height: 1.6
}

.site-footer {
	border-top: 1px solid #1e253d;
	padding: 55px 0 20px;
	background: #05060e
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr 1fr;
	gap: 35px
}

.footer-brand img {
	width: 105px;
	height: 105px;
	object-fit: contain
}

.footer h3 {
	font-size: 13px;
	margin: 0 0 12px
}

.footer a, .footer p {
	font-size: 12px;
	color: #9fa3b7;
	line-height: 1.8
}

.footer a:hover {
	color: var(--pink)
}

.copyright {
	border-top: 1px solid #1c2238;
	margin-top: 35px;
	padding-top: 15px;
	color: #777c94;
	font-size: 11px;
	display: flex;
	justify-content: space-between;
	gap: 20px
}

.mobile-menu {
	display: none
}

@media ( max-width :900px) {
	.main-nav, .nav-contact {
		display: none
	}
	.mobile-toggle {
		display: block;
		margin-left: auto
	}
	.hero {
		grid-template-columns: 1fr
	}
	.hero-copy {
		padding: 70px 0 30px
	}
	.hero-art {
		height: 420px
	}
	.cards, .reviews {
		grid-template-columns: 1fr
	}
	.stats {
		grid-template-columns: 1fr 1fr;
		gap: 18px
	}
	.stats>div:nth-child(2) {
		border-right: 0
	}
	.stats>div:nth-child(-n+2) {
		border-bottom: 1px solid var(--line);
		padding-bottom: 18px
	}
	.content-grid, .contact-grid {
		grid-template-columns: 1fr
	}
	.price-list {
		grid-template-columns: 1fr
	}
	.footer-grid {
		grid-template-columns: 1fr 1fr
	}
	.mobile-menu.open {
		display: block;
		position: absolute;
		top: 82px;
		left: 0;
		right: 0;
		background: #050711;
		border-bottom: 1px solid var(--line);
		padding: 12px
	}
	.mobile-menu a, .mobile-menu summary {
		display: block;
		padding: 12px;
		color: #ddd;
		font-size: 13px;
		font-weight: 700
	}
	.mobile-menu details {
		border-top: 1px solid #1c2238
	}
	.mobile-menu details a {
		padding-left: 25px;
		color: #aeb1c8;
		font-size: 12px
	}
	.mobile-menu .btn {
		margin-top: 8px;
		width: 100%
	}
}

@media ( max-width :560px) {
	.nav {
		height: 70px
	}
	.brand, .brand img {
		width: 60px;
		height: 60px
	}
	.page-hero {
		padding: 65px 0 50px
	}
	.section {
		padding: 65px 0
	}
	.cta-box {
		padding: 28px;
		display: block
	}
	.cta-box .btn {
		margin-top: 20px
	}
	.footer-grid {
		grid-template-columns: 1fr
	}
	.copyright {
		display: block
	}
	.copyright span {
		display: block;
		margin-top: 8px
	}
	.hero-art {
		height: 330px
	}
	.car {
		height: 45%
	}
	.hero h1 {
		font-size: 46px
	}
}

/* =========================================================
   SunDrive — direction artistique finale / maquette néon
   ========================================================= */
:root {
	--pink: #ff0aa8;
	--pink2: #ff4ac5;
	--violet: #8b35ff;
	--sun: #ffb36b;
	--ink: #02030a;
	--glass: rgba(9, 11, 25, .72);
	--line: #343b62;
}

body.page {
	background: radial-gradient(circle at 14% 12%, rgba(255, 10, 168, .13),
		transparent 23%),
		radial-gradient(circle at 88% 26%, rgba(139, 53, 255, .12),
		transparent 25%),
		linear-gradient(180deg, #03040b 0%, #050711 45%, #03040b 100%);
}

body.page:before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	opacity: .18;
	background-image: linear-gradient(rgba(255, 255, 255, .025) 1px,
		transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px,
		transparent 1px);
	background-size: 44px 44px;
	mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.site-header {
	background: rgba(2, 3, 10, .82);
	border-bottom: 1px solid rgba(255, 10, 168, .22);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .35), 0 0 30px
		rgba(255, 10, 168, .05);
}

.brand {
	width: 84px;
	height: 84px;
	filter: drop-shadow(0 0 15px rgba(255, 10, 168, .28))
}

.brand img {
	width: 82px;
	height: 82px
}

.nav {
	height: 88px
}

.nav-link {
	letter-spacing: .01em
}

.btn-primary {
	background: linear-gradient(100deg, #ff0aa8, #ff3fc1 60%, #c52dff);
	box-shadow: 0 0 22px rgba(255, 10, 168, .25), inset 0 0 18px
		rgba(255, 255, 255, .08)
}

.btn-primary:hover {
	box-shadow: 0 0 38px rgba(255, 10, 168, .4), inset 0 0 18px
		rgba(255, 255, 255, .1)
}

.hero {
	min-height: 650px;
	grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
	gap: 36px;
}

.hero-copy {
	padding: 88px 0
}

.hero h1 {
	text-shadow: 0 0 28px rgba(255, 10, 168, .08)
}

.hero h1 em {
	filter: drop-shadow(0 0 13px rgba(255, 10, 168, .22))
}

.hero-art {
	height: 570px;
	border-radius: 30px;
	border: 1px solid rgba(255, 10, 168, .36);
	background-image: url('../assets/Pink-Wallpaper-Beautiful-C23.jpg');
	box-shadow: 0 25px 70px rgba(0, 0, 0, .42), 0 0 55px
		rgba(255, 10, 168, .12);
}

.hero-art:before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 22px;
	z-index: 5;
	pointer-events: none;
}

.hero-art:after {
	background: linear-gradient(90deg, #03040bd8 0%, #03040b35 38%, transparent 78%),
		linear-gradient(0deg, #03040bc8 0%, transparent 55%);
}

.hero-art .sun {
	width: 145px;
	height: 145px;
	top: 14%;
	box-shadow: 0 0 100px rgba(255, 62, 174, .65), 0 0 25px
		rgba(255, 190, 120, .6)
}

.road {
	background: linear-gradient(180deg, #21162c, #04050b);
	box-shadow: 0 -20px 70px rgba(255, 10, 168, .12)
}

.car {
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 22px 40px rgba(0, 0, 0, .7), 0 0 22px
		rgba(255, 10, 168, .08)
}

.roof {
	box-shadow: 0 0 18px rgba(255, 10, 168, .55)
}

.section {
	position: relative
}

.section-title h2 {
	letter-spacing: -.04em
}

.cards {
	gap: 20px
}

.card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(145deg, rgba(16, 19, 41, .96),
		rgba(5, 7, 16, .96));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 15px 45px
		rgba(0, 0, 0, .2);
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s
		ease;
}

.card:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(130deg, rgba(255, 10, 168, .09), transparent
		42%, rgba(139, 53, 255, .07));
	pointer-events: none;
}

.card:nth-child(1):after, .card:nth-child(4):after {
	background-image: url('../assets/voiture-prfil.jpg')
}

.card:nth-child(2):after, .card:nth-child(5):after {
	background-image: url('../assets/voiture-profil2.jpg')
}

.card:nth-child(3):after, .card:nth-child(6):after {
	background-image: url('../assets/Pink-Wallpaper-Beautiful-C23.jpg')
}

.card:after {
	content: "";
	position: absolute;
	right: -28px;
	bottom: -28px;
	width: 170px;
	height: 110px;
	background-size: cover;
	background-position: center;
	opacity: .10;
	transform: rotate(-5deg);
	border-radius: 20px;
	filter: saturate(1.3);
}

.card:hover {
	transform: translateY(-5px);
	border-color: rgba(255, 10, 168, .65);
	box-shadow: 0 20px 45px rgba(0, 0, 0, .38), 0 0 28px
		rgba(255, 10, 168, .09)
}

.card>* {
	position: relative;
	z-index: 2
}

.icon {
	box-shadow: 0 0 18px rgba(255, 10, 168, .16);
	background: rgba(255, 10, 168, .04)
}

.stats {
	background: linear-gradient(90deg, transparent, rgba(255, 10, 168, .04),
		transparent);
	padding: 30px 0
}

.stats strong {
	font-family: Inter, sans-serif;
	text-shadow: 0 0 15px rgba(255, 10, 168, .35)
}

.review {
	background: linear-gradient(145deg, rgba(13, 16, 34, .92),
		rgba(5, 7, 16, .95));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03)
}

.stars {
	text-shadow: 0 0 12px rgba(255, 10, 168, .5)
}

.page-hero {
	position: relative;
	overflow: hidden;
	padding: 105px 0 78px;
	border-bottom: 1px solid rgba(255, 10, 168, .18);
	background: linear-gradient(90deg, rgba(3, 4, 11, .97),
		rgba(3, 4, 11, .72), rgba(3, 4, 11, .93)),
		url('../assets/Pink-Wallpaper-Beautiful-C23.jpg') center 40%/cover;
}

.page-hero:after {
	content: "";
	position: absolute;
	right: 7%;
	bottom: -100px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 1px solid rgba(255, 10, 168, .25);
	box-shadow: 0 0 90px rgba(255, 10, 168, .12), inset 0 0 70px
		rgba(139, 53, 255, .08);
	pointer-events: none;
}

.page-hero .container {
	position: relative;
	z-index: 2
}

.page-hero h1 {
	max-width: 900px;
	text-shadow: 0 0 28px rgba(255, 10, 168, .10)
}

.breadcrumbs {
	color: #9b9fb7
}

.breadcrumbs a:hover {
	color: var(--pink)
}

.price-card, .prose, .side-card, .contact-info .info, .faq details {
	background: linear-gradient(145deg, rgba(12, 15, 32, .95),
		rgba(5, 7, 15, .96));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 15px 40px
		rgba(0, 0, 0, .18);
}

.price-card {
	position: relative;
	overflow: hidden;
	border-color: #30385a
}

.price-card:before {
	content: "";
	position: absolute;
	top: -80px;
	right: -50px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: rgba(255, 10, 168, .12);
	filter: blur(30px)
}

.price-card>* {
	position: relative;
	z-index: 1
}

.price-card strong {
	font-size: 28px;
	text-shadow: 0 0 14px rgba(255, 10, 168, .22)
}

.contact-info .info b {
	letter-spacing: .03em
}

.map {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(4, 6, 14, .48),
		rgba(4, 6, 14, .88)), url('../assets/batiment-all.jpg') center/cover;
	box-shadow: inset 0 0 0 1px rgba(255, 10, 168, .08), 0 20px 45px
		rgba(0, 0, 0, .2);
}

.map:after {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--pink);
	box-shadow: 0 0 0 10px rgba(255, 10, 168, .12), 0 0 35px
		rgba(255, 10, 168, .8);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.cta-box {
	position: relative;
	overflow: hidden;
	background: linear-gradient(115deg, rgba(31, 8, 38, .96),
		rgba(8, 11, 24, .94)),
		url('../assets/Pink-Wallpaper-Beautiful-C23.jpg') center/cover;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .32), 0 0 40px
		rgba(255, 10, 168, .08);
}

.cta-box:after {
	content: "";
	position: absolute;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	right: -80px;
	top: -120px;
	background: rgba(255, 10, 168, .12);
	filter: blur(15px)
}

.cta-box>* {
	position: relative;
	z-index: 2
}

.site-footer {
	background: linear-gradient(180deg, #05060e, #02030a);
	box-shadow: 0 -20px 60px rgba(0, 0, 0, .18)
}

.footer-brand img {
	filter: drop-shadow(0 0 18px rgba(255, 10, 168, .22))
}

/* subtle neon separators used throughout the mockup */
.section:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 90px;
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, var(--pink), transparent);
	opacity: .5
}

.section:first-of-type:before {
	display: none
}

@media ( max-width :900px) {
	.hero {
		grid-template-columns: 1fr;
		gap: 20px;
		min-height: 0
	}
	.hero-copy {
		padding: 70px 0 24px
	}
	.hero-art {
		height: 440px
	}
	.page-hero {
		padding: 82px 0 64px
	}
}

@media ( max-width :560px) {
	.nav {
		height: 74px
	}
	.brand, .brand img {
		width: 62px;
		height: 62px
	}
	.hero-art {
		height: 330px;
		border-radius: 22px
	}
	.hero-art .sun {
		width: 88px;
		height: 88px
	}
	.page-hero:after {
		width: 190px;
		height: 190px;
		right: -70px;
		bottom: -70px
	}
}

/* SunDrive — médias dynamiques / API */
.media-section {
	padding-top: 80px
}

.media-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px
}

.media-card {
	background: linear-gradient(145deg, #0d1125, #060811);
	border: 1px solid var(--line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 14px 35px rgba(0, 0, 0, .22)
}

.media-card:hover {
	border-color: rgba(255, 10, 168, .55);
	box-shadow: 0 18px 45px rgba(0, 0, 0, .35), 0 0 24px
		rgba(255, 10, 168, .08)
}

.media-card-visual {
	aspect-ratio: 16/10;
	background: #050711;
	overflow: hidden;
	position: relative
}

.media-card-visual img, .media-card-visual video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover
}

.media-card-visual video {
	background: #02030a
}

.media-card-body {
	padding: 16px 18px 18px
}

.media-card-body h3 {
	margin: 9px 0 0;
	font-size: 16px
}

.media-badge {
	display: inline-flex;
	padding: 5px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 10, 168, .42);
	background: rgba(255, 10, 168, .08);
	color: var(--pink2);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em
}

.media-loading, .media-empty, .media-error {
	grid-column: 1/-1;
	padding: 24px;
	border: 1px dashed var(--line);
	border-radius: 15px;
	background: rgba(8, 11, 24, .6);
	color: var(--muted);
	text-align: center
}

.media-error {
	border-color: rgba(255, 119, 76, .45);
	color: #ffb39b
}

.form-feedback {
	margin-top: 12px;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #080b18;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5
}

.form-feedback[data-state="success"] {
	border-color: rgba(63, 240, 161, .45);
	color: #baf8df
}

.form-feedback[data-state="error"] {
	border-color: rgba(255, 119, 76, .45);
	color: #ffb39b
}

.form button:disabled {
	opacity: .65;
	cursor: wait
}

@media ( max-width :900px) {
	.media-grid {
		grid-template-columns: 1fr 1fr
	}
}

@media ( max-width :560px) {
	.media-grid {
		grid-template-columns: 1fr
	}
}

/* =========================================================
   Hero — galerie média dynamique SunDrive
   ========================================================= */
.hero-media-stage {
	background: radial-gradient(circle at 50% 18%, rgba(255, 10, 168, .18),
		transparent 28%), linear-gradient(145deg, #090b19, #03040b 72%);
	isolation: isolate;
}

.hero-media-stage:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(2, 3, 10, .04) 0%,
		rgba(2, 3, 10, .08) 48%, rgba(2, 3, 10, .72) 100%);
	pointer-events: none;
}

.hero-media-glow {
	position: absolute;
	width: 320px;
	height: 320px;
	left: 50%;
	top: 43%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 10, 168, .24),
		rgba(121, 39, 255, .10) 42%, transparent 72%);
	filter: blur(18px);
	z-index: 0;
	pointer-events: none;
}

.hero-media-frame {
	position: absolute;
	inset: 14px;
	z-index: 3;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .13);
	background: rgba(3, 4, 11, .52);
	box-shadow: inset 0 0 0 1px rgba(255, 10, 168, .08), 0 20px 50px
		rgba(0, 0, 0, .32);
}

.hero-media-viewport {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: #04050c;
}

.hero-media-viewport img, .hero-media-viewport video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	background: #02030a;
}

.hero-media-viewport video {
	cursor: pointer
}

.hero-media-placeholder {
	display: grid;
	gap: 11px;
	max-width: 70%;
	color: #d7dae5;
	text-align: center;
	padding: 30px;
}

.hero-media-placeholder-kicker {
	color: var(--pink2);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .16em;
}

.hero-media-placeholder strong {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1;
	color: #fff;
	text-shadow: 0 0 26px rgba(255, 10, 168, .18);
}

.hero-media-placeholder span:last-child {
	color: #aeb1c8;
	font-size: 13px;
	line-height: 1.55
}

.hero-media-caption {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	z-index: 6;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 13px;
	background: rgba(3, 4, 11, .70);
	backdrop-filter: blur(12px);
}

.hero-media-caption[hidden] {
	display: none
}

.hero-media-badge {
	flex: none;
	padding: 5px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 10, 168, .46);
	background: rgba(255, 10, 168, .09);
	color: var(--pink2);
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .1em;
}

.hero-media-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #f4f5fb;
	font-size: 12px;
	font-weight: 700;
}

.hero-media-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 7;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(3, 4, 11, .56);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	display: grid;
	place-items: center;
	backdrop-filter: blur(10px);
	transition: .18s ease;
}

.hero-media-arrow:hover {
	border-color: rgba(255, 10, 168, .65);
	background: rgba(255, 10, 168, .15);
	box-shadow: 0 0 22px rgba(255, 10, 168, .18)
}

.hero-media-arrow:disabled {
	opacity: .32;
	cursor: not-allowed
}

.hero-media-prev {
	left: 16px
}

.hero-media-next {
	right: 16px
}

.hero-media-dots {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 7;
	display: flex;
	gap: 6px;
	max-width: 50%;
	overflow: hidden;
	padding: 6px 9px;
	border-radius: 999px;
	background: rgba(3, 4, 11, .45);
	backdrop-filter: blur(10px);
}

.hero-media-dots:empty {
	display: none
}

.hero-media-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #7f849b;
	opacity: .62;
}

.hero-media-dot.active {
	background: var(--pink);
	opacity: 1;
	box-shadow: 0 0 10px rgba(255, 10, 168, .7)
}

.hero-media-status {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 7;
	padding: 6px 9px;
	border-radius: 999px;
	background: rgba(3, 4, 11, .54);
	border: 1px solid rgba(255, 255, 255, .11);
	color: #aeb1c8;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .05em;
	backdrop-filter: blur(8px);
}

.hero-media-stage.has-media .hero-media-status {
	opacity: 0;
	pointer-events: none
}

.hero-media-stage.single .hero-media-prev, .hero-media-stage.single .hero-media-next
	{
	display: none
}

@media ( max-width :900px) {
	.hero-media-stage {
		height: 440px
	}
}

@media ( max-width :560px) {
	.hero-media-stage {
		height: 330px;
		border-radius: 22px
	}
	.hero-media-frame {
		inset: 10px;
		border-radius: 18px
	}
	.hero-media-caption {
		left: 12px;
		right: 12px;
		bottom: 12px
	}
	.hero-media-arrow {
		width: 36px;
		height: 36px;
		font-size: 25px
	}
	.hero-media-prev {
		left: 10px
	}
	.hero-media-next {
		right: 10px
	}
	.hero-media-dots {
		bottom: 12px
	}
	.hero-media-status {
		top: 10px;
		right: 10px
	}
	.hero-media-placeholder {
		max-width: 84%;
		padding: 22px
	}
}

/* =========================================================
   SunDrive — grille des formations sur la page d'accueil
   ========================================================= */
.cards[data-public-formations] {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 18px;
}

.cards[data-public-formations] .formation-public-card {
	padding: 20px;
}

.cards[data-public-formations] .formation-public-image {
	height: 135px !important;
	margin: -20px -20px 16px;
	width: calc(100% + 40px);
	overflow: hidden;
	border-radius: 14px 14px 0 0;
}

.cards[data-public-formations] .formation-public-image img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.cards[data-public-formations] .formation-public-card h3 {
	font-size: 18px;
}

.cards[data-public-formations] .formation-public-card p {
	font-size: 13px;
	line-height: 1.5;
}

@media ( max-width : 900px) {
	.cards[data-public-formations] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media ( max-width : 600px) {
	.cards[data-public-formations] {
		grid-template-columns: 1fr !important;
	}
	.cards[data-public-formations] .formation-public-image {
		height: 150px !important;
	}
}

/* =========================================================
   SunDrive — Informations légales du footer
   ========================================================= */
.footer-legal {
	width: 100%;
	box-sizing: border-box;
	margin-top: 28px;
	padding: 22px 20px 20px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	text-align: center;
	color: rgba(255, 255, 255, .72);
	font-size: 11px;
	line-height: 1.8;
}

.footer-legal>div {
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Nouveau copyright demandé */
.site-footer .footer-copyright {
	width: 100%;
	box-sizing: border-box;
	margin-top: 0;
	padding: 14px 20px 18px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	text-align: center;
	color: rgba(255, 255, 255, .48);
	font-size: 10px;
	line-height: 1.5;
}

/* Responsive */
@media ( max-width : 600px) {
	.footer-legal {
		margin-top: 24px;
		padding: 20px 15px 18px;
		font-size: 10px;
	}
	.site-footer .footer-copyright {
		padding: 13px 15px 16px;
		font-size: 9px;
	}
}

.footer-legal-pages {
	margin-top: 0;
	border-top: 0;
	padding: 22px 20px 25px;
}

#labelisation-documents {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
	margin-top: 24px;
}

.labelisation-document {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 105px;
	box-sizing: border-box;
	padding: 20px;
	gap: 18px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.035);
	color: #fff !important;
	text-decoration: none !important;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s
		ease, box-shadow 0.2s ease;
}

.labelisation-document:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 31, 174, 0.55);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.labelisation-document:focus-visible {
	outline: 2px solid #ff1fae;
	outline-offset: 3px;
}

.labelisation-document-icon {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 13px;
	background: rgba(255, 31, 174, 0.12);
	border: 1px solid rgba(255, 31, 174, 0.2);
	color: #ff1fae;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.5px;
}

.labelisation-document-content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.labelisation-document-title {
	display: block;
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.labelisation-document-file {
	display: block;
	font-size: 0.84rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.55);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.labelisation-document-arrow {
	margin-left: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.7);
	font-size: 18px;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.labelisation-document:hover .labelisation-document-arrow {
	background: rgba(255, 31, 174, 0.15);
	color: #ff1fae;
	transform: translateX(3px);
}

#labelisation-documents .quality-source {
	grid-column: 1/-1;
}

@media ( max-width : 800px) {
	#labelisation-documents {
		grid-template-columns: 1fr;
	}
}

@media ( max-width : 520px) {
	.labelisation-document {
		min-height: 95px;
		padding: 16px;
		gap: 14px;
	}
	.labelisation-document-icon {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
	}
	.labelisation-document-title {
		font-size: 0.98rem;
	}
	.labelisation-document-arrow {
		display: none;
	}
	.quality-card {
		display: block;
		height: 100%;
		padding: 28px;
		border-radius: 18px;
		text-decoration: none;
		color: inherit;
		cursor: pointer;
		transition: transform .2s ease, box-shadow .2s ease;
	}
	.quality-card:hover {
		transform: translateY(-4px);
	}
	.quality-card h3, .quality-card p {
		color: inherit;
	}
}
/* Réseaux sociaux SunDrive - affichés par initSunDriveFooter() */
.footer-social{padding:24px 0 22px;text-align:center;color:#fff}
.footer-social h3{margin:0 0 12px;color:inherit;font-size:1rem}
.footer-social-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.footer-social-links a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:118px;padding:10px 16px;border:1px solid currentColor;border-radius:999px;color:#fff;font-weight:600;text-decoration:none}
.footer-social-links a:hover,.footer-social-links a:focus-visible{background:#fff;color:#172b4d;outline:2px solid currentColor;outline-offset:2px}
.footer-social-links svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.footer-social-links svg rect,.footer-social-links svg circle{fill:none}
.footer-social-links svg .social-fill{fill:currentColor;stroke:none}
@media(max-width:480px){.footer-social-links{gap:8px}.footer-social-links a{min-width:0;padding:9px 12px}}


/* Descriptions de formations mises en forme depuis le dashboard */
.rich-content{line-height:1.65;overflow-wrap:anywhere}
.rich-content p{margin:.35em 0 .65em}.rich-content p:first-child{margin-top:0}.rich-content p:last-child{margin-bottom:0}
.rich-content ul,.rich-content ol{padding-left:1.35rem;margin:.45em 0}.rich-content li{margin:.18em 0}
.rich-content h3{font-size:1.05em;line-height:1.35;margin:.65em 0 .35em}.rich-content blockquote{margin:.6em 0;padding:.25em .8em;border-left:3px solid currentColor;opacity:.88}

.rich-content h2{font-size:1.35em;line-height:1.3;margin:0 0 .65em}
.rich-content a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;margin:.35em .25em .35em 0}