/* ── Quiz layout ─────────────────────────────────────────────── */
    .quiz-root {
      max-width: 720px;
      margin: 0 auto;
      padding-bottom: 80px;
    }

    /* ── Ornate frame (shared by cards) ──────────────────────────── */
    .quiz-ornate {
      position: relative;
      background:
        radial-gradient(ellipse at 50% -30%, rgba(37,99,235,.18), transparent 60%),
        linear-gradient(165deg, rgba(5,14,32,.94), rgba(0,5,9,.98));
      border: 1px solid rgba(59,130,246,.25);
      border-radius: 6px;
      box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 80px rgba(37,99,235,.1);
    }
    .quiz-ornate::before {
      content: '';
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(96,165,250,.12);
      border-radius: 3px;
      pointer-events: none;
    }
    .quiz-corner {
      position: absolute;
      width: 24px;
      height: 24px;
      border: 2px solid rgba(96,165,250,.6);
      filter: drop-shadow(0 0 6px rgba(96,165,250,.45));
      pointer-events: none;
    }
    .quiz-corner.tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
    .quiz-corner.tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
    .quiz-corner.bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
    .quiz-corner.br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

    /* ── Start screen ────────────────────────────────────────────── */
    .quiz-start-card {
      padding: 3.2rem 2.6rem 2.8rem;
      text-align: center;
      animation: qCardIn .55s cubic-bezier(.22,1,.36,1) both;
    }
    .quiz-emblem {
      position: relative;
      width: 110px;
      height: 110px;
      margin: 0 auto 1.4rem;
      display: grid;
      place-items: center;
    }
    .quiz-emblem-halo {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px dashed rgba(96,165,250,.35);
      animation: qSpin 16s linear infinite;
    }
    .quiz-emblem-halo::before,
    .quiz-emblem-halo::after {
      content: '✦';
      position: absolute;
      font-size: .6rem;
      color: var(--blue-l);
      top: -7px;
      left: 50%;
      transform: translateX(-50%);
      text-shadow: 0 0 8px rgba(96,165,250,.8);
    }
    .quiz-emblem-halo::after { top: auto; bottom: -7px; }
    .quiz-emblem-ring {
      position: absolute;
      inset: 14px;
      border-radius: 50%;
      border: 1px solid rgba(59,130,246,.28);
      background: radial-gradient(circle, rgba(37,99,235,.18), transparent 70%);
      animation: qBreath 3.5s ease-in-out infinite;
    }
    .quiz-emblem-glyph {
      position: relative;
      font-size: 2.6rem;
      filter: drop-shadow(0 0 16px rgba(96,165,250,.6));
      animation: qGlow 3s ease-in-out infinite;
    }
    .quiz-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: 300px;
      margin: 1.1rem auto 1.2rem;
      color: var(--blue-l);
      font-size: .8rem;
      text-shadow: 0 0 10px rgba(96,165,250,.7);
    }
    .quiz-divider::before,
    .quiz-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(96,165,250,.4));
    }
    .quiz-divider::after { background: linear-gradient(90deg, rgba(96,165,250,.4), transparent); }
    .quiz-start-stats {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 1.7rem 0 2.1rem;
    }
    .quiz-stat {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 15px;
      background: rgba(37,99,235,.07);
      border: 1px solid rgba(59,130,246,.18);
      border-radius: 3px;
      font-family: 'Cinzel', serif;
      font-size: .68rem;
      letter-spacing: .07em;
      color: var(--dim);
    }
    .quiz-stat svg { width: 13px; height: 13px; color: var(--blue-l); flex-shrink: 0; }
    .quiz-stat strong { color: var(--text); }
    .quiz-cta {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: .95rem 2.6rem;
      background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
      border: 1px solid rgba(96,165,250,.55);
      border-radius: 4px;
      color: #fff;
      font-family: 'Cinzel', serif;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(37,99,235,.4);
      transition: transform .18s, box-shadow .18s, filter .18s;
    }
    .quiz-cta::after {
      content: '';
      position: absolute;
      top: 0;
      left: -60%;
      width: 40%;
      height: 100%;
      background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
      transform: skewX(-20deg);
      animation: qShine 3.2s ease-in-out infinite;
    }
    .quiz-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(37,99,235,.55);
      filter: brightness(1.1);
    }
    .quiz-cta svg { width: 16px; flex-shrink: 0; }

    /* ── Topbar ──────────────────────────────────────────────────── */
    .quiz-topbar {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
    }
    .quiz-counter {
      font-family: 'Cinzel', serif;
      font-size: .8rem;
      letter-spacing: .08em;
      color: var(--blue-l);
      white-space: nowrap;
      min-width: 56px;
      text-shadow: 0 0 10px rgba(37,99,235,.5);
    }
    .quiz-progress-track {
      flex: 1;
      height: 4px;
      background: rgba(59,130,246,.12);
      border-radius: 99px;
      position: relative;
    }
    .quiz-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--blue-d), var(--blue-l));
      border-radius: 99px;
      transition: width .45s cubic-bezier(.4,0,.2,1);
      width: 0;
      position: relative;
      box-shadow: 0 0 12px rgba(96,165,250,.55);
    }
    .quiz-progress-fill::after {
      content: '';
      position: absolute;
      right: -4px;
      top: 50%;
      transform: translateY(-50%);
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 10px 2px rgba(96,165,250,.9);
    }

    /* ── Question card ───────────────────────────────────────────── */
    .quiz-card { padding: 2.6rem 2.2rem 2.2rem; }
    .quiz-q-num {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-family: 'Cinzel', serif;
      font-size: .66rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--blue-l);
      margin-bottom: 1rem;
    }
    .quiz-q-num::before,
    .quiz-q-num::after {
      content: '';
      width: 26px;
      height: 1px;
      background: rgba(96,165,250,.35);
    }
    .quiz-q-text {
      font-family: 'Cinzel', serif;
      font-size: clamp(1rem, 2.6vw, 1.25rem);
      color: #fff;
      line-height: 1.65;
      text-align: center;
      margin-bottom: 2rem;
      text-shadow: 0 0 24px rgba(37,99,235,.35);
    }
    .quiz-answers {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .quiz-answer-btn {
      display: flex;
      align-items: center;
      gap: 14px;
      background: linear-gradient(135deg, rgba(37,99,235,.07), rgba(4,16,36,.4));
      border: 1px solid rgba(59,130,246,.2);
      border-left: 3px solid rgba(59,130,246,.35);
      border-radius: 4px;
      padding: .9rem 1.2rem;
      color: var(--text);
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 1.08rem;
      text-align: left;
      cursor: pointer;
      transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
      width: 100%;
      position: relative;
      overflow: hidden;
    }
    .quiz-answer-key {
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      flex-shrink: 0;
      border: 1px solid rgba(96,165,250,.4);
      border-radius: 3px;
      transform: rotate(45deg);
      font-family: 'Cinzel', serif;
      font-size: .64rem;
      font-weight: 700;
      color: var(--blue-l);
      transition: background .18s, border-color .18s, box-shadow .18s, color .18s;
    }
    .quiz-answer-key i {
      font-style: normal;
      transform: rotate(-45deg);
    }
    .quiz-answer-btn:not(:disabled):hover {
      background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(37,99,235,.06));
      border-color: rgba(96,165,250,.55);
      border-left-color: var(--blue-l);
      transform: translateX(6px);
      box-shadow: -4px 0 18px rgba(37,99,235,.25);
    }
    .quiz-answer-btn:not(:disabled):hover .quiz-answer-key {
      background: var(--blue);
      border-color: var(--blue-l);
      color: #fff;
      box-shadow: 0 0 12px rgba(96,165,250,.7);
    }
    .quiz-answer-btn:disabled { cursor: default; }
    .quiz-answer-btn.selected {
      background: linear-gradient(135deg, rgba(37,99,235,.3), rgba(96,165,250,.12));
      border-color: var(--blue-l);
      border-left-color: #fff;
      color: #fff;
      box-shadow: 0 0 24px rgba(37,99,235,.35);
    }
    .quiz-answer-btn.selected .quiz-answer-key {
      background: var(--blue-l);
      border-color: #fff;
      color: #041024;
      box-shadow: 0 0 14px rgba(147,197,253,.9);
    }

    /* ── Card transition ─────────────────────────────────────────── */
    .q-enter { animation: qSlideIn .32s cubic-bezier(.22,1,.36,1) both; }
    .q-exit  { animation: qSlideOut .22s ease forwards; }

    /* ── Loading screen : cercle d'invocation ────────────────────── */
    .quiz-loading-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 34px;
      padding: 60px 0 50px;
    }
    .quiz-sigil {
      position: relative;
      width: 240px;
      height: 240px;
      display: grid;
      place-items: center;
    }
    .sigil-ripple {
      position: absolute;
      inset: 20px;
      border-radius: 50%;
      border: 1px solid rgba(96,165,250,.5);
      opacity: 0;
      animation: qRipple 2.4s cubic-bezier(.2,.6,.35,1) infinite;
    }
    .sigil-ripple.r2 { animation-delay: .8s; }
    .sigil-ripple.r3 { animation-delay: 1.6s; }
    .sigil-glow {
      position: absolute;
      inset: 50px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(37,99,235,.4), rgba(37,99,235,.08) 55%, transparent 72%);
      animation: qBreath 2.2s ease-in-out infinite;
    }
    .sigil-runes {
      position: absolute;
      inset: 0;
      animation: qSpin 22s linear infinite;
    }
    .sigil-rune {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: .82rem;
      color: rgba(147,197,253,.85);
      text-shadow: 0 0 8px rgba(96,165,250,.8);
      transform: translate(-50%,-50%) rotate(var(--a)) translateY(-108px);
    }
    .sigil-rune:nth-child(odd) { font-size: .58rem; opacity: .7; }
    .sigil-ring-conic {
      position: absolute;
      inset: 28px;
      border-radius: 50%;
      background: conic-gradient(from 0deg,
        transparent 0%, rgba(96,165,250,.9) 12%, transparent 26%,
        transparent 50%, rgba(37,99,235,.7) 62%, transparent 76%);
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 2px));
              mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 2px));
      animation: qSpin 1.4s linear infinite;
      filter: drop-shadow(0 0 6px rgba(96,165,250,.8));
    }
    .sigil-ring-dash {
      position: absolute;
      inset: 48px;
      border-radius: 50%;
      border: 1px dashed rgba(96,165,250,.3);
      animation: qSpin 7s linear infinite reverse;
    }
    .sigil-orbit {
      position: absolute;
      inset: 28px;
      border-radius: 50%;
      animation: qSpin linear infinite;
    }
    .sigil-orbit.o1 { animation-duration: 1.4s; }
    .sigil-orbit.o2 { animation-duration: 2.3s; animation-direction: reverse; inset: 48px; }
    .sigil-orbit.o3 { animation-duration: 3.6s; inset: 10px; }
    .sigil-comet {
      position: absolute;
      top: -3px;
      left: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 10px 3px rgba(96,165,250,.9);
    }
    .sigil-orbit.o2 .sigil-comet { width: 4px; height: 4px; background: var(--blue-l); }
    .sigil-orbit.o3 .sigil-comet { width: 3px; height: 3px; opacity: .8; }
    .sigil-core {
      position: relative;
      font-size: 2.6rem;
      color: #fff;
      z-index: 2;
      animation: qCorePulse 1.6s ease-in-out infinite;
    }
    .sigil-spark {
      position: absolute;
      bottom: 40px;
      left: 50%;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--blue-l);
      box-shadow: 0 0 6px rgba(96,165,250,.9);
      opacity: 0;
      margin-left: var(--x);
      animation: qSparkRise 2.2s ease-in infinite;
      animation-delay: var(--d);
    }
    .sigil-flash {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.95), rgba(96,165,250,.5) 40%, transparent 70%);
      opacity: 0;
      transform: scale(.2);
      pointer-events: none;
      z-index: 3;
    }
    .quiz-sigil.burst .sigil-flash { animation: qBurst .65s cubic-bezier(.2,.7,.3,1) forwards; }
    .quiz-sigil.burst .sigil-core  { animation: qCoreBurst .65s ease forwards; }
    .quiz-loading-text {
      font-family: 'Cinzel', serif;
      font-size: .9rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--blue-l);
      transition: opacity .3s;
      text-align: center;
      text-shadow: 0 0 14px rgba(37,99,235,.5);
    }

    /* ── Results ─────────────────────────────────────────────────── */
    .quiz-result-panel { animation: qCardIn .5s cubic-bezier(.22,1,.36,1) both; }

    .quiz-type-hero {
      position: relative;
      border-radius: 6px;
      padding: 2.5rem 2rem;
      text-align: center;
      margin-bottom: 20px;
      border: 1px solid transparent;
      animation: qCardIn .5s cubic-bezier(.22,1,.36,1) both;
    }
    .quiz-type-hero .quiz-corner {
      border-color: currentColor;
      opacity: .65;
      filter: none;
    }
    .quiz-type-label {
      font-family: 'Cinzel', serif;
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: .8rem;
      opacity: .8;
    }
    .quiz-type-icon {
      font-size: 4rem;
      display: block;
      margin-bottom: .7rem;
      animation: qGlow 3s ease-in-out infinite;
    }
    .quiz-type-name {
      font-family: 'Cinzel', serif;
      font-size: clamp(1.4rem, 4vw, 2rem);
      font-weight: 800;
      letter-spacing: .05em;
      margin-bottom: .8rem;
      color: #fff;
    }
    .quiz-type-desc {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
      line-height: 1.75;
      color: rgba(195,210,232,.85);
      max-width: 520px;
      margin: 0 auto;
    }

    /* Breakdown bars */
    .quiz-breakdown {
      background: rgba(4,16,36,.72);
      border: 1px solid rgba(59,130,246,.12);
      border-radius: 14px;
      padding: 1.4rem 1.5rem;
      margin-bottom: 20px;
    }
    .quiz-section-label {
      font-family: 'Cinzel', serif;
      font-size: .68rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 14px;
    }
    .quiz-bar-item { margin-bottom: 11px; }
    .quiz-bar-item:last-child { margin-bottom: 0; }
    .quiz-bar-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      font-size: .88rem;
    }
    .quiz-bar-lbl { color: var(--text); }
    .quiz-bar-pct {
      font-family: 'Cinzel', serif;
      font-size: .72rem;
      color: var(--dim);
    }
    .quiz-bar-track {
      height: 5px;
      background: rgba(59,130,246,.1);
      border-radius: 99px;
      overflow: hidden;
    }
    .quiz-bar-fill {
      height: 100%;
      border-radius: 99px;
      width: 0;
      transition: width 1s cubic-bezier(.4,0,.2,1);
    }

    /* Recap */
    .quiz-recap { margin-bottom: 24px; }
    .quiz-recap-item {
      background: rgba(4,16,36,.6);
      border: 1px solid rgba(59,130,246,.1);
      border-radius: 11px;
      padding: .95rem 1.1rem;
      margin-bottom: 7px;
      animation: qCardIn .4s cubic-bezier(.22,1,.36,1) both;
    }
    .quiz-recap-q {
      font-family: 'Cinzel', serif;
      font-size: .78rem;
      color: var(--dim);
      margin-bottom: 7px;
      line-height: 1.5;
    }
    .quiz-recap-a {
      font-size: .96rem;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .quiz-recap-a svg { flex-shrink: 0; color: var(--blue-l); }
    .quiz-recap-type {
      font-size: .7rem;
      font-family: 'Cinzel', serif;
      letter-spacing: .06em;
      padding: 2px 9px;
      border-radius: 99px;
      border: 1px solid;
      white-space: nowrap;
      margin-left: auto;
    }

    /* History */
    .quiz-history-section {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid rgba(59,130,246,.12);
    }
    .quiz-history-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: rgba(4,16,36,.5);
      border: 1px solid rgba(59,130,246,.1);
      border-radius: 10px;
      margin-bottom: 7px;
    }
    .quiz-history-icon { font-size: 1.4rem; }
    .quiz-history-name {
      flex: 1;
      font-family: 'Cinzel', serif;
      font-size: .82rem;
      color: var(--text);
    }
    .quiz-history-date { color: var(--dim); font-size: .76rem; }

    /* ── Admin panel ─────────────────────────────────────────────── */
    .quiz-admin-section {
      max-width: 900px;
      margin: 48px auto 80px;
      padding: 0 20px;
    }
    .quiz-admin-panel {
      background: rgba(2,10,25,.97);
      border: 1px solid rgba(59,130,246,.18);
      border-radius: 6px;
      padding: 1.6rem;
    }
    .qa-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(59,130,246,.12);
    }
    .quiz-admin-tabs { display: flex; gap: 6px; }
    .quiz-admin-tab {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: none;
      border: 1px solid transparent;
      border-radius: 5px;
      padding: 7px 16px;
      font-family: 'Cinzel', serif;
      font-size: .76rem;
      letter-spacing: .06em;
      color: var(--dim);
      cursor: pointer;
      transition: all .18s;
    }
    .quiz-admin-tab:hover { border-color: rgba(59,130,246,.2); color: var(--text); }
    .quiz-admin-tab.active { background: rgba(37,99,235,.15); border-color: rgba(96,165,250,.3); color: var(--blue-l); }
    .qa-count {
      display: inline-grid;
      place-items: center;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      background: rgba(59,130,246,.15);
      border-radius: 99px;
      font-size: .66rem;
      color: var(--text);
    }
    .quiz-admin-pane { display: none; }
    .quiz-admin-pane.active { display: block; }
    .qa-empty {
      color: var(--dim);
      font-size: .9rem;
      text-align: center;
      padding: 26px 0;
    }

    /* Questions : cartes accordéon */
    .qa-q-card {
      background: rgba(4,16,36,.55);
      border: 1px solid rgba(59,130,246,.12);
      border-radius: 6px;
      margin-bottom: 8px;
      overflow: hidden;
      transition: border-color .18s;
    }
    .qa-q-card.open { border-color: rgba(96,165,250,.3); }
    .qa-q-head {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: .85rem 1rem;
      background: none;
      border: 0;
      cursor: pointer;
      color: var(--text);
      text-align: left;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 1rem;
      transition: background .15s;
    }
    .qa-q-head:hover { background: rgba(37,99,235,.07); }
    .qa-q-index {
      flex-shrink: 0;
      font-family: 'Cinzel', serif;
      font-size: .68rem;
      font-weight: 700;
      color: var(--blue-l);
      background: rgba(37,99,235,.12);
      border: 1px solid rgba(59,130,246,.25);
      border-radius: 4px;
      padding: 3px 8px;
    }
    .qa-q-title { flex: 1; line-height: 1.4; }
    .qa-q-meta {
      flex-shrink: 0;
      font-family: 'Cinzel', serif;
      font-size: .72rem;
      color: var(--dim);
      white-space: nowrap;
    }
    .qa-q-meta.warn { color: var(--gold); }
    .qa-q-chev {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      color: var(--dim);
      transition: transform .2s;
    }
    .qa-q-card.open .qa-q-chev { transform: rotate(180deg); }
    .qa-q-body {
      padding: 2px 1rem 1rem;
      border-top: 1px solid rgba(59,130,246,.1);
    }
    .qa-ans-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      margin-top: 7px;
      background: rgba(2,8,20,.5);
      border: 1px solid rgba(59,130,246,.08);
      border-radius: 5px;
      font-size: .92rem;
    }
    .qa-ans-text { flex: 1; color: var(--text); line-height: 1.4; }
    .qa-type-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      font-size: .7rem;
      font-family: 'Cinzel', serif;
      padding: 2px 10px;
      border-radius: 99px;
      border: 1px solid;
      white-space: nowrap;
    }
    .qa-icon-btn {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      background: rgba(37,99,235,.08);
      border: 1px solid rgba(59,130,246,.2);
      border-radius: 5px;
      color: var(--dim);
      cursor: pointer;
      transition: all .15s;
    }
    .qa-icon-btn svg { width: 13px; height: 13px; }
    .qa-icon-btn:hover { color: var(--blue-l); border-color: rgba(96,165,250,.5); background: rgba(37,99,235,.18); }
    .qa-icon-btn.danger:hover { color: var(--red); border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.12); }
    .qa-q-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .qa-q-actions .spacer { flex: 1; }

    /* Types : grille de cartes */
    .qa-types-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 10px;
    }
    .qa-types-grid .qa-empty { grid-column: 1 / -1; }
    .qa-type-card {
      background: rgba(4,16,36,.55);
      border: 1px solid rgba(59,130,246,.12);
      border-left: 3px solid var(--tc, var(--blue));
      border-radius: 6px;
      padding: .9rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .qa-type-card-head { display: flex; align-items: center; gap: 9px; }
    .qa-type-card-icon { font-size: 1.5rem; }
    .qa-type-card-name {
      font-family: 'Cinzel', serif;
      font-size: .88rem;
      font-weight: 700;
      color: var(--tc, var(--blue-l));
    }
    .qa-type-card-desc {
      flex: 1;
      font-size: .84rem;
      color: var(--dim);
      line-height: 1.5;
    }
    .qa-type-card-foot { display: flex; gap: 6px; justify-content: flex-end; }

    /* Modale d'édition */
    .qa-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 900;
      background: rgba(0,3,8,.72);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: qFadeIn .18s ease both;
    }
    .qa-modal-backdrop[hidden] { display: none; }
    .qa-modal {
      width: 100%;
      max-width: 480px;
      background: linear-gradient(165deg, rgba(6,16,36,.98), rgba(0,5,9,.99));
      border: 1px solid rgba(96,165,250,.3);
      border-radius: 8px;
      padding: 1.5rem;
      box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 50px rgba(37,99,235,.15);
      animation: qCardIn .22s cubic-bezier(.22,1,.36,1) both;
    }
    .qa-modal-title {
      font-family: 'Cinzel', serif;
      font-size: .95rem;
      letter-spacing: .06em;
      color: #fff;
      margin-bottom: 1.1rem;
    }
    .qa-modal-context {
      font-size: .88rem;
      font-style: italic;
      color: var(--dim);
      line-height: 1.5;
      padding: 8px 12px;
      margin-bottom: 12px;
      background: rgba(37,99,235,.07);
      border-left: 2px solid rgba(96,165,250,.4);
      border-radius: 4px;
    }
    .qa-field { display: block; margin-bottom: 12px; }
    .qa-field-lbl {
      display: block;
      font-family: 'Cinzel', serif;
      font-size: .64rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 5px;
    }
    .qa-field input[type="text"],
    .qa-field textarea,
    .qa-field select {
      width: 100%;
      background: rgba(4,16,36,.8);
      border: 1px solid rgba(59,130,246,.22);
      border-radius: 6px;
      padding: .6rem .9rem;
      color: var(--text);
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 1rem;
      outline: none;
      transition: border-color .15s;
    }
    .qa-field input:focus,
    .qa-field textarea:focus,
    .qa-field select:focus { border-color: var(--blue); }
    .qa-field textarea { resize: vertical; min-height: 70px; }
    .qa-field input[type="color"] {
      width: 100%;
      height: 41px;
      background: rgba(4,16,36,.8);
      border: 1px solid rgba(59,130,246,.22);
      border-radius: 6px;
      padding: 4px;
      cursor: pointer;
    }
    .qa-field-row { display: flex; gap: 10px; }
    .qa-modal-foot {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 6px;
    }
    @keyframes qFadeIn { from { opacity: 0; } }

    /* ── Keyframes ───────────────────────────────────────────────── */
    @keyframes qCardIn  { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
    @keyframes qSlideIn { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:none; } }
    @keyframes qSlideOut{ to   { opacity:0; transform:translateX(-20px); } }
    @keyframes qSpin    { to   { transform:rotate(360deg); } }
    @keyframes qGlow    {
      0%,100% { filter:drop-shadow(0 0 10px rgba(37,99,235,.45)); }
      50%     { filter:drop-shadow(0 0 22px rgba(96,165,250,.85)); }
    }
    @keyframes qShine {
      0%, 55% { left: -60%; }
      100%    { left: 130%; }
    }
    @keyframes qBreath {
      0%,100% { opacity:.55; transform:scale(.94); }
      50%     { opacity:1;   transform:scale(1.05); }
    }
    @keyframes qRipple {
      0%   { opacity:.8; transform:scale(.45); }
      100% { opacity:0;  transform:scale(1.25); }
    }
    @keyframes qCorePulse {
      0%,100% { transform:scale(1);    filter:drop-shadow(0 0 12px rgba(96,165,250,.7)); }
      50%     { transform:scale(1.18); filter:drop-shadow(0 0 30px rgba(147,197,253,1)); }
    }
    @keyframes qSparkRise {
      0%   { opacity:0; transform:translateY(0) scale(.6); }
      15%  { opacity:1; }
      100% { opacity:0; transform:translateY(-130px) scale(1.1); }
    }
    @keyframes qBurst {
      0%   { opacity:0; transform:scale(.2); }
      25%  { opacity:1; }
      100% { opacity:0; transform:scale(1.6); }
    }
    @keyframes qCoreBurst {
      0%   { transform:scale(1); }
      40%  { transform:scale(1.9); filter:drop-shadow(0 0 40px #fff); }
      100% { transform:scale(1);   filter:drop-shadow(0 0 12px rgba(96,165,250,.7)); }
    }
    @media (prefers-reduced-motion: reduce) {
      /* Animations décoratives coupées… */
      .q-enter, .q-exit, .quiz-type-hero, .quiz-result-panel,
      .quiz-recap-item, .quiz-emblem-halo, .quiz-emblem-ring,
      .quiz-emblem-glyph, .quiz-cta::after, .sigil-ripple,
      .sigil-runes, .sigil-orbit, .sigil-spark, .sigil-flash { animation: none !important; }
      /* …mais l'indicateur de chargement est un mouvement ESSENTIEL :
         on garde une rotation lente et une pulsation douce, sinon l'écran
         de calcul semble planté (sigil totalement figé). */
      .sigil-ring-conic { animation-duration: 3s !important; }
      .sigil-ring-dash  { animation-duration: 16s !important; }
      .sigil-glow       { animation-duration: 3.5s !important; }
      .sigil-core       { animation-duration: 3.5s !important; }
      .quiz-progress-fill, .quiz-bar-fill { transition: none !important; }
    }