/* =====================================================
   VARIABLES
====================================================== */
:root {
	--bleu-fonce: #102f38;
	--bleu: #1e5b68;
	--bleu-clair: #e8f1f2;
	--vert: #789b8d;
	--blanc: #ffffff;
	--fond: #f5f7f6;
	--fond-creme: #f1f0eb;
	--texte: #1d2a2d;
	--texte-secondaire: #667477;
	--bordure: #dfe6e5;
	--rayon: 18px;
}

/* =====================================================
   GÉNÉRAL
====================================================== */
* {            box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}

body {
	margin: 0;
	font-family: "DM Sans", sans-serif;
	color: var(--texte);
	background: var(--blanc);
}

h1,
h2,
h3,
h4 {
	font-family: "Manrope", sans-serif;
}

a {
	text-decoration: none;
}

.conteneur {
	width:
		min( 1180px, calc(100% - 40px)
		);
	margin-left: auto;
	margin-right: auto;
}

/* =====================================================
   NAVIGATION
====================================================== */
.entete {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	padding: 22px 0;
	transition:
		background 0.3s ease,
		padding 0.3s ease;
}

.entete.fixe {
	background:
		rgba(16, 47, 56, 0.96);
	backdrop-filter: blur(12px);
	padding: 15px 0;
}

.entete-contenu {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo {
	color: white;
	font-family: "Manrope", sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.3px;
	line-height: 1.2;
}

.logo span {
	color: #a9c5bd;
	font-weight: 400;
}

.navigation {
	display: flex;
	align-items: center;
	gap: 27px;
}

.navigation a {
	color:
		rgba(255, 255, 255, 0.85);
	font-size: 0.86rem;
	transition: 0.2s;
}

.navigation a:hover {
	color: white;
}

.bouton-navigation {
	padding: 10px 18px;
	border:
		1px solid
		rgba(255, 255, 255, 0.4);
	border-radius: 30px;
}

.bouton-navigation:hover {
	background: white;
	color: var(--bleu-fonce) !important;
}

/* =====================================================
   BOUTON MENU MOBILE
====================================================== */
.bouton-menu-mobile {
	display: none;
	width: 46px;
	height: 46px;
	padding: 0;
	border:
		1px solid
		rgba(255,255,255,0.35);
	border-radius: 50%;
	background:
		rgba(16,47,56,0.55);
	backdrop-filter: blur(8px);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	transition:
		background 0.25s ease,
		transform 0.25s ease;
}

.bouton-menu-mobile:hover {
	background:
		rgba(255,255,255,0.15);
}

.bouton-menu-mobile span {
	display: block;
	width: 16px;
	height: 1.5px;
	background: white;
	border-radius: 2px;
	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}

/* =====================================================
   ANIMATION DU BOUTON MENU
====================================================== */
.bouton-menu-mobile.ouvert
span:nth-child(1) {
	transform:
		translateY(5.5px)
		rotate(45deg);
}

.bouton-menu-mobile.ouvert
span:nth-child(2) {
	opacity: 0;
}

.bouton-menu-mobile.ouvert
span:nth-child(3) {
	transform:
		translateY(-5.5px)
		rotate(-45deg);
}

/* =====================================================
   MENU MOBILE
====================================================== */
.menu-mobile {
	position: fixed;
	top: 0;
	right: 0;
	width:
		min( 420px, 88vw
		);
	height: 100vh;
	height: 100dvh;
	z-index: 2000;
	padding:
		30px 30px 25px;
	display: flex;
	flex-direction: column;
	background: var(--bleu-fonce);
	color: white;
	transform:
		translateX(100%);
	transition:
		transform 0.4s
		cubic-bezier(.77,0,.18,1);
	box-shadow:
		-20px 0 60px
		rgba(0,0,0,0.2);
}

.menu-mobile.ouvert {
	transform:
		translateX(0);
}

/* =====================================================
   ENTÊTE MENU MOBILE
====================================================== */
.menu-mobile-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 25px;
	border-bottom:
		1px solid
		rgba(255,255,255,0.15);
}

.menu-mobile-titre {
	font-family: "Manrope", sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #a9c5bd;
}

.bouton-fermer-menu {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border:
		1px solid
		rgba(255,255,255,0.25);
	border-radius: 50%;
	background: transparent;
	color: white;
	font-size: 1.8rem;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	transition:
		background 0.2s ease;
}

.bouton-fermer-menu:hover {
	background:
		rgba(255,255,255,0.1);
}

/* =====================================================
   LIENS MENU MOBILE
====================================================== */
.menu-mobile-navigation {
	display: flex;
	flex-direction: column;
	margin-top: 20px;
	overflow-y: auto;
}

.menu-mobile-navigation a {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 19px 5px;
	border-bottom:
		1px solid
		rgba(255,255,255,0.1);
	color:
		rgba(255,255,255,0.88);
	font-family: "Manrope", sans-serif;
	font-size: 1.05rem;
	font-weight: 500;
	transition:
		color 0.2s ease,
		padding-left 0.2s ease;
}

.menu-mobile-navigation a:hover {
	padding-left: 10px;
	color: white;
}

.menu-mobile-numero {
	width: 28px;
	color: #789b8d;
	font-family: "DM Sans", sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
}

.menu-mobile-contact {
	margin-top: 15px;
	padding:
		18px 20px !important;
	border: none !important;
	border-radius: 12px;
	background: white;
	color: var(--bleu-fonce) !important;
}

.menu-mobile-contact
.menu-mobile-numero {
	color: var(--bleu) !important;
}

.menu-mobile-contact:hover {
	padding-left: 20px !important;
	background: #edf3f1;
}

/* =====================================================
   BAS DU MENU MOBILE
====================================================== */
.menu-mobile-bas {
	margin-top: auto;
	padding-top: 25px;
	border-top:
		1px solid
		rgba(255,255,255,0.12);
	color:
		rgba(255,255,255,0.45);
	font-size: 0.7rem;
	line-height: 1.5;
}

/* =====================================================
   VOILE DERRIÈRE LE MENU
====================================================== */
.voile-menu-mobile {
	position: fixed;
	inset: 0;
	z-index: 1900;
	background:
		rgba(5,20,24,0.6);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.35s ease,
		visibility 0.35s ease;
}

.voile-menu-mobile.visible {
	opacity: 1;
	visibility: visible;
}

body.menu-ouvert {
	overflow: hidden;
}

/* =====================================================
   HERO
====================================================== */
.hero {
	position: relative;
	height: 92vh;
	min-height: 650px;
	overflow: hidden;
	background: var(--bleu-fonce);
}

.hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	
	 -webkit-mask-image: linear-gradient(
        to right,
        black 0%,
        rgba(0,0,0,0.9) 30%,
        rgba(0,0,0,0.5) 65%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        black 0%,
        rgba(0,0,0,0.9) 30%,
        rgba(0,0,0,0.5) 65%,
        transparent 100%
    );
}

.hero-voile {
	position: absolute;
	inset: 0;
	background:
		linear-gradient( 90deg, rgba(8,31,37,0.88) 0%, rgba(8,31,37,0.62) 45%, rgba(8,31,37,0.15) 100%
		);
}

.hero-contenu {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: center;
}

.hero-texte {
	max-width: 760px;
	color: white;
}

.hero-sur-titre {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 25px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #b5cec8;
}

.hero-sur-titre::before {
	content: "";
	width: 35px;
	height: 1px;
	background: #b5cec8;
}

.hero h1 {
	margin: 0;
	font-size:
		clamp(3rem, 6vw, 5.8rem);
	line-height: 1.02;
	letter-spacing: -3px;
	font-weight: 700;
}

.hero h1 span {
	color: #a9c5bd;
}

.hero-description {
	max-width: 600px;
	margin-top: 30px;
	font-size: 1.15rem;
	line-height: 1.7;
	color:
		rgba(255,255,255,0.82);
}

