/* css spécifique à la page de connexion salamandre */

/************************************************
  MOBILE FIRST : 
  règles valables à partir de XS bootstrap 4
  
 ************************************************/
 @import url('https://fonts.googleapis.com/css?family=PT+Serif:400,400i');
  @import url('https://fonts.googleapis.com/css?family=Domine:700');
  
  @font-face {
      font-family: 'morl_sansitalic';
      src: url('../../common/fonts/morl/morlsans-italic-webfont.woff2') format('woff2'),
           url('../../common/fonts/morl/morlsans-italic-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }
  
  @font-face {
      font-family: 'morlmedium';
      src: url('../../common/fonts/morl/morl-medium-webfont.woff2') format('woff2'),
           url('../../common/fonts/morl/morl-medium-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }
  
  @font-face {
      font-family: 'morlbold';
      src: url('../../common/fonts/morl/morl-bold-webfont.woff2') format('woff2'),
           url('../../common/fonts/morl/morl-bold-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }
  
  @font-face {
      font-family: 'morl_sansbold';
      src: url('../../common/fonts/morl/morlsans-bold-webfont.woff2') format('woff2'),
           url('../../common/fonts/morl/morlsans-bold-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }
  
  
  
  
  @font-face {
      font-family: 'morl_sansregular';
      src: url('../../common/fonts/morl/morlsans-regular-webfont.woff2') format('woff2'),
           url('../../common/fonts/morl/morlsans-regular-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }
  
  
  
  
  @font-face {
      font-family: 'morl_sanslight';
      src: url('../../common/fonts/morl/morlsans-light-webfont.woff2') format('woff2'),
           url('../../common/fonts/morl/morlsans-light-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }
  
  
  @font-face {
      font-family: 'morl_sansblack';
      src: url('../../common/fonts/morl/morlsans-black-webfont.woff2') format('woff2'),
           url('../../common/fonts/morl/morlsans-black-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }
  
  @font-face {
      font-family: 'morl_sansthin';
      src: url('../../common/fonts/MorlSans-Thin.woff2') format('woff2'),
          url('../../common/fonts/MorlSans-Thin.woff') format('woff');
      font-weight: 100;
      font-style: normal;
  }
  
  
  
  @font-face {
      font-family: 'comspot_basicregular';
      src: url('../../common/fonts/comspot/comspotbasic-regular-webfont.woff2') format('woff2'),
           url('../../common/fonts/comspot/comspotbasic-regular-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }
  
  
  


/************************************************
FONTS NAME USED :
font-family: 'morl_sansitalic', sans-serif;
font-family: 'morlmedium', serif;
font-family: 'morlbold';
font-family: 'morl_sansbold', sans-serif;
font-family: 'morl_sansregular', sans-serif;
font-family: 'morl_sanslight', sans-serif;
font-family: 'morl_sansblack', sans-serif;
font-family: 'morl_sansthin', sans-serif;
font-family: 'comspot_basicregular', sans-serif;
font-family: 'PT Serif', serif;
font-family: 'Domine', serif;
  ************************************************/

  html, body{
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}


:root {
    --yellow: #ffe200;
    --grey1: rgb(181, 181, 181);
    --grey-footer: #666666;
    --dark-blue: #121e31;
    --dark-blue2 : #232f3f;
    --red: #e70f4c;
    --beige : #f6f4f0;
}

/* global */

body {
    font-family: 'morl_sanslight', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    position: relative;
    right: 0;
    overflow-x: hidden;
    color: #333;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}


p {
    font-family: 'morl_sanslight', sans-serif;
}

a,
a:hover,
button,
button:hover,
.button,
.button:hover {
    transition: all .2s ease-out;
}

a,
a:hover,
a:focus,
a:visited {
    text-decoration: none;
    outline: none;
    color: #000;
}

button,
.button,
button:hover {
    background: transparent;
    outline: none;
    border: none;
}

.button {
    display: inline-block;
    position: relative;
}

a:hover,
button:hover,
.button:hover {
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
    margin: 0;
    padding: 0;
    font-family: 'morl_sansbold', sans-serif;
}

h2{
    
    margin-bottom: 20px;
}

h4{
    margin-bottom: 10px;
}


.ulli-reset,
.ulli-reset li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*bords arrondis*/
.button-rounded {
    border-radius: 40px;
}

/* avec bordure */
.bordered,
.bordered:hover,
.bordered:active {
    border: 1px solid black;
}


/* ombre */
.button-shadow {
    box-shadow: 3px 3px 7px 0 rgba(0, 0, 0, 0.20);
}

.uppercase {
    text-transform: uppercase;
}

.button-style-1 {
    text-align: center;
    padding: 10px 20px;
    line-height: normal;
    width: auto;
    font-family: 'comspot_basicregular', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    -webkit-appearance: none
}

.button-white {
    color: #000;
    background-color: #FFF;
}

.button-white:hover {
    color: #000;
    background-color: var(--yellow);
}

.button-yellow {
    color: #000;
    background-color: var(--yellow);
}

.button-yellow:hover {
    color: #FFF !important;
    background-color: #000;
}


.button-black {
    color: #FFF;
    background-color: #000;
}

.button-black:hover {
    color: #FFF !important;
    background-color: #000;
}

button:disabled,
.button-yellow:disabled,
button:disabled:hover,
.button-yellow:disabled:hover,
button:disabled:focus,
.button-yellow:disabled:focus,
button:disabled:active{
    background-color: var(--grey1); 
    color: var(--grey-footer)!important;
    cursor: default;
}




.button-arrow:after {
	display: inline-block;
	content: "";
	width: 16px;
	height: 10px;
	background-image: url("../img/arrow-black.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-left: 5px;
}

.button-arrow.button-yellow:after {
	background-image: url("../img/arrow-black.png");
}

.button-arrow.button-yellow:hover::after,
.button-arrow.button-black:after {
	background-image: url("../img/arrow-yellow.png");
}

.button-popover{
    background-color: var(--yellow);
    color: #000;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    margin-bottom: 5px;
}

.button-popover:hover,
.button-popover:active{
    color: var(--yellow);
    background-color: #000;
}


.button-close{
        height:  25px;
        width: 25px;
        border-radius: 25px;
        padding: 0;
        margin: 0;
        background-color: #000;
        color: var(--yellow);
        background-position: center;
        background-size: 60% 60%;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,%0A%3Csvg aria-hidden='true' color='%23ffe200' focusable='false' data-prefix='fas' data-icon='times' class='svg-inline--fa fa-times fa-w-11' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='currentColor' d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'%3E%3C/path%3E%3C/svg%3E");
    
}


.button-close:hover,
.button-close:active{
    color: #000;
    background-color: var(--yellow);
    background-position: center;
    background-size: 60% 60%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%0A%3Csvg aria-hidden='true' color='black' focusable='false' data-prefix='fas' data-icon='times' class='svg-inline--fa fa-times fa-w-11' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='currentColor' d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'%3E%3C/path%3E%3C/svg%3E");
    
}

/***** LIENS ******/


a.link-yellow {

    border-bottom: 2px solid var(--yellow);

}

a.link-yellow:hover,
a.link-yellow:active {
    border-bottom: 2px solid #000;
}


section{
    margin-bottom: 20px;
}

.alert{
    font-family: 'morl_sansregular', sans-serif;
}

.alert a{
    color: inherit;
}

.alert-danger{
    color: var(--red);
    background-color: #FFF;
    border-color: var(--red);
}
.yellow-cadre{
    background-color: var(--yellow);
}

.form-group.yellow-cadre{
    width: calc(100% + 1rem);
    left: -0.5rem;
    position: relative;
    padding: 0.5rem;
}

.form-group.yellow-cadre label{
    margin: 0;
}

/*********** CHECKBOX GLOBAL **************/
.checkbox input[type="checkbox"] {
    display: none;
    margin-left: -16px;

}

.checkbox label {
    padding-left: 25px;
    position: relative;
    text-align: left;
}

.checkbox label:hover{
    cursor: pointer;
}

.checkbox label:before,
.checkbox.checked label:after {
    content: '';
    display: inline-block;
    top: 47%;
    transform: translateY(-50%);
    position: absolute;
}

.checkbox label:before {
    left: 0;
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #000;


}



.checkbox.checked label:after {
    left: 3px;
    width: 10px;
    height: 10px;
    background-color: #000;


}

.form-check, .form-check > * {
    cursor: pointer;
}
.form-check-label{
    cursor: pointer;
    font-weight: 400;
    font-family: 'comspot_basicregular', sans-serif;
}

/******************* FORMS GLOBAL **************/

form label {
    font-family: "morl_sansregular",sans-serif;
    display: block;
    font-weight: 700;
    text-align: left;
    margin-bottom: 5px;
}

.checkbox label{
    font-weight: 400;
}

input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="tel"], 
input[type="date"], 
select {
    width: 100%;
    font-family: 'comspot_basicregular', sans-serif;
}


input[type="text"], 
input[type="email"], 
input[type="tel"], 
input[type="date"], 
select {
    text-transform: uppercase;
}

.show_hide_password input{
    text-transform: none;
}

input[type="email"]{
    text-transform: none;
}

input[type="date"]{
    -webkit-appearance: textfield;
}

.form-control:focus,
input:focus,
input:focus + .input-group-text {
    border-color: #FFF;
    box-shadow: 0 0 0 .1rem var(--yellow);
    outline: none;
    border-style: none;
}

.input-group input + .input-group-text{
    background: #FFF;
    border-left: none;
    border-top-right-radius: 0.25rem!important;
    border-bottom-right-radius: 0.25rem!important;
}






.input-group .form-control {
    border-right: none;
}

.was-validated .form-control:invalid,
.was-validated .form-control:invalid + .input-group-text{
    border-color: var(--red);
}


.was-validated .form-control:valid,
.was-validated .form-control:valid + .input-group-text{
    border-color: #198754;
}


 .noconform .form-control,
 .form-control.invalid,
.noconform .form-control + .input-group-text,
.form-control.invalid + .input-group-text{
    border-color: var(--red)!important;
    box-shadow: 0 0 0 0.1rem var(--red);
}



input::-webkit-input-placeholder {
     text-transform: uppercase;
    font-family: 'comspot_basicregular', sans-serif;
    color: #000;
}

input::-moz-placeholder {
     text-transform: uppercase;
    font-family: 'comspot_basicregular', sans-serif;
    color: #000;
}

input:-ms-input-placeholder {
     text-transform: uppercase;
    font-family: 'comspot_basicregular', sans-serif;
    color: #000;
}

input:-moz-placeholder {
    text-transform: uppercase;
    font-family: 'comspot_basicregular', sans-serif;
    color: #000;
}


.form-group
{
	width: 100%;
	display: block;
	margin-bottom: 1.2rem;
	
}

.eye{
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
   
    background-image: url("data:image/svg+xml,%0A%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='eye' class='svg-inline--fa fa-eye fa-w-18' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z'%3E%3C/path%3E%3C/svg%3E");
}
.eye.see{
    
    background-image: url("data:image/svg+xml,%0A%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='eye-slash' class='svg-inline--fa fa-eye-slash fa-w-20' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='currentColor' d='M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z'%3E%3C/path%3E%3C/svg%3E");
}

.required:after{
	content:"*";
	display: inline-block;
	margin-left: 5px;
}


/* FEEDBACKS */

.warning-feedback{
    text-align: left;
    color: var(--red);
    margin-top: 5px;
}

.warning-feedback:before{
    content: '';
    display: inline-block;
    vertical-align: sub;
    height:  16px;
    width: 16px;
    border-radius: 16px;
    margin-right: 5px;
    background-color: var(--red);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%0A%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='times' class='svg-inline--fa fa-times fa-w-11' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='white' d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'%3E%3C/path%3E%3C/svg%3E");
}

.existing-email input[type="email"]{
    background-color: var(--red);
    color: #FFF;
}

.existing-feedback, .password-feedback, .email-feedback, .noconform-feedback{
    display: none;
    font-size: .875em;
    width: 100%;
}

.existing-email .existing-feedback,
.same-password .password-feedback,
.same-email .email-feedback,
.noconform .noconform-feedback {
    display: block;
}

.invalid{
    color: var(--red);
}


/*********** FORM ****************/
.form-wrapper{
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
   
    
}


/******** MODAL ********/

.modal-header{
    background: var(--yellow);
    position: relative;
    border: none;
}

.modal-header .button-close{
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.modal-footer{
    border: none;
}

/********************* GLOBAL *********************/

.logo{
    max-width: 350px;
}
/********************** LOGIN *********************/
#login{
    padding: 15px 0;
   
}

#login .form-wrapper h2{
    color: #FFF;
}

#login .left h2{
    background-color: var(--dark-blue);
}
#login .right h2{
    background-color: var(--yellow); 
}
#login form .alert-danger{
    display: none;
}
#login form.was-validated:invalid .alert-danger{
    display: block;
}


/********************** CREATION COMPTE *********************/
#signup{
    padding: 15px 0;
}
#signup form{
    padding: 15px 0;
}
#signup h2{
    background-color: var(--yellow); 
    color: #FFF;
}

#abonne-infos .popover{
    max-width: 95%;
    min-width: 95%;
    left: 50%!important;
    transform: translateX(-50%)!important;
    bottom: auto!important;
    top: 100%!important;
}

#abonne-infos .popover img{
    margin: auto;
}
#signup #finalisation{
    position: relative;
    margin-top: 90px;
}
#signup #finalisation .yellow-cadre img{
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
}


#signup #finalisation .yellow-cadre p{

    line-height: 1.2;
}

/********************** AVANTAGES *********************/
#avantages{
    background-color: var(--beige);
    padding: 15px 0;
}
#avantages h5,
#avantages img{
    margin-bottom: 20px;
}

/******************* WELCOME ***********************/
#welcome .welcome-header{
    line-height: 1.2;
    font-size: 1.7rem;
    font-family: 'morl', serif;
}
#welcome .left,
#welcome .right{
    position: relative;
}

#welcome .left > a,
#welcome .right > a{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 1;
    cursor: pointer;
}
#welcome .welcome-computer{
    width: 100%;
    height: auto;
    margin: auto;
}

#welcome .welcome-text{
    width: 70%;
    text-align: center;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    cursor: pointer;
}

@media (min-width:414px){
    #welcome .welcome-text{
        top: 55%;
    }
}
@media (min-width:992px){
    #welcome .welcome-computer, 
    #welcome .left > a,
    #welcome .right > a{
        width: 65%;
    
    }
    #welcome .left,
#welcome .right{
    margin-top: -9%;
}

}