@charset "UTF-8";

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

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,legend,hr,h1,h2,h3{margin:0;padding:0}button,input,select,textarea{all:unset;box-sizing:border-box}*,*:before,*:after{box-sizing:border-box}img,video,svg{display:block;height:auto;max-width:100%;border:0}

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

:root{
	--leading:1rem;

	--white:#fff;
	--purple_dark:#3d0d60;
	--purple: #b783cb;
	--purple_light:#B783CB3E;

	--radius: 20px;
	--radius-xl: 50px;
}

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

html{
	font-size:100%;
	-webkit-text-size-adjust:100%;
}
body{
	position:relative;
	min-height: 100vh;
	text-rendering:optimizeSpeed;
	background:var(--white);
	color:var(--purple_dark);
	font-family:'Roboto',system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
	font-size:1.05rem;
	line-height:1.75;
	overflow-x:hidden;
	word-wrap: break-word;
}
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), p+div{margin-top:1.75em}
h1,h2,h3{
	font-weight:900;
	line-height:1.3;
	font-size:2.5rem;
}
h1{line-height: 1}
h2{font-size:1.25rem;}
h3{font-size:1.25rem;}
h2 strong {
	font-weight: inherit;
	color: var(--purple);
}
.bg-purple h2 strong {
	color: var(--purple_dark);
}
:not(nav,.main-menu,.join-content,.footer-content) > :is(ul,ol):not([class]), .flex-list{list-style: none}
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;
	padding-left:1.75rem;
}

hr {
	display: block;
	border: none;
	background: currentColor;
	color: currentColor;
	width: 68px;
	height:2px;
	margin: 3rem auto;
}

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

button, .btn{cursor: pointer}
.btn, .btn-alt{
	display:inline-block;
	max-width:30rem;
	text-align: center;
	font-weight: 700;
	color:var(--purple_dark);
	background: var(--white);
	box-shadow: 5px 5px 0 var(--purple_dark);
	transition: color .3s ease, background .3s ease, box-shadow .3s ease;
	padding:.5rem 1rem;
	border-radius:2rem;
	text-decoration: none;
	font-size:1.25rem
}
.btn:hover, .btn:focus {
	box-shadow: 5px 5px 0 var(--white);
	background: var(--purple_dark);
	color:var(--white);
}
.btn[type="submit"] {
	width: 100%;
	max-width: none;;
}
.btn-purple {
	background: var(--purple_dark);
	color: var(--white);
	box-shadow: 5px 5px 0 var(--purple);
}
.bg-purple-dark .btn {
	box-shadow: 5px 5px var(--purple);
}
.bg-purple-dark .btn:hover, .bg-purple-dark .btn:focus {
	background: var(--purple);
	color: var(--white);
	box-shadow: 5px 5px var(--white);
}
.btn-alt {
	box-shadow: none;
	border-radius: 15px;
	background: var(--purple_dark);
	color: var(--white);
	transition: background .3s ease;
}
.btn-alt svg {
	width: 1.5rem;
	height:1.5rem;
	padding: .25rem;
	border-radius: 50%;
	background: var(--white);
	color: var(--purple_dark);
	transition: color .3s ease;
}
.btn-alt:hover, .btn-alt:focus {
	background: var(--purple);
}
.btn-alt:hover svg, .btn-alt:focus svg {
	color: var(--purple);
}
input[type=email],input[type=tel],input[type=text],textarea,select {
	background: transparent;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--white);
	border: 2px solid currentColor;
	border-radius: .5rem;
	padding: 1rem 1rem;
	width: 100%;
	font-family: inherit;
}

input[type=email]:focus,input[type=tel]:focus,input[type=text]:focus,textarea:focus,select:focus {
	outline: 0;
	border-color: var(--purple);
}
textarea {
	min-height: 5rem
}
label {
	display: block;
	width: fit-content;
	max-width: calc(100% - 2rem);
	background: var(--purple_dark);
	padding: 0 .5rem;
	transform: translate(.75rem, .75rem);
}
.field:has(input[type=email]:focus, input[type=tel]:focus, input[type=text]:focus, textarea:focus, select:focus) label,
label:has(input:checked) {
	color: var(--purple)
}
::placeholder{
	color:var(--white);
	opacity:.8;
}