.hero-actions {
	display: flex;
	gap: 15px;
	margin-top: 35px;
}

.bouton-principal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border-radius: 30px;
	background: white;
	color: var(--bleu-fonce);
	font-size: 0.9rem;
	font-weight: 600;
	transition: 0.25s;
}

.bouton-principal:hover {
	transform: translateY(-2px);
	background: #e9efed;
	color: var(--bleu-fonce);
}

.bouton-secondaire {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border:
		1px solid
		rgba(255,255,255,0.45);
	border-radius: 30px;
	color: white;
	font-size: 0.9rem;
	font-weight: 500;
	transition: 0.25s;
}

.bouton-secondaire:hover {
	background:
		rgba(255,255,255,0.1);
	color: white;
}

.hero-bas {
	position: absolute;
	z-index: 3;
	bottom: 35px;
	left: 0;
	width: 100%;
}

.hero-bas-contenu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:
		rgba(255,255,255,0.65);
	font-size: 0.78rem;
}

/* =====================================================
   QUI JE SUIS
====================================================== */
.introduction {
	padding: 130px 0;
	background: white;
}

.introduction-grille {
	display: grid;
	grid-template-columns:
		0.8fr 1.2fr;
	gap: 100px;
	align-items: center;
}

.petit-titre {
	margin-bottom: 18px;
	color: var(--bleu);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.introduction h2 {
	margin: 0;
	font-size:
		clamp(2rem, 4vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -2px;
}

.introduction-texte {
	font-size: 1.05rem;
	line-height: 1.85;
	color: var(--texte-secondaire);
}

.introduction-texte p {
	margin-bottom: 20px;
}

.photo-presentation {
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: var(--rayon);
	margin-bottom: 30px;
}

.signature {
	margin-top: 35px;
	padding-top: 25px;
	border-top:
		1px solid var(--bordure);
	font-family: "Manrope", sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
}

/* =====================================================
   QUELQUES REPÈRES
====================================================== */
.chiffres {
	padding: 100px 0;
	background: var(--bleu-fonce);
	color: white;
}

.chiffres-entete {
	max-width: 600px;
	margin-bottom: 60px;
}

.chiffres-entete .petit-titre {
	color: #a9c5bd;
}

.chiffres h2 {
	font-size:
		clamp(2rem, 4vw, 3.5rem);
	letter-spacing: -2px;
}

.chiffres-grille {
	display: grid;
	grid-template-columns:
		repeat(3, 1fr);
}

.chiffre {
	padding: 40px 25px;
}

.chiffre:last-child {
	border-right: none;
}

.chiffre-valeur {
	display: block;
	margin-bottom: 10px;
	font-family: "Manrope", sans-serif;
	font-size: 3rem;
	font-weight: 700;
}

.chiffre-description {
	color:
		rgba(255,255,255,0.65);
	font-size: 0.85rem;
}



/* =====================================================
   VOUS ÊTES
====================================================== */
.orientation {
	padding: 130px 0;
	background: var(--fond-creme);
}

.orientation-entete {
	max-width: 650px;
	margin-bottom: 55px;
}

.orientation h2 {
	font-size:
		clamp(2rem, 4vw, 3.5rem);
	letter-spacing: -2px;
}

.orientation-grille {
	display: grid;
	grid-template-columns:
		repeat(4, 1fr);
	gap: 15px;
}

.orientation-carte {
	min-height: 300px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: var(--rayon);
	background: white;
	transition: 0.3s;
}

.orientation-carte:hover {
	transform: translateY(-5px);
	box-shadow:
		0 15px 40px
		rgba(0,0,0,0.07);
}

.orientation-numero {
	color: #9aa8a9;
	font-size: 0.75rem;
}

.orientation-carte h3 {
	margin:
		25px 0 10px;
	color: var(--bleu);
	font-size: 1.25rem;
}

.orientation-carte p {
	margin: 0;
	color: var(--texte-secondaire);
	font-size: 0.85rem;
	line-height: 1.6;
}

.bouton-orientation {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 25px;
	padding: 11px 15px;
	border-radius: 30px;
	background: var(--bleu-fonce);
	color: white;
	font-size: 0.78rem;
	font-weight: 600;
	transition: 0.25s;
}

.bouton-orientation:hover {
	background: var(--bleu);
	color: white;
}

/* =====================================================
   MES ACTIVITÉS
====================================================== */
.services {
	padding: 130px 0;
	background: white;
}

.entete-section {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 30px;
	margin-bottom: 60px;
}

.entete-section h2 {
	margin: 0;
	font-size:
		clamp(2rem, 4vw, 3.5rem);
	letter-spacing: -2px;
}

.entete-section-description {
	max-width: 450px;
	margin: 0;
	color: var(--texte-secondaire);
	line-height: 1.7;
}

.services-grille {
	display: grid;
	grid-template-columns:
		repeat(3, 1fr);
	gap: 20px;
}

.service {
	position: relative;
	min-height: 350px;
	padding: 35px;
	border:
		1px solid var(--bordure);
	border-radius: var(--rayon);
	transition: 0.3s;
}

.service:hover {
	transform: translateY(-6px);
	border-color: #c5d4d1;
	box-shadow:
		0 20px 50px
		rgba(16,47,56,0.08);
}

.service-numero {
	color: #9aacae;
	font-family: "Manrope", sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
}

.service h3 {
	margin-top: 70px;
	margin-bottom: 15px;
	font-size: 1.35rem;
}

.service p {
	margin: 0;
	color: var(--texte-secondaire);
	line-height: 1.7;
	font-size: 0.92rem;
}

.service-fleche {
	position: absolute;
	right: 30px;
	bottom: 30px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--bleu-clair);
	color: var(--bleu);
}

/* =====================================================
   APPROCHE CLINIQUE
====================================================== */
.clinique {
	padding: 130px 0;
	background: var(--fond);
}

.clinique-entete {
	max-width: 700px;
	margin-bottom: 50px;
}

.clinique h2 {
	margin-bottom: 20px;
	font-size:
		clamp(2rem, 4vw, 3.5rem);
	letter-spacing: -2px;
}

.clinique-introduction {
	color: var(--texte-secondaire);
	line-height: 1.7;
}

.liste-prise-en-charge {
	display: grid;
	grid-template-columns:
		repeat(2, 1fr);
	gap: 10px;
}

.prise-en-charge {
	border:
		1px solid var(--bordure);
	border-radius: 12px;
	background: white;
	overflow: hidden;
}

.prise-en-charge-bouton {
	width: 100%;
	padding: 18px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: none;
	background: white;
	color: var(--texte);
	text-align: left;
	font-family: "DM Sans", sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
}

.prise-en-charge-bouton:hover {
	color: var(--bleu);
}

.prise-en-charge-symbole {
	color: var(--bleu);
	font-size: 1.2rem;
	transition: 0.25s;
	flex-shrink: 0;
	margin-left: 15px;
}

.prise-en-charge-ouverture
.prise-en-charge-symbole {
	transform: rotate(45deg);
}

.prise-en-charge-contenu {
	max-height: 0;
	overflow: hidden;
	transition:
		max-height 0.35s ease;
}

.prise-en-charge-contenu p {
	margin: 0;
	padding:
		0 20px 20px;
	color: var(--texte-secondaire);
	font-size: 0.85rem;
	line-height: 1.7;
}

/* =====================================================
   FORMATIONS
====================================================== */
.formations {
	padding: 130px 0;
	background: white;
}

.formations-grille {
	display: grid;
	grid-template-columns:
		0.9fr 1.1fr;
	gap: 80px;
	align-items: center;
}

.formations-image {
	width: 100%;
	height: 650px;
	object-fit: cover;
	border-radius: var(--rayon);
}

.formations h2 {
	margin-bottom: 20px;
	font-size:
		clamp(2rem, 4vw, 3.5rem);
	letter-spacing: -2px;
}

.formations-description {
	color: var(--texte-secondaire);
	line-height: 1.75;
	margin-bottom: 35px;
}

.formations-pastilles {
	display: grid;
	grid-template-columns:
		repeat(2, 1fr);
	gap: 12px;
}

.formation-pastille {
	display: block;
	padding: 22px;
	border:
		1px solid var(--bordure);
	border-radius: 14px;
	color: var(--texte);
	transition: 0.25s;
}

.formation-pastille:hover {
	background: var(--bleu-fonce);
	color: white;
	transform: translateY(-3px);
}

.formation-pastille-titre {
	display: block;
	margin-bottom: 7px;
	font-family: "Manrope", sans-serif;
	font-size: 1rem;
	font-weight: 700;
}

.formation-pastille-description {
	display: block;
	font-size: 0.76rem;
	opacity: 0.65;
}

/* =====================================================
   CONTACT
====================================================== */
.contact {
	position: relative;
	padding: 130px 0;
	background: var(--fond-creme);
	text-align: center;
}

.contact::before {
	content: "";
	display: block;
	width: 50px;
	height: 2px;
	margin:
		0 auto 55px;
	background: var(--bleu);
}

.contact-contenu {
	max-width: 700px;
	margin: auto;
}

.contact h2 {
	margin-bottom: 25px;
	font-size:
		clamp(2.5rem, 5vw, 4.5rem);
	letter-spacing: -3px;
}

.contact p {
	margin-bottom: 35px;
	color: var(--texte-secondaire);
	font-size: 1.05rem;
	line-height: 1.7;
}

.bouton-contact {
	display: inline-flex;
	padding: 15px 28px;
	border-radius: 30px;
	background: var(--bleu-fonce);
	color: white;
	font-size: 0.9rem;
	font-weight: 600;
	transition: 0.25s;
}

.bouton-contact:hover {
	transform: translateY(-2px);
	background: var(--bleu);
	color: white;
}

/* =====================================================
   PIED DE PAGE
====================================================== */
.pied-page {
	padding: 35px 0;
	background: #0b242b;
	color:
		rgba(255,255,255,0.6);
	font-size: 0.78rem;
}

.pied-page-contenu {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

/* =====================================================
   TABLETTE
====================================================== */
@media (max-width: 1000px) {
	.navigation {
		display: none;
	}

	.bouton-menu-mobile {
		display: flex;
	}

	.hero {
		height: 85vh;
		min-height: 620px;
	}

	.hero-contenu {
		padding-top: 90px;
		padding-bottom: 100px;
		align-items: center;
	}

	.hero-texte {
		max-width: 680px;
	}

	.hero h1 {
		font-size: clamp(2.8rem, 7vw, 4.8rem);
	}

	.introduction-grille,
	.formations-grille {
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.orientation-grille {
		grid-template-columns: repeat(2, 1fr);
	}

	.services-grille {
		grid-template-columns: repeat(2, 1fr);
	}

	.chiffres-grille {
		grid-template-columns: repeat(2, 1fr);
	}

	.chiffre:nth-child(2) {
		border-right: none;
	}
}

/* =====================================================
   TÉLÉPHONE
====================================================== */
@media (max-width: 650px) {
	.conteneur {
		width: min(     calc(100% - 30px),     1180px );
	}

	/* -----------------------------
	   NAVIGATION
	----------------------------- */
	.entete {
		padding: 17px 0;
	}

	.logo {
		font-size: 0.95rem;
	}

	.logo span {
		display: block;
		margin-top: 2px;
		font-size: 0.68rem;
	}

	.bouton-menu-mobile {
		width: 42px;
		height: 42px;
	}

	.bouton-menu-mobile span {
		width: 15px;
	}

	.menu-mobile {
		width: min(     390px,     92vw );
		padding: 25px 22px 20px;
	}

	.menu-mobile-navigation a {
		padding: 17px 3px;
		font-size: 0.98rem;
	}

	/* -----------------------------
	   HERO
	----------------------------- */
	.hero {
		height: 100svh;
		min-height: 650px;
	}

	.hero-voile {
		background: linear-gradient(     180deg,     rgba(8,31,37,0.72) 0%,     rgba(8,31,37,0.55) 35%,     rgba(8,31,37,0.78) 100% );
	}

	.hero-contenu {
		height: 100%;
		padding-top: 125px;
		padding-bottom: 145px;
		align-items: center;
	}

	.hero-texte {
		width: 100%;
		max-width: none;
	}

	.hero-sur-titre {
		margin-bottom: 18px;
		font-size: 0.65rem;
		letter-spacing: 1.5px;
		line-height: 1.5;
	}

	.hero-sur-titre::before {
		width: 25px;
	}

	.hero h1 {
		font-size: clamp(     2.45rem,     12vw,     3.6rem );
		line-height: 1.04;
		letter-spacing: -1.8px;
	}

	.hero-description {
		margin-top: 22px;
		font-size: 0.95rem;
		line-height: 1.65;
		max-width: 95%;
	}

	.hero-actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-top: 28px;
		width: 100%;
	}

	.bouton-principal,
	.bouton-secondaire {
		width: 100%;
		padding: 13px 20px;
		font-size: 0.84rem;
	}

	.hero-bas {
		bottom: 20px;
	}

	.hero-bas-contenu {
		flex-direction: column;
		justify-content: center;
		gap: 8px;
		text-align: center;
		font-size: 0.68rem;
	}

	.hero-bas-contenu span:last-child {
		opacity: 0.7;
	}

	/* -----------------------------
	   SECTIONS
	----------------------------- */
	.introduction,
	.chiffres,
	.orientation,
	.services,
	.clinique,
	.formations,
	.contact {
		padding: 85px 0;
	}

	/* -----------------------------
	   QUI JE SUIS
	----------------------------- */
	.photo-presentation {
		height: 300px;
	}

	/* -----------------------------
	   CHIFFRES
	----------------------------- */
	.chiffres-grille {
		grid-template-columns: 1fr 1fr;
	}

	.chiffre {
		padding: 30px 15px;
	}

	.chiffre-valeur {
		font-size: 2.2rem;
	}

	/* -----------------------------
	   VOUS ÊTES
	----------------------------- */
	.orientation-entete {
		margin-bottom: 35px;
	}

	.orientation-grille {
		grid-template-columns: 1fr;
	}

	.orientation-carte {
		min-height: 0;
		padding: 22px;
		border-radius: 15px;
	}

	.orientation-numero {
		font-size: 0.68rem;
	}

	.orientation-carte h3 {
		margin: 12px 0 7px;
		font-size: 1.08rem;
	}

	.orientation-carte p {
		font-size: 0.8rem;
		line-height: 1.5;
	}

	.bouton-orientation {
		margin-top: 18px;
		padding: 10px 14px;
		font-size: 0.74rem;
	}

	/* -----------------------------
	   ACTIVITÉS
	----------------------------- */
	.entete-section {
		display: block;
	}

	.entete-section-description {
		margin-top: 20px;
	}

	.services-grille {
		grid-template-columns: 1fr;
	}

	.service {
		min-height: 280px;
		padding: 27px;
	}

	.service h3 {
		margin-top: 45px;
	}

	/* -----------------------------
	   APPROCHE CLINIQUE
	----------------------------- */
	.liste-prise-en-charge {
		grid-template-columns: 1fr;
	}

	.prise-en-charge-bouton {
		padding: 16px 17px;
		font-size: 0.86rem;
	}

	.prise-en-charge-contenu p {
		padding: 0 17px 17px;
		font-size: 0.81rem;
	}

	/* -----------------------------
	   FORMATIONS
	----------------------------- */
	.formations-grille {
		gap: 45px;
	}

	.formations-image {
		height: 400px;
	}

	.formations-pastilles {
		grid-template-columns: 1fr;
	}

	.formation-pastille {
		padding: 18px;
	}

	/* -----------------------------
	   CONTACT
	----------------------------- */
	.contact {
		padding: 90px 0;
	}

	.contact::before {
		margin-bottom: 40px;
	}

	/* -----------------------------
	   PIED DE PAGE
	----------------------------- */
	.pied-page-contenu {
		flex-direction: column;
	}
}







/* =====================================================
           PAGE PATIENT
        ====================================================== */

        .page-patient {
            background: var(--blanc);
        }


        /* =====================================================
           BOUTON RETOUR
        ====================================================== */

        .patient-retour {
            padding: 115px 0 35px;
            background: var(--bleu-fonce);
        }

        .patient-retour a {
            display: inline-flex;
            align-items: center;
            gap: 9px;

            color: var(--texte-secondaire);

            font-size: 0.82rem;
            font-weight: 500;

            transition: 0.2s;
        }

        .patient-retour a:hover {
            color: var(--bleu);
            transform: translateX(-3px);
        }


        /* =====================================================
           HERO PATIENT
        ====================================================== */

        .patient-hero {
            padding: 55px 0 120px;
            background: var(--blanc);
        }

        .patient-hero-contenu {
            max-width: 850px;
        }

        .patient-hero .petit-titre {
            margin-bottom: 22px;
        }

        .patient-hero h1 {
            margin: 0;

            max-width: 850px;

            font-size:
                clamp(2.7rem, 6vw, 5.2rem);

            line-height: 1.03;

            letter-spacing: -3px;
        }

        .patient-hero h1 span {
            color: var(--bleu);
        }

        .patient-hero-description {
            max-width: 650px;

            margin-top: 30px;

            color: var(--texte-secondaire);

            font-size: 1.05rem;
            line-height: 1.8;
        }

        .patient-hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;

            margin-top: 35px;
        }

        .patient-bouton-principal {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 14px 24px;

            border-radius: 30px;

            background: var(--bleu-fonce);
            color: white;

            font-size: 0.9rem;
            font-weight: 600;

            transition: 0.25s;
        }

        .patient-bouton-principal:hover {
            transform: translateY(-2px);

            background: var(--bleu);
            color: white;
        }

        .patient-bouton-secondaire {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 14px 24px;

            border:
                1px solid
                var(--bordure);

            border-radius: 30px;

            color: var(--texte);
			background-color: var(--blanc);

            font-size: 0.9rem;
            font-weight: 500;

            transition: 0.25s;
        }

        .patient-bouton-secondaire:hover {
            border-color: var(--bleu);
            color: var(--bleu);
        }


        /* =====================================================
           SITUATIONS
        ====================================================== */

        .patient-situations {
            padding: 120px 0;

            background: var(--fond-creme);
        }

        .patient-entete-section {
            max-width: 680px;

            margin-bottom: 55px;
        }

        .patient-entete-section h2 {
            margin: 0;

            font-size:
                clamp(2rem, 4vw, 3.5rem);

            line-height: 1.1;

            letter-spacing: -2px;
        }

        .patient-entete-section p {
            margin-top: 20px;

            color: var(--texte-secondaire);

            line-height: 1.75;
        }


        /* =====================================================
           CARTES AVEC / SANS ORDONNANCE
        ====================================================== */

        .patient-parcours-grille {
            display: grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap: 20px;
        }

        .patient-parcours {
            display: flex;
            flex-direction: column;

            min-height: 480px;

            padding: 35px;

            border:
                1px solid
                var(--bordure);

            border-radius: var(--rayon);

            background: white;

            transition: 0.3s;
        }

        .patient-parcours:hover {
            transform: translateY(-5px);

            box-shadow:
                0 20px 50px
                rgba(16,47,56,0.08);
        }

        .patient-parcours-numero {
            color: #9aacae;

            font-family: "Manrope", sans-serif;

            font-size: 0.78rem;
            font-weight: 600;
        }

        .patient-parcours-icone {
            width: 48px;
            height: 48px;

            display: flex;
            align-items: center;
            justify-content: center;

            margin-top: 35px;
            margin-bottom: 25px;

            border-radius: 50%;

            background: var(--bleu-clair);
            color: var(--bleu);

            font-size: 1.15rem;
        }

        .patient-parcours h3 {
            margin-bottom: 15px;

            font-size: 1.45rem;
        }

        .patient-parcours-introduction {
            margin-bottom: 25px;

            color: var(--texte-secondaire);

            font-size: 0.9rem;
            line-height: 1.7;
        }

        .patient-liste {
            padding: 0;
            margin: 0;

            list-style: none;
        }

        .patient-liste li {
            display: flex;
            align-items: flex-start;
            gap: 10px;

            margin-bottom: 13px;

            color: var(--texte);

            font-size: 0.86rem;
            line-height: 1.5;
        }

        .patient-liste li::before {
            content: "✓";

            flex-shrink: 0;

            color: var(--vert);

            font-weight: 700;
        }

        .patient-parcours-bas {
            margin-top: auto;
            padding-top: 30px;
        }


        /* =====================================================
           ENCART RASSURANT
        ====================================================== */

        .patient-rassurance {
            margin-top: 20px;
            padding: 18px 20px;

            border-radius: 12px;

            background: var(--fond);

            color: var(--texte-secondaire);

            font-size: 0.78rem;
            line-height: 1.6;
        }

        .patient-rassurance strong {
            display: block;

            margin-bottom: 5px;

            color: var(--texte);

            font-family: "Manrope", sans-serif;

            font-size: 0.8rem;
        }


        /* =====================================================
           COMMENT ÇA SE PASSE
        ====================================================== */

        .patient-etapes {
            padding: 120px 0;

            background: var(--blanc);
        }

        .patient-etapes-grille {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 20px;
        }

        .patient-etape {
            padding: 32px;

            border-top:
                1px solid
                var(--bordure);
        }

        .patient-etape-numero {
            margin-bottom: 30px;

            color: var(--vert);

            font-family: "Manrope", sans-serif;

            font-size: 0.8rem;
            font-weight: 700;
        }

        .patient-etape h3 {
            margin-bottom: 12px;

            font-size: 1.25rem;
        }

        .patient-etape p {
            margin: 0;

            color: var(--texte-secondaire);

            font-size: 0.88rem;
            line-height: 1.7;
        }


        /* =====================================================
           PATHOLOGIES
        ====================================================== */

        .patient-pathologies {
            padding: 120px 0;

            background: var(--fond);
        }

        .patient-pathologies-grille {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 10px;
        }

        .patient-pathologie {
            padding: 20px;

            border:
                1px solid
                var(--bordure);

            border-radius: 12px;

            background: white;

            color: var(--texte);

            font-size: 0.86rem;
            font-weight: 500;

            transition: 0.25s;
        }

        .patient-pathologie:hover {
            color: var(--bleu);

            border-color: #c5d4d1;

            transform: translateY(-2px);
        }


        /* =====================================================
           CONTACT PATIENT
        ====================================================== */

        .patient-contact {
            padding: 130px 0;

            background: var(--blanc-casse);

            text-align: center;
        }

        .patient-contact-contenu {
            max-width: 700px;

            margin: auto;
        }

        .patient-contact h2 {
            margin-bottom: 25px;

            font-size:
                clamp(2.5rem, 5vw, 4.5rem);

            line-height: 1.05;

            letter-spacing: -3px;
        }

        .patient-contact p {
            margin-bottom: 35px;

            color: var(--texte-secondaire);

            font-size: 1.05rem;
            line-height: 1.7;
        }

        .patient-contact-actions {
            display: flex;

            justify-content: center;

            gap: 12px;

            flex-wrap: wrap;
        }


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

        @media (max-width: 1000px) {

            .patient-parcours-grille {
                grid-template-columns: 1fr;
            }

            .patient-etapes-grille {
                grid-template-columns: 1fr;
            }

            .patient-pathologies-grille {
                grid-template-columns:
                    repeat(2, 1fr);
            }

        }


        @media (max-width: 650px) {

            .patient-retour {
                padding-top: 100px;
                padding-bottom: 25px;
            }

            .patient-hero {
                padding: 35px 0 85px;
            }

            .patient-hero h1 {
                font-size:
                    clamp(2.45rem, 12vw, 3.6rem);

                letter-spacing: -1.8px;
            }

            .patient-hero-description {
                margin-top: 22px;

                font-size: 0.92rem;

                line-height: 1.65;
            }

            .patient-hero-actions {
                flex-direction: column;

                margin-top: 28px;
            }

            .patient-bouton-principal,
            .patient-bouton-secondaire {
                width: 100%;
            }


            .patient-situations,
            .patient-etapes,
            .patient-pathologies {
                padding: 85px 0;
            }


            .patient-entete-section {
                margin-bottom: 35px;
            }

            .patient-entete-section h2 {
                font-size: 2rem;
            }


            .patient-parcours {
                min-height: 0;

                padding: 27px;
            }

            .patient-parcours-icone {
                margin-top: 25px;
            }


            .patient-pathologies-grille {
                grid-template-columns: 1fr;
            }


            .patient-contact {
                padding: 90px 0;
            }

            .patient-contact h2 {
                font-size: 2.6rem;

                letter-spacing: -2px;
            }

            .patient-contact-actions {
                flex-direction: column;
            }

            .patient-contact-actions a {
                width: 100%;
            }

        }
		
		
		
		
		
		
/* =====================================================
				   PAGE
				====================================================== */

				.page-contact-professionnel {

					background: var(--blanc);

				}


				/* =====================================================
				   RETOUR
				====================================================== */

				.contact-professionnel-retour {

					padding:
						115px
						0
						35px;

					background:
						var(--bleu-fonce);

				}


				.contact-professionnel-retour a {

					display: inline-flex;

					align-items: center;

					gap: 9px;

					color:var(--texte-secondaire);

					font-size:
						0.82rem;

					font-weight:
						500;

					transition:
						0.2s;

				}


				.contact-professionnel-retour a:hover {

					color:
						var(--bleu);

					transform:
						translateX(-3px);

				}


				/* =====================================================
				   INTRODUCTION
				====================================================== */

				.contact-professionnel-introduction {

					padding:
						45px
						0
						90px;

					background:
						var(--blanc);

				}


				.contact-professionnel-introduction-contenu {

					max-width:
						850px;

				}


				.contact-professionnel-introduction h1 {

					margin:
						20px 0 0;

					max-width:
						850px;

					font-size:
						clamp(
							2.7rem,
							6vw,
							5rem
						);

					line-height:
						1.04;

					letter-spacing:
						-3px;

				}


				.contact-professionnel-introduction h1 span {

					color:
						var(--bleu);

				}


				.contact-professionnel-introduction p {

					max-width:
						680px;

					margin:
						30px 0 0;

					color:
						var(--texte-secondaire);

					font-size:
						1rem;

					line-height:
						1.8;

				}


				/* =====================================================
				   FORMULAIRE
				====================================================== */

				.contact-professionnel-formulaire-section {

					padding:
						110px
						0
						130px;

					background:
						var(--fond-creme);

				}


				.contact-professionnel-grille {

					display:
						grid;

					grid-template-columns:
						minmax(250px, 0.75fr)
						minmax(500px, 1.5fr);

					gap:
						80px;

					align-items:
						start;

				}


				/* =====================================================
				   COLONNE INFORMATIONS
				====================================================== */

				.contact-professionnel-informations {

					position:
						sticky;

					top:
						110px;

				}


				.contact-professionnel-informations h2 {

					margin:
						15px 0 20px;

					font-size:
						clamp(
							1.8rem,
							3vw,
							2.7rem
						);

					line-height:
						1.1;

					letter-spacing:
						-1.5px;

				}


				.contact-professionnel-informations > p {

					color:
						var(--texte-secondaire);

					font-size:
						0.88rem;

					line-height:
						1.75;

				}


				.contact-professionnel-infos-liste {

					margin:
						40px 0 0;

					padding:
						0;

					list-style:
						none;

				}


				.contact-professionnel-infos-liste li {

					display:
						flex;

					gap:
						15px;

					padding:
						18px 0;

					border-top:
						1px solid
						var(--bordure);

					font-size:
						0.84rem;

					line-height:
						1.55;

				}


				.contact-professionnel-infos-liste li:last-child {

					border-bottom:
						1px solid
						var(--bordure);

				}


				.contact-professionnel-infos-numero {

					flex-shrink:
						0;

					color:
						var(--vert);

					font-family:
						"Manrope",
						sans-serif;

					font-size:
						0.72rem;

					font-weight:
						700;

				}


				/* =====================================================
				   CARTE FORMULAIRE
				====================================================== */

				.contact-professionnel-formulaire {

					padding:
						42px;

					background:
						var(--blanc);

					border:
						1px solid
						var(--bordure);

					border-radius:
						var(--rayon);

					box-shadow:
						0 20px 60px
						rgba(
							16,
							47,
							56,
							0.05
						);

				}


				.contact-professionnel-formulaire-entete {

					padding-bottom:
						30px;

					margin-bottom:
						30px;

					border-bottom:
						1px solid
						var(--bordure);

				}


				.contact-professionnel-formulaire-entete h2 {

					margin:
						0 0 10px;

					font-size:
						1.6rem;

					letter-spacing:
						-0.8px;

				}


				.contact-professionnel-formulaire-entete p {

					margin:
						0;

					color:
						var(--texte-secondaire);

					font-size:
						0.82rem;

					line-height:
						1.6;

				}


				/* =====================================================
				   GROUPES
				====================================================== */

				.champ-formulaire {

					margin-bottom:
						24px;

				}


				.ligne-champs {

					display:
						grid;

					grid-template-columns:
						repeat(
							2,
							minmax(0, 1fr)
						);

					gap:
						18px;

				}


				.champ-formulaire label {

					display:
						block;

					margin-bottom:
						8px;

					color:
						var(--texte);

					font-family:
						"Manrope",
						sans-serif;

					font-size:
						0.76rem;

					font-weight:
						600;

				}


				.champ-obligatoire {

					color:
						var(--vert);

				}


				.champ-formulaire input,
				.champ-formulaire select,
				.champ-formulaire textarea {

					width:
						100%;

					padding:
						13px 15px;

					border:
						1px solid
						var(--bordure);

					border-radius:
						10px;

					background:
						var(--fond);

					color:
						var(--texte);

					font-family:
						"DM Sans",
						sans-serif;

					font-size:
						0.86rem;

					outline:
						none;

					transition:
						border-color 0.2s,
						box-shadow 0.2s,
						background 0.2s;

				}


				.champ-formulaire input,
				.champ-formulaire select {

					min-height:
						48px;

				}


				.champ-formulaire textarea {

					min-height:
						190px;

					resize:
						vertical;

					line-height:
						1.65;

				}


				.champ-formulaire input:focus,
				.champ-formulaire select:focus,
				.champ-formulaire textarea:focus {

					border-color:
						var(--bleu);

					background:
						var(--blanc);

					box-shadow:
						0 0 0 3px
						rgba(
							30,
							91,
							104,
							0.08
						);

				}


				.champ-formulaire input::placeholder,
				.champ-formulaire textarea::placeholder {

					color:
						#9aa8aa;

				}


				/* =====================================================
				   SELECT
				====================================================== */

				.champ-formulaire select {

					cursor:
						pointer;

				}


				/* =====================================================
				   CONTEXTE CLINIQUE
				====================================================== */

				.aide-champ {

					margin-top:
						7px;

					color:
						var(--texte-secondaire);

					font-size:
						0.7rem;

					line-height:
						1.5;

				}


				/* =====================================================
				   FICHIERS
				====================================================== */

				.zone-fichiers {

					padding:
						24px;

					border:
						1px dashed
						#b9c9c7;

					border-radius:
						12px;

					background:
						var(--fond);

					transition:
						0.2s;

				}


				.zone-fichiers:hover {

					border-color:
						var(--bleu);

				}


				.zone-fichiers label {

					margin-bottom:
						5px;

				}


				.zone-fichiers input[type="file"] {

					padding:
						10px;

					background:
						var(--blanc);

					cursor:
						pointer;

				}


				.zone-fichiers-description {

					margin-top:
						10px;

					color:
						var(--texte-secondaire);

					font-size:
						0.7rem;

					line-height:
						1.55;

				}


				/* =====================================================
				   CASE DE CONFIRMATION
				====================================================== */

				.confirmation-anonymisation {

					display:
						flex;

					align-items:
						flex-start;

					gap:
						11px;

					margin:
						28px 0;

					padding:
						17px;

					border-radius:
						10px;

					background:
						var(--bleu-clair);

				}


				.confirmation-anonymisation input {

					width:
						17px;

					height:
						17px;

					flex-shrink:
						0;

					margin-top:
						2px;

					accent-color:
						var(--bleu);

					cursor:
						pointer;

				}


				.confirmation-anonymisation label {

					margin:
						0;

					color:
						var(--texte-secondaire);

					font-size:
						0.73rem;

					line-height:
						1.6;

					cursor:
						pointer;

				}


				/* =====================================================
				   BOUTON ENVOI
				====================================================== */

				.bouton-envoi-contact {

					width:
						100%;

					min-height:
						54px;

					display:
						inline-flex;

					align-items:
						center;

					justify-content:
						center;

					gap:
						10px;

					padding:
						14px 24px;

					border:
						none;

					border-radius:
						30px;

					background:
						var(--bleu-fonce);

					color:
						white;

					font-family:
						"Manrope",
						sans-serif;

					font-size:
						0.84rem;

					font-weight:
						600;

					cursor:
						pointer;

					transition:
						0.25s;

				}


				.bouton-envoi-contact:hover {

					background:
						var(--bleu);

					transform:
						translateY(-2px);

				}


				/* =====================================================
				   MENTION
				====================================================== */

				.mention-formulaire {

					margin:
						18px 0 0;

					text-align:
						center;

					color:
						var(--texte-secondaire);

					font-size:
						0.67rem;

					line-height:
						1.5;

				}


				/* =====================================================
				   BAS DE PAGE
				====================================================== */

				.contact-professionnel-bas {

					padding:
						100px 0;

					background:
						var(--blanc);

					text-align:
						center;

				}


				.contact-professionnel-bas-contenu {

					max-width:
						650px;

					margin:
						auto;

				}


				.contact-professionnel-bas h2 {

					margin:
						15px 0 20px;

					font-size:
						clamp(
							2rem,
							4vw,
							3.3rem
						);

					line-height:
						1.08;

					letter-spacing:
						-2px;

				}


				.contact-professionnel-bas p {

					margin:
						0;

					color:
						var(--texte-secondaire);

					font-size:
						0.9rem;

					line-height:
						1.7;

				}


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

				@media (max-width: 1000px) {

					.contact-professionnel-grille {

						grid-template-columns:
							1fr;

						gap:
							45px;

					}


					.contact-professionnel-informations {

						position:
							static;

						max-width:
							700px;

					}

				}


				@media (max-width: 650px) {

					.contact-professionnel-retour {

						padding:
							100px 0 25px;

					}


					.contact-professionnel-introduction {

						padding:
							35px 0 75px;

					}


					.contact-professionnel-introduction h1 {

						font-size:
							clamp(
								2.45rem,
								12vw,
								3.6rem
							);

						letter-spacing:
							-1.8px;

					}


					.contact-professionnel-introduction p {

						margin-top:
							22px;

						font-size:
							0.92rem;

						line-height:
							1.65;

					}


					.contact-professionnel-formulaire-section {

						padding:
							75px 0 85px;

					}


					.contact-professionnel-grille {

						gap:
							35px;

					}


					.contact-professionnel-formulaire {

						padding:
							25px 20px;

						border-radius:
							18px;

					}


					.ligne-champs {

						grid-template-columns:
							1fr;

						gap:
							0;

					}


					.champ-formulaire {

						margin-bottom:
							20px;

					}


					.contact-professionnel-informations h2 {

						font-size:
							2rem;

					}


					.contact-professionnel-bas {

						padding:
							80px 0;

					}

				}
				
				/* =====================================================
           PAGE
        ====================================================== */

        .page-demande-courrier {
            background:
                var(--blanc);

        }


        /* =====================================================
           RETOUR
        ====================================================== */

        .demande-courrier-retour {

            padding:
                115px
                0
                35px;

            background:
                var(--blanc);

        }


        .demande-courrier-retour a {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                9px;

            color:
                var(--texte-secondaire);

            font-size:
                0.82rem;

            font-weight:
                500;

            transition:
                0.2s;

        }


        .demande-courrier-retour a:hover {

            color:
                var(--bleu);

            transform:
                translateX(-3px);

        }


        /* =====================================================
           INTRODUCTION
        ====================================================== */

        .demande-courrier-introduction {

            padding:
                45px
                0
                90px;

            background:
                var(--blanc);

        }


        .demande-courrier-introduction-contenu {

            max-width:
                850px;

        }


        .demande-courrier-introduction h1 {

            margin:
                20px 0 0;

            max-width:
                850px;

            font-size:
                clamp(
                    2.7rem,
                    6vw,
                    5rem
                );

            line-height:
                1.04;

            letter-spacing:
                -3px;

        }


        .demande-courrier-introduction h1 span {

            color:
                var(--bleu);

        }


        .demande-courrier-introduction p {

            max-width:
                690px;

            margin:
                30px 0 0;

            color:
                var(--texte-secondaire);

            font-size:
                1rem;

            line-height:
                1.8;

        }


        /* =====================================================
           SECTION FORMULAIRE
        ====================================================== */

        .demande-courrier-formulaire-section {

            padding:
                110px
                0
                130px;

            background:
                var(--fond-creme);

        }


        .demande-courrier-grille {

            display:
                grid;

            grid-template-columns:
                minmax(250px, 0.75fr)
                minmax(500px, 1.5fr);

            gap:
                80px;

            align-items:
                start;

        }


        /* =====================================================
           COLONNE INFORMATIONS
        ====================================================== */

        .demande-courrier-informations {

            position:
                sticky;

            top:
                110px;

        }


        .demande-courrier-informations h2 {

            margin:
                15px 0 20px;

            font-size:
                clamp(
                    1.8rem,
                    3vw,
                    2.7rem
                );

            line-height:
                1.1;

            letter-spacing:
                -1.5px;

        }


        .demande-courrier-informations > p {

            color:
                var(--texte-secondaire);

            font-size:
                0.88rem;

            line-height:
                1.75;

        }


        /* =====================================================
           LISTE EXPLICATIVE
        ====================================================== */

        .demande-courrier-infos-liste {

            margin:
                40px 0 0;

            padding:
                0;

            list-style:
                none;

        }


        .demande-courrier-infos-liste li {

            display:
                flex;

            gap:
                15px;

            padding:
                18px 0;

            border-top:
                1px solid
                var(--bordure);

            font-size:
                0.84rem;

            line-height:
                1.55;

        }


        .demande-courrier-infos-liste li:last-child {

            border-bottom:
                1px solid
                var(--bordure);

        }


        .demande-courrier-numero {

            flex-shrink:
                0;

            color:
                var(--vert);

            font-family:
                "Manrope",
                sans-serif;

            font-size:
                0.72rem;

            font-weight:
                700;

        }


        /* =====================================================
           CARTE FORMULAIRE
        ====================================================== */

        .demande-courrier-formulaire {

            padding:
                42px;

            background:
                var(--blanc);

            border:
                1px solid
                var(--bordure);

            border-radius:
                var(--rayon);

            box-shadow:
                0 20px 60px
                rgba(
                    16,
                    47,
                    56,
                    0.05
                );

        }


        .demande-courrier-formulaire-entete {

            padding-bottom:
                30px;

            margin-bottom:
                30px;

            border-bottom:
                1px solid
                var(--bordure);

        }


        .demande-courrier-formulaire-entete h2 {

            margin:
                0 0 10px;

            font-size:
                1.6rem;

            letter-spacing:
                -0.8px;

        }


        .demande-courrier-formulaire-entete p {

            margin:
                0;

            color:
                var(--texte-secondaire);

            font-size:
                0.82rem;

            line-height:
                1.6;

        }


        /* =====================================================
           CHAMPS
        ====================================================== */

        .champ-formulaire {

            margin-bottom:
                24px;

        }


        .ligne-champs {

            display:
                grid;

            grid-template-columns:
                repeat(
                    2,
                    minmax(0, 1fr)
                );

            gap:
                18px;

        }


        .champ-formulaire label {

            display:
                block;

            margin-bottom:
                8px;

            color:
                var(--texte);

            font-family:
                "Manrope",
                sans-serif;

            font-size:
                0.76rem;

            font-weight:
                600;

        }


        .champ-obligatoire {

            color:
                var(--vert);

        }


        .champ-formulaire input,
        .champ-formulaire select,
        .champ-formulaire textarea {

            width:
                100%;

            padding:
                13px 15px;

            border:
                1px solid
                var(--bordure);

            border-radius:
                10px;

            background:
                var(--fond);

            color:
                var(--texte);

            font-family:
                "DM Sans",
                sans-serif;

            font-size:
                0.86rem;

            outline:
                none;

            transition:
                border-color 0.2s,
                box-shadow 0.2s,
                background 0.2s;

        }


        .champ-formulaire input,
        .champ-formulaire select {

            min-height:
                48px;

        }


        .champ-formulaire textarea {

            min-height:
                170px;

            resize:
                vertical;

            line-height:
                1.65;

        }


        .champ-formulaire input:focus,
        .champ-formulaire select:focus,
        .champ-formulaire textarea:focus {

            border-color:
                var(--bleu);

            background:
                var(--blanc);

            box-shadow:
                0 0 0 3px
                rgba(
                    30,
                    91,
                    104,
                    0.08
                );

        }


        .champ-formulaire input::placeholder,
        .champ-formulaire textarea::placeholder {

            color:
                #9aa8aa;

        }


        /* =====================================================
           AIDE
        ====================================================== */

        .aide-champ {

            margin-top:
                7px;

            color:
                var(--texte-secondaire);

            font-size:
                0.7rem;

            line-height:
                1.5;

        }


        /* =====================================================
           ZONE INFORMATION
        ====================================================== */

        .encart-information {

            margin:
                28px 0;

            padding:
                18px 20px;

            border-radius:
                12px;

            background:
                var(--bleu-clair);

            color:
                var(--texte-secondaire);

            font-size:
                0.73rem;

            line-height:
                1.6;

        }


        .encart-information strong {

            color:
                var(--bleu-fonce);

        }


        /* =====================================================
           BOUTON
        ====================================================== */

        .bouton-envoi-courrier {

            width:
                100%;

            min-height:
                54px;

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                10px;

            padding:
                14px 24px;

            border:
                none;

            border-radius:
                30px;

            background:
                var(--bleu-fonce);

            color:
                white;

            font-family:
                "Manrope",
                sans-serif;

            font-size:
                0.84rem;

            font-weight:
                600;

            cursor:
                pointer;

            transition:
                0.25s;

        }


        .bouton-envoi-courrier:hover {

            background:
                var(--bleu);

            transform:
                translateY(-2px);

        }


        .mention-formulaire {

            margin:
                18px 0 0;

            text-align:
                center;

            color:
                var(--texte-secondaire);

            font-size:
                0.67rem;

            line-height:
                1.5;

        }


        /* =====================================================
           BAS DE PAGE
        ====================================================== */

        .demande-courrier-bas {

            padding:
                100px 0;

            background:
                var(--blanc);

            text-align:
                center;

        }


        .demande-courrier-bas-contenu {

            max-width:
                650px;

            margin:
                auto;

        }


        .demande-courrier-bas h2 {

            margin:
                15px 0 20px;

            font-size:
                clamp(
                    2rem,
                    4vw,
                    3.3rem
                );

            line-height:
                1.08;

            letter-spacing:
                -2px;

        }


        .demande-courrier-bas p {

            margin:
                0;

            color:
                var(--texte-secondaire);

            font-size:
                0.9rem;

            line-height:
                1.7;

        }


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

        @media (max-width: 1000px) {

            .demande-courrier-grille {

                grid-template-columns:
                    1fr;

                gap:
                    45px;

            }


            .demande-courrier-informations {

                position:
                    static;

                max-width:
                    700px;

            }

        }


        @media (max-width: 650px) {

            .demande-courrier-retour {

                padding:
                    100px 0 25px;

            }


            .demande-courrier-introduction {

                padding:
                    35px 0 75px;

            }


            .demande-courrier-introduction h1 {

                font-size:
                    clamp(
                        2.45rem,
                        12vw,
                        3.6rem
                    );

                letter-spacing:
                    -1.8px;

            }


            .demande-courrier-introduction p {

                margin-top:
                    22px;

                font-size:
                    0.92rem;

                line-height:
                    1.65;

            }


            .demande-courrier-formulaire-section {

                padding:
                    75px 0 85px;

            }


            .demande-courrier-grille {

                gap:
                    35px;

            }


            .demande-courrier-formulaire {

                padding:
                    25px 20px;

                border-radius:
                    18px;

            }


            .ligne-champs {

                grid-template-columns:
                    1fr;

                gap:
                    0;

            }


            .choix-statut-patient {

                grid-template-columns:
                    1fr;

            }


            .champ-formulaire {

                margin-bottom:
                    20px;

            }


            .demande-courrier-informations h2 {

                font-size:
                    2rem;

            }


            .demande-courrier-bas {

                padding:
                    80px 0;

            }

        }
		
		
		
		
		
		/* PAGE SPORTIF */

.sportif-introduction {
    padding: 150px 0 100px;
    background: var(--blanc);
}

.sportif-introduction-contenu {
    max-width: 850px;
}

.sportif-introduction-contenu h1 {
    margin: 18px 0 25px;
}

.sportif-introduction-contenu h1 span {
    display: block;
}

.sportif-introduction-contenu p {
    max-width: 720px;
    color: var(--texte-secondaire);
    line-height: 1.8;
}


.sportif-formulaire-section {
    padding: 100px 0;
    background: var(--bleu-clair);
}

.sportif-grille {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.sportif-informations {
    position: sticky;
    top: 120px;
}

.sportif-informations h2 {
    margin: 18px 0 25px;
}

.sportif-informations p {
    color: var(--texte-secondaire);
    line-height: 1.7;
}

.sportif-infos-liste {
    list-style: none;
    padding: 0;
    margin: 35px 0 0;
}

.sportif-infos-liste li {
    display: flex;
    gap: 15px;
    margin-bottom: 22px;
    color: var(--texte-secondaire);
    line-height: 1.6;
}

.sportif-numero {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bleu);
}


.sportif-formulaire {
    padding: 45px;
    background: var(--blanc);
    border-radius: 14px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.05);
}

