@charset "UTF-8";

@font-face {
	font-family: 'DinPro';
	src: url('../fonts/DINPro.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DinPro';
	src: url('../fonts/DINPro-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DinPro Condensed';
	src: url('../fonts/DINPro-CondensedRegular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DinPro Condensed';
	src: url('../fonts/DINPro-CondensedBold.woff2') format('woff2');
	font-weight: 700;
	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}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;

	--radius:1rem;

	--white:#fff;
	--blue:#6a81b5;
	--orange:#f2745d;
	--red:#d15952;
	--yellow:#e09737;
	--green:#549dad;
	--dark_blue:#0a2248;
	--pink:#f9aa91;

	--font_default: 'DinPro',system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
	--font_heading: 'DinPro Condensed',system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}

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

html{
	font-size:100%;
	-webkit-text-size-adjust:100%;
}
body{
	position:relative;
	min-height: 100vh;
	text-rendering:optimizeSpeed;
	background:var(--orange);
	color:var(--white);
	font-family:var(--font_default);
	font-size:1rem;
	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-family: var(--font_heading);
	font-weight:700;
	text-transform: uppercase;
	line-height:1.3;
	font-size:2.75rem;
}
h1{line-height: 1}
h2{font-size:2rem}
h3{font-size:1.25rem;}
:not(nav):not(.main-menu) > :is(ul,ol):not([class]), .flex-list{list-style: none}
:not(nav):not(.main-menu) > :is(ul,ol):not([class]) li, .flex-list li{
	color:var(--light_blue);
	padding:.25rem 1rem;
	border:1px solid currentColor;
	border-radius:1.25rem;
}
:not(nav):not(.main-menu) > :is(ul,ol):not([class]) li + li{margin-top:1rem}
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;
}

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

button, .btn{cursor: pointer}
.btn{
	font-family: var(--font_heading);
	display:block;
	margin-inline:auto;
	width:100%;
	max-width:30rem;
	text-align: center;
	font-weight: 700;
	color:var(--white);
	background: var(--red);
	padding:.5rem 1rem;
	text-transform: uppercase;
	border-radius:1.5rem;
	text-decoration: none;
	font-size:1.25rem
}
input[type="checkbox"]{
	width: 1rem;
	height: 1rem;
	border: 2px solid currentColor;
	display: inline-block;
	vertical-align: sub;
	margin-right: .5rem;
}
input[type="checkbox"]:checked{
	background:currentColor;
}
.btn-green{background: var(--green);}
.btn-blue{background: var(--blue)}
.btn-orange{background: var(--orange)}
.btn-yellow{background: var(--yellow)}
.btn-dark_blue{background: var(--dark_blue)}
.btn-pink{background: var(--pink)}
input,textarea{
	border:none;
	border-bottom:2px solid var(--white);
	padding:.25rem 0;
	font-family: inherit;
	color:var(--white);
	width:100%
}
::placeholder{
	color:var(--white);
	opacity:.8;
}

/*--------------------------------------------------------------
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(--white);
	color:var(--blue);
}
.sr,.email{
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
}
.sr:focus{
	background-color:var(--red);
	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 */
.txt-center{text-align: center}
.txt-right{text-align: right}

/* Colors */
.bg-yellow{background: var(--yellow)}
.bg-blue{background: var(--blue)}
.bg-orange{background: var(--orange)}
.bg-red{background: var(--red)}
.bg-green{background: var(--green)}
.bg-dark_blue{background: var(--dark_blue)}
.bg-pink{background: var(--pink)}

/* Tags */
.tag{
	display: inline-block;
	padding:.25rem .5rem;
	color:var(--white);
}
.tag-yellow{background: var(--yellow)}
.tag-blue{background: var(--blue)}
.tag-orange{background: var(--orange)}
.tag-red{background: var(--red)}
.tag-green{background: var(--green)}
.tag-dark_blue{background: var(--dark_blue)}
.tag-pink{background: var(--pink)}

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

.accordion-intro {
	position: relative;
	cursor: pointer;
	padding:var(--leading) 0;
	display: grid;
	grid-template-columns: auto 1.5rem;
	gap: 1rem;
	align-items: center;
}
.accordion-intro:after{
	content: '';
	width:1.5rem;
	height:1.5rem;
	text-align: center;
	border-radius: 50%;
	color: var(--white);
	background: #6A81B5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14m-7-7h14'/%3E%3C/svg%3E");
}
.accordion-active .accordion-intro:after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.bg-green .accordion-intro:after{
	background-color: var(--yellow);
}
: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;
	padding:0 0 var(--leading);
}

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

