/*************/
/* VARIABLES */
/*************/
:root
{
  /* COULEURS */
  --main-background-color: #024D8B;
  --content-background-color: #2C5EA1;

  --main-yellow: #F7CC47;
  --light-yellow: #FAE5A2;
  --light-light-yellow: #FEFAED;
  --yellow-transparent: rgba(255,216,88,0.18);

  /*--blue-in-form: #0569C1;*/
  --blue-in-form: #577AAF;

  --green-color-M: #2F855A;
  --light-green: rgba(87,184,148,0.20);
  
  --light-blue: #82B4E0;
  --light-light-blue: #EFF5FA;
  --bleu-ciel: #9CF9FF;
  
  --almost-white: #F7F7F7;
  --almost-black: #0C141B;
  
  --new-red: #C2410C;
  --light-red: #FBF0ED;
  
  
  /* DIMENSIONS */
  --height-of-account: 40rem;
  --height-of_scrolling: 30rem;
  
  /* COULEURS POUR LES JAUGES */
  --blue-strong: #0b5ed7;
  --blue-soft:   #9ec5fe;

  --yellow-strong: #f4b400;
  --yellow-soft:   #fde293;

  --orange-strong: #e67e22;
  --orange-soft:   #f6c28b;
  
  --green-soft:   #d7e4cf;
  --green-strong: #5f8f5a;
  
  --indigo-soft:   #d9dbf4;
  --indigo-strong: #4b50b8;

  
  --T-strong: rgb(147,248,114);
  --T-soft:   rgba(147,248,114,0.4);

  --R-strong: rgb(114,248,213);
  --R-soft:   rgba(114,248,213,0.4);

  --I-strong: rgb(114,167,248);
  --I-soft:   rgba(114,167,248,0.4);
  
  --C-strong:   rgb(242,114,248);
  --C-soft: rgba(242,114,248,0.4);
  
  --A-strong:   rgb(248,134,114);
  --A-soft: rgba(248,134,114,0.4);
  
  --M-strong:   rgb(248,221,114);
  --M-soft: rgba(248,221,114,0.4);
  
  
  --verbal-strong: rgb(136,233,242);  
  --verbal-soft: rgba(136,233,242,0.4);
  
  --logique-strong: rgb(136,153,242);  
  --logique-soft: rgba(136,153,242,0.4);
  
  --visuel-strong: rgb(198,136,242);  
  --visuel-soft: rgba(198,136,242,0.4);
  
  --inter-strong: rgb(242,136,206);  
  --inter-soft: rgba(242,136,206,0.4);
  
  --intra-strong: rgb(242,144,136);  
  --intra-soft: rgba(242,144,136,0.4);
  
  --corporel-strong: rgb(242,224,136);  
  --corporel-soft: rgba(242,224,136,0.4);
  
  --musical-strong: rgb(180,242,136);  
  --musical-soft: rgba(180,242,136,0.4);
  
  --nature-strong: rgb(136,242,171);  
  --nature-soft: rgba(136,242,171,0.4);
  
  

  --track-bg: #e9ecef;
  --thumb-border: #ffffff;
  
  
  
  
  
}


/*********/
/* FONTS */
/*********/

@font-face {
  font-family: 'title';
  font-style: normal;
  src: url('./fonts/patua-one/PatuaOne-Regular.ttf');
}

@font-face {
  font-family: 'main';
  font-style: normal;
  src: url('./fonts/barlow-semi-condensed/BarlowSemiCondensed-Regular.ttf');
}

@font-face {
  font-family: 'mainsemibold';
  font-style: normal;
  src: url('./fonts/barlow-semi-condensed/BarlowSemiCondensed-SemiBold.ttf');
}

@font-face {
	font-family: 'mainitalic';
	font-style: normal;
	src: url('./fonts/barlow-semi-condensed/BarlowSemiCondensed-Italic.ttf');
}

@font-face {
  font-family: 'mainsemibolditalic';
  font-style: normal;
  src: url('./fonts/barlow-semi-condensed/BarlowSemiCondensed-SemiBoldItalic.ttf');
}

@font-face {
  font-family: 'web_symbol';
  font-style: normal;
  src: url('./fonts/fonts_symbols/web_symbols/WebSymbols_Regular.otf');
}

/********/
/* body */
/********/

body {
  font-family:'main';
  font-size: 110%;
  background-color: var(--main-background-color);
}

b {
	color: var(--blue-in-form);
}


/***********/
/* MODALES */
/***********/
.modal {
	position:fixed;
	display:none;
	height:100vh;
	width:100%;
	padding:5vh 0;
	text-align:center;
	z-index:100;
	background-color: rgba(255, 255, 255, 0.9);
	top:0;
	left:0;
	font-size:75%;
	overflow-y: scroll;
}

.modal.big {
	padding:5vh 20%;
	z-index:90;
}

.modal .modal_content {
	padding:1rem;
	border-radius:1rem;
}

.modal.big .modal_content {
	background-color:var(--content-background-color);
	overflow-y: scroll;
	max-height: 85vh;
}

/*******************************/
/* DIV PRINCIPALES DE CONTENUS */
/*******************************/
#id_div_all_contents {
	position: relative;
	max-width: 1200px;
	margin: auto;
	background-color: var(--content-background-color);
	padding-top: 0;
	padding-bottom: 0;
	border-bottom-left-radius: 4rem;
	border-bottom-right-radius: 4rem;
}

#id_div_video {
	display: none;
	position: fixed;
	width: 1200px;
	margin: 0 auto;
	top: 0;
	z-index: 100;
	background-color: white;
	border: black 1rem solid;
	transform: translateX(-1rem);
}

#id_div_video video {
	width: 100%;
}

#id_div_video button {
	margin: 2rem 40%;
	background-color: var(--new-red);
}

#id_over_main {
	position: relative;
	text-align: center;
	padding: 1rem;
}

#id_over_main h1 {
	color: white;
}

#id_main {
	position: relative;
	background-color: white;
}

#id_top_message {
  font-family: "mainsemibolditalic";
  padding-bottom: 2rem;
  text-align: center;
}

.green {
	color: var(--green-color-M);
	padding: 1rem;
}

.red {
	color: var(--new-red);
	padding: 1rem;
}

.blue {
	color: var(--blue-in-form);
}

.blue_in_form {
    color: var(--blue-in-form);
    font-family: "mainsemibold";
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.instructions {
	text-align: left;
	padding: 1rem 2rem 2rem 2rem;
}

.symbol {
	font-family: 'web_symbol';
	font-size: 125%;
	padding: 0.5rem;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.only_small_resolutions {
	display:none;
}

/****************/
/* HAUT DE PAGE */
/****************/
#id_ontop {
	position: relative;
	padding-left: 2rem;
}

/* logo en haut à gauche */
#id_logo {
	padding-top: 1rem;
	padding-left: 2rem;
	width: 106px;
}

#id_mainbar {
  position: absolute;
  right: 2rem;
  top: 49px;
  text-align: right;
  width: 70%;
}

#id_ontop button, #id_deuxieme_phrase button, #id_bottom_accueil button {
	padding: 0.5rem 2rem;
	margin-right: 2rem;
	border-radius: 2rem;
}


/****************/
/* PIED DE PAGE */
/****************/

footer {
  position: relative;
  font-family: 'main';
  font-size: 1rem;
  width: 100%;
  left: 0%;
  color: var(--almost-white);
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  background-color: var(--almost-black);
  /*margin-bottom: 2rem;
  border-bottom-left-radius: 4rem;
  border-bottom-right-radius: 4rem;*/
}

footer h3 {
  color: var(--main-yellow);
  padding-left: 1rem;
}

footer a {
  color: var(--almost-white);
  background-color: transparent;
  border: 1px solid var(--almost-white);
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 110%;
  font-family: "mainsemibold";
  text-decoration: none;
}

footer a:hover {
  color: var(--main-yellow);
}

footer img {
  width:75%;
}

footer button {
  border-radius: 0.5rem;
  background-color: transparent;
  border: solid 1px var(--almost-white);
}


.foot {
  display: inline-block;
  vertical-align: top;
  width: 18%;
  background-color: var(--almost-black);
}

#id_foot1 {
  margin-left: 11%;
}

#id_foot2 {
  margin-left: 2%;
}

#id_foot3 {
  margin-left: 2%;
}

#id_foot4 {
  margin-left: 2%;
}



/**********/
/* CADRES */
/**********/
.cadre_standard {
	position: relative;
	padding: 1rem;
	margin: 2rem 4rem 2rem 4rem;
	background-color: white;
}

.cadre_standard h3 {
	text-align: center;
}

.hoverTextBlue:hover {
	color: var(--blue-in-form);
}

.centralInfoMessage, .leftInfoMessage {
	position: fixed;
	background-color: black;
	color: white;
	text-align: center;
	border: 5px solid var(--blue-in-form);
	padding: 1rem;
}

.centralInfoMessage {
	top: 20%;
	left: 20%;
	width: 60%;
}

.leftInfoMessage {
	top: 5%;
	left: 2.5%;
	width: 20%;
}

