@charset "utf-8";
/* Polices du projet */
@import url("https://use.typekit.net/vng0caf.css");


/* Couleurs de la page */
:root { 
    --couleur-bleu-tres-clair: #9db1d2;
	--couleur-bleu-clair: #4383c3;
	--couleur-bleu: #356ac0;
	--couleur-bleu-sombre: #212D57;
    --couleur-bleu-sombre-alpha: 30, 55, 97, 0.8;
	--couleur-gris-clair: #ECECEC;
	--couleur-gris: #919191;
    --couleur-gris-sombre: #414141;
    --couleur-rouge: #E94B56;
	--couleur-mauve: #B06EAC;
	--couleur-cite: #e9c1b0;
	--couleur-sfscr: #a56da3;
	--couleur-hsc: #1b3156;
	--couleur-riv: #f3d680;
	--couleur-char: #5b82bc;
	--couleur-beau: #ca4e56;
    --couleur-perle: #cbd6e7;
    --couleur-rose: #f8e2ec;
    --couleur-saumon: #e4a1a6;
	--couleur-vert-clair: #8ED38E;
	--couleur-menthe: #00A28C;
	--couleur-menthe-sombre: #009985;
	--couleur-vert-sombre: #067C64;
}
.fond.bleu-tres-clair { background-color: var(--couleur-bleu-tres-clair) }
.fond.bleu-clair { background-color: var(--couleur-bleu-clair) }
.fond.bleu { background-color: var(--couleur-bleu) }
.fond.bleu-sombre { background-color: var(--couleur-bleu-sombre) }
.fond.bleu-sombre-alpha { background-color: var(--couleur-bleu-sombre-alpha) }
.fond.gris-clair { background-color: var(--couleur-gris-clair) }
.fond.gris { background-color: var(--couleur-gris) }
.fond.gris-sombre { background-color: var(--couleur-gris-sombre) }
.fond.rouge { background-color: var(--couleur-rouge) }
.fond.perle { background-color: var(--couleur-perle) }
.fond.menthe { background-color: var(--couleur-menthe) }
.fond.rose { background-color: var(--couleur-rose) }
.fond.saumon { background-color: var(--couleur-saumon) }
.fond.mauve { background-color: var(--couleur-mauve) }

body {
	font-family: proxima-nova, sans-serif;
	line-height: 1.5rem;
}
header {
	max-width: 100rem;
}
section {
	padding: 1rem;
}
@media (min-width: 48rem) {
	section {
		padding: 2rem;
	}	
}
.btn {
	background-color: #00a28b;
	line-height: 1.2em;
	border-radius: 0.625rem;
	padding: 1.125rem 2em;
}
.btn:hover,
.btn:focus,
.btn:active {
	background-color: white;
	color: #00a28b
}
.gras {
	font-weight: 700;
}
p, ul, ol {
	line-height: 1.5;
	font-size: 1.25rem;
	margin-bottom: 1rem;
}
h2, .h2 {
	font-size: 2.5rem;
	font-family: 'new-order', sans-serif;
	margin: 2rem 0 1rem;
}
@media (min-width: 48rem) {
	h2, .h2 {
		margin: 3rem 0;
	}	
}
h3, .h3 {

}
.centre {
	text-align: center;
}
.bleu {
    color: var(--couleur-bleu-sombre);
}
.blanc {
    color: white;
}
@media (min-width: 47.9375rem) {
	.nowrap {
		white-space: nowrap;
	}
}



/*
=========================================================================
    Header
=========================================================================
*/

#logo {
	position: absolute;
	right: 5%;
	z-index: 10;
	box-shadow: 0px 0px 0.625rem rgb(0 0 0 / 50%);
	width: 6.25rem;
	top: 0;
}
@media (min-width: 37.5rem) {
	#logo {
		right: 2%;
		width: 7.8125rem;
	}
}



/*
=========================================================================
    Titre
=========================================================================
*/

#entete {
    min-height: 34.375rem;
	width: 100%;
	position: relative;
	padding: 0;
}
#entete .image img {
	position: absolute; 
	width: 108%;
	bottom: 0;
	left: -0.625rem;
	max-height: 17rem;
	object-fit: contain;
}

