/* =====================================================================
   FOOTER — vue/footer.php
   Charte SYO Web : Gliker (titres) · Schibsted Grotesk · JetBrains Mono
   #FF8A3D / #F57323 · noir · blanc — classes préfixées « ft- »
   ===================================================================== */
.ft{
  --ft-bg:#FFFFFF; --ft-soft:#F5F5F7; --ft-card:#FFFFFF; --ft-ink:#0B0B0C; --ft-dim:#6E6E73; --ft-mute:#A1A1A6;
  --ft-line:rgba(0,0,0,.08); --ft-acc:#FF8A3D; --ft-acc2:#F57323;
  --ft-ease:cubic-bezier(.22,.8,.24,1);
  --ft-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ft-display:"Gliker","Schibsted Grotesk",system-ui,sans-serif;
  --ft-mono:"JetBrains Mono",ui-monospace,monospace;
  position:relative; overflow:hidden; background:var(--ft-bg); color:var(--ft-ink);
  font-family:var(--ft-sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  padding:24px 0 0; border-top:1px solid var(--ft-line);
}
html[data-theme="dark"] .ft{
  --ft-bg:#000; --ft-soft:#111113; --ft-card:#161618; --ft-ink:#F5F5F7; --ft-dim:#A1A1A6; --ft-mute:#6E6E73;
  --ft-line:rgba(255,255,255,.09);
}
/* header-1.css impose « Gliker » sur a, span, button, h2 : on rétablit le texte courant */
.ft :is(a,span,button,p,li,small,b,i,h3){ font-family:var(--ft-sans) !important; }
.ft .ft-cta__title, .ft .ft-cta__title *, .ft .ft-giant span{ font-family:var(--ft-display) !important; }
.ft :is(.ft-k,.ft-col__t,.ft-lines small){ font-family:var(--ft-mono) !important; }
.ft *{ box-sizing:border-box; }
.ft :where(h2,h3,p,ul,figure){ margin:0; padding:0; }
.ft :where(ul){ list-style:none; }
.ft a{ color:inherit; text-decoration:none; }
.ft-wrap{ width:min(1200px, calc(100% - 40px)); margin:0 auto; }

/* Apparition */
.ft-js [data-ft]{ opacity:0; transform:translateY(16px); }
.ft-js [data-ft].in{ opacity:1; transform:none; transition:opacity .8s var(--ft-ease), transform .8s var(--ft-ease); transition-delay:var(--d,0s); }

/* ---------- 1. Accroche ---------- */
.ft-cta{ position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap;
  padding:clamp(1.8rem,4vw,3.2rem); border-radius:28px; background:#0B0B0C; color:#fff; }
html[data-theme="dark"] .ft-cta{ background:#161618; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.ft-cta__glow{ position:absolute; right:-8%; top:-70%; width:55%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,138,61,.5), transparent 65%); filter:blur(24px); }
.ft-cta > :not(.ft-cta__glow){ position:relative; }
.ft-k{ display:inline-flex; align-items:center; gap:.55rem; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ft-acc); }
.ft-k::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ft-acc); box-shadow:0 0 0 4px rgba(255,138,61,.22); }
.ft-cta__title{ margin-top:.9rem !important; font-size:clamp(1.7rem,3.6vw,2.9rem); font-weight:400; line-height:1.08; letter-spacing:-.02em; max-width:18ch; color:#fff; }
.ft-cta__title span{ color:var(--ft-acc); }
.ft-cta__btns{ display:flex; flex-wrap:wrap; gap:.7rem; }
.ft-btn{ display:inline-flex; align-items:center; gap:.5rem; height:48px; padding:0 1.35rem; border-radius:999px; font-size:.92rem; font-weight:600; white-space:nowrap;
  transition:background .25s, color .25s, border-color .25s, transform .25s var(--ft-ease); }
.ft-btn:hover{ transform:translateY(-2px); }
.ft-btn--acc{ background:linear-gradient(135deg,var(--ft-acc),var(--ft-acc2)); color:#160B03 !important; box-shadow:0 14px 30px -14px rgba(245,115,35,.8); }
.ft-btn--acc svg{ transition:transform .3s var(--ft-ease); }
.ft-btn--acc:hover svg{ transform:rotate(45deg); }
.ft-btn--line{ border:1px solid rgba(255,255,255,.25); color:#fff !important; }
.ft-btn--line:hover{ border-color:#25D366; color:#25D366 !important; }

/* ---------- 2. Grille ---------- */
.ft-grid{ display:grid; grid-template-columns:1.25fr .7fr .9fr 1.35fr; gap:14px; margin-top:14px; }
.ft-card{ border-radius:24px; background:var(--ft-soft); padding:1.6rem; }
.ft-col{ padding:1.6rem .6rem; }
.ft-col__t{ display:block; margin-bottom:1rem !important; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ft-mute); }

.ft-brand{ display:flex; flex-direction:column; gap:1.1rem; }
.ft-logo{ display:flex; align-items:center; gap:.8rem; }
.ft-logo img{ width:52px; height:52px; object-fit:contain; border-radius:14px; background:var(--ft-card); padding:4px; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.ft-base{ display:flex; flex-wrap:wrap; gap:.35rem; font-weight:800; font-size:1.02rem; letter-spacing:-.02em; }
.ft-base i{ font-style:normal; }
.ft-base b{ color:var(--ft-acc); }
.ft-brand > p{ font-size:.9rem; color:var(--ft-dim); line-height:1.6; }

/* Réseaux sociaux (balisage : vue/footer-socials.php) */
.ft .fm-social{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.ft .fm-social a{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--ft-card); color:var(--ft-ink);
  box-shadow:0 1px 2px rgba(0,0,0,.06); transition:background .25s, color .25s, transform .3s var(--ft-ease); }
.ft .fm-social a:hover{ background:var(--ft-ink); color:var(--ft-bg); transform:translateY(-3px); }
.ft .fm-social svg{ width:18px; height:18px; fill:currentColor; }

.ft-col ul{ display:grid; gap:.15rem; }
.ft-col a{ position:relative; display:inline-flex; align-items:center; gap:.4rem; padding:.32rem 0; font-size:.93rem; color:var(--ft-dim); transition:color .2s, transform .3s var(--ft-ease); }
.ft-col a::before{ content:""; width:0; height:1.5px; background:var(--ft-acc); transition:width .3s var(--ft-ease); }
.ft-col a:hover{ color:var(--ft-ink); }
.ft-col a:hover::before{ width:12px; }

.ft-contact{ display:flex; flex-direction:column; gap:1rem; }
.ft-contact .ft-col__t{ margin-bottom:0 !important; }
.ft-lines{ display:grid; gap:.4rem; }
.ft-lines a{ display:flex; align-items:flex-start; gap:.8rem; padding:.5rem; margin:0 -.5rem; border-radius:14px; transition:background .2s; }
.ft-lines a:hover{ background:var(--ft-card); }
.ft-ic{ display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:11px; background:var(--ft-card); color:var(--ft-acc2); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.ft-ic svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ft-lines a > span:last-child{ display:flex; flex-direction:column; font-size:.9rem; font-weight:600; line-height:1.4; }
.ft-lines small{ font-size:10.5px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--ft-mute); margin-bottom:.1rem; }
.ft-lines li:last-child a > span:last-child{ font-weight:500; font-size:.84rem; color:var(--ft-dim); }

.ft-map{ position:relative; border-radius:18px; overflow:hidden; height:170px; background:var(--ft-card); }
.ft-map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) contrast(1.05); transition:filter .5s; }
.ft-map:hover iframe{ filter:none; }
html[data-theme="dark"] .ft-map iframe{ filter:grayscale(1) invert(.92) hue-rotate(180deg); }
.ft-map__btn{ position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .85rem; border-radius:999px;
  background:#0B0B0C; color:#fff !important; font-size:.8rem; font-weight:600; transition:background .25s, color .25s; }
.ft-map__btn:hover{ background:var(--ft-acc); color:#160B03 !important; }

/* ---------- 3. Signature géante ---------- */
.ft-giant{ display:flex; justify-content:space-between; gap:2vw; margin:28px 0 -0.18em; line-height:.8; user-select:none; pointer-events:none; }
.ft-giant span{ font-size:clamp(4.5rem,19vw,17rem); font-weight:400; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px var(--ft-line);
  background:linear-gradient(180deg, var(--ft-soft), transparent 85%); -webkit-background-clip:text; background-clip:text; }
html[data-theme="dark"] .ft-giant span{ -webkit-text-stroke-color:rgba(255,255,255,.12); }

/* ---------- 4. Bas de page ---------- */
.ft-bottom{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; padding:18px 0 22px; border-top:1px solid var(--ft-line); font-size:.82rem; color:var(--ft-dim); }
.ft-legal{ display:flex; gap:1.2rem; }
.ft-legal a{ transition:color .2s; }
.ft-legal a:hover{ color:var(--ft-acc2); }
.ft-made{ display:inline-flex; align-items:center; gap:.5rem; }
.ft-live{ width:7px; height:7px; border-radius:50%; background:var(--ft-acc); box-shadow:0 0 0 4px rgba(255,138,61,.18); }
.ft-top{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--ft-line); background:var(--ft-card); color:var(--ft-ink); cursor:pointer;
  transition:background .25s, color .25s, transform .3s var(--ft-ease); }
.ft-top:hover{ background:var(--ft-ink); color:var(--ft-bg); transform:translateY(-3px); }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .ft-grid{ grid-template-columns:1fr 1fr; }
  .ft-brand{ grid-column:1 / -1; }
  .ft-contact{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .ft-contact .ft-col__t{ grid-column:1 / -1; }
  .ft-map{ height:100%; min-height:200px; }
}
@media (max-width:640px){
  .ft-wrap{ width:calc(100% - 24px); }
  .ft-cta{ border-radius:22px; }
  .ft-cta__btns, .ft-btn{ width:100%; }
  .ft-btn{ justify-content:center; }
  .ft-card{ padding:1.3rem; border-radius:20px; }
  .ft-col{ padding:1.1rem .4rem; }
  .ft-contact{ display:flex; }
  .ft-map{ height:180px; min-height:0; }
  .ft-bottom{ flex-direction:column; align-items:flex-start; padding-bottom:84px; }
  .ft-top{ position:absolute; right:0; top:14px; }
}
@media (prefers-reduced-motion:reduce){
  .ft *{ transition:none !important; animation:none !important; }
  .ft-js [data-ft]{ opacity:1; transform:none; }
}

/* ---------- Bouton WhatsApp flottant (inchangé) ---------- */
#syo-wa{
  position:fixed; right:clamp(14px,2.5vw,26px); bottom:clamp(14px,2.5vw,26px);
  z-index:140; display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; color:inherit;
  font-family:"Schibsted Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .45s cubic-bezier(.22,1,.36,1),
             transform .55s cubic-bezier(.34,1.4,.64,1);
}
#syo-wa.on{ opacity:1; transform:none; pointer-events:auto; }
#syo-wa .wa-tip{
  max-width:0; overflow:hidden; white-space:nowrap;
  padding:0; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:-.01em; line-height:1;
  color:#0D0B0A; background:#FFFFFF;
  border:1px solid rgba(13,11,10,.1);
  box-shadow:0 16px 34px -22px rgba(13,11,10,.6);
  transition:max-width .5s cubic-bezier(.22,1,.36,1), padding .5s cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"] #syo-wa .wa-tip{ color:#F6F1EB; background:#1A1615; border-color:rgba(246,241,235,.14); }
#syo-wa:hover .wa-tip{ max-width:240px; padding:.72rem 1rem; }
#syo-wa .wa-btn{
  position:relative; width:56px; height:56px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; color:#FFFFFF;
  background:linear-gradient(140deg,#4AE07E,#25D366 55%,#12A150);
  box-shadow:0 18px 34px -16px rgba(37,211,102,.85), 0 0 0 4px rgba(37,211,102,.14);
  transition:transform .35s cubic-bezier(.34,1.4,.64,1), box-shadow .35s;
}
#syo-wa:hover .wa-btn{ transform:scale(1.07);
  box-shadow:0 22px 40px -14px rgba(37,211,102,.95), 0 0 0 7px rgba(37,211,102,.18); }
#syo-wa .wa-btn svg{ width:29px; height:29px; }
#syo-wa .wa-btn::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:waPulse 2.6s ease-out infinite;
}
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.55); opacity:0; } }
@media (max-width:600px){
  #syo-wa .wa-tip{ display:none; }
  #syo-wa .wa-btn{ width:52px; height:52px; }
  #syo-wa .wa-btn svg{ width:26px; height:26px; }
}
@media (prefers-reduced-motion:reduce){
  #syo-wa{ opacity:1; transform:none; pointer-events:auto; }
  #syo-wa .wa-btn::before{ animation:none; opacity:0; }
}