/* =========================================
   RESET
========================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    min-height: 100%;

}


body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background: #faf8f6;

    color: #24110f;

}


/* =========================================
   PAGE
========================================= */

.login-page {

    min-height: 100vh;

    display: flex;

    overflow: hidden;

}


/* =========================================
   PARTIE GAUCHE
========================================= */

.login-section {

    width: 52%;

    min-height: 100vh;

    background: #faf8f6;

    padding:
        45px
        clamp(40px, 8vw, 130px);

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;
    background-image:
        linear-gradient(
            to right,
            rgba(55, 40, 35, 0.075) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(55, 40, 35, 0.075) 1px,
            transparent 1px
        );

    background-size: 120px 120px;

}


/* =========================================
   LOGO
========================================= */

.brand {

    position: relative;

    /* top: 35px; */

    /* left: clamp(40px, 8vw, 130px); */

}


.brand img {

    width: 155px;

    height: auto;

    object-fit: contain;

}


/* =========================================
   WELCOME
========================================= */

.welcome {

    margin-bottom: 28px;

}


.welcome h1 {

    font-family: Georgia, serif;

    font-size:
        clamp(38px, 4vw, 58px);

    line-height: 1.05;

    color: #24110f;

    margin-bottom: 10px;

}


.welcome p {

    font-size: 16px;

    color: #8b7770;

}


/* =========================================
   CARTE
========================================= */

.login-card {

    width: 100%;

    max-width: 530px;

    background: white;

    border-radius: 8px;

    padding: 34px;

    border:
        1px solid
        rgba(20, 13, 12, 0.158);

    box-shadow:

        0 8px 25px
        rgba(50, 20, 10, .08),

        0 2px 8px
        rgba(50, 20, 10, .04);

}


.login-card h2 {

    font-size: 21px;

    color: #251310;

    margin-bottom: 7px;

}


.description {

    font-size: 14px;

    color: #8b7770;

    margin-bottom: 27px;

    line-height: 1.5;

}


/* =========================================
   FORM
========================================= */

.form-group {

    margin-bottom: 21px;

}


.form-group label {

    display: block;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 8px;

    color: #35221e;

}


.form-group input {

    width: 100%;

    height: 48px;

    padding:
        0 14px;

    border:
        1px solid
        #ded6d2;

    border-radius: 5px;

    outline: none;

    font-size: 14px;

    color: #321a16;

    background: #fff;

    transition: .2s;

}


.form-group input::placeholder {

    color: #aaa09b;

}


.form-group input:focus {

    border-color:
        #9a1115;

    box-shadow:
        0 0 0 3px
        rgba(154, 17, 21, .07);

}


/* =========================================
   PASSWORD
========================================= */

