:root {
    --bg: #0f172a;
    --panel: #111827;
    --ink: #e5e7eb;
    --muted: #9ca3af;
    --accent: #22d3ee;
    --ring: rgba(34, 211, 238, .35);
    --error: #ef4444;
}

#contact {
    display: flex;
    height: var(--contact-height);
    padding: var(--padding);
    box-sizing: border-box;
    margin-bottom: 128px;

    .form-box {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: var(--background-light);
        box-shadow: 0 10px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);

        .golden-border {
            position: relative;
            width: 100%;
            height: 100%;

            span {
                position: absolute;
                width: 100%;
                height: 6px;
                background: linear-gradient(to bottom,
                        var(--gold4)0%,
                        var(--gold3)25%,
                        var(--gold2)40%,
                        var(--gold1)50%,
                        var(--gold2)60%,
                        var(--gold3)70%,
                        var(--gold4)100%);
            }

            span:nth-child(1n),
            span:nth-child(2n) {
                width: 100%;
                height: 6px;
                background: linear-gradient(to bottom,
                        var(--gold4)0%,
                        var(--gold3)25%,
                        var(--gold2)40%,
                        var(--gold1)50%,
                        var(--gold2)60%,
                        var(--gold3)70%,
                        var(--gold4)100%);
            }

            span:nth-child(2n) {
                bottom: 0px;
            }

            span:nth-child(3n),
            span:nth-child(4n) {
                width: 6px;
                height: 100%;
                background: linear-gradient(to left,
                        var(--gold4)0%,
                        var(--gold3)25%,
                        var(--gold2)40%,
                        var(--gold1)50%,
                        var(--gold2)60%,
                        var(--gold3)70%,
                        var(--gold4)100%);
            }

            span:nth-child(3n) {
                left: 0;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
                corner-shape: bevel;
            }

            span:nth-child(4n) {
                right: 0px;
                border-bottom-left-radius: 10px;
                border-top-left-radius: 10px;
                corner-shape: bevel;
            }
        }

        .metal-border {
            position: relative;
            width: 100%;
            height: 100%;

            span {
                position: absolute;
                width: 100%;
                height: 6px;
                background: linear-gradient(to bottom,
                        var(--silver4) 0%,
                        var(--silver3) 25%,
                        var(--silver2) 40%,
                        var(--silver1) 50%,
                        var(--silver2) 60%,
                        var(--silver3) 70%,
                        var(--silver4) 100%);
            }

            span:nth-child(2) {
                bottom: 0px;
            }

            span:nth-child(3),
            span:nth-child(4) {
                width: 6px;
                height: 100%;
                background: linear-gradient(to left,
                        var(--silver4) 0%,
                        var(--silver3) 25%,
                        var(--silver2) 40%,
                        var(--silver1) 50%,
                        var(--silver2) 60%,
                        var(--silver3) 70%,
                        var(--silver4) 100%);
            }

            span:nth-child(3) {
                left: 0;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
            }

            span:nth-child(4) {
                right: 0px;
                border-bottom-left-radius: 10px;
                border-top-left-radius: 10px;
            }
        }

        /* ✅ Variante argent (valide) */
        .metal-border.valid span {
            background: linear-gradient(to bottom,
                    var(--gold4) 0%,
                    var(--gold3) 25%,
                    var(--gold2) 40%,
                    var(--gold1) 50%,
                    var(--gold2) 60%,
                    var(--gold3) 70%,
                    var(--gold4) 100%);
        }

        .metal-border.valid span:nth-child(3),
        .metal-border.valid span:nth-child(4) {
            width: 6px;
            height: 100%;
            background: linear-gradient(to left,
                    var(--gold4) 0%,
                    var(--gold3) 25%,
                    var(--gold2) 40%,
                    var(--gold1) 50%,
                    var(--gold2) 60%,
                    var(--gold3) 70%,
                    var(--gold4) 100%);
        }

        /* ❌ Variante cuivre (invalide) */
        .metal-border.invalid span {
            background: linear-gradient(to bottom,
                    var(--copper4) 0%,
                    var(--copper3) 25%,
                    var(--copper2) 40%,
                    var(--copper1) 50%,
                    var(--copper2) 60%,
                    var(--copper3) 70%,
                    var(--copper4) 100%);
        }

        .metal-border.invalid span:nth-child(3),
        .metal-border.invalid span:nth-child(4) {
            width: 6px;
            height: 100%;
            background: linear-gradient(to left,
                    var(--copper4) 0%,
                    var(--copper3) 25%,
                    var(--copper2) 40%,
                    var(--copper1) 50%,
                    var(--copper2) 60%,
                    var(--copper3) 70%,
                    var(--copper4) 100%);
        }

        #form-content {
            display: flex;
            position: absolute;
            width: 360px;
            flex-direction: column;
            align-content: center;
            flex-wrap: wrap;

            .title-box {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 70px;
                width: 260px;
                margin: auto;
                background: var(--background1);
                margin-top: -36px;

                h2 {
                    position: absolute;
                    margin-bottom: 0;
                }
            }

            form {
                margin-top: 30px;
                width: 100%;

                p {
                    margin-top: 10px;
                    text-align: center;
                    color: var(--copper3);
                }

                .border-box-input {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 65px;
                    width: 100%;
                    margin: auto;
                }

                .double-input {
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 22px;
                    gap: 30px;

                    .metal-border {
                        display: flex;
                        justify-content: center;

                        img {
                            position: absolute;
                            z-index: 1;
                            top: -16px;
                            width: 34px;
                            filter: grayscale(1);
                            transition: 1s;
                        }

                        img.valid {
                            filter: grayscale(0);
                            transition: 1s;
                        }

                        span:last-child {
                            border-bottom-left-radius: 10px;
                            border-bottom-right-radius: 10px;
                            corner-shape: bevel;
                        }
                    }

                    div {
                        width: 49%;
                        width: 100%;
                    }

                    input {
                        width: calc(100% - 12px);
                        position: absolute;
                    }
                }

                .simple-input {
                    margin-bottom: 24px;
                    min-height: 101px;

                    .border-box-input {
                        position: relative;
                    }

                    .metal-border {
                        position: absolute;
                        pointer-events: none;
                        display: flex;
                        justify-content: center;

                        img {
                            position: absolute;
                            z-index: 1;
                            top: -16px;
                            width: 34px;
                            filter: grayscale(1);
                            transition: 1s;
                        }

                        img.valid {
                            filter: grayscale(0);
                            transition: 1s;
                        }

                        span:last-child {
                            border-bottom-left-radius: 10px;
                            border-bottom-right-radius: 10px;
                            corner-shape: bevel;
                        }
                    }
                }

                .area-input {
                    margin-bottom: 16px;
                    height: 170px;

                    .border-box-input {
                        position: relative;
                        height: 130px;
                    }

                    .metal-border {
                        position: absolute;
                        pointer-events: none;
                        display: flex;
                        justify-content: center;

                        img {
                            position: absolute;
                            z-index: 1;
                            top: -16px;
                            width: 34px;
                            filter: grayscale(1);
                            transition: 1s;
                        }

                        img.valid {
                            filter: grayscale(0);
                            transition: 1s;
                        }

                        span:last-child {
                            border-bottom-left-radius: 10px;
                            border-bottom-right-radius: 10px;
                            corner-shape: bevel;
                        }
                    }
                }

                .btn-box {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 14px 0;
                    width: 100%;

                    .btn {
                        border: 1px solid rgba(255, 255, 255, .12);
                        background: linear-gradient(180deg, rgba(34, 211, 238, .25), rgba(34, 211, 238, .15));
                        color: #04242a;
                        font-weight: 700;
                        letter-spacing: .2px;
                        padding: 12px 18px;
                        border-radius: 999px;
                        cursor: pointer;
                        transition: transform .06s ease, box-shadow .2s, background .2s;
                        box-shadow: 0 10px 24px rgba(34, 211, 238, .25);
                    }

                    .btn:hover {
                        transform: translateY(-1px)
                    }
                }






                .btn-infinity-box {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    button {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 300px;
                        height: 160px;
                        cursor: pointer;

                    }

                    img {
                        position: absolute;
                        width: 300px;
                        height: 160px;
                    }

                    p {
                        position: absolute;
                        margin: 0;
                        font-size: 2rem;
                        text-transform: uppercase;
                        font-weight: 600;
                        color: var(--silver4);
                    }

                    .visu-hover {
                        opacity: 0;
                        transition: 1s;
                    }

                    .border-filter {
                        opacity: 1;
                    }

                    .border-filter.valid {
                        opacity: 0;
                    }

                    .gem {
                        filter: grayscale(1);
                        pointer-events: none;
                    }

                    .gem.valid {
                        filter: grayscale(0);
                    }
                }

                .btn-infinity-box {

                    .text-gold {
                        background-image: linear-gradient(to bottom, #c4d4d8 0%, #458383 25%, #258b8d 40%, #88c9c9 50%, #52a9ab 60%, #6ed9d9 70%, #4bb2af 100%);
                        color: transparent;
                        background-clip: text;
                    }

                    button:hover {
                        .visu-hover.valid {
                            opacity: 1;
                            transition: 1s;
                        }

                        .text-gold.valid {
                            background-image: linear-gradient(var(--gold-radient));
                            color: transparent;
                            background-clip: text;
                        }
                    }

                }






                .field {
                    background: rgb(255, 255, 255);
                    border: 1px solid rgba(255, 255, 255, .1);
                    padding: 14px 14px;
                    outline: none;
                    width: 100%;
                    transition: border-color .2s, box-shadow .2s, background .2s, transform .03s;
                }

                .field::placeholder {
                    color: var(--muted)
                }

                .field:focus {
                    border-color: var(--accent);
                    /* box-shadow: 0 0 0 6px var(--ring); */
                    /* background: rgba(255, 255, 255, .06); */
                }

                /* .field:active {
        transform: translateY(0.5px)
    } */

                textarea.field {
                    min-height: 120px;
                    resize: vertical
                }
            }
        }
    }
}


/* 📱 Mobile large (481px et plus) */
@media (min-width: 481px) {}

/* 📲 Tablettes (768px et plus) */
@media (min-width: 768px) {
    #contact {
        .form-box {
            #form-content {
                width: 580px;
            }
        }
    }
}

/* 💻 Ordinateurs portables (1025px et plus) */
@media (min-width: 1025px) {

    #contact {
        margin-bottom: 0px;

        .form-box {
            height: 705px;

            #form-content {
                width: 890px;

                form {
                    .double-input {
                        flex-direction: row;
                        min-height: 101px;

                        input {
                            width: calc(50% - 27px);
                        }
                    }
                }
            }
        }
    }
}

/* 🖥 Grands écrans (1367px et plus) */
@media (min-width: 1367px) {
    #contact {
        .form-box {
            #form-content {
                width: 1000px;
            }
        }
    }
}

/* 🖥📺 Ultra-large (1920px et plus) — optionnel */
@media (min-width: 1920px) {
    #contact {
        .form-box {
            #form-content {
                width: 1400px;
            }
        }
    }
}