/* =========================================================
   WP Quiz Plugin — Public Styles
   Palette : indigo / violet / slate avec accents amber pour le timer
   ========================================================= */

:root {
    --wqp-indigo:      #6366f1;
    --wqp-indigo-d:    #4f46e5;
    --wqp-violet:      #8b5cf6;
    --wqp-success:     #10b981;
    --wqp-danger:      #ef4444;
    --wqp-amber:       #f59e0b;
    --wqp-slate-1:     #f8fafc;
    --wqp-slate-2:     #e2e8f0;
    --wqp-slate-txt:   #334155;
    --wqp-wedding-gold: #D0A560;
    --wqp-wedding-light-gold: #f7e7bd;
    --wqp-wedding-berry: #6E2C20;
    --wqp-wedding-light-berry: #c26565;
    --wqp-wedding-blue: #29426A;
    --wqp-wedding-light-blue: #3D83B6;
    --wqp-radius:      16px;
    --wqp-radius-sm:   10px;
    --wqp-shadow:      0 4px 32px rgba(99,102,241,.12);
    --wqp-font:        -apple-system, 'Segoe UI', system-ui, sans-serif;
}

body{ 
    height: 95vh;
    background-color: var(--wqp-wedding-berry);
    }

/* ---- Container ---- */
.wqp-quiz-container {
    font-family:    var(--wqp-font);
    max-width:      680px;
    margin:         0 auto;
    padding:        0 16px 48px;
    color:          var(--wqp-slate-txt);
}

/* ---- Screens ---- */
.wqp-screen { display: none; }
.wqp-screen.wqp-active { display: block; }

/* ---- Shared card ---- */
.wqp-screen-team,
.wqp-screen-question,
.wqp-screen-results {
    background:    #fff;
    border-radius: var(--wqp-radius);
    box-shadow:    var(--wqp-shadow);
    padding:       40px 36px;
    margin-top:    32px;
    animation:     wqpFadeIn .35s ease;
}

@keyframes wqpFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Team screen ---- */
.wqp-quiz-header { text-align: center; margin-bottom: 32px; }
.wqp-quiz-title {
    font-size:   2rem;
    font-weight: 800;
    line-height: 1.2;
    background:  linear-gradient(135deg, var(--wqp-wedding-blue), var(--wqp-wedding-light-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 8px;
}
.wqp-quiz-subtitle { color: #94a3b8; font-size: .95rem; margin: 0; }

.wqp-quiz-description {
    color:       #64748b;
    font-size:   .9rem;
    line-height: 1.6;
    margin:      12px 0 0;
    padding:     12px 16px;
    background:  #f8fafc;
    border-left: 3px solid #e2e8f0;
    border-radius: 0 6px 6px 0;
    text-align:  left;
}

.wqp-label { display: block; font-weight: 700; margin-bottom: 10px; font-size: .9rem; letter-spacing: .03em; text-transform: uppercase; color: #64748b; }

.wqp-team-name-input {
    width:         100%;
    padding:       14px 18px;
    font-size:     1.1rem;
    border:        2px solid var(--wqp-slate-2);
    border-radius: var(--wqp-radius-sm);
    outline:       none;
    transition:    border-color .2s;
    box-sizing:    border-box;
    font-family:   var(--wqp-font);
}
.wqp-team-name-input:focus { border-color: var(--wqp-wedding-blue); }

/* ---- Buttons ---- */
.wqp-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         14px 28px;
    font-size:       1rem;
    font-weight:     700;
    border:          none;
    border-radius:   var(--wqp-radius-sm);
    cursor:          pointer;
    transition:      transform .15s, box-shadow .15s, background .15s;
    font-family:     var(--wqp-font);
    background:      linear-gradient(135deg, var(--wqp-wedding-blue), var(--wqp-wedding-light-blue));
    color:           #fff;
    margin-top:      18px;
    width:           100%;
    box-shadow:      0 4px 16px rgba(99,102,241,.35);
}
.wqp-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.45); }
.wqp-btn:active { transform: translateY(0); }
.wqp-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.wqp-btn-next,
.wqp-btn-finish { background: linear-gradient(135deg, var(--wqp-wedding-blue), var(--wqp-wedding-light-blue)); }

.wqp-btn-restart {
    background: linear-gradient(135deg, #64748b, #475569);
    box-shadow: 0 4px 16px rgba(100,116,139,.3);
}

/* ---- Progress bar ---- */
.wqp-progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.wqp-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--wqp-slate-2);
    border-radius: 99px;
    overflow: hidden;
}
.wqp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--wqp-wedding-berry), var(--wqp-wedding-light-berry));
    border-radius: 99px;
    transition: width .4s ease;
}
.wqp-progress-label { font-size: .8rem; font-weight: 600; color: #94a3b8; white-space: nowrap; }

/* ---- Timer ring ---- */
.wqp-timer-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.wqp-timer-ring { position: relative; width: 72px; height: 72px; }
.wqp-timer-svg  { width: 100%; height: 100%; transform: rotate(-90deg); }
.wqp-timer-track { fill: none; stroke: var(--wqp-slate-2); stroke-width: 5; }
.wqp-timer-arc   {
    fill: none;
    stroke: var(--wqp-wedding-blue);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 163.4; /* 2π×26 */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke .5s;
}
.wqp-timer-arc.wqp-timer-warning { stroke: var(--wqp-wedding-gold); }
.wqp-timer-arc.wqp-timer-danger  { stroke: var(--wqp-wedding-light-berry); }
.wqp-timer-count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--wqp-slate-txt);
}