.bgH1,.bgH2,.bgH3,.bgH4,.bgH5,.bgH6,.bgH7,.bgH8,.bgV1,.bgV2,.bgV3,.bgV4,.bgV5,.bgV6,.bgV7,.bgV8, .bgVt1, .bgVt2, bgHt1, bgHt2 {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.bgH1 table,.bgH2 table,.bgH3 table,.bgH4 table,.bgH5 table,.bgH6 table,.bgH7 table,.bgH8 table,.bgV1 table,.bgV2 table,.bgV3 table,.bgV4 table,.bgV5 table,.bgV6 table,.bgV7 table,.bgV8 table {
	background-color: rgba(255,255,255,0.4);
	border-radius: 0.5rem;
}

.bgH1 {
	background-image:url('/images/backgrounds/h1.webp');
}
.bgH2 {
	background-image:url('/images/backgrounds/h2.webp');
}
.bgH3 {
	background-image:url('/images/backgrounds/h3.webp');
}
.bgH4 {
	background-image:url('/images/backgrounds/h4.webp');
}
.bgH5 {
	background-image:url('/images/backgrounds/h5.webp');
}
.bgH6 {
	background-image:url('/images/backgrounds/h6.webp');
}
.bgH7 {
	background-image:url('/images/backgrounds/h7.webp');
}
.bgH8 {
	background-image:url('/images/backgrounds/h8.webp');
}
.bgV1 {
	background-image:url('/images/backgrounds/v1.webp');
}
.bgV2 {
	background-image:url('/images/backgrounds/v2.webp');
}
.bgV3 {
	background-image:url('/images/backgrounds/v3.webp');
}
.bgV4 {
	background-image:url('/images/backgrounds/v4.webp');
}
.bgV5 {
	background-image:url('/images/backgrounds/v5.webp');
}
.bgV6 {
	background-image:url('/images/backgrounds/v6.webp');
}
.bgV7 {
	background-image:url('/images/backgrounds/v7.webp');
}
.bgV8 {
	background-image:url('/images/backgrounds/v8.webp');
}
.bgVt1 {
	background-image:url('/images/backgrounds/vt1.svg');
}
.bgVt2 {
	background-image:url('/images/backgrounds/vt2.svg');
}
.bgHt1 {
	background-image:url('/images/backgrounds/ht1.svg');
}
.bgHt2 {
	background-image:url('/images/backgrounds/ht2.svg');
}

/*******************************/
/* RÉINITIALISATIONS DE STYLES */
/*******************************/
input[type="submit"], input[type="button"] {
  -webkit-appearance: none;
  -webkit-border-radius:0;
  border-radius:0;
}

select {
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

select.smallselect {
  padding-right: 0;
  margin-left: 0.5rem;
  height: 2rem;
  min-width: 5rem;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
}



/***********************************/
/* BALISES DE TITRES & SOUS-TITRES */
/***********************************/
h1, h2 {
	letter-spacing: 0.1rem;
	text-align: center;
	margin: 0;
	padding: 1rem;
}

.title {
  font-family: "title";
  font-weight: 300;
}

#id_over_main h1 {
  color: #2F2F2F;
  background-color: white;
  border-radius: 0.5rem;
  display: inline-block;
  border: 1px solid #2F2F2F;
  padding: 1rem 2rem;
  font-family: "title";
  font-weight: 300;
  font-size: 150%;
}


#id_mon_compte h2 {
	color: var(--blue-in-form);
	background-color: var(--main-yellow);
	font-family: "title";
}

#id_mon_compte h2::before {
	content: "~\a0";
}

#id_mon_compte h2::after {
	content: "\a0~";
}

/***************/
/* PARAGRAPHES */
/***************/
p {
	padding: 0.5rem 1rem;
	font-size: 120%;
	text-align: justify;
	line-height: 1.5;
}

/**********/
/* LISTES */
/**********/
li {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	margin: 0.5rem;
}

/**********/
/* LABELS */
/**********/
label {
  font-family: "mainsemibold"
}


/***********/
/* BOUTONS */
/***********/
input[type="submit"], input[type="button"], button {
	border: none;
	background-color: var(--almost-black);
	color: var(--almost-white);
	font-size: 110%;
	padding: 0.5rem 1.5rem;
	font-family: "mainsemibold";
	border-radius: 0.5rem;
	cursor: pointer;
}

button:hover {
	color: var(--main-yellow);
}

button:disabled {
	color: #CCC !important;
	background-color: #EEE !important;
}

.back {
  padding-left: 10%;
  text-align: left;
}

button.inForm {
	background-color: var(--blue-in-form);
}

button.inFormRed {
	background-color: var(--new-red);
}


/*********/
/* TABLE */
/*********/
table {
	text-align: center;
	background-color: white;
	margin: 1rem;
}

td, th {
	padding: 0.5rem;
}

tr:hover {
	background-color: var(--corporel-soft);
}

#id_mon_compte tr {
	background-color: var(--light-light-blue);
}

#id_credits tr {
	height: 3rem;
}
#id_credits td, #id_credits th {
	width: 25%;
}
tr.tr_credits:hover {
	background-color: var(--light-green) !important;
}

table.talbeWithBorders {
	border-collapse: collapse;
	background-color: var(--light-light-blue);
}

table.talbeWithBorders th, table.talbeWithBorders td {
	border: 1px solid black;
}

table.talbeWithBorders th {
	background-color: var(--blue-in-form);
	color: white;
}

table.talbeWithBorders tr:hover {
	background-color: inherit;
}

tr.space {
    height: 2em;
}

td.borderedAll {
    border: 1px solid black;
}

td.borderedTRB {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

table.withoutHover tr:hover {
	background-color: inherit;
}

/********************/
/* INPUTS STANDARDS */
/********************/
input, textarea, a {
    display: inline-block;
    padding: 0.25em 1em;
    margin-top: 0.125em;
    margin-bottom: 0.5em;
}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea {
    width: 22.5rem;
    font-size: 105%;
    max-width: 100%;
    border: none;
}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"] {
    height: 1.5em;
    border-bottom: 2px solid var(--blue-in-form);
    background-color: transparent;
    text-align: left;
}

textarea {
    text-align: left;
    border-bottom: 2px solid var(--blue-in-form);
    border-left: 2px solid var(--blue-in-form);
    border-right: 2px solid var(--blue-in-form);
    margin-top: 0.5em;
}

table.notBig input[type="text"] {
	width: 15rem;
	height: 1rem;
}

input[type="number"] {
    height: 1.5em;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--blue-in-form);
    width: 8rem;
    font-size: 100%;
    text-align: center;
}

/***********************/
/* JAUGES type="range" */
/***********************/

/*
input[type=range] {
  margin: 0.25rem 0.5rem;
  padding: 0;
  -webkit-appearance: none;
  height:2rem;
  background-color: transparent;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  animate: 0.2s;
  background: #FFD84F;
  border: 0px solid #000000;
  border-radius: 0.2rem;
  box-shadow: 0px 0px 0px #000000;
  cursor: pointer;
  height: 0.4rem;
  width: 100%;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--blue-in-form);
  border: 1px solid white;
  border-radius: 1.5rem;
  box-shadow: 0px 0px 0px #000000;
  cursor: pointer;
  height: 1.5rem;
  margin-top: -0.6rem;
  webkit-appearance: none;
  width: 1.5rem;
}


input[type=range]::-moz-range-track {
  animate: 0.2s;
  background: #FFD84F;
  border: 0px solid #000000;
  border-radius: 0.2rem;
  box-shadow: 0px 0px 0px #000000;
  cursor: pointer;
  height: 0.4rem;
  width: 100%;
}

input[type=range]::-moz-range-thumb {
  background: var(--blue-in-form);
  border: 1px solid white;
  border-radius: 1.5rem;
  box-shadow: 0px 0px 0px #000000;
  cursor: pointer;
  height: 1.5rem;
  width: 1.5rem;
}

input[type=range]::-ms-track {
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
  cursor: pointer;
  height: 0.4rem;
  width: 100%;
}

input[type=range]::-ms-fill-lower {
  background: #FFD84F;
  border: 0px solid #000000;
  border-radius: 0.2rem;
  box-shadow: 0px 0px 0px #000000;
}

input[type=range]::-ms-fill-upper {
  background: #D5D5D5;
  border: 0px solid #000000;
  border-radius: 0.2rem;
  box-shadow: 0px 0px 0px #000000;
}

input[type=range]::-ms-thumb {
  margin-top:1px;
  background: #0569C1;
  border: 1px solid white;
  border-radius: 1.5rem;
  box-shadow: 0px 0px 0px #000000;
  cursor: pointer;
  height: 1.5rem;
  width: 1.5rem;
}

input[type=range]:focus::-ms-fill-lower {
  background: #FFD84F;
}

input[type=range]:focus::-ms-fill-upper {
  background: #D5D5D5;
}

input[type="range"]::-moz-range-progress {
  background-color: #FFD84F;
}
input[type="range"]::-moz-range-track {
  background-color: #D5D5D5;
}
*/

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--track-bg);
  border-radius: 4px;
  outline: none;
  margin: 0.25rem 0.5rem;
  padding: 0;
}

/* Track */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 4px;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 4px;
}

/* Thumb (valeur sélectionnée = point fort) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
  border: 3px solid var(--thumb-border);
  margin-top: -6px;
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
  border: 3px solid var(--thumb-border);
}

/* par défaut */
input[type="range"] {
  color: var(--blue-strong);
  background: linear-gradient(
    to right,
    var(--blue-soft),
    var(--blue-strong)
  );
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--blue-soft),
    var(--blue-strong)
  );
}

input[type="range"]::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--blue-soft),
    var(--blue-strong)
  );
}

input[type="range"]:focus {
  cursor:pointer;
}


/* range jaune */
input[type="range"].range--yellow {
  color: var(--yellow-strong);
}

input[type="range"].range--yellow::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--yellow-soft),
    var(--yellow-strong)
  );
}

input[type="range"].range--yellow::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--yellow-soft),
    var(--yellow-strong)
  );
}

/* range orange */
input[type="range"].range--orange {
  color: var(--orange-strong);
}

input[type="range"].range--orange::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--orange-soft),
    var(--orange-strong)
  );
}

input[type="range"].range--orange::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--orange-soft),
    var(--orange-strong)
  );
}

/* range vert */
input[type="range"].range--green {
  color: var(--green-strong);
}

input[type="range"].range--green::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--green-soft),
    var(--green-strong)
  );
}

input[type="range"].range--green::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--green-soft),
    var(--green-strong)
  );
}

/* range indigo */
input[type="range"].range--indigo {
  color: var(--indigo-strong);
}

input[type="range"].range--indigo::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--indigo-soft),
    var(--indigo-strong)
  );
}

input[type="range"].range--indigo::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--indigo-soft),
    var(--indigo-strong)
  );
}

/* range T */
input[type="range"].range--T {
  color: var(--T-strong);
}

input[type="range"].range--T::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--T-soft),
    var(--T-strong)
  );
}

input[type="range"].range--T::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--T-soft),
    var(--T-strong)
  );
}

/* range R */
input[type="range"].range--R {
  color: var(--R-strong);
}

input[type="range"].range--R::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--R-soft),
    var(--R-strong)
  );
}

input[type="range"].range--R::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--R-soft),
    var(--R-strong)
  );
}

/* range I */
input[type="range"].range--I {
  color: var(--I-strong);
}

input[type="range"].range--I::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--I-soft),
    var(--I-strong)
  );
}

input[type="range"].range--I::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--I-soft),
    var(--I-strong)
  );
}

/* range C */
input[type="range"].range--C {
  color: var(--C-strong);
}

input[type="range"].range--C::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--C-soft),
    var(--C-strong)
  );
}

input[type="range"].range--C::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--C-soft),
    var(--C-strong)
  );
}

/* range A */
input[type="range"].range--A {
  color: var(--A-strong);
}

input[type="range"].range--A::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--A-soft),
    var(--A-strong)
  );
}