.sportif-formulaire-entete {
    margin-bottom: 35px;
}

.sportif-formulaire-entete h2 {
    margin-bottom: 10px;
}

.sportif-formulaire-entete p {
    margin: 0;
    color: var(--texte-secondaire);
    font-size: 0.8rem;
}


.sportif-bas {
    padding: 100px 0;
    background: var(--blanc);
}

.sportif-bas-contenu {
    max-width: 700px;
}

.sportif-bas-contenu h2 {
    margin: 18px 0 20px;
}

.sportif-bas-contenu p {
    margin-bottom: 30px;
    color: var(--texte-secondaire);
    line-height: 1.7;
}


.bouton-envoi-sportif {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--bleu);
    color: var(--blanc);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.bouton-envoi-sportif span {
    font-size: 1.2rem;
}

.bouton-envoi-sportif:hover {
    transform: translateY(-2px);
}


@media (max-width: 900px) {

    .sportif-grille {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .sportif-informations {
        position: static;
    }

}


@media (max-width: 600px) {

    .sportif-introduction {
        padding: 120px 0 70px;
    }

    .sportif-formulaire-section {
        padding: 60px 0;
    }

    .sportif-formulaire {
        padding: 25px 20px;
    }

    .sportif-bas {
        padding: 70px 0;
    }

}



/* FORMATION */

.formation-introduction {
    padding: 150px 0 100px;
    background: var(--blanc-casse);
}

.formation-introduction-contenu {
    max-width: 850px;
}

.formation-introduction h1 {
    margin: 20px 0;
}

.formation-introduction h1 span {
    color: var(--bleu);
}

.formation-introduction p {
    max-width: 720px;
    color: var(--texte-secondaire);
    line-height: 1.8;
}

.formation-formulaire-section {
    padding: 100px 0;
    background: var(--blanc);
}

.formation-grille {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.formation-informations {
    position: sticky;
    top: 120px;
}

.formation-informations h2 {
    margin: 18px 0;
}

.formation-informations p {
    color: var(--texte-secondaire);
    line-height: 1.8;
}

.formation-infos-liste {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
}

.formation-infos-liste li {
    display: flex;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--bordure);
    color: var(--texte-secondaire);
    line-height: 1.6;
}

.formation-numero {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bleu);
}

