/* ===============================================
   ATYPIKIA - Feuille de Style Principale
   Design System Apple-Inspired + Pages SEO + Responsive 2024
   =============================================== */

/* ===============================================
   VARIABLES CSS RESPONSIVE MODERNES - Base 1920px
   =============================================== */
:root {
    /* Breakpoints Standards 2024 */
    --mobile: 320px;
    --tablet: 768px;
    --laptop: 1024px;
    --desktop: 1920px;
    --desktop-l: 2560px;

    /* Espacements Responsives */
    --section-padding: clamp(2rem, 4vw, 4rem);
    --content-width: min(90vw, 75ch);
    --content-width-wide: min(85vw, 1200px);

    /* Typographie Responsive */
    --font-size-xl: clamp(2.5rem, 3.75vw, 3.5rem);
    --font-size-lg: clamp(2rem, 3vw, 2.5rem);
    --font-size-md: clamp(1.25rem, 2vw, 1.5rem);
    --font-size-sm: clamp(1rem, 1.2vw, 1.125rem);
}

/* ========================================
   BLOG LATEST SECTION
======================================== */

.blog-latest-modern {
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.05) 0%,
            rgba(168, 85, 247, 0.05) 100%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Supprimer les marges du header dans la section blog */
.blog-latest-modern .section-header-modern {
    margin-bottom: 1rem;
}

.blog-latest-modern .container {
    padding: 0 1rem;
}

.blog-latest-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.03) 0%, transparent 70%);
    animation: rotate 30s linear infinite;
    pointer-events: none;
}

.blog-carousel-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
    position: relative;
    z-index: 2;
}

@media (max-width: 1024px) {
    .blog-carousel-modern {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2rem 0;
    }
}

