/* ---------- Connexion (parité stricte avec l'ancien inline) ---------- */

/* BASIC */
html { background-color:#fff; }
body{
  font-family:"Poppins", sans-serif;   /* rev : stack d’origine */
  height:100vh;                        /* rev : 100vh (pas min-height) */
  background: url('/img/devis-client.jpg') no-repeat center center;
  background-size: cover;
}

a{ color:#92badd; display:inline-block; text-decoration:none; font-weight:400; }

h2{
  text-align:center; font-size:16px; text-transform:uppercase;
  display:inline-block; margin:40px 8px 10px 8px; color:#4f5795;
}
h4{ color:#4f5795; }

/* STRUCTURE */
.wrapper{
  display:flex; align-items:center; flex-direction:column; justify-content:center;
  width:100%; min-height:100%; padding:20px;
}
#formContent{
  -webkit-border-radius:10px; border-radius:10px;
  background:#fff;
  width:100%; max-width:550px; position:relative;
  /* l'ancien CSS mettait padding:30px puis 0px : résultat effectif = 0 */
  padding:0;
  -webkit-box-shadow:0 30px 60px 0 rgba(0,0,0,0.3);
  box-shadow:0 30px 60px 0 rgba(0,0,0,0.3);
  text-align:center;
}
#formFooter{
  background-color:#f6f6f6; border-top:1px solid #dce8f1; padding:25px; text-align:center;
  -webkit-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px;
}

/* TABS */
h2.inactive{ color:#bbb8b8; font-weight:100 !important; }
h2.active{ color:#0d0d0d; border-bottom:2px solid #4f5795; }

/* FORM TYPOGRAPHY (collé au plus proche de l’original) */
input[type=button], input[type=submit], input[type=reset]{
  background-color:#4f5795; border:none; color:#fff; padding:15px 80px; text-align:center;
  text-decoration:none; display:inline-block; text-transform:uppercase; font-size:13px;
  -webkit-box-shadow:0 10px 30px 0 rgba(95,186,233,0.4);
  box-shadow:0 10px 30px 0 rgba(95,186,233,0.4);
  -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px;
  margin:5px 20px 40px 20px;
  -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover{ background-color:#4f5795; }
input[type=button]:active, input[type=submit]:active, input[type=reset]:active{ transform:scale(0.95); }

input[type=text]{
  background-color:#f6f6f6; border:none; color:#0d0d0d; padding:15px 32px;
  text-align:center; text-decoration:none; display:inline-block; font-size:16px;
  margin:5px; width:80% !important; border:2px solid #f6f6f6;
  -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;
  -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out;
  -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px;
}
input[type=password]{
  background-color:#f6f6f6; border:none; color:#0d0d0d; padding:15px 32px;
  text-align:center; display:inline-block; font-size:16px;
  margin:5px; width:80% !important; border:2px solid #f6f6f6;
  transition:all 0.5s ease-in-out; border-radius:5px;
}
input[type=text]:focus, input[type=password]:focus{ background-color:#fff; border-bottom:2px solid #4f5795; }

/* classes spécifiques (comme avant) */
input.fadeIn.third{
  border:none; padding:15px 32px; text-align:center; display:inline-block; font-size:16px;
  margin:5px; width:80% !important; border:2px solid #f6f6f6; -webkit-transition:all 0.5s ease-in-out;
  transition:all 0.5s ease-in-out; -webkit-border-radius:5px; border-radius:5px;
}
input.fadeIn.fourth{
  border:none; padding:15px 32px; text-align:center; display:inline-block; font-size:16px;
  margin:5px; width:80% !important; border:2px solid #f6f6f6; transition:all 0.5s ease-in-out; border-radius:5px;
}
input.fadeIn.fourth:hover{ background:#3f467e; }
input.fadeIn.fifth{
  border:none; padding:15px 32px; text-align:center; display:inline-block; font-size:16px;
  margin:5px; width:80% !important; border:2px solid #f6f6f6; transition:all 0.5s ease-in-out; border-radius:5px;
}
input.fadeIn.fifth:hover{ background:#3f467e; }
input.fadeIn.six{
  padding:15px 32px; text-align:center; display:inline-block; font-size:16px;
  margin:5px; width:80% !important; border:2px solid #f6f6f6; border-radius:6px;
}

/* ANIMATIONS */
.fadeInDown{ -webkit-animation-name:fadeInDown; animation-name:fadeInDown;
  -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both; }
@-webkit-keyframes fadeInDown{
  0%{ opacity:0; -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); }
  100%{ opacity:1; -webkit-transform:none; transform:none; }
}
@keyframes fadeInDown{
  0%{ opacity:0; -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); }
  100%{ opacity:1; -webkit-transform:none; transform:none; }
}
@-webkit-keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@-moz-keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.fadeIn{
  opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1;
  -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;
  -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s;
}
.fadeIn.first{  -webkit-animation-delay:.4s; -moz-animation-delay:.4s; animation-delay:.4s; }
.fadeIn.second{ -webkit-animation-delay:.6s; -moz-animation-delay:.6s; animation-delay:.6s; }
.fadeIn.third{  -webkit-animation-delay:.5s; -moz-animation-delay:.5s; animation-delay:.5s; }
.fadeIn.fourth{ -webkit-animation-delay:.5s; -moz-animation-delay:.5s; animation-delay:.5s; }

/* UNDERLINE */
.underlineHover:after{
  display:block; left:0; bottom:-10px; width:0; height:2px; background-color:#4f5795; content:"";
  transition:width .1s;
}
.underlineHover:hover{ color:#0d0d0d; }
.underlineHover:hover:after{ width:100%; }

/* OTHERS */
*:focus{ outline:none; }
#icon{ width:60%; }
button#toggleFormButton{ text-decoration:none; color:#4f5795; }