/* Fonte commune */

html {
  font-family: 'Source Code Pro';
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body {
  width: 95vw;
  max-width: 600px;
}

.reveal {
  position: relative;
  display: block;
}

table.reveal {
  display: table;
}

/* Pas de saut de colonne après un titre */
h1, h2, h3, h4, h5, h6 {
  page-break-after: avoid;
}

.reveal::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: grey;
  opacity: 1;
  transition: opacity 1s linear;
  cursor: pointer;
}

.reveal.clicked::after {
  opacity: 0;
  pointer-events: none;
}

.reveal:not(.clicked)::after {
  transition: none;
}

p {
  line-height:2;
}

/* Une marge basse dans les listes notamment pour les formules */
li {
  margin-bottom: 1em;
}

/* Balises détails et summary */
details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 1em;
  padding: 0.5em 1em;
  margin: 1em 0em;
}

summary {
  color: #31708F;
}

/* Pour la balise avec l'identifiant svgContainer mettre au moment du fullscreen un background blanc */
#svgContainer svg.fullscreen {
  background-color: white;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#svgContainer.fullscreen {
  /*Lorsque la div est en plein écran elle doit s'adapter à la largeur et la hauteur pour prendr le plus d'espace possible*/
  width: 100vw;
  height: 100vh;
}

/* Les div de classe quiz ont un fond blanc lorsqu'ils sont en plein écran */

div.quiz.fullscreen {
  background-color: white;
  /* font-size: 36px; */
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bandeau */
.sidebar {
  height: 100%;
  width: 250px;
  position: fixed;
  top: 0;
  left: -250px;
  background-color: #333;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 20px;
  z-index:1000;
}

.sidebar .closebtn {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.sidebar .navbar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar .navbar ul li {
  padding: 8px;
  text-align: left;
}

.sidebar .navbar ul li a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 10px 15px;
}

.sidebar .navbar ul li a:hover {
  background-color: #575757;
}

.dropdown-content {
  display: none;
  background-color: #414141;
  padding-left: 20px;
}

.dropdown-content a {
  padding: 8px 0;
  text-decoration: none;
  color: white;
  display: block;
}

.dropdown-content a:hover {
  background-color: #575757;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropbtn {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.dropbtn i {
  margin-right: 10px;
}

#openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #333;
  color: white;
  border: none;
  padding: 10px 15px;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar .navbar ul li a {font-size: 18px;}
}
/* Fin bandeau */

/*La fonte Katex*/
.katex {
  font-size: 1.2em;
}
/* Empêcher le retour à la ligne des formules */
.katex {
  white-space: nowrap;
}

/* Mettre la fonte katex en gras dans une balise important ou dans un titre h1, h2, h3*/
.important .katex, h1 .katex, h2 .katex, h3 .katex, strong .katex, b .katex, th .katex {
  font-weight: bold;
}

/* Tableau de valeurs */
.tableauvaleurs {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid black;
  margin: 1em 0em;
  table-layout: fixed;
}
.tableauvaleurs tr td, .tableauvaleurs th {
  border: 1px solid black;
}
.tableauvaleurs th {
  font-weight: bold;
}

/* Tableau de variations */
.tableauvariations,.tableauvariations1,.tableauvariations2 {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid black;
  margin: 1em 0em;
  table-layout: fixed;
}
.tableauvariations tr:nth-child(1),.tableauvariations1 tr:nth-child(1), .tableauvariations2 tr:nth-child(1) {
  border-bottom: 1px solid black;
}
.tableauvariations td:nth-child(1),.tableauvariations1 td:nth-child(1), .tableauvariations2 td:nth-child(1){
  border-right: 1px solid black;
}
.tableauvariations1 tr:nth-child(2),.tableauvariations2 tr:nth-child(2) {
  border-bottom: 1px solid black;
}
.tableauvariations1 tr:nth-child(n+2) td:nth-child(4),.tableauvariations2 tr:nth-child(n+2) td:nth-child(4), .tableauvariations2 tr:nth-child(n+2) td:nth-child(6) {
  position: relative;
}
.tableauvariations1 tr:nth-child(n+2) td:nth-child(4)::before,.tableauvariations2 tr:nth-child(n+2) td:nth-child(4)::before, .tableauvariations2 tr:nth-child(n+2) td:nth-child(6)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px solid #000000;
}

/*************************************/
/* Tableaux de signes 2 valeurs      */
/*************************************/
.tableausigne{
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid black;
  margin: 1em 0em;
}

/* Aligner à gauche le contenu de la deuxième colonne première ligne */
.tableausigne tr:nth-child(1) td:nth-child(2) {
    text-align: left;
}

/* Aligner à droite le contenu de la dernière colonne première ligne */
.tableausigne tr:nth-child(1) td:last-child {
    text-align: right;
}

