/* Le petit quiz au bas des fiches (partials/simple_event_quiz), à l'allure de Quiz infernal : ses couleurs (thème « infernal »,
   variables --qi-*), ses polices Bungee et Atkinson Hyperlegible (servies d'ici, voir fonts/LICENSES.md), sa carte de question
   (qi-app.css de quizinfernal.com). Couleurs de la marque en dur, d'où ce fichier à part, comme pub-quiz.css. */
@font-face { font-family: "QI Bungee"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/quizinfernal/bungee-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "QI Bungee"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/quizinfernal/bungee-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "QI Atkinson"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/quizinfernal/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "QI Atkinson"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/quizinfernal/atkinson-hyperlegible-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "QI Atkinson"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/quizinfernal/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "QI Atkinson"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/quizinfernal/atkinson-hyperlegible-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.squiz {
  --qi-bg: #110428; --qi-surface: #1c0a45; --qi-surface-2: #27115c; --qi-line: #3a2277; --qi-ink: #fff8e8; --qi-muted: #beb3dc;
  --qi-fire: #ff4343; --qi-ember: #fdd018; --qi-good: #2bd47d; --qi-bad: #ff4d5e;
  --qi-display: "QI Bungee", "QI Atkinson", system-ui, sans-serif; --qi-body: "QI Atkinson", system-ui, sans-serif;
  margin: 3rem 0 1rem; padding: clamp(1rem, 4vw, 2rem); border-radius: 24px; color: var(--qi-ink); font: 400 1.0625rem/1.6 var(--qi-body);
  background: var(--qi-bg);
  background-image: radial-gradient(900px 420px at 50% -160px, rgba(49, 3, 138, .85), transparent 70%), radial-gradient(500px 300px at 105% 5%, rgba(8, 125, 255, .16), transparent 60%), radial-gradient(420px 300px at -5% 40%, rgba(255, 67, 67, .14), transparent 60%);
}
.squiz[hidden], .squiz [hidden] { display: none; }
.squiz-tete { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.squiz-tete img { flex: none; width: 56px; height: 56px; }
.squiz-tete h2 { margin: 0; font: 400 clamp(1.25rem, 3.4vw, 1.75rem)/1.15 var(--qi-display); color: var(--qi-ink); }
.squiz-tete p { margin: .25rem 0 0; color: var(--qi-muted); font-size: .95rem; }

.squiz-carte {
  position: relative; padding: clamp(1.1rem, 4vw, 2.2rem); border-radius: 24px; border: 1.5px solid var(--qi-line);
  background: radial-gradient(120% 90% at 50% 0%, var(--qi-surface-2), var(--qi-surface)); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.squiz-carte.is-right { border-color: var(--qi-good); }
.squiz-carte.is-wrong { border-color: var(--qi-bad); animation: squiz-secousse .35s; }
@keyframes squiz-secousse { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .squiz-carte.is-wrong { animation: none; } }
.squiz-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; font-size: .9rem; }
.squiz-cat { color: var(--qi-muted); font-weight: 700; }
.squiz-compte { color: var(--qi-ember); font: 400 .85rem/1 var(--qi-display); }
.squiz-niveau { display: inline-block; padding: .2em .65em; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .03em; background: rgba(255, 140, 50, .18); color: #ffb37a; }
.squiz-barre { height: 6px; margin: .7rem 0 1.2rem; border-radius: 3px; background: var(--qi-surface-2); overflow: hidden; }
.squiz-barre span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--qi-fire), var(--qi-ember)); transition: width .4s; }
.squiz-question { margin: 0 0 1.5rem; font: 700 clamp(1.25rem, 3.2vw, 1.75rem)/1.3 var(--qi-body); text-wrap: balance; outline: none; }
.squiz-choix { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 40rem) { .squiz-choix { grid-template-columns: 1fr; } }
.squiz-reponse {
  display: flex; align-items: center; gap: .8rem; min-height: 64px; padding: .8rem 1rem; text-align: left;
  border-radius: 14px; border: 2px solid var(--qi-line); background: rgba(255, 243, 228, .04); color: var(--qi-ink);
  font: 600 1.05rem/1.3 var(--qi-body); cursor: pointer; transition: border-color .12s, background .12s, transform .12s;
}
.squiz-reponse:hover:not(:disabled) { border-color: var(--qi-ember); background: rgba(255, 176, 58, .08); transform: translateY(-1px); }
.squiz-reponse:disabled { cursor: default; }
.squiz-reponse:focus-visible, .squiz-btn:focus-visible, .squiz-encore:focus-visible { outline: 3px solid var(--qi-ember); outline-offset: 3px; }
.squiz-cle { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--qi-surface-2); font: 400 .95rem/1 var(--qi-display); color: var(--qi-ember); }
.squiz-reponse.is-ok { border-color: var(--qi-good); background: rgba(43, 212, 125, .14); }
.squiz-reponse.is-ok .squiz-cle { background: var(--qi-good); color: #062; }
.squiz-reponse.is-ko { border-color: var(--qi-bad); background: rgba(255, 77, 94, .14); }
.squiz-reponse.is-ko .squiz-cle { background: var(--qi-bad); color: #fff; }
.squiz-retour { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px dashed var(--qi-line); }
.squiz-verdict { display: block; margin-bottom: .3rem; font: 400 1.5rem/1.2 var(--qi-display); }
.is-right .squiz-verdict { color: var(--qi-good); }
.is-wrong .squiz-verdict { color: var(--qi-bad); }
.squiz-explication { margin: .4rem 0 0; opacity: .9; }
.squiz-explication:empty { display: none; }

.squiz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 48px; padding: .7em 1.4em; margin-top: 1.2rem;
  border-radius: 999px; border: 2px solid transparent; font: 700 1rem/1 var(--qi-body); cursor: pointer; text-decoration: none;
  transition: transform .12s, box-shadow .15s;
}
.squiz-btn:active { transform: scale(.97); }
.squiz-btn--feu { background: linear-gradient(135deg, var(--qi-fire), #ff7a3d); color: #fff; box-shadow: 0 6px 24px -6px rgba(255, 70, 60, .6); }
.squiz-btn--feu:hover { box-shadow: 0 8px 30px -4px rgba(255, 70, 60, .8); color: #fff; }
.squiz-btn--braise { background: var(--qi-ember); color: #31038a; }
.squiz-btn--braise:hover { box-shadow: 0 0 18px rgba(253, 208, 24, .45); color: #31038a; }

.squiz-fin { text-align: center; }
.squiz-score { margin: 0; font: 400 clamp(2.5rem, 9vw, 4rem)/1 var(--qi-display); color: var(--qi-ember); }
.squiz-mot { margin: .6rem 0 1rem; font-weight: 700; font-size: 1.15rem; }
.squiz-invite { max-width: 36rem; margin: 0 auto; color: var(--qi-muted); }
.squiz-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: .4rem 0 0; }
.squiz-encore { display: inline-block; margin-top: 1rem; color: var(--qi-ember); font-weight: 700; }