@charset "utf-8";

/*************************************** Mes soin energetique **********************************/


.box_soinEnergetique_nav {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_soin_energetique_nav.png);
  background-size: cover;
}

#energyCareportrait {
  width: 100px;
  margin: 20px;
  border-radius: 10px;
}

/************************************ Fin mes soin energetique *********************************/

/*Ajout des custom fonts : */
@font-face {
  font-family: Melbourne_regular_basic;
  src: url("../fonts/Melbourne_regular_basic.ttf");
}

@font-face {
  font-family: gingo;
  src: url("../fonts/gingo.ttf");
}

@font-face {
  font-family: y3ko;
  src: url("../fonts/y3ko.ttf");
}

@font-face {
  font-family: Thundero;
  src: url("../fonts/Thundero.ttf");
}

@font-face {
  font-family: Hansen-Shadow;
  src: url("../fonts/Hansen-Shadow.ttf");
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  position: fixed;
  display: block;
  width: 100%;
}

body {
  margin: 0px;
  height: 100%;
}

#bodyAcceuil {
  background-repeat: no-repeat;
  height: 100vh;
  background-size: 80%;
  background-position-x: 50%;
  background-position-y: 50%;
  background-color: rgb(31, 31, 31);
}

h1 {
  font-size: 25px;
}

.center {
  display: flex;
  width: 100%;
  justify-content: center;
}

.grecaptcha-badge {
  z-index: 9999;
}

.recaptcha-display-none {
  display: none;
}

/*************************************************************************************************/
/***************************** Box d'alerte des erreurs et succès ******************************/
.boxCover {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999999;
  display: flex;
  justify-content: center;
}

.boxAlert {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin: auto auto;
  min-width: 400px;
  padding: 20px;
}

.boxAlert h3 {
  margin-top: -20px;
}

