@charset "utf-8";

/*########################*/


/*########################*/


/*  ATCHOUM C.S.S. V0.5   */


/*######   STYLE   #######*/


/*####  INSCRIPTION  #####*/


/*########################*/


/*########################*/

#header-form-connect {
 text-align: right;
 margin: 1vw 10%;
}

#inscriptionForm {
 display: inline-block;
 width: 540px;
 padding: 0 10px;
 margin: 5vw 0 0;
 text-align: center;
}

#inscriptionForm h1 {
 width: 100%;
 text-align: center;
 margin: 10px;
}

#inscriptionForm h2 {
 font-size: 28px;
 width: 100%;
 text-align: center;
 margin: 10px;
}

.labelRadio,
.labelRadioConducteur,
.labelRadioPartenaire {
 padding: 10px;
 border-radius: 0.5vw;
}

#boutConnexionFB img {
 width: 70% !important;
}

.trait-333-img {
 width: 30%;
 height: 1px;
 display: inline-block !important;
 position: relative;
 bottom: 10px;
}

form {}

.inscriptionFormOuter {
 border-radius: 10px;
 padding: 0;
 margin;
 background: #fff;
 border: 20px solid #eee;
 border-left: 10px solid #eee;
 border-right: 10px solid #eee;
 overflow: hidden;
}

.inscriptionFormOuter input[type="text"],
.inscriptionFormOuter input[type="email"],
.inscriptionFormOuter input[type="tel"],
.inscriptionFormOuter input[type="password"],
.inscriptionFormOuter input[type="submit"] {
 width: calc(100% - 50px);
 margin: 5px 0;
 padding: 5px;
 color: #333;
 border: none;
 border-top: 1px solid #CCC;
 border-radius: 0;
}

#PassConfirm {
 margin: 5px 0;
 border-bottom: 1px solid #ccc !important;
}

#passShowHide{
  position:absolute;
  right:20px;
  top:15px;
  z-index:3;
  cursor:pointer;
  color:#999;
}

.inscriptionFormOuter input[type="submit"] {
 width: 90%;
 margin: 10px auto;
 padding: 5px;
 color: #fff;
 border: 1px solid #CCC;
 border-radius: 10px;
}

#inscriptionMentions {
 width:90%;
 margin: auto;
 text-align: justify;
 font-size: 16px;
}


/* FORM PAGE 2 */

#formInscriptionPage2 .ligne-form {
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 display: flex;
 justify-content: space-between;
 padding: 10px 0;
}

#formInscriptionPage2 input {
 border: none;
}

.telPlus33 {
 display: inline-block;
 font-size: 15px;
 position: relative;
 top: 0;
 margin: 15px 0 0 15px;
}

#formInscriptionPage2 input[type="tel"] {
 display: inline-block;
 width: 240px !important;
 font-size: 36px;
 margin: 0 0 0 10px;
 padding: 0;
}

#submitTelVerif {
 margin: 0 10px 0 0;
}

#formInscriptionPage2 .fa-mobile {
 color: #ccc;
 font-size: 220px !important;
 transform: rotate(-10deg);
 float: left;
 margin: 0 10px 0 40px;
}

.telVerifStatut {
 color: #999;
 font-size: 64px;
 margin: 50px 0 0 0;
}

.telVerifInfos {
 float: left;
 padding: 10px;
 background: #4995AC;
}

.renvoiNotificatiion {
 text-decoration: underline;
 cursor: pointer;
}

#codeVerif {
 display: inline-block;
 width: 40% !important;
 font-size: 3vw;
 margin: 0 0 0 0.5vw;
 padding: 0;
}

#submitCodeVerif {
 margin: 0 1vw 0 0;
}


/* SLIDE 3 */

#formInscriptionPage3 .ligne-form {
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 display: flex;
 justify-content: space-between;
 padding: 1vw 0;
}

#formInscriptionPage3 input {
 border: none;
}

input[type='number'] {
 -moz-appearance: textfield;
 -webkit-appearance: textfield;
 -o-appearance: textfield;
 -ms-appearance: textfield;
  font-size:44px;
    width:200px;
    margin:0 0 0 20px;
  }
#formInscriptionPage3 .fa-mobile {
 color: #ccc;
 font-size: 20vmin !important;
 transform: rotate(-10deg);
 float: left;
 margin: 0 1vw 0 5vw;
}

  
  .lienVerif
{

display:block;
clear:both;}

/* SLIDE 4 */


/* BOUTONS RADIO CUSTOM*/

#inscription-slide-4 ul {
 list-style: none;
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

#inscription-slide-4 ul li {
 color: #AAAAAA;
 position: relative;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 padding: 10px;
}

