/* ============================================================
   QUIZ MINECRAFT — outil "quiz" (CSS, generique)
   Moteur "choisis X, on devine Y". Contenu via [mcfr_quiz id="..."].
   Theme natif du site : tokens --mc-* (turquoise, surfaces) => suit
   le switch clair/sombre, comme creatures / bestiaire.
   Couleurs forcees via #page-container ... (specificite Divi/Extra).
   ============================================================ */
.mcq{
  --q-surface: var(--mc-surface, #FFFFFF);
  --q-panel:   var(--mc-bone, #F4F1EA);
  --q-edge:    var(--mc-edge, #1E2422);
  --q-ink:     var(--mc-ink, #1E2422);
  --q-ink2:    var(--mc-ink-2, #3A4441);
  --q-acc:     var(--mc-tq, #1AA995);
  --q-acc2:    var(--mc-tq-d, #11796A);
  --q-shadow:  rgba(0,0,0,.18);
  max-width:760px; margin:32px auto; padding:22px;
  background:var(--q-panel); color:var(--q-ink2);
  border:2px solid var(--q-edge); border-radius:4px;
  box-shadow:6px 6px 0 var(--q-shadow);
  font-family:var(--mc-body, "IBM Plex Sans", system-ui, sans-serif);
  line-height:1.5; -webkit-font-smoothing:antialiased; text-align:left;
}
.mcq *{box-sizing:border-box}

.mcq .mcq-title{
  font-family:var(--mc-display, "Space Grotesk", system-ui, sans-serif) !important;
  font-weight:700 !important; font-size:23px !important; line-height:1.25 !important;
  color:var(--q-ink) !important; text-align:center !important; margin:0 0 12px !important;
  border:0 !important; padding:0 !important;
}
.mcq .mcq-intro{
  font-family:var(--mc-body, "IBM Plex Sans", system-ui, sans-serif) !important;
  font-size:16px !important; color:var(--q-ink2) !important; text-align:center !important;
  margin:0 auto 18px !important; max-width:62ch;
}
.mcq .mcq-prompt{
  font-family:var(--mc-display, "Space Grotesk", system-ui, sans-serif) !important;
  font-weight:700 !important; font-size:13px !important; letter-spacing:.04em;
  text-transform:uppercase; color:var(--q-acc2) !important; text-align:center !important; margin:0 0 18px !important;
}

.mcq-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media(max-width:560px){
  .mcq{padding:16px 12px; margin:24px auto}
  .mcq-grid{grid-template-columns:repeat(3,1fr); gap:9px}
  .mcq-result{padding:18px 16px}
}
@media(max-width:380px){.mcq-grid{grid-template-columns:repeat(2,1fr)}}
.mcq-card{
  cursor:pointer; font:inherit; color:var(--q-ink);
  background:var(--q-surface); border:2px solid var(--q-edge); border-radius:3px;
  box-shadow:3px 3px 0 var(--q-shadow); padding:12px 6px 10px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.mcq-card:hover,.mcq-card:focus-visible{transform:translate(-1px,-2px); border-color:var(--q-acc2); box-shadow:5px 5px 0 var(--q-shadow); outline:none}
.mcq-card:active{transform:translate(0,0); box-shadow:2px 2px 0 var(--q-shadow)}
.mcq-av{display:flex; align-items:center; justify-content:center; width:64px; height:64px}
.mcq-av img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;
  image-rendering:pixelated; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)); transition:transform .18s ease}
.mcq-card:hover .mcq-av img,.mcq-card:focus-visible .mcq-av img{transform:scale(1.18) rotate(-5deg)}
.mcq .mcq-name{
  font-family:var(--mc-display, "Space Grotesk", system-ui, sans-serif) !important;
  font-weight:700 !important; font-size:14px !important; line-height:1.1 !important; color:var(--q-ink) !important;
}

.mcq-results{margin:0}
.mcq-result{display:none}
.mcq-result.is-active{display:block; animation:mcq-rev .45s ease}
@keyframes mcq-rev{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
.mcq-result{
  background:var(--q-surface); color:var(--q-ink2);
  border:2px solid var(--q-edge); border-left:4px solid var(--q-acc); border-radius:3px;
  box-shadow:4px 4px 0 var(--q-shadow); padding:22px 26px; margin-top:6px;
}
.mcq-rhead{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; margin-bottom:14px}
.mcq-av-lg{width:88px; height:88px; flex:none; margin:0 auto; animation:mcq-bob 1.8s ease-in-out infinite}
.mcq-av-lg img{filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
@keyframes mcq-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mcq .mcq-kicker{
  font-family:var(--mc-display, "Space Grotesk", system-ui, sans-serif) !important;
  font-size:13px !important; letter-spacing:.04em; text-transform:uppercase; font-weight:700 !important;
  color:var(--q-acc2) !important;
}
.mcq .mcq-result h3{
  font-family:var(--mc-display, "Space Grotesk", system-ui, sans-serif) !important;
  font-weight:700 !important; font-size:20px !important; line-height:1.25 !important;
  color:var(--q-ink) !important; margin:4px 0 0 !important; border:0 !important; padding:0 !important;
}
.mcq .mcq-pull{
  display:inline-block; background:var(--q-acc); color:#fff !important;
  font-family:var(--mc-display, "Space Grotesk", system-ui, sans-serif) !important; font-weight:700 !important;
  padding:6px 12px; border:2px solid var(--q-acc2); border-radius:2px; margin:0 0 12px; font-size:16px !important;
}
.mcq .mcq-result p:not(.mcq-pull){
  font-family:var(--mc-body, "IBM Plex Sans", system-ui, sans-serif) !important;
  font-size:16.5px !important; line-height:1.55 !important; color:var(--q-ink2) !important; margin:0 0 11px !important;
}
.mcq .mcq-result p:last-child{margin-bottom:0 !important}

.mcq-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px}
.mcq-actions[hidden]{display:none}
.mcq-btn{
  cursor:pointer; font-family:var(--mc-display, "Space Grotesk", system-ui, sans-serif) !important;
  font-weight:700 !important; font-size:13px !important; color:#fff !important; background:var(--q-acc);
  border:2px solid var(--q-acc2); border-radius:3px; padding:11px 15px;
  box-shadow:3px 3px 0 var(--q-shadow); transition:transform .1s, box-shadow .1s;
}
.mcq-btn:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--q-shadow)}
.mcq-btn:active{transform:translate(0,0); box-shadow:2px 2px 0 var(--q-shadow)}
/* Le bouton Partager reutilise .mcfr-gbtn du theme (article.css). On force juste
   la fleche a suivre la couleur du texte du bouton (blanche en sombre). */
.mcq-actions .mcq-share svg{fill:currentColor}

.mcq-blk{position:fixed; top:-30px; width:13px; height:13px; z-index:9999; pointer-events:none}
@media (prefers-reduced-motion:reduce){.mcq-result.is-active,.mcq-av-lg{animation:none}}

/* ============================================================
   OVERRIDES FORTS — battre la specificite du theme Divi/Extra
   (#page-container ...) sur les couleurs de titres/paragraphes.
   ============================================================ */
#page-container .mcq .mcq-title{color:var(--q-ink) !important}
#page-container .mcq .mcq-intro{color:var(--q-ink2) !important}
#page-container .mcq .mcq-prompt{color:var(--q-acc2) !important}
#page-container .mcq .mcq-name{color:var(--q-ink) !important}
#page-container .mcq .mcq-kicker{color:var(--q-acc2) !important}
#page-container .mcq .mcq-result h3{color:var(--q-ink) !important}
#page-container .mcq .mcq-pull{color:#fff !important}
#page-container .mcq .mcq-result p:not(.mcq-pull){color:var(--q-ink2) !important}
#page-container .mcq-actions .mcq-share svg{fill:currentColor !important}

/* Le theme force .mcq-card (un <button>) en display:block et impose un fond
   blanc aux <article> de .entry-content : on re-force la structure + les fonds. */
#page-container .mcq{background:var(--q-panel) !important}
#page-container .mcq .mcq-card{display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; background:var(--q-surface) !important}
#page-container .mcq .mcq-result{background:var(--q-surface) !important}