/* This CSS is provided by Das */
/* https://das-art.com/ */

/* --- Styles de base --- */ 

/* Page */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html { 
	font-size: 100%; /* Évite un bug d'IE 6-7*/ 
} 
body { 
	margin: 0; 
	padding: 0;
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size: 0.8em;
	line-height: 1.3; 
	color: #1c0b27;
}

/* Titres */ 
h1, h2, h3, h4, h5, h6 { 
	margin: 0;
	font-family: "Outfit", sans-serif;
	font-optical-sizing: auto;
	font-variant-caps: small-caps;
	line-height: 1.2;
	font-weight: 900;
	font-style: normal;
} 
h1 { 
	font-size: 1.75em;
} 
h2 { 
	font-size: 1.4em; 
} 
h3 { 
	font-size: 1.25em; 
} 
h4 { 
	font-size: 1.1em; 
} 

/* Listes */ 
ul, ol { 
	margin: .75em 0 .75em 32px; 
	padding: 0;
}
	li {
		margin-bottom: 1em;
	}

/* Paragraphes */ 
p { 
	margin: 0.75em 0;
	font-size: 1.3em;
	line-height: 1.7;
} 
address { 
	margin: 0.75em 0; 
	font-style: normal; 
} 

/* Liens */ 
a { 
	text-decoration: underline;
	color: #5e2683;
} 
a:link { 
} 
a:visited { 
} 
a:hover, a:focus, a:active { 
	color: #492053; 
} 
/* Pas de bordure pointillée ou halo lors du clic sur un lien */ 
a:active { 
	outline: none; 
} 
/* Pas de bordure autour des images dans les liens */ 
a img { 
	border: none; 
} 

/* Divers éléments de type en-ligne */ 
em { 
	font-style: italic; 
} 
strong { 
	font-weight: bold; 
} 

/* Formulaires */ 
form, fieldset { 
	margin: 0; 
	padding: 0; 
	border: none; 
} 
input, button, select { 
	vertical-align: middle;
}

/* séparateur et nettoyeur */
.nettoyeur {clear: both; margin: 0; padding: 0; border: none; height: 0; line-height: 1px; font-size: 1px;}
.separateur {clear: left; margin: 10px 0 30px; border: none; height: 1px; color: #ccc; background-color: #ccc;}

/* --- Styles personnalisés --- */
/* Purple : #5e2683, rgb(94, 38, 131) */
/* Green : #93a426, rgb(147, 164, 38) */

/* Page */
html {
  scroll-behavior: smooth;
}

.grid-container {
	display: grid;
	grid-template-areas:
	'menu menu menu menu menu menu'
    'header header header header header header'
    'main main main main main main'
    'footer footer footer footer footer footer';
	gap: 10px;
}


/* Extra small devices (phones, 480px and down) */
@media only screen and (max-width: 479px) {

	/* Page */
	header h2, #agence h2, #offres h2, #clients h2, #contact h2, #legal h2 {font-size: 2em; padding-left: 0.4em;}
	header h3, #agence h3, #offres h3, #clients h3, #contact h3, #legal h3 {font-size: 1.5em;}
	p:first-letter {font-size: 1.2em;}
	.w33 {float: left; padding: 10px; width: 33%;}
	.w50 {float: left; padding: 10px; width: 50%;}
	.w66 {float: left; padding: 10px; width: 66%;}

	
	/* Menu mobile */
	#navbar {
		grid-area: menu;
		grid-area: 1 / span 6;
		overflow: hidden;
		position: fixed;
		background-color: rgba(94, 38, 131, 0.9);
		margin: 0;
		padding: 20px 10px !important;
		transition: 0.4s;
		width: 100%;
		top: 0;
		z-index: 99; 
	}
		#logo {
			float: left;
			margin: 0 0 0 10px !important;
			width: 120px !important;
			transition: 0.4s;
		}
		#navbarRight {
			margin-right: 21px;
			float: none;
		}
		.navTop li {
			display: block;
			list-style-type: none;
			margin-bottom: 0;
		}
			.navTop li a {
				display: none;
				padding: 12px;
				border-radius: 7px;
				color: #fff;
				text-align: center;
				text-transform: uppercase;
				text-decoration: none;
				font-size: 1.5em;
			}
			.navTop li a:hover {
				background-color: #492053;
				color: #fff;
				transition: 0.4s;
			}
			.navTop li a.active {
				background-color: #492053;
				color: #fff;
			}
			.navTop li a.icon {
				float: right;
				display: block;
				padding: 0;
			}
			.navTop.responsive {
				position: relative;
			}
				.navTop.responsive li a {
					float: none;
					display: block;
				}
					.navTop.responsive li:first-child {
						margin-top: 60px;
				}
				.navTop.responsive li a.icon {
					position: absolute;
					right: 0;
					top: -60px;
					margin-right: 0;
				}
		
	/* Header */
	header {
		grid-area: header;
		grid-area: 2 / span 6;
		padding: 120px 0 0;
		background: url(../media/header-background-1280.jpg) 0 0,  linear-gradient(180deg, #415196 30%, #7a85b6 100%);
		background-size: cover;
		background-blend-mode: multiply;
		background-attachment: fixed;
		color: #fff;
		text-align: center;
	}
	header#page {
		padding-top: 100px;
	}
		header#accueil div {
			margin: 0 auto;
			max-width: 744px;
			min-height: 45vh;
		}
		header#page div {
			margin: 0 auto;
			max-width: 744px;
		}
			header div h1 {
				margin: 0.5em auto 2em;
				font-size: 2.8em;
			}
			header div h2 {
				font-size: 2em;
				padding-left: 0;
				padding-bottom: 1em;
			}
			
			header div p {
				float: none;
				width: 100%;
				padding: 0 2em;
				font-size: 1.4em;
				text-align: left;
			}

			header div a.CTA {
				display: inline-block;
				margin: 4em auto 3em;
				padding: 12px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #27315a;
				color: #fff;
				text-align: center;
				text-transform: uppercase;
				text-decoration: none;
				font-size: 1.5em;
			}
			header div a.CTA:hover {
				background: #1a203c;
				box-shadow: 0 0 0 2px #5462a1;
				color: #fff;
				transition: 0.4s;
			}
			.material-symbols-outlined {
				display: block !important;
				width: 100%;
				text-align: center;
				font-size: 80px !important;
			}
				.material-symbols-outlined a {
					color: #cfbeda;
					text-decoration: none;
				}
				.material-symbols-outlined a:hover {
					color: #fff;
					text-shadow: 0 0 4px #5462a1;
					transition: 0.4s;
				}


	/* Agence */
	#agence {
		grid-area: main;
		grid-area: 3 / span 6;
		padding: 5em 2em;
		border-left: 10px solid #93a426;		
		background: url(../media/agence-background-1280.jpg) -1000px 0, #efe9f3;
		background-size: cover;
		background-blend-mode: multiply;
		background-attachment: fixed;
	}
		#agence div {
			background-color: rgb(239, 233, 243, 0.8);
			border-radius: 7px;
			padding: 1.5em;
		}
		#agence div.w66 {
			width: 100%;
		}
			#agence div h2 {
				border-bottom: 10px solid;
				border-image-slice: 1;
				border-width: 5px;
				border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
			}


	/* Services */
	#offres {
		grid-area: main;
		grid-area: 4 / span 6;
		padding: 5em 2em;
		background-color: #dfd4e6;
		border-left: 10px solid #93a426;
	}
		#offres div h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
		}
		#offres div.w50 {
			width: 100%;
			margin: 50px auto 42px;
			padding: 0 0 0 7px;