@media (min-width: 37.5rem) {
	#entete .image img {
        left: -5%;
	}
}
@media (min-width: 47.9375rem) {
	#entete .image img {
		position: absolute;
		width: 55%;
		bottom: 0;
		left: -5rem;
		max-height: 37rem;
	}

}
.slide {
	display: none;
	height: 40rem;
	max-width: 84.375rem;
	position: relative;
}
.slide.active {
	display: block;
}


/*
=========================================================================
    Styles de texte
=========================================================================
*/


.texte-bold {
	color: white;
	font-size: 1.875rem;
	font-weight: bold;
	line-height: 1.5;
}
.texte-medium {
	color: white;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.5;
}

/*
=========================================================================
    Position du texte 
=========================================================================
*/

/* Global */
.slide h1 {
	position: absolute;
	color: white;
	font-family: new-order, sans-serif;
	font-size: 3.5rem;
	font-weight: 600;
	letter-spacing: 0;
	top: 1.5625rem;
	left: calc(50% + 0.3125rem);
	transform: translateX(-50%) scale(0.7);
	z-index: 2;
}
.slide h1 img {
	border-bottom: 10px solid var(--couleur-menthe);
	margin-bottom: 20px;
	padding-bottom: 34px;
}
.page-employeur .slide h1 img {
	border-bottom-color: var(--couleur-bleu-sombre);
}
@media (min-width: 47.9375rem) {
	.slide h1 {
		top: 6.5625rem;
		left: 42%;
		transform: scale(0.9);
	}
}
@media (min-width: 65.625rem) {
	.slide h1 {
		left: 54%;
		transform: none;
	}
}
.slide h1 > span {
	position: relative;
}
.slide h1 > span > span {
	display: block;
	position: relative;
}
.slide h1 .ligne {
	display: block;
	line-height: 1.2;
}
#txt-ici {
	font-family: "eds-market-upright-script", sans-serif;
	font-weight: 400;
	font-size: 11.8125rem;
	line-height: 10.5rem;
}
#txt-sommes {
	font-weight: 500;
	position: absolute;
	top: 0.8125rem;
	left: 10rem;
	font-size: 5.25rem;
	line-height: 4.2rem;
}
#txt-ouverts {
	display: block;
	font-size: 8.8125rem;
	top: 0.4375rem;
	left: -0.625rem;
	position: relative;
	line-height: 4.0359rem;
}

/* Demi cercles */
.demi-cercle {
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 1;
	transform-origin: left;
	pointer-events: none;
}
@media (max-width: 47.875rem) {
	.demi-cercle {
		display: none;
	}
}
.demi-cercle.bleu {
	background-image: url(../img/demi-cercle-bleu.svg);
}
.demi-cercle.bleu-sombre {
	background-image: url(../img/demi-cercle-bleu-sombre.svg);
}
.demi-cercle.blanc {
	background-image: url(../img/demi-cercle-blanc.svg);
}
.demi-cercle.turquoise {
	background-image: url(../img/demi-cercle-turquoise.svg);
}
.demi-cercle.rouge {
	background-image: url(../img/demi-cercle-rouge.svg);
}
.demi-cercle.rose {
	background-image: url(../img/demi-cercle-rose.svg);
}
.demi-cercle.menthe {
	background-image: url(../img/demi-cercle-menthe.svg);
}
.demi-cercle {
	width: 7rem;
	height: 13.8rem;
}

.demi-cercle.petit {
	width: 4rem;
	height: 8rem;
}
/*
.demi-cercle.grand {
	width: 10rem;
	height: 20.1323rem;
}
*/
.demi-cercle.tres-grand {
	width: 12rem;
	height: 24rem;
}

.demi-cercle.deg-90 {
	transform: rotate(90deg);
}
.demi-cercle.deg-180 {
	transform: rotate(180deg);
}
.demi-cercle.deg-270 {
	transform: rotate(270deg);
}



/*
=========================================================================
    Tiroirs
=========================================================================
*/

