/* - - - - - - - - - - - - - - - -- - - - - B O U T O N S - - - - - - - - - - - - - - - - - - - - - *//* séparer en deux classes */.btn {  cursor: pointer;  position: relative;  -webkit-tap-highlight-color: transparent;  -webkit-touch-callout: none;  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;  text-align: center;}.btn-big {  border-radius: 2rem;  padding: 0.5rem 1rem;  font-size: 1.2rem;}.btn:focus {  outline: none !important;}.btn-small {  /* pour les boutons des thèmes */  overflow: hidden;  display: inline-block;  margin: 0.2rem;  white-space: nowrap;  border-radius: 0.8rem;  padding: 0.2rem 0.5rem 0.2rem 0.5rem;  font-size: 1rem;}.btn-secondary {  background-color: var(--c-secondary-40);}.btn-primary {  background-color: var(--c-primary-40);}.btn-nav {  --c-border: transparent;  height: 3rem;  display: grid;  place-items: center;}.circled {  --c-border: var(--c-text);}.btn-nav-icon {  border: 3px solid var(--c-border);  border-radius: 1rem;  padding: 0.1rem;}.btn-refresh-scores {  border-radius: 50%;  width: 2rem;  height: 2rem;}.btn-disabled {  pointer-events: none;  opacity: 30%;  position: relative;}.btn-disabled:after {  content: "🚫";  position: absolute;  transform: translate(0, -1.2rem) scale(1.8);}/* - - - - - - - - - - - - - - - -- - - - - C O M P O S A N T S - - - - - - - - - - - - - - - - - - - - - */.progress-bar-container {  background-color: var(--c-primary-40-desat);  width: 100%; /* de son contenant */  overflow: hidden;  height: 100%; /* de son contenant*/  padding: 0;  margin: 0;  border-radius: 1rem;  display: flex;}.progress-bar {  background-color: var(--c-primary-70-desat);}/* - - - - - - - - - - - - - - - -- - - - - C O N F I G - - - - - - - - - - - - - - - - - - - - - */*,*::before,*::after {  box-sizing: border-box;}:root {  --header-height: 3.5rem;  --max-width: 900px;  --footer-height: 5rem;  --margin: 1rem; /* marge à gauche et à droite de l'écran*/  --hue-success: 125;  --hue-warning: 85;  --hue-danger: 50;  --hue-primary: 215;  --hue-primary-accent: calc(--hue-primary - 15);  --hue-secondary: 130;  --hue-accent: 100;  --c-danger: oklch(70% 70% var(--hue-danger));  --c-warning: oklch(70% 70% var(--hue-warning));  --c-success: oklch(70% 70% var(--hue-success));  --c-success-accent: oklch(90% 70% var(--hue-success));  --c-primary-40: oklch(40% 70% var(--hue-primary));  --c-primary-30: oklch(30% 70% var(--hue-primary));  --c-primary: var(--c-primary-40); /* raccourci */  --c-primary-10-desat: oklch(10% 25% var(--hue-primary));  --c-primary-20-desat: oklch(20% 25% var(--hue-primary));  --c-primary-40-desat: oklch(40% 25% var(--hue-primary));  --c-primary-70-desat: oklch(70% 25% var(--hue-primary));  --c-primary-90-desat: oklch(90% 25% var(--hue-primary));  --c-secondary-10-desat: oklch(10% 25% var(--hue-secondary));  --c-secondary-20-desat: oklch(20% 25% var(--hue-secondary));  --c-secondary-70: oklch(70% 90% var(--hue-secondary));  --c-secondary-60: oklch(60% 90% var(--hue-secondary));  --c-secondary-40: oklch(40% 90% var(--hue-secondary));  --c-secondary: var(--c-secondary-40); /* raccourci */  /* rendre dynamique en fonction de hue-current? non ? */  --c-text: var(--c-primary-90-desat);  /* modifié suivant la navigation */  --hue-current: var(--hue-primary);  /* en fonction de hue current */  --c-bg-body: oklch(20% 25% var(--hue-current));  --c-bg-section: oklch(20% 25% var(--hue-current));  --c-bg-header: oklch(10% 25% var(--hue-current));  --c-accent: oklch(90% 100% var(--hue-accent));  /* pour infoTheme*/  --c-seen: oklch(50% 90% var(--hue-secondary));  --c-successful: oklch(70% 90% var(--hue-secondary));  --c-double-successful: var(--c-text);  /* sera overwrité dans le composant du thème*/  --progress-seen: 86%;  --progress-successful: 60%;  --progress-double-successful: 35%;}/* - - - - - - - - - - - - - - - -- - - - - F O N T S  - - - - - - - - - - - - - - - - - - - - - */@font-face {  font-family: "Nunito";  font-weight: 400;  font-style: normal;  font-display: swap;  src: url("../assets/fonts/Nunito.woff2");}@font-face {  font-family: "Nunito";  font-weight: 900;  font-style: normal;  font-display: swap;  src: url("../assets/fonts/nunito-v16-latin-900.woff2");}/* - - - - - - - - - - - - - - - -- - - - - - HEADINGS & LINKS   - - - - - - - - - - - - - - - - - - - - - */h1,h2,h3,h4 {  margin: 0;  margin-bottom: 1rem;  font-weight: 900;}h3 {  color: var(--c-secondary-60);  margin-bottom: 0.4rem;  margin-top: 1rem;}h1 {  font-size: 2.4rem;}h2 {  font-size: 2rem;}h3 {  font-size: 1.5rem;}h4 {  font-size: 1.2rem;}a,a:active,a:hover,a:after {  color: oklch(70% 20% var(--hue-primary));}.glow {  text-shadow: 0 0 0.5em var(--c-text);}.glow-more {  filter: drop-shadow(0 0 0.2rem var(--c-text));  text-shadow: 0 0 1em var(--c-text);}/* - - - - - - - - - - - - - - - -- - - - - - M A I N   - - - - - - - - - - - - - - - - - - - - - */body {  font-family: Nunito, Futura, Arial;  width: 100%;  margin: 0;  padding: 0;  min-height: 100vh;  color: var(--c-text);  background-color: var(--c-primary-40-desat);  overflow: hidden;}.body-container {  background-color: var(--c-primary-20-desat);  position: relative;  overflow: hidden;  margin: auto;  box-shadow: 0 0 40px var(--c-primary-20-desat);  max-width: var(--max-width);  min-height: 100dvh;}header {  height: var(--header-height);  width: 100%;  background-color: var(--c-bg-header);  font-size: 1.5rem;  padding: 1rem;  display: flex;  align-items: center;  justify-content: space-between;}footer {  width: 100%;  height: var(--footer-height);  background-color: var(--c-bg-header);  border-top: 2px solid var(--c-primary-40-desat);  /*min-height: var(--footer-min-height);*/  font-size: 1rem;  padding: 1rem;  display: flex;}.footer-content {  width: 100%;  display: flex;  gap: 1rem;}main {  overflow: auto;  scrollbar-width: none;  -ms-overflow-style: none;  height: calc(100dvh - var(--header-height) - var(--footer-height));  display: flex;  flex-direction: column;  align-items: center;}section {  padding: var(--margin);  width: 100%;  max-width: var(--max-width);  flex-grow: 1;}nav {  width: 100%;  height: 100%;  display: flex;  align-items: center;  justify-content: space-between;}summary {  cursor: pointer;  margin: 0.6em 0;  font-size: 1.2rem;  font-weight: 900;}.notif {  position: absolute;  top: -0.6rem;  right: -0.7rem;  border-radius: 1rem;  color: var(--c-text);  background-color: var(--c-primary);  padding: 0.1rem 0.3rem;  margin: 0;  font-size: 0.6rem;}@keyframes rotating {  to {    transform: rotate(360deg);  }}.rotating {  animation: rotating 2s linear infinite;}/* - - - - - - - - - STATS THEME- - - - - - -*/.stats-theme {  background-color: var(--c-bg-header);  border-radius: 2rem;  position: relative;  padding: 0.5rem 1.5rem;  width: 100%-2rem;  margin: 0.5rem 0; /* pour le glow*/  font-size: 1rem;  display: flex;  align-items: center;}.stats-theme-counter {  /*  conteneur des compteurs */  width: 5rem;  flex: 0 0 5rem;  height: 5rem;  display: grid;  align-items: center;}.circular-progress {  margin: auto;  grid-column: 1;  grid-row: 1;  width: 5rem;  height: 5rem;  border-radius: 50%;  background-color: var(--c-bg-body);}.svg-icon-nav {  width: 2.6rem;  height: 2.7rem;  fill: var(--c-text);}.svg-icon-secondary {  width: 1.5rem;  height: 1.5rem;  fill: var(--c-secondary-60);  transform: translateY(0.2rem);}.svg-icon {  fill: var(--c-text);}.margin-t-1 {  margin-top: 1rem;}.margin-b-1 {  margin-bottom: 1rem;}/* - - - - - - - - - - - - - - - -- - - - - - - Q U I Z - - - - - - - - - - - - - - - - - - - - - - */.btn-answer {  cursor: pointer;  padding: 0.8rem 0.8rem;  border-radius: 3rem;  color: #eeeeee;  font-size: 1rem;  text-align: center;  width: calc((100% - 2 * var(--margin)) / 3);}.btn-answer:active {  transform: scale(1.15);}.btn-answer-true {  background-color: oklch(50% 50% var(--hue-success));}.btn-answer-undefined {  background-color: oklch(50% 50% var(--hue-warning));}.btn-answer-false {  background-color: oklch(50% 50% var(--hue-danger));}.quiz-statement {  padding-top: 1rem;  overflow: auto;  scrollbar-width: none; /*  autoriser une scrollbar visible ici ?*/}.quiz-answer {  width: 100%;  display: flex;  justify-content: space-between;}/* MODALS*/.modal {  position: fixed;  z-index: 1;  margin: 0;  border: 0;  width: 100vw;  height: 100vh;  background-color: var(--c-primary-10-desat);  color: var(--c-text);  display: grid;  place-items: center;}.btn-feedback {  padding: 0.5rem 1rem;  margin: 0 0.5rem;  border-radius: 2rem;  border: 1px solid white;}.gameover-title {  font-size: 2rem;  font-weight: 900;  color: #eeeeee;  margin: 4rem 0;  padding: 3rem;  border-radius: 2rem;  background-color: oklch(50% 50% var(--hue-danger));  text-align: center;}.gameover-msg {  text-align: center;}select,input {  font-size: 1rem;  font-family: Nunito, Futura, Arial;}select {  background-color: var(--c-primary-20-desat);  color: var(--c-text);  border: 2px dashed var(--c-primary);  margin: 1px;}input[type="text"] {  background-color: var(--c-bg);  border: 2px dashed var(--c-primary);  color: var(--c-text);  margin: 1px;}/*! * Toastify js 1.12.0 * https://github.com/apvarun/toastify-js * @license MIT licensed * * Copyright (C) 2018 Varun A P */.toastify {    padding: 12px 20px;    color: #ffffff;    display: inline-block;    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);    background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);    background: linear-gradient(135deg, #73a5ff, #5477f5);    position: fixed;    opacity: 0;    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);    border-radius: 2px;    cursor: pointer;    text-decoration: none;    max-width: calc(50% - 20px);    z-index: 2147483647;}.toastify.on {    opacity: 1;}.toast-close {    background: transparent;    border: 0;    color: white;    cursor: pointer;    font-family: inherit;    font-size: 1em;    opacity: 0.4;    padding: 0 5px;}.toastify-right {    right: 15px;}.toastify-left {    left: 15px;}.toastify-top {    top: -150px;}.toastify-bottom {    bottom: -150px;}.toastify-rounded {    border-radius: 25px;}.toastify-avatar {    width: 1.5em;    height: 1.5em;    margin: -7px 5px;    border-radius: 2px;}.toastify-center {    margin-left: auto;    margin-right: auto;    left: 0;    right: 0;    max-width: fit-content;    max-width: -moz-fit-content;}@media only screen and (max-width: 360px) {    .toastify-right, .toastify-left {        margin-left: auto;        margin-right: auto;        left: 0;        right: 0;        max-width: fit-content;    }}