body {
  margin: 0;
  padding: 0;
  color:white;
  font-family: sans-serif;
  min-height: 100vh;
  background: #031321;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

*{
  box-sizing: border-box;
}

.container{
  width: 100%;
  max-width: 1100px;
  padding: 0 20px;
  margin: 20px auto;
  background: #001e2d;
}

.text-right{
  text-align: right;
}

.text-center{
  text-align: center;
}

.full-width{
  grid-column: 1/-1;
}

form{
  width: 100%;
  max-width: 1000px;
  padding: 0 10px;
  margin: 0 auto;
}

label{
  font-size: 1.02em;
  margin: 10px 0;
  display: inline-block;
}

input[type="email"], 
  input[type="url"], 
  input[type="text"], 
  input[type="password"], 
  select , 
  textarea , 
.selectize-input.full{
  font-size: 1.02em !important;
  padding: 0.4em !important;
  font-family: inherit !important;
  border-radius: 2px !important;
  border: 2px solid #2196f3 !important;
  background: #031321 !important;
  color : white !important;
  outline: none;
  transition: 1s border;
}

input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="text"]:focus, 
input[type="password"]:focus, 
select:focus , 
textarea:focus,
.selectize-input.full:focus{
   border: 2px solid #ff69b3 !important;
}

textarea{
  grid-column: 1/-1;
  font-size: 1.05em;
  padding: 0.2em 0.4em;
  font-family: inherit;
}

input::placeholder, textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #888 !important;
  opacity: 1; /* Firefox */
}

input:-ms-input-placeholder , textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #888 !important;
}

input::-ms-input-placeholder , textarea::-ms-input-placeholder { /* Microsoft Edge */
  color: #888 !important;
}

fieldset {
  display: grid;
  gap: 10px;
  align-items: baseline;
  margin: 10px 0;
  padding: 10px;
}

fieldset > div{
    display:grid;
    gap: 10px;
}
@media screen and (min-width:500px) {
  fieldset > div{
    grid-template-columns: 200px 1fr;
    align-items: flex-end;
    gap: 20px;
  }
}

.box{
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
}

.box > span{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.box > span:nth-child(1){
  transform: rotate(0);
}

.box > span:nth-child(2){
  transform: rotate(90deg);
}

.box > span:nth-child(2):before{
  animation-delay: -2s;
}

.box > span:nth-child(3){
  transform: rotate(180deg);
}

.box > span:nth-child(4){
  transform: rotate(270deg);
}

.box > span:nth-child(4):before{
  animation-delay: -2s;
}
.box > span:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2.5px;
  background: #0093ff;
  animation : animate 4s linear infinite ;
}

@keyframes animate {
  0%{
    transform: scaleX(0);
    transform-origin: left;
  }
  50%{
    transform: scaleX(1);
    transform-origin: left;
  }
  50.1%{
    transform: scaleX(1);
    transform-origin: right;
  }
  100%{
    transform: scaleX(0);
    transform-origin: right;
  }
}

.btn-submit{
  margin: 20px 0;
  font-size: 1.3em ;
  padding: 0.4em 1em ;
  font-family: inherit  ;
  border-radius: 2px  ;
  border: 2px solid #2196f3  ;
  background: #2196f3 ;
  color : black ;
  cursor: pointer;
  transition: 1s background , 1s border , 1s color;
  text-decoration: none;
}

.btn-submit:hover , .btn-submit:focus{
  background: #ff69b3 ;
  border: 2px solid #ff69b3 ;
  color : white;
}


/* header */

header.container{
  margin-top: 0;
  padding-bottom: 20px;
}

.header-logo{
  width: 150px;
}

.header-top{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.header-top .header-top-title{
  text-align: center;
}

.header-top .header-top-flags{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header-top-flag{
  width: 20px;
}

.header-top-flag.last{
  margin-left: 20px;
}

.header-bottom{
  width: 100%;
  max-width: 1000px;
  padding: 0 10px;
  margin: 0 auto;
}
.header-box-logo{
  display: flex;
  justify-content: center;
}

/* header */

footer {
  display: grid;
  text-align: center;
  justify-content: center;
  gap:20px;
}

@media screen and (min-width:400px) {
  footer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width:500px) {
  footer{
    display: flex;
    align-items: center;
    padding: 20px;
  }
}


footer a {
  color:white;
}


/* page formulaire de casting */

.casting p {
  margin: 0;
  padding: 0;
}

/* page formulaire de casting */

/* page disclaimer */

.disclaimer{
  text-align: center;
}

.disclaimer-logo{
   border-radius: 10px;
  width: 300px;
}

/* page disclaimer */

/* connexion */
.connexion{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.connexion form{
  width: auto;
}
.connexion .form-input{
  display: flex;
}
.connexion .form-submit{
  text-align: center;
}
/* connexion */