/* EHB Diagnostic Tool Styles */
#ehb-diagnostic-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 40px 0;
}

#ehb-diagnostic-container * {
    box-sizing: border-box;
}

.ehb-container {
    background: #fefefe;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 40px;
}

.ehb-header {
    text-align: center;
    margin-bottom: 30px;
}

.ehb-header h1 {
    color: #2d2d2d;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.ehb-header p {
    color: #666;
    font-size: 16px;
    margin: 0;
    line-height: 1.5;
}

.ehb-disclaimer {
    background: #fff9e6;
    border-left: 4px solid #FF5C39;
    padding: 20px 25px;
    margin-bottom: 30px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.7;
}

.ehb-disclaimer h3 {
    color: #2d2d2d;
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 700;
}

.ehb-disclaimer p {
    color: #333;
    margin: 0 0 12px 0;
    line-height: 1.7;
}

.ehb-disclaimer p:last-child {
    margin-bottom: 0;
}

.ehb-disclaimer strong {
    color: #FF5C39;
    font-weight: 700;
}

.ehb-progress-bar {
    width: 100%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 10px;
    margin-bottom: 30px;
    overflow: hidden;
}

.ehb-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FF5C39, #FF7F66);
    transition: width 0.3s ease;
    border-radius: 10px;
    width: 0;
}

.ehb-question-card {
    background: #f8fafa;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 20px;
    border-left: 4px solid #FF5C39;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.ehb-question-card h2 {
    color: #2d2d2d;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.4;
}

.ehb-question-card .ehb-context {
    color: #555;
    font-size: 14px;
    margin-bottom: 25px;
    padding: 15px 20px;
    background: #fefefe;
    border-radius: 8px;
    line-height: 1.6;
    border: 1px solid #e8e8e8;
}

