/**
 * Feuille de style pour la partie publique du plugin Newsletter.
 * Cible principalement le formulaire d'inscription.
 */

/* Conteneur principal de la boîte d'inscription */
.mpn-subscription-box {
    background-color: #f7f5f2; /* Un gris très clair pour le fond */
    border-top: 3px solid #e0e0e0; /* Une bordure de couleur pour l'accent, à adapter à votre thème */
    padding: 2.5em 2em;
    margin-top: 3em; /* Espace par rapport au contenu de l'article */
    margin-bottom: 2em;
    clear: both; /* Assure qu'il n'y a pas d'éléments flottants à côté */
}

/* Enveloppe intérieure pour centrer le contenu */
.mpn-form-wrapper {
    max-width: 600px; /* Limite la largeur pour une meilleure lisibilité */
    margin: 0 auto; /* Centre la boîte horizontalement */
    text-align: center;
}

/* Titre de la boîte */
.mpn-form-wrapper h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.6em;
    font-weight: 600;
    color: #2d3748; /* Un gris foncé pour le texte */
}

/* Paragraphe descriptif */
.mpn-form-wrapper p {
    color: #555555; /* Un gris plus doux pour la description */
    font-size: 1em;
    margin-bottom: 1.5em;
}

/* Le formulaire lui-même, utilisant Flexbox pour l'alignement */
.mpn-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espace entre le champ e-mail et le bouton */
}

/* Style pour le champ de saisie de l'e-mail */
.mpn-email-input {
    padding: 12px 15px;
    border: 1px solid #cbd5e0;
    border-radius: 5px;
    font-size: 1em;
    flex-grow: 1; /* Permet au champ de prendre l'espace disponible */
    color: #2d3748;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mpn-email-input:focus {
    outline: none;
    border-color: #5a67d8; /* Met en évidence le champ lors de la saisie */
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.2);
}

/* Style pour le bouton d'envoi */
.mpn-submit-btn {
    padding: 12px 22px;
    border: 1px solid #A4A27A;
    border-radius: 5px;
    background-color: #EFE2D3; /* Couleur principale */
    color: #555555;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap; /* Empêche le texte du bouton d'aller à la ligne */
}

.mpn-submit-btn:hover {
    background-color: #A4A27A; /* Une teinte plus foncée au survol */
}

/* Conteneur pour les messages de retour (succès/erreur) */
.mpn-form-message {
    margin-top: 1.5em;
    padding: 1em;
    border-radius: 5px;
    border-left-width: 4px;
    border-left-style: solid;
    display: none; /* Caché par défaut, affiché par le JavaScript */
    text-align: left;
    font-weight: 500;
}

/* Style pour les messages de succès */
.mpn-form-message.success {
    background-color: #f0fff4;
    border-color: #48bb78;
    color: #2f855a;
}

/* Style pour les messages d'erreur */
.mpn-form-message.error {
    background-color: #fff5f5;
    border-color: #f56565;
    color: #c53030;
}

/* Media Query pour la responsivité sur les petits écrans */
@media (max-width: 640px) {
    /* Le formulaire passe en colonne pour que les éléments s'empilent */
    .mpn-form {
        flex-direction: column;
        align-items: stretch; /* Les éléments prennent toute la largeur */
    }

    .mpn-email-input,
    .mpn-submit-btn {
        width: 100%; /* Pleine largeur */
    }
}

/* Classe utilitaire pour les lecteurs d'écran, pour l'accessibilité du label */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* NOUVELLES RÈGLES POUR CORRIGER L'ALIGNEMENT DU FORMULAIRE */

/* On force le formulaire à empiler ses éléments verticalement */
.mpn-form {
    flex-direction: column;
    align-items: center; /* Centre les éléments horizontalement */
}

/* On s'assure que le champ email prend une largeur raisonnable */
.mpn-email-input {
    width: 100%;
    max-width: 380px; /* Adaptez si besoin */
}

/* On ajoute un peu d'espace pour la boîte reCAPTCHA */
.mpn-captcha-wrapper {
    margin-top: 1em;
    margin-bottom: 1em;
    /* Assure que la boîte elle-même est centrée si elle est plus petite que le conteneur */
    display: flex;
    justify-content: center;
}

/* On s'assure que le bouton prend aussi une largeur définie */
.mpn-submit-btn {
    width: 100%;
    max-width: 380px;
}