.alertErrors {
  -webkit-box-shadow: 0px 0px 10px rgba(233, 10, 10, 0.907);
  -moz-box-shadow: 0px 0px 10px rgba(233, 10, 10, 0.907);
  box-shadow: 0px 0px 10px rgba(233, 10, 10, 0.907);
  border: 5px solid rgba(233, 29, 18, 0.906);
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alertSucces {
  -webkit-box-shadow: 0px 0px 10px rgba(18, 233, 82, 0.906);
  -moz-box-shadow: 0px 0px 10px rgba(18, 233, 82, 0.906);
  box-shadow: 0px 0px 10px rgba(18, 233, 82, 0.906);
  border: 5px solid rgba(18, 233, 82, 0.906);
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.boxAlertBtnClose {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  z-index: 999999999;
}

.boxAlertBtnClose a {
  margin-right: -20px;
  margin-top: -20px;
  z-index: 999999999;
}

/**************************** Fin box d'alerte des erreurs et succès ***********************/
/*******************************************************************************************/
/****************************** Formulaire de contact **************************************/
.container-contact {
  z-index: 9999;
  position: fixed;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.border-out-box-contact {
  border: 10px solid;
  border-color: rgb(45, 45, 45);
  box-shadow: 0px 0px 4px 0px rgb(39, 235, 13);
  border-radius: 20px;
}

.baniere-contact-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.baniere {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  height: 80px;
  width: 48%;
  min-width: 360px;
  border-radius: 20px;
  border: 2px solid rgb(50, 50, 50);
  box-shadow: 0px 0px 0px 2px rgb(75, 75, 75),
    0px 0px 2px 2px rgb(100, 100, 100), inset 0px 0px 0px 3px rgb(35, 35, 35),
    inset 0px 0px 7px 4px rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

.baniere h2 {
  font-size: 3rem;
  display: flex;
  justify-content: center;
  margin: 0px;
}

.coordonnees {
  min-height: 80px;
  max-height: 360px;
  width: 44%;
  min-width: 360px;
  border-radius: 20px;
  border: 2px solid rgb(50, 50, 50);
  box-shadow: 0px 0px 0px 2px rgb(75, 75, 75),
    0px 0px 2px 2px rgb(100, 100, 100), inset 0px 0px 0px 3px rgb(35, 35, 35),
    inset 0px 0px 7px 4px rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  display: flex;
  justify-content: left;
  margin-bottom: 35px;
  margin-left: 3%;
  margin-right: 3%;
  padding-block-start: 0.35em;
  padding-inline-start: 0.75em;
  padding-inline-end: 0.75em;
  padding-block-end: 0.625em;
}

.coordonnees .fondImg {
  height: 100%;
}

.coordonnees .fondImg img {
  width: 80px;
  margin-top: 10px;
  margin-left: 10px;
}

.coordonnees p {
  font-size: calc(0.7rem + 1vw);
  margin-top: 10px;
}

.coordonnees p em {
  color: red;
}

.formContactMessage {
  width: 44%;
  min-width: 360px;
  margin-left: 3%;
  margin-right: 3%;
}

.formContactMessage .inputs {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  min-height: 80px;
}

.formContact {
  width: 100%;
  height: 100%;
}

form.formContact fieldset {
  display: flex;
  justify-content: center;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-block-start: 0em;
  padding-inline-start: 0em;
  padding-inline-end: 0em;
  padding-block-end: 0em;
  min-inline-size: min-content;
  border-width: 0px;
  border-style: groove;
  border-color: rgb(192, 192, 192);
  border-image: initial;
}

.formContact textarea {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: none;
  font-size: calc(0.7rem + 1vw);
  border-radius: 20px;
  border: 2px solid rgb(50, 50, 50);
  box-shadow: 0px 0px 0px 2px rgb(75, 75, 75),
    0px 0px 2px 2px rgb(100, 100, 100), inset 0px 0px 0px 3px rgb(35, 35, 35),
    inset 0px 0px 7px 4px rgb(0, 0, 0);
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.formContact textarea:focus {
  color: #212529;
  background-color: #fff;
  outline: 0;
  border-radius: 20px;
  border: 2px solid rgb(0, 0, 255);
  box-shadow: 0px 0px 0px 2px rgb(46, 46, 255), 0px 0px 6px 1px rgb(0, 0, 255),
    inset 0px 0px 0px 3px rgb(3, 0, 182), inset 0px 0px 7px 4px rgb(5, 0, 71);
}

/*************************** Fin du formulaire de contact ******************************/
/***************************************************************************************/
/****************************** Formulaire des espaces *********************************/

.box-espaces {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 15px;
  width: 150px;
  min-width: 150px;
  height: 150px;
  margin: 15px;
  border: 1px solid white;
  letter-spacing: 1px;
  -moz-user-select: none;
  /* Firefox */
  -webkit-user-select: none;
  /* Chrome, Safari, Opéra depuis la version 15 */
  -ms-user-select: none;
  /* Internet explorer depuis la version 10 et Edge */
  user-select: none;
  /* Propriété standard */
}

.box-espaces-refuse {
  border: 2px solid rgb(65, 65, 65);
  box-shadow: 0px 0px 0px 1px rgb(255, 0, 0), 0px 0px 2px 1px rgb(211, 0, 0),
    0px 0px 8px 2px rgb(155, 0, 0), inset 0px 0px 0px 6px rgb(35, 35, 35),
    inset 0px 0px 1px 8px rgb(75, 75, 75), inset 0px 0px 0px 9px rgb(255, 0, 0),
    inset 0px 0px 0px 10px rgb(75, 75, 75),
    inset 0px 0px 6px 11px rgb(255, 0, 0);
  border-radius: 10px;
}

.box_espaces_authorized {
  border: 2px solid rgb(65, 65, 65);
  box-shadow: 0px 0px 0px 1px rgb(0, 255, 30), 0px 0px 2px 1px rgb(0, 211, 56),
    0px 0px 8px 2px rgb(0, 143, 62), inset 0px 0px 0px 6px rgb(35, 35, 35),
    inset 0px 0px 1px 8px rgb(75, 75, 75),
    inset 0px 0px 0px 9px rgb(0, 255, 102),
    inset 0px 0px 0px 10px rgb(75, 75, 75),
    inset 0px 0px 6px 11px rgb(0, 255, 76);
  border-radius: 10px;
}

.box-espace-calcul {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/backgroundNavEspaceCalcul.png);
  background-size: cover;
}

.box_espace_admin {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_admin_nav.png);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

.box_espace_reiki {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_Reiki.png);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

.box_acceuil_aigle {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_aigle.png);
  background-size: cover;
}

.box-espace-picture-nav {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/background_my_picture.png);
  background-size: cover;
}

.box_esterisme_nav {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_esoterisme_nav.png);
  background-size: cover;
}

.box_reikiAcceuil_nav {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_reiki_acceuil_nav.png);
  background-size: cover;
}

