/* =========================================================
   PLAISIRS MARKET - CONTACT V2
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: #f4f5f6 !important;
    color: #202225 !important;

    font-family:
        Poppins,
        Arial,
        sans-serif;
}


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

.pm-contact-page {

    width: 100%;
    max-width: 1100px;

    min-height: 100vh;

    margin: 0 auto;

    padding: 95px 25px 50px;
}


/* UTILISATEUR CONNECTE = ESPACE SIDEBAR */

.pm-contact-connected .pm-contact-page {

    width: calc(100% - 250px);
    max-width: none;

    margin-left: 250px;

    padding:
        110px
        30px
        50px;
}


/* =========================================================
   INTRO
   ========================================================= */

.pm-contact-intro {

    width: 100%;
    max-width: 880px;

    margin: 0 auto 28px;

    text-align: center;
}


.pm-contact-kicker {

    display: inline-flex;

    margin-bottom: 12px;

    padding: 7px 12px;

    background: #202225;
    color: #fff;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.pm-contact-intro h1 {

    max-width: 800px;

    margin: 0 auto 12px;

    color: #202225;

    font-size:
        clamp(32px, 4vw, 46px);

    line-height: 1.08;

    letter-spacing: -1.8px;

    font-weight: 900;
}


.pm-contact-intro p {

    max-width: 700px;

    margin: 0 auto;

    color: #74787e;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   3 PETITES CARTES
   ========================================================= */

.pm-contact-points {

    max-width: 780px;

    margin: 20px auto 0;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 9px;
}


.pm-contact-points span {

    min-height: 50px;

    padding: 10px 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #fff;

    border: 1px solid #e1e3e6;

    border-radius: 10px;

    color: #202225;

    font-size: 13px;
    font-weight: 800;

    text-align: center;
}


/* =========================================================
   MESSAGE SUCCESS / ERREUR
   ========================================================= */

.pm-contact-message {

    width: 100%;
    max-width: 720px;

    margin: 0 auto 18px;

    padding: 15px 18px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    background: #fff;

    border: 1px solid #e1e3e6;

    border-radius: 11px;

    text-align: center;
}


.pm-contact-success {

    border-left: 4px solid #202225;
}


.pm-contact-error {

    border-left: 4px solid #e91683;
}


.pm-contact-message strong {

    color: #202225;

    font-size: 14px;
}


.pm-contact-message span {

    color: #72767c;

    font-size: 14px;
}


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

.pm-contact-card {

    width: 100%;
    max-width: 720px;

    margin: 0 auto;

    padding: 34px;

    background:
        linear-gradient(
            145deg,
            #17181a,
            #24262a
        );

    color: #fff;

    border: 1px solid #303237;

    border-radius: 19px;

    box-shadow:
        0 15px 36px
        rgba(0,0,0,.12);
}


/* TITRE FORM */

.pm-contact-card-head {

    margin-bottom: 23px;

    text-align: center;
}


.pm-contact-card-head > span {

    display: block;

    margin-bottom: 7px;

    color: #aeb2b7;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.pm-contact-card-head h2 {

    margin: 0 0 8px;

    color: #fff;

    font-size: 27px;

    font-weight: 900;
}


.pm-contact-card-head p {

    margin: 0;

    color: #b9bdc2;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   FORMULAIRE
   ========================================================= */

.pm-contact-form {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 15px;
}


.pm-contact-field {

    width: 100%;

    text-align: left;
}


.pm-contact-field label {

    display: block;

    margin-bottom: 6px;

    color: #e2e4e6;

    font-size: 14px;

    font-weight: 750;
}


.pm-contact-field input,
.pm-contact-field textarea {

    width: 100%;

    padding: 13px 14px;

    background: #111214;

    color: #fff;

    border: 1px solid #41444a;

    border-radius: 9px;

    outline: none;

    font-family: inherit;

    font-size: 14px;

    transition: .18s ease;
}


.pm-contact-field textarea {

    min-height: 140px;

    resize: vertical;
}


.pm-contact-field input:focus,
.pm-contact-field textarea:focus {

    background: #151619;

    border-color: #ff1684;

    box-shadow:
        0 0 0 3px
        rgba(255,22,132,.10);
}


.pm-contact-field textarea::placeholder {

    color: #777c82;
}


/* =========================================================
   RECAPTCHA
   ========================================================= */

.pm-contact-recaptcha {

    width: 100%;

    margin: 3px auto;

    display: flex;

    justify-content: center;

    overflow: hidden;
}


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

.pm-contact-submit {

    width: 100%;

    min-height: 54px;

    padding: 0 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #e90073,
            #ff1684,
            #f00691
        );

    color: #fff;

    border: 0;

    border-radius: 11px;

    box-shadow:
        0 9px 22px
        rgba(233,0,115,.26);

    font-family: inherit;

    font-size: 15px;

    font-weight: 900;

    cursor: pointer;

    transition: .18s ease;
}


.pm-contact-submit:hover {

    transform: translateY(-2px);

    box-shadow:
        0 13px 28px
        rgba(233,0,115,.36);
}


/* =========================================================
   CONFIDENTIALITE
   ========================================================= */

.pm-contact-secure {

    margin-top: 17px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    text-align: center;
}


.pm-contact-secure p {

    margin: 0;

    color: #9ca0a5;

    font-size: 13px;
}


/* =========================================================
   MOTIVATION
   ========================================================= */

.pm-contact-motivation {

    width: 100%;
    max-width: 880px;

    margin: 25px auto 0;

    padding: 30px;

    background:
        linear-gradient(
            135deg,
            #fff3f8,
            #ffffff
        );

    border: 1px solid #efdce5;

    border-radius: 18px;

    text-align: center;
}


.pm-contact-motivation-kicker {

    display: block;

    margin-bottom: 8px;

    color: #e91683;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.pm-contact-motivation h2 {

    max-width: 720px;

    margin: 0 auto 9px;

    color: #202225;

    font-size: 27px;

    line-height: 1.18;

    font-weight: 900;
}


.pm-contact-motivation p {

    max-width: 670px;

    margin: 0 auto;

    color: #73777d;

    font-size: 14px;

    line-height: 1.7;
}


.pm-contact-motivation-items {

    margin-top: 18px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;
}


.pm-contact-motivation-items span {

    padding: 9px 13px;

    background: #fff;

    border: 1px solid #ececef;

    border-radius: 9px;

    color: #202225;

    font-size: 13px;

    font-weight: 800;
}


/* =========================================================
   BAS DE PAGE
   ========================================================= */

.pm-contact-bottom {

    width: 100%;

    padding: 35px 25px 20px;

    text-align: center;
}


.pm-contact-connected .pm-contact-bottom {

    width: calc(100% - 250px);

    margin-left: 250px;
}


.pm-contact-bottom-inner {

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    text-align: center;
}


.pm-contact-bottom-inner > * {

    margin-left: auto !important;

    margin-right: auto !important;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width:1050px) {

    .pm-contact-connected .pm-contact-page,
    .pm-contact-connected .pm-contact-bottom {

        width: 100%;

        margin-left: 0;
    }


    .pm-contact-page,
    .pm-contact-connected .pm-contact-page {

        padding:
            95px
            14px
            40px;
    }

}


/* =========================================================
   GSM
   ========================================================= */

@media (max-width:650px) {

    .pm-contact-points {

        grid-template-columns: 1fr;
    }


    .pm-contact-card {

        padding:
            26px
            17px;
    }


    .pm-contact-motivation {

        padding:
            24px
            17px;
    }


    .pm-contact-motivation-items {

        flex-direction: column;
    }


    .pm-contact-motivation-items span {

        width: 100%;
    }


    .pm-contact-recaptcha {

        transform: scale(.88);

        transform-origin: center center;
    }

}