/* ========================================
           🎯 CONTENEUR PRINCIPAL
           ======================================== */
        .nombres-doubles-container {
            max-width: 400px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.1);
        }


/* Centrer le premier tableau */
.matrice-nombres {
    text-align: center;
}


.matrice-nombres > div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Centrer les flèches du premier tableau */
.fleches {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.5rem 0;
}

.fleches span {
    margin: 0 8px;
}

        /* ========================================
           📝 TITRE ET FORMULE
           ======================================== */
        .section-title {
            text-align: center;
            font-size: 1.5rem;
            font-weight: 600;
            color: #334155;
            margin: 0 0 1rem 0;
        }

        .formule {
            text-align: center;
            font-size: 1.8rem;
            font-weight: 700;
            color: #ef4444;
            margin: 0 0 2rem 0;
            letter-spacing: 0.1em;
        }


.tagline {
    font-size: 1.1rem;
    color: #6b7280;
    font-style: italic;
    font-weight: 500;
    text-align: center;
    margin: 0.5rem 0 1.5rem 0;
    letter-spacing: 0.02em;
    opacity: 0.9;
    
}

/* Variante avec fond coloré si nécessaire */
.tagline.highlight {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(167, 139, 250, 0.1));
    color: #8b5cf6;
    padding: 0.8rem 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    display: inline-block;
    font-style: normal;
    font-weight: 600;
}

        /* ========================================
           🎲 MATRICE 3x3 - BASÉE SUR .nombre
           ======================================== */
        .matrice-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 2rem;
            justify-items: center;

        }

        /* Style basé sur votre .nombre existant */
        .nombre {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        /* Cases colorées (1 et 2) */
        .nombre.active-1 {
            background: #ef4444;
            color: white;
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
        }

        .nombre.active-2 {
            background: #f97316;
            color: white;
            box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
        }

        /* Cases grises (vides) */
        .nombre.empty {
            background: #e2e8f0;
            color: #94a3b8;
            border: 2px dashed #cbd5e1;
            font-size: 1.5rem;
        }

        .nombre.empty:hover {
            background: #f1f5f9;
            border-color: #8b5cf6;
            transform: scale(1.05);
        }

        /* ========================================
           📋 LISTE À PUCES ÉLARGIE
           ======================================== */
        .proprietes-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .proprietes-list li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.2rem;
            padding: 0.8rem 0;
            border-bottom: 1px solid #f1f5f9;
        }

        .proprietes-list li:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        /* Puce colorée */
        .proprietes-list li::before {
            content: '•';
            color: #8b5cf6;
            font-size: 1.5rem;
            font-weight: bold;
            margin-right: 1rem;
            margin-top: -0.1rem;
            flex-shrink: 0;
        }

        /* Zone de texte élargie */
        .proprietes-list li .texte {
            flex: 1;
            font-size: 1rem;
            line-height: 1.5;
            color: #475569;
            min-width: 0; /* Permet le wrap du texte */
        }

        /* Formules en gras */
        .proprietes-list li .texte .formule-inline {
            font-weight: 700;
            color: #334155;
            font-family: 'Courier New', monospace;
            background: #f8fafc;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            margin: 0.3rem 0;
            display: inline-block;
        }

        /* Mots clés en couleur */
        .proprietes-list li .texte .highlight {
            color: #8b5cf6;
            font-weight: 600;
        }

       
        /* ========================================
           🎨 ANIMATIONS
           ======================================== */
        .nombre.active-1:hover,
        .nombre.active-2:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
        }

        .nombre.active-2:hover {
            box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
        }

        /* Animation d'apparition */
        .nombres-doubles-container {
            animation: fadeInUp 0.6s ease-out;
        }

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


        /* 🎯 MÊME CSS QUE NUMÉROLOGIE-PYTHAGORE - Critical CSS inline */
        .concept-intro {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(167, 139, 250, 0.05) 100%);
            padding: 2rem;
            border-radius: 16px;
            margin-bottom: 3rem;
            border: 1px solid rgba(139, 92, 246, 0.1);
        }

        .concept-intro h2 {
            color: #8525be;
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }

        .concept-intro p {
            font-size: 1.1rem;
            color: #4b5563;
            line-height: 1.7;
        }

        .content-enhanced {
            background: white;
            border-radius: 16px;
            padding: 2.5rem;
            box-shadow: 0 8px 25px rgba(139, 92, 246, 0.12);
            border: 1px solid rgba(139, 92, 246, 0.1);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .content-enhanced::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #8b5cf6, #a78bfa);
        }

        .content-enhanced:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 35px rgba(139, 92, 246, 0.18);
        }

        .image-zen {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
            padding: 1.5rem;
            transition: all 0.3s ease;
        }

        .image-zen img {
            width: 100%;
            height: auto;
            border-radius: 12px;
            transition: transform 0.3s ease;
            opacity: 1;
            display: block;
        }

        .image-zen:hover img {
            transform: scale(1.02);
        }

        .image-zen-caption {
            text-align: center;
            font-size: 0.9rem;
            color: #6b7280;
            font-style: italic;
            margin-top: 1rem;
            font-weight: 500;
        }

        .grid-1 { display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 2rem 0; }
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0; align-items: start; }
        .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin: 2rem 0; align-items: start; }
        .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin: 2rem 0; align-items: start; }




        /* Couleurs harmonisées des nombres - IDENTIQUES à Pythagore */
        .nombre-1 { background: #e74c3c; color: white; }
        .nombre-2 { background: #ff8c00; color: white; }
        .nombre-3 { background: #ffd700; color: black; }
        .nombre-4 { background: #32cd32; color: white; }
        .nombre-5 { background: #00ced1; color: white; }
        .nombre-6 { background: #87ceeb; color: black; }
        .nombre-7 { background: #1e3a8a; color: white; }
        .nombre-8 { background: #8b5cf6; color: white; }
        .nombre-9 { background: #4b0082; color: white; }

        .nombre {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin: 2px;
            border-radius: 6px;
            line-height: 30px;
            text-align: center;
            font-weight: bold;
            font-size: 0.9rem;
        }

        .highlight-box {
            background: rgba(139, 92, 246, 0.1);
            border: 2px solid rgba(139, 92, 246, 0.3);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0;
        }

        .blockquote-full-width {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(167, 139, 250, 0.05) 100%);
            border-left: 6px solid #8b5cf6;
            margin: 3rem auto;
            padding: 3rem 4rem;
            border-radius: 16px;
            box-shadow: 0 8px 25px rgba(139, 92, 246, 0.12);
            position: relative;
            overflow: hidden;
            max-width: 900px;
        }

        .blockquote-full-width::before {
            content: '"';
            position: absolute;
            top: 1rem;
            left: 2rem;
            font-size: 8rem;
            color: rgba(139, 92, 246, 0.1);
            font-family: Georgia, serif;
            line-height: 1;
        }

        .blockquote-full-width p {
            font-size: 1.4rem;
            line-height: 1.8;
            font-style: italic;
            color: #4b5563;
            margin: 0;
            text-align: justify;
            position: relative;
            z-index: 2;
        }

        .blockquote-citation {
            text-align: right;
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 2px solid rgba(139, 92, 246, 0.2);
        }

        .blockquote-citation cite {
            font-size: 1.1rem;
            font-style: normal;
            font-weight: 600;
            color: #8b5cf6;
        }

        .table-pythagore {
            background: white;
            border-radius: 12px;
            padding: 1rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .table-pythagore table {
            width: 100%;
            border-collapse: collapse;
        }

        .table-pythagore td {
            padding: 0.5rem;
            text-align: center;
            font-weight: bold;
        }

        /* Loading skeleton - IDENTIQUE à Pythagore */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .image-zen img[loading="lazy"] {
            transition: opacity 0.3s ease;
        }

        .image-zen img[loading="lazy"].loaded {
            animation: none;
            background: none;
        }

        /* Performance optimizations - IDENTIQUES */
        .above-fold { contain: layout style paint; }
        .content-enhanced { contain: layout; }
        .image-zen { contain: layout style; }

        /* Logo */
        .logo {
            image-rendering: crisp-edges;
            image-rendering: -webkit-optimize-contrast;
        }

        /* Animation d'entrée optimisée - IDENTIQUE */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .content-enhanced { animation: fadeInUp 0.6s ease-out; }


/* ========================================
   🎯 STYLES POUR LES ANIMATIONS
   ======================================== */

/* Info dynamique */
.info-dynamique {
    text-align: center;
    margin: 1rem 0;
    min-height: 100px;
    padding: 1rem;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(139, 92, 246, 0.1);
}

.formule-dynamique {
    font-size: 1.3rem;
    font-weight: bold;
    color: #ef4444;
    margin-bottom: 0.5rem;
}

.type-nombre {
    font-size: 0.95rem;
    color: #8b5cf6;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.source-nombre {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.3;
}

/* Matrice animée */
.matrice-animee {
    position: relative;
    margin: 1rem auto;
}

.matrice-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 4px !important;
    width: 120px !important;
    height: 120px !important;
    padding: 8px !important;
    background: rgba(139, 92, 246, 0.05) !important;
    border-radius: 12px !important;
    border: 2px solid rgba(139, 92, 246, 0.2) !important;
    margin: 0 auto !important;
    transition: all 0.5s ease !important;
}

.matrice-container.highlight {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3) !important;
}

.matrice-container.jackpot {
    animation: jackpotEffect 2s ease-in-out !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8) !important;
}

/* Effet jackpot */
@keyframes jackpotEffect {
    0% { transform: scale(1); }
    25% { transform: scale(1.1) rotate(2deg); }
    50% { transform: scale(1.2) rotate(-2deg); }
    75% { transform: scale(1.1) rotate(1deg); }
    100% { transform: scale(1); }
}

/* Contrôles */
.controles {
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: center !important;
    margin: 1rem 0 !important;
}

.btn {
    padding: 0.5rem 1rem !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.btn-secondary {
    background: #e2e8f0 !important;
    color: #64748b !important;
}

.btn-secondary:hover {
    background: #cbd5e1 !important;
}

.btn-secondary.active {
    background: #8b5cf6 !important;
    color: white !important;
}

/* Jackpot info */
.jackpot-info {
    color: #000 !important;
    font-weight: bold !important;
    background: rgba(255, 215, 0, 0.1) !important;
    padding: 0.5rem !important;
    border-radius: 4px !important;
    border-left: 3px solid #ffd700 !important;
}





/* ========================================
   📊 CLASSES SÉCURISÉES - AUCUN CONFLIT AVEC VOTRE CSS EXISTANT
   ======================================== */

/* Conteneur principal du tableau (NOUVEAU - pas de conflit) */
.vs-tableau {
    background: linear-gradient(135deg, #6f2ae6 0%, #8525be 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

/* En-tête du tableau (NOUVEAU) */
.vs-header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 1rem 0;
}

.vs-header div {
    padding: 0.5rem;
    font-size: 1.1rem;
}

/* Corps du tableau (NOUVEAU) */
.vs-body {
    background: white;
}

/* Lignes du tableau (NOUVEAU) */
.vs-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    padding: 0.8rem 0;
}

.vs-row:last-child {
    border-bottom: none;
}

/* Cellules du tableau (NOUVEAU) */
.vs-cell {
    padding: 0.3rem;
}

.vs-cell.num {
    font-weight: bold;
    font-size: 1.1rem;
}

.vs-cell.secret {
    font-weight: bold;
    font-size: 1.1rem;
    color: #8b5cf6;
}

/* Footer avec citation Tesla (NOUVEAU) */
.vs-footer {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    padding: 1rem;
    border-top: 2px solid #8b5cf6;
}

.tesla-quote {
    text-align: center;
    color: white;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.vs-sequence {
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
}

.vs-citation {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: block;
    color: white;
    font-style: italic;
}

/* ========================================
   🎯 MATRICES - NOMS SÉCURISÉS
   ======================================== */

/* Container des deux matrices (NOUVEAU - évite .matrices-container) */
.vs-matrices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

/* Boîte individuelle de matrice (NOUVEAU) */
.vs-matrix-box {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
}

.vs-matrix-title {
    color: #8b5cf6;
    margin: 0 0 1rem 0;
    text-align: center;
    font-size: 1.1rem;
}

/* Conteneur de la grille 3x3 (NOUVEAU - évite .matrice-grille) */
.vs-grid-wrapper {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.vs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-width: 180px;
}

/* Cellules des matrices (NOUVEAU - évite .matrice-cell) */
.vs-cube {
    color: white;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: bold;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.vs-cube:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Couleurs des cubes (NOUVEAU) */
.vs-cube.gold {
    background: linear-gradient(135deg, #f7cc62 0%, #fdd77a 100%);
}

.vs-cube.coral {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8a80 100%);
}

.vs-cube.teal {
    background: linear-gradient(135deg, #20b2aa 0%, #48d1cc 100%);
}

/* Description sous les matrices (NOUVEAU) */
.vs-description {
    text-align: center;
    margin: 0;
    font-size: 0.8rem;
    color: #666;
}

/* ========================================
   🔧 CORRECTION MATRICES AVEC STYLES INLINE
   Spécifique pour lignes 660 et 1603
   ======================================== */

/* 1. OVERRIDE BRUTAL DES STYLES INLINE SUR MOBILE */
@media (max-width: 667px) {
    
    /* CIBLER SPÉCIFIQUEMENT LA SECTION TESLA (ligne ~1603) */
    section[style*="background"] .vs-grid-wrapper,
    .vs-matrices .vs-grid-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 200px !important;
        margin: 0 auto !important;
    }
    
    .vs-matrices .vs-grid,
    section[style*="background"] .vs-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        max-width: 180px !important;
        margin: 0 auto !important;
        justify-items: center !important;
    }
    
    /* CUBES DANS MATRICES TESLA */
    .vs-matrices .vs-cube,
    section[style*="background"] .vs-cube {
        width: 45px !important;
        height: 45px !important;
        font-size: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        font-weight: bold !important;
        margin: 0 !important;
    }
    
    /* CONTENEUR GLOBAL DES MATRICES TESLA */
    .vs-matrices {
        display: block !important;
        grid-template-columns: none !important;
    }
    
    .vs-matrix-box {
        margin-bottom: 2rem !important;
        padding: 1rem !important;
        background: white !important;
        border-radius: 12px !important;
        text-align: center !important;
    }
    
    .vs-matrix-title {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
        color: #8b5cf6 !important;
    }
    
    /* SECTION AVEC STYLES INLINE (ligne ~660) */
    /* Override des div avec style="display: flex" */
    div[style*="display: flex; gap: 8px"] {
        display: flex !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Override des div avec tailles fixes */
    div[style*="width: 50px; height: 50px"] {
        width: 45px !important;
        height: 45px !important;
        font-size: 1rem !important;
        min-width: 45px !important;
        min-height: 45px !important;
    }
    
    /* CONTENEURS FLEX DES MATRICES */
    div[style*="display: flex; flex-direction: column; align-items: center"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        max-width: 200px !important;
        margin: 0 auto !important;
    }
    
    /* OVERRIDE SECTIONS 4 COLONNES QUI POSENT PROBLÈME */
    .grid-4-force {
        display: block !important;
        grid-template-columns: none !important;
    }
    
    .grid-4-force .content-enhanced {
        margin-bottom: 2rem !important;
        padding: 1rem !important;
    }
    
    /* MATRICES DANS GRID-4-FORCE */
    .grid-4-force div[style*="display: flex; gap: 8px"] {
        gap: 0.375rem !important;
    }
    
    .grid-4-force div[style*="width: 50px; height: 50px"] {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.9rem !important;
    }
}

/* 2. SPÉCIFIQUE TRÈS PETITS ÉCRANS */
@media (max-width: 375px) {
    
    .vs-matrices .vs-cube,
    section[style*="background"] .vs-cube,
    div[style*="width: 50px; height: 50px"] {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.9rem !important;
    }
    
    .vs-matrices .vs-grid,
    section[style*="background"] .vs-grid {
        max-width: 150px !important;
        gap: 0.375rem !important;
    }
    
    .vs-matrix-box {
        padding: 0.75rem !important;
    }
    
    .vs-matrix-title {
        font-size: 1rem !important;
    }
}

/* 3. CORRECTION POUR LES SECTIONS SPÉCIFIQUES */

/* Section Tesla avec background violet */
@media (max-width: 667px) {
    
    /* Footer des tableaux VS */
    .vs-footer {
        display: block !important;
        padding: 1rem !important;
    }
    
    .tesla-quote {
        text-align: center !important;
        margin-bottom: 2rem !important;
        font-size: 0.9rem !important;
    }
    
    .vs-sequence {
        font-size: 1.1rem !important;
        font-weight: bold !important;
        color: #8b5cf6 !important;
    }
    
    .vs-citation {
        font-size: 0.85rem !important;
        opacity: 0.8 !important;
    }
    
    /* Assurer que les matrices Tesla passent en vertical */
    .vs-matrices {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: center !important;
    }
}

/* 4. TABLEAU VS RESPONSIVE */
@media (max-width: 667px) {
    
    .vs-tableau {
        overflow-x: auto !important;
        padding: 1rem !important;
    }
    
    .vs-header {
        display: none !important;
    }
    
    .vs-body {
        display: block !important;
    }
    
    .vs-row {
        display: block !important;
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .vs-cell {
        display: block !important;
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    
    .vs-cell.num::before { content: "Nombre: "; font-weight: bold; }
    .vs-cell.secret::before { content: "Valeur Secrète: "; font-weight: bold; }
}

/* 5. FORCE OVERRIDE POUR ÉLÉMENTS RÉCALCITRANTS */
@media (max-width: 667px) {
    
    /* Tout div avec un background linéaire violet */
    div[style*="background: linear-gradient"][style*="8b5cf6"] {
        padding: 1.5rem 1rem !important;
        margin: 1rem 0.5rem !important;
    }
    
    /* Tout élément avec style inline de taille fixe */
    *[style*="width: 50px"],
    *[style*="height: 50px"] {
        min-width: 40px !important;
        min-height: 40px !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Conteneurs flex avec gap */
    *[style*="display: flex"][style*="gap: 8px"] {
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    /* Tout élément centré */
    *[style*="text-align: center"] {
        text-align: center !important;
        max-width: 100% !important;
    }
}

/* ========================================
   🔧 CORRECTION SPÉCIFIQUE .matrice-nombres
   Pour la section "D'où proviennent les 9 nombres réduits"
   ======================================== */

/* 1. CIBLER LA CLASSE .matrice-nombres SUR MOBILE */
@media (max-width: 667px) {
    
    /* Conteneur principal de la matrice */
    .matrice-nombres {
        padding: 1rem 0.5rem !important;
        margin: 1rem 0 !important;
        overflow-x: auto !important;
        background: rgba(248, 250, 252, 0.8) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(139, 92, 246, 0.1) !important;
    }
    
    /* Lignes de la matrice */
    .matrice-nombres > div {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.375rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0.25rem !important;
    }
    
    /* Spans nombre dans la matrice */
    .matrice-nombres .nombre {
        min-width: 35px !important;
        min-height: 35px !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 0.8rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        margin: 0.125rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Couleurs spécifiques par classe nombre */
    .matrice-nombres .nombre-1 { 
        background: linear-gradient(135deg, #ffd700, #ffb300) !important; 
        color: #333 !important; 
    }
    .matrice-nombres .nombre-2 { 
        background: linear-gradient(135deg, #ff6b6b, #e55858) !important; 
        color: white !important; 
    }
    .matrice-nombres .nombre-3 { 
        background: linear-gradient(135deg, #4ecdc4, #45b7b8) !important; 
        color: white !important; 
    }
    .matrice-nombres .nombre-4 { 
        background: linear-gradient(135deg, #45b7d1, #3498db) !important; 
        color: white !important; 
    }
    .matrice-nombres .nombre-5 { 
        background: linear-gradient(135deg, #96ceb4, #74b49b) !important; 
        color: white !important; 
    }
    .matrice-nombres .nombre-6 { 
        background: linear-gradient(135deg, #feca57, #ff9ff3) !important; 
        color: white !important; 
    }
    .matrice-nombres .nombre-7 { 
        background: linear-gradient(135deg, #a29bfe, #6c5ce7) !important; 
        color: white !important; 
    }
    .matrice-nombres .nombre-8 { 
        background: linear-gradient(135deg, #fd79a8, #e84393) !important; 
        color: white !important; 
    }
    .matrice-nombres .nombre-9 { 
        background: linear-gradient(135deg, #636e72, #2d3436) !important; 
        color: white !important; 
    }
    .matrice-nombres .nombre-0 { 
        background: #e2e8f0 !important; 
        color: #94a3b8 !important; 
        border: 1px solid #cbd5e0 !important;
    }
    
    /* Assurer que le conteneur parent ne force pas d'autres styles */
    .content-enhanced .matrice-nombres {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 2. TRÈS PETITS ÉCRANS */
@media (max-width: 375px) {
    
    .matrice-nombres .nombre {
        min-width: 30px !important;
        min-height: 30px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 0.7rem !important;
        margin: 0.1rem !important;
    }
    
    .matrice-nombres > div {
        gap: 0.25rem !important;
        padding: 0.125rem !important;
    }
    
    .matrice-nombres {
        padding: 0.75rem 0.25rem !important;
    }
}

/* 3. CORRECTION POUR LE CONTENEUR PARENT */
@media (max-width: 667px) {
    
    /* S'assurer que le grid-2 parent passe en une colonne */
    .image-zen + .content-enhanced {
        margin-top: 2rem !important;
    }
    
    /* Grid-2 contenant cette matrice */
    .grid-2:has(.matrice-nombres) {
        display: block !important;
        grid-template-columns: none !important;
    }
    
    /* Alternative si :has() n'est pas supporté */
    section .grid-2 {
        display: block !important;
        grid-template-columns: none !important;
    }
    
    section .grid-2 > div {
        margin-bottom: 2rem !important;
    }
}

/* 4. AMÉLIORATION DE LA LISIBILITÉ */
@media (max-width: 667px) {
    
    /* Texte au-dessus de la matrice */
    .content-enhanced h3 {
        font-size: 1.3rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    
    .content-enhanced p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Highlight box sous la matrice */
    .content-enhanced .highlight-box {
        padding: 1rem !important;
        margin-top: 1.5rem !important;
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    .highlight-box strong {
        color: #8b5cf6 !important;
    }
}

/* 5. RESPONSIVE TOUCH OPTIMIZED */
@media (pointer: coarse) {
    .matrice-nombres .nombre {
        min-height: 40px !important;
        min-width: 40px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* 6. FALLBACK POUR NAVIGATEURS ANCIENS */
@supports not (display: flex) {
    @media (max-width: 667px) {
        .matrice-nombres > div {
            text-align: center !important;
        }
        
        .matrice-nombres .nombre {
            display: inline-block !important;
            vertical-align: middle !important;
        }
    }
}

.nombres-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 667px) {
    .nombres-row {
        gap: 0.375rem;
    }
}



/* ========================================
   📊 CSS POUR SECTIONS HTML CORRIGÉES
   À ajouter dans style-numerologie-sacree.css
   ======================================== */

/* SECTION TYPOLOGIE - Matrices 3x3 forcées */
#typologie-nombres-sources .matrice-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 120px !important;
    height: 120px !important;
    margin: 1rem auto !important;
    padding: 8px !important;
    background: rgba(139, 92, 246, 0.05) !important;
    border-radius: 12px !important;
    border: 2px solid rgba(139, 92, 246, 0.2) !important;
    transition: all 0.5s ease !important;
}

#typologie-nombres-sources .matrice-animee {
    display: flex !important;
    justify-content: center !important;
    margin: 1rem 0 !important;
}

#typologie-nombres-sources .matrice-container .nombre {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

/* Cases vides avec symbole □ */
#typologie-nombres-sources .nombre-empty {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    border: 1px dashed #cbd5e1 !important;
    font-size: 1.2rem !important;
}

/* SECTION EXEMPLE NOMBRE 4 - Amélioration structure */
#exemple-nombre-4 .decomposition-formula {
    text-align: center;
    font-size: 1.2rem;
    margin: 1rem 0;
    color: #666;
    font-weight: 600;
}

#exemple-nombre-4 .decomposition-type {
    text-align: center;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}

#exemple-nombre-4 h4 {
    text-align: center;
    color: #333;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

/* Grilles VS améliorées */
#exemple-nombre-4 .vs-grid-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin: 1.5rem 0 !important;
}

#exemple-nombre-4 .vs-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 120px !important;
    height: 120px !important;
    border-radius: 8px !important;
    padding: 6px !important;
    background: rgba(139, 92, 246, 0.03) !important;
}

#exemple-nombre-4 .vs-cube {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
}

#exemple-nombre-4 .vs-empty {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    font-size: 1.1rem !important;
}

#exemple-nombre-4 .vs-active {
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Images des symboles avec conteneur */
#exemple-nombre-4 .symbol-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 1rem;
}

#exemple-nombre-4 .symbol-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#exemple-nombre-4 .symbol-image img:hover {
    transform: scale(1.05);
}

/* CTA centré */
#exemple-nombre-4 .cta-centered {
    text-align: center;
    padding: 2rem 1rem;
}

#exemple-nombre-4 .btn-primary {
    background: #32CD32;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
}

#exemple-nombre-4 .btn-primary:hover {
    background: #2eb82e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(50, 205, 50, 0.3);
}

/* RESPONSIVE MOBILE */
@media (max-width: 667px) {
    
    /* Grid en une colonne sur mobile */
    #typologie-nombres-sources .grid-3,
    #exemple-nombre-4 .grid-3 {
        display: block !important;
        grid-template-columns: none !important;
    }
    
    #typologie-nombres-sources .content-enhanced,
    #exemple-nombre-4 .content-enhanced,
    #exemple-nombre-4 .monde-card {
        margin-bottom: 3rem !important;
        padding: 1rem !important;
    }
    
    /* Matrices plus petites sur mobile */
    #typologie-nombres-sources .matrice-container,
    #exemple-nombre-4 .vs-grid {
        width: 100px !important;
        height: 100px !important;
        gap: 4px !important;
        padding: 6px !important;
    }
    
    #typologie-nombres-sources .matrice-container .nombre,
    #exemple-nombre-4 .vs-cube {
        font-size: 0.8rem !important;
        border-radius: 4px !important;
    }
    
    /* Info dynamique compactée */
    #typologie-nombres-sources .info-dynamique {
        min-height: 80px !important;
        padding: 0.75rem !important;
        margin: 1rem 0 !important;
    }
    
    #typologie-nombres-sources .formule-dynamique {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #typologie-nombres-sources .type-nombre {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    #typologie-nombres-sources .source-nombre {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }
    
    /* Contrôles responsive */
    #typologie-nombres-sources .controles {
        display: flex !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin: 1rem 0 !important;
    }
    
    #typologie-nombres-sources .btn {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.75rem !important;
        border-radius: 6px !important;
        border: none !important;
        cursor: pointer !important;
    }
    
    #typologie-nombres-sources .btn-secondary {
        background: #e2e8f0 !important;
        color: #64748b !important;
    }
    
    #typologie-nombres-sources .btn-secondary.active,
    #typologie-nombres-sources .btn-secondary:hover {
        background: #8b5cf6 !important;
        color: white !important;
    }
    
    /* Section exemple nombre 4 mobile */
    #exemple-nombre-4 h4 {
        font-size: 1.5rem !important;
    }
    
    #exemple-nombre-4 .decomposition-formula {
        font-size: 1rem !important;
    }
    
    #exemple-nombre-4 .decomposition-type {
        font-size: 0.85rem !important;
    }
    
    #exemple-nombre-4 .symbol-image {
        height: 200px !important;
    }
    
    #exemple-nombre-4 .highlight-box {
        padding: 1rem !important;
        margin: 1rem 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
}

/* TRÈS PETITS ÉCRANS */
@media (max-width: 375px) {
    #typologie-nombres-sources .matrice-container,
    #exemple-nombre-4 .vs-grid {
        width: 90px !important;
        height: 90px !important;
        gap: 3px !important;
        padding: 4px !important;
    }
    
    #typologie-nombres-sources .matrice-container .nombre,
    #exemple-nombre-4 .vs-cube {
        font-size: 0.7rem !important;
    }
    
    #exemple-nombre-4 .symbol-image {
        height: 180px !important;
    }
}

