@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root {
  --bleu-stellantis: #0e3b85;
  --gris: #ececec;
  --couleur-principale: #3474e0;
  --bg-bouton-deactive: #000000;
  --couleur-credit-bail: #0e3b85;
  --couleur-credit-classique: #007781;
  --couleur-achat-comptant: #00b49b;
}
html, body {
  background: #fff;
  font-family: 'Encode Sans', sans-serif;
  font-size: 18px;
  color: #000;
  position: relative;
  min-height: 100%;
}
/***********/
/* GENERAL */
/***********/
.bg-cb {
  background: var(--couleur-credit-bail) !important;
}
.bg-cc {
  background: var(--couleur-credit-classique) !important;
}
.bg-ac {
  background: var(--couleur-achat-comptant) !important;
}
.text-cb {
  color: var(--couleur-credit-bail);
}
.text-cc {
  color: var(--couleur-credit-classique);
}
.text-ac {
  color: var(--couleur-achat-comptant);
}
.bg-blanc {
  background: #fff !important;
}
input {
  background-color: var(--gris) !important;
  border: 0px !important;
  color: #000;
}
input:focus {
  outline: 0 0 0 0 !important;
  box-shadow: 0 0 0 0 !important;
}
select {
  background-color: var(--gris) !important;
  border: 0px !important;
  color: #000;
}
.input-group-text {
  border: none;
  background: var(--gris);
}
.input-group-text.prepend {
  padding-right: 0rem !important;
}
.bloc-calcul-apport {
  background: var(--gris);
  border-radius: .375rem;
}
.bloc-calcul-apport .input-group input, .bloc-calcul-apport .input-group span.input-group-text {
  background: #fff !important;
}
.separateur-operation {
  border-top: 1px solid rgba(0, 0, 0, 0.4);
}
/* readonly fields */
.readonly-group input {}
.readonly-group .input-group-text {}
/* /readonly fields */
.mentions {
  font-size: 0.6em;
}
.form-check-input {
  /*padding: .375rem .375rem;*/
  padding: .6rem .6rem;
}
.form-check-input:checked {
  background-color: #000 !important;
}
sup {
  font-size: 0.7em;
}
.titre-v-bail {
  font-size: 1.22em;
  color: var(--couleur-principale);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1em;
}
.text-normal {
	text-transform: none !important;
}
.position-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.logo-marque-header {
  /*max-width: 250px;*/
  margin-top: -85px;
}
@media (max-width: 992px) {
  .logo-marque-header {
    max-width: 120px;
    margin-top: -55px;
  }
}
/******************/
/* CHOIX VEHICULE */
/******************/
#vehiculeForm label {
  cursor: pointer;
  filter: grayscale(100%);
}
#vehiculeForm label:hover {
  filter: grayscale(0);
}
#vehiculeForm input[type="radio"]:checked + label {
  filter: grayscale(0);
}
#vehiculeForm .picto-choix-vehicule {
  max-width: 250px;
  width: 100%;
}
#vehiculeForm #btn-valider-vehicule {
  padding: 10px 40px;
}
@media (max-width: 992px) {
  #vehiculeForm .picto-choix-vehicule {
    max-width: 200px;
  }
}
/* set a dynamic height on content for each jquery step form */
.wizard .content {
  min-height: 100px;
}
.wizard .content > .body {
  width: 100%;
  height: auto;
  padding: 15px;
  position: absolute;
}
.wizard .content .body.current {
  position: relative;
}
/**********/
/* FOOTER */
/**********/
footer {
  background: #000;
  color: #fff;
  font-size: 12px;
}
.logo-footer {
  max-width: 160px;
}
.separateur-footer {
  padding-left: 10px;
  padding-right: 10px;
}
a.lien-outil {
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  text-transform: uppercase;
}
a.lien-outil:hover {
  color: #fff;
  font-size: 12px;
  text-decoration: underline;
}
#btn-deco {
  cursor: pointer;
  padding: 5px 20px;
  border: 1px solid #fff;
  border-radius: 2px;
  background: #000;
  color: #fff;
}
#btn-deco:hover {
  background: #fff;
  color: #000;
}
/*******************/
/****** LOGIN ******/
/*******************/
#page-login .ui-widget {
  font-family: inherit;
}
#page-login #marque-button {
	border:none;
	background-color: var(--gris) !important;
	display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  appearance: none;
  border-radius: .375rem;
}
#page-login .ui-menu-item-wrapper .ui-icon {
	width:30px;
	height:30px;
	background-position:center;
	background-size: contain;
}
#page-login .ui-selectmenu-icon {
	width:20px;
	height:20px;
}
#page-login .ui-selectmenu-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
	background-position:center bottom;
	background-size: 16px 12px;
}
.ui-state-active .ui-icon, .ui-button:active .ui-, .ui-icon, .ui-widget-content .ui-icon {
	background-image:none;
}
.ui-menu-icons .ui-menu-item-wrapper {
  padding-left: 2.5em;
}