#section-tiroirs .contenu-cols {
	display: grid;
	grid-template-areas: "texte" "image";
	grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
	#section-tiroirs .contenu-cols {
		grid-template-areas: "texte image";
		grid-template-columns: repeat(2, 1fr);
		gap: 5rem;
		margin: 0 auto;
	}
}
#section-tiroirs .contenu-col-texte {
	grid-area: texte;
	place-self: end center;
	padding-top: 2em;
	font-family: new-order, sans-serif;
}
@media (min-width: 48rem) {
	#section-tiroirs .contenu-col-texte {
		padding-top: 4em;
	}
	#section-tiroirs .contenu-col-texte p {
		margin-bottom: 5rem;
	}
}
#section-tiroirs .contenu-col-image {
	grid-area: image;
	justify-self: right;
}
@media (min-width: 47.9375rem) {
	#section-tiroirs .contenu-col:nth-child(2) {
		justify-self: center;
		margin-top: 1rem;
	}
}
#section-tiroirs img {
	display: block;
	width: 100%;
}
#section-tiroirs .toggle-container img {
	position: relative;
	right: -1.25rem;
}
@media (min-width: 38rem) {
	#section-tiroirs .toggle-container img {
		object-view-box: inset(0% 0% 25% 0%);
	}
}
@media (min-width: 64rem) {
	#section-tiroirs .toggle-container img {
		object-view-box: none;
	}
}
#section-tiroirs h2 {
	color: var(--couleur-bleu-sombre);
}
#section-tiroirs .retroaction h2 {
	padding-top: 0.3125rem;
	padding-bottom: 1em;
}
@media (min-width: 48rem) {
	#section-tiroirs .retroaction h2 {
		padding-bottom: 1.55em;
	}
}



/*
=========================================================================
	Faites comme eux : gestes
=========================================================================
*/
.carousel-gestes {
	margin-top: 32px;
	margin-bottom: 32px;
}
.carousel-gestes .carousel-cell {
	width: 100vw;
	height: 34rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
	margin-left: -.5rem;
}
@media (min-width: 48rem) {
	.carousel-gestes .carousel-cell {
		width: 37rem;
		height: 27rem;
	}	
}
.carousel-gestes .carousel-cell .carousel-cell-container {
	background-color: white;
	transform: scale(0.9);
	color: var(--couleur-bleu-sombre);
	height: 100%;
	padding: 2rem;
	box-shadow: 0 .5rem 1rem rgb(0 0 0 / 0);
	transition: transform 0.3s, box-shadow 0.3s;
}
.carousel-gestes .carousel-cell.is-selected .carousel-cell-container {
	box-shadow: 0 .5rem 1rem rgb(0 0 0 / .5);
}
@media (min-width: 48rem) {
	.carousel-gestes .carousel-cell.is-selected .carousel-cell-container {
		transform: scale(1);
	}	
}
.carousel-gestes .geste {
	border: 2px solid var(--couleur-menthe);
	font-size: 1.75rem;
	font-weight: 900;
	font-style: italic;
	line-height: 1.3;
	text-align: center;
	height: 23rem;
	display: grid;
	padding-left: 2rem;
	padding-right: 2rem;
	align-content: space-around;
	position: relative;
}
@media (min-width: 48rem) {
	.carousel-gestes .geste {
		height: 16rem;
	}
}

.carousel-gestes .geste::before,
.carousel-gestes .geste::after {
	position: absolute;
	content: "";
	background-repeat: no-repeat;
	background-size: 3rem 2.59rem;
	width: 3rem;
	height: 2.59rem;
}
.carousel-gestes .geste::before {
	background-image: url("../img/apostrophe-gauche.svg");
	top: -1px;
	left: 2rem;
}
.carousel-gestes .geste::after {
	background-image: url("../img/apostrophe-droite.svg");
	bottom: 0;
	right: 2rem;
}
.carousel-gestes .auteur {
	font-size: 2rem;
	font-weight: 900;
	font-style: italic;
	line-height: 1.3;
}
.carousel-gestes .auteur::before {
	content: "– "
}
.carousel-gestes .flickity-prev-next-button {
	top: 45.5%;
}

.carousel-gestes .flickity-prev-next-button .flickity-button-icon {
	color: white;
	left: 10%;
	top: 10%;
	width: 80%;
	height: 80%;
	background-color: var(--couleur-menthe);
	border-radius: 50%;
	color: white;
	padding: 5px;
}


/*
=========================================================================
	Embed vidéo YouTube
=========================================================================
*/

