Newsletter
/* =========================
CONTENEUR GLOBAL NEWSLETTER
========================= */
.tnp-subscription {
width: 100%;
display: flex;
justify-content: center;
}
/* =========================
FORMULAIRE
========================= */
.tnp-subscription form {
display: flex;
justify-content: center;
align-items: center;
}
/* =========================
CHAMPS
========================= */
.tnp-field {
margin: 0;
}
/* Input email */
.tnp-field-email .tnp-email {
height: 48px;
width: 400px;
padding: 0 14px;
border: 1px solid #ccc;
border-right: none;
border-radius: 8px 0 0 8px;
font-size: 15px;
outline: none;
box-sizing: border-box;
}
/* =========================
BOUTON ORANGE ========================= */
.tnp-field .tnp-submit {
height: 48px;
padding: 0 22px;
border: 1px solid #ff7a00;
background-color: #ff7a00;
color: #fff;
font-size: 15px;
font-weight: bold;
font-weight: 500;
cursor: pointer;
border-radius: 0 8px 8px 0;
transition: background-color 0.2s ease, transform 0.1s ease;
}
/* Hover */
.tnp-submit:hover {
background-color: #e66f00;
transform: translateY(-1px);
}
/* Focus accessible */
.tnp-email:focus,
.tnp-submit:focus {
outline: 2px solid #ffb266;
outline-offset: 2px;
}
/* =========================
LABEL (MASQUÉ)
========================= */
.tnp-field-email label {
display: none;
}
/* =========================
RESPONSIVE MOBILE
========================= */
@media (max-width: 600px) {
.tnp-subscription form {
flex-direction: column;
width: 100%;
}
.tnp-email {
width: 100%;
border-right: 1px solid #ccc;
border-radius: 8px;
margin-bottom: 10px;
}
.tnp-submit {
width: 100%;
border-radius: 8px;
}
}