Modèle:ButtonLink/styles.css

/* ============================================
   BUTTON LINK - Universal clickable buttons
   ============================================ */

/* Wrapper principal */
.button-link-wrapper {
    min-height: 80px;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    background: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-link-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Contenu du bouton */
.button-link-content {
    width: 100%;
    text-align: center;
    padding: 1rem;
}

.button-link-content a {
    color: white !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-weight: 500;
}

.button-link-content a:hover {
    color: white !important;
}

/* Styles des images */
.button-link-content .image {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.button-link-content .image img {
    filter: brightness(0) invert(1);
    vertical-align: middle;
}

/* ============================================
   ALIGNEMENT + WIDTH FIXE
   ============================================ */

/* Gauche */
.button-link--align-left {
    width: 300px;
    margin-right: auto;
    margin-left: 0;
}

/* Centre (par défaut si pas d'align) */
.button-link--align-center {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* Droite */
.button-link--align-right {
    width: 300px;
    margin-left: auto;
    margin-right: 0;
}

/* ============================================
   COULEURS PRÉDÉFINIES
   ============================================ */

.button-link--primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.button-link--success {
    background: linear-gradient(135deg, #48c774 0%, #23d160 100%);
}

.button-link--danger {
    background: linear-gradient(135deg, #f14668 0%, #ff3860 100%);
}

.button-link--warning {
    background: linear-gradient(135deg, #ffdd57 0%, #ffa500 100%);
}

.button-link--info {
    background: linear-gradient(135deg, #3298dc 0%, #209cee 100%);
}

.button-link--secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}

.button-link--dark {
    background: linear-gradient(135deg, #363636 0%, #1a1a1a 100%);
}

.button-link--patreon {
    background: linear-gradient(135deg, #f96854 0%, #ff424d 100%);
}

.button-link--gitlab {
    background: linear-gradient(135deg, #fc6d26 0%, #e24329 100%);
}

.button-link--github {
    background: linear-gradient(135deg, #24292e 0%, #0d1117 100%);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .button-link--align-left,
    .button-link--align-center,
    .button-link--align-right {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    .button-link-content {
        padding: 0.75rem;
    }
    
    .button-link-content a {
        font-size: 0.9rem;
    }
}