.formation-formulaire {
    padding: 45px;
    background: var(--blanc-casse);
    border: 1px solid var(--bordure);
    border-radius: 14px;
}

.formation-formulaire-entete {
    margin-bottom: 35px;
}

.formation-formulaire-entete h2 {
    margin-bottom: 10px;
}

.formation-formulaire-entete p {
    margin: 0;
    color: var(--texte-secondaire);
    font-size: 0.8rem;
}

.formation-choix {
    display: flex;
    flex-direction: column;
	gap: 8px;
    margin-top: 10px;
}

.formation-case {
    display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
    gap: 15px;
    min-height: 50px;
    padding: 8px !important;
    cursor: pointer;
    color: var(--texte-secondaire);
    line-height: 1.3;
    transition: color 0.15s ease;
	background-color: var(--blanc);
	border-radius: 8px;
}
			.formation-case input {
				margin: 0 !important;
				flex-shrink: 0 !important;
			}

.formation-case:last-child {
    border-bottom: none;
}

.formation-case:hover {
    color: var(--texte);
}

/* Case à cocher */
.formation-case input {
    -webkit-appearance: none;
    appearance: none;

    width: 17px;
    height: 17px;

    min-width: 17px;
    max-width: 17px;
    min-height: 17px;
    max-height: 17px;

    flex: 0 0 17px;
    flex-shrink: 0;

    margin: 0;
    padding: 0;

    border: 1.5px solid var(--bordure);
    border-radius: 4px;
    background: var(--blanc);

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease;
}

