/* quiz-custom.css — Quiz personnalisé v2 (page Quiz, 2026-10-15).
   Configurateur en 3 étapes à gauche, récapitulatif collant à droite.
   Sans bordures : zones séparées par le fond (--pro-s1 / --pro-s2). */
.qc { --qc-acc: var(--ng-accent, #2f4cf0); --qc-s1: var(--pro-s1, var(--ng-inner)); --qc-s2: var(--pro-s2, var(--ng-inner)); }

.qc-card { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.qc-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.qc-step { padding: clamp(18px, 2.6vw, 26px); border-radius: 24px; background: var(--qc-s1); }

/* En-tête d'étape */
.qc-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.qc-step-n {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--qc-acc); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.qc-step-title { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.qc-step-title h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ng-heading); }
.qc-step-meta { font-size: 12.5px; color: var(--ng-t50); font-variant-numeric: tabular-nums; }
.qc-tools { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--qc-s2); }
.qc-tool { border: 0; padding: 5px 12px; border-radius: 999px; background: none; color: var(--ng-t60); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.qc-tool:hover { background: var(--qc-s1); color: var(--ng-heading); }

/* 1. Catégories : cartes cochables */
.qc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.qc-cat {
    position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 16px;
    background: var(--qc-s2); cursor: pointer; user-select: none;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.qc-cat:hover { transform: translateY(-1px); }
.qc-cat input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.qc-cat-ic {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
    background: var(--qc-s1); color: var(--ng-t70); transition: background .18s, color .18s;
}
.qc-cat-ic svg { width: 18px; height: 18px; }
.qc-cat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qc-cat-txt b { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ng-heading); }
.qc-cat-txt small { font-size: 11.5px; color: var(--ng-t50); font-variant-numeric: tabular-nums; }
.qc-cat-check {
    flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
    background: var(--qc-s1); color: #fff; transition: background .18s;
}
.qc-cat-check svg { opacity: 0; transform: scale(.5); transition: opacity .18s, transform .22s cubic-bezier(.34, 1.56, .64, 1); }
.qc-cat:has(input:checked) { background: color-mix(in srgb, var(--qc-acc) 11%, var(--qc-s2)); }
.qc-cat:has(input:checked) .qc-cat-ic { background: var(--qc-acc); color: #fff; }
.qc-cat:has(input:checked) .qc-cat-check { background: var(--qc-acc); }
.qc-cat:has(input:checked) .qc-cat-check svg { opacity: 1; transform: none; }
.qc-cat:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qc-acc) 40%, transparent); }

/* 2. Réglages */
.qc-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qc-setting { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--qc-s2); }
.qc-setting-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qc-setting-top label { font-size: 13px; font-weight: 600; color: var(--ng-t70); }
.qc-value {
    min-width: 46px; padding: 3px 10px; border-radius: 999px; background: var(--qc-s1);
    text-align: center; font-size: 15px; font-weight: 700; color: var(--ng-heading); font-variant-numeric: tabular-nums;
}
.qc-range { width: 100%; }
.qc-presets { display: flex; gap: 6px; }
.qc-preset {
    flex: 1; border: 0; padding: 6px 0; border-radius: 10px; background: var(--qc-s1); color: var(--ng-t60);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
    transition: background .15s, color .15s;
}
.qc-preset:hover { color: var(--ng-heading); }
.qc-preset.is-on { background: var(--ng-heading); color: var(--qc-s1); }

/* 3. Mode */
.qc-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qc-mode {
    display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border: 0; border-radius: 18px;
    background: var(--qc-s2); color: inherit; font: inherit; text-align: left; cursor: pointer;
    transition: background .18s, box-shadow .18s, transform .18s;
}
.qc-mode:hover { transform: translateY(-1px); }
.qc-mode:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--qc-acc) 40%, transparent); }
.qc-mode-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--qc-s1); color: var(--ng-t70); transition: background .18s, color .18s; }
.qc-mode-txt { display: flex; flex-direction: column; gap: 3px; }
.qc-mode-txt b { font-size: 14px; font-weight: 600; color: var(--ng-heading); }
.qc-mode-txt small { font-size: 12.5px; line-height: 1.45; color: var(--ng-t55); }
.qc-mode.selected { background: color-mix(in srgb, var(--qc-acc) 11%, var(--qc-s2)); }
.qc-mode.selected .qc-mode-ic { background: var(--qc-acc); color: #fff; }
.qc-mode.is-danger.selected { background: color-mix(in srgb, #ef4444 11%, var(--qc-s2)); }
.qc-mode.is-danger.selected .qc-mode-ic { background: #ef4444; }

/* Récapitulatif */
.qc-summary {
    position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px;
    padding: 22px; border-radius: 24px; background: var(--qc-s1);
}
.qc-sum-head { display: flex; align-items: center; gap: 10px; }
.qc-sum-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--qc-acc) 12%, transparent); color: var(--qc-acc); }
.qc-sum-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.qc-sum-figs > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-radius: 14px; background: var(--qc-s2); }
.qc-sum-figs b { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ng-heading); font-variant-numeric: tabular-nums; }
.qc-sum-figs small { font-size: 11px; line-height: 1.3; color: var(--ng-t50); }
.qc-sum-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.qc-sum-cats:empty { display: none; }
.qc-chip {
    display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 4px 8px 4px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--qc-acc) 11%, var(--qc-s2)); color: var(--ng-heading);
    font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; animation: qcPop .25s cubic-bezier(.34, 1.56, .64, 1);
}
.qc-chip::after { content: '×'; font-size: 14px; line-height: 1; opacity: .5; }
.qc-chip:hover::after { opacity: 1; }
.qc-sum-empty { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--qc-s2); font-size: 13px; line-height: 1.45; color: var(--ng-t55); }
.qc-sum-warn { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #f59e0b 14%, transparent); font-size: 12.5px; line-height: 1.45; color: var(--ng-heading); }
/* Texte brut écrit par quiz.js : doublon du récapitulatif, gardé pour les lecteurs d'écran. */
.qc-sum-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qc-launch { width: 100%; justify-content: center; }
.qc-launch:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.qc.has-picks .qc-launch:not(:disabled) { animation: qcReady .5s ease; }

@keyframes qcPop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qcReady { 40% { transform: scale(1.03); } }

@media (max-width: 1000px) {
    .qc-card { grid-template-columns: minmax(0, 1fr); }
    .qc-summary { position: static; }
}
@media (max-width: 640px) {
    .qc-settings, .qc-modes { grid-template-columns: minmax(0, 1fr); }
    .qc-cats { grid-template-columns: minmax(0, 1fr); }
    .qc-step-head { flex-wrap: wrap; }
    .qc-tools { margin-left: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .qc-chip, .qc.has-picks .qc-launch:not(:disabled) { animation: none; }
    .qc-cat:hover, .qc-mode:hover { transform: none; }
}