/* Bande newsletter au-dessus du footer (includes/newsletter.inc.php), toutes les
   pages, si activée dans Paramètres du footer. Texte à gauche, e-mail + bouton à
   droite, case de consentement dessous ; empilé sous 992px. Fond couleur 1. */

.uw-newsletter {
    padding: 55px 0 35px; /* plus aéré (demande client 2026-09-30) */
    background: var(--couleur);
    color: #fff;
}

/* Ordinateur : grille 3 colonnes, logo | titre | champ.
   Le titre (texte aligné à gauche) est poussé contre le champ et centré en hauteur
   sur la ligne du champ ; la case de consentement et le message passent dessous,
   sous le champ. display:contents sur .uw-newsletter-text et le <form> : leurs
   enfants deviennent directement des cases de la grille (le formulaire fonctionne
   toujours normalement). */
.uw-newsletter-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 380px);
    column-gap: 32px;
    align-items: center;
}

.uw-newsletter-text,
.uw-newsletter-form {
    display: contents;
}

.uw-newsletter-brand {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
}

.uw-newsletter-title {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-align: left;
}

.uw-newsletter-row {
    grid-column: 3;
    grid-row: 1;
}

.uw-newsletter-consent {
    grid-column: 3;
    grid-row: 2;
}

.uw-newsletter-status {
    grid-column: 3;
    grid-row: 3;
}

.uw-newsletter-brand {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #fff;
    text-decoration: none;
}

.uw-newsletter-brand:hover {
    color: #fff;
    text-decoration: none;
}

.uw-newsletter-logo {
    display: block;
    max-width: 90px;
    max-height: 90px;
    width: auto;
    height: auto;
}

.uw-newsletter-site {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.uw-newsletter-slogan {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, .8);
    font-size: 11px;
    letter-spacing: .4px;
    white-space: nowrap;
}

/* Largeur limitée : le titre tient sur deux lignes (« Vous souhaitez rester informé /
   sur les dernières actualités ») */
.uw-newsletter-title {
    max-width: 17em;
    margin: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.25;
}

.uw-newsletter-sub {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .85);
}

/* Champ + bouton dans une même pastille blanche */
.uw-newsletter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    background: #fff;
    border-radius: 4.75rem;
}

.uw-newsletter-email {
    flex: 1;
    min-width: 0;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: var(--ink, #0c1320);
    font-size: 14px;
    outline: none;
}

.uw-newsletter-row:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}

/* Même forme que le bouton du menu (pastille + flèche) : fond couleur 2 sur la bande couleur 1 */
.uw-newsletter .uw-newsletter-btn {
    flex-shrink: 0;
    padding: 5px 5px 5px 16px;
    gap: 10px;
    font-size: 13px;
    border-radius: 4.75rem;
    background: var(--couleur2);
    border-color: var(--couleur2);
}

.uw-newsletter-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
}

.uw-newsletter-consent input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--couleur2);
}

.uw-newsletter-status {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.uw-newsletter-status.is-error {
    background: rgba(220, 53, 69, .9);
}

/* Texte réservé aux lecteurs d'écran (libellé du champ e-mail) */
.uw-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;
}

/* Tablette / mobile : tout empilé dans l'ordre (logo, titre, champ, case, message) */
@media (max-width: 991px) {
    .uw-newsletter-inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    .uw-newsletter-brand,
    .uw-newsletter-title,
    .uw-newsletter-row,
    .uw-newsletter-consent,
    .uw-newsletter-status {
        grid-column: 1;
        grid-row: auto;
        justify-self: stretch;
    }

    .uw-newsletter-brand {
        justify-self: start;
        margin-bottom: 16px;
    }

    .uw-newsletter-title {
        margin-bottom: 20px;
    }

    /* Champ et case moins larges (demande client 2026-10-08) : même largeur max que sur ordinateur */
    .uw-newsletter-row,
    .uw-newsletter-consent {
        justify-self: start;
        width: 100%;
        max-width: 380px;
    }
}

/* Petit mobile : plus compact (demande client 2026-10-08) — champ + bouton gardés côte à côte
   dans la pastille, comme sur ordinateur, au lieu d'une grande carte empilée */
@media (max-width: 480px) {
    .uw-newsletter {
        padding: 36px 0 26px;
    }

    .uw-newsletter-title {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .uw-newsletter-email {
        padding: 6px 10px;
        font-size: 13px;
    }

    .uw-newsletter .uw-newsletter-btn {
        padding: 4px 4px 4px 12px;
        gap: 8px;
        font-size: 12px;
    }

    .uw-newsletter .uw-newsletter-btn .uw-btn-arrow {
        width: 26px;
        height: 26px;
    }

    .uw-newsletter-consent {
        font-size: 11px;
    }

    .uw-newsletter-row,
    .uw-newsletter-consent {
        max-width: 310px;
    }
}