/* Survol de la case */
.formation-case input:hover {
    border-color: var(--bleu);
}

/* Case sélectionnée */
.formation-case input:checked {
    background: var(--bleu);
    border-color: var(--bleu);
}

/* Coche */
.formation-case input:checked::after {
    content: "";
    width: 4px;
    height: 8px;

    border: solid white;
    border-width: 0 1.5px 1.5px 0;

    transform: rotate(45deg) translate(-1px, -1px);
}

/* Texte */

.formation-case:has(input:checked) {
    color: var(--bleu);
}

/* ==============================
   DURÉE DE LA FORMATION
   ============================== */

.formation-duree {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.formation-duree input {
    display: none;
}

.formation-duree label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 90px;

    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: 10px;

    cursor: pointer;
    transition: 0.2s ease;
}

.formation-duree label strong {
    font-family: 'Manrope', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
}

.formation-duree label span {
    color: var(--texte-secondaire);
    font-size: 0.75rem;
}

.formation-duree input:checked + label {
    border-color: var(--bleu);
    background: var(--bleu-clair);
    color: var(--bleu);
}

.formation-duree input:checked + label span {
    color: var(--bleu);
}

.confirmation-contact {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 28px 0;
    padding: 17px;
    border-radius: 10px;
    background: var(--bleu-clair);
}