/* ---- Question ---- */
.wqp-question-image-wrap { margin-bottom: 20px; border-radius: var(--wqp-radius-sm); overflow: hidden; }
.wqp-question-image { width: 100%; max-height: 320px; object-fit: cover; display: block; }
.wqp-question-text {
    font-size:   1.35rem;
    font-weight: 700;
    line-height: 1.4;
    margin:      0 0 24px;
}

/* ---- Choices ---- */
.wqp-choices-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.wqp-choice-btn {
    width:         100%;
    text-align:    left;
    padding:       14px 18px;
    background:    var(--wqp-slate-1);
    border:        2px solid var(--wqp-slate-2);
    border-radius: var(--wqp-radius-sm);
    font-size:     1rem;
    font-family:   var(--wqp-font);
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    gap:           14px;
    transition:    border-color .15s, background .15s, transform .1s;
    font-weight:   500;
    color:         var(--wqp-slate-txt);
}
.wqp-choice-btn:hover:not(:disabled) { border-color: var(--wqp-wedding-blue); background: #eef2ff; transform: translateX(2px); }
.wqp-choice-btn.wqp-selected { border-color: var(--wqp-wedding-blue); background: #eef2ff; }
.wqp-choice-btn:disabled { cursor: default; }

/* Surbrillances après validation */
.wqp-choice-btn.wqp-correct {
    border-color: var(--wqp-success);
    background:   #d1fae5;
    color:        #065f46;
}
.wqp-choice-btn.wqp-wrong {
    border-color: var(--wqp-danger);
    background:   #fee2e2;
    color:        #991b1b;
}

.wqp-choice-letter {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--wqp-slate-2);
    font-weight:     800;
    font-size:       .8rem;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background .15s, color .15s;
}
.wqp-choice-btn.wqp-selected .wqp-choice-letter { background: var(--wqp-wedding-blue); color: #fff; }
.wqp-choice-btn.wqp-correct  .wqp-choice-letter { background: var(--wqp-success); color: #fff; }
.wqp-choice-btn.wqp-wrong    .wqp-choice-letter { background: var(--wqp-danger);  color: #fff; }

/* ---- Champ libre ---- */
.wqp-free-input {
    width:         100%;
    padding:       14px 18px;
    font-size:     1.05rem;
    border:        2px solid var(--wqp-slate-2);
    border-radius: var(--wqp-radius-sm);
    outline:       none;
    transition:    border-color .2s;
    box-sizing:    border-box;
    font-family:   var(--wqp-font);
}
.wqp-free-input:focus { border-color: var(--wqp-wedding-blue); }
.wqp-free-input.wqp-correct { border-color: var(--wqp-success); background: #d1fae5; }
.wqp-free-input.wqp-wrong   { border-color: var(--wqp-danger);  background: #fee2e2; }

/* ---- Feedback ---- */
.wqp-feedback {
    padding:       12px 16px;
    border-radius: var(--wqp-radius-sm);
    font-weight:   700;
    margin-top:    14px;
    font-size:     .95rem;
    animation:     wqpFadeIn .25s ease;
}
.wqp-feedback.wqp-correct { background: #d1fae5; color: #065f46; border-left: 4px solid var(--wqp-success); }
.wqp-feedback.wqp-wrong   { background: #fee2e2; color: #991b1b; border-left: 4px solid var(--wqp-danger); }
.wqp-feedback.wqp-timeout { background: var(--wqp-wedding-light-gold); color: #92400e; border-left: 4px solid var(--wqp-wedding-gold); }

/* ---- Error ---- */
.wqp-error-msg {
    color:       var(--wqp-danger);
    font-size:   .88rem;
    font-weight: 600;
    margin-top:  10px;
}

/* ---- Results screen ---- */
.wqp-screen-results { text-align: center; }
.wqp-results-inner { padding: 12px 0; }
.wqp-trophy { font-size: 4rem; margin-bottom: 12px; display: block; }
.wqp-results-team { font-size: 1.5rem; font-weight: 800; margin: 0 0 20px; }
.wqp-score-display {
    display:         inline-flex;
    align-items:     baseline;
    gap:             6px;
    background:      linear-gradient(135deg, var(--wqp-wedding-blue), var(--wqp-wedding-light-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.wqp-score-num   { font-size: 4rem; font-weight: 900; line-height: 1; }
.wqp-score-sep   { font-size: 2rem; font-weight: 300; }
.wqp-score-total { font-size: 2.5rem; font-weight: 700; }
.wqp-score-pct   { color: #64748b; font-size: 1.1rem; font-weight: 600; margin: 8px 0 4px; }
.wqp-score-time  { color: #94a3b8; font-size: .9rem; margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .wqp-screen-team,
    .wqp-screen-question,
    .wqp-screen-results { padding: 28px 20px; }
    .wqp-quiz-title { font-size: 1.5rem; }
    .wqp-question-text { font-size: 1.15rem; }
    .wqp-score-num { font-size: 3rem; }
}

.wqp-precision {
    margin-top:    10px;
    padding:       12px 16px;
    background:    #f1f5f9;
    border-left:   3px solid #94a3b8;
    border-radius: 0 6px 6px 0;
    font-size:     .9rem;
    color:         #475569;
    line-height:   1.6;
    animation:     wqpFadeIn .3s ease;
}