.tableausigne tr:nth-child(n+2) td:nth-child(4), 
.tableausigne tr:nth-child(n+2) td:nth-child(6) {
    position: relative;
}

.tableausigne tr:nth-child(n+2) td:nth-child(4)::before, 
.tableausigne tr:nth-child(n+2) td:nth-child(6)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 1px solid #000000;
}

.tableausigne td:nth-child(1) {
  border-right: 1px solid black;
}

.tableausigne tr:nth-child(n) {
  border-bottom: 1px solid black;
}

/* LA dernière ligne avec son border-top black */
.tableausigne tr:last-child {
  border-top: 1px solid black;
}

.double1 tr:nth-child(n+2) td:nth-child(4)::before {
  /* Bordure double pour les valeurs interdites */
  border-left: 3px double #000000;
}

.double2 tr:nth-child(n+2) td:nth-child(6)::before {
  /* Bordure double pour les valeurs interdites */
  border-left: 3px double #000000;
}

.double3 tr:nth-child(n+2) td:nth-child(8)::before {
  /* Bordure double pour les valeurs interdites */
  border-left: 3px double #000000;
}

/*************************************/
/* Tableaux de signes 3 valeurs */
/*************************************/
.tableausigne3{
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid black;
  margin: 1em 0em;
}

/* Aligner à gauche le contenu de la deuxième colonne */
.tableausigne3 tr td:nth-child(2) {
    text-align: left;
}

/* Aligner à droite le contenu de la dernière colonne */
.tableausigne3 tr td:last-child {
    text-align: right;
}

.tableausigne3 tr:nth-child(n+2) td:nth-child(4), 
.tableausigne3 tr:nth-child(n+2) td:nth-child(6),
.tableausigne3 tr:nth-child(n+2) td:nth-child(8) {
    position: relative;
}

.tableausigne3 tr:nth-child(n+2) td:nth-child(4)::before, 
.tableausigne3 tr:nth-child(n+2) td:nth-child(6)::before,
.tableausigne3 tr:nth-child(n+2) td:nth-child(8)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 1px solid #000000;
}

.tableausigne3 td:nth-child(1) {
  border-right: 1px solid black;
}
.tableausigne3 tr:nth-child(1) {
  border-bottom: 1px solid black;
}

/* LA dernière ligne avec son border-top black */
.tableausigne3 tr:last-child {
  border-top: 1px solid black;
}

/*************************************/
/* Tableaux de signes 1 seule valeur */
/*************************************/
.tableausigne1 {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid black;
  margin: 1em 0em;
}

/* Aligner à gauche le contenu de la deuxième colonne */
.tableausigne1 tr td:nth-child(2) {
    text-align: left;
}

/* Aligner à droite le contenu de la dernière colonne */
.tableausigne1 tr td:last-child {
    text-align: right;
}

.tableausigne1 tr:nth-child(n+2) td:nth-child(4), 
.tableausigne1 tr:nth-child(n+2) td:nth-child(6) {
    position: relative;
}

.tableausigne1 tr:nth-child(n+2) td:nth-child(4)::before, 
.tableausigne1 tr:nth-child(n+2) td:nth-child(6)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 1px solid #000000;
}

.tableausigne1 td:nth-child(1) {
  border-right: 1px solid black;
}
.tableausigne1 tr:nth-child(1) {
  border-bottom: 1px solid black;
}

.tableausigne1 tr:nth-child(n+2) td:nth-child(6)::before {
  border-left: 0px;
}

footer {
  display: none;
}

header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #aaa;
  font-size: 1.5em;
  font-weight: bold;
  background-color: #f0f0f0;
}

header.brouillon {
  color:red;
  background-color: white;
}
.header-niveau {
  font-size: 0.5rem;
}
.page-break {
  page-break-after: always;
}

ol.alphabetical-list, ol.numerical-list {
  counter-reset: list-counter var(--start, 0);
  list-style: none;
  padding: 0;
}

ol.alphabetical-list > li, ol.numerical-list > li{
  counter-increment: list-counter;
}

ol.alphabetical-list > li::before {
  content: counter(list-counter, lower-alpha) ".";
  margin-right: 5px; /* Espace après le numéro */
  font-weight: bold;
}

ol.numerical-list > li::before {
  content: counter(list-counter) ".";
  margin-right: 5px; /* Espace après le numéro */
  font-weight: bold;
}

ol.horizontal-list, ul.horizontal-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante si nécessaire */
  
  /*Ajout récent*/
  align-items: center; /* Centrer verticalement les éléments */
  justify-content: space-around; /* Centrer horizontalement les éléments */
}

/* ol.horizontal-list li, ul.horizontal-list li {
  flex: 1;
  padding: 0 5px;
  box-sizing: border-box;
}*/