input[type="range"].range--A::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--A-soft),
    var(--A-strong)
  );
}

/* range M */
input[type="range"].range--M {
  color: var(--M-strong);
}

input[type="range"].range--M::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--M-soft),
    var(--M-strong)
  );
}

input[type="range"].range--M::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--M-soft),
    var(--M-strong)
  );
}


/* range verbal */
input[type="range"].range--verbal {
  color: var(--verbal-strong);
}

input[type="range"].range--verbal::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--verbal-soft),
    var(--verbal-strong)
  );
}

input[type="range"].range--verbal::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--verbal-soft),
    var(--verbal-strong)
  );
}

/* range logique */
input[type="range"].range--logique {
  color: var(--logique-strong);
}

input[type="range"].range--logique::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--logique-soft),
    var(--logique-strong)
  );
}

input[type="range"].range--logique::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--logique-soft),
    var(--logique-strong)
  );
}

/* range visuel */
input[type="range"].range--visuel {
  color: var(--visuel-strong);
}

input[type="range"].range--visuel::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--visuel-soft),
    var(--visuel-strong)
  );
}

input[type="range"].range--visuel::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--visuel-soft),
    var(--visuel-strong)
  );
}

/* range inter */
input[type="range"].range--inter {
  color: var(--inter-strong);
}

input[type="range"].range--inter::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--inter-soft),
    var(--inter-strong)
  );
}

input[type="range"].range--inter::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--inter-soft),
    var(--inter-strong)
  );
}

/* range intra */
input[type="range"].range--intra {
  color: var(--intra-strong);
}

input[type="range"].range--intra::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--intra-soft),
    var(--intra-strong)
  );
}

input[type="range"].range--intra::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--intra-soft),
    var(--intra-strong)
  );
}

/* range corporel */
input[type="range"].range--corporel {
  color: var(--corporel-strong);
}

input[type="range"].range--corporel::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--corporel-soft),
    var(--corporel-strong)
  );
}

input[type="range"].range--corporel::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--corporel-soft),
    var(--corporel-strong)
  );
}

/* range musical */
input[type="range"].range--musical {
  color: var(--musical-strong);
}

input[type="range"].range--musical::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--musical-soft),
    var(--musical-strong)
  );
}

input[type="range"].range--musical::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--musical-soft),
    var(--musical-strong)
  );
}

/* range nature */
input[type="range"].range--nature {
  color: var(--nature-strong);
}

input[type="range"].range--nature::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--nature-soft),
    var(--nature-strong)
  );
}

input[type="range"].range--nature::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--nature-soft),
    var(--nature-strong)
  );
}

/* range yellowToBlue */
input[type="range"].yellowToBlue {
	color: black;
}


input[type="range"].yellowToBlue::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #F7D24C 0%,
    #F7D24C 50%,
    #3B6FB6 50%,
    #3B6FB6 100%
  );
}
input[type="range"].yellowToBlue::-moz-range-track {
  background: linear-gradient(
    to right,
    #F7D24C 0%,
    #F7D24C 50%,
    #3B6FB6 50%,
    #3B6FB6 100%
  );
}






#id_Q_form tr:hover {
	background: inherit;
}



/******************************/
/* RADIO BUTTONS & CHECKBOXES */
/******************************/
[type="radio"], [type="checkbox"] {
  display: none;
}


[type="radio"] + label {
  background-image: url('./images/formulaires/radio.svg');
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 2rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

[type="radio"]:checked + label {
  background-image: url('./images/formulaires/radio_checked.svg');
}


[type="radio"].right_bar + label::after {
	 content: "";
  position: absolute;
  left: 1.5rem;
  top: 50%;
  height: 1px;
  width: 2.25rem;
  background: black;
  border-radius: 999px;
  pointer-events: none;
}

[type="radio"].right_bar + label {
	margin-right:2rem;
}


[type="checkbox"] + label {
  background-image: url('./images/formulaires/checkbox.svg');
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 2rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  cursor:pointer;
}

[type="checkbox"]:checked + label {
  background-image: url('./images/formulaires/checkbox_checked.svg');
}

[type="checkbox"]:disabled+label {
  opacity: 0.3;
}


/**********/
/* SELECT */
/**********/
select {
    font-family: 'main';
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    height: 3rem;
    color: white;
    padding-left: 1rem;
    padding-right: 2rem;
    font-family: "mainsemibold";
    background: url('./images/formulaires/triangle.svg') no-repeat right var(--almost-black);
    background-size: 1.5rem;
    border-radius: 0.25rem;
    cursor:pointer;
}



/*********/
/* TESTS */
/*********/
.RIASEC_Q, .PERSO_Q {
	margin: auto;
	padding: 1rem 2rem 2rem 2rem;
	background-color: var(--light-light-blue);
	border-bottom: solid 4px black;
}

.PERSO_Q {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.RIASEC_Q h3 {
	text-align: center;
}

.RIASEC_Q table {
	width: 80%;
	margin-left: 10%;
	border-collapse: collapse;
}

.RIASEC_Q table tr {
	border-bottom: solid 1px var(--light-light-blue);
}

.PERSO_Q tr {
	height: 5rem;
}

.PERSO_Q tr:hover {
	background-color: inherit;
}

.PERSO_A {
	margin-left: 2.5%;
	margin-right: 2.5%;
	font-family:'mainsemibold';
	display:inline-block;
}

.rowH3 tr {
	height: 3rem !important;
}


#id_RIASEC_RESULTS input[type="range"], #id_APTITUDES_RESULTS input[type="range"] {
	width: 100%;
}

.synthese_test {
	font-size: 125%;
	background-color: var(--light-light-blue);
	padding: 1rem;
}

.synthese_test p, .synthese_test ul {
	margin: auto;
	margin-top: 2rem;
	margin-bottom: 2rem;
	width: 60%;
	text-align: justify;
}

.synthese_test button {
	background-color: var(--blue-in-form);
}

.info_tableau_metiers, .info_jeune {
	border: solid 2px var(--light-blue);
	margin: 1rem 2rem;
	background: url(./images/other/eureka.webp);
	background-size: 6rem;
	background-repeat: no-repeat;
	padding: 1rem 2rem 1rem 6rem;
	min-height: 6rem;
}

/****************************************/
/* ÉLÉMENTS COMMUNS À TOUTES LES PAGES  */
/****************************************/

/* bouton de retour en haut de page */
#id_button_top_right {
  z-index: 10;
  position: fixed;
  right: 0.75%;
  bottom:10%;
  height: 5rem;
  width: 5rem;
  /*background-color: black;*/
  -webkit-animation-name: top_button_anim; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
  animation-name: top_button_anim;
  animation-duration: 0.5s;
  cursor: pointer;
}

#id_button_top_right::after {
  content: 'retour en haut de page';
  position: fixed;
  width: 7rem;
  text-align: center;
  transform: translate(-80px,35px);
  color: white;
}

.top_arrow {
  width: 60%;
}

@-webkit-keyframes top_button_anim {
    from {opacity:0;}
    to {opacity:1;}
}




/***********/
/* ACCUEIL */
/***********/
.cadre_accueil h2 {
	text-align: left;
}

.cadre_accueil p {
	margin-right: 4rem;
}

#id_premiere_phrase {
	/*border-left: 1rem solid var(--main-yellow);*/
	font-family: "title";
	color: var(--blue-in-form);
	padding-left: 2rem;
	font-size: 250%;
	text-align: left;
	margin-bottom: 3rem;
	margin-top: 2rem;
}

#id_deuxieme_phrase {
	color: var(--almost-black);
	font-size: 135%;
	font-family: "mainsemibold";
	line-height: 2.5rem;
	padding-left: 2rem;
}

#id_accueil_part1 h2, #id_accueil_part2 h2 {
	font-family: "title";
	font-weight: 300;
	font-size: 150%;
}

#id_accueil_part1 h3, #id_accueil_part2 h3 {
	text-align: center;
	text-decoration-line: overline;
	font-size: 135%;
}

#id_accueil_part1 h3 {
	color: var(--new-red);
}

#id_accueil_part2 h3 {
	color: var(--blue-in-form);
}

#id_accueil_part1 .partLeft, #id_accueil_part1 .partRight {
	display: inline-block;
	width: 42.5%;
	margin-left: 2.5%;
	margin-right: 2.5%;
}

#id_accueil_part2 .partLeft, #id_accueil_part2 .partRight {
	display: inline-block;
	width: 42.5%;
	margin-left: 2.5%;
	margin-right: 2.5%;
}

#id_accueil_part1 li {
	font-size: 120%;
}

#id_accueil_part1 b {
	color: var(--blue-in-form);
}

#id_accueil_part2 b {
	color: var(--new-red);
}

#id_bottom_accueil {
	background: linear-gradient(235deg, var(--light-red) 62.5%, var(--content-background-color) 37.5%);
}

.rac {
	margin-top:0;
	font-style:italic;
	font-weight:bold;
	width:70%;
	text-align:center;
	border:solid var(--main-background-color) 2px;
	border-radius:0.5rem;
}

.icon_block {
	margin-bottom: 5rem;
	width: 33.3%;
	display: inline-block;
	text-align: center;
	vertical-align: top;
}

.icon_block_image img {
	width: 25%;
}

.icon_block_title, .icon_block_text {
	width: 75%;
	margin-left: 12.5%;
}

.icon_block_title {
	font-family: 'mainsemibold';
	margin-bottom: 0.75rem;
	font-size: 125%;
}

.testimonial_citation {
	position: relative;
	max-width: 80%;
	margin-left: 0;
	display: inline-block;
}

.testimonial_citation::before {
  content: "“";
  position: absolute;
  left: -0.6em;
  top: -0.2em;
  font-size: 3.2rem;
  font-family: serif;
  color: var(--content-background-color);
  line-height: 1;
}

.testimonial_citation::after {
  content: "”";
  position: absolute;
  right: -0.4em;
  bottom: -0.4em;
  font-size: 3.2rem;
  font-family: serif;
  color: var(--content-background-color);
  line-height: 1;
}

#id_techno_bloc_1 {
	background-image: url("./images/accueil/background_techno.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 22.5rem;
}
#id_techno_bloc_1 img {
	width: 42.5%; margin-left: 52.5%;margin-top:4rem;
}

#id_bouton_decouvrir {
	  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;
  padding: 0 22px;

  border-radius: 14px;
  /*border: 2px solid #0b3b86;*/

  background-color: var(--new-red);
  color: #ffffff;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;

  box-shadow: 0 10px 22px rgba(11, 59, 134, 0.18);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

