.cardAccueil {
  display: flex;
flex-direction: column;
justify-content: space-evenly;
align-content: center;
}

.card {
    background-color: var(--main-color-blond);
    border: 2px solid var(--main-color-rouge);
    flex-shrink: 0;
    width: 100%;
    border-radius: 23px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    margin: 15px 0;
}
.card-header h3{
color: var(--main-color-blond);
}
.card-header {
    background-color: var(--main-color-rouge);
    color: var(--main-color-blond);
    font-weight: bold;
    border-radius: 20px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    text-align: center;
    padding: 3px 0;
}

.page{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: space-around;
    margin: 15px 0;
}

.taille-card{
  width: 60%;
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 8px 0;
}

.form-group {
    width: 60%;
    margin: 5px;
}

input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 1000px var(--main-color-blond) inset;
}

input:-webkit-autofill:hover, input:-webkit-autofill:focus{
    -webkit-box-shadow: 0 0 0 1000px var(--main-color-blond) inset;
}

 #validation_form {
    color: var(--main-color-rouge);
    background-color: var(--main-color-blond);
    border-color: var(--main-color-rouge);
}

 #validation_form:hover,#validation_form:focus {
    color: var(--main-color-blond);
    background-color: var(--main-color-rouge);
    border-color: var(--main-color-blond);
}

.inactif,.inactif h2 {
  color: var(--main-color-beige-rose)!important;
}

.inactif:hover, .inactif h2:hover{
  color: var(--main-color-rouge)!important;
}

h2{
  margin: 5px
}

.menu_connexion_inscription{
  display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}


.menu_connexion_inscription a, .menu_connexion_inscription a:hover {
   color: var(--main-color-rouge);
   text-decoration: none;
       display: flex;
   align-items: center;
   position : relative;
}

.menu_connexion_inscription a::after {
 content: "";
 position: absolute;
 left: 50%;
 bottom: 0;
 transform: translateX(-50%) scaleX(0);
 transform-origin: 50% 50%;
 width: 100%;
 height: 1px;
 background-color: var(--main-color-rouge);
 transition: transform 250ms;
}
.menu_connexion_inscription a:hover::after {
 transform: translateX(-50%) scaleX(1);
}


@media screen and (max-width: 1200px) {

  .taille-card {
      width: 80%;
  }
  .form-group {
    width: 70%;
  }
}

@media screen and (max-width: 950px) {

  .page{
    height: auto
  }
  .form-group {
      width: 80%;
  }
}