.box_formSoinsEnergetique {
  background-color: rgba(255, 255, 255, 1);
  background-image: url(../img/logo_formEnergyCare_nav.jpg);
  background-size: cover;
  opacity: 0.9;
}

.formSoinsEnergetique_nav {
  background-image: url(../img/logo_formEnergyCare_nav.jpg);
  background-size: cover;
}

.box_mesSoinEnergetique_nav {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_mesSoins_energetiques_nav.jpg);
  background-size: cover;
}

/* A travailler ci-dessous ***************************************************************************************************************************************/
.box_admin_soin_energetique {
  background-image: url(../img/logo_soin_energetique_nav.png);
  background-size: cover;
}

.box_admin_esoterisme_doctrine_secrete {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/hpb.png);
  background-size: cover;
}

.box_admin_esoterisme_Tibetain_AAB {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/AAB.png);
  background-size: cover;
}

.box_admin_FDE {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/Portrait_Fabien_2022_03_16.jpg);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

.box_admin_esoterisme_Pastor {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_Omnia_nav.png);
  background-size: cover;
}

.box-espaces span {
  display: inline-block; /* Permet de gérer le comportement de la ligne */
  width: 100px; /* Définissez la largeur souhaitée */
  word-wrap: break-word; /* Permet de couper les mots si nécessaire */
  overflow-wrap: break-word; /* Assure la compatibilité avec différents navigateurs */
  text-align: center;
  color: #00ff15;
  font-size: 1.3rem;
  text-shadow: 0px 0px 2px rgb(254, 0, 0);
  text-decoration: none;
}

.box_admin_esoterisme_doctrine_secrete span {
  color: #ffffff;
  text-shadow: 0px 0px 3px rgb(57, 2, 194);
}

.box_nav_reiki_pratique {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_reiki_pratique_nav.png);
  background-size: cover;
}

.box_nav_reiki_exercices {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_reiki_exercices_nav.png);
  background-size: cover;
}

.box_nav_reiki_symboles {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_reiki_symboles_nav.png);
  background-size: cover;
}
.box_nav_drone {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_drone.png);
  background-size: cover;
}
.box_nav_modelisme {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_modelisme.png);
  background-size: cover;
}
.box_nav_modelisme {
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo_buggy_nav.png);
  background-size: cover;
}

/*************************** Fin du formulaire des espaces *****************************/
/***************************************************************************************/

.user-header-btn-connexion a:-webkit-any-link {
  color: white;
  cursor: pointer;
  text-decoration: none;
}


/************************************************************************************/
/***************************  Bagniere du site bouton acceuil **************************/

.bagniere_btn_img {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: calc(100%);
  height: calc(100%);
  border-radius: 23px;
  background-image: url(../img/Portrait-Fabien3.png);
  background-size: cover;
  border: 2px solid rgb(21, 21, 21);
  box-shadow: 0px 0px 0px 0.8px rgb(19, 21, 141),
    inset 0px 0px 0px 0.2px rgb(11, 11, 151);
}

.bagniere_btn_img:active {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 0.5px solid rgb(0, 0, 0);
  box-shadow: 0px 0px 2px 0.5px rgb(34, 226, 50),
    inset 0px 0px 0px 0.2px rgb(11, 11, 151);
  transition: all 0.07s ease-in-out;
}

/************************  Fin bagniere du site bouton acceuil **************************/
/****************************************************************************************/
/******************************  Box de statut et action users ***************************/

.btnStatut-offline {
  background-color: rgb(235, 58, 58);
  border: 3px solid rgb(95, 95, 95);
  box-shadow: 0px 0px 0px 1px rgb(150, 150, 150),
    inset 0px 0px 0px 1px rgb(45, 45, 45);
}

