.murmur-global-footer {
  --msf-ink: #20352f;
  --msf-coral: #eb6249;
  --msf-yellow: #f3cc5d;
  --msf-paper: #fffaf1;
  color: var(--msf-paper);
  background: var(--msf-ink);
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  z-index: 20;
  overflow: hidden;
}

.murmur-global-footer * { box-sizing: border-box; }
.murmur-global-footer a { color: inherit; text-decoration: none; }

.msf-creative-zone {
  color: var(--msf-ink);
  background: #fbf7ef;
  padding: 48px 0 110px;
}

/* Une page qui propose déjà PLÜM dans son contenu ne répète pas le même grand
   appel à l'action au début du pied de page. La navigation légale et les liens
   du pied de page restent présents. */
body:has(main a[href^="/creer"]) .murmur-global-footer .msf-creative-zone,
body.pym-has-dedicated-plum-cta .murmur-global-footer .msf-creative-zone,
.murmur-global-footer .msf-creative-zone[hidden] {
  display: none !important;
}

.msf-creative {
  width: min(1500px, calc(100% - 32px));
  min-height: 302px;
  margin: 0 auto;
  padding: 52px clamp(330px, 25vw, 390px) 52px clamp(320px, 23vw, 370px);
  border-radius: 36px;
  background: linear-gradient(108deg, #dfeee7 0%, #f5e6a6 63%, #f5d66f 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 42px;
  position: relative;
  overflow: visible;
  box-shadow: 0 22px 54px rgba(32, 53, 47, .10);
}

.msf-plum {
  width: clamp(220px, 17vw, 285px);
  height: auto;
  position: absolute;
  left: clamp(35px, 5vw, 85px);
  bottom: 24px;
  filter: saturate(1.08) contrast(1.05) drop-shadow(0 18px 18px rgba(32, 53, 47, .24));
  animation: msfPlum 4.6s ease-in-out infinite;
}

.msf-creative-copy > span {
  color: #587069;
  font: 900 9px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.msf-creative-copy h2 {
  max-width: 790px;
  margin: 18px 0 14px;
  color: var(--msf-ink);
  font-size: clamp(42px, 3.5vw, 66px);
  font-weight: 900;
  line-height: .93;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}

.msf-creative-copy p {
  max-width: 850px;
  margin: 0;
  color: #5f6f69;
  font-size: 16px;
  line-height: 1.55;
}

.msf-create {
  width: min(315px, 22vw);
  min-height: 72px;
  color: #fff !important;
  background: var(--msf-ink);
  border-radius: 999px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  font: 900 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .035em;
  text-transform: uppercase;
  box-shadow: 0 15px 28px rgba(32, 53, 47, .18);
  transition: background .2s, transform .2s, box-shadow .2s;
}

.msf-create b { color: #fff; font-size: 23px; transition: transform .2s; }
.msf-create:hover { background: var(--msf-coral); transform: translateY(-3px); box-shadow: 0 19px 34px rgba(32, 53, 47, .23); }
.msf-create:hover b { transform: translateX(5px); }

.msf-navigation {
  width: min(1500px, calc(100% - 32px));
  margin: 0 auto;
  padding: 68px 0 60px;
  display: grid;
  grid-template-columns: minmax(300px, 1.28fr) repeat(3, minmax(155px, .68fr));
  gap: clamp(36px, 5vw, 92px);
  position: relative;
}

.msf-navigation::after {
  content: "";
  width: 430px;
  height: 430px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 50%;
  position: absolute;
  right: -210px;
  bottom: -300px;
  box-shadow: 0 0 0 78px rgba(255,255,255,.025), 0 0 0 156px rgba(255,255,255,.015);
  pointer-events: none;
}

.msf-brand { align-self: start; }
.msf-brand-logo {
  width: max-content;
  max-width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  background: transparent;
}
.msf-brand-lockup { width: 238px; max-width: 100%; display: flex; align-items: center; }
.msf-brand-lockup img { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 8px rgba(0,0,0,.24)); }

.msf-brand p { max-width: 410px; margin: 27px 0 22px; color: rgba(235, 242, 238, .68); font-size: 14px; line-height: 1.58; }
.msf-brand > a:last-child { color: var(--msf-yellow); font: 900 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; }

.msf-column { display: grid; align-content: start; gap: 14px; }
.msf-column > strong { color: var(--msf-yellow); margin-bottom: 9px; font: 900 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .10em; text-transform: uppercase; }
.msf-column a { width: max-content; max-width: 100%; color: rgba(255,250,241,.76); font-size: 13px; line-height: 1.25; transition: color .2s, transform .2s; }
.msf-column a:hover { color: #fff; transform: translateX(4px); }

.msf-bottom {
  min-height: 80px;
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 17px max(22px, calc((100% - 1720px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: rgba(215,223,219,.50);
  font: 800 7px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.msf-bottom nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 19px; }
.msf-bottom a:hover { color: var(--msf-yellow); }
.msf-top { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; display: grid; place-items: center; font-size: 21px; flex: 0 0 auto; transition: background .2s, color .2s, transform .2s; }
.msf-top:hover { color: var(--msf-ink); background: var(--msf-yellow); transform: translateY(-3px); }

body:has(> .murmur-global-footer) main footer:not(.murmur-global-footer) { display: none !important; }

@keyframes msfPlum {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@media (max-width: 1250px) {
  .msf-creative { padding-left: 275px; padding-right: 44px; grid-template-columns: minmax(0, 1fr) 245px; }
  .msf-plum { left: 25px; width: 235px; }
  .msf-create { width: 245px; }
  .msf-navigation { grid-template-columns: 1fr repeat(3, minmax(140px, .65fr)); gap: 38px; }
}

@media (max-width: 900px) {
  .msf-creative-zone { padding-bottom: 70px; }
  .msf-creative { width: calc(100% - 28px); min-height: 390px; padding: 42px 30px 38px 225px; grid-template-columns: 1fr; gap: 26px; }
  .msf-plum { left: 3px; width: 220px; bottom: 24px; }
  .msf-create { width: min(100%, 330px); min-height: 64px; }
  .msf-navigation { grid-template-columns: 1fr 1fr; }
  .msf-brand { grid-column: 1 / -1; }
  .msf-bottom { align-items: flex-start; flex-direction: column; }
  .msf-bottom nav { justify-content: flex-start; }
}

@media (max-width: 590px) {
  .msf-creative-zone { padding: 28px 0 54px; }
  .msf-creative { width: calc(100% - 20px); min-height: 0; padding: 198px 22px 25px; display: block; border-radius: 26px; }
  .msf-plum { width: 205px; left: 16px; top: -4px; bottom: auto; }
  .msf-creative-copy h2 { margin-top: 13px; font-size: 39px; }
  .msf-creative-copy p { font-size: 14px; }
  .msf-create { width: 100%; margin-top: 22px; }
  .msf-navigation { width: calc(100% - 34px); grid-template-columns: 1fr 1fr; padding: 51px 0 46px; gap: 42px 23px; }
  .msf-brand-lockup { width: 210px; }
  .msf-column a { font-size: 12px; }
  .msf-bottom { padding-inline: 17px; }
  .msf-bottom nav { gap: 14px; }
}

/* Dans une colonne de prévisualisation très étroite, le grand PLÜM mobile
   arrivait jusque sous la flèche fixe de remontée. Cette variante compacte
   garde les deux commandes dans deux zones horizontales distinctes. */
@media (max-width: 340px) {
  .msf-creative { padding-top: 152px; }
  .msf-plum {
    width: 142px;
    left: 8px;
    top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msf-plum { animation: none; }
}
