@font-face {
    font-family: 'Avenir-Heavy-Oblique';
    src: url('font/avenir-heavy-oblique/Avenir-HeavyOblique.eot');
    src: url('font/avenir-heavy-oblique/Avenir-HeavyOblique.eot?#iefix') format('embedded-opentype'),
        url('font/avenir-heavy-oblique/Avenir-HeavyOblique.woff2') format('woff2'),
        url('font/avenir-heavy-oblique/Avenir-HeavyOblique.woff') format('woff'),
        url('font/avenir-heavy-oblique/Avenir-HeavyOblique.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Avenir-Black-Oblique';
    src: url('font/avenir-black-oblique/Avenir-BlackOblique.eot');
    src: url('font/avenir-black-oblique/Avenir-BlackOblique.eot?#iefix') format('embedded-opentype'),
        url('font/avenir-black-oblique/Avenir-BlackOblique.woff2') format('woff2'),
        url('font/avenir-black-oblique/Avenir-BlackOblique.woff') format('woff'),
        url('font/avenir-black-oblique/Avenir-BlackOblique.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Avenir-Heavy';
    src: url('font/avenir-heavy/Avenir-Heavy.eot');
    src: url('font/avenir-heavy/Avenir-Heavy.eot?#iefix') format('embedded-opentype'),
        url('font/avenir-heavy/Avenir-Heavy.woff2') format('woff2'),
        url('font/avenir-heavy/Avenir-Heavy.woff') format('woff'),
        url('font/avenir-heavy/Avenir-Heavy.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Avenir-Medium';
    src: url('font/avenir-medium/Avenir-Medium.eot');
    src: url('font/avenir-medium/Avenir-Medium.eot?#iefix') format('embedded-opentype'),
        url('font/avenir-medium/Avenir-Medium.woff2') format('woff2'),
        url('font/avenir-medium/Avenir-Medium.woff') format('woff'),
        url('font/avenir-medium/Avenir-Medium.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Avenir-Black';
    src: url('font/avenir-black/Avenir-Black.eot');
    src: url('font/avenir-black/Avenir-Black.eot?#iefix') format('embedded-opentype'),
        url('font/avenir-black/Avenir-Black.woff2') format('woff2'),
        url('font/avenir-black/Avenir-Black.woff') format('woff'),
        url('font/avenir-black/Avenir-Black.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Avenir-Light';
    src: url('font/avenir-light/Avenir-Light.eot');
    src: url('font/avenir-light/Avenir-Light.eot?#iefix') format('embedded-opentype'),
        url('font/avenir-light/Avenir-Light.woff2') format('woff2'),
        url('font/avenir-light/Avenir-Light.woff') format('woff'),
        url('font/avenir-light/Avenir-Light.ttf') format('truetype');
    font-display: swap;
}

:root {
	--color-title-primary-blue: #255491;
	--bg-light-blue: #cde3ff;
	--swiper-pagination-color: #fff;
}

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

body {
	font-family: 'Avenir-Medium';
	font-size: 16px;
	color: #00417e;
}

h1, h2, h3, h4 {
	font-weight: normal;
	line-height: 1;
}
h1 { font-family: 'Avenir-Black-Oblique'; }
h2 {
	font-family: 'Avenir-Heavy';
	font-size: 48px;
	text-align: center;
}
	@media (min-width: 1600px)
	{
		header > h2 {
			display: flex;
			align-items: center;
			font-size: 40px;
			text-shadow: none !important;
		}

		header > h2::before,
		header > h2::after {
			content: "";
			flex: 1;
			height: 4px;
			background-color: #fff;
			border-radius: 50px;
		}

		header > h2::before { margin-right: 20px; }

		header > h2::after { margin-left: 20px; }
	}

h3 {
	font-family: 'Avenir-Black';
	font-size: 24px;
	text-align: center;
	color: #255491;
}

p { line-height: 1; }

img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: auto;
}

figure {
	display: block;
	text-align: center;
}

.alert {
	position: relative;
	padding: 1rem 1rem;
	margin-bottom: 1rem;
	border: 1px solid;
	border-radius: .25rem;
}

.alert-success {
	color: #0f5132;
	border-color: #badbcc;
	background-color: #d1e7dd;
}

.alert-danger {
	color: #842029;
	border-color: #f5c2c7;
	background-color: #f8d7da;
}

#formContainer #ajax_result_success,
#formContainer #ajax_result_error {
    margin-top: 25px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
}

#formContainer #submit:disabled {
    background: #eee !important;
    color: #666 !important;
    cursor: not-allowed;
}

.f-aho {
	font-family: 'Avenir-Heavy-Oblique';
	font-weight: 900;
}
.f-abo {
	font-family: 'Avenir-Black-Oblique';
	font-weight: 900;
}
.f-am { font-family: 'Avenir-Medium'; }
.f-ah { font-family:'Avenir-Heavy'; }
.f-ab { font-family: 'Avenir-Black'; }
.f-al { font-family: 'Avenir-Light' }

.tac { text-align: center !important; }

.text-white { color: #fff !important; }

.color-title-primary-blue { color: var(--color-title-primary-blue); }

.bg-light-blue { background-color: var(--bg-light-blue); }

.btn-container a {
	display: block;
	font-family: 'Avenir-Black';
	font-size: 20px;
	text-decoration: none;
	line-height: 1;
	padding: 13px 20px;
	border-radius: 30px;
}

.btn-rdv a {
	color: #fff;
	background-color: #0e59a0;
	border: 2px solid #fff;
}

header > p { padding: 0 15px; }

.main-intro-text { margin-top: 24px; }
	@media (min-width: 1200px)
	{
		.main-intro-text {
			margin-top: 0;
			padding-top: 20px;
		}
	}
		@media (min-width: 1600px)
		{
			.main-intro-text {
				padding-top: 47px;
				max-width: 1920px;
				margin: 0 auto 35px;
			}
		}

	.main-intro-text > p { margin-bottom: 18px; }
		@media (min-width: 1200px)
		{
			.main-intro-text > p { margin-bottom: 28px; }
		}
			@media (min-width: 1600px)
			{
				.main-intro-text > p {
					margin-bottom: 0;
					font-family: 'Avenir-Heavy';
					font-size: 30px;
					padding: 0 78px;
				}
			}

.contents {
	margin: 30px 0 0;
	padding: 0 15px;
}

	.text {
		font-family: 'Avenir-Medium';
		font-size: 22px;
		text-align: justify;
		hyphens: auto;
	}
		@media (min-width: 1920px)
		{
			.text { font-size: 30px; }
		}

	.contents .text p:not(:last-child) { margin-bottom: 20px; }

.contents .pics { margin-top: 30px; }

.d-none { display: none; }

.text-center { text-align: center; }

@media (min-width: 768px)
{
	.d-md-none { display: none; }

	.d-md-block { display: block; }

	.d-md-flex { display: flex; }

	.justify-content-md-between { justify-content: space-between; }

	.align-items-md-center { align-items: center; }
}

	@media (min-width: 1200px)
	{
		.text-xl-white { color: #fff !important }

		.d-xl-none { display: none !important; }

		.d-xl-block { display: block; }

		.d-xl-inline { display: inline; }

		.d-xl-flex { display: flex; }

		.justify-content-xl-between { justify-content: space-between; }

		.align-items-xl-center { align-items: center; }

		.container {
			position: relative;
			width: 1200px;
			margin: auto;
		}
	}
		@media (min-width: 1400px)
		{
			.text-xxl-right { text-align: right !important; }
		}
			@media (min-width: 1600px)
			{
				.container { width: 1440px; }

				.container-fluid {
					max-width: 1920px;
					margin: auto;
					padding: 0 63px;
				}

				.d-xxl2-none { display: none; }

				.d-xxl2-block { display: block; }
			}

				@media (min-width: 1920px)
				{
					.container {
						width: 100%;
						max-width: 1920px;
					}
				}


/*
 * FullScreen Menu
 */
#logo { cursor: pointer; position: relative; z-index: 1001; }

.menu-fs {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 20, 30, .96);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility 0s linear .4s;
}
	@media (min-width: 1200px)
	{
		.menu-fs { background: rgba(10, 20, 30, .86); }
	}

.menu-fs.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease;
}

.menu-fs__liste {
	list-style: none;
	margin: 0;
	padding: 0 16px;
	text-align: center;
}
.menu-fs__liste li {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .4s ease, transform .4s ease;
}
.menu-fs.is-open .menu-fs__liste li { opacity: 1; transform: none; }
/* apparition en cascade */
.menu-fs.is-open li:nth-child(1) { transition-delay: .10s; }
.menu-fs.is-open li:nth-child(2) { transition-delay: .15s; }
.menu-fs.is-open li:nth-child(3) { transition-delay: .20s; }
.menu-fs.is-open li:nth-child(4) { transition-delay: .25s; }
.menu-fs.is-open li:nth-child(5) { transition-delay: .30s; }
.menu-fs.is-open li:nth-child(6) { transition-delay: .35s; }

.menu-fs__liste a {
	display: inline-block;
	padding: .4em 0;
	color: #fff;
	font-size: clamp(1.3rem, 3.5vw, 2.4rem);
	text-decoration: none;
	transition: color .2s;
}
.menu-fs__liste a:hover { color: #8fc7e8; }

.menu-fs__cta {
	margin-top: .8em;
	padding: .5em 1.4em !important;
	border: 1px solid currentColor;
	border-radius: 999px;
}

.menu-fs__close {
	position: absolute;
	top: 20px;
	right: 24px;
	background: none;
	border: 0;
	color: #fff;
	font-size: 3rem;
	line-height: 1;
	cursor: pointer;
}

body.menu-ouvert { overflow: hidden; }

.menu-fs__liste a[aria-current="page"] { color: #8fc7e8; }
/* /fullScreenMenu */


/*
 * HERO
 */
@media (min-width: 1200px)
{
	#Hero {
		width: 100%;
		height: 650px;
	}

		#Hero .container { height: 100%; }

	#pageCorneenne #Hero, #pageaboutMe #Hero, #pagecontactForm #Hero {
		background: url("../img/bg-1.jpg") no-repeat 0 bottom / cover;
	}

	#pageCataracte #Hero {
		background: url("../img/pages/bg-cata-desk.webp") no-repeat 0 0 / cover;
	}

	#pagetechnicalPlatform #Hero {
		background: url("../img/pages/bg-plateau-technique-desk.webp") no-repeat 0 0 / cover;
	}
}
	@media (min-width: 1920px)
	{
		#Hero {
			height: 1037px;
			overflow: hidden;
		}	
	}