.btnStatut-offline:active {
  background-color: rgb(255, 30, 30);
  border: 3px solid rgb(95, 95, 95);
  box-shadow: 0px 0px 12px 1px rgb(228, 38, 38),
    inset 0px 0px 0px 1px rgb(45, 45, 45);
}

.user-header-btn-connexion {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: calc(100%);
  height: calc(100%);
  border-radius: 19px;
  background: linear-gradient(0deg, rgb(0, 0, 0), rgb(97, 97, 97));
  box-shadow: 0px 0px 1px 2px rgb(28, 28, 28);
  color: white;
  letter-spacing: 1px;
}

.user-header-btn-connexion:active {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  font-size: calc(100% - 1px);
  transition: all 0.07s ease-in-out;
}

.user-header-btn-connexion span {
  text-shadow: -1px 1px 2px rgb(187, 187, 187);
  /* Firefox */
  -webkit-user-select: none;
  /* Chrome, Safari, Opéra depuis la version 15 */
  -ms-user-select: none;
  /* Internet explorer depuis la version 10 et Edge */
  user-select: none;
  /* Propriété standard */
}

#user-header-btn-contact {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: calc(100%);
  height: calc(100%);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px;
  border: 0px solid rgb(180, 180, 180);
  border-radius: 19px;
  background: linear-gradient(0deg, rgb(0, 0, 0), rgb(97, 97, 97));
  box-shadow: 0px 0px 1px 2px rgb(28, 28, 28);
  color: white;
  letter-spacing: 1px;
  font-size: 0.8em;
  transition: all 0.07s ease-in-out;
  text-shadow: -1px 1px 2px rgb(187, 187, 187);
}

#user-header-btn-contact:active {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  font-size: calc(0.8em - 1px);
  transition: all 0.07s ease-in-out;
}

/***************************  Fin box de statut et action users **************************/
/*******************************************************************************/
/***********************  Box d'actions *********************/

.action-box-dashed-line {
  width: 80%;
  height: 0px;
  margin: 10px auto 10px auto;
  box-shadow: 0px 0px 2px 1px rgb(75, 75, 75);
}

.action-box-dashed-line-small {
  width: 40%;
  height: 0px;
  margin: 10px auto 10px auto;
  box-shadow: 0px 0px 1px 1px rgb(75, 75, 75);
  opacity: 60%;
}

/************************ Fin box d'actions ********************************/
/***************************************************************************/
/***********************  Box formulaire d'inscription *********************/

input::placeholder {
  font-size: 0.7em;
}

.listeFormInscription {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

/***********************  Fin du box formulaire d'inscription *********************/
/**********************************************************************************/
/****************************  btn inscription  ***********************************/

.user-header-border-btn-connexion-box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: 42px;
  width: 120px;
  min-width: 80px;
  margin: auto auto;
  border-radius: 21px;
  border: 1px solid rgb(97, 97, 97);
  box-shadow: -2px 1px 7px 0px rgb(28, 28, 28),
    inset 0px 0px 0px 6px rgb(75, 75, 75);
}

.user-header-border-btn-connexion-box-large {
  width: 140px;
  min-width: 140px;
}

.user-header-border-btn-connexion-box-contact {
  width: 200px;
  min-width: 200px;
}

.user-header-border-btn-connexion-box:active {
  box-shadow: 0px 0px 7px 1px rgb(15, 11, 250),
    inset 0px 0px 0px 6px rgb(75, 75, 75);
  transition: all 0.07s ease-in-out;
}

.user-header-border-corps-btn-connexion-box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 4px solid rgb(16, 13, 109);
  border-radius: 20px;
}

.user-header-border-corps-btn-connexion-box:active {
  border: 4px solid rgb(15, 11, 250);
  transition: all 0.07s ease-in-out;
}

/******************************  fin btn inscription  ****************************/
/***************************************************************************************/
/******************************* Conditions générales **********************************/

.charte {
  font-size: 18px;
  font-style: italic;
  z-index: 99;
}

.terms {
  margin-top: 10px;
  margin-bottom: 10px;
  z-index: 99;
}

.bodyCharte {
  padding: 80px;
  height: 5600px;
}

.conditions_generales p {
  font-size: 14px;
  margin-left: 30px;
  margin-right: 10px;
}

