/* ==========================================================================
   TUILES AVEC EFFET LIQUID GLASS
   Effet verre liquide moderne avec animations fluides
   ========================================================================== */

/* ==========================================================================
   1. CONTENEUR DES TUILES
   ========================================================================== */
.tile-container {
    display: grid;
    gap: 12px;
    padding: 8px 12px;
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile-container.grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    max-width: 1200px;
}

.tile-container.list {
    grid-template-columns: 1fr;
    max-width: 800px;
    gap: 8px;
}

.tile-container.grid .tile {
    height: 80px;
}

.tile-container.list .tile {
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 15px;
}

/* ==========================================================================
   2. EFFET LIQUID GLASS - STYLE DE BASE
   ========================================================================== */
.tile {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    height: 80px;
    overflow: hidden;
    border-radius: 20px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* Effet Liquid Glass */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.25),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.1);
    
    /* Gradient de fond qui sera coloré selon le thème */
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}

/* ==========================================================================
   3. EFFETS DE BRILLANCE LIQUIDE
   ========================================================================== */

/* Reflet liquide principal */
.tile::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 20%,
        transparent 50%
    );
    transform: rotate(45deg);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    opacity: 0;
}

/* Effet de vague liquide */
.tile::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    transition: left 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
}

/* Animation de brillance au survol */
.tile:hover::before {
    opacity: 1;
    transform: rotate(45deg) scale(1.1);
}

.tile:hover::after {
    left: 100%;
}

/* ==========================================================================
   4. ANIMATIONS DE SURVOL LIQUID GLASS
   ========================================================================== */
.tile:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 
        0 15px 45px 0 rgba(0, 0, 0, 0.35),
        inset 0 2px 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 2px 0 rgba(0, 0, 0, 0.15),
        0 0 30px rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
}

.tile:active {
    transform: scale(0.97);
    box-shadow: 
        0 4px 15px 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.1s ease;
}

/* Animations spécifiques pour le mode liste */
.tile-container.list .tile:hover {
    transform: translateX(10px) scale(1.02);
}

/* ==========================================================================
   5. CONTENU DES TUILES
   ========================================================================== */
.tile-content {
    padding: 14px;
    text-align: center;
    pointer-events: none;
    position: relative;
    z-index: 2;
}

.tile-title {
    font-size: var(--tile-title-size);
    font-weight: 700;
    color: white;
    text-align: center;
    width: 100%;
    line-height: 1.3;
    padding: 0 8px;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* Ombre portée pour lisibilité sur verre */
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.8);
}

.tile:hover .tile-title {
    transform: scale(1.08) translateY(-2px);
    text-shadow: 
        0 3px 12px rgba(0, 0, 0, 0.6),
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   6. TAILLES DE POLICE
   ========================================================================== */
[data-font-size="small"] .tile .tile-title {
    font-size: 0.85rem;
}

[data-font-size="normal"] .tile .tile-title {
    font-size: 1rem;
}

[data-font-size="large"] .tile .tile-title {
    font-size: 1.2rem;
}

[data-font-size="small"] #tileContainer.list .tile {
    min-height: 45px;
}

[data-font-size="normal"] #tileContainer.list .tile {
    min-height: 50px;
}

[data-font-size="large"] #tileContainer.list .tile {
    min-height: 60px;
}

/* ==========================================================================
   7. COULEURS PAR THÈME AVEC EFFET LIQUID GLASS
   ========================================================================== */

