/* --------------------------------------- */
/* ---------- MOBILE XS - 300px ---------- */

@media (min-width:1px) {
    /* mise en page */
    main {
        position: relative;
        padding-top: 8rem;
        padding-bottom: 10rem;
    }

    .section-connexion {
        position: relative;
        overflow: hidden;
    }

    #LOTTIE-clavier-connexion, #LOTTIE-perso-ecran {
        width: 85%;
        max-width: 50rem;
        margin: auto;
        margin-right: 0%;
    }

    #LOTTIE-perso-ecran {
        margin-top:0rem;
    }

    .formulaire-connexion, .formulaire-creation {
        margin: auto;
    }



    /* animations */
    .switch1, .switch2 {
        cursor: pointer;
    }
    .target {
        animation: SlideRight 1.5s ease-in-out alternate infinite;
        animation-play-state:paused;
      }
      
      @-webkit-keyframes SlideRight {
        0% {
          transform: translateX(0);
        }
        
        30% {
            transform: translateX(-3%);
        }

        94% {
            -webkit-opacity:1;
            opacity: 1;
        }

        95% {
            -webkit-opacity:0;
            opacity: 0;

        }
      
        100% {
            transform: translateX(110vw);
        }
      }

    .target2 {
        animation: SlideLeft 1.5s ease-in-out alternate-reverse infinite;
        animation-play-state:paused;
        position: absolute;
      }
      
      @-webkit-keyframes SlideLeft {
        0% {
          transform: translateX(0);
        }
        
        30% {
            transform: translateX(3%);
        }

        94% {
            -webkit-opacity:1;
            opacity: 1;
            
        }

        95% {
            -webkit-opacity:0;
            opacity: 0;
        }
      
        100% {
            transform: translateX(-110vw);
        }
      }

      /* IMPORTANT garder cette classe SOUS les animations de ce fichier CSS pour qu'elles fonctionnent*/
      .play {
        animation-play-state:running;
      }



    /* style du formulaire */
    .formulaire-connexion form, .formulaire-creation form {
        margin: auto;
        max-width: 85%;
        background: #F6F6F6;
        padding: 3rem 2rem;
        background-repeat: no-repeat;
        background-position: left top,
                            right top,
                            left bottom,
                            right bottom;
        background-size: 4rem 4rem,
                        4rem 4rem,
                        4rem 4rem,
                        4rem 4rem;
        background-image:   url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32.5 32.6' style='enable-background:new 0 0 32.5 32.6;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23854A97;stroke-width:2;%7D .st1%7Bfill:none;stroke:%23854A97;stroke-width:1.5;%7D %3C/style%3E %3Cpolyline class='st0' points='1,32.7 1,1 32.5,1 '/%3E %3Cpolyline class='st1' points='7.8,26.2 7.8,7.9 26.1,7.9 '/%3E %3C/svg%3E "),
                            url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32.5 32.6' style='enable-background:new 0 0 32.5 32.6;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23854A97;stroke-width:2;%7D .st1%7Bfill:none;stroke:%23854A97;stroke-width:1.5;%7D %3C/style%3E %3Cpolyline class='st0' points='0,1 31.5,1 31.5,32.7 '/%3E %3Cpolyline class='st1' points='6.4,7.9 24.7,7.9 24.7,26.2 '/%3E %3C/svg%3E "),
                            url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32.5 32.6' style='enable-background:new 0 0 32.5 32.6;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23854A97;stroke-width:2;%7D .st1%7Bfill:none;stroke:%23854A97;stroke-width:1.5;%7D %3C/style%3E %3Cpolyline class='st0' points='32.5,31.7 1,31.7 1,0 '/%3E %3Cpolyline class='st1' points='26.1,24.8 7.8,24.8 7.8,6.5 '/%3E %3C/svg%3E "),
                            url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32.5 32.6' style='enable-background:new 0 0 32.5 32.6;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23854A97;stroke-width:2;%7D .st1%7Bfill:none;stroke:%23854A97;stroke-width:1.5;%7D %3C/style%3E %3Cpolyline class='st0' points='31.5,0 31.5,31.7 0,31.7 '/%3E %3Cpolyline class='st1' points='24.7,6.5 24.7,24.8 6.4,24.8 '/%3E %3C/svg%3E ");
    }

    .formulaire-creation form {
        position: relative;
    }

    .overlay-blanc::before {
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        opacity: 0.6;
        z-index: 2;
      }

    .overlay-validation {
        visibility: hidden;
        position: absolute;
        display: flex;
        width: 100%;
        height: 100%;
        max-width: 100%!important;
        top: 0;
        left: 0;
        background-color: rgba(255,255,255,0.7);
        z-index: 2;
    }

    .overlay-validation .content-overlay {
        margin: auto;
        padding: 1rem 2rem;
        width: 80%;
        background-color: #fff;
        border:2px solid #794C99;
    }

    .content-overlay p {
        font-family: 'Cabin', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color:#242424;
    }

    form h3 {
        font-size: 36px;
        text-align: center;
        margin-bottom: 1rem;
    }

    form div {
        margin-bottom: 1rem;
    }

    form div, form h3 {
        margin-left: auto;
        margin-right: auto;
        max-width: 25rem;
    }

    .formulaire-creation form div, .formulaire-creation form h3 {
        max-width: 35rem;
    }

    .formulaire-creation label {
        font-family: 'Cabin', sans-serif;
        font-weight: 500;
    }

    .form-pad-gauche {
        padding-left: 0;
        padding-right: 0;
    }

    .form-pad-droite {
        padding-left: 0;
        padding-right: 0;
    }

    .input-bar {
        width: 100%;
        background: #ffffff;
        border:2px solid #794C99;
        padding: 0.6rem 0.8rem;
        font-size: 18px;
        font-family: 'Cabin', sans-serif;
        color:#242424;
    }

    .input-bar:hover {
        border:2px solid #2196F3;
    }
    
    .input-bar::placeholder {
        color:#B4B4B4;
        font-size: 18px;
        font-family: 'Cabin', sans-serif;
    }
    
    .input-bar:focus {
        border:2px solid #794C99;
        background: #FDF6FF;
    }
    
    .input-bar:focus-visible {
        outline: none;
    }
    
    .input-bar:focus::placeholder{
        color:#FDF6FF;
    }

    .zone-check {
        display: flex;
        position: relative;
    }

    .check-container {
        margin: auto 1rem auto 0rem;
    }

    /* Style check-box */
    /* Customize the label (the container) */
    .container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 6px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        width: fit-content;
        width: -moz-fit-content;
        margin-left: 0;
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
    }
    
    /* Hide the browser's default checkbox */
    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    
    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0px;
        left: 1px;
        height: 22px;
        width: 22px;
        background-color: #FFFFFF;
        border: 2px solid #794C99;
    }
    
    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
        border: 2px solid #2196F3;
    }
    
    /* When the checkbox is checked, add a blue background */
    .container input:checked ~ .checkmark {
        background-color: #3A3A3A;
        border: 2px solid #3A3A3A;
    }
    
    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    
    /* Show the checkmark when checked */
    .container input:checked ~ .checkmark:after {
        display: block;
    }
    
    /* Style the checkmark/indicator */
    .container .checkmark:after {
        left: 6px;
        top: 0px;
        width: 7px;
        height: 15px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
        transform: rotate(40deg);
    }

    /* bouton validation */
    .bouton-valider {
        height: 3rem;
        margin: auto;
        border-radius: 3rem 0px;
        font-family: 'Teko', sans-serif;
        font-size: 26px;
        transition: all 0.2s ease-in-out, border 0s, color 0s;
        color:#ffffff;
        border:none;
        width:auto;
        margin:auto;
        padding: 0rem 3.5rem;
        font-weight: 300;
        letter-spacing: 0.5px;
        background: rgb(121,76,153);
        background: linear-gradient(90deg, rgba(121,76,153,1) 0%, rgba(91,50,120,1) 100%);
    }
    
    .bouton-valider:hover {
        border-radius: 0px 3rem;
    }

    /* lien mdp oublie */
    .mdp-oubli {
        margin: 2rem auto 0 auto;
    }

    .mdp-oubli a{
        font-family: 'Cabin', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color:#242424;
        text-decoration: none;
    }

    .mdp-oubli a:hover {
        color:#2196F3;
    }



    /* style lien transition */
    .lien-transition {
        display: flex;
        width: fit-content;
        width: -moz-fit-content;
        max-width: 85%;
        font-size: 18px;
        font-family: 'Cabin', sans-serif;
        font-weight: 600;
        margin: 2rem auto;
        color:#242424;
        text-decoration: none;
        padding:0px;
        transition: color 0.5s ease;
    }

    .lien-transition:hover {
        color:#2196F3;
    }


    .icon-lien-trans {
        width: 3rem;
        margin-right: 1rem;
    }

    .box-gauche {
        display: flex;
        margin-right: 0.5rem;
        transform: translateX(1rem);
        transition: all 0.5s ease;
        opacity: 0;
    }

    .box-droite {
        display: flex;
        transform: translateX(-0.4rem);
        transition: all 0.5s ease;
        opacity: 0;
    }

    .chevron-gauche {
        margin: auto;
        width: 20px;
        height: 20px;
        border: solid #242424;
        border-width: 0px 0px 3px 3px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .chevron-droite {
        margin: auto;
        width: 20px;
        height: 20px;
        border: solid #242424;
        border-width: 3px 3px 0px 0px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .lien-transition:hover .box-gauche {
        transform:translateX(0rem);
        opacity: 1;
    }

    .lien-transition:hover .box-droite {
        transform:translateX(0.6rem);
        opacity: 1;
    }

    .section-confirmation .row, .section-oubli .row{
        background: #F6F6F6;
        padding: 1rem;
        margin: auto;
        position: relative;
        width: 85%;
        max-width: 40rem;
        text-align: center;
    }

    .remarque-confirmation {
        font-style: italic;
        font-size: 15px;
    }

    .img-confirmation {
        height: 6rem;
        width: 6rem;
        margin: auto;
    }

    .section-confirmation h2, .section-oubli h2 {
        font-size:30px;
    }

    .section-confirmation h2 span {
        color:#2196F3;
    }

    .section-confirmation .row a, .section-oubli .row a {
        width: fit-content;
        width: -moz-fit-content;
        margin: auto;
    }

    .section-confirmation button {
        margin: 0.5rem auto 2.5rem auto;
        background: rgb(100,181,246);
        background: linear-gradient(90deg, rgba(100,181,246,1) 0%, rgba(33,150,243,1) 100%);
        color:#ffffff;
        font-size: 18px;
        font-family: 'Cabin', sans-serif;
        padding: 0.8rem 1.5rem;
        font-weight: 600;
        border: none;
        border-radius: 5rem;
        transition: all 1s ease;
    }

    .section-confirmation button:hover {
        background: linear-gradient(90deg, rgba(33,150,243,1) 0%, rgba(100,181,246,1) 100%);
    }



    /* style element toast bootstrap */
    .infobulle-login {
        position: fixed;
        bottom: 2rem;
        z-index: 100;
        left: 50%;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        width: fit-content;
        width: -moz-fit-content;
    }

    .infobulle-login .toast {
        background-color: rgba(255,255,255,1);
        border: 1px solid rgba(0,0,0,0);
    }

    .infobulle-login .toast-header-success-msg {
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
        color:#ffffff;
        background: rgb(37,216,110);
        background: linear-gradient(90deg, rgb(37,216,110) 0%, rgb(22,183,75) 100%);
    }

    .infobulle-login .toast-header-alert-msg {
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
        color:#ffffff;
        background: rgb(121,76,153);
        background: linear-gradient(90deg, rgba(121,76,153,1) 0%, rgba(91,50,120,1) 100%);
    }

    .infobulle-login .toast-header-failure-msg {
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
        color:#ffffff;
        background: rgb(232,70,89,1);
        background: linear-gradient(90deg, rgb(232,70,89,1) 0%, rgb(230,40,58,1) 100%);
    }

    .infobulle-login .toast-header .btn-close {
        background: transparent url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:18;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E %3Cline class='st0' x1='9.9' y1='9.9' x2='90.1' y2='90.1'/%3E %3Cline class='st0' x1='90.1' y1='9.9' x2='9.9' y2='90.1'/%3E %3C/svg%3E") center/1rem auto no-repeat;
        opacity: 1!important;
    }

    .infobulle-login .toast-header .btn-close:hover {
        opacity: 1;
    }

    .infobulle-login .toast-body {
        font-family: 'Cabin', sans-serif;
    }


    /* style page oubli mdp */
    .section-oubli .bouton-validation {
        margin: 0.5rem auto 2.5rem auto;
        background: rgb(100,181,246);
        background: linear-gradient(90deg, rgba(100,181,246,1) 0%, rgba(33,150,243,1) 100%);
        color:#ffffff;
        font-size: 18px;
        font-family: 'Cabin', sans-serif;
        padding: 0.8rem 1.5rem;
        font-weight: 600;
        border: none;
        border-radius: 5rem;
        transition: all 1s ease;
    }

    .section-oubli button:hover {
        background: linear-gradient(90deg, rgba(33,150,243,1) 0%, rgba(100,181,246,1) 100%);
    }

    .section-oubli input {
        max-width: 20rem;
        width: 80%;
        height: 3rem;
        margin :0.5rem auto 1rem auto;
    }

}



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

    .formulaire-connexion form {
        width: 90%;
        max-width: 40rem;
    }

    .formulaire-creation form {
        width: 90%;
        max-width: 45rem;
    }

    .lien-transition {
        margin: 4rem auto;
        font-size: 21px;
    }

    .form-pad-gauche {
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    .form-pad-droite {
        padding-left: calc(var(--bs-gutter-x) * .5);
    }



    /* styles page confirmation compte 576px */
    .section-confirmation .row, .section-oubli .row{
        padding: 2rem;
    }

    .section-confirmation h2, .section-oubli h2 {
        font-size:40px;
    }

    .img-confirmation {
        height: 7rem;
        width: 7rem;
    }


}



/* -------------------------------------- */
/* ---------- TABLETTE MD - 768px ---------- */
@media (min-width:768px) {
    .overlay-validation .content-overlay {
        width: 50%;
        padding: 2rem;
    }

}



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

    main {
        padding-top: 11rem;
        padding-bottom: 4rem;
    }

}



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

    
}



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

    .infobulle-login {
        bottom: 5rem;
        left: 4rem;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }


}



