/* Marché local — l'appel sur le site.
   Deux couleurs, la typographie de la lettre, et rien qui bouge sans raison. */
.vml-appel{
  --fond:#FAF9F6; --nuit:#17181A; --ink:#17181A; --ink-2:#4A4C4E; --mute:#8E8F8B; --line:#E5E2DA;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
}
.vml-appel *{box-sizing:border-box}

/* ---- la carte d'angle ---- */
.vml-angle{
  position:fixed;z-index:99990;
  right:max(20px,env(safe-area-inset-right,0px));
  bottom:max(20px,env(safe-area-inset-bottom,0px));
  width:370px;max-width:calc(100vw - 32px);
  background:var(--fond);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 18px 50px rgba(23,24,26,.16),0 2px 8px rgba(23,24,26,.06);
  opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.vml-angle.vml-la{opacity:1;transform:none}
.vml-angle img.vml-photo{display:block;width:100%;height:auto;border:0}
.vml-angle .vml-dedans{padding:22px 24px 24px}
.vml-angle .vml-sur{display:block;font:700 9.5px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.vml-angle h2{margin:12px 0 0;font:300 23px/1.2 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.vml-angle h2 b{font-weight:400;font-style:italic}
.vml-angle p{margin:12px 0 0;font:400 16px/1.6 var(--serif);color:var(--ink-2)}
.vml-angle .vml-pieds{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:20px}
.vml-angle .vml-fermer{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(250,249,246,.9);color:var(--ink);font:400 18px/1 var(--sans);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.vml-angle .vml-fermer:hover{background:#fff}

/* ---- le bandeau du haut, dans le flux, sous l'en-tête du site ---- */
.vml-haut{display:block;position:relative;z-index:9;background:var(--nuit);width:100%}
.vml-haut .vml-dedans{position:relative;max-width:1320px;margin:0 auto;display:flex;gap:10px 22px;
  align-items:center;padding:14px 40px 14px max(16px,env(safe-area-inset-left,0px))}
.vml-haut .vml-visages{flex:0 0 auto;display:flex}
.vml-haut .vml-visages img{width:46px;height:46px;border-radius:999px;object-fit:cover;
  border:2px solid var(--nuit);margin-left:-14px;background:#232426}
.vml-haut .vml-visages img:first-child{margin-left:0}
.vml-haut .vml-mot{flex:1 1 auto;min-width:0}
.vml-haut .vml-sur{display:block;font:700 9.5px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.vml-haut h2{margin:3px 0 0;font:300 20px/1.3 var(--serif);letter-spacing:-.015em;color:#fff}
.vml-haut h2 b{font-weight:400;font-style:italic}
.vml-haut .vml-cta{flex:0 0 auto;padding:11px 22px;font-size:14px}
.vml-haut .vml-fermer{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:none;color:rgba(255,255,255,.45);font:400 22px/1 var(--sans);cursor:pointer;padding:4px 8px}
.vml-haut .vml-fermer:hover{color:#fff}
@media(max-width:860px){
  .vml-haut .vml-dedans{flex-wrap:wrap;gap:12px 16px;padding:14px 40px 16px 16px}
  .vml-haut .vml-visages img{width:38px;height:38px;margin-left:-12px}
  .vml-haut .vml-mot{flex:1 1 60%}
  .vml-haut h2{font-size:17.5px;line-height:1.28}
  .vml-haut .vml-cta{flex:1 1 100%;justify-content:center;order:3}
  .vml-haut .vml-fermer{top:10px;transform:none}
}
@media(max-width:420px){
  .vml-haut .vml-visages img:nth-child(4){display:none}
  .vml-haut .vml-sur{font-size:9px;letter-spacing:.2em}
}

/* ---- le bandeau du bas ---- */
.vml-bas{
  position:fixed;z-index:99990;left:0;right:0;
  bottom:0;background:var(--nuit);
  padding:16px max(18px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px));
  opacity:0;transform:translateY(100%);transition:opacity .4s ease,transform .4s ease}
.vml-bas.vml-la{opacity:1;transform:none}
.vml-bas .vml-dedans{max-width:1320px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.vml-bas .vml-mot{min-width:0}
.vml-bas .vml-sur{display:block;font:700 9.5px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.vml-bas h2{margin:6px 0 0;font:300 21px/1.25 var(--serif);letter-spacing:-.02em;color:#fff;max-width:30em}
.vml-bas h2 b{font-weight:400;font-style:italic}
.vml-bas .vml-pieds{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.vml-bas .vml-fermer{border:0;background:none;color:rgba(255,255,255,.55);font:500 14px/1 var(--sans);cursor:pointer;text-decoration:underline}
.vml-bas .vml-fermer:hover{color:#fff}

/* ---- l'appel posé dans un article ---- */
.vml-dedans-article{margin:40px 0;background:var(--nuit);border-radius:20px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:stretch}
.vml-dedans-article .vml-mot{padding:clamp(26px,3.2vw,40px)}
.vml-dedans-article .vml-sur{display:block;font:700 9.5px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.vml-dedans-article h2{margin:14px 0 0;font:300 clamp(24px,2.6vw,31px)/1.18 var(--serif);letter-spacing:-.02em;color:rgba(255,255,255,.62)}
.vml-dedans-article h2 b{font-weight:400;font-style:italic;color:#fff}
.vml-dedans-article p{margin:14px 0 0;font:400 16.5px/1.64 var(--serif);color:rgba(255,255,255,.76);max-width:30em}
.vml-dedans-article img.vml-photo{display:block;width:100%;height:100%;object-fit:cover;border:0}
@media(max-width:760px){.vml-dedans-article{grid-template-columns:1fr}
  .vml-dedans-article img.vml-photo{height:auto}}

/* ---- communs ---- */
.vml-appel .vml-cta{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--nuit);background:var(--nuit);
  color:#fff;border-radius:999px;padding:14px 24px;font:600 14.5px var(--sans);text-decoration:none;white-space:nowrap}
.vml-appel .vml-cta:hover{background:#000;border-color:#000}
.vml-appel .vml-cta.vml-clair{background:var(--fond);border-color:var(--fond);color:var(--nuit)}
.vml-appel .vml-cta.vml-clair:hover{background:#fff;border-color:#fff}
.vml-appel .vml-cta span{font-size:13px;opacity:.75}
.vml-appel .vml-refus{border:0;background:none;padding:0;font:500 14px/1.5 var(--sans);color:var(--mute);cursor:pointer;text-decoration:underline}
.vml-appel .vml-refus:hover{color:var(--ink-2)}
.vml-appel a:focus-visible,.vml-appel button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.vml-angle,.vml-bas{transition:none}}