#inscription-slide-4 ul li input[type=radio] {
 position: relative;
 display: none;
}

#inscription-slide-4 ul li label {
 display: block;
 position: relative;
 font-weight: normal;
 font-size: 26px !important;
 padding: 0 10px 0 0;
 margin: auto;
 z-index: 9;
 cursor: pointer;
 width: 100%;
 text-align: right;
 -webkit-transition: all 0.25s linear;
 /*! display: none; */
}

#inscription-slide-4 ul li:hover label {
 color: #ccc;
}

#inscription-slide-4 ul li .check {
 display: block;
 position: absolute;
 border: 5px solid #AAAAAA;
 border-radius: 100%;
 height: 3vmin;
 width: 3vmin;
 top: calc(50% - 1.5vmin);
 left: 1vmin;
 z-index: 5;
 transition: border .25s linear;
 -webkit-transition: border .25s linear;
}

#inscription-slide-4 ul li:hover .check {
 border: 5px solid #37B397;
}

#inscription-slide-4 ul li .check::before {}

#inscription-slide-4 input[type=radio]:checked ~ .check {
 background: #37B397;
 border: 5px solid #37B397;
}

#inscription-slide-4 input[type=radio]:checked ~ .check::before {
 background: #37B397;
}

#inscription-slide-4 input[type=radio]:checked ~ label {
 color: #37B397;
}

.codeMairieLi  {
text-align:left;
  display:flex;
  justify-content:flex-start;
  align-items:stretch;
  
 
}

#inscription-slide-4 .codeMairieLi input {
 position: relative;
 display: inine-block;
  width:auto;
  margin:0 0 0 20px;
  flex:1;
  border:none;
  font-size:26px;
    padding:0;
text-align:right;
}

[type="radio"]:not(:checked) + label::before, [type="radio"]:checked + label::before {

    display: none;
}


#inscription-slide-4 .codeMairieLi label {
 display: inline-block;
 position: relative;
 font-weight: normal;
 margin: 0 0 0 ;
 z-index: 9;
 cursor: pointer;
 width: auto;
 text-align: left;
  background:none;
  padding:0;
 -webkit-transition: all 0.25s linear;
 flex: 1;
}

#inscription-slide-4 .codeMairieLi:hover label {
 color: #666;
}



#inscription-slide-4 input[type="submit"] {
 width: 70%;
 margin: 10px auto !important;
 padding: 5px;
 color: #fff;
 display: block;
 border-radius: 10px;
}




.liValidCGU{
  color:#333 !important;
  
}


/* COLONNE DROITE
-
-
-
-*/

#colInscriptionD {
 float: right;
 width: 500px;
 text-align: center;
}

#colInscriptionD img {
 width: 40%;
 margin: 5vw 0 0;
}

.colInscriptionDCell {
 margin: 5vw 0 0;
}

.colInscriptionDCell .txt-xl {
 font-size: 64px;
}


/* ICONE FONT AWESOME */

.fa-4x {
 font-size: 120px !important;
}





/* COMPLEXIFIER MOT DE PASSE  strength.js*/
.verifPass {
  display:none;
  }
.verifPass p{
  font-size:14px;
  padding:0 20px;  background:#eee;

  }

.verifPass a{
color:#333;

  }


.strength_meter{
	height:23px;
width: 400px;
	background:silver;
  float:left;
  margin: 0 0 0 20px;
	}

.strength_meter div{
	height:23px;
	width:100%;
	height:23px;
	text-align:center;
	color:black;
	font-weight:bold;
	line-height:23px;
}

.veryweak{
	background-color: #FF4242;
border-color: #F04040!important
}
.weak{
background-color: #FF6E42;
border-color: #FF853C!important;
}
.medium{
background-color: #FFD242;
border-color: #FC0!important;
}
.strong{
background-color: #64FF42;
border-color: #8DFF1C!important;
}


.liValidCertifie,
.liValidCGU
  {
   background:#eee !important; 
    border:none !important;
    
  }





/*******************************************/
/*******************************************/
/*******************************************/
/********* RESPONSIVE FORMAT MOBILE ********/
/*******************************************/
/*-*****************************************/
@media screen and (max-width: 768px) {


#header-form-connect {
display:none !important;
}

  #formInscription
  {
	width:100%;
    height:calc(100vh - 60px);
    background:none;
  }
#inscriptionForm {
 display: block;
 width: 100%;
 padding: 0 1vmin;
 margin: 60px auto 0;
 text-align: center;
    background:none !important;
    height:100% !important;
    overflow:hidden;

}