/* ---------------------------------------------- */
/* ---------- CAS PARTICULIER XXXL - 2200px ---------- */
@media (min-width:2200px) {

    .formulaire-connexion {
        margin-left: 3rem;
    }

    .formulaire-creation {
        margin-left: 3rem;
    }




}



/* classes speciales pour anims JS page connexion */
.set-relative {
    position: relative!important;
}

.set-absolute {
    position: absolute!important;
}

.block-click {
    pointer-events: none;
}

/* CODE DE BUG FIX DEDIE A SAFARI */
@media not all and (min-resolution:.001dpcm) { 
    @media {
        
        /* evite que le switch de formulaire bug quand on passe du mode portrait au mode paysage sur iOS*/
        @-webkit-keyframes SlideRight {
            0% {
              transform: translateX(0);
            }
            
            30% {
                transform: translateX(-3%);
            }
    
            94% {
                -webkit-opacity:1;
                opacity: 1;
            }
    
            95% {
                -webkit-opacity:0;
                opacity: 0;
    
            }
          
            100% {
                transform: translateX(180vw);
            }
          }


          @-webkit-keyframes SlideLeft {
            0% {
              transform: translateX(0);
            }
            
            30% {
                transform: translateX(3%);
            }
    
            94% {
                -webkit-opacity:1;
                opacity: 1;
                
            }
    
            95% {
                -webkit-opacity:0;
                opacity: 0;
            }
          
            100% {
                transform: translateX(-180vw);
            }
          }



    }
}