/* Site-wide WhatsApp bubble + lead panel (prénom, nom, téléphone, opt-in) — component delivered
   on 2026-09-11 (il-bulle-whatsapp.html / NOTICE-DEV-bulle-whatsapp.md), split into this
   stylesheet, public/files/lp/whatsapp-bubble.js and templates/partials/_whatsapp_bubble.html.twig.
   Everything is scoped under .ilwa (form controls under #ilwa: the Bootstrap site styles
   input/select/label globally and must not win); the site does not load Plus Jakarta Sans / Inter,
   the stacks fall back to the system font. Two hooks for the host page:
     --ilwa-z         stacking base (bubble z, hide button z+1, panel z+2), 9990 by default
     --ilwa-bottom-m  bottom offset on mobile (landings raise it above their sticky CTA). */
.ilwa{--wa:#25D366;--wa-d:#1EBE5B;--wa-hd:#075E54;--wa-chat:#ECE5DD;--wa-in:#fff;
  --ink:#0A1611;--muted:#5E6B63;--line:#E7ECE9;--line2:#D7DEDA;--green:#0E5C43;
  --head:'Plus Jakarta Sans',Inter,sans-serif;--body:Inter,-apple-system,sans-serif}
.ilwa *{box-sizing:border-box}

/* ════ la bulle ════ */
.ilwa-bub{position:fixed;z-index:var(--ilwa-z,9990);right:20px;bottom:20px;display:flex;align-items:center;gap:12px;
  max-width:calc(100vw - 40px);padding:10px 20px 10px 10px;border:0;border-radius:999px;
  background:var(--wa);color:#fff;text-align:left;cursor:pointer;font-family:var(--head);
  box-shadow:0 16px 36px -10px rgba(18,140,80,.55),0 2px 8px rgba(0,0,0,.1);
  transform:translateY(26px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .4s,visibility .4s,
    background .15s,padding .25s,gap .25s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ilwa-bub.on{transform:none;opacity:1;visibility:visible;pointer-events:auto}
.ilwa-bub:hover{background:var(--wa-d)}
.ilwa-bub .ic{position:relative;flex:0 0 42px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.ilwa-bub .ic svg{width:24px;height:24px;fill:#fff;transition:opacity .18s,transform .18s}
.ilwa-bub .ic .cross{position:absolute;opacity:0;transform:rotate(-90deg)}
.ilwa-bub .tx{min-width:0;overflow:hidden;transition:max-width .25s,opacity .2s}
.ilwa-bub .t1{display:block;font-size:14.5px;font-weight:800;line-height:18px;letter-spacing:-.1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ilwa-bub .t2{display:block;font-size:12.5px;font-weight:600;line-height:16px;opacity:.92;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ilwa-x{position:fixed;z-index:calc(var(--ilwa-z,9990) + 1);right:14px;bottom:66px;
  width:24px;height:24px;border-radius:50%;border:0;
  background:#fff;color:var(--muted);font-size:13px;line-height:1;cursor:pointer;padding:0;
  box-shadow:0 2px 6px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
.ilwa-bub.on ~ .ilwa-x{opacity:1;visibility:visible;pointer-events:auto}
.ilwa-bub .dot{position:absolute;left:38px;top:10px;width:9px;height:9px;border-radius:50%;
  background:#B9F6CA;box-shadow:0 0 0 0 rgba(185,246,202,.7)}
.ilwa-bub.on .dot{animation:ilwa-pulse 2.4s infinite}
@keyframes ilwa-pulse{0%{box-shadow:0 0 0 0 rgba(185,246,202,.65)}
  70%{box-shadow:0 0 0 9px rgba(185,246,202,0)}100%{box-shadow:0 0 0 0 rgba(185,246,202,0)}}
/* état ouvert : la bulle se réduit à un rond de fermeture */
.ilwa.open .ilwa-bub{padding:10px;gap:0}
.ilwa.open .ilwa-bub .tx{max-width:0;opacity:0}
.ilwa.open .ilwa-bub .dot,.ilwa.open .ilwa-x{opacity:0;visibility:hidden;pointer-events:none}
.ilwa.open .ilwa-bub .wa{opacity:0;transform:rotate(90deg)}
.ilwa.open .ilwa-bub .cross{opacity:1;transform:none}

/* ════ le panneau, ancré au-dessus de la bulle ════ */
.ilwa-panel{position:fixed;z-index:calc(var(--ilwa-z,9990) + 2);right:20px;bottom:92px;
  width:352px;max-width:calc(100vw - 40px);
  max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overflow-y:auto;
  border-radius:16px;background:#fff;font-family:var(--body);
  box-shadow:0 24px 60px -18px rgba(6,30,22,.4),0 4px 14px rgba(0,0,0,.1);
  transform-origin:bottom right;transform:scale(.82) translateY(18px);opacity:0;visibility:hidden;
  transition:transform .26s cubic-bezier(.2,.9,.25,1),opacity .2s,visibility .26s}
.ilwa.open .ilwa-panel{transform:none;opacity:1;visibility:visible}

.ilwa-top{display:flex;align-items:center;gap:11px;padding:12px 15px;background:var(--wa-hd);color:#fff}
.ilwa-top .av{position:relative;flex:0 0 42px;width:42px;height:42px}
.ilwa-top .av img{width:42px;height:42px;border-radius:50%;object-fit:cover;display:block;
  background:#0E7A69;box-shadow:0 0 0 1.5px rgba(255,255,255,.28)}
.ilwa-top .av i{position:absolute;right:0;bottom:1px;width:10px;height:10px;border-radius:50%;
  background:#4ADE80;box-shadow:0 0 0 2px var(--wa-hd)}
.ilwa-top .who{min-width:0;flex:1}
.ilwa-top .nm{display:block;font-family:var(--head);font-weight:700;font-size:14.5px;line-height:18px}
.ilwa-top .st{display:block;font-size:11px;line-height:14.5px;opacity:.82;margin-top:2px}
.ilwa-top .st em{display:block;font-style:normal}
.ilwa-top .cl{flex:0 0 28px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;
  color:#fff;opacity:.75;font-size:19px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center}
.ilwa-top .cl:hover{opacity:1;background:rgba(255,255,255,.12)}

.ilwa-chat{padding:18px 15px 16px;background:var(--wa-chat);
  background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:18px 18px}
.ilwa-msg{position:relative;max-width:90%;background:var(--wa-in);border-radius:2px 9px 9px 9px;
  padding:9px 12px 7px;font-size:14px;line-height:20px;color:#111;box-shadow:0 1px 1px rgba(0,0,0,.13);
  animation:ilwa-in .3s ease both}
.ilwa-msg::before{content:"";position:absolute;left:-7px;top:0;border:7px solid transparent;
  border-top-color:var(--wa-in);border-right:0}
.ilwa-msg .h{font-size:11.5px;color:#5E7D74;display:block;text-align:right;margin-top:3px}
@keyframes ilwa-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

#ilwa .ilwa-form{padding:15px 15px 16px;background:#fff;margin:0}
#ilwa .ilwa-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
#ilwa .ilwa-in{width:100%;border:1.5px solid var(--line2);border-radius:11px;padding:12px 13px;
  font-family:var(--body);font-size:16px;color:#15241E;background:#fff;outline:none;margin:0;height:auto;
  transition:border-color .12s,box-shadow .12s,background .12s}
#ilwa .ilwa-in::placeholder{color:#6B7772}
#ilwa .ilwa-in:focus,#ilwa .ilwa-cc:focus{border-color:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.16);
  outline:2px solid transparent;outline-offset:2px}
#ilwa .ilwa-go:focus-visible,#ilwa .ilwa-top .cl:focus-visible,.ilwa-x:focus-visible{
  outline:2px solid var(--wa-hd);outline-offset:2px}
#ilwa .ilwa-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
#ilwa .ilwa-in.bad{border-color:#B42318;background:#FEF6F5}
#ilwa .ilwa-tel{display:flex;gap:8px}
#ilwa .ilwa-cc{flex:0 0 104px;border:1.5px solid var(--line2);border-radius:11px;padding:0 7px;margin:0;height:auto;
  font-family:var(--body);font-size:14.5px;color:#15241E;background:#fff;cursor:pointer}
#ilwa .ilwa-err{font-size:12.5px;color:#B42318;min-height:16px;margin:2px 0 0}
#ilwa .ilwa-opt{display:flex;align-items:flex-start;gap:9px;margin:8px 0 2px;cursor:pointer;
  padding:8px 9px;border:1.5px solid transparent;border-radius:10px;font-weight:400;
  transition:border-color .14s,background .14s}
/* The site strips the native checkbox look (appearance:none) and displays links as blocks. */
#ilwa .ilwa-opt input{flex:0 0 18px;width:18px;height:18px;margin:0;accent-color:var(--wa);cursor:pointer;
  -webkit-appearance:checkbox;appearance:auto;position:static;opacity:1}
#ilwa .ilwa-opt span{font-size:11.5px;line-height:16px;color:var(--muted)}
#ilwa .ilwa-opt.bad{border-color:#B42318;background:#FEF6F5}
#ilwa .ilwa-opt.bad span{color:#B42318}
#ilwa .ilwa-opt.bad input{accent-color:#B42318;outline:2px solid #B42318;outline-offset:1px;border-radius:4px}
#ilwa .ilwa-go{width:100%;min-height:50px;margin-top:4px;border:0;border-radius:12px;background:var(--wa);
  color:#fff;font-family:var(--head);font-weight:800;font-size:15.5px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 12px 26px -12px rgba(18,140,80,.7);transition:background .15s,transform .08s;
  touch-action:manipulation}
#ilwa .ilwa-go:hover{background:var(--wa-d)}
#ilwa .ilwa-go:active{transform:scale(.99)}
#ilwa .ilwa-go[disabled]{opacity:.6;cursor:wait}
#ilwa .ilwa-go svg{width:18px;height:18px;fill:#fff}
#ilwa .ilwa-legal{font-size:12px;line-height:17px;color:var(--muted);margin:10px 0 0;text-align:center}
#ilwa .ilwa-legal a{color:var(--green);font-weight:600;display:inline}

.ilwa-ok{display:none;padding:34px 22px;text-align:center;background:#fff}
.ilwa-ok.on{display:block}
.ilwa-ok .ic{width:52px;height:52px;border-radius:50%;background:#E8F8EE;display:flex;
  align-items:center;justify-content:center;margin:0 auto 12px}
.ilwa-ok .ic svg{width:27px;height:27px;fill:#128C50}
.ilwa-ok h4{font-family:var(--head);font-size:17px;color:var(--ink);margin:0 0 7px}
.ilwa-ok p{font-size:13px;line-height:20px;color:var(--muted);margin:0 0 16px}
.ilwa-ok a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  padding:0 22px;border-radius:12px;background:var(--wa);color:#fff;text-decoration:none;
  font-family:var(--head);font-weight:800;font-size:15px}

/* ════ mobile ════ */
@media(max-width:560px){
  .ilwa-bub{left:14px;right:14px;bottom:var(--ilwa-bottom-m,14px);max-width:none;justify-content:flex-start;
    padding:11px 16px 11px 11px;border-radius:16px}
  .ilwa-bub .dot{left:40px;top:12px}
  .ilwa-x{bottom:calc(var(--ilwa-bottom-m,14px) + 52px)}
  .ilwa.open .ilwa-bub{left:auto;right:14px;padding:10px;border-radius:999px}
  .ilwa-panel{right:14px;left:14px;bottom:calc(var(--ilwa-bottom-m,14px) + 68px);width:auto;max-width:none;
    max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);display:flex;flex-direction:column}
  .ilwa-chat{flex:0 1 auto}
  .ilwa-form{overflow-y:auto}
}
@media(prefers-reduced-motion:reduce){
  .ilwa-bub,.ilwa-panel,.ilwa-msg,.ilwa-bub .dot{transition:none;animation:none}}