/**
 * gt/quiz — Styles frontend (Proposition A : Stepper linéaire)
 * Chargé sur le frontend ET dans l'éditeur Gutenberg.
 */

/* ── Variables & container ── */
.gt-quiz-container {
    --gt-quiz-accent:   #378ADD;
    --gt-quiz-correct:  #1D9E75;
    --gt-quiz-error:    #E24B4A;
    --gt-quiz-radius:   12px;
    --gt-quiz-radius-sm: 8px;

    background:    #ffffff;
    border:        1px solid #e5e7eb;
    border-radius: var(--gt-quiz-radius);
    overflow:      hidden;
    margin:        24px 0;
    font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size:     0.92rem;
}

/* ── En-tête ── */
.gt-quiz-title {
    font-size:     1.05rem;
    font-weight:   600;
    color:         #111827;
    margin:        0;
    padding:       20px 24px 16px;
    border-bottom: 1px solid #f3f4f6;
    line-height:   1.3;
}

/* ── Barre de progression ── */
.gt-quiz-progress {
    height:     4px;
    background: #f3f4f6;
    margin:     0;
}

.gt-quiz-progress-fill {
    height:     100%;
    background: var(--gt-quiz-accent);
    transition: width 0.35s cubic-bezier(.4,0,.2,1);
}

/* ── Dots : masqués, on garde uniquement la barre de progression ── */
.gt-quiz-dots {
    display: none;
}

/* ── Compteur : entièrement gris ── */
.gt-quiz-counter {
    text-align:   center;
    font-size:    0.82rem;
    color:        #9ca3af;
    margin:       10px 0 0;
    padding:      0;
}

.gt-quiz-current {
    font-weight: 500;
    color:       #9ca3af;
}

/* ── Panels ── */
.gt-quiz-panels {
    padding: 20px 24px 0;
}

.gt-quiz-panel {
    animation: gt-quiz-slide-in 0.22s ease;
}

@keyframes gt-quiz-slide-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gt-quiz-question-text {
    font-size:     0.9rem;
    color:         #1f2937;
    margin:        0 0 16px;
    line-height:   1.6;
}

/* ── Options ── */
.gt-quiz-options {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-bottom:  4px;
}

.gt-quiz-option {
    display:       flex;
    align-items:   center;
    gap:           12px;
    width:         100%;
    text-align:    left;
    background:    #f9fafb;
    border:        1.5px solid #e5e7eb;
    border-radius: var(--gt-quiz-radius-sm);
    padding:       12px 16px;
    cursor:        pointer;
    transition:    all 0.18s ease;
    font-size:     0.87rem;
    color:         #374151;
    line-height:   1.4;
}

.gt-quiz-option:hover {
    background:   #f0f7ff;
    border-color: var(--gt-quiz-accent);
    color:        #1e3a5f;
}

/* Radio indicator */
.gt-quiz-option__radio {
    width:         18px;
    height:        18px;
    border-radius: 50%;
    border:        2px solid #d1d5db;
    flex-shrink:   0;
    transition:    all 0.15s ease;
    position:      relative;
    display:       block;
}

.gt-quiz-option__label {
    flex: 1;
}

/* Selected (before reveal) */
.gt-quiz-option--selected {
    border-color: var(--gt-quiz-accent);
    background:   #eff6ff;
    color:        #1e3a5f;
}
.gt-quiz-option--selected .gt-quiz-option__radio {
    border-color: var(--gt-quiz-accent);
    background:   var(--gt-quiz-accent);
}
.gt-quiz-option--selected .gt-quiz-option__radio::after {
    content:  '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width:  7px; height: 7px;
    border-radius: 50%;
    background:    #ffffff;
}