#inscriptionForm h1 {
 width: 100%;
 text-align: center;
 margin: 2vw;
    color:#fff !important;
}

#inscriptionForm h2 {
 font-size: 5vw;
 width: 100%;
 text-align: center;
 margin: 2vw;
}

#boutConnexionFB img {
 width: 70% !important;
}

.trait-333-img {
 width: 30%;
 height: 1px;
 display: inline-block !important;
 position: relative;
 bottom: 10px;
}

form {

	height:100%;
}

.inscriptionFormOuter {
 border-radius: 0;
 padding: 0;
 
 border: 0 solid #eee;
 border-left: 0 solid #eee;
 border-right: 0 solid #eee;
 overflow: hidden;
    background:none !important;
min-height:100%;
}

.inscriptionFormOuter input[type="text"],
.inscriptionFormOuter input[type="email"],
.inscriptionFormOuter input[type="tel"],
.inscriptionFormOuter input[type="password"],
.inscriptionFormOuter input[type="submit"] {
 width: 90%;
 margin: 1vw 0;
 padding: 1vmin;
 color: #333;
 border: none;
 border-top: 1px solid #CCC;
 border-radius: 0;
 font-size:5vw !important;
}

  #passShowHide {
    position: absolute;
    right: 4vw;
    top: 3vw;
    z-index: 3;
    cursor: pointer;
    color: #999;
    font-size:4vw;
}
  
  
  
#PassConfirm {
 margin: 1vw 0;
 border-bottom: 1px solid #ccc !important;
}

.inscriptionFormOuter input[type="submit"] {
 width: 90%;
 margin: 2vw 0;
 padding: 1vmin;
 color: #fff;
 border-radius: 1vmin;
}

#inscriptionMentions {
 width: 90%;
 margin:2vw auto;
 text-align: justify;
 font-size: 3vh;
  color:#fff;
padding:1vh 1vw;
  background: rgba(255,255,255,0.1);
  border:1px solid #fff;
  border-radius:5px;
}


/* FORM PAGE 2 */



#formInscriptionPage2 {

  background:none !important;
  height:calc(100vh - 60px);
}

#formInscriptionPage2 .ligne-form {
 border-top: 0 solid #ccc;
 border-bottom: 0 solid #ccc;
 display: block;
 justify-content: space-between;
 padding: 0 0;
  background:none !important;
}

#formInscriptionPage2 input {
 border: none;
}

.telPlus33 {
display:inline-block;  
 font-size: 8vw;
 position: relative;
 top: ;
 margin: 0 0 0 ;
  background:#fff;
  width:15vw !important;
  line-height:16.5vw;
    height:16vw !important;

}

#formInscriptionPage2 input[type="tel"] {
 display: inline-block;
 width: 68vw !important;
 font-size: 8vw !important;
 margin: 0 0 0 0;
 padding: 0 !important;
display:inline-block;  
  height:16vw !important;
  padding : 0 0 0 5vw !important;
}

#submitTelVerif {
 margin: 5vw ;
  clear:both;
  float:left;
  display:block;
   font-size: 8vw !important;

}

#formInscriptionPage2 .fa-mobile {
 color: #ccc;
 font-size: 50vw !important;
 transform: rotate(-10deg);
 float: left;
 margin: 0 0 0 15vw;
}

.telVerifStatut {
 color: #999;
 font-size: 18vw;
 margin: 10vw 0 0 0;
}

.telVerifInfos {
 float: left;
 padding: 2vmin;
 background: #4995AC;
}

.renvoiNotificatiion {
 text-decoration: underline;
 cursor: pointer;
}

#codeVerif {
 display: inline-block;
 width: 40% !important;
 font-size: 3vw;
 margin: 0 0 0 0.5vw;
 padding: 0;
}

#submitCodeVerif {
 margin: 0 1vw 0 0;
}


/* SLIDE 3 */


#formInscriptionPage3 input {
 border: none;
  width:90%;
}

input[type='number'] {
 -moz-appearance: textfield;
 -webkit-appearance: textfield;
 -o-appearance: textfield;
 -ms-appearance: textfield;
}



#formInscriptionPage3 {

  background:none !important;
  /*height:calc(100vh - 60px);*/
}

#formInscriptionPage3 .ligne-form {
 border-top: 0 solid #ccc;
 border-bottom: 0 solid #ccc;
 display: block;
 justify-content: space-between;
 padding: 0 0;
  background:none !important;
}

#formInscriptionPage3 input {
 border: none;
}


#formInscriptionPage3 input[type="number"] {
 display: inline-block;
 width: 890w !important;
 font-size: 10vw !important;
 margin: 0 0 0 0;
