.lire-plus {
    position: relative;
    display: block;
    min-height: 4rem;
    margin-bottom: 1rem;
}

.lire-plus a {
    position: relative;
    display: block;
    padding: 1rem 1.5rem 2rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: .5rem;
    transition: padding-right .5s , padding-left .5s , color .25s ;
}

.bg-peche .lire-plus a {
    background-color: #f09992;
}
.bg-peche-light .lire-plus a {
  background-color: #f8cac8;
}
.bg-petrole .lire-plus a {
  background-color: #81adc8;
}
.bg-petrole-light .lire-plus a {
  background-color: #b6d8ee;
}
.bg-white .lire-plus a {
  background-color: white;
  color: #4d4d4d;
}

.lire-plus a::after {
    content: ' ';
    position: relative;
    display: block;
    height: .15rem;
    width: 100%;
    margin-top: .5rem;
    background-color: white;
    transition: margin-left .5s , color .25s ;
}

.bg-white .lire-plus a::after {
    background-color: #4d4d4d;
}

.lire-plus a:hover {
    padding-right: 3rem;
    padding-left: 3rem;
    color: #365664;
}

.lire-plus a:hover::after {
    /* margin-left: -2rem; */
    background-color: #365664;
}
.bg-white .lire-plus a:hover {
    color: #878787;
}

.bg-white .lire-plus a:hover::after {
    background-color: #878787;
}


@media (min-width: 768px) and (max-width: 1023px) {
    .lire-plus  {
        margin-left: 55%;
    }
    .lire-plus a {
        padding: 1rem 4rem 2rem 0;
    }
    .lire-plus a:hover {
        padding: 1rem 0 2rem 4rem;
    }
    .lire-plus a::after {
        margin-left: 4rem;
    }
    .lire-plus a:hover::after {
        margin-left: -4rem;
    }
}

@media (min-width: 1024px) {
    .lire-plus  {
        margin-left: 60%;
    }
    .lire-plus a {
        padding: 1rem 4rem 2rem 0;
    }
    .lire-plus a:hover {
        padding: 1rem 0 2rem 4rem;
    }
    .lire-plus a::after {
        margin-left: 4rem;
    }
    .lire-plus a:hover::after {
        margin-left: -4rem;
    }
}