/**
 * Composants Link
 * Styles réutilisables pour tous les liens
 */

/* ===== LINK STANDARD ===== */

.link {
    font-family: var(--font-primary);
    font-size: 18px;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
    cursor: pointer;
}

.link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.link:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ===== VARIANTES DE COULEUR ===== */

/* Link noir (par défaut pour texte) */
.link--dark {
    color: var(--color-black);
}

.link--dark:hover {
    color: var(--color-primary);
}

/* Link blanc (pour fonds sombres) */
.link--light {
    color: var(--color-white);
}

.link--light:hover {
    color: var(--color-gray-light);
}

/* Link success */
.link--success {
    color: var(--color-success);
}

.link--success:hover {
    color: #267a35;
}

/* Link error */
.link--error {
    color: var(--color-error);
}

.link--error:hover {
    color: #a80000;
}

/* ===== VARIANTES DE STYLE ===== */

/* Link sans soulignement au hover */
.link--no-underline:hover {
    text-decoration: none;
}

/* Link toujours souligné */
.link--underline {
    text-decoration: underline;
}

/* Link discret (gris) */
.link--muted {
    color: var(--color-gray-dark);
}

.link--muted:hover {
    color: var(--color-black);
}

/* ===== TAILLES ===== */

.link--small {
    font-size: 14px;
}

.link--large {
    font-size: 20px;
}

/* ===== VARIANTES SPÉCIALES ===== */

/* Link bouton (style bouton mais reste un lien) */
.link--button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    color: var(--color-primary);
    background: transparent;
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    transition: all var(--transition-base);
}

.link--button:hover {
    background: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
}

/* Link avec icône */
.link--icon {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.link--icon svg,
.link--icon i {
    width: 1em;
    height: 1em;
}

/* Link en bloc (prend toute la largeur) */
.link--block {
    display: block;
    width: 100%;
}

/* ===== ÉTATS ===== */

/* Link désactivé */
.link--disabled,
.link:disabled {
    color: var(--color-gray);
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none;
}

/* Link actif (page courante) */
.link--active {
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-medium);
}

/* ===== GROUPES DE LIENS ===== */

/* Liste de liens (navigation, footer, etc.) */
.link-group {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.link-group--vertical {
    flex-direction: column;
}

.link-group--center {
    justify-content: center;
    align-items: center;
}

.link-group--spaced {
    gap: var(--spacing-lg);
}

/* Séparateur entre les liens */
.link-separator {
    display: inline-block;
    margin: 0 var(--spacing-sm);
    color: var(--color-gray);
}

/* ===== LIENS AVEC BADGE ===== */

.link--badge {
    position: relative;
}

.link--badge::after {
    content: attr(data-badge);
    position: absolute;
    top: -8px;
    right: -12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    background: var(--color-error);
    border-radius: var(--border-radius-full);
}

/* ===== LIENS EXTERNES ===== */

/* Indicateur pour lien externe */
.link--external::after {
    content: '↗';
    margin-left: 4px;
    font-size: 0.85em;
}

/* ===== BREADCRUMB ===== */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 14px;
}

.breadcrumb__link {
    color: var(--color-gray-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
    color: var(--color-primary);
}

.breadcrumb__separator {
    color: var(--color-gray);
    user-select: none;
}

.breadcrumb__current {
    color: var(--color-black);
    font-weight: var(--font-weight-medium);
}

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

@media (max-width: 640px) {
    .link {
        font-size: 16px;
    }

    .link--small {
        font-size: 12px;
    }

    .link--large {
        font-size: 18px;
    }

    .link-group {
        gap: var(--spacing-sm);
    }

    .link-group--spaced {
        gap: var(--spacing-md);
    }
}