/* Classe pour deux colonnes */
.horizontal-list.col-2c li {
  flex: 0 0 calc(50% - 10px) !important; /* Fixe la largeur à environ 50% pour deux colonnes */
}

/* Classe pour trois colonnes */
.horizontal-list.col-3c li {
  flex: 0 0 calc(33.333% - 10px) !important; /* Fixe la largeur à environ 33% pour trois colonnes */
}

/* Classe pour quatre colonnes */
.horizontal-list.col-4c li {
  flex: 0 0 calc(25% - 10px) !important; /* Fixe la largeur à environ 25% pour quatre colonnes */
}

/* Classe pour les boutons du bandeau */
.boutonsBandeau {
  display: inline-block;
  appearance: auto;
}

.boutonActive {
  background-color: #079b34a8;
}

.reponse {
  border: 1px solid #000000; /* Bordure noire */
  background-color: #f0f0f0; /* Fond gris clair */
  padding: 10px; /* Espace intérieur pour ne pas que le texte touche la bordure */
  margin: 10px 0; /* Marge extérieure pour séparer ce div des autres éléments */
}
.encart {
  border: 1px solid #000000; /* Bordure noire */
  background-color: #f0f0f0; /* Fond gris clair */
  padding: 10px; /* Espace intérieur pour ne pas que le texte touche la bordure */
  margin: 10px 0; /* Marge extérieure pour séparer ce div des autres éléments */
  break-inside: avoid; /* Empêcher le saut de colonne à l'intérieur de cet élément */
}

.quizsenligne {
  border: 1px solid #000000; /* Bordure noire */
  background-color: #f0f0f0; /* Fond gris clair */
  padding: 10px; /* Espace intérieur pour ne pas que le texte touche la bordure */
  margin: 10px 0; /* Marge extérieure pour séparer ce div des autres éléments */
  break-inside: avoid; /* Empêcher le saut de colonne à l'intérieur de cet élément */
}

/* Flashcards */
.flashcard {
  width: 280px;
  height: 400px;
  border: 1px solid #000;
  perspective: 1000px;
}

.card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  display: flex;
}

.card.is-flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  /* Centrer verticalement */
  justify-content: center;
  font-size: 12px;
}

.card-face.front {
  background: lightblue;
  text-align: center;
}

.card-face.back {
  background: lightcoral;
  transform: rotateY(180deg);
  text-align: center;
}

ul.flashcard-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style: none;
  padding: 0;
}

ul.flashcard-list li {
  flex: 0 0 calc(50% - 10px) !important; /* Fixe la largeur à environ 50% pour deux colonnes */
  margin: 10px 0;
  padding: 0 5px;
  box-sizing: border-box;
}

.flashcard .bouton-quadrillage {
  display:none !important ;
}

.flashcard .bouton-pleinecran {
  display:none !important ;
}

.tableaucroise {
  text-align: center;
  border-collapse: collapse;
  border: 1px solid black;
  margin: auto;
  table-layout: fixed;
  /* Empêcher le tableau d'être scindé sur plusieurs pages */
  page-break-inside: avoid;
}

.tableaucroise tr td, .tableaucroise th {
  border: 1px solid black;
}

.tableaucroise tr:first-child, .tableaucroise tr td:first-child {
  font-weight: bold;
}

code.python {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
  margin: 0;
  padding: 0.5em;
  overflow-x: visible;
  break-inside:avoid;
}
/* La première colonne est grise */
table.editeur td:first-child {
  background-color: lightgray;
}

.tableauAlgo {
  text-align: center;
  border-collapse: collapse;
  width: 100%;
}
.tableauAlgo td {
  border: 1px solid black;
  padding: 5px;
}

/*************************************/
/* Tableur                           */
/*************************************/
/* Style pour le tableau type feuille de calcul */
.tableur {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.tableur td, .tableur th {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

.tableur th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.tableur tr:hover {
  background-color: #e0e0e0;
}

.tableur .header-col {
  background-color: #f2f2f2;
  font-weight: bold;
  text-align: center;
}

.tableur .header-row {
  background-color: #f2f2f2;
  font-weight: bold;
}

.tableur .header-row th {
  text-align: center;
  background-color: #f2f2f2;
  font-weight: bold;
}

#console {
  position : fixed;
  bottom : 0;
  width : 100%;
  max-height : 200px;
  overflow-y : auto;
  background-color : black;
  color : white;
  font-family : monospace;  
  font-size : 12px;
}

.video iframe {
  max-width: 500px;
  max-height: 285px;
}
.video {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 0 auto;
}

.geogebra iframe {
  width: 100%;
}
.geogebra {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 0 auto;
}
.equation {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 0 auto;
}
#nbQuestions {
  padding: 0.1em 0.5em;
}