/*			border-left: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(180deg, #e9e1ee 20%, transparent 80%);*/
		}
		#offres div.w50 +div {
			margin-left: 0;
		}
		#offres div.w50 ul {
			margin-left: 16px;
		}
		#agences {
			background: url(../media/agences.png) 0 0 no-repeat;
			background-size: 70px;
		}
		#editeurs {
			background: url(../media/editeurs.png) 0 0 no-repeat;
			background-size: 70px;
		}
		#revenus {
			background: url(../media/revenus.png) 0 0 no-repeat;
			background-size: 70px;
		}
		#efficacite {
			background: url(../media/efficacite.png) 0 0 no-repeat;
			background-size: 70px;
		}
			#offres div.w50 h3 {
				display: flex;
				padding: 0 0 0 82px;
				min-height: 60px;
				text-align: left;
				justify-content: left;
				align-items: center;
			}
			#offres div.w50 h4 {
				padding-top: 2em;
				padding-right: 0px;
				font-size: 1.4em;
			}
			#partenaires {
				max-width: 1080px;
				margin: 2em auto;
				padding: 1em;
				background-color: rgb(239, 234, 243, 0.3);
				border-radius: 7px;
				text-align: center;
			}
				#partenaires div {
					margin: 1em auto 0;
				}
					div.logo-partenaire {
						display: inline-block;
						width: 150px;
						min-width: 150px;
						height: 100px;
						margin-top: 1em;
						justify-content: center;
						align-items: center;
					}
					#partenaires div div.logo-partenaire +div.logo-partenaire {
						margin-left: 10px;
					}
						.logo-partenaire img {
							object-fit: contain;
							max-width:150px;
							max-height: 40px;
							vertical-align: middle;
						}
						.logo-partenaire p {
							font-size: 0.9em;
						}

		#offres div ul {list-style-type: circle; font-size: 1.3em;}


	/* Clients */
	#clients {
		width: 100%;
		grid-area: main;
		grid-area: 5 / span 6;
		padding: 5em 2em;
		background-color: #cfbeda;
		border-left: 10px solid #93a426;
		text-align: center;
		overflow: hidden;
		position: relative;
	}
		#clients h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, transparent 20%, #552276 50%, transparent 80%);
		}

		.marquee:before, .marquee:after {
			position: absolute;
			top: 0;
			width: 10rem;
			height: 100%;
			content: "";
			z-index: 1;
		}
		#clients>div {
		margin: 42px auto 0;
		mask-image: linear-gradient(
			to right,
			hsl(0 0% 0% / 0),
			hsl(0 0% 0% / 1) 5%,
			hsl(0 0% 0% / 1) 95%,
			hsl(0 0% 0% / 0)
		)
		}
		.logo-clients-editeur {
			display: flex;
			margin: 42px 0 0;
			animation: scrolling 40s linear infinite;
			gap: 10px;
		}
		.logo-clients-editeur:hover {
			animation-play-state: paused;
		}
		@keyframes scrolling {
			0% { transform: translateX(0); }
			100% { transform: translateX(calc(-1 * 160px * 25)); }
		} 

		.logo-clients-agence {
			display: flex;
			margin: 21px 0 100px;
			animation: antiscrolling 40s linear infinite;
			gap: 10px;
		}
		.logo-clients-agence:hover {
			animation-play-state: paused;
		}
		@keyframes antiscrolling {
			100% { transform: translateX(0); }
			0% { transform: translateX(calc(-1 * 160px * 12)); }
		}
			.logo-client {
				display: flex;
				flex-shrink: 0;
				width: 150px;
				min-width: 150px;
				height: 120px;
				background-color: rgb(239, 233, 243, 0.2);
				border-radius: 3px;
				justify-content: center;
				align-items: center;
			}
				.logo-client img {
					object-fit: contain;
					max-width: 120px;
					max-height: 90px;
					-webkit-filter: grayscale(0);
        			filter: grayscale(0);
				}
				.logo-client img:hover {
					-webkit-filter: grayscale(0);
        			filter: none;
				}

  		/* Témoignages */
		#slideshow-temoignage {
			position: relative;
			max-width: 456px;
			min-height: 270px;
			margin: 42px auto 10px;
			background-color: rgb(239, 233, 243, 0.2);
			border-radius: 7px;
			text-align: left;
		}
		.temoignage {
			display: none;
			padding: 40px 60px;
		}

		.prev, .next {
			cursor: pointer;
			position: absolute;
			top: 50%;
			width: auto;
			margin-top: -30px;
			padding: 16px;
			color: #421b5c;
			font-weight: bold;
			font-size: 20px;
			border-radius: 0 7px 7px 0;
			user-select: none;
			text-decoration: none;

		}
		.next {
			position: absolute;
			right: 0;
			border-radius: 7px 0 0 7px;
		}
		.prev:hover, .next:hover {
			background-color: rgb(66, 27, 92, 0.6);
			color: white;
			}

		.dot-container {
			text-align: center;
			padding: 20px;
		}
		.dot {
			cursor: pointer;
			height: 15px;
			width: 15px;
			margin: 0 2px;
			background-color: #bbb;
			border-radius: 50%;
			display: inline-block;
			transition: background-color 0.6s ease;
		}
		.active, .dot:hover {
			background-color: #421b5c;
		}

		q {
			quotes: "“" "”" "‘" "’";
			font-style: italic;
			font-size: 1.3em;
	   }
	   	q:before {			
			content: open-quote;
			position: absolute;
			top: 0;
			font-size: 200px;
			color: rgb(66, 27, 92, 0.2);
			font-weight: bold;
		}
		q:after {
			content: none;
		}
		.auteurice {
			padding-left: 20px;
			color: #415196;
	   } 


	/* Contact */
	#contact {
		grid-area: main;
		grid-area: 6 / span 6;
		padding: 5em 0;
		background: url(../media/contact-background-1280.jpg) 0 0,  linear-gradient(135deg, #552276 0%, #1a203c 80%);
		background-size: cover;
		background-blend-mode: overlay;
		background-attachment: fixed;
		border-top: 5px solid #552276;
		color: white;
		}
		#contact h2 {
			margin-left: 42px;
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #fff 0%, transparent 50%);
		}
		#contact>div {
			display: grid;
			grid-template-columns: 1fr;
			align-content: start;
			grid-auto-columns: 1fr;
			grid-column-gap: 10px;
		}
		#contact div div:first-of-type {
			padding: 3em 21px;
		}
			#contact div div img {
				margin: 0 20px -4px 10px;
			}
			#contact div div a {
				color: #cfbeda;
				text-decoration: none;
			}
			#contact div div a:hover {
				color: #fff;
			}

		form, #formResponse {
			width: 90%;
			margin-left: 20px;
			display: none;
		}

		.champ {
			padding: 0 !important;
		}
			label.requis {
				padding-right: 15px;
				background: url(../media/asterisk.svg) top right no-repeat;
				background-size: 9px;
			}
			input[type=text], select, textarea {
				width: 100%;
				padding: 12px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #cfbeda;
				box-sizing: border-box;
				margin-top: 6px;
				margin-bottom: 16px;
				resize: vertical;
			}
			input[type=text]:focus, select:focus, textarea:focus {
				box-shadow: 0px 0px 4px 6px #5462a1;
				background-color: #fff;
				color: #1c0b27;
				transition: 0.4s;
			}	
			button[type=submit] {
				padding: 12px 20px;
				padding: 12px 20px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #27315a;
				color: white;
				cursor: pointer;
			
			}
			button[type=submit]:hover {
				background: #1a203c;
				box-shadow: 0px 0px 0px 2px #5462a1;
				color: #fff;
				transition: 0.4s;
			}
			form .error {
				display: block;
				margin: -12px 7px 16px;
				padding: 7px;
				background-image: linear-gradient(90deg, rgba(167, 69, 69, 0.555) 0%, transparent 80%);
			}

	/* Mentions Légales */
	#legal {
		grid-area: header;
		padding: 4em 2em;
		background-color: #efe9f3;
		border-left: 10px solid #93a426;
	}
		#legal div h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
		}

	/* Footer */
	footer {
		grid-area: footer;
		grid-area: 7 / span 6;
		clear: both;
		display: grid;
		grid-template-columns: 1fr;
		align-content: start;
		grid-auto-columns: 1fr;
		grid-column-gap: 0;
		padding: 42px 42px;
		border-top: 5px solid #7e519c;
		background-color: #2f1342;
		text-align: center;
		font-size: 0.8em;
		color: #e4d7e8;

	}
	footer div {
		margin-bottom: 3em;
	}
		footer div ul {
			margin-left: 0;
		}
			footer div li {
				padding-left: 0;
				list-style-type: none;
				font-size: 1.3em;
				line-height: 1;
				text-align: center;
			}
			footer div a img {
				max-width: 170px;
			}
			footer div a {
				color: #cfbeda;
				text-decoration: none;
			}
			footer div a:hover {
				color: #fff;
			}
}


