@charset "UTF-8";

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Light.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

/*--------------------------------------------------------------
Reset
--------------------------------------------------------------*/

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
legend,
hr,
h1,
h2,
h3 {
	margin: 0;
	padding: 0
}

*,
*:before,
*:after {
	box-sizing: border-box
}

img,
video,
svg {
	display: block;
	height: auto;
	max-width: 100%;
	border: 0
}

/*--------------------------------------------------------------
Vars
--------------------------------------------------------------*/

:root {
	--leading: 1rem;

	--white: #fff;
	--dark: #040832;
	--blue: #110a4f;
	--green: #099b5d;
	--orange: #ff7e6c;
	--accent: #faf5f5;
	--light_green: #ccf2d2;
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	text-rendering: optimizeSpeed;
	background: var(--white);
	color: var(--dark);
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	font-size: 1rem;
	line-height: 1.75;
	overflow-x: hidden;
	word-wrap: break-word;
}

body.menu-open {
	overflow: hidden;
}

a {
	color: inherit;
	text-underline-offset: .25em;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
}

a:hover,
a:focus {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

*+ :is(figure, h1, h2, h3, p, ul, ol, blockquote, table, .btn, .grid, .faq),
p+div {
	margin-top: 1.75em
}

h1,
h2,
h3 {
	color: var(--blue);
	font-weight: 700;
	line-height: 1.3;
	font-size: 1.5rem;
	text-transform: uppercase;
}

h1 {
	line-height: 1
}

h3 {
	font-size: 1.25rem;
}

h2,
h3 {
	text-align: center;
}

nav ul,
nav ol {
	list-style: none;
	margin: 0
}

em,
address,
cite {
	font-style: italic;
	position: relative;
	vertical-align: baseline;
}

address {
	font-style: normal
}

abbr {
	text-transform: uppercase;
	letter-spacing: .05em;
}

abbr[title] {
	text-decoration: none;
	border-bottom: 1px dotted;
}

summary {
	cursor: pointer
}

sup,
sub {
	font-size: .8rem;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -.5em
}

sub {
	bottom: -.5em
}

small {
	font-size: .8rem;
}

blockquote {
	font-style: italic;
	background: var(--white);
	color: var(--dark);
	padding: 1.75rem;
	border-radius: 1.25rem;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
}

blockquote footer {
	font-style: normal;
	font-weight: 700;
	text-align: center;
	margin-top: var(--leading);
}

/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/

fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

input[type=radio],
input[type=checkbox] {
	accent-color: var(--orange);
}

input[type=date],
input[type=email],
input[type=file],
input[type=number],
input[type=tel],
input[type=text],
textarea,
select {
	background: var(--white);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--dark);
	border: 1px solid currentColor;
	border-radius: .5rem;
	padding: 1rem 1rem;
	width: 100%;
	font-family: inherit;
}

input[type=date]:focus,
input[type=email]:focus,
input[type=file]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=text]:focus,
textarea:focus,
select:focus {
	outline: 0;
	border-color: var(--orange);
	box-shadow: 0 0 6px var(--orange);
}

textarea {
	min-height: 5rem
}

label {
	display: block;
	font-weight: 200;
	width: fit-content;
	max-width: calc(100% - 2rem);
	background: var(--white);
	padding: 0 .5rem;
	transform: translate(.75rem, .75rem);
}

.field:has(input[type=date]:focus, input[type=email]:focus, input[type=file]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=text]:focus, textarea:focus, select:focus) label,
label:has(input:checked) {
	color: var(--orange)
}

.field:has(input[type=checkbox]) label,
.field:has(input[type=radio]) label {
	padding: 0;
	transform: none;
}

.field .inline {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.field+.field {
	margin-top: 1rem
}

.field span:not(.error) {
	padding-top: .75rem;
	display: block;
	font-weight: 700;
}

.field:has([required])>*:first-child::after {
	content: " *";
}

.field:has(.error) {
	color: red
}

.field:has(.error) input,
.field:has(.error) textarea {
	border-color: red;
	box-shadow: 0 0 6px red;
}

.field span.error {
	display: block;
}

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

button,
input[type=submit],
.btn {
	font-size: inherit;
	font-family: inherit;
	text-decoration: none;
	background: var(--orange);
	color: var(--white);
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	padding: .5rem 2rem;
	border-radius: 1.25rem;
	border: none;
	cursor: pointer;
	display: inline-block;
}

.btn-green {
	background: var(--green);
}

.btn-blue {
	background: var(--blue);
}

.btn-center {
	display: block;
	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.alert {
	color: red;
	margin: var(--leading) 0 3rem;
}

/*--------------------------------------------------------------
Utilities
--------------------------------------------------------------*/

@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth
	}
}

:focus:not(:focus-visible) {
	outline: 0;
}

:focus-visible {
	outline-color: gray;
	outline-offset: 5px;
	outline-width: 1px;
	outline-style: dashed;
}

::selection {
	background: var(--green);
	color: var(--white);
}