.ehb-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ehb-option-btn {
    background: #fefefe;
    border: 2px solid #e8e8e8;
    padding: 18px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color: #2d2d2d;
    line-height: 1.5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ehb-option-btn:hover {
    border-color: #FF5C39;
    background: #fff5f3;
    color: #2d2d2d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 92, 57, 0.15);
}

.ehb-result-card {
    background: linear-gradient(135deg, #3d3d3d, #2d2d2d);
    color: #fefefe;
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.ehb-result-card.ehb-urgent {
    background: linear-gradient(135deg, #fff0ed, #ffe8e3);
    color: #2d2d2d;
}

.ehb-result-card.ehb-warning {
    background: linear-gradient(135deg, #fff5f0, #ffede5);
    color: #2d2d2d;
}

.ehb-result-card.ehb-success {
    background: linear-gradient(135deg, #f0f9f9, #e8f5f5);
    color: #2d2d2d;
}

.ehb-result-card h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.ehb-result-card .ehb-icon {
    font-size: 36px;
    margin-bottom: 20px;
    display: block;
}

.ehb-result-card p {
    margin: 0;
}

.ehb-result-card .ehb-solution {
    background: rgba(255, 255, 255, 0.5);
    padding: 25px;
    border-radius: 10px;
    margin: 25px 0;
    text-align: left;
    backdrop-filter: blur(10px);
}

.ehb-result-card .ehb-solution h3 {
    margin: 0 0 15px 0;
    font-size: 20px;
    font-weight: 700;
}

.ehb-result-card .ehb-solution ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.ehb-result-card .ehb-solution li {
    margin-bottom: 12px;
    padding-left: 30px;
    position: relative;
    line-height: 1.6;
}

.ehb-result-card .ehb-solution li:last-child {
    margin-bottom: 0;
}

.ehb-result-card .ehb-solution li:before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 18px;
}

.ehb-contact-box {
    background: rgba(255, 255, 255, 0.5);
    padding: 20px 25px;
    border-radius: 10px;
    margin-top: 25px;
    text-align: left;
    backdrop-filter: blur(10px);
}

.ehb-contact-box h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 700;
}

.ehb-contact-box p {
    margin: 0 0 20px 0;
    line-height: 1.6;
}

.ehb-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.ehb-cta-primary {
    background: #FF5C39;
    color: #fefefe;
    border: 2px solid #FF5C39;
    padding: 14px 25px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    display: block;
}

.ehb-cta-primary:hover {
    background: #2d2d2d;
    border-color: #2d2d2d;
    color: #fefefe;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45, 45, 45, 0.3);
}

.ehb-cta-secondary {
    color: #2d2d2d;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    padding: 8px;
    transition: all 0.3s ease;
    display: block;
}

.ehb-cta-secondary:hover {
    color: #FF5C39;
    text-decoration: underline;
}

button.ehb-btn-restart,
.ehb-result-card .ehb-btn-restart {
    background: none ;
    color: #666 ;
    border: none ;
    padding: 15px 0 ;
    font-size: 14px ;
    font-weight: 500 ;
    cursor: pointer ;
    margin-top: 25px ;
    transition: color 0.2s ease ;
    display: inline-block ;
    border-radius: 0 ;
    box-shadow: none ;
    transform: none ;
}

button.ehb-btn-restart:hover,
.ehb-result-card .ehb-btn-restart:hover {
    background: none ;
    color: #2d2d2d ;
    border: none ;
    transform: none ;
    box-shadow: none ;
}

.ehb-back-btn {
    background: #f8fafa;
    color: #2d2d2d;
    border: 2px solid #e8e8e8;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.ehb-back-btn:hover {
    background: #FF5C39;
    color: #fefefe;
    border-color: #FF5C39;
}

.ehb-container .ehb-footer,
div.ehb-footer {
    text-align: center ;
    margin: 50px auto 0 ;
    padding: 20px 0 0 ;
    border-top: 1px solid #e8e8e8 ;
    width: 100% ;
    display: block ;
}

.ehb-container .ehb-footer p,
div.ehb-footer p {
    color: #999 ;
    font-size: 10px ;
    line-height: 1.5 ;
    margin: 0 auto ;
    padding: 0 ;
    text-align: center ;
    display: block ;
    width: 100% ;
    font-weight: 400 ;
}

/* Styles pour la notice explicative */
.ehb-notice {
    background: #f8fafa;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 4px solid #FF5C39;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.ehb-notice h3 {
    color: #2d2d2d;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.ehb-notice-section {
    margin-bottom: 25px;
}

.ehb-notice-section:last-child {
    margin-bottom: 0;
}

.ehb-notice-section h4 {
    color: #2d2d2d;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.ehb-steps {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ehb-step {
    flex: 1;
    min-width: 150px;
    text-align: center;
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ehb-step-icon {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

.ehb-step-text {
    color: #2d2d2d;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.ehb-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ehb-list li {
    padding: 8px 0 8px 30px;
    position: relative;
    color: #2d2d2d;
    font-size: 14px;
    line-height: 1.6;
}

.ehb-list.negative li:before {
    content: "❌";
    position: absolute;
    left: 0;
    font-size: 16px;
}

.ehb-list.positive li:before {
    content: "✅";
    position: absolute;
    left: 0;
    font-size: 16px;
}

@media (max-width: 768px) {
    .ehb-container {
        padding: 20px;
        border-radius: 10px;
    }
    
    .ehb-header h1 {
        font-size: 24px;
    }

    .ehb-question-card {
        padding: 20px;
    }
    
    .ehb-question-card h2 {
        font-size: 18px;
    }
    
    .ehb-option-btn {
        padding: 15px 18px;
        font-size: 14px;
    }
    
    .ehb-result-card .ehb-icon {
        font-size: 32px;
    }
    
    .ehb-result-card {
        padding: 30px 20px;
    }
    
    .ehb-result-card h2 {
        font-size: 24px;
    }
    
    .ehb-cta-primary {
        font-size: 14px;
        padding: 12px 20px;
    }
    
    .ehb-cta-secondary {
        font-size: 13px;
    }
    
    .ehb-notice {
        padding: 20px;
    }
    
    .ehb-notice h3 {
        font-size: 16px;
    }
    
    .ehb-notice-section h4 {
        font-size: 15px;
    }
    
    .ehb-steps {
        flex-direction: column;
        gap: 10px;
    }
    
    .ehb-step {
        min-width: auto;
    }
    
    .ehb-step-icon {
        font-size: 28px;
    }
    
    .ehb-step-text {
        font-size: 12px;
    }
    
    .ehb-list li {
        font-size: 13px;
        padding: 6px 0 6px 28px;
    }
}