/* imports de la font en fonction de la weight */

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-Thin.ttf") format("truetype");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-ExtraLight.ttf") format("truetype");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* Exemple fourni */
@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-ExtraBold.ttf") format("truetype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-Black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* Définition de Poppins comme étant la font principale */
:root {
	--fallback-font: Arial, sans-serif;
	--font-family: "Poppins", var(--fallback-font);
}

/* style du body */
body {
	margin: 0;
	line-height: 1.3em;
	font-family: var(--font-family);
	color: #333867;
}

/* style du body au moment ou une popup est ouverte pour empêcher le scroll */

body.no-scroll::before {
	content: "";
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	height: 0;
}
body.no-scroll {
	height: auto;
}

/* Définition de la weight de base pour les balises html */

h1 {
	font-family: var(--font-family);
	font-weight: 600;
}
h2 {
	font-family: var(--font-family);
	font-weight: 500;
	line-height: 1.1em;
}
h3 {
	font-family: var(--font-family);
	font-weight: 400;
}
strong {
	font-family: var(--font-family);
	font-weight: 600;
}

/* style des bouttons */

.centered {
	text-align: center;
}
.button {
	display: inline-block;
	width: auto;
	max-width: 250px;
	margin: 10px 20px 10px 20px;
	padding: 10px 15px;
	font-weight: 600;
	font-size: 0.9rem;
	text-align: center;
	color: #FFF;
	background-color: #D8004C;
	border: 2px solid #D8004C;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.5s;
}
.button.launch-cv-selector {
	border-radius: 20px;
}
.button.launch-cv-selector svg {
	width: 60px;
	height: 60px;
	margin: 0px 0 -10px;
}
.button:active,
.button:hover {
	color: #D8004C;
	background-color: #b3003a;
	background-color: #fff;
}
.button.blue {
	background-color: rgba(51, 56, 103, 1);
	border-color: rgba(51, 56, 103, 1);
}
.button.blue:hover,
.button.blue:active {
	color: rgba(51, 56, 103, 1);
	background-color: #FFF;
}

/* style des liens */

.link {
	text-align: center;
	margin-top: 40px;
	font-size: 1.0em;
	cursor: pointer;
}
.link a {
	color: rgba(51, 56, 103, 1);
}
svg.link {
	margin: 0;
}

/* style des notices dans l'app */

.notice {
	font-size: 0.9rem;
	line-height: 1.5em;
	margin: 40px 0 0;
	text-align: center;
}
.notice.blue {
	color: #110028;
}
.notice.red {
	color: #d8004c;
}
.notice.green {
	color: #00bd65;
}
.red-txt {
	color: rgba(216, 0, 76, 1);
}
.grey-txt {
	color: rgba(131, 131, 131, 1);
}

.login-background {
	text-align: center;
}

/* Animations */

/* Animation principale */
@keyframes loginReveal {

	0% {
		opacity: 0.5;
		transform: translateX(30px);
	}

	80% {
		opacity: 1;
		transform: translateX(0px);

	}

	100% {
		opacity: 1;
		transform: translateX(0);

	}
}

/* Style pour la page de connexion et renouvellement mot de passe */

@media only screen 
and (max-width : 1100px) {
	.login-background {
		width: 100%;
		height: 100vh;
		background: url("/resources/images/smartphone_background.jpg") no-repeat center center;
		background-size: cover;
	}
}
.login,
.forgot-pwd,
.reset-pwd {
	position: relative;
	top: 80px;
	width: 90%;
	margin: 0 auto 0;
	padding: 20px 2%;
	border-radius: 10px;
	box-shadow: 0 0 6.2px 0 rgba(0, 0, 0, 0.25);
	background-color: #FFF;
	opacity: 0;
	transform: translateX(30px);
	animation: loginReveal 2s cubic-bezier(.2,.8,.2,1) 0.2s forwards;
}
.login .input-container,
.forgot-pwd .input-container,
.reset-pwd .input-container{
	margin: 20px 0 0 0;
}
.login .input-container input,
.forgot-pwd .input-container input,
.reset-pwd .input-container input{
	padding: 15px 0 10px 20px;
}
.login .link,
.forgot-pwd .link,
.reset-pwd .link{
	font-size: 0.8rem;
	margin: 10% 0 10% 0;
}
.login .button,
.forgot-pwd .button,
.reset-pwd .button{
	margin: 10% 0 0 0;
}
.logo-container {
	margin: 0 10% 0 10%;
	width: 80%;
	text-align: center;
}
.logo-container #logo {
	width: 270px;
}
.login #connexion_txt {
	margin: 10px 0 0 0;
	font-size: 1.1rem;
	text-align: center;
}
.login h2 {
	margin: 15px 0 40px 0;
	font-size: 1.2rem;
	text-align: center;
}
.login #txt {
	margin: 10% 0;
	font-size: 0.9rem;
}

/* style relatif aux inputs*/
form {
	box-sizing: border-box;
}
.input-container {
	position: relative;
	margin-bottom: 20px;
	text-align: center;
	color: rgba(51, 56, 103, 1);
}
.input-container[data-id="target-job"] .get-job-description svg{
	
}
.input-container label {
	display: block;
	position: absolute;
	left: 20px;
	max-width: calc(100% - 80px);
	margin: 0 0 0 0;
	padding: 5px 10px;
	color: rgba(51, 56, 103, 1);
	background-color: white;
	font-size: 0.9rem;
	font-weight: 500;
	transition: all 0.5s;
}
.input-container:hover label {
	padding-left: 30px;
}

.input-container div.label {
	position: absolute;
	left: 20px;
	top: -6px;
	padding: 0 20px 0 0;
	background-color: white;
	text-align: left;
}
.input-container div.label label {
	display: inline-block;
	position: relative;
	left: 20px;
	margin: 0 25px 0 0;
	padding: 0;
}
.input-container div.label select {
	display: inline-block;
	width: 130px;
	margin: 0;
	padding: 5px 0;
	font-size: 0.9rem;
	color: #333867;
	outline: none;
}

/* style pour les input qui permettent de rentrer du texte */

.input-container textarea,
.input-container input {
	width: calc(100% - 32px);
	height: 50%;
	margin-bottom: 5px;
	margin-top: 15px;
	padding: 15px 10px 15px 20px;
	background: transparent;
	border: 1.5px solid #333867;
	border-radius: 10px;
	outline: none;
	color: rgba(51, 56, 103, 1);
}
:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0px 1000px white inset !important; /* couleur de fond */
	box-shadow: 0 0 0px 1000px white inset !important;
	-webkit-text-fill-color: #000 !important; /* couleur du texte */
	transition: background-color 5000s ease-in-out 0s; /* empêche le flash */
}
.input-container textarea {
	padding: 20px 10px;
	font-family: var(--regular-font);
	font-size: 1.0em;
	background-color: #FFF;
	overflow-y: auto;
	scrollbar-width: thin;
	resize: none;
}
.input-container textarea.job-offer {
	height: 250px;
}
.input-container.red textarea {
	margin: 20px 0;
	border: 2px solid rgba(216, 0, 76, 1);
	border-radius: 15px;
}
.input-container.red label {
	text-align: left;
	color: rgba(216, 0, 76, 1);
}

/* style pour les input qui permettent de rentrer du texte */