.sr,
.email {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sr:focus {
	background-color: var(--blue);
	color: var(--white);
	display: block;
	width: auto;
	height: auto;
	top: 0;
	left: 0;
	padding: .5em 1em;
	text-decoration: none;
	z-index: 9;
}

.wrapper {
	max-width: var(--width);
	padding-left: var(--leading);
	padding-right: var(--leading);
	margin-left: auto;
	margin-right: auto;
}

/* Grids */
.grid {
	display: grid
}

.grid {
	gap: var(--leading)
}

/* Text alignments */
.txt-center {
	text-align: center
}

.txt-right {
	text-align: right
}

/* Icon blocks */
.icon-block {
	aspect-ratio: 1/1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	color: var(--blue);
	text-align: center;
	padding: 1rem;
	border: 2px solid currentColor;
	border-radius: 1.25rem;
}

.icon-block .complement {
	font-size: .825rem;
	color: var(--dark);
	margin-top: 1rem
}

/* Colored backgrounds */
.bg-light_green {
	background: var(--light_green)
}

.bg-accent {
	background: var(--accent)
}

.bg-orange {
	background: var(--orange)
}

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

.bg-green {
	background: var(--green)
}

.bg-blue,
.bg-green,
.bg-orange {
	color: var(--white);
}

/* Alignments */
.items-align-center>* {
	display: flex;
	flex-direction: column;
	justify-content: center
}

/* Titles bottom border */
.parent {
	position: relative;
	width: fit-content;
	font-size: 2rem;
	line-height: 1.3;
	text-transform: uppercase;
}

h3 {
	position: relative;
}

.parent::after,
h3::after,
.header-description::after {
	content: "";
	position: absolute;
	left: 0;
	top: calc(100% + .25rem);
	width: 100%;
	height: .5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23110a4f' preserveAspectRatio='none' viewBox='0 0 302 4.03'%3E%3Cpath d='M302 3.03v1l-58.46-2.04c-59.32-.41-118.77-1.59-178 1.08L0 4.03v-1c11.85-1.07 23.67-.58 35.54-.96 79.22-2.5 158.75-3 237.97-.05 9.51.35 19.02-.13 28.49 1.01Z'/%3E%3C/svg%3E");
	background-size: 100% 100%;
}

.parent+h1 {
	margin-top: 1.5rem;
}

h3+* {
	margin-top: calc(var(--leading + 1.5rem));
}

.video {
	position: relative;
	max-width: 50rem;
	aspect-ratio: 16/9;
	margin: var(--leading) auto;
}

.video iframe {
	position: absolute;
	border: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.content .raw-images img {
	border-radius: 0;
	box-shadow: none;
}

/* Recaptcha */
.grecaptcha-badge {
	visibility: hidden;
}

/*--------------------------------------------------------------
Accordions
--------------------------------------------------------------*/

.accordion-intro {
	cursor: pointer;
}

:not(.accordion-active)>.accordion-content {
	max-height: 0;
	overflow: hidden;
	will-change: max-height;
	transition: max-height 0.25s ease-out;
	opacity: 0;
	padding: 0;
}

.accordion-active .accordion-content {
	opacity: 1;
}

.accordion+.accordion {
	margin-top: var(--leading)
}

/*--------------------------------------------------------------
Main Header
--------------------------------------------------------------*/

/* Main header container */
.main-header {
	position: relative;
	z-index: 99;
	padding: var(--leading) 0
}

.main-header .wrapper {
	display: grid;
	gap: 1rem;
	grid-template-columns: 3rem 1fr 3rem;
	grid-template-areas: ". logo toggle";
	align-items: center;
}

/* Logo
------------------------*/
.logo {
	grid-area: logo;
	border: none;
	justify-self: center;
}

.logo svg {
	height: 4rem;
}

body:has(.header-image) .logo,
.logo-white {
	filter: brightness(100);
}

/* Nav toggle
------------------------*/
.main-nav {
	grid-area: toggle;
}

.menu-toggle {
	border: none;
	border-radius: 50%;
	padding: .75rem;
	background: var(--blue);
	z-index: 2;
}

.menu-toggle svg {
	fill: var(--white);
	width: 1.5rem;
}

.menu-toggle path {
	transition: opacity .2s, transform .2s;
}

.menu-toggle[aria-expanded=true] path:nth-child(1) {
	transform: rotate(-45deg) translateX(-11px) translateY(-5px);
}

.menu-toggle[aria-expanded=true] path:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded=true] path:nth-child(3) {
	transform: rotate(45deg) translateX(4px) translateY(-6px);
}

/* Main menu
------------------------*/
.menu-container {
	position: fixed;
	background: var(--blue);
	top: 5rem;
	padding: var(--leading);
	border-radius: 1.25rem;
	/*left:var(--leading);*/
	width: calc(100% - 2 * var(--leading));
	max-width: 25rem;
	right: var(--leading);
	z-index: 99;
	opacity: 0;
	transform: scale(.5);
	transform-origin: 100% 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-y: scroll;
}

.menu-container form {
	display: flex;
	gap: .5rem;
	justify-content: center
}

.menu-container ul {
	margin: 0
}

.menu-container.active {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
}

.main-menu {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.main-menu a,
.main-menu button {
	display: block;
	width: fit-content;
	font-size: 1.25rem;
	font-weight: 700;
	border: none;
	text-decoration: none;
	color: var(--white);
}

.main-menu button {
	padding: 0;
	text-transform: none;
	background: transparent;
	display: flex;
	align-items: center;
	gap: .5rem;
	line-height: 1.75;
}

.main-menu button svg {
	height: 1rem
}

.submenu {
	display: none;
	opacity: 0;
	transition: opacity .2s ease;
}

.submenu.active {
	display: block;
	opacity: 1
}

.submenu a {
	font-size: 1rem;
	font-weight: 400;
	margin-left: var(--leading)
}

/*--------------------------------------------------------------
Page header
--------------------------------------------------------------*/

.page-header {
	position: relative;
	display: grid;
	grid-template-areas: "content";
}

.page-header>* {
	grid-area: content
}

.header-content {
	padding: var(--leading);
	margin-top: var(--leading);
}

.header-content>* {
	position: relative;
	z-index: 1
}

body:has(.header-image) .header-content {
	margin-top: calc(4rem + 3 * var(--leading));
	padding-bottom: 5rem;
	color: var(--white);
	align-self: end;
	position: relative;
	order: 1
}

body:has(.header-image) .header-content h1 {
	color: var(--white)
}

body:has(.header-image) .header-content .parent:after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' preserveAspectRatio='none' viewBox='0 0 302 4.03'%3E%3Cpath d='M302 3.03v1l-58.46-2.04c-59.32-.41-118.77-1.59-178 1.08L0 4.03v-1c11.85-1.07 23.67-.58 35.54-.96 79.22-2.5 158.75-3 237.97-.05 9.51.35 19.02-.13 28.49 1.01Z'/%3E%3C/svg%3E");
}

body:has(.header-image) .main-header {
	color: var(--white);
	position: absolute;
	width: 100%;
}

body:has(.header-image) .main-menu {
	color: var(-white);
}

body:has(.header-image) .page-header:before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background: linear-gradient(300deg, transparent, var(--dark));
}

