html {
  font-family: tahoma;
  background-color: #282828;
  color:#cecece;
  height: 100vh;
  margin: 0px;
  min-height: 720px;
}

.window {
  display: flex;
  flex-direction: column;
  margin: 0px;
  height: 100%;
}

.hidden {
  display: none;
}

.nav-bar {
  background: linear-gradient(-90deg, #030522, #195D84);
  min-height: 60px;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
.icon-aida {
  width: 2.4em;
  height: 2.4em;
}

/* ======= HEADER =======  */
header {
  display: flex;
  margin: 10px auto;
  width: 100%;
  max-width: 600px;
  align-items: center;
  text-align: center;
}

header .retour {
  flex: 1;
  justify-content: center;
  align-items: center;
  align-content: center;
}
header .titre {
  flex: 4;
}
header .aide {
  flex: 1;
  font-size: 1.5em;
}

header #retourAccueil {
  min-height: 40px;
  font-size: 1.5em;
  border-radius: 10px;
  border: none;
  color: #cecece;
  background-color: #004767;
}
header #retourAccueil:hover {
  color: #cecece;
  background-color: #030522;
}

header a {
  color: #cecece;
}
header a:hover {
  color: #004767;
}
/* ======================  */


/* ======= FOOTER =======  */
footer {
  position: sticky;
  margin: 5% auto;
  width: 100%;
  max-width: 600px;
  font-size: 2em;
  color: #cecece;
  display: flex;
  align-items: center;
  text-align: center;
}
footer a{
  color: #cecece;
}
footer a:hover {
  color: #004767;
}
footer .question {
  flex: 1;
}
footer .info {
  flex: 3;
  font-size: 0.4em;
}
footer .info .copyleft {
  display: inline-block;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
/* ======================  */


/* ======= ACCUEIL =======  */
.accueil {
  display: flex;
  flex: 1;
  margin: 20px auto;
  max-width: 600px;
  width: 90%;
  text-align: center;
  justify-content: center;
}

.accueil button {
  height: 20vh;   /* HEIGHT BOUTON SELON VIEWPORT */
  max-height: 120px;
  min-width: 120px;
  max-width: 33%;
  margin: 10px 20px;
  border: none;
  background-color: #004767;
  color: #cecece;
  font-size: 2.3em;
  border-radius: 10px 30px;
}

.accueil button:hover {
  background-color: #030522;
}

#menuAccueil {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
}  
/* ============================  */


/* ======= GOOD TIMES =======  */
.goodTimes {
  flex: 1;
  margin: 0px auto;
  max-width: 600px;
  width: 90%;
  text-align: center;
  word-wrap:break-word;
}

.goodTimes .chronoBouton {
  width: 100%;
  height: 20vh;
  max-height: 120px;
  margin: 1vh auto;
  border: none;
  background-color: #004767;
  color: #cecece;
  font-size: 3em;
  border-radius: 30px;
}
.goodTimes .chronoBouton:hover {
  background-color: #030522;
}
/* ==========================  */


/* ======= AFFIHEUR TEMPS =======  */

/* Chrono */
.affichTemps {
  margin: 1vh auto;
  font-size: 4em;
}

.tempsTotal {
  margin: 2vh auto;
  font-size: 1.2em;
}
.tempsEncours {
  margin: 4vh auto;
  font-size: 3em;
}
/* ==============================  */


/* ======= RÉGLAGES ========  */
#blocReglages {
  font-size: 1.3em;
  padding: 5%;
}
.formSignaux {
  font-size: 0.8em;
  margin-top: 20px;
  margin-bottom: 20px;
}
.formSignal {
  padding-top: 10px;
}
.formSigNom {
  width: 70%;
}
.formSigDuree {
  width: 15%;
  min-width: 50px;
}
/* ==============================  */


/* ======= INTRO / OUTRO ========  */
.intro {
  margin-top: 5vh;
  font-size: 4em;
}
.outro {
  margin-top: 5vh;
  margin-bottom: 5vh;
  font-size: 3em;
}
/* ==============================  */

/* ======= APNÉE =======  */
.goodTimes .apneeContraction {
  height: 30vh;
  max-height: 240px;
}

.goodTimes .desactive {
  background-color: #aaaaaa;
  color: #222222;
}
.goodTimes .desactive:hover {
  background-color: #aaaaaa;
}

.goodTimes .divContractions {
  margin-bottom: 10px;
  padding: 15px 0px;
  border: 3px currentColor;
  border-style: outset none;
  border-radius: 5px;
}
.goodTimes .divContractions .contractionsTitre {
  font-size: 1.5em;
}
/* ==============================  */

/* ======= AFFIHEUR COHÉRENCE CARDIAQUE =======  */
.affichCoherCard {
  margin: 1vh auto;
  padding: 4vh 4vh 4vh 4vh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  font-size: 2em;
  row-gap: 4vh;
  border-radius: 30px;
}
#timerCoherCard {
  grid-column: 1 / 3;
  grid-row: 1;
}
#cycle {
  font-size: 0.9em;
  grid-column: 4 / 6;
  grid-row: 1;
}
#phase {
  grid-row: 2;
  grid-column: 2 / 5;
}
.inspiCoherCard {
  background: linear-gradient(#004767, #882200);
}
.expiCoherCard {
  background: linear-gradient(#882200, #004767);
}
.inspiBouton {
  background-color: #882200;
}
.expiBouton {
  background-color: #004767;
}
/* ============================================  */

/* =========== ENTRAÎNEMENT =============  */
.listeExercices {
  margin: 10px 0px;
}
.listeExercices > div {
  width: 100%;
  padding: 2px 10px;
}
.boutonSignal {
  width: 15%;
  height: 4vh;
  max-height: 30px;
  /* margin: 0.5vh auto; */
  border: none;
  background-color: #004767;
  color: #cecece;
  font-size: 1.5em;
  border-radius: 30px;
}
.boutonSignal:hover {
  background-color: #030522;
}
/* ======================================  */


/* ======= COLLAPSIBLE =======  */
.collapsible {
  background-color: #cecece;
  color: #030522;
}

.contenuCollaps {
  background-color: #cecece;
  color: #030522;
}
/* ===========================  */