/* =============================================
   TEST DISC - WIDGET INLINE (integre dans la page)
   Version 2.0
   ============================================= */

@property --disc-halo {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ======= KEYFRAMES ======= */
@keyframes discHaloSpin {
    0% { --disc-halo: 0deg; }
    100% { --disc-halo: 360deg; }
}
@keyframes discPulse {
    0%,100% { opacity:0.45; }
    50% { opacity:0.85; }
}
@keyframes discShimmer {
    0%,100% { opacity:0.5; }
    50% { opacity:0.7; }
}
@keyframes discSlideIn {
    from { opacity:0; transform:translateY(12px); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes discSlideOut {
    from { opacity:1; transform:translateX(0); }
    to { opacity:0; transform:translateX(-30px); }
}
@keyframes discSpin {
    to { transform: rotate(360deg); }
}
@keyframes discDotPulse {
    0%,100% { transform: translate(-50%,-50%) scale(1); }
    50% { transform: translate(-50%,-50%) scale(1.3); }
}

/* ======= WIDGET CONTAINER (with halo border) ======= */
.disc-widget-wrap {
    position:relative;
    border-radius:28px;
    width:100%;
    max-width:740px;
    margin:0 auto;
    font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
.disc-widget-wrap * { margin:0; padding:0; box-sizing:border-box; }

.disc-widget-wrap::before {
    content:'';
    position:absolute;
    inset:-4px;
    border-radius:28px;
    z-index:0;
    background:conic-gradient(from var(--disc-halo,0deg),
        transparent 0%,transparent 25%,
        rgba(167,139,250,0.6) 32%,rgba(128,89,250,0.8) 38%,
        rgba(6,60,255,0.7) 45%,rgba(56,189,248,0.5) 52%,
        rgba(128,89,250,0.7) 58%,transparent 68%,transparent 100%);
    animation:discHaloSpin 5s linear infinite;
}
.disc-widget-wrap::after {
    content:'';
    position:absolute;
    inset:-14px;
    border-radius:34px;
    z-index:-1;
    background:conic-gradient(from var(--disc-halo,0deg),
        transparent 0%,transparent 25%,
        rgba(167,139,250,0.6) 32%,rgba(128,89,250,0.8) 38%,
        rgba(6,60,255,0.7) 45%,rgba(56,189,248,0.5) 52%,
        rgba(128,89,250,0.7) 58%,transparent 68%,transparent 100%);
    filter:blur(18px);
    opacity:0.75;
    animation:discHaloSpin 5s linear infinite, discShimmer 3s ease-in-out infinite;
}

/* ======= INNER CARD ======= */
.disc-widget {
    position:relative;
    z-index:1;
    background:linear-gradient(180deg,#ffffff 0%,#f8f9ff 100%);
    border-radius:24px;
    width:100%;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.12);
}

/* ======= HEADER ======= */
.dw-header {
    padding:20px 28px;
    border-bottom:2px solid #f1f5f9;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.dw-header-left { display:flex; align-items:center; gap:12px; }
.dw-logo {
    width:36px; height:36px; border-radius:10px;
    background:linear-gradient(135deg,#8059FA,#063CFF);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:12px;
}
.dw-title {
    font-size:18px; font-weight:800;
    background:linear-gradient(90deg,#8059FA,#063CFF);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* ======= PROGRESS ======= */
.dw-progress { padding:16px 28px 0; }
.dw-progress-info { display:flex; justify-content:space-between; margin-bottom:8px; }
.dw-progress-text { font-size:13px; font-weight:600; color:#4A5568; }
.dw-progress-pct { font-size:13px; font-weight:700; color:#8059FA; }
.dw-progress-bar { width:100%; height:5px; background:#f1f5f9; border-radius:50px; overflow:hidden; }
.dw-progress-fill {
    height:100%; border-radius:50px; width:0%;
    background:linear-gradient(90deg,#8059FA,#063CFF);
    transition:width 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* ======= BODY ======= */
.dw-body { padding:24px 28px; }

/* ======= DISC DIAGRAM ======= */
.dw-diagram {
    width:100%; max-width:280px; margin:0 auto 20px;
    position:relative; aspect-ratio:1;
}
.dw-diagram svg { width:100%; height:100%; }
.dw-pointer {
    position:absolute;
    width:16px; height:16px; border-radius:50%;
    background:#fff; border:3px solid #1a1a1a;
    box-shadow:0 0 12px rgba(128,89,250,0.6), 0 0 24px rgba(128,89,250,0.3);
    transform:translate(-50%,-50%);
    transition:left 0.6s cubic-bezier(0.34,1.56,0.64,1),
                top 0.6s cubic-bezier(0.34,1.56,0.64,1);
    z-index:10;
    animation:discDotPulse 2s ease-in-out infinite;
}

/* ======= QUESTION ======= */
.dw-q-container { animation:discSlideIn 0.35s ease; }
.dw-q-number {
    font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.5px; color:#8059FA; margin-bottom:6px;
}
.dw-q-text {
    font-size:18px; font-weight:700; color:#1a1a1a;
    line-height:1.4; margin-bottom:20px;
}
.dw-answers { display:flex; flex-direction:column; gap:10px; }
.dw-answer {
    display:flex; align-items:center; gap:14px;
    padding:14px 18px; background:#f8f9ff;
    border:2px solid #e2e8f0; border-radius:12px;
    cursor:pointer; transition:all 0.2s;
}
.dw-answer:hover { background:#ede9fe; border-color:#c4b5fd; }
.dw-answer.sel { background:#ede9fe; border-color:#8059FA; }
.dw-radio {
    width:20px; height:20px; border-radius:50%; border:2px solid #cbd5e0;
    flex-shrink:0; display:flex; align-items:center; justify-content:center;
    transition:all 0.2s;
}
.dw-answer:hover .dw-radio { border-color:#8059FA; }
.dw-answer.sel .dw-radio { border-color:#8059FA; background:#8059FA; }
.dw-radio::after {
    content:''; width:8px; height:8px; border-radius:50%;
    background:#fff; transform:scale(0); transition:transform 0.2s;
}
.dw-answer.sel .dw-radio::after { transform:scale(1); }
.dw-answer-text { font-size:14px; font-weight:500; color:#2D3748; line-height:1.4; }
.dw-answer.sel .dw-answer-text { color:#5B21B6; font-weight:600; }
.dw-answer-key {
    width:24px; height:24px; border-radius:6px; background:#e2e8f0;
    color:#718096; font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; margin-left:auto;
}
.dw-answer.sel .dw-answer-key { background:#8059FA; color:#fff; }

/* ======= FOOTER (nav buttons) ======= */
.dw-footer {
    padding:16px 28px; border-top:2px solid #f1f5f9;
    display:flex; justify-content:space-between; align-items:center;
}
.dw-btn-back {
    display:flex; align-items:center; gap:6px;
    padding:10px 20px; background:none; border:2px solid #e2e8f0;
    border-radius:12px; color:#718096; font-size:14px; font-weight:600;
    cursor:pointer; transition:all 0.2s; font-family:inherit;
}
.dw-btn-back:hover { border-color:#a0aec0; color:#2D3748; }
.dw-btn-back:disabled { opacity:0.3; cursor:not-allowed; }
.dw-btn-next {
    display:flex; align-items:center; gap:8px;
    padding:12px 28px; background:linear-gradient(135deg,#8059FA,#063CFF);
    border:none; border-radius:12px; color:#fff; font-size:15px; font-weight:600;
    cursor:pointer; transition:all 0.3s; box-shadow:0 4px 16px rgba(128,89,250,0.25);
    font-family:inherit;
}
.dw-btn-next:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 24px rgba(128,89,250,0.35); }
.dw-btn-next:disabled { opacity:0.4; cursor:not-allowed; }
.dw-btn-next svg, .dw-btn-back svg { width:16px; height:16px; }

/* ======= INTRO ======= */
.dw-intro { text-align:center; padding:10px 0; }
.dw-intro-icon {
    width:80px; height:80px; margin:0 auto 20px;
    background:linear-gradient(135deg,#8059FA,#063CFF);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(128,89,250,0.35);
}
.dw-intro-icon svg { width:40px; height:40px; color:#fff; }
.dw-intro-icon span {
    color:#fff; font-size:20px; font-weight:900; letter-spacing:1px;
    text-shadow:0 2px 4px rgba(0,0,0,0.2);
}
.dw-intro h2 { font-size:24px; font-weight:900; color:#1a1a1a; margin-bottom:8px; }
.dw-intro > p { font-size:15px; color:#718096; margin-bottom:8px; line-height:1.6; }

.dw-free-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 16px; background:linear-gradient(135deg,#f0fdf4,#dcfce7);
    border:1px solid #bbf7d0; border-radius:50px;
    font-size:13px; font-weight:600; color:#166534;
    margin:12px 0 4px;
}

.dw-live-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 18px; background:linear-gradient(135deg,#fef3f2,#fee2e2);
    border:1px solid #fecaca; border-radius:50px;
    font-size:13px; font-weight:600; color:#991b1b;
    margin:8px 0 4px;
    animation:discPulse 2.5s ease-in-out infinite;
}

.dw-tips { display:flex; flex-direction:column; gap:10px; margin:20px 0; text-align:left; }
.dw-tip {
    display:flex; align-items:flex-start; gap:12px; padding:12px 16px;
    background:#f8f9ff; border-radius:12px; border:1px solid #f1f5f9;
}
.dw-tip-icon {
    width:32px; height:32px; border-radius:50%;
    background:#ede9fe; color:#8059FA;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:16px;
}
.dw-tip-text { font-size:14px; color:#4A5568; }
.dw-tip-text strong { color:#1a1a1a; }

.dw-btn-start-wrap { display:inline-block; position:relative; border-radius:50px; margin-top:12px; }
.dw-btn-start-wrap::before {
    content:''; position:absolute; inset:-3px; border-radius:50px; z-index:0;
    background:conic-gradient(from var(--disc-halo,0deg),
        transparent 0%,transparent 15%,#a78bfa 22%,#8059FA 30%,
        #063CFF 40%,#38bdf8 48%,#8059FA 55%,transparent 65%,transparent 100%);
    animation:discHaloSpin 2.8s linear infinite;
}
.dw-btn-start-wrap::after {
    content:''; position:absolute; inset:-8px; border-radius:50px; z-index:-1;
    background:conic-gradient(from var(--disc-halo,0deg),
        transparent 0%,transparent 15%,#a78bfa 22%,#8059FA 30%,
        #063CFF 40%,#38bdf8 48%,#8059FA 55%,transparent 65%,transparent 100%);
    filter:blur(10px); opacity:0.6;
    animation:discHaloSpin 2.8s linear infinite, discPulse 2s ease-in-out infinite;
}
.dw-btn-start {
    position:relative; z-index:1;
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 36px; background:#0a0a1a;
    color:#fff; font-size:16px; font-weight:700; font-family:inherit;
    border:none; border-radius:50px; cursor:pointer; transition:all 0.3s;
}
.dw-btn-start:hover { background:#1a1a2e; }

/* ======= LOADING ======= */
.dw-loading { text-align:center; padding:60px 0; }
.dw-spinner {
    width:56px; height:56px; margin:0 auto 24px; border-radius:50%;
    border:4px solid #f1f5f9; border-top-color:#8059FA;
    animation:discSpin 0.8s linear infinite;
}
.dw-loading h3 { font-size:18px; font-weight:700; color:#1a1a1a; margin-bottom:8px; }
.dw-loading p { font-size:14px; color:#718096; }

/* ======= RESULTS ======= */
.dw-results { animation:discSlideIn 0.6s ease; }
.dw-results-head { text-align:center; margin-bottom:28px; }
.dw-results-head h2 { font-size:22px; font-weight:900; color:#1a1a1a; margin-bottom:8px; }
.dw-results-head p { font-size:15px; color:#718096; }
.dw-results-head p strong { color:#1a1a1a; }

.dw-profile { padding:24px; border-radius:20px; text-align:center; margin-bottom:24px; }
.dw-profile.D { background:linear-gradient(135deg,#fef2f2,#fee2e2); border:2px solid #fecaca; }
.dw-profile.I { background:linear-gradient(135deg,#fefce8,#fef9c3); border:2px solid #fde68a; }
.dw-profile.S { background:linear-gradient(135deg,#f0fdf4,#dcfce7); border:2px solid #bbf7d0; }
.dw-profile.C { background:linear-gradient(135deg,#eff6ff,#dbeafe); border:2px solid #bfdbfe; }

.dw-profile-badge {
    width:68px; height:68px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 12px; font-size:30px; font-weight:900; color:#fff;
}
.dw-profile.D .dw-profile-badge { background:#C0392B; }
.dw-profile.I .dw-profile-badge { background:#D4A017; }
.dw-profile.S .dw-profile-badge { background:#1A8A5C; }
.dw-profile.C .dw-profile-badge { background:#2C3E8C; }

.dw-profile-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
.dw-profile.D .dw-profile-label { color:#C0392B; }
.dw-profile.I .dw-profile-label { color:#D4A017; }
.dw-profile.S .dw-profile-label { color:#1A8A5C; }
.dw-profile.C .dw-profile-label { color:#2C3E8C; }

.dw-profile-name { font-size:26px; font-weight:900; color:#1a1a1a; margin-bottom:10px; }
.dw-profile-desc { font-size:14px; color:#4A5568; line-height:1.7; }

.dw-scores { margin-bottom:24px; }
.dw-scores-title { font-size:16px; font-weight:700; color:#1a1a1a; margin-bottom:14px; }
.dw-score-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.dw-score-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.dw-score-dot.D { background:#C0392B; }
.dw-score-dot.I { background:#D4A017; }
.dw-score-dot.S { background:#1A8A5C; }
.dw-score-dot.C { background:#2C3E8C; }
.dw-score-name { font-size:14px; font-weight:600; color:#2D3748; min-width:95px; }
.dw-score-bar { flex:1; height:8px; background:#f1f5f9; border-radius:50px; overflow:hidden; }
.dw-score-fill { height:100%; border-radius:50px; transition:width 1s cubic-bezier(0.4,0,0.2,1); width:0; }
.dw-score-fill.D { background:#C0392B; }
.dw-score-fill.I { background:#D4A017; }
.dw-score-fill.S { background:#1A8A5C; }
.dw-score-fill.C { background:#2C3E8C; }
.dw-score-pct { font-size:14px; font-weight:700; min-width:40px; text-align:right; }
.dw-score-pct.D { color:#C0392B; }
.dw-score-pct.I { color:#D4A017; }
.dw-score-pct.S { color:#1A8A5C; }
.dw-score-pct.C { color:#2C3E8C; }

.dw-traits { margin-bottom:24px; }
.dw-traits-title { font-size:16px; font-weight:700; color:#1a1a1a; margin-bottom:10px; }
.dw-traits-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dw-trait {
    display:flex; align-items:center; gap:8px; padding:10px 14px;
    background:#f8f9ff; border-radius:10px; font-size:13px; color:#2D3748;
}
.dw-trait-ok { color:#8059FA; font-weight:700; }

.dw-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.dw-btn-redo {
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 24px; border:2px solid #e2e8f0; background:#fff;
    border-radius:12px; font-size:14px; font-weight:600; color:#4A5568;
    cursor:pointer; transition:all 0.2s; font-family:inherit;
}
.dw-btn-redo:hover { border-color:#a0aec0; color:#1a1a1a; }
.dw-btn-copy {
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 24px; background:linear-gradient(135deg,#8059FA,#063CFF);
    border:none; border-radius:12px; font-size:14px; font-weight:600; color:#fff;
    cursor:pointer; transition:all 0.3s; box-shadow:0 4px 16px rgba(128,89,250,0.25);
    font-family:inherit;
}
.dw-btn-copy:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(128,89,250,0.35); }

/* ======= RESPONSIVE ======= */
@media (max-width:640px) {
    .disc-widget { border-radius:18px; }
    .disc-widget-wrap { border-radius:22px; }
    .disc-widget-wrap::before { border-radius:22px; }
    .disc-widget-wrap::after { border-radius:26px; }
    .dw-body { padding:18px; }
    .dw-header, .dw-footer { padding-left:18px; padding-right:18px; }
    .dw-q-text { font-size:16px; }
    .dw-answer-key { display:none; }
    .dw-traits-grid { grid-template-columns:1fr; }
    .dw-diagram { max-width:220px; }
}

@media (prefers-reduced-motion:reduce) {
    .disc-widget-wrap *, .disc-widget-wrap *::before, .disc-widget-wrap *::after {
        animation-duration:0.01ms !important;
        transition-duration:0.01ms !important;
    }
}