body:has(.header-image) .header-image {
	width: 100%;
	height: 100%;
	object-fit: cover
}

/*--------------------------------------------------------------
Main content
--------------------------------------------------------------*/

.content {
	margin: 0 auto
}

.content>div {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.content h2 {
	font-weight: 400;
}

.content h2 span {
	font-weight: 700;
	color: var(--green);
	display: block;
}

.bg-blue h2,
.bg-blue h2 span,
.bg-green h2,
.bg-green h2 span {
	color: var(--white)
}

.content h2,
.content h3,
.content h4,
.content p,
.content blockquote,
.content ul,
.content ol,
.content .faq {
	max-width: 35rem;
	margin-inline: auto
}

.content img {
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
	border-radius: 1.25rem;
}

.content ul {
	padding-left: 2.75rem
}

.content li::marker {
	color: var(--green)
}

/*--------------------------------------------------------------
Main footer
--------------------------------------------------------------*/

.main-footer {
	margin-top: auto;
	background: var(--blue);
	color: var(--white);
	text-align: center;
	padding: 3rem 0
}

.main-footer .footer-logo {
	margin-inline: auto;
	max-width: 12rem;
}

.social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--leading);
	margin-top: 3rem;
}

.social a {
	text-decoration: none;
	padding: .5rem;
	color: var(--blue);
	background: var(--white);
	border-radius: 50%;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.social a:hover,
.social a:focus {
	background: var(--orange);
	color: var(--white);
}

/*--------------------------------------------------------------
Home page
--------------------------------------------------------------*/

body:has(.header-image) .home-header .header-content {
	margin-bottom: calc(3.5 * var(--leading));
	align-self: center;
}

.home-header {
	min-height: 100vh;
	overflow: hidden;
}

.home-header .header-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-header h1 {
	font-weight: 400;
}

.home-header h1 span {
	display: block;
	font-weight: 700;
	text-transform: none;
}

.home-header .header-description {
	width: fit-content;
	position: relative;
	font-size: 1.3rem;
	margin: var(--leading) 0 5rem
}

.header-description::after {
	filter: brightness(100);
}

.home-header-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--leading);
}

.home-header-links a {
	aspect-ratio: 1/1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 1.25rem;
	text-decoration: none;
}

.home-header-links a:hover,
.home-header-links a:focus {
	background: var(--orange);
}

.home-header-links a svg {
	width: 3rem;
	height: 3rem;
	fill: currentColor;
}

.home-intro .grid {
	align-items: center;
}

.home-intro h2 {
	font-size: 3rem;
	text-align: left;
}

.home-agencies .grid {
	align-items: center;
}

.home-agencies .col-4:first-child {
	grid-column-end: span 5;
}

.home-agencies .col-4:nth-child(2) {
	grid-column-end: span 3;
}

.home-agencies p:not(.btn-block) {
	font-size: 1.25rem;
	text-align: center;
}

.home-agencies img {
	border-radius: 0;
	padding-inline: 3rem;
	box-shadow: none;
	/*margin-top: -6rem;
	margin-bottom:-2rem;*/
}