.input-container select {
 	width: calc(100% - 10px);
	margin: 15px 0 5px 0;
	padding: 20px 0 20px 0;
	font-family: var(--regular-font);
	font-size: 1.0em;
	text-align: center;
	background-color: #FFF;
	border: 1.5px solid #333867;
	border-radius: 10px;
}
.input-container select option {
	font-size: 1.2em;
}
.input-list {
	position: relative;
	margin: 20px 0 30px;
	padding: 20px 20px;
	border: 1px solid #333867;
	border-radius: 10px;
}
.input-list .select-title {
	display: block;
	/*! position: absolute; */
	/*! left: 20px; */
	/*! top: -15px; */
	max-width: calc(100% - 60px);
	font-size: 1.0rem;
	font-weight: 500;
	padding: 3px 10px;
	color: rgba(216, 0, 76, 1);
	background-color: white;
	margin-top: -35px;
}
.input-list .choice-list {
}
input[type="checkbox"] {
	appearance: none;
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(51, 56, 103, 1);
	border-radius: 5px;
	transform: translateY(-2px);
}
input[type="checkbox"]:checked::after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 40%;
	width: 5px;
	height: 8px;
	border: solid rgba(51, 56, 103, 1);
	border-width: 0 3px 3px 0;
	border-radius: 2px;
	transform: translate(-50%, -50%) rotate(45deg);
}
input[type="radio"] {
	appearance: none;
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(51, 56, 103, 1);
	border-radius: 5px;
}
input[type="radio"]:checked::after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 40%;
	width: 5px;
	height: 8px;
	border: solid rgba(51, 56, 103, 1);
	border-width: 0 3px 3px 0;
	border-radius: 2px;
	transform: translate(-50%, -50%) rotate(45deg);
}
.green-checkbox input[type="radio"] {
	border: 2px solid rgba(77, 214, 134, 1);
}
.green-checkbox input[type="radio"]:checked::after {
}
.input-list .select-choice {
	display: block;
	padding-left: 30px;
	margin: 5px 0;
	color: rgba(51, 56, 103, 1);
}
input[type="file"] {
	display: none; /* hide the native input */
}
.input-container input#job-search {
	color: rgba(51, 56, 103, 1);
}
.results {
	display: none;
}
.results.visible {
	display: inline-block;
	width: calc(100%);
	max-height: 200px;
	border-radius: 10px;
	box-shadow: 0 0 4px 0px #AAAAAA;
	overflow-y: auto;
}
.results.visible.large {
	max-height: none;
}
.results .result {
	padding: 5px 20px;
	font-size: 0.9rem;
	color: rgba(51, 56, 103, 0.8);
	text-align: left;
	transition:	padding-left 0.5s;
	cursor: pointer;
}
.results .result:hover{
	padding-left: 20px;
}
.results .result:nth-child(even) {
	background-color: rgba(0, 8, 81, 0.1);
}
.results .result.beneficiary {
	display: none;
}
.results .result.beneficiary.visible {
	display: block;
}

/* style du header de l'application */

.header {
	z-index: 100;
	position: fixed;
	top: 0;
	width: calc(100% - 40px);
	height: 170px;
	padding: 30px 20px 30px;
	box-shadow: 0 0 4px 4px #F5F5F5;
	background: #FFFFFF;
	transition: all 0.5s;
}
.header.mini {
	height: 65px;
	padding: 22px 20px 0px;
}
.header .logo-container #logo {
	width: 173px;
}
.header.mini .logo-container #logo {
	width: 150px;
}
.header .logout-button {
	display: inline-block;
	position: absolute;
	top: 50px;
	right: 30px;
	margin: 0;
	transform: translateY(-50%);
}
.header .buttons-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 30px;
	align-items: center;
	justify-items: center;
	width: 100%;
	margin-top: 10px;
}
.header.mini .buttons-container {
	display: none;
}
.header .select-button {
	position: relative;
	width: 100%;
	height: 65px;
	text-decoration: none;
	padding: 10px 5px;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.5s;
}
.header .select-button .icon {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 20px;
	width: 22px;
	height: 22px;
	transform: translateX(-50%);
}
.header .select-button span {
	display: inline-block;
	margin: 20px auto 0;
	font-size: 0.85rem;
	line-height: 1rem;
	font-weight: 400;
}
.header #orange-button {
	background-color: #FF7900;
	color: #FFF;
	border: 2.5px solid #FF7900;
}
.header #orange-button:hover,
.header #orange-button.active {
	background-color: #FFF;
	color: #FF7900;
	border: 2.5px solid #FF7900;
	fill: #FF7900;
}
.header #red-button {
	background-color: #D8004C;
	color: #FFF;
	border: 2.5px solid #D8004C;
}
.header #red-button:hover,
.header #red-button.active {
	background-color: #FFF;
	color: #D8004C;
	border: 2.5px solid #D8004C;
}
.header #black-button {
	background-color: #110028;
	color: #FFF;
	border: 2.5px solid #110028;
}
.header #black-button:hover,
.header #black-button.active {
	background-color: #FFF;
	color: #110028;
	border: 2.5px solid #110028;
}

/* fonctions d'animations pour les popup */

@keyframes slideInFromBottom {
	from {
		opacity: 0;
		transform: translateY(100vh) scale(0.8)
	}
	to {
		opacity: 1;
		transform: translateY(0vh) scale(1);
	}
}
@keyframes slideOutToBottom {
	from { 
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	to { 
		opacity: 0;
		transform: translateY(100vh) scale(0.8);
	}
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes gelatine {
	from, to { transform: translate(-50%, -50%) scale(1, 1); }
	25% { transform: translate(-50%, -50%) scale(0.95, 1.05); }
	50% { transform: translate(-50%, -50%) scale(1.05, 0.95); }
	75% { transform: translate(-50%, -50%) scale(0.925, 1.25); }
}

/* style pour les popup */

.popup {
	position: fixed;
	z-index: 500;
	width: 100%;
	height: 100%;
}
.popup .background {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: #FFF;
	opacity: 0.7;
}
.popup .content {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 400px;
	margin: 0 0px 0;
	padding: 55px 0 55px 0;
	text-align: center;
	line-height: 1.2;
	background-color: #FFF;
	border: 1px transparent;
	border-radius: 50px 50px 0 0;
	box-shadow: 0 0 8px 0 #D9D9D9;
	animation: slideInFromBottom 0.5s cubic-bezier(1,.02,0,.99);
}
.popup .content .body {
	width: calc(100% - 90px);
	height: 100%;
	padding: 45px;
	scrollbar-width: thin;
	scrollbar-color: rgb(200, 200, 200)	transparent;
	overflow-y: auto;
	overflow-x: hidden;
}
.popup.waiting .content svg {
	animation: spin 1.5s ease-in infinite;
}
.popup.alert {
	z-index: 1000;
}
.popup.alert .content {
	height: 30%;
}
.popup.alert.bad .content {
	background-color: #D8004C;
}
.popup.alert.good .content {
	background-color: #4DD686;
}
.popup.alert .content p {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	font-size: 1.5em;
	font-weight: 500;
	color: #FFF;
	animation-delay: 0.75s;
	animation: gelatine 0.5s;
	transform: translate(-50%, -50%);
}
.popup.closing .content {
	opacity: 0;
	animation: slideOutToBottom 1s cubic-bezier(1,.02,0,1);
}
.popup .content .close-button {
	display: inline-block;
	position: absolute;
	right: 40px;
	top: 20px;
	margin: 0;
	cursor: pointer;
}
.popup .content .print-button {
	display: inline-block;
	position: absolute;
	right: 80px;
	top: 20px;
	margin: 2px 0 0;
	cursor: pointer;
}

/* Crédits */

.credits {
	display: none;
	margin: 260px 20px 30px;
	padding: 0 0;
}
.credits.visible {
	display: block;
}
.credits h2 {
	margin: 0 0 10px;
	font-size: 1.3rem;
	text-align: center;
}
.credits .list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-items: center;
	grid-gap: 5px;
	font-size: 0.75rem;
}
.credits .list span {
	display: block;
	font-size: 1.0rem;
	font-weight: 500;
	transform: translateY(4px);
	text-align: center;
}
.credits .list .total span {
	
}
.credits .list .remaining span {
	
}
.credits .list .used span {
	
}

/* Liste des modules dans la partie ai-modules */

.modules-list {
	display: none;
	margin: 30px 20px 30px;
	padding: 0 0;
}
.modules-list.visible {
	display: block;
}
.modules-list .module-item {
	position: relative;
	display: grid;
	align-items: center;
	height: 60px;
	margin: 20px 0;
	padding: 10px 15px;
	box-shadow: 0px 1px 7px 0px #d9d9d9;
	border-radius: 10px;
	cursor: pointer;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 380ms ease, transform 420ms cubic-bezier(.2,.8,.2,1), filter 420ms ease;
	will-change: opacity, transform, filter;
}
.modules-list .module-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.modules-list .module-item:hover {
	box-shadow: 0px 1px 12px 0px #c8c8c8;
	transform: translateY(-10px);
}
.modules-list .module-item.bonus.bonus-1 {
	background: #edb000;
}
.modules-list .module-item.bonus.bonus-2 {
	background: #908cd9;
}
.modules-list .module-item.prepa h2,
.modules-list .module-item.bonus h2 {
	padding-top: 0;
}
.modules-list .module-item.bonus h2,
.modules-list .module-item.bonus h3 {
	color: #fff;
}
.modules-list .lock-module {
	opacity: 0.6;
	filter: grayscale(0.7);
}
.modules-list .module-item h2 {
	display: inline-block;
	width: calc(70% - 10px);
	margin: 0;
	font-size: 1.0rem;
	font-weight: 400;
	color: #D8004C;
}
.modules-list .module-item h3 {
	display: inline-block;
	margin: 0;
	width: calc(70% - 10px);
	font-size: 0.85rem;
	line-height: 1.2em;
	font-weight: 400;
}
.modules-list .module-item .module-img{
	position: absolute;
	top: 50%;
	right: 0;
	width: 30%;
	height: 100%;
	border-radius: 0 10px 10px 0;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	transform: translateY(-50%);
}
.modules-list .module-item .module-img#img-1 {
	background-image: url("/resources/images/1 - Exploration parcours 2.jpg");
}
.modules-list .module-item .module-img#img-2 {
	background-image: url("/resources/images/2 - Boussole des motivations 2.jpg");
}
.modules-list .module-item .module-img#img-3 {
	background-image: url("/resources/images/3 - Detecteur de competences transferables 2.jpg");
}
.modules-list .module-item .module-img#img-4 {
	background-image: url("/resources/images/4 - Analyse de CV version 3.jpg");
}
.modules-list .module-item .module-img#img-5 {
	background-image: url("/resources/images/5 - Maitriser les questions des recruteurs 2.jpg");
}
.modules-list .module-item .module-img#img-6 {
	background-image: url("/resources/images/6 - Croyances peurs doutes 2.jpg");
}
.modules-list .module-item .module-img#img-7 {
	background-image: url("/resources/images/07 - Explorateur Metiers 2.jpg");
}
.modules-list .module-item .module-img#img-8 {
	background-image: url("/resources/images/08 - Explorateur formations 2.jpg");
}
.modules-list .module-item .module-img#img-9 {
	background-image: url("/resources/images/9 - Identification de compétences 2.jpg");
}

