:root { --vt-animation: circle-in ; }
::view-transition-old(root) { animation-delay: 500ms ; }
::view-transition-new(root) { animation: var(--vt-animation, circle-in) 500ms forwards ; }

@keyframes circle-in { from { clip-path: circle(0% at 90% 8%) ; } to { clip-path: circle(120% at 50% 0%) ; } }
@keyframes circle-out { from { clip-path: circle(120% at 50% 0%) ; } to { clip-path: circle(0% at 90% 8%) ; } }

:root {
	--color-accent: #4D5EA4 ;
	--color-dark: #171212 ;
	--color-white: #FFFFFF ;
	--color-grey: #D5D5D5 ;
	--color-light-grey: #F5F5F5 ;

	--gradient-accent: linear-gradient(315deg, rgba(77, 94, 164, 1) 0%, rgba(35, 44, 84, 1) 100%) ;

	--font-main: "Source Serif 4" ;
	--font-title: "Manrope" ;
}

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

body {
	font-family: Poppins, sans-serif ;
	overflow: hidden ;

	max-width: min(1700px, 90%) ; min-height: 100dvh ;
	display: flex ; flex-direction: column ;
	margin: 0 auto ;
}


/* ————— OVERLAY ——————————————————————————————————————————————————————————————————————————— */

.prehome {
	position: fixed ; inset: 0 ; width: 100dvw ; height: 100dvh ; z-index: 9999 ; opacity: 1 ; transition: opacity 1s ease-out ;
	background: var(--color-accent) ; background: var(--gradient-accent) ;
	font-family: var(--font-main, "Source Serif 4", serif) ;  display: flex ; flex-direction: column ; align-items: center ; justify-content: center ;
}

.prehome.fade-out { opacity: 0 ; pointer-events: none ; }
.prehome.no-animation { display: none ; }

body.prehome-done { overflow: auto ; }

/* Contenu principal */
.main-content {
	min-height: 100vh;
	padding: 2rem;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.main-content h1 { font-size: 3rem ; margin-bottom: 1rem ; text-align: center ; }

.main-content p { font-size: 1.2rem ; text-align: center ; max-width: 600px ; }

@media (max-width: 768px) {
	.main-content h1 { font-size: 2rem ; }
	.main-content p { font-size: 1rem ; }
}

sb-page { padding-top: 5rem ; }


/* ————— MAIN    ——————————————————————————————————————————————————————————————————————————— */

h1 {
	font-family: font-family: var(--font-poppins, 'Poppins', sans-serif) ; font-size: 3rem ; line-height: 1 ; font-weight: 400 ; text-transform: uppercase ;
	border-top: 1px solid var(--color-grey) ; padding: 2rem 0 ;
}

h2 {
	font-family: font-family: var(--font-poppins, 'Poppins', sans-serif) ; font-size: 1.5rem ; font-weight: 400 ; text-transform: uppercase ;
	padding: 0.75rem 0 ;
}

p, ul {
	padding: 1rem 0 ;
	text-wrap: pretty ;
}
p:has(+ ul) {
	padding-block-end: 0 ;
}
p:last-child {
	padding-block-end: 0 ;
}
p + ul {
	padding-block-start: 0 ;
}
p:has(+ h1) {
	padding-block-end: 3rem ;
}

a {
	color: inherit ;
}

strong {
	font-weight: 600 ;
}

*.accent {
	color: var(--color-red) ;
}

form {
	width: min(1200px, 80%) ;
	margin: 0 auto ;
}

input, textarea, select {
	display: block ; width: 100% ; padding: 1rem ; margin: 1rem 0 ;
	border: none ; background-color: var(--color-light-grey) ;
	font-family: font-family: var(--font-poppins, 'Poppins', sans-serif) ; color: var(--color-dark) ; font-size: 1.125rem ; font-weight: 600 ; text-transform: uppercase ;
}
input[type="checkbox"] {
	appearance: none ; -webkit-appearance: none ; -moz-appearance: none ; 
	display: inline-block ; width: 1rem ; height: 1rem ; margin-inline-end: 1rem ;
	border: 1px solid var(--color-dark) ; outline: none ; background: none ;
	cursor: pointer ; vertical-align: middle ; position: relative ;
}
input[type="checkbox"]:checked::after {
	content: "" ; display: block ; position: absolute ; top: 0.5rem ; left: 0.5rem ;
	width: 1rem ; height: 1rem ; background-color: var(--color-red) ;
}
label {
	cursor: pointer ;
}
input::placeholder, textarea::placeholder, select::placeholder {
	color: var(--color-dark) ; opacity: 1 ;
}

a.button, button {
	appearance: none ; -webkit-appearance: none ; -moz-appearance: none ; border: none ;
	display: inline-block ; padding: 0.25rem 1rem ; margin: auto 0 auto auto ;
	background-color: var(--color-red) ; color: var(--color-white) ; cursor: pointer ;
	font-family: var(--font-poppins, 'Poppins', sans-serif) ; font-size: inherit ; font-weight: 500 ; text-decoration: none ; text-transform: uppercase ;
}
button:disabled {
	cursor: default ; background-color: var(--color-grey) ;
}

.fullpage {
	font-size: 2rem ; text-align: center ;
}

.flex {
	display: flex ;
}


/* ————— MOBILE  ——————————————————————————————————————————————————————————————————————————— */

@media (max-width: 768px) {
	ul {
		padding-inline-start: 2rem ;
	}

	form {
		width: 100% ;
		margin: 0 ;
	}
	
	input, textarea, select {
		width: 100% ;
	}

	.flex {
		flex-direction: column ;
	}
}