:root {
    --p: #7f1f64;
    --pd: #5d1049;
    --pl: #9d2679;
    --o: #f8a600;
    --ink: #2b1224;
    --mut: #6d5565;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px)
}

html {
    scroll-padding-top: env(safe-area-inset-top, 0px)
}

*,
*:before,
*:after {
    box-sizing: inherit
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Outfit, system-ui, sans-serif;
    color: #fff;
    background: var(--p);
    overflow-x: hidden
}

.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, #86205f, #8d2169)
}

.bg i {
    position: absolute;
    inset: 0
}

.bg i:nth-child(1) {
    background: linear-gradient(160deg, #7a1c5d, #85205f);
    clip-path: polygon(0 0, 38% 0, 70% 100%, 0 100%);
    opacity: .9
}

.bg i:nth-child(2) {
    background: linear-gradient(120deg, #a0287c, #932070);
    clip-path: polygon(62% 0, 100% 0, 100% 100%, 92% 100%)
}

.bg i:nth-child(3) {
    background: linear-gradient(90deg, #6a1650, #84205f);
    clip-path: polygon(84% 0, 100% 0, 100% 46%)
}

.bg i:nth-child(4) {
    background: linear-gradient(100deg, #7a1c5d, #b02383);
    clip-path: polygon(0 100%, 8% 78%, 52% 78%, 44% 100%);
    opacity: .9
}

main {
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(28px, 6vw, 64px) clamp(18px, 4vw, 32px) 40px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.plate {
    background: #fff;
    border-radius: 18px;
    padding: 14px 26px;
    box-shadow: 0 18px 40px -16px rgba(40, 5, 30, .55);
    position: relative
}

.plate:after {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: -5px;
    height: 5px;
    background: var(--o);
    border-radius: 0 0 5px 5px;
    transform: skewX(-27deg)
}

.plate img {
    display: block;
    height: clamp(54px, 9vw, 78px);
    width: auto
}

h1 {
    font-weight: 300;
    font-size: clamp(26px, 5vw, 40px);
    letter-spacing: .01em;
    margin: clamp(30px, 6vw, 52px) 0 6px;
    text-align: center
}

h1 b {
    font-weight: 600
}

.sub {
    margin: 0 0 clamp(26px, 5vw, 44px);
    color: #f3d9ea;
    font-weight: 300;
    text-align: center;
    font-size: clamp(15px, 2.4vw, 18px)
}

.grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 18px
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px 22px;
    border-radius: 18px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 14px 34px -18px rgba(40, 5, 30, .6);
    transition: transform .25s, box-shadow .25s;
    animation: up .6s both;
    animation-delay: calc(var(--i)*90ms + 120ms)
}

.card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    width: 46px;
    height: 5px;
    background: var(--o);
    transform: skewX(-27deg);
    transition: width .3s
}

.bidouilles-card {
    gap: 7px;
    padding: 26px 24px 22px;
    border: 1px solid rgba(93, 16, 73, .12);
    background: rgba(255, 255, 255, .88);
    color: var(--mut);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bidouilles-card:before {
    width: 36px;
    opacity: .55;
}

.bidouilles-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bidouilles-title .ico {
    width: 42px;
    height: 42px;
    margin: 2px 0;
    border-radius: 12px;
    background: #ede6eb;
}

.bidouilles-title .ico svg {
    width: 21px;
    height: 21px;
    stroke: var(--mut);
}

.bidouilles-card h2 {
    margin: 6px 0 0;
    color: #695663;
    font-size: 19px;
}

.bidouilles-description {
    color: #81727c;
    font-size: 12px;
}

.bidouilles-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #695663;
    font-size: 12px;
    font-weight: 500;
}

.bidouilles-card:hover,
.bidouilles-card:focus-visible {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 12px 24px -18px rgba(40, 5, 30, .5);
}

.subdomain-backdrop[hidden],
.subdomain-panel[hidden] {
    display: none;
}

.subdomain-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgba(28, 12, 24, .38);
}

.subdomain-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 11;
    display: flex;
    flex-direction: column;
    width: min(390px, 92vw);
    padding: 22px;
    background: #fff;
    box-shadow: -14px 0 40px rgba(40, 5, 30, .2);
    animation: slide-in .22s ease-out both;
}

.subdomain-panel-open {
    overflow: hidden;
}

.subdomain-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee5eb;
}

.subdomain-panel-header h2 {
    margin: 0;
    color: var(--p);
    font-size: 19px;
    font-weight: 600;
}

.subdomain-panel-header p {
    margin: 4px 0 0;
    color: var(--mut);
    font-size: 12px;
}

.subdomain-close {
    display: grid;
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: #f5f0f3;
    color: var(--p);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.subdomain-list {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #c7a8bb #fff;
    scrollbar-width: thin;
}

.subdomain-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 8px 2px;
    border-bottom: 1px solid #f1ebef;
    color: var(--ink);
    font-size: 13px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.subdomain-link:after {
    content: "↗";
    flex: none;
    margin-left: 8px;
    color: var(--p);
}

.subdomain-link:hover,
.subdomain-link:focus-visible {
    color: var(--p);
    outline-color: var(--o);
}

.subdomain-message {
    margin: 16px 0;
    color: var(--mut);
    font-size: 13px;
}

.card:hover,
.card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 24px 40px -18px rgba(40, 5, 30, .75);
    outline: none
}

.card:hover:before,
.card:focus-visible:before {
    width: 110px
}

.card:focus-visible {
    box-shadow: 0 0 0 3px var(--o), 0 24px 40px -18px rgba(40, 5, 30, .75)
}

.ico {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--pl), var(--pd));
    display: grid;
    place-items: center;
    margin-top: 6px
}

.ico svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.card h2 {
    margin: 6px 0 0;
    font-size: 21px;
    font-weight: 600;
    color: var(--p)
}

.card p {
    margin: 0;
    color: var(--mut);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 400;
    flex: 1
}

.go {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
    color: var(--p);
    margin-top: 6px
}

.go svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s
}

.card:hover .go svg {
    transform: translateX(5px)
}

footer {
    margin-top: 48px;
    color: #e9c6dc;
    font-size: 13px;
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 10px
}

footer img {
    width: 22px;
    height: 22px;
    border-radius: 5px
}

@keyframes up {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes slide-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .card {
        animation: none;
        transition: none
    }

    .subdomain-panel {
        animation: none;
    }
}