/* Small devices (large phones, 480px and up) */
@media only screen and (min-width: 480px) and (max-width: 767px)  {

	/* Page */
	header h2, #agence h2, #offres h2, #clients h2, #contact h2, #legal h2 {font-size: 2em; padding-left: 0.4em;}
	header h3, #agence h3, #offres h3, #clients h3, #contact h3, #legal h3 {font-size: 1.5em;}
	p:first-letter {font-size: 1.2em;}
	.w33 {float: left; padding: 10px; width: 33%;}
	.w50 {float: left; padding: 10px; width: 50%;}
	.w66 {float: left; padding: 10px; width: 66%;}

	
	/* Menu mobile */
	#navbar {
		grid-area: menu;
		grid-area: 1 / span 6;
		overflow: hidden;
		position: fixed;
		background-color: rgba(94, 38, 131, 0.9);
		margin: 0;
		padding: 20px 10px !important;
		transition: 0.4s;
		width: 100%;
		top: 0;
		z-index: 99; 
	}
		#logo {
			float: left;
			margin: 0 0 0 10px !important;
			width: 120px !important;
			transition: 0.4s;
		}
		#navbarRight {
			margin-right: 21px;
			float: none;
		}
		.navTop li {
			display: block;
			list-style-type: none;
			margin-bottom: 0;
		}
			.navTop li a {
				display: none;
				padding: 12px;
				border-radius: 7px;
				color: #fff;
				text-align: center;
				text-transform: uppercase;
				text-decoration: none;
				font-size: 1.5em;
			}
			.navTop li a:hover {
				background-color: #492053;
				color: #fff;
				transition: 0.4s;
			}
			.navTop li a.active {
				background-color: #492053;
				color: #fff;
			}
			.navTop li a.icon {
				float: right;
				display: block;
				padding: 0;
			}
			.navTop.responsive {
				position: relative;
			}
				.navTop.responsive li a {
					float: none;
					display: block;
				}
					.navTop.responsive li:first-child {
						margin-top: 60px;
				}
				.navTop.responsive li a.icon {
					position: absolute;
					right: 0;
					top: -60px;
					margin-right: 0;
				}
		
	/* Header */
	header {
		grid-area: header;
		grid-area: 2 / span 6;
		padding: 200px 0 0;
		background: url(../media/header-background-1280.jpg) 0 0,  linear-gradient(180deg, #415196 30%, #7a85b6 100%);
		background-size: cover;
		background-blend-mode: multiply;
		background-attachment: fixed;
		color: #fff;
		text-align: center;
	}
	header#page {
		padding-top: 100px;
	}
		header#accueil div {
			margin: 0 auto;
			max-width: 744px;
			min-height: 58vh;
		}
		header#page div {
			margin: 0 auto;
			max-width: 744px;
		}
			header div h1 {
				margin: 0.5em auto;
				font-size: 3.3em;
			}
			header div h2 {
				font-size: 1.4em;
				padding-left: 0;
			}
			
			header div p {
				float: none;
				width: 100%;
				padding: 0 2em;
				font-size: 1.4em;
				text-align: left;
			}

			header div a.CTA {
				display: inline-block;
				margin: 4em auto;
				padding: 12px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #27315a;
				color: #fff;
				text-align: center;
				text-transform: uppercase;
				text-decoration: none;
				font-size: 1.5em;
			}
			header div a.CTA:hover {
				background: #1a203c;
				box-shadow: 0 0 0 2px #5462a1;
				color: #fff;
				transition: 0.4s;
			}
			.material-symbols-outlined {
				display: block !important;
				width: 100%;
				text-align: center;
				font-size: 80px !important;
			}
				.material-symbols-outlined a {
					color: #cfbeda;
					text-decoration: none;
				}
				.material-symbols-outlined a:hover {
					color: #fff;
					text-shadow: 0 0 4px #5462a1;
					transition: 0.4s;
				}


	/* Agence */
	#agence {
		grid-area: main;
		grid-area: 3 / span 6;
		padding: 5em 2em;
		border-left: 10px solid #93a426;		
		background: url(../media/agence-background-1280.jpg) -1000px 0, #efe9f3;
		background-size: cover;
		background-blend-mode: multiply;
		background-attachment: fixed;
	}
		#agence div {
			background-color: rgb(239, 233, 243, 0.8);
			border-radius: 7px;
			padding: 1.5em;
		}
		#agence div.w66 {
			width: 100%;
		}
			#agence div h2 {
				border-bottom: 10px solid;
				border-image-slice: 1;
				border-width: 5px;
				border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
			}


	/* Services */
	#offres {
		grid-area: main;
		grid-area: 4 / span 6;
		padding: 5em 2em;
		background-color: #dfd4e6;
		border-left: 10px solid #93a426;
	}
		#offres div h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
		}
		#offres div.w50 {
			width: 100%;
			margin: 50px auto 42px;
			padding: 0 0 0 7px;
/*			border-left: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(180deg, #e9e1ee 20%, transparent 80%);*/
		}
		#offres div.w50 +div {
			margin-left: 0;
		}
		#offres div.w50 ul {
			margin-left: 16px;
		}
		#agences {
			background: url(../media/agences.png) 0 0 no-repeat;
			background-size: 70px;
		}
		#editeurs {
			background: url(../media/editeurs.png) 0 0 no-repeat;
			background-size: 70px;
		}
		#revenus {
			background: url(../media/revenus.png) 0 0 no-repeat;
			background-size: 70px;
		}
		#efficacite {
			background: url(../media/efficacite.png) 0 0 no-repeat;
			background-size: 70px;
		}
			#offres div.w50 h3 {
				display: flex;
				padding: 0 0 0 82px;
				min-height: 60px;
				text-align: left;
				justify-content: left;
				align-items: center;
			}
			#offres div.w50 h4 {
				padding-top: 2em;
				padding-right: 0px;
				font-size: 1.4em;
			}
			#partenaires {
				max-width: 1080px;
				margin: 2em auto;
				padding: 1em;
				background-color: rgb(239, 234, 243, 0.3);
				border-radius: 7px;
				text-align: center;
			}
				#partenaires div {
					margin: 1em auto 0;
				}
					div.logo-partenaire {
						display: inline-block;
						width: 150px;
						min-width: 150px;
						height: 100px;
						margin-top: 1em;
						justify-content: center;
						align-items: center;
					}
					#partenaires div div.logo-partenaire +div.logo-partenaire {
						margin-left: 20px;
					}
						.logo-partenaire img {
							object-fit: contain;
							max-width:150px;
							max-height: 40px;
							vertical-align: middle;
						}
						.logo-partenaire p {
							font-size: 0.9em;
						}

		#offres div ul {list-style-type: circle; font-size: 1.3em;}


	/* Clients */
	#clients {
		width: 100%;
		grid-area: main;
		grid-area: 5 / span 6;
		padding: 5em 2em;
		background-color: #cfbeda;
		border-left: 10px solid #93a426;
		text-align: center;
		overflow: hidden;
		position: relative;
	}
		#clients h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, transparent 20%, #552276 50%, transparent 80%);
		}

		.marquee:before, .marquee:after {
			position: absolute;
			top: 0;
			width: 10rem;
			height: 100%;
			content: "";
			z-index: 1;
		}
		#clients>div {
		margin: 42px auto 0;
		mask-image: linear-gradient(
			to right,
			hsl(0 0% 0% / 0),
			hsl(0 0% 0% / 1) 5%,
			hsl(0 0% 0% / 1) 95%,
			hsl(0 0% 0% / 0)
		)
		}
		.logo-clients-editeur {
			display: flex;
			margin: 42px 0 0;
			animation: scrolling 40s linear infinite;
			gap: 10px;
		}
		.logo-clients-editeur:hover {
			animation-play-state: paused;
		}
		@keyframes scrolling {
			0% { transform: translateX(0); }
			100% { transform: translateX(calc(-1 * 160px * 25)); }
		} 

		.logo-clients-agence {
			display: flex;
			margin: 21px 0 100px;
			animation: antiscrolling 40s linear infinite;
			gap: 10px;
		}
		.logo-clients-agence:hover {
			animation-play-state: paused;
		}
		@keyframes antiscrolling {
			100% { transform: translateX(0); }
			0% { transform: translateX(calc(-1 * 160px * 12)); }
		}
			.logo-client {
				display: flex;
				flex-shrink: 0;
				width: 150px;
				min-width: 150px;
				height: 120px;
				background-color: rgb(239, 233, 243, 0.2);
				border-radius: 3px;
				justify-content: center;
				align-items: center;
			}
				.logo-client img {
					object-fit: contain;
					max-width: 120px;
					max-height: 90px;
					-webkit-filter: grayscale(0);
        			filter: grayscale(0);
				}
				.logo-client img:hover {
					-webkit-filter: grayscale(0);
        			filter: none;
				}

  		/* Témoignages */
		#slideshow-temoignage {
			position: relative;
			max-width: 456px;
			min-height: 270px;
			margin: 42px auto 10px;
			background-color: rgb(239, 233, 243, 0.2);
			border-radius: 7px;
			text-align: left;
		}
		.temoignage {
			display: none;
			padding: 40px 60px;
		}

		.prev, .next {
			cursor: pointer;
			position: absolute;
			top: 50%;
			width: auto;
			margin-top: -30px;
			padding: 16px;
			color: #421b5c;
			font-weight: bold;
			font-size: 20px;
			border-radius: 0 7px 7px 0;
			user-select: none;
			text-decoration: none;

		}
		.next {
			position: absolute;
			right: 0;
			border-radius: 7px 0 0 7px;
		}
		.prev:hover, .next:hover {
			background-color: rgb(66, 27, 92, 0.6);
			color: white;
			}

		.dot-container {
			text-align: center;
			padding: 20px;
		}
		.dot {
			cursor: pointer;
			height: 15px;
			width: 15px;
			margin: 0 2px;
			background-color: #bbb;
			border-radius: 50%;
			display: inline-block;
			transition: background-color 0.6s ease;
		}
		.active, .dot:hover {
			background-color: #421b5c;
		}

		q {
			quotes: "“" "”" "‘" "’";
			font-style: italic;
			font-size: 1.3em;
	   }
	   	q:before {			
			content: open-quote;
			position: absolute;
			top: 0;
			font-size: 200px;
			color: rgb(66, 27, 92, 0.2);
			font-weight: bold;
		}
		q:after {
			content: none;
		}
		.auteurice {
			padding-left: 20px;
			color: #415196;
	   } 


	/* Contact */
	#contact {
		grid-area: main;
		grid-area: 6 / span 6;
		padding: 5em 0;
		background: url(../media/contact-background-1280.jpg) 0 0,  linear-gradient(135deg, #552276 0%, #1a203c 80%);
		background-size: cover;
		background-blend-mode: overlay;
		background-attachment: fixed;
		border-top: 5px solid #552276;
		color: white;
		}
		#contact h2 {
			margin-left: 42px;
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #fff 0%, transparent 50%);
		}
		#contact>div {
			display: grid;
			grid-template-columns: 1fr;
			align-content: start;
			grid-auto-columns: 1fr;
			grid-column-gap: 10px;
		}
		#contact div div:first-of-type {
			padding: 3em 21px;
		}
			#contact div div img {
				margin: 0 20px -4px 10px;
			}
			#contact div div a {
				color: #cfbeda;
				text-decoration: none;
			}
			#contact div div a:hover {
				color: #fff;
			}

		form, #formResponse {
			width: 90%;
			margin-left: 20px;
			display: none;
		}

		.champ {
			padding: 0 !important;
		}
			label.requis {
				padding-right: 15px;
				background: url(../media/asterisk.svg) top right no-repeat;
				background-size: 9px;
			}
			input[type=text], select, textarea {
				width: 100%;
				padding: 12px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #cfbeda;
				box-sizing: border-box;
				margin-top: 6px;
				margin-bottom: 16px;
				resize: vertical;
			}
			input[type=text]:focus, select:focus, textarea:focus {
				box-shadow: 0px 0px 4px 6px #5462a1;
				background-color: #fff;
				color: #1c0b27;
				transition: 0.4s;
			}	
			button[type=submit] {
				padding: 12px 20px;
				padding: 12px 20px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #27315a;
				color: white;
				cursor: pointer;
			
			}
			button[type=submit]:hover {
				background: #1a203c;
				box-shadow: 0px 0px 0px 2px #5462a1;
				color: #fff;
				transition: 0.4s;
			}
			form .error {
				display: block;
				margin: -12px 7px 16px;
				padding: 7px;
				background-image: linear-gradient(90deg, rgba(167, 69, 69, 0.555) 0%, transparent 70%);
			}

	/* Mentions Légales */
	#legal {
		grid-area: header;
		padding: 4em 2em;
		background-color: #efe9f3;
		border-left: 10px solid #93a426;
	}
		#legal div h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
		}

	/* Footer */
	footer {
		grid-area: footer;
		grid-area: 7 / span 6;
		clear: both;
		display: grid;
		grid-template-columns: 1fr;
		align-content: start;
		grid-auto-columns: 1fr;
		grid-column-gap: 0;
		padding: 42px 42px;
		border-top: 5px solid #7e519c;
		background-color: #2f1342;
		text-align: center;
		font-size: 0.8em;
		color: #e4d7e8;

	}
	footer div {
		margin-bottom: 3em;
	}
		footer div ul {
			margin-left: 0;
		}
			footer div li {
				padding-left: 0;
				list-style-type: none;
				font-size: 1.3em;
				line-height: 1;
				text-align: center;
			}
			footer div a img {
				max-width: 170px;
			}
			footer div a {
				color: #cfbeda;
				text-decoration: none;
			}
			footer div a:hover {
				color: #fff;
			}
}