.home-figures .figure {
	max-width: 10rem;
	margin-inline: auto;
}

.home-figures .figure span {
	display: flex;
	aspect-ratio: 1/1;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 1rem;
	outline-offset: 1rem;
}

.home-figures .figure-green span {
	background: var(--green);
	outline: 3px solid var(--light_green);
}

.home-figures .figure-blue span {
	background: var(--blue);
	outline: 3px solid var(--blue);
}

.home-figures .figure-orange span {
	background: var(--orange);
	outline: 3px solid var(--orange);
}

.home-figures .figure p {
	text-align: center;
	font-weight: 700;
	margin-top: 2rem;
}

.home-figures .figure-green p {
	color: var(--green);
}

.home-figures .figure-blue p {
	color: var(--blue);
}

.home-figures .figure-orange p {
	color: var(--orange);
}

.home-action svg {
	max-width: 30rem
}

.home-action h2 {
	font-size: 3rem;
}

.home-action h3 {
	margin-bottom: 3rem;
}

.partners-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	margin-top: 3rem;
}

.partner {
	width: 40%;
	text-decoration: none;
}

.partner.premium {
	width: calc(80% + 3rem);
	display: grid;
	gap: var(--leading);
	grid-template-columns: 1fr 4fr;
	margin-bottom: 3rem;
}

.partner img {
	box-shadow: none;
	border-radius: 0;
	margin-inline: auto;
	max-width: 20rem;
	width: 100%;
}

/*--------------------------------------------------------------
Partners page
--------------------------------------------------------------*/

.partners-category+.partners-category {
	margin-top: 5rem;
}

/*--------------------------------------------------------------
Agency page
--------------------------------------------------------------*/

.referents {
	text-align: center;
}

.referents h3:after {
	content: none
}

.referents p {
	margin: 0
}

.agency-infos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	padding: var(--leading);
	background: var(--accent);
	border-radius: 1.25rem;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
	text-align: center;
}

.agency-infos h2 {
	font-size: 1.15rem;
	text-transform: none;
}

.agency-infos h2 span {
	text-transform: uppercase;
	font-size: 1.5rem;
}

.agency-infos strong {
	display: block
}

.register-buttons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.register-buttons .btn {
	margin: 0
}

.table {
	overflow-x: auto
}

.table-filter {
	margin-top: var(--leading);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 3rem;
	align-items: center;

}

.table-filter button {
	color: var(--blue);
	padding: 0;
	background: transparent;
	position: relative;
}

.table-filter button[aria-expanded=true]:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -.5rem;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var(--green);
}

table {
	margin-top: var(--leading);
	border-collapse: collapse;
	width: fit-content;
	min-width: 30rem;
	margin-inline: auto;
}

th {
	display: none
}

td {
	padding: 1rem;
	text-align: right;
}

td:first-child {
	text-align: left;
}

tbody tr {
	border-bottom: 1px solid var(--orange)
}

/*--------------------------------------------------------------
Register page
--------------------------------------------------------------*/

.register-form {
	max-width: 35rem;
	margin-inline: auto;
}

.register-form .accordion-intro {
	width: 100%;
	background: var(--accent);
	border-radius: 3rem;
	color: var(--orange);
	position: relative;
	padding: .5rem 1rem;
	font-weight: 700;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
	display: grid;
	grid-template-columns: auto 2.5rem;
	gap: 1rem;
	align-items: center;
}

.register-form .accordion-intro:after {
	content: '';
	width: 2.5rem;
	height: 2.5rem;
	text-align: center;
	border-radius: 50%;
	color: var(--white);
	background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 48 48'%3E%3Cpath d='m25.8 13.72 8.48 8.48L14.48 42H6v-8.49l19.8-19.8zm2.83-2.83 4.24-4.25a2 2 0 0 1 2.83 0l5.66 5.66a2 2 0 0 1 0 2.83l-4.25 4.24z'/%3E%3C/svg%3E") 50% 50%;
	background-size: 75% 75%;
}

.register-form .accordion-active .accordion-intro {
	background: var(--light_green);
	color: var(--green);
}

.register-form .accordion-active .accordion-intro::after {
	background-color: var(--green);
}

.register-form .accordion-active .accordion-content {
	margin: var(--leading) 0
}

.register-form [type=submit] {
	margin-top: var(--leading);
}

/*--------------------------------------------------------------
Offers
--------------------------------------------------------------*/

.offers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3rem;
	margin-top: 3rem;
}

.offer {
	--offer-color: var(--blue);
	text-align: center;
	max-width: 25rem;
	border: 3px solid var(--offer-color);
	border-radius: 1.25rem;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
	overflow: hidden;
}

.offer:nth-child(2),
.offer-convivialite {
	--offer-color: var(--green)
}

.offer .offer-name {
	padding: 1rem var(--leading) 1.75rem;
	background: var(--offer-color);
}

.offer h3 {
	width: fit-content;
	margin-inline: auto;
	color: var(--white)
}

