html, body {height: 100%;background-color:#000000;color:#eee;background-image:none;}
html {scroll-behavior: smooth;}
.bi {vertical-align: .02em;fill: currentColor;backdrop-filter: blur(8px);}
.bi:hover {backdrop-filter: blur(8px);transform: scale(1.25)}
.encart {margin-bottom:1rem;padding:0.4rem 0.5rem;color:rgba(255,255,255,0.7);background-color:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);border-style:solid;border-width:1px;border-radius:0.3rem;-webkit-transition:color 0.2s,background-color 0.2s,border-color 0.2s;transition:color 0.2s,background-color 0.2s,border-color 0.2s;}
.bouton-perso {text-decoration:none;display:inline-block;margin-bottom:1rem;padding:0.4rem 0.5rem;color:rgba(255,255,255,0.7);background-color:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);border-style:solid;border-width:1px;border-radius:0.3rem;-webkit-transition:color 0.2s,background-color 0.2s,border-color 0.2s;transition:color 0.2s,background-color 0.2s,border-color 0.2s;}
.bouton-perso:hover {background-color:rgba(255,255,255,0.2);color:rgb(255,255,255);}
.bouton,a.bouton{font-size:0.8em;text-decoration:none;padding:5px 8px 5px 8px;color:#fff;background-color:#1e1e1e;border-radius:0.3rem;-moz-border-radius:0.3rem;-webkit-border-radius:0.3rem;border:1px solid rgba(255,255,255,0.2);transition:all 0.3s}.bouton:hover,a.bouton:hover{text-decoration:none;background-color:#000000}.btn.bouton,a.btn.bouton{color:#555;font-weight:bold;background-color:transparent;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;border:1px solid #ccc}.btn.bouton:hover,a.btn.bouton:hover{color:#1e1e1e;border:1px solid #1e1e1e}.
@media (min-width:768px) {.bouton-perso {padding:0.6rem 1rem;}}
.alert-danger {--bs-alert-bg: rgba(215,215,218,0.8);}
.alert-success {--bs-success-bg: rgba(209,231,221,0.8);}
.w-150 {width:150px;}
/* basic styles */

.cErreur, .cSucess {
	max-width: 40em!important;
	margin:0 auto .5rem auto;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
input, textarea, select, option, button, label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 100%;
}

p {
    max-width: 40em!important;
    margin: 1em auto;
}

fieldset {
    max-width: 40em!important;
    padding: 0!important;
    margin: .5em auto;
    border: 0 none;
}

legend {
	  color:#fff;
    margin: 1em 0;
    font-size: 1.2em;
    width: 100%;
    border-bottom: 1px dotted #99c;
}

input, output, textarea, select, button {
    box-sizing: border-box;
    padding: 0.2em 0.4em;
    margin: 0.2em 0;
    outline: 0 none;
    border: 0 none;
    box-shadow: none;
}

button {
    max-width: 100%;
    padding: 0.2em 2em;
    background-color: #ddd;
    box-shadow: 0 0px 0 #bbb;
    cursor: pointer;
}

label {
    box-sizing: border-box;
    user-select: none;
    cursor: pointer;
}

input:focus + label, textarea:focus + label, select:focus + label {
    color: #fff;
}

input:checked + label {
    font-weight: bold;
}

/* fallback 30%/70% float layout */
input, output, textarea, select, button {
    clear: both;
    float: right;
    width: 70%;
}

label {
    float: left;
    width: 30%;
    text-align: right;
    padding: 0.25em 1em 0 0;
}

button, input[type="checkbox"], input[type="radio"] {
    width: auto;
    float: left;
    margin: 0.5em 0.5em 0 30%;
}

    input[type="checkbox"] + label, input[type="radio"] + label {
        width: auto;
        text-align: left;
    }

/* grid layout */
@supports (display: grid) {

    .formgrid {
    	  padding: .5rem;
        display: grid;
        grid-template-columns: 1fr 1em 2fr;
        grid-gap: 0.3em 0.6em;
        grid-auto-flow: dense;
        align-items: center;
    }

    input, output, textarea, select, button {
        grid-column: 2 / 4;
        width: auto;
        margin: 0;
    }

        input[type="checkbox"], input[type="radio"] {
            grid-column: 1 / 3;
            justify-self: end;
            margin: 0;
        }

            label, input[type="checkbox"] + label, input[type="radio"] + label {
                width: auto;
                padding: 0;
                margin: 0;
            }

        textarea + label {
            align-self: start;
        }
}

.lds-ellipsis {
  /* change color here */
  color: #000000
}
.lds-ellipsis,
.lds-ellipsis div {
  box-sizing: border-box;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33.33333px;
  width: 13.33333px;
  height: 13.33333px;
  border-radius: 50%;
  background: currentColor;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

.cChargement {
  background: linear-gradient(135deg, #000000 0%, #1e1e1e 100%);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  display: none;
  z-index:1000;
  transition: all 0.3s ease;
}
.cChargement.enchargement {
  display: flex;
  justify-content: center;
  align-items: center;
}