/* Correct */
.gt-quiz-option--correct {
    border-color: #0069e2 !important;
    background:   #e8f1fc !important;
    color:        #003d8a !important;
}
.gt-quiz-option--correct .gt-quiz-option__radio {
    border-color: #0069e2;
    background:   #0069e2;
}
.gt-quiz-option--correct .gt-quiz-option__radio::after {
    content:  '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-55%) rotate(45deg);
    width: 5px; height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

/* Incorrect */
.gt-quiz-option--incorrect {
    border-color: #d97706 !important;
    background:   #fffbeb !important;
    color:        #78350f !important;
    opacity:      0.85;
}
.gt-quiz-option--incorrect .gt-quiz-option__radio {
    border-color: #d97706;
    background:   #d97706;
}

/* Disabled after answer */
.gt-quiz-panel--answered .gt-quiz-option {
    cursor:         not-allowed;
    pointer-events: none;
}

/* ── Feedback ── */
.gt-quiz-feedback {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    border-radius: var(--gt-quiz-radius-sm);
    padding:       12px 14px;
    font-size:     0.82rem;
    line-height:   1.55;
    margin:        12px 0 0;
    animation:     gt-quiz-slide-in 0.22s ease;
}

.gt-quiz-feedback__icon {
    flex-shrink: 0;
    width:       18px;
    height:      18px;
    border-radius: 50%;
    margin-top:  2px;
    display:     block;
}

.gt-quiz-feedback--correct {
    background: #e8f1fc;
    border:     1px solid #93c5fd;
    color:      #1e3a5f;
}
.gt-quiz-feedback--correct .gt-quiz-feedback__icon {
    background:   #0069e2;
    position:     relative;
}
.gt-quiz-feedback--correct .gt-quiz-feedback__icon::after {
    content:  '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-40%,-55%) rotate(45deg);
    width: 5px; height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.gt-quiz-feedback--incorrect {
    background: #fffbeb;
    border:     1px solid #fcd34d;
    color:      #78350f;
}
.gt-quiz-feedback--incorrect .gt-quiz-feedback__icon {
    background:   #d97706;
    position:     relative;
}
.gt-quiz-feedback--incorrect .gt-quiz-feedback__icon::after {
    content:  '✕';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    color:       #fff;
    font-size:   10px;
    line-height: 1;
}

/* ── Navigation ── */
.gt-quiz-nav {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         16px 24px 20px;
    margin-top:      16px;
    border-top:      1px solid #f3f4f6;
    gap:             8px;
}

.gt-quiz-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       10px 20px;
    border-radius: var(--gt-quiz-radius-sm);
    font-size:     0.84rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    all 0.18s ease;
    border:        1.5px solid transparent;
    line-height:   1;
}

.gt-quiz-btn--prev {
    background:   #f9fafb;
    border-color: #e5e7eb;
    color:        #6b7280;
}
.gt-quiz-btn--prev:hover:not(:disabled) {
    background:   #f3f4f6;
    border-color: #d1d5db;
    color:        #374151;
}

.gt-quiz-btn--next {
    background:   var(--gt-quiz-accent);
    border-color: var(--gt-quiz-accent);
    color:        #ffffff;
    margin-left:  auto;
}
.gt-quiz-btn--next:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: 0 2px 8px rgba(55,138,221,.3);
}
.gt-quiz-btn--next.is-last {
    background:   var(--gt-quiz-correct);
    border-color: var(--gt-quiz-correct);
}

.gt-quiz-btn:disabled {
    opacity: 0.42;
    cursor:  not-allowed;
}

.gt-quiz-btn__arrow {
    font-size: 1rem;
    line-height: 1;
}

/* ── Écran final ── */
.gt-quiz-result {
    text-align: center;
    padding:    28px 24px 32px;
    animation:  gt-quiz-slide-in 0.3s ease;
}
.gt-quiz-result__score {
    font-size:   3rem;
    font-weight: 700;
    color:       var(--gt-quiz-accent);
    line-height: 1;
    margin:      0 0 6px;
}
.gt-quiz-result__label {
    font-size:   1rem;
    color:       #6b7280;
    margin:      0 0 20px;
}
.gt-quiz-result__msg {
    font-size:   0.95rem;
    color:       #374151;
    line-height: 1.6;
    margin:      0 0 20px;
}
.gt-quiz-result__restart {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       10px 22px;
    border-radius: var(--gt-quiz-radius-sm);
    background:    var(--gt-quiz-accent);
    border:        none;
    color:         #ffffff;
    font-size:     0.9rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    filter 0.18s;
}
.gt-quiz-result__restart:hover { filter: brightness(1.08); }

/* ── Responsive ── */
@media (max-width: 640px) {
    .gt-quiz-title       { padding: 16px 18px 14px; font-size: 1rem; }
    .gt-quiz-dots        { padding: 14px 18px 0; gap: 7px; }
    .gt-quiz-dot         { width: 32px; height: 32px; font-size: 0.8rem; }
    .gt-quiz-panels      { padding: 16px 18px 0; }
    .gt-quiz-nav         { padding: 14px 18px 18px; flex-wrap: wrap; }
    .gt-quiz-btn         { padding: 9px 14px; font-size: 0.85rem; }
    .gt-quiz-btn--next   { flex: 1; justify-content: center; }
    .gt-quiz-result      { padding: 22px 18px 26px; }
}