.password-label {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.password-label a {

    color:
        #9a1115;

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

}


.password-label a:hover {

    text-decoration: underline;

}


.password-container {

    position: relative;

}


.password-container input {

    padding-right: 48px;

}


.password-container button {

    position: absolute;

    right: 13px;

    top: 50%;

    transform:
        translateY(-50%);

    border: none;

    background: transparent;

    cursor: pointer;

    color: #8e8581;

}


/* =========================================
   REMEMBER
========================================= */

.remember {

    margin:
        2px 0 22px;

}


.remember label {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 13px;

    color: #6e625e;

    cursor: pointer;

}


.remember input {

    width: 16px;

    height: 16px;

    accent-color:
        #8d080d;

}


/* =========================================
   BOUTON
========================================= */

.login-button {

    width: 100%;

    height: 50px;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    background:

        linear-gradient(
            90deg,
            #82060b,
            #a50a0f
        );

    color: white;

    font-size: 15px;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    box-shadow:

        0 7px 18px
        rgba(130, 6, 11, .18);

    transition: .25s;

}


.login-button span {

    font-size: 21px;

    transition: .25s;

}


.login-button:hover {

    background:

        linear-gradient(
            90deg,
            #720308,
            #92080d
        );

    transform:
        translateY(-1px);

    box-shadow:

        0 10px 22px
        rgba(130, 6, 11, .24);

}


.login-button:hover span {

    transform:
        translateX(5px);

}


/* =========================================
   REGISTER
========================================= */

.register {

    text-align: center;

    font-size: 13px;

    color: #827570;

    margin-top: 24px;

}


.register a {

    color:
        #a20a0f;

    text-decoration: none;

    font-weight: 600;

}


.register a:hover {

    text-decoration: underline;

}


/* =========================================
   FOOTER
========================================= */

.footer {

    position: absolute;

    bottom: 25px;

    left: clamp(40px, 8vw, 130px);

    font-size: 11px;

    color: #aaa09c;

}


/* =========================================
   PARTIE DROITE
========================================= */

.visual-section {

    position: relative;

    width: 48%;

    min-height: 100vh;

    overflow: hidden;

    background:

        linear-gradient(
            135deg,
            #c73632,
            #d95a4f
        );

}


/* =========================================
   FORMES DU FOND
========================================= */

.shape {

    position: absolute;

    background: #faf8f6;

}


.shape-top {

    width: 270px;

    height: 320px;

    left: -135px;

    top: -135px;

    border-radius: 50%;

}


.shape-bottom {

    width: 350px;

    height: 350px;

    left: -175px;

    bottom: -165px;

    border-radius: 50%;

}


/* =========================================
   CREUX CENTRAL
========================================= */

.visual-section::before {

    content: "";

    position: absolute;

    left: -115px;

    top: 20%;

    width: 230px;

    height: 60%;

    background: #faf8f6;

    border-radius: 50%;

}


/* =========================================
   PETITS CERCLES
========================================= */

.circle {

    position: absolute;

    border-radius: 50%;

    background: rgba(255,255,255,.15);

    border:
        1px solid
        rgba(255,255,255,.18);

}


.circle-1 {

    width: 100px;

    height: 100px;

    right: 12%;

    top: 9%;

}


.circle-2 {

    width: 25px;

    height: 25px;

    right: 8%;

    bottom: 17%;

    background:
        #f0a321;

}


.circle-3 {

    width: 50px;

    height: 50px;

    left: 20%;

    bottom: 9%;

    background:
        rgba(116, 5, 10, .3);

}


/* =========================================
   ILLUSTRATION
========================================= */

.wine-illustration {

    position: absolute;

    z-index: 5;

    right: 8%;

    bottom: 8%;

    width: 550px;

    height: 530px;

}


/* =========================================
   BOUTEILLE
========================================= */

.bottle {

    position: absolute;

    right: 130px;

    bottom: 10px;

    width: 180px;

    height: 400px;

    transform:
        rotate(7deg);

}


/* Col */

.bottle-neck {

    position: absolute;

    left: 62px;

    top: 0;

    width: 56px;

    height: 130px;

    background:

        linear-gradient(
            90deg,
            #3d080b,
            #8b080d 45%,
            #4b0507
        );

    border-radius:
        12px 12px 4px 4px;

    box-shadow:
        inset 8px 0 rgba(255,255,255,.08);

}


/* Capsule */

.bottle-neck::before {

    content: "";

    position: absolute;

    top: -8px;

    left: 5px;

    width: 46px;

    height: 28px;

    background:
        #e9a51b;

    border-radius:
        5px 5px 2px 2px;

}


/* Corps */

.bottle-body {

    position: absolute;

    bottom: 0;

    left: 15px;

    width: 150px;

    height: 300px;

    background:

        linear-gradient(
            90deg,
            #380407,
            #77070c 30%,
            #a30a0f 52%,
            #5b0508 100%
        );

    border-radius:
        35px 35px 22px 22px;

    box-shadow:

        inset 12px 0 18px
        rgba(255,255,255,.08),

        inset -15px 0 20px
        rgba(0,0,0,.25),

        15px 20px 25px
        rgba(60,0,0,.20);

}


/* Étiquette */

.bottle-label {

    position: absolute;

    left: 20px;

    top: 95px;

    width: 110px;

    height: 125px;

    background:
        #f6e5ce;

    border:
        3px solid
        #d99113;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #79070c;

}


.bottle-label span {

    font-family: Georgia, serif;

    font-size: 30px;

    font-weight: bold;

}


.bottle-label small {

    font-size: 7px;

    letter-spacing: 2px;

}


.bottle-label strong {

    font-family: Georgia, serif;

    font-size: 15px;

    letter-spacing: 1px;

    margin: 3px 0;

}


/* =========================================
   VERRE À VIN
========================================= */

.wine-glass {

    position: absolute;

    right: 0;

    bottom: 35px;

    width: 180px;

    height: 370px;

}


/* Coupe */

.glass-bowl {

    position: absolute;

    top: 0;

    left: 10px;

    width: 160px;

    height: 190px;

    border:
        4px solid
        rgba(255,255,255,.88);

    border-top: none;

    border-radius:
        0 0 80px 80px;

    transform:
        perspective(400px)
        rotateX(-5deg);

    overflow: hidden;

    background:
        rgba(255,255,255,.06);

}


/* Vin */

.wine {

    position: absolute;

    bottom: -5px;

    left: -10px;

    width: 180px;

    height: 105px;

    background:

        linear-gradient(
            180deg,
            #a30a12,
            #620308
        );

    border-radius:
        50% 50% 0 0;

}


/* Reflet */

.wine-shine {

    position: absolute;

    width: 13px;

    height: 80px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.45);

    left: 30px;

    top: 45px;

    transform:
        rotate(10deg);

}


