/**
* Template Name: RdvBati - v1.0
* Template URL: https://aquicod.fr/rdvbati.html/
* Author: aquicod.fr
* License: https://aquicod.fr/license/
*/
@font-face {
  font-family: "Glacial Regular";
  src: url(../fonts/GlacialIndifference-Regular.otf) format("OpenType");
}

@font-face {
  font-family: "Glacial Italic";
  src: url(../fonts/GlacialIndifference-Italic.otf) format("OpenType");
}

@font-face {
  font-family: "Glacial Bold";
  src: url(../fonts/GlacialIndifference-Bold.otf) format("OpenType");
}

:root {

  /*global color*/
  --color-jaune: #FED420;
  --color-jaune-clair: #FFFB9F;
  --color-jaune-hover: rgb(255, 213, 43);
  --color-noir: #000;
  --color-blanc: #fff;
  --color-jaune-selected-calendar: rgb(255, 155, 0);
  ;
  --color-gris: #B3B4B4;
  --color-gris-bordure: #d8d8d8;
  --color-gris-clair: #F6F6F6;
  --color-gris-fonce: #231F20;
  --color-gris-soutenu: #343431;
  --color-gris-soutenu-fonce: #696964;
  --color-gris-not-selected: rgb(176, 176, 176);
  --color-vert: rgb(10, 147, 70);
  --color-exergue-jaune: var(--color-jaune);
  --color-obligatoire: rgb(255, 0, 0);
  --color-rge: #640869;

  /*Voici les numéros des couleurs que nous avons choisis pour notre charte graphique : 19 octobre 
    Jaune :       #FED420
    Jaune clair : #FFFB9F
    Noir :        #000000
    Gris foncé :  #231F20
    Gris soutenu :#343431
    Gris :        #B3B4B4
    Gris clair :  #F6F6F6 */

  /*menu*/
  --color-linear-stop-0--menu: #171717ff;
  --color-linear-stop-1--menu: #e3e3e3f0;
  --color-linear-stop-2--menu: #2c2c2cbd;
  --color-linear-stop-3--menu: #42424200;

  /*banniere*/
  --color-linear-stop-1--banniere: #0c0c0cff;
  --color-linear-stop-2--banniere: #171717ff;
  --color-linear-stop-3--banniere: #666666ff;

  /*Font*/
  --font-primaire: 'Glacial Regular';
  --font-secondaire: 'Glacial Bold';

  /*Hero*/
  --background-color-translucide: rgba(224, 224, 224, 0.07);
  --background-color-translucide: rgba(224, 224, 224, 0.18);
  --inscription-background-color-section: #f7f7f7;

  /*footer*/
  --copyright-button-background-color: var(--color-jaune);
  --copyright-button-background-color-hover: rgb(201, 156, 35);
  --copyright-background-color: #d3d3d34f;

  /*taille header */
  --hauteur-menu: 70px;
  --hauteur-footer: 300px;
  --largeur-side-bar: 240px;

  /*devis*/
  --devis-depose: #fac73c;
  --devis-accepte: #b3cfb3;
  --devis-refuse: #f9c0c0;
  --devis-pas-depose: #bebfbf;

  --devis-fond-depose: #ffffff;
  --devis-fond-accepte: #ecf3ec;
  --devis-fond-refuse: #fff3f3;
  --devis-fond-pas-depose: #ffffff;

  --devis-client-accepter: var(--color-vert);
  --devis-client-refuser: var(--color-obligatoire);
  --devis-client-en-attente: rgb(175, 175, 175);

  --factures-client-accepter: var(--color-vert);
  --factures-client-refuser: var(--color-obligatoire);
  --factures-client-en-attente: var(--color-gris);

  /* organisation */
  --btn-pas-disponible: var(--color-gris-bordure);
  --background-btn-disponible: #ddd;
  --btn-jaune: #fed420;
  --color-devis: rgb(237, 223, 146);
  --color-gris: rgb(225, 225, 225);
  --color-vert: #009a05;

  --color-intervention: rgb(243, 243, 243);
  --color-background-desactivate: rgb(235, 235, 235);
  ;
  --color-text-desactivate: rgb(208, 208, 208);
  ;

}

/*======================================================================================
*                                      GLOBAL
========================================================================================*/

/*j'utilise une astuce afin de pousser le footer
    au bas de l'écran, si le conenu de la page est
    inférieur à 100vh*/
html, body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-blanc);
  font-family: var(--font-primaire);
  line-height: 1.2;
  font-family: 'Glacial Regular';
  font-size: 1rem;
}

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
  padding-left: 0;
}

/*balises utilisées dans le projet*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
ul,
li,
a,
nav,
section,
svg,
header {
  margin: 0;
  padding: 0;
}

input:focus {
  outline: none;
}

*:focus {
  outline: none;
}

a,
a:hover {
  text-decoration: none;
}

.btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}

li.active {
  background-color: var(--color-jaune);
}

.container aside section nav ul li.active a {
  color: #000;
}

.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.spinner:before,
.spinner:after {
  position: absolute;
  content: "";
}

.spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: #095cfa;
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}

.spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: #095cfa;
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*404*/
.main-404 {
  height: calc(100vh - 270px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-content-404 {
  text-align: center;
  padding: 8px;
}

.page-content-404 h1 {
  font-family: 'Glacial Bold';
  margin: 0;
  font-size: 1.6rem;

  color: var(--color-noir);
  margin-bottom: 50px;
}

.page-content-404 a {
  background-color: var(--color-jaune);
  text-decoration: none;
  color: var(--color-noir);
  border-radius: 8px;
  padding: 8px 15px;
  font-size: 1.2rem;
}

aside div section nav ul li {
  position: relative;
}

.badge-notification {
  position: absolute;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: var(--color-obligatoire);
  border-radius: 50px;
  color: var(--color-blanc);
  text-align: center;
  margin-left: 8px;
  padding: 2px;
  top: 3px;
}

@media screen and (min-width: 768px) {
  .main-404 {
    height: calc(100vh - 270px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .page-content-404 {}

  .page-content-404 h1 {
    font-family: 'Glacial Bold';
    margin: 0;
    font-size: 2.5rem;
    color: var(--color-noir);
    margin-bottom: 50px;
  }

  .page-content-404 a {
    background-color: var(--color-jaune);
    text-decoration: none;
    color: var(--color-noir);
    border-radius: 8px;
    padding: 12px 35px;
    font-size: 1.2rem;
  }
}

.main.maintenance {
  min-width: 100%;
  min-height: calc(100%);
}

.main.maintenance h1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Glacial Bold';
  font-size: 1.4rem;
  padding-top: 180px;
}

.main.maintenance p {
  width: 100%;
  text-align: center;
  font-family: 'Glacial Regular';
  font-size: 1.4rem;
}

@media screen and (min-width: 600px) {
  .main.maintenance h1 {
    font-size: 2.4rem;
    padding-top: 10%;
  }

  .main.maintenance p {
    font-size: 1.8rem;
  }
}