/* Boxes text style */

.txt-box {
	display: inline-block;
	position: relative;
	border-radius: 10px;
	margin: 20px 0;
	border: 1.9px solid transparent;
}
.txt-box li {
	margin: 0 0 0 10px;
	padding: 0;
}
.txt-box.tips {
	padding: 0 10px 0 50px;
	line-height: 1.3em;
	font-weight: 500;
	box-shadow: 0 0 6.2px 0px rgba(170, 170, 170, 1);
}
.txt-box.tips svg {
	display: inline-block;
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translate(-50%, -50%);
}
.txt-box.svg-left {
	display: grid;
	margin: 0 0;
	padding: 0 0px 0 50px;
}
.txt-box.svg-left svg {
	display: inline-block;
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translate(-50%, -50%);
}
.txt-box.svg-left p {
	margin: 7px 0;
}

.selected-cv {
	
}
.selected-cv .txt-box.green-checkbox {
	padding: 0px 0px;
}
.selected-cv .txt-box.green-checkbox input {
	
}
.selected-cv .txt-box.green-checkbox label {
	display: grid;
	align-items: center;
	height: 70px;
	margin: 0 50px 0 50px;
}
.selected-cv .txt-box.green-checkbox svg {
	top: 25px;
}

.txt-box.ai-result {
	margin: 30px 0 0 0;
	padding: 20px 20px;
	border-color: rgba(51, 56, 103, 1);
}
.txt-box.ai-result svg {
	display: inline-block;
	position: absolute;
	left: 15px;
	top: 15px;
}
.txt-box.ai-result p {
	margin: 0 0 0 40px;
}
.txt-box.ai-result-txt {
	margin: 50px 0 5px;
	padding: 0 10px 0px;
	position: relative;
	border-color: rgba(77, 214, 134, 1);
}
.txt-box.ai-result-txt label {
	display: block;
	position: absolute;
	left: 20px;
	max-width: calc(100% - 60px);
	padding: 0 10px;
	color: rgba(77, 214, 134, 1);
	background-color: white;
	font-size: 1.2em;
	transform: translate(0, -50%);
}

/* Zone d'affichage de la réponse de l'IA */

.txt-box.ai-result-txt .response {
	margin: 30px 10px;
}
.txt-box.ai-result-txt .response h1 {
	font-size: 1.1rem;
	line-height: 1.6rem;
	color: #D3175B;
	text-align: center;
}
.txt-box.ai-result-txt .response h2 {
	display: block;			/* force le retour à la ligne avant/après */
	width: fit-content;		/* fond = largeur du texte */
	max-width: 100%;		/* évite de déborder */
	padding: 5px 20px;
	font-size: 0.9rem;
	line-height: 1.2rem;
	text-align: left;
	color: #fff;
	background: #D3175B;
	border-radius: 50px;
}
.txt-box.ai-result-txt .response h3 {
	font-size: 1.0rem;
	line-height: 1.6rem;
	text-align: left;
}
.txt-box.ai-result-txt .response p {

}
.txt-box.ai-result-txt .response ol {
	padding-left: 15px;
}
.txt-box.ai-result-txt .response ol li {
	margin: 0;
	padding-left: 5px;
}
.txt-box.ai-result-txt .response ul {
	padding-left: 18px;
}
.txt-box.ai-result-txt .response ul li {
	margin: 0;
	padding-left: 2px;
	text-align: left;
}
.txt-box.ai-result-txt .response em {
	margin: 0 4px;
}
.txt-box.ai-result-txt .response blockquote {
	font-style: italic;
	color: #333867;
	border-left: 3px solid #4dd686;
	margin: 0px 0;
	padding: 10px;
	background-color: #4cd68608;
	line-height: 1.6;
	position: relative;
}
.txt-box.ai-result-txt .response blockquote p {
	margin: 10px 10px;
	color: #333867;
}
.txt-box.ai-result-txt .response hr {
	width: 50%;
	height: 1px;
	margin: 30px auto 30px;
	background-color: #4dd686;
	border: none;
}

.txt-box.relaunch-analyze {
	width: calc(100% - 40px);
	color: #FFF;
	background-color: rgba(255, 138, 32, 1);
	border-color: rgba(255, 121, 0, 1);
}
.txt-box.relaunch-analyze .centered .button {
	background-color: rgba(255, 138, 32, 1);
	border-color: #FFF;
}
.centered .button svg {
	transform: translate(10%, 10%);
}