#slider {
	max-width: 115rem;
}
#slider .texte-medium {
	max-width: 65rem;
	margin-left: auto;
	margin-right: auto;
}
#video {
	color: white;
	max-width: 100rem;
}
#video a {
    box-shadow: rgb(0 0 0 / 60%) 0px 0.125rem 0.625rem 0px;
    transition: transform 0.4s, background 0.6s, color 0.6s, box-shadow 0.4s;
    animation: card-back 0.3s ease forwards;
	display: block;
	margin-bottom: 3rem;
	z-index: 1;
	position: relative;
}
#video a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(170,170,170,1) 0%, rgba(255,255,255,1) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s;
}
#video a:hover,
#video a:focus,
#video a:active {
    animation: card 0.6s ease forwards;
	animation-delay: 0.1s;
    box-shadow: rgb(0 0 0 / 60%) 0px 0.125rem 0.9375rem 0px;
} 
#video a:hover:before,
#video a:focus:before,
#video a:active:before {
    opacity: 0.1;
}
#video figure {
    position: relative;
    height: 100%;
}
#video figure > img {
	display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#video figure figcaption {
    background-color: rgba(var(--couleur-bleu-sombre-alpha));
    position: absolute;
    bottom: 0;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    letter-spacing: 0.0125rem;
    text-align: center;
    padding: 0.4375rem 0.625rem 0.625rem;
}
#video figure figcaption > span {
    font-weight: 800;
    font-size: 0.85rem;
    margin-right: 2.0625rem;
    white-space: nowrap;
}
#video figure figcaption > span img {
    width: 1.875rem;
    height: 1.8125rem;
    position: relative;
    display: inline-block;
    margin-left: 0.1875rem;
    margin-bottom: -0.625rem;
}

@keyframes card {
	0% {
    	transform: perspective(50em) rotateX(0deg) translate(0, 0) scale(1.00);
  	}
	100% {
		transform: perspective(50em) rotateX(4deg) translate(0, -0.4375rem) scale(1.02);
	}
} 	
@keyframes card-back {
	0% {
		transform: perspective(50em) rotateX(4deg) translate(0, -0.4375rem) scale(1.02);
	}
	100% {
    	transform: perspective(50em) rotateX(0deg) translate(0, 0) scale(1.00);
  	}
} 	


/*
=========================================================================
	Deux vidéos de largeur
	adapter le max-width de #video
=========================================================================
*/

.videos-cols {
	display: grid;
	grid-template-columns: 1fr;
	position: relative;
	z-index: 1;
}
@media (min-width: 920px) {
	.videos-cols {
		gap: 3rem;
		grid-template-columns: repeat(2, 1fr);
	}	
}

/*
=========================================================================
	D'autres outils utiles
=========================================================================
*/

#blogue {
	
	max-width: 100rem;
	/*max-width: 110rem;*/
	color: white;
	position: relative;
	padding-bottom: 3rem;
}
@media (min-width: 48rem) {
	#blogue {
		padding-bottom: 10rem;
	}	
}

.article-wrapper {
	width: 100%;
	height: auto;
	text-decoration: none;
	margin-right: 2rem;
}
@media (min-width: 530px) {
	.article-wrapper {
		width: 490px;
		height: 400px;
	}	
}

.article {
	animation: card-back 0.3s ease forwards;
	background-color: white;
	display: block;
	text-decoration: none;
	box-shadow: rgb(0 0 0 / 60%) 0px 0.125rem 0.625rem 0px;
	transition: transform 0.4s, background 0.6s, color 0.6s, box-shadow 0.4s;
	color: var(--couleur-bleu-sombre);

}
.article:hover,
.article:focus {
	animation: card 0.6s ease forwards;
	animation-delay: 0.1s;
	box-shadow: rgb(0 0 0 / 60%) 0px 0.125rem 1rem 0px;
	color: var(--couleur-bleu);
}
.article-image img {
	display: block;
	width: 100%;
}
.article-titre {
	padding: 1rem 2rem;
	font-weight: 800;
	text-wrap: balance;
}
.articles .flickity-prev-next-button {
	top: 45.5%;
}

