/* Bloc de capture newsletter (bandeau avant le footer, toutes langues).
   Palette codee en dur : le bloc est pose sur des pages qui n'ont pas
   les memes variables CSS (home inline vs _blog.css). */

.nl{border-top:1px solid #E5E5E5;background:#FAFAFA}
.nl-in{max-width:720px;margin:0 auto;padding:clamp(44px,7vw,72px) clamp(20px,5vw,24px)}
.nl-kicker{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#6B6B6B;margin:0 0 14px}
.nl h2{font-size:clamp(22px,3.2vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.15;
  margin:0 0 10px;color:#0A0A0A}
.nl-tag{font-size:16px;line-height:1.6;color:#1A1A1A;max-width:52ch;margin:0 0 22px}

.nl form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
/* display:flex l'emporte sur l'attribut hidden : sans ceci, le formulaire
   reste affiche apres une inscription reussie. */
.nl form[hidden]{display:none}
.nl input[type=email]{flex:1 1 260px;min-width:0;min-height:52px;padding:14px 18px;
  border:1px solid #E5E5E5;border-radius:100px;background:#fff;color:#0A0A0A;font:inherit;font-size:16px}
.nl input[type=email]::placeholder{color:#6B6B6B}
.nl input[type=email]:focus{outline:none;border-color:#0A0A0A}
.nl button{min-height:52px;padding:15px 28px;border:0;border-radius:100px;background:#0A0A0A;color:#fff;
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .3s}
.nl button:hover{opacity:.85}
.nl button[disabled]{opacity:.5;cursor:default}

.nl-legal{font-size:13px;line-height:1.6;color:#6B6B6B;margin:16px 0 0;max-width:56ch}
.nl-legal a{color:#6B6B6B;text-decoration:underline;text-underline-offset:3px}
.nl-legal a:hover{color:#0A0A0A}

.nl-msg{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:#1A1A1A}
.nl-msg.ok{color:#0A0A0A;font-weight:600}
.nl-msg.ko{color:#0A0A0A}
.nl-msg[hidden]{display:none}

/* Sous 480px on empile. Attention : en colonne, le flex-basis s'applique a la
   HAUTEUR, donc `flex:1 1 260px` etirait le champ email sur 260px de haut. */
@media (max-width:480px){
  .nl form{flex-direction:column;align-items:stretch}
  .nl input[type=email]{flex:0 0 auto;width:100%;height:52px}
  .nl button{flex:0 0 auto;width:100%}
}