.txt-box.relaunch-analyze .centered .button:hover {
	color: rgba(255, 138, 32, 1);
	background-color: #FFF;
}
.txt-box.title-svg-button {
	position: relative;
	padding: 20px 30px;
	box-shadow: 0 0 6.2px 0px rgba(170, 170, 170, 1);
}
.txt-box.title-svg-button h2 {
	margin: 0 40px 0 0;
	color: #D8004C;
	font-size: 1.1rem;
}
.txt-box.title-svg-button svg {
	display: inline-block;
	position: absolute;
	right: 30px;
	top: 30px;
}
.txt-box.title-svg-button p {
	margin: 10px 35px 10px 0;
}

.txt-box.lvl {
	display: grid;
	grid-template-columns: 1fr 4fr;
	grid-template-rows: 1fr 1fr;
	align-items: center;
}
.txt-box.lvl .etape {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	margin: 0 0 10px 0;
	font-size: 1.0em;
	align-self: end;
	text-align: center;
}
.txt-box.lvl h2 {
	position: relative;
	grid-column: 1;
	grid-row: 2;
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
	align-self: start;
	text-align: center;
	font-size: 1.9em;
	font-weight: 600;
}
.txt-box.lvl .content {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
	padding: 10px 10px 10px 0;
	line-height: 1.3em;
}
.txt-box.lvl .content ul {
	margin: 0;
	padding: 0 0 0 10px;
}
.txt-box.regular {
	margin: 0px 20px 20px;
	padding: 0;
	font-size: 1.0rem;
	line-height: 1.3em;
	/* border-color: rgba(51, 56, 103, 1); */
}
.txt-box.regular.job-formation {
	margin: 40px 0 0px;
}
.txt-box.regular.job-formation .response.value {
	margin: 10px 0 0;
}
.txt-box.regular p {
	margin: 0;
}
.txt-box.regular li {
	padding: 0 30px 0 0;
}
.txt-box.border.orange-border {
	border-color: rgba(255, 121, 0, 1);
}
.txt-box.border.blue-border {
	border-color: rgba(17, 0, 40, 1);
}
.txt-box.border.red-border {
	border-color: rgba(216, 0, 76, 1);
}
.txt-box.shadow {
	box-shadow: 0 0 6.2px 0px rgba(170, 170, 170, 1);
}
.txt-box.checkbox-container {
	position: relative;
	width: 100%;
	padding: 15px 0px;
	text-align: left;
}
.txt-box.checkbox-container input[type="radio"] {
	display: inline-block;
	position: absolute;
	left: 10px;
	top: 23px;
}
.txt-box.checkbox-container label {
	display: grid;
	align-items: center;
	height: 70px;
	margin: 0 50px 0 50px;
}
.txt-box.green-checkbox {
	box-shadow: 0 0 6.2px 0px rgba(77, 214, 134, 1);
}

/* Page de sélection du bénéficiaire (pour un admin ou un consultant */

.page.beneficiary {
	margin: 240px 0 0 0;
	padding: 40px 40px 0 40px;
}
.page.beneficiary .input-container input {
	border-radius: 5px 5px 0 0;
}
.page.beneficiary .results.visible {
	max-height: 450px;
	margin: -5px 0 0;
	border-radius: 0 0 10px 10px;
}

/* Contenu des modules */
.ai-modules.page {
	display: inline-block;
	width: 100%;
}
.modules-content{
	display: block;
	width: 100%;
	padding: 0 0 0 0;
}
.modules-content .module-content {
	display: none;
}
.modules-content .module-content.visible {
	display: block;
	width: 100%;
}
.modules-content .module-content .step {
	display: none;
	margin-top: 80px;
}
.modules-content .module-content .step.visible {
	display: block;
	width: 100%;
	text-align: center;
}
.modules-content .module-content .step .page-top {
	position: relative;
	height: 300px;
}
.modules-content .module-content .step .page-top .module-img {
	display: inline-block;
	width: 100%;
	height: 300px;
	background-size: cover;
	background-position: 50% 10%;
}
.modules-content .module-content .step .page-top .module-img#img-1 {
	background-image: url("/resources/images/1 - Exploration parcours.jpg");
}
.modules-content .module-content .step .page-top .module-img#img-2 {
	background-image: url("/resources/images/2 - Boussole des motivations.jpg");
}
.modules-content .module-content .step .page-top .module-img#img-3 {
	background-image: url("/resources/images/3 - Detecteur de competences transferables.jpg");
}
.modules-content .module-content .step .page-top .module-img#img-4 {
	width: 100%;
	background-image: url("/resources/images/4 - Analyse de CV.jpg");
}
.modules-content .module-content .step .page-top .module-img#img-5 {
	width: 100%;
	background-image: url("/resources/images/5 - Maitriser les questions des recruteurs.jpg");
}
.modules-content .module-content .step .page-top .module-img#img-6 {
	width: 100%;
	background-image: url("/resources/images/6 - Croyances peurs doutes.jpg");
}
.modules-content .module-content .step .page-top .module-img#img-7 {
	width: 100%;
	background-image: url("/resources/images/7 - Explorateur Metiers.jpg");
}
.modules-content .module-content .step .page-top .module-img#img-8 {
	width: 100%;
	background-image: url("/resources/images/8 - Explorateur formations.jpg");
}
.modules-content .module-content .step .page-top .module-img#img-9 {
	background-image: url("/resources/images/9 - Identification de compétences.jpg");
}
.modules-content .module-content .step .page-top .title {
	display: inline-block; 
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	padding: 10px 20px;
	font-size: 0.8em;
	line-height: 1.5em;
	text-align: center;
	border-radius: 40px;
	background: rgba(51, 56, 103, 0.70);
	color: #FFF;
	transform: translateY(-50%);
}
.modules-content .module-content .step .page-top .title h2 {
	text-align: center;
	margin: 2px 0;
}
.modules-content .module-content .step .page-top .title p {
	margin: 2px 0;
}
.modules-content .module-content .step .page-top .title p {
	margin: 2px 0;
}

/* Liste expériences pour le module préparatoire */

.modules-content .module-1 {
	
}
.modules-content .module-1 .experiences {
	margin: 10px 0 10px 0;
	padding: 0px 20px 10px;
}
.modules-content .module-1 .experiences.hidden {
	display: none;
}
.modules-content .module-1 .experiences .experiences-list {
	margin: 10px 0 10px 0;
	background: #dfdff5;
}
.modules-content .module-1 .experiences .experiences-list .row {
	display: grid;
	grid-template-columns: 1fr 1fr 80px;
	align-items: center;
	grid-gap: 0px 5px;
	padding: 10px 0;
}
.modules-content .module-1 .experiences .experiences-list .row:nth-child(even) {
	background: rgb(255 255 255 / 50%);
}
.modules-content .module-1 .experiences .experiences-list .row.title {
	
}
.modules-content .module-1 .experiences .experiences-list .row:not(.title) {
	cursor: pointer;
}
.modules-content .module-1 .experiences .experiences-list .row .cell {
	font-size: 0.65rem;
	line-height: 1.0rem;
}
.modules-content .module-1 .experiences .experiences-list .row.title .cell {
	font-weight: 500;
}
.modules-content .module-1 .experiences .notices {
	
}
.modules-content .module-1 .experiences .notices p {
	font-size: 0.85rem;
}
.modules-content .module-1 .experiences .notices p.no-experience {
	
}

/* Div page des modules */

.modules-content .module-content .page {
	display: inline-block;
	padding: 20px;
	font-size: 0.9em;
	text-align: left;
}
.modules-content .module-content .step .page.hidden {
	display: none;
}
.modules-content .module-content .link u {
	font-size: 1.0em;
}
.modules-content .module-content .link svg {
	display: inline-block;
	display: inline-block;
	transform: translate(-25%, +25%);
}
.modules-content .module-content .step .top-page {
	position: relative;
	margin-top: 90px;
	padding: 40px 20px 0;
	text-align: left;
	color: rgba(216, 0, 76, 1);
}
.modules-content .module-content .step .top-page svg {
	display: inline-block;
	position: absolute;
	right: 10px;
	top: 10px
}
.modules-content .module-content .step .top-page h2 {
	margin: 0 30px 0 0;
	font-size: 1.5em;
	line-height: 1.1em;
}
.modules-content .module-content .step .top-page p {
	line-height: 1.0em;
	margin: 10px 0 20px 0;
}
.modules-content .module-content .step .page form {
	color: rgba(51, 56, 103, 1);
}
.modules-content .module-content .step .page form label {
	line-height: 1.0em;
	text-align: left;
}
.modules-content .module-content .step .page form label p {
	background-color: transparent; 
	font-weight: 300;
}

