/* =========================================
   ADAPTACCESSOIRES — COMPONENTS
   ========================================= */


/* =========================================
   BUTTONS
   ========================================= */

.aa-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding: 13px 28px;

    border: 2px solid transparent;
    border-radius: var(--aa-radius-pill);

    background: var(--aa-secondary);
    color: var(--aa-white);

    font-size: var(--aa-text-sm);
    font-weight: 700;

    letter-spacing: 0.03em;

    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform var(--aa-transition),
        background-color var(--aa-transition),
        color var(--aa-transition),
        border-color var(--aa-transition),
        box-shadow var(--aa-transition);
}


.aa-button:hover {
    background: var(--aa-secondary-dark);
    color: var(--aa-white);

    transform: translateY(-2px);

    box-shadow: var(--aa-shadow-sm);
}


/* =========================================
   PRIMARY — BLUE
   ========================================= */

.aa-button--primary {
    background: var(--aa-primary);
    color: var(--aa-white);
}


.aa-button--primary:hover {
    background: var(--aa-primary-dark);
    color: var(--aa-white);
}


/* =========================================
   PLUM
   ========================================= */

.aa-button--plum {
    background: var(--aa-plum);
    color: var(--aa-white);
}


.aa-button--plum:hover {
    background: var(--aa-plum-dark);
    color: var(--aa-white);
}


/* =========================================
   OUTLINE — BLUE
   ========================================= */

.aa-button--outline {
    background: transparent;

    border-color: var(--aa-primary);

    color: var(--aa-primary);
}


.aa-button--outline:hover {
    background: var(--aa-primary);

    border-color: var(--aa-primary);

    color: var(--aa-white);
}


/* =========================================
   OUTLINE — PLUM
   ========================================= */

.aa-button--outline-plum {
    background: transparent;

    border-color: var(--aa-plum);

    color: var(--aa-plum);
}


.aa-button--outline-plum:hover {
    background: var(--aa-plum);

    border-color: var(--aa-plum);

    color: var(--aa-white);
}


/* =========================================
   WHITE
   ========================================= */

.aa-button--white {
    background: var(--aa-white);

    border-color: var(--aa-white);

    color: var(--aa-dark);
}


.aa-button--white:hover {
    background: var(--aa-secondary);

    border-color: var(--aa-secondary);

    color: var(--aa-white);
}


/* =========================================
   CARDS
   ========================================= */

.aa-card {
    overflow: hidden;

    background: var(--aa-white);

    border: 1px solid var(--aa-border);

    border-radius: var(--aa-radius-lg);

    box-shadow: var(--aa-shadow-sm);

    transition:
        transform var(--aa-transition),
        box-shadow var(--aa-transition),
        border-color var(--aa-transition);
}


.aa-card:hover {
    transform: translateY(-5px);

    border-color: var(--aa-plum-light);

    box-shadow: var(--aa-shadow-md);
}


/* =========================================
   BADGE
   ========================================= */

.aa-badge {
    display: inline-flex;

    align-items: center;

    min-height: 26px;

    padding: 6px 12px;

    border-radius: var(--aa-radius-pill);

    background: var(--aa-secondary);

    color: var(--aa-white);

    font-size: var(--aa-text-xs);
    font-weight: 700;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


/* =========================================
   BADGE — PLUM
   ========================================= */

.aa-badge--plum {
    background: var(--aa-plum);

    color: var(--aa-white);
}


/* =========================================
   BADGE — BLUE
   ========================================= */

.aa-badge--primary {
    background: var(--aa-primary);

    color: var(--aa-white);
}


/* =========================================
   EYEBROW
   ========================================= */

.aa-eyebrow {
    display: inline-block;

    margin-bottom: var(--aa-space-3);

    color: var(--aa-secondary);

    font-size: var(--aa-text-sm);
    font-weight: 700;

    letter-spacing: 0.12em;

    line-height: 1.3;

    text-transform: uppercase;
}


/* =========================================
   DECORATIVE LINE
   ========================================= */

.aa-divider {
    width: 60px;
    height: 3px;

    margin: var(--aa-space-5) auto;

    background: var(--aa-secondary);

    border-radius: var(--aa-radius-pill);
}


/* =========================================
   IMAGE WRAPPER
   ========================================= */

.aa-image-wrapper {
    position: relative;

    overflow: hidden;
}


.aa-image-wrapper img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform var(--aa-transition-slow);
}


.aa-image-wrapper:hover img {
    transform: scale(1.04);
}


/* =========================================
   ACCESSIBILITY
   ========================================= */

.aa-button:focus-visible {
    outline: 3px solid var(--aa-secondary);

    outline-offset: 3px;
}


.aa-button:disabled,
.aa-button[aria-disabled="true"] {
    opacity: 0.55;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .aa-button,
    .aa-card,
    .aa-image-wrapper img {
        transition: none;
    }

    .aa-button:hover,
    .aa-card:hover,
    .aa-image-wrapper:hover img {
        transform: none;
    }
}