#topBarHero {
	display: flex;
	align-items: center;
	height: 72px;
	justify-content: space-between;
	padding: 0 7px;
	margin-bottom: 15px;
	background-color: #00417E;
}
	/* Barre fixe au scroll (< 1200px) */
	@media (max-width: 1199px)
	{
		#topBarHero.is-fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			margin-bottom: 0;
			z-index: 1000;
			transform: translateY(-100%);
		}

		/* la transition n'existe que pendant l'animation, pas lors du placement initial */
		#topBarHero.is-animated {
			transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
		}

		#topBarHero.is-fixed.is-visible {
			transform: translateY(0);
			box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
		}

		/* compense la sortie du flux : 72px de hauteur + 15px de marge */
		#Hero.has-fixed-bar { padding-top: 87px; }
	}

	@media (prefers-reduced-motion: reduce)
	{
		#topBarHero.is-animated { transition: none; }
	}

	#logo {	width: 64px; }

	#topBarHero p {
		width: 200px;
		font-family: 'Avenir-Heavy';
		font-size: 20px;
		color: #fff;
		text-align: center;
	}

	.ctaContacts {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		@media (min-width: 1200px)
		{
			.ctaContacts {
				position: absolute;
				top: 20px;
				right: 15px;
			}
		}

		.ctaContacts a img { width: 38px; }
			@media (min-width: 1200px)
			{
				.ctaContacts a { margin-right: 10px; }
				
					.ctaContacts a img { width: 44px; }
			}

.card-hero {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-between;
	height: 568px;
	padding: 21px 0 47px;
}

#cardCorneenne { background: url("../img/card-crc.webp") no-repeat center 0 / cover; }

#cardCataracte { background: url("../img/pages/hero-cataracte.webp") no-repeat center 0 / cover; }

#cardaboutMe { background: url("../img/card-wai-xl.webp") no-repeat center 0 / cover; }

#cardtechnicalPlatform { background: url("../img/pages/hero-technical-platform-sm.webp") no-repeat center 0 / cover; }

	.card-hero h1 {
		width: 100%;
		font-size: 36px;
		color: #fff;
		text-align: center;
		text-shadow: 0 0 10px #000;
	}

@media (min-width: 1200px)
{
	#logoDesk {
		position: absolute;
		width: 174px;
		top: 200px;
		left: 0;
		transform: rotate(-15.2deg);
		z-index: 999;
	}

	#Hero .container h2 {
		position: absolute;
		width: fit-content;
		top: 166px;
		left: 181px;
		transform: rotate(-15.2deg);
		font-size: 55px;
	}

	#Hero .container h1 {
		position: absolute;
		width: fit-content;
		top: 290px;
		left: 198px;
		transform-origin: left top;
		transform: rotate(-15.2deg);
		color: #33527C;
		-webkit-text-stroke: 3px #fff;
		paint-order: stroke fill;
		font-size: 28px;
	}

	#headerContentXL {
		position: relative;
		width: 1000px;
		height: 100%;
		margin: auto;
	}

		#cardDesk {
			position: absolute;
			width: 100%;
			bottom: 0;
			left: calc(50% - 500px);
		}
}
	@media (min-width: 1920px)
	{
		#logoDesk {
			top: 367px;
			left: 195px;
		}

		#Hero .container h2 {
			top: 276px;
			left: 368px;
			font-size: 96px;
		}

		#Hero .container h1 {
			top: 490px;
			left: 400px;
			font-size: 48px;
		}

		#headerContentXL { width: 1748px; }

			#cardDesk {
				left: initial;
				right: -191px;
			}
	}