/* Main header container */
.main-header{
	position:relative;
	z-index: 999;
	background: var(--orange);
	position:relative;
	padding:var(--leading) 0;
	border-radius:0 0 var(--radius) var(--radius)
}
.main-header .wrapper{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;	
}
/* Logo
------------------------*/
.logo{
	text-decoration: none;
	font-size:1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	display:flex;
	gap:1rem;
	align-items: center;
}
.logo img{
	max-width: 5rem;
}

/* 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: transparent
}
.menu-toggle svg{
	fill:var(--white);
	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(--orange);
	position:absolute;
	top:calc(100% - var(--radius));
	left:0;
	right:0;
	z-index:99;
	padding:calc(var(--radius) + var(--leading)) var(--leading) 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;
}
.main-menu a{
	text-decoration: none;
	font-weight: 700;
}
.main-menu a:hover, .main-menu a:focus, .main-menu a.active{
	text-decoration: underline;
}

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

.main{
	position: relative;
	background: var(--green);
	margin-top:calc(0px - var(--radius));
	padding:calc(3rem + var(--radius)) 0;
}
.content > * {margin-inline:max(var(--leading), calc((100% - 50rem) / 2))}

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

.main-footer{
	position:relative;
	z-index: 100;
	background: var(--orange);
	border-radius: var(--radius) var(--radius) 0 0;
	margin-top:-3rem;
	padding:3rem 0
}
.main-footer .wrapper{
	display:flex;
	flex-direction: column;
	gap:3rem
}
.main-footer blockquote{
	padding:0;
	font-size:1.75rem;
	font-weight: 700;
	font-style: normal;
	font-family: var(--font_heading);
	text-transform: uppercase;
}
.main-footer .dgsc{
	margin-top: var(--leading);
	max-width:25rem;
}
.footer-contact > *{display:block}
.footer-contact strong{
	font-family: var(--font_heading);
	font-size:1.25rem;
	text-transform: uppercase;
}
.footer-contact p{margin-top:.5rem}
.footer-contact a{
	text-decoration: none;
}
.footer-contact a:hover, .footer-contact a:focus{text-decoration: underline}
.credits{margin-top:3rem;}

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

.home-header{
	position:relative;
	margin-top:calc(-3rem - var(--radius));
	padding-top:calc(3rem + var(--radius));
	padding-bottom:calc(3rem + var(--radius) + 3rem);
	background: var(--dark_blue) url(/assets/img/header.jpg) no-repeat center bottom;
	background-size: max(100%,90rem) auto;
}
.home-header .wrapper{max-width:30rem}

.home-nav{
	position:relative;
	z-index: 25;
	padding-bottom:var(--leading);
}
.home-nav-item{
	max-width:30rem;
	margin-inline: auto;
	text-align: center;
	padding:2rem;
	border-radius:var(--radius);
	display: flex;
	flex-direction: column;
	gap:var(--leading);
}
.home-nav-item:first-child{margin-top:-3rem;}
.home-nav-item h2{font-size:1.25rem}
.home-nav-item p{margin-top:0}
.home-nav-item svg{
	max-width: 8rem;
	margin-inline: auto;
}
.home-nav-item .btn{
	margin-top:auto;
	margin-bottom: var(--leading);
}

.home-suitcases{
	position:relative;
	z-index:20;
	padding-top:calc(var(--radius) + var(--leading));
	padding-bottom:calc(var(--radius) + var(--leading));
	border-radius:0 0 var(--radius) var(--radius);
}
.suitcases{
	margin-top:3rem;
	border-top:2px solid var(--white)
}
.suitcases > *{border-bottom:2px solid var(--white)}

.grid.home-actus-events{
	margin-top:calc(0px - var(--radius));
	position: relative;
	z-index: 15;
	gap:0;
}
.home-actus-events h2{margin-bottom:3rem}
.home-actus, .home-events{
	padding-top:calc(var(--radius) + 5rem);
	padding-bottom:5rem;
	border-radius:0 0 var(--radius) var(--radius);
}
.home-actus-events .date{
	margin:0;
}
.home-actus article + article{margin-top:var(--leading)}
.home-actus header{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom:.5rem
}
.home-events article{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding:1rem 0;
}
.home-events article + article{
	border-top:2px solid var(--yellow);
}

.contact{
	border-radius:0 0 var(--radius) var(--radius);
	position: relative;
	z-index: 10;
	padding:calc(3rem + var(--radius)) 0;
	margin-top:calc(0px - var(--radius));
}
.contact-form > * + *{margin-top:var(--leading)}

.children{
	position:relative;
	margin-top:calc(0px - var(--radius));
	margin-bottom:calc(-3rem - var(--radius));
	width:100%;
	height:36vw;
	background:url(/assets/img/enfants.jpg) no-repeat center center;
	background-size: cover;
	z-index:5;
}

/*--------------------------------------------------------------
About page
--------------------------------------------------------------*/