/* ==================== THÈME ROUGE ==================== */
[data-theme="rouge"] .tile:nth-child(30n + 1) { 
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.6), rgba(185, 28, 28, 0.5));
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 2) { 
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.6), rgba(194, 65, 12, 0.5));
    box-shadow: 0 8px 32px rgba(234, 88, 12, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 3) { 
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.6), rgba(217, 119, 6, 0.5));
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 4) { 
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.6), rgba(202, 138, 4, 0.5));
    box-shadow: 0 8px 32px rgba(234, 179, 8, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 5) { 
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.6), rgba(124, 45, 18, 0.5));
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 6) { 
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.6), rgba(220, 38, 38, 0.5));
    box-shadow: 0 8px 32px rgba(185, 28, 28, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 7) { 
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.6), rgba(234, 88, 12, 0.5));
    box-shadow: 0 8px 32px rgba(249, 115, 22, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 8) { 
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.6), rgba(245, 158, 11, 0.5));
    box-shadow: 0 8px 32px rgba(251, 191, 36, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 9) { 
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.6), rgba(234, 179, 8, 0.5));
    box-shadow: 0 8px 32px rgba(250, 204, 21, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 10) { 
    background: linear-gradient(135deg, rgba(153, 27, 27, 0.6), rgba(124, 45, 18, 0.5));
    box-shadow: 0 8px 32px rgba(153, 27, 27, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 11) { 
    background: linear-gradient(135deg, rgba(135, 19, 0, 0.7), rgba(135, 13, 3, 0.6));
    box-shadow: 0 8px 32px rgba(135, 19, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 12) { 
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.6), rgba(180, 83, 9, 0.5));
    box-shadow: 0 8px 32px rgba(217, 119, 6, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 13) { 
    background: linear-gradient(135deg, rgba(202, 138, 4, 0.6), rgba(161, 98, 7, 0.5));
    box-shadow: 0 8px 32px rgba(202, 138, 4, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 14) { 
    background: linear-gradient(135deg, rgba(201, 27, 27, 0.6), rgba(123, 6, 6, 0.5));
    box-shadow: 0 8px 32px rgba(201, 27, 27, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 15) { 
    background: linear-gradient(135deg, rgba(105, 0, 15, 0.7), rgba(247, 17, 0, 0.6));
    box-shadow: 0 8px 32px rgba(247, 17, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 16) { 
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.6), rgba(217, 119, 6, 0.5));
    box-shadow: 0 8px 32px rgba(251, 191, 36, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 17) { 
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.6), rgba(202, 138, 4, 0.5));
    box-shadow: 0 8px 32px rgba(250, 204, 21, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 18) { 
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.6), rgba(153, 27, 27, 0.5));
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 19) { 
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.6), rgba(194, 65, 12, 0.5));
    box-shadow: 0 8px 32px rgba(234, 88, 12, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 20) { 
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.6), rgba(217, 119, 6, 0.5));
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 21) { 
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.6), rgba(202, 138, 4, 0.5));
    box-shadow: 0 8px 32px rgba(234, 179, 8, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 22) { 
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.6), rgba(124, 45, 18, 0.5));
    box-shadow: 0 8px 32px rgba(185, 28, 28, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 23) { 
    background: linear-gradient(135deg, rgba(194, 65, 12, 0.6), rgba(154, 52, 18, 0.5));
    box-shadow: 0 8px 32px rgba(194, 65, 12, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 24) { 
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.6), rgba(180, 83, 9, 0.5));
    box-shadow: 0 8px 32px rgba(217, 119, 6, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 25) { 
    background: linear-gradient(135deg, rgba(202, 138, 4, 0.6), rgba(161, 98, 7, 0.5));
    box-shadow: 0 8px 32px rgba(202, 138, 4, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 26) { 
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(185, 28, 28, 0.5));
    box-shadow: 0 8px 32px rgba(239, 68, 68, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 27) { 
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.6), rgba(234, 88, 12, 0.5));
    box-shadow: 0 8px 32px rgba(251, 146, 60, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 28) { 
    background: linear-gradient(135deg, rgba(252, 211, 77, 0.6), rgba(245, 158, 11, 0.5));
    box-shadow: 0 8px 32px rgba(252, 211, 77, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 29) { 
    background: linear-gradient(135deg, rgba(253, 224, 71, 0.6), rgba(234, 179, 8, 0.5));
    box-shadow: 0 8px 32px rgba(253, 224, 71, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="rouge"] .tile:nth-child(30n + 0) { 
    background: linear-gradient(135deg, rgba(113, 0, 0, 0.7), rgba(201, 0, 0, 0.6));
    box-shadow: 0 8px 32px rgba(201, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* Effet de survol amélioré pour le thème rouge */
[data-theme="rouge"] .tile:hover {
    box-shadow: 
        0 15px 45px rgba(220, 38, 38, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.3),
        0 0 40px rgba(255, 215, 0, 0.2);
}

[data-theme="rouge"] .tile-title {
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.6),
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(255, 215, 0, 0.3);
}

/* ==================== THÈME SOMBRE ==================== */
[data-theme="dark"] .tile:nth-child(30n + 1) { 
    background: linear-gradient(135deg, rgba(26, 41, 191, 0.6), rgba(12, 32, 81, 0.5));
    box-shadow: 0 8px 32px rgba(26, 41, 191, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 2) { 
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.6), rgba(29, 78, 216, 0.5));
    box-shadow: 0 8px 32px rgba(30, 64, 175, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 3) { 
    background: linear-gradient(135deg, rgba(55, 48, 163, 0.6), rgba(67, 56, 202, 0.5));
    box-shadow: 0 8px 32px rgba(55, 48, 163, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 4) { 
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.6), rgba(107, 33, 168, 0.5));
    box-shadow: 0 8px 32px rgba(88, 28, 135, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 5) { 
    background: linear-gradient(135deg, rgba(31, 39, 123, 0.6), rgba(33, 150, 243, 0.5));
    box-shadow: 0 8px 32px rgba(33, 150, 243, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 6) { 
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.6), rgba(37, 99, 235, 0.5));
    box-shadow: 0 8px 32px rgba(29, 78, 216, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 7) { 
    background: linear-gradient(135deg, rgba(67, 56, 202, 0.6), rgba(79, 70, 229, 0.5));
    box-shadow: 0 8px 32px rgba(67, 56, 202, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 8) { 
    background: linear-gradient(135deg, rgba(107, 33, 168, 0.6), rgba(124, 58, 237, 0.5));
    box-shadow: 0 8px 32px rgba(107, 33, 168, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 9) { 
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.6), rgba(71, 85, 105, 0.5));
    box-shadow: 0 8px 32px rgba(51, 65, 85, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 10) { 
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.6), rgba(59, 130, 246, 0.5));
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 11) { 
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.6), rgba(99, 102, 241, 0.5));
    box-shadow: 0 8px 32px rgba(79, 70, 229, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 12) { 
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.6), rgba(139, 92, 246, 0.5));
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 13) { 
    background: linear-gradient(135deg, rgba(11, 45, 235, 0.6), rgba(0, 0, 0, 0.5));
    box-shadow: 0 8px 32px rgba(11, 45, 235, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 14) { 
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(96, 165, 250, 0.5));
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 15) { 
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.6), rgba(129, 140, 248, 0.5));
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 16) { 
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(167, 139, 250, 0.5));
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 17) { 
    background: linear-gradient(135deg, rgba(12, 74, 110, 0.6), rgba(7, 89, 133, 0.5));
    box-shadow: 0 8px 32px rgba(12, 74, 110, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 18) { 
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.6), rgba(29, 78, 216, 0.5));
    box-shadow: 0 8px 32px rgba(30, 58, 138, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 19) { 
    background: linear-gradient(135deg, rgba(49, 46, 129, 0.6), rgba(55, 48, 163, 0.5));
    box-shadow: 0 8px 32px rgba(49, 46, 129, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 20) { 
    background: linear-gradient(135deg, rgba(76, 29, 149, 0.6), rgba(88, 28, 135, 0.5));
    box-shadow: 0 8px 32px rgba(76, 29, 149, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 21) { 
    background: linear-gradient(135deg, rgba(7, 89, 133, 0.6), rgba(3, 105, 161, 0.5));
    box-shadow: 0 8px 32px rgba(7, 89, 133, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 22) { 
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.6), rgba(37, 99, 235, 0.5));
    box-shadow: 0 8px 32px rgba(29, 78, 216, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 23) { 
    background: linear-gradient(135deg, rgba(55, 48, 163, 0.6), rgba(67, 56, 202, 0.5));
    box-shadow: 0 8px 32px rgba(55, 48, 163, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 24) { 
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.6), rgba(107, 33, 168, 0.5));
    box-shadow: 0 8px 32px rgba(88, 28, 135, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 25) { 
    background: linear-gradient(135deg, rgba(3, 105, 161, 0.6), rgba(2, 132, 199, 0.5));
    box-shadow: 0 8px 32px rgba(3, 105, 161, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 26) { 
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.6), rgba(59, 130, 246, 0.5));
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 27) { 
    background: linear-gradient(135deg, rgba(67, 56, 202, 0.6), rgba(79, 70, 229, 0.5));
    box-shadow: 0 8px 32px rgba(67, 56, 202, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 28) { 
    background: linear-gradient(135deg, rgba(107, 33, 168, 0.6), rgba(124, 58, 237, 0.5));
    box-shadow: 0 8px 32px rgba(107, 33, 168, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 29) { 
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.6), rgba(14, 165, 233, 0.5));
    box-shadow: 0 8px 32px rgba(2, 132, 199, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tile:nth-child(30n + 0) { 
    background: linear-gradient(135deg, rgba(13, 71, 161, 0.6), rgba(63, 81, 181, 0.5));
    box-shadow: 0 8px 32px rgba(13, 71, 161, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* Effet de survol amélioré pour le thème sombre */
[data-theme="dark"] .tile:hover {
    box-shadow: 
        0 15px 45px rgba(29, 78, 216, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.3),
        0 0 40px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .tile-title {
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.6),
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(59, 130, 246, 0.4);
}

/* ==================== THÈME BLEU CIEL ==================== */
[data-theme="bleuciel"] .tile:nth-child(30n + 1) { 
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.6), rgba(2, 132, 199, 0.5));
    box-shadow: 0 8px 32px rgba(14, 165, 233, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 2) { 
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.6), rgba(8, 145, 178, 0.5));
    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 3) { 
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.6), rgba(4, 120, 87, 0.5));
    box-shadow: 0 8px 32px rgba(5, 150, 105, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 4) { 
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.6), rgba(15, 118, 110, 0.5));
    box-shadow: 0 8px 32px rgba(13, 148, 136, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 5) { 
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.6), rgba(3, 105, 161, 0.5));
    box-shadow: 0 8px 32px rgba(2, 132, 199, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 6) { 
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.6), rgba(14, 116, 144, 0.5));
    box-shadow: 0 8px 32px rgba(8, 145, 178, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 7) { 
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.6), rgba(6, 95, 70, 0.5));
    box-shadow: 0 8px 32px rgba(4, 120, 87, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 8) { 
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.6), rgba(19, 78, 74, 0.5));
    box-shadow: 0 8px 32px rgba(15, 118, 110, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 9) { 
    background: linear-gradient(135deg, rgba(3, 105, 161, 0.6), rgba(7, 89, 133, 0.5));
    box-shadow: 0 8px 32px rgba(3, 105, 161, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 10) { 
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.6), rgba(21, 94, 117, 0.5));
    box-shadow: 0 8px 32px rgba(14, 116, 144, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 11) { 
    background: linear-gradient(135deg, rgba(6, 95, 70, 0.6), rgba(6, 78, 59, 0.5));
    box-shadow: 0 8px 32px rgba(6, 95, 70, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 12) { 
    background: linear-gradient(135deg, rgba(19, 78, 74, 0.6), rgba(15, 60, 57, 0.5));
    box-shadow: 0 8px 32px rgba(19, 78, 74, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 13) { 
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.6), rgba(14, 165, 233, 0.5));
    box-shadow: 0 8px 32px rgba(56, 189, 248, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 14) { 
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.6), rgba(6, 182, 212, 0.5));
    box-shadow: 0 8px 32px rgba(34, 211, 238, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 15) { 
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(5, 150, 105, 0.5));
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 16) { 
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.6), rgba(13, 148, 136, 0.5));
    box-shadow: 0 8px 32px rgba(20, 184, 166, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 17) { 
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.6), rgba(59, 130, 246, 0.5));
    box-shadow: 0 8px 32px rgba(96, 165, 250, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 18) { 
    background: linear-gradient(135deg, rgba(103, 232, 249, 0.6), rgba(34, 211, 238, 0.5));
    box-shadow: 0 8px 32px rgba(103, 232, 249, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 19) { 
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.6), rgba(16, 185, 129, 0.5));
    box-shadow: 0 8px 32px rgba(52, 211, 153, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 20) { 
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.6), rgba(20, 184, 166, 0.5));
    box-shadow: 0 8px 32px rgba(45, 212, 191, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 21) { 
    background: linear-gradient(135deg, rgba(147, 197, 253, 0.6), rgba(96, 165, 250, 0.5));
    box-shadow: 0 8px 32px rgba(147, 197, 253, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 22) { 
    background: linear-gradient(135deg, rgba(165, 243, 252, 0.6), rgba(103, 232, 249, 0.5));
    box-shadow: 0 8px 32px rgba(165, 243, 252, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 23) { 
    background: linear-gradient(135deg, rgba(110, 231, 183, 0.6), rgba(52, 211, 153, 0.5));
    box-shadow: 0 8px 32px rgba(110, 231, 183, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 24) { 
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.6), rgba(45, 212, 191, 0.5));
    box-shadow: 0 8px 32px rgba(94, 234, 212, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 25) { 
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(37, 99, 235, 0.5));
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 26) { 
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.6), rgba(8, 145, 178, 0.5));
    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 27) { 
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(5, 150, 105, 0.5));
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 28) { 
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.6), rgba(13, 148, 136, 0.5));
    box-shadow: 0 8px 32px rgba(20, 184, 166, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 29) { 
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.6), rgba(29, 78, 216, 0.5));
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="bleuciel"] .tile:nth-child(30n + 0) { 
    background: linear-gradient(135deg, rgba(12, 74, 110, 0.6), rgba(8, 47, 73, 0.5));
    box-shadow: 0 8px 32px rgba(12, 74, 110, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* Effet de survol amélioré pour le thème bleu ciel */
[data-theme="bleuciel"] .tile:hover {
    box-shadow: 
        0 15px 45px rgba(14, 165, 233, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.3),
        0 0 40px rgba(6, 182, 212, 0.3);
}

[data-theme="bleuciel"] .tile-title {
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.6),
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(6, 182, 212, 0.4);
}

/* ==================== THÈME VIOLET (LIGHT) ==================== */
[data-theme="light"] .tile:nth-child(30n + 1) { 
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.6), rgba(109, 40, 217, 0.5));
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 2) { 
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(124, 58, 237, 0.5));
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 3) { 
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.6), rgba(147, 51, 234, 0.5));
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 4) { 
    background: linear-gradient(135deg, rgba(192, 38, 211, 0.6), rgba(162, 28, 175, 0.5));
    box-shadow: 0 8px 32px rgba(192, 38, 211, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 5) { 
    background: linear-gradient(135deg, rgba(219, 39, 119, 0.6), rgba(190, 24, 93, 0.5));
    box-shadow: 0 8px 32px rgba(219, 39, 119, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 6) { 
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.6), rgba(190, 18, 60, 0.5));
    box-shadow: 0 8px 32px rgba(225, 29, 72, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 7) { 
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.6), rgba(91, 33, 182, 0.5));
    box-shadow: 0 8px 32px rgba(109, 40, 217, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 8) { 
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.6), rgba(107, 33, 168, 0.5));
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 9) { 
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.6), rgba(126, 34, 206, 0.5));
    box-shadow: 0 8px 32px rgba(147, 51, 234, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 10) { 
    background: linear-gradient(135deg, rgba(162, 28, 175, 0.6), rgba(134, 25, 143, 0.5));
    box-shadow: 0 8px 32px rgba(162, 28, 175, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 11) { 
    background: linear-gradient(135deg, rgba(190, 24, 93, 0.6), rgba(157, 23, 77, 0.5));
    box-shadow: 0 8px 32px rgba(190, 24, 93, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 12) { 
    background: linear-gradient(135deg, rgba(190, 18, 60, 0.6), rgba(159, 18, 57, 0.5));
    box-shadow: 0 8px 32px rgba(190, 18, 60, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 13) { 
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.6), rgba(139, 92, 246, 0.5));
    box-shadow: 0 8px 32px rgba(167, 139, 250, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 14) { 
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.6), rgba(168, 85, 247, 0.5));
    box-shadow: 0 8px 32px rgba(192, 132, 252, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 15) { 
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.6), rgba(192, 38, 211, 0.5));
    box-shadow: 0 8px 32px rgba(217, 70, 239, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 16) { 
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.6), rgba(219, 39, 119, 0.5));
    box-shadow: 0 8px 32px rgba(244, 114, 182, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 17) { 
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.6), rgba(225, 29, 72, 0.5));
    box-shadow: 0 8px 32px rgba(251, 113, 133, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 18) { 
    background: linear-gradient(135deg, rgba(196, 181, 253, 0.6), rgba(167, 139, 250, 0.5));
    box-shadow: 0 8px 32px rgba(196, 181, 253, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 19) { 
    background: linear-gradient(135deg, rgba(221, 214, 254, 0.6), rgba(196, 181, 253, 0.5));
    box-shadow: 0 8px 32px rgba(221, 214, 254, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 20) { 
    background: linear-gradient(135deg, rgba(122, 0, 255, 0.6), rgba(138, 123, 207, 0.5));
    box-shadow: 0 8px 32px rgba(122, 0, 255, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 21) { 
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.6), rgba(103, 58, 183, 0.5));
    box-shadow: 0 8px 32px rgba(233, 30, 99, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 22) { 
    background: linear-gradient(135deg, rgba(91, 33, 182, 0.6), rgba(76, 29, 149, 0.5));
    box-shadow: 0 8px 32px rgba(91, 33, 182, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 23) { 
    background: linear-gradient(135deg, rgba(107, 33, 168, 0.6), rgba(88, 28, 135, 0.5));
    box-shadow: 0 8px 32px rgba(107, 33, 168, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 24) { 
    background: linear-gradient(135deg, rgba(126, 34, 206, 0.6), rgba(112, 26, 117, 0.5));
    box-shadow: 0 8px 32px rgba(126, 34, 206, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 25) { 
    background: linear-gradient(135deg, rgba(134, 25, 143, 0.6), rgba(112, 26, 117, 0.5));
    box-shadow: 0 8px 32px rgba(134, 25, 143, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 26) { 
    background: linear-gradient(135deg, rgba(157, 23, 77, 0.6), rgba(131, 24, 67, 0.5));
    box-shadow: 0 8px 32px rgba(157, 23, 77, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 27) { 
    background: linear-gradient(135deg, rgba(159, 18, 57, 0.6), rgba(136, 19, 55, 0.5));
    box-shadow: 0 8px 32px rgba(159, 18, 57, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 28) { 
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.6), rgba(219, 39, 119, 0.5));
    box-shadow: 0 8px 32px rgba(236, 72, 153, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 29) { 
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.6), rgba(234, 88, 12, 0.5));
    box-shadow: 0 8px 32px rgba(249, 115, 22, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .tile:nth-child(30n + 0) { 
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.6), rgba(234, 88, 12, 0.5));
    box-shadow: 0 8px 32px rgba(249, 115, 22, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* Effet de survol amélioré pour le thème violet */
[data-theme="light"] .tile:hover {
    box-shadow: 
        0 15px 45px rgba(168, 85, 247, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.3),
        0 0 40px rgba(192, 38, 211, 0.3);
}

[data-theme="light"] .tile-title {
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.6),
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(168, 85, 247, 0.4);
}

/* ==========================================================================
   9. SÉPARATEURS AVEC EFFET LIQUID GLASS
   ========================================================================== */
.separator {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    margin: 20px 0;
    border-radius: 16px;
    position: relative;
    text-align: center;
    font-weight: 600;
    overflow: hidden;
    padding: 10px;
    
    /* Effet Liquid Glass pour les séparateurs */
    background: rgba(26, 35, 126, 0.6);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.25);
    
    opacity: var(--tile-opacity, 0.9);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.separator:hover {
    opacity: 1;
    backdrop-filter: blur(16px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(200%);
    box-shadow: 
        0 12px 40px 0 rgba(0, 0, 0, 0.35),
        inset 0 2px 2px 0 rgba(255, 255, 255, 0.3);
}

.separator img {
    height: 50px;
    width: auto;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: inherit;
}

.separator:hover img {
    transform: scale(1.1) translateY(-2px);
}

.separator::before,
.separator::after {
    content: '';
    position: absolute;
    height: 1px;
    width: calc(50% - 100px);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    top: 50%;
}

.separator::before {
    left: 20px;
}

.separator::after {
    right: 20px;
}

/* Classes de transparence pour les séparateurs */
.separator.force-transparency {
    opacity: var(--tile-opacity, 0.85);
    transition: opacity 0.3s ease;
}

.separator.force-transparency:hover {
    opacity: 1;
}

.separator.force-transparency img {
    opacity: inherit;
}

/* ==========================================================================
   10. RESPONSIVE - ADAPTATION MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    .tile-container {
        gap: 8px;
        padding: 6px 8px;
    }
    
    .tile {
        border-radius: 16px;
    }
    
    .tile:hover {
        transform: scale(1.02);
    }
    
    .tile-container.list .tile:hover {
        transform: translateX(5px) scale(1.01);
    }
}

@media (max-width: 480px) {
    
    .tile {
        border-radius: 14px;
    }
    
    .separator {
        height: 30px;
        margin: 15px 0;
    }
}

/* ==========================================================================
   11. MODE SOMBRE - AJUSTEMENTS SPÉCIFIQUES
   ========================================================================== */
[data-theme="dark"] .tile {
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
}

[data-theme="dark"] .tile:hover {
    backdrop-filter: blur(18px) saturate(200%);
    -webkit-backdrop-filter: blur(18px) saturate(200%);
}

/* ==========================================================================
   12. ACCESSIBILITÉ
   ========================================================================== */
.tile:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 3px;
}

/* Réduction du mouvement pour les utilisateurs qui le préfèrent */
@media (prefers-reduced-motion: reduce) {
    .tile,
    .tile::before,
    .tile::after,
    .tile-title,
    .separator {
        animation: none;
        transition: none;
    }
}