/* /HERO */

/*
 * HEADER-SEPARATOR
 */
@media (min-width: 1200px)
{
	.header-separator {
		width: 100%;
		height: 24px;
		background-color: #fff;
	}
}
/* /HEADER-SEPARATOR */

/*
 * visualDisturbances
 */
@media (min-width: 1200px)
{
	#visualDisturbances { background-color: #cde3ff; }
}

#vdSlider, #surgicalTecSlider {	position: relative; }
	@media (max-width: 1599px)
	{
		#vdSlider, #surgicalTecSlider {
			background-color: #6192c0;
			border-radius: 0 0 30px 30px;
		}
	}

#vdSlider {
	margin-bottom: -27px;
	box-shadow: 0 0 45px rgba(0, 0, 0, 0.7);
}
	@media (min-width: 1200px)
	{
		#vdSlider {
			padding-top: 37px;
			border-radius: 30px;
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
		}
	}
		@media (min-width: 1600px)
		{
			#vdSlider {
				max-width: 1920px;
				margin: 0 auto -230px;
				padding: 0 63px;
				border-radius: initial;
				box-shadow: none;
			}
		}

@media (min-width: 1600px)
{
	#surgicalTecSlider {
		position: absolute;
		width: 100%;
		max-width: 1920px;
		padding: 0 63px;
		top: -370px;
		left: 50%;
		transform: translate(-50%);
	}
}