.articles .flickity-prev-next-button .flickity-button-icon {
	color: white;
	left: 10%;
	top: 10%;
	width: 80%;
	height: 80%;
	background-color: var(--couleur-menthe);
	border-radius: 50%;
	color: white;
	padding: 5px;
}
@media (min-width: 768px) {
	.articles .flickity-prev-next-button.previous {
		left: -20px;
	}
	.articles .flickity-prev-next-button.next {
		right: -20px;
	}
}

/*
=========================================================================
	Lien Site Web
=========================================================================
*/

#savoir-plus {
	color: var(--couleur-menthe);
	padding: 3.125rem 1em;
	text-align: center;
	
}
#savoir-plus p {
	margin-bottom: 0;
	font-size: 1.75rem;
    font-weight: 900;
}



/*
=========================================================================
	Téléchargement du guide
=========================================================================
*/

#guide {
	background-color: var(--couleur-gris-clair);
	font-size: 0.95rem;
	max-width: 90rem;
	padding: 1.5em 1em 0;
}

@media (min-width: 48rem) {
	#guide {
		padding: 5rem 2rem 0;
	}
}
#guide > p:first-child {
	color: var(--couleur-bleu-sombre);
}
@media (min-width: 48rem) {
	#guide > p:first-child {
		width: calc(50% - 2rem);
		margin-bottom: 2rem;
	}
}

#guide .encadre {
	box-shadow: none;
	
}
@media (min-width: 48rem) {
	#guide .encadre {
		padding-left: 64px;
		position: relative;
	}
}

#guide .encadre .cols {
	display: grid;
	grid-template-areas: "texte" "document";
	grid-template-columns: 100%;
}
@media (min-width: 48rem) {
	#guide .encadre .cols {
		grid-template-areas: "texte document";
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem;
	}
}

#guide .encadre h2 {
	padding-top: 0;
	color: var(--couleur-bleu-sombre);
	font-size: 1.5rem;
	font-weight: 900;
	margin-bottom: 1.5rem;
}

#guide .encadre p {
	color: var(--couleur-bleu-sombre);
	font-weight: 700;
	line-height: 1.5;
	padding-bottom: 1em;
}

#guide .encadre p em {
	font-weight: 800;
}

#bouton-download {
	padding: calc(2rem - 15px) 0 2rem;
	margin: 0;
}
#bouton-download .btn {
		width: 100%;
	}
@media (min-width: 48rem) {
	#bouton-download {
		margin-left: calc(50% + 3rem);
	}
	#bouton-download .btn {
		width: 357px;
	}
}

#bouton-download .btn:hover,
#bouton-download .btn:focus,
#bouton-download .btn:active {
	background-color: var(--couleur-bleu-sombre);
	color: white;
}
#guide .encadre img {
	width: 100%;
	position: relative;
	z-index: 1;
	height: auto;


}
@media (min-width: 48rem) {
	#guide .encadre img {
		bottom: 3rem;
		position: absolute;
		width: 550px;
	}
}



/*
=========================================================================
    Glossaire
=========================================================================
*/

