body { 
    font-family: Arial, sans-serif; 
    margin: 20px; 
    background-color: #f7f7f7; 
}
.quiz-container { 
    max-width: 600px; 
    margin: auto; 
    background: white; 
    padding: 20px; 
    border-radius: 10px; 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
}
.question { 
    font-size: 1.2em; 
    margin-bottom: 10px; 
}
.answers button { 
    display: block; 
    margin: 5px 0; 
    padding: 10px; 
    width: 100%; 
    font-size: 1em; 
    border-radius: 5px; 
    border: none; 
    cursor: pointer; 
}
.answers button:hover { 
    opacity: 0.9; 
}
.feedback { 
    margin-top: 15px; 
    font-weight: bold; 
}
.timer { 
    font-size: 1em; 
    color: #d9534f; 
    margin-bottom: 10px; 
}
.nav-buttons { 
    margin-top: 20px; 
    display: flex; 
    justify-content: space-between; 
}
.nav-buttons button { 
    padding: 10px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    background: #007BFF; 
    color: white; 
}
.nav-buttons button:disabled { 
    background: #ccc; 
    cursor: not-allowed; 
}
.result { 
    text-align: center; 
}
.result h2 { 
    margin-bottom: 20px; 
}
.result button { 
    background: #28a745; 
    color: white; 
    padding: 10px 20px; 
    border: none; 
    border-radius: 5px; 
    font-size: 1em; 
    cursor: pointer; 
}
footer{
    margin-top: 15px;
    font-size: 0.7em;
    font-style: italic;
}
nav {
    background-color: #f0f0f0;
    padding: 10px;
}
nav a {
    margin-right: 15px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}
nav a:hover {
    color: #007BFF;
}

      
h1 {
    text-align: center;
    color: #333;
}
.card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 10px auto;
    padding: 15px;
    max-width: 700px;
    cursor: pointer;
    transition: transform 0.2s;
}
.card:hover {
    transform: translateY(-3px);
}
.question {
    font-weight: bold;
    margin-bottom: 10px;
}
.answer {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background-color: #e6f7ff;
    border-left: 4px solid #1890ff;
    border-radius: 5px;
}

/* Accessibilité : label caché mais lisible par lecteur d'écran */
.visually-hidden {
  position: absolute !important; height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.filters {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  margin: .75rem 0;
}

#searchInput {
  min-width: 280px;
  padding: .4rem .6rem;
  border-radius: .35rem;
  border: 1px solid #cfd6e4;
}
/* ---- Accueil ---- */
.home-container { max-width: 980px; margin: 0 auto; padding: 1rem; }
.logo { max-height: 60px; margin: .25rem 0 .5rem; }
.topnav { display: flex; gap: 1rem; align-items: center; margin: .5rem 0 1rem; flex-wrap: wrap; }
.topnav a { text-decoration: none; color: #0b62d6; padding: .25rem .5rem; border-radius: .25rem; }
.topnav a.active, .topnav a:hover { background: #eef6ff; }

.hero { background: linear-gradient(180deg,#f8fbff,transparent 60%); padding: 1rem; border-radius: .5rem; }
.hero h1 { margin: .25rem 0 .5rem; }
.hero .tagline { font-size: 1.05rem; color: #333; }
.hero .details { color: #555; margin-top: .25rem; }

.cta { display: flex; gap: .75rem; margin-top: .75rem; flex-wrap: wrap; }
.btn { display: inline-block; padding: .6rem 1rem; border-radius: .45rem; text-decoration: none; font-weight: 600; border: 1px solid transparent; }
.btn-primary { background: #0b62d6; color: #fff; }
.btn-primary:hover { background: #084aa7; }
.btn-secondary { background: #fff6e5; color: #9a6500; border-color: #f0d2a1; }
.btn-secondary:hover { background: #ffefd1; }

.about, .tips { margin-top: 1.25rem; }
.about ul { margin-left: 1rem; }
.tips ol { margin-left: 1rem; }

/* Responsive */
@media (max-width: 640px) {
  .home-container { padding: .75rem; }
  .cta { flex-direction: column; align-items: flex-start; }
}


meta, .meta { display: flex; gap: .5rem; align-items: center; margin-bottom: .25rem; }
.badge {
  display: inline-block; padding: .15rem .5rem; border-radius: .35rem; font-size: .8rem; line-height: 1;
  border: 1px solid rgba(0,0,0,.1); background: #f5f5f5; color: #333;
}
.badge-theme { background: #eef6ff; color: #0b62d6; border-color: #b7d2ff; }
.badge-level.level-beginner { background: #e8fff1; color: #0a8a3a; border-color: #b8eacb; }
.badge-level.level-intermediate { background: #fff6e5; color: #9a6500; border-color: #f0d2a1; }
.badge-level.level-advanced { background: #ffecec; color: #b00020; border-color: #f5b8bf; }

.card { cursor: pointer; }
.answer { margin-top: .5rem; }
mark { background: #fff0a6; padding: 0 .1em; border-radius: .2em; }

/* Bouton Retour en haut */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: #0b62d6;            /* bleu ENI */
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  cursor: pointer;

  /* masqué par défaut */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .15s ease;
}

.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover { background: #084aa7; }
.back-to-top:active { transform: translateY(0) scale(.98); }
.back-to-top:focus {
  outline: 2px solid #b7d2ff;
  outline-offset: 3px;
}

/* Réduction de mouvement si l’utilisateur la demande */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

.quiz-setup .setup-row { display:flex; gap:.5rem; align-items:center; margin:.5rem 0; }
.quiz-setup input[type="number"] { width: 110px; }

.quiz-stage .stage-header { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; }
.meta { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

.badge { display:inline-block; padding:.15rem .5rem; border-radius:.35rem; font-size:.8rem; line-height:1;
  border:1px solid rgba(0,0,0,.1); background:#f5f5f5; color:#333; }
.badge-theme { background:#eef6ff; color:#0b62d6; border-color:#b7d2ff; }
.badge-level.level-beginner { background:#e8fff1; color:#0a8a3a; border-color:#b8eacb; }
.badge-level.level-intermediate { background:#fff6e5; color:#9a6500; border-color:#f0d2a1; }
.badge-level.level-advanced { background:#ffecec; color:#b00020; border-color:#f5b8bf; }

.answers { display:grid; gap:.5rem; margin:.75rem 0; }
.answer-option {
  display:flex; gap:.5rem; align-items:flex-start; padding:.5rem .6rem; border:1px solid #e5e8ef; border-radius:.4rem;
  background:#fff; cursor:pointer;
}
.answer-option:hover { background:#f8fbff; }
.answer-option.correct { border-color:#b8eacb; background:#e8fff1; }
.answer-option.wrong { border-color:#f5b8bf; background:#ffecec; }

.actions { display:flex; gap:.5rem; margin-top:.5rem; }
.btn { padding:.5rem .9rem; border-radius:.4rem; border:1px solid #cfd6e4; background:#fff; cursor:pointer; }
.btn-primary { background:#0b62d6; color:#fff; border-color:#0b62d6; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.explanation { margin-top:.5rem; padding:.6rem .75rem; border-left:4px solid #0b62d6; background:#f6faff; }
.muted { color:#666; font-size:.9rem; }

.result-stage .recap-item { padding:.5rem 0; border-bottom:1px dashed #e5e8ef; }
.recap-a.ok { color:#0a8a3a; }
.recap-a.ko { color:#b00020; }