/* ══════════════════════════════════════════════════════════
   CERAMISPOT — BREVO NEWSLETTER FORM OVERRIDES
   Fichier : ceramispot-brevo-form.css
   À ajouter dans le child theme WordPress (functions.php)
   
   Le plugin Brevo génère un formulaire avec les classes :
   .sib-email-area, .sib-default-btn, input[name="email"]
   
   3 contextes d'affichage :
   1. .nl-cta  → Page article (fond brun gradient, texte blanc)
   2. .newsletter → Page blog sidebar (fond brun, texte blanc)
   3. .nl-inner → Page home (fond clair, texte sombre)
   ══════════════════════════════════════════════════════════ */

/* ── RESET BREVO DEFAULTS ── */
.nl-form .sib-form,
.nl-form form{
  margin:0;padding:0;
}
.nl-form p{margin:0;padding:0;}
.nl-form .sib-email-area{
  display:flex;gap:8px;flex-wrap:nowrap;
  font-size:0; /* kill whitespace between inline elements */
}
.nl-form .sib-email-area label,
.nl-form .sib-email-area > span{
  display:none; /* hide "Votre email*" label — le placeholder suffit */
}

/* ── INPUT EMAIL — BASE ── */
.nl-form input[type="email"],
.nl-form input.sib-email-area{
  flex:1;
  padding:12px 16px;
  border-radius:10px;
  border:none;
  font-size:13px;
  font-family:'DM Sans',sans-serif;
  outline:none;
  transition:border-color .2s;
  min-width:0; /* flex shrink fix */
}

/* ── BOUTON S'INSCRIRE — BASE ── */
.nl-form input[type="submit"],
.nl-form .sib-default-btn{
  padding:12px 22px!important;
  border-radius:10px!important;
  border:none!important;
  background:#c96a3a!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:600!important;
  font-family:'DM Sans',sans-serif!important;
  cursor:pointer;
  transition:background .15s;
  white-space:nowrap;
  line-height:1.4;
}
.nl-form input[type="submit"]:hover,
.nl-form .sib-default-btn:hover{
  background:#d97f52!important;
}

/* ── MESSAGES VALIDATION ── */
.nl-form .sib-form-message-success{
  font-size:13px;
  color:#2d6a30;
  margin-top:8px;
  font-weight:600;
}
.nl-form .sib-form-message-error{
  font-size:12px;
  color:#c0392b;
  margin-top:6px;
}

/* ═══════════════════════════════════════
   CONTEXTE 1 : PAGE ARTICLE (.nl-cta)
   Fond brun gradient → input blanc, texte sombre
   ═══════════════════════════════════════ */
.nl-cta .nl-form input[type="email"],
.nl-cta .nl-form input.sib-email-area{
  background:#fff;
  color:#2c1a0e;
  border:none;
}
.nl-cta .nl-form input[type="email"]::placeholder{
  color:#9a8070;
}
.nl-cta .nl-form .sib-form-message-success{
  color:#a8e6a3;
}
.nl-cta .nl-form .sib-form-message-error{
  color:#f5a0a0;
}
/* Note conformité RGPD sur fond sombre */
.nl-cta .nl-form .sib-form .sib-optin,
.nl-cta .nl-form label{
  color:rgba(255,255,255,.5)!important;
  font-size:11px;
  margin-top:10px;
}
.nl-cta .nl-form a{
  color:#d97f52!important;
}

/* ═══════════════════════════════════════
   CONTEXTE 2 : PAGE BLOG SIDEBAR (.newsletter)
   Fond brun → input semi-transparent, texte blanc
   ═══════════════════════════════════════ */
.newsletter .nl-form input[type="email"],
.newsletter .nl-form input.sib-email-area{
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.1);
}
.newsletter .nl-form input[type="email"]:focus{
  border-color:#c96a3a;
}
.newsletter .nl-form input[type="email"]::placeholder{
  color:rgba(255,255,255,.25);
}
.newsletter .nl-form input[type="submit"],
.newsletter .nl-form .sib-default-btn{
  font-size:12px!important;
  padding:10px 18px!important;
}
.newsletter .nl-form .sib-form-message-success{
  color:#a8e6a3;
}
.newsletter .nl-form .sib-form-message-error{
  color:#f5a0a0;
}
.newsletter .nl-form .sib-form .sib-optin,
.newsletter .nl-form label{
  color:rgba(255,255,255,.4)!important;
  font-size:10px;
  margin-top:8px;
}
.newsletter .nl-form a{
  color:#d97f52!important;
}

/* ═══════════════════════════════════════
   CONTEXTE 3 : PAGE HOME (.nl-inner)
   Fond clair → input bordé, texte sombre, style arrondi
   ═══════════════════════════════════════ */
.nl-inner .nl-form input[type="email"],
.nl-inner .nl-form input.sib-email-area{
  padding:13px 20px;
  border:1.5px solid #e8ddd2;
  border-radius:30px;
  font-size:14px;
  background:#fff;
  color:#2c1a0e;
}
.nl-inner .nl-form input[type="email"]:focus{
  border-color:#c96a3a;
}
.nl-inner .nl-form input[type="email"]::placeholder{
  color:#9a8070;
}
.nl-inner .nl-form input[type="submit"],
.nl-inner .nl-form .sib-default-btn{
  padding:13px 26px!important;
  border-radius:30px!important;
  font-size:14px!important;
}
.nl-inner .nl-form .sib-form .sib-optin,
.nl-inner .nl-form label{
  color:#9a8070!important;
  font-size:11px;
  margin-top:10px;
  text-align:left;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}
.nl-inner .nl-form a{
  color:#c96a3a!important;
  text-decoration:underline;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:600px){
  .nl-form .sib-email-area{
    flex-direction:column;
  }
  .nl-form input[type="submit"],
  .nl-form .sib-default-btn{
    width:100%!important;
  }
}