/* MODE PAYSAGE iPhone */
@media (max-width: 667px) and (orientation: landscape) {
    
    #typologie-nombres-sources .grid-3,
    #exemple-nombre-4 .grid-3 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .content-enhanced,
    .monde-card {
        padding: 0.75rem !important;
    }
    
    .matrice-container,
    .vs-grid {
        width: 80px !important;
        height: 80px !important;
    }
}

/* ========================================
   📱 FORCER ORIENTATION PAYSAGE SUR MOBILE
   ======================================== */

/* Masquer le contenu en mode portrait sur petits écrans */
@media screen and (max-width: 667px) and (orientation: portrait) {
    body {
        overflow: hidden !important;
    }
    
    .main-wrapper,
    .main-header,
    .site-footer {
        display: none !important;
    }
    
    .orientation-message {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(135deg, #8b5cf6 0%, #667eea 100%) !important;
        color: white !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        z-index: 9999 !important;
        font-family: Inter, sans-serif !important;
    }
    
    .orientation-message h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
        font-weight: 600 !important;
    }
    
    .orientation-message p {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
        padding: 0 2rem !important;
        line-height: 1.6 !important;
        opacity: 0.9 !important;
    }
    
    .orientation-icon {
        font-size: 4rem !important;
        margin-bottom: 1.5rem !important;
        animation: rotate 3s infinite ease-in-out !important;
    }
    
    @keyframes rotate {
        0% { transform: rotate(0deg); }
        25% { transform: rotate(90deg); }
        50% { transform: rotate(90deg); }
        75% { transform: rotate(0deg); }
        100% { transform: rotate(0deg); }
    }
}