.conditions_generales blockquote {
  font-size: 18px;
  margin-left: 10px;
  margin-right: 10px;
}

/*************************** Fin des conditions générales ******************************/
/***************************************************************************************/
/************************************ Article PDD **************************************/

.containerBackgroundWhite06 {
  background-color: rgba(255, 255, 255, 0.6);
}

.ImgMin400 {
  width: 100%;
  min-width: 400px;
}

.ImgMin400Max800 {
  width: 100%;
  min-width: 400px;
  max-width: 800px;
}

.ImgHeight400 {
  height: 400px;
}

.ElementWidth500 {
  max-width: 600px;
  min-width: 400px;
  margin: 10px;
}

.ElementWidth200right {
  width: 200px;
  min-width: 200px;
  float: right;
  margin: 10px;
}

.ElementWidth90 {
  width: 90%;
  margin: 10px;
}

.BtnChoixId {
  width: 400px;
}

.sectionPDD ol {
  list-style-type: decimal;
}

#articlePdd section .textPDD1 {
  padding: 20px;
  max-width: 500px;
  min-width: 300px;
}

#articlePdd section .textPDD1 ol li {
  color: #000;
}

.imagePDD1 {
  width: 40%;
  display: flex;
  justify-content: center;
}

#textEtImagePDD2 .textPDD1 {
  display: flex;
  align-items: center;
}

#textEtImagePDD2 .textPDD1 p {
  display: flex;
  align-items: center;
}

#textPDDOL2A {
  list-style-type: "a. ";
}

#textPDDOL2B {
  list-style-type: "b. ";
}

#articlePdd section .textPDD3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 500px;
}

#imagePDD9 img {
  width: 100%;
}

#textEtImagePDD12_1 {
  background-image: url(../img/PDDProfondeur1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  padding-top: 100%;
}

#textEtImagePDD12_1 p {
  margin-top: -90%;
  margin-left: 20px;
  width: 50%;
  z-index: 99;
}

.imagePDD5 {
  margin: 30px;
  display: flex;
  justify-content: center;
  width: 80%;
}

.imagePDD5 img {
  width: 80%;
}

#tabIDetDPP table {
  border-spacing: 1px;
  margin: auto auto;
}

#tabIDetDPPID tr td {
  border: 1.5px solid #4c05e4;
  text-align: center;
}

.PDD-slider-nbrID-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

/* partie commune */
input[type="range"].custom-slider {
  appearance: none;
  /*Pour effacer les attributs definit par le navigateur*/
  width: 80%;
  padding: 0;
  /* nécessaire pour IE */
  font: inherit;
  /* même rendu suivant font document */
  outline: none;
  color: rgb(206, 224, 87);
  /* sert pour couleur de référence, via currentColor, pour le curseur */
  opacity: 1;
  background: #ccc;
  /* sert pour couleur de fond de la zone de déplacement */
  box-sizing: border-box;
  /* même modèle de boîte pour tous */
  transition: opacity 0.2s;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  /*Pour effacer les attributs definit par le navigateur*/
}