#id_bouton_decouvrir:hover{
  transform: translateY(-1px);
  /*background-color: #0a3477;*/
  border-color: #0a3477;
  box-shadow: 0 14px 28px rgba(11, 59, 134, 0.22);
}

#id_bouton_decouvrir:active{
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(11, 59, 134, 0.18);
}

#id_bouton_decouvrir:focus-visible{
  outline: 3px solid rgba(248, 204, 71, 0.55);
  outline-offset: 3px;
}

#id_technologie_button {
	position: absolute; top: 49px;
	left: 200px;
	background-color: transparent;
	border: solid var(--content-background-color) 2px;
	color: var(--content-background-color);
}

#id_bilans_button {
	position: absolute; top: 49px;
	left: 200px;
	background-color: var(--new-red);
	border: none;
	color: white;
}

#id_bilans_button:hover {
	color: var(--main-yellow);
}

.accueil_top {
	display: flex;
  min-height: 90vh;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 55%,
    #0a4fa3 55%,
    #083b7a 100%
  );
  background-image: url("./images/accueil/robot_big5.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  /* important pour que l'image s'exprime */
  min-height: 90vh;
}

.accueil_top #id_first_left_block_accueil {
  flex: 1;
  padding: 0 2rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index:2;
  max-width:50%;
}

.accueil_top #id_first_right_block_accueil {
	flex: 1;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.accueil_top #id_first_right_block_accueil img {
	position: absolute;
  top: 10%;
  right: 5%;
  max-width: 420px;
  height: auto;
}

.accueil_top .accueil_top_curves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Courbe principale */
.accueil_top .accueil_top_curves::before {
  content: "";
  position: absolute;

  /* ancrage bas + débordement à droite */
  right: -22%;
  bottom: -45%;

  /* très large, pas très haute => forme de vague */
  width: 85%;
  height: 95%;

  background: linear-gradient(135deg, #2e6fc4 0%, #0a4fa3 55%, #083b7a 100%);

  /* clé : courbe “vague”, pas capsule */
  border-top-left-radius: 900px 520px;
  border-top-right-radius: 0 0;
  border-bottom-left-radius: 0 0;
  border-bottom-right-radius: 0 0;
}

/* Courbe secondaire (plus claire) */
.accueil_top .accueil_top_curves::after {
  content: "";
  position: absolute;

  right: -28%;
  bottom: -52%;

  width: 95%;
  height: 95%;

  background: linear-gradient(135deg, #ffffff 0%, #cfe0fb 35%, #2e6fc4 100%);
  opacity: 0.55;

  border-top-left-radius: 980px 560px;
}

#id_approche_globale {
	position: absolute;
	left: 12.5%;
	top: 25%;
	width: 35%;
}

#id_img_idea {
	position: absolute;
	bottom: -5%;
	left: 2.5%;
	width: 35%;
}

#id_bloc_with_icons {
	width: 80%; margin-left: 10%;
}

.div_calendar {
	display:none;
	position: fixed;
	height: 100vh;
	width: 100%;
	padding: 0 0;
	text-align: center;
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.9);
	top: 0;
	left: 0;
	overflow-y: scroll;
}

.jsCalendar.classic-theme thead {
	background-color: var(--blue-in-form) !important;
}

.jsCalendar tbody td.jsCalendar-current {
	background-color: var(--blue-in-form) !important;
}

#id_img_first_accueil {
	width: 145%;
	margin-top: 1rem;
	margin-bottom: 1rem;
	z-index: 10;
	transform: translate(-22.5%, 6rem);
}

/*
.div_calendar div {
  width: 35rem;
  margin-left: calc(50% - 17.5rem);
  background-color: var(--blue-in-form);
  margin-top: 2rem;
  padding-bottom: 2rem;
  border-radius: 1rem;
}
*/


.testimonials {
	background-color: var(--light-red);
	margin: 1rem auto;
	position:relative;
	background-image: url("./images/accueil/temoignages_background.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#id_testimonials_list {
	padding-bottom:1rem;
	height:25rem;
	align-items: center;
	display: flex;
	text-align: center;
}

#id_testimonials_list p, #id_testimonials_list h3, #id_testimonials_list h4 {
	margin: 0.5rem auto;
}

#id_testimonials_list p {
	padding:0.25rem 1rem;
}

#id_testimonials_list h4 {
	font-family: "title";
}

.testimonial {
	opacity:0;
	transition: opacity 1s;
	margin:auto;
}

.temoignage_titre {
  position: relative;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.temoignage_titre::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;          /* longueur du trait */
  height: 2px;          /* épaisseur */
  background-color: var(--content-background-color); /* beige chaud */
  border-radius: 2px;
}

.temoignage_titre::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;           /* longueur du trait */
  height: 1.5px;         /* légèrement plus fin que celui du dessus */
  background-color: var(--content-background-color); /* beige chaud discret */
  border-radius: 2px;
}

.testimonial_stars {
	text-align:center;
}

.testimonial_stars img {
	height:1rem;
}



/***************/
/* TECHNOLOGIE */
/***************/

.techno_header {
	position: relative;
  z-index: 10;
  display: block;
  color: black;
  padding: 1rem;
  font-size: 135%;
}

.techno_bloc {
	position: relative;
	margin-bottom: 2rem;
}

.techno_title {
	color: var(--content-background-color);
	position: relative;
	z-index: 10;
}

.techno_bloc .techno_text {
	font-size: 115%;
	line-height: 1.75rem;
	display: inline-block;
	margin-top:1rem;
}

#id_testez_gratuitement_button {
	color: var(--content-background-color);
	border: solid var(--content-background-color) 2px;
	background-color: transparent;
	position: absolute;
	top: 49px;
	left: 200px;
}

/**************/
/* NOS BILANS */
/**************/
.nos-bilans-1 {
	background:url('./images/bilans/1.webp');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
}

.nos-bilans-1-img {
	display:none;
}

.nos-bilans-2 {
	width:80%;
	margin-left:10%;
}

.nos-bilans-3 {
	width:90%;
	margin-left:5%;
}
.nos-bilans-3 h2 {
	text-align: left;
	color: var(--main-background-color);
}

.nos-bilans-3 a {
	padding:0;
	margin:0;
}

.nos-bilans-3 ol {
	counter-reset: o1;
}

.nos-bilans-3 li {
	font-size:115%;
	list-style: none;
}

.nos-bilans-3 li:before {
	counter-increment:o1;
	content: counter(o1) ". ";
}

.nos-bilans-3 ol ol {
	counter-reset: o2;
}

.nos-bilans-3 ol ol li {
	font-size:100%;
}

.nos-bilans-3 ol ol li:before {
	counter-increment: o2;
	content: counter(o2, lower-alpha) ") ";
}

.nos-bilans-3 ul {
	counter-reset: o1;
}


/****************/
/* OUTPLACEMENT */
/****************/
.outplacement {
	margin-left: 10%;
	margin-right: 10%;
	padding-bottom:2rem;
}

.outplacement h1 {
	color:var(--new-red);
}

.outplacement h2 {
	color:var(--blue-in-form);
}

.outplacement li {
	font-size:120%;
	line-height:1.5;
}

.outplacement_1 h1 {
	display:inline-block;
	width:40%;
	left:0;
	top:5rem;
	position:absolute;
}
.outplacement_1 img {
	display:inline-block;
	width:50%;
	margin-left:45%;
}

.outplacement_2 p {
	display:inline-block;
	width:40%;
	left:0;
	top:2rem;
	position:absolute;
}

.outplacement_2 .img1 {
	display:inline-block;
	width:50%;
	margin-left:45%;
}

.outplacement_2 .img2 {
	position:absolute;
	opacity:1;
	bottom:0;
	right:57.5%;
	width:8rem;
}

.outplacement_table_form {
	margin: auto;
	background-color:var(--almost-white);
	padding: 2rem 4rem;
	border-radius: 0.5rem;
	width:100%;
	z-index:2;
	background-image:url('/images/outplacement/send.webp');
	background-size: auto 60%;
	background-position: 95% 75%;
	background-repeat: no-repeat;
}

.outplacement_table_form tr:hover {
	background-color: transparent;
}

#id_outplacement_error_message {
	position:absolute;
	width:30%;
	top:2rem;
	right:5%;
	color:var(--new-red);
	font-weight:bold;
} 

/***********/
/* CONTACT */
/***********/
#id_connect_character {
  position: absolute;
  left: 0;
  bottom:0;
  width: 25%;
}

.bigForm.form_contact {
	background-image: url("./images/contact/contact.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#id_form_contact {
	width: 420px;
  max-width: 100%;
  padding: 42px 38px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(6, 105, 193, 0.18);
}


/***************************/
/* CONNEXION - INSCRIPTION */
/***************************/
.error_message {
    color: var(--new-red);
    font-weight: bold;
    font-size: 125%;
    text-align: justify;
    max-width: 30rem;
}

.icon_info {
    width: 2rem;
    margin-left: 0.5rem;
    transform: translateY(0.5rem);
    display: inline-block;
    z-index: 10;
}

.icon_info img {
    width: 2rem !important;
}

.icon_info .icon_info_message {
    position: absolute;
    top: 0;
    right: -10rem;
    transform: translateY(3rem);
    width: 20rem;
    font-size: 1rem;
    display: none;
    font-family: "mainsemibolditalic";
    padding: 1rem;
    box-shadow: 0px 0px 15px 5px #CCC;
    background-color: white;
    z-index: 10;
}

#id_mdp_oublie {
    color: black;
    padding-left: 0;
}

#id_login_container, #id_contact_container {
	  position: relative;
  min-height: 100vh;

  /* Image de fond */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  /* Sécurité visuelle */
  background-color: #f4f7fb;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 4vw;
  box-sizing: border-box;
}
#id_login_container {
	background-image: url("./images/connexion/bg_connexion.webp");
}
#id_contact_container {
	background-image: url("./images/contact/contact.webp");
}



.login-card {
  width: 420px;
  max-width: 100%;
  padding: 42px 38px;

  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);

  box-shadow: 0 20px 60px rgba(6, 105, 193, 0.18);
}

.connexion_field {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 18px;
  padding: 14px 16px;

  background: rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  border: 1px solid rgba(6, 105, 193, 0.15);

  transition: border-color 0.2s, box-shadow 0.2s;
}

.connexion_field:focus-within {
  border-color: var(--blue-in-form);
  box-shadow: 0 0 0 3px rgba(6, 105, 193, 0.12);
}