#vdSlider::before, #surgicalTecSlider::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 37px;
	top: -37px;
	border-radius: 30px 30px 0 0;
	background-color: #6192c0;
}
	@media (min-width: 1200px)
	{
		#vdSlider::before { content: none; }
	}
		@media (min-width: 1600px)
		{
			#surgicalTecSlider::before { content: none; }
		}

	#vdSlider > header { margin-bottom: 3px; }

	@media (max-width: 1599px)
	{
		#surgicalTecSlider > header { margin-bottom: 27px; }
	}

		#vdSlider > header h2,
		#surgicalTecSlider > header h2 {
			text-align: center;
			margin: auto;
			text-shadow: 0 0 4px rgb(0, 0, 0);
		}
			@media (max-width: 767px)
			{
				#vdSlider > header h2 { width: 195px; }
			}

			@media (min-width: 1600px)
			{
				#vdSlider > header h2 { color: #294f93 !important; }

				#vdSlider > header h2::before,
				#vdSlider > header h2::after { background-color: #255491; }

				#surgicalTecSlider > header h2 { text-shadow: 0 0 8px #000 !important; }

				#surgicalTecSlider > header h2::before,
				#surgicalTecSlider > header h2::after { box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
			}

	@media (min-width: 1600px)
	{
		#vdSlider .swiper-wrapper,
		#stSwiper .swiper-wrapper { justify-content: space-between; }

		#vdSlider .swiper-wrapper .swiper-slide,
		#stSwiper .swiper-wrapper .swiper-slide { width: 360px; }
	}

	@media (max-width: 1599px)
	{
		#vdSwiper .card,
		#stSwiper .card {
			max-width: 360px;
			margin: auto;
			padding-bottom: 40px;
		}
	}
	
		#vdSwiper .card header {
			position: relative;
			top: 35px;
			z-index: 1;
		}

		#stSwiper .card header { margin-bottom: 50px; }
			@media (min-width: 1600px)
			{
				#stSwiper .card header {
					position: relative;
					margin-bottom: 0;
					top: 35px;
					z-index: 1;
				}
			}
	
			#vdSwiper .card header h4,
			#stSwiper .card header h4 {				
				color: #255491;
				font-size: 36px;
				text-transform: uppercase;
				text-align: center;
				padding: 22px 0;
				border-radius: 20px;
				background-color: #fff;
			}
				@media (max-width: 1599px)
				{
					#vdSwiper .card header h4,
					#stSwiper .card header h4 {
						width: 350px;
						margin: auto;
					}
				}

		#vdSwiper .card .card-content,
		#stSwiper .card .card-content { position: relative; }
			@media (min-width: 1600px)
			{
				#vdSwiper .card .card-content,
				#stSwiper .card .card-content {
					height: 620px;
					background-color: #698fc2;
					border-radius: 30px;
				}

				#stSwiper .card .card-content { padding-top: 82px; }
			}

			#vdSwiper .card .card-content figure,
			#stSwiper .card .card-content figure { margin-bottom: 25px; }

			#vdSwiper .card .card-content p,
			#stSwiper .card .card-content p { padding: 0 15px; }
				@media (min-width: 1600px)
				{
					#vdSwiper .card .card-content p,
					#stSwiper .card .card-content p {
						font-size: 30px;
						padding: 0 18px;
					}
				}
/* /visualDisturbances */

/*
 * picTransition
 */
#picTransition {
	width: 100%;
	height: 611px;
	background: url("../img/pages/pic-transition.webp") no-repeat center 0 / cover;
}
	@media (min-width: 1600px)
	{
		#picTransition { height: 1720px; }
	}

/*
 * Implants
 */
#Implants {
	background-color: #cfe0f5;
	padding-bottom: 43px;
	border-radius: 0 0 20px 20px;
}
	@media (min-width: 1600px)
	{
		#Implants {
			position: relative;
			padding-top: 387px;
			padding-bottom: 60px;
			border-radius: 0;
		}
	}

	#Implants > header h2 {
		color: #fff;
		text-shadow: 0 0 8px #000 !important;
		margin-top: 37px;
		margin-bottom: 15px;
	}

	@media (max-width: 575px)
	{
		#Implants header h3 {
			width: 300px;
			margin: auto;
		}
	}

	@media (min-width: 1600px)
	{
		#Implants > .contents,
		#Implants > header {
			max-width: 1920px;
			margin-right: auto;
			margin-left: auto;
			padding: 0 63px;
		}
	}

	@media (min-width: 768px)
	{
		#Implants > .contents > div { width: fit-content; }
		#Implants > .contents .text { padding-right: 15px; }
		#Implants > .contents .pics { margin-top: 0; }
	}
		@media (min-width: 1920px)
		{
			#Implants > .contents .text {
				width: 1384px;
				padding-right: 0;
			}
		}
/* /Implants */


/*
 * Equipments
 */
#Equipments { padding: 36px 0 39px 0; }
	@media (min-width: 1200px)
	{
		#Equipments {
			padding-top: 99px;
			padding-bottom: 117px;
		}
	}
	@media (min-width: 1600px)
	{
		#Equipments {
			max-width: 1920px;
			margin: auto;
			padding-left: 63px;
			padding-right: 63px;
		}
	}

	#Equipments header h2 { color: #255491; }
		@media (min-width: 1600px)
		{
			#Equipments header h2::before,
			#Equipments header h2::after { background-color: #255491; }
		}

	@media (min-width: 1200px)
	{
		#Equipments .contents .pics { margin-top: 72px; }
	}
	
	@media (max-width: 767px)
	{
		#Equipments .contents .pics figure:first-child { margin-bottom: 18px; }
	}

	@media (min-width: 768px)
	{
		#Equipments .contents .pics figure { width: 49%; }
	}
/* /Equipments */


/*
 * Postoperative
 */
#Postoperative {
	background-color: #6192c0;
	padding-bottom: 20px;
}
	@media (min-width: 768px)
	{
		#Postoperative {
			padding-top: 30px;
			padding-left: 15px;
		}
	}
		@media (min-width: 992px)
		{
			#Postoperative {
				padding-top: 99px;
				padding-bottom: 95px;
			}
		}
			@media (min-width: 1600px)
			{
				#Postoperative {
					padding-left: 0;
				}
			}

	@media (min-width: 1920px)
	{
		#Postoperative .pics img { margin: 0; }
	}

	@media (min-width: 768px)
	{
		#Postoperative .container-fluid > div { width: 49%; }

		#Postoperative .contents { margin-top: 0; }
	}
		@media (min-width: 1600px)
		{
			#Postoperative .container-fluid > div { width: 50%; }

			#Postoperative .contents { padding: 0 0 0 97px; }
		}

	#Postoperative .contents header { margin-bottom: 34px; }
		@media (min-width: 1920px)
		{
			#Postoperative .contents header { margin-bottom: 65px; }
		}
