/* =======================================================
   © 2025 Pascal Evrard — Afondlacom'
   Fichier : /assets/css/footer.css
   SECTION: FOOTER v1 — 4 colonnes + barre de bas de page
   ======================================================= */

:root{
  --container-w: 1400px;
  --footer-bg: #f6f7f6;
  --footer-ink:#111111;
  --muted:#6b7280;
  --soft:#e5e7eb;
  --accent:#f57d1b;
}

.site-footer{
  background:var(--footer-bg);
  color:var(--footer-ink);
  border-top:1px solid rgba(0,0,0,.06);
}

.footer-inner{
  max-width:var(--container-w);
  margin:0 auto;
  padding:32px 16px 24px;
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
}

/* Titres */
.f-title{
  margin:0 0 12px;
  font:700 18px/1.2 Poppins,system-ui,Arial;
}
.f-title--mt{ margin-top:18px; }
.f-subtitle{
  margin:18px 0 8px;
  font:600 14px/1.2 Poppins,system-ui,Arial;
  color:var(--muted);
}

/* Texte */
.f-text{ margin:0 0 10px; color:var(--muted); }

/* Chips réseaux */
.f-social{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-block; padding:8px 10px; border-radius:10px;
  border:1px solid var(--soft); color:var(--footer-ink); text-decoration:none;
  font:500 13px/1 Poppins,system-ui,Arial;
}
.chip:hover{ background:#fff; }

/* Tags (pills) */
.f-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  display:inline-block; padding:8px 10px; border-radius:10px;
  border:1px solid var(--soft); background:#fff; color:#111; text-decoration:none;
  font:500 13px/1 Poppins,system-ui,Arial;
}
.tag:hover{ border-color:var(--accent); color:var(--accent); }

/* Liens importants */
.f-links{ list-style:none; margin:8px 0 0; padding:0; }
.f-links li{ border-top:1px solid var(--soft); }
.f-links li:first-child{ border-top:0; }
.f-links a{
  display:block; padding:10px 0; color:#111; text-decoration:none;
  font:500 14px/1.2 Poppins,system-ui,Arial;
  position:relative; padding-left:18px;
}
.f-links a::before{
  content:"›"; position:absolute; left:0; top:50%; transform:translateY(-50%);
  color:var(--muted);
}
.f-links a:hover{ color:var(--accent); }

/* Dernières actus */
.f-news{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.f-news li{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--soft); }
.f-news li:last-child{ border-bottom:0; }
.n-thumb{ display:block; width:64px; height:48px; border-radius:8px; overflow:hidden; background:#fff; border:1px solid var(--soft); }
.n-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.n-meta{ display:grid; gap:4px; }
.n-title{ color:#111; text-decoration:none; font:600 14px/1.2 Poppins,system-ui,Arial; }
.n-title:hover{ color:var(--accent); }
.n-date{ color:var(--muted); font:500 12px/1 Poppins,system-ui,Arial; }

/* Contact */
.f-contact p{ margin:0 0 10px; color:var(--muted); }
.f-phone{ color:#111; text-decoration:none; font-weight:700; }
.f-phone:hover{ color:var(--accent); }

/* Mini works */
.f-works{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:6px; }
.f-works img{ width:100%; height:60px; object-fit:cover; border-radius:8px; border:1px solid var(--soft); background:#fff; }

/* Barre bas de page */
.footer-bar{
  border-top:1px solid rgba(0,0,0,.08);
  margin-top:12px;
  background:#fff;
}
.footer-bar p{
  max-width:var(--container-w);
  margin:0 auto; padding:14px 16px; text-align:center;
  color:#444; font:500 13px/1.2 Poppins,system-ui,Arial;
}

/* Responsive ≥ 1024px : 4 colonnes */
@media (min-width:1024px){
  .footer-inner{ grid-template-columns: 1.2fr 1fr 1.2fr 1fr; gap:36px; padding:40px 24px 28px; }
}

/* Dark mode */
body.dark .site-footer{
  background:#0f1220; color:#e5e7eb; border-top-color:rgba(255,255,255,.08);
}
body.dark .f-text, body.dark .n-date, body.dark .f-contact p{ color:#94a3b8; }
body.dark .chip{ border-color:rgba(255,255,255,.18); color:#e5e7eb; }
body.dark .tag{ border-color:rgba(255,255,255,.16); background:#0f1220; color:#e5e7eb; }
body.dark .tag:hover{ border-color:var(--accent); color:var(--accent); }
body.dark .f-links li{ border-color:rgba(255,255,255,.12); }
body.dark .f-links a{ color:#e5e7eb; }
body.dark .f-links a:hover{ color:var(--accent); }
body.dark .n-thumb{ background:#0f1220; border-color:rgba(255,255,255,.12); }
body.dark .n-title{ color:#e5e7eb; }
body.dark .footer-bar{ background:#0b0e1a; border-top-color:rgba(255,255,255,.10); }
body.dark .footer-bar p{ color:#cbd5e1; }
/* ===== Footer — Lien email propre (puce icône + underline accentué) ===== */
:root{
  --accent:#f57d1b;         /* déjà défini chez toi, rappel au cas où */
  --ink:#111;               /* texte clair */
}

.footer a.mail-link,
footer a.mail-link,
.footer a[href^="mailto:"],
footer a[href^="mailto:"]{
  color: inherit;                 /* hérite du texte du footer (clair ou sombre) */
  text-decoration: none;          /* supprime le soulignement bleu par défaut */
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

/* Petite icône enveloppe en monoline (SVG via mask, suit currentColor) */
.footer a.mail-link::before,
footer a.mail-link::before,
.footer a[href^="mailto:"]::before,
footer a[href^="mailto:"]::before{
  content:"";
  inline-size: 18px;
  block-size: 18px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4 7l8 6 8-6' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4 7l8 6 8-6' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  background-color: currentColor;  /* suit la couleur du texte */
  opacity: .9;
}

/* Survol : soulignement accent et légère mise en avant */
.footer a.mail-link:hover,
footer a.mail-link:hover,
.footer a[href^="mailto:"]:hover,
footer a[href^="mailto:"]:hover{
  border-bottom-color: var(--accent);
}

/* Focus accessible (clavier) */
.footer a.mail-link:focus-visible,
footer a.mail-link:focus-visible,
.footer a[href^="mailto:"]:focus-visible,
footer a[href^="mailto:"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(245,125,27,.3); /* halo accent */
  border-bottom-color: var(--accent);
  border-radius: 6px;
}

/* Mode sombre : on garde l’héritage, l’accent reste lisible */
body.dark .footer a.mail-link,
body.dark footer a.mail-link,
body.dark .footer a[href^="mailto:"],
body.dark footer a[href^="mailto:"]{
  color: inherit; /* ton texte clair du footer */
}