.offer h3:after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' preserveAspectRatio='none' viewBox='0 0 302 4.03'%3E%3Cpath d='M302 3.03v1l-58.46-2.04c-59.32-.41-118.77-1.59-178 1.08L0 4.03v-1c11.85-1.07 23.67-.58 35.54-.96 79.22-2.5 158.75-3 237.97-.05 9.51.35 19.02-.13 28.49 1.01Z'/%3E%3C/svg%3E");
}

.offer-content {
	padding: var(--leading);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--leading);
}

.offer-description {
	color: var(--offer-color);
}

.offer-price {
	border: 2px solid var(--orange);
	border-radius: 1.25rem;
	padding: 3rem;
}

.offer-price strong {
	font-size: 2rem;
	line-height: 1;
	display: block
}

.offer-price small {
	font-size: 1rem;
}

.offer .btn {
	margin: 0
}

/*--------------------------------------------------------------
Testimonials
--------------------------------------------------------------*/

.testimonials {
	position: relative;
	overflow: clip;
}

.testimonials:before {
	content: "«";
	font-weight: 700;
	line-height: .25;
	font-size: 60rem;
	position: absolute;
	top: 3rem;
	left: 3rem;
	opacity: .05;
	z-index: 0;
}

.testimonials:after {
	content: "»";
	font-weight: 700;
	line-height: .25;
	font-size: 60rem;
	position: absolute;
	bottom: 8rem;
	right: 3rem;
	opacity: .05;
	z-index: 0;
}

.testimonials>* {
	position: relative;
	z-index: 1;
}

.testimonials-list {
	display: flex;
	flex-direction: column;
	gap: var(--leading);
}

.testimony {
	background: var(--accent);
	color: var(--dark);
	border-radius: 4rem;
	padding: 2rem;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
	transform: scale(.95);
	transition: transform .3s ease;
}

.testimony.accordion-active {
	transform: scale(1);
}

.testimony-intro,
.testimony-content {
	position: relative;
	display: grid;
	gap: var(--leading);
	align-items: center;
	grid-template-columns: 6rem 1fr 4rem;
	grid-template-areas: "photo name button";
}

.testimony-content {
	padding-top: var(--leading);
}

.testimony img {
	width: 6rem;
	border-radius: 50%;
	box-shadow: none;
	grid-area: photo;
}

.testimony .author {
	margin: 0 auto;
	font-weight: 700;
	font-size: 1.25rem;
	grid-area: name;
}

.testimony-content blockquote {
	grid-column: 2/4;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	padding: 0;
}

.testimony .accordion-intro:after {
	content: '+';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 2rem;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	font-size: 1.75rem;
	text-align: center;
	border-radius: 50%;
	color: var(--white);
	background: var(--green);
}

.testimony.accordion-active .accordion-intro:after {
	content: '-';
}

.testimony .accordion-active .accordion-content {
	margin-top: -1.5rem
}

/*--------------------------------------------------------------
Testimonials page
--------------------------------------------------------------*/

.testimonials-grid {
	padding: 3rem 0;
}

.testimonials-grid .grid {
	align-items: start;
}

.filters {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 3rem;
}

.filters a {
	padding: .5rem 1rem;
	text-decoration: none;
	border: 2px solid var(--orange);
	color: var(--orange);
	border-radius: 1.5rem;
}

.filters a:hover,
.filters a:focus,
.filters a.active {
	background: var(--orange);
	color: var(--white);
}

/*--------------------------------------------------------------
Missions
--------------------------------------------------------------*/

.mission {
	background: var(--accent);
	color: var(--dark);
	border-radius: 4rem;
	padding: 1rem;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
	display: grid;
	gap: var(--leading);
	align-items: center;
}

.mission img {
	width: 100%;
	max-width: 10rem;
	margin-inline: auto;
	border-radius: 50%;
	box-shadow: none;
}

.mission-content {
	/*font-size: 1.25rem;*/
	text-align: center;
}

@media (min-width: 42rem) {
	.mission {
		grid-template-columns: 1fr 2fr;
	}

	.mission img {
		max-width: none;
	}
}

/*--------------------------------------------------------------
FAQ page
--------------------------------------------------------------*/

.faq-item+.faq-item {
	border-top: 1px solid var(--orange);
	margin-top: 0
}

.faq .accordion-intro {
	position: relative;
	display: grid;
	gap: var(--leading);
	align-items: center;
	padding: 1rem 0;
	grid-template-columns: 1fr 2rem;
}

.faq .accordion-intro:after {
	content: '+';
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	font-size: 1.75rem;
	text-align: center;
	border-radius: 50%;
	color: var(--white);
	background: var(--orange);
}

.faq .accordion-active .accordion-intro {
	font-weight: 700;
}

.faq .accordion-active .accordion-intro:after {
	content: '-';
}

.faq .accordion-active .accordion-content {
	padding: 1rem 0
}

/*--------------------------------------------------------------
Actus
--------------------------------------------------------------*/