#glossaire {
	background-color: #00a28b; 
}
@media (min-width: 67.5rem) {
	#glossaire {
		padding: 2rem 0 0;
	}
}
#glossaire h2 {
    margin-bottom: 0;
}
#glossaire nav {
    overflow: hidden;
}
#glossaire nav ul {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 auto 2em;
	max-width: 73.75rem;
}
@media (min-width: 47.9375rem) {
	#glossaire nav ul {
		margin: 0 auto 1.5em;
	}
}
#glossaire nav ul li {
	flex-basis: 100%;
	margin: 1em 0;
}
@media (min-width: 36.25rem) {
	#glossaire nav ul li {
		flex-basis: 36%;
		margin: 2em 0;
	}
}
@media (min-width: 67.5rem) {
	#glossaire nav ul li {
		position: relative;
		flex-basis: 25%;	
	}
}
#glossaire nav ul li button {
	background-color: white;
	max-width: 18.75rem;
	width: 100%;
	border: none;
	font-family: 'proxima nova', sans-serif;
	font-weight: 900;
	color: #212838;
	font-size: 1.2rem;
	padding: 1.125rem 0.5em;
	border-radius: 0.3125rem;
	box-shadow: rgb(0 0 0 / 60%) 0px 0.125rem 0.625rem 0px;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
	margin: 0 auto;
	display: block;
	white-space: nowrap;
}
@media (min-width: 47.9375rem) {
	#glossaire nav ul li button {
		width: 14.6875rem;
	}
}
#glossaire nav ul li button:hover,
#glossaire nav ul li button:focus,
#glossaire nav ul li button:active {
	background-color: var(--couleur-bleu-sombre); 
	color: white;
}
#glossaire .rond-definition {
	background: rgba(33,40,55,0.75);
	width: 100%;
	height: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 0.5s;
	opacity: 0;
	z-index: 1;
}
@media (min-width: 67.5rem) {
	#glossaire .rond-definition {
		background: rgba(33,40,55,1);
	}
}
@media (min-width: 67.5rem) {
	#glossaire .rond-definition {
		width: 23.4375rem;
		height: 23.4375rem;
		padding: 3.125rem 3.125rem;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top: 105%;
		transition: top 0.3s ease-out, opacity 0.3s;
		transform: translateX(-50%);
	}
}
#glossaire .rond-definition.active {
	opacity: 1;	
	cursor: pointer;
}
@media (min-width: 67.5rem) {
	#glossaire .rond-definition.active {
		top: -4.375rem;
		left: 50%;
		transform: translateX(-50%);
	}
}
@media (max-width: 67.4375rem) {
	#glossaire li button {
		transition: 0.5s filter;
		filter: blur(0);
	}
	#glossaire li.active button {
		filter: blur(0.625rem);
	}
}
#glossaire .rond-definition > div {
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	left: 0;
	width: 100%;
	padding: 0 1.875rem;
}
@media (min-width: 67.5rem) {
	#glossaire .rond-definition > div {
		top: 15%;
		transform: none;
		width: auto;
	}
}
#glossaire .rond-definition p {
	color: white;
	top: 0;
}
#glossaire .rond-definition p.rond-definition-mot {
	font-size: 1.4rem;
	padding-bottom: 0.75rem;
	line-height: 1;
} 
#glossaire .definitions { display: flex; justify-content: center; align-items: center }



/*
=========================================================================
	Footer
=========================================================================
*/

#logo-footer-gouv {
	display: block;
	width: 12.5rem;
	margin: 2em auto 0;
}
@media (min-width: 47.9375rem) {
	#logo-footer-gouv {
		width: 20%;
		min-width: 9.375rem;
		max-width: 13.125rem;
		margin: 0 auto 1em;
		padding-right: 1.5625rem;
		position: absolute;
		top: 41%;
		left: 1.25rem;
		transform: translateY(-50%);
	}
}
@media (min-width: 71.875rem) {
	#logo-footer-gouv {
		left: 2.5rem;
		top: 43%;
	}
}

#logo-footer-ville {
	display: block;
	width: 16rem;
	margin: 0 auto 1em;
}
@media (min-width: 47.9375rem) {
	#logo-footer-ville {
		width: 24%;
		min-width: 9.375rem;
		max-width: 20rem;
		top: 40%;
		left: 15rem;
	}
}
@media (min-width: 85rem) {
	#logo-footer-ville {
		left: 18.625rem;
	}
}


/* Accueil */
.page-accueil {
	background: linear-gradient(to right, var(--couleur-bleu-sombre) 0%, var(--couleur-bleu-sombre) 50%, var(--couleur-bleu-clair) 50%, var(--couleur-bleu-clair) 100%);
	height: 100%;
	max-width: none;
	padding:0; 
}