/* /Postoperative */


/*
 * Comics
 */
#Comics { padding-bottom: 40px; }
	@media (min-width: 1200px)
	{
		#Comics {
			position: relative;
			padding-top: 40px;
		}
	}
		@media (min-width: 1920px)
		{
			#Comics {
				padding-top: 108px;
				padding-bottom: 70px;
			}
		}

	@media (min-width: 1200px)
	{
		#Comics .contents {	margin-top: 0; }
	}
		@media (min-width: 1300px)
		{
			#Comics .contents { padding: 0;	}
		}
			@media (min-width: 1920px)
			{
				#Comics .contents {	padding: 0 63px;	}
			}
	
	#Comics .contents p:first-child {
		font-family: 'Avenir-Heavy';
		font-size: 44px;
		color: #00417e;
		line-height: 1;
		word-spacing: -3px;
		margin-bottom: 28px;
	}
		@media (max-width: 390px)
		{
			#Cataracte #Comics .contents p:first-child { font-size: 40px; }
		}

	@media (min-width: 1600px)
	{
		#Comics .contents .text { width: 960px; }
	}
		@media (min-width: 1920px)
		{
			#Comics .contents .text { width: 1160px; }
		}

	@media (max-width: 1199px)
	{
		#Comics .contents figure { margin-bottom: 20px; }

			#Comics .contents figure img {
				filter: drop-shadow(-20px -20px 4px rgba(0,0,0,0.3));
			}
	}

	@media (min-width: 1200px)
	{
		.illu-comics {
			width: 500px;
			margin: 20px 0 0 90px;
		}

		#pageCataracte .illu-comics { margin: 100px 0 150px; }

		#Comics .bd-comics {
			position: absolute;
			width: 490px;
			top: 134px;
			right: 50px;
			margin: 0;
		}
	}
		@media (min-width: 1600px)
		{
			.illu-comics { margin-top: 80px; }

			#pageCataracte .illu-comics {
				width: 600px;
				margin-bottom: 100px;
			}

			#bulleDesk {
				position: absolute;
				width: 300px;
				top: 160px;
				left: 540px;
			}

			#Comics .bd-comics {
				width: 555px;
				top: 133px;
				right: 19px;
			}
		}
			@media (min-width: 1920px)
			{
				.illu-comics {
					width: fit-content;
					margin: 139px 0 0;
				}

				#pageCataracte .illu-comics {
					width: fit-content;
					margin-top: 228px;
					margin-bottom: 0;
				}

				#bulleDesk {
					width: fit-content;
					top: 203px;
					left: 698px;
				}

				#pageCataracte #bulleDesk { left: 758px; }

				#Comics .bd-comics {
					width: 726px;
					top: 67px;
				}
			}
/* /Comics */


/*
 * Preoperative
 */
#Preoperative {
	background-color: #00417e;
	padding: 67px 0;
}

	#Preoperative p:first-child {
		font-family: 'Avenir-Black';
		font-size: 30px;
		text-transform: uppercase;
		text-align: center;
		line-height: 1;
		margin-bottom: 23px;
	}
		@media (min-width: 1200px)
		{
			#Preoperative p:first-child { font-size: 48px; }
		}

	#Preoperative p:last-child { text-align: center; }
	
		#Preoperative .btn-rdv a { display: inline-block; }
/* /Preoperative */


/*
 * cataractExplanations
 */
@media (min-width: 1200px)
{
	#pageCataracte .container {
		padding: 0 63px;
		z-index: 2;
	}

	#cataractExplanations {
		height: 533px;
		padding-top: 72px;
		background-color: #cde3ff;
	}

		#cataractExplanations .main-intro-text { padding-top: 0; }

			#cataractExplanations .main-intro-text > p {
				margin-bottom: 0;
				padding: 0;
			}
}

	#cataractExplanationContent { padding: 38px 0; }
		@media (min-width: 1200px)
		{
			#cataractExplanationContent { margin-top: 40px; }
		}
			@media (min-width: 1920px)
			{
				#cataractExplanationContent { margin-top: 69px; }
			}

	@media (min-width: 1200px)
	{
		#cataractExplanationContentContainer {
			padding: 56px 71px;
			background-color: #fff;
			border-radius: 30px;
		}

			#cataractExplanationContentImg,
			#cataractEplanationContentText { width: 50%; }
	}
		@media (min-width: 1920px)
		{
			#cataractExplanationContentContainer {
				padding-top: 86px;
				padding-bottom: 86px;
			}

				#cataractExplanationContentImg { width: fit-content; }

				#cataractEplanationContentText {
					width: 1031px;
					align-self: start;
				}

					#cataractEplanationContentText header h2::before,
					#cataractEplanationContentText header h2::after { background-color: #255491; }

					#cataractEplanationContentText .contents { padding: 0; }

						#cataractEplanationContentText .contents .text { font-size: 36px; }
		}
/* /cataractExplanations


/*
 * bgCataSurgeon
 */