.connexion_field input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 1rem;
  background: transparent;
  color: black;
}



/**************/
/* MON-COMPTE */
/**************/
#id_left_bar {
	width: 15%;
	height: var(--height-of-account);
	display: inline-block;
	background-color: var(--main-yellow);
	padding-top: 3rem;
}

#id_left_bar table {
	background-color: transparent;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

#id_left_bar table tr {
	height: 4rem;
}

#id_left_bar table button {
	width: 100%;
}

#id_mon_compte {
	position: absolute;
	left: 15%;
	top: 0;
	width: 85%;
	height: var(--height-of-account);
	overflow-y: scroll;
}

.scrolling {
	margin: auto;
	width: 80%;
	height: var(--height-of_scrolling);
	overflow-y: scroll;
	background-color: white;
}

#id_credits_premiere_phrase {
	margin-top: 1rem;
}

#id_credits_deuxieme_phrase {
	margin: 0 5rem;
	font-family: 'mainitalic';
}



/***********************/
/* COMPTE BÉNÉFICIAIRE */
/***********************/

.menu_main_container {
	position:relative;
background:
        radial-gradient(
            1200px 600px at 50% 0%,
            rgba(247, 204, 71, 0.85) 0%,
            rgba(247, 204, 71, 0.45) 30%,
            rgba(247, 204, 71, 0.00) 65%
        ),
        linear-gradient(
            to bottom,
            rgb(247, 204, 71) 0%,
            rgb(242, 176,  ninety? )
        );
}

.menu_vertical_barre {
	position: absolute;
    top: 0;
    left: 1rem;
    width: 0;
    height: 100%;
    background: linear-gradient(
        to bottom,
        #2ec4b6 0%,
        #6ee7b7 18%,
        #facc15 38%,
        #f59e0b 55%,
        #ef4444 72%,
        #9f1239 100%
    );
    border-radius: 8px;
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.35),
        inset -1px 0 0 rgba(255, 255, 255, 0.25);
    pointer-events: none;
    z-index: 1;
}

.menu_vertical_barre0 {
	position: absolute;
    top: 0;
    left: 1.6rem;
    width: 0;
    height: 100%;
    background-color: 0;
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
    background-color:white;
}


/* Halo dense (proche de la barre) */
.menu_vertical_barre::before {
    content: "";
    position: absolute;
    top: 0;
    width: 26px;
    height: 100%;
    background: inherit;
    filter: blur(10px);
    opacity: 0.85;
    z-index: -1;
}

/* Halo large (diffusion lumineuse) */
.menu_vertical_barre::after {
    content: "";
    position: absolute;
    top: 0;
    width: 24px;
    height: 100%;
    background: inherit;
    filter: blur(24px);
    opacity: 0.8;
}

/* Halo dense (proche de la barre) */
.menu_vertical_barre0::before {
    content: "";
    position: absolute;
    top: 0;
    width: 5px;
    height: 100%;
    background: inherit;
    filter: blur(4px);
    opacity: 0.8;
    z-index: -1;
}

/* Halo large (diffusion lumineuse) */
.menu_vertical_barre0::after {
    content: "";
    position: absolute;
    top: 0;
    width: 10px;
    height: 100%;
    background: inherit;
    filter: blur(8px);
    opacity: 0.5;
    z-index: -2;
}

.groupe_de_3 {
position: relative;
	/*background-color: var(--almost-black);*/
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
	width: 80%;
	margin: auto;
	margin-top: 4rem;
	margin-bottom: 4rem;
	padding-top: 1rem;
	text-align: center;
	background-image: url("./images/menu/lignes.webp");
}

.menu_main_container .block-profil  {
	background: linear-gradient(to bottom, #091737 0%, #0b1f4a 100%);

}
.menu_main_container .block-tests  {
	background: linear-gradient(to bottom, #0b2f52 0%, #0e3a63 100%);
}
.menu_main_container .block-objectifs  {
	background: linear-gradient(to bottom, #083a5c 0%, #0b4c7a 100%);
}
.menu_main_container .block-qualites  {
	background: linear-gradient(to bottom, #0b5151 0%, #0e6a6a 100%);
}
.menu_main_container .block-periode  {
	background: linear-gradient(to bottom, #0e2f57 0%, #123c6e 100%);
}
.menu_main_container .block-resultats  {
	background: linear-gradient(to bottom, #520b22 0%, #6b0f2e 100%);
}

.menu_main_container .block-profil .groupe_de_3_boutons {
		background-image: url("./images/menu/lignes.webp"),linear-gradient(to bottom, #0b1f4a 0%, #132f6a 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.menu_main_container .block-tests .groupe_de_3_boutons {
		background-image: url("./images/menu/lignes.webp"),linear-gradient(to bottom, #0e3a63 0%, #145a8a 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.menu_main_container .block-objectifs .groupe_de_3_boutons {
		background-image: url("./images/menu/lignes.webp"),linear-gradient(to bottom, #0b4c7a 0%, #0f6fa6 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.menu_main_container .block-qualites .groupe_de_3_boutons {
		background-image: url("./images/menu/lignes.webp"),linear-gradient(to bottom, #0e6a6a 0%, #159a9c 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.menu_main_container .block-periode .groupe_de_3_boutons {
	background-image: url("./images/menu/lignes.webp"),linear-gradient(to bottom, #123c6e 0%, #1d5b99 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.menu_main_container .block-resultats .groupe_de_3_boutons {
	background-image: url("./images/menu/lignes.webp"),linear-gradient(to bottom, #6b0f2e 0%, #8f153c 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

button.send_mail {
	/*background-color: white;*/
	position: absolute;
	right: 1.75rem;
	top: 0.75rem;
	padding: 0.5rem 1rem 0.5rem 1rem;
}

button.send_mail:hover {
	/*background-color: var(--light-light-yellow);*/
}

.groupe_de_3_radio {
	display: none;
	padding-bottom: 1rem;
}

.groupe_de_3_radio table {
	margin: 1.5rem auto 1rem auto;
	padding-bottom: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	border-radius: 1rem;
}

.groupe_de_3 img {
	height: 4rem;
}

.groupe_de_3 h2 {
	color: white;
	display: inline-block;
	transform: translateY(-0.5rem);
	font-family: 'title';
	font-weight: 300;
	margin-left: 2rem;
	margin-right: 2rem;
}

.groupe_de_3_boutons {
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
}

.div_pour_1_bouton {
	/*background-image: url("./images/menu/lignes.webp");*/
	background-size: 100% auto;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
	width: 33.33%;
	display: inline-block;
	vertical-align: middle;
}

.div_pour_1_bouton button {
	background-color: var(--almost-white);
	color: black;
	font-family: 'title';
	width: 75%;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	margin-left: 12.5%;
}

.groupe_de_3_boutons button:hover {
	color: var(--main-yellow);
}

#id_for_mail {
	padding: 3rem;
}

#id_for_mail input {
	max-width: 15rem;
}



/************/
/* TESTS RH */
/************/

#id_table_jauges_RIASEC {
	display: inline-block;
	margin-left: 5%;
	width:40%;
}

#id_aptitudes_GRAPH {
	display: inline-block;
	margin-left: 0%;
	width: 55%;
	vertical-align: top;
}

#id_RIASEC_GRAPH {
	display: inline-block;
	width: 45%;
	margin-left: 5%;
	vertical-align: top;
}
	

#id_table_jauges { /* aptitudes */
	display: inline-block;
	margin-left: 0;
	width:40%;
}

#id_PERSO_RESULTS {
	padding-top:1rem;
}

#id_table_jauges_perso {
	margin-left: 10%;
	width:80%;
	padding-top: 2rem;
	border-collapse: collapse;
}

#id_table_jauges_perso tr {
	height:5.5rem;
}

#id_table_jauges_perso tr:hover {
	background-color:transparent;
}

#id_table_jauges_perso tr + tr {
	border-top: 1px solid #E1E6EF;
}



/************************/
/* PARAMÈTRES DU PROJET */
/************************/
input[type="submit"].launch_algo {
    background-color: #932819;
    background-image: url('./images/formulaires/fusee.webp');
    background-repeat: no-repeat;
    background-position: left;
    background-size: 4rem 4rem;
    padding: 2rem 3rem 2rem 6rem;
    font-size: 1.5rem;
    margin: 2rem;
}

/*****************************/
/* LANCEMENT DES ALGORITHMES */
/*****************************/
/* === CONTENEUR === */

.progress-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  background-color:var(--almost-black);
  text-align:left;
  max-width: 40rem;
  margin: 0 auto;
  border-radius: 1rem;
  padding: 0.25rem 1rem;
  font-weight: bold;
  margin-bottom: 4rem;
}

/* Ligne verticale */
.progress-steps::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.15);
  font-size:125%;
}

/* === ÉTAPE GÉNÉRIQUE === */

.step {
  position: relative;
  padding: 18px 0 18px 40px;
  color: rgba(255, 255, 255, 0.85);
}

/* Point de gauche */
.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
}

.step::after {
  content: "";
  position: absolute;
  left: 40px;          /* aligné avec le texte */
  right: 10px;
  bottom: 0;

  height: 1px;

  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0)
  );
}

/* === ÉTAPE TERMINÉE (CHECK) === */

.step--done::before {
  background: #41c18f;
  box-shadow: 0 0 0 4px rgba(65, 193, 143, 0.25);
}

.step--done::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #0b1f17;
}

/* === ÉTAPE EN COURS === */

.step--current::before {
  background: #f7cc47;
  box-shadow: 0 0 10px rgba(247, 204, 71, 0.6);
}

.step--current {
  color: #ffffff;
  font-weight: 500;
}

/* === ÉTAPE FUTURE === */

.step--future::before {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.step--future {
  color: var(--light-blue);
}


/*******************************/
/* SYNTHÈSE ET OFFRES D'EMPLOI */
/*******************************/
.menu_synthese {
	position: relative;
	z-index: 10;
	text-align: center;
	padding-top: 2rem;
	padding-bottom: 2rem;
	background-color: var(--main-yellow);
}

.menu_synthese button {
  padding: 0.5rem 2rem;
}

.menu_synthese button:enabled:hover {
  color: var(--main-yellow);
}

.menu_synthese button:disabled {
  background-color: var(--almost-white);
  color: var(--almost-black);
}

.menu_synthese::before {
  content:url('./images/other/small_line.svg');
  width: 8rem;
  margin-right: 0.5rem;
  vertical-align: bottom;
}

.menu_synthese::after {
  content:url('./images/other/small_line.svg');
  width: 8rem;
  margin-left: 0.5rem;
  vertical-align: bottom;
}

.form_title {
	background-color: var(--blue-in-form);
	color: white;
	font-family: "mainsemibold";
}

.form_title.yellow {
	background-color: var(--light-yellow);
	color: black;
}

.synthese_number {
	font-family: "title";
	font-size: 4rem;
}

.synthese_section_title h1 {
	font-family: "mainsemibold";
}

#id_analyse_profil, .info_bilan {
	border-left: solid var(--blue-in-form) 4px;
	font-family: "mainsemibold";
	padding-left: 1rem;
	margin-bottom: 2rem;
}

