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

/*
 * Titre non gras sur « Mes communications » uniquement (le formulaire de
 * création de compte, seul autre point de rendu de `.customer-form-subtitle`,
 * garde la graisse de la règle ci-dessus) : l'ID de page l'emporte sur la
 * classe générique par spécificité.
 */
#module-tdp_newsletter-account .customer-form-subtitle{
    font-weight: 400;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.tdp_newsletter-container .customer-form-newsletter-cgu,
#module-tdp_newsletter-account .customer-form-newsletter-cgu{
    font-style: italic;
    font-size: 0.813rem;
}

.tdp_newsletter-container .form-group.inlinecivinput,
#module-tdp_newsletter-account .form-group.inlinecivinput {
    margin-bottom: 0;
}

.tdp_newsletter-container .form-group.inlinecivinput .form-control-valign > *,
#module-tdp_newsletter-account .form-group.inlinecivinput .form-control-valign > *{
    justify-self: flex-end;
}

/*
 * Champs de consentement newsletter du formulaire de création de compte (#11471,
 * retours de recette des 2026-09-03 et 2026-09-07).
 *
 * Le libellé du PREMIER champ porte le titre de section « Je souhaite recevoir : »
 * (`ModuleHooks::buildConsentFormFields()`, seul point de rendu possible d'un titre
 * avec `additionalCustomerFormFields`). Laissé dans le flux du libellé, il fait de
 * ce champ le seul à être multi-ligne, avec deux conséquences : ses boutons radio
 * ne sont plus en face de sa phrase (« les boutons radio ne sont pas en face des
 * phrases », retour du 2026-09-03), et tout recalage de ces boutons rapproche ou
 * éloigne sa paire de la suivante, d'où un espacement irrégulier entre les paires
 * (retour du 2026-09-07 : 37 px entre les deux premières, 45 px ensuite).
 *
 * Le titre est donc sorti du flux (positionnement absolu), la place qu'il occupe
 * étant réservée par la marge haute du champ. Les quatre champs ont dès lors la
 * même structure et la même hauteur : leurs boutons radio sont en face de leur
 * phrase et régulièrement espacés, sans aucun recalage particulier — mesuré sur
 * dev1, rythme entre paires de boutons 45/45/45 px et écart à la phrase de -1 px
 * sur les quatre champs, à toute largeur de fenêtre.
 *
 * `:has()` cible ce champ sans pouvoir s'appuyer sur une classe portée par
 * `.form-group`, que le gabarit du cœur ne permet pas de personnaliser.
 */
#customer-form .form-group:has(.tdp-newsletter-consent-title) {
    position: relative;
    margin-top: 3rem;
}

#customer-form .tdp-newsletter-consent-title {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-2rem);
}

/*
 * Boutons radio en face de leur libellé lorsque celui-ci passe sur plusieurs lignes
 * (fenêtre réduite) : la cellule des boutons est étirée sur la hauteur de la ligne
 * de grille, définie par le libellé, et son contenu reste calé en haut. Sans effet
 * sur un libellé mono-ligne, où la cellule fait déjà la hauteur du texte.
 */
#customer-form .form-group:has([name^="tdp_newsletter_consent_"]) .form-control-valign {
    align-self: center;
}

#checkout .tdp_newsletter-container .inlinecivinput {
    grid-template-columns: 3fr 2fr;
}

#content .newsletter-account-container .conditions-newsletter {
    font-size: 0.938rem;
    font-weight: 400;
}

/*
 * Aligné sur la marge des champs de consentement (`.tdp_newsletter-container`,
 * `views/css/account.css`) plutôt que centré, pour que le bloc de mentions
 * légales retombe sous les boutons radio au lieu d'un bloc plus étroit.
 */
@media screen and (min-width: 1200px) {
    #content .newsletter-account-container .conditions-newsletter {
        margin-top: 0.5rem;
    }
}

/*
 * Bloc newsletter home/footer (#newsletter, bulle "voir les conditions") :
 * repris à l'identique du style de production (ancien module rdr_newsletter),
 * les gabarits (id/classes) étant restés les mêmes dans tdp_newsletter.
 */
#newsletter {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}

#newsletter .newsletter-img {
  max-width: 545px;
  max-height: 136px;
  width: 100%;
}

@media (max-width: 912px) {
  #newsletter {
    flex-direction: column;
    align-items: center;
  }
}

#newsletter .newsletter-content {
  max-width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#newsletter .newsletter-content #newsletter_text {
  margin: 0;
  color: white;
}

.block_newsletter form.nl_form .input-cta {
  display: flex;
  flex-direction: row;
  padding: 5px;
}

.block_newsletter form.nl_form .input-cta #submit_nl_footer {
  color: white;
  font-weight: bold;
  background: #c0a56e;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: none;
  padding: 10px;
}

.block_newsletter form.nl_form .input-cta input[name="email"] {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border: 1px solid #c0a56e;
  border-right: none;
  text-align: center;
}

.block_newsletter form.nl_form .input-cta input[name="email"]:focus {
  outline: 1px solid #c51d3b;
}

.newsletter-content .bulle-wrapper {
  cursor: pointer;
  color: #c0a56e;
  text-decoration: underline;
}

.newsletter-content .bulle-wrapper .bulle {
  display: none;
  height: auto;
  position: absolute;
  z-index: 5;
  background: white;
  width: 100%;
  max-width: 400px;
  border: 1px solid;
  border-radius: 5px;
}

.newsletter-content .bulle-wrapper .bulle .bulle-close {
  float: right;
  color: white;
  background: #c51d3b;
  padding: 5px;
}

.newsletter-content .bulle .bulle-message {
  padding: 10px;
  color: #000;
}

.newsletter-content .bulle-wrapper .bulle .bulle-close:hover {
  background: #c0a56e;
  padding: 5px;
  font-weight: bold;
}

@media (max-width: 500px) {
  .newsletter-content .bulle-wrapper .bulle {
    position: relative;
    width: 100%;
  }
}