body {
	  font-family: 'Segoe UI', sans-serif;
	  background: #4A5158; /* au lieu de #6d6d6d */
	  color: #333;
	  padding: 0;
	  height: 100%;
	}
	h1 {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 0 1rem;
	  margin: 0 auto 0.5rem auto;
	  text-shadow:
		-1px -1px 0 #000,
		 1px -1px 0 #000,
		-1px  1px 0 #000,
		 1px  1px 0 #000;
	}

	h1 span {
	  flex-grow: 1;
	  text-align: center;
	  font-size: 2.2rem;
	  color: #fff;
	  white-space: nowrap;
	}

    h2 {
      color: #d0d0d0;
	  margin-top: 0;
    }
    .question {
      background-color: #fff;
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 1.5em 0.75em;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      margin-bottom: 0.25rem;
	  text-align: left;
    }
	.question h2,
	.question p,
	.question label {
	  text-align: left;
	}
    .question.success {
      /*border-color: #a0d6a0;
      background-color: #f6fff6;*/
	  background-color: #e3f5e3;      /* plus visible que #f6fff6 */
	  border-color: #81c784;
    }
    .question.error {
      /*border-color: #e08080;
      background-color: #fff6f6;*/
	  background-color: #fde6e6;      /* plus marquant que #fff6f6 */
	  border-color: #e57373;
    }
    .answers label {
      display: block;
      margin-bottom: 0.75rem;
      padding: 0.4rem 0.8rem;
      background: #f5f7fa;
      border-radius: 6px;
      transition: background 0.2s;
    }
    .answers label:hover {
      background: #e6ecf3;
    }
    .explanation {
      background-color: #e8f0ff;
      padding: 1em;
      margin-top: 1.5rem;
      border-radius: 6px;
      display: none;
    }
	@media (max-width: 768px) {
	  .explanation {
		padding-left: 0.25rem; /* 🔥 rétréci encore plus */
		padding-right: 0.25rem;
		margin-left: 0;
		margin-right: 0;
		margin-top: 0.75rem;
	  }
	}
	.button-group {
	  margin-top: 1.5rem;
	  text-align: center;
	}
	.button-group button {
	  margin: 0 0.5rem; /* 🔥 Petit espace horizontal entre boutons */
	}
    button.standard {
      padding: 0.6rem 1.2rem;
      font-size: 1rem;
	  border: 1px solid #1a1a1a;
      border-radius: 8px;
      background: #3a3a3a;
      color: white;
      cursor: pointer;
      margin-right: 0.5rem;
      transition: background 0.2s ease, border 0.2s ease;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    }
    button.standard:hover {
	   background: #1f1f1f; /*#383838;*/
    }
    button.standard:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    .feedback {
      font-weight: bold;
      margin-bottom: 1rem;
    }
    .feedback.success {
      color: #2e7d32; 
    }
    .feedback.error {
      color: #c62828;
    }
    input[type="file"] {
      margin-bottom: 1rem;
    }
    label {
      font-weight: 500;
    }
	button.stop-session {
	  border: 1px solid #1a1a1a;
	  background: #f28b82;
	  color: white;
	  padding: 0.6rem 1.2rem;
	  font-size: 1rem;
	  border-radius: 8px;
	  cursor: pointer;
	  transition: background 0.2s ease;
	}

	button.stop-session:hover {
	  background: #e57373;
	}

	button.stop-session:active {
	  background: #d32f2f;
	}
	html, body {
	  height: 100%;
	  margin: 0;
	  padding: 0;
	}
	#app {
	  width: 100%;
	  max-width: 600px;
	  border: 1px solid #1a1a1a;
	  border-radius: 12px;
	  box-sizing: border-box; 
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	  padding: 0.5rem 0.5rem;
	}
	@media (min-width: 768px) {
	  #app {
		max-width: 80%;
	  }
	}
	.container {
	  min-height: 100vh;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  padding: 0.25rem;
	  text-align: center;
	  box-sizing: border-box;
	}
	table {
	  width: 100%;
	  border-collapse: separate;
	  border-spacing: 0;
	  margin-top: 0rem;
	  font-size: 1rem;
	  background-color: #ffffff;
	  border-radius: 8px;      /* ✅ léger arrondi */
	  overflow: hidden;        /* ✅ garde les coins ronds visibles */
	}
	@media (min-width: 768px) {
	  table {
		width: 50%;
		margin: 0 auto;
	  }
	}
	th, td {
	  padding: 0.75rem 1rem;
	  text-align: left;
	  color: #222;
	  border-bottom: 1px solid #ccc;
	}
	thead tr {
	  background-color: #f0f0f0;
	}
	.question-header {
	  display: flex;
	  justify-content: flex-end;
	  margin-top: -0.5rem;
	}
	pre {
	  position: relative;
	  overflow-x: auto;
	  white-space: pre;
	  -webkit-overflow-scrolling: touch;

	  padding: 1rem;
	  margin: 1rem 0;
	  font-family: 'Courier New', monospace;
	  font-size: 0.95rem;
	  line-height: 1.4;
	  border-radius: 8px;

	  background-color: #1e1e1e;
	  color: #f8f8f2;

	  /* Fade à droite pour suggérer un scroll */
	  mask-image: linear-gradient(to right, black 95%, transparent);
	}
	@media (min-width: 769px) {
	  pre {
		mask-image: linear-gradient(to right, black 98%, transparent); /* fondu très léger */
	  }
	}
	.login-form {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 0.75rem;
	  max-width: 300px;
	  width: 100%;
	  margin: auto;
	  padding: 2rem 1rem;
	}
	.login-form img {
	  width: 140px;
	  height: 140px;
	  margin-top: 1.5rem;
	}
	.login-form h2 {
	  color: white;
	  margin-bottom: 0.5rem;
	}
	.login-form p {
	  color: #ffcdd2;
	  margin: 0;
	}
	.login-form input[type="password"] {
	  padding: 0.6rem 1rem;
	  border-radius: 8px;
	  border: 1px solid #1a1a1a;
	  width: 100%;
	  font-size: 1rem;
	  background: white;
	  box-sizing: border-box;
	}