.notification {
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 1rem;
    z-index: 999999;
    background-color: #eab234;
    color: white;
    width: calc(100% - 2rem);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: all .5s ease;
    transform: translateX(-200%);
    line-height: 1.3;
    padding: .9rem;
    box-shadow: -3px 2px 10px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

.notification[data-type="warning"] {
    background-color: #fffb8b;
    color:black;
}
.notification .titre:before {
    display: inline-block;
    margin-right: .3em;
}
.notification[data-type="warning"] .titre:before {
    content: '⚠️';

}

.notification[data-type="error"] {
    background-color: #ff918b;
    color:black;
}

.notification[data-type="error"] .titre:before {
    content: '😤';

}

.notification[data-type="success"] {
    background-color: #93ff8b;
    color:black;
}

.notification[data-type="success"] .titre:before {
    content: '✅';
}

@media screen and (min-width: 600px) {
    .notification {
        max-width: 60vw;
    }
}
@media screen and (min-width: 1000px) {
    .notification {
        max-width: 40vw;
    }
}

@media screen and (min-width: 1400px) {
    .notification {
        max-width: 30vw;
    }
}

.notification>div {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    flex:1
}

.notification>div>div {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.notification[data-visible="true"] {
    transform: translateX(0);
}

.notification>div>*,
.notification>div>div>* {
    margin: 0;
    padding: 0;
}

.notification figure {
    flex: 0 0 64px;
}

.notification figure>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.notification figure:has(img[src=""]) {
    display: none
}

.notification a {
    color: inherit;
    text-decoration: underline;
}

.notification a:hover {
    text-decoration: none;
}

.notification>div>div>p {
    display: flex;
    flex-direction: column;
}

.notification button {
    top:0;
    right: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    aspect-ratio: 1;
    background: none;
    border: 0;
}


.notification a.button {
    display: inline-block;
    padding: .5rem .8rem;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    text-decoration: none;
}

.notification a.button:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.notification .cta {
    display: flex;
    justify-content: end;
}