/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 1023px)  {
	
	/* Page */
	header h2, #agence h2, #offres h2, #clients h2, #contact h2, #legal h2 {font-size: 2em; padding-left: 0.7em;}
	header h3, #agence h3, #offres h3, #clients h3, #contact h3, #legal h3 {font-size: 1.5em;}
	p:first-letter {font-size: 1.2em;}
	.w33 {float: left; padding: 10px; width: 33%;}
	.w50 {float: left; padding: 10px; width: 50%;}
	.w66 {float: left; padding: 10px; width: 66%;}

	
	/* Menu */
	#navbar {
		grid-area: menu;
		grid-area: 1 / span 6;
		overflow: hidden;
		position: fixed;
		background-color: rgba(94, 38, 131, 0.9);
		margin: 0;
		padding: 0px 10px;
		transition: 0.4s;
		width: 100%;
		top: 0;
		z-index: 99; 
	}
		#logo {
			float: left;
			margin: 10px 0 10px 42px !important;
			margin-left: 42px !important;
			width: 120px !important;
			transition: 0.4s;
		}

		#navbarRight {
			margin: 10px 42px 10px auto;
			float: right;
		}
		.navTop li {
			display: inline-block;
			list-style-type: none;
			margin-bottom: 0;
		}
			#navbarRight li a {
				padding: 12px;
				border-radius: 7px;
				color: #fff;
				text-align: center;
				text-transform: uppercase;
				text-decoration: none;
				font-size: 1.5em;
			}
			#navbarRight li a:hover {
				background-color: #492053;
				color: #fff;
				transition: 0.4s;
			}
			#navbarRight li a.active {
				background-color: #492053;
				color: #fff;
			}
			.navTop .icon {
				display: none;
			}
			
	/* Header */
	header {
		grid-area: header;
		grid-area: 2 / span 6;
		padding: 200px 0 0;
		background: url(../media/header-background-1280.jpg) 0 0,  linear-gradient(180deg, #415196 30%, #7a85b6 100%);
		background-size: cover;
		background-blend-mode: multiply;
		background-attachment: fixed;
		color: #fff;
		text-align: center;
	}
	header#page {
		padding-top: 100px;
	}
		header#accueil div {
			margin: 0 auto;
			max-width: 744px;
			min-height: 58vh;
		}
		header#page div {
			margin: 0 auto;
			max-width: 744px;
		}
			header div h1 {
				margin: 0.5em auto;
				font-size: 4.5em;
			}
			header div h2 {
				font-size: 2em;
			}
			
			header div p {
				float: none;
				width: 100%;
				padding: 0 4em;
				font-size: 1.4em;
				text-align: left;
			}

			header div a.CTA {
				display: inline-block;
				margin: 4em auto;
				padding: 12px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #27315a;
				color: #fff;
				text-align: center;
				text-transform: uppercase;
				text-decoration: none;
				font-size: 1.5em;
			}
			header div a.CTA:hover {
				background: #1a203c;
				box-shadow: 0 0 0 2px #5462a1;
				color: #fff;
				transition: 0.4s;
			}
			.material-symbols-outlined {
				display: block !important;
				width: 100%;
				text-align: center;
				font-size: 80px !important;
			}
				.material-symbols-outlined a {
					color: #cfbeda;
					text-decoration: none;
				}
				.material-symbols-outlined a:hover {
					color: #fff;
					text-shadow: 0 0 4px #5462a1;
					transition: 0.4s;
				}


	/* Agence */
	#agence {
		grid-area: main;
		grid-area: 3 / span 6;
		padding: 5em 3em;
		border-left: 21px solid #93a426;		
		background: url(../media/agence-background-1280.jpg) top center,  #efe9f3;
		background-size: cover;
		background-blend-mode: multiply;
		background-attachment: fixed;
	}
		#agence div {
			background-color: rgb(239, 233, 243, 0.6);
			border-radius: 7px;
			padding: 2.5em;
		}
		#agence div.w66 {
			width: 100%;
		}
			#agence div h2 {
				border-bottom: 10px solid;
				border-image-slice: 1;
				border-width: 5px;
				border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
			}


	/* Services */
	#offres {
		grid-area: main;
		grid-area: 4 / span 6;
		padding: 5em 3em;
		background-color: #dfd4e6;
		border-left: 21px solid #93a426;
	}
		#offres div h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
		}
		#offres div.w50 {
			width: 45%;
			margin: 50px auto 42px;
			padding: 0 0 0 7px;