#page-login, #page-login-stats {
  background: center center no-repeat url("../img/bg-login.jpg");
  background-size: cover;
}
@media (min-width:768px) {
  #page-login .texte-explicatif, #page-login-stats .texte-explicatif {
    max-width: 225px;
  }
}
.logo-login {
  max-width: 370px;
}
.login-encadre {
  background: #fff;
  border-radius: 20px;
  max-width: 800px;
  padding: 30px 40px;
}
.login-encadre h1 {
  font-size: 1.2em;
  font-weight: 400;
  padding-bottom: 20px;
}
.logo-login-stellantis {
  max-width: 310px;
  width: 100%;
}
@media (max-width:768px) {
  #page-login .logo-login-stellantis {
    max-width: 150px;
    margin: 0 auto;
  }
  #page-login h1 {
    font-size: 1.1em;
    padding-bottom: 10px;
  }
}
#loginForm label, #loginStatsForm label {
  font-size: 0.8em;
  font-weight: 600;
  padding-bottom: 10px;
}
#loginForm label span, #loginStatsForm label span {
  font-size: 0.9em;
  font-weight: 400;
}
#loginForm .mentions, #loginStatsForm .mentions {
  font-size: 0.6em;
}
#loginForm .form-group, #loginStatsForm .form-group {
  padding-bottom: 10px;
}
#loginForm .login_btn, #formEcoImpotVU .login_btn, #loginStatsForm .login_btn, #body-resultat .login_btn {
  color: #ffffff;
  background-color: var(--couleur-principale);
  padding: 10px 40px;
  margin: 10px auto;
  border: 0px;
  font-weight: 600;
  font-size: 0.9em;
}
#loginForm a.lien-mdp-oublie, #loginStatsForm a.lien-mdp-oublie {
  font-size: 0.8em;
  text-decoration: underline;
  color: #000;
  font-weight: 400;
}
@media (max-width:768px) {
  #loginForm a.lien-mdp-oublie, #loginStatsForm a.lien-mdp-oublie {
    font-size: 0.6em;
  }
}
#loginForm .help-block, #loginStatsForm .help-block {
  clear: both;
  width: 100%;
  text-align: right;
}
.alert {
  padding: 5px 10px;
  font-size: 0.8em;
  border-radius: 0px;
  border: 0px;
  margin-top: 2px;
  margin-bottom: 0px;
}
.etiquettes-date label, .etiquettes-taux-imposition label {
	font-size:0.7em;
	background-color:#ececec;
	padding:2px 10px;
	border-radius:2px;
	color:#6c757d;
}
.etiquettes-date span.espace, .etiquettes-taux-imposition span.espace {
	width:10px;
	display: inline-block;
}
.etiquettes-date span.espace:last-child, .etiquettes-taux-imposition span.espace:last-child {
	width:0px;
}
.etiquettes-date label:hover, .etiquettes-taux-imposition label:hover {
	cursor:pointer;
}
/************/
/* RESULTAT */
/************/
#durees_financement {
  max-width: 850px;
  /*margin: 0 auto;*/
}
@media (min-width:992px) {
  #body-resultat table.fixed {
    table-layout: fixed;
  }
  #body-resultat table.fixed th {
    max-width: 50%;
  }
}
#body-resultat table {
  max-width: 750px;
  border-collapse: separate;
  border-spacing: 0 10px;
  
}
@media (max-width:768px) {
	#body-resultat table {
		font-size: 0.8em;
	}
}
#body-resultat table tr {
  border: none;
  margin-bottom: 10px;
}
#body-resultat table th {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  background: #d7d6d6;
  font-weight: 400;
  padding: .5rem .9rem;
  border: none;
}
#body-resultat table td {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border: none;
  background: #ececec;
  font-weight: 500;
  padding: .5rem .9rem;
  vertical-align: middle;
}
#body-resultat table.comparaison {
  max-width: 400px;
}
#body-resultat table.comparaison td {
  font-weight: 600;
}
#body-resultat .accordion {
  max-width: 750px;
  margin: 0 auto;
}
/**********/
/* PROJET */
/**********/
.logo-header {
  max-width: 175px;
}
.entete {
  background: center center no-repeat url("../img/bg-header.jpg");
  background-size: cover;
}
.pied-page {
  background: top center no-repeat url("../img/img-footer.jpg");
  background-size: cover;
  height: 346px;
}
@media (max-width:768px) {
  .pied-page {
    height: 230px;
  }
}
#alerte_solution_montant_finance {
  font-size: 0.8em;
  padding-right: 28px;
  color: #6c757d;
}
.btn-footer { 
	margin-left:5px;
	margin-right:5px;
}
#btn-modifier-projet, #btn-nouveau-projet, .btn-footer {
  cursor: pointer;
  padding: 5px 20px;
  border: 1px solid #fff;
  border-radius: 2px;
  background: #000;
  color: #fff;
  text-decoration: none;
}
#btn-modifier-projet:hover, #btn-nouveau-projet:hover, .btn-footer:hover {
  background: #fff;
  color: #000;
}
#btn-generer-pdf {
  cursor: pointer;
  padding: 5px 20px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  text-decoration: none;
}
#btn-generer-pdf:hover {
  background: var(--bleu-stellantis);
  color: #fff;
}
/* AVANTAGES */
#date_prochain_rdv {
  max-width: 200px;
}
/* KPI */
.bg-choix-periode {
  background: top center no-repeat url("../img/bg-header-chiffres-cles.jpg");
  background-size: cover;
}
.encadre-form-choix-periode {
  border-radius: 20px;
  margin: 0 auto;
  background-color: #fff;
  max-width: 800px;
}
.encadre-form-choix-periode .titre {
  background-color: #0e3b85;
  color: #ffffff;
  margin-bottom: 0px;
  border-radius: 20px 20px 0px 0px;
}
.encadre-form-choix-periode .sous-titre {
  font-size: 22px;
  font-weight: 600;
}
/*.form-periode {
	background-color: #deeaff;
}*/
.form-periode input {
  background-color: #e0eafd !important;
}
.form-periode select {
  background-color: #ececec !important;
  border: 0px;
}
.form-periode .input-group-text {
  background-color: #0e3b85 !important;
  color: #fff;
}
#btn-stats {
  background-color: #0e3b85 !important;
  border-color: #0e3b85 !important;
}
/* '#0e3b85', '#0d589e', '#0d75b8', '#0c93d1', '#0cb0ea' */
.prestations_non_retenues .av_1 {
  color: #0d589e;
}
.prestations_non_retenues .av_1 div.cadre {
  border-color: #0d589e;
}
.prestations_non_retenues .av_2 {
  color: #0d75b8;
}
.prestations_non_retenues .av_2 div.cadre {
  border-color: #0d75b8;
}
.prestations_non_retenues .av_3 {
  color: #0c93d1;
}
.prestations_non_retenues .av_3 div.cadre {
  border-color: #0c93d1;
}
.prestations_non_retenues div.cadre {
  border: 3px solid #0e3b85;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.prestations_non_retenues p {
  line-height: 1rem;
  padding-bottom: 0px;
  margin-bottom: 0px;
  font-size: 0.8em;
}
.card {
  border: none;
}
.card-inline {
  flex-direction: row;
}
.card-header {
  border-radius: var(--bs-card-inner-border-radius) !important;
  border-bottom: 0px;
  background-color: #0e3b85;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
}
.card-body {
  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) !important;
}
.card.nb_general {
  background-color: #eaeaea;
}
.card.nb_general .card-body {
  color: #0e3b85;
}
.card span.unite {
  font-size: 0.5em;
}
.card.types_financement .card-header {
  background-color: #0e3b85;
}
.card.durees_financement .card-header {
  background-color: #0f845a;
}
.card.montants_finances .card-header {
  background-color: #107582;
}
.card-header.default {
  background: rgb(14, 59, 133);
  background: -moz-linear-gradient(141deg, rgba(14, 59, 133, 1) 0%, rgba(52, 116, 224, 1) 100%);
  background: -webkit-linear-gradient(141deg, rgba(14, 59, 133, 1) 0%, rgba(52, 116, 224, 1) 100%);
  background: linear-gradient(141deg, rgba(14, 59, 133, 1) 0%, rgba(52, 116, 224, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e3b85", endColorstr="#3474e0", GradientType=1);
  color: #fff !important;
}
.card.v1 {
  border-color: #086865;
}
.card-header.v1 {
  background-color: #086865;
  /*background: rgb(8,104,101);
		background: -moz-linear-gradient(141deg, rgba(8,104,101,1) 0%, rgba(33,131,128,1) 100%);
		background: -webkit-linear-gradient(141deg, rgba(8,104,101,1) 0%, rgba(33,131,128,1) 100%);
		background: linear-gradient(141deg, rgba(8,104,101,1) 0%, rgba(33,131,128,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#086865",endColorstr="#218380",GradientType=1);  */
  color: #fff !important;
}
.card.v2 {
  border-color: #218380;
}
.card-header.v2 {
  background-color: #218380;
  /*background: rgb(33,131,128);
		background: -moz-linear-gradient(141deg, rgba(33,131,128,1) 0%, rgba(148,168,154,1) 100%);
		background: -webkit-linear-gradient(141deg, rgba(33,131,128,1) 0%, rgba(148,168,154,1) 100%);
		background: linear-gradient(141deg, rgba(33,131,128,1) 0%, rgba(148,168,154,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#218380",endColorstr="#94a89a",GradientType=1); */
  color: #fff !important;
}
.card.v3 {
  border-color: #94a89a;
}
.card-header.v3 {
  background-color: #94a89a;
  /*background: rgb(148,168,154);
		background: -moz-linear-gradient(141deg, rgba(148,168,154,1) 0%, rgba(8,104,101,1) 100%);
		background: -webkit-linear-gradient(141deg, rgba(148,168,154,1) 0%, rgba(8,104,101,1) 100%);
		background: linear-gradient(141deg, rgba(148,168,154,1) 0%, rgba(8,104,101,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#94a89a",endColorstr="#086865",GradientType=1);   */
  color: #fff !important;
}
/*Bootstrap Calendar*/
.datepicker {
  border-radius: 0;
  padding: 0;
}
.datepicker-days table thead, .datepicker-days table tbody, .datepicker-days table tfoot {
  padding: 10px;
  display: list-item;
}
.datepicker-days table thead, .datepicker-months table thead, .datepicker-years table thead, .datepicker-decades table thead, .datepicker-centuries table thead {
  background: #3546b3;
  color: #ffffff;
  border-radius: 0;
}
.datepicker-days table thead tr:nth-child(2n+0) td, .datepicker-days table thead tr:nth-child(2n+0) th {
  border-radius: 3px;
}
.datepicker-days table thead tr:nth-child(3n+0) {
  text-transform: uppercase;
  font-weight: 300 !important;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.table-condensed > tbody > tr > td, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > thead > tr > th {
  padding: 11px 13px;
}
.datepicker-months table thead td, .datepicker-months table thead th, .datepicker-years table thead td, .datepicker-years table thead th, .datepicker-decades table thead td, .datepicker-decades table thead th, .datepicker-centuries table thead td, .datepicker-centuries table thead th {
  border-radius: 0;
}
.datepicker td, .datepicker th {
  border-radius: 50%;
  padding: 0 12px;
}
.datepicker-days table thead, .datepicker-months table thead, .datepicker-years table thead, .datepicker-decades table thead, .datepicker-centuries table thead {
  background: #3546b3;
  color: #ffffff;
  border-radius: 0;
}
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
  background-image: none;
}
.datepicker .prev, .datepicker .next {
  color: rgba(255, 255, 255, 0.5);
  transition: 0.3s;
  width: 37px;
  height: 37px;
}
.datepicker .prev:hover, .datepicker .next:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.99);
  font-size: 21px;
}
.datepicker .datepicker-switch {
  font-size: 24px;
  font-weight: 400;
  transition: 0.3s;
}
.datepicker .datepicker-switch:hover {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
}
.datepicker table tr td span {
  border-radius: 2px;
  margin: 3%;
  width: 27%;
}
.datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover {
  background-color: #3546b3;
  background-image: none;
}
.dropdown-menu {
  border: 1px solid rgba(0, 0, 0, .1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.datepicker-dropdown.datepicker-orient-top:before {
  border-top: 7px solid rgba(0, 0, 0, .1);
}
/* PRINT */
.swal2-popup .swal2-styled:focus {
  box-shadow: none !important;
}
.btn-print-swal {
  background: var(--couleur-principale);
  color: #fff;
  padding: 15px 40px;
  display: inline-flex;
  border-radius: 3px;
  margin-top: 20px;
  text-decoration: none;
}
.btn-print-swal:hover {
  color: #fff;
}
/* PDF */
#body-pdf #bloc-entete img {
  display: none !important;
}
#body-pdf #bloc-logo-marque {
  display: none;
}
#display_pdf {
  width: 100%;
  height: 1500px;
}
@media (max-width:1200px) {
  #display_pdf {
    height: 1400px;
  }
}
@media (max-width:992px) {
  #display_pdf {
    height: 1000px;
  }
}
@media (max-width:768px) {
  #display_pdf {
    height: 700px;
  }
}
@media (max-width:576px) {
  #display_pdf {
    height: 600px;
  }
}
/* LOADER */
/* Absolute Center Spinner */
.loading {
  display: none;
  position: fixed;
  z-index: 999;
  /*height: 2em;
	width: 2em;*/
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
/* Transparent Overlay */
.loading:before {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
	background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));*/
}
/* loader compte tour */
#loader-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));
  background: -webkit-radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));
  z-index: 15;
  overflow: hidden;
}
.loader {
  width: 150px;
  height: 150px;
  border: 2px #fff solid;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
}
.loader .loading {
  font-size: 10px;
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 14px;
  font-style: italic;
  left: 0;
  top: 50%;
  margin-top: 15px;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}