/*--------------------------------------------------------------
Images
--------------------------------------------------------------*/

img {
	border-radius: var(--radius);
}
img.cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*--------------------------------------------------------------
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(--purple_dark);
	color: var(--white);
}
.sr,.email{
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
}
.sr:focus{
	background-color:var(--purple_dark);
	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-l{gap:var(--leading)}

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

/* Sections */

section, .section {
	padding-block: 3rem;
}

/* Colors */
.bg-purple{
	background: var(--purple);
	color: var(--white);
}
.bg-purple-light{background: var(--purple_light)}
.bg-purple-dark {
	background: var(--purple_dark);
	color: var(--white);
}

/* Has icon */
.has-icon {
	display: flex;
	align-items: center;
	gap: .5rem;
}

/* Tags */
.tags {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 1rem;
}
.tags-inline {
	flex-direction: row;
}
.text-center .tags-inline {
	justify-content: center;
}
.tags li {
	border: 1px solid;
	border-radius: 1.5rem;
	padding: .625rem 1.25rem;
}
.tags .tag-purple{
	color: var(--white);
	background-color: var(--purple);
	border:none;
}
.tags .tag-purple-dark{
	color: var(--white);
	background-color: var(--purple_dark);
	border:none;
}

/* Lead */
.lead {
	font-size: 1.25rem;
	font-weight: 900;
}

/* Centered inside */
.center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.center-left {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Spacing */
.m-b {
	margin-block: var(--leading);
}
.m-b-l {
	margin-block: 5rem;
}
.p-b {
	padding-block: 3rem;
}

/*--------------------------------------------------------------
Various blocks
--------------------------------------------------------------*/

.rounded {
	border-radius: 25px;
	padding: var(--leading);
}

.big-list {
	list-style: none;
	padding: 0;
}
.big-list li {
	border: 2px solid var(--purple_dark);
	border-radius: 25px;
	padding: var(--leading);
}
.big-list li + li {
	margin-top: var(--leading);
}
.big-list h3 + * {
	margin-top: 1rem;
}

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

/* Main header container */
.main-header{
	position:absolute;
	inset:0 0 auto 0;
	z-index: 999;
	color: var(--white);
	padding:var(--leading) 0;
}
.main-header .wrapper{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;	
}
/* Logo
------------------------*/
.logo{
	text-decoration: none;
	font-size:1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	display:flex;
	gap:1rem;
	align-items: center;
}
.logo svg{
	height: 3.5rem;
	width: auto;
}

/* Nav toggle
------------------------*/
.menu-toggle{
	border:none;
	display:inline-flex;
	align-items: center;
	position: relative;
	font-variant: small-caps;
	font-weight: 700;
	font-size:.825rem;
	z-index: 2;
	background: var(--white);
	padding:.75rem;
	border-radius:50%;
}
.menu-toggle svg{
	fill:var(--purple_dark);
	width:1.4rem;
}
.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{
	background: var(--purple_dark);
	position:absolute;
	top:100%;
	left:0;
	right:0;
	z-index:99;
	padding:var(--leading);
	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;
	text-align: 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;
	align-items: flex-start;
}
.main-menu li {
	padding: 0;
	border: none;
}
.main-menu a, .main-menu button{
	text-decoration: none;
	display: inline-block;
	padding: .5rem 1rem;
	border: 1px solid transparent;
	border-radius: 5rem;
}
.main-menu button {
	background: transparent;
	display: flex;
	align-items: center;
	gap: .5rem;
	line-height: 1.75;
}
.main-menu button svg {
	height: 1rem
}
.main-menu a:hover, .main-menu a:focus, .main-menu a.active, .main-menu button:hover, .main-menu button:focus, .main-menu button.active{
	border-color: currentColor;
}
.menu-contact a{
	background: var(--white);
	border-color:var(--white);
	color: var(--purple_dark);
}
.menu-contact a:hover, .menu-contact a:focus {
	background: var(--purple_dark);
	color: var(--white);
}

.submenu {
	display: none;
}

.submenu.active {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.submenu a {
	padding: .25rem 0;
	margin-left: 3rem;
}
.submenu a:hover, .submenu a:focus, .submenu a.active {
	border: none;
	text-decoration: underline;
}

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

.main{
	position: relative;
	margin-top:calc(0px - var(--radius));
	padding:calc(3rem + var(--radius)) 0;
}

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

.page-header {
	padding-block:calc(3.5rem + 2 * var(--leading)) 4rem;
	background: var(--purple_dark);
	color:var(--white);
}
.page-header h1 {
	text-align: center;
	margin-block: 2.875rem 1.875rem;
}
.page-header img {
	opacity: .3;
	border-radius: 0;
}
.image-header {
	padding-block: 0;
	display: grid;
}
.image-header > * {
	grid-area: 1/1;
}
.image-header .header-content {
	padding-top: calc(3.5rem + 2 * var(--leading));
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	text-align: center;
	font-size: 1.25rem;
}
.header-buttons {
	display: flex;
	justify-content: center;
	gap: var(--leading);
}
.header-buttons > *{
	margin:0;
}

/*--------------------------------------------------------------
Join section
--------------------------------------------------------------*/

.join-content {
	position: relative;
}
.join-logo {
	background: var(--purple_dark);
	padding: 1rem;
	border-radius: 50%;
	position: absolute;
	top: 44%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.join-logo svg {
	width: 2.5rem;
	height:2.5rem;
}
.join-content ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	max-width: 25rem;
	margin-inline: auto;
}
.join-content li {
	border: 1px solid var(--purple_dark);
	border-radius: 20px;
	padding: var(--leading);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.join-action {
	margin-top: var(--leading);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--leading);
}

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

.main-footer {
	background: linear-gradient(var(--purple_dark), var(--purple));
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	padding-block:var(--leading);
}
.footer-content {
	display: grid;
	gap: 3rem var(--leading);
	color: var(--white);
}
.footer-content ul {
	list-style: none;
}
.footer-content a{
	text-decoration: none;
}
.footer-content a:hover, .footer-content a:focus {
	text-decoration: underline;
}
.footer-logo {
	max-width: 10rem;
}
.colophon {
	background: var(--white);
	color: #000;
	font-size: .825rem;
	text-align: center;
	padding: var(--leading);
	margin-top: var(--leading);
	border-radius: 20px;
}
.european-logo {
	margin-inline: auto;
}

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

.home-header .header-content {
	padding-bottom: 12rem;
}
.home-header img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-intro {
	border-radius: var(--radius-xl);
	background: var(--white);
	color: var(--purple_dark);
	margin-top: -12rem;
	position: relative;
	padding: 3rem;
	margin-bottom: 5rem;
}
.home-intro .lead strong {color: var(--purple)}
.home-partners-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}
.home-partners-list li {
	background: var(--white);
	width: 170px;
	height:115px;
	padding: 1rem;
	border-radius: 10px;
}
.home-partners-list li img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.timeline {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3rem;
	align-items: center;
	margin-bottom: 3rem;
}
.timeline li {
	text-align: center;
	border: 1px solid;
	border-radius: 1.5rem;
	padding: .625rem 1.25rem;
	max-width: 20rem;
	position: relative;
}
.timeline li + li:before {
	position: absolute;
	content: '';
	width: 2rem;
	height: 2rem;
	top: -1.5rem;
	left: 50%;
	transform: translate(-50%, -50%) rotate(90deg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%233d0d60'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5' /%3E%3C/svg%3E%0A");
}
.timeline strong {
	font-size: 1.25rem;
	color: var(--purple_dark);
}

/*--------------------------------------------------------------
Work packages page
--------------------------------------------------------------*/

.work-package {
	overflow: hidden;
}
.work-package img {
	margin: calc(0px - var(--leading)) calc(0px - var(--leading)) 0;
	width: calc(100% + 2 * var(--leading));
	max-width: none;
	border-radius: var(--radius) var(--radius) 0 0;
}

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

.partners{margin-block: 5rem}
.partner + .partner {
	margin-top: 3rem;
}
.partner {
	padding: var(--leading);
	border-radius: var(--radius);
	border: 1px solid var(--purple_dark);
}
.partners h2 {
	font-size: 1.875rem;
}
.partners .location {
	margin-top: .5rem;
	font-size: 1.875rem;
	font-weight: 400;
	line-height: 1;
}

/*--------------------------------------------------------------
Resources page
--------------------------------------------------------------*/

.resources {
	margin-block: 5rem;
}

/*--------------------------------------------------------------
Actions
--------------------------------------------------------------*/

.actions-content > .grid > div {
	border-radius: var(--radius);
	padding: var(--leading);
	border: 1px solid var(--white);
}

/*--------------------------------------------------------------
News / Events
--------------------------------------------------------------*/

.posts {
	padding-block: 3rem;
}
.post {
	margin-block: 3rem;
}
.meta p {
	display: flex;
	gap: .5rem;
	align-items: center;
}
.meta p svg {
	width: 1.25em;
	height: 1.25em;
}
.text-center .meta p {
	justify-content: center;
}
.meta p + p {
	margin-top: .5rem;
}
.post .meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	margin-block: 1rem;
}
.post .meta p + p {
	margin-top: 0;
}
.post h2 {
	margin-top: 1rem;
}
.post h2 a {
	text-decoration: none;
}
.post h2 a:hover, .post h2 a:focus {
	text-decoration: underline;
}

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

.contact-form {
	max-width: 900px;
	margin-inline: auto;
}
.social {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
}
.social svg {
	width: 2rem;
	height: 2rem;
}

/*--------------------------------------------------------------
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)
}

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

.faq {
	max-width: 40rem;
	margin-inline: auto;

}
.faq-item+.faq-item {
	border-top: 1px solid var(--purple);
	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(--purple);
}

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

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

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

/*--------------------------------------------------------------
Chiffres clés
--------------------------------------------------------------*/

.key-figures {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.key-figure {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid;
	border-radius: 1.5rem;
	padding: .625rem 1.25rem;
}
.key-figure > *:last-child {
	font-size: 1.5rem;
	color: var(--purple_dark)
}

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

@media (min-width:62rem){

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

	section, .section {
		padding-block: 5rem;
	}

	/* Typography */
	h1{font-size: 5rem}
	h2{font-size: 1.6rem}

	/* Utilities */

	/* 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-9{grid-column-end: span 9}
	.col-12{grid-column-end: span 12}

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

	/* Main header */
	.main-header .wrapper{
		position: relative;
		display: grid;
		grid-template-columns: 5rem 1fr 5rem;
	}
	.logo svg {
		height: 4.7rem;
	}
	.menu-toggle{display:none;}
	.main-nav {
		display: flex;
		justify-content: center;
	}
	.menu-container{
		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
	}
	.main-menu{
		flex-direction: row;
		gap:1.5rem;
		align-items:center;
		flex-wrap: wrap;
		justify-content: flex-end;
		padding: 1rem;
		border: 1px solid var(--white);
		border-radius: 5rem;
	}

	.has-submenu {
		position: relative
	}

	.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% + .25rem);
		left: 50%;
		transform: translateX(-50%) scaleY(0);
		transform-origin: top;
		background: var(--purple);
		border-radius: 1.25rem;
		transition: transform .3s ease, opacity .3s ease
	}
	.submenu.active {
		display: flex;
		opacity: 1;
		transform: translateX(-50%) scaleY(1)
	}
	.submenu a{
		border: none;
		margin-left: 0;
	}


	/* Main content */

	/* Main footer */
	.main-footer {
		padding-block: 5rem var(--leading);
	}
	.footer-content {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	/* Home page */
	.timeline {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
	}
	.timeline li {
		max-width: 15rem;
	}
	.timeline li + li:before {
		top:50%;
		left: -1.5rem;
		transform: translate(-50%, -50%);
	}

}