/*			border-left: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(180deg, #e9e1ee 20%, transparent 80%);*/
		}
		#offres div.w50 +div {
			margin-left: 10%;
		}
		#offres div.w50 ul {
			margin-left: 16px;
		}
		#agences {
			background: url(../media/agences.png) 12px 0 no-repeat;
			background-size: 100px;
		}
		#editeurs {
			background: url(../media/editeurs.png) 12px 0 no-repeat;
			background-size: 100px;
		}
		#revenus {
			background: url(../media/revenus.png) 12px 0 no-repeat;
			background-size: 100px;
		}
		#efficacite {
			background: url(../media/efficacite.png) 12px 0 no-repeat;
			background-size: 100px;
		}
			#offres div.w50 h3 {
				display: flex;
				padding: 0 0 0 112px;
				min-height: 120px;
				text-align: left;
				justify-content: left;
				align-items: center;
			}
			#offres div.w50 h4 {
				padding-top: 2em;
				padding-right: 0px;
				font-size: 1.4em;
			}
			#partenaires {
				max-width: 1080px;
				margin: 2em auto;
				padding: 1em;
				background-color: rgb(239, 234, 243, 0.3);
				border-radius: 7px;
				text-align: center;
			}
				#partenaires div {
					margin: 1em auto 0;
				}
					div.logo-partenaire {
						display: inline-block;
						width: 150px;
						min-width: 150px;
						height: 100px;
						margin-top: 1em;
						justify-content: center;
						align-items: center;
					}
					#partenaires div div.logo-partenaire +div.logo-partenaire {
						margin-left: 20px;
					}
						.logo-partenaire img {
							object-fit: contain;
							max-width:150px;
							max-height: 40px;
							vertical-align: middle;
						}
						.logo-partenaire p {
							font-size: 0.9em;
						}

		#offres div ul {list-style-type: circle; font-size: 1.3em;}


	/* Clients */
	#clients {
		width: 100%;
		grid-area: main;
		grid-area: 5 / span 6;
		padding: 5em 3em;
		background-color: #cfbeda;
		border-left: 21px solid #93a426;
		text-align: center;
		overflow: hidden;
		position: relative;
	}
		#clients h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, transparent 20%, #552276 50%, transparent 80%);
		}

		.marquee:before, .marquee:after {
			position: absolute;
			top: 0;
			width: 10rem;
			height: 100%;
			content: "";
			z-index: 1;
		}
		#clients>div {
		margin: 42px auto 0;
		mask-image: linear-gradient(
			to right,
			hsl(0 0% 0% / 0),
			hsl(0 0% 0% / 1) 5%,
			hsl(0 0% 0% / 1) 95%,
			hsl(0 0% 0% / 0)
		)
		}
		.logo-clients-editeur {
			display: flex;
			margin: 42px 0 0;
			animation: scrolling 40s linear infinite;
			gap: 10px;
		}
		.logo-clients-editeur:hover {
			animation-play-state: paused;
		}
		@keyframes scrolling {
			0% { transform: translateX(0); }
			100% { transform: translateX(calc(-1 * 160px * 25)); }
		} 

		.logo-clients-agence {
			display: flex;
			margin: 21px 0 100px;
			animation: antiscrolling 40s linear infinite;
			gap: 10px;
		}
		.logo-clients-agence:hover {
			animation-play-state: paused;
		}
		@keyframes antiscrolling {
			100% { transform: translateX(0); }
			0% { transform: translateX(calc(-1 * 160px * 12)); }
		}
			.logo-client {
				display: flex;
				flex-shrink: 0;
				width: 150px;
				min-width: 150px;
				height: 120px;
				background-color: rgb(239, 233, 243, 0.2);
				border-radius: 3px;
				justify-content: center;
				align-items: center;
			}
				.logo-client img {
					object-fit: contain;
					max-width: 120px;
					max-height: 90px;
					-webkit-filter: grayscale(0);
        			filter: grayscale(0);
				}
				.logo-client img:hover {
					-webkit-filter: grayscale(0);
        			filter: none;
				}

  		/* Témoignages */
		#slideshow-temoignage {
			position: relative;
			max-width: 744px;
			min-height: 270px;
			margin: 42px auto 10px;
			background-color: rgb(239, 233, 243, 0.2);
			border-radius: 7px;
			text-align: left;
		}
		.temoignage {
			display: none;
			padding: 40px 60px;
		}

		.prev, .next {
			cursor: pointer;
			position: absolute;
			top: 50%;
			width: auto;
			margin-top: -30px;
			padding: 16px;
			color: #421b5c;
			font-weight: bold;
			font-size: 20px;
			border-radius: 0 7px 7px 0;
			user-select: none;
			text-decoration: none;

		}
		.next {
			position: absolute;
			right: 0;
			border-radius: 7px 0 0 7px;
		}
		.prev:hover, .next:hover {
			background-color: rgb(66, 27, 92, 0.6);
			color: white;
			}

		.dot-container {
			text-align: center;
			padding: 20px;
		}
		.dot {
			cursor: pointer;
			height: 15px;
			width: 15px;
			margin: 0 2px;
			background-color: #bbb;
			border-radius: 50%;
			display: inline-block;
			transition: background-color 0.6s ease;
		}
		.active, .dot:hover {
			background-color: #421b5c;
		}

		q {
			quotes: "“" "”" "‘" "’";
			font-style: italic;
			font-size: 1.3em;
	   }
	   	q:before {			
			content: open-quote;
			position: absolute;
			top: 0;
			font-size: 200px;
			color: rgb(66, 27, 92, 0.2);
			font-weight: bold;
		}
		q:after {
			content: none;
		}
		.auteurice {
			padding-left: 20px;
			color: #415196;
	   } 


	/* Contact */
	#contact {
		grid-area: main;
		grid-area: 6 / span 6;
		padding: 5em 1.4em 5em 0;
		background: url(../media/contact-background-1280.jpg) 0 0,  linear-gradient(135deg, #552276 0%, #1a203c 80%);
		background-size: cover;
		background-blend-mode: overlay;
		background-attachment: fixed;
		border-top: 5px solid #552276;
		color: white;
		}
		#contact h2 {
			margin-left: 42px;
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #fff 0%, transparent 50%);
		}
		#contact>div {
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-content: start;
			grid-auto-columns: 1fr;
			grid-column-gap: 10px;
		}
		#contact div div:first-of-type {
			padding: 3em 0 0 42px;
		}
			#contact div div img {
				margin: 0 20px -4px 10px;
			}
			#contact div div a {
				color: #cfbeda;
				text-decoration: none;
			}
			#contact div div a:hover {
				color: #fff;
			}

		form, #formResponse {
			width: 90%;
			margin-left: 20px;
			display: none;
		}

		.champ {
			padding: 0 !important;
		}
			label.requis {
				padding-right: 15px;
				background: url(../media/asterisk.svg) top right no-repeat;
				background-size: 9px;
			}
			input[type=text], select, textarea {
				width: 100%;
				padding: 12px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #cfbeda;
				box-sizing: border-box;
				margin-top: 6px;
				margin-bottom: 16px;
				resize: vertical;
			}
			input[type=text]:focus, select:focus, textarea:focus {
				box-shadow: 0px 0px 4px 6px #5462a1;
				background-color: #fff;
				color: #1c0b27;
				transition: 0.4s;
			}	
			button[type=submit] {
				padding: 12px 20px;
				padding: 12px 20px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #27315a;
				color: white;
				cursor: pointer;
			
			}
			button[type=submit]:hover {
				background: #1a203c;
				box-shadow: 0px 0px 0px 2px #5462a1;
				color: #fff;
				transition: 0.4s;
			}
			form .error {
				display: block;
				margin: -12px 7px 16px;
				padding: 7px;
				background-image: linear-gradient(90deg, rgba(167, 69, 69, 0.555) 0%, transparent 90%);
			}

	/* Mentions Légales */
	#legal {
		grid-area: header;
		padding: 4em 3em;
		background-color: #efe9f3;
		border-left: 21px solid #93a426;
	}
		#legal div h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
		}

	/* Footer */
	footer {
		grid-area: footer;
		grid-area: 7 / span 6;
		clear: both;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		align-content: start;
		grid-auto-columns: 1fr;
		grid-column-gap: 10px;
		padding: 42px 42px;
		border-top: 5px solid #7e519c;
		background-color: #2f1342;
		text-align: center;
		font-size: 0.8em;
		color: #e4d7e8;

	}
		footer div li {
			padding-left: 6%;
			list-style-type: none;
			font-size: 1.3em;
			line-height: 1;
			text-align: left;
		}
		footer div a img {
			max-width: 170px;
		}
		footer div a {
			color: #cfbeda;
			text-decoration: none;
		}
		footer div a:hover {
			color: #fff;
		}
}


