/* Chargé sur tout le front (hook displayHeader) : ne porte que ce que le thème ne
   couvre pas déjà. Les blocs newsletter réutilisent les classes du thème
   (.block_newsletter, .block_newsletter_top, .inputemail, .emailHover…), déjà
   stylées pour ce site. */

/* Zone de message des formulaires : masquée tant qu'il n'y a rien à afficher,
   révélée par front.js à la réponse AJAX. */
.tdp-newsletter-hidden {
    display: none;
}

/* Le message précède toujours le formulaire qu'il commente (blocs newsletter et
   « Mes communications ») : l'écart se prend donc dessous. */
.tdp-newsletter-message {
    margin-bottom: 0.5rem;
}

.tdp-newsletter-captcha {
    margin: 0.5rem 0;
}

/* Le widget rendu par Google est un bloc de 304 px de large : centré dans les blocs
   newsletter, dont la colonne est plus large, et libre de déborder nulle part. */
.tdp-newsletter-captcha > div {
    margin: 0 auto;
    max-width: 100%;
}

/* Bloc d'en-tête : message rendu dans le panneau blanc du menu déroulant, au-dessus
   du champ, sur la largeur réduite du panneau. */
#tdp-newsletter-header .tdp-newsletter-message {
    margin-bottom: 0.75rem;
    line-height: 1.4;
    text-align: center;
}

/* Cases de consentement du formulaire de création de compte (inscription et
   tunnel de commande) et de « Mes communications ».

   La grille du gabarit de champ du thème (`col-md-3` pour le libellé, `col-md-6`
   pour la valeur) est prévue pour des libellés courts de champs texte : sur un
   libellé de consentement (« Offres promotionnelles de … par e-mail »), elle le
   casse sur trois ou quatre lignes dans un quart de la largeur, et la règle
   globale `label { text-align: right }` du thème le colle au bord droit. La mise
   en page est donc reprise ici, portée par le conteneur du module — donc valable
   dans les trois contextes de rendu — plutôt que par des noms de champs attendus
   en dur par le thème. */
/* Largeur de lecture du bloc : au-delà, le couple Oui/Non finirait à l'autre bout
   de la page, loin du libellé qu'il complète. */
.tdp_newsletter-container {
    max-width: 640px;
    margin-top: 1.5rem;
}

.tdp_newsletter-container .form-group.row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0.5rem 0;
}

.tdp_newsletter-container .form-group.row > .form-control-label {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    padding: 0 1.5rem 0 0;
    text-align: left;
    line-height: 1.4;
}

.tdp_newsletter-container .form-group.row > .form-control-valign {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    max-width: none;
    padding: 0;
}

.tdp_newsletter-container .form-group.row .radio-inline {
    margin: 0 0 0 1.5rem;
    text-align: left;
    white-space: nowrap;
}

.tdp_newsletter-container .form-group.row .radio-inline:first-child {
    margin-left: 0;
}

/* Erreurs de champ (`_partials/form-errors.tpl`) : sous le couple Oui/Non,
   jamais intercalées entre les deux boutons. */
.tdp_newsletter-container .form-group.row > .form-control-valign > ul {
    flex: 0 0 100%;
    margin: 0.25rem 0 0;
}

/* Écrans étroits : le libellé prend toute la largeur, les boutons passent
   dessous — au-delà, les deux tiennent sur une ligne. */
@media (max-width: 575.98px) {
    .tdp_newsletter-container .form-group.row {
        flex-wrap: wrap;
    }

    .tdp_newsletter-container .form-group.row > .form-control-label {
        flex: 0 0 100%;
        padding-right: 0;
        margin-bottom: 0.25rem;
    }

    .tdp_newsletter-container .form-group.row > .form-control-valign {
        flex: 0 0 100%;
    }
}

.tdp_newsletter-container .customer-form-subtitle,
#module-tdp_newsletter-account .customer-form-subtitle {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* Mentions légales : le thème justifie tous les `<p>`, ce qui creuse des trous
   dans un pavé italique de cette taille. */
.tdp_newsletter-container .customer-form-newsletter-cgu,
#module-tdp_newsletter-account .customer-form-newsletter-cgu {
    font-style: italic;
    font-size: 0.813rem;
    line-height: 1.6;
    text-align: left;
    margin-top: 1.5rem;
}

/* Consentements obligatoires : le thème ne pose aucun marqueur sur les libellés
   `.required` du formulaire client, l'astérisque est donc portée par le module,
   limitée à ses propres groupes (formulaire client et « Mes communications »). */
.tdp_newsletter-container .form-control-label.required::after,
.tdp_newsletter-required-mark {
    color: #f00;
}

.tdp_newsletter-container .form-control-label.required::after {
    content: " *";
}

/* En-tête de « Mes communications » : titre à gauche, mention d'obligation à droite. */
.tdp_newsletter-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

.tdp_newsletter-heading p {
    margin-bottom: 0.5rem;
}

.tdp_newsletter-required-mention {
    font-size: 0.813rem;
}