/* ============================================================
   The Loft 67 — Shared site footer
   Replicates the index.html footer visuals (dark green gradient,
   gold col-titles, white pill newsletter, social icons) but with
   class names prefixed `tlf-` so it can be dropped into pages
   that already define their own .footer / .brand styles without
   collisions.
   ============================================================ */
.tlf-footer{
  --tlf-serif: Georgia, 'Times New Roman', serif;
  --tlf-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tlf-orange:#f26322;
  --tlf-green:#0b3327;
  width:min(1250px,calc(100% - 64px));
  max-width:1250px;
  margin:24px auto 34px;
  border-radius:24px;
  background:linear-gradient(135deg,#06281f,#0d372a);
  color:#fff;
  padding:50px 58px 28px;
  font-family:var(--tlf-sans);
  box-sizing:border-box;
}
.tlf-footer *{box-sizing:border-box}
.tlf-footer a{text-decoration:none;color:inherit}
.tlf-footer-grid{
  display:grid;
  grid-template-columns:1.5fr .75fr .95fr 1.25fr;
  gap:70px;
}
.tlf-footer-brand .tlf-brand{
  display:inline-block;
  margin-bottom:22px;
  line-height:0;
}
.tlf-footer-brand .tlf-brand img{
  width:auto !important;
  height:62px !important;
  max-width:none !important;
  object-fit:contain !important;
  display:block;
  /* Logo white-version sur fond vert foncé : brightness(0) invert(1)
     remappe toute la couleur du logo en blanc pur (contrast max),
     drop-shadow subtile pour donner du relief sans bord visible.
     !important nécessaire pour passer outre les `img{...}` resets
     globaux de certaines pages (Tailwind, generator logements, etc.)
     qui peuvent réinitialiser filter / object-fit. */
  filter:brightness(0) invert(1) drop-shadow(0 1px 0 rgba(0,0,0,0.18)) !important;
}
.tlf-footer-brand p{
  font-size:13px;
  line-height:1.65;
  color:rgba(255,255,255,.72);
  max-width:280px;
  margin:0;
}
.tlf-socials{display:flex;gap:12px;margin-top:24px}
.tlf-socials a{
  /* Cible tactile : 40px desktop, 44px sur mobile (cf. media @760px ci-dessous)
     pour respecter les recommandations WCAG/HIG (≥ 40-44px). */
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  display:inline-grid;
  place-items:center;
  color:#fff;
  transition:background .2s ease;
}
.tlf-socials a:hover{background:rgba(255,255,255,.08)}
.tlf-socials svg{width:16px;height:16px}
.tlf-footer-col h4{
  font-size:12px;
  letter-spacing:.18em;
  color:#e7bc6c;
  margin:0 0 18px;
  font-weight:700;
}
.tlf-footer-col a{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:13px;
  margin:11px 0;
  transition:color .15s ease;
}
.tlf-footer-col a:hover{color:#fff}
.tlf-newsletter h3{
  font-family:var(--tlf-serif);
  color:#fff;
  font-size:21px;
  margin:0 0 8px;
  letter-spacing:-.01em;
  font-weight:800;
}
.tlf-newsletter p{
  color:rgba(255,255,255,.72);
  font-size:12px;
  margin:0 0 18px;
}
.tlf-email{
  height:48px;
  background:#fff;
  border-radius:999px;
  padding:0 8px 0 20px;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:280px;
}
.tlf-email input{
  border:0;outline:0;flex:1;
  background:transparent;
  font-family:var(--tlf-sans);
  font-size:13px;
  color:#17211b;
}
.tlf-email button{
  width:40px;height:40px;
  border-radius:50%;
  border:0;
  background:var(--tlf-orange);
  color:#fff;
  font-size:21px;
  cursor:pointer;
  display:inline-grid;
  place-items:center;
  line-height:1;
}
.tlf-footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:40px;
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  color:rgba(255,255,255,.68);
  font-size:12px;
}
.tlf-footer-bottom nav{display:flex;gap:32px}
.tlf-footer-bottom a:hover{color:#fff}

@media (max-width:1023px){
  .tlf-footer{width:calc(100% - 32px);padding:40px 30px 24px}
  .tlf-footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:760px){
  .tlf-footer{width:calc(100% - 32px);border-radius:18px;padding:32px 22px 22px}
  .tlf-footer-grid{grid-template-columns:1fr;gap:30px}
  .tlf-footer-bottom{flex-direction:column;gap:18px}
  .tlf-socials a{width:44px;height:44px}
}
/* Très petit mobile : marges latérales encore réduites pour ne pas couper
   le footer ni forcer un scroll horizontal sur 320px. */
@media (max-width:414px){
  .tlf-footer{width:calc(100% - 16px);padding:28px 18px 18px}
  .tlf-footer-bottom{font-size:11px;text-align:center}
  .tlf-footer-bottom nav{flex-wrap:wrap;justify-content:center;gap:14px}
}