.modules-content .module-content .step {
 
}
.modules-content .module-content .step .txt-box.response-issue {
	width: calc(100% - 42px);
	margin: 30px 0 0 0;
	padding: 20px 20px;
	font-weight: bold;
	border-color: #d3175b;
}
.modules-content .module-content .step .txt-box.response-issue p {
	
}

.modules-content .module-content .step .txt-box.ai-result.save-confirm {
	font-weight: bold;
	border-color: rgba(255, 121, 0, 1);
}
.modules-content .module-content .step .txt-box.ai-result.save-confirm a {
	color: rgba(51, 56, 103, 1);
}
.modules-content .module-content .step .page .padding-10-80 {
	min-height: 110px;
	padding: 80px 10px 20px 10px;
}
.modules-content .module-content .step .page .padding-10-60 {
	padding: 60px 10px 20px 10px;
}
.modules-content .module-content .step .page .padding-10-120 {
	padding: 120px 10px 120px 10px;
}

/* Style de la popup de sélection des cv */

.popup.cv {
	position: relative;
	text-align: center;
}
.popup.cv .content {
	height: 70%;
	margin: 20px 0 0px 0;
}
.popup.cv .content .body {
	padding-top: 0;
}
.popup.cv .content h2 {
	text-align: center;
	font-size: 1.2rem;
}
.txt-box.checkbox-container svg {
	display: inline-block;
	position: absolute;
	right: 15px;
}
.popup.cv .content .body .centered{
	margin: 10px 0;
}
.popup.cv .content .body .button{
	margin: 0 auto;
}
.popup.cv .content .link {
	display: block;
	margin: 30px 0 40px;
}
.popup.cv .content .link.preview-button {
	position: absolute;
	right: 15px;
	top: 24px;
	margin: 0;
}
.popup.cv .content .link u {
	padding: 0 0 0 10px;
	font-size: 1.0rem;
}
.popup.cv .content .link svg {
	transform: translateY(10%);
	cursor: pointer;
}
.popup.cv .content .choice-list {
	margin: 30px 0 10px 0;
}
.popup.cv .content .choice-list .txt-box.checkbox-container {
	/* display: grid; */
	margin: 10px 0;
	padding: 0;
	/* align-items: center; */
}
.popup.cv .content .choice-list p {
	color:rgba(216, 0, 76, 1);
}
.popup.cv .content .button.blue {
	margin: 20px auto 30px;
}

/* style de la preview du pdf */

.cv-preview {
}
.cv-preview .pdf-container{
	height: 100vh;
}

/* styles des métier exercé avec choix de compétence */

.choice-after-selection [data-id='current-job']{
	display: none;
}
.choice-after-selection .visible[data-id='current-job']{
	display: block;
}

/* styles des choix de métier visé*/
.target-job.choice-menu{
	display: none;
}
.target-job.choice {
	margin: 50px 0 0;
}
.target-job.choice-menu.visible{
	display: block
}
.target-job.choice-menu-list .centered .button{
	width: 100%;
  margin-bottom: 10px;
}
.target-job.choice-list{
	display: none;
}
.target-job.choice-list.visible{
	display: block;
	text-align: center;
}
.target-job.choice-list.visible .title {
	font-weight: 500;
	font-size: 1.1rem;
	text-align: left;
	margin-bottom: 20px;
}
.target-job.choice-menu.visible .title {
	font-weight: 500;
	font-size: 18px;
	text-align: left;
	margin-bottom: 20px;
}
.target-job.choice-list.visible .job-results {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: calc(100% - 0px);
	margin-left: -7px;
	background-color: #FFF;
	border-radius: 0;
	padding: 7px;
	gap: 20px;
	box-shadow: 0 0 0 0 #FFF;
}
.target-job.choice-list.visible .job-results .result {
	display: grid;
	justify-items: center;
	align-items: center;
	min-height: 50px;
	padding: 0;
	background: transparent;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0px 1px 7px 0px #d9d9d9;
	transition: all 0.5s;
	overflow: hidden;
}
.target-job.choice-list.visible .job-results .result:hover {
	box-shadow: 0px 1px 12px 0px #c8c8c8;
}
.target-job.choice-list.visible .job-results .result h3 {
	height: auto;
	margin: 0;
	padding: 10px 5px 10px;
	font-size: 0.85rem;
	line-height: 1.2rem;
	font-weight: 500;
	color: #333867;
}
.target-job.choice-list.visible .job-results:hover .result h3 {
	
}

.target-job.choice-list.visible .job-results.secteurs-activite.category-list .result {
	align-items: end;   /* vertical */
	min-height: 150px;
	padding: 0;
	text-align: center;
	background-position-x: center;
	background-position-y: center;
	background-size: cover;
}
.target-job.choice-list.visible .job-results.secteurs-activite.category-list .result h3 {
	display: block;
	width: calc(100% - 10px);
	margin: 0;
	padding: 10px 5px 20px;
	font-size: 0.85rem;
	color: #fff;
	background: #323867b3;
	border-radius: 0px 0px 10px 10px;
	transform: translateY(10px);
	transition: all 0.5s;
}
.target-job.choice-list.visible .job-results.secteurs-activite.category-list .result:hover h3 {
	transform: translateY(0px);
}

.target-job.choice-result {
	display: none;
}
.target-job.choice-result.visible {
	display: block
}
.get-job-description {
	position: absolute;
	right: 20px;
	top: 26px;
	cursor: pointer;
}

.modules-content .module-content .page .skills-list {
	display: none;
}
.modules-content .module-content .page .skills-list.visible {
	display: block;
}
.modules-content .module-content .page .skills-list h2 {
	margin: 20px 0 20px;
	padding: 5px 25px;
	font-size: 1.0rem;
	font-weight: 500;
	line-height: 1.5rem;
	text-align: left;
	color: #D8004C;
	border-radius: 10px;
	box-shadow: 0px 1px 7px 0px #d9d9d9;
}
.modules-content .module-content .page .skills-list h3 {
	margin: 20px 0 15px;
	font-size: 0.9rem;
	line-height: 1.0rem;
	font-weight: 600;
	text-align: left;
}
.modules-content .module-content .page .skills-list h4 {
	margin: 15px 0 10px;
	font-size: 0.85rem;
	line-height: 1.0rem;
	font-weight: 500;
	text-align: left;
}
.modules-content .module-content .page .skills-list p {
	
}
.modules-content .module-content .page .skills-list .item {
	position: relative;
	padding: 3px 0 3px 35px;
}
.modules-content .module-content .page .skills-list .item input[type="checkbox"] {
	left: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	cursor: pointer;
	transform: translateY(1px);
}
.modules-content .module-content .page .skills-list .item label {
	
}
.modules-content .module-content .page .link.target-job-choice-reset {
	margin: 20px 0 20px;
}