.actus {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.actu {
	border-radius: 1.25rem;
	overflow: hidden;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
}

.actu img {
	border-radius: 0;
	box-shadow: none;
}

.actu-content {
	padding: var(--leading);
	text-align: center;
}

.actu time {
	color: var(--orange);
	font-weight: 200;
}

.actu h2 {
	margin-top: 0;
	text-transform: none;
	font-weight: 700;
	margin-bottom: var(--leading);
	font-size: 1.25rem;
}

.actu .btn {
	display: block;
	margin-top: var(--leading);
}

/*--------------------------------------------------------------
Pagination
--------------------------------------------------------------*/

.pagination {
	margin-top: 3rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.pagination a,
.pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--orange);
	border: 2px solid var(--orange);
	border-radius: 50%;
	text-decoration: none;
}

.pagination span,
.pagination a:hover,
.pagination a:focus {
	background: var(--orange);
	color: var(--white);
}

/*--------------------------------------------------------------
Contact page
--------------------------------------------------------------*/

.contact-card {
	background: var(--accent);
	border-radius: 1.25rem;
	padding: var(--leading);
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
	text-align: center;
}

.contact-item {
	margin-top: var(--leading)
}

.contact-item>* {
	display: block
}

.contact-item strong {
	text-transform: uppercase;
}

.form-row+.form-row {
	margin-top: var(--leading)
}

.contact-form label {
	color: var(--white);
	background: var(--green);
}

.contact-form input[type="email"],
.contact-form input[type="text"],
.contact-form textarea {
	border-color: var(--white);
	color: var(--white);
	background: transparent;
}

/*--------------------------------------------------------------
Donation page
--------------------------------------------------------------*/

.donation section {
	border: 3px solid var(--blue);
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
	padding: var(--leading);
	border-radius: 0 0 1.25rem 1.25rem;
}

.don-options {
	display: flex;
	justify-content: center;
	margin-top: var(--leading);
}

.don-options button {
	border-radius: 0;
	background: transparent;
	border: 1px solid var(--orange);
	color: var(--orange);
	padding: .5rem 1rem;
}

.don-options button.selected,
.don-options button:hover,
.don-options button:focus {
	background: var(--orange);
	color: var(--white);
}

.don-options button:first-child {
	border-top-left-radius: 1.25rem;
	border-bottom-left-radius: 1.25rem;
}

.don-options button:last-child {
	border-top-right-radius: 1.25rem;
	border-bottom-right-radius: 1.25rem;
}

.don-options button+button {
	margin-left: -1px;
}

.don-form .grid, .don-form .field + .field{margin-top:0}

.donation{margin-top:var(--leading)}
.don-tabs {
	display: flex;
	gap:1rem;
}

.don-tabs .tab {
	flex: 1;
	padding: .5rem;
	border: 3px solid #f2f2ff;
	border-bottom:none;
	background: #f2f2ff;
	color:var(--blue);
	text-align: center;
	cursor: pointer;
	font-weight: 500;
	border-radius: 1.25rem 1.25rem 0 0;
	position:relative;
}

.don-tabs .tab.active {
	border-color:var(--blue);
	background: var(--white);
	color: var(--blue);
}
.don-tabs .tab.active:after{
	content:"";
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--white);
}

.don-tab-content {
	display: none;
	text-align: center;
}

.don-tab-content.active {
	display: block;
}
#don .success-message {
	margin-top: var(--leading);
	padding: var(--leading);
	border-radius: 1.25rem;
	text-align: center;
	font-weight: 700;
}

/*--------------------------------------------------------------
404 page
--------------------------------------------------------------*/

.content-404 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--leading);
	padding: 3rem 0;
}

/*--------------------------------------------------------------
Page special blocks (intro, footer)
--------------------------------------------------------------*/

.page-intro p:not(.btn-block),
.page-footer p:not(.btn-block) {
	text-align: center;
	font-size: 1.25rem;
}

.page-intro p,
.page-footer p {
	max-width: 50rem;
}

/*--------------------------------------------------------------
Slider
--------------------------------------------------------------*/

.tns-outer {
	padding: 0 !important
}

.tns-outer [hidden] {
	display: none !important
}

.tns-outer [aria-controls],
.tns-outer [data-action] {
	cursor: pointer
}

.tns-slider {
	-webkit-transition: all 0s;
	-moz-transition: all 0s;
	transition: all 0s
}