.page-accueil .cols {
	display: grid;
	grid-template-areas: "citoyen" "employeur";
	grid-template-columns: 100%;
	height: 100%;
	margin: 0 auto;
	max-width: 120rem;
	min-height: 41.875rem;
}
@media (min-width: 28.125rem) {
	.page-accueil .cols {
		min-height: 56.25rem;
	}
}
@media (min-width: 75rem) {
	.page-accueil .cols {
		grid-template-areas: "citoyen employeur";
		grid-template-columns: 50% 50%;
		min-height: 35.9375rem;
	}
}
@media (min-width: 125rem) {
	.page-accueil .cols {
		min-height: 48.4375rem;
	}
}
.page-accueil .col {
	margin: 0;
	position: relative;
}
.page-accueil .col-citoyen {
	background-color: var(--couleur-bleu-sombre);
}
.page-accueil .contenu-citoyen img {
	position: absolute;
	left: -10%;
	bottom: 0;
	width: 24rem;
	opacity: 0.4;
}
@media (min-width: 28rem) {
	.page-accueil .contenu-citoyen img {
		width: 80vw;
	}
}
@media (min-width: 37.5rem) {
	.page-accueil .contenu-citoyen img {
		opacity: 1;
		width: 30rem;
	}
}
@media (min-width: 75rem) {
	.page-accueil .contenu-citoyen img {
		left: -25%;
		width: 35rem;
	}
}
@media (min-width: 125rem) {
	.page-accueil .contenu-citoyen img {
		width: 50rem;
		left: -65%;
	}
}
.page-accueil .contenu-employeur img {
	position: absolute;
	right: -10%;
	bottom: 0;
	width: 20.3125rem;
	opacity: 0.4;
}
@media (min-width: 28.125rem) {
	.page-accueil .contenu-employeur img {
		right: -10%;
		width: 25.625rem;
	}
}
@media (min-width: 37.5rem) {
	.page-accueil .contenu-employeur img {
		opacity: 1;
	}
}
@media (min-width: 75rem) {
	.page-accueil .contenu-employeur img {
		right: -30%;
		width: 34.375rem;
	}
}
@media (min-width: 125rem) {
	.page-accueil .contenu-employeur img {
		right: -50%;
		width: 43.75rem;
	}
}
.page-accueil .texte {
	color: white;
	position: absolute;
	top: 6.25rem;
	width: 14rem;
}
@media (min-width: 75rem) {
	.page-accueil .texte {
		top: 9.375rem;
	}
}
.page-accueil .contenu {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: 100%;
	height: 100%;
}
@media (min-width: 37.5rem) {
	.page-accueil .contenu {
		width: 37.5rem;
	}
}
@media (min-width: 75rem) {
	.page-accueil .contenu {
		width: clamp(37.5rem, 14.286vw + 26.786rem, 43.75rem);
	}
}
.page-accueil .contenu-citoyen .texte {
	right: 1%;
}
.page-accueil .contenu-employeur .texte {
	left: 3%;
	top: 2.1875rem;
}
@media (min-width: 28.125rem) {
	.page-accueil .contenu-employeur .texte {
		top: 6.25rem;
	}
}
@media (min-width: 75rem) {
	.page-accueil .contenu-employeur .texte {
		top: 9.375rem;
	}
}
.page-accueil p span {
	font-family: new-order, sans-serif;
}
.page-accueil a {
	display: block;
	position: absolute;
	top: 0;
	background: white;
	color: var(--couleur-bleu-sombre);
	padding: 1.25rem 3.125rem;
	border-radius: 0.625rem;
	font-size: 1.875rem;
	font-weight: 900;
	text-decoration: none;
	transition: 0.3s color, 0.3s background;
}
.page-accueil a:hover {
	color: white;
	background: var(--couleur-bleu-sombre);
}
#bouton-citoyen:hover {
	background: var(--couleur-menthe);
}
.page-accueil .texte p {
	position: relative;
	top: 5rem;
	font-weight: 500;
	font-size: 2.5rem;
	line-height: 1;
}
@media (min-width: 75rem) {
	.page-accueil .texte p {
		line-height: 1.25;
	}
}

.page-accueil .txt-quiz {
	font-size: 2.5rem;
	font-weight: 700;
}
.page-accueil .txt-guide {
	font-size: 2.5rem;
	font-weight: 700;
}
.page-accueil .col-employeur {
	background-color: var(--couleur-bleu-clair);
}

.parent {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: none;
	text-align: center;
	z-index: 1000;
}