.blog-card-modern {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.blog-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .blog-card-modern {
    background: rgba(17, 24, 39, 0.8);
    border-color: rgba(75, 85, 99, 0.3);
}

.blog-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card-modern:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.8) 0%,
            rgba(168, 85, 247, 0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blog-card-modern:hover .blog-card-overlay {
    opacity: 1;
}

.blog-read-btn {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-600);
    font-size: 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-read-btn:hover {
    background: white;
    transform: scale(1.1);
}

.blog-card-content {
    padding: 1.5rem;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.blog-category {
    background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-date {
    color: var(--gray-500);
    font-size: 0.875rem;
    font-weight: 500;
}

[data-theme="dark"] .blog-date {
    color: var(--gray-400);
}

.blog-card-title {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.blog-card-title a {
    color: var(--gray-900);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-card-title a:hover {
    color: var(--blue-600);
}

[data-theme="dark"] .blog-card-title a {
    color: var(--gray-100);
}

[data-theme="dark"] .blog-card-title a:hover {
    color: var(--blue-400);
}

.blog-card-excerpt {
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

[data-theme="dark"] .blog-card-excerpt {
    color: var(--gray-300);
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--blue-600);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.blog-card-link:hover {
    color: var(--blue-700);
    gap: 0.75rem;
}

[data-theme="dark"] .blog-card-link {
    color: var(--blue-400);
}

[data-theme="dark"] .blog-card-link:hover {
    color: var(--blue-300);
}

.blog-card-link i {
    transition: transform 0.3s ease;
}

.blog-card-link:hover i {
    transform: translateX(2px);
}

.blog-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--gray-500);
}

.blog-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.blog-cta-center {
    text-align: center;
    margin-top: 3rem;
}

.pulse-blog {
    background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* ========================================
   ALPHA VERSION DISCLAIMER
======================================== */

/* Disclaimer dans le hero */
.alpha-disclaimer {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(251, 146, 60, 0.15);
    border: 1px solid rgba(251, 146, 60, 0.3);
    border-radius: 100px;
    padding: 0.5rem 1.25rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    font-size: 0.875rem;
    animation: pulseGlow 3s ease-in-out infinite;
}

[data-theme="dark"] .alpha-disclaimer {
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.2);
}

.alpha-disclaimer .disclaimer-icon {
    color: #fb923c;
    font-size: 1.125rem;
    animation: rotate 4s linear infinite;
}

.alpha-disclaimer .disclaimer-text {
    color: var(--gray-700);
    font-weight: 500;
}

[data-theme="dark"] .alpha-disclaimer .disclaimer-text {
    color: var(--gray-300);
}

.alpha-disclaimer strong {
    color: #fb923c;
    font-weight: 700;
}

/* Popup Alpha */
.alpha-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.alpha-popup {
    background: white;
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: popupIn 0.3s ease-out;
}

[data-theme="dark"] .alpha-popup {
    background: var(--gray-800);
}

@keyframes popupIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.popup-header {
    background: linear-gradient(135deg, #fb923c, #f97316);
    color: white;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.popup-icon {
    font-size: 2rem;
    animation: rotate 4s linear infinite;
}

.popup-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.popup-content {
    padding: 2rem;
}

.popup-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 1rem;
}

[data-theme="dark"] .popup-subtitle {
    color: var(--gray-200);
}

.popup-content p {
    color: var(--gray-600);
    margin-bottom: 1rem;
}

[data-theme="dark"] .popup-content p {
    color: var(--gray-400);
}

.popup-content ul {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.popup-content li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--gray-50);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

[data-theme="dark"] .popup-content li {
    background: var(--gray-700);
    color: var(--gray-300);
}

.popup-content li i {
    color: #fb923c;
    font-size: 1.125rem;
}

.popup-beta-info {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    padding: 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.popup-beta-info i {
    font-size: 1.5rem;
}

.popup-beta-info p {
    margin: 0;
    color: white;
}

.popup-btn {
    background: linear-gradient(135deg, #fb923c, #f97316);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
}

.popup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(251, 146, 60, 0.3);
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(251, 146, 60, 0.2);
    }

    50% {
        box-shadow: 0 0 30px rgba(251, 146, 60, 0.4);
    }
}

/* ========================================
   EMAIL SECTION DANS ANALYZE
======================================== */

.email-section {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .email-section {
    background: linear-gradient(135deg, #374151, #4b5563);
    border-color: #6b7280;
}

.email-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #10b981, #8b5cf6);
    border-radius: 20px 20px 0 0;
}

.email-header {
    text-align: center;
    margin-bottom: 2rem;
}

.email-header h3 {
    color: var(--gray-800);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

[data-theme="dark"] .email-header h3 {
    color: var(--gray-200);
}

.email-header h3 i {
    color: #3b82f6;
    font-size: 1.25rem;
}

.email-header p {
    color: var(--gray-600);
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

[data-theme="dark"] .email-header p {
    color: var(--gray-400);
}

.email-form {
    max-width: 600px;
    margin: 0 auto;
}

.email-input-group {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.email-field label {
    display: block;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .email-field label {
    color: var(--gray-300);
}

.email-field input[type="email"] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: white;
}

[data-theme="dark"] .email-field input[type="email"] {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-200);
}

.email-field input[type="email"]:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.email-options {
    display: grid;
    gap: 1rem;
}

.option-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

[data-theme="dark"] .option-group {
    background: var(--gray-700);
    border-color: var(--gray-600);
}

.option-group:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.option-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.option-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    margin: 0;
    flex: 1;
}

[data-theme="dark"] .option-group label {
    color: var(--gray-300);
}

.option-group label i {
    color: #3b82f6;
    font-size: 1.125rem;
}

.email-send-btn {
    width: 100%;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.email-send-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.email-send-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.email-result {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}

.email-result.success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #10b981;
}

[data-theme="dark"] .email-result.success {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
}

.email-result.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

[data-theme="dark"] .email-result.error {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}

/* Responsive */
@media (min-width: 768px) {
    .email-options {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* ========================================
   PAGES SEO SPÉCIALISÉES
======================================== */

/* Landing pages TDAH, TSA, Bipolarité */
.tdah-landing-page,
.tsa-gratuit-page,
.test-bipolarite {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

[data-theme="dark"] .tdah-landing-page,
[data-theme="dark"] .tsa-gratuit-page,
[data-theme="dark"] .test-bipolarite {
    background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
}

/* Hero sections pour pages SEO */
.hero-tdah {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    padding: 6rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.hero-tsa-gratuit {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 6rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.hero-tdah::before,
.hero-tsa-gratuit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
}

.seo-page-container .hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.seo-page-container .hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.highlight {
    background: linear-gradient(45deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.6;
}

.hero-stats,
.hero-features {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.stat-item,
.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 0.75rem;
    backdrop-filter: blur(10px);
    text-align: center;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.875rem;
    opacity: 0.8;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Grilles et cartes SEO */
.info-grid,
.tests-grid,
.faq-grid {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

.info-grid,
.tests-grid {
    grid-template-columns: repeat(3, 1fr);
}

.tests-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 2rem;
}

@media (max-width: 968px) {
    .tests-grid-2col {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.faq-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.info-card,
.test-card,
.faq-item {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

[data-theme="dark"] .info-card,
[data-theme="dark"] .test-card,
[data-theme="dark"] .faq-item {
    background: var(--gray-800);
    color: white;
}

.info-card:hover,
.test-card:hover {
    transform: translateY(-4px);
}

.card-icon,
.test-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Icônes spécifiques par page */
.tsa-gratuit-page .card-icon,
.tsa-gratuit-page .test-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.test-bipolarite .card-icon,
.test-bipolarite .test-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Styles spécifiques TSA */
.tsa-gratuit-page .hero-features .feature-item i {
    color: #fbbf24;
}

/* Animation pulse pour CTA */
.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.test-card.featured {
    border: 2px solid #3b82f6;
    position: relative;
}

.test-badge {
    position: absolute;
    top: -10px;
    right: 1rem;
    background: #10b981;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.test-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}

[data-theme="dark"] .detail-item {
    color: #9ca3af;
}

/* Sections SEO */
.info-section,
.benefits-section,
.tests-section,
.faq-section {
    padding: 4rem 0;
}

.benefits-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-top: 2rem;
}

.benefit-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.benefit-item i {
    color: #3b82f6;
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

/* CTA finale */
.cta-section {
    background: linear-gradient(135deg, #1e293b 0%, #374151 100%);
    color: white;
    padding: 4rem 0;
    text-align: center;
}

.trust-indicators {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.8;
}

/* Prévisualisations */
.test-preview,
.report-preview {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

[data-theme="dark"] .test-preview,
[data-theme="dark"] .report-preview {
    background: var(--gray-700);
    color: white;
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #3b82f6;
}

.options-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option {
    padding: 0.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.option.active {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1e40af;
}

[data-theme="dark"] .option {
    border-color: var(--gray-600);
    background: var(--gray-800);
    color: white;
}

/* Responsive pages SEO */
@media (max-width: 1024px) {
    .seo-page-container .hero-title {
        font-size: 2.5rem;
    }

    .hero-stats,
    .hero-features {
        flex-direction: column;
        gap: 1rem;
    }

    .benefits-content {
        grid-template-columns: 1fr;
    }

    .tests-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .trust-indicators {
        flex-direction: column;
        gap: 1rem;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* === CHARTE GRAPHIQUE ATYPIKIA - LIGHT MODE === */

    /* Couleurs principales */
    --white: #FFFFFF;
    --cream: #FFF8F0;
    --black: #111827;
    --gray-secondary: #6B7280;
    --blue-roi: #1E40AF;

    /* Interface - Light Mode */
    --primary: #1E40AF;
    /* Bleu roi pour interface */
    --secondary: #6B7280;
    /* Gris secondaire */
    --accent: #1E40AF;
    /* Bleu roi pour accents */
    --danger: #EF4444;
    /* Rouge corail */
    --warning: #F97316;
    /* Orange TDAH */
    --success: #10B981;
    /* Vert HPI */

    /* Couleurs officielles des troubles (LIGHT MODE) */
    --tdah: #F97316;
    /* Orange TDAH adulte */
    --tdah-adulte: #F97316;
    /* Orange TDAH adulte */
    --tdah-enfant: #FB923C;
    /* Orange TDAH enfant (plus clair) */
    --tsa: #1E40AF;
    /* Bleu roi TSA */
    --hpi: #10B981;
    /* Vert émeraude HPI */
    --bipolaire: #F59E0B;
    /* Jaune doré bipolarité */
    --schizophrenie: #9333EA;
    /* Mauve schizophrénie */
    --psychopathie: #6B7280;
    /* Gris psychopathie */

    /* Couleurs complémentaires "Pourquoi choisir" */
    --rose: #EC4899;
    /* Rose bienveillance */
    --turquoise: #06B6D4;
    /* Turquoise expertise */
    --rouge-corail: #EF4444;
    /* Rouge résultats */
    --indigo: #6366F1;
    /* Indigo confidentialité */
    --teal: #14B8A6;
    /* Teal accessibilité */
    --lime: #84CC16;
    /* Lime 6ème icône */

    /* Neutres */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Anciens noms pour compatibilité */
    --blue: #1E40AF;
    --green: #10B981;
    --orange: #F97316;
    --pink: #EC4899;
    --purple: #9333EA;
    --red: #EF4444;
    --yellow: #F59E0B;

    /* Spacing (Apple 8pt grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Typography - MONTSERRAT UNIQUEMENT */
    --font-primary: 'Montserrat', sans-serif;
    --font-system: 'Montserrat', sans-serif;
    --font-mono: 'Montserrat', monospace;

    /* Border Radius (Apple-style) */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;

    /* Shadows (Apple-style) */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Gradients - CHARTE GRAPHIQUE */
    --gradient-primary: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
    /* Bleu roi */
    --gradient-tdah: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
    /* TDAH Orange */
    --gradient-tsa: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
    /* TSA Bleu roi */
    --gradient-hpi: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    /* HPI Vert */
    --gradient-bipolaire: linear-gradient(135deg, #F59E0B 0%, #FCD34D 100%);
    /* Bipolarité jaune */
    --gradient-schizophrenie: linear-gradient(135deg, #9333EA 0%, #A855F7 100%);
    /* Schizophrénie mauve */
    --gradient-psychopathie: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%);
    /* Psychopathie gris */
    --gradient-sunset: linear-gradient(135deg, #F97316 0%, #EC4899 100%);
    /* Sunset TDAH-Rose */
}

/* Effet gradient de texte animé */
.text-gradient {
    background: linear-gradient(45deg, #60a5fa, #a78bfa, #f472b6);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
    text-shadow: none;
    position: relative;
}

/* Effet d'ombre pour le texte gradient */
.text-gradient {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* ===============================================
   HERO SECTION MODERNISÉ
   =============================================== */

.hero-modern {
    position: relative;
    min-height: 100vh;
    margin-top: -80px;
    /* Offset pour commencer sous le header fixe */
    padding-top: 80px;
    /* Padding pour le contenu */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 50%, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(167, 139, 250, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(244, 114, 182, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* CORRECTION DÉCALAGE HEADER GLOBAL */
body {
    margin: 0;
    padding: 0;
}

/* Toutes les sections principales doivent commencer sous le header */
.main-content {
    margin-top: 0;
    padding-top: 0;
}

/* Pour les pages sans hero full screen */
.page-content-start {
    margin-top: 80px;
    /* Hauteur du header fixe */
    padding-top: 0;
}

/* Sections qui ne sont pas hero doivent avoir le bon espacement */
section:not(.hero-modern):not(.about-hero-modern):not(.hero-modern-pro):first-of-type {
    margin-top: 80px;
}

/* Stats modernes pour hero */
.hero-stats-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    flex-wrap: wrap;
}

.stat-item-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-number-modern {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label-modern {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-divider {
    width: 1px;
    height: 2rem;
    background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 1024px) {
    .hero-stats-modern {
        gap: 1rem;
        padding: 1rem;
    }

    .stat-divider {
        display: none;
    }

    .stat-number-modern {
        font-size: 1.5rem;
    }
}

/* Particules animées */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.particle {
    position: absolute;
    background: linear-gradient(45deg, #60a5fa, #a78bfa);
    border-radius: 50%;
    width: var(--size);
    height: var(--size);
    opacity: 0.6;
    animation: float var(--duration) ease-in-out infinite var(--delay);
}

.particle:nth-child(1) {
    top: 20%;
    left: 10%;
}

.particle:nth-child(2) {
    top: 60%;
    left: 20%;
}

.particle:nth-child(3) {
    top: 30%;
    left: 70%;
}

.particle:nth-child(4) {
    top: 70%;
    left: 80%;
}

.particle:nth-child(5) {
    top: 10%;
    left: 50%;
}

.particle:nth-child(6) {
    top: 80%;
    left: 60%;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 1;
    }
}

/* Formes géométriques flottantes */
.hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.floating-shape {
    position: absolute;
    opacity: 0.05;
    animation: floatShape 12s ease-in-out infinite;
}

.shape-1 {
    top: 15%;
    left: 15%;
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, #60a5fa, #a78bfa);
    border-radius: 20px;
    animation-delay: 0s;
}

.shape-2 {
    top: 60%;
    right: 20%;
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, #f472b6, #ec4899);
    border-radius: 50%;
    animation-delay: 4s;
}

.shape-3 {
    bottom: 20%;
    left: 25%;
    width: 120px;
    height: 60px;
    background: linear-gradient(45deg, #a78bfa, #f472b6);
    border-radius: 60px;
    animation-delay: 8s;
}

@keyframes floatShape {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }

    33% {
        transform: translateY(-30px) rotate(120deg) scale(1.1);
    }

    66% {
        transform: translateY(15px) rotate(240deg) scale(0.9);
    }
}

/* Contenu du hero modernisé */
.hero-content-modern {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Badge moderne avec glassmorphism */
.hero-badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.hero-badge-modern:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(45deg, #60a5fa, #a78bfa);
    border-radius: 50%;
    color: white;
    font-size: 12px;
}

.badge-text {
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-700);
    letter-spacing: 0.025em;
}

/* Titre modernisé */
.hero-title-modern {
    font-size: clamp(3rem, 4.5vw, 5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--gray-900);
    letter-spacing: -0.02em;
    font-family: 'Montserrat', sans-serif;
}

.title-line {
    display: block;
    margin-bottom: 0.5rem;
}

.title-line:last-child {
    margin-bottom: 0;
}

/* Style blog.php pour toutes les premières lignes de titre */
.hero-title-modern .title-line:first-child {
    font-size: clamp(1.75rem, 2.6vw, 3rem) !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
}

/* Sous-titre modernisé */
.hero-subtitle-modern {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.6;
    color: var(--gray-600);
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

/* CTA modernisé avec effet shimmer */
.hero-cta-container {
    margin-bottom: 3rem;
}

.hero-cta-modern {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
    box-shadow:
        0 10px 40px rgba(30, 64, 175, 0.3),
        0 4px 20px rgba(59, 130, 246, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-cta-modern:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 20px 60px rgba(30, 64, 175, 0.4),
        0 8px 30px rgba(59, 130, 246, 0.3);
}

.cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.hero-cta-modern:hover .cta-icon {
    transform: rotate(90deg);
}

.cta-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: left 0.5s ease;
}

.hero-cta-modern:hover .cta-shimmer {
    left: 100%;
}

/* Indicateur de scroll moderne */
.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.scroll-indicator:hover {
    opacity: 1;
}

.scroll-mouse {
    width: 24px;
    height: 40px;
    border: 2px solid var(--gray-400);
    border-radius: 12px;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.scroll-wheel {
    width: 3px;
    height: 8px;
    background: var(--gray-400);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 2s infinite;
}

@keyframes scrollWheel {
    0% {
        top: 8px;
        opacity: 1;
    }

    100% {
        top: 20px;
        opacity: 0;
    }
}

.scroll-text {
    font-size: 0.875rem;
    color: var(--gray-500);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Animations d'apparition */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

/* Responsive design */
@media (max-width: 1024px) {
    .hero-modern {
        min-height: 90vh;
        padding: 2rem 0;
    }

    .hero-content-modern {
        padding: 0 1rem;
    }

    .hero-badge-modern {
        padding: 0.5rem 1rem;
        margin-bottom: 1.5rem;
    }

    .badge-text {
        font-size: 12px;
    }

    .hero-title-modern {
        margin-bottom: 1rem;
    }

    .hero-subtitle-modern {
        margin-bottom: 2rem;
    }

    .hero-cta-modern {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .particle {
        display: none;
        /* Masquer les particules sur mobile pour les performances */
    }

    .floating-shape {
        display: none;
        /* Masquer les formes sur mobile */
    }
}

/* ===============================================
   FEATURES SECTION MODERNISÉE
   =============================================== */

.features-modern {
    padding: 6rem 0;
    background:
        radial-gradient(circle at 70% 20%, rgba(96, 165, 250, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 30% 80%, rgba(244, 114, 182, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.features-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(167, 139, 250, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(52, 211, 153, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* Header modernisé */
.section-header-modern {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
}

.section-badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-700);
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: linear-gradient(45deg, #60a5fa, #a78bfa);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.section-title-modern {
    font-size: clamp(2.5rem, 3.75vw, 3.5rem);
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.section-description-modern {
    font-size: 1.125rem;
    color: var(--gray-600);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grille modernisée */
.features-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 2;
}

/* Cards avec effet 3D et glassmorphism */
.feature-card-modern {
    position: relative;
    perspective: 1000px;
    height: 100%;
}

.feature-card-inner {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 2rem;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    overflow: hidden;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.1),
        0 4px 20px rgba(0, 0, 0, 0.06);
}

.feature-card-modern:hover .feature-card-inner {
    transform: translateY(-8px) rotateX(5deg);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.15),
        0 10px 40px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Icônes modernisées avec glow */
.feature-icon-modern {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--white);
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.feature-icon-modern::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
}

.feature-icon--rose {
    background: linear-gradient(135deg, var(--rose) 0%, #f472b6 100%);
}

.feature-icon--turquoise {
    background: linear-gradient(135deg, var(--turquoise) 0%, #22d3ee 100%);
}

.feature-icon--indigo {
    background: linear-gradient(135deg, var(--indigo) 0%, #8b5cf6 100%);
}

.feature-icon--rouge-corail {
    background: linear-gradient(135deg, var(--rouge-corail) 0%, #f87171 100%);
}

.feature-icon--teal {
    background: linear-gradient(135deg, var(--teal) 0%, #2dd4bf 100%);
}

.feature-icon--lime {
    background: linear-gradient(135deg, var(--lime) 0%, #a3e635 100%);
}

.icon-glow {
    position: absolute;
    inset: -10px;
    background: inherit;
    border-radius: 26px;
    filter: blur(15px);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.feature-card-modern:hover .icon-glow {
    opacity: 0.3;
}

.feature-card-modern:hover .feature-icon-modern {
    transform: scale(1.1) rotateY(10deg);
}

/* Contenu */
.feature-content {
    position: relative;
    z-index: 2;
}

.feature-title-modern {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.feature-description-modern {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Décoration subtile */
.feature-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, rgba(96, 165, 250, 0.05), rgba(244, 114, 182, 0.05));
    border-radius: 50%;
    transform: translate(30px, 30px);
    transition: all 0.3s ease;
}

.feature-card-modern:hover .feature-decoration {
    transform: translate(20px, 20px) scale(1.2);
    opacity: 0.8;
}

/* Effet tilt personnalisé pour les navigateurs qui ne supportent pas CSS 3D */
.feature-card-modern[data-tilt]:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(2deg);
}

/* Responsive design */
@media (max-width: 1024px) {
    .features-modern {
        padding: 4rem 0;
    }

    .features-grid-modern {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }

    .feature-card-inner {
        padding: 1.5rem;
    }

    .feature-card-modern:hover .feature-card-inner {
        transform: translateY(-4px);
    }

    .feature-card-modern[data-tilt]:hover {
        transform: none;
    }

    .section-header-modern {
        margin-bottom: 3rem;
    }
}

@media (max-width: 1024px) {
    .features-grid-modern {
        padding: 0 0.5rem;
    }

    .feature-card-inner {
        padding: 1.25rem;
    }
}

/* ===============================================
   TESTS SECTION MODERNISÉE
   =============================================== */

.tests-modern {
    padding: 6rem 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(167, 139, 250, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(52, 211, 153, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
}

/* Badge avec animation différente */
.pulse-teal {
    background: linear-gradient(45deg, #14b8a6, #06b6d4);
    animation: pulseTeal 2s infinite;
}

@keyframes pulseTeal {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* Grille modernisée */
.tests-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0 auto;
}

/* Cards de tests premium */
.test-card-modern {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 32px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 8px 30px rgba(0, 0, 0, 0.04);
}

.test-card-modern:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.95);
}

/* Glow effect spécifique par type */
.test-card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle, var(--glow-color, transparent) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.test-card--tdah {
    --glow-color: rgba(249, 115, 22, 0.3);
}

.test-card--tdah:hover .test-card-glow {
    opacity: 1;
}

.test-card--tsa {
    --glow-color: rgba(30, 64, 175, 0.3);
}

.test-card--tsa:hover .test-card-glow {
    opacity: 1;
}

.test-card--tdah-enfant {
    --glow-color: rgba(251, 146, 60, 0.3);
}

.test-card--tdah-enfant:hover .test-card-glow {
    opacity: 1;
}

.test-card--premium {
    --glow-color: rgba(147, 51, 234, 0.3);
}

.test-card--premium:hover .test-card-glow {
    opacity: 1;
}

.test-card-content {
    padding: 2rem;
    position: relative;
    z-index: 2;
}

/* Header modernisé */
.test-header-modern {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
    padding-right: 4rem;
}

.test-icon-modern {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    overflow: hidden;
    transition: all 0.3s ease;
}

.test-icon--tdah {
    background: linear-gradient(135deg, var(--tdah-adulte) 0%, #fb923c 100%);
}

.test-icon--tsa {
    background: linear-gradient(135deg, var(--tsa) 0%, #3b82f6 100%);
}

.test-icon--tdah-enfant {
    background: linear-gradient(135deg, var(--tdah-enfant) 0%, #fbbf24 100%);
}

.test-icon--premium {
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
}

.icon-pulse {
    position: absolute;
    inset: -4px;
    background: inherit;
    border-radius: 24px;
    opacity: 0;
    animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.test-card-modern:hover .test-icon-modern {
    transform: scale(1.1) rotate(5deg);
}

/* Meta informations */
.test-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.test-title-modern {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.3;
}

.test-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.badge--express {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
}

.badge--complet {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
}

.badge--premium {
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
    color: white;
}

.badge--combo {
    background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%);
    color: white;
}

/* Badge de popularité */
.test-popularity {
    display: flex;
    align-items: start;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.popularity-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 600;
    animation: float 3s ease-in-out infinite;
    white-space: nowrap;
}

.popularity-badge--parents {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.popularity-badge--premium {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
}

/* Description modernisée */
.test-description-modern {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Features sous forme de pills */
.test-features-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.feature-pill {
    background: rgba(96, 165, 250, 0.1);
    color: #1e40af;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid rgba(96, 165, 250, 0.2);
    transition: all 0.3s ease;
}

.feature-pill:hover {
    background: rgba(96, 165, 250, 0.2);
    transform: translateY(-2px);
}

/* Boutons modernisés */
.test-buttons-modern {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-modern {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    min-width: 140px;
    justify-content: center;
}

.btn-modern--outline {
    background: rgba(255, 255, 255, 0.8);
    color: var(--gray-700);
    border-color: rgba(226, 232, 240, 0.8);
}

.btn-modern--outline:hover {
    background: rgba(249, 115, 22, 0.1);
    color: var(--tdah-adulte);
    border-color: var(--tdah-adulte);
    transform: translateY(-2px);
}

.btn-modern--primary {
    background: linear-gradient(135deg, var(--tdah-adulte) 0%, #fb923c 100%);
    color: white;
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
}

.btn-modern--primary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(249, 115, 22, 0.4);
}

.btn-modern--tsa {
    background: linear-gradient(135deg, var(--tsa) 0%, #3b82f6 100%);
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.3);
}

.btn-modern--tsa:hover {
    box-shadow: 0 15px 40px rgba(30, 64, 175, 0.4);
}

.btn-modern--tdah-enfant {
    background: linear-gradient(135deg, var(--tdah-enfant) 0%, #fbbf24 100%);
    box-shadow: 0 8px 25px rgba(251, 146, 60, 0.3);
}

.btn-modern--tdah-enfant:hover {
    box-shadow: 0 15px 40px rgba(251, 146, 60, 0.4);
}

.btn-modern--premium {
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
    box-shadow: 0 8px 25px rgba(147, 51, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-modern--premium:hover {
    box-shadow: 0 15px 40px rgba(147, 51, 234, 0.4);
}

.btn-modern--premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: premiumShine 2s infinite;
}

@keyframes premiumShine {
    0% {
        transform: translateX(-100%) skewX(-45deg);
    }

    100% {
        transform: translateX(300%) skewX(-45deg);
    }
}

.btn-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transition: left 0.5s ease;
}

.btn-modern--primary:hover .btn-shimmer {
    left: 100%;
}

/* Responsive design */
@media (max-width: 1024px) {
    .tests-modern {
        padding: 4rem 0;
    }

    .tests-grid-modern {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        padding: 0 0.5rem;
        max-width: 100%;
        margin: 0 auto;
    }

    .test-card-content {
        padding: 1.5rem;
    }

    .test-header-modern {
        grid-template-columns: auto 1fr;
        gap: 0.75rem;
    }

    .test-popularity {
        grid-column: 1 / -1;
        margin-top: 0.5rem;
    }

    .test-buttons-modern {
        flex-direction: column;
    }

    .btn-modern {
        width: 100%;
    }

    .test-card-modern:hover {
        transform: translateY(-6px);
    }
}

@media (max-width: 1024px) {
    .tests-grid-modern {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        padding: 0 0.25rem;
        max-width: 100%;
        margin: 0 auto;
    }

    .test-card-content {
        padding: 1.25rem;
    }

    .test-icon-modern {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }
}

/* ===============================================
   STATS SECTION MODERNISÉE
   =============================================== */

.stats-modern {
    padding: 6rem 0;
    position: relative;
    background:
        radial-gradient(circle at 60% 20%, rgba(52, 211, 153, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(96, 165, 250, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
    overflow: hidden;
}

.stats-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20px 20px, rgba(0, 0, 0, 0.02) 1px, transparent 0),
        radial-gradient(circle at 40px 40px, rgba(0, 0, 0, 0.01) 1px, transparent 0);
    background-size: 40px 40px, 80px 80px;
    opacity: 0.5;
}

/* Badge avec animation stats */
.pulse-stats {
    background: linear-gradient(45deg, #10b981, #14b8a6);
    animation: pulseStats 1.5s infinite;
}

@keyframes pulseStats {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.6;
    }
}

/* Grille des stats - TOUJOURS 3 colonnes sur 2 lignes */
.stats-grid-modern {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 2rem !important;
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

/* Force explicitement les éléments à leur position exacte */
.stats-grid-modern .stat-card-modern:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.stats-grid-modern .stat-card-modern:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.stats-grid-modern .stat-card-modern:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

.stats-grid-modern .stat-card-modern:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
}

.stats-grid-modern .stat-card-modern:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
}

.stats-grid-modern .stat-card-modern:nth-child(6) {
    grid-column: 3;
    grid-row: 2;
}

/* Cards statistiques */
.stat-card-modern {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08),
        0 4px 20px rgba(0, 0, 0, 0.04);
}

.stat-card-modern:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 8px 30px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.95);
}

.stat-card-modern:nth-child(1) {
    --stat-color: var(--teal);
}

.stat-card-modern:nth-child(2) {
    --stat-color: var(--green);
}

.stat-card-modern:nth-child(3) {
    --stat-color: var(--blue);
}

.stat-card-modern:nth-child(4) {
    --stat-color: var(--orange);
}

/* Icônes des stats */
.stat-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--stat-color, #14b8a6) 0%, color-mix(in srgb, var(--stat-color, #14b8a6) 80%, white) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
    position: relative;
}

.stat-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: inherit;
    border-radius: 50%;
    opacity: 0.3;
    animation: iconPulse 3s infinite;
}

.stat-card-modern:hover .stat-icon {
    transform: scale(1.1) rotate(10deg);
}

/* Contenu des stats */
.stat-content {
    position: relative;
    z-index: 2;
}

.stat-number-modern {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--stat-color, #14b8a6) 0%, var(--gray-900) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-mono);
}

.stat-label-modern {
    font-size: 1rem;
    color: var(--gray-600);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Effet glow */
.stat-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--stat-color, transparent) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    filter: blur(30px);
}

.stat-card-modern:hover .stat-glow {
    opacity: 0.15;
}

/* Animation des compteurs */
@keyframes countUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.stat-number-modern.counting {
    animation: countUp 0.6s ease-out;
}

/* Responsive design */
@media (max-width: 1024px) {
    .stats-modern {
        padding: 4rem 0;
    }

    .stats-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
        padding: 0 1rem;
    }

    .stat-card-modern {
        padding: 1.5rem;
    }

    .stat-icon {
        width: 56px;
        height: 56px;
        font-size: 20px;
        margin-bottom: 1rem;
    }

    .stat-number-modern {
        font-size: 2rem;
    }

    .stat-label-modern {
        font-size: 0.875rem;
    }
}

/* Tablettes landscape et écrans moyens - forcer 3 colonnes jusqu'à 768px */
@media (max-width: 900px) and (min-width: 769px) {
    .stats-grid-modern {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 1024px) {
    .stats-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, 1fr) !important;
        padding: 0 0.5rem;
        gap: 1rem !important;
    }

    .stat-card-modern {
        padding: 1rem;
    }

    .stat-number-modern {
        font-size: 1.5rem;
    }

    .stat-label-modern {
        font-size: 0.8rem;
    }
}

/* ===============================================
   NEURODIVERSITÉ SECTION MODERNISÉE
   =============================================== */

.neurodiversity-modern {
    padding: 6rem 0;
    position: relative;
    background:
        radial-gradient(circle at 20% 30%, rgba(147, 51, 234, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
    overflow: hidden;
}

.neurodiversity-modern .container {
    position: relative;
    z-index: 3;
}

.neurodiversity-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

/* Éléments flottants */
.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.float-element {
    position: absolute;
    opacity: 0.1;
    animation: floatAround 20s infinite linear;
}

.float-1 {
    top: 10%;
    left: 10%;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #9333ea, #ec4899);
    border-radius: 50%;
    animation-delay: 0s;
}

.float-2 {
    top: 60%;
    right: 15%;
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #3b82f6, #06b6d4);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation-delay: 7s;
}

.float-3 {
    bottom: 20%;
    left: 20%;
    width: 80px;
    height: 30px;
    background: linear-gradient(45deg, #f97316, #ec4899);
    border-radius: 50px;
    animation-delay: 14s;
}

@keyframes floatAround {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(50px, -30px) rotate(90deg);
    }

    50% {
        transform: translate(-20px, -60px) rotate(180deg);
    }

    75% {
        transform: translate(-40px, 20px) rotate(270deg);
    }
}

/* Badge neurodiversité */
.pulse-neuro {
    background: linear-gradient(45deg, #9333ea, #ec4899);
    animation: pulseNeuro 2s infinite;
}

@keyframes pulseNeuro {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* Header de section */
.neurodiversity-header {
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
}

/* Sections de troubles */
.disorder-modern {
    margin: 4rem 0;
    position: relative;
    z-index: 4;
}

.disorder-content-asymmetric {
    position: relative;
}

.disorder-content-asymmetric.reverse {
    direction: rtl;
}

.disorder-content-asymmetric.reverse * {
    direction: ltr;
}

/* Header de trouble moderne */
.disorder-header-modern {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* Icônes flottantes */
.disorder-icon-floating {
    position: relative;
    width: 80px;
    height: 80px;
}

.icon-container-tdah,
.icon-container-tsa {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    position: relative;
    overflow: hidden;
}

.icon-container-tdah {
    background: linear-gradient(135deg, var(--tdah-adulte) 0%, #fb923c 100%);
}

.icon-container-tsa {
    background: linear-gradient(135deg, var(--tsa) 0%, #3b82f6 100%);
}

/* Animation orbit TDAH */
.icon-orbit {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(249, 115, 22, 0.3);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate 8s linear infinite;
}

.orbit-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--tdah-adulte);
    border-radius: 50%;
}

.orbit-dot:nth-child(1) {
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
}

.orbit-dot:nth-child(2) {
    top: 50%;
    right: -3px;
    transform: translateY(-50%);
}

.orbit-dot:nth-child(3) {
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Animation puzzle TSA */
.puzzle-pieces {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.piece {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(30, 64, 175, 0.2);
    border-radius: 4px;
    animation: puzzleFloat 4s ease-in-out infinite;
}

.piece-1 {
    top: 10px;
    left: 10px;
    animation-delay: 0s;
}

.piece-2 {
    top: 10px;
    right: 10px;
    animation-delay: 1s;
}

.piece-3 {
    bottom: 10px;
    left: 10px;
    animation-delay: 2s;
}

.piece-4 {
    bottom: 10px;
    right: 10px;
    animation-delay: 3s;
}

@keyframes puzzleFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.2;
    }

    50% {
        transform: translateY(-10px) scale(1.2);
        opacity: 0.6;
    }
}

/* Titres de troubles */
.disorder-title-group {
    flex: 1;
}

.disorder-title-modern {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--tdah-adulte) 0%, #fb923c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.disorder-tsa .disorder-title-modern {
    background: linear-gradient(135deg, var(--tsa) 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.disorder-subtitle-modern {
    font-size: 1.125rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Grid masonry asymétrique */
.stats-masonry-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 2rem;
    margin-top: 2rem;
}

.stats-masonry-grid.reverse {
    grid-template-columns: 1fr 1fr 2fr;
}

.stats-card-large {
    grid-row: span 2;
}

.stats-card-modern {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.stats-card-modern:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* Headers de cartes */
.card-header-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

.stats-icon {
    font-size: 1.5rem;
    opacity: 0.8;
}

.card-title-modern {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

/* Grille statistiques visuelles */
.stats-visual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.stat-visual-item {
    text-align: center;
}

/* Cercles statistiques */
.stat-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    position: relative;
    border: 4px solid rgba(249, 115, 22, 0.2);
}

.stat-circle.tsa-circle {
    background: rgba(30, 64, 175, 0.1);
    border-color: rgba(30, 64, 175, 0.2);
}

.stat-percent {
    position: relative;
    z-index: 3;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--tdah-adulte);
}

.tsa-circle .stat-percent {
    color: var(--tsa);
}

/* Gros nombres */
.stat-number-big {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--tdah-adulte);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.tsa-number {
    color: var(--tsa);
}

/* Ratios visuels */
.ratio-visual {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 1rem;
}

.ratio-part {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.ratio-part.male {
    background: #3b82f6;
}

.ratio-part.female {
    background: #ec4899;
}

/* Barres de progression */
.stat-progress {
    position: relative;
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--tdah-adulte) 0%, #fb923c 100%);
    border-radius: 6px;
    width: 0%;
    transition: width 2s ease-out;
}

.tsa-progress .progress-bar {
    background: linear-gradient(90deg, var(--tsa) 0%, #3b82f6 100%);
}

.progress-text {
    font-weight: 700;
    color: var(--gray-700);
    font-size: 0.875rem;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Types TDAH modernes */
.types-modern-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.type-modern-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(249, 115, 22, 0.05);
    border-radius: 16px;
    border-left: 4px solid var(--tdah-adulte);
    transition: all 0.3s ease;
}

.type-modern-item:hover {
    background: rgba(249, 115, 22, 0.1);
    transform: translateX(8px);
}

.type-icon {
    font-size: 1.5rem;
    opacity: 0.8;
}

.type-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.25rem 0;
}

.type-desc {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
}

/* Niveaux TSA spectrum */
.levels-spectrum {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.level-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(30, 64, 175, 0.05);
    border-radius: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.level-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--tsa);
}

.level-item.level-1::before {
    background: #22c55e;
}

.level-item.level-2::before {
    background: #f59e0b;
}

.level-item.level-3::before {
    background: #ef4444;
}

.level-item:hover {
    background: rgba(30, 64, 175, 0.1);
    transform: translateX(8px);
}

.level-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tsa);
}

.level-1 .level-indicator {
    background: #22c55e;
}

.level-2 .level-indicator {
    background: #f59e0b;
}

.level-3 .level-indicator {
    background: #ef4444;
}

.level-content {
    flex: 1;
}

.level-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.25rem 0;
}

.level-desc {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
}

.level-note {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-style: italic;
}

/* Boutons guides modernes */
.guides-modern-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.guide-btn-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.guide-btn--primary {
    background: linear-gradient(135deg, var(--tdah-adulte) 0%, #fb923c 100%);
    color: white;
}

.guide-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
}

.guide-btn--secondary {
    background: rgba(249, 115, 22, 0.1);
    color: var(--tdah-adulte);
    border-color: rgba(249, 115, 22, 0.2);
}

.guide-btn--secondary:hover {
    background: rgba(249, 115, 22, 0.2);
    transform: translateY(-2px);
}

.guide-btn--tsa {
    background: linear-gradient(135deg, var(--tsa) 0%, #3b82f6 100%);
    color: white;
}

.guide-btn--tsa:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.3);
}

.guide-btn--masking {
    background: rgba(30, 64, 175, 0.1);
    color: var(--tsa);
    border-color: rgba(30, 64, 175, 0.2);
}

.guide-btn--masking:hover {
    background: rgba(30, 64, 175, 0.2);
    transform: translateY(-2px);
}

.guides-description-modern {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin: 0;
}

/* CTA Final */
.neuro-cta-modern {
    margin-top: 4rem;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    z-index: 5;
}

.cta-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
}

.cta-content-modern {
    position: relative;
    z-index: 2;
}

.cta-icon-modern {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    margin: 0 auto 1.5rem;
    position: relative;
    animation: float 3s ease-in-out infinite;
}

.compass-needle {
    position: absolute;
    width: 2px;
    height: 30px;
    background: white;
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(45deg);
    animation: compassSpin 4s ease-in-out infinite;
}

@keyframes compassSpin {

    0%,
    100% {
        transform: translate(-50%, -100%) rotate(45deg);
    }

    50% {
        transform: translate(-50%, -100%) rotate(405deg);
    }
}

.cta-title-modern {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.cta-description-modern {
    font-size: 1.125rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(147, 51, 234, 0.3);
    z-index: 10;
    cursor: pointer;
}

.cta-btn-modern:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 20px 60px rgba(147, 51, 234, 0.4);
}

.btn-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.btn-particles .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: particleFloat 2s infinite ease-in-out;
}

.btn-particles .particle:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.btn-particles .particle:nth-child(2) {
    top: 60%;
    right: 30%;
    animation-delay: 0.7s;
}

.btn-particles .particle:nth-child(3) {
    bottom: 30%;
    left: 60%;
    animation-delay: 1.4s;
}

@keyframes particleFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-10px) scale(1.5);
        opacity: 1;
    }
}

/* Responsive design */
@media (max-width: 1024px) {
    .neurodiversity-modern {
        padding: 4rem 0;
    }

    .disorder-header-modern {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .disorder-icon-floating {
        width: 64px;
        height: 64px;
    }

    .icon-container-tdah,
    .icon-container-tsa {
        width: 64px;
        height: 64px;
        font-size: 24px;
    }

    .disorder-title-modern {
        font-size: 2rem;
    }

    .stats-masonry-grid,
    .stats-masonry-grid.reverse {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .stats-card-large {
        grid-row: span 1;
    }

    .stats-visual-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .neuro-cta-modern {
        margin-top: 3rem;
        padding: 2rem;
    }

    .cta-title-modern {
        font-size: 1.5rem;
    }

    .floating-elements {
        display: none;
    }
}

/* Fond principal et sections */

/* ===============================================
   TESTS-AUTRES.PHP - STYLES MODERNES
   =============================================== */

/* CSS Variables spécifiques aux tests-autres */
:root {
    /* Pulse animations */
    --pulse-tests: 0 0 20px rgba(59, 130, 246, 0.6);
    --pulse-guide: 0 0 20px rgba(16, 185, 129, 0.6);
    --pulse-features: 0 0 20px rgba(249, 115, 22, 0.6);
}

/* Tests Grid Modernisée */
.tests-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

/* Test Cards avec couleurs officielles */
.test-card-modern {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.test-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue-roi), var(--teal));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.test-card-modern:hover::before {
    opacity: 1;
}

.test-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Couleurs spécifiques par trouble */
.test-card--bipolaire::before {
    background: linear-gradient(90deg, var(--bipolaire), #fbbf24);
}

.test-card--hpi::before {
    background: linear-gradient(90deg, var(--hpi), var(--teal));
}

.test-card--psychopathie::before {
    background: linear-gradient(90deg, var(--psychopathie), var(--gray-600));
}

.test-card--schizophrenie::before {
    background: linear-gradient(90deg, var(--schizophrenie), var(--indigo));
}

/* Test Header Modernisé */
.test-header-modern {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.test-icon-modern {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--white);
    position: relative;
    flex-shrink: 0;
    z-index: 2;
}

.test-icon--bipolaire {
    background: linear-gradient(135deg, var(--bipolaire), #fbbf24);
}

.test-icon--hpi {
    background: linear-gradient(135deg, var(--hpi), var(--teal));
}

.test-icon--psychopathie {
    background: linear-gradient(135deg, var(--psychopathie), var(--gray-600));
}

.test-icon--schizophrenie {
    background: linear-gradient(135deg, var(--schizophrenie), var(--indigo));
}

.test-meta {
    flex: 1;
    min-width: 0;
}

.test-title-modern {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.test-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.test-popularity {
    flex-shrink: 0;
}

.popularity-badge {
    background: var(--gray-100);
    color: var(--gray-700);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.popularity-badge--featured {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: var(--white);
}

/* Test Description */
.test-description-modern {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex: 1;
}

/* Test Features Pills */
.test-features-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.feature-pill {
    background: var(--gray-100);
    color: var(--gray-700);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.feature-pill:hover {
    background: var(--blue-roi);
    color: var(--white);
}

/* Test Statistics */
.test-statistics-modern {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

.stat-item-modern {
    text-align: center;
    flex: 1;
}

.stat-number {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--blue-roi);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

/* Test Buttons Modernisés */
.test-buttons-modern {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
}

.btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex: 1;
    justify-content: center;
}

/* Boutons avec couleurs spécifiques */
.btn-modern--bipolaire {
    background: linear-gradient(135deg, var(--bipolaire), #fbbf24);
    color: var(--white) !important;
    border: 1px solid var(--bipolaire);
}

.btn-modern--hpi {
    background: linear-gradient(135deg, var(--hpi), var(--teal));
    color: var(--white) !important;
    border: 1px solid var(--hpi);
}

.btn-modern--psychopathie {
    background: linear-gradient(135deg, var(--psychopathie), var(--gray-600));
    color: var(--white) !important;
    border: 1px solid var(--psychopathie);
}

.btn-modern--schizophrenie {
    background: linear-gradient(135deg, var(--schizophrenie), var(--indigo));
    color: var(--white) !important;
    border: 1px solid var(--schizophrenie);
}

/* Boutons outline avec couleurs spécifiques */
.btn-modern--outline-bipolaire {
    background: transparent;
    color: var(--bipolaire) !important;
    border: 1px solid var(--bipolaire);
}

.btn-modern--outline-hpi {
    background: transparent;
    color: var(--hpi) !important;
    border: 1px solid var(--hpi);
}

.btn-modern--outline-psychopathie {
    background: transparent;
    color: var(--psychopathie) !important;
    border: 1px solid var(--psychopathie);
}

.btn-modern--outline-schizophrenie {
    background: transparent;
    color: var(--schizophrenie) !important;
    border: 1px solid var(--schizophrenie);
}

/* Hover effects pour boutons outline */
.btn-modern--outline-bipolaire:hover {
    background: var(--bipolaire);
    color: var(--white) !important;
}

.btn-modern--outline-hpi:hover {
    background: var(--hpi);
    color: var(--white) !important;
}

.btn-modern--outline-psychopathie:hover {
    background: var(--psychopathie);
    color: var(--white) !important;
}

.btn-modern--outline-schizophrenie:hover {
    background: var(--schizophrenie);
    color: var(--white) !important;
}

/* Guide Cards Modernisées */
.guide-cards-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.guide-card-modern {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    border: 1px solid var(--gray-200);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.guide-card-featured {
    border: 2px solid var(--blue-roi);
    transform: scale(1.02);
    position: relative;
}

.guide-card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue-roi), var(--teal));
}

.guide-card-modern:hover:not(.guide-card-featured) {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.guide-header-modern {
    text-align: center;
    margin-bottom: 1.5rem;
}

.guide-icon-modern {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
    color: var(--white);
    position: relative;
}

.guide-icon--express {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.guide-icon--complet {
    background: linear-gradient(135deg, var(--blue-roi), var(--teal));
}

.guide-icon--suivi {
    background: linear-gradient(135deg, var(--hpi), var(--lime));
}

.guide-title-modern {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
}

.guide-duration {
    background: var(--gray-100);
    color: var(--gray-600);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 600;
}

.guide-description-modern {
    color: var(--gray-600);
    line-height: 1.6;
    margin: 1rem 0 1.5rem 0;
}

.guide-features-modern {
    display: grid;
    gap: 0.75rem;
}

.guide-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.guide-feature i {
    color: var(--hpi);
    font-size: 1rem;
}

.featured-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* CTA Final Modernisé */
.cta-final-modern {
    background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
    color: var(--white);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.cta-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: float 20s ease-in-out infinite;
}

.cta-content-modern {
    text-align: center;
    position: relative;
    z-index: 2;
}

.cta-icon-modern {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-roi), var(--teal));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    font-size: 2rem;
    position: relative;
}

.rocket-trail {
    position: absolute;
    width: 4px;
    height: 30px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3));
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    animation: rocketTrail 2s ease-in-out infinite alternate;
}

@keyframes rocketTrail {
    0% {
        opacity: 0.3;
        height: 20px;
    }

    100% {
        opacity: 0.8;
        height: 40px;
    }
}

.cta-title-modern {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.cta-description-modern {
    font-size: 1.125rem;
    opacity: 0.9;
    margin: 0 0 2.5rem 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.cta-buttons-modern {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2.5rem 0;
    flex-wrap: wrap;
}

.cta-btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-width: 200px;
    justify-content: center;
}

.cta-btn-primary {
    background: linear-gradient(135deg, var(--blue-roi), var(--teal));
    color: var(--white) !important;
    border: 1px solid var(--blue-roi);
}

.cta-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.3);
}

.cta-btn-outline {
    background: transparent;
    color: var(--white) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.cta-disclaimer-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
    font-size: 0.9rem;
    opacity: 0.8;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.disclaimer-icon {
    color: #fbbf24;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Pulse badges animations */
.pulse-tests {
    box-shadow: var(--pulse-tests);
    animation: pulseTests 2s infinite;
}

.pulse-guide {
    box-shadow: var(--pulse-guide);
    animation: pulseGuide 2s infinite;
}

.pulse-features {
    box-shadow: var(--pulse-features);
    animation: pulseFeatures 2s infinite;
}

@keyframes pulseTests {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
}

@keyframes pulseGuide {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
}

@keyframes pulseFeatures {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(249, 115, 22, 0);
    }
}

/* Responsive pour tests-autres */
@media (max-width: 1024px) {
    .tests-grid-modern {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        max-width: 100%;
        margin: 0 auto;
    }

    .test-header-modern {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .test-buttons-modern {
        flex-direction: column;
    }

    .guide-cards-modern {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .guide-card-featured {
        transform: none;
    }

    .cta-buttons-modern {
        flex-direction: column;
        align-items: center;
    }

    .cta-title-modern {
        font-size: 2rem;
    }

    .test-statistics-modern {
        flex-direction: column;
        gap: 1rem;
    }

    .cta-disclaimer-modern {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
}

/* Cartes et conteneurs */

/* Wiki info cards et sections spéciales */

/* Tables */

/* Formulaires et inputs */

/* Options radio et checkbox */

/* Badges et labels */

/* Stats et Hero sections */

/* Information section */

/* Autres tests section */

/* Code blocks */

/* Flash messages */

/* Boutons */

/* Progress bars */

/* Question containers */

/* Success page */

/* Dashboard */

/* Analysis sections */

/* Footer */

/* Containers et sections génériques */

/* Pages spécifiques qui pourraient avoir des fonds blancs */

/* Titres et paragraphes */

/* Liens */

/* ===============================================
   CLASSES POUR ÉLIMINER LE CSS INLINE
   =============================================== */

/* Hero section */
.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: var(--space-6);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: var(--space-8);
    opacity: 0.8;
}

.hero-cta {
    background: var(--gradient-sunset);
    font-size: 18px;
    padding: var(--space-5) var(--space-8);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Feature icons - Charte Graphique 6 couleurs */
.feature-icon--rose {
    background: linear-gradient(135deg, var(--rose) 0%, #f472b6 100%) !important;
    color: #ffffff !important;
}

.feature-icon--turquoise {
    background: linear-gradient(135deg, var(--turquoise) 0%, #22d3ee 100%) !important;
    color: #ffffff !important;
}

.feature-icon--rouge-corail {
    background: linear-gradient(135deg, var(--rouge-corail) 0%, #f87171 100%) !important;
    color: #ffffff !important;
}

.feature-icon--indigo {
    background: linear-gradient(135deg, var(--indigo) 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
}

.feature-icon--teal {
    background: linear-gradient(135deg, var(--teal) 0%, #2dd4bf 100%) !important;
    color: #ffffff !important;
}

.feature-icon--lime {
    background: linear-gradient(135deg, var(--lime) 0%, #a3e635 100%) !important;
    color: #ffffff !important;
}

/* Icônes troubles - Couleurs officielles */
.feature-icon--tdah {
    background: var(--tdah);
    color: white;
}

.feature-icon--tsa {
    background: var(--tsa);
    color: white;
}

.feature-icon--hpi {
    background: var(--hpi);
    color: white;
}

/* Stats section */
.stats-container {
    background: var(--gray-50);
    padding: var(--space-16) 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-8);
    max-width: 1200px;
    margin: 0 auto;
}

.stat-item {
    text-align: center;
    padding: var(--space-6);
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-2);
}

.stat-label {
    font-size: 1.1rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Information section */
.information-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-16) var(--space-6);
}

.info-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.info-title {
    color: white;
    margin-bottom: var(--space-12);
    font-size: 2.5rem;
    font-weight: 700;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.info-card {
    background: white;
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
}

.info-card-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
    font-size: 2rem;
    color: white;
}

.info-card-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--space-4);
    color: var(--gray-900);
}

.info-card-content {
    color: var(--gray-600);
    line-height: 1.6;
}

/* Contact form styles */
.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8);
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.contact-form-title {
    text-align: center;
    margin-bottom: var(--space-8);
    font-size: 2rem;
    font-weight: 600;
    color: var(--gray-900);
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.contact-form-group {
    margin-bottom: var(--space-4);
}

.contact-form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 500;
    color: var(--gray-700);
}

.contact-form-input,
.contact-form-textarea,
.contact-form-select {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: white;
    transition: border-color 0.3s ease;
}

.contact-form-input:focus,
.contact-form-textarea:focus,
.contact-form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
}

.contact-form-textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form-submit {
    width: 100%;
    padding: var(--space-4);
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-form-submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.contact-form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.honeypot {
    position: absolute;
    left: -5000px;
}

/* Auth container */
.auth-container {
    max-width: 400px;
    margin: 50px auto;
    padding: var(--space-8);
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.auth-title {
    text-align: center;
    margin-bottom: var(--space-8);
    font-size: 2rem;
    font-weight: 600;
    color: var(--gray-900);
}

.auth-subtitle {
    text-align: center;
    margin-bottom: var(--space-6);
    color: var(--gray-600);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.auth-form-group {
    margin-bottom: var(--space-4);
}

.auth-form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 500;
    color: var(--gray-700);
}

.auth-form-input {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: white;
    transition: border-color 0.3s ease;
}

.auth-form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
}

.auth-form-submit {
    width: 100%;
    padding: var(--space-4);
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-form-submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.auth-links {
    text-align: center;
    margin-top: var(--space-6);
}

.auth-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.auth-link:hover {
    text-decoration: underline;
}

/* Resume test styles */
.resume-test-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8);
}

.resume-test-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-6);
}

.resume-test-title {
    text-align: center;
    margin-bottom: var(--space-8);
    font-size: 2rem;
    font-weight: 600;
    color: var(--gray-900);
}

.progress-container {
    margin-bottom: var(--space-6);
}

.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    font-weight: 500;
    color: var(--gray-700);
}

.progress-bar {
    width: 100%;
    height: 20px;
    background: var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

.test-info {
    margin-bottom: var(--space-6);
}

.test-info-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--gray-900);
}

.test-info-description {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.test-meta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.test-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-600);
    font-size: 0.9rem;
}

.resume-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.resume-btn {
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.resume-btn--primary {
    background: var(--gradient-primary);
    color: white;
}

.resume-btn--secondary {
    background: var(--gray-200);
    color: var(--gray-800);
}

.resume-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Blog section */
.blog-section {
    background: var(--gray-50);
    padding: var(--space-16) 0;
}

.blog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.blog-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.blog-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--gray-900);
}

.blog-subtitle {
    font-size: 1.2rem;
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
    padding: 2rem 0;
}

.blog-card {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.blog-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-card-content {
    padding: var(--space-6);
}

.blog-card-category {
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-2);
}

.blog-card-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--gray-900);
    line-height: 1.4;
}

.blog-card-excerpt {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.blog-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--gray-500);
}

.blog-card-author {
    font-weight: 500;
}

.blog-card-date {
    font-style: italic;
}

/* Hero badges */

/* Section descriptions */

/* Test cards - Ajustements pour meilleure lisibilité */

/* Listes */

/* Error and success messages */

/* Back to top button */

/* Dividers */

/* Box shadows adjustments */

/* ===============================================
   BASE STYLES
   =============================================== */
/* Google Fonts import pour Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--black);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===============================================
   HEADER & NAVIGATION
   =============================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid var(--gray-200);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-container {
    max-width: 1400px;
    /* Augmenté pour plus d'espace */
    margin: 0 auto;
    padding: var(--space-4) var(--space-4);
    /* Réduit le padding horizontal */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    transition: transform 0.2s ease;
}

.logo:hover {
    transform: translateY(-1px);
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.logo-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--space-3);
    /* Réduit de var(--space-4) pour plus compact */
    align-items: center;
    flex-wrap: nowrap;
}

.nav-link {
    text-decoration: none;
    color: var(--gray-700);
    font-weight: 500;
    font-size: 15px;
    padding: var(--space-2) var(--space-2);
    /* Réduit le padding horizontal */
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    /* Empêche le texte de se casser */
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* Pour les icônes */
}

.nav-link:hover {
    color: var(--primary);
    background: var(--gray-100);
}

.nav-cta {
    background: var(--primary);
    color: white !important;
    padding: var(--space-2) var(--space-4) !important;
    /* Réduit le padding */
    border-radius: var(--radius-2xl);
    font-weight: 600;
    font-size: 14px;
    /* Plus petit */
    box-shadow: var(--shadow-sm);
}

.nav-cta:hover {
    background: #0056CC !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Mobile Navigation - MASQUÉ PAR DÉFAUT */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--gray-700);
    cursor: pointer;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: none;
    /* Masqué par défaut */
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background: white;
    padding: var(--space-6);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.mobile-menu-overlay.active .mobile-menu {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--gray-200);
}

.mobile-menu-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--gray-700);
    cursor: pointer;
    padding: var(--space-2);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--gray-700);
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: 500;
    transition: all 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    background: var(--gray-100);
    color: var(--primary);
}

.mobile-nav-link.dashboard-link {
    background: var(--primary);
    color: white;
    margin-top: var(--space-4);
}

.mobile-nav-link.dashboard-link:hover {
    background: #0056CC;
    color: white;
}

.mobile-nav-divider {
    height: 1px;
    background: var(--gray-200);
    margin: var(--space-4) 0;
}

/* ===============================================
   BUTTONS & FORM ELEMENTS
   =============================================== */
.btn {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: 16px;
    font-family: var(--font-primary);
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: #0056CC;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: white;
}

.btn-secondary {
    background: var(--secondary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    background: #28A745;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: white;
}

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--gray-300);
    color: var(--gray-700);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(0, 122, 255, 0.05);
}

.btn-danger {
    background: var(--danger);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-danger:hover {
    background: #DC3545;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: white;
}

/* Form Elements */
.form-group {
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    color: var(--gray-800);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-4);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: 16px;
    font-family: var(--font-primary);
    transition: all 0.2s ease;
    background: white;
    color: var(--gray-900);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.form-radio {
    margin-right: var(--space-2);
}

/* ===============================================
   LAYOUT COMPONENTS
   =============================================== */
.container {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.main-content {
    padding-top: 80px;
    /* Account for fixed header */
    min-height: 100vh;
}

.page-header {
    text-align: center;
    padding: var(--space-20) 0 var(--space-16);
    background: var(--gray-50);
}

.page-title {
    font-size: clamp(36px, 3.75vw, 56px);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--gray-900);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.page-subtitle {
    font-size: 20px;
    color: var(--gray-600);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ===============================================
   CARDS & CONTENT BLOCKS
   =============================================== */
.card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--gray-300);
}

.card-header {
    margin-bottom: var(--space-6);
}

.card-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--gray-900);
}

.card-subtitle {
    color: var(--gray-600);
    font-size: 16px;
}

/* Feature Cards */
.feature-card {
    background: white;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--gray-200);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--gray-300);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-icon {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-bottom: var(--space-6);
}

/* Test Cards */
.test-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    border: 1px solid var(--gray-200);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.test-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    transition: transform 0.3s ease;
}

.test-card.tdah::before {
    background: var(--gradient-primary);
}

.test-card.tsa::before {
    background: var(--gradient-secondary);
}

.test-card.psychopathy::before {
    background: linear-gradient(135deg, var(--red) 0%, var(--pink) 100%);
}

.test-card.schizophrenia::before {
    background: var(--gradient-purple);
}

.test-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-2xl);
    border-color: var(--gray-300);
}

.test-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.test-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.test-icon.tdah {
    background: var(--tdah-adulte) !important;
}

.test-icon.tsa {
    background: var(--tsa) !important;
}

.test-icon.psychopathy {
    background: linear-gradient(135deg, var(--red) 0%, var(--pink) 100%);
}

.test-icon.schizophrenia {
    background: var(--gradient-purple);
}

/* ===============================================
   HERO SECTIONS
   =============================================== */
.hero {
    padding: calc(80px + var(--space-20)) 0 var(--space-24);
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 122, 255, 0.15), transparent 70%),
        linear-gradient(180deg, var(--gray-50) 0%, rgba(249, 250, 251, 0.8) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(0, 122, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(52, 199, 89, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-2xl);
    font-weight: 500;
    font-size: 14px;
    margin-bottom: var(--space-8);
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    box-shadow: var(--shadow-sm);
}

.hero-title {
    font-size: clamp(48px, 4.5vw, 72px);
    font-weight: 700;
    margin-bottom: var(--space-6);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}

.hero-title .highlight {
    color: var(--tdah) !important;
    /* Orange pour "Neuroatypiques" */
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
}

.hero-subtitle {
    font-size: 22px;
    margin-bottom: var(--space-10);
    color: var(--gray-600);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    line-height: 1.5;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--primary);
    color: white;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-2xl);
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.hero-cta:hover {
    background: #0056CC;
    transform: translateY(-2px);
    box-shadow: var(--shadow-2xl);
    color: white;
}

/* ===============================================
   GRIDS & LAYOUTS
   =============================================== */
.grid {
    display: grid;
    gap: var(--space-6);
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--space-8);
}

.tests-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-12);
}

/* ===============================================
   DASHBOARD STYLES
   =============================================== */
.dashboard-header {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-6) 0;
    margin-bottom: var(--space-8);
}

.dashboard-nav {
    display: flex;
    gap: var(--space-6);
    align-items: center;
}

.dashboard-nav a {
    text-decoration: none;
    color: var(--gray-600);
    font-weight: 500;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.dashboard-nav a:hover,
.dashboard-nav a.active {
    color: var(--primary);
    background: rgba(0, 122, 255, 0.1);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.stat-card {
    background: white;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    text-align: center;
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-2);
}

.stat-label {
    color: var(--gray-600);
    font-weight: 500;
}

/* ===============================================
   USER INFO PAGE STYLES
   =============================================== */
.user-info-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

.progress-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-12);
    padding: var(--space-6);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    position: relative;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.3s ease;
}

.progress-step.active .step-number {
    background: var(--primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}

.step-label {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
}

.progress-line {
    width: 100px;
    height: 2px;
    background: var(--gray-200);
    margin: 0 var(--space-4);
}

.info-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.test-badge {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
    margin: 0 auto var(--space-4);
    box-shadow: var(--shadow-lg);
}

.test-badge.tdah {
    background: var(--gradient-primary);
}

.test-badge.tsa {
    background: var(--gradient-secondary);
}

.test-badge.complet {
    background: var(--gradient-sunset);
}

.test-badge.bipolar {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.test-badge.hpi {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.test-badge.tdah-enfant {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.test-badge.psychopathy {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.test-badge.schizophrenia {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.test-subtitle {
    color: var(--gray-600);
    font-size: 18px;
    margin-top: var(--space-2);
}

.test-info-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.info-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.info-item i {
    font-size: 24px;
    color: var(--primary);
}

.info-item div {
    display: flex;
    flex-direction: column;
}

.info-item strong {
    font-size: 14px;
    color: var(--gray-700);
}

.info-item span {
    font-size: 16px;
    color: var(--gray-900);
    font-weight: 500;
}

.user-form {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.form-section {
    margin-bottom: var(--space-8);
}

.form-section h3 {
    font-size: 20px;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--gray-100);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
}

.form-help {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: var(--space-1);
}

.consent-box {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    margin-right: var(--space-2);
}

.checkbox-text {
    line-height: 1.5;
}

.privacy-info {
    background: linear-gradient(135deg, #eff6ff, #ecfdf5);
    border: 1px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.privacy-info i {
    font-size: 32px;
    color: var(--primary);
}

.privacy-info h4 {
    font-size: 18px;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.privacy-info p {
    color: var(--gray-700);
    line-height: 1.6;
}

.form-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
}

.success-message {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 2px solid var(--success);
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
    text-align: center;
}

.success-icon {
    font-size: 64px;
    color: var(--success);
    margin-bottom: var(--space-4);
}

.user-code-display {
    background: var(--gray-900);
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-size: 20px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-code-display:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.success-note {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: var(--space-6) auto;
    max-width: 500px;
}

/* ===============================================
   TEST PAGE STYLES
   =============================================== */
.test-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

.test-progress-bar {
    position: sticky;
    top: 80px;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-md);
    z-index: 100;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.user-welcome {
    color: var(--gray-700);
    font-size: 14px;
}

.user-welcome small {
    color: var(--gray-500);
}

.progress-text {
    font-weight: 600;
    color: var(--gray-800);
}

.progress-bar-container {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--gradient-primary);
    transition: width 0.5s ease;
}

.module-header {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.module-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
}

.module-icon.tdah {
    background: var(--gradient-primary);
}

.module-icon.tsa {
    background: var(--gradient-secondary);
}

.module-info h1 {
    font-size: 28px;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.module-info p {
    color: var(--gray-600);
    margin: 0;
}

.page-indicator {
    background: var(--gray-100);
    color: var(--gray-700);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    margin-top: var(--space-2);
    display: inline-block;
}

.module-instructions {
    background: linear-gradient(135deg, #eff6ff, #ecfdf5);
    border: 1px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.module-instructions i {
    font-size: 20px;
    color: var(--primary);
}

.test-form {
    margin-bottom: var(--space-8);
}

.question-card {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
    transition: all 0.3s ease;
}

.question-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-md);
}

.question-card.highlight {
    border-color: var(--warning);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.question-number {
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
}

.question-status {
    font-size: 14px;
    color: var(--gray-500);
}

.question-status.answered {
    color: var(--success);
}

.question-text {
    font-size: 20px;
    color: var(--gray-900);
    line-height: 1.5;
    margin-bottom: var(--space-6);
}

.question-help {
    background: var(--gray-50);
    border-left: 3px solid var(--primary);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: 14px;
    color: var(--gray-700);
}

.question-responses {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.radio-option,
.checkbox-option {
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.radio-option:hover,
.checkbox-option:hover {
    border-color: var(--primary);
    background: rgba(0, 122, 255, 0.05);
}

.radio-option.selected,
.checkbox-option:has(input:checked) {
    border-color: var(--primary);
    background: rgba(0, 122, 255, 0.1);
}

.radio-option label,
.checkbox-option label {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0;
    font-weight: 500;
}

.radio-custom,
.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-400);
    border-radius: 50%;
    margin-right: var(--space-3);
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-custom {
    border-radius: var(--radius-sm);
}

.radio-option.selected .radio-custom {
    border-color: var(--primary);
    background: var(--primary);
}

.radio-option.selected .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

.scale-container {
    margin-top: var(--space-4);
}

.scale-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    font-size: 14px;
    color: var(--gray-600);
}

.scale-options {
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
}

.scale-option {
    flex: 1;
    text-align: center;
    cursor: pointer;
}

.scale-option input[type="radio"] {
    display: none;
}

.scale-number {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: var(--radius-md);
    background: var(--gray-100);
    border: 2px solid var(--gray-300);
    font-weight: 600;
    transition: all 0.2s ease;
}

.scale-option:hover .scale-number {
    border-color: var(--primary);
    background: rgba(0, 122, 255, 0.1);
}

.scale-option.selected .scale-number {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.form-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--space-4);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-size: 16px;
    transition: all 0.2s ease;
    resize: vertical;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.test-navigation {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-buttons {
    display: flex;
    gap: var(--space-4);
}

/* ===============================================
   ANALYZE PAGE STYLES
   =============================================== */
.analyze-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

.analyze-header {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-lg);
}

.user-details {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-3);
    color: var(--gray-600);
    font-size: 14px;
}

.user-details span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.analysis-loading {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-16);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.loading-animation {
    margin-bottom: var(--space-8);
}

.brain-loader {
    font-size: 64px;
    color: var(--primary);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.loading-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.loading-dots span {
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.16s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* ===============================================
   FOOTER STYLES - Migré depuis footer.php
   =============================================== */

/* Footer principal */
.footer {
    background: var(--gray-50, #f9fafb);
    border-top: 1px solid var(--gray-200, #e5e7eb);
    padding: 3rem 0 1rem;
}

/* Contenu principal du footer */
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Sections du footer */
.footer-section h4 {
    margin-bottom: 1rem;
    color: var(--gray-900, #111827);
}

.footer-section p {
    color: var(--gray-600, #6b7280);
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Statistiques du footer */
.footer-stats {
    color: var(--gray-500, #6b7280);
    font-size: 0.875rem;
}

/* Réseaux sociaux */
.footer-social {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.footer-social a {
    color: var(--gray-600, #6b7280);
    font-size: 1.25rem;
}

/* Liens du footer */
.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--gray-600, #6b7280);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--primary);
}

/* Séparateur */
.footer-divider {
    height: 1px;
    background: var(--gray-200, #e5e7eb);
    margin: 2rem 0;
}

/* Disclaimer médical */
.footer-disclaimer {
    background: var(--gray-100, #f3f4f6);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.disclaimer-main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.disclaimer-main i {
    color: var(--primary, #007AFF);
    margin-top: 0.25rem;
}

.disclaimer-main strong {
    color: var(--gray-900, #111827);
}

.disclaimer-main span {
    color: var(--gray-700, #374151);
}

.disclaimer-detail {
    color: var(--gray-600, #6b7280);
    font-size: 0.875rem;
    padding-left: 2rem;
}

/* Mentions légales */
.footer-legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.footer-legal-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-legal-links a {
    color: var(--gray-500, #6b7280);
    text-decoration: none;
    font-size: 0.875rem;
}

/* Copyright et bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

.footer-copyright p {
    color: var(--gray-500, #6b7280);
    font-size: 0.875rem;
}

.footer-copyright a {
    color: var(--primary, #007AFF);
}

.debug-info {
    color: var(--gray-400, #9ca3af);
    font-size: 0.75rem;
}

/* Badges de certification */
.footer-badges {
    display: flex;
    gap: 1rem;
}

.footer-badges .badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--gray-500, #6b7280);
    font-size: 0.75rem;
}

/* Bouton retour en haut */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    background: var(--primary, #007AFF);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.back-to-top:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}

/* ===============================================
   ADMIN ANALYSES STYLES - Migré depuis admin/analyses.php
   =============================================== */

/* Admin header with return button */
.admin-header .btn-outline {
    color: white;
    border-color: white;
}

/* Stat values with specific colors */
.stats-grid .stat-card:nth-child(2) .stat-value {
    color: #059669;
}

.stats-grid .stat-card:nth-child(3) .stat-value {
    color: #3b82f6;
}

.stats-grid .stat-card:nth-child(4) .stat-value {
    color: #f59e0b;
}

.stats-grid .stat-card:nth-child(5) .stat-value {
    color: #dc2626;
}

.stats-grid .stat-card:nth-child(6) .stat-value {
    color: #8b5cf6;
}

/* Configuration IA section header */
.ai-settings-section>div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Settings form layout */
.settings-grid .form-group:last-child {
    display: flex;
    align-items: end;
}

/* Test types grid cards */
.test-type-card>div:first-child {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.test-type-card>div:nth-child(2) {
    font-size: 1.5rem;
    font-weight: 700;
    color: #8b5cf6;
}

.test-type-card>div:nth-child(3) {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Table empty state */
.text-center[colspan="9"] {
    padding: 2rem;
    color: #6b7280;
}

/* User info in table */
.analyses-table td small {
    color: #6b7280;
}

/* Test type display */
.analyses-table .test-type {
    font-weight: 600;
}

/* Empty result indicator */
.result-empty {
    color: #6b7280;
}

/* Inline forms in tables */
.btn-group form {
    display: inline;
}

.resume-actions form {
    display: inline;
}

/* Auth page */

/* Resume test page */

/* ===============================================
   WIKI STYLES - Migré depuis wiki.php
   =============================================== */

/* Sidebar wiki avec scroll corrigé */
.wiki-sidebar {
    position: sticky;
    top: 120px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.wiki-sidebar-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--space-4);
    color: var(--gray-900);
}

.wiki-sidebar-menu {
    list-style: none;
}

.wiki-sidebar-menu li {
    margin-bottom: var(--space-2);
}

.wiki-sidebar-menu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--gray-600);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all 0.2s ease;
}

.wiki-sidebar-menu a:hover,
.wiki-sidebar-menu a.active {
    background: var(--primary);
    color: white;
}

.wiki-sidebar-menu .submenu {
    margin-left: var(--space-4);
    margin-top: var(--space-2);
}

.wiki-sidebar-menu .submenu a {
    font-size: 14px;
    padding: var(--space-1) var(--space-3);
}

.wiki-content {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.wiki-content h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: var(--space-6);
    color: var(--gray-900);
    line-height: 1.2;
}

.wiki-content h2 {
    font-size: 32px;
    font-weight: 600;
    margin: var(--space-16) 0 var(--space-6);
    color: var(--gray-900);
    border-bottom: 2px solid var(--gray-200);
    padding-bottom: var(--space-3);
}

.wiki-content h2:first-of-type {
    margin-top: 0;
}

.wiki-content h3 {
    font-size: 24px;
    font-weight: 600;
    margin: var(--space-8) 0 var(--space-4);
    color: var(--gray-800);
}

.wiki-content h4 {
    font-size: 20px;
    font-weight: 600;
    margin: var(--space-6) 0 var(--space-3);
    color: var(--gray-800);
}

.wiki-content p {
    margin-bottom: var(--space-4);
    color: var(--gray-700);
    font-size: 16px;
    line-height: 1.7;
}

.wiki-content ul,
.wiki-content ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}

.wiki-content li {
    margin-bottom: var(--space-2);
    color: var(--gray-700);
}

.wiki-info-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-6) 0;
}

.wiki-info-card.primary {
    background: rgba(0, 122, 255, 0.05);
    border-color: rgba(0, 122, 255, 0.2);
}

.wiki-info-card.secondary {
    background: rgba(52, 199, 89, 0.05);
    border-color: rgba(52, 199, 89, 0.2);
}

.wiki-info-card.danger {
    background: rgba(255, 59, 48, 0.05);
    border-color: rgba(255, 59, 48, 0.2);
}

.wiki-info-card.warning {
    background: rgba(255, 149, 0, 0.05);
    border-color: rgba(255, 149, 0, 0.2);
}

.wiki-info-card h5 {
    font-weight: 600;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.wiki-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.wiki-stat-item {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
}

.wiki-stat-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-1);
}

.wiki-stat-label {
    font-size: 14px;
    color: var(--gray-600);
}

.wiki-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.wiki-comparison-table th,
.wiki-comparison-table td {
    padding: var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.wiki-comparison-table th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-900);
}

.wiki-comparison-table td {
    color: var(--gray-700);
}

.wiki-symptoms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin: var(--space-6) 0;
}

.wiki-symptoms-category {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 1px solid var(--gray-200);
}

.wiki-symptoms-category h5 {
    font-weight: 600;
    margin-bottom: var(--space-4);
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.wiki-symptoms-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wiki-symptoms-category li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-700);
}

.wiki-symptoms-category li:last-child {
    border-bottom: none;
}

.wiki-symptoms-category li::before {
    content: "•";
    color: var(--primary);
    font-weight: bold;
    margin-right: var(--space-2);
}

.wiki-references {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-8) 0;
}

.wiki-references h4 {
    margin-top: 0;
    margin-bottom: var(--space-4);
}

.wiki-references ol {
    padding-left: var(--space-6);
}

.wiki-references li {
    margin-bottom: var(--space-3);
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.5;
}

/* Navigation responsive */
@media (max-width: 1024px) {
    .wiki-main-container {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: var(--space-6) var(--space-4);
    }

    .wiki-sidebar {
        position: static;
        order: 2;
        max-height: none;
    }

    .wiki-content {
        padding: var(--space-6);
    }

    .wiki-content h1 {
        font-size: 32px;
    }

    .wiki-content h2 {
        font-size: 24px;
    }

    .wiki-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wiki-symptoms-grid {
        grid-template-columns: 1fr;
    }
}

.loading-steps {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin: var(--space-12) 0;
}

.loading-steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    opacity: 0.3;
    transition: all 0.5s ease;
}

.loading-steps .step.active {
    opacity: 1;
}

.loading-steps .step i {
    font-size: 32px;
    color: var(--primary);
}

.loading-note {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: inline-block;
    margin-top: var(--space-8);
}

.analysis-results {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
}

.results-header {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 2px solid var(--gray-100);
}

.results-header h2 {
    font-size: 32px;
    color: var(--gray-900);
    margin-bottom: var(--space-3);
}

.report-meta {
    display: flex;
    gap: var(--space-6);
    color: var(--gray-600);
    font-size: 14px;
}

.result-section {
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: var(--gray-50);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--primary);
}

.result-section h3 {
    font-size: 24px;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.result-section h3 i {
    color: var(--primary);
}

.executive-summary {
    background: linear-gradient(135deg, #eff6ff, #ecfdf5);
    border-left-color: var(--success);
}

.probability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-4);
}

.probability-item h4 {
    font-size: 16px;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}

.probability-bar {
    height: 32px;
    background: var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.probability-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    transition: width 2s ease;
}

.probability-fill.tdah {
    background: var(--gradient-primary);
}

.probability-fill.tsa {
    background: var(--gradient-secondary);
}

.probability-label {
    font-size: 14px;
    color: var(--gray-600);
}

.formatted-content h2 {
    font-size: 22px;
    color: var(--gray-900);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.formatted-content h3 {
    font-size: 18px;
    color: var(--gray-800);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.formatted-content h4 {
    font-size: 16px;
    color: var(--gray-700);
    margin-top: var(--space-3);
    margin-bottom: var(--space-2);
}

.formatted-content ul {
    margin-left: var(--space-6);
    margin-bottom: var(--space-4);
}

.formatted-content li {
    margin-bottom: var(--space-2);
    line-height: 1.6;
}

.formatted-content strong {
    color: var(--gray-900);
    font-weight: 600;
}

.formatted-content em {
    color: var(--gray-700);
    font-style: italic;
}

.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.recommendation-section {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.recommendation-section h5 {
    font-size: 16px;
    color: var(--primary);
    margin-bottom: var(--space-3);
}

.results-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    margin-top: var(--space-8);
    flex-wrap: wrap;
}

.medical-disclaimer {
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid var(--danger);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-8);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.medical-disclaimer i {
    color: var(--danger);
    font-size: 24px;
    margin-top: 2px;
}

.medical-disclaimer p {
    margin: 0;
    line-height: 1.6;
}

/* ===============================================
   RESPONSIVE UPDATES
   =============================================== */
@media (max-width: 1024px) {

    .user-info-container,
    .test-container,
    .analyze-container {
        padding: var(--space-6) var(--space-4);
    }

    .progress-indicator {
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .progress-line {
        width: 50px;
    }

    .info-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

    .module-header {
        flex-direction: column;
        text-align: center;
    }

    .test-navigation {
        flex-direction: column;
        gap: var(--space-4);
    }

    .nav-buttons {
        width: 100%;
        flex-direction: column;
    }

    .nav-buttons .btn {
        width: 100%;
    }

    .analyze-header {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }

    .user-details {
        flex-direction: column;
        align-items: center;
    }

    .loading-steps {
        flex-direction: column;
        gap: var(--space-4);
    }

    .probability-grid {
        grid-template-columns: 1fr;
    }

    .results-actions {
        flex-direction: column;
    }

    .results-actions .btn {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .question-text {
        font-size: 18px;
    }

    .scale-options {
        flex-wrap: wrap;
    }

    .scale-number {
        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
    }
}

/* ===============================================
   TEST EXPRESS STYLES
   =============================================== */
.test-express-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

.express-header {
    text-align: center;
    margin-bottom: var(--space-8);
    padding: var(--space-8);
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden;
}

.express-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.express-header.tdah::before {
    background: var(--gradient-primary);
}

.express-header.tsa::before {
    background: var(--gradient-secondary);
}

.express-header.psychopathy::before {
    background: linear-gradient(135deg, var(--red) 0%, var(--pink) 100%);
}

.express-header.schizophrenia::before {
    background: var(--gradient-purple);
}

.express-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--gray-900);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.express-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.express-icon.tdah {
    background: var(--gradient-primary);
}

.express-icon.tsa {
    background: var(--gradient-secondary);
}

.express-icon.psychopathy {
    background: linear-gradient(135deg, var(--red) 0%, var(--pink) 100%);
}

.express-icon.schizophrenia {
    background: var(--gradient-purple);
}

.express-subtitle {
    font-size: 18px;
    color: var(--gray-600);
    margin-bottom: var(--space-4);
}

.express-info {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.express-info-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    color: var(--gray-500);
    font-weight: 500;
}

/* Progress Bar */
.progress-container {
    margin-bottom: var(--space-8);
}

.progress-bar-container {
    background: var(--gray-200);
    height: 8px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.progress-bar {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: var(--radius-sm);
}

.progress-bar.tdah {
    background: var(--gradient-primary);
}

.progress-bar.tsa {
    background: var(--gradient-secondary);
}

.progress-bar.psychopathy {
    background: linear-gradient(135deg, var(--red) 0%, var(--pink) 100%);
}

.progress-bar.schizophrenia {
    background: var(--gradient-purple);
}

.progress-text {
    text-align: center;
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
}

/* Question Cards */
.question-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
}

.question-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.question-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--space-3);
}

.question-text {
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-6);
    line-height: 1.4;
}

/* Response Options */
.response-options {
    display: grid;
    gap: var(--space-3);
}

.response-option {
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.response-option:hover {
    border-color: var(--primary);
    background: rgba(0, 122, 255, 0.05);
}

.response-option.selected {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.response-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.response-option label {
    cursor: pointer;
    font-weight: 500;
    margin: 0;
    width: 100%;
    display: block;
}

/* Navigation Buttons */
.navigation-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    margin-top: var(--space-8);
    flex-wrap: wrap;
}

.btn-express {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-xl);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-express.btn-secondary {
    background: var(--gray-600);
    color: white;
}

.btn-express.btn-secondary:hover {
    background: var(--gray-700);
    transform: translateY(-1px);
}

.btn-express.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-express.btn-primary:hover {
    background: #0056CC;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-express.btn-primary:disabled {
    background: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ===============================================
   RESULTS EXPRESS STYLES
   =============================================== */
.results-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

.results-header {
    text-align: center;
    margin-bottom: var(--space-8);
    padding: var(--space-8);
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.results-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.results-header.tdah::before {
    background: var(--gradient-primary);
}

.results-header.tsa::before {
    background: var(--gradient-secondary);
}

.results-header.psychopathy::before {
    background: linear-gradient(135deg, var(--red) 0%, var(--pink) 100%);
}

.results-header.schizophrenia::before {
    background: var(--gradient-purple);
}

.results-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    margin: 0 auto var(--space-4);
}

.results-icon.tdah {
    background: var(--gradient-primary);
}

.results-icon.tsa {
    background: var(--gradient-secondary);
}

.results-icon.psychopathy {
    background: linear-gradient(135deg, var(--red) 0%, var(--pink) 100%);
}

.results-icon.schizophrenia {
    background: var(--gradient-purple);
}

/* ===============================================
   AUTRES TESTS SECTION STYLES (Page d'accueil)
   =============================================== */
.autres-tests-section {
    margin-top: var(--space-16);
    padding: var(--space-12) 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--gray-200);
}

.autres-tests-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.autres-tests-header h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.autres-tests-header p {
    color: var(--gray-600);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.autres-tests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
    padding: 0 var(--space-4);
}

.autre-test-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.autre-test-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.autre-test-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin: 0 auto var(--space-4);
}

.autre-test-icon.bipolar {
    background: var(--bipolaire) !important;
    /* Jaune doré */
    color: white !important;
}

.autre-test-icon.hpi {
    background: var(--hpi) !important;
    /* Vert émeraude */
    color: white !important;
}

.autre-test-icon.psychopathy {
    background: var(--psychopathie) !important;
    /* Gris */
    color: white !important;
}

.autre-test-icon.schizophrenia {
    background: var(--schizophrenie) !important;
    /* Mauve */
    color: white !important;
}

.autre-test-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.autre-test-card p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: var(--space-3);
}

.test-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.test-badge.nouveau {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    animation: pulse 2s infinite;
}

.autre-test-buttons {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-top: var(--space-4);
}

.autre-test-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 80px;
}

.autre-test-link:not(.express) {
    background: var(--primary);
    color: white;
    border: 2px solid var(--primary);
}

.autre-test-link:not(.express):hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
}

.autre-test-link.express {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.autre-test-link.express:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.autres-tests-cta {
    text-align: center;
    margin-top: var(--space-8);
}

.btn-large {
    padding: var(--space-4) var(--space-8);
    font-size: 1.1rem;
    font-weight: 600;
}

/* Styles pour les icônes de test TDAH enfant */
.test-icon.tdah-enfant {
    background: var(--tdah-enfant) !important;
}

.results-icon.tdah-enfant {
    background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
}

.results-header.tdah-enfant::before {
    background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
}

/* Responsive pour les autres tests */
@media (max-width: 1024px) {
    .autres-tests-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-4);
    }

    .autres-tests-header h3 {
        font-size: 1.5rem;
    }

    .autres-tests-section {
        margin-top: var(--space-12);
        padding: var(--space-8) var(--space-4);
    }
}

.results-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--gray-900);
}

.results-subtitle {
    font-size: 18px;
    color: var(--gray-600);
    margin-bottom: var(--space-4);
}

.user-code {
    display: inline-block;
    background: var(--gray-100);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--gray-700);
    font-size: 14px;
}

/* Result Card */
.result-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
}

.result-level {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--gray-900);
    text-align: center;
}

.result-level.faible {
    color: var(--secondary);
}

.result-level.modere {
    color: var(--warning);
}

.result-level.eleve {
    color: var(--danger);
}

.result-level.tres_eleve {
    color: var(--red);
}

.result-description {
    font-size: 18px;
    line-height: 1.6;
    color: var(--gray-700);
    text-align: center;
    margin-bottom: var(--space-6);
}

/* Recommendations */
.recommendations {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-6);
}

.recommendations h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

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

.recommendations li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-700);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.recommendations li:last-child {
    border-bottom: none;
}

.recommendations li::before {
    content: "✓";
    color: var(--primary);
    font-weight: bold;
    margin-top: 2px;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    margin-top: var(--space-8);
    flex-wrap: wrap;
}

.btn-result {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-xl);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-result.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-result.btn-primary:hover {
    background: #0056CC;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: white;
}

.btn-result.btn-secondary {
    background: var(--gray-600);
    color: white;
}

.btn-result.btn-secondary:hover {
    background: var(--gray-700);
    transform: translateY(-1px);
    color: white;
}

.btn-result.btn-outline {
    background: transparent;
    border: 2px solid var(--gray-300);
    color: var(--gray-700);
}

.btn-result.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(0, 122, 255, 0.05);
}

/* Disclaimer */
.disclaimer {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-8);
    text-align: center;
}

.disclaimer h5 {
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.disclaimer p {
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* Error Messages */
.error-message,
.error-alert {
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    text-align: center;
}

.error-alert {
    padding: var(--space-4);
}

/* ===============================================
   MODAL & OVERLAYS
   =============================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal {
    transform: scale(1);
}

/* ===============================================
   LOADING & STATES
   =============================================== */
.loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-600);
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-top: 2px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===============================================
   ALERTS & NOTIFICATIONS
   =============================================== */
.alert {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    border-left: 4px solid;
}

.alert-info {
    background: rgba(0, 122, 255, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.alert-success {
    background: rgba(52, 199, 89, 0.1);
    border-color: var(--secondary);
    color: var(--secondary);
}

.alert-warning {
    background: rgba(255, 149, 0, 0.1);
    border-color: var(--warning);
    color: var(--warning);
}

.alert-danger {
    background: rgba(255, 59, 48, 0.1);
    border-color: var(--danger);
    color: var(--danger);
}


/* ===============================================
   ANIMATIONS
   =============================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* ===============================================
   RESPONSIVE DESIGN
   =============================================== */

/* Desktop par défaut - Menu principal visible */
.nav-menu {
    display: flex !important;
    list-style: none;
    gap: var(--space-8);
    align-items: center;
}

.mobile-menu-btn {
    display: none !important;
}

.mobile-menu-overlay {
    display: none !important;
}

/* Mobile uniquement - en dessous de 768px */
@media (max-width: 1024px) {

    /* Masquer le menu principal sur mobile */
    .nav-menu {
        display: none !important;
    }

    /* Afficher le bouton mobile */
    .mobile-menu-btn {
        display: block !important;
    }

    /* Permettre l'affichage du menu mobile */
    .mobile-menu-overlay {
        display: block !important;
    }

    .hero {
        padding: calc(80px + var(--space-12)) 0 var(--space-16);
    }

    .hero-title {
        font-size: 42px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .tests-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    .page-title {
        font-size: 36px;
    }

    .card,
    .test-card {
        padding: var(--space-6);
    }


    .container {
        padding: 0 var(--space-4);
    }

    /* Test Express responsive */
    .test-express-container {
        padding: var(--space-6) var(--space-4);
    }

    .express-title {
        font-size: 24px;
        flex-direction: column;
        gap: var(--space-2);
    }

    .express-info {
        flex-direction: column;
        gap: var(--space-3);
        align-items: center;
    }

    .question-card {
        padding: var(--space-6);
    }

    .question-text {
        font-size: 18px;
    }

    .navigation-buttons {
        flex-direction: column;
    }

    .btn-express {
        width: 100%;
        justify-content: center;
    }

    /* Results responsive */
    .results-container {
        padding: var(--space-6) var(--space-4);
    }

    .results-title {
        font-size: 24px;
    }

    .result-card {
        padding: var(--space-6);
    }

    .action-buttons {
        flex-direction: column;
    }

    .btn-result {
        width: 100%;
        justify-content: center;
    }

    /* Wiki responsive */
    .wiki-main-container {
        grid-template-columns: 1fr !important;
        gap: var(--space-6);
        padding: var(--space-6) var(--space-4);
    }

    .wiki-sidebar {
        position: static;
        order: 2;
    }

    .wiki-content {
        padding: var(--space-6);
    }

    .wiki-content h1 {
        font-size: 32px;
    }

    .wiki-content h2 {
        font-size: 24px;
    }

    .wiki-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wiki-symptoms-grid {
        grid-template-columns: 1fr;
    }
}

/* Très petits écrans - en dessous de 480px */
@media (max-width: 1024px) {
    .hero-content {
        padding: 0 var(--space-4);
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .nav-container {
        padding: var(--space-3) var(--space-4);
    }

    .logo-text {
        font-size: 18px;
    }

    .wiki-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===============================================
   UTILITY CLASSES
   =============================================== */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: var(--space-1);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-3 {
    margin-top: var(--space-3);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mt-8 {
    margin-top: var(--space-8);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: var(--space-1);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-3 {
    margin-bottom: var(--space-3);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

.fade-in {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

/* ===============================================
   ACCESSIBILITY
   =============================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Focus styles */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background: rgba(0, 122, 255, 0.2);
    color: var(--gray-900);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ===============================================
   TEST COMPLET - EXTENSIONS POUR HARMONISATION
   =============================================== */

/* Styles spécifiques pour les tests complets utilisant le design express */
.test-page .test-express-container {
    max-width: 900px;
    /* Un peu plus large pour les tests complets */
}

/* Status indicators pour les questions */
.question-status.answered {
    color: var(--success);
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
}

/* Extension des progress bars pour les tests complets */
.test-complet .progress-bar {
    background: var(--gradient-sunset);
}

/* Amélioration de la navigation pour tests complets */
.navigation-buttons {
    margin-top: var(--space-8);
}

/* Support pour les types de questions additionnelles (scale, textarea) */
.scale-container {
    margin: var(--space-4) 0;
}

.scale-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
}

.scale-options {
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
}

/* ===============================================
   PRIVACY PAGE - POLITIQUE DE CONFIDENTIALITÉ
   =============================================== */

.privacy-page {
    background: var(--gray-50);
    min-height: 100vh;
}

.privacy-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
}

.privacy-header {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
    border-left: 4px solid var(--primary);
}

.back-nav {
    margin-bottom: var(--space-6);
}

.back-link {
    color: var(--gray-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
    transition: all 0.2s ease;
}

.back-link:hover {
    color: var(--primary);
    text-decoration: none;
    transform: translateX(-2px);
}

.privacy-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.privacy-title i {
    color: var(--primary);
}

.privacy-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.info-item {
    font-size: 14px;
    color: var(--gray-700);
}

.privacy-content {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-8);
}

.privacy-section {
    margin-bottom: var(--space-8);
}

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

.privacy-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--primary);
}

.privacy-section h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: var(--space-6) 0 var(--space-3) 0;
}

.privacy-section p {
    line-height: 1.7;
    color: var(--gray-700);
    margin-bottom: var(--space-4);
}

.privacy-section ul {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.privacy-section li {
    margin-bottom: var(--space-2);
    line-height: 1.6;
    color: var(--gray-700);
}

.contact-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--secondary);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: var(--space-4) 0;
}

.contact-card p {
    margin-bottom: var(--space-2);
}

.contact-card p:last-child {
    margin-bottom: 0;
}

.important-notice {
    background: linear-gradient(135deg, #fef2f2 0%, #fef7ff 100%);
    border: 1px solid #fca5a5;
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: var(--space-4) 0;
}

.important-notice h5 {
    color: var(--danger);
    font-weight: 600;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.important-notice p {
    color: var(--gray-800);
    margin-bottom: 0;
}

.info-notice {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: var(--space-4) 0;
}

.info-notice p {
    color: var(--gray-800);
    margin-bottom: 0;
}

.engagement-notice {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    border-left: 4px solid var(--success);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: var(--space-8) 0 0 0;
}

.engagement-notice h5 {
    color: var(--success);
    font-weight: 600;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.engagement-notice p {
    color: var(--gray-800);
    margin-bottom: 0;
}

.highlight {
    color: var(--tdah);
    font-weight: 600;
}

/* Responsive design */
@media (max-width: 1024px) {
    .privacy-container {
        padding: var(--space-4) var(--space-3);
    }

    .privacy-header,
    .privacy-content {
        padding: var(--space-6);
    }

    .privacy-title {
        font-size: 2rem;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .privacy-info {
        grid-template-columns: 1fr;
    }
}

.scale-option {
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    flex: 1;
    position: relative;
}

.scale-option:hover {
    border-color: var(--primary);
    background: rgba(0, 122, 255, 0.05);
}

.scale-option.selected {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.scale-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.scale-number {
    font-weight: 600;
    font-size: 16px;
}

/* Textarea styling pour les questions ouvertes */
.form-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--space-4);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-size: 16px;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* Checkbox styling harmonisé */
.checkbox-option {
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.checkbox-option:hover {
    border-color: var(--primary);
    background: rgba(0, 122, 255, 0.05);
}

.checkbox-option input[type="checkbox"]:checked+.checkbox-custom+.checkbox-label {
    color: var(--primary);
    font-weight: 600;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm);
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-option input[type="checkbox"]:checked+.checkbox-custom {
    background: var(--primary);
    border-color: var(--primary);
}

.checkbox-option input[type="checkbox"]:checked+.checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

/* Question help styling */
.question-help {
    background: var(--gray-50);
    border-left: 4px solid var(--primary);
    padding: var(--space-3);
    margin: var(--space-3) 0;
    font-size: 14px;
    color: var(--gray-700);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.question-help i {
    color: var(--primary);
    margin-right: var(--space-2);
}

/* Responsive adjustments for test complet */
@media (max-width: 1024px) {
    .test-page .test-express-container {
        padding: var(--space-4);
    }

    .scale-options {
        flex-wrap: wrap;
    }

    .scale-option {
        min-width: 60px;
    }

    .navigation-buttons {
        flex-direction: column;
        gap: var(--space-3);
    }

    .btn-express {
        width: 100%;
        justify-content: center;
    }
}

/* ===============================================
   USER-INFO STYLES (INTÉGRÉS DANS STYLES.CSS)
   =============================================== */

/* === STYLES POUR LA PAGE DE SUCCÈS === */
.success-actions {
    text-align: center;
    margin-top: 2rem;
}

.btn-large {
    font-size: 1.1rem;
    padding: 1rem 2rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.btn-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.success-help {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--gray-600);
    font-style: italic;
}

/* === STYLES POUR LE CODE UTILISATEUR === */
.user-code-display {
    background: var(--gray-100);
    color: var(--gray-900);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: 1px;
    border: 1px solid var(--gray-200);
}

.user-code-display:hover {
    background: var(--gray-200);
    color: var(--gray-900);
    border-color: var(--primary);
}

/* === STYLES POUR LE FORMULAIRE === */
.form-group .form-help {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* === RESPONSIVE POUR USER-INFO === */
@media (max-width: 1024px) {
    .btn-large {
        width: 100%;
        justify-content: center;
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
    }

    .success-actions {
        margin-top: 1.5rem;
    }

    .user-code-display {
        font-size: 0.9rem;
        letter-spacing: 0.5px;
    }
}

/* === STYLES POUR LES PROBABILITÉS D'ANALYSE === */
.probability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.probability-item {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.probability-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.15);
}

.probability-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
    line-height: 1.4;
    min-height: 2.8rem;
    display: flex;
    align-items: center;
}

.probability-bar {
    background: #f3f4f6;
    border-radius: 8px;
    height: 40px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    position: relative;
}

.probability-fill {
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.6s ease;
    min-width: 50px;
}

.probability-fill.tdah {
    background: var(--gradient-primary);
    /* Orange TDAH */
}

.probability-fill.tsa {
    background: var(--gradient-secondary);
    /* Bleu TSA */
}

.probability-fill.psychopathy {
    background: var(--gradient-psychopathy);
    /* Gris psychopathie */
}

.probability-fill.schizophrenia {
    background: var(--gradient-purple);
    /* Mauve schizophrénie */
}

.probability-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .probability-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .probability-item {
        padding: 1rem;
    }

    .probability-item h4 {
        font-size: 1rem;
        min-height: auto;
    }
}


/* ===============================================
   MISE À JOUR DES COULEURS TESTS AVEC NOUVELLES COULEURS OFFICIELLES
   =============================================== */

/* Test Cards - Couleurs officielles */
.test-card.tdah .test-icon {
    background: var(--gradient-primary);
    /* Orange TDAH */
}

.test-card.tsa .test-icon {
    background: var(--gradient-secondary);
    /* Bleu TSA */
}

.test-card.tdah-enfant .test-icon {
    background: var(--gradient-primary);
    /* Orange TDAH enfant */
}

.test-card.multi-domain .test-icon {
    background: var(--gradient-sunset);
    /* Multi-domaines */
}

/* Autres tests - nouvelles couleurs */
.autre-test-icon.bipolar {
    background: var(--bipolaire) !important;
    /* Jaune doré */
    color: white !important;
}

.autre-test-icon.hpi {
    background: var(--hpi) !important;
    /* Vert émeraude */
    color: white !important;
}

.autre-test-icon.psychopathy {
    background: var(--psychopathie) !important;
    /* Gris */
    color: white !important;
}

.autre-test-icon.schizophrenia {
    background: var(--schizophrenie) !important;
    /* Mauve */
    color: white !important;
}

/* Mise à jour des focus et hover states */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    /* Orange TDAH */
    outline-offset: 2px;
}

/* Selection avec couleur primaire orange */
::selection {
    background: rgba(255, 149, 0, 0.2);
    /* Orange TDAH transparent */
    color: var(--gray-900);
}

/* Progress bars avec couleurs appropriées */
.progress-tdah {
    background: var(--gradient-primary);
}

.progress-tsa {
    background: var(--gradient-secondary);
}

.progress-bipolar {
    background: var(--gradient-bipolar);
}

.progress-hpi {
    background: var(--gradient-hpi);
}

.progress-psychopathy {
    background: var(--gradient-psychopathy);
}

.progress-schizophrenia {
    background: var(--gradient-purple);
}

/* Test icons avec gradients */
.test-icon--sunset {
    background: var(--gradient-sunset);
}

/* Bouton premium */
.btn-premium {
    background: var(--orange);
    font-size: 18px;
    padding: var(--space-5) var(--space-8);
}

/* Titre des statistiques */
.stats-title {
    color: white;
    margin-bottom: var(--space-12);
}

/* Section information avec background */
.information-section {
    padding: var(--space-24) 0;
    background: white;
}

/* Information section classes pour remplacer les styles inline */
.info-disorder-section {
    margin-bottom: var(--space-20);
}

.info-disorder-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.info-disorder-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.info-disorder-icon--tdah {
    background: var(--tdah-adulte) !important;
}

.info-disorder-icon--tsa {
    background: var(--tsa) !important;
}

.info-disorder-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.info-disorder-subtitle {
    color: var(--gray-600);
    margin: 0;
    font-size: 18px;
}

.info-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.info-stats-card {
    background: var(--gray-50);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary);
}

.info-stats-card--tsa {
    border-left-color: var(--secondary);
}

.info-stats-title {
    color: var(--primary);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.info-stats-title--tsa {
    color: var(--secondary);
}

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

.info-stats-item {
    margin-bottom: var(--space-2);
    display: flex;
    justify-content: space-between;
}

.info-stats-item:last-child {
    margin-bottom: 0;
}

.info-types-container {
    margin-bottom: var(--space-3);
}

.info-types-item {
    margin-bottom: var(--space-3);
}

.info-types-item:last-child {
    margin-bottom: 0;
}

.info-types-label {
    color: var(--gray-800);
}

.info-types-description {
    color: var(--gray-600);
    font-size: 14px;
    margin: var(--space-1) 0;
}

.info-guides-section {
    text-align: center;
    margin-top: var(--space-8);
}

.info-guides-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.info-guide-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.info-guide-btn--primary {
    background: var(--primary);
    color: white;
}

.info-guide-btn--secondary {
    background: var(--secondary);
    color: white;
}

.info-guide-btn--outline {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.info-guide-btn--outline-secondary {
    background: white;
    color: var(--secondary);
    border: 2px solid var(--secondary);
}

.info-guide-description {
    color: var(--gray-600);
    font-size: 14px;
    margin-top: var(--space-3);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.info-cta-section {
    text-align: center;
    background: var(--gray-50);
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--gray-200);
}

.info-cta-title {
    color: var(--gray-800);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.info-cta-description {
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto var(--space-4);
    line-height: 1.6;
}

/* Blog page classes manquantes */
.blog-container {
    background: white;
    min-height: 100vh;
}

.blog-hero {
    background: var(--gray-50);
    padding: var(--space-16) 0;
}

.featured-articles {
    background: white;
    padding: var(--space-16) 0;
}

.all-articles {
    background: var(--gray-50);
    padding: var(--space-16) 0;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.featured-article {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.article-image {
    position: relative;
    overflow: hidden;
}

.article-content {
    padding: var(--space-6);
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    font-size: 0.9rem;
    color: var(--gray-600);
}

.article-excerpt {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.article-footer {
    border-top: 1px solid var(--gray-200);
    padding-top: var(--space-4);
}

.read-more {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: var(--secondary);
}

.article-category {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    background: var(--primary);
    color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: 0.8rem;
    font-weight: 600;
}

.blog-categories {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-8);
}

.category-filter {
    padding: var(--space-3) var(--space-6);
    background: white;
    color: var(--gray-700);
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    border: 2px solid var(--gray-200);
}

.category-filter.active,
.category-filter:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--gray-900);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--gray-600);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* CSS migré depuis header.php */
/* Reset et styles de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: var(--gray-800);
    background: white;
}

/* Header et navigation */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.3s ease;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--gray-900);
    font-weight: 700;
    font-size: 1.5rem;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: var(--space-2);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--space-6);
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: var(--gray-700);
    font-weight: 500;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
    background: var(--primary);
    color: white;
}

.nav-cta {
    background: var(--primary);
    color: white !important;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--gray-700);
    cursor: pointer;
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.mobile-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: white;
    padding: var(--space-6);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-menu-overlay.active {
    display: block;
}

.mobile-menu-overlay.active .mobile-menu {
    transform: translateX(0);
}

.main-content {
    margin-top: 80px;
    min-height: calc(100vh - 80px);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Flash messages */
.flash-messages {
    position: fixed;
    top: 100px;
    right: 1rem;
    z-index: 1500;
    max-width: 400px;
}

.flash-message {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-2);
    box-shadow: var(--shadow-sm);
    transform: translateX(100%);
    animation: slideIn 0.3s ease forwards;
}

@keyframes slideIn {
    to {
        transform: translateX(0);
    }
}

.alert-success {
    border-left: 4px solid var(--secondary);
}

.alert-error {
    border-left: 4px solid #EF4444;
}

.alert-warning {
    border-left: 4px solid var(--accent);
}

.alert-info {
    border-left: 4px solid var(--primary);
}

.flash-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-600);
}

/* ===============================================
   CLASSES UTILITAIRES - CHARTE GRAPHIQUE
   =============================================== */

/* Couleurs de texte troubles */
.text-tdah {
    color: var(--tdah);
}

.text-tsa {
    color: var(--tsa);
}

.text-hpi {
    color: var(--hpi);
}

.text-bipolaire {
    color: var(--bipolaire);
}

.text-schizophrenie {
    color: var(--schizophrenie);
}

.text-psychopathie {
    color: var(--psychopathie);
}

/* Couleurs interface */
.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.text-muted {
    color: var(--gray-secondary);
}

.text-white {
    color: white;
}

/* Classes display */
.d-inline {
    display: inline;
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

/* Flexbox utilitaires */
.flex-center-gap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.flex-center-wrap {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.flex-end-gap {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

/* Grid utilitaires */
.grid-wiki-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-10);
    padding: var(--space-8) 0;
}

.grid-2-gap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Composants spéciaux */
.cta-center-section {
    text-align: center;
    margin-top: var(--space-16);
    padding: var(--space-8);
    background: var(--cream);
    border-radius: var(--radius-xl);
}

.subtitle-centered {
    margin-bottom: var(--space-6);
    color: var(--gray-secondary);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.code-badge {
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

/* Hero title avec highlight - FORCER ORANGE */
.hero-title .highlight,
.hero .hero-title .highlight,
h1.hero-title .highlight,
.hero-content .hero-title .highlight,
.orange-tdah {
    color: var(--tdah) !important;
    /* Orange pour "Neuroatypiques" */
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
}

/* ===============================================
   NAVIGATION RESPONSIVE OPTIMISÉE
   =============================================== */

/* Texte plus court pour certains liens longs */
.nav-link[href="/resume-test.php"] {
    font-size: 14px;
    /* Encore plus petit pour ce lien long */
}

/* Responsive navigation - optimisations progressives */
@media (max-width: 1200px) {
    .nav-menu {
        gap: var(--space-2);
        /* Encore plus serré sur moyens écrans */
    }

    .nav-link {
        font-size: 14px;
        padding: var(--space-2);
    }

    .logo-text {
        font-size: 1.3rem;
        /* Légèrement plus petit */
    }

    .logo-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
}

/* Basculer vers mobile plus tôt pour éviter le débordement */
@media (max-width: 1100px) {
    .nav-menu {
        display: none;
        /* Masquer le menu desktop */
    }

    .mobile-menu-btn {
        display: block;
        /* Afficher le bouton mobile */
    }
}

/* Solution alternative : raccourcir les textes sur moyens écrans */
@media (max-width: 1300px) and (min-width: 1101px) {

    /* Optimisation pour "Reprendre un test" */
    .nav-link[href="/resume-test.php"] {
        font-size: 13px;
        padding: var(--space-1) var(--space-2);
    }
}

/* Pour les très grands écrans */
@media (min-width: 1400px) {
    .nav-container {
        max-width: 1600px;
    }

    .nav-menu {
        gap: var(--space-6);
        /* Plus d'espace disponible */
    }

    .nav-link {
        font-size: 16px;
        /* Taille normale */
        padding: var(--space-2) var(--space-4);
    }
}

/* Solution fallback : menu sur deux lignes si vraiment nécessaire */
@media (max-width: 1050px) and (min-width: 769px) {
    .nav-container {
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
    }

    .nav-menu {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .logo {
        margin-bottom: var(--space-2);
    }
}

/* Dark mode adjustments pour navigation */
[data-theme="dark"] .nav-link {
    color: var(--gray-300);
}

[data-theme="dark"] .nav-link:hover {
    color: var(--primary-light);
    background: var(--gray-800);
}

/* Responsive standard */
@media (max-width: 1024px) {
    .nav-menu {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .nav-container {
        padding: 1rem;
    }

    .container {
        padding: 0 1rem;
    }

    .grid-wiki-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* Styles supplémentaires pour forcer 3 colonnes sur mobile */
@media (max-width: 1024px) {

    .test-card,
    .test-card-modern {
        min-width: 0;
        font-size: 0.875rem;
    }

    .test-card h3,
    .test-card-modern h3 {
        font-size: 1rem;
    }

    .test-icon,
    .test-icon-modern {
        width: 40px;
        height: 40px;
    }

    .test-card-content {
        padding: 1rem;
    }
}

@media (max-width: 1024px) {

    .tests-grid,
    .tests-grid-modern {
        gap: 0.5rem;
    }

    .test-card,
    .test-card-modern {
        font-size: 0.75rem;
        padding: 0.75rem;
    }

    .test-card h3,
    .test-card-modern h3 {
        font-size: 0.875rem;
    }

    .test-icon,
    .test-icon-modern {
        width: 32px;
        height: 32px;
    }

    .test-card-content {
        padding: 0.75rem;
    }

    .test-card p,
    .test-card-modern p {
        font-size: 0.7rem;
        line-height: 1.3;
    }
}

/* ===============================================
   AMÉLIORATION BOUTONS AUTRES-TESTS
   =============================================== */

/* Amélioration des actions de test pour plus de lisibilité */
.test-card .test-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.test-card .test-actions .btn {
    text-align: center;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.test-card .test-actions .btn-primary {
    order: 1;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}

.test-card .test-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

.test-card .test-actions .btn-secondary {
    order: 2;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.test-card .test-actions .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
}

.test-card .test-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #10b981;
    text-align: center;
    order: 3;
    margin-top: 0.5rem;
}

/* Responsive pour les boutons */
@media (max-width: 1024px) {
    .test-card .test-actions .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
        min-height: 44px;
    }
}

/* ========================================
   USER DASHBOARD MENU (Header)
======================================== */

.user-actions {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

/* Bouton Dashboard (utilisateur non connecté) */
.dashboard-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    min-width: max-content;
}

.dashboard-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    text-decoration: none;
    color: white;
}

.dashboard-btn i {
    font-size: 1.1rem;
}

/* Menu utilisateur (utilisateur connecté) */
.user-menu {
    position: relative;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.user-menu-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.user-name {
    font-size: 0.9rem;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-btn i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.user-menu.open .user-menu-btn i {
    transform: rotate(180deg);
}

/* Dropdown menu */
.user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.user-menu.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    width: 100%;
    background: none;
    cursor: pointer;
}

.dropdown-item:hover {
    background: #f8fafc;
    color: #667eea;
    text-decoration: none;
}

.dropdown-item i {
    font-size: 1rem;
    width: 16px;
    flex-shrink: 0;
}

.dropdown-separator {
    height: 1px;
    background: #e5e7eb;
    margin: 0.5rem 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .user-actions {
        order: 3;
        margin-left: 0.5rem;
    }

    .dashboard-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    .dashboard-btn span {
        display: none;
    }

    .user-menu-btn {
        padding: 0.5rem;
    }

    .user-name {
        display: none;
    }

    .user-dropdown {
        right: -0.5rem;
        min-width: 180px;
    }
}

/* Mode paysage mobile - utiliser le même style que le portrait */
@media (max-width: 768px) and (orientation: landscape) {
    .dashboard-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
    }

    .dashboard-btn span {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .dashboard-btn {
        padding: 0.5rem;
    }

    .user-dropdown {
        right: -1rem;
        min-width: 160px;
    }

    .dropdown-item {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
}

/* ========================================
   NEWSLETTER WIDGET (Footer)
======================================== */

.newsletter-section {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    border: 1px solid rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.newsletter-section>* {
    position: relative;
    z-index: 2;
}

.newsletter-section h4 {
    color: #1f2937;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.newsletter-section h4 i {
    color: #667eea;
    font-size: 1rem;
}

.newsletter-description {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}

.newsletter-form {
    width: 100%;
}

.newsletter-input-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.newsletter-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #374151;
    background: white;
    transition: all 0.3s ease;
    min-width: 0;
}

.newsletter-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.newsletter-input::placeholder {
    color: #9ca3af;
}

.newsletter-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

.newsletter-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.newsletter-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.newsletter-btn.loading {
    pointer-events: none;
}

.newsletter-btn i {
    font-size: 0.9rem;
}

.newsletter-message {
    display: none;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.newsletter-message.success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.newsletter-message.error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.newsletter-gdpr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.3;
    opacity: 0.9;
}

.newsletter-gdpr i {
    color: #667eea;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .newsletter-section {
        padding: 1.5rem;
    }

    .newsletter-input-group {
        flex-direction: column;
        gap: 0.75rem;
    }

    .newsletter-btn {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .newsletter-section {
        padding: 1.25rem;
        margin: 0 -0.5rem;
    }

    .newsletter-section h4 {
        font-size: 1rem;
    }

    .newsletter-description {
        font-size: 0.85rem;
        margin-bottom: 1.25rem;
    }

    .newsletter-input {
        padding: 0.65rem 0.85rem;
        font-size: 0.85rem;
    }

    .newsletter-btn {
        padding: 0.65rem 1rem;
        font-size: 0.85rem;
    }

    .newsletter-gdpr {
        font-size: 0.75rem;
    }
}

@media (max-width: 1024px) {
    .newsletter-section {
        padding: 1rem;
    }

    .newsletter-section h4 {
        font-size: 0.95rem;
    }

    .newsletter-description {
        font-size: 0.8rem;
    }

    .newsletter-input {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }

    .newsletter-btn {
        padding: 0.6rem 0.9rem;
        font-size: 0.8rem;
    }
}