/* Classes CSS pour remplacer tous les styles inline et éliminer unsafe-inline */

/* Classes utilitaires de display */
.hidden { display: none !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.flex { display: flex !important; }

/* Classes pour signup.html et login.html */
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-primary { background-color: var(--bg-primary) !important; }
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-error { color: #ef4444 !important; }

/* Classes pour les labels et textes */
.label-primary {
    color: var(--text-primary) !important;
}

/* Signup feedback */
.signup-feedback {
    display: none;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
}
.signup-feedback.show {
    display: block !important;
}

/* Error messages */
.error-message {
    color: #ef4444;
    font-size: 0.875rem;
    display: none;
}
.error-message.show {
    display: block !important;
}

/* Login box shadow */
.auth-card {
    background-color: var(--bg-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Remember me text */
.remember-text {
    color: var(--text-secondary);
}

/* Index page final note */
.final-note {
    margin-top: 1.5rem;
    font-style: italic;
}

/* Submit button pour evaluate-unified.html */
#submit-button {
    display: none;
}
#submit-button.show {
    display: inline-block !important;
}

/* Benefits section pour verify.html */
#benefits-section {
    display: none;
}
#benefits-section.show {
    display: block !important;
}

/* Classes pour mentions.html */
.page-coming-soon {
    color: var(--text-secondary);
}

/* Classes pour types pages */
.type-intro {
    margin-bottom: 1.5rem;
    padding: 1rem;
}

.type-description {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.strength-list,
.weakness-list {
    list-style: none;
    padding: 0;
}

.strength-item,
.weakness-item {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.strength-item:before {
    content: "✅";
    position: absolute;
    left: 0;
}

.weakness-item:before {
    content: "❌";
    position: absolute;
    left: 0;
}

/* Utilités générales */
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }

.p-4 { padding: 1rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }

.rounded { border-radius: 0.25rem !important; }
.rounded-md { border-radius: 0.375rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-xl { font-size: 1.25rem !important; }
.text-2xl { font-size: 1.5rem !important; }

.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }

.italic { font-style: italic !important; }

/* Shadow utilities */
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }

/* Min height utilities */
.min-h-screen { min-height: 100vh !important; }

/* Max width utilities */
.max-w-md { max-width: 28rem !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-xl { max-width: 36rem !important; }
.max-w-2xl { max-width: 42rem !important; }

/* Margin auto */
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}