.confirmation-contact input {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--bleu);
}

.confirmation-contact label {
    margin: 0;
    color: var(--texte-secondaire);
    font-size: 0.73rem;
    line-height: 1.6;
    cursor: pointer;
}

.bouton-envoi-formation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 17px 20px;
    border: 0;
    border-radius: 30px;
    background: var(--bleu-fonce);
    color: var(--blanc);
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.bouton-envoi-formation:hover {
    transform: translateY(-2px);
}

.bouton-envoi-formation span {
    font-size: 1.2rem;
}

.formation-bas {
    padding: 100px 0;
    background: var(--bleu-clair);
}

.formation-bas-contenu {
    max-width: 700px;
}

.formation-bas-contenu h2 {
    margin: 18px 0;
}

.formation-bas-contenu p {
    max-width: 650px;
    margin-bottom: 30px;
    color: var(--texte-secondaire);
    line-height: 1.8;
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .formation-grille {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .formation-informations {
        position: static;
    }

}

@media (max-width: 767px) {

    .formation-introduction {
        padding: 125px 0 70px;
    }

    .formation-formulaire-section {
        padding: 70px 0;
    }

    .formation-formulaire {
        padding: 25px 20px;
    }

    .formation-choix {
        grid-template-columns: 1fr;
    }

    .formation-duree {
        gap: 8px;
    }

    .formation-duree label {
        min-height: 75px;
    }

    .formation-bas {
        padding: 70px 0;
    }

}

/* CONFIRMATION */

.page-confirmation {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.confirmation-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0 70px;
    background: var(--blanc-casse);
}

.confirmation-contenu {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.confirmation-symbole {
    width: 58px;
    height: 58px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bleu-clair);
    color: var(--bleu);
    font-size: 1.4rem;
    font-weight: 700;
}

.confirmation-contenu h1 {
    margin: 18px 0;
}

.confirmation-contenu h1 span {
    color: var(--bleu);
}

.confirmation-contenu p {
    max-width: 600px;
    margin: 0 auto;
    color: var(--texte-secondaire);
    line-height: 1.8;
}

.confirmation-redirection {
    margin: 30px 0;
    color: var(--texte-secondaire);
    font-size: 0.8rem;
}

.confirmation-redirection strong {
    color: var(--bleu);
}

.confirmation-contenu .bouton-contact {
    display: inline-flex;
}


/* RESPONSIVE */

@media (max-width: 767px) {

    .confirmation-page {
        padding: 110px 20px 50px;
    }

    .confirmation-contenu h1 {
        font-size: 1.8rem;
    }

    .confirmation-contenu p {
        font-size: 0.9rem;
    }

}