.tns-slider>.tns-item {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.tns-horizontal.tns-subpixel {
	white-space: nowrap
}

.tns-horizontal.tns-subpixel>.tns-item {
	display: inline-block;
	vertical-align: top;
	white-space: normal
}

.tns-horizontal.tns-no-subpixel:after {
	content: '';
	display: table;
	clear: both
}

.tns-horizontal.tns-no-subpixel>.tns-item {
	float: left
}

.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item {
	margin-right: -100%
}

.tns-no-calc {
	position: relative;
	left: 0
}

.tns-gallery {
	position: relative;
	left: 0;
	min-height: 1px
}

.tns-gallery>.tns-item {
	position: absolute;
	left: -100%;
	-webkit-transition: transform 0s, opacity 0s;
	-moz-transition: transform 0s, opacity 0s;
	transition: transform 0s, opacity 0s
}

.tns-gallery>.tns-slide-active {
	position: relative;
	left: auto !important
}

.tns-gallery>.tns-moving {
	-webkit-transition: all 0.25s;
	-moz-transition: all 0.25s;
	transition: all 0.25s
}

.tns-autowidth {
	display: inline-block
}

.tns-lazy-img {
	-webkit-transition: opacity 0.6s;
	-moz-transition: opacity 0.6s;
	transition: opacity 0.6s;
	opacity: 0.6
}

.tns-lazy-img.tns-complete {
	opacity: 1
}

.tns-ah {
	-webkit-transition: height 0s;
	-moz-transition: height 0s;
	transition: height 0s
}

.tns-ovh {
	overflow: hidden
}

.tns-visually-hidden {
	position: absolute;
	left: -10000em
}

.tns-transparent {
	opacity: 0;
	visibility: hidden
}

.tns-fadeIn {
	opacity: 1;
	filter: alpha(opacity=100);
	z-index: 0
}

.tns-normal,
.tns-fadeOut {
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: -1
}

.tns-vpfix {
	white-space: nowrap
}

.tns-vpfix>div,
.tns-vpfix>li {
	display: inline-block
}

.tns-t-subp2 {
	margin: 0 auto;
	width: 310px;
	position: relative;
	height: 10px;
	overflow: hidden
}

.tns-t-ct {
	width: 2333.3333333%;
	width: -webkit-calc(100% * 70 / 3);
	width: -moz-calc(100% * 70 / 3);
	width: calc(100% * 70 / 3);
	position: absolute;
	right: 0
}

.tns-t-ct:after {
	content: '';
	display: table;
	clear: both
}

.tns-t-ct>div {
	width: 1.4285714%;
	width: -webkit-calc(100% / 70);
	width: -moz-calc(100% / 70);
	width: calc(100% / 70);
	height: 10px;
	float: left
}

.slider {
	margin-top: var(--leading)
}

.tns-nav {
	display: flex;
	justify-content: center;
	gap: .75rem;
	margin-top: var(--leading);
}

.tns-nav button {
	padding: 0;
	background: var(--accent);
	border-radius: 50%;
	width: 1rem;
	height: 1rem;
}

.tns-nav button.tns-nav-active {
	background: var(--orange);
}

.tns-item {
	transition: transform .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.tns-item:not(.fully-visible) {
	transform: scale(.9);
}

/*--------------------------------------------------------------
Media queries
--------------------------------------------------------------*/

@media (min-width:62rem) {

	:root {
		--leading: 1.75rem;
		--width: 80rem;
	}

	/* Typography */
	/*h1{font-size: 3.75rem}
	h2{font-size: 2.5rem}*/

	/* Grids */
	.grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 3rem
	}

	.col-3 {
		grid-column-end: span 3
	}

	.col-4 {
		grid-column-end: span 4
	}

	.col-5 {
		grid-column-end: span 5
	}

	.col-6 {
		grid-column-end: span 6
	}

	.col-7 {
		grid-column-end: span 7
	}

	.col-8 {
		grid-column-end: span 8
	}

	.col-12 {
		grid-column-end: span 12
	}

	.gap-l {
		gap: 5rem
	}

	.align-center {
		align-items: center
	}

	.align-end {
		align-items: end
	}

	.align-start {
		align-items: start
	}

	h1,
	h2 {
		font-size: 2rem;
	}

	/* Main footer */
	.main-footer {
		text-align: left;
		padding: 5rem 0;
	}

	.main-footer .wrapper {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-template-areas: "logo nav" "newsletter newsletter" "credits credits";
		gap: var(--leading) 8vw;
	}

	.footer-logo {
		grid-area: logo
	}

	.footer-nav {
		grid-area: nav
	}

	.newsletter {
		grid-area: newsletter
	}

	.credits {
		grid-area: credits;
		justify-self: end;
	}

	.main-footer .footer-logo {
		max-width: 18rem;
		margin-inline: 0;
	}

	.footer-logo svg {
		width: 100%
	}

	.footer-menu {
		margin: 0
	}

	/* Home page */
	.home-header h1 {
		font-size: 3rem;
	}

	.home-header .header-description {
		font-size: 2rem;
	}

	.home-header-content {
		max-width: 40rem;
	}

	.home-header-links {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.missions-slider {
		margin-bottom: var(--leading);
	}

	.partner {
		width: 19%;
	}

	.partner.premium {
		width: calc(76% + 9rem);
	}

	/* Agencies page */
	#agencies-select {
		display: none
	}

	.agencies-list .agency-infos {
		grid-column-end: span 4;
	}

	/* Agency page */
	.single-agency-infos {
		margin-top: calc(5.2rem + var(--leading));
	}

}

@media (min-width:110rem) {

	/* Main header */
	.main-header {
		padding-top: 3rem;
	}

	.main-header .wrapper {
		/*position: relative;*/
		display: flex;
		justify-content: space-between;
	}

	.logo svg {
		height: 5rem
	}

	.menu-toggle {
		display: none;
	}

	.menu-container {
		max-width: none;
		width: auto;
		pointer-events: auto;
		visibility: visible;
		position: static;
		top: 0;
		height: auto;
		opacity: 1;
		flex-direction: row;
		align-items: center;
		background: transparent;
		transform: none;
		overflow: visible;
		gap: 3rem;
		padding: 0;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: baseline;
	}

	.donner {
		position: absolute;
		right: var(--leading);
		margin: 0;
	}

	.main-menu {
		flex-direction: row;
		gap: 1.5rem;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-end
	}

	.has-submenu {
		position: relative
	}

	.main-menu a,
	.main-menu button {
		position: relative;
	}

	.main-menu a,
	.main-menu button {
		color: var(--blue)
	}

	body:has(.header-image) .main-header a,
	body:has(.header-image) .main-header button {
		color: var(--white);
	}

	.main-menu button {
		margin: 0
	}

	.main-menu a:after,
	.main-menu button:after,
	.main-menu a.active:after,
	.main-menu button.active:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -.25rem;
		width: 100%;
		height: 4px;
		border-radius: 2px;
		background: var(--green);
		transform: scaleX(0);
		transition: transform .2s ease-out;
	}

	.main-menu a.active:after,
	.main-menu button.active:after {
		transform: scaleX(1)
	}

	.main-menu a:hover:after,
	.main-menu a:focus:after,
	.main-menu button:hover:after,
	.main-menu button:focus:after {
		transform: scaleX(1)
	}

	.submenu {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 1rem 2rem;
		width: max-content;
		box-shadow: 0 1px 15px rgba(0, 0, 0, .15);
		position: absolute;
		z-index: 1;
		top: calc(100% + 1.25rem);
		left: -2rem;
		transform: scaleY(0);
		transform-origin: top;
		background: var(--white);
		border-radius: 1.25rem;
		transition: transform .3s ease, opacity .3s ease
	}

	.submenu.active {
		display: flex;
		opacity: 1;
		transform: scaleY(1)
	}

	.submenu a {
		color: var(--dark) !important;
		margin-left: 0
	}

	.submenu a:after {
		height: 1px
	}

	/* Agencies page */
	.agencies-list .agency-infos {
		grid-column-end: span 3;
	}

}