.parent:before { /* pseudo element to force vertical centering of child element */
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.parent:after { /* pseudo element to create overlay */
	background: black;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0.9;
	z-index: 20;
}

/* Centered child element can be any width and height */ 
.centeredchild {
	position: relative;
	z-index: 30;
	display: inline-block;
	vertical-align: middle;
	width: 95%;
}
@media (min-width: 50rem) {
	.centeredchild {
		width: 80%;
	}
}
#youtubelightbox button {
	position: absolute;
	background-color: transparent;
	background-position: center;
	background-image: url("/img/pictos/picto-fermer-blanc.svg");
	background-repeat: no-repeat;
	background-size: 2.1875rem;
	border: none;
	border-radius: 0.625rem;
	cursor: pointer;
	padding: 1.5625rem;
	z-index: 25;
	transition: 0.3s background-color;
}
#youtubelightbox button:hover {
	background-color: rgba(255, 255, 255, 0.2);
}
@media (min-width: 47.9375rem) {
	#youtubelightbox button {
		right: 1em;
		top: 1em;
	}
}

/* Video container to maintain Youtube 16:9 aspect ratio */ 
.videowrapper {
	position: relative;
	padding-top: 1.5625rem;
	padding-bottom: 55%;
	height: 0;
}

/* Make Youtube IFRAME responsive */ 
.videowrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Tiroirs */
#ville {margin-top: 0;}
.toggle-container {
	display: none;
}
h2.trigger,
h3.trigger {
	margin: 0.5625rem 0 0 0;
	visibility: hidden;
}
.trigger > button {
	background-color: white;
	border: none;
	color: var(--couleur-menthe);
	cursor: pointer;
	font-family: inherit;
	font-weight: 800;
	font-size: 1.5rem;
	padding: 1rem 2.5rem 1rem 1rem;
	position: relative;
	text-align: left;
	line-height: 2rem;
	width: 100%;
	transition: 0.3s background-color, 0.3s color;
}
@media (min-width: 48rem) {
	.trigger > button {
		padding: 1rem 2.5rem;
	}	
}

/* Tiroir fermé (+) */
.trigger > button:after {
	position: absolute;
	width: 3.125rem;
	height: 100%;
	max-height: 3.125rem;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	right: 0;
	top: 50%;
	background-image: url('/img/pictos/picto-plus.svg');
	background-size: 40%;
	transform: translateY(-50%);
	opacity: 1;
	transition: opacity .2s;
}

/* Tiroir ouvert (-) */
.trigger.active > button {
	background-color: #e7eef6;
	color: var(--couleur-bleu-sombre);
}
.trigger.active > button::after {
	opacity: 0
}
.trigger > button::before {
	position: absolute;
	width: 3.125rem;
	height: 100%;
	max-height: 3.125rem;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	right: 0;
	top: 50%;
	background-size: 40%;
	transform: translateY(-50%);
	background-image: url('/img/pictos/picto-moins.svg');
}

/*

  Contenu des tiroirs

*/
#section-tiroirs {
	max-width: 90rem;
	padding: 0 21px 64px ;
} 
.toggle-container {
	background: white;
	padding: 1rem 1.25rem 0 1rem;
	overflow: hidden;
	color: var(--couleur-bleu-sombre);
}
@media (min-width: 64rem) {
	.toggle-container {
		display: grid;
		padding: 0 0 0 2.5rem;
	}	
	#section-tiroirs .toggle-container {
		grid-template-columns: 1fr 30rem;
		gap: 2rem;
	}
}
@media (min-width: 90rem) {
	#section-tiroirs .toggle-container {
		grid-template-columns: 1fr 35rem;
		gap: 2rem;
	}
}
#section-tiroirs .toggle-container > div:nth-child(2) {
	place-self: self-start self-end;
} 


.toggle-container > div:first-child > p:first-child {
	padding: 1.25rem 0;
}
/*
.toggle-container img {
	max-width: 25rem;
	width: 100%;
	right: -0.9375rem;
	position: relative;
	bottom: -0.25rem;
}
*/
.toggle-container ul {
	list-style-type: none;
	margin: 0;
}
.toggle-container ul li {
	position: relative;
	border-bottom: 1px solid #AAAAAA;
	padding-left: 3rem;
	margin-top: 16px;
	padding-bottom: 16px;
	font-weight: 500;
}

.toggle-container ul li:last-child {
	border-bottom: none;
	padding-bottom: 1em;
}
.toggle-container ul li::before {
	content: "";
	background: url("../img/picto-crochet.svg");
	background-repeat: no-repeat;
	background-size: 2rem;
	position: absolute;
	width: 2rem;
	height: 2rem;
	top: 0;
	left: 0;
}