#id_analyse_profile_top {
	position:relative;
}

#id_analyse_profile_top p {
	margin-left: 5%;
	width:55%;
	position: relative;
	z-index:2;
}

#id_analyse_profile_top img {
	position:absolute;
	top:5%;
	right:5%;
	width:30%;
	z-index:1;
}


#id_synthese_avantages, #id_synthese_desavantages {
	position: relative;
	margin-left: 2rem;
	margin-top: 1rem;
	padding-top: 1rem;
	margin-right: 2rem;
}

#id_synthese_avantages {
	border-top: solid 2px var(--almost-white);
}

#id_synthese_avantages::before, #id_synthese_desavantages::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 4px;
  background-color: rgba(5, 105, 193, 0.4); /* bleu Pulse My Job désaturé */
  border-radius: 2px; /* optionnel, rend plus chic */
}

#id_synthese_desavantages {
	border-top: solid 2px var(--almost-white);
}

.synthese-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.synthese-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin:2rem 0;
  display: flex;
  align-items: center;
  gap: 16px;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.04);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.synthese-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.05);
}


.synthese_type_2 > div {
	background-color: rgba(255,255,255,0.85);
	border-radius: 0.5rem;
	position:relative;
	padding-bottom: 0.5rem;
}

.synthese_type_2 img {
	width: 4rem;
	padding: 0.5rem;
	top:0;
	left:0;
	border-radius: 0.25rem;
}
.synthese_type_2 h3 {
	border-radius: 0.25rem;
}

.synthese_type_2 li {
	position:relative;
}

.synthese_type_2 li::marker {
	color: var(--yellow-strong);
	font-size: 150%;
}



table.resume {
	margin: 2rem auto;
	text-align: left;
	font-family: "mainsemibold";
	padding: 1rem 2rem;
}


table.resume tr:hover {
	background-color: inherit;
}

table.tab_projets_pertinence, table.tab_projets_offres {
    font-size: 125%;
    margin: 2rem auto;
    box-shadow: 0px 0px 15px 5px #CCC;
}

table.tab_projets_pertinence {
    width: 70%;
	cursor: pointer;
}

table.tab_projets_offres {
	width: 95%;
}

table.tab_projets_pertinence tr, table.tab_projets_offres tr {
    background-color: #E5E7EB;
    color: var(--almost-black);
    font-weight: bold;
}

table.tab_projets_pertinence tr:hover {
  background-color: var(--light-yellow);
  color: black;
}

table.tab_projets_pertinence td.projets_pertinence_content {
	background-color: var(--almost-white);
	color: var(--almost-black);
}

.projet_plus_moins table.resume {
	width: 60%;
}

.projet_plus_moins table.resume .td1 {
	width: 47.5%;
}

.projet_plus_moins table.resume .td2 {
	width: 5%;
}

.projet_plus_moins table.resume .td3 {
	width: 47.5%;
}

.final_1 ol, .final_2 ol {
    font-size: 125%;
    margin-bottom: 2em;
    background-color: var(--almost-black);
    color: white;
    padding: 1rem;
    border-radius: 1rem;
    list-style-type: none;
}

ol {
    text-align: left;
    margin-left: 10%;
    margin-right: 10%;
    counter-reset: c;
}


.final_1 li, .final_2 li {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.final_1 li::before, .final_2 li::before {
  content: counter(c);
  font-size: 3rem;
  counter-increment: c;
border-right: 4px solid var(--main-yellow);
  margin-right: 0.5rem;
  background-color: var(--content-background-color);
  width: 3rem;
  display: inline-block;
  text-align: center;
  color:white;
  border-radius: 1rem 0;
}

.final_2 li {
background-color:var(--light-light-blue);
border-radius: 1rem;padding: 0.5rem 1rem 1rem;
}


.final_2 li.very_important {
background-color:var(--light-red);
}

.final_2 li.important {
background-color:var(--light-light-yellow);
}


.pmj-timeline{
  --rail-x: 16px;
  --dot: 12px;
  --line: 2px;

  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 90%;
  margin-left: 5%;
  background: none !important;
  color: black !important;
}

.pmj-timeline li{
  position: relative;
  padding-left: 48px;
  margin-bottom: 20px;
  background: var(--light-light-blue);
  border-radius: 10px;

  /* ombre propre, moderne, non décorative */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.08);

  /* lisibilité */
  color: #1c1c1c;
  line-height: 1.45;

  /* optionnel : micro séparation visuelle */
  border: 1px solid rgba(0, 0, 0, 0.04);
}

/* rond */
.pmj-timeline li::before{
  content: "";
  position: absolute;
  left: calc(var(--rail-x) - var(--dot) / 2);
  top: 0.4em;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--dot-color, #0669C1);
  z-index: 1;
  border:none;
}

/* barre verticale */
.pmj-timeline li::after{
  content: "";
  position: absolute;
  left: calc(var(--rail-x) - var(--line) / 2);
  top: 0;
  bottom: -40px;
  width: var(--line);
  background: var(--line-color, rgba(6,105,193,0.35));
}

/* supprimer la barre du dernier */
.pmj-timeline li:last-child::after{
  display: none;
}

/* intentions couleurs */

.pmj-timeline li.very_important{
  --dot-color: #C2410C;
  --line-color: rgba(194,65,12,0.45);
}

.pmj-timeline li.important{
  --dot-color: #F8CC47;
  --line-color: rgba(248,204,71,0.45);
}



/* Conteneur principal */
.rome_formation {
  position: relative;
  padding: 32px 32px 32px 64px;
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  box-sizing: border-box;
  width:90%;
  margin-left:5%;
}

/* Colonne verticale de référence */
.rome_formation::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 100%;
  background-color: var(--main-background-color); /* bleu profond plein */
}

/* Titre principal */
.rome_formation h2 {
  margin: 0 0 32px 0;
  padding: 16px 20px;
  font-size: 22px;
  font-weight: 700;
  text-transform: none;
}

/* Bloc formation */
.rome_formation > div {
  padding: 24px 20px;
  margin-bottom: 16px;
  background-color: #f7f7f7; /* gris clair neutre */
  box-sizing: border-box;
}

/* Séparateur franc entre blocs */
.rome_formation > div + div {
  border-top: 2px solid #c4c4c4;
}

/* Titres de sous-blocs */
.rome_formation h3 {
  margin: 0 0 12px 0;
  padding: 10px 14px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

/* Variante éventuelle si vous voulez un autre niveau */
.rome_formation h3.blue {
  background-color: #1f6fa8;
}

.rome_formation h3.red {
  background-color: #b00020; /* rouge franc, si nécessaire */
}

/* Puce ▶ maîtrisée */
.rome_formation p::first-letter {
  font-weight: 700;
}




.slideButtonR, .slideButtonL {
  z-index: 1;
  font-family:'title';
  font-size: 300%;
  /*opacity: 0.8;*/
  position: absolute;
  top: 3rem;
  color: black;
  background-color: transparent;
}

.slideButtonR:hover, .slideButtonL:hover {
  color: var(--main-yellow) !important;
}

.slideButtonL {
  left: 0;
}

.slideButtonR {
  right: 0;
}

.temoignage-compteur {
	display: inline-block;
	margin: 0rem 2rem 2rem 2rem;
}

.temoignage-navigation button {
	background: none !important;
	color: black;
	text-decoration: underline;
}

button.geoMenu {
  width: 19%;
  font-size: 100%;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: transparent;
  color: var(--blue-in-form);
  border: 2px solid var(--blue-in-form);
  border-radius: 0;
}

button.geoMenu:hover {
  background-color: var(--almost-white);
}

button.geoMenuSelected {
  background-color: var(--main-yellow) !important;
}

.offre table {
	margin: 1rem auto;
	max-width: 90%;
}

.offre table, .offre td, .offre th {
  border-collapse: collapse;
  padding: 1rem 2rem;
}

.offre tr {
	background-color: inherit;
}

.tab_graph_exp {
    margin-left: 10%;
    width: 80%;
    font-family: 'mainsemibold';
}

.tab_graph_exp .td1 {
    text-align: right;
}

.tab_graph_exp .td2 {
    position: relative;
    text-align: left;
    width: 85%;
    padding-left: 0.5rem;
}

.tab_graph_exp .td2 .inside_graph {
    display: inline-block;
    height: 2rem;
    background-color: var(--M-strong);
}

.tab_graph_exp .td2 .label {
    display: inline-block;
    position: absolute;
    left: 2.5%;
    bottom: 1rem;
}

.tab_graph_exp .td2 .label::after {
    content: ' %';
}

.inside_graph {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.08);
  color: #1c1c1c;
  line-height: 1.45;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
/***************/
/* FORMULAIRES */
/***************/
button.edit, button.validate, button.cancel {
	background-color: white;
	width: 3rem;
	height: 3rem;
	background-size: 100% 100%;
}

button.edit {
	background-image:url('./images/formulaires/edit.png');
	display: inline-flex;
}

button.validate {
background-image:url('./images/formulaires/validate.png');
}

button.cancel {
background-image:url('./images/formulaires/cancel.png');
}

.formation {
	position: relative;
	text-align: center;
	border-bottom: solid 4px black;
}

.domaine {
  position: relative;
  margin: 2rem auto;
  width: 90%;
  background-color: rgba(255,255,255,0.8);
  text-align: center;
  padding: 1rem;
  border-radius:0.5rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.04);
}

.domaine table  {
  margin: 0 auto;
}


.subform {
  position: relative;
  width: 80%;
  margin: auto;
  background-color: rgba(255,255,255,0.6);
  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius:1rem;
}

.radiolist {
  text-align: left;
  line-height: 2rem;
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 2rem;
  background-color: rgba(255,255,255,0.6);
  padding-left: 1rem;
  border-radius: 1rem;
}

.radiolist label {
  margin-right: 1em;
}

.quick_buttons {
    border-bottom: 2px solid var(--blue-in-form);
    border-left: 2px solid var(--blue-in-form);
    text-align: left;
}