/* Large devices (laptops/desktops, 1024px and up) */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
	
	/* Page */
	header h2, #agence h2, #offres h2, #clients h2, #contact h2, #legal h2 {font-size: 3em; padding-left: 1em;}
	header h3, #agence h3, #offres h3, #clients h3, #contact h3, #legal h3 {font-size: 1.5em;}
	p:first-letter {font-size: 1.2em;}
	.w33 {float: left; padding: 10px; width: 33%;}
	.w50 {float: left; padding: 10px; width: 50%;}
	.w66 {float: left; padding: 10px; width: 66%;}

	
	/* Menu */
	#navbar {
		grid-area: menu;
		grid-area: 1 / span 6;
		overflow: hidden;
		position: fixed;
		background-color: rgba(94, 38, 131, 0.9);
		margin: 0;
		padding: 30px 10px;
		transition: 0.4s;
		width: 100%;
		top: 0;
		z-index: 99; 
	}
		#logo {
			float: left;
			margin: 0 0 0 42px;
			margin-left: 42px !important;
			width: 200px;
			transition: 0.4s;
		}

		#navbarRight {
			margin: 10px 42px 10px auto;
			float: right;
		}
		.navTop li {
			display: inline-block;
			list-style-type: none;
			margin-bottom: 0;
		}
			#navbarRight li a {
				padding: 12px;
				border-radius: 7px;
				color: #fff;
				text-align: center;
				text-transform: uppercase;
				text-decoration: none;
				font-size: 1.5em;
			}
			#navbarRight li a:hover {
				background-color: #492053;
				color: #fff;
				transition: 0.4s;
			}
			#navbarRight li a.active {
				background-color: #492053;
				color: #fff;
			}
			.navTop .icon {
				display: none;
			}
			
	/* Header */
	header {
		grid-area: header;
		grid-area: 2 / span 6;
		padding: 200px 0 0;
		background: url(../media/header-background-1280.jpg) 0 0,  linear-gradient(180deg, #415196 30%, #7a85b6 100%);
		background-size: cover;
		background-blend-mode: multiply;
		background-attachment: fixed;
		color: #fff;
		text-align: center;
	}
	header#page {
		padding-top: 100px;
	}
		header#accueil div {
			margin: 0 auto;
			max-width: 1000px;
			height: 58vh;
		}
		header#page div {
			margin: 0 auto;
			max-width: 1000px;
		}
			header div h1 {
				margin: 0.5em auto;
				font-size: 5em;
			}
			header div h2 {
				font-size: 3em;
			}
			
			header div p {
				float: left;
				width: 50%;
				padding: 0 0 0 7em;
				font-size: 1.4em;
				text-align: left;
			}

			header div a.CTA {
				display: inline-block;
				margin: 4em auto;
				padding: 12px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #27315a;
				color: #fff;
				text-align: center;
				text-transform: uppercase;
				text-decoration: none;
				font-size: 1.5em;
			}
			header div a.CTA:hover {
				background: #1a203c;
				box-shadow: 0 0 0 2px #5462a1;
				color: #fff;
				transition: 0.4s;
			}
			.material-symbols-outlined {
				display: block !important;
				width: 100%;
				text-align: center;
				font-size: 80px !important;
			}
				.material-symbols-outlined a {
					color: #cfbeda;
					text-decoration: none;
				}
				.material-symbols-outlined a:hover {
					color: #fff;
					text-shadow: 0 0 4px #5462a1;
					transition: 0.4s;
				}


	/* Agence */
	#agence {
		grid-area: main;
		grid-area: 3 / span 6;
		padding: 5em;
		border-left: 42px solid #93a426;		
		background: url(../media/agence-background-1280.jpg) top center,  #efe9f3;
		background-size: cover;
		background-blend-mode: multiply;
		background-attachment: fixed;
	}
		#agence div {
			background-color: rgb(239, 233, 243, 0.6);
			border-radius: 7px;
			padding: 3em;
		}
		#agence div.w66 {
			width: 100%;
		}
			#agence div h2 {
				border-bottom: 10px solid;
				border-image-slice: 1;
				border-width: 5px;
				border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
			}


	/* Services */
	#offres {
		grid-area: main;
		grid-area: 4 / span 6;
		padding: 5em;
		background-color: #dfd4e6;
		border-left: 42px solid #93a426;
	}
		#offres div h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
		}
		#offres div.w50 {
			width: 45%;
			margin: 50px auto 42px;
			padding: 0 0 0 30px;
/*			border-left: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(180deg, #e9e1ee 20%, transparent 80%);*/
		}
		#offres div.w50 +div {
			margin-left: 10%;
		}
		#offres div.w50 ul {
			margin-left: 16px;
		}
		#agences {
			background: url(../media/agences.png) 22px 0 no-repeat;
			background-size: 140px;
		}
		#editeurs {
			background: url(../media/editeurs.png) 22px 0 no-repeat;
			background-size: 140px;
		}
		#revenus {
			background: url(../media/revenus.png) 22px 0 no-repeat;
			background-size: 140px;
		}
		#efficacite {
			background: url(../media/efficacite.png) 22px 0 no-repeat;
			background-size: 140px;
		}
			#offres div.w50 h3 {
				display: flex;
				padding: 0 2em 0 142px;
				min-height: 120px;
				text-align: left;
				justify-content: left;
				align-items: center;
			}
			#offres div.w50 h4 {
				padding-top: 2em;
				padding-right: 0px;
				font-size: 1.4em;
			}
			#partenaires {
				max-width: 1080px;
				margin: 2em auto;
				padding: 1em;
				background-color: rgb(239, 234, 243, 0.3);
				border-radius: 7px;
				text-align: center;
			}
				#partenaires div {
					margin: 1em auto 0;
				}
					div.logo-partenaire {
						display: inline-block;
						width: 150px;
						min-width: 150px;
						height: 100px;
						margin-top: 1em;
						justify-content: center;
						align-items: center;
					}
					#partenaires div div.logo-partenaire +div.logo-partenaire {
						margin-left: 20px;
					}
						.logo-partenaire img {
							object-fit: contain;
							max-width:150px;
							max-height: 40px;
							vertical-align: middle;
						}
						.logo-partenaire p {
							font-size: 0.9em;
						}

		#offres div ul {list-style-type: circle; font-size: 1.3em;}


	/* Clients */
	#clients {
		width: 100%;
		grid-area: main;
		grid-area: 5 / span 6;
		padding: 5em;
		background-color: #cfbeda;
		border-left: 42px solid #93a426;
		text-align: center;
		overflow: hidden;
		position: relative;
	}
		#clients h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, transparent 20%, #552276 50%, transparent 80%);
		}

		.marquee:before, .marquee:after {
			position: absolute;
			top: 0;
			width: 10rem;
			height: 100%;
			content: "";
			z-index: 1;
		}
		#clients>div {
		margin: 42px auto 0;
		mask-image: linear-gradient(
			to right,
			hsl(0 0% 0% / 0),
			hsl(0 0% 0% / 1) 5%,
			hsl(0 0% 0% / 1) 95%,
			hsl(0 0% 0% / 0)
		)
		}
		.logo-clients-editeur {
			display: flex;
			margin: 42px 0 0;
			animation: scrolling 40s linear infinite;
			gap: 10px;
		}
		.logo-clients-editeur:hover {
			animation-play-state: paused;
		}
		@keyframes scrolling {
			0% { transform: translateX(0); }
			100% { transform: translateX(calc(-1 * 160px * 25)); }
		} 

		.logo-clients-agence {
			display: flex;
			margin: 21px 0 100px;
			animation: antiscrolling 40s linear infinite;
			gap: 10px;
		}
		.logo-clients-agence:hover {
			animation-play-state: paused;
		}
		@keyframes antiscrolling {
			100% { transform: translateX(0); }
			0% { transform: translateX(calc(-1 * 160px * 12)); }
		}
			.logo-client {
				display: flex;
				flex-shrink: 0;
				width: 150px;
				min-width: 150px;
				height: 120px;
				background-color: rgb(239, 233, 243, 0.2);
				border-radius: 3px;
				justify-content: center;
				align-items: center;
			}
				.logo-client img {
					object-fit: contain;
					max-width: 120px;
					max-height: 90px;
					-webkit-filter: grayscale(0);
        			filter: grayscale(0);
				}
				.logo-client img:hover {
					-webkit-filter: grayscale(0);
        			filter: none;
				}

  		/* Témoignages */
		#slideshow-temoignage {
			position: relative;
			max-width: 1000px;
			min-height: 270px;
			margin: 42px auto 10px;
			background-color: rgb(239, 233, 243, 0.2);
			border-radius: 7px;
			text-align: left;
		}
		.temoignage {
			display: none;
			padding: 40px 80px;
		}

		.prev, .next {
			cursor: pointer;
			position: absolute;
			top: 50%;
			width: auto;
			margin-top: -30px;
			padding: 16px;
			color: #421b5c;
			font-weight: bold;
			font-size: 20px;
			border-radius: 0 7px 7px 0;
			user-select: none;
			text-decoration: none;

		}
		.next {
			position: absolute;
			right: 0;
			border-radius: 7px 0 0 7px;
		}
		.prev:hover, .next:hover {
			background-color: rgb(66, 27, 92, 0.6);
			color: white;
			}

		.dot-container {
			text-align: center;
			padding: 20px;
		}
		.dot {
			cursor: pointer;
			height: 15px;
			width: 15px;
			margin: 0 2px;
			background-color: #bbb;
			border-radius: 50%;
			display: inline-block;
			transition: background-color 0.6s ease;
		}
		.active, .dot:hover {
			background-color: #421b5c;
		}

		q {
			quotes: "“" "”" "‘" "’";
			font-style: italic;
			font-size: 1.3em;
	   }
	   	q:before {			
			content: open-quote;
			position: absolute;
			top: 0;
			font-size: 200px;
			color: rgb(66, 27, 92, 0.2);
			font-weight: bold;
		}
		q:after {
			content: none;
		}
		.auteurice {
			padding-left: 20px;
			color: #415196;
	   } 


	/* Contact */
	#contact {
		grid-area: main;
		grid-area: 6 / span 6;
		padding: 4em;
		background: url(../media/contact-background-1280.jpg) 0 0,  linear-gradient(135deg, #552276 0%, #1a203c 80%);
		background-size: cover;
		background-blend-mode: overlay;
		background-attachment: fixed;
		border-top: 5px solid #552276;
		color: white;
		}
		#contact h2 {
			margin-left: 42px;
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #fff 0%, transparent 50%);
		}
		#contact>div {
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-content: start;
			grid-auto-columns: 1fr;
			grid-column-gap: 10px;
		}
		#contact div div:first-of-type {
			padding: 3em 0 0 42px;
		}
			#contact div div img {
				margin: 0 20px -4px 10px;
			}
			#contact div div a {
				color: #cfbeda;
				text-decoration: none;
			}
			#contact div div a:hover {
				color: #fff;
			}

		form, #formResponse {
			width: 100%;
			margin-left: 20px;
			display: none;
		}

		.champ {
			padding: 0 !important;
		}
			label.requis {
				padding-right: 15px;
				background: url(../media/asterisk.svg) top right no-repeat;
				background-size: 9px;
			}
			input[type=text], select, textarea {
				width: 100%;
				padding: 12px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #cfbeda;
				box-sizing: border-box;
				margin-top: 6px;
				margin-bottom: 16px;
				resize: vertical;
			}
			input[type=text]:focus, select:focus, textarea:focus {
				box-shadow: 0px 0px 4px 6px #5462a1;
				background-color: #fff;
				color: #1c0b27;
				transition: 0.4s;
			}	
			button[type=submit] {
				padding: 12px 20px;
				padding: 12px 20px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #27315a;
				color: white;
				cursor: pointer;
			
			}
			button[type=submit]:hover {
				background: #1a203c;
				box-shadow: 0px 0px 0px 2px #5462a1;
				color: #fff;
				transition: 0.4s;
			}
			form .error {
				display: block;
				margin: -12px 7px 16px;
				padding: 7px;
				background-image: linear-gradient(90deg, rgba(167, 69, 69, 0.555) 0%, transparent 70%);

			}

	/* Mentions Légales */
	#legal {
		grid-area: header;
		padding: 4em;
		background-color: #efe9f3;
		border-left: 42px solid #93a426;
	}
		#legal div h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
		}

	/* Footer */
	footer {
		grid-area: footer;
		grid-area: 7 / span 6;
		clear: both;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		align-content: start;
		grid-auto-columns: 1fr;
		grid-column-gap: 10px;
		padding: 42px 80px;
		border-top: 5px solid #7e519c;
		background-color: #2f1342;
		text-align: center;
		font-size: 0.8em;
		color: #e4d7e8;

	}
		footer div li {
			padding-left: 40%;
			list-style-type: none;
			font-size: 1.3em;
			line-height: 1;
			text-align: left;
		}
		footer div a img {
			max-width: 200px;
		}
		footer div a {
			color: #cfbeda;
			text-decoration: none;
		}
		footer div a:hover {
			color: #fff;
		}
}