input[type="range"]:focus {
  outline: none;
  /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

/* la zone de déplacement */
input[type="range"].custom-slider::-ms-track {
  height: 100%;
  border: none;
  border-radius: 0;
  color: transparent;
  /* supprime les graduations pour IE */
  background-color: transparent;
  /* supprimé définie sur l'input */
}

/* le curseur */
input[type="range"].custom-slider::-ms-thumb {
  width: 1em;
  height: inherit;
  /* s'adapte à la hauteur de l'input */
  border: none;
  /* supprimer la bordure */
  border-radius: 0;
  /* supprimer le rayon */
  background: white;
}

/* la tooltip de la valeur */
input[type="range"].custom-slider::-ms-tooltip {
  display: none;
  /* supprime l'affichage de la valeur au survol */
}

/* barre progression avant */
input[type="range"].custom-slider::-ms-fill-lower {
  background: transparent;
}

/* barre progression après */
input[type="range"].custom-slider::-ms-fill-upper {
  background: transparent;
}

/*==============================*/
/* partie commune               */
/*==============================*/
input[type="range"].custom-slider.custom-slider-bullet {
  height: 20px;
  color: rgb(75, 75, 75);
  border: 4px solid rgb(75, 75, 75);
  box-shadow: 0px 0px 0px 2px rgba(85, 85, 85, 0.9),
    0px 0px 0px 3px rgb(68, 0, 255), 0px 0px 0px 5px rgba(85, 85, 85, 0.9),
    0px 0px 6px 5px rgb(68, 0, 255), inset 0px 0px 0px 1px rgba(46, 46, 46, 0.9),
    inset 0px 0px 0px 1.5px rgb(68, 0, 255),
    inset 0px 0px 0px 2.5px rgba(46, 46, 46, 0.9),
    inset 0px 0px 4px 4px rgb(68, 0, 255);
  margin: 20px;
  border-radius: 15px;
  background: transparent;
  background-image: linear-gradient(
    to bottom,
    rgb(27, 27, 27) 30%,
    rgb(64, 0, 255) 50%,
    rgb(27, 27, 27) 70%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/*==============================*/
/* le curseur                   */
/*==============================*/
input[type="range"].custom-slider.custom-slider-bullet::-webkit-slider-thumb {
  width: 50px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(
    circle at 70% 30%,
    #d7d8da 0%,
    #5d5e65 50%,
    rgb(51, 51, 51) 100%
  );
  box-shadow: inset 0px 0px 0px 0.5px rgb(30, 0, 254),
    inset 0px 0px 12px 0px rgb(68, 0, 255);
}

.textEtImagePDD5 {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.imagePDD6 {
  width: 20%;
}

.PDD-slider-nbrID-value-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: 80%;
  margin: 10px;
}

.PDD-slider-nbrID-value-display-bord {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: 42px;
  min-width: 150px;
  border-radius: 21px;
  border: 1px solid rgb(97, 97, 97);
  box-shadow: -2px 1px 7px 0px rgb(28, 28, 28),
    inset 0px 0px 0px 6px rgb(75, 75, 75);
}

.PDD-slider-nbrID-value-display-bord-span:active {
  box-shadow: 0px 0px 7px 1px rgb(15, 11, 250),
    inset 0px 0px 0px 6px rgb(75, 75, 75);
  transition: all 0.07s ease-in-out;
}

.PDD-slider-nbrID-value-display-bord-int {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 4px solid rgb(16, 13, 109);
  border-radius: 20px;
}

.PDD-slider-nbrID-value-container span,
.PDD-slider-nbrID-value-container label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: calc(100%);
  height: calc(100%);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px;
  border: 0px solid rgb(180, 180, 180);
  border-radius: 19px;
  background: linear-gradient(0deg, rgb(0, 0, 0), rgb(97, 97, 97));
  box-shadow: 0px 0px 1px 2px rgb(28, 28, 28);
  color: white;
  letter-spacing: 1px;
  font-size: 1em;
  text-shadow: -1px 1px 2px rgb(187, 187, 187);
}

.PDD-slider-nbrID-value-container span {
  cursor: pointer;
}

.PDD-slider-nbrID-value-container span:active {
  background-color: rgb(241, 245, 255);
  outline: 0;
  box-shadow: 0px 0px 8px 1px rgb(26, 22, 248),
    inset 0px 0px 1px 1px rgb(26, 22, 248);
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  font-size: calc(100% - 1px);
  transition: all 0.07s ease-in-out;
  user-select: none;
}

/******************************* Fin de l'article PDD **********************************/
/***************************************************************************************/
/**************************  Box des article en page espace calculs  ***************************/

.box-calcul-pdd-nav {
  background-image: url(../img/backgroundNavArticlePdd.png);
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.5);
}

/************************  Fin box des article en page espace calculs  *************************/
/***********************************************************************************************/
/******************************  Page Admin article calculs pdd  *******************************/
#containerAdminArticlePdd {
  position: fixed;
  overflow: scroll;
  top: 60px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

#containerAdminArticlePdd::-webkit-scrollbar {
  width: 10px;
}

#containerAdminArticlePdd::-webkit-scrollbar-thumb {
  background-color: rgb(236, 131, 32);
  border-radius: 20px;
  border: 3px solid rgb(216, 33, 192);
}