display:inline-block;  
  height:auto !important;
  padding : 0 0  !important;
    text-align:center !important;
}

#submitTelVerif {
 margin: 5vw ;
  clear:both;
  float:left;
  display:block;
   font-size: 8vw !important;

}

#formInscriptionPage3 .fa-mobile {
 color: #ccc;
 font-size: 50vw !important;
 transform: rotate(-10deg);
 float: left;
 margin: 0 0 0 15vw;
}

#formInscriptionPage3  .telPlus33 {
display:none;

}
  .lienVerif
{
font-size:5vw;
  width:90%;
  display:block;
  text-align:justify;
  margin: 2vw auto 2vw;
clear:both;
color:#fff;}


#formInscriptionPage3 .txt-small {
font-size:5vw;
  width:90%;
  display:block;
  text-align:justify;
  margin: 2vw auto 2vw;
  color:#fff;
}

/* SLIDE 4 */


/* BOUTONS RADIO CUSTOM*/


#formInscriptionPage4
{
	background:none !important;
height:100%;}
#inscription-slide-4 ul {
 list-style: none;
 height: 100%;
 width: 95%;
 margin: auto;
 padding: 0;
}

#inscription-slide-4 ul li {
 color: #fff;
 position: relative;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 padding: 2vw 0;
}

#inscription-slide-4 ul li input[type=radio] {
 position: relative;
 display: none;
}

#inscription-slide-4 ul li label {
 display: block;
 position: relative;
 font-weight: normal;
 font-size: 6vmin;
 padding: 0  0 0;
 margin: auto;
 z-index: 9;
  color:#fff ;
 cursor: pointer;
 width: 100%;
 text-align: right;
 -webkit-transition: all 0.25s linear;
}

#inscription-slide-4 ul li:hover label {
 color: #ccc;
}

#inscription-slide-4 ul li .check {
 display: block;
 position: absolute;
 border: 1vmin solid #fff;
 border-radius: 100%;
 height: 3vmin;
 width: 3vmin;
 top: calc(50% - 1.5vmin);
 left: 1vmin;
  color:#fff;
 z-index: 5;
 transition: border .25s linear;
 -webkit-transition: border .25s linear;
}

#inscription-slide-4 ul li:hover .check {
 border: 1vmin solid #37B397;
}

#inscription-slide-4 ul li .check::before {}

#inscription-slide-4 input[type=radio]:checked ~ .check {
 background: #37B397;
 border: 1vmin solid #37B397;
}

#inscription-slide-4 input[type=radio]:checked ~ .check::before {
 background: #37B397;
}

#inscription-slide-4 input[type=radio]:checked ~ label {
 color: #37B397;
}

#inscription-slide-4 input[type="submit"] {
 width: 90%;
 margin: 2vw 0;
 padding: 1vmin;
 color: #fff;
 border-radius: 1vmin;
  background:#333;
  margin:auto;
  display:block;
  float:none;
  border:none;
}


#inscription-slide-4 .codeMairieLi input {
    position: relative;
    display: inine-block;
    width: auto;
    margin: 0  0 !important;
    flex: 1;
    border: none;
    font-size: 5vw !important;
    padding: 0;
}  
  

/* COLONNE DROITE
-
-
-
-*/

#colInscriptionD {
display:none;
}

 


/* ICONE FONT AWESOME */

.fa-4x {
 font-size: 120px !important;
}



/* COMPLEXIFIER MOT DE PASSE  strength.js*/
.verifPass {
  width:90%;
    margin:auto;
    padding:1vmin;
    background:none;
  display:none;
  }
.verifPass p{
  font-size:4vw;
  padding:2vw;  
  background:none;
color:#fff;
  border:1px solid #fff;
  }

.verifPass a{
  font-size:4vw;
  padding:2vw;  

color:#fff;
  }
.verifPass input{
width:100% !important;
position:relative;
    left:-1vw;
    top:-0.5vh;
  } 
.strength_meter{
	height:3vh;
width: 60%;
	background:silver;
  float:left;
  font-size:5vw;
  margin: 0 0 0 1vw;
	}

.strength_meter div{
	height:3vh;
	width:100%;
	text-align:center;
	color:whi#333;
	font-weight:bold;
	line-height:3vh;
}


  
  
[type="radio"]:not(:checked) + label::after, [type="radio"]:checked + label::after {
    content: '';
  }
 
  
 [type="checkbox"]:not(:checked) + label::before, [type="checkbox"]:checked + label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1em;
    height: 1em;
    border: 2px solid #ccc;
    background: #fff;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
} 
  
  
  
.liValidCertifie,
.liValidCGU
  {
   background:none !important; 
    border:none !important;
    
  }
}