.loader-circle-1 {
  width: 138px;
  height: 138px;
  left: 5px;
  top: 5px;
  border: 1px #fff solid;
  border-radius: 50%;
  position: absolute;
  border-right-color: transparent;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}
.loader-circle-2 {
  width: 126px;
  height: 126px;
  left: 5px;
  top: 5px;
  border: 1px transparent solid;
  border-radius: 50%;
  position: absolute;
  border-right-color: var(--couleur-principale);
  -webkit-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;
}
.loader .line {
  width: 10px;
  height: 2px;
  background: #fff;
  position: absolute;
}
.loader .line:nth-child(1) {
  left: 16px;
  top: 50%;
  margin-top: -1px;
}
.loader .line:nth-child(2) {
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  left: 33px;
  top: 33px;
}
.loader .line:nth-child(3) {
  top: 16px;
  left: 50%;
  width: 2px;
  height: 10px;
}
.loader .line:nth-child(4) {
  transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  right: 33px;
  top: 33px;
}
.loader .line:nth-child(5) {
  right: 16px;
  top: 50%;
  margin-top: -1px;
}
.loader .line:nth-child(6) {
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  right: 33px;
  bottom: 33px;
  background: var(--couleur-principale);
}
.loader .subline {
  position: absolute;
  width: 3px;
  height: 2px;
  background: #fff;
}
.loader .subline:nth-child(7) {
  transform: rotate(22.5deg);
  -moz-transform: rotate(22.5deg);
  -webkit-transform: rotate(22.5deg);
  -ms-transform: rotate(22.5deg);
  left: 21px;
  top: 50px;
}
.loader .subline:nth-child(8) {
  transform: rotate(67.5deg);
  -moz-transform: rotate(67.5deg);
  -webkit-transform: rotate(67.5deg);
  -ms-transform: rotate(67.5deg);
  left: 50px;
  top: 21px;
}
.loader .subline:nth-child(9) {
  transform: rotate(112.5deg);
  -moz-transform: rotate(112.5deg);
  -webkit-transform: rotate(112.5deg);
  -ms-transform: rotate(112.5deg);
  right: 50px;
  top: 21px;
}
.loader .subline:nth-child(10) {
  transform: rotate(157.5deg);
  -moz-transform: rotate(157.5deg);
  -webkit-transform: rotate(157.5deg);
  -ms-transform: rotate(157.5deg);
  right: 21px;
  top: 50px;
}
.loader .subline:nth-child(11) {
  transform: rotate(22.5deg);
  -moz-transform: rotate(22.5deg);
  -webkit-transform: rotate(22.5deg);
  -ms-transform: rotate(22.5deg);
  right: 20px;
  bottom: 49px;
  background: var(--couleur-principale);
}
.loader .needle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px #fff solid;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -8px 0 0 -8px;
  z-index: 1;
  -webkit-animation: pegIt 3s infinite ease-in-out;
  animation: pegIt 3s infinite ease-in-out;
}
.loader .needle:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.5px 50px 3.5px 0;
  border-color: transparent var(--couleur-principale) transparent transparent;
  position: absolute;
  right: 50%;
  top: 50%;
  margin: -3.5px 0 0 0;
  border-radius: 0 50% 50% 0;
}
@keyframes pegIt {
  0% {
    transform: rotate(0deg);
  }
  16% {
    transform: rotate(75deg);
  }
  25% {
    transform: rotate(55deg);
  }
  30% {
    transform: rotate(90deg);
  }
  36% {
    transform: rotate(170deg);
  }
  42% {
    transform: rotate(150deg);
  }
  50% {
    transform: rotate(227deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes pegIt {
  0% {
    -webkit-transform: rotate(0deg);
  }
  16% {
    -webkit-transform: rotate(75deg);
  }
  25% {
    -webkit-transform: rotate(55deg);
  }
  30% {
    -webkit-transform: rotate(90deg);
  }
  36% {
    -webkit-transform: rotate(170deg);
  }
  42% {
    -webkit-transform: rotate(150deg);
  }
  50% {
    -webkit-transform: rotate(227deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}