.quick_buttons button.quick_button {
    background-color: transparent;
    color: black;
    border-radius: 0;
    padding: 0.125em 0.25em;
    font-size: 95%;
}

.quick_buttons button.quick_button:hover {
  background-color: var(--blue-in-form);
  color: white;
}

.suppForm {
  text-align: right;
}

.suppForm label {
  cursor: pointer;
  color: var(--intra-strong);
}

form.suppForm input, form.suppMetier input {
    font-family: "web_symbol";
    padding: 0rem 0.5rem;
    font-size: 200%;
    color: transparent;
background-color: transparent;
  width: 4rem;
  background-image: url('/images/formulaires/delete.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;    
}

input[type="submit"].add_form, button.add_form, span.add_form {
    background-image: url('./images/formulaires/plus_form.svg');
    background-repeat: no-repeat;
    background-position: left;
    background-size: 4rem 2rem;
    padding-left: 4rem !important;
    margin-bottom: 2rem;
    color: var(--almost-white);
    /*background-color: var(--blue-in-form);*/
    padding-top: 1rem;
    padding-bottom: 1rem;
}

input[type="submit"].add_subform, button.add_subform {
    background-image: url('./images/formulaires/plus_form.svg');
    background-repeat: no-repeat;
    background-position: left;
    background-size: 3rem 1.5rem;
    padding-left: 3rem !important;
}

input[type="submit"].add_form:hover, button.add_form:hover, input[type="submit"].add_subform:hover, button.add_subform:hover {
	color: var(--main-yellow);
}

input[type="submit"].validate_number, button.validate_number {
    background-color: var(--new-red);
    background-image: url('./images/formulaires/check.svg');
    background-repeat: no-repeat;
    background-position: left;
    background-size: 3rem 2rem;
    padding: 0.5em 1em;
        padding-left: 1em;
    padding-left: 3rem !important;
    margin-left: 1rem;
    margin-top: 0.5rem;
}

input[type="submit"].little_validate_number {
    background-color: var(--new-red);
    background-image: url('./images/formulaires/check.svg');
    background-repeat: no-repeat;
    background-position: left;
    background-size: 2rem 1.5rem;
    padding: 0.5em 1em;
        padding-left: 1em;
    padding-left: 2rem !important;
    margin-left: 1rem;
}

input.tobefocused {
  opacity: 0;
  height: 0;
  width: 0;
  font-size: 0%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.numeric_field {
    cursor: pointer;
    color: var(--almost-white);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    background-color: var(--almost-black);
    margin-left: 1em;
    font-family: "mainsemibold";
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
	font-size: 115%;
}

.numeric_val {
	font-size: 115%;
	font-family: "mainsemibold";
}

.tabLang {
	margin: 2rem auto;
	display: inline-block;
}

.tabLang td, .tabLang th {
	padding-left: 2rem;
	padding-right: 2rem;
}

table.tab_permis {
    margin-bottom: auto;
    margin-bottom: 1rem;
    text-align: center;
    margin: 2rem auto 0rem;
}

table.tab_permis td {
    width: 25%;
    border:none;
}

table.tab_permis div {
	display: inline-block;
  border: solid 1px black;
  border-radius: 0.5rem;
  width:6rem;
  padding:0.5rem;
}

table.tab_permis tr:hover, table.tabLang tr:hover {
	background:none;
}

table.tab_permis tr.tab_permis_title td {
	text-align: left;
	position: relative;
	padding-left: 2rem;
}
table.tab_permis tr.tab_permis_title td::before {
	content: '';
  width: 0.5rem;
  position: absolute;
  display: block;
  background-color: var(--main-yellow);
  height: 3rem;
  translate: -1.5rem 0.5rem;
}

#id_tab_Q td, #id_tab_Q_2 td {
	padding-top:0.75rem;
	padding-bottom:0.75rem;
}


#id_tab_Q_2 {
	display: none;
}

#id_tab_O_2 {
	display: none;
}

#id_range_TRICAM, #id_range_aptitudes, #id_range_perso {
	width: 25rem;
}

#id_range_pVSo {
	width: 35rem;
}

/***************/
/* FICHES ROME */
/***************/
.cadre_fiche_rome {
	border-left: solid 4px var(--main-yellow);
	border-radius: 0 1rem 1rem 0;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
	background-color: rgba(255,255,255,0.85);
}
.cadre_fiche_rome h3 {
	border-bottom: solid 2px var(--almost-white);
	padding-bottom: 1rem;
	text-align: left;
	margin-left: 2rem;
}

.cadre_fiche_rome table {
	background-color: var(--light-light-yellow);
	border: solid 2px var(--corporel-soft);
}
.cadre_fiche_rome table th {
	background-color: var(--almost-black);
}

.rome-index {
  position: absolute;
  left: -14px;
  top: 12px;

  width: 34px;
  height: 34px;

  background: #F8CC47;
  color: #000;

  font-weight: 700;
  font-size: 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  font-size: 14px;
  font-weight: 600;
}

/***************************/
/* DIFFÉRENTES RÉSOLUTIONS */
/***************************/

/* max-width: 1199px */
@media only screen and ( max-width: 1199px ) {
	#id_deuxieme_phrase {
		font-size: 125%;
	}
	#id_img_first_accueil {
		transform: translate(-25%, 6rem);
		width:125%;
		margin-left:7%;
	}
	
	.outplacement_table_form {
		background-size: auto 50%;
	}
}
/* fin de max-width: 1199px */




/* max-width: 1079px */
@media only screen and ( max-width: 1079px ) {
	body {
		font-size: 100%;
	}
}
/* fin de max-width: 1079px */




/* max-width: 1023px */
@media only screen and ( max-width: 1023px ) {
	#id_premiere_phrase {
		font-size: 200%;
	}
	#id_testez_gratuitement_button {
		top: 110px;
	}
	#id_first_left_block_accueil {
		width: 55%;
	}
	
	#id_techno_bloc_1 #id_approche_globale {
		top:20%;
	}
	
	#id_left_bar {
		width: 20%;
	}
	
	#id_mon_compte {
		width: 80%;
		left: 20%;
	}
	
	.techno_bloc .techno_text {
		font-size: 110%;
	}
	
	.scrolling {
		width: 95%;
	}
	
	.formation {
		border: none;
		border-top: solid 1rem var(--main-yellow);
		border-bottom: solid 1rem var(--main-yellow);
	}
	
	h1.title_of_section {
		transform: translateY(-2rem);
	}
	
	#id_RIASEC_GRAPH {
		width: 47.5%;
		margin-left: 2.5%;
	}
	
	#id_table_jauges_RIASEC {
		width: 42.5%;
		margin-left: 2.5%;
	}
	
	#id_table_jauges td {
		padding: 0;
	}
	
	.synthese_test p, .synthese_test ul {
		width: 70%;
	}
	
	[type="radio"] + label {
		padding-left: 1.5rem;
	}
	
	/* OUTPLACEMENT */
		.outplacement_1 h1 {
		top:2rem;
	}
	
	.outplacement_2 p {
		top:0;
	}
	
}
/* fin de max-width: 1023px */



/* max-width: 949px */
@media only screen and ( max-width: 949px ) {
	#id_first_left_block_accueil {
		width: 55%;
	}
	#id_first_right_block_accueil {
		width: 35%;
	}
	
	.techno_bloc .techno_text, .techno_bloc {
		margin-bottom: 1rem;
	}
	
	#id_RIASEC_GRAPH {
		width: 55%;
		margin-left: 0;
	}
	#id_table_jauges_RIASEC {
		width: 42.5%;
		margin-left: 0;
	}
	
}
/* fin de max-width: 949px */



/* max-width: 899px */
@media only screen and ( max-width: 899px ) {
	#id_deuxieme_phrase {
		font-size: 110%;
	}
	#id_technologie_button, #id_bilans_button {
		display: none;
	}
	.subform {
		width: 100%;
		padding: 0;
	}
	.domaine {
		width: 100%;
	}
	.suppForm {
		text-align: center;
	}
	input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea {
		width: 15rem;
	}
	body {
		margin: 0;
	}
	
	select {
		font-size: 80%;
	}
	
	.RIASEC_Q table {
		width: 90%;
		margin-left: 5%;
	}
	
	.nos-bilans-1 {
		background:none;
	}
	.nos-bilans-1-img {
		display:block;
	}
	
	.synthese-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
}
/* fin de max-width: 899px */



/* max-width: 849px */
@media only screen and ( max-width: 849px ) {

	#id_foot1 {
		margin-left: 3%;
	}
	#id_foot1, #id_foot2, #id_foot3, #id_foot4 {
		width: 22%;
	}

	#id_premiere_phrase {
		font-size: 150%;
	}
	#id_deuxieme_phrase {
		font-size: 105%;
	}
	
	#id_testez_gratuitement_button {
		left: 140px;
		top: 110px;
	}
	
	#id_approche_globale {
		width: 40%;
	}
	
	#id_left_bar {
		width: 25%;
	}
	
	#id_mon_compte {
		width: 75%;
		left: 25%;
	}
	
	table.notBig input[type="text"] {
		width: 12.5rem;
	}
	
	#id_for_mail {
		padding: 0;
	}
	
	.synthese_test p, .synthese_test ul {
		width: 75%;
	}
	
	/* MODALES */
	.modal.big {
		padding:5vh 10%;
	}
	
	/* OUTPLACEMENT */
	.outplacement_1 h1 {
		top:1rem;
	}
	
	.outplacement_2 p {
		width:100%;
		position:relative;
	}
	
}
/* fin de max-width: 849px */

/* max-width: 800px */
@media only screen and ( max-width: 800px ) {
	#id_techno_bloc_1 #id_approche_globale {
		position: relative;
		width: 80%;
		padding-top: 2rem;
	}
	#id_techno_bloc_1 img {
		width: 60%;
		margin-left: 20%;
		margin-top:0;
	}
}
/* fin de max-width: 800px */