/* Tige */

.glass-stem {

    position: absolute;

    left: 87px;

    top: 185px;

    width: 5px;

    height: 145px;

    background:
        rgba(255,255,255,.8);

}


/* Pied */

.glass-base {

    position: absolute;

    bottom: 5px;

    left: 35px;

    width: 110px;

    height: 8px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.85);

}


/* =========================================
   PETIT VERRE
========================================= */

.small-glass {

    position: absolute;

    left: 55px;

    bottom: 20px;

    width: 100px;

    height: 200px;

    transform:
        rotate(-8deg);

    opacity: .8;

}


.small-bowl {

    position: absolute;

    top: 0;

    width: 95px;

    height: 100px;

    border:
        3px solid
        rgba(255,255,255,.7);

    border-top: none;

    border-radius:
        0 0 50px 50px;

    overflow: hidden;

}


.small-wine {

    position: absolute;

    bottom: 0;

    width: 100%;

    height: 55px;

    background:
        #8a080d;

}


.small-stem {

    position: absolute;

    top: 98px;

    left: 48px;

    width: 3px;

    height: 80px;

    background:
        rgba(255,255,255,.7);

}


/* =========================================
   TEXTE À DROITE
========================================= */

.visual-text {

    position: absolute;

    z-index: 10;

    top: 18%;

    right: 13%;

    color: white;

    text-align: right;

}


.visual-text span {

    font-size: 11px;

    letter-spacing: 5px;

    color:
        #ffd58a;

    font-weight: 600;

}


.visual-text h2 {

    font-family: Georgia, serif;

    font-size:
        clamp(38px, 4vw, 62px);

    line-height: .95;

    margin-top: 12px;

}


.visual-text p {

    margin-top: 18px;

    font-size: 14px;

    color:
        rgba(255,255,255,.75);

}

.errormodalx {
  height: auto;
  display: flex;
  flex-direction: row;
  color: #ff0000;
  background: #ffe0e0;
  border: 1px solid #f5baba;
  padding: 0px;
  border-radius: 10px;
  transition: 0.3s;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.105);
  align-items: center;
  visibility: hidden;
  opacity: 0;
}

.errormodalx.see {
  opacity: 1;
  visibility: visible;
  margin-bottom: 20px;
  padding: 10px;
}

.errormodalx i {
  font-size: 18px;
  margin-right: 10px;
  margin-left: 3px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .login-section {

        width: 58%;

        padding-left: 50px;

        padding-right: 50px;

    }


    .visual-section {

        width: 42%;

    }


    .wine-illustration {

        transform:
            scale(.8);

        transform-origin:
            bottom right;

    }


    .visual-text {

        right: 8%;

    }

}


@media (max-width: 750px) {

    .login-page {

        display: block;

    }


    .login-section {

        width: 100%;

        min-height: 100vh;

        padding:
            110px 25px 50px;

    }


    .brand {

        top: 25px;

        left: 25px;

    }


    .brand img {

        width: 130px;

    }


    .visual-section {

        display: none;

    }


    .login-card {

        max-width: 100%;

    }


    .welcome h1 {

        font-size: 40px;

    }


    .footer {

        position: static;

        margin-top: 30px;

    }

}


@media (max-width: 450px) {

    .login-card {

        padding: 25px 20px;

    }


    .welcome h1 {

        font-size: 34px;

    }


    .welcome p {

        font-size: 14px;

    }


    .login-card h2 {

        font-size: 19px;

    }

}