/* Style uniforme pour tous les boutons avec bordures animées */
.fondu-spawn {
    position: relative;
    border: 0px solid var(--color-tertiary);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.fondu-spawn:hover {
    background-color: transparent;
    color: var(--color-tertiary);
    font-weight: bold;
}

/* Bordures animées */
.fondu-spawn .border-top {
    display: block;
    width: 0%;
    height: 5px;
    background-color: var(--color-tertiary);
    position: absolute;
    top: 0;
    left: 50%;
    transition: width 0.075s linear 0.375s;
}

.fondu-spawn:hover .border-top {
    width: 50%;
    transition: width 0.075s linear 0s;
}

.fondu-spawn .border-right {
    display: block;
    height: 0%;
    width: 5px;
    background-color: var(--color-tertiary);
    position: absolute;
    top: 0;
    right: 0;
    transition: height 0.075s linear 0.3s;
}

.fondu-spawn:hover .border-right {
    height: 100%;
    transition: height 0.075s linear 0.075s;
}

.fondu-spawn .border-bottom {
    display: block;
    width: 0%;
    height: 5px;
    background-color: var(--color-tertiary);
    position: absolute;
    bottom: 0;
    right: 0;
    transition: width 0.15s linear 0.15s;
}

.fondu-spawn:hover .border-bottom {
    width: 100%;
    transition: width 0.15s linear 0.15s;
}

.fondu-spawn .border-left {
    display: block;
    height: 0%;
    width: 5px;
    background-color: var(--color-tertiary);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: height 0.075s linear 0.075s;
}

.fondu-spawn:hover .border-left {
    height: 100%;
    transition: height 0.075s linear 0.3s;
}

.fondu-spawn .border-top2 {
    display: block;
    width: 0%;
    height: 5px;
    background-color: var(--color-tertiary);
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.075s linear 0s;
}

.fondu-spawn:hover .border-top2 {
    width: 50%;
    transition: width 0.075s linear 0.375s;
}

/* Styles spécifiques pour les boutons "En savoir plus" */
.en-savoir-plus.fondu-spawn {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    background-color: transparent;
    color: var(--color-background);
    border: 2px solid transparent;
}

.en-savoir-plus.fondu-spawn:hover {
    background-color: transparent;
    color: var(--color-background);
    font-weight: bold;
}

/* Bordures pour les boutons "En savoir plus" en blanc */
.en-savoir-plus.fondu-spawn .border-top,
.en-savoir-plus.fondu-spawn .border-right,
.en-savoir-plus.fondu-spawn .border-bottom,
.en-savoir-plus.fondu-spawn .border-left,
.en-savoir-plus.fondu-spawn .border-top2 {
    background-color: var(--color-background);
}

/* Style pour le bouton principal d'accueil */
#acceuil #contenu button.fondu-spawn {
    font-weight: normal;
}

.border-light-height {
    height: 3px!important;;
}

.border-light-width {
    width: 3px!important;
}