/* ================================
   Footer LearnIO — Glasslike (scoped)
   ================================ */
#lio-footer{
  --violet: #8B5CF6;
  --violet-deep:#7C3AED;
  --violet-soft:#A78BFA;
  --teal:   #06B6D4;
  --ink:    #0F172A;
  --ink-2:  #4B5563;
  --line:   #E5E7EB;

  position: relative;
  margin: 72px auto 32px;
  max-width: 1100px;
  border-radius: 18px;
  border: 1px solid rgba(99,102,241,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.86));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 40px rgba(99,102,241,.10);
  overflow: hidden;
}

/* Halos violet/teal comme le hero */
#lio-footer::before,
#lio-footer::after{
  content:"";
  position:absolute;
  pointer-events:none;
  filter: blur(2px);
  opacity:.9;
}
#lio-footer::before{
  inset:-15% 40% auto -15%;
  height: 380px;
  background: radial-gradient(520px 240px at 30% 35%,
              rgba(139,92,246,.18) 0%,
              rgba(6,182,212,.14) 55%,
              transparent 80%);
}
#lio-footer::after{
  inset:auto -20% -25% 45%;
  height: 320px;
  background: radial-gradient(520px 240px at 70% 65%,
              rgba(6,182,212,.14) 0%,
              rgba(139,92,246,.12) 50%,
              transparent 80%);
}

/* ===== Layout principal ===== */
#lio-footer .lio-wrap{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 280px minmax(0,1fr) 140px; /* pas d’overflow */
  gap: 18px;
  padding: clamp(24px, 4vw, 36px);
  color: var(--ink);
}
#lio-footer .lio-col{ min-width: 0; }              /* toutes les colonnes peuvent se contracter */

/* ===== Col A : brand ===== */
#lio-footer .lio-brand{ display:flex; flex-direction:column; gap:10px; }

/* ✅ Logo : jamais déformé (ratio natif conservé) */
#lio-footer .lio-logo{
  height: 88px;                    /* ajuste (72–96px) */
  width: auto !important;
  max-width: 100%;
  display:block;
  object-fit: contain;
  aspect-ratio: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

#lio-footer .lio-by{ color: var(--ink-2); font-size: 13px; margin: 2px 0 6px; }

#lio-footer .lio-legal{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size: 13.5px; color: var(--ink-2);
}
#lio-footer .lio-legal a{
  color:#1B2540; text-decoration:none; border-bottom:1px dashed transparent;
  transition: color .2s ease, border-color .2s ease;
}
#lio-footer .lio-legal a:hover{ color: var(--violet-deep); border-color: rgba(139,92,246,.35); }

#lio-footer .lio-copy{ margin-top:6px; font-size: 12.5px; color: var(--ink-2); }

/* ===== Col B : formulaire ===== */
#lio-footer .lio-contact h3{
  margin:0 0 8px; font: 800 18px/1.2 var(--font-display, Poppins, Inter, system-ui, sans-serif);
}
#lio-footer .lio-form{
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(6,182,212,.10);
  padding: 14px;
  overflow: hidden;                 /* contient ses enfants */
}
#lio-footer .lio-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* pas d’overflow dans la rangée */
  gap: 12px;
}
#lio-footer .lio-field{ display:flex; flex-direction:column; gap:6px; }
#lio-footer .lio-field-full{ grid-column: 1 / -1; }
#lio-footer .lio-label{
  font: 700 12px/1 var(--font-ui, Inter, system-ui, sans-serif); color:#1B2540;
}

#lio-footer input[type="text"],
#lio-footer input[type="email"],
#lio-footer textarea{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing: border-box;            /* empêche tout dépassement */
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(248,250,252,.85);
  color: var(--ink);
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  font: 500 14px/1.55 var(--font-ui, Inter, system-ui, sans-serif);
}
#lio-footer textarea{ resize: vertical; min-height: 120px; }

#lio-footer input:focus,
#lio-footer textarea:focus{
  border-color: rgba(6,182,212,.55);
  box-shadow: 0 0 0 6px rgba(6,182,212,.12);
  background: #fff;
}

#lio-footer .lio-consent{
  display:flex; align-items:center; gap:10px;
  margin: 6px 0 10px; font-size: 13px; color: var(--ink-2);
}
#lio-footer .lio-consent input{ width:16px; height:16px; }

/* Actions */
#lio-footer .lio-actions{ display:flex; justify-content:flex-end; }
#lio-footer .btn-violet{
  appearance:none; border:1px solid rgba(139,92,246,.55);
  background: linear-gradient(180deg, var(--violet) 0%, var(--violet-deep) 100%);
  color:#fff; font-weight:700; border-radius: 999px;
  padding: .8rem 1.4rem; cursor:pointer;
  box-shadow: 0 10px 24px rgba(139,92,246,.28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#lio-footer .btn-violet:hover{
  background: linear-gradient(180deg, var(--violet-soft) 0%, var(--violet) 100%);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(139,92,246,.36);
}

/* ===== Col C : réseaux ===== */
#lio-footer .lio-socials h3{
  margin:0 0 8px; font: 800 18px/1.2 var(--font-display, Poppins, Inter, system-ui, sans-serif);
}
#lio-footer .lio-socials{ width: 140px; }

#lio-footer .socials{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
#lio-footer .socials a{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius: 999px; color:#1B2540; text-decoration:none;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(79,70,229,.25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}
#lio-footer .socials a:hover{
  transform: translateY(-1px) scale(1.05);
  color: var(--violet-deep);
  box-shadow: 0 10px 22px rgba(139,92,246,.22);
}
#lio-footer .socials svg{ width:20px; height:20px; display:block; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  #lio-footer .lio-wrap{ grid-template-columns: 1fr; }
  #lio-footer .lio-logo{ height: 80px; }
  #lio-footer .lio-actions{ justify-content:flex-start; }
}

@media (max-width: 820px){
  #lio-footer .lio-row{ grid-template-columns: 1fr; } /* inputs en pile */
}