/* Afficher normalement en paysage et sur desktop */
@media screen and (orientation: landscape), screen and (min-width: 668px) {
    .orientation-message {
        display: none !important;
    }
}

/* ========================================
   🔧 CORRECTION CUBES COUPÉS DANS MATRICES
   Problème: cubes 3, 6, 9 coupés et déformés
   ======================================== */

/* CORRECTION URGENTE - CUBES COUPÉS */
@media (max-width: 667px) {
    
    /* Container matrice - dimensions exactes */
    .vs-matrix-box {
        padding: 1rem 0.5rem !important;
        margin: 0 auto 1rem auto !important;
        max-width: 160px !important;
        min-width: 160px !important;
        width: 160px !important;
        background: white !important;
        border-radius: 8px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* Wrapper - centrage parfait */
    .vs-grid-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 1rem 0 !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    /* Grille 3x3 - dimensions parfaites */
    .vs-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(3, 1fr) !important;
        gap: 4px !important;
        width: 132px !important;
        height: 132px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Cubes - tailles calculées pour éviter débordement */
    .vs-cube {
        width: 100% !important;
        height: 100% !important;
        /* 132px - (2 gaps × 4px) = 124px ÷ 3 = 41.33px par cube */
        max-width: 41px !important;
        max-height: 41px !important;
        font-size: 0.9rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        font-weight: bold !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    
    /* S'assurer que les matrices Tesla passent en colonne */
    .vs-matrices {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Section violette - largeur contrôlée */
    section[style*="background: linear-gradient"][style*="8b5cf6"] {
        padding: 1.5rem 1rem !important;
        margin: 1rem 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
        box-sizing: border-box !important;
        overflow-x: visible !important;
    }
}

/* MODE PAYSAGE SPÉCIFIQUE */
@media (max-width: 667px) and (orientation: landscape) {
    
    /* Container plus compact en paysage */
    .vs-matrix-box {
        max-width: 140px !important;
        min-width: 140px !important;
        width: 140px !important;
        padding: 0.75rem 0.25rem !important;
    }
    
    /* Grille plus petite en paysage */
    .vs-grid {
        width: 114px !important;
        height: 114px !important;
        gap: 3px !important;
    }
    
    /* Cubes ajustés pour paysage */
    .vs-cube {
        /* 114px - (2 gaps × 3px) = 108px ÷ 3 = 36px par cube */
        max-width: 36px !important;
        max-height: 36px !important;
        font-size: 0.8rem !important;
    }
    
    /* Titre plus petit */
    .vs-matrix-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Description compacte */
    .vs-description {
        font-size: 0.7rem !important;
        margin-top: 0.5rem !important;
    }
}

/* TRÈS PETITS ÉCRANS */
@media (max-width: 375px) {
    
    .vs-matrix-box {
        max-width: 120px !important;
        min-width: 120px !important;
        width: 120px !important;
    }
    
    .vs-grid {
        width: 96px !important;
        height: 96px !important;
        gap: 2px !important;
    }
    
    .vs-cube {
        /* 96px - (2 gaps × 2px) = 92px ÷ 3 = 30.67px par cube */
        max-width: 30px !important;
        max-height: 30px !important;
        font-size: 0.7rem !important;
    }
}

/* FORCER L'AFFICHAGE CORRECT DES 9 CUBES */
@media (max-width: 667px) {
    
    /* S'assurer que chaque cube est visible et non coupé */
    .vs-cube:nth-child(1),
    .vs-cube:nth-child(2), 
    .vs-cube:nth-child(3),
    .vs-cube:nth-child(4),
    .vs-cube:nth-child(5),
    .vs-cube:nth-child(6),
    .vs-cube:nth-child(7),
    .vs-cube:nth-child(8),
    .vs-cube:nth-child(9) {
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        clip: none !important;
    }
    
    /* Éviter tout masquage accidentel */
    .vs-grid-wrapper,
    .vs-matrix-box {
        overflow: visible !important;
        clip: none !important;
    }
}

@media (max-width: 667px) and (orientation: landscape) {
    .vs-matrices {
        display: flex !important;
        flex-direction: row !important;
        gap: 1rem !important;
        justify-content: center !important;
    }
    
    .vs-matrix-box {
        min-width: 160px !important;
        min-height: 180px !important;
        padding: 1rem 0.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    .vs-matrix-title {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
        color: #8b5cf6 !important;
        font-weight: 600 !important;
        text-align: center !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
}