/* --------------------------------------- */
/* ---------- MOBILE XS - 300px ---------- */
@media (min-width:1px) {

    main {
        overflow-x: hidden;
        max-width: 2400px;
        margin: 0 auto;
    }

    .content-box {
        width: 100%;
        margin: auto;
    }

    .sec-login-01 {
        background: #87185D;
        background: linear-gradient(146deg, rgba(165,33,127,1) 0%, rgba(104,11,66,1) 100%);
        padding: 50px 30px;
        min-height: 88vh;
    }

    .login-form-box {
        background: #ffffff;
        padding: 30px 20px 40px 20px;
        border-radius: 6px;
        box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
        margin-bottom: 40px;
        display: flex;
        justify-content: center;
    }

    .sec01-title {
        font-family: 'Teko', sans-serif;
        font-size: 50px;
        font-weight: 500;
        color: var(--primary);
        line-height: 1;
        text-align: center;
        margin-bottom: 25px;
    }

    #userid ~ .ico-input-right {
        background: url("../svg/ico-bonhomme-gris.svg");
    }

    #userid:hover ~ .ico-input-right, #userid:focus ~ .ico-input-right {
        background: url("../svg/ico-bonhomme-prune.svg");
    }

    #pswd ~ .ico-input-right {
        background: url("../svg/ico-cadenas-gris.svg");
    }

    #pswd:hover ~ .ico-input-right, #pswd:focus ~ .ico-input-right {
        background: url("../svg/ico-cadenas-prune.svg");
    }

    #btn-login {
        margin: auto;
    }

    .cta-mdp-oubli {
        text-align: center;
        font-family: 'Cabin', sans-serif;
        font-size: 18px;
        color: var(--gris);
        font-weight: 400;
        text-decoration: none;
        padding: 0;
    }

    .cta-mdp-oubli:hover {
        color: var(--primary-grad2);
    }

    .clic-box {
        display: block;
        min-height: 11rem;
    }

    .clic-zone {
        text-decoration: none;
    }

    .cta-creation {
        background: #ffffff;
        padding: 25px 30px;
        border-radius: 6px;
        box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
        transition: transform 0.4s ease-out;
    }

    .clic-zone:hover .cta-creation {
        transform: scale(1.04);
    }

    .phrase-01 {
        font-family: 'Cabin', sans-serif;
        font-size: 20px;
        font-weight: 500;
        color: var(--noir-texte);
        padding: 0;
        text-align: center;
        margin-bottom: 15px;
        transition: all 0.4s ease-out;
    }

    .clic-zone:hover .phrase-01 {
        font-size: 16px;
        color: var(--gris);
    }

    .phrase-02 {
        font-family: 'Cabin', sans-serif;
        font-size: 18px;
        font-weight: 500;
        color: var(--gris);
        padding: 0;
        text-decoration: none;
        display: flex;
        justify-content: center;
        transition: font-size 0.4s ease-out;
    }

    .clic-zone:hover .phrase-02 {
        font-size: 20px;
        color: var(--primary);
    }

    .ico-cta-crea {
        background: url("../svg/ico-bonhomme-plus-gris.svg");
        width: 100%;
        max-width: 40px;
        height: 40px;
        background-position: center;
        background-repeat: no-repeat;
        display: inline-block;
        margin: auto 8px auto 0;
    }

    .clic-zone:hover .ico-cta-crea {
        background: url("../svg/ico-bonhomme-plus-prune.svg");
    }

    .phrase-02 p {
        margin: auto 0;
    }



}



/* ----------------------------------------------- */
/* ---------- PETIT TABLETTE SM - 576px ---------- */
@media (min-width:576px) {

    .content-box {
        width: 80%;
    }

    .login-form-box {
        padding: 30px 70px 40px 70px;
    }

    .cta-creation {
        padding: 20px 30px;
    }

    .phrase-01 {
        margin-bottom: 10px;
    }

    .ico-cta-crea {
        width: 100%;
        max-width: 25px;
        height: 25px;
    }

}




/* ----------------------------------------- */
/* ---------- TABLETTE MD - 768px ---------- */
@media (min-width:768px) {

    .sec-login-01 {
        padding: 80px 30px;
    }

    .content-box {
        width: 100%;
        max-width: 30rem;
    }

    .login-form-box {
        padding: 30px 90px 40px 90px;
        margin-bottom: 30px;
    }

}



/* -------------------------------------- */
/* ---------- ECRAN LG - 992px ---------- */
@media (min-width:992px) {

    #btn-login {
        font-size: 18px;
        padding: 8px 18px;
    }

}



/* --------------------------------------------- */
/* ---------- ECRAN MOYEN XL - 1200px ---------- */
@media (min-width:1200px) {

    .sec-login-01 {
        padding: 120px 30px;
    }

}



/* ---------------------------------------------- */
/* ---------- ECRAN LARGE XXL - 1400px ---------- */
@media (min-width:1400px) {


    
}

/* ------------------------------------------------------------ */
/* ---------- FIX PAGE TROP COURTE - fenetre > 950px ---------- */
@media (min-height:950px) {


    
}