.popup.target-job-description {
	margin: 235px 0 30px;
	text-align: center;
}
.popup.target-job-description .head {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 9px 0;
	color: #fff;
	background: #D8004C;
	border-radius: 20px 20px 0 0;
	text-align: center;
}
.popup.target-job-description .close-button {
	top: 8px;
}
.popup.target-job-description .content {
	text-align: left;
	height: calc(100vh - 120px);
	padding: 50px 0 10px;
}
.popup.target-job-description .content .body {
	width: calc(100% - 50px);
	height: 100%;
	margin: 0;
	padding: 0px 25px;
	scrollbar-width: thin;
	scrollbar-color: rgb(200, 200, 200)	transparent;
	overflow-y: auto;
	overflow-x: hidden;
}
.popup.target-job-description .content .txt-box.regular {
	display: block;
	position: relative;
	margin: 10px 0 0 0;
	text-align: left;
}
.popup.target-job-description .content .txt-box h1 {
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.5rem;
	text-align: center;
	color: #D8004C;
}
.popup.target-job-description .content .txt-box h2 {
	margin: 20px 0 20px;
	padding: 5px 25px;
	font-size: 1.0rem;
	font-weight: 500;
	line-height: 1.5rem;
	text-align: left;
	color: #D8004C;
	border-radius: 10px;
	box-shadow: 0px 1px 7px 0px #d9d9d9;
}
.popup.target-job-description .content .txt-box h3 {
	font-size: 0.9rem;
	line-height: 1.0rem;
	font-weight: 600;
	text-align: left;
}
.popup.target-job-description .content .txt-box h4 {
	margin: 10px 0 5px;
	font-size: 0.85rem;
	line-height: 1.0rem;
	font-weight: 500;
	text-align: left;
	color: #d8004c;
}
.popup.target-job-description .content .txt-box p,
.popup.target-job-description .content .txt-box li {
	font-size: 0.85rem;
	line-height: 1.2rem;
	text-align: left;
}


/*/////////////////////////////////////////////////
----------------- Page ressources -----------------
/////////////////////////////////////////////////*/

.page.resource {
	margin-top: 230px;
	padding: 30px 25px 50px;
}
.page.resource .main-content {
	display: none;
}
.page.resource .main-content.visible {
	display: block;
}
.page.resource h1 {
	/* display: inline-block; */
	margin: 0 auto 30px;
	padding: 10px 40px;
	font-size: 1.1rem;
	line-height: 1.4rem;
	text-align: center;
	color: #fff;
	background: #D8004C;
	border-radius: 50px;
	font-weight: 500;
}
.page.resource h2 {
	margin: 30px 0 20px;
	font-size: 1.2rem;
	line-height: 1.4rem;
	color: #D8004C;
	font-weight: 500;
}
.page.resource .last-modification {
	margin: 0 0;
	text-align: right;
	font-size: 0.85rem;
}
.page.resource .bookmarks-list,
.page.resource .main-list,
.page.resource .modules-list {
	display: grid;
	grid-gap: 20px 0px;
}
.page.resource .modules-list {
	margin: 0;
}
.page.resource .bookmarks-list .item,
.page.resource .main-list .item,
.page.resource .modules-list .item {
	display: grid;
	grid-template-columns: 1fr 100px;
	grid-gap: 0 10px;
	align-items: center;
	padding: 10px 20px;
	border-radius: 10px;
	box-shadow: 0px 1px 7px 0px #d9d9d9;
}
.page.resource .bookmarks-list .item:hover,
.page.resource .main-list .item:hover,
.page.resource .modules-list .item:hover {
	transform: translateY(-10px);
}
.page.resource .bookmarks-list .item {
	grid-template-columns: 1fr;
	background: #edb000;
}
.page.resource .item.clicable {
	cursor: pointer;
	transition: all 0.5s;
}
.page.resource .item.clicable:hover {
	box-shadow: 0px 1px 12px 0px #c8c8c8;
}
.page.resource .main-list .item .titles,
.page.resource .modules-list .item .titles {
	
}
.page.resource .bookmarks-list .item .titles h3,
.page.resource .main-list .item .titles h3,
.page.resource .modules-list .item .titles h3 {
	margin: 5px 0;
	font-size: 1rem;
	line-height: 1.2rem;
	font-weight: 500;
	color: #333867;
}
.page.resource .bookmarks-list .item .titles h3 {
	color: #fff;
}
.page.resource .main-list .item .titles h4,
.page.resource .modules-list .item .titles h4 {
	margin: 10px 0 5px;
	font-size: 0.8rem;
	line-height: 1.0rem;
	font-weight: 400;
	color: #333867;
}
.page.resource .main-list .item .icon,
.page.resource .modules-list .item .icon {
	height: 80px;
	background-size: contain;
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
}
.page.resource .sheet-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 10px;
	align-items: center;
	justify-items: center;
	margin: 0 0 30px;
}
.page.resource .sheet-header .link.back {
	margin: 0;
}
.page.resource .sheet-header .link.back svg {
	transform: translate(-10px, 4px);
}
.page.resource .sheet-header .link.back u {
	
}
.page.resource .sheet-header .bookmark {
	position: relative;
	padding: 0 10px 0 30px;
	text-align: center;
	border: 2px solid #333867;
	border-radius: 50px;
	cursor: pointer;
}
.page.resource .sheet-header .bookmark svg {
	position: absolute;
	left: 8px;
	top: 8px;
}
.page.resource .sheet-header .bookmark p {
	display: grid;
	height: 40px;
	margin: 0;
	color: #333867;
	font-size: 0.8rem;
	line-height: 1.0rem;
	align-items: center;
}

.page.resource .module-content .practical-sheet {
	font-size: 0.9rem;
}
.page.resource .module-content .practical-sheet .introduction {
	
}
.page.resource .module-content .practical-sheet .introduction p {
	
}
.page.resource .module-content .practical-sheet h2 {
	
}
.page.resource .module-content .practical-sheet ul {
	
}
.page.resource .module-content .practical-sheet ul li {
	
}
.page.resource .module-content .practical-sheet ul li p {
	margin: 0;
}
.page.resource .module-content .practical-sheet span.internal-link {
	color: rgb(0, 219, 154);
	color: #333867;
	text-decoration: underline;
	cursor: pointer;
}
.page.resource .module-content .practical-sheet a {
	color: rgb(0, 183, 255);
	color: #333867;
}
.page.resource .module-content .practical-sheet .video {
	margin: 0 0;
	text-align: left;
}
.page.resource .module-content .practical-sheet .video .video-embed {
	text-align: left;
}
.page.resource .module-content .practical-sheet .video .video-embed iframe {
	width: 100%;
	min-height: 300px;
	margin: 20px 0 0;
	border: none;
}

.page.resource .module-content .practical-sheet div.questionnaire {
	margin: 30px 0 30px;
	padding: 20px 30px 1px;
	background: #dfdff5;
	border-radius: 10px;
}
.page.resource .module-content .practical-sheet div.questionnaire h2 {
	margin: 0px 0 15px;
	color: #333867;
}
.page.resource .module-content .practical-sheet div.questionnaire .question-titre {
	color: #333867;
	font-weight: 500;
}
.page.resource .module-content .practical-sheet div.questionnaire ul {
	margin: 10px 0 20px;
	padding: 0;
}
.page.resource .module-content .practical-sheet div.questionnaire ul li {
	display: inline-block;
	margin: 5px 10px 5px 0;
	padding: 3px 15px;
	font-size: 0.9rem;
	color: #524FB3;
	background: #fff;
	border: 1px solid #524FB3;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.5s;
}
.page.resource .module-content .practical-sheet div.questionnaire ul li:last-child {
	margin-right: 0;
}
.page.resource .module-content .practical-sheet div.questionnaire ul li.active {
	color: #fff;
	background: #524FB3;
}
.page.resource .module-content .practical-sheet .hidden {
	opacity: 0.2;
}
.page.resource .module-content .practical-sheet .situations.onglet {
	
}
.page.resource .module-content .practical-sheet .situations.onglet .tab-bar {
	margin: 0;
	/* background: aliceblue; */
}
.page.resource .module-content .practical-sheet .situations.onglet .tab-bar .tab {
	display: inline-block;
	margin: 0 0 0;
	padding: 10px 15px;
	font-size: 0.8rem;
	font-weight: 500;
	color: #043d6f;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: 10px 10px 0px 0px;
	box-shadow: 0px -2px 3px 0px #d9d9d9;
	cursor: pointer;
	transition: all 0.5s;
}
.page.resource .module-content .practical-sheet .situations.onglet .tab-bar .tab.active {
	color: #fff;
	background: #D8004C;
	box-shadow: 0px 0px 0px 0px transparent;
}
.page.resource .module-content .practical-sheet .situations.onglet .situation {
	margin: 0;
	padding: 20px 20px;
	/*background: #f6faff;*/
	border-radius: 0 10px 10px 10px;
	box-shadow: 0px 1px 7px 0px #d9d9d9;
}
.page.resource .module-content .practical-sheet .situations.onglet .situation.hidden {
	display: none;
}
.page.resource .module-content .practical-sheet .situations.onglet .situation > h2 {
	margin: 0 0 20px;
	font-size: 1.0rem;
}

