/* ===== Règles générales ===== */
input[type=checkbox] {
    display: none;
}


.boutonenvoyer input[type="submit"], input[type="submit"] {border: none !important; border-radius: 0 !important; background: #262626; width: 100%; }
.leformulaire input {border: none; color: #000000;}
@media screen and (max-width: 778px) {
	.infolettre {
		bottom: 1em;
		right: 1em !important;
		max-width: 90vw;
	}
}
@media screen and (min-width: 779px) {
	.infolettre {
		bottom: 3em;
		right: 5em;
	}
}	
	.infolettre {
    position: fixed;

    background-color: #da291c;
    border-radius: 50px;
    width: 5em;
    height: 5em;
    color: white;
    box-sizing: border-box;
    padding-left: 1em;
    padding-right: 1em;
	z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;

    cursor: pointer;

    transition-duration: 1s;

    overflow: hidden;

    max-width: 35em;
}

/* ===== Icones ===== */
/* Les boutons qui permettent des interactions avec la fenêtre d'infolettre */
.bouton-infolettre {
    cursor: pointer;
    font-size: 3rem;
    color: #ffffff;
    width: 1em;
    transition-duration: 1s;
}

.icone-ouvrir {
    opacity: 100;
    transition-duration: .5s;
    margin-left: 0;
    margin-right: 1em;
}

.icone-fermer {
    opacity: 0;
    transform: rotate(0deg);
}

/* ===== Formattage de .form-infolettre ===== */
.form-infolettre {
    display: flex;
    align-items: center;
}

.form-infolettre h3 {
    max-width: 30%;
}
.courrielinfolettre {
    width: 100%;
    border: 1px solid #da291c;
    border-radius: 0;
	color: #000000;
}

.input-courriel {
    background-color: transparent;
    height: 1.5em;
    border: none;
    border-bottom: 2px solid white;
    color: black;
    flex: 2;
	width: 100%;
}
.input-courriel input::placeholder, input::placeholder {
  color: #555555; 
	text-align: center;
}


/* ===== Formattage une fois que la fenêtre est ouverte ===== */
.form-ouvert {
    transition-duration: 1s;
    width: 35em;
}

/* ===== Animations ===== */
.form-ouvert .icone-ouvrir {
    display: none;
    opacity: 0;
    transition:     opacity .5s,
                    display .1s 1s; /* Même transition-delay que la transition-duration de .bouton-infolettre */
}

.form-ouvert .icone-fermer {
    opacity: 100;
    transform: rotate(360deg);
}