/* --- DESIGN SYSTEM : UBER / AIRBNB VIBE --- */
 :root {
 	--black: #0B0E14;
 	--black-soft: #1A1D24;
 	--white: #FFFFFF;
 	--gray-50: #F9FAFB;
 	--gray-100: #EBEBEB;
 	--gray-200: #DDDDDD;
 	--gray-500: #717171;

 	--blue-accent: #3B82F6;
 	--blue-accent-hover: #2563EB;
 	--success: #10B981;

 	--bg-beige: #FDFBF7;
 }

 body {
 	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 	background-color: var(--white);
 	color: var(--black-soft);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	overflow-x: hidden;
 	line-height: 1.6;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
 	font-weight: 700;
 	letter-spacing: -0.02em;
 	color: var(--black);
 	line-height: 1.15;
 }

 a {
 	text-decoration: none;
 }


 .pl-1 {
 	padding-left: 5px;
 }

 .pl-2 {
 	padding-left: 10px;
 }


 .mt-1 {
 	margin-top: 5px;
 }

 .mt-2 {
 	margin-top: 10px;
 }

 .mt-3 {
 	margin-top: 15px;
 }

 .mt-4 {
 	margin-top: 20px;
 }

 .ml-1 {
 	margin-left: 5px;
 }

 .ml-2 {
 	margin-left: 10px;
 }

 .ml-3 {
 	margin-left: 15px;
 }

 .ml-4 {
 	margin-left: 20px;
 }

 .ml-5 {
 	margin-left: 25px;
 }

 .mr-1 {
 	margin-right: 5px;
 }

 .mr-2 {
 	margin-right: 10px;
 }

 .mr-3 {
 	margin-right: 15px;
 }

 .mr-4 {
 	margin-right: 20px;
 }

 .mr-5 {
 	margin-right: 25px;
 }

 .container-margin-top {
 	margin-top: 95px;
 }

 .h-100 {
 	min-height: 100vh;
 }

 /**TEXT COLOR */
 .text-blue-accent {
 	color: var(--blue-accent);
 }

 .text-red-accent {
 	color: #F87171;
 }

 #area_checkout,
 #area_process_checkout {
 	margin-top: 100px;
 }

 /* --- BOUTONS --- */
 .btn-primary-blue {
 	background-color: var(--blue-accent);
 	color: var(--white);
 	border: none;
 	border-radius: 12px;
 	padding: 0.9rem 1.8rem;
 	font-weight: 600;
 	font-size: 1rem;
 	transition: all 0.2s ease;
 }

 .btn-primary-blue:hover {
 	background-color: var(--blue-accent-hover);
 	color: var(--white);
 	transform: scale(0.98);
 }

 .btn-black-chic {
 	background-color: var(--black);
 	color: var(--white);
 	border: none;
 	border-radius: 12px;
 	padding: 0.9rem 1.8rem;
 	font-weight: 600;
 	font-size: 1rem;
 	transition: all 0.2s ease;
 }

 .btn-black-chic:hover {
 	background-color: #272A30;
 	color: var(--white);
 	transform: scale(0.98);
 }

 .btn-white-chic {
 	background-color: var(--white);
 	color: var(--black);
 	border: none;
 	border-radius: 12px;
 	padding: 0.8rem 1.5rem;
 	font-weight: 600;
 	transition: all 0.2s ease;
 }

 .btn-white-chic:hover {
 	background-color: var(--gray-100);
 }

 .btn-outline-chic {
 	background-color: var(--white);
 	color: var(--black);
 	border: 1px solid var(--black);
 	border-radius: 12px;
 	padding: 0.9rem 1.8rem;
 	font-weight: 600;
 	transition: background-color 0.2s ease;
 }

 .btn-outline-chic:hover {
 	background-color: var(--gray-50);
 	color: var(--black);
 }

 /* --- NAVBAR --- */
 .navbar-minimal {
 	background: rgba(255, 255, 255, 0.98);
 	backdrop-filter: blur(10px);
 	border-bottom: 1px solid var(--gray-100);
 	padding: 1rem 0;
 }

 .logo-box {
 	width: 32px;
 	height: 32px;
 	background: var(--blue-accent);
 	border-radius: 8px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: white;
 	font-weight: 800;
 	font-size: 1.1rem;
 }

 /* --- BANNIÈRE HAUT B&W --- */
 .search-banner {
 	position: relative;
 	padding-top: 140px;
 	padding-bottom: 80px;
 	background-color: var(--white);
 	overflow: hidden;
 	min-height: 80vh;
 	display: flex;
 	align-items: center;
 }

 .search-banner-bg {
 	position: absolute;
 	top: 0;
 	right: 0;
 	width: 60%;
 	height: 100%;
 	background-image: url('https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?auto=format&fit=crop&w=1920&q=80');
 	background-size: cover;
 	background-position: center;
 	filter: grayscale(100%) contrast(1.1);
 	z-index: 0;
 }

 .search-banner-gradient {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background: linear-gradient(90deg, var(--white) 0%, var(--white) 45%, rgba(255, 255, 255, 0.8) 55%, transparent 100%);
 	z-index: 1;
 }

 @media (max-width: 991px) {
 	.search-banner-bg {
 		width: 100%;
 	}

 	.search-banner-gradient {
 		background: linear-gradient(180deg, var(--white) 0%, var(--white) 60%, rgba(255, 255, 255, 0.8) 100%);
 	}

 	.search-banner {
 		min-height: auto;
 		padding-top: 120px;
 	}
 }

 /* --- BLOC : EXPÉRIENCE SIMPLE (COMPARAISON) --- */
 .comparison-wrapper {
 	background-color: var(--bg-beige);
 	padding: 80px 0;
 }

 .comparison-dark-card {
 	background-color: #12151C;
 	border-radius: 24px;
 	padding: 40px;
 	color: var(--white);
 }

 .comparison-column {
 	background-color: rgba(255, 255, 255, 0.03);
 	border: 1px solid rgba(255, 255, 255, 0.08);
 	border-radius: 16px;
 	padding: 24px;
 	height: 100%;
 }

 .comparison-column.highlight {
 	background-color: rgba(59, 130, 246, 0.1);
 	border-color: rgba(59, 130, 246, 0.3);
 }

 .circle-icon {
 	width: 48px;
 	height: 48px;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }

 /* --- NOUVEAU BLOC : SOFT FEATURE CARDS --- */
 .soft-feature-card {
 	background: var(--white);
 	border-radius: 20px;
 	padding: 32px;
 	height: 100%;
 	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
 	border: none;
 	transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .soft-feature-card:hover {
 	transform: translateY(-5px);
 	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
 }

 .soft-icon-wrapper {
 	width: 48px;
 	height: 48px;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 1.25rem;
 	margin-bottom: 24px;
 }

 /* --- MOCKUPS & MINI-VUES (HERO 2) --- */
 .mockup-container {
 	position: relative;
 	width: 100%;
 	max-width: 600px;
 	margin: 0 auto;
 	height: 500px;
 }

 .tablet-mockup {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	width: 85%;
 	background: var(--white);
 	border-radius: 20px;
 	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
 	border: 1px solid var(--gray-100);
 	padding: 24px;
 	z-index: 2;
 }

 .floating-card {
 	position: absolute;
 	background: var(--white);
 	border-radius: 16px;
 	padding: 16px;
 	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
 	border: 1px solid var(--gray-100);
 	z-index: 3;
 	animation: float 6s ease-in-out infinite;
 }

 .card-notif {
 	top: 10%;
 	right: -5%;
 	width: 260px;
 	animation-delay: 0s;
 }

 .card-client {
 	bottom: 15%;
 	left: -10%;
 	width: 240px;
 	animation-delay: 1s;
 }

 @keyframes float {

 	0%,
 	100% {
 		transform: translateY(0);
 	}

 	50% {
 		transform: translateY(-12px);
 	}
 }

 /* --- EMBEDDED FORM CTA --- */
 .cta-dark-container {
 	background-color: #12151C;
 	border-radius: 32px;
 	padding: 40px;
 	color: var(--white);
 	margin-bottom: 80px;
 }

 .cta-form-card {
 	background: var(--white);
 	border-radius: 24px;
 	padding: 32px;
 	color: var(--black);
 }

 .check-circle {
 	width: 20px;
 	height: 20px;
 	background-color: var(--success);
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: white;
 	flex-shrink: 0;
 }

 .form-control-custom {
 	border: 1px solid var(--gray-200);
 	border-radius: 10px;
 	padding: 0.8rem 1rem;
 	background: var(--white);
 }

 .form-control-custom:focus {
 	border-color: var(--blue-accent);
 	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
 	outline: none;
 }

 /* --- PROCESSUS VERTICAL (STRIPE STYLE) --- */
 .process-step {
 	position: relative;
 	padding-left: 50px;
 	padding-bottom: 40px;
 	border-left: 3px solid var(--gray-200);
 	margin-left: 20px;
 }

 .process-step:last-child {
 	border-left-color: transparent;
 	padding-bottom: 0;
 }

 .process-dot {
 	position: absolute;
 	left: -22px;
 	top: 0;
 	width: 40px;
 	height: 40px;
 	color: var(--white);
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-weight: bold;
 	border: 4px solid var(--gray-50);
 }

 /* Modal */
 .modal-content {
 	border-radius: 20px;
 	border: none;
 }

 .circle-1 {
 	background-color: #DDEEFE;
 }


 .circle-2 {
 	background-color: #D1EAE0;
 }


 .circle-3 {
 	background-color: #D9F6FA;
 }


 .dot-1 {
 	background-color: #10B981;
 }

 .dot-2 {
 	background-color: #3B82F6;
 }

 .dot-3 {
 	background-color: #8B5CF6;
 }

 .dot-4 {
 	background-color: #111827;
 }

 .schedule_sample {
 	width: 36px;
 	height: 36px;
 	background: rgba(59, 130, 246, 0.1);
 	color: var(--blue-accent);
 }

 .hour {
 	width: 45px;
 }

 .border-blue {
 	border-color: var(--blue-accent);
 }

 .border-black {
 	border-color: black;
 }

 .container-faq {
 	max-width: 800px;
 }

 .mw-800 {
 	max-width: 800px;
 }

 .mw-650 {
 	max-width: 650px;
 }

 .mw-500 {
 	max-width: 500px;
 }

 .mw-450 {
 	max-width: 450px;
 }

 .mw-300 {
 	max-width: 300px;
 }

 .text-price-info {
 	font-size: 0.75rem;
 	border-bottom-left-radius: 12px;
 	border-top-right-radius: 1rem;
 	background-color: #3B82F6 !important;
 	color: white !important;
 }


 .text-low {
 	font-size: 0.9rem;
 	letter-spacing: 1px;
 }

 .text-ultra-low {
 	font-size: 0.75rem;
 }


 .w-250 {
 	width: 250px;
 }

 .h-250 {
 	height: 250px;
 }

 .h-60 {
 	height: 60px;
 }

 .w-60 {
 	width: 60px;
 }

 .h-page-full-size {
 	height: 100vh !important;
 }

 .p-dot-1 {
 	width: 14px;
 	height: 14px;
 	background: var(--blue-accent);
 	top: 20%;
 	left: 30%;
 }

 .p-dot-2 {
 	width: 14px;
 	height: 14px;
 	background: var(--blue-accent);
 	bottom: 30%;
 	right: 20%;
 }

 .logo {
 	max-width: 35px;
 	max-height: 35px;
 }

 .bg-style-1 {
 	background-color: #EFF6FF;
 }

 .bg-style-2 {
 	background-color: #FFFBEB;
 }

 .bg-style-3 {
 	background-color: #F3E8FF;
 }

 .bg-style-4 {
 	background-color: #F0FDF4;
 }

 .lh-1-6 {
 	line-height: 1.6;
 }

 .ico-circle {
 	width: 40px;
 	height: 40px;
 	background-color: rgba(255, 255, 255, 0.1);
 }


 /**Animations*/
 .blinking {
 	animation: blink_animation 1s infinite;
 }

 @keyframes blink_animation {
 	0% {
 		opacity: 1;
 	}

 	50% {
 		opacity: 0;
 	}

 	100% {
 		opacity: 1;
 	}
 }

 .shake:hover {
 	display: inline-block;
 	/* Assurez-vous que l'élément est en ligne pour éviter les problèmes de mise en page */
 	animation: shake_animation 0.2s ease-in-out forwards;
 }

 @keyframes shake_animation {

 	0%,
 	100% {
 		transform: translateX(0);
 	}

 	25% {
 		transform: translateX(-5px);
 	}

 	75% {
 		transform: translateX(5px);
 	}
 }

 /* CALENDAR */

 #title_rdv {
 	text-align: left;
 }

 #calendar {
 	overflow-x: auto;
 	width: 100%;
 	height: 36px;
 }

 #calendar .date {
 	padding: 10px;
 	margin: 15px;
 	font-size: 20px;
 	min-width: 55px;
 	max-width: 60px;
 }

 #calendar .date.date-close {
 	text-align: center;
 	color: rgb(207, 207, 207);
 	background-color: rgb(244, 238, 238);
 	cursor: not-allowed;
 }

 #calendar .date.date-open {
 	text-align: center;
 	background-color: white;
 	color: black;
 	cursor: pointer;
 }

 #calendar .date.date-open.active {
 	background-color: black !important;
 	color: white !important;
 }

 #calendar .date.date-open:hover {
 	background-color: black !important;
 	color: white !important;
 }

 #calendar .date.date-btn {
 	background-color: black !important;
 	color: white !important;
 }

 .hidden {
 	display: none;
 }


 .text-20 {
 	font-size: 20px;
 }

 .container_rdv_step_3 {
 	height: 50px;
 }

 /* ./CALENDAR */


 /**##################################APPLIQUE A PARTIR DE TAILLE ECRAN INFERIEUR A */

 /* Extra large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {}


 /* Large devices (desktops, 992px and up) */
 @media (max-width: 1199.98px) {}


 /* Large devices landpage (desktops, 1530px and up) */
 @media (max-width: 1199.98px) {}



 /* Medium devices (tablets, 768px and up) */
 @media (max-width: 991.98px) {}


 /* Small devices (landscape phones, 576px and up) */
 @media (max-width: 767.98px) {
 	div:where(.swal2-container).swal2-center>.swal2-popup {
 		grid-column: 1 !important;
 		grid-row: 1 !important;
 	}
 }

 /* Extra small devices (phones, less than 576px) */
 @media (max-width: 575.98px) {
 	#swal2-html-container {
 		margin: 5px !important;
 	}

 	div:where(.swal2-container).swal2-center>.swal2-popup {
 		width: 26em;
 	}

 	#master_container_rdv {
 		width: 100%;
 	}

 	#calendar {
 		width: auto;
 	}
 }

 @media (max-width: 420px) {
 	#calendar tbody tr th {
 		font-size: 12px;
 	}

 	#calendar .date {
 		font-size: 12px;
 		padding: 5px;
 		min-width: 50px;
 		max-width: 50px;
 		height: 40px;
 	}

 	.text-20 {
 		font-size: 12px;
 	}
 }