/* Extra large devices (large laptops and desktops, 1280px and up) */
@media only screen and (min-width: 1280px) { 

	/* Page */
	header h2, #agence h2, #offres h2, #clients h2, #contact h2, #legal h2 {font-size: 4em; padding-left: 1em;}
	header h3, #agence h3, #offres h3, #clients h3, #contact h3, #legal h3 {font-size: 2em;}
	p:first-letter {font-size: 1.2em;}
	.w33 {float: left; padding: 10px; width: 33%;}
	.w50 {float: left; padding: 10px; width: 50%;}
	.w66 {float: left; padding: 10px; width: 66%;}
	
	/* Menu */
	#navbar {
		grid-area: menu;
		grid-area: 1 / span 6;
		overflow: hidden;
		position: fixed;
		background-color: rgba(94, 38, 131, 0.9);
		margin: 0;
		padding: 30px 10px;
		transition: 0.4s;
		width: 100%;
		top: 0;
		z-index: 99; 
	}
		#logo {
			float: left;
			margin: 0 0 0 100px;
			width: 200px;
			transition: 0.4s;
		}

		#navbarRight {
			margin: 10px 100px 10px auto;
			float: right;
		}
		.navTop li {
			display: inline-block;
			list-style-type: none;
			margin-bottom: 0;
		}
			#navbarRight li a {
				padding: 12px;
				border-radius: 7px;
				color: #fff;
				text-align: center;
				text-transform: uppercase;
				text-decoration: none;
				font-size: 1.5em;
			}
			#navbarRight li a:hover {
				background-color: #492053;
				color: #fff;
				transition: 0.4s;
			}
			#navbarRight li a.active {
				background-color: #492053;
				color: #fff;
			}
			.navTop .icon {
				display: none;
			}
			


	/* Header */
	header {
		grid-area: header;
		grid-area: 2 / span 6;
		padding: 200px 0 0;
		background: url(../media/header-background-1920.jpg) 0 0,  linear-gradient(180deg, #415196 30%, #7a85b6 100%);
		background-size: cover;
		background-blend-mode: multiply;
		background-attachment: fixed;
		color: #fff;
		text-align: center;
	}
	header#page {
		padding-top: 100px;
	}
		header#accueil div {
			margin: 0 auto;
			max-width: 1440px;
			height: 63vh;
		}
		header#page div {
			margin: 0 auto;
			max-width: 1440px;
		}
			header div h1 {
				margin: 0.5em auto;
				font-size: 7em;
			}
			header div h2 {
				font-size: 4em;
			}
			
			header div p {
				float: left;
				width: 50%;
				padding: 0 0 0 7em;
				font-size: 1.8em;
				text-align: left;
			}

			header div a.CTA {
				display: inline-block;
				margin: 4em auto;
				padding: 12px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #27315a;
				color: #fff;
				text-align: center;
				text-transform: uppercase;
				text-decoration: none;
				font-size: 1.5em;
			}
			header div a.CTA:hover {
				background: #1a203c;
				box-shadow: 0 0 0 2px #5462a1;
				color: #fff;
				transition: 0.4s;
			}
			.material-symbols-outlined {
				display: block !important;
				width: 100%;
				text-align: center;
				font-size: 100px !important;
			}
				.material-symbols-outlined a {
					color: #cfbeda;
					text-decoration: none;
				}
				.material-symbols-outlined a:hover {
					color: #fff;
					text-shadow: 0 0 4px #5462a1;
					transition: 0.4s;
				}


	/* Agence */
	#agence {
		grid-area: main;
		grid-area: 3 / span 6;
		padding: 7em;
		border-left: 42px solid #93a426;		
		background: url(../media/agence-background-1920.jpg) top right, #efe9f3;
		background-size: cover;
		background-blend-mode: multiply;
		background-attachment: fixed;
	}
		#agence div {
			background-color: rgb(239, 233, 243, 0.6);
			border-radius: 7px;
			padding: 3em;
		}
		#agence div.w66 {
			min-width: 1060px;
		}
			#agence div h2 {
				border-bottom: 10px solid;
				border-image-slice: 1;
				border-width: 5px;
				border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
			}

	/* Services */
	#offres {
		grid-area: main;
		grid-area: 4 / span 6;
		padding: 7em;
		background-color: #dfd4e6;
		border-left: 42px solid #93a426;
	}
		#offres div h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
		}
		#offres div.w50 {
			width: 45%;
			margin: 100px auto 42px;
			padding: 0 0 0 50px;