/* --------------------------------------------------------------
BREVO
-------------------------------------------------------------- */

@media (min-width: 62rem) {
	.sib-form {
		grid-column-end: span 2;
	}
}

.input--hidden {
	display: none;
}

.sib-form-message-panel {
	display: none;
	padding: 1rem;
	margin-bottom: 1rem;
}

.sib-form-message-panel--active {
	display: block;
}

.sib-form-message-panel__text {
	display: flex;
}

.sib-notification__icon {
	width: 1.5rem;
	height: 1.5rem;
	margin-right: .5rem;
	fill: currentColor;
}

.form__label-row {
	margin: 1rem 0;
}

#sib-form {
	margin: 3rem auto;
}

@media (min-width: 62rem) {

	#sib-form,
	.form__label-row {
		margin: 0;
		display: flex;
		gap: 1rem;
		align-items: center;
		justify-content: flex-end;
	}
}

.sib-form label {
	background: transparent;
	transform: none;
	max-width: none;
	width: auto;
	font-weight: 700;
	text-transform: uppercase;
}

.sib-form input[type="text"] {
	border-radius: 1.25rem;
	padding: .5rem 2rem;
	line-height: 1.5;
}

.sib-form-block__button-with-loader {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.sib-form .progress-indicator__icon {
	width: 1.5rem;
	height: 1.5rem;
	;
	animation: indicator-spin 1.3s cubic-bezier(0.46, 0.35, 0.39, 0.85) infinite;
	display: none;
}

@keyframes indicator-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

/*--------------------------------------------------------------
Popup Modal
--------------------------------------------------------------*/

.popup-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.popup-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(4, 8, 50, 0.8);
	backdrop-filter: blur(4px);
}

.popup-content {
	position: relative;
	background: var(--white);
	max-width: 500px;
	margin: 5rem auto;
	padding: 2rem;
	border-radius: 1rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	animation: popupSlideIn 0.3s ease-out;
}

@keyframes popupSlideIn {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.popup-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	font-size: 2rem;
	line-height: 1;
	color: var(--dark);
	cursor: pointer;
	padding: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}

.popup-close:hover {
	transform: scale(1.2);
}

.popup-content h2 {
	color: var(--blue);
	margin-bottom: 1rem;
}

.popup-content p {
	margin-bottom: 1.5rem;
	color: var(--dark);
}

.checkbox-group {
	margin-bottom: 1rem;
}

.checkbox-group label {
	display: flex;
	align-items: flex-start;
	cursor: pointer;
	gap: 0.75rem;
}

.checkbox-group input[type="checkbox"] {
	margin-top: 0.25rem;
	width: 1.25rem;
	height: 1.25rem;
	cursor: pointer;
	flex-shrink: 0;
}

.checkbox-group span {
	flex: 1;
	line-height: 1.5;
}

#form-inscription-jeune .btn {
	width: 100%;
	margin-top: 1rem;
}

@media (max-width: 600px) {
	.popup-content {
		margin: 2rem 1rem;
		padding: 1.5rem;
	}
}