.containerAdminArticlePdd {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
/*****************************  Fin Page Admin article calculs pdd  ****************************/
/***********************************************************************************************/
/***************************** Livre d'or et questions réponse *********************************/

.goldenBook-questions-answer-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.goldenBook-questions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  background-color: rgba(49, 162, 255, 0.381);
  width: 100%;
  min-height: 20px;
  padding: 1%;
  box-shadow: 0px 0px 4px 1px rgb(100, 100, 100);
  border-radius: 10px;
}

.goldenBook-answer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  background-color: rgba(131, 248, 77, 0.25);
  width: 100%;
  min-height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 1%;
  box-shadow: 0px 0px 4px 1px rgb(125, 125, 125);
  border-radius: 10px;
}

.goldenBook-title {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: 80%;
  margin: 10px auto 10px auto;
}

/**************************** Fin livre d'or et questions réponse ******************************/
/***********************************************************************************************/
/********************************** Mes controles energetiques *********************************/

.body-my-energy-care {
  background-image: none;
  background-color: rgb(107, 107, 107);
  height: 100vh;
  width: 100vw;
}

.boxLogoPdf {
  cursor: pointer;
  width: 100px;
  margin: 20px;
  height: 100px;
  border: 3px solid rgb(255, 62, 62);
  border-radius: 10px;
  background-color: rgba(200, 200, 200, 0.9);
  background-image: url(../img/logo-pdf.png);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}
/******************************** Fin mes controles energetiques *******************************/
/***********************************************************************************************/
/***************************************** esoterisme ******************************************/

.boxLogoPdf_laDoctrineSecrete {
  cursor: pointer;
  width: 100px;
  margin: 20px;
  height: 100px;
  background-image: url(../img/logo-pdf.png);
  background-size: 80%;
  background-repeat: no-repeat;
}

.box_audio_conferencePastor {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.box_audio_conferencePastor figcaption {
  color: white;
  text-shadow: 2px 1px black;
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 10px;
}

.box_audio_conferencePastor audio {
  opacity: 0.7;
}

/*************************************** Fin esoterisme ****************************************/
/***********************************************************************************************/
/************************************ Classe globalles *****************************************/

.containerH50W100pour100 {
  height: 50px;
  min-height: 45px;
  width: 100%;
}

.width200 {
  width: 200px;
}

.width300 {
  width: 300px;
}

.width400 {
  width: 400px;
}

.width500 {
  width: 500px;
}

.width600 {
  width: 600px;
}

.marginTopbottom30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.marginTopbottom20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.align_content_center {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.padding_20VH {
  width: 100%;
  height: 30vh;
}

/************* Chargeur **************/
.box-loader-hydden {
  display: none;
}

.box-loader {
  z-index: 999999999;
  display: flex;
  position: fixed;
  left: 0px;
  right: 0px;
  top: 60px;
  bottom: 0px;
  background-color: rgba(255, 255, 255, 0.4);
}

.loader {
  border: 16px solid rgb(75, 75, 75);
  border-radius: 50%;
  border-top: 16px solid #0400ff;
  border-top-style: double;
  width: 120px;
  height: 120px;
  margin: auto auto;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/************* Fin chargeur **************/

.dashed-line {
  width: 100%;
  height: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.dashed-line-big {
  width: 90%;
  height: 0px;
  margin-left: 5%;
  margin-right: 5%;
}

.dashed-line-medium {
  width: 60%;
  height: 0px;
  margin-left: 20%;
  margin-right: 20%;
}

.dashed-line-small {
  width: 30%;
  height: 0px;
  margin-left: 35%;
  margin-right: 35%;
}

.dashed-line-grey {
  box-shadow: 0px 0px 2px 1px rgb(75, 75, 75);
}

.mess_err {
  font-size: 18px;
  margin-top: -10px;
  margin-bottom: 10px;
  color: red;
  font-style: italic;
  width: 100%;
  text-align: center;
}

.Hydden_minus_1000 {
  display: none;
}

.hydden {
  display: none;
}

.hidden {
  display: none;
}

.bourrage30 {
  width: 100%;
  height: 30%;
}

.margin20px {
  margin: 20px;
}
