/* style.css corrigé pour animation avec aria-hidden */
:root {
  --oc-deep:#0b2a4a;
  --oc-mid:#14406d;
  --oc-ice:#eaf4ff;
  --oc-card:#d4e6ff;
  --oc-card-edge:#c1dbff;
  --oc-white:#ffffff;
}
html, body {
  height: 100%;
  margin: 0;
  background: url("./images/fond.jpg") no-repeat center center fixed;
  background-size: cover; /* couvre tout l'écran */
  color: var(--oc-ice);
  font-family: sans-serif;
  overflow: auto;
  scrollbar-width: none;      /* Firefox */
}
html::-webkit-scrollbar {
  display: none;              /* Chrome, Safari */
}

body {display: flex;flex-direction: column;justify-content: space-between;}
.wrap {display: grid;grid-template-rows: auto 1fr auto;min-height: 100%;}
header{text-align:center;padding:24px 20px 0;}
.pill{background:#11437a;color:var(--oc-ice);padding:8px 14px;border-radius:999px;font-size:14px;margin:0 6px;}
main{display:grid;place-items:center;padding:10px 20px 0;}
.board{
  width:min(100%,980px);
  display:grid;
  gap:16px;
}
.instruction{text-align:center;opacity:.9}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card {
  position: relative;
  height: 120px;
  border-radius: 14px;
  background: linear-gradient(180deg,var(--oc-card),var(--oc-white) 45%,var(--oc-card));
  border: 2px solid var(--oc-card-edge);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  font-weight: 700;
  color: #0b2340;
  font-size: 1.1rem;
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.card[aria-hidden="true"] {
  opacity: 0;
  transform: scale(0.95);
}
.card[aria-hidden="false"] {
  opacity: 1;
  transform: scale(1);
}
.card .points{position:absolute;top:6px;left:8px;font-size:0.75rem;opacity:0.8;}
.card .content{position:relative;z-index:1;display:block;text-align:center;}
.card[aria-hidden="true"]::after{content:"";position:absolute;inset:0;background:rgba(11,35,64,0.92);z-index:0}
.card[aria-hidden="true"] .content{visibility:hidden}
.answer{background:#11437a;border-radius:12px;padding:16px;text-align:center;visibility:hidden;opacity:0;transition:.2s}
.answer.visible{visibility:visible;opacity:1}
.toolbar{display:flex;gap:10px;justify-content:center}
button{background:#11437a;;color:#fff;border:none;padding:10px 16px;border-radius:10px;cursor:pointer}
button:hover{filter:brightness(1.1)}
.meta-tags{display:flex;gap:10px;justify-content:center;margin-bottom:10px;flex-wrap:wrap}
.difficulty{padding:4px 10px;border-radius:8px;font-weight:700;color:#fff;font-size:.9rem}
.difficulty.facile{background:#28a745}
.difficulty.moyen{background:#007bff}
.difficulty.difficile{background:#dc3545}
.difficulty.expert{background:#000}
.question-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: black;
  margin: 0; /* on annule le margin existant */
  padding: 12px 0; /* espace égal en haut et en bas */
  display: flex;
  justify-content: center;
  align-items: center;
}
.random-box{background:rgba(255,255,255,0.15);border:1px solid #c1dbff;border-radius:12px;padding:12px;margin-top:12px;}
.random-box button{display:block;margin:0 auto 10px;}
.filters {display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:0;}
.filters fieldset {border:1px solid #c1dbff;background:rgba(255,255,255,0.05);border-radius:8px;padding:4px 6px;display:inline-flex;flex-direction:column;align-items:flex-start;width:auto;min-width:unset;}
.filters legend {font-size:0.9rem;color:var(--oc-ice);padding:0 4px;text-align:left;}
.filters label {display:block;margin:3px 0;white-space:nowrap;color: #000;}
.jump-container {display:flex;justify-content:center;gap:8px;padding:6px 0;background:rgba(255,255,255,0.05);border-top:1px solid #c1dbff;}
.jump-container input {width:120px;padding:4px 6px;border-radius:6px;border:none;outline:none;}
.jump-container button {padding:4px 10px;border-radius:6px;background:#11437a;color:white;border:none;}
.id-nav-container{display:flex;justify-content:center;align-items:center;gap:12px;margin:4px 0 8px 0;}
.question-id-display{text-align:center;font-size:0.8rem;opacity:0.7;}
.nav-arrow{background:#11437a;color:#fff;border:none;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:0.9rem;}
.nav-arrow:hover{filter:brightness(1.1);}
.total-questions-display{text-align:center;font-size:0.9rem;font-weight:600;color:#000;margin:8px 0 4px 0;}
.reset-container{display:flex;justify-content:center;margin-top:12px;}
.reset-small{background:#11437a;color:#fff;border:none;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:0.8rem;opacity:0.8;}
.reset-small:hover{opacity:1;}
.tournament-progress{text-align:center;font-size:1.5rem;font-weight:700;color:#fff;background:#11437a;padding:12px 20px;border-radius:12px;margin-bottom:12px;}
.timer-container{width:100%;height:12px;background:rgba(255,255,255,0.3);border-radius:6px;overflow:hidden;margin:12px 0;}
.timer-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--oc-mid),var(--oc-deep));border-radius:6px;transition:width 0.1s linear;}
.card.question-mark .content {
  font-size: 3rem;
  font-weight: 900;
  color: inherit; /* garde la même couleur que le texte normal */
  display: flex;
  align-items: center;
  justify-content: center;
}
.alt-overlay {
  position: absolute;
  inset: 0; /* occupe toute la carte */
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 1.5rem;
  color: #0b2340; /* même couleur que tes textes */
  background: rgba(255, 255, 255, 0.75); /* léger fond blanc translucide */
  border-radius: 12px;
  opacity: 70%;
}
.card .content {
  position: relative; /* nécessaire pour placer l'overlay correctement */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* garde le ratio original, pas de crop */
  display: block;
  margin: auto;
}
.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: zoom-out;
}
.image-lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
}



@media (max-width:740px){.cards{grid-template-columns:1fr 1fr}.card{height:100px}}