.page.resource .module-content .practical-sheet .chapitre {
	padding: 5px 0px 10px;
}
.page.resource .module-content .practical-sheet .chapitre.hidden,
.page.resource .module-content .practical-sheet .chapitre .hidden {
	display:none;
}
.page.resource .module-content .practical-sheet .chapitre h2.chapter-title {
	position: relative;
	margin: 3px 0 0px;
	padding: 7px 45px 7px 20px;
	font-size: 0.9rem;
	color: #043d6f;
	border: 1px solid transparent;
	box-shadow: 0px 1px 7px 0px #d9d9d9;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.5s;
}
.page.resource .module-content .practical-sheet .chapitre > *:not(h2) {
	margin: 0 30px 0;
}
.page.resource .module-content .practical-sheet .chapitre h2.chapter-title.active {
	margin: 3px 0 15px;
	color: #fff;
	background: #D8004C;
	border: 1px solid #D8004C;
	box-shadow: none;
}
.page.resource .module-content .practical-sheet .chapitre svg {
	position: absolute;
	right: 20px;
	top: 9px;
	transition: all 0.5s;
}
.page.resource .module-content .practical-sheet .chapitre h2.chapter-title.active svg {
	transform: scale(0);
}
.page.resource .module-content .practical-sheet .chapitre h2 {
	margin: 10px 0;
	font-size: 0.9rem;
	color: #043d6f;
}
.page.resource .module-content .practical-sheet .chapitre h3 {
	margin: 10px 0;
	font-size: 0.85rem;
	font-weight: 500;
	color: #043d6f;
}
.page.resource .module-content .practical-sheet .chapitre p {
	margin-top: 5px;
	margin-bottom: 3px;
	font-size: 0.85rem;
}
.page.resource .module-content .practical-sheet table {
	margin: 10px 0 10px;
}
.page.resource .module-content .practical-sheet table th,
.page.resource .module-content .practical-sheet table td {
	padding: 2px 10px 2px;
	background: aliceblue;
}




.page.resource .module-content .practical-sheet div.resource,
.page.resource .module-content .practical-sheet div.qui-peut-maider,
.page.resource .module-content .practical-sheet div.voir-aussi,
.page.resource .module-content .practical-sheet div.pour-en-savoir-plus,
.page.resource .module-content .practical-sheet div.definitions,
.page.resource .module-content .practical-sheet div.abreviations,
.page.resource .module-content .practical-sheet div.question-reponse,
.page.resource .module-content .practical-sheet div.comment-faire-si {
	margin: 30px 0 30px;
	padding: 20px 25px;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0px 1px 7px 0px #d9d9d9;
}
.page.resource .module-content .practical-sheet div.resource h2,
.page.resource .module-content .practical-sheet div.qui-peut-maider h2,
.page.resource .module-content .practical-sheet div.voir-aussi h2,
.page.resource .module-content .practical-sheet div.pour-en-savoir-plus h2,
.page.resource .module-content .practical-sheet div.definitions h2,
.page.resource .module-content .practical-sheet div.abreviations h2,
.page.resource .module-content .practical-sheet div.question-reponse h2,
.page.resource .module-content .practical-sheet div.comment-faire-si h2 {
	margin: 0 0 0;
}
.page.resource .module-content .practical-sheet div.definitions .definition-title,
.page.resource .module-content .practical-sheet div.abreviations .abreviation-title {
	margin: 20px 0 0;
}
.page.resource .module-content .practical-sheet div.resource p,
.page.resource .module-content .practical-sheet div.qui-peut-maider p,
.page.resource .module-content .practical-sheet div.voir-aussi p,
.page.resource .module-content .practical-sheet div.pour-en-savoir-plus p,
.page.resource .module-content .practical-sheet div.definitions p,
.page.resource .module-content .practical-sheet div.abreviations p,
.page.resource .module-content .practical-sheet div.question-reponse p,
.page.resource .module-content .practical-sheet div.comment-faire-si p {
	margin: 0 0 0;
}






.page.resource .resource-choice-list .resource-choice {
	position: relative;
	display: grid;
	align-items: center;
	height: 60px;
	margin: 0 0 20px 0;
	padding: 10px 15px;
	box-shadow: 0 1px 4.2px 0px #AAAAAA;
	border-radius: 10px;
	cursor: pointer;
}
.page.resource .resource-choice-list .lock-module {
	opacity: 0.6;
	filter: grayscale(0.7);
}
.page.resource .resource-choice-list .resource-choice h2 {
	display: inline-block;
	width: calc(70% - 10px);
	margin: 0;
	font-size: 1.0rem;
	font-weight: 400;
	color: #D8004C;
}
.page.resource .resource-choice-list .resource-choice h3 {
	display: inline-block;
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.2em;
	font-weight: 400;
	text-align: center;
}


/* styles des fiches pratique */

.practical-sheet-container {
    max-width: 900px;
    margin: 0 auto;
	font-size: 0.7rem;
}

.practical-sheet-container h2.title {
    color: #000091;
    border-bottom: 3px solid #000091;
    padding-bottom: 10px;
}
.practical-sheet-container .chapter-content {
    display:none;
}
.practical-sheet-container .chapter-content.visible {
    display:block;
}


/* Structure principale */
.sp-content { margin: 20px 0; }
.sp-subchapter { margin: 20px 0 20px 20px; }