@media (min-width: 1200px)
{
	#bgCataSurgeon {
		position: relative;
		height: 1654px;
		background: url("../img/pages/bg-cata-surgeon.webp") no-repeat center top / cover;
	}
}

	@media (max-width: 1199px)
	{
		#bgCataSurgeon span {
			display: block;
			width: 100%;
			height: 375px;
			background: url("../img/pages/bg-cata-surgeon.webp") no-repeat center top / cover;
		}
	}

#cataractSurgery { padding: 30px 0 39px; }
	@media (min-width: 1200px)
	{
		#cataractSurgery {
			position: absolute;
			width: 1074px;
			top: 1020px;
			left: 50%;
			transform: translate(-50%);
			padding: 68px 73px 70px;
			border-radius: 30px;
			background-color: #cde3ff;
			z-index: 2;
		}

			#cataractSurgery .contents { padding: 0; }

				#cataractSurgery .contents .text,
				#cataractSurgery .contents figure { width: 49%; }
	}
		@media (min-width: 1600px)
		{
			#cataractSurgery { width: 1314px; }
		}
			@media (min-width: 1920px)
			{
				#cataractSurgery { width: 1794px; }

					#cataractSurgery .contents { margin-top: 72px; }

						#cataractSurgery .contents .text {
							width: 948px;
							font-size: 36px;
						}

							#cataractSurgery .contents .text p:not(:last-child) { margin: 0 0 50px 0; }

						#cataractSurgery .contents figure { width: fit-content; }
			}

	.surgery-steps { margin-top: 20px; }
/* /bgCataSurgeon */


/*
 * bgCataSurgery
 */
#bgCataSurgery { padding-bottom: 34px; }
	@media (min-width: 1200px)
	{
		#bgCataSurgery {
			position: relative;
			height: 2420px;
			padding-bottom: 0;
			background: url("../img/pages/bg-cata-surgery.webp") no-repeat center top / cover;
		}

			#cataractImplantContainer {
				position: absolute;
				width: 1074px;
				bottom: 135px;
				left: 50%;
				transform: translate(-50%);
			}

				#cataractImplantContainer > .contents { margin-top: 100px; }
	}
		@media (min-width: 1600px)
		{
			#cataractImplantContainer { width: 1314px; }
		}
			@media (min-width: 1920px)
			{
				#cataractImplantContainer { width: 1794px; }
			}

	@media (max-width: 1199px)
	{
		#bgCataSurgery span {
			display: block;
			width: 100%;
			height: 375px;
			background: url("../img/pages/bg-cata-surgery.webp") no-repeat center top / cover;
		}
	}

#cataractImplant { padding: 28px 0 38px; }
	@media (min-width: 1200px)
	{
		#cataractImplant {
			padding: 68px 73px 70px;
			border-radius: 30px;
		}

			#cataractImplant .contents { padding: 0; }

				#cataractImplant .contents .text,
				#cataractImplant .contents figure { width: 49%; }
	}
		@media (min-width: 1920px)
		{
			#cataractImplant .contents .text {
				width: 1116px;
				font-size: 36px;
			}

			#cataractImplant .contents figure { width: fit-content; }
		}

	#cataractImplant .contents .text figure img { filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)); }
/* /bgCataSurgery */


/*
 * aboutMeIntro
 */
@media (min-width: 1200px)
{
	#aboutMeIntro {
		padding: 90px 0 82px;
		background-color: #0048a1;
	}

	#aboutMeIntro .main-intro-text {
		width: 50%;
		padding-top: 0;
		margin: 0;
	}

	#aboutMeIntro .main-intro-text p:last-child { margin-bottom: 0; }

	#aboutMeIntro figure { width: 50%; }
}
	@media (min-width: 1600px)
	{
		#aboutMeIntro .main-intro-text p {
			padding: 0;
			margin-bottom: 21px;
		}

	}

		@media (min-width: 1600px) and (max-width: 1919px)
		{
			#aboutMeIntro figure img { margin: 0 0 0 auto; }
		}
			@media (min-width: 1920px)
			{
				#aboutMeIntro .main-intro-text { width: 1067px; }

				#aboutMeIntro figure { width: 669px; }
			}
/* /aboutMeIntro */


/*
 * CV
 */
#CV { padding-bottom: 20px; }
	@media (min-width: 1200px)
	{
		#CV { padding-bottom: 95px; }
	}

	.block-cv header h4 {
		font-size: 22px;
		text-align: center;
		padding: 23px 0;
	}
		@media (max-width: 1199px)
		{
			.block-cv header h4 {
				color: #fff;
				background-color: #004f9f;
			}
		}

		@media (min-width: 1200px)
		{
			.block-cv header h4 {
				display: flex;
				align-items: center;
				color: #0049a1;
				padding-left: 15px;
				padding-right: 15px;
			}

			.block-cv header h4::before,
			.block-cv header h4::after {
				content: "";
				flex: 1;
				height: 3px;
				background-color: #cde3ff;
				border-radius: 50px;
			}

			.block-cv header h4::before { margin-right: 20px; }

			.block-cv header h4::after { margin-left: 20px; }
		}
			@media (min-width: 1600px)
			{
				.block-cv header h4 { font-size: 40px; }
			}

	.block-cv ul { padding: 10px 15px; }

		.block-cv ul li {
			list-style: none;
			color: #0648a1;
			font-size: 18px;
		}
		.block-cv ul li:not(:last-child) { margin-bottom: 10px; }
			@media (min-width: 1600px)
			{
				.block-cv ul li { font-size: 30px; }
			}
				@media (min-width: 1920px)
				{
					.block-cv ul li { font-size: 36px; }
				}

	@media (max-width: 1199px)
	{
		.block-cv .contents figure { margin-bottom: 20px; }
	}

	@media (min-width: 1200px)
	{
		.block-cv .contents { margin-top: 0; }

			.block-cv .contents .text,
			.block-cv .contents figure { width: 50%; }

				.block-cv .contents .text p { line-height: 2.3; }
	}
		@media (min-width: 1600px)
		{
			.block-cv .contents .text p { font-size: 30px; }
		}
			@media (min-width: 1920px)
			{
				.block-cv .contents .text p { font-size: 36px; }
			}
