/**

 * Bandeau newsletter ArchiaLearn

 * Styles isolés — préfixe .archia-newsletter-banner

 * Thème : variables ARCHIA365 (--archia-*) — clair / sombre / haute contraste

 */



.archia-newsletter-banner {

  --archia-nl-banner-bg: var(--archia-surface-2, #f8f9fb);

  --archia-nl-banner-text: var(--archia-text, #1a2233);

  --archia-nl-banner-muted: var(--archia-muted, #6b7383);

  --archia-nl-banner-link: var(--archia-primary, #2f6fe4);

  --archia-nl-banner-btn-bg: color-mix(in srgb, var(--archia-primary, #2f6fe4) 55%, #0a1628);

  --archia-nl-banner-btn-bg-hover: color-mix(in srgb, var(--archia-primary, #2f6fe4) 42%, #060d18);

  --archia-nl-banner-btn-fg: #ffffff;

  --archia-nl-banner-focus: var(--archia-primary, #2f6fe4);

  --archia-nl-banner-link-size: 0.9375rem;

  --archia-nl-banner-link-weight: 600;

  --archia-nl-banner-link-line-height: 1.35;



  width: 100%;

  background: var(--archia-nl-banner-bg);

  border-top: 1px solid var(--archia-border, #dce3ef);

  border-bottom: 1px solid var(--archia-border, #dce3ef);

  color: var(--archia-nl-banner-text);

}



html[data-theme="dark"] .archia-newsletter-banner,

html[data-theme="hc"] .archia-newsletter-banner {

  --archia-nl-banner-btn-bg: var(--archia-primary, #7ca7ff);

  --archia-nl-banner-btn-bg-hover: color-mix(in srgb, var(--archia-primary, #7ca7ff) 86%, #ffffff);

  --archia-nl-banner-btn-fg: var(--archia-bg, #0f141d);

}



html[data-theme="hc"] .archia-newsletter-banner {

  --archia-nl-banner-btn-bg-hover: color-mix(in srgb, var(--archia-primary, #8fc2ff) 78%, #ffffff);

}



.archia-newsletter-banner-inner {

  max-width: 1400px;

  margin: 0 auto;

  padding: 1.75rem 1.25rem;

}



.archia-newsletter-banner-heading {

  margin: 0 0 0.35rem;

  font-size: 1.125rem;

  font-weight: 700;

  line-height: 1.35;

  color: var(--archia-nl-banner-text);

}



.archia-newsletter-banner-lead {

  margin: 0 0 1rem;

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--archia-nl-banner-text);

}



.archia-newsletter-banner-actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 1rem 1.5rem;

}



.archia-newsletter-banner-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 2.75rem;

  padding: 0.55rem 1.35rem;

  border: 2px solid var(--archia-nl-banner-btn-bg);

  border-radius: 0.25rem;

  background: var(--archia-nl-banner-btn-bg);

  color: var(--archia-nl-banner-btn-fg);

  font-size: 0.95rem;

  font-weight: 700;

  line-height: 1.2;

  text-decoration: none;

  white-space: nowrap;

  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;

}



.archia-newsletter-banner-btn:hover {

  background: var(--archia-nl-banner-btn-bg-hover);

  border-color: var(--archia-nl-banner-btn-bg-hover);

  color: var(--archia-nl-banner-btn-fg);

  text-decoration: none;

}



.archia-newsletter-banner-btn:focus-visible {

  outline: 3px solid var(--archia-warning, #d99000);

  outline-offset: 2px;

}



.archia-newsletter-banner-link:focus-visible {

  outline: 2px solid var(--archia-nl-banner-focus);

  outline-offset: 2px;

  border-radius: 2px;

}



.archia-newsletter-banner-link {

  font-size: var(--archia-nl-banner-link-size);

  font-weight: var(--archia-nl-banner-link-weight);

  line-height: var(--archia-nl-banner-link-line-height);

  text-decoration: none;

  transition: color 0.15s ease, border-color 0.15s ease, text-decoration-color 0.15s ease;

}



.archia-newsletter-banner-links {

  display: flex;

  flex-wrap: wrap;

  gap: 0.35rem 1.25rem;

}



.archia-newsletter-banner-link {

  color: var(--archia-nl-banner-muted);

  border-bottom: 1px solid transparent;

}



.archia-newsletter-banner-link:hover {

  color: var(--archia-nl-banner-link);

  border-bottom-color: var(--archia-nl-banner-link);

}



@media (max-width: 767.98px) {

  .archia-newsletter-banner-inner {

    padding: 1.5rem 1rem;

  }



  .archia-newsletter-banner-actions {

    flex-direction: column;

    align-items: flex-start;

    gap: 1rem;

  }



  .archia-newsletter-banner-links {

    flex-direction: column;

    gap: 0.5rem;

  }

}