/* max-width: 767px */
@media only screen and ( max-width: 767px ) {

	#id_logo {
		padding-left: 1rem;
	}

	#id_mainbar {
		width: 80%;
		right: 1rem;
	}
	
	#id_ontop {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	#id_ontop button {
		margin-right: 1rem;
		padding: 0.5rem 1.5rem;
	}
	
	#id_first_left_block_accueil {
		width: 100%;
		background-color: rgba(255,255,255,0.95);
		width: 100%;
		text-align: center;
		margin-top: 3rem;
	}
	
	#id_first_right_block_accueil {
		display: none;
	}
	
	#id_bottom_accueil {
		font-size: 90%;
	}
	
	#id_bottom_accueil button {
		padding: 0.5rem 1.5rem;
		margin-right: 1rem;
	}
	
	.rac {
		margin: 1rem auto;
	}
	
	footer {
		padding-bottom: 2rem;
	}
	
	#id_analyse_profil, .info_bilan {
		margin-left: 0;
		margin-right: 0;
	}
	
	input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea {
		width: 12.5rem;
	}
	
	#id_RIASEC_GRAPH, #id_aptitudes_GRAPH, #id_table_jauges_RIASEC, #id_table_jauges {
		width: 60%;
		margin-left: 20%;
	}
	
	.synthese_test p, .synthese_test ul {
		width: 80%;
	}
	
	#id_table_jauges_perso {
		margin-left: 5%;
		width: 90%;
	}
	
	select {
		padding-left: 0.5rem;
		padding-right: 1.5rem;
	}
	
	.domaine {
		padding-left: 0;
		padding-right: 0;
	}
	
	.RIASEC_Q table {
		width: 95%;
		margin-left: 2.5%;
	}
	
	#id_range_pVSo {
		width: 25rem;
	}
	
	table.tab_projets_pertinence {
		width: 80%;
	}
	
	.cadre_standard {
		margin-left: 1rem;
		margin-right: 1rem;
	}
	
	.groupe_de_3 {
		width: 90%;
		margin-top: 3rem;
		margin-bottom: 3rem;
	}
	
	.only_small_resolutions {
		display:block;
	}
	
	/* OUTPLACEMENT */
	.outplacement_1 h1 {
		top:0;
		font-size:175%;
	}
	
}
/* fin de max-width: 767px */



/* max-width: 719px */
@media only screen and ( max-width: 719px ) {
	#id_technologie_button, #id_bilans_button {
		left: 175px;
	}
	.techno_bloc .techno_text {
		line-height: 1.25rem;
		font-size: 100%;
	}
	.techno_bloc .techno_title {
		line-height: 1.75rem;
		font-size: 125%;
	}
	#id_bottom_accueil {
	font-size: 80%;
	}
	
	footer {
		font-size: 90%;
	}
	
	#id_left_bar {
		width: 30%;
	}
	
	#id_mon_compte {
		width: 70%;
		left: 30%;
	}
	
	.notForSmallRes {
		display: none;
	}
	
	#id_credits_premiere_phrase {
		font-size: 100%;
	}
	
	#id_for_mail input {
		max-width: 10rem;
	}
	
	#id_tab_Q {
		display: none;
	}
	#id_tab_Q_2 {
		display: block;
		margin-left: 10%;
	}
	
	#id_tab_O {
		display: none;
	}
	#id_tab_O_2 {
		display: block;
		margin: auto;
	}
	
	/* OUTPLACEMENT */
	.outplacement_table_form {
		background-size: auto 40%;
	}
	
	/* SYNTHÈSE */
	#id_analyse_profile_top img {
		position:relative;
		right:auto;
		width:60%;
	}
	#id_analyse_profile_top p {
		width:80%;
	}
}
/* fin de max-width: 719px */



/* max-width: 639px */
@media only screen and ( max-width: 639px ) {

	#id_techno_bloc_1 img {
		width: 80%;
		margin-left: 10%;
	}

	#id_foot1, #id_foot2, #id_foot3, #id_foot4 {
		width: 46%;
	}

	#id_logo {
		padding-left: 0;
	}
	#id_technologie_button, #id_bilans_button {
		left: 150px;
	}
	
	#id_topbutton_1_sur_3 {
		position: absolute;
		top: -2.75rem;
		right: 10rem;
	}
	#id_topbutton_2_sur_3 {
		position: absolute;
		top: 0;
		right: 5rem;
	}
	#id_topbutton_3_sur_3 {
		position: absolute;
		top: 2.75rem;
		right: 0rem;
	}
	
	footer h3 {
		padding-left: 0;
	}
	
	h1, h2 {
		font-size: 1.35rem;
	}
	
	#id_credits_premiere_phrase {
		margin-top: 1rem;
	}
	
	.tabLang td, .tabLang th {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	#id_RIASEC_GRAPH, #id_aptitudes_GRAPH, #id_table_jauges_RIASEC, #id_table_jauges {
		width: 70%;
		margin-left: 15%;
	}
	
	table.tab_projets_pertinence {
		width: 85%;
	}
	
	.groupe_de_3 .send_mail img {
		height: 3rem;
	}
	
	/* MODALES */
	.modal.big {
		padding:5vh 5%;
	}
	
	/* OUTPLACEMENT */
	.outplacement_1 h1 {
		font-size:150%;
	}
	
	/* OUTPLACEMENT */
	.outplacement_table_form {
		background-size: auto 30%;
	}
	
}
/* fin de max-width: 639px */



/* max-width: 599px */
@media only screen and ( max-width: 599px ) {
	#id_technologie_button, #id_bilans_button {
		left: 140px;
		top: 110px;
	}
	
	table.notBig input[type="text"] {
		width: 10rem;
	}
	
	input[type="submit"], input[type="button"], button {
		padding: 0.5rem 1rem;
	}
	
	#id_left_bar table tr {
		height: 3rem;
	}
	
	#id_credits_deuxieme_phrase {
		margin: 0 2rem;
	}
	
	#id_for_mail input {
		max-width: 7.5rem;
	}
	
	input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea {
		width: 10rem;
	}
	
	#id_tab_Q_2 {
		margin-left: 5%;
	}
	
	.info_tableau_metiers, .info_jeune {
		background-size: 4rem;
		padding-left: 5rem;
	}
	
	.RIASEC_Q table {
		width: 100%;
		margin-left: 0%;
	}
	
	#id_range_pVSo {
		width: 17.5rem;
	}
	
	.div_pour_1_bouton button {
		font-size: 100%;
	}

}
/* fin de max-width: 599px */


/* max-width: 549px */
@media only screen and ( max-width: 549px ) {
	footer button {
		padding: 0.5rem 0.5rem;
		font-size: 90%;
	}
	footer a {
		font-size: 90%;
	}
	
	#id_credits_deuxieme_phrase {
		font-size: 100%;
	}
	
	#id_radio_tests_rh table {
		padding: 0;
	}
	
	#id_range_TRICAM, #id_range_aptitudes, #id_range_perso {
		width: 17.5rem;
	}
	
	table.tab_projets_pertinence {
		width: 90%;
	}
	
	.div_pour_1_bouton button {
		width: 85%;
		margin-left: 7.5%;
	}
	
	/* OUTPLACEMENT */
	.outplacement_1 h1 {
		font-size:125%;
	}
	
}
/* fin de max-width: 549px */



/* max-width: 499px */
@media only screen and ( max-width: 499px ) {
	#id_topbutton_1_sur_3 {
		right: 0;
	}
	#id_topbutton_2_sur_3 {
		right: 0;
	}
	
	input[type="submit"], input[type="button"], button {
		padding: 0.5rem 0.5rem;
	}
	
	table.notBig input[type="text"] {
		width: 7.5rem;
	}
	
	#id_credits_premiere_phrase {
		margin-top: 0;
	}
	
	#id_credits_deuxieme_phrase {
		line-height: 1.25rem;
		margin: 0;
	}
	#id_tab_Q_2 {
		margin-left: 0;
	}
	
	#id_table_jauges_perso {
		margin-left: 2.5%;
		width: 95%;
	}
	
	input[type="submit"].launch_algo {
		margin-left: 1rem;
		margin-right: 1rem;
	}
	
	button.send_mail {
		right: 0.5rem;
		top: 0.5rem;
	}
	
	.RIASEC_Q {
		padding:0;
	}
	
}
/* fin de max-width: 499px */


/* max-width: 449px */
@media only screen and ( max-width: 449px ) {

	#id_logo {
		padding-top: 0;
	}

	#id_technologie_button, #id_bilans_button {
		left: 2rem;
		top: 108px;
	}
	
	body {
		font-size: 80%;
	}
	
	
	#id_for_mail input {
		max-width: 5rem;
	}
	
	input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea {
		width: 7.5rem;
	}
	
	#id_RIASEC_GRAPH, #id_aptitudes_GRAPH, #id_table_jauges_RIASEC, #id_table_jauges {
		width: 80%;
		margin-left: 10%;
	}
	
	.info_tableau_metiers, .info_jeune {
		background-size: 3rem;
		padding-left: 4rem;
	}
	
	[type="radio"] + label {
		padding-left: 1rem;
	}
	
	#id_range_TRICAM, #id_range_aptitudes, #id_range_perso {
		width: 12.5rem;
	}
	
	#id_range_pVSo {
		width: 12.5rem;
	}
	
	input[type="submit"].launch_algo {
		background-size: 3rem 3rem;
		padding: 2rem 2rem 2rem 4.5rem;
	}
	
	.groupe_de_3 .send_mail img {
		height: 2rem;
	}
	
	button.send_mail {
		padding: 0;
	}
	
	/* OUTPLACEMENT */
	.outplacement_1 h1 {
		width:100%;
		position:relative;
	}
	.outplacement_1 img {
		margin-left:25%;
	}
	
	.outplacement_2 .img2 {
		width:6rem;
	}
	
	.outplacement .techno_title {
		line-height: 1.5rem;
	}
	
	.outplacement_table_form {
		background-position: 95% 70%;
	}
	
	.synthese-grid {
		grid-template-columns: 1fr;
	}
	
	
}
/* fin de max-width: 449px */


/* max-width: 399px */
@media only screen and ( max-width: 399px ) {

	#id_techno_bloc_1 img {
		width: 90%;
		margin-left: 5%;
	}

	#id_ontop button {
		margin-right: 0;
	}

	#id_premiere_phrase, #id_deuxieme_phrase {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		text-align: center;
	}
	
	#id_bloc_with_icons {
		width: 95%;
		margin-left: 2.5%;
	}
	
	table.notBig input[type="text"] {
		width: 6rem;
	}
	
	.tabLang td, .tabLang th {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	
	input[type="submit"].launch_algo {
		padding: 1.5rem 2rem 1.5rem 4.5rem;
		font-size: 1.25rem;
	}
	
	/* MODALES */
	.modal.big {
		padding:5vh 2.5%;
	}
	
	/* OUTPLACEMENT */
	.outplacement_table_form {
		background-position: 95% 67.5%;
		background-size: auto 27.5%;
	}

}
/* fin de max-width: 399px */