/*
Theme Name: Kydoc
Theme URI: https://orvalis.fr
Description: 100% fait main
Author: Orvalis
Author url: https://orvalis.fr
Tags: one-column, right-sidebar, left-sidebar, custom-header, custom-menu, featured-images, featured-image-header, full-width-template, flexible-header, theme-options, sticky-post, threaded-comments, translation-ready, rtl-language-support, custom-background
*/
	@font-face {
		font-family: 'ubuntu_titlingbold';
		src: url('fonts/UbuntuTitling-Bold-webfont.woff') format('woff'), url('fonts/UbuntuTitling-Bold-webfont.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}
	@import url(https://use.typekit.net/gqc1aou.css);
	* {
		position: relative;
		box-sizing: border-box;
	}
	html {
		scroll-behavior: smooth;
	}
	:root {
		--color-dark-blue: #003F8E;
		--color-medium-blue: #3FA8EF;
		--color-blue: #99C9FA;
		--color-light-blue: #DFEDFD;
		--color-yellow: #FFC000;
		--color-light-yellow: #FAEFCC;
		--color-grey-light: #E6E6E6;
		--gap: 16px;
		--wrap: 90%;
		--font-size: 14px;
	}
	@media only screen and (min-width: 600px) {
		:root {
			--wrap: 90%;
		}
	}
	@media only screen and (min-width: 768px) {
		:root {
			--wrap: 90%;
			--font-size: 16px;
		}
	}
	@media only screen and (min-width: 1024px) {
		:root {
			--gap: 20px;
			--wrap: 950px;
		}
		body {
			font-size: 18px;
		}
	}
	@media only screen and (min-width: 1280px) {
		:root {
			--gap: 24px;
			--wrap: 1188px;
			--font-size: 18px;
		}
	}
	@media only screen and (min-width: 1600px) {
		:root {
			--gap: 30px;
			--wrap: 1364px;
			--font-size: 20px;
		}
	}
	body {
		background-color: #FFF;
		font-size: var(--font-size);
		/*font-family: franklin-gothic-condensed, sans-serif;*/
		padding: 0;
		/*font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";*/
		font-family: 'Montserrat', sans-serif;
	}
	h1, h2, h3, h4, h5, h6 {
		font-family: ubuntu_titlingbold;
	}
	h2 {
		font-size: 1.5em;
		text-transform: uppercase;
		color: var(--color-dark-blue);
	}
	h2::after {
		content: '';
		height: calc(var(--gap)/4);
		width: calc(4*var(--gap));
		background-color: var(--color-green-dark);
		position: absolute;
		bottom: calc(-1 * var(--gap)/2);
		left: 0;
		z-index: 2;
	}
	h3 {
		font-size: 1em;
	}
	strong {
		color: var(--color-yellow);
	}
	#qui strong {
		color: inherit;
	}
	section p, .legal p {
		text-align: justify;
	}
	@media (min-width: 768px) {
		h2 {
			font-size: 2.4em;
			text-transform: uppercase;
			line-height: 1;
			margin-bottom: calc(var(--gap)/2);
		}
		h3 {
			font-size: 1.44em;
		}
	}
	@media (min-width: 1024px) {
		h2 {}
		h3 {}
	}
	ul {
		padding: 0;
	}
	div#primary {
		padding-top: 120px;
	}
	@media only screen and (min-width: 768px) {
		div#primary {
			padding-top: 110px;
		}
	}
	/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
	/* Remove a bit of margin since Bootstrap h1-h3 tags already have 22px top margin */
	hr {
		margin: 16px 0; /*22px 0;*/
	}
	/*--------------------------------------------------------------
# Forms and Buttons
--------------------------------------------------------------*/
	/* 
 * Generically set input buttons to look like Bootstrap, but set colors below that to make
 * it easier for users to override. Match Bootstrap btn-primary styles.
 */
	button:hover, button:focus, html input[type="button"]:hover, html input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus {
		outline: 0;
	}
	/* Set colors for input buttons (Search, Reply). Change these in your child theme. */
	button, html input[type="button"], input[type="submit"] {
		color: #fff;
		background-color: #1abc9c;
		border-color: #1abc9c;
	}
	button:hover, button:focus, html input[type="button"]:hover, html input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus {
		color: #fff;
		background-color: #16a085;
		border-color: #16a085;
	}
	/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
	/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
	/*
 * Generically style the links here. Set colors below to make it easier for users to 
 * override.
 */
	a {
		word-wrap: break-word;
		-webkit-transition: color .1s ease-in, background .1s ease-in;
		-moz-transition: color .1s ease-in, background .1s ease-in;
		-ms-transition: color .1s ease-in, background .1s ease-in;
		-o-transition: color .1s ease-in, background .1s ease-in;
		transition: color .1s ease-in, background .1s ease-in;
	}
	a:hover, a:focus {
		text-decoration: none;
		outline: 0;
	}
	a:before, a:after, a:hover i:before, a:focus i:before {
		-webkit-transition: color .1s ease-in, background .1s ease-in;
		-moz-transition: color .1s ease-in, background .1s ease-in;
		-ms-transition: color .1s ease-in, background .1s ease-in;
		-o-transition: color .1s ease-in, background .1s ease-in;
		transition: color .1s ease-in, background .1s ease-in;
	}
	/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
	.trigger-menu-wrapper {
		transition: transform 0.4s;
	}
	.scroll-down .trigger-menu-wrapper {
		transform: translate3d(0, -100%, 0);
	}
	.scroll-down .lottie-wrapper {
		background: var(--darkgray);
	}
	.scroll-up .trigger-menu-wrapper {
		transform: none;
	}
	.scroll-up:not(.menu-open) .trigger-menu-wrapper {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
	}
	.trigger-menu-wrapper > .wrap {
		display: flex;
		width: 100%;
		flex-direction: column;
		height: auto;
		margin: 0 auto;
		background-color: #FFF;
	}
	.site-header .menu {
		text-align: center;
		overflow: auto;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 30px
	}
	#site-navigation {
		position: absolute;
		right: 0;
		flex: none;
	}
	@media only screen and (max-width: 767px) {
		.menu-main-menu-container, .nav-menu {
			
		}
		.navbar-header button {
			position: fixed;
			right: var(--gap);
			top: var(--gap);
			padding: 10px;
			border: none;
			height: 40px;
			width: 40px;
			font-size: 1.5em;
			z-index: 10000;
			display: block;
			aspect-ratio: 1/1;
			background-color: transparent;
			background-image: url("illustrations/bouton-menu.svg");
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center;
		}
		.navbar-header button.toggled-on {
			background-image: url("illustrations/bouton-fermer.svg");
			
		}
		.menu-main-menu-container, .nav-menu {
			opacity: 1;
			top: -160px;
			height: fit-content;
			width: 100vw;
			background-color: #FFF;
			left: 0;
			position: fixed;	
			z-index: -1;
			transition: all .4s ease-out;
			
		}
		.menu-main-menu-container.toggled-on, .nav-menu.toggled-on {
			top: 60px;
			filter: drop-shadow(0px 17px 12px rgba(0, 0, 0, 0.2));
		}
		.menu-main-menu-container ul, .nav-menu ul {
			padding: 0;
		}
	}
	@media only screen and (min-width: 768px) {
		.navbar-header {
			display: none;
		}
	}
	div.navbar-collapse {
		width: 100vw;
		max-width: 100%;
		margin: 0 calc(-1 * var(--gap));
		background-color: var(--color-bg-body);
		margin-top: var(--gap);
		box-shadow: 2px 16px 30px -17px #000
	}
	.navbar-default .navbar-toggle, .navbar-default .navbar-toggle:hover {
		margin-top: calc(var(--gap) + 5px);
		margin-right: 0;
		background-color: var(--color-bg-body)
	}
	.navbar-collapse.collapse .menu-main-menu-container li {
		margin-bottom: calc(var(--gap)/ 2) !important;
		transition: all .6s ease;
		flex: 1
	}
	.navbar-nav li a {
    text-align: center;
    width: 100%;
    height: 100%;
    color: var(--color-dark-blue);
    font-size: 1.6em;
    /* line-height: var(--gap); */
    align-content: center;
    /* display: flex; */
    /* align-items: center; */
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    padding: calc(var(--gap)/1) 0 calc(var(--gap)/2) 0;
	font-size: var(--font-size);
	}
	.trigger-menu-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		justify-content: center;
		padding: 0;
		z-index: 2;
		background: #FFF;
		transition: transform .4s;
		display: flex
	}
	.navbar-default .container {
		width: auto !important;
		flex: 1
	}
	@media (min-width:768px) {
		div.navbar-collapse {
			margin-top: 0
		}
		.navbar-nav {
			margin: 0;
			width: 100%;
			height: 60px;
			display: flex;
			flex-direction: row
		}
		.navbar-nav li {
			flex: 1;
			float: none
		}
		#site-navigation {
			bottom: 0
		}
	}
	@media (min-width:992px) {
		#site-branding {
			margin: 0
		}
		.trigger-menu-wrapper {
			height: fit-content;
		}
		.trigger-menu-wrapper > .wrap {
			flex-direction: row;
			align-items: center;
			justify-content: space-between
		}
		#site-navigation {
			position: relative;
			right: auto;
			white-space: nowrap;
			flex: 1;
		}
		.menu-main-menu-container > ul {
			display: flex;
			justify-content: center;
			padding-left: 50px;
		}
		ul#menu-main-menu-2 {
			padding-left: 0;
			align-items: center;
		}
		ul#menu-main-menu-2 li {
			flex: 1;
		}
		div.navbar-collapse {
			width: auto;
			margin: var(--gap);
		}
		.menu-main-menu-container li {
			height: 100%
		}
		div.navbar-collapse {
			box-shadow: none
		}
	}
	.am__col-3 .am_grid_col, .menu-main-menu-container li, .wp-block-columns > .wp-block-column, nav li, .posts-container .flex-column {
		border: none;
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
	}
	.menu-main-menu-container li, nav li {
		padding: 0
	}
	.am__col-3 .am_grid_col:nth-child(3n), .main-header-menu > .menu-item:last-child, body:not(.blog) section.altern .wp-block-columns:nth-child(even) > .wp-block-column:last-child, body:not(.blog) section.altern .wp-block-columns:nth-child(odd) > .wp-block-column:first-child, body:not(.blog) section:not(.altern) .wp-block-columns .wp-block-column:last-child, nav li:last-child, .posts-container .flex-column:nth-child(even) {
		border-right: none !important;
	}
	@media (min-width:768px) {
		.wp-block-columns {
			flex-direction: row
		}
		.am__col-3 .am_grid_col, .menu-main-menu-container li, .wp-block-columns > .wp-block-column, nav li, .posts-container .flex-column {
			border-right: thin solid var(--color-light-grey);
			padding-right: var(--gap);
			padding-left: var(--gap);
			margin-bottom: calc(2 * var(--gap))
		}
		.am__col-3 .am_grid_col, .menu-main-menu-container li, .wp-block-columns > .wp-block-column, nav li, .posts-container .flex-column {
			margin-bottom: 0
		}
	}
	.menu-main-menu-container li {
		text-align: center
	}
	/* Since we lightened the body font, make the site title regular font weight */
	/* 
 * Line up the navbar with the header and page content (it's in a container, but not a
 * row) 
 */
	/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
	blockquote {
		padding: 11px 22px;
		margin: 0 0 22px;
		font-size: 40px;
		border-left: 5px solid #3E6C61;
		max-width: 900px;
		line-height: 1;
		font-style: italic;
		color: #FFF;
	}
	li {
		list-style-position: inside;
	}
	.fullwidth {
		width: 100vw;
	}
	.wrap {
		max-width: var(--wrap);
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.has-large-font-size {
		font-size: 1.4em;
	}
	/* PÄGES */
	#pourquoi {
		background-image: linear-gradient(-185deg, #2B8BC1 30%, var(--color-dark-blue)), url(illustrations/paperasse.svg);
		background-position: 0px 0px;
		background-size: 100%, 80%;
		background-repeat: no-repeat;
		box-shadow: inset 0px 0px 17px 8px rgb(0 0 0 / 25%);
		width: 102vw;
		left: -1vw;
		color: #FFF;
	}
	#pourquoi > div {
		padding-bottom: calc(var(--gap)*2);
	}
	#pourquoi h2 {
		color: var(--color-light-blue);
	}
	#pourquoi .has-text-align-center {
		font-size: 2.4em;
		max-width: var(--wrap);
		display: block;
		margin: 0 auto;
		font-family: ubuntu_titlingbold;
		color: #FFF;
	}
	#solution {
		/*background-color: var(--color-dark-blue);*/
		background: linear-gradient(#FFF, var(--color-blue));
	}
	#solution .wp-block-media-text {
		box-sizing: border-box;
		direction: inherit;
		background-color: #FFF;
	}
	@media only screen and (min-width: 768px) {
		#pourquoi figure {
			width: 100%;
			height: 100%;
			position: absolute;
		}
		#pourquoi figure img {
			height: 100%;
			width: auto;
		}
		#pourquoi figure + div {
			padding: calc(14*var(--gap)) 0 0;
		}
		#solution .wp-block-media-text {
			display: block;
		}
	}
	@media only screen and (min-width: 1020px) {
		#pourquoi .has-text-align-center {
			max-width: 800px;
		}
	}
	#solution blockquote.wp-block-quote {
		border: none;
		font-style: normal;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
		font-size: 0.7em;
		color: var(--color-dark-blue);
	}
	#solution blockquote.wp-block-quote p {
		padding: 0;
		margin: 5px 0;
	}
	#solution figure {
		width: 60%;
		margin: var(--gap) auto 0;
	}
	section#vote > div > div {
		background-color: #FFF;
		padding: calc(var(--gap)*2);
		filter: drop-shadow(1px 8px 5px rgb(0 0 0 / 40%));
	}
	#vote img {
		width: 100%;
	}
	#vote figure {}
	#vote .wp-block-columns .wp-block-group__inner-container {
		align-items: center;
		flex: 1;
		justify-content: center;
	}
	#vote .wp-block-columns figure {
		flex: 1;
		filter: saturate(0);
		transition: all 0.4s ease;
		height: 90px;
		/* object-fit: contain; */
		display: flex;
		align-items: center;
		justify-content: center;
		padding: calc(var(--gap)/2);
	}
	#vote .wp-block-columns figure:hover {
		filter: saturate(1);
	}
	#vote .wp-block-columns figure a {
		width: 100%;
		height: 100%;
		/* text-align: center; */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#vote .wp-block-columns figure img {
		max-width: 100%;
		object-fit: contain;
		max-height: 100%;
		height: auto;
		width: auto;
	}
	/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
	#page, body {
		width: 100vw;
		overflow-x: hidden;
		padding: 0;
		margin: 0;
	}
	/* Set content (page title) header to midnight blue */
	.content-header {
		color: #fff;
	}
	.site-branding .container {
		position: relative;
	}
	header .logo {
		position: absolute;
		top: 30px;
		left: 0px;
	}
	/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
	footer .wp-block-media-text.is-stacked-on-mobile {
		display: flex;
		margin-bottom: calc(var(--gap)/2);
	}
	footer .wp-block-media-text.is-stacked-on-mobile img {
		width: 60px;
	}
	footer .wp-block-media-text .wp-block-media-text__content {
		padding: 0 calc(var(--gap)/2);
	}
	footer .wp-block-media-text .wp-block-media-text__content p {
		margin: 0;
	}
	footer#colophon ul {
		line-height: 1.2;
		display: flex;
		gap: var(--gap);
		margin: var(--gap) auto;
		width: fit-content;
	}
	footer#colophon ul a {
		color: var(--color-yellow);
	}
	/*
.card {
  max-width: 500px;
  margin: auto;
  height: auto;
  position: relative;
  color: #fff;
  transition: transform 0.1s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.card::before {
  content: "";
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.card:hover img {
  transform: translateZ(12px);
}
.card img {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}
*/
	/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
	div#xsbf-entry-content {
		display: flex;
		flex-direction: column;
	}
	.wp-block-image {
		margin: 0;
	}
	.wp-block-image:not(.is-style-rounded) > a, .wp-block-image:not(.is-style-rounded) img {
		border-radius: 0;
	}
	/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
	/*--------------------------------------------------------------
## Plugins
--------------------------------------------------------------*/
	/* Format Jetpack contact form with Bootstrap's form-control tag. */
	.willappear:not(.appeared):not(.camembert), .willappear:not(.camembert) .willappear:not(.appeared) {
		opacity: 0;
		transform: translateY(100px);
		transition: all 1.6s ease-out;
	}
	.appeared:not(.camembert), .appeared:not(.camembert) .appeared {
		opacity: 1;
		transform: translateY(0);
		transition: all 1.6s ease;
	}
	#solution .willappear + .willappear {
		transition-delay: 0.4s;
	}
	#solution .willappear:nth-child(3) {
		transition-delay: .8s;
	}
	#solution .willappear:nth-child(4) {
		transition-delay: 1.2s;
	}
	#solution .willappear:nth-child(5) {
		transition-delay: 1.6s;
	}
	#solution .willappear:nth-child(6) {
		transition-delay: 2s;
	}
	/* RAJOUTS ES */
	/* ACCUEIL */
	/* slider */
	/*.site-title,
		.site-description {*/
	.site-branding {}
	.wp-block-columns {
		gap: var(--gap);
		margin-bottom: 0;
	}
	.grid-2 > div, .grid-3 > div, .grid-4 > div, .grid-5 > div {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: calc(var(--gap)/2);
	}
	@media only screen and (min-width: 768px) {
		.grid-2 > div, .grid-3 > div, .grid-4 > div, .grid-5 > div {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: calc(var(--gap)/2);
		}
		.grid-3 > div {
			grid-template-columns: repeat(2, 1fr);
		}
		.grid-4 > div {
			grid-template-columns: repeat(3, 1fr);
		}
		.grid-5 > div {
			grid-template-columns: repeat(4, 1fr);
		}
	}
	@media only screen and (min-width: 1024px) {
		.grid-3 > div {
			grid-template-columns: repeat(3, 1fr);
		}
		.grid-4 > div {
			grid-template-columns: repeat(4, 1fr);
		}
		.grid-5 > div {
			grid-template-columns: repeat(5, 1fr);
		}
	}
	#page > div > .content-header {
		padding-bottom: 0;
	}
	#page > div > .content-header .container {
		padding-left: 260px;
		min-height: 200px;
		margin: 0 auto;
		position: relative;
	}
	#page > div > .content-header .container h1 {
		font-size: 1.6em;
		text-align: right;
		position: absolute;
		bottom: 10px;
		width: calc(100% - 270px);
		font-weight: bold;
		max-width: 500px;
		right: 20px;
	}
	.site-header {
		z-index: 10000;
		max-width: var(--wrap);
		margin: 0 auto;
	}
	#site-branding {
		position: relative;
		max-width: 190px;
		margin: 0;
	}
	.custom-header-image {
		height: auto;
		padding: 10px;
	}
	.custom-header-image img {
		width: 100%;
		height: auto;
		max-width: 60vw;
	}
	@media (min-width: 768px) {}
	@media (min-width: 1024px) {
		#site-branding {
			position: relative;
			max-width: 180px;
			margin: 0 0 0 auto;
		}
		.custom-header-image {
			height: fit-content;
		}
		.custom-header-image img {
			width: 100%;
			height: auto;
		}
	}
	div#header-widget {
		width: 100%;
	}
	div#header-widget h3 {
		text-align: center;
		color: #FFF;
	}
	div#header-widget a {
		font-size: 1em !important;
	}
	footer#colophon {
		background-color: var(--color-dark-blue);
		color: var(--color-light-blue);
	}
	footer#colophon a {
		color: inherit;
		text-decoration: none;
	}
	footer .coordonnees {
		width: fit-content;
		margin: auto;
	}
	footer#colophon ul {
		line-height: 1.2;
	}
	footer#colophon::before {
		top: 10px;
		width: 100vw;
		height: auto;
		position: absolute;
		aspect-ratio: initial;
		transform: translateY(-100%);
	}
	#header-widget-area {
		padding: var(--gap);
		gap: calc(var(--gap)/4);
		width: 100vw;
		margin: 0 auto;
	}
	@media only screen and (min-width: 1024px) {
		#header-widget-area {
			max-width: var(--wrap);
		}
	}
	#header-widget-area > * {
		padding: var(--gap);
	}
	footer#colophon aside .wp-block-columns > .wp-block-column {
		justify-content: flex-start;
	}
	footer#colophon aside > .wp-block-columns {
		gap: calc(var(--gap)*4);
	}
	footer .wp-block-column > p {
		display: none;
	}
	footer#colophon h2 {
		color: var(--color-green-medium);
	}
	footer#colophon h2::after {
		background-color: var(--color-high);
	}
	footer#colophon aside > .wp-block-columns img {
		margin: 0 auto;
		display: block;
	}
	footer#colophon a {
		color: inherit;
		text-decoration: none;
		line-height: 1.2;
		transition: color 0.6s ease;
	}
	footer#colophon a::after {
		content: '';
		height: 1px;
		position: absolute;
		bottom: 0;
		width: 0;
		left: 0;
		background-color: var(--color-high);
		transition: width 0.3s ease;
	}
	footer#colophon a:hover {
		width: 100%;
		color: #FFF;
		background-color: transparent;
	}
	footer#colophon a:hover::after {
		width: 100%;
		color: #FFF;
	}
	#site-credits {
		margin: 0 auto;
		width: fit-content;
		text-align: center;
		padding-bottom: var(--gap);
	}
	#site-credits img {
		width: 80px;
	}
	#sidebar-pagebottom {
		display: none;
	}
	.container {
		margin: 0 auto;
	}
	.cc-window {
		z-index: 9999;
	}
	#cmplz-document {
		color: #FFF;
		font-size: 1em
	}
	#cmplz-document a {
		color: #FFF;
	}
	.cmplz-cookiebanner {}
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {}
	.cmplz-btn cmplz-deny, .cmplz-btn cmplz-view-preferences {}
	#secondary {
		display: none;
	}
	.wp-block-group.col2 > * {
		column-count: 2;
		gap: var(--gap);
		max-width: 1080px;
		margin: var(--gap) auto 0;
		/* padding: var(--gap); */
	}
	.wp-block-group.col2 > * p {
		padding-top: 0;
		padding-bottom: var(--gap);
	}
	.bouton {
		margin: calc(var(--gap)*2) auto;
		padding: var(--gap);
		padding-left: 60px;
		color: var(--color-green);
		background-color: var(--color-black);
		border: thin solid var(--color-green);
		display: flex;
		align-items: center;
		text-decoration: none;
		border-radius: 50px;
		padding-right: calc(2*var(--gap));
		height: 50px;
		text-transform: uppercase;
		transition: all 0.6s ease-out;
		filter: drop-shadow(1px 14px 5px rgb(0 0 0 / 40%));
		width: fit-content;
		transition: all 0.4s ease-out;
		font-size: 1em;
		line-height: 1;
	}
	.bouton a {
		color: inherit;
		text-decoration: none;
		font-weight: bold;
	}
	#cmplz-document, #legal, #main.legal {
		color: #000;
		font-size: 1em;
		max-width: none;
		column-gap: calc(4*var(--gap));
	}
	#cmplz-document a, #legal a, #main.legal a {
		color: inherit;
	}
	#main.legal h1 {
		text-align: center;
		text-transform: uppercase;
		font-size: 3em;
		color: var(--color-dark-blue);
	}
	#main.legal h2::after {
		bottom: -4px;
	}
	#cmplz-document h2, #legal h2, #main.legal h2 {
		font-size: 1.8em;
		margin-top: calc(2*var(--gap));
	}
	#main.legal h3 {
		font-size: 1.2em;
		color: var(--color-dark-blue);
	}
	.legal .polycontain, .legal + .polycontain {
		position: relative;
		bottom: 0 !important;
	}
	@media only screen and (min-width: 980px) {
		#cmplz-document, #legal {
			column-count: 2;
		}
		.legal .content {
			background-color: var(--color-light-blue);
			padding: calc(4 * var(--gap));
			margin: 0 calc(4 * var(--gap)) calc(4 * var(--gap));
		}
	}
	form > p {
		display: flex;
		grid-gap: calc(var(--gap)/4);
		flex-wrap: wrap;
	}
	form > p span.your-message, form > p input {
		grid-column-start: 1;
		grid-column-end: end
	}
	.wpcf7-form-control-wrap {
		position: relative;
		padding: 0;
		margin: 0;
		width: calc(50% - calc(var(--gap)/8));
	}
	#contact input, #contact select, #contact textarea {
		border: 1px solid var(--color-blue);
		padding: 5px;
		max-width: none !important;
	}
	input, textarea {
		color: #FFF !important;
		transition: all .3s ease;
		width: 100%;
		/*background-color: transparent !important;*/
		padding: calc(var(--gap)/ 4);
		font-family: inherit;
		font-size: 1em;
		border: 2px solid var(--color-light-blue) !important;
	}
	input:focus, input[type=submit], textarea:focus {
		color: var(--color-dark-blue) !important;
		transition: all .3s ease;
		background-color: var(--color-light-blue) !important;
	}
	.bouton a, #contact input[type="submit"] {
		display: block;
		padding: calc(var(--gap)/2);
		margin: auto;
		text-decoration: none;
		font-weight: bold;
		text-align: center;
		background-color: var(--color-yellow) !important;
		color: var(--color-dark-blue);
		box-shadow: 0px 2px 8px rgb(0 0 0 / 50%);
		transition: background-color 0.6s ease;
		/* font-family: ff-cocon-pro, sans-serif; */
		border: none !important;
		border-radius: calc(var(--gap)/2);
	}
	input[type=submit] {
		width: fit-content;
		border: thin solid;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	input[type=submit]:hover, input[type=submit]:focus {
		background-color: var(--color-high);
		color: #000;
	}
	textarea {
		height: 160px;
	}
	::placeholder {
		color: var(--color-medium-blue);
	}
	.wpcf7 input[type="url"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] {
		direction: ltr;
	}
	form > p span.your-message, form > p input {}
	span.wpcf7-spinner {
		display: none;
	}
	span[data-name='your-message'] {
		width: 100%;
	}
	#intro {
		/*background-color: var(--color-light-blue);*/
	}
	@media only screen and (max-width: 767px) {
		#intro {
			width: var(--wrap);
			margin: 0 auto;
		}
		#intro .wp-block-column:nth-child(2) {
			display: none;
		}
	}
	.polycontain {
		filter: drop-shadow(0px 11px 6px rgba(0, 0, 0, 0.2));
		z-index: 1;
		display: block;
		height: calc(100vw/16);
		width: 100%;
	}
	#intro .polycontain {
		position: absolute;
		bottom: calc(-1 * calc(100vw/16) - -1px);
	}
	.polygon {
		/* background-color: var(--color-light-blue); */
		height: 100%;
		width: 100%;
		background-color: #FFF;
		display: block;
		left: 0;
		clip-path: polygon(0% 0%, 100% 0, 100% 10%, 70% 10%, 50% 100%, 30% 10%, 0% 10%, 0% 0%);
	}
	#intro h2 {
		font-size: 2.3em;
	}
	.intro.wp-block-columns {
		gap: var(--gap);
		margin-bottom: 0;
		align-items: center !important;
		justify-content: center;
		display: flex;
		flex-direction: column-reverse;
	}
	.intro img {
		width: 100%;
	}
	#solution h3.wp-block-heading {
		padding: 0;
		margin-top: 0;
		margin-block-start: 0;
		color: var(--color-dark-blue);
	}
	#solution .grid-3 + .wp-block-columns.willappear > .wp-block-column {
		flex-direction: column;
		display: flex;
		margin: 0 auto;
		color: #FFF;
		gap: var(--gap);
		background-color: var(--color-dark-blue);
		transform: translateY(180px);
		padding: calc(var(--gap)*2) calc(var(--gap)*2) var(--gap);
		margin-top: -100px;
		z-index: 4;
		text-align: center;
		border: 2px solid var(--color-yellow)
	}
	#solution .grid-3 + .wp-block-columns.willappear > .wp-block-column p {
		padding: 0 var(--gap) calc(var(--gap)/2);
		font-size: 1.2em;
	}
	.ldBar {
		display: block;
		width: 210px !important;
		height: 210px !important;
		margin: 0 auto;
	}
	.ldBar path.baseline {
		stroke-width: 2;
		stroke: #f1f2f3;
		stroke-linecap: round;
	}
	.ldBar path.mainline {
		stroke-width: 6;
		stroke: #FFC000;
		stroke-linecap: round;
	}
	.ldBar-label {
		color: #FFF;
		font-size: 2em;
		font-weight: 100;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		text-shadow: 0 0 3px #fff;
		display: flex;
	}
	.myBar .ldBar-label:after {
		content: "min";
		display: flex;
		align-items: center;
		font-size: 0.6em;
	}
	#engagement {
		background-color: var(--color-light-blue);
		padding-top: 240px;
		padding-bottom: calc(4*var(--gap));
		z-index: -1;
	}
	@media only screen and (min-width: 768px) {
		#solution .grid-3 + .wp-block-columns.willappear > .wp-block-column {
			margin: var(--gap) auto;
			flex-direction: row;
			max-width: 1060px;
			border-radius: 80px;
		}
		#engagement .wp-block-columns.willappear {
			display: grid;
			grid-template-columns: 2fr 3fr;
		}
		#engagement .wp-block-columns.willappear + .wp-block-columns.willappear {
			direction: rtl;
		}
		#engagement .wp-block-columns.willappear + .wp-block-columns.willappear > div.wp-block-column:nth-child(2) {
			direction: initial;
			text-align: right;
		}
	}
	@media only screen and (min-width: 1024px) {
		.intro.wp-block-columns {
			justify-content: center;
			display: flex;
			flex-direction: row;
			margin-left: calc(calc(100vw - var(--wrap))/2);
		}
		.intro.wp-block-columns .xp-block-column {
			width: 50%;
		}
		.intro.wp-block-columns .wp-block-column:first-of-type {
			flex-basis: auto;
			width: calc(var(--wrap)/2);
		}
		#solution .grid-3 + .wp-block-columns.willappear > .wp-block-column {
			max-width: 1060px;
			border-radius: 180px;
		}
		#engagement > div > div {
			padding: 0 calc(4*var(--gap));
		}
	}
	#engagement > div > div figure {
		padding: calc(2*var(--gap));
	}
	section#vote {
		background: linear-gradient(var(--color-light-blue), var(--color-dark-blue));
		padding-bottom: 120px;
	}
	section#vote::before {
		content: '';
		position: absolute;
		height: 40%;
		width: 100%;
		/*background-color: var(--color-yellow);*/
	}
	@media only screen and (max-width: 600px) {
		#vote .wp-block-column > .wp-block-group.grid-4 > div {
			grid-template-columns: 1fr 1fr;
		}
	}
	#qui figure {
		/*max-height: 100%; */
		/* width: 100%; */
		padding: var(--gap) 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	section#qui .wrap {
		padding-bottom: calc(2*var(--gap)) !important;
	}
	@media only screen and (min-width: 768px) {
		#vote .wp-block-column {
			padding: 40px 0;
		}
		#qui .wp-block-image {
			height: 280px;
			align-items: center;
			display: flex;
		}
		#qui .wrap > div + div > div {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
	}
	@media only screen and (max-width: 767px) {
		#qui .wrap > div + div > div {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
		#qui .wrap > div + div > div > div {
			margin-bottom: 0;
		}
	}
	#qui figure img {
		max-height: 80%;
	}
	.has-text-align-center {
		text-align: center;
		padding: calc(var(--gap)*2) 0 var(--gap);
		color: var(--color-dark-blue);
	}
	.call a {
		background-color: var(--color-yellow);
		padding: calc(var(--gap)/2) var(--gap);
		border-radius: calc(var(--gap)/1);
		text-decoration: none;
		margin: 0 auto;
		display: block;
		width: fit-content;
		color: var(--color-dark-blue);
		filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
	}
	#contactlink {
		position: fixed !important;
		bottom: 0 !important;
		right: 0;
		z-index: 1000;
		width: fit-content;
	}
	#contactlink a {
		display: none;
		background-color: var(--color-yellow);
		padding: calc(var(--gap)/2);
		/* height: 180px; */
		display: flex;
		align-items: center;
		filter: drop-shadow(2px 11px 9px rgba(0, 0, 0, 0.5));
		font-size: 0.9em;
		color: var(--color-dark-blue);
		text-decoration: none;
		text-align: center;
		padding-top: 50px;
		border-radius: var(--gap) 0 0 var(--gap);
		max-width: 120px;
	}
	@media only screen and (min-width: 1024px) {
		#contactlink {
			top: 50% !important;
			bottom: auto;
		}
		#contactlink a {
			padding-top: 60px;
		}
	}
	#contactlink a::before {
		content: url(illustrations/enveloppe.svg);
		height: 50px;
		width: 50%;
		position: absolute;
		top: calc(var(--gap)/2);
		left: 25%;
	}