/*			border-left: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(180deg, #e9e1ee 20%, transparent 80%);*/
		}
		#offres div.w50 +div {
			margin-left: 10%;
		}
		#agences {
			background: url(../media/agences.png) 42px 0 no-repeat;
			background-size: 140px;
		}
		#editeurs {
			background: url(../media/editeurs.png) 42px 0 no-repeat;
			background-size: 140px;
		}
		#revenus {
			background: url(../media/revenus.png) 42px 0 no-repeat;
			background-size: 140px;
		}
		#efficacite {
			background: url(../media/efficacite.png) 42px 0 no-repeat;
			background-size: 140px;
		}
			#offres div.w50 h3 {
				display: flex;
				padding: 0 2em 0 142px;
				min-height: 120px;
				text-align: left;
				justify-content: left;
				align-items: center;
			}
			#offres div.w50 h4 {
				padding-top: 2em;
				padding-right: 150px;
				font-size: 1.4em;
			}
			#partenaires {
				max-width: 1080px;
				margin: 2em auto;
				padding: 1em;
				background-color: rgb(239, 234, 243, 0.3);
				border-radius: 7px;
				text-align: center;
			}
				#partenaires div {
					margin: 1em auto 0;
				}
					div.logo-partenaire {
						display: inline-block;
						width: 150px;
						min-width: 150px;
						height: 100px;
						margin-top: 1em;
						justify-content: center;
						align-items: center;
					}
					#partenaires div div.logo-partenaire +div.logo-partenaire {
						margin-left: 20px;
					}
						.logo-partenaire img {
							object-fit: contain;
							max-width:150px;
							max-height: 40px;
							vertical-align: middle;
						}
						.logo-partenaire p {
							font-size: 0.9em;
						}

		#offres div ul {list-style-type: circle; font-size: 1.3em;}



	/* Clients */
	#clients {
		width: 100%;
		grid-area: main;
		grid-area: 5 / span 6;
		padding: 7em;
		background-color: #cfbeda;
		border-left: 42px solid #93a426;
		text-align: center;
		overflow: hidden;
		position: relative;
	}
		#clients h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, transparent 20%, #552276 50%, transparent 80%);
		}

		.marquee:before, .marquee:after {
			position: absolute;
			top: 0;
			width: 10rem;
			height: 100%;
			content: "";
			z-index: 1;
		}
		#clients>div {
		margin: 42px auto 0;
		mask-image: linear-gradient(
			to right,
			hsl(0 0% 0% / 0),
			hsl(0 0% 0% / 1) 5%,
			hsl(0 0% 0% / 1) 95%,
			hsl(0 0% 0% / 0)
		)
		}
		.logo-clients-editeur {
			display: flex;
			margin: 42px 0 0;
			animation: scrolling 40s linear infinite;
			gap: 10px;
		}
		.logo-clients-editeur:hover {
			animation-play-state: paused;
		}
		@keyframes scrolling {
			0% { transform: translateX(0); }
			100% { transform: translateX(calc(-1 * 160px * 25)); }
		} 

		.logo-clients-agence {
			display: flex;
			margin: 21px 0 100px;
			animation: antiscrolling 40s linear infinite;
			gap: 10px;
		}
		.logo-clients-agence:hover {
			animation-play-state: paused;
		}
		@keyframes antiscrolling {
			100% { transform: translateX(0); }
			0% { transform: translateX(calc(-1 * 160px * 12)); }
		}
			.logo-client {
				display: flex;
				flex-shrink: 0;
				width: 150px;
				min-width: 150px;
				height: 120px;
				background-color: rgb(239, 233, 243, 0.2);
				border-radius: 3px;
				justify-content: center;
				align-items: center;
			}
				.logo-client img {
					object-fit: contain;
					max-width: 120px;
					max-height: 90px;
					-webkit-filter: grayscale(0);
        			filter: grayscale(0);
				}
				.logo-client img:hover {
					-webkit-filter: grayscale(0);
        			filter: none;
				}

  		/* Témoignages */
		#slideshow-temoignage {
			position: relative;
			max-width: 1000px;
			min-height: 270px;
			margin: 42px auto 10px;
			background-color: rgb(239, 233, 243, 0.2);
			border-radius: 7px;
			text-align: left;
		}
		.temoignage {
			display: none;
			padding: 40px 80px;
		}

		.prev, .next {
			cursor: pointer;
			position: absolute;
			top: 50%;
			width: auto;
			margin-top: -30px;
			padding: 16px;
			color: #421b5c;
			font-weight: bold;
			font-size: 20px;
			border-radius: 0 7px 7px 0;
			user-select: none;
			text-decoration: none;

		}
		.next {
			position: absolute;
			right: 0;
			border-radius: 7px 0 0 7px;
		}
		.prev:hover, .next:hover {
			background-color: rgb(66, 27, 92, 0.6);
			color: white;
			}

		.dot-container {
			text-align: center;
			padding: 20px;
		}
		.dot {
			cursor: pointer;
			height: 15px;
			width: 15px;
			margin: 0 2px;
			background-color: #bbb;
			border-radius: 50%;
			display: inline-block;
			transition: background-color 0.6s ease;
		}
		.active, .dot:hover {
			background-color: #421b5c;
		}

		q {
			quotes: "“" "”" "‘" "’";
			font-style: italic;
			font-size: 1.3em;
	   }
	   	q:before {			
			content: open-quote;
			position: absolute;
			top: 0;
			font-size: 200px;
			color: rgb(66, 27, 92, 0.2);
			font-weight: bold;
		}
		q:after {
			content: none;
		}
		.auteurice {
			padding-left: 20px;
			color: #415196;
	   } 


	/* Contact */
	#contact {
		grid-area: main;
		grid-area: 6 / span 6;
		padding: 7em;
		background: url(../media/contact-background-1920.jpg) 0 0,  linear-gradient(135deg, #552276 0%, #1a203c 80%);
		background-size: cover;
		background-blend-mode: overlay;
		background-attachment: fixed;
		border-top: 5px solid #552276;
		color: white;
		}
		#contact h2 {
			margin-left: 42px;
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #fff 0%, transparent 50%);
		}
		#contact>div {
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-content: start;
			grid-auto-columns: 1fr;
			grid-column-gap: 10px;
		}
		#contact div div:first-of-type {
			padding: 3em 0 0 42px;
		}
			#contact div div img {
				margin: 0 20px -4px 10px;
			}
			#contact div div a {
				color: #cfbeda;
				text-decoration: none;
			}
			#contact div div a:hover {
				color: #fff;
			}

		form, #formResponse {
			width: 100%;
			display: none;
		}

		.champ {
			padding: 0 !important;
		}

			label.requis {
				padding-right: 15px;
				background: url(../media/asterisk.svg) top right no-repeat;
				background-size: 9px;
			}
			input[type=text], select, textarea {
				width: 100%;
				padding: 12px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #cfbeda;
				box-sizing: border-box;
				margin-top: 6px;
				margin-bottom: 16px;
				resize: vertical;
			}
			input[type=text]:focus, select:focus, textarea:focus {
				box-shadow: 0px 0px 4px 6px #5462a1;
				background-color: #fff;
				color: #1c0b27;
				transition: 0.4s;
			}	
			button[type=submit] {
				padding: 12px 20px;
				padding: 12px 20px;
				border: 1px solid #1a203c;
				border-radius: 7px;
				background-color: #27315a;
				color: white;
				cursor: pointer;
			
			}
			button[type=submit]:hover {
				background: #1a203c;
				box-shadow: 0px 0px 0px 2px #5462a1;
				color: #fff;
				transition: 0.4s;
			}
			form .error {
				display: block;
				margin: -12px 7px 16px;
				padding: 7px;
				background-image: linear-gradient(90deg, rgba(167, 69, 69, 0.555) 0%, transparent 60%);
			}

	/* Mentions Légales */
	#legal {
		grid-area: header;
		padding: 7em;
		background-color: #efe9f3;
		border-left: 42px solid #93a426;
	}
		#legal div h2 {
			border-bottom: 10px solid;
			border-image-slice: 1;
			border-width: 5px;
			border-image-source: linear-gradient(135deg, #552276 0%, transparent 80%);
		}

	/* Footer */
	footer {
		grid-area: footer;
		grid-area: 7 / span 6;
		clear: both;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		align-content: start;
		grid-auto-columns: 1fr;
		grid-column-gap: 10px;
		padding: 42px 100px;
		border-top: 5px solid #7e519c;
		background-color: #2f1342;
		text-align: center;
		font-size: 0.8em;
		color: #e4d7e8;

	}
		footer div li {
			padding-left: 40%;
			list-style-type: none;
			font-size: 1.3em;
			line-height: 1;
			text-align: left;
		}
		footer div a img {
			max-width: 200px;
		}
		footer div a {
			color: #cfbeda;
			text-decoration: none;
		}
		footer div a:hover {
			color: #fff;
		}
}