.association, .prevex, .team, .partners{
	position:relative;
	z-index:5;
	margin-top:calc(0px - var(--radius));
	padding-top:calc(3rem + var(--radius) + var(--leading));
	padding-bottom:calc(3rem + var(--radius) + var(--leading));
	border-radius:0 0 var(--radius) var(--radius);
}
.association{
	margin-top:calc(-3rem - var(--radius));
	z-index: 20;
}
.prevex{z-index: 15;}
.association .grid > *:last-child, .prevex .grid > *:last-child{order:-1}
.association img, .prevex img{
	width:25rem;
	margin-inline: auto;
}
.team{z-index: 10;}
.team img{border-radius:50%}
.role{
	font-family: var(--font_heading);
	font-size:1.25rem;
	text-transform: uppercase;
	margin-top:0
}
.partners{
	border-radius:0;
	margin-bottom:calc(-3rem - var(--radius));
}

/*--------------------------------------------------------------
Actus and events page
--------------------------------------------------------------*/

.page-actus{background: var(--yellow);}
.page-events{background: var(--red);}
.posts h2 a{text-decoration: none;}
.posts h2 a:hover, .posts h2 a:focus{text-decoration: underline;}
.posts .date{margin-top:.5rem;}
.posts h2{margin-top:0}

/*--------------------------------------------------------------
Single actu or event page
--------------------------------------------------------------*/

.page-actu{background: var(--yellow);}
.page-event{background: var(--red);}
.date{
	display: block;
	margin-top:3rem;
	font-size: 1.25rem;
	font-weight: 400;
	font-family: var(--font_heading);
	text-transform: uppercase;
}
.date + h1{margin-top:1.75rem}

/*--------------------------------------------------------------
Resources and tools page
--------------------------------------------------------------*/

.filtered{margin: calc(-3rem - var(--radius)) 0;}
.filtered > *{padding:calc(3rem + var(--radius)) 0;}

.filters > *{
	margin-inline: auto;
	padding:0 var(--leading);
	max-width: 20rem;
}
.filters label{display: block;}

.category{border-top:2px solid var(--yellow);}
.category:not(.tools) .accordion-content > *{
	border-top:2px solid var(--white);
}
.category .accordion-content > * + *{margin-top:var(--leading)}

.resource, .tool {padding-top:1rem}
.resource .type{
	align-self:flex-start;
	background: var(--yellow);
	text-align: center;
	font-family: var(--font_heading);
	text-transform: uppercase;
}
.resource-header, .tool-header{
	display: flex;
	justify-content: space-between;
	gap:1rem;
	align-items: start;
	margin-bottom: 1rem;
}
.tool-header{justify-content: flex-start;}
.btn-icon{
	background: var(--white);
	color:var(--green);
	width:1.5rem;
	height:1.5rem;
	padding:.25rem;
	border-radius:50%
}
.btn-icon:hover, .btn-icon:focus{
	background: var(--dark_blue);
	color:var(--white)
}
.resource-category h2, .tool-header h2{
	font-size:1.5rem;
	line-height: 1;
}
.tool .btn + .btn{margin-top: 1rem;}
.author{
	text-transform: uppercase;
	font-weight: 200;
	font-family: var(--font_heading);
}

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

@media (min-width:62rem){

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

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

	/* 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-center{align-items: center}

	/* Main header */
	.main-header .wrapper{position: relative}
	.menu-toggle{display:none;}
	.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
	}

	/* Main content */

	/* Main footer */
	.main-footer .wrapper{
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.footer-contact, .credits{text-align: right;}
	.main-footer blockquote{
		max-width:16rem;
		font-size:2rem;
		line-height: 1.3;
	}

	/* Home page */
	.home-nav{padding-bottom: 0;}
	.home-nav-item{
		margin-top:-3rem;
		border-radius:var(--radius) var(--radius) 0 0;
	}
	.home-actus{border-radius: 0 0 0 var(--radius);}
	.home-events{border-radius: 0 0 var(--radius) 0;}

	/* About page */
	.association .grid > *:last-child, .prevex .grid > *:last-child{order:1}

}