/**
 * Newsletter Block — Inscription a la newsletter (standalone)
 *
 * Bandeau vert fonce, texte blanc, formulaire inline
 * (champ email + bouton) centre.
 */

/* =============================================================================
   Section
   ============================================================================= */
.newsletter-block {
    color: var(--color-white);
    padding: var(--space-3xl) 0;
}

/* =============================================================================
   Inner (centered content)
   ============================================================================= */
.newsletter-block__inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* =============================================================================
   Title & description
   ============================================================================= */
.newsletter-block__title {
    font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    color: var(--color-white);
}

.newsletter-block__subtitle {
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.4;
    opacity: 0.95;
    margin-bottom: var(--space-lg);
}

.newsletter-block__desc {
    font-size: var(--font-size-base);
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: var(--space-xl);
}

/* =============================================================================
   Form
   ============================================================================= */
.newsletter-block__form {
    width: 100%;
}

.newsletter-block__field {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
}

/* =============================================================================
   Email input
   ============================================================================= */
.newsletter-block__input {
    flex: 1;
    max-width: 400px;
    padding: 12px 16px;
    border: 1px solid var(--color-white);
    border-radius: var(--btn-radius);
    background-color: transparent;
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    transition: background-color 0.2s ease;
}

.newsletter-block__input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.newsletter-block__input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.1);
}

/* =============================================================================
   Submit button
   ============================================================================= */
.newsletter-block__btn {
    flex-shrink: 0;
    background-color: var(--color-white);
    color: var(--color-teal);
    border: none;
    border-radius: var(--btn-radius);
    padding: var(--btn-padding);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    font-family: var(--font-family);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.newsletter-block__btn:hover {
    background-color: var(--color-orange);
    color: var(--color-teal);
}

/* =============================================================================
   Screen-reader only label
   ============================================================================= */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================================
   White background variant — dark text
   ============================================================================= */
.newsletter-block.bg-white {
    color: var(--color-dark);
}

.newsletter-block.bg-white .newsletter-block__title {
    color: var(--color-dark);
}

.newsletter-block.bg-white .newsletter-block__input {
    border-color: #ccc;
    color: var(--color-dark);
    background-color: var(--color-white);
}

.newsletter-block.bg-white .newsletter-block__input::placeholder {
    color: #999;
}

.newsletter-block.bg-white .newsletter-block__input:focus {
    border-color: var(--color-teal);
    background-color: var(--color-white);
}

.newsletter-block.bg-white .newsletter-block__btn {
    background-color: var(--color-teal);
    color: var(--color-white);
}

.newsletter-block.bg-white .newsletter-block__btn:hover {
    background-color: var(--color-orange);
    color: var(--color-white);
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 480px) {
    .newsletter-block__field {
        flex-direction: column;
        align-items: stretch;
    }

    .newsletter-block__input {
        max-width: 100%;
    }
}