/* ==========================================================================
   07 - Pied de page, newsletter et sites amis
   Lot 7. C'est l'élément que le client a spontanément le plus apprécié le
   07/09 : « la page d'accueil, très bien. Notamment le bas de page. C'est
   vraiment très bien ».

   Structure de la maquette (Footer.tsx) : trois colonnes,
     1. nom du site en capitales espacées + une phrase
     2. colonne de liens : Mentions légales, Plan du site, Sites amis, Contact
     3. bloc newsletter
   ========================================================================== */

.ehf-footer,
.lm-footer {
  border-top: var(--lm-rule) solid var(--lm-border);
  background: var(--lm-background);
  color: var(--lm-foreground);
  padding-block: 2.5rem 1.5rem;
}

/* --- Bloc newsletter ------------------------------------------------------ */

.lm-newsletter {
  max-width: 28rem;
  scroll-margin-top: 8rem;   /* l'ancre ne passe pas sous l'en-tête */
}

.lm-newsletter__title {
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 600;
  margin: 0 0 .75rem;
}

.lm-newsletter__intro {
  font-size: .875rem;
  color: var(--lm-muted);
  margin: 0 0 1rem;
}

.lm-newsletter label {
  display: block;
  margin-bottom: .35rem;
  font-size: .875rem;
}

.lm-newsletter input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: .55rem .7rem;
  border: var(--lm-rule) solid var(--lm-border);
  border-radius: var(--lm-radius);
  font-family: var(--lm-font);
  font-size: .875rem;
  background: var(--lm-background);
  color: var(--lm-foreground);
}

.lm-newsletter input[type="email"]:focus {
  border-color: var(--lm-primary);
  outline: none;
}

.lm-newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .75rem 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--lm-muted);
}

.lm-newsletter__consent input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: .15rem;
  accent-color: var(--lm-primary);
  flex-shrink: 0;
}

.lm-newsletter__consent a {
  color: var(--lm-primary);
  text-decoration: underline;
}

.lm-newsletter button,
.lm-newsletter input[type="submit"] {
  min-height: 44px;
  background: var(--lm-primary);
  color: var(--lm-primary-contrast);
  border: 0;
  border-radius: var(--lm-radius);
  padding: .6rem 1.4rem;
  font-family: var(--lm-font);
  font-size: .875rem;
  cursor: pointer;
  transition: background-color .2s ease;
}

.lm-newsletter button:hover {
  background: var(--lm-primary-deep);
}

.lm-newsletter button:disabled {
  opacity: .6;
  cursor: wait;
}

/* Messages de retour, en français. */
.lm-newsletter__message {
  margin: .75rem 0 0;
  font-size: .8125rem;
}

.lm-newsletter__message--error { color: #B3261E; }
.lm-newsletter__message--success { color: var(--lm-primary); }

/* Honeypot : masqué pour les humains, présent dans le DOM pour les robots.
   Ne pas utiliser display:none, certains robots le détectent. */
.lm-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Ligne basse de liens -------------------------------------------------- */

.lm-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: var(--lm-rule) solid var(--lm-border);
  font-size: .8125rem;
  list-style: none;
  padding-inline: 0;
}

.lm-footer-links a {
  color: inherit;
  text-decoration: none;
}

.lm-footer-links a:hover {
  color: var(--lm-primary);
}

/* --- Signature du site en pied de page ------------------------------------ */

.lm-footer-brand {
  font-size: 1rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

.lm-footer-brand + p {
  font-size: .75rem;
  color: var(--lm-muted);
  line-height: 1.6;
  max-width: 22rem;
}

/* Cibles tactiles de 44px minimum en mobile, préparé pour le lot 8. */
@media (max-width: 767px) {
  .lm-footer-links {
    gap: .5rem 1rem;
  }
  .lm-footer-links a {
    display: inline-block;
    padding-block: .6rem;
  }
}