/* Titres */
.sp-title { color: #000091; margin: 20px 0 15px; }
.sp-title-alt { color: #666; font-style: italic; }
.sp-title-float { color: #333; font-weight: 600; margin: 15px 0 10px; }

/* Listes */
.sp-list { margin: 15px 0; padding-left: 30px; }
.sp-list-item { margin: 8px 0; line-height: 1.6; }

/* Alertes */
.sp-alert {
    display: flex;
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
    gap: 12px;
}
.sp-alert-warning { background: #FFF4E5; border-left: 4px solid #FF6B00; }
.sp-alert-info { background: #E3F2FD; border-left: 4px solid #2196F3; }
.sp-alert-note { background: #F3E5F5; border-left: 4px solid #9C27B0; }
.sp-alert-reminder { background: #E8F5E9; border-left: 4px solid #4CAF50; }
.sp-alert-icon { font-size: 24px; flex-shrink: 0; }

/* Blocs de cas (onglets/radio) */
.sp-case-block { margin: 20px 0; }
.sp-display-onglet .sp-case { 
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px 0;
}

/* Liens */
.sp-link-internal,
.sp-link-external { color: #000091; text-decoration: underline; }
.sp-link-external::after { content: " ↗"; }

/* Services en ligne */
.sp-service-online {
    background: #f8f9fa;
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
}

/* Mise en forme */
.sp-emphasis { font-weight: 700; }
.sp-expression { font-style: italic; }

/* style de l'historique */

.history {
	margin: 235px 0 30px;
	text-align: center;
}
.history .print-button {
	display: none;
}
.history h1 {
	margin: 260px 0 0px;
	font-size: 1.2rem;
	text-align: center;
}
.history .conversations-list {
	display: inline-block;
	width: calc(100% - 50px);
	margin: 25px 0 20px 0;
	padding: 0 25px 0 25px;
}
.history .conversations-list .analyze-container {
	display: inline-block;
	position: relative;
	width: calc(100% - 40px);
	margin: 10px 0 10px 0;
	padding: 15px 20px;
	text-align: left;
}
.history .conversations-list .analyze-container h2 {
	margin: 0;
	font-size: 1.0rem;
}
.history .conversations-list .analyze-container p {
	margin: 0;
	font-size: 0.85rem;
}
.history .conversations-list .analyze-container p.target-job {
	max-width: calc(100% - 70px);
	min-height: 22px;
	margin: 5px 0 5px;
}
.history .conversations-list .analyze-container svg {
	display: block;
	position: absolute;
	top: 50%;
	width: 20px;
	height: 20px;
}
.history .conversations-list .analyze-container svg.glass.link{
	right: 60px;
	transform: translateY(-40%);
}
.history .conversations-list .analyze-container svg.transfer.link{
	right: 17px;
	transform: translateY(-50%);
}
.history .link {
	display: none;
}
.history .link.visible {
	display: block;
	position: relative;
	margin: 40px 0 0px;
	color: rgb(153 153 153);
}
.history .link.visible svg {
	display: inline-block;
	position: absolute;
	bottom: 0;
}
.history .link.visible u {
	padding: 0 0 0 25px; 
}
.popup.history .content {
	text-align: left;
	height: calc(100vh - 120px);
	padding: 50px 0 0px;
}
.popup.history .content .body {
	width: calc(100% - 50px);
	height: 100%;
	margin: 0;
	padding: 0px 25px;
	scrollbar-width: thin;
	scrollbar-color: rgb(200, 200, 200)	transparent;
	overflow-y: auto;
	overflow-x: hidden;
}
.popup.history .content h2 {
	margin: 10px 0;
	font-size: 1.25rem;
}
.popup.history .content p.grey-txt {
	margin: 0;
	font-size: 0.9em;
}
.popup.history .content .module-txt {
	margin: 0;
	font-size: 1.0rem;
	font-weight: 500;
}
.popup.history .content .step-txt {
	margin: 20px 0 5px 0;
	font-size: 1.0rem;
	font-weight: 500;
}
.popup.history .content .module-txt.module-title {
	margin: 20px 0 0 0;
	font-size: 1.0rem;
}
.popup.history .content .txt-box.regular {
	display: block;
	position: relative;
	margin: 30px 0 5px 0;
	padding: 19px 20px 10px;
	text-align: left;
	border: 1px solid #333867;
}
.popup.history .content .txt-box h1 {
	margin: 20px 0 20px;
}
.popup.history .content .txt-box h2 {
	display: block;			/* force le retour à la ligne avant/après */
	width: fit-content;		/* fond = largeur du texte */
	max-width: 100%;		/* évite de déborder */
	margin: 20px 0 15px;
	padding: 5px 20px;
	font-size: 0.9rem;
	line-height: 1.2rem;
	text-align: left;
	color: #fff;
	background: #D3175B;
	border-radius: 50px;
}
.popup.history .content .txt-box h3 {
	font-size: 0.95rem;
	line-height: 1.3rem;
	text-align: left;
}
.popup.history .content .txt-box h4 {
	color: #D3175B;
}
.popup.history .content .txt-box p,
.popup.history .content .txt-box li {
	font-size: 0.85rem;
	line-height: 1.2rem;
	text-align: left;
}
.popup.history .content .txt-box p {
	margin: 10px 0 15px;
}
.txt-box.regular .label,
.txt-box.regular .label p {
	text-align: left;
	display: block;
	margin: -30px 20px 0 0;
	padding: 0 10px;
	font-size: 0.9rem;
	font-weight: 600;
	background-color: #FFF;
}
.popup.history .content .txt-box.regular .value {
	margin: 10px 0px 0 0;
	padding: 0;
	font-size: 0.9rem;
	background-color: #FFF;
}

.popup.history .content .txt-box.regular .item {
	position: relative;
	padding: 3px 0 3px 35px;
}
.popup.history .content .txt-box.regular .item.hidden {
	display: none;
}
.popup.history .content .txt-box.regular .item input[type="checkbox"] {
	left: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	cursor: pointer;
	transform: translateY(1px);
}
.popup.history .content .txt-box.regular .item label {
	
}

/* style de la popup lié au statistiques de l'utilisateur */
.popup.beneficiary-stat {
	position: relative;
}
.popup.beneficiary-stat .content {
	height: 70%;
	padding-bottom: 120px;
}
.popup.beneficiary-stat .content .body h2 {
	text-align: left;
}
.popup.beneficiary-stat .content .body .txt-box.regular{
	display: block;
	position: relative;
	margin: 40px 0 0 0;
	text-align: left;
}
.popup.beneficiary-stat .content .body .txt-box.regular .label {
	display: block;
	margin: -30px 20px 10px 0;
	padding: 0 10px;
	font-weight: bold;
	text-align: left;
	background-color: #FFF;
}
.popup.beneficiary-stat .content .body .txt-box.regular input,
.popup.beneficiary-stat .content .body .txt-box.regular select {
	width: 100%;
	max-width: 200px;
	padding: 4px 10px;
	font-size: 1.0rem;
	border: 0px;
	color: rgba(51, 56, 103, 1);
	font-family: var(--regular-font);
	border: 1px solid #333867;
	border-radius: 5px;
	outline: none;
}
.popup.beneficiary-stat .content .body .txt-box.regular select {
	max-width: 220px;
}
.popup.beneficiary-stat .content .button.blue {
	margin-top: 30px;
}
.popup.beneficiary-stat .content .button.beneficiary-link {
	width: 186px;
	margin: 20px 0 0;
}
.popup.beneficiary-stat .content .button.beneficiary-connect {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
}

/* styles de sélection des départements */

.select-departement {
	margin: 40px 0 20px 0;
	text-align: center;
}
.select-departement .txt-box {
	margin-bottom: 20px;
}
.select-departement .txt-box .label {
	margin-bottom: 20px;
}
.select-departement .txt-box .selected-departements {
    display: inline;
	position: relative;
}
.select-departement .txt-box .selected-departements .selected-departement {
    display: inline-block;
    padding: 5px 15px;
    margin: 5px 10px;
    box-shadow: 0 0 6.2px 0px rgba(170, 170, 170, 1);
    border-radius: 20px;
}
.select-departement .txt-box .selected-departements .selected-departement p {
    display: inline-block;
}
.select-departement .txt-box .selected-departements .selected-departement svg {
    display: inline-block;
    margin: 0 3px 0 4px;
    transform: translate(5px, 2px);
    cursor: pointer;
}

/* styles des mentions */
.data-gouv-mention {
	font-style: italic;
	margin: 0;
	margin: 20px 15px 0;
	font-size: 0.85rem;
}

/* Footer */

.footer {
	margin: 0px 0 10px;
	padding: 20px 20px;
	background: #fff;
}
.login .footer,
.forgot-pwd .footer {
	margin: -20px 0 -10px;
}
.reset-pwd .footer {
	margin: 20px 0 0px;
}
.footer p {
	margin: 2px 0;
	padding: 0;
	text-align: center;
	font-size: 0.8rem;
}
.login .footer p,
.forgot-pwd .footer p,
.reset-pwd .footer p {
	font-size: 0.8rem;
	line-height: 1.0rem;
}