/* /CV */


/*
 * technicalPlatformIntro
 */
@media (min-width: 1200px)
{
	#technicalPlatformIntro {
		height: 321px;
		padding-top: 78px;
		background-color: #163d7d;
	}

		#technicalPlatformIntro .container,
		#technicalPlatformContents .container { padding: 0 63px; }

			#technicalPlatformIntro .main-intro-text { padding: 0; }

				#technicalPlatformIntro .main-intro-text .contents {
					margin-top: 0;
					padding: 0;
				}

					#technicalPlatformIntro .main-intro-text .contents .text { font-size:30px; }
}
	@media (min-width: 1600px)
	{
		#technicalPlatformIntro .main-intro-text .contents .text { font-size:32px; }
	}
/* /technicalPlatformIntro */


/*
 * technicalPlatformContents
 */
#technicalPlatformContents { padding: 20px 0; }
	@media (min-width: 1200px)
	{
		#technicalPlatformContents { padding: 0 0 105px; }

			#technicalPlatformContents .container > figure { margin-top: -86px; }
	}

	.technical-platform-block:last-child { margin-top: 20px; }
		
		.technical-platform-block:last-child .pics {
			display: flex;
		}

			.technical-platform-block:last-child .pics figure img {
				width: calc(100% - 10px);
				margin: inherit;
			}
			.technical-platform-block:last-child .pics figure:last-child img { margin-left: auto; }

			@media (min-width: 1200px)
			{
				.technical-platform-block .contents {
					margin: 56px 0 61px;
					padding: 0;
				}
				.technical-platform-block:last-child .contents:last-child { margin-bottom: 0; }

				.technical-platform-block .pics figure img { border-radius: 66px; }
			}
/* /technicalPlatformContents */


/*
 * pagecontactForm
 */
input { -webkit-tap-highlight-color: transparent; }

@media (min-width: 1200px)
{
	#pagecontactForm #Hero { height: 300px; }

		#pagecontactForm #logoDesk {
			top: 129px;
			left: 149px;
		}

		#pagecontactForm #Hero .container h2 {
			top: 90px;
			left: 318px;
		}

		#pagecontactForm #Hero .container h1 {
			top: 210px;
			left: 336px;
		}
}
	@media (min-width: 1400px)
	{
		#pagecontactForm #Hero { height: 512px; }

			#pagecontactForm #logoDesk { top: 270px; }

			#pagecontactForm #Hero .container h2 {
				font-size: 70px;
				top: 193px;
			}

			#pagecontactForm #Hero .container h1 {
				font-size: 35px;
				top: 339px;
				left: 340px;
			}
	}
		@media (min-width: 1920px)
		{
			#pagecontactForm #logoDesk {
				top: 288px;
				left: 350px;
			}

			#pagecontactForm #Hero .container h2 {
				font-size: 96px;
				top: 166px;
				left: 516px;
			}

			#pagecontactForm #Hero .container h1 {
				font-size: 48px;
				top: 364px;
				left: 541px;
			}
		}

