.tiles-icon-text {
    padding: var(--space-3xl) 0;
}

.tiles-icon-text .row {
        justify-content: center;
}

.tiles-icon-text .row .col-tiles {
    margin-bottom: var(--space-xl);
}

.tile {
    background: var(--color-sable);
    border-radius: var(--border-radius);
    padding: var(--space-xl);
    height: 100%;
}

.tile-icon {
    margin-bottom: var(--space-lg);
}

.tile-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.tile-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.tile-content p {
    margin-bottom: var(--space-sm);
}

.tile-content p a {
    color: var(--color-primary);
    text-decoration: none;
    display: inline-block;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    margin-top: var(--space-sm);
    
    &:hover {
        opacity: 0.8;
        color: var(--color-accent);
    }
}

.tile-content p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   RESPONSIVE - DESKTOP FIRST
   ========================================================================== */

/* Tablette (1024px et moins) */
@media screen and (max-width: 1024px) {
    .tiles-icon-text {
        padding: var(--space-2xl) 0;
    }
    
    .tiles-icon-text .row .col-tiles {
        margin-bottom: var(--space-lg);
    }
}

/* Tablette et mobile (768px et moins) */
@media screen and (max-width: 768px) {
    .tiles-icon-text {
        padding: var(--space-xl) 0;
    }
    
    .tile {
        padding: var(--space-lg);
    }
    
    .tile-icon {
        margin-bottom: var(--space-md);
    }
    
    .tile-icon img {
        width: 50px;
        height: 50px;
    }
    
    .tile-title {
        margin-bottom: var(--space-sm);
    }
}

/* Mobile (480px et moins) */
@media screen and (max-width: 480px) {
    .tiles-icon-text {
        padding: var(--space-lg) 0;
    }
    
    .tiles-icon-text .row .col-tiles {
        margin-bottom: var(--space-md);
    }
    
    .tile {
        padding: var(--space-md);
    }
    
    .tile-icon img {
        width: 45px;
        height: 45px;
    }
}