/* ==========================================
   Newsletter Modal - Sév Créations infinies
   Fond #F2EDE8, logo visible en entier
   ========================================== */

:root {
    --modal-bg:        #F2EDE8;
    --modal-border:    #D4C4B0;
    --modal-text:      #3D2B1F;
    --modal-subtext:   #6B5144;
    --modal-accent:    #8B6F5E;
    --modal-gold:      #C4A882;
    --modal-input-bg:  #ffffff;
}

/* Overlay */
.newsletter-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.newsletter-modal.hidden { display: none; }

.newsletter-modal-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(61, 43, 31, 0.55);
    backdrop-filter: blur(3px);
    animation: fadeIn 0.3s ease;
}

/* =============================================
   Fenêtre — plus large pour accueillir le logo
   ============================================= */
.newsletter-modal-content {
    position: relative;
    background-color: #F2EDE8 !important;
    border: 1px solid var(--modal-border);
    border-radius: 10px;
    padding: 40px 44px 36px;
    max-width: 520px;
    width: 94%;
    box-shadow: 0 20px 60px rgba(61, 43, 31, 0.22);
    animation: slideUp 0.35s ease;
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Logo de fond — watermark discret */
.newsletter-modal-content::before {
    content: '';
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 260px;
    height: 157px; /* ratio 874:526 */
    background-image: var(--nl-logo-url, none);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
}

/* Tout le contenu au-dessus du watermark */
.newsletter-modal-content > * {
    position: relative;
    z-index: 1;
}

/* Bouton fermeture */
.newsletter-modal-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 34px; height: 34px;
    border: 1px solid var(--modal-border);
    background: rgba(242, 237, 232, 0.9);
    color: var(--modal-subtext);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 10;
}
.newsletter-modal-close:hover {
    background: var(--modal-accent);
    color: #fff;
    border-color: var(--modal-accent);
}

/* =============================================
   Logo — visible en entier, bien dimensionné
   ============================================= */
.newsletter-logo {
    text-align: center;
    margin-bottom: 20px;
}
.newsletter-logo img {
    /* Logo 874×526 — on affiche à 280px de large max */
    max-width: 280px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Séparateur décoratif sous le logo */
.newsletter-logo::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--modal-gold), transparent);
    margin: 16px auto 0;
}

/* Titre */
.newsletter-header {
    text-align: center;
    margin-bottom: 24px;
}
.newsletter-header h2 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--modal-text);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 10px;
}
.newsletter-header p {
    color: var(--modal-subtext);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* =============================================
   Formulaire natif
   ============================================= */
.newsletter-form-wrapper {
    margin-bottom: 18px;
}

.newsletter-input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--modal-border);
    border-radius: 5px;
    color: var(--modal-text);
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.newsletter-input:focus {
    outline: none;
    border-color: var(--modal-accent);
    box-shadow: 0 0 0 3px rgba(139, 111, 94, 0.15);
}
.newsletter-input::placeholder { color: #b8a898; }

/* Bouton brun/doré */
.newsletter-btn-submit {
    display: block;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, #8B6F5E 0%, #A0845C 100%);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Playfair Display', Georgia, serif;
    cursor: pointer;
    letter-spacing: 0.6px;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.newsletter-btn-submit:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(139, 111, 94, 0.35);
}
.newsletter-btn-submit:disabled {
    opacity: 0.65;
    cursor: default;
}

/* Messages retour */
.newsletter-msg {
    margin-top: 10px;
    font-size: 13px;
    text-align: center;
    min-height: 18px;
    line-height: 1.5;
}
.newsletter-msg.success { color: #6B5144; font-weight: 600; }
.newsletter-msg.error   { color: #b03020; }

/* =============================================
   Footer RGPD
   ============================================= */
.newsletter-footer {
    border-top: 1px solid rgba(212, 196, 176, 0.6);
    padding-top: 14px;
    margin-top: 4px;
}
.newsletter-frequency {
    color: var(--modal-accent);
    font-size: 13px;
    text-align: center;
    margin: 0 0 8px;
}
.newsletter-frequency strong { color: var(--modal-text); }

.newsletter-privacy {
    color: #9e8878;
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
    margin: 0;
}
.newsletter-privacy a {
    color: var(--modal-accent);
    text-decoration: underline;
}
.newsletter-privacy a:hover { color: var(--modal-text); }

/* Animations */
@keyframes fadeIn  { from { opacity: 0; }              to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive mobile */
@media (max-width: 560px) {
    .newsletter-modal-content {
        padding: 32px 20px 28px;
        max-height: 96vh;
    }
    .newsletter-logo img    { max-width: 220px; }
    .newsletter-header h2   { font-size: 19px; }
    .newsletter-modal-content::before { display: none; }
}
/* SURCHARGES MAILPOET NATIVES ===================== */
.mailpoet-custom-wrapper form.mailpoet_form {
    margin: 0;
    padding: 0;
}
.mailpoet-custom-wrapper .mailpoet_paragraph {
    margin-bottom: 10px;
}
.mailpoet-custom-wrapper label {
    display: none !important; /* Hide labels if we use placeholders, or style them inline */
}
.mailpoet-custom-wrapper input[type="text"],
.mailpoet-custom-wrapper input[type="email"] {
    display: block;
    width: 100%;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--modal-border);
    border-radius: 5px;
    color: var(--modal-text);
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mailpoet-custom-wrapper input[type="text"]:focus,
.mailpoet-custom-wrapper input[type="email"]:focus {
    outline: none;
    border-color: var(--modal-accent);
    box-shadow: 0 0 0 3px rgba(139, 111, 94, 0.15);
}
.mailpoet-custom-wrapper input.mailpoet_submit,
.mailpoet-custom-wrapper button.mailpoet_submit {
    display: block;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, #8B6F5E 0%, #A0845C 100%);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Playfair Display', Georgia, serif;
    cursor: pointer;
    letter-spacing: 0.6px;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 18px;
    -webkit-appearance: none;
}
.mailpoet-custom-wrapper input.mailpoet_submit:hover,
.mailpoet-custom-wrapper button.mailpoet_submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(139, 111, 94, 0.35);
}
.mailpoet-custom-wrapper .mailpoet_message {
    margin-top: 10px;
    font-size: 13px;
    text-align: center;
    color: #6B5144;
    font-weight: 600;
}
.mailpoet-custom-wrapper .mailpoet_error {
    color: #b03020;
}