#formContainer {
	background-color: #cfe0f5;
	font-size: 19px;
}

	#formLegend {
		padding: 15px;
		background-color: #e1eeff;
	}
		@media (min-width: 1200px)
		{
			#formLegend { padding: 70px 0; }
		}

		#formLegend p:first-child {
			font-size: 40px;
			line-height: 40px;
			text-align: center;
			margin-bottom: 18px;
		}
			@media (min-width: 1400px)
			{
				#formLegend p:first-child { font-size: 56px; }
			}

			#formLegend p:last-child {
				font-size: 20px;
			}
				@media (min-width: 1400px)
				{
					#formLegend p:last-child { font-size: 24px; }
				}

	#contactForm {
		padding: 15px;
		background-color: #cde3ff;
	}
		@media (min-width: 1200px)
		{
			#contactForm { padding: 30px; }
		}

		#contactForm fieldset {
			width: 100%;
			border: none;
		}
			@media (min-width: 992px)
			{
				#contactForm fieldset { display: flex; }
			}
				@media (min-width: 1400px)
				{
					#contactForm fieldset {
						width: 1164px;
						margin: auto;
					}
				}

			#formTroublesContainer { padding-bottom: 38px; }
				@media (min-width: 992px)
				{
					#formTroublesContainer { width: 50%; }
				}
					@media (min-width: 1400px)
					{
						#formTroublesContainer { width: 38%; }
					}

				.formSection .special {
					display: block;
					font-size: 40px;
				}

				#labelsContainer {
					margin-top: 14px;
					padding-bottom: 38px;
				}

					#labelsContainer label, #formTrouble2 label {
						display: inline-block;
						width: 100%;
						margin-top: 24px;
						padding-left: 15px;
						font-size: 25px;
						cursor: pointer;
					}
						@media (min-width: 525px) and (max-width: 991px)
						{
							#labelsContainer label { width: 49%; }
						}
						@media (min-width: 525px)
						{
							#labelsContainer label { font-size: 24px; }
						}

						#formTrouble input, #formTrouble2 input {
							transform: scale(2);
							margin-right: 15px;
							cursor: pointer;
						}

		@media (min-width: 992px)
		{
			#contactInfos { width: 50%; }
		}
			@media (min-width: 1400px)
			{
				#contactInfos { width: 62%; }

				#formTitle {
					width: 70%;
					margin-left: auto;
					margin-bottom: 45px;
				}

				.fields-container {
					display: flex;
					align-items: center;
					margin-bottom: 16px;
				}
			}

			#contactInfos label,
			#contactInfos .fakelabel {
				display: block;
				font-size: 25px;
				margin-top: 17px;
				padding-bottom: 5px;
			}
				@media (min-width: 1400px)
				{
					#contactInfos label,
					#contactInfos .fakelabel {
						width: 30%;
						text-align: right;
						margin-top: 0;
						padding-bottom: 0;
						padding-right: 10px;
					}
				}

			#contactInfos input[type="text"],
			#contactInfos input[type="email"] {
				width: 100%;
				border: 1px solid #003c80;
				padding: 8px 15px;
				font-size: 24px;
			}
				@media (min-width: 1400px)
				{
					#contactInfos input[type="text"],
					#contactInfos input[type="email"] {
						width: 70%;
						padding-top: 12px;
						padding-bottom: 12px;
					}
				}

			#contactInfos #birthday {
				display: flex;
				justify-content: space-between;
			}
				@media (min-width: 1400px)
				{
					#contactInfos #birthday { width: 70%; }
				}

				#contactInfos #birthday select {
					-webkit-appearance: none;
					appearance: none;
					border-radius: 0;
					font-size: 18px;
					color: #2c64ab;
					border: 1px solid #003c80;
					background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232c64ab' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center / 12px 8px;
					padding: 8px 30px 8px 15px;
					width: 30%;
					text-align: center;
					text-align-last: center;
				}

			#contactInfos #genreContainer { padding-bottom: 20px; }
				@media (min-width: 1400px)
				{
					#contactInfos #genreContainer {
						width: 70%;
						margin: 10px 0;
						padding-bottom: 0;
					}
				}

				#contactInfos #genreContainer label { display: inline-block; }
					@media (max-width: 1399px)
					{
						#contactInfos #genreContainer label {
							width: 49%;
							margin-top: 5px;
							margin-bottom: -10px;
							padding-bottom: 5px;
						}
					}

					@media (min-width: 1400px)
					{
						#contactInfos #genreContainer label { text-align: left; }
					}

					#contactInfos #genreContainer input {
						transform: scale(2);
						margin-right: 20px;
						margin-left: 10px;
					}

			#required {
				font-size: 14px;
				margin-top: 10px;
			}
				@media (min-width: 1400px)
				{
					#required {
						width: 70%;
						margin-left: auto;
					}
				}

			#contactInfos #submit {
				position: relative;
				display: inline-block;
				width: auto;
				font-family: 'Avenir-Black';
				font-size: 20px;
				color: #fff;
				border: none;
				border-radius: 30px;
				margin-top: 35px;
				padding: 15px 25px;
				background-color: #0e59a0;
				cursor: pointer;
				transition: background-color .5s ease, color .5s ease;
			}
				@media (hover: hover) and (pointer: fine)
				{

					#contactInfos #submit:hover {
						color: #0e59a0;
						background-color: #fff;
					}
				}

				@media (min-width: 1400px)
				{
					#contactInfos #submit { margin-top: 0; }
				}

	
/* /pagecontactForm */

/*
 * Footer
 */
#Footer {
	display: grid;
	height: 840px;
	justify-content: center;
	padding: 36px 15px 25px;
	background: url("../img/pages/bg-footer-pages.webp") no-repeat center top / cover;
}
	@media (min-width: 1200px)
	{
		#Footer {
			height: 1085px;
			padding: 134px 0 109px;
			background-position-y: bottom;
		}
	}

	#footerContents, #footerBottom { height: fit-content; }
		@media (min-width: 1200px)
		{
			#footerContents {
				width: 717px;
				padding: 42px 0;
				border: 2px solid #fff;
				border-radius: 60px;
			}
		}

		#footerContents figure {
			width: 185px;
			margin: 0 auto 10px;
		}

		#footerContact { margin-bottom: 20px; }	

			#footerContact p:first-child {
				font-size: 35px;
				margin-bottom: 43px;
			}
				@media (min-width: 1920px)
				{
					#footerContact p:first-child { font-size: 45px; }
				}

			#footerContact .footer-tel { font-size: 40px; }
				@media (min-width: 1920px)
				{
					#footerContact .footer-tel { font-size: 52px; }
				}

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

		#footerAddress { font-size: 20px; }
			@media (min-width: 1920px)
			{
				#footerAddress { font-size: 33px; }
			}

			#footerAddress a {
				color: #fff;
				text-decoration: none;
			}

		#footerBottom {
			align-self: flex-end;
			font-size: 25px;
			text-align: center;
		}
			@media (min-width: 1920px)
			{
				#footerBottom { font-size: 36px; }
			}

			#footerBottom a { color: #fff; }
/* /Footer */

/*
 * backToTop button
 */
#backToTop {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	right: 20px;
	bottom: 30px;
	border: none;
	border-radius: 50%;
	background-color: #222;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: opacity .3s, transform .3s, visibility .3s, background .2s;
	z-index: 999;
}
	@media (max-width: 767px)
	{
		#backToTop {
			width: 38px;
			height: 38px;
			